.shadowing-page{max-width:var(--content-max);padding:var(--space-6) var(--space-4);gap:var(--space-6);flex-direction:column;margin:0 auto;display:flex}.shadowing-page__header{text-align:center}.shadowing-page__hero{justify-content:center;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);display:flex}.shadowing-page__hero-icon{font-size:3rem;line-height:1;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.shadowing-page__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--font-extrabold);color:var(--color-text);margin:0}.shadowing-page__sub{font-size:var(--text-base);color:var(--color-text-muted);margin:var(--space-1) 0 0;line-height:var(--leading-relaxed)}.shadowing-page__features{justify-content:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.shadowing-page__feature{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-primary-50);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-primary);display:inline-flex}.shadowing-levels{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.shadowing-level-tab{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);transition:all var(--duration-fast) var(--ease-default);cursor:pointer;text-decoration:none;display:flex}.shadowing-level-tab:hover{background:var(--color-bg-subtle);border-color:var(--color-primary-light);color:var(--color-primary)}.shadowing-level-tab--active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-primary)}.shadowing-level-tab__desc{display:none}@media (min-width:640px){.shadowing-level-tab__desc{font-weight:var(--font-normal);opacity:.8;display:inline}}.shadowing-tip{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-primary-50);border:1px solid var(--color-primary-200);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--color-text);line-height:var(--leading-relaxed);display:flex}.shadowing-tip__icon{flex-shrink:0;font-size:1.25rem}.shadowing-client{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-5);box-shadow:var(--shadow-md);gap:var(--space-5);flex-direction:column;display:flex}.shadowing-level-badge{align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;display:inline-flex}.shadowing-level-badge__dot{border-radius:var(--radius-full);background:var(--color-primary);width:8px;height:8px;animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}.shadowing-level-badge__sep{color:var(--color-text-subtle)}.shadowing-sentence{gap:var(--space-2);padding:var(--space-6) var(--space-4);flex-wrap:wrap;justify-content:center;align-items:center;min-height:80px;display:flex}.shadowing-word{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-default);cursor:default;display:inline-block;position:relative}@media (min-width:640px){.shadowing-word{font-size:var(--text-3xl);padding:var(--space-2) var(--space-3)}}.shadowing-word--karaoke-active{color:#78350f;border-radius:var(--radius-lg);animation:karaoke-pop .2s var(--ease-bounce);background:linear-gradient(135deg,#fbbf24,#f59e0b);transform:scale(1.12);box-shadow:0 4px 16px #fbbf2466}@keyframes karaoke-pop{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1.12)}}.shadowing-word--karaoke-done{color:var(--color-text-subtle)}.shadowing-word--matched{color:#fff;border-radius:var(--radius-lg);animation:match-pop .3s var(--ease-bounce);background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 2px 8px #16c55e4d}@keyframes match-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}.shadowing-word--matched.shadowing-word--karaoke-done{color:#fff}.shadowing-translation{align-items:center;gap:var(--space-2);font-size:var(--text-base);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);background:var(--color-bg-subtle);border-radius:var(--radius-lg);border:1px dashed var(--color-border);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);text-align:center;justify-content:center;width:100%;font-family:inherit;font-style:italic;display:flex}.shadowing-translation:hover{background:var(--color-bg-muted);border-color:var(--color-primary-light)}.shadowing-translation--hidden{border-style:dashed}.shadowing-translation__hint{color:var(--color-text-subtle);font-style:normal;font-size:var(--text-sm)}.shadowing-translation__flag{font-size:1.25rem;font-style:normal}.shadowing-transcript{padding:var(--space-3) var(--space-4);background:var(--color-surface-container-low);border:1px dashed var(--color-border);border-radius:var(--radius-lg);text-align:center}.shadowing-transcript__label{font-size:var(--text-xs);color:var(--color-text-subtle);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:.05em;display:block}.shadowing-transcript__text{font-size:var(--text-base);color:var(--color-primary);font-weight:var(--font-medium);margin:0}.shadowing-controls{gap:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border);flex-direction:column;display:flex}.shadowing-controls__row{justify-content:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.shadowing-controls__row--secondary{justify-content:space-between;align-items:center}@media (max-width:640px){.shadowing-controls__row--secondary{gap:var(--space-3);flex-direction:column}}.shadowing-btn{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);font-size:var(--text-sm);font-weight:var(--font-semibold);border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);display:inline-flex;position:relative;overflow:hidden}.shadowing-btn:hover:not(:disabled){border-color:var(--color-primary-light);background:var(--color-primary-50);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.shadowing-btn:active:not(:disabled){transform:translateY(0)}.shadowing-btn:disabled{opacity:.4;cursor:not-allowed}.shadowing-btn__icon{font-size:1.1rem}.shadowing-btn--play.shadowing-btn--active{color:#fff;box-shadow:var(--shadow-amber);background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#d97706}.shadowing-btn--record.shadowing-btn--active{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#dc2626;box-shadow:0 4px 16px #ef444459}.shadowing-btn__pulse{border-radius:var(--radius-full);background:#fee2e2;width:8px;height:8px;animation:1s ease-in-out infinite rec-pulse;position:absolute;top:6px;right:6px}@keyframes rec-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}.shadowing-btn--loop.shadowing-btn--active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-primary)}.shadowing-btn--playback{border-color:var(--color-info);color:var(--color-info)}.shadowing-btn--playback:hover:not(:disabled){border-color:var(--color-info);background:#2563eb1a}.shadowing-speed{align-items:center;gap:var(--space-2);display:flex}.shadowing-speed__label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-medium)}.shadowing-speed__btns{background:var(--color-bg-muted);border-radius:var(--radius-lg);gap:2px;padding:2px;display:flex}.shadowing-speed__btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);background:0 0;border:none}.shadowing-speed__btn:hover{color:var(--color-text)}.shadowing-speed__btn--active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-xs)}.shadowing-nav{align-items:center;gap:var(--space-3);display:flex}.shadowing-nav__btn{padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text);cursor:pointer;transition:all var(--duration-fast) var(--ease-default)}.shadowing-nav__btn:hover:not(:disabled){background:var(--color-bg-subtle);border-color:var(--color-primary-light)}.shadowing-nav__btn:disabled{opacity:.3;cursor:not-allowed}.shadowing-nav__info{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text-muted);text-align:center;min-width:60px}.shadowing-score{background:var(--color-bg-subtle);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5);gap:var(--space-3);flex-direction:column;display:flex}.shadowing-score__header{align-items:center;gap:var(--space-2);display:flex}.shadowing-score__icon{font-size:1.5rem}.shadowing-score__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text)}.shadowing-score__bar-bg{background:var(--color-bg-muted);border-radius:var(--radius-full);height:10px;overflow:hidden}.shadowing-score__bar-fill{background:linear-gradient(90deg, var(--color-primary-light), var(--color-primary));border-radius:var(--radius-full);height:100%;transition:width var(--duration-slow) var(--ease-out)}.shadowing-score__value{align-items:center;gap:var(--space-3);display:flex}.shadowing-score__pct{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-extrabold)}.shadowing-score__pct--great{color:var(--color-success)}.shadowing-score__pct--good{color:var(--color-warning)}.shadowing-score__pct--try{color:var(--color-accent)}.shadowing-score__saving{font-size:var(--text-xs);color:var(--color-text-subtle);animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.shadowing-empty{text-align:center;padding:var(--space-16) var(--space-4)}.shadowing-empty__icon{margin-bottom:var(--space-4);font-size:4rem}.shadowing-empty__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text);margin:0 0 var(--space-2)}.shadowing-empty__sub{font-size:var(--text-base);color:var(--color-text-muted);margin:0}.dark .shadowing-page__feature{color:var(--color-primary);background:#4ade801a}.dark .shadowing-tip{background:#4ade8014;border-color:#4ade8033}.dark .shadowing-word--karaoke-active{color:#fffbeb;background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 16px #f59e0b4d}.dark .shadowing-word--matched{color:#052e16;background:linear-gradient(135deg,#4ade80,#22c55e);box-shadow:0 2px 8px #4ade804d}.dark .shadowing-btn{border-color:var(--color-border);background:var(--color-surface)}.dark .shadowing-btn:hover:not(:disabled){background:var(--color-surface-container)}.dark .shadowing-score{background:var(--color-surface-container-low)}.shadowing-tabs{gap:var(--space-2);background:var(--color-bg-muted);border-radius:var(--radius-xl);justify-content:center;max-width:320px;margin:0 auto;padding:4px;display:flex}.shadowing-tab{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);border-radius:var(--radius-lg);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);background:0 0;border:none;flex:1;justify-content:center;display:flex}.shadowing-tab:hover{color:var(--color-text)}.shadowing-tab--active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm)}.conv-tab-header{margin-bottom:var(--space-4);justify-content:flex-end;display:flex}.conv-import-trigger{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);background:var(--color-primary);color:#fff;border-radius:var(--radius-xl);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);box-shadow:var(--shadow-primary);border:none;display:inline-flex}.conv-import-trigger:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.conv-loading{text-align:center;padding:var(--space-16) var(--space-4);color:var(--color-text-muted)}.conv-loading__spinner{width:32px;height:32px;margin:0 auto var(--space-4);border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.conv-empty{text-align:center;padding:var(--space-12) var(--space-4)}.conv-empty__icon{margin-bottom:var(--space-4);font-size:4rem}.conv-empty__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text);margin:0 0 var(--space-2)}.conv-empty__sub{font-size:var(--text-base);color:var(--color-text-muted);margin:0 0 var(--space-4)}.conv-empty__hint{align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-primary-50);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--color-text);text-align:left;display:inline-flex}.conv-list-container{gap:var(--space-6);flex-direction:column;display:flex}.conv-list-section__title{align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text);margin:0 0 var(--space-4);display:flex}.conv-list-section__count{background:var(--color-primary-50);color:var(--color-primary);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);padding:2px 8px}.conv-list-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.conv-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);transition:all var(--duration-fast) var(--ease-default);flex-direction:column;display:flex;overflow:hidden}.conv-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.conv-card--danger{border-color:#ef4444}.conv-card__main{gap:var(--space-3);padding:var(--space-5);text-align:left;cursor:pointer;color:inherit;font:inherit;background:0 0;border:none;flex-direction:column;flex:1;display:flex}.conv-card__header{align-items:center;gap:var(--space-2);display:flex}.conv-card__level{border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);background:color-mix(in srgb, var(--level-color) 15%, transparent);color:var(--level-color);padding:2px 10px}.conv-card__public-badge{font-size:var(--text-xs);color:var(--color-text-subtle)}.conv-card__title{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-text);line-height:var(--leading-snug);margin:0}.conv-card__meta{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.conv-card__speakers{gap:var(--space-1);flex-wrap:wrap;display:flex}.conv-card__speaker-tag{font-size:var(--text-xs);color:var(--color-text-muted)}.conv-card__speaker-sep{margin:0 2px}.conv-card__line-count{font-size:var(--text-xs);color:var(--color-text-subtle);white-space:nowrap}.conv-card__actions{padding:var(--space-2) var(--space-5) var(--space-3);border-top:1px solid var(--color-border)}.conv-card__delete-btn{cursor:pointer;font-size:var(--text-sm);opacity:.5;background:0 0;border:none;transition:opacity .15s}.conv-card__delete-btn:hover{opacity:1}.conv-card__confirm-delete{font-size:var(--text-sm);color:#ef4444;justify-content:space-between;align-items:center;display:flex}.conv-card__confirm-btns{gap:var(--space-2);display:flex}.conv-card__confirm-btn{border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--font-semibold);cursor:pointer;border:none;padding:4px 12px}.conv-card__confirm-btn--yes{color:#fff;background:#ef4444}.conv-card__confirm-btn--no{background:var(--color-bg-muted);color:var(--color-text)}.conv-import-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:var(--space-4);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.conv-import-modal{background:var(--color-surface);border-radius:var(--radius-2xl);width:100%;max-width:640px;max-height:90vh;box-shadow:var(--shadow-xl);flex-direction:column;display:flex;overflow-y:auto}.conv-import-modal__header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.conv-import-modal__header-left{align-items:center;gap:var(--space-3);display:flex}.conv-import-modal__icon{font-size:1.5rem}.conv-import-modal__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-bold);margin:0}.conv-import-modal__close{cursor:pointer;color:var(--color-text-muted);padding:var(--space-2);border-radius:var(--radius-full);background:0 0;border:none;font-size:1.25rem}.conv-import-modal__close:hover{background:var(--color-bg-muted)}.conv-import-modal__body{padding:var(--space-5) var(--space-6)}.conv-import-steps{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);border-bottom:1px solid var(--color-border);display:flex}.conv-import-step{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-subtle);font-weight:var(--font-medium);display:flex}.conv-import-step--active{color:var(--color-primary);font-weight:var(--font-bold)}.conv-import-step__num{width:24px;height:24px;font-size:var(--text-xs);font-weight:var(--font-bold);background:var(--color-bg-muted);color:var(--color-text-subtle);border-radius:50%;justify-content:center;align-items:center;display:flex}.conv-import-step--active .conv-import-step__num{background:var(--color-primary);color:#fff}.conv-import-step__arrow{color:var(--color-text-subtle)}.conv-import-error{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);color:#dc2626;font-size:var(--text-sm);background:#fef2f2;border-top:1px solid #fecaca;margin:0;display:flex}.conv-import-input{gap:var(--space-4);flex-direction:column;display:flex}.conv-import-format-guide{padding:var(--space-3) var(--space-4);background:var(--color-bg-subtle);border-radius:var(--radius-lg)}.conv-import-format-guide__title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);margin:0 0 var(--space-2)}.conv-import-format-examples{gap:var(--space-2);flex-direction:column;display:flex}.conv-import-format-example{gap:var(--space-2);align-items:flex-start;display:flex}.conv-import-format-example__label{font-size:var(--text-xs);color:var(--color-primary);font-weight:var(--font-bold);white-space:nowrap;padding-top:2px}.conv-import-format-example__code{font-size:var(--text-xs);color:var(--color-text-muted);white-space:pre-wrap;font-family:var(--font-mono,monospace);margin:0;line-height:1.5}.conv-import-textarea{width:100%;padding:var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-sm);font-family:var(--font-mono,monospace);resize:vertical;background:var(--color-surface);color:var(--color-text);transition:border-color var(--duration-fast);line-height:1.6}.conv-import-textarea:focus{border-color:var(--color-primary);outline:none}.conv-import-input__actions{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.conv-import-input__separator{font-size:var(--text-sm);color:var(--color-text-subtle)}.conv-import-btn{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-fast);border:none;display:inline-flex}.conv-import-btn:disabled{opacity:.5;cursor:not-allowed}.conv-import-btn--primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-primary)}.conv-import-btn--primary:hover:not(:disabled){transform:translateY(-1px)}.conv-import-btn--secondary{background:var(--color-bg-muted);color:var(--color-text);border:1px solid var(--color-border)}.conv-import-btn--secondary:hover{background:var(--color-bg-subtle)}.conv-import-btn--ghost{color:var(--color-text-muted);background:0 0}.conv-import-btn--ghost:hover{color:var(--color-text)}.conv-import-preview{gap:var(--space-4);flex-direction:column;display:flex}.conv-import-preview__meta{gap:var(--space-3);flex-direction:column;display:flex}.conv-import-field__label{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);margin-bottom:var(--space-1);display:block}.conv-import-field__input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-sm);background:var(--color-surface);color:var(--color-text)}.conv-import-field__input:focus{border-color:var(--color-primary);outline:none}.conv-import-level-selector{gap:4px;display:flex}.conv-import-level-btn{padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-xs);font-weight:var(--font-bold);cursor:pointer;color:var(--color-text-muted);transition:all .15s}.conv-import-level-btn--active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.conv-import-preview__speakers{align-items:center;gap:var(--space-2);padding:var(--space-2) 0;flex-wrap:wrap;display:flex}.conv-import-preview__speakers-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-medium)}.conv-import-speaker-badge{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);background:color-mix(in srgb, var(--speaker-color) 12%, transparent);color:var(--speaker-color);padding:2px 10px;display:inline-flex}.conv-import-preview__line-count{font-size:var(--text-xs);color:var(--color-text-subtle);margin-left:auto}.conv-import-preview__lines{gap:var(--space-2);max-height:300px;padding:var(--space-3);background:var(--color-bg-subtle);border-radius:var(--radius-lg);flex-direction:column;display:flex;overflow-y:auto}.conv-import-preview-line{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border-left:3px solid var(--speaker-color);background:var(--color-surface)}.conv-import-preview-line__speaker{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--speaker-color);margin-bottom:2px}.conv-import-preview-line__text{font-size:var(--text-sm);color:var(--color-text)}.conv-import-preview-line__translation{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px;font-style:italic}.conv-import-preview__actions{justify-content:space-between;gap:var(--space-3);padding-top:var(--space-2);display:flex}.dialogue-player{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-md);gap:var(--space-4);flex-direction:column;display:flex}.dialogue-back-btn{color:var(--color-text-muted);font-size:var(--text-sm);cursor:pointer;font-weight:var(--font-medium);background:0 0;border:none;padding:0}.dialogue-back-btn:hover{color:var(--color-primary)}.dialogue-player__role-picker{text-align:center;padding:var(--space-6) 0}.dialogue-player__role-icon{margin-bottom:var(--space-3);font-size:3rem}.dialogue-player__role-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-bold);margin:0 0 var(--space-2)}.dialogue-player__role-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 0 var(--space-6)}.dialogue-player__roles{gap:var(--space-4);flex-wrap:wrap;justify-content:center;display:flex}.dialogue-role-btn{align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-6);border:2px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);cursor:pointer;transition:all var(--duration-fast);flex-direction:column;min-width:140px;display:flex}.dialogue-role-btn:hover{border-color:var(--role-color);box-shadow:var(--shadow-md);transform:translateY(-2px)}.dialogue-role-btn__avatar{font-size:2rem}.dialogue-role-btn__name{font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-text)}.dialogue-role-btn__lines{font-size:var(--text-xs);color:var(--color-text-muted)}.dialogue-player__header{align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.dialogue-player__header-info{flex:1}.dialogue-player__conv-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-bold);margin:0}.dialogue-player__header-meta{align-items:center;gap:var(--space-3);margin-top:var(--space-1);display:flex}.dialogue-player__role-badge{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);background:color-mix(in srgb, var(--role-color) 12%, transparent);color:var(--role-color);padding:2px 10px;display:inline-flex}.dialogue-player__progress{font-size:var(--text-xs);color:var(--color-text-subtle)}.dialogue-progress-bar{background:var(--color-bg-muted);border-radius:var(--radius-full);height:4px;overflow:hidden}.dialogue-progress-bar__fill{background:var(--color-primary);border-radius:var(--radius-full);height:100%;transition:width .3s}.dialogue-lines{gap:var(--space-2);max-height:400px;padding:var(--space-2) 0;flex-direction:column;display:flex;overflow-y:auto}.dialogue-line{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border-left:3px solid var(--speaker-color);background:var(--color-bg-subtle);transition:all .2s;position:relative}.dialogue-line--active{background:color-mix(in srgb, var(--speaker-color) 8%, white);box-shadow:var(--shadow-sm);border-left-width:4px}.dialogue-line--future{opacity:.4}.dialogue-line--user.dialogue-line--active{background:color-mix(in srgb, var(--speaker-color) 12%, white)}.dialogue-line__speaker{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--speaker-color);margin-bottom:2px}.dialogue-line__text{font-size:var(--text-base);color:var(--color-text);font-weight:var(--font-medium)}.dialogue-line__translation{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px;font-style:italic}.dialogue-line__score{top:var(--space-2);right:var(--space-3);font-size:var(--text-xs);font-weight:var(--font-bold);border-radius:var(--radius-full);padding:1px 8px;position:absolute}.dialogue-line__score--great{color:#16a34a;background:#dcfce7}.dialogue-line__score--good{color:#ca8a04;background:#fef9c3}.dialogue-line__score--try{color:#dc2626;background:#fee2e2}.dialogue-line__listening{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:#ef4444;margin-top:var(--space-1);display:flex}.dialogue-line__listening-dot{background:#ef4444;border-radius:50%;width:6px;height:6px;animation:1s infinite rec-pulse}.dialogue-transcript{padding:var(--space-3);background:var(--color-surface-container-low);border:1px dashed var(--color-border);border-radius:var(--radius-lg);text-align:center}.dialogue-transcript__label{font-size:var(--text-xs);color:var(--color-text-subtle);text-transform:uppercase;margin-bottom:var(--space-1);display:block}.dialogue-transcript__text{font-size:var(--text-base);color:var(--color-primary);font-weight:var(--font-medium);margin:0}.dialogue-final-score{background:var(--color-bg-subtle);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5);gap:var(--space-3);flex-direction:column;display:flex}.dialogue-final-score__header{align-items:center;gap:var(--space-2);display:flex}.dialogue-final-score__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-bold)}.dialogue-final-score__bar-bg{background:var(--color-bg-muted);border-radius:var(--radius-full);height:10px;overflow:hidden}.dialogue-final-score__bar-fill{background:linear-gradient(90deg, var(--color-primary-light), var(--color-primary));border-radius:var(--radius-full);height:100%;transition:width .6s}.dialogue-final-score__value{align-items:center;gap:var(--space-3);display:flex}.dialogue-final-score__pct{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-extrabold)}.dialogue-final-score__pct--great{color:var(--color-success)}.dialogue-final-score__pct--good{color:var(--color-warning)}.dialogue-final-score__pct--try{color:var(--color-accent)}.dialogue-final-score__saving{font-size:var(--text-xs);color:var(--color-text-subtle);animation:1.5s infinite pulse}.dialogue-controls{gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border);flex-direction:column;display:flex}.dialogue-controls__row{justify-content:center;gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.dialogue-controls__row--secondary{justify-content:space-between}.dialogue-role-switch{border:1px solid var(--color-border);background:var(--color-surface);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);cursor:pointer;color:var(--color-text-muted);transition:all .15s}.dialogue-role-switch:hover{border-color:var(--color-primary-light);color:var(--color-primary)}.dark .conv-import-modal{background:var(--color-surface)}.dark .conv-import-error{background:#ef44441a;border-color:#ef444433}.dark .conv-import-textarea{background:var(--color-surface-container-low)}.dark .dialogue-line--active{background:color-mix(in srgb, var(--speaker-color) 10%, var(--color-surface))}.dark .dialogue-line--user.dialogue-line--active{background:color-mix(in srgb, var(--speaker-color) 15%, var(--color-surface))}.dark .dialogue-line__score--great{background:#16a34a33}.dark .dialogue-line__score--good{background:#ca8a0433}.dark .dialogue-line__score--try{background:#dc262633}.stress-syllable{font-weight:var(--font-extrabold);color:var(--color-primary);letter-spacing:.5px;text-decoration:underline;-webkit-text-decoration-color:var(--color-primary-light);text-decoration-color:var(--color-primary-light);text-underline-offset:3px;text-decoration-thickness:2px}.dialogue-line__intonation,.shadowing-intonation{font-size:1.2em;font-weight:var(--font-bold);margin-left:var(--space-1);vertical-align:middle;opacity:.9;transition:transform .2s;display:inline-block}.dialogue-line__intonation--rise,.shadowing-intonation--rise{color:#3b82f6}.dialogue-line__intonation--fall,.shadowing-intonation--fall{color:#8b5cf6}.dialogue-line__intonation--rise-fall{color:#f59e0b}.shadowing-sentence__stress{font-size:var(--text-2xl);font-weight:var(--font-medium);color:var(--color-text);word-spacing:3px;line-height:1.6}.shadowing-stress-toggle{margin-top:var(--space-2);justify-content:center;display:flex}.shadowing-btn--sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.dark .stress-syllable{color:var(--color-primary-light);-webkit-text-decoration-color:var(--color-primary);text-decoration-color:var(--color-primary)}.conv-import-samples{gap:var(--space-2);flex-direction:column;display:flex}.conv-import-samples__title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);margin:0}.conv-import-samples__btns{gap:var(--space-2);flex-wrap:wrap;display:flex}.conv-import-sample-btn{align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-text);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);display:inline-flex}.conv-import-sample-btn:hover{border-color:var(--color-primary-light);background:var(--color-primary-50);color:var(--color-primary)}.conv-import-ai-guide{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.conv-import-ai-guide__toggle{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);background:var(--color-bg-subtle);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text);cursor:pointer;transition:background var(--duration-fast);border:none;display:flex}.conv-import-ai-guide__toggle:hover{background:var(--color-bg-muted)}.conv-import-ai-guide__arrow{font-size:var(--text-xs);color:var(--color-text-subtle);margin-left:auto}.conv-import-ai-guide__content{padding:var(--space-4);border-top:1px solid var(--color-border);gap:var(--space-3);flex-direction:column;display:flex}.conv-import-ai-guide__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.5}.conv-import-ai-guide__prompt{font-size:var(--text-xs);font-family:var(--font-mono,monospace);background:var(--color-surface-container-low);padding:var(--space-3);border-radius:var(--radius-md);white-space:pre-wrap;color:var(--color-text);border:1px solid var(--color-border);margin:0;line-height:1.6}.conv-import-security-note{font-size:var(--text-xs);color:var(--color-text-subtle);text-align:center;margin:0}.topic-grid-wrapper{gap:var(--space-6);flex-direction:column;display:flex}.topic-grid-section{gap:var(--space-3);flex-direction:column;display:flex}.topic-grid-section__title{align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text);margin:0;display:flex}.topic-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}@media (max-width:640px){.topic-grid{gap:var(--space-2);grid-template-columns:repeat(2,1fr)}}.topic-card{border:1px solid var(--color-border);border-radius:var(--radius-xl);transition:all var(--duration-normal) var(--ease-default);background:var(--color-bg);position:relative;overflow:hidden}.topic-card:hover{border-color:var(--color-primary-light);transform:translateY(-2px);box-shadow:0 4px 16px #0000000f}.topic-card--system{border-left:3px solid var(--color-primary)}.topic-card--empty{opacity:.6}.topic-card__body{align-items:flex-start;gap:var(--space-2);padding:var(--space-4);cursor:pointer;text-align:left;width:100%;color:var(--color-text);background:0 0;border:none;flex-direction:column;font-family:inherit;display:flex}.topic-card--empty .topic-card__body{cursor:default}.topic-card__emoji{font-size:var(--text-2xl);line-height:1}.topic-card__title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);line-height:1.3}.topic-card__meta{align-items:center;gap:var(--space-2);font-size:var(--text-xs);width:100%;display:flex}.topic-card__count{color:var(--color-text-muted)}.topic-card__level{background:var(--color-primary-50);color:var(--color-primary);border-radius:var(--radius-full);font-size:10px;font-weight:var(--font-bold);padding:1px 6px;display:inline-flex}.topic-card__desc{font-size:var(--text-xs);color:var(--color-text-subtle);margin-top:-2px;line-height:1.4}.topic-card__delete{top:var(--space-2);right:var(--space-2);border-radius:var(--radius-full);background:var(--color-bg-muted);cursor:pointer;width:28px;height:28px;font-size:var(--text-xs);opacity:0;transition:all var(--duration-fast);border:none;justify-content:center;align-items:center;display:flex;position:absolute}.topic-card:hover .topic-card__delete{opacity:1}.topic-card__delete:hover{background:#fecaca}.topic-card__delete--confirm{color:#dc2626;background:#fecaca;width:auto;padding:0 8px;font-size:10px;opacity:1!important}.topic-grid-import{justify-content:center;display:flex}.topic-grid-import__btn{align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-6);background:var(--color-bg-subtle);border:2px dashed var(--color-border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--duration-fast);color:var(--color-text);flex-direction:column;display:flex}.topic-grid-import__btn:hover{border-color:var(--color-primary-light);background:var(--color-primary-50)}.topic-grid-import__icon{font-size:var(--text-xl)}.topic-grid-import__label{font-size:var(--text-sm);font-weight:var(--font-semibold)}.topic-grid-import__sub{font-size:var(--text-xs);color:var(--color-text-muted)}.topic-grid-empty{align-items:center;gap:var(--space-3);padding:var(--space-8);text-align:center;flex-direction:column;display:flex}.topic-grid-empty__icon{font-size:3rem}.topic-grid-empty__title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text);margin:0}.topic-grid-empty__sub{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}.topic-grid-empty__btn{padding:var(--space-2) var(--space-4);background:var(--color-primary);color:#fff;border-radius:var(--radius-lg);font-weight:var(--font-semibold);cursor:pointer;transition:background var(--duration-fast);border:none}.topic-grid-empty__btn:hover{opacity:.9}.topic-grid-loading{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-8);font-size:var(--text-sm);color:var(--color-text-muted);display:flex}.topic-grid-loading__spinner{border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin}.topic-practice-header{align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-4);display:flex}.topic-practice-back{padding:var(--space-1) var(--space-3);background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-sm);color:var(--color-text);transition:all var(--duration-fast);align-items:center;display:inline-flex}.topic-practice-back:hover{background:var(--color-bg-muted);border-color:var(--color-text-subtle)}.topic-practice-info{align-items:center;gap:var(--space-2);display:flex}.topic-practice-info__emoji{font-size:var(--text-xl)}.topic-practice-info__title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text)}.topic-practice-info__level{background:var(--color-primary-50);color:var(--color-primary);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);padding:2px 8px;display:inline-flex}.topic-import-form{gap:var(--space-4);flex-direction:column;display:flex}.topic-import-row{gap:var(--space-4);display:flex}.topic-import-title-field{gap:var(--space-1);flex-direction:column;flex:1;display:flex}.topic-import-emoji-picker{gap:var(--space-1);flex-direction:column;display:flex}.topic-import-emoji-grid{flex-wrap:wrap;gap:4px;max-width:180px;display:flex}.topic-import-emoji-btn{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);cursor:pointer;width:32px;height:32px;transition:all var(--duration-fast);justify-content:center;align-items:center;font-size:16px;display:flex}.topic-import-emoji-btn:hover{border-color:var(--color-primary)}.topic-import-emoji-btn--active{border-color:var(--color-primary);background:var(--color-primary-50);box-shadow:0 0 0 2px var(--color-primary-light)}.topic-import-helpers{gap:var(--space-2);flex-wrap:wrap;display:flex}.topic-import-count{font-weight:var(--font-normal);color:var(--color-text-muted);margin-left:var(--space-1)}@media (max-width:640px){.topic-import-row{flex-direction:column}.topic-import-emoji-grid{max-width:100%}}.dark .topic-card{background:var(--color-surface);border-color:var(--color-border)}.dark .topic-card:hover{box-shadow:0 4px 16px #0003}.dark .topic-card__level{background:rgba(var(--color-primary-rgb,99,102,241), .15)}.dark .topic-card__delete:hover,.dark .topic-card__delete--confirm{background:#dc262633}.dark .topic-grid-import__btn{background:var(--color-surface)}.dark .topic-grid-import__btn:hover{background:rgba(var(--color-primary-rgb,99,102,241), .1)}.dark .topic-practice-back,.dark .topic-import-emoji-btn{background:var(--color-surface)}.topic-card__top-row{justify-content:space-between;align-items:center;gap:var(--space-2);width:100%;display:flex}.topic-card__type-badge{border-radius:var(--radius-full);font-size:10px;font-weight:var(--font-semibold);white-space:nowrap;padding:1px 6px;line-height:1.5;display:inline-flex}.topic-card__type-badge--topic{color:#1d4ed8;background:#dbeafe}.topic-card__type-badge--conv{color:#b45309;background:#fef3c7}.dark .topic-card__type-badge--topic{color:#60a5fa;background:#3b82f626}.dark .topic-card__type-badge--conv{color:#fbbf24;background:#f59e0b26}.topic-grid-import-row{gap:var(--space-3);flex-wrap:wrap;justify-content:center;display:flex}.topic-grid-empty__btns{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.topic-grid-empty__btn--secondary{background:var(--color-bg-subtle);color:var(--color-text);border:1px solid var(--color-border)}.topic-grid-empty__btn--secondary:hover{background:var(--color-bg-muted)}.topic-practice-info__badge{border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);padding:2px 8px;display:inline-flex}.topic-practice-info__badge--topic{color:#1d4ed8;background:#dbeafe}.topic-practice-info__badge--conv{color:#b45309;background:#fef3c7}.dark .topic-practice-info__badge--topic{color:#60a5fa;background:#3b82f626}.dark .topic-practice-info__badge--conv{color:#fbbf24;background:#f59e0b26}.dialogue-attempt-feedback{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-weight:var(--font-semibold);text-align:center;margin:var(--space-3) 0;animation:.3s fadeInUp}.dialogue-attempt-feedback--pass{color:#166534;background:#dcfce7;border:1px solid #bbf7d0}.dialogue-attempt-feedback--fail{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.dialogue-attempt-feedback--retry{color:#92400e;background:#fef3c7;border:1px solid #fde68a}.dark .dialogue-attempt-feedback--pass{color:#86efac;background:#16a34a26;border-color:#16a34a4d}.dark .dialogue-attempt-feedback--fail{color:#fca5a5;background:#dc262626;border-color:#dc26264d}.dark .dialogue-attempt-feedback--retry{color:#fcd34d;background:#f59e0b26;border-color:#f59e0b4d}.dialogue-line__status{font-size:var(--text-xs);border-radius:var(--radius-full);align-items:center;gap:4px;margin-top:4px;padding:2px 8px;display:inline-flex}.dialogue-line__status--demo{color:#1d4ed8;background:#dbeafe}.dialogue-line__status--playing{color:#4338ca;background:#e0e7ff}.dark .dialogue-line__status--demo{color:#60a5fa;background:#3b82f626}.dark .dialogue-line__status--playing{color:#a5b4fc;background:#6366f126}.dialogue-line__result-row{align-items:center;gap:var(--space-2);margin-top:4px;display:flex}.dialogue-line__attempts{color:var(--color-text-muted);font-size:10px}.dialogue-final-score__stats{gap:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2);justify-content:center;display:flex}.dialogue-ready-screen{align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);text-align:center;flex-direction:column;display:flex}.dialogue-ready-screen__icon{font-size:48px}.dialogue-ready-screen__title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text)}.dialogue-ready-screen__role{align-items:center;gap:var(--space-3);font-size:var(--text-lg);font-weight:var(--font-semibold);display:flex}.dialogue-ready-screen__change{font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast);padding:2px 10px}.dialogue-ready-screen__change:hover{background:var(--color-bg-muted)}.dialogue-ready-screen__rules{background:var(--color-bg-subtle);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}.dialogue-ready-screen__start{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);color:#fff;border-radius:var(--radius-xl);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;transition:all var(--duration-normal);background:linear-gradient(135deg,#2563eb,#7c3aed);border:none;display:inline-flex;box-shadow:0 4px 14px #2563eb4d}.dialogue-ready-screen__start:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2563eb66}.dialogue-ready-screen__start:active{transform:translateY(0)}.dark .dialogue-ready-screen__rules{background:var(--color-surface)}
.video-hub{max-width:1100px;margin:0 auto;padding:1.5rem 1rem}.video-hub__header{margin-bottom:1.5rem}.video-hub__title{color:var(--color-text);align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700;display:flex}.video-hub__desc{color:var(--color-text-muted);margin-top:.25rem;font-size:.9rem}.video-hub__featured{margin-bottom:1.5rem}.video-hub__section-title{color:var(--color-text);margin-bottom:.75rem;font-size:1rem;font-weight:600}.video-hub__featured-scroll{scrollbar-width:thin;gap:.75rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.video-hub__featured-card{cursor:pointer;border-radius:var(--radius-md);flex-shrink:0;width:180px;transition:transform .2s,box-shadow .2s;overflow:hidden}.video-hub__featured-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.video-hub__featured-thumb{aspect-ratio:16/9;border-radius:var(--radius-md);position:relative;overflow:hidden}.video-hub__featured-thumb img{object-fit:cover;width:100%;height:100%}.video-hub__featured-level{background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);padding:2px 6px;font-size:.65rem;font-weight:700;position:absolute;bottom:4px;left:4px}.video-hub__featured-title{-webkit-line-clamp:2;color:var(--color-text);-webkit-box-orient:vertical;margin-top:.4rem;font-size:.78rem;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.video-hub__featured-channel{color:var(--color-text-muted);margin-top:.15rem;font-size:.7rem}.video-hub__add{margin-bottom:1.25rem}.video-hub__add-row{gap:.5rem;display:flex}.video-hub__add-input{border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);flex:1;padding:.625rem .875rem;font-size:.9rem;transition:border-color .2s}.video-hub__add-input:focus{border-color:var(--color-primary);outline:none}.video-hub__add-btn{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;border:none;align-items:center;gap:.35rem;padding:.625rem 1rem;font-size:.9rem;font-weight:600;transition:background .2s,transform .1s;display:flex}.video-hub__add-btn:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-1px)}.video-hub__add-btn:disabled{opacity:.6;cursor:not-allowed}.video-hub__error{color:var(--color-error,#e53e3e);margin-top:.35rem;font-size:.8rem}.video-hub__filters{gap:.5rem;margin-bottom:1rem;display:flex}.video-hub__filter-btn{border:2px solid var(--color-border);border-radius:var(--radius-pill,999px);color:var(--color-text-muted);cursor:pointer;background:0 0;align-items:center;gap:.35rem;padding:.4rem .75rem;font-size:.8rem;font-weight:600;transition:all .2s;display:flex}.video-hub__filter-btn--active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.video-hub__filter-count{opacity:.8;font-size:.7rem}.video-hub__empty{text-align:center;color:var(--color-text-muted);padding:3rem 1rem}.video-hub__empty svg{opacity:.3;margin:0 auto .75rem}.video-hub__grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;display:grid}.video-card{border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);transition:transform .2s,box-shadow .2s;overflow:hidden}.video-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.video-card__link{color:inherit;text-decoration:none}.video-card__thumb{aspect-ratio:16/9;background:var(--color-bg-muted,#f0f0f0);position:relative;overflow:hidden}.video-card__thumb img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.video-card:hover .video-card__thumb img{transform:scale(1.05)}.video-card__play-overlay{opacity:0;background:#00000040;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.video-card:hover .video-card__play-overlay{opacity:1}.video-card__play-overlay svg{color:#fff;filter:drop-shadow(0 2px 4px #0000004d)}.video-card__status{border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:2px 8px;font-size:.65rem;font-weight:600;position:absolute;bottom:6px;right:6px}.video-card__status--ready{color:#fff;background:#38a169e6}.video-card__status--none{color:#fff;background:#718096d9}.video-card__status--extracting,.video-card__status--translating{color:#fff;background:#ed8936e6}.video-card__status--error{color:#fff;background:#e53e3ee6}.video-card__info{padding:.6rem .75rem .4rem}.video-card__title{-webkit-line-clamp:2;color:var(--color-text);-webkit-box-orient:vertical;font-size:.85rem;font-weight:600;line-height:1.35;display:-webkit-box;overflow:hidden}.video-card__channel{color:var(--color-text-muted);margin-top:.15rem;font-size:.72rem}.video-card__actions{justify-content:space-between;align-items:center;padding:.35rem .75rem .6rem;display:flex}.video-card__watch{color:var(--color-text-muted);align-items:center;gap:.25rem;font-size:.7rem;display:flex}.video-card__watch--done{color:var(--color-primary)}.video-card__delete{border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;opacity:0;background:0 0;border:none;padding:.25rem;transition:opacity .2s,color .2s}.video-card:hover .video-card__delete{opacity:1}.video-card__delete:hover{color:var(--color-error,#e53e3e)}.video-player-page{max-width:1200px;margin:0 auto;padding:1rem}.video-player-page__back{color:var(--color-text-muted);align-items:center;gap:.35rem;margin-bottom:1rem;font-size:.85rem;text-decoration:none;transition:color .2s;display:inline-flex}.video-player-page__back:hover{color:var(--color-primary)}.video-player-page__layout{grid-template-columns:1fr 380px;align-items:start;gap:1.25rem;display:grid}@media (max-width:900px){.video-player-page__layout{grid-template-columns:1fr}}.video-player-page__embed{aspect-ratio:16/9;border-radius:var(--radius-lg);background:#000;position:relative;overflow:hidden}.video-player-page__iframe{width:100%;height:100%}.video-player-page__iframe iframe{border:none;width:100%;height:100%}.video-player-page__controls{align-items:center;gap:.5rem;margin-top:.5rem;padding:.5rem 0;display:flex}.video-player-page__ctrl-btn{background:var(--color-surface);border:none;border:1px solid var(--color-border);width:36px;height:36px;color:var(--color-text);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:background .2s,transform .1s;display:flex}.video-player-page__ctrl-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary);transform:scale(1.05)}.video-player-page__ctrl-btn--main{background:var(--color-primary);color:#fff;border-color:var(--color-primary);width:44px;height:44px}.video-player-page__ctrl-btn--main:hover{background:var(--color-primary-hover)}.video-player-page__time{color:var(--color-text-muted);font-variant-numeric:tabular-nums;margin-left:.5rem;font-size:.8rem}.video-player-page__title{color:var(--color-text);margin-top:.75rem;font-size:1.15rem;font-weight:700}.video-player-page__channel{color:var(--color-text-muted);margin-top:.15rem;font-size:.82rem}.video-player-page__sidebar{flex-direction:column;gap:1rem;display:flex}.video-player-page__extract{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:center;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.video-player-page__extract p{color:var(--color-text-muted);font-size:.85rem}.video-player-page__extract-btn{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;align-items:center;gap:.35rem;padding:.6rem 1.25rem;font-size:.88rem;font-weight:600;transition:transform .1s,box-shadow .2s;display:flex}.video-player-page__extract-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #38a1694d}.video-player-page__extract-btn:disabled{opacity:.7;cursor:not-allowed}.video-player-page__extract-error{color:var(--color-error,#e53e3e)!important;font-size:.78rem!important}.video-player-page__progress-bar{background:var(--color-border);border-radius:2px;width:100%;height:4px;overflow:hidden}.video-player-page__progress-fill{background:linear-gradient(90deg, var(--color-primary), #4fd1c5);border-radius:2px;height:100%;transition:width 1s}.video-player-page__subtitles{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.video-player-page__sub-title{border-bottom:1px solid var(--color-border);color:var(--color-text);justify-content:space-between;align-items:center;padding:.75rem 1rem;font-size:.9rem;font-weight:600;display:flex}.video-player-page__sub-count{color:var(--color-text-muted);background:var(--color-bg-muted,#0000000f);border-radius:var(--radius-pill,999px);padding:2px 8px;font-size:.7rem;font-weight:500}.video-player-page__sub-list{scrollbar-width:thin;max-height:480px;overflow-y:auto}.subtitle-cue{border-bottom:1px solid var(--color-border-subtle,#0000000f);cursor:pointer;align-items:flex-start;gap:.5rem;padding:.6rem 1rem;transition:background .15s;display:flex}.subtitle-cue:hover{background:var(--color-bg-hover,#00000008)}.subtitle-cue--active{border-left:3px solid var(--color-primary);background:#38a16914}.subtitle-cue__time{color:var(--color-text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:2.5rem;margin-top:.15rem;font-size:.68rem}.subtitle-cue__text{flex:1;min-width:0}.subtitle-cue__de{color:var(--color-text);font-size:.82rem;font-weight:500;line-height:1.4}.subtitle-cue__vi{color:var(--color-primary);margin-top:.15rem;font-size:.75rem;line-height:1.35}.subtitle-cue__speak{border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;opacity:0;background:0 0;border:none;flex-shrink:0;padding:.25rem;transition:opacity .2s,color .2s}.subtitle-cue:hover .subtitle-cue__speak{opacity:1}.subtitle-cue__speak:hover{color:var(--color-primary)}.subtitle-cue__word{cursor:pointer;border-radius:2px;transition:background .12s,color .12s}.subtitle-cue__word:hover{color:var(--color-primary);text-underline-offset:2px;background:#38a16926;text-decoration:underline}.subtitle-word-popup{background:var(--color-surface-container,#1e1e2e);border:1px solid var(--color-primary,#38a169);border-radius:var(--radius-md);z-index:10;margin-top:.5rem;padding:.75rem 1rem;animation:.15s ease-out gsearch-slidein;position:sticky;bottom:0;box-shadow:0 -4px 16px #0003}.subtitle-word-popup__header{justify-content:space-between;align-items:center;margin-bottom:.35rem;display:flex}.subtitle-word-popup__header strong{color:var(--color-text);font-size:.95rem}.subtitle-word-popup__close{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.15rem;transition:color .15s}.subtitle-word-popup__close:hover{color:var(--color-text)}.subtitle-word-popup__loading{color:var(--color-text-muted);font-size:.8rem}.subtitle-word-popup__body{color:var(--color-text);align-items:center;gap:.5rem;font-size:.85rem;display:flex}.subtitle-word-popup__gender{background:var(--color-primary);color:#fff;border-radius:4px;padding:1px 6px;font-size:.72rem;font-weight:700}.subtitle-word-popup__notfound{color:var(--color-text-muted);font-size:.8rem;font-style:italic}
:root{--heatmap-0:var(--color-surface-container-low);--heatmap-1:#4ade8040;--heatmap-2:#4ade8073;--heatmap-3:#4ade80b3;--heatmap-4:#22c55e}.dark{--heatmap-0:var(--color-surface-container-high);--heatmap-1:#4ade8026;--heatmap-2:#4ade804d;--heatmap-3:#4ade808c;--heatmap-4:#4ade80}.db{gap:var(--space-6);flex-direction:column;display:flex}.db-hero{justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-8);background:linear-gradient(135deg, var(--color-primary-50), var(--color-surface));border-radius:var(--radius-2xl);display:flex;position:relative;overflow:hidden}.dark .db-hero{background:linear-gradient(135deg, #4ade800f, var(--color-surface))}.db-hero:before{content:"";background:radial-gradient(circle, var(--color-primary-glow), transparent 70%);opacity:.4;pointer-events:none;width:300px;height:300px;position:absolute;top:-50%;right:-20%}.db-hero__left{align-items:center;gap:var(--space-4);flex:1;min-width:0;display:flex}.db-hero__avatar{border-radius:var(--radius-full);object-fit:cover;border:3px solid var(--color-primary-200);flex-shrink:0;width:56px;height:56px}.db-hero__avatar--fallback{background:var(--color-primary-container);color:var(--color-primary);font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-extrabold);justify-content:center;align-items:center;display:flex}.db-hero__text{flex-direction:column;gap:2px;min-width:0;display:flex}.db-hero__greeting{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-medium)}.db-hero__name{font-family:var(--font-display);font-size:clamp(var(--text-xl), 2.5vw, var(--text-3xl));font-weight:var(--font-extrabold);color:var(--color-text);letter-spacing:-.03em;white-space:nowrap;text-overflow:ellipsis;margin:0;line-height:1.15;overflow:hidden}.db-hero__sub{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}.db-hero__right{align-items:center;gap:var(--space-5);flex-shrink:0;display:flex}.db-hero__badges{gap:var(--space-2);flex-wrap:wrap;display:flex}.db-hero__badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--font-bold);white-space:nowrap;display:flex}.db-hero__badge--level{background:var(--color-primary-container);color:var(--color-on-primary-container);padding:var(--space-1) var(--space-3);flex-direction:column;gap:0}.dark .db-hero__badge--level{color:var(--color-primary);background:#4ade8026}.db-hero__badge--streak{background:var(--color-streak-bg);color:var(--color-streak)}.db-hero__badge--xp{color:#7c3aed;background:#f3e8ff}.dark .db-hero__badge--streak{background:#f973161f}.dark .db-hero__badge--xp{background:#a78bfa1f}.db-hero__badge-label{text-transform:uppercase;letter-spacing:.08em;opacity:.7;font-size:9px}.db-hero__badge-value{font-size:var(--text-lg);font-weight:var(--font-extrabold);line-height:1}.db-hero__badge-icon{font-size:var(--text-base)}.daily-goal-ring{flex-direction:column;align-items:center;display:flex;position:relative}.daily-goal-ring__svg{display:block}.daily-goal-ring__progress{transition:stroke-dashoffset 1s var(--ease-spring)}.daily-goal-ring__label{text-align:center;flex-direction:column;align-items:center;gap:0;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.daily-goal-ring__value{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--font-extrabold);color:var(--color-text);line-height:1.2}.daily-goal-ring__text{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:9px}.db-upgrade{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color:#fff;border-radius:var(--radius-xl);font-size:var(--text-sm);font-weight:var(--font-medium);transition:all var(--duration-fast) var(--ease-bounce);box-shadow:0 2px 0 var(--color-primary-dark);text-decoration:none;display:flex}.db-upgrade:hover{box-shadow:0 4px 0 var(--color-primary-dark), var(--shadow-primary);color:#fff;transform:translateY(-2px)}.db-upgrade__sparkle{font-size:var(--text-lg)}.db-upgrade__text{flex:1}.db-upgrade__text strong{font-weight:var(--font-bold)}.db-upgrade__arrow{opacity:.7;transition:transform var(--duration-fast)}.db-upgrade:hover .db-upgrade__arrow{opacity:1;transform:translate(4px)}.db-section-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text);margin-bottom:var(--space-4);letter-spacing:-.01em}.db-tasks{gap:var(--space-3);flex-direction:column;display:flex}.db-task{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--color-surface);border-radius:var(--radius-xl);color:inherit;transition:all var(--duration-fast) var(--ease-default);border-left:4px solid;text-decoration:none;display:flex}.db-task:hover{box-shadow:var(--shadow-sm);transform:translate(4px)}.db-task__emoji{font-size:var(--text-xl);flex-shrink:0}.db-task__title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);flex:1}.db-task__badge{padding:2px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);color:#fff;text-align:center;min-width:20px}.db-task__arrow{color:var(--color-text-subtle);font-size:var(--text-sm);transition:transform var(--duration-fast)}.db-task:hover .db-task__arrow{color:var(--color-text-muted);transform:translate(2px)}.db-stats{gap:var(--space-4);grid-template-columns:repeat(4,1fr);display:grid}.db-stat{background:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-5);gap:var(--space-3);transition:all var(--duration-fast) var(--ease-default);flex-direction:column;display:flex;position:relative}.db-stat:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.db-stat__icon{border-radius:var(--radius-xl);flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.35rem;display:flex}.db-stat__icon--streak{animation:.8s ease-in-out infinite streakFlame;background:var(--color-streak-bg)!important}.db-stat__body{flex-direction:column;gap:2px;display:flex}.db-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--font-extrabold);color:var(--color-text);letter-spacing:-.02em;line-height:1}.db-stat--streak .db-stat__value{color:var(--color-streak)}.db-stat__label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-muted)}.db-stat__trend{top:var(--space-4);right:var(--space-4);font-size:var(--text-xs);font-weight:var(--font-bold);padding:2px var(--space-2);border-radius:var(--radius-full);position:absolute}.db-stat__trend--up{color:var(--color-success);background:var(--color-primary-50)}.db-stat__trend--down{color:var(--color-error);background:#b025000f}.dark .db-stat__trend--up{background:#4ade801a}.dark .db-stat__trend--down{background:#f871711a}.db-charts{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.db-card{background:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-5)}.db-card__title{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-text);margin:0 0 var(--space-4) 0}.mastery-chart{align-items:center;gap:var(--space-5);display:flex}.mastery-chart__donut{flex-shrink:0;position:relative}.mastery-chart__segment{transition:opacity var(--duration-fast)}.mastery-chart__segment:hover{opacity:.8}.mastery-chart__center{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mastery-chart__total{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-extrabold);color:var(--color-text);line-height:1;display:block}.mastery-chart__total-label{font-size:var(--text-xs);color:var(--color-text-muted)}.mastery-chart__legend{gap:var(--space-2);flex:1;grid-template-columns:repeat(2,1fr);display:grid}.mastery-chart__legend-item{align-items:center;gap:var(--space-2);font-size:var(--text-sm);display:flex}.mastery-chart__legend-dot{border-radius:var(--radius-full);flex-shrink:0;width:10px;height:10px}.mastery-chart__legend-label{color:var(--color-text-muted);font-weight:var(--font-medium);flex:1}.mastery-chart__legend-value{font-family:var(--font-display);font-weight:var(--font-bold);color:var(--color-text)}.mini-heatmap{gap:var(--space-3);flex-direction:column;display:flex}.mini-heatmap__grid{justify-content:center;gap:3px;display:flex}.mini-heatmap__col{flex-direction:column;gap:3px;display:flex}.mini-heatmap__cell{width:14px;height:14px;transition:transform var(--duration-fast);border-radius:3px}.mini-heatmap__cell:hover{transform:scale(1.3)}.mini-heatmap__footer{padding-top:var(--space-2);justify-content:space-between;align-items:center;display:flex}.mini-heatmap__label{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--font-semibold)}.mini-heatmap__scale{align-items:center;gap:3px;display:flex}.mini-heatmap__scale-label{color:var(--color-text-subtle);font-size:10px}.mini-heatmap__scale .mini-heatmap__cell{width:10px;height:10px}.db-actions{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.db-action{background:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-5) var(--space-4);align-items:center;gap:var(--space-3);text-align:center;cursor:pointer;transition:all var(--duration-fast) var(--ease-bounce);flex-direction:column;display:flex}.db-action:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.db-action:active{transform:translateY(0)}.db-action__icon{border-radius:var(--radius-2xl);width:56px;height:56px;transition:transform var(--duration-fast) var(--ease-bounce);justify-content:center;align-items:center;font-size:1.75rem;display:flex;position:relative}.db-action:hover .db-action__icon{transform:scale(1.1)rotate(-5deg)}.db-action__notif{color:#fff;min-width:18px;height:18px;font-size:10px;font-weight:var(--font-bold);border-radius:var(--radius-full);background:#ef4444;justify-content:center;align-items:center;padding:0 4px;line-height:1;animation:2s ease-in-out infinite pulse-badge;display:flex;position:absolute;top:-4px;right:-4px}@keyframes pulse-badge{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.db-action__label{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text)}.db-action__sub{font-size:var(--text-xs);color:var(--color-text-muted)}.db-bottom{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.db-achievements{background:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-5)}.db-achievements__header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.db-achievements__title{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-text);margin:0}.db-achievements__link{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-primary);transition:gap var(--duration-fast);text-decoration:none}.db-achievements__link:hover{text-decoration:underline}.db-achievements__list{gap:var(--space-3);flex-wrap:wrap;display:flex}.db-achievements__item{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-surface-container-low);border-radius:var(--radius-xl);font-size:var(--text-sm);transition:all var(--duration-fast) var(--ease-bounce);display:flex}.db-achievements__item:hover{box-shadow:var(--shadow-sm);transform:scale(1.05)}.db-achievements__icon{font-size:var(--text-lg)}.db-achievements__name{font-weight:var(--font-medium);color:var(--color-text)}.db-plan{background:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-5);gap:var(--space-3);flex-direction:column;display:flex}.db-plan__label{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);display:flex}.db-plan__label strong{color:var(--color-text)}.db-plan__stats{gap:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);display:flex}.db-quote{text-align:center;padding:var(--space-6) var(--space-8);background:var(--color-surface);border-radius:var(--radius-2xl);position:relative;overflow:hidden}.db-quote:before{content:"";background:linear-gradient(90deg, var(--color-primary), var(--color-streak), var(--color-primary));height:3px;position:absolute;bottom:0;left:0;right:0}.db-quote__de{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text);letter-spacing:-.01em;margin-bottom:var(--space-2);font-style:italic}.db-quote__vi{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed)}@media (max-width:1024px){.db-stats{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.db-hero{padding:var(--space-5);flex-direction:column;align-items:flex-start}.db-hero__right{justify-content:space-between;width:100%}.db-stats{grid-template-columns:repeat(2,1fr)}.db-charts,.db-bottom{grid-template-columns:1fr}.mastery-chart{flex-direction:column;align-items:center}.db-quote{padding:var(--space-5)}}@media (max-width:480px){.db-hero__left{align-items:flex-start;gap:var(--space-3);flex-direction:column}.db-hero__badges{flex-wrap:wrap}.db-hero__name{font-size:var(--text-xl);white-space:normal}.db-actions{gap:var(--space-3);grid-template-columns:repeat(3,1fr)}.db-action{padding:var(--space-4) var(--space-3)}.db-action__icon{width:48px;height:48px;font-size:1.5rem}.db-stat__value{font-size:var(--text-2xl)}.db-quote__de{font-size:var(--text-base)}}
.gsearch-overlay{z-index:9998;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;animation:.15s ease-out gsearch-fadein;position:fixed;inset:0}.gsearch-dialog{z-index:9999;background:var(--color-surface-container,#1e1e2e);border:1px solid var(--color-outline-variant,#ffffff1a);border-radius:16px;flex-direction:column;width:min(560px,92vw);max-height:70vh;animation:.2s cubic-bezier(.16,1,.3,1) gsearch-slidein;display:flex;position:fixed;top:15%;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 24px 80px #00000080}@keyframes gsearch-fadein{0%{opacity:0}to{opacity:1}}@keyframes gsearch-slidein{0%{opacity:0;transform:translate(-50%)translateY(-8px)scale(.97)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}.gsearch-input-row{border-bottom:1px solid var(--color-outline-variant,#ffffff14);align-items:center;gap:.75rem;padding:.875rem 1rem;display:flex}.gsearch-input-icon{color:var(--color-primary,#8b5cf6);flex-shrink:0}.gsearch-input{color:var(--color-text,#e4e4e7);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:1rem}.gsearch-input::placeholder{color:var(--color-text-secondary,#a1a1aa)}.gsearch-clear{background:var(--color-surface-container-high,#ffffff0f);width:24px;height:24px;color:var(--color-text-secondary,#a1a1aa);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;transition:background .15s;display:flex}.gsearch-clear:hover{background:var(--color-surface-container-highest,#ffffff1f)}.gsearch-kbd{background:var(--color-surface-container-high,#ffffff0f);border:1px solid var(--color-outline-variant,#ffffff1a);color:var(--color-text-secondary,#a1a1aa);border-radius:4px;flex-shrink:0;padding:2px 6px;font-family:monospace;font-size:.7rem}.gsearch-results{flex:1;max-height:400px;padding:.5rem;overflow-y:auto}.gsearch-group-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary,#71717a);padding:.5rem .75rem .25rem;font-size:.7rem;font-weight:600}.gsearch-loading,.gsearch-empty{text-align:center;color:var(--color-text-secondary,#a1a1aa);padding:2rem;font-size:.875rem}.gsearch-item{width:100%;color:var(--color-text,#e4e4e7);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:.75rem;padding:.625rem .75rem;font-size:.875rem;transition:background .12s;display:flex}.gsearch-item:hover,.gsearch-item--active{background:var(--color-surface-container-high,#ffffff0f)}.gsearch-item__icon{background:var(--color-primary-container,#8b5cf626);width:32px;height:32px;color:var(--color-primary,#8b5cf6);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.gsearch-item__text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.gsearch-item__title{white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.gsearch-item__subtitle{color:var(--color-text-secondary,#a1a1aa);font-size:.75rem}.gsearch-item__arrow{color:var(--color-text-tertiary,#71717a);opacity:0;flex-shrink:0;transition:opacity .12s}.gsearch-item:hover .gsearch-item__arrow,.gsearch-item--active .gsearch-item__arrow{opacity:1}.gsearch-footer{border-top:1px solid var(--color-outline-variant,#ffffff14);color:var(--color-text-tertiary,#71717a);align-items:center;gap:1rem;padding:.5rem 1rem;font-size:.7rem;display:flex}.gsearch-footer kbd{background:var(--color-surface-container-high,#ffffff0f);border:1px solid var(--color-outline-variant,#ffffff1a);border-radius:3px;margin-right:2px;padding:1px 4px;font-family:monospace;font-size:.65rem}.gsearch-trigger{border:1px solid var(--color-outline-variant,#ffffff1a);background:var(--color-surface-container,#ffffff08);width:100%;color:var(--color-text-secondary,#a1a1aa);cursor:pointer;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.8rem;transition:all .15s;display:flex}.gsearch-trigger:hover{background:var(--color-surface-container-high,#ffffff0f);border-color:var(--color-primary,#8b5cf6)}.gsearch-trigger__text{text-align:left;flex:1}.gsearch-trigger__kbd{background:var(--color-surface-container-high,#ffffff0f);border:1px solid var(--color-outline-variant,#ffffff1a);border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.65rem}.inline-speak-icon{vertical-align:middle;opacity:.5;margin-left:4px;transition:opacity .15s;display:inline-flex}.inline-speak-icon:hover{opacity:1}.gdp-quiz__word,.gdp-fill__word,.gdp-speed__word{justify-content:center;align-items:center;gap:.5rem;display:flex}.gdp-quiz__speak{opacity:.6}.gdp-quiz__speak:hover{opacity:1}.recent-lookups{background:var(--color-surface,#fff);border:1px solid var(--color-border,#00000014);border-radius:12px;padding:.75rem}.recent-lookups__header{color:var(--color-text,#1a1a1a);align-items:center;gap:.4rem;margin-bottom:.5rem;font-size:.78rem;font-weight:600;display:flex}.recent-lookups__count{color:var(--color-text-muted,#a1a1aa);font-weight:400}.recent-lookups__list{flex-direction:column;gap:.25rem;display:flex}.recent-lookups__item{border-radius:6px;align-items:center;gap:.4rem;padding:.3rem .5rem;transition:background .12s;display:flex}.recent-lookups__item:hover{background:var(--color-bg-hover,#00000008)}.recent-lookups__word{color:var(--color-text,#1a1a1a);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.82rem;font-weight:500;text-decoration:none;overflow:hidden}.recent-lookups__word:hover{color:var(--color-primary,#38a169);text-decoration:underline}.recent-lookups__source{text-transform:uppercase;letter-spacing:.04em;background:var(--color-surface-container-high,#0000000a);color:var(--color-text-muted,#a1a1aa);border-radius:3px;flex-shrink:0;padding:1px 5px;font-size:.6rem;font-weight:600}.recent-lookups__add{background:var(--color-primary-container,#38a1691a);width:22px;height:22px;color:var(--color-primary,#38a169);cursor:pointer;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,transform .1s;display:flex}.recent-lookups__add:hover{background:var(--color-primary,#38a169);color:#fff;transform:scale(1.1)}.recent-lookups__added{width:22px;height:22px;color:var(--color-primary,#38a169);flex-shrink:0;justify-content:center;align-items:center;display:flex}.recent-lookups__toggle{width:100%;color:var(--color-text-muted,#a1a1aa);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.25rem;margin-top:.35rem;padding:.3rem;font-size:.72rem;transition:color .15s;display:flex}.recent-lookups__toggle:hover{color:var(--color-primary,#38a169)}
.sp{max-width:720px;padding:var(--space-4) var(--space-4) var(--space-8);margin:0 auto}.sp__setup{gap:var(--space-6);flex-direction:column;display:flex}.sp__setup-header{text-align:center}.sp__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-extrabold);color:var(--color-text);margin:0 0 var(--space-2);letter-spacing:-.02em}@media (min-width:640px){.sp__title{font-size:var(--text-3xl)}}.sp__subtitle{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed);margin:0}.sp__modes{gap:var(--space-3);grid-template-columns:1fr 1fr;display:grid}@media (max-width:560px){.sp__modes{grid-template-columns:1fr}}.sp__mode-card{gap:var(--space-3);padding:var(--space-5);border-radius:var(--radius-2xl);border:2px solid var(--color-border);background:var(--color-surface);cursor:pointer;text-align:left;transition:all var(--duration-normal) var(--ease-default);font-family:var(--font-body);flex-direction:column;display:flex}.sp__mode-card:hover{border-color:var(--color-primary);box-shadow:0 4px 20px #4ade8014}.sp__mode-card--active{border-color:var(--color-primary);background:linear-gradient(135deg,#4ade800f 0%,#3b82f60f 100%);box-shadow:0 4px 24px #4ade801f}.sp__mode-icon{border-radius:var(--radius-xl);width:48px;height:48px;color:var(--color-primary);background:linear-gradient(135deg,#4ade801f,#3b82f61f);justify-content:center;align-items:center;display:flex}.sp__mode-card--active .sp__mode-icon{color:#fff;background:linear-gradient(135deg,#4ade80 0%,#3b82f6 100%)}.sp__mode-info h3{font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-text);margin:0 0 2px}.sp__mode-info p{font-size:var(--text-xs);color:var(--color-text-muted);line-height:var(--leading-relaxed);margin:0}.sp__mode-features{gap:var(--space-2);flex-wrap:wrap;display:flex}.sp__mode-features span{border-radius:var(--radius-full);background:var(--color-surface-container-high);color:var(--color-text-muted);padding:2px 8px;font-size:10px}.sp__mode-warn{color:#f59e0b;border-radius:var(--radius-lg);background:#f59e0b14;padding:4px 8px;font-size:10px}.sp__options{gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);flex-direction:column;display:flex}.sp__option{align-items:center;gap:var(--space-3);display:flex}.sp__option-label{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);min-width:70px}.sp__option-pills{flex-wrap:wrap;gap:6px;display:flex}.sp__pill{border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);font-family:var(--font-body);background:0 0;padding:5px 14px}.sp__pill:hover{border-color:var(--color-primary);color:var(--color-text)}.sp__pill--active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-bg)}.sp__start-btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-2xl);color:#fff;font-size:var(--text-base);font-weight:var(--font-bold);font-family:var(--font-body);cursor:pointer;transition:all var(--duration-fast) var(--ease-bounce);background:linear-gradient(135deg,#4ade80 0%,#22c55e 50%,#16a34a 100%);border:none;display:flex;box-shadow:0 4px 20px #4ade8040}.sp__start-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px #4ade8059}.sp__start-btn:disabled{opacity:.6;cursor:wait}.sp__practice{gap:var(--space-5);flex-direction:column;display:flex}.sp__progress{align-items:center;gap:var(--space-3);display:flex}.sp__progress-bar{background:var(--color-surface-container-high);border-radius:var(--radius-full);flex:1;height:6px;overflow:hidden}.sp__progress-fill{border-radius:var(--radius-full);background:linear-gradient(90deg,#4ade80 0%,#3b82f6 100%);height:100%;transition:width .3s}.sp__progress-text{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-text-muted);white-space:nowrap}.sp__mode-badge{border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-primary);background:linear-gradient(135deg,#4ade8014,#3b82f614);border:1px solid #4ade8026;align-items:center;gap:6px;width:fit-content;padding:4px 14px;display:inline-flex}.sp__dictation{gap:var(--space-5);flex-direction:column;display:flex}.sp__listen-area{align-items:center;gap:var(--space-3);padding:var(--space-6);background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);flex-direction:column;display:flex}.sp__listen-btn{border-radius:var(--radius-full);border:3px solid var(--color-primary);width:80px;height:80px;color:var(--color-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-bounce);background:linear-gradient(135deg,#4ade801a,#3b82f61a);justify-content:center;align-items:center;display:flex}.sp__listen-btn:hover{transform:scale(1.08);box-shadow:0 8px 30px #4ade8033}.sp__listen-btn--playing{color:#fff;background:linear-gradient(135deg,#4ade80,#3b82f6);border-color:#0000;animation:1.5s ease-in-out infinite sp-pulse}@keyframes sp-pulse{0%,to{transform:scale(1);box-shadow:0 0 #4ade804d}50%{transform:scale(1.05);box-shadow:0 0 20px 8px #4ade8026}}.sp__listen-hint{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}.sp__topic-badge{border-radius:var(--radius-full);background:var(--color-surface-container-high);color:var(--color-text-muted);padding:2px 10px;font-size:10px}.sp__input-area{gap:var(--space-2);flex-direction:column;display:flex}.sp__input{width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);font-size:var(--text-base);font-family:var(--font-body);line-height:var(--leading-relaxed);resize:none;transition:border-color var(--duration-fast)}.sp__input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #4ade801a}.sp__input:disabled{opacity:.6;background:var(--color-surface-container-high)}.sp__check-btn{align-self:flex-end}.sp__pronunciation{gap:var(--space-5);flex-direction:column;display:flex}.sp__read-area{padding:var(--space-5);background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);text-align:center}.sp__read-text{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text);margin:0 0 var(--space-3);letter-spacing:.02em;line-height:1.6}@media (min-width:640px){.sp__read-text{font-size:var(--text-2xl)}}.sp__read-meta{justify-content:center;align-items:center;gap:var(--space-3);display:flex}.sp__read-translation{font-size:var(--text-sm);color:var(--color-text-muted);font-style:italic}.sp__mic-area{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.sp__mic-btn{align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-radius:var(--radius-2xl);border:2px solid var(--color-primary);color:var(--color-primary);font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-body);cursor:pointer;transition:all var(--duration-fast) var(--ease-bounce);background:linear-gradient(135deg,#4ade8014,#3b82f614);flex-direction:column;display:flex}.sp__mic-btn:hover{transform:scale(1.03);box-shadow:0 4px 20px #4ade8026}.sp__mic-btn--recording{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#f97316 100%);border-color:#0000;animation:1s ease-in-out infinite sp-pulse}.sp__mic-active{align-items:center;gap:var(--space-3);flex-direction:column;display:flex;position:relative}.sp__mic-pulse{border-radius:var(--radius-full);pointer-events:none;border:2px solid #ef444433;width:120px;height:120px;animation:1.5s ease-out infinite sp-mic-ring;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes sp-mic-ring{0%{opacity:1;transform:translate(-50%,-50%)scale(.8)}to{opacity:0;transform:translate(-50%,-50%)scale(1.6)}}.sp__mic-transcript{font-size:var(--text-sm);color:var(--color-text-muted);padding:var(--space-2) var(--space-3);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);word-break:break-word;align-items:center;gap:6px;max-width:100%;margin:0;display:flex}.sp__result{gap:var(--space-4);padding:var(--space-5);background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);flex-direction:column;animation:.3s ease-out sp-result-in;display:flex}@keyframes sp-result-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.sp__result-score{justify-content:center;align-items:center;gap:var(--space-4);display:flex}.sp__result-score-circle{border-radius:var(--radius-full);background:var(--color-bg);border:4px solid;flex-shrink:0;justify-content:center;align-items:baseline;width:72px;height:72px;display:flex}.sp__result-score-num{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-extrabold);color:var(--color-text)}.sp__result-score-pct{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text-muted)}.sp__result-score-info{flex-direction:column;align-items:center;gap:2px;display:flex}.sp__result-score-emoji{font-size:var(--text-2xl)}.sp__result-diff{padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-xl)}.sp__diff-label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-text-muted);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.05em}.sp__diff-words{flex-wrap:wrap;gap:4px;line-height:1.8;display:flex}.sp__diff-word{font-size:var(--text-sm);border-radius:4px;padding:2px 6px;transition:background .15s}.sp__diff-word--correct{color:#16a34a;font-weight:var(--font-semibold);background:#22c55e1f}.sp__diff-word--wrong{background:#ef44441a}.sp__diff-word--wrong s{color:#ef4444;opacity:.6;text-decoration:line-through}.sp__diff-actual{color:#f97316;font-weight:var(--font-bold);margin-left:2px}.sp__diff-missing{color:#ef4444;font-weight:var(--font-semibold);-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.sp__diff-extra{color:#8b5cf6;opacity:.7;font-style:italic}.sp__result-answer{padding:var(--space-3);border-radius:var(--radius-xl);background:linear-gradient(135deg,#4ade800a,#3b82f60a);border:1px solid #4ade801a}.sp__result-correct-text{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text);margin:0 0 var(--space-1)}.sp__result-translation{font-size:var(--text-xs);color:var(--color-text-muted);margin:0;font-style:italic}.sp__result-actions{gap:var(--space-2);justify-content:flex-end;display:flex}.sp__btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-xl);font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-body);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);border:none;align-items:center;gap:6px;display:inline-flex}.sp__btn--primary{color:#fff;background:linear-gradient(135deg,#4ade80 0%,#22c55e 100%);box-shadow:0 2px 10px #4ade8033}.sp__btn--primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px #4ade804d}.sp__btn--outline{border:1px solid var(--color-border);color:var(--color-text-muted);background:0 0}.sp__btn--outline:hover{border-color:var(--color-text);color:var(--color-text)}.sp__btn:disabled{opacity:.5;cursor:not-allowed}.sp__summary{gap:var(--space-5);padding:var(--space-5);background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);flex-direction:column;display:flex}.sp__summary-header{text-align:center}.sp__summary-emoji{margin-bottom:var(--space-2);font-size:3rem;line-height:1}.sp__summary-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-extrabold);color:var(--color-text);margin:0 0 var(--space-1)}.sp__summary-score{font-family:var(--font-display);font-size:var(--text-4xl,2.25rem);font-weight:var(--font-extrabold);line-height:1}.sp__summary-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin:var(--space-1) 0 0}.sp__summary-stats{gap:var(--space-4);justify-content:center;display:flex}.sp__summary-stat{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-medium);align-items:center;gap:6px;display:flex}.sp__summary-list{flex-direction:column;gap:2px;max-height:300px;display:flex;overflow-y:auto}.sp__summary-item{gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);grid-template-columns:24px 1fr auto;align-items:center;display:grid}.sp__summary-item:nth-child(odd){background:var(--color-bg)}.sp__summary-item-idx{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-text-muted);text-align:center}.sp__summary-item-text{font-size:var(--text-sm);color:var(--color-text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sp__summary-item-score{font-size:var(--text-sm);font-weight:var(--font-bold);text-align:right;min-width:40px}.sp__summary-actions{gap:var(--space-2);justify-content:center;display:flex}
.tools{max-width:800px;padding:var(--space-4) var(--space-4) var(--space-8);margin:0 auto}.tools__header{text-align:center;margin-bottom:var(--space-5)}.tools__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-extrabold);color:var(--color-text);margin:0 0 var(--space-1);letter-spacing:-.02em}@media (min-width:640px){.tools__title{font-size:var(--text-3xl)}}.tools__subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}.tools__tabs{background:var(--color-surface-container-high);border-radius:var(--radius-2xl);margin-bottom:var(--space-5);grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;display:grid}.tools__tab{padding:var(--space-3) var(--space-2);border-radius:var(--radius-xl);color:var(--color-text-muted);font-family:var(--font-body);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;display:flex}.tools__tab:hover{color:var(--color-text);background:var(--color-surface)}.tools__tab--active{background:var(--color-surface);color:var(--color-primary);box-shadow:0 2px 8px #0000000f}.tools__tab-label{font-size:var(--text-sm);font-weight:var(--font-bold)}.tools__tab-desc{opacity:.7;font-size:10px;display:none}@media (min-width:480px){.tools__tab-desc{display:block}}.tool-ocr__drop,.tool-pdf__drop{border:2px dashed var(--color-border);border-radius:var(--radius-2xl);background:var(--color-surface);cursor:pointer;min-height:200px;transition:all var(--duration-fast);padding:var(--space-4);justify-content:center;align-items:center;display:flex}.tool-ocr__drop:hover,.tool-pdf__drop:hover{border-color:var(--color-primary);background:linear-gradient(135deg,#4ade800a,#3b82f60a)}.tool-ocr__drop--loading,.tool-pdf__drop--loading{pointer-events:none;opacity:.8}.tool-ocr__input-hidden,.tool-pdf__input-hidden{display:none}.tool-ocr__placeholder,.tool-pdf__placeholder{align-items:center;gap:var(--space-2);color:var(--color-text-muted);flex-direction:column;display:flex}.tool-ocr__drop-title,.tool-pdf__drop-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text);margin:0}.tool-ocr__drop-hint,.tool-pdf__drop-hint{font-size:var(--text-xs);margin:0}.tool-ocr__loading,.tool-pdf__loading{align-items:center;gap:var(--space-2);color:var(--color-primary);flex-direction:column;display:flex}.tool-ocr__loading p,.tool-pdf__loading p{font-size:var(--text-sm);margin:0}.tool-ocr{gap:var(--space-4);flex-direction:column;display:flex}.tool-ocr__preview{align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.tool-ocr__image{border-radius:var(--radius-xl);object-fit:contain;max-width:100%;max-height:250px}.tool-ocr__change{font-size:var(--text-xs);color:var(--color-text-muted);margin:0}.tool-ocr__error,.tool-pdf__error,.tool-writing__error{padding:var(--space-3);border-radius:var(--radius-lg);color:#ef4444;font-size:var(--text-sm);font-weight:var(--font-medium);background:#ef444414}.tool-ocr__result{gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);flex-direction:column;animation:.3s ease-out tools-fade-in;display:flex}@keyframes tools-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tool-ocr__result-header{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.tool-ocr__result-header h3{font-size:var(--text-base);font-weight:var(--font-bold);margin:0}.tool-ocr__result-actions{align-items:center;gap:var(--space-2);display:flex}.tool-ocr__confidence{border-radius:var(--radius-full);padding:2px 8px;font-size:10px}.tool-ocr__confidence--high{color:#16a34a;background:#22c55e1a}.tool-ocr__confidence--medium{color:#f59e0b;background:#f59e0b1a}.tool-ocr__confidence--low{color:#ef4444;background:#ef44441a}.tool-ocr__copy-btn{border-radius:var(--radius-lg);border:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--text-xs);font-family:var(--font-body);cursor:pointer;transition:all var(--duration-fast);background:0 0;align-items:center;gap:4px;padding:4px 10px;display:inline-flex}.tool-ocr__copy-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.tool-ocr__text-box{padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-xl)}.tool-ocr__text{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-text);white-space:pre-wrap;word-break:break-word;font-family:var(--font-body);margin:0}.tool-ocr__speak{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);align-items:center;gap:6px;display:flex}.tool-ocr__words{gap:var(--space-2);flex-direction:column;display:flex}.tool-ocr__words h4{font-size:var(--text-sm);font-weight:var(--font-semibold);margin:0}.tool-ocr__word-list{flex-wrap:wrap;gap:4px;display:flex}.tool-ocr__word{border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-text);cursor:pointer;transition:all var(--duration-fast);background:linear-gradient(135deg,#4ade8014,#3b82f614);border:1px solid #4ade8026;padding:2px 10px}.tool-ocr__word:hover{border-color:var(--color-primary);background:#4ade8026}.tool-pdf{gap:var(--space-4);flex-direction:column;display:flex}.tool-pdf__reader{gap:var(--space-3);flex-direction:column;animation:.3s ease-out tools-fade-in;display:flex}.tool-pdf__reader-header{padding:var(--space-3);background:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.tool-pdf__file-info{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);align-items:center;gap:6px;display:flex}.tool-pdf__file-name{text-overflow:ellipsis;white-space:nowrap;max-width:200px;overflow:hidden}.tool-pdf__nav{align-items:center;gap:var(--space-2);display:flex}.tool-pdf__nav-btn{border-radius:var(--radius-lg);border:1px solid var(--color-border);width:28px;height:28px;color:var(--color-text);cursor:pointer;transition:all var(--duration-fast);background:0 0;justify-content:center;align-items:center;display:flex}.tool-pdf__nav-btn:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.tool-pdf__nav-btn:disabled{opacity:.3;cursor:not-allowed}.tool-pdf__page-num{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-text-muted);text-align:center;min-width:50px}.tool-pdf__new-btn{border-radius:var(--radius-lg);border:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--text-xs);font-family:var(--font-body);cursor:pointer;transition:all var(--duration-fast);background:0 0;padding:4px 12px}.tool-pdf__new-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.tool-pdf__content{padding:var(--space-5);background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);max-height:500px;overflow-y:auto}.tool-pdf__text-body{font-size:var(--text-sm);color:var(--color-text);line-height:2}.pdf-word{cursor:pointer;border-radius:3px;padding:1px 2px;transition:all .15s}.pdf-word:hover{color:var(--color-primary);background:#4ade8026}.pdf-word--active{outline:2px solid var(--color-primary);outline-offset:1px;background:#4ade8033}.tool-pdf__word-popup{padding:var(--space-3);background:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-primary);align-items:center;gap:var(--space-3);animation:.2s ease-out tools-fade-in;display:flex;position:sticky;bottom:0;box-shadow:0 -4px 20px #00000014}.tool-pdf__word-popup-header{align-items:center;gap:var(--space-2);font-size:var(--text-base);display:flex}.tool-pdf__word-hint{font-size:var(--text-xs);color:var(--color-text-muted);flex:1;margin:0}.tool-pdf__word-close{border-radius:var(--radius-lg);color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);background:0 0;border:none;padding:4px 8px}.tool-pdf__tts-bar{font-size:var(--text-xs);color:var(--color-text-muted);padding:var(--space-2) var(--space-3);background:var(--color-surface);border-radius:var(--radius-lg);align-items:center;gap:6px;width:fit-content;display:flex}.tool-writing{gap:var(--space-4);flex-direction:column;display:flex}.tool-writing__prompt-bar{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-xl);font-size:var(--text-sm);color:var(--color-text-muted);background:linear-gradient(135deg,#4ade800f,#3b82f60f);border:1px solid #4ade801f;display:flex}.tool-writing__prompt-bar span{flex:1;font-style:italic}.tool-writing__prompt-refresh{border-radius:var(--radius-lg);color:var(--color-text-muted);cursor:pointer;transition:transform var(--duration-fast);background:0 0;border:none;padding:4px}.tool-writing__prompt-refresh:hover{color:var(--color-primary);transform:rotate(-180deg)}.tool-writing__input-area{gap:var(--space-2);flex-direction:column;display:flex}.tool-writing__textarea{width:100%;padding:var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);font-size:var(--text-base);font-family:var(--font-body);line-height:var(--leading-relaxed);resize:vertical;min-height:120px;transition:border-color var(--duration-fast)}.tool-writing__textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #4ade8014}.tool-writing__textarea:disabled{opacity:.6}.tool-writing__input-footer{justify-content:space-between;align-items:center;display:flex}.tool-writing__char-count{font-size:var(--text-xs);color:var(--color-text-muted)}.tool-writing__input-actions{gap:var(--space-2);display:flex}.tool-writing__btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-xl);font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-body);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);border:none;align-items:center;gap:6px;display:inline-flex}.tool-writing__btn--primary{color:#fff;background:linear-gradient(135deg,#4ade80 0%,#22c55e 100%);box-shadow:0 2px 10px #4ade8033}.tool-writing__btn--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px #4ade804d}.tool-writing__btn--primary:disabled{opacity:.5;cursor:not-allowed}.tool-writing__btn--outline{border:1px solid var(--color-border);color:var(--color-text-muted);background:0 0}.tool-writing__btn--outline:hover{border-color:var(--color-text);color:var(--color-text)}.tool-writing__result{gap:var(--space-4);padding:var(--space-5);background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);flex-direction:column;animation:.3s ease-out tools-fade-in;display:flex}.tool-writing__score-bar{align-items:center;gap:var(--space-3);display:flex}.tool-writing__score-circle{border-radius:var(--radius-full);border:4px solid;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.tool-writing__score-num{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-extrabold);color:var(--color-text)}.tool-writing__score-info{flex-direction:column;gap:2px;display:flex}.tool-writing__score-label{font-weight:var(--font-bold);font-size:var(--text-base)}.tool-writing__score-level{font-size:var(--text-xs);color:var(--color-text-muted)}.tool-writing__perfect{color:#22c55e;font-size:var(--text-sm);font-weight:var(--font-bold);align-items:center;gap:6px;margin-left:auto;display:flex}.tool-writing__corrected{padding:var(--space-3);border-radius:var(--radius-xl);background:#22c55e0d;border:1px solid #22c55e1f}.tool-writing__corrected h4{font-size:var(--text-sm);margin:0 0 var(--space-2)}.tool-writing__corrected-text{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text);margin:0 0 var(--space-2);line-height:var(--leading-relaxed)}.tool-writing__errors h4{font-size:var(--text-sm);margin:0 0 var(--space-2);align-items:center;gap:6px;display:flex}.tool-writing__error-list{gap:var(--space-3);flex-direction:column;display:flex}.tool-writing__error-item{padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-xl)}.tool-writing__error-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);flex-wrap:wrap;display:flex}.tool-writing__error-type{border-radius:var(--radius-full);font-size:10px;font-weight:var(--font-bold);border:1px solid;padding:2px 10px}.tool-writing__error-diff{font-size:var(--text-sm);align-items:center;gap:6px;display:flex}.tool-writing__error-wrong{color:#ef4444}.tool-writing__error-arrow{color:var(--color-text-muted)}.tool-writing__error-right{color:#22c55e}.tool-writing__error-explain{font-size:var(--text-sm);color:var(--color-text);line-height:var(--leading-relaxed);margin:0}.tool-writing__error-rule{font-size:var(--text-xs);color:var(--color-text-muted);margin:var(--space-1) 0 0;font-style:italic}.tool-writing__suggestions{padding:var(--space-3);border-radius:var(--radius-xl);background:#3b82f60a}.tool-writing__suggestions h4{font-size:var(--text-sm);margin:0 0 var(--space-2)}.tool-writing__suggestions ul{padding-left:var(--space-4);font-size:var(--text-sm);color:var(--color-text);line-height:var(--leading-relaxed);margin:0}.tool-writing__alternative{padding:var(--space-3);border-radius:var(--radius-xl);background:linear-gradient(135deg,#4ade800a,#8b5cf60a);border:1px solid #8b5cf61a}.tool-writing__alternative h4{font-size:var(--text-sm);margin:0 0 var(--space-2)}.tool-writing__alternative p{font-size:var(--text-base);font-weight:var(--font-medium);color:var(--color-text);margin:0 0 var(--space-2);line-height:var(--leading-relaxed)}