:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b0e13; color: #f5f1e8; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top right, #20342f 0, #0b0e13 42%); }
.shell { max-width: 1320px; margin: 0 auto; padding: 42px 24px 64px; }
.hero { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 28px; }
.eyebrow { color: #d8a45d; letter-spacing: .16em; font-size: 11px; }
h1 { font: 600 clamp(32px, 5vw, 64px)/1.02 Georgia, serif; margin: 8px 0 12px; max-width: 720px; }
h2 { font-size: 16px; margin: 0; }
.muted, .panel-head span { color: #98a49d; }
.status, .pill { border: 1px solid #31554c; padding: 9px 12px; border-radius: 999px; color: #a9dfc4; font-size: 12px; white-space: nowrap; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
button { cursor: pointer; border: 1px solid #2c423d; color: #dcebe1; background: #111a18; padding: 10px 14px; border-radius: 9px; }
button:hover { border-color: #d8a45d; }
.grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 16px; }
.panel { min-height: 180px; background: rgba(18, 25, 24, .9); border: 1px solid #253b35; border-radius: 18px; padding: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.2); }
.wide { grid-column: span 2; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.chart { min-height: 430px; }
.chart-frame { min-height: 350px; display: grid; place-items: center; color: #71827a; border: 1px dashed #2b4940; border-radius: 12px; }
.metrics { display: grid; gap: 18px; margin: 26px 0; }
.metrics span { display: block; font-size: 12px; color: #98a49d; margin-bottom: 5px; }
.metrics strong { font-size: 24px; }
.danger { width: 100%; border-color: #724b3c; color: #f0b092; }
.list { color: #aebbb3; font-size: 13px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #20332e; }
.recommendation-panel { overflow: hidden; }
.data-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.data-status { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: baseline; padding: 12px 14px; border: 1px solid #263e37; border-radius: 12px; background: #0f1715; }
.data-status > span { color: #8fa198; font-size: 11px; }
.data-status > strong { color: #dce8e1; font-size: 14px; text-align: right; }
.data-status > small { grid-column: 1 / -1; color: #72857c; font-size: 10px; }
.regime-card { display: grid; grid-template-columns: minmax(180px, .55fr) 1.45fr; gap: 18px; padding: 18px; border: 1px solid #31554c; border-radius: 14px; background: rgba(26, 43, 39, .7); }
.regime-card > div:first-child { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.regime-card strong { font: 600 28px/1 Georgia, serif; }
.regime-card > div:first-child > span:last-child { color: #98a49d; font-size: 12px; }
.regime-kicker { width: 100%; color: #d8a45d; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.regime-risk-on { border-color: #397860; background: rgba(29, 72, 56, .38); }
.regime-range { border-color: #78643b; background: rgba(84, 68, 36, .28); }
.regime-risk-off { border-color: #84563f; background: rgba(94, 53, 36, .3); }
.regime-extreme-risk { border-color: #934b4b; background: rgba(105, 39, 39, .35); }
.regime-evidence { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; }
.regime-evidence span, .candidate-reasons span { padding: 6px 9px; border-radius: 999px; background: rgba(9, 15, 14, .55); color: #c3cec7; font-size: 12px; }
.recommendation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.candidate-card { padding: 16px; border: 1px solid #263e37; border-radius: 14px; background: #0f1715; }
.candidate-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.candidate-head > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.candidate-head strong { font-size: 16px; }
.candidate-head code { color: #91a59b; font-size: 11px; }
.candidate-rank { color: #d8a45d; font-size: 12px; }
.candidate-score { display: grid; place-items: center; min-width: 48px; height: 48px; border: 1px solid #3a6558; border-radius: 50%; color: #bde4d0; font-weight: 700; }
.candidate-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.factor-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.factor-grid span { padding: 8px; border-radius: 8px; background: #15221e; color: #d8e2dc; font-size: 12px; text-align: center; }
.factor-grid small { display: block; overflow: hidden; color: #7f9389; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.historical-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #20332e; }
.historical-grid span { color: #c4d2ca; font-size: 11px; }
.historical-grid small { display: block; color: #72857c; font-size: 9px; }
.candidate-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 13px; color: #879991; font-size: 11px; }
.empty-recommendation { grid-column: 1 / -1; display: grid; place-items: center; min-height: 130px; gap: 7px; border: 1px dashed #5c4934; border-radius: 14px; color: #b9a17c; }
.empty-recommendation strong { color: #e0bd83; font-size: 18px; }
.performance-summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #151d1b; color: #93a49c; font-size: 12px; }
.performance-summary strong { color: #d9e2dc; }
.research-labels { display: grid; gap: 3px; margin: 4px 0 8px; color: #788b81; font-size: 10px; }
.research-labels strong { color: #b6c6bd; font-size: 12px; }
.disclaimer { margin: 14px 0 0; color: #6f8279; font-size: 11px; text-align: right; }
@media (max-width: 900px) {
  .recommendation-list { grid-template-columns: 1fr; }
  .regime-card { grid-template-columns: 1fr; }
  .factor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) { .hero { display: block; } .status { display: inline-block; } .grid { grid-template-columns: 1fr; } .wide { grid-column: span 1; } .performance-summary, .data-status-grid { display: grid; grid-template-columns: 1fr; } }