.test-hub{max-width:900px;padding:var(--space-6) var(--space-4);margin:0 auto}.test-hub__header{text-align:center;margin-bottom:var(--space-8)}.test-hub__title{font-size:var(--text-3xl);background:linear-gradient(135deg, var(--color-primary), var(--color-secondary,#8b5cf6));-webkit-text-fill-color:transparent;margin-bottom:var(--space-2);-webkit-background-clip:text;background-clip:text;font-weight:800}.test-hub__subtitle{color:var(--color-text-secondary);font-size:var(--text-base)}.test-hub__section{margin-bottom:var(--space-6)}.test-hub__section-title{font-size:var(--text-lg);margin-bottom:var(--space-3);align-items:center;gap:var(--space-2);font-weight:700;display:flex}.test-hub__level-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.test-hub__level-card{padding:var(--space-4);border-radius:var(--radius-xl);border:2px solid var(--color-border);background:var(--color-surface);cursor:pointer;text-align:center;transition:all .2s;position:relative}.test-hub__level-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.test-hub__level-card--selected{border-color:var(--color-primary);background:var(--color-primary-light,#3b82f614)}.test-hub__level-code{font-size:var(--text-2xl);margin-bottom:var(--space-1);font-weight:800}.test-hub__level-label{font-size:var(--text-sm);color:var(--color-text-secondary)}.test-hub__level-count{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:var(--space-1)}.test-hub__skill-tabs{gap:var(--space-2);flex-wrap:wrap;display:flex}.test-hub__skill-tab{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1.5px solid var(--color-border);background:var(--color-surface);font-size:var(--text-sm);cursor:pointer;align-items:center;gap:var(--space-1);font-weight:600;transition:all .2s;display:flex}.test-hub__skill-tab:hover{border-color:var(--color-primary)}.test-hub__skill-tab--selected{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.test-hub__mode-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(250px,1fr));display:grid}.test-hub__mode-card{padding:var(--space-5);border-radius:var(--radius-xl);border:2px solid var(--color-border);background:var(--color-surface);cursor:pointer;transition:all .2s}.test-hub__mode-card:hover{border-color:var(--color-primary)}.test-hub__mode-card--selected{border-color:var(--color-primary);background:var(--color-primary-light,#3b82f614)}.test-hub__mode-card--locked{opacity:.5;cursor:not-allowed}.test-hub__mode-icon{font-size:var(--text-2xl);margin-bottom:var(--space-2)}.test-hub__mode-name{font-weight:700;font-size:var(--text-base);margin-bottom:var(--space-1)}.test-hub__mode-desc{font-size:var(--text-sm);color:var(--color-text-secondary)}.test-hub__skill-meta{font-size:var(--text-xs);opacity:.8;margin-left:auto;font-weight:500}.test-hub__exam-info{padding:var(--space-4);border-radius:var(--radius-xl);border:1px solid var(--color-border);background:var(--color-surface)}.test-hub__exam-badge{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);background:var(--color-background);margin-bottom:var(--space-3);border:2px solid;display:inline-flex}.test-hub__exam-badge-level{font-size:var(--text-lg);font-weight:800}.test-hub__exam-badge-name{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:600}.test-hub__exam-summary{gap:var(--space-4);margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);display:flex}.test-hub__exam-stat{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary);display:flex}.test-hub__exam-stat strong{font-size:var(--text-lg);color:var(--color-text-primary);font-weight:800}.test-hub__exam-detail{padding:var(--space-3);border-radius:var(--radius-lg);background:var(--color-background);margin-top:var(--space-2)}.test-hub__exam-detail-header{font-size:var(--text-sm);margin-bottom:var(--space-1);justify-content:space-between;align-items:center;display:flex}.test-hub__exam-detail-header span{color:var(--color-text-tertiary);font-size:var(--text-xs)}.test-hub__exam-detail-teile{font-size:var(--text-xs);color:var(--color-text-secondary);font-style:italic}.test-hub__start{margin-top:var(--space-8);text-align:center}.test-hub__start-btn{padding:var(--space-3) var(--space-8);border-radius:var(--radius-full);background:linear-gradient(135deg, var(--color-primary), var(--color-secondary,#8b5cf6));color:#fff;font-weight:700;font-size:var(--text-lg);cursor:pointer;border:none;transition:all .3s;box-shadow:0 4px 15px #3b82f64d}.test-hub__start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.test-hub__start-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.test-session{max-width:800px;padding:var(--space-4);margin:0 auto}.test-session__topbar{padding:var(--space-3) var(--space-4);background:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-border);margin-bottom:var(--space-6);top:var(--space-2);z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);justify-content:space-between;align-items:center;display:flex;position:sticky}.test-session__progress-info{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:600}.test-session__progress-info span{color:var(--color-primary);font-size:var(--text-lg)}.test-session__timer{align-items:center;gap:var(--space-2);font-size:var(--text-base);font-variant-numeric:tabular-nums;font-weight:700;display:flex}.test-session__timer--warning{color:var(--color-warning,#f59e0b);animation:1s ease-in-out infinite pulse-warning}.test-session__timer--danger{color:var(--color-error,#ef4444);animation:.5s ease-in-out infinite pulse-warning}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.6}}.test-session__progress-bar{background:var(--color-border);border-radius:var(--radius-full);height:4px;margin-bottom:var(--space-6);overflow:hidden}.test-session__progress-fill{background:linear-gradient(90deg, var(--color-primary), var(--color-secondary,#8b5cf6));border-radius:var(--radius-full);height:100%;transition:width .4s}.test-question{background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);padding:var(--space-6);margin-bottom:var(--space-4);animation:.3s fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.test-question__skill-badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3);font-weight:700;display:inline-flex}.test-question__skill-badge--lesen{color:#3b82f6;background:#3b82f61a}.test-question__skill-badge--schreiben{color:#a855f7;background:#a855f71a}.test-question__passage{padding:var(--space-4);background:var(--color-background);border-radius:var(--radius-lg);border-left:4px solid var(--color-primary);margin-bottom:var(--space-4);font-size:var(--text-base);white-space:pre-line;line-height:1.7}.test-question__text{font-size:var(--text-lg);margin-bottom:var(--space-4);font-weight:600;line-height:1.5}.test-question__options{gap:var(--space-2);flex-direction:column;display:flex}.test-question__option{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:2px solid var(--color-border);background:var(--color-surface);cursor:pointer;font-size:var(--text-base);transition:all .2s;display:flex}.test-question__option:hover{border-color:var(--color-primary);background:var(--color-primary-light,#3b82f60a)}.test-question__option--selected{border-color:var(--color-primary);background:var(--color-primary-light,#3b82f614)}.test-question__option--correct{background:#22c55e14;border-color:#22c55e}.test-question__option--wrong{background:#ef444414;border-color:#ef4444}.test-question__option-letter{border-radius:var(--radius-full);background:var(--color-background);width:32px;height:32px;font-weight:700;font-size:var(--text-sm);flex-shrink:0;justify-content:center;align-items:center;display:flex}.test-question__option--selected .test-question__option-letter{background:var(--color-primary);color:#fff}.test-question__option--correct .test-question__option-letter{color:#fff;background:#22c55e}.test-question__option--wrong .test-question__option-letter{color:#fff;background:#ef4444}.test-question__tf-buttons{gap:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.test-question__tf-btn{padding:var(--space-4);border-radius:var(--radius-xl);border:2px solid var(--color-border);background:var(--color-surface);font-size:var(--text-lg);cursor:pointer;text-align:center;font-weight:700;transition:all .2s}.test-question__tf-btn:hover{border-color:var(--color-primary)}.test-question__tf-btn--selected{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.test-question__fill-input{width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:2px solid var(--color-border);background:var(--color-surface);font-size:var(--text-lg);font-weight:600;transition:border-color .2s}.test-question__fill-input:focus{border-color:var(--color-primary);outline:none}.test-question__ordering-words{gap:var(--space-2);min-height:60px;padding:var(--space-3);border-radius:var(--radius-lg);border:2px dashed var(--color-border);background:var(--color-background);flex-wrap:wrap;display:flex}.test-question__word-chip{padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);background:var(--color-primary);color:#fff;font-weight:600;font-size:var(--text-sm);cursor:grab;-webkit-user-select:none;user-select:none;transition:all .15s}.test-question__word-chip:hover{transform:scale(1.05)}.test-question__word-chip--available{background:var(--color-surface);color:var(--color-text-primary);border:1.5px solid var(--color-border)}.test-question__explanation{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:1.6;animation:.3s fadeInUp}.test-question__explanation--correct{color:#16a34a;background:#22c55e14;border:1px solid #22c55e33}.test-question__explanation--wrong{color:#dc2626;background:#ef444414;border:1px solid #ef444433}.test-session__nav{margin-top:var(--space-6);justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.test-session__nav-btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-lg);border:1.5px solid var(--color-border);background:var(--color-surface);cursor:pointer;align-items:center;gap:var(--space-2);font-weight:600;transition:all .2s;display:flex}.test-session__nav-btn:hover{border-color:var(--color-primary)}.test-session__nav-btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.test-session__nav-btn--submit{color:#fff;padding:var(--space-3) var(--space-6);font-size:var(--text-base);background:linear-gradient(135deg,#22c55e,#16a34a);border-color:#22c55e}.test-result{max-width:800px;padding:var(--space-6) var(--space-4);margin:0 auto}.test-result__hero{text-align:center;padding:var(--space-8) var(--space-4);background:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);margin-bottom:var(--space-6)}.test-result__score-circle{border-radius:var(--radius-full);width:140px;height:140px;margin:0 auto var(--space-4);border:6px solid;flex-direction:column;justify-content:center;align-items:center;font-weight:800;display:flex}.test-result__score-circle--excellent{color:#22c55e;background:#22c55e0f;border-color:#22c55e}.test-result__score-circle--good{color:#3b82f6;background:#3b82f60f;border-color:#3b82f6}.test-result__score-circle--average{color:#f59e0b;background:#f59e0b0f;border-color:#f59e0b}.test-result__score-circle--poor{color:#ef4444;background:#ef44440f;border-color:#ef4444}.test-result__score-number{font-size:var(--text-4xl);line-height:1}.test-result__score-unit{font-size:var(--text-sm);font-weight:600}.test-result__grade{font-size:var(--text-xl);margin-bottom:var(--space-2);font-weight:700}.test-result__summary{color:var(--color-text-secondary);font-size:var(--text-base)}.test-result__skills{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.test-result__skill-card{padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-border)}.test-result__skill-name{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin-bottom:var(--space-2);font-weight:600}.test-result__skill-score{font-size:var(--text-2xl);font-weight:800}.test-result__skill-detail{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:var(--space-1)}.test-result__actions{justify-content:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.test-history{margin-top:var(--space-8)}.test-history__title{font-size:var(--text-lg);margin-bottom:var(--space-4);font-weight:700}.test-history__list{gap:var(--space-2);flex-direction:column;display:flex}.test-history__item{padding:var(--space-3) var(--space-4);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);cursor:pointer;justify-content:space-between;align-items:center;transition:all .2s;display:flex}.test-history__item:hover{border-color:var(--color-primary)}@media (max-width:640px){.test-hub__level-grid{grid-template-columns:repeat(3,1fr)}.test-hub__mode-grid{grid-template-columns:1fr}.test-session__topbar{gap:var(--space-2);text-align:center;flex-direction:column}.test-result__skills{grid-template-columns:1fr}.test-result__actions{flex-direction:column}.test-question__tf-buttons{grid-template-columns:1fr}}
.gdp-hub{gap:var(--space-6);flex-direction:column;display:flex}.gdp-hub__header{justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.gdp-hub__hero{align-items:center;gap:var(--space-4);display:flex}.gdp-hub__hero-icon{font-size:3rem}.gdp-hub__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--font-extrabold);color:var(--color-text);letter-spacing:-.02em;margin:0}.gdp-hub__sub{font-size:var(--text-sm);color:var(--color-text-muted);margin:var(--space-1) 0 0}.gdp-hub__gender-chips{gap:var(--space-2);display:flex}.gdp-hub__chip{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-sm);color:#fff}.gdp-hub__chip--der{background:#3b82f6}.gdp-hub__chip--die{background:#f43f5e}.gdp-hub__chip--das{background:#10b981}.gdp-hub__section{gap:var(--space-3);flex-direction:column;display:flex}.gdp-hub__section-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text)}.gdp-hub__level-grid{gap:var(--space-3);grid-template-columns:repeat(6,1fr);display:grid}.gdp-hub__level-card{align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-3);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);flex-direction:column;display:flex}.gdp-hub__level-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.gdp-hub__level-card--selected{border-color:var(--level-color,var(--color-primary));background:color-mix(in srgb, var(--level-color,var(--color-primary)) 8%, var(--color-surface));box-shadow:var(--shadow-md)}.gdp-hub__level-card--locked{opacity:.5;cursor:not-allowed}.gdp-hub__level-card--empty{opacity:.4}.gdp-hub__level-card--empty .gdp-hub__level-count{font-style:italic}.gdp-hub__level-code{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-extrabold)}.gdp-hub__level-label{font-size:var(--text-xs);color:var(--color-text-muted)}.gdp-hub__level-count{font-size:var(--text-xs);color:var(--color-text-subtle)}.gdp-hub__mode-grid{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.gdp-hub__mode-card{align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-4);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);text-align:center;flex-direction:column;display:flex}.gdp-hub__mode-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.gdp-hub__mode-card--selected{border-color:var(--mode-color,var(--color-primary));background:color-mix(in srgb, var(--mode-color,var(--color-primary)) 8%, var(--color-surface))}.gdp-hub__mode-emoji{font-size:2rem}.gdp-hub__mode-name{font-weight:var(--font-bold);color:var(--color-text)}.gdp-hub__mode-desc{font-size:var(--text-xs);color:var(--color-text-muted);line-height:var(--leading-relaxed)}.gdp-hub__count-row{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.gdp-hub__count-stepper{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-full);align-items:center;display:flex;overflow:hidden}.gdp-hub__count-btn{width:44px;height:44px;font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text);cursor:pointer;transition:background var(--duration-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.gdp-hub__count-btn:hover:not(:disabled){background:var(--color-surface-container)}.gdp-hub__count-btn:disabled{opacity:.3;cursor:not-allowed}.gdp-hub__count-input{border:none;border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);text-align:center;width:56px;height:44px;font-size:var(--text-lg);font-weight:var(--font-bold);font-family:var(--font-display);color:var(--color-text);-moz-appearance:textfield;background:0 0;outline:none}.gdp-hub__count-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gdp-hub__count-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.gdp-hub__count-presets{gap:var(--space-2);display:flex}.gdp-hub__count-chip{padding:var(--space-1) var(--space-3);background:var(--color-surface-container-low);border:1.5px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-fast)}.gdp-hub__count-chip:hover{border-color:var(--color-primary);color:var(--color-text)}.gdp-hub__count-chip--selected{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.gdp-hub__start{text-align:center;padding:var(--space-4) 0}.gdp-hub__start-btn{align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-10);font-size:var(--text-lg);font-weight:var(--font-bold);font-family:var(--font-display);color:#fff;background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));border-radius:var(--radius-full);cursor:pointer;box-shadow:0 4px 0 var(--color-primary-dark);transition:all var(--duration-fast) var(--ease-bounce);border:none;display:inline-flex}.gdp-hub__start-btn:hover{box-shadow:0 6px 0 var(--color-primary-dark), var(--shadow-primary);transform:translateY(-2px)}.gdp-hub__start-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.gdp-hub__tips{background:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-5);border:1px solid var(--color-border)}.gdp-hub__tips-title{font-weight:var(--font-bold);margin-bottom:var(--space-3)}.gdp-hub__tips-grid{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.gdp-hub__tip{padding:var(--space-3);border-radius:var(--radius-lg);font-size:var(--text-xs);line-height:var(--leading-relaxed)}.gdp-hub__tip--der{background:#3b82f614}.gdp-hub__tip--die{background:#f43f5e14}.gdp-hub__tip--das{background:#10b98114}.gdp-hub__tip-label{font-weight:var(--font-bold);margin-bottom:var(--space-1);display:block}.gdp-hub__tip p{color:var(--color-text-muted);margin:0}.gdp-quiz{gap:var(--space-5);flex-direction:column;max-width:600px;margin:0 auto;display:flex}.gdp-quiz__header{justify-content:space-between;align-items:center;display:flex}.gdp-quiz__back{color:var(--color-text-muted);font-size:var(--text-sm);cursor:pointer;padding:var(--space-1) var(--space-2);background:0 0;border:none}.gdp-quiz__back:hover{color:var(--color-text)}.gdp-quiz__counter{font-weight:var(--font-bold);color:var(--color-text)}.gdp-quiz__streak{font-weight:var(--font-bold);color:var(--color-streak);animation:.6s ease-in-out streakPulse}.gdp-quiz__progress{background:var(--color-surface-container);border-radius:var(--radius-full);height:6px;overflow:hidden}.gdp-quiz__progress-fill{background:linear-gradient(90deg, var(--color-primary), var(--color-primary-light));border-radius:var(--radius-full);height:100%;transition:width var(--duration-normal) var(--ease-default)}.gdp-quiz__question{text-align:center;padding:var(--space-6) 0}.gdp-quiz__word-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-8) var(--space-6);box-shadow:var(--shadow-md)}.gdp-quiz__prompt{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}.gdp-quiz__word{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--font-extrabold);color:var(--color-text);letter-spacing:-.02em}.gdp-quiz__meaning{font-size:var(--text-base);color:var(--color-text-muted);margin-top:var(--space-2)}.gdp-quiz__plural{font-size:var(--text-sm);color:var(--color-text-subtle);margin-top:var(--space-1)}.gdp-quiz__options{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.gdp-quiz__option{align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-4);background:var(--color-surface);border:3px solid var(--color-border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--duration-fast) var(--ease-bounce);box-shadow:0 3px 0 var(--color-border);flex-direction:column;display:flex}.gdp-quiz__option:hover:not(:disabled){border-color:var(--article-color);box-shadow:0 6px 0 color-mix(in srgb, var(--article-color) 40%, transparent);transform:translateY(-3px)}.gdp-quiz__option:active:not(:disabled){box-shadow:none;transform:translateY(1px)}.gdp-quiz__option-emoji{font-size:1.5rem}.gdp-quiz__option-text{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-extrabold)}.gdp-quiz__option--correct{animation:correctBounce .4s var(--ease-bounce);background:#f0fdf4;box-shadow:0 3px #16a34a;border-color:#22c55e!important}.gdp-quiz__option--wrong{background:#fef2f2;animation:.4s wrongShake;box-shadow:0 3px #dc2626;border-color:#ef4444!important}.gdp-quiz__option--faded{opacity:.35}.dark .gdp-quiz__option--correct{background:#22c55e26}.dark .gdp-quiz__option--wrong{background:#ef444426}.gdp-quiz__feedback{padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);font-size:var(--text-sm);font-weight:var(--font-medium);justify-content:space-between;align-items:center;display:flex}.gdp-quiz__feedback--correct{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}.gdp-quiz__feedback--wrong{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.dark .gdp-quiz__feedback--correct{color:#86efac;background:#22c55e1a;border-color:#22c55e33}.dark .gdp-quiz__feedback--wrong{color:#fca5a5;background:#ef44441a;border-color:#ef444433}.gdp-quiz__next-btn{color:inherit;font-weight:var(--font-bold);cursor:pointer;padding:var(--space-1) var(--space-2);background:0 0;border:none}.gdp-quiz__keyboard-hint{text-align:center;font-size:var(--text-xs);color:var(--color-text-subtle)}.gdp-quiz__keyboard-hint kbd{background:var(--color-surface-container);border-radius:var(--radius-sm);font-size:var(--text-xs);border:1px solid var(--color-border);padding:2px 6px}.gdp-fill{gap:var(--space-5);flex-direction:column;max-width:600px;margin:0 auto;display:flex}.gdp-fill__header{justify-content:space-between;align-items:center;display:flex}.gdp-fill__back{color:var(--color-text-muted);font-size:var(--text-sm);cursor:pointer;background:0 0;border:none}.gdp-fill__counter{font-weight:var(--font-bold)}.gdp-fill__streak{font-weight:var(--font-bold);color:var(--color-streak)}.gdp-fill__progress{background:var(--color-surface-container);border-radius:var(--radius-full);height:6px;overflow:hidden}.gdp-fill__progress-fill{border-radius:var(--radius-full);height:100%;transition:width var(--duration-normal) var(--ease-default);background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.gdp-fill__question{text-align:center;padding:var(--space-6) 0}.gdp-fill__prompt{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}.gdp-fill__word{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--font-extrabold);color:var(--color-text)}.gdp-fill__meaning{font-size:var(--text-base);color:var(--color-text-muted);margin-top:var(--space-2)}.gdp-fill__input-row{gap:var(--space-3);align-items:stretch;display:flex}.gdp-fill__input{padding:var(--space-3) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-xl);font-size:var(--text-lg);font-weight:var(--font-semibold);text-align:center;background:var(--color-surface);color:var(--color-text);transition:border-color var(--duration-fast);flex:1}.gdp-fill__input:focus{border-color:var(--color-primary);outline:none}.gdp-fill__input--correct{background:#f0fdf4;border-color:#22c55e!important}.gdp-fill__input--wrong{background:#fef2f2;border-color:#ef4444!important}.dark .gdp-fill__input--correct{background:#22c55e1a}.dark .gdp-fill__input--wrong{background:#ef44441a}.gdp-fill__btn{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);font-weight:var(--font-bold);cursor:pointer;white-space:nowrap;border:none;display:flex}.gdp-fill__btn--check{background:var(--color-primary);color:#fff}.gdp-fill__btn--check:disabled{opacity:.5;cursor:not-allowed}.gdp-fill__btn--next{background:var(--color-primary);color:#fff}.gdp-fill__feedback{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);font-size:var(--text-sm);display:flex}.gdp-fill__feedback--correct{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}.gdp-fill__feedback--wrong{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.dark .gdp-fill__feedback--correct{color:#86efac;background:#22c55e1a}.dark .gdp-fill__feedback--wrong{color:#fca5a5;background:#ef44441a}.gdp-speed{gap:var(--space-4);max-width:600px;min-height:60vh;transition:background var(--duration-instant);flex-direction:column;justify-content:center;margin:0 auto;display:flex}.gdp-speed--flash-correct{background:#22c55e0d}.gdp-speed--flash-wrong{background:#ef44440d}.gdp-speed__timer-bar{background:var(--color-surface-container);border-radius:var(--radius-full);height:8px;overflow:hidden}.gdp-speed__timer-fill{border-radius:var(--radius-full);background:linear-gradient(90deg,#f97316,#eab308);height:100%;transition:width 1s linear}.gdp-speed__timer-fill--danger{background:linear-gradient(90deg,#ef4444,#f97316);animation:.5s infinite timerPulse}.gdp-speed__stats{justify-content:center;align-items:center;gap:var(--space-4);display:flex}.gdp-speed__time{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-extrabold);color:var(--color-text)}.gdp-speed__score{font-weight:var(--font-bold);color:#22c55e}.gdp-speed__streak{font-weight:var(--font-bold);color:var(--color-streak);animation:.6s streakPulse}.gdp-speed__word-area{text-align:center;padding:var(--space-6) 0}.gdp-speed__word{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:var(--font-extrabold);color:var(--color-text)}.gdp-speed__meaning{font-size:var(--text-base);color:var(--color-text-muted);margin-top:var(--space-2)}.gdp-speed__options{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.gdp-speed__option{align-items:center;gap:var(--space-2);padding:var(--space-5);background:var(--color-surface);border:3px solid var(--color-border);border-radius:var(--radius-xl);cursor:pointer;font-size:var(--text-xl);font-weight:var(--font-extrabold);font-family:var(--font-display);transition:all var(--duration-instant) var(--ease-bounce);box-shadow:0 3px 0 var(--color-border);flex-direction:column;display:flex}.gdp-speed__option:hover{border-color:var(--article-color);transform:translateY(-2px)}.gdp-speed__option:active{box-shadow:none;transform:translateY(2px)}.gdp-speed__ready{text-align:center;padding:var(--space-10) 0}.gdp-speed__ready-icon{margin-bottom:var(--space-4);font-size:4rem}.gdp-speed__ready-title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--font-extrabold)}.gdp-speed__ready-desc{color:var(--color-text-muted);margin:var(--space-3) 0 var(--space-6)}.gdp-speed__ready-btn{padding:var(--space-4) var(--space-10);font-size:var(--text-lg);font-weight:var(--font-bold);color:#fff;border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-bounce);background:linear-gradient(135deg,#f97316,#eab308);border:none;box-shadow:0 4px #c2410c}.gdp-speed__ready-btn:hover{transform:translateY(-2px);box-shadow:0 6px #c2410c}.gdp-speed__ready-hint{font-size:var(--text-xs);color:var(--color-text-subtle);margin-top:var(--space-4)}.gdp-speed__ready-hint kbd{background:var(--color-surface-container);border-radius:var(--radius-sm);border:1px solid var(--color-border);padding:2px 6px}.gdp-result{gap:var(--space-6);flex-direction:column;max-width:600px;margin:0 auto;display:flex}.gdp-result__hero{text-align:center;padding:var(--space-6) 0}.gdp-result__emoji{margin-bottom:var(--space-3);font-size:4rem}.gdp-result__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--font-extrabold);margin:0}.gdp-result__score{margin-top:var(--space-3)}.gdp-result__score-big{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:var(--font-extrabold);color:var(--color-text)}.gdp-result__score-detail{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1);display:block}.gdp-result__stats{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(100px,1fr));display:grid}.gdp-result__stat{align-items:center;gap:var(--space-1);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);flex-direction:column;display:flex}.gdp-result__stat-icon{font-size:1.5rem}.gdp-result__stat-value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-extrabold)}.gdp-result__stat-label{font-size:var(--text-xs);color:var(--color-text-muted)}.gdp-result__weakness{text-align:center;padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);font-size:var(--text-sm)}.gdp-result__wrong-list{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-5);overflow:hidden}.gdp-result__wrong-title{font-weight:var(--font-bold);margin-bottom:var(--space-3)}.gdp-result__wrong-items{gap:var(--space-2);flex-direction:column;display:flex}.gdp-result__wrong-item{gap:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--color-surface-container-low);border-radius:var(--radius-lg);font-size:var(--text-sm);grid-template-columns:auto 1fr 1fr auto;align-items:center;display:grid}.gdp-result__wrong-article{font-weight:var(--font-bold);min-width:28px}.gdp-result__wrong-word{font-weight:var(--font-semibold)}.gdp-result__wrong-meaning{color:var(--color-text-muted)}.gdp-result__wrong-your{color:var(--color-text-subtle);font-size:var(--text-xs)}.gdp-result__actions{gap:var(--space-3);justify-content:center;display:flex}.gdp-result__btn{padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-weight:var(--font-bold);cursor:pointer;font-size:var(--text-sm);transition:all var(--duration-fast) var(--ease-bounce);border:none}.gdp-result__btn--retry{background:var(--color-primary);color:#fff}.gdp-result__btn--retry:hover{box-shadow:var(--shadow-primary);transform:translateY(-2px)}.gdp-result__btn--back{background:var(--color-surface-container);color:var(--color-text)}.gdp-result__btn--back:hover{background:var(--color-surface-container-high)}.gdp-quiz__hint{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:var(--text-xs);background:#eab3081a;border:1px solid #eab30833;flex-direction:column;gap:2px;display:flex}.gdp-quiz__hint-examples{color:var(--color-text-subtle);font-style:italic}.gdp-rules{background:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-5);border:1px solid var(--color-border);gap:var(--space-4);flex-direction:column;display:flex}.gdp-rules__title{font-family:var(--font-display);font-weight:var(--font-bold);font-size:var(--text-lg);margin:0}.gdp-rules__intro{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed);margin:0}.gdp-rules__section{border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden}.gdp-rules__section-header{align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);background:var(--color-surface-container-low);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text);transition:background var(--duration-fast);border:none;display:flex}.gdp-rules__section-header:hover{background:var(--color-surface-container)}.gdp-rules__section-badge{border-radius:var(--radius-full);color:#fff;font-weight:var(--font-bold);font-size:var(--text-xs);padding:2px 10px}.gdp-rules__section-label{text-align:left;flex:1}.gdp-rules__section-body{padding:var(--space-4);gap:var(--space-4);flex-direction:column;display:flex}.gdp-rules__group{gap:var(--space-2);flex-direction:column;display:flex}.gdp-rules__group-title{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0}.gdp-rules__table{font-size:var(--text-xs);flex-direction:column;gap:1px;display:flex}.gdp-rules__table-head{gap:var(--space-2);padding:var(--space-2) var(--space-3);font-weight:var(--font-bold);color:var(--color-text-muted);background:var(--color-surface-container);border-radius:var(--radius-md);grid-template-columns:1fr 1fr 1fr;display:grid}.gdp-rules__table-row{gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border-subtle);grid-template-columns:1fr 1fr 1fr;align-items:center;display:grid}.gdp-rules__table-row:last-child{border-bottom:none}.gdp-rules__cat-name{font-weight:var(--font-medium);color:var(--color-text)}.gdp-rules__cat-examples{color:var(--color-text-muted)}.gdp-rules__cat-exceptions{color:var(--color-text-subtle);font-style:italic}.gdp-rules__badge-warn{margin-left:4px;font-size:10px}.gdp-rules__suffix{align-items:center;gap:4px;display:flex}.gdp-rules__suffix code{background:var(--color-surface-container);border-radius:var(--radius-sm);font-weight:var(--font-bold);padding:1px 6px}.gdp-rules__suffix-note{color:var(--color-text-subtle);font-style:italic}.gdp-rules__note{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-xs);color:var(--color-text-muted);line-height:var(--leading-relaxed);background:#eab30814;border:1px solid #eab30833}@keyframes correctBounce{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}@keyframes streakPulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes timerPulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width:640px){.gdp-hub__header{flex-direction:column;align-items:flex-start}.gdp-hub__level-grid{grid-template-columns:repeat(3,1fr)}.gdp-hub__mode-grid{grid-template-columns:1fr}.gdp-quiz__word{font-size:var(--text-3xl)}.gdp-speed__word{font-size:var(--text-4xl)}.gdp-result__wrong-item{grid-template-columns:auto 1fr}.gdp-result__wrong-meaning,.gdp-result__wrong-your{grid-column:2}.gdp-rules__table-head,.gdp-rules__table-row{grid-template-columns:1fr 1fr}.gdp-rules__cat-exceptions{grid-column:1/-1}}
.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);padding:.75rem 1rem;font-size:.9rem;font-weight:600}.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)}