:root{--bg: #f6f4f1;--surface: #ffffff;--surface-alt: #f0eeea;--border: #e3ddd3;--text: #24211d;--text-muted: #746e64;--char-color: #d6336c;--char-bg: #fce8f0;--vocab-color: #7c3aed;--vocab-bg: #f1eafd;--expr-color: #b7791f;--expr-bg: #fbf0d9;--accent: #2b7a6f;--accent-bg: #e3f2ef;--danger: #c0392b;--danger-bg: #fbeae7;--success: #2f9e44;--info: #2f6fce;--radius: 10px;--shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06)}@media (prefers-color-scheme: dark){:root{--bg: #16181d;--surface: #1e2127;--surface-alt: #262a31;--border: #33373f;--text: #eceae6;--text-muted: #9a978f;--char-color: #ff7bab;--char-bg: #3a1f2a;--vocab-color: #b794f6;--vocab-bg: #2b2340;--expr-color: #f0b955;--expr-bg: #3a2f18;--accent: #4fd1b5;--accent-bg: #1c322e;--danger: #ff8a75;--danger-bg: #3a2420;--success: #6fd97f;--info: #74a9f7;--shadow: 0 1px 3px rgba(0, 0, 0, .4)}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background-color:var(--bg);background-image:url(/pattern-light.svg),radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--char-color) 14%,transparent) 0%,transparent 32%),radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--vocab-color) 13%,transparent) 0%,transparent 30%),radial-gradient(circle at 88% 92%,color-mix(in srgb,var(--info) 12%,transparent) 0%,transparent 34%),radial-gradient(circle at 6% 96%,color-mix(in srgb,var(--accent) 13%,transparent) 0%,transparent 32%);background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;background-size:420px 420px,auto,auto,auto,auto;background-attachment:fixed,fixed,fixed,fixed,fixed}@media (prefers-color-scheme: dark){body{background-image:url(/pattern-dark.svg),radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--char-color) 16%,transparent) 0%,transparent 32%),radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--vocab-color) 16%,transparent) 0%,transparent 30%),radial-gradient(circle at 88% 92%,color-mix(in srgb,var(--info) 15%,transparent) 0%,transparent 34%),radial-gradient(circle at 6% 96%,color-mix(in srgb,var(--accent) 16%,transparent) 0%,transparent 32%)}}button,input{font-family:inherit}a{color:inherit}.app-shell{min-height:100%;display:flex;flex-direction:column}.app-header{border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10}.app-header-inner{max-width:900px;margin:0 auto;padding:.75rem 1.25rem;display:flex;align-items:center;gap:1.5rem}.brand{font-weight:700;font-size:1.25rem;text-decoration:none;background:linear-gradient(135deg,var(--char-color),var(--vocab-color) 55%,var(--info));-webkit-background-clip:text;background-clip:text;color:transparent}.main-nav{display:flex;gap:1rem;flex:1}.main-nav a{text-decoration:none;color:var(--text-muted);font-size:.95rem;padding:.35rem 0;border-bottom:2px solid transparent}.main-nav a.active{color:var(--text);border-bottom-color:var(--accent)}.link-button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;padding:.3rem 0}.link-button:hover{color:var(--text)}.app-main{flex:1;max-width:900px;width:100%;margin:0 auto;padding:1.5rem 1.25rem 3rem}.page-loading,.page-empty{text-align:center;color:var(--text-muted);padding:3rem 1rem}.login-page{min-height:100%;display:flex;align-items:center;justify-content:center;padding:1rem}.login-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2.25rem 2rem 2rem;width:100%;max-width:340px;text-align:center}.login-card:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--char-color),var(--vocab-color),var(--info),var(--accent))}.login-card:after{content:"學";position:absolute;top:-1.5rem;right:-1.5rem;font-size:9rem;line-height:1;color:var(--vocab-color);opacity:.06;pointer-events:none}.login-card h1{margin-top:0;font-size:2rem;background:linear-gradient(135deg,var(--char-color),var(--vocab-color) 55%,var(--info));-webkit-background-clip:text;background-clip:text;color:transparent}.login-card input{width:100%;padding:.6rem .75rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-alt);color:var(--text);font-size:1rem;margin-bottom:.75rem}.login-error{color:var(--danger);font-size:.9rem;margin-bottom:.75rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:none;border-radius:8px;padding:.65rem 1.3rem;font-size:1rem;font-weight:600;cursor:pointer;background:var(--accent);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.quiz-color-reading{background:var(--success)}.btn.quiz-color-writing{background:var(--vocab-color)}.btn.quiz-color-expression{background:var(--info)}.btn-secondary{background:var(--surface-alt);color:var(--text);border:1px solid var(--border)}.btn-block{width:100%}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);text-align:center}.stat-card .stat-number{font-size:2.5rem;font-weight:700;line-height:1;margin-bottom:.4rem}.stat-card.lessons .stat-number{color:var(--accent)}.stat-card.reviews .stat-number{color:var(--vocab-color)}.stat-card .stat-label{color:var(--text-muted);font-size:.9rem;margin-bottom:.9rem}.stat-card .stat-hint{color:var(--text-muted);font-size:.85rem;margin-top:.5rem}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);margin-bottom:1.25rem}.panel h2{margin-top:0;font-size:1.05rem}.progress-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}.progress-row .progress-tag{width:90px;flex-shrink:0;font-size:.85rem;font-weight:600}.progress-tag.character{color:var(--char-color)}.progress-tag.vocabulary{color:var(--vocab-color)}.progress-tag.expression{color:var(--expr-color)}.progress-track{flex:1;height:10px;background:var(--surface-alt);border-radius:6px;overflow:hidden;position:relative}.progress-fill{height:100%;border-radius:6px}.progress-fill.character{background:var(--char-color)}.progress-fill.vocabulary{background:var(--vocab-color)}.progress-fill.expression{background:var(--expr-color)}.progress-count{font-size:.8rem;color:var(--text-muted);width:70px;text-align:right;flex-shrink:0}.subject-grid{display:flex;flex-wrap:wrap;gap:.5rem}.subject-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:8px;font-size:1.4rem;cursor:default;color:#fff;position:relative}.subject-chip.character{background:var(--char-color)}.subject-chip.vocabulary{background:var(--vocab-color)}.subject-chip.expression{background:var(--expr-color);width:auto;min-width:56px;height:auto;min-height:56px;padding:.4rem .6rem;font-size:1.1rem;white-space:nowrap}.subject-chip.locked{background:var(--surface-alt);color:var(--text-muted);border:1px dashed var(--border)}.subject-chip .stage-dot{position:absolute;bottom:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#ffffffe6}.level-section{margin-bottom:1.5rem}.level-section h3{font-size:.95rem;color:var(--text-muted);margin-bottom:.6rem}.level-section.locked{opacity:.45}.flow-progress{color:var(--text-muted);font-size:.9rem;margin-bottom:1rem;text-align:center}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem 1.5rem;max-width:480px;margin:0 auto}.card-type-badge{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.2rem .6rem;border-radius:999px;margin-bottom:1rem}.card-type-badge.character{background:var(--char-bg);color:var(--char-color)}.card-type-badge.vocabulary{background:var(--vocab-bg);color:var(--vocab-color)}.card-type-badge.expression{background:var(--expr-bg);color:var(--expr-color)}.card-hanzi{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:4.5rem;text-align:center;margin:.5rem 0 1rem}.speak-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--border);background:var(--surface-alt);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer}.speak-btn:hover{background:var(--accent-bg);border-color:var(--accent)}.quiz-hanzi{display:flex;align-items:center;justify-content:center;gap:.6rem}.quiz-hanzi .speak-btn{font-size:1rem}.card-level{text-align:center;color:var(--text-muted);font-size:.85rem;margin-bottom:1rem}.card-section{margin-bottom:1.25rem}.card-section h4{margin:0 0 .3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}.card-section .value{font-size:1.15rem;font-weight:600}.card-section p{margin:.3rem 0 0;color:var(--text-muted);line-height:1.5;font-size:.95rem}.card-actions{display:flex;justify-content:space-between;gap:.75rem;margin-top:1.5rem}.quiz-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem 1.5rem;max-width:480px;margin:0 auto}.quiz-card.wrong{animation:shake .3s;border-color:var(--danger)}.quiz-card.correct{border-color:var(--success)}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.quiz-question-type{text-align:center;font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em;margin-bottom:.5rem}.quiz-question-type.quiz-color-reading{color:var(--success)}.quiz-question-type.quiz-color-writing{color:var(--vocab-color)}.quiz-question-type.quiz-color-expression{color:var(--info)}.quiz-hanzi{font-size:4rem;text-align:center;margin-bottom:1.5rem}.quiz-input{width:100%;padding:.75rem 1rem;font-size:1.2rem;border:2px solid var(--border);border-radius:8px;background:var(--surface-alt);color:var(--text);text-align:center}.quiz-input:focus{outline:none}.quiz-input.quiz-color-reading{border-color:var(--success)}.quiz-input.quiz-color-writing{border-color:var(--vocab-color)}.quiz-input.quiz-color-expression{border-color:var(--info)}.quiz-feedback{margin-top:1rem;text-align:center;font-size:.95rem}.quiz-feedback.wrong{color:var(--danger)}.quiz-feedback.correct{color:var(--success)}.quiz-footer{margin-top:1.5rem;text-align:center}.text-center{text-align:center}.mb-1{margin-bottom:1rem}.summary-list{list-style:none;padding:0;margin:0}.summary-list li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border)}.summary-list li:last-child{border-bottom:none}.badge{display:inline-block;font-size:.75rem;padding:.15rem .5rem;border-radius:999px;font-weight:600}.badge.stage-locked{background:var(--surface-alt);color:var(--text-muted)}.badge.stage-apprentice{background:var(--char-bg);color:var(--char-color)}.badge.stage-guru{background:var(--vocab-bg);color:var(--vocab-color)}.badge.stage-master,.badge.stage-enlightened,.badge.stage-burned{background:var(--accent-bg);color:var(--accent)}