/* Legacy feature styles. Shared tokens and primitives live in style-foundation.css. */
html{font-size:150%}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 15% 5%,#f0f7e8 0 22%,transparent 42%),radial-gradient(circle at 90% 8%,#fff0d7 0 18%,transparent 38%),var(--bg);color:var(--ink);font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;letter-spacing:.01em;min-height:100vh}a{color:inherit;text-decoration:none}.shell{width:min(1180px,calc(100% - 40px));margin:0 auto}.topbar{position:sticky;top:0;z-index:10;backdrop-filter:blur(18px);background:rgba(247,244,238,.78);border-bottom:1px solid rgba(234,223,206,.65)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.02em}.brand-mark{width:40px;height:40px;border-radius:15px;background:linear-gradient(135deg,var(--brand),#89b56f);display:grid;place-items:center;color:#fff;box-shadow:0 12px 28px rgba(79,123,85,.22)}.nav-links{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(255,250,242,.7)}.nav-links a{padding:10px 15px;border-radius:999px;font-size:21px;color:var(--muted);white-space:nowrap}.nav-links a.active,.nav-links a:hover{background:var(--ink);color:#fff}.hero{padding:54px 0 28px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:19.5px;font-weight:800}.hero h1{font-size:clamp(57px,9vw,108px);line-height:1.04;margin:18px 0 14px;letter-spacing:-.055em}.hero p{max-width:760px;color:var(--muted);font-size:27px;line-height:1.8;margin:0}.grid{display:grid;gap:20px}.grid.one{grid-template-columns:1fr}.grid.two{grid-template-columns:1.05fr .95fr}.grid.three{grid-template-columns:repeat(3,1fr)}.card{background:rgba(255,250,242,.86);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.card.compact{padding:18px}.card h2,.card h3{margin:0 0 12px;letter-spacing:-.03em}.muted{color:var(--muted)}.button,button{appearance:none;border:0;border-radius:999px;background:var(--ink);color:#fff;padding:12px 18px;font-weight:800;cursor:pointer;box-shadow:0 12px 24px rgba(36,27,19,.12);font-size:21px}.button.secondary,button.secondary{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}.button.soft,button.soft{background:var(--soft);color:var(--brand);box-shadow:none}.button.danger,button.danger{background:#fff1f1;color:var(--danger);box-shadow:none}.button:disabled,button:disabled{opacity:.45;cursor:not-allowed}.form{display:grid;gap:14px}.field{display:grid;gap:8px}.field label{font-size:19.5px;font-weight:900;color:var(--muted)}input,select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:18px;padding:13px 14px;color:var(--ink);font:inherit;outline:0}input:focus,select:focus,textarea:focus{border-color:#b5c9a8;box-shadow:0 0 0 4px rgba(79,123,85,.10)}.setup-card{max-width:760px}.book-list{display:grid;gap:12px}.book-option{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);border-radius:22px;background:#fff}.book-option strong{display:block}.book-option small{color:var(--muted)}.study-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.study-card{min-height:540px;display:grid;align-content:space-between;gap:22px}.word-main{text-align:center;padding:28px 20px}.word-title{display:flex;align-items:center;justify-content:center;gap:12px;font-size:clamp(72px,12vw,132px);font-weight:950;letter-spacing:-.07em;line-height:1;margin:0 0 10px}.audio{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--brand);box-shadow:none;padding:0}.pron{color:var(--muted);font-size:27px}.meaning{font-size:36px;line-height:1.55;margin:28px auto 0;max-width:760px}.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}.chip{padding:7px 11px;border-radius:999px;background:var(--soft-2);border:1px solid #f1d5ae;color:#865b20;font-weight:800;font-size:19.5px}.chip.green{background:var(--soft);border-color:#dcebd5;color:var(--brand)}.structure{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.part{padding:9px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);font-weight:900}.memo{background:var(--soft);border:1px solid #dcebd5;border-radius:18px;padding:16px;line-height:1.75;color:#43583d}.example{background:#fff;border:1px dashed var(--line);border-radius:18px;padding:14px;line-height:1.7}.toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.stat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat .box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}.stat strong{display:block;font-size:36px}.progress{height:10px;background:#eee2d2;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#a1bd64);border-radius:999px}.category-grid{display:grid;gap:22px}.category-block h2{display:flex;align-items:center;justify-content:space-between;font-size:39px}.book-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.book-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;display:grid;gap:12px}.book-card h3{font-size:31.5px}.book-card .meta{display:flex;gap:8px;flex-wrap:wrap}.pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:18px;font-weight:900}.searchbar{display:flex;gap:10px}.searchbar input{flex:1}.result-list{display:grid;gap:12px}.result-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px}.result-card h3{display:flex;align-items:center;justify-content:space-between;gap:12px}.admin-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.metric{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}.metric strong{font-size:48px;display:block}.issue-list{display:grid;gap:10px}.issue{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}.empty{color:var(--muted);padding:24px;text-align:center}.footer{padding:50px 0;color:var(--muted);font-size:19.5px}.hidden{display:none!important}@media(max-width:860px){.shell{width:min(100% - 24px,1180px)}.nav{height:auto;padding:12px 0;align-items:flex-start;flex-direction:column}.nav-links{width:100%;justify-content:space-between;overflow:auto}.nav-links a{padding:9px 11px}.grid.two,.grid.three,.study-layout{grid-template-columns:1fr}.hero{padding-top:34px}.admin-metrics{grid-template-columns:repeat(2,1fr)}.word-title{font-size:81px}.meaning{font-size:30px}.searchbar{flex-direction:column}}

/* v17: 助记内容多行展示，方便卡片阅读 */
.memo{white-space:normal;font-size:22.5px;}
.card.compact h3{display:flex;align-items:center;gap:6px;}


/* v26 card layout refinement */
.study-card{min-height:540px;display:grid;align-content:start;gap:22px}
.word-main{text-align:center;padding:12px 8px 0}
.word-title{display:flex;align-items:center;justify-content:center;gap:12px;font-size:clamp(84px,12vw,138px);font-weight:950;letter-spacing:-.07em;line-height:1;margin:0 0 12px}
.chips-center{justify-content:center;margin-top:0}
.card-stack{display:grid;gap:16px}
.info-card h3{font-size:27px;margin-bottom:14px}
.pron-card{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.pron-big{font-size:42px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.sense-list{display:grid;gap:12px}
.sense-row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.sense-pos{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border-radius:999px;background:var(--soft-2);border:1px solid #f1d5ae;color:#865b20;font-weight:900}
.sense-meaning{font-size:27px;line-height:1.8}
.memo{background:var(--soft);border:1px solid #dcebd5;border-radius:18px;padding:16px;line-height:1.85;color:#43583d;font-size:24px}
.example-list{display:grid;gap:12px}
.example{background:#fff;border:1px dashed var(--line);border-radius:18px;padding:14px;line-height:1.8}
@media(max-width:860px){
  .word-title{font-size:81px}
  .pron-big{font-size:33px}
  .sense-row{grid-template-columns:1fr;gap:10px}
  .sense-meaning{font-size:25.5px}
}

.pron-label{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:18px;font-weight:900}
.audio.audio-wide{width:auto;height:42px;padding:0 14px;border-radius:999px;font-size:19.5px}

/* v28: highlight the current vocabulary item inside example sentences */
.example-word{
  background:linear-gradient(transparent 52%,#f6d96b 52%);
  color:var(--ink);
  padding:0 .08em;
  border-radius:.18em;
  font-weight:950;
}

/* v32: fixed single-card learning layout */
body.learning-active{overflow:hidden}
body.learning-active .hero,
body.learning-active .footer{display:none}
body.learning-active main.shell{padding:18px 0}
body.learning-active .study-layout{
  height:calc(100vh - 112px);
  min-height:620px;
  align-items:stretch;
}
body.learning-active .study-card{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:16px;
  overflow:hidden;
}
#studyCard{
  min-height:0;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.study-card-content{
  width:100%;
  display:grid;
  gap:14px;
  transform-origin:top center;
}
.word-main{padding:4px 8px 0}
.word-title{font-size:clamp(78px,10.2vw,123px);margin:0 0 10px}
.pron-inline{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.study-info-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}
.study-info-grid.single{grid-template-columns:1fr}
.study-section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:15px 16px;
}
.study-section h3{font-size:24px;margin:0 0 10px}
.sense-list{gap:8px}
.sense-row{padding:9px 11px;grid-template-columns:62px 1fr;gap:10px}
.sense-pos{min-height:30px;padding:4px 8px;font-size:19.5px}
.sense-meaning{font-size:24px;line-height:1.6}
.memo{padding:13px 14px;font-size:22.5px;line-height:1.7}
.example-section{padding-bottom:14px}
.example-list{gap:8px}
.example{padding:12px 13px;line-height:1.65;font-size:22.5px}
.toolbar{flex-wrap:nowrap}

/* Current vocabulary item inside the example uses a distinct accent color. */
.example-word{
  background:rgba(211,82,62,.10);
  color:#cf513e;
  border-bottom:2px solid #e38b7b;
  padding:0 .10em;
  border-radius:.18em;
  font-weight:950;
}

@media(max-width:860px){
  body.learning-active{overflow:hidden}
  body.learning-active main.shell{padding:10px 0}
  body.learning-active .study-layout{
    height:calc(100svh - 142px);
    min-height:500px;
    grid-template-columns:1fr;
  }
  body.learning-active .study-layout>aside{display:none}
  body.learning-active .study-card{padding:16px;gap:12px}
  .study-info-grid{grid-template-columns:1fr}
  .word-title{font-size:72px}
  .pron-big{font-size:30px}
  .study-section{padding:12px 13px}
  .sense-row{grid-template-columns:56px 1fr}
  .sense-meaning{font-size:22.5px}
  .memo,.example{font-size:21px}
  .toolbar button{padding:10px 12px;font-size:19.5px}
}

.pron-list{display:grid;gap:10px;width:100%;}.pron-list .pron-inline{padding:8px 0;border-bottom:1px solid var(--line);}.pron-list .pron-inline:last-child{border-bottom:0;}

/* v38 bug fixes: standard scaling, completion state, and visible errors */
.study-card-content{
  transform-origin:top center;
  will-change:transform;
}
.study-card-content.compact-fit{gap:10px}
.study-card-content.compact-fit .word-title{margin-bottom:6px}
.study-card-content.compact-fit .study-section{padding:12px 13px}
.study-card-content.ultra-fit{gap:7px}
.study-card-content.ultra-fit .word-main{padding-top:0}
.study-card-content.ultra-fit .study-section{padding:9px 11px}
.study-card-content.ultra-fit .sense-row{padding:7px 9px}
.study-card-content.ultra-fit .memo,
.study-card-content.ultra-fit .example{padding:9px 10px;line-height:1.5}
.day-complete{
  width:min(620px,100%);
  min-height:100%;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:14px;
  text-align:center;
  padding:28px;
}
.day-complete h2{font-size:clamp(45px,7.5vw,72px);margin:0}
.complete-mark{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:var(--soft);color:var(--brand);font-size:57px;font-weight:950;
  border:1px solid #dcebd5;
}
.error-card{margin:20px 0;border-color:#efc6c1;background:#fff5f3}
.error-card strong{font-size:30px;color:var(--danger)}

/* v39 learning card actions and overflow menu */
.study-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.status-btn{
  min-height:74px;
  border:0;
  border-radius:18px;
  padding:12px 10px 10px;
  display:grid;
  gap:4px;
  justify-items:center;
  align-content:center;
  font-weight:900;
  box-shadow:none;
}
.status-btn span{font-size:42px;line-height:1.05;letter-spacing:.02em}
.status-btn small{font-size:19.5px;opacity:.86}
.status-btn.known{background:#76a999;color:#fff}
.status-btn.fuzzy{background:#c1891d;color:#fff}
.status-btn.strange{background:#b65f36;color:#fff}
.status-btn:disabled{opacity:.5;cursor:not-allowed}

.study-card-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  margin-bottom:8px;
}
.study-card-topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
}
.study-back-button{flex:none;font-size:24px;font-weight:800;line-height:1}
.study-back-button span{display:block;transform:translateY(-1px)}
.study-back-button:disabled{opacity:.28;cursor:not-allowed;transform:none;box-shadow:none}
.icon-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:30px;
  font-weight:900;
  padding:0;
  display:grid;
  place-items:center;
  box-shadow:none;
}
.menu-wrap{position:relative}
.menu-toggle{font-size:0;line-height:1;position:relative}
.menu-toggle::before{
  content:"";width:4px;height:4px;border-radius:50%;background:currentColor;
  position:absolute;left:50%;top:50%;
  box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor;
  transform:translate(-50%,-50%);
  transition:transform .16s ease
}
.menu-toggle[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(180deg)}
.card-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(260px,72vw);
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 18px 40px rgba(28,22,12,.16);
  overflow:hidden;
  z-index:40;
}
.card-menu button{
  width:100%;
  padding:16px 18px;
  border:0;
  border-bottom:1px solid #f0e8db;
  border-radius:0;
  background:#fff;
  color:#5c5951;
  text-align:left;
  font-size:24px;
  font-weight:700;
}
.card-menu button:last-child{border-bottom:0}
.card-menu button:hover{background:#faf7f1}

.toast-host{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:grid;
  gap:10px;
  z-index:80;
  pointer-events:none;
}
.toast{
  min-width:160px;
  max-width:min(78vw,360px);
  padding:11px 14px;
  border-radius:14px;
  background:rgba(30,27,22,.88);
  color:#fff;
  text-align:center;
  font-size:21px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:860px){
  .study-actions{gap:10px}
  .status-btn{min-height:66px;padding:10px 8px}
  .status-btn span{font-size:33px}
  .status-btn small{font-size:18px}
  .study-card-topbar{margin-bottom:2px}
  .card-menu{width:min(260px,82vw)}
}

/* v40: reveal the learning card before grading it */
.word-card-details{
  display:grid;
  gap:14px;
}
.study-card-content.word-card-collapsed{
  min-height:100%;
  align-content:center;
  cursor:pointer;
  outline:none;
}
.study-card-content.word-card-collapsed .word-main{
  padding-bottom:36px;
}
.study-card-content.word-card-collapsed .word-title{
  font-size:clamp(96px,13.5vw,162px);
}
.study-card-content.word-card-collapsed:focus-visible{
  border-radius:22px;
  box-shadow:0 0 0 3px rgba(75,121,67,.22);
}
.study-card-content.word-card-revealed{
  cursor:default;
}
@media(max-width:860px){
  .study-card-content.word-card-collapsed .word-main{padding-bottom:18px}
  .study-card-content.word-card-collapsed .word-title{font-size:clamp(81px,21vw,123px)}
}
.study-card-content.word-card-collapsed{position:relative}
.study-card-content.word-card-collapsed .study-card-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:3;
}

/* v42: transparent human-memory scheduler */
.memory-insight{
  border:1px solid #dce6f2;
  background:#f5f8fc;
  color:#4b5b70;
  border-radius:16px;
  padding:12px 14px;
  line-height:1.65;
  font-size:21px;
}
.memory-insight strong{color:#8a4f35}
.setup-card .field small{display:block;margin-top:7px;line-height:1.5}
@media(max-width:860px){
  .memory-insight{padding:10px 12px;font-size:19.5px}
  .status-btn small{max-width:110px;line-height:1.25;text-align:center}
}

/* v43: single animated pronunciation control */
.sound-button{
  position:relative;
  overflow:visible;
  isolation:isolate;
}
.sound-button .speaker-symbol{
  display:block;
  transform-origin:45% 55%;
  transition:transform .18s ease;
  z-index:2;
}
.sound-button .speaker-waves{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  border-radius:inherit;
}
.sound-button .speaker-waves i{
  position:absolute;
  width:18px;
  height:18px;
  border:2px solid currentColor;
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  opacity:0;
  transform:rotate(45deg) scale(.5);
}
.sound-button .speaker-waves i:nth-child(2){width:26px;height:26px}
.sound-button .speaker-waves i:nth-child(3){width:34px;height:34px}
.sound-button.is-speaking{
  background:var(--brand);
  color:#fff;
  box-shadow:0 0 0 5px rgba(79,123,85,.12),0 12px 28px rgba(79,123,85,.28);
}
.sound-button.is-speaking .speaker-symbol{animation:speakerPulse .72s ease-in-out infinite}
.sound-button.is-speaking .speaker-waves i{animation:speakerWave 1.15s ease-out infinite}
.sound-button.is-speaking .speaker-waves i:nth-child(2){animation-delay:.18s}
.sound-button.is-speaking .speaker-waves i:nth-child(3){animation-delay:.36s}
.audio.is-speaking{
  background:var(--brand);
  color:#fff;
  animation:audioButtonPulse .8s ease-in-out infinite;
}
@keyframes speakerPulse{
  0%,100%{transform:scale(1) rotate(0)}
  35%{transform:scale(1.12) rotate(-5deg)}
  70%{transform:scale(.98) rotate(4deg)}
}
@keyframes speakerWave{
  0%{opacity:.62;transform:rotate(45deg) scale(.35)}
  70%{opacity:.16}
  100%{opacity:0;transform:rotate(45deg) scale(1.28)}
}
@keyframes audioButtonPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@media(prefers-reduced-motion:reduce){
  .sound-button.is-speaking .speaker-symbol,
  .sound-button.is-speaking .speaker-waves i,
  .audio.is-speaking{animation:none}
}

/* v44: dual learning plan modes */
.plan-mode-fieldset{
  margin:0;
  padding:0;
  border:0;
}
.plan-mode-fieldset legend{
  margin-bottom:10px;
  font-weight:900;
}
.plan-mode-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.plan-mode-option{
  position:relative;
  display:grid;
  grid-template-columns:46px 1fr;
  align-items:center;
  gap:12px;
  min-height:104px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.plan-mode-option:hover{
  transform:translateY(-1px);
  border-color:#b9c9ae;
}
.plan-mode-option.selected{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(79,123,85,.12);
  background:#fbfdf9;
}
.plan-mode-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.plan-mode-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:var(--soft);
  color:var(--brand);
  font-size:28.5px;
  font-weight:950;
}
.plan-mode-option>span:last-child{
  display:grid;
  gap:6px;
}
.plan-mode-option strong{
  font-size:25.5px;
}
.plan-mode-option small{
  color:var(--muted);
  line-height:1.5;
}
.plan-parameter{
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fffdf9;
}
.number-input-with-unit{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  overflow:hidden;
}
.number-input-with-unit input{
  border:0;
  border-radius:0;
  box-shadow:none;
}
.number-input-with-unit span{
  padding:0 15px;
  color:var(--muted);
  font-weight:800;
  border-left:1px solid var(--line);
}
.plan-preview{
  min-height:154px;
  padding:16px;
  border:1px solid #dce8d4;
  border-radius:20px;
  background:linear-gradient(145deg,#f8fbf5,#fff);
}
.plan-preview-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.plan-preview-head strong{
  font-size:28.5px;
}
.plan-preview-head span{
  color:var(--muted);
  font-size:19.5px;
}
.plan-preview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.plan-preview-metric{
  display:grid;
  gap:4px;
  padding:11px;
  border:1px solid #e2eadc;
  border-radius:14px;
  background:#fff;
}
.plan-preview-metric strong{
  font-size:28.5px;
  color:var(--brand);
}
.plan-preview-metric span{
  color:var(--muted);
  font-size:16.5px;
  line-height:1.35;
}
.plan-preview p{
  margin:13px 2px 0;
  color:#556250;
  line-height:1.65;
  font-size:19.5px;
}
.plan-preview-loading,.plan-preview-error{
  min-height:120px;
  display:grid;
  place-content:center;
  text-align:center;
  color:var(--muted);
}
.plan-preview-error{color:var(--danger)}
.plan-status-card{
  display:grid;
  align-content:start;
}
.plan-stat{
  grid-template-columns:1fr;
}
.plan-stat .box strong{
  font-size:33px;
}
.plan-day-breakdown{
  display:grid;
  gap:9px;
  margin-top:14px;
}
.plan-day-breakdown span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px;
  border-radius:13px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:19.5px;
}
.plan-day-breakdown strong{
  color:var(--ink);
  font-size:24px;
}

@media(max-width:760px){
  .plan-mode-grid{grid-template-columns:1fr}
  .plan-mode-option{min-height:92px}
  .plan-preview-head{display:grid;gap:4px}
  .plan-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.plan-preview p.plan-capacity-warning{
  color:#9a542f;
  background:#fff4ea;
  border:1px solid #f0d2bc;
  border-radius:13px;
  padding:10px 12px;
}

/* v46 JSON user system */
.login-required{margin:56px auto;max-width:680px;text-align:center;padding:44px}
.login-required h1{font-size:clamp(48px,7.5vw,78px);margin:8px 0 14px}
.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:14px;background:var(--brand);color:#fff;font-weight:900;text-decoration:none}
.button-link.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.account-main{padding-bottom:40px}
.account-hero{padding-bottom:28px}
.account-auth-grid,.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.auth-card{padding:28px}
.auth-card h2{font-size:42px;margin-bottom:18px}
.profile-card,.data-summary-card{display:grid;gap:14px;align-content:start}
.profile-card h2{font-size:51px;margin:0}
.profile-meta{display:flex;gap:8px;flex-wrap:wrap}
.profile-meta span{padding:7px 10px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:19.5px;font-weight:900}
.account-toolbar{justify-content:flex-start}
.account-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 16px}
.account-metrics div{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff;display:grid;gap:4px}
.account-metrics strong{font-size:37.5px}
.account-metrics span{font-size:18px;color:var(--muted)}
.legacy-card{margin-top:22px;border-color:#d8c688;background:#fffdf3}
.danger-zone{margin-top:22px}
.clear-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.clear-option{border:1px solid var(--line);border-radius:20px;padding:18px;background:#fff;display:grid;gap:10px;align-content:start}
.clear-option h3{font-size:30px;margin:0}
.clear-option p{color:var(--muted);font-size:21px;line-height:1.6;min-height:44px}
.clear-option input,.clear-option select{width:100%}
.delete-option{border-color:#e7bbb4;background:#fff8f6}
.danger-button{background:#fff;color:#a94135;border:1px solid #dca69d}
.danger-button:hover{background:#fff0ed}
.danger-button.solid{background:#a94135;color:#fff;border-color:#a94135}
@media(max-width:860px){
  .account-auth-grid,.account-grid,.clear-grid{grid-template-columns:1fr}
  .account-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login-required{margin:24px auto;padding:28px 20px}
}

/* v48 book preview and plan-first flow */
.no-plan-card{
  margin-top:48px;
  min-height:360px;
  display:grid;
  place-content:center;
  justify-items:center;
  text-align:center;
  gap:14px;
}
.no-plan-card h1{font-size:clamp(51px,9vw,84px);margin:0}
.book-preview-page{padding-top:28px}
.book-preview-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-bottom:22px;
}
.book-preview-hero h1{font-size:clamp(51px,7.5vw,87px);margin:8px 0 12px}
.back-link{display:inline-flex;margin-bottom:16px;color:var(--muted);font-weight:800}
.book-preview-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.book-preview-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:22px;
  align-items:start;
}
.word-catalog-card{min-width:0}
.preview-plan-card{position:sticky;top:92px}
.catalog-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.catalog-head h2{margin:5px 0 6px}
.catalog-controls{
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto auto;
  gap:9px;
  min-width:min(100%,620px);
}
.catalog-controls input,.catalog-controls select{min-height:44px}
.word-preview-list{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
}
.word-preview-row{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid #eee5d7;
}
.word-preview-row:last-child{border-bottom:0}
.word-preview-row:hover{background:#fbf8f2}
.word-preview-row>.personal-wordbook-star{width:44px!important;height:44px!important}
.word-preview-index{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.word-preview-main{min-width:0;display:grid;grid-template-columns:minmax(150px,.7fr) minmax(220px,1.5fr);gap:18px;align-items:center}
.word-preview-word{display:flex;align-items:baseline;gap:10px;min-width:0}
.word-preview-word strong{font-size:30px;overflow-wrap:anywhere}
.word-preview-word span{color:var(--muted);font-size:19.5px}
.word-preview-meaning{display:flex;align-items:flex-start;gap:10px;line-height:1.65;min-width:0}
.word-preview-pos{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:var(--soft-2);color:#865b20;font-size:18px;font-weight:900}
.catalog-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.catalog-pagination button{min-width:100px}
.compact-plan-grid{grid-template-columns:1fr}
.preview-plan-card .plan-mode-option{padding:13px}
.preview-plan-card .plan-preview-grid{grid-template-columns:repeat(2,1fr)}
.login-plan-prompt{padding:16px;border:1px solid #ead5b4;background:#fff8ed;border-radius:18px;margin-bottom:16px}
.login-plan-prompt p{margin-top:0}
.plan-form-disabled{opacity:.75}

@media(max-width:1080px){
  .book-preview-layout{grid-template-columns:1fr}
  .preview-plan-card{position:static;order:-1}
  .catalog-head{align-items:stretch;flex-direction:column}
  .catalog-controls{min-width:0;width:100%}
}
@media(max-width:720px){
  .book-preview-hero{align-items:flex-start;flex-direction:column}
  .catalog-controls{grid-template-columns:1fr}
  .word-preview-row{grid-template-columns:36px minmax(0,1fr)}
  .word-preview-row>.personal-wordbook-star{grid-column:2;justify-self:end}
  .word-preview-main{grid-template-columns:1fr;gap:7px}
  .word-preview-meaning{align-items:flex-start}
}

/* v49 performance and interaction polish */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a,input,select,textarea{touch-action:manipulation}
button,.button,.nav-links a,.book-card,.word-preview-row{
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease,transform .16s ease;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(79,123,85,.28);
  outline-offset:2px;
}
@media(hover:hover){
  button:not(:disabled):hover,.button:hover{transform:translateY(-1px)}
  .book-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(75,54,31,.12)}
}
button.is-busy{cursor:wait;position:relative;padding-right:38px}
button.is-busy::after{
  content:"";position:absolute;right:15px;top:50%;width:14px;height:14px;margin-top:-7px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:v49-spin .7s linear infinite;
}
@keyframes v49-spin{to{transform:rotate(360deg)}}

/* Avoid expensive layout/paint work for long off-screen lists. */
.word-preview-row,.result-card{
  content-visibility:auto;
  contain-intrinsic-size:74px;
}
.word-preview-row{contain:layout paint style}

/* Catalog keeps its previous content visible while a newer request loads. */
.word-catalog-card{position:relative;min-height:280px}
.word-catalog-card.is-loading::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.50) 48%,transparent 66%);
  background-size:220% 100%;animation:v49-shimmer 1.1s linear infinite;
}
.word-catalog-card.is-loading .word-preview-list{opacity:.58}
.catalog-skeleton{display:grid;gap:1px;background:#eee5d7}
.catalog-skeleton span{
  height:68px;display:block;background:linear-gradient(90deg,#fff 18%,#f7f2e9 45%,#fff 72%);
  background-size:220% 100%;animation:v49-shimmer 1.15s linear infinite;
}
@keyframes v49-shimmer{to{background-position:-220% 0}}
.plan-preview{transition:opacity .16s ease}
.plan-preview.is-loading{opacity:.58}

/* Learning card transitions are deliberately short so the UI feels immediate. */
#studyCard .study-card-content{opacity:0;transition:opacity .14s ease}
#studyCard.card-ready .study-card-content{opacity:1}
#studyCard .study-card-content.card-leaving{opacity:0}
.study-card.is-answering #studyCard{opacity:1}
.study-layout.suppress-selection,.study-layout.suppress-selection *{
  -webkit-user-select:none!important;
  user-select:none!important;
}
.study-layout.is-loading{opacity:.68;pointer-events:none}
.word-card-details:not(.hidden){animation:v49-details-in .16s ease both}
@keyframes v49-details-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.progress span{transition:width .24s ease}

/* Faster, steadier mobile layout. */
@media(max-width:860px){
  .topbar{backdrop-filter:blur(12px)}
  .nav-links{-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .card{padding:18px;border-radius:22px}
  .word-preview-row{contain-intrinsic-size:104px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* v50: answer buttons, mastered action, and custom keyboard shortcuts */
.study-actions{
  display:grid;
  gap:10px;
}
.study-main-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.status-btn{
  position:relative;
  min-height:88px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid transparent;
  border-radius:20px;
  color:#fff;
  overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.status-btn:hover:not(:disabled){
  transform:translateY(-2px);
  filter:brightness(1.035);
  box-shadow:0 10px 22px rgba(55,43,24,.13);
}
.status-btn:active:not(:disabled){transform:translateY(0)}
.status-btn.known{background:#438f82;border-color:#397e73}
.status-btn.fuzzy{background:#d49a2a;border-color:#bf861a}
.status-btn.strange{background:#ce6552;border-color:#b95545}
.status-btn .status-copy{
  min-width:0;
  display:grid;
  justify-items:center;
  gap:5px;
  line-height:1.15;
}
.status-btn .status-copy strong{
  display:block;
  font-size:40.5px;
  line-height:1;
  white-space:nowrap;
  color:inherit;
}
.status-btn .status-copy small{
  display:block;
  max-width:180px;
  font-size:19.5px;
  line-height:1.3;
  white-space:normal;
  text-align:center;
  color:rgba(255,255,255,.92);
}
.shortcut-badge{
  flex:0 0 auto;
  min-width:34px;
  height:34px;
  padding:0 8px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.48);
  border-bottom-width:3px;
  border-radius:9px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font:800 21px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  box-shadow:none;
}
.mastered-action{
  min-height:42px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid #d7d0c3;
  border-radius:14px;
  background:#f4f0e8;
  color:#5e5548;
  box-shadow:none;
}
.mastered-action:hover:not(:disabled){background:#ece6db}
.mastered-action .shortcut-badge{
  min-width:28px;
  height:28px;
  color:#655e53;
  border-color:#c7bfb1;
  background:#fff;
  font-size:18px;
}
.mastered-action>span{display:flex;align-items:baseline;gap:8px}
.mastered-action strong{font-size:22.5px;color:inherit}
.mastered-action small{font-size:18px;color:#7c7468}
.busy-label{display:inline-flex;align-items:center;justify-content:center;min-height:30px;font-weight:850}

.plan-side-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shortcut-summary{
  margin:10px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.5;
  text-align:center;
}

.shortcut-modal{
  position:fixed;
  inset:0;
  z-index:1300;
  display:grid;
  place-items:center;
  padding:20px;
  overflow:hidden;
}
.shortcut-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(30,27,22,.44);
  backdrop-filter:blur(4px);
}
.shortcut-dialog{
  position:relative;
  z-index:1;
  width:min(560px,100%);
  max-height:none;
  overflow:visible;
  padding:24px;
  box-shadow:0 28px 72px rgba(28,24,18,.24);
}
.shortcut-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.shortcut-dialog-head h2{margin:4px 0 0}
.shortcut-help{min-height:48px;margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.5}
.shortcut-help.is-error{color:#a94738;font-weight:700}
.shortcut-grid{display:grid;gap:8px;margin-top:10px}
.shortcut-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.shortcut-row>span{display:grid;gap:3px}
.shortcut-row strong{font-size:21px}
.shortcut-row small{color:var(--muted);font-size:15px}
.shortcut-capture{
  min-width:92px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid #cfc6b8;
  border-bottom-width:3px;
  border-radius:11px;
  background:#f8f5ef;
  color:#524b40;
  font:850 21px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  box-shadow:none;
}
.shortcut-capture.is-capturing{
  border-color:var(--brand);
  background:var(--soft);
  color:var(--brand);
  animation:shortcut-pulse 1s ease-in-out infinite;
}
.shortcut-error{
  margin:12px 0 0;
  padding:10px 12px;
  border-radius:12px;
  background:#fff0ed;
  color:#a94738;
  font-size:19.5px;
}
.shortcut-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}
@keyframes shortcut-pulse{50%{box-shadow:0 0 0 4px rgba(67,143,130,.14)}}

@media(max-width:860px){
  .study-main-actions{gap:8px}
  .status-btn{min-height:76px;padding:10px 8px;gap:7px;border-radius:16px}
  .status-btn .status-copy strong{font-size:30px}
  .status-btn .status-copy small{font-size:16.5px;max-width:96px}
  .shortcut-badge{min-width:27px;height:27px;padding:0 6px;font-size:16.5px;border-radius:7px}
  .mastered-action{min-height:38px}
  .mastered-action>span{gap:5px}
  .mastered-action small{display:none}
  .plan-side-actions{grid-template-columns:1fr}
  .shortcut-dialog{padding:16px}
}
@media(max-width:520px){
  .status-btn{display:grid;gap:5px;padding:8px 5px}
  .status-btn .status-copy{gap:3px}
  .status-btn .status-copy strong{font-size:28.5px}
  .status-btn .status-copy small{font-size:15px;line-height:1.2}
  .shortcut-row{padding:11px 12px}
  .shortcut-capture{min-width:78px}
}
@media(max-height:700px){
  .shortcut-modal{padding:10px}
  .shortcut-dialog{padding:13px 15px}
  .shortcut-dialog-head h2{font-size:26px}
  .shortcut-help{min-height:42px;margin-top:6px;font-size:14px;line-height:1.4}
  .shortcut-grid{gap:6px;margin-top:6px}
  .shortcut-row{min-height:54px;padding:5px 11px;border-radius:13px}
  .shortcut-row strong{font-size:18px}
  .shortcut-row small{font-size:13px}
  .shortcut-capture{min-height:44px;font-size:18px}
  .shortcut-dialog-actions{margin-top:8px}
}
@media(max-height:560px){
  .shortcut-modal{padding:8px}
  .shortcut-dialog{padding:8px 12px}
  .shortcut-dialog-head{align-items:center}
  .shortcut-dialog-head .eyebrow{display:none}
  .shortcut-dialog-head h2{margin:0;font-size:22px}
  .shortcut-dialog-head .icon-btn{width:44px;height:44px;min-height:44px}
  .shortcut-help{min-height:34px;margin-top:2px;font-size:12px;line-height:1.35}
  .shortcut-grid{gap:4px;margin-top:4px}
  .shortcut-row{min-height:44px;padding:2px 9px;border-radius:11px}
  .shortcut-row>span{gap:0}
  .shortcut-row strong{font-size:16px;line-height:1.15}
  .shortcut-row small{font-size:12px;line-height:1.15}
  .shortcut-capture{min-width:74px;min-height:44px;padding:6px 10px;font-size:16px}
  .shortcut-dialog-actions{margin-top:5px}
  .shortcut-dialog-actions button{min-height:44px;padding-block:6px}
}
@media(prefers-reduced-motion:reduce){.shortcut-capture.is-capturing{animation:none}}
.status-btn .status-copy{font-size:initial;letter-spacing:normal}

.study-actions{
  grid-template-columns:minmax(0,1fr) !important;
  width:100%;
  min-width:0;
}
.study-main-actions{
  width:100%;
  min-width:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.status-btn{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.status-btn .status-copy{
  width:100%;
  min-width:0;
}
.mastered-action{
  width:100%;
  box-sizing:border-box;
}

@media(max-width:620px){
  .study-main-actions{gap:7px}
  .status-btn{
    min-height:70px;
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    gap:5px;
    padding:9px 5px;
  }
  .status-btn .status-copy strong{font-size:27px}
  .status-btn .status-copy small{display:none}
  .shortcut-badge{min-width:29px;height:29px}
}

/* v51: example sentence pronunciation */
.example-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
}
.example-sentence{
  min-width:0;
  line-height:1.7;
}
.example-translation{
  display:block;
  margin-top:7px;
  line-height:1.65;
}
.example-audio-button{
  position:relative;
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #cbdcd2;
  border-radius:12px;
  background:linear-gradient(155deg,#fbfdfc,#edf4f0);
  color:#356b52;
  box-shadow:inset 0 1px 0 #fff,0 4px 11px rgba(35,83,58,.07);
  font-size:19px;
}
.example-audio-button:hover{
  transform:translateY(-1px);
  border-color:#8eaf9e;
  background:linear-gradient(155deg,#f8fcfa,#e5f0e9);
  box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(35,83,58,.11);
}
.example-audio-button.is-speaking{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(79,123,85,.12);
}
.example-speaker-icon{font-size:19px}
.example-audio-button .speaker-waves i:nth-child(1){width:14px;height:14px}
.example-audio-button .speaker-waves i:nth-child(2){width:21px;height:21px}
.example-audio-button .speaker-waves i:nth-child(3){width:28px;height:28px}
@media(max-width:560px){
  .example-head{gap:9px}
  .example-audio-button{width:36px;height:36px;border-radius:12px}
}

/* v52: optional reinforcement and spelling practice */
.day-complete-actions{
  display:grid;
  justify-items:center;
  gap:20px;
  width:min(680px,100%);
}
.optional-practice{
  width:100%;
  display:grid;
  gap:10px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.optional-practice>span{
  color:var(--muted);
  font-size:19.5px;
  font-weight:750;
}
.optional-practice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
  width:100%;
}
.practice-status-loading{
  grid-column:1/-1;
  padding:18px;
  border:1px dashed var(--line);
  border-radius:16px;
  color:var(--muted);
  text-align:center;
  font-size:21px;
}
.practice-entry{
  min-height:82px;
  display:grid;
  justify-items:start;
  align-content:center;
  gap:5px;
  text-align:left;
  padding:15px 18px;
}
.practice-entry strong{font-size:27px}
.practice-entry small{font-size:18px;color:var(--muted);line-height:1.45}

.reinforcement-shell{padding-top:42px}
.reinforcement-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:20px;
}
.reinforcement-head h1{margin:8px 0 8px;font-size:clamp(51px,9vw,90px)}
.secondary-link{background:#fff;color:var(--ink);border:1px solid var(--line)}
.reinforcement-card{
  width:min(820px,100%);
  margin:0 auto;
  min-height:520px;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:18px;
}
.meaning-reinforcement-card{
  width:min(960px,100%);
  min-height:780px;
  padding:28px;
  gap:16px;
}
.reinforcement-progress-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:21px;
  font-weight:750;
}
.reinforcement-question{
  min-height:330px;
  display:grid;
  align-content:center;
  gap:22px;
}
.meaning-reinforcement-card .reinforcement-question{min-height:580px;gap:24px}
.practice-prompt{text-align:center;display:grid;justify-items:center;gap:12px}
.practice-prompt h2{font-size:clamp(42px,7.5vw,69px);line-height:1.35;margin:0;max-width:720px}
.meaning-question-prompt{min-height:210px;align-content:center}
.practice-prompt .question-sense-list{
  width:min(720px,100%);
  max-width:none;
  display:grid;
  gap:9px;
  margin:0;
}
.question-sense-row{
  min-width:0;
  display:grid;
  grid-template-columns:max-content minmax(0,auto);
  align-items:center;
  justify-content:center;
  gap:20px;
  text-align:center;
}
.question-sense-row .sense-pos{
  min-width:124px;
  min-height:72px;
  flex:none;
  padding:14px 22px;
  font-size:24px;
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
}
.practice-prompt .question-sense-row strong{
  min-width:0;
  font-size:34.5px;
  line-height:1.35;
  text-align:center;
  overflow-wrap:anywhere;
}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.choice-option{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:none;
  text-align:left;
}
.choice-option:hover:not(:disabled){background:var(--soft);border-color:#c9dfc4;transform:translateY(-1px)}
.choice-option kbd{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#f4f0e8;border:1px solid #d9d0c2;border-bottom-width:3px;
  font:850 19.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.choice-option strong{font-size:31.5px}
.meaning-choice-option{
  height:190px;
  min-height:190px;
  max-height:190px;
  padding:14px 20px;
  overflow:visible;
  perspective:900px;
}
.meaning-choice-option.is-revealed-option:disabled{
  opacity:1;
  cursor:default;
  border-color:#dfaa9e;
  background:#fff4f1;
  box-shadow:inset 0 0 0 2px rgba(190,93,66,.12);
}
.choice-flip-card{
  min-width:0;
  height:160px;
  min-height:160px;
  max-height:160px;
  flex:1;
  display:grid;
  transform-style:preserve-3d;
}
.choice-flip-face{
  grid-area:1/1;
  min-width:0;
  display:grid;
  align-content:center;
  justify-items:center;
  backface-visibility:hidden;
  transition:transform .2s ease,opacity .12s ease;
}
.choice-flip-front{transform:rotateX(0);opacity:1}
.choice-flip-back{
  align-content:center;
  gap:7px;
  overflow:visible;
  padding:2px 0;
  transform:rotateX(180deg);
  opacity:0;
}
.choice-sense-row{
  width:auto;
  max-width:100%;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  align-items:start;
  justify-content:center;
  gap:9px;
  text-align:center;
}
.choice-flip-back small{
  min-width:76px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  padding:4px 10px;
  border:1px solid #e5c998;
  border-radius:999px;
  background:#fff8e8;
  color:#80622d;
  font-size:24px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.choice-flip-back strong{font-size:22.5px;line-height:1.34;text-align:center;overflow-wrap:anywhere}
.meaning-choice-option.is-dense-meaning .choice-flip-back{gap:5px}
.meaning-choice-option.is-dense-meaning .choice-flip-back strong{font-size:19.5px;line-height:1.3}
.meaning-choice-option.is-compact-meaning .choice-flip-back{gap:4px}
.meaning-choice-option.is-compact-meaning .choice-flip-back small{
  min-width:48px;
  min-height:26px;
  padding:3px 8px;
  font-size:15.5px;
}
.meaning-choice-option.is-compact-meaning .choice-flip-back strong{font-size:17px;line-height:1.28}
.meaning-choice-option.is-revealed-option .choice-flip-front{transform:rotateX(-180deg);opacity:0}
.meaning-choice-option.is-revealed-option .choice-flip-back{transform:rotateX(0);opacity:1}
@media(prefers-reduced-motion:reduce){
  .choice-flip-face{transition:none}
}
.spelling-prompt{gap:10px}
.practice-audio-button{
  position:relative;width:54px;height:54px;padding:0;border-radius:18px;
  display:grid;place-items:center;background:var(--soft);color:var(--brand);
  border:1px solid #d5e7d1;box-shadow:none;font-size:33px;
}
.practice-audio-button.is-speaking{background:var(--brand);color:#fff;box-shadow:0 0 0 5px rgba(79,123,85,.12)}
.spelling-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:8px}
.spelling-slots i{width:22px;height:5px;border-radius:999px;background:#ded7cb;transition:.15s ease}
.spelling-slots i.filled{background:var(--brand);transform:translateY(-2px)}
.spelling-input-wrap{display:grid;gap:8px;width:min(560px,100%);margin:0 auto}
.spelling-input-wrap>span{font-size:19.5px;color:var(--muted);font-weight:750}
.spelling-input-wrap input{
  width:100%;min-height:64px;text-align:center;font-size:42px;font-weight:850;
  letter-spacing:.08em;border-radius:18px;
}
.spelling-counter{text-align:center;margin:-10px 0 0;color:var(--muted);font-size:19.5px}
.reinforcement-feedback{
  display:grid;gap:8px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);
}
.reinforcement-feedback.is-correct{background:#edf7e9;border-color:#cfe3c9;color:#396843}
.reinforcement-feedback.is-wrong{background:#fff1ee;border-color:#efc7bf;color:#9c493b}
.reinforcement-feedback strong{font-size:28.5px}
.reinforcement-feedback span{font-size:24px}
.reinforcement-feedback small{line-height:1.5}
.reinforcement-feedback button{justify-self:start;margin-top:4px}
.reinforcement-complete{display:grid;place-items:center;text-align:center;gap:14px;padding:30px}
.reinforcement-complete h2{font-size:clamp(45px,7.5vw,72px);margin:0}
.independent-note{max-width:620px;padding:12px 14px;border-radius:14px;background:#f6f2eb;color:var(--muted);font-size:21px;line-height:1.6}

@media(max-width:700px){
  .optional-practice-grid,.choice-grid{grid-template-columns:1fr}
  .reinforcement-head{align-items:flex-start;flex-direction:column}
  .reinforcement-card{min-height:480px;padding:18px}
  .meaning-reinforcement-card{min-height:1070px;padding:20px}
  .reinforcement-progress-row{font-size:18px}
  .practice-prompt h2{font-size:42px}
  .meaning-question-prompt{min-height:240px}
  .practice-prompt .question-sense-row strong{font-size:28.5px}
  .choice-option{min-height:66px}
  .meaning-choice-option{height:190px;min-height:190px;max-height:190px;padding:14px 18px}
  .choice-flip-card{height:160px;min-height:160px;max-height:160px}
  .choice-flip-back strong{font-size:21px}
  .spelling-input-wrap input{font-size:36px}
}

@media(max-width:480px){
  .reinforcement-progress-row{align-items:flex-start;flex-direction:column;gap:3px}
}

.spelling-direct-entry{
  position:relative;
  width:min(100%,720px);
  min-height:74px;
  margin-top:8px;
  display:grid;
  place-items:center;
  cursor:text;
  border-radius:18px;
  outline:none;
}
.spelling-capture-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.01;
  border:0;
  padding:0;
  background:transparent;
  color:transparent;
  caret-color:transparent;
  z-index:2;
  cursor:text;
}
.spelling-capture-input:focus{outline:none;box-shadow:none}
.spelling-letter-slots{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:end;
  gap:10px;
  pointer-events:none;
}
.spelling-letter-slot{
  width:clamp(26px,4.3vw,42px);
  min-height:58px;
  display:grid;
  grid-template-rows:1fr 5px;
  align-items:end;
  justify-items:center;
  gap:6px;
}
.spelling-letter-slot b{
  min-height:42px;
  display:grid;
  place-items:end center;
  font-size:clamp(42px,7.5vw,63px);
  line-height:1;
  font-weight:900;
  color:var(--ink);
  text-transform:lowercase;
}
.spelling-letter-slot i{
  width:100%;
  height:5px;
  border-radius:999px;
  background:#ded7cb;
  transition:background .14s ease,transform .14s ease,box-shadow .14s ease;
}
.spelling-letter-slot.filled i{background:var(--brand)}
.spelling-letter-slot.active i{
  background:#9bb696;
  transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(79,123,85,.10);
  animation:spelling-caret-pulse 1s ease-in-out infinite;
}
.spelling-direct-entry:focus-within{
  background:rgba(79,123,85,.035);
}
.spelling-correction-feedback strong{font-size:33px}
@keyframes spelling-caret-pulse{50%{opacity:.45}}

/* The old lower text box is no longer rendered; keep these hidden for stale DOM/cache. */
.spelling-input-wrap,.spelling-counter,.spelling-slots{display:none!important}

@media(max-width:700px){
  .spelling-letter-slots{gap:7px}
  .spelling-letter-slot{width:clamp(22px,7vw,34px);min-height:52px}
  .spelling-letter-slot b{font-size:clamp(37.5px,12vw,51px);min-height:36px}
}

.choice-meaning-review{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:10px 0 2px;
}
.choice-meaning-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(92px,.6fr) minmax(0,1.4fr);
  gap:6px 12px;
  align-items:start;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  text-align:left;
}
.choice-meaning-row strong{font-size:22.5px;color:var(--ink);overflow-wrap:anywhere}
.choice-meaning-row span{font-size:21px;line-height:1.55;color:var(--muted)}
.choice-meaning-row small{grid-column:1/-1;font-size:16.5px;color:var(--muted)}
.choice-meaning-row.is-selected-option{box-shadow:inset 0 0 0 2px rgba(190,93,66,.22)}
.choice-meaning-row.is-correct-option{
  border-color:#9ac095;
  background:#f2f8ef;
}
.choice-meaning-row.is-correct-option::after{
  content:'正确';
  position:absolute;
  top:7px;
  right:8px;
  padding:2px 6px;
  border-radius:999px;
  background:#e3f1df;
  color:#4f7f55;
  font-size:15px;
  font-weight:900;
}
@media(max-width:700px){
  .choice-meaning-review{grid-template-columns:1fr}
}

.choice-grid-review{align-items:stretch}
.choice-option-review{
  position:relative;
  min-height:118px;
  align-items:flex-start;
  opacity:1!important;
  cursor:default;
  padding:16px 18px;
}
.choice-option-copy{
  min-width:0;
  display:grid;
  gap:7px;
  align-content:start;
  flex:1;
}
.choice-option-copy strong{font-size:31.5px;color:var(--ink);overflow-wrap:anywhere}
.choice-option-copy>span{font-size:22.5px;line-height:1.55;color:var(--muted)}
.choice-option-copy small{font-size:18px;color:var(--muted)}
.choice-option-review>em{
  position:absolute;
  top:10px;
  right:12px;
  padding:3px 8px;
  border-radius:999px;
  background:#f1ede5;
  color:var(--muted);
  font-size:16.5px;
  font-style:normal;
  font-weight:900;
}
.choice-option-review.is-selected-option{
  border-color:#dfaa9e;
  background:#fff4f1;
  box-shadow:inset 0 0 0 2px rgba(190,93,66,.14);
}
.choice-option-review.is-selected-option>em{background:#f7ddd7;color:#a34b3d}
.choice-option-review.is-correct-option{
  border-color:#91ba8d;
  background:#f1f8ee;
  box-shadow:inset 0 0 0 2px rgba(79,127,85,.12);
}
.choice-option-review.is-correct-option>em{background:#dfeeda;color:#4f7f55}
@media(max-width:700px){
  .choice-option-review{min-height:102px}
  .choice-option-copy>span{font-size:21px}
}

#previewPlanSubmit.plan-submit-unchanged,
#previewPlanSubmit:disabled:not(.is-busy){
  background:#aaa59d;
  color:#f7f4ee;
  box-shadow:none;
  opacity:1;
  cursor:not-allowed;
}
/* 单词速记：七个固定、非折叠分类入口 */
.knowledge-loader{width:40px;height:40px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--brand);animation:knowledgeSpin .8s linear infinite}
@keyframes knowledgeSpin{to{transform:rotate(360deg)}}
.knowledge-page{padding-bottom:20px}
.knowledge-hero{padding-bottom:18px}
.knowledge-hero h1{max-width:920px}
.knowledge-hero p{max-width:900px}
.knowledge-part-nav{margin:8px 0 24px;padding:26px;border:1px solid var(--line);border-radius:32px;background:rgba(255,250,242,.88);box-shadow:var(--shadow)}
.knowledge-part-nav-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}
.knowledge-part-nav-head h2{margin:10px 0 0;font-size:clamp(42px,6vw,63px);letter-spacing:-.045em}
.knowledge-part-nav-head p{max-width:420px;margin:0;color:var(--muted);line-height:1.7;text-align:right}
.knowledge-part-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.knowledge-part-button{position:relative;isolation:isolate;min-height:190px;width:100%;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;gap:12px 14px;align-items:start;text-align:left;padding:20px;border:2px solid #e7ddcf;border-radius:26px;background:#fff;color:var(--ink);box-shadow:0 12px 26px rgba(36,27,19,.08);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.knowledge-part-button::after{content:"";position:absolute;z-index:-1;right:-42px;bottom:-58px;width:140px;height:140px;border-radius:50%;background:var(--soft);opacity:.72;transition:transform .18s ease,opacity .18s ease}
.knowledge-part-button:hover{transform:translateY(-3px);border-color:#afc7a5;box-shadow:0 18px 34px rgba(62,92,56,.16)}
.knowledge-part-button:hover::after{transform:scale(1.12);opacity:1}
.knowledge-part-button.selected{border-color:var(--brand);background:linear-gradient(145deg,#f7fbf4,#ffffff);box-shadow:0 0 0 4px rgba(79,123,85,.12),0 18px 34px rgba(62,92,56,.16)}
.knowledge-part-number{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:32px;padding:0 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:19.5px;font-weight:950;letter-spacing:.08em}
.knowledge-part-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:17px;background:var(--soft);color:var(--brand);font-size:33px;font-weight:950}
.knowledge-part-copy{grid-column:1 / -1;display:grid;gap:8px;align-content:start;min-width:0}
.knowledge-part-copy strong{font-size:42px;line-height:1.1;letter-spacing:-.045em}
.knowledge-part-copy small{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:22.5px;line-height:1.7;font-weight:600}
.knowledge-part-arrow{align-self:center;justify-self:end;font-size:39px;line-height:1;color:var(--brand);font-weight:950;transition:transform .18s ease}
.knowledge-part-button:hover .knowledge-part-arrow,.knowledge-part-button.selected .knowledge-part-arrow{transform:translateX(4px)}
.knowledge-detail{min-height:650px;scroll-margin-top:98px}
.knowledge-detail-loading{min-height:360px;display:grid;place-content:center;justify-items:center;color:var(--muted)}
.knowledge-detail-head{display:block;padding-bottom:26px;border-bottom:1px solid var(--line)}
.knowledge-detail-head h2{font-size:66px;margin:10px 0 12px}
.knowledge-detail-head p{max-width:1080px;margin:0;color:var(--muted);font-size:30px;line-height:1.9;font-weight:500}
.knowledge-detail-number{display:inline-flex;margin-right:8px;color:var(--brand-2);font-size:21px;font-weight:950}
.knowledge-content-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.knowledge-section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}
.knowledge-section-title h3{font-size:40.5px;margin:8px 0 0}
.knowledge-section-title>span{color:var(--muted);font-size:19.5px}
.knowledge-empty-state{min-height:260px;display:grid;place-content:center;justify-items:center;text-align:center;padding:30px;border:1px dashed #d5c9b8;border-radius:22px;background:rgba(255,255,255,.54)}
.knowledge-empty-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--soft);color:var(--brand);font-size:42px}
.knowledge-empty-state h3{margin:14px 0 6px}
.knowledge-empty-state p{max-width:520px;margin:0;color:var(--muted);line-height:1.75}
.knowledge-lessons{display:grid;gap:10px}
.knowledge-lesson{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff}
.knowledge-lesson h3{margin:8px 0 4px}
.knowledge-lesson p{margin:0}
.knowledge-lesson>span{font-size:18px;color:var(--muted);font-weight:900;white-space:nowrap}
@media(max-width:1080px){
  .knowledge-part-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .knowledge-part-nav{padding:18px;border-radius:24px}
  .knowledge-part-nav-head{display:grid;gap:10px}
  .knowledge-part-nav-head p{text-align:left}
  .knowledge-part-grid{grid-template-columns:1fr}
  .knowledge-part-button{min-height:154px;padding:18px}
  .knowledge-part-copy strong{font-size:37.5px}
  .knowledge-detail-head{display:grid}
  .knowledge-detail-head h2{font-size:54px}
  .knowledge-detail-head p{font-size:27px;line-height:1.8}
}

.knowledge-lessons.detailed{display:grid;gap:26px}
.knowledge-lesson-block{padding:22px;border:1px solid var(--line);border-radius:24px;background:#fffdf9;box-shadow:0 10px 26px rgba(40,31,22,.06)}
.knowledge-lesson-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:17px;margin-bottom:17px;border-bottom:1px solid var(--line)}
.knowledge-lesson-heading h3{font-size:48px;margin:7px 0 7px;letter-spacing:-.04em}
.knowledge-lesson-heading p{max-width:760px;margin:0;color:var(--muted);line-height:1.7}
.knowledge-lesson-heading>span{flex:none;padding:7px 11px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:18px;font-weight:950}
.knowledge-entry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.knowledge-entry-card{display:grid;align-content:start;gap:12px;padding:18px;border:1px solid #e7ddcf;border-radius:20px;background:#fff;box-shadow:0 8px 18px rgba(42,31,20,.045)}
.knowledge-entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.knowledge-entry-head h4{margin:0 0 5px;font-size:40.5px;line-height:1.05;letter-spacing:-.035em}
.knowledge-entry-pronunciation{color:var(--brand);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:21px;font-weight:800}
.knowledge-verified{padding:5px 8px;border-radius:999px;background:#e8f4e3;color:#376a3e;font-size:15px;font-weight:950;white-space:nowrap}
.knowledge-pos-row{display:flex;gap:6px;flex-wrap:wrap}
.knowledge-pos-row span{padding:4px 7px;border-radius:8px;background:#f2eee7;color:#6a5e50;font-size:16.5px;font-weight:900}
.knowledge-entry-section{display:grid;gap:5px;padding:12px;border-radius:14px}
.knowledge-entry-section>span,.knowledge-examples>span{font-size:15px;letter-spacing:.1em;color:var(--muted);font-weight:950}
.knowledge-entry-section p{margin:0;line-height:1.65}
.knowledge-entry-section.meaning{background:#fff7e8}
.knowledge-entry-section.memory{background:#f0f7ec}
.knowledge-analysis-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px dashed #d6cbbb;border-radius:13px}
.knowledge-analysis-row strong{font-size:19.5px;line-height:1.55}
.knowledge-reliability{flex:none;padding:4px 7px;border-radius:999px;font-size:15px;font-weight:950}
.knowledge-reliability.high{background:#e5f4e2;color:#35663b}
.knowledge-reliability.medium{background:#fff1d8;color:#8b5e12}
.knowledge-reliability.low{background:#fce8e5;color:#9c453b}
.knowledge-examples{display:grid;gap:8px;padding-top:2px}
.knowledge-examples>div{padding:10px 12px;border-left:3px solid #b8cfae;border-radius:0 12px 12px 0;background:#faf9f6}
.knowledge-examples p{margin:0 0 4px;line-height:1.55;font-weight:750}
.knowledge-examples small{display:block;color:var(--muted);line-height:1.55}
.knowledge-review-note{padding:10px 12px;border:1px solid #eed4c7;border-radius:13px;background:#fff4ee}
.knowledge-review-note strong{font-size:16.5px;color:#a0523b}
.knowledge-review-note p{margin:5px 0 0;color:#7d5143;font-size:18px;line-height:1.6}
@media(max-width:900px){.knowledge-entry-grid{grid-template-columns:1fr}}
@media(max-width:760px){.knowledge-lesson-block{padding:16px}.knowledge-lesson-heading{display:grid}.knowledge-entry-card{padding:15px}.knowledge-entry-head h4{font-size:36px}}
.knowledge-collection-progress{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin:0 0 20px;padding:14px;border:1px solid #dcebd5;border-radius:18px;background:linear-gradient(145deg,#f4faef,#fff)}
.knowledge-collection-progress>div:first-child{display:grid;gap:5px;align-content:center}
.knowledge-collection-progress span{font-size:16.5px;color:var(--muted);font-weight:900}
.knowledge-collection-progress strong{font-size:21px}
.knowledge-progress-item{display:grid;gap:7px;align-content:center}
.knowledge-progress-item>div{height:8px;border-radius:999px;background:#e8e3da;overflow:hidden}
.knowledge-progress-item i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
@media(max-width:760px){.knowledge-collection-progress{grid-template-columns:1fr}}


.knowledge-runtime-warning{padding:28px;border:2px solid #e7b65b;border-radius:22px;background:#fff8e8;box-shadow:0 14px 32px rgba(91,62,18,.08)}
.knowledge-runtime-warning h2{margin:8px 0 10px;font-size:clamp(36px,6vw,54px)}
.knowledge-runtime-warning p{margin:0 0 14px;line-height:1.8;color:#665138}
.knowledge-runtime-warning code{display:block;padding:12px 14px;border-radius:12px;background:#2a211a;color:#fff;overflow:auto}
.knowledge-restart-link{display:flex;min-height:86px;align-items:center;justify-content:center;border-radius:20px;background:#271e17;color:#fff;font-weight:950;text-decoration:none}

.knowledge-lessons.lecture-layout{gap:34px}
.knowledge-lesson-block.lecture-lesson{
  padding:0;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
}
.knowledge-lesson-heading.lecture-heading{
  align-items:end;
  padding:0 8px 13px;
  margin:0;
  border-bottom:4px solid #2e8b42;
}
.knowledge-lesson-heading.lecture-heading h3{
  margin:0;
  color:#101511;
  font-size:63px;
  line-height:1;
  letter-spacing:-.045em;
}
.knowledge-lesson-heading.lecture-heading p{
  margin:9px 0 0;
  color:#2f352f;
  font-size:22.5px;
  font-weight:800;
}
.knowledge-lesson-heading.lecture-heading>span{
  margin-bottom:2px;
  background:#e9f7df;
  color:#2f713a;
}
.knowledge-word-list{
  display:grid;
  margin-top:16px;
  border:1px solid #d8e9d0;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.knowledge-word-row{
  display:grid;
  grid-template-columns:minmax(190px,24%) 1fr;
  min-height:150px;
  border-bottom:1px dashed #65bd6c;
  background:#fff;
}
.knowledge-word-row:last-child{border-bottom:0}
.knowledge-word-meta{
  padding:18px 18px 16px;
  border-right:1px dashed #65bd6c;
  background:#e8ffdf;
}
.knowledge-word-meta h4{
  margin:0 0 8px;
  color:#111;
  font-size:43.5px;
  line-height:1.05;
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
}

.knowledge-morpheme-highlight{
  font:inherit;
}
.knowledge-morpheme-highlight.root{color:#168ac4}
.knowledge-morpheme-highlight.prefix{color:#7a4bb5}
.knowledge-morpheme-highlight.suffix{color:#178b4d}
.knowledge-word-meta .knowledge-entry-pronunciation{
  color:#111;
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
  font-weight:800;
  line-height:1.35;
}
.knowledge-word-body{
  display:grid;
  align-content:center;
  gap:9px;
  padding:15px 18px 16px;
  min-width:0;
}
.knowledge-book-line{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:start;
  gap:9px;
}
.knowledge-book-label{
  display:inline-grid;
  place-items:center;
  width:38px;
  min-height:27px;
  padding:2px 4px;
  border-radius:999px;
  color:#fff;
  font-size:18px;
  font-weight:950;
  line-height:1;
}
.knowledge-book-line.translation .knowledge-book-label{background:#168ac4}
.knowledge-book-line.memory .knowledge-book-label{background:#24a83d}
.knowledge-book-line.example .knowledge-book-label{background:#ff7a08}
.knowledge-book-line p{margin:1px 0 0;line-height:1.7;color:#252525;font-size:22.5px}
.knowledge-book-line.translation p strong{margin-right:4px;color:#202820;font-size:21px}
.knowledge-meaning-senses{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px}
.knowledge-sense-group{display:inline;line-height:1.75}
.knowledge-sense-group strong{color:#182c1b;font-size:21px;margin-right:3px;white-space:nowrap}
.knowledge-sense-separator{color:#778477;margin:0 2px;font-weight:700}
.knowledge-book-examples{display:grid;gap:7px;min-width:0}
.knowledge-book-examples>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.knowledge-book-examples p{font-family:Georgia,"Times New Roman",serif;font-size:24px}
.knowledge-book-examples small{display:block;color:#4d504c;font-size:21px;line-height:1.55}
.knowledge-word-highlight{
  padding:0;
  background:transparent;
  color:#ef2e23;
  font:inherit;
}
@media(max-width:760px){
  .knowledge-lesson-heading.lecture-heading h3{font-size:51px}
  .knowledge-word-row{grid-template-columns:1fr;min-height:0}
  .knowledge-word-meta{border-right:0;border-bottom:1px dashed #65bd6c;padding:14px 16px}
  .knowledge-word-meta h4{font-size:39px}
  .knowledge-word-meta .knowledge-entry-pronunciation{font-size:27px}
  .knowledge-word-body{padding:14px 15px 16px}
}


.study-layout{
  grid-template-columns:minmax(0,1fr);
  width:100%;
  max-width:980px;
  margin-inline:auto;
}
.study-progress-only{display:block}
.study-progress-only .progress{margin:0}
.plan-status-card{display:none!important}
button.is-busy.is-spinner-only{
  padding:0;
  color:transparent;
}
button.is-busy.is-spinner-only::after{
  right:50%;
  top:50%;
  width:22px;
  height:22px;
  margin:-11px -11px 0 0;
  border-width:3px;
  border-color:rgba(255,255,255,.94);
  border-right-color:rgba(255,255,255,.22);
}
button.secondary.is-busy.is-spinner-only::after,
button.icon-btn.is-busy.is-spinner-only::after{
  border-color:currentColor;
  border-right-color:transparent;
}


.study-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 10px;
  color:var(--muted);
  font-size:21px;
  line-height:1.45;
}
.study-summary-book{
  min-width:0;
  color:var(--ink);
  font-size:22.5px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.study-summary-stats{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  text-align:right;
  white-space:nowrap;
}
.study-summary-stats b{color:var(--ink);font-size:22.5px}
.study-summary-stats i{color:#c7bbaa;font-style:normal}
@media(max-width:680px){
  .study-summary{align-items:flex-start;flex-direction:column;gap:4px}
  .study-summary-book{max-width:100%}
  .study-summary-stats{justify-content:flex-start;flex-wrap:wrap;text-align:left;white-space:normal;gap:5px}
}


.study-summary{
  display:block;
  margin:0 0 9px;
  color:var(--muted);
  font-size:18px;
  line-height:1.5;
  text-align:left;
}
.study-summary-line{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:4px 10px;
}
.study-summary-line>span:not(:first-child)::before{
  content:"·";
  margin-right:10px;
  color:#c7bbaa;
}
.study-summary-book{
  max-width:100%;
  color:var(--muted);
  font-size:18px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.study-summary-line b{
  color:var(--ink);
  font-size:18px;
  font-weight:900;
}
.book-card.book-card-simple{
  width:100%;
  min-height:96px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  color:var(--ink);
  box-shadow:none;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.book-card.book-card-simple h3{
  margin:0;
  font-size:31.5px;
  line-height:1.35;
}
.book-word-count{
  flex:0 0 auto;
  color:var(--muted);
  font-size:21px;
  font-weight:800;
  white-space:nowrap;
}
.book-card.book-card-simple:hover,
.book-card.book-card-simple:focus-visible{
  transform:translateY(-2px);
  border-color:#c9d8c0;
  box-shadow:0 18px 40px rgba(75,54,31,.12);
}
@media(max-width:680px){
  .study-summary-line{gap:2px 7px}
  .study-summary-line>span:not(:first-child)::before{margin-right:7px}
  .book-card.book-card-simple{min-height:84px;padding:17px 18px}
  .book-card.book-card-simple h3{font-size:28.5px}
}
/*
 * Engood design tokens.
 *
 * Shared components must consume these semantic tokens instead of introducing
 * page-local colours, radii or shadows. The short legacy aliases at the end
 * keep existing feature styles compatible while they are migrated gradually.
 */
:root{
  color-scheme:light;

  --color-canvas:#f4f7f4;
  --color-surface:rgba(255,255,255,.86);
  --color-surface-solid:#fff;
  --color-surface-soft:rgba(247,250,248,.82);
  --color-surface-hover:#f4f8f5;
  --color-text:#10271f;
  --color-text-soft:#2c4138;
  --color-text-muted:#687970;
  --color-border:rgba(183,202,191,.58);
  --color-border-strong:rgba(157,183,168,.72);
  --color-brand:#236f54;
  --color-brand-hover:#2d8363;
  --color-brand-active:#114b39;
  --color-brand-soft:rgba(229,241,235,.78);
  --color-accent:#b78335;
  --color-accent-soft:#fbf4e8;
  --color-cinnabar:#a74632;
  --color-cinnabar-soft:rgba(167,70,50,.1);
  --color-danger:#b64f49;
  --color-danger-soft:#fff0ee;
  --color-focus:rgba(43,132,98,.2);
  --color-selection:#cfe8d9;

  --font-ui:"Segoe UI Variable Text","Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif;
  --font-word:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --font-reading:Georgia,"Times New Roman","Songti SC",SimSun,serif;
  --type-hero-primary:clamp(72px,8.1vw,99px);
  --type-hero-section:clamp(63px,6.75vw,81px);
  --type-hero-task:clamp(54px,5.7vw,69px);
  --type-section-title:clamp(36px,4.05vw,48px);

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;

  --radius-xs:10px;
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:25px;
  --radius-xl:30px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(17,48,35,.03),0 8px 24px rgba(17,48,35,.055);
  --shadow-md:0 1px 2px rgba(17,48,35,.03),0 18px 54px rgba(17,48,35,.085);
  --shadow-lg:0 1px 2px rgba(17,48,35,.04),0 30px 90px rgba(17,48,35,.13);
  --shadow-control:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(4,40,26,.2),0 9px 22px rgba(20,92,66,.17);
  --shadow-control-hover:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(4,40,26,.2),0 14px 30px rgba(20,92,66,.22);
  --shadow-inset-highlight:inset 0 1px 0 rgba(255,255,255,.88);

  --control-height:44px;
  --control-radius:var(--radius-sm);
  --control-padding-block:11px;
  --control-padding-inline:18px;
  --control-ease:cubic-bezier(.2,.72,.2,1);
  --duration-fast:120ms;
  --duration-normal:180ms;

  /* Component decisions: pages consume these instead of rebuilding controls. */
  --surface-card-background:linear-gradient(145deg,var(--color-surface-solid),var(--color-surface-soft));
  --surface-card-border:var(--color-border);
  --surface-card-radius:var(--radius-lg);
  --surface-card-shadow:var(--shadow-inset-highlight),var(--shadow-md);
  --button-primary-background:linear-gradient(180deg,var(--color-brand-hover) 0,var(--color-brand) 52%,var(--color-brand-active) 100%);
  --button-primary-border:color-mix(in srgb,var(--color-brand-active) 32%,transparent);
  --button-primary-shadow:var(--shadow-control);
  --button-primary-shadow-hover:var(--shadow-control-hover);
  --button-secondary-background:linear-gradient(180deg,var(--color-surface-solid),var(--color-surface-hover));
  --button-secondary-border:var(--color-border-strong);
  --field-background:color-mix(in srgb,var(--color-surface-solid) 86%,transparent);
  --field-border:var(--color-border-strong);
  --field-border-focus:var(--color-brand-hover);
  --field-focus-shadow:0 0 0 4px var(--color-focus),0 9px 25px rgba(29,85,60,.065);
  --nav-background:color-mix(in srgb,var(--color-surface-solid) 72%,transparent);
  --nav-border:var(--color-border);
  --nav-item-background-active:linear-gradient(180deg,var(--color-text-soft),var(--color-text));
  --title-color:var(--color-text);
  --title-font:var(--font-display);

  /* Compatibility aliases for feature styles that predate the design system. */
  --bg:var(--color-canvas);
  --panel:var(--color-surface);
  --panel-solid:var(--color-surface-solid);
  --panel-soft:var(--color-surface-soft);
  --ink:var(--color-text);
  --ink-soft:var(--color-text-soft);
  --muted:var(--color-text-muted);
  --line:var(--color-border);
  --line-strong:var(--color-border-strong);
  --brand:var(--color-brand);
  --brand-2:var(--color-accent);
  --brand-deep:var(--color-brand-active);
  --brand-bright:var(--color-brand-hover);
  --brand-veil:var(--color-brand-soft);
  --accent:var(--color-accent);
  --accent-veil:var(--color-accent-soft);
  --danger:var(--color-danger);
  --danger-veil:var(--color-danger-soft);
  --soft:var(--color-brand-soft);
  --soft-2:var(--color-accent-soft);
  --shadow:var(--shadow-md);
  --glass-highlight:var(--shadow-inset-highlight);
  --radius:var(--radius-lg);
}

/* Match the preferred desktop browser scale while keeping admin data-dense at 100%. */
:root[data-display-scale="compact"]{zoom:67%}
:root[data-display-scale="standard"]{zoom:100%}
html{scroll-behavior:smooth;background:var(--bg)}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#b9c9bf transparent}
*::selection{background:var(--color-selection);color:var(--color-text)}
body{
  margin:0;
  min-height:100vh;
  color:var(--color-text);
  background:
    radial-gradient(circle at 8% -5%,rgba(111,175,139,.16),transparent 31rem),
    radial-gradient(circle at 92% 2%,rgba(236,184,105,.12),transparent 28rem),
    linear-gradient(180deg,#f7faf6 0,#f2f5f1 46%,#f6f7f4 100%);
  font-family:var(--font-ui);
  font-size:22.5px;
  line-height:1.65;
  letter-spacing:.015em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.35;
  background-image:linear-gradient(rgba(33,116,85,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(33,116,85,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}
a,button,input,select,textarea{transition:border-color var(--duration-normal) ease,background-color var(--duration-normal) ease,color var(--duration-normal) ease,box-shadow var(--duration-normal) ease,transform var(--duration-normal) var(--control-ease),opacity var(--duration-normal) ease}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.hidden{display:none!important}

/* Navigation */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid var(--color-border);
  background:rgba(247,250,248,.78);
  backdrop-filter:saturate(155%) blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.8);
}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.brand{display:inline-flex;align-items:center;gap:9px;min-width:max-content;font-weight:850;letter-spacing:-.025em}
.brand-logo{
  width:52px;height:44px;display:block;object-fit:contain;
  filter:drop-shadow(0 6px 8px rgba(12,88,65,.18));
}
.brand-name{
  position:relative;
  display:inline-block;
  padding-right:2px;
  color:var(--color-brand-active);
  font-size:29px;
  font-weight:700;
  line-height:.96;
  letter-spacing:-.045em;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.brand-name::after{
  content:"";
  position:absolute;
  right:.08em;
  bottom:-.2em;
  left:.08em;
  height:1px;
  background:linear-gradient(90deg,var(--color-brand),rgba(35,111,84,.08));
}
.nav-links{
  display:flex;align-items:center;gap:4px;padding:5px;
  border:1px solid var(--nav-border);border-radius:var(--radius-md);
  background:var(--nav-background);box-shadow:var(--shadow-sm)
}
.nav-links a{position:relative;padding:9px 14px;border-radius:var(--radius-xs);color:var(--color-text-muted);font-size:21px;font-weight:720;white-space:nowrap}
.nav-links a:hover{background:var(--color-surface-hover);color:var(--color-text)}
.nav-links a.active{background:var(--nav-item-background-active);color:#fff;box-shadow:0 8px 20px rgba(21,35,29,.16)}

/* Shared surfaces and typography */
.hero{padding:66px 0 34px}
.hero h1{
  max-width:900px;margin:16px 0 14px;
  font-size:clamp(57px,8.1vw,102px);line-height:1.08;
  letter-spacing:-.055em;font-weight:830;color:var(--title-color);font-family:var(--title-font)
}
.hero p{max-width:760px;margin:0;color:var(--color-text-muted);font-size:25.5px;line-height:1.85;letter-spacing:.01em}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border:1px solid var(--color-border);border-radius:var(--radius-pill);
  background:var(--color-brand-soft);color:var(--color-brand-active);
  font-size:18px;font-weight:820;letter-spacing:.075em;text-transform:none
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-bright);box-shadow:0 0 0 4px rgba(47,139,104,.10)}
.card{
  border:1px solid var(--surface-card-border);
  border-radius:var(--surface-card-radius);
  background:var(--surface-card-background);
  box-shadow:var(--surface-card-shadow);
  padding:var(--space-7);
}
.card h1,.card h2,.card h3{color:var(--title-color);font-family:var(--title-font);letter-spacing:-.035em}
.card h2{font-size:37.5px;line-height:1.25}
.card h3{font-size:27px;line-height:1.35}
.muted{color:var(--color-text-muted)}
.footer{padding:48px 0 34px;text-align:center;color:#849087;font-size:18px;letter-spacing:.025em}
hr{border-color:var(--line)!important}
code{padding:.14em .42em;border-radius:7px;background:#eef3ef;color:var(--brand-deep);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em}

/* Controls */
.button,.button-link,button{
  min-height:var(--control-height);border:1px solid var(--button-primary-border);border-radius:var(--control-radius);
  background:var(--button-primary-background);
  color:#fff;padding:var(--control-padding-block) var(--control-padding-inline);font-family:var(--font-ui);font-size:21px;font-weight:780;line-height:1.25;
  box-shadow:var(--button-primary-shadow);cursor:pointer
}
.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.button:hover,button:hover,.button-link:hover{transform:translateY(-1px);box-shadow:var(--button-primary-shadow-hover)}
.button:active,button:active,.button-link:active{transform:translateY(0)}
.button.secondary,button.secondary,.button-link.secondary,.secondary-link{
  border-color:var(--button-secondary-border);background:var(--button-secondary-background);color:var(--color-text-soft);box-shadow:none
}
.button.secondary:hover,button.secondary:hover,.button-link.secondary:hover,.secondary-link:hover{border-color:var(--color-brand-hover);background:var(--color-surface-hover);box-shadow:var(--shadow-sm)}
.button.soft,button.soft{border-color:var(--color-border);background:var(--color-brand-soft);color:var(--color-brand-active);box-shadow:none}
.button.danger,button.danger,.danger-button{border-color:color-mix(in srgb,var(--color-danger) 30%,transparent);background:var(--color-danger-soft);color:var(--color-danger);box-shadow:none}
button:disabled,.button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
input,select,textarea{
  width:100%;min-height:46px;border:1px solid var(--field-border);border-radius:var(--control-radius);
  background:var(--field-background);color:var(--color-text);padding:11px 13px;font:inherit;outline:none
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--color-text-muted) 66%,transparent)}
input:hover,select:hover,textarea:hover{border-color:var(--color-brand-hover);background:var(--color-surface-solid)}
input:focus,select:focus,textarea:focus{border-color:var(--field-border-focus);background:var(--color-surface-solid);box-shadow:var(--field-focus-shadow)}
.field{gap:7px}.field label{color:var(--color-text-soft);font-size:19.5px;font-weight:760;letter-spacing:.015em}
.form{gap:16px}
.empty{padding:34px 20px;color:#849087;text-align:center;border-radius:18px;background:#f8faf8}
/* Books */
body[data-page="books"] .hero{padding-bottom:28px}
.category-grid{gap:18px;padding-bottom:16px}
.category-block.card{padding:22px 22px 24px;box-shadow:var(--shadow-sm);background:rgba(255,255,255,.88)}
.category-block h2{margin:0;font-size:36px}
.category-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px}
.category-block .pill{border:1px solid #cfe0d6;background:linear-gradient(155deg,#f8fbf9,#edf5f0);color:#2d6d51;font-size:16.5px;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.category-count-badge{align-items:center;gap:6px;white-space:nowrap}
.category-count-badge .bloom-icon{font-size:15px;color:#4f8169}
.book-cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.book-card.book-card-simple{
  position:relative;min-height:106px;padding:20px 46px 20px 20px;
  border:1px solid var(--line);border-radius:19px;background:linear-gradient(145deg,#fff,#fafcf9);
  box-shadow:none;overflow:hidden
}
.book-card.book-card-simple::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 4px 4px 0;background:linear-gradient(var(--brand-bright),var(--accent))}
.book-card.book-card-simple::after{content:"→";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#91a098;font-size:30px}
.book-card.book-card-simple h3{font-size:28.5px;font-weight:790;letter-spacing:-.025em}
.book-word-count{padding:5px 9px;border-radius:999px;background:#f0f5f1;color:#6d7b73;font-size:18px}
.book-card.book-card-simple:hover,.book-card.book-card-simple:focus-visible{transform:translateY(-3px);border-color:#aec5b6;background:#fff;box-shadow:0 18px 38px rgba(25,49,37,.10)}
.book-card.book-card-simple:hover::after{right:15px;color:var(--brand)}

/* Book preview and planning */
body[data-page="book-preview"] .shell{width:min(1460px,calc(100% - 40px))}
@media(max-width:860px){body[data-page="book-preview"] .shell{width:min(1460px,calc(100% - 24px))}}
.book-preview-page{padding-top:30px;padding-bottom:20px}
.book-preview-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;
  padding:34px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,247,242,.96));overflow:hidden
}
.book-preview-hero::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-130px;background:rgba(230,166,76,.11);pointer-events:none}
.book-preview-hero h1{margin:12px 0 8px;font-size:clamp(48px,6.3vw,81px);line-height:1.12}
.back-link{display:inline-flex;margin-bottom:18px;color:#708078;font-size:19.5px;font-weight:720}
.back-link:hover{color:var(--brand)}
.book-preview-meta{gap:8px}.book-preview-meta .pill{border:1px solid #d4e3d9;background:#edf5f0}
.book-preview-layout{gap:20px;align-items:start}
.word-catalog-card,.preview-plan-card{background:rgba(255,255,255,.94)}
.catalog-head{gap:20px}.catalog-head h2{margin:6px 0 4px}
.catalog-controls{gap:9px}
.catalog-controls input{min-width:230px}
.word-preview-list{gap:8px}
.word-preview-row{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:#fcfdfc!important}
.word-preview-row:last-child{border-bottom:0!important}
.word-preview-row:hover{border-color:#bad0c1!important;background:#fff!important}
.catalog-pagination{padding-top:18px}
.preview-plan-card{
  position:static;
  top:auto;
  max-height:none;
  overflow:visible;
  scrollbar-gutter:auto;
  border-top:3px solid var(--brand-bright)
}
.preview-plan-card h2{margin:10px 0 7px}
.plan-mode-fieldset{border:0;padding:0;margin:0}
.plan-mode-fieldset legend{margin-bottom:9px;color:#526158;font-size:19.5px;font-weight:760}
.plan-mode-option{border-color:var(--line)!important;border-radius:16px!important;background:#fbfcfb!important}
.plan-mode-option.selected{border-color:#8db49e!important;background:#edf6f0!important;box-shadow:0 0 0 3px rgba(47,139,104,.08)}
.plan-mode-icon{background:#fff!important;color:var(--brand)!important;border:1px solid #cfe1d6}
.plan-preview{border-color:#d8e5dc!important;border-radius:17px!important;background:#f8fbf9!important}
.plan-preview-metric{border-color:#e0e9e3!important;background:#fff!important}
.number-input-with-unit{border-radius:14px!important;background:#fbfcfb!important}

@media(max-width:1080px){
  .preview-plan-card{position:static;order:-1;max-height:none;overflow:visible;scrollbar-gutter:auto}
}

/* Account */
.account-main{padding-bottom:16px}
.account-hero{padding-bottom:30px}
.account-auth-grid,.account-grid{gap:18px}
.auth-card{padding:30px}
.auth-card h2{margin-bottom:20px}
.profile-card{background:linear-gradient(145deg,#fff,#f0f7f3)}
.profile-card h2{margin:12px 0 3px;font-size:46.5px}
.profile-meta{gap:8px}
.profile-meta span{border:1px solid #d5e3da!important;background:#fff!important;color:#5d6d64!important}
#accountVersion{display:none}
.account-metrics{gap:10px}
.account-metrics>div{border-color:var(--line)!important;border-radius:16px!important;background:#f8faf8!important}
.account-metrics strong{color:var(--brand-deep)}
.legacy-card{border-color:#ecd2a8;background:#fffaf0}
.danger-zone{margin-top:20px;border-color:#ecd9d6;background:rgba(255,252,251,.94)}
.clear-grid{gap:12px}
.clear-option{border-color:#eadfdd!important;border-radius:18px!important;background:#fff!important}
.clear-option p{color:var(--muted);line-height:1.7}
.delete-option{background:#fff8f7!important}
.danger-button.solid{background:linear-gradient(145deg,#d45d54,#ab3f39)!important;color:#fff!important}

/* Admin */
body[data-page="admin"] .hero{padding-bottom:28px}
.admin-metrics{gap:12px}
.metric{border-color:var(--line);border-radius:18px;background:linear-gradient(145deg,#fff,#f7faf8);box-shadow:var(--shadow-sm)}
.metric strong{color:var(--brand-deep);font-size:51px;letter-spacing:-.045em}
.issue{border-color:var(--line);border-radius:14px;background:#fafcfb}

/* Quick memory */
.knowledge-page{padding-bottom:20px}
.knowledge-hero{padding-bottom:28px}
.knowledge-hero h1{max-width:920px}
.knowledge-part-nav{border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.82);box-shadow:var(--shadow);padding:24px}
.knowledge-part-nav-head{margin-bottom:16px}
.knowledge-part-nav-head h2{margin:7px 0 0;font-size:37.5px;letter-spacing:-.035em}
.knowledge-part-nav-head p{color:var(--muted)}
.knowledge-part-grid{gap:10px}
.knowledge-part-button{
  min-height:108px;border:1px solid var(--line)!important;border-radius:18px!important;
  background:linear-gradient(145deg,#fff,#f8faf8)!important;color:var(--ink)!important;box-shadow:none!important
}
.knowledge-part-button::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--part-accent,var(--brand));opacity:.7}
.knowledge-part-button:nth-child(1){--part-accent:#287c63}.knowledge-part-button:nth-child(2){--part-accent:#6e68ad}.knowledge-part-button:nth-child(3){--part-accent:#4e8e9a}.knowledge-part-button:nth-child(4){--part-accent:#d08b3c}.knowledge-part-button:nth-child(5){--part-accent:#c66e60}.knowledge-part-button:nth-child(6){--part-accent:#8d7a45}.knowledge-part-button:nth-child(7){--part-accent:#4e739d}
.knowledge-part-button:hover{transform:translateY(-2px);border-color:#b5cabc!important;box-shadow:var(--shadow-sm)!important}
.knowledge-part-button.selected{border-color:#8eb49f!important;background:linear-gradient(145deg,#f0f8f3,#fff)!important;box-shadow:0 0 0 3px rgba(47,139,104,.08)!important}
.knowledge-part-number{color:#9aa69f!important;font-size:18px!important}
.knowledge-part-icon{border:1px solid #d4e3da!important;background:#fff!important;color:var(--part-accent,var(--brand))!important;box-shadow:none!important}
.knowledge-part-copy strong{font-size:27px!important;letter-spacing:-.02em}
.knowledge-part-copy small{color:#6d7c73!important;font-size:21px!important;line-height:1.7!important}
.knowledge-part-arrow{color:#9ba79f!important}
.knowledge-detail{margin-top:18px;padding:30px;background:rgba(255,255,255,.95)}
.knowledge-detail-head{padding-bottom:22px;border-bottom:1px solid var(--line)}
.knowledge-detail-head h2{font-size:clamp(45px,6vw,66px)!important;margin:8px 0!important}
.knowledge-detail-head p{max-width:820px;color:var(--muted)!important;font-size:25.5px!important;line-height:1.9!important}
.knowledge-detail-number{color:#a4b0a8!important}
.knowledge-section-title{padding:28px 0 16px}
.knowledge-section-title h3{margin:6px 0 0;font-size:36px}
.knowledge-section-title>span{color:#839087!important}
.lecture-lesson{border:1px solid var(--line)!important;border-radius:20px!important;background:#fff!important;overflow:hidden;box-shadow:var(--shadow-sm)!important}
.lecture-heading{background:linear-gradient(145deg,#eef6f1,#f9fbf9)!important;border-bottom:1px solid #dce8df!important}
.lecture-heading h3{color:var(--brand-deep)!important}
.knowledge-word-row{border-color:#e1e9e3!important}
.knowledge-word-row:hover{background:#fcfefc}
.knowledge-word-meta{background:#fafcfb!important;border-color:#dfe8e2!important}
.knowledge-word-meta h4{letter-spacing:-.035em!important}
.knowledge-word-body{background:#fff!important}
.knowledge-book-label{border-radius:9px!important;font-size:16.5px!important;letter-spacing:.04em!important}
.knowledge-book-line.translation .knowledge-book-label{background:#edf5f0!important;color:var(--brand-deep)!important}
.knowledge-book-line.memory .knowledge-book-label{background:#fff3df!important;color:#9a681f!important}
.knowledge-book-line.example .knowledge-book-label{background:#eef2f8!important;color:#4b6687!important}
.knowledge-word-highlight{background:linear-gradient(transparent 60%,rgba(230,166,76,.38) 60%)!important}
.knowledge-morpheme-highlight.root{color:#2873b3!important}.knowledge-morpheme-highlight.prefix{color:#7657aa!important}.knowledge-morpheme-highlight.suffix{color:#27805e!important}

/* Learning — calm, focused, app-like */
body.learning-active{overflow:hidden;background:linear-gradient(180deg,#f7faf6,#edf3ef)}
body.learning-active::before{opacity:.18}
body.learning-active .topbar{background:rgba(248,251,248,.9)}
body.learning-active main.shell{padding:14px 0 16px}
body.learning-active .study-layout{width:min(980px,100%);height:calc(100svh - 105px);min-height:590px}
/* Keep the full-height study stage under the site's 67% compact display scale. */
:root[data-display-scale="compact"] body.learning-active:not(.mini-mode) .study-layout{
  height:calc(149.2537svh - 156.716px);
  min-height:880.597px;
}
body.learning-active .study-card{
  height:100%;padding:18px 20px 16px;border:1px solid #d4e0d7;border-radius:27px;
  background:linear-gradient(150deg,rgba(255,255,255,.99),rgba(247,250,247,.98));
  box-shadow:0 28px 74px rgba(25,49,37,.12);overflow:hidden
}
.study-progress-only{padding:0 3px 8px}
.study-summary-row{display:flex;align-items:start;justify-content:space-between;gap:12px}
.study-summary-row .study-summary{min-width:0;flex:1}
.mini-window-launch{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  flex:none;min-height:32px;margin-top:-9px;margin-bottom:9px;padding:5px 11px 5px 9px;
  border:1px solid #cbdcd2;border-radius:999px;
  background:linear-gradient(155deg,#fbfdfc,#edf4f0);color:#365f4d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 11px rgba(25,70,50,.07);
  font-size:15px;font-weight:790;letter-spacing:.01em;white-space:nowrap
}
.mini-window-launch .mini-window-icon{font-size:16px;color:#39775a}
.mini-window-launch:hover{border-color:#8eaf9e;background:linear-gradient(155deg,#f8fcfa,#e5f0e9);color:var(--brand-deep);transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 7px 16px rgba(25,70,50,.10)}
.mini-window-launch:focus-visible{outline:3px solid rgba(47,125,88,.18);outline-offset:2px}
.study-summary{margin:0 0 7px;color:#78867e;font-size:18px;letter-spacing:.015em}
.study-summary-line{gap:4px 9px}
.study-summary-line>span:not(:first-child)::before{color:#c2cdc6;margin-right:9px}
.study-summary-book{color:#526158;font-weight:760}
.study-summary-line b{color:var(--brand-deep)}
.progress{height:7px;border-radius:999px;background:#e5ece7;box-shadow:inset 0 1px 2px rgba(28,58,42,.06)}
.progress span{background:linear-gradient(90deg,var(--brand-deep),#56a77f);box-shadow:0 0 12px rgba(47,139,104,.20)}
#studyCard{min-height:0}
.study-card-content{border:0!important;background:transparent!important;box-shadow:none!important}
.word-main{padding:12px 8px 6px}
.study-card-topbar{min-height:38px;margin:0}
.icon-btn{
  width:40px;height:40px;border:1px solid #d7e1da;border-radius:13px;
  background:rgba(255,255,255,.9);color:#526158;box-shadow:0 6px 14px rgba(25,49,37,.06)
}
.icon-btn:hover{border-color:#a9c1b1;background:#fff;color:var(--brand);box-shadow:0 9px 20px rgba(25,49,37,.10)}
.menu-toggle{
  border-color:transparent;background:#eaf1ed;color:#436554;box-shadow:none
}
.menu-toggle:hover{border-color:transparent;background:#dfeae4;color:#285a43;box-shadow:none}
.menu-toggle[aria-expanded="true"]{border-color:transparent;background:var(--brand-deep);color:#fff;box-shadow:none}
.menu-toggle:focus-visible{outline:3px solid rgba(47,139,104,.22);outline-offset:2px}
.word-title{margin:4px 0 12px;font-size:clamp(81px,12vw,132px);line-height:.98;letter-spacing:-.065em;font-weight:830;color:#14251d}
.pron-inline{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important}
.pron-label{border:1px solid #d5e4da;background:#f1f7f3;color:var(--brand-deep);font-size:15px;letter-spacing:.06em}
.pron-big{color:#6d7b73;font-size:34.5px;font-weight:560;letter-spacing:.025em}
.word-card-collapsed{cursor:pointer}
.word-card-collapsed .word-main::after{display:none}
.answer-pronunciation{display:flex;align-items:center;justify-content:center;gap:11px;min-height:42px}
.answer-pronunciation>.sound-button{flex:none}
.answer-pronunciation .pron-list{display:flex;align-items:center;justify-content:center;gap:13px}
.answer-pronunciation .pron-inline{border:0;padding:0}
.word-card-details{gap:12px}
.study-info-grid{gap:12px}
.study-section{border:1px solid #e0e8e2!important;border-radius:17px!important;background:rgba(255,255,255,.9)!important;padding:14px 15px!important}
.study-section h3{margin:0 0 10px!important;color:#526158!important;font-size:19.5px!important;font-weight:820!important;letter-spacing:.055em!important}
.sense-list{gap:8px}
.sense-row{grid-template-columns:58px 1fr;gap:10px;padding:9px 11px;border:0;border-radius:12px;background:#f7faf8}
.sense-pos{min-height:29px;border:1px solid #ead5ad;background:#fff5e5;color:#95671f;font-size:18px}
.sense-meaning{font-size:24px;line-height:1.65;color:#26372f}
.memo{border:0;border-left:3px solid #78a98e;border-radius:12px;background:#eff7f2;color:#3d5849;padding:12px 13px;font-size:21px;line-height:1.75}
.example-list{gap:8px}
.example{border:0;border-radius:12px;background:#f8faf9;padding:11px 12px}
.example-sentence{color:#293a32;font-size:21px;line-height:1.7}
.example-translation{color:#7a877f;font-size:19.5px;line-height:1.6}
.example-word{background:linear-gradient(transparent 58%,rgba(230,166,76,.42) 58%);color:#17291f;font-weight:840}
.example-audio-button{border-color:#d9e4dc;background:#fff;color:var(--brand);box-shadow:none}
.memory-insight{border-color:#ecd8ae!important;background:#fff9ee!important;color:#80602a!important}
.card-menu{border-color:#d6e1da;border-radius:17px;box-shadow:var(--shadow-lg)}
.card-menu button{min-height:0;border-color:#edf1ee;background:#fff;color:#4f5d55;box-shadow:none;border-radius:0;font-weight:680}
.card-menu button:hover{transform:none;background:#f5f8f6;color:var(--brand-deep);box-shadow:none}
.study-actions{gap:8px}
.study-main-actions{gap:10px}
.status-btn{min-height:78px;border-radius:17px;box-shadow:none}
.status-btn.known{background:linear-gradient(145deg,#4b9a84,#347d69);border-color:#347d69}
.status-btn.fuzzy{background:linear-gradient(145deg,#dda744,#bd7f22);border-color:#bd7f22}
.status-btn.strange{background:linear-gradient(145deg,#d8745f,#bb5745);border-color:#bb5745}
.status-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 24px rgba(34,52,43,.14)}
.status-btn .status-copy strong{font-size:34.5px;letter-spacing:.01em}
.status-btn .status-copy small{font-size:16.5px;color:rgba(255,255,255,.88)}
.shortcut-badge{border-radius:8px;background:rgba(255,255,255,.14);font-size:18px}
.mastered-action{min-height:38px;border:1px solid #dce4df;border-radius:12px;background:#f6f8f6;color:#647169}
.mastered-action:hover:not(:disabled){background:#eef3ef;box-shadow:none;transform:none}
.day-complete{gap:13px;padding:20px}
.complete-mark{width:70px;height:70px;border:1px solid #cce1d4;background:linear-gradient(145deg,#edf7f1,#dceee4);color:var(--brand);box-shadow:0 12px 28px rgba(33,116,85,.12)}
.day-complete h2{font-size:clamp(45px,6.9vw,67.5px);letter-spacing:-.045em}
.day-complete p{max-width:620px;line-height:1.8}
.optional-practice{border-color:#dfe7e1}
.optional-practice>span{color:#77857d;font-size:18px;letter-spacing:.03em}
.practice-entry{border-radius:15px!important;background:#fff!important}
.shortcut-modal-backdrop{background:rgba(20,35,28,.42);backdrop-filter:blur(8px)}
.shortcut-dialog{border-color:#d5e0d8;background:#fff;box-shadow:var(--shadow-lg)}
.shortcut-row{border-color:var(--line);background:#f9fbf9}
.shortcut-capture{border-color:#c9d5cd;background:#fff;color:#48584f}
.toast{border:1px solid rgba(255,255,255,.12)!important;background:rgba(21,35,29,.94)!important;color:#fff!important;box-shadow:0 18px 45px rgba(16,31,23,.24)!important;backdrop-filter:blur(12px)}

/* Reinforcement */
.reinforcement-shell{padding-top:42px;padding-bottom:16px}
.reinforcement-head{align-items:end}
.reinforcement-head h1{margin:9px 0 5px;font-size:clamp(51px,7.5vw,81px);letter-spacing:-.05em}
.reinforcement-card{border-top:3px solid var(--brand-bright)}
.practice-prompt h2{letter-spacing:-.03em}
.choice-option{border-color:var(--line)!important;border-radius:17px!important;background:#fbfcfb!important;color:var(--ink)!important;box-shadow:none!important}
.choice-option:hover:not(:disabled){border-color:#98b9a5!important;background:#f2f8f4!important;transform:translateY(-2px)!important}
.choice-option kbd{border-color:#d3ded6!important;background:#fff!important;color:var(--brand-deep)!important}
.spelling-letter-slot{border-color:#b9c9bf!important;background:#fff!important}
.reinforcement-feedback{border-radius:16px!important}

/* Loading and motion */
.is-loading{cursor:progress}
.knowledge-loader{border-color:#d5e3da!important;border-top-color:var(--brand)!important}
@media(prefers-reduced-motion:no-preference){
  .card,.category-block,.knowledge-part-button,.book-card{animation:surface-in .38s cubic-bezier(.2,.7,.2,1) both}
  .category-block:nth-child(2),.knowledge-part-button:nth-child(2){animation-delay:.035s}
  .category-block:nth-child(3),.knowledge-part-button:nth-child(3){animation-delay:.07s}
  .category-block:nth-child(4),.knowledge-part-button:nth-child(4){animation-delay:.105s}
  .category-block:nth-child(5),.knowledge-part-button:nth-child(5){animation-delay:.14s}
  @keyframes surface-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Responsive */
@media(max-width:900px){
  .shell{width:min(100% - 28px,1180px)}
  .nav{height:auto;min-height:68px;padding:10px 0;gap:12px}
  .brand{flex:0 0 auto}.brand-mark{width:38px;height:38px;border-radius:13px}
  .nav-links{max-width:calc(100vw - 190px);overflow-x:auto;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:8px 11px;font-size:19.5px}
  .hero{padding:48px 0 26px}.hero h1{font-size:clamp(54px,12vw,81px)}.hero p{font-size:24px}
  .book-preview-layout,.grid.two,.account-grid,.account-auth-grid{grid-template-columns:1fr}
  .preview-plan-card{position:static;max-height:none;overflow:visible}
  .book-preview-hero{grid-template-columns:1fr;padding:28px}.book-preview-hero>.button-link{justify-self:start}
  .catalog-controls{width:100%;grid-template-columns:1fr 1fr}.catalog-controls input{grid-column:1/-1;min-width:0}
  .knowledge-part-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .knowledge-detail{padding:23px}
  body.learning-active .study-layout{height:calc(100svh - 96px);min-height:560px}
  :root[data-display-scale="compact"] body.learning-active:not(.mini-mode) .study-layout{
    height:calc(149.2537svh - 143.284px);
    min-height:835.821px;
  }
}
@media(max-width:640px){
  body{font-size:21px;background:linear-gradient(180deg,#f7faf6,#f1f5f1)}
  .shell{width:min(100% - 20px,1180px)}
  .topbar{position:sticky}
  .nav{display:grid;grid-template-columns:1fr;gap:8px;padding:9px 0}
  .brand{justify-self:center;font-size:24px}.brand-mark{width:34px;height:34px;border-radius:12px;font-size:22.5px}
  .nav-links{max-width:100%;width:100%;justify-content:flex-start;padding:4px;border-radius:14px}
  .nav-links a{flex:1 0 auto;text-align:center;padding:8px 10px;font-size:18px}
  .hero{padding:36px 2px 22px}.hero h1{margin-top:13px;font-size:54px;line-height:1.12}.hero p{font-size:22.5px;line-height:1.75}
  .card{padding:20px;border-radius:20px}
  .footer{padding:34px 0 26px}
  .category-block.card{padding:18px}.category-block h2{font-size:31.5px}.book-cards{grid-template-columns:1fr}
  .book-card.book-card-simple{min-height:88px;padding:17px 43px 17px 18px}.book-card.book-card-simple h3{font-size:27px}
  .book-preview-page{padding-top:18px}.book-preview-hero{padding:22px}.book-preview-hero h1{font-size:51px}
  .catalog-controls{grid-template-columns:1fr}.catalog-controls input{grid-column:auto}.catalog-head{align-items:stretch}
  .catalog-pagination{gap:8px}.catalog-pagination button{padding-inline:13px}
  .knowledge-part-nav{padding:18px;border-radius:21px}.knowledge-part-nav-head{display:block}.knowledge-part-nav-head p{margin-top:8px}
  .knowledge-part-grid{grid-template-columns:1fr!important}
  .knowledge-part-button{min-height:92px!important;padding:15px!important}
  .knowledge-part-copy small{font-size:19.5px!important;line-height:1.55!important}
  .knowledge-detail{padding:18px}.knowledge-detail-head h2{font-size:46.5px!important}.knowledge-detail-head p{font-size:22.5px!important}
  .knowledge-section-title{display:block!important}.knowledge-section-title>span{display:block;margin-top:6px}
  .lecture-heading{align-items:flex-start!important}.lecture-heading>span{margin-top:4px}
  .knowledge-word-row{grid-template-columns:1fr!important}.knowledge-word-meta{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .account-auth-grid{display:grid}.auth-card{padding:22px}.clear-grid{grid-template-columns:1fr!important}
  .reinforcement-shell{padding-top:26px}.reinforcement-head{display:grid;gap:14px}.reinforcement-head .button-link{justify-self:start}
  body.learning-active main.shell{padding:8px 0 10px}
  body.learning-active .study-layout{height:calc(100svh - 115px);min-height:520px}
  :root[data-display-scale="compact"] body.learning-active:not(.mini-mode) .study-layout{
    height:calc(149.2537svh - 171.642px);
    min-height:776.119px;
  }
  body.learning-active .study-card{padding:12px 11px 10px;border-radius:20px}
  .study-summary{font-size:15px}.study-summary-book,.study-summary-line b{font-size:15px}
  .word-main{padding:5px 2px 2px}.word-title{font-size:clamp(67.5px,22.5vw,96px);margin-top:0}.pron-big{font-size:28.5px}
  .answer-pronunciation{gap:8px}.answer-pronunciation .pron-list{display:grid;gap:5px}
  .study-info-grid{grid-template-columns:1fr!important}.study-section{padding:10px 11px!important}.study-section h3{margin-bottom:7px!important}
  .sense-row{grid-template-columns:50px 1fr;padding:7px 8px}.sense-meaning{font-size:21px}.memo,.example-sentence{font-size:19.5px}.example-translation{font-size:18px}
  .study-main-actions{gap:6px}.status-btn{min-height:66px;padding:8px 4px;border-radius:14px}.status-btn .status-copy strong{font-size:27px}.status-btn .status-copy small{display:none}.shortcut-badge{min-width:27px;height:27px}
  .mastered-action{min-height:34px}.mastered-action small{display:none}
  .day-complete{padding:10px}.complete-mark{width:58px;height:58px;font-size:46.5px}.day-complete h2{font-size:45px}
  .optional-practice-grid{grid-template-columns:1fr!important}
}
@media(max-height:720px) and (min-width:641px){
  body.learning-active .study-layout{height:calc(100svh - 98px);min-height:520px}
  :root[data-display-scale="compact"] body.learning-active:not(.mini-mode) .study-layout{
    height:calc(149.2537svh - 146.269px);
    min-height:776.119px;
  }
  body.learning-active .study-card{padding-top:12px}
  .word-title{font-size:clamp(72px,10.5vw,108px)}
  .status-btn{min-height:68px}
}
.icon-btn,.example-audio-button,.practice-audio-button{min-height:0;padding:0}
.icon-btn{min-height:40px}
.example-audio-button{min-height:38px}
@media(min-width:901px){
  body[data-page="books"] .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  body[data-page="books"] .category-block:last-child:nth-child(odd){grid-column:1/-1}
}

.category-heading>div{min-width:0}
.category-heading .pill{flex:none}
.optional-practice>span{display:grid;gap:3px}
.optional-practice>span strong{color:#4d5c54;font-size:21px;letter-spacing:-.01em}
.optional-practice>span small{color:#839087;font-size:18px;line-height:1.5}
/* Explicit British/American pronunciation controls shared by the full and mini cards. */
.dual-pronunciation { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px !important; width: auto; }
.dual-pronunciation .pron-inline { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) 36px; align-items: center; gap: 8px !important; justify-content: start !important; white-space: nowrap; }
.pron-accent-label { display: inline-grid; grid-template-columns: 4px auto; place-content: center; align-items: center; gap: 4px; width: 32px; height: 26px; border: 1px solid #ccded3; border-radius: 999px; background: linear-gradient(155deg, #fafcfb, #edf5f0); color: #2e6b50; font-size: 13px; font-weight: 900; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95); }
.pron-accent-label::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #62a17f; box-shadow: 0 0 0 2px rgba(98, 161, 127, .1); }
.pron-accent-speaker { display: grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border: 1px solid #cbdcd2; border-radius: 12px; background: linear-gradient(155deg, #fbfdfc, #edf4f0); color: #356b52; box-shadow: inset 0 1px 0 #fff, 0 4px 11px rgba(35, 83, 58, .07); cursor: pointer; }
.pron-accent-speaker:hover { transform: translateY(-1px); border-color: #8eaf9e; background: linear-gradient(155deg, #f8fcfa, #e5f0e9); box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(35, 83, 58, .11); }
.pron-accent-speaker.is-speaking { border-color: var(--brand-deep); background: var(--brand-deep); color: #fff; box-shadow: 0 0 0 4px rgba(47, 111, 78, .12); }
.pron-speaker-icon { width: 19px; height: 19px; overflow: visible; fill: none; }
.dual-pronunciation .pron-big { min-width: 0; font-size: 26px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.multi-pronunciation { grid-template-columns: 1fr !important; gap: 9px !important; }
.pronunciation-view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: min(260px, 100%); padding: 4px; border: 1px solid #dce7df; border-radius: 12px; background: #f2f6f3; }
.pronunciation-view-switch button { min-height: 34px; padding: 5px 14px; border: 0; border-radius: 9px; background: transparent; color: #607168; font-size: 15px; font-weight: 800; box-shadow: none; }
.pronunciation-view-switch button:hover { transform: none; background: #e7f0ea; box-shadow: none; }
.pronunciation-view-switch button.is-selected { background: #fff; color: var(--brand-deep); box-shadow: 0 2px 7px rgba(38, 76, 55, .12); }
.pronunciation-variant-list { display: grid; gap: 9px; }
.pron-variant { display: grid; grid-template-columns: minmax(110px, .75fr) minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #e0e8e2; border-radius: 12px; background: #f8faf9; }
.multi-pronunciation[data-active-accent="uk"] [data-pronunciation-accent="us"],
.multi-pronunciation[data-active-accent="us"] [data-pronunciation-accent="uk"] { display: none !important; }
.pron-variant .pron-inline { padding: 0 !important; border: 0 !important; }
.pron-variant-label { color: #53645b; font-size: 16px; font-weight: 760; line-height: 1.35; }
.sound-accent-badge { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 19px; height: 19px; border: 2px solid #fff; border-radius: 50%; background: var(--brand-deep); color: #fff; font-size: 10px; font-weight: 900; line-height: 1; }
.card-menu-group { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #edf1ee; border-bottom: 1px solid #edf1ee; background: #f8faf9; padding: 8px; }
.card-menu-group > span { grid-column: 1 / -1; padding: 2px 5px 7px; color: #78867e; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.card-menu .card-menu-group button { position: relative; border: 1px solid #dce6df !important; border-radius: 9px !important; padding: 8px 24px 8px 10px; background: #fff; text-align: left; font-size: 15px; }
.card-menu .card-menu-group button + button { margin-left: 6px; }
.card-menu .card-menu-group button.is-selected { border-color: #8db7a0 !important; background: #eaf4ee; color: var(--brand-deep); font-weight: 850; }
.card-menu .card-menu-group button.is-selected::after { content: '✓'; position: absolute; right: 9px; color: var(--brand); }

@media (max-width: 680px) {
  .answer-pronunciation { align-items: flex-start; }
  .dual-pronunciation:not(.multi-pronunciation) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; }
  .dual-pronunciation .pron-big { font-size: 20px; }
  .pron-variant { grid-template-columns: 1fr; }
  .pron-variant-label { padding-bottom: 2px; border-bottom: 1px solid #e2e9e4; }
}
@media (max-width: 480px) {
  .dual-pronunciation:not(.multi-pronunciation) .pron-inline { grid-template-columns: 23px minmax(0, 1fr) 28px; gap: 4px !important; }
  .dual-pronunciation:not(.multi-pronunciation) .pron-accent-label { width: 22px; height: 22px; font-size: 10px; }
  .dual-pronunciation:not(.multi-pronunciation) .pron-accent-speaker { width: 27px; height: 27px; min-height: 27px; }
  .dual-pronunciation:not(.multi-pronunciation) .pron-speaker-icon { width: 15px; height: 15px; }
  .dual-pronunciation:not(.multi-pronunciation) .pron-big { font-size: 16px; }
}

@media (max-width: 640px) { .category-heading { align-items: flex-start; } }
/* Type roles are declared once in style-foundation.css. */
body{
  font-family:var(--font-ui);
  font-synthesis:none;
  font-kerning:normal;
  font-variant-numeric:tabular-nums;
}
button,input,select,textarea{font-family:var(--font-ui)}
.hero h1,.card h1,.card h2,.card h3,.knowledge-detail-head h2,.reinforcement-head h1{
  font-family:var(--font-display);
}
.brand-name{
  font-family:var(--font-word);
  font-style:italic;
  font-weight:700;
  letter-spacing:-.045em;
}
.word-title,
.word-preview-word strong,
.knowledge-word-meta h4{
  font-family:var(--font-word);
  font-weight:700;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.word-main{min-width:0}
.word-title{
  display:block;
  width:100%;
  min-width:0;
  font-size:clamp(84px,12vw,138px);
  line-height:.96;
  text-align:center;
  white-space:nowrap;
}
.word-title.word-title-wrap{
  overflow-wrap:anywhere;
  white-space:normal;
}
.example-sentence,.knowledge-book-examples p{
  font-family:var(--font-reading);
  letter-spacing:0;
}
.example-number{
  font-family:"Times New Roman",serif;
  font-variant-numeric:lining-nums tabular-nums;
}
.study-summary,.pill,.eyebrow,.shortcut-badge,.knowledge-book-label{
  font-variant-numeric:tabular-nums;
}

/* Keep feedback crisp: controls move quickly, fields only animate focus. */
a,button,input,select,textarea{transition:none}
button,.button,.button-link,.nav-links a,.book-card,.word-preview-row,.choice-option,.knowledge-part-button{
  transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease,opacity .12s ease,transform .12s cubic-bezier(.2,.75,.25,1);
}
input,select,textarea{transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}
button,.button,.button-link,.nav-links a{-webkit-tap-highlight-color:transparent}
button:active:not(:disabled),.button:active,.button-link:active,.nav-links a:active{
  transform:translateY(0) scale(.985);
  transition-duration:.055s;
}
#studyCard .study-card-content{transition:opacity .10s ease}
.word-card-details:not(.hidden){animation-duration:.12s}
.progress span{transition:width .18s ease}
.study-card.is-answering #studyCard{opacity:1}
.word-preview-row,.result-card,.lecture-lesson{
  content-visibility:auto;
  contain-intrinsic-size:auto 92px;
}
@media(max-width:640px){
  input,select,textarea{font-size:24px}
  .word-title{font-size:clamp(72px,24vw,102px)}
}

body[data-page="books"] .category-grid{
  grid-template-columns:1fr!important;
  gap:14px;
}
body[data-page="books"] .category-block.card{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr);
  align-items:center;
  gap:28px;
  padding:24px 28px;
}
body[data-page="books"] .category-heading{
  min-width:0;
  margin:0;
  align-items:center;
}
body[data-page="books"] .book-cards{
  min-width:0;
  grid-template-columns:minmax(0,1fr)!important;
}
body[data-page="books"] .book-card.book-card-simple{
  width:100%!important;
  min-width:0;
  max-width:none;
  min-height:82px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
  padding:18px 54px 18px 20px;
  writing-mode:horizontal-tb!important;
}
body[data-page="books"] .book-card.book-card-simple h3,
body[data-page="books"] .book-card.book-card-simple .book-word-count{
  min-width:0;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}
body[data-page="books"] .book-card.book-card-simple h3{
  white-space:normal;
  overflow-wrap:anywhere;
}
@media(max-width:760px){
  body[data-page="books"] .category-block.card{
    grid-template-columns:1fr;
    gap:16px;
    padding:19px;
  }
  body[data-page="books"] .category-heading{align-items:flex-start}
  body[data-page="books"] .book-card.book-card-simple{padding:16px 46px 16px 17px}
}

body[data-page="learn"]:not(.learning-active) main.shell{
  padding-bottom:20px;
}
.learn-landing-hero{
  padding-bottom:28px;
}
.learn-landing-hero h1{
  max-width:920px;
}
.learn-landing-hero p{
  max-width:820px;
}
.learn-entry-card{
  min-height:180px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  padding:30px 32px;
  border-radius:26px;
  background:rgba(255,255,255,.82);
}
.learn-entry-copy{
  min-width:0;
}
.learn-entry-copy h2{
  margin:12px 0 8px;
  font-size:clamp(39px,4.8vw,60px);
  line-height:1.18;
}
.learn-entry-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}
.learn-entry-action{
  min-width:180px;
  justify-content:space-between;
  gap:24px;
  padding:15px 18px;
  border-radius:16px;
}
@media(max-width:700px){
  .learn-entry-card{
    grid-template-columns:1fr;
    gap:22px;
    min-height:0;
    padding:22px;
    border-radius:21px;
  }
  .learn-entry-action{width:100%;min-width:0}
}

.word-catalog-card .catalog-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:18px;
}
.word-catalog-card .catalog-head>div:first-child{min-width:0}
.word-catalog-card .catalog-head h2{
  max-width:none;
  white-space:normal;
}
.word-catalog-card .catalog-controls{
  width:100%;
  min-width:0;
  grid-template-columns:minmax(220px,1fr) minmax(150px,190px) minmax(140px,170px);
}
@media(max-width:720px){
  .word-catalog-card .catalog-controls{grid-template-columns:1fr}
}

/* The card stage is a stable scroll container before and after reveal. */
body[data-page="learn"] #studyCard{
  position:relative;
  overflow-x:hidden;
  overflow-y:auto;
  overflow-anchor:none;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
body[data-page="learn"] #studyCard>.study-card-content{
  position:relative;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:100%;
  margin:0;
}
body[data-page="learn"] #studyCard .study-card-topbar{
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:6;
}
body[data-page="learn"]:not(.mini-mode) #studyCard>.word-card-revealed{
  padding-top:50px;
  align-content:start;
  row-gap:8px;
}
body[data-page="learn"]:not(.mini-mode) #studyCard>.word-card-revealed .word-main{
  padding-bottom:0;
}
body[data-page="learn"]:not(.mini-mode) #studyCard>.word-card-revealed .word-title{
  margin:8px 0 4px;
  font-size:clamp(104px,12vw,148px);
}
body[data-page="learn"]:not(.mini-mode) #studyCard>.word-card-revealed .word-title.word-title-long{
  font-size:clamp(92px,9vw,112px);
}
body[data-page="learn"]:not(.mini-mode) #studyCard>.word-card-revealed .word-title.word-title-very-long{
  font-size:clamp(54px,6vw,78px);
}