/* Opinix Workspace: calm surfaces, colorful metrics, clear action and status roles. */
:root{--ink:#253247;--muted:#657185;--bg:#f6f8fc;--white:#fff;--line:#e5eaf2;--radius:22px;--blue:#1967d2;--green:#1967d2;--lime:#d3e3fd;--positive:#137847;--negative:#b32636;--attention:#915b08;--violet:#7357bc;--teal:#167a76;font-family:Arial,Helvetica,sans-serif;font-size:16px}
body{background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,.kpi-value{font-family:Arial,Helvetica,sans-serif;color:var(--ink)}
h2{font-size:1.02rem;font-weight:600;letter-spacing:-.2px}
.sidebar{width:232px;padding:28px 14px 22px;background:var(--bg);color:#526077;border:0;overflow-y:auto}
.logo{width:153px;height:51px;margin:0 17px}.logo img{filter:brightness(0) saturate(100%) invert(16%) sepia(15%) saturate(1379%) hue-rotate(178deg) brightness(95%) contrast(90%)}
.workspace{margin:22px 12px 26px;padding:0;border:0;font-size:.81rem;color:#35445b;gap:10px}
.workspace-mark{display:grid;width:32px;height:32px;border:0;border-radius:11px;background:#e7e2f6;color:#7357bc;font-size:.85rem;font-weight:700}
.workspace small{color:#718096;font-size:.7rem;margin-top:5px}
.nav-label{color:#718096;font-size:.64rem;letter-spacing:1.2px;margin:0 16px 10px;font-weight:700}
.sidebar nav a{color:#526077;font-size:.86rem;min-height:46px;padding:12px 16px;border-radius:28px;gap:13px;margin-bottom:5px}
.sidebar nav a:hover:not(.active){background:#e9eef7;color:#253247}
.sidebar nav a.active{background:#d3e3fd;color:#174ea6;font-weight:600;box-shadow:none}
.sidebar nav a.active:hover{background:#c7dcfc}
.sidebar nav a>span{display:flex;width:20px;align-items:center;flex:none}.sidebar nav svg{width:20px;height:20px;stroke-width:1.65}
.sidebar nav b{background:#e5eaf2;color:#53657e;font-size:.65rem;padding:3px 6px}
.sidebar nav a.active b{background:#bcd4fa;color:#174ea6}
.side-clients{margin-top:30px}.client-link{color:#5c697c;border-radius:24px;padding:11px 16px;font-size:.81rem;min-height:40px}
.client-link:hover,.client-link.selected{background:#e9eef7;color:#234467}.client-link.selected{font-weight:600}
.brand-dot{border-radius:50%;width:7px;height:7px}
.side-bottom{padding:24px 14px 0}.private-note{color:#6c788a;border-color:var(--line);font-size:.69rem;padding:0 0 14px}
.profile{font-size:.8rem;color:#405168;gap:10px;margin-top:16px}.profile small{color:#718096;font-size:.7rem}
.profile>span,.avatar,.topbar .avatar{background:#e6e1f5;color:#6d4da7;font-weight:600}
.shell{margin-left:232px;min-width:0}.topbar{height:72px;padding:0 32px;background:var(--bg);border:0;font-size:.8rem}
.topbar strong{font-weight:500}.slash{color:#b7c1d1;margin:0 12px}.top-right{gap:16px}
.snapshot-chip{background:white;color:#5c6c80;border:1px solid var(--line);font-size:.69rem;padding:7px 12px}
main{padding:19px 32px 28px;max-width:1620px}.heading{margin-bottom:24px;gap:20px}.heading h1{font-size:clamp(1.9rem,2.4vw,2.45rem);font-weight:500;letter-spacing:-1.1px}.heading h1 span{color:#8caee0}.heading p{font-size:.875rem;color:var(--muted);line-height:1.6;margin-top:9px}.eyebrow{color:#6c7b90;font-size:.64rem;letter-spacing:1.6px;margin-bottom:10px}
.button,.detail-link{border-radius:24px;min-height:42px;padding:11px 18px;font-size:.81rem;font-weight:600;box-shadow:none}
.button.export,.quota-controls .export,.detail-link{background:#1967d2;color:white;border-color:#1967d2}
.button.export:hover,.quota-controls .export:hover,.detail-link:hover{background:#174ea6;border-color:#174ea6;box-shadow:0 2px 6px #1967d224}
.button.quiet,.detail-button,.top-content-detail{background:#edf3ff;color:#1967d2;border:1px solid #d9e5fa;font-weight:600}
.button.quiet:hover,.detail-button:hover,.top-content-detail:hover{background:#dfeafd}
.panel-heading>a,.source-link,.reset,.summary-context>a,.insights-link,.notice a{color:#1967d2}
.panel-heading>a:hover,.source-link:hover,.summary-context>a:hover,.insights-link:hover,.notice a:hover{text-decoration:underline;text-underline-offset:4px}
.reset{padding:12px 6px;min-height:42px}.reset:hover{color:#174ea6;text-decoration:underline}
.notice{background:#edf3fc;border:0;border-radius:16px;color:#5d718c;padding:12px 16px;font-size:.75rem;margin-bottom:16px;gap:12px}
.notice strong{color:#3d5779;font-weight:600}.notice-icon{background:#dae8fc;color:#37649b;border:0;font-family:inherit;font-size:.75rem;height:24px;width:24px}.notice span:not(.notice-icon){line-height:1.6}.notice a{font-size:.75rem}
.filters,.quota-controls{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;gap:12px;box-shadow:none;margin-bottom:24px}
.filters label,.quota-controls label{font-size:.71rem;color:#617086;gap:8px;min-width:115px}.filters .date-filter{min-width:145px}
.filters input,.filters select,.quota-controls input,.quota-controls select,input[type=search],select{background:#fff;border:1px solid #dbe2ec;border-radius:10px;color:#35465f;font-size:.8rem;min-height:42px;box-shadow:none}
.filters .date-filter input{background:white;border-color:#dbe2ec}.filters input:hover,.filters select:hover,.quota-controls input:hover,.quota-controls select:hover{border-color:#a5bee4}
.period-coverage{font-size:.71rem;color:#728198;line-height:1.65;padding-top:3px}
.panel{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 2px 5px #25324702}
.panel-heading{padding:22px 24px 19px}.panel-heading p{font-size:.77rem;line-height:1.6;color:var(--muted)}.panel-heading>a{font-size:.75rem;font-weight:600}
.summary-cards{gap:16px;margin-bottom:10px}.summary-metric{border:0!important;min-height:175px;border-radius:22px;padding:23px 22px 19px;box-shadow:none}
.kpi.primary{background:#e5edff;color:#174ea6;border:0;box-shadow:none}.kpi:not(.primary):nth-child(2){background:#eee8fa;border-color:transparent}.kpi:not(.primary):nth-child(3){background:#e0f1ee;border-color:transparent}.kpi:not(.primary):nth-child(4){background:#fcebdc;border-color:transparent}
.kpi.summary-metric .kpi-label{font-size:.79rem;font-weight:500;color:#51647f;line-height:1.5;gap:12px}
.kpi.summary-metric .kpi-value{font-size:clamp(1.65rem,2.5vw,2.6rem);font-weight:500;line-height:1.16;letter-spacing:-1.1px;margin:20px 0 13px;color:#174ea6;overflow-wrap:anywhere}
.kpi.summary-metric:nth-child(2) .kpi-value{color:#6746a3}.kpi.summary-metric:nth-child(3) .kpi-value{color:#176c69}.kpi.summary-metric:nth-child(4) .kpi-value{color:#965323}
.metric-symbol{width:22px;height:22px;stroke:currentColor;stroke-width:1.65;fill:none;flex:none;opacity:.8}
.kpi.summary-metric .kpi-note{color:#596d86;font-size:.71rem;gap:4px 7px;line-height:1.6}
.summary-achieved{background:#ffffffb5;font-size:.67rem;padding:2px 6px;border-radius:6px}
.summary-context{margin-bottom:20px;font-size:.72rem;color:#728198;gap:14px}.summary-context a{font-size:.73rem}
.charts-grid,.bottom-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:20px;margin-bottom:20px}
.trend-chart{min-height:180px}.trend-chart svg{height:205px}.trend-chart svg text{fill:#75849a;font-family:inherit}
.chart-note{font-size:.71rem;color:#728198;padding:8px 24px 20px}.legend{font-size:.7rem}.legend i{background:#527fce}
.bar-track{background:#edf1f8;height:7px}.bar-top{font-size:.78rem}.brand-bar{margin:17px 0}
.resume-panel{background:#ecf0fc;color:#4e627e;border:1px solid #e0e7f7;border-radius:22px;padding:24px}
.resume-label{color:#6375a0;font-size:.65rem;letter-spacing:1.35px}.resume-panel h2{color:#2c4676;font-size:1.08rem;font-weight:500}
.resume-panel .insight{color:#566a86;border-color:#dce4f4;font-size:.82rem;line-height:1.7}.resume-panel strong{color:#304971;font-weight:600}.resume-panel a{color:#1967d2;font-size:.75rem}
.table-scroll th{background:#f8fafd;color:#718096;font-size:.7rem;font-weight:500;padding:13px 20px}.table-scroll td{border-color:#edf0f6;font-size:.8rem;padding:17px 20px}
tr:hover td{background:#f7faff}.brand-row:hover .brand-name{color:#1967d2}.brand-name{font-weight:500}.brand-badge{border-radius:10px;font-weight:600}
.status{border-radius:7px;background:#eef2f8;color:#617086;font-size:.7rem}.status.warn{background:#fff3dc;color:#915b08}.issue-list{color:#915b08;font-size:.77rem}.platform-tag{background:#edf2fc;color:#5673a5;font-size:.66rem}
.detail-button{border-radius:50%;height:36px;width:36px}.account-icon{background:#edf0fb;color:#6374a9}.pagination{font-size:.75rem}
.top-content-grid{gap:14px}.top-content-card{border-radius:17px;border-color:var(--line);background:#fff;overflow:hidden;transition:box-shadow .18s,border-color .18s}
.top-content-card:hover{box-shadow:0 5px 20px #2b476413;border-color:#c7d8f2}.top-content-copy{padding:15px}.top-content-copy h3{font-size:.84rem;font-weight:600}.top-content-copy>small,.top-content-copy>p{color:#738095}.top-content-detail{border-radius:24px;min-height:38px;font-size:.73rem}.top-content-visual.no-image{background:#f0f3fa}.image-unavailable{color:#73829a}.top-position{border-radius:10px}.top-content-numbers strong{color:#253247}
.source-state{background:#e5f1ee;color:#31675e;border:1px solid #d4e7e1;border-radius:16px}.source-card{border-radius:18px;padding:20px 24px}.source-meta small{color:#718096}.source-card h3{font-weight:600}.method-grid p,.audit-info p,.connection-note p{font-size:.85rem}.source-intro h2{font-weight:500}
.metric-box{background:#f3f6fc;border-radius:14px}.detail-notice{background:#f5f8fd;border-color:#bfd3ef;padding:13px 16px;border-radius:0 12px 12px 0}.dialog-head button{background:#edf2fa;color:#4f6583}dialog{border-color:var(--line);border-radius:24px;box-shadow:0 24px 90px #1f355e29}dialog::backdrop{background:#1d2b4666;backdrop-filter:blur(4px)}
/* KPI detail: same visual language, status colors reserved for outcomes. */
.quota-chip{background:#edf2fc;color:#536d95;border-color:#e0e7f5;font-size:.8rem}.quota-period h2{font-weight:500}.basis-buttons{background:#eaf0fa;border-color:#e0e7f3;border-radius:24px;padding:4px}.basis-buttons button{border-radius:20px;color:#6c7b91;font-size:.8rem}.basis-buttons button[aria-pressed=true]{color:#1967d2;background:white;box-shadow:0 1px 4px #334e7412}
.quota-cards{gap:16px}.score-card{border-radius:22px;border-color:var(--line);box-shadow:none}.score-clip{background:#e5edff;color:#174ea6;border-color:transparent;box-shadow:none}.score-clip>p,.score-clip .score-main span{color:#557399}.score-clip .score-badge{background:#d4e2ff;color:#355c98}.score-clip .ring-track{stroke:#cbdcf9}.score-clip .ring-fill{stroke:#527fce}.score-clip .score-explanation{border-color:#cbdcf9}
.score-action{background:#eee8fa;color:#6746a3;border-color:transparent}.score-action .score-badge{background:#e0d6f5;color:#70529e}.score-action>p,.score-action .score-main span{color:#806a9f}.score-action .ring-track{stroke:#e0d6f5}.score-action .ring-fill{stroke:#9674cf}.score-main strong,.score-number{font-weight:500}
.score-gap.behind,.score-residual.behind{background:#fce9ec;border-color:#f4dce1;color:#b32636}.score-gap.achieved,.score-residual.achieved{background:#e3f3e9;border-color:#d4e8dc;color:#137847}.score-explanation summary,.insights-details summary,.quota-method summary,.quota-projections>summary{color:#1967d2;cursor:pointer}.score-explanation summary:hover,.insights-details summary:hover{text-decoration:underline;text-underline-offset:3px}
.quota-target-guide{border-color:var(--line);border-radius:18px}.quota-target-guide strong{color:#46668f}.quota-basis>p,.quota-data-note,.quota-footnote{color:#728198}.quota-calculation{background:#fff;border-color:var(--line)}.quota-equation .quota-result{border-radius:14px}.quota-pace{background:#f6f9ff}.client-performance{border-radius:20px}.client-performance-heading h3{font-weight:600}.client-initial{border-radius:12px}.comparison-grid strong{color:#364d72;font-weight:500}.comparison-grid article>b.tone-up,.tone-up{color:#137847!important}.comparison-grid article>b.tone-down,.tone-down{color:#b32636!important}.comparison-grid article>b.tone-neutral,.tone-neutral{color:#657185!important}
/* Compact, paired quantitative charts. */
.summary-interactions{margin:20px 0}.insights-body{padding:0 24px 22px}
.interaction-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:0 0 20px}.interaction-totals>div{border-right:1px solid var(--line);padding-right:14px;min-width:0}.interaction-totals>div:last-child{border:0}.interaction-totals span{display:block;font-size:.76rem;color:#61738a;line-height:1.6}.interaction-totals em{font-style:normal;color:#8190a5}.interaction-totals strong{font-size:clamp(1.35rem,2.1vw,2rem);font-weight:500;line-height:1.6;display:block;overflow-wrap:anywhere}.interaction-totals small{font-size:.71rem;color:#7a889d;line-height:1.6;display:block}
.activity-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.activity-chart-card{min-width:0;border:1px solid #e7ecf5;border-radius:18px;padding:18px 14px 10px;background:#fbfcff}.activity-chart-card:first-child{background:#f8faff}.activity-chart-card:last-child{background:#fcfaff;border-color:#eee8f5}
.activity-chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-height:77px;padding:0 4px}.activity-chart-head h3{font-size:.76rem;color:#61738a;margin:0 0 8px;font-weight:500}.activity-chart-head strong{font-size:1.65rem;color:#354f7a;font-weight:500}.activity-chart-card:last-child .activity-chart-head strong{color:#7856a4}.activity-chart-head strong small{font-size:.75rem;font-weight:400;color:#718096}
.activity-metric-label{font-size:.68rem;color:#738198;display:grid;gap:5px}.activity-metric-label select{font:inherit;font-size:.75rem;border:1px solid #dbe5f7;border-radius:18px;padding:7px 10px;color:#1967d2;background:white;max-width:165px;cursor:pointer;min-height:34px}
.activity-chart{width:100%;display:block;max-height:220px}.activity-chart text{fill:#75859b;font-family:inherit;font-size:14px}.interaction-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.73rem;color:#687a92;margin:10px 4px 8px}.interaction-legend span{display:flex;gap:7px;align-items:center}.interaction-legend i{width:16px;height:8px;display:inline-block;border-radius:3px}.received-key{background:#527fce}.performed-key{border-top:2px dashed #8a97ab!important;height:0!important}.insights-note{font-size:.74rem;color:#728198;line-height:1.7;margin:13px 0 0}.insights-details{border-top:1px solid var(--line);margin-top:13px;padding-top:9px}.insights-details>summary{font-size:.75rem;font-weight:500;line-height:1.6;padding:6px 0;min-height:32px}.insights-details table{margin-top:10px}
footer{color:#8490a3;font-size:.67rem;margin-top:28px;border-color:var(--line)}#toast{background:#253c5c;border-radius:14px}#filterError{color:#b32636}
a,button,summary{transition:background-color .16s,color .16s,box-shadow .16s}button:disabled{cursor:not-allowed;opacity:.5}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #88adeb;outline-offset:3px}
@media(min-width:1600px){main{padding:24px 42px 32px}.topbar{padding:0 42px}.summary-metric{min-height:185px}}
@media(max-width:1200px){.sidebar{width:210px;padding-left:10px;padding-right:10px}.shell{margin-left:210px}.sidebar nav a{font-size:.79rem;gap:10px}.logo{margin-left:15px;width:147px;height:49px}main{padding:18px 24px 24px}.topbar{padding:0 24px}.summary-cards{gap:12px}.summary-metric{padding:20px 17px;min-height:168px}.charts-grid,.bottom-grid{gap:18px;grid-template-columns:minmax(0,1.4fr) minmax(270px,1fr)}.panel-heading{padding:21px 20px 18px}.insights-body{padding:0 20px 22px}.activity-chart-grid{gap:12px}.activity-chart-head strong{font-size:1.4rem}}
@media(max-width:1050px){.kpi-grid,.audit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi.summary-metric .kpi-value{font-size:2.05rem}.charts-grid,.bottom-grid{grid-template-columns:1fr}.workspace-mark{display:grid}.activity-chart-grid{grid-template-columns:1fr}.activity-chart{max-height:190px}.activity-chart-head{min-height:65px}.summary-metric{min-height:162px}.interaction-totals{gap:12px}.interaction-totals strong{font-size:1.4rem}}
@media(max-width:700px){.sidebar{position:static;width:100%;padding:18px 16px 12px;border-bottom:1px solid var(--line);overflow:visible}.logo{margin:0 2px;width:135px;height:45px}.workspace,.side-clients,.side-bottom,.sidebar>.nav-label{display:none}.sidebar nav{display:flex;gap:5px;overflow-x:auto;margin-top:15px;padding-bottom:3px;scrollbar-width:thin}.sidebar nav a{font-size:.75rem;min-height:40px;padding:10px 14px;margin:0;gap:8px;flex:none}.sidebar nav a>span{display:flex;width:17px}.sidebar nav svg{width:17px;height:17px}.sidebar nav b{display:none}.shell{margin-left:0}.topbar{height:51px;padding:0 19px;font-size:.73rem}.top-right{gap:10px}.snapshot-chip{display:none}.avatar{height:28px;width:28px;font-size:.65rem}main{padding:15px 17px 22px}.heading{margin-bottom:20px;gap:14px}.heading h1{font-size:1.9rem}.heading p{font-size:.8rem;line-height:1.6}.eyebrow{font-size:.59rem;margin-bottom:8px}.heading>.button{font-size:.7rem;padding:10px 13px;min-height:39px}.notice{border-radius:14px;padding:12px;font-size:.71rem;margin-bottom:14px;gap:9px}.notice strong{display:block}.notice a{display:none}.notice-icon{height:21px;width:21px}.filters,.quota-controls{padding:15px;border-radius:18px;gap:12px;margin-bottom:19px}.filters label,.filters .date-filter{flex-basis:calc(50% - 12px);min-width:0}.filters input,.filters select{width:100%;min-width:0;font-size:16px;padding:10px 9px}.filters .quiet{font-size:.73rem}.period-coverage{font-size:.68rem}.summary-cards{gap:11px}.summary-metric{min-height:158px;padding:19px 15px;border-radius:19px}.kpi.summary-metric .kpi-value{font-size:clamp(1.45rem,5.9vw,2.05rem);margin:17px 0 12px;letter-spacing:-.8px}.kpi.summary-metric .kpi-label{font-size:.72rem;gap:7px}.metric-symbol{width:18px;height:18px}.kpi.summary-metric .kpi-note{font-size:.67rem;gap:4px}.summary-achieved{font-size:.61rem}.summary-context{flex-direction:column;gap:0;margin-bottom:17px;font-size:.68rem}.summary-context a{font-size:.7rem;min-height:32px;display:flex;align-items:center}.panel,.resume-panel{border-radius:20px}.panel-heading{padding:20px 17px 17px;gap:9px}.panel-heading h2{font-size:.92rem}.panel-heading p{font-size:.71rem}.panel-heading>a{font-size:.7rem}.charts-grid,.bottom-grid{gap:17px;margin-bottom:17px}.chart-note{padding:8px 17px 17px;font-size:.67rem}.trend-chart svg{height:190px}.resume-panel{padding:22px}.resume-panel .insight{font-size:.8rem}.summary-interactions{margin:17px 0}.insights-body{padding:0 17px 19px}.interaction-totals{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-bottom:17px}.interaction-totals>div{border:0;padding:0}.interaction-totals span,.interaction-totals small{font-size:.64rem}.interaction-totals strong{font-size:1.2rem;line-height:1.7}.activity-chart-grid{gap:13px}.activity-chart-card{padding:15px 10px 8px;border-radius:16px}.activity-chart-head{min-height:66px}.activity-chart-head strong{font-size:1.45rem}.activity-chart-head h3{font-size:.72rem}.activity-metric-label{font-size:.65rem}.activity-metric-label select{font-size:.72rem;max-width:145px}.activity-chart{max-height:185px}.interaction-legend{font-size:.66rem;gap:7px 14px}.insights-note,.insights-details>summary{font-size:.69rem}.top-content-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 17px 18px}.top-content-copy{padding:13px}.top-content-copy h3{font-size:.78rem}.top-content-detail{font-size:.67rem}.table-scroll td{font-size:.76rem;padding:15px 17px}.table-scroll th{padding:12px 17px}.quota-cards{gap:12px}.score-card{padding:18px;border-radius:20px}.score-main strong,.score-number{font-size:2rem}.quota-controls input,.quota-controls select{font-size:16px}.source-card{padding:18px}.source-card .source-meta{margin-left:59px}.methodology,.connection-note{padding:22px}.dialog-head,#detailBody{padding:20px}footer{font-size:.64rem;gap:8px}}
@media(max-width:400px){.heading>.button{padding:10px;font-size:.66rem}.summary-metric{padding:17px 12px}.metric-symbol{width:16px;height:16px}.kpi.summary-metric .kpi-label{font-size:.67rem}.interaction-totals strong{font-size:1.06rem}.interaction-totals span,.interaction-totals small{font-size:.61rem}.top-content-grid{grid-template-columns:1fr}.top-content-visual{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}