:root{--primary:#0d6efd;--primary-dark:#0b5ed7;--primary-light:#e7f1ff;--success:#2e7d32;--success-light:#e8f5e9;--danger:#d32f2f;--danger-light:#ffebee;--warning:#f59e0b;--warning-light:#fff3e0;--text:#213547;--muted:#6c757d;--bg:#f8f9fa;--card-bg:#fff;--border:#e9ecef;--radius-lg:12px;--radius-md:8px;--shadow:0 2px 8px #0000000f;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;color:var(--text);background-color:var(--bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}.container{max-width:720px;margin:0 auto;padding:1.5rem}h1{text-align:center;margin-bottom:1.5rem}.error{color:#d32f2f;text-align:center}.message{color:#2e7d32;text-align:center;background:#e8f5e9;border-radius:8px;margin:1rem 0;padding:.75rem}.tag-selector{margin-bottom:1.5rem}.tag-cloud{flex-wrap:wrap;gap:.5rem;display:flex}.tag-chip{cursor:pointer;background:#fff;border:1px solid #dee2e6;border-radius:999px;padding:.4rem .75rem;font-size:.9rem;transition:all .15s}.tag-chip:hover{border-color:#adb5bd}.tag-chip.active{color:#fff;background:#0d6efd;border-color:#0d6efd}.tag-count{opacity:.7;margin-left:.25rem;font-size:.8rem}.selected-tags{margin-top:.75rem;font-size:.9rem}.actions{justify-content:center;gap:1rem;margin:1.5rem 0;display:flex}.btn{cursor:pointer;border:1px solid #0000;border-radius:8px;padding:.6rem 1.2rem;font-size:1rem;transition:all .15s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{color:#fff;background:#0d6efd}.btn.primary:hover:not(:disabled){background:#0b5ed7}.btn.secondary{color:#0d6efd;background:#fff;border-color:#0d6efd}.btn.secondary:hover:not(:disabled){background:#e7f1ff}.btn.link{color:#0d6efd;background:0 0;padding:.25rem .5rem}.hint{text-align:center;color:#6c757d;font-size:.9rem}header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.progress{color:#495057;font-weight:600}.card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000000f}.prompt{text-align:center;padding:2rem 0}.prompt h2{color:#495057;margin-bottom:1.5rem}.prompt-actions{flex-direction:column;align-items:center;gap:.75rem;display:flex}.prompt-actions .btn{min-width:160px}@media (width>=480px){.prompt-actions{flex-direction:row;justify-content:center}}.field{margin-bottom:1rem}.field label{color:#495057;margin-bottom:.25rem;font-weight:600;display:block}.field .value{padding:.5rem 0;font-size:1.25rem}.inputs input{border:1px solid #ced4da;border-radius:6px;width:100%;padding:.6rem;font-size:1rem}.inputs input:disabled{background:#e9ecef}.correct{color:#2e7d32;font-weight:600}.wrong{color:#d32f2f;font-weight:600}.example-sentence{background:var(--primary-light);border-radius:var(--radius-md);margin-bottom:1rem;padding:.75rem}.example-sentence label{color:var(--primary);margin-bottom:.35rem;font-size:.85rem}.example-sentence .sentence-en{color:var(--text);margin-bottom:.25rem;font-size:1.1rem}.example-sentence .sentence-zh{color:var(--muted);font-size:.95rem}.retry-actions{flex-direction:column;align-items:center;gap:.75rem;margin-top:.5rem;display:flex}.retry-actions .btn{min-width:180px}@media (width>=480px){.retry-actions{flex-direction:row;justify-content:center}}.rating{text-align:center;margin-top:1.5rem}.rating-buttons{justify-content:center;gap:.5rem;margin:.75rem 0;display:flex}.rating-btn{color:#495057;background:#fff;border-color:#adb5bd;border-radius:50%;width:42px;height:42px;padding:0}.rating-btn:hover{background:#e9ecef}.rating-btn.suggested{color:#fff;background:#0d6efd;border-color:#0d6efd}.rating-labels{color:#6c757d;justify-content:space-between;max-width:280px;margin:0 auto;font-size:.8rem;display:flex}.nav{justify-content:space-between;margin-top:1.5rem;display:flex}.user-bar{color:#495057;justify-content:flex-end;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.9rem;display:flex}.login-page{justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{text-align:center;background:#fff;border-radius:12px;width:100%;max-width:360px;padding:2rem;box-shadow:0 2px 8px #0000000f}.login-card h1{margin-bottom:.5rem}.login-card .subtitle{color:#6c757d;margin-bottom:1.5rem}.login-card form{flex-direction:column;gap:1rem;display:flex}.page-header{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;gap:.5rem;display:flex}.page-header .title{color:var(--text);text-align:center;flex:1;font-size:1.1rem;font-weight:600}.audio-player{border-radius:var(--radius-md);width:100%;margin:1rem 0}.match-item .audio-player{height:32px;margin:.25rem 0 0}.tag-selector h3{color:var(--text);margin:0 0 .75rem;font-size:1rem}.selected-tags{background:var(--primary-light);border-radius:var(--radius-md);flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;padding:.5rem .75rem;font-size:.85rem;display:flex}.selected-tags .btn.link{margin-left:auto;font-size:.85rem}.checkin-summary{margin-bottom:var(--space-md)}.checkin-today{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);flex-wrap:wrap;font-size:1.1rem;display:flex}.streak-row{gap:var(--space-sm);display:flex}.streak-badge{background:var(--primary-light);color:var(--primary);border-radius:999px;align-items:center;padding:.35rem .75rem;font-size:.85rem;font-weight:600;display:inline-flex}.streak-badge.longest{background:var(--warning-light);color:#c77500}.checkin-stats{gap:var(--space-md);text-align:center;grid-template-columns:repeat(2,1fr);display:grid}.stat-number{color:var(--primary);font-size:1.75rem;font-weight:700;line-height:1.2;display:block}.stat-label{color:var(--muted);margin-top:.15rem;font-size:.85rem;display:block}.calendar-toolbar{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.calendar-title{font-size:1.1rem;font-weight:600}.calendar-grid{width:100%}.calendar-header{text-align:center;padding-bottom:var(--space-sm);border-bottom:1px solid var(--border);margin-bottom:var(--space-sm);grid-template-columns:repeat(7,1fr);display:grid}.calendar-weekday{color:var(--muted);font-size:.8rem;font-weight:600}.calendar-body{grid-template-columns:repeat(7,1fr);gap:.25rem;display:grid}.calendar-day{aspect-ratio:1;border-radius:var(--radius-md);cursor:pointer;background:0 0;border:1px solid #0000;flex-direction:column;justify-content:center;align-items:center;min-height:44px;padding:0;transition:all .15s;display:flex;position:relative}.calendar-day:disabled{cursor:default;opacity:.5}.calendar-day:not(:disabled):hover{background:var(--primary-light)}.calendar-day.today{border-color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary)}.calendar-day.active{color:#fff;border-color:#0000}.calendar-day.intensity-1{color:#fff;background:#9ec5fe}.calendar-day.intensity-2{color:#fff;background:#6ea8fe}.calendar-day.intensity-3{color:#fff;background:#3d8bfd}.calendar-day.intensity-4{background:var(--primary);color:#fff}.calendar-day-number{font-size:.9rem;font-weight:600}.calendar-day-count{opacity:.9;margin-top:.1rem;font-size:.65rem;line-height:1}.day-detail{margin-top:var(--space-lg)}.day-detail h3{margin:0 0 .25rem;font-size:1.1rem}.word-list{margin:var(--space-md) 0 0;gap:var(--space-sm);flex-direction:column;padding:0;list-style:none;display:flex}.word-list-item{align-items:center;gap:var(--space-sm);background:var(--bg);border-radius:var(--radius-md);grid-template-columns:1fr 1fr auto;padding:.75rem;font-size:.95rem;display:grid}.word-english{color:var(--text);font-weight:600}.word-chinese{color:var(--muted)}.word-quality{border-radius:999px;justify-self:end;padding:.2rem .5rem;font-size:.75rem;font-weight:600}.word-quality.quality-5{background:var(--success-light);color:var(--success)}.word-quality.quality-4{color:#166534;background:#d1fadf}.word-quality.quality-3{background:var(--warning-light);color:#9a6b00}.word-quality.quality-2{color:#e65100;background:#ffe0b2}.word-quality.quality-1{background:var(--danger-light);color:var(--danger)}.word-quality.quality-0{color:var(--muted);background:#f5f5f5}.game-menu h3{margin:0 0 var(--space-md);font-size:1.1rem}.game-options{gap:var(--space-md);flex-direction:column;display:flex}.game-option-btn{border-radius:var(--radius-lg);text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:1.25rem 1rem;font-size:1.1rem;font-weight:600;line-height:1.4;display:flex}.game-option-btn .emoji{margin-bottom:.25rem;font-size:1.5rem}.game-option-desc{opacity:.85;margin-top:.35rem;font-size:.85rem;font-weight:400;display:block}.audio-player-area{background:var(--bg);border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md)}.game-card{text-align:center}.game-options-grid{gap:var(--space-md);margin-top:var(--space-lg);grid-template-columns:1fr;display:grid}.game-option{border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--card-bg);color:var(--text);text-align:center;cursor:pointer;padding:1rem;font-size:1.05rem;transition:all .15s}.game-option:hover:not(:disabled){border-color:var(--primary);background:var(--primary-light)}.game-option.correct{background:var(--success-light);border-color:var(--success);color:var(--success)}.game-option.wrong{background:var(--danger-light);border-color:var(--danger);color:var(--danger)}.game-option:disabled{cursor:default}.game-option.correct:before{content:"✓ "}.game-option.wrong:before{content:"✗ "}.match-board{gap:var(--space-md);margin-top:var(--space-md);grid-template-columns:1fr 1fr;display:grid}.match-column{flex-direction:column;gap:.75rem;display:flex}.match-item{border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--card-bg);width:100%;min-height:64px;color:var(--text);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;padding:.75rem;font-size:.95rem;transition:all .15s;display:flex}.match-item:hover:not(:disabled){border-color:var(--primary);background:var(--primary-light)}.match-item.selected{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 3px #0d6efd33}.match-item.matched{background:var(--success-light);border-color:var(--success);color:var(--success);opacity:.75;cursor:default}.match-item.wrong{background:var(--danger-light);border-color:var(--danger);color:var(--danger);animation:.4s ease-in-out shake}.match-label{font-weight:500;line-height:1.3}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.result-summary{text-align:center}.result-summary h2{margin-bottom:var(--space-md)}.result-stats{margin:var(--space-lg) 0;justify-content:space-around;display:flex}.quality-distribution{margin:var(--space-lg) 0;text-align:left}.quality-bar{grid-template-columns:3.5rem 1fr 1.5rem;align-items:center;gap:.75rem;margin-bottom:.4rem;display:grid}.quality-label{color:var(--muted);text-align:right;font-size:.8rem}.quality-track{background:var(--border);border-radius:999px;height:10px;overflow:hidden}.quality-fill{border-radius:999px;height:100%;transition:width .4s}.quality-bar:first-child .quality-fill{background:var(--success)}.quality-bar:nth-child(2) .quality-fill{background:#66bb6a}.quality-bar:nth-child(3) .quality-fill{background:var(--warning)}.quality-bar:nth-child(4) .quality-fill{background:#ff7043}.quality-bar:nth-child(5) .quality-fill{background:var(--danger)}.quality-bar:nth-child(6) .quality-fill{background:#9e9e9e}.quality-count{color:var(--muted);text-align:right;font-size:.8rem}@media (width>=480px){.container,.card{padding:1.25rem}.game-options-grid{grid-template-columns:1fr 1fr}.word-list-item{grid-template-columns:1.2fr 1fr auto}}@media (width>=720px){.container,.card{padding:var(--space-lg)}.calendar-day-number{font-size:1rem}.match-item{padding:1rem;font-size:1rem}}