@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600&family=ZCOOL+XiaoWei&display=swap');

:root {
  --bg: #F4EFE5;
  --bg-deep: #EEE7DA;
  --surface: #FFFCF7;
  --ink: #2C2A26;
  --ink-light: #6B6560;
  --ink-ghost: #938C85;
  --clay: #B78369;
  --clay-soft: #D8C1AD;
  --sage: #A6B6A2;
  --mist: #C3D0D6;
  --lavender: #C8BDC9;
  --border: rgba(74, 61, 49, .10);
  --shadow: 0 14px 38px rgba(70, 52, 36, .07);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background: radial-gradient(circle at 8% 3%, rgba(216,193,173,.24), transparent 28%), radial-gradient(circle at 91% 84%, rgba(166,182,162,.14), transparent 30%), #E9E4DB;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.prototype-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 70px rgba(44,42,38,.14);
}

.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 0 24px 110px;
  background: radial-gradient(circle at 96% 2%, rgba(216,193,173,.30), transparent 29%), radial-gradient(circle at 0 39%, rgba(166,182,162,.17), transparent 30%), radial-gradient(circle at 94% 81%, rgba(200,189,201,.12), transparent 29%), repeating-linear-gradient(115deg, rgba(90,75,58,.018) 0 1px, transparent 1px 6px), var(--bg);
}
.page::after { content: "轻一点 · 慢慢来"; position: absolute; right: 7px; bottom: 112px; color: rgba(107,101,96,.17); font: 12px "ZCOOL XiaoWei", serif; letter-spacing: .28em; writing-mode: vertical-rl; pointer-events: none; }
.page.review-page { background: radial-gradient(circle at 96% 2%, rgba(200,189,201,.29), transparent 29%), radial-gradient(circle at 0 46%, rgba(195,208,214,.20), transparent 31%), repeating-linear-gradient(115deg, rgba(90,75,58,.018) 0 1px, transparent 1px 6px), var(--bg); }
.page.leader-page { background: radial-gradient(circle at 95% 2%, rgba(166,182,162,.28), transparent 30%), radial-gradient(circle at 0 51%, rgba(216,193,173,.18), transparent 31%), repeating-linear-gradient(115deg, rgba(90,75,58,.018) 0 1px, transparent 1px 6px), var(--bg); }

.topbar { min-height: 92px; padding-top: 44px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.brand-name { position: relative; display: inline-block; font: 28px "ZCOOL XiaoWei", "Noto Serif SC", serif; letter-spacing: .12em; }
.brand-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: linear-gradient(90deg, var(--clay), transparent); }
.brand-en { margin-top: 8px; color: var(--ink-ghost); font-size: 11px; letter-spacing: .18em; }
.top-actions { display: flex; flex-shrink: 0; align-items: center; gap: 10px; }
.round-button, .avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; }
.round-button { border: 1px solid rgba(255,255,255,.75); background: rgba(255,252,247,.70); box-shadow: 0 5px 18px rgba(67,52,38,.06); }
.avatar { padding: 0; border: 0; color: #fff9f2; background: linear-gradient(145deg, var(--clay-soft), var(--clay)); box-shadow: 0 6px 20px rgba(183,131,105,.24); font-size: 12px; line-height: 1; white-space: nowrap; }
.icon { width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: 18px; line-height: 1; }

.page-header { min-height: 92px; padding-top: 43px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: start; gap: 10px; }
.page-header-copy { padding-top: 2px; text-align: center; }
.page-header-title { display: block; font: 600 17px "Noto Serif SC", serif; }
.page-header-sub { display: block; margin-top: 3px; color: var(--ink-ghost); font-size: 10px; letter-spacing: .12em; }

.eyebrow { color: var(--clay); font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.hero { padding-top: 18px; }
.hero-date { margin-bottom: 9px; color: var(--ink-ghost); font-size: 12px; letter-spacing: .1em; }
.hero h1, .page-intro h1 { margin: 0; font: 300 27px/1.5 "Noto Serif SC", serif; }
.hero h1 em, .page-intro h1 em { color: var(--clay); font-style: italic; font-weight: 600; }
.page-intro { padding: 12px 2px 20px; }
.page-intro p { margin: 9px 0 0; color: var(--ink-light); font-size: 13px; line-height: 1.75; }

.soft-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.84); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.56), transparent 42%), var(--surface); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.92); }
.next-card { margin-top: 26px; padding: 22px; }
.next-card::before { content: ""; position: absolute; top: -42px; right: -32px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(216,193,173,.43), transparent 69%); }
.next-card::after { content: "轻"; position: absolute; right: 15px; bottom: -25px; color: rgba(183,131,105,.05); font: 106px/1 "ZCOOL XiaoWei", serif; }
.card-content { position: relative; z-index: 1; }
.card-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--clay); font-size: 11px; font-weight: 500; letter-spacing: .12em; }
.card-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 5px rgba(183,131,105,.09); }
.card-title { margin: 0; font: 600 19px/1.45 "Noto Serif SC", serif; }
.card-meta { margin-top: 7px; color: var(--ink-light); font-size: 13px; line-height: 1.7; }
.small-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink-ghost); font-size: 11px; line-height: 1.6; }
.card-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: 18px; }

.primary, .secondary, .text-button { min-height: 46px; border-radius: 16px; font-size: 14px; font-weight: 500; }
.primary { border: 0; color: var(--bg); background: var(--ink); }
.secondary { border: 1px solid var(--border); color: var(--ink); background: transparent; }
.text-button { min-height: auto; padding: 8px 0; border: 0; color: var(--clay); background: transparent; }
.primary:active, .secondary:active, .activity-card:active, .choice:active { opacity: .88; transform: scale(.98); }
.primary:disabled { opacity: .35; cursor: not-allowed; }
.full { width: 100%; }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 0 14px; }
.section-heading h2 { margin: 0; font: 600 18px "Noto Serif SC", serif; }
.section-heading button { border: 0; color: var(--clay); background: transparent; font-size: 12px; }
.section-heading span { color: var(--ink-ghost); font-size: 11px; }
.section-heading.compact { margin-top: 4px; }
.planned-heading { margin-top: 24px; }
.activity-list { display: grid; gap: 12px; }
.activity-card { width: 100%; display: grid; grid-template-columns: 5px 1fr auto; gap: 14px; align-items: center; min-height: 104px; padding: 17px 16px 17px 0; text-align: left; transition: transform .18s ease; }
.activity-line { align-self: stretch; border-radius: 0 4px 4px 0; background: var(--sage); }
.activity-card.limited .activity-line { background: var(--clay); }
.activity-card.planned { background: linear-gradient(145deg, rgba(255,255,255,.48), transparent 42%), rgba(249,245,237,.78); }
.activity-card.planned .activity-line { background: var(--mist); }
.activity-card h3 { margin: 0 0 6px; font: 600 16px/1.45 "Noto Serif SC", serif; }
.activity-card p { margin: 0; color: var(--ink-light); font-size: 12px; line-height: 1.65; }
.activity-price { margin-top: 7px; font-size: 16px; font-weight: 600; }
.activity-price small { margin-left: 2px; color: var(--ink-ghost); font-size: 10px; font-weight: 400; }
.status { align-self: start; padding: 6px 10px; border-radius: 999px; color: #6F846F; background: rgba(166,182,162,.18); font-size: 11px; white-space: nowrap; }
.limited .status, .status.clay { color: var(--clay); background: rgba(183,131,105,.12); }
.planned .status { color: #687D87; background: rgba(195,208,214,.26); }
.status.mist { color: #687D87; background: rgba(195,208,214,.26); }

.experience-entry, .leader-entry { margin-top: 20px; padding: 19px; border-radius: 20px; border: 1px solid rgba(255,255,255,.74); background: linear-gradient(135deg, rgba(200,189,201,.28), rgba(195,208,214,.25), rgba(255,252,247,.44)); }
.leader-entry { background: linear-gradient(135deg, rgba(166,182,162,.31), rgba(216,193,173,.20), rgba(255,252,247,.48)); }
.experience-entry h3, .leader-entry h3 { margin: 0 0 6px; font: 600 16px "Noto Serif SC", serif; }
.experience-entry p, .leader-entry p { margin: 0; color: var(--ink-light); font-size: 12px; line-height: 1.7; }

.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; width: min(100%, 430px); display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 28px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(74,61,49,.08); background: rgba(244,239,229,.93); backdrop-filter: blur(20px); transform: translateX(-50%); }
.nav-item { position: relative; min-height: 43px; display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; color: var(--ink-ghost); background: transparent; font-size: 10px; }
.nav-item.active { color: var(--ink); }
.nav-item.active::before { content: ""; position: absolute; top: -10px; width: 22px; height: 1px; background: var(--clay); }
.nav-icon { font-size: 18px; }

.detail-cover { height: 210px; margin: 0 -24px; position: relative; overflow: hidden; background: linear-gradient(150deg, rgba(255,255,255,.04), rgba(44,42,38,.2)), radial-gradient(circle at 28% 28%, #D4BFA9 0 18%, transparent 19%), radial-gradient(ellipse at 74% 65%, #8FA18D 0 21%, transparent 22%), linear-gradient(135deg, #D8DDD3, #B7C4B4 45%, #816F60); }
.detail-cover::before { content: ""; position: absolute; left: 45px; bottom: -24px; width: 112px; height: 175px; border-radius: 55% 45% 15% 15%; background: rgba(247,245,240,.78); transform: rotate(-9deg); }
.detail-cover::after { content: ""; position: absolute; right: 43px; bottom: -25px; width: 86px; height: 155px; border-radius: 50% 50% 12% 12%; background: rgba(55,67,52,.63); transform: rotate(8deg); }
.detail-title { padding: 20px 2px 0; }
.detail-title h1 { margin: 9px 0 8px; font: 600 24px/1.45 "Noto Serif SC", serif; }
.detail-title p { margin: 0; color: var(--ink-light); font-size: 13px; line-height: 1.75; }
.day-rhythm { display: grid; gap: 0; }
.day-rhythm-item { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.day-rhythm-item:last-child { border-bottom: 0; }
.day-number { color: var(--clay); font: 400 15px "Noto Serif SC", serif; letter-spacing: .08em; }
.day-rhythm-item span { color: var(--ink-ghost); font-size: 10px; }
.day-rhythm-item h3 { margin: 3px 0 4px; font: 600 16px "Noto Serif SC", serif; }
.day-rhythm-item p { margin: 0; color: var(--ink-light); font-size: 11px; line-height: 1.7; }
.day-rhythm.compact { padding: 2px 17px; border: 1px solid rgba(255,255,255,.76); border-radius: 20px; background: rgba(255,252,247,.55); }
.day-rhythm.compact .day-rhythm-item { grid-template-columns: 34px 1fr; padding: 12px 0; }
.daily-inspiration { margin-top: 24px; padding: 20px; border-radius: 22px; background: radial-gradient(circle at 100% 0, rgba(216,193,173,.30), transparent 45%), rgba(255,252,247,.52); border: 1px solid rgba(255,255,255,.75); }
.daily-inspiration blockquote { margin: 11px 0 8px; font: 400 16px/1.8 "Noto Serif SC", serif; }
.daily-inspiration p { margin: 0; color: var(--ink-ghost); font-size: 10px; }
.info-list { display: grid; gap: 10px; margin: 18px 0; }
.info-row { display: grid; grid-template-columns: 22px 1fr; gap: 9px; color: var(--ink-light); font-size: 13px; line-height: 1.65; }
.info-row b { color: var(--clay); font-weight: 500; }
.detail-section { margin-top: 15px; padding: 18px; }
.detail-section h2 { margin: 0 0 10px; font: 600 16px "Noto Serif SC", serif; }
.detail-section p, .detail-section li { color: var(--ink-light); font-size: 13px; line-height: 1.75; }
.detail-section ul { margin: 0; padding-left: 20px; }
.flow-list { display: grid; gap: 10px; }
.flow-row { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.flow-row:last-child { border: 0; padding-bottom: 0; }
.flow-time { color: var(--clay); font-size: 12px; }
.sticky-actions { position: fixed; z-index: 18; left: 50%; bottom: 0; width: min(100%, 430px); display: grid; grid-template-columns: 1fr 1.7fr; align-items: center; gap: 12px; padding: 12px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(244,239,229,.95); backdrop-filter: blur(18px); transform: translateX(-50%); }
.fee strong { display: block; font-size: 20px; }
.fee small { color: var(--ink-ghost); font-size: 10px; }
.fee strong > small { display: inline; margin-left: 3px; font-weight: 400; }

.progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 3px 0 22px; }
.progress span { height: 3px; border-radius: 3px; background: rgba(44,42,38,.10); }
.progress span.active { background: var(--clay); }
.form-card { padding: 18px; margin-bottom: 12px; }
.form-card h2 { margin: 0 0 14px; font: 600 16px "Noto Serif SC", serif; }
.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }
.field label { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--ink-light); font-size: 12px; }
.field label small { color: var(--ink-ghost); }
.input, .textarea, .select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; color: var(--ink); background: #F9F5ED; font-size: 14px; }
.textarea { min-height: 84px; resize: vertical; line-height: 1.65; }
.field-help { margin-top: 6px; color: var(--ink-ghost); font-size: 11px; line-height: 1.6; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.choice-grid.three { grid-template-columns: repeat(3, 1fr); }
.choice { min-height: 44px; padding: 9px 8px; border: 1px solid var(--border); border-radius: 14px; color: var(--ink-light); background: rgba(255,252,247,.62); font-size: 13px; }
.choice.selected { border-color: var(--clay); color: var(--clay); background: rgba(183,131,105,.10); }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.scale .choice { aspect-ratio: 1; min-height: 0; border-radius: 50%; }
.scale .choice.selected { color: #fff; background: var(--clay); }
.scale-caption { display: flex; justify-content: space-between; margin-top: 7px; color: var(--ink-ghost); font-size: 10px; }
.check-row { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; margin-top: 12px; color: var(--ink-light); font-size: 12px; line-height: 1.65; }
.check-row input { width: 18px; height: 18px; accent-color: var(--clay); }

.participant { padding: 16px; margin-bottom: 11px; }
.participant-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.participant-head strong { font: 600 15px "Noto Serif SC", serif; }
.participant-head strong small { color: var(--ink-light); font-size: 11px; font-weight: 400; }
.participant-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.participant-fields .field { margin: 0; }
.participant-fields .full-field { grid-column: 1 / -1; }
.tag { padding: 5px 9px; border-radius: 999px; color: #6F846F; background: rgba(166,182,162,.18); font-size: 10px; }
.remove { border: 0; color: var(--ink-ghost); background: transparent; font-size: 12px; }
.participant-actions { display: flex; justify-content: flex-end; gap: 18px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); }
.mini-action { padding: 2px 0; border: 0; color: var(--ink-light); background: transparent; font-size: 12px; }
.mini-action.danger { color: var(--clay); }
.add-participant { width: 100%; min-height: 48px; border: 1px dashed rgba(183,131,105,.55); border-radius: 16px; color: var(--clay); background: rgba(255,252,247,.38); }

.modal-mask { position: fixed; z-index: 60; inset: 0 auto 0 50%; width: min(100%, 430px); display: flex; align-items: flex-end; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); background: rgba(44,42,38,.30); backdrop-filter: blur(4px); transform: translateX(-50%); }
.modal-card { width: 100%; max-height: min(74vh, 580px); margin: 0; padding: 22px; overflow-y: auto; border-radius: 26px; box-shadow: 0 22px 50px rgba(57,44,32,.18); }
.modal-card h2 { margin: 7px 0 6px; font: 600 20px "Noto Serif SC", serif; }
.modal-card > p { margin: 0; color: var(--ink-light); font-size: 12px; line-height: 1.7; }
.checkin-list { margin-top: 14px; }
.person-row.selectable { grid-template-columns: 36px 1fr 22px; margin: 0; cursor: pointer; }
.person-row.selectable input { width: 20px; height: 20px; accent-color: var(--clay); }

.login-page { display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; }
.login-brand { margin-bottom: 42px; }
.login-brand .brand-name { font-size: 34px; }
.login-card { padding: 24px; }
.login-card h1 { margin: 0 0 8px; font: 400 24px "Noto Serif SC", serif; }
.login-card > p { margin: 0 0 24px; color: var(--ink-light); font-size: 13px; line-height: 1.7; }
.code-row { display: grid; grid-template-columns: 1fr 112px; gap: 9px; }
.code-button { border: 1px solid var(--border); border-radius: 14px; color: var(--clay); background: rgba(255,252,247,.72); font-size: 12px; }
.code-button:disabled { color: var(--ink-ghost); }
.prototype-hint { margin-top: 13px; padding: 10px 12px; border-radius: 12px; color: var(--ink-light); background: rgba(195,208,214,.20); font-size: 11px; line-height: 1.6; }

.activity-summary { padding: 18px; margin-bottom: 12px; }
.activity-summary h2 { margin: 0 0 6px; font: 600 17px "Noto Serif SC", serif; }
.activity-summary p { margin: 0; color: var(--ink-light); font-size: 12px; line-height: 1.7; }
.day-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.day-tab { min-height: 64px; padding: 9px 5px; border: 1px solid var(--border); border-radius: 15px; color: var(--ink-light); background: rgba(255,252,247,.48); }
.day-tab small, .day-tab strong { display: block; }
.day-tab small { color: var(--ink-ghost); font-size: 9px; }
.day-tab strong { margin-top: 4px; font: 500 12px "Noto Serif SC", serif; }
.day-tab.active { border-color: rgba(183,131,105,.55); color: var(--clay); background: rgba(183,131,105,.09); }
.day-theme-card { margin-bottom: 12px; padding: 19px; }
.day-theme-card h2 { margin: 7px 0 6px; font: 600 21px "Noto Serif SC", serif; }
.day-theme-card p { margin: 0 0 13px; color: var(--ink-light); font-size: 12px; line-height: 1.7; }
.day-theme-card > div:last-child { padding-top: 11px; border-top: 1px solid var(--border); color: var(--ink-ghost); font-size: 11px; }
.day-theme-inline { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 13px; padding: 14px 16px; border-radius: 16px; background: rgba(183,131,105,.09); }
.day-theme-inline span { color: var(--clay); font-size: 10px; }
.day-theme-inline strong { font: 600 15px "Noto Serif SC", serif; }
.day-theme-inline small { color: var(--ink-ghost); font-size: 10px; }
.journey-days { display: grid; gap: 10px; }
.journey-day { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(255,255,255,.78); border-radius: 18px; background: rgba(255,252,247,.64); text-align: left; }
.journey-index { color: var(--clay); font: 400 15px "Noto Serif SC", serif; }
.journey-day small, .journey-day strong, .journey-day em { display: block; }
.journey-day small { color: var(--ink-ghost); font-size: 9px; }
.journey-day strong { margin-top: 3px; font: 600 15px "Noto Serif SC", serif; }
.journey-day em { margin-top: 4px; color: var(--sage); font-size: 10px; font-style: normal; }
.my-activity-entry { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 15px; padding: 19px; }
.my-activity-entry h3 { margin: 6px 0 5px; font: 600 17px "Noto Serif SC", serif; }
.my-activity-entry p { margin: 0; color: var(--ink-light); font-size: 11px; line-height: 1.7; }
.my-activity-entry .secondary { grid-column: 1 / -1; }
.timeline { position: relative; padding-left: 29px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.timeline-row { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 8px; margin-bottom: 18px; color: var(--ink-light); font-size: 12px; }
.timeline-row::before { content: ""; position: absolute; left: -23px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--clay-soft); box-shadow: 0 0 0 4px var(--bg); }
.timeline-row.active { color: var(--ink); font-weight: 500; }
.timeline-row.active::before { background: var(--clay); }
.state-box { padding: 18px; margin-top: 14px; }
.state-box h2 { margin: 0 0 6px; font: 600 16px "Noto Serif SC", serif; }
.state-box p { margin: 0; color: var(--ink-light); font-size: 12px; line-height: 1.7; }
.state-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.state-button { min-height: 64px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,252,247,.65); }
.state-button strong { display: block; font: 600 18px "Noto Serif SC", serif; }
.state-button small { display: block; margin-top: 3px; color: var(--ink-ghost); font-size: 10px; }

.summary-score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.score { padding: 16px; border-radius: 18px; background: rgba(255,252,247,.72); border: 1px solid rgba(255,255,255,.72); }
.score small { color: var(--ink-ghost); font-size: 11px; }
.score strong { display: block; margin-top: 6px; font: 600 25px "Noto Serif SC", serif; color: var(--clay); }
.quote { margin-top: 14px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(200,189,201,.26), rgba(195,208,214,.23)); font: 300 14px/1.8 "Noto Serif SC", serif; }
.privacy-note { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--ink-ghost); font-size: 11px; }

.profile-card { padding: 20px; margin-top: 14px; }
.profile-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.profile-row { display: flex; align-items: center; gap: 14px; }
.profile-large { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--clay-soft), var(--clay)); font: 18px "Noto Serif SC", serif; }
.profile-copy h1 { margin: 0; font: 600 20px "Noto Serif SC", serif; }
.profile-copy p { margin: 5px 0 0; color: var(--ink-light); font-size: 12px; }
.profile-edit-link { padding: 7px 0; border: 0; color: var(--clay); background: transparent; font-size: 12px; white-space: nowrap; }
.referral-entry { display: grid; grid-template-columns: 1fr auto; gap: 14px; margin-top: 16px; padding: 20px; border: 1px solid rgba(255,255,255,.82); border-radius: 22px; background: radial-gradient(circle at 100% 0, rgba(166,182,162,.33), transparent 44%), linear-gradient(135deg, rgba(216,193,173,.29), rgba(255,252,247,.74)); box-shadow: var(--shadow); }
.referral-entry h3 { margin: 7px 0 5px; font: 600 17px "Noto Serif SC", serif; }
.referral-entry p { margin: 0; color: var(--ink-light); font-size: 11px; line-height: 1.7; }
.referral-entry .primary { grid-column: 1 / -1; }
.referral-count { min-width: 52px; text-align: center; }
.referral-count strong { display: block; color: var(--clay); font: 600 25px "Noto Serif SC", serif; }
.referral-count small { display: block; color: var(--ink-ghost); font-size: 10px; }
.menu-list { margin-top: 15px; overflow: hidden; }
.menu-row { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; font-size: 14px; }
.menu-row:last-child { border-bottom: 0; }
.menu-row span:last-child { color: var(--ink-ghost); }
.prototype-role { margin-top: 18px; padding: 16px; border: 1px dashed rgba(183,131,105,.45); border-radius: 18px; background: rgba(255,252,247,.42); }
.prototype-role h3 { margin: 0 0 5px; font: 600 14px "Noto Serif SC", serif; }
.prototype-role p { margin: 0 0 12px; color: var(--ink-light); font-size: 11px; line-height: 1.6; }

.invite-activity-options { display: grid; gap: 9px; }
.invite-option { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 15px; color: var(--ink-light); background: rgba(255,252,247,.48); text-align: left; }
.invite-option.selected { border-color: rgba(183,131,105,.55); background: rgba(183,131,105,.08); }
.invite-option strong, .invite-option small { display: block; }
.invite-option strong { color: var(--ink); font: 600 13px "Noto Serif SC", serif; }
.invite-option small { margin-top: 4px; color: var(--ink-ghost); font-size: 10px; }
.share-preview { margin-bottom: 14px; padding: 23px; background: radial-gradient(circle at 91% 8%, rgba(166,182,162,.33), transparent 38%), radial-gradient(circle at 0 100%, rgba(216,193,173,.33), transparent 42%), var(--surface); }
.share-ribbon { margin-bottom: 15px; color: var(--ink-light); font-size: 11px; }
.share-preview h2 { margin: 8px 0 7px; font: 600 20px/1.5 "Noto Serif SC", serif; }
.share-preview p { margin: 0; color: var(--ink-light); font-size: 12px; line-height: 1.75; }
.share-sign { margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--border); color: var(--clay); font: 400 13px "Noto Serif SC", serif; }
.wechat-button { min-height: 48px; border: 0; border-radius: 16px; color: #fff; background: #6D9D62; font-weight: 500; }
.wechat-button span { display: inline-grid; place-items: center; width: 27px; height: 27px; margin-right: 8px; border-radius: 50%; color: #6D9D62; background: #fff; font-size: 10px; }
.center { text-align: center; }
.referral-rules { margin: 20px 0 13px; padding: 15px 17px; border-left: 2px solid var(--sage); background: rgba(166,182,162,.10); }
.referral-rules h3 { margin: 0 0 5px; font: 600 13px "Noto Serif SC", serif; }
.referral-rules p { margin: 0; color: var(--ink-light); font-size: 11px; line-height: 1.7; }
.referral-total { float: right; color: var(--clay); font: 400 11px sans-serif; }
.small-empty { padding: 18px 4px; color: var(--ink-ghost); font-size: 12px; line-height: 1.7; text-align: center; }
.wechat-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #6D9D62; font-size: 12px; }
.share-mini-card { margin-top: 16px; padding: 14px; border-radius: 15px; background: rgba(166,182,162,.13); }
.share-mini-card strong, .share-mini-card small { display: block; }
.share-mini-card strong { font: 600 13px "Noto Serif SC", serif; }
.share-mini-card small { margin-top: 5px; color: var(--ink-light); font-size: 11px; }
.invite-from { display: flex; align-items: center; gap: 10px; margin: 10px 0 15px; color: var(--ink-light); font-size: 13px; }
.invite-from p { margin: 0; }
.relation-line { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.relation-line span { color: var(--ink-ghost); }
.relation-line strong { font-weight: 500; }
.invite-success { padding-top: 58px; text-align: center; }
.success-mark { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: var(--sage); font-size: 24px; }
.invite-success h1 { margin: 0; font: 600 24px "Noto Serif SC", serif; }
.invite-success > p { margin: 10px auto 24px; max-width: 310px; color: var(--ink-light); font-size: 12px; line-height: 1.8; }
.invite-success .share-preview { text-align: left; }

.leader-session { padding: 19px; margin-bottom: 13px; }
.leader-session h2 { margin: 0 0 6px; font: 600 17px "Noto Serif SC", serif; }
.leader-session p { margin: 0; color: var(--ink-light); font-size: 12px; line-height: 1.7; }
.permission-note { margin-top: 12px; padding: 11px 12px; border-radius: 13px; color: var(--ink-light); background: rgba(166,182,162,.17); font-size: 11px; line-height: 1.6; }
.person-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.person-row:last-child { border: 0; }
.person-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-light); background: rgba(166,182,162,.18); font-size: 12px; }
.person-copy strong { display: block; font-size: 13px; }
.person-copy small { display: block; margin-top: 3px; color: var(--ink-ghost); font-size: 10px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 115px; max-width: min(330px, calc(100% - 40px)); padding: 11px 16px; border-radius: 999px; color: #fffaf4; background: rgba(44,42,38,.9); font-size: 13px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.empty { padding: 45px 20px; text-align: center; color: var(--ink-light); }
.empty h2 { margin: 0 0 8px; font: 400 19px "Noto Serif SC", serif; }
.empty p { margin: 0 0 18px; font-size: 13px; line-height: 1.7; }

@media (max-width: 359px) {
  .page { padding-left: 20px; padding-right: 20px; }
  .detail-cover { margin-left: -20px; margin-right: -20px; }
  .hero h1, .page-intro h1 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}