:root{
  --bg:#0b1220; --panel:#0f1b33; --muted:#8aa0c7; --text:#e8eefc; --accent:#66d9ff;
  --good:#60d394; --warn:#ffd166; --bad:#ef476f;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
header{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);gap:14px;position:sticky;top:0;z-index:50;background:rgba(11,18,32,.92);backdrop-filter: blur(6px)}
.title{font-weight:700;letter-spacing:.2px;white-space:nowrap;min-width:180px;flex:0 0 auto}
.menu{flex:1 1 auto}
.meta{flex:0 0 auto}
.titleLink, .titleLink:visited{color:#ffffff;text-decoration:none}
.titleLink:hover{text-decoration:underline}
.menu{display:flex;gap:12px;align-items:center;flex:1;justify-content:center}
.menuLink, .menuLink:visited{color:#ffffff;text-decoration:none;font-size:13px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.16)}
.menuLink:hover{border-color:rgba(255,255,255,.30);color:#ffffff}
.meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap;justify-content:flex-end}
button{background:#18294d;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 14px;cursor:pointer;font-weight:600}
button:hover{border-color:rgba(255,255,255,.25)}
button.runNow{background:#145a32;border-color:rgba(255,255,255,.14)}
button.runNow:hover{border-color:rgba(255,255,255,.30)}
.toggle{display:flex;gap:8px;align-items:center}
.toggle input{transform:scale(1.15)}
.select{display:flex;gap:10px;align-items:center}
.select span{color:var(--muted);font-size:13px}
.select select{padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#0b1733;color:var(--text);font-weight:600}
.risk-low{color:var(--good)}
.risk-high{color:var(--bad)}
.rsi-low{color:var(--good)}
.rsi-high{color:var(--bad)}
main{padding:16px 18px;max-width:1300px;margin:0 auto}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px}
.label{color:var(--muted);font-size:12px}
.value{font-size:26px;font-weight:700;margin-top:6px}
.sub{color:var(--muted);font-size:12px;margin-top:6px}
.converter{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.converter input{width:120px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#0b1733;color:var(--text);font-weight:600}
.converter .x,.converter .eq{color:var(--muted)}
.charts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.panel{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px}
.panelTitle{color:var(--muted);font-size:12px;margin-bottom:10px}
.chart{height:380px}
#rsiChart.chart{height:220px}
footer{padding:14px 18px;color:var(--muted);font-size:12px;border-top:1px solid rgba(255,255,255,.08)}
@media (max-width: 980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 520px){
  .cards{grid-template-columns:1fr}
}