@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500;600&display=swap");:root{--bg:#F0F4FF;--panel:#FFFFFF;--panel-raised:#FFFFFF;--text:#2D3436;--muted:#7F8C8D;--border:#E0E6F0;--accent:#5A91E8;--accent-strong:#3A71C8;--accent2:#2E9E7A;--accent3:#FFD6E0;--gold:#B45309;--input-bg:rgba(0,0,0,0.04);--card-bg:rgba(255,255,255,0.85);--bg-subtle:#F8FBFF;--text-inv:#FFFFFF;--shadow:0 2px 16px rgba(120,160,220,0.12);--shadow-sm:0 1px 8px rgba(120,160,220,0.08);--shadow-lg:0 4px 32px rgba(120,160,220,0.18);--radius-sm:8px;--radius-md:10px;--radius-lg:12px;--radius-xl:14px;--radius-2xl:20px;--radius-pill:999px;--positive:#0052CC;--positive-em:#0052CC;--negative:#E63939;--negative-em:#E63939;--positive-bg:#EAF2FF;--negative-bg:#FDECEC;--positive-border:#8FB5FF;--negative-border:#F3A5A5;--success-bg:#C8F7C5;--success-text:#1A4A18;--error-bg:#FFB3BA;--error-text:#4A1018;--warning-bg:#FFF0D9;--warning-text:#7A4A00;--info-bg:#EAF2FF;--info-text:#174A9C;--info-border:#8FB5FF;--motion-fast:150ms;--motion-base:250ms;--motion-slow:400ms;--transition-fast:var(--motion-fast);--transition-base:var(--motion-base)}*,:after,:before{box-sizing:border-box;min-width:0}body{margin:0;font-family:DM Sans,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5;color:var(--text);background:var(--bg);transition:background var(--transition-base),color var(--transition-base);overflow-x:hidden}.mono{font-family:DM Mono,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}h1{margin:0 0 8px;font-size:2rem;font-weight:800;letter-spacing:-.02em}h2{margin:0 0 10px;font-size:1.15rem}h2,h3{font-weight:700}h3{margin:0 0 8px;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.muted,h3,p{color:var(--muted)}.muted,p{line-height:1.5;margin:0}a{color:var(--accent);text-decoration:none}.container{max-width:560px;margin:0 auto;padding:20px 16px}.card{background:var(--card-bg)}.card,.panel{border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow)}.panel{background:var(--panel)}.panel-raised{background:var(--panel-raised);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.header{padding:22px 28px;margin-bottom:18px;justify-content:space-between}.brand,.header{display:flex;align-items:center;gap:12px}.brand{min-width:0}.brand .logo{font-size:1.6rem;flex-shrink:0}.brand h1{white-space:nowrap}.brand .sub{color:var(--muted);font-size:.82rem;font-weight:600}.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.layout,.stack{display:flex;flex-direction:column;gap:18px}.pad{padding:20px}@media (max-width:560px){.header{padding:16px;gap:8px}.header .brand h1{font-size:1.1rem!important}.container{padding:14px}}.btn-primary{background:var(--accent);color:var(--text-inv);border:none;border-radius:var(--radius-md);padding:12px 22px;font-weight:700;font-size:.95rem;cursor:pointer;transition:opacity var(--transition-fast),transform var(--transition-fast);font-family:inherit;letter-spacing:.01em}.btn-primary:hover{opacity:.88}.btn-primary:active{transform:scale(.97)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 18px;font-weight:700;font-size:.9rem;cursor:pointer;transition:border-color var(--transition-fast);font-family:inherit}.btn-secondary:hover{border-color:var(--accent)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.txt-input{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:DM Sans,sans-serif;font-size:.95rem;font-weight:500;padding:11px 13px;width:100%;outline:none;transition:border-color var(--transition-fast)}.txt-input:focus{border-color:var(--accent);background:var(--panel)}.txt-input::placeholder{color:var(--muted)}textarea.txt-input{min-height:84px;resize:vertical;line-height:1.6}.toggle-row{display:flex;align-items:center;gap:10px}.toggle-label{font-weight:700;font-size:.88rem}.toggle-switch{position:relative;width:40px;height:22px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-track{position:absolute;inset:0;background:var(--input-bg);border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:background var(--motion-base)}.toggle-switch input:checked+.toggle-track{background:var(--accent);border-color:var(--accent)}.toggle-track .toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--motion-base)}.toggle-switch input:checked+.toggle-track .toggle-knob{transform:translateX(18px)}.badge{border-radius:var(--radius-pill);padding:3px 9px;font-size:.72rem;font-weight:700;display:inline-block}.badge-success{background:var(--success-bg);color:var(--success-text)}.badge-error{background:var(--error-bg);color:var(--error-text)}.badge-warning{background:var(--warning-bg);color:var(--warning-text)}.badge-info{background:var(--info-bg);color:var(--info-text)}.metrics{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px;gap:14px}.metric{padding:14px 16px;min-height:82px}.metric .label{color:var(--muted);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}.metric .value{font-family:DM Mono,monospace;font-size:1.7rem;font-weight:700;letter-spacing:-.01em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{padding:10px 8px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}td:first-child,th:first-child{text-align:left;white-space:normal}td.mono,th.mono{font-family:DM Mono,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}th{color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}tr:hover td{background:rgba(90,145,232,.04)}tr.me td{background:rgba(90,145,232,.1)}.rank{color:var(--muted);width:28px}.leaderboard-table td.learner,.leaderboard-table th.learner{text-align:left}.leaderboard-table tr.rank-gap td{text-align:center;border-bottom:none;padding:4px 8px}.center-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center}.login-card{width:100%;max-width:420px;padding:28px}.login-card .field{margin:14px 0}.login-card label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px}.dropzone{border:1.5px dashed var(--border);border-radius:var(--radius-lg);padding:22px;text-align:center;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast);background:var(--input-bg)}.dropzone:hover{border-color:var(--accent)}.dropzone .preview{max-height:180px;max-width:100%;border-radius:var(--radius-md);margin:0 auto;display:block}.mem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:10px;gap:10px;margin-top:14px}.mem-thumb{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--input-bg)}.mem-thumb img{width:100%;height:90px;object-fit:cover;display:block}.mem-thumb .cap{padding:6px 8px;font-size:.72rem;color:var(--muted);line-height:1.3}.mem-tags{display:flex;flex-wrap:wrap;gap:4px;padding:0 8px 8px}.mem-tags .t{font-size:.85rem}.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}.pagination .muted{font-size:.8rem}.health-wrap{display:flex;align-items:center;gap:12px;margin-bottom:4px}.health-bar{flex:1 1;height:14px;background:var(--input-bg);border:1px solid var(--border);overflow:hidden}.health-bar,.health-fill{border-radius:var(--radius-pill)}.health-fill{height:100%;transition:width .2s linear,background .3s}.health-fill.ok{background:var(--accent2)}.health-fill.warn{background:var(--gold)}.health-fill.low{background:var(--negative-em)}.health-label{font-family:DM Mono,monospace;font-size:.85rem;color:var(--muted);width:70px;text-align:right}.q-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.q-instruction{font-size:1.05rem;font-weight:600;margin:6px 0 16px}.q-prompt{text-align:center;margin:18px 0 22px}.token-line{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:flex-end}.token{display:inline-flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:6px 8px;border-radius:var(--radius-md);transition:background var(--transition-fast);position:relative;border:0;background:transparent;color:inherit;font-family:inherit}.token:hover{background:var(--input-bg)}.token .pinyin{font-family:DM Mono,monospace;font-size:.8rem;color:var(--accent);min-height:1em}.token .hanzi{font-size:2.2rem;font-weight:600;line-height:1.1}.token .gloss{font-size:.72rem;color:var(--muted);min-height:1em}.q-prompt.big .token .hanzi{font-size:3rem}.q-prompt-en{font-size:1.4rem;font-weight:700;text-align:center;margin:18px 0 22px}.options{display:grid;grid-gap:10px;gap:10px}.opt-btn{text-align:left;background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text);padding:13px 16px;font-size:.98rem;font-weight:600;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast);font-family:inherit}.opt-btn.selected,.opt-btn:hover:not(:disabled){border-color:var(--accent)}.opt-btn.selected{background:rgba(90,145,232,.1)}.opt-btn.correct{border-color:var(--positive-border);background:var(--positive-bg);color:var(--positive-em)}.opt-btn.wrong{border-color:var(--negative-border);background:var(--negative-bg);color:var(--negative-em)}.opt-btn:disabled{cursor:default}.yn-row{display:flex;gap:12px}.yn-row .opt-btn{flex:1 1;text-align:center;font-size:1.05rem}.feedback{margin-top:16px;padding:14px 16px;border-radius:var(--radius-lg);font-size:.92rem;line-height:1.5}.feedback.correct{background:var(--success-bg);color:var(--success-text)}.feedback.wrong{background:var(--error-bg);color:var(--error-text)}.feedback .points{font-family:DM Mono,monospace;font-weight:700}.assist-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:4px 0 16px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.assist-note{font-size:.76rem;color:var(--muted)}.learn-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}.back-link{font-size:.85rem;font-weight:600}.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(1turn)}}.loading-row{display:flex;align-items:center;gap:10px;color:var(--muted);padding:30px 0;justify-content:center}.lang-switch{display:flex;border:1px solid var(--border);border-radius:var(--radius-pill);overflow:hidden}.lang-btn{padding:4px 10px;font-size:.75rem;font-weight:700;background:transparent;border:none;cursor:pointer;color:var(--muted)}.lang-btn.active{background:var(--accent);color:#fff}.level-picker{margin-bottom:16px}.level-picker .level-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}.level-btns{display:flex;gap:10px;justify-content:center;margin-bottom:8px}.level-btn{padding:8px 18px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--input-bg);font-weight:700;cursor:pointer}.level-btn.active,.level-btn:hover:not(:disabled){border-color:var(--accent)}.level-btn.active{background:var(--accent);color:#fff}.level-btn:disabled{opacity:.6;cursor:wait}.pinyin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0}.pinyin-chip{padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--panel);font-family:DM Mono,monospace;font-size:.85rem;cursor:pointer}.pinyin-chip.active,.pinyin-chip:hover:not(:disabled){border-color:var(--accent)}.pinyin-chip.active{background:var(--accent);color:#fff}.pinyin-chip:disabled{opacity:.6;cursor:default}.q-prompt .token-line+.token-line{margin-top:10px}.token.blank,.token.plain{background:transparent;border:none;cursor:default;padding:2px 0;display:inline-flex;flex-direction:column;align-items:center}.token.blank .blank-slot{color:var(--accent);letter-spacing:-2px}.q-image{max-width:260px;margin:14px auto 0}.q-image img{height:auto;max-height:200px}.opt-btn.zh{font-size:1.3rem}.feedback .explain{margin-top:10px;padding-top:10px;border-top:1px dashed;opacity:.95}.feedback .zh-answer{font-size:1.2rem}