
html{scroll-behavior:auto!important;}
body{background-attachment:fixed!important;}
.topbar,.top-nav,.hero,.scope-panel,.metric-grid,.metric-card,.panel,.detail-section,.interpretation-section,.source-band{box-sizing:border-box;}
.heatmap-grid{overflow:hidden;}
.table-wrap{scrollbar-color:var(--line-strong) transparent;}
.trend-chart svg{overflow:visible;}
:root{--font-display:Segoe UI Variable Display,Segoe UI,Microsoft YaHei,sans-serif;--font-ui:Inter,Segoe UI,Microsoft YaHei,sans-serif;--ink-strong:#20213a;--ink:#3f4160;--muted:#73758f;--faint:#a2a4ba;--canvas:#f4f4fb;--canvas-strong:#ececf7;--panel:rgba(255,255,255,.78);--panel-tint:rgba(249,249,255,.76);--line:rgba(91,86,148,.12);--line-strong:rgba(91,86,148,.22);--orange:#7357e8;--orange-deep:#5940ca;--orange-soft:rgba(115,87,232,.11);--coral:#ff7f92;--coral-soft:rgba(255,127,146,.13);--green:#16b5a7;--green-soft:rgba(22,181,167,.11);--slate:#5783d8;--slate-soft:rgba(87,131,216,.12);--radius:24px;--shadow:0 18px 50px rgba(55,48,117,.10);--topbar-height:64px;}
body{background:radial-gradient(circle at 5% 8%,rgba(255,177,205,.34),transparent 28%),radial-gradient(circle at 94% 11%,rgba(129,205,255,.35),transparent 30%),radial-gradient(circle at 78% 62%,rgba(164,134,255,.20),transparent 34%),linear-gradient(180deg,#f9f8ff,#f1f3fb);}
.topbar{width:min(1380px,calc(100% - 32px));height:64px;margin:14px auto 0;padding:0 22px;top:12px;border:1px solid rgba(255,255,255,.78)!important;border-radius:20px!important;background:rgba(255,255,255,.72)!important;box-shadow:0 14px 40px rgba(61,53,129,.10);backdrop-filter:blur(22px) saturate(140%)!important;}.wordmark{font-weight:800;letter-spacing:-.02em;}.wordmark::before{color:var(--coral)!important;}.module-title{border-left-color:var(--orange)!important;}
.top-nav{width:max-content;height:42px;margin:10px auto 0;padding:4px;border:1px solid rgba(255,255,255,.75)!important;border-radius:999px!important;background:rgba(255,255,255,.62)!important;top:88px;box-shadow:0 10px 30px rgba(61,53,129,.08);backdrop-filter:blur(18px)!important;}.top-nav a{min-width:66px;border:0!important;border-radius:999px!important;}.top-nav a.active{background:var(--orange);color:#fff!important;}
.global-search,.download-link{background:rgba(255,255,255,.62)!important;border-color:var(--line-strong)!important;border-radius:999px!important;}
main{width:min(1380px,calc(100% - 40px));padding-top:24px;}
.hero{min-height:240px;padding:36px;border:1px solid rgba(255,255,255,.82)!important;border-radius:32px!important;background:linear-gradient(120deg,rgba(255,255,255,.84),rgba(247,246,255,.68))!important;box-shadow:var(--shadow);align-items:center;overflow:hidden;}
.hero::before{content:'';position:absolute;right:-40px;top:-90px;width:430px;height:430px;border-radius:50%;background:conic-gradient(from 220deg,#ff8fb2,#8b7bff,#65d5ff,#67e3c1,#ffcf7b,#ff8fb2);filter:blur(8px);opacity:.68;}
.hero::after{content:'';position:absolute;right:40px;top:22px;width:280px;height:180px;border-radius:50%;background:rgba(255,255,255,.46);filter:blur(18px);}
.hero-copy{max-width:760px;}.hero h1{font-family:Segoe UI Variable Display,Segoe UI,sans-serif!important;font-size:clamp(3rem,5.2vw,5.4rem)!important;font-weight:760!important;letter-spacing:-.065em!important;background:linear-gradient(90deg,#27284a,#7458e8 60%,#ff7088);-webkit-background-clip:text;background-clip:text;color:transparent!important;}.hero-copy>p:last-child{font-size:.82rem!important;max-width:620px;}
.scope-panel,.metric-card,.panel,.detail-section,.interpretation-section{background:var(--panel)!important;border:1px solid rgba(255,255,255,.72)!important;box-shadow:var(--shadow)!important;backdrop-filter:blur(18px) saturate(125%)!important;}
.scope-panel{border-left:1px solid rgba(255,255,255,.72)!important;border-radius:24px!important;}.family-tab{background:rgba(255,255,255,.46)!important;border-color:var(--line)!important;border-radius:16px!important;}.family-tab.active{background:linear-gradient(135deg,rgba(115,87,232,.14),rgba(255,127,146,.10))!important;color:var(--orange-deep)!important;box-shadow:inset 0 0 0 1px rgba(115,87,232,.24)!important;}
.metric-grid{border:0!important;background:transparent!important;gap:12px!important;overflow:visible!important;}.metric-card{border-radius:22px!important;min-height:116px!important;}.metric-card:nth-child(1){background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,229,237,.78))!important;}.metric-card:nth-child(2){background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(232,228,255,.78))!important;}.metric-card:nth-child(3){background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(226,247,243,.78))!important;}.metric-card:nth-child(4){background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(226,238,255,.78))!important;}
.analytics-grid{gap:14px!important;}.panel,.detail-section,.interpretation-section{border-radius:26px!important;}.panel-tag{background:rgba(255,255,255,.55)!important;border-color:var(--line)!important;}.heatmap-group-title{background:rgba(255,255,255,.50)!important;border-color:var(--line)!important;border-radius:10px 10px 0 0;}.heat-cell{border-color:rgba(255,255,255,.65)!important;}
.rank-bar{background:rgba(65,67,96,.08)!important;}.trend-chart{border-radius:18px;background:rgba(255,255,255,.32);padding:8px;}.chart-grid{stroke:rgba(80,77,132,.10)!important;}
.interpretation-lead{background:linear-gradient(90deg,rgba(115,87,232,.10),rgba(77,203,196,.06))!important;border-left-color:var(--orange)!important;border-radius:16px;}.interpretation-card{background:rgba(255,255,255,.48)!important;border-color:rgba(91,86,148,.10)!important;border-radius:18px!important;}
.table-wrap{border-color:var(--line)!important;border-radius:18px!important;}th{background:rgba(239,238,251,.92)!important;color:#62647d!important;}tbody tr:hover{background:rgba(115,87,232,.045)!important;}
.source-band{border:1px solid rgba(255,255,255,.74)!important;border-radius:22px!important;background:rgba(255,255,255,.54)!important;box-shadow:var(--shadow);margin-bottom:12px;}footer{color:#8688a0!important;}

/* Content, readability and small-screen refinements. */
html { scroll-padding-top: 154px; }
.hero-copy { position: relative; z-index: 2; }
.hero::before, .hero::after { pointer-events: none; z-index: 0; }
.data-health { margin: 14px 5px; color: #62647d; font-size: 12px; line-height: 1.6; }
.interpretation-section { padding: 26px; }
.interpretation-lead { padding: 20px 24px; }
.interpretation-lead p { font-size: 14px; line-height: 1.85; }
.interpretation-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; border: 0; margin-top: 20px; overflow: visible; }
.interpretation-card { padding: 24px; border: 1px solid var(--line); min-width: 0; }
.interpretation-card h3 { margin: 10px 0 4px; font-size: 25px; letter-spacing: -.03em; color: var(--ink-strong); }
.interpretation-card .insight-date { color: #73758f; font-size: 11px; margin-top: 4px; }
.insight-block { margin-top: 24px; }
.insight-block h4 { margin: 0; color: #5940ca; font-size: 13px; line-height: 1.7; }
.interpretation-card .insight-block p { font-size: 13px; line-height: 1.9; margin-top: 8px; overflow-wrap: anywhere; }
.method-details, .source-details { font-size: 12px; line-height: 1.85; color: #62647d; }
.method-details { margin-top: 20px; padding: 14px 18px; background: rgba(255,255,255,.45); border-radius: 16px; }
summary { cursor: pointer; font-weight: 600; }
.source-details { padding: 14px 20px; }
.source-details ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.source-details li { display: grid; grid-template-columns: minmax(140px,1fr) auto; gap: 4px 16px; }
.source-details small { grid-column: 1/-1; overflow-wrap: anywhere; }
.date-note { display: block; font-size: 10px; color: #7357e8; margin-top: 4px; }
th, td { white-space: nowrap; }
.risk-pill.missing { color: #73758f; background: #eeeef5; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #7357e8; outline-offset: 3px; }
@media(max-width:1220px) {
  .interpretation-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .interpretation-card { padding: 18px; }
}
@media(max-width:900px) {
  .interpretation-grid { grid-template-columns: 1fr; }
  .interpretation-card { padding: 22px; }
  .hero { padding: 28px; min-height: 210px; }
  .hero::before { opacity: .28; right: -140px; }
  .hero h1 { font-size: clamp(2rem,6vw,4rem)!important; }
}
@media(max-width:760px) {
  .topbar { width: calc(100% - 20px); height: auto; min-height: 62px; padding: 12px; top: 8px; flex-wrap: wrap; gap: 10px; }
  .wordmark { font-size: .78rem; }
  .module-title { font-size: .76rem; }
  .top-actions { margin-left: 0; width: 100%; gap: 6px; }
  .global-search { flex: 1; width: auto; }
  .top-nav { top: 125px; margin-top: 8px; }
  main { width: calc(100% - 24px); padding-top: 18px; }
  html { scroll-padding-top: 185px; }
  .hero { border-radius: 24px!important; padding: 24px; min-height: 210px; }
  .hero h1 { font-size: clamp(1.65rem,6.8vw,3rem)!important; letter-spacing: -.04em!important; }
  .hero-copy > p:last-child { max-width: 85%; line-height: 1.8; }
  .interpretation-section { padding: 18px; }
  .interpretation-lead { padding: 18px; }
  .interpretation-grid { gap: 12px; }
  .metric-card { min-width: 0; }
  .source-details li { grid-template-columns: 1fr; }
}

.editorial-label { display: block; margin: 8px 0; color: var(--muted); font-size: 11px; font-weight: 500; }
.editorial-quote { padding-left: 12px; border-left: 2px solid rgba(115,87,232,.25); }
.interpretation-card .editorial-quote p { font-size: 13px; line-height: 1.9; }
.interpretation-card .metric-facts { color: #65677e; font-size: 12px; line-height: 1.8; }
.editorial-pending { color: var(--muted); }
.source-band { grid-template-columns: 1fr; }

/* Paired percentile rankings: high on the left, low on the right. */
.analytics-grid { grid-template-columns: minmax(0,1.4fr) repeat(2,minmax(0,1fr)); }
.ranking-panel .rank-name-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(32px,.55fr); }
.ranking-panel .rank-name { width: auto; font-size: 12px; }
.ranking-panel .rank-bar { width: 100%; }
.ranking-panel-low .panel-kicker { color: #168d82; }
.ranking-empty { color: var(--muted); font-size: 13px; }
@media(max-width:1180px) {
  .analytics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .heatmap-panel, .trend-panel { grid-column: 1 / -1; }
}
@media(max-width:640px) {
  .analytics-grid { grid-template-columns: minmax(0,1fr); }
  .ranking-panel { grid-column: 1 / -1; }
}

/* The selected industry's two metrics share dates, with independent labelled axes. */
.industry-history-panel { grid-column: 1 / -1; }
.industry-scope { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.industry-picker { display: grid; gap: 7px; width: min(320px, 42%); flex-shrink: 0; color: var(--muted); font-size: 12px; }
.industry-picker select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 34px 10px 14px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(255,255,255,.82); color: var(--ink-strong); font: 600 14px var(--font-ui); text-overflow: ellipsis; }
.industry-picker select:focus-visible, .industry-hit-area:focus-visible { outline: 2px solid #7357e8; outline-offset: 3px; }
.industry-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 18px 0 20px; }
.industry-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 12px; padding-left: 13px; border-left: 3px solid currentColor; }
.industry-stat span { color: var(--ink); font-size: 12px; }
.industry-stat strong { font: 750 22px var(--font-display); font-variant-numeric: tabular-nums; }
.industry-stat small { color: var(--muted); font-size: 11px; }
.industry-history-panel .percentile { color: #7357e8; }
.industry-history-panel .relative { color: #128c80; }
.industry-chart { position: relative; height: 320px; border-radius: 16px; background: rgba(255,255,255,.36); }
.industry-chart svg { display: block; width: 100%; height: 320px; overflow: visible; }
.industry-axis-label { fill: #73758f; font: 11px var(--font-ui); font-variant-numeric: tabular-nums; }
.industry-axis-label.right { fill: #128c80; }
.industry-axis-title { fill: currentColor; font: 11px var(--font-ui); }
.industry-percentile-line, .industry-relative-line { fill: none; stroke: #7357e8; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.industry-relative-line { stroke: #128c80; stroke-dasharray: 5 3; }
.industry-cursor line { stroke: #9590b5; stroke-dasharray: 3 3; }
.industry-cursor circle { fill: white; stroke: currentColor; stroke-width: 2; }
.industry-tooltip { position: absolute; top: 30px; z-index: 2; width: max-content; max-width: calc(100% - 12px); box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.97); box-shadow: 0 8px 24px rgba(55,48,117,.12); pointer-events: none; font-size: 12px; }
.industry-tooltip strong { display: block; color: var(--ink-strong); font-size: 12px; margin-bottom: 9px; overflow-wrap: anywhere; }
.industry-tooltip span { display: flex; justify-content: space-between; gap: 20px; line-height: 1.8; }
.industry-chart-note { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
@media (max-width: 640px) {
  .industry-history-panel .panel-head { flex-direction: column; }
  .industry-picker { width: 100%; }
  .industry-stats { display: grid; gap: 13px; }
  .industry-stat strong { font-size: 20px; }
}
