:root{font-family:system-ui,-apple-system,sans-serif;color:#e9edf5;background:#090e18;color-scheme:dark;--muted:#a2adbf;--panel:#101723;--line:#293241;--accent:#43c9dc}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}header{height:80px;border-bottom:1px solid var(--line);display:flex;gap:24px;align-items:center;padding:0 max(4vw,20px);background:#0c121e}.brand{display:flex;gap:12px;align-items:center;font-weight:750;text-decoration:none;color:inherit;white-space:nowrap}.logo{display:grid;place-items:center;background:#3ec6da;color:#06141c;border-radius:11px;width:40px;height:40px}.brand small{display:block;font-size:9px;letter-spacing:.16em;color:var(--muted);margin-top:4px}header nav{display:flex;gap:10px;flex:1}header nav button{border:0;background:transparent;font-size:13px;color:var(--muted)}header nav .nav-active{color:var(--accent)}.admin-badge{color:#b1cfba;background:#192b29;font-size:11px;padding:7px 12px;border-radius:30px;white-space:nowrap}button,select{font:inherit;cursor:pointer;border:1px solid var(--line);color:inherit;background:#141d2b;border-radius:8px;padding:9px 12px;font-size:13px}button:hover{border-color:#3ab9ca}button:disabled{opacity:.5;cursor:wait}.primary{background:#3ec6da;color:#071921;font-weight:750;border:0;padding:12px 17px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #6cdced;outline-offset:2px}main{max-width:1320px;padding:0 30px 42px;margin:auto}.intro{padding:48px 0 30px;display:flex;justify-content:space-between;gap:20px;align-items:center}.eyebrow{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.16em}h1{font-size:clamp(30px,4vw,49px);margin:12px 0 9px;letter-spacing:-.045em;line-height:1.1}em{font-style:normal;color:var(--accent)}p{color:var(--muted);margin:7px 0;font-size:14px;line-height:1.6}h2{font-size:18px;margin:0}h3{font-size:16px;margin:6px 0}small{color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:20px 12px;margin-bottom:30px}.stats>div{padding:0 22px;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats span{display:block;font-size:25px;font-weight:700}.stats small{font-size:11px}.storage-state span{color:#9bdbba}.section-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.section-title p{font-size:12px}.search{display:flex;align-items:center;gap:8px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:10px;background:#101422}.search input{width:180px;min-width:0;font:inherit;font-size:13px;background:none;border:0;color:inherit}.collections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.collection{padding:0;background:var(--panel);overflow:hidden;text-align:left;display:flex;flex-direction:column;border-radius:13px}.cover{height:155px;display:flex;align-items:center;justify-content:space-between;padding:25px;background:linear-gradient(130deg,#35305b,#202944);width:100%;position:relative;overflow:hidden}.cover::after{content:"";position:absolute;width:140px;height:140px;border:1px solid #ffffff25;border-radius:50%;right:-20px;top:-20px}.cover-icon{font-size:52px;font-weight:300;color:#caf5f7}.cover-index{font-size:12px;letter-spacing:.15em;color:#bdeaf0}.collection:nth-child(3n+2) .cover{background:linear-gradient(130deg,#264b4d,#182c34)}.collection:nth-child(3n) .cover{background:linear-gradient(130deg,#5b402d,#282333)}.collection-body{padding:19px;width:100%}.collection-body p{font-size:12px;min-height:38px;overflow-wrap:anywhere}.collection-meta{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px;margin-top:16px;font-size:11px;color:var(--muted)}.collection h3{overflow-wrap:anywhere}.sample-label{color:var(--accent);font-size:10px;letter-spacing:.12em}.workflow{display:flex;justify-content:space-between;gap:15px;margin-top:30px;border-top:1px solid var(--line);padding-top:20px;color:#9da3bb;font-size:11px}.migration{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px;border:1px solid var(--line);background:var(--panel);margin-top:20px;border-radius:10px}.migration p{font-size:12px}.back{margin-top:25px;border:0;background:none;color:var(--muted);padding-left:0}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0}.library-heading h1{font-size:34px}.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}aside,article,.lesson-empty{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}aside{padding:18px;align-self:start}.sidehead,.lesson,.transhead,.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.sidehead span,.lang{color:var(--accent);background:#15313d;padding:5px 8px;border-radius:7px;font-size:11px;white-space:nowrap}.entry{display:flex;align-items:center;text-align:left;gap:9px;width:100%;margin:9px 0;overflow-wrap:anywhere}.entry[aria-current=true]{border-color:#36b7cc;background:#122b39}.entry small{display:block;font-size:10px;margin-top:4px}.tile{flex:none;display:grid;place-items:center;width:32px;height:32px;background:#163442;color:#63d2df;border-radius:7px}.tip{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;font-size:12px}.tip p{font-size:12px}.tip small{font-size:10px}.player{background:#080a12}.player video{display:block;width:100%;height:min(40vh,400px);min-height:195px;object-fit:contain}.lesson{padding:17px 20px;border-bottom:1px solid var(--line)}.lesson h2{margin-top:4px;overflow-wrap:anywhere}.admin-tools{display:flex;gap:7px;flex-wrap:wrap;padding:14px 20px}.admin-tools button{font-size:11px}.process-status{padding:0 20px 12px;font-size:12px}.tabs{display:flex;border-block:1px solid var(--line);padding:0 18px;overflow:auto;gap:13px}.tabs button{white-space:nowrap;border:0;border-radius:0;background:none;color:var(--muted);padding:13px 2px;font-size:12px}.tabs button[aria-selected=true]{color:var(--accent);box-shadow:inset 0 -2px var(--accent)}.tab-panel{padding:20px}.transhead p{font-size:11px}.transhead h2{font-size:15px}#words{height:250px;padding-block:125px;overflow:auto;scrollbar-width:thin;overflow-anchor:none}.row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:baseline;margin-top:12px}.time{font-size:10px;color:var(--accent);font-variant-numeric:tabular-nums}.word{padding:2px 3px;border:0;border-radius:4px;background:transparent;line-height:1.65;font-size:15px}.word:hover{background:#1b3340}.word.active{color:#062026;background:#3ed1d8}.translation{color:#d6bf60;font-size:12px;margin:4px 0 10px}.vocab-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.vocab-item{padding:15px;border:1px solid var(--line);border-radius:10px}.vocab-item h3{color:var(--accent)}.vocab-item p{font-size:12px}.vocab-item .example{font-style:italic;color:#cdd0df}.flashcard{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;min-height:210px;border:1px solid #2e8191;border-radius:15px;background:linear-gradient(140deg,#29223f,#172033);width:100%;padding:25px;gap:10px}.flashcard strong{font-size:30px}.flashcard p{max-width:450px}.card-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:17px}.exercise{padding:17px;border:1px solid var(--line);border-radius:10px;margin-top:13px}.exercise p{color:#dfe1eb}.exercise input{width:min(100%,300px)}.answer-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.answer-options button{text-align:left}.answer-options .correct{border-color:#75c89d;background:#183e30}.answer-options .incorrect{border-color:#db8f96;background:#41252d}.feedback{color:#b9c5d5;font-size:12px;min-height:20px}.tokens{display:flex;gap:6px;flex-wrap:wrap;min-height:35px;margin-top:12px}.tokens button{padding:7px}.result{padding:18px;background:#142b37;border-radius:10px;margin-top:15px}.empty{text-align:center;padding:40px 24px;grid-column:1/-1;color:var(--muted)}.lesson-empty{padding:90px 20px}.empty-icon{display:block;font-size:36px;color:var(--accent);margin-bottom:20px}.empty h2{color:#e6e7f1}.empty p{font-size:12px}.empty button{margin-top:12px}#notice{padding:14px 18px;background:#302b40;border:1px solid #5a4c7a;border-radius:9px;margin-top:20px;font-size:13px}dialog{background:#111a28;color:inherit;border:1px solid #45405c;border-radius:15px;padding:26px;width:min(94vw,510px);max-height:85vh;overflow:auto}dialog::backdrop{background:#060812c9;backdrop-filter:blur(5px)}.dialog-head{margin-bottom:15px}.dialog-head button{padding:3px 10px;font-size:22px}label{display:block;font-size:12px;color:#c6d0df;margin:15px 0}input,textarea{display:block;width:100%;background:#101522;color:inherit;border:1px solid #333a52;border-radius:7px;font:inherit;padding:11px;margin-top:7px}textarea{min-height:90px;resize:vertical;line-height:1.5}.wide-dialog{width:min(94vw,760px)}.editor-group{margin:20px 0;border-top:1px solid var(--line);padding-top:15px}.editor-group h3{color:var(--accent)}.editor-row{padding:10px 15px;border:1px solid var(--line);border-radius:8px;margin:12px 0}.editor-row label{margin:8px 0}.editor-row textarea{min-height:65px}.config-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13px}footer{text-align:center;color:#70788f;border-top:1px solid #202637;padding:24px;font-size:11px}footer span{margin:0 10px}@media(max-width:800px){header{padding:0 16px;gap:12px}.admin-badge{display:none}header nav{justify-content:flex-end;gap:0}.brand{font-size:13px}.brand small{font-size:7px}.logo{width:34px;height:34px}main{padding:0 15px 28px}.intro{padding:30px 0 22px;align-items:flex-start;flex-direction:column}.intro h1{font-size:37px}.stats{grid-template-columns:1fr 1fr;gap:20px}.stats>div:nth-child(2){border:0}.collections{grid-template-columns:1fr 1fr}.section-title{align-items:flex-start;flex-direction:column}.search{width:100%}.search input{width:100%}.layout{display:flex;flex-direction:column}.layout aside{width:100%;order:2}.library-heading{align-items:flex-start}.library-heading h1{font-size:27px}.player video{height:30vh}.lesson,.tab-panel{padding:15px}.vocab-grid{grid-template-columns:1fr}.workflow{display:grid;grid-template-columns:1fr 1fr}.migration{align-items:flex-start;flex-direction:column}}@media(max-width:480px){.collections{grid-template-columns:1fr}.answer-options{grid-template-columns:1fr}.library-heading{flex-direction:column}.cover{height:140px}}


/* Lesson presentation inspired by Daily English POD. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 20px;
}
body {
  background: radial-gradient(ellipse at 80% 0%, #10273366, transparent 36%), #090e18;
}
button, a, summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
header {
  padding-inline: max(24px, env(safe-area-inset-left));
  background: #0b111ce8;
}
.brand .logo {
  border-radius: 50%;
  box-shadow: 0 0 25px #36c8da22;
}
.primary {
  border-radius: 10px;
  transition: background .18s ease, transform .18s ease;
}
.primary:hover {
  background: #66d7e5;
}
.primary:active {
  transform: translateY(1px);
}
.intro h1 em {
  background: linear-gradient(100deg, #40cadd, #c38bc9);
  color: transparent;
  background-clip: text;
}
.collection {
  border-radius: 18px;
  transition: border-color .2s ease, transform .2s ease;
}
.collection:hover {
  transform: translateY(-3px);
  border-color: #478d9b;
}
.cover {
  background: linear-gradient(125deg, #183849, #172334);
}
.collection:nth-child(3n+2) .cover {
  background: linear-gradient(125deg, #35223e, #202739);
}
.collection:nth-child(3n) .cover {
  background: linear-gradient(125deg, #3e3520, #1a2a30);
}
.collection-body h3 {
  font-size: 19px;
}
.library-heading h1 {
  font-size: clamp(25px, 3vw, 35px);
}
.layout {
  display: block;
}
.layout aside {
  padding: 12px 16px;
  margin-bottom: 18px;
}
.sidehead h2 {
  font-size: 13px;
}
#library {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.entry {
  width: auto;
  min-width: 210px;
  max-width: 340px;
  margin: 9px 0 1px;
  flex: 0 0 auto;
}
.entry > span:last-child {
  min-width: 0;
}
.tip {
  display: none;
}
#lesson-view {
  border-radius: 16px;
  box-shadow: 0 16px 55px #00000022;
}
.lesson {
  background: #0e1622;
}
.lesson h2 {
  font-size: 17px;
}
.admin-tools {
  background: #0e1622;
}
.process-status {
  margin: 0;
  padding-top: 10px;
  background: #0e1622;
}
.lesson-shell {
  background: #090e18;
}
.lesson-shell .player {
  display: none;
}
.lesson-shell[data-mode="transcript"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.lesson-shell[data-mode="transcript"] .player {
  display: flex;
  align-items: center;
  background: #000;
}
.lesson-shell .player video {
  width: 100%;
  height: 100%;
  max-height: 640px;
  min-height: 320px;
  object-fit: contain;
}
.lesson-content {
  min-width: 0;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  background: #0d1420;
  border-top: 0;
}
.tabs button {
  min-height: 48px;
  padding: 12px 7px;
  font-size: 12px;
}
.tabs button span {
  display: inline-block;
  margin-right: 5px;
  font-size: 17px;
  vertical-align: -1px;
}
.tabs button[aria-selected="true"] {
  color: #75d9e5;
  background: #11263366;
  box-shadow: inset 0 -2px #45cddd;
}
.tab-panel {
  min-width: 0;
  padding: 24px;
}
#transcript-panel {
  padding: 0;
}
.transhead {
  justify-content: flex-start;
  padding: 10px 15px;
  border-bottom: 1px solid #202b39;
  background: #0b121e;
}
.transhead .eyebrow {
  font-size: 9px;
  letter-spacing: .08em;
  color: #a4afc0;
}
.language-toggle {
  display: flex;
  gap: 4px;
}
.language-toggle button {
  font-size: 10px;
  padding: 6px 10px;
  border-radius: 20px;
  background: transparent;
}
.language-toggle button[aria-pressed="true"] {
  background: #3ec6da;
  color: #061a22;
  border-color: #3ec6da;
  font-weight: 800;
}
#words {
  height: 500px;
  padding: 250px 22px;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
}
.row {
  display: block;
  margin-top: 24px;
  padding: 10px 12px;
  border-radius: 12px;
}
.row:has(.active) {
  background: #ffffff06;
}
.row .time {
  display: none;
}
.word {
  color: #e5e9f1;
  font-size: clamp(17px, 1.65vw, 23px);
  line-height: 1.65;
  padding: 1px 3px;
  text-align: left;
}
.word.active {
  background: #31ced7;
  color: #041b20;
  box-shadow: 0 0 16px #3cc9d21a;
}
.translation {
  color: #dcc55f;
  font-size: 18.2px;
  line-height: 1.6;
  margin: 8px 3px 0;
}
.english-only .translation {
  display: none;
}
.content-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.content-heading h2 {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  color: #b6c2d2;
}
.count-pill {
  display: inline-block;
  font-size: 11px;
  color: #b6c4d6;
  border: 1px solid #2b3544;
  background: #141c29;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.vocab-list {
  max-width: 760px;
  margin: auto;
}
#vocabulary-panel .content-heading {
  max-width: 760px;
  margin-inline: auto;
}
.vocab-item {
  padding: 0;
  margin-bottom: 10px;
  background: #101723;
  border-color: #283241;
  border-radius: 15px;
}
.vocab-item summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  min-height: 55px;
  cursor: pointer;
  list-style: none;
}
.vocab-item summary::-webkit-details-marker {
  display: none;
}
.vocab-item summary strong {
  font-size: 15px;
}
.word-category {
  font-size: 10px;
  color: #a6b0c1;
  border: 1px solid #2c3544;
  border-radius: 30px;
  padding: 3px 9px;
  font-weight: 400;
}
.chevron {
  margin-left: auto;
  color: #8294aa;
}
.vocab-item[open] .chevron {
  transform: rotate(180deg);
}
.vocab-detail {
  padding: 0 18px 18px;
}
.field-caption {
  display: block;
  margin-top: 15px;
  font-size: 9px;
  color: #8c9daf;
  letter-spacing: .1em;
}
.vocab-item .meaning {
  color: #68d5df;
}
.vocab-item p {
  font-size: 14px;
  margin-top: 5px;
}
#practice-panel > h2 {
  margin-bottom: 4px;
}
.activity-menu {
  display: grid;
  gap: 12px;
  margin: 24px auto 10px;
}
.activity-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  text-align: left;
  background: #101723;
  border-radius: 16px;
  min-height: 88px;
}
.activity-option:hover {
  background: #12212e;
}
.activity-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 11px;
  font-size: 24px;
  color: #47cadc;
  background: #15303b;
}
.activity-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.activity-copy strong {
  font-size: 15px;
}
.activity-copy small {
  font-size: 12px;
  line-height: 1.5;
}
.activity-count {
  margin-left: auto;
  color: #8e9caf;
  font-size: 11px;
  white-space: nowrap;
}
.activity-arrow {
  color: #59c8d7;
  font-size: 20px;
}
.practice-back {
  background: none;
  border: 0;
  color: #9eacbe;
  padding-left: 0;
  margin-bottom: 20px;
}
.practice-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.practice-heading .practice-back {
  margin-bottom: 0;
}
.flashcard-stage {
  max-width: 440px;
  margin: 32px auto;
}
.flashcard-stage > h2 {
  text-align: center;
  font-size: 14px;
  color: #acb9ca;
  margin-bottom: 20px;
}
.flashcard {
  min-height: 275px;
  border-radius: 18px;
  border-color: #2a3545;
  background: radial-gradient(ellipse at 50% 0, #152431, #101723 70%);
  padding: 28px 24px;
  box-shadow: 0 12px 32px #0000001f;
  gap: 20px;
}
.flashcard strong {
  font-size: clamp(25px, 4vw, 34px);
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.flashcard p {
  color: #b8c6d4;
  margin: 0;
}
.flashcard small {
  font-size: 11px;
}
.flip-button {
  display: block;
  width: 100%;
  margin-top: 18px;
}
.card-controls {
  justify-content: space-between;
  gap: 10px;
}
.card-controls button {
  flex: 1;
}
.exercise {
  max-width: 760px;
  margin: 15px auto;
  padding: 22px;
  border-radius: 16px;
  background: #101723;
}
.exercise input {
  margin-bottom: 12px;
}
.quiz-intro {
  max-width: 520px;
  margin: 44px auto 60px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}
.quiz-emblem {
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  border-radius: 20px;
  background: #143442;
  color: #4fd3df;
  font-size: 32px;
}
.quiz-intro h2 {
  font-size: 25px;
}
.quiz-intro .primary {
  min-width: 240px;
  margin-top: 12px;
}
.quiz-stage {
  max-width: 560px;
  margin: 12px auto 40px;
}
.quiz-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #a1afc1;
  margin-bottom: 8px;
}
.quiz-progress {
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #212b3a;
  accent-color: #3ec6da;
}
.quiz-progress::-webkit-progress-bar {
  background: #212b3a;
}
.quiz-progress::-webkit-progress-value {
  background: #3ec6da;
}
.quiz-progress::-moz-progress-bar {
  background: #3ec6da;
}
.quiz-question {
  background: #101723;
  border: 1px solid #293342;
  padding: 24px;
  border-radius: 16px;
  margin: 25px 0 20px;
  font-size: 17px;
  line-height: 1.6;
}
.answer-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.answer-options button {
  border-radius: 14px;
  min-height: 52px;
  padding: 15px 20px;
  background: #101723;
  color: #cbd6e4;
}
.answer-options button.selected {
  background: #122a37;
  border-color: #46bbcd;
}
.answer-options button.correct {
  background: #14372c;
  border-color: #5db28a;
}
.answer-options button.incorrect {
  background: #3d202e;
  border-color: #ce7f96;
}
.quiz-check {
  width: 100%;
  margin-top: 10px;
  min-height: 44px;
}
.feedback {
  font-size: 13px;
  line-height: 1.65;
  margin-top: 15px;
}
dialog input, dialog textarea {
  font-size: 16px;
}
footer {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
@media (max-width: 800px) {
  main {
    padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  }
  header {
    padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  }
  .layout {
    display: flex;
  }
  .layout aside {
    order: 0;
    margin-bottom: 0;
  }
  .entry {
    min-width: 200px;
    max-width: 260px;
  }
  .lesson-shell[data-mode="transcript"] {
    display: block;
  }
  .lesson-shell .player video {
    display: block;
    height: clamp(185px, 32svh, 330px);
    min-height: 185px;
    max-height: 330px;
  }
  .lesson-shell[data-mode="transcript"] .player {
    display: block;
  }
  #words {
    height: clamp(260px, 44svh, 470px);
    padding: max(130px, 22svh) 10px;
  }
  .word {
    font-size: 18px;
    line-height: 1.65;
  }
  .translation {
    font-size: 16.9px;
  }
  .row {
    margin-top: 18px;
    padding-inline: 9px;
  }
  .tabs button {
    min-height: 48px;
    font-size: 12px;
  }
  .tab-panel {
    padding: 18px 14px;
  }
  .activity-option {
    padding: 16px 12px;
    gap: 12px;
  }
  .activity-count {
    display: none;
  }
  .activity-arrow {
    margin-left: auto;
  }
  .flashcard-stage {
    margin: 24px auto;
  }
  .flashcard {
    min-height: 250px;
  }
  .quiz-stage {
    margin-top: 5px;
  }
  .quiz-question {
    font-size: 16px;
  }
  .language-toggle button {
    min-height: 36px;
    padding-inline: 13px;
  }
  .vocab-item summary {
    flex-wrap: wrap;
    min-height: 56px;
  }
  .vocab-item summary strong {
    max-width: 70%;
    overflow-wrap: anywhere;
  }
}
@media (pointer: coarse) {
  button, select, summary {
    min-height: 44px;
  }
  input, textarea {
    font-size: 16px;
  }
  .word {
    min-height: 0;
    padding-block: 4px;
  }
}
@media (max-width: 420px) {
  .brand {
    gap: 8px;
    font-size: 12px;
  }
  .brand small {
    font-size: 6px;
  }
  header nav button {
    padding-inline: 8px;
    font-size: 11px;
  }
  .stats > div {
    padding-inline: 12px;
  }
  .tabs button span {
    display: none;
  }
  .tabs button {
    padding-inline: 4px;
  }
  .word-category {
    font-size: 9px;
  }
  .activity-copy small {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Administration and video presentation cards. */
.admin-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: 38px 24px;
}
.admin-heading h1 {
  font-size: clamp(27px, 3.6vw, 42px);
}
.admin-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #101723;
  color: #a8bacb;
  padding: 20px;
  margin-bottom: 30px;
  font-size: 12px;
}
.admin-video-list {
  display: grid;
  gap: 14px;
}
.admin-video-card {
  display: flex;
  gap: 20px;
  align-items: center;
  text-align: left;
  padding: 12px;
  background: #101723;
  border-radius: 15px;
}
.admin-video-card img {
  width: 170px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 9px;
  background: #111b2b;
}
.admin-video-card > div {
  flex: 1;
  min-width: 0;
}
.admin-video-card h3 {
  overflow-wrap: anywhere;
}
.admin-video-card p {
  font-size: 12px;
}
.admin-video-card .activity-arrow {
  margin-right: 10px;
}
.admin-video-card small {
  font-size: 10px;
  color: #61c9d5;
}
.collection-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover:has(.collection-thumbnail)::after {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #06101b33, #06101bb3);
}
.cover-index, .cover-icon {
  position: relative;
  z-index: 1;
}
.entry {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  width: 215px;
  min-width: 215px;
  overflow: hidden;
}
.entry > span {
  display: block;
  padding: 12px;
  line-height: 1.45;
}
.video-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0c121e;
}
.upload-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 25px;
}
.upload-grid select, #metadata-library {
  display: block;
  width: 100%;
  margin-top: 7px;
}
.form-help {
  font-size: 11px;
  color: #9daec2;
  line-height: 1.6;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
input[type="file"] {
  font-size: 12px;
  padding: 10px;
  width: 100%;
  min-width: 0;
}
input[type="file"]::file-selector-button {
  font: inherit;
  background: #203344;
  color: #dce9f2;
  border: 0;
  border-radius: 6px;
  padding: 7px;
  margin-right: 8px;
}
.thumbnail-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: #0a111d;
  border: 1px dashed #345064;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 14px;
}
.thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumbnail-preview > span {
  text-align: center;
  font-size: 32px;
  color: #5fb8ca;
}
.thumbnail-preview small {
  display: block;
  font-size: 11px;
  line-height: 1.7;
  margin-top: 10px;
}
#metadata-preview {
  max-height: 280px;
}
#metadata-form .thumbnail-preview {
  max-width: 420px;
}
#upload-feedback {
  color: #a9deea;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 15px;
}
#upload-progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 12px;
  accent-color: #3ec6da;
}
.word-editor-list {
  display: grid;
  gap: 8px;
  margin-block: 14px;
}
.word-editor-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 78px 78px 36px 36px 36px;
  align-items: end;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid #263444;
}
.word-editor-row label {
  margin: 0;
  font-size: 10px;
}
.word-editor-row input {
  width: 100%;
  min-width: 0;
  padding: 8px;
  font-size: 14px;
}
.word-editor-row button {
  padding: 8px 3px;
  min-width: 0;
  min-height: 38px;
}
@media (max-width: 800px) {
  header {
    flex-wrap: wrap;
    height: auto;
    min-height: 80px;
    gap: 5px 16px;
    padding-block: 13px;
  }
  header nav {
    flex: 1 1 auto;
    overflow-x: auto;
  }
  .admin-heading {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 28px 20px;
  }
  .admin-steps {
    grid-template-columns: 1fr 1fr;
    font-size: 11px;
    gap: 14px;
    padding: 16px;
  }
  .admin-video-card {
    gap: 12px;
  }
  .admin-video-card img {
    width: 110px;
  }
  .admin-video-card h3 {
    font-size: 14px;
  }
  .admin-video-card .activity-arrow {
    display: none;
  }
  .upload-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .word-editor-row {
    grid-template-columns: minmax(90px, 1fr) 70px 70px;
    gap: 8px;
  }
  .word-editor-row button {
    min-height: 44px;
  }
  .word-editor-row input {
    font-size: 16px;
  }
}
@media (max-width: 420px) {
  header nav {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .admin-video-card {
    flex-wrap: wrap;
  }
  .admin-video-card img {
    width: 100%;
  }
  .admin-video-card > div {
    padding: 4px;
  }
  .word-editor-row {
    grid-template-columns: minmax(80px, 1fr) 64px 64px;
  }
}

.danger-button {
  color: #f3a9b3;
  border-color: #78404d;
  background: #351b2855;
}
.danger-button:hover {
  color: #ffd9df;
  border-color: #d3788b;
  background: #4a2233;
}
.danger-solid {
  background: #b9435c;
  border-color: #b9435c;
  color: white;
  font-weight: 700;
}
.danger-solid:hover {
  background: #cd506a;
}
.delete-warning, #delete-error {
  color: #f0acb9;
  line-height: 1.6;
  font-size: 13px;
}
#delete-title {
  overflow-wrap: anywhere;
  margin-block: 18px;
}
.admin-video-open {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 20px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
}
.admin-video-open > div {
  flex: 1;
  min-width: 0;
}
.admin-video-open:hover h3 {
  color: #73d8e2;
}
.admin-delete {
  flex-shrink: 0;
  margin-right: 8px;
}
@media (max-width: 800px) {
  .admin-video-open {
    gap: 12px;
  }
  .admin-video-card {
    flex-wrap: wrap;
  }
  .admin-delete {
    margin-left: auto;
  }
}
@media (max-width: 420px) {
  .admin-video-open {
    flex-wrap: wrap;
    flex-basis: 100%;
  }
}

.question-type {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #61d2df;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.quiz-question p {
  color: #e1e8f1;
  font-size: 17px;
  margin: 0;
}
.source-evidence {
  border-left: 2px solid #3897a7;
  padding-left: 12px;
  color: #a8c8d4;
  font-size: 12px;
  margin-top: 14px;
}

.regeneration-options label { display:grid;grid-template-columns:24px 1fr;align-items:center;gap:10px;padding:13px;border:1px solid #2a394a;border-radius:9px;margin-block:10px; }
.regeneration-options input { width:18px;height:18px;margin:0;padding:0;accent-color:#3ec6da; }
.regeneration-options small { grid-column:2;font-size:11px; }
#regeneration-error { color:#edb4bd;margin-bottom:12px;font-size:12px; }

.visitor header nav,.visitor .admin-badge,.visitor .tip,.visitor #upload,.visitor footer{display:none!important}.visitor .layout{grid-template-columns:1fr}.visitor aside{display:none}.visitor #admin-tools{display:none!important}

.admin-card-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.free-lesson-toggle{font-size:12px;white-space:nowrap}.free-lesson-toggle[aria-pressed=true]{background:#123c39;border-color:#388d7f;color:#9be7d1}.visitor.has-free-lessons .layout{grid-template-columns:240px minmax(0,1fr)}.visitor.has-free-lessons aside{display:block}.visitor #tag{color:#6dd3d9}@media(max-width:800px){.visitor.has-free-lessons .layout{display:flex}.admin-card-actions{padding:0 12px 12px}.admin-video-card{flex-wrap:wrap}.admin-video-open{min-width:0}}

/* Focused lesson view and navigation. */
.player-navigation{display:flex;align-items:center;gap:20px;flex-shrink:0}.player-navigation button{display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;background:transparent;padding:4px;min-width:42px;min-height:44px;color:#8ed5b1}.player-navigation svg{width:28px;height:28px}.player-navigation button span{font-size:28px;line-height:1.1;filter:drop-shadow(0 3px 3px #0007)}.player-navigation small{font-size:8px;color:#e9ce7f;font-weight:750}.player-home{display:grid;place-items:center;min-width:44px;min-height:44px}.player-home img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 14px #6a54be20}.player-lesson-title{min-width:0;flex:1}.player-toolbar{gap:20px}.player-toolbar #speed{flex:none;margin-left:auto;min-height:42px}.visitor #new-library,.visitor .stats,.visitor .workflow,.visitor #migration{display:none!important}.visitor .intro p{display:none}.visitor .intro h1{font-size:32px}.visitor .intro h1 em{font-style:normal}.visitor .intro .eyebrow{display:none}.visitor #home-view .intro h1{font-size:0}.visitor #home-view .intro h1:after{content:'Explora nuestras bibliotecas';font-size:30px}.visitor:not(.lesson-open) #library-view aside{display:block!important}.visitor:not(.lesson-open) #library-view .layout{display:block}.visitor:not(.lesson-open) #library-view #library{flex-wrap:wrap}.visitor:not(.lesson-open) #library-view .entry{max-width:none;width:min(100%,360px)}
body.lesson-open>header,body.lesson-open>footer{display:none!important}body.lesson-open main{max-width:1600px;width:100%;margin:0 auto;padding:12px 18px}body.lesson-open #back,body.lesson-open .library-heading,body.lesson-open #library-view aside{display:none!important}body.lesson-open #library-view .layout{display:block!important}body.lesson-open #lesson-view{width:100%;border:1px solid #303947;border-radius:15px;overflow:hidden}body.lesson-open .player-toolbar{min-height:48px;padding:4px 14px;background:linear-gradient(120deg,#101a25,#0b121c)}body.lesson-open .player-lesson-title{display:none}body.lesson-open .tabs button span{display:none}body.lesson-open .tabs{border-bottom:1px solid #24313f}body.lesson-open .lesson-shell[data-mode=transcript]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}body.lesson-open .row{grid-template-columns:1fr}body.lesson-open .time{display:none}body.lesson-open .word{font-weight:650}body.lesson-open #words{height:calc(100svh - 132px);padding-block:calc((100svh - 132px)/2)}body.lesson-open .translation{color:#c4ae4e}body.lesson-open .admin-tools{padding:8px 14px}body.lesson-open.activity-open main{max-width:none;padding:0}body.lesson-open.activity-open #lesson-view{min-height:100svh;border-radius:0;border:0}body.lesson-open.activity-open .lesson-content{min-height:calc(100svh - 95px)}body.lesson-open.activity-open .tab-panel{width:100%;max-width:1400px;margin:auto;padding:clamp(18px,4vw,48px)}body.lesson-open.activity-open .flashcard{min-height:50svh}body.lesson-open.activity-open .vocab-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}body.lesson-open.activity-open .lesson-shell .player{display:none!important}
@media(max-width:800px){body.lesson-open main{padding:10px max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom))}body.lesson-open .lesson-shell[data-mode=transcript]{display:block}body.lesson-open .player-toolbar{min-height:44px;padding:3px 10px;gap:8px}body.lesson-open .player-navigation{gap:clamp(15px,6vw,35px)}body.lesson-open .player-home img{width:36px;height:36px}body.lesson-open .lesson-shell .player video{height:clamp(160px,29svh,350px);min-height:0;max-height:350px}body.lesson-open #words{height:calc(100svh - clamp(160px,29svh,350px) - 115px);min-height:180px;padding:calc((100svh - clamp(160px,29svh,350px) - 115px)/2) 10px}body.lesson-open .word{font-size:17px;line-height:1.8}body.lesson-open .tabs button{font-size:11px;min-height:44px}body.lesson-open .row{margin-top:18px}body.lesson-open .translation{font-size:15.6px;line-height:1.5;margin-top:4px}body.lesson-open.activity-open .tab-panel{padding:20px 14px}body.lesson-open .admin-tools button{font-size:10px;padding:6px}body.lesson-open .player-toolbar #speed{min-width:58px;width:65px;font-size:12px}} 

/* Compact toolbars return the saved height to the transcript. */
body.lesson-open .player-navigation button,body.lesson-open .player-home{min-height:36px}
body.lesson-open .player-navigation button{padding:1px 4px}
body.lesson-open .player-navigation svg{width:24px;height:24px}
body.lesson-open .player-navigation button span{font-size:23px}
body.lesson-open .player-navigation small{font-size:7px;line-height:1}
body.lesson-open .player-home img{width:30px;height:30px}
body.lesson-open .player-toolbar #speed{min-height:32px;height:32px;padding-block:4px}
body.lesson-open .transhead{padding:3px 12px;min-height:34px}
body.lesson-open .language-toggle button{padding:4px 9px;min-height:26px;font-size:9px}
@media(max-width:800px){body.lesson-open .player-home img{width:28px;height:28px}}

/* Keep transcript language next to Home in the compact navigation. */
body.lesson-open .player-navigation .language-toggle{gap:3px;margin-left:0}
body.lesson-open .player-navigation .language-toggle button{min-width:0;min-height:28px;padding:4px 8px;white-space:nowrap;border:1px solid #29394a;border-radius:18px;font-size:9px;color:#adbdce}
body.lesson-open .player-navigation .language-toggle button[aria-pressed=true]{color:#061a22;border-color:#3ec6da;background:#3ec6da}
@media(max-width:800px){body.lesson-open .player-navigation{gap:12px}body.lesson-open .player-navigation .language-toggle{gap:3px}body.lesson-open .player-toolbar{gap:6px}}
@media(max-width:380px){body.lesson-open .player-navigation{gap:6px}body.lesson-open .player-navigation>button,body.lesson-open .player-home{min-width:32px;width:32px}body.lesson-open .player-toolbar{padding-inline:8px}body.lesson-open .player-navigation .language-toggle button{padding-inline:6px}body.lesson-open .player-toolbar #speed{min-width:55px;width:55px}}

/* Subtle library navigation icon. */
body.lesson-open .player-navigation #player-libraries{color:#aebdce;border-radius:7px;transition:color .18s,background .18s}
body.lesson-open #player-libraries .library-outline{width:23px;height:23px;filter:none}
body.lesson-open #player-libraries small{color:inherit;font-weight:500;letter-spacing:.025em;font-size:7px;margin-top:2px}
body.lesson-open .player-navigation #player-libraries:hover{color:#e3edf7;background:#ffffff08}
body.lesson-open .player-navigation #player-libraries:focus-visible{outline:2px solid #91b9cd;outline-offset:2px}

.flashcard-surface{position:relative}.flashcard-surface .flashcard{padding-top:74px;padding-bottom:60px}.pronunciation-control{position:absolute;inset:14px 14px auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}.pronunciation-button{pointer-events:auto;display:inline-flex;gap:7px;align-items:center;justify-content:center;min-height:40px;padding:7px 12px;border:1px solid #547b914f;background:#0e2434;color:#a8d7e6;border-radius:22px;font-size:12px}.pronunciation-button svg{width:21px;height:21px}.pronunciation-button:hover,.pronunciation-button.is-speaking{background:#1b3c50;border-color:#75b4c8}.pronunciation-button:focus-visible{outline:2px solid #7ed3e2;outline-offset:3px}.pronunciation-button:disabled{opacity:.5;cursor:default}.pronunciation-feedback{max-width:280px;font-size:11px;line-height:1.5;color:#bacbd6;text-align:right}.pronunciation-feedback:empty{display:none}

.vocabulary-categories{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px}.vocabulary-categories .count-pill{font-size:11px;font-weight:500;padding:6px 10px}.vocab-item summary .word-category{white-space:nowrap}@media(max-width:480px){.vocab-item summary{flex-wrap:wrap}.vocab-item summary strong{flex:1;min-width:50%}.word-category{font-size:10px}}

.move-library-button{font-size:12px;white-space:nowrap}#move-library-select{width:100%;margin-top:8px;min-height:44px}#move-library-error{color:#f1a7af;font-size:13px}#move-video-title{font-weight:700;color:#d8e8f3}.admin-card-actions{justify-content:flex-end}

/* Opening a library shows its video tray before any lesson. */
body:not(.lesson-open) #library-view .layout{display:block}body:not(.lesson-open) #library-view aside{display:block!important;width:100%;margin-bottom:16px}body:not(.lesson-open) #library-view #library{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px;overflow:visible}body:not(.lesson-open) #library-view .entry{width:100%;max-width:none;min-width:0;margin:0;padding:12px;text-align:left}body:not(.lesson-open) #library-view .entry[aria-current=true]{background:#172130;border-color:#293947}

.collection-wrapper{min-width:0;display:flex;flex-direction:column}.collection-wrapper>.collection{width:100%;flex:1}.library-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 4px}.library-actions button{font-size:12px;padding:8px 13px}#manage-library-error{color:#f1a7af;font-size:13px}.visitor .library-actions{display:none}

.my-quota{padding:12px 16px;margin:16px 0;background:#142331;border:1px solid #294558;border-radius:10px;color:#a6cadc;font-size:12px;line-height:1.7}.personal #admin-nav,.personal #settings,.personal .admin-badge,.personal #new-library,.personal .stats,.personal .workflow,.personal .migration,.personal .library-actions,.personal #video-settings,.personal #regenerate-content,.personal #edit,.personal #ready,.personal #admin-view{display:none!important}.personal .intro{display:none}.personal .section-title p{display:none}.personal .layout .tip{display:none}.personal #empty-lesson{padding:40px 20px}.personal #upload-dialog .upload-grid{grid-template-columns:1fr}.personal.lesson-open #my-quota{display:none}.personal #admin-tools{display:flex;gap:8px}.personal #upload-dialog label:has(#upload-library){display:none}.personal #upload-dialog .form-help{line-height:1.7}.personal .player-toolbar #speed{margin-left:auto}

/* Three-column lesson catalog; additional rows grow downwards. */
body:not(.lesson-open) #library-view aside{padding:20px;background:transparent;border:0;box-shadow:none}
body:not(.lesson-open) #library-view #library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px;align-items:start}
body:not(.lesson-open) #library-view .entry{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:none;min-width:0;padding:0;gap:0;border:0;border-radius:12px;background:transparent;box-shadow:none;overflow:hidden;transition:transform .18s,background .18s}
body:not(.lesson-open) #library-view .entry:hover{transform:translateY(-3px);background:#ffffff04}
body:not(.lesson-open) #library-view .video-thumbnail{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin:0}
body:not(.lesson-open) #library-view .entry>span{display:block;min-width:0;padding:10px 2px 3px;font-size:15px;font-weight:650;line-height:1.45;overflow-wrap:anywhere}
body:not(.lesson-open) #library-view .entry small{font-size:10px;font-weight:400;color:#8896aa;margin-top:5px;line-height:1.4}
body:not(.lesson-open) #library-view .entry:focus-visible{outline:2px solid #65cede;outline-offset:5px}
@media(max-width:800px){body:not(.lesson-open) #library-view aside{padding:10px 0}body:not(.lesson-open) #library-view #library{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}body:not(.lesson-open) #library-view .entry>span{font-size:12px;padding-top:8px}body:not(.lesson-open) #library-view .entry small{font-size:9px}}
@media(max-width:480px){body:not(.lesson-open) #library-view #library{gap:18px 7px}body:not(.lesson-open) #library-view .video-thumbnail{border-radius:7px}body:not(.lesson-open) #library-view .entry>span{font-size:10px;line-height:1.4}body:not(.lesson-open) #library-view .entry small{font-size:8px;line-height:1.35}}
@media(prefers-reduced-motion:reduce){body:not(.lesson-open) #library-view .entry{transition:none}body:not(.lesson-open) #library-view .entry:hover{transform:none}}

/* Original brand artwork as the sole header home link. */
header .brand-logo-only{gap:0;flex-shrink:0;line-height:0}header .brand-logo-only img{display:block;width:62px;height:62px;object-fit:contain;border-radius:10px}header .brand-logo-only:focus-visible{outline:2px solid #65cede;outline-offset:3px;border-radius:10px}@media(max-width:800px){header .brand-logo-only img{width:54px;height:54px}}

/* Personal library presentation: compact header, quota and lesson grid. */
body.personal:not(.lesson-open)>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:10px max(4vw,20px);height:80px;border-bottom:1px solid #1b2939;background:#090f1a}
body.personal>header #upload{justify-self:center;font-size:12px;min-height:40px;padding:10px 17px;white-space:nowrap;border-radius:9px}
body.personal>header nav{margin:0;justify-content:flex-end;width:auto}
body.personal>header #home-nav{font-size:12px;padding:8px 0;white-space:nowrap;background:transparent;border:0;color:#5acbdd}
body.personal:not(.lesson-open) #back{display:none}
body.personal #my-quota{margin:16px 0 22px;padding:12px 15px;font-size:12px;line-height:1.65;background:#142532;border-color:#284454;border-radius:9px}
body.personal .library-heading{margin:0 0 24px;display:block}
body.personal .library-heading .eyebrow{font-size:10px;letter-spacing:1.5px}
body.personal .library-heading h1{font-size:30px;line-height:1.2;margin:9px 0 7px;letter-spacing:-.8px}
body.personal .library-heading p{margin:0;font-size:14px;line-height:1.5;color:#a4b2c7}
body.personal:not(.lesson-open) #library-view aside{padding:0;margin:0;background:transparent}
body.personal .sidehead{margin-bottom:14px}
body.personal .sidehead h2{font-size:15px}
body.personal #library-view{min-height:calc(100svh - 280px)}
@media(max-width:800px){body.personal:not(.lesson-open)>header{padding:9px max(15px,env(safe-area-inset-left)) 9px max(15px,env(safe-area-inset-right));gap:10px;height:76px}body.personal>header #upload{font-size:11px;padding:9px 13px;min-height:38px}body.personal>header #home-nav{font-size:11px}body.personal #my-quota{font-size:11px;padding:11px 12px;margin:14px 0 22px}body.personal .library-heading h1{font-size:25px}body.personal .library-heading p{font-size:12px}body.personal .library-heading{margin-bottom:23px}}
@media(max-width:380px){body.personal:not(.lesson-open)>header{gap:7px;padding-inline:12px}body.personal>header #upload{padding:8px 11px;font-size:10px}body.personal>header #home-nav{font-size:10px}body.personal .library-heading h1{font-size:22px}}

.upload-step{display:contents}.personal #upload-dialog{width:min(92vw,440px);padding:24px;border-radius:14px;background:linear-gradient(135deg,#14202c,#0d1520);border:1px solid #304252}.personal #upload-dialog .upload-grid{display:block}.personal #upload-dialog .dialog-head h2{font-size:19px}.personal #upload-dialog .upload-actions{display:flex;flex-direction:column;align-items:center;gap:22px;margin:25px 0 30px}.personal #upload-dialog .upload-step{display:flex;gap:14px;align-items:center;justify-content:center;width:100%;position:relative}.personal #upload-save-button,.personal #upload-generate-button{min-height:43px;min-width:180px;padding:11px 16px;font-size:12px;border-radius:9px}.personal #upload-save-button:disabled{opacity:.85}.personal #upload-generate-button:disabled{opacity:.5}.upload-success{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#b6dc40;color:#263708;font-size:24px;font-weight:750;position:absolute;right:0}.generation-spinner{width:28px;height:28px;border:4px solid #a4b7c433;border-top-color:#68d5e4;border-radius:50%;animation:lesson-spin .85s linear infinite;position:absolute;right:3px}#personal-upload-notes{font-size:11px;color:#a8b5c6;line-height:1.7;margin-top:28px}#personal-upload-notes p{font-size:11px;line-height:1.7;margin:0}#personal-upload-notes strong{color:#cdd7e3}.pending-terms{text-decoration:underline;text-underline-offset:2px;color:#98a9bc;cursor:default}.keep-open{color:#63c8d7;font-weight:650}.personal.lesson-open #admin-tools{display:none!important}.personal-video-tile{min-width:0}.personal-video-actions{display:flex;gap:5px;flex-wrap:wrap;padding:7px 0}.personal-video-actions button{font-size:10px;min-height:30px;padding:5px 8px}@keyframes lesson-spin{to{transform:rotate(360deg)}}@media(max-width:380px){.personal #upload-dialog{padding:20px}.personal #upload-save-button,.personal #upload-generate-button{min-width:160px;font-size:11px}.upload-success{width:28px;height:28px;font-size:21px;right:-5px}.generation-spinner{right:-5px;width:24px;height:24px}.personal-video-actions button{font-size:9px;padding:4px 5px}}

/* Start the transcript at the top; trailing room still lets later words center. */
#words, body.lesson-open #words { padding-top: 10px; }
#words > .row:first-child { margin-top: 0; }

/* Compact conversation-block spacing on mobile only. */
@media (max-width: 800px) {
  body.lesson-open #words > .row {
    margin-top: 6px;
    padding-block: 5px;
  }
  body.lesson-open #words > .row:first-child { margin-top: 0; }
}

/* Layered lesson cards retain the three-column catalog on every screen. */
body:not(.lesson-open) #library-view .entry {
  position: relative;
  border: 1px solid #33485c;
  background: linear-gradient(145deg, #1b2b3c, #101925 72%);
  box-shadow: inset 0 1px 0 #d4eeff1a, inset 1px 0 0 #b2d6ef0a, 0 4px 0 #080f19, 0 6px 0 #26374b, 0 13px 22px #0006;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body:not(.lesson-open) #library-view .entry > span { padding: 11px 10px 12px; }
body:not(.lesson-open) #library-view .video-thumbnail { border-radius: 10px 10px 0 0; border-bottom: 1px solid #91bac51a; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body:not(.lesson-open) #library-view .entry:hover { transform: perspective(800px) translateY(-5px) rotateX(2deg); border-color: #54798f; box-shadow: inset 0 1px #d4eeff26, 0 5px 0 #080f19, 0 7px 0 #30465b, 0 19px 28px #0008; }
}
body:not(.lesson-open) #library-view .entry:active { transform: translateY(2px); }
@media (max-width: 800px) {
  body:not(.lesson-open) #library-view .entry > span { padding: 8px 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.lesson-open) #library-view .entry { transition: none; }
  body:not(.lesson-open) #library-view .entry:active { transform: none; }
}

.admin-categories,.customer-controls{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.customer-controls{align-items:end}.customer-controls label{flex:1;min-width:180px}.customer-table-wrap{overflow:auto}.customer-table{width:100%;border-collapse:collapse;text-align:left}.customer-table th,.customer-table td{padding:16px 12px;border-bottom:1px solid #253343;vertical-align:top}.customer-table th{color:#38c2d5;font-size:12px}.customer-table td{font-size:14px;overflow-wrap:anywhere;min-width:150px}

.personal #subscriptions-nav,.visitor #subscriptions-nav{display:none!important}

.personal #students-nav,.visitor #students-nav{display:none!important}.student-check{display:flex;align-items:center;gap:10px}.student-check input{width:auto}#student-form{max-width:700px}#student-libraries{display:grid;gap:8px}#student-list .config-note button{margin:6px}.student-library.visitor #back{display:inline-block}

#student-status{padding:12px 0;font-weight:600}#student-status.student-error{color:#ffb4bd}#student-email[aria-invalid=true]{border-color:#ef8797}

/* Library books: CSS geometry keeps titles editable and images crisp. */
.collection{overflow:visible;background:transparent;border:0;box-shadow:none;padding:0;text-align:left}.collection:hover{background:transparent}.collection .cover{height:330px;background:radial-gradient(ellipse at 50% 90%,#3e607033,transparent 65%);display:flex;align-items:center;justify-content:center;overflow:visible;perspective:1000px;border-radius:16px}.collection .cover:after{display:none}.book-object{position:relative;width:200px;height:280px;transform:rotateY(-18deg) rotateZ(-2deg);transform-style:preserve-3d;transition:transform .3s;filter:drop-shadow(10px 18px 12px #0008)}.book-object:before{content:'';position:absolute;left:100%;top:5px;width:20px;height:calc(100% - 9px);background:repeating-linear-gradient(to right,#b3b9be 0 1px,#e6e8e6 1px 3px);transform:rotateY(65deg);transform-origin:left;border-radius:0 4px 4px 0;box-shadow:5px 1px 0 #71818b}.book-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:26px 20px 24px 27px;background:linear-gradient(140deg,#295b70,#18263e 70%,#111a2b);border:1px solid #ffffff35;border-left:9px solid #102434;border-radius:3px 6px 6px 3px;overflow:hidden;box-shadow:inset 3px 0 7px #0005,inset -1px 0 #ffffff30}.book-face:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#ffffff20,transparent 16%,transparent 85%,#ffffff12);pointer-events:none}.book-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.book-face:has(.book-image){background:#18263e}.book-face:has(.book-image):before{content:'';position:absolute;inset:0;background:linear-gradient(#0006,#0001 20%,#000a 65%,#000d);z-index:1}.book-edition,.book-title,.book-bottom{position:relative;z-index:2;color:#fff;text-shadow:0 2px 8px #0008}.book-edition{font-size:8px;letter-spacing:2px}.book-title{font-size:25px;line-height:1.13;letter-spacing:-.6px;overflow-wrap:anywhere;margin:auto 0 20px}.book-bottom{font-size:7px;letter-spacing:1.5px;color:#d7c58f}.collection:hover .book-object{transform:rotateY(-8deg) rotateZ(0deg) translateY(-5px)}.collection-body{padding:10px 8px 20px}.collection:focus-visible{outline:2px solid #40c5d7;outline-offset:6px}.collection-wrapper:nth-child(2n) .book-face{background:linear-gradient(140deg,#654560,#28203e);border-left-color:#382139}@media(max-width:600px){.collection .cover{height:290px}.book-object{width:180px;height:250px}}@media(prefers-reduced-motion:reduce){.book-object{transition:none}}
@media(max-width:600px){
.collections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;padding:8px 7px 25px;align-items:start}
.collections .collection{min-width:0;width:100%;padding:0}
.collections .collection .cover{height:auto;min-height:0;aspect-ratio:3/4;width:100%;background:none;padding:12px 8px 16px}
.collections .book-object{width:calc(100% - 15px);height:auto;aspect-ratio:2/3;max-width:180px;transform:rotateY(-14deg) rotateZ(-1deg);filter:drop-shadow(5px 9px 7px #0008)}
.collections .book-face{padding:15px 10px 12px 14px;border-left-width:5px}
.collections .book-object:before{width:12px;box-shadow:3px 1px 0 #71818b}
.collections .book-title{font-size:clamp(14px,4vw,22px);margin:auto 0 12px;letter-spacing:-.4px}
.collections .book-edition{font-size:clamp(5px,1.3vw,7px);letter-spacing:1px}
.collections .book-bottom{font-size:clamp(5px,1.2vw,7px);letter-spacing:.7px}
.collections .collection-body{display:none}
.collections .library-actions{justify-content:center;gap:5px;padding:0 0 8px}
.collections .library-actions button{font-size:10px;padding:6px 8px}
.student-library .section-title{gap:14px;margin-top:15px}
.student-library .section-title .search{order:-1}
.student-library .section-title h2{font-size:20px}
}
.library-account-link{margin-left:auto;font-size:12px;color:#a5bacb;white-space:nowrap}
@media(max-width:600px){
.student-library>header{height:56px;min-height:56px;padding:4px 16px;gap:12px}
.student-library>header .brand-logo-only img{width:44px;height:44px;object-fit:contain}
.student-library .library-account-link{font-size:11px;text-decoration:underline;text-underline-offset:3px}
.student-library #home-view>.intro{display:none}
.student-library #home-view>.section-title{margin:10px 0 5px;gap:9px}
.student-library #home-view>.section-title>div>p{display:none}
.student-library #home-view>.section-title h2{font-size:17px;line-height:1.25}
.student-library #home-view>.section-title .search{margin:0;width:100%;padding:0 10px;min-height:38px}
.student-library #home-view>.section-title .search input{font-size:12px;padding:9px 0;margin:0;min-height:36px}
.student-library #home-view .collections{gap:12px 18px;padding:2px 7px 16px}
.student-library #home-view .collection .cover{height:min(31svh,230px);aspect-ratio:auto;padding:10px 7px 15px}
.student-library #home-view .book-object{height:100%;width:auto;aspect-ratio:2/3;max-width:calc(100% - 12px)}
}
/* Video covers share the library book treatment without changing playback. */
body:not(.lesson-open) #library-view #library{padding:8px 12px 25px 2px;gap:25px 22px}
body:not(.lesson-open) #library-view .entry{position:relative;display:block;isolation:isolate;overflow:visible;margin:0;padding:0;width:calc(100% - 9px);border:0;border-left:5px solid #172d40;border-radius:3px 5px 5px 3px;background:#172b40;box-shadow:inset 2px 0 #ffffff20,7px 2px 0 -1px #ccd1d1,11px 4px 0 -1px #657784,8px 15px 20px #0007;transform:perspective(1000px) rotateY(-10deg) rotateZ(-1deg);transition:transform .2s;min-width:0;text-align:left}
body:not(.lesson-open) #library-view .entry .video-thumbnail{display:block;position:relative;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:2px 5px 5px 2px;margin:0;filter:none}
body:not(.lesson-open) #library-view .entry:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#ffffff18,transparent 12%,transparent 85%,#ffffff16),linear-gradient(transparent 35%,#0007 60%,#000e);border-radius:2px 5px 5px 2px;pointer-events:none;z-index:1}
body:not(.lesson-open) #library-view .entry>span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 12px!important;font-size:clamp(13px,1.7vw,20px);font-weight:750;line-height:1.2;color:#fff;text-shadow:0 2px 6px #000;overflow-wrap:anywhere}
body:not(.lesson-open) #library-view .entry small{font-size:10px;line-height:1.35;color:#c4d7df;font-weight:400;margin-top:7px}
body:not(.lesson-open) #library-view .entry[aria-current=true]{outline:2px solid #43c9dc;outline-offset:4px}
.personal-video-tile{min-width:0}.personal-video-actions{padding-top:12px}
@media(hover:hover){body:not(.lesson-open) #library-view .entry:hover{transform:perspective(1000px) rotateY(-4deg) translateY(-4px);box-shadow:7px 2px 0 -1px #ccd1d1,11px 4px 0 -1px #657784,8px 19px 24px #0008}}
@media(max-width:600px){body:not(.lesson-open) #library-view #library{gap:22px 15px;padding-right:10px}body:not(.lesson-open) #library-view .entry{border-left-width:3px;box-shadow:5px 1px 0 -1px #ccd1d1,8px 3px 0 -1px #657784,5px 10px 14px #0007}body:not(.lesson-open) #library-view .entry>span{padding:10px 6px!important;font-size:clamp(10px,2.8vw,15px)}body:not(.lesson-open) #library-view .entry small{font-size:8px;margin-top:5px}}
@media(prefers-reduced-motion:reduce){body:not(.lesson-open) #library-view .entry{transition:none}body:not(.lesson-open) #library-view .entry:hover{transform:none}}
.lesson-stages{list-style:none;padding:0;margin:25px 0;display:grid;gap:12px}.lesson-stages li{display:flex;justify-content:space-between;align-items:center;padding:18px;border:1px solid #2e4356;border-radius:12px;background:#101f2e;font-weight:750}.lesson-stages strong{font-size:12px;color:#8eabbf}.lesson-stages [data-state=active]{border-color:#44c6da;background:#14303d}.lesson-stages [data-state=active] strong{color:#58d9e4}.lesson-stages [data-state=done] strong{color:#a2dc82;font-size:24px}.lesson-stages [data-state=done]{border-color:#467451}.lesson-stages [data-state=error]{border-color:#b7756c}.lesson-ai-reminder{border-top:1px solid #2e4356;padding-top:17px;font-size:11px;line-height:1.6;color:#93a9bb}#lesson-progress-message{font-size:13px;line-height:1.6}#lesson-progress-title{overflow-wrap:anywhere}

/* Closer bilingual script lines on mobile. */
@media(max-width:800px){
  #words .word,body.lesson-open #words .word{line-height:1.6}
  #words .translation{line-height:1.5;margin-top:4px}
}

.library-video-tile{min-width:0}.library-video-tile>.entry{width:100%}.lesson-pdf-download{display:flex;align-items:center;justify-content:center;min-height:38px;margin:8px 0 2px;padding:8px;border:1px solid #376277;border-radius:8px;background:#122d3a;color:#8de2eb;text-decoration:none;font-size:12px;font-weight:650;text-align:center}.lesson-pdf-download:hover{background:#1a3c4a}.lesson-pdf-download:focus-visible{outline:2px solid #81dce9;outline-offset:3px}.pdf-remove{display:flex;align-items:center;gap:8px}.pdf-remove input{width:auto;margin:0}@media(max-width:600px){.lesson-pdf-download{font-size:11px;padding:7px 4px}}

/* Transcript area is reserved for reading; actions belong in the toolbar. */
.player-navigation #repair-translation{display:flex;align-items:center;justify-content:center;width:96px;min-width:96px;min-height:38px;padding:5px 8px;border:1px solid #74548e;border-radius:10px;background:#47305d;color:#f2e7ff;font-size:11px;line-height:1.2;white-space:normal;text-align:center;flex-shrink:0}.player-navigation #repair-translation:hover{background:#5a3d72}.player-navigation #repair-translation:focus-visible{outline:2px solid #cba7eb;outline-offset:2px}@media(max-width:800px){body.lesson-open .player-navigation{gap:8px}body.lesson-open .player-navigation #repair-translation{width:74px;min-width:74px;min-height:36px;font-size:10px;padding:4px 6px}}@media(max-width:380px){body.lesson-open .player-navigation{gap:5px}body.lesson-open .player-navigation #repair-translation{width:66px;min-width:66px;font-size:9px}}

/* Unified upper player controls; keep all actions outside the script panel. */
body.lesson-open .player-toolbar{--control-height:36px;display:flex;align-items:center;gap:10px;padding:5px 12px;min-height:46px}
body.lesson-open .player-toolbar .player-navigation{flex:1;min-width:0;max-width:560px;align-items:center;justify-content:space-between;gap:8px}
body.lesson-open .player-navigation>button,body.lesson-open .player-navigation .player-home,body.lesson-open .player-navigation .language-toggle button,body.lesson-open .player-navigation #repair-translation,body.lesson-open .player-toolbar #speed{height:var(--control-height);min-height:var(--control-height);box-sizing:border-box;border-radius:9px;margin-block:0}
body.lesson-open .player-navigation>button,body.lesson-open .player-navigation .player-home{width:36px;min-width:36px;padding:2px 4px;flex-shrink:0}
body.lesson-open .player-navigation #player-back svg{width:22px;height:22px}
body.lesson-open #player-libraries .library-outline{width:20px;height:20px}
body.lesson-open #player-libraries small{margin-top:1px;font-size:7px}
body.lesson-open .player-navigation .player-home img{width:28px;height:28px}
body.lesson-open .player-navigation #repair-translation{width:66px;min-width:66px;padding:3px 5px;font-size:9px;line-height:1.15}
body.lesson-open .player-navigation .language-toggle{display:flex;align-items:center;gap:4px;padding:0;flex-shrink:0}
body.lesson-open .player-navigation .language-toggle button{display:flex;align-items:center;justify-content:center;padding:0 9px;min-width:32px;font-size:9px;line-height:1}
body.lesson-open .player-toolbar #speed{appearance:none;-webkit-appearance:none;background-image:none;width:38px;min-width:38px;max-width:38px;padding:0;text-align:center;text-align-last:center;font-size:11px;margin-left:auto;flex-shrink:0}
@media(max-width:380px){body.lesson-open .player-toolbar{gap:6px;padding-inline:8px}body.lesson-open .player-toolbar .player-navigation{gap:5px}body.lesson-open .player-navigation #repair-translation{width:60px;min-width:60px;font-size:8.5px}body.lesson-open .player-navigation .language-toggle button{padding-inline:6px}}

/* Compact controls at 75% of the previous size. */
body.lesson-open .player-toolbar{--control-height:27px;min-height:37px;gap:7.5px;padding:5px 9px}
body.lesson-open .player-toolbar .player-navigation{max-width:420px;gap:6px}
body.lesson-open .player-navigation>button,body.lesson-open .player-navigation .player-home{width:27px;min-width:27px;padding:1.5px 3px}
body.lesson-open .player-navigation #player-back svg{width:16.5px;height:16.5px}
body.lesson-open #player-libraries .library-outline{width:15px;height:15px}
body.lesson-open #player-libraries small{font-size:6px;margin-top:0}
body.lesson-open .player-navigation .player-home img{width:21px;height:21px}
body.lesson-open .player-navigation #repair-translation{width:49.5px;min-width:49.5px;height:27px;min-height:27px;padding:2px 3px;font-size:7px;border-radius:7px}
body.lesson-open .player-navigation .language-toggle{gap:3px}
body.lesson-open .player-navigation .language-toggle button{min-width:24px;padding:0 6.75px;font-size:7px;border-radius:7px}
body.lesson-open .player-toolbar #speed{width:28.5px;min-width:28.5px;max-width:28.5px;font-size:8.25px;border-radius:7px}
/* Consistent line icons identify each learning section without occupying script space. */
.tabs button{display:flex;align-items:center;justify-content:center;gap:7px}
.tabs .lesson-tab-icon{display:block;width:19px;height:19px;flex-shrink:0;opacity:.8}
.tabs button[aria-selected=true] .lesson-tab-icon{opacity:1;filter:drop-shadow(0 0 5px #43c9dc35)}
body.lesson-open .tabs button{gap:7px}
@media(max-width:800px){body.lesson-open .tabs button{flex-direction:row;gap:5px}body.lesson-open .tabs .lesson-tab-icon{width:16px;height:16px}}
@media(max-width:380px){body.lesson-open .player-toolbar{gap:4.5px;padding-inline:6px}body.lesson-open .player-toolbar .player-navigation{gap:4px}body.lesson-open .player-navigation #repair-translation{width:45px;min-width:45px;font-size:6.5px}body.lesson-open .player-navigation .language-toggle button{padding-inline:4.5px}}

/* Device-specific toolbar sizing: mobile Library +10%, desktop controls +25%. */
@media(max-width:800px){
body.lesson-open .player-navigation #player-libraries{width:29.7px;min-width:29.7px;height:29.7px;min-height:29.7px}
body.lesson-open #player-libraries .library-outline{width:16.5px;height:16.5px}
body.lesson-open #player-libraries small{font-size:6.6px}
}
@media(min-width:801px){
body.lesson-open .player-toolbar{--control-height:33.75px;min-height:44px;gap:9.375px}
body.lesson-open .player-toolbar .player-navigation{max-width:525px;gap:7.5px}
body.lesson-open .player-navigation>button,body.lesson-open .player-navigation .player-home{width:33.75px;min-width:33.75px;padding:1.875px 3.75px}
body.lesson-open .player-navigation #player-back svg{width:20.625px;height:20.625px}
body.lesson-open #player-libraries .library-outline{width:18.75px;height:18.75px}
body.lesson-open #player-libraries small{font-size:7.5px}
body.lesson-open .player-navigation .player-home img{width:26.25px;height:26.25px}
body.lesson-open .player-navigation #repair-translation{width:61.875px;min-width:61.875px;height:33.75px;min-height:33.75px;padding:2.5px 3.75px;font-size:8.75px}
body.lesson-open .player-navigation .language-toggle{gap:3.75px}
body.lesson-open .player-navigation .language-toggle button{min-width:30px;padding-inline:8.4375px;font-size:8.75px}
body.lesson-open .player-toolbar #speed{width:35.625px;min-width:35.625px;max-width:35.625px;font-size:10.3125px}
}

/* One segmented language control; only the selected mode is illuminated. */
body.lesson-open .player-navigation .language-toggle{gap:0;border:1px solid #354459;border-radius:8px;overflow:hidden;background:#101a28;height:var(--control-height);box-sizing:border-box}
body.lesson-open .player-navigation .language-toggle button{height:100%;min-height:0;border:0;border-radius:0;background:transparent;color:#a9b8c9;font-weight:750;box-shadow:none}
body.lesson-open .player-navigation .language-toggle button+button{border-left:1px solid #354459}
body.lesson-open .player-navigation .language-toggle button[aria-pressed=true]{background:#3ec6da;color:#061a22;box-shadow:inset 0 0 9px #a1f6ff40}
body.lesson-open .player-navigation .language-toggle button[aria-pressed=false]{background:transparent;box-shadow:none}
body.lesson-open .player-navigation .language-toggle button:focus-visible{outline:2px solid #e0fbff;outline-offset:-3px}
body.lesson-open .player-navigation button,body.lesson-open .player-navigation small,body.lesson-open .player-toolbar #speed{font-weight:750}

/* Center the pill language selector in the space between navigation and speed. */
body.lesson-open .player-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px}
body.lesson-open .player-toolbar .player-navigation{max-width:none;flex:initial;justify-content:flex-start}
body.lesson-open .player-toolbar>.language-toggle{display:flex;justify-self:center;align-items:center;gap:0;height:var(--control-height);padding:0;margin:0;border:1px solid #354459;border-radius:999px;overflow:hidden;background:#101a28;box-sizing:border-box}
body.lesson-open .player-toolbar>.language-toggle button{display:flex;align-items:center;justify-content:center;height:100%;min-height:0;min-width:24px;padding:0 6.75px;border:0;border-radius:0;background:transparent;color:#a9b8c9;font-size:7px;font-weight:750;line-height:1;white-space:nowrap;box-shadow:none}
body.lesson-open .player-toolbar>.language-toggle button+button{border-left:1px solid #354459}
body.lesson-open .player-toolbar>.language-toggle button[aria-pressed=true]{background:#3ec6da;color:#061a22;box-shadow:inset 0 0 9px #a1f6ff40}
body.lesson-open .player-toolbar>.language-toggle button:focus-visible{outline:2px solid #e0fbff;outline-offset:-3px;border-radius:999px}
body.lesson-open .player-toolbar #speed{margin-left:0}
@media(min-width:801px){body.lesson-open .player-toolbar>.language-toggle button{min-width:30px;padding-inline:8.4375px;font-size:8.75px}}
@media(max-width:380px){body.lesson-open .player-toolbar{column-gap:8px}body.lesson-open .player-toolbar>.language-toggle button{padding-inline:4.5px}}

/* Five evenly distributed controls, retaining their original visual order. */
body.lesson-open .player-toolbar{display:flex;align-items:center;justify-content:space-between;gap:clamp(5px,2vw,18px);padding-block:7px}
body.lesson-open .player-toolbar .player-navigation{display:contents}
body.lesson-open .player-toolbar .player-navigation>button,body.lesson-open .player-toolbar .player-home,body.lesson-open .player-toolbar>.language-toggle,body.lesson-open .player-toolbar #speed{flex:none;margin:0;position:relative;border:1px solid #46546b;border-radius:8px;background:linear-gradient(160deg,#28374a,#142031);color:#d5e6f2;box-shadow:inset 0 1px 0 #ffffff26,inset 0 -1px 0 #0005,0 3px 0 #080e18,0 5px 8px #0005;transition:transform .15s,box-shadow .15s,filter .15s;font-weight:750}
body.lesson-open .player-toolbar .player-navigation #repair-translation{border-color:#79608f;background:linear-gradient(150deg,#65467d,#3e2b51);color:#f2e7ff}
body.lesson-open .player-toolbar>.language-toggle{border-radius:999px;background:linear-gradient(150deg,#26364a,#111c2b);overflow:hidden}
body.lesson-open .player-toolbar>.language-toggle button{background:transparent;box-shadow:none;font-weight:750}
body.lesson-open .player-toolbar>.language-toggle button[aria-pressed=true]{background:linear-gradient(145deg,#71e1ea,#32b8cc);box-shadow:inset 0 1px #d7fbff70;color:#06232a}
body.lesson-open .player-toolbar #speed{background-image:linear-gradient(160deg,#28374a,#142031);appearance:none}
body.lesson-open .player-toolbar .player-navigation>button:hover,body.lesson-open .player-toolbar .player-home:hover,body.lesson-open .player-toolbar #speed:hover{filter:brightness(1.12)}
body.lesson-open .player-toolbar .player-navigation>button:active,body.lesson-open .player-toolbar .player-home:active{transform:translateY(2px);box-shadow:inset 0 1px #ffffff18,0 1px 0 #080e18,0 2px 4px #0004}
@media(prefers-reduced-motion:reduce){body.lesson-open .player-toolbar .player-navigation>button,body.lesson-open .player-toolbar .player-home,body.lesson-open .player-toolbar>.language-toggle,body.lesson-open .player-toolbar #speed{transition:none}}

/* Real two-sided card: toggling rotates the existing element instead of redrawing it. */
.flashcard-surface .flashcard.flip-card{display:block;padding:0;border:0;background:transparent;box-shadow:none;perspective:1200px;overflow:visible;text-align:center}
.flip-card .flashcard-inner{display:grid;min-height:inherit;width:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.22,.7,.25,1);transform:rotateY(0deg)}
.flip-card.is-flipped .flashcard-inner{transform:rotateY(180deg)}
.flip-card .flashcard-face{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-width:0;min-height:inherit;padding:74px 24px 60px;border:1px solid #36556a;border-radius:18px;background:radial-gradient(ellipse at 50% 0,#203d50,#101723 75%);box-shadow:inset 0 1px #ffffff20,0 8px 0 #07101c,0 18px 30px #0005;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow-wrap:anywhere}
.flip-card .flashcard-front{transform:rotateY(0deg)}
.flip-card .flashcard-back{transform:rotateY(180deg);background:radial-gradient(ellipse at 50% 0,#3b3159,#131b2b 75%);border-color:#5c527b}
.flip-card .flashcard-definition,.flip-card .example{display:block;font-size:14px;line-height:1.6;color:#b8c6d4;max-width:100%}
.flashcard-surface .pronunciation-control{z-index:2}
@media(prefers-reduced-motion:reduce){.flip-card .flashcard-inner{transition:none}}

.matching-stage{max-width:760px;margin:20px auto}
.matching-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,4vw,40px);margin:22px 0}
.matching-column{display:flex;flex-direction:column;gap:12px;min-width:0}
.matching-column h3{color:var(--muted);font-size:13px;text-align:center;margin-bottom:6px}
.matching-choice{width:100%;min-height:64px;padding:14px 12px;overflow-wrap:anywhere;text-align:center;font-weight:700;line-height:1.4;border:1px solid #36556a;background:linear-gradient(140deg,#1c3345,#111c2b);box-shadow:0 4px 0 #07101c;border-radius:12px;transition:background .15s,border-color .15s}
.matching-choice.is-selected{border-color:#43c9dc;background:#174452;outline:2px solid #43c9dc;outline-offset:2px}
.matching-choice.is-matched{border-color:#74c79b;background:#163b30;color:#b7f2cc;opacity:1;cursor:default;box-shadow:none}
.matching-choice.is-wrong{border-color:#e19299;background:#492630;color:#ffd2d6}
.matching-choice:disabled:not(.is-matched){opacity:.65;cursor:default}
@media(max-width:600px){.matching-choice{font-size:13px;padding:12px 8px;min-height:64px}.matching-board{gap:16px}}
.practice-card-stage{width:100%;max-width:600px;margin:24px auto;display:grid;gap:18px}
.practice-card-stage>h2{text-align:center}
.practice-card-stage .practice-card{min-height:300px;margin:0;padding:28px;display:flex;flex-direction:column;justify-content:center;gap:18px;background:radial-gradient(ellipse at top,#203749,#101723 75%);border:1px solid #36556a;border-radius:18px;box-shadow:0 8px 0 #07101c,0 18px 30px #0004}
.practice-card-sentence{font-size:clamp(18px,2vw,24px);line-height:1.6;text-align:center}
.practice-card input{width:100%;max-width:none;margin:0}
.practice-card-actions{display:flex;gap:10px;flex-wrap:wrap}
.practice-card .chosen-words{min-height:60px;padding:12px;border:1px dashed #527085;border-radius:10px}
@media(max-width:600px){.practice-card-stage{margin:18px auto}.practice-card-stage .practice-card{padding:20px;min-height:270px}}
.student-library>header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px}
.student-library>header .library-header-navigation{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-width:0}
.library-header-link{font-size:13px;color:#a5bacb;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;text-align:center}
.library-header-link:last-child{justify-self:end}
.library-header-arrow{color:var(--accent);font-weight:800}
.student-library.visitor #back{display:none}
@media(max-width:600px){
  .student-library>header{padding-inline:12px;gap:10px}
  .student-library>header .library-header-navigation{gap:8px}
  .library-header-link{font-size:clamp(10px,2.7vw,12px)}
}
/* Half-size video book covers on desktop; keep the mobile catalog unchanged. */
@media(min-width:801px){
  body:not(.lesson-open) #library-view #library{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:8.8px}
  body:not(.lesson-open) #library-view .entry{width:calc(100% - 4.5px);border-left-width:3px;box-shadow:inset 1px 0 #ffffff20,3.5px 1px 0 -.5px #ccd1d1,5.5px 2px 0 -.5px #657784,4px 8px 12px #0007}
  body:not(.lesson-open) #library-view .entry>span{padding:8px 6px!important;font-size:clamp(11px,1vw,14px)}
  body:not(.lesson-open) #library-view .entry small{font-size:9px;margin-top:4px}
}