:root{color-scheme:dark;--bg: #111827;--panel-bg: #1f2937;--panel-border: #374151;--text: #f3f4f6;--muted: #9ca3af;--accent: #60a5fa;--green: #34d399;--red: #f87171;--amber: #fbbf24;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;min-height:100vh;max-width:900px;margin:0 auto;padding:.75rem;gap:.75rem}.loading-text{margin:auto;color:var(--muted);font-size:.95rem}.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.95rem}.score{font-weight:600;display:flex;gap:.4rem;align-items:baseline}.score b{font-size:1.3rem;color:var(--accent)}.mode-badge{font-size:.75rem;font-weight:600;color:var(--muted);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:999px;padding:.2rem .6rem;margin-right:.3rem}.room{display:flex;align-items:center;gap:.5rem;color:var(--muted)}.level-toggle{display:flex;gap:.35rem}.level-btn{background:var(--panel-bg);color:var(--muted);border:1px solid var(--panel-border);border-radius:999px;padding:.25rem .7rem;font-size:.8rem;font-weight:600}.level-btn.active{background:var(--accent);color:#0b1220;border-color:var(--accent)}.room-code b{color:var(--text);letter-spacing:.05em}.back-link{color:var(--muted);text-decoration:none;font-size:.85rem}.back-link:hover{color:var(--text)}.practice-user{color:var(--muted)}.practice-user b{color:var(--text)}button{background:var(--accent);color:#0b1220;border:none;border-radius:.5rem;padding:.45rem .8rem;font-weight:600;cursor:pointer}button:disabled{opacity:.6;cursor:default}button:hover:not(:disabled){filter:brightness(1.08)}.board{flex:1;display:flex;flex-direction:column;gap:.75rem}.sentence-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:.75rem;padding:1.25rem 1rem;text-align:center;font-size:clamp(1.1rem,4.5vw,1.6rem);font-weight:600}.round-banner{text-align:center;padding:.5rem;border-radius:.5rem;font-weight:600}.round-banner.won{background:#34d39926;color:var(--green)}.round-banner.lost{background:#f8717126;color:var(--red)}.round-banner.neutral{background:#9ca3af1f;color:var(--muted)}.panels{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;flex:1}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:.75rem;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;min-width:0}.panel h2{margin:0;font-size:.85rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.answer-box{display:flex;flex-direction:column;gap:.3rem;width:100%}.input-wrap{position:relative;width:100%}.trigger-hint{margin:0;font-size:.75rem;color:var(--muted);text-align:right}.mirror,.answer-input{font-family:Cascadia Code,Consolas,ui-monospace,monospace;font-size:clamp(.9rem,3.6vw,1.05rem);line-height:1.4;padding:.6rem .65rem;border-radius:.5rem;white-space:pre-wrap;overflow-wrap:break-word;overflow:hidden}.mirror{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;pointer-events:none;background:#0b1220;border:1px solid var(--panel-border);color:var(--text)}.answer-input{position:relative;width:100%;min-height:2.4em;resize:none;background:transparent;border:1px solid transparent;color:var(--text);caret-color:var(--text)}.answer-input.revealed{color:transparent}.answer-input:focus{outline:none;border-color:var(--accent)}.answer-input::placeholder{color:var(--muted)}.answer-input:read-only{opacity:.9}.ch-correct{color:var(--green)}.ch-wrong{color:var(--red)}.ch-wrong-order{color:var(--amber);text-decoration:underline}.ch-neutral{color:var(--text)}.opponent-text{font-family:Cascadia Code,Consolas,ui-monospace,monospace;font-size:clamp(.9rem,3.6vw,1.05rem);line-height:1.4;padding:.6rem .65rem;min-height:2.4em;background:#0b1220;border:1px solid var(--panel-border);border-radius:.5rem;white-space:pre-wrap;word-break:break-word;color:var(--muted)}.solo-hint{font-size:.85rem;color:var(--muted);line-height:1.4;margin:0}.import-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;background:#60a5fa1f;border:1px solid var(--accent);border-radius:.5rem;padding:.6rem .85rem;font-size:.85rem}.import-banner[hidden]{display:none}.import-banner p{margin:0;flex:1;min-width:200px}.import-banner-buttons{display:flex;gap:.5rem}#dismiss-import-btn{background:var(--panel-border);color:var(--text)}.landing{align-items:center;justify-content:center}.landing-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:1rem;padding:2rem;max-width:380px;width:100%;text-align:center}.landing-card h1{margin:0 0 .5rem;font-size:1.6rem}.landing-card .back-link{display:inline-block;margin-bottom:1rem}.landing-sub{color:var(--muted);font-size:.9rem;margin:0 0 1.5rem}.landing-buttons{display:flex;flex-direction:column;gap:.6rem}.landing-btn{padding:.75rem 1rem;font-size:1rem}.auth-form{display:flex;flex-direction:column;gap:.6rem;text-align:left}.auth-form input{font-size:1rem;padding:.55rem .7rem;border-radius:.5rem;border:1px solid var(--panel-border);background:#0b1220;color:var(--text)}.auth-form input:focus{outline:none;border-color:var(--accent)}.auth-error{color:var(--red);font-size:.85rem;margin:0}.auth-buttons{display:flex;gap:.6rem}.auth-buttons button{flex:1}#register-btn{background:var(--panel-border);color:var(--text)}.knowledge-bar{display:flex;flex-direction:column;gap:.3rem}.knowledge-bar-label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted)}.knowledge-bar-label span:last-child{font-weight:700;color:var(--text)}.knowledge-bar-track{height:.6rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:999px;overflow:hidden}.knowledge-bar-fill{height:100%;border-radius:999px;background:var(--red);transition:width .3s ease}.knowledge-bar-fill.mid{background:var(--amber)}.knowledge-bar-fill.high{background:var(--green)}.stats-bar{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.8rem}.stat{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:999px;padding:.25rem .65rem;color:var(--muted)}.stat b{color:var(--text);margin-left:.25rem}.stat-0{border-color:#f8717166}.stat-1{border-color:#fbbf2466}.stat-2{border-color:#eab30866}.stat-3{border-color:#34d39966}.stat-examready{border-color:#60a5fa66}.stat-atrisk{border-color:#f8717180}.stat[data-bucket]{cursor:pointer}.stat[data-bucket]:hover{border-color:var(--accent);color:var(--text)}.concept-popover{position:fixed;z-index:50;width:260px;max-height:320px;overflow-y:auto;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:.5rem;box-shadow:0 8px 24px #0006;padding:.5rem .6rem;font-size:.8rem}.concept-popover.pinned{border-color:var(--accent)}.concept-popover[hidden]{display:none}.concept-popover-title{font-weight:600;color:var(--text);margin-bottom:.35rem;position:sticky;top:0;background:var(--panel-bg)}.concept-popover-list{list-style:none;margin:0;padding:0}.concept-popover-list li{padding:.2rem 0;border-bottom:1px solid var(--panel-border);color:var(--muted)}.concept-popover-list li:last-child{border-bottom:none}.concept-popover-empty{color:var(--muted);font-style:italic}.panel-practice{max-width:640px;width:100%;margin:0 auto}.concept-changes{max-width:640px;width:100%;margin:.5rem auto 0;padding:.6rem .8rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:.5rem;font-size:.8rem}.concept-changes-title{margin:0 0 .35rem;color:var(--muted);font-weight:600}.concept-changes-empty{margin:0;color:var(--muted)}.concept-change{padding:.15rem 0;color:var(--muted)}.concept-change-label{color:var(--text);font-weight:600}.concept-change b{color:var(--accent)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:10}.overlay[hidden]{display:none}.overlay-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:1rem;padding:2rem;text-align:center;max-width:320px}.overlay-card h1{margin:0 0 1.25rem;font-size:1.8rem}.overlay-buttons{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}@media (max-width: 420px){.panels{gap:.4rem}.panel{padding:.5rem}}