:root{--accent-green: #4CAF50;--accent-purple: #32BAAE;--accent-red: #F44336;--accent-warning: #FF9800;--accent-info: #2196F3;--accent-blue: #64B5F6;--accent-yellow: #FFD700;--accent-orange: #FFA726;--word-correct: #4CAF50;--word-warning: #FFC107;--word-error: #F44336;--radius-lg: 24px;--radius-md: 12px;--radius-sm: 8px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: .95rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.4;--line-height-normal: 1.5;--line-height-relaxed: 1.6;--line-height-loose: 1.8;--primary-bg: #121212;--secondary-bg: #1E1E1E;--card-bg: #2C2C2C;--card-hover: #3C3C3C;--text-primary: #FFFFFF;--text-secondary: #B3B3B3;--text-muted: #888888;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--overlay-bg: rgba(255, 255, 255, .05);--overlay-bg-medium: rgba(255, 255, 255, .08);--overlay-bg-strong: rgba(255, 255, 255, .1);--overlay-bg-stronger: rgba(255, 255, 255, .15);--border-subtle: rgba(255, 255, 255, .1);--border-medium: rgba(255, 255, 255, .15);--border-strong: rgba(255, 255, 255, .3);--hover-overlay: rgba(255, 255, 255, .04);--backdrop-overlay: rgba(0, 0, 0, .8);--scrollbar-track: rgba(255, 255, 255, .05);--scrollbar-thumb: rgba(255, 255, 255, .2);--scrollbar-thumb-hover: rgba(255, 255, 255, .3);--loading-bg: rgba(18, 18, 18, .8)}[data-theme=dark]{--primary-bg: #121212;--secondary-bg: #1E1E1E;--card-bg: #2C2C2C;--card-hover: #3C3C3C;--text-primary: #FFFFFF;--text-secondary: #B3B3B3;--text-muted: #888888;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--overlay-bg: rgba(255, 255, 255, .05);--overlay-bg-medium: rgba(255, 255, 255, .08);--overlay-bg-strong: rgba(255, 255, 255, .1);--overlay-bg-stronger: rgba(255, 255, 255, .15);--border-subtle: rgba(255, 255, 255, .1);--border-medium: rgba(255, 255, 255, .15);--border-strong: rgba(255, 255, 255, .3);--hover-overlay: rgba(255, 255, 255, .04);--backdrop-overlay: rgba(0, 0, 0, .8);--scrollbar-track: rgba(255, 255, 255, .05);--scrollbar-thumb: rgba(255, 255, 255, .2);--scrollbar-thumb-hover: rgba(255, 255, 255, .3);--loading-bg: rgba(18, 18, 18, .8)}[data-theme=light]{--primary-bg: #F5F7FA;--secondary-bg: #FFFFFF;--card-bg: #FFFFFF;--card-hover: #F0F2F5;--surface-elevated: #FFFFFF;--surface-sunken: #F0F2F5;--text-primary: #1A1A1A;--text-secondary: #6B7280;--text-muted: #9CA3AF;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .16);--overlay-bg: rgba(0, 0, 0, .03);--overlay-bg-medium: rgba(0, 0, 0, .05);--overlay-bg-strong: rgba(0, 0, 0, .08);--overlay-bg-stronger: rgba(0, 0, 0, .12);--border-subtle: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .12);--border-strong: rgba(0, 0, 0, .18);--hover-overlay: rgba(0, 0, 0, .04);--backdrop-overlay: rgba(0, 0, 0, .5);--scrollbar-track: rgba(0, 0, 0, .03);--scrollbar-thumb: rgba(0, 0, 0, .15);--scrollbar-thumb-hover: rgba(0, 0, 0, .25);--loading-bg: rgba(248, 250, 251, .9)}@media(prefers-color-scheme:light){:root:not([data-theme]){--primary-bg: #F5F7FA;--secondary-bg: #FFFFFF;--card-bg: #FFFFFF;--card-hover: #F0F2F5;--text-primary: #1A1A1A;--text-secondary: #6B7280;--text-muted: #9CA3AF;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .16);--overlay-bg: rgba(0, 0, 0, .03);--overlay-bg-medium: rgba(0, 0, 0, .05);--overlay-bg-strong: rgba(0, 0, 0, .08);--overlay-bg-stronger: rgba(0, 0, 0, .12);--border-subtle: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .12);--border-strong: rgba(0, 0, 0, .18);--hover-overlay: rgba(0, 0, 0, .04);--backdrop-overlay: rgba(0, 0, 0, .5);--scrollbar-track: rgba(0, 0, 0, .03);--scrollbar-thumb: rgba(0, 0, 0, .15);--scrollbar-thumb-hover: rgba(0, 0, 0, .25);--loading-bg: rgba(248, 250, 251, .9)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{box-sizing:border-box;margin:0;padding:0;font-family:var(--font-family);-webkit-tap-highlight-color:transparent}html,body{height:100%;width:100%;background-color:var(--primary-bg);color:var(--text-primary);overscroll-behavior:none;touch-action:manipulation}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--backdrop-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.loading-spinner{width:48px;height:48px;border:3px solid var(--border-subtle);border-top-color:var(--accent-purple);border-radius:50%;animation:spin .8s linear infinite}.loading-spinner.small{width:24px;height:24px;border-width:2px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--backdrop-overlay);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-5);transition:opacity .3s ease}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-content{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--space-8);width:100%;max-width:360px;box-shadow:var(--shadow-lg);animation:modalFadeIn .3s ease-out}.modal-content.large{max-width:600px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease;user-select:none;-webkit-user-select:none}.btn:active{transform:scale(.98)}.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--accent-purple);color:#fff}.btn-primary:hover{filter:brightness(1.1)}.btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--border-medium)}.btn-secondary:hover{background:var(--hover-overlay)}.btn-danger{background:var(--accent-red);color:#fff}.btn-danger:hover{filter:brightness(1.1)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulseGlow{0%,to{box-shadow:0 0 10px var(--accent-purple)}50%{box-shadow:0 0 20px var(--accent-purple)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-select{user-select:none;-webkit-user-select:none}.safe-area-top{padding-top:env(safe-area-inset-top,0)}.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom,0)}.safe-area-left{padding-left:env(safe-area-inset-left,0)}.safe-area-right{padding-right:env(safe-area-inset-right,0)}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}html,body{height:100%;width:100%;overflow:hidden;background-color:var(--primary-bg);color:var(--text-primary);overscroll-behavior:none;touch-action:manipulation}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--loading-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-spinner{width:48px;height:48px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent-purple);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-spinner.small{width:24px;height:24px;border-width:2px;margin-top:20px}.typewriter-container{background:var(--card-bg);border-radius:var(--radius-lg);padding:32px;max-width:500px;width:90%;text-align:center;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center}.typewriter-header{display:flex;align-items:center;gap:12px;font-size:1.1rem;font-weight:600;color:var(--accent-purple);margin-bottom:20px}.typewriter-header i{font-size:1.5rem}.typewriter-text{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:16px 20px;min-height:80px;max-height:200px;overflow-y:auto;font-size:.95rem;line-height:1.8;text-align:left;color:var(--text-primary);width:100%;position:relative}.typewriter-text:after{content:"|";color:var(--accent-purple);animation:blink .8s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-overlay.hidden{display:none}.modal-content{background:var(--card-bg);border-radius:var(--radius-lg);padding:32px;width:100%;max-width:360px;box-shadow:0 20px 60px #00000080;animation:modalFadeIn .3s ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.login-modal{text-align:center}.login-logo{width:64px;height:64px;margin-bottom:16px;border-radius:12px}.login-modal h2{font-size:1.5rem;margin-bottom:8px}.login-subtitle{margin:0 0 16px;font-size:.9rem;color:var(--text-secondary)}.login-description{color:var(--text-secondary);font-size:.9rem;line-height:1.6;margin:.5rem 0 1.5rem;text-align:center}.login-actions{display:flex;flex-direction:column;gap:.75rem;width:100%}.login-divider{display:flex;align-items:center;gap:1rem;color:var(--text-secondary);font-size:.85rem}.login-divider:before,.login-divider:after{content:"";flex:1;border-bottom:1px solid var(--border-subtle, rgba(128,128,128,.3))}.btn-guest{font-size:.9rem}.guest-hint{color:var(--text-secondary);font-size:.8rem;margin-top:1rem;text-align:center}.guest-hint i{margin-right:.3rem}.btn-login{margin-top:8px;padding:14px 24px;font-size:1rem;font-weight:600;width:100%;border-radius:var(--radius-md);background:var(--accent-purple);color:#fff;border:none;cursor:pointer;transition:all .2s ease}.btn-login:hover:not(:disabled){background:#32baaed9;box-shadow:0 4px 12px #32baae4d}.btn-login:active:not(:disabled){transform:scale(.98)}.switch-modal h3{margin:0 0 16px;font-size:1.2rem;color:var(--text-primary);text-align:center}.current-user-info{background:var(--overlay-bg);border-radius:var(--radius-md);padding:16px;margin-bottom:20px}.current-user-info p{margin:0;padding:8px 0;color:var(--text-secondary);font-size:.95rem}.current-user-info p:last-child{padding-bottom:0}.user-name-display{font-size:1.1rem;font-weight:500;color:var(--text-primary)}.user-name-display i{margin-right:.4rem}.sync-status{font-size:.85rem}.sync-status i{margin-right:.3rem;color:var(--accent-purple)}.guest-warning{color:var(--warning-color, #FFA726);font-size:.9rem}.guest-warning i{margin-right:.3rem}.upgrade-hint{font-size:.85rem;line-height:1.5}.theme-toggle-section{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--overlay-bg);border-radius:var(--radius-md);margin-bottom:16px;border:1px solid var(--border-subtle)}.theme-label{font-size:.9rem;color:var(--text-primary);font-weight:500}.theme-toggle-switch{display:flex;gap:4px;background:var(--overlay-bg-medium);padding:3px;border-radius:10px}.theme-option{background:none;border:none;padding:8px 12px;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:40px}.theme-option:hover{color:var(--text-primary);background:var(--overlay-bg-strong)}.theme-option.active{background:var(--accent-purple);color:#fff;box-shadow:0 2px 8px #32baae4d}.theme-option i{font-size:.95rem}.modal-actions{display:flex;gap:12px;justify-content:center}.modal-actions .btn{flex:1;max-width:140px}#user-switch-modal.hidden{display:none}.history-detail-modal{max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.history-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}.history-detail-header h3{margin:0;display:flex;align-items:center;gap:8px}.history-detail-header h3 i{color:var(--accent-purple)}.btn-close-modal{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:1.2rem;padding:4px 8px;border-radius:var(--radius-sm);transition:all .2s}.btn-close-modal:hover{color:var(--text-primary);background:var(--hover-overlay)}.detail-score-section{text-align:center;margin-bottom:20px}.detail-main-score{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}.detail-main-score .score-value{font-size:3rem;font-weight:700;color:var(--accent-purple);line-height:1}.detail-main-score .score-label{font-size:.85rem;color:var(--text-muted)}.detail-stars{font-size:1.5rem}.detail-sub-scores{display:flex;justify-content:space-around;background:var(--secondary-bg);border-radius:var(--radius-md);padding:16px;margin-bottom:20px}.sub-score{text-align:center}.sub-score-value{display:block;font-size:1.5rem;font-weight:600;color:var(--text-primary)}.sub-score-label{font-size:.75rem;color:var(--text-muted)}.detail-info{background:var(--secondary-bg);border-radius:var(--radius-md);padding:16px;margin-bottom:20px}.detail-info p{margin:0;padding:6px 0;font-size:.9rem;display:flex;gap:8px}.detail-info p:not(:last-child){border-bottom:1px solid var(--border-subtle)}.detail-info strong{color:var(--text-muted);min-width:80px}.detail-text-section{margin-bottom:16px}.detail-text-section h4{font-size:.9rem;color:var(--text-muted);margin:0 0 8px}.detail-article-text,.detail-recognized-text{background:var(--secondary-bg);border-radius:var(--radius-md);padding:16px;font-size:.95rem;line-height:1.6;margin:0;max-height:150px;overflow-y:auto}.detail-audio-section{text-align:center;padding-top:12px}#history-detail-modal.hidden{display:none}.input-group{display:flex;flex-direction:column;gap:6px;text-align:left}.input-group label{font-size:.85rem;color:var(--text-secondary);font-weight:500}.input-group input,.input-group select,.input-group textarea{background:var(--secondary-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:12px 16px;font-size:1rem;color:var(--text-primary);transition:border-color .2s,box-shadow .2s}.input-group input:focus,.input-group select:focus,.input-group textarea:focus{outline:none;border-color:var(--accent-purple);box-shadow:0 0 0 3px #32baae33}.input-group input::placeholder{color:var(--text-muted)}.input-group select{cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;min-height:44px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent-purple);color:var(--primary-bg)}.btn-primary:hover:not(:disabled){background:#28a69a;transform:translateY(-1px)}.btn-secondary{background:var(--border-subtle);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:var(--border-medium)}.btn-icon{width:44px;height:44px;padding:0;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-icon:hover{background:var(--border-subtle);color:var(--text-primary)}.btn-sm{padding:8px 16px;font-size:.85rem;min-height:36px}.app-container{display:flex;flex-direction:column;height:100vh;height:100dvh}.app-container.hidden{display:none}.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--secondary-bg);border-bottom:1px solid var(--border-subtle);min-height:60px}.header-left{display:flex;align-items:center;gap:12px}.header-left h1{font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:8px}.header-left h1 i{color:var(--accent-purple)}.language-toggle{display:flex;gap:2px;background:var(--secondary-bg);border-radius:6px;padding:2px}.lang-btn{padding:4px 10px;border:none;border-radius:4px;background:transparent;color:var(--text-secondary);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.lang-btn:hover{color:var(--text-primary)}.lang-btn.active{background:var(--accent-purple);color:#fff;font-weight:600}.header-center{flex:1;text-align:center}.header-center h1{font-size:1.2rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;margin:0}.header-center h1 i{color:var(--accent-purple)}.header-right{display:flex;align-items:center;gap:12px}.btn-back{display:flex;align-items:center;gap:8px;background:#32baae1a;border:1px solid rgba(50,186,174,.3);color:var(--accent-purple);padding:8px 16px;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-back:hover{background:#32baae33;border-color:var(--accent-purple)}.btn-back i{font-size:.85rem}.user-info{display:flex;align-items:center;gap:8px;background:var(--overlay-bg);padding:6px 12px;border-radius:20px}#current-user-display{font-size:.9rem;color:var(--text-secondary)}#current-user-display i{margin-right:6px;color:var(--accent-blue)}.main-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:20px 20px 80px;min-height:0}section{margin-bottom:20px;max-width:720px;margin-left:auto;margin-right:auto}.generator-card,.article-card,.recording-card,.assessment-card{background:var(--card-bg);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm)}.generator-card h2,.article-card h3,.recording-card h3,.assessment-card h3{font-size:1.1rem;margin-bottom:16px;display:flex;align-items:center;gap:8px}.generator-card h2 i{color:var(--accent-purple)}.article-card h3 i{color:var(--accent-blue)}.recording-card h3 i{color:var(--accent-red)}.assessment-card h3 i{color:var(--accent-green)}.generator-form{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.form-row .input-group{min-width:120px}.form-row .flex-grow{flex:1;min-width:200px}.form-row .btn{flex-shrink:0}.mode-selector{display:flex;gap:4px;margin-bottom:16px;background:var(--secondary-bg);border-radius:var(--radius-sm);padding:4px}.mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;background:transparent;border:none;border-radius:6px;color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.mode-btn:hover{color:var(--text-primary);background:var(--overlay-bg)}.mode-btn.active{background:var(--accent-purple);color:#fff;font-weight:600}.mode-btn i{font-size:.85rem}.mode-panel{display:none}.mode-panel.active{display:block}#input-byot-text{width:100%;min-height:120px;padding:12px;background:var(--secondary-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.95rem;line-height:1.6;resize:vertical;transition:border-color .2s ease}#input-byot-text:focus{outline:none;border-color:var(--accent-purple)}#input-byot-text::placeholder{color:var(--text-disabled)}.byot-info{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:.8rem;color:var(--text-secondary)}#byot-word-count{font-weight:500;transition:color .2s ease}#byot-word-count.over-limit{color:var(--accent-red);font-weight:600}.byot-limit{color:var(--text-disabled)}.history-article-source-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;font-size:.65rem;margin-left:4px;vertical-align:middle}.history-article-source-badge.source-byot{background:#64b5f633;color:var(--accent-blue)}.history-article-source-badge.source-theme{background:#32baae33;color:var(--accent-purple)}.lang-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.7rem;font-weight:600;background:#32baae33;color:var(--accent-purple)}#input-keyword.highlight{border-color:var(--accent-green, #4ade80);box-shadow:0 0 0 3px #4ade804d;animation:pulse-highlight .6s ease}@keyframes pulse-highlight{0%,to{box-shadow:0 0 0 3px #4ade804d}50%{box-shadow:0 0 0 6px #4ade8026}}.article-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px}.article-header h3{margin:0}.article-actions{display:flex;gap:8px;align-items:center}.article-actions .btn{white-space:nowrap}.article-meta{display:flex;gap:12px;font-size:.85rem;color:var(--text-secondary)}.article-meta span{background:var(--border-subtle);padding:4px 10px;border-radius:12px}.article-content{background:var(--secondary-bg);border-radius:var(--radius-sm);padding:20px;line-height:1.8;font-size:1.2rem;max-height:300px;overflow-y:auto;word-spacing:.05em}.article-controls{display:flex;gap:12px;margin-top:16px;align-items:center}.speed-control{margin-left:auto}#speed-display{font-size:.85rem;min-width:40px}.recording-controls{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 0}.btn-record{width:80px;height:80px;border-radius:50%;border:none;background:var(--accent-red);color:#fff;font-size:2rem;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px #f4433666;position:relative;z-index:1}.btn-record:hover{transform:scale(1.05);box-shadow:0 6px 24px #f4433680}.btn-record.recording{background:var(--accent-purple);animation:pulse-recording 1.5s ease-in-out infinite}.btn-record.recording i:before{content:""}@keyframes pulse-recording{0%,to{box-shadow:0 0 #32baae66}50%{box-shadow:0 0 0 20px #32baae00}}.recording-timer{font-size:2rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent-red)}.recording-timer.hidden{display:none}.recording-hint{color:var(--text-muted);font-size:.9rem}.upload-option{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--border-subtle)}.upload-divider{color:var(--text-muted);font-size:.8rem}.btn-upload-audio{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;color:var(--text-secondary);background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.btn-upload-audio:hover{color:var(--accent-purple);border-color:var(--accent-purple);background:#32baae1a}.btn-upload-audio i{font-size:.9rem}.user-audio-controls{display:flex;flex-direction:column;gap:16px;padding-top:16px;border-top:1px solid var(--border-subtle);margin-top:16px}.user-audio-controls.hidden{display:none}.audio-playback{display:flex;align-items:center;gap:12px}.audio-action-buttons{display:flex;gap:10px}.audio-action-buttons #btn-re-record{flex:1;padding:12px 16px;font-size:.95rem}.audio-action-buttons #btn-submit-assessment{flex:2;padding:12px 16px;font-size:.95rem}.retry-controls{display:flex;justify-content:center;padding-top:16px;border-top:1px solid var(--border-subtle);margin-top:16px}.retry-controls.hidden{display:none}.retry-controls #btn-retry{width:100%;padding:14px 24px;font-size:1rem}.assessment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.score-display{display:flex;align-items:baseline;gap:4px}.score-value{font-size:2.5rem;font-weight:700;color:var(--accent-green)}.score-label{font-size:1rem;color:var(--text-secondary)}.stars-display{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.stars-display i{font-size:2rem;color:var(--text-muted)}.stars-display i.active{color:var(--accent-yellow);filter:drop-shadow(0 0 8px rgba(255,215,0,.5))}.feedback-content{background:var(--secondary-bg);border-radius:var(--radius-sm);padding:20px;line-height:2;font-size:1.1rem;margin-bottom:16px}.word-omitted{color:var(--word-error);opacity:.6}.word-punct{color:var(--text-secondary)}.bottom-nav{display:flex;background:var(--secondary-bg);border-top:1px solid var(--border-subtle);padding:8px 20px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;background:none;border:none;color:var(--text-muted);cursor:pointer;transition:all .2s}.nav-btn i{font-size:1.2rem}.nav-btn span{font-size:.75rem}.nav-btn.active,.nav-btn.active:hover{color:var(--accent-purple)!important}.nav-btn:hover:not(.active){color:var(--text-primary)}.nav-icon-wrapper{position:relative;display:inline-flex;color:inherit}.nav-badge{position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding:0 5px;background:#ff3b30;color:#fff;font-size:.65rem;font-weight:700;border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #ff3b3066}.nav-badge.hidden{display:none}.history-view{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--primary-bg);z-index:100;display:flex;flex-direction:column}.history-view.hidden{display:none}.history-notice{background:#64b5f61a;border:1px solid rgba(100,181,246,.3);border-radius:var(--radius-sm);padding:12px 16px;max-width:720px;margin:0 auto}.history-notice p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.5}.history-notice p:first-child{margin-bottom:4px}.history-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:20px}.history-summary,.history-list{max-width:720px;margin-left:auto;margin-right:auto}.history-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}.summary-card{background:var(--card-bg);border-radius:var(--radius-md);padding:16px;text-align:center}.summary-value{font-size:1.8rem;font-weight:700;color:var(--accent-purple)}.summary-label{font-size:.8rem;color:var(--text-secondary);margin-top:4px}.history-list{display:flex;flex-direction:column;gap:12px}.history-item{background:var(--card-bg);border-radius:var(--radius-md);padding:16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .2s}.history-item:hover{background:var(--card-hover)}.history-item-left{flex:1;min-width:0}.history-item-header{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}.history-item-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.history-item-preview{font-size:.8rem;color:var(--text-secondary);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic;opacity:.8;max-width:100%}.history-item-meta{font-size:.8rem;color:var(--text-secondary);display:flex;gap:12px}.history-item-right{display:flex;align-items:center;gap:12px}.history-item-score{font-size:1.2rem;font-weight:700;color:var(--accent-green)}.history-item-stars{display:flex;gap:2px}.history-item-stars i{font-size:.9rem;color:var(--accent-yellow)}.history-item.unseen{background:linear-gradient(135deg,#32baae1f,#32baae0a);border-left:3px solid var(--primary-color)}.new-badge{display:inline-flex;align-items:center;padding:2px 6px;font-size:.6rem;font-weight:700;letter-spacing:.5px;color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:4px;text-transform:uppercase;animation:pulse-badge 2s ease-in-out infinite;box-shadow:0 1px 3px #ef444466}@keyframes pulse-badge{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}.history-article-source-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:.65rem;border-radius:6px;flex-shrink:0}.history-article-source-badge.source-keyword{background:#3b82f633;color:#3b82f6}.history-article-source-badge.source-theme{background:#8b5cf633;color:#8b5cf6}.history-article-source-badge.source-byot{background:#f9731633;color:#f97316}.history-audio-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:.55rem;border-radius:50%;flex-shrink:0}.history-audio-badge.source-recording{background:#22c55e33;color:#22c55e}.history-audio-badge.source-upload{background:#fbbf2433;color:#f59e0b}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}.empty-state i{font-size:3rem;margin-bottom:16px}.hidden{display:none!important}@media(max-width:768px){.history-item-preview{max-width:280px}.history-item-name{max-width:150px}}@media(max-width:600px){.form-row{flex-direction:column}.form-row .input-group,.form-row .flex-grow{width:100%;min-width:0}.form-row .btn{width:100%}.article-controls{flex-direction:column}.speed-control{margin-left:0}.history-summary{grid-template-columns:repeat(3,1fr);gap:8px}.summary-value{font-size:1.4rem}.summary-label{font-size:.7rem}.header-right .btn-sm{padding:6px 10px;font-size:.75rem}.history-item-preview{max-width:200px;font-size:.75rem}.history-item-name{max-width:100px;font-size:.9rem}.history-item-header{gap:6px}.history-article-source-badge{width:20px;height:20px;font-size:.6rem}.history-audio-badge{width:16px;height:16px;font-size:.5rem}}.toast-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:10000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{background:#1e1e1ef2;color:var(--text-primary);padding:12px 24px;border-radius:50px;box-shadow:0 4px 12px #0000004d;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px;animation:slideDown .3s ease-out forwards;pointer-events:auto;font-size:.9rem;max-width:90vw;white-space:nowrap}.toast i{font-size:1rem;flex-shrink:0}@media(max-width:480px){.toast{padding:10px 16px;font-size:.8rem;gap:6px;max-width:95vw}.toast i{font-size:.9rem}}.toast.warning{border-color:#ffb74d;color:#ffb74d}.toast.error{border-color:var(--accent-red);color:var(--accent-red)}.toast.success{border-color:var(--accent-green);color:var(--accent-green)}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{to{opacity:0;transform:translateY(-20px)}}.history-detail-modal{max-width:600px;max-height:90vh;display:flex;flex-direction:column;padding:0}.modal-header-fixed{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-subtle);flex-shrink:0}.modal-header-fixed h3{margin:0;font-size:1.1rem}.history-detail-scroll{flex:1;overflow-y:auto;padding:16px 20px;-webkit-overflow-scrolling:touch}.detail-section{margin-bottom:16px}.detail-section h4{font-size:.9rem;color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:6px}.detail-section p,.detail-section .detail-text{background:var(--secondary-bg);padding:12px;border-radius:var(--radius-sm);line-height:1.6}.detail-info-grid{display:flex;flex-wrap:wrap;gap:12px;background:var(--secondary-bg);padding:12px;border-radius:var(--radius-sm)}.detail-info-grid span{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-secondary)}.detail-info-grid i{color:var(--accent-purple);width:14px}.detail-source-badge{padding:4px 10px;border-radius:12px;font-size:.75rem;font-weight:600}.detail-source-badge.source-recording{background:var(--accent-green);color:#000}.detail-source-badge.source-upload{background:var(--accent-orange);color:#000}.detail-source-badge i{color:#000!important}.detail-suggestions{list-style:none;margin:0;background:#64b5f61a;border:1px solid rgba(100,181,246,.2);border-radius:var(--radius-sm);padding:12px}.detail-suggestions li{font-size:.85rem;color:var(--text-secondary);padding:4px 0 4px 16px;position:relative}.detail-suggestions li:before{content:"•";position:absolute;left:0;color:var(--accent-blue)}.detail-legend{display:flex;gap:16px;margin-bottom:8px;font-size:.8rem}.detail-legend .legend-item{display:flex;align-items:center;gap:4px}.detail-legend .legend-color{width:12px;height:12px;border-radius:2px}.detail-word-feedback{line-height:1.8}.detail-word-feedback .word-clickable{cursor:pointer;padding:2px 4px;border-radius:4px;transition:all .2s}.detail-word-feedback .word-clickable:hover{background:var(--border-subtle)}.detail-word-feedback .word-clickable.playing{background:#32baae33;box-shadow:0 0 0 2px var(--accent-purple)}.detail-scores{background:var(--secondary-bg);padding:16px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:20px}.detail-score-main{text-align:center;padding-right:20px;border-right:1px solid var(--border-subtle);flex-shrink:0}.detail-score-main .score-big{font-size:2rem;font-weight:700}.detail-score-main .score-label{font-size:.85rem;color:var(--text-muted)}.detail-stars{margin-top:4px;font-size:1rem}.detail-score-dims{display:flex;flex-wrap:wrap;gap:12px}.detail-score-dims .dim-item{display:flex;flex-direction:column;align-items:center;min-width:60px}.detail-score-dims .dim-label{font-size:.75rem;color:var(--text-muted)}.detail-score-dims .dim-value{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.detail-actions-fixed{display:flex;gap:8px;padding:16px 20px;border-top:1px solid var(--border-subtle);flex-shrink:0;background:var(--primary-bg)}.detail-actions-fixed .btn{flex:1;padding:10px 12px;font-size:.85rem}.detail-actions .btn-danger{background:var(--accent-red);color:#fff}.detail-actions .btn-danger:hover{background:#b55566}.player-container{margin-top:12px}.player-container.hidden{display:none}.audio-player{display:flex;align-items:center;gap:8px;background:var(--secondary-bg);padding:12px;border-radius:var(--radius-sm)}.audio-player button,.player-btn{width:36px;height:36px;border:none;border-radius:50%;background:var(--accent-purple);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.audio-player button:hover:not(:disabled),.player-btn:hover:not(:disabled){transform:scale(1.05);background:#2aa89d}.audio-player button:disabled,.player-btn:disabled{opacity:.5;cursor:not-allowed}.audio-player .play-btn{background:var(--accent-purple);color:#fff}.audio-player .play-btn:hover:not(:disabled){background:#2aa89d}.player-btn.stop-btn{background:var(--accent-red)}.player-btn.stop-btn:hover:not(:disabled){background:#b55566}.audio-player .speed-btn,.player-btn.speed-btn{background:#ffffff1a;width:auto;padding:0 12px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600}.audio-player .speed-btn:hover,.player-btn.speed-btn:hover{background:#ffffff26}[data-theme=light] .audio-player .speed-btn,[data-theme=light] .player-btn.speed-btn{background:#00000014}[data-theme=light] .audio-player .speed-btn:hover,[data-theme=light] .player-btn.speed-btn:hover{background:#0000001f}.speed-value{font-size:.8rem;font-weight:600}.audio-player .download-btn,.player-btn.download-btn{background:#64b5f633;color:var(--accent-blue)}.audio-player .download-btn:hover:not(:disabled),.player-btn.download-btn:hover:not(:disabled){background:#64b5f64d}.player-progress{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.current-time,.total-time{font-size:.75rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:32px}.progress-bar{flex:1;height:4px;background:var(--border-subtle);border-radius:2px;overflow:visible;cursor:pointer;position:relative}.progress-bar:before{content:"";position:absolute;top:-18px;bottom:-18px;left:0;right:0}.progress-fill{height:100%;background:var(--accent-purple);border-radius:2px;transition:width .1s linear;position:relative;z-index:1}.audio-player .rewind-btn,.audio-player .forward-btn,.player-btn.rewind-btn,.player-btn.forward-btn{background:#ffffff1a;position:relative;font-size:.9rem}.audio-player .rewind-btn:hover:not(:disabled),.audio-player .forward-btn:hover:not(:disabled),.player-btn.rewind-btn:hover:not(:disabled),.player-btn.forward-btn:hover:not(:disabled){background:#fff3}[data-theme=light] .audio-player .rewind-btn,[data-theme=light] .audio-player .forward-btn{background:#00000014}[data-theme=light] .audio-player .rewind-btn:hover:not(:disabled),[data-theme=light] .audio-player .forward-btn:hover:not(:disabled){background:#0000001f}.rewind-label,.forward-label{position:absolute;font-size:.55rem;font-weight:700;bottom:4px;right:6px}.audio-player .loop-btn,.player-btn.loop-btn{background:#ffffff1a}.audio-player .loop-btn:hover:not(:disabled),.player-btn.loop-btn:hover:not(:disabled){background:#fff3}[data-theme=light] .audio-player .loop-btn{background:#00000014}[data-theme=light] .audio-player .loop-btn:hover:not(:disabled){background:#0000001f}.audio-player .loop-btn.active,.player-btn.loop-btn.active{background:var(--accent-purple);color:#fff}.audio-player .loop-btn.active i,.player-btn.loop-btn.active i{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.section-label{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-secondary);margin-bottom:8px}.article-audio-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-subtle)}.voice-button-group{display:flex;gap:10px;margin-bottom:10px}.btn-voice{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;font-size:.9rem;color:var(--text-secondary);background:var(--secondary-bg);border:1px solid var(--border-medium);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.btn-voice:hover{color:var(--text-primary);border-color:var(--accent-purple);background:#32baae14}.btn-voice.active,.btn-voice.selected{color:var(--text-primary);border-color:var(--accent-purple);background:#32baae26;box-shadow:0 0 0 1px var(--accent-purple)}.btn-voice.loading{opacity:.7;cursor:default}.btn-voice.loading .voice-icon{font-size:.85rem}.btn-voice.error{border-color:var(--accent-orange);color:var(--accent-orange)}.btn-voice.ready:not(.active){color:var(--text-secondary)}.voice-icon{font-size:1.1rem;line-height:1}.voice-label{font-size:.85rem}.score-dimensions{background:var(--secondary-bg);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px}.dimension-item{margin-bottom:12px}.dimension-item:last-child{margin-bottom:0}.dimension-label{display:flex;justify-content:space-between;margin-bottom:6px;font-size:.85rem}.dimension-label span:first-child{color:var(--text-secondary)}.dimension-value{font-weight:600;color:var(--text-primary)}.dimension-bar{height:8px;background:var(--border-subtle);border-radius:4px;overflow:hidden}.dimension-fill{height:100%;border-radius:4px;transition:width .5s ease,background .3s}.dimension-fill.excellent{background:var(--accent-green)}.dimension-fill.good{background:var(--accent-blue)}.dimension-fill.fair{background:var(--accent-orange)}.dimension-fill.poor{background:var(--accent-red)}.learning-suggestions{background:#64b5f61a;border:1px solid rgba(100,181,246,.2);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px}.learning-suggestions h4{font-size:.9rem;color:var(--accent-blue);margin-bottom:8px;display:flex;align-items:center;gap:6px}.learning-suggestions ul{list-style:none;padding:0;margin:0}.learning-suggestions li{font-size:.85rem;color:var(--text-secondary);padding:4px 0 4px 16px;position:relative}.learning-suggestions li:before{content:"•";position:absolute;left:0;color:var(--accent-blue)}.feedback-legend{background:var(--secondary-bg);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px}.feedback-legend h4{font-size:.9rem;color:var(--text-secondary);margin-bottom:12px;display:flex;align-items:center;gap:6px}.legend-items{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px}.legend-item{display:flex;align-items:center;gap:8px;font-size:.85rem}.legend-color{width:16px;height:16px;border-radius:4px}.legend-color.correct{background:var(--word-correct)}.legend-color.warning{background:var(--word-warning)}.legend-color.error{background:var(--word-error)}.legend-hint{font-size:.8rem;color:var(--text-muted);display:flex;align-items:center;gap:6px}.feedback-content .word-clickable{cursor:pointer;padding:2px 4px;border-radius:4px;transition:all .2s}.feedback-content .word-clickable:hover{background:var(--border-subtle)}.feedback-content .word-clickable.playing{background:#32baae33;box-shadow:0 0 0 2px var(--accent-purple)}.word-correct{color:var(--word-correct)}.word-warning{color:var(--word-warning)}.word-error{color:var(--word-error);text-decoration:line-through}.word-omitted{color:var(--word-error);opacity:.7;font-style:italic}.assessment-container{background:var(--card-bg);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm)}.assessment-container-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}.assessment-container-header .header-title{display:flex;align-items:center;gap:12px;flex:1}.assessment-container-header h3{font-size:1.1rem;margin:0;display:flex;align-items:center;gap:8px}.assessment-container-header h3 i{color:var(--accent-green)}.attempt-info{font-size:.75rem;color:var(--text-muted);background:var(--secondary-bg);padding:4px 10px;border-radius:12px}.best-summary{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ffd7001a,#ff98001a);border:1px solid rgba(255,215,0,.3);padding:6px 12px;border-radius:var(--radius-md)}.best-summary-info{display:flex;align-items:center;gap:8px}.best-label{font-size:.75rem;color:gold;display:flex;align-items:center;gap:4px}.best-score{font-size:1.2rem;font-weight:700;color:gold}.best-stars{color:gold;font-size:.8rem}.assessment-divider{height:1px;background:#ffffff1a;margin:16px 0}.assessment-reports-list{display:flex;flex-direction:column;gap:12px}.report-card{background:var(--secondary-bg);border-radius:var(--radius-md);overflow:hidden;border:1px solid transparent;transition:all .2s}.report-card.expanded{border-color:#32baae4d}.report-card-header{display:flex;align-items:center;padding:12px 16px;cursor:pointer;transition:background .2s;gap:12px}.report-card-header:hover{background:#ffffff0d}.report-toggle{color:var(--text-muted);font-size:.8rem;transition:transform .2s;width:16px}.report-card.expanded .report-toggle{transform:rotate(90deg)}.report-attempt{font-size:.85rem;font-weight:600;color:var(--text-primary);min-width:70px}.report-score-preview{display:flex;align-items:center;gap:8px;flex:1}.report-score{font-size:1.1rem;font-weight:700}.report-stars{font-size:.75rem;color:var(--accent-yellow)}.report-time{font-size:.75rem;color:var(--text-muted)}.report-best-badge{background:linear-gradient(135deg,gold,#ff9800);color:#000;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:3px;display:inline-flex;align-items:center;gap:3px;animation:pulseGlow 1.5s ease-in-out infinite}.report-best-badge i{font-size:.55rem}@keyframes pulseGlow{0%,to{box-shadow:0 0 5px #ffd70080}50%{box-shadow:0 0 12px #ffd700cc}}.report-source-badge{font-size:.6rem;font-weight:600;padding:2px 6px;border-radius:3px;display:inline-flex;align-items:center;gap:3px}.report-source-badge.source-recording{background:var(--accent-green);color:#000}.report-source-badge.source-upload{background:var(--accent-orange);color:#000}.report-source-badge i{font-size:.55rem}.report-card-body{display:none;padding:0 16px 16px}.report-card.expanded .report-card-body{display:block}.report-audio-section{margin-bottom:16px;padding:12px;background:#ffffff08;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08)}.report-audio-section .section-label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary);margin-bottom:10px}.report-audio-section .player-container{margin:0}.report-dimensions{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}.report-dimension{flex:1;min-width:80px;background:#ffffff0d;padding:10px;border-radius:var(--radius-sm);text-align:center}.report-dimension-value{font-size:1.2rem;font-weight:700}.report-dimension-label{font-size:.7rem;color:var(--text-muted);margin-top:2px}.report-feedback{background:#0003;border-radius:var(--radius-sm);padding:12px 16px;line-height:1.8;font-size:.95rem;margin-bottom:12px}.report-feedback .word-clickable{cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .15s ease;display:inline-block}.report-feedback .word-clickable:hover{background:#ffffff26;transform:scale(1.05);box-shadow:0 2px 8px #0003}.report-feedback .word-clickable.playing{background:#32baae40;box-shadow:0 0 0 2px var(--accent-purple)}.report-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.7rem;color:var(--text-muted);margin-bottom:12px;padding:8px 12px;background:#ffffff08;border-radius:var(--radius-sm)}.report-legend-item{display:flex;align-items:center;gap:4px}.legend-dot{width:8px;height:8px;border-radius:50%}.legend-dot.correct{background:var(--word-correct)}.legend-dot.warning{background:var(--word-warning)}.legend-dot.error{background:var(--word-error)}.report-suggestions{background:#2196f31a;border-left:3px solid var(--accent-blue);padding:12px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:12px}.report-suggestions-title{font-size:.8rem;font-weight:600;color:var(--accent-blue);margin-bottom:8px;display:flex;align-items:center;gap:6px}.report-suggestions-list{font-size:.85rem;color:var(--text-secondary);margin:0;padding-left:16px}.report-suggestions-list li{margin-bottom:4px}.report-actions{display:flex;justify-content:flex-end;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.btn-save-report{background:var(--accent-purple);color:#fff;border:none;padding:8px 16px;border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.btn-save-report:hover:not(:disabled){background:#28a69a;transform:translateY(-1px)}.btn-save-report:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-save-report.saved{background:var(--accent-green)}.reports-empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}.reports-empty-state i{font-size:2rem;margin-bottom:12px;opacity:.5}@media(max-width:520px){.audio-player{flex-wrap:wrap}.audio-player .forward-btn,.audio-player .loop-btn{display:none}.player-progress{order:10;width:100%;flex:0 0 100%;margin-top:8px;padding:12px 0}}@media(max-width:419px){.assessment-container-header{flex-direction:column;align-items:stretch}.assessment-container-header .header-title{justify-content:space-between}.best-summary{justify-content:center}.assessment-container-header .btn{width:100%}.report-dimensions{flex-direction:column}.report-legend{flex-direction:column;gap:6px}.report-card-header{flex-wrap:wrap}.report-score-preview{flex-basis:100%;order:3;margin-top:8px}}[data-theme=light] .loading-spinner{border-color:#0000001a;border-top-color:var(--accent-purple)}[data-theme=light] .btn-login:disabled{background:#0000000f;color:var(--text-muted)}[data-theme=light] .btn-upload-audio{border-color:#00000026}[data-theme=light] .btn-upload-audio:hover{border-color:var(--accent-purple)}[data-theme=light] .assessment-divider{background:#00000014}[data-theme=light] .report-card{border:1px solid rgba(0,0,0,.08)}[data-theme=light] .report-card.expanded{border-color:#32baae66}[data-theme=light] .report-card-header:hover{background:#00000008}[data-theme=light] .report-audio-section{background:#00000005;border-color:#00000014}[data-theme=light] .report-dimension{background:#00000008;border:1px solid rgba(0,0,0,.06)}[data-theme=light] .report-feedback{background:#00000008;border:1px solid rgba(0,0,0,.08)}[data-theme=light] .report-feedback .word-clickable:hover{background:#00000014}[data-theme=light] .report-legend{background:#00000005;border:1px solid rgba(0,0,0,.06)}[data-theme=light] .report-actions{border-top-color:#00000014}[data-theme=light] .toast{background:#fffffffa;border-color:#0000001f;box-shadow:0 4px 12px #00000026}[data-theme=light] .theme-toggle-switch{background:#0000000d}[data-theme=light] .theme-option{color:var(--text-secondary)}[data-theme=light] .theme-option.active{background:var(--card-bg);box-shadow:0 2px 8px #0000001a}[data-theme=light] .history-item{border:1px solid rgba(0,0,0,.08)}[data-theme=light] .history-item:hover{border-color:#0000001f;box-shadow:0 4px 12px #00000014}[data-theme=light] .mode-tab{background:transparent;color:var(--text-secondary)}[data-theme=light] .mode-tab.active{background:var(--card-bg);box-shadow:0 2px 8px #0000001a}[data-theme=light] .mode-section select{background:var(--card-bg);border:1px solid rgba(0,0,0,.15)}[data-theme=light] .mode-section select:focus{border-color:var(--accent-purple)}[data-theme=light] .mode-section textarea{background:var(--card-bg);border:1px solid rgba(0,0,0,.15)}[data-theme=light] .mode-section textarea:focus{border-color:var(--accent-purple)}[data-theme=light] .btn-secondary{background:#0000000d;border:1px solid rgba(0,0,0,.12)}[data-theme=light] .btn-secondary:hover:not(:disabled){background:#00000014}[data-theme=light] .voice-btn{background:var(--card-bg);border:1px solid rgba(0,0,0,.1)}[data-theme=light] .voice-btn:hover:not(:disabled){border-color:var(--accent-purple)}[data-theme=light] .voice-btn.active{border-color:var(--accent-purple);background:#32baae14}[data-theme=light] .bottom-nav{background:var(--card-bg);border-top:1px solid rgba(0,0,0,.08)}[data-theme=light] .nav-btn{color:var(--text-muted)}[data-theme=light] .nav-btn.active{color:var(--accent-purple)}[data-theme=light] .article-content{background:var(--card-bg);border:1px solid rgba(0,0,0,.08)}[data-theme=light] .score-circle{background:var(--card-bg);box-shadow:0 4px 16px #0000001a}[data-theme=light] .modal-overlay{background:#0006}[data-theme=light] .modal-content{box-shadow:0 20px 60px #0003}[data-theme=light] .mode-selector{background:var(--primary-bg);border:1px solid rgba(0,0,0,.08)}[data-theme=light] .mode-btn.active{box-shadow:0 2px 8px #0000001a}[data-theme=light] .keyword-panel,[data-theme=light] .theme-panel,[data-theme=light] .byot-panel{background:var(--card-bg);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-md);padding:16px}[data-theme=light] #input-byot-text{background:var(--primary-bg);border:1px solid rgba(0,0,0,.12)}[data-theme=light] #input-byot-text:focus{border-color:var(--accent-purple);background:var(--card-bg)}[data-theme=light] .article-container{background:var(--card-bg);border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 8px #0000000a}[data-theme=light] .voice-selection{background:var(--primary-bg);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-md);padding:12px}[data-theme=light] .recording-section{background:var(--card-bg);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-md)}[data-theme=light] .assessment-container{background:var(--card-bg);border:1px solid rgba(0,0,0,.08)}[data-theme=light] .section-card,[data-theme=light] .info-card{background:var(--card-bg);border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000a}[data-theme=light] .input-group input,[data-theme=light] .input-group select,[data-theme=light] .input-group textarea{background:var(--primary-bg);border:1px solid rgba(0,0,0,.12)}[data-theme=light] .input-group input:focus,[data-theme=light] .input-group select:focus,[data-theme=light] .input-group textarea:focus{background:var(--card-bg);border-color:var(--accent-purple)}[data-theme=light] .app-header{background:var(--card-bg);border-bottom:1px solid rgba(0,0,0,.08)}[data-theme=light] .language-toggle{background:var(--primary-bg);border:1px solid rgba(0,0,0,.08)}[data-theme=light] .typewriter-container,[data-theme=light] .assessment-card,[data-theme=light] .summary-card{border:1px solid rgba(0,0,0,.08)}[data-theme=light] .detail-sub-scores,[data-theme=light] .detail-info,[data-theme=light] .detail-recognized-text,[data-theme=light] .detail-section .detail-text,[data-theme=light] .detail-info-grid,[data-theme=light] .detail-scores,[data-theme=light] .score-dimensions,[data-theme=light] .feedback-content,[data-theme=light] .feedback-legend,[data-theme=light] .attempt-info{background:var(--primary-bg);border:1px solid rgba(0,0,0,.06)}[data-theme=light] .audio-player{border:1px solid rgba(0,0,0,.08)}.section-label-sm{font-size:.85rem;color:var(--text-secondary);font-weight:500;display:flex;align-items:center;gap:6px}.ocr-upload-section{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;width:100%}.ocr-buttons{display:flex;flex-direction:column;gap:10px}.btn-ocr{width:100%;background-color:#ffffff1a;color:var(--text-primary);border:1px solid rgba(255,255,255,.2);padding:12px 16px;border-radius:var(--radius-md);font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.btn-ocr:hover{background-color:#ffffff26;border-color:#ffffff4d;transform:translateY(-1px)}.btn-ocr:active{transform:translateY(0)}.btn-ocr i{font-size:1rem}.btn-ocr.hidden{display:none}.image-preview-container{position:relative;width:100%;max-height:300px;border-radius:var(--radius-md);overflow:hidden;background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.image-preview-container.hidden{display:none}.image-preview-container img{width:100%;height:auto;max-height:300px;object-fit:contain;display:block}.btn-remove-image{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:#000000b3;border:1px solid rgba(255,255,255,.2);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10}.btn-remove-image:hover{background:#f44336cc;border-color:var(--accent-red)}.btn-remove-image i{font-size:.9rem}.ocr-progress{display:flex;flex-direction:column;gap:8px;padding:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md)}.ocr-progress.hidden{display:none}.ocr-progress-bar{width:100%;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.ocr-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-purple),var(--accent-green));border-radius:3px;transition:width .3s ease;width:0%;animation:ocrPulse 1.5s ease-in-out infinite}@keyframes ocrPulse{0%,to{opacity:1}50%{opacity:.7}}.ocr-progress-text{font-size:.85rem;color:var(--text-secondary);text-align:center}.camera-preview-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}.camera-preview-modal.hidden{display:none}.camera-preview-content{width:90%;max-width:600px;background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;max-height:90vh;height:100%;min-height:0;position:relative}.camera-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);min-height:60px;position:relative;z-index:1}.camera-preview-header h3{margin:0;font-size:1.1rem;color:var(--text-primary)}.btn-close-camera{width:32px;height:32px;border-radius:50%;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.btn-close-camera:hover{background:#fff3}.camera-video-container{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;background:#000}.camera-preview-content video{width:100%;height:100%;min-height:0;max-height:100%;object-fit:cover;background:#000;overflow:hidden}.camera-square-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.camera-square-guide{width:min(100%,100vw);aspect-ratio:1 / 1;max-width:100%;max-height:100%;border:2px solid rgba(255,255,255,.7);border-radius:8px;box-shadow:0 0 0 9999px #00000080;z-index:1}.camera-preview-actions{padding:20px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:180px;position:relative;z-index:1}.camera-usage-info{width:100%;text-align:center;padding:12px;background:#ffffff0d;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1)}.camera-usage-text{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.95rem;color:var(--text-primary);margin-bottom:6px}.camera-usage-text i{color:var(--accent-purple);font-size:1rem}.camera-usage-text #byot-camera-usage-count{font-weight:700;font-size:1.1rem;color:#4caf50}.camera-usage-label{color:var(--text-secondary);font-size:.85rem}.camera-reset-time{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.85rem;color:var(--accent-purple);margin-top:6px;padding:6px 10px;background:#9c27b01a;border-radius:var(--radius-sm);border:1px solid rgba(156,39,176,.2)}.camera-reset-time i{font-size:.9rem}.camera-reset-time #byot-camera-reset-time-text{font-weight:500;font-variant-numeric:tabular-nums}.camera-usage-hint{font-size:.8rem;color:var(--text-secondary);margin-top:4px;font-style:italic}.btn-capture{width:64px;height:64px;border-radius:50%;background:var(--accent-purple);border:4px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .2s ease;box-shadow:0 4px 12px #32baae66}.btn-capture:hover{transform:scale(1.05);box-shadow:0 6px 16px #32baae99}.btn-capture:active{transform:scale(.95)}.btn-capture:disabled{opacity:.5!important;cursor:not-allowed!important;pointer-events:none}@media(max-width:768px){.image-preview-container,.image-preview-container img{max-height:200px}.camera-preview-content{width:100%;max-width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;overflow:hidden}.camera-video-container{max-height:calc(100dvh - 280px)}.camera-preview-content video{width:100%;min-height:0;max-height:calc(100dvh - 280px);object-fit:cover}.camera-preview-header{padding:12px 16px;min-height:48px}.camera-preview-actions{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));gap:10px;min-height:auto}.camera-usage-info{padding:8px}.camera-usage-text{font-size:.85rem;margin-bottom:2px}.camera-usage-hint{font-size:.75rem;margin-top:2px}.camera-reset-time{font-size:.8rem;padding:4px 8px;margin-top:2px}.btn-capture{width:56px;height:56px;font-size:1.3rem;flex-shrink:0}}[data-theme=light] .btn-ocr{background-color:#0000000d;border-color:#00000026}[data-theme=light] .btn-ocr:hover{background-color:#00000014;border-color:#00000040}[data-theme=light] .image-preview-container,[data-theme=light] .ocr-progress{background:#00000008;border-color:#0000001a}[data-theme=light] .camera-preview-content{border:1px solid rgba(0,0,0,.1)}[data-theme=light] .camera-preview-header{border-bottom-color:#0000001a}[data-theme=light] .camera-usage-info{background:#00000008;border-color:#0000001a}