:root{
  --bg:#060b14; --panel:#0d1724; --panel2:#101d2d; --border:#21364d;
  --text:#eef5ff; --muted:#9baec5; --blue:#3b8cff; --blue2:#1d5fb8;
  --green:#5ed15e; --yellow:#ffc247; --red:#ff5757; --shadow:0 22px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top,#102035 0%,var(--bg) 42%,#03060b 100%);color:var(--text);min-height:100vh}.app{width:min(1180px,94vw);margin:auto;padding:24px 0 32px}.hero{display:flex;align-items:center;gap:24px;justify-content:space-between;margin-bottom:22px}.brand{display:flex;align-items:center;gap:12px;color:#fff}.brand small{display:block;color:var(--blue);font-weight:800;letter-spacing:.08em}.logo-bars{display:flex;align-items:end;gap:5px;height:40px}.logo-bars span{display:block;width:8px;background:linear-gradient(var(--blue),#fff);border-radius:2px}.logo-bars span:nth-child(1){height:16px}.logo-bars span:nth-child(2){height:25px}.logo-bars span:nth-child(3){height:34px}.logo-bars span:nth-child(4){height:40px}.title-wrap{text-align:center;flex:1}h1{margin:0;text-transform:uppercase;letter-spacing:.035em;font-size:clamp(2rem,5vw,4.2rem);line-height:1}p{margin:0}.title-wrap p{margin-top:10px;color:var(--muted);font-weight:700;letter-spacing:.14em;text-transform:uppercase}.card{background:linear-gradient(145deg,rgba(16,29,45,.96),rgba(8,15,25,.96));border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:24px}.section-title{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--blue);text-transform:uppercase}.section-title h2{font-size:1.3rem;margin:0}.section-title span{font-size:1.6rem}.green{color:var(--green)}.input-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 26px}label span{display:block;color:#f3f7ff;font-size:.9rem;text-transform:uppercase;font-weight:800;margin-bottom:10px;letter-spacing:.04em}input,select{width:100%;background:#111d2b;border:1px solid #385169;border-radius:10px;color:var(--text);font-size:1.25rem;padding:16px;outline:none}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(59,140,255,.13)}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}button{border:0;border-radius:12px;padding:15px 22px;color:#fff;font-size:1rem;font-weight:900;text-transform:uppercase;cursor:pointer;letter-spacing:.03em}.primary{background:linear-gradient(135deg,var(--blue),var(--blue2));min-width:220px}.secondary{background:#16263a;border:1px solid #35516d}.dashboard-grid{display:grid;grid-template-columns:1.75fr 1fr;gap:20px;margin-top:20px}.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.metric{background:rgba(17,29,43,.82);border:1px solid #253d56;border-radius:13px;padding:20px}.metric p{font-size:.9rem;text-transform:uppercase;font-weight:900;letter-spacing:.05em}.metric h3{font-size:clamp(2rem,4vw,3rem);margin:12px 0 10px;color:var(--blue)}.metric small,.note,.bonus-output{color:var(--muted);font-size:1rem}.risk-message{margin-top:16px;padding:15px;border-radius:12px;border:1px solid #314a65;background:#0c1624;font-weight:800}.safe{color:var(--green)!important}.moderate{color:var(--yellow)!important}.excessive{color:var(--red)!important}table{width:100%;border-collapse:collapse}th,td{padding:12px 0;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}th{color:#fff;text-transform:uppercase;font-size:.85rem}td:first-child{color:var(--blue);font-weight:900}td:last-child{color:var(--green);font-weight:900}.note{margin-top:22px;padding:14px;border:1px solid #334b64;border-radius:12px}.bonus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:20px}.bonus-section{padding:4px}.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-card{background:#111d2b;border:1px solid #29425c;border-radius:12px;padding:14px}.compare-card strong{color:var(--blue);font-size:1.2rem}.compare-card h3{margin:8px 0;color:#fff;font-size:1.8rem}footer{text-align:center;color:#6f87a4;margin-top:22px;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
@media (max-width:900px){.hero{display:block;text-align:center}.brand{justify-content:center;margin-bottom:18px}.input-grid,.dashboard-grid,.bonus-grid{grid-template-columns:1fr}.results-grid{grid-template-columns:1fr}.card{padding:18px}button{width:100%}.primary{min-width:0}.title-wrap p{font-size:.8rem}.compare{grid-template-columns:1fr}}