*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#0d0d10;color:#f2f2f5;font-family:-apple-system,"Hiragino Sans",sans-serif;font-size:15px;line-height:1.55;overflow-x:hidden;max-width:100vw}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
#login{min-height:100dvh;display:flex;align-items:center;justify-content:center}
#loginForm{display:flex;flex-direction:column;gap:12px;width:80%;max-width:320px}
#loginForm h1{font-size:20px;margin:0 0 4px;text-align:center}
#loginForm input,#loginForm button{font-size:17px;padding:12px;border-radius:10px;border:1px solid #333;background:#1a1a20;color:#fff}
#loginForm button{background:#e8567a;border:0;font-weight:700}
#loginErr{color:#ff7a8a;min-height:1.2em;margin:0;font-size:14px}

header{position:sticky;top:0;z-index:5;padding:8px 12px 6px;background:#0d0d10ee;border-bottom:1px solid #26262e;backdrop-filter:blur(8px)}
#modes{display:flex;gap:6px}
.mode{flex:1;min-width:0;min-height:44px;padding:6px 4px;border-radius:10px;border:1px solid #2a2a34;background:#181820;color:#c9c9d3;font-weight:700;font-size:14px}
.mode small{font-weight:500;color:#8a8a96;margin-left:2px}
.mode.on{background:#e8567a;border-color:#e8567a;color:#fff}
.mode.on small{color:#ffe0e8}
#prog{display:flex;gap:4px;margin:8px 0 2px;align-items:center}
#prog .dot{flex:1;height:5px;border-radius:3px;background:#2a2a34}
#prog .dot.d-ok{background:#6be28f}
#prog .dot.d-cur{background:#e8567a}
#prog .dot.d-ok.d-cur{background:linear-gradient(90deg,#6be28f,#e8567a)}
#prog .n{font-size:12px;color:#a0a0ac;white-space:nowrap;margin-left:6px}

main{padding:12px 12px 130px;max-width:560px;margin:0 auto}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.tag{font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;background:#2a1a22;color:#ff9db5;border:1px solid #4a2634}
.tag.dim{background:#181820;color:#a0a0ac;border-color:#2a2a34;font-weight:500}
.tag.ok{background:#12301f;color:#6be28f;border-color:#1f5a38}
.line{margin:0 0 6px;padding:10px 12px;border-left:3px solid #e8567a;background:#181820;border-radius:6px;font-size:18px;font-weight:700;line-height:1.5;word-break:break-all}
.desc{margin:0 0 6px;padding:10px 12px;background:#181820;border:1px solid #2a2a34;border-radius:12px;font-size:14px;color:#dcdce4;white-space:pre-line}
.note{margin:0 0 8px;font-size:13px;color:#a0a0ac}
.hint{font-size:12px;color:#8a8a96;margin:6px 2px 10px}

.cands{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.cand{background:#181820;border:1.5px solid #2a2a34;border-radius:14px;padding:8px 8px 8px 8px}
.cand.playing{border-color:#5a7bff}
.cand.first{border-color:#e8567a;background:#2a1a22}
.row{display:flex;align-items:center;gap:8px}
.play{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:#2c2c3a;font-size:18px;display:flex;align-items:center;justify-content:center}
.cand.playing .play{background:#5a7bff}
.lab{flex:none;width:22px;text-align:center;font-size:18px;font-weight:800;color:#ffd66b}
.seek{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bar{position:relative;height:28px;display:flex;align-items:center;touch-action:none;cursor:pointer}
.bar::before{content:"";position:absolute;left:0;right:0;height:6px;border-radius:3px;background:#2c2c3a}
.bar i{position:absolute;left:0;height:6px;border-radius:3px;background:#5a7bff;width:0}
.time{font-size:11px;color:#8a8a96;font-variant-numeric:tabular-nums}
.rank{flex:none;min-width:64px;min-height:48px;padding:0 10px;border-radius:12px;border:1.5px solid #3a3a48;background:#1f1f28;font-weight:700;font-size:14px}
.rank.on{background:#e8567a;border-color:#e8567a;color:#fff;font-size:16px}
.rank:disabled{opacity:.55}
.rate{display:flex;gap:8px;margin-top:8px}
.rate button{flex:1;min-height:46px;border-radius:12px;border:1.5px solid #3a3a48;background:#1f1f28;font-weight:700}
.rate button.good.on{background:#1f7a46;border-color:#1f7a46;color:#fff}
.rate button.bad.on{background:#8a2c3c;border-color:#8a2c3c;color:#fff}
.reveal{margin:8px 2px 2px;font-size:13px;color:#c9c9d3;line-height:1.5;overflow-wrap:anywhere}
.reveal .set{font-size:11px;color:#8a8a96;margin-top:1px}
.reveal b{color:#fff}
.reveal .crown{color:#ffd66b}

.verdict{display:flex;gap:8px;margin:14px 0 8px}
.verdict button{flex:1;min-height:54px;border-radius:14px;border:1.5px solid #3a3a48;background:#1f1f28;font-size:17px;font-weight:800}
.verdict button.good.on{background:#1f7a46;border-color:#1f7a46;color:#fff}
.verdict button.bad.on{background:#8a2c3c;border-color:#8a2c3c;color:#fff}
.verdict button:disabled{opacity:.55}
.q{font-size:13px;color:#a0a0ac;margin:12px 2px 0}
textarea{display:block;width:100%;min-height:92px;padding:10px 12px;border-radius:12px;border:1px solid #2a2a34;background:#181820;color:#f2f2f5;font:inherit;font-size:16px;resize:vertical}
textarea:disabled{opacity:.7}

footer{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;gap:8px;max-width:560px;margin:0 auto;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#0d0d10 28%)}
footer button{min-height:56px;border:0;border-radius:14px;font-weight:800}
footer .nav{flex:none;width:56px;background:#22222a;font-size:20px}
footer .nav:disabled{opacity:.35}
footer .main{flex:1;background:#e8567a;color:#fff;font-size:18px}
footer .main:disabled{background:#2c2c36;color:#888}
footer .main.next{background:#1f7a46}
footer .sub{flex:none;width:84px;background:#22222a;font-size:13px;color:#c9c9d3}

.empty,.done{background:#181820;border:1px solid #2a2a34;border-radius:14px;padding:18px 16px;margin-top:12px}
.empty h2,.done h2{margin:0 0 6px;font-size:17px}
.empty p,.done p{margin:0 0 8px;color:#c9c9d3;font-size:14px}
.done button{margin-top:6px;min-height:48px;padding:0 18px;border-radius:12px;border:0;background:#e8567a;color:#fff;font-weight:800}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#000d;padding:10px 16px;border-radius:10px;z-index:9;font-size:14px;max-width:90vw}

.mname{font-size:12px;color:#ffb3c7;margin:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}