:root {
  --paper: #f4eddf;
  --paper-deep: #eadcc5;
  --silk: #fffaf0;
  --ink: #211b16;
  --ink-soft: #5d5146;
  --line: #2c2118;
  --line-soft: rgba(44, 33, 24, .24);
  --cinnabar: #a93424;
  --cinnabar-dark: #7f2118;
  --jade: #2f6b57;
  --bluegreen: #315f68;
  --gold: #b88735;
  --rose: #eeb5a5;
  --sun: #f6c36a;
  --shadow: rgba(39, 25, 12, .16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--ink);
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  background:
    radial-gradient(circle at 84% 12%, rgba(246, 195, 106, .32), transparent 20%),
    radial-gradient(circle at 76% 28%, rgba(238, 181, 165, .24), transparent 18%),
    linear-gradient(90deg, rgba(33, 27, 22, .035) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(rgba(33, 27, 22, .025) 1px, transparent 1px) 0 0 / 38px 38px,
    radial-gradient(circle at 18% 16%, rgba(169, 52, 36, .11), transparent 24%),
    linear-gradient(135deg, #f7f1e7 0%, #e9ddc8 48%, #f8f3e8 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: .34;
}

body::before {
  width: 260px;
  height: 520px;
  right: 3vw;
  top: 5vh;
  border-left: 2px solid var(--line);
  background:
    linear-gradient(100deg, transparent 0 46%, var(--line) 47% 48%, transparent 49%) 34px 28px / 86px 112px repeat-y,
    linear-gradient(78deg, transparent 0 44%, var(--line) 45% 46%, transparent 47%) 86px 56px / 92px 126px repeat-y;
  transform: rotate(-4deg);
}

body::after {
  left: 4vw;
  bottom: 5vh;
  width: 240px;
  height: 120px;
  border-bottom: 2px solid var(--line);
  border-radius: 50%;
  box-shadow:
    32px -18px 0 -28px transparent,
    58px -30px 0 -28px transparent,
    86px -44px 0 -28px transparent;
}

.app-shell {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  overflow: hidden;
}

body.auth-checking .app-shell,
body.auth-locked .app-shell {
  visibility: hidden;
  pointer-events: none;
}

body.auth-checking::before,
body.auth-checking::after,
body.auth-locked::before,
body.auth-locked::after {
  display: none;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(rgba(247, 241, 231, .88), rgba(234, 220, 197, .92)),
    radial-gradient(circle at 72% 24%, rgba(246, 195, 106, .34), transparent 26%);
}

.login-card {
  width: min(420px, 100%);
  padding: 24px;
  border: 2px solid var(--line);
  background: rgba(255, 250, 240, .96);
  box-shadow: 8px 8px 0 rgba(44, 33, 24, .14);
}

.login-card h2 {
  margin-top: 12px;
  font-size: 30px;
}

.login-card p {
  margin: 8px 0 18px;
  color: var(--ink-soft);
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}

.login-scene {
  position: relative;
  height: 136px;
  overflow: hidden;
  border: 2px solid var(--line);
  background:
    radial-gradient(circle at 62% 20%, rgba(246, 195, 106, .42), transparent 26%),
    linear-gradient(#fff8e8, #eadcc5);
}

.login-girl {
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 116px;
  transform: translateX(-50%);
  background: transparent;
}

.login-error {
  min-height: 22px;
  color: var(--cinnabar-dark);
  font-weight: 700;
}

.sidebar {
  border-right: 2px solid var(--line);
  padding: 20px;
  background:
    linear-gradient(90deg, rgba(255, 250, 240, .86), rgba(234, 220, 197, .88)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(44, 33, 24, .05) 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 8px 0 24px var(--shadow);
  min-height: 0;
  overflow: auto;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid var(--cinnabar-dark);
  color: var(--cinnabar-dark);
  background: var(--silk);
  font-size: 26px;
  font-weight: 800;
  box-shadow: inset 0 0 0 4px rgba(169, 52, 36, .08);
}

h1, h2, p { margin: 0; }
.brand h1 {
  font-size: 24px;
  letter-spacing: 0;
}
.brand p, .prompt, .field span, .stats span {
  color: var(--ink-soft);
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}

.companion-card {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(255, 250, 240, .82);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 rgba(44, 33, 24, .12);
}

.companion-card strong {
  display: block;
  color: var(--cinnabar-dark);
  font-size: 18px;
  margin-bottom: 4px;
}

.companion-card span {
  color: var(--ink-soft);
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
  line-height: 1.45;
}

.girl-asset {
  display: block;
  object-fit: contain;
  background: var(--silk);
}

.girl-card {
  width: 68px;
  height: 82px;
  border: 2px solid var(--line);
}

.desk-scene {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 231, 139, .55), transparent 34%),
    linear-gradient(#fff8e8, #efdfbf);
  border: 2px solid var(--line);
}

.desk-scene-small {
  width: 68px;
  height: 82px;
}

.desk-scene-small .girl-card {
  position: absolute;
  left: 2px;
  bottom: -7px;
  width: 54px;
  height: 70px;
  border: 0;
  background: transparent;
}

.lamp {
  position: absolute;
  right: 8px;
  top: 10px;
  width: 20px;
  height: 36px;
  border-left: 3px solid var(--line);
  z-index: 3;
}

.lamp::before {
  content: "";
  position: absolute;
  right: -8px;
  top: -4px;
  width: 22px;
  height: 15px;
  border: 2px solid var(--line);
  border-radius: 12px 12px 5px 5px;
  background: var(--sun);
  animation: lampShade 3.8s ease-in-out infinite;
}

.lamp::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 8px;
  width: 48px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 223, 116, .58), transparent 66%);
  animation: lampGlow 3.8s ease-in-out infinite;
  z-index: -1;
}

.lamp-small {
  right: 4px;
  top: 8px;
  transform: scale(.76);
}

.doll {
  position: relative;
  width: 68px;
  height: 82px;
  border: 2px solid var(--line);
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .62), transparent 28%),
    linear-gradient(#fff9e8, #f2dfb9);
  overflow: hidden;
}

.doll-head {
  position: absolute;
  left: 15px;
  top: 13px;
  width: 36px;
  height: 34px;
  border: 2px solid var(--line);
  border-radius: 48% 48% 45% 45%;
  background: #f3b486;
  z-index: 3;
}

.doll-head::before,
.doll-head::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

.doll-head::before { left: 8px; }
.doll-head::after { right: 8px; }

.doll-head i {
  position: absolute;
  left: 13px;
  bottom: 5px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid #a84a35;
  border-radius: 50%;
}

.doll-head i::before,
.doll-head i::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: rgba(230, 91, 89, .32);
}

.doll-head i::before { left: -10px; }
.doll-head i::after { right: -10px; }

.doll-head::marker { display: none; }

.doll::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 9px;
  width: 42px;
  height: 20px;
  border-radius: 50% 50% 30% 30%;
  background: #3a2418;
  z-index: 4;
  box-shadow: inset 0 -4px 0 rgba(255, 255, 255, .08);
}

.doll-hair {
  position: absolute;
  top: 22px;
  width: 21px;
  height: 15px;
  border: 2px solid var(--line);
  background: repeating-linear-gradient(90deg, #2a190f 0 3px, #4b3022 3px 5px);
  z-index: 2;
}

.doll-hair.left {
  left: 1px;
  border-radius: 60% 30% 60% 40%;
  transform: rotate(-12deg);
}

.doll-hair.right {
  right: 1px;
  border-radius: 30% 60% 40% 60%;
  transform: rotate(12deg);
}

.doll-body {
  position: absolute;
  left: 18px;
  top: 47px;
  width: 32px;
  height: 32px;
  border: 2px solid var(--line);
  border-radius: 12px 12px 8px 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 7px 100%,
    #f2dc77;
  z-index: 2;
}

.doll-body::before,
.doll-body::after {
  content: "";
  position: absolute;
  bottom: -14px;
  width: 12px;
  height: 16px;
  border: 2px solid var(--line);
  background: #f3b486;
}

.doll-body::before { left: 5px; }
.doll-body::after { right: 5px; }

.doll-card {
  box-shadow: inset 0 0 0 4px rgba(169, 52, 36, .06);
}

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.stats div,
.panel,
.card-content,
select,
input,
textarea {
  background: rgba(255, 250, 240, .92);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 rgba(44, 33, 24, .12);
}

.stats div {
  padding: 9px;
  position: relative;
}

.stats div::after,
.panel::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}

.stats strong {
  display: block;
  color: var(--cinnabar-dark);
  font-size: 21px;
  margin-bottom: 2px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

select,
input,
textarea {
  width: 100%;
  color: var(--ink);
  border-radius: 0;
  padding: 10px 12px;
  font: inherit;
}

select:focus,
input:focus,
textarea:focus {
  outline: 3px solid rgba(169, 52, 36, .24);
}

textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.7;
}

button {
  border: 2px solid var(--line);
  color: var(--silk);
  border-radius: 0;
  padding: 12px 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(44, 33, 24, .18);
}

button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(44, 33, 24, .2);
}

.primary { background: var(--cinnabar); }
.secondary { background: var(--bluegreen); }
.danger { background: #8f2f28; }
.warn { background: var(--gold); color: #24170b; }
.good { background: var(--jade); }
.easy { background: #1f5a42; }
button span {
  display: block;
  font-size: 12px;
  opacity: .82;
  margin-top: 3px;
}

.main {
  height: 100vh;
  min-width: 0;
  padding: 20px;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 980px);
  grid-auto-rows: min-content;
  justify-content: center;
  align-content: start;
  gap: 14px;
}

.panel {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px;
}

#review-view {
  grid-column: 1 / -1;
}

body.study-mode .main {
  display: block;
}

.view-switch {
  display: flex;
  gap: 8px;
  width: 100%;
}

.view-tab {
  flex: 0 0 auto;
  min-width: 112px;
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(255, 250, 240, .76);
}

.view-tab.active {
  color: var(--silk);
  background: var(--cinnabar);
}

body.study-mode .view-switch {
  display: none;
}

.welcome-scene {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}

.welcome-scene h2,
.panel-heading h2 {
  margin-bottom: 8px;
}

.garden-study {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 2px solid var(--line);
  box-shadow: 6px 6px 0 rgba(44, 33, 24, .14);
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 238, 168, .94), rgba(255, 215, 130, .28) 22%, transparent 38%),
    linear-gradient(180deg, #f8d5b5 0%, #f7ead1 46%, #b4c88b 47%, #738c53 100%);
}

.sun-glow {
  position: absolute;
  right: -26px;
  top: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 188, .95), rgba(247, 175, 84, .18) 58%, transparent 70%);
}

.rose-arch {
  position: absolute;
  right: 14px;
  top: 24px;
  width: 128px;
  height: 116px;
  border: 10px solid rgba(69, 94, 46, .68);
  border-bottom: 0;
  border-radius: 88px 88px 0 0;
}

.rose-arch::before,
.rose-arch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #f7c6bc 0 32%, #d26f70 34% 58%, #8c4b37 60%);
  box-shadow:
    -28px 8px 0 #eba9a0,
    22px 18px 0 #f0b1a8,
    -10px 38px 0 #d98484,
    34px 48px 0 #efb5a4;
}

.rose-arch::before { left: 10px; top: -10px; }
.rose-arch::after { right: 18px; top: 8px; }

.study-book {
  position: absolute;
  left: 104px;
  bottom: 30px;
  width: 82px;
  height: 34px;
  border: 2px solid var(--line);
  background: linear-gradient(90deg, #fff6dd 0 49%, var(--line) 50% 51%, #fff6dd 52%);
  transform: rotate(-5deg);
  box-shadow: 3px 4px 0 rgba(44, 33, 24, .14);
}

.writing-pencil {
  position: absolute;
  left: 150px;
  bottom: 58px;
  width: 46px;
  height: 6px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, #d97745 0 74%, #f7e5b7 75% 88%, #33221a 89%);
  transform: rotate(-8deg);
  transform-origin: 8px 50%;
  animation: pencilWrite 1.35s ease-in-out infinite;
  z-index: 4;
}

.doll-garden,
.girl-garden {
  position: absolute;
  left: 34px;
  bottom: 14px;
  width: 92px;
  height: 118px;
  transform: rotate(-3deg);
  transform-origin: bottom left;
  background: transparent;
  border: 0;
}

.flower {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6ce 0 22%, #ef9f95 24% 54%, #bf5b5c 56%);
  box-shadow:
    0 18px 0 -8px #4c6f3e,
    0 34px 0 -9px #38572f;
}

.flower-a { left: 205px; bottom: 64px; }
.flower-b { left: 229px; bottom: 38px; transform: scale(.82); }
.flower-c { left: 24px; bottom: 72px; transform: scale(.7); }

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.compact {
  padding: 8px 12px;
  min-width: 74px;
}

.progress-panel {
  margin-top: 0;
}

.progress-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
}

.progress-layout h3,
.weak-list h3 {
  margin: 0 0 10px;
  color: var(--cinnabar-dark);
  font-size: 18px;
}

.bar-chart,
.line-chart {
  min-height: 132px;
  background: rgba(255, 250, 240, .62);
  border: 2px solid var(--line);
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 6px;
  align-items: end;
  padding: 12px 10px 8px;
}

.bar-item {
  display: grid;
  grid-template-rows: 88px 24px;
  gap: 6px;
  min-width: 0;
}

.bar-track {
  position: relative;
  align-self: end;
  height: 100%;
  border: 1px solid var(--line-soft);
  background: rgba(234, 220, 197, .65);
}

.bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, var(--rose), var(--cinnabar));
}

.bar-item span {
  color: var(--ink-soft);
  font-size: 11px;
  text-align: center;
  writing-mode: vertical-rl;
  justify-self: center;
}

.line-chart {
  width: 100%;
  height: 132px;
  padding: 4px;
}

.chart-axis {
  stroke: rgba(44, 33, 24, .35);
  stroke-width: 1.5;
}

.chart-line {
  fill: none;
  stroke: var(--jade);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-dot {
  fill: var(--sun);
  stroke: var(--line);
  stroke-width: 1.5;
}

.chart-label {
  fill: var(--ink-soft);
  font-size: 11px;
}

.progress-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.progress-summary div {
  border: 2px solid var(--line);
  background: rgba(255, 250, 240, .72);
  padding: 10px;
}

.progress-summary strong {
  display: block;
  color: var(--cinnabar-dark);
  font-size: 22px;
}

.progress-summary span {
  color: var(--ink-soft);
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}

.weak-list {
  margin-top: 12px;
  max-height: 132px;
  overflow: auto;
}

.weak-list p {
  color: var(--ink-soft);
  line-height: 1.7;
}

.weak-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 76px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px dashed var(--line-soft);
}

.weak-item strong,
.weak-item em {
  color: var(--cinnabar-dark);
  font-style: normal;
}

.weak-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden { display: none !important; }

.review-top {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  margin-bottom: 14px;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}

.review-companion {
  float: right;
  width: 154px;
  margin: 0 0 14px 18px;
  padding: 10px;
  border: 2px solid var(--line);
  background: rgba(255, 250, 240, .86);
  box-shadow: 4px 4px 0 rgba(44, 33, 24, .12);
}

.review-companion .doll-mini,
.review-companion .girl-mini {
  display: block;
  width: 100%;
  height: 92px;
  border: 0;
  background: transparent;
}

.review-desk {
  width: 100%;
  height: 116px;
}

.review-desk .girl-mini {
  position: absolute;
  left: 4px;
  bottom: -4px;
  width: 78px;
  height: 100px;
}

.tiny-paper {
  position: absolute;
  left: 82px;
  bottom: 18px;
  width: 50px;
  height: 28px;
  border: 2px solid var(--line);
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 8px 8px / 34px 8px,
    #fff9e8;
  transform: rotate(-2deg);
}

.tiny-pen {
  position: absolute;
  left: 108px;
  bottom: 35px;
  width: 34px;
  height: 5px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, #b64f36 0 75%, #eed9ad 76% 88%, #231813 89%);
  transform: rotate(-16deg);
  animation: pencilWrite 1.3s ease-in-out infinite;
}

.review-companion span {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
  line-height: 1.45;
}

.progress {
  height: 9px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 24px;
}

#progress-fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--cinnabar) 0 16px, var(--gold) 16px 24px);
}

#card-question {
  font-size: 26px;
  line-height: 1.45;
  margin-bottom: 10px;
}

.prompt {
  margin-bottom: 22px;
}

.card-content {
  padding: 22px;
  margin-bottom: 18px;
  max-height: 42vh;
  min-height: 180px;
  overflow: auto;
  line-height: 1.85;
  font-size: 17px;
}

.card-content h3 {
  margin: 0 0 14px;
  color: var(--cinnabar-dark);
  font-size: 22px;
}

.study-mode-badge {
  display: inline-block;
  margin: 0 10px 8px 0;
  padding: 3px 8px;
  border: 2px solid var(--cinnabar-dark);
  color: var(--cinnabar-dark);
  background: rgba(169, 52, 36, .08);
  font-size: 15px;
  line-height: 1.3;
  vertical-align: middle;
}

.card-content h4 {
  margin: 18px 0 8px;
  padding-left: 10px;
  border-left: 4px solid var(--cinnabar);
  font-size: 18px;
}

.card-content ul {
  margin: 6px 0 10px;
  padding-left: 22px;
}

.card-content li {
  margin: 4px 0;
}

.md-quote {
  color: var(--ink-soft);
  background: rgba(234, 220, 197, .55);
  border-left: 3px solid var(--gold);
  padding: 8px 10px;
}

.md-table-wrap {
  width: 100%;
  overflow: auto;
  margin: 14px 0;
  border: 2px solid var(--line);
  background: rgba(255, 250, 240, .78);
}

.md-table {
  width: max(980px, 100%);
  border-collapse: collapse;
  font-size: 17px;
  line-height: 1.5;
}

.md-table th,
.md-table td {
  vertical-align: top;
  text-align: left;
  border: 1px solid var(--line-soft);
  padding: 10px;
}

.md-table th {
  color: var(--cinnabar-dark);
  background: rgba(169, 52, 36, .08);
}

.answer {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px dashed var(--line-soft);
}

.revealed .answer { display: block; }

.cloze {
  display: inline-block;
  min-width: 72px;
  min-height: 1.4em;
  background:
    repeating-linear-gradient(-8deg, #30241c 0 5px, #46372b 5px 9px);
  color: transparent;
  padding: 0 8px;
  margin: 0 3px;
  cursor: pointer;
  position: relative;
}

.cloze::after {
  content: "墨";
  color: rgba(255, 250, 240, .76);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
}

.cloze.open {
  background: transparent;
  color: var(--cinnabar-dark);
  padding: 0;
  font-weight: 800;
}

.cloze.open::after { display: none; }

.mnemonic-hint {
  display: inline-block;
  margin: 3px 4px;
  padding: 2px 8px;
  color: var(--cinnabar-dark);
  background: rgba(246, 195, 106, .22);
  border: 1px dashed rgba(127, 33, 24, .5);
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}

.mnemonic-hint .cloze {
  margin-left: 2px;
}

.mnemonic-hint strong {
  margin-right: 6px;
  color: var(--jade);
}

.pdf-frame {
  width: 100%;
  height: 54vh;
  border: 2px solid var(--line);
  background: white;
  box-shadow: inset 0 0 0 5px rgba(44, 33, 24, .08);
}

.image-cover {
  background: rgba(234, 220, 197, .76);
  border: 2px dashed var(--line);
  padding: 20px;
  margin-bottom: 14px;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}

.actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 860px) {
  body {
    overflow: auto;
  }
  .app-shell {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .sidebar {
    border-right: 0;
    border-bottom: 2px solid var(--line);
    max-height: none;
    overflow: visible;
  }
  .stats {
    grid-template-columns: repeat(5, minmax(64px, 1fr));
    overflow-x: auto;
  }
  .main {
    height: auto;
    padding: 16px;
    overflow: visible;
    grid-template-columns: 1fr;
  }
  .panel { padding: 22px; }
  .review-companion {
    float: none;
    width: 100%;
    margin: 0 0 14px;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 10px;
    align-items: center;
  }
  .review-companion .doll-mini,
  .review-companion .girl-mini {
    height: 86px;
  }
  .review-companion span {
    margin-top: 0;
  }
  .welcome-scene,
  .progress-layout,
  .weak-item {
    grid-template-columns: 1fr;
  }
  .garden-study { max-height: 220px; }
  .progress-summary {
    grid-template-columns: 1fr;
  }
  .actions { grid-template-columns: repeat(2, 1fr); }
  .card-content {
    max-height: none;
  }
  .pdf-frame { height: 480px; }
}

@keyframes lampGlow {
  0%, 100% { opacity: .2; transform: scale(.88); }
  42% { opacity: .82; transform: scale(1.08); }
  58% { opacity: .42; transform: scale(.98); }
}

@keyframes lampShade {
  0%, 100% { background: #b98742; }
  42% { background: var(--sun); }
  58% { background: #d99a4b; }
}

@keyframes pencilWrite {
  0%, 100% { transform: translateX(0) rotate(-12deg); }
  45% { transform: translateX(13px) translateY(2px) rotate(-7deg); }
  70% { transform: translateX(7px) translateY(-1px) rotate(-17deg); }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .main {
    grid-template-columns: 1fr;
  }
}