:root{--bg:#0f1115;--panel:#161a22;--muted:#98a2b3;--text:#e6e8ec;--accent:#8cbc57;--link:#cde3ff;--grid:16px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
.topnav{position:sticky;top:0;background:#0f1218;border-bottom:1px solid #1e2430;z-index:20}
.topnav__inner{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.2px}
.brand__dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block}
.menu{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.menu a{color:var(--link);text-decoration:none;font-weight:600}
.menu a.active{color:#fff;border-bottom:2px solid var(--accent);padding-bottom:2px}
.container{max-width:1200px;margin:0 auto;padding:24px}
.hero{background:linear-gradient(180deg,#10131a,rgba(16,19,26,0.6));border-bottom:1px solid #1e2430}
.hero__inner{max-width:1200px;margin:0 auto;padding:40px 24px}
.hero h1{margin:0 0 6px 0;font-size:30px;font-weight:700}
.hero p{margin:0;font-size:14px;color:var(--muted)}

.panel{background:var(--panel);border:1px solid #222838;border-radius:12px;padding:18px 16px;margin-bottom:16px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.panel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.stack-on-mobile{gap:8px}
.ctrls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.small{font-size:12px}.muted{color:var(--muted)}
.input,.select{background:#0f1218;border:1px solid #2c3647;color:#cfe2ff;border-radius:8px;padding:6px 8px}

.grid.two{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:960px){.grid.two{grid-template-columns:1fr 1fr}}

.scorecard .score{display:flex;align-items:center;gap:16px;margin-top:10px;flex-wrap:wrap}
.score__value{font-size:48px;font-weight:700}
.score__pill{padding:6px 10px;border-radius:999px;background:#243044;color:#cde3ff;border:1px solid #334257}
.pill{padding:6px 10px;border-radius:999px;background:#222c3b;border:1px solid #2c3647;font-size:12px}
.pill--pos{background:#1b2a1d;border-color:#284b2a;color:#bff0c1}
.pill--neu{background:#203046;border-color:#2c3e54;color:#d6ecff}
.pill--neg{background:#3a2b1f;border-color:#5a432a;color:#ffd9b8}

.horizon-note{margin-top:10px;line-height:1.5}
.explain{margin-top:8px;line-height:1.5;color:var(--muted);font-size:13px}
.tbl-wrap{overflow:auto}
table.mini{width:100%;border-collapse:collapse;font-size:13px;color:var(--muted)}
table.mini th, table.mini td{border:1px solid #253046;padding:8px}
table.mini th{background:#0f1218;color:#cde3ff;text-align:left}

.footer{padding:24px;color:var(--muted);text-align:center;border-top:1px solid #1e2430}

/* Allocation bar */
.alloc__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
#allocationBar{position:relative;height:14px;border-radius:8px;background:linear-gradient(to right,#ff4d4d,#ffa64d,#5aa9e6,#8cbc57);border:1px solid #2c3647}
#allocationMarker{position:absolute;top:-4px;width:2px;height:22px;background:#fff;left:50%;transition:left .6s ease}
.alloc__legend{display:flex;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.alloc__legend span{display:inline-block}

/* Inline note replaces popup tooltip */
.inline-note{margin-top:8px;border:1px solid #2c3647;border-radius:8px;background:#0f1218;padding:10px}
.inline-note>div{color:#cfe2ff;opacity:.9;}

/* Mobile tweaks */
@media(max-width:540px){
  .score__value{font-size:36px}
  .panel__head{flex-direction:column;align-items:flex-start}
  .horizon-note{font-size:12px}
  .pill{font-size:11px}
  .input{width:100px}
}

/* Static explanatory note under compass */
.static-note{margin-top:8px;border:1px solid #2c3647;border-radius:8px;background:#0f1218;padding:10px;color:#cfe2ff}
.static-note strong{color:#cde3ff}
.regime-hint{margin:6px 0 0}
.macro-regime-text{margin-top:8px;font-size:12px;line-height:1.4;color:#c5cfde}
.macro-regime-text strong{display:block;margin-bottom:3px}
.macro-regime-text.macro-pos strong{color:#8cbc57}
.macro-regime-text.macro-neutral strong{color:#e0b85a}
.macro-regime-text.macro-neg strong{color:#ff6b6b}

/* tiny helpers for dynamic compass text + tiles grid */
.t-green{color:#8cbc57}.t-amber{color:#e0b85a}.t-red{color:#ff6b6b}
.tiles-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:1100px){.tiles-grid{grid-template-columns:repeat(4,1fr)}}