:root{
    --bg: #0f1220;
    --card: #151935;
    --text: #e7ebf4;
    --muted: #a7b0c0;
    --brand: #8aa2ff;
    --ok: #3fd09b;
    --warn: #ffb648;
    --danger: #ff6b6b;
    --ring: rgba(138,162,255,.35);
    --border: #262b4a;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    background: radial-gradient(1200px 600px at 10% 0%, #121633, #0b0d1c) fixed;
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.site-header{
    border-bottom: 1px solid var(--border);
    background: rgba(10,12,24,.6);
    backdrop-filter: blur(10px);
}

.nav{
    max-width:960px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; justify-content:space-between;
}
.brand{ font-weight:700; color:var(--brand); text-decoration:none; letter-spacing:.2px; }
.links a{ color:var(--text); text-decoration:none; margin-left:16px; opacity:.85; }
.links a[aria-current="page"]{ color:var(--brand); }

.container{ max-width:960px; margin:32px auto; padding:0 20px; }
.card{
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
    border:1px solid var(--border);
    border-radius:14px; padding:22px;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.card h1{ margin-top:0; }

.grid{ display:grid; gap:18px; grid-template-columns: 1fr 1fr; }
.grid .field{ display:flex; flex-direction:column; gap:8px; }
.grid .field.actions{ grid-column: 1 / -1; align-items:flex-start; gap:12px; }
.grid .field.toggles label.checkbox{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.grid .field.toggles{ gap:8px; }

label{ font-weight:600; }
input[type="range"]{ width:100%; }
select, button, input[type="range"]{
    border:1px solid var(--border); background:#0d1026; color:var(--text);
    border-radius:10px; padding:10px 12px; outline:none;
}
select:focus, button:focus, input[type="range"]:focus{ box-shadow:0 0 0 3px var(--ring); }

button{ cursor:pointer; }
button.primary{ background: linear-gradient(180deg, #5e79ff, #4e66f5); border-color: #4e66f5; }
button.danger{ background: linear-gradient(180deg, #ff7c7c, #ff5c5c); border-color:#ff5c5c; }
button.ghost{ background: transparent; border-color: var(--border); color: var(--muted); }
button:disabled{ opacity:.6; cursor:not-allowed; }

.muted{ color:var(--muted); margin-top:-6px; }
.hint{ color:var(--muted); font-size:12px; }

.range-readout{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color:var(--muted); }

.meter{ width:100%; height:12px; border-radius:999px; background:#090b1a; border:1px solid var(--border); overflow:hidden; }
.meter-fill{ height:100%; width:0%; background: linear-gradient(90deg, #5e79ff, #3fd09b); transition: width .08s linear; }

.status{ font-size:14px; color:var(--muted); margin-left:12px; }

.about .about-figure{ margin: 18px 0; }
.about img{ width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--border); }

.footer{ max-width:960px; margin:16px auto 24px; padding:0 20px; color:var(--muted); }

@media (max-width: 760px){
    .grid{ grid-template-columns: 1fr; }
}