/* Samio vocabulary notebook theme — shared by all personal activities. */
:root{
  --nb-paper:#fffefa;
  --nb-ink:#172b4d;
  --nb-muted:#66758b;
  --nb-blue:#1769c2;
  --nb-teal:#10958f;
  --nb-coral:#ee4860;
  --nb-orange:#ee8a13;
  --nb-green:#42a64a;
  --nb-purple:#8b4ab6;
  --nb-line:#d5e4ee;
  --nb-shadow:rgba(23,43,77,.10);
  --nb-display:"Comic Sans MS","Segoe Print","Trebuchet MS",sans-serif;
  --nb-body:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{min-width:0;background:var(--nb-paper)}
body.theme-notebook{
  min-width:0;
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--nb-ink);
  background-color:var(--nb-paper)!important;
  background-image:url("/assets/vocab/notebook-grid.png")!important;
  background-repeat:repeat!important;
  background-size:540px 540px!important;
  background-attachment:fixed!important;
  font-family:var(--nb-body)!important;
}
body.theme-notebook::before,
body.theme-notebook::after{display:none!important}
body.theme-notebook button,
body.theme-notebook input,
body.theme-notebook textarea,
body.theme-notebook select{font:inherit}
body.theme-notebook button,
body.theme-notebook .btn,
body.theme-notebook a{min-height:44px}
body.theme-notebook button:focus-visible,
body.theme-notebook a:focus-visible,
body.theme-notebook input:focus-visible{
  outline:3px solid rgba(23,105,194,.28)!important;
  outline-offset:3px!important;
}

/* Compact learning header */
body.theme-notebook .yh-game-header{
  position:sticky!important;
  z-index:80!important;
  top:0!important;
  display:grid!important;
  grid-template-columns:minmax(180px,1fr) minmax(260px,1.1fr) minmax(260px,1fr) minmax(160px,.62fr) 56px!important;
  align-items:center!important;
  gap:16px!important;
  width:100%!important;
  min-height:80px!important;
  padding:10px 18px!important;
  border:0!important;
  border-bottom:2px solid var(--nb-blue)!important;
  color:var(--nb-ink)!important;
  background:rgba(255,254,250,.97)!important;
  box-shadow:0 3px 0 rgba(23,105,194,.08)!important;
}
body.theme-notebook .yh-game-logo{
  display:flex!important;
  min-width:0!important;
  align-items:center!important;
  gap:12px!important;
  color:var(--nb-ink)!important;
  font-family:var(--nb-display)!important;
  font-size:clamp(16px,1.6vw,22px)!important;
  font-weight:800!important;
  text-decoration:none!important;
}
body.theme-notebook .yh-nav-back-icon,
body.theme-notebook .yh-game-logo>span:first-child{
  display:grid!important;
  width:48px!important;
  height:48px!important;
  flex:0 0 48px!important;
  place-items:center!important;
  border:2px solid var(--nb-coral)!important;
  border-radius:12px 10px 13px 9px!important;
  color:var(--nb-coral)!important;
  background:var(--nb-paper)!important;
  box-shadow:2px 2px 0 rgba(238,72,96,.12)!important;
}
body.theme-notebook .yh-game-logo-text,
body.theme-notebook .yh-game-logo>span:last-child{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.theme-notebook .yh-game-title{
  color:var(--nb-coral)!important;
  font-family:var(--nb-display)!important;
  font-size:clamp(15px,1.5vw,21px)!important;
  font-weight:900!important;
  text-align:center!important;
  text-transform:uppercase!important;
}
body.theme-notebook .yh-game-progress{
  display:grid!important;
  grid-template-columns:auto minmax(80px,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  color:var(--nb-ink)!important;
  font-weight:900!important;
}
body.theme-notebook .yh-progress-label{
  color:var(--nb-coral)!important;
  font-family:var(--nb-display)!important;
  font-size:13px!important;
  text-transform:uppercase!important;
}
body.theme-notebook .yh-bar{
  height:10px!important;
  overflow:hidden!important;
  border:1px solid #cad8e3!important;
  border-radius:999px!important;
  background:#eef3f7!important;
  box-shadow:inset 0 1px 2px rgba(23,43,77,.08)!important;
}
body.theme-notebook .yh-bar-fill{
  height:100%!important;
  border-radius:inherit!important;
  background:var(--nb-teal)!important;
}
body.theme-notebook .yh-game-score{
  display:flex!important;
  min-width:0!important;
  min-height:46px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:7px 14px!important;
  border:2px solid var(--nb-coral)!important;
  border-radius:12px 10px 13px 9px!important;
  color:var(--nb-coral)!important;
  background:var(--nb-paper)!important;
  font-family:var(--nb-display)!important;
  font-weight:900!important;
  box-shadow:2px 2px 0 rgba(238,72,96,.10)!important;
}
body.theme-notebook .yh-game-close{
  display:grid!important;
  width:48px!important;
  height:48px!important;
  place-items:center!important;
  border:2px solid var(--nb-coral)!important;
  border-radius:12px 10px 13px 9px!important;
  color:var(--nb-coral)!important;
  background:var(--nb-paper)!important;
  font-size:22px!important;
  text-decoration:none!important;
}

/* Shared notebook page structure */
body.theme-notebook.mode-game .yh-game-main{
  position:relative!important;
  width:min(1240px,calc(100% - 40px))!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding:36px 0 56px!important;
}
body.theme-notebook .yh-mode-intro{
  display:grid!important;
  grid-template-columns:96px minmax(0,1fr) 120px!important;
  align-items:center!important;
  gap:24px!important;
  min-height:150px!important;
  margin:0 0 26px!important;
  padding:24px 30px!important;
  border:2px solid var(--nb-teal)!important;
  border-radius:8px 13px 9px 6px!important;
  background:rgba(255,254,250,.94)!important;
  box-shadow:-6px 5px 0 rgba(16,149,143,.08)!important;
}
body.theme-notebook .yh-mode-number{
  display:grid!important;
  width:76px!important;
  height:76px!important;
  place-items:center!important;
  border:2px solid #0f7e7a!important;
  border-radius:16px 12px 17px 11px!important;
  color:#fff!important;
  background:var(--nb-teal)!important;
  font-family:var(--nb-display)!important;
  font-size:30px!important;
  font-weight:900!important;
  box-shadow:4px 4px 0 #bfe6e3!important;
}
body.theme-notebook .yh-mode-copy{display:block!important;min-width:0!important}
body.theme-notebook .yh-mode-kicker{
  display:block!important;
  margin-bottom:5px!important;
  color:#087e79!important;
  font-family:var(--nb-display)!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}
body.theme-notebook .yh-mode-copy h1,
body.theme-notebook .yh-mode-copy h2{
  margin:0!important;
  color:#1a2433!important;
  font-family:var(--nb-display)!important;
  font-size:clamp(28px,3vw,42px)!important;
  line-height:1.15!important;
}
body.theme-notebook .yh-mode-copy p{
  margin:8px 0 0!important;
  color:#5f6875!important;
  font-family:var(--nb-display)!important;
  font-size:clamp(15px,1.5vw,20px)!important;
}
body.theme-notebook .yh-mode-count{
  display:flex!important;
  min-height:84px!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border:2px solid var(--nb-orange)!important;
  border-radius:10px 6px 12px 8px!important;
  color:var(--nb-teal)!important;
  background:#fffdf5!important;
  font-family:var(--nb-display)!important;
}
body.theme-notebook .yh-mode-count strong{font-size:30px!important;line-height:1!important}
body.theme-notebook .yh-mode-count small{margin-top:6px!important;color:#6d6a62!important;font-size:11px!important;text-transform:uppercase!important}
body.theme-notebook #yhStage{min-width:0!important}
body.theme-notebook .ant-card,
body.theme-notebook .yhw-quiz-card{
  overflow:visible!important;
  border:2px solid #aebbc7!important;
  border-radius:18px 14px 19px 13px!important;
  background:rgba(255,254,250,.96)!important;
  box-shadow:4px 5px 0 var(--nb-shadow)!important;
}
body.theme-notebook .ant-card-body{padding:clamp(18px,2.5vw,32px)!important}
body.theme-notebook .btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:48px!important;
  padding:10px 22px!important;
  border:2px solid #0d7f7a!important;
  border-radius:12px 9px 13px 8px!important;
  color:#fff!important;
  background:var(--nb-teal)!important;
  font-family:var(--nb-display)!important;
  font-size:16px!important;
  font-weight:900!important;
  box-shadow:3px 3px 0 #b9dedb!important;
  cursor:pointer!important;
  transition:transform .14s ease,box-shadow .14s ease!important;
}
body.theme-notebook .btn:not(:disabled):hover{transform:translateY(-2px)!important;box-shadow:4px 5px 0 #b9dedb!important}
body.theme-notebook .btn:not(:disabled):active{transform:translateY(1px)!important;box-shadow:1px 1px 0 #b9dedb!important}
body.theme-notebook .btn:disabled{cursor:not-allowed!important;opacity:.5!important;transform:none!important}
body.theme-notebook .btn-ghost{
  border-color:#9aaaba!important;
  color:#526174!important;
  background:#fff!important;
  box-shadow:3px 3px 0 #e0e6eb!important;
}
body.theme-notebook .yh-game-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:14px!important;
  width:100%!important;
  margin:24px auto 0!important;
}
body.theme-notebook .muted,
body.theme-notebook .muted-2{color:var(--nb-muted)!important}
body.theme-notebook .teacher-preview{
  right:18px!important;
  bottom:16px!important;
  min-height:44px!important;
  border:2px dashed var(--nb-orange)!important;
  border-radius:14px 10px 15px 9px!important;
  color:#714d12!important;
  background:#fff9e8!important;
  font-family:var(--nb-display)!important;
  box-shadow:3px 3px 0 rgba(238,138,19,.13)!important;
  pointer-events:none!important;
}

/* Flashcard — the approved anchor screen */
body.theme-notebook.mode-flashcard .yh-mode-intro{display:none!important}
body.theme-notebook.mode-flashcard .yh-game-main{width:min(1120px,calc(100% - 40px))!important;padding-top:42px!important}
body.theme-notebook.mode-flashcard #yhStage,
body.theme-notebook.mode-flashcard .yhw-quiz-card,
body.theme-notebook.mode-flashcard .yhw-quiz-card>.ant-card-body{
  padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important
}
body.theme-notebook.mode-flashcard .yh-fc-meta{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  min-height:90px!important;
  margin-bottom:22px!important;
  padding:18px 28px!important;
  border:2px solid var(--nb-blue)!important;
  border-radius:18px 13px 19px 12px!important;
  background:rgba(255,254,250,.96)!important;
  box-shadow:4px 4px 0 rgba(23,105,194,.10)!important;
}
body.theme-notebook.mode-flashcard .yh-fc-counter{display:flex!important;align-items:center!important;gap:18px!important;color:var(--nb-ink)!important;font-family:var(--nb-display)!important;font-size:20px!important;font-weight:900!important}
body.theme-notebook.mode-flashcard .yh-fc-counter strong{color:var(--nb-coral)!important}
body.theme-notebook.mode-flashcard .yh-fc-counter i{width:min(370px,34vw)!important;height:16px!important;border:1px solid #f0c582!important;border-radius:999px!important;background:#fff3dc!important}
body.theme-notebook.mode-flashcard .yh-fc-counter i b{display:block!important;height:100%!important;border-radius:inherit!important;background:#f17861!important}
body.theme-notebook.mode-flashcard .yh-fc-meta-controls{display:flex!important;align-items:center!important;gap:12px!important}
body.theme-notebook.mode-flashcard .yh-fc-autoread,
body.theme-notebook.mode-flashcard .yh-fc-fullscreen,
body.theme-notebook.mode-flashcard .yh-fc-settings{
  min-height:48px!important;
  border:2px solid var(--nb-teal)!important;
  border-radius:12px 9px 13px 8px!important;
  color:#0b7f7a!important;
  background:#effaf8!important;
  font-family:var(--nb-display)!important;
  font-weight:900!important;
}
body.theme-notebook.mode-flashcard .yh-fc-fullscreen,
body.theme-notebook.mode-flashcard .yh-fc-settings{width:48px!important;padding:0!important;border-color:transparent!important;color:var(--nb-ink)!important;background:transparent!important;font-size:23px!important}
body.theme-notebook.mode-flashcard .yh-fc-settings-panel{z-index:20!important;border:2px solid var(--nb-blue)!important;border-radius:14px!important;background:var(--nb-paper)!important;box-shadow:8px 10px 0 rgba(23,105,194,.12)!important}
body.theme-notebook.mode-flashcard .yh-fc{width:100%!important;max-width:none!important;margin:0!important}
body.theme-notebook.mode-flashcard .yh-fc-stack{display:none!important}
body.theme-notebook.mode-flashcard .yh-fc-card{
  width:100%!important;
  height:590px!important;
  min-height:0!important;
  border:3px solid var(--nb-blue)!important;
  border-radius:24px 18px 25px 17px!important;
  background:var(--nb-paper)!important;
  box-shadow:5px 5px 0 rgba(23,105,194,.16)!important;
}
body.theme-notebook.mode-flashcard .yh-fc-face{
  grid-template-columns:minmax(320px,.95fr) minmax(360px,1.05fr)!important;
  gap:60px!important;
  padding:82px 56px 54px!important;
  border:0!important;
  border-radius:19px 13px 20px 12px!important;
  background:var(--nb-paper)!important;
}
body.theme-notebook.mode-flashcard .yh-fc-face::before,
body.theme-notebook.mode-flashcard .yh-fc-visual::after{display:none!important}
body.theme-notebook.mode-flashcard .yh-fc-face-label{
  top:34px!important;
  left:38px!important;
  padding:9px 14px!important;
  border:2px dashed var(--nb-coral)!important;
  border-radius:12px 9px 13px 8px!important;
  color:var(--nb-coral)!important;
  background:#fff9f8!important;
  font-family:var(--nb-display)!important;
  font-size:17px!important;
  font-weight:900!important;
}
body.theme-notebook.mode-flashcard .yh-fc-face-label.is-back{border-color:var(--nb-teal)!important;color:var(--nb-teal)!important;background:#f4fbfa!important}
body.theme-notebook.mode-flashcard .yh-fc-visual{
  width:100%!important;
  min-height:380px!important;
  border:2px solid var(--nb-teal)!important;
  border-radius:20px 15px 21px 14px!important;
  background:#fbfffd!important;
  box-shadow:4px 4px 0 rgba(16,149,143,.12)!important;
}
body.theme-notebook.mode-flashcard .yh-fc-polaroid,
body.theme-notebook.mode-flashcard .yh-fc-media{width:100%!important;height:100%!important;min-height:340px!important;border:0!important;background:transparent!important;box-shadow:none!important}
body.theme-notebook.mode-flashcard .yh-fc-swatches{display:none!important}
body.theme-notebook.mode-flashcard .yh-fc-animal{width:88%!important;height:88%!important;max-width:390px!important;max-height:340px!important;object-fit:contain!important;filter:none!important}
body.theme-notebook.mode-flashcard .yh-fc-emoji{font-size:132px!important}
body.theme-notebook.mode-flashcard .yh-fc-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important}
body.theme-notebook.mode-flashcard .yh-fc-card.is-no-visual .yh-fc-front{grid-template-columns:1fr!important}
body.theme-notebook.mode-flashcard .yh-fc-card.is-no-visual .yh-fc-visual{display:none!important}
body.theme-notebook.mode-flashcard .yh-fc-card.is-no-visual .yh-fc-copy{align-items:center!important;text-align:center!important}
body.theme-notebook.mode-flashcard .yh-fc-vocab-label{padding:7px 14px!important;border:2px solid var(--nb-teal)!important;border-radius:12px 9px 13px 8px!important;color:var(--nb-teal)!important;background:#f2fbfa!important;font-family:var(--nb-display)!important;font-size:15px!important;font-weight:900!important}
body.theme-notebook.mode-flashcard .yh-fc-word-title,
body.theme-notebook.mode-flashcard .yh-fc-copy h2{margin:28px 0 0!important;color:#1b1b1b!important;font-family:var(--nb-display)!important;font-size:clamp(46px,6vw,76px)!important;line-height:1.04!important;font-weight:900!important}
body.theme-notebook.mode-flashcard .yh-fc-phonetic{margin-top:16px!important;color:var(--nb-blue)!important;font-family:var(--nb-display)!important;font-size:clamp(20px,2.2vw,27px)!important}
body.theme-notebook.mode-flashcard .yh-fc-inline-sound{width:46px!important;height:46px!important;border:2px solid var(--nb-blue)!important;border-radius:50%!important;color:#fff!important;background:var(--nb-blue)!important}
body.theme-notebook.mode-flashcard .yh-fc-flip-cue{right:70px!important;bottom:48px!important;padding:10px 16px!important;border:2px dashed var(--nb-coral)!important;border-radius:14px 10px 15px 9px!important;color:var(--nb-ink)!important;background:#fff!important;font-family:var(--nb-display)!important;font-size:16px!important;font-weight:900!important}
body.theme-notebook.mode-flashcard .yh-fc-back{grid-template-columns:1fr!important;background:#f7fdf9!important}
body.theme-notebook.mode-flashcard .yh-fc-back-grid{grid-template-columns:1fr!important;width:min(740px,100%)!important;text-align:center!important}
body.theme-notebook.mode-flashcard .yh-fc-definition{align-items:center!important}
body.theme-notebook.mode-flashcard .yh-fc-definition strong{font-family:var(--nb-display)!important;font-size:clamp(38px,5vw,58px)!important}
body.theme-notebook.mode-flashcard .yh-game-actions{
  display:grid!important;
  grid-template-columns:120px 150px 150px 160px 160px 120px!important;
  width:100%!important;
  margin-top:28px!important;
  padding:18px!important;
  border:2px solid #aebbc7!important;
  border-radius:17px 13px 18px 12px!important;
  background:rgba(255,254,250,.96)!important;
  box-shadow:4px 4px 0 var(--nb-shadow)!important;
}
body.theme-notebook.mode-flashcard .yh-game-actions .btn{width:100%!important;min-height:58px!important;padding:8px 10px!important;font-size:18px!important}
body.theme-notebook.mode-flashcard .yh-fc-listen{border-color:#087e79!important;background:var(--nb-teal)!important;box-shadow:3px 3px 0 #a8d9d5!important}
body.theme-notebook.mode-flashcard .yh-fc-record{border-color:var(--nb-coral)!important;color:var(--nb-coral)!important;background:#fff6f7!important;box-shadow:3px 3px 0 #f3c0c8!important}
body.theme-notebook.mode-flashcard .yh-fc-rate--review{border-color:var(--nb-orange)!important;color:#b66500!important;background:#fff7e9!important;box-shadow:3px 3px 0 #f0d1a5!important}
body.theme-notebook.mode-flashcard .yh-fc-rate--known{border-color:var(--nb-green)!important;color:#fff!important;background:var(--nb-green)!important;box-shadow:3px 3px 0 #b8ddb9!important}

/* Matching — the second approved anchor screen */
body.theme-notebook.mode-matching1 .yhw-quiz-card{border-color:#aebbc7!important;background:rgba(255,254,250,.92)!important}
body.theme-notebook.mode-matching1 .yhw-match-main{display:grid!important;gap:24px!important}
body.theme-notebook.mode-matching1 .yhw-match-top-section,
body.theme-notebook.mode-matching1 .yhw-match-bottom-section{padding:22px!important;border:2px solid #aebbc7!important;border-radius:18px 14px 19px 13px!important;background:rgba(255,254,250,.88)!important}
body.theme-notebook.mode-matching1 .yhw-match-top-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important}
body.theme-notebook.mode-matching1 .yhw-match-top-card,
body.theme-notebook.mode-matching1 .yhw-match-bottom-card{
  height:auto!important;
  min-height:112px!important;
  border:2px solid var(--nb-teal)!important;
  border-radius:15px 11px 16px 10px!important;
  color:#17212f!important;
  background:#effaf8!important;
  font-family:var(--nb-display)!important;
  font-size:clamp(17px,1.7vw,23px)!important;
  font-weight:900!important;
  box-shadow:3px 3px 0 rgba(16,149,143,.13)!important;
}
body.theme-notebook.mode-matching1 .yhw-match-top-card{grid-template-rows:minmax(50px,auto) auto!important;padding:14px!important}
body.theme-notebook.mode-matching1 .yhw-match-top-main{min-height:50px!important}
body.theme-notebook.mode-matching1 .yhw-match-top-word-text{font-family:var(--nb-display)!important;font-size:clamp(19px,1.8vw,26px)!important;line-height:1.15!important}
body.theme-notebook.mode-matching1 .yhw-match-top-card:nth-child(4n+2),
body.theme-notebook.mode-matching1 .yhw-match-bottom-card:nth-child(4n+2){border-color:var(--nb-coral)!important;background:#fff4f6!important;box-shadow-color:#f3c0c8!important}
body.theme-notebook.mode-matching1 .yhw-match-top-card:nth-child(4n+3),
body.theme-notebook.mode-matching1 .yhw-match-bottom-card:nth-child(4n+3){border-color:var(--nb-blue)!important;background:#f1f7ff!important}
body.theme-notebook.mode-matching1 .yhw-match-top-card:nth-child(4n+4),
body.theme-notebook.mode-matching1 .yhw-match-bottom-card:nth-child(4n+4){border-color:var(--nb-purple)!important;background:#faf3ff!important}
body.theme-notebook.mode-matching1 .yhw-match-top-answer{min-height:34px!important;margin-top:8px!important;border-top:1px dashed currentColor!important;padding-top:7px!important}
body.theme-notebook.mode-matching1 .yhw-match-top-placeholder{color:#718096!important;font-size:13px!important}
body.theme-notebook.mode-matching1 .yhw-match-bottom-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
body.theme-notebook.mode-matching1 .yhw-match-bottom-card{min-height:72px!important;padding:12px 16px!important}
body.theme-notebook.mode-matching1 .yhw-match-bottom-card--active{color:#fff!important;background:var(--nb-blue)!important;transform:translateY(-2px)!important}
body.theme-notebook.mode-matching1 .yhw-match-bottom-card--used{opacity:.48!important}
body.theme-notebook.mode-matching1 .yhw-match-top-card--correct{border-color:var(--nb-green)!important;background:#eef9ef!important}
body.theme-notebook.mode-matching1 .yhw-match-top-card--wrong{border-color:var(--nb-coral)!important;background:#fff1f3!important}
body.theme-notebook.mode-matching1 .yh-game-actions .btn{min-width:220px!important;font-size:20px!important}

/* Quiz, fill-in and word-building families */
body.theme-notebook .yhw-quiz-main{display:grid!important;gap:24px!important}
body.theme-notebook .yhw-quiz-prompt,
body.theme-notebook .yhw-unscramble-top,
body.theme-notebook .yhw-vowel-word-wrapper{
  min-height:150px!important;
  padding:24px!important;
  border:2px dashed var(--nb-blue)!important;
  border-radius:17px 13px 18px 12px!important;
  background:#f7fbff!important;
  text-align:center!important;
}
body.theme-notebook .yhw-quiz-prompt h2,
body.theme-notebook .yhw-unscramble-top h2,
body.theme-notebook .yhw-vowel-word{color:#17212f!important;font-family:var(--nb-display)!important;font-size:clamp(32px,4.4vw,54px)!important;font-weight:900!important}
body.theme-notebook .yhw-quiz-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;margin:0!important}
body.theme-notebook .yhw-quiz-grid>.ant-col{width:auto!important;max-width:none!important;padding:0!important}
body.theme-notebook .yhw-quiz-option{
  width:100%!important;
  min-height:82px!important;
  border:2px solid var(--nb-teal)!important;
  border-radius:15px 11px 16px 10px!important;
  color:var(--nb-ink)!important;
  background:#f1fbf9!important;
  box-shadow:3px 3px 0 rgba(16,149,143,.12)!important;
  font-family:var(--nb-display)!important;
}
body.theme-notebook .yhw-quiz-option-slot-1{border-color:var(--nb-coral)!important;background:#fff4f6!important}
body.theme-notebook .yhw-quiz-option-slot-2{border-color:var(--nb-blue)!important;background:#f2f7ff!important}
body.theme-notebook .yhw-quiz-option-slot-3{border-color:var(--nb-orange)!important;background:#fff8ec!important}
body.theme-notebook .yhw-quiz-option-letter-badge{display:grid!important;width:36px!important;height:36px!important;place-items:center!important;border:2px solid currentColor!important;border-radius:50%!important;background:#fff!important;font-family:var(--nb-display)!important;font-weight:900!important}
body.theme-notebook .yhw-quiz-option-text{font-family:var(--nb-display)!important;font-size:clamp(18px,2vw,25px)!important;font-weight:900!important}
body.theme-notebook .yhw-quiz-option--correct{border-color:var(--nb-green)!important;background:#edf9ee!important}
body.theme-notebook .yhw-quiz-option--wrong{border-color:var(--nb-coral)!important;background:#fff0f2!important}
body.theme-notebook .yhw-quiz-audio-button,
body.theme-notebook .yhw-sound-btn{width:72px!important;height:72px!important;border:2px solid var(--nb-blue)!important;border-radius:50%!important;color:#fff!important;background:var(--nb-blue)!important;box-shadow:4px 4px 0 #bdd5ee!important}
body.theme-notebook.mode-quiz5 .yhq5-replay{min-height:44px!important;padding:8px 14px!important}
body.theme-notebook .yhw-fillin-input-wrapper,
body.theme-notebook .yhw-unscramble-answer{padding:24px!important;border:2px solid var(--nb-teal)!important;border-radius:16px 12px 17px 11px!important;background:#f4fbfa!important;text-align:center!important}
body.theme-notebook .yhw-fillin-input,
body.theme-notebook .yhw-fillin-slot{min-height:52px!important;border:0!important;border-bottom:3px solid var(--nb-blue)!important;color:var(--nb-ink)!important;background:#fff!important;font-family:var(--nb-display)!important;font-size:25px!important}
body.theme-notebook .yhw-unscramble-tiles{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:12px!important}
body.theme-notebook .yhw-unscramble-tile,
body.theme-notebook .yhs-token{min-width:52px!important;min-height:52px!important;padding:10px 14px!important;border:2px solid var(--nb-blue)!important;border-radius:12px 9px 13px 8px!important;color:var(--nb-ink)!important;background:#fff!important;box-shadow:3px 3px 0 #c7dbef!important;font-family:var(--nb-display)!important;font-size:20px!important;font-weight:900!important}

/* Memory and connecting */
body.theme-notebook .yhw-memory-card-wrapper{padding:24px!important;border:2px solid #aebbc7!important;border-radius:18px 14px 19px 13px!important;background:rgba(255,254,250,.94)!important;box-shadow:4px 4px 0 var(--nb-shadow)!important}
body.theme-notebook .yhw-memory-stats{color:var(--nb-teal)!important;font-family:var(--nb-display)!important;font-size:18px!important;font-weight:900!important}
body.theme-notebook .yhw-memory-grid{gap:14px!important}
body.theme-notebook .yhw-memory-card{min-height:94px!important}
body.theme-notebook .yhw-memory-card-face{border:2px solid var(--nb-blue)!important;border-radius:15px 11px 16px 10px!important;box-shadow:3px 3px 0 #c8dbef!important}
body.theme-notebook .yhw-memory-card-front{color:#fff!important;background:var(--nb-blue)!important}
body.theme-notebook .yhw-memory-card:nth-child(4n+2) .yhw-memory-card-front{border-color:var(--nb-teal)!important;background:var(--nb-teal)!important}
body.theme-notebook .yhw-memory-card:nth-child(4n+3) .yhw-memory-card-front{border-color:var(--nb-coral)!important;background:var(--nb-coral)!important}
body.theme-notebook .yhw-memory-card:nth-child(4n+4) .yhw-memory-card-front{border-color:var(--nb-orange)!important;background:var(--nb-orange)!important}
body.theme-notebook .yhw-memory-card-back{color:var(--nb-ink)!important;background:#fff!important;font-family:var(--nb-display)!important}
body.theme-notebook .yhw-match-board-wrapper{padding:24px!important;border:2px solid #aebbc7!important;border-radius:18px 14px 19px 13px!important;background:rgba(255,254,250,.94)!important;box-shadow:4px 4px 0 var(--nb-shadow)!important}
body.theme-notebook .yhw-match-item{min-height:64px!important;border:2px solid var(--nb-teal)!important;border-radius:14px 10px 15px 9px!important;background:#f2fbfa!important;box-shadow:3px 3px 0 rgba(16,149,143,.12)!important;font-family:var(--nb-display)!important;font-size:18px!important;font-weight:900!important}
body.theme-notebook .yhw-match-column-center .yhw-match-item{border-color:var(--nb-blue)!important;background:#f2f7ff!important}
body.theme-notebook .yhw-match-item--pending{border-color:var(--nb-orange)!important;background:#fff7e9!important;transform:translateY(-2px)!important}

/* Remaining activity-specific learning surfaces */
body.theme-notebook .yh-context-visual,
body.theme-notebook .yh-context-planet,
body.theme-notebook .yh-odd-dots,
body.theme-notebook .yh-odd-cursor,
body.theme-notebook .yhs-prompt-visual{display:none!important}
body.theme-notebook .yh-context-activity,
body.theme-notebook .yh-odd-window,
body.theme-notebook .yh-radical-lesson,
body.theme-notebook .yhs-sentence,
body.theme-notebook .yh-newgame,
body.theme-notebook .yhw-vowel-card,
body.theme-notebook .yhw-ws-layout{
  overflow:hidden!important;
  border:2px solid #aebbc7!important;
  border-radius:18px 14px 19px 13px!important;
  background:rgba(255,254,250,.96)!important;
  box-shadow:4px 4px 0 var(--nb-shadow)!important;
}
body.theme-notebook .yh-context-bar,
body.theme-notebook .yh-odd-top{min-height:54px!important;border-bottom:2px solid var(--nb-teal)!important;color:var(--nb-teal)!important;background:#effaf8!important;font-family:var(--nb-display)!important}
body.theme-notebook .yh-context-main,
body.theme-notebook .yh-odd-body{display:block!important;padding:clamp(24px,4vw,48px)!important}
body.theme-notebook .yh-context-copy{max-width:920px!important;margin:0 auto!important;text-align:center!important}
body.theme-notebook .yh-context-copy h2,
body.theme-notebook .yh-odd-body h2,
body.theme-notebook .yh-radical-lesson h2{color:var(--nb-ink)!important;font-family:var(--nb-display)!important;font-size:clamp(27px,3.4vw,43px)!important}
body.theme-notebook .yh-context-options,
body.theme-notebook .yh-odd-options,
body.theme-notebook .yh-radical-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
body.theme-notebook .yh-context-option,
body.theme-notebook .yh-odd-option,
body.theme-notebook .yh-radical-option,
body.theme-notebook .yh-choice{
  min-height:74px!important;
  border:2px solid var(--nb-blue)!important;
  border-radius:15px 11px 16px 10px!important;
  color:var(--nb-ink)!important;
  background:#f2f7ff!important;
  box-shadow:3px 3px 0 #caddef!important;
  font-family:var(--nb-display)!important;
}
body.theme-notebook .yh-context-option:nth-child(even),
body.theme-notebook .yh-odd-option:nth-child(even),
body.theme-notebook .yh-radical-option:nth-child(even){border-color:var(--nb-coral)!important;background:#fff4f6!important;box-shadow-color:#f1c0c8!important}
body.theme-notebook .yh-triple{gap:20px!important}
body.theme-notebook .yh-triple>div{padding:20px!important;border:2px solid var(--nb-teal)!important;border-radius:16px 12px 17px 11px!important;background:#f2fbfa!important}
body.theme-notebook .yhs-prompt{grid-template-columns:1fr!important;padding:28px!important;border-bottom:2px dashed var(--nb-blue)!important;background:#f7fbff!important}
body.theme-notebook .yhs-workbench{padding:28px!important}
body.theme-notebook .yh-sentence-answer,
body.theme-notebook .yh-sentence-pool{min-height:90px!important;padding:18px!important;border:2px dashed var(--nb-teal)!important;border-radius:14px!important;background:#f4fbfa!important}
body.theme-notebook .yh-radical-lesson{padding:clamp(22px,3vw,40px)!important}
body.theme-notebook .yh-radical-symbol{border:2px dashed var(--nb-orange)!important;border-radius:16px!important;background:#fff8e9!important}
body.theme-notebook .yh-radical-hanzi{font-size:clamp(34px,5vw,58px)!important}
body.theme-notebook .yh-hanzi-board{width:min(420px,100%)!important;margin:20px auto!important;border:3px solid var(--nb-blue)!important;border-radius:16px!important;background:#fff!important;box-shadow:4px 4px 0 #ccdef0!important}
body.theme-notebook .yhw-vowel-main{padding:clamp(22px,3vw,38px)!important}
body.theme-notebook .yhw-vowel-letter{border:2px solid var(--nb-blue)!important;border-radius:12px 9px 13px 8px!important;color:var(--nb-ink)!important;background:#f2f7ff!important;box-shadow:3px 3px 0 #caddef!important;font-family:var(--nb-display)!important}
body.theme-notebook .yhw-vowel-letter:nth-child(2n){border-color:var(--nb-coral)!important;background:#fff4f6!important}
body.theme-notebook .yhw-vowel-letter:nth-child(3n){border-color:var(--nb-teal)!important;background:#effaf8!important}
body.theme-notebook .yhw-ws-layout{display:grid!important;grid-template-columns:minmax(320px,1.15fr) minmax(260px,.85fr)!important;gap:24px!important;padding:26px!important}
body.theme-notebook .yhw-ws-grid{padding:10px!important;border:2px solid var(--nb-blue)!important;border-radius:14px!important;background:#f7fbff!important}
body.theme-notebook .yhw-ws-cell{border:1px solid #d6e2ec!important;color:var(--nb-ink)!important;background:#fff!important;font-family:var(--nb-display)!important;font-weight:900!important}
body.theme-notebook .yhw-ws-cell--preview{color:#fff!important;background:var(--nb-coral)!important}
body.theme-notebook .yhw-ws-cell--found{color:#fff!important;background:var(--nb-green)!important}
body.theme-notebook .yhw-ws-wordlist{padding:20px!important;border:2px solid var(--nb-teal)!important;border-radius:14px!important;background:#f2fbfa!important}
body.theme-notebook .yhw-ws-wordlist-item{border:1px dashed var(--nb-teal)!important;border-radius:10px!important;background:#fff!important;font-family:var(--nb-display)!important}
body.theme-notebook .yhw-ws-wordlist-item--found{color:#fff!important;background:var(--nb-green)!important}
body.theme-notebook .yh-inline-status,
body.theme-notebook .yh-context-result,
body.theme-notebook .yh-odd-status,
body.theme-notebook .yh-radical-feedback,
body.theme-notebook .yhs-feedback{border:2px dashed var(--nb-teal)!important;border-radius:12px!important;background:#f2fbfa!important;color:var(--nb-ink)!important;font-family:var(--nb-display)!important}

/* Result modal */
body.theme-notebook .yh-done{background:rgba(23,43,77,.44)!important;backdrop-filter:blur(4px)!important}
body.theme-notebook .yh-done-card{width:min(520px,calc(100% - 28px))!important;max-height:calc(100vh - 28px)!important;overflow:auto!important;border:3px solid var(--nb-blue)!important;border-radius:22px 16px 23px 15px!important;background:var(--nb-paper)!important;box-shadow:8px 9px 0 rgba(23,43,77,.18)!important;font-family:var(--nb-display)!important}
body.theme-notebook .yh-done-mark{color:#fff!important;background:var(--nb-green)!important}

/* Fillin3 keeps its game logic but uses the same visual shell. */
body.theme-notebook .yh-fillin3-main{display:block!important;width:min(1240px,calc(100% - 40px))!important}
body.theme-notebook .yh-fillin3-sidebar{display:none!important}
body.theme-notebook .yh-fillin3-practice{width:100%!important;max-width:none!important}

/* Tablet and phone */
@media (max-width:980px){
  body.theme-notebook .yh-game-header{grid-template-columns:minmax(130px,.85fr) minmax(160px,1fr) minmax(180px,1fr) minmax(130px,.65fr) 48px!important;gap:9px!important;padding:8px 12px!important}
  body.theme-notebook .yh-game-logo{gap:8px!important;font-size:15px!important}
  body.theme-notebook .yh-nav-back-icon,
  body.theme-notebook .yh-game-logo>span:first-child{width:44px!important;height:44px!important;flex-basis:44px!important}
  body.theme-notebook .yh-game-title{font-size:14px!important}
  body.theme-notebook .yh-progress-label{display:none!important}
  body.theme-notebook .yh-game-progress{grid-template-columns:minmax(70px,1fr) auto!important}
  body.theme-notebook.mode-game .yh-game-main{width:min(100% - 24px,1240px)!important;padding-top:24px!important}
  body.theme-notebook .yh-mode-intro{grid-template-columns:78px minmax(0,1fr) 100px!important;gap:16px!important;padding:20px!important}
  body.theme-notebook .yh-mode-number{width:64px!important;height:64px!important;font-size:24px!important}
  body.theme-notebook.mode-flashcard .yh-fc-face{grid-template-columns:minmax(260px,.9fr) minmax(300px,1.1fr)!important;gap:32px!important;padding-right:34px!important;padding-left:34px!important}
  body.theme-notebook.mode-flashcard .yh-game-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.theme-notebook.mode-matching1 .yhw-match-top-grid,
  body.theme-notebook.mode-matching1 .yhw-match-bottom-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:720px){
  body.theme-notebook{background-size:390px 390px!important}
  body.theme-notebook .yh-game-header{
    position:sticky!important;
    grid-template-columns:44px minmax(0,1fr) minmax(96px,.72fr) 44px!important;
    grid-template-areas:"back title score close" "progress progress progress progress"!important;
    min-height:104px!important;
    gap:6px 8px!important;
    padding:7px 10px 8px!important;
  }
  body.theme-notebook .yh-game-logo{grid-area:back!important}
  body.theme-notebook .yh-game-logo-text,
  body.theme-notebook .yh-game-logo>span:last-child{display:none!important}
  body.theme-notebook .yh-game-title{grid-area:title!important;overflow:hidden!important;text-align:left!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  body.theme-notebook .yh-game-progress{grid-area:progress!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important}
  body.theme-notebook .yh-game-score{grid-area:score!important;min-height:42px!important;padding:5px 8px!important;font-size:13px!important}
  body.theme-notebook .yh-score-label{display:none!important}
  body.theme-notebook .yh-game-close{grid-area:close!important;width:44px!important;height:44px!important}
  body.theme-notebook.mode-game .yh-game-main,
  body.theme-notebook.mode-flashcard .yh-game-main,
  body.theme-notebook .yh-fillin3-main{width:calc(100% - 20px)!important;padding:14px 0 72px!important}
  body.theme-notebook .yh-mode-intro{grid-template-columns:58px minmax(0,1fr)!important;min-height:112px!important;gap:12px!important;margin-bottom:14px!important;padding:14px!important}
  body.theme-notebook .yh-mode-number{width:52px!important;height:52px!important;font-size:20px!important}
  body.theme-notebook .yh-mode-copy h1,
  body.theme-notebook .yh-mode-copy h2{font-size:23px!important}
  body.theme-notebook .yh-mode-copy p{margin-top:4px!important;font-size:14px!important}
  body.theme-notebook .yh-mode-count{display:none!important}
  body.theme-notebook .ant-card-body{padding:12px!important}
  body.theme-notebook .yh-game-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-top:14px!important}
  body.theme-notebook .yh-game-actions .btn{width:100%!important;min-width:0!important;padding:8px!important;font-size:14px!important}
  body.theme-notebook .teacher-preview{position:static!important;width:max-content!important;max-width:calc(100% - 20px)!important;margin:-54px 10px 20px auto!important;padding:8px 11px!important;font-size:12px!important}

  body.theme-notebook.mode-flashcard .yh-fc-meta{grid-template-columns:1fr auto!important;min-height:64px!important;margin-bottom:12px!important;padding:10px 12px!important}
  body.theme-notebook.mode-flashcard .yh-fc-counter{gap:8px!important;font-size:15px!important}
  body.theme-notebook.mode-flashcard .yh-fc-counter i{width:28vw!important;height:11px!important}
  body.theme-notebook.mode-flashcard .yh-fc-autoread{width:44px!important;min-width:44px!important;padding:0!important;font-size:0!important}
  body.theme-notebook.mode-flashcard .yh-fc-autoread-dot{width:12px!important;height:12px!important}
  body.theme-notebook.mode-flashcard .yh-fc-fullscreen{display:none!important}
  body.theme-notebook.mode-flashcard .yh-fc-card{height:520px!important}
  body.theme-notebook.mode-flashcard .yh-fc-face{grid-template-columns:1fr!important;grid-template-rows:minmax(220px,1fr) auto!important;gap:14px!important;padding:58px 16px 62px!important;text-align:center!important}
  body.theme-notebook.mode-flashcard .yh-fc-face-label{top:18px!important;left:18px!important;padding:6px 10px!important;font-size:13px!important}
  body.theme-notebook.mode-flashcard .yh-fc-visual{width:min(290px,94%)!important;min-height:220px!important;margin:0 auto!important}
  body.theme-notebook.mode-flashcard .yh-fc-polaroid,
  body.theme-notebook.mode-flashcard .yh-fc-media{min-height:210px!important}
  body.theme-notebook.mode-flashcard .yh-fc-animal{max-width:250px!important;max-height:205px!important}
  body.theme-notebook.mode-flashcard .yh-fc-copy{align-items:center!important;text-align:center!important}
  body.theme-notebook.mode-flashcard .yh-fc-word-title,
  body.theme-notebook.mode-flashcard .yh-fc-copy h2{margin-top:12px!important;font-size:clamp(38px,13vw,52px)!important}
  body.theme-notebook.mode-flashcard .yh-fc-vocab-label{padding:5px 10px!important;font-size:12px!important}
  body.theme-notebook.mode-flashcard .yh-fc-phonetic{margin-top:8px!important;font-size:19px!important}
  body.theme-notebook.mode-flashcard .yh-fc-flip-cue{right:50%!important;bottom:14px!important;transform:translateX(50%)!important;padding:7px 10px!important;font-size:13px!important;white-space:nowrap!important}
  body.theme-notebook.mode-flashcard .yh-game-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:10px!important}
  body.theme-notebook.mode-flashcard .yh-game-actions .btn{min-height:50px!important;font-size:14px!important}
  body.theme-notebook.mode-flashcard .yh-fc-next{grid-column:2!important}

  body.theme-notebook.mode-matching1 .yhw-match-top-section,
  body.theme-notebook.mode-matching1 .yhw-match-bottom-section{padding:10px!important}
  body.theme-notebook.mode-matching1 .yhw-match-top-grid,
  body.theme-notebook.mode-matching1 .yhw-match-bottom-list{gap:8px!important}
  body.theme-notebook.mode-matching1 .yhw-match-top-card{min-height:92px!important;padding:10px!important;font-size:17px!important}
  body.theme-notebook.mode-matching1 .yhw-match-top-main{min-height:42px!important}
  body.theme-notebook.mode-matching1 .yhw-match-bottom-card{min-height:58px!important;padding:8px!important;font-size:14px!important}

  body.theme-notebook .yhw-quiz-grid,
  body.theme-notebook .yh-context-options,
  body.theme-notebook .yh-odd-options,
  body.theme-notebook .yh-radical-options{grid-template-columns:1fr!important}
  body.theme-notebook .yhw-quiz-prompt,
  body.theme-notebook .yhw-unscramble-top,
  body.theme-notebook .yhw-vowel-word-wrapper{min-height:112px!important;padding:16px!important}
  body.theme-notebook .yhw-quiz-option{min-height:62px!important}
  body.theme-notebook .yhw-memory-card-wrapper,
  body.theme-notebook .yhw-match-board-wrapper{padding:10px!important}
  body.theme-notebook .yhw-memory-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  body.theme-notebook .yhw-match-board{grid-template-columns:1fr 1fr!important;gap:8px!important}
  body.theme-notebook .yhw-match-column-center{grid-column:1/-1!important;grid-row:1!important}
  body.theme-notebook .yhw-match-item{min-height:56px!important;padding:8px!important;font-size:14px!important}
  body.theme-notebook .yh-context-main,
  body.theme-notebook .yh-odd-body,
  body.theme-notebook .yh-radical-lesson,
  body.theme-notebook .yhs-workbench{padding:16px!important}
  body.theme-notebook .yh-triple{grid-template-columns:1fr!important}
  body.theme-notebook .yhw-ws-layout{grid-template-columns:1fr!important;gap:12px!important;padding:10px!important}
  body.theme-notebook .yhw-ws-cell{min-width:0!important;font-size:clamp(12px,4vw,17px)!important}
}

@media (max-width:390px){
  body.theme-notebook .yh-game-title{font-size:12px!important}
  body.theme-notebook .yh-game-score{font-size:12px!important}
  body.theme-notebook .yh-mode-copy h1,
  body.theme-notebook .yh-mode-copy h2{font-size:20px!important}
  body.theme-notebook.mode-flashcard .yh-fc-card{height:485px!important}
  body.theme-notebook.mode-flashcard .yh-fc-visual{min-height:195px!important}
  body.theme-notebook.mode-flashcard .yh-fc-polaroid,
  body.theme-notebook.mode-flashcard .yh-fc-media{min-height:185px!important}
  body.theme-notebook.mode-flashcard .yh-fc-animal{max-height:180px!important}
  body.theme-notebook.mode-flashcard .yh-fc-settings{display:none!important}
  body.theme-notebook .yhw-memory-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

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