:root{
  /* Dark (default) */
  --c1:#007a86; --c2:#005b84; --c3:#0193c2; --c4:#61a00a; --c5:#6c4b8f; --c6:#edb516;
  --bg:#0b0f12; --panel:#0f151a; --panel-2:#121a21; --text:#e8eef3; --muted:#a6b0bb; --border:rgba(255,255,255,0.08);
  --primary: var(--c3); --primary-2: var(--c2); --accent: var(--c6);
  --chart-axis:#b8c2cc; --chart-grid:rgba(255,255,255,0.08);
  --invested:#ff4d4f;
}
html[data-theme="light"]{
  --bg:#f7f9fb; --panel:#ffffff; --panel-2:#f2f5f8; --text:#0b0f12; --muted:#475569; --border:rgba(0,0,0,0.12);
  --chart-axis:#445063; --chart-grid:rgba(0,0,0,0.08);
  --invested:#ff4d4f;
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:
  radial-gradient(1200px 600px at 10% -10%, rgba(1,147,194,0.12), transparent 60%),
  radial-gradient(1000px 500px at 100% 0%, rgba(108,75,143,0.12), transparent 60%), var(--bg);
  color:var(--text);margin:0}
.container{max-width:1100px;margin:24px auto;padding:16px}
.topbar{display:flex;gap:12px;justify-content:space-between;align-items:center;background:linear-gradient(180deg, rgba(1,147,194,0.2), rgba(1,147,194,0.05) 60%, transparent);
  border-bottom:1px solid var(--border);padding:10px 16px;position:sticky;top:0;z-index:10;backdrop-filter:blur(6px)}
.brand{font-weight:800;display:flex;gap:8px;align-items:center;color:var(--text)}
.menu a{color:var(--muted);text-decoration:none;margin-left:12px;padding:6px 12px;border-radius:10px;transition:all .15s}
.menu a.active,.menu a:hover{color:var(--text);background:rgba(1,147,194,0.18)}
.btn.ghost{background:transparent;border:1px solid var(--border);padding:8px 12px;border-radius:12px;color:var(--text)}
h1{margin:10px 0 16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)),var(--panel);
  border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,0.25)}
.grid{display:grid;gap:16px}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.field{margin-bottom:14px}label{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:6px}
input[type='text'],input[type='email'],input[type='number'],select{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);color:var(--text);outline:none}
input[type='text']:focus,input[type='email']:focus,input[type='number']:focus,select:focus{border-color:rgba(1,147,194,0.5);box-shadow:0 0 0 3px rgba(1,147,194,0.15)}
input[type='range']{width:100%}.range-ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px}
.section-title{font-size:13px;color:var(--muted);margin:8px 0 12px;display:flex;gap:8px;align-items:center;text-transform:uppercase;letter-spacing:.08em}
.segmented{display:flex;gap:8px}.seg{border:1px solid var(--border);padding:8px 12px;border-radius:12px;background:var(--panel-2);color:var(--text);cursor:pointer}
.seg.active{background:rgba(0,123,134,0.28);border-color:rgba(0,123,134,0.5)}
.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{border:1px solid var(--border);padding:10px 14px;border-radius:12px;cursor:pointer;text-decoration:none;color:var(--text);background:var(--panel-2);display:inline-flex;gap:8px;align-items:center;transition:transform .08s,box-shadow .2s,background .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,0.25)}
.btn.primary{background:linear-gradient(135deg,var(--primary-2),var(--primary));border-color:rgba(1,147,194,0.5)}
.btn.primary:hover{filter:brightness(1.05)}.btn.danger{background:linear-gradient(135deg,#7a2222,#b42525);border-color:rgba(255,0,0,0.3)}
.kpi{display:flex;flex-direction:column;gap:4px}.kpi-label{font-size:12px;color:var(--muted)}.kpi-value{font-size:24px;font-weight:800;color:var(--text)}
.kpi.highlight{background:linear-gradient(180deg,rgba(237,181,22,0.12),rgba(237,181,22,0.05)),var(--panel);border-color:rgba(237,181,22,0.4)}
.card-title{font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;gap:8px;align-items:center}
.stats.emphasize .stat-card{ background: linear-gradient(180deg, rgba(1,147,194,0.12), rgba(1,147,194,0.04)); border:1px solid rgba(1,147,194,0.35); border-radius:14px; padding:12px;}
.stats.kpi-above{margin-bottom:12px}
.stats .stat-label{font-size:12px;color:var(--muted)} .stats .stat-val{font-size:18px;font-weight:700;color:var(--text)} .stats .stat-val.big{font-size:26px; font-weight:800}

.info{display:inline-flex;align-items:center;gap:6px;color:var(--accent);cursor:help;position:relative}
.info .tooltip{position:absolute;left:18px;top:50%;transform:translateY(-50%);background:#0d1116;color:#fff;padding:8px 10px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:12px;min-width:220px;opacity:0;visibility:hidden;transition:opacity .15s;border:1px solid rgba(255,255,255,0.06)}
html[data-theme="light"] .info .tooltip{background:#121a21;color:#e8eef3;border-color:rgba(0,0,0,0.1)}
.info:hover .tooltip,.info:focus .tooltip,.info.open .tooltip{opacity:1;visibility:visible}
.info .tooltip:after{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent #0d1116 transparent transparent}
html[data-theme="light"] .info .tooltip:after{border-color:transparent #121a21 transparent transparent}
.helper{font-size:12px;color:var(--muted);margin-top:6px}.helper.error{color:#ff6b6b}

.stepper{counter-reset: step; list-style:none; padding:0; margin:0}
.stepper .step{display:flex; align-items:center; gap:10px; margin:8px 0; color:var(--muted)}
.badge{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; font-size:12px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--primary-2),var(--primary))}