:root{--bg:#0b1220;--card:#111b2e;--text:#e8eefc;--muted:#b4c0dd;--accent:#5eead4;--accent2:#60a5fa;--danger:#fb7185;--ok:#34d399;--shadow:0 12px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial; background:radial-gradient(1200px 800px at 20% 0%, rgba(96,165,250,.18), transparent 60%), radial-gradient(1000px 700px at 90% 30%, rgba(94,234,212,.12), transparent 50%), var(--bg); color:var(--text)}
a{color:var(--accent2); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:980px;margin:0 auto;padding:28px 18px 56px}
.hero{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:8px}
.h1{font-size:34px;line-height:1.1;margin:0}
.sub{color:var(--muted);max-width:62ch;margin:0}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.badge{padding:6px 10px;border-radius:999px;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.2);color:var(--text);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:18px}
.card{grid-column:span 12;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(180,192,221,.14);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}
@media(min-width:860px){.card.span6{grid-column:span 6}.card.span4{grid-column:span 4}}
.nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(17,27,46,.85);border:1px solid rgba(180,192,221,.14)}
.nav a:hover{border-color:rgba(96,165,250,.35)}
.form{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:12px}
.field{grid-column:span 12}
@media(min-width:860px){.field.half{grid-column:span 6}.field.third{grid-column:span 4}}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px}
input,select{width:100%;padding:12px 12px;border-radius:12px;border:1px solid rgba(180,192,221,.18);background:rgba(11,18,32,.45);color:var(--text);outline:none}
input:focus,select:focus{border-color:rgba(94,234,212,.45);box-shadow:0 0 0 3px rgba(94,234,212,.12)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
button{cursor:pointer;border:none;border-radius:12px;padding:12px 14px;font-weight:700;color:#041018;background:linear-gradient(90deg,var(--accent),var(--accent2))}
button.secondary{background:transparent;color:var(--text);border:1px solid rgba(180,192,221,.18)}
.result{margin-top:14px;padding:14px;border-radius:14px;border:1px solid rgba(52,211,153,.25);background:rgba(52,211,153,.08)}
.result h3{margin:0 0 8px;font-size:16px}
.result .big{font-size:28px;font-weight:800}
.small{font-size:12px;color:var(--muted)}
.footer{margin-top:26px;color:var(--muted);font-size:12px}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.kicker b{color:var(--text)}
.note{margin-top:10px;padding:12px;border-radius:12px;border:1px solid rgba(180,192,221,.16);background:rgba(17,27,46,.55);color:var(--muted)}