:root {
  /* 色彩角色 */
  --bg: #fdf9f2;
  --surface: #ffffff;
  --surface-dim: #f7f1e8;
  --ink: #2b2226;
  --ink-2: #6b5a60;
  --ink-3: #a39298;
  --line: rgba(43, 34, 38, 0.08);
  --primary: #864d61;
  --primary-ink: #fff;
  --primary-tint: #f6e8ed;
  --gold: #d9a13f;
  --gold-rgb: 217, 161, 63;
  --good: #3f9d6b;
  --warn: #e0a93a;
  --bad: #c96b6b;
  --math: #c2703f;
  --physics: #4a4580;
  --chem: #2f6a3f;

  /* 圆角 */
  --r-xs: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  /* 阴影 */
  --shadow-1: 0 1px 3px rgba(43, 34, 38, 0.06), 0 4px 16px rgba(134, 77, 97, 0.06);
  --shadow-2: 0 8px 32px rgba(43, 34, 38, 0.16);

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* 字阶 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-num: 32px;

  /* 旧 token 别名：保留未迁移处兼容 */
  --surface-low: var(--surface-dim);
  --surface-mid: var(--surface-dim);
  --surface-high: color-mix(in srgb, var(--surface-dim) 82%, var(--ink-3));
  --primary-dark: color-mix(in srgb, var(--primary) 82%, #000);
  --primary-container: var(--primary-tint);
  --primary-soft: var(--primary-tint);
  --secondary: #765933;
  --secondary-container: #fdd6a7;
  --tertiary: var(--chem);
  --tertiary-container: #9bdaa5;
  --physics-container: #c5c2f0;
  --text: var(--ink);
  --on-surface: var(--text);
  --text-primary: var(--text);
  --muted: var(--ink-2);
  --on-surface-muted: var(--muted);
  --text-secondary: var(--muted);
  --text-tertiary: var(--ink-3);
  --outline: var(--line);
  --border: var(--line);
  --surface-variant: var(--surface-low);
  --card-bg: var(--surface);
  --text-muted: var(--ink-2);
  --success: var(--good);
  --danger: var(--bad);
  --shadow: var(--shadow-1);
  --soft-shadow: var(--shadow-1);
  --radius-card: var(--r-lg);
  --radius-small: var(--r-md);
  --nav-collapsed-width: 76px;
  --nav-expanded-width: 240px;
  --nav-width: var(--nav-collapsed-width);
  --study-reading-font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --study-reading-scale: 1;
  --study-reading-13: 13px;
  --study-reading-16: 16px;
  --study-reading-17: 17px;
  --study-reading-18: 18px;
  --study-reading-math: 1.08em;
}

/* z-index registry
   20  app chrome: side-nav / top-bar
   30  mobile bottom-nav
   120 local floating controls: energy float / pending import / focus mini / quiz select bar
   500 focus overlay
   600 rest-reminder overlay
   700 lottery overlay
   710 lottery-only celebrations
   760 route overview overlay
   800 modal-root / archive export / summer reflection dialog
   900 admin panel
   920 admin auth
   950 commitment gate
   990 sparkle effects
   1000 toast-root
   9999 debug panel
*/

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 112px;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Be Vietnam Pro", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 500;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

[data-route="achievements"] {
  position: relative;
}

.nav-lottery-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  background: var(--bad);
  color: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--r-xs);
  text-align: center;
  line-height: 16px;
  pointer-events: none;
  z-index: 1;
}

.learn-tab-bar {
  display: inline-flex;
  width: min(100%, 640px);
  margin: 0 0 var(--sp-5);
}

.learn-tab-btn {
  flex: 1 1 0;
  justify-content: center;
}

.learn-tab-btn .material-symbols-outlined {
  font-size: var(--fs-md);
}

.today-study-view {
  display: grid;
  gap: var(--sp-5);
}

.today-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.today-title-row h2 {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.2;
}

.today-title-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.5;
}

.today-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 日期切换（家长翻阅历史） */
.today-date-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
}

.today-date-nav {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.today-date-nav:disabled { opacity: .35; cursor: not-allowed; }

.today-date-field {
  flex: 1 1 180px;
  max-width: 300px;
  gap: 0;
}

.today-date-select {
  min-height: 36px;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}

.today-date-field .today-date-select {
  border-radius: var(--r-md);
  padding: 8px 12px;
}

/* 专注轮里的"说到做到"完成标记 */
.today-session-goal { margin: 4px 0 0; font-size: var(--fs-base); color: var(--text); }
.today-session-goal b { color: var(--muted); font-weight: 600; }
.today-session-nogoal { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); font-style: italic; }

.today-commit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.today-commit-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  color: var(--surface);
}

.today-commit-badge.kept { background: var(--good); }
.today-commit-badge.partial { background: var(--warn); }
.today-commit-badge.missed { background: var(--bad); }

.today-commit-plan { font-size: var(--fs-xs); color: var(--muted); }

/* 学生自己写的这一轮反思 */
.today-commit-note {
  margin: 6px 0 0;
  padding: 8px 12px;
  background: var(--bg);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
}

.today-title-actions .btn.loading {
  opacity: 0.72;
  cursor: wait;
}

.today-advisor-feedbacks { margin: 14px 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-low); }
.today-advisor-feedbacks > summary { display: flex; align-items: center; gap: 8px; padding: 11px 13px; cursor: pointer; list-style: none; }
.today-advisor-feedbacks > summary::-webkit-details-marker { display: none; }
.today-advisor-feedbacks > summary span:first-child { display: grid; gap: 2px; }
.today-advisor-feedbacks > summary strong { color: var(--text-primary); font-size: var(--fs-sm); }
.today-advisor-feedbacks > summary small { color: var(--text-tertiary); font-size: var(--fs-xs); }
.today-advisor-feedbacks > summary .material-symbols-outlined { margin-left: auto; color: var(--text-tertiary); transition: transform .2s; }
.today-advisor-feedbacks[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.today-advisor-feedbacks-body { display: grid; gap: 10px; padding: 0 13px 13px; }
.today-advisor-feedbacks-body > p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); }
.today-advisor-feedback-list { display: grid; gap: 8px; }
.today-advisor-feedback-list article { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.today-advisor-feedback-list time { color: var(--text-tertiary); font-size: var(--fs-xs); }
.today-advisor-feedback-list strong, .today-advisor-feedback-list b { color: var(--text-primary); font-size: var(--fs-sm); }
.today-advisor-feedback-list p { margin: 0; color: var(--text-secondary); font-size: var(--fs-xs); }

.today-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}

.today-stat {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  background: var(--surface);
  min-width: 0;
}

.today-stat.primary {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.16), rgba(255, 255, 255, 0.94));
  border-color: rgba(76, 175, 80, 0.28);
}

.today-stat .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  background: var(--surface-mid);
  color: var(--primary);
  font-size: var(--fs-md);
}

.today-stat small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.today-stat strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.today-stat-num {
  font-family: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--fs-num);
  line-height: 1;
}

.today-stat-text {
  font-size: var(--fs-md);
}

.today-panel {
  display: grid;
  gap: 12px;
  padding: var(--sp-4);
  border: 1px solid var(--outline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.today-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.today-section-head h3 {
  margin: 0;
  font-size: var(--fs-md);
}

.today-section-head .material-symbols-outlined {
  color: var(--primary);
}

.today-subject-bars {
  display: grid;
  gap: 10px;
}

.today-subject-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: 800;
}

.today-subject-row div {
  height: 10px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--surface-high);
}

.today-subject-row i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--subject-color);
}

.today-subject-row strong {
  text-align: right;
}

.today-timeline {
  position: relative;
  display: grid;
  gap: 14px;
}

.today-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--outline);
}

.today-session {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 26px;
}

.today-session-line {
  display: grid;
  grid-template-columns: 1fr;
}

.today-session-dot {
  position: absolute;
  left: 2px;
  top: 7px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--surface);
  border-radius: var(--r-full);
  background: var(--primary);
  box-shadow: 0 0 0 1px var(--outline);
  z-index: 1;
}

.today-session.active .today-session-dot {
  background: var(--good);
}

.today-session.unfinished .today-session-dot,
.today-session.unmatched .today-session-dot {
  background: #e07020;
}

.today-session-main {
  display: grid;
  gap: 4px;
}

.today-session-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 20px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.today-session-context > span {
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--surface-high);
  font-weight: 800;
}

.today-session-context .today-session-source {
  color: #385f43;
  background: #eaf5ec;
}

.today-session-context .today-session-source-plan {
  color: #4d5e9d;
  background: #eef0ff;
}

.today-session-context .today-session-source-personal,
.today-session-context .today-session-source-free {
  color: #7a5a38;
  background: #fff3df;
}

.today-session-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.today-session-title strong {
  font-size: var(--fs-md);
}

.today-session-title span,
.today-session-title em {
  border-radius: var(--r-full);
  padding: 3px 8px;
  background: var(--surface-high);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 800;
}

.today-session-title .today-session-delete {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(174, 71, 71, 0.2);
  border-radius: var(--r-full);
  color: #a34747;
  background: rgba(255, 245, 245, 0.9);
  cursor: pointer;
}

.today-session-title .today-session-delete:hover {
  border-color: rgba(174, 71, 71, 0.42);
  background: #fff0f0;
}

.today-session-title .today-session-delete span {
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: 17px;
  font-weight: 500;
}

.today-session-main p,
.today-session-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.today-session-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.today-mini-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-left: 4px solid var(--subject-color);
  border-radius: var(--r-md);
  background: var(--surface-mid);
  min-width: 0;
}

.today-mini-card-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.today-mini-card-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}

.today-mini-card-action {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  color: var(--muted);
  background: transparent;
}

.today-mini-card-action:hover,
.today-mini-card-action:focus-visible {
  color: var(--primary);
  background: var(--surface);
}

.today-mini-card-action.danger:hover {
  color: var(--danger, #b94a58);
}

.today-mini-card-action .material-symbols-outlined {
  font-size: var(--fs-md);
}

.today-mini-card span,
.today-mini-card small {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.today-mini-card strong {
  overflow-wrap: anywhere;
  font-size: var(--fs-base);
}

.today-card-list {
  display: grid;
  gap: 10px;
}

.today-card-detail {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--outline);
  border-left: 5px solid var(--subject-color);
  border-radius: var(--r-md);
  background: var(--surface-mid);
}

.today-card-detail header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.today-card-detail header strong {
  overflow-wrap: anywhere;
}

.today-card-detail header small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.today-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.today-card-meta span {
  border-radius: var(--r-full);
  padding: 3px 8px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.today-card-detail p {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.today-card-detail p b {
  margin-right: 8px;
  color: var(--primary);
}

.today-empty {
  justify-items: center;
  text-align: center;
  padding: var(--sp-5);
  color: var(--text);
}

.today-empty > .material-symbols-outlined {
  font-size: var(--fs-num);
  color: #e07020;
}

.today-empty h3,
.today-empty p {
  margin: 0;
}

@media (max-width: 900px) {
  .today-hero {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .today-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .today-title-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .today-title-row .btn {
    width: 100%;
  }

  .today-hero {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-1);
  }

  .today-session-cards {
    grid-template-columns: 1fr;
  }

  .today-stat {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: var(--sp-2) var(--sp-1);
    text-align: center;
  }

  .today-stat .material-symbols-outlined {
    display: none;
  }

  .today-stat-text {
    font-size: var(--fs-sm);
  }

  .today-subject-row {
    grid-template-columns: 52px minmax(0, 1fr) 38px;
  }

  .learn-tab-bar {
    width: 100%;
    overflow-x: visible;
  }

  .learn-tab-btn {
    flex: 1 1 0;
    padding-inline: var(--sp-2);
    font-size: var(--fs-xs);
  }
}

/* ── Mobile-lite PWA shell (2026-07-24) ─────────────────────────────── */
body.mobile-lite {
  --lite-bg: #f7f3e8;
  --lite-ink: #26372d;
  --lite-muted: #718078;
  --lite-card: rgba(255, 255, 255, 0.92);
  background: var(--lite-bg);
  color: var(--lite-ink);
}

body.mobile-lite .side-nav,
body.mobile-lite #mobile-menu,
body.mobile-lite .desktop-only {
  display: none !important;
}

body.mobile-lite .app-shell {
  display: block;
  min-height: 100dvh;
}

body.mobile-lite .top-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  min-height: 54px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  border-bottom: 1px solid rgba(67, 91, 73, 0.08);
  background: rgba(247, 243, 232, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.mobile-lite .top-bar .brand {
  font-size: 1.06rem;
  letter-spacing: -0.02em;
}

body.mobile-lite .content {
  width: 100%;
  max-width: 680px;
  min-height: calc(100dvh - 120px);
  margin: 0 auto;
  padding: 14px 14px calc(92px + env(safe-area-inset-bottom));
}

body.mobile-lite .bottom-nav {
  position: fixed;
  z-index: 100;
  right: 10px;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 64px;
  padding: 6px;
  border: 1px solid rgba(66, 89, 71, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(54, 75, 60, 0.16);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.mobile-lite .bottom-nav .nav-item {
  min-width: 0;
  min-height: 52px;
  padding: 4px 2px;
  border-radius: 16px;
  color: #7a867f;
  font-size: 0.7rem;
  font-weight: 700;
  gap: 1px;
}

body.mobile-lite .bottom-nav .nav-item .material-symbols-outlined {
  font-size: 23px;
}

body.mobile-lite .bottom-nav .nav-item.active {
  background: #e8f1e8;
  color: #397052;
}

.lite-home,
.lite-page {
  display: grid;
  gap: 12px;
}

.lite-home-head,
.lite-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 2px 2px 4px;
}

.lite-home-head span,
.lite-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--lite-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.lite-home-head h1,
.lite-page-head h2 {
  margin: 0;
  color: var(--lite-ink);
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.045em;
}

.lite-avatar-btn {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  background: #e6eee5;
  color: #47725a;
}

body.mobile-lite .card {
  border: 1px solid rgba(74, 95, 80, 0.1);
  border-radius: 22px;
  background: var(--lite-card);
  box-shadow: 0 7px 24px rgba(66, 77, 68, 0.07);
}

.lite-next-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.lite-next-card::before {
  position: absolute;
  top: -58px;
  right: -54px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(111, 164, 123, 0.1);
  content: "";
  pointer-events: none;
}

.lite-step-kicker {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e7f0e7;
  color: #467258;
  font-size: 0.72rem;
  font-weight: 800;
}

.lite-next-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 15px;
  place-items: center;
  background: #4f8b67;
  color: #fff;
}

.lite-next-title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.lite-next-card h2 {
  position: relative;
  margin: 10px 0 7px;
  color: var(--lite-ink);
  font-size: 1.32rem;
  line-height: 1.26;
  letter-spacing: -0.025em;
}

.lite-next-title-row h2 {
  margin-top: 1px;
}

.lite-next-card p {
  margin: 0 0 15px;
  color: var(--lite-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.lite-next-card small {
  display: block;
  margin-top: 10px;
  color: var(--lite-muted);
  font-size: 0.72rem;
  text-align: center;
}

.lite-next-card textarea {
  width: 100%;
  min-height: 104px;
  margin: 0 0 10px;
  padding: 13px;
  resize: vertical;
  border: 1px solid #d9e1d9;
  border-radius: 15px;
  outline: none;
  background: #fbfcf8;
  color: var(--lite-ink);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
}

.lite-next-card textarea:focus {
  border-color: #70a181;
  box-shadow: 0 0 0 3px rgba(79, 139, 103, 0.12);
}

.lite-import-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 8px;
}

.lite-import-actions .btn {
  min-width: 0;
  padding-inline: 10px;
}

.lite-import-hint {
  margin: 10px 0 0 !important;
  font-size: 0.76rem !important;
  text-align: center;
}

.lite-done-number {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #3f7d59;
  font-size: 3.2rem;
  font-weight: 850;
  line-height: 1;
}

.lite-done-number small {
  margin: 0;
  font-size: 0.8rem;
}

.lite-hidden-import {
  display: none;
  margin-top: 12px;
}

.lite-hidden-import.is-open,
.lite-hidden-import:focus-within {
  display: block;
}

.lite-drawer {
  overflow: hidden;
  padding: 0;
}

.lite-drawer > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}

.lite-drawer > summary::-webkit-details-marker { display: none; }
.lite-drawer > summary > .material-symbols-outlined:first-child { color: #4f8b67; }
.lite-drawer[open] > summary > .material-symbols-outlined:last-child { transform: rotate(180deg); }
.lite-drawer-body { padding: 0 12px 14px; }
.lite-drawer-body .card { box-shadow: none; }

.lite-growth-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 68px;
  padding: 12px 15px;
  border: 0;
  text-align: left;
}

.lite-backup-nudge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 11px 14px;
  border: 1px solid #ead9b7 !important;
  background: #fff9e9 !important;
  color: #6f572e;
  text-align: left;
}

.lite-backup-nudge > .material-symbols-outlined:first-child { color: #b08235; }
.lite-backup-nudge strong,
.lite-backup-nudge small { display: block; }
.lite-backup-nudge small { margin-top: 2px; color: #8b7755; font-size: 0.7rem; }

.lite-growth-link > .material-symbols-outlined:first-child { color: #4f8b67; font-size: 29px; }
.lite-growth-link strong,
.lite-growth-link small { display: block; }
.lite-growth-link small { margin-top: 2px; color: var(--lite-muted); font-size: 0.72rem; }

.lite-streak-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff0d2;
  color: #8c6422;
  font-size: 0.75rem;
  font-weight: 800;
}

.lite-growth-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 17px 10px;
}

.lite-growth-hero > div {
  display: grid;
  gap: 2px;
  text-align: center;
}

.lite-growth-hero > div + div { border-left: 1px solid #e7ebe5; }
.lite-growth-hero span,
.lite-growth-hero small { color: var(--lite-muted); font-size: 0.68rem; }
.lite-growth-hero strong { color: #3e7756; font-size: 1.7rem; line-height: 1.1; }

.lite-subject-progress,
.lite-backup-card,
.lite-privacy-card {
  padding: 17px;
}

.lite-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.lite-card-title .material-symbols-outlined { color: #4f8b67; }
.lite-card-title h3,
.lite-card-title p { margin: 0; }
.lite-card-title p { margin-top: 2px; color: var(--lite-muted); font-size: 0.74rem; }

.lite-subject-row {
  display: grid;
  grid-template-columns: 78px 1fr 38px;
  align-items: center;
  gap: 9px;
  min-height: 48px;
}

.lite-subject-row > div:first-child strong,
.lite-subject-row > div:first-child span { display: block; }
.lite-subject-row > div:first-child span { margin-top: 2px; color: var(--lite-muted); font-size: 0.65rem; }
.lite-subject-row b { color: #527563; font-size: 0.7rem; text-align: right; }
.lite-progress-track { overflow: hidden; height: 8px; border-radius: 999px; background: #ebeee9; }
.lite-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8bc89b, #4f8b67); }

.lite-device-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
}

.lite-device-icon {
  display: grid;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  place-items: center;
  background: #f3ead8;
  color: #8e6a30;
}

.lite-device-card.is-ready .lite-device-icon { background: #e4f1e7; color: #3f7b57; }
.lite-device-copy { min-width: 0; }
.lite-device-copy strong { display: block; font-size: 0.9rem; }
.lite-device-copy p { margin: 3px 0 0; color: var(--lite-muted); font-size: 0.7rem; line-height: 1.4; }

.lite-help-text,
.lite-privacy-card p {
  color: var(--lite-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.lite-action-stack { display: grid; gap: 8px; margin-top: 13px; }
.lite-action-stack .btn { justify-content: center; }
.lite-update-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; }
.lite-update-card strong { display: block; }
.lite-update-card p { margin: 3px 0 0; color: var(--lite-muted); font-size: 0.72rem; }
.lite-build-version { margin: 4px 0; color: #95a099; font-size: 0.65rem; text-align: center; }
.lite-growth-note { margin: 2px 14px; color: var(--lite-muted); font-size: 0.72rem; line-height: 1.5; text-align: center; }

.pwa-install-steps {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.pwa-install-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
}

.pwa-install-steps li > span {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  place-items: center;
  background: #e7f0e7;
  color: #3f7555;
  font-weight: 800;
}

.pwa-install-steps p { margin: 0; line-height: 1.5; }
.pwa-install-note { display: flex; gap: 9px; padding: 12px; border-radius: 14px; background: #fff7df; color: #725c35; }
.pwa-install-note p { margin: 0; font-size: 0.8rem; line-height: 1.5; }

body.mobile-lite .learn-tab-bar {
  position: sticky;
  top: 60px;
  z-index: 50;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
  background: rgba(247, 243, 232, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.mobile-lite .learn-tab-btn {
  min-width: 0;
  font-size: 0.76rem;
}

body.mobile-lite .focus-overlay {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

@media (max-width: 420px) {
  body.mobile-lite .content { padding-right: 10px; padding-left: 10px; }
  .lite-next-card { padding: 17px; }
  .lite-import-actions { grid-template-columns: 1fr; }
  .lite-device-card { grid-template-columns: auto 1fr; }
  .lite-device-card > .btn { grid-column: 1 / -1; }
}

#learn-content-pane .page-head {
  display: none;
}

#learn-content-pane,
.review-table,
.review-help,
.archive-list,
.study-card,
.archive-node-digest {
  font-family: var(--study-reading-font);
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}

.app-shell {
  min-height: 100vh;
}

.side-nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--nav-width);
  padding: 88px 12px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(249, 243, 234, 0.9);
  box-shadow: 10px 0 30px rgba(118, 89, 51, 0.08);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  z-index: 20;
  transition: width 0.22s ease, padding 0.22s ease, transform 0.2s ease;
}

body.sidebar-expanded {
  --nav-width: var(--nav-expanded-width);
}

body.sidebar-expanded .side-nav {
  padding-inline: 20px;
}

.desktop-only {
  display: initial;
}

.sidebar-toggle {
  position: absolute;
  top: 22px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--r-full);
  color: var(--primary);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.sidebar-toggle .material-symbols-outlined {
  font-size: var(--fs-lg);
}

.pet-mini {
  display: none;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 8px;
  min-height: 58px;
  text-align: center;
}

body.sidebar-expanded .pet-mini {
  display: grid;
  grid-template-columns: 54px 1fr;
  justify-items: stretch;
  gap: 14px;
  text-align: left;
}

.pet-mini h1 {
  margin: 0 0 2px;
  color: var(--secondary);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-xl);
  line-height: 1.1;
}

.pet-mini p,
.pet-mini strong {
  display: none;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

body.sidebar-expanded .pet-mini p,
body.sidebar-expanded .pet-mini strong {
  display: block;
}

.pet-mini strong {
  margin-top: 4px;
  color: var(--primary);
}

.pet-avatar,
.top-avatar {
  width: 54px;
  height: 54px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 3px solid var(--primary-container);
  box-shadow: var(--soft-shadow);
  object-fit: contain;
}

.nav-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}

.nav-item {
  border: 0;
  border-radius: var(--r-full);
  min-height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  text-align: left;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body.sidebar-expanded .side-nav .nav-item {
  justify-content: flex-start;
  gap: 12px;
  padding: 0 14px;
}

.nav-item .material-symbols-outlined {
  flex: 0 0 auto;
  width: 24px;
  overflow: hidden;
  font-size: var(--fs-xl);
  text-align: center;
}

.side-nav .nav-item {
  font-size: 0;
}

body.sidebar-expanded .side-nav .nav-item {
  font-size: var(--fs-md);
}

.nav-item:hover {
  background: var(--surface-dim);
}

body.sidebar-expanded .side-nav .nav-item:hover {
  transform: none;
}

.nav-item.active {
  color: var(--primary);
  background: var(--primary-tint);
  box-shadow: none;
}

.nav-item.active .material-symbols-outlined {
  color: var(--primary);
}

.top-bar {
  position: fixed;
  inset: 0 0 auto var(--nav-width);
  height: 72px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: color-mix(in srgb, var(--bg) 94%, var(--surface));
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  z-index: 20;
}

.brand {
  color: var(--primary);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-xl);
  font-weight: 800;
}


.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-avatar {
  width: 42px;
  height: 42px;
}

.content {
  margin-left: var(--nav-width);
  padding: 104px 28px 54px;
  max-width: none;
  transition: margin-left 0.22s ease;
}

.page-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 28px;
  scroll-margin-top: 112px;
}

.page-head h2,
.card h2,
.card h3,
.panel-title {
  font-family: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.page-head h2 {
  margin: 0 0 6px;
  font-size: var(--fs-num);
  color: var(--primary);
}

.page-head p {
  margin: 0;
  color: var(--muted);
}

.archive-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.archive-quiz-node-btn {
  width: auto;
}

.archive-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding-bottom: 2px;
}

.review-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.review-actions-hint {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

.review-actions-row .btn {
  flex-shrink: 0;
}

.archive-actions-row .btn,
.u-review-actions-inline .btn {
  flex: 0 0 auto;
}

.u-review-actions-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* 卡片多选测验 */
.study-card-list-hint {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-tertiary);
}

.card-action-btn.active {
  color: var(--tertiary, var(--chem));
}

.study-card.card-quiz-selected {
  outline: 2px solid var(--tertiary, var(--chem));
  outline-offset: 1px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tertiary, var(--chem)) 14%, transparent);
}

.quiz-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--tertiary, var(--chem));
  color: var(--surface);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.quiz-select-bar-global {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 120;
  width: min(560px, calc(100% - 32px));
  margin-top: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

@media (max-width: 980px) {
  .quiz-select-bar-global {
    bottom: 88px;
  }
}

.quiz-select-count {
  font-weight: 800;
  font-size: var(--fs-base);
}

.quiz-select-bar-actions {
  display: flex;
  gap: 8px;
}

/* 随机周测弹窗的选项 */
.quiz-sheet-field {
  margin: 14px 0 0;
}

.quiz-sheet-field small {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}

.quiz-sheet-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quiz-sheet-options button {
  padding: 8px 16px;
  border: 1px solid var(--outline);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.quiz-sheet-options button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--surface);
}

.relearn-node-options {
  max-height: 230px;
  overflow-y: auto;
}

.grid {
  display: grid;
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: 28px;
}

.card-soft {
  background: linear-gradient(135deg, rgba(255, 217, 227, 0.36), rgba(253, 214, 167, 0.18)), var(--surface);
}

.card h2,
.card h3 {
  margin: 0;
  font-size: var(--fs-xl);
}

.muted {
  color: var(--muted);
}

.pill,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--surface-dim);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
}

.chip.math,
.pill.math {
  color: var(--primary);
  background: var(--primary-container);
}

.chip.physics,
.pill.physics {
  color: var(--physics);
  background: var(--physics-container);
}

.chip.chemistry,
.pill.chemistry {
  color: var(--tertiary);
  background: var(--tertiary-container);
}

.btn {
  min-height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out, box-shadow 0.16s ease-out, opacity 0.16s ease-out;
}

.btn:active {
  box-shadow: none;
}

.btn-primary {
  color: var(--primary-ink);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-1);
}

.btn-secondary {
  color: var(--primary-ink);
  background: var(--secondary);
  border-color: var(--secondary);
}

.btn-soft,
.btn-tonal {
  color: var(--primary);
  background: var(--primary-tint);
  border-color: transparent;
}

.btn-ghost {
  color: var(--ink-2);
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}

.btn-outline {
  color: var(--primary);
  background: transparent;
  border-color: var(--line);
}

.btn-danger {
  color: var(--primary-ink);
  background: var(--bad);
  border-color: var(--bad);
  box-shadow: var(--shadow-1);
}

.btn-danger-ghost {
  color: var(--bad);
  background: transparent;
  border-color: color-mix(in srgb, var(--bad) 34%, transparent);
  box-shadow: none;
}

.btn-danger-ghost:hover {
  background: color-mix(in srgb, var(--bad) 10%, transparent);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.btn-sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--fs-sm);
}

.seg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-dim);
}

.seg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
}

.seg-item.active,
.seg-item[aria-selected="true"] {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-1);
}

.seg-sm .seg-item {
  min-height: 28px;
  padding-inline: var(--sp-3);
  font-size: var(--fs-sm);
}

.seg-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: var(--fs-xs);
  line-height: 1;
}

.card-sub {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-dim);
  box-shadow: none;
}

.u-hidden {
  display: none;
}

.u-full-width {
  width: 100%;
}

.u-grid-span-all {
  grid-column: 1 / -1;
}

.u-mt-1 {
  margin-top: 4px;
}

.u-mt-tiny {
  margin-top: 2px;
}

.u-mt-6px {
  margin-top: 6px;
}

.u-mt-2 {
  margin-top: 8px;
}

.u-mt-3 {
  margin-top: 10px;
}

.u-mt-4 {
  margin-top: 12px;
}

.u-mt-5 {
  margin-top: 14px;
}

.u-mt-6 {
  margin-top: 16px;
}

.u-mt-7 {
  margin-top: 18px;
}

.u-mb-2 {
  margin-bottom: 6px;
}

.u-mb-4 {
  margin-bottom: 12px;
}

.u-mb-5 {
  margin-bottom: 16px;
}

.u-text-center {
  text-align: center;
}

.u-text-xs {
  font-size: var(--fs-xs);
}

.u-text-sm {
  font-size: var(--fs-sm);
}

.u-fw-600 {
  font-weight: 600;
}

.u-fw-700 {
  font-weight: 700;
}

.u-pointer {
  cursor: pointer;
}

.u-stack-3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.u-inline-between {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.u-muted-xs {
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.u-muted-sm {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.u-danger-text {
  color: var(--bad);
}

.u-link-primary {
  margin-left: 4px;
  color: var(--primary);
}

.u-svg-fit {
  max-width: 100%;
  overflow: visible;
}

.u-svg-center {
  display: block;
  margin: 0 auto;
}

.u-svg-visible {
  display: block;
  overflow: visible;
}

.u-prob-cell {
  min-width: 46px;
  text-align: right;
  color: var(--muted);
  font-weight: 700;
}

.u-focus-quiet-action {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.35);
}

.u-stroke-transition {
  transition: stroke-dashoffset 1s linear;
}

.u-upload-field {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}

.u-pet-start-note {
  margin: 2px 0 14px;
  text-align: center;
  font-size: var(--fs-sm);
}

.u-center-note-xs {
  margin-top: 8px;
  text-align: center;
  font-size: var(--fs-xs);
}

.u-admin-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.u-debug-section-label {
  margin: 12px 0 4px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.u-empty-note {
  text-align: center;
  padding: 14px 0;
}

.u-empty-note-loose {
  text-align: center;
  padding: 16px 0;
}

.u-achievement-note {
  margin: 0 0 14px;
}

.u-review-actions-inline {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.u-icon-inline {
  font-size: var(--fs-base);
  vertical-align: -2px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: var(--primary);
  background: var(--surface-mid);
}

.room-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 22px;
}

.mochi-room {
  min-height: 340px;
  display: grid;
  place-items: center;
  margin: 10px 0 24px;
}

.room-stage {
  width: min(420px, 100%);
  aspect-ratio: 1.12;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 75% 25%, rgba(253, 214, 167, 0.9), transparent 28%),
    linear-gradient(145deg, #f8caa8 0%, #ffe7cc 45%, #372835 100%);
  box-shadow: inset 0 -18px 40px rgba(29, 27, 22, 0.2), var(--shadow);
  overflow: hidden;
}

.mochi-card .mochi-room {
  min-height: 160px;
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
  margin: 0;
}

.mochi-card .progress-stack {
  margin-top: 12px;
}

.mochi-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.mochi-room-scene {
  position: relative;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 8px;
  margin: 0;
}

/* Cat sprite sheets */
.mochi-sprite {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 96px;
  height: 96px;
  background-size: auto 96px;
  filter: drop-shadow(0 22px 20px rgba(72, 48, 40, 0.24));
}

.mochi-stage-0 {
  background-image: none;
  animation: sprite-box 0.6s steps(4) infinite;
}

@keyframes sprite-box {
  from { background-position: 0 0; }
  to { background-position: -384px 0; }
}

.mochi-stage-1 {
  background-image: none;
  animation: sprite-idle-slow 1.2s steps(10) infinite;
}

@keyframes sprite-idle-slow {
  from { background-position: 0 0; }
  to { background-position: -960px 0; }
}

.mochi-stage-2 {
  background-image: none;
  animation: sprite-idle-fast 0.6s steps(10) infinite;
}

@keyframes sprite-idle-fast {
  from { background-position: 0 0; }
  to { background-position: -960px 0; }
}

.mochi-stage-3 {
  background-image: none;
  animation: sprite-dracula 0.8s steps(6) infinite;
}

@keyframes sprite-dracula {
  from { background-position: 0 0; }
  to { background-position: -576px 0; }
}

.mochi-stage-4 {
  background-image: none;
  animation: sprite-dracula 0.8s steps(6) infinite;
  filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1) drop-shadow(0 22px 20px rgba(72, 48, 40, 0.24));
}

.mochi-sprite.hibernating {
  animation-play-state: paused;
  opacity: 0.6;
  filter: grayscale(0.5);
}

.mochi-sprite.focusing {
  filter: drop-shadow(0 0 6px rgba(255, 180, 0, 0.9)) drop-shadow(0 0 14px rgba(255, 140, 0, 0.5));
}

.mochi-floaties {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 80px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}

.floatie {
  position: absolute;
  font-size: var(--fs-md);
  animation: floatie-rise 2s ease-in-out infinite;
  opacity: 0;
}

.floatie-1 {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 2.2s;
}

.floatie-2 {
  left: 50%;
  animation-delay: 0.7s;
  animation-duration: 1.8s;
}

.floatie-3 {
  left: 75%;
  animation-delay: 1.3s;
  animation-duration: 2.5s;
}

@keyframes floatie-rise {
  0% { opacity: 0; transform: translateY(60px) scale(0.8); }
  20% { opacity: 1; transform: translateY(40px) scale(1); }
  80% { opacity: 0.8; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(0) scale(0.9); }
}

.mochi-focus-bubble {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-10%);
  border: 2px solid var(--primary-container);
  border-radius: var(--r-md);
  padding: 5px 10px;
  color: var(--primary);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(134, 77, 97, 0.15);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  z-index: 4;
  animation: bubble-pulse 3s ease-in-out infinite;
}

.mochi-focus-bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 12px;
  border: 6px solid transparent;
  border-top-color: var(--primary-container);
}

.mochi-focus-bubble::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 13px;
  border: 5px solid transparent;
  border-top-color: var(--surface);
  z-index: 1;
}

@keyframes bubble-pulse {
  0%, 100% { transform: translateX(-10%) scale(1); }
  50% { transform: translateX(-10%) scale(1.04); }
}

.mochi-mini-sprite {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 48px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  mix-blend-mode: screen;
  animation: none;
}

.stage-info {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.stage-badge {
  background: var(--primary-container);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.progress-stack {
  display: grid;
  gap: 15px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: rgba(255, 249, 240, 0.72);
}

.progress-row {
  display: grid;
  gap: 6px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.progress {
  height: 14px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--surface-high);
  border: 1px solid rgba(213, 194, 198, 0.45);
}

.progress > span {
  display: block;
  height: 100%;
  width: var(--value);
  max-width: 100%;
  border-radius: inherit;
  transition: width 0.4s ease;
}

.bar-mood { background: var(--primary-container); }
.bar-hunger { background: var(--secondary-container); }
.bar-physics { background: var(--physics); }
.bar-primary { background: var(--primary); }
.bar-secondary { background: var(--secondary); }

.task-list,
.focus-list,
.timeline-list,
.settings-list {
  display: grid;
  gap: 14px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(213, 194, 198, 0.45);
}

.settings-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.settings-select {
  min-width: 140px;
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  padding: 9px 12px;
  color: var(--text);
  background: var(--surface);
  font-weight: 800;
}

.settings-anchor-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: -10px 0 var(--sp-5);
}

.settings-anchor-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out, color 0.16s ease-out;
}

.settings-anchor-chip:hover,
.settings-anchor-chip:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  background: var(--primary-tint);
  color: var(--primary);
  outline: none;
}

.settings-groups {
  display: grid;
  gap: var(--sp-3);
}

.settings-group {
  overflow: hidden;
  padding: 0;
  scroll-margin-top: 112px;
}

.settings-group-summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 18px;
  cursor: pointer;
  list-style: none;
}

.settings-group-summary::-webkit-details-marker {
  display: none;
}

.settings-group-summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.settings-group-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 22px;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}

.settings-group-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.settings-group-copy strong {
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.35;
}

.settings-group-copy span {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.settings-group-chevron {
  color: var(--ink-3);
  font-size: 22px;
  transition: transform 0.16s ease-out;
}

.settings-group[open] .settings-group-chevron {
  transform: rotate(180deg);
}

.settings-group-body {
  display: grid;
  gap: var(--sp-4);
  padding: 0 18px 18px;
}

.settings-subsection {
  display: grid;
  gap: var(--sp-4);
}

.subject-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.subject-choice-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(92, 125, 163, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  cursor: pointer;
}

.subject-choice-card:has(input:checked) {
  border-color: var(--color-primary, #6b8fc4);
  background: rgba(232, 241, 255, .9);
}

.subject-choice-card input { accent-color: var(--color-primary, #6b8fc4); }
.subject-choice-card > span:last-child { display: grid; gap: 2px; }
.subject-choice-card small { color: var(--text-muted, #718096); font-size: .78rem; }
.selected-subject-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.selected-subject-links .chip { display: flex; gap: 7px; }
.selected-subject-links small { font-weight: 400; opacity: .75; }
.selected-subject-links > .btn { align-self: center; white-space: normal; }
.personal-task-record p { white-space: pre-wrap; overflow-wrap: anywhere; }
.empty-subject-plan .empty-state { display: grid; gap: 12px; justify-items: center; padding: 24px 12px; text-align: center; }
.empty-subject-plan h3, .empty-subject-plan p { margin: 0; }

.settings-subsection h3 {
  font-size: var(--fs-lg);
}

.settings-group .settings-row {
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom-color: var(--line);
}

.settings-group .settings-row:first-child {
  padding-top: 0;
}

.settings-group .settings-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.settings-control-field {
  min-width: 220px;
  max-width: 300px;
}

.settings-group .field input,
.settings-group .field textarea,
.settings-group .field select {
  border-color: var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}

.settings-group .settings-select {
  width: 100%;
  min-width: 0;
}

.settings-group .settings-list {
  gap: var(--sp-3);
}

.settings-group .settings-list .btn {
  justify-content: center;
}

.settings-group .u-inline-between {
  gap: var(--sp-4);
}

/* ── Home AI Guide Card ─────────────────────────────────────── */

.home-ai-guide {
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0;
  overflow: hidden;
}

.home-ai-guide-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-secondary);
  user-select: none;
}

.home-ai-guide-summary::-webkit-details-marker { display: none; }

.home-ai-guide-summary .material-symbols-outlined:first-child {
  font-size: var(--fs-md);
  color: var(--primary);
  font-variation-settings: "FILL" 1;
}

.home-ai-guide-arrow {
  margin-left: auto;
  font-size: var(--fs-md);
  transition: transform 0.2s ease;
}

.home-ai-guide[open] .home-ai-guide-arrow {
  transform: rotate(180deg);
}

.home-ai-guide-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--outline);
}

.home-ai-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.home-ai-guide-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.home-ai-guide-step .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 800;
  margin-top: 2px;
}

.home-ai-guide-step strong {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}

.home-ai-guide-step p {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.home-ai-guide-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--outline);
}

.home-ai-guide-hint {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  flex: 1;
  margin: 0;
}

/* ── Commitment Gate ─────────────────────────────────────────── */

#commitment-gate {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(18, 12, 22, 0.82);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: commitment-fade .18s ease;
}

@keyframes commitment-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.commitment-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-2);
  animation: commitment-pop .22s cubic-bezier(.2,.8,.3,1.1);
}

@keyframes commitment-pop {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.commitment-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: var(--r-md);
}

.commitment-close:hover { background: var(--bg); color: var(--text); }

.commitment-tip {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 6px 0 0;
}

.commitment-custom-input {
  width: 100%;
  margin-top: 8px;
  font-size: var(--fs-base);
  padding: 10px 14px;
  border: 2px solid var(--outline);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}

.commitment-custom-input:focus { border-color: var(--primary); }

.commitment-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.commitment-subtitle {
  font-size: var(--fs-md);
  color: var(--muted);
  margin: -12px 0 0;
  line-height: 1.5;
}

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

.commitment-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.commitment-goal-input {
  width: 100%;
  font-size: var(--fs-md);
  padding: 12px 14px;
  border: 2px solid var(--outline);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}

.commitment-goal-input:focus {
  border-color: var(--primary);
}

.commitment-dur-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.commitment-dur-btn {
  padding: 12px 4px;
  border: 2px solid var(--outline);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  text-align: center;
}

.commitment-dur-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.commitment-dur-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--surface);
}

.commitment-start-btn {
  width: 100%;
  padding: 16px;
  font-size: var(--fs-md);
  font-weight: 700;
  border-radius: var(--r-md);
  background: var(--outline);
  color: var(--muted);
  border: none;
  cursor: not-allowed;
  transition: background .2s, color .2s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.commitment-start-btn.commitment-start-ready {
  background: var(--primary);
  color: var(--surface);
  cursor: pointer;
}

.commitment-start-btn.commitment-start-ready:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* deciding 阶段反馈 */
.focus-commitment-goal-label {
  font-size: var(--fs-md);
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  margin: 0 0 6px;
}
.focus-commitment-goal-label b { color: var(--surface); }

.focus-reflect-label {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  margin: 14px 0 8px;
}

.focus-reflect-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 84px;
  resize: vertical;
  font-size: var(--fs-md);
  line-height: 1.6;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.08);
  color: var(--surface);
  outline: none;
  font-family: inherit;
}

.focus-reflect-input::placeholder { color: rgba(255,255,255,0.4); }
.focus-reflect-input:focus { border-color: var(--primary); background: rgba(255,255,255,0.12); }

.focus-reflect-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 8px;
}

.focus-reflect-tags button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-full);
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
}

.focus-reflect-tags button.selected {
  color: var(--surface);
  border-color: var(--primary);
  background: rgba(255,255,255,0.18);
}

.focus-commitment-reflect {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
}

.focus-commitment-reflect .btn {
  width: min(100%, 260px);
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
}

/* 反思必填——锁住的下一步按钮 */
.focus-commitment-reflect .btn:disabled,
.focus-overlay-actions .btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

#reflect-lock-hint { transition: color .15s; }

/* 首页"你的节奏"成长卡（成长导向，不暴露失败次数） */
.commit-recap-card { display: flex; flex-direction: column; gap: 8px; }

.commit-recap-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.commit-recap-head h3 { font-size: var(--fs-base); margin: 0; flex: 1; }
.commit-recap-head .material-symbols-outlined { font-size: var(--fs-lg); color: var(--primary); }

.commit-recap-headline {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}

.commit-recap-shrink {
  font-size: var(--fs-sm);
  color: #b5743a;
  background: rgba(224, 169, 58, 0.12);
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin: 2px 0 0;
  line-height: 1.5;
}

.commit-recap-detail {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}

.commit-recap-detail:hover { text-decoration: underline; }

/* 承诺门一键预设目标 */
.commitment-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.commitment-preset-chip {
  border: 1px solid var(--primary);
  background: var(--primary-soft, rgba(124,111,205,0.12));
  color: var(--primary);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.commitment-preset-chip:hover { background: var(--primary); color: var(--surface); }

.commitment-presets-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 10px 0 0;
}

/* deciding 阶段本轮导入对照 */
.focus-commitment-imported {
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.85);
  margin: 0 0 4px;
}
.focus-commitment-imported b { color: var(--surface); }

/* ── Settings 更新指南 ─────────────────────────────────────── */

.update-step { margin-top: 16px; }

.update-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.update-step-summary {
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-base);
}

.update-cmd {
  background: #1e1b22;
  color: #e8e2ec;
  font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
  font-size: var(--fs-sm);
  line-height: 1.7;
  padding: 12px 14px;
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}

/* ── Settings AI Prompt Section ─────────────────────────────── */

.ai-prompt-entry {
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.ai-guide-prompts {
  display: grid;
  gap: var(--sp-3);
}

.ai-prompt-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.ai-prompt-summary::-webkit-details-marker { display: none; }

.ai-prompt-icon {
  font-size: var(--fs-lg);
  color: var(--primary);
  font-variation-settings: "FILL" 1;
  flex-shrink: 0;
}

.ai-prompt-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ai-prompt-meta strong {
  font-size: var(--fs-base);
}

.ai-prompt-copy-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.ai-prompt-steps {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--outline);
  background: var(--surface-alt, rgba(0,0,0,0.02));
}

.ai-prompt-steps p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}

/* ── Settings Select Wide ─────────────────────────────────── */

.settings-select-wide {
  min-width: 220px;
}

.settings-reading-preview {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(213, 194, 198, 0.62);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.58);
}

.settings-reading-preview strong {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-weight: 900;
}

.settings-reading-preview p {
  margin: 0;
  color: var(--text);
  font-weight: 750;
  line-height: 1.65;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  width: 0;
  height: 0;
  opacity: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: var(--surface-high);
  cursor: pointer;
  transition: background 0.2s ease;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--surface);
  transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.plugin-toggle-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.plugin-toggle-switch input:focus-visible + .toggle-slider {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.task-item,
.focus-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-full);
  background: var(--surface-low);
  transition: transform 0.18s ease, background 0.18s ease;
}

.task-item:hover,
.focus-item:hover {
  transform: scale(0.99);
}

.task-item.done {
  background: linear-gradient(90deg, rgba(155, 218, 165, 0.36), rgba(255, 249, 240, 0.8));
}

.task-check {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: var(--primary);
  background: var(--primary-container);
}

.task-item.done .task-check {
  color: var(--surface);
  background: var(--primary);
}

.upload-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface-low);
  border: 1px solid rgba(213, 194, 198, 0.45);
}

.upload-note {
  margin-top: 12px;
  white-space: pre-wrap;
  background: #211923;
  color: var(--bg);
  border-radius: var(--r-lg);
  padding: 14px;
  line-height: 1.65;
  max-height: 280px;
  overflow: auto;
}

.timer-setup-card {
  padding: 20px;
}

.timer-setup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.timer-setup-header h3 {
  margin: 0;
}

.timer-goal-wrap {
  margin-bottom: 14px;
}

.timer-goal-wrap label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.timer-goal-wrap input {
  width: 100%;
  border: 1.5px solid var(--primary-container);
  border-radius: var(--r-md);
  outline: none;
  padding: 10px 14px;
  color: var(--text-primary);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color 0.15s ease;
}

.timer-goal-wrap input:focus {
  border-color: var(--primary);
}

.timer-setup-row {
  margin-bottom: 4px;
}

.timer-mode-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.timer-mode-btn {
  flex: 1;
  border: 1.5px solid var(--primary-container);
  border-radius: var(--r-md);
  padding: 8px;
  color: var(--muted);
  background: none;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
}

.timer-mode-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-container);
}

.timer-mode-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.timer-setup-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.label-hint {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 400;
}

.timer-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--surface-variant);
}

.timer-input-wrap input {
  width: 52px;
  border: 0;
  outline: none;
  color: var(--primary);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 800;
  text-align: center;
}

.timer-input-wrap span {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.timer-hint {
  margin-top: 8px;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  text-align: center;
}

.timer-today-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-variant);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.timer-focus-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: var(--primary-container);
}

.timer-goal-badge {
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--r-full);
  padding: 4px 12px;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-quote {
  margin: 0;
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  opacity: 0.8;
  text-align: center;
}

.timer-ring-wrap {
  position: relative;
  width: 130px;
  height: 130px;
}

.timer-ring {
  width: 130px;
  height: 130px;
}

.timer-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timer-time {
  color: var(--text-primary);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.timer-label {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.timer-focus-btns {
  display: flex;
  gap: 8px;
}

.timer-rest-btn {
  width: 100%;
  padding: 10px;
  font-size: var(--fs-base);
}

.timer-rest-card {
  padding: 20px;
  background: #f4fff7;
}

.timer-rest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.timer-rest-badge {
  border-radius: var(--r-full);
  padding: 3px 10px;
  color: var(--tertiary);
  background: var(--tertiary-container);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.timer-rest-display {
  margin-bottom: 10px;
  text-align: center;
}

.timer-rest-time {
  color: var(--tertiary) !important;
  font-size: var(--fs-num) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}

.timer-rest-bar {
  height: 6px;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--surface-variant);
}

.timer-rest-fill {
  height: 100%;
  border-radius: var(--r-xs);
  background: var(--tertiary);
  transition: width 1s linear;
}

.timer-skip-rest-btn {
  width: 100%;
  margin: 0 0 14px;
}

.timer-rest-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rest-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--r-md);
  padding: 12px;
  background: var(--surface-high);
}

.rest-tip-do {
  background: rgba(47, 106, 63, 0.08);
}

.rest-tip-dont {
  background: rgba(200, 50, 50, 0.06);
}

.rest-tip-icon {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: var(--fs-lg);
}

.rest-tip strong {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-base);
}

.rest-tip p {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--fs-sm);
  line-height: 1.5;
  opacity: 0.8;
}

.streak-banner {
  padding: 8px 2px 10px;
  background: transparent;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 0;
}

.streak-banner-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.streak-fire-icon {
  font-size: var(--fs-lg);
  color: #e07a20;
  flex-shrink: 0;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.streak-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.streak-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.2;
}

.streak-sub {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
}

.streak-encourage {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  padding-left: 38px;
}

.streak-banner-zero {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.streak-banner-zero .streak-fire-icon {
  color: var(--muted);
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.import-card {
  padding: 16px 18px;
  border: 1.5px solid var(--primary-soft, rgba(155, 100, 130, 0.3));
}

.home-import-card {
  padding: 14px;
  border: 0;
  background: var(--surface-dim);
}

.import-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  margin-bottom: 8px;
}

.home-import-card .import-header h3 {
  font-size: var(--fs-base);
}

.import-header h3 {
  margin: 0;
  line-height: 1.3;
  font-size: var(--fs-lg);
}

.import-header-hint {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}

.import-card textarea {
  width: 100%;
  border: 1.5px solid var(--primary-container);
  border-radius: var(--r-md);
  min-height: 72px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.55;
  resize: vertical;
}

.home-right-stack .import-card,
.home-right-stack .home-review-card {
  padding: 12px;
}

.home-right-stack .import-header {
  margin-bottom: 6px;
}

.home-right-stack .import-header h3,
.home-right-stack .home-review-head h3 {
  font-size: var(--fs-md);
}

.home-right-stack .import-header > .material-symbols-outlined,
.home-right-stack .home-review-head > .material-symbols-outlined {
  width: 30px;
  height: 30px;
  font-size: var(--fs-md);
}

.home-right-stack .home-review-head {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
}

.home-right-stack .home-review-head p,
.home-right-stack .home-review-pain {
  font-size: var(--fs-xs);
}

.home-right-stack .import-card textarea {
  min-height: 64px;
  padding: 8px 10px;
  font-size: var(--fs-sm);
}

.home-right-stack .home-review-actions .btn,
.home-right-stack .home-review-import .btn,
.home-right-stack .home-import-card .btn {
  width: 100%;
}

/* daily-goal-compact removed V2.0 */

/* ── 首页引导卡（新用户空状态）────────────────────────────────────── */


.home-review-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-left: 5px solid var(--subject-color, var(--primary));
}

.home-review-card.calm {
  border-left-color: rgba(134, 77, 97, 0.25);
}

.home-review-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.home-review-head > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  color: var(--subject-color, var(--primary));
  background: var(--surface-mid);
  font-size: var(--fs-lg);
}

.home-review-head h3 {
  margin: 0;
  font-size: var(--fs-lg);
}

.home-review-head p,
.home-review-reason {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.home-review-head p {
  font-size: var(--fs-base);
  font-weight: 800;
}

.home-review-pain {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text);
  font-weight: 800;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-review-next-due {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 4px 0 8px;
  padding: 4px 10px;
  border-left: 2px solid var(--border, var(--outline));
  line-height: 1.5;
}

.home-review-spoiler {
  margin: 4px 0 8px;
  cursor: pointer;
}
.home-review-spoiler summary {
  font-size: var(--fs-sm);
  list-style: none;
  color: var(--text-muted);
  user-select: none;
}
.home-review-spoiler summary::-webkit-details-marker {
  display: none;
}
.home-review-spoiler[open] summary {
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.home-review-recall-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.home-review-reason {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.home-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-review-import {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-stepper-compact {
  margin: 0 0 4px;
  padding: 8px 10px;
  gap: 6px;
}

.review-stepper-compact .review-step-num {
  width: 18px;
  height: 18px;
  font-size: var(--fs-xs);
}

.review-stepper-compact .review-step-num .material-symbols-outlined {
  font-size: var(--fs-sm);
}

.review-stepper-compact .review-step-text {
  font-size: var(--fs-xs);
  padding-top: 1px;
}

.home-review-msg {
  font-size: var(--fs-sm);
  padding: 8px 10px;
  border-radius: var(--r-md);
  margin: 0;
  line-height: 1.5;
}

.home-review-msg-error {
  color: var(--danger, var(--bad));
  background: rgba(192, 57, 43, 0.08);
}

.home-review-msg-success {
  color: var(--success, var(--good));
  background: rgba(39, 174, 96, 0.08);
}

/* daily-goal-row, goal-dot styles removed V2.0 */

.debug-card {
  padding: 16px 20px;
  border-style: dashed;
}

.debug-toggle {
  width: 100%;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--secondary);
  background: none;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 800;
}

.debug-toggle .toggle-arrow {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.debug-toggle[aria-expanded="true"] .toggle-arrow {
  transform: rotate(180deg);
}

.debug-body {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.debug-body p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
}

.debug-resource-row {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--surface-low);
}

.debug-resource-info {
  display: grid;
  gap: 2px;
}

.debug-resource-info span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.debug-resource-info strong {
  color: var(--text);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-lg);
}

.debug-stepper {
  display: flex;
  gap: 5px;
}

.debug-step-btn {
  min-width: 38px;
  height: 30px;
  border: 1px solid rgba(213, 194, 198, 0.7);
  border-radius: var(--r-full);
  color: var(--primary);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 800;
}

#debug-panel {
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 9999;
  min-width: 320px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-md);
  color: var(--surface);
  background: rgba(30, 20, 10, 0.92);
  backdrop-filter: blur(8px);
  font-size: var(--fs-xs);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

.debug-float-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.debug-float-toggle,
.debug-float-actions button {
  min-height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-full);
  padding: 0 8px;
  color: var(--surface);
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.debug-float-body {
  display: grid;
  gap: 9px;
  max-height: min(70vh, 680px);
  overflow: auto;
  padding-right: 2px;
}

.debug-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1);
}

.debug-tabs button,
.debug-reset-config,
.debug-config-row button {
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-full);
  padding: 0 10px;
  color: var(--surface);
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.debug-tabs button.active {
  color: #3a2716;
  background: var(--gold);
  border-color: transparent;
}

.debug-float-row {
  display: grid;
  grid-template-columns: 38px 26px 1fr;
  align-items: center;
  gap: 8px;
}

.debug-float-row strong {
  color: var(--gold);
}

.debug-float-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.debug-float-actions input,
.debug-config-row input {
  width: 64px;
  min-height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-md);
  padding: 3px 6px;
  color: var(--surface);
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
}

.debug-total-row {
  align-items: center;
}

.debug-config-section {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
}

.debug-config-section h4 {
  margin: 0 0 2px;
  color: var(--gold);
  font-size: var(--fs-xs);
}

.debug-config-row {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(90px, auto) auto 16px;
  align-items: center;
  gap: 7px;
}

.debug-config-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.debug-config-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.78);
}

.debug-config-saved {
  color: #9bdaa5;
  font-style: normal;
  font-weight: 900;
}

.debug-reset-config {
  width: 100%;
  color: var(--gold);
}

.debug-float-actions button:hover {
  background: rgba(255, 255, 255, 0.22);
}

.subject-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.subject-tab {
  border: 1px solid rgba(213, 194, 198, 0.5);
  border-radius: var(--r-full);
  padding: 10px 20px;
  background: var(--surface-mid);
  color: var(--text);
  font-weight: 800;
}

.subject-tab.active {
  color: var(--surface);
  background: var(--subject-color, var(--primary));
  border-color: transparent;
  box-shadow: var(--soft-shadow);
}

.stats-stack {
  display: grid;
  gap: 20px;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.achievement-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(213, 194, 198, 0.45);
}

.achievement-item.unlocked-glow {
  padding: 12px;
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), transparent);
}

.achievement-item:last-child {
  border-bottom: none;
}

.achievement-item.unlocked-glow {
  border-bottom: 1.5px solid rgba(255, 215, 0, 0.35);
}

.achievement-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

.achievement-body {
  flex: 1;
  min-width: 0;
}

.achievement-body p {
  margin: 3px 0 0;
}

.achievement-item.locked .achievement-icon {
  opacity: 0.5;
}

.achievement-item.locked strong {
  color: var(--muted);
}

.achievement-level {
  position: absolute;
  right: -4px;
  bottom: -4px;
  padding: 1px 4px;
  border-radius: var(--r-xs);
  color: var(--surface);
  background: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.tier-dots {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.tier-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--surface-high);
  border: 1px solid var(--outline);
}

.tier-dot.filled {
  background: var(--primary);
  border-color: var(--primary);
}

.achievement-item.maxed .achievement-icon {
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.recent-unlocked {
  margin-bottom: 20px;
}

.recent-badges {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.recent-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 72px;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}

.achievements-page {
  display: grid;
  gap: var(--sp-4);
}

.achievements-page .page-head {
  margin-bottom: 0;
}

.lottery-entry-card {
  padding: var(--sp-4) 18px;
}

.lottery-entry-card.has-tickets {
  background: var(--surface);
}

.lottery-entry-card.is-quiet {
  background: color-mix(in srgb, var(--surface) 74%, var(--surface-dim));
}

.lottery-entry-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.lottery-entry-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.lottery-tickets-display {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: min(100%, 300px);
}

.lottery-tickets-num {
  color: var(--primary);
  font-size: var(--fs-num);
  font-weight: 900;
  line-height: 1;
}

.lottery-entry-card.is-quiet .lottery-tickets-num {
  color: var(--ink-3);
}

.lottery-tickets-label {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.lottery-tickets-label strong {
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.2;
}

.lottery-entry-card.is-quiet .lottery-tickets-label strong {
  color: var(--ink-2);
}

.lottery-entry-card.is-quiet .lottery-tickets-label span {
  color: var(--ink-3);
}

.lottery-rule-text {
  margin-top: 8px;
  text-align: center;
  font-size: var(--fs-xs);
}

.lottery-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lottery-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface2, rgba(255,255,255,0.04));
}

.lottery-history-date {
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  min-width: 72px;
}

.lottery-history-label {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 500;
}

.lottery-history-type {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--r-md);
  white-space: nowrap;
}

.summer-reward-wallet-card {
  display: grid;
  gap: 16px;
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, #fff1c9), var(--surface));
}

.summer-reward-wallet-head,
.summer-reward-wallet-ledger-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.summer-reward-wallet-head h3 {
  margin: 0 0 4px;
  font-size: var(--fs-xl);
}

.summer-reward-wallet-head p,
.summer-reward-wallet-ledger-head span {
  margin: 0;
}

.summer-reward-wallet-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--gold) 20%, var(--surface));
  color: #9b5a12;
  font-size: 26px;
}

.summer-reward-wallet-stats {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 10px;
}

.summer-reward-wallet-stat {
  display: grid;
  align-content: center;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.summer-reward-wallet-stat span {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.summer-reward-wallet-stat strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 1000;
}

.summer-reward-wallet-stat.is-balance {
  border-color: color-mix(in srgb, var(--gold) 35%, var(--line));
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
}

.summer-reward-wallet-stat.is-balance strong {
  color: #9b580f;
  font-size: clamp(27px, 4vw, 36px);
}

.summer-reward-redeem-btn {
  width: 100%;
  min-height: 48px;
}

.summer-reward-wallet-redeem-note {
  margin: -8px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.summer-reward-carryover-btn {
  width: 100%;
  min-height: 44px;
}

.summer-reward-wallet-ledger-head {
  align-items: center;
  padding-top: 2px;
}

.summer-reward-wallet-ledger-head > div {
  display: grid;
  gap: 2px;
}

.summer-reward-wallet-ledger-head span {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
}

.summer-honor-card {
  display: grid;
  gap: var(--sp-3);
}

.summer-reward-history-list {
  display: grid;
  gap: 8px;
}

.summer-reward-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(154, 98, 34, 0.12);
  border-radius: 12px;
  background: rgba(255, 252, 245, 0.8);
}

.summer-reward-history-item.plain,
.summer-reward-history-item.coin {
  border-color: color-mix(in srgb, var(--gold) 18%, transparent);
  background: color-mix(in srgb, var(--surface) 84%, var(--surface-dim));
}

.summer-reward-history-item.big,
.summer-reward-history-item.jackpot {
  border-color: rgba(178, 51, 54, 0.16);
  background: linear-gradient(135deg, rgba(255, 244, 188, 0.78), rgba(255, 225, 204, 0.62));
}

.summer-reward-history-date {
  display: block;
  margin-bottom: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 800;
}

.summer-reward-history-item strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 1000;
}

.summer-reward-history-item p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.summer-reward-history-prize {
  display: grid;
  justify-items: end;
  min-width: 68px;
}

.summer-reward-history-prize span {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 800;
}

.summer-reward-history-prize strong {
  color: #a2601d;
  font-size: 15px;
}

.reward-ledger-redeem {
  border-color: color-mix(in srgb, var(--good) 20%, var(--line));
  background: color-mix(in srgb, var(--good) 6%, var(--surface));
}

.reward-ledger-redeem .summer-reward-history-prize strong {
  color: color-mix(in srgb, var(--good) 75%, #18362b);
}

.reward-ledger-legacy {
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
}

.reward-ledger-legacy .summer-reward-history-prize strong {
  color: #9b580f;
}

.reward-ledger-revoke,
.reward-forgot-pin {
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reward-ledger-revoke {
  margin-top: 3px;
}

.summer-reward-history-item.is-revoked {
  opacity: 0.62;
  background: var(--surface-dim);
}

.summer-reward-history-item.is-revoked > div:first-child strong,
.summer-reward-history-item.is-revoked .summer-reward-history-prize strong {
  text-decoration: line-through;
}

.modal:has(.reward-redeem-modal-head) {
  width: min(480px, 100%);
}

.modal:has(.reward-rules-modal) {
  width: min(760px, 100%);
}

.reward-rules-head {
  margin-bottom: 18px;
}

.reward-rules-head h2,
.reward-rules-list h3 {
  margin: 0;
}

.reward-rules-head p {
  margin: 5px 0 0;
}

.reward-rules-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reward-rules-summary article,
.reward-rules-list section {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--primary-soft) 32%, var(--surface));
  padding: 15px;
}

.reward-rules-summary .material-symbols-outlined {
  color: var(--primary);
}

.reward-rules-summary strong {
  display: block;
  margin-top: 8px;
}

.reward-rules-summary p,
.reward-rules-list p {
  margin: 7px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.reward-rules-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.reward-rules-list section {
  background: var(--surface);
}

.reward-redeem-modal-head h2 {
  margin: 0 0 5px;
  font-size: var(--fs-xl);
}

.reward-redeem-modal-head p {
  margin: 0;
  line-height: 1.55;
}

.reward-redeem-form {
  gap: 14px;
}

.reward-redeem-form input[inputmode="numeric"] {
  min-height: 50px;
  font-size: var(--fs-lg);
  font-weight: 800;
}

.reward-redeem-form input[pattern="[0-9]{4}"] {
  letter-spacing: 0.45em;
  text-align: center;
}

.reward-redeem-notice,
.reward-redeem-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--primary-tint) 75%, var(--surface));
  color: var(--ink-2);
}

.reward-redeem-warning {
  background: color-mix(in srgb, var(--bad) 9%, var(--surface));
}

.reward-redeem-notice .material-symbols-outlined,
.reward-redeem-warning .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--primary);
}

.reward-redeem-warning .material-symbols-outlined {
  color: var(--bad);
}

.reward-redeem-notice p,
.reward-redeem-warning p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.reward-balance-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
}

.reward-balance-callout span {
  color: var(--text-secondary);
  font-weight: 800;
}

.reward-balance-callout strong {
  color: #9b580f;
  font-size: 26px;
  font-weight: 1000;
}

.reward-amount-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
}

.reward-amount-option.is-selected {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: var(--primary-tint);
}

.reward-amount-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.reward-amount-option span {
  display: grid;
  gap: 2px;
}

.reward-amount-option small {
  color: var(--text-secondary);
}

.reward-form-error {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bad) 9%, var(--surface));
  color: var(--bad);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.reward-forgot-pin {
  justify-self: center;
}

.badge-summary {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0;
}

.badge-summary-compact {
  justify-content: flex-start;
  gap: var(--sp-3);
  padding: 0;
}

.badge-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.badge-summary-compact .badge-summary-item {
  flex-direction: row;
  gap: 5px;
}

.badge-summary-num {
  color: var(--on-surface);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1;
}

.badge-summary-label {
  color: var(--muted);
  font-size: 12px;
}

.badge-summary-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
}

.badge-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.badge-item {
  display: block;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
}

.badge-item.badge-earned {
  border-color: var(--line);
  background: var(--surface);
}

.badge-item.badge-new {
  border: 1px solid rgba(134, 77, 97, 0.3);
  background: rgba(134, 77, 97, 0.12);
}

.badge-item.badge-empty {
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: transparent;
}

.badge-item.badge-empty .badge-summary-row {
  color: var(--ink-3);
}

.badge-item.badge-earned .badge-summary-row:hover,
.badge-item.badge-earned .badge-summary-row:focus-visible {
  background: color-mix(in srgb, var(--primary-tint) 48%, transparent);
}

.badge-item.badge-empty .badge-summary-row:hover,
.badge-item.badge-empty .badge-summary-row:focus-visible {
  background: color-mix(in srgb, var(--surface-dim) 42%, transparent);
}

/* 暑假计划成就（荣誉项，无展开箭头，故 3 列） */
.summer-honor-item .badge-summary-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  cursor: default;
}

.summer-honor-item.badge-earned {
  border: 1px solid rgba(120, 90, 40, 0.28);
  background: rgba(255, 216, 130, 0.16);
}

.badge-summary-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.badge-summary-row::-webkit-details-marker {
  display: none;
}

.badge-summary-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(134, 77, 97, 0.22);
}

.badge-icon {
  display: flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--primary-tint);
  color: var(--primary);
}

.badge-empty .badge-icon {
  background: transparent;
  color: var(--ink-3);
  filter: grayscale(1);
  opacity: 0.78;
}

.badge-icon .material-symbols-outlined {
  font-size: 22px;
}

.badge-info {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.badge-info strong {
  font-size: 14px;
}

.badge-info .muted {
  font-size: 12px;
}

.badge-empty .badge-info strong,
.badge-empty .badge-info .muted,
.badge-empty .badge-total,
.badge-empty .badge-expand-icon {
  color: var(--ink-3);
}

.badge-empty .badge-total {
  background: transparent;
  font-weight: 700;
}

.badge-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.badge-total {
  color: var(--on-surface);
  font-size: 16px;
  font-weight: 700;
}

.badge-earned .badge-total {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--primary-tint);
  color: var(--primary);
}

.badge-new-tag {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.badge-expand-icon {
  color: var(--muted);
  font-size: 22px;
  transition: transform 0.18s ease;
}

.badge-item[open] .badge-expand-icon {
  transform: rotate(180deg);
}

.badge-rule {
  display: grid;
  gap: 8px;
  margin: 0 12px 12px 60px;
  padding: 12px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface-dim);
}

.badge-empty .badge-rule {
  background: color-mix(in srgb, var(--surface-dim) 58%, transparent);
}

.badge-rule p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.badge-rule strong {
  display: inline-block;
  min-width: 64px;
  color: var(--primary-dark);
  font-size: 12px;
}

/* ── Lottery Overlay ─────────────────────────────────────────────── */

.lottery-overlay {
  --lottery-bg: #2d1420;
  --lottery-bg-mid: color-mix(in srgb, var(--lottery-bg) 82%, #000);
  --lottery-bg-deep: color-mix(in srgb, var(--lottery-bg) 60%, #000);
  --lottery-card: color-mix(in srgb, var(--lottery-bg) 72%, #000);
  --lottery-card-deep: color-mix(in srgb, var(--lottery-bg) 46%, #000);
  --lottery-ink: #fffaf4;
  --lottery-ink-dark: color-mix(in srgb, var(--ink) 86%, #000);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 700;
  display: flex;
  overflow: hidden;
  background:
    radial-gradient(125% 80% at 50% -6%, rgba(134, 77, 97, 0.46), transparent 58%),
    radial-gradient(120% 90% at 50% 116%, rgba(var(--gold-rgb), 0.12), transparent 56%),
    linear-gradient(180deg, var(--lottery-bg) 0%, var(--lottery-bg-mid) 52%, var(--lottery-bg-deep) 100%);
  box-shadow: inset 0 0 240px rgba(0, 0, 0, 0.66);
}

body.lottery-mode .side-nav,
body.lottery-mode .top-bar,
body.lottery-mode .bottom-nav {
  visibility: hidden;
  pointer-events: none;
}

.lottery-overlay[hidden] {
  display: none;
}

.lottery-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lottery-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 64px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.lottery-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.lottery-sidebar {
  display: none;
}

.lottery-stage {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lottery-stage .lottery-phase {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lottery-sidebar-muyu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

.muyu-sidebar-label {
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .lottery-overlay {
    overflow-y: auto;
  }
  .lottery-inner {
    height: auto;
    min-height: 100%;
  }
  .lottery-stage {
    padding: 16px 12px;
    overflow: visible;
  }
  .pick-card {
    width: 100px;
    height: 140px;
  }
  .pick-card-mark {
    font-size: var(--fs-xl);
  }
  .card-back-label {
    font-size: var(--fs-xs);
  }
  .lottery-result-bigcard {
    width: 160px;
    height: 220px;
  }
  .result-bigcard-name {
    font-size: var(--fs-lg);
  }
}

.lottery-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
}

.lottery-title {
  margin: 0;
  color: var(--gold);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: 0.14em;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gold) 28%, var(--surface)) 0%,
    var(--gold) 72%,
    color-mix(in srgb, var(--gold) 76%, var(--primary)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 22px rgba(var(--gold-rgb), 0.24);
}

.lottery-header-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.lottery-tickets-hint {
  padding: 3px 12px;
  border-radius: var(--r-full);
  background: rgba(134, 77, 97, 0.22);
  color: var(--lottery-ink);
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}

.pity-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pity-inline-label {
  color: rgba(255, 255, 255, 0.38);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pity-inline-track {
  width: 68px;
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.pity-inline-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--primary), var(--gold));
  transition: width 0.4s ease;
}

.pity-inline-count {
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 22px;
}

.pity-inline-guaranteed {
  color: var(--gold);
  font-size: var(--fs-xs);
  font-weight: 800;
  min-width: 22px;
}

/* ── B: 运气槽 (Pity Bar) ──────────────────────────────────────── */

.lottery-pity-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
}

.pity-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.pity-track {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1);
}

.pity-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  transition: width 0.5s ease;
}

.pity-count {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.pity-guaranteed {
  color: var(--gold);
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}

/* ── Dice Panel ────────────────────────────────────────────────── */

.lottery-dice-panel {
  width: 100%;
  padding: 22px 14px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 70% at 50% 35%, rgba(var(--gold-rgb), 0.14), transparent 70%),
    rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.lottery-dice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--surface);
}

.lottery-dice-head strong {
  font-size: var(--fs-md);
}

.lottery-dice-head span {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.lottery-dice {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.lottery-die-slot {
  display: grid;
  flex: 1;
  justify-items: center;
  gap: 8px;
}

.lottery-die-slot .btn {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  font-size: var(--fs-xs);
}

.lottery-die {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 2px solid rgba(var(--gold-rgb), 0.34);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #fffdf8, #f3e7d4);
  color: var(--primary-dark);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 50px;
  font-weight: 800;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.08s ease;
}

.lottery-die.rolling {
  transform: rotate(8deg) scale(1.08);
}

.lottery-die.locked {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.45), 0 10px 28px rgba(0, 0, 0, 0.18);
  transform: scale(1.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lottery-die-slot.locked .btn {
  opacity: 0.3;
  pointer-events: none;
}

.lottery-dice-result {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
  min-height: 18px;
}

/* ── Dice sum result (both locked) ──────────────────────────────── */

.dice-sum-pop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 2px;
  animation: sum-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.dice-sum-num {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: var(--surface);
  letter-spacing: -2px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.dice-sum-label {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.dice-sum-pop.bonus .dice-sum-num {
  color: var(--gold);
  text-shadow: 0 0 28px rgba(var(--gold-rgb), 0.8);
  animation: sum-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             bonus-pulse 0.9s 0.5s ease-in-out infinite alternate;
}

.dice-sum-pop.bonus .dice-sum-label {
  color: var(--gold);
  font-weight: 700;
}

.dice-sum-pop[data-action="bonus-proceed"] {
  cursor: pointer;
  border-radius: var(--r-md);
  padding: 10px 20px 14px;
  transition: background 0.15s ease;
}

.dice-sum-pop[data-action="bonus-proceed"]:hover {
  background: rgba(var(--gold-rgb), 0.1);
}

.dice-sum-pop[data-action="bonus-proceed"]:active {
  background: rgba(var(--gold-rgb), 0.2);
}

.dice-sum-tap-hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(var(--gold-rgb), 0.86);
  letter-spacing: 0.5px;
  animation: tap-hint-blink 1.1s 0.6s ease-in-out infinite;
}

@keyframes tap-hint-blink {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; }
}

@keyframes sum-pop {
  from { opacity: 0; transform: scale(0.25); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bonus-pulse {
  from { text-shadow: 0 0 18px rgba(var(--gold-rgb), 0.55); }
  to   { text-shadow: 0 0 42px rgba(var(--gold-rgb), 1), 0 0 72px rgba(var(--gold-rgb), 0.45); }
}

/* ── Phase structure ────────────────────────────────────────── */

.lottery-action-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 78%, var(--gold)) 56%, var(--gold) 128%);
  color: var(--surface);
  cursor: pointer;
  overflow: hidden;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 32px rgba(134, 77, 97, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  animation: lottery-btn-pulse 2.6s ease-in-out infinite;
}

.lottery-action-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 38%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  animation: lottery-btn-sheen 3.4s ease-in-out infinite;
}

.lottery-action-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 38px rgba(var(--gold-rgb), 0.24), 0 14px 32px rgba(134, 77, 97, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lottery-action-btn:disabled,
.lottery-action-btn.is-rolling {
  animation: none;
  opacity: 0.6;
  cursor: default;
}

.lottery-action-btn:disabled::after,
.lottery-action-btn.is-rolling::after {
  display: none;
}

@keyframes lottery-btn-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes lottery-btn-sheen {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}

.phase-label {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.phase-hint {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
  text-align: center;
}

.pity-tease {
  margin: 6px 0 0;
  color: var(--gold);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-align: center;
}

/* ── Showcase grid ──────────────────────────────────────────── */

.lottery-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.showcase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px 15px;
  border: 1px solid color-mix(in srgb, var(--item-color, var(--primary)) 48%, transparent);
  border-radius: var(--r-md);
  background:
    linear-gradient(162deg, color-mix(in srgb, var(--item-color, var(--primary)) 26%, var(--lottery-card)), var(--lottery-card-deep));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  overflow: hidden;
  opacity: 0;
  animation: showcase-deal 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.showcase-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--item-color, var(--primary));
  opacity: 0.92;
}

.showcase-card:hover {
  border-color: color-mix(in srgb, var(--item-color, var(--primary)) 75%, transparent);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 18px color-mix(in srgb, var(--item-color, var(--primary)) 30%, transparent);
}

@keyframes showcase-deal {
  from { opacity: 0; transform: translateY(24px) scale(0.88) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}

.showcase-type {
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--item-color, var(--primary)) 20%, transparent);
  color: color-mix(in srgb, var(--item-color, var(--primary)) 85%, var(--surface));
  font-size: var(--fs-xs);
  font-weight: 800;
}

.showcase-label {
  color: var(--lottery-ink);
  font-size: var(--fs-base);
  line-height: 1.35;
  word-break: break-all;
  font-weight: 600;
}

/* ── Draw phase: deck + hand ────────────────────────────────── */

.lottery-draw-area {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-bottom: 12px;
}

.lottery-deck {
  position: relative;
  width: 72px;
  height: 96px;
  flex-shrink: 0;
}

.deck-card {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--lottery-card), var(--lottery-card-deep));
  transition: opacity 0.3s ease;
}

.deck-card--1 { transform: translate(-3px, -3px); }
.deck-card--2 { transform: translate(0, 0); }
.deck-card--3 { transform: translate(3px, 3px); }

.deck--empty .deck-card {
  opacity: 0.18;
}

@keyframes shuffling-anim {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-5px, -2px) rotate(-4deg); }
  50%  { transform: translate(5px, 2px) rotate(4deg); }
  75%  { transform: translate(-3px, 4px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.shuffling .deck-card {
  animation: shuffling-anim 0.35s ease 2;
}

.lottery-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  flex: 1;
}

.hand-card {
  display: grid;
  place-items: center;
  width: 46px;
  height: 62px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--lottery-card), var(--lottery-card-deep));
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.hand-card--in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Pick phase: 5-card row with 3D flip ────────────────────── */

.lottery-pick-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.pick-card {
  position: relative;
  width: 130px;
  height: 182px;
  perspective: 900px;
  cursor: pointer;
}

.pick-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.pick-card--flipped .pick-card-inner {
  transform: rotateY(180deg);
}

.pick-card-front,
.pick-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  padding: 6px;
  backface-visibility: hidden;
}

.pick-card-front {
  border: 2px solid rgba(var(--gold-rgb), 0.22);
  background:
    repeating-linear-gradient(45deg, rgba(var(--gold-rgb), 0.05) 0 7px, transparent 7px 14px),
    linear-gradient(155deg, var(--lottery-card), var(--lottery-card-deep));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pick-card[data-action="flip-pick-card"]:hover .pick-card-front {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.07);
}

.pick-card-back {
  transform: rotateY(180deg);
  border: 2px solid color-mix(in srgb, var(--item-color, var(--primary)) 55%, transparent);
  background: linear-gradient(155deg, var(--lottery-card), var(--lottery-bg-deep));
}

.pick-card-mark {
  color: rgba(var(--gold-rgb), 0.62);
  font-size: 38px;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(var(--gold-rgb), 0.28);
}

.card-back-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.card-back-tier {
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--item-color, var(--primary)) 22%, transparent);
  color: color-mix(in srgb, var(--item-color, var(--primary)) 80%, var(--surface));
  font-size: var(--fs-xs);
  font-weight: 800;
}

.card-back-label {
  color: var(--lottery-ink);
  font-size: var(--fs-md);
  line-height: 1.35;
  word-break: break-all;
  font-weight: 700;
}

.pick-card--chosen .pick-card-inner {
  border-radius: var(--r-md);
  box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(var(--gold-rgb), 0.5);
}

.pick-card--other {
  opacity: 0.62;
  filter: grayscale(0.3);
  cursor: default;
}

@keyframes pick-choosable-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.3); }
  50%       { box-shadow: 0 0 0 7px rgba(var(--gold-rgb), 0); }
}

.pick-card--choosable .pick-card-inner {
  border-radius: var(--r-md);
  animation: pick-choosable-pulse 1.2s ease-in-out infinite;
}

.pick-choose-btn {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  white-space: nowrap;
  font-size: var(--fs-xs);
}

.lottery-flip-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}

/* ── Pity hint ──────────────────────────────────────────────────── */

.pity-hint-text {
  margin: -6px 0 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: var(--fs-xs);
  text-align: center;
}

/* ── Dice tip (sidebar legacy) / bonus hint (new inline) ────────── */

.lottery-dice-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  margin-top: 2px;
}

.dice-tip-rule {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.dice-tip-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--fs-xs);
}

.dice-tip-effect {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-xs);
}

.dice-bonus-hint {
  margin: -4px 0 0;
  padding: 7px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.48);
  font-size: var(--fs-xs);
  text-align: center;
}

/* ── Spread phase ───────────────────────────────────────────────── */

.lottery-spread {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  min-height: 120px;
  padding: 8px 0 12px;
}

.spread-card {
  position: relative;
  width: 70px;
  height: 96px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--lottery-card), var(--lottery-card-deep));
  cursor: pointer;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.22);
  font-size: 32px;
  user-select: none;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease,
              border-color 0.18s ease;
}

.spread-card.is-piled {
  transform: translate(var(--pile-tx, 0), var(--pile-ty, 0)) rotate(var(--pile-rot, 0deg));
  opacity: 0.5;
}

.spread-card:not(.is-piled):not(.is-selected):hover {
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-6px) scale(1.04);
}

.spread-card.is-selected {
  opacity: 0;
  transform: translateY(50px) scale(0.7);
  pointer-events: none;
}

.spread-card-mark {
  font-size: 28px;
}

/* ── Hand slots ─────────────────────────────────────────────────── */

.lottery-hand-area {
  text-align: center;
  padding-top: 4px;
}

.hand-hint {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--fs-xs);
}

.lottery-hand-slots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.hand-slot {
  width: 62px;
  height: 84px;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.18);
  font-size: 26px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.hand-slot.filled {
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  animation: slot-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slot-pop {
  from { transform: scale(0.7); }
  to   { transform: scale(1); }
}

/* ── Result scene (full-screen overlay inside .lottery-inner) ─── */

.lottery-result-scene {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px 24px;
  background: color-mix(in srgb, var(--lottery-bg-deep) 92%, transparent);
  animation: result-scene-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}

@keyframes result-scene-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lottery-result-bigcard {
  width: 190px;
  height: 260px;
  border-radius: var(--r-lg);
  border: 2px solid color-mix(in srgb, var(--item-color, var(--primary)) 55%, transparent);
  background: linear-gradient(155deg, color-mix(in srgb, var(--item-color, var(--primary)) 14%, var(--lottery-card)), var(--lottery-bg-deep));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  box-shadow:
    0 0 48px color-mix(in srgb, var(--item-color, var(--primary)) 32%, transparent),
    0 24px 60px rgba(0, 0, 0, 0.5);
  animation: bigcard-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}

.lottery-result-bigcard[data-tier="bigReward"] {
  animation: bigcard-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), bigcard-glow 2s 0.55s ease-in-out infinite;
}

@keyframes bigcard-pop {
  from { transform: scale(0.5) translateY(32px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

@keyframes bigcard-glow {
  0%, 100% { box-shadow: 0 0 48px color-mix(in srgb, var(--item-color, var(--primary)) 32%, transparent), 0 24px 60px rgba(0, 0, 0, 0.5); }
  50%       { box-shadow: 0 0 82px color-mix(in srgb, var(--item-color, var(--primary)) 68%, transparent), 0 24px 60px rgba(0, 0, 0, 0.5); }
}

.result-bigcard-tier {
  padding: 4px 14px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--item-color, var(--primary)) 22%, transparent);
  color: color-mix(in srgb, var(--item-color, var(--primary)) 90%, var(--surface));
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-bigcard-name {
  color: var(--lottery-ink);
  font-size: var(--fs-lg);
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.3;
}

.lottery-result-panel {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  animation: result-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lottery-result-prize-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--item-color, var(--primary)) 10%, rgba(255, 255, 255, 0.03));
  border: 1px solid color-mix(in srgb, var(--item-color, var(--primary)) 28%, transparent);
  width: 100%;
}

.lottery-result-tier-badge {
  padding: 3px 12px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--item-color, var(--primary)) 20%, transparent);
  color: color-mix(in srgb, var(--item-color, var(--primary)) 90%, var(--surface));
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lottery-result-prize-name {
  margin: 0;
  color: var(--lottery-ink);
  font-size: var(--fs-xl);
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.2;
}

.lottery-result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.lottery-share-btn {
  padding: 10px 16px;
  font-size: var(--fs-base);
  width: 100%;
}

/* C: Near-miss splash ─────────────────────────────────────────── */

/* ── Big-win celebration (大奖/保底) ──────────────────────────── */

.lottery-bigwin-burst {
  position: fixed;
  inset: 0;
  z-index: 710;
  pointer-events: none;
  overflow: hidden;
}

.bigwin-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 42%, rgba(var(--gold-rgb), 0.42), transparent 70%);
  animation: bigwin-flash 2.2s ease forwards;
}

@keyframes bigwin-flash {
  0% { opacity: 0; }
  14% { opacity: 1; }
  60% { opacity: 0.7; }
  100% { opacity: 0; }
}

.bigwin-sparkles span {
  position: absolute;
  top: -8%;
  animation-name: bigwin-fall;
  animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes bigwin-fall {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(108vh) rotate(320deg); }
}

.near-miss-splash {
  position: fixed;
  inset: 0;
  z-index: 710;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: near-miss-life 1.5s ease forwards;
}

@keyframes near-miss-life {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.near-miss-text {
  padding: 14px 28px;
  border-radius: var(--r-lg);
  background: rgba(224, 112, 32, 0.9);
  color: var(--surface);
  font-size: var(--fs-xl);
  font-weight: 900;
  box-shadow: 0 0 40px rgba(224, 112, 32, 0.6);
  transform: scale(1);
  animation: near-miss-pop 0.22s ease;
}

.near-miss-splash.is-win .near-miss-text {
  background: rgba(var(--gold-rgb), 0.92);
  color: var(--ink);
  box-shadow: 0 0 40px rgba(var(--gold-rgb), 0.6);
}

@keyframes near-miss-pop {
  from { transform: scale(0.6); }
  to   { transform: scale(1); }
}

/* ── Result card ───────────────────────────────────────────────── */

.lottery-result {
  width: 100%;
  padding: 14px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  animation: result-pop 0.3s ease;
}

@keyframes result-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.lottery-result-pity-banner {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: var(--fs-base);
  font-weight: 800;
}

.lottery-result-upgrade {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
}

.lottery-result-item {
  margin: 0 0 8px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.9);
  color: var(--lottery-ink-dark);
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.35;
}

.lottery-result-item span {
  display: inline-flex;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--item-color) 16%, var(--surface));
  color: color-mix(in srgb, var(--item-color) 72%, var(--lottery-ink-dark));
  font-size: var(--fs-xs);
  vertical-align: 1px;
}

.lottery-result-pity-hint {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: var(--fs-xs);
}

/* ── Again / Done ─────────────────────────────────────────────── */

.lottery-spin-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
}

.lottery-done-msg {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  text-align: center;
}

/* ── Muyu widget (sidebar) ──────────────────────────────────── */

.muyu-float-inner {
  position: relative;
  width: 64px;
  height: 52px;
  cursor: pointer;
}

.muyu-float-head {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 42px;
  border-radius: 50% 50% 44% 44%;
  background: linear-gradient(170deg, #c68c4e, #7a4624);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.32);
}

.muyu-hollow {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 22px;
  height: 9px;
  border-radius: var(--r-full);
  background: rgba(30, 14, 6, 0.44);
}

.muyu-blush {
  position: absolute;
  bottom: 8px;
  width: 9px;
  height: 5px;
  border-radius: var(--r-full);
  background: rgba(210, 70, 70, 0.35);
}

.muyu-blush--l { left: 4px; }
.muyu-blush--r { right: 4px; }

/* Mallet: shaft (handle, top) → head (ball, bottom), angled from upper-right toward body */
.muyu-float-mallet {
  position: absolute;
  right: 2px;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(-38deg);
  transform-origin: top center;
  transition: transform 0.18s ease;
}

.muyu-float-inner.tapped .muyu-float-mallet {
  animation: muyu-hit-float 0.28s ease;
}

@keyframes muyu-hit-float {
  40% { transform: rotate(-58deg); }
}

.muyu-mallet-shaft {
  width: 5px;
  height: 22px;
  border-radius: var(--r-full);
  background: #c4895a;
}

.muyu-mallet-head {
  width: 14px;
  height: 14px;
  margin-top: -1px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #d8a85f, #9a6535);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}


.muyu-merit {
  position: absolute;
  top: 8px;
  right: 14px;
  color: #f6d376;
  font-size: var(--fs-xs);
  font-weight: 900;
  pointer-events: none;
  animation: merit-float 0.9s ease forwards;
}

@keyframes merit-float {
  to { opacity: 0; transform: translateY(-28px); }
}

.milestone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(213, 194, 198, 0.45);
}

.milestone-row:last-child {
  border-bottom: none;
}

.milestone-row.unlocked strong {
  color: var(--primary);
}

.milestone-icon {
  width: 28px;
  flex-shrink: 0;
  text-align: center;
  font-size: var(--fs-lg);
}

.milestone-info {
  flex: 1;
  min-width: 0;
}

.milestone-info p {
  margin: 3px 0 0;
  font-size: var(--fs-xs);
}

.milestone-progress {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}

.milestone-fraction {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.stat-hero {
  background: var(--secondary-container);
  color: var(--secondary);
  text-align: center;
}

.stat-number {
  display: block;
  margin: 8px 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 46px;
  font-weight: 800;
}

.stat-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
}

.stat-val {
  color: var(--primary);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-num);
  font-weight: 800;
}

.stat-unit {
  margin-left: 4px;
  font-size: var(--fs-base);
}

.stat-lbl {
  color: var(--text);
  font-weight: 800;
}

.stat-sub {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.archive-tabs {
  margin-bottom: var(--sp-4);
}

.archive-subject-tabs {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

.archive-subject-tabs .subject-tab {
  border: 0;
  box-shadow: none;
}

.archive-subject-tabs .subject-tab.active {
  background: var(--surface);
  color: var(--primary);
  border-color: transparent;
  box-shadow: var(--shadow-1);
}

.archive-search-row {
  width: min(680px, 100%);
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 14px;
  border: 1px solid rgba(124, 111, 205, 0.34);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.archive-search-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 111, 205, 0.14);
}

.archive-search-row .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--muted);
}

#view .archive-search-row input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 10px 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  font: inherit;
}

#view .archive-search-row input:hover,
#view .archive-search-row input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.archive-export-discovery {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.archive-search-empty {
  margin-top: 4px;
}

.archive-list {
  display: grid;
  gap: 8px;
  max-width: 980px;
}

.archive-node {
  display: grid;
  gap: 10px;
}

.node-row {
  width: 100%;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface-low);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.16s ease-out, opacity 0.16s ease-out;
}

.node-row:active {
  transform: scale(0.99);
}

.node-row.learning {
  border-left-color: var(--subject-color);
  background: color-mix(in srgb, var(--subject-color) 10%, var(--surface-low));
}

.node-row.mastered {
  border-left-color: var(--subject-color);
  background: color-mix(in srgb, var(--subject-color) 16%, var(--surface));
  box-shadow: none;
}

.node-row.dormant {
  border-left-color: #c8a030;
  background: rgba(200, 160, 48, 0.12);
}

.node-row.untouched {
  opacity: 0.45;
}

.node-status {
  width: 24px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-md);
}

.node-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--sp-1);
}

.node-main strong {
  display: block;
  font-size: var(--fs-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-main small {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.node-row .node-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.node-row .node-count {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.node-row .node-review-count {
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.node-row .node-stars {
  color: var(--gold);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.node-review-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1.3;
}

.node-review-badge.urgent {
  background: rgba(134, 77, 97, 0.14);
  color: var(--primary);
  border: 1px solid rgba(134, 77, 97, 0.3);
}

.node-review-badge.soon {
  background: rgba(var(--gold-rgb), 0.15);
  color: color-mix(in srgb, var(--gold) 70%, var(--ink));
  border: 1px solid rgba(var(--gold-rgb), 0.4);
}

.study-card-list {
  display: grid;
  gap: 10px;
  padding: 10px 0 8px;
}

.archive-node.highlighted .node-row {
  box-shadow: 0 0 0 3px rgba(255, 183, 206, 0.55), 0 12px 28px rgba(134, 77, 97, 0.16);
}

.archive-node-digest {
  margin-left: 42px;
  padding: 12px;
  border: 1px solid rgba(213, 194, 198, 0.55);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.48);
}

.digest-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.digest-title-row strong {
  color: var(--primary);
  font-size: var(--fs-md);
}

.digest-title-row span {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 900;
}

.digest-title-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.digest-summary-mode {
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(134, 77, 97, 0.08);
  color: var(--primary) !important;
}

.digest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.digest-grid small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.digest-grid p {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.45;
  font-weight: 800;
}

.digest-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.55);
}

.digest-note small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.digest-note p {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.45;
  font-weight: 800;
}

.digest-footer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-4);
}


.study-card {
  background: var(--surface-dim);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  border-left: 4px solid var(--subject-color);
  margin-bottom: 0;
  cursor: pointer;
  transition: background-color 0.16s ease-out, opacity 0.16s ease-out;
  box-shadow: none;
}

.study-card.dragging {
  opacity: 0.58;
  transform: scale(0.99);
  box-shadow: 0 14px 34px rgba(134, 77, 97, 0.18);
}

.study-card:active {
  transform: scale(0.98);
}

.study-card:hover {
  background: color-mix(in srgb, var(--surface-dim) 78%, var(--surface));
}

.study-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.card-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}

.card-action-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-full);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: none;
}

.card-action-btn:hover {
  color: var(--primary);
  background: var(--surface);
}

.card-action-btn.danger:hover {
  color: var(--primary);
}

.card-drag-handle {
  cursor: grab;
}

.card-drag-handle:active {
  cursor: grabbing;
}

.card-action-btn .material-symbols-outlined {
  font-size: var(--fs-md);
}

.study-card .card-front {
  cursor: pointer;
}

.study-card .card-toggle {
  width: 100%;
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.study-card .card-toggle:focus-visible {
  outline: 3px solid var(--subject-color);
  outline-offset: 4px;
}

.study-card .card-painpoint {
  margin-top: 6px;
  color: var(--on-surface);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.5;
}

.study-card .card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.card-source-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  color: var(--primary);
  background: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.card-source-pill.source-review {
  color: #477a55;
  background: rgba(123, 196, 132, 0.18);
}

.card-source-pill.source-quiz {
  color: color-mix(in srgb, var(--gold) 56%, var(--ink));
  background: rgba(var(--gold-rgb), 0.2);
}

.card-source-pill.source-reflection {
  color: #6d5aad;
  background: rgba(124, 111, 205, 0.16);
}

.card-source-pill.source-textbook {
  color: #b4571d;
  background: rgba(232, 122, 44, 0.16);
}

.card-meta-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.card-meta-summary span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.card-meta-summary strong {
  color: var(--on-surface-muted);
}

.card-stars-badge {
  flex-shrink: 0;
  color: var(--ink-3);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.card-stars-badge.stars-gold {
  color: var(--gold);
}

.card-stars-badge.stars-orange {
  color: #f3a953;
}

.card-stars-badge.stars-gray {
  color: var(--ink-3);
}

.study-card .card-painpoint--perfect {
  color: var(--good);
  font-size: var(--fs-md);
  font-weight: 700;
}

.study-card .card-painpoint--empty {
  color: var(--muted);
  font-size: var(--fs-base);
  font-style: italic;
  font-weight: 500;
}

.study-card .card-routine {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(81, 67, 71, 0.14);
  color: var(--on-surface-muted);
  font-size: var(--fs-base);
  line-height: 1.7;
}

.study-card .card-routine.visible {
  display: block;
}

.card-detail {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.card-detail .card-routine {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.card-detail .card-question {
  margin-top: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.card-expand-hint {
  display: block;
  margin-top: 6px;
  text-align: center;
  color: rgba(81, 67, 71, 0.4);
  font-size: var(--fs-md);
  line-height: 1;
}

.archive-cards-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 8px;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--muted);
}

.card-question {
  display: none;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.64);
  color: var(--on-surface);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.card-question.visible {
  display: block;
}

.card-question p {
  margin: 0;
}

.routine-steps {
  margin: 4px 0 0;
  padding-left: 20px;
  line-height: 1.8;
}

.routine-steps li {
  margin-bottom: 4px;
}

.routine-empty {
  color: var(--muted);
  font-style: italic;
}

.math-inline {
  display: inline-block;
  padding: 0 4px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.54);
  color: var(--primary);
  font-family: "Times New Roman", "Cambria Math", serif;
  font-size: 1.04em;
  line-height: 1.35;
}

.math-inline sub,
.math-inline sup {
  font-size: 0.72em;
  line-height: 0;
}

.math-frac {
  display: inline-grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  min-width: 1.2em;
  margin: 0 0.12em;
  line-height: 1.05;
  vertical-align: -0.35em;
}

.math-num {
  width: 100%;
  padding: 0 0.18em 0.08em;
  border-bottom: 1px solid currentColor;
  text-align: center;
}

.math-den {
  padding: 0.08em 0.18em 0;
  text-align: center;
}

.math-sqrt {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.02em;
}

.math-sqrt::before {
  content: "√";
  font-size: 1.08em;
  line-height: 1;
}

.math-radicand {
  display: inline-block;
  padding: 0 0.12em 0 0.04em;
  border-top: 1px solid currentColor;
  line-height: 1.1;
}

.card-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.card-edit-meta {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(213, 194, 198, 0.55);
  border-radius: var(--r-lg);
  background: var(--surface-low);
}

.card-edit-warning {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 48%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.card-edit-meta h3 {
  margin: 0;
  color: var(--primary);
  font-size: var(--fs-md);
}

.card-edit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.archive-empty {
  max-width: 560px;
  display: grid;
  justify-items: start;
  gap: 10px;
}

.archive-empty .material-symbols-outlined {
  color: var(--primary);
  font-size: var(--fs-num);
}

.archive-export-root {
  position: fixed;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 24px;
  background: rgba(29, 27, 22, 0.34);
  z-index: 800;
}

.archive-export-sheet {
  width: min(760px, 100%);
  max-height: min(680px, 88vh);
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 -18px 70px rgba(29, 27, 22, 0.24);
}

.archive-export-switch {
  width: fit-content;
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(213, 194, 198, 0.55);
  border-radius: var(--r-full);
  background: var(--surface-low);
}

.archive-export-switch button {
  min-height: 36px;
  border: 0;
  border-radius: var(--r-full);
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.archive-export-switch button.active {
  color: var(--surface);
  background: var(--primary);
  box-shadow: var(--soft-shadow);
}

.archive-export-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.archive-export-scope button {
  min-height: 32px;
  border: 1px solid rgba(213, 194, 198, 0.75);
  border-radius: var(--r-full);
  padding: 0 12px;
  color: var(--muted);
  background: var(--surface-low);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.archive-export-scope button.active {
  color: var(--surface);
  border-color: var(--primary);
  background: var(--primary);
}

.archive-export-hint {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.archive-export-preview {
  width: 100%;
  max-height: 40vh;
  min-height: 240px;
  overflow: auto;
  resize: vertical;
  border: 1px solid rgba(213, 194, 198, 0.7);
  border-radius: var(--r-lg);
  padding: 16px;
  background: #211923;
  color: var(--bg);
  font: 13px/1.7 "Be Vietnam Pro", "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: pre;
}

.archive-export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.season-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: rgba(155, 100, 130, 0.12);
  border: 1px solid rgba(155, 100, 130, 0.22);
  border-radius: var(--r-lg);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
}
.season-badge.ending-soon {
  background: rgba(200, 120, 30, 0.14);
  border-color: rgba(200, 120, 30, 0.3);
  color: #c87820;
}

.season-chart-section {
  margin-top: 20px;
}
.season-chart-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-surface);
  margin: 0 0 2px;
}
.season-chart-hint {
  font-size: var(--fs-xs);
  margin: 0 0 10px;
}
.season-empty-chart {
  font-size: var(--fs-xs);
  text-align: center;
  padding: 12px 0;
}

/* ── Chart Widget ─────────────────────────────────────────────────────── */
.chart-widget {
  background: var(--surface-low);
  border-radius: var(--r-lg);
  padding: 16px 16px 20px;
  display: grid;
  gap: 12px;
}

.chart-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.chart-type-toggle {
  display: flex;
  background: var(--surface-mid);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}

.chart-type-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.chart-type-btn .material-symbols-outlined {
  font-size: var(--fs-base);
}

.chart-type-btn.active {
  background: var(--primary);
  color: var(--on-primary);
}

.chart-range-toggle {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.chart-range-btn {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.chart-range-btn.active {
  background: rgba(255, 255, 255, 0.13);
  color: var(--on-surface);
  border-color: transparent;
}

.chart-nav-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-nav-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-mid);
  color: var(--on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.chart-nav-btn:not(:disabled):hover {
  background: var(--surface-high);
}

.chart-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.chart-nav-btn .material-symbols-outlined {
  font-size: var(--fs-md);
}

.chart-period-label-nav {
  flex: 1;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
}

.chart-body {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chart-heatmap-wrap {
  overflow-x: auto;
  padding: 8px 0 6px;
  -webkit-overflow-scrolling: touch;
}

.chart-trend-wrap {
  width: 100%;
  padding: 4px 0 2px;
}

.chart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  color: var(--muted);
}

.chart-empty-state .material-symbols-outlined {
  font-size: var(--fs-xl);
  opacity: 0.35;
}

.chart-empty-state p {
  margin: 0;
  font-size: var(--fs-xs);
}

.chart-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}
/* ── End Chart Widget ─────────────────────────────────────────────────── */

.season-current-card {
  display: grid;
  gap: 16px;
}

.season-archive-card {
  margin-top: 16px;
}

.season-archive-card h3 {
  margin-bottom: 16px;
}

.season-header,
.season-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.season-name-row {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.season-name {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 800;
}

.season-dates {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
}

.season-status {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.season-status.active {
  color: var(--tertiary);
  background: var(--tertiary-container);
}

.season-status.ended {
  color: var(--muted);
  background: var(--surface-mid);
}

.season-countdown {
  min-width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.season-countdown .muted {
  font-size: var(--fs-xs);
  font-weight: 700;
}

.season-days-left {
  color: var(--primary);
  font-size: var(--fs-num);
  font-weight: 800;
  line-height: 1;
}

.season-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.season-progress-wrap > .muted {
  min-width: 38px;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-align: right;
}

.season-progress-track {
  flex: 1;
  height: 7px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--surface-high);
}

.season-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.35s ease;
}

.season-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.season-stat {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--r-lg);
  background: var(--surface-low);
}

.season-stat-num {
  color: var(--on-surface);
  font-size: var(--fs-xl);
  font-weight: 800;
}

.season-stat-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.season-titles-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.season-title-item {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-radius: var(--r-lg);
  background: var(--surface-low);
  text-align: center;
}

.season-title-item.math {
  background: rgba(255, 183, 206, 0.45);
}

.season-title-item.physics {
  background: rgba(197, 194, 240, 0.48);
}

.season-title-item.chemistry {
  background: rgba(155, 218, 165, 0.42);
}

.season-title-subject {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.season-title-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.35;
}

.season-overall-title {
  padding: 11px 12px;
  border-radius: var(--r-lg);
  background: var(--surface-low);
  font-size: var(--fs-base);
  text-align: center;
}

.season-viz-block {
  display: grid;
  gap: 8px;
}

.season-viz-block p {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 800;
}

.season-heatmap-scroll,
.season-chart-scroll {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.season-chart-empty {
  margin: 0;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface-low);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.season-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.season-empty {
  max-width: 720px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 16px;
}

.season-empty-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.season-empty-head .material-symbols-outlined {
  color: var(--primary);
  font-size: var(--fs-num);
}

.season-empty-stats {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border, var(--outline));
}

.stat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 64px;
  padding: 8px 4px;
}

.stat-mini-num {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.stat-mini-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 3px;
}

.season-empty h3,
.season-empty p {
  margin: 0;
}

.season-empty p {
  margin-top: 6px;
}

.season-archive-list {
  display: grid;
  gap: 8px;
}

.season-archive-row {
  width: 100%;
  min-height: 66px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-lg);
  color: inherit;
  background: var(--surface-low);
  text-align: left;
}

.season-archive-row:hover {
  background: var(--surface-mid);
}

.season-archive-main,
.season-archive-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.season-archive-main {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.season-archive-main strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-archive-main .muted,
.season-archive-meta .muted {
  font-size: var(--fs-xs);
  font-weight: 700;
}

.season-archive-title {
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.season-export-switch {
  grid-template-columns: repeat(2, minmax(110px, 1fr));
}

.admin-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 920;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 12, 16, 0.96);
}

.admin-auth-box {
  width: min(340px, 100%);
  display: grid;
  gap: 12px;
  padding: 26px 22px;
  border-radius: var(--r-lg);
  background: var(--surface-low);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
}

.admin-auth-box h3,
.admin-auth-box p {
  margin: 0;
  text-align: center;
}

.admin-auth-box h3 {
  font-size: var(--fs-md);
}

.admin-auth-box #admin-pwd-error {
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.admin-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow-y: auto;
  background: var(--bg);
}

.admin-panel-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.admin-panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -24px -20px 20px;
  padding: 24px 20px 16px;
  background: rgba(255, 249, 240, 0.94);
  backdrop-filter: blur(14px);
}

.admin-panel-header h2 {
  margin: 0;
  color: var(--primary);
  font-size: var(--fs-xl);
}

.admin-close-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface-low);
}

.admin-panel-body {
  display: grid;
  gap: 16px;
}

.admin-section {
  display: grid;
  gap: 12px;
  padding: 18px 16px;
  border: 1px solid rgba(213, 194, 198, 0.48);
  border-radius: var(--r-lg);
  background: var(--surface-low);
}

.admin-section h3 {
  margin: 0;
  font-size: var(--fs-md);
}

.admin-help {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-row label {
  flex: 1;
  color: var(--on-surface);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.admin-input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--primary-container);
  border-radius: var(--r-md);
  padding: 8px 12px;
  color: var(--on-surface);
  background: var(--surface);
  font-size: var(--fs-sm);
}

.admin-input-sm {
  width: 96px;
  flex-shrink: 0;
}

.admin-row-actions,
.admin-calendar-controls,
.admin-calendar-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

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

.admin-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-title-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-lottery-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 78px auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.btn-icon {
  min-height: 38px;
  border: 0;
  border-radius: var(--r-md);
  padding: 0 10px;
  color: var(--muted);
  background: var(--surface-high);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.admin-calendar-import {
  display: grid;
  gap: 8px;
}

.admin-calendar-label {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  font-weight: 800;
}

.admin-cal-weekdays,
.admin-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.admin-cal-weekdays {
  margin-bottom: 4px;
}

.admin-cal-weekdays span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-align: center;
}

.admin-cal-day {
  aspect-ratio: 1;
  min-height: 34px;
  border: 0;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--surface-high);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.admin-cal-day.holiday {
  color: var(--tertiary);
  background: rgba(80, 176, 112, 0.24);
}

.admin-cal-day:hover {
  opacity: 0.82;
}

.timeline {
  position: relative;
  max-width: 980px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 10px;
  left: 38px;
  width: 4px;
  border-radius: var(--r-full);
  background: var(--surface-high);
}

.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 22px;
  margin-bottom: 34px;
}

.timeline-badge {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border: 5px solid var(--bg);
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-size: var(--fs-lg);
  font-weight: 800;
}

.log-card {
  position: relative;
  overflow: hidden;
}

.log-card header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  margin-bottom: 18px;
}

.log-card p {
  padding: 18px;
  border: 1px solid rgba(213, 194, 198, 0.4);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--muted);
  line-height: 1.8;
}

.form-grid {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--surface);
  color: var(--ink);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  outline: 3px solid color-mix(in srgb, var(--primary) 14%, transparent);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.table-wrap {
  overflow-x: auto;
}

.holiday-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.holiday-table th,
.holiday-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(213, 194, 198, 0.55);
  text-align: left;
}

.holiday-table th {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-full);
  background: var(--surface-low);
  border: 1px solid rgba(213, 194, 198, 0.55);
}

.mode-switch button {
  min-height: 36px;
  border: 0;
  border-radius: var(--r-full);
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.mode-switch button.active {
  color: var(--surface);
  background: var(--primary);
  box-shadow: var(--soft-shadow);
}

.btn-sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--fs-sm);
}

body.focus-mode .side-nav,
body.focus-mode .top-bar,
body.focus-mode .bottom-nav,
body.focus-mode #view {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 12, 16, 0.96);
}

.focus-overlay-inner {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.focus-overlay-goal {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
}

.focus-overlay-encouragement {
  margin: -12px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-base);
  text-align: center;
}

.focus-ring-wrap {
  position: relative;
  width: 220px;
  height: 220px;
}

.focus-ring {
  width: 220px;
  height: 220px;
}

.focus-time-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.focus-time {
  color: var(--surface);
  font-size: 52px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.focus-status {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-base);
  font-weight: 700;
}

.focus-overlay-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.focus-overlay-actions .btn {
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
}

.focus-rest-btn {
  width: 100%;
}

.focus-rest-btn,
.focus-overlay-actions .btn-soft {
  border-radius: var(--r-md);
  padding: 14px;
  font-size: var(--fs-md);
}

.focus-overlay-actions .btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.focus-overlay-actions .btn-ghost:hover {
  color: var(--surface) !important;
  border-color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.14);
}

.focus-mini-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgba(74, 69, 128, 0.16);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 42px rgba(46, 35, 66, 0.18);
}

.focus-mini-dock > div {
  min-width: 0;
}

.focus-mini-dock strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.focus-mini-dock span {
  display: block;
  max-width: 180px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-deciding-card {
  width: 100%;
  border-radius: var(--r-lg);
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
}

.focus-deciding-rest {
  margin: 0 0 6px;
  color: var(--surface);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.focus-deciding-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-md);
}

.focus-import-area {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.focus-import-toggle {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.76);
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.focus-import-toggle:hover {
  color: var(--surface);
}

.focus-import-toggle .material-symbols-outlined {
  font-size: var(--fs-md);
}

.focus-import-body {
  margin-top: 10px;
}

.focus-import-body textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  font-family: inherit;
  font-size: var(--fs-xs);
  resize: none;
}

.focus-upload-result {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-xs);
}

.rest-reminder-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(18, 12, 16, 0.82);
  backdrop-filter: blur(6px);
  animation: rest-fade-in 0.4s ease;
}

@keyframes rest-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.rest-reminder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  pointer-events: none;
}

.rest-reminder-icon {
  font-size: 64px;
  line-height: 1;
  animation: rest-bounce 1.5s ease-in-out infinite;
}

@keyframes rest-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.rest-reminder-title {
  margin: 0;
  color: var(--surface);
  font-size: var(--fs-num);
  font-weight: 800;
  letter-spacing: 0;
}

.rest-reminder-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--fs-md);
  letter-spacing: 0;
}

.modal-root {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(29, 27, 22, 0.34);
  z-index: 800;
}

.modal {
  width: min(680px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(29, 27, 22, 0.24);
  padding: 28px;
}

.modal:has(.day-summary-head) {
  width: min(460px, 100%);
  border: 1px solid var(--primary-container);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 20px;
}

.note-output {
  white-space: pre-wrap;
  border-radius: var(--r-lg);
  padding: 18px;
  background: #211923;
  color: var(--bg);
  line-height: 1.7;
  overflow-x: auto;
}

.day-summary-list {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(213, 194, 198, 0.6);
  border-bottom: 1px solid rgba(213, 194, 198, 0.6);
}

.day-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  color: var(--muted);
}

.day-summary-row strong {
  color: var(--primary);
  white-space: nowrap;
}

.day-summary-total {
  margin: 0;
  color: var(--primary);
  font-weight: 800;
}

.day-summary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.day-detail-list {
  display: grid;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(213, 194, 198, 0.6);
}

.day-detail-row {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(213, 194, 198, 0.42);
}

.day-detail-row strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
}

.day-detail-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.toast-root {
  position: fixed;
  top: 16px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  z-index: 1000;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  width: fit-content;
  max-width: 100%;
  min-width: min(220px, 100%);
  padding: 12px 16px;
  color: var(--surface);
  background: var(--primary);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  animation: toast-drop-in 0.16s ease-out both;
  pointer-events: auto;
}

@keyframes toast-drop-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 990;
  color: var(--primary);
  font-weight: 800;
  animation: sparkle-up 1s ease forwards;
}

@keyframes sparkle-up {
  from { opacity: 0; transform: translateY(8px) scale(0.8); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translateY(-48px) scale(1.1); }
}

.bottom-nav,
.mobile-only {
  display: none;
}

.review-head {
  margin-bottom: 18px;
}

.review-toast-inline {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(90, 184, 122, 0.35);
  border-radius: var(--r-md);
  background: rgba(155, 218, 165, 0.18);
  color: #315c3c;
  font-weight: 800;
}

.review-card,
.review-row {
  border: 1px solid rgba(213, 194, 198, 0.62);
  border-left: 5px solid var(--subject-color, var(--primary));
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(134, 77, 97, 0.08);
}

.review-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px;
}

.review-card.active,
.review-row.active {
  border-color: rgba(134, 77, 97, 0.5);
}


.review-actions {
  display: flex;
  align-items: start;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: end;
}

.review-table {
  display: grid;
  gap: 8px;
}

.review-row {
  padding: 0;
  overflow: hidden;
}

.review-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: 58px;
}

.review-row-chip {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  min-height: 24px;
  padding: 3px 9px;
}

.review-row-headline {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.review-row-headline strong {
  display: inline;
  font-size: var(--fs-md);
  color: var(--text);
  overflow-wrap: anywhere;
}

.review-row-reason {
  display: block;
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.55;
}

.review-row-start {
  flex-shrink: 0;
  grid-column: 2;
  grid-row: 1;
}

.review-today-badge {
  background: var(--success-bg, rgba(46, 160, 67, 0.12));
  color: var(--success, var(--good));
  min-height: 24px;
  padding: 3px 9px;
}

.review-row-today {
  border-left: 5px solid var(--success, var(--good));
}


.review-import-panel {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-top: 1px solid rgba(213, 194, 198, 0.5);
  background: rgba(255, 249, 240, 0.68);
}

.review-stepper {
  list-style: none;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--bg-soft, rgba(0, 0, 0, 0.03));
  border-radius: var(--r-md);
  display: grid;
  gap: 8px;
}

.review-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.review-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 800;
  background: var(--surface-high);
  color: var(--muted);
  line-height: 1;
}

.review-step-num .material-symbols-outlined {
  font-size: var(--fs-base);
}

.review-step.done .review-step-num {
  background: var(--tertiary, var(--chem));
  color: var(--surface);
}

.review-step-text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  padding-top: 2px;
}

.review-step.done .review-step-text {
  color: var(--muted);
}

.review-step-text b {
  color: var(--primary);
  font-weight: 800;
}

.review-session-panel {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--radius-small);
  border: 1.5px solid var(--primary-soft);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
  animation: checkin-pop 0.3s ease;
}

.review-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.review-session-head strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-base);
  color: var(--primary);
}

.review-session-head .material-symbols-outlined {
  font-size: var(--fs-md);
}

.review-session-dismiss {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-base);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.review-session-panel textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  border: 1px solid rgba(213, 194, 198, 0.8);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
}

.review-import-panel details {
  margin: 8px 0 0;
}

.review-import-panel summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 900;
}

.review-import-panel textarea {
  width: 100%;
  margin-top: 6px;
  border: 1px solid rgba(213, 194, 198, 0.8);
  border-radius: var(--r-md);
  padding: 9px 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 44px;
}

.review-import-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.review-import-inline textarea {
  width: 100%;
  height: 48px;
  min-height: 48px;
  max-height: 36px;
  border: 1px solid rgba(213, 194, 198, 0.8);
  border-radius: var(--r-md);
  padding: 8px 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 18px;
  resize: none;
  overflow: hidden;
}

.review-import-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.review-pack-preview textarea {
  max-height: 118px;
  font-size: var(--fs-xs);
}

.review-import-result {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid rgba(213, 194, 198, 0.6);
}


.review-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 14px;
  border: 1px dashed rgba(213, 194, 198, 0.8);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-weight: 800;
}

.review-help {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(253, 214, 167, 0.22);
  color: var(--muted);
  font-weight: 800;
}

.review-help p {
  margin: 0;
}

#learn-content-pane .review-row-headline strong,
#learn-content-pane .node-main strong,
#learn-content-pane .digest-title-row strong {
  font-size: var(--study-reading-17);
  font-weight: 900;
}

#learn-content-pane .review-row-reason,
#learn-content-pane .node-main small,
#learn-content-pane .node-row .node-count,
#learn-content-pane .node-row .node-review-count,
#learn-content-pane .digest-grid small,
#learn-content-pane .digest-note small,
#learn-content-pane .card-meta,
#learn-content-pane .card-meta-summary span,
#learn-content-pane .review-step-text,
#learn-content-pane .review-help,
#learn-content-pane .review-import-inline textarea,
#learn-content-pane .review-pack-preview textarea {
  font-size: var(--study-reading-13);
}

#learn-content-pane .study-card .card-painpoint,
#learn-content-pane .digest-grid p,
#learn-content-pane .digest-note p,
#learn-content-pane .study-card .card-routine,
#learn-content-pane .review-import-result {
  font-size: var(--study-reading-16);
  line-height: 1.68;
  font-weight: 750;
}

#learn-content-pane .study-card .card-painpoint {
  font-size: var(--study-reading-18);
  font-weight: 800;
}

#learn-content-pane .card-question {
  font-size: var(--study-reading-16);
  line-height: 1.76;
  font-weight: 750;
}

#learn-content-pane .math-inline {
  font-size: var(--study-reading-math);
}

@media (max-width: 980px) {
  .side-nav {
    width: var(--nav-expanded-width);
    padding-inline: 20px;
    gap: 28px;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

  .desktop-only {
    display: none;
  }

  .pet-mini {
    display: grid;
    grid-template-columns: 54px 1fr;
    justify-items: stretch;
    gap: 14px;
    text-align: left;
  }

  .pet-mini p,
  .pet-mini strong {
    display: block;
  }

  .side-nav .nav-item {
    justify-content: flex-start;
    gap: 12px;
    padding: 0 14px;
    font-size: var(--fs-md);
  }

  .side-nav.open {
    transform: translateX(0);
  }

  .top-bar {
    left: 0;
    height: 76px;
    padding: 0 18px;
  }

  .mobile-only {
    display: grid;
  }



  .brand {
    font-size: var(--fs-xl);
  }

  .content {
    margin-left: 0;
    padding: 98px 18px 100px;
  }

  .bottom-nav {
    position: fixed;
    inset: auto 0 0;
    height: 76px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px 10px;
    background: rgba(255, 249, 240, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 -8px 28px rgba(134, 77, 97, 0.15);
    border-radius: var(--r-lg);
    z-index: 30;
  }

  .bottom-nav .nav-item {
    min-height: 58px;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    font-size: var(--fs-xs);
    padding: 0;
  }

.review-import-inline,
.review-card,
.digest-grid {
  grid-template-columns: 1fr;
}

  .archive-node-digest {
    margin-left: 0;
  }

  .review-actions,
  .review-import-actions {
    justify-content: flex-start;
  }

  .season-empty {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .season-header {
    align-items: stretch;
  }

  .season-stats-row,
  .season-titles-row {
    grid-template-columns: 1fr;
  }

  .admin-row {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-input-sm {
    width: 100%;
  }

  .admin-title-grid,
  .admin-lottery-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .card {
    padding: 20px;
  }

  .page-head {
    align-items: start;
    flex-direction: column;
  }

  .settings-group {
    padding: 0;
  }

  .settings-anchor-row {
    margin-top: -4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--sp-1);
  }

  .settings-group-summary {
    grid-template-columns: 36px minmax(0, 1fr) 22px;
    padding: 14px;
  }

  .settings-group-icon {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .settings-group-body {
    padding: 0 14px 14px;
  }

  .settings-group .settings-row,
  .settings-group .u-inline-between {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-prompt-summary {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
  }

  .ai-prompt-copy-btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .settings-control-field {
    width: 100%;
    max-width: none;
  }

  .lottery-entry-inner,
  .lottery-entry-copy {
    align-items: stretch;
    flex-direction: column;
  }

  .lottery-entry-inner .btn {
    width: 100%;
  }

  .badge-summary-compact {
    flex-wrap: wrap;
  }

  .badge-summary-row {
    grid-template-columns: 36px minmax(0, 1fr) auto 20px;
  }

  .room-head,
  .log-card header {
    flex-direction: column;
  }

  .study-card-list {
    padding-left: 0;
  }

  .study-card .card-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .card-head-actions {
    max-width: 100%;
  }

  .archive-head-actions,
  .home-review-actions {
    width: 100%;
  }

  .card-edit-grid {
    grid-template-columns: 1fr;
  }

  .archive-export-root {
    padding: 12px;
  }

  .archive-export-sheet {
    max-height: 90vh;
    padding: 20px;
    border-radius: var(--r-lg);
  }

  .archive-export-switch {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--r-lg);
  }

  .archive-export-preview {
    min-height: 220px;
  }

  .archive-export-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .timeline::before {
    display: none;
  }

  .timeline-entry {
    grid-template-columns: 1fr;
  }

.timeline-badge {
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 640px) {
  .summer-reward-wallet-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summer-reward-wallet-stat.is-balance {
    grid-column: 1 / -1;
  }

  .summer-reward-wallet-ledger-head {
    align-items: stretch;
    flex-direction: column;
  }

  .summer-reward-wallet-ledger-head .btn {
    width: 100%;
  }

  .summer-reward-history-item {
    align-items: start;
  }

  .modal-root {
    padding: 14px;
  }

  .modal:has(.reward-redeem-modal-head) {
    padding: 20px;
  }

  .modal:has(.reward-rules-modal) {
    align-self: end;
    width: 100%;
    max-height: calc(100dvh - 38px);
    padding: 18px;
    border-radius: 22px 22px 0 0;
  }

  .reward-rules-modal::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: -7px auto 14px;
    border-radius: 999px;
    background: var(--line);
  }

  .reward-rules-summary {
    grid-template-columns: 1fr;
  }
}

/* Farm v5.0 */
.pet-mini {
  grid-template-columns: 1fr;
}

.home-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 16px;
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
}

.home-left-stack,
.home-right-stack {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.home-focus-panel {
  display: grid;
  gap: 0;
}

.home-focus-title {
  display: none;
}

.home-focus-title .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  color: var(--surface);
  background: var(--primary);
  font-size: var(--fs-xl);
}

.home-focus-title h3 {
  margin: 0;
  color: var(--primary);
  font-size: var(--fs-xl);
}

.home-focus-title p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.45;
}

.home-focus-panel .timer-setup-card,
.home-focus-panel .timer-focus-card,
.home-focus-panel .timer-rest-card {
  min-height: 0;
  padding: 16px 18px;
}

.home-focus-panel .timer-setup-card .btn-primary {
  min-height: 48px;
  font-size: var(--fs-md);
  border-radius: var(--r-md);
}

.home-focus-panel .timer-setup-header h3 {
  font-size: var(--fs-lg);
}

.home-focus-panel .timer-goal-wrap label,
.home-focus-panel .timer-setup-field label {
  font-size: var(--fs-sm);
}

.home-focus-panel .timer-goal-wrap input {
  min-height: 40px;
  font-size: var(--fs-base);
}

.home-focus-panel .timer-mode-btn {
  min-height: 40px;
  font-size: var(--fs-base);
}

.home-focus-panel .timer-ring-wrap,
.home-focus-panel .timer-ring {
  width: 140px;
  height: 140px;
}

.home-focus-panel .timer-time {
  font-size: var(--fs-xl);
}

.home-focus-panel .timer-label {
  font-size: var(--fs-sm);
}

.home-focus-details {
  border-radius: var(--r-lg);
  overflow: hidden;
}

.home-focus-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  cursor: pointer;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: var(--r-lg);
  font-weight: 600;
  font-size: var(--fs-base);
  list-style: none;
  user-select: none;
}

.home-focus-summary::-webkit-details-marker {
  display: none;
}

.home-focus-details[open] .home-focus-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.home-focus-details[open] > *:not(summary) {
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-top: none;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: 16px;
  background: var(--card-bg, var(--surface));
}

.summer-task-card {
  padding: 16px 18px 18px;
  border: 0;
}

.summer-route-card {
  width: 100%;
  max-width: 1360px;
  margin: 16px auto 0;
  padding: 16px 18px;
  border: 1.5px solid rgba(74, 69, 128, 0.18);
  /* 日期详情由代码按点击卡片做唯一锚点；关闭浏览器自动锚定，避免双重补偿抖动。 */
  overflow-anchor: none;
}

.summer-route-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.summer-route-card-head h3 {
  margin: 2px 0 4px;
  color: var(--physics);
  font-size: var(--fs-lg);
}

.summer-route-card-head p {
  max-width: 620px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.summer-route-card-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.summer-route-card-stats span {
  padding: 6px 10px;
  border-radius: var(--r-full);
  color: var(--physics);
  background: rgba(197, 194, 240, 0.34);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.summer-plan-notice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--primary-container) 34%, var(--surface));
  overflow: hidden;
  touch-action: pan-x;
}

.summer-plan-notice-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  font-size: 20px;
}

.summer-plan-notice-copy {
  min-width: 0;
}

.summer-plan-notice-copy.is-changing {
  animation: summer-plan-notice-in 260ms ease-out;
}

.summer-plan-notice-copy small,
.summer-plan-notice-copy strong {
  display: block;
}

.summer-plan-notice-copy small {
  margin-bottom: 2px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
}

.summer-plan-notice-copy strong {
  color: var(--text-primary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-plan-notice-nav {
  display: grid;
  gap: 1px;
}

.summer-plan-notice-nav button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
}

.summer-plan-notice-nav button:hover,
.summer-plan-notice-nav button:focus-visible {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  outline: none;
}

.summer-plan-notice-nav .material-symbols-outlined {
  font-size: 18px;
}

@keyframes summer-plan-notice-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .summer-plan-notice-copy.is-changing {
    animation: none;
  }
}

.summer-route-hero {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 4px solid var(--tertiary);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tertiary-container) 20%, var(--surface));
}

.summer-hero-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.summer-hero-copy {
  min-width: 0;
}

.summer-route-hero h3 {
  margin: 3px 0 4px;
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1.25;
}

.summer-route-hero .summer-hero-description {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.45;
}

.summer-kicker {
  margin: 0;
  color: var(--physics) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 900;
  letter-spacing: 0;
}

.summer-route-hero .summer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tertiary) !important;
}

.summer-route-hero .summer-kicker .material-symbols-outlined {
  font-size: 16px;
}

.summer-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
  max-width: 390px;
}

.summer-hero-stat {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px 5px;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--tertiary) 18%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.summer-hero-stat span {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.summer-hero-stat strong {
  min-width: 0;
  color: var(--tertiary);
  font-size: var(--fs-sm);
  font-weight: 1000;
  line-height: 1.2;
}

.summer-hero-stat small {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.summer-route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.summer-route-meta span {
  padding: 5px 9px;
  border-radius: var(--r-full);
  color: var(--physics);
  background: rgba(197, 194, 240, 0.34);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.summer-active-day-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(74, 69, 128, 0.16);
  border-radius: var(--r-md);
  background: rgba(197, 194, 240, 0.22);
}

.summer-active-day-bar span {
  color: var(--physics);
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1.35;
}

.summer-active-day-bar .btn {
  flex: 0 0 auto;
  margin: 0;
}

.summer-deferred-summary {
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--secondary) 34%, transparent);
  border-left: 4px solid var(--secondary);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--secondary-container) 28%, var(--surface));
}

.summer-deferred-summary-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 52px;
  padding: 9px 11px;
  list-style: none;
  cursor: pointer;
}

.summer-deferred-summary-head::-webkit-details-marker {
  display: none;
}

.summer-deferred-summary-head > .material-symbols-outlined {
  color: var(--secondary);
  font-size: 22px;
}

.summer-deferred-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.summer-deferred-summary-copy strong,
.summer-deferred-summary-copy small {
  margin: 0;
}

.summer-deferred-summary-copy strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.summer-deferred-summary-copy small {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.summer-deferred-view {
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent);
  border-radius: var(--r-md);
  color: var(--secondary);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.summer-deferred-summary[open] .summer-deferred-view {
  font-size: 0;
}

.summer-deferred-summary[open] .summer-deferred-view::after {
  content: "收起";
  font-size: 11px;
}

.summer-deferred-list {
  display: grid;
  gap: 4px;
  padding: 0 11px 9px 44px;
}

.summer-deferred-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 7px 8px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--secondary) 18%, transparent);
  color: var(--text-primary);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.summer-deferred-list button strong,
.summer-deferred-list button small {
  display: block;
}

.summer-deferred-list button strong {
  font-size: var(--fs-xs);
}

.summer-deferred-list button small {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
}

.summer-deferred-list button > .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--secondary);
  font-size: 19px;
}

.summer-deferred-gate {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--secondary) 34%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--secondary-container) 28%, var(--surface));
}

.summer-deferred-gate > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  color: var(--surface);
  background: var(--secondary);
  font-size: 20px;
}

.summer-deferred-gate strong,
.summer-deferred-gate p {
  margin: 0;
}

.summer-deferred-gate strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.summer-deferred-gate p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.summer-deferred-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.summer-deferred-gate-actions .btn {
  min-height: 40px;
  margin: 0;
  white-space: normal;
}

.summer-deferred-gate-actions small {
  color: inherit;
  font-size: 10px;
  opacity: 0.8;
}

.summer-progress-track {
  height: 5px;
  overflow: hidden;
  margin: 12px 0 10px;
  border-radius: var(--r-full);
  background: var(--surface-high);
}

.summer-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--tertiary);
  transition: width 0.25s ease;
}

.summer-today-panel {
  display: grid;
  gap: 10px;
}

.summer-today-summary {
  padding: 6px 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.summer-today-summary p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.55;
}

.summer-today-summary .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-base);
}

.summer-today-summary strong {
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-today-summary span,
.summer-today-summary p {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.45;
}

.summer-route-placeholder {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(74, 69, 128, 0.28);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  background: var(--surface-low);
}

.summer-route-placeholder > .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-xl);
}

.summer-route-placeholder strong {
  display: block;
  margin-bottom: 4px;
  color: var(--physics);
  font-size: var(--fs-base);
}

.summer-route-placeholder p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.summer-route-focus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.summer-route-focus span {
  padding: 4px 8px;
  border-radius: var(--r-full);
  color: #57495a;
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.summer-route-source-note {
  margin: 8px 0 0;
  padding: 7px 9px;
  border-left: 3px solid rgba(154, 98, 34, 0.34);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  background: rgba(255, 248, 232, 0.82);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-route-overview {
  margin-top: 12px;
}

.summer-route-phase {
  margin-top: 10px;
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.summer-route-phase > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.summer-route-phase > summary::-webkit-details-marker {
  display: none;
}

.summer-route-phase > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.summer-route-phase > summary strong {
  color: var(--text);
  font-size: var(--fs-md);
}

.summer-route-phase > summary small {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.summer-route-phase > summary > .material-symbols-outlined {
  transition: transform 0.18s ease;
}

.summer-route-phase[open] > summary > .material-symbols-outlined {
  transform: rotate(180deg);
}

.summer-route-phase > .summer-route-weeks {
  padding: 0 12px 12px;
}

.summer-route-weeks {
  display: grid;
  gap: 12px;
  padding-top: 10px;
}

.summer-route-week {
  display: grid;
  gap: 7px;
}

.summer-route-week h4 {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 900;
}

.summer-route-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.summer-route-day {
  min-height: 88px;
  padding: 8px;
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.summer-route-day:hover {
  transform: translateY(-1px);
  border-color: rgba(74, 69, 128, 0.42);
}

.summer-route-day.current {
  border-color: var(--physics);
  box-shadow: 0 0 0 2px rgba(74, 69, 128, 0.1);
}

.summer-route-day.selected {
  border-color: var(--physics);
  box-shadow: 0 0 0 3px rgba(74, 69, 128, 0.15);
}

.summer-route-day.done {
  border-color: rgba(47, 106, 63, 0.28);
  background: color-mix(in srgb, var(--tertiary-container) 28%, var(--surface));
}

.summer-route-day.sheet,
.summer-route-day.draft {
  background: var(--surface-low);
}

.summer-route-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}

.summer-route-day-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  color: var(--surface);
  background: var(--physics);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.summer-route-status {
  min-width: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 900;
  text-align: right;
}

.summer-route-day strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-xs);
  line-height: 1.25;
}

.summer-route-day p {
  margin: 3px 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.plan-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.plan-picker-head .btn { margin: 0 0 6px; padding-left: 0; }
.plan-picker-head h2 { margin: 3px 0; }
.plan-picker-head p { margin: 0; color: var(--text-secondary); }
.plan-picker-head > strong { white-space: nowrap; color: var(--physics); }
.is-extra-plan-picker .product-subject-switcher { margin-bottom: 14px; }
.is-extra-plan-picker .product-subject-tab b { display: none; }
.summer-route-picker { padding: 0; overflow: hidden; }
.summer-route-picker .summer-route-overview { padding: 0 12px 12px; }
.summer-route-picker .summer-route-weeks { gap: 8px; }
.summer-route-week-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 8px; width: 100%; padding: 10px 2px; border: 0; background: transparent; color: var(--text-primary); text-align: left; font: inherit; font-weight: 900; cursor: pointer; }
.summer-route-week-picker small { color: var(--text-tertiary); font-weight: 700; }
.summer-route-picker .summer-route-day { min-height: 70px; padding: 7px; }
.summer-route-picker .summer-route-day strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.summer-route-picker-detail { margin: 12px; }
.summer-route-picker-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.summer-route-picker-facts span { display: grid; gap: 2px; padding: 8px; border-radius: var(--r-sm); background: var(--surface); }
.summer-route-picker-facts b { font-size: var(--fs-xs); color: var(--text-primary); }
.summer-route-picker-facts small { color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.3; }
.summer-route-picker-detail .btn { margin-top: 2px; }

@media (max-width: 700px) {
  .plan-picker-head { align-items: stretch; flex-direction: column; gap: 6px; }
  .summer-route-picker .summer-route-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .summer-route-picker .summer-route-day { min-width: 0; min-height: 66px; padding: 5px; }
  .summer-route-picker .summer-route-day-head { margin-bottom: 3px; }
  .summer-route-picker .summer-route-day-num { width: 20px; height: 20px; font-size: 11px; }
  .summer-route-picker .summer-route-status { display: none; }
  .summer-route-picker .summer-route-day strong { font-size: 10px; line-height: 1.15; }
  .summer-route-picker-facts { grid-template-columns: 1fr; gap: 5px; }
  .summer-route-picker-facts span { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
}

.summer-route-detail {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(74, 69, 128, 0.12);
  border-radius: var(--r-md);
  background: var(--surface-low);
}

.summer-route-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.summer-route-detail-head h4 {
  margin: 4px 0 3px;
  color: var(--text-primary);
  font-size: var(--fs-md);
}

.summer-route-detail-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.summer-route-detail-head > strong {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: var(--r-full);
  color: var(--physics);
  background: rgba(197, 194, 240, 0.42);
  font-size: var(--fs-xs);
}

.summer-route-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.summer-route-detail-actions > strong {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: var(--r-full);
  color: var(--physics);
  background: rgba(197, 194, 240, 0.42);
  font-size: var(--fs-xs);
}

.summer-route-detail-actions .btn {
  margin: 0;
}

.summer-route-day-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  color: var(--surface);
  background: var(--physics);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.summer-route-detail-tasks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.summer-route-detail-task {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(74, 69, 128, 0.12);
  border-radius: var(--r-md);
  background: var(--surface);
}

.summer-route-detail-task .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-lg);
}

.summer-route-detail-task strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.summer-route-detail-task p {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.summer-route-detail-task em {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 900;
}

.summer-route-detail-task.done {
  border-color: rgba(47, 106, 63, 0.28);
  background: color-mix(in srgb, var(--tertiary-container) 28%, var(--surface));
}

.summer-route-detail-task.active {
  border-color: rgba(74, 69, 128, 0.28);
}

.summer-route-detail-task.deferred,
.summer-route-preview-item.deferred {
  border-color: color-mix(in srgb, var(--secondary) 34%, transparent);
  background: color-mix(in srgb, var(--secondary-container) 18%, var(--surface));
}

.summer-route-detail-task.deferred .material-symbols-outlined,
.summer-route-detail-task.deferred em,
.summer-route-preview-item.deferred .material-symbols-outlined,
.summer-route-preview-item.deferred em {
  color: var(--secondary);
}

.summer-route-preview-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.summer-route-preview-item {
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(74, 69, 128, 0.12);
  border-radius: var(--r-md);
  background: var(--surface);
}

.summer-route-preview-main {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
}

.summer-route-preview-item .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-lg);
}

.summer-route-preview-item strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.summer-route-preview-item p,
.summer-route-preview-item small {
  display: block;
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.summer-route-preview-item em {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 900;
}

.summer-route-preview-item.done {
  border-color: rgba(47, 106, 63, 0.28);
  background: color-mix(in srgb, var(--tertiary-container) 28%, var(--surface));
}

.summer-route-preview-item.done .material-symbols-outlined,
.summer-route-preview-item.done em {
  color: var(--tertiary);
}

.summer-route-preview-item.active {
  border-color: rgba(74, 69, 128, 0.28);
}

.summer-route-review {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(74, 69, 128, 0.08);
}

.summer-route-review summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  color: var(--physics);
  font-size: var(--fs-xs);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.summer-route-review summary::-webkit-details-marker {
  display: none;
}

.summer-route-review summary::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-size: var(--fs-md);
  line-height: 1;
}

.summer-route-review[open] summary::after {
  content: "expand_less";
}

.summer-route-review summary small {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.summer-route-review-body {
  display: grid;
  gap: 8px;
  padding: 0 9px 9px;
}

.summer-route-note {
  display: grid;
  gap: 5px;
}

.summer-route-note span {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.summer-route-note textarea {
  width: 100%;
  resize: vertical;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid rgba(74, 69, 128, 0.16);
  border-radius: var(--r-md);
  color: var(--text-primary);
  background: var(--surface-low);
  font-family: inherit;
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-route-note textarea:focus {
  outline: none;
  border-color: var(--physics);
  box-shadow: 0 0 0 3px rgba(74, 69, 128, 0.1);
}

.summer-route-note small,
.summer-route-review-empty {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.summer-route-review-examples {
  display: grid;
  gap: 7px;
}

.summer-route-review-example {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(74, 69, 128, 0.1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.74);
}

.summer-route-review-example strong {
  color: var(--text-primary);
  font-size: var(--fs-xs);
}

.summer-route-review-example p {
  margin: 2px 0 6px;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.summer-saved-reflection,
.summer-day-reflection-review {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(47, 106, 63, 0.14);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tertiary-container) 18%, var(--surface));
}

.summer-saved-reflection strong,
.summer-day-reflection-review strong {
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-saved-reflection p,
.summer-day-reflection-review p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.summer-saved-reflection p span,
.summer-day-reflection-review p span {
  display: inline-block;
  min-width: 48px;
  margin-right: 6px;
  color: var(--tertiary);
  font-weight: 1000;
}

.summer-day-reflection-review {
  margin-top: 8px;
}

.summer-day-reflection-review > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.summer-day-reflection-review > div span {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.summer-route-detail-draft p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.summer-route-sheet {
  border-style: solid;
}

.summer-route-sheet.pending {
  border-color: rgba(74, 69, 128, 0.34);
  box-shadow: 0 0 0 3px rgba(74, 69, 128, 0.1);
}

.summer-route-sheet.done {
  border-color: rgba(47, 106, 63, 0.28);
  background: color-mix(in srgb, var(--tertiary-container) 28%, var(--surface));
}

.summer-sheet-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.summer-sheet-steps span {
  padding: 5px 8px;
  border-radius: var(--r-full);
  color: var(--text-secondary);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.summer-supplement-resources {
  margin-top: 10px;
  border: 1px solid rgba(74, 69, 128, 0.1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.58);
}

.summer-supplement-resources summary {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 8px 10px;
  color: var(--text-secondary);
  list-style: none;
  cursor: pointer;
}

.summer-supplement-resources summary::-webkit-details-marker {
  display: none;
}

.summer-supplement-resources summary .material-symbols-outlined {
  color: var(--text-tertiary);
  font-size: var(--fs-md);
}

.summer-supplement-resources summary strong {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-supplement-resources summary small {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-align: right;
}

.summer-supplement-resources > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 10px;
}

.summer-supplement-resources .btn {
  margin: 0;
}

.summer-unified-import-hint {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(74, 69, 128, 0.12);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
}

.summer-unified-import-hint .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-lg);
}

.summer-unified-import-hint strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-unified-import-hint p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-route-mission {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(74, 69, 128, 0.12);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
}

.summer-route-mission .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-xl);
}

.summer-route-mission strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.summer-route-mission p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.summer-route-videos {
  display: grid;
  gap: 0;
  margin-top: 12px;
}

.summer-route-videos-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.summer-route-videos-title .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-lg);
}

.summer-route-videos-title strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 900;
}

.summer-route-videos-title small {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.summer-route-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 10px;
}

.summer-route-step::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 13px;
  width: 4px;
  border-radius: var(--r-full);
  background: rgba(74, 69, 128, 0.2);
}

.summer-route-step:last-child {
  padding-bottom: 0;
}

.summer-route-step:last-child::before {
  display: none;
}

.summer-route-step-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  color: var(--physics);
  background: var(--surface);
  border: 3px solid rgba(74, 69, 128, 0.26);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.summer-route-step-marker .material-symbols-outlined {
  font-size: var(--fs-md);
}

.summer-route-step.done::before {
  background: rgba(47, 106, 63, 0.58);
}

.summer-route-step.done .summer-route-step-marker {
  color: var(--surface);
  border-color: var(--tertiary);
  background: var(--tertiary);
}

.summer-route-step:not(.active):not(.done):not(.next):not(.deferred) {
  opacity: 0.55;
}

.summer-route-step.future-order,
.summer-route-step.future-order:not(.active):not(.next) {
  opacity: 0.46;
  filter: grayscale(0.2);
}

.summer-route-step.future-order:hover,
.summer-route-step.future-order:focus-within {
  opacity: 0.82;
}

.summer-route-step.next .summer-route-step-marker {
  border-color: rgba(74, 69, 128, 0.34);
  background: var(--surface);
}

.summer-route-step.active .summer-route-step-marker {
  color: var(--surface);
  border-color: var(--physics);
  background: var(--physics);
  box-shadow: 0 0 0 5px rgba(197, 194, 240, 0.38);
}

.summer-route-step.deferred {
  opacity: 0.82;
}

.summer-route-step.deferred .summer-route-step-marker {
  color: var(--secondary);
  border-color: color-mix(in srgb, var(--secondary) 42%, transparent);
  background: color-mix(in srgb, var(--secondary-container) 44%, var(--surface));
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.summer-route-step-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.summer-route-video-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(74, 69, 128, 0.14);
  border-radius: var(--r-md);
  background: var(--surface);
}

.summer-route-step.active .summer-route-video-card,
.summer-route-step.next .summer-route-video-card {
  border-color: color-mix(in srgb, var(--tertiary-container) 42%, var(--line));
  background: color-mix(in srgb, var(--tertiary-container) 22%, var(--surface));
}

.summer-route-video-main {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.summer-route-video-order {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  color: var(--surface);
  background: var(--physics);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-route-video-main strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 1000;
}

.summer-route-video-main p {
  margin: 2px 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.summer-route-video-main small {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.summer-route-video-actions {
  display: grid;
  align-content: center;
  gap: 6px;
  width: 132px;
}

.summer-route-video-actions .btn {
  justify-content: center;
  margin: 0;
  min-height: 32px;
  padding: 5px 8px;
  font-size: var(--fs-xs);
  white-space: normal;
}

.summer-video-next-btn {
  min-height: 42px !important;
  border-radius: var(--r-md);
  font-weight: 1000;
}

.summer-task-rescue-entry-row {
  display: flex;
  justify-content: flex-end;
  margin-left: 34px;
}

.summer-rescue-entry {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--secondary) 34%, transparent);
  border-radius: var(--r-md);
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary-container) 22%, var(--surface));
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1.25;
  cursor: pointer;
}

.summer-rescue-entry:hover,
.summer-rescue-entry:focus-visible {
  border-color: var(--secondary);
  background: color-mix(in srgb, var(--secondary-container) 42%, var(--surface));
}

.summer-rescue-entry .material-symbols-outlined {
  font-size: 18px;
}

.summer-rescue-entry.compact {
  width: 100%;
  min-height: 32px;
  padding: 5px 7px;
}

.summer-day-list,
.summer-task-list {
  display: grid;
  gap: 0;
}

.summer-task-list {
  position: relative;
  padding-left: 28px;
}

.summer-task-list::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 11px;
  width: 3px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, rgba(74, 69, 128, 0.28), rgba(74, 69, 128, 0.10));
}

.summer-day-group {
  display: grid;
  gap: 6px;
}

.summer-day-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}

.summer-day-title strong {
  color: var(--text-primary);
  font-size: var(--fs-base);
  font-weight: 900;
}

.summer-day-title span {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-align: right;
}

.summer-task {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.summer-task:last-child {
  border-bottom: 0;
}

.summer-task::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -30px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  color: var(--physics);
  background: var(--surface);
  border: 3px solid rgba(74, 69, 128, 0.24);
  box-shadow: 0 0 0 4px var(--surface);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-task.completed {
  background: transparent;
}

.summer-task.completed::before {
  content: "✓";
  color: var(--surface);
  border-color: var(--tertiary);
  background: var(--tertiary);
  box-shadow: 0 0 0 4px rgba(224, 241, 222, 0.95);
}

.summer-task.pending-import {
  background: color-mix(in srgb, var(--tertiary-container) 24%, var(--surface));
  box-shadow: none;
}

.summer-task.pending-import::before {
  border-color: var(--physics);
  background: var(--physics);
}

.summer-task.queue-current:not(.completed) {
  background: color-mix(in srgb, var(--tertiary-container) 20%, var(--surface));
  box-shadow: none;
}

.summer-task.queue-current:not(.completed)::before {
  border-color: var(--physics);
  background: var(--surface);
  box-shadow: 0 0 0 5px rgba(197, 194, 240, 0.42);
}

.summer-task.queue-future {
  opacity: 0.5;
  filter: grayscale(0.12);
}

.summer-task.queue-future:hover,
.summer-task.queue-future:focus-within {
  opacity: 0.86;
}

.summer-task.needs-reflection {
  background: color-mix(in srgb, var(--secondary-container) 14%, transparent);
  box-shadow: none;
}

.summer-task.needs-reflection::before {
  content: "!";
  color: var(--surface);
  border-color: #9a6222;
  background: #9a6222;
}

.summer-task.focus-flash,
.summer-route-video-card.focus-flash {
  animation: summer-task-focus-flash 1.4s ease-out;
}

@keyframes summer-task-focus-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 69, 128, 0.34), 0 12px 34px rgba(46, 35, 66, 0.1);
  }
  55% {
    box-shadow: 0 0 0 7px rgba(74, 69, 128, 0.14), 0 14px 34px rgba(46, 35, 66, 0.12);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 69, 128, 0), 0 0 0 rgba(46, 35, 66, 0);
  }
}

.summer-task-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.summer-task-title-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.summer-task-check {
  margin-top: 1px;
  color: var(--physics);
  font-size: var(--fs-lg);
}

.summer-task h4 {
  margin: 0 0 2px;
  color: var(--text-primary);
  font-size: var(--fs-base);
  line-height: 1.25;
}

.summer-task-title-row p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
}

.summer-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 34px;
}

.summer-stepper button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 24px;
  padding: 3px 8px;
  border: 0;
  border-radius: var(--r-full);
  color: var(--text-tertiary);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.summer-stepper button.future {
  color: var(--text-tertiary);
  opacity: 0.72;
  filter: none;
}

.summer-stepper i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  color: var(--text-tertiary);
  background: transparent;
  font-style: normal;
  font-size: var(--fs-xs);
}

.summer-stepper button.active {
  color: var(--physics);
  background: var(--primary-tint);
}

.summer-stepper button.active i,
.summer-stepper button.done i,
.summer-stepper button.selected i {
  color: var(--physics);
  background: transparent;
}

.summer-stepper button.done {
  color: var(--text-secondary);
}

.summer-stepper button.selected {
  box-shadow: none;
}

.summer-stepper button.future.selected {
  opacity: 0.72;
}

.summer-step-panel {
  display: grid;
  gap: 8px;
  margin-left: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.summer-step-panel.done {
  background: transparent;
}

.summer-step-panel-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.summer-step-panel-head .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-lg);
}

.summer-step-panel-head strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.summer-step-panel-head p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-step-hint {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 0 34px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
}

.summer-step-panel .summer-step-hint {
  margin-left: 0;
}

.summer-step-hint .material-symbols-outlined {
  align-self: center;
  color: var(--physics);
  font-size: var(--fs-base);
}

.summer-step-hint strong {
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.summer-step-hint.done strong,
.summer-step-hint.done .material-symbols-outlined {
  color: var(--tertiary);
}

.summer-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summer-step-actions .btn {
  margin: 0;
}

.summer-step-panel-practice {
  padding: 0;
}

.summer-step-panel-practice .summer-step-panel-head {
  padding: 0 10px;
}

.summer-exit-box {
  margin-left: 34px;
  border-radius: var(--r-md);
  background: var(--surface-low);
}

.summer-exit-box summary {
  padding: 8px 10px;
  color: var(--physics);
  font-size: var(--fs-sm);
  font-weight: 900;
  cursor: pointer;
}

.summer-exit-box summary::marker {
  color: var(--physics);
}

.summer-exit-question,
.summer-exit-hint {
  margin: 0;
  padding: 0 10px 8px;
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.summer-exit-question {
  color: var(--text-primary);
}

.summer-exit-hint {
  color: var(--text-secondary);
}

.summer-exit-box .btn {
  margin: 0 10px 10px;
}

.summer-prep-box {
  display: grid;
  gap: 8px;
  margin: 0 0 6px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.summer-prep-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--physics);
  font-size: var(--fs-sm);
  font-weight: 900;
}

.summer-prep-title .material-symbols-outlined {
  font-size: var(--fs-md);
}

.summer-prep-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summer-prep-tags span {
  padding: 2px 7px;
  border-radius: var(--r-full);
  color: #57495a;
  background: var(--surface-dim);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.summer-prep-lines {
  display: grid;
  gap: 5px;
}

.summer-prep-lines p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.summer-prep-lines strong {
  display: inline-block;
  min-width: 56px;
  margin-right: 6px;
  color: var(--text-primary);
}

.summer-prep-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summer-prep-links .btn {
  margin: 0;
}

.summer-prep-links .material-symbols-outlined {
  font-size: var(--fs-md);
}

.summer-practice-list {
  display: grid;
  gap: 0;
  padding: 0;
}

.summer-practice-item {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.summer-practice-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--physics);
  font-size: var(--fs-sm);
  font-weight: 900;
}

.summer-practice-title span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  color: var(--surface);
  background: var(--physics);
  font-size: var(--fs-xs);
}

.summer-practice-image-link {
  display: block;
  border-radius: var(--r-md);
}

.summer-practice-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid rgba(74, 69, 128, 0.14);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: zoom-in;
}

.summer-practice-item .summer-exit-question,
.summer-practice-item .summer-exit-hint {
  padding: 0;
}

.summer-practice-item .btn {
  justify-self: start;
  margin: 0;
}

.summer-practice-empty {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--text-secondary);
  background: transparent;
}

.summer-practice-empty .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-lg);
}

.summer-practice-empty strong {
  display: block;
  margin-bottom: 3px;
  color: var(--physics);
  font-size: var(--fs-sm);
}

.summer-practice-empty p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.summer-example-box {
  display: grid;
  gap: 7px;
  margin-left: 34px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.summer-example-box.compact {
  margin-top: -2px;
  padding: 7px 0;
  background: transparent;
}

.summer-example-head {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.summer-example-head .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-md);
}

.summer-example-head strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.summer-example-head p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-example-actions {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto auto;
  gap: 6px;
  align-items: stretch;
}

.summer-route-video-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  min-width: 0;
}

.summer-task-publication {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--line));
  border-radius: var(--r-full);
  color: color-mix(in srgb, var(--warn) 72%, var(--text-primary));
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.45;
}

.summer-task-publication.verified {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.summer-task-publication.preparing {
  border-color: var(--line);
  color: var(--text-tertiary);
  background: var(--surface-dim);
}

.summer-route-step.preparing {
  opacity: 0.9;
}

.summer-evidence-text { display: grid; gap: 5px; color: var(--text-secondary); font-size: var(--fs-xs); }
.summer-evidence-text textarea { width: 100%; resize: vertical; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface); color: var(--text-primary); }
.summer-ai-handoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-left: 34px; padding: 12px; border: 1px solid rgba(79, 139, 103, .18); border-radius: var(--r-md); background: rgba(79, 139, 103, .05); }
.summer-ai-handoff > div { display: flex; min-width: 0; flex: 1; gap: 8px; align-items: flex-start; }
.summer-ai-handoff strong { display: block; font-size: var(--fs-sm); }
.summer-ai-handoff p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--fs-xs); }

.learning-advisor-feedback { margin: 0 14px 14px; border-top: 1px solid var(--line); }
.learning-advisor-feedback > summary { display: flex; align-items: center; gap: 8px; padding: 10px 0 0; list-style: none; color: var(--text-secondary); cursor: pointer; }
.learning-advisor-feedback > summary::-webkit-details-marker { display: none; }
.learning-advisor-feedback > summary > span:nth-child(2) { display: grid; gap: 1px; }
.learning-advisor-feedback > summary strong { color: var(--text-primary); font-size: var(--fs-xs); }
.learning-advisor-feedback > summary small { color: var(--text-tertiary); font-size: 11px; }
.learning-advisor-feedback > summary > .material-symbols-outlined:last-child { margin-left: auto; transition: transform .2s; }
.learning-advisor-feedback[open] > summary > .material-symbols-outlined:last-child { transform: rotate(180deg); }
.learning-advisor-feedback-body { display: grid; gap: 9px; padding: 10px 0 2px; }
.learning-advisor-feedback-body > p { margin: 0; color: var(--text-secondary); font-size: var(--fs-xs); }
.learning-advisor-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.learning-advisor-reasons label { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-low); color: var(--text-primary); font-size: var(--fs-xs); cursor: pointer; }
.learning-advisor-note { display: grid; gap: 5px; color: var(--text-secondary); font-size: var(--fs-xs); }
.learning-advisor-note textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface); color: var(--text-primary); }
.learning-advisor-safety { color: var(--text-tertiary) !important; font-size: 11px !important; }

.summer-example-paste {
  display: grid;
  grid-template-columns: 18px auto minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px dashed rgba(74, 69, 128, 0.35);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  background: var(--surface-low);
  cursor: text;
}

.summer-example-paste:focus {
  outline: none;
  border-color: var(--physics);
  box-shadow: 0 0 0 3px rgba(74, 69, 128, 0.12);
}

.summer-example-paste .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-md);
}

.summer-example-paste strong {
  color: var(--physics);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.summer-example-paste small {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.35;
  white-space: nowrap;
}

.summer-example-quiz,
.summer-example-copy {
  align-self: stretch;
  justify-content: center;
  margin: 0;
  min-height: 32px;
  padding: 5px 8px;
  font-size: var(--fs-xs);
}

.summer-example-ai-status {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: 4px 0;
  border-radius: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
}

.summer-example-ai-status .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-md);
}

.summer-example-ai-status strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-xs);
  line-height: 1.3;
}

.summer-example-ai-status p {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.summer-example-ai-status.ready {
  border-color: transparent;
  background: transparent;
}

.summer-example-ai-status.ready .material-symbols-outlined {
  color: var(--tertiary);
}

.summer-example-local-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -2px 0 0;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.4;
}

.summer-example-local-note .material-symbols-outlined {
  color: var(--tertiary);
  font-size: 15px;
}

.summer-task-support {
  margin-left: 34px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.summer-task-support[open] {
  background: transparent;
}

.summer-task-support > summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  padding: 8px 0;
  color: var(--text-secondary);
  list-style: none;
  cursor: pointer;
}

.summer-task-support > summary::-webkit-details-marker {
  display: none;
}

.summer-task-support > summary .material-symbols-outlined {
  color: var(--physics);
  font-size: 19px;
}

.summer-task-support > summary strong {
  color: var(--physics);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-task-support > summary small {
  max-width: 160px;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summer-task-support > summary::after {
  content: "展开";
  color: var(--physics);
  font-size: 11px;
  font-weight: 1000;
}

.summer-task-support[open] > summary::after {
  content: "收起";
}

.summer-task-support-body {
  display: grid;
  gap: 9px;
  padding: 0 0 8px;
}

.summer-rescue-slot:empty {
  display: none;
}

.summer-rescue-panel {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--secondary) 32%, transparent);
  border-left: 4px solid var(--secondary);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--secondary-container) 24%, var(--surface));
}

.summer-rescue-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  color: var(--secondary);
  font-size: 11px;
  font-weight: 1000;
}

.summer-rescue-label .material-symbols-outlined {
  font-size: 17px;
}

.summer-rescue-head {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.summer-rescue-head > .material-symbols-outlined {
  color: var(--secondary);
  font-size: 24px;
}

.summer-rescue-head strong,
.summer-rescue-head p {
  display: block;
  margin: 0;
}

.summer-rescue-head strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.summer-rescue-head p {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-rescue-reasons,
.summer-rescue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summer-rescue-reasons button {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 900;
  cursor: pointer;
}

.summer-rescue-reasons button.selected {
  border-color: color-mix(in srgb, var(--secondary) 48%, transparent);
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary-container) 42%, var(--surface));
}

.summer-rescue-action {
  padding: 10px 12px;
  border-left: 4px solid var(--secondary);
  background: var(--surface);
}

.summer-rescue-action span,
.summer-rescue-action strong,
.summer-rescue-action p {
  display: block;
  margin: 0;
}

.summer-rescue-action span {
  color: var(--secondary);
  font-size: 11px;
  font-weight: 1000;
}

.summer-rescue-action strong {
  margin-top: 3px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.summer-rescue-action p {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

.summer-rescue-resource {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.summer-rescue-resource > .material-symbols-outlined {
  color: var(--physics);
  font-size: 20px;
}

.summer-rescue-resource.reference {
  border-color: color-mix(in srgb, var(--tertiary) 24%, var(--line));
  background: color-mix(in srgb, var(--tertiary-container) 14%, var(--surface));
}

.summer-rescue-resource.reference > .material-symbols-outlined {
  color: var(--tertiary);
}

.summer-rescue-resource strong,
.summer-rescue-resource p {
  display: block;
  margin: 0;
}

.summer-rescue-resource strong {
  color: var(--text-primary);
  font-size: var(--fs-xs);
}

.summer-rescue-resource p {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-rescue-resource .btn,
.summer-rescue-actions .btn,
.summer-rescue-help .btn {
  min-height: 40px;
  margin: 0;
  white-space: normal;
}

.summer-rescue-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--secondary) 18%, transparent);
}

.summer-rescue-check > .material-symbols-outlined {
  color: var(--physics);
  font-size: 20px;
}

.summer-rescue-check strong,
.summer-rescue-check p {
  display: block;
  margin: 0;
}

.summer-rescue-check strong {
  color: var(--text-primary);
  font-size: var(--fs-xs);
}

.summer-rescue-check p {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-rescue-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--secondary) 18%, transparent);
}

.summer-rescue-help label {
  display: grid;
  gap: 5px;
}

.summer-rescue-help label > span {
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.summer-rescue-help input {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-primary);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-sm);
}

.summer-rescue-defer {
  justify-self: start;
  padding: 2px 0;
  border: 0;
  color: var(--text-tertiary);
  background: transparent;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.summer-task-paused-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 900;
}

.summer-task-paused-label .material-symbols-outlined {
  font-size: 16px;
}

.rescue-paused .summer-rescue-entry {
  display: none;
}

.summer-task.rescue-paused .summer-normal-task-content,
.summer-task.rescue-paused > .summer-task-actions,
.summer-route-step.rescue-paused .summer-route-video-actions,
.summer-route-step.rescue-paused .summer-task-support {
  opacity: 0.46;
}

.summer-task.rescue-paused .summer-normal-task-content,
.summer-task.rescue-paused > .summer-task-actions,
.summer-route-step.rescue-paused .summer-route-video-actions,
.summer-route-step.rescue-paused .summer-task-support,
[data-rescue-blocked-action][aria-disabled="true"] {
  pointer-events: none;
}

.summer-completed-review {
  display: grid;
  gap: 9px;
}

.summer-completed-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-radius: 0;
  background: transparent;
}

.summer-completed-head .material-symbols-outlined {
  color: var(--tertiary);
  font-size: 22px;
}

.summer-completed-head strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 1000;
}

.summer-completed-head p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.summer-completed-examples {
  display: grid;
  gap: 7px;
}

.summer-completed-examples > strong {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 1000;
}

.summer-import-dock {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.summer-import-dock.pending {
  border-color: var(--line);
  background: transparent;
}

.summer-import-dock summary {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
}

.summer-import-dock summary::-webkit-details-marker {
  display: none;
}

.summer-import-dock summary .material-symbols-outlined {
  color: var(--physics);
  font-size: 18px;
}

.summer-import-dock summary strong {
  color: var(--physics);
  font-size: 12px;
  font-weight: 1000;
}

.summer-import-dock summary small {
  max-width: 150px;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summer-import-dock-body {
  display: grid;
  gap: 8px;
  padding: 0 0 9px;
}

.summer-import-dock-body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.summer-import-dock-body textarea {
  width: 100%;
  min-height: 72px;
  padding: 9px 10px;
  border: 1px solid rgba(74, 69, 128, 0.14);
  border-radius: 10px;
  color: var(--text-primary);
  background: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
}

.summer-import-dock-result {
  color: var(--text-secondary);
  font-size: 12px;
}

/* 紧凑胶囊：只占一小块，不再像宽卡片那样常年挡住右栏下方内容 */
.summer-pending-import-float {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: none;
  padding: 9px 14px 9px 12px;
  border: 1px solid rgba(74, 69, 128, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(46, 35, 66, 0.16);
  color: var(--physics, #4a4580);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.summer-pending-import-float .material-symbols-outlined {
  font-size: 18px;
}

.summer-reward-float {
  --reward-ink: color-mix(in srgb, var(--ink) 84%, #000);
  --reward-warm: color-mix(in srgb, var(--gold) 64%, var(--primary));
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 1px solid rgba(154, 98, 34, 0.2);
  border-radius: var(--r-lg);
  background: rgba(255, 252, 245, 0.97);
  box-shadow: 0 18px 44px rgba(46, 35, 66, 0.2);
  user-select: none;
}

.summer-reward-float.ready {
  border-color: rgba(154, 98, 34, 0.36);
  box-shadow: 0 18px 48px rgba(154, 98, 34, 0.22);
}

.summer-reward-float.drawn {
  animation: summer-reward-pop 0.7s ease-out;
}

.summer-reward-float.drawing {
  border-color: rgba(244, 155, 66, 0.45);
}

@keyframes summer-reward-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.summer-reward-float.collapsed {
  width: auto;
  max-width: calc(100vw - 32px);
  border-radius: var(--r-full);
}

.summer-reward-float.ready.collapsed {
  animation: summer-reward-capsule-pulse 2.8s ease-in-out infinite;
}

@keyframes summer-reward-capsule-pulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(154, 98, 34, 0.2); }
  50% { box-shadow: 0 12px 34px rgba(217, 161, 63, 0.38), 0 0 0 4px rgba(217, 161, 63, 0.12); }
}

.summer-reward-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  gap: 9px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  touch-action: none;
}

.summer-reward-head:active,
.summer-reward-float.dragging .summer-reward-head {
  cursor: grabbing;
}

.summer-reward-float.collapsed .summer-reward-head {
  display: flex;
  min-height: 44px;
  gap: 8px;
  padding: 6px 9px 6px 6px;
}

.summer-reward-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--reward-ink);
  background: conic-gradient(var(--good) 0 var(--reward-angle, 0deg), rgba(var(--gold-rgb), 0.16) var(--reward-angle, 0deg) 360deg);
  box-shadow: 0 8px 18px rgba(154, 98, 34, 0.18);
  overflow: hidden;
}

.summer-reward-float.collapsed .summer-reward-icon {
  width: 32px;
  height: 32px;
}

.summer-reward-icon::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 38%, var(--surface)), var(--gold));
  box-shadow: inset 0 -2px 0 rgba(104, 65, 28, 0.14);
}

.summer-reward-float.ready .summer-reward-icon {
  background: conic-gradient(var(--good) 0 var(--reward-angle, 0deg), var(--gold) var(--reward-angle, 0deg) 360deg);
}

/* 用固定 24×24 的 grid 盒子 + place-items:center 兜住字形，配合父级 flex 居中，
   savings/cake/casino 三种字形都能真正居中，不再需要逐字形 translate 硬纠偏。 */
.summer-reward-icon .material-symbols-outlined {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
}

.summer-reward-float.collapsed .summer-reward-icon .material-symbols-outlined {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.summer-reward-head strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 1000;
}

.summer-reward-float.collapsed .summer-reward-head strong {
  white-space: nowrap;
}

.summer-reward-head span:not(.material-symbols-outlined) {
  display: block;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summer-reward-arrow {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--text-tertiary);
  font-size: 20px;
}

.summer-reward-float.collapsed .summer-reward-arrow {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.summer-reward-body {
  display: grid;
  gap: 8px;
  max-height: min(520px, calc(100vh - 116px));
  max-height: min(520px, calc(100dvh - 116px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 10px 10px;
}

@media (max-width: 980px) {
  .summer-reward-float {
    right: 16px;
    bottom: 88px;
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
  }

  .summer-reward-body {
    max-height: calc(100vh - 196px);
    max-height: calc(100dvh - 196px);
  }
}

body:has(.focus-mini-dock) .summer-reward-float {
  bottom: 88px;
}

@media (max-width: 980px) {
  body:has(.focus-mini-dock) .summer-reward-float {
    bottom: 152px;
  }
}

.summer-reward-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(154, 98, 34, 0.12);
}

.summer-reward-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--good), var(--gold), var(--warn));
  transition: width 0.35s ease;
}

.summer-reward-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 900;
}

.summer-reward-quick-progress {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 850;
}

.summer-reward-rules-link {
  justify-self: start;
  padding-inline: 0;
}

.summer-reward-guide {
  display: grid;
  gap: 7px;
}

.summer-reward-goal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(154, 98, 34, 0.14);
  border-radius: var(--r-md);
  background: rgba(255, 249, 236, 0.78);
}

.summer-reward-goal.stage {
  background: color-mix(in srgb, var(--primary-soft) 58%, #fff);
}

.summer-reward-goal strong,
.summer-reward-node strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-reward-goal span,
.summer-reward-node span,
.summer-reward-node small {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.summer-reward-goal b {
  color: var(--reward-ink);
  font-size: 12px;
  font-weight: 1000;
}

.summer-reward-mini-track {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: rgba(154, 98, 34, 0.12);
}

.summer-reward-mini-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--good), var(--gold));
}

.summer-reward-rule {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 8px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-subtle) 72%, #fff);
}

.summer-reward-rule .material-symbols-outlined {
  color: var(--primary);
  font-size: 18px;
}

.summer-reward-rule p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.summer-reward-node {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
}

.summer-reward-node-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 2px;
}

.summer-reward-node-steps span {
  display: grid;
  place-items: center;
  min-height: 24px;
  border-radius: var(--r-sm);
  background: rgba(154, 98, 34, 0.1);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 1000;
}

.summer-reward-node-steps span.done {
  background: color-mix(in srgb, var(--good) 18%, #fff);
  color: color-mix(in srgb, var(--good) 72%, #000);
}

.summer-reward-draw {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  border: 0;
  border-radius: var(--r-md);
  color: var(--reward-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 42%, var(--surface)), var(--gold));
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 1000;
  box-shadow: 0 10px 24px rgba(154, 98, 34, 0.22);
  cursor: pointer;
}

.summer-reward-draw:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  box-shadow: none;
}

/* 两个抽奖按钮并排：抽小奖 / 抽大奖 */
.summer-reward-draw-row {
  display: flex;
  gap: 8px;
}

.summer-reward-draw-row .summer-reward-draw {
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 78px;
  padding: 7px 4px;
  font-size: var(--fs-base);
}

.summer-reward-draw-row .summer-reward-draw strong {
  font-size: var(--fs-base);
  line-height: 1.15;
}

.summer-reward-draw.stage {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 58%, var(--surface)), var(--reward-warm));
}

.summer-reward-draw .material-symbols-outlined {
  font-size: 18px;
}

.summer-reward-draw small {
  font-size: var(--fs-xs);
  font-weight: 800;
  opacity: 0.85;
}

.summer-reward-draw .summer-reward-pool-preview {
  overflow: hidden;
  max-width: 100%;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summer-reward-draw .summer-reward-ticket-count {
  font-size: 10px;
  line-height: 1.2;
  opacity: 0.72;
}

.summer-reward-draw .summer-reward-guarantee {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: color-mix(in srgb, var(--reward-ink) 88%, #000);
  font-size: 10px;
  line-height: 1.25;
  opacity: 1;
}

/* 3 颗骰子一排（骰子加大，更有游戏感） */
.summer-reward-dice-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 4px;
}

.summer-reward-die3 {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 2px solid rgba(var(--gold-rgb), 0.34);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 18%, var(--surface)), color-mix(in srgb, var(--gold) 70%, var(--surface)));
  color: var(--reward-ink);
  font-size: 46px;
  line-height: 1;
  box-shadow: inset 0 -3px 0 rgba(111, 68, 24, 0.12), 0 8px 16px rgba(154, 98, 34, 0.16);
}

.summer-reward-die3.empty {
  color: color-mix(in srgb, var(--reward-ink) 42%, transparent);
  background: rgba(255, 248, 228, 0.7);
}

.summer-reward-die3.empty[data-summer-action] {
  cursor: pointer;
  border-style: dashed;
}

.summer-reward-die3.rolling {
  animation: summer-reward-dice-roll 0.16s ease-in-out infinite alternate;
}

.summer-reward-die3.landed {
  animation: summer-reward-die-pop 0.3s ease-out;
}

@keyframes summer-reward-die-pop {
  0% { transform: scale(0.7); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.summer-reward-dice-caption {
  margin: 0 0 2px;
  color: color-mix(in srgb, var(--gold) 50%, var(--ink));
  font-size: var(--fs-xs);
  font-weight: 900;
  text-align: center;
}

.summer-reward-roll {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border: 0;
  border-radius: var(--r-md);
  color: var(--reward-ink);
  background: linear-gradient(135deg, var(--gold), var(--reward-warm));
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 1000;
  box-shadow: 0 12px 24px rgba(154, 98, 34, 0.24);
  cursor: pointer;
}

.summer-reward-roll .material-symbols-outlined {
  font-size: var(--fs-lg);
}

.summer-reward-claim {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.4;
}

.summer-reward-game {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(154, 98, 34, 0.14);
  border-radius: var(--r-md);
  background: rgba(255, 248, 228, 0.75);
}

.summer-reward-game-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.summer-reward-dice {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(var(--gold-rgb), 0.32);
  border-radius: var(--r-md);
  color: var(--reward-ink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 18%, var(--surface)), color-mix(in srgb, var(--gold) 70%, var(--surface)));
  font-size: var(--fs-xl);
  font-weight: 1000;
  line-height: 1;
  box-shadow: inset 0 -3px 0 rgba(111, 68, 24, 0.12), 0 8px 16px rgba(154, 98, 34, 0.14);
}

.summer-reward-dice.rolling {
  animation: summer-reward-dice-roll 0.18s ease-in-out infinite alternate;
}

@keyframes summer-reward-dice-roll {
  from { transform: rotate(-5deg) scale(0.96); }
  to { transform: rotate(5deg) scale(1.04); }
}

.summer-reward-game-head strong {
  display: block;
  color: color-mix(in srgb, var(--gold) 50%, var(--ink));
  font-size: var(--fs-sm);
  font-weight: 1000;
}

.summer-reward-game-head span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.35;
}

.summer-reward-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.summer-reward-cell {
  display: grid;
  align-content: center;
  min-height: 44px;
  padding: 6px 5px;
  border: 1px solid rgba(154, 98, 34, 0.13);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text-secondary);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.summer-reward-cell span {
  color: color-mix(in srgb, var(--gold) 54%, var(--ink));
  font-size: var(--fs-xs);
  font-weight: 1000;
  line-height: 1.1;
}

.summer-reward-cell strong {
  overflow: hidden;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summer-reward-cell.big span,
.summer-reward-cell.jackpot span {
  color: var(--bad);
}

.summer-reward-cell.active {
  transform: translateY(-2px) scale(1.04);
  border-color: color-mix(in srgb, var(--good) 56%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--good) 12%, var(--surface)), color-mix(in srgb, var(--gold) 22%, var(--surface)));
  box-shadow: 0 10px 18px rgba(64, 108, 58, 0.2);
}

.summer-reward-cell.target {
  border-color: rgba(178, 51, 54, 0.38);
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 32%, var(--surface)), color-mix(in srgb, var(--warn) 18%, var(--surface)));
}

.summer-reward-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  padding: 9px;
  border-radius: var(--r-md);
  background: rgba(255, 225, 120, 0.28);
}

.summer-reward-result span,
.summer-reward-result em {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 800;
}

.summer-reward-result strong {
  color: color-mix(in srgb, var(--gold) 50%, var(--ink));
  font-size: var(--fs-base);
  font-weight: 1000;
}

.summer-reward-result .btn {
  grid-row: span 2;
  white-space: nowrap;
}

.summer-reward-result.big,
.summer-reward-result.jackpot {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.32), color-mix(in srgb, var(--warn) 20%, transparent));
}

.summer-task-reflection-card {
  display: grid;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.summer-task-reflection-card.ready {
  border-color: var(--line);
  background: transparent;
}

.summer-task-reflection-card.done {
  border-color: var(--line);
  background: transparent;
}

.summer-task-reflection-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.summer-task-reflection-head .material-symbols-outlined {
  color: var(--physics);
  font-size: var(--fs-lg);
}

.summer-task-reflection-card.done .summer-task-reflection-head .material-symbols-outlined {
  color: var(--tertiary);
}

.summer-task-reflection-head strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-task-reflection-head p {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.summer-reflection-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.summer-reflection-checks span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid rgba(74, 69, 128, 0.12);
  border-radius: var(--r-full);
  color: var(--text-tertiary);
  background: var(--surface-low);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-reflection-checks span.done {
  color: var(--tertiary);
  border-color: rgba(47, 106, 63, 0.22);
  background: color-mix(in srgb, var(--tertiary-container) 26%, var(--surface));
}

.summer-reflection-checks i {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  color: inherit;
  background: rgba(74, 69, 128, 0.08);
  font-style: normal;
  font-size: var(--fs-xs);
}

.summer-inline-reflection {
  border-top: 1px solid rgba(74, 69, 128, 0.08);
  padding-top: 6px;
}

.summer-inline-reflection summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--physics);
  font-size: var(--fs-xs);
  font-weight: 1000;
  cursor: pointer;
  list-style: none;
}

.summer-inline-reflection summary::-webkit-details-marker {
  display: none;
}

.summer-inline-reflection summary::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-size: var(--fs-md);
  line-height: 1;
}

.summer-inline-reflection[open] summary::after {
  content: "expand_less";
}

.summer-inline-reflection-body {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.summer-reflection-extra {
  border: 1px solid rgba(74, 69, 128, 0.1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.58);
}

.summer-reflection-extra > summary {
  padding: 8px 10px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 1000;
  cursor: pointer;
  list-style: none;
}

.summer-reflection-extra > summary::-webkit-details-marker {
  display: none;
}

.summer-reflection-extra > summary::after {
  content: "expand_more";
  float: right;
  font-family: "Material Symbols Outlined";
  font-size: var(--fs-md);
  line-height: 1;
}

.summer-reflection-extra[open] > summary::after {
  content: "expand_less";
}

.summer-reflection-extra > div {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.summer-example-empty {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.summer-example-list {
  display: grid;
  gap: 8px;
}

.summer-example-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(74, 69, 128, 0.12);
  border-radius: var(--r-md);
  background: var(--surface);
}

.summer-example-thumb {
  display: grid;
  place-items: center;
  min-height: 72px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-low);
}

.summer-example-thumb.loaded {
  background: var(--surface);
}

.summer-example-thumb img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: contain;
}

.summer-example-thumb.loaded .material-symbols-outlined {
  display: none;
}

.summer-example-thumb .material-symbols-outlined {
  color: var(--text-tertiary);
}

.summer-example-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.summer-example-meta strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.summer-example-meta p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.summer-example-statuses,
.today-fusion-example-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.summer-example-statuses button,
.today-fusion-example-statuses button {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(74, 69, 128, 0.12);
  border-radius: var(--r-full);
  color: var(--text-secondary);
  background: var(--surface-low);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 900;
  cursor: pointer;
}

.summer-example-statuses button.selected,
.today-fusion-example-statuses button.selected {
  color: var(--surface);
  border-color: var(--physics);
  background: var(--physics);
}

.summer-example-statuses button.danger {
  color: var(--primary);
}

.summer-image-copy-fallback {
  display: block;
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  margin-top: 10px;
  border: 1px solid rgba(74, 69, 128, 0.16);
  border-radius: var(--r-md);
  background: var(--surface);
}

.summer-reflection-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(31, 25, 47, 0.42);
  backdrop-filter: blur(5px);
}

.summer-reflection-dialog {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(74, 69, 128, 0.18);
  border-radius: var(--r-lg);
  background: #fffdf8;
  box-shadow: 0 20px 60px rgba(31, 25, 47, 0.22);
}

.summer-reflection-dialog.daily {
  background: #fbfff9;
}

.summer-reflection-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.summer-reflection-head > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  color: var(--surface);
  background: var(--physics);
  font-size: var(--fs-xl);
}

.summer-reflection-dialog.daily .summer-reflection-head > .material-symbols-outlined {
  background: var(--tertiary);
}

.summer-reflection-head h3 {
  margin: 1px 0 3px;
  color: var(--text-primary);
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.summer-reflection-head p:not(.summer-kicker) {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.summer-reflection-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.summer-reflection-choice legend,
.summer-reflection-field span {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-reflection-choice > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.summer-reflection-choice.task > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summer-reflection-dialog.daily .summer-reflection-choice > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.summer-reflection-choice label {
  min-width: 0;
}

.summer-reflection-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.summer-reflection-choice label span {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid rgba(74, 69, 128, 0.14);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  background: var(--surface-low);
  font-size: var(--fs-xs);
  font-weight: 1000;
  cursor: pointer;
}

.summer-reflection-choice.task label span {
  min-height: 42px;
  padding-inline: 10px;
  text-align: center;
  line-height: 1.25;
}

.summer-reflection-choice input:checked + span {
  color: var(--surface);
  border-color: var(--physics);
  background: var(--physics);
}

.summer-reflection-dialog.daily .summer-reflection-choice input:checked + span {
  border-color: var(--tertiary);
  background: var(--tertiary);
}

.summer-reflection-field {
  display: grid;
  gap: 6px;
}

.summer-reflection-field textarea,
.summer-reflection-field input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(74, 69, 128, 0.14);
  border-radius: var(--r-md);
  color: var(--text-primary);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.summer-reflection-field textarea {
  resize: vertical;
  min-height: 58px;
}

.summer-reflection-field.compact input {
  min-height: 38px;
}

.summer-reflection-field textarea:focus,
.summer-reflection-field input:focus {
  outline: none;
  border-color: var(--physics);
  box-shadow: 0 0 0 3px rgba(74, 69, 128, 0.1);
}

.summer-stuck-tags {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.summer-stuck-tags legend {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 1000;
}

.summer-stuck-tags > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summer-stuck-tags label {
  min-width: 0;
}

.summer-stuck-tags input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.summer-stuck-tags label span {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(74, 69, 128, 0.14);
  border-radius: var(--r-full);
  color: var(--text-secondary);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 1000;
  cursor: pointer;
}

.summer-stuck-tags input:checked + span {
  color: var(--physics);
  border-color: rgba(74, 69, 128, 0.32);
  background: color-mix(in srgb, var(--secondary-container) 36%, var(--surface));
}

.summer-reflection-message {
  display: none;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-md);
  color: var(--primary);
  background: #fff1f3;
  font-size: var(--fs-xs);
  font-weight: 900;
}

.summer-reflection-message.show {
  display: block;
}

.summer-reflection-submit {
  width: 100%;
  min-height: 42px;
  justify-content: center;
  margin: 0;
}

.summer-diagram {
  margin: 0 0 2px;
  padding: 8px;
  border: 1px solid rgba(74, 69, 128, 0.18);
  border-radius: var(--r-md);
  background: var(--surface);
}

.summer-diagram svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
}

.diagram-wall {
  stroke: #9a8278;
  stroke-width: 7;
  stroke-linecap: round;
}

.diagram-rope {
  stroke: var(--physics);
  stroke-width: 4;
  stroke-linecap: round;
}

.diagram-rope-thin {
  stroke-width: 3;
}

.diagram-guide,
.diagram-arc {
  fill: none;
  stroke: #b9a9ad;
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.diagram-dot {
  fill: var(--physics);
}

.diagram-weight {
  fill: var(--secondary-container);
  stroke: var(--secondary);
  stroke-width: 2;
}

.diagram-label,
.diagram-note {
  fill: var(--text-primary);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-weight: 800;
}

.diagram-label {
  font-size: 15px;
}

.diagram-note {
  font-size: 12px;
  fill: var(--text-secondary);
}

.diagram-weight-text {
  fill: var(--secondary);
}

.summer-import-waiting,
.summer-import-done {
  margin: 0 0 0 34px;
  padding: 4px 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.summer-import-waiting {
  color: var(--physics);
  background: transparent;
}

.summer-import-done {
  color: var(--tertiary);
  background: transparent;
}

.summer-task-actions {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 6px;
  width: 150px;
}

.summer-task-actions .btn {
  justify-content: center;
  min-width: 0;
  width: 100%;
  white-space: normal;
}

.summer-next-btn {
  min-height: 40px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 1000;
  box-shadow: none;
}

.summer-task.completed .summer-next-btn {
  min-height: 36px;
  border-radius: var(--r-md);
  box-shadow: none;
}

.summer-more-actions {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: transparent;
}

.summer-more-actions.compact {
  background: var(--surface-low);
}

.summer-more-actions summary {
  padding: 7px 10px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

.summer-more-actions summary::marker {
  color: var(--text-tertiary);
}

.summer-more-actions div {
  display: grid;
  gap: 6px;
  padding: 0 6px 6px;
}

.summer-task-actions .material-symbols-outlined,
.summer-exit-box .material-symbols-outlined {
  font-size: var(--fs-md);
}

.summer-prompt-fallback {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  margin-top: 10px;
  padding: 12px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-md);
  color: var(--text-primary);
  background: var(--surface-low);
  font-size: var(--fs-base);
  line-height: 1.6;
}

.summer-prompt-fallback:focus {
  outline: none;
  border-color: var(--physics);
}

.farm-level-badge {
  color: var(--primary);
  font-size: var(--fs-md);
  font-weight: 800;
}

.farm-xp-hint {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.mini-farm-card {
  padding: 14px;
}

.week-trend-card {
  padding: 0;
}

.growth-farm-section,
.growth-week-section {
  display: grid;
  gap: 8px;
}

.growth-divider {
  height: 1px;
  margin: 12px 0;
  background: var(--line);
}

.week-trend-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.week-trend-head .material-symbols-outlined {
  font-size: var(--fs-md);
  color: var(--primary);
}

.week-trend-head h3 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 800;
}

.week-trend-total {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.week-trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 76px;
}

.week-trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  height: 100%;
  justify-content: flex-end;
}

.week-trend-count {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  min-height: 14px;
}

.week-trend-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.week-trend-bar {
  width: 70%;
  max-width: 16px;
  min-height: 3px;
  border-radius: var(--r-xs);
  background: var(--primary-soft);
  transition: height 0.3s ease;
}

.week-trend-col.today .week-trend-bar {
  background: var(--primary);
}

.week-trend-col.today .week-trend-count,
.week-trend-col.today .week-trend-day {
  color: var(--primary);
  font-weight: 800;
}

.week-trend-day {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.mini-farm-header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.mini-farm-row {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: flex-start;
}

.mini-plot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0;
  background: transparent;
}

.mini-plot-sprite {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #bda37a 0%, #7a573a 54%, #56371f 100%);
  box-shadow: inset 0 -8px 0 rgba(62, 35, 18, 0.22);
}

/* 猫植物精灵：cat_crops.png 带透明通道，不能用 screen 混合（会把上方泛白）；居中显示 */
.mini-crop-sprite {
  flex-shrink: 0;
  transform: scale(0.6);
  transform-origin: center center;
}

/* 导入后植物跨阶段长大时，地块里的植物本体弹一下，给"真实农场动了"的即时反馈 */
.mini-crop-grew {
  animation: mini-crop-grow-pop 0.6s ease-out;
}

@keyframes mini-crop-grow-pop {
  0% { transform: scale(0.6); }
  40% { transform: scale(0.74); }
  70% { transform: scale(0.55); }
  100% { transform: scale(0.6); }
}

.mini-plot-empty {
  width: 80px;
  height: 80px;
}

.mini-plot-label {
  color: var(--text-main);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.1;
  margin-top: 3px;
}

.mini-plot-count {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.1;
}

.mini-harvest-btn {
  border: 0;
  border-radius: var(--r-full);
  padding: 2px 8px;
  color: var(--surface);
  background: var(--primary);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
}

.mini-farm-xp-track {
  height: 3px;
  overflow: hidden;
  border-radius: var(--r-full);
  margin-top: 10px;
  background: var(--surface-high);
}

.mini-farm-xp-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--primary);
  transition: width 0.4s ease;
}

.mini-farm-week-hint {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.farm-hibernate-card {
  padding: 24px;
  text-align: center;
}

.farm-hibernate-icon {
  margin: 0 0 8px;
  font-size: var(--fs-num);
}

.farm-hibernate-title {
  margin: 0;
  color: var(--text-primary);
  font-weight: 800;
}

.farm-mini-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-full);
  background: var(--tertiary-container);
  color: var(--tertiary);
  font-size: var(--fs-xl);
  box-shadow: var(--soft-shadow);
}

@media (max-width: 980px) {
  .home-flow {
    grid-template-columns: 1fr;
    max-width: 680px;
    gap: 10px;
    padding-bottom: 112px;
  }

  .home-left-stack,
  .home-right-stack {
    gap: 10px;
  }
}

@media (max-width: 700px) {
  .home-flow {
    gap: 10px;
  }

  .summer-task-card {
    padding: 14px;
  }

  .summer-route-card {
    margin-top: 10px;
    padding: 14px;
  }

  .summer-route-card-head {
    flex-direction: column;
    gap: 8px;
  }

  .summer-route-card-stats {
    justify-content: flex-start;
  }

  .summer-route-hero {
    display: block;
  }

  .summer-hero-title-line {
    flex-direction: column;
    gap: 6px;
  }

  .summer-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: flex-start;
    width: 100%;
    max-width: none;
  }

  .summer-hero-stat {
    width: 100%;
  }

  .summer-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summer-route-day {
    min-height: 82px;
  }

  .summer-route-detail-head {
    flex-direction: column;
    gap: 8px;
  }

  .summer-route-detail-actions {
    justify-content: flex-start;
  }

  .summer-active-day-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .summer-deferred-gate {
    grid-template-columns: 1fr;
  }

  .summer-deferred-summary-head {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .summer-deferred-view {
    grid-column: 2;
    justify-self: start;
  }

  .summer-deferred-list {
    padding-left: 42px;
  }

  .summer-deferred-gate-actions,
  .summer-rescue-actions,
  .summer-rescue-help {
    display: grid;
    grid-template-columns: 1fr;
  }

  .summer-deferred-gate-actions .btn,
  .summer-rescue-actions .btn,
  .summer-rescue-help .btn {
    width: 100%;
    justify-content: center;
  }

  .summer-task-rescue-entry-row {
    margin-left: 0;
  }

  .summer-rescue-entry,
  .summer-rescue-entry.compact {
    width: 100%;
    min-height: 42px;
  }

  .summer-rescue-reasons {
    display: grid;
    grid-template-columns: 1fr;
  }

  .summer-rescue-reasons button {
    width: 100%;
  }

  .summer-rescue-resource {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .summer-rescue-resource .btn {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .summer-route-detail-tasks {
    grid-template-columns: 1fr;
  }

  .summer-route-preview-list {
    grid-template-columns: 1fr;
  }

  .summer-route-video-card {
    grid-template-columns: 1fr;
  }

  .summer-route-video-actions {
    width: 100%;
  }

  .summer-route-video-actions .btn {
    justify-content: center;
  }

  .summer-task {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0;
  }

  .summer-task-list {
    padding-left: 24px;
  }

  .summer-task::before {
    left: -26px;
  }

  .summer-task-actions {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(112px, 0.65fr);
  }

  .summer-task-actions .btn {
    min-height: 38px;
  }

  .summer-more-actions summary {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .summer-more-actions div {
    position: absolute;
    right: 0;
    z-index: 2;
    width: min(220px, 100%);
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }

  .summer-stepper {
    margin-left: 0;
  }

  .summer-stepper button {
    justify-content: center;
    padding: 3px 7px;
  }

  .summer-step-panel,
  .summer-step-hint,
  .summer-task-support,
  .summer-example-box,
  .summer-exit-box,
  .summer-import-waiting,
  .summer-import-done {
    margin-left: 0;
  }

  .summer-example-actions {
    grid-template-columns: 1fr;
  }

  .summer-ai-handoff { align-items: stretch; margin-left: 0; flex-direction: column; }
  .summer-ai-handoff .btn { width: 100%; justify-content: center; }
  .learning-advisor-feedback { margin-right: 0; margin-left: 0; }
  .learning-advisor-reasons { grid-template-columns: 1fr; }

  .summer-example-item {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .summer-supplement-resources .btn {
    width: 100%;
    justify-content: center;
  }

  .focus-mini-dock {
    right: 16px;
    left: 16px;
    max-width: none;
  }

  .summer-reward-float {
    right: 16px;
    left: auto;
    bottom: 88px;
    width: min(340px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
  }

  .focus-mini-dock {
    bottom: 78px;
  }

  /* 紧凑胶囊在移动端保持右下角小尺寸，不再横向撑满 */
  .summer-pending-import-float {
    right: 16px;
    bottom: 88px;
  }

  .summer-reward-float.collapsed {
    width: auto;
  }

  .summer-reflection-overlay {
    align-items: end;
    padding: 10px;
  }

  .summer-reflection-dialog {
    max-height: calc(100vh - 20px);
    padding: 14px;
    border-radius: var(--r-lg);
  }

  .summer-reflection-choice > div,
  .summer-reflection-dialog.daily .summer-reflection-choice > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summer-reflection-head {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .summer-reflection-head > .material-symbols-outlined {
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    font-size: var(--fs-lg);
  }

  .streak-num {
    font-size: var(--fs-md);
  }

  .home-focus-panel .timer-ring-wrap,
  .home-focus-panel .timer-ring {
    width: 130px;
    height: 130px;
  }

  .home-focus-panel .timer-time {
    font-size: var(--fs-xl);
  }
}

@media (max-width: 700px) {
  .debug-resource-row {
    grid-template-columns: 1fr;
  }

  .debug-stepper {
    flex-wrap: wrap;
  }

  #debug-panel {
    right: 10px;
    bottom: 88px;
    min-width: 260px;
  }

  .debug-float-row {
    grid-template-columns: 34px 24px 1fr;
  }
}

/* 打卡成功样式 */
.checkin-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 8px 0 4px;
  animation: checkin-pop 0.3s ease;
}
.checkin-success-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--surface);
  font-size: var(--fs-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: checkin-icon-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.checkin-growth {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--tertiary, var(--chem));
  background: var(--tertiary-container, #9bdaa5);
  border-radius: var(--r-md);
  padding: 6px 14px;
  margin: 2px 0;
  animation: checkin-growth-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes checkin-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes checkin-icon-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes checkin-growth-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.checkin-title {
  font-size: var(--fs-md);
  color: var(--on-surface);
}
.checkin-detail {
  font-size: var(--fs-sm);
  color: var(--on-surface);
  margin: 0;
}
.checkin-saved-msg {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: -2px 0 0;
}
.checkin-rewards {
  font-size: var(--fs-xs);
  margin: 0;
  letter-spacing: 0.3px;
}
.checkin-star-msg {
  font-size: var(--fs-sm);
  color: var(--primary);
  margin: 0;
  font-style: italic;
}
.checkin-farm-bar {
  width: 100%;
  margin-top: 4px;
}
.checkin-farm-track {
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--surface-2, #eee);
  overflow: hidden;
}
.checkin-farm-fill {
  height: 100%;
  border-radius: var(--r-xs);
  background: var(--primary);
  transition: width 0.4s ease;
}
.checkin-farm-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 3px;
  text-align: center;
}
.checkin-today {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--primary);
  background: rgba(134, 77, 97, 0.08);
  border-radius: var(--r-md);
  padding: 2px 10px;
  margin-top: 2px;
}

/* 综合测验批量导入结果 */
.checkin-batch-list {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  width: 100%;
  text-align: left;
}
.checkin-batch-list li {
  font-size: var(--fs-xs);
  color: var(--muted);
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.checkin-batch-list li:last-child {
  border-bottom: none;
}

/* 复习页综合测验按钮 */
.review-session-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ===== 首页折叠留痕状态区（V 首页减负） ===== */
.home-status-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-status-drawer {
  padding: 0;
  overflow: hidden;
}
/* summary 和 link 共用同一套横向行布局，保证图标/文字/箭头三者垂直居中不错位 */
.home-status-summary,
.home-status-link {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--text, var(--ink));
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
.home-status-summary::-webkit-details-marker { display: none; }
.home-status-link {
  border: none;
  background: var(--card-bg, var(--surface));
  font-family: inherit;
}
.home-status-link:hover { background: var(--primary-soft, #faf0f3); }
.home-status-summary > .material-symbols-outlined:first-child,
.home-status-link > .material-symbols-outlined:first-child {
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--primary, var(--primary));
  flex-shrink: 0;
}
.home-status-digest {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.home-status-arrow {
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--muted, var(--ink-3));
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.home-status-drawer[open] .home-status-arrow { transform: rotate(180deg); }
.home-status-body {
  padding: 2px 12px 12px;
}
.home-status-body > .card {
  box-shadow: none;
  border: 1px solid var(--border, var(--line));
  margin: 0;
}

/* ===== 28 天总路线全屏总览覆盖层 ===== */
.summer-route-overlay {
  position: fixed;
  inset: 0;
  z-index: 760;
  background: rgba(30, 20, 24, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 24px 12px 48px;
  animation: fadeIn 0.18s ease;
}
.summer-route-overlay-inner {
  position: relative;
  width: 100%;
  max-width: 760px;
}
.summer-route-overlay-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: none;
  cursor: pointer;
  background: var(--card-bg, var(--surface));
  color: var(--text, var(--ink));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

/* 今日总复盘：保存 + 先跳过 同排（#4 反思非阻塞） */
.summer-reflection-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.summer-reflection-actions .summer-reflection-submit { flex: 1; }
.summer-reflection-skip {
  flex-shrink: 0;
  color: var(--muted, var(--ink-3));
}

/* 科目 Tab（多科计划 P1c）：数学/物理/化学 切换 */
.plan-subject-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.plan-subject-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(74, 69, 128, 0.18);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-secondary, var(--ink-2));
  font-size: var(--fs-base);
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.plan-subject-tab.active {
  background: var(--physics, var(--physics));
  border-color: var(--physics, var(--physics));
  color: var(--surface);
}
.plan-subject-tab:not(.active):hover {
  background: rgba(197, 194, 240, 0.28);
}
.plan-subject-soon {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  opacity: 0.85;
}
.plan-subject-tab.active .plan-subject-soon {
  background: rgba(255, 255, 255, 0.28);
}
.plan-coming-soon {
  align-items: flex-start;
}

/* Phase 5 touch-target sweep: keep visible mobile controls at 40px+ without touching admin. */
#view .btn-sm,
.focus-overlay .btn-sm,
.focus-mini-dock .btn-sm,
.commitment-card .btn-sm,
.lottery-overlay .btn-sm {
  min-height: 40px;
  padding-inline: var(--sp-4);
}

button.chip,
.seg-item,
.learn-tab-btn,
.today-date-select,
.plan-subject-tab,
.summer-example-paste,
.summer-example-quiz,
.summer-example-copy,
.summer-more-actions summary {
  min-height: 40px;
}

.today-date-nav {
  width: 40px;
  min-width: 40px;
}

.lottery-close-btn {
  width: 40px;
  min-height: 40px;
  border-radius: var(--r-md);
}

.summer-more-actions summary {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
}

/* ── V4 complete product shell: complete capability + progressive disclosure ── */
.eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--primary, #4f8b67);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-page-head,
.today-product-head,
.section-title-row,
.page-head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.today-product-head {
  grid-column: 1 / -1;
  align-items: flex-end;
  padding: 4px 2px 0;
}

.today-product-head h1 {
  margin: 0 0 6px;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.15;
}

.today-product-head p,
.product-page-head p {
  margin: 0;
  color: var(--text-muted, #75666c);
}

.today-product-head .streak-banner {
  width: min(430px, 42vw);
  margin: 0;
  box-shadow: none;
}

.home-flow.today-product-page {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr);
  gap: 18px;
  align-items: start;
}

.today-product-page > .product-subject-switcher {
  grid-column: 1 / -1;
}

.today-product-page .home-left-stack,
.today-product-page .home-right-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.product-subject-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(79, 139, 103, .16);
  border-radius: 20px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 32px rgba(87, 72, 77, .06);
}

.product-subject-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--text, #3f3539);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.product-subject-tab:hover { background: rgba(79, 139, 103, .06); }
.product-subject-tab.active { border-color: rgba(79, 139, 103, .3); background: #fff; box-shadow: 0 7px 20px rgba(79, 139, 103, .11); }
.product-subject-tab > .material-symbols-outlined { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--primary-soft, #e5f1e8); color: var(--primary, #4f8b67); }
.product-subject-tab span:nth-child(2) { display: grid; gap: 2px; }
.product-subject-tab strong { font-size: 15px; }
.product-subject-tab small { color: var(--text-muted, #75666c); font-size: 12px; }
.product-subject-tab b { margin-left: auto; padding: 4px 7px; border-radius: 999px; background: var(--primary, #4f8b67); color: white; font-size: 10px; }
.product-subject-tab.subject-math > .material-symbols-outlined { background: #eaf0ff; color: #4f69a8; }
.product-subject-tab.subject-physics > .material-symbols-outlined { background: #e6f4ef; color: #377d63; }
.product-subject-tab.subject-chemistry > .material-symbols-outlined { background: #f8eaf1; color: #9a5471; }

.today-built-in-task { overflow: hidden; padding: 14px; border: 1px solid rgba(87, 72, 77, .13); border-radius: 18px; background: #fff; box-shadow: 0 14px 32px rgba(69, 93, 76, .08); }
.today-built-in-task > .summer-task-card > .plan-subject-tabs { display: none; }
.today-built-in-task > .today-extra-task-body { padding-top: 10px; }
.today-built-in-task > summary { list-style: none; cursor: pointer; }
.today-built-in-task > summary::-webkit-details-marker { display: none; }
.today-built-in-task > .summer-task-card { margin: 0; border: 1px solid rgba(79, 139, 103, .17); box-shadow: 0 16px 38px rgba(87, 72, 77, .08); }
.today-built-in-task .summer-route-hero { margin-top: 0; }
.today-built-in-task.is-timing { border-color: transparent; background: linear-gradient(145deg, #355f45, #4f8b67); color: #fff; box-shadow: 0 18px 38px rgba(53, 95, 69, .22); }
.today-built-in-task.is-timing > .today-extra-task-head { border-color: rgba(255, 255, 255, .18); background: transparent; color: #fff; }
.today-built-in-task.is-timing > .today-extra-task-head span,
.today-built-in-task.is-timing .today-inline-focus p { color: rgba(255, 255, 255, .7); }
.today-built-in-task.is-timing .today-inline-focus-actions > .btn-primary { border-color: #fff; background: #fff; color: #355f45; }
.today-built-in-task.is-timing .today-inline-focus .today-video-capture > p { color: #737c76; }
.today-built-in-task.is-timing .learning-advisor-feedback { border-color: rgba(255, 255, 255, .18); }
.today-built-in-task.is-timing .learning-advisor-feedback > summary strong { color: #fff; }
.today-built-in-task.is-timing .learning-advisor-feedback > summary small { color: rgba(255, 255, 255, .66); }
.today-assignment-shell { display: grid; gap: 14px; }
.today-assignment-head { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); }
.today-assignment-title > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--text-muted, #75666c); font-size: 12px; font-weight: 750; }
.today-assignment-title h2 { margin: 7px 0 4px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; }
.today-assignment-title p { margin: 0; color: var(--text-muted, #75666c); font-size: 13px; }
.today-required-count { color: var(--primary, #4f8b67); font-size: 21px; }
.today-immersive-stack { display: grid; gap: 11px; }
.today-required-task { min-width: 0; border: 1px solid rgba(87, 72, 77, .13); border-radius: 16px; background: #fff; color: inherit; box-sizing: border-box; }
.today-immersive-current { padding: clamp(18px, 3vw, 24px); border-color: rgba(79, 139, 103, .28); box-shadow: 0 14px 32px rgba(69, 93, 76, .1); }
.today-immersive-current.done { background: #eef7f0; }
.today-immersive-current.is-timing { border-color: transparent; background: linear-gradient(145deg, #355f45, #4f8b67); color: #fff; box-shadow: 0 18px 38px rgba(53, 95, 69, .22); }
.today-immersive-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-muted, #75666c); font-size: 11px; font-weight: 750; }
.today-immersive-meta span:first-child { padding: 5px 9px; border-radius: 999px; background: var(--primary-soft, #e5f1e8); color: var(--primary, #4f8b67); }
.today-immersive-current h3 { margin: 14px 0 5px; font-size: clamp(20px, 2.4vw, 25px); line-height: 1.35; }
.today-immersive-position { margin: 0; color: var(--text-muted, #75666c); font-size: 12px; }
.today-immersive-current.is-timing .today-immersive-meta,
.today-immersive-current.is-timing .today-immersive-position,
.today-immersive-current.is-timing .today-inline-focus p { color: rgba(255, 255, 255, .7); }
.today-immersive-current.is-timing .today-immersive-meta span:first-child { background: rgba(255, 255, 255, .14); color: #fff; }
.today-video-ready { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(87, 72, 77, .1); }
.today-video-ready > .btn { width: 100%; min-height: 48px; box-sizing: border-box; }
.today-inline-focus { display: grid; gap: 6px; margin-top: 17px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .16); }
.today-inline-focus-status { display: flex; align-items: center; gap: 9px; color: #e7f2ea; font-size: 12px; font-weight: 750; }
.today-inline-focus-status span { width: 8px; height: 8px; border-radius: 50%; background: #83d09c; box-shadow: 0 0 0 5px rgba(131, 208, 156, .14); }
.today-inline-focus-clock { margin-top: 2px; font-size: clamp(38px, 5vw, 48px); line-height: 1; letter-spacing: -.04em; }
.today-inline-focus p, .today-inline-switch p { margin: 0; color: var(--text-muted, #75666c); font-size: 12px; }
.today-inline-focus-actions { display: flex; align-items: stretch; gap: 8px; margin-top: 9px; }
.today-inline-focus-actions > .btn-primary { flex: 1; }
.today-immersive-current.is-timing .today-inline-focus-actions > .btn-primary { border-color: #fff; background: #fff; color: #355f45; }
.today-video-external { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .1); }
.today-video-external > .material-symbols-outlined { color: #c9e7d2; font-size: 20px; }
.today-video-external > div { min-width: 0; flex: 1; }
.today-video-external strong, .today-video-external small { display: block; }
.today-video-external strong { color: #fff; font-size: 12px; }
.today-video-external small { overflow: hidden; margin-top: 2px; color: rgba(255, 255, 255, .66); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.today-video-external a { flex: none; color: #fff; font-size: 11px; font-weight: 800; }
.today-video-capture { margin-top: 7px; padding: 18px; border: 1px solid rgba(207, 225, 213, .95); border-radius: 17px; background: #fff; color: #25322a; box-shadow: 0 12px 25px rgba(20, 46, 29, .13); }
.today-video-capture-label { color: #28734b; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.today-video-capture h4 { margin: 7px 0 5px; font-size: clamp(21px, 4vw, 26px); letter-spacing: -.035em; }
.today-immersive-current.is-timing .today-inline-focus .today-video-capture > p { color: #737c76; line-height: 1.65; }
.today-video-capture kbd { padding: 3px 6px; border: 1px solid #d4dbd6; border-bottom-width: 2px; border-radius: 6px; background: #f7f9f7; color: #3d4c42; font-family: inherit; font-size: 10px; font-weight: 850; }
.today-video-capture-keys { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; color: #7c867f; font-size: 9px; }
.today-video-capture-keys i { color: #a0aaa3; font-style: normal; }
.today-video-capture-message { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding: 9px 10px; border-radius: 10px; font-size: 10px; font-weight: 800; }
.today-video-capture-message .material-symbols-outlined { font-size: 18px; }
.today-video-capture-message.success { background: #eaf5ee; color: #376a4b; }
.today-video-capture-message.warning { background: #fff6e8; color: #795821; }
.today-video-capture-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; font-size: 11px; }
.today-video-capture-summary span { padding: 5px 8px; border-radius: 999px; background: #eaf5ee; color: #28734b; font-weight: 850; }
.today-video-capture-thumbs { display: flex; gap: 7px; margin-top: 9px; padding-bottom: 2px; overflow-x: auto; }
.today-video-capture-thumb-item { position: relative; flex: 0 0 60px; }
.today-video-capture-thumb { position: relative; display: grid; width: 60px; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border: 1px solid #dce2dd; border-radius: 9px; background: linear-gradient(145deg, #fafbf9, #e3e7e4); color: #8a938d; cursor: pointer; }
.today-video-capture-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.today-video-capture-thumb:has(img:not([hidden])) > .material-symbols-outlined { display: none; }
.today-video-capture-thumbs b { position: absolute; z-index: 1; left: 4px; top: 4px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #39704e; color: #fff; font-size: 8px; }
.today-video-capture-delete { position: absolute; z-index: 2; right: -3px; top: -5px; display: grid; width: 18px; height: 18px; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #99565c; box-shadow: 0 2px 7px rgba(52, 43, 46, .2); cursor: pointer; font-size: 13px; line-height: 1; }
.today-immersive-current.is-timing .today-inline-focus .today-video-capture-empty { margin-top: 9px; color: #858e88; font-size: 10px; }
.today-video-capture-secondary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #e3e8e4; color: #7b847e; font-size: 9px; }
.today-inline-more { position: relative; flex: 0 0 44px; }
.today-inline-more > summary { display: grid; width: 44px; height: 100%; min-height: 44px; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, .11); color: #fff; cursor: pointer; font-size: 19px; font-weight: 800; list-style: none; }
.today-inline-more > summary::-webkit-details-marker { display: none; }
.today-inline-more > div { position: absolute; z-index: 10; right: 0; top: calc(100% + 7px); min-width: 170px; padding: 6px; border: 1px solid rgba(87, 72, 77, .14); border-radius: 11px; background: #fff; box-shadow: 0 12px 28px rgba(45, 37, 40, .18); }
.today-inline-more button { width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #7f4148; text-align: left; cursor: pointer; }
.today-inline-more button:hover { background: #fff1f1; }
.today-inline-switch { display: grid; gap: 13px; margin-top: 17px; padding: 16px; border-radius: 14px; background: #f7f4f2; }
.today-inline-switch strong { font-size: 17px; }
.today-inline-switch p { margin-top: 4px; }
.today-inline-switch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.today-required-task-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; align-items: center; gap: 12px; padding: 13px 15px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.today-required-task-summary > span { display: grid; gap: 4px; min-width: 0; }
.today-required-task-summary small { color: var(--text-muted, #75666c); font-size: 10px; }
.today-required-task-summary strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.today-required-task-summary em { color: var(--text-muted, #75666c); font-size: 11px; font-style: normal; white-space: nowrap; }
.today-immersive-next.done { background: #eef7f0; }
.today-immersive-current > .summer-assigned-task { margin-top: 16px; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.today-immersive-current .summer-day-title { display: none; }
.today-immersive-current .learning-advisor-feedback { margin: 14px 0 0; }
.today-immersive-current .learning-advisor-feedback > summary > .material-symbols-outlined { display: none; }
.today-immersive-current .learning-advisor-feedback > summary::after { margin-left: auto; color: var(--text-muted, #75666c); content: "展开"; font-size: 11px; }
.today-immersive-current .learning-advisor-feedback[open] > summary::after { content: "收起"; }
.today-immersive-current.is-timing .learning-advisor-feedback { border-color: rgba(255, 255, 255, .18); }
.today-immersive-current.is-timing .learning-advisor-feedback > summary strong { color: #fff; }
.today-immersive-current.is-timing .learning-advisor-feedback > summary small,
.today-immersive-current.is-timing .learning-advisor-feedback > summary::after { color: rgba(255, 255, 255, .66); }
.today-immersive-current.is-timing .learning-advisor-feedback-body { margin-top: 10px; padding: 12px; border-radius: 12px; background: #fff; color: var(--text-primary); }
.today-fusion-assigned { margin-top: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.today-fusion-task { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.today-fusion-task::before { display: none; }
.today-fusion-task > .summer-normal-task-content { display: block; }
.today-fusion-stage { display: grid; gap: 14px; padding: clamp(17px, 3vw, 23px); border: 1px solid rgba(79, 139, 103, .2); border-radius: 17px; background: #fbfdfb; }
.today-fusion-stage-label { color: #34764f; font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.today-fusion-stage > h4 { margin: -5px 0 -6px; font-size: clamp(21px, 3.8vw, 27px); letter-spacing: -.035em; }
.today-fusion-stage > p { margin: 0; color: var(--text-muted, #75666c); font-size: 12px; line-height: 1.65; }
.today-fusion-example-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px; }
.today-fusion-example-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid #dde6df; border-radius: 11px; background: #fff; }
.today-fusion-example-image { position: relative; display: grid; width: 54px; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border: 0; border-radius: 8px; background: #edf2ee; color: #839087; cursor: pointer; }
.today-fusion-example-image img { width: 100%; height: 100%; object-fit: cover; }
.today-fusion-example-image:has(img:not([hidden])) > .material-symbols-outlined { display: none; }
.today-fusion-example-image b { position: absolute; left: 3px; top: 3px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #39704e; color: #fff; font-size: 8px; }
.today-fusion-example-item > div { display: grid; min-width: 0; gap: 2px; }
.today-fusion-example-item > div strong { font-size: 11px; }
.today-fusion-example-item > div small { color: var(--text-muted, #75666c); font-size: 9px; }
.today-fusion-example-delete { padding: 4px; border: 0; background: transparent; color: #a3676b; cursor: pointer; font-size: 9px; }
.today-fusion-no-example { display: grid; gap: 3px; padding: 15px; border: 1px dashed #ccd8cf; border-radius: 12px; color: #67726b; text-align: center; }
.today-fusion-no-example strong { color: #38463d; font-size: 13px; }
.today-fusion-no-example span { font-size: 10px; }
.today-fusion-add-example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto); gap: 9px; }
.today-fusion-add-example .summer-example-paste { min-height: 48px; }
.today-fusion-add-example .summer-example-paste > strong,
.today-fusion-add-example .summer-example-paste > small { display: block; }
.today-fusion-evidence-text { display: grid; gap: 6px; color: #59665e; font-size: 10px; font-weight: 750; }
.today-fusion-evidence-text textarea { width: 100%; resize: vertical; box-sizing: border-box; }
.today-fusion-primary { width: 100%; min-height: 48px; }
.today-fusion-next { color: var(--text-muted, #75666c); text-align: center; }
.today-fusion-foundation { overflow: hidden; border: 1px solid #e8dc9b; border-radius: 14px; background: #fff7d6; box-shadow: 0 8px 20px rgba(107, 93, 30, .06); }
.today-fusion-foundation > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; cursor: pointer; list-style: none; }
.today-fusion-foundation > summary::-webkit-details-marker { display: none; }
.today-fusion-foundation > summary strong { color: #665719; font-size: 13px; }
.today-fusion-foundation > summary span { color: #80712e; font-size: 10px; }
.today-fusion-foundation[open] > summary span { font-size: 0; }
.today-fusion-foundation[open] > summary span::after { content: "收起"; font-size: 10px; }
.today-fusion-foundation-body { display: grid; gap: 10px; padding: 0 15px 15px; }
.today-fusion-foundation-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.today-fusion-foundation-facts > div { display: grid; gap: 3px; min-width: 0; padding: 10px 11px; border: 1px solid rgba(191, 167, 77, .22); border-radius: 10px; background: rgba(255, 255, 255, .68); }
.today-fusion-foundation-facts small { color: #817337; font-size: 9px; }
.today-fusion-foundation-facts strong { overflow-wrap: anywhere; font-size: 11px; }
.today-fusion-foundation-keywords { display: flex; flex-wrap: wrap; gap: 6px; }
.today-fusion-foundation-keywords span { padding: 5px 8px; border-radius: 999px; background: #f3e7a9; color: #655719; font-size: 9px; font-weight: 800; }
.today-fusion-foundation-body > p { margin: 0; color: #71652d; font-size: 10px; line-height: 1.6; }
.today-fusion-foundation-body > .btn { justify-self: start; }
.today-fusion-task > .learning-advisor-feedback { margin: 0; overflow: hidden; border: 1px solid #d0c2f0; border-radius: 14px; background: #f0e9ff; box-shadow: 0 8px 20px rgba(74, 58, 119, .06); }
.today-fusion-task > .learning-advisor-feedback > summary { padding: 13px 15px; }
.today-fusion-task > .learning-advisor-feedback > summary > .material-symbols-outlined { display: none; }
.today-fusion-task > .learning-advisor-feedback > summary strong { color: #4a3a77; font-size: 13px; font-weight: 800; }
.today-fusion-task > .learning-advisor-feedback > summary small { display: none; }
.today-fusion-task > .today-fusion-advisor[open] { padding: 13px; border: 2px solid #c7b6ee; border-radius: 14px; background: #f0e9ff; box-shadow: 0 8px 20px rgba(74, 58, 119, .08); }
.today-fusion-task > .today-fusion-advisor[open] > summary { padding: 0 1px 10px; border-bottom: 1px solid #d8ccf0; }
.today-fusion-task > .today-fusion-advisor[open] > .learning-advisor-feedback-body { padding: 12px 0 0; }
.today-fusion-advisor-head { display: grid; gap: 3px; }
.today-fusion-advisor-head strong { color: #4a3a77; font-size: 14px; }
.today-fusion-advisor-head small { color: #75669b; font-size: 10px; }
.today-fusion-advisor .learning-advisor-reasons label { border-color: #d9cdf2; background: rgba(255, 255, 255, .72); }
.today-fusion-advisor .learning-advisor-note textarea { border-color: #d9cdf2; background: rgba(255, 255, 255, .82); }
.today-fusion-advisor .learning-advisor-feedback-body > .btn { width: 100%; min-height: 40px; border-color: #665393; background: #665393; color: #fff; }
.today-fusion-ai-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid #dce6df; border-radius: 13px; background: #fff; }
.today-fusion-ai-step > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e8f3eb; color: #34764f; font-size: 12px; }
.today-fusion-ai-step > b .material-symbols-outlined { font-size: 17px; }
.today-fusion-ai-step > div { min-width: 0; }
.today-fusion-ai-step strong { font-size: 13px; }
.today-fusion-ai-step p { margin: 3px 0 0; color: var(--text-muted, #75666c); font-size: 10px; }
.today-fusion-ai-step.done { opacity: .8; }
.today-fusion-ai-step.current { border-color: rgba(79, 139, 103, .42); box-shadow: 0 8px 20px rgba(79, 139, 103, .09); }
.today-fusion-example-review { padding: 11px 12px; border-radius: 12px; background: #f2f6f3; }
.today-fusion-example-review > summary { color: #536158; cursor: pointer; font-size: 11px; font-weight: 800; }
.today-fusion-example-review > .today-fusion-example-list { margin-top: 10px; }
.today-fusion-edit-examples { width: 100%; }
.today-fusion-ai-stage > .summer-import-dock { margin: 0; }
.today-fusion-refresh-note { margin: 0; padding: 9px 10px; border-radius: 10px; background: #fff6e7; color: #72532d; font-size: 12px; font-weight: 800; }
.today-fusion-reflection .summer-task-reflection-card,
.today-fusion-completed .summer-completed-review { margin: 0; }
.today-formal-review { display: grid; gap: 14px; }
.today-formal-review > p { margin: 0; color: #59625c; line-height: 1.65; }
.today-formal-review-rule { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #f2f7f3; color: #486052; }
.today-formal-review-rule strong { font-size: 14px; }
.today-formal-review-rule span { font-size: 12px; line-height: 1.55; }
.today-formal-review-steps { display: flex; flex-wrap: wrap; gap: 7px; }
.today-formal-review-steps span { padding: 7px 10px; border-radius: 999px; background: #f7f2eb; color: #695746; font-size: 11px; font-weight: 700; }
.today-formal-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.today-formal-review-actions small { color: #8a665f; }
.today-formal-review-import { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid rgba(72, 96, 82, .14); }
.today-formal-review-import p { margin: 0; color: #59625c; font-size: 12px; }
.today-formal-review-import textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.today-fusion-message { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 12px; }
.today-fusion-message p { flex: 1; margin: 0; font-size: 12px; }
.today-fusion-message-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.today-fusion-message.warning { background: #fff6e7; color: #72532d; }
.today-fusion-message.error { background: #fff0f0; color: #8b3f46; }
.today-fusion-empty { padding-top: 13px; color: var(--text-muted, #75666c); font-size: 13px; }
.summer-assigned-task { display: grid; gap: 12px; padding: 18px; border: 1px solid rgba(79, 139, 103, .17); border-radius: 18px; background: #fff; box-shadow: 0 16px 38px rgba(87, 72, 77, .08); }
.today-assignment-complete { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #3a2f2a; }
.today-assignment-complete strong { font-size: clamp(17px, 2.6vw, 22px); }
.today-assignment-complete .material-symbols-outlined { color: #56805d; }
.today-extra-learning { display: grid; gap: 14px; border-color: #eadfd5; background: #fffefa; color: #3a2f2a; }
.today-extra-learning-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.today-extra-learning-head h3 { margin: 3px 0 2px; font-size: clamp(20px, 3vw, 25px); }
.today-extra-learning-head p { margin: 0; color: #786b64; font-size: 13px; }
.today-personal-reuse-entry { min-width: 0; }
.today-personal-reuse-entry .btn { max-width: 100%; min-height: 40px; padding: 6px 0; color: #786b64; font-weight: 500; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.personal-task-picker { display: grid; gap: 10px; min-width: 0; }
.personal-task-picker-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border, #eadfd5); }
.personal-task-picker-item > div { flex: 1; min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.personal-task-picker-item small { color: var(--text-muted, #786b64); }
.personal-task-picker-item > .btn { flex: 0 0 auto; }
.today-extra-empty { display: grid; justify-items: center; gap: 4px; padding: 20px 12px; border: 1px dashed #d9c8bc; border-radius: 14px; color: #786b64; text-align: center; }
.today-extra-empty .material-symbols-outlined { color: #b89d8c; font-size: 28px; }
.today-extra-empty p, .today-extra-empty small { margin: 0; }
.today-extra-empty p { font-weight: 800; color: #4d403a; }
.today-extra-learning .section-title-row { align-items: center; }
.today-extra-learning .section-title-row h3 { font-size: clamp(18px, 2.8vw, 22px); }
.today-extra-subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.today-extra-subject { display: grid; gap: 4px; min-height: 76px; padding: 10px 12px; border: 1px solid #eadfd5; border-radius: 14px; background: #fffdf9; color: #3a2f2a; font-weight: 800; text-align: left; cursor: pointer; }
.today-extra-subject strong { font-size: 15px; }
.today-extra-subject span,
.today-extra-subject small { overflow-wrap: anywhere; color: #786b64; font-size: 11px; line-height: 1.35; }
.today-extra-subject small { font-weight: 900; }
.today-extra-subject.subject-math.active { border-color: #dfa5b3; background: #f7d6de; box-shadow: inset 0 -2px 0 rgba(150, 80, 97, .08); }
.today-extra-subject.subject-physics.active { border-color: #a8cea0; background: #dcefd9; box-shadow: inset 0 -2px 0 rgba(70, 120, 70, .08); }
.today-extra-subject.subject-chemistry.active { border-color: #d9bd70; background: #f8e7b8; box-shadow: inset 0 -2px 0 rgba(120, 90, 25, .08); }
.today-deferred-review-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff6e7; color: #72532d; font-size: 12px; font-weight: 800; }
.today-extra-task-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid #eadfd5; border-radius: 14px; background: #fffefa; color: #3a2f2a; }
.today-extra-task-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.today-extra-task-head span,
.today-extra-task-head small { color: #786b64; font-size: 11px; font-weight: 800; }
.today-extra-task-head strong { overflow-wrap: anywhere; font-size: 16px; }
.today-extra-task-head > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.today-replacement-slots { display: grid; gap: 8px; margin-top: 12px; }
.today-replacement-slot { display: grid; gap: 3px; }
.today-replacement-slot-reason { padding-left: 4px; color: #786b64; font-size: 11px; font-weight: 700; }
.today-plan-lock-note, .plan-preview-lock { display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff6e7; color: #72532d; font-size: 12px; }
.plan-preview-lock > div { flex: 1; }
.plan-preview-lock strong, .plan-preview-lock p { margin: 0; }
.plan-preview-lock p { margin-top: 2px; color: #806744; }
.home-plan-overview { display: grid; gap: 14px; }
.section-title-row h3 { margin: 2px 0 0; }
.section-title-row > small { color: var(--text-muted, #75666c); }
.home-plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.home-plan-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px; border: 1px solid rgba(87, 72, 77, .11); border-radius: 14px; background: #fff; color: inherit; text-align: left; cursor: pointer; }
.home-plan-card.active { border-color: rgba(79, 139, 103, .38); box-shadow: 0 6px 18px rgba(79, 139, 103, .09); }
.home-plan-card span { display: grid; gap: 3px; }
.home-plan-card small { color: var(--text-muted, #75666c); font-size: 11px; }
.home-plan-card > b { color: var(--primary, #4f8b67); }
.home-plan-card > i { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: #eee8e9; }
.home-plan-card > i > em { display: block; height: 100%; border-radius: inherit; background: var(--primary, #4f8b67); }
.home-week-rhythm { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.home-week-rhythm span { display: grid; place-items: center; gap: 4px; min-height: 54px; border-radius: 12px; background: #f7f4f3; color: var(--text-muted, #75666c); }
.home-week-rhythm span.done { background: var(--primary-soft, #e5f1e8); color: var(--primary, #4f8b67); }
.home-week-rhythm span.active { outline: 2px solid var(--primary, #4f8b67); background: #fff; color: var(--text, #3f3539); }
.home-week-rhythm b { font-size: 13px; }
.home-week-rhythm small { font-size: 10px; }

.home-focus-details { overflow: hidden; padding: 0; }
.home-focus-summary { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 0 18px; cursor: pointer; list-style: none; }
.home-focus-summary::-webkit-details-marker { display: none; }
.home-focus-summary .material-symbols-outlined:last-child { margin-left: auto; transition: transform .2s; }
.home-focus-details[open] .home-focus-summary .material-symbols-outlined:last-child { transform: rotate(180deg); }
.home-focus-details .home-focus-panel { padding: 0 14px 14px; }

.custom-today-task { padding: clamp(22px, 4vw, 38px); background: linear-gradient(145deg, #fff 0%, #f3faf5 100%); }
.custom-task-kicker { display: flex; justify-content: space-between; color: var(--primary, #4f8b67); font-weight: 800; }
.custom-today-task h2 { margin: 14px 0 7px; font-size: clamp(25px, 3.4vw, 38px); }
.custom-task-node { color: var(--primary, #4f8b67); font-weight: 700; }
.custom-task-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.plan-paused-card { display: flex; align-items: center; gap: 16px; }
.plan-paused-card > .material-symbols-outlined { font-size: 38px; color: #b17b4c; }
.plan-paused-card > div { flex: 1; }
.plan-paused-card h3, .plan-paused-card p { margin: 0; }
.plan-paused-card p { margin-top: 4px; color: var(--text-muted, #75666c); }
.plan-paused-note { padding: 11px 14px; border-radius: 12px; background: #fff3dc; color: #805d2c; }
.plan-paused-note.wide { margin: 14px 0; }

/* Shared outdoor world shell. Theme variables stay scoped to formal page roots. */
.world-theme {
  --world-page: #f4faf7;
  --world-pattern: none;
  --world-accent: #357c6c;
  --world-soft: #dff3ea;
  --world-line: rgba(35, 91, 81, .13);
  --world-card: #fff;
  --world-shadow: 0 8px 23px rgba(59, 55, 58, .08);
  --primary: var(--world-accent);
  --secondary: var(--world-accent);
  --primary-soft: var(--world-soft);
  --primary-tint: color-mix(in srgb, var(--world-soft) 72%, white);
  position: relative;
  isolation: isolate;
  align-content: start;
  min-width: 0;
  min-height: calc(100vh - 72px);
  margin: -32px -28px -54px;
  padding: 32px 28px 54px;
  overflow: clip;
  background-color: var(--world-page);
  background-image: var(--world-pattern);
  background-size: var(--world-pattern-size, auto);
}
.world-theme::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  aspect-ratio: var(--world-art-ratio, 22 / 15);
  top: 52px;
  right: 18px;
  background: var(--world-art) center / contain no-repeat;
  opacity: var(--world-art-opacity, .76);
  pointer-events: none;
  animation: world-art-arrive .55s ease-out both;
}
.world-theme > * { position: relative; z-index: 1; }
.world-theme .card,
.world-theme .card-sub,
.world-theme .seg,
.world-theme .product-subject-switcher,
.world-theme .plan-summary-band,
.world-theme .plan-preview-lock {
  border-color: var(--world-line);
  background-color: var(--world-card);
  box-shadow: var(--world-shadow);
  backdrop-filter: blur(9px);
}
.world-theme .page-head h2 { color: #29262e; }
.world-theme .eyebrow,
.world-theme .material-symbols-outlined { color: var(--world-accent); }
.world-theme.world-time-morning { --world-temperature: rgba(255, 244, 207, .08); }
.world-theme.world-time-day { --world-temperature: rgba(231, 248, 255, .06); }
.world-theme.world-time-evening { --world-temperature: rgba(124, 115, 181, .05); }
.world-theme::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--world-temperature, transparent);
  pointer-events: none;
}
@keyframes world-art-arrive { from { opacity: 0; transform: translateY(8px); } }

.today-product-page {
  --world-page: #ffd8cf;
  --world-pattern: radial-gradient(circle, rgba(255, 242, 189, .82) 0 4px, transparent 5px);
  --world-pattern-size: 44px 44px;
  --world-accent: #c7535d;
  --world-soft: #fff1bc;
  --world-line: rgba(169, 69, 80, .14);
  --world-art: url("assets/world/today-camp.webp");
  --world-art-ratio: 2 / 1;
  --world-art-opacity: .78;
  --world-card: rgba(255, 255, 255, .84);
  padding-top: 112px;
}
.today-product-page::before { top: 9px; right: 28px; width: 250px; }
.today-product-page .card-sub,
.today-product-page .today-fusion-task,
.today-product-page .today-required-task-summary,
.today-product-page .today-fusion-stage,
.today-product-page .summer-task {
  border-color: rgba(199, 83, 93, .14);
  background-color: rgba(255, 255, 255, .8);
  box-shadow: 0 7px 20px rgba(110, 68, 73, .07);
}
.today-product-page .today-fusion-assignment,
.today-product-page .today-fusion-progress,
.today-product-page .home-plan-overview,
.today-product-page .home-focus-summary { background-color: rgba(255, 241, 188, .5); }
.today-product-page .btn-primary { border-color: #a94550; background: #a94550; color: #fff; }
.today-product-page .btn-primary:hover { border-color: #963b46; background: #963b46; }
.today-product-page .btn-soft { border-color: rgba(199, 83, 93, .16); background: #fff1bc; color: #70434b; }
.today-product-page .btn-ghost { color: #93434d; }

.learn-product-page {
  --world-page: #f7f5fb;
  --world-pattern: none;
  --world-accent: #7865b5;
  --world-soft: #c5d0ff;
  --world-line: rgba(120, 101, 181, .16);
  --world-art: url("assets/world/learn-book.webp");
  --world-art-ratio: 2 / 1;
  --world-art-opacity: .78;
  --world-card: #fff;
  display: grid;
  gap: 16px;
  padding-top: 112px;
}
.learn-product-page::before { top: 8px; right: 28px; width: 250px; }
.learn-product-page .learn-tab-bar {
  border: 1px solid rgba(120, 101, 181, .15);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--world-shadow);
  backdrop-filter: blur(9px);
}
.learn-product-page .learn-tab-btn.active { background: #c5d0ff; color: #514182; }
.learn-product-page .learn-tab-btn:focus-visible { outline-color: #67549f; }
.learn-product-page .review-row,
.learn-product-page .archive-card,
.learn-product-page .node-row,
.learn-product-page .learning-tool-grid button,
.learn-product-page .review-import-panel {
  border-color: rgba(120, 101, 181, .15);
  background-color: rgba(255, 255, 255, .78);
}
.learn-product-page .review-empty p { flex: 1 1 auto; min-width: 0; }
.learn-product-page .review-empty .btn { flex: 0 0 auto; }
.learn-product-page .btn-primary { border-color: #1f6a51; background: #1f6a51; color: #fff; }
.learn-product-page .btn-primary:hover { border-color: #164b3c; background: #164b3c; }
.learn-product-page .btn-soft,
.learn-product-page .btn-tonal { border-color: rgba(120, 101, 181, .16); background: #c5d0ff; color: #514182; }
.learn-product-page .btn-ghost { color: #5d4a91; }

.world-theme.growth-product-page {
  --world-page: #f5f8f1;
  --world-pattern: none;
  --world-pattern-size: 49px 42px;
  --world-accent: #628f4d;
  --world-soft: #ffc89f;
  --world-line: rgba(98, 143, 77, .16);
  --world-art: url("assets/world/growth-harvest.webp");
  --world-art-ratio: 2 / 1;
  --world-art-opacity: .78;
  --world-card: #fff;
}
.world-theme.growth-product-page .farm-level-card,
.world-theme.growth-product-page .growth-plot,
.world-theme.growth-product-page .growth-album-grid > div { border-color: rgba(98, 143, 77, .15); background: rgba(255, 255, 255, .8); }
.world-theme.growth-product-page .growth-farm-stage { background: rgba(255, 255, 255, .73); }
.world-theme.growth-product-page .growth-yard-title { background: rgba(255, 255, 255, .7); }
.world-theme.growth-product-page .btn-primary { border-color: #1f6a51; background: #1f6a51; color: #fff; }
.world-theme.growth-product-page .btn-primary:hover { border-color: #164b3c; background: #164b3c; }
.world-theme.growth-product-page .btn-soft { border-color: rgba(98, 143, 77, .16); background: #ffc89f; color: #614633; }

.world-theme.achievements-page {
  --world-page: #faf7f3;
  --world-pattern: none;
  --world-pattern-size: 43px 43px;
  --world-accent: #a85ba1;
  --world-soft: #9cd5f2;
  --world-line: rgba(168, 91, 161, .16);
  --world-art: url("assets/world/reward-market.webp");
  --world-art-ratio: 2 / 1;
  --world-art-opacity: .78;
  --world-card: #fff;
  display: grid;
  gap: 18px;
}
.world-theme.achievements-page .reward-wallet-card,
.world-theme.achievements-page .badge-item,
.world-theme.achievements-page .summer-achievement-card { border-color: rgba(168, 91, 161, .15); background-color: rgba(255, 255, 255, .78); }
.world-theme.achievements-page .btn-primary { border-color: #1f6a51; background: #1f6a51; color: #fff; }
.world-theme.achievements-page .btn-primary:hover { border-color: #164b3c; background: #164b3c; }
.world-theme.achievements-page .btn-soft { border-color: rgba(168, 91, 161, .16); background: #9cd5f2; color: #54456d; }

.world-theme.me-product-page {
  --world-page: #f3f7fb;
  --world-pattern: none;
  --world-pattern-size: 34px 34px;
  --world-accent: #5c7da3;
  --world-soft: #efb4a1;
  --world-line: rgba(92, 125, 163, .16);
  --world-art: url("assets/world/me-cabin.webp");
  --world-art-ratio: 2 / 1;
  --world-art-opacity: .78;
  --world-card: #fff;
  display: grid;
  gap: 18px;
}
.world-theme.me-product-page .my-status-card > div,
.world-theme.me-product-page .plugin-card,
.world-theme.me-product-page .settings-subsection { border-color: rgba(92, 125, 163, .14); background-color: rgba(255, 255, 255, .77); }
.world-theme.me-product-page .plugin-card.enabled { border-color: rgba(92, 125, 163, .28); background: rgba(236, 246, 255, .88); }
.world-theme.me-product-page .settings-anchor-chip { background: rgba(255, 255, 255, .75); color: #496887; }
.world-theme.me-product-page .btn-primary { border-color: #1f6a51; background: #1f6a51; color: #fff; }
.world-theme.me-product-page .btn-primary:hover { border-color: #164b3c; background: #164b3c; }
.world-theme.me-product-page .btn-soft { border-color: rgba(92, 125, 163, .16); background: #efb4a1; color: #65473e; }

.plan-product-page {
  --world-page: #f4f8f6;
  --world-pattern: none;
  --world-pattern-size: 34px 34px;
  --world-accent: #3c9e91;
  --world-soft: #b8def7;
  --world-line: rgba(60, 158, 145, .16);
  --world-card: #fff;
  --world-art: url("assets/world/plan-route.webp");
  --world-art-opacity: .76;
  --physics: #3c9e91;
  --tertiary: #3c9e91;
  --tertiary-container: #d9f3eb;
  --surface: rgba(255, 255, 255, .9);
  --surface-low: rgba(241, 250, 247, .9);
  --surface-high: #cfe9e2;
  --outline: rgba(60, 158, 145, .2);
  --text-primary: #283b39;
  --text-secondary: #536f6a;
  --text-tertiary: #708681;
  display: grid;
  gap: 18px;
}
.plan-product-page .product-subject-switcher { overflow-anchor: none; }
.plan-summary-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(79, 139, 103, .16); border-radius: 16px; background: rgba(79, 139, 103, .13); }
.plan-summary-band > div { display: grid; gap: 5px; padding: 14px 18px; background: rgba(255, 255, 255, .82); }
.plan-summary-band span { color: var(--text-muted, #75666c); font-size: 12px; }
.plan-summary-band strong { font-size: 16px; }
.plan-product-page .summer-route-card {
  margin: 0;
  border-color: rgba(60, 158, 145, .22);
  background: rgba(255, 255, 255, .86);
}
.plan-product-page .summer-route-grid { grid-template-columns: repeat(7, minmax(78px, 1fr)); }
.plan-product-page .product-subject-tab:hover { background: rgba(184, 222, 247, .25); }
.plan-product-page .product-subject-tab.active {
  border-color: rgba(60, 158, 145, .38);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 7px 20px rgba(60, 158, 145, .12);
}
.plan-product-page .plan-preview-lock {
  border-color: rgba(60, 158, 145, .2);
  background: rgba(224, 244, 251, .88);
  color: #315f61;
}
.plan-product-page .plan-preview-lock p { color: #557276; }
.plan-product-page .plan-summary-band { background: rgba(60, 158, 145, .16); }
.plan-product-page .plan-summary-band > div { background: rgba(255, 255, 255, .84); }
.plan-product-page .plan-paused-note {
  border: 1px solid rgba(60, 158, 145, .2);
  background: rgba(224, 244, 251, .86);
  color: #315f61;
}
.plan-product-page .summer-route-card-head h3,
.plan-product-page .summer-kicker,
.plan-product-page .summer-route-week h4 { color: #2f756d !important; }
.plan-product-page .summer-route-card-stats span,
.plan-product-page .summer-route-meta span,
.plan-product-page .summer-route-detail-head > strong,
.plan-product-page .summer-route-detail-actions > strong {
  color: #2e6d70;
  background: rgba(184, 222, 247, .58);
}
.plan-product-page .summer-plan-notice {
  border-color: rgba(60, 158, 145, .18);
  background: rgba(218, 242, 238, .66);
}
.plan-product-page .summer-route-hero {
  border-left-color: #e8737d;
  background: rgba(224, 244, 251, .5);
}
.plan-product-page .summer-route-hero .summer-kicker { color: #3c817a !important; }
.plan-product-page .summer-hero-stat {
  border-color: rgba(60, 158, 145, .18);
  background: rgba(255, 255, 255, .74);
}
.plan-product-page .summer-hero-stat strong { color: #2f756d; }
.plan-product-page .summer-active-day-bar {
  border-color: rgba(60, 158, 145, .2);
  background: rgba(184, 222, 247, .35);
}
.plan-product-page .summer-active-day-bar span { color: #2e6d70; }
.plan-product-page .summer-progress-track { background: rgba(60, 158, 145, .13); }
.plan-product-page .summer-progress-fill { background: #3c9e91; }
.plan-product-page .summer-route-source-note {
  border-left-color: rgba(60, 158, 145, .45);
  background: rgba(224, 244, 251, .62);
}
.plan-product-page .summer-route-placeholder {
  border-color: rgba(60, 158, 145, .3);
  background: rgba(238, 248, 252, .76);
}
.plan-product-page .summer-route-focus span { background: rgba(255, 255, 255, .82); }
.plan-product-page .summer-route-phase {
  border-color: rgba(60, 158, 145, .2);
  background: rgba(255, 255, 255, .56);
}
.plan-product-page .summer-route-phase > summary { background: rgba(184, 222, 247, .2); }
.plan-product-page .summer-route-phase[open] > summary { border-bottom: 1px solid rgba(60, 158, 145, .14); }
.plan-product-page .summer-route-day {
  border-color: rgba(60, 158, 145, .18);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 5px 14px rgba(47, 117, 109, .05);
}
.plan-product-page .summer-route-day:hover {
  border-color: rgba(60, 158, 145, .5);
  box-shadow: 0 8px 18px rgba(47, 117, 109, .1);
}
.plan-product-page .summer-route-day.current,
.plan-product-page .summer-route-day.selected {
  border-color: #e8737d;
  box-shadow: 0 0 0 2px rgba(232, 115, 125, .14);
}
.plan-product-page .summer-route-day.current .summer-route-day-num,
.plan-product-page .summer-route-day.selected .summer-route-day-num { background: #e8737d; color: #3f2930; }
.plan-product-page .summer-route-day.done {
  border-color: #76bfae;
  background: #dff4ea;
  color: #287260;
}
.plan-product-page .summer-route-day.done .summer-route-status { color: #287260; }
.plan-product-page .summer-route-day.done .summer-route-day-num { background: #62ae9e; color: #fff; }
.plan-product-page .summer-route-day.done.current,
.plan-product-page .summer-route-day.done.selected { border-color: #e8737d; box-shadow: 0 0 0 2px rgba(232, 115, 125, .14); }
.plan-product-page .summer-route-day.done.current .summer-route-day-num,
.plan-product-page .summer-route-day.done.selected .summer-route-day-num { background: #e8737d; color: #3f2930; }
.plan-product-page .summer-route-day.sheet,
.plan-product-page .summer-route-day.draft { background: rgba(232, 246, 252, .78); }
.plan-product-page .summer-route-day-num { background: #3c9e91; }
.plan-product-page .summer-route-detail {
  border-color: rgba(60, 158, 145, .18);
  background: rgba(238, 249, 246, .9);
}
.plan-product-page .summer-route-day-pill { background: #e8737d; color: #3f2930; }
.plan-product-page .summer-route-detail-task {
  border-color: rgba(60, 158, 145, .16);
  background: rgba(255, 255, 255, .84);
}
.plan-product-page .custom-plan-map { background: rgba(255, 255, 255, .86); }
.plan-product-page .custom-plan-day {
  border-color: rgba(60, 158, 145, .18);
  background: rgba(255, 255, 255, .82);
}
.plan-product-page .custom-plan-day.done { border-color: rgba(60, 158, 145, .3); background: rgba(220, 244, 235, .86); }
.plan-product-page .custom-plan-day.active { outline-color: #e8737d; }
.plan-product-page .btn-primary {
  border-color: #1f6a51;
  background: #1f6a51;
  color: #fff;
}
.plan-product-page .btn-primary:hover { border-color: #164b3c; background: #164b3c; }
.plan-product-page .btn-soft {
  border-color: rgba(60, 158, 145, .16);
  background: #cfe8f7;
  color: #2c6967;
}
.plan-product-page .btn-soft:hover { border-color: rgba(60, 158, 145, .28); background: #bddff3; }
.plan-product-page .btn-ghost { color: #2f756d; }
.plan-manager-grid { display: grid; gap: 14px; }
.plan-manager-grid .card-sub { padding: 16px; }
.plan-manager-grid h3 { margin-top: 0; }
.plan-manager-grid textarea { width: 100%; resize: vertical; }
.plan-manager-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.custom-plan-map { display: grid; gap: 16px; }
.custom-plan-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.custom-plan-day { display: grid; gap: 6px; min-height: 132px; padding: 13px; border: 1px solid rgba(87, 72, 77, .12); border-radius: 14px; background: #fff; }
.custom-plan-day > span, .custom-plan-day > small { color: var(--text-muted, #75666c); font-size: 11px; }
.custom-plan-day.done { background: #eef7f0; border-color: rgba(79, 139, 103, .22); }
.custom-plan-day.active { outline: 2px solid var(--primary, #4f8b67); }

.growth-product-page { display: grid; gap: 18px; }
.farm-level-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; min-width: 210px; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(87, 72, 77, .07); }
.farm-level-card > span { grid-row: 1 / 3; display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; background: var(--primary-soft, #e5f1e8); color: var(--primary, #4f8b67); font-weight: 900; }
.farm-level-card small { color: var(--text-muted, #75666c); }
.growth-farm-stage { padding: 0; overflow: hidden; background: linear-gradient(#dff2ec 0 30%, #f2e8d7 30% 100%); }
.growth-yard-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: rgba(255,255,255,.72); }
.growth-yard-title > div { display: flex; align-items: center; gap: 9px; }
.growth-yard-title > span { color: var(--text-muted, #75666c); font-size: 13px; }
.growth-plot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 26px; }
.growth-plot { overflow: hidden; border: 1px solid rgba(87, 72, 77, .12); border-radius: 20px; background: rgba(255,255,255,.9); box-shadow: 0 12px 28px rgba(87, 72, 77, .08); }
.growth-plot-sky, .growth-plot-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.growth-plot-sky b { padding: 4px 8px; border-radius: 999px; background: var(--primary-soft, #e5f1e8); color: var(--primary, #4f8b67); font-size: 11px; }
.growth-plot-ground { position: relative; display: grid; min-height: 180px; place-items: center; overflow: hidden; background: radial-gradient(ellipse at center bottom, #a87b57 0 31%, transparent 32%), linear-gradient(#dff2f5 0 56%, #8fbe73 57% 69%, #c89c70 70%); }
.growth-plot-ground::before, .growth-plot-ground::after { content: ""; position: absolute; bottom: 27px; width: 26%; height: 5px; border-radius: 50%; background: rgba(81, 54, 38, .18); filter: blur(2px); }
.growth-plot-ground::before { left: 11%; }.growth-plot-ground::after { right: 11%; }
.growth-crop-sprite { position: relative; z-index: 2; transform: scale(1.18); transform-origin: center bottom; animation: crop-breathe 3.4s ease-in-out infinite; }
.growth-plot:nth-child(2) .growth-crop-sprite { animation-delay: -.9s; }.growth-plot:nth-child(3) .growth-crop-sprite { animation-delay: -1.8s; }
@keyframes crop-breathe { 0%,100% { transform: scale(1.18) translateY(0); } 50% { transform: scale(1.18) translateY(-4px); } }
.growth-sparkle { position: absolute; z-index: 3; color: #fff5a8; font-size: 25px; animation: growth-twinkle 1.7s ease-in-out infinite; }.growth-sparkle.one { top: 28px; left: 23%; }.growth-sparkle.two { top: 48px; right: 22%; animation-delay: -.7s; }
@keyframes growth-twinkle { 0%,100% { opacity: .25; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(20deg); } }
.growth-plot-meta > div { display: grid; gap: 3px; }
.growth-plot-meta small, .growth-plot-meta > span { color: var(--text-muted, #75666c); font-size: 11px; }
.growth-lower-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.growth-moment-list { display: grid; gap: 8px; margin-top: 14px; }
.growth-moment-list article { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(87, 72, 77, .08); }
.growth-moment-list article > .material-symbols-outlined { color: #c99a3e; }
.growth-moment-list p { margin: 3px 0 0; color: var(--text-muted, #75666c); font-size: 12px; }
.growth-moment-list time { color: var(--text-muted, #75666c); font-size: 11px; }
.growth-album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.growth-album-grid > div { display: grid; place-items: center; gap: 3px; padding: 12px 6px; border-radius: 12px; background: #f7f4f3; text-align: center; }
.growth-album-grid .material-symbols-outlined { color: var(--primary, #4f8b67); }
.growth-album-grid small { color: var(--text-muted, #75666c); font-size: 10px; }
.growth-empty { color: var(--text-muted, #75666c); }
.growth-plugin-entry, .plugin-disabled-note { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.growth-plugin-entry > div, .plugin-disabled-note > div { display: flex; align-items: center; gap: 12px; }
.growth-plugin-entry h3, .growth-plugin-entry p, .plugin-disabled-note h3, .plugin-disabled-note p { margin: 0; }
.growth-plugin-entry p, .plugin-disabled-note p { margin-top: 3px; color: var(--text-muted, #75666c); }

.my-status-card { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; align-items: stretch; margin-bottom: 18px; }
.my-status-card > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; padding: 11px; border-radius: 12px; background: #f7f4f3; }
.my-status-card .material-symbols-outlined { grid-row: 1 / 3; color: var(--primary, #4f8b67); }
.my-status-card small { color: var(--text-muted, #75666c); }
.my-backup-reminder { display: flex; align-items: center; gap: 12px; margin: -8px 0 18px; border-color: #cfe2d5; background: #f4fbf6; }
.my-backup-reminder > .material-symbols-outlined { color: #56805d; }
.my-backup-reminder > div { flex: 1; min-width: 0; }
.my-backup-reminder p { margin: 2px 0 0; color: var(--text-muted, #75666c); }
.plugin-center-card { margin-bottom: 18px; }
.plugin-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 14px; }
.plugin-card { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 14px; border: 1px solid rgba(87,72,77,.11); border-radius: 15px; background: #faf8f7; }
.plugin-card.enabled { border-color: rgba(79,139,103,.25); background: #f7fbf8; }
.plugin-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--primary-soft, #e5f1e8); color: var(--primary, #4f8b67); }
.plugin-card h4, .plugin-card p { margin: 0; }.plugin-card p { margin-top: 5px; color: var(--text-muted, #75666c); font-size: 12px; line-height: 1.5; }
.plugin-card > .btn { grid-column: 2 / -1; justify-self: start; }

.learning-toolbox { margin-top: 16px; padding: 0; overflow: hidden; }
.learning-toolbox > summary { display: flex; align-items: center; gap: 11px; min-height: 70px; padding: 0 18px; cursor: pointer; list-style: none; }
.learning-toolbox > summary::-webkit-details-marker { display: none; }
.learning-toolbox > summary > span:nth-child(2) { display: grid; gap: 3px; }.learning-toolbox > summary small { color: var(--text-muted, #75666c); }.learning-toolbox > summary > .material-symbols-outlined:last-child { margin-left: auto; }
.learning-tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 16px 16px; }
.learning-tool-grid button { display: grid; gap: 5px; min-height: 112px; padding: 14px; border: 1px solid rgba(87,72,77,.11); border-radius: 14px; background: #faf8f7; color: inherit; text-align: left; cursor: pointer; }
.learning-tool-grid button:hover { border-color: rgba(79,139,103,.35); background: #f4faf6; }.learning-tool-grid .material-symbols-outlined { color: var(--primary, #4f8b67); }.learning-tool-grid small { color: var(--text-muted, #75666c); line-height: 1.4; }

@media (max-width: 980px) {
  .home-flow.today-product-page { grid-template-columns: minmax(0, 1fr) 290px; }
  .growth-plot-grid { gap: 10px; padding: 18px; }
  .plugin-card-grid { grid-template-columns: 1fr; }
  .my-status-card { grid-template-columns: repeat(3, 1fr); }
  .my-status-card > .btn { grid-column: 1 / -1; }
  .custom-plan-days { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .top-bar,
  .content,
  .bottom-nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .content { padding-right: 12px; padding-left: 12px; }
  .world-theme.plan-product-page,
  .world-theme.today-product-page,
  .world-theme.learn-product-page,
  .world-theme.growth-product-page,
  .world-theme.achievements-page,
  .world-theme.me-product-page {
    width: calc(100% + 24px);
    max-width: none;
  }
  .world-theme {
    min-height: calc(100vh - 76px);
    margin: -22px -12px -100px;
    padding: 22px 12px 100px;
  }
  .world-theme::before { width: 132px; top: -12px; right: -18px; opacity: .72; }
  .today-product-page,
  .learn-product-page { padding-top: 78px; }
  .today-product-page::before,
  .learn-product-page::before { width: 156px; top: -4px; right: -18px; }
  .world-theme .product-page-head { display: grid; grid-template-columns: minmax(0, 1fr); }
  .world-theme .product-page-head > div { min-width: 0; }
  .world-theme .page-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .world-theme .page-head-actions .btn { min-width: 0; padding-inline: 10px; }
  .today-extra-learning-head { align-items: flex-start; flex-wrap: wrap; }
  .today-extra-learning-head > div { min-width: 0; flex: 1 1 180px; }
  .today-extra-learning-head .btn { flex: 0 0 auto; }
  .plan-product-page .product-subject-tab { min-width: 0; gap: 4px; padding-inline: 4px; }
  .home-flow,
  .today-product-page,
  .today-product-page > *,
  .today-product-page .home-left-stack,
  .today-product-page .home-right-stack,
  .today-built-in-task,
  .today-built-in-task .summer-task-card,
  .today-built-in-task .summer-today-panel,
  .today-built-in-task .summer-task-list,
  .today-built-in-task .summer-task,
  .plan-product-page,
  .growth-product-page {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .home-flow.today-product-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .today-product-head, .product-page-head { align-items: flex-start; flex-direction: column; }
  .today-product-head .streak-banner { width: 100%; }
  .product-subject-switcher { grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px; border-radius: 16px; }
  .product-subject-tab { justify-content: center; min-height: 58px; padding: 8px 5px; text-align: center; }
  .product-subject-tab > span:nth-child(2) { min-width: 0; overflow: hidden; }
  .product-subject-tab strong,
  .product-subject-tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-subject-tab > .material-symbols-outlined { width: 30px; height: 30px; font-size: 19px; }
  .product-subject-tab span:nth-child(2) { gap: 0; }.product-subject-tab small { font-size: 9px; }.product-subject-tab b { display: none; }
  .home-plan-cards { grid-template-columns: 1fr; }
  .today-assignment-head { padding: 17px 14px; }
  .today-inline-focus-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; }
  .today-video-capture-keys { display: none; }
  .today-video-capture-secondary { align-items: stretch; flex-direction: column; }
  .today-video-capture-secondary .btn { width: 100%; }
  .today-extra-subjects { grid-template-columns: 1fr; }
  .today-required-task-summary { padding: 12px; }
  .today-fusion-example-list { grid-template-columns: 1fr; }
  .today-fusion-add-example { grid-template-columns: 1fr; }
  .today-fusion-foundation-facts { grid-template-columns: 1fr; }
  .today-immersive-current { overflow: hidden; }
  .today-fusion-assigned,
  .today-fusion-task,
  .today-fusion-stage { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .today-fusion-ai-step { grid-template-columns: 28px minmax(0, 1fr); }
  .today-fusion-ai-step > .btn { grid-column: 1 / -1; width: 100%; }
  .plan-preview-lock { align-items: flex-start; flex-wrap: wrap; }
  .plan-preview-lock .btn { width: 100%; }
  .home-week-rhythm { gap: 3px; overflow-x: auto; }.home-week-rhythm span { min-width: 42px; }
  .plan-summary-band { grid-template-columns: 1fr; }.plan-summary-band > div { grid-template-columns: 90px 1fr; align-items: center; }
  .plan-product-page .summer-route-grid { grid-template-columns: repeat(7, minmax(62px, 1fr)); overflow-x: auto; }
  .custom-plan-days { grid-template-columns: 1fr; }
  .growth-plot-grid { grid-template-columns: 1fr; padding: 14px; }
  .growth-plot-ground { min-height: 170px; }
  .growth-lower-grid { grid-template-columns: 1fr; }
  .growth-album-grid { grid-template-columns: repeat(3, 1fr); }
  .my-status-card { grid-template-columns: 1fr; }.my-status-card > .btn { grid-column: auto; }
  .my-backup-reminder { align-items: flex-start; flex-wrap: wrap; }
  .my-backup-reminder .btn { width: 100%; }
  .learning-tool-grid { grid-template-columns: repeat(2, 1fr); }
  .growth-plugin-entry, .plugin-disabled-note { align-items: flex-start; flex-direction: column; }
  .growth-plugin-entry > div, .plugin-disabled-note > div { align-items: flex-start; }
  .page-head-actions { width: 100%; }.page-head-actions .btn { flex: 1; }
  .bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bottom-nav .nav-item { width: auto; min-width: 0; max-width: none; padding-inline: 2px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .world-theme::before { animation: none; }
}

/* Formal user-facing controls share one tactile field language. Native toggles,
   file pickers and developer/admin controls intentionally keep their own UI. */
#view :where(
  textarea,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])
),
.plan-manager-grid :where(textarea, select, input) {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid color-mix(in srgb, var(--world-accent, var(--primary, #864d61)) 22%, rgba(89, 72, 81, .18));
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .88);
  color: var(--text-primary, var(--ink, #29262e));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 4px 12px rgba(59, 55, 58, .04);
  line-height: 1.55;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
#view :where(textarea, input)::placeholder,
.plan-manager-grid :where(textarea, input)::placeholder {
  color: color-mix(in srgb, var(--text-secondary, #75666c) 68%, transparent);
  opacity: 1;
}
#view :where(
  textarea,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])
):hover,
.plan-manager-grid :where(textarea, select, input):hover {
  border-color: color-mix(in srgb, var(--world-accent, var(--primary, #864d61)) 38%, rgba(89, 72, 81, .18));
  background: rgba(255, 255, 255, .94);
}
#view :where(
  textarea,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])
):focus,
.plan-manager-grid :where(textarea, select, input):focus {
  border-color: var(--world-accent, var(--primary, #864d61));
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--world-accent, var(--primary, #864d61)) 16%, transparent), 0 8px 20px rgba(59, 55, 58, .07);
}
#view textarea,
.plan-manager-grid textarea { min-height: 76px; resize: vertical; }
.today-formal-review-import textarea {
  height: 76px;
  min-height: 76px;
}
#view :where(textarea, select, input):disabled,
#view :where(textarea, input)[readonly],
.plan-manager-grid :where(textarea, select, input):disabled,
.plan-manager-grid :where(textarea, input)[readonly] {
  background: rgba(245, 242, 242, .82);
  color: var(--text-tertiary, #8b8185);
  box-shadow: none;
}

@media (max-width: 390px) {
  .product-subject-tab { flex-direction: column; gap: 2px; }
  .learning-tool-grid { grid-template-columns: 1fr; }
  .growth-album-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .summer-route-picker .summer-route-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
}
/* Pilot account gate: kept deliberately close to the existing card and button language. */
.access-gate {
  max-width: 460px;
  margin: 12vh auto;
  padding: 28px;
  display: grid;
  gap: 16px;
}
.access-gate > .material-symbols-outlined { color: var(--primary, #4f8b67); font-size: 34px; }
.access-gate h2 { margin: 4px 0 8px; }
.access-gate p { margin: 0; }
.access-gate form { display: grid; gap: 12px; }
.access-gate label { display: grid; gap: 6px; font-weight: 700; }
.access-gate input { width: 100%; box-sizing: border-box; }
.access-gate-error { min-height: 1.25em; color: #b54747; }
.access-notice { padding: 10px 12px; border-radius: 10px; background: rgba(79, 139, 103, .1); color: var(--text, #243126); }
.access-form-actions { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.access-form-actions .btn { padding-inline: 0; }
.access-gate form small { color: var(--muted, #66756a); line-height: 1.5; }
.access-gate-expiry { font-weight: 700; }
.access-account-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.access-account-card > div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.access-account-card .material-symbols-outlined { grid-row: span 2; color: var(--primary, #4f8b67); }
.access-account-card small { grid-column: 2; }
.access-renewal { flex: 1 1 100%; }
.access-renewal form { margin-top: 12px; }
.access-renewal form, .access-renewal label { display: grid; gap: 8px; }
.access-renewal input { width: 100%; box-sizing: border-box; }
@media (max-width: 480px) {
  .access-gate { margin: 6vh 12px; padding: 22px; }
  .access-account-card { align-items: flex-start; flex-direction: column; }
}
.personal-task-section { display: grid; gap: 13px; margin-top: 16px; }
.personal-task-section > p { margin: 0; }
.personal-task-list { display: grid; gap: 9px; }
.personal-task-item { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid rgba(79, 139, 103, .18); border-radius: 14px; background: var(--surface, #fff); }
.personal-task-item.is-completed { background: #f1f8f2; }
.personal-task-item-main { min-width: 0; flex: 1 1 auto; display: grid; gap: 4px; }
.personal-task-execution { flex: 1 1 100%; min-width: 0; width: 100%; }
.personal-task-execution > summary { cursor: pointer; color: var(--primary, #4f8b67); font-size: 13px; font-weight: 800; }
.personal-task-item-meta { display: flex; align-items: center; gap: 8px; color: var(--primary, #4f8b67); font-size: 11px; font-weight: 800; }
.personal-task-item-meta b { padding: 3px 7px; border-radius: 999px; background: var(--primary-soft, #e5f1e8); color: var(--text-muted, #75666c); font-size: 10px; }
.personal-task-item h4 { margin: 0; color: var(--text-primary, #2e3d33); font-size: 16px; }
.personal-task-item p, .personal-task-item small { margin: 0; color: var(--text-muted, #75666c); font-size: 11px; line-height: 1.55; }
.personal-task-empty { display: grid; justify-items: center; gap: 5px; padding: 22px 14px; border: 1px dashed rgba(79, 139, 103, .28); border-radius: 14px; color: var(--text-muted, #75666c); text-align: center; }
.personal-task-empty .material-symbols-outlined { color: var(--primary, #4f8b67); font-size: 28px; }
.personal-task-empty strong { color: var(--text-primary, #2e3d33); }
.personal-task-empty p { margin: 0; font-size: 12px; }
.personal-task-form, .personal-task-arrangement, .personal-task-preview { display: grid; gap: 12px; }
.personal-task-form label, .personal-task-arrangement label { display: grid; gap: 5px; color: var(--text-secondary, #59665e); font-size: 12px; font-weight: 750; }
.personal-task-form label > span, .personal-task-arrangement label > span { display: flex; align-items: center; gap: 3px; }
.personal-task-form label b { color: #b44f58; }
.personal-task-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.personal-task-form input, .personal-task-form select, .personal-task-form textarea, .personal-task-arrangement select { width: 100%; box-sizing: border-box; border: 1px solid rgba(79, 139, 103, .28); border-radius: 10px; padding: 9px 10px; background: var(--surface, #fff); color: var(--text-primary, #2e3d33); font: inherit; }
.personal-task-form textarea { resize: vertical; }
.personal-task-form input:focus, .personal-task-form select:focus, .personal-task-form textarea:focus, .personal-task-arrangement select:focus { outline: 2px solid rgba(79, 139, 103, .18); border-color: var(--primary, #4f8b67); }
.personal-task-preview { padding: 15px; border: 1px solid rgba(79, 139, 103, .22); border-radius: 14px; background: #f7fbf7; }
.personal-task-preview-head { display: grid; gap: 4px; }
.personal-task-preview-head span { color: var(--primary, #4f8b67); font-size: 11px; font-weight: 800; }
.personal-task-preview-head strong { color: var(--text-primary, #2e3d33); font-size: 20px; }
.personal-task-preview dl { display: grid; gap: 7px; margin: 0; }
.personal-task-preview dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
.personal-task-preview dt { color: var(--text-muted, #75666c); font-size: 11px; }
.personal-task-preview dd { margin: 0; color: var(--text-primary, #2e3d33); font-size: 12px; white-space: pre-wrap; }
.personal-task-preview > p { margin: 0; }
.personal-task-body { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(87, 72, 77, .1); }
.personal-task-details { display: grid; gap: 7px; padding: 11px 12px; border-radius: 12px; background: #f7f4f2; }
.personal-task-details p { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 7px; margin: 0; color: var(--text-muted, #75666c); font-size: 12px; line-height: 1.55; }
.personal-task-details b { color: var(--text-primary, #2e3d33); }
.personal-task-ready { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.personal-task-ready small, .personal-task-focus > p { color: var(--text-muted, #75666c); font-size: 11px; }
.personal-task-focus { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: linear-gradient(145deg, #355f45, #4f8b67); color: #fff; }
.personal-task-focus-status { display: flex; align-items: center; gap: 8px; color: #e7f2ea; font-size: 12px; font-weight: 750; }
.personal-task-focus-status span { width: 8px; height: 8px; border-radius: 50%; background: #83d09c; box-shadow: 0 0 0 5px rgba(131, 208, 156, .14); }
.personal-task-focus .today-inline-focus-clock { margin-top: 2px; }
.personal-task-focus > p { margin: 0; color: rgba(255, 255, 255, .72); }
.personal-task-focus-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.personal-task-focus-actions .btn-primary { border-color: #fff; background: #fff; color: #355f45; }
.personal-task-execution .btn-primary, .personal-task-execution .btn-primary:hover { color: #fff; }
.personal-task-timer-conflict { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 12px; background: #fff6e8; color: #795821; }
.personal-task-timer-conflict p { flex: 1; margin: 0; font-size: 11px; line-height: 1.55; }
.personal-task-timer-conflict .material-symbols-outlined { font-size: 19px; }
.personal-task-completion { display: grid; gap: 8px; padding-top: 4px; }
.personal-task-completion > strong { color: var(--text-primary, #2e3d33); font-size: 13px; }
.personal-task-completion label { display: grid; gap: 5px; color: var(--text-muted, #75666c); font-size: 11px; }
.personal-task-completion textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid rgba(79, 139, 103, .22); border-radius: 10px; padding: 8px 10px; background: #fff; color: var(--text-primary, #2e3d33); font: inherit; }
.personal-task-complete-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--primary, #4f8b67); font-size: 12px; line-height: 1.6; }
.personal-task-complete-note .material-symbols-outlined { font-size: 18px; }
.today-personal-task .today-extra-task-body { padding-top: 12px; }
@media (max-width: 640px) {
  .personal-task-form-grid { grid-template-columns: 1fr; }
  .personal-task-item { flex-direction: column; flex-wrap: nowrap; }
  .personal-task-item-main, .personal-task-item-actions, .personal-task-execution { flex: 0 0 auto; width: 100%; min-width: 0; }
  .personal-task-item > .btn { width: 100%; }
  .personal-task-focus-actions > .btn { flex: 1 1 140px; }
}

/* Compact home shell: one module owns the main column while the other two
   remain substantial, named cards. Components stay mounted; only the shell
   changes their visible width and hierarchy. */
.home-compact-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
  grid-template-areas:
    "date date"
    "study focus"
    "study plan";
  align-items: start;
  gap: 14px;
  width: min(100%, 1280px);
  margin: 0 auto;
  padding-bottom: 40px;
}

.home-compact-shell-host {
  width: 100%;
  container: home-shell / inline-size;
}

.home-compact-shell[data-layout-state="right-wide"] {
  grid-template-columns: minmax(0, 200px) minmax(0, calc(100% - 214px));
}

.home-compact-datebar {
  grid-column: 1 / -1;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(87, 72, 77, .15);
  color: var(--text-muted, #75666c);
  font-size: 12px;
  font-weight: 750;
}

.home-compact-plan,
.home-compact-rail,
.home-compact-module,
.home-compact-module-body,
.home-compact-plan-body {
  min-width: 0;
}

.home-compact-rail {
  grid-column: 1;
  display: grid;
  align-content: start;
  gap: 10px;
}

.home-compact-plan {
  grid-column: 2;
  grid-area: plan;
  min-height: 128px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(87, 72, 77, .2);
  border-radius: 16px;
  background: rgba(255, 255, 252, .92);
  box-shadow: 0 7px 18px rgba(60, 92, 68, .05);
  transition: padding .2s ease, box-shadow .2s ease;
}

.home-compact-plan-body {
  display: grid;
  align-content: start;
  gap: 12px;
}

.home-compact-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.home-compact-region-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  color: var(--primary, #4f8b67);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.home-compact-region-title .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 30px;
}

.home-compact-tomato {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 31px;
  height: 27px;
  border-radius: 48% 48% 44% 44%;
  background: #d86559;
  box-shadow: inset -4px -4px 0 rgba(123, 52, 48, .15);
}

.home-compact-tomato::before {
  position: absolute;
  top: -7px;
  left: 8px;
  width: 17px;
  height: 12px;
  border-radius: 100% 0 100% 0;
  background: var(--home-accent, #45766a);
  content: "";
  transform: rotate(-18deg);
}

.home-compact-region-title small {
  color: var(--text-muted, #75666c);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0;
}

.home-compact-region-title:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 5px;
}

.home-compact-region-head .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.home-compact-module {
  min-height: 128px;
  padding: 12px;
  border: 1px solid rgba(62, 76, 75, .18);
  border-radius: 14px;
  background: #fffefa;
  transition: padding .2s ease, border-color .2s ease, background-color .2s ease;
}

.home-compact-study {
  grid-area: study;
  container: home-study / inline-size;
}

.home-compact-focus {
  grid-area: focus;
  container: home-focus / inline-size;
}

.home-compact-module-body {
  overflow: visible;
}

.home-compact-study .learning-workbench-home {
  width: 100%;
  margin: 0;
  padding: 10px 0 12px;
  gap: 12px;
}

.home-compact-study .learning-workbench-home-head {
  display: none;
}

.home-compact-focus .quick-focus-preview-copy .quick-focus-preview-kicker {
  display: none;
}

.home-compact-study .learning-workbench-entry-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.home-compact-study .learning-workbench-entry:not(.learning-workbench-entry-primary) {
  display: none;
}

.home-compact-study .learning-workbench-entry,
.home-compact-study .learning-workbench-start-card,
.home-compact-study .learning-workbench-resume {
  box-shadow: none;
}

.home-compact-study .learning-workbench-entry {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.home-compact-study .learning-workbench-entry > .learning-workbench-entry-icon,
.home-compact-study .learning-workbench-entry > .learning-workbench-entry-eyebrow,
.home-compact-study .learning-workbench-entry > h3,
.home-compact-study .learning-workbench-entry > p {
  display: none;
}

.home-compact-study .learning-workbench-entry .btn {
  width: 100%;
}

.home-compact-study .learning-workbench-start-card {
  padding: 0;
  border: 0;
  background: transparent;
}

.home-compact-study .learning-workbench-goal-head > div,
.home-compact-study .learning-workbench-goal-note,
.home-compact-study .learning-workbench-goal-footer > span {
  display: none;
}

.home-compact-study .learning-workbench-goal-head {
  justify-content: flex-end;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-study .home-compact-route {
  display: none;
}

.home-compact-focus [data-quick-focus-card] {
  width: 100%;
  margin-top: 10px;
}

.home-compact-plan .today-assignment-shell,
.home-compact-plan .home-plan-overview {
  width: 100%;
  max-width: none;
}

.home-compact-plan .today-extra-learning:has(.today-extra-empty) {
  gap: 8px;
  padding: 10px 12px;
}

.home-compact-plan .today-extra-learning:has(.today-extra-empty) .today-extra-learning-head p,
.home-compact-plan .today-extra-learning:has(.today-extra-empty) .today-extra-empty {
  display: none;
}

.home-compact-plan .today-extra-learning:has(.today-extra-empty) .today-extra-learning-head h3 {
  margin: 0;
}

.home-compact-plan .today-extra-learning:has(.today-extra-empty) .today-extra-learning-head > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

/* The default desktop state gives the tools the working width. */
.home-compact-shell[data-layout-state="left-wide"] .home-compact-plan-body,
.home-compact-shell[data-layout-state="left-wide"] .home-compact-plan > .home-compact-region-head > .btn {
  display: none;
}

.home-compact-shell[data-layout-state="left-wide"] .home-compact-plan {
  align-self: start;
}

/* When today's plan is active, the tools remain visible as two named strips.
   An active focus card keeps only its live clock and pause state available. */
.home-compact-shell[data-layout-state="right-wide"] .home-compact-module-body {
  display: none;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .home-compact-module-body:has([data-quick-mode="active"]) {
  display: block;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-card {
  grid-template-columns: 1fr;
  min-height: 0;
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-card > :not(.quick-focus-preview-head):not(.quick-focus-preview-clock):not(.quick-focus-record-import) {
  display: none;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-head {
  gap: 4px;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-head h3 {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 8px;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock-copy {
  display: grid;
  align-content: center;
  gap: 3px;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock strong {
  font-size: 22px;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock span {
  font-size: 11px;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock-actions {
  display: grid;
  align-content: center;
  gap: 5px;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock-button-primary {
  display: none;
}

.home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock-button {
  min-width: 52px;
  min-height: 32px;
  padding: 4px 6px;
  font-size: 11px;
}

@container home-study (max-width: 480px) {
  .home-compact-study .learning-workbench-metric-strip {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .home-compact-study .learning-workbench-metric-heading {
    flex: 1 1 auto;
  }

  .home-compact-study .learning-workbench-metric-values {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 18px;
  }

  .home-compact-study .learning-workbench-stat-switch {
    margin-left: auto;
  }

  .home-compact-study .learning-workbench-goal-grid {
    grid-template-columns: 1fr;
  }

  .home-compact-study .learning-workbench-goal-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-compact-study .learning-workbench-goal-footer .btn {
    width: 100%;
  }
}

@container home-focus (max-width: 640px) {
  .home-compact-focus .quick-focus-preview-card,
  .home-compact-focus .quick-focus-preview-summary {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 13px;
  }
}

@container home-shell (max-width: 760px) {
  .home-compact-shell,
  .home-compact-shell[data-layout-state="right-wide"] {
    grid-template-columns: 1fr;
    gap: 11px;
    padding-bottom: 96px;
  }

  .home-compact-rail,
  .home-compact-plan {
    grid-column: 1;
  }

  .home-compact-rail { order: 1; }
  .home-compact-plan { order: 2; }

  .home-compact-shell[data-layout-state="left-wide"] .home-compact-plan-body {
    display: grid;
  }

  .home-compact-shell[data-layout-state="left-wide"] .home-compact-plan > .home-compact-region-head > .btn {
    display: inline-flex;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-module-body {
    display: grid;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .home-compact-module-body:has([data-quick-mode="active"]) {
    display: block;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-study .home-compact-route {
    display: inline-flex;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-card > :not(.quick-focus-preview-head):not(.quick-focus-preview-clock):not(.quick-focus-record-import) {
    display: revert;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-card {
    grid-template-columns: 1fr;
    min-height: 240px;
    gap: 10px;
    margin-top: 10px;
    padding: 13px;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock {
    display: flex;
    grid-template-columns: none;
    padding: 12px 14px;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock-copy {
    display: flex;
    gap: 10px;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock strong {
    font-size: 32px;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock span {
    font-size: 14px;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock-actions {
    display: flex;
    gap: 6px;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock-button-primary {
    display: inline-flex;
  }

  .home-compact-shell[data-layout-state="right-wide"] .home-compact-focus .quick-focus-preview-clock-button {
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .home-compact-shell {
    gap: 10px;
  }

  .home-compact-plan,
  .home-compact-module {
    padding: 11px;
  }

  .home-compact-datebar {
    padding-inline: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-compact-shell,
  .home-compact-rail,
  .home-compact-plan,
  .home-compact-module {
    transition: none;
  }
}

/* Three named home modules: the selected module is the working surface and
   the other two remain readable side cards. */
.home-compact-shell {
  --home-accent: #45766a;
  grid-template-areas:
    "date date"
    "study focus"
    "study plan";
}

.home-compact-datebar { grid-area: date; }
.home-compact-rail { display: contents; }
.home-compact-study { grid-area: study; }
.home-compact-focus { grid-area: focus; }
.home-compact-plan { grid-area: plan; }

.home-compact-region-title {
  color: var(--home-accent);
}

.home-compact-region-title small {
  display: inline-block;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-compact-module,
.home-compact-plan {
  min-height: 128px;
  border-color: rgba(62, 76, 75, .18);
  background: #fffefa;
}

.home-compact-module-body,
.home-compact-plan-body {
  display: none;
}

.home-compact-shell[data-layout-state="study-wide"] .home-compact-study .home-compact-module-body,
.home-compact-shell[data-layout-state="focus-wide"] .home-compact-focus .home-compact-module-body,
.home-compact-shell[data-layout-state="plan-wide"] .home-compact-plan-body {
  display: grid;
}

.home-compact-shell[data-layout-state="study-wide"] .home-compact-study,
.home-compact-shell[data-layout-state="focus-wide"] .home-compact-focus,
.home-compact-shell[data-layout-state="plan-wide"] .home-compact-plan {
  border-color: #4f8cc4;
  box-shadow: 0 9px 24px rgba(55, 113, 166, .14);
}

.home-compact-shell[data-layout-state="focus-wide"] {
  grid-template-areas:
    "date date"
    "focus study"
    "focus plan";
}

.home-compact-shell[data-layout-state="plan-wide"] {
  grid-template-areas:
    "date date"
    "plan study"
    "plan focus";
}

@container home-shell (min-width: 761px) {
  /* Keep an active timer operable even while its named card is secondary. */
  .home-compact-shell:not([data-layout-state="focus-wide"]) .home-compact-focus .home-compact-module-body:has([data-quick-mode="active"]) {
    display: block;
  }

  .home-compact-shell:not([data-layout-state="focus-wide"]) .home-compact-focus .quick-focus-preview-card {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 8px;
    margin-top: 6px;
    padding: 8px;
  }

.home-compact-shell:not([data-layout-state="focus-wide"]) .home-compact-focus .quick-focus-preview-card > :not(.quick-focus-preview-head):not(.quick-focus-preview-clock):not(.quick-focus-record-import) {
    display: none;
  }

  .home-compact-shell:not([data-layout-state="focus-wide"]) .home-compact-focus .quick-focus-preview-clock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px;
  }
}

@container home-shell (max-width: 760px) {
  .home-compact-shell,
  .home-compact-shell[data-layout-state="focus-wide"],
  .home-compact-shell[data-layout-state="plan-wide"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-compact-shell {
    grid-template-areas:
      "date date"
      "focus plan"
      "study study";
  }

  .home-compact-shell[data-layout-state="focus-wide"] {
    grid-template-areas:
      "date date"
      "study plan"
      "focus focus";
  }

  .home-compact-shell[data-layout-state="plan-wide"] {
    grid-template-areas:
      "date date"
      "study focus"
      "plan plan";
  }

  .home-compact-study,
  .home-compact-focus,
  .home-compact-plan {
    min-width: 0;
    order: initial;
  }

  .home-compact-module,
  .home-compact-plan {
    min-height: 0;
  }

  .home-compact-shell .home-compact-region-head > .btn {
    display: none;
  }

  .home-compact-shell[data-layout-state="study-wide"] .home-compact-study .home-compact-region-head > .btn,
  .home-compact-shell[data-layout-state="plan-wide"] .home-compact-plan .home-compact-region-head > .btn {
    display: inline-flex;
  }

  .home-compact-shell[data-layout-state="study-wide"] :is(.home-compact-focus, .home-compact-plan),
  .home-compact-shell[data-layout-state="focus-wide"] :is(.home-compact-study, .home-compact-plan),
  .home-compact-shell[data-layout-state="plan-wide"] :is(.home-compact-study, .home-compact-focus) {
    min-height: 0;
    padding: 6px;
  }
}

/* Keep the two secondary cards together at the top when today's plan is the
   working surface. The rail is a single grid item at desktop widths, so the
   plan's height cannot create a second, distant row for the tomato card. */
@container home-shell (min-width: 761px) {
  .home-compact-shell[data-layout-state="plan-wide"] {
    grid-template-areas:
      "date date"
      "plan rail";
  }

  .home-compact-shell[data-layout-state="plan-wide"] > .home-compact-rail {
    display: grid;
    grid-area: rail;
    grid-column: 2;
    align-content: start;
    gap: 10px;
  }

  .home-compact-shell[data-layout-state="plan-wide"] > .home-compact-rail > .home-compact-study,
  .home-compact-shell[data-layout-state="plan-wide"] > .home-compact-rail > .home-compact-focus {
    grid-area: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-compact-shell { transition: none; }
}

/* Home surfaces stay neutral; hierarchy comes from spacing and quiet borders. */
#view:has(.home-compact-shell),
#view:has(.learning-workbench-page),
#view:has(.world-theme),
.app-shell:has(.home-compact-shell),
.app-shell:has(.learning-workbench-page),
.app-shell:has(.world-theme),
body:has(.home-compact-shell),
body:has(.world-theme),
.app-shell:has(.learning-workbench-page) .content,
.app-shell:has(.learning-workbench-page) .side-nav,
.app-shell:has(.learning-workbench-page) .top-bar,
body:has(.learning-workbench-page),
.app-shell:has(.world-theme) .content,
.app-shell:has(.world-theme) .side-nav,
.app-shell:has(.world-theme) .top-bar,
.app-shell:has(.home-compact-shell) .content,
.app-shell:has(.home-compact-shell) .side-nav,
.app-shell:has(.home-compact-shell) .top-bar,
.home-compact-shell-host,
.home-compact-shell,
.home-compact-datebar,
.home-compact-module,
.home-compact-plan,
.home-compact-module-body,
.home-compact-plan-body {
  background: #fff;
}

.app-shell:has(.home-compact-shell) .side-nav,
.app-shell:has(.learning-workbench-page) .side-nav,
.app-shell:has(.world-theme) .side-nav,
.app-shell:has(.home-compact-shell) .top-bar,
.app-shell:has(.learning-workbench-page) .top-bar,
.app-shell:has(.world-theme) .top-bar,
.home-compact-datebar,
.home-compact-module,
.home-compact-plan {
  border-color: #d8dfdc;
}

.app-shell:has(.home-compact-shell) .side-nav .nav-item.active,
body:has(.home-compact-shell) .bottom-nav .nav-item.active {
  background: #fff;
  box-shadow: inset 0 0 0 1px #d8dfdc;
}

.app-shell:has(.world-theme) .side-nav .nav-item.active,
body:has(.world-theme) .bottom-nav .nav-item.active {
  background: #edf6ee;
  color: #1f6a51;
  box-shadow: inset 0 0 0 1px #d8dfdc;
}

.app-shell:has(.world-theme) .side-nav .nav-item.active .material-symbols-outlined,
body:has(.world-theme) .bottom-nav .nav-item.active .material-symbols-outlined {
  color: #1f6a51;
}

body:has(.home-compact-shell) .bottom-nav {
  border: 1px solid #d8dfdc;
  background: #fff;
}

body:has(.learning-workbench-page) .bottom-nav {
  border: 1px solid #d8dfdc;
  background: #fff;
}

body:has(.world-theme) .bottom-nav {
  border: 1px solid #d8dfdc;
  background: #fff;
}

.world-theme .btn-primary .material-symbols-outlined {
  color: inherit;
}

.home-compact-tomato {
  display: block;
  flex: 0 0 auto;
  width: 31px;
  height: 27px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.home-compact-tomato::before { display: none; }

.home-compact-shell .today-assignment-head,
.home-compact-shell .today-required-task,
.home-compact-shell .today-built-in-task,
.home-compact-shell .today-immersive-current,
.home-compact-shell .today-immersive-next,
.home-compact-shell .today-extra-learning,
.home-compact-shell .today-extra-task-head,
.home-compact-shell .today-extra-subject,
.home-compact-shell .home-plan-overview,
.home-compact-shell .home-focus-details,
.home-compact-shell .home-focus-summary,
.home-compact-shell .home-focus-panel,
.home-compact-shell .home-plan-card,
.home-compact-shell .home-secondary-drawer,
.home-compact-shell .home-status-drawer,
.home-compact-shell .mini-farm-card,
.home-compact-shell .learning-workbench-entry,
.home-compact-shell .learning-workbench-start-card,
.home-compact-shell .learning-workbench-resume,
.home-compact-shell .quick-focus-preview-start,
.home-compact-shell .quick-focus-preview-subpanel,
.home-compact-shell .quick-focus-preview-clock,
.home-compact-shell .today-fusion-stage,
.home-compact-shell .today-fusion-foundation,
.home-compact-shell .today-fusion-task > .learning-advisor-feedback,
.home-compact-shell .today-fusion-task > .today-fusion-advisor[open],
.home-compact-shell .today-fusion-example-review,
.home-compact-shell .today-fusion-example-item,
.home-compact-shell .today-fusion-ai-step,
.home-compact-shell .today-video-external,
.home-compact-shell .today-inline-switch,
.home-compact-shell .today-deferred-review-note,
.home-compact-shell .today-plan-lock-note,
.home-compact-shell .plan-preview-lock,
.home-compact-shell .today-fusion-refresh-note,
.home-compact-shell .today-formal-review-rule {
  background: #fff;
  border-color: #d8dfdc;
  color: #2e3d33;
}

.home-compact-shell .home-compact-module,
.home-compact-shell .home-compact-plan {
  border-color: #d8dfdc;
  background: #fff;
  box-shadow: 0 7px 18px rgba(44, 79, 61, .055);
}

.home-compact-shell .learning-workbench-metric-strip {
  border-color: #d7e4f0;
  background: #edf4fc;
  box-shadow: none;
}

.home-compact-shell .learning-workbench-metric-strip .learning-workbench-entry-icon {
  border: 1px solid #d7e4f0;
  background: #f8fbff;
}

.home-compact-shell .home-secondary-drawer,
.home-compact-shell .home-secondary-drawer .home-status-summary {
  border-color: #d5e6d7;
  background: #edf6ee;
}

.home-compact-shell .home-secondary-drawer .home-secondary-body {
  background: #fff;
}

.home-compact-shell .quick-focus-preview-card {
  border-color: transparent;
  background: #fff;
  box-shadow: none;
}

.home-compact-shell .quick-focus-preview-summary {
  border-color: #d5e6d7;
  background: #edf6ee;
}

.home-compact-shell .quick-focus-preview-summary-metrics {
  background: #edf4fc;
  color: #3f6178;
}

.home-compact-shell .today-immersive-current:not(.is-timing),
.home-compact-shell .today-required-task:not(.is-timing) {
  border-color: #bfd5c5;
  box-shadow: 0 6px 16px rgba(48, 91, 65, .07);
}

.home-compact-shell .learning-workbench-resume,
.home-compact-shell .learning-workbench-start-card {
  border-color: #d8dfdc;
  background: #fff;
  box-shadow: 0 5px 14px rgba(44, 79, 61, .045);
}

.home-compact-shell .btn-soft,
.home-compact-shell .btn-ghost,
.home-compact-shell .btn-outline {
  border-color: #cfd8d3;
}

.home-compact-shell .btn-primary {
  border-color: #2467a6;
  background: #2467a6;
  color: #fff;
}

.home-compact-shell .btn-primary:hover {
  border-color: #1d5488;
  background: #1d5488;
  box-shadow: 0 4px 11px rgba(36, 103, 166, .14);
}

.home-compact-shell .quick-focus-preview-start-button {
  border-color: #2467a6;
  background: #2467a6;
}

.home-compact-shell .quick-focus-preview-start-button:hover {
  border-color: #1d5488;
  background: #1d5488;
}

.home-compact-shell .btn-soft {
  border-color: #cfe0f0;
  background: #edf4fc;
  color: #24527b;
}

.home-compact-shell .btn-soft:hover,
.home-compact-shell .btn-ghost:hover,
.home-compact-shell .btn-outline:hover {
  border-color: #a9c1b2;
  box-shadow: 0 3px 9px rgba(44, 79, 61, .08);
}

.home-compact-shell .btn:active {
  box-shadow: inset 0 1px 2px rgba(44, 79, 61, .16);
}

.home-compact-shell input:focus,
.home-compact-shell textarea:focus,
.home-compact-shell select:focus {
  outline: 3px solid rgba(79, 139, 103, .16);
  outline-offset: 2px;
  border-color: #4f8b67;
}

.home-compact-shell .today-extra-subject.subject-math.active,
.home-compact-shell .today-extra-subject.subject-physics.active,
.home-compact-shell .today-extra-subject.subject-chemistry.active,
.home-compact-shell .today-fusion-foundation-keywords span,
.home-compact-shell .today-fusion-ai-step > b,
.home-compact-shell .learning-workbench-entry-icon,
.home-compact-shell .learning-workbench-stat-switch,
.home-compact-shell .quick-focus-preview-progress,
.home-compact-shell .home-week-rhythm span,
.home-compact-shell .home-week-rhythm span.done,
.home-compact-shell .home-week-rhythm span.active,
.home-compact-shell .today-immersive-meta span:first-child {
  background: #fff;
}

.home-compact-shell .today-extra-subject.subject-math.active,
.home-compact-shell .today-extra-subject.subject-physics.active,
.home-compact-shell .today-extra-subject.subject-chemistry.active {
  border-color: #d8dfdc;
}

.home-compact-shell .home-week-rhythm span,
.home-compact-shell .home-week-rhythm span.done,
.home-compact-shell .home-week-rhythm span.active,
.home-compact-shell .today-immersive-meta span:first-child {
  border: 1px solid #d8dfdc;
}

.home-compact-shell input,
.home-compact-shell textarea,
.home-compact-shell select {
  background: #fff;
  border-color: #cfd8d3;
  color: #2e3d33;
}

.home-compact-shell .today-fusion-task > .learning-advisor-feedback > summary,
.home-compact-shell .today-fusion-task > .today-fusion-advisor[open] > summary {
  border-color: #d8dfdc;
}

.home-compact-shell .today-immersive-current.is-timing .today-immersive-meta,
.home-compact-shell .today-immersive-current.is-timing .today-immersive-position,
.home-compact-shell .today-immersive-current.is-timing .today-inline-focus p,
.home-compact-shell .today-immersive-current.is-timing .today-inline-focus-status,
.home-compact-shell .today-built-in-task.is-timing > .today-extra-task-head,
.home-compact-shell .today-built-in-task.is-timing > .today-extra-task-head span,
.home-compact-shell .today-built-in-task.is-timing .today-inline-focus p,
.home-compact-shell .today-video-external strong,
.home-compact-shell .today-video-external small,
.home-compact-shell .today-video-external a,
.home-compact-shell .today-immersive-current.is-timing .learning-advisor-feedback > summary strong,
.home-compact-shell .today-immersive-current.is-timing .learning-advisor-feedback > summary small,
.home-compact-shell .today-built-in-task.is-timing .learning-advisor-feedback > summary strong,
.home-compact-shell .today-built-in-task.is-timing .learning-advisor-feedback > summary small {
  color: #65736b;
}

.home-compact-shell .today-immersive-current.is-timing .today-immersive-meta span:first-child,
.home-compact-shell .today-built-in-task.is-timing > .today-extra-task-head,
.home-compact-shell .today-inline-more > summary {
  background: #fff;
  border: 1px solid #d8dfdc;
  color: #2e3d33;
}

.home-compact-shell .today-immersive-current.is-timing .today-inline-focus-actions > .btn-primary,
.home-compact-shell .today-built-in-task.is-timing .today-inline-focus-actions > .btn-primary {
  border-color: #2467a6;
  background: #2467a6;
  color: #fff;
}

.home-compact-shell .today-immersive-current.is-timing .learning-advisor-feedback,
.home-compact-shell .today-built-in-task.is-timing .learning-advisor-feedback {
  border-color: #d8dfdc;
}

.home-compact-shell .quick-focus-preview-clock {
  border: 1px solid #d8dfdc;
  background: #fff;
  color: #2e3d33;
}

.home-compact-shell .quick-focus-preview-clock span {
  color: #65736b;
}

.home-compact-shell .quick-focus-preview-clock-button {
  border-color: #cfd8d3;
  background: #fff;
  color: #2e3d33;
}

.home-compact-shell .quick-focus-preview-clock-button-muted {
  background: #f5f8f6;
  color: #2e3d33;
}

.home-compact-shell .quick-focus-preview-clock-button-primary {
  border-color: #2467a6;
  background: #2467a6;
  color: #fff;
}

.home-compact-shell .home-compact-module-body,
.home-compact-shell .home-compact-plan-body {
  background: #fff;
}

.home-compact-shell .mini-farm-card {
  box-shadow: none;
}

.home-compact-shell .quick-focus-preview-clock-button-primary:hover {
  border-color: #1d5488;
  background: #1d5488;
}

.home-compact-shell .home-compact-module:focus-within,
.home-compact-shell .home-compact-plan:focus-within {
  border-color: var(--home-accent);
  box-shadow: 0 7px 18px rgba(36, 103, 166, .1);
}

@media (hover: hover) and (pointer: fine) {
  .home-compact-shell .home-compact-module:hover,
  .home-compact-shell .home-compact-plan:hover {
    border-color: var(--home-accent);
    box-shadow: 0 7px 18px rgba(36, 103, 166, .1);
  }
}

.home-compact-shell-host + .summer-reward-float {
  border-color: #d8dfdc;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .home-compact-shell,
  .home-compact-rail,
  .home-compact-plan,
  .home-compact-module {
    transition: none;
  }
}

/* Home module art: keep the page white and let the selected card carry the
   hierarchy. The corner scene is decorative and stays behind every control. */
.home-compact-shell {
  position: relative;
  overflow: clip;
}

.home-compact-shell::before {
  display: none;
}

.home-compact-shell > .home-compact-datebar,
.home-compact-shell > .home-compact-rail,
.home-compact-shell > .home-compact-plan {
  position: relative;
  z-index: 1;
}

.home-compact-datebar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 150px 8px 2px;
  background: #fff;
}

.home-compact-datebar::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 8px;
  width: 140px;
  background: url("assets/world/today-camp.webp") center right / contain no-repeat;
  content: "";
  opacity: .68;
  pointer-events: none;
  animation: world-art-arrive .55s ease-out both;
}

.home-compact-datebar > * {
  position: relative;
  z-index: 1;
}

.home-compact-datebar:has(.home-standalone-import) {
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 0 8px 2px;
}

.home-compact-datebar:has(.home-standalone-import)::after {
  right: 84px;
  width: 118px;
}

.home-compact-shell:has(.home-standalone-import-panel:not([hidden])) {
  overflow: visible;
}

.home-compact-shell:has(.home-standalone-import-panel:not([hidden])) > .home-compact-datebar {
  z-index: 4;
}

.home-standalone-import {
  position: relative;
  min-width: 0;
  margin-left: auto;
  z-index: 3;
}

.home-standalone-import-toggle {
  display: inline-flex;
  width: 72px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 11px;
  background: #f3f7f3;
  color: #628776;
  font-size: 12px;
  font-weight: 700;
  transition: background .15s ease, color .15s ease;
}

.home-standalone-import-toggle:hover,
.home-standalone-import-toggle[aria-expanded="true"] {
  background: #e8f1e9;
  color: #286c55;
}

.home-standalone-import-toggle .material-symbols-outlined {
  font-size: 17px;
}

.home-standalone-import-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(300px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid #e0e9e3;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(34, 63, 48, .14);
  color: #365546;
  z-index: 10;
}

.home-standalone-import-panel[hidden] {
  display: none;
}

.home-standalone-import-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.home-standalone-import-panel-head strong {
  font-size: 13px;
  font-weight: 750;
}

.home-standalone-import-close {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: #8a9690;
}

.home-standalone-import-close:hover {
  background: #f0f4f1;
}

.home-standalone-import-close .material-symbols-outlined {
  font-size: 18px;
}

#view .home-standalone-import-panel textarea {
  width: 100%;
  min-height: 84px;
  height: 100px;
  max-height: 180px;
  resize: vertical;
  padding: 10px;
  border: 1px solid #d5e2d9;
  border-radius: 9px;
  background: #fafcf9;
  color: #314d40;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
}

#view .home-standalone-import-panel textarea:focus {
  border-color: #81a892;
  outline: 2px solid rgba(133, 167, 142, .22);
  outline-offset: 0;
  box-shadow: none;
}

.home-standalone-import-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 9px 0 0;
  color: #8c9a90;
  font-size: 11px;
}

.home-standalone-import-hint .material-symbols-outlined {
  font-size: 14px;
}

.home-standalone-import-result {
  min-width: 0;
  margin-top: 10px;
  color: var(--text-muted, #75666c);
  font-size: 11px;
  line-height: 1.45;
}

.home-standalone-import-result[hidden] {
  display: none;
}

.home-standalone-import-result strong {
  display: block;
}

.home-standalone-import-result ul {
  margin: 4px 0 0;
  padding-left: 16px;
}

.home-standalone-import-result.is-error {
  color: #9b4e58;
}

.home-standalone-import-result.is-success {
  color: #367856;
}

.home-standalone-import-result.is-warning {
  color: #8a6624;
}

.home-standalone-import-result button {
  margin-top: 5px;
  padding: 4px 8px;
  font-size: 11px;
}

.home-compact-region-title {
  align-items: center;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
  padding: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.home-compact-region-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.home-compact-region-copy > span {
  overflow-wrap: anywhere;
  color: #2e3d33;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}

.home-compact-region-title small {
  display: block;
  max-width: 18ch;
  overflow: hidden;
  color: var(--text-muted, #75666c);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-compact-module-art {
  display: block;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  object-fit: contain;
}

.home-compact-shell[data-layout-state="study-wide"] .home-compact-study,
.home-compact-shell[data-layout-state="focus-wide"] .home-compact-focus,
.home-compact-shell[data-layout-state="plan-wide"] .home-compact-plan {
  border-color: #4f8cc4;
  box-shadow: 0 10px 26px rgba(55, 113, 166, .16);
}

.home-compact-study {
  --home-accent: #397fb5;
  --home-module-tint: #d6edff;
  --home-module-tint-end: #eaf6ff;
  --home-module-line: #b9daf5;
}

.home-compact-focus {
  --home-accent: #c76158;
  --home-module-tint: #ffd8d0;
  --home-module-tint-end: #ffebe5;
  --home-module-line: #f2bfb4;
}

.home-compact-plan {
  --home-accent: #7568aa;
  --home-module-tint: #e6dbff;
  --home-module-tint-end: #f1eaff;
  --home-module-line: #c8b8ee;
}

.home-compact-study .home-compact-region-head,
.home-compact-focus .home-compact-region-head,
.home-compact-plan .home-compact-region-head {
  border-radius: 14px;
  padding: 6px 8px;
  background: linear-gradient(90deg, var(--home-module-tint) 0%, var(--home-module-tint-end) 100%);
  border-bottom: 1px solid var(--home-module-line);
}

.home-compact-study .home-compact-region-title,
.home-compact-focus .home-compact-region-title,
.home-compact-plan .home-compact-region-title {
  background: transparent;
}

.home-compact-shell .learning-workbench-start-card,
.home-compact-shell .learning-workbench-resume {
  border-color: transparent;
  background: #f8fbff;
  box-shadow: none;
}

.home-compact-shell .quick-focus-preview-start,
.home-compact-shell .quick-focus-preview-start-panel,
.home-compact-shell .quick-focus-preview-active-form,
.home-compact-shell .quick-focus-preview-summary-form,
.home-compact-shell .quick-focus-preview-subpanel {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

@container home-shell (min-width: 761px) {
  .home-compact-shell[data-layout-state="study-wide"] .home-compact-focus,
  .home-compact-shell[data-layout-state="study-wide"] .home-compact-plan,
  .home-compact-shell[data-layout-state="focus-wide"] .home-compact-study,
  .home-compact-shell[data-layout-state="focus-wide"] .home-compact-plan,
  .home-compact-shell[data-layout-state="plan-wide"] .home-compact-study,
  .home-compact-shell[data-layout-state="plan-wide"] .home-compact-focus {
    display: grid;
    align-content: center;
  }

  .home-compact-shell[data-layout-state="study-wide"] .home-compact-focus .home-compact-region-head,
  .home-compact-shell[data-layout-state="study-wide"] .home-compact-plan .home-compact-region-head,
  .home-compact-shell[data-layout-state="focus-wide"] .home-compact-study .home-compact-region-head,
  .home-compact-shell[data-layout-state="focus-wide"] .home-compact-plan .home-compact-region-head,
  .home-compact-shell[data-layout-state="plan-wide"] .home-compact-study .home-compact-region-head,
  .home-compact-shell[data-layout-state="plan-wide"] .home-compact-focus .home-compact-region-head {
    align-items: center;
    flex-wrap: wrap;
  }

  .home-compact-shell[data-layout-state="study-wide"] .home-compact-focus .home-compact-region-title,
  .home-compact-shell[data-layout-state="study-wide"] .home-compact-plan .home-compact-region-title,
  .home-compact-shell[data-layout-state="focus-wide"] .home-compact-study .home-compact-region-title,
  .home-compact-shell[data-layout-state="focus-wide"] .home-compact-plan .home-compact-region-title,
  .home-compact-shell[data-layout-state="plan-wide"] .home-compact-study .home-compact-region-title,
  .home-compact-shell[data-layout-state="plan-wide"] .home-compact-focus .home-compact-region-title {
    padding: 4px;
  }
}

@container home-shell (max-width: 760px) {
  .home-compact-datebar {
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 60px;
    gap: 8px;
    padding: 8px 10px;
  }

  .home-compact-datebar::after {
    width: 76px;
    opacity: .22;
  }

  .home-compact-datebar:has(.home-standalone-import) {
    align-items: center;
    flex-wrap: nowrap;
    min-height: 60px;
    padding: 8px 10px;
  }

  .home-compact-datebar:has(.home-standalone-import)::after {
    right: 84px;
    width: 76px;
  }

  .home-compact-datebar > span {
    flex: 0 0 auto;
    padding-top: 5px;
  }

  .home-compact-datebar:has(.home-standalone-import) > span {
    padding-top: 0;
  }

  .home-standalone-import {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }

  .home-standalone-import-toggle {
    min-height: 44px;
  }

  .home-compact-region-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .home-compact-region-title {
    flex: 1 1 210px;
  }

  .home-compact-module-art {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .home-compact-region-copy > span {
    font-size: 17px;
  }

  .home-compact-shell[data-layout-state="study-wide"] :is(.home-compact-focus, .home-compact-plan) .home-compact-region-head,
  .home-compact-shell[data-layout-state="focus-wide"] :is(.home-compact-study, .home-compact-plan) .home-compact-region-head,
  .home-compact-shell[data-layout-state="plan-wide"] :is(.home-compact-study, .home-compact-focus) .home-compact-region-head {
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 4px 6px;
  }

  .home-compact-shell[data-layout-state="study-wide"] :is(.home-compact-focus, .home-compact-plan) .home-compact-region-title,
  .home-compact-shell[data-layout-state="focus-wide"] :is(.home-compact-study, .home-compact-plan) .home-compact-region-title,
  .home-compact-shell[data-layout-state="plan-wide"] :is(.home-compact-study, .home-compact-focus) .home-compact-region-title {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
  }

  .home-compact-shell[data-layout-state="study-wide"] :is(.home-compact-focus, .home-compact-plan) .home-compact-module-art,
  .home-compact-shell[data-layout-state="focus-wide"] :is(.home-compact-study, .home-compact-plan) .home-compact-module-art,
  .home-compact-shell[data-layout-state="plan-wide"] :is(.home-compact-study, .home-compact-focus) .home-compact-module-art {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .home-compact-shell[data-layout-state="study-wide"] :is(.home-compact-focus, .home-compact-plan) .home-compact-region-copy > span,
  .home-compact-shell[data-layout-state="focus-wide"] :is(.home-compact-study, .home-compact-plan) .home-compact-region-copy > span,
  .home-compact-shell[data-layout-state="plan-wide"] :is(.home-compact-study, .home-compact-focus) .home-compact-region-copy > span {
    font-size: 14px;
  }

  .home-compact-shell[data-layout-state="study-wide"] :is(.home-compact-focus, .home-compact-plan) .home-compact-region-title small,
  .home-compact-shell[data-layout-state="focus-wide"] :is(.home-compact-study, .home-compact-plan) .home-compact-region-title small,
  .home-compact-shell[data-layout-state="plan-wide"] :is(.home-compact-study, .home-compact-focus) .home-compact-region-title small {
    max-width: 8ch;
    font-size: 10px;
  }

  .home-compact-study .learning-workbench-resume {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .home-compact-study .learning-workbench-resume > div {
    flex-basis: calc(100% - 42px);
  }

  .home-compact-study .learning-workbench-resume > .btn {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-compact-datebar::after {
    animation: none;
  }
}