:root{--bg: #14111c;--bg-elev: #1f1b2e;--bg-elev-2: #2a2440;--panel: #211c33;--border: #342d4d;--text: #ece7f5;--text-dim: #a79fc4;--text-faint: #6f6889;--accent: #7c5cff;--accent-2: #4cc9f0;--good: #3ddc84;--warn: #ffb454;--bad: #ff5470;--radius: 14px;--shadow: 0 8px 30px rgba(0,0,0,.35);--nav-h: 62px}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}#app{max-width:720px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}.page{padding:18px 16px calc(var(--nav-h) + 24px);flex:1}.page>h1{font-size:20px;margin:2px 0 4px}.page .sub{color:var(--text-dim);font-size:13px;margin:0 0 16px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}.card h2{margin:0 0 12px;font-size:15px}.row{display:flex;align-items:center;gap:12px}.row.wrap{flex-wrap:wrap}.between{justify-content:space-between}.col{display:flex;flex-direction:column;gap:12px}.center{align-items:center;justify-content:center}.muted{color:var(--text-dim)}.tiny{font-size:12px}.spacer{flex:1}button,.btn{appearance:none;border:1px solid var(--border);background:var(--bg-elev-2);color:var(--text);border-radius:10px;padding:10px 16px;font-size:14px;cursor:pointer;transition:filter .12s,transform .06s,background .12s}button:hover{filter:brightness(1.12)}button:active{transform:translateY(1px)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.ghost{background:transparent}button:disabled{opacity:.45;cursor:not-allowed}.chip{border:1px solid var(--border);background:var(--bg-elev);border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;color:var(--text-dim)}.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent)}input[type=number],input[type=text],select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-size:14px;width:100%}label.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-dim)}.badge{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--bg-elev-2);color:var(--text-dim)}.nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:#14111ceb;backdrop-filter:blur(12px);border-top:1px solid var(--border);display:flex;justify-content:space-around;z-index:50;max-width:720px;margin:0 auto}.nav button{background:transparent;border:none;color:var(--text-faint);display:flex;flex-direction:column;gap:3px;align-items:center;font-size:11px;padding:8px 6px;flex:1}.nav button.active{color:var(--accent)}.nav .ico{font-size:18px;line-height:1}.big-num{font-size:48px;font-weight:700;letter-spacing:-1px}.score-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.toast{position:fixed;left:50%;transform:translate(-50%);bottom:calc(var(--nav-h) + 16px);background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);z-index:100;font-size:13px;max-width:90vw;text-align:center}.modal-bg{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}.modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:20px;max-width:420px;width:100%;box-shadow:var(--shadow)}.empty{text-align:center;color:var(--text-faint);padding:40px 10px;font-size:13px}.tag-ok{color:var(--good)}.tag-warn{color:var(--warn)}.tag-bad{color:var(--bad)}@media (min-width: 600px){.page{padding-top:24px}}.volbar{position:relative;height:26px;background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden}.volbar .fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#3ddc84,#ffb454 70%,#ff5470);transition:width .06s linear}.volbar .thresh{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--accent-2);box-shadow:0 0 6px var(--accent-2);z-index:2}.volbar .thresh:after{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;background:var(--accent-2);transform:rotate(45deg)}.str-pill{position:relative;border:1px solid var(--border);background:var(--bg-elev);border-radius:12px;padding:10px 6px;min-width:52px;text-align:center;color:var(--text-dim);font-size:14px;transition:all .2s}.str-pill.tuned{background:#3ddc8424;border-color:var(--good);color:var(--good)}.str-pill .check{font-size:11px;opacity:0;transition:opacity .2s}.str-pill.tuned .check{opacity:1}.str-pill.just-tuned{animation:pop .6s ease}@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.18);box-shadow:0 0 18px var(--good)}to{transform:scale(1)}}.celebrate{text-align:center;font-size:18px;color:var(--good);font-weight:700;padding:14px;border:1px dashed var(--good);border-radius:12px;animation:glow 1.4s ease infinite alternate}@keyframes glow{0%{box-shadow:0 0 4px var(--good)}to{box-shadow:0 0 18px var(--good)}}