:root {
  --cream: #f7f3eb;
  --paper: rgba(255, 255, 255, 0.84);
  --white: #fff;
  --ink: #293c35;
  --muted: #7d8c85;
  --sage: #668c78;
  --sage-dark: #3f6f59;
  --sage-light: #dce8df;
  --mint: #edf4ee;
  --peach: #e9a887;
  --peach-light: #f7e7dd;
  --lavender: #8f8bb4;
  --lavender-light: #e8e6f1;
  --gold: #dbad50;
  --gold-light: #f8eed5;
  --line: rgba(58, 82, 70, 0.1);
  --shadow: 0 22px 60px rgba(72, 86, 76, 0.09);
  --radius: 26px;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}

/* 正式任务模板库、流程任务与家长审核 */
.task-template-picker { display: grid; gap: 12px; text-align: left; }
.template-picker-head, .parent-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.template-picker-head strong, .template-picker-head span { display: block; }
.template-picker-head strong { font-size: 13px; }
.template-picker-head span { margin-top: 3px; color: #8e8fa0; font-size: 9px; }
.template-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; }
.template-filters button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(74,61,110,.12); border-radius: 10px; color: #77788c; background: #f7f5fa; font-size: 8px; cursor: pointer; }
.template-filters button.active { color: white; background: #6d52a0; }
.template-grid { max-height: 390px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow-y: auto; padding: 2px; }
.task-template-card { min-width: 0; display: grid; grid-template-columns: 42px 1fr; gap: 9px; padding: 9px; border: 1px solid rgba(67,57,97,.1); border-radius: 14px; color: #2b2944; background: white; text-align: left; cursor: pointer; }
.task-template-card:hover { border-color: rgba(111,82,160,.38); background: #faf8fd; }
.task-template-card img { width: 42px; height: 42px; object-fit: contain; }
.task-template-card strong, .task-template-card small { display: block; }
.task-template-card strong { font-size: 10px; }
.task-template-card small { margin-top: 3px; color: #9999a8; font-size: 7px; line-height: 1.4; }
.task-template-card em { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #7254a3; font-size: 7px; font-style: normal; }
.task-template-card em b { color: #c08527; font-size: 8px; }
.task-custom-fields { display: flex; flex-direction: column; gap: 14px; }
.focus-checklist { display: grid; gap: 7px; margin: -8px auto 18px; width: min(320px, 100%); }
.focus-checklist button { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid rgba(70,58,104,.12); border-radius: 11px; color: #5d5d70; background: white; text-align: left; font-size: 9px; cursor: pointer; }
.focus-checklist button span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: #eee9f7; }
.focus-checklist button.done { color: #59417f; background: #f1edf8; }
.parent-profile-group { display: grid; gap: 8px; margin-bottom: 18px; }
.parent-profile-head { padding-bottom: 7px; border-bottom: 1px solid rgba(70,60,98,.1); }
.parent-profile-head span, .parent-empty { color: #9292a2; font-size: 9px; }
.parent-dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.parent-kid-card { padding: 13px; border: 1px solid rgba(78,65,110,.12); border-radius: 18px; background: linear-gradient(145deg, #fff, #f4f1f8); box-shadow: 0 12px 28px rgba(45,36,70,.06); }
.parent-kid-head { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.parent-kid-head .avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800; }
.parent-kid-head strong, .parent-kid-head small { display: block; }
.parent-kid-head strong { font-size: 12px; }
.parent-kid-head small { margin-top: 2px; color: #8d8e9e; font-size: 8px; }
.parent-kid-head > b { padding: 7px 9px; border-radius: 12px; color: #6b519c; background: #ebe4f6; font-size: 10px; }
.parent-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.parent-metrics span { padding: 8px; border-radius: 10px; color: #8c8d9a; background: rgba(255,255,255,.72); font-size: 8px; }
.parent-metrics b { display: block; margin-bottom: 2px; color: #2d2b45; font-size: 11px; }
.parent-kid-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.parent-kid-actions button { flex: 1; min-width: 72px; padding: 8px; border: 0; border-radius: 10px; color: #684c9a; background: #e8e1f2; font-size: 8px; font-weight: 800; cursor: pointer; }
.parent-behavior { display: grid; gap: 10px; margin-bottom: 20px; padding: 14px; border-radius: 18px; background: #fbf8f1; border: 1px solid rgba(197,151,65,.18); }
.behavior-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
.behavior-form label { min-width: 0; display: grid; gap: 4px; }
.behavior-form label span { color: #8f879c; font-size: 8px; }
.behavior-form input, .behavior-form select { width: 100%; min-height: 34px; border: 1px solid rgba(77,64,105,.12); border-radius: 10px; padding: 7px 9px; color: #2f2d45; background: white; font-size: 9px; }
.behavior-form .behavior-wide { grid-column: span 2; }
.behavior-form button, .behavior-row button { min-height: 34px; border: 0; border-radius: 10px; color: #fff; background: #6c519e; font-size: 8px; font-weight: 800; cursor: pointer; }
.behavior-open-list { display: grid; gap: 7px; }
.behavior-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: center; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.72); }
.behavior-row strong, .behavior-row span { display: block; }
.behavior-row strong { font-size: 10px; }
.behavior-row span { margin-top: 3px; color: #8f879c; font-size: 8px; }
.parent-review-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 7px; padding: 9px; border-radius: 12px; background: #f7f5fa; }
.parent-review-row strong, .parent-review-row span { display: block; }
.parent-review-row strong { font-size: 10px; }
.parent-review-row span { margin-top: 3px; color: #8f8f9f; font-size: 8px; }
.parent-review-row button { padding: 7px 9px; border: 0; border-radius: 9px; color: white; background: #6c519e; font-size: 8px; cursor: pointer; }
.parent-review-row button.neutral { color: #77788a; background: white; }

@media (max-width: 560px) {
  .template-grid { grid-template-columns: 1fr; }
  .parent-dashboard { grid-template-columns: 1fr; }
  .behavior-form { grid-template-columns: 1fr; }
  .behavior-form .behavior-wide { grid-column: auto; }
  .parent-review-row { grid-template-columns: 1fr 1fr; }
  .parent-review-row > div { grid-column: 1 / -1; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
}

button,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(3px);
  pointer-events: none;
  opacity: 0.45;
}

.ambient-one {
  width: 420px;
  height: 420px;
  background: rgba(216, 230, 218, 0.65);
  right: -130px;
  top: -120px;
}

.ambient-two {
  width: 360px;
  height: 360px;
  background: rgba(240, 218, 204, 0.45);
  left: 15%;
  bottom: -220px;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  position: relative;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 18% 18%, rgba(245, 190, 85, 0.2), transparent 32%),
    radial-gradient(circle at 82% 24%, rgba(116, 88, 171, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(21, 25, 52, 0.96), rgba(40, 32, 70, 0.94));
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

.login-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.login-card {
  width: min(540px, 100%);
  padding: 34px;
  border: 1px solid rgba(241, 199, 103, 0.28);
  border-radius: 34px;
  color: white;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)),
    rgba(19, 21, 44, 0.84);
  box-shadow: 0 32px 90px rgba(8, 10, 24, 0.42);
  backdrop-filter: blur(24px);
}

.login-logo {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 40px rgba(0, 0, 0, 0.28);
}

.login-logo img {
  width: 58px;
  height: 58px;
}

.login-card h1 {
  margin: 10px 0 10px;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -0.05em;
}

.login-card p {
  max-width: 420px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.8;
}

.login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.login-profile {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.login-profile:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 199, 103, 0.42);
  background: rgba(255, 255, 255, 0.13);
}

.login-profile.active {
  border-color: rgba(245, 199, 107, 0.72);
  background: rgba(245, 199, 107, 0.16);
  box-shadow: inset 0 0 0 1px rgba(245, 199, 107, 0.2);
}

.login-profile strong,
.login-profile small {
  display: block;
}

.login-profile small {
  color: rgba(255, 255, 255, 0.56);
}

.login-child-form,
.login-parent-form {
  display: grid;
  gap: 9px;
}

.login-child-form {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid rgba(245, 199, 107, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
}

.login-parent-form {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-child-form label,
.login-parent-form label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.login-child-form div,
.login-parent-form div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.login-child-form input,
.login-child-form button,
.login-parent-form input,
.login-parent-form button {
  border: 0;
  border-radius: 16px;
  font: inherit;
}

.login-child-form input,
.login-parent-form input {
  min-width: 0;
  padding: 13px 14px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  outline: 1px solid rgba(255, 255, 255, 0.1);
}

.login-child-form input::placeholder,
.login-parent-form input::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.login-child-form button,
.login-parent-form button {
  padding: 0 18px;
  color: #27213e;
  background: linear-gradient(145deg, #f5c76b, #db9d4f);
  font-weight: 900;
  cursor: pointer;
}

.login-child-form span,
.login-parent-form span {
  color: #ffd48b;
  font-size: 11px;
}

body.auth-locked .app-shell {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  padding: 34px 22px 24px;
  background: rgba(249, 247, 241, 0.9);
  border-right: 1px solid rgba(59, 83, 71, 0.08);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  padding: 0 9px;
}

.brand-mark {
  width: 43px;
  height: 43px;
  border-radius: 15px;
  background: var(--sage-dark);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(63, 111, 89, 0.2);
}

.brand-mark svg {
  width: 28px;
  fill: none;
  stroke: white;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 18px;
  letter-spacing: 0.04em;
}

.brand small {
  margin-top: 3px;
  color: #92a199;
  font-size: 7px;
  letter-spacing: 0.17em;
}

.main-nav {
  display: grid;
  gap: 7px;
  margin-top: 55px;
}

.nav-item {
  border: 0;
  background: transparent;
  padding: 11px 13px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 14px;
  font-weight: 500;
  color: #77877f;
  cursor: pointer;
  transition: 0.25s ease;
}

.nav-item:hover {
  color: var(--sage-dark);
  background: rgba(102, 140, 120, 0.07);
}

.nav-item.active {
  color: var(--sage-dark);
  background: #e8eee9;
  font-weight: 700;
}

.nav-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.nav-item.active .nav-icon {
  background: white;
  box-shadow: 0 4px 12px rgba(75, 99, 86, 0.08);
}

.nav-icon svg,
.notification svg,
.subtle-button svg,
.screen-icon svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon img,
.notification img,
.stars-pill img,
.coins-pill img,
.parent-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.sidebar-quote {
  margin-top: auto;
  padding: 23px 17px 18px;
  border-radius: 20px;
  background: #edf1ea;
  position: relative;
  overflow: hidden;
}

.sidebar-quote::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -18px;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(96, 131, 113, 0.14);
  border-radius: 50%;
}

.quote-leaf {
  display: block;
  width: 25px;
  height: 17px;
  margin-bottom: 13px;
  border-radius: 100% 0 100% 0;
  background: #94af9d;
  transform: rotate(-8deg);
}

.sidebar-quote p {
  margin: 0;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.sidebar-quote small {
  display: block;
  margin-top: 7px;
  color: #89978f;
  font-size: 10px;
}

.parent-entry {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 20px 7px 0;
  cursor: pointer;
}

.parent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: #87998e;
  font-size: 12px;
}

.parent-entry strong,
.parent-entry small {
  display: block;
}

.parent-entry strong {
  font-size: 12px;
}

.parent-entry small {
  color: #98a49e;
  font-size: 9px;
  margin-top: 2px;
}

.chevron {
  margin-left: auto;
  color: #9da8a2;
  font-size: 19px;
}

.main-content {
  grid-column: 2;
  min-width: 0;
  padding-bottom: 60px;
}

.topbar {
  height: 96px;
  display: flex;
  align-items: center;
  padding: 0 clamp(28px, 5vw, 74px);
  border-bottom: 1px solid rgba(59, 83, 71, 0.06);
}

.date-block strong,
.date-block span {
  display: block;
}

.eyebrow {
  color: #9aa69f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.date-block strong {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 16px;
  margin-top: 4px;
}

.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 13px;
}

.environment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(112, 101, 140, 0.12);
  border-radius: 999px;
  color: #756a8c;
  background: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.login-environment-badge {
  margin-bottom: 10px;
  color: rgba(255, 232, 180, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(245, 199, 107, 0.24);
}

body[data-runtime-env="cloudflare"] .environment-badge {
  color: #4d3e94;
  background: rgba(120, 99, 210, 0.13);
  border-color: rgba(120, 99, 210, 0.18);
}

body[data-runtime-env="netlify"] .environment-badge {
  color: #7c5f24;
  background: rgba(245, 199, 107, 0.2);
  border-color: rgba(245, 199, 107, 0.24);
}

.stars-pill {
  height: 43px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 128px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--gold-light);
  color: #9b7531;
}

.stars-pill svg {
  width: 18px;
  fill: #e1b251;
  stroke: #c28f31;
  stroke-width: 0.8;
}

.stars-pill strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stars-pill span {
  font-size: 10px;
}

.coins-pill {
  height: 43px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 104px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(120, 99, 210, 0.16);
  color: #5b4aa8;
}

.coins-pill img {
  width: 18px;
  height: 18px;
}

.coins-pill strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.coins-pill span {
  font-size: 10px;
}

.notification {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
}

.notification i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--peach);
  right: 10px;
  top: 9px;
}

.profile-switcher {
  position: relative;
}

.logout-button {
  border: 0;
  border-radius: 14px;
  padding: 10px 13px;
  color: #70658c;
  background: #f1edf7;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

body[data-session-role="child"] .profile-switcher {
  display: none;
}

.profile-button {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 126px;
  text-align: left;
  cursor: pointer;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
}

.avatar-mila {
  background: linear-gradient(145deg, #73799d, #a29bc1);
}

.avatar-bella {
  background: linear-gradient(145deg, #d98d73, #edb694);
}

.profile-button strong,
.profile-button small {
  display: block;
}

.profile-button strong {
  font-size: 13px;
}

.profile-button small {
  margin-top: 2px;
  color: #99a49f;
  font-size: 9px;
}

.down {
  margin-left: auto;
  color: #87948e;
}

.profile-menu {
  position: absolute;
  right: 0;
  top: 51px;
  width: 220px;
  padding: 8px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 20px 55px rgba(43, 61, 52, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: 0.2s ease;
  z-index: 50;
}

.profile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.profile-menu button:hover {
  background: var(--mint);
}

.profile-menu strong,
.profile-menu small {
  display: block;
}

.profile-menu strong {
  font-size: 12px;
}

.profile-menu small {
  margin-top: 3px;
  color: #9aa69f;
  font-size: 9px;
}

.profile-menu .avatar {
  width: 35px;
  height: 35px;
  border-radius: 12px;
  font-size: 12px;
}

.mobile-menu {
  display: none;
}

.view {
  display: none;
  padding: 49px clamp(28px, 5vw, 74px) 0;
  animation: fadeIn 0.35s ease;
}

.view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.welcome-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 35px;
}

.welcome-row h1,
.page-title h1 {
  margin: 5px 0 8px;
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.welcome-row h1 span {
  color: var(--sage-dark);
}

.welcome-row p,
.page-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.welcome-row p strong {
  color: var(--peach);
}

.day-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #89968f;
  font-size: 10px;
}

.progress-ring {
  width: 68px;
  height: 68px;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(var(--sage) var(--progress, 33%), #e3e8e3 0);
  transition: background 0.5s ease;
}

.progress-ring > div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--cream);
  display: grid;
  place-content: center;
  text-align: center;
}

.progress-ring strong {
  font-size: 13px;
}

.progress-ring small {
  color: #98a29d;
  font-size: 7px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(500px, 1.55fr) minmax(300px, 0.82fr);
  gap: 23px;
  align-items: start;
}

.card {
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
}

.tasks-panel {
  padding: 31px 30px 25px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-heading h2,
.section-heading h3 {
  margin: 5px 0 0;
  font-family: "Noto Sans SC", sans-serif;
}

.section-heading h2 {
  font-size: 19px;
}

.section-heading h3 {
  font-size: 15px;
}

.section-heading.compact {
  align-items: flex-start;
}

.subtle-button {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.55);
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #849189;
  font-size: 10px;
  cursor: pointer;
}

.subtle-button svg {
  width: 14px;
}

.timeline {
  margin-top: 28px;
}

.task-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 13px;
  position: relative;
}

.task-row:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: #dfe6e1;
}

.task-marker {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid #d6dfd9;
  background: #fbfcfa;
  z-index: 1;
  margin-top: 17px;
  color: white;
  font-size: 13px;
  transition: 0.3s ease;
}

.task-row.completed .task-marker {
  border-color: var(--sage);
  background: var(--sage);
}

/* 进行中 / 部分完成：标记点高亮，提示仍可继续 */
.task-row.in_progress .task-marker,
.task-row.partial .task-marker {
  border-color: #c8a24a;
  background: #f4e7c6;
  color: #9b7531;
}

.task-row.partial .task-card,
.task-row.in_progress .task-card {
  border-color: rgba(200, 162, 74, 0.4);
  background: rgba(252, 248, 238, 0.85);
}

.task-row.partial .task-meta span:first-child,
.task-row.in_progress .task-meta span:first-child {
  color: #9b7531;
  font-weight: 600;
}

.task-card {
  min-height: 80px;
  margin-bottom: 12px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 17px;
  border: 1px solid rgba(54, 78, 66, 0.08);
  background: rgba(255, 255, 255, 0.68);
  transition: 0.25s ease;
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(65, 84, 74, 0.07);
}

.task-row.completed .task-card {
  opacity: 0.62;
  background: rgba(238, 243, 238, 0.7);
}

.task-row.completed .task-title {
  text-decoration: line-through;
  text-decoration-color: #9aac9f;
}

.subject-icon {
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 600;
}

.math { background: var(--lavender-light); color: #77739d; }
.chinese { background: var(--peach-light); color: #b77759; }
.english { background: var(--mint); color: #57846c; }
.piano { background: var(--gold-light); color: #a98139; }
.ballet { background: #f4e5eb; color: #a96e83; }
.art { background: #e3eff1; color: #5f8f96; }

.task-info {
  min-width: 0;
}

.task-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  transition: 0.2s ease;
}

.task-meta {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  color: #9aa59f;
  font-size: 9px;
}

.task-meta span + span::before {
  content: "·";
  margin-right: 10px;
}

.task-points {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 10px;
}

.task-point {
  min-width: 39px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.task-point i,
.task-point em {
  font-style: normal;
}

.task-point b {
  font-size: 10px;
}

.task-point-energy {
  color: #9a6f1f;
  background: linear-gradient(135deg, rgba(255, 243, 196, 0.95), rgba(246, 215, 132, 0.65));
  border: 1px solid rgba(207, 156, 55, 0.24);
}

.task-point-energy i {
  color: var(--gold);
}

.task-point-coins {
  color: #6150a5;
  background: rgba(120, 99, 210, 0.12);
  border: 1px solid rgba(120, 99, 210, 0.16);
}

.task-start {
  margin-left: 7px;
  border: 0;
  border-radius: 11px;
  background: #e8f0ea;
  color: var(--sage-dark);
  padding: 8px 11px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.task-row.completed .task-start {
  display: none;
}

.add-task {
  width: calc(100% - 43px);
  margin-left: 43px;
  height: 47px;
  border: 1px dashed #ced9d2;
  border-radius: 14px;
  color: #8b9991;
  background: rgba(247, 249, 246, 0.55);
  cursor: pointer;
  font-size: 10px;
}

.add-task span {
  font-size: 17px;
  vertical-align: -1px;
  margin-right: 5px;
}

.right-column {
  display: grid;
  gap: 17px;
}

.classroom-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 211, 120, 0.22), transparent 30%),
    linear-gradient(135deg, #202341 0%, #29234a 58%, #332547 100%);
  color: white;
  overflow: hidden;
}

.classroom-card .eyebrow,
.classroom-card p {
  color: rgba(255, 255, 255, 0.68);
}

.classroom-card h3 {
  margin: 5px 0 5px;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 17px;
}

.classroom-card p {
  margin: 0 0 7px;
  line-height: 1.55;
  font-size: 10px;
}

.classroom-icon {
  width: 47px;
  height: 47px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.classroom-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.classroom-reward {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffd76f;
  font-size: 9px;
  font-weight: 800;
}

.classroom-card .round-button {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border-color: rgba(255, 255, 255, 0.25);
}

.focus-card {
  padding: 26px 25px 24px;
  overflow: hidden;
}

.focus-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.focus-top h3 {
  margin: 5px 0 0;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 15px;
}

.time-badge {
  padding: 7px 9px;
  border-radius: 9px;
  color: #6f8378;
  background: var(--mint);
  font-size: 9px;
}

.focus-visual {
  height: 130px;
  width: 190px;
  margin: 8px auto 3px;
  position: relative;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(114, 143, 127, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.orbit-one { width: 155px; height: 92px; }
.orbit-two { width: 112px; height: 112px; }

.focus-plant {
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 70px;
  height: 90px;
  transform: translateX(-50%);
}

.stem {
  position: absolute;
  width: 3px;
  height: 53px;
  bottom: 0;
  left: 34px;
  border-radius: 3px;
  background: #668c78;
}

.leaf {
  position: absolute;
  width: 31px;
  height: 18px;
  background: #9eb9a8;
}

.leaf-left {
  left: 6px;
  bottom: 29px;
  border-radius: 100% 0 100% 0;
  transform: rotate(15deg);
}

.leaf-right {
  right: 4px;
  bottom: 42px;
  border-radius: 0 100% 0 100%;
  transform: rotate(-15deg);
}

.bud {
  position: absolute;
  width: 24px;
  height: 31px;
  left: 24px;
  top: 6px;
  border-radius: 60% 60% 45% 45%;
  background: #e3ad8f;
  box-shadow: -11px 5px 0 -4px #f0c7b0, 11px 5px 0 -4px #f0c7b0;
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  50% { transform: scale(1.07) translateY(-2px); }
}

.focus-star {
  position: absolute;
  color: #d4b06b;
}

.star-a { left: 22px; top: 35px; font-size: 13px; }
.star-b { right: 21px; top: 21px; font-size: 22px; }
.star-c { right: 9px; bottom: 30px; font-size: 8px; }

.focus-card > p {
  color: #89968f;
  font-size: 10px;
  line-height: 1.8;
  text-align: center;
  max-width: 260px;
  margin: 0 auto 17px;
}

.primary-button {
  border: 0;
  border-radius: 14px;
  background: var(--sage-dark);
  color: white;
  font-weight: 600;
  padding: 12px 19px;
  cursor: pointer;
  box-shadow: 0 9px 18px rgba(63, 111, 89, 0.16);
  transition: 0.2s ease;
}

.primary-button:hover {
  background: #345f4b;
  transform: translateY(-1px);
}

.focus-card .primary-button {
  width: 100%;
  font-size: 11px;
}

.play-icon {
  font-size: 8px;
  margin-right: 8px;
}

.garden-card {
  padding: 24px 24px 19px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--sage);
  font-size: 9px;
  cursor: pointer;
}

.text-button span {
  margin-left: 5px;
}

.mini-garden {
  height: 110px;
  margin-top: 14px;
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  background: linear-gradient(#e8eeeb, #f5eee4);
}

.sky-dots {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #d3b87d;
  border-radius: 50%;
  left: 22px;
  top: 20px;
  box-shadow: 40px -5px #d6c28e, 82px 8px #c5d3c8, 180px 0 #d6c28e, 221px 16px #c5d3c8;
}

.hill {
  position: absolute;
  border-radius: 50% 50% 0 0;
}

.hill-back {
  width: 200px;
  height: 75px;
  left: -35px;
  bottom: -35px;
  background: #cddbcf;
}

.hill-front {
  width: 220px;
  height: 72px;
  right: -55px;
  bottom: -40px;
  background: #a9c0ad;
}

.tree {
  position: absolute;
  left: 53%;
  bottom: 17px;
  width: 67px;
  height: 74px;
}

.tree-trunk {
  position: absolute;
  left: 31px;
  bottom: 0;
  width: 7px;
  height: 40px;
  border-radius: 5px;
  background: #8a6b50;
}

.tree-crown {
  position: absolute;
  border-radius: 50%;
  background: #6e987d;
}

.crown-one { width: 42px; height: 42px; left: 13px; top: 7px; }
.crown-two { width: 32px; height: 32px; left: 0; top: 22px; background: #82a48c; }
.crown-three { width: 35px; height: 35px; right: 0; top: 19px; background: #91ad98; }

.flower {
  position: absolute;
  bottom: 20px;
  width: 18px;
  height: 30px;
}

.flower::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 20px;
  left: 8px;
  bottom: 0;
  background: #6c967b;
}

.flower i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 8px 1px 8px 1px;
  background: #dea58d;
  z-index: 1;
}

.flower i:nth-child(1) { left: 1px; top: 1px; transform: rotate(-18deg); }
.flower i:nth-child(2) { right: 1px; top: 1px; transform: rotate(105deg); }
.flower i:nth-child(3) { left: 5px; top: -4px; transform: rotate(45deg); }
.flower b { position: absolute; left: 6px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #d2a851; z-index: 2; }
.flower-one { left: 20px; }
.flower-two { left: 50px; bottom: 13px; transform: scale(0.8); }
.flower-three { right: 19px; bottom: 12px; transform: scale(0.75); }

.garden-label {
  position: absolute;
  left: 14px;
  top: 11px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 8px;
  color: #72847a;
}

.screen-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
}

.screen-icon {
  flex: 0 0 auto;
  width: 41px;
  height: 41px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--lavender-light);
  color: #77739d;
}

.screen-copy h3 {
  margin: 3px 0;
  font-size: 12px;
}

.screen-copy h3 strong {
  color: #716d99;
}

.screen-copy p {
  margin: 0;
  color: #9ca6a1;
  font-size: 8px;
}

.round-button {
  flex: 0 0 auto;
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: white;
  color: #89978f;
  cursor: pointer;
}

.page-title {
  margin-bottom: 30px;
}

.garden-scene {
  min-height: 560px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #dae7e2 0%, #eef0e7 51%, #d8cfb7 100%);
}

.garden-sun {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  right: 9%;
  top: 55px;
  background: rgba(248, 226, 173, 0.8);
  box-shadow: 0 0 0 25px rgba(248, 226, 173, 0.12);
}

.cloud {
  position: absolute;
  width: 110px;
  height: 28px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.42);
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud::before { width: 43px; height: 43px; left: 17px; bottom: 3px; }
.cloud::after { width: 55px; height: 55px; right: 14px; bottom: 0; }
.cloud-one { left: 7%; top: 70px; }
.cloud-two { right: 28%; top: 125px; transform: scale(0.68); opacity: 0.75; }

.scene-copy {
  position: absolute;
  z-index: 4;
  left: 7%;
  top: 160px;
  width: 230px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(10px);
}

.scene-copy span {
  color: #798b81;
  font-size: 10px;
}

.scene-copy strong {
  display: block;
  font-size: 36px;
  color: var(--sage-dark);
  margin: 4px 0;
}

.scene-copy p {
  margin: 0;
  color: #7e8e85;
  line-height: 1.7;
  font-size: 10px;
}

.garden-ground {
  position: absolute;
  left: -7%;
  right: -7%;
  bottom: -180px;
  height: 420px;
  border-radius: 50% 50% 0 0;
  background: #789b7e;
  box-shadow: inset 0 35px 60px rgba(255, 255, 255, 0.08);
}

.big-tree {
  position: absolute;
  z-index: 2;
  width: 280px;
  height: 360px;
  left: 50%;
  bottom: 75px;
  transform: translateX(-20%);
}

.big-trunk {
  position: absolute;
  left: 130px;
  bottom: 0;
  width: 45px;
  height: 210px;
  border-radius: 45% 45% 15px 15px;
  background: linear-gradient(90deg, #795b46, #9b7658 50%, #74533f);
  transform: rotate(2deg);
}

.big-trunk::before,
.big-trunk::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 130px;
  border-radius: 20px;
  background: #87664e;
  top: -45px;
}

.big-trunk::before { left: -28px; transform: rotate(-30deg); }
.big-trunk::after { right: -26px; transform: rotate(31deg); }

.canopy {
  position: absolute;
  border-radius: 50%;
  background: #4f7e60;
  box-shadow: inset 15px 12px 0 rgba(255,255,255,.05);
}

.canopy-a { width: 160px; height: 150px; left: 55px; top: 15px; }
.canopy-b { width: 140px; height: 130px; left: 0; top: 80px; background: #638e6d; }
.canopy-c { width: 150px; height: 140px; right: 0; top: 75px; background: #719777; }
.canopy-d { width: 120px; height: 110px; left: 85px; top: 115px; background: #5b8667; }

.fruit {
  position: absolute;
  z-index: 3;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #dfac72;
  box-shadow: 0 3px 6px rgba(78, 62, 43, 0.15);
}

.fruit-a { left: 70px; top: 96px; }
.fruit-b { right: 56px; top: 126px; }
.fruit-c { left: 148px; top: 46px; }

.subject-plot {
  position: absolute;
  z-index: 5;
  width: 145px;
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 25px rgba(52, 74, 59, 0.12);
}

.subject-plot > span {
  float: left;
  width: 34px;
  height: 34px;
  margin-right: 9px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--lavender-light);
  color: #747198;
  font-weight: 700;
}

.subject-plot strong,
.subject-plot small {
  display: block;
}

.subject-plot strong { font-size: 11px; margin-top: 2px; }
.subject-plot small { font-size: 7px; color: #8c9992; margin-top: 3px; }
.plot-math { right: 8%; bottom: 85px; }
.plot-music { left: 7%; bottom: 45px; }
.plot-art { right: 27%; bottom: 20px; }
.plot-music > span { background: var(--gold-light); color: #a37e38; }
.plot-art > span { background: #e5eff0; color: #628c91; }

.rewards-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.wallet {
  min-width: 190px;
  padding: 16px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 16% 12%, rgba(244, 207, 120, .18), transparent 34%),
    linear-gradient(145deg, #242946, #171b34);
  border: 1px solid rgba(244, 207, 120, .18);
  box-shadow: 0 22px 50px rgba(23, 27, 52, .18);
}

.wallet-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .07);
}

.wallet-line > span {
  color: #b7bad1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.wallet strong {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #f4cf78;
  font-size: 24px;
  margin-top: 0;
  line-height: 1;
}

.wallet i {
  color: var(--gold);
  font-style: normal;
  font-size: 17px;
}

.wallet-line + .wallet-line {
  margin-top: 10px;
}

.wallet-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.wallet-energy strong {
  font-size: 18px;
  color: #f4cf78;
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 18px;
}

.reward-card {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.reward-card.featured {
  background: #edf3ed;
}

.reward-tag {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 5px 8px;
  background: var(--sage-dark);
  color: white;
  border-radius: 8px;
  font-size: 7px;
}

.reward-illustration {
  height: 130px;
  position: relative;
  margin-bottom: 16px;
  border-radius: 17px;
  background: #eef0ea;
  overflow: hidden;
}

.tablet-art {
  background: linear-gradient(145deg, #dce5e1, #eef0e8);
}

.tablet-art span {
  position: absolute;
  width: 83px;
  height: 105px;
  border-radius: 12px;
  background: #536b62;
  border: 5px solid #364c44;
  left: 50%;
  top: 13px;
  transform: translateX(-50%) rotate(5deg);
  box-shadow: 8px 11px 20px rgba(45,66,56,.18);
}

.tablet-art span::after {
  content: "10:00";
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(150deg, #769384, #bea884);
  font-size: 17px;
  font-weight: 600;
}

.dessert-art { background: #f4e9df; }
.dessert-art span {
  position: absolute;
  width: 90px;
  height: 55px;
  border-radius: 8px 8px 25px 25px;
  background: #d6a274;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
}
.dessert-art span::before {
  content: "";
  position: absolute;
  width: 84px;
  height: 45px;
  border-radius: 50%;
  background: #f1c8b5;
  left: 3px;
  top: -20px;
  box-shadow: inset 0 8px #fff0e6;
}
.dessert-art i {
  position: absolute;
  width: 9px;
  height: 18px;
  border-radius: 8px;
  background: #d75e55;
  left: 50%;
  top: 29px;
  z-index: 2;
}

.bedtime-art { background: #e7e7f1; }
.bedtime-art span {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #d6bf7a;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
}
.bedtime-art span::after {
  content: "";
  position: absolute;
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background: #e7e7f1;
  left: 21px;
  top: -11px;
}
.bedtime-art i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8c89ab;
  left: 32px;
  top: 30px;
  box-shadow: 120px 18px #8c89ab, 23px 70px #aaa6c3, 103px 72px #aaa6c3;
}

.family-art { background: #e5efe9; }
.family-art span,
.family-art i,
.family-art b {
  position: absolute;
  bottom: 25px;
  width: 42px;
  height: 58px;
  border-radius: 22px 22px 13px 13px;
  background: #75917f;
}
.family-art span { left: calc(50% - 58px); }
.family-art i { left: calc(50% + 17px); background: #d19375; }
.family-art b { width: 35px; height: 46px; left: calc(50% - 17px); background: #9a91b0; }
.family-art span::before,
.family-art i::before,
.family-art b::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d9aa8b;
  left: 7px;
  top: -14px;
}
.family-art b::before { width: 24px; height: 24px; left: 5px; }

.reward-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
}

.reward-card p {
  min-height: 30px;
  margin: 0 0 15px;
  color: #8d9992;
  font-size: 9px;
  line-height: 1.6;
}

.reward-card button {
  width: 100%;
  border: 0;
  border-radius: 11px;
  background: #edf1ed;
  padding: 10px;
  color: var(--sage-dark);
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
}

.reward-card.featured button {
  background: var(--sage-dark);
  color: white;
}

.reward-card button span {
  margin-right: 7px;
  color: #c79840;
}

/* ——— 第三步：补给站经济 UI ——— */

.reward-card .wish-btn {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: #c98aa6;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(80, 60, 70, 0.12);
  z-index: 2;
}

.reward-card .wish-btn.on {
  background: #f4dbe6;
  color: #c0477e;
}

.reward-meta {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
}

.rarity-tag,
.approval-tag {
  font-size: 8px;
  padding: 3px 7px;
  border-radius: 7px;
  background: #eef1ed;
  color: #75857c;
}

.rarity-tag.rarity-fine { background: #e3edf7; color: #4f76a8; }
.rarity-tag.rarity-rare { background: #efe6f9; color: #7a55a8; }
.rarity-tag.rarity-magic { background: #f9ecd9; color: #b67d2a; }
.approval-tag { background: #f6e9d6; color: #b07d2c; }
.wallet-frozen {
  border-color: rgba(244, 207, 120, .18);
  background:
    linear-gradient(145deg, rgba(244, 207, 120, .13), rgba(255, 255, 255, .045));
}

.wallet-frozen strong {
  color: #ffd979;
}

.reward-buy:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.savings-goal,
.pending-list,
.wishlist-panel,
.ledger-panel {
  margin-bottom: 18px;
}

.savings-goal:empty,
.pending-list:empty,
.wishlist-panel:empty,
.ledger-panel:empty {
  display: none;
}

.savings-goal.active {
  padding: 18px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f3ecff, #eef5ee);
  border: 1px solid rgba(120, 99, 210, 0.18);
}

.savings-head,
.pending-head,
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.savings-head small,
.pending-head small {
  color: #8d9992;
  font-size: 8px;
}

.savings-goal h3 { margin: 4px 0 10px; font-size: 13px; }
.savings-goal p { margin: 8px 0 0; font-size: 9px; color: #6f7d8a; }

.savings-bar {
  height: 12px;
  border-radius: 8px;
  background: rgba(120, 99, 210, 0.14);
  overflow: hidden;
}

.savings-bar i {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #9b7bd4, #c8a24a);
  transition: width 0.4s ease;
}

.savings-clear,
.wish-goal {
  border: 1px solid #d9d2ec;
  background: transparent;
  color: #7a6bb0;
  border-radius: 9px;
  padding: 5px 10px;
  font-size: 8px;
  cursor: pointer;
}

.wish-goal.on {
  background: #ece4fb;
  border-color: transparent;
}

.pending-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fbf6ec;
  border: 1px solid rgba(200, 162, 74, 0.3);
  margin-bottom: 8px;
}

.pending-info strong { display: block; font-size: 11px; }
.pending-info span { font-size: 9px; color: #9b7531; }

.pending-actions { display: flex; gap: 8px; flex-shrink: 0; }

.pending-approve,
.pending-reject {
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}

.pending-approve { background: var(--sage-dark); color: #fff; }
.pending-reject { background: #f0e3e3; color: #a8615b; }

.wish-items {
  display: grid;
  gap: 8px;
}

.wish-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(54, 78, 66, 0.08);
}

.wish-item strong { font-size: 11px; }
.wish-item span { display: block; font-size: 8px; color: #8d9992; }

.ledger-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.ledger-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 9px;
}

.ledger-name { color: #50605a; }
.ledger-amount { color: #a8615b; font-weight: 600; }
.ledger-refunded .ledger-amount { color: #4f8a63; }
.ledger-list small { color: #9aa6a0; font-size: 8px; }

.review-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  margin-top: 34px;
}

.stats-card,
.reflection-card {
  padding: 30px;
}

.week-score {
  color: var(--sage-dark);
  font-size: 28px;
  font-weight: 700;
}

.bars {
  height: 290px;
  margin-top: 24px;
  padding-top: 15px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  border-bottom: 1px solid #dbe2dd;
  background: repeating-linear-gradient(to top, transparent 0, transparent 67px, rgba(74, 96, 84, 0.06) 68px);
}

.bars > div {
  height: 100%;
  width: 34px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 9px;
}

.bars i {
  display: block;
  width: 22px;
  height: var(--height);
  border-radius: 10px 10px 3px 3px;
  background: #b9cbbd;
  transition: height .5s ease;
}

.bars .current i {
  background: var(--sage);
}

.bars span {
  color: #8f9c95;
  font-size: 9px;
  transform: translateY(25px);
}

/* ——— 成长报告（Step 4：时间结构环 / 日历 / 计划对比 / 收获） ——— */

.structure-card,
.week-card,
.month-card,
.plan-card,
.earnings-card,
.habit-card {
  padding: 30px;
}

.month-card,
.plan-card,
.earnings-card,
.habit-card {
  margin-top: 22px;
}

.earnings-card {
  margin-bottom: 34px;
}

.donut-wrap {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.donut {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: conic-gradient(#e7e3f2 0 100%);
}

.donut-center {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(123, 110, 160, .08);
}

.donut-center strong {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.donut-center small {
  margin-top: 4px;
  font-size: 11px;
  color: #8f88a3;
}

.donut-legend {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.legend-label {
  color: var(--ink);
  font-weight: 600;
}

.legend-val {
  margin-left: auto;
  color: #8f88a3;
}

.legend-empty {
  font-size: 12px;
  color: #9b94ad;
  line-height: 1.7;
}

.status-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.status-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
}

.status-gold { background: #d8b24a; }
.status-purple { background: #9b7ed0; }
.status-blue { background: #6f93d6; }
.status-gray { background: #c3bdd0; }

.month-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.month-head {
  text-align: center;
  font-size: 10px;
  color: #9b94ad;
  padding-bottom: 4px;
}

.month-cell {
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}

.month-cell.empty {
  background: transparent;
  cursor: default;
}

.month-cell.status-gray {
  color: #8f88a3;
}

.month-cell.has-data:hover {
  transform: translateY(-2px);
}

.month-cell.today {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sage, #7fae8e);
}

.month-cell.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink, #4a4060);
}

.day-detail {
  margin-top: 22px;
  border-top: 1px solid #ece8f4;
  padding-top: 18px;
}

.day-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.day-detail-head strong {
  font-size: 14px;
  color: var(--ink);
}

.day-detail-stats {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.day-detail-stats div {
  display: flex;
  flex-direction: column;
}

.day-detail-stats b {
  font-size: 18px;
  color: var(--ink);
}

.day-detail-stats span {
  font-size: 10px;
  color: #9b94ad;
  margin-top: 2px;
}

.day-empty {
  font-size: 12px;
  color: #9b94ad;
}

.plan-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 7px;
}

.plan-name { color: var(--ink); font-weight: 600; }
.plan-val { color: #8f88a3; }

.plan-track {
  height: 10px;
  border-radius: 999px;
  background: #ece8f4;
  overflow: hidden;
}

.plan-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}

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

.earn-cell {
  background: rgba(248, 246, 252, .8);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
}

.earn-cell b {
  display: block;
  font-size: 22px;
  color: var(--ink);
}

.earn-cell span {
  font-size: 10px;
  color: #9b94ad;
}

.habit-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.habit-cell {
  padding: 16px 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 12%, rgba(242,189,77,.16), transparent 38%),
    linear-gradient(145deg, #fbf8f0, #f3eef9);
  border: 1px solid rgba(126,104,166,.1);
}

.habit-cell b,
.habit-cell span {
  display: block;
}

.habit-cell b {
  color: var(--ink);
  font-size: 21px;
}

.habit-cell span {
  margin-top: 5px;
  color: #918aa4;
  font-size: 10px;
}

@media (max-width: 720px) {
  .earnings-grid { grid-template-columns: repeat(2, 1fr); }
  .habit-grid { grid-template-columns: repeat(2, 1fr); }
  .donut-wrap { justify-content: center; }
}

.reflection-card label {
  display: block;
  margin: 32px 0 10px;
  color: #687b71;
  font-size: 11px;
  font-weight: 600;
}

.reflection-card textarea {
  width: 100%;
  height: 150px;
  resize: none;
  border: 1px solid #dce4de;
  outline: none;
  border-radius: 16px;
  padding: 16px;
  color: var(--ink);
  background: rgba(248, 250, 247, .8);
  font-size: 11px;
  line-height: 1.7;
}

.reflection-card textarea:focus {
  border-color: #9bb5a6;
}

.reflection-card .primary-button {
  width: 100%;
  margin-top: 15px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(39, 54, 47, 0.38);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
}

.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.focus-modal {
  width: min(460px, 100%);
  position: relative;
  padding: 36px 38px 34px;
  border-radius: 30px;
  background: #f9f6ef;
  box-shadow: 0 35px 90px rgba(31, 48, 40, 0.22);
  text-align: center;
  transform: translateY(20px) scale(.97);
  transition: .3s ease;
}

.modal-backdrop.open .focus-modal {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  right: 20px;
  top: 17px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #e9eee9;
  color: #718179;
  font-size: 20px;
  cursor: pointer;
}

.focus-modal h2 {
  margin: 7px 0 4px;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 23px;
}

/* ——— 第五步：任务编辑弹窗 + 院长确认面板 + 待确认行 ——— */

.task-modal {
  width: min(480px, 100%);
  position: relative;
  padding: 32px 34px 30px;
  border-radius: 28px;
  background: #f9f6ef;
  box-shadow: 0 35px 90px rgba(31, 48, 40, 0.22);
  transform: translateY(20px) scale(.97);
  transition: .3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-backdrop.open .task-modal {
  transform: translateY(0) scale(1);
}

.task-modal h2 {
  margin: 7px 0 18px;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 22px;
}

.task-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.form-row {
  display: flex;
  gap: 14px;
}

.form-row .form-field {
  flex: 1;
}

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

.form-field > span {
  font-size: 11px;
  font-weight: 600;
  color: #687b71;
}

.form-field input,
.form-field select {
  width: 100%;
  border: 1px solid #dce4de;
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13px;
  color: var(--ink);
  background: rgba(252, 253, 251, .9);
  outline: none;
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--sage, #7fae8e);
}

.form-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #54635b;
  padding: 4px 2px;
}

.form-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--sage, #7fae8e);
}

.task-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}

.ghost-button {
  border: 1px solid #d8c0c0;
  background: transparent;
  color: #b06b6b;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
}

.ghost-button:hover {
  background: rgba(176, 107, 107, .08);
}

/* 院长确认面板 */
.approval-panel {
  margin-bottom: 22px;
  border: 1px solid rgba(201, 162, 74, 0.35);
  background: linear-gradient(180deg, rgba(252, 247, 235, .95), rgba(249, 246, 239, .95));
}

.approval-count {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #c8a24a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.approval-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approval-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ece6d6;
}

.approval-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.approval-info strong {
  font-size: 14px;
  color: var(--ink);
}

.approval-info span {
  font-size: 11px;
  color: #9b8f73;
}

.approval-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.approval-actions .primary-button {
  padding: 9px 15px;
  font-size: 12px;
}

.approval-actions .ghost-button {
  padding: 9px 13px;
  font-size: 12px;
}

/* 待院长确认的任务行 */
.task-row.awaiting .task-marker {
  border-color: #c8a24a;
  background: #f4e7c6;
  color: #9b7531;
}

.task-row.awaiting .task-card {
  border-color: rgba(200, 162, 74, 0.4);
  background: rgba(252, 248, 238, 0.7);
}

.task-row.awaiting .task-meta span:first-child {
  color: #9b7531;
  font-weight: 600;
}

.task-row:not(.completed):not(.awaiting) .task-card {
  cursor: pointer;
}

/* 管理模式：提示可编辑 */
#taskList.arranging .task-row {
  cursor: pointer;
}

#taskList.arranging .task-card {
  outline: 1.5px dashed rgba(127, 174, 142, 0.6);
  outline-offset: 2px;
}

#taskList.arranging .task-start {
  pointer-events: none;
  opacity: .45;
}

.task-order-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.task-order-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  color: #5f4fa2;
  background: #eee7fb;
  font-size: 16px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(110, 91, 170, .14);
  cursor: pointer;
}

.task-order-button:disabled {
  opacity: .32;
  cursor: not-allowed;
}

.task-order-button.danger {
  color: #a84848;
  background: #f8e7e7;
}

.task-order-button.locked {
  color: #8b8795;
  background: #eeedf3;
  font-size: 11px;
  cursor: help;
}

#arrangeButton.active {
  color: #fff;
  background: #6f54b8;
  box-shadow: 0 12px 24px rgba(87, 67, 150, .2);
}

.focus-modal > p {
  margin: 0;
  color: #89958e;
  font-size: 10px;
}

.timer-wrap {
  width: 240px;
  height: 240px;
  margin: 22px auto;
  position: relative;
}

.timer-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-track,
.timer-progress {
  fill: none;
  stroke-width: 5;
}

.timer-track {
  stroke: #e3e8e3;
}

.timer-progress {
  stroke: var(--sage);
  stroke-linecap: round;
  stroke-dasharray: 603;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.timer-time {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
}

.timer-time strong {
  font-size: 42px;
  letter-spacing: -0.04em;
}

.timer-time small {
  margin-top: 3px;
  color: #94a099;
  font-size: 9px;
}

.timer-sprout {
  position: absolute;
  left: 111px;
  top: 3px;
  width: 23px;
  height: 23px;
}

.timer-sprout i,
.timer-sprout b {
  position: absolute;
  width: 13px;
  height: 8px;
  background: #8eaa98;
}

.timer-sprout i {
  border-radius: 100% 0 100% 0;
  left: -4px;
  top: 8px;
}

.timer-sprout b {
  border-radius: 0 100% 0 100%;
  right: -2px;
  top: 4px;
}

.timer-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
}

.secondary-button {
  border: 1px solid #d6dfd9;
  border-radius: 14px;
  background: transparent;
  color: #75857c;
  cursor: pointer;
}

.celebration {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(244, 207, 120, .26), transparent 26%),
    rgba(19, 22, 44, .48);
  backdrop-filter: blur(8px);
  transition: opacity .28s ease;
}

.celebration.show {
  opacity: 1;
}

.celebration-card {
  position: relative;
  z-index: 2;
  width: min(390px, calc(100vw - 40px));
  padding: 34px 34px 30px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 20% 12%, rgba(244, 207, 120, .18), transparent 32%),
    linear-gradient(145deg, #fffaf2, #f3ecff);
  border: 1px solid rgba(255, 255, 255, .72);
  text-align: center;
  box-shadow: 0 32px 90px rgba(19, 22, 44, .28);
  transform: translateY(18px) scale(.86);
  opacity: 0;
  overflow: hidden;
}

.celebration-card::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 140deg, transparent 0 22%, rgba(244, 207, 120, .3), transparent 38% 100%);
  animation: celebration-shimmer 2.6s linear infinite;
}

.celebration.show .celebration-card {
  animation: celebrate-card .7s cubic-bezier(.2, 1.25, .24, 1) forwards;
}

@keyframes celebrate-card {
  62% { transform: translateY(-3px) scale(1.025); opacity: 1; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes celebration-shimmer {
  to { transform: rotate(360deg); }
}

.earned-star {
  position: relative;
  z-index: 1;
  width: 86px;
  height: 86px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background:
    radial-gradient(circle at 32% 24%, #fff1ae, #e6ad3c 44%, #7b4d1d 100%);
  font-size: 35px;
  box-shadow:
    0 0 0 10px rgba(244, 207, 120, .18),
    0 16px 38px rgba(180, 135, 57, .28);
}

.earned-star::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(244, 207, 120, .42);
  box-shadow: inset 0 0 20px rgba(255,255,255,.18);
}

.celebration-emblem {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(39, 22, 8, .28));
  transform: translateY(-1px);
}

.celebration h2 {
  position: relative;
  z-index: 1;
  margin: 6px 0;
  font-family: "Noto Sans SC", sans-serif;
  color: var(--ink);
}

.celebration p {
  position: relative;
  z-index: 1;
  color: #7e7891;
  font-size: 12px;
}

.celebration-companion {
  position: relative;
  z-index: 2;
  width: min(190px, 58vw);
  height: 150px;
  margin: 6px auto -2px;
  display: grid;
  place-items: end center;
  pointer-events: none;
  transform: translateY(22px) scale(.78);
  opacity: 0;
}

.celebration-companion::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 132px;
  height: 30px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(76, 58, 153, .2), transparent 68%);
  filter: blur(2px);
}

.celebration-companion img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 154px;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 24px rgba(32, 26, 58, .2))
    drop-shadow(0 0 22px rgba(244, 207, 120, .2));
}

.celebration.show .celebration-companion {
  animation: celebration-companion-pop .82s cubic-bezier(.18, 1.34, .22, 1) .08s forwards,
    celebration-companion-bob 2.4s ease-in-out 1.05s infinite;
}

@keyframes celebration-companion-pop {
  58% { transform: translateY(-7px) scale(1.05); opacity: 1; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes celebration-companion-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.015); }
}

.reward-jackpot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 4px;
}

.reward-jackpot:empty {
  display: none;
}

.jackpot-token {
  position: relative;
  min-height: 92px;
  padding: 16px 12px 13px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  transform: translateY(18px) scale(.84);
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    0 18px 38px rgba(32, 26, 58, .14),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.jackpot-token::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  background: conic-gradient(from 120deg, transparent, rgba(255,255,255,.65), transparent 38%);
  animation: reward-token-shine 1.9s linear infinite;
}

.jackpot-token::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.36);
  pointer-events: none;
}

.jackpot-token b,
.jackpot-token em,
.jackpot-token small {
  display: block;
  font-style: normal;
}

.jackpot-token b {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.04em;
}

.jackpot-token em {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 800;
}

.jackpot-token small {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .62;
}

.jackpot-energy {
  color: #fff;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.9), transparent 20%),
    linear-gradient(145deg, #8568d6, #4e3a99 56%, #2b255c);
  box-shadow:
    0 0 0 7px rgba(126, 104, 166, .12),
    0 20px 45px rgba(76, 58, 153, .28);
}

.jackpot-energy b {
  text-shadow: 0 4px 16px rgba(224, 211, 255, .5);
}

.jackpot-coins {
  color: #43260c;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.9), transparent 22%),
    linear-gradient(145deg, #ffe6a4, #f0b44d 54%, #9b5b18);
  box-shadow:
    0 0 0 7px rgba(244, 207, 120, .16),
    0 20px 45px rgba(180, 119, 31, .24);
}

.jackpot-bonus {
  color: #fff;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.9), transparent 22%),
    linear-gradient(145deg, #c79cff, #8654c9 54%, #4b2e81);
}

.jackpot-screen {
  color: #15304c;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.9), transparent 22%),
    linear-gradient(145deg, #dff2ff, #8ebbe9 54%, #547ba7);
}

.jackpot-approval {
  color: #fff;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.9), transparent 22%),
    linear-gradient(145deg, #f4c875, #b98134 48%, #5a3b76);
  box-shadow:
    0 0 0 7px rgba(244, 207, 120, .15),
    0 20px 45px rgba(111, 76, 126, .26);
}

.jackpot-approval b {
  font-size: 30px;
  text-shadow: 0 4px 16px rgba(255, 241, 174, .48);
}

.celebration.show .jackpot-token {
  animation: reward-jackpot-pop .74s cubic-bezier(.18, 1.35, .22, 1) forwards;
}

.celebration.show .jackpot-token:nth-child(2) { animation-delay: .08s; }
.celebration.show .jackpot-token:nth-child(3) { animation-delay: .16s; }

.reward-shower {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.reward-shower i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  opacity: 0;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  color: white;
  background: linear-gradient(145deg, #f8d77a, #b96e20);
  box-shadow: 0 10px 22px rgba(116, 72, 20, .22);
}

.reward-shower i.energy-chip {
  background: linear-gradient(145deg, #bfa7ff, #5d44b7);
  box-shadow: 0 10px 22px rgba(77, 58, 153, .24);
}

.reward-shower i.approval-chip {
  background: linear-gradient(145deg, #fff0b7, #d79a37 54%, #77509c);
  box-shadow: 0 10px 22px rgba(111, 76, 126, .24);
}

.reward-shower i::before {
  content: attr(data-symbol);
}

.celebration.show .reward-shower i {
  animation: reward-chip-fly 1.35s cubic-bezier(.12, .8, .2, 1) forwards;
}

.celebration.show .reward-shower i:nth-child(1) { --x: -168px; --y: -108px; animation-delay: .05s; }
.celebration.show .reward-shower i:nth-child(2) { --x: 162px; --y: -122px; animation-delay: .1s; }
.celebration.show .reward-shower i:nth-child(3) { --x: -205px; --y: 6px; animation-delay: .15s; }
.celebration.show .reward-shower i:nth-child(4) { --x: 204px; --y: 12px; animation-delay: .2s; }
.celebration.show .reward-shower i:nth-child(5) { --x: -128px; --y: 126px; animation-delay: .25s; }
.celebration.show .reward-shower i:nth-child(6) { --x: 126px; --y: 132px; animation-delay: .3s; }
.celebration.show .reward-shower i:nth-child(7) { --x: -42px; --y: -164px; animation-delay: .35s; }
.celebration.show .reward-shower i:nth-child(8) { --x: 46px; --y: 166px; animation-delay: .4s; }

@keyframes reward-jackpot-pop {
  58% { transform: translateY(-5px) scale(1.04); opacity: 1; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes reward-token-shine {
  to { transform: rotate(360deg); }
}

@keyframes reward-chip-fly {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 0; }
  18% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.9) rotate(540deg); opacity: 0; }
}

.earned-points {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.earned-pill {
  padding: 12px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(126, 104, 166, .12);
  box-shadow: 0 12px 24px rgba(40, 35, 70, .08);
  transform: translateY(10px) scale(.96);
  opacity: 0;
}

.celebration.show .earned-pill {
  animation: earned-pill-pop .5s cubic-bezier(.2, 1.35, .32, 1) forwards;
}

.celebration.show .earned-pill:nth-child(2) { animation-delay: .07s; }
.celebration.show .earned-pill:nth-child(3) { animation-delay: .14s; }
.celebration.show .earned-pill:nth-child(4) { animation-delay: .21s; }

.earned-pill b,
.earned-pill em {
  display: block;
  font-style: normal;
}

.earned-pill b {
  color: #6b519f;
  font-size: 18px;
  line-height: 1;
}

.earned-pill em {
  margin-top: 6px;
  color: #8e879e;
  font-size: 10px;
  font-weight: 700;
}

.earned-energy b,
.earned-bonus b { color: #6b519f; }
.earned-coins b { color: #b67d2a; }
.earned-screen b { color: #4f76a8; }

.stars-pill.reward-pop,
.coins-pill.reward-pop {
  animation: wallet-reward-pop 1.1s cubic-bezier(.16, 1.2, .22, 1);
}

@keyframes wallet-reward-pop {
  0% { transform: translateY(0) scale(1); box-shadow: none; }
  32% {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 0 0 8px rgba(244, 207, 120, .2), 0 14px 26px rgba(75, 58, 120, .18);
  }
  100% { transform: translateY(0) scale(1); box-shadow: none; }
}

.celebration-note {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 15px;
  color: #9b94ad;
  font-size: 10px;
}

.celebration-burst {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.celebration-burst i {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #f4cf78;
  box-shadow: 0 0 20px rgba(244, 207, 120, .55);
  opacity: 0;
}

.celebration.show .celebration-burst i {
  animation: celebration-spark .95s cubic-bezier(.18, .8, .26, 1) forwards;
}

.celebration-burst i:nth-child(1) { --x: -150px; --y: -90px; }
.celebration-burst i:nth-child(2) { --x: 135px; --y: -112px; width: 8px; height: 8px; background: #c9a7ff; }
.celebration-burst i:nth-child(3) { --x: -118px; --y: 96px; width: 12px; height: 12px; background: #ef8b62; }
.celebration-burst i:nth-child(4) { --x: 156px; --y: 78px; }
.celebration-burst i:nth-child(5) { --x: -42px; --y: -150px; width: 7px; height: 7px; background: #fff1ae; }
.celebration-burst i:nth-child(6) { --x: 44px; --y: 138px; width: 9px; height: 9px; background: #c9a7ff; }
.celebration-burst i:nth-child(7) { --x: -190px; --y: -8px; width: 8px; height: 8px; }
.celebration-burst i:nth-child(8) { --x: 190px; --y: -10px; width: 8px; height: 8px; background: #ef8b62; }

@keyframes celebration-spark {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0); opacity: 0; }
}

@keyframes earned-pill-pop {
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.toast {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 30px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 17px;
  border-radius: 13px;
  background: #293d34;
  color: white;
  box-shadow: 0 15px 35px rgba(35, 54, 45, .2);
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.toast-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #314a3d;
  background: #b9d2bf;
  font-size: 10px;
}

@media (max-width: 1150px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .right-column {
    grid-template-columns: 1fr 1fr;
  }

  .screen-card {
    grid-column: 1 / -1;
  }

  .reward-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    box-shadow: 15px 0 40px rgba(45, 65, 54, .15);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    padding-bottom: 30px;
  }

  .topbar {
    height: 78px;
    padding: 0 20px;
  }

  .mobile-menu {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border: 0;
    border-radius: 12px;
    background: white;
    display: grid;
    place-content: center;
    gap: 4px;
  }

  .mobile-menu span {
    width: 17px;
    height: 1.5px;
    background: var(--ink);
  }

  .date-block {
    display: none;
  }

  .stars-pill span,
  .environment-badge,
  .profile-button > span:nth-child(2),
  .down {
    display: none;
  }

  .profile-button {
    min-width: auto;
  }

  .view {
    padding: 35px 20px 0;
  }

  .welcome-row {
    align-items: center;
  }

  .day-progress > span {
    display: none;
  }

  .dashboard-grid {
    display: block;
  }

  .right-column {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr;
  }

  .screen-card {
    grid-column: auto;
  }

  .review-grid {
    grid-template-columns: 1fr;
  }

  .garden-scene {
    min-height: 640px;
  }

  .big-tree {
    left: 46%;
    bottom: 125px;
    transform: translateX(-50%) scale(.86);
  }

  .scene-copy {
    top: 35px;
  }

  .plot-math { right: 6%; bottom: 102px; }
  .plot-music { left: 5%; bottom: 42px; }
  .plot-art { right: 20%; bottom: 15px; }
}

@media (max-width: 560px) {
  .notification {
    display: none;
  }

  .welcome-row h1,
  .page-title h1 {
    font-size: 29px;
  }

  .welcome-row p {
    max-width: 230px;
    line-height: 1.6;
  }

  .progress-ring {
    width: 58px;
    height: 58px;
  }

  .tasks-panel {
    padding: 24px 16px 19px;
  }

  .subtle-button {
    font-size: 0;
    padding: 9px;
  }

  .subtle-button svg {
    width: 17px;
  }

  .task-card {
    flex-wrap: wrap;
    padding: 12px;
    gap: 10px;
  }

  #taskList.arranging .task-info {
    min-width: calc(100% - 56px);
  }

  #taskList.arranging .task-points {
    display: none;
  }

  #taskList.arranging .task-order-controls {
    width: 100%;
    justify-content: flex-end;
  }

  #taskList.arranging .task-order-button {
    width: 42px;
    height: 36px;
  }

  .subject-icon {
    width: 39px;
    height: 39px;
    border-radius: 12px;
  }

  .task-meta span:nth-child(2) {
    display: none;
  }

  .task-start {
    display: none;
  }

  .right-column {
    display: grid;
  }

  .rewards-title {
    display: block;
  }

  .wallet {
    display: inline-block;
    margin-top: 20px;
  }

  .reward-grid {
    grid-template-columns: 1fr;
  }

  .garden-scene {
    min-height: 650px;
  }

  .scene-copy {
    left: 20px;
    right: 20px;
    width: auto;
  }

  .garden-sun {
    right: 25px;
  }

  .big-tree {
    transform: translateX(-50%) scale(.74);
    bottom: 135px;
  }

  .subject-plot {
    width: 125px;
  }

  .plot-art {
    display: none;
  }

  .focus-modal {
    padding: 34px 23px 28px;
  }
}