:root { color-scheme: dark; --bg:#0d0f14; --card:#171a22; --soft:#222736; --line:#303747; --text:#f4f6fb; --muted:#aab2c2; --accent:#8eb4ff; --danger:#ff8f8f; --ok:#8fe3b1; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.shell { width:min(980px,100%); margin:auto; padding:20px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; }
h1 { margin:0 0 6px; font-size:clamp(1.65rem,4vw,2.35rem); }
h2 { margin-top:0; }
p { margin:.45rem 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; margin:14px 0; box-shadow:0 10px 30px rgba(0,0,0,.14); }
.login-card { max-width:480px; margin:10vh auto; }
label { display:block; font-weight:700; margin:16px 0 7px; }
input,textarea,select { width:100%; background:#10131a; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:13px; font:inherit; }
textarea { min-height:310px; resize:vertical; line-height:1.5; }
input:focus,textarea:focus,select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stats { display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:.92rem; margin-top:8px; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
button,.button { appearance:none; border:0; border-radius:12px; padding:12px 16px; font:inherit; font-weight:800; cursor:pointer; text-decoration:none; text-align:center; }
.primary { background:var(--accent); color:#09101f; }
.secondary { background:#d1dcff; color:#101728; }
.ghost { background:var(--soft); color:var(--text); border:1px solid var(--line); }
.danger { background:#5b232a; color:#ffd7da; border:1px solid #8d3e48; }
.small { padding:8px 11px; font-size:.9rem; }
button:disabled { opacity:.55; cursor:not-allowed; }
.hidden { display:none !important; }
.muted,.fineprint,.optional { color:var(--muted); }
.fineprint { font-size:.88rem; }
.message { min-height:1.2em; color:var(--danger); }
.usage-head,.status-row { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.usage-percent { font-size:1.35rem; font-weight:900; }
.meter { height:12px; background:#0e1118; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin:10px 0; }
.meter > div { height:100%; width:0; background:var(--accent); transition:width .2s ease; }
.status { margin-top:18px; padding:14px; background:#10131a; border:1px solid var(--line); border-radius:14px; }
.error { margin-top:14px; padding:12px 14px; border-radius:12px; background:#3e1f25; color:#ffd8dc; border:1px solid #71343e; white-space:pre-wrap; }
audio { width:100%; margin:8px 0 2px; }
.note-card p { max-width:80ch; }
@media (max-width:700px) { .shell{padding:12px;} .grid2{grid-template-columns:1fr;} .topbar{align-items:center;} textarea{min-height:42vh;} button,.button{min-height:48px; flex:1 1 150px;} .small{min-height:auto; flex:0 0 auto;} }