:root{--color-primary: #4a90d9;--color-primary-dark: #357abd;--color-success: #27ae60;--color-error: #e74c3c;--color-warning: #f39c12;--color-bg: #f8f9fa;--color-surface: #ffffff;--color-text: #2c3e50;--color-text-light: #7f8c8d;--color-border: #e0e0e0;--font-size-xl: 2.5rem;--font-size-lg: 1.75rem;--font-size-md: 1.25rem;--font-size-sm: 1rem;--radius: 16px;--shadow: 0 4px 12px rgba(0, 0, 0, .1);--btn-min-height: 64px;--btn-main-height: 120px}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}#root{min-height:100vh}a{color:var(--color-primary);text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;outline:none}.app-container{max-width:800px;margin:0 auto;padding:16px;min-height:100vh}.page-title{font-size:var(--font-size-lg);font-weight:700;text-align:center;margin-bottom:24px;color:var(--color-text)}.big-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:var(--btn-min-height);padding:20px 24px;border-radius:var(--radius);font-size:var(--font-size-md);font-weight:600;color:#fff;background:var(--color-primary);box-shadow:var(--shadow);transition:transform .15s,background .15s;gap:8px}.big-button:active{transform:scale(.97)}.big-button.main{min-height:var(--btn-main-height);font-size:var(--font-size-lg)}.big-button.success{background:var(--color-success)}.big-button.warning{background:var(--color-warning)}.big-button.secondary{background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border)}.big-button .icon{font-size:2.5rem}.big-button .label-zh{font-size:var(--font-size-md)}.big-button .label-en{font-size:var(--font-size-sm);opacity:.8}.button-grid{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.nav-bar{display:flex;gap:8px;padding:12px 0;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}.nav-link{padding:8px 16px;border-radius:20px;background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);white-space:nowrap;border:1px solid var(--color-border);transition:background .15s}.nav-link.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.card{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}.sentence-display{text-align:center;padding:32px 16px}.sentence-en{font-size:var(--font-size-xl);font-weight:700;line-height:1.4;margin-bottom:16px;color:var(--color-text)}.sentence-zh{font-size:var(--font-size-md);color:var(--color-text-light)}.word-highlight{display:inline;padding:2px 4px;border-radius:4px;transition:background .2s}.word-highlight.active{background:#fff3cd;color:#856404}.controls-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:20px 0}.control-btn{min-width:80px;min-height:56px;padding:12px 20px;border-radius:12px;background:var(--color-surface);border:2px solid var(--color-border);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);transition:all .15s}.control-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.control-btn.record{background:var(--color-error);color:#fff;border-color:var(--color-error);min-width:120px;min-height:72px;font-size:var(--font-size-md)}.control-btn.record.recording{animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.book-card{border-radius:var(--radius);padding:20px 16px;color:#fff;text-align:center;min-height:140px;display:flex;flex-direction:column;justify-content:center;gap:8px;box-shadow:var(--shadow);transition:transform .15s}.book-card:active{transform:scale(.97)}.book-card .title-en{font-size:var(--font-size-sm);font-weight:700}.book-card .title-zh{font-size:.875rem;opacity:.9}.book-card .series{font-size:.75rem;opacity:.7}.level-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.875rem;font-weight:600;background:var(--color-primary);color:#fff;margin-bottom:12px}.level-badge.review{background:var(--color-warning)}.quiz-option{display:block;width:100%;padding:16px 20px;margin-bottom:12px;border-radius:12px;background:var(--color-surface);border:2px solid var(--color-border);font-size:var(--font-size-md);text-align:center;transition:all .15s}.quiz-option.correct{background:#d4edda;border-color:var(--color-success)}.quiz-option.wrong{background:#f8d7da;border-color:var(--color-error)}.progress-ring{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;background:conic-gradient(var(--color-success) var(--progress, 0%),var(--color-border) 0%);color:var(--color-text)}.voice-card{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--radius);background:var(--color-surface);border:2px solid var(--color-border);margin-bottom:12px;transition:border-color .15s}.voice-card.selected{border-color:var(--color-primary);background:#ebf5fb}.voice-card .play-btn{width:48px;height:48px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.stat-card{background:var(--color-surface);border-radius:12px;padding:16px;text-align:center;box-shadow:var(--shadow)}.stat-card .value{font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary)}.stat-card .label{font-size:.875rem;color:var(--color-text-light)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--color-text);color:#fff;padding:12px 24px;border-radius:24px;font-size:var(--font-size-sm);z-index:1000;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translate(-50%) translateY(20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.error-banner{background:#f8d7da;color:#721c24;padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:var(--font-size-sm)}.ocr-area{border:2px dashed var(--color-border);border-radius:var(--radius);padding:40px 20px;text-align:center;margin-bottom:16px}.ocr-preview{max-width:100%;border-radius:8px;margin-bottom:16px}.ocr-textarea{width:100%;min-height:120px;padding:12px;border:2px solid var(--color-border);border-radius:8px;font-size:var(--font-size-md);font-family:inherit;resize:vertical}@media (min-width: 768px){.app-container{padding:24px}.button-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.big-button.main{grid-column:span 1}}