/* Shared EngPractice palette. Loaded last on both the app and auth pages. */
:root{
  --bg:#0f1115;
  --paper:#191722;
  --panel:#262130;
  --line:#3c344b;
  --muted:#b8afc5;
  --accent:#bb9aff;
  --button:#bb9aff;
  --accent-hover:#cdb4ff;
  --accent-soft:#2d223f;
  --accent-line:#715591;
  --ink:#f5f7fa;
  --on-accent:#251638;
  --data-secondary:#ddcbf5;
  --good:#7dd9bc;
  --bad:#ffa5b0;
  --input-bg:#141119;--input-line:#60526f;--text-secondary:#d4cbdc;
  --hover-bg:#3c2a54;--accent-text:#decaff;--exercise-bg:#211b2a;
  --error-line:#7e4c59;--error-bg:#2c1c24;--success-line:#487064;
  --warning:#e6c586;--warning-bg:#2c261b;--warning-line:#77613c;
  --switch-bg:#655671;--switch-knob:#d5c9e2;
  color-scheme:dark;color:var(--ink);background:var(--bg);
}
:root[data-theme="light"]{
  --bg:#f8f6fc;--paper:#ffffff;--panel:#ece3f7;--line:#dbcced;
  --muted:#655773;--accent:#7143b8;--button:#7143b8;--accent-hover:#5a2f99;
  --accent-soft:#dfcdf7;--accent-line:#ac8bce;--ink:#282037;--on-accent:#ffffff;
  --data-secondary:#8870a4;--good:#167257;--bad:#b02e45;
  --input-bg:#ffffff;--input-line:#a38cb9;--text-secondary:#58436b;
  --hover-bg:#e8d9fa;--accent-text:#542e8a;--exercise-bg:#f4edfc;
  --error-line:#d3949f;--error-bg:#fff0f2;--success-line:#80b8a5;
  --warning:#80520c;--warning-bg:#fff6e5;--warning-line:#c8a568;
  --switch-bg:#a28cb6;--switch-knob:#ffffff;
  color-scheme:light;
}
@media(prefers-color-scheme:light){:root:not([data-theme]){
  --bg:#f8f6fc;--paper:#ffffff;--panel:#ece3f7;--line:#dbcced;
  --muted:#655773;--accent:#7143b8;--button:#7143b8;--accent-hover:#5a2f99;
  --accent-soft:#dfcdf7;--accent-line:#ac8bce;--ink:#282037;--on-accent:#ffffff;
  --data-secondary:#8870a4;--good:#167257;--bad:#b02e45;
  --input-bg:#ffffff;--input-line:#a38cb9;--text-secondary:#58436b;
  --hover-bg:#e8d9fa;--accent-text:#542e8a;--exercise-bg:#f4edfc;
  --error-line:#d3949f;--error-bg:#fff0f2;--success-line:#80b8a5;
  --warning:#80520c;--warning-bg:#fff6e5;--warning-line:#c8a568;
  --switch-bg:#a28cb6;--switch-knob:#ffffff;
  color-scheme:light;
}}
body,header,.sidebar{background:var(--bg);color:var(--ink)}
header,.sidebar,footer{border-color:var(--line)}
::selection{background:#63408e;color:#fff}
a,.text-button{color:var(--accent)}
button{color:var(--on-accent)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
input,select,textarea{font:inherit;background:var(--input-bg);border:1px solid var(--input-line);color:var(--ink);border-radius:9px}
textarea{padding:12px 14px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
label,.language-control{color:var(--text-secondary)}
.badge{background:var(--panel);border-color:var(--line);color:var(--text-secondary)}
.secondary{background:var(--panel);border-color:var(--input-line);color:var(--text-secondary)}
.secondary:hover:not(:disabled){background:var(--hover-bg);border-color:var(--accent-line)}
.text-button{background:transparent}
.text-button:hover:not(:disabled){color:var(--accent-hover)}
.side-link{background:transparent;color:var(--text-secondary)}
.side-link::before{color:var(--muted)}
.side-link:hover:not(:disabled){background:var(--hover-bg)}
.side-link.active{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 3px 0 var(--accent)}
.side-link.active::before{color:var(--accent)}
.sidebar-quota strong,.account-stats strong{color:var(--accent)}
.auth-story h1 em,.auth-story .eyebrow,.trial-note strong{color:var(--accent)}
.auth-tabs button,.admin-tabs button{background:transparent;color:var(--muted)}
.auth-tabs button.active,.admin-tabs button.active{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 -2px var(--accent)}
.auth-box,.account-panel,.report-panel,.reader,.student-kpi,.student-goal,.student-streak,.student-panel{background:var(--paper);border-color:var(--line)}
.sample-phrase{background:var(--accent-soft);border-color:var(--accent-line);border-left-color:var(--accent)}
.import-panel{background:linear-gradient(120deg,var(--accent-soft),var(--paper));border-color:var(--accent-line)}
.lesson-card,.collection-tile{background:var(--paper);border-color:var(--line);color:var(--ink)}
.lesson-card:hover:not(:disabled),.collection-tile:hover:not(:disabled){border-color:var(--accent-line)}
.lesson-card.active,.collection-tile[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.lesson-card .state,.empty-number{color:var(--accent)}
.practice-tabs{background:var(--paper);border-color:var(--line)}
.mode-button{background:var(--panel);color:var(--text-secondary)}
.mode-button.active{background:var(--accent);color:var(--on-accent)}
.exercise,.option{background:var(--exercise-bg);border-color:var(--input-line);color:var(--ink)}
.option:hover:not(:disabled){background:var(--hover-bg);border-color:var(--accent-line)}
.source-quote{background:var(--accent-soft);border-color:var(--accent);color:var(--text-secondary)}
.segment.playing{background:var(--accent-soft)}
.segment .word:hover{background:var(--hover-bg);text-decoration-color:var(--accent)}
.time-button{background:var(--accent-soft);color:var(--accent-text)}
.translation-switch input:checked+.switch-track{background:var(--accent)}
.translation-switch input:checked+.switch-track:after{color:#251638}
.translation-switch input:focus-visible+.switch-track{outline-color:var(--accent)}
#job-status:not(:empty),#message:not(:empty){background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text)}
#message.error{color:var(--bad);border-color:var(--error-line);background:var(--error-bg)}
dialog,#collection-dialog,.collection-practice{background:var(--paper);border-color:var(--input-line);color:var(--ink)}
.dialog-close{background:transparent;color:var(--text-secondary)}
.collection-tile:focus-visible{outline-color:var(--accent)}
.collection-tile small,.collection-tile span,.student-kpi h2{color:var(--text-secondary)}
.student-kpi>strong,.student-streak>strong{color:var(--ink)}
.student-goal .student-section-heading>strong{color:var(--accent-text)}
.student-goal progress,.study-activity-row progress{background:var(--panel)}
.student-goal progress::-webkit-progress-bar,.study-activity-row progress::-webkit-progress-bar{background:var(--panel)}
.student-goal progress::-webkit-progress-value,.study-activity-row progress::-webkit-progress-value{background:var(--accent)}
.student-goal progress::-moz-progress-bar,.study-activity-row progress::-moz-progress-bar{background:var(--accent)}
.student-legend span::before,.study-bar{background:var(--accent)}
.student-legend .video-key::before,.video-bar{background:var(--data-secondary)}
.study-day{background:transparent;color:var(--muted)}
.study-day:hover,.study-day[aria-pressed=true]{background:var(--accent-soft)}
.study-day[aria-pressed=true]{box-shadow:inset 0 -2px var(--accent);color:var(--accent-text)}
#study-bars,.study-bar-pair{border-color:var(--line)}
.study-lesson{background:var(--panel);border-color:var(--line);color:var(--ink)}
.study-lesson:hover{background:var(--hover-bg);border-color:var(--accent-line)}
.study-lesson-icon{background:var(--accent-soft);color:var(--accent)}
.study-lesson-arrow,.student-method summary,.report-panel summary,.report-method summary{color:var(--accent-text)}
.report-kpis .kpi-card{background:var(--paper);border-color:var(--line)}
th{background:var(--panel);color:var(--text-secondary)}
.chart-grid{stroke:var(--line)}
.chart-label{fill:var(--muted)}
.chart-users{fill:var(--accent)}
.chart-imports{fill:var(--data-secondary)}
.legend-users{color:var(--accent)}
.legend-imports{color:var(--data-secondary)}
.meter{background:var(--panel)}
.meter-fill{background:var(--accent)}
.meter-fill.good{background:var(--good)}
.meter-fill.bad{background:var(--bad)}
.meter-fill.neutral{background:var(--muted)}
/* Success, error and offline states keep their semantic colours. */
.vocabulary-card .learned-toggle{color:var(--good)}
.vocabulary-card .learned-toggle input{accent-color:var(--accent)}

.engpractice-brand .brand-wordmark{color:var(--ink)}
.engpractice-brand .brand-practice{color:var(--accent)}

/* Surfaces and labels also shared with the older lesson/report styles. */
.english,.kpi-card>strong,.translation-icon{color:var(--ink)}
.learning-benefits,.exercise .secondary{color:var(--text-secondary)}
.student-streak>small,.student-legend,.study-lesson small,.study-empty p,.student-method,.metric-row-heading>span,.kpi-card>span{color:var(--muted)}
.feedback{color:var(--warning)}.feedback.correct{color:var(--good)}
#collection-dialog-error{color:var(--bad)}
#study-save-status{color:var(--warning);background:var(--warning-bg);border-color:var(--warning-line)}
.switch-track{background:var(--switch-bg)}.switch-track:after{background:var(--switch-knob)}
.appearance-controls{display:flex;align-items:center;gap:18px;margin-inline-start:auto;min-width:0}
.theme-control{display:flex;align-items:center;gap:8px;margin:0;color:var(--text-secondary)}
.theme-control svg{flex:none}
.theme-control select{width:auto;max-width:205px;padding:6px 28px 6px 10px}
header{height:auto;min-height:64px;flex-wrap:wrap}
header>.language-status:not(:empty){flex-basis:100%;max-width:none;text-align:end}
@media(max-width:800px){header>.badge{display:none}.appearance-controls{gap:12px}.theme-control select{max-width:180px}}
@media(max-width:600px){
 .appearance-controls{width:100%;justify-content:space-between;gap:10px}
 .appearance-controls label{min-width:0;gap:6px}
 .appearance-controls select{font-size:12px;padding:7px 6px;max-width:180px}
 .appearance-controls .language-control select{max-width:135px}
}
/* EngPractice learner refinements */
.theme-control.translation-switch{border:0;padding:0;gap:7px;background:transparent;direction:ltr}
.theme-control .switch-track{width:44px;flex-shrink:0;background:var(--line)}
.theme-control input{inset:auto;left:22px;z-index:1}
.switch-track:after{transition:transform .2s ease,background .2s ease}
.translation-switch input:checked+.switch-track:after{content:''}
.side-link::before{display:none}
.side-link{padding:14px 16px}
#auth-message{color:var(--muted)}#auth-message.error{color:var(--danger,#df6b72)}
#dashboard-status:empty,#message:empty,#study-save-status:empty,#practice-progress:empty{display:none}
.goal-visual{display:flex;gap:18px;align-items:center;margin:16px 0}.goal-rings{width:140px;flex:0 0 140px;overflow:visible}
.goal-rings circle{fill:none;stroke-width:10}.ring-track{stroke:var(--line);opacity:.65}.goal-ring{stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;stroke-dasharray:0 100;transition:stroke-dasharray .4s ease}.time-ring{stroke:var(--accent)}.word-ring{stroke:#c7a8ff}.goal-visual p{margin:5px 0}.time-key{color:var(--accent)}#study-word-value{color:var(--ink)}
#study-goal-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}#study-goal-form select{max-width:110px}#study-goal-form label{font-size:12px;color:var(--muted)}
#job-status.is-loading{display:flex;align-items:center;gap:14px}#job-status.is-loading:before{content:'';width:24px;height:24px;flex:0 0 24px;border:3px dotted var(--accent);border-left-color:transparent;border-radius:50%;animation:processing-spin 1.2s linear infinite}
@keyframes processing-spin{to{transform:rotate(360deg)}}
.app-layout{max-width:2200px;grid-template-columns:205px minmax(0,1fr)}
.lesson-layout{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:24px;align-items:start}
.lesson-media{position:sticky;top:16px}.lesson-study{min-width:0}.practice-tabs{position:static}
#player{max-width:none}#player iframe{height:auto;width:100%;aspect-ratio:16/9;max-height:70vh}
#transcript{height:clamp(340px,64vh,850px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-inline:8px}
.segment{position:relative;padding:16px 8px}.segment .english{font-size:clamp(16px,1.2vw,21px);line-height:1.6}.segment .translation{font-size:clamp(15px,1vw,18px);line-height:1.55}
.phrase-switch{float:right;margin:0 0 8px 12px}.phrase-switch .switch-track{width:36px;height:22px}.phrase-switch .switch-track:after{width:16px;height:16px}.phrase-switch input{width:36px;height:22px}.phrase-switch input:checked+.switch-track:after{transform:translateX(14px)}
.segment .translation[hidden]{display:none!important}
#word-dialog{width:min(620px,calc(100vw - 32px));max-height:85dvh;padding:28px;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #0005}
#word-dialog .word-heading{display:flex;align-items:center;gap:12px;padding-right:30px}#word-title{font-size:32px;margin:0}#word-grammar{margin:4px 0 24px}#word-result{font-size:28px;margin:16px 0 24px;line-height:1.35}#word-context,#word-context-translation{font-size:21px;line-height:1.5;margin:10px 0}#word-context strong{color:var(--ink)}#word-explanation{font-size:14px}#word-dialog .audio-button{background:transparent;color:var(--muted);padding:6px 10px}.word-footer{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;display:flex;align-items:center;gap:16px}.word-footer>button{flex:1}.word-footer details{font-size:12px}.word-footer select{max-width:140px}.word-footer summary{cursor:pointer}#word-dialog .dialog-close{top:18px;right:18px}
@media(max-width:1100px){.lesson-layout{grid-template-columns:1fr}.lesson-media{position:sticky;top:0;z-index:2;background:var(--paper)}#player{max-width:100%;margin:auto}#player iframe{max-height:48vh}.lesson-media #lesson-note{display:none}#transcript{height:42vh;min-height:240px}.lesson-layout{gap:12px}}
@media(max-width:800px){.app-layout{display:block}.goal-rings{width:112px;flex-basis:112px}.goal-visual{gap:10px}.student-goal-bottom{flex-direction:column;align-items:start}.lesson-layout{display:block}#transcript{margin-top:10px}.side-link{padding:10px}#word-dialog{padding:22px}#word-context,#word-context-translation{font-size:18px}.theme-control.translation-switch{gap:4px}}
@media(prefers-reduced-motion:reduce){.goal-ring,.switch-track:after{transition:none}#job-status.is-loading:before{animation:none}}

#word-dialog{max-width:min(620px,calc(100vw - 32px))}.audio-button svg{width:22px;height:22px;display:block}.language-control svg{width:18px;height:18px;flex:none}
@media(max-width:520px){header{gap:8px;flex-wrap:nowrap}.appearance-controls{width:auto;gap:8px}.appearance-controls .language-control>svg{display:none}.appearance-controls .language-control select{max-width:100px}.theme-control.translation-switch>span:not(.switch-track){display:none}.theme-control input{left:0}.engpractice-brand{gap:5px}.brand-wordmark{font-size:19px}.brand-mark{width:27px;height:27px}.language-status:empty{display:none}}

.reset-confirmation{max-width:460px;padding:32px;text-align:center}.reset-confirmation h2{font-size:26px}.reset-confirmation p{line-height:1.6}.reset-confirmation-icon{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;background:var(--accent-soft,#bb9aff20);color:var(--accent,#bb9aff);display:grid;place-items:center}.reset-confirmation-icon svg{width:32px;height:32px}#reset-confirmation-email{font-weight:700;overflow-wrap:anywhere}.reset-confirmation form{margin-top:24px}.reset-confirmation form button{width:100%}#auth-form[aria-busy=true] #auth-submit{cursor:wait;opacity:.75}@media(max-width:480px){.reset-confirmation{padding:24px}}