:root{
  --bg:#05060a; --hud:#0c0e16; --grid:#10131d; --glow:rgba(125,227,255,.45);
  --text:#eaf2ff; --muted:#9cb3d7; --accent:#7de3ff; --gold:#f5d06f;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:ui-sans-serif, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); background:radial-gradient(1400px 800px at 10% -10%, rgba(96,165,250,.12), transparent 60%), var(--bg)}
#app{position:relative; height:100vh; overflow:hidden}
#sky{position:absolute; inset:0; background:radial-gradient(1200px 600px at 50% 10%, rgba(125,227,255,.08), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); filter:saturate(110%)}
#world{position:absolute; inset:0}
.hud{position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between}
.topbar{display:flex; gap:10px; align-items:center; padding:10px 14px; pointer-events:auto}
.badge{font-size:12px; color:var(--muted); border:1px solid rgba(125,227,255,.25); background:rgba(12,14,22,.6); padding:8px 10px; border-radius:999px; backdrop-filter: blur(6px)}
.title{font-weight:800; letter-spacing:.4px; padding:8px 12px; border-radius:10px; background:rgba(12,14,22,.6); border:1px solid rgba(125,227,255,.25); text-shadow:0 0 18px rgba(125,227,255,.35)}
.tickers{display:flex; gap:8px; margin-left:auto}
.ticker{font-size:12px; padding:6px 8px; border-radius:8px; background:rgba(12,14,22,.6); border:1px solid rgba(125,227,255,.2)}
.ticker .sym{font-weight:900; color:var(--gold); margin-right:6px}
.ticker .chg.up{color:#22c55e} .ticker .chg.down{color:#ef4444}
.bottom{display:flex; gap:12px; align-items:flex-end; padding:12px; pointer-events:none}
.panel{background:rgba(12,14,22,.65); border:1px solid rgba(125,227,255,.22); box-shadow:0 10px 30px rgba(0,0,0,.3), inset 0 0 40px rgba(125,227,255,.06); border-radius:14px; padding:12px; pointer-events:auto}
#map{width:240px; height:160px; border-radius:12px; position:relative; overflow:hidden}
#map canvas{width:100%; height:100%}
#graph{width:320px; height:160px}
.controls{display:grid; grid-template-columns:repeat(2,1fr); gap:6px; font-size:12px; color:var(--muted)}
.help{position:absolute; right:12px; bottom:12px; font-size:12px; color:var(--muted); background:rgba(12,14,22,.65); border:1px solid rgba(125,227,255,.22); border-radius:12px; padding:10px 12px; pointer-events:auto}
#mentor{position:absolute; inset:0; display:none; align-items:center; justify-content:center; backdrop-filter: blur(8px); background: radial-gradient(800px 400px at 50% 20%, rgba(96,165,250,.1), transparent 60%)}
.mentor-card{width:min(920px, 92vw); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid rgba(125,227,255,.25); border-radius:18px; padding:16px; box-shadow:0 30px 80px rgba(0,0,0,.4)}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row>*{flex:1 1 260px}
label{font-size:12px; color:var(--muted); display:block; margin:6px 0}
select, textarea{width:100%; background:#0b0f17; color:var(--text); border:1px solid rgba(125,227,255,.25); border-radius:12px; padding:10px}
.actions{display:flex; gap:10px; justify-content:flex-end; margin-top:10px}
button{background:linear-gradient(180deg, rgba(245,208,111,.2), rgba(245,208,111,.06)); border:1px solid rgba(245,208,111,.5); color:var(--text); font-weight:800; letter-spacing:.3px; padding:10px 12px; border-radius:12px; cursor:pointer}
.close{background:none; border:1px solid rgba(125,227,255,.4)}
.out{margin-top:10px; padding:10px; background:#0b0f17; border:1px solid rgba(125,227,255,.2); border-radius:12px; max-height:300px; overflow:auto}
.muted{color:var(--muted)}