:root {
  color-scheme: light;
  --page: #f1f1ee;
  --surface: #fff;
  --ink: #111;
  --muted: #6b6b67;
  --line: #d9d9d4;
  --soft: #e8e8e3;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page); color: var(--ink); }
body { font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.app-shell {
  width: min(100%, 430px);
  min-height: 100svh;
  margin: 0 auto;
  background: var(--page);
  border-inline: 1px solid var(--line);
  position: relative;
}

.app-header {
  height: 78px;
  padding: calc(14px + env(safe-area-inset-top)) 20px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(14px);
}

.brand-row { display: flex; align-items: center; gap: 8px; }
.brand-logo { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); flex: 0 0 auto; }
.brand-row strong { font-size: 18px; letter-spacing: .08em; }
.brand-row span { padding: 3px 6px; border-radius: 5px; color: #fff; background: #111; font-size: 10px; font-weight: 800; }
.app-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.avatar-button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #111; background: #fff; font-weight: 800; }

main { padding: 18px 18px calc(100px + env(safe-area-inset-bottom)); }
.hero-card { min-height: 164px; padding: 22px; border-radius: 22px; color: #fff; background: #111; display: flex; justify-content: space-between; gap: 14px; }
.hero-card p { margin: 0 0 26px; color: #bdbdb8; font-size: 12px; }
.hero-card h1 { margin: 0 0 10px; font-size: 27px; line-height: 1.2; }
.hero-card span { color: #cfcfca; font-size: 12px; line-height: 1.6; }
.hero-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; color: #111; background: #fff; font-size: 11px; font-weight: 900; }
.goal-pill { height: fit-content; padding: 7px 10px; border: 1px solid #555; border-radius: 999px; white-space: nowrap; font-size: 11px; font-weight: 800; }

.migration-note { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.migration-note span { color: var(--muted); text-align: right; }
.share-sheet-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; align-items: end; justify-items: center; padding: 18px; background: rgba(0,0,0,.28); }
.share-sheet { width: min(100%, 430px); padding: 18px; border-radius: 24px 24px calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -18px 60px rgba(0,0,0,.18); }
.share-sheet strong, .share-sheet span { display: block; }
.share-sheet strong { font-size: 18px; }
.share-sheet span { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.share-sheet > div { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.share-sheet button { min-height: 46px; border: 1px solid var(--line); border-radius: 15px; background: #fff; font-size: 12px; font-weight: 900; }
.share-sheet [data-share-target="save"] { grid-column: 1 / -1; color: #fff; background: #111; border-color: #111; }
.share-sheet-cancel { width: 100%; margin-top: 10px; color: var(--muted); }
.section-block { margin-top: 28px; }
.last-section { margin-bottom: 18px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 11px; }
.section-heading > div { display: flex; align-items: center; gap: 9px; }
.section-heading span { color: var(--muted); font-size: 10px; font-weight: 800; }
.section-heading h2 { margin: 0; font-size: 19px; }
.section-heading button { border: 0; background: transparent; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }

.content-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 10px 34px rgba(0,0,0,.035); }
.calorie-head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.calorie-head small { display: block; color: var(--muted); font-size: 10px; }
.calorie-head strong { font-size: 30px; line-height: 1; }
.calorie-head span { margin-left: 4px; font-size: 11px; }
.calorie-head p { margin: 0; color: var(--muted); font-size: 11px; }
.metric-row { margin-top: 14px; }
.metric-row > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 11px; }
.metric-row strong { font-size: 11px; }
.progress-track { height: 6px; overflow: hidden; border-radius: 99px; background: var(--soft); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: #111; }

.workout-card > div:first-child { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #111; }
.workout-card h3 { margin: 12px 0 5px; font-size: 19px; }
.workout-card p { margin: 0; color: var(--muted); font-size: 12px; }
.workout-progress { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; margin: 20px 0 16px; }
.workout-progress strong { font-size: 12px; }
.primary-button { width: 100%; min-height: 48px; border: 0; border-radius: 13px; color: #fff; background: #111; font-weight: 800; }
.secondary-button { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--surface); font-weight: 800; }
.primary-button.compact, .secondary-button.compact { min-height: 42px; }

.recovery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.recovery-grid > div { min-width: 0; padding: 15px 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.recovery-grid small { display: block; color: var(--muted); font-size: 9px; margin-bottom: 8px; }
.recovery-grid strong { font-size: 13px; }
.readiness-copy { margin: 10px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.inline-advice { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.inline-advice summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-size: 11px; }
.inline-advice summary::-webkit-details-marker { display: none; }
.inline-advice summary span { color: var(--muted); font-size: 9px; }
.inline-advice p { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.inline-advice.warning strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.bottom-nav { position: fixed; z-index: 10; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 430px); min-height: calc(72px + env(safe-area-inset-bottom)); padding: 8px 6px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(14px); }
.bottom-nav button { min-height: 54px; border: 0; border-radius: 12px; background: transparent; display: grid; place-items: center; align-content: center; gap: 5px; color: #8a8a86; font-size: 10px; transition: color .16s ease, background-color .16s ease; }
.bottom-nav button[aria-current="page"] { color: #111; background: #f2f2ef; font-weight: 800; }
.nav-icon { position: relative; display: block; width: 25px; height: 25px; color: currentColor; }
.nav-icon::before, .nav-icon::after { content: ""; position: absolute; box-sizing: border-box; }
.nav-icon-home::before { width: 14px; height: 14px; left: 5.5px; top: 2.5px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; border-radius: 3px 0 0; transform: rotate(45deg); }
.nav-icon-home::after { width: 16px; height: 12px; left: 4.5px; bottom: 2px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 4px 4px; }
.nav-icon-plan::before { inset: 3px 4px 2px; border: 2px solid currentColor; border-radius: 4px; }
.nav-icon-plan::after { width: 9px; height: 2px; left: 8px; top: 9px; border-radius: 9px; background: currentColor; box-shadow: 0 5px 0 currentColor, -3px -5px 0 -0.25px currentColor, 6px -5px 0 -0.25px currentColor; }
.nav-icon-record { border: 2px solid currentColor; border-radius: 50%; }
.nav-icon-record::before { width: 11px; height: 2px; left: 5px; top: 9.5px; border-radius: 9px; background: currentColor; }
.nav-icon-record::after { width: 2px; height: 11px; left: 9.5px; top: 5px; border-radius: 9px; background: currentColor; }
.nav-icon-square::before { width: 18px; height: 13px; left: 3.5px; top: 4px; border: 2px solid currentColor; border-radius: 5px; }
.nav-icon-square::after { width: 4px; height: 4px; left: 7px; top: 8px; border-radius: 50%; background: currentColor; box-shadow: 7px 0 0 currentColor, 3.5px 6px 0 currentColor; }
.nav-icon-social::before { width: 10px; height: 10px; left: 2px; top: 4px; border: 2px solid currentColor; border-radius: 50%; box-shadow: 11px 2px 0 -2px var(--page), 11px 2px 0 0 currentColor; }
.nav-icon-social::after { width: 20px; height: 10px; left: 2px; bottom: 2px; border: 2px solid currentColor; border-radius: 12px 12px 3px 3px; clip-path: inset(0 0 0 0); }
.nav-icon-profile::before { width: 8px; height: 8px; left: 8.5px; top: 2px; border: 2px solid currentColor; border-radius: 50%; }
.nav-icon-profile::after { width: 18px; height: 10px; left: 3.5px; bottom: 2px; border: 2px solid currentColor; border-bottom: 0; border-radius: 11px 11px 0 0; }

.subpage { min-height: 620px; padding-top: 28px; }
.version-chip { display: inline-block; padding: 6px 9px; border: 1px solid #111; border-radius: 999px; font-size: 10px; font-weight: 800; }
.subpage h1 { margin: 22px 0 8px; font-size: 34px; }
.subpage h2 { margin: 0 0 14px; font-size: 18px; }
.subpage > p { max-width: 330px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.roadmap-card { margin-top: 28px; padding: 18px; border-radius: 18px; color: #fff; background: #111; }
.roadmap-card ol { margin: 16px 0 0; padding-left: 20px; color: #ccc; font-size: 12px; line-height: 2; }
.text-link { display: inline-block; margin-top: 20px; color: #111; font-size: 12px; }

.functional-page { padding-top: 18px; }
.page-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }
.page-section-title > div { min-width: 0; }
.page-section-title h2 { margin: 0; font-size: 19px; }
.page-section-title span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.page-section-title button { border: 0; background: transparent; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }

.target-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--line); }
.target-summary > div { padding: 14px; background: var(--surface); }
.target-summary small { display: block; color: var(--muted); font-size: 9px; margin-bottom: 7px; }
.target-summary strong { font-size: 14px; }
.day-target-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.day-target-switch > div { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.day-target-switch small, .day-target-switch strong, .day-target-switch span { display: block; }
.day-target-switch small { color: var(--muted); font-size: 9px; }
.day-target-switch strong { margin-top: 7px; font-size: 16px; }
.day-target-switch span { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.plan-list { margin-top: 10px; padding-block: 4px; }
.plan-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.plan-row:last-child { border-bottom: 0; }
.plan-row > div { display: flex; justify-content: space-between; align-items: center; }
.plan-row strong { font-size: 13px; }
.plan-row span, .plan-row small { color: var(--muted); font-size: 10px; }
.plan-row small { display: block; margin-top: 6px; }
.training-title { margin-top: 32px; }
.calculation-card { margin-top: 10px; box-shadow: none; }
.calculation-card summary, .training-rationale summary { cursor: pointer; font-size: 11px; font-weight: 800; }
.calculation-card p, .training-rationale p { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.adjustment-card { box-shadow: none; }
.adjustment-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.adjustment-head small, .adjustment-head strong { display: block; }
.adjustment-head small { margin-bottom: 6px; color: var(--muted); font-size: 9px; }
.adjustment-head strong { font-size: 13px; }
.status-badge { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; color: #fff; background: #111; font-size: 8px; font-weight: 800; }
.status-badge.muted { color: var(--muted); background: var(--soft); }
.adjustment-card > p { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.text-button { margin-top: 12px; padding: 0; border: 0; background: transparent; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.training-rationale { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.training-days { display: grid; gap: 8px; }
.training-day { width: 100%; min-height: 64px; padding: 11px 14px; display: grid; grid-template-columns: 42px 1fr 16px; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.training-day > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--soft); font-size: 10px; font-weight: 800; }
.training-day.active { border-color: #111; }
.training-day.active > span { color: #fff; background: #111; }
.training-day strong, .training-day small { display: block; }
.training-day strong { font-size: 12px; }
.training-day small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.exercise-list { margin-top: 10px; padding-top: 12px; }
.exercise-hint { margin-bottom: 8px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.exercise-row { min-height: 62px; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }
.exercise-row:last-child { border-bottom: 0; }
.exercise-row input { width: 20px; height: 20px; accent-color: #111; }
.exercise-row strong, .exercise-row small { display: block; }
.exercise-row strong { font-size: 12px; }
.exercise-row small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.exercise-row em { display: block; margin-top: 4px; color: #444; font-size: 9px; font-style: normal; line-height: 1.45; }
.exercise-row:has(input:checked) strong { text-decoration: line-through; color: var(--muted); }
.session-header { padding: 2px 0 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.session-header small, .session-header strong { display: block; }
.session-header small { color: var(--muted); font-size: 9px; }
.session-header strong { margin-top: 5px; font-size: 14px; }
.session-header > span { padding: 5px 7px; border-radius: 999px; background: var(--soft); font-size: 8px; font-weight: 800; }
.finish-button { margin-top: 14px; }
.plan-start-card { margin-bottom: 12px; display: grid; gap: 13px; border-color: #111; }
.plan-start-card small, .plan-start-card strong, .plan-start-card p { display: block; }
.plan-start-card small { color: var(--muted); font-size: 9px; }
.plan-start-card strong { margin-top: 5px; font-size: 17px; }
.plan-start-card p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.plan-start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.plan-start-actions button { min-height: 44px; border: 1px solid #111; border-radius: 13px; color: #fff; background: #111; font-size: 10px; font-weight: 900; }
.plan-start-actions button + button { color: #111; border-color: var(--line); background: #fff; }
.plan-template-card { margin-bottom: 20px; }
.plan-template-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plan-template-head small, .plan-template-head strong { display: block; }
.plan-template-head small { color: var(--muted); font-size: 9px; }
.plan-template-head strong { margin-top: 5px; font-size: 16px; }
.plan-template-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.plan-template-actions button { min-height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 9px; font-weight: 800; }
.template-chip-row { margin: 13px -2px 0; padding-bottom: 2px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.template-chip-row::-webkit-scrollbar { display: none; }
.template-chip-row button { flex: 0 0 auto; min-height: 33px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 9px; font-weight: 800; }
.template-chip-row button[aria-pressed="true"] { color: #fff; border-color: #111; background: #111; }
.plan-template-card p { margin: 11px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.plan-template-card .danger-text-button { margin-top: 10px; }
.template-store-card { margin: -8px 0 20px; box-shadow: none; }
.template-store-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.template-store-head small, .template-store-head strong, .template-store-head p { display: block; }
.template-store-head small { color: var(--muted); font-size: 9px; }
.template-store-head strong { margin-top: 5px; font-size: 17px; }
.template-store-head p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.template-store-head > span { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #fff; background: #111; font-size: 8px; font-weight: 900; }
.template-store-grid { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.template-store-grid button { min-height: 112px; padding: 12px; display: grid; align-content: start; gap: 6px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.template-store-grid small, .template-store-grid strong, .template-store-grid span { display: block; }
.template-store-grid small { width: max-content; padding: 4px 7px; border-radius: 999px; color: #fff; background: #111; font-size: 8px; font-weight: 900; }
.template-store-grid strong { font-size: 12px; line-height: 1.35; }
.template-store-grid span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.business-note { margin: 12px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }

.record-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 22px 0 10px; padding: 4px; border-radius: 13px; background: var(--soft); }
.record-tabs button { min-height: 38px; border: 0; border-radius: 10px; background: transparent; font-size: 11px; font-weight: 800; }
.record-tabs button[aria-selected="true"] { background: var(--surface); box-shadow: 0 2px 9px rgba(0,0,0,.07); }
.form-card { padding: 16px; }
.record-form { display: block; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field > span { font-size: 11px; font-weight: 800; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 46px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--surface); }
.form-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #999; opacity: 1; }
.field-hint { display: block; margin-top: -1px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.form-tip { margin: 14px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.food-list { display: grid; gap: 9px; margin-top: 12px; }
.food-entry { position: relative; padding: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: #fafaf8; }
.food-entry .remove-food { position: absolute; top: 6px; right: 7px; padding: 3px 5px; border: 0; color: var(--muted); background: transparent; font-size: 8px; text-decoration: underline; }
.add-food-button { width: 100%; min-height: 42px; margin-top: 9px; border: 1px dashed #999; border-radius: 12px; background: transparent; font-size: 10px; font-weight: 800; }
.nutrition-total { margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.nutrition-total summary { margin-bottom: 12px; cursor: pointer; font-size: 11px; font-weight: 800; }
.history-title { margin-top: 28px; }
.record-history { margin: 0; padding: 0; list-style: none; }
.record-history li { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: 10px; }
.record-history li:last-child { border-bottom: 0; }
.record-history span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.record-history strong { white-space: nowrap; }
.empty-copy { margin: 8px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

.meal-recorder { display: grid; gap: 12px; }
.meal-type-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; border-radius: 14px; background: var(--soft); }
.meal-type-tabs button { min-height: 38px; border: 0; border-radius: 10px; background: transparent; font-size: 11px; font-weight: 800; }
.meal-type-tabs button[aria-pressed="true"] { color: #fff; background: #111; }
.meal-overview { padding: 15px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.meal-overview > div { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.meal-overview small { color: var(--muted); font-size: 9px; }
.meal-overview strong { font-size: 18px; }
.meal-overview strong span { color: var(--muted); font-size: 10px; font-weight: 600; }
.meal-overview p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.editing-note { padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; border-radius: 12px; color: #fff; background: #111; font-size: 10px; }
.editing-note button { border: 0; color: #fff; background: transparent; font-size: 9px; text-decoration: underline; }
.food-picker, .meal-draft-card { padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.food-search-wrap { height: 46px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 3px; padding: 0 12px; border: 1px solid #bbb; border-radius: 12px; }
.food-search-wrap span { font-size: 20px; line-height: 1; transform: rotate(-20deg); }
.food-search-wrap input { width: 100%; height: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; }
.quick-record-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.quick-record-actions label, .quick-record-actions button { min-height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: #f8f8f6; font-size: 10px; font-weight: 800; cursor: pointer; }
.quick-record-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.food-category-chips { margin: 13px -15px 6px; padding: 0 15px 7px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.food-category-chips::-webkit-scrollbar { display: none; }
.food-category-chips button { flex: 0 0 auto; min-height: 31px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 9px; }
.food-category-chips button[aria-pressed="true"] { color: #fff; border-color: #111; background: #111; font-weight: 800; }
.food-results { max-height: 328px; overflow-y: auto; }
.food-result { width: 100%; min-height: 72px; padding: 11px 2px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.food-result[hidden] { display: none; }
.food-result span, .food-result strong, .food-result small, .food-result em { display: block; min-width: 0; }
.food-result strong { font-size: 12px; }
.food-result small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.food-result em { margin-top: 5px; color: #333; font-size: 9px; font-style: normal; }
.food-result b { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #111; border-radius: 50%; font-size: 17px; }
.food-results-empty, .food-data-note { color: var(--muted); font-size: 9px; line-height: 1.55; }
.food-results-empty { margin: 15px 0; }
.food-data-note { margin: 11px 0 0; }
.custom-food-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.custom-food-details summary { cursor: pointer; font-size: 10px; font-weight: 800; }
.custom-food-details form { margin-top: 13px; }
.custom-food-details .secondary-button { margin-top: 12px; }
.meal-draft-card { display: grid; gap: 12px; }
.meal-draft-title, .meal-draft-title > div, .selected-food-head, .meal-total-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.meal-draft-title h2 { margin: 0; font-size: 17px; }
.meal-draft-title span { color: var(--muted); font-size: 9px; }
.meal-draft-title button, .selected-food-head button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 9px; text-decoration: underline; }
.selected-foods { display: grid; gap: 9px; }
.selected-food-row { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fafaf8; }
.selected-food-head strong, .selected-food-head small { display: block; }
.selected-food-head strong { font-size: 12px; }
.selected-food-head small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.portion-controls { display: grid; grid-template-columns: minmax(82px, .8fr) minmax(0, 1.2fr); gap: 8px; margin-top: 10px; }
.portion-controls label { display: grid; gap: 5px; }
.portion-controls span { color: var(--muted); font-size: 8px; }
.portion-controls input, .portion-controls select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 11px; }
.selected-food-row > p { margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.meal-total-summary { padding: 13px; border-radius: 13px; background: var(--soft); }
.meal-total-summary small { color: var(--muted); font-size: 9px; }
.meal-total-summary strong { font-size: 16px; }
.meal-total-summary p { margin: 7px 0 0; color: var(--muted); font-size: 9px; }
.primary-button:disabled { color: #aaa; background: #ddd; cursor: not-allowed; }
.history-card { padding-block: 6px; }
.meal-history { margin: 0; padding: 0; list-style: none; }
.meal-history-row { padding: 13px 0; border-bottom: 1px solid var(--line); }
.meal-history-row:last-child { border-bottom: 0; }
.meal-history-row > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.meal-history-row span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
.meal-history-row strong { flex: 0 0 auto; font-size: 10px; }
.meal-history-row > p { margin: 6px 0 9px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.meal-history-actions { display: flex; gap: 8px; }
.meal-history-actions button { min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 8px; }

.square-page h1 { margin-bottom: 12px; }
.square-composer { padding: 15px; }
.composer-head, .square-post-head { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; }
.square-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #111; font-size: 15px; font-weight: 900; }
.composer-head strong, .composer-head span, .square-post-head strong, .square-post-head span { display: block; }
.composer-head strong, .square-post-head strong { font-size: 13px; }
.composer-head span, .square-post-head span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.square-composer form { display: grid; gap: 12px; margin-top: 13px; }
.square-composer textarea { width: 100%; min-height: 104px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); resize: vertical; line-height: 1.55; }
.square-compose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.square-compose-grid label { display: grid; gap: 7px; }
.square-compose-grid span { font-size: 10px; font-weight: 800; }
.square-compose-grid select, .square-compose-grid input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 8px; font-size: 10px; }
.media-picker em { color: var(--muted); font-size: 8px; font-style: normal; line-height: 1.4; }
.square-feed { display: grid; gap: 12px; }
.square-post { padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.square-post-head em { padding: 5px 8px; border-radius: 999px; color: #fff; background: #111; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.square-post-text { margin: 13px 0 0; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.square-media-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.square-media-grid img, .square-media-grid video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.square-media-grid img:only-child, .square-media-grid video:only-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.shared-plan-card { margin-top: 13px; padding: 13px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border-radius: 14px; color: #fff; background: #111; }
.shared-plan-card small, .shared-plan-card strong, .shared-plan-card span { display: block; }
.shared-plan-card small { color: #aaa; font-size: 8px; }
.shared-plan-card strong { margin-top: 5px; font-size: 13px; }
.shared-plan-card span { margin-top: 5px; color: #d0d0cc; font-size: 9px; line-height: 1.45; }
.shared-plan-card button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; color: #111; background: #fff; font-size: 9px; font-weight: 900; white-space: nowrap; }
.square-actions { margin-top: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.square-actions button { min-height: 34px; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; background: #fafaf8; font-size: 8px; font-weight: 800; white-space: nowrap; }
.square-comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.square-comments summary { cursor: pointer; color: var(--muted); font-size: 9px; font-weight: 800; }
.square-comment-list { display: grid; gap: 8px; margin-top: 10px; }
.square-comment-list p { margin: 0; padding: 9px 10px; border-radius: 10px; background: var(--soft); font-size: 9px; line-height: 1.5; }
.square-comment-list strong { margin-right: 6px; }
.square-comment-form { margin-top: 10px; display: grid; grid-template-columns: 1fr 58px; gap: 7px; }
.square-comment-form input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 10px; }
.square-comment-form button { border: 0; border-radius: 10px; color: #fff; background: #111; font-size: 9px; font-weight: 800; }
.moderation-panel { margin: 12px 0 4px; box-shadow: none; }
.moderation-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 12px; font-weight: 900; list-style: none; }
.moderation-panel > summary::-webkit-details-marker { display: none; }
.moderation-panel > summary span { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #fff; background: #111; font-size: 8px; }
.moderation-rules { margin-top: 13px; padding: 12px; border-radius: 13px; background: var(--soft); }
.moderation-rules strong { display: block; font-size: 11px; }
.moderation-rules ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 9px; line-height: 1.65; }
.moderation-list { display: grid; gap: 9px; margin-top: 12px; }
.moderation-item { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fafaf8; }
.moderation-item strong, .moderation-item span, .moderation-item small { display: block; }
.moderation-item strong { font-size: 11px; }
.moderation-item span, .moderation-item small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.moderation-item p { margin: 9px 0 0; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
.moderation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.moderation-actions button { min-height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 9px; font-weight: 800; }
.moderation-actions button:first-child { color: #fff; border-color: #111; background: #111; }
.rejected-list { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rejected-list summary { cursor: pointer; color: var(--muted); font-size: 9px; font-weight: 800; }
.rejected-list p { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }

.social-page > p { margin-bottom: 16px; }
.social-id-card { margin: 16px 0 12px; padding: 14px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-radius: 18px; color: #fff; background: #111; box-shadow: 0 10px 28px rgba(0,0,0,.1); }
.social-id-card small, .social-id-card strong, .social-id-card span { display: block; min-width: 0; }
.social-id-card small { color: #aaa; font-size: 9px; }
.social-id-card strong { margin-top: 3px; font-size: 21px; letter-spacing: .04em; white-space: nowrap; }
.social-id-card span { margin-top: 4px; overflow: hidden; color: #d0d0cc; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.social-id-card button { min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; color: #111; background: #fff; font-size: 10px; font-weight: 900; }
.social-id-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #111; background: #fff; font-size: 14px; font-weight: 900; }
.message-search { height: 44px; margin: 0 0 10px; padding: 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.message-search span { color: var(--muted); font-size: 10px; font-weight: 800; }
.message-search input { min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.message-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.message-tabs button { min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 10px; font-weight: 900; }
.message-tabs button.active { color: #fff; border-color: #111; background: #111; }
.message-shortcuts { display: grid; gap: 8px; margin-bottom: 12px; }
.message-shortcut { position: relative; min-height: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.message-shortcut > summary, .message-shortcut.static { min-height: 64px; padding: 11px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; cursor: pointer; list-style: none; }
.message-shortcut > summary::-webkit-details-marker { display: none; }
.message-shortcut > summary > span, .message-shortcut.static > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #111; font-size: 11px; font-weight: 900; }
.message-shortcut > summary > div, .message-shortcut.static > div { min-width: 0; }
.message-shortcut > summary strong, .message-shortcut.static strong { display: block; font-size: 12px; }
.message-shortcut > summary small, .message-shortcut.static small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.message-shortcut > summary > em, .message-shortcut.static > em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.message-shortcut[open] > summary { border-bottom: 1px solid var(--line); }
.shortcut-panel { padding: 12px; }
.social-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.social-quick-actions div { min-height: 58px; padding: 11px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.social-quick-actions strong, .social-quick-actions span { display: block; text-align: center; }
.social-quick-actions strong { font-size: 15px; }
.social-quick-actions span { margin-top: 5px; color: var(--muted); font-size: 9px; }
.social-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.social-card-title h2 { margin: 0; font-size: 18px; line-height: 1.15; }
.social-card-title span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.social-card-title em { flex: 0 0 auto; align-self: center; padding: 5px 8px; border-radius: 999px; color: #666; background: var(--soft); font-size: 8px; font-style: normal; font-weight: 800; }
.social-inbox-card, .social-add-card, .friend-request-list, .contact-card, .chat-card { box-shadow: none; }
.social-inbox-card, .chat-card { padding: 16px; }
.compact-panel { padding: 0; overflow: hidden; }
.compact-panel > summary { min-height: 58px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.compact-panel > summary::-webkit-details-marker { display: none; }
.compact-panel > summary h2 { margin: 0; font-size: 16px; }
.compact-panel > summary span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.compact-panel > summary em { flex: 0 0 auto; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 900; }
.compact-panel[open] > summary { border-bottom: 1px solid var(--line); }
.compact-panel .social-add-form, .compact-panel.friend-request-list .friend-request-row, .compact-panel .social-empty-card { margin: 14px 16px; }
.compact-panel.friend-request-list .friend-request-row { margin-block: 0; padding-block: 12px; }
.conversation-list, .contact-list { display: grid; gap: 8px; }
.conversation-row, .contact-row { width: 100%; min-height: 64px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.conversation-row.active, .contact-row.active { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.conversation-main strong, .conversation-main small, .contact-row strong, .contact-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-main strong, .contact-row strong { font-size: 12px; }
.conversation-main small, .contact-row small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.conversation-meta { display: grid; justify-items: end; gap: 6px; }
.conversation-meta small { color: var(--muted); font-size: 8px; }
.conversation-meta em, .contact-row i { padding: 4px 7px; border-radius: 999px; color: #fff; background: #111; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.social-empty-card { padding: 14px; border-radius: 14px; background: var(--soft); }
.social-empty-card strong, .social-empty-card span { display: block; }
.social-empty-card strong { font-size: 11px; }
.social-empty-card span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.social-add-form { display: grid; gap: 12px; }
.friend-request-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.friend-request-row:last-child { border-bottom: 0; }
.social-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #111; font-size: 13px; font-weight: 900; }
.friend-request-main strong, .friend-request-main span, .friend-request-main small { display: block; min-width: 0; }
.friend-request-main strong { font-size: 12px; }
.friend-request-main span { margin-top: 4px; color: #333; font-size: 9px; }
.friend-request-main small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.friend-request-actions { display: grid; gap: 6px; }
.friend-request-row button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 9px; font-weight: 800; white-space: nowrap; }
.friend-request-row button:first-child { color: #fff; border-color: #111; background: #111; }
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.chat-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-head small, .chat-head strong, .chat-head span { display: block; }
.chat-head small { color: var(--muted); font-size: 9px; }
.chat-head strong { margin-top: 5px; font-size: 16px; }
.chat-head span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.chat-head button { flex: 0 0 auto; min-height: 31px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 9px; font-weight: 800; }
.chat-messages { min-height: 210px; max-height: 330px; display: grid; align-content: start; gap: 9px; margin: 14px 0; overflow-y: auto; }
.message-bubble { position: relative; max-width: 82%; padding: 11px 12px; border-radius: 15px; background: var(--soft); }
.message-bubble.me { justify-self: end; color: #fff; background: #111; }
.message-bubble.friend { justify-self: start; }
.message-bubble p { margin: 0; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.message-bubble span { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; }
.message-bubble.me span { color: #bbb; }
.message-bubble button { margin-top: 6px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; }
.chat-form input { min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 11px; }
.chat-form button { border: 0; border-radius: 12px; color: #fff; background: #111; font-size: 10px; font-weight: 900; }
.chat-form input:disabled, .chat-form button:disabled { opacity: .45; }
.social-safety-card { margin-top: 12px; box-shadow: none; }
.social-safety-card summary { cursor: pointer; font-size: 11px; font-weight: 900; }
.social-safety-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 9px; line-height: 1.65; }
.social-audit-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.social-audit-list li { padding: 9px 10px; border-radius: 10px; background: var(--soft); }
.social-audit-list strong, .social-audit-list span { display: block; font-size: 9px; }
.social-audit-list span { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.account-moderation-panel { margin-top: 12px; box-shadow: none; }
.account-moderation-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 12px; font-weight: 900; list-style: none; }
.account-moderation-panel > summary::-webkit-details-marker { display: none; }
.account-moderation-panel > summary span { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #fff; background: #111; font-size: 8px; }
.account-review-item img { width: 72px; height: 72px; margin-top: 10px; object-fit: cover; border: 1px solid var(--line); border-radius: 50%; background: var(--soft); }

.profile-summary { margin: 24px 0 12px; padding: 16px; display: flex; align-items: center; gap: 12px; border-radius: 17px; color: #fff; background: #111; }
.profile-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #111; background: #fff; font-weight: 900; }
.profile-summary strong, .profile-summary span { display: block; }
.profile-summary strong { font-size: 16px; }
.profile-summary span { margin-top: 5px; color: #bdbdb8; font-size: 10px; }
.bmi-card { padding: 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.bmi-card small, .bmi-card strong { display: block; }
.bmi-card small { color: var(--muted); font-size: 9px; }
.bmi-card strong { margin-top: 5px; font-size: 28px; }
.bmi-card > span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 9px; }
.bmi-card p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.profile-form { margin-top: 12px; }
.profile-form .primary-button { margin-top: 16px; }
.settings-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.settings-links button { min-height: 46px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); font-size: 10px; font-weight: 800; }
.data-status { margin-top: 12px; padding: 14px; display: flex; justify-content: space-between; gap: 12px; border-radius: 14px; background: var(--soft); font-size: 9px; }
.data-status span { color: var(--muted); text-align: right; }
.profile-data-title { margin-top: 30px; }
.account-card { margin-top: 12px; box-shadow: none; }
.account-card > strong { display: block; font-size: 16px; }
.account-card > p { margin: 8px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.account-warning { padding: 9px 11px; border-radius: 10px; color: #111 !important; background: var(--soft); }
.install-software-card { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; box-shadow: none; }
.install-software-card strong { display: block; font-size: 15px; }
.install-software-card p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.install-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-items: stretch; }
.install-actions a, .install-software-card button { min-height: 38px; padding: 0 14px; display: grid; place-items: center; border: 0; border-radius: 999px; color: #fff; background: #111; font-size: 10px; font-weight: 900; white-space: nowrap; text-decoration: none; }
.install-actions .install-primary-download { grid-column: 1 / -1; min-height: 52px; color: #fff; background: #111; font-size: 15px; border-radius: 16px; }
.install-software-card button { color: #111; border: 1px solid var(--line); background: #fff; }
.install-software-card button:disabled { color: var(--muted); background: var(--soft); }
.install-software-card small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.5; }
.membership-card, .coach-business-card { margin-top: 12px; box-shadow: none; }
.membership-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.membership-head small, .membership-head strong, .membership-head p { display: block; }
.membership-head small, .coach-business-card small { color: var(--muted); font-size: 9px; }
.membership-head strong, .coach-business-card strong { display: block; margin-top: 5px; font-size: 17px; }
.membership-head p, .coach-business-card p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.membership-head > span { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #fff; background: #111; font-size: 8px; font-weight: 900; }
.trial-status-card { margin-top: 13px; padding: 12px; border: 1px solid #111; border-radius: 14px; background: #111; color: #fff; }
.trial-status-card.member-active { border-color: #caa24a; background: linear-gradient(135deg, #111 0%, #2b2413 100%); }
.trial-status-card strong, .trial-status-card span { display: block; }
.trial-status-card strong { font-size: 13px; }
.trial-status-card span { margin-top: 5px; color: #d7d7d2; font-size: 9px; line-height: 1.55; }
.membership-benefits { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.membership-benefits span, .coach-business-list span { min-height: 30px; padding: 8px 10px; display: flex; align-items: center; border-radius: 10px; background: var(--soft); font-size: 9px; font-weight: 800; line-height: 1.35; }
.pricing-grid { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pricing-grid button { min-height: 82px; padding: 11px; display: grid; align-content: center; gap: 4px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pricing-grid small, .pricing-grid strong, .pricing-grid span { display: block; }
.pricing-grid small { color: var(--muted); font-size: 8px; font-weight: 900; }
.pricing-grid strong { font-size: 18px; }
.pricing-grid span { color: var(--muted); font-size: 8px; line-height: 1.4; }
.pricing-grid .trial-start-button { border-color: #111; background: #111; }
.pricing-grid .trial-start-button small, .pricing-grid .trial-start-button strong { color: #fff; }
.pricing-grid .trial-start-button span { color: #d7d7d2; }
.member-active-panel { margin-top: 13px; padding: 14px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #111 0%, #2b2413 100%); }
.member-active-panel strong, .member-active-panel span { display: block; }
.member-active-panel strong { font-size: 14px; }
.member-active-panel span { margin-top: 6px; color: #e7d7aa; font-size: 10px; line-height: 1.55; }
.member-tools-card { margin-top: 12px; box-shadow: none; border-color: #caa24a; background: linear-gradient(180deg, #fff 0%, #fff9ea 100%); }
.member-tools-card small, .member-tools-card strong, .member-tools-card p { display: block; }
.member-tools-card small { color: #8b6a18; font-size: 9px; font-weight: 900; }
.member-tools-card strong { margin-top: 5px; font-size: 17px; }
.member-tools-card p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.member-tool-grid { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.member-tool-grid button { min-height: 68px; padding: 11px; border: 1px solid #e2c36d; border-radius: 14px; background: #fff; text-align: left; }
.member-tool-grid button strong, .member-tool-grid button span { display: block; }
.member-tool-grid button strong { margin: 0; font-size: 12px; }
.member-tool-grid button span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.coach-business-card { display: grid; gap: 13px; }
.coach-business-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.coach-business-detail { border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.coach-business-detail summary { min-height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #111; font-size: 10px; font-weight: 900; cursor: pointer; list-style: none; }
.coach-business-detail summary::-webkit-details-marker { display: none; }
.coach-business-detail summary::after { content: "展开"; color: var(--muted); font-size: 9px; font-weight: 800; }
.coach-business-detail[open] summary { border-bottom: 1px solid var(--line); }
.coach-business-detail[open] summary::after { content: "收起"; }
.coach-business-detail p { margin: 0; padding: 11px 12px 12px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.coach-business-card .secondary-button { width: 100%; }
.primary-link-button { min-height: 46px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #111; font-size: 11px; font-weight: 800; text-decoration: none; }
.account-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.account-card-head strong, .account-card-head small { display: block; }
.account-card-head strong { font-size: 15px; }
.account-card-head small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.account-card-head a, .account-card-head button { flex: 0 0 auto; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.user-home-card { margin-top: 12px; padding: 18px; display: grid; grid-template-columns: 52px 1fr; gap: 12px; border-radius: 18px; color: var(--ink); background: var(--surface); }
.user-home-avatar, .avatar-preview { overflow: hidden; display: grid; place-items: center; border-radius: 50%; color: #111; background: #fff; font-weight: 900; }
.user-home-avatar { width: 52px; height: 52px; }
.user-home-avatar img, .avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.user-home-copy { min-width: 0; }
.user-home-copy strong, .user-home-copy small { display: block; }
.user-home-copy strong { overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.user-home-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.user-home-copy p { margin: 8px 0 0; color: #444; font-size: 10px; line-height: 1.5; }
.user-home-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 13px; border-top: 1px solid var(--line); }
.user-home-stats div { text-align: center; border-right: 1px solid var(--line); }
.user-home-stats div:last-child { border-right: 0; }
.user-home-stats strong, .user-home-stats span { display: block; }
.user-home-stats strong { font-size: 16px; }
.user-home-stats span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.profile-editor-card { position: relative; overflow: hidden; padding: 0; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0,0,0,.045); }
.profile-editor-card.member-home-card { border-color: #caa24a; box-shadow: 0 16px 40px rgba(148, 112, 24, .16); }
.user-home-cover { height: 82px; background: var(--profile-cover-bg, #e8e8e3); background-image: var(--profile-cover-image, none); background-size: cover; background-position: center; border-bottom: 1px solid var(--line); }
.profile-editor-main { padding: 16px 18px 14px; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--surface); }
.user-home-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.user-home-title-copy { min-width: 0; }
.membership-open-button { min-width: 78px; min-height: 44px; padding: 8px 12px; display: grid; place-items: center; gap: 2px; border: 1px solid rgba(17,17,17,.88); border-radius: 16px; color: #111; background: linear-gradient(135deg, #f8d96c 0%, #fff4b8 100%); box-shadow: 0 9px 22px rgba(0,0,0,.12); text-align: center; cursor: pointer; font-weight: 900; touch-action: manipulation; }
.membership-open-button span { padding: 0; border-radius: 0; color: inherit; background: transparent; font-size: 15px; line-height: 1; }
.membership-open-button em { color: #5f4b10; font-size: 9px; font-style: normal; line-height: 1.2; white-space: nowrap; }
.membership-open-button:active { transform: scale(.98); }
.member-badge, .trial-badge, .free-badge { padding: 4px 7px; border-radius: 999px; color: #fff; background: #111; }
.member-badge { color: #111; background: #f3ce63; }
.trial-badge { background: #111; }
.free-badge { color: #111; background: var(--soft); }
.profile-editor-card .user-home-avatar { position: relative; width: 60px; height: 60px; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0,0,0,.08); cursor: pointer; }
.editable-avatar input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.editable-avatar em { position: absolute; inset: auto 0 0; display: grid; place-items: center; min-height: 20px; color: #fff; background: rgba(0,0,0,.68); font-size: 8px; font-style: normal; font-weight: 900; }
.profile-editor-card .user-home-copy { align-self: start; padding-top: 0; }
.inline-name-input, .inline-bio-input { width: 100%; border: 0; color: var(--ink); background: transparent; outline: none; }
.inline-name-input { min-height: 30px; padding: 0; font-size: 18px; font-weight: 900; }
.inline-name-input::placeholder { color: #111; opacity: 1; }
.inline-bio-input { min-height: 30px; margin-top: 4px; padding: 0; resize: none; color: #444; font-size: 10px; line-height: 1.45; }
.inline-bio-input::placeholder { color: #888; opacity: 1; }
.inline-name-input:focus, .inline-bio-input:focus { border-radius: 8px; box-shadow: 0 0 0 2px rgba(0,0,0,.12); }
.inline-account-line { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }
.profile-editor-card .user-home-stats { margin: 4px 18px 0; }
.profile-editor-actions { padding: 14px 18px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.profile-editor-actions button, .cover-picker-button { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: #111; background: #fff; font-size: 10px; font-weight: 900; }
.profile-editor-actions button[type="submit"] { border-color: #111; color: #fff; background: #111; }
.profile-editor-actions .editor-light-button { color: var(--muted); background: #fff; }
.cover-picker-button { position: relative; cursor: pointer; touch-action: manipulation; }
.cover-picker-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.profile-rules-panel { margin-top: 12px; box-shadow: none; }
.profile-rules-panel .account-rules { margin: 12px 16px; }
.profile-rules-panel .danger-text-button { margin: 0 16px 16px; }
.avatar-editor { margin: 14px 0 18px; display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; }
.avatar-preview { width: 58px; height: 58px; border: 1px solid var(--line); background: var(--soft); }
.avatar-editor > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.avatar-upload-button { min-height: 34px; padding: 0 12px; display: grid; place-items: center; border: 1px solid #111; border-radius: 9px; background: #111; color: #fff; cursor: pointer; font-size: 9px; font-weight: 800; }
.avatar-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avatar-editor button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 9px; text-decoration: underline; }
.avatar-editor small { flex-basis: 100%; color: var(--muted); font-size: 8px; line-height: 1.5; }
.account-profile-form { display: grid; gap: 14px; }
.account-profile-form .form-field small { color: var(--muted); font-size: 8px; line-height: 1.5; }
.phone-login-form { display: grid; gap: 12px; margin-top: 14px; }
.auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.auth-tabs button { min-height: 38px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 900; }
.auth-tabs button.active { color: #fff; background: #111; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 9px; align-items: end; }
.code-row .secondary-button { height: 46px; }
.code-send-notice { margin: -2px 0 0; color: #1f7a35; font-size: 10px; font-weight: 800; line-height: 1.6; }
.account-consent { padding: 12px; display: grid; grid-template-columns: 18px 1fr; gap: 8px; border-radius: 11px; background: var(--soft); font-size: 9px; line-height: 1.55; }
.account-consent input { width: 17px; height: 17px; margin: 0; accent-color: #111; }
.account-rules { display: grid; gap: 7px; margin-top: 12px; }
.account-rules details { padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; }
.account-rules summary { cursor: pointer; font-size: 9px; font-weight: 800; }
.account-rules p { margin: 8px 0 0; color: var(--muted); font-size: 8px; line-height: 1.65; }
.account-profile-form + .danger-text-button { margin-top: 15px; }
.danger-text-button { padding: 0; border: 0; color: #666; background: transparent; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.settings-page > p { margin-bottom: 18px; }
.back-button { padding: 0; border: 0; background: transparent; font-size: 10px; font-weight: 800; }
.settings-page h1 { margin-top: 18px; }
.settings-preview { margin-top: 12px; box-shadow: none; }
.settings-preview small, .settings-preview strong, .settings-preview span { display: block; }
.settings-preview small { color: var(--muted); font-size: 9px; }
.settings-preview strong { margin-top: 7px; font-size: 18px; }
.settings-preview p { margin: 7px 0; font-size: 10px; }
.settings-preview span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.optional-strength { margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.optional-strength summary { cursor: pointer; font-size: 10px; font-weight: 800; }
.optional-strength .form-grid { margin-top: 12px; }
.custom-plan-card { margin-top: 14px; box-shadow: none; }
.custom-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.custom-plan-head small, .custom-plan-head strong { display: block; }
.custom-plan-head small { color: var(--muted); font-size: 9px; }
.custom-plan-head strong { margin-top: 5px; font-size: 18px; }
.custom-plan-head > span { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #fff; background: #111; font-size: 8px; font-weight: 800; }
.custom-plan-card > p { margin: 11px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.custom-plan-card form { display: grid; gap: 12px; }
.custom-plan-card textarea[name="customSessions"] { min-height: 146px; }
.custom-plan-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.custom-plan-examples button { min-height: 38px; border: 1px solid var(--line); border-radius: 11px; background: #f8f8f6; font-size: 9px; font-weight: 800; }

.profile-link { padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.profile-link:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.square-avatar.profile-link, .social-avatar.profile-link { color: #fff; background: #111; text-align: center; }
.chat-head .chat-user.profile-link { flex: 1 1 auto; min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: inherit; font-weight: inherit; }
.square-author-link strong, .square-author-link span { display: block; }
.square-author-link strong { font-size: 13px; }
.square-author-link span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.button-like-link { border: 0; background: transparent; }

.user-zone-page .version-chip { margin-left: 8px; }
.zone-hero-card { position: relative; overflow: hidden; margin-top: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 12px 34px rgba(0,0,0,.04); }
.zone-cover { height: 92px; background: var(--zone-cover-bg, #e8e8e3); background-image: var(--zone-cover-image, none); background-size: cover; background-position: center; }
.zone-profile-main { padding: 0 18px 16px; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 13px; align-items: end; transform: translateY(-22px); margin-bottom: -22px; }
.zone-avatar { display: grid; place-items: center; width: 68px; height: 68px; border: 4px solid var(--surface); border-radius: 50%; color: #fff; background: #111; font-size: 20px; font-weight: 900; box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.zone-profile-main strong, .zone-profile-main span { display: block; }
.zone-profile-main strong { overflow: hidden; font-size: 22px; white-space: nowrap; text-overflow: ellipsis; }
.zone-profile-main span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.zone-profile-main p { margin: 8px 0 0; color: #555; font-size: 10px; line-height: 1.55; }
.zone-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 18px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.zone-stats div { text-align: center; border-right: 1px solid var(--line); }
.zone-stats div:last-child { border-right: 0; }
.zone-stats strong, .zone-stats span { display: block; }
.zone-stats strong { font-size: 18px; }
.zone-stats span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.zone-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px 18px 18px; }
.zone-actions button { min-height: 42px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); font-size: 10px; font-weight: 900; }
.zone-actions button:first-child { color: #fff; border-color: #111; background: #111; }
.zone-post-list { display: grid; gap: 12px; }
.zone-post-card { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 10px 26px rgba(0,0,0,.035); }
.zone-post-meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.zone-post-meta strong { font-size: 12px; }
.zone-post-meta span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.zone-post-card > p { margin: 12px 0 0; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.zone-media-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.zone-media-preview img, .zone-media-preview video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--soft); }
.zone-plan-preview { margin-top: 12px; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border-radius: 14px; background: var(--soft); }
.zone-plan-preview small, .zone-plan-preview strong, .zone-plan-preview span { display: block; }
.zone-plan-preview small { color: var(--muted); font-size: 8px; }
.zone-plan-preview strong { margin-top: 4px; font-size: 12px; }
.zone-plan-preview span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.zone-plan-preview button { min-height: 34px; padding: 0 11px; border: 0; border-radius: 999px; color: #fff; background: #111; font-size: 9px; font-weight: 900; white-space: nowrap; }
.zone-empty strong, .zone-empty span { display: block; }
.zone-empty span { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.55; }

.payment-sheet-backdrop { position: fixed; inset: 0; z-index: 32; display: grid; align-items: end; justify-items: center; padding: 18px; background: rgba(0,0,0,.32); }
.payment-sheet { width: min(100%, 430px); padding: 18px; border-radius: 24px 24px calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -18px 60px rgba(0,0,0,.18); }
.payment-sheet strong, .payment-sheet span { display: block; }
.payment-sheet strong { font-size: 18px; }
.payment-sheet span { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.payment-method-hint { margin: 10px 0 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.payment-method-options { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.payment-method-options .payment-method-option { min-height: 40px; margin-top: 0; border: 1px solid var(--line); color: #111; background: #fff; }
.payment-method-options .payment-method-option.active { border-color: #111; color: #fff; background: #111; }
.payment-method-options .payment-method-option small { display: block; margin-top: 2px; color: currentColor; font-size: 8px; opacity: .72; }
.payment-method-options .payment-method-option:disabled { color: var(--muted); background: #f3f3f1; opacity: 1; }
.payment-box { margin-top: 14px; padding: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; border-radius: 16px; background: var(--soft); }
.payment-box img { width: 118px; height: 118px; object-fit: contain; border-radius: 12px; background: #fff; }
.payment-box b, .payment-box p { display: block; margin: 0; }
.payment-box p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; word-break: break-all; }
.payment-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.payment-unavailable { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--soft); }
.payment-unavailable strong, .payment-unavailable span { display: block; }
.payment-unavailable strong { font-size: 13px; }
.payment-unavailable span { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.payment-sheet button { width: 100%; min-height: 46px; margin-top: 10px; border: 0; border-radius: 15px; color: #fff; background: #111; font-size: 12px; font-weight: 900; }
.payment-sheet-cancel { color: var(--muted) !important; background: #fff !important; border: 1px solid var(--line) !important; }
.member-sheet-backdrop { position: fixed; inset: 0; z-index: 34; display: grid; align-items: end; justify-items: center; padding: 18px; background: rgba(0,0,0,.34); }
.member-sheet { position: relative; width: min(100%, 450px); max-height: min(86vh, 760px); overflow: auto; padding: 20px; border-radius: 26px 26px calc(26px + env(safe-area-inset-bottom)) calc(26px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -18px 60px rgba(0,0,0,.2); }
.member-sheet-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #111; font-size: 20px; font-weight: 900; }
.member-sheet > small, .member-sheet > strong, .member-sheet > span { display: block; padding-right: 34px; }
.member-sheet > small { color: #8b6a18; font-size: 10px; font-weight: 900; }
.member-sheet > strong { margin-top: 7px; font-size: 20px; }
.member-sheet > span { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.member-sheet-section { margin-top: 16px; }
.member-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.member-review-grid div, .member-result-card { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.member-review-grid small, .member-review-grid strong, .member-review-grid span, .member-result-card small, .member-result-card strong, .member-result-card p { display: block; }
.member-review-grid small, .member-result-card small { color: var(--muted); font-size: 9px; font-weight: 900; }
.member-review-grid strong, .member-result-card strong { margin-top: 5px; font-size: 16px; line-height: 1.25; }
.member-review-grid span, .member-result-card p { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.member-sheet-advice { margin: 12px 0 0; padding: 12px; border-radius: 14px; color: #fff; background: #111; font-size: 11px; line-height: 1.6; }
.member-sheet-actions { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.member-sheet-actions button, .coach-application-form button { min-height: 44px; border: 0; border-radius: 14px; color: #fff; background: #111; font-size: 11px; font-weight: 900; }
.member-sheet-actions button + button { color: #111; background: #fff; border: 1px solid var(--line); }
.membership-recharge-sheet { padding: 16px; }
.membership-recharge-sheet .membership-card { margin: 0; border: 0; box-shadow: none; padding: 4px 0 0; }
.membership-recharge-sheet .membership-head { padding-right: 34px; }
.membership-recharge-sheet .pricing-grid { margin-top: 12px; }
.member-template-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.member-template-list span { padding: 7px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 10px; font-weight: 800; }
.coach-application-form { margin-top: 14px; display: grid; gap: 11px; }
.coach-application-form label, .coach-application-form span { display: block; }
.coach-application-form span { margin-bottom: 6px; font-size: 10px; font-weight: 900; }
.coach-application-form input, .coach-application-form select, .coach-application-form textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: inherit; font-size: 13px; }
.coach-application-form textarea { min-height: 96px; resize: vertical; }

.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 40px); padding: 11px 16px; border-radius: 999px; color: #fff; background: #111; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: 11px; font-weight: 800; animation: toast-in .18s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (min-width: 600px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100svh - 48px); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.12); }
  .app-header { top: 24px; }
}

@media (max-width: 480px) {
  .payment-box { grid-template-columns: 1fr; text-align: center; }
  .payment-box img { margin: auto; }
  .social-id-card { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 15px; }
  .social-id-card strong { font-size: 21px; }
  .conversation-row, .contact-row { grid-template-columns: 42px minmax(0, 1fr); }
  .conversation-meta, .contact-row i { grid-column: 2; justify-self: start; }
  .friend-request-row { grid-template-columns: 42px minmax(0, 1fr); }
  .friend-request-actions { grid-column: 2; grid-template-columns: 1fr 1fr; }
  .chat-head { align-items: center; }
  .chat-user { flex: 1 1 auto; }
  .chat-form { grid-template-columns: minmax(0, 1fr) 58px; }
}

@media (max-width: 360px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .recovery-grid { grid-template-columns: 1fr; }
  .food-entry, .day-target-switch, .button-row, .portion-controls, .code-row, .square-compose-grid, .shared-plan-card, .custom-plan-examples, .social-id-card, .friend-request-row, .chat-form, .template-store-grid, .plan-start-actions, .pricing-grid, .membership-benefits, .member-tool-grid, .coach-business-list, .payment-method-options, .member-review-grid, .member-sheet-actions { grid-template-columns: 1fr; }
  .square-actions { grid-template-columns: repeat(2, 1fr); }
  .bottom-nav button { font-size: 9px; }
  .nav-icon { width: 22px; height: 22px; transform: scale(.92); }
  .friend-request-actions { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .message-bubble { max-width: 100%; }
}