:root{--bg:#f5f3fb;--surface:#fff;--surface-2:#faf8ff;--border:#e6e1f2;--text:#1d1b29;--muted:#6b6680;--primary:#6d3bef;--primary-d:#5527d6;--primary-soft:#efe9ff;--ok:#16a34a;--ok-soft:#e7f6ec;--err:#dc2626;--err-soft:#fdeaea;--warn:#b45309;--gold:#eab308;--shadow:0 6px 24px #3c28781a;--radius:14px}@media (prefers-color-scheme:dark){:root{--bg:#14121c;--surface:#1d1a28;--surface-2:#232032;--border:#322d44;--text:#ece9f5;--muted:#9d97b3;--primary:#9a72ff;--primary-d:#8254ff;--primary-soft:#2a2340;--ok-soft:#14301f;--err-soft:#371a1a;--shadow:0 6px 24px #0006}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;display:flex}a{color:var(--primary)}.app-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:10;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;display:flex;position:sticky;top:0}.brand{cursor:pointer;user-select:none;align-items:baseline;gap:8px;display:flex}.brand-mark{font-size:24px}.brand-name{letter-spacing:-.5px;font-size:20px;font-weight:800}.brand-tag{color:var(--muted);font-size:11px}@media (width<=560px){.brand-tag{display:none}}.header-right{align-items:center;gap:10px;display:flex}.pill{border:1px solid var(--border);white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:12px}.pill-idle{color:var(--muted)}.pill-loading{color:var(--warn);border-color:var(--warn)}.pill-ready{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}.pill-error{color:var(--err);border-color:var(--err)}.icon-btn{cursor:pointer;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:13px;display:flex}.icon-btn:hover{border-color:var(--primary)}.app-main{flex:1;width:100%;max-width:840px;margin:0 auto;padding:24px 20px 48px}.app-footer{color:var(--muted);border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;gap:12px;padding:14px 20px;font-size:12px;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;padding:20px}.card-soft{background:var(--surface-2);box-shadow:none}h1{letter-spacing:-.5px;margin:0 0 6px;font-size:26px}h2{margin:0 0 12px;font-size:19px}h3{margin:0 0 8px;font-size:15px}.sub{color:var(--muted);margin:0 0 18px}.row{flex-wrap:wrap;gap:12px;display:flex}.row>*{flex:1;min-width:0}.spacer{height:8px}label{margin:12px 0 6px;font-size:13px;font-weight:600;display:block}input[type=text],textarea,select{background:var(--surface-2);width:100%;color:var(--text);border:1px solid var(--border);border-radius:10px;outline:none;padding:11px 13px;font-family:inherit;font-size:15px}input[type=text]:focus,textarea:focus,select:focus{border-color:var(--primary)}textarea{resize:vertical;min-height:110px}.btn{cursor:pointer;background:var(--primary);color:#fff;border:none;border-radius:11px;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:15px;font-weight:700;transition:background .15s,transform 50ms;display:inline-flex}.btn:hover{background:var(--primary-d)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{background:var(--primary-soft);border-color:var(--primary)}.btn-block{width:100%}.btn-sm{padding:8px 14px;font-size:13px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:999px;padding:9px 14px;font-size:14px}.chip[aria-pressed=true]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-d);font-weight:700}.mode-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;display:grid}.mode-card{text-align:left;cursor:pointer;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);padding:16px}.mode-card:hover{border-color:var(--primary)}.mode-card .emoji{font-size:26px}.mode-card .title{margin-top:6px;font-weight:700}.mode-card .desc{color:var(--muted);font-size:12px}.progress-wrap{margin:14px 0}.progress-track{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;height:9px;overflow:hidden}.progress-bar{background:var(--primary);width:0;height:100%;transition:width .25s}.progress-bar.indet{width:35%;transition:none;animation:1.1s linear infinite indet}@keyframes indet{0%{transform:translate(-110%)}to{transform:translate(310%)}}.dot{vertical-align:middle;background:var(--muted);border-radius:50%;width:8px;height:8px;margin-right:7px;display:inline-block}.dot-on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}.dot-wait{background:var(--gold);animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.qr-wrap{flex-direction:column;align-items:center;gap:6px;margin:14px 0;display:flex}.qr{border:1px solid var(--border);background:#fff;border-radius:10px;width:176px;height:176px;padding:8px}.stream-area{text-align:left;margin:16px 0 6px}.stream-list{flex-direction:column;gap:8px;max-height:240px;display:flex;overflow-y:auto}.stream-q{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;align-items:baseline;gap:10px;padding:9px 12px;font-size:14px;animation:.25s fadein;display:flex}.stream-n{color:var(--primary-d);min-width:14px;font-weight:800}@keyframes fadein{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.progress-label{color:var(--muted);margin-top:6px;font-size:12px}.q-meta{color:var(--muted);justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px;display:flex}.q-text{margin:4px 0 16px;font-size:18px;font-weight:600}.options{flex-direction:column;gap:10px;display:flex}.option{cursor:pointer;border:1px solid var(--border);background:var(--surface-2);border-radius:11px;align-items:center;gap:10px;padding:13px 15px;font-size:15px;display:flex}.option:hover{border-color:var(--primary)}.option[aria-pressed=true]{border-color:var(--primary);background:var(--primary-soft)}.option .key{color:var(--primary-d);width:18px;font-weight:800}.option.correct{border-color:var(--ok);background:var(--ok-soft)}.option.wrong{border-color:var(--err);background:var(--err-soft)}.option .mark{margin-left:auto;font-weight:800}.quiz-nav{justify-content:space-between;gap:12px;margin-top:18px;display:flex}.score-hero{text-align:center;padding:10px 0 4px}.score-big{color:var(--primary);font-size:54px;font-weight:800;line-height:1}.score-sub{color:var(--muted)}.versus{align-items:stretch;gap:12px;margin:16px 0;display:flex}.versus .vs-card{text-align:center;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);flex:1;padding:14px}.versus .vs-card.win{border-color:var(--ok);background:var(--ok-soft)}.versus .vs-card.lose{border-color:var(--err);background:var(--err-soft)}.versus .vs-mid{color:var(--muted);align-items:center;font-weight:800;display:flex}.vs-name{font-weight:700}.vs-score{font-size:30px;font-weight:800}.review-q{border-top:1px solid var(--border);padding:12px 0}.review-q:first-child{border-top:none}.review-q .badge{border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}.badge-ok{background:var(--ok-soft);color:var(--ok)}.badge-no{background:var(--err-soft);color:var(--err)}.review-q .ans{margin-top:4px;font-size:14px}.review-q .exp{color:var(--muted);margin-top:4px;font-size:13px;font-style:italic}.lb{border-collapse:collapse;width:100%;font-size:14px}.lb th,.lb td{text-align:left;border-bottom:1px solid var(--border);padding:9px 10px}.lb th{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:12px}.lb tr.me{background:var(--primary-soft)}.rank{color:var(--primary-d);font-weight:800}.rank-1{color:var(--gold)}.banner{border:1px solid var(--border);border-radius:11px;margin-bottom:16px;padding:12px 14px;font-size:14px}.banner-info{background:var(--primary-soft);border-color:var(--primary)}.banner-warn{background:var(--err-soft);border-color:var(--err);color:var(--err)}.muted{color:var(--muted)}.center{text-align:center}.hidden{display:none!important}.tiny{font-size:12px}.link-box{gap:8px;margin-top:8px;display:flex}.link-box input{font-family:monospace;font-size:12px}.empty{text-align:center;color:var(--muted);padding:28px 0}.spin{border:2px solid var(--primary);vertical-align:middle;border-top-color:#0000;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}