:root{--bg:#0b0f14;--fg:#e6f2ff;--muted:#a9c4da;--accent:#4db2ff;--accent2:#7cffc2;--card:#111823;--danger:#ff6b6b;--ok:#00c78b;--warn:#ffd166;--shadow:rgba(0,0,0,.25);--radius:18px;--radius-sm:12px;--btnh:56px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,Roboto,Arial}
.app{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh}
header{position:sticky;top:0;z-index:3;background:linear-gradient(180deg,rgba(11,15,20,.95),rgba(11,15,20,.85));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.05);padding:12px 16px;display:flex;align-items:center;gap:10px}
.title{font-weight:800}
.spacer{flex:1}
.switch{width:52px;height:30px;background:#1b2a40;border-radius:999px;border:1px solid rgba(255,255,255,.06);position:relative}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}
.switch.active{background:#2e83ff}.switch.active::after{transform:translateX(22px)}
main{padding:16px}
.section{display:none}.section.active{display:block}
.card{background:var(--card);border-radius:var(--radius);padding:14px;border:1px solid rgba(255,255,255,.06);box-shadow:0 6px 22px var(--shadow)}
.grid{display:grid;gap:12px}.grid.cols-2{grid-template-columns:1fr 1fr}
.btn{width:100%;height:var(--btnh);background:linear-gradient(180deg,#1a2635,#121b28);border:1px solid rgba(255,255,255,.06);color:var(--fg);border-radius:var(--radius);font-weight:700}
.btn-primary{background:linear-gradient(180deg,#2e83ff,#1b5fc7);color:#fff}
.btn-success{background:linear-gradient(180deg,#00c78b,#009d6f);color:#071b15}
.btn-warning{background:linear-gradient(180deg,#ffd166,#e5b44b);color:#1f1600}
.btn-danger{background:linear-gradient(180deg,#ff6b6b,#d85858);color:#2b0b0b}
.bottom-nav{position:sticky;bottom:0;z-index:3;padding:6px 10px;background:rgba(11,15,20,.85);border-top:1px solid rgba(255,255,255,.06);backdrop-filter:blur(6px);display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bottom-nav button{height:44px;border-radius:12px;background:#0f1623;color:var(--fg);border:1px solid rgba(255,255,255,.06);font-size:12px}
.bottom-nav button.active{background:#1a2635;border-color:rgba(77,178,255,.4)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(77,178,255,.12);border:1px solid rgba(77,178,255,.25);font-size:12px}
.progress-wrap{background:#0f1623;border:1px solid rgba(255,255,255,.06);border-radius:999px;height:12px;overflow:hidden}
.progress-bar{background:linear-gradient(90deg,#2e83ff,#00c78b);height:100%;width:0%}
.list{display:grid;gap:10px}.item{background:var(--card);border-radius:var(--radius-sm);padding:12px;border:1px solid rgba(255,255,255,.06)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.title{font-size:18px}
.meta{color:var(--muted);font-size:12px}
.code{background:#0f1623;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace;color:#dceeff}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#111;border:1px solid rgba(255,255,255,.12);color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:999;display:none}
.kbd{display:inline-flex;padding:2px 6px;border-radius:6px;background:#0f1623;border:1px solid rgba(255,255,255,.08);font-family:ui-monospace;color:#bfe3ff;font-size:12px}
input,textarea,select{width:100%;border-radius:12px;background:#0f1623;border:1px solid rgba(255,255,255,.08);color:var(--fg);padding:12px;font-size:16px}