:root{--color-bg: #030303;--color-surface: #1a1a1a;--color-border: #3a3a3a;--color-text: #f5f5f5;--color-text-muted: #b3b3b3;--color-accent: #c73b2c;--color-accent-text: #ffffff}.app{max-width:640px;margin:0 auto;padding:1rem 1rem 3rem;background:var(--color-bg);color:var(--color-text)}.app-header h1{font-size:1.4rem;margin:0 0 .75rem}.mode-toggle{display:flex;gap:.5rem;margin-bottom:1rem}.mode-toggle button{flex:1;padding:.6rem;border:1px solid var(--color-border);border-radius:.5rem;background:var(--color-surface);color:var(--color-text);font-size:1rem}.mode-toggle button.active{background:var(--color-accent);color:var(--color-accent-text);border-color:var(--color-accent)}.filters{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.category-filter{display:flex;flex-wrap:wrap;gap:.5rem}.category-chip{padding:.4rem .8rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:.85rem}.category-chip.active{background:var(--color-accent);color:var(--color-accent-text);border-color:var(--color-accent)}.search-bar{width:100%;padding:.6rem .8rem;border-radius:.5rem;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:1rem}.glossary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.glossary-item{border:1px solid var(--color-border);border-radius:.5rem;overflow:hidden}.glossary-item-header{width:100%;display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;padding:.75rem;background:var(--color-surface);color:var(--color-text);border:none;text-align:left;font-size:1rem}.term-chinese{font-size:1.1rem}.term-romanization{font-weight:600}.term-category{margin-left:auto;font-size:.75rem;color:var(--color-accent)}.term-description{padding:0 .75rem .75rem;margin:0;color:var(--color-text-muted)}.empty-state{color:var(--color-text-muted);text-align:center;margin-top:2rem}.flashcard-mode{display:flex;flex-direction:column;gap:1rem}.flashcard-controls-top{display:flex;justify-content:space-between;align-items:center}.flashcard{min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid var(--color-border);border-radius:.75rem;background:var(--color-surface);padding:1.5rem;cursor:pointer}.flashcard-front{font-size:1.5rem}.flashcard-back .term-chinese{font-size:1.75rem}.flashcard-controls-bottom{display:flex;gap:.75rem}.flashcard-controls-bottom button{flex:1;padding:.75rem;border-radius:.5rem;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:1rem}.flashcard-controls-bottom button:last-child{background:var(--color-accent);color:var(--color-accent-text);border-color:var(--color-accent)}.term-image{width:2rem;height:2rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.term-image-placeholder{font-size:1.5rem;line-height:1;flex-shrink:0}.flashcard-back .term-image,.flashcard-back .term-image-placeholder{display:block;margin:0 auto .5rem;width:3rem;height:3rem;font-size:2.5rem;text-align:center}.quiz-mode{display:flex;flex-direction:column;gap:1rem}.quiz-progress{margin:0;color:var(--color-text-muted)}.quiz-question{text-align:center;padding:1.5rem;border:1px solid var(--color-border);border-radius:.75rem;background:var(--color-surface)}.quiz-question .term-chinese{font-size:1.75rem}.quiz-options{display:flex;flex-direction:column;gap:.5rem}.quiz-option{padding:.75rem;border-radius:.5rem;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:1rem;text-align:left}.quiz-option:disabled{opacity:.7}.quiz-option.correct{border-color:#4caf50;color:#4caf50}.quiz-option.incorrect{border-color:var(--color-accent);color:var(--color-accent)}.quiz-next{padding:.75rem;border-radius:.5rem;border:1px solid var(--color-accent);background:var(--color-accent);color:var(--color-accent-text);font-size:1rem}.quiz-result{text-align:center;padding:2rem 1rem}.quiz-score{font-size:1.5rem;margin-bottom:1rem}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#14171a;color:#f2f2f2}