.layout{flex-direction:column;min-height:100vh;display:flex}.header{z-index:var(--z-sticky);background-color:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--space-3) var(--space-4);position:sticky;top:0}.header-content{justify-content:space-between;align-items:center;gap:var(--space-4);max-width:1280px;margin:0 auto;display:flex}.logo{align-items:center;gap:var(--space-2);color:var(--color-text);text-decoration:none;display:flex}.logo:hover{text-decoration:none}.logo-text{font-size:var(--text-h2);font-weight:var(--weight-bold);background:var(--logo-blue-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.nav{flex:1;justify-content:center;display:flex}.nav-list{align-items:center;gap:var(--space-1);margin:0;padding:0;list-style:none;display:flex}.nav-link{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);color:var(--color-text-muted);border-radius:var(--radius-md);font-size:var(--text-small);font-weight:var(--weight-medium);transition:color var(--transition-fast), background-color var(--transition-fast);min-height:var(--touch-target-min);text-decoration:none;display:flex}.nav-link:hover{color:var(--color-text);background-color:color-mix(in srgb, var(--color-text) 10%, transparent)}.nav-link.active{color:var(--color-primary);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.nav-link:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.header-actions{align-items:center;gap:var(--space-2);display:flex}.theme-toggle{border-radius:var(--radius-full);width:40px;height:40px;color:var(--color-text-muted);transition:color var(--transition-fast), background-color var(--transition-fast);background-color:#0000;justify-content:center;align-items:center;display:flex}.theme-toggle:hover{color:var(--color-text);background-color:color-mix(in srgb, var(--color-text) 10%, transparent)}.mobile-menu-toggle{border-radius:var(--radius-md);width:44px;height:44px;color:var(--color-text);background-color:#0000;justify-content:center;align-items:center;display:none}@media (width<=768px){.mobile-menu-toggle{display:flex}.nav{background-color:var(--color-surface);border-left:1px solid var(--color-border);width:280px;max-width:85vw;transition:transform var(--transition-normal);z-index:var(--z-modal);padding:var(--space-6) var(--space-4);position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%)}.nav.open{transform:translate(0)}.nav-list{flex-direction:column;align-items:stretch}.nav-link{padding:var(--space-3) var(--space-4);font-size:var(--text-body);justify-content:flex-start}}.main{padding:var(--space-6) var(--space-4);flex:1}.footer{padding:var(--space-6) var(--space-4);text-align:center;color:var(--color-text-muted);font-size:var(--text-small);border-top:1px solid var(--color-border);background-color:var(--color-surface)}.text-translate-page{padding:var(--space-6) 0 var(--space-10)}.translation-page-header{margin-bottom:var(--space-6)}.translation-eyebrow{margin-bottom:var(--space-1);color:var(--color-secondary);font-size:var(--text-small);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase}.translation-page-header h1{color:var(--color-text);font-size:var(--text-h1);line-height:var(--leading-h1);margin:0}.translation-page-header>p:last-child{margin-top:var(--space-2);color:var(--color-text-muted)}.translation-workspace{padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-card-large);background:var(--color-surface);box-shadow:var(--shadow-card)}.translation-toolbar{gap:var(--space-3);grid-template-columns:1fr auto 1fr;align-items:end;display:grid}.language-swap{width:var(--touch-target-min);height:var(--touch-target-min);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-primary);background:var(--color-background);transition:background-color var(--transition-fast), border-color var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}.language-swap:hover{border-color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 10%, transparent)}.translation-register{max-width:320px;margin-top:var(--space-4)}.translation-register p{margin-top:var(--space-1);color:var(--color-text-muted);font-size:var(--text-small)}.translation-panes{gap:var(--space-4);margin-top:var(--space-6);display:grid}.translation-pane{min-width:0;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-background)}.translation-pane h2{margin:0 0 var(--space-3);color:var(--color-text);font-size:var(--text-h3);line-height:var(--leading-h3)}.source-pane .textarea{background:var(--color-surface);min-height:176px;max-height:480px;overflow-y:auto}.translation-pane-heading{min-height:var(--touch-target-min);justify-content:space-between;align-items:flex-start;gap:var(--space-3);display:flex}.translated-text,.translation-placeholder{min-height:176px;color:var(--color-text);font-size:var(--text-body);line-height:var(--leading-body);overflow-wrap:anywhere;white-space:pre-wrap;margin:0}.translation-placeholder{color:var(--color-text-muted)}.translation-skeleton{min-height:176px}.translation-skeleton span{height:var(--space-4);margin-bottom:var(--space-3);border-radius:var(--radius-full);background:linear-gradient(90deg, color-mix(in srgb, var(--color-border) 45%, transparent), color-mix(in srgb, var(--color-border) 20%, transparent), color-mix(in srgb, var(--color-border) 45%, transparent));background-size:200% 100%;animation:1.4s ease-in-out infinite skeleton-shimmer;display:block}.translation-skeleton span:nth-child(2){width:88%}.translation-skeleton span:nth-child(3){width:64%}@keyframes skeleton-shimmer{to{background-position:-200% 0}}.translation-error{align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border:1px solid var(--color-error);border-radius:var(--radius-input);color:var(--color-error);background:color-mix(in srgb, var(--color-error) 10%, transparent);display:flex}.translation-error svg{flex:none}.translation-actions{margin-top:var(--space-4);justify-content:flex-end;display:flex}@media (width>=1024px){.container:has(.translation-workspace){max-width:1120px}.translation-panes{grid-template-columns:1fr 1fr}}@media (width<=639px){.translation-toolbar{grid-template-columns:1fr}.language-swap{justify-self:center;transform:rotate(90deg)}.translation-register{max-width:none}.translation-actions .button{width:100%}}@media (prefers-reduced-motion:reduce){.translation-skeleton span{animation:none}}.voice-session-page{padding-top:var(--space-6);padding-bottom:var(--space-10)}.voice-session-grid{gap:var(--space-6);margin-top:var(--space-6);grid-template-columns:1fr;display:grid}@media (width>=1024px){.voice-session-grid{grid-template-columns:380px 1fr;align-items:start}}.config-card{top:var(--space-6);position:sticky}.config-header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.config-header h3{font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--color-text);margin:0}.connection-status{align-items:center;gap:var(--space-1);font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);background-color:color-mix(in srgb, var(--color-text-muted) 10%, transparent);display:inline-flex}.connection-status.connected{color:var(--color-success);background-color:color-mix(in srgb, var(--color-success) 10%, transparent)}.status-dot{background-color:var(--color-text-muted);border-radius:50%;width:8px;height:8px}.connection-status.connected .status-dot{background-color:var(--color-success);box-shadow:0 0 0 2px color-mix(in srgb, var(--color-success) 20%, transparent);animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.config-grid{align-items:end;gap:var(--space-3);margin-bottom:var(--space-4);grid-template-columns:1fr auto 1fr;display:grid}@media (width<=480px){.config-grid{grid-template-columns:1fr}}.swap-button{border-radius:var(--radius-full);background-color:var(--color-surface);border:1px solid var(--color-border);width:44px;height:44px;color:var(--color-text-muted);transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.swap-button:hover:not(:disabled){background-color:color-mix(in srgb, var(--color-primary) 10%, transparent);border-color:var(--color-primary);color:var(--color-primary)}.swap-button:disabled{opacity:.5;cursor:not-allowed}.mic-card{text-align:center;padding:var(--space-8) var(--space-6)}.mic-visualizer{margin-bottom:var(--space-6);justify-content:center;align-items:center;display:inline-flex;position:relative}.mic-ring{border:2px solid var(--color-primary);opacity:0;transition:all var(--transition-normal);border-radius:50%;position:absolute;inset:-16px;transform:scale(.8)}.mic-ring.recording{opacity:1;animation:1.5s ease-out infinite micPulse;transform:scale(1)}.mic-ring.playing{opacity:.6;border-color:var(--color-secondary);transform:scale(1)}@keyframes micPulse{0%{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(1.3)}}.mic-button{z-index:1;background-color:var(--color-primary);color:#fff;cursor:pointer;width:88px;height:88px;transition:all var(--transition-fast);box-shadow:var(--shadow-card);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.mic-button:hover:not(:disabled){background-color:color-mix(in srgb, var(--color-primary) 90%, black);box-shadow:var(--shadow-card-hover);transform:scale(1.02)}.mic-button:active:not(:disabled){transform:scale(.98)}.mic-button.recording{background-color:var(--color-error);animation:1s ease-in-out infinite recordingPulse}.mic-button.recording:hover:not(:disabled){background-color:color-mix(in srgb, var(--color-error) 90%, black)}@keyframes recordingPulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-error) 40%, transparent), var(--shadow-card)}50%{box-shadow:0 0 0 16px color-mix(in srgb, var(--color-error) 0%, transparent), var(--shadow-card)}}.mic-button:disabled{opacity:.5;cursor:not-allowed}.mic-button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.mic-status{font-size:var(--text-body);color:var(--color-text-muted);min-height:1.5em;margin:0}.error-banner{align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-3) var(--space-4);background-color:color-mix(in srgb, var(--color-error) 10%, transparent);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--text-small);display:inline-flex}.action-buttons{margin-top:var(--space-6)}.result-card{margin-bottom:var(--space-4)}.result-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.result-header h3{align-items:center;gap:var(--space-2);font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--color-text);margin:0;display:flex}.language-badge{min-width:40px;height:24px;padding:0 var(--space-2);font-size:var(--text-small);font-weight:var(--weight-bold);color:var(--color-primary);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent);border-radius:var(--radius-full);justify-content:center;align-items:center;display:inline-flex}.result-actions{gap:var(--space-1);display:flex}.result-content{min-height:100px}.transcript-text,.translation-text{font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text);white-space:pre-wrap;word-wrap:break-word;margin:0}.translation-text{font-weight:var(--weight-medium)}.placeholder-text{font-size:var(--text-body);color:var(--color-text-muted);margin:0;font-style:italic}.emotion-card{background:linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 10%, transparent), color-mix(in srgb, var(--color-accent-warm) 5%, transparent));border:1px solid color-mix(in srgb, var(--color-secondary) 20%, transparent)}.emotion-header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);display:flex}.emotion-icon{color:var(--color-secondary);flex-shrink:0}.emotion-label{font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--color-text)}.emotion-description{font-size:var(--text-small);color:var(--color-text-muted);margin:0}.ai-disclosure{align-items:center;gap:var(--space-2);margin-top:var(--space-8);padding:var(--space-4);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-small);color:var(--color-text-muted);display:flex}.ai-disclosure svg{color:var(--color-primary);flex-shrink:0}.speed-start-card,.speed-summary{align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-6);text-align:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-card-large);flex-direction:column;display:flex}.speed-start-card>svg,.speed-summary>svg{width:48px;height:48px;color:var(--color-accent-warm)}.speed-toggle{align-items:center;gap:var(--space-2);min-height:var(--touch-target-min);display:flex}.speed-toggle input{width:20px;height:20px;accent-color:var(--color-secondary)}.speed-primary{min-height:var(--touch-target-min);justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);color:#fff;border-radius:var(--radius-button);font-weight:var(--weight-semibold);background:#2563eb;display:inline-flex}.speed-primary:disabled,.speed-tile:disabled,.speed-abandon:disabled,.speed-recovery button:disabled{opacity:.55;cursor:not-allowed}.speed-hud{gap:var(--space-3);margin-bottom:var(--space-5);grid-template-columns:repeat(3,1fr);display:grid}.speed-hud>div{padding:var(--space-3);text-align:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-card)}.speed-hud span{color:var(--color-text-muted);font-size:var(--text-small);display:block}.speed-hud strong{justify-content:center;align-items:center;gap:var(--space-1);font-size:var(--text-h3);display:flex}.speed-hud svg{color:var(--color-accent-warm)}.speed-board-heading{margin-top:var(--space-2)}.speed-board{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.speed-column{gap:var(--space-3);flex-direction:column;display:flex}.speed-column h3{color:var(--color-text-muted);font-size:var(--text-small);text-transform:uppercase;letter-spacing:.06em}.speed-tile{justify-content:center;align-items:center;gap:var(--space-2);min-height:64px;padding:var(--space-3);overflow-wrap:anywhere;color:var(--color-text);background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-card);transition:transform var(--transition-fast), border-color var(--transition-fast);display:flex}.speed-tile:not(:disabled):hover{border-color:var(--color-secondary);transform:translateY(-2px)}.speed-tile[aria-pressed=true]{border-color:var(--color-secondary);box-shadow:inset 0 0 0 2px var(--color-secondary)}.speed-tile:disabled svg,.speed-outcome--correct{color:var(--color-success);flex:none}.speed-tile:disabled .speed-outcome--incorrect{color:var(--color-error)}.speed-feedback,.speed-recovery{align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-3);border-radius:var(--radius-button);border:1px solid;display:flex}.speed-feedback--correct{color:var(--color-success)}.speed-feedback--incorrect{color:var(--color-error)}.speed-recovery{color:var(--color-error);flex-wrap:wrap}.speed-recovery p{width:100%}.speed-recovery button,.speed-abandon{min-height:var(--touch-target-min);padding:var(--space-2) var(--space-3);color:inherit;border-radius:var(--radius-button);font-weight:var(--weight-semibold);border:1px solid}.speed-abandon{margin:var(--space-5) auto 0;color:var(--color-error);display:block}.speed-summary-score{font-size:var(--text-display);line-height:var(--leading-heading);font-weight:var(--weight-bold)}.speed-celebration{color:var(--color-accent-warm);font-weight:var(--weight-bold);animation:speed-celebrate var(--transition-slow)}@keyframes speed-celebrate{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.speed-tile,.speed-celebration{transition:none;animation:none}.speed-tile:not(:disabled):hover{transform:none}}@media (width<=480px){.speed-hud{gap:var(--space-2)}.speed-hud>div{padding:var(--space-2)}.speed-board{gap:var(--space-2)}}.listen-start-card,.listen-summary{align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-6);text-align:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-card-large);flex-direction:column;display:flex}.listen-start-card>svg,.listen-summary>svg{width:var(--space-12);height:var(--space-12);color:var(--color-accent-warm)}.listen-primary{min-height:var(--touch-target-min);justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);color:var(--color-background);background:var(--color-secondary);border:1px solid var(--color-secondary);border-radius:var(--radius-button);font-weight:var(--weight-semibold);display:inline-flex}.listen-primary:disabled{opacity:.55;cursor:not-allowed}.listen-scoreboard{gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.listen-scoreboard span{min-height:var(--touch-target-min);align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);display:inline-flex}.listen-scoreboard svg{color:var(--color-accent-warm)}.listen-scoreboard strong{color:var(--color-text)}.listen-card{padding:var(--space-6);text-align:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-card-large)}.listen-prompt{color:var(--color-text-muted);font-size:var(--text-small);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.06em}.listen-audio-btn{min-height:var(--touch-target-min);justify-content:center;align-items:center;gap:var(--space-2);margin:var(--space-4) 0;padding:var(--space-3) var(--space-5);color:var(--color-background);background:var(--color-secondary);border:1px solid var(--color-secondary);border-radius:var(--radius-button);font-weight:var(--weight-semibold);display:inline-flex}.listen-audio-btn:disabled{opacity:.55;cursor:not-allowed}.listen-options button:disabled{opacity:.65;cursor:not-allowed}.listen-feedback{justify-content:center;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-3);border-radius:var(--radius-button);animation:listen-pop var(--transition-slow);border:2px solid;flex-wrap:wrap;display:flex}.listen-feedback--correct{color:var(--color-success)}.listen-feedback--incorrect{color:var(--color-error)}.listen-feedback button,.listen-recovery button,.listen-abandon{min-height:var(--touch-target-min);padding:var(--space-2) var(--space-3);border-radius:var(--radius-button);font-weight:var(--weight-semibold);border:1px solid}.listen-feedback svg,.listen-recovery svg{flex:none}.listen-recovery{justify-content:center;gap:var(--space-2);margin-top:var(--space-4);color:var(--color-text-muted);flex-wrap:wrap;display:flex}.listen-recovery p{text-align:center;width:100%}.listen-recovery button{color:inherit}.listen-abandon{margin:var(--space-5) auto 0;color:var(--color-error);display:block}.listen-abandon:disabled{opacity:.55;cursor:not-allowed}.listen-summary-score{font-size:var(--text-display);line-height:var(--leading-heading);font-weight:var(--weight-bold)}.listen-celebration{color:var(--color-accent-warm);font-weight:var(--weight-bold);animation:listen-celebrate var(--transition-slow)}@keyframes listen-pop{0%{opacity:0;transform:scale(.98)}}@keyframes listen-celebrate{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.listen-options button,.listen-options button:hover:not(:disabled),.listen-options button:focus-visible{transition:none;transform:none}.listen-feedback,.listen-celebration,.listen-summary>svg{animation:none}}@media (width<=480px){.listen-options{grid-template-columns:1fr}.listen-card{padding:var(--space-4)}}.scramble-start-card,.scramble-summary,.scramble-empty{align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-6);text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card-large);flex-direction:column;display:flex}.scramble-start-card>svg,.scramble-summary>svg,.scramble-empty>svg{width:var(--space-12);height:var(--space-12);color:var(--color-accent-warm)}.scramble-toggle{align-items:center;gap:var(--space-2);min-height:var(--touch-target-min);display:flex}.scramble-toggle input{width:var(--space-5);height:var(--space-5);accent-color:var(--color-secondary)}.scramble-primary,.scramble-secondary,.scramble-recovery button,.scramble-abandon{min-height:var(--touch-target-min);justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-button);font-weight:var(--weight-semibold);display:inline-flex}.scramble-primary{color:var(--color-background);background:var(--color-secondary)}.scramble-secondary{color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border)}.scramble-primary:disabled,.scramble-secondary:disabled,.scramble-token:disabled,.scramble-recovery button:disabled,.scramble-abandon:disabled{opacity:.55;cursor:not-allowed}.scramble-hud{gap:var(--space-3);margin-bottom:var(--space-5);grid-template-columns:repeat(3,1fr);display:grid}.scramble-hud>div{padding:var(--space-3);text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card)}.scramble-hud span{color:var(--color-text-muted);font-size:var(--text-small);display:block}.scramble-hud strong{justify-content:center;align-items:center;gap:var(--space-1);font-size:var(--text-h3);display:flex}.scramble-hud svg{color:var(--color-accent-warm)}.scramble-feedback,.scramble-recovery{align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-3);border-radius:var(--radius-button);border:1px solid;display:flex}.scramble-feedback--correct{color:var(--color-success);animation:scramble-correct var(--transition-slow)}.scramble-feedback--incorrect,.scramble-recovery{color:var(--color-error)}.scramble-feedback svg,.scramble-recovery svg{flex:none}.scramble-recovery{flex-wrap:wrap}.scramble-recovery p{width:100%}.scramble-recovery button{color:inherit;border:1px solid}.scramble-order,.scramble-bank{margin-top:var(--space-5);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card-large)}.scramble-order h3,.scramble-bank h3{margin-bottom:var(--space-3);color:var(--color-text-muted);font-size:var(--text-small);text-transform:uppercase;letter-spacing:.06em}.scramble-token-row{min-height:var(--touch-target-min);align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.scramble-token{min-height:var(--touch-target-min);align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);color:var(--color-text);background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-button);box-shadow:var(--shadow-card);transition:transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);display:inline-flex}.scramble-token:not(:disabled):hover{border-color:var(--color-secondary);box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.scramble-token:active:not(:disabled){transform:scale(.98)}.scramble-token--placed{border-color:var(--color-secondary)}.scramble-token svg{width:var(--space-4);height:var(--space-4);color:var(--color-secondary)}.scramble-position{min-width:var(--space-6);min-height:var(--space-6);color:var(--color-background);background:var(--color-secondary);border-radius:var(--radius-full);font-size:var(--text-small);font-weight:var(--weight-bold);justify-content:center;align-items:center;display:inline-flex}.scramble-placeholder,.scramble-progress{color:var(--color-text-muted)}.scramble-progress{margin-top:var(--space-3);font-size:var(--text-small)}.scramble-actions{gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap;display:flex}.scramble-abandon{margin:var(--space-5) auto 0;color:var(--color-error);border:1px solid;display:flex}.scramble-summary-score{font-size:var(--text-display);line-height:var(--leading-display);font-weight:var(--weight-bold)}.scramble-celebration{color:var(--color-accent-warm);font-weight:var(--weight-bold);animation:scramble-celebrate var(--transition-slow)}@keyframes scramble-correct{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes scramble-celebrate{0%{transform:translateY(var(--space-2));opacity:0}to{transform:translateY(var(--space-0));opacity:1}}@media (prefers-reduced-motion:reduce){.scramble-token,.scramble-feedback--correct,.scramble-celebration{transition:none;animation:none}.scramble-token:not(:disabled):hover,.scramble-token:active:not(:disabled){transform:none}}@media (width<=480px){.scramble-hud{gap:var(--space-2)}.scramble-hud>div,.scramble-order,.scramble-bank{padding:var(--space-2)}.scramble-actions>button{width:100%}}.learning-page{padding-top:var(--space-8);padding-bottom:var(--space-12)}.learning-header{margin-bottom:var(--space-6)}.learning-header h1{font-size:var(--text-h1);line-height:var(--leading-heading);margin:var(--space-1) 0 var(--space-2)}.learning-header p,.learning-section-heading p,.drill-caption{color:var(--color-text-muted)}.learning-eyebrow{color:var(--color-accent-warm);font-size:var(--text-small);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.08em}.learning-tabs{gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.learning-tabs button{min-height:var(--touch-target-min);padding:var(--space-2) var(--space-4);color:var(--color-text-muted);font-weight:var(--weight-semibold);border-bottom:3px solid #0000}.learning-tabs button[aria-selected=true]{color:var(--color-secondary);border-color:var(--color-secondary)}.learning-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6)}.learning-section-heading{justify-content:space-between;align-items:start;gap:var(--space-4);margin-bottom:var(--space-5);display:flex}.learning-section-heading h2{font-size:var(--text-h2);margin-bottom:var(--space-1)}.learning-count{color:var(--color-secondary);background:color-mix(in srgb, var(--color-secondary) 12%, transparent);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);font-size:var(--text-small);font-weight:var(--weight-semibold);flex:none}.learning-notice{gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4);align-items:center;display:flex}.learning-notice svg{flex:none}.learning-notice--error{color:var(--color-error);border:1px solid var(--color-error)}.learning-notice--success{color:var(--color-success);border:1px solid var(--color-success)}.flashcard{justify-content:center;align-items:center;gap:var(--space-4);width:100%;min-height:280px;padding:var(--space-6);color:var(--color-text);background:var(--color-background);border:2px solid var(--color-secondary);border-radius:var(--radius-xl);transition:transform var(--transition-normal), background var(--transition-normal);flex-direction:column;display:flex}.flashcard:hover{transform:translateY(-4px)}.flashcard--revealed{background:color-mix(in srgb, var(--color-accent-warm) 6%, var(--color-background));border-color:var(--color-accent-warm)}.flashcard-label{color:var(--color-text-muted);font-size:var(--text-small);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.06em}.flashcard-text{font-size:var(--text-display);line-height:var(--leading-heading);font-weight:var(--weight-bold);overflow-wrap:anywhere}.flashcard-hint{align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--text-small);display:flex}.review-actions{gap:var(--space-3);margin-top:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.review-button,.play-button,.record-button{min-height:var(--touch-target-min);justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-weight:var(--weight-semibold);border:1px solid;display:inline-flex}.review-button--incorrect{color:var(--color-error)}.review-button--correct{color:var(--color-success)}.review-button:disabled,.play-button:disabled,.record-button:disabled{opacity:.55;cursor:not-allowed}.drill-actions{gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;justify-content:center;display:flex}.record-button{color:var(--color-secondary);background:color-mix(in srgb, var(--color-secondary) 8%, transparent)}.record-button--active{color:var(--color-error);background:color-mix(in srgb, var(--color-error) 10%, transparent);border-color:var(--color-error)}.drill-recording-indicator{align-items:center;gap:var(--space-2);margin-top:var(--space-3);color:var(--color-error);font-weight:var(--weight-semibold);display:inline-flex}.drill-recording-dot{background:currentColor;border-radius:50%;width:10px;height:10px;animation:1s ease-in-out infinite drill-pulse}@keyframes drill-pulse{0%,to{opacity:1}50%{opacity:.35}}.learning-empty{text-align:center;justify-content:center;align-items:center;gap:var(--space-2);min-height:220px;color:var(--color-text-muted);flex-direction:column;display:flex}.learning-empty h3{color:var(--color-text)}.drill-card{text-align:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-6)}.drill-prompt{margin:var(--space-3) 0 var(--space-2);color:var(--color-text-muted)}.drill-cue{margin:0 0 var(--space-3);font-size:var(--text-small);color:var(--color-text-muted)}.drill-text{font-size:var(--text-display);line-height:var(--leading-heading);font-weight:var(--weight-bold);margin-bottom:var(--space-6);overflow-wrap:anywhere}.play-button{color:#fff;background:var(--color-secondary);border-color:var(--color-secondary);min-width:160px}.drill-caption{margin-top:var(--space-3);font-size:var(--text-small)}.game-scoreboard{gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.game-scoreboard span{min-height:var(--touch-target-min);align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);display:inline-flex}.game-scoreboard svg{color:var(--color-accent-warm)}.game-scoreboard strong{color:var(--color-text)}.listen-pick-card{padding:var(--space-6);text-align:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-xl)}.listen-audio-button,.listen-action-button{min-height:var(--touch-target-min);justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);color:#fff;background:var(--color-secondary);border:1px solid var(--color-secondary);border-radius:var(--radius-md);font-weight:var(--weight-semibold);display:inline-flex}.listen-audio-button{margin:var(--space-4) 0}.listen-audio-button:disabled{opacity:.55}.listen-visible-label{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-small);font-weight:var(--weight-semibold)}.listen-visible-text{margin:var(--space-1) 0 var(--space-5);font-size:var(--text-h2);font-weight:var(--weight-bold);overflow-wrap:anywhere}.listen-options{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.listen-options button{min-height:64px;padding:var(--space-3);color:var(--color-text);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);font-weight:var(--weight-semibold);overflow-wrap:anywhere;transition:transform var(--transition-fast), border-color var(--transition-fast)}.listen-options button:hover:not(:disabled),.listen-options button:focus-visible{border-color:var(--color-secondary);transform:translateY(-2px)}.listen-options button:disabled{opacity:.65}.answer-feedback{justify-content:center;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-3);border-radius:var(--radius-md);animation:answer-pop var(--transition-slow);border:2px solid;flex-wrap:wrap;display:flex}.answer-feedback--correct{color:var(--color-success)}.answer-feedback--incorrect{color:var(--color-error)}.answer-feedback button,.game-recovery-actions button{min-height:var(--touch-target-min);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-weight:var(--weight-semibold);border:1px solid}.game-recovery-actions{justify-content:center;gap:var(--space-2);margin-top:var(--space-4);color:var(--color-text-muted);flex-wrap:wrap;display:flex}.round-complete{justify-content:center;align-items:center;gap:var(--space-3);text-align:center;flex-direction:column;min-height:320px;display:flex}.round-complete>svg{width:56px;height:56px;color:var(--color-accent-warm);animation:celebration-pop var(--transition-slow)}@keyframes answer-pop{0%{opacity:0;transform:scale(.98)}}@keyframes celebration-pop{0%{opacity:0;transform:scale(.8)}}@media (prefers-reduced-motion:reduce){.flashcard{transition:none}.flashcard:hover{transform:none}.listen-options button,.listen-options button:hover:not(:disabled),.listen-options button:focus-visible{transition:none;transform:none}.answer-feedback,.round-complete>svg{animation:none}.drill-recording-dot{opacity:1;animation:none}}@media (width<=480px){.learning-panel{padding:var(--space-4)}.review-actions{grid-template-columns:1fr}.flashcard-text,.drill-text{font-size:var(--text-h1)}.listen-options{grid-template-columns:1fr}.listen-pick-card{padding:var(--space-4)}}.ghost-setup,.ghost-playing,.ghost-complete{padding-top:var(--space-8);padding-bottom:var(--space-12)}.ghost-header{margin-bottom:var(--space-8);text-align:center}.ghost-header h1{font-size:var(--text-h1);line-height:var(--leading-heading);margin:var(--space-2) 0 var(--space-2)}.ghost-header p{color:var(--color-text-muted);max-width:480px;margin:0 auto}.ghost-eyebrow{align-items:center;gap:var(--space-2);color:var(--color-accent-warm);font-size:var(--text-small);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.08em;display:inline-flex}.ghost-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card-large);padding:var(--space-8);max-width:480px;margin:0 auto}.ghost-option-group{margin-bottom:var(--space-6)}.ghost-label{font-size:var(--text-small);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2);display:block}.ghost-toggle{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.ghost-toggle button{min-height:var(--touch-target-min);justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-background);color:var(--color-text-muted);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);display:inline-flex}.ghost-toggle button[aria-checked=true]{border-color:var(--color-primary);color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 8%, var(--color-background))}.ghost-toggle button:hover{border-color:var(--color-primary)}.ghost-start-button{width:100%;min-height:var(--touch-target-min);justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-primary);color:#fff;border-radius:var(--radius-button);font-weight:var(--weight-semibold);font-size:var(--text-button);cursor:pointer;transition:opacity var(--transition-fast);border:none;display:inline-flex}.ghost-start-button:disabled{opacity:.55;cursor:not-allowed}.ghost-start-button:hover:not(:disabled){opacity:.9}.ghost-progress-header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.ghost-progress-text{color:var(--color-text-muted);font-size:var(--text-small);font-weight:var(--weight-semibold)}.ghost-timer{align-items:center;gap:var(--space-1);color:var(--color-accent-warm);font-weight:var(--weight-bold);font-size:var(--text-h3);font-variant-numeric:tabular-nums;display:inline-flex}.ghost-bar{margin-bottom:var(--space-4)}.ghost-bar-track{background:var(--color-border);border-radius:var(--radius-full);height:8px;position:relative;overflow:visible}.ghost-bar-fill{background:linear-gradient(90deg, var(--color-secondary), var(--color-accent-warm));border-radius:var(--radius-full);height:100%;transition:width var(--transition-normal) ease}.ghost-bar-icon{color:var(--color-accent-warm);transition:left var(--transition-normal) ease;position:absolute;top:50%;transform:translateY(-50%)}.ghost-bar-label{margin-top:var(--space-1);font-size:var(--text-small);color:var(--color-text-muted);display:block}.ghost-question-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card-large);padding:var(--space-6);margin-bottom:var(--space-4)}.ghost-prompt{font-size:var(--text-h2);font-weight:var(--weight-semibold);margin-bottom:var(--space-4);line-height:var(--leading-h2)}.ghost-options{gap:var(--space-2);flex-direction:column;display:flex}.ghost-option-button{width:100%;min-height:var(--touch-target-min);text-align:left;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-background);color:var(--color-text);font-size:var(--text-body);cursor:pointer;transition:all var(--transition-fast)}.ghost-option-button:hover,.ghost-option-button--selected{border-color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 6%, var(--color-background))}.ghost-blank-form{gap:var(--space-3);flex-direction:column;display:flex}.ghost-sentence{font-size:var(--text-h3);line-height:var(--leading-h3);color:var(--color-text);padding:var(--space-3);background:var(--color-background);border-radius:var(--radius-input);border:1px solid var(--color-border)}.ghost-input-row{gap:var(--space-2);display:flex}.ghost-text-input{min-height:var(--touch-target-min);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-background);color:var(--color-text);font-size:var(--text-body);flex:1}.ghost-text-input:focus{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.ghost-submit-answer{min-height:var(--touch-target-min);padding:var(--space-2) var(--space-5);background:var(--color-primary);color:#fff;border-radius:var(--radius-button);font-weight:var(--weight-semibold);cursor:pointer;white-space:nowrap;border:none}.ghost-submit-answer:disabled{opacity:.55;cursor:not-allowed}.ghost-comparison{align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-2) var(--space-3);background:color-mix(in srgb, var(--color-accent-warm) 8%, var(--color-background));border-radius:var(--radius-input);color:var(--color-accent-warm);font-size:var(--text-small);display:flex}.ghost-feedback{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-weight:var(--weight-semibold);display:flex}.ghost-feedback--correct{color:var(--color-success);background:color-mix(in srgb, var(--color-success) 10%, var(--color-background));border:1px solid var(--color-success)}.ghost-feedback--incorrect{color:var(--color-error);background:color-mix(in srgb, var(--color-error) 10%, var(--color-background));border:1px solid var(--color-error)}.ghost-combo-badge{margin-left:var(--space-2);padding:0 var(--space-2);background:var(--color-accent-warm);color:#fff;border-radius:var(--radius-full);font-size:var(--text-small);animation:ghost-pulse var(--transition-slow) ease;display:inline-block}.ghost-correct-answer{font-weight:var(--weight-bold)}.ghost-notice{align-items:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4);display:flex}.ghost-notice--error{color:var(--color-error);border:1px solid var(--color-error)}.ghost-celebration{text-align:center;margin-bottom:var(--space-8);animation:ghost-fade-in var(--transition-slow) ease}.ghost-celebration h1{font-size:var(--text-display);margin:var(--space-3) 0}.ghost-pb-badge{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:color-mix(in srgb, var(--color-accent-warm) 15%, var(--color-background));color:var(--color-accent-warm);border-radius:var(--radius-full);font-weight:var(--weight-bold);animation:ghost-pulse var(--transition-slow) ease infinite;display:inline-flex}.ghost-stats-grid{gap:var(--space-3);margin-bottom:var(--space-8);grid-template-columns:repeat(4,1fr);display:grid}.ghost-stat{text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-4)}.ghost-stat-value{justify-content:center;align-items:center;gap:var(--space-1);font-size:var(--text-h2);font-weight:var(--weight-bold);color:var(--color-text);margin-bottom:var(--space-1);display:flex}.ghost-stat-label{font-size:var(--text-small);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.ghost-answers-review{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card-large);padding:var(--space-6);margin-bottom:var(--space-6)}.ghost-answers-review h3{font-size:var(--text-h3);margin-bottom:var(--space-4)}.ghost-review-row{padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-2);border-left:3px solid #0000}.ghost-review-row--correct{border-left-color:var(--color-success);background:color-mix(in srgb, var(--color-success) 4%, var(--color-surface))}.ghost-review-row--incorrect{border-left-color:var(--color-error);background:color-mix(in srgb, var(--color-error) 4%, var(--color-surface))}.ghost-review-q{align-items:center;gap:var(--space-2);font-weight:var(--weight-semibold);margin-bottom:var(--space-1);display:flex}.ghost-review-num{color:var(--color-text-muted);font-weight:var(--weight-regular)}.ghost-review-detail{align-items:center;gap:var(--space-3);margin-left:var(--space-8);font-size:var(--text-small);color:var(--color-text-muted);display:flex}.ghost-review-ghost{color:var(--color-accent-warm)}.ghost-restart-button{max-width:280px;margin:0 auto}.ghost-loading{text-align:center;padding:var(--space-12);color:var(--color-text-muted);font-size:var(--text-h3)}@media (prefers-reduced-motion:reduce){.ghost-bar-fill,.ghost-bar-icon{transition:none}.ghost-celebration,.ghost-pb-badge,.ghost-combo-badge{animation:none}}@media (width<=480px){.ghost-stats-grid{grid-template-columns:repeat(2,1fr)}.ghost-card{padding:var(--space-4)}}.history-page{min-height:100vh}.page-header{margin-bottom:var(--space-6)}.page-header h1{font-size:var(--text-h1);font-weight:var(--weight-bold);color:var(--color-text);margin-bottom:var(--space-1)}.page-description{color:var(--color-text-muted);font-size:var(--text-body)}.history-toolbar{justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);padding:var(--space-4);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);flex-wrap:wrap;display:flex}.deletion-notice{align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex}.deletion-notice--success{color:var(--color-secondary)}.deletion-notice--pending{color:var(--color-accent-warm)}.deletion-notice--error{color:var(--color-error)}.modal-cascade{font-weight:var(--weight-medium)}.filter-group{flex:1;min-width:200px}.filter-select{width:100%;padding:var(--space-2) var(--space-3);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-10);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.filter-select:hover{border-color:var(--color-text-muted)}.filter-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);outline:none}.results-count{font-size:var(--text-small);color:var(--color-text-muted);white-space:nowrap}.error-banner{padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);background-color:color-mix(in srgb, var(--color-error) 10%, transparent);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--text-small)}.history-loading{padding:var(--space-16) var(--space-4);text-align:center;color:var(--color-text-muted);flex-direction:column;justify-content:center;align-items:center;display:flex}.history-loading .spinner{color:var(--color-primary)}.history-empty{padding:var(--space-16) var(--space-4);text-align:center;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-icon{color:var(--color-text-muted);margin-bottom:var(--space-4)}.history-empty h2{font-size:var(--text-h2);font-weight:var(--weight-semibold);color:var(--color-text);margin-bottom:var(--space-2)}.history-empty p{color:var(--color-text-muted);max-width:400px}.history-list{margin-bottom:var(--space-6)}.history-item{padding:var(--space-4)}.history-item-header{margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.history-type-badge{align-items:center;gap:var(--space-2);font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--color-text);display:flex}.history-meta{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.history-date{align-items:center;gap:var(--space-1);font-size:var(--text-small);color:var(--color-text-muted);display:flex}.history-date time{white-space:nowrap}.history-languages{font-size:var(--text-small);color:var(--color-text-muted);font-family:var(--font-mono)}.history-register{font-size:var(--text-small);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);background-color:var(--color-surface);border:1px solid var(--color-border);text-transform:capitalize}.history-register.register-auto{color:var(--color-text-muted)}.history-register.register-formal{color:var(--color-primary);background-color:color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));border-color:color-mix(in srgb, var(--color-primary) 30%, var(--color-border))}.history-register.register-casual{color:var(--color-secondary);background-color:color-mix(in srgb, var(--color-secondary) 10%, var(--color-surface));border-color:color-mix(in srgb, var(--color-secondary) 30%, var(--color-border))}.history-content{gap:var(--space-3);flex-direction:column;display:flex}.history-source,.history-translation{gap:var(--space-1);flex-direction:column;display:flex}.history-label{font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--color-text-muted)}.history-text{font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text);word-wrap:break-word;background-color:var(--color-surface);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);margin:0}.translation-row{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.copy-button{padding:var(--space-1);flex-shrink:0}.history-actions{padding-top:var(--space-3);border-top:1px solid var(--color-border);justify-content:flex-end;display:flex}.history-actions .button{align-items:center;gap:var(--space-2);display:inline-flex}.pagination{justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-4);display:flex}.page-info{font-size:var(--text-small);color:var(--color-text-muted);white-space:nowrap}.modal-overlay{background-color:var(--color-overlay);padding:var(--space-4);z-index:var(--z-modal);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card-large);box-shadow:var(--shadow-modal);width:100%;max-width:400px}@media (prefers-reduced-motion:no-preference){.history-loading .spinner{animation:1s linear infinite spin}.modal-overlay{animation:fadeIn var(--transition-fast) ease}.modal{animation:slideUp var(--transition-normal) ease}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}}.modal-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:var(--text-h2);font-weight:var(--weight-semibold);color:var(--color-text);margin:0}.modal-close{border-radius:var(--radius-full);width:36px;height:36px;color:var(--color-text-muted);transition:color var(--transition-fast), background-color var(--transition-fast);background-color:#0000;justify-content:center;align-items:center;display:flex}.modal-close:hover:not(:disabled){color:var(--color-text);background-color:color-mix(in srgb, var(--color-text) 10%, transparent)}.modal-body{padding:var(--space-4) var(--space-5)}.modal-body p{margin:0 0 var(--space-2);color:var(--color-text);line-height:var(--leading-body)}.modal-body p:last-child{margin-bottom:0}.modal-warning{font-size:var(--text-small);color:var(--color-text-muted)}.modal-footer{justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);display:flex}.modal-footer .button{align-items:center;gap:var(--space-2);display:inline-flex}@media (width<=640px){.history-toolbar{flex-direction:column;align-items:stretch}.filter-group{width:100%}.results-count{text-align:center}.history-meta{gap:var(--space-2)}.translation-row{flex-direction:column;align-items:flex-start}.copy-button{align-self:flex-start}.modal-footer{flex-direction:column-reverse}.modal-footer .button{justify-content:center;width:100%}}.ocr-translate-page{max-width:720px}.page-header{margin-bottom:var(--space-8);text-align:center}.page-header h1{font-size:var(--text-h1);font-weight:var(--weight-bold);line-height:var(--leading-h1);color:var(--color-text);margin-bottom:var(--space-2)}.page-description{font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text-muted);max-width:560px;margin:0 auto}.error-banner{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background-color:color-mix(in srgb, var(--color-error) 10%, transparent);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--text-small);margin-bottom:var(--space-6);animation:slide-down var(--transition-normal) ease-out;display:flex}.error-banner svg{flex-shrink:0}.error-dismiss{border-radius:var(--radius-full);width:28px;height:28px;color:var(--color-error);transition:background-color var(--transition-fast);background-color:#0000;justify-content:center;align-items:center;margin-left:auto;display:flex}.error-dismiss:hover{background-color:color-mix(in srgb, var(--color-error) 15%, transparent)}@keyframes slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius-card);padding:var(--space-12) var(--space-6);text-align:center;background-color:var(--color-surface);transition:border-color var(--transition-fast), background-color var(--transition-fast);cursor:pointer;justify-content:center;align-items:center;min-height:320px;display:flex}.drop-zone:hover,.drop-zone:focus-within{border-color:var(--color-primary);background-color:color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))}.drop-zone:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.drop-zone-content{align-items:center;gap:var(--space-4);flex-direction:column;width:100%;max-width:320px;display:flex}.capture-actions{justify-content:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.capture-actions button{min-height:44px}.drop-zone-content svg{color:var(--color-text-muted);transition:color var(--transition-fast)}.drop-zone:hover .drop-zone-content svg,.drop-zone:focus-within .drop-zone-content svg{color:var(--color-primary)}.drop-zone-content h2{font-size:var(--text-h2);font-weight:var(--weight-semibold);color:var(--color-text);margin:0}.drop-zone-hint{font-size:var(--text-small);color:var(--color-text-muted);margin:0}.file-input{opacity:0;z-index:-1;width:.1px;height:.1px;position:absolute;overflow:hidden}.image-preview-wrapper{margin-bottom:var(--space-6);border-radius:var(--radius-card);background-color:var(--color-surface);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.image-preview{object-fit:contain;width:100%;max-height:60vh;display:block}.image-canvas{background-color:var(--color-background);display:grid}.image-canvas>*{grid-area:1/1}.confidence-overlay{pointer-events:none;width:100%;height:100%}.confidence-overlay rect{fill:color-mix(in srgb, var(--color-accent-warm) 20%, transparent);stroke:var(--color-accent-warm);stroke-width:3px;vector-effect:non-scaling-stroke}.image-actions{gap:var(--space-2);padding:var(--space-3);background-color:color-mix(in srgb, var(--color-surface) 95%, transparent);border-top:1px solid var(--color-border);flex-wrap:wrap;display:flex}.translate-form{gap:var(--space-5);margin-bottom:var(--space-8);flex-direction:column;display:flex}.translate-form>.select-wrapper:last-of-type{margin-bottom:var(--space-2)}.translate-btn{width:100%;margin-top:var(--space-2)}.results-skeleton{gap:var(--space-3);margin-bottom:var(--space-8);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-card);background-color:var(--color-surface);display:grid}.skeleton-line{border-radius:var(--radius-sm);background:linear-gradient(90deg, var(--color-border), color-mix(in srgb, var(--color-border) 45%, var(--color-surface)), var(--color-border));background-size:200% 100%;height:18px;animation:1.2s ease-in-out infinite skeleton-pulse}.skeleton-line-short{width:45%}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.results-section{animation:fade-in var(--transition-normal) ease-out}.retake-notice{align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);padding:var(--space-4);border:1px solid var(--color-accent-warm);border-radius:var(--radius-md);color:var(--color-text);background-color:color-mix(in srgb, var(--color-accent-warm) 10%, var(--color-surface));display:flex}.retake-notice span{flex:1}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.results-header{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);flex-wrap:wrap;display:flex}.results-header h2{font-size:var(--text-h2);font-weight:var(--weight-semibold);color:var(--color-text);margin:0}.results-meta{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.confidence-badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--text-small);font-weight:var(--weight-medium);border-radius:var(--radius-full);background-color:color-mix(in srgb, var(--color-success) 15%, transparent);color:var(--color-success);display:inline-flex}.confidence-badge.low{background-color:color-mix(in srgb, var(--color-accent-warm) 15%, transparent);color:var(--color-accent-warm)}.result-lang{font-size:var(--text-small);color:var(--color-text-muted);margin:0}.results-tabs{gap:var(--space-1);margin-bottom:var(--space-4);background-color:var(--color-surface);padding:var(--space-1);border-radius:var(--radius-md);display:flex}.results-tab{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--color-text-muted);border-radius:var(--radius-input);cursor:pointer;transition:all var(--transition-fast);background-color:#0000;border:none;display:flex}.results-tab:hover{color:var(--color-text);background-color:color-mix(in srgb, var(--color-text) 8%, transparent)}.results-tab.active{color:var(--color-primary);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.results-tab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.results-content{min-height:120px}.result-panel{animation:fade-in var(--transition-fast) ease-out}.result-panel-header{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.result-panel-header h3{font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--color-text);margin:0}.result-text{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text);white-space:pre-wrap;word-wrap:break-word;min-height:100px;max-height:400px;overflow-y:auto}.result-text.extracted{font-family:var(--font-mono);font-size:var(--text-small);line-height:var(--leading-body)}.low-confidence-notice{align-items:flex-start;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-3);font-size:var(--text-small);color:var(--color-accent-warm);background-color:color-mix(in srgb, var(--color-accent-warm) 10%, transparent);border:1px solid color-mix(in srgb, var(--color-accent-warm) 30%, transparent);border-radius:var(--radius-md);display:flex}.low-confidence-notice svg{flex-shrink:0;margin-top:2px}@media (width<=640px){.drop-zone{min-height:280px;padding:var(--space-8) var(--space-4)}.drop-zone-content h2{font-size:var(--text-h3)}.image-actions{flex-direction:column}.retake-notice{flex-wrap:wrap;align-items:flex-start}.image-actions button{justify-content:center;width:100%}.results-header{flex-direction:column;align-items:flex-start}.results-meta{justify-content:space-between;width:100%}.results-tabs{flex-direction:column}.results-tab{justify-content:center}}.login-page,.auth-loading{min-height:100vh;padding:var(--space-6) var(--space-4);background:radial-gradient(circle at top, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 44%), var(--color-background);place-items:center;display:grid}.login-card{gap:var(--space-4);width:min(100%,460px);padding:var(--space-6);display:grid}.login-card--status{text-align:center}.login-brand{color:var(--color-primary);font-size:var(--text-h2);font-weight:var(--weight-bold)}.login-intro,.login-hint{color:var(--color-text-muted)}.login-form{gap:var(--space-3);display:grid}.login-form label{font-weight:var(--weight-medium)}.login-form input{width:100%;min-height:var(--touch-target-min);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.login-form .button{width:100%}.login-form .button-content{justify-content:center;align-items:center;gap:var(--space-2);display:inline-flex}.login-divider{align-items:center;gap:var(--space-3);color:var(--color-text-muted);grid-template-columns:1fr auto 1fr;display:grid}.login-divider:before,.login-divider:after{content:"";border-top:1px solid var(--color-border)}.login-message{color:var(--color-success)}.login-error{color:var(--color-error)}.settings-page{gap:var(--space-6);width:min(100%,720px);margin:0 auto;display:grid}.settings-heading{gap:var(--space-2);display:grid}.settings-heading p,.settings-card-heading p,.settings-hint{color:var(--color-text-muted)}.settings-card{gap:var(--space-5);padding:var(--space-6);display:grid}.settings-card-heading{align-items:flex-start;gap:var(--space-3);display:flex}.settings-card-heading>svg{color:var(--color-primary);flex:none}.settings-card-heading>div{gap:var(--space-2);display:grid}.settings-card .button{justify-self:start}.settings-card .button-content{align-items:center;gap:var(--space-2);display:inline-flex}.settings-success{color:var(--color-success)}.settings-error{color:var(--color-error)}@media (width<=480px){.settings-card{padding:var(--space-4)}.settings-card .button{width:100%}}@media (prefers-color-scheme:dark){:root{--color-primary:#60a5fa;--color-secondary:#2dd4bf;--color-accent-warm:#fb923c;--color-background:#0f172a;--color-surface:#1e293b;--color-text:#f8fafc;--color-text-muted:#94a3b8;--color-border:#64748b;--color-link-visited:#c4b5fd;--color-error:#f87171;--color-success:#4ade80}}.label{font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--color-text);margin-bottom:var(--space-2);display:block}.textarea{width:100%;min-height:120px;padding:var(--space-3) var(--space-4);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);resize:vertical;transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.textarea:hover{border-color:var(--color-text-muted)}.textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);outline:none}.textarea.error{border-color:var(--color-error)}.textarea.error:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent)}.textarea::placeholder{color:var(--color-text-muted)}.textarea:disabled{opacity:.6;cursor:not-allowed}.select{width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-10);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.select:hover{border-color:var(--color-text-muted)}.select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);outline:none}.select.error{border-color:var(--color-error)}.select.error:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent)}.select:disabled{opacity:.6;cursor:not-allowed}.hint{margin-top:var(--space-1);font-size:var(--text-small);color:var(--color-text-muted)}.error-message{margin-top:var(--space-1);font-size:var(--text-small);color:var(--color-error)}.button{justify-content:center;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-weight:var(--weight-semibold);border-radius:var(--radius-md);transition:all var(--transition-fast);min-height:var(--touch-target-min);white-space:nowrap;display:inline-flex}.button:disabled,.button.disabled{opacity:.5;cursor:not-allowed}.button--primary{background-color:var(--color-primary);color:#fff;border:none}.button--primary:hover:not(:disabled){background-color:color-mix(in srgb, var(--color-primary) 90%, black)}.button--primary:active:not(:disabled){background-color:color-mix(in srgb, var(--color-primary) 80%, black)}.button--secondary{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.button--secondary:hover:not(:disabled){background-color:color-mix(in srgb, var(--color-surface) 90%, var(--color-border))}.button--destructive{background-color:var(--color-error);color:#fff;border:none}.button--destructive:hover:not(:disabled){background-color:color-mix(in srgb, var(--color-error) 90%, black)}.button--ghost{color:var(--color-text);background-color:#0000;border:none}.button--ghost:hover:not(:disabled){background-color:color-mix(in srgb, var(--color-text) 10%, transparent)}.button--sm{padding:var(--space-2) var(--space-3);font-size:var(--text-small)}.button--md{padding:var(--space-3) var(--space-5);font-size:var(--text-button)}.button--lg{padding:var(--space-4) var(--space-6);font-size:var(--text-button)}.spinner{width:1em;height:1em;animation:1s linear infinite spin;display:inline-flex}.spinner-circle{animation:1.5s ease-in-out infinite spin-dash}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spin-dash{0%{stroke-dashoffset:0;stroke-dasharray:1 150}50%{stroke-dashoffset:-40px;stroke-dasharray:45 150}to{stroke-dashoffset:-65px;stroke-dasharray:45 150}}:root{--color-overlay:#0f172a80}[data-theme=dark]{--color-overlay:#000000b3}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text);background-color:var(--color-background);min-height:100vh;transition:background-color var(--transition-normal), color var(--transition-normal)}a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}a:visited{color:var(--color-link-visited)}a:hover{text-decoration-thickness:2px}button{font-family:inherit;font-size:inherit;cursor:pointer;background:0 0;border:none}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}img{max-width:100%;height:auto;display:block}:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}::selection{background-color:var(--color-primary);color:#fff}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.container{width:100%;max-width:720px;padding:0 var(--space-4);margin:0 auto}@media (width>=768px){.container{padding:0 var(--space-6)}}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:root{--color-primary:#2563eb;--color-secondary:#0f766e;--color-accent-warm:#c2410c;--color-background:#fff;--color-surface:#f8fafc;--color-text:#0f172a;--color-text-muted:#475569;--color-border:#94a3b8;--color-link-visited:#6d28d9;--color-error:#b91c1c;--color-success:#15803d;--color-primary-dark:#60a5fa;--color-secondary-dark:#2dd4bf;--color-accent-warm-dark:#fb923c;--color-background-dark:#0f172a;--color-surface-dark:#1e293b;--color-text-dark:#f8fafc;--color-text-muted-dark:#94a3b8;--color-border-dark:#64748b;--color-link-visited-dark:#c4b5fd;--color-error-dark:#f87171;--color-success-dark:#4ade80;--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-input:8px;--radius-button:8px;--radius-card:12px;--radius-card-large:16px;--radius-full:9999px;--font-ui:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;--text-display:2.25rem;--text-h1:1.75rem;--text-h2:1.375rem;--text-h3:1.125rem;--text-body:1rem;--text-small:.875rem;--text-button:1rem;--leading-display:1.2;--leading-h1:1.25;--leading-h2:1.3;--leading-h3:1.4;--leading-body:1.5;--leading-small:1.45;--leading-button:1;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--shadow-focus:0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-background);--shadow-card:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-card-hover:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-modal:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--focus-ring-width:2px;--focus-ring-offset:2px;--focus-ring-color:var(--color-primary);--touch-target-min:44px;--transition-fast:.15s ease;--transition-normal:.2s ease;--transition-slow:.3s ease;--z-base:0;--z-dropdown:100;--z-sticky:200;--z-modal:300;--z-popover:400;--z-toast:500;--z-tooltip:600;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px}@media (prefers-color-scheme:dark){:root{--color-primary:#60a5fa;--color-secondary:#2dd4bf;--color-accent-warm:#fb923c;--color-background:#0f172a;--color-surface:#1e293b;--color-text:#f8fafc;--color-text-muted:#94a3b8;--color-border:#64748b;--color-link-visited:#c4b5fd;--color-error:#f87171;--color-success:#4ade80}}[data-theme=light]{--color-primary:#2563eb;--color-secondary:#0f766e;--color-accent-warm:#c2410c;--color-background:#fff;--color-surface:#f8fafc;--color-text:#0f172a;--color-text-muted:#475569;--color-border:#94a3b8;--color-link-visited:#6d28d9;--color-error:#b91c1c;--color-success:#15803d}[data-theme=dark]{--color-primary:#60a5fa;--color-secondary:#2dd4bf;--color-accent-warm:#fb923c;--color-background:#0f172a;--color-surface:#1e293b;--color-text:#f8fafc;--color-text-muted:#94a3b8;--color-border:#64748b;--color-link-visited:#c4b5fd;--color-error:#f87171;--color-success:#4ade80}