:root{
  --ink:#17324d;--muted:#687b8c;--paper:#f4f7f9;--card:#fff;--line:#dce5eb;
  --soft:#eaf2f8;--blue:#2e638e;--orange:#a65a1c;--success:#1f7a4d;--danger:#a5443d;
  --yellow:#fff2bd;--shadow:0 12px 34px rgba(23,50,77,.10);--radius:26px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:ui-rounded,"Avenir Next Rounded","Segoe UI Rounded","Arial Rounded MT Bold","Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper)}
button,input{font:inherit} button{color:inherit}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:11px max(15px,env(safe-area-inset-right)) 11px max(15px,env(safe-area-inset-left));background:rgba(244,247,249,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,229,235,.9)}
.brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0;border:0;background:transparent;text-align:left;cursor:pointer}
.brand-mark{width:43px;height:43px;border-radius:13px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px}
.brand-copy{display:grid;line-height:1.08}.brand-copy strong{font-size:17px}.brand-copy small{font-size:11px;color:var(--muted);margin-top:4px}
.icon-btn,.profile-pill,.primary,.secondary,.mode-btn,.book-card,.course-card,.unit-card,.choice-btn,.star-btn,.listen-btn{border:0;cursor:pointer}
.icon-btn{width:42px;height:42px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:20px}
.profile-pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 13px;font-weight:800;white-space:nowrap}
main{max-width:1120px;margin:0 auto;padding:25px 18px 60px}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:8px 0 24px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--muted)}
h1{font-size:clamp(31px,5vw,52px);line-height:1.02;letter-spacing:-.04em;margin:7px 0 9px}
h2{letter-spacing:-.025em}.lead{max-width:700px;color:var(--muted);font-size:17px;line-height:1.55;margin:0}
.stats{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 11px;font-size:12px;font-weight:850}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:31px 0 13px}.section-head h2{margin:0;font-size:24px}.section-head p{margin:4px 0 0;color:var(--muted)}
.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.book-card,.course-card,.unit-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:left;box-shadow:0 2px 0 rgba(23,50,77,.02);transition:.15s}
.book-card:hover,.course-card:hover,.unit-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.book-card h3,.course-card h3{font-size:20px;margin:13px 0 6px}.book-card p,.course-card p{color:var(--muted);margin:0;line-height:1.45}
.level{display:inline-flex;border-radius:999px;padding:6px 9px;background:var(--soft);font-size:11px;font-weight:900}
.level.orange{background:#f8ece2;color:#7b4316}.recommended{display:inline-flex;border-radius:999px;padding:6px 9px;background:var(--yellow);font-size:11px;font-weight:900}
.card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.progress-row{display:flex;align-items:center;gap:10px;margin-top:16px}.track{height:9px;flex:1;background:#edf1f4;border-radius:999px;overflow:hidden}.fill{height:100%;background:var(--ink);border-radius:999px}.pct{font-size:11px;font-weight:900;color:var(--muted);min-width:42px;text-align:right}
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.course-card{min-height:190px}.course-card.blue{border-top:5px solid var(--blue)}.course-card.orange{border-top:5px solid var(--orange)}
.unit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.unit-card{padding:15px;min-height:147px}
.unit-no{font-size:11px;font-weight:950;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.unit-card h3{font-size:16px;margin:7px 0 10px;line-height:1.25}.words-preview{font-size:12px;line-height:1.45;color:var(--muted)}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.mode-btn{background:#fff;border:1px solid var(--line);border-radius:19px;padding:16px;text-align:left;min-height:140px}.mode-icon{font-size:25px;margin-bottom:12px}.mode-btn strong{display:block;font-size:16px;margin-bottom:4px}.mode-btn span{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.word-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.word-pill{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px;font-weight:800}
.study-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:15px}.study-head h1{font-size:clamp(26px,4vw,38px);margin:5px 0 2px}.study-head p{margin:0;color:var(--muted)}
.study-shell{max-width:720px;margin:0 auto}.study-status{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:850;margin:0 2px 8px}.study-progress{height:8px;background:#e5ebef;border-radius:999px;overflow:hidden;margin-bottom:14px}.study-progress div{height:100%;background:var(--ink)}
.study-card{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);min-height:510px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.image-stage{height:320px;width:min(100%,440px);display:grid;place-items:center}.image-stage img{max-width:100%;max-height:100%;object-fit:contain}
.prompt{text-align:center;color:var(--muted);font-weight:850;margin-bottom:14px}.answer-word{font-size:clamp(35px,7vw,57px);font-weight:950;letter-spacing:-.03em;text-align:center;margin:13px 0}
.primary,.secondary,.listen-btn{border-radius:16px;padding:13px 20px;font-weight:850}.primary{background:var(--ink);color:#fff}.secondary,.listen-btn{background:#fff;border:1px solid var(--line)}
.action-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:15px}
.flash-actions{width:min(100%,430px);display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.flash-actions button{border:0;border-radius:15px;padding:14px;font-weight:900;cursor:pointer}.again{background:#f7e8e6;color:var(--danger)}.gotit{background:#e3f2e8;color:var(--success)}
.type-form{width:min(100%,480px);margin-top:14px}.type-input{width:100%;padding:15px 16px;border:2px solid var(--line);border-radius:17px;font-size:21px;text-align:center;outline:none;background:#fbfcfd}.type-input:focus{border-color:#7d98ae;background:#fff}
.feedback{min-height:32px;text-align:center;font-size:18px;font-weight:900;margin-top:10px}.good{color:var(--success)}.bad{color:var(--danger)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,530px);margin-top:16px}.choice-btn{background:#f8fafb;border:2px solid var(--line);border-radius:16px;min-height:61px;padding:10px;font-weight:850}.choice-btn.correct{background:#e3f2e8;border-color:#79b692;color:var(--success)}.choice-btn.wrong{background:#f7e8e6;border-color:#d7a19d;color:var(--danger)}
.star-btn{position:absolute;right:17px;top:17px;width:43px;height:43px;border-radius:50%;background:#f3f6f8;font-size:23px}.star-btn.active{background:var(--yellow)}
.spell-hero{font-size:clamp(37px,8vw,64px);font-weight:950;letter-spacing:.08em;text-align:center;margin:17px 0}.blanks{letter-spacing:.12em;word-break:break-all}
.listen-big{width:116px;height:116px;border-radius:50%;border:0;background:var(--ink);color:white;font-size:44px;cursor:pointer;box-shadow:0 10px 24px rgba(23,50,77,.18)}
.listen-note{color:var(--muted);font-size:13px;margin-top:9px}
.results{max-width:650px;margin:25px auto;background:#fff;border:1px solid var(--line);border-radius:27px;padding:28px;text-align:center;box-shadow:var(--shadow)}
.score-ring{width:140px;height:140px;border-radius:50%;margin:17px auto;background:conic-gradient(var(--ink) var(--score),#e7edf1 0);display:grid;place-items:center}.score-inner{width:111px;height:111px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:28px;font-weight:950}
.notice{background:#edf5fa;border:1px solid #cfe0eb;border-radius:16px;padding:12px 14px;color:#49677d;font-size:13px;line-height:1.45}
.modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(13,29,44,.44);display:grid;place-items:center;padding:18px}.modal{width:min(520px,100%);background:#fff;border-radius:27px;padding:28px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.24)}.modal h2{font-size:28px;margin:5px 0}.modal-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:31px;cursor:pointer}.muted{color:var(--muted)}
.profile-grid{display:grid;gap:10px;margin-top:18px}.profile-choice{border:2px solid var(--line);background:#f8fafb;border-radius:19px;padding:14px;display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left;gap:12px;cursor:pointer}.profile-choice span:last-child{display:grid}.profile-choice small{color:var(--muted);margin-top:3px}.avatar{width:51px;height:51px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:950}
.hidden{display:none!important}
@media(max-width:850px){.book-grid,.unit-grid{grid-template-columns:1fr 1fr}.quick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
 main{padding:19px 12px 45px}.brand-copy small{display:none}.profile-pill{font-size:12px;padding:9px 10px}.hero{align-items:flex-start;flex-direction:column}
 .book-grid,.course-grid,.unit-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr 1fr}.word-list{grid-template-columns:1fr 1fr}
 .study-head{align-items:flex-start;flex-direction:column}.study-card{min-height:480px;padding:17px}.image-stage{height:275px}.choice-grid{grid-template-columns:1fr}
}


/* =========================================================
   V2.2 — LIGHT / DARK APPEARANCE
   ========================================================= */
.theme-btn{
  width:42px;height:42px;border-radius:14px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:20px;font-weight:850;
  cursor:pointer;display:grid;place-items:center;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.theme-btn:hover{transform:translateY(-1px)}

html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e6edf3;
  --muted:#9aabba;
  --paper:#101820;
  --card:#17232e;
  --line:#2b3b48;
  --soft:#203340;
  --blue:#78a9cf;
  --orange:#d9955b;
  --success:#88d1a8;
  --danger:#efa09a;
  --yellow:#4b4123;
  --shadow:0 14px 38px rgba(0,0,0,.30);
}
html[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .topbar{
  background:rgba(16,24,32,.94);
  border-bottom-color:#263641;
}
html[data-theme="dark"] .theme-btn,
html[data-theme="dark"] .profile-pill,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .book-card,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .unit-card,
html[data-theme="dark"] .mode-btn,
html[data-theme="dark"] .word-pill,
html[data-theme="dark"] .study-card,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .listen-btn,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .results{
  background:#17232e;
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] .profile-choice,
html[data-theme="dark"] .choice-btn{
  background:#1c2a35;
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] .type-input{
  background:#1c2a35;
  border-color:var(--line);
  color:var(--ink);
}
html[data-theme="dark"] .type-input:focus{
  background:#17232e;
  border-color:#6f96b3;
}
html[data-theme="dark"] .track,
html[data-theme="dark"] .study-progress{background:#263744}
html[data-theme="dark"] .fill,
html[data-theme="dark"] .study-progress div{background:#8db5d2}
html[data-theme="dark"] .level{background:#203746;color:#d6e7f2}
html[data-theme="dark"] .level.orange{background:#3b2b20;color:#efbd94}
html[data-theme="dark"] .recommended{background:#4b4123;color:#f1dc8e}
html[data-theme="dark"] .notice{
  background:#172c3a;border-color:#29475a;color:#bad2e2;
}
html[data-theme="dark"] .primary,
html[data-theme="dark"] .listen-big{
  background:#d8e5ee;color:#12202b;
}
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .avatar{
  background:#d8e5ee;color:#12202b;
}
html[data-theme="dark"] .star-btn{background:#22323e;color:var(--ink)}
html[data-theme="dark"] .star-btn.active{background:#4b4123;color:#f3dc79}
html[data-theme="dark"] .again{background:#442826;color:#f2aaa4}
html[data-theme="dark"] .gotit{background:#193a2b;color:#9cd8b6}
html[data-theme="dark"] .choice-btn.correct{
  background:#193a2b;border-color:#3d7658;color:#9cd8b6
}
html[data-theme="dark"] .choice-btn.wrong{
  background:#442826;border-color:#7b4642;color:#f2aaa4
}
html[data-theme="dark"] .feedback.good{color:#9cd8b6}
html[data-theme="dark"] .feedback.bad{color:#f2aaa4}
html[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.64)}
html[data-theme="dark"] .score-inner{background:#17232e}

/* Keep the Oxford artwork itself on white, even in dark mode. */
html[data-theme="dark"] .image-stage{
  background:#fff;
  border-radius:22px;
  padding:4px;
}
html[data-theme="dark"] .image-stage img{border-radius:18px}

@media(max-width:600px){
  .theme-btn{width:38px;height:38px;font-size:18px}
}


/* =========================================================
   V2.3 — ALDER LANGUAGE LEARNING VISUAL POLISH
   Premium educational app: warm, clear, age 7–12.
   ========================================================= */

/* Branding */
.brand-mark{
  border-radius:16px;
  font-size:22px;
  letter-spacing:-.04em;
}
.brand-copy strong{
  font-size:18px;
  letter-spacing:-.015em;
}
.brand-copy small{
  font-size:11px;
  letter-spacing:.025em;
}

/* Softer, friendlier heading language */
h1,h2,h3,
.book-card h3,.course-card h3,.unit-card h3,
.primary,.secondary,.mode-btn strong,.word-pill,.profile-pill{
  font-family:ui-rounded,"Avenir Next Rounded","Segoe UI Rounded","Arial Rounded MT Bold","Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
h1{
  font-weight:900;
  letter-spacing:-.045em;
}
h2{font-weight:900}
h3{font-weight:850}

/* Home screen: deliberately simpler than a marketing landing page */
.home-hero{
  margin-top:18px;
  margin-bottom:34px;
}
.home-hero .eyebrow{
  font-size:13px;
  letter-spacing:.14em;
  color:var(--muted);
}
.home-hero h1{
  margin-top:10px;
  font-size:clamp(38px,6vw,64px);
}

/* Section identity through restrained colour, not decoration */
.vocabulary-head h2::before,
.spelling-head h2::before{
  content:"";
  display:inline-block;
  width:9px;
  height:28px;
  border-radius:999px;
  margin-right:11px;
  vertical-align:-4px;
}
.vocabulary-head h2::before{background:#5b9bc6}
.spelling-head h2::before{background:#d39152}

html[data-theme="dark"] .vocabulary-head h2::before{background:#7bb8df}
html[data-theme="dark"] .spelling-head h2::before{background:#e1a66c}

/* Cards: a touch more generous and tactile */
.book-card,.course-card,.unit-card,.mode-btn{
  border-radius:26px;
}
.book-card,.course-card{
  padding:20px;
}
.book-card h3,.course-card h3{
  margin-top:15px;
  font-size:21px;
}
.book-card p,.course-card p{
  line-height:1.5;
}

/* Subtle subject accents */
.book-card{
  position:relative;
  overflow:hidden;
}
.book-card::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:5px;
  background:#5b9bc6;
  opacity:.75;
}
.course-card.blue::after,
.course-card.orange::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:5px;
  border-radius:0 0 26px 26px;
}
.course-card{position:relative;overflow:hidden}
.course-card.blue::after{background:#5b9bc6}
.course-card.orange::after{background:#d39152}

/* Larger, easier child tap targets */
.mode-btn{
  min-height:150px;
  padding:18px;
}
.mode-btn strong{
  font-size:17px;
}
.mode-btn span{
  font-size:13px;
  line-height:1.45;
}
.mode-icon{
  font-size:28px;
  margin-bottom:13px;
}
.primary,.secondary,.listen-btn{
  min-height:50px;
  padding:14px 22px;
}
.profile-pill{
  min-height:43px;
}

/* Study screens remain deliberately calm */
.study-card{
  border-radius:30px;
}
.prompt{
  font-size:17px;
  letter-spacing:.005em;
}
.type-input{
  border-radius:19px;
  min-height:58px;
}
.choice-btn{
  border-radius:18px;
  min-height:66px;
}

/* Better mobile rhythm */
@media(max-width:600px){
  .home-hero{
    margin-top:10px;
    margin-bottom:27px;
  }
  .home-hero h1{
    font-size:clamp(36px,11vw,52px);
  }
  .section-head{
    margin-top:27px;
  }
  .mode-btn{
    min-height:138px;
    padding:16px;
  }
}


/* =========================================================
   V2.4 — VOCABULARY STUDY LAYOUT FIX
   Keep picture and controls in separate vertical regions.
   ========================================================= */

/* Do not vertically re-centre the whole card when answers appear. */
.study-card{
  justify-content:flex-start;
  padding-top:30px;
  padding-bottom:28px;
}

/* A fixed, calm picture region. Tight source crops now live here. */
.image-stage{
  width:min(100%,440px);
  height:300px;
  flex:0 0 300px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #e3e9ee;
  border-radius:22px;
  padding:18px;
  overflow:hidden;
}
.image-stage img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transform:scale(1.5);
  transform-origin:center center;
}

/* The answer/reveal/type controls start BELOW the picture. */
.study-card > #interact{
  width:100%;
  margin-top:26px;
  flex:0 0 auto;
}

/* Flashcard answer should never visually touch the artwork. */
.study-card > #interact .answer-word{
  margin:0 0 12px;
  line-height:1.05;
}

/* Type mode also gets its own breathing room rather than rising into the image. */
.study-card > #interact .type-form{
  margin-top:0;
}

/* Dark mode keeps the image panel deliberately white. */
html[data-theme="dark"] .image-stage{
  background:#fff;
  border-color:#31414d;
  padding:18px;
}

/* On smaller screens preserve separation while reducing image height slightly. */
@media(max-width:600px){
  .study-card{
    padding-top:24px;
    padding-bottom:24px;
  }
  .image-stage{
    height:255px;
    flex-basis:255px;
    padding:14px;
  }
  .study-card > #interact{
    margin-top:22px;
  }
}


/* =========================================================
   V2.5 — VOCABULARY IMAGE SCALE TWEAK
   Increase tight Oxford illustration display size by 50%.
   ========================================================= */


/* =========================================================
   V2.6 — PARENT / TEACHER DASHBOARD
   ========================================================= */
.dashboard-btn{
  min-height:42px;border-radius:14px;border:1px solid var(--line);
  background:#fff;color:var(--ink);padding:0 13px;
  display:flex;align-items:center;gap:7px;font-weight:850;cursor:pointer;
}
.dashboard-icon{font-size:18px;line-height:1}
.dashboard-label{font-size:13px}
html[data-theme="dark"] .dashboard-btn{background:#17232e;color:var(--ink);border-color:var(--line)}

.dashboard-hero{
  display:flex;justify-content:space-between;align-items:flex-end;gap:22px;
  margin:12px 0 25px;
}
.dashboard-hero h1{margin-bottom:5px}
.dashboard-note{margin:0;color:var(--muted);font-size:14px}
.learner-switch{
  display:flex;gap:5px;padding:5px;border:1px solid var(--line);
  background:var(--card);border-radius:18px;
}
.learner-tab{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  min-width:94px;padding:11px 16px;border-radius:13px;font-weight:900;
}
.learner-tab.active{background:var(--ink);color:#fff}
html[data-theme="dark"] .learner-switch{background:#17232e}
html[data-theme="dark"] .learner-tab.active{background:#d8e5ee;color:#12202b}

.dashboard-summary{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:36px;
}
.metric-card{
  min-height:150px;background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:18px;display:flex;flex-direction:column;justify-content:space-between;
}
.metric-card::before{
  content:"";display:block;width:42px;height:6px;border-radius:999px;margin-bottom:14px;
}
.vocab-metric::before{background:#5b9bc6}
.spell-metric::before{background:#d39152}
.review-metric::before{background:#c66d68}
.test-metric::before{background:#7e91a2}
.metric-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--muted)}
.metric-card strong{font-size:34px;letter-spacing:-.035em;line-height:1;margin:10px 0 8px}
.metric-card strong small{font-size:17px;color:var(--muted);font-weight:800}
.metric-card>span:last-child{font-size:12px;color:var(--muted);line-height:1.35}
html[data-theme="dark"] .metric-card{background:#17232e}

.dashboard-section-head{margin-top:36px}
.dashboard-book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.dash-progress-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:15px;
}
.dash-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}
.dash-card-title strong{font-size:15px}
.dash-card-title>span{font-size:10px;background:var(--soft);padding:5px 7px;border-radius:999px;font-weight:900;color:var(--muted);white-space:nowrap}
.dash-numbers{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:11px;font-weight:800;margin:12px 0 9px}
.weak-text{color:var(--danger)!important}
.vocab-fill{background:#5b9bc6}
html[data-theme="dark"] .dash-progress-card{background:#17232e}

.dashboard-unit-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;
}
.dash-unit{
  min-height:130px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;
  display:flex;flex-direction:column;
}
.dash-unit.active{border-top:4px solid #d39152;padding-top:9px}
.dash-unit.done{border-top:4px solid var(--success);padding-top:9px}
.dash-unit-top{display:flex;justify-content:space-between;align-items:center;gap:7px;font-size:12px}
.test-score{background:var(--soft);border-radius:999px;padding:4px 6px;font-size:10px;font-weight:900}
.dash-unit-focus{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:8px 0 auto;font-size:11px;color:var(--muted);line-height:1.3;
}
.dash-unit-bottom{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px;font-size:9px;color:var(--muted);font-weight:800}
html[data-theme="dark"] .dash-unit{background:#17232e}

.focus-list{display:grid;gap:8px}
.focus-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;
}
.focus-item>div{display:grid;gap:2px}
.focus-item strong{font-size:15px}
.focus-item div span{font-size:11px;color:var(--muted)}
.focus-kind{font-size:10px;font-weight:900;border-radius:999px;padding:6px 8px}
.vocab-kind{background:#e7f2f9;color:#356d94}
.spell-kind{background:#f8eee4;color:#8d5426}
.miss-count{font-size:11px;font-weight:900;color:var(--danger);min-width:58px;text-align:right}
.dashboard-empty{
  background:#fff;border:1px dashed var(--line);border-radius:20px;padding:24px;
  display:grid;gap:5px;text-align:center;color:var(--muted)
}
.dashboard-empty strong{color:var(--ink)}
html[data-theme="dark"] .focus-item,
html[data-theme="dark"] .dashboard-empty{background:#17232e}
html[data-theme="dark"] .vocab-kind{background:#18384c;color:#9ac8e6}
html[data-theme="dark"] .spell-kind{background:#3b2b20;color:#efbd94}

@media(max-width:900px){
  .dashboard-summary{grid-template-columns:1fr 1fr}
  .dashboard-book-grid{grid-template-columns:1fr 1fr}
  .dashboard-unit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .dashboard-label{display:none}
  .dashboard-btn{width:38px;height:38px;min-height:38px;padding:0;justify-content:center}
  .dashboard-hero{align-items:flex-start;flex-direction:column}
  .learner-switch{width:100%}
  .learner-tab{flex:1;min-width:0}
  .dashboard-summary{grid-template-columns:1fr 1fr;gap:9px}
  .metric-card{min-height:132px;padding:14px}
  .metric-card strong{font-size:28px}
  .dashboard-book-grid{grid-template-columns:1fr}
  .dashboard-unit-grid{grid-template-columns:1fr 1fr}
  .focus-item{grid-template-columns:minmax(0,1fr) auto}
  .miss-count{grid-column:2;grid-row:2}
}


/* =========================================================
   V3 — TODAY'S PRACTICE + SPACED REPETITION
   ========================================================= */
.today-panel{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
  margin:2px 0 34px;padding:22px 24px;border-radius:28px;
  background:linear-gradient(135deg,#eaf4fa 0%,#f8f2e9 100%);
  border:1px solid #d5e2ea;box-shadow:0 8px 24px rgba(23,50,77,.07);
}
.today-panel.complete{
  background:linear-gradient(135deg,#e8f3ed 0%,#f5f7f9 100%);
}
.today-copy h2{margin:5px 0 6px;font-size:27px}
.today-copy p{margin:0;color:#647889;font-size:14px}
.today-panel-side{display:grid;gap:11px;justify-items:end}
.today-mini-stats{display:flex;gap:8px}
.today-mini-stats span{
  background:rgba(255,255,255,.72);border:1px solid rgba(214,225,232,.95);
  border-radius:999px;padding:7px 10px;font-size:11px;color:#5e7385;font-weight:800;
}
.today-mini-stats strong{color:#17324d}
.today-start{
  border:0;border-radius:17px;background:#17324d;color:#fff;
  min-height:50px;padding:0 20px;font-weight:900;cursor:pointer;
}
.today-start:disabled{opacity:.48;cursor:default}
.today-date{font-size:11px;color:var(--muted);font-weight:800}
.today-complete-mark{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:#1f7a4d;color:#fff;font-size:26px;font-weight:950;
}
html[data-theme="dark"] .today-panel{
  background:linear-gradient(135deg,#172c3b 0%,#2d281f 100%);
  border-color:#314552;
}
html[data-theme="dark"] .today-panel.complete{
  background:linear-gradient(135deg,#183329 0%,#17232e 100%);
}
html[data-theme="dark"] .today-copy p{color:#a5b5c2}
html[data-theme="dark"] .today-mini-stats span{
  background:rgba(23,35,46,.75);border-color:#334653;color:#b6c4ce;
}
html[data-theme="dark"] .today-mini-stats strong{color:#e6edf3}
html[data-theme="dark"] .today-start{background:#d8e5ee;color:#12202b}

.today-kind-badge{
  position:absolute;left:19px;top:18px;border-radius:999px;padding:6px 9px;
  font-size:10px;font-weight:950;letter-spacing:.04em;text-transform:uppercase;
}
.today-vocab{background:#e5f1f8;color:#356d94}
.today-spelling{background:#f8eee4;color:#8d5426}
html[data-theme="dark"] .today-vocab{background:#18384c;color:#9ac8e6}
html[data-theme="dark"] .today-spelling{background:#3b2b20;color:#efbd94}
.today-answer-area{
  width:100%;display:flex;justify-content:center;margin-top:26px;
}
.today-answer-area .type-form{margin-top:0}
.today-results .today-next-note{
  margin:13px auto 0;max-width:440px;padding:10px 13px;border-radius:14px;
  background:var(--soft);color:var(--muted);font-size:12px;font-weight:800;
}

.due-metric::before{background:#6c8fb2}
.dashboard-summary{grid-template-columns:repeat(5,minmax(0,1fr))}

@media(max-width:1050px){
  .dashboard-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .today-panel{grid-template-columns:1fr;padding:19px}
  .today-panel-side{justify-items:stretch}
  .today-mini-stats{justify-content:flex-start}
  .today-start{width:100%}
}
@media(max-width:600px){
  .dashboard-summary{grid-template-columns:1fr 1fr}
}


/* =========================================================
   V3 FINAL — ACTIVITY NAVIGATION
   ========================================================= */
.activity-nav{
  position:sticky;top:66px;z-index:24;
  display:flex;gap:8px;justify-content:center;
  padding:8px 14px;background:rgba(244,247,249,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(220,229,235,.75);
}
.activity-tab{
  border:1px solid transparent;background:transparent;color:var(--muted);
  border-radius:999px;padding:9px 14px;font-size:12px;font-weight:900;cursor:pointer;
}
.activity-tab.active{background:#fff;border-color:var(--line);color:var(--ink)}
.soon-dot{
  display:inline-flex;margin-left:5px;padding:3px 6px;border-radius:999px;
  background:var(--soft);font-size:8px;letter-spacing:.04em;text-transform:uppercase;
}
html[data-theme="dark"] .activity-nav{
  background:rgba(16,24,32,.92);border-bottom-color:#263641;
}
html[data-theme="dark"] .activity-tab.active{background:#17232e;border-color:var(--line)}
html[data-theme="dark"] .soon-dot{background:#203340}

/* =========================================================
   V3 FINAL — CONTEXT CHALLENGE
   ========================================================= */
.context-hero{margin-bottom:18px}
.context-how{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:5px 0 30px;
}
.context-how>div{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;
  display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;
}
.context-how span{
  grid-row:1/3;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-weight:950;
}
.context-how strong{font-size:14px}
.context-how small{color:var(--muted);font-size:11px}
html[data-theme="dark"] .context-how>div{background:#17232e}

.context-book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.context-book-card{
  min-height:185px;text-align:left;padding:18px;background:#fff;border:1px solid var(--line);
  border-radius:26px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;
}
.context-book-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.context-book-card h3{font-size:20px;margin:14px 0 6px}
.context-book-card p{margin:0;color:var(--muted);line-height:1.45;font-size:13px}
.context-unlocked{
  border-radius:999px;padding:6px 9px;background:#eef4e9;color:#4e6f3f;
  font-size:10px;font-weight:900;white-space:nowrap;
}
.context-card-foot{
  margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;gap:10px;
  font-size:11px;color:var(--muted);font-weight:850;
}
html[data-theme="dark"] .context-book-card{background:#17232e}
html[data-theme="dark"] .context-unlocked{background:#213728;color:#a9d49d}

.compact-hero{margin-bottom:18px}
.context-level-grid{display:grid;gap:12px;max-width:850px;margin:0 auto}
.context-level-card{
  display:grid;grid-template-columns:76px 1fr;gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;
}
.context-level-card.locked{opacity:.58}
.context-level-number{
  width:62px;height:62px;border-radius:19px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:26px;font-weight:950;
}
.context-level-card.locked .context-level-number{background:#aebbc5}
.context-level-copy h3{margin:7px 0 6px;font-size:18px}
.context-level-copy p{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.45}
.level-name{font-size:12px;font-weight:950;letter-spacing:.04em;text-transform:uppercase}
.lock-label,.complete-label{
  border-radius:999px;padding:5px 8px;font-size:9px;font-weight:950;
}
.lock-label{background:#edf1f4;color:#778895}
.complete-label{background:#e4f1e8;color:var(--success)}
.context-level-start{margin-top:3px}
.context-back-row{margin-top:20px}
html[data-theme="dark"] .context-level-card{background:#17232e}
html[data-theme="dark"] .complete-label{background:#1e3a2a;color:#93d4ad}
html[data-theme="dark"] .lock-label{background:#25333e;color:#93a4b1}

.context-challenge-card{
  max-width:870px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:28px;padding:28px;box-shadow:var(--shadow);
}
.context-word-bank{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:13px 14px;margin-bottom:24px;border-radius:18px;background:var(--soft);
}
.context-word-bank>span{
  width:100%;font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:950;margin-bottom:1px;
}
.bank-word{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:7px 10px;font-size:12px;font-weight:850;cursor:pointer;
}
.context-paragraph{
  font-size:clamp(19px,2.7vw,25px);line-height:2.05;font-weight:650;
  letter-spacing:.002em;
}
.context-gap-wrap{display:inline-block;vertical-align:middle;margin:0 2px}
.context-gap{
  min-width:116px;max-width:190px;border:2px solid #cbd8e1;border-radius:12px;
  background:#fbfcfd;color:var(--ink);padding:7px 9px;font-weight:850;outline:none;
}
.context-select{font-size:15px}
.context-input{font-size:17px;text-align:center}
.context-gap:focus{border-color:#6f96b3;background:#fff}
.context-right{border-color:#78b78f!important;background:#e7f4eb!important;color:#23643e!important}
.context-wrong{border-color:#d9a39f!important;background:#f9e9e8!important;color:#8f3833!important}
.context-feedback{margin-top:22px}
.context-message{
  border-radius:15px;padding:11px 13px;background:#fff4cf;color:#735f17;
  font-size:13px;font-weight:850;text-align:center;
}
.context-result{
  border-radius:20px;padding:17px;border:1px solid var(--line);
}
.context-result.strong{background:#eaf4ed;border-color:#c7dfcf}
.context-result.keep-going{background:#f8efea;border-color:#e6d3c7}
.context-result>div:first-child{display:flex;align-items:center;gap:12px}
.context-score{font-size:29px;font-weight:950;letter-spacing:-.04em}
.context-result p{margin:9px 0 0;color:var(--muted);line-height:1.5}
.context-unlock-banner{
  margin-top:12px;padding:10px 12px;border-radius:13px;background:var(--ink);
  color:#fff;font-weight:950;text-align:center;
}
.context-srs-note{
  margin-top:11px;font-size:11px;color:var(--muted);font-weight:800;
}
.context-result-actions{margin-top:16px}
html[data-theme="dark"] .context-challenge-card{background:#17232e}
html[data-theme="dark"] .context-word-bank{background:#203340}
html[data-theme="dark"] .bank-word{background:#17232e;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .context-gap{background:#1c2a35;color:var(--ink);border-color:#405462}
html[data-theme="dark"] .context-gap:focus{background:#17232e}
html[data-theme="dark"] .context-right{background:#1d3a29!important;color:#a6ddb9!important}
html[data-theme="dark"] .context-wrong{background:#442925!important;color:#f0b1ab!important}
html[data-theme="dark"] .context-result.strong{background:#183329;border-color:#2b5940}
html[data-theme="dark"] .context-result.keep-going{background:#352820;border-color:#564033}

/* =========================================================
   V3 FINAL — PARTNER ACTIVITIES COMING SOON
   ========================================================= */
.partner-coming{
  max-width:760px;margin:18px auto;text-align:center;background:#fff;
  border:1px solid var(--line);border-radius:30px;padding:28px 30px 34px;
  box-shadow:var(--shadow);
}
.partner-coming h1{margin-top:8px}
.partner-coming p{max-width:590px;margin:0 auto 18px;color:var(--muted);font-size:16px;line-height:1.55}
.partner-art{max-width:570px;margin:0 auto 8px}
.partner-art svg{width:100%;height:auto}
.art-panel{fill:#f8fafb;stroke:#cbd9e2;stroke-width:3}
.art-screen{fill:#eaf2f8;stroke:#aac0d0;stroke-width:3}
.art-line{stroke:#17324d;stroke-width:8;stroke-linecap:round;fill:none}
.art-dot{fill:#17324d}
.art-link{stroke:#7296af;stroke-width:5;stroke-linecap:round;fill:none;stroke-dasharray:7 9}
.art-arrow{fill:#7296af}
.art-barrier{fill:#fff2bd;stroke:#d8be61;stroke-width:2}
.art-stripe{stroke:#17324d;stroke-width:5}
.partner-preview-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.partner-preview-pills span{
  border-radius:999px;padding:7px 10px;background:var(--soft);font-size:11px;font-weight:900;color:var(--muted);
}
html[data-theme="dark"] .partner-coming{background:#17232e}
html[data-theme="dark"] .art-panel{fill:#182630;stroke:#38505f}
html[data-theme="dark"] .art-screen{fill:#203846;stroke:#55788e}
html[data-theme="dark"] .art-line{stroke:#d9e7ef}
html[data-theme="dark"] .art-dot{fill:#d9e7ef}
html[data-theme="dark"] .art-link{stroke:#789db5}
html[data-theme="dark"] .art-arrow{fill:#789db5}
html[data-theme="dark"] .art-barrier{fill:#4b4123;stroke:#7b6a33}
html[data-theme="dark"] .art-stripe{stroke:#d9e7ef}

/* =========================================================
   V3 FINAL — DATA MANAGEMENT
   ========================================================= */
.data-management{margin-bottom:30px}
.data-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.data-reset-card{
  min-height:120px;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:19px;padding:15px;cursor:pointer;
}
.data-reset-card strong{display:block;font-size:14px;margin-bottom:6px}
.data-reset-card span{display:block;color:var(--muted);font-size:11px;line-height:1.45}
.danger-card{border-color:#e2c0bd;background:#fffafa}
.danger-card strong{color:var(--danger)}
.confirm-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(10,22,32,.58);
  display:grid;place-items:center;padding:18px;
}
.confirm-dialog{
  width:min(500px,100%);background:#fff;border-radius:26px;padding:26px;
  box-shadow:0 32px 90px rgba(0,0,0,.3);text-align:center;
}
.danger-icon{
  width:52px;height:52px;border-radius:50%;margin:0 auto 12px;
  display:grid;place-items:center;background:#f7e8e6;color:var(--danger);
  font-size:27px;font-weight:950;
}
.confirm-dialog h2{margin:0 0 8px;font-size:25px}
.confirm-dialog p{color:var(--muted);line-height:1.5;margin:0}
.confirm-actions{display:flex;justify-content:center;gap:9px;margin-top:20px}
.danger-button{
  border:0;border-radius:16px;padding:13px 20px;background:var(--danger);
  color:#fff;font-weight:900;cursor:pointer;
}
html[data-theme="dark"] .data-reset-card{background:#17232e}
html[data-theme="dark"] .danger-card{background:#241d1c;border-color:#573532}
html[data-theme="dark"] .confirm-dialog{background:#17232e}
html[data-theme="dark"] .danger-icon{background:#442925;color:#efa09a}

@media(max-width:850px){
  .context-book-grid{grid-template-columns:1fr 1fr}
  .data-actions{grid-template-columns:1fr}
}
@media(max-width:600px){
  .activity-nav{top:64px;justify-content:flex-start;overflow-x:auto;padding:7px 10px}
  .activity-tab{white-space:nowrap;padding:8px 12px}
  .context-how{grid-template-columns:1fr}
  .context-book-grid{grid-template-columns:1fr}
  .context-level-card{grid-template-columns:54px 1fr;padding:15px;gap:12px}
  .context-level-number{width:48px;height:48px;border-radius:15px;font-size:21px}
  .context-challenge-card{padding:20px 15px;border-radius:23px}
  .context-paragraph{font-size:18px;line-height:2.35}
  .context-gap{min-width:104px;max-width:150px;padding:6px 7px}
  .partner-coming{padding:20px 16px 28px}
  .partner-preview-pills{gap:6px}
}


/* =========================================================
   V3.1 — MATCH
   Picture ↔ word recognition game.
   ========================================================= */
.quick-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.match-mode{
  position:relative;
  border-top:4px solid #6b9fc0;
  padding-top:13px;
}
.match-shell{
  max-width:900px;
  margin:0 auto;
}
.match-scorebar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-bottom:10px;
}
.match-scorebar>div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:11px 14px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}
.match-scorebar span{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.match-scorebar strong{
  font-size:18px;
  letter-spacing:-.02em;
}
.match-instruction{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
  font-weight:850;
  text-align:center;
}
.match-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.match-tile{
  min-height:150px;
  border:2px solid var(--line);
  border-radius:22px;
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  overflow:hidden;
  padding:13px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease,border-color .12s ease,background .12s ease,opacity .22s ease;
  box-shadow:0 3px 0 rgba(23,50,77,.025);
}
.match-tile:hover{transform:translateY(-2px)}
.match-tile.word span{
  font-size:clamp(18px,2.4vw,27px);
  font-weight:950;
  line-height:1.08;
  text-align:center;
  overflow-wrap:anywhere;
}
.match-tile.picture{
  background:#fff;
}
.match-tile.picture img{
  display:block;
  max-width:100%;
  max-height:122px;
  width:auto;
  height:auto;
  object-fit:contain;
  transform:scale(1.12);
}
.match-tile.selected{
  border-color:#4f86a8;
  background:#edf6fb;
  box-shadow:0 0 0 3px rgba(79,134,168,.12);
  transform:translateY(-2px);
}
.match-tile.match-correct{
  border-color:#65a47f;
  background:#e8f5ec;
}
.match-tile.match-wrong{
  border-color:#cc7770;
  background:#faecea;
  animation:matchShake .23s linear 1;
}
.match-tile.matched{
  opacity:0;
  transform:scale(.90);
  pointer-events:none;
}
@keyframes matchShake{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-5px)}
  70%{transform:translateX(5px)}
}
.match-results{
  max-width:650px;
  margin:26px auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:32px;
  text-align:center;
  box-shadow:var(--shadow);
}
.match-results h1{margin-bottom:4px}
.match-final-time{
  font-size:clamp(48px,10vw,78px);
  font-weight:950;
  letter-spacing:-.055em;
  margin:15px 0;
}
.match-result-stats{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 auto 18px;
}
.match-result-stats span{
  border:1px solid var(--line);
  background:var(--soft);
  border-radius:999px;
  padding:8px 11px;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.match-result-stats strong{color:var(--ink)}
.match-results p{
  max-width:500px;
  margin:0 auto;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

html[data-theme="dark"] .match-scorebar>div,
html[data-theme="dark"] .match-tile.word,
html[data-theme="dark"] .match-results{
  background:#17232e;
  border-color:var(--line);
  color:var(--ink);
}
html[data-theme="dark"] .match-tile.picture{
  background:#fff;
  border-color:#31414d;
}
html[data-theme="dark"] .match-tile.selected{
  background:#18384c;
  border-color:#6d9fbd;
}
html[data-theme="dark"] .match-tile.match-correct{
  background:#193a2b;
  border-color:#4f8565;
}
html[data-theme="dark"] .match-tile.match-wrong{
  background:#442826;
  border-color:#8b504b;
}
html[data-theme="dark"] .match-result-stats span{
  background:#203340;
  border-color:var(--line);
}

@media(max-width:900px){
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .match-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .quick-grid{grid-template-columns:1fr 1fr}
  .match-scorebar{grid-template-columns:1fr 1fr}
  .match-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .match-tile{min-height:112px;padding:8px;border-radius:17px}
  .match-tile.picture img{max-height:94px}
  .match-tile.word span{font-size:17px}
  .match-results{padding:24px 18px}
}
@media(max-width:390px){
  .match-grid{grid-template-columns:1fr 1fr}
  .match-tile{min-height:118px}
}


/* =========================================================
   V3.2 — MATCH READY STATE
   ========================================================= */
.match-ready-panel{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  margin:10px 0 12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:20px;background:#fff;
  transition:opacity .20s ease,transform .20s ease;
}
.match-ready-copy{display:flex;flex-direction:column;gap:3px}
.match-ready-copy strong{font-size:17px}
.match-ready-copy span{color:var(--muted);font-size:12px}
.match-start-btn{
  min-width:132px;min-height:50px;border:0;border-radius:16px;
  background:#17324d;color:#fff;font-size:15px;font-weight:950;
  letter-spacing:.05em;cursor:pointer;
}
.match-ready-panel.hide-ready{
  opacity:0;transform:translateY(-4px);pointer-events:none;
}
.match-content{
  display:flex;width:100%;height:100%;align-items:center;justify-content:center;
}
.match-cover{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  border-radius:20px;background:#17324d;color:#fff;
  font-size:52px;font-weight:950;line-height:1;
  transition:opacity .24s ease,transform .24s ease;
}
.match-grid.covered .match-content{visibility:hidden}
.match-grid.covered .match-tile{cursor:default}
.match-grid.revealing .match-cover,
.match-grid.revealed .match-cover{
  opacity:0;transform:scale(.92);pointer-events:none;
}
.match-grid.revealing .match-content,
.match-grid.revealed .match-content{visibility:visible}

html[data-theme="dark"] .match-ready-panel{background:#17232e}
html[data-theme="dark"] .match-start-btn{background:#d8e5ee;color:#12202b}
html[data-theme="dark"] .match-cover{background:#d8e5ee;color:#12202b}

@media(max-width:600px){
  .match-ready-panel{align-items:stretch;flex-direction:column}
  .match-start-btn{width:100%}
  .match-cover{font-size:42px}
}


/* =========================================================
   V3.2.1 — MATCH COVER QUESTION-MARK SIZE FIX
   Force identical ? size on picture and word cards.
   ========================================================= */
.match-tile .match-cover{
  font-size:52px;
  line-height:1;
}
@media(max-width:600px){
  .match-tile .match-cover{
    font-size:42px;
  }
}


/* =========================================================
   V3.3 — TRUE 3D MATCH FLIP
   ========================================================= */
.match-tile{
  perspective:900px;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  overflow:visible;
  padding:0;
}
.match-card-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:150px;
  display:block;
  transform-style:preserve-3d;
  transition:transform .34s cubic-bezier(.22,.75,.28,1);
}
.match-card-face{
  position:absolute;
  inset:0;
  border:2px solid var(--line);
  border-radius:22px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:13px;
}
.match-card-back{
  background:#17324d;
  color:#fff;
  font-size:52px;
  font-weight:950;
  line-height:1;
}
.match-card-front{
  transform:rotateY(180deg);
  background:#fff;
  color:var(--ink);
}
.match-card-front.word span{
  font-size:clamp(18px,2.4vw,27px);
  font-weight:950;
  line-height:1.08;
  text-align:center;
  overflow-wrap:anywhere;
}
.match-card-front.picture img{
  display:block;
  max-width:100%;
  max-height:122px;
  width:auto;
  height:auto;
  object-fit:contain;
  transform:scale(1.12);
}
.match-grid.covered .match-card-inner{transform:rotateY(0deg)}
.match-grid.revealing .match-card-inner,
.match-grid.revealed .match-card-inner{transform:rotateY(180deg)}

.match-tile.selected .match-card-front{
  border-color:#4f86a8;
  background:#edf6fb;
  box-shadow:0 0 0 3px rgba(79,134,168,.12);
}
.match-tile.match-correct .match-card-front{
  border-color:#65a47f;
  background:#e8f5ec;
}
.match-tile.match-wrong .match-card-front{
  border-color:#cc7770;
  background:#faecea;
}
.match-tile.matched{
  opacity:0;
  transform:scale(.90);
  pointer-events:none;
}
html[data-theme="dark"] .match-card-back{
  background:#d8e5ee;
  color:#12202b;
}
html[data-theme="dark"] .match-card-front.word{
  background:#17232e;
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] .match-card-front.picture{
  background:#fff;
  border-color:#31414d;
}
html[data-theme="dark"] .match-tile.selected .match-card-front{
  background:#18384c;
  border-color:#6d9fbd;
}
html[data-theme="dark"] .match-tile.match-correct .match-card-front{
  background:#193a2b;
  border-color:#4f8565;
}
html[data-theme="dark"] .match-tile.match-wrong .match-card-front{
  background:#442826;
  border-color:#8b504b;
}
@media(max-width:600px){
  .match-card-inner{min-height:112px}
  .match-card-face{border-radius:17px;padding:8px}
  .match-card-back{font-size:42px}
  .match-card-front.picture img{max-height:94px}
  .match-card-front.word span{font-size:17px}
}
@media(max-width:390px){
  .match-card-inner{min-height:118px}
}

/* Hide the old flat cover/content elements if cached markup ever appears. */
.match-cover,.match-content{}

/* =========================================================
   V3.3 — PARTNER MEMORY
   ========================================================= */
.partner-home{max-width:980px;margin:10px auto 40px}
.partner-home-head{margin-bottom:22px}
.partner-home-head h1{margin:5px 0 6px}
.partner-home-head p{margin:0;color:var(--muted);font-size:15px}

.partner-feature-card{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:20px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:20px;
  box-shadow:var(--shadow);
}
.partner-feature-icon{
  width:92px;height:92px;border-radius:24px;
  display:grid;place-items:center;
  background:#17324d;color:#fff;
  font-size:44px;font-weight:950;
}
.partner-live-pill{
  display:inline-block;
  padding:5px 8px;
  border-radius:999px;
  background:#e4f2e9;
  color:#2d6f49;
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
}
.partner-feature-copy h2{margin:7px 0 5px}
.partner-feature-copy p{margin:0;color:var(--muted);line-height:1.5;font-size:13px}

.partner-book-head{margin-top:30px}
.partner-book-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.partner-book-card{
  min-height:115px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  color:var(--ink);
  padding:15px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:7px;
  transition:transform .12s ease,border-color .12s ease;
}
.partner-book-card:hover{transform:translateY(-2px);border-color:#8fafc2}
.partner-book-card strong{font-size:16px}
.partner-book-card>span:last-child{font-size:11px;color:var(--muted)}
.partner-book-level{
  width:max-content;
  font-size:9px;
  font-weight:950;
  color:#59758a;
  background:var(--soft);
  border-radius:999px;
  padding:4px 7px;
}
.partner-coming-more{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(240px,.8fr);
  align-items:center;
  gap:18px;
  margin-top:34px;
  padding:18px 22px;
  background:#fff;
  border:1px dashed var(--line);
  border-radius:26px;
}
.partner-coming-more .partner-art{margin:0}
.partner-coming-more h2{margin:5px 0 0}

.memory-shell{max-width:900px;margin:0 auto}
.memory-scoreboard{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.memory-player{
  min-height:72px;
  border:2px solid var(--line);
  border-radius:20px;
  background:#fff;
  padding:11px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.memory-player span{font-weight:900}
.memory-player strong{font-size:28px}
.memory-player.active-turn{
  border-color:#5f91b2;
  background:#eef6fb;
  transform:translateY(-1px);
}
.memory-turn-message{
  min-width:150px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}
.memory-note{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin:8px 0 14px;
}
.memory-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.memory-card{
  min-height:150px;
  border:0;
  padding:0;
  background:transparent;
  perspective:900px;
  cursor:pointer;
}
.memory-card-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:150px;
  display:block;
  transform-style:preserve-3d;
  transition:transform .34s cubic-bezier(.22,.75,.28,1);
}
.memory-card.flipped .memory-card-inner{transform:rotateY(180deg)}
.memory-face{
  position:absolute;
  inset:0;
  border:2px solid var(--line);
  border-radius:22px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:13px;
}
.memory-back{
  background:#17324d;
  color:#fff;
  font-size:52px;
  font-weight:950;
  line-height:1;
}
.memory-front{
  transform:rotateY(180deg);
  background:#fff;
  color:var(--ink);
}
.memory-front.word span{
  font-size:clamp(18px,2.4vw,27px);
  font-weight:950;
  line-height:1.08;
  text-align:center;
  overflow-wrap:anywhere;
}
.memory-front.picture img{
  display:block;
  max-width:100%;
  max-height:122px;
  width:auto;
  height:auto;
  object-fit:contain;
  transform:scale(1.12);
}
.memory-card.memory-correct .memory-front{
  border-color:#65a47f;
  background:#e8f5ec;
}
.memory-card.memory-wrong .memory-front{
  border-color:#cc7770;
  background:#faecea;
}
.memory-card.matched{cursor:default}
.memory-card.matched .memory-front::after{
  content:"✓";
  position:absolute;
  right:8px;top:7px;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:#2f7d50;color:#fff;
  font-size:13px;font-weight:950;
}
.memory-results{
  max-width:620px;
  margin:28px auto;
  padding:30px;
  border:1px solid var(--line);
  border-radius:30px;
  background:#fff;
  text-align:center;
  box-shadow:var(--shadow);
}
.memory-results h1{margin:6px 0 16px}
.memory-final-score{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin:18px auto;
}
.memory-final-score>div{
  min-width:120px;
  padding:14px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--soft);
  display:grid;
  gap:4px;
}
.memory-final-score span{font-size:12px;color:var(--muted);font-weight:900}
.memory-final-score strong{font-size:36px}
.memory-score-dash{font-size:26px!important}

html[data-theme="dark"] .partner-feature-card,
html[data-theme="dark"] .partner-book-card,
html[data-theme="dark"] .partner-coming-more,
html[data-theme="dark"] .memory-player,
html[data-theme="dark"] .memory-results{
  background:#17232e;
}
html[data-theme="dark"] .partner-feature-icon,
html[data-theme="dark"] .memory-back{
  background:#d8e5ee;
  color:#12202b;
}
html[data-theme="dark"] .memory-player.active-turn{
  background:#18384c;
  border-color:#6d9fbd;
}
html[data-theme="dark"] .memory-front.word{
  background:#17232e;
  color:var(--ink);
}
html[data-theme="dark"] .memory-front.picture{background:#fff;border-color:#31414d}
html[data-theme="dark"] .memory-card.memory-correct .memory-front{
  background:#193a2b;border-color:#4f8565;
}
html[data-theme="dark"] .memory-card.memory-wrong .memory-front{
  background:#442826;border-color:#8b504b;
}

@media(max-width:850px){
  .partner-book-grid{grid-template-columns:1fr 1fr}
  .partner-coming-more{grid-template-columns:1fr}
  .memory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .partner-feature-card{grid-template-columns:68px 1fr;padding:15px;gap:14px}
  .partner-feature-icon{width:68px;height:68px;border-radius:19px;font-size:34px}
  .partner-book-grid{grid-template-columns:1fr}
  .memory-scoreboard{grid-template-columns:1fr 1fr}
  .memory-turn-message{grid-column:1/-1;grid-row:2;min-width:0}
  .memory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .memory-card,.memory-card-inner{min-height:112px}
  .memory-face{border-radius:17px;padding:8px}
  .memory-back{font-size:42px}
  .memory-front.picture img{max-height:94px}
  .memory-front.word span{font-size:17px}
}
@media(max-width:390px){
  .memory-grid{grid-template-columns:1fr 1fr}
  .memory-card,.memory-card-inner{min-height:118px}
}


/* =========================================================
   V3.3.1 — UI polish tweaks
   1) remove Partner 'Soon' badge
   2) stronger reset warning
   3) fix dark-mode visibility for Context Challenge numbers
   ========================================================= */
.danger-warning{
  margin-top:12px!important;
  padding:11px 13px;
  border-radius:14px;
  background:#f7e8e6;
  color:#9a3f38!important;
  font-size:12px;
  font-weight:900;
  line-height:1.45;
}

html[data-theme="dark"] .danger-warning{
  background:#442925;
  color:#f2b3ad!important;
}

/* Context Challenge intro numbers */
html[data-theme="dark"] .context-how span{
  background:#d8e5ee;
  color:#12202b;
}

/* Context Challenge level-select numbers */
html[data-theme="dark"] .context-level-number{
  background:#d8e5ee;
  color:#12202b;
}
html[data-theme="dark"] .context-level-card.locked .context-level-number{
  background:#718391;
  color:#f4f8fb;
}


/* =========================================================
   V3.4 — WORD EXPLORER
   ========================================================= */
.activity-nav{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
.activity-nav::-webkit-scrollbar{display:none}
.explorer-shell{max-width:980px;margin:10px auto 44px}
.explorer-head{margin-bottom:16px}
.explorer-head h1{margin:5px 0 5px}
.explorer-head p{margin:0;color:var(--muted);font-size:14px}

.explorer-search{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 10px 10px 15px;background:#fff;border:1px solid var(--line);
  border-radius:22px;margin-bottom:18px;
}
.explorer-search-icon{font-size:24px;color:var(--muted)}
.explorer-search input{
  width:100%;border:0;outline:0;background:transparent;color:var(--ink);
  font-size:20px;font-weight:800;padding:8px 0;
}
.explorer-search input::placeholder{color:#9baab5}

.explorer-welcome,.explorer-empty{
  min-height:280px;background:#fff;border:1px solid var(--line);border-radius:28px;
  padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;box-shadow:var(--shadow);
}
.explorer-welcome h2,.explorer-empty h2{margin:0 0 7px}
.explorer-welcome p,.explorer-empty p{margin:0;color:var(--muted);max-width:560px;line-height:1.5}
.explorer-starter-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.explorer-jump{
  border:1px solid var(--line);background:var(--soft);color:var(--ink);
  border-radius:999px;padding:9px 13px;font-weight:900;cursor:pointer;
}
.explorer-bank-note{margin-top:18px;color:var(--muted);font-size:11px;font-weight:850}
.explorer-empty-icon{
  width:66px;height:66px;border-radius:22px;background:var(--soft);display:grid;place-items:center;
  font-size:24px;font-weight:950;color:var(--muted);margin-bottom:14px;
}
.explorer-known-image{
  margin-top:18px;width:160px;height:130px;background:#fff;border:1px solid var(--line);
  border-radius:20px;display:grid;place-items:center;padding:12px;
}
.explorer-known-image img{max-width:100%;max-height:100%;object-fit:contain}

.explorer-entry{display:grid;gap:12px}
.explorer-word-hero{
  min-height:210px;background:#fff;border:1px solid var(--line);border-radius:28px;
  padding:24px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:center;
}
.explorer-word-main{display:flex;align-items:flex-start;gap:15px}
.explorer-speak,.explorer-example-speak{
  width:46px;height:46px;border-radius:50%;border:0;background:#1769aa;color:#fff;
  display:grid;place-items:center;cursor:pointer;font-size:19px;flex:0 0 auto;
}
.explorer-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.explorer-title-row h2{font-size:clamp(38px,7vw,58px);line-height:1;margin:0;letter-spacing:-.05em}
.explorer-pos{
  border-radius:999px;background:#eee9fb;color:#66529b;padding:6px 9px;
  font-size:11px;font-weight:900;
}
.explorer-meaning-label{
  color:#368bce;font-size:12px;font-weight:950;margin-top:20px;text-transform:uppercase;letter-spacing:.06em;
}
.explorer-meaning{font-size:19px;margin:5px 0 0;font-weight:700}
.explorer-hero-image{
  height:165px;border-radius:22px;background:#fff;display:grid;place-items:center;padding:10px;
}
.explorer-hero-image img{max-width:100%;max-height:100%;object-fit:contain;transform:scale(1.18)}

.explorer-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.explorer-card{
  min-height:175px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;
  position:relative;
}
.explorer-card h3{margin:0 0 13px;font-size:16px}
.similar-card h3{color:#2e9e5d}
.opposite-card h3{color:#c97728}
.example-card h3{color:#378fd0}
.family-card h3{color:#9c66c4}
.explorer-card>p{margin:17px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.explorer-word-chips{display:flex;flex-wrap:wrap;gap:8px}
.explorer-word-chip{
  border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-weight:850;cursor:pointer;
}
.synonym-chip{background:#e9f6ed;color:#2f7049;border-color:#cbe6d3}
.antonym-chip{background:#f9eee4;color:#91551e;border-color:#ebcfb5}
.explorer-none{color:var(--muted);font-size:13px}
.example-card{padding-right:70px}
.explorer-example-speak{position:absolute;right:17px;top:17px;width:40px;height:40px}
.example-card p{font-size:18px;color:var(--ink);line-height:1.55;margin-top:24px}
.example-card strong{color:#297fbd}
.explorer-family-list{display:grid;gap:8px}
.explorer-family-list span{font-size:15px;font-weight:800}

.explorer-try{
  background:#fff;border:1px solid var(--line);border-radius:25px;padding:20px;
}
.explorer-try h3{margin:5px 0 0}
.explorer-try-options{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.explorer-try-option{
  min-width:110px;border:2px solid #d2a11a;background:#fff;color:var(--ink);
  border-radius:14px;padding:11px 14px;font-weight:900;cursor:pointer;
}
.explorer-try-option.try-correct{background:#e8f4ec;border-color:#57a774;color:#23633d}
.explorer-try-option.try-wrong{background:#f9e9e7;border-color:#c97670;color:#923a35}
.explorer-try-feedback{min-height:22px;margin-top:12px;font-size:12px;font-weight:850}
.explorer-try-feedback.good{color:var(--success)}
.explorer-try-feedback.bad{color:var(--danger)}

.explorer-meta-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:10px}
.explorer-meta-card{
  min-height:110px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:15px;
  display:flex;flex-direction:column;gap:5px;
}
.explorer-meta-label{
  color:#5791ba;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:950;
}
.explorer-meta-card strong{font-size:15px}
.explorer-meta-card small{color:var(--muted);font-size:10px}
.explorer-source-row{display:flex;flex-wrap:wrap;gap:5px}
.explorer-source-pill{
  width:max-content;max-width:100%;border-radius:999px;background:var(--soft);color:var(--muted);
  padding:5px 8px;font-size:9px;font-weight:900;white-space:normal;
}
.muted-pill{opacity:.8}

.explorer-writing-tip{
  background:#fff;border:1px solid var(--line);border-radius:21px;padding:15px 17px;
  display:flex;gap:12px;align-items:flex-start;
}
.explorer-tip-star{
  width:39px;height:39px;border-radius:13px;background:#fff1c7;color:#d99a00;
  display:grid;place-items:center;flex:0 0 auto;font-size:20px;
}
.explorer-writing-tip strong{color:#c98e00}
.explorer-writing-tip p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.5}

html[data-theme="dark"] .explorer-search,
html[data-theme="dark"] .explorer-welcome,
html[data-theme="dark"] .explorer-empty,
html[data-theme="dark"] .explorer-word-hero,
html[data-theme="dark"] .explorer-card,
html[data-theme="dark"] .explorer-try,
html[data-theme="dark"] .explorer-meta-card,
html[data-theme="dark"] .explorer-writing-tip{
  background:#17232e;
}
html[data-theme="dark"] .explorer-pos{background:#322d4b;color:#c7b9ed}
html[data-theme="dark"] .synonym-chip{background:#19372a;color:#9ed4ae;border-color:#2d5540}
html[data-theme="dark"] .antonym-chip{background:#3b2c20;color:#efb47e;border-color:#67472f}
html[data-theme="dark"] .explorer-try-option{background:#17232e;color:var(--ink)}
html[data-theme="dark"] .explorer-try-option.try-correct{background:#193a2b;color:#9ed4ae}
html[data-theme="dark"] .explorer-try-option.try-wrong{background:#442826;color:#efaaa5}
html[data-theme="dark"] .explorer-tip-star{background:#42371d;color:#f0c150}

@media(max-width:800px){
  .explorer-word-hero{grid-template-columns:1fr}
  .explorer-hero-image{height:145px}
  .explorer-meta-grid{grid-template-columns:1fr 1fr}
  .explorer-meta-card:first-child{grid-column:1/-1}
}
@media(max-width:600px){
  .activity-nav{padding-left:8px;padding-right:8px}
  .activity-tab{white-space:nowrap}
  .explorer-search{grid-template-columns:auto minmax(0,1fr)}
  .explorer-search .primary{grid-column:1/-1;width:100%}
  .explorer-two-col{grid-template-columns:1fr}
  .explorer-meta-grid{grid-template-columns:1fr}
  .explorer-meta-card:first-child{grid-column:auto}
  .explorer-word-hero{padding:18px}
  .explorer-word-main{gap:10px}
  .explorer-title-row h2{font-size:42px}
  .explorer-meaning{font-size:17px}
}


/* =========================================================
   V3.4.1 — QA / POLISH PASS
   ========================================================= */

/* Keep all vocabulary controls centred beneath the picture. */
.study-card > #interact{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.study-card > #interact .type-form,
.study-card > #interact .choice-grid,
.study-card > #interact .flash-actions{
  margin-left:auto;
  margin-right:auto;
}
.study-card > #interact .type-form{width:min(100%,440px)}
.study-card > #interact .choice-grid{width:min(100%,530px)}
.study-card > #interact > .action-row,
.study-card > #interact > .feedback{width:100%}

/* Missing Letters: one input for each hidden letter. */
.missing-letter-form{
  width:min(100%,620px);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.missing-word{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:5px;
  margin:22px auto 8px;
  min-height:72px;
  font-size:clamp(32px,6vw,52px);
  font-weight:950;
  letter-spacing:.03em;
}
.missing-given{
  min-width:.62em;
  text-align:center;
  line-height:1.2;
}
.missing-letter-input{
  width:.82em;
  min-width:38px;
  height:1.25em;
  padding:0 3px 2px;
  border:0;
  border-bottom:4px solid #8fa3b2;
  border-radius:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  line-height:1;
  text-align:center;
  text-transform:lowercase;
}
.missing-letter-input:focus{
  border-bottom-color:#477b9c;
  background:rgba(91,155,198,.08);
}
.missing-letter-input.missing-correct{
  border-bottom-color:var(--success);
  color:var(--success);
}
.missing-letter-input.missing-wrong{
  border-bottom-color:var(--danger);
  color:var(--danger);
}
.missing-count{
  color:var(--muted);
  font-size:11px;
  font-weight:850;
}
html[data-theme="dark"] .missing-letter-input{
  border-bottom-color:#8fa7b8;
  color:var(--ink);
}
html[data-theme="dark"] .missing-letter-input:focus{
  border-bottom-color:#8dc1df;
  background:rgba(123,184,223,.08);
}
#choiceActions{
  min-height:50px;
  margin-top:8px;
}

@media(max-width:600px){
  .study-card > #interact .type-form{width:min(100%,420px)}
  .missing-word{
    gap:3px;
    font-size:clamp(29px,9vw,42px);
  }
  .missing-letter-input{
    min-width:31px;
    border-bottom-width:3px;
  }
}


/* =========================================================
   V3.5 — TIME VAMPIRES
   ========================================================= */
.tv-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:26px;align-items:center;margin:16px 0 22px;padding:30px;border:1px solid var(--line);border-radius:32px;background:var(--card);box-shadow:0 8px 28px rgba(23,50,77,.06);overflow:hidden}
.tv-hero-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,7vw,72px);letter-spacing:-.045em;margin:8px 0 10px}.tv-hero-copy>p{max-width:660px;color:var(--muted);font-size:17px;line-height:1.6;margin:0}.tv-credit{margin-top:10px;color:var(--muted);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:13px}.tv-hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.tv-hero-art{min-height:250px;display:grid;place-items:center;color:var(--ink);opacity:.92}.tv-hourglass-art{width:min(100%,390px);height:auto;display:block}.tv-overall{display:grid;grid-template-columns:auto minmax(120px,250px);align-items:center;gap:12px;margin-top:20px;color:var(--muted);font-size:12px;font-weight:850}.tv-overall .track{height:8px}
.tv-book-note{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:14px 17px}.tv-bookmark-mark{font-size:27px}.tv-book-note div{display:grid;gap:3px}.tv-book-note strong{font-family:Georgia,"Times New Roman",serif;font-size:15px;font-style:italic}.tv-book-note span:last-child{font-size:11px;color:var(--muted)}
.tv-chapter-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.tv-chapter-card{border:1px solid var(--line);background:var(--card);border-radius:22px;padding:16px;text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;cursor:pointer;transition:.15s}.tv-chapter-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.tv-chapter-card.current{border-color:#8aa7bc;box-shadow:inset 4px 0 0 #8aa7bc}.tv-chapter-card.completed{background:linear-gradient(135deg,var(--card),var(--soft))}.tv-chapter-number{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:950;font-family:Georgia,"Times New Roman",serif;font-size:18px}.tv-chapter-card.completed .tv-chapter-number{background:var(--success);color:#fff}.tv-chapter-copy{display:grid;gap:3px}.tv-chapter-copy small{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:9px;font-weight:900}.tv-chapter-copy strong{font-family:Georgia,"Times New Roman",serif;font-size:19px}.tv-chapter-copy span{font-size:11px;color:var(--muted)}.tv-open-arrow{font-size:20px;color:var(--muted)}
.tv-reader-shell{max-width:900px;margin:0 auto}.tv-reader-top{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:4px 0 12px}.tv-reader-top h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,6vw,52px);margin:5px 0 0}.tv-reader-progress{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:13px;color:var(--muted);font-size:11px;font-weight:850}.tv-reader-progress .track{height:7px}
.tv-player{position:sticky;top:118px;z-index:18;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(13px);border:1px solid var(--line);border-radius:24px;padding:12px 16px;box-shadow:0 9px 28px rgba(23,50,77,.10);margin:0 auto 18px}.tv-player-main{display:flex;align-items:center;justify-content:center;gap:14px}.tv-play{width:132px;height:66px;border-radius:20px;border:0;background:var(--ink);color:var(--paper);font-weight:900;display:grid;place-items:center;align-content:center;gap:2px;cursor:pointer}.tv-play span{font-size:24px;line-height:1}.tv-play small,.tv-skip small{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.tv-skip{width:75px;height:58px;border-radius:18px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;align-content:center;gap:1px;font-size:20px;cursor:pointer}.tv-rate-row{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}.tv-rate-row>span{font-size:10px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.tv-rate,.tv-read-self{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 10px;font-size:10px;font-weight:900;cursor:pointer}.tv-rate.active,.tv-read-self.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.tv-audio-warning{margin-top:8px;text-align:center;color:var(--danger);font-size:11px}
.tv-page{background:#fffdf7;border:1px solid #e7dfcf;border-radius:28px;padding:clamp(28px,6vw,62px);box-shadow:0 16px 44px rgba(64,51,35,.08);color:#2d2922;font-family:Georgia,"Times New Roman",serif;font-size:clamp(18px,2.6vw,21px);line-height:1.78}.tv-page-ornament{text-align:center;font-family:system-ui,sans-serif;font-size:25px;opacity:.45;margin-bottom:24px}.tv-paragraph{margin:0 0 1.08em;padding:5px 9px;border-radius:10px;transition:background .2s,box-shadow .2s;cursor:pointer}.tv-paragraph.active{background:#fff2bd;box-shadow:inset 3px 0 0 #c29328}.tv-chapter-end{display:grid;justify-items:center;text-align:center;gap:10px;margin-top:42px;padding-top:26px;border-top:1px solid #e7dfcf}.tv-chapter-end span{letter-spacing:.35em;color:#8d826f}.tv-chapter-end strong{font-size:15px;text-transform:uppercase;letter-spacing:.12em}.tv-chapter-end .primary{font-family:ui-rounded,"Segoe UI",system-ui,sans-serif;margin-top:4px}.tv-reader-nav{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.tv-reader-nav button:disabled{opacity:.38;cursor:not-allowed}
.tv-reference-shell{max-width:900px;margin:0 auto}.tv-reference-shell>h1{font-family:Georgia,"Times New Roman",serif}.tv-guide-art{height:180px;display:grid;place-items:center;color:var(--ink);opacity:.75;margin:-10px 0 8px}.tv-guide-art .tv-hourglass-art{width:270px}.tv-guide-list{display:grid;gap:10px}.tv-guide-item{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 17px}.tv-guide-item>span{width:46px;height:46px;border-radius:14px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:800}.tv-guide-item p{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.45}.tv-glossary-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.tv-glossary-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px}.tv-glossary-card>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.tv-glossary-card strong{font-family:Georgia,"Times New Roman",serif;font-size:19px}.tv-glossary-card p{color:var(--muted);font-size:13px;line-height:1.5;margin:7px 0 0}.tv-glossary-speak{border:0;background:var(--soft);border-radius:50%;width:35px;height:35px;cursor:pointer}
html[data-theme="dark"] .tv-hero,html[data-theme="dark"] .tv-chapter-card,html[data-theme="dark"] .tv-player,html[data-theme="dark"] .tv-skip,html[data-theme="dark"] .tv-rate,html[data-theme="dark"] .tv-read-self,html[data-theme="dark"] .tv-guide-item,html[data-theme="dark"] .tv-glossary-card{background:var(--card)}
html[data-theme="dark"] .tv-page{background:#161b20;color:#e8e3d9;border-color:#343b40;box-shadow:0 18px 46px rgba(0,0,0,.27)}html[data-theme="dark"] .tv-paragraph.active{background:#3e3721;box-shadow:inset 3px 0 0 #d0aa52}html[data-theme="dark"] .tv-chapter-end{border-top-color:#343b40}html[data-theme="dark"] .tv-play,html[data-theme="dark"] .tv-rate.active,html[data-theme="dark"] .tv-read-self.active{background:#d8e5ee;color:#12202b}html[data-theme="dark"] .tv-chapter-number,html[data-theme="dark"] .tv-guide-item>span{background:#d8e5ee;color:#12202b}
@media(max-width:800px){.tv-hero{grid-template-columns:1fr}.tv-hero-art{min-height:180px}.tv-chapter-grid{grid-template-columns:1fr}.tv-glossary-grid{grid-template-columns:1fr}.tv-player{top:116px}}
@media(max-width:600px){.tv-hero{padding:22px 18px}.tv-hero-art{min-height:150px}.tv-hourglass-art{width:260px}.tv-overall{grid-template-columns:1fr}.tv-reader-top{align-items:flex-start;flex-direction:column}.tv-contents-btn{align-self:flex-end;margin-top:0}.tv-player{top:112px;padding:10px}.tv-player-main{gap:8px}.tv-play{width:116px;height:61px}.tv-skip{width:65px;height:54px}.tv-page{border-radius:20px;padding:27px 19px;font-size:18px;line-height:1.72}.tv-paragraph{padding:4px 6px}.tv-reader-nav{display:grid;grid-template-columns:1fr 1fr}.tv-reader-nav button{padding:11px 8px;font-size:11px}}

/* V3.5 dashboard story progress */
.dash-tv-reading{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:17px 19px;margin:18px 0 7px}.dash-tv-icon{width:54px;height:54px;border-radius:17px;background:var(--soft);display:grid;place-items:center;font-size:25px}.dash-tv-copy h2{font-family:Georgia,"Times New Roman",serif;margin:3px 0 0}.dash-tv-copy p{margin:7px 0 10px;color:var(--muted);font-size:12px}.dash-tv-copy .track{height:8px}
@media(max-width:600px){.dash-tv-reading{grid-template-columns:1fr}.dash-tv-icon{display:none}}


/* =========================================================
   V3.6 — PROFILE-AWARE CONTENT MANAGEMENT
   ========================================================= */
.content-rules{
  display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 14px;
}
.content-rules span{
  border:1px solid var(--line);background:var(--soft);color:var(--muted);
  border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800;
}
.content-rules strong{color:var(--ink)}
.content-assignment-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
}
.content-assignment-card{
  min-height:82px;border:1px solid var(--line);border-radius:18px;background:#fff;
  padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.content-assignment-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.content-assignment-copy strong{font-size:14px}
.content-assignment-copy span{font-size:10px;color:var(--muted)}
.content-assign-select{
  flex:0 0 128px;min-height:39px;border:1px solid var(--line);border-radius:12px;
  background:var(--soft);color:var(--ink);padding:7px 9px;font-weight:850;font-size:11px;
}
.content-empty{grid-column:1/-1}
.home-content-empty,.partner-no-shared{
  grid-column:1/-1;min-height:130px;border:1px dashed var(--line);border-radius:22px;
  background:#fff;padding:22px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:5px;color:var(--muted);
}
.home-content-empty strong,.partner-no-shared strong{color:var(--ink)}
.home-content-empty span,.partner-no-shared span{font-size:12px;line-height:1.45}
html[data-theme="dark"] .content-assignment-card,
html[data-theme="dark"] .home-content-empty,
html[data-theme="dark"] .partner-no-shared{background:#17232e}
html[data-theme="dark"] .content-assign-select{background:#203340;border-color:var(--line)}
@media(max-width:720px){
  .content-assignment-grid{grid-template-columns:1fr}
}
@media(max-width:500px){
  .content-assignment-card{align-items:stretch;flex-direction:column}
  .content-assign-select{width:100%;flex-basis:auto}
}


/* =========================================================
   V3.7 — 16-CARD MATCH + MEMORY / QUESTION-MARK FIX
   ========================================================= */

/* Keep both games as a true 4×4 board instead of collapsing to 3/2 columns. */
.match-shell,.memory-shell{max-width:820px}
.match-grid,.memory-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px;
}
.match-card-inner,.memory-card,.memory-card-inner{min-height:132px}

/* The old .match-tile.word span selector also reached the card back.
   This selector is equally specific and later in the cascade, so every
   question mark now renders at exactly the same size. */
.match-tile .match-card-back{
  font-size:52px;
  line-height:1;
  font-weight:950;
}
.memory-card .memory-back{
  font-size:52px;
  line-height:1;
  font-weight:950;
}

@media(max-width:600px){
  .match-grid,.memory-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px}
  .match-card-inner,.memory-card,.memory-card-inner{min-height:91px}
  .match-card-face,.memory-face{border-radius:15px;padding:6px}
  .match-tile .match-card-back,.memory-card .memory-back{font-size:35px}
  .match-card-front.picture img,.memory-front.picture img{max-height:70px;transform:scale(1.04)}
  .match-card-front.word span,.memory-front.word span{
    font-size:clamp(11px,3.2vw,15px);
    line-height:1.05;
  }
}
@media(max-width:390px){
  .match-grid,.memory-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px}
  .match-card-inner,.memory-card,.memory-card-inner{min-height:84px}
  .match-card-face,.memory-face{padding:5px;border-radius:14px}
  .match-tile .match-card-back,.memory-card .memory-back{font-size:32px}
  .match-card-front.picture img,.memory-front.picture img{max-height:64px}
  .match-card-front.word span,.memory-front.word span{font-size:11px}
}


/* =========================================================
   V3.8 — MATCH / MEMORY SOURCE EXPANSION + Q-MARK HARD FIX
   ========================================================= */

/* Exact same rendered glyph on every Match back face.
   !important is intentional: legacy `.match-tile.word span` has higher
   specificity and was still changing the back-face question mark. */
.match-grid .match-tile .match-card-inner > .match-card-back,
.match-grid .match-tile.word .match-card-inner > .match-card-back,
.match-grid .match-tile.picture .match-card-inner > .match-card-back,
.match-grid .match-tile.audio .match-card-inner > .match-card-back{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:52px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
  font-style:normal!important;
  transform:none;
}
.memory-grid .memory-card .memory-card-inner > .memory-back{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:52px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
  font-style:normal!important;
}

/* Spoken spelling tile. */
.match-card-front.audio,
.memory-front.audio{
  background:#eef5fa;
  color:#17324d;
}
.audio-match-face{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:38px!important;
  line-height:1!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.audio-match-face small{
  font-size:9px!important;
  letter-spacing:.12em;
  font-weight:900;
  line-height:1;
}
html[data-theme="dark"] .match-card-front.audio,
html[data-theme="dark"] .memory-front.audio{
  background:#dceaf3;
  color:#12202b;
}

.memory-source-grid .partner-book-card{
  min-height:118px;
}

@media(max-width:600px){
  .match-grid .match-tile .match-card-inner > .match-card-back,
  .match-grid .match-tile.word .match-card-inner > .match-card-back,
  .match-grid .match-tile.picture .match-card-inner > .match-card-back,
  .match-grid .match-tile.audio .match-card-inner > .match-card-back,
  .memory-grid .memory-card .memory-card-inner > .memory-back{
    font-size:35px!important;
  }
  .audio-match-face{font-size:27px!important}
  .audio-match-face small{font-size:7px!important}
}
@media(max-width:390px){
  .match-grid .match-tile .match-card-inner > .match-card-back,
  .match-grid .match-tile.word .match-card-inner > .match-card-back,
  .match-grid .match-tile.picture .match-card-inner > .match-card-back,
  .match-grid .match-tile.audio .match-card-inner > .match-card-back,
  .memory-grid .memory-card .memory-card-inner > .memory-back{
    font-size:32px!important;
  }
  .audio-match-face{font-size:24px!important}
}


/* =======================
   V4.0 — TIME VAMPIRES
   ======================= */
.tv-v4-shell,.tv-story-home,.tv-record-home,.tv-record-shell,.tv-progress-shell,.tv-studio-shell,.tv-board-shell,.tv-board-setup{max-width:1100px;margin:0 auto;padding:6px 0 40px}
.tv-v4-hero{margin-bottom:22px}
.tv-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:20px 0}
.tv-hub-card{border:1px solid var(--line);background:var(--card);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:8px;text-align:left;box-shadow:var(--shadow);min-height:150px}
.tv-hub-icon{font-size:30px}
.tv-mini-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px}
.tv-story-home .tv-chapter-grid,.tv-record-home .tv-chapter-grid{margin-top:18px}
.tv-narration-badge{display:inline-flex;align-items:center;justify-content:center;background:rgba(23,50,77,.08);padding:6px 10px;border-radius:999px;font-size:12px}
html[data-theme="dark"] .tv-narration-badge{background:rgba(255,255,255,.08)}
.tv-record-page{margin-bottom:16px}
.tv-record-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.tv-record-status{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);margin-bottom:14px}
.tv-progress-grid,.tv-board-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.tv-progress-card,.tv-board-status article{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.tv-progress-card span,.tv-board-status span{font-size:24px;font-weight:900}
.tv-progress-list{display:grid;gap:10px;margin-top:16px}
.tv-progress-item,.tv-studio-item{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow)}
.tv-studio-item{align-items:center}
.tv-studio-item>span{width:30px;height:30px;border-radius:999px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}
.tv-studio-item.done>span{background:#2a9d66}.tv-studio-item.current{outline:2px solid rgba(23,50,77,.18)}
.tv-studio-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
.tv-studio-controls label{display:flex;gap:8px;align-items:center}
.tv-upload-label{cursor:pointer}
.tv-studio-audio-wrap{margin:12px 0}.tv-studio-audio-wrap audio{width:min(100%,720px)}
.tv-studio-meta{font-size:13px;color:var(--muted);margin-top:8px}
.tv-studio-list{display:grid;gap:10px;margin-top:16px}
.tv-board-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:18px 0}
.tv-board-square{min-height:68px;border-radius:18px;border:1px solid var(--line);background:var(--card);padding:8px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}
.tv-board-square small{font-weight:800;color:var(--muted)}
.tv-board-square.current{outline:2px solid rgba(23,50,77,.24)}
.tv-board-tokens{display:flex;gap:6px;flex-wrap:wrap}
.tv-token{width:28px;height:28px;border-radius:999px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px}
.tv-token.henry{background:#3e80ff}.tv-token.jennie{background:#d04b9c}
.tv-board-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tv-board-card{margin:18px auto 0;max-width:700px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);text-align:center}
@media(max-width:760px){
  .tv-board-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tv-board-square{min-height:62px}
}


/* V4.1 Time Vampires artwork integration */
.tv-art-note{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:18px;align-items:center}
.tv-art-feature{display:flex;align-items:center;justify-content:center}
.tv-cover-art,.tv-story-banner-art,.tv-reader-art,.tv-chapter-thumb{display:block;width:100%;height:auto;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.tv-story-banner{margin:18px 0 8px}
.tv-story-banner-art{max-width:860px;margin:0 auto}
.tv-reader-figure{margin:16px 0 18px}
.tv-reader-figure figcaption{margin-top:8px;font-size:12px;color:var(--muted);text-align:center}
.tv-chapter-thumb-wrap{width:100%;margin-bottom:10px}
.tv-chapter-thumb{aspect-ratio:3/2;object-fit:cover}
.tv-chapter-card{overflow:hidden}
.tv-chapter-card .tv-chapter-copy{display:flex;flex-direction:column;gap:4px}
@media(max-width:760px){
  .tv-art-note{grid-template-columns:1fr}
}


.tv-board-preview-card{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(260px,.9fr);gap:18px;align-items:start;margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.tv-board-preview-wrap{background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow)}
.tv-board-preview-art{display:block;width:100%;height:auto;border-radius:12px}
.tv-board-preview-copy h2{font-size:30px;margin:6px 0 10px}
.tv-board-preview-copy ul{margin:10px 0 18px 18px;color:var(--muted);display:grid;gap:8px}
.tv-board-stage{position:relative;margin:18px auto 0;background:#fff;border:1px solid var(--line);border-radius:26px;padding:12px;box-shadow:var(--shadow);max-width:980px;aspect-ratio:1448/1086;overflow:hidden}
.tv-board-image{width:100%;height:100%;object-fit:contain;display:block;border-radius:18px}
.tv-board-token{position:absolute;width:clamp(30px,4.2vw,46px);aspect-ratio:1/1;border-radius:999px;display:grid;place-items:center;font-weight:900;font-size:clamp(14px,2vw,20px);border:3px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.15);z-index:2}
.tv-board-token.current{box-shadow:0 0 0 4px rgba(245,193,66,.28),0 10px 24px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.15)}
.token-henry{background:#1f5ea8;color:#fff}
.token-jennie{background:#e67e22;color:#fff}
.tv-board-event-card{text-align:left;max-width:840px}
.tv-board-event-head{display:flex;gap:16px;align-items:flex-start}
.tv-board-event-head h2{margin:0 0 6px;font-size:28px}
.tv-board-event-head p{margin:0;color:var(--muted);line-height:1.55}
.tv-board-event-icon{width:56px;min-width:56px;height:56px;border-radius:16px;background:rgba(23,50,77,.08);display:grid;place-items:center;font-size:28px}
body.dark .tv-board-event-icon{background:rgba(255,255,255,.08)}
.tv-card-art-wrap{margin-top:18px;background:linear-gradient(180deg,rgba(23,50,77,.04),rgba(23,50,77,.01));border:1px solid var(--line);border-radius:22px;padding:16px}
body.dark .tv-card-art-wrap{background:rgba(255,255,255,.03)}
.tv-card-art{display:block;max-width:100%;width:min(100%,540px);margin:0 auto;border-radius:16px;border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 30px rgba(0,0,0,.10)}
.tv-card-caption{margin-top:12px;text-align:center;display:grid;gap:4px;color:var(--muted)}
.tv-card-caption strong{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--ink)}
body.dark .tv-card-caption strong{color:var(--paper)}
@media (max-width: 860px){.tv-board-preview-card{grid-template-columns:1fr}.tv-board-stage{padding:8px;border-radius:20px}.tv-board-token{border-width:2px}}
@media (max-width: 560px){.tv-board-event-head{flex-direction:column}.tv-board-event-icon{width:48px;min-width:48px;height:48px;font-size:24px}.tv-board-preview-copy h2{font-size:26px}}


/* V4.1.3 — Hosted release: Time Vampires Coming Soon */
.activity-tab-coming{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.coming-soon-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:rgba(240,165,58,.16);color:#a96512;border:1px solid rgba(240,165,58,.32);line-height:1.2}
.activity-tab-coming.active .coming-soon-badge{background:rgba(255,255,255,.16);color:inherit;border-color:rgba(255,255,255,.24)}
.tv-coming-shell{max-width:1000px;margin:0 auto;padding:18px 0 48px}
.tv-coming-card{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:30px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.tv-coming-card:after{content:'COMING SOON';position:absolute;right:-44px;top:28px;transform:rotate(38deg);background:#f0a53a;color:#182435;font-size:11px;font-weight:950;letter-spacing:.16em;padding:8px 52px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.tv-coming-art{display:flex;align-items:center;justify-content:center}
.tv-coming-cover{width:100%;max-width:430px;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.tv-coming-copy{padding:8px 8px 8px 0}
.tv-coming-label{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(240,165,58,.14);color:#a96512;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:11px;margin-bottom:14px}
.tv-coming-copy h1{font-size:clamp(42px,7vw,72px);line-height:.98;margin:7px 0 16px}
.tv-coming-lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:620px}
.tv-coming-feature-list{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}
.tv-coming-feature-list span{display:inline-flex;align-items:center;padding:9px 12px;border-radius:14px;background:rgba(23,50,77,.06);font-weight:800;font-size:13px;border:1px solid var(--line)}
.tv-coming-small{font-size:13px;color:var(--muted);margin:0 0 20px}
.tv-soon-chip{background:rgba(240,165,58,.14);color:#a96512;border:1px solid rgba(240,165,58,.24)}
.dash-tv-coming .track{display:none}
html[data-theme="dark"] .coming-soon-badge,html[data-theme="dark"] .tv-coming-label,html[data-theme="dark"] .tv-soon-chip{color:#ffd68c;background:rgba(240,165,58,.15)}
html[data-theme="dark"] .tv-coming-feature-list span{background:rgba(255,255,255,.05)}
@media(max-width:760px){
  .activity-tab-coming{gap:5px}.coming-soon-badge{font-size:8px;padding:2px 5px}
  .tv-coming-card{grid-template-columns:1fr;padding:18px;gap:18px}
  .tv-coming-copy{padding:0}
  .tv-coming-card:after{right:-50px;top:22px}
}