:root {
  --forest-deep: #124c3d;
  --forest-light: #c9f3d4;
  --sky: #f6f5ef;
  --sun: #ffdf8f;
  --river: #a8d8ff;
  --stone: #231f1a;
  --bg-body: linear-gradient(180deg, #fef6dd 0%, #f1f8f4 100%);
  --bg-forest: radial-gradient(circle at top, #fef6dd 0%, #e2f4ea 50%, #c8e5d5 100%);
  --bg-sky: linear-gradient(135deg, #fef6dd 0%, #f5f9f0 40%, #e3f1ff 100%);
  --bg-map: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9), transparent 50%),
    linear-gradient(135deg, #d2f1e0, #fef3d5 70%);
  --map-shadow: rgba(18, 76, 61, 0.15);
  --accent: #1b6b55;
  --accent-strong: #2a8c6b;
  --accent-contrast: #fff7e1;
  --accent-shadow: rgba(27, 107, 85, 0.25);
  --badge-bg: #1b6b55;
  --badge-text: #fef6dd;
  --badge-shadow: rgba(27, 107, 85, 0.25);
  --pill-bg: rgba(27, 107, 85, 0.1);
  --pill-text: #1b6b55;
  --warm-bg: rgba(255, 223, 143, 0.6);
  --warm-text: #865c00;
  --btn-ghost-bg: rgba(255, 255, 255, 0.6);
  --btn-ghost-border: rgba(27, 107, 85, 0.4);
  --tag-text: #1b6b55;
}

html {
  font-size: 22px;
}

body {
  font-family: Verdana, "Ma Shan Zheng", "ZCOOL KuaiLe", cursive;
  background: var(--bg-body);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

* {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
[contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}

.copy-enabled,
.copy-enabled * {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

.font-title {
  font-family: Verdana, "ZCOOL KuaiLe", cursive;
}

.font-display {
  font-family: Verdana, "Ma Shan Zheng", cursive;
}

.bg-forest {
  background: var(--bg-forest);
}

.bg-sky {
  background: var(--bg-sky);
}

.bg-map {
  background: var(--bg-map);
  box-shadow: 0 20px 60px var(--map-shadow);
}

.badge-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 1.5rem;
  box-shadow: 0 10px 20px var(--badge-shadow);
}

.pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 0.75rem;
  color: var(--pill-text);
  text-transform: uppercase;
  letter-spacing: 0.25em;
}

.pill-warm {
  background: var(--warm-bg);
  color: var(--warm-text);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-strong));
  color: var(--accent-contrast);
  font-size: 0.95rem;
  box-shadow: 0 12px 24px var(--accent-shadow);
  transition: transform 0.2s ease;
}

.adaptive-math-app { display: grid; gap: 1rem; }
.adaptive-math-question { background: rgba(255,255,255,.88); }
.adaptive-math-meta { color: #1b6b55; font-size: .8rem; }
.adaptive-math-prompt { margin-top: .75rem; }
.adaptive-math-canvas { display: block; width: min(100%, 800px); height: 200px; margin: 1rem auto .25rem; border: 1px solid rgba(27,107,85,.18); border-radius: 12px; background: rgba(246,250,247,.9); }
.adaptive-math-options { display: grid; gap: .7rem; margin-top: 1.25rem; }
.adaptive-math-option { text-align: left; }
.adaptive-math-answer-form { display: flex; gap: .7rem; align-items: center; margin-top: 1.25rem; }
.adaptive-math-answer { width: min(12rem, 100%); padding: .7rem .8rem; border: 1px solid rgba(27,107,85,.3); border-radius: .5rem; font-size: 1rem; }
.adaptive-math-feedback { margin-top: 1rem; color: #1b6b55; font-size: .9rem; }
.adaptive-math-next { margin-top: .9rem; font-size: .85rem; }
.adaptive-math-stats { margin-top: .75rem; color: rgba(23,63,51,.75); font-size: .9rem; }
.adaptive-math-help { margin-top: .35rem; color: rgba(23,63,51,.58); font-size: .72rem; line-height: 1.5; }
.adaptive-math-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; }
.adaptive-math-period { min-width: 0; display: grid; gap: .18rem; padding: .65rem; border: 1px solid rgba(27,107,85,.15); border-radius: .45rem; background: rgba(248,250,249,.9); color: rgba(23,63,51,.72); font-size: .72rem; }
.adaptive-math-period strong { color: #176b55; font-size: .82rem; }
.adaptive-math-period small { color: rgba(23,63,51,.55); }
.adaptive-math-rest { margin-top: .75rem; padding: .7rem; border-radius: 1rem; background: #fff0bd; color: #865c00; }
.adaptive-math-rest-done { margin-left: .75rem; padding: .35rem .7rem; font-size: .75rem; }
.adaptive-math-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .6rem; margin-top: 1rem; }
.adaptive-math-row { aspect-ratio: 1 / 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: .55rem; padding: .7rem; border: 1px solid transparent; border-radius: .45rem; background: var(--tile-bg); border-color: var(--tile-border); color: var(--tile-text); font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.adaptive-math-row > span:first-child { font-weight: 700; color: var(--tile-title); }
.adaptive-math-row > span:last-child { margin-top: auto; }
.adaptive-math-row.is-new { --tile-bg: #f1f2f3; --tile-border: #c5c9ce; --tile-title: #59616b; --tile-text: #626a73; }
.adaptive-math-row.is-starting { --tile-bg: #fff3d9; --tile-border: #e2b45c; --tile-title: #80520a; --tile-text: #674718; }
.adaptive-math-row.is-progressing { --tile-bg: #f0e8fa; --tile-border: #b38bd3; --tile-title: #70408e; --tile-text: #624178; }
.adaptive-math-row.is-mastered { --tile-bg: #e5f5e9; --tile-border: #78b98a; --tile-title: #24643a; --tile-text: #315b3d; }
@media (max-width: 480px) { .adaptive-math-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adaptive-math-row { padding: .6rem; font-size: .72rem; } }
@media (max-width: 480px) { .adaptive-math-periods { grid-template-columns: 1fr; } }
.adaptive-math-events { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(27,107,85,.18); font-size: .8rem; color: rgba(23,63,51,.78); }
.adaptive-math-events p { margin-top: .35rem; }
.adaptive-math-events-help { margin-top: .3rem; color: rgba(23,63,51,.58); font-size: .72rem; line-height: 1.5; }
.adaptive-math-event-level { display: inline-block; margin-left: .25rem; color: #70408e; font-size: .7rem; font-weight: 700; }
.adaptive-math-board-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.adaptive-math-legend { display: flex; align-items: center; gap: .55rem .8rem; flex-wrap: wrap; color: rgba(23,63,51,.72); font-size: .7rem; }
.adaptive-math-legend span { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.adaptive-math-legend-swatch { width: .7rem; height: .7rem; display: inline-block; border: 1px solid; border-radius: .15rem; }
.adaptive-math-legend-swatch.is-new { background: #f1f2f3; border-color: #c5c9ce; }
.adaptive-math-legend-swatch.is-starting { background: #fff3d9; border-color: #e2b45c; }
.adaptive-math-legend-swatch.is-progressing { background: #f0e8fa; border-color: #b38bd3; }
.adaptive-math-legend-swatch.is-mastered { background: #e5f5e9; border-color: #78b98a; }

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px dashed var(--btn-ghost-border);
  color: var(--accent);
  font-size: 0.9rem;
  background: var(--btn-ghost-bg);
}

.tag {
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  color: var(--tag-text);
}

body.theme-1 {
  --bg-body: linear-gradient(180deg, #fef6dd 0%, #f1f8f4 100%);
  --bg-forest: radial-gradient(circle at top, #fef6dd 0%, #e2f4ea 50%, #c8e5d5 100%);
  --bg-sky: linear-gradient(135deg, #fef6dd 0%, #f5f9f0 40%, #e3f1ff 100%);
  --bg-map: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9), transparent 50%),
    linear-gradient(135deg, #d2f1e0, #fef3d5 70%);
  --accent: #1b6b55;
  --accent-strong: #2a8c6b;
  --accent-contrast: #fff7e1;
  --accent-shadow: rgba(27, 107, 85, 0.25);
  --badge-bg: #1b6b55;
  --badge-text: #fef6dd;
  --badge-shadow: rgba(27, 107, 85, 0.25);
  --pill-bg: rgba(27, 107, 85, 0.1);
  --pill-text: #1b6b55;
  --warm-bg: rgba(255, 223, 143, 0.6);
  --warm-text: #865c00;
  --btn-ghost-bg: rgba(255, 255, 255, 0.6);
  --btn-ghost-border: rgba(27, 107, 85, 0.4);
  --tag-text: #1b6b55;
  --map-shadow: rgba(18, 76, 61, 0.15);
}

body.theme-2 {
  --bg-body: linear-gradient(180deg, #fff2e0 0%, #e9f7ff 100%);
  --bg-forest: radial-gradient(circle at top, #fff3db 0%, #e8f7ff 55%, #cfe8ff 100%);
  --bg-sky: linear-gradient(135deg, #fff1dd 0%, #f8fbff 45%, #d9f0ff 100%);
  --bg-map: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.92), transparent 55%),
    linear-gradient(135deg, #d6f0ff, #ffe8b8 70%);
  --accent: #1e6aa8;
  --accent-strong: #2c7fc7;
  --accent-contrast: #fffaf1;
  --accent-shadow: rgba(30, 106, 168, 0.25);
  --badge-bg: #1e6aa8;
  --badge-text: #fef6dd;
  --badge-shadow: rgba(30, 106, 168, 0.25);
  --pill-bg: rgba(30, 106, 168, 0.1);
  --pill-text: #1e6aa8;
  --warm-bg: rgba(255, 216, 130, 0.7);
  --warm-text: #8a5a00;
  --btn-ghost-bg: rgba(255, 255, 255, 0.7);
  --btn-ghost-border: rgba(30, 106, 168, 0.4);
  --tag-text: #1e6aa8;
  --map-shadow: rgba(30, 106, 168, 0.18);
}

body.theme-3 {
  --bg-body: linear-gradient(180deg, #ffe9df 0%, #f4f9ef 100%);
  --bg-forest: radial-gradient(circle at top, #ffe9df 0%, #f4f9ef 50%, #d7f0d8 100%);
  --bg-sky: linear-gradient(135deg, #ffe0cb 0%, #f8f7f0 45%, #d9f5f6 100%);
  --bg-map: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.92), transparent 55%),
    linear-gradient(135deg, #d3f0ed, #ffd5b3 70%);
  --accent: #b24f2b;
  --accent-strong: #d0663f;
  --accent-contrast: #fff7ea;
  --accent-shadow: rgba(178, 79, 43, 0.25);
  --badge-bg: #b24f2b;
  --badge-text: #fff4e6;
  --badge-shadow: rgba(178, 79, 43, 0.25);
  --pill-bg: rgba(178, 79, 43, 0.12);
  --pill-text: #b24f2b;
  --warm-bg: rgba(255, 210, 160, 0.7);
  --warm-text: #7a3a1e;
  --btn-ghost-bg: rgba(255, 255, 255, 0.7);
  --btn-ghost-border: rgba(178, 79, 43, 0.4);
  --tag-text: #b24f2b;
  --map-shadow: rgba(178, 79, 43, 0.18);
}

body.theme-4 {
  --bg-body: linear-gradient(180deg, #f3ffef 0%, #f0f2ff 100%);
  --bg-forest: radial-gradient(circle at top, #f6ffe8 0%, #eaf7f0 55%, #d2e9ff 100%);
  --bg-sky: linear-gradient(135deg, #f6ffe8 0%, #f4f8ff 45%, #e0ecff 100%);
  --bg-map: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9), transparent 55%),
    linear-gradient(135deg, #d4f1e7, #e5dcff 70%);
  --accent: #1f7a6a;
  --accent-strong: #2b9b88;
  --accent-contrast: #f9fff4;
  --accent-shadow: rgba(31, 122, 106, 0.25);
  --badge-bg: #1f7a6a;
  --badge-text: #f6fff1;
  --badge-shadow: rgba(31, 122, 106, 0.25);
  --pill-bg: rgba(31, 122, 106, 0.12);
  --pill-text: #1f7a6a;
  --warm-bg: rgba(255, 227, 157, 0.7);
  --warm-text: #7a5a00;
  --btn-ghost-bg: rgba(255, 255, 255, 0.7);
  --btn-ghost-border: rgba(31, 122, 106, 0.4);
  --tag-text: #1f7a6a;
  --map-shadow: rgba(31, 122, 106, 0.18);
}

body.theme-5 {
  --bg-body: linear-gradient(180deg, #fff5d8 0%, #eef7e5 100%);
  --bg-forest: radial-gradient(circle at top, #fff5d8 0%, #eaf6e8 55%, #cfe9d9 100%);
  --bg-sky: linear-gradient(135deg, #fff1c8 0%, #f6f9ed 45%, #d8f2ea 100%);
  --bg-map: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.92), transparent 55%),
    linear-gradient(135deg, #d8f0e4, #ffe0a8 70%);
  --accent: #7b5a1d;
  --accent-strong: #a0732a;
  --accent-contrast: #fffaf0;
  --accent-shadow: rgba(123, 90, 29, 0.25);
  --badge-bg: #7b5a1d;
  --badge-text: #fff7e5;
  --badge-shadow: rgba(123, 90, 29, 0.25);
  --pill-bg: rgba(123, 90, 29, 0.12);
  --pill-text: #7b5a1d;
  --warm-bg: rgba(255, 215, 130, 0.7);
  --warm-text: #6e4b00;
  --btn-ghost-bg: rgba(255, 255, 255, 0.7);
  --btn-ghost-border: rgba(123, 90, 29, 0.4);
  --tag-text: #7b5a1d;
  --map-shadow: rgba(123, 90, 29, 0.18);
}

body.theme-6 {
  --bg-body: linear-gradient(180deg, #e9fff7 0%, #eaf1ff 100%);
  --bg-forest: radial-gradient(circle at top, #e9fff7 0%, #e4f8f4 55%, #d5ecff 100%);
  --bg-sky: linear-gradient(135deg, #e9fff7 0%, #eff7ff 45%, #d9f1ff 100%);
  --bg-map: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.92), transparent 55%),
    linear-gradient(135deg, #d6f6f2, #cfe5ff 70%);
  --accent: #2a7f8a;
  --accent-strong: #3aa3aa;
  --accent-contrast: #f4fffb;
  --accent-shadow: rgba(42, 127, 138, 0.25);
  --badge-bg: #2a7f8a;
  --badge-text: #f0fffb;
  --badge-shadow: rgba(42, 127, 138, 0.25);
  --pill-bg: rgba(42, 127, 138, 0.12);
  --pill-text: #2a7f8a;
  --warm-bg: rgba(255, 220, 160, 0.7);
  --warm-text: #7b4f00;
  --btn-ghost-bg: rgba(255, 255, 255, 0.7);
  --btn-ghost-border: rgba(42, 127, 138, 0.4);
  --tag-text: #2a7f8a;
  --map-shadow: rgba(42, 127, 138, 0.18);
}

body.theme-7 {
  --bg-body: linear-gradient(180deg, #fff0ea 0%, #f2f7ff 100%);
  --bg-forest: radial-gradient(circle at top, #fff0ea 0%, #f3f6ff 55%, #dbe9ff 100%);
  --bg-sky: linear-gradient(135deg, #ffe7dc 0%, #f6f7ff 45%, #d6e9ff 100%);
  --bg-map: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.92), transparent 55%),
    linear-gradient(135deg, #dceefc, #ffd3c2 70%);
  --accent: #984b3a;
  --accent-strong: #b8644a;
  --accent-contrast: #fff7f2;
  --accent-shadow: rgba(152, 75, 58, 0.25);
  --badge-bg: #984b3a;
  --badge-text: #fff1e6;
  --badge-shadow: rgba(152, 75, 58, 0.25);
  --pill-bg: rgba(152, 75, 58, 0.12);
  --pill-text: #984b3a;
  --warm-bg: rgba(255, 210, 150, 0.7);
  --warm-text: #7a3f2b;
  --btn-ghost-bg: rgba(255, 255, 255, 0.7);
  --btn-ghost-border: rgba(152, 75, 58, 0.4);
  --tag-text: #984b3a;
  --map-shadow: rgba(152, 75, 58, 0.18);
}

.card-panel {
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 20px 40px rgba(18, 76, 61, 0.12);
  backdrop-filter: blur(8px);
}

.reward-pet {
  margin-top: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 12px;
  position: relative;
  overflow: visible;
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 247, 230, 0.85));
  border: 1px solid rgba(152, 75, 58, 0.18);
  box-shadow: 0 12px 24px rgba(152, 75, 58, 0.12);
}

.reward-pet-media {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.bunny-fruits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 40px;
  align-items: center;
  font-size: 20px;
}

.bunny-menu {
  position: absolute;
  top: 72px;
  left: 0;
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(152, 75, 58, 0.2);
  box-shadow: 0 14px 28px rgba(152, 75, 58, 0.16);
  z-index: 50;
  max-height: 220px;
  overflow-y: auto;
}

.bunny-menu::-webkit-scrollbar {
  width: 6px;
}

.bunny-menu::-webkit-scrollbar-thumb {
  background: rgba(152, 75, 58, 0.35);
  border-radius: 999px;
}

.bunny-menu::-webkit-scrollbar-track {
  background: transparent;
}

.bunny-menu.hidden {
  display: none;
}

.bunny-menu-item {
  border: none;
  border-radius: 12px;
  padding: 6px 10px;
  background: rgba(255, 233, 213, 0.7);
  color: #7a3f2b;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bunny-menu-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(152, 75, 58, 0.12);
}

.bunny-button {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 24px;
  overflow: hidden;
  border: none;
  background: radial-gradient(circle at 35% 35%, #fff9f1 0%, #ffe4cc 70%);
  box-shadow: inset 0 0 0 1px rgba(152, 75, 58, 0.2),
    0 10px 18px rgba(152, 75, 58, 0.18);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bunny-button:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: inset 0 0 0 1px rgba(152, 75, 58, 0.25),
    0 14px 22px rgba(152, 75, 58, 0.2);
}

.bunny-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(152, 75, 58, 0.15);
}

.bunny-button:active {
  transform: translateY(0) scale(0.98);
}

.bunny-avatar {
  display: block;
  width: 100px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  animation: bunny-bounce 2.6s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

.bunny-button.feeding .bunny-avatar {
  animation: bunny-munch 0.8s ease-in-out 2;
}

.bunny-spark {
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  border: 1px dashed rgba(152, 75, 58, 0.28);
  opacity: 0.5;
  animation: bunny-spin 7s linear infinite;
}

.reward-pet-info {
  display: grid;
  gap: 4px;
}

.bunny-status {
  transition: color 0.2s ease;
}

.bunny-status.bunny-status-locked {
  color: #b23a3a !important;
}

.bunny-status.bunny-status-ready {
  color: #1f7a5f !important;
}

.bunny-status.bunny-status-warn {
  color: #b26a2c !important;
}

@keyframes bunny-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-6px);
  }
}

@keyframes bunny-munch {
  0%,
  100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.08);
  }
  65% {
    transform: scale(0.94);
  }
}

@keyframes bunny-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mission-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(27, 107, 85, 0.12);
  box-shadow: 0 12px 30px rgba(18, 76, 61, 0.1);
}

.node-layout {
  grid-template-columns: 1fr;
}

.node-sidebar {
  justify-self: stretch;
}

.reading-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reading-history-refresh {
  border: 1px solid rgba(27, 107, 85, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 4px 9px;
  color: #1b6b55;
  font-size: 0.72rem;
  font-weight: 700;
}

.reading-history-list {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  max-height: 520px;
  overflow-y: auto;
}

.reading-history-item {
  width: 100%;
  border: 1px solid rgba(27, 107, 85, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  padding: 7px 9px;
  color: #173f33;
  text-align: left;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.reading-history-item:hover,
.reading-history-item.is-active {
  border-color: rgba(27, 107, 85, 0.38);
  background: rgba(232, 247, 238, 0.96);
}

.reading-history-item.is-active {
  box-shadow: inset 3px 0 0 rgba(27, 107, 85, 0.82);
}

.reading-history-date,
.reading-history-title,
.reading-history-meta {
  display: block;
}

.reading-history-date {
  font-size: 0.62rem;
  color: rgba(23, 63, 51, 0.62);
}

.reading-history-title {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
}

.reading-history-meta,
.reading-history-empty,
.reading-history-error {
  margin-top: 4px;
  font-size: 0.62rem;
  color: rgba(23, 63, 51, 0.68);
}

.reading-history-error {
  color: #9c3535;
}

.reading-history-pager {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.reading-history-page-btn {
  min-height: 28px;
  border: 1px solid rgba(27, 107, 85, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 4px 8px;
  color: #1b6b55;
  font-size: 0.68rem;
  font-weight: 800;
}

.reading-history-page-btn:disabled {
  cursor: default;
  opacity: 0.42;
}

.reading-history-page-label {
  color: rgba(23, 63, 51, 0.68);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .node-layout {
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .node-sidebar {
    width: 180px;
    max-width: 180px;
    justify-self: end;
  }

  .node-sidebar .mission-card {
    padding: 12px;
    border-radius: 18px;
  }

  .node-sidebar .mission-card h3 {
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .node-sidebar .mission-card ul {
    margin-top: 10px;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .node-sidebar .mission-card p,
  .node-sidebar .mission-card .rounded-full {
    font-size: 0.62rem;
  }

  .node-sidebar .reading-history-card {
    padding: 10px;
  }

  .node-sidebar .reading-history-list {
    max-height: 480px;
  }

  .node-sidebar .reading-history-title {
    font-size: 0.62rem;
  }

  .node-sidebar .reading-history-pager {
    grid-template-columns: 1fr;
  }

  .node-sidebar .reading-history-page-label {
    text-align: center;
  }
}

@media (max-width: 1024px) {
  main:has(.node-layout) {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 640px) {
  main:has(.node-layout) {
    padding-left: 10px;
    padding-right: 10px;
  }

  .node-layout {
    gap: 18px;
  }

  .node-layout > .card-panel,
  .node-layout .reading-node-panel,
  .node-layout .mission-card {
    border-radius: 20px;
    padding: 16px;
  }
}

.shadow-soft {
  box-shadow: 0 14px 30px rgba(18, 76, 61, 0.12);
}

.path-card {
  position: relative;
  display: block;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.65));
  border: 1px solid rgba(27, 107, 85, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.path-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(18, 76, 61, 0.18);
}

.path-card.completed {
  opacity: 0.45;
  filter: grayscale(0.7) blur(1px);
  box-shadow: none;
  position: relative;
}

.path-card.completed::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.badge-subject {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(168, 216, 255, 0.7);
  color: #1c3b5a;
}

.option-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(27, 107, 85, 0.2);
  font-size: 0.75rem;
}

.fox-blessing {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed rgba(27, 107, 85, 0.2);
}

.fox-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: rgba(255, 236, 214, 0.9);
}

.path-background {
  position: relative;
  padding-bottom: 24px;
}

.path-background::before {
  content: "";
  position: absolute;
  inset: -20px -16px -40px;
  background-image: url("/static/img/rainbow-valley.jpg");
  background-size: cover;
  background-position: var(--path-bg-position, center);
  opacity: 0.3;
  border-radius: 32px;
  z-index: 0;
}

.path-background > * {
  position: relative;
  z-index: 1;
}

.island-decor {
  margin: 0 24px 18px;
}

.footer-town {
  width: min(100%, 1400px);
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.95;
}

.exercise-body {
  line-height: 1.6;
  font-family: Verdana, "Ma Shan Zheng", "ZCOOL KuaiLe", cursive;
}

.exercise-prompt {
  white-space: pre-line;
}

.exercise-option {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.exercise-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(18, 76, 61, 0.12);
}

.exercise-option:disabled {
  cursor: default;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
}

.wrongbook-item {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.wrongbook-item.completed {
  border: 1px solid rgba(27, 107, 85, 0.4);
}

.wrongbook-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(27, 107, 85, 0.12);
  color: #1b6b55;
  font-size: 0.75rem;
}

.wrongbook-progress-tag[data-state="todo"] {
  background: #ffe8e8;
  color: #b42323;
}

.wrongbook-progress-tag[data-state="done"] {
  background: #e6f7ee;
  color: #1d7a4a;
}

.wrongbook-option:disabled {
  cursor: default;
  opacity: 0.6;
  box-shadow: none;
}

.exercise-card.correct {
  border: 1px solid rgba(27, 107, 85, 0.4);
}

.exercise-card.incorrect {
  border: 1px solid rgba(214, 76, 76, 0.45);
}

.exercise-card.completed .exercise-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(27, 107, 85, 0.12);
  color: #1b6b55;
  font-size: 0.8rem;
}

.exercise-card.completed {
  position: relative;
}

.exercise-feedback {
  min-height: 1.4em;
  font-weight: 600;
}

.hidden {
  display: none;
}

.tts-target {
  cursor: pointer;
}

.english-word-chip {
  display: inline;
  border-radius: 8px;
  padding: 0 2px;
  cursor: help;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.english-word-chip:hover {
  background: rgba(27, 107, 85, 0.12);
  color: #124c3d;
}

.reading-sentence-text .english-word-chip[data-reading-word="true"] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  min-width: 1.2em;
  margin: 0 1px;
  padding: 1px 3px 2px;
  line-height: 1.08;
  vertical-align: baseline;
}

.english-word-phonetic {
  display: block;
  min-height: 0.9em;
  font-size: 0.62rem;
  line-height: 1;
  color: rgba(21, 61, 49, 0.58);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0;
}

.english-word-text {
  display: block;
  line-height: 1.15;
}

.reading-grammar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: rgba(21, 61, 49, 0.76);
}

.reading-grammar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.grammar-swatch {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(21, 61, 49, 0.08);
}

.english-word-chip.grammar-third,
.grammar-swatch.grammar-third {
  background: rgba(255, 210, 85, 0.58);
  color: #6f4300;
}

.english-word-chip.grammar-tense,
.grammar-swatch.grammar-tense {
  background: rgba(126, 206, 255, 0.48);
  color: #07506c;
}

.english-word-chip.grammar-progressive,
.grammar-swatch.grammar-progressive {
  background: rgba(142, 219, 166, 0.52);
  color: #145a2e;
}

.english-word-chip.grammar-phrase,
.grammar-swatch.grammar-phrase {
  background: rgba(255, 164, 133, 0.44);
  color: #7b3423;
}

.english-word-chip.grammar-third:hover,
.english-word-chip.grammar-tense:hover,
.english-word-chip.grammar-progressive:hover,
.english-word-chip.grammar-phrase:hover {
  filter: saturate(1.12);
}

.english-word-tooltip {
  position: fixed;
  z-index: 1200;
  min-width: 132px;
  max-width: 220px;
  border-radius: 14px;
  border: 1px solid rgba(26, 95, 74, 0.18);
  background: rgba(255, 252, 245, 0.98);
  box-shadow: 0 14px 32px rgba(19, 53, 43, 0.18);
  padding: 10px 12px;
  pointer-events: none;
}

.english-word-tooltip-word {
  font-size: 0.95rem;
  font-weight: 700;
  color: #124c3d;
}

.english-word-tooltip-phonetic {
  margin-top: 2px;
  font-size: 0.8rem;
  color: rgba(18, 76, 61, 0.7);
}

.english-word-tooltip-meaning {
  margin-top: 6px;
  font-size: 0.88rem;
  color: #2f3d36;
}

.reading-node-head {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.reading-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reading-copy-full,
.reading-download-full,
.reading-download-video {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  border: 1px solid rgba(27, 107, 85, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  color: #1b6b55;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.reading-copy-full:hover,
.reading-download-full:hover,
.reading-download-video:hover {
  background: rgba(27, 107, 85, 0.1);
}

.reading-copy-full:focus-visible,
.reading-download-full:focus-visible,
.reading-download-video:focus-visible {
  outline: 3px solid rgba(27, 107, 85, 0.24);
  outline-offset: 2px;
}

.reading-copy-full.is-copied,
.reading-download-full.is-downloaded,
.reading-download-video.is-downloaded {
  border-color: #2a8c6b;
  background: #2a8c6b;
  color: #ffffff;
  transform: scale(1.06);
}

.reading-copy-full,
.reading-download-full,
.reading-download-video {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
    transform 160ms ease;
}

.reading-download-full:disabled,
.reading-download-video:disabled {
  cursor: wait;
  opacity: 0.65;
}

.reading-copy-icon,
.reading-download-icon,
.reading-video-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reading-copy-icon svg,
.reading-download-icon svg,
.reading-video-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

@keyframes reading-icon-spin {
  to {
    transform: rotate(360deg);
  }
}

.reading-icon-spin {
  animation: reading-icon-spin 900ms linear infinite;
}

.reading-audio-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.reading-tts-status {
  margin-top: 10px;
  color: #7b4b12;
  font-size: 0.85rem;
}

.reading-passage {
  white-space: normal;
  line-height: 1.8;
  font-size: 1rem;
  color: #153d31;
  background: linear-gradient(180deg, rgba(252, 255, 248, 0.96), rgba(240, 251, 245, 0.96));
  border: 1px solid rgba(27, 107, 85, 0.14);
  border-radius: 22px;
  padding: 18px 18px 20px;
}

.reading-passage-sentence {
  display: inline;
  border-radius: 10px;
  padding: 1px 2px;
  transition: background-color 160ms ease;
}

.reading-passage-sentence.is-active {
  background: rgba(255, 218, 75, 0.78);
}

.reading-node-panel.full-passage-completed .reading-passage {
  background:
    linear-gradient(90deg, rgba(255, 237, 166, 0.88), rgba(220, 244, 255, 0.9), rgba(233, 255, 226, 0.88));
  border-color: rgba(53, 139, 111, 0.34);
}

.reading-node-panel.full-passage-completed .english-reading-passage::after {
  content: "  彩蛋完成!";
  color: #1b6b55;
  font-weight: 700;
}

.reading-sentence-list {
  display: grid;
  gap: 14px;
}

.reading-sentence-card {
  border-radius: 20px;
  border: 1px solid rgba(27, 107, 85, 0.12);
  background: rgba(255, 255, 255, 0.78);
  padding: 16px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.reading-sentence-card.is-active {
  border-color: rgba(210, 126, 18, 0.72);
  background: rgba(255, 246, 204, 0.98);
  box-shadow: 0 0 0 3px rgba(255, 208, 77, 0.34), 0 12px 26px rgba(66, 44, 11, 0.12);
}

.reading-sentence-card.completed {
  box-shadow: none;
  position: relative;
}

.reading-sentence-card.completed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.46);
  backdrop-filter: grayscale(0.65) blur(2px);
  pointer-events: none;
}

.reading-sentence-card.completed .reading-feedback {
  position: relative;
  z-index: 3;
}

.reading-sentence-main {
  display: grid;
  gap: 6px;
}

.reading-sentence-text {
  line-height: 2.25;
  color: #173f33;
}

.reading-sentence-translation {
  font-size: 0.82rem;
  color: rgba(23, 63, 51, 0.66);
}

.reading-sentence-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.reading-record-sentence.is-recording {
  border-color: rgba(190, 54, 39, 0.72);
  background: rgba(255, 229, 224, 0.95);
  color: #9f2e24;
}

.reading-full-shadow-card {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.reading-record-full {
  font-size: 1rem;
  padding: 12px 18px;
}

.reading-feedback {
  margin-top: 12px;
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(232, 243, 255, 0.82);
  color: #184536;
  font-size: 0.85rem;
  line-height: 1.6;
}

.reading-feedback[data-badge="excellent"] {
  background: rgba(224, 242, 255, 0.9);
  color: #174a6b;
}

.reading-feedback[data-badge="good"] {
  background: rgba(226, 246, 238, 0.9);
  color: #19513d;
}

.reading-feedback[data-badge="keep_going"] {
  background: rgba(255, 236, 208, 0.95);
  color: #7b4b12;
}

.reading-feedback[data-badge="needs_retry"] {
  background: rgba(255, 226, 226, 0.95);
  color: #9c3535;
}

.reading-transcript-error {
  color: #dc2626;
  font-weight: 700;
}

.reading-vocab-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(27, 107, 85, 0.18);
  background: rgba(255, 255, 255, 0.88);
  min-height: 46px;
  padding: 6px 12px 8px;
}

.reading-vocab-phonetic {
  font-size: 0.68rem;
  line-height: 1;
  color: rgba(27, 107, 85, 0.62);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0;
}

.reading-vocab-word {
  line-height: 1.1;
  font-weight: 700;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-star {
  opacity: 0.2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.task-status {
  font-size: 0.85rem;
  color: rgba(18, 76, 61, 0.6);
}

.task-item.completed .task-status {
  color: #1b6b55;
}

.task-item.completed .task-star {
  opacity: 1;
  transform: scale(1.1);
}

.text-xs {
  font-size: 0.875rem;
  line-height: 1.4;
}

#wrongbook-accuracy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.accuracy-sparkline {
  width: 56px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.8;
}

.accuracy-sparkline[data-direction="up"] {
  color: #1b6b55;
}

.accuracy-sparkline[data-direction="down"] {
  color: #d64c4c;
}

.accuracy-trend {
  font-size: 0.7rem;
  font-weight: 600;
}

.accuracy-trend[data-direction="up"] {
  color: #8bbbd9;
}

.accuracy-trend[data-direction="down"] {
  color: #8bbbd9;
}

.accuracy-trend[data-direction="flat"] {
  color: #8bbbd9;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 76, 61, 0.18);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.loading-overlay.show {
  display: flex;
}

.loading-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  padding: 24px 28px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(18, 76, 61, 0.2);
}

.dialog-card {
  min-width: 260px;
  max-width: 380px;
}

.blessing-card {
  max-width: 462px;
}

.blessing-card .btn-primary,
.blessing-card .btn-ghost {
  font-size: 0.85rem;
}

.student-card {
  width: min(92vw, 420px);
}

.password-card {
  width: min(92vw, 420px);
}

.password-input {
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(27, 107, 85, 0.2);
  background: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

.student-options {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.student-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(27, 107, 85, 0.12);
  background: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.student-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(18, 76, 61, 0.16);
}

.student-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(27, 107, 85, 0.15);
}

.avatar-bingo {
  background: rgba(255, 215, 170, 0.9);
}

.avatar-ameng {
  background: rgba(202, 233, 255, 0.9);
}

.avatar-xiaomeng {
  background: rgba(238, 224, 255, 0.9);
}

.avatar-tangning {
  background: rgba(255, 244, 184, 0.9);
}

.avatar-kaixin {
  background: rgba(214, 255, 213, 0.9);
}

.avatar-bonger {
  background: rgba(255, 222, 214, 0.9);
  background-image: url("/static/img/mario-avatar.svg");
  background-size: cover;
  background-position: center;
  color: transparent;
  image-rendering: pixelated;
}

body.mario-mode {
  --forest-deep: #1c1c1c;
  --forest-light: #ffe19a;
  --sky: #bfe5ff;
  --sun: #ffe066;
  --river: #7bdcff;
  --stone: #2b1a12;
  --bg-body: linear-gradient(180deg, #7bc7ff 0%, #dff5ff 40%, #e8f7b7 100%);
  --bg-forest: radial-gradient(circle at top, #7bc7ff 0%, #b9e7ff 45%, #f5f2b8 100%);
  --bg-sky: linear-gradient(135deg, #78c0ff 0%, #b4e2ff 60%, #f3f1b3 100%);
  --bg-map: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95), transparent 55%),
    linear-gradient(135deg, #6fd16f, #f4d35e 70%);
  --map-shadow: rgba(43, 26, 18, 0.25);
  --accent: #e53935;
  --accent-strong: #b71c1c;
  --accent-contrast: #fffbea;
  --accent-shadow: rgba(229, 57, 53, 0.35);
  --badge-bg: #e53935;
  --badge-text: #fffbea;
  --badge-shadow: rgba(43, 26, 18, 0.3);
  --pill-bg: rgba(255, 199, 92, 0.75);
  --pill-text: #5a2d0c;
  --warm-bg: rgba(255, 214, 102, 0.85);
  --warm-text: #5a2d0c;
  --btn-ghost-bg: rgba(255, 255, 255, 0.85);
  --btn-ghost-border: rgba(90, 45, 12, 0.55);
  --tag-text: #5a2d0c;
  font-family: "Press Start 2P", Verdana, "ZCOOL KuaiLe", cursive;
}

body.mario-mode .font-title,
body.mario-mode .font-display {
  font-family: "Press Start 2P", Verdana, "ZCOOL KuaiLe", cursive;
}

body.mario-mode .path-background::before {
  background-image:
    linear-gradient(180deg, rgba(123, 199, 255, 0.25) 0%, rgba(223, 245, 255, 0.35) 40%, rgba(232, 247, 183, 0.4) 100%),
    url("/static/img/mario.jpg");
  opacity: 0.65;
}

body.mario-mode .bg-forest,
body.mario-mode .bg-sky {
  background-image:
    linear-gradient(180deg, rgba(123, 199, 255, 0.85) 0%, rgba(223, 245, 255, 0.85) 40%, rgba(232, 247, 183, 0.9) 100%),
    url("/static/img/mario.jpg");
  background-size: cover;
  background-position: center top;
}

body.mario-mode .page-blur {
  position: relative;
}

body.mario-mode .page-blur::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.9) 0 18px, transparent 19px),
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.9) 0 14px, transparent 15px),
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.9) 0 20px, transparent 21px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0 10px, transparent 10px 20px);
  pointer-events: none;
  opacity: 0.45;
}

body.mario-mode .page-blur::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background:
    linear-gradient(0deg, #5a3a1a 0%, #6c4a22 60%, #7a5526 100%),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.18) 0 6px,
      transparent 6px 12px
    );
  box-shadow: inset 0 6px 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0.9;
}

body.mario-mode .page-blur {
  overflow: hidden;
}

body.mario-mode .card-panel,
body.mario-mode .mission-card,
body.mario-mode .path-card {
  border: 4px solid #2b1a12;
  box-shadow: 0 14px 28px rgba(43, 26, 18, 0.25);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
}

body.mario-mode .badge-logo {
  border: 3px solid #2b1a12;
}

body.mario-mode .btn-primary,
body.mario-mode .btn-ghost {
  border: 3px solid #2b1a12;
  box-shadow: 0 6px 0 #2b1a12;
  transform: translateY(0);
}

body.mario-mode .btn-primary:hover,
body.mario-mode .btn-ghost:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #2b1a12;
}

body.mario-mode .tag {
  border: 2px solid rgba(43, 26, 18, 0.25);
}

body.mario-mode .path-card.completed {
  box-shadow: 0 16px 30px rgba(90, 45, 12, 0.35);
}

body.mario-mode .badge-logo {
  background: radial-gradient(circle at 30% 30%, #ffeb3b, #f57f17);
  color: #2b1a12;
}

body.mario-mode .pill {
  border: 2px solid rgba(43, 26, 18, 0.35);
}

body.mario-mode .card-panel::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(90, 45, 12, 0.2);
  border-radius: 24px;
  pointer-events: none;
}

body.mario-mode .card-panel,
body.mario-mode .mission-card {
  position: relative;
}

body.mario-mode .path-card::before {
  content: "★";
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 1.2rem;
  color: #f9a825;
  text-shadow: 2px 2px 0 #2b1a12;
  opacity: 0.85;
}

body.mario-mode .student-option {
  border: 3px solid #2b1a12;
  box-shadow: 0 6px 0 rgba(43, 26, 18, 0.35);
}

body.mario-mode .student-option:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 rgba(43, 26, 18, 0.35);
}

body.mario-mode .daily-brief {
  border: 2px solid rgba(43, 26, 18, 0.3);
}

.student-name {
  font-weight: 600;
}

.daily-brief {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.daily-date {
  font-size: 0.9rem;
  color: rgba(18, 76, 61, 0.7);
}

.daily-weather {
  font-size: 0.95rem;
  color: #1b6b55;
}

.daily-greeting {
  font-size: 0.85rem;
  color: rgba(18, 76, 61, 0.65);
}

.daily-greeting-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.daily-greeting-btn:hover .daily-greeting,
.daily-greeting-btn:focus-visible .daily-greeting {
  color: #1b6b55;
}

.daily-greeting-btn:focus-visible {
  outline: 2px solid rgba(27, 107, 85, 0.35);
  outline-offset: 4px;
  border-radius: 10px;
}

.daily-greeting-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.daily-greeting-icon {
  font-size: 0.95rem;
  opacity: 0.7;
}

.daily-tip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.daily-tip-btn:hover,
.daily-tip-btn:focus-visible {
  color: #1b6b55;
}

.daily-tip-btn:focus-visible {
  outline: 2px solid rgba(27, 107, 85, 0.35);
  outline-offset: 4px;
  border-radius: 10px;
}

.daily-tip-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.daily-tip-icon {
  font-size: 0.95rem;
  opacity: 0.7;
}

.progress-pill {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.progress-text,
.progress-stars {
  font-size: 0.85rem;
  color: rgba(18, 76, 61, 0.7);
}

.pinecone-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: -4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/static/img/pinecone.png?v=20260121");
}

.month-total-divider {
  display: inline-block;
  margin: 0 10px;
  color: rgba(27, 107, 85, 0.6);
  font-weight: 600;
}

.next-node-arrow {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: #1b6b55;
  color: #fff7e1;
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 36px rgba(18, 76, 61, 0.28);
  z-index: 40;
}

.next-node-arrow:hover {
  transform: translateY(-50%) scale(1.05);
}

.clear-badge {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(27, 107, 85, 0.92);
  color: #fff7e1;
  font-size: 1.2rem;
  box-shadow: 0 16px 32px rgba(18, 76, 61, 0.26);
  z-index: 40;
}

@media (max-width: 768px) {
  .next-node-arrow {
    right: 16px;
    width: 62px;
    height: 62px;
    font-size: 2.1rem;
  }
  .clear-badge {
    right: 16px;
    font-size: 1.05rem;
  }
}

body.is-loading .page-blur {
  filter: blur(3px);
}

.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(27, 107, 85, 0.2);
  border-top-color: #1b6b55;
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
  margin: 0 auto;
}

.loading-inline {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 24px rgba(18, 76, 61, 0.12);
  text-align: center;
}

.htmx-request .loading-inline {
  display: flex;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.floating-cloud {
  position: absolute;
  width: 120px;
  height: 60px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(18, 76, 61, 0.12);
  animation: drift 14s ease-in-out infinite;
}

.cloud-1 {
  top: 20px;
  left: 60px;
}

.cloud-2 {
  top: 90px;
  right: 80px;
  animation-delay: 2s;
}

.cloud-3 {
  bottom: 40px;
  left: 35%;
  animation-delay: 4s;
}

@keyframes drift {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-12px) translateX(10px);
  }
}

@media (max-width: 768px) {
  html {
    font-size: 21px;
  }
  .pill {
    letter-spacing: 0.12em;
  }
  .badge-logo {
    width: 44px;
    height: 44px;
  }
}

.tag-small {
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
}

.tag-warm {
  background: #fff0dd;
  color: #8c4c00;
}

.tag-remediate {
  background: #efe7ff;
  color: #5b35b1;
}

.ability-card {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  padding: 1rem;
  box-shadow: 0 18px 35px rgba(20, 91, 72, 0.16);
}

#ability-radar {
  width: 100%;
  max-width: 340px;
  display: block;
  margin: 0.5rem auto;
}

.ability-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 0.8rem;
  font-size: 0.78rem;
  color: rgba(18, 84, 67, 0.9);
}

.option-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-radius: 999px;
  background: #f4fffa;
  border: 1px solid rgba(17, 94, 75, 0.2);
  padding: 0.35rem 0.7rem;
}

.recommendation-card {
  border: 1px solid rgba(24, 130, 100, 0.15);
  background: linear-gradient(130deg, rgba(232, 252, 244, 0.95), rgba(255, 255, 255, 0.95));
}

.recommendation-item {
  justify-content: space-between;
  gap: 0.8rem;
}

.recommendation-reason {
  font-size: 0.72rem;
  opacity: 0.8;
}

/* ===== Forest Info Row (Cute style B) ===== */

.home-info-row.forest {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 18px;
  align-items: stretch;
}

.info-card.forest {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(0);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.info-card.forest:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0,0,0,0.08);
}

.info-card.forest .info-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(20, 30, 25, 0.78);
  margin-bottom: 6px;
}

.info-card.forest .info-value {
  font-size: 22px;
  font-weight: 800;
  color: rgba(18, 28, 22, 0.92);
  line-height: 1.15;
}

.info-card.forest .unit {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.75;
  margin-left: 2px;
}

.info-card.forest .info-sub {
  font-size: 12px;
  color: rgba(20, 30, 25, 0.62);
  margin-top: 6px;
}

.info-card.forest.time {
  background: linear-gradient(135deg, rgba(213, 245, 227, 0.95), rgba(233, 250, 239, 0.92));
}

.info-card.forest.streak {
  background: linear-gradient(135deg, rgba(255, 240, 214, 0.98), rgba(255, 248, 232, 0.95));
}

.info-card.forest.parent {
  background: linear-gradient(135deg, rgba(221, 236, 255, 0.98), rgba(240, 246, 255, 0.95));
}

.info-card.forest.ability {
  background: linear-gradient(135deg, rgba(236, 221, 255, 0.98), rgba(246, 240, 255, 0.95));
}

.info-card.forest::before,
.info-card.forest::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  filter: blur(0.2px);
  opacity: 0.18;
  pointer-events: none;
}

.info-card.forest::before {
  right: -40px;
  top: -44px;
  background: rgba(255,255,255,0.9);
}

.info-card.forest::after {
  left: -50px;
  bottom: -55px;
  background: rgba(255,255,255,0.7);
}

.info-card.forest .info-link {
  display: inline-block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  color: rgba(18, 90, 70, 0.9);
  text-decoration: none;
}

.info-card.forest .info-link:hover {
  text-decoration: underline;
}

.info-card.forest .ability-mini canvas,
.info-card.forest .ability-mini svg {
  max-width: 120px;
  height: auto;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .home-info-row.forest {
    gap: 12px;
  }
  .info-card.forest {
    min-width: 240px;
  }
}

@media (max-width: 720px) {
  .home-info-row.forest {
    flex-direction: column;
  }
  .info-card.forest {
    min-width: unset;
  }
}

.info-card.forest.good {
  border-color: rgba(20, 140, 90, 0.25);
  box-shadow: 0 10px 22px rgba(20, 140, 90, 0.10);
}

/* ===== Leaf Corner Decoration (no pseudo-element conflict) ===== */

.info-card.forest .leaf-corner {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  opacity: 0.18;
  transform: rotate(8deg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path d='M118 20 C165 28 190 68 176 112 C162 156 120 180 80 168 C40 156 22 114 36 76 C50 40 90 26 118 20 Z' fill='%2334A853'/><path d='M104 38 C140 44 160 76 150 108 C140 140 108 156 80 146 C52 136 46 106 60 78 C72 56 88 44 104 38 Z' fill='%234CAF50'/><path d='M66 150 C92 118 114 88 142 56' stroke='%232E7D32' stroke-width='6' stroke-linecap='round' opacity='0.65'/></svg>");
}

@media (max-width: 720px) {
  .info-card.forest .leaf-corner {
    width: 96px;
    height: 96px;
    top: -8px;
    right: -8px;
    opacity: 0.16;
  }
}

/* ===== Hotfix: Forest Info Row Clean (override all previous) ===== */

.home-info-row.forest {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 14px 0 16px !important;
  align-items: stretch !important;
}

/* 卡片统一高度、对齐、克制风格 */
.home-info-row.forest .info-card.forest {
  position: relative !important;
  padding: 12px 12px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.05) !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 96px !important;
  transform: none !important;
}

/* 标题/数值统一排版 */
.home-info-row.forest .info-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(18, 28, 22, 0.78) !important;
  margin: 0 0 6px !important;
}

.home-info-row.forest .info-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: rgba(18, 28, 22, 0.92) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.home-info-row.forest .unit {
  font-size: 12px !important;
  font-weight: 700 !important;
  opacity: 0.72 !important;
  margin-left: 2px !important;
}

.home-info-row.forest .info-sub {
  font-size: 12px !important;
  color: rgba(18, 28, 22, 0.58) !important;
  margin-top: 6px !important;
}

/* 轻量森林底色：保留但克制 */
.home-info-row.forest #card-time { background: rgba(213, 245, 227, 0.60) !important; }
.home-info-row.forest #card-streak { background: rgba(255, 240, 214, 0.62) !important; }
.home-info-row.forest #card-parent { background: rgba(221, 236, 255, 0.62) !important; }
.home-info-row.forest #card-ability { background: rgba(236, 221, 255, 0.62) !important; }

/* 链接样式统一 */
.home-info-row.forest .info-link {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: rgba(18, 90, 70, 0.92) !important;
  text-decoration: none !important;
}
.home-info-row.forest .info-link:hover { text-decoration: underline !important; }

/* 关闭之前所有“花里胡哨装饰”，避免挡内容 */
.home-info-row.forest .leaf-corner { display: none !important; }
.home-info-row.forest .info-card.forest::before,
.home-info-row.forest .info-card.forest::after {
  content: none !important;
}

/* 雷达图强制收纳，不让它撑爆卡片 */
.home-info-row.forest #card-ability .ability-mini {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

.home-info-row.forest #card-ability canvas,
.home-info-row.forest #card-ability svg {
  width: 110px !important;
  height: 78px !important;
  max-width: 110px !important;
  max-height: 78px !important;
  margin: 0 !important;
}

/* 小屏：自动两列/一列 */
@media (max-width: 980px) {
  .home-info-row.forest {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .home-info-row.forest {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Hotfix: Increase Info Card Typography ===== */

.home-info-row.forest .info-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

.home-info-row.forest .info-value {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

.home-info-row.forest .unit {
  font-size: 14px !important;
  font-weight: 700 !important;
}

.home-info-row.forest .info-sub {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* 家长周报按钮更明显 */
.home-info-row.forest .info-link {
  font-size: 16px !important;
  font-weight: 900 !important;
}

/* streak 强调 */
.home-info-row.forest #card-streak .info-value {
  font-size: 28px !important;
  color: #ff6b00 !important;
}

/* 今日学习时长强调 */
.home-info-row.forest #card-time .info-value {
  font-size: 28px !important;
  color: #1b7f5f !important;
}

/* 能力雷达数值略大 */
.home-info-row.forest #card-ability .info-sub {
  font-size: 13px !important;
}

/* ===== Layout: 3 stacked bars + right radar (clear radar) ===== */

.home-info-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
  margin: 14px 0 16px;
  align-items: stretch;
}

/* 左侧堆叠 */
.home-info-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 横条卡片 */
.info-bar {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  padding: 12px 14px;
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  overflow: hidden;
}

/* 横条左右布局 */
.info-bar .bar-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
}

.info-bar .bar-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}

/* 森林轻配色（更克制） */
#card-time { background: rgba(213, 245, 227, 0.60); }
#card-streak { background: rgba(255, 240, 214, 0.62); }
#card-parent { background: rgba(221, 236, 255, 0.62); }

/* 标题/数字更清晰 */
.info-bar .info-title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(18, 28, 22, 0.80);
  margin: 0;
}

.info-bar .info-value {
  font-size: 26px;
  font-weight: 900;
  color: rgba(18, 28, 22, 0.95);
  line-height: 1.1;
}

.info-bar .unit {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.72;
  margin-left: 2px;
}

.info-bar .info-sub {
  font-size: 13px;
  color: rgba(18, 28, 22, 0.60);
  line-height: 1.35;
}

/* 周报链接 */
.info-bar .info-link {
  font-size: 16px;
  font-weight: 900;
  color: rgba(18, 90, 70, 0.92);
  text-decoration: none;
}
.info-bar .info-link:hover { text-decoration: underline; }

/* 右侧雷达卡：高度与左侧堆叠同高（grid stretch） */
.info-radar {
  background: rgba(236, 221, 255, 0.62);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  padding: 12px 14px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* 雷达容器：让图尽可能大、居中 */
.info-radar .info-title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(18, 28, 22, 0.80);
  margin: 0 0 6px;
}

.info-radar .radar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px; /* 关键：保证足够大看清 */
}

/* 强制雷达图尺寸（优先 CSS，避免 JS 改） */
.info-radar canvas,
.info-radar svg {
  width: 220px;
  height: 220px;
  max-width: 260px;
  max-height: 260px;
}

/* 雷达底部说明 */
.info-radar .info-sub {
  font-size: 12px;
  color: rgba(18, 28, 22, 0.55);
  margin-top: 6px;
}

/* 响应式：窄屏改为上下 */
@media (max-width: 720px) {
  .home-info-split {
    grid-template-columns: 1fr;
  }
  .info-radar .radar-wrap {
    min-height: 220px;
  }
}

/* ===== Refinement: Info Bars Comfortable Spacing ===== */

/* 横条增加上下空间 */
.info-bar {
  padding: 16px 16px !important;
  min-height: 96px !important;
}

/* 字体恢复与页面正文一致 */
.info-bar .info-title {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.info-bar .info-value {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.info-bar .unit {
  font-size: 16px !important;
  font-weight: 500 !important;
}

.info-bar .info-sub {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* 家长周报链接与正文一致 */
.info-bar .info-link {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* 能力雷达简化布局 */
.info-radar {
  padding: 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 雷达图直接控制尺寸 */
.info-radar canvas,
.info-radar svg {
  width: 200px !important;
  height: 200px !important;
  max-width: 240px !important;
  max-height: 240px !important;
  margin: 8px 0 !important;
}

/* 标题与说明统一 */
.info-radar .info-title {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.info-radar .info-sub {
  font-size: 14px !important;
  opacity: 0.7 !important;
  margin-top: 6px !important;
}

/* ===== Home Info V2 (Clean + Radar First) ===== */

.home-info-v2 {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 12px;
  margin: 14px 0 18px;
  align-items: stretch;
}

/* 左侧三条堆叠 */
.home-info-v2__left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 横条：更高、更舒展；字体跟正文一致 */
.home-info-v2__bar {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  padding: 14px 16px;
  min-height: 92px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  overflow: hidden;
  background: rgba(255,255,255,0.70);
}

/* 左右 */
.home-info-v2__bar-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.home-info-v2__bar-side {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}

/* 配色（克制森林） */
.home-info-v2 #card-time { background: rgba(213, 245, 227, 0.60); }
.home-info-v2 #card-streak { background: rgba(255, 240, 214, 0.62); }
.home-info-v2 #card-parent { background: rgba(221, 236, 255, 0.62); }

.home-info-v2 .info-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(18, 28, 22, 0.82);
  margin: 0;
}

.home-info-v2 .info-value {
  font-size: 20px;
  font-weight: 700;
  color: rgba(18, 28, 22, 0.95);
  line-height: 1.15;
  margin: 0;
}

.home-info-v2 .unit {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.72;
  margin-left: 2px;
}

.home-info-v2 .info-sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(18, 28, 22, 0.60);
}

.home-info-v2 .info-link {
  font-size: 16px;
  font-weight: 700;
  color: rgba(18, 90, 70, 0.92);
  text-decoration: none;
}
.home-info-v2 .info-link:hover { text-decoration: underline; }

/* 右侧雷达：与左侧同高（grid stretch），更大更清晰 */
.home-info-v2__radar {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  background: rgba(236, 221, 255, 0.62);
  padding: 14px 16px;

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-info-v2__radar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.home-info-v2__radar-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px; /* 关键：确保足够大 */
}

/* 强制雷达尺寸变大 */
.home-info-v2__radar-body canvas,
.home-info-v2__radar-body svg {
  width: 260px;
  height: 260px;
  max-width: 280px;
  max-height: 280px;
  margin: 6px 0;
}

/* 禁用旧装饰（避免遮挡/混乱） */
.home-info-v2 .leaf-corner { display: none !important; }
.home-info-v2 *::before,
.home-info-v2 *::after { content: none !important; }

/* 响应式：窄屏上下 */
@media (max-width: 720px) {
  .home-info-v2 {
    grid-template-columns: 1fr;
  }
  .home-info-v2__radar-body {
    min-height: 260px;
  }
}

/* ===== Alignment Fix: Home Info V2 ===== */

.home-info-v2 {
  align-items: stretch;
}

/* 左侧三条统一顶部对齐 */
.home-info-v2__bar {
  align-items: flex-start !important;
  justify-content: space-between !important;
}

/* 横条左右区域统一基线 */
.home-info-v2__bar-main {
  align-items: flex-start !important;
}

.home-info-v2__bar-side {
  align-items: flex-start !important;
  text-align: right !important;
  padding-top: 2px;
}

/* 标题统一间距 */
.home-info-v2 .info-title {
  margin: 0 0 4px 0 !important;
}

/* 数字与单位基线对齐 */
.home-info-v2 .info-value {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

/* 雷达卡片顶部对齐 */
.home-info-v2__radar {
  justify-content: flex-start !important;
}

/* 雷达头部与左侧标题高度对齐 */
.home-info-v2__radar-head {
  margin-bottom: 6px !important;
}

/* 雷达主体真正垂直居中 */
.home-info-v2__radar-body {
  flex: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 去除可能干扰的额外 margin */
.home-info-v2__radar canvas,
.home-info-v2__radar svg {
  margin: 0 auto !important;
}

/* ===== Update for 4 stacked bars ===== */

.home-info-v2 {
  grid-template-columns: 1.6fr 1fr; /* 左侧稍宽一点 */
}

/* 左侧现在是 4 条 */
.home-info-v2__left {
  gap: 10px;
}

/* 横条高度微调（4 条更协调） */
.home-info-v2__bar {
  min-height: 88px !important;
}

/* 今日建议颜色轻微区分 */
#card-recommendation {
  background: rgba(255, 245, 204, 0.65);
}

/* 推荐文字稍微强调 */
#card-recommendation .info-value {
  font-weight: 700;
}

/* 雷达自动拉伸与左侧同高 */
.home-info-v2__radar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 雷达主体略微缩小一点以匹配 4 条高度 */
.home-info-v2__radar-body {
  min-height: 220px !important;
}

.home-info-v2__radar-body canvas,
.home-info-v2__radar-body svg {
  width: 240px !important;
  height: 240px !important;
}

.node-state-text.is-review-needed {
  color: #7c3aed !important;
}