:root { color-scheme: light dark; --bg:#0b0f14; --fg:#e7ecf3; --muted:#97a3b6; --brand:#39a0ff; --card:#121824; --stroke:#223049; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:#0b0f14; color:#e7ecf3; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:var(--brand); text-decoration:none}
.container{max-width:1000px; margin:0 auto; padding:20px}
.hero{background:radial-gradient(1200px 400px at 20% -20%,rgba(57,160,255,.25),transparent),linear-gradient(180deg,#0b0f14,#0b0f14); border-bottom:1px solid var(--stroke)}
.hero .subtitle{opacity:.9}
.hero .btn{display:inline-block; margin-top:12px}
.btn{background:var(--brand); color:#00152b; border:none; border-radius:8px; padding:10px 16px; font-weight:600; cursor:pointer}
.btn:disabled{opacity:.6; cursor:not-allowed}
.tabs{display:flex; gap:16px; align-items:center; border-bottom:1px solid var(--stroke); padding-top:8px; padding-bottom:8px; overflow:auto; white-space:nowrap}
h1,h2,h3{line-height:1.2}
h2{margin-top:28px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--stroke); padding:16px; border-radius:12px}
.grid{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){ .grid{grid-template-columns:1fr} }
label{display:block; font-weight:600}
input[type="text"], input[type="email"], input[type="date"], input[type="file"], input:not([type]){
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--stroke); background:#0d1420; color:var(--fg); margin-top:6px
}
.checkbox{margin-top:10px; display:flex; align-items:center; gap:8px; font-weight:400}
.req{color:#ff7d7d; margin-left:6px}
.muted{color:var(--muted)}
.footer{border-top:1px solid var(--stroke); margin-top:32px; padding-bottom:32px}
.actions{display:flex; align-items:center; gap:12px; margin-top:12px}
.spinner{width:18px;height:18px; border:3px solid var(--stroke); border-top-color:var(--brand); border-radius:50%; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result{background:#0d1420; border:1px solid var(--stroke); padding:12px; border-radius:8px; margin-top:12px; white-space:pre-wrap}