/* Beijing Financial Five-Pillar Command Center */
:root {
  --canvas: #050b18;
  --canvas-2: #071426;
  --surface: rgba(9, 25, 47, 0.86);
  --surface-2: rgba(12, 35, 62, 0.78);
  --surface-3: rgba(16, 43, 72, 0.92);
  --line: rgba(111, 183, 255, 0.18);
  --line-strong: rgba(83, 211, 255, 0.42);
  --text: #edf8ff;
  --text-soft: #b7cadc;
  --muted: #7188a2;
  --cyan: #22d3ee;
  --blue: #60a5fa;
  --green: #34d399;
  --amber: #fbbf24;
  --orange: #fb923c;
  --purple: #c084fc;
  --red: #fb7185;
  --shadow: 0 18px 50px rgba(0, 5, 18, 0.34);
  --font: Inter, "SF Pro Display", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(13, 67, 113, 0.28), transparent 40%),
    linear-gradient(145deg, #030712 0%, #071426 52%, #050b18 100%);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 10000; padding: 12px 16px; color: #03111e; background: var(--cyan); border-radius: 6px; text-decoration: none; }
.skip-link:focus { top: 16px; }

.app-shell { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; }
.dashboard-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  padding: 16px 22px 14px;
  overflow: hidden;
  transform-origin: center center;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(6, 18, 34, 0.22), rgba(2, 8, 18, 0.05)),
    radial-gradient(circle at 49% 46%, rgba(19, 101, 153, 0.12), transparent 42%);
}
.ambient-grid { position: absolute; inset: 0; z-index: -3; opacity: .32; background-image: linear-gradient(rgba(80, 166, 220, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 166, 220, .08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.ambient-grid::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(67, 173, 229, .025) 6px); }
.ambient-orb { position: absolute; z-index: -2; width: 560px; height: 560px; border-radius: 50%; filter: blur(84px); opacity: .12; pointer-events: none; }
.orb-a { left: 0; top: 220px; width: 300px; height: 420px; background: var(--blue); }
.orb-b { right: 0; bottom: 0; width: 320px; height: 320px; background: var(--purple); }

.topbar { height: 66px; display: grid; grid-template-columns: 330px 1fr 350px; align-items: center; position: relative; border-bottom: 1px solid rgba(80, 178, 238, .16); }
.topbar::after { content: ""; position: absolute; left: 36%; right: 36%; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 18px rgba(34, 211, 238, .65); }
.brand-block { display: flex; align-items: center; gap: 12px; }
.brand-glyph { width: 44px; height: 44px; position: relative; display: grid; place-items: center; color: var(--cyan); font-weight: 800; border: 1px solid rgba(34, 211, 238, .55); clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%); background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(96, 165, 250, .04)); }
.brand-glyph::before, .brand-glyph::after { content: ""; position: absolute; width: 5px; height: 5px; border: 1px solid var(--cyan); }
.brand-glyph::before { left: -1px; top: -1px; }
.brand-glyph::after { right: -1px; bottom: -1px; }
.brand-glyph span { font-size: 22px; text-shadow: 0 0 12px rgba(34, 211, 238, .55); }
.brand-glyph i { position: absolute; inset: 6px; border: 1px solid rgba(34, 211, 238, .17); transform: rotate(45deg); }
.brand-copy { display: grid; gap: 2px; letter-spacing: .12em; }
.brand-copy b { font-size: 13px; font-weight: 700; color: #dff9ff; }
.brand-copy small { font-size: 9px; color: var(--muted); letter-spacing: .22em; }
.title-block { text-align: center; line-height: 1; }
.title-block h1 { margin: 4px 0 0; font-size: 28px; font-weight: 750; letter-spacing: .13em; text-shadow: 0 0 24px rgba(61, 179, 255, .25); }
.title-kicker { display: flex; align-items: center; justify-content: center; gap: 10px; color: #5aa7cf; font-size: 10px; letter-spacing: .28em; }
.title-kicker span { display: block; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); }
.title-kicker span:last-child { transform: scaleX(-1); }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.live-clock { min-width: 144px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-right: 10px; border-right: 1px solid var(--line); }
.live-clock > div { display: grid; text-align: right; }
.live-clock b { font-size: 17px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.live-clock small { color: var(--muted); font-size: 10px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(52, 211, 153, .08), 0 0 12px var(--green); animation: pulse 2.2s infinite; }
.icon-button { min-width: 78px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(11, 33, 57, .72); color: var(--text-soft); cursor: pointer; transition: .2s ease; }
.icon-button:hover, .icon-button[aria-pressed="true"] { color: #fff; border-color: var(--line-strong); background: rgba(18, 56, 88, .9); transform: translateY(-1px); }
.button-icon { color: var(--cyan); font-size: 15px; }

.theme-cards { height: 150px; padding: 13px 0 11px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
.theme-card { --accent: var(--cyan); position: relative; min-width: 0; overflow: hidden; appearance: none; padding: 11px 13px 10px; display: grid; grid-template-columns: 43px minmax(0, 1fr) 98px; grid-template-rows: 27px 41px 24px; column-gap: 10px; text-align: left; line-height: normal; color: var(--text); border: 1px solid rgba(105, 174, 226, .18); border-radius: 9px; background: linear-gradient(135deg, rgba(13, 38, 66, .92), rgba(7, 20, 38, .82)); cursor: pointer; transition: transform .24s ease, border-color .24s ease, background .24s ease; box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.theme-card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.theme-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 96px; height: 74px; border-radius: 50% 0 0 0; background: var(--accent); opacity: .055; filter: blur(20px); }
.theme-card:hover, .theme-card:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 62%, transparent); background: linear-gradient(135deg, rgba(16, 48, 81, .96), rgba(7, 23, 42, .92)); }
.theme-card:hover .card-arrow { transform: translate(2px, -2px); color: #fff; }
.card-icon { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent); color: var(--accent); font-size: 20px; font-weight: 800; background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 16px color-mix(in srgb, var(--accent) 10%, transparent); }
.card-title { align-self: center; color: var(--text-soft); font-size: 15px; font-weight: 650; letter-spacing: .08em; }
.card-period { align-self: center; justify-self: end; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.card-value { align-self: center; white-space: nowrap; font-size: 28px; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card-value small { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.card-spark { grid-column: 3; grid-row: 2; width: 98px; height: 39px; align-self: center; overflow: visible; }
.card-spark .gridline { stroke: rgba(132, 179, 215, .12); stroke-width: 1; }
.card-spark .area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.card-spark .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 50%, transparent)); }
.card-spark .dot { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.card-meta { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; min-width: 0; overflow: hidden; gap: 8px; }
.card-rank { overflow: hidden; color: #9fb7cc; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.card-delta { padding: 3px 6px; border-radius: 4px; color: var(--green); background: rgba(52, 211, 153, .08); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-delta.negative { color: var(--red); background: rgba(251, 113, 133, .08); }
.card-arrow { color: var(--accent); transition: .2s ease; }

.command-grid { height: 810px; display: grid; grid-template-columns: 1.35fr 1fr .9fr; grid-template-rows: 474px 322px; gap: 14px; }
.panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(9, 27, 50, .88), rgba(5, 17, 34, .82)); box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 36px rgba(0, 5, 16, .14); }
.panel::before, .panel::after, .panel-edge::before, .panel-edge::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; opacity: .75; }
.panel::before { left: -1px; top: -1px; border-left: 2px solid var(--cyan); border-top: 2px solid var(--cyan); }
.panel::after { right: -1px; top: -1px; border-right: 2px solid rgba(96, 165, 250, .6); border-top: 2px solid rgba(96, 165, 250, .6); }
.panel-edge::before { left: -1px; bottom: -1px; border-left: 2px solid rgba(96, 165, 250, .45); border-bottom: 2px solid rgba(96, 165, 250, .45); }
.panel-edge::after { right: -1px; bottom: -1px; border-right: 2px solid rgba(34, 211, 238, .45); border-bottom: 2px solid rgba(34, 211, 238, .45); }
.trend-panel { grid-column: 1 / 3; grid-row: 1; padding: 15px 16px 10px; }
.benchmark-panel { grid-column: 3; grid-row: 1; padding: 15px 14px 12px; }
.matrix-panel { grid-column: 1; grid-row: 2; padding: 13px 14px 10px; }
.signals-panel { grid-column: 2; grid-row: 2; padding: 13px 14px 10px; }
.coverage-panel { grid-column: 3; grid-row: 2; padding: 13px 14px 10px; }
.panel-header { height: 50px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-header.compact { height: 44px; align-items: flex-start; }
.panel-header h2 { margin: 2px 0 0; font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.eyebrow { margin: 0; color: #4f8fb6; font-size: 9px; font-weight: 700; letter-spacing: .24em; }
.header-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.legend-rule { width: 18px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--purple)); }
.help-dot { width: 19px; height: 19px; border: 1px solid var(--line); border-radius: 50%; background: rgba(12, 39, 65, .85); color: var(--cyan); font-size: 11px; cursor: help; }
.plot { width: 100%; min-width: 0; }
.plot-main { height: 373px; }
.plot-benchmark { height: 355px; }
.plot-matrix { height: 245px; }
.chart-footer { height: 24px; display: flex; align-items: center; justify-content: space-between; color: #607a93; border-top: 1px solid rgba(102, 170, 220, .08); font-size: 10px; }
.segmented { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid rgba(99, 175, 230, .13); border-radius: 6px; background: rgba(4, 15, 29, .55); }
.segmented button { min-width: 39px; height: 26px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.segmented button:hover, .segmented button[aria-selected="true"] { color: #fff; background: rgba(39, 119, 171, .33); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .19); }
.panel-action { position: absolute; right: 14px; bottom: 12px; z-index: 4; height: 30px; border: 0; color: #8cb9d1; background: transparent; font-size: 11px; cursor: pointer; }
.panel-action:hover { color: var(--cyan); }
.micro-tag, .status-chip, .pulse-label { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; color: #7395af; font-size: 9px; letter-spacing: .08em; }
.status-chip { padding: 5px 7px; margin-top: 0; border: 1px solid rgba(52, 211, 153, .16); border-radius: 4px; color: #7db8a3; background: rgba(52, 211, 153, .05); }
.status-chip i, .pulse-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.signal-list { display: grid; gap: 4px; }
.signal-item { --signal: var(--cyan); height: 45px; display: grid; grid-template-columns: 8px 49px 1fr 22px; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; background: rgba(7, 25, 46, .68); cursor: pointer; transition: .18s ease; }
.signal-item:hover, .signal-item:focus-visible { border-color: color-mix(in srgb, var(--signal) 32%, transparent); background: rgba(13, 42, 69, .8); transform: translateX(2px); }
.signal-bar { width: 2px; height: 26px; background: var(--signal); box-shadow: 0 0 9px var(--signal); }
.signal-level { display: inline-flex; justify-content: center; padding: 3px 4px; border-radius: 3px; color: var(--signal); background: color-mix(in srgb, var(--signal) 9%, transparent); font-size: 10px; }
.signal-copy { min-width: 0; }
.signal-copy b { display: block; overflow: hidden; color: #cfe2ef; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.signal-copy small { display: block; margin-top: 2px; overflow: hidden; color: #637f98; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.signal-open { color: #4e819e; }
.coverage-hero { height: 94px; display: flex; align-items: center; gap: 14px; padding: 3px 4px 8px; border-bottom: 1px solid rgba(97, 170, 216, .1); }
.coverage-ring { width: 78px; height: 78px; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--cyan) 0 78%, rgba(75, 133, 176, .14) 78%); position: relative; box-shadow: 0 0 22px rgba(34, 211, 238, .08); }
.coverage-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #091a30; border: 1px solid rgba(34, 211, 238, .14); }
.coverage-ring > div { z-index: 1; display: grid; text-align: center; line-height: 1; }
.coverage-ring strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.coverage-ring span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.coverage-copy { min-width: 0; display: grid; gap: 3px; }
.coverage-copy b { color: #d9f5ff; font-size: 16px; font-variant-numeric: tabular-nums; }
.coverage-copy span { color: #8ca7ba; font-size: 11px; }
.coverage-copy small { color: #58748d; font-size: 9px; }
.coverage-bars { height: 125px; display: grid; align-content: center; gap: 8px; }
.coverage-row { display: grid; grid-template-columns: 56px 1fr 58px; align-items: center; gap: 8px; color: #8da6bb; font-size: 10px; }
.coverage-row b { color: #a9bfd0; font-weight: 600; }
.coverage-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(100, 155, 195, .11); }
.coverage-fill { height: 100%; border-radius: inherit; background: var(--bar); box-shadow: 0 0 8px color-mix(in srgb, var(--bar) 50%, transparent); transform-origin: left; animation: grow .9s ease both; }
.coverage-value { text-align: right; color: #607f97; font-variant-numeric: tabular-nums; }
.coverage-foot { display: flex; justify-content: space-between; padding-top: 9px; border-top: 1px solid rgba(97, 170, 216, .08); color: #54718b; font-size: 9px; }
.statusbar { height: 24px; display: flex; align-items: center; justify-content: space-between; color: #48647c; font-size: 9px; letter-spacing: .06em; }
.statusbar > span { display: flex; align-items: center; gap: 7px; }
.status-light { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

/* Drill-down */
.detail-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; background: rgba(1, 7, 18, .76); backdrop-filter: blur(12px); transition: opacity .24s ease, visibility .24s ease; }
.detail-overlay.is-open { visibility: visible; opacity: 1; }
.detail-shell { --theme: var(--cyan); width: min(1780px, calc(100vw - 48px)); height: min(986px, calc(100vh - 48px)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--theme) 36%, rgba(123, 184, 224, .15)); border-radius: 12px; background: linear-gradient(145deg, rgba(7, 21, 39, .99), rgba(4, 14, 29, .99)); box-shadow: 0 30px 100px rgba(0, 0, 0, .55), inset 0 1px rgba(255,255,255,.03); transform: translateY(16px) scale(.985); transition: transform .24s ease; }
.detail-overlay.is-open .detail-shell { transform: none; }
.detail-topbar { height: 76px; display: grid; grid-template-columns: 1fr auto 48px; align-items: center; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--theme) 6%, transparent), transparent 45%); }
.detail-identity { display: flex; align-items: center; gap: 12px; }
.detail-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--theme) 55%, transparent); border-radius: 8px; color: var(--theme); background: color-mix(in srgb, var(--theme) 9%, transparent); font-size: 19px; font-weight: 800; }
.detail-identity p { margin: 0 0 3px; color: color-mix(in srgb, var(--theme) 80%, #718ba3); font-size: 9px; letter-spacing: .22em; }
.detail-identity h2 { margin: 0; font-size: 22px; letter-spacing: .1em; }
.detail-meta { display: flex; align-items: center; gap: 8px; }
.detail-meta span { min-width: 150px; height: 42px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid rgba(105, 172, 219, .13); border-radius: 6px; background: rgba(9, 29, 51, .76); }
.detail-meta i { color: var(--muted); font-size: 10px; font-style: normal; }
.detail-meta b { color: #cae2ef; font-size: 11px; font-weight: 600; }
.close-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 6px; background: rgba(12, 33, 54, .78); color: #8da6ba; font-size: 25px; cursor: pointer; transition: .18s ease; }
.close-button:hover { color: #fff; border-color: rgba(251, 113, 133, .4); background: rgba(120, 38, 59, .28); }
.detail-tabs { height: 55px; display: flex; align-items: stretch; padding: 0 20px; border-bottom: 1px solid rgba(103, 173, 221, .12); background: rgba(4, 15, 29, .62); }
.detail-tabs button { position: relative; min-width: 124px; border: 0; background: transparent; color: #6e879c; font-size: 12px; cursor: pointer; }
.detail-tabs button::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: var(--theme); transform: scaleX(0); box-shadow: 0 0 10px var(--theme); transition: .18s ease; }
.detail-tabs button:hover { color: #bdd3df; }
.detail-tabs button.is-active { color: #fff; }
.detail-tabs button.is-active::after { transform: scaleX(1); }
.detail-body { height: calc(100% - 131px); display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 14px; padding: 14px; }
.detail-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: 42px minmax(0, 1.62fr) minmax(0, .86fr); gap: 10px; transition: grid-template-rows .24s ease; }
.detail-main.focus-secondary { grid-template-rows: 42px minmax(0, .86fr) minmax(0, 1.62fr); }
.detail-main.focus-primary #detailChart, .detail-main.focus-secondary #detailChart2 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme) 36%, transparent), 0 0 18px color-mix(in srgb, var(--theme) 8%, transparent); }
.detail-controls { min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.detail-controls::-webkit-scrollbar { display: none; }
.control-label { margin-right: 3px; color: #607f98; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.control-button { min-width: 58px; height: 32px; padding: 0 11px; border: 1px solid rgba(94, 164, 213, .14); border-radius: 5px; background: rgba(9, 28, 49, .78); color: #7994aa; font-size: 10px; white-space: nowrap; cursor: pointer; }
.control-button:hover, .control-button.is-active { color: #fff; border-color: color-mix(in srgb, var(--theme) 42%, transparent); background: color-mix(in srgb, var(--theme) 10%, rgba(9, 28, 49, .8)); }
.control-select, .control-input { height: 34px; padding: 0 11px; border: 1px solid rgba(94, 164, 213, .17); border-radius: 5px; background: #091d33; color: #bcd1df; font-size: 10px; }
.control-select { min-width: 190px; }
.control-input { min-width: 220px; }
.detail-chart { min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 8px; background: rgba(7, 23, 42, .56); box-shadow: inset 0 0 0 1px rgba(100, 172, 222, .12); }
.detail-chart.secondary { background: rgba(5, 19, 36, .52); }
.detail-chart:empty::before { content: "正在生成交互视图…"; height: 100%; display: grid; place-items: center; color: #4f6e86; font-size: 11px; }
.detail-aside { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1.35fr) minmax(170px, .72fr) auto; gap: 10px; }
.insight-card, .snapshot-card, .caveat-card { min-height: 0; overflow: hidden; border: 1px solid rgba(101, 173, 221, .13); border-radius: 8px; background: linear-gradient(145deg, rgba(10, 31, 53, .82), rgba(6, 21, 39, .76)); }
.insight-card { display: grid; grid-template-rows: 56px 1fr; }
.insight-card > header, .snapshot-card > header { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid rgba(100, 170, 217, .1); }
.insight-card > header > div { display: flex; align-items: center; gap: 9px; }
.insight-card header div div { display: grid; gap: 2px; }
.insight-card header b, .snapshot-card header b { color: #cee2ee; font-size: 12px; }
.insight-card header small { color: #57758d; font-size: 9px; }
.ai-orb { width: 25px; height: 25px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #f7ffff 0 7%, var(--theme) 10% 25%, color-mix(in srgb, var(--theme) 20%, transparent) 38%, transparent 72%); box-shadow: 0 0 14px color-mix(in srgb, var(--theme) 50%, transparent); animation: orbit 3.6s ease-in-out infinite; }
.insight-status { padding: 3px 5px; border: 1px solid color-mix(in srgb, var(--theme) 24%, transparent); border-radius: 3px; color: color-mix(in srgb, var(--theme) 82%, white); font-size: 8px; letter-spacing: .12em; }
.insight-status.loading { animation: blink 1s infinite; }
.insight-content { min-height: 0; overflow: auto; padding: 13px; scrollbar-color: rgba(79, 135, 173, .35) transparent; }
.insight-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.insight-list li { position: relative; padding: 0 0 10px 14px; border-bottom: 1px solid rgba(94, 156, 198, .08); color: #a9bfce; font-size: 11px; line-height: 1.58; }
.insight-list li:last-child { border-bottom: 0; }
.insight-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border: 1px solid var(--theme); transform: rotate(45deg); }
.insight-list strong { color: #e4f2f8; font-weight: 650; }
.snapshot-card { display: grid; grid-template-rows: 42px 1fr; }
.snapshot-card header span { color: #597891; font-size: 8px; letter-spacing: .14em; }
.snapshot-grid { display: grid; grid-template-columns: repeat(2, 1fr); align-content: start; gap: 1px; background: rgba(90, 151, 192, .08); }
.snapshot-item { min-height: 58px; padding: 9px 10px; background: rgba(6, 22, 40, .92); }
.snapshot-item span { display: block; overflow: hidden; color: #607e96; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.snapshot-item b { display: block; margin-top: 4px; color: #d4e6ef; font-size: 15px; font-variant-numeric: tabular-nums; }
.snapshot-item small { margin-left: 4px; color: #5e7a91; font-size: 8px; }
.caveat-card { padding: 10px 12px; border-color: rgba(251, 191, 36, .15); background: rgba(74, 53, 15, .12); }
.caveat-card b { color: #d7b862; font-size: 9px; letter-spacing: .08em; }
.caveat-card p { margin: 5px 0 0; color: #927f55; font-size: 9px; line-height: 1.5; }

/* Data explorer */
.data-explorer { grid-row: 2 / 4; min-width: 0; min-height: 0; display: grid; grid-template-rows: 44px 1fr 38px; overflow: hidden; border: 1px solid rgba(100, 172, 222, .12); border-radius: 8px; background: rgba(5, 19, 35, .58); }
.data-explorer[hidden] { display: none; }
.data-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 5px 8px; border-bottom: 1px solid rgba(99, 164, 205, .11); }
.data-toolbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.export-button { height: 32px; padding: 0 11px; border: 1px solid rgba(34, 211, 238, .2); border-radius: 5px; background: rgba(34, 211, 238, .06); color: #7fc5d4; font-size: 10px; cursor: pointer; }
.export-button:hover { color: #fff; background: rgba(34, 211, 238, .12); }
.table-wrap { overflow: auto; scrollbar-color: rgba(74, 133, 171, .36) transparent; }
.data-table { min-width: 100%; border-collapse: separate; border-spacing: 0; color: #96afc0; font-size: 10px; font-variant-numeric: tabular-nums; }
.data-table th { position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 10px; text-align: left; color: #bfd3df; background: #0b2945; border-bottom: 1px solid rgba(83, 156, 207, .2); white-space: nowrap; }
.data-table td { max-width: 300px; height: 34px; padding: 6px 10px; border-bottom: 1px solid rgba(86, 143, 181, .07); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-table tbody tr:nth-child(even) td { background: rgba(12, 35, 58, .32); }
.data-table tbody tr:hover td { color: #e4f4fb; background: rgba(34, 211, 238, .055); }
.data-pagination { display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border-top: 1px solid rgba(99, 164, 205, .11); color: #58758d; font-size: 9px; }
.data-pagination div { display: flex; gap: 5px; }
.page-button { min-width: 32px; height: 26px; border: 1px solid rgba(100, 166, 210, .13); border-radius: 4px; background: rgba(11, 31, 51, .8); color: #7892a7; font-size: 9px; cursor: pointer; }
.page-button:disabled { opacity: .35; cursor: default; }
.dataset-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Method view */
.method-view { grid-row: 2 / 4; min-width: 0; min-height: 0; overflow: auto; padding: 4px; scrollbar-color: rgba(74, 133, 171, .36) transparent; }
.method-view[hidden] { display: none; }
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.method-card { min-height: 150px; padding: 16px; border: 1px solid rgba(95, 165, 211, .13); border-radius: 8px; background: rgba(8, 27, 47, .62); }
.method-card.wide { grid-column: 1 / -1; min-height: 130px; }
.method-card .method-index { color: var(--theme); font-size: 9px; letter-spacing: .16em; }
.method-card h3 { margin: 8px 0 9px; color: #d4e6ef; font-size: 14px; }
.method-card p { margin: 0; color: #7894a8; font-size: 11px; line-height: 1.7; }
.source-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.source-chip { padding: 5px 8px; border: 1px solid rgba(94, 165, 211, .13); border-radius: 4px; color: #7592a7; background: rgba(7, 21, 38, .7); font-size: 9px; }
.base-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.base-step { position: relative; padding: 11px; border: 1px solid color-mix(in srgb, var(--theme) 18%, transparent); border-radius: 6px; color: #8aa5b7; background: color-mix(in srgb, var(--theme) 4%, transparent); font-size: 10px; line-height: 1.5; }
.base-step b { display: block; margin-bottom: 3px; color: #d2e4ec; font-size: 11px; }

.toast { position: fixed; z-index: 3000; left: 50%; bottom: 28px; min-width: 220px; max-width: 520px; padding: 11px 14px; border: 1px solid rgba(34, 211, 238, .22); border-radius: 6px; color: #c9e2ec; background: rgba(7, 25, 44, .96); box-shadow: var(--shadow); font-size: 11px; text-align: center; transform: translate(-50%, 20px); visibility: hidden; opacity: 0; transition: .2s ease; }
.toast.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.tip-bubble { position: fixed; z-index: 4000; max-width: 310px; padding: 9px 11px; visibility: hidden; opacity: 0; border: 1px solid rgba(34, 211, 238, .23); border-radius: 5px; color: #a9c6d7; background: rgba(5, 22, 41, .97); box-shadow: 0 12px 34px rgba(0,0,0,.34); font-size: 10px; line-height: 1.55; pointer-events: none; transition: opacity .12s ease; }
.tip-bubble.show { visibility: visible; opacity: 1; }
.noscript { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; color: white; background: #071426; }

@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .55; } }
@keyframes blink { 50% { opacity: .45; } }
@keyframes orbit { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(.88) rotate(180deg); } }
@keyframes grow { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 640px) {
  body { overflow: auto; background: #050b18; }
  body.detail-open { overflow: hidden; }
  .app-shell { position: relative; display: block; overflow: visible; }
  .dashboard-stage { width: 100%; height: auto; min-height: 100vh; padding: 12px; transform: none !important; overflow: visible; }
  .topbar { height: auto; min-height: 116px; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0 13px; }
  .brand-copy, .title-kicker, .live-clock { display: none; }
  .title-block { grid-column: 1 / -1; grid-row: 1; text-align: left; padding-left: 56px; }
  .title-block h1 { margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: .04em; }
  .brand-block { position: absolute; top: 8px; left: 0; }
  .top-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 56px; }
  .theme-cards { height: auto; grid-template-columns: 1fr; padding: 12px 0; }
  .theme-card { min-height: 124px; }
  .command-grid { height: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: none; }
  .trend-panel, .benchmark-panel, .matrix-panel, .signals-panel, .coverage-panel { grid-column: 1; grid-row: auto; min-height: 360px; }
  .trend-panel { min-height: 470px; }
  .signals-panel { min-height: 420px; }
  .signal-item { height: 56px; }
  .signal-copy b, .signal-copy small { overflow: visible; text-overflow: clip; white-space: normal; }
  .signal-copy b { line-height: 1.25; }
  .signal-copy small { line-height: 1.3; }
  .plot-main { height: 360px; }
  .plot-benchmark { height: 330px; }
  .matrix-panel { min-height: 320px; }
  .statusbar { height: auto; min-height: 54px; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
  .detail-overlay { position: fixed; display: block; padding: 0; overflow: auto; }
  .detail-shell { width: 100%; min-height: 100%; height: auto; border-radius: 0; }
  .detail-topbar { height: auto; min-height: 118px; grid-template-columns: 1fr 44px; gap: 8px; padding: 12px; }
  .detail-meta { grid-column: 1 / -1; grid-row: 2; }
  .detail-meta span { min-width: 0; flex: 1; }
  .close-button { grid-column: 2; grid-row: 1; }
  .detail-tabs { height: 50px; padding: 0 4px; overflow-x: auto; }
  .detail-tabs button { min-width: 92px; }
  .detail-body { height: auto; grid-template-columns: 1fr; padding: 10px; }
  .detail-main { min-height: 920px; grid-template-rows: 48px 440px 360px; }
  .detail-main.focus-secondary { grid-template-rows: 48px 360px 440px; }
  .detail-aside { grid-template-rows: 310px auto auto; }
  .method-grid { grid-template-columns: 1fr; }
  .method-card.wide { grid-column: 1; }
  .base-flow { grid-template-columns: 1fr; }
  .data-toolbar { align-items: flex-start; flex-direction: column; }
  .data-toolbar-left { width: 100%; flex-wrap: wrap; }
  .control-select, .control-input { min-width: 0; width: 100%; }
}


/* Revision 2 · centered viewport fit, stronger typography, five comparable trend charts */
.dashboard-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: center center;
}

.home-trend-grid {
  height: 373px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.trend-mini-card {
  --trend-color: var(--cyan);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--trend-color) 19%, rgba(100, 172, 222, .12));
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--trend-color) 5%, rgba(7, 23, 42, .66)), rgba(5, 18, 34, .48));
  box-shadow: inset 0 1px rgba(255,255,255,.02);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.trend-mini-card:hover, .trend-mini-card:focus-visible {
  border-color: color-mix(in srgb, var(--trend-color) 48%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--trend-color) 9%, rgba(7, 23, 42, .74)), rgba(5, 18, 34, .58));
  transform: translateY(-2px);
}
.trend-mini-card > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(105, 170, 212, .1);
}
.trend-mini-card > header > div { min-width: 0; display: flex; align-items: center; gap: 6px; }
.trend-mini-card > header span { flex: none; color: var(--trend-color); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.trend-mini-card h3 { min-width: 0; margin: 0; overflow: hidden; color: #cfe3ef; font-size: 15px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.trend-mini-card strong { flex: none; color: #f2f9fd; font-size: 16px; font-variant-numeric: tabular-nums; }
.trend-mini-plot { width: 100%; height: 100%; min-width: 0; min-height: 0; }

/* Homepage readability */
.brand-copy b { font-size: 14px; }
.brand-copy small { font-size: 10px; }
.title-block h1 { font-size: 30px; }
.title-kicker { font-size: 11px; }
.live-clock b { font-size: 18px; }
.live-clock small { font-size: 11px; }
.icon-button { font-size: 17px; }
.card-title { font-size: 16px; }
.card-period { font-size: 11px; }
.card-value { font-size: 30px; }
.card-value small { font-size: 12px; }
.card-rank { font-size: 12px; }
.card-delta { font-size: 11px; }
.panel-header h2 { font-size: 19px; }
.eyebrow { font-size: 10px; }
.header-note { font-size: 12px; }
.chart-footer { font-size: 11px; }
.segmented button { font-size: 11px; }
.panel-action { font-size: 12px; }
.micro-tag, .status-chip, .pulse-label { font-size: 10px; }
.signal-level { font-size: 11px; }
.signal-copy b { font-size: 12px; }
.signal-copy small { font-size: 10px; }
.coverage-ring span { font-size: 10px; }
.coverage-copy b { font-size: 17px; }
.coverage-copy span { font-size: 12px; }
.coverage-copy small { font-size: 10px; }
.coverage-row { font-size: 11px; }
.coverage-foot, .statusbar { font-size: 10px; }

/* Drill-down uses more of the viewport and larger type */
.detail-overlay { padding: 12px; }
.detail-shell { width: min(1848px, calc(100vw - 24px)); height: min(1032px, calc(100vh - 24px)); }
.detail-topbar { height: 80px; }
.detail-identity p { font-size: 10px; }
.detail-identity h2 { font-size: 24px; }
.detail-meta i { font-size: 11px; }
.detail-meta b { font-size: 12px; }
.detail-tabs { height: 60px; }
.detail-tabs button { min-width: 132px; font-size: 14px; }
.detail-body { height: calc(100% - 140px); grid-template-columns: minmax(0, 1fr) 410px; gap: 12px; padding: 12px; }
.detail-main { grid-template-rows: 46px minmax(0, 1.62fr) minmax(0, .86fr); }
.detail-main.focus-secondary { grid-template-rows: 46px minmax(0, .86fr) minmax(0, 1.62fr); }
.control-label { font-size: 12px; }
.control-button { min-width: 64px; height: 35px; padding: 0 12px; font-size: 12px; }
.control-select, .control-input { height: 36px; font-size: 12px; }
.detail-chart:empty::before { font-size: 13px; }
.insight-card { grid-template-rows: 60px 1fr; }
.insight-card header b, .snapshot-card header b { font-size: 14px; }
.insight-card header small { font-size: 10px; }
.insight-status { font-size: 9px; }
.insight-content { padding: 14px; }
.insight-list { gap: 9px; }
.insight-list li { padding: 0 0 10px 15px; font-size: 13px; line-height: 1.56; }
.snapshot-card { grid-template-rows: 46px 1fr; }
.snapshot-card header span { font-size: 9px; }
.snapshot-item { min-height: 60px; padding: 8px 11px; }
.snapshot-item span { font-size: 10px; }
.snapshot-item b { font-size: 18px; }
.snapshot-item small { font-size: 9px; }
.caveat-card { padding: 12px 13px; }
.caveat-card b { font-size: 11px; }
.caveat-card p { font-size: 11px; line-height: 1.55; }
.data-explorer { grid-template-rows: 48px 1fr 42px; }
.export-button { height: 35px; font-size: 12px; }
.data-table { font-size: 12px; }
.data-table th { height: 40px; padding: 0 11px; }
.data-table td { height: 38px; padding: 7px 11px; }
.data-pagination { font-size: 11px; }
.page-button { min-width: 34px; height: 28px; font-size: 11px; }
.method-card { min-height: 160px; padding: 17px; }
.method-card .method-index { font-size: 10px; }
.method-card h3 { font-size: 16px; }
.method-card p { font-size: 13px; line-height: 1.72; }
.source-chip { font-size: 11px; }
.base-step { font-size: 12px; }
.base-step b { font-size: 13px; }
.toast { font-size: 12px; }
.tip-bubble { font-size: 11px; }

@media (max-width: 640px) {
  .dashboard-stage { position: relative; left: auto; top: auto; transform: none !important; }
  .title-block h1 { font-size: 21px; }
  .home-trend-grid { height: auto; grid-template-columns: 1fr; gap: 10px; }
  .trend-mini-card { height: 276px; }
  .trend-panel { min-height: 1530px; }
  .detail-overlay { padding: 0; }
  .detail-shell { width: 100%; min-height: 100%; height: auto; }
  .detail-topbar { min-height: 122px; }
  .detail-tabs { height: 54px; }
  .detail-tabs button { min-width: 104px; }
  .detail-body { height: auto; grid-template-columns: 1fr; padding: 10px; }
  .detail-main { min-height: 984px; grid-template-rows: 54px 462px 398px; }
  .detail-main.focus-secondary { grid-template-rows: 54px 398px 462px; }
  .detail-aside { grid-template-rows: 350px auto auto; }
}


@media (min-width: 641px) {
  .method-grid { height: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(190px, 1.1fr) minmax(150px, .85fr) minmax(150px, .85fr); }
  .method-card { min-height: 0; }
  .method-card.wide { grid-column: 1 / -1; min-height: 0; }
}

/* Hidden controls must not override native hidden-state semantics. */
.detail-controls[hidden] { display: none !important; }

/* Executive briefing: generous charts, stable typography, no implementation status. */
[data-tech-only][hidden], .snapshot-card[hidden], .agent-form[hidden], .agent-quick[hidden] { display:none !important; }
.detail-shell.tech-briefing .detail-tabs { gap:8px; }
.detail-shell.tech-briefing .detail-tabs button { padding-inline:22px; }
.detail-main.briefing-panels { grid-template-rows:54px minmax(0,1fr) minmax(0,1fr); gap:14px; }
.detail-main.briefing-single { grid-template-rows:54px minmax(0,1fr); }
.detail-main.briefing-single #detailChart2 { display:none; }
.briefing-select { max-width:240px; }
.tech-briefing .detail-aside { grid-template-rows:minmax(0,1fr) auto; gap:12px; }
.tech-briefing .insight-card { display:flex; flex-direction:column; }
.tech-briefing .insight-card>header { flex:0 0 auto; }
.tech-briefing .insight-content { flex:1; min-height:0; overflow-y:auto; padding:18px 16px; scroll-behavior:smooth; }
.agent-intro { color:#99b9cd; font-size:14px; line-height:1.8; margin:0; }
.agent-message { margin:0 0 16px; padding:13px 14px; border:1px solid rgba(79,144,181,.18); border-radius:9px; background:rgba(16,40,62,.55); font-size:14px; line-height:1.75; overflow-wrap:anywhere; }
.agent-message.user { margin-left:24px; background:rgba(34,211,238,.08); border-color:rgba(34,211,238,.23); color:#e1f6ff; }
.agent-message strong { display:block; color:#cdeeff; font-size:12px; margin-bottom:6px; letter-spacing:.06em; }
.agent-message p { margin:0 0 9px; white-space:pre-wrap; }
.agent-message p:last-child { margin:0; }
.agent-message .answer-source { display:block; margin-top:10px; color:#708d9f; font-size:11px; }
.agent-quick { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px; border-top:1px solid rgba(91,145,177,.13); }
.agent-quick button { border:1px solid rgba(90,158,190,.22); border-radius:6px; color:#8fb8cb; background:rgba(5,19,33,.7); padding:7px 9px; font:inherit; font-size:12px; cursor:pointer; }
.agent-quick button:hover { color:#b9f8ff; border-color:#207d96; }
.agent-form { flex:0 0 auto; padding:13px 14px; background:rgba(5,17,30,.65); border-top:1px solid rgba(79,144,181,.18); }
.agent-form textarea { resize:none; width:100%; padding:12px; border:1px solid rgba(97,169,202,.28); background:#071b2d; border-radius:7px; color:#e5f5ff; font:inherit; font-size:14px; line-height:1.55; box-sizing:border-box; }
.agent-form textarea:focus { outline:1px solid #22a9c8; box-shadow:0 0 0 3px rgba(34,211,238,.07); }
.agent-form textarea::placeholder { color:#688b9e; }
.agent-form-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:9px; }
.agent-form-footer>span { font-size:11px; color:#688b9e; }
.agent-form button { color:#d9faff; background:rgba(21,121,148,.35); border:1px solid #256177; padding:9px 13px; border-radius:6px; font:inherit; font-size:13px; cursor:pointer; min-width:72px; }
.agent-form button:disabled { opacity:.65; cursor:wait; }
.tech-briefing .caveat-card p { font-size:12px; line-height:1.7; }
@media(max-width:820px) {
  .detail-shell.tech-briefing .detail-tabs button { padding-inline:14px; white-space:nowrap; }
  .detail-main.briefing-panels { min-height:1084px; grid-template-rows:94px 480px 480px; }
  .detail-main.briefing-single { min-height:650px; grid-template-rows:94px 540px; }
  .briefing-select { max-width:100%; }
  .tech-briefing .detail-aside { grid-template-rows:minmax(480px,auto) auto; }
  .tech-briefing .insight-content { max-height:480px; }
  .agent-form button { min-height:44px; }
}
.detail-main.briefing-panels, .detail-main.briefing-single { transition:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }