:root {
  color-scheme: light;
  /* 新芽学园 v1.1 · 一主两副 */
  --ink: #1E3A2A;
  --muted: #64786B;
  --line: #DCEEE3;
  --paper: #F4FBF7;
  --paper-deep: #E9F6EE;
  --surface: #ffffff;
  --green: #07C160;
  --green-deep: #0B6B3E;
  --green-mist: #E5F9EE;
  --orange: #FF9F1C;
  --orange-mist: #FFF2DC;
  --blue: #3FA7F5;
  --coral: #FF8A75;
  --sun: #FFC93C;
  --grape: #9B8AFB;
  --danger: #E5534B;
  --shadow: 0 2px 6px rgba(7, 193, 96, .06), 0 8px 20px rgba(30, 58, 42, .06);
  --shadow-1: 0 2px 6px rgba(7, 193, 96, .06), 0 8px 20px rgba(30, 58, 42, .06);
  --shadow-2: 0 4px 10px rgba(7, 193, 96, .09), 0 20px 44px rgba(30, 58, 42, .12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
  --font-num: "Baloo 2", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Baloo2-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Baloo2-ExtraBold.woff2") format("woff2");
}

.num,
.fee-line strong b,
.fee-result-head span {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: var(--paper);
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 14px calc(88px + env(safe-area-inset-bottom));
}

.screen {
  display: none;
  max-width: 520px;
  margin: 0 auto;
  animation: screen-in .24s ease both;
}

.screen.active {
  display: block;
}

.home-panel,
.placeholder-panel {
  min-height: calc(100dvh - 116px);
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
}

.home-mark,
.placeholder-panel span {
  font-size: 48px;
}

.home-panel h1,
.placeholder-panel h2,
.screen-head h2 {
  margin: 0;
  letter-spacing: 0;
}

.home-panel h1 {
  font-size: 34px;
}

.home-panel p,
.placeholder-panel p {
  width: min(300px, 86vw);
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.6;
}

.home-portal-link {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  margin: 6px auto 0;
  padding: 0 16px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--green);
  font-weight: 900;
  text-decoration: none;
}

.home-portal-link.secondary {
  color: var(--green);
  background: #E5F9EE;
}

.placeholder-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.portal-home {
  min-height: calc(100dvh - 48px);
  display: block;
  max-width: 1040px;
  margin: 0 auto;
  padding: 38px 0 54px;
}

.portal-intro {
  padding: 8px 0 24px;
}

.portal-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.portal-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #ffffff;
  background: var(--green);
  box-shadow: 0 7px 16px rgba(7, 193, 96, .2);
  font-size: 17px;
}

.portal-intro h1 {
  margin: 48px 0 0;
  color: var(--ink);
  font-size: 52px;
  line-height: 1.12;
  letter-spacing: 0;
}

.portal-intro h1 em {
  color: var(--green);
  font-style: normal;
}

.portal-entry-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(7, 193, 96, .14);
  border-radius: 22px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 20px 48px rgba(30, 58, 42, .1);
}

.portal-entry-heading {
  margin-bottom: 18px;
}

.portal-entry-heading h2,
.portal-login-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  letter-spacing: 0;
}

.portal-options {
  display: grid;
  gap: 9px;
}

.portal-option {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(7, 193, 96, .12);
  border-radius: 15px;
  color: var(--ink);
  background: #fbfdfb;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.portal-option:hover,
.portal-option:focus-visible {
  border-color: rgba(7, 193, 96, .42);
  background: #EDF9F2;
  box-shadow: 0 8px 18px rgba(7, 193, 96, .1);
  outline: none;
  transform: translateY(-1px);
}

.portal-option.active {
  border-color: rgba(7, 193, 96, .62);
  background: #EDF9F2;
  box-shadow: 0 8px 18px rgba(7, 193, 96, .12);
}

.portal-option:active {
  transform: scale(.985);
}

.portal-option-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.portal-option-icon::before {
  content: "";
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.portal-option-icon-visitor {
  color: #8A5A0B;
  background: #FFF2DC;
}

.portal-option-icon-visitor::before {
  -webkit-mask-image: url("/icons/sign.svg");
  mask-image: url("/icons/sign.svg");
}

.portal-option-icon-user {
  color: #E08083;
  background: #FDE8E7;
}

.portal-option-icon-user::before {
  -webkit-mask-image: url("/icons/student.svg");
  mask-image: url("/icons/student.svg");
}

.portal-option-icon-admin {
  color: #0B6B3E;
  background: #D5F2E2;
}

.portal-option-icon-admin::before {
  -webkit-mask-image: url("/icons/teacher.svg");
  mask-image: url("/icons/teacher.svg");
}

.portal-option-copy {
  min-width: 0;
  display: block;
}

.portal-option-copy strong {
  font-size: 17px;
  line-height: 1.2;
}

.portal-option-arrow {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--green);
}

.portal-option-arrow::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("/icons/arrow.svg") center / contain no-repeat;
  mask: url("/icons/arrow.svg") center / contain no-repeat;
}

.portal-login-card[hidden] {
  display: none;
}

.portal-entry-card.has-login .portal-entry-heading,
.portal-entry-card.has-login .portal-options {
  display: none;
}

.portal-login-card {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.portal-entry-card.has-login .portal-login-card {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.portal-back-button {
  justify-self: start;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}

.portal-login-form {
  display: grid;
  gap: 10px;
}

.portal-field {
  display: grid;
  gap: 6px;
}

.portal-field[hidden] {
  display: none;
}

.portal-login-card label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.portal-login-card input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7faf8;
  color: var(--ink);
}

.portal-login-card input:focus {
  border-color: var(--green);
  outline: 3px solid rgba(7, 193, 96, .12);
}

.portal-login-card form button {
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  color: #ffffff;
  background: var(--green);
  font-weight: 900;
}

.portal-login-card form button:disabled {
  opacity: .65;
}

#portal-message {
  display: block;
  min-height: 18px;
  color: #0B6B3E;
  font-size: 12px;
  line-height: 1.45;
}

#portal-message.is-empty {
  visibility: hidden;
}

#portal-message.error {
  color: #B03A2E;
}

.screen-head {
  padding: 8px 2px 16px;
}

.screen-head p,
.admin-head p {
  margin: 0 0 5px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.screen-head h2 {
  font-size: 25px;
}

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

.gallery-category {
  display: grid;
  gap: 10px;
}

.gallery-category h3 {
  margin: 4px 2px 2px;
  color: #1E3A2A;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: 0;
}

.gallery-grid-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gallery-card {
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  color: inherit;
  text-align: left;
  box-shadow: 0 8px 20px rgba(30, 58, 42, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.gallery-card:active {
  transform: scale(.97);
  box-shadow: 0 5px 14px rgba(30, 58, 42, .08);
}

.thumb {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #5BD49B, #FFC93C);
  background-size: cover;
  background-position: center;
  color: rgba(255, 255, 255, .92);
  font-size: 34px;
}

.gallery-card strong {
  display: block;
  min-height: 44px;
  padding: 9px 10px 10px;
  font-size: 15px;
  line-height: 1.28;
}

.empty {
  padding: 22px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  color: var(--muted);
  text-align: center;
}

.screen[data-screen="fee"] {
  padding-bottom: 230px;
}

.fee-calculator {
  display: grid;
  gap: 14px;
}

.fee-section {
  display: grid;
  gap: 8px;
}

.fee-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.project-grid {
  grid-template-columns: 1fr;
  position: relative;
}

.choice-button {
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  text-align: center;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(30, 58, 42, .06);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease;
}

.choice-button:active {
  transform: scale(.97);
}

.choice-button.active {
  border-color: rgba(7, 193, 96, .58);
  background: #E5F9EE;
  color: var(--green);
}

.project-select {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  text-align: left;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(30, 58, 42, .06);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.project-select:active {
  transform: scale(.98);
}

.project-select.active,
.project-select.has-value {
  border-color: rgba(7, 193, 96, .58);
  color: var(--green);
}

.project-select b {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.project-menu {
  display: none;
  gap: 8px;
  padding-top: 8px;
}

.project-menu.open {
  display: grid;
  animation: screen-in .16s ease both;
}

.project-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  text-align: left;
}

.project-choice strong,
.project-choice span {
  min-width: 0;
}

.project-choice span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.fee-result {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 9;
  width: min(calc(100vw - 28px), 520px);
  display: grid;
  gap: 13px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.fee-result[hidden] {
  display: none;
}

.fee-result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.fee-result-head span {
  color: var(--green);
  font-weight: 800;
}

.fee-line {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: baseline;
}

.fee-line > span {
  color: #1E3A2A;
  font-size: 15px;
  font-weight: 800;
}

.fee-line strong {
  color: #E5534B;
  font-size: 18px;
  line-height: 1;
}

.fee-line strong b {
  font-size: 31px;
  letter-spacing: 0;
}

.fee-line del {
  color: #64786B;
  font-size: 11px;
}

.fee-line em {
  position: absolute;
  top: -14px;
  right: 0;
  min-width: 46px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #E5534B;
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.fee-hint {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.adjustment-section:empty {
  display: none;
}

.adjustment-list {
  display: grid;
  gap: 13px;
}

.adjustment-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 6px 14px rgba(30, 58, 42, .04);
}

.adjustment-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: center;
}

.adjustment-options {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.adjustment-group.stacked .adjustment-options {
  display: grid;
  grid-template-columns: 1fr;
}

.adjustment-option {
  width: auto;
  min-width: 0;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 6px 14px rgba(30, 58, 42, .05);
}

.adjustment-group.stacked .adjustment-option {
  width: max-content;
  max-width: 100%;
}

.adjustment-option.selected {
  border-color: rgba(7, 193, 96, .58);
  background: #EDF9F2;
  color: var(--green);
}

.adjustment-option strong {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
}

.round-check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 2px solid #64786B;
  border-radius: 50%;
}

.adjustment-option.selected .round-check::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3BC98F;
}

.adjustment-amount {
  justify-self: end;
  width: 92px;
  color: #64786B;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.empty-amount {
  min-width: 92px;
}

.adjustment-note {
  color: #64786B;
  font-size: 13px;
  line-height: 1.35;
}

.referral-group .adjustment-line {
  grid-template-columns: minmax(0, 1fr) minmax(108px, auto);
}

.referral-group .adjustment-amount {
  width: auto;
  max-width: 150px;
  white-space: normal;
}

.referral-count-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(30, 58, 42, .05);
}

.referral-count-control strong,
.referral-count-control span {
  font-size: 15px;
  font-weight: 800;
}

.referral-count-control input {
  width: 48px;
  min-height: 30px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.bottom-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(220, 238, 227, .92);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 -8px 24px rgba(30, 58, 42, .08);
  backdrop-filter: blur(12px);
  overflow: visible;
}

.visitor-tabs {
  grid-template-columns: repeat(3, 1fr);
}

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

.admin-tabs {
  grid-template-columns: repeat(5, 1fr);
}

.bottom-tabs button {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 54px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  transform: translateY(0);
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.bottom-tabs button.active {
  color: var(--green);
  background: #E5F9EE;
  transform: translateY(-2px);
}

.bottom-tabs button:active {
  transform: scale(.94);
}

.bottom-tabs span {
  font-size: 23px;
  line-height: 1;
}

.bottom-tabs b {
  font-size: 12px;
}

.user-menu-shell,
.menu-admin-panel {
  display: grid;
  gap: 14px;
}

.menu-admin-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px 2px;
}

.menu-admin-head p,
.menu-meta-line {
  margin: 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.menu-admin-head h2 {
  margin: 2px 0 0;
  font-size: 28px;
  letter-spacing: 0;
}

#admin-menu-updated {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.user-subtabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
}

.user-subtabs button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.user-subtabs button.active {
  color: var(--green);
  background: #E5F9EE;
}

.menu-view[data-menu-panel] {
  display: none;
}

.menu-view[data-menu-panel].active {
  display: grid;
}

.menu-view {
  gap: 12px;
}

.menu-notice {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--coral);
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
  color: #8A5A0B;
  font-size: 13px;
  line-height: 1.55;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  align-items: start;
}

.day-card {
  overflow: hidden;
  border: 1px solid rgba(217, 226, 223, .95);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 22px rgba(30, 58, 42, .07);
}

.day-card > header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 15px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.day-card:nth-child(2n) > header {
  background: linear-gradient(135deg, var(--coral), #E5534B);
}

.day-card:nth-child(3n) > header {
  background: linear-gradient(135deg, #07C160, var(--green));
}

.day-card header span {
  font-size: 21px;
  font-weight: 900;
}

.day-card header small {
  font-size: 13px;
  opacity: .9;
}

.day-note {
  margin: 12px 14px 0;
  color: var(--muted);
  font-size: 13px;
}

.meal {
  padding: 13px;
}

.meal + .meal {
  border-top: 1px dashed var(--line);
}

.meal h3 {
  margin: 0 0 10px;
  color: #1E3A2A;
  font-size: 16px;
}

.dish-list {
  display: grid;
  gap: 9px;
}

.dish-card {
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid #E4EFE8;
  border-radius: 8px;
  background: #fffdf8;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.dish-card:hover,
.dish-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(7, 193, 96, .45);
  box-shadow: 0 8px 18px rgba(30, 58, 42, .1);
  outline: none;
}

.dish-thumb {
  width: 64px;
  min-height: 64px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  color: rgba(255, 255, 255, .94);
  font-size: 20px;
  font-weight: 900;
}

.dish-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dish-main strong {
  line-height: 1.25;
}

.dish-main small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.week-calendar-wrap {
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.week-calendar {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 54px repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(7, 193, 96, .16);
  border-radius: 8px;
  background: #EDF9F2;
}

.calendar-corner,
.calendar-day-head,
.calendar-category,
.calendar-cell {
  background: rgba(255, 255, 255, .96);
}

.calendar-corner {
  display: grid;
  place-items: center;
  min-height: 54px;
  border-right: 1px solid rgba(255, 255, 255, .8);
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  color: #ffffff;
  background: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.calendar-day-head {
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  border-right: 1px solid rgba(255, 255, 255, .5);
  color: #ffffff;
  background: var(--green);
}

.calendar-day-head strong {
  font-size: 14px;
  line-height: 1.1;
}

.calendar-day-head span {
  min-height: 16px;
  font-size: 10px;
  opacity: .9;
}

.calendar-category {
  display: grid;
  place-items: center;
  padding: 8px 4px;
  border-right: 1px solid rgba(7, 193, 96, .14);
  border-bottom: 2px solid #ffffff;
  color: #ffffff;
  background: rgba(7, 193, 96, .78);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.calendar-cell {
  min-height: 0;
  aspect-ratio: 1;
  display: grid;
  padding: 1.5px;
  background: #EDF9F2;
}

.calendar-dish {
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 23%;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.calendar-dish-image {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  color: rgba(255, 255, 255, .94);
  font-size: 13px;
  font-weight: 900;
}

.calendar-dish strong,
.calendar-dish b {
  min-width: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .82);
  color: inherit;
  font-size: 11px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-dish-empty {
  background: transparent;
  color: var(--muted);
  cursor: default;
}

.calendar-dish-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(30, 58, 42, .72);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

button.calendar-dish-empty {
  cursor: pointer;
}

.calendar-dish-empty span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(255, 255, 255, .42);
  font-size: 14px;
  font-weight: 900;
}

.admin-tab-group {
  position: relative;
  display: grid;
}

.admin-home-return {
  display: none;
}

.admin-tab-group > button {
  width: 100%;
  height: 100%;
}

.admin-subtabs {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: grid;
  grid-template-columns: max-content;
  gap: 6px;
  width: max-content;
  padding: 6px;
  border: 1px solid rgba(220, 238, 227, .95);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(30, 58, 42, .14);
  transform: translateX(-50%);
}

.admin-subtabs[hidden] {
  display: none;
}

.admin-tabs .admin-subtabs button {
  width: max-content;
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: none;
}

.admin-tabs .admin-subtabs button.active {
  color: var(--green);
  background: #E5F9EE;
  transform: none;
}

.viewer[hidden] {
  display: none;
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: max(72px, calc(env(safe-area-inset-top) + 62px)) 14px calc(22px + env(safe-area-inset-bottom));
  overflow: auto;
  background: rgba(30, 58, 42, .52);
  opacity: 1;
  transition: opacity .2s ease;
  animation: viewer-fade-in .2s ease both;
}

.viewer.closing {
  opacity: 0;
}

.viewer-card {
  width: min(92vw, 430px);
  max-height: calc(100dvh - max(92px, calc(env(safe-area-inset-top) + 82px)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 46px rgba(18, 28, 36, .28);
  transform-origin: center top;
  animation: viewer-card-in .24s cubic-bezier(.2, .85, .25, 1.08) both;
}

.viewer.closing .viewer-card {
  animation: viewer-card-out .18s ease both;
}

.viewer-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #1E3A2A;
}

.viewer-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(0);
  opacity: 1;
}

.viewer-stage img.slide-left {
  animation: image-slide-left .22s ease both;
}

.viewer-stage img.slide-right {
  animation: image-slide-right .22s ease both;
}

.viewer-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 78px;
  background: linear-gradient(135deg, #0B6B3E, #3FA7F5);
}

.viewer-close,
.viewer-arrow {
  position: absolute;
  z-index: 2;
  border: 0;
  color: #ffffff;
  background: rgba(0, 0, 0, .32);
}

.viewer-close {
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 28px;
}

.viewer-arrow {
  top: 50%;
  width: 34px;
  height: 54px;
  transform: translateY(-50%);
  border-radius: 8px;
  font-size: 40px;
}

.viewer-arrow.left {
  left: 8px;
}

.viewer-arrow.right {
  right: 8px;
}

.viewer-count {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(0, 0, 0, .38);
  font-size: 12px;
}

.viewer-copy {
  flex: 0 1 auto;
  overflow: auto;
  padding: 22px 24px 28px;
}

.viewer-copy h2 {
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: 0;
}

.viewer-copy p {
  margin: 0;
  color: #1E3A2A;
  line-height: 1.72;
  white-space: pre-wrap;
}

.admin-body {
  background: #f6faf8;
}

.admin-body.login-locked {
  overflow: hidden;
}

.admin-login-shell {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  overflow: auto;
  background: #f6faf8;
}

.admin-login-shell[hidden] {
  display: none;
}

.admin-login-card {
  width: min(100%, 360px);
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(30, 58, 42, .12);
}

.admin-login-card p {
  margin: 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.admin-login-card .admin-login-note {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.admin-login-card h1 {
  margin: 0 0 4px;
  font-size: 26px;
  letter-spacing: 0;
}

.admin-login-card form {
  display: grid;
  gap: 10px;
}

.admin-login-card input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--ink);
  font-size: 18px;
}

.admin-login-card button,
.admin-login-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--green);
  font-weight: 800;
  text-decoration: none;
}

.login-error {
  color: #B03A2E;
  font-size: 14px;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes viewer-card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes viewer-card-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(16px) scale(.96);
  }
}

@keyframes image-slide-left {
  from {
    opacity: .6;
    transform: translateX(34px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes image-slide-right {
  from {
    opacity: .6;
    transform: translateX(-34px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Public mobile-first interaction refinements */
.public-header-actions {
  width: auto;
}

.public-login-button,
.public-fee-button,
.public-role-options > button,
.public-site .choice-button,
.public-site .project-select,
.public-site .adjustment-option,
.public-site .site-login-panel form button,
.public-site .site-login-back {
  border-radius: 999px;
  box-shadow: none;
}

.public-login-button:hover,
.public-fee-button:hover,
.public-role-options > button:hover,
.public-role-options > button:focus-visible {
  box-shadow: none;
}

.public-role-entry {
  min-width: 0;
}

.public-role-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-role-options > button {
  position: relative;
  min-height: 138px;
  grid-template-columns: 1fr;
  grid-template-rows: 56px auto;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 16px 22px;
  text-align: center;
}

.public-role-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.public-role-options strong {
  font-size: 16px;
  line-height: 1.25;
}

.public-role-arrow {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.public-price-entry {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin-top: 24px;
  text-align: center;
}

.public-price-entry > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.public-price-entry .public-fee-button {
  min-width: 174px;
}

.public-story-media {
  position: relative;
}

.public-story-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.public-story-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  transform: translateX(12%);
  transition: opacity .6s ease, transform .75s cubic-bezier(.2, .75, .25, 1);
}

.public-story-slide.active {
  z-index: 1;
  opacity: 1;
  transform: translateX(0);
}

.public-story-dots {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.public-story-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 1px 4px rgba(11, 107, 62, .25);
  transition: width .25s ease, background-color .25s ease;
}

.public-story-dots span.active {
  width: 20px;
  border-radius: 999px;
  background: #ffffff;
}

.fee-dialog {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: auto;
  color: var(--ink);
  background: #E9F8EF;
  box-shadow: 0 28px 70px rgba(11, 107, 62, .28);
}

.fee-dialog::backdrop {
  background: rgba(11, 107, 62, .5);
  backdrop-filter: blur(5px);
}

.fee-dialog-card {
  position: relative;
  padding: 18px 28px 30px;
}

.fee-dialog .public-fee-section {
  width: 100%;
  min-height: 0;
  padding: 38px 0 0;
}

.fee-dialog .public-section-heading {
  margin-bottom: 30px;
}

.fee-dialog .public-fee-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
}

.fee-dialog .fee-result {
  top: 12px;
}

.fee-dialog-open .public-price-entry {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 719px) {
  body.public-site {
    padding-bottom: 88px;
  }

  .public-role-entry,
  .public-role-entry h2,
  .public-story-copy {
    text-align: center;
  }

  .public-role-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .public-role-options > button {
    min-height: 126px;
    grid-template-rows: 52px auto;
    gap: 8px;
    padding: 14px 8px;
  }

  .public-role-icon {
    width: 52px;
    height: 52px;
  }

  .public-role-arrow {
    display: none;
  }

  .public-price-entry {
    position: fixed;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 24;
    width: min(342px, calc(100vw - 24px));
    gap: 5px;
    margin: 0;
    padding: 7px 12px 9px;
    border-radius: 999px;
    background: rgba(229, 249, 238, .94);
    box-shadow: 0 8px 24px rgba(11, 107, 62, .16);
    backdrop-filter: blur(12px);
    transform: translateX(-50%);
    transition: opacity .18s ease;
  }

  .public-price-entry > span {
    font-size: 11px;
    line-height: 1.2;
  }

  .public-price-entry .public-fee-button {
    min-width: 170px;
    min-height: 42px;
  }

  .public-story-copy {
    max-width: none;
  }

  .public-story-copy .public-eyebrow,
  .public-story-intro,
  .public-story-detail {
    text-align: center;
  }

  .public-story-copy .public-fee-button {
    display: none;
  }

  .public-story-detail {
    margin-bottom: 0;
  }

  .fee-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .fee-dialog-card {
    padding: 10px 14px 22px;
  }

  .fee-dialog .public-fee-section {
    width: 100%;
    padding: 46px 0 0;
  }

  .fee-dialog .public-section-heading {
    margin-bottom: 26px;
    text-align: center;
  }

  .fee-dialog .public-fee-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fee-dialog .fee-result {
    position: static;
  }

  .public-footer {
    padding-bottom: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-story-slide {
    transition: opacity .01s linear;
    transform: none;
  }
}

.admin-shell {
  max-width: 540px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom));
}

.admin-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 12px;
  background: #f6faf8;
}

.admin-head h1 {
  margin: 0;
  font-size: 25px;
}

.admin-head button,
.add-card,
.upload-button,
.delete-card {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
}

.admin-head button,
.add-card,
.upload-button {
  color: #ffffff;
  background: var(--green);
}

.admin-link-box,
.status,
.teacher-placeholder-panel,
.category-editor,
.editor-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(30, 58, 42, .06);
}

.admin-link-box {
  display: grid;
  gap: 7px;
  padding: 12px;
  margin-bottom: 10px;
}

.admin-link-box label {
  color: var(--muted);
  font-size: 13px;
}

.admin-link-box input,
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--ink);
}

.admin-link-box input {
  min-height: 40px;
  padding: 8px 10px;
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

.teacher-placeholder-panel {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.teacher-placeholder-panel p,
.teacher-placeholder-panel span {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.teacher-placeholder-panel h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.teacher-account-panel {
  display: grid;
  gap: 12px;
}

.account-subpanel {
  display: none;
}

.account-subpanel.active {
  display: grid;
}

.current-teacher-card,
.teacher-list-panel,
.teacher-modal-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(30, 58, 42, .06);
}

.current-teacher-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.current-teacher-card p,
.teacher-list-panel p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.current-teacher-card h2,
.teacher-list-panel h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.current-teacher-card button,
.teacher-list-panel header button,
.teacher-row-actions button,
.teacher-modal-submit {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--green);
  font-weight: 900;
}

.teacher-list-panel {
  padding: 14px;
}

.teacher-list-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.teacher-list {
  display: grid;
  gap: 8px;
}

.teacher-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.teacher-row-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.teacher-row-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--green);
  background: #E5F9EE;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.teacher-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.teacher-row-actions button {
  min-height: 34px;
  padding: 0 9px;
  font-size: 12px;
}

.teacher-row-actions button[disabled] {
  color: var(--muted);
  background: #E9F3EC;
}

.current-teacher-card button[disabled],
.teacher-list-panel header button[disabled],
.add-card[disabled],
.delete-card[disabled] {
  color: var(--muted);
  background: #E9F3EC;
  cursor: not-allowed;
}

.teacher-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 32, 28, .36);
}

.teacher-modal[hidden] {
  display: none;
}

.teacher-modal-card {
  position: relative;
  width: min(420px, 100%);
  display: grid;
  gap: 10px;
  padding: 18px;
}

.teacher-modal-card .field[hidden] {
  display: none;
}

.teacher-modal-card h2 {
  margin: 0 36px 4px 0;
  font-size: 22px;
  letter-spacing: 0;
}

.menu-dish-editor {
  width: min(460px, 100%);
}

.menu-dish-editor-image {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  color: rgba(255, 255, 255, .95);
  font-size: 24px;
  font-weight: 900;
}

.menu-dish-editor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-dish-card {
  width: min(430px, 100%);
}

.user-dish-card .dish-context {
  margin: 2px 0 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.user-dish-card p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.teacher-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #E9F3EC;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}

.status {
  display: none;
  margin-bottom: 10px;
  padding: 10px 12px;
  color: #0B6B3E;
  font-size: 14px;
}

.status.show {
  display: block;
}

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

.category-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fdfefa;
}

.category-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.category-name {
  margin: 0;
}

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

.admin-card-grid {
  min-height: 86px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-radius: 8px;
  outline: 1px dashed rgba(7, 193, 96, .18);
  outline-offset: 4px;
}

.admin-gallery-card {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.admin-gallery-card.dragging {
  position: relative;
  z-index: 40;
  opacity: .9;
  box-shadow: 0 18px 40px rgba(30, 58, 42, .24);
  transition: none;
  pointer-events: none;
}

.drag-active {
  overflow: hidden;
  user-select: none;
}

.editor-card {
  padding: 12px;
  box-shadow: none;
}

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

.editor-top strong {
  font-size: 16px;
}

.delete-card {
  padding: 0 12px;
  color: #B03A2E;
  background: #FFE9E4;
}

.field {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.field label {
  color: var(--muted);
  font-size: 13px;
}

.field input,
.field textarea {
  padding: 10px;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.image-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.image-chip {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #5BD49B, #FFC93C);
}

.image-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-chip button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(0, 0, 0, .5);
}

.upload-button,
.add-card {
  width: 100%;
}

.upload-button {
  display: grid;
  place-items: center;
  margin-top: 8px;
}

.upload-button input {
  display: none;
}

.add-card {
  margin-top: 14px;
}

.add-card.secondary {
  color: var(--green);
  background: #E5F9EE;
}

.add-card-inline {
  margin-top: 0;
  min-height: 40px;
  color: var(--green);
  background: #E5F9EE;
}

.pricing-editor-head {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(30, 58, 42, .06);
}

.pricing-editor-head .field {
  margin: 0;
}

.pricing-editor-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.pricing-editor-list {
  display: grid;
  gap: 14px;
}

.pricing-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfefa;
  box-shadow: 0 8px 20px rgba(30, 58, 42, .06);
}

.pricing-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pricing-title-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pricing-group-title h2,
.pricing-group-title h3 {
  margin: 0;
}

.pricing-group-title h2 {
  font-size: 24px;
}

.pricing-group-title span {
  color: var(--muted);
  font-size: 12px;
}

.pricing-fold-button {
  flex: 0 0 auto;
  min-width: 42px;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--green);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.pricing-panel-body {
  display: grid;
  gap: 10px;
}

.pricing-group.collapsed,
.adjustment-editor-group.collapsed {
  gap: 0;
}

.pricing-group.collapsed > .pricing-panel-body,
.adjustment-editor-group.collapsed > .pricing-panel-body {
  display: none;
}

.pricing-table {
  display: grid;
  gap: 7px;
}

.pricing-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) auto;
  gap: 7px;
  align-items: center;
}

.pricing-row-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pricing-row input {
  min-width: 0;
  width: 100%;
  min-height: 38px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--ink);
}

.pricing-delete {
  min-height: 38px;
  padding: 0 9px;
  font-size: 13px;
}

.pricing-adjustments {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.pricing-adjustments > h2 {
  margin: 0;
  font-size: 24px;
}

.pricing-adjustments > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.adjustment-editor-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(30, 58, 42, .06);
}

.adjustment-editor-group h3 {
  margin: 0;
  font-size: 19px;
}

.adjustment-editor-list {
  display: grid;
  gap: 10px;
}

.adjustment-editor-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.adjustment-editor-row input,
.adjustment-editor-row textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
}

.adjustment-editor-row input {
  min-height: 38px;
  padding: 8px;
}

.adjustment-editor-row [data-field="adjustment-price"] {
  grid-column: 1 / -1;
}

.limit-picker {
  position: relative;
  z-index: 5;
  grid-column: 1 / -1;
}

.limit-picker:focus-within {
  z-index: 70;
}

.limit-picker-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.limit-picker-button span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.limit-picker-button b {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.limit-picker-button i {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.limit-picker-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  gap: 8px;
  max-height: min(58vh, 360px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(100, 120, 107, .3);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(30, 58, 42, .18);
}

.limit-picker-popover[hidden] {
  display: none;
}

.limit-picker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.limit-picker-top.compact {
  margin-top: 2px;
}

.limit-picker-top strong {
  font-size: 12px;
}

.limit-picker-top button {
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  color: var(--green);
  background: #E5F9EE;
  font-weight: 800;
}

.limit-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.limit-choice {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 30px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.adjustment-editor-row .limit-choice input {
  flex: 0 0 auto;
  width: 14px;
  min-height: 14px;
  padding: 0;
}

.limit-choice span {
  min-width: 0;
}

.limit-choice:has(input:checked) {
  border-color: rgba(7, 193, 96, .45);
  background: #E5F9EE;
  color: var(--green);
}

.adjustment-editor-row textarea {
  grid-column: 1 / -1;
  min-height: 58px;
  padding: 8px;
  resize: vertical;
}

.tier-editor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px dashed rgba(100, 120, 107, .35);
  border-radius: 8px;
  background: #ffffff;
}

.tier-editor label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.adjustment-editor-row .pricing-delete {
  grid-column: 1 / -1;
}

.adjustment-editor-row input:disabled,
.adjustment-editor-row button:disabled {
  opacity: .55;
}

.admin-editor-modal {
  z-index: 50;
}

.admin-edit-card {
  width: min(92vw, 430px);
}

.admin-edit-copy {
  display: grid;
  gap: 8px;
  padding: 18px 18px 22px;
}

.admin-edit-copy .field {
  margin: 0;
}

.admin-edit-copy textarea {
  min-height: 108px;
}

.showcase-editor-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.showcase-editor-head p {
  margin: 0 0 4px;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.showcase-editor-head h2 {
  margin: 0;
  font-size: 28px;
}

.showcase-editor-head > span {
  color: var(--muted);
  font-size: 13px;
}

.showcase-page-list {
  display: grid;
  gap: 10px;
}

.showcase-page-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 32px 104px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #ffffff;
  text-align: left;
  box-shadow: 0 8px 18px rgba(30, 58, 42, .06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.showcase-page-row:hover,
.showcase-page-row:focus-visible {
  border-color: rgba(7, 193, 96, .42);
  box-shadow: 0 12px 24px rgba(30, 58, 42, .1);
  outline: none;
  transform: translateY(-1px);
}

.showcase-page-order {
  color: var(--green);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.showcase-page-thumb {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #D5F2E2 center / cover no-repeat;
  color: var(--green);
  font-size: 12px;
}

.showcase-page-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.showcase-page-copy small {
  color: var(--green);
  font-weight: 800;
}

.showcase-page-copy strong,
.showcase-page-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-page-copy strong {
  font-size: 17px;
}

.showcase-page-copy span {
  color: var(--muted);
  font-size: 13px;
}

.showcase-page-row > b {
  color: var(--green);
  font-size: 13px;
}

.admin-edit-card .viewer-stage {
  aspect-ratio: 4 / 3;
}

.delete-card-wide {
  width: 100%;
  margin-top: 4px;
}

@media (min-width: 720px) {
  .app-shell {
    padding: 34px 32px 112px;
  }

  .screen {
    max-width: 1080px;
  }

  .screen[data-screen="home"] {
    max-width: 960px;
  }

  .home-panel,
  .placeholder-panel {
    min-height: calc(100vh - 164px);
  }

  .portal-home {
    min-height: calc(100vh - 164px);
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(420px, 1fr);
    align-items: center;
    gap: 64px;
    padding-top: 48px;
  }

  .portal-intro h1 {
    font-size: 58px;
  }

  .portal-options {
    gap: 10px;
  }

  .home-panel h1 {
    font-size: 46px;
  }

  .home-panel p,
  .placeholder-panel p {
    width: min(560px, 72vw);
    font-size: 17px;
  }

  .screen-head {
    padding: 8px 0 22px;
  }

  .screen-head h2 {
    font-size: 34px;
  }

  .gallery-grid {
    gap: 30px;
  }

  .gallery-category {
    gap: 14px;
  }

  .gallery-category h3 {
    font-size: 30px;
  }

  .gallery-grid-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .gallery-card:hover {
    border-color: rgba(7, 193, 96, .42);
    box-shadow: 0 14px 28px rgba(30, 58, 42, .1);
    transform: translateY(-2px);
  }

  .screen[data-screen="fee"] {
    max-width: 920px;
    padding-bottom: 230px;
  }

  .fee-calculator {
    gap: 18px;
  }

  .choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .project-grid,
  .adjustment-section .choice-grid {
    grid-template-columns: 1fr;
  }

  .fee-result {
    bottom: 92px;
    width: min(720px, calc(100vw - 64px));
  }

  .bottom-tabs {
    left: 50%;
    right: auto;
    bottom: 18px;
    width: min(520px, calc(100vw - 64px));
    padding: 8px;
    border: 1px solid rgba(220, 238, 227, .92);
    border-radius: 18px;
    transform: translateX(-50%);
  }

  .bottom-tabs button {
    min-height: 48px;
  }

  .viewer {
    align-items: center;
    padding: 38px;
  }

  .viewer-card {
    width: min(920px, calc(100vw - 76px));
    max-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .viewer-stage {
    min-height: 0;
  }

  .viewer-copy {
    min-height: 0;
  }

  .admin-login-card {
    width: min(420px, 100%);
    padding: 28px;
  }

  .admin-shell {
    max-width: 860px;
    padding: 28px 28px 108px;
  }

  .admin-head {
    padding: 14px 0 18px;
  }

  .admin-link-box {
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
  }

  .admin-link-box label {
    font-weight: 800;
  }

  .admin-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .pricing-row {
    grid-template-columns: minmax(0, 1fr) 220px 88px;
  }

  .adjustment-editor-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .limit-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-edit-card {
    width: min(920px, calc(100vw - 76px));
  }

  .admin-edit-copy {
    min-height: 0;
  }
}

@media (min-width: 960px) {
  .admin-shell {
    max-width: 1240px;
    padding: 28px 36px 44px 218px;
  }

  .admin-tabs.bottom-tabs {
    top: 118px;
    right: auto;
    bottom: auto;
    left: 28px;
    width: 158px;
    grid-template-columns: 1fr;
    padding: 8px;
    border: 1px solid rgba(220, 238, 227, .92);
    border-radius: 14px;
    transform: none;
  }

  .admin-home-return {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    border-radius: 8px;
    color: #ffffff;
    background: var(--green);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
  }

  .admin-subtabs {
    left: calc(100% + 8px);
    right: auto;
    top: 50%;
    bottom: auto;
    grid-template-columns: max-content;
    transform: translateY(-50%);
  }

  .admin-tabs.bottom-tabs button {
    min-height: 48px;
    grid-template-columns: 26px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    padding: 0 12px;
  }

  .admin-tabs.bottom-tabs span {
    font-size: 20px;
  }

  .admin-tabs.bottom-tabs b {
    font-size: 13px;
  }

  .admin-tabs.bottom-tabs .admin-subtabs button {
    width: max-content;
    min-height: 32px;
    display: inline-flex;
    grid-template-columns: none;
    justify-content: center;
    justify-items: center;
    padding: 6px 12px;
  }

  .admin-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pricing-editor-list {
    gap: 16px;
  }

  .pricing-group,
  .adjustment-editor-group,
  .pricing-editor-head,
  .category-editor {
    padding: 16px;
  }
}

@media (min-width: 1220px) {
  .gallery-grid-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .admin-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Public website */
html {
  scroll-behavior: smooth;
}

body.public-site {
  background: #E9F8EF;
}

.public-site button,
.public-site a {
  -webkit-tap-highlight-color: transparent;
}

.public-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  min-height: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px max(24px, calc((100vw - 1180px) / 2));
  background: rgba(229, 249, 238, .9);
  backdrop-filter: blur(14px);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  color: var(--ink);
  text-decoration: none;
}

.public-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: var(--green);
  box-shadow: 0 8px 18px rgba(7, 193, 96, .18);
}

.public-brand strong {
  font-size: 18px;
}

.public-header-actions {
  display: grid;
  justify-items: stretch;
  gap: 7px;
  width: 104px;
}

.public-login-button,
.public-fee-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--green);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(7, 193, 96, .16);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.public-fee-button.compact {
  min-height: 34px;
  padding: 0 12px;
  color: var(--green);
  background: #ffffff;
  font-size: 12px;
  box-shadow: 0 6px 14px rgba(30, 58, 42, .08);
}

.public-login-button:hover,
.public-fee-button:hover {
  background: #0B6B3E;
  box-shadow: 0 12px 24px rgba(7, 193, 96, .2);
  transform: translateY(-2px);
}

.public-fee-button.compact:hover {
  color: #ffffff;
}

.public-login-button:active,
.public-fee-button:active {
  transform: scale(.97);
}

.public-main {
  overflow: clip;
}

.public-hero,
.public-story,
.public-fee-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.public-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
  gap: 88px;
  align-items: center;
  padding: 132px 0 96px;
}

.public-hero-copy {
  max-width: 650px;
}

.public-eyebrow,
.public-section-heading > p {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 15px;
  font-weight: 900;
}

.public-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: 64px;
  line-height: 1.12;
  letter-spacing: 0;
}

.public-hero h1 em {
  color: var(--green);
  font-style: normal;
}

.public-lead {
  max-width: 560px;
  margin: 28px 0 0;
  color: #1E3A2A;
  font-size: 22px;
  line-height: 1.7;
  font-weight: 800;
}

.public-support {
  max-width: 540px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.public-role-entry h2,
.site-role-chooser h2 {
  margin: 0 0 18px;
  font-size: 27px;
  letter-spacing: 0;
}

.public-role-options {
  display: grid;
  gap: 12px;
}

.public-role-options > button {
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  padding: 12px 15px;
  border: 1px solid rgba(7, 193, 96, .15);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  text-align: left;
  box-shadow: 0 12px 28px rgba(11, 107, 62, .08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.public-role-options > button:hover,
.public-role-options > button:focus-visible {
  border-color: rgba(7, 193, 96, .5);
  box-shadow: 0 16px 30px rgba(11, 107, 62, .12);
  outline: none;
  transform: translateY(-2px);
}

.public-role-options strong {
  font-size: 18px;
}

.public-role-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.public-role-icon::before,
.public-role-arrow::before {
  content: "";
  display: block;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.public-role-icon::before {
  width: 27px;
  height: 27px;
}

.public-role-icon.student {
  color: #E08083;
  background: #FDE8E7;
}

.public-role-icon.student::before {
  -webkit-mask-image: url("/icons/student.svg");
  mask-image: url("/icons/student.svg");
}

.public-role-icon.teacher {
  color: #0B6B3E;
  background: #D5F2E2;
}

.public-role-icon.teacher::before {
  -webkit-mask-image: url("/icons/teacher.svg");
  mask-image: url("/icons/teacher.svg");
}

.public-role-arrow {
  color: var(--green);
}

.public-role-arrow::before {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url("/icons/arrow.svg");
  mask-image: url("/icons/arrow.svg");
}

.public-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 28px;
  height: 44px;
  border: 2px solid rgba(7, 193, 96, .34);
  border-radius: 18px;
  transform: translateX(-50%);
}

.public-scroll-cue span {
  width: 5px;
  height: 9px;
  position: absolute;
  top: 8px;
  left: 50%;
  border-radius: 4px;
  background: var(--green);
  transform: translateX(-50%);
  animation: public-scroll 1.7s ease-in-out infinite;
}

.public-story-list {
  display: grid;
}

.public-story {
  min-height: 92svh;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr);
  gap: 88px;
  align-items: center;
  padding: 96px 0;
}

.public-story.reverse {
  grid-template-columns: minmax(420px, 1.14fr) minmax(0, .86fr);
}

.public-story.reverse .public-story-copy {
  grid-column: 2;
  grid-row: 1;
}

.public-story.reverse .public-story-media {
  grid-column: 1;
  grid-row: 1;
}

.public-story-copy {
  max-width: 500px;
}

.public-story h2,
.public-section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 48px;
  line-height: 1.18;
  letter-spacing: 0;
}

.public-story-intro {
  margin: 22px 0 0;
  color: #1E3A2A;
  font-size: 21px;
  line-height: 1.7;
  font-weight: 800;
  white-space: pre-wrap;
}

.public-story-detail {
  margin: 12px 0 28px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
}

.public-story-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #CDEDD9;
  box-shadow: 0 24px 54px rgba(11, 107, 62, .14);
}

.public-story-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.public-story-media.no-image {
  display: grid;
  place-items: center;
  color: rgba(7, 193, 96, .6);
  font-size: 25px;
  font-weight: 900;
}

.public-reveal .public-story-copy,
.public-reveal.public-fee-section .public-section-heading {
  opacity: 0;
  transform: translateX(-54px);
  transition: opacity .62s ease, transform .68s cubic-bezier(.2, .75, .25, 1);
}

.public-reveal .public-story-media {
  opacity: 0;
  transform: translateX(54px) scale(.96);
  transition: opacity .62s ease .08s, transform .72s cubic-bezier(.2, .75, .25, 1) .08s;
}

.public-reveal.reverse .public-story-copy {
  transform: translateX(54px);
}

.public-reveal.reverse .public-story-media {
  transform: translateX(-54px) scale(.96);
}

.public-reveal.is-visible .public-story-copy,
.public-reveal.is-visible .public-story-media,
.public-reveal.public-fee-section.is-visible .public-section-heading {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.public-fee-section {
  min-height: 100svh;
  padding: 136px 0 120px;
}

.public-section-heading {
  max-width: 720px;
  margin-bottom: 48px;
}

.public-section-heading > span {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
}

.public-fee-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 48px;
  align-items: start;
}

.public-site .fee-calculator {
  gap: 24px;
}

.public-site .fee-section {
  gap: 12px;
}

.public-site .fee-label {
  color: #1E3A2A;
  font-size: 15px;
}

.public-site .fee-result {
  position: sticky;
  top: 126px;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 22px;
  border: 0;
  border-radius: 8px;
  transform: none;
  box-shadow: 0 18px 40px rgba(11, 107, 62, .12);
}

.public-footer {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 44px 20px;
  color: var(--ink);
}

.public-empty {
  width: min(600px, calc(100% - 40px));
  margin: 120px auto;
  color: var(--muted);
  text-align: center;
}

.site-login-dialog {
  width: min(480px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: auto;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(11, 107, 62, .28);
}

.site-login-dialog::backdrop {
  background: rgba(11, 107, 62, .48);
  backdrop-filter: blur(5px);
}

.site-login-card {
  position: relative;
  padding: 34px;
}

.site-login-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 27px;
}

.site-login-panel h2 {
  margin: 8px 0 24px;
  font-size: 27px;
}

.site-login-back {
  padding: 0;
  border: 0;
  color: var(--green);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.site-login-panel form {
  display: grid;
  gap: 9px;
}

.site-login-panel label {
  margin-top: 5px;
  color: #64786B;
  font-size: 13px;
  font-weight: 800;
}

.site-login-panel input {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #f4f8f5;
}

.site-login-panel input:focus {
  border-color: var(--green);
  outline: 3px solid rgba(7, 193, 96, .12);
}

.site-login-panel form button {
  min-height: 48px;
  margin-top: 10px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--green);
  font-weight: 900;
}

.site-login-panel form button:disabled {
  opacity: .65;
}

.site-login-message {
  min-height: 22px;
  margin: 12px 0 0;
  color: #1E3A2A;
  font-size: 13px;
}

.site-login-message.error {
  color: #B03A2E;
}

@keyframes public-scroll {
  0%, 100% { opacity: .35; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 12px); }
}

@media (max-width: 719px) {
  .public-header {
    min-height: 82px;
    padding: 12px 14px;
  }

  .public-brand strong {
    font-size: 16px;
  }

  .public-header-actions {
    width: 88px;
    gap: 5px;
  }

  .public-login-button {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  .public-fee-button.compact {
    min-height: 30px;
    font-size: 11px;
  }

  .public-hero,
  .public-story,
  .public-fee-section {
    width: min(100% - 28px, 520px);
  }

  .public-hero {
    min-height: 100svh;
    grid-template-columns: 1fr;
    gap: 46px;
    align-content: center;
    padding: 118px 0 86px;
  }

  .public-hero h1 {
    font-size: 45px;
  }

  .public-lead {
    margin-top: 22px;
    font-size: 18px;
  }

  .public-support {
    font-size: 14px;
  }

  .public-role-entry h2,
  .site-role-chooser h2 {
    font-size: 23px;
  }

  .public-role-options > button {
    min-height: 68px;
  }

  .public-scroll-cue {
    bottom: 18px;
  }

  .public-story,
  .public-story.reverse {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 86px 0;
  }

  .public-story .public-story-copy,
  .public-story.reverse .public-story-copy,
  .public-story .public-story-media,
  .public-story.reverse .public-story-media {
    grid-column: 1;
  }

  .public-story .public-story-copy,
  .public-story.reverse .public-story-copy {
    grid-row: 1;
  }

  .public-story .public-story-media,
  .public-story.reverse .public-story-media {
    grid-row: 2;
  }

  .public-story h2,
  .public-section-heading h2 {
    font-size: 37px;
  }

  .public-story-intro {
    font-size: 18px;
  }

  .public-story-media {
    border-radius: 20px;
  }

  .public-reveal .public-story-copy,
  .public-reveal.reverse .public-story-copy,
  .public-reveal .public-story-media,
  .public-reveal.reverse .public-story-media {
    transform: translateY(34px);
  }

  .public-reveal.is-visible .public-story-copy,
  .public-reveal.is-visible .public-story-media {
    transform: translateY(0);
  }

  .public-fee-section {
    padding: 112px 0 90px;
  }

  .public-section-heading {
    margin-bottom: 36px;
  }

  .public-fee-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .public-site .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-site .project-grid {
    grid-template-columns: 1fr;
  }

  .public-site .fee-result {
    position: static;
  }

  .site-login-card {
    padding: 30px 20px 22px;
  }

  .showcase-editor-head {
    align-items: start;
    flex-direction: column;
    gap: 6px;
  }

  .showcase-page-row {
    grid-template-columns: 24px 74px minmax(0, 1fr);
    gap: 9px;
  }

  .showcase-page-row > b {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .public-scroll-cue span { animation: none; }
  .public-reveal .public-story-copy,
  .public-reveal .public-story-media,
  .public-reveal.public-fee-section .public-section-heading {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Public final cascade overrides */
.public-header-actions {
  width: auto;
}

.public-login-button,
.public-fee-button,
.public-role-options > button,
.public-site .choice-button,
.public-site .project-select,
.public-site .adjustment-option,
.public-site .site-login-panel form button,
.public-site .site-login-back {
  border-radius: 999px;
  box-shadow: none;
}

.public-login-button:hover,
.public-fee-button:hover,
.public-role-options > button:hover,
.public-role-options > button:focus-visible {
  box-shadow: none;
}

.public-role-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-role-options > button {
  position: relative;
  min-height: 138px;
  grid-template-columns: 1fr;
  grid-template-rows: 56px auto;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 16px 22px;
  text-align: center;
}

.public-role-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.public-role-options strong {
  font-size: 16px;
  line-height: 1.25;
}

@media (max-width: 719px) {
  .public-header-actions {
    width: auto;
  }

  .public-role-entry,
  .public-role-entry h2,
  .public-story-copy,
  .public-story-copy .public-eyebrow,
  .public-story-intro,
  .public-story-detail {
    text-align: center;
  }

  .public-role-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .public-role-options > button {
    min-height: 126px;
    grid-template-columns: 1fr;
    grid-template-rows: 52px auto;
    gap: 8px;
    padding: 14px 8px;
  }

  .public-role-icon {
    width: 52px;
    height: 52px;
  }

  .public-role-arrow {
    display: none;
  }

  .public-story-copy {
    max-width: none;
  }

  .public-story-copy .public-fee-button {
    display: none;
  }

  .public-story-detail {
    margin-bottom: 0;
  }
}

/* ClassDojo-style public identity cards and horizontal story galleries. */
.public-role-options {
  gap: 16px;
}

.public-role-options > button {
  min-height: 0;
  aspect-ratio: 1 / 1.04;
  grid-template-columns: 1fr;
  grid-template-rows: 68px auto 24px;
  align-content: space-between;
  justify-items: center;
  gap: 13px;
  padding: 22px 16px 18px;
  border: 3px solid #EEEAFE;
  border-radius: 32px;
  color: #9B8AFB;
  background: #ffffff;
  box-shadow: none;
  text-align: center;
}

.public-role-options > button:hover,
.public-role-options > button:focus-visible {
  border-color: #DDD5FA;
  background: #ffffff;
  box-shadow: none;
  transform: translateY(-2px);
}

.public-role-options > button:active {
  transform: scale(.975);
}

.public-role-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

.public-role-options strong {
  align-self: center;
  color: #9B8AFB;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 900;
}

.public-role-arrow {
  position: static;
  inset: auto;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #3FA7F5;
  transform: none;
}

.public-role-arrow::before {
  width: 22px;
  height: 22px;
}

.public-story.gallery-story,
.public-story.gallery-story.reverse {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr);
  gap: 46px;
  align-content: center;
  padding: 88px 0;
  overflow: hidden;
}

.public-story.gallery-story .public-story-copy,
.public-story.gallery-story.reverse .public-story-copy {
  width: min(760px, calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  grid-column: 1;
  grid-row: 1;
  text-align: center;
}

.public-story.gallery-story .public-story-media,
.public-story.gallery-story.reverse .public-story-media {
  width: 100%;
  grid-column: 1;
  grid-row: 2;
}

.public-reveal.gallery-story .public-story-copy,
.public-reveal.gallery-story.reverse .public-story-copy,
.public-reveal.gallery-story .public-story-media,
.public-reveal.gallery-story.reverse .public-story-media {
  transform: translateY(32px);
}

.public-reveal.gallery-story.is-visible .public-story-copy,
.public-reveal.gallery-story.is-visible .public-story-media {
  transform: translateY(0);
}

.public-story-media.multi-image {
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-story-gallery {
  width: 100%;
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.public-story-rail {
  width: 100%;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.public-story-rail::-webkit-scrollbar {
  display: none;
}

.public-story-rail:active {
  cursor: grabbing;
}

.public-story-track,
.public-story-sequence {
  width: max-content;
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.public-story-track {
  padding: 0;
}

.public-story-sequence {
  flex: none;
}

.public-story-sequence > img {
  flex: 0 0 clamp(170px, 14vw, 280px);
  width: clamp(170px, 14vw, 280px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  object-fit: cover;
  box-shadow: none;
  user-select: none;
  -webkit-user-drag: none;
}

.public-story-single {
  border-radius: inherit;
}

@media (max-width: 719px) {
  .public-role-options {
    gap: 12px;
  }

  .public-role-options > button {
    min-height: 0;
    aspect-ratio: 1 / 1.08;
    grid-template-rows: 62px auto 22px;
    gap: 10px;
    padding: 17px 9px 15px;
    border-width: 2px;
    border-radius: 26px;
  }

  .public-role-icon {
    width: 62px;
    height: 62px;
  }

  .public-role-options strong {
    font-size: 17px;
  }

  .public-role-arrow {
    display: grid;
    width: 22px;
    height: 22px;
  }

  .public-role-arrow::before {
    width: 20px;
    height: 20px;
  }

  .public-story.gallery-story,
  .public-story.gallery-story.reverse {
    width: 100%;
    min-height: 100svh;
    gap: 34px;
    padding: 72px 0 96px;
  }

  .public-story.gallery-story .public-story-copy,
  .public-story.gallery-story.reverse .public-story-copy {
    width: min(100% - 28px, 520px);
  }

  .public-story-gallery,
  .public-story-track,
  .public-story-sequence {
    gap: 10px;
  }

  .public-story-sequence > img {
    flex-basis: clamp(154px, 43vw, 184px);
    width: clamp(154px, 43vw, 184px);
    border-radius: 22px;
  }
}

/* Fixed-height price dialog with a separate result pill. */
.public-price-entry > span {
  display: none;
}

.fee-dialog {
  --fee-panel-radius: 36px;
  width: min(720px, calc(100vw - 28px));
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fee-dialog[open] {
  display: grid;
  gap: 12px;
}

.fee-dialog-card {
  position: relative;
  height: min(620px, calc(100dvh - 192px));
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--fee-panel-radius);
  background: #E9F8EF;
  box-shadow: 0 24px 64px rgba(11, 107, 62, .26);
}

.fee-dialog .public-fee-section {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 38px 28px 24px;
}

.fee-dialog .public-section-heading {
  flex: 0 0 auto;
  margin-bottom: 24px;
  text-align: center;
}

.fee-dialog .public-fee-layout {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.fee-dialog .fee-calculator {
  height: 100%;
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 4px 26px;
  scrollbar-width: none;
}

.fee-dialog .fee-calculator::-webkit-scrollbar {
  display: none;
}

.fee-dialog > .fee-result {
  position: relative;
  inset: auto;
  z-index: 1;
  width: calc(100% - 24px);
  min-height: 124px;
  margin: 0 auto;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--fee-panel-radius);
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(11, 107, 62, .22);
  transform: none;
}

.fee-dialog > .fee-result .fee-result-head {
  align-items: center;
}

.fee-dialog > .fee-result .fee-line {
  gap: 4px 8px;
}

.fee-dialog > .fee-result .fee-line strong b {
  font-size: 27px;
}

.fee-dialog .choice-button,
.fee-dialog .adjustment-option {
  border: 0;
  color: var(--ink);
  background: #ffffff;
  box-shadow: none;
}

.fee-dialog .choice-button.active,
.fee-dialog .adjustment-option.selected {
  color: #ffffff;
  background: var(--green);
}

.fee-dialog .choice-button.active span,
.fee-dialog .choice-button.active strong,
.fee-dialog .adjustment-option.selected strong {
  color: inherit;
}

.fee-dialog .project-choice.active span {
  color: rgba(255, 255, 255, .82);
}

.fee-dialog .round-check {
  display: none;
}

.fee-dialog .adjustment-group {
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .38);
  box-shadow: none;
}

.fee-dialog .project-select {
  border: 0;
  color: var(--ink);
  background: #ffffff;
  box-shadow: none;
}

.fee-dialog .project-select.active,
.fee-dialog .project-select.has-value {
  border: 0;
  color: var(--ink);
}

.fee-dialog .project-grid {
  position: relative;
  z-index: 30;
  overflow: visible;
}

.fee-dialog .project-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 40;
  gap: 7px;
  max-height: min(220px, 28dvh);
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 42px rgba(11, 107, 62, .22);
  scrollbar-width: none;
}

.fee-dialog .project-menu::-webkit-scrollbar {
  display: none;
}

.fee-dialog .project-menu.open {
  display: grid;
}

@media (max-width: 719px) {
  .public-price-entry {
    width: auto;
    gap: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .public-price-entry .public-fee-button {
    min-width: 176px;
  }

  .public-scroll-cue {
    display: none;
  }

  .fee-dialog {
    --fee-panel-radius: 32px;
    width: calc(100vw - 16px);
  }

  .fee-dialog-card {
    height: calc(100dvh - 192px);
  }

  .fee-dialog .public-fee-section {
    padding: 44px 14px 18px;
  }

  .fee-dialog .public-section-heading {
    margin-bottom: 22px;
  }

  .fee-dialog .fee-calculator {
    padding-right: 2px;
    padding-left: 2px;
  }

  .fee-dialog > .fee-result {
    width: calc(100% - 8px);
    min-height: 124px;
    padding: 13px 16px;
  }

  .fee-dialog .choice-button,
  .fee-dialog .adjustment-option {
    min-height: 44px;
    padding: 10px 14px;
  }

  .fee-dialog .project-menu {
    max-height: min(210px, 28dvh);
    border-radius: 22px;
  }
}

/* Showcase presentation modes. */
.field select {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #ffffff;
}

.field > small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.public-story.fan-gallery-story {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  display: block;
  padding: 72px 0;
  overflow: hidden;
}

.public-story-fan-stage {
  position: relative;
  width: 100%;
  min-height: 690px;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  transform: scale(.955);
  transition: opacity .62s ease, transform .78s cubic-bezier(.2, .75, .25, 1);
}

.public-reveal.fan-gallery-story.is-visible .public-story-fan-stage {
  opacity: 1;
  transform: scale(1);
}

.public-story-fan-images {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.public-story-fan-images img {
  position: absolute;
  width: clamp(170px, 18vw, 270px);
  aspect-ratio: 1.18 / 1;
  display: block;
  border-radius: 32px;
  object-fit: cover;
  box-shadow: 0 14px 34px rgba(11, 107, 62, .12);
  opacity: 0;
  animation: public-fan-bob 6.5s ease-in-out infinite;
  animation-delay: calc(var(--fan-index) * -.72s);
  transition: opacity .55s ease calc(var(--fan-index) * 55ms);
}

.public-reveal.fan-gallery-story.is-visible .public-story-fan-images img {
  opacity: 1;
}

.public-story-fan-images img:nth-child(1) {
  top: 4%;
  left: -4%;
  transform: rotate(-15deg);
}

.public-story-fan-images img:nth-child(2) {
  top: -2%;
  left: 22%;
  transform: rotate(-6deg);
}

.public-story-fan-images img:nth-child(3) {
  top: -2%;
  right: 22%;
  transform: rotate(6deg);
}

.public-story-fan-images img:nth-child(4) {
  top: 4%;
  right: -4%;
  transform: rotate(15deg);
}

.public-story-fan-images img:nth-child(5) {
  top: -7%;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

.public-story-fan-images img:nth-child(6) {
  top: 41%;
  left: -7%;
  transform: rotate(-13deg);
}

.public-story-fan-images img:nth-child(7) {
  top: 41%;
  right: -7%;
  transform: rotate(13deg);
}

.public-story-fan-images img:nth-child(8) {
  bottom: -3%;
  left: 22%;
  transform: rotate(6deg);
}

.public-story-fan-images img:nth-child(9) {
  right: 22%;
  bottom: -3%;
  transform: rotate(-6deg);
}

.public-story-fan-copy {
  position: relative;
  z-index: 4;
  width: min(390px, calc(100% - 52px));
  max-width: none;
  margin: 0 auto;
  padding: 22px 18px;
  text-align: center;
  background: transparent;
}

.public-story-fan-copy .public-eyebrow,
.public-story-fan-copy .public-story-intro,
.public-story-fan-copy .public-story-detail {
  text-align: center;
}

.public-story-fan-copy h2 {
  font-size: 48px;
}

@keyframes public-fan-bob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: 9px; }
}

@media (max-width: 719px) {
  .public-story.fan-gallery-story {
    width: 100%;
    min-height: 100svh;
    padding: 52px 0 88px;
  }

  .public-story-fan-stage {
    min-height: 720px;
  }

  .public-story-fan-images img {
    width: clamp(126px, 36vw, 146px);
    border-radius: 24px;
  }

  .public-story-fan-images img:nth-child(1),
  .public-story-fan-images img:nth-child(4) {
    top: 5%;
  }

  .public-story-fan-images img:nth-child(2),
  .public-story-fan-images img:nth-child(3) {
    top: 1%;
  }

  .public-story-fan-images img:nth-child(5) {
    top: 8%;
  }

  .public-story-fan-images img:nth-child(6),
  .public-story-fan-images img:nth-child(7) {
    top: 45%;
    width: 106px;
  }

  .public-story-fan-images img:nth-child(6) {
    left: -24px;
  }

  .public-story-fan-images img:nth-child(7) {
    right: -24px;
  }

  .public-story-fan-images img:nth-child(8) {
    left: 6%;
  }

  .public-story-fan-images img:nth-child(9) {
    right: 6%;
  }

  .public-story-fan-copy {
    width: min(220px, calc(100% - 150px));
    padding: 16px 8px;
  }

  .public-story-fan-copy h2 {
    font-size: 32px;
    line-height: 1.12;
  }

  .public-story-fan-copy .public-story-intro {
    font-size: 15px;
  }

  .public-story-fan-copy .public-story-detail {
    font-size: 13px;
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-story-fan-images img {
    animation: none;
  }
}

/* ============================================================
   新芽学园 v1.1 · 设计系统覆盖层
   微信浅绿主色 + 深绿/橙黄副色 · ClassDojo 式童趣明亮
   ============================================================ */

/* ---------- 全局基础 ---------- */
::selection {
  background: rgba(7, 193, 96, .18);
}

button {
  transition: transform .15s var(--ease-spring), box-shadow .2s var(--ease-smooth),
    background-color .18s ease, border-color .18s ease, color .18s ease;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

@keyframes badge-pop {
  0% { transform: scale(.4); opacity: 0; }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fade-up {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- 通用按钮皮肤：胶囊 + 软糖厚底 ---------- */
.portal-login-card form button,
.site-login-panel form button,
.teacher-modal-submit,
.admin-login-button,
.home-portal-link,
.home-portal-link.secondary,
#save-button,
.add-card,
.upload-button,
.teacher-list-panel header button,
.current-teacher-card > button,
.admin-head button {
  border-radius: var(--radius-pill) !important;
  font-weight: 700;
}

.portal-login-card form button,
.site-login-panel form button,
.teacher-modal-submit,
.admin-login-button,
.home-portal-link,
#save-button,
.teacher-list-panel header button,
.current-teacher-card > button {
  box-shadow: var(--shadow-1), inset 0 -3px 0 rgba(11, 107, 62, .22);
}

.portal-login-card form button:active,
.site-login-panel form button:active,
.teacher-modal-submit:active,
.admin-login-button:active,
.home-portal-link:active,
#save-button:active,
.teacher-list-panel header button:active,
.current-teacher-card > button:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-1), inset 0 0 0 rgba(11, 107, 62, 0);
}

/* ---------- 吉祥物与装饰 ---------- */
.sprout-mascot {
  display: inline-block;
  width: 100%;
  height: auto;
}

.deco-star {
  position: absolute;
  color: var(--sun);
  font-style: normal;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ---------- 门户 v2 ---------- */
.portal-v2 {
  position: relative;
  max-width: 1120px;
}

.portal-v2 .portal-intro {
  position: relative;
}

.portal-v2 .portal-brand-mark {
  border-radius: 14px;
  background: var(--green);
  box-shadow: var(--shadow-1), inset 0 -3px 0 rgba(11, 107, 62, .25);
}

.portal-v2 .portal-intro h1 {
  font-weight: 800;
  letter-spacing: 0;
}

.portal-v2 .portal-intro h1 em {
  color: var(--green-deep);
}

.portal-sub {
  margin: 18px 0 0;
  max-width: 30em;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.portal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.portal-badge {
  display: grid;
  gap: 2px;
  min-width: 96px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--green-mist);
  text-align: center;
}

.portal-badge b {
  color: var(--green-deep);
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}

.portal-badge b sup {
  font-size: .55em;
  font-weight: 600;
}

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

.portal-hero-visual {
  margin-top: 34px;
}

.portal-blob {
  position: relative;
  overflow: hidden;
  width: min(100%, 460px);
  aspect-ratio: 4 / 3;
  border-radius: 42% 58% 52% 48% / 48% 44% 56% 52%;
  background: linear-gradient(160deg, #DFF7EA 0%, #BDEFD6 55%, #A5E8C6 100%);
  box-shadow: var(--shadow-2), inset 0 -10px 30px rgba(7, 193, 96, .12);
}

.portal-blob svg {
  display: block;
  width: 100%;
  height: 100%;
}

.portal-v2 .portal-entry-card {
  border: 1.5px solid rgba(7, 193, 96, .14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-2);
}

.portal-v2 .portal-entry-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.portal-v2 .portal-option {
  grid-template-columns: 52px minmax(0, 1fr) 22px;
  padding: 14px;
  border: 1.5px solid rgba(30, 58, 42, .08);
  border-radius: var(--radius-md);
  background: #ffffff;
}

.portal-v2 .portal-option:hover,
.portal-v2 .portal-option:focus-visible {
  border-color: rgba(7, 193, 96, .5);
  background: var(--green-mist);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

.portal-v2 .portal-option.active {
  border-color: var(--green);
  background: var(--green-mist);
  box-shadow: var(--shadow-1);
}

.portal-v2 .portal-option:active {
  transform: translateY(1px) scale(.99);
}

.portal-v2 .portal-option-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
}

.portal-v2 .portal-option-icon::before {
  width: 28px;
  height: 28px;
}

.portal-v2 .portal-option-icon-visitor {
  color: #B96A00;
  background: var(--orange-mist);
}

.portal-v2 .portal-option-icon-user {
  color: #1D7FBF;
  background: #E3F2FD;
}

.portal-v2 .portal-option-icon-admin {
  color: var(--green-deep);
  background: var(--green-mist);
}

.portal-option-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.portal-v2 .portal-login-card {
  border-top: 1.5px dashed rgba(30, 58, 42, .12);
}

.portal-v2 .portal-login-card input {
  border-radius: var(--radius-sm);
}

.portal-v2 .portal-login-card input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, .16);
}

.portal-v2 .portal-back-button {
  border-radius: var(--radius-pill);
}

@media (min-width: 960px) {
  .portal-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 56px;
    align-items: center;
    padding-top: 56px;
  }

  .portal-v2 .portal-intro h1 {
    font-size: 60px;
    line-height: 1.14;
  }

  .portal-v2 .portal-entry-card {
    padding: 28px;
  }
}

@media (max-width: 719px) {
  .portal-v2 .portal-intro h1 {
    font-size: 38px;
    line-height: 1.18;
  }

  .portal-blob {
    width: 100%;
  }
}

/* ==== 新芽覆盖层 B 段锚点 ==== */

/* ---------- 游客端：顶栏与 Hero ---------- */
.public-header {
  background: rgba(244, 251, 247, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(30, 58, 42, .06);
}

.public-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
}

.public-brand-mark {
  border-radius: 12px;
  background: var(--green);
  box-shadow: var(--shadow-1), inset 0 -2px 0 rgba(11, 107, 62, .25);
}

.public-login-button {
  border: 1.5px solid rgba(30, 58, 42, .14) !important;
  border-radius: var(--radius-pill) !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  font-weight: 700;
}

.public-login-button:hover {
  border-color: var(--green) !important;
  background: var(--green-mist) !important;
}

.public-header-actions .public-fee-button,
.public-cta-band .public-fee-button,
.public-sticky-cta {
  border: none !important;
  border-radius: var(--radius-pill) !important;
  background: var(--orange) !important;
  color: var(--ink) !important;
  font-weight: 800;
  box-shadow: var(--shadow-1), inset 0 -3px 0 rgba(138, 90, 11, .28);
}

.public-header-actions .public-fee-button:hover,
.public-cta-band .public-fee-button:hover,
.public-sticky-cta:hover {
  background: #FFAD3B !important;
}

.public-header-actions .public-fee-button:active,
.public-cta-band .public-fee-button:active,
.public-sticky-cta:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-1), inset 0 0 0 rgba(138, 90, 11, 0);
}

.public-hero {
  position: relative;
}

.public-hero-copy .public-eyebrow,
.public-story-copy .public-eyebrow,
.public-story-fan-copy .public-eyebrow {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--green-mist);
  color: var(--green-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.public-hero h1 {
  font-weight: 800;
  letter-spacing: 0;
}

.public-hero h1 em {
  color: var(--green-deep);
}

.public-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.public-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-1);
  color: var(--muted);
  font-size: 12px;
}

.public-badge b {
  color: var(--green-deep);
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 800;
}

.public-hero-visual {
  display: block;
  margin-top: 40px;
}

@media (min-width: 960px) {
  .public-hero-visual {
    margin-top: 0;
  }
}

@media (max-width: 719px) {
  .public-hero {
    min-height: auto;
    padding: 108px 0 72px;
  }

  .public-hero-visual .portal-blob {
    width: 100%;
  }
}

/* ---------- 游客端：故事版 ---------- */
.public-story-copy h2,
.public-story-fan-copy h2 {
  font-weight: 800;
  letter-spacing: 0;
}

.public-story-media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.public-story-media.no-image {
  display: grid;
  place-items: center;
  gap: 6px;
  background: var(--green-mist);
  color: var(--green-deep);
  font-weight: 700;
}

.public-story-media.no-image::before {
  content: "🌱";
  font-size: 44px;
}

.public-story-sequence > img,
.public-story-single {
  border-radius: 14px;
}

.public-story-dots span {
  border-radius: var(--radius-pill);
}

.public-story .public-fee-button,
.public-story-fan-copy .public-fee-button {
  border: 1.5px solid var(--green) !important;
  border-radius: var(--radius-pill) !important;
  background: #ffffff !important;
  color: var(--green-deep) !important;
  font-weight: 700;
}

.public-story .public-fee-button:hover,
.public-story-fan-copy .public-fee-button:hover {
  background: var(--green-mist) !important;
}

/* ---------- 游客端：收费转化带 ---------- */
.public-cta-band {
  position: relative;
  overflow: hidden;
  margin: 72px auto 0;
  max-width: 1120px;
  padding: 64px 24px;
  border-radius: var(--radius-lg);
  background: var(--green-deep);
  text-align: center;
}

.public-cta-band h2 {
  margin: 0;
  color: #F4FBF7;
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 800;
  letter-spacing: 0;
}

.public-cta-band p {
  margin: 14px auto 0;
  max-width: 26em;
  color: rgba(244, 251, 247, .78);
  font-size: 15px;
  line-height: 1.7;
}

.public-cta-band .public-fee-button {
  margin-top: 28px;
  min-height: 54px;
  padding: 0 34px;
  font-size: 17px;
}

.public-cta-band .deco-star {
  font-size: 20px;
}

@media (max-width: 719px) {
  .public-cta-band {
    margin-top: 56px;
    border-radius: var(--radius-md);
    padding: 48px 20px;
  }
}

/* ---------- 游客端：页脚与悬浮 CTA ---------- */
.public-footer {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 72px;
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--green-deep);
  color: rgba(244, 251, 247, .82);
  text-align: center;
}

.public-footer .public-brand-mark {
  background: rgba(255, 255, 255, .14);
  box-shadow: none;
}

.public-footer strong {
  color: #F4FBF7;
  font-size: 17px;
}

.public-footer p {
  margin: 0;
  font-size: 13px;
}

.public-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 40;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  font-size: 16px;
  transform: translateX(-50%);
  box-shadow: var(--shadow-2), inset 0 -3px 0 rgba(138, 90, 11, .28);
}

@media (max-width: 719px) {
  .public-sticky-cta {
    display: inline-flex;
  }
}

.fee-dialog-open .public-sticky-cta {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}

/* ---------- 收费弹窗皮肤 ---------- */
.fee-dialog-card {
  border-radius: var(--radius-lg);
}

.fee-dialog .public-section-heading > p {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--orange-mist);
  color: #8A5A0B;
  font-weight: 700;
}

.public-site .choice-button {
  border-radius: var(--radius-md);
  font-weight: 700;
  transition: transform .15s var(--ease-spring), box-shadow .2s var(--ease-smooth),
    background-color .18s ease, border-color .18s ease;
}

.public-site .choice-button.active,
.fee-dialog .choice-button.active,
.fee-dialog .adjustment-option.selected {
  border-color: var(--green);
  background: var(--green-mist);
  color: var(--green-deep);
}

.fee-dialog .project-choice.active span,
.fee-dialog .project-choice.active strong {
  color: var(--green-deep);
}

.fee-dialog .choice-button.active {
  animation: badge-pop .25s var(--ease-spring);
}

.public-site .project-select {
  border-radius: var(--radius-md);
  font-weight: 700;
}

.fee-dialog .project-select.active,
.fee-dialog .project-select.has-value {
  border-color: var(--green);
}

.fee-dialog .project-menu {
  border-radius: var(--radius-md);
}

.fee-dialog .adjustment-option {
  border-radius: var(--radius-md);
  transition: transform .15s var(--ease-spring), background-color .18s ease, border-color .18s ease;
}

.fee-dialog > .fee-result {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--orange-mist);
  box-shadow: var(--shadow-1);
}

.fee-dialog > .fee-result .fee-line strong b {
  color: #8A5A0B;
  font-family: var(--font-num);
  font-weight: 800;
}

.fee-dialog > .fee-result .fee-line em {
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
}

/* ---------- 登录弹窗皮肤 ---------- */
.site-login-card {
  border-radius: var(--radius-lg);
}

.site-login-panel input {
  border-radius: var(--radius-sm);
}

.site-login-panel input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, .16);
}

.site-login-back {
  border-radius: var(--radius-pill);
}

/* ==== 新芽覆盖层 C 段锚点 ==== */

/* ---------- 家长端：问候条与分段控件 ---------- */
.screen-head p {
  color: var(--green-deep);
  font-weight: 700;
}

.screen-head h2 {
  font-weight: 800;
  letter-spacing: 0;
}

.user-subtabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--green-mist);
}

.user-subtabs button {
  flex: 1;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--green-deep);
  font-weight: 700;
  min-height: 38px;
}

.user-subtabs button.active {
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* ---------- 家长端：菜单卡片 ---------- */
.day-card {
  border: 1.5px solid rgba(30, 58, 42, .06);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-1);
}

.dish-card {
  border-radius: var(--radius-md);
  transition: transform .15s var(--ease-spring), box-shadow .2s var(--ease-smooth);
}

.dish-card:active {
  transform: scale(.98);
}

.dish-thumb {
  border-radius: 12px;
}

.menu-notice {
  border-radius: var(--radius-md);
  background: var(--orange-mist);
  color: #8A5A0B;
}

.menu-meta-line {
  font-family: var(--font-num);
}

.user-dish-card {
  border-radius: var(--radius-lg);
}

.user-dish-card .menu-dish-editor-image {
  border-radius: var(--radius-md);
}

/* ---------- 底部 Tab：悬浮胶囊托盘（家长端 + 教师端） ---------- */
@media (max-width: 719px) {
  .bottom-tabs.user-tabs,
  .bottom-tabs.admin-tabs {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-2);
  }
}

@media (min-width: 720px) {
  .bottom-tabs.user-tabs,
  .bottom-tabs.admin-tabs {
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-2);
  }
}

.bottom-tabs button {
  border-radius: var(--radius-pill);
}

.bottom-tabs button.active {
  background: var(--green-mist);
  color: var(--green-deep);
}

.bottom-tabs button.active span,
.bottom-tabs button.active b {
  color: var(--green-deep);
}

.admin-subtabs {
  border-radius: var(--radius-pill);
  background: var(--green-mist);
}

.admin-tabs .admin-subtabs button {
  border-radius: var(--radius-pill);
}

.admin-tabs .admin-subtabs button.active {
  background: #ffffff;
  color: var(--green-deep);
  box-shadow: var(--shadow-1);
}

.admin-home-return {
  border-radius: var(--radius-pill);
}

/* ---------- 教师端：工作台皮肤 ---------- */
.admin-body {
  background: var(--paper);
}

.admin-head h1 {
  font-weight: 800;
  letter-spacing: 0;
}

.admin-head p {
  color: var(--green-deep);
  font-weight: 700;
}

.teacher-list-panel,
.teacher-modal-card,
.menu-admin-panel,
.current-teacher-card,
.teacher-placeholder-panel,
.admin-login-card,
.pricing-editor-head,
.pricing-editor-list > section,
.editor-list > article {
  border: 1.5px solid rgba(30, 58, 42, .06);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.teacher-modal-card {
  border-radius: var(--radius-lg);
}

.teacher-role-pill {
  border-radius: var(--radius-pill);
  background: var(--green-mist);
  color: var(--green-deep);
  font-weight: 700;
}

.delete-card {
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.menu-dish-editor-image {
  border-radius: var(--radius-md);
}

.calendar-corner,
.calendar-day-head {
  background: var(--green-deep);
  font-family: var(--font-num);
}

.calendar-category {
  background: rgba(11, 107, 62, .88);
}

/* ---------- 收尾：动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fee-dialog .choice-button.active {
    animation: none;
  }

  .portal-v2 .portal-option:hover,
  .portal-v2 .portal-option:focus-visible {
    transform: none;
  }
}

/* ============================================================
   新芽学园 v1.2 · 设计系统覆盖层 D 段
   ① 展示页「一页一景」场景卡重设计  ② 单页滑动 scroll-snap
   ③ 动效深化（弹性入场 + 错位 stagger + 闲置浮动）
   ④ 收费计算器选中按钮修复（实心绿底白字）
   ============================================================ */

/* ---------- D1. 单页滑动：整页 scroll-snap（仅展示页） ---------- */
@media (max-width: 719px) {
  html:has(> body.public-site) {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 84px;
  }
}

@media (min-width: 720px) {
  html:has(> body.public-site) {
    scroll-snap-type: y proximity;
    scroll-padding-top: 96px;
  }
}

.public-site .public-hero,
.public-site .public-story,
.public-site .public-cta-band {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.public-site .public-footer {
  scroll-snap-align: end;
}

/* ---------- D2. 展示页「一页一景」场景卡 ---------- */
.public-site .public-story-list {
  counter-reset: story-page;
}

.public-site .public-story {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 148px);
  margin: 14px auto;
  padding: 84px 64px;
  overflow: hidden;
  border: 1.5px solid rgba(30, 58, 42, .05);
  border-radius: 34px;
  box-shadow: var(--shadow-1);
}

/* 四色循环场景 */
.public-site .public-story-list > .public-story:nth-child(4n+1) {
  background: #E5F9EE;
}

.public-site .public-story-list > .public-story:nth-child(4n+2) {
  background: #FFF2DC;
}

.public-site .public-story-list > .public-story:nth-child(4n+3) {
  background: #E7F4FE;
}

.public-site .public-story-list > .public-story:nth-child(4n+4) {
  background: #F0EDFE;
}

/* 横滑画廊与扇形画廊保持满幅场景 */
.public-site .public-story.gallery-story,
.public-site .public-story.fan-gallery-story {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.public-site .public-story.gallery-story {
  padding: 88px 0;
}

.public-site .public-story.fan-gallery-story {
  padding: 72px 0;
}

/* 幽灵页码 */
.public-site .public-story::before {
  counter-increment: story-page;
  content: counter(story-page, decimal-leading-zero);
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 0;
  color: rgba(30, 58, 42, .07);
  font-family: var(--font-num);
  font-size: clamp(72px, 9vw, 128px);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

/* 圆点矩阵装饰 */
.public-site .public-story::after {
  content: "";
  position: absolute;
  bottom: 26px;
  left: 30px;
  z-index: 0;
  width: 126px;
  height: 88px;
  background-image: radial-gradient(rgba(30, 58, 42, .12) 2.2px, transparent 2.8px);
  background-size: 19px 19px;
  pointer-events: none;
}

.public-site .public-story-copy,
.public-site .public-story-media,
.public-site .public-story-gallery {
  position: relative;
  z-index: 1;
}

/* 照片白卡框 */
.public-site .public-story-media:not(.multi-image) {
  border: 6px solid #ffffff;
  box-shadow: 0 20px 46px rgba(30, 58, 42, .14);
}

.public-site .public-story-media.no-image {
  background: rgba(255, 255, 255, .62);
}

.public-site .public-story-sequence > img {
  border: 5px solid #ffffff;
  box-shadow: 0 10px 24px rgba(30, 58, 42, .12);
}

/* 文案小标题胶囊 */
.public-site .public-story-copy .public-eyebrow,
.public-site .public-story-fan-copy .public-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .78);
  color: var(--green-deep);
  font-size: 13px;
  box-shadow: var(--shadow-1);
}

@media (max-width: 719px) {
  .public-site .public-story {
    min-height: calc(100svh - 108px);
    margin: 10px auto;
    padding: 46px 22px 40px;
    border-radius: 26px;
    gap: 30px;
    align-content: center;
  }

  .public-site .public-story.gallery-story {
    min-height: 100svh;
    padding: 64px 0 88px;
  }

  .public-site .public-story.fan-gallery-story {
    min-height: 100svh;
    padding: 52px 0 88px;
  }

  .public-site .public-story::before {
    top: 14px;
    right: 18px;
    font-size: 64px;
  }

  .public-site .public-story::after {
    bottom: 16px;
    left: 18px;
    width: 88px;
    height: 62px;
    background-size: 16px 16px;
  }
}

/* ---------- D3. 动效深化：弹性入场 + 错位 stagger ---------- */
.public-reveal .public-story-copy {
  transform: translateX(-76px);
  transition: opacity .55s ease, transform .95s var(--ease-spring);
}

.public-reveal.reverse .public-story-copy {
  transform: translateX(76px);
}

.public-reveal .public-story-media {
  transform: translateX(76px) scale(.9) rotate(1.6deg);
  transition: opacity .55s ease .1s, transform 1s var(--ease-spring) .1s;
}

.public-reveal.reverse .public-story-media {
  transform: translateX(-76px) scale(.9) rotate(-1.6deg);
}

.public-reveal.is-visible .public-story-copy,
.public-reveal.is-visible .public-story-media {
  transform: translateX(0) scale(1) rotate(0deg);
}

/* 满幅画廊：纵向加深 */
.public-reveal.gallery-story .public-story-copy,
.public-reveal.gallery-story.reverse .public-story-copy {
  transform: translateY(56px);
}

.public-reveal.gallery-story .public-story-media,
.public-reveal.gallery-story.reverse .public-story-media {
  transform: translateY(72px) scale(.96);
}

.public-reveal.gallery-story.is-visible .public-story-copy,
.public-reveal.gallery-story.is-visible .public-story-media {
  transform: translateY(0) scale(1);
}

/* 文案子元素依次浮起 */
.public-reveal .public-story-copy > *,
.public-reveal .public-story-fan-copy > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .75s var(--ease-spring);
}

.public-reveal.is-visible .public-story-copy > *,
.public-reveal.is-visible .public-story-fan-copy > * {
  opacity: 1;
  transform: translateY(0);
}

.public-reveal.is-visible .public-story-copy > *:nth-child(1),
.public-reveal.is-visible .public-story-fan-copy > *:nth-child(1) { transition-delay: .14s; }

.public-reveal.is-visible .public-story-copy > *:nth-child(2),
.public-reveal.is-visible .public-story-fan-copy > *:nth-child(2) { transition-delay: .22s; }

.public-reveal.is-visible .public-story-copy > *:nth-child(3),
.public-reveal.is-visible .public-story-fan-copy > *:nth-child(3) { transition-delay: .3s; }

.public-reveal.is-visible .public-story-copy > *:nth-child(4),
.public-reveal.is-visible .public-story-fan-copy > *:nth-child(4) { transition-delay: .38s; }

.public-reveal.is-visible .public-story-copy > *:nth-child(5),
.public-reveal.is-visible .public-story-fan-copy > *:nth-child(5) { transition-delay: .46s; }

.public-reveal.is-visible .public-story-copy > *:nth-child(6),
.public-reveal.is-visible .public-story-fan-copy > *:nth-child(6) { transition-delay: .54s; }

/* 入场后闲置轻浮动 */
@keyframes story-idle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(.5deg); }
}

.public-reveal.is-visible .public-story-media:not(.multi-image) {
  animation: story-idle-float 7.5s ease-in-out 1.5s infinite;
}

/* 画廊图片依次弹入 */
.public-reveal .public-story-sequence > img {
  opacity: 0;
  transform: translateY(38px) scale(.92);
  transition: opacity .45s ease, transform .8s var(--ease-spring);
}

.public-reveal.is-visible .public-story-sequence > img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.public-reveal.is-visible .public-story-sequence > img:nth-child(1) { transition-delay: .1s; }
.public-reveal.is-visible .public-story-sequence > img:nth-child(2) { transition-delay: .17s; }
.public-reveal.is-visible .public-story-sequence > img:nth-child(3) { transition-delay: .24s; }
.public-reveal.is-visible .public-story-sequence > img:nth-child(4) { transition-delay: .31s; }
.public-reveal.is-visible .public-story-sequence > img:nth-child(5) { transition-delay: .38s; }
.public-reveal.is-visible .public-story-sequence > img:nth-child(6) { transition-delay: .45s; }
.public-reveal.is-visible .public-story-sequence > img:nth-child(7) { transition-delay: .52s; }
.public-reveal.is-visible .public-story-sequence > img:nth-child(8) { transition-delay: .59s; }
.public-reveal.is-visible .public-story-sequence > img:nth-child(n+9) { transition-delay: .66s; }

/* 扇形画廊：从中心弹开成扇 */
.public-site .public-story-fan-images img { --fan-x: 0; --fan-rot: 0deg; }
.public-site .public-story-fan-images img:nth-child(1) { --fan-rot: -15deg; }
.public-site .public-story-fan-images img:nth-child(2) { --fan-rot: -6deg; }
.public-site .public-story-fan-images img:nth-child(3) { --fan-rot: 6deg; }
.public-site .public-story-fan-images img:nth-child(4) { --fan-rot: 15deg; }
.public-site .public-story-fan-images img:nth-child(5) { --fan-x: -50%; --fan-rot: -2deg; }
.public-site .public-story-fan-images img:nth-child(6) { --fan-rot: -13deg; }
.public-site .public-story-fan-images img:nth-child(7) { --fan-rot: 13deg; }
.public-site .public-story-fan-images img:nth-child(8) { --fan-rot: 6deg; }
.public-site .public-story-fan-images img:nth-child(9) { --fan-rot: -6deg; }

.public-site .public-story-fan-images img {
  transform: translateX(var(--fan-x)) translateY(90px) rotate(0deg) scale(.5);
  transition: opacity .45s ease calc(var(--fan-index) * 65ms),
    transform .9s var(--ease-spring) calc(var(--fan-index) * 65ms);
}

.public-reveal.fan-gallery-story.is-visible .public-story-fan-images img {
  transform: translateX(var(--fan-x)) translateY(0) rotate(var(--fan-rot)) scale(1);
}

.public-site .public-story-fan-stage {
  transform: scale(.88) rotate(-2.5deg);
  transition: opacity .6s ease, transform 1.05s var(--ease-spring);
}

.public-reveal.fan-gallery-story.is-visible .public-story-fan-stage {
  transform: scale(1) rotate(0deg);
}

@media (max-width: 719px) {
  .public-reveal .public-story-copy,
  .public-reveal.reverse .public-story-copy {
    transform: translateY(56px);
  }

  .public-reveal .public-story-media,
  .public-reveal.reverse .public-story-media {
    transform: translateY(64px) scale(.93) rotate(1.2deg);
  }

  .public-reveal.is-visible .public-story-copy,
  .public-reveal.is-visible .public-story-media {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* ---------- D4. 首屏入场 · 转化带 · 悬浮按钮 · 门户入场 ---------- */
@keyframes sprout-rise {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sprout-pop {
  from { opacity: 0; transform: translateY(36px) scale(.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.public-hero-copy > * {
  animation: sprout-rise .8s var(--ease-smooth) backwards;
}

.public-hero-copy > *:nth-child(1) { animation-delay: .06s; }
.public-hero-copy > *:nth-child(2) { animation-delay: .14s; }
.public-hero-copy > *:nth-child(3) { animation-delay: .24s; }
.public-hero-copy > *:nth-child(4) { animation-delay: .32s; }
.public-hero-copy > *:nth-child(5) { animation-delay: .4s; }

.public-hero-visual {
  animation: sprout-pop 1s var(--ease-spring) .28s backwards;
}

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

.public-hero .sprout-mascot {
  animation: mascot-bob 3.4s ease-in-out 1.2s infinite;
}

/* 首屏行动区 */
.public-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.public-hero-actions .public-fee-button {
  min-height: 56px;
  padding: 0 34px;
  border-radius: var(--radius-pill);
  font-size: 17px;
  box-shadow: 0 14px 28px rgba(7, 193, 96, .28), inset 0 -3px 0 rgba(11, 107, 62, .3);
}

.public-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 26px;
  border: 2px solid rgba(7, 193, 96, .42);
  border-radius: var(--radius-pill);
  color: var(--green-deep);
  background: rgba(255, 255, 255, .72);
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s var(--ease-spring), background-color .2s ease, border-color .2s ease;
}

.public-hero-ghost:hover {
  border-color: var(--green);
  background: #ffffff;
  transform: translateY(-2px);
}

.public-hero-ghost-arrow {
  display: inline-block;
  animation: ghost-arrow-bob 1.7s ease-in-out infinite;
}

@keyframes ghost-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@media (max-width: 719px) {
  .public-hero-actions {
    gap: 10px;
    margin-top: 26px;
  }

  .public-hero-actions .public-fee-button,
  .public-hero-ghost {
    flex: 1 1 100%;
    min-height: 52px;
    justify-content: center;
  }
}

/* 转化带滚动入场 */
.public-reveal.public-cta-band {
  opacity: 0;
  transform: translateY(60px) scale(.95);
  transition: opacity .6s ease, transform .95s var(--ease-spring);
}

.public-reveal.public-cta-band.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.public-reveal.public-cta-band > *:not(.deco-star) {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .7s var(--ease-spring);
}

.public-reveal.public-cta-band.is-visible > *:not(.deco-star) {
  opacity: 1;
  transform: translateY(0);
}

.public-reveal.public-cta-band.is-visible > h2 { transition-delay: .15s; }
.public-reveal.public-cta-band.is-visible > p { transition-delay: .25s; }
.public-reveal.public-cta-band.is-visible > .public-fee-button { transition-delay: .35s; }

@keyframes deco-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .85; }
  50% { transform: scale(1.3) rotate(14deg); opacity: 1; }
}

.public-cta-band .deco-star {
  animation: deco-twinkle 3s ease-in-out infinite;
}

.public-cta-band .deco-star:nth-of-type(2) { animation-delay: 1s; }
.public-cta-band .deco-star:nth-of-type(3) { animation-delay: 1.9s; }

@keyframes sticky-cta-pulse {
  0%, 100% { box-shadow: var(--shadow-2), inset 0 -3px 0 rgba(138, 90, 11, .28); }
  50% { box-shadow: 0 8px 26px rgba(255, 159, 28, .45), inset 0 -3px 0 rgba(138, 90, 11, .28); }
}

.public-sticky-cta {
  animation: sticky-cta-pulse 2.8s ease-in-out infinite;
}

/* 门户页入场 */
.portal-v2 .portal-brand-lockup,
.portal-v2 .portal-intro h1,
.portal-v2 .portal-sub,
.portal-v2 .portal-hero-visual,
.portal-v2 .portal-entry-card {
  animation: sprout-rise .75s var(--ease-smooth) backwards;
}

.portal-v2 .portal-intro h1 { animation-delay: .08s; }
.portal-v2 .portal-sub { animation-delay: .16s; }
.portal-v2 .portal-hero-visual { animation-delay: .24s; }
.portal-v2 .portal-entry-card { animation-delay: .3s; }

.portal-v2 .portal-option {
  animation: sprout-rise .55s var(--ease-smooth) backwards;
}

.portal-v2 .portal-option:nth-child(1) { animation-delay: .42s; }
.portal-v2 .portal-option:nth-child(2) { animation-delay: .5s; }
.portal-v2 .portal-option:nth-child(3) { animation-delay: .58s; }

/* ---------- D5. 计算器选中按钮：实心绿底白字（修复与背景同色） ---------- */
.public-site .choice-button.active,
.fee-dialog .choice-button.active,
.fee-dialog .adjustment-option.selected {
  border-color: var(--green-deep);
  background: var(--green);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(7, 193, 96, .32), inset 0 -3px 0 rgba(11, 107, 62, .38);
}

.fee-dialog .choice-button.active span,
.fee-dialog .choice-button.active strong,
.fee-dialog .adjustment-option.selected strong,
.fee-dialog .project-choice.active strong {
  color: #ffffff;
}

.fee-dialog .project-choice.active span {
  color: rgba(255, 255, 255, .85);
}

/* ---------- D6. 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(> body.public-site) {
    scroll-snap-type: none;
  }

  .public-hero-copy > *,
  .public-hero-visual,
  .portal-v2 .portal-brand-lockup,
  .portal-v2 .portal-intro h1,
  .portal-v2 .portal-sub,
  .portal-v2 .portal-hero-visual,
  .portal-v2 .portal-entry-card,
  .portal-v2 .portal-option,
  .public-hero .sprout-mascot,
  .public-hero-ghost-arrow,
  .public-sticky-cta,
  .public-cta-band .deco-star,
  .public-reveal.is-visible .public-story-media:not(.multi-image) {
    animation: none;
  }

  .public-reveal .public-story-copy > *,
  .public-reveal .public-story-fan-copy > *,
  .public-reveal.public-cta-band,
  .public-reveal.public-cta-band > *:not(.deco-star),
  .public-reveal .public-story-sequence > img,
  .public-site .public-story-fan-stage,
  .public-site .public-story-fan-images img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}