:root {
  --night: #07151a;
  --night-2: #0a1c21;
  --night-3: #0e272b;
  --panel: #10282c;
  --panel-soft: #142f33;
  --line: rgb(192 216 208 / 15%);
  --line-strong: rgb(192 216 208 / 28%);
  --text: #eef6f2;
  --muted: #91aaa3;
  --faint: #617a75;
  --mint: #65dfbd;
  --mint-soft: #b9f6e4;
  --thermal: #ff8d68;
  --thermal-soft: #ffc2a9;
  --amber: #e5bd61;
  --red: #ec6b70;
  --blue: #70aee8;
  --display: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --data: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --shadow: 0 30px 90px rgb(0 0 0 / 28%);
  --topbar: 70px;
  --nav: 236px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--night); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 82% 12%, rgb(50 116 105 / 24%), transparent 31%), radial-gradient(circle at 12% 92%, rgb(180 92 64 / 10%), transparent 28%), var(--night); }
button, input, select { color: inherit; font: inherit; }
button { border: 0; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
::selection { color: var(--night); background: var(--mint); }

.noise { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; color: var(--night); background: var(--mint); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topbar); display: grid; grid-template-columns: var(--nav) minmax(260px, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); background: rgb(7 21 26 / 88%); backdrop-filter: blur(22px); }
.brand { height: 100%; display: flex; align-items: center; gap: 11px; padding: 0 18px; border-right: 1px solid var(--line); text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: #eaf5ef; box-shadow: 0 0 0 1px rgb(101 223 189 / 36%), 0 0 32px rgb(101 223 189 / 10%); }
.brand-mark img { width: 31px; height: 31px; object-fit: contain; }
.brand-copy { display: grid; grid-template-columns: auto 1px auto; gap: 8px; align-items: center; font-family: var(--display); font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.brand-copy b { color: var(--mint); font-weight: 800; }
.brand-copy i { width: 1px; height: 18px; background: var(--line-strong); }
.brand-copy strong { font-weight: 500; }
.topbar-center { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-family: var(--data); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.topbar-center #run-status { color: var(--mint-soft); }
.topbar-divider { width: 1px; height: 14px; background: var(--line-strong); }
.live-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 0 rgb(101 223 189 / 45%); animation: ping 2.4s ease-out infinite; }
.topbar-actions { height: 100%; display: flex; align-items: center; }
.ghost-link { padding: 0 20px; color: var(--muted); font-size: 11px; text-decoration: none; }
.ghost-link:hover { color: var(--text); }
.ghost-link span { color: var(--mint); }
.refresh-button { height: 100%; display: inline-flex; align-items: center; gap: 9px; padding: 0 23px; color: var(--night); background: var(--mint); cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: background 160ms ease, color 160ms ease; }
.refresh-button:hover { background: var(--mint-soft); }
.refresh-button:disabled { color: var(--muted); background: var(--panel-soft); cursor: wait; }
.refresh-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.refresh-button.is-loading svg { animation: rotate 1s linear infinite; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--nav) minmax(0, 1fr); padding-top: var(--topbar); }
.command-nav { position: fixed; inset: var(--topbar) auto 0 0; z-index: 30; width: var(--nav); display: flex; flex-direction: column; padding: 28px 14px 18px; background: rgb(8 24 29 / 78%); border-right: 1px solid var(--line); backdrop-filter: blur(18px); overflow-y: auto; }
.nav-kicker { margin: 0 10px 20px; color: var(--faint); font-family: var(--data); font-size: 9px; letter-spacing: .15em; }
#primary-nav { display: grid; gap: 4px; }
.nav-item { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 11px; color: var(--muted); background: transparent; border-left: 2px solid transparent; cursor: pointer; text-align: left; transition: color 150ms ease, background 150ms ease, border-color 150ms ease; }
.nav-item:hover { color: var(--text); background: rgb(255 255 255 / 3%); }
.nav-item.is-active { color: var(--text); background: linear-gradient(90deg, rgb(101 223 189 / 11%), transparent); border-left-color: var(--mint); }
.nav-item svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.nav-item span { font-size: 12px; font-weight: 600; }
.nav-item kbd { color: var(--faint); background: transparent; font-family: var(--data); font-size: 8px; font-weight: 400; }
.nav-item.is-active svg, .nav-item.is-active kbd { color: var(--mint); }
.nav-foot { margin-top: auto; padding: 24px 10px 4px; }
.coverage-gauge { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 14px 0 15px; border-block: 1px solid var(--line); }
.coverage-gauge span { color: var(--faint); font-family: var(--data); font-size: 8px; letter-spacing: .12em; }
.coverage-gauge strong { grid-row: span 2; color: var(--mint); font-family: var(--display); font-size: 38px; font-weight: 500; line-height: .8; }
.coverage-gauge small { color: var(--muted); font-size: 10px; }
.nav-meta { display: grid; gap: 5px; padding-top: 17px; }
.nav-meta span { margin-top: 7px; color: var(--faint); font-family: var(--data); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.nav-meta b { color: var(--muted); font-size: 10px; font-weight: 500; }

.main { grid-column: 2; min-width: 0; }
.view { display: none; min-height: calc(100vh - var(--topbar)); padding: 54px 48px 100px; }
.view.is-active { display: block; animation: view-in 420ms cubic-bezier(.2,.75,.3,1) both; }
.system-notice { margin: 18px 48px 0; padding: 13px 16px; color: var(--thermal-soft); background: rgb(236 107 112 / 11%); border: 1px solid rgb(236 107 112 / 30%); font-size: 12px; }

.section-label { color: var(--mint); font-family: var(--data); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.brief-hero { min-height: 520px; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(430px, .97fr); align-items: center; gap: 48px; max-width: 1500px; margin: 0 auto; }
.hero-overline { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--data); font-size: 9px; letter-spacing: .13em; }
.hero-overline span:first-child { color: var(--mint); }
.hero-overline i { width: 42px; height: 1px; background: var(--line-strong); }
.hero-copy h1 { margin: 20px 0 24px; font-family: var(--display); font-size: clamp(64px, 7.1vw, 116px); font-weight: 650; line-height: .78; letter-spacing: -.055em; text-transform: uppercase; }
.hero-copy h1 em { color: var(--thermal); font-style: normal; font-weight: 350; }
.hero-thesis { max-width: 690px; margin: 0; color: #b2c7c1; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 34px; }
.primary-action { display: inline-flex; align-items: center; gap: 28px; padding: 14px 17px; color: var(--night); background: var(--mint); cursor: pointer; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.primary-action:hover { background: var(--mint-soft); }
.primary-action span { font-size: 18px; line-height: .5; }
.text-action, .section-link { padding: 9px 0; color: var(--muted); background: transparent; border-bottom: 1px solid var(--line-strong); cursor: pointer; font-size: 11px; }
.text-action:hover, .section-link:hover { color: var(--text); border-color: var(--mint); }

.signal-radar { position: relative; width: min(43vw, 520px); aspect-ratio: 1; justify-self: center; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle, rgb(101 223 189 / 7%) 0 4%, transparent 5%), radial-gradient(circle, rgb(101 223 189 / 5%), transparent 67%); box-shadow: inset 0 0 80px rgb(101 223 189 / 4%), 0 34px 100px rgb(0 0 0 / 30%); }
.radar-grid { position: absolute; inset: 9%; }
.radar-grid i { position: absolute; border: 1px solid rgb(101 223 189 / 15%); border-radius: 50%; }
.radar-grid i:nth-child(1) { inset: 0; }
.radar-grid i:nth-child(2) { inset: 14%; }
.radar-grid i:nth-child(3) { inset: 28%; }
.radar-grid i:nth-child(4) { inset: 42%; }
.radar-axis { position: absolute; background: rgb(101 223 189 / 11%); }
.radar-axis-x { top: 50%; left: 8%; right: 8%; height: 1px; }
.radar-axis-y { top: 8%; bottom: 8%; left: 50%; width: 1px; }
.radar-sweep { position: absolute; inset: 9%; border-radius: 50%; background: conic-gradient(from 270deg, transparent 0 77%, rgb(101 223 189 / 24%) 94%, rgb(101 223 189 / 2%) 100%); animation: rotate 7s linear infinite; }
.radar-sweep::after { content: ""; position: absolute; inset: 50% 0 auto 50%; height: 1px; background: linear-gradient(90deg, var(--mint), transparent); transform-origin: left; }
.radar-core { position: absolute; inset: 50% auto auto 50%; width: 64px; height: 64px; display: grid; place-content: center; text-align: center; background: var(--night); border: 1px solid rgb(101 223 189 / 40%); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 28px rgb(101 223 189 / 20%); }
.radar-core span { color: var(--mint); font-family: var(--data); font-size: 8px; letter-spacing: .12em; }
.radar-core b { margin-top: 3px; font-family: var(--display); font-size: 19px; }
.radar-node { position: absolute; display: grid; grid-template-columns: 10px auto; grid-template-rows: auto auto; gap: 0 7px; align-items: center; padding: 5px 7px; background: rgb(7 21 26 / 73%); cursor: pointer; text-align: left; backdrop-filter: blur(5px); }
.radar-node i { grid-row: span 2; width: 8px; height: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 5px rgb(101 223 189 / 11%), 0 0 17px var(--mint); }
.radar-node span { color: var(--muted); font-family: var(--data); font-size: 7px; letter-spacing: .08em; }
.radar-node b { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1; }
.radar-node:hover span { color: var(--text); }
.node-long-thanh { top: 18%; right: 15%; }
.node-long-thanh i { background: var(--thermal); box-shadow: 0 0 0 7px rgb(255 141 104 / 13%), 0 0 22px var(--thermal); }
.node-long-thanh b { color: var(--thermal); }
.node-ring { top: 57%; right: 8%; }
.node-ring i { background: var(--amber); box-shadow: 0 0 0 5px rgb(229 189 97 / 12%), 0 0 17px var(--amber); }
.node-ring b { color: var(--amber); }
.node-metro { top: 70%; left: 17%; }
.node-west { top: 27%; left: 9%; }
.node-west i { background: var(--faint); box-shadow: 0 0 0 5px rgb(97 122 117 / 11%); }
.node-west b { color: var(--faint); }
.radar-caption { position: absolute; inset: auto 15% 8%; display: flex; justify-content: space-between; gap: 10px; color: var(--faint); font-family: var(--data); font-size: 7px; letter-spacing: .06em; }
.radar-caption b { color: var(--muted); font-weight: 400; }

.answer-grid { max-width: 1500px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px auto 70px; border-block: 1px solid var(--line-strong); }
.answer-card { min-height: 220px; display: flex; flex-direction: column; padding: 23px 24px 20px; border-right: 1px solid var(--line); }
.answer-card:last-child { border-right: 0; }
.answer-card:hover { background: rgb(101 223 189 / 3%); }
.answer-card-head { display: flex; justify-content: space-between; gap: 10px; color: var(--faint); font-family: var(--data); font-size: 8px; letter-spacing: .1em; }
.answer-card-head b { color: var(--mint); font-weight: 500; }
.answer-card h2 { margin: 27px 0 10px; font-family: var(--display); font-size: 28px; font-weight: 550; line-height: 1; text-transform: uppercase; }
.answer-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.answer-card button { width: max-content; margin-top: auto; padding: 14px 0 0; color: var(--text); background: transparent; border-bottom: 1px solid var(--mint); cursor: pointer; font-size: 10px; }

.brief-lower { max-width: 1500px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr); gap: 16px; margin: 0 auto 74px; }
.talk-track { position: relative; min-height: 310px; padding: 34px 38px; background: var(--text); color: var(--night); overflow: hidden; }
.talk-track::after { content: "“"; position: absolute; right: 20px; bottom: -75px; color: rgb(7 21 26 / 6%); font-family: Georgia, serif; font-size: 280px; line-height: 1; }
.talk-track .section-label { color: #267d68; }
.talk-track blockquote { position: relative; z-index: 1; max-width: 980px; margin: 32px 0 28px; font-family: var(--display); font-size: clamp(24px, 2.7vw, 39px); font-weight: 520; line-height: 1.12; letter-spacing: -.025em; }
.copy-button { position: relative; z-index: 1; padding: 9px 0; color: #267d68; background: transparent; border-bottom: 1px solid #267d68; cursor: pointer; font-size: 11px; font-weight: 700; }
.live-panel { display: flex; flex-direction: column; padding: 28px 25px; background: var(--panel); border: 1px solid var(--line); }
.live-panel-head { display: flex; justify-content: space-between; color: var(--mint); font-family: var(--data); font-size: 9px; letter-spacing: .1em; }
.live-scan-content { margin: auto 0; }
.live-scan-content strong { display: block; font-family: var(--display); font-size: 24px; font-weight: 500; line-height: 1.1; }
.live-scan-content p { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.live-meter { height: 3px; margin: 20px 0 10px; background: rgb(255 255 255 / 8%); overflow: hidden; }
.live-meter i { width: 12%; height: 100%; display: block; background: var(--mint); box-shadow: 0 0 12px var(--mint); transition: width 700ms ease; }
.live-panel small { color: var(--faint); font-family: var(--data); font-size: 8px; overflow-wrap: anywhere; }

.watch-board { max-width: 1500px; margin: 0 auto; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.section-heading.compact { margin-bottom: 0; }
.section-heading h2 { margin: 7px 0 0; font-family: var(--display); font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
.watch-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.watch-grid article { min-height: 260px; display: flex; flex-direction: column; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.watch-grid article > span { color: var(--thermal); font-family: var(--data); font-size: 8px; letter-spacing: .11em; }
.watch-grid h3 { margin: 38px 0 12px; font-family: var(--display); font-size: 27px; font-weight: 520; line-height: 1.02; }
.watch-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.watch-grid b { margin-top: auto; color: var(--faint); font-family: var(--data); font-size: 8px; letter-spacing: .08em; }

.page-head { max-width: 1500px; display: flex; align-items: end; justify-content: space-between; gap: 48px; margin: 0 auto 42px; padding-bottom: 28px; border-bottom: 1px solid var(--line-strong); }
.page-head h1 { margin: 11px 0 13px; font-family: var(--display); font-size: clamp(58px, 7vw, 102px); font-weight: 620; line-height: .78; letter-spacing: -.055em; text-transform: uppercase; }
.page-head p { max-width: 750px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.scope-chip { min-width: 190px; padding: 17px 0 2px 19px; border-top: 1px solid var(--mint); border-left: 1px solid var(--mint); }
.scope-chip span, .scope-chip small { display: block; color: var(--faint); font-family: var(--data); font-size: 8px; letter-spacing: .1em; }
.scope-chip b { display: block; margin: 7px 0 6px; color: var(--mint); font-family: var(--display); font-size: 24px; font-weight: 550; }
.scope-chip.danger { border-color: var(--thermal); }
.scope-chip.danger b { color: var(--thermal); }

.trend-leaderboard { max-width: 1500px; display: grid; gap: 1px; margin: 0 auto 24px; background: var(--line); border: 1px solid var(--line); }
.trend-row { min-height: 116px; display: grid; grid-template-columns: 58px minmax(200px, .65fr) minmax(300px, 1.3fr) 100px; align-items: center; gap: 22px; padding: 18px 25px; background: var(--night-2); }
.trend-rank { color: var(--faint); font-family: var(--data); font-size: 10px; }
.trend-name span { display: block; color: var(--muted); font-size: 10px; }
.trend-name strong { display: block; margin-top: 4px; font-family: var(--display); font-size: 27px; font-weight: 550; text-transform: uppercase; }
.trend-bar { position: relative; height: 7px; background: rgb(255 255 255 / 6%); }
.trend-bar i { height: 100%; display: block; background: var(--mint); box-shadow: 0 0 16px rgb(101 223 189 / 23%); }
.trend-row:first-child .trend-bar i { background: var(--thermal); box-shadow: 0 0 16px rgb(255 141 104 / 26%); }
.trend-value { text-align: right; }
.trend-value b { display: block; color: var(--mint); font-family: var(--display); font-size: 36px; font-weight: 550; line-height: .9; }
.trend-row:first-child .trend-value b { color: var(--thermal); }
.trend-value small { color: var(--faint); font-family: var(--data); font-size: 7px; }
.intel-grid { max-width: 1500px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; margin: 0 auto; }
.intel-panel { min-height: 340px; padding: 27px; background: var(--panel); border: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; color: var(--faint); border-bottom: 1px solid var(--line); font-family: var(--data); font-size: 8px; letter-spacing: .1em; }
.panel-head b { color: var(--mint); font-weight: 500; }
.breakout-list { display: grid; margin-top: 12px; }
.breakout-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.breakout-item span:first-child { color: var(--faint); font-family: var(--data); font-size: 8px; }
.breakout-item strong { font-size: 12px; font-weight: 600; }
.breakout-item b { color: var(--thermal); font-family: var(--data); font-size: 8px; }
.narrative-panel { background: linear-gradient(135deg, var(--panel-soft), var(--panel)); }
.narrative-panel h2 { max-width: 760px; margin: 42px 0 16px; font-family: var(--display); font-size: clamp(31px, 3vw, 48px); font-weight: 520; line-height: 1; }
.narrative-panel p { max-width: 760px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.keyword-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.keyword-cloud span { padding: 8px 10px; color: var(--mint-soft); border: 1px solid var(--line-strong); font-family: var(--data); font-size: 8px; letter-spacing: .06em; }

.legend-row { max-width: 1500px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: -18px auto 22px; color: var(--muted); font-size: 10px; }
.legend-row span { display: inline-flex; align-items: center; gap: 7px; }
.legend-row em { margin-left: auto; color: var(--faint); font-family: var(--data); font-size: 8px; font-style: normal; text-transform: uppercase; }
.signal { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.signal-hot { background: var(--thermal); box-shadow: 0 0 9px var(--thermal); }
.signal-warm { background: var(--amber); }
.signal-cold { background: var(--faint); }
.launch-grid { max-width: 1500px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 0 auto 68px; }
.launch-card { min-height: 360px; grid-column: span 2; display: flex; flex-direction: column; padding: 25px; background: var(--night-2); border: 1px solid var(--line); overflow: hidden; }
.launch-card:nth-child(-n+2) { grid-column: span 3; }
.launch-card.pressure-cross { background: linear-gradient(145deg, rgb(255 141 104 / 15%), var(--night-2) 55%); border-color: rgb(255 141 104 / 35%); }
.launch-card.pressure-meta { background: linear-gradient(145deg, rgb(229 189 97 / 11%), var(--night-2) 52%); border-color: rgb(229 189 97 / 27%); }
.launch-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.launch-state { color: var(--faint); font-family: var(--data); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.pressure-cross .launch-state { color: var(--thermal-soft); }
.launch-confidence { color: var(--muted); font-family: var(--data); font-size: 8px; }
.launch-card h2 { margin: 40px 0 9px; font-family: var(--display); font-size: 36px; font-weight: 550; line-height: .9; text-transform: uppercase; }
.launch-card .project-note { min-height: 43px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.channel-row { display: grid; grid-template-columns: 86px 1fr auto; gap: 10px; align-items: center; margin-top: 13px; }
.channel-row span { color: var(--faint); font-family: var(--data); font-size: 8px; }
.channel-bar { height: 3px; background: rgb(255 255 255 / 7%); }
.channel-bar i { height: 100%; display: block; background: var(--mint); }
.channel-row b { font-family: var(--data); font-size: 9px; font-weight: 500; }
.launch-bottom { display: flex; justify-content: space-between; gap: 13px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.launch-bottom strong { color: var(--mint-soft); font-family: var(--data); font-size: 8px; font-weight: 500; text-transform: uppercase; }
.launch-bottom a { color: var(--muted); font-size: 9px; text-decoration: none; }
.launch-bottom a:hover { color: var(--mint); }
.push-pull-section { max-width: 1500px; margin: 0 auto; }
.quiet-note { color: var(--faint); font-family: var(--data); font-size: 8px; text-transform: uppercase; }
.push-pull-table { display: grid; background: var(--line); border: 1px solid var(--line); gap: 1px; }
.push-pull-row { min-height: 80px; display: grid; grid-template-columns: minmax(180px, .8fr) 1fr 1fr minmax(180px, .8fr); align-items: center; gap: 22px; padding: 15px 20px; background: var(--night-2); }
.push-pull-row strong { font-family: var(--display); font-size: 19px; font-weight: 520; }
.micro-bar span { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--faint); font-family: var(--data); font-size: 7px; }
.micro-bar span b { color: var(--text); font-size: 8px; font-weight: 500; }
.micro-bar div { height: 4px; background: rgb(255 255 255 / 6%); }
.micro-bar i { height: 100%; display: block; background: var(--mint); }
.micro-bar.pressure i { background: var(--thermal); }
.gap-label { color: var(--muted); font-size: 10px; line-height: 1.4; }
.gap-label b { display: block; margin-bottom: 3px; color: var(--amber); font-family: var(--data); font-size: 8px; }

.agency-grid { max-width: 1500px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 0 auto 68px; }
.agency-card { min-height: 350px; grid-column: span 2; display: flex; flex-direction: column; padding: 25px; background: var(--night-2); border: 1px solid var(--line); }
.agency-card:nth-child(-n+2) { grid-column: span 3; }
.agency-card:first-child { background: linear-gradient(145deg, rgb(101 223 189 / 12%), var(--night-2) 50%); border-color: rgb(101 223 189 / 31%); }
.agency-index { display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-family: var(--data); font-size: 8px; }
.agency-index b { color: var(--mint); font-weight: 500; }
.agency-card h2 { margin: 35px 0 8px; font-family: var(--display); font-size: 34px; font-weight: 550; line-height: .95; text-transform: uppercase; }
.agency-reason { min-height: 44px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.badge { padding: 6px 7px; color: var(--mint-soft); background: rgb(101 223 189 / 7%); border: 1px solid rgb(101 223 189 / 18%); font-family: var(--data); font-size: 7px; letter-spacing: .05em; text-transform: uppercase; }
.agency-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: auto; background: var(--line); }
.agency-stat { padding: 13px 9px; background: var(--panel); }
.agency-stat span { display: block; color: var(--faint); font-family: var(--data); font-size: 7px; }
.agency-stat b { display: block; margin-top: 5px; font-family: var(--display); font-size: 21px; font-weight: 550; }
.gh-gap { max-width: 1500px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: end; margin: 0 auto; padding: 46px; background: var(--text); color: var(--night); }
.gh-gap h2 { margin: 16px 0 0; font-family: var(--display); font-size: clamp(37px, 4vw, 60px); font-weight: 550; line-height: .9; text-transform: uppercase; }
.gh-gap h2 em { color: #267d68; font-style: normal; font-weight: 350; }
.gh-gap-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgb(7 21 26 / 16%); }
.gh-gap-metrics div { min-height: 120px; padding: 18px; background: #e5efea; }
.gh-gap-metrics span, .gh-gap-metrics small { display: block; color: #5f7770; font-family: var(--data); font-size: 7px; }
.gh-gap-metrics b { display: block; margin: 19px 0 7px; color: #164f43; font-family: var(--display); font-size: 23px; font-weight: 600; }

.retail-thesis { max-width: 1500px; display: grid; grid-template-columns: 80px 1fr; gap: 30px; align-items: start; margin: 0 auto 20px; padding: 30px 34px; background: linear-gradient(90deg, rgb(255 141 104 / 14%), transparent); border-left: 3px solid var(--thermal); }
.retail-thesis span { color: var(--thermal); font-family: var(--data); font-size: 8px; letter-spacing: .1em; }
.retail-thesis h2 { max-width: 1040px; margin: 0; font-family: var(--display); font-size: clamp(30px, 3.7vw, 55px); font-weight: 520; line-height: .94; text-transform: uppercase; }
.market-metrics { max-width: 1500px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0 auto 22px; background: var(--line); border: 1px solid var(--line); }
.market-metric { min-height: 170px; padding: 22px; background: var(--night-2); }
.market-metric span { color: var(--faint); font-family: var(--data); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.market-metric b { display: block; margin: 31px 0 8px; color: var(--text); font-family: var(--display); font-size: 42px; font-weight: 550; line-height: .82; }
.market-metric b.is-negative { color: var(--thermal); }
.market-metric small { display: block; color: var(--muted); font-size: 9px; line-height: 1.4; }
.retail-segments { max-width: 1500px; display: grid; gap: 1px; margin: 0 auto 20px; background: var(--line); border: 1px solid var(--line); }
.segment-row { min-height: 90px; display: grid; grid-template-columns: 46px minmax(220px, .65fr) 130px 1.3fr; gap: 20px; align-items: center; padding: 16px 22px; background: var(--night-2); }
.segment-state { width: 12px; height: 12px; border-radius: 50%; }
.segment-state.red { background: var(--red); box-shadow: 0 0 13px rgb(236 107 112 / 38%); }
.segment-state.amber { background: var(--amber); box-shadow: 0 0 13px rgb(229 189 97 / 26%); }
.segment-state.green { background: var(--mint); box-shadow: 0 0 13px rgb(101 223 189 / 30%); }
.segment-row strong { font-family: var(--display); font-size: 21px; font-weight: 520; text-transform: uppercase; }
.segment-row b { color: var(--muted); font-family: var(--data); font-size: 9px; font-weight: 500; }
.segment-row p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.scope-warning { max-width: 1500px; display: grid; grid-template-columns: 130px 1fr; gap: 24px; margin: 0 auto; padding: 19px 22px; color: var(--muted); border: 1px solid var(--line); }
.scope-warning b { color: var(--thermal); font-family: var(--data); font-size: 9px; text-transform: uppercase; }
.scope-warning p { margin: 0; font-size: 11px; line-height: 1.5; }

.method-strip { max-width: 1500px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0 auto 30px; background: var(--line); border: 1px solid var(--line); }
.method-strip article { min-height: 130px; padding: 21px; background: var(--night-2); }
.method-strip span { color: var(--mint); font-family: var(--data); font-size: 8px; letter-spacing: .1em; }
.method-strip p { margin: 23px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.evidence-layout { max-width: 1500px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr); gap: 16px; margin: 0 auto; }
.evidence-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.evidence-row { min-height: 75px; display: grid; grid-template-columns: 35px minmax(0, 1fr) 120px; gap: 15px; align-items: center; padding: 13px 18px; background: var(--night-2); }
.evidence-row > span { color: var(--faint); font-family: var(--data); font-size: 8px; }
.evidence-row strong { display: block; font-size: 11px; font-weight: 600; }
.evidence-row small { display: block; margin-top: 4px; color: var(--faint); font-size: 8px; }
.evidence-row a { color: var(--mint); font-size: 9px; text-align: right; text-decoration: none; }
.evidence-row a:hover { text-decoration: underline; }
.source-status-panel { align-self: start; padding: 25px; background: var(--panel); border: 1px solid var(--line); }
#source-status-list { display: grid; margin-top: 12px; }
.source-status-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 11px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.source-status-row i { width: 7px; height: 7px; background: var(--faint); border-radius: 50%; }
.source-status-row i.ok { background: var(--mint); }
.source-status-row i.partial { background: var(--amber); }
.source-status-row i.failed, .source-status-row i.blocked { background: var(--red); }
.source-status-row strong { font-size: 10px; font-weight: 500; }
.source-status-row span { color: var(--faint); font-family: var(--data); font-size: 8px; }

.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.toast { position: fixed; z-index: 80; right: 22px; bottom: 22px; max-width: 340px; padding: 13px 17px; color: var(--night); background: var(--mint); box-shadow: var(--shadow); font-size: 11px; font-weight: 700; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.toast.is-visible { opacity: 1; transform: none; }

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 8px rgb(101 223 189 / 0%); } }
@keyframes view-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (max-width: 1220px) {
  :root { --nav: 210px; }
  .brand-copy { font-size: 10px; }
  .view { padding-inline: 30px; }
  .brief-hero { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 22px; }
  .answer-grid { grid-template-columns: repeat(2, 1fr); }
  .answer-card:nth-child(2) { border-right: 0; }
  .answer-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .launch-grid, .agency-grid { grid-template-columns: repeat(4, 1fr); }
  .launch-card, .agency-card, .launch-card:nth-child(-n+2), .agency-card:nth-child(-n+2) { grid-column: span 2; }
  .gh-gap { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  :root { --topbar: 64px; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .brand { border-right: 0; }
  .brand-copy i, .brand-copy strong, .ghost-link, .topbar-divider, #updated-at { display: none; }
  .app-shell { display: block; }
  .command-nav { position: sticky; inset: var(--topbar) 0 auto; z-index: 40; width: 100%; display: block; padding: 0 14px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .nav-kicker, .nav-foot { display: none; }
  #primary-nav { width: max-content; display: flex; gap: 2px; }
  .nav-item { width: auto; min-height: 50px; grid-template-columns: 18px auto; padding-inline: 13px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav-item.is-active { border-bottom-color: var(--mint); background: linear-gradient(0deg, rgb(101 223 189 / 9%), transparent); }
  .nav-item kbd { display: none; }
  .main { grid-column: auto; }
  .view { padding-top: 34px; }
  .brief-hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding-top: 18px; }
  .hero-copy h1 { font-size: clamp(70px, 13vw, 106px); }
  .signal-radar { width: min(78vw, 520px); margin: 24px 0 36px; }
  .brief-lower, .intel-grid, .evidence-layout { grid-template-columns: 1fr; }
  .watch-grid { grid-template-columns: 1fr; }
  .watch-grid article { min-height: 220px; }
  .market-metrics, .method-strip { grid-template-columns: repeat(2, 1fr); }
  .push-pull-row { grid-template-columns: minmax(170px, .8fr) 1fr 1fr; }
  .gap-label { grid-column: 1 / -1; }
  .gh-gap-metrics { grid-template-columns: 1fr; }
  .segment-row { grid-template-columns: 32px 1fr 110px; }
  .segment-row p { grid-column: 2 / -1; }
}

@media (max-width: 640px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-center { display: none; }
  .brand { padding-inline: 12px; }
  .refresh-button { padding-inline: 17px; }
  .refresh-button span { display: none; }
  .view { padding: 27px 16px 70px; }
  .system-notice { margin-inline: 16px; }
  .nav-item { padding-inline: 11px; }
  .hero-overline { font-size: 8px; }
  .hero-copy h1 { margin-top: 18px; font-size: clamp(58px, 19vw, 82px); line-height: .82; }
  .hero-thesis { font-size: 15px; }
  .signal-radar { width: min(92vw, 430px); justify-self: center; }
  .radar-caption { display: none; }
  .radar-node { transform: scale(.88); }
  .node-long-thanh { right: 8%; }
  .node-ring { right: 1%; }
  .node-metro { left: 9%; }
  .node-west { left: 1%; }
  .answer-grid { grid-template-columns: 1fr; margin-bottom: 44px; }
  .answer-card, .answer-card:nth-child(2) { min-height: 195px; border-right: 0; border-bottom: 1px solid var(--line); }
  .answer-card:last-child { border-bottom: 0; }
  .talk-track { padding: 28px 23px; }
  .talk-track blockquote { font-size: 25px; }
  .page-head { display: block; margin-bottom: 30px; }
  .page-head h1 { font-size: 62px; }
  .scope-chip { max-width: 210px; margin-top: 25px; }
  .trend-row { grid-template-columns: 32px 1fr 60px; gap: 12px; padding-inline: 14px; }
  .trend-bar { grid-column: 2 / -1; }
  .trend-name strong { font-size: 22px; }
  .launch-grid, .agency-grid { grid-template-columns: 1fr; }
  .launch-card, .agency-card, .launch-card:nth-child(-n+2), .agency-card:nth-child(-n+2) { grid-column: auto; }
  .legend-row em { width: 100%; margin-left: 0; }
  .push-pull-row { grid-template-columns: 1fr; gap: 12px; }
  .gap-label { grid-column: auto; }
  .gh-gap { padding: 27px 22px; }
  .market-metrics, .method-strip { grid-template-columns: 1fr; }
  .retail-thesis { grid-template-columns: 1fr; gap: 12px; padding-inline: 20px; }
  .segment-row { grid-template-columns: 22px 1fr; gap: 11px; }
  .segment-row b, .segment-row p { grid-column: 2; }
  .scope-warning { grid-template-columns: 1fr; gap: 8px; }
  .evidence-row { grid-template-columns: 25px 1fr; }
  .evidence-row a { grid-column: 2; text-align: left; }
  .section-heading { align-items: start; }
  .section-heading h2 { font-size: 27px; }
}

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