:root {
  color-scheme: dark;
  --bg: #090806;
  --panel: #15120e;
  --panel-2: #1e1a14;
  --line: rgba(222, 194, 132, 0.22);
  --gold: #d8b66a;
  --gold-2: #f1dfae;
  --text: #f6f1e7;
  --muted: #a99f8d;
  --danger: #e07a5f;
  --ok: #80c99b;
  --warn: #e9c46a;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(216, 182, 106, 0.14), transparent 32rem),
    linear-gradient(135deg, #090806 0%, #11100e 48%, #080706 100%);
  color: var(--text);
}

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

input,
select,
textarea {
  font-size: 16px;
}

button {
  cursor: pointer;
}

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

.sidebar {
  border-right: 1px solid var(--line);
  background: rgba(10, 9, 7, 0.88);
  padding: 24px 24px max(24px, env(safe-area-inset-bottom));
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: min(320px, 88vw);
  height: 100vh;
  max-height: 100dvh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-105%);
  transition: transform 180ms ease;
  box-shadow: var(--shadow);
}

.app-shell.nav-open .sidebar {
  transform: translateX(0);
}

.hamburger {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 24;
  width: 44px;
  height: 44px;
  display: grid;
  gap: 4px;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 13, 10, 0.92);
  box-shadow: var(--shadow);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--gold-2);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  border: 0;
  background: rgba(0, 0, 0, 0.58);
}

.app-shell.nav-open .nav-backdrop {
  display: block;
}

.menu-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.brand img {
  width: 54px;
  height: 38px;
  object-fit: contain;
}

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

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

.role-switch {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

.role-switch button,
.nav button,
.btn,
.ghost-btn {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 10px 12px;
}

.role-switch button {
  min-width: 0;
  padding: 8px 6px;
  font-size: 13px;
}

.role-switch button.active,
.nav button.active,
.btn {
  background: linear-gradient(135deg, var(--gold), #9f7930);
  color: #14100a;
  border-color: transparent;
  font-weight: 700;
}

.ghost-btn.danger {
  border-color: rgba(215, 122, 97, 0.45);
  color: #ffb2a2;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav button {
  text-align: left;
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav button.nav-parent {
  margin-top: 4px;
  font-weight: 800;
}

.nav button.nav-parent.active {
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.92), rgba(159, 121, 48, 0.94));
  color: #14100a;
  border-color: rgba(241, 223, 174, 0.9);
  box-shadow: 0 10px 24px rgba(216, 182, 106, 0.2);
}

.nav button.nav-child {
  width: calc(100% - 18px);
  margin-left: 18px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
  padding-left: 18px;
}

.nav button.nav-child::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: rgba(216, 182, 106, 0.32);
}

.nav button.nav-child.active {
  background: rgba(216, 182, 106, 0.2);
  border-color: rgba(216, 182, 106, 0.82);
  color: #14100a;
  box-shadow: inset 0 0 0 1px rgba(241, 223, 174, 0.16), 0 8px 18px rgba(0, 0, 0, 0.22);
}

.nav button.nav-child.active::before {
  background: var(--gold-2);
}

.nav button.nav-child.active,
.nav button.nav-child.active:hover {
  color: #fff4c9;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.34), rgba(88, 66, 28, 0.72));
  border-color: rgba(241, 223, 174, 0.92);
}

.nav button.nav-locked {
  opacity: 0.62;
  border-style: dashed;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.035);
}

.nav button.nav-locked small {
  display: block;
  margin-top: 2px;
  color: rgba(216, 182, 106, 0.78);
  font-size: 11px;
}

.content {
  padding: 82px 26px 26px;
}

.customer-content {
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

.customer-content::after {
  content: "";
  display: block;
  height: calc(12px + env(safe-area-inset-bottom, 0px));
}

.customer-calendar-shortcut {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 24;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--gold-2);
  background: rgba(15, 13, 10, 0.92);
  box-shadow: var(--shadow);
}

.customer-cloud-refresh-shortcut {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 24;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(42, 130, 218, 0.26);
  border-radius: 14px;
  color: #1d4ed8;
  background: rgba(239, 246, 255, 0.96);
  box-shadow: var(--shadow);
}

.customer-cloud-refresh-shortcut.with-calendar {
  right: 74px;
}

.customer-cloud-refresh-shortcut:disabled {
  opacity: 0.62;
}

.customer-calendar-shortcut svg,
.customer-cloud-refresh-shortcut svg {
  width: 22px;
  height: 22px;
}

.customer-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 24;
  width: min(520px, calc(100vw - 24px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(15, 13, 10, 0.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.customer-bottom-nav button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 0;
  border-radius: 16px;
  padding: 7px 4px;
  color: var(--muted);
  background: transparent;
}

.customer-bottom-nav button.active {
  color: #14100a;
  background: linear-gradient(135deg, var(--gold), #9f7930);
  font-weight: 800;
}

.customer-bottom-nav svg {
  width: 21px;
  height: 21px;
}

.customer-bottom-nav span {
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
  min-width: 0;
}

.topbar > div {
  min-width: 0;
  flex: 1;
}

.topbar > .topbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.topbar h1 {
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

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

.customer-content .topbar {
  flex-wrap: wrap;
  padding-inline: 52px 112px;
}

.customer-content .topbar > div:first-child {
  flex: 1 1 100%;
}

.customer-content .topbar > .topbar-actions {
  flex-wrap: wrap;
  max-width: 100%;
}

.customer-content .topbar h1 {
  font-size: 30px;
  line-height: 1.08;
  word-break: keep-all;
  overflow-wrap: normal;
}

.customer-content .topbar p {
  max-width: 34em;
  line-height: 1.65;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.card {
  grid-column: span 4;
  background: rgba(21, 18, 14, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.card.wide {
  grid-column: span 8;
}

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

.card h2,
.card h3 {
  margin: 0 0 14px;
  font-size: 18px;
}

.legal-card {
  line-height: 1.65;
}

.legal-list {
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
}

.legal-list li + li {
  margin-top: 8px;
}

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

.legal-meta div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

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

.legal-meta strong {
  color: var(--gold-2);
}

.firebase-form textarea {
  min-height: 190px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.firebase-helper-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.firebase-helper-actions .muted {
  font-size: 12px;
}

.firebase-actions {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  padding-right: 72px;
}

.password-toggle-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 34px;
  min-height: 34px;
  border: 1px solid rgba(222, 194, 132, 0.28);
  border-radius: 8px;
  color: var(--gold-2);
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.metric {
  color: var(--gold-2);
  font-size: 28px;
  font-weight: 800;
  margin: 6px 0;
}

.customer-home-snapshot {
  display: grid;
  gap: 16px;
  overflow: hidden;
  border-color: rgba(222, 194, 132, 0.34);
  background:
    linear-gradient(135deg, rgba(6, 22, 47, 0.98), rgba(13, 28, 55, 0.94) 62%, rgba(45, 34, 15, 0.9)),
    var(--panel);
}

.snapshot-main,
.snapshot-brand,
.snapshot-actions,
.snapshot-pfc-row,
.life-log-snapshot-score {
  display: flex;
  align-items: center;
}

.snapshot-main {
  justify-content: space-between;
  gap: 18px;
}

.snapshot-brand {
  gap: 12px;
  min-width: 0;
}

.snapshot-brand img {
  width: 58px;
  height: 46px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid rgba(222, 194, 132, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.snapshot-brand span,
.life-log-snapshot-score span,
.snapshot-metric-grid article span,
.life-log-snapshot-grid article span {
  display: block;
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 900;
}

.snapshot-brand h2 {
  margin: 3px 0 0;
  color: #fffaf0;
  font-size: 22px;
}

.snapshot-score-ring {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 94px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fffaf0;
  background:
    radial-gradient(circle at center, #0b1730 0 56%, transparent 57%),
    conic-gradient(#dec284 0 calc(var(--score, 0) * 1%), rgba(255, 255, 255, 0.15) 0 100%);
  box-shadow: inset 0 0 0 1px rgba(222, 194, 132, 0.3), 0 18px 34px rgba(0, 0, 0, 0.24);
}

.snapshot-score-ring strong {
  color: #fffaf0;
  font-size: 30px;
  line-height: 1;
}

.snapshot-score-ring small {
  margin-top: -20px;
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 900;
}

.snapshot-message {
  margin: 0;
  max-width: 780px;
  color: rgba(255, 250, 240, 0.78);
  font-weight: 760;
  line-height: 1.7;
}

.snapshot-metric-grid,
.life-log-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.snapshot-metric-grid article,
.life-log-snapshot-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  min-height: 116px;
  align-content: start;
  padding: 13px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
}

.snapshot-metric-grid article strong,
.life-log-snapshot-grid article strong {
  color: #fffaf0;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.snapshot-metric-grid article small,
.life-log-snapshot-grid article small {
  color: rgba(255, 250, 240, 0.64);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
}

.snapshot-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

.snapshot-bar i {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #dec284, #f4e4aa);
}

.snapshot-bar.water i {
  background: linear-gradient(90deg, #38bdf8, #14b8a6);
}

.snapshot-pfc-row {
  gap: 9px;
}

.snapshot-pfc-row strong {
  min-width: 0;
}

.life-log-pfc-actual {
  display: block;
  margin-top: 2px;
  color: rgba(255, 250, 240, 0.82);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.life-log-summary-card .life-log-pfc-actual {
  color: var(--text-muted);
}

.snapshot-pfc-ring {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #07111f;
  background:
    radial-gradient(circle at center, #fffaf0 0 49%, transparent 51%),
    conic-gradient(#38bdf8 0 calc(var(--p, 0) * 1%), #dec284 0 calc((var(--p, 0) + var(--f, 0)) * 1%), #22c55e 0 100%);
  font-size: 10px;
  font-weight: 950;
}

.snapshot-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.customer-home-snapshot .btn,
.customer-home-snapshot .ghost-btn {
  min-height: 42px;
  border-color: rgba(222, 194, 132, 0.38);
}

.customer-home-snapshot .ghost-btn {
  color: #fffaf0;
  background: rgba(255, 255, 255, 0.08);
}

.life-log-snapshot {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid rgba(222, 194, 132, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(6, 22, 47, 0.98), rgba(17, 31, 59, 0.94)),
    var(--panel);
}

.life-log-snapshot-score {
  justify-content: space-between;
  gap: 16px;
}

.life-log-snapshot-score > div:last-child {
  min-width: 0;
  flex: 1;
}

.life-log-snapshot-score strong {
  display: block;
  color: #fffaf0;
  font-size: 22px;
}

.life-log-snapshot-score p {
  margin: 6px 0 0;
  color: rgba(255, 250, 240, 0.72);
  font-weight: 760;
  line-height: 1.65;
}

.life-log-snapshot .snapshot-score-ring {
  width: 84px;
}

.life-log-snapshot-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.onboarding-card {
  background: linear-gradient(135deg, rgba(222, 194, 132, 0.13), rgba(18, 17, 15, 0.95));
}

.onboarding-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.onboarding-checklist span {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 800;
}

.onboarding-checklist span.done {
  border-color: rgba(124, 205, 143, 0.42);
  color: #baf3c7;
  background: rgba(124, 205, 143, 0.12);
}

.wizard-step {
  display: none;
  gap: 14px;
}

.wizard-step.active {
  display: grid;
}

.wizard-step h3 {
  margin: 0;
  color: var(--gold-2);
  font-size: 18px;
}

.wizard-stage-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 12px 0 16px;
  padding: 13px 14px;
  border: 1px solid rgba(222, 194, 132, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(222, 194, 132, 0.12), rgba(255, 255, 255, 0.04));
}

.wizard-stage-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  border-radius: 999px;
  padding: 7px 10px;
  color: #191306;
  background: linear-gradient(135deg, var(--gold-2), #b99648);
  font-size: 12px;
  font-weight: 900;
}

.wizard-stage-card strong {
  display: block;
  color: var(--text);
  font-size: 15px;
}

.wizard-stage-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.wizard-stage-card small {
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.goal-save-status {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid rgba(124, 205, 143, 0.28);
  border-radius: 8px;
  background: rgba(124, 205, 143, 0.09);
}

.goal-save-status.locked {
  border-color: rgba(255, 197, 92, 0.34);
  background: rgba(255, 197, 92, 0.1);
}

.goal-save-status strong {
  color: var(--text);
  font-size: 13px;
}

.goal-save-status span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.basic-goal-summary {
  display: grid;
  gap: 12px;
  margin: 14px 0 18px;
}

.basic-goal-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.basic-goal-summary-card {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.summary-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.summary-card-head span {
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 900;
}

.summary-card-head strong {
  color: var(--text);
  font-size: 14px;
}

.summary-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  align-items: start;
}

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

.summary-row strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}

.dashboard-access-card {
  display: grid;
  gap: 14px;
}

.dashboard-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
}

.dashboard-link-btn {
  display: grid;
  gap: 4px;
  min-height: 68px;
  text-align: left;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
}

.dashboard-link-btn strong {
  font-size: 14px;
}

.dashboard-link-btn span {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-link-btn:hover,
.dashboard-link-btn:focus-visible {
  border-color: rgba(222, 194, 132, 0.55);
  background: rgba(222, 194, 132, 0.1);
}

.dashboard-task-card {
  display: grid;
  gap: 12px;
}

.dashboard-task-list {
  display: grid;
  gap: 8px;
  max-height: 300px;
}

.dashboard-task-row {
  align-items: center;
  gap: 10px;
}

.dashboard-task-row > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 150px;
}

.dashboard-task-row small {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.business-task-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1160px;
  margin: 0 auto;
}

.business-task-tab {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(42, 130, 218, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(14, 39, 74, 0.06);
  overflow: hidden;
}

.business-task-tab > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.business-task-tab > summary::-webkit-details-marker {
  display: none;
}

.business-task-tab > summary span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.business-task-tab > summary small {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.business-task-tab[open] > summary {
  border-bottom: 1px solid rgba(42, 130, 218, 0.14);
  background: rgba(42, 130, 218, 0.06);
}

.business-task-tab:not([open]) > .business-task-form,
.business-task-tab:not([open]) > .business-task-list {
  display: none;
}

.business-task-form,
.business-task-list {
  padding: 16px 18px 18px;
}

.business-task-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
  min-width: 0;
}

.business-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(42, 130, 218, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.74);
  min-width: 0;
}

.business-task-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.business-task-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.business-task-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.business-task-meta,
.business-task-history {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.business-task-meta span,
.business-task-history span {
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(42, 130, 218, 0.07);
}

.business-task-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: start;
  min-width: 0;
}

.business-task-actions .btn,
.business-task-actions .ghost-btn {
  min-width: 0;
  white-space: normal;
}

.basic-goal-card > .basic-goal-form:not(.basic-goal-inline-form) {
  display: none;
}

.basic-goal-inline-form {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(222, 194, 132, 0.18);
}

.basic-goal-summary-card .ghost-btn.active {
  border-color: rgba(222, 194, 132, 0.5);
  color: var(--gold-2);
  background: rgba(222, 194, 132, 0.1);
}

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

.choice-block {
  display: grid;
  gap: 8px;
}

.choice-block > strong {
  color: var(--text);
  font-size: 13px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.choice-pill {
  position: relative;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.choice-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-pill.selected,
.choice-pill:has(input:checked) {
  border-color: rgba(222, 194, 132, 0.62);
  color: #191306;
  background: linear-gradient(135deg, var(--gold-2), #b99648);
  box-shadow: 0 10px 22px rgba(222, 194, 132, 0.12);
}

.wizard-nav {
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr minmax(132px, auto);
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.wizard-progress-text {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.wizard-progress-text strong {
  color: var(--gold-2);
}

.wizard-progress-text span {
  text-align: right;
  font-weight: 800;
}

.wizard-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.wizard-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.wizard-dots span.active {
  width: 22px;
  background: var(--gold-2);
}

.goal-safety-card,
.goal-reminder-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.goal-safety-card p,
.goal-reminder-card p {
  margin: 4px 0 0;
}

.goal-safety-card.ok,
.goal-reminder-card.ok {
  border-color: rgba(124, 205, 143, 0.42);
  background: rgba(124, 205, 143, 0.1);
}

.goal-safety-card.warn,
.goal-reminder-card.warn,
.goal-safety-card.unknown,
.goal-reminder-card.unknown {
  border-color: rgba(222, 194, 132, 0.45);
  background: rgba(222, 194, 132, 0.1);
}

.goal-safety-card.danger,
.goal-reminder-card.danger {
  border-color: rgba(255, 113, 113, 0.55);
  background: rgba(255, 113, 113, 0.12);
}

.goal-safety-metrics {
  min-width: 92px;
  text-align: right;
}

.goal-safety-metrics span,
.goal-safety-metrics small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.goal-safety-metrics strong {
  display: block;
  color: var(--gold-2);
  font-size: 22px;
}

.goal-reminder-card {
  margin-top: 0;
}

.challenge-card {
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.12), rgba(21, 18, 14, 0.94));
}

.challenge-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.challenge-head h2 {
  margin-bottom: 6px;
}

.challenge-head strong {
  color: var(--gold-2);
  font-size: 28px;
  text-align: right;
}

.progress-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(222, 194, 132, 0.16);
  margin: 12px 0 14px;
}

.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.challenge-grid div {
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.14);
}

.challenge-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}

.challenge-grid strong {
  color: var(--text);
  font-size: 16px;
}

.volume-category-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.volume-equivalent {
  display: grid;
  gap: 8px;
  margin: 8px 0 14px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.08);
}

.volume-equivalent > span {
  color: var(--muted);
  font-size: 12px;
}

.volume-equivalent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.volume-equivalent-grid div {
  display: grid;
  grid-template-rows: auto minmax(34px, 1fr) auto;
  gap: 3px;
  min-height: 104px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.volume-equivalent-grid small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.volume-equivalent-grid strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.volume-equivalent-grid b {
  align-self: end;
  color: var(--gold-2);
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
}

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

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

.volume-category-head strong {
  color: var(--text);
}

.volume-category-bar {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.volume-category-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8f7450, var(--gold-2));
}

.training-balance-card {
  border-color: rgba(222, 194, 132, 0.24);
}

.training-balance-card h3 {
  margin: 16px 0 8px;
  color: var(--gold-2);
  font-size: 15px;
}

.training-goal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.training-goal-summary div,
.training-goal-row {
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.14);
}

.training-goal-summary span,
.training-goal-summary small,
.training-goal-row small {
  color: var(--muted);
  font-size: 11px;
}

.training-goal-summary strong {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: 19px;
}

.training-goal-volume-list {
  display: grid;
  gap: 10px;
}

.training-body-map {
  position: relative;
  min-height: 410px;
  margin: 12px 0 8px;
  overflow: hidden;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(222, 194, 132, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.16));
}

.training-body-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.training-body-lines line {
  stroke: var(--gold-2);
  stroke-width: 0.7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(222, 194, 132, 0.42));
}

.training-body-silhouette {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(168px, 36%);
  transform: translate(-50%, -50%);
  opacity: 0.95;
}

.training-body-silhouette svg {
  width: 100%;
  height: auto;
  fill: rgba(222, 194, 132, 0.2);
  stroke: rgba(247, 230, 170, 0.72);
  stroke-width: 2.2;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34));
}

.body-map-label {
  position: absolute;
  width: 26%;
  min-width: 118px;
  padding: 9px 10px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 9px;
  background: rgba(7, 9, 14, 0.82);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.body-map-label.right {
  text-align: right;
}

.body-map-label span,
.body-map-label small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.body-map-label strong {
  display: block;
  margin: 3px 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.body-map-label.started {
  border-color: rgba(222, 194, 132, 0.26);
}

.body-map-label.active {
  border-color: rgba(222, 194, 132, 0.44);
  background: rgba(46, 36, 18, 0.8);
}

.body-map-label.complete {
  border-color: rgba(99, 230, 190, 0.45);
  background: rgba(20, 72, 62, 0.55);
}

.body-map-label.complete strong {
  color: #bfffea;
}

.body-map-label.empty {
  opacity: 0.72;
}

.balance-body-map {
  min-height: 0;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 42%, rgba(99, 230, 190, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.13));
}

.balance-body-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.balance-body-head strong,
.balance-score b {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
}

.balance-body-head small,
.balance-score span,
.balance-score small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.balance-score {
  min-width: 132px;
  text-align: right;
}

.balance-body-layout {
  display: grid;
  grid-template-columns: minmax(138px, 0.85fr) minmax(160px, 1fr) minmax(138px, 0.85fr);
  align-items: center;
  gap: 12px;
}

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

.balance-body-list.right .balance-part {
  text-align: right;
}

.balance-part {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  padding: 9px 10px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 12px;
  background: rgba(7, 9, 14, 0.58);
}

.balance-part strong,
.balance-part b,
.balance-part span,
.balance-part small {
  display: block;
}

.balance-part strong {
  color: var(--text);
  font-size: 13px;
}

.balance-part span,
.balance-part small {
  color: var(--muted);
  font-size: 10px;
}

.balance-part b {
  color: var(--text);
  font-size: 13px;
}

.balance-part small {
  grid-column: 1 / -1;
}

.balance-part.started {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(100, 68, 18, 0.34);
}

.balance-part.low {
  border-color: rgba(249, 115, 22, 0.38);
  background: rgba(96, 45, 18, 0.38);
}

.balance-part.active {
  border-color: rgba(59, 130, 246, 0.42);
  background: rgba(28, 56, 86, 0.42);
}

.balance-part.complete {
  border-color: rgba(99, 230, 190, 0.45);
  background: rgba(20, 72, 62, 0.45);
}

.balance-part.complete b {
  color: #bfffea;
}

.balance-part.empty {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(90, 25, 32, 0.34);
}

.balance-part.untrained {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.balance-part.untrained b,
.balance-anatomy-callout.untrained b {
  color: var(--muted);
}

.balance-body-figure {
  display: grid;
  place-items: center;
  min-height: 340px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
}

.balance-body-svg {
  width: min(220px, 100%);
  height: auto;
  overflow: visible;
}

.balance-body-svg .body-base {
  fill: rgba(216, 224, 232, 0.26);
  stroke: rgba(247, 230, 170, 0.34);
  stroke-width: 4;
  stroke-linejoin: round;
}

.balance-body-svg .muscle {
  stroke: rgba(255, 255, 255, 0.58);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
}

.balance-body-svg .muscle.empty {
  fill: rgba(239, 68, 68, 0.62);
}

.balance-body-svg .muscle.low {
  fill: rgba(249, 115, 22, 0.68);
}

.balance-body-svg .muscle.started {
  fill: rgba(245, 158, 11, 0.7);
}

.balance-body-svg .muscle.active {
  fill: rgba(59, 130, 246, 0.76);
}

.balance-body-svg .muscle.complete {
  fill: rgba(43, 202, 154, 0.82);
}

.balance-view-tabs,
.balance-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 14px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.balance-mode-tabs {
  margin-top: -6px;
}

.balance-view-tabs button,
.balance-mode-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.balance-view-tabs button.active,
.balance-mode-tabs button.active {
  color: #111827;
  background: linear-gradient(135deg, #eef5ff, #ffffff);
  box-shadow: 0 8px 18px rgba(8, 15, 29, 0.16);
}

.balance-recovery-note {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.balance-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.28fr) minmax(220px, 0.82fr);
  align-items: center;
  gap: 14px;
}

.balance-anatomy-stage {
  position: relative;
  min-height: 500px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.13), transparent 42%),
    rgba(255, 255, 255, 0.045);
}

.balance-figure-crop {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 2;
  width: min(72%, 280px);
  height: 82%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  pointer-events: none;
}

.balance-figure-crop img {
  position: absolute;
  top: 0;
  left: -4%;
  z-index: 3;
  width: 214%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  opacity: 0.94;
  filter: contrast(1.05) saturate(0.98);
}

.balance-anatomy-stage[data-view="back"] .balance-figure-crop img {
  left: -110%;
}

.balance-muscle-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(0.2px);
}

.balance-muscle-layer path {
  opacity: 0.34;
  stroke: rgba(255, 255, 255, 0.76);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.balance-muscle-layer .red {
  fill: #ff6d78;
}

.balance-muscle-layer .green {
  fill: #19bd8b;
}

.balance-muscle-layer .blue {
  fill: #4d8cff;
}

.balance-muscle-layer .amber {
  fill: #f0c65a;
}

.balance-muscle-layer .untrained {
  fill: rgba(255, 255, 255, 0.12);
  opacity: 0.18;
}

.balance-muscle-layer .empty {
  fill: #ef4444;
  opacity: 0.54;
}

.balance-muscle-layer .low {
  fill: #f97316;
  opacity: 0.58;
}

.balance-muscle-layer .started {
  fill: #f59e0b;
  opacity: 0.62;
}

.balance-muscle-layer .active {
  fill: #3b82f6;
  opacity: 0.66;
}

.balance-muscle-layer .complete {
  fill: #22bd8c;
  opacity: 0.72;
}

.balance-anatomy-stage[data-view="front"] .back-layer,
.balance-anatomy-stage[data-view="back"] .front-layer {
  display: none;
}

.balance-callout-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.balance-anatomy-stage[data-view="front"] .back-callouts,
.balance-anatomy-stage[data-view="back"] .front-callouts {
  display: none;
}

.balance-anatomy-callout {
  position: absolute;
  min-width: 102px;
  max-width: 132px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 26px rgba(8, 15, 29, 0.12);
  color: #111827;
  line-height: 1.25;
}

.balance-anatomy-callout strong,
.balance-anatomy-callout b,
.balance-anatomy-callout small {
  display: block;
}

.balance-anatomy-callout strong {
  font-size: 12px;
  font-weight: 900;
}

.balance-anatomy-callout b {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
}

.balance-anatomy-callout small {
  margin-top: 1px;
  color: #9aa3af;
  font-size: 11px;
  font-weight: 800;
}

.balance-anatomy-callout.red b {
  color: #f05b66;
}

.balance-anatomy-callout.green b {
  color: #12a879;
}

.balance-anatomy-callout.blue b {
  color: #3c7df0;
}

.balance-anatomy-callout.amber b {
  color: #c99919;
}

.balance-anatomy-callout.untrained {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(9, 8, 7, 0.72);
  opacity: 0.62;
}

.balance-anatomy-parts {
  align-self: stretch;
  grid-template-columns: 1fr;
}

.balance-anatomy-parts .balance-part {
  min-height: 58px;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.balance-anatomy-parts .balance-part strong,
.balance-anatomy-parts .balance-part b {
  color: var(--text);
}

.balance-anatomy-parts .balance-part.complete {
  border-color: rgba(25, 189, 139, 0.34);
}

.balance-anatomy-parts .balance-part.active {
  border-color: rgba(77, 140, 255, 0.34);
}

.balance-advice {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(99, 230, 190, 0.2);
  border-radius: 14px;
  background: rgba(20, 72, 62, 0.24);
}

.balance-advice span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}

.balance-advice strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

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

.training-goal-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.training-goal-row-head strong {
  color: var(--text);
}

.training-frequency-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.training-frequency-list span {
  padding: 8px 10px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 999px;
  color: var(--gold-2);
  background: rgba(216, 182, 106, 0.08);
  font-size: 12px;
  font-weight: 700;
}

.training-goal-form {
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.training-goal-form label:has(textarea),
.training-phase-guide,
.training-purpose-guide,
.training-intensity-guide,
.goal-concern-picker {
  grid-column: 1 / -1;
}

.training-phase-guide,
.training-purpose-guide,
.training-intensity-guide {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.training-hearing-fields {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid rgba(64, 152, 255, 0.16);
  border-radius: 8px;
  background: rgba(64, 152, 255, 0.06);
}

.training-hearing-fields > label {
  display: grid;
  gap: 6px;
}

.training-phase-guide > strong,
.training-purpose-guide > strong,
.training-intensity-guide > strong {
  color: var(--gold-2);
}

.training-phase-guide p,
.training-purpose-guide p,
.training-intensity-guide p {
  margin: 0;
}

.training-phase-guide-list,
.training-purpose-list,
.training-intensity-list {
  display: grid;
  gap: 8px;
}

.training-purpose-list,
.training-intensity-list {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.training-phase-group {
  display: grid;
  gap: 8px;
}

.training-phase-group > span {
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 900;
}

.training-phase-option,
.training-purpose-option,
.training-intensity-option {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 10px 10px 10px 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.training-phase-option::before,
.training-purpose-option::before,
.training-intensity-option::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 13px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(232, 220, 196, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}

.training-purpose-option::before {
  border-radius: 5px;
}

.training-phase-option:hover,
.training-purpose-option:hover,
.training-intensity-option:hover {
  border-color: rgba(222, 194, 132, 0.28);
  transform: translateY(-1px);
}

.training-phase-option.active,
.training-purpose-option.active,
.training-intensity-option.active {
  border-color: rgba(222, 194, 132, 0.64);
  background: linear-gradient(135deg, rgba(222, 194, 132, 0.18), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(247, 230, 170, 0.12);
}

.training-phase-option.active::before,
.training-purpose-option.active::before,
.training-intensity-option.active::before {
  border-color: var(--gold-2);
  background: radial-gradient(circle at center, var(--gold-2) 0 42%, rgba(0, 0, 0, 0.35) 45%);
  box-shadow: 0 0 0 4px rgba(222, 194, 132, 0.12);
}

.training-purpose-option.active::before {
  background: linear-gradient(135deg, var(--gold-2), #ffe7a3);
}

.training-phase-option.disabled,
.training-purpose-option.disabled,
.training-intensity-option.disabled {
  cursor: not-allowed;
  opacity: 0.46;
  transform: none;
}

.training-phase-option input,
.training-purpose-option input,
.training-intensity-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.training-phase-guide-list span,
.training-purpose-list span,
.training-intensity-list span {
  color: var(--text);
  font-weight: 800;
}

.training-phase-guide-list small,
.training-purpose-list small,
.training-intensity-list small {
  color: var(--muted);
  line-height: 1.6;
}

.training-phase-guide-list em {
  color: var(--gold-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.training-phase-guide-list b,
.training-purpose-list b {
  justify-self: start;
  width: fit-content;
  margin-top: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
}

.training-phase-option.active b,
.training-purpose-option.active b {
  color: #191306;
  background: var(--gold-2);
}

.training-goal-save-btn.saved,
.training-goal-save-btn.saved:disabled,
.save-state-saved,
.save-state-saved:disabled {
  color: #eafff2;
  border-color: rgba(83, 203, 136, 0.42);
  background: rgba(83, 203, 136, 0.2);
  box-shadow: inset 0 0 0 1px rgba(168, 255, 206, 0.12);
  cursor: default;
  opacity: 1;
}

.phase-preset-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.phase-preset-panel h3 {
  margin: 0;
  color: var(--gold-2);
  font-size: 16px;
}

.phase-preset-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.phase-preset-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.phase-preset-card.registered {
  border-color: rgba(95, 184, 136, 0.42);
  background: rgba(95, 184, 136, 0.08);
}

.phase-preset-card strong {
  color: var(--text);
}

.phase-preset-card p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.phase-preset-card span:not(.badge) {
  display: block;
  color: var(--gold-2);
  font-size: 12px;
  line-height: 1.5;
}

.trainer-phase-breakdown {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.trainer-phase-breakdown h3 {
  margin: 0;
  color: var(--gold-2);
  font-size: 16px;
}

.trainer-phase-list {
  display: grid;
  gap: 10px;
}

.trainer-phase-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.trainer-phase-card.active {
  border-color: rgba(128, 201, 155, 0.45);
  background: rgba(128, 201, 155, 0.08);
}

.trainer-phase-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.trainer-phase-card-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.trainer-phase-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.trainer-phase-metrics span {
  padding: 8px 10px;
  border: 1px solid rgba(222, 194, 132, 0.13);
  border-radius: 8px;
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.trainer-template-row {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.trainer-template-row div {
  display: grid;
  gap: 4px;
}

.trainer-template-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.goal-concern-picker {
  display: grid;
  gap: 10px;
}

.goal-concern-picker > strong {
  color: var(--gold-2);
}

.goal-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sales-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.sales-summary-grid,
.sales-check {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.sales-summary-grid div,
.sales-check div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.sales-summary-grid span,
.sales-check span {
  color: var(--muted);
  font-size: 12px;
}

.sales-summary-grid strong,
.sales-check strong {
  color: var(--gold-2);
  font-size: 20px;
}

.sales-export-actions {
  margin-top: 16px;
}

.cash-count-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(216, 182, 106, 0.055);
}

.ok-text {
  color: var(--ok) !important;
}

.warn-text {
  color: var(--warn) !important;
}

.pace-panel {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.14);
}

.pace-panel span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.pace-panel strong {
  color: var(--gold-2);
  font-size: 24px;
}

.strength-challenge {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid rgba(222, 194, 132, 0.14);
  padding-top: 14px;
}

.strength-challenge h3 {
  margin: 0;
  color: var(--gold-2);
  font-size: 15px;
}

.strength-challenge-row {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.14);
}

.strength-challenge-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.strength-challenge-head div {
  display: grid;
  gap: 3px;
}

.strength-challenge-head strong,
.strength-challenge-head b {
  color: var(--text);
}

.strength-challenge-head span {
  color: var(--muted);
  font-size: 11px;
}

.challenge-share-panel {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid rgba(222, 194, 132, 0.14);
  padding-top: 14px;
}

.challenge-share-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.challenge-share-head h3,
.challenge-share-head p {
  margin: 0;
}

.challenge-share-head h3 {
  color: var(--gold-2);
  font-size: 15px;
}

.share-textarea {
  width: 100%;
  min-height: 126px;
  resize: vertical;
  border: 1px solid rgba(222, 194, 132, 0.2);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
  line-height: 1.65;
  font: inherit;
}

.challenge-image-preview {
  border: 1px solid rgba(222, 194, 132, 0.2);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.24);
}

.challenge-image-preview p {
  margin: 0 0 8px;
}

.challenge-image-preview img {
  width: 100%;
  max-width: 420px;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.challenge-image-preview img.is-landscape {
  max-width: 720px;
}

.progress-comparison-preview img {
  max-width: 100%;
}

.strength-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.strength-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f86a8, var(--gold-2));
}

.one-rm-graph {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.one-rm-graph-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.one-rm-graph-head strong {
  color: var(--gold-2);
}

.one-rm-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 56px));
  gap: 7px;
  align-items: end;
  justify-content: start;
  min-height: 104px;
  padding: 8px;
  border: 1px solid rgba(222, 194, 132, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.one-rm-point {
  display: grid;
  gap: 4px;
  align-items: end;
  justify-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
}

.one-rm-bar {
  display: flex;
  align-items: end;
  width: 18px;
  height: 58px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.one-rm-bar span {
  display: block;
  width: 100%;
  min-height: 8px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--gold-2), #6f86a8);
}

.one-rm-point strong {
  color: var(--text);
  font-size: 11px;
}

.one-rm-point small {
  font-size: 9px;
}

.pace-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.pace-tabs .ghost-btn {
  padding: 7px 9px;
  font-size: 12px;
}

.pace-tabs .active {
  border-color: var(--gold);
  color: var(--gold-2);
  background: rgba(216, 182, 106, 0.1);
}

.cardio-plan-card {
  border-color: rgba(128, 201, 155, 0.26);
}

.cardio-plan-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.cardio-plan-summary div,
.cardio-plan-item {
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.14);
}

.cardio-plan-summary span,
.cardio-plan-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.cardio-plan-summary strong {
  display: block;
  color: var(--gold-2);
  font-size: 22px;
  margin-top: 4px;
}

.cardio-plan-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.cardio-plan-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.cardio-plan-item strong {
  color: var(--text);
}

.cardio-plan-item b {
  color: var(--ok);
  white-space: nowrap;
}

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

.row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(222, 194, 132, 0.12);
}

.row:first-child {
  border-top: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  border: 1px solid var(--line);
  color: var(--gold-2);
  white-space: nowrap;
}

.badge.ok {
  color: var(--ok);
  border-color: rgba(128, 201, 155, 0.35);
}

.badge.warn {
  color: var(--warn);
  border-color: rgba(233, 196, 106, 0.35);
}

.badge.danger {
  color: var(--danger);
  border-color: rgba(224, 122, 95, 0.35);
}

.badge.neutral {
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.14);
}

.form {
  display: grid;
  gap: 10px;
}

.compact-form {
  margin-top: 14px;
}

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

.check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.check-grid input {
  width: auto;
}

.reminder-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.owl-coach-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  justify-items: center;
  border-color: rgba(222, 194, 132, 0.26);
  background:
    radial-gradient(circle at 50% 60px, rgba(216, 182, 106, 0.22), transparent 120px),
    rgba(255, 255, 255, 0.035);
}

.owl-coach-avatar {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(222, 194, 132, 0.34);
  border-radius: 999px;
  padding: 6px;
  background:
    linear-gradient(145deg, rgba(222, 194, 132, 0.22), rgba(255, 255, 255, 0.04)),
    rgba(0, 0, 0, 0.24);
  object-fit: contain;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.owl-coach-avatar.small {
  width: 46px;
  height: 46px;
  padding: 4px;
}

.owl-coach-speech,
.mascot-reminder-bubble {
  position: relative;
  width: 100%;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.22);
  text-align: left;
}

.owl-coach-speech::before,
.mascot-reminder-bubble::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 14px;
  height: 14px;
  border-left: 1px solid rgba(222, 194, 132, 0.18);
  border-top: 1px solid rgba(222, 194, 132, 0.18);
  background: rgba(0, 0, 0, 0.22);
  transform: translateX(-50%) rotate(45deg);
}

.owl-coach-speech span {
  display: block;
  color: var(--gold);
  font-size: 12px;
  margin-bottom: 4px;
}

.owl-coach-speech strong,
.mascot-reminder-bubble strong {
  color: var(--gold-2);
}

.owl-coach-speech p,
.mascot-reminder-bubble p {
  margin: 6px 0 0;
  color: var(--text);
  line-height: 1.7;
}

.mascot-reminder-list {
  gap: 10px;
  max-height: 300px;
}

.mascot-reminder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  justify-items: center;
}

.mascot-reminder-bubble > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.row.reminder-guide-row {
  grid-template-columns: 1fr;
  align-items: flex-start;
  gap: 10px;
  border-color: rgba(216, 182, 106, 0.28);
  background: rgba(216, 182, 106, 0.08);
}

.row.reminder-guide-row span:nth-child(2) {
  line-height: 1.8;
  white-space: normal;
}

.mascot-reminder-row.reminder-guide-row .mascot-reminder-bubble p {
  line-height: 1.85;
}

.trial-payment-choice {
  display: grid;
  gap: 10px;
}

.trial-policy-box {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
}

.trial-policy-box.compact {
  margin-top: 10px;
}

.trial-policy-box strong {
  color: var(--gold-2);
}

.trial-policy-box ul {
  margin: 0;
  padding-left: 18px;
}

.trial-policy-box li {
  margin: 4px 0;
  line-height: 1.7;
}

.trial-policy-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.record-target {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.06);
}

.record-target span,
.record-target small {
  color: var(--muted);
  font-size: 12px;
}

.record-target strong {
  color: var(--gold-2);
  font-size: 18px;
}

.today-record-card h2 {
  margin-top: 0;
}

.today-record-stack {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.today-record-block {
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.today-record-block.open {
  border-color: rgba(216, 182, 106, 0.68);
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: 0 14px 34px rgba(216, 182, 106, 0.12);
}

.today-record-btn {
  width: 100%;
  border: 0;
  color: var(--text);
  background: transparent;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  text-align: left;
}

.today-record-btn span {
  font-weight: 800;
}

.today-record-btn strong {
  color: var(--gold-2);
}

.today-record-btn.active {
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.34), rgba(159, 121, 48, 0.18));
  color: #fff7df;
}

.today-record-btn.active strong {
  color: #fff0bc;
}

.today-record-popup {
  margin: 0 16px 16px 34px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.today-record-popup p {
  margin-top: 0;
  color: var(--muted);
  line-height: 1.7;
}

.body-record-compact-stack {
  margin-top: 14px;
}

.body-record-popup {
  margin-left: 16px;
}

.body-record-popup .meal-date-control,
.body-record-popup .inbody-panel,
.body-record-popup .body-record-form,
.body-record-popup .body-record-summary,
.body-record-popup .body-record-history,
.body-record-popup .body-trend-graph {
  margin-top: 12px;
}

.body-record-popup .meal-date-control {
  margin-bottom: 12px;
}

.body-record-form {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
}

.body-record-form label:has(textarea) {
  grid-column: 1 / -1;
}

.body-record-summary,
.body-record-history {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

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

.body-record-summary div,
.body-record-row {
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.18);
}

.body-record-summary span,
.body-record-row small {
  color: var(--muted);
}

.body-record-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--gold-2);
  font-size: 20px;
}

.body-record-row {
  display: grid;
  grid-template-columns: 1fr repeat(5, minmax(92px, 0.8fr)) 1.6fr;
  gap: 10px;
  align-items: center;
}

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

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

.body-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--trend-color) 28%, transparent);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--trend-color) 11%, rgba(255, 255, 255, 0.04));
  font-size: 12px;
  font-weight: 800;
}

.body-trend-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--trend-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--trend-color) 34%, transparent);
}

.body-trend-legend strong {
  color: var(--text);
}

.body-trend-svg-wrap {
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(126, 148, 176, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(9, 13, 20, 0.18);
}

.body-trend-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 190px;
}

.body-trend-grid {
  stroke: rgba(126, 148, 176, 0.22);
  stroke-width: 1;
}

.body-trend-grid.subtle {
  stroke: rgba(126, 148, 176, 0.13);
}

.body-trend-line {
  fill: none;
  stroke: var(--trend-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--trend-color) 24%, transparent));
}

.body-trend-dot {
  fill: var(--trend-color);
  stroke: #ffffff;
  stroke-width: 2.4;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

.body-trend-latest-label {
  fill: var(--trend-color);
  font-size: 10px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.body-trend-axis {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.body-weight-flow-card {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(222, 194, 132, 0.26);
  border-radius: 8px;
  color: #10233f;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 241, 0.96)),
    #fffaf0;
  box-shadow: 0 16px 34px rgba(8, 27, 56, 0.12);
}

.body-weight-flow-head,
.body-weight-context-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.body-weight-flow-head span,
.body-weight-context-head span {
  color: #b79a57;
  font-size: 12px;
  font-weight: 900;
}

.body-weight-flow-head h3,
.body-weight-context-head h3 {
  margin: 3px 0 0;
  color: #0c2748;
  font-size: 18px;
  font-weight: 900;
}

.body-weight-flow-current {
  min-width: 96px;
  padding: 10px 12px;
  border: 1px solid rgba(183, 154, 87, 0.26);
  border-radius: 8px;
  text-align: right;
  background: rgba(250, 246, 237, 0.9);
}

.body-weight-flow-current small,
.body-weight-flow-current span {
  display: block;
  color: #6f7890;
  font-size: 11px;
  font-weight: 800;
}

.body-weight-flow-current strong {
  display: block;
  color: #0b2a50;
  font-size: 22px;
  line-height: 1.15;
}

.body-weight-chart-wrap {
  overflow-x: auto;
  padding: 6px 0 2px;
}

.body-weight-chart {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
}

.body-weight-chart-grid {
  stroke: rgba(14, 42, 79, 0.12);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

.body-weight-chart-line {
  fill: none;
  stroke: #0b2a50;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.body-weight-chart-dot {
  fill: #fffaf0;
  stroke: #0b2a50;
  stroke-width: 2.6;
}

.body-weight-chart-label,
.body-weight-chart-y,
.body-weight-chart-date,
.body-weight-chart-weekday {
  fill: #152b48;
  font-weight: 800;
  text-anchor: middle;
}

.body-weight-chart-label {
  font-size: 12px;
  paint-order: stroke;
  stroke: rgba(255, 250, 240, 0.92);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.body-weight-chart-y {
  fill: #667085;
  font-size: 11px;
  text-anchor: end;
}

.body-weight-chart-date,
.body-weight-chart-weekday {
  fill: #586275;
  font-size: 11px;
}

.body-weight-insight {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(183, 154, 87, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.body-weight-insight strong {
  color: #c3a35f;
  font-size: 26px;
  line-height: 1;
  text-align: center;
}

.body-weight-insight p {
  margin: 0;
  color: #233650;
  line-height: 1.7;
}

.body-weight-context-table {
  overflow: hidden;
  border: 1px solid rgba(14, 42, 79, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.body-weight-context-row {
  display: grid;
  grid-template-columns: 1.05fr 0.8fr 1fr 0.9fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(14, 42, 79, 0.08);
  color: #152b48;
  font-size: 13px;
  font-weight: 750;
}

.body-weight-context-row:first-child {
  border-top: 0;
}

.body-weight-context-row.head {
  color: #6f7890;
  background: rgba(247, 241, 229, 0.86);
  font-size: 12px;
  font-weight: 900;
}

.body-weight-context-row span {
  min-width: 0;
}

.life-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 999px;
  vertical-align: -1px;
}

.life-dot.water {
  border: 1.8px solid #0b5ca8;
  background: rgba(80, 152, 224, 0.08);
}

.life-dot.meal {
  border: 1.8px solid #c6a45c;
  background: rgba(198, 164, 92, 0.12);
}

.life-dot.sleep {
  border: 1.8px solid #0b2a50;
  background: rgba(11, 42, 80, 0.08);
}

.inbody-panel {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.06);
}

.inbody-panel h2 {
  margin: 0 0 4px;
}

.inbody-file-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.inbody-file-picker input {
  display: none;
}

.inbody-video {
  width: min(420px, 100%);
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #050505;
}

.training-inbody-block {
  display: grid;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.training-inbody-block h3 {
  margin: 0;
}

.training-add-panel > .muted {
  margin: 0;
}

.training-add-panel.embedded {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.training-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.training-entry-mode-note {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.07);
}

.training-entry-mode-note strong {
  color: var(--gold-2);
  font-size: 14px;
}

.training-entry-mode-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.customer-quick-training-add-panel {
  background: rgba(216, 182, 106, 0.04);
}

.customer-quick-training-form {
  align-items: end;
}

.session-add-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.session-add-footer .btn {
  min-width: 170px;
}

.exercise-select-preview {
  display: grid;
  margin: 2px 0 6px;
}

.exercise-select-preview .exercise-media {
  min-height: 126px;
  margin: 0;
  background: #fff;
}

.exercise-guide-panel .exercise-media {
  margin: 0;
  min-height: 148px;
  background: #fff;
}

.training-preset-form {
  margin-top: 12px;
}

.preset-row-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
}

.preset-row {
  display: grid;
  grid-template-columns: 72px minmax(140px, 0.8fr) minmax(180px, 1.2fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.preset-use {
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(216, 182, 106, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.preset-use input {
  width: auto;
  min-height: auto;
  margin: 0;
}

.preset-category-block {
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  padding: 12px;
}

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

.preset-category-head strong {
  color: var(--gold-2);
  font-size: 15px;
}

.preset-category-head span {
  color: var(--muted);
  font-size: 12px;
}

.preset-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.preset-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid rgba(222, 194, 132, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
}

.exercise-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(32, 111, 232, 0.16);
  border-radius: 7px;
  background: #fff;
}

.exercise-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.preset-check input {
  width: auto;
  min-height: auto;
  margin: 0;
  accent-color: var(--gold);
}

.preset-check span:not(.exercise-thumb) {
  min-width: 0;
}

.preset-selected-panel {
  grid-column: 1 / -1;
  border: 1px solid rgba(201, 162, 75, 0.26);
  border-radius: 8px;
  background: rgba(201, 162, 75, 0.07);
  padding: 12px;
}

.preset-selected-panel.empty {
  background: rgba(255, 255, 255, 0.025);
}

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

.preset-selected-head strong,
.preset-selected-panel > strong {
  color: var(--gold-2);
}

.preset-selected-head span {
  color: var(--muted);
  font-size: 12px;
}

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

.preset-selected-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
  padding: 8px 10px;
}

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

.preset-selected-row span:not(.exercise-thumb),
.preset-selected-main span {
  min-width: 0;
  font-size: 13px;
  color: var(--text);
}

.preset-selected-actions {
  display: flex;
  gap: 4px;
}

.preset-selected-actions .icon-btn {
  width: 30px;
  height: 30px;
  color: var(--gold-2);
  font-weight: 800;
}

.preset-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.preset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.055);
}

.preset-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.preset-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.preset-card-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.preset-card-thumbs:empty {
  display: none;
}

.inline-master-card {
  margin-top: 14px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.inline-master-card h3 {
  margin: 0 0 6px;
  color: var(--gold-2);
}

.training-master-page {
  align-items: start;
}

.training-master-overview {
  display: grid;
  gap: 16px;
}

.training-master-form,
.training-master-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.training-master-form .full,
.training-master-edit-form .full {
  grid-column: 1 / -1;
}

.training-master-filter-card {
  display: grid;
  gap: 14px;
}

.training-master-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.training-master-categories button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.training-master-categories button.active {
  border-color: rgba(222, 194, 132, 0.54);
  background: rgba(216, 182, 106, 0.18);
  color: var(--gold-2);
}

.training-master-categories small {
  color: var(--muted);
  font-size: 12px;
}

.training-master-search {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.training-master-search input {
  width: 100%;
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.training-master-list {
  display: grid;
  gap: 12px;
}

.training-master-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.training-master-media {
  min-width: 0;
}

.training-master-media img,
.training-master-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  object-fit: contain;
  background: rgba(216, 182, 106, 0.08);
}

.training-master-image-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
}

.training-master-image-placeholder strong {
  display: block;
  color: var(--gold-2);
  font-size: 24px;
}

.training-master-image-placeholder span {
  display: block;
  margin-top: -28px;
  font-size: 12px;
}

.training-master-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.training-master-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.training-master-title-row h3 {
  margin: 8px 0 2px;
  color: var(--text);
}

.training-master-guide {
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}

.training-master-tips {
  margin: 0;
  padding: 10px;
  border-left: 3px solid rgba(222, 194, 132, 0.5);
  color: var(--text);
  background: rgba(216, 182, 106, 0.08);
  border-radius: 6px;
}

.training-master-prompt {
  color: var(--muted);
  font-size: 13px;
}

.training-master-prompt summary {
  cursor: pointer;
  color: var(--gold-2);
}

.training-master-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.training-library-goal-form {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.form .special-library-goals label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.form .special-library-goals input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 16px;
}

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

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.referral-card label {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.referral-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.referral-summary div {
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.referral-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.referral-summary strong {
  color: var(--gold-2);
  font-size: 20px;
}

.referral-row {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto;
}

.history-details {
  margin-top: 14px;
}

.history-details summary {
  cursor: pointer;
  color: var(--gold-2);
  font-weight: 700;
  margin-bottom: 8px;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  text-align: left;
  border-top: 1px solid rgba(222, 194, 132, 0.14);
  padding: 11px 8px;
  font-size: 14px;
  vertical-align: top;
}

.table th {
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 700;
}

.meal-grid,
.training-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.meal-summary-card {
  display: grid;
  gap: 14px;
}

.meal-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.meal-summary-head h2,
.meal-summary-head p {
  margin: 0;
}

.meal-remaining {
  display: grid;
  gap: 3px;
  min-width: 128px;
  text-align: right;
}

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

.meal-remaining strong {
  color: var(--gold-2);
  font-size: 28px;
}

.macro-progress,
.calorie-progress {
  display: grid;
  gap: 10px;
}

.meal-display-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.meal-display-switch > span {
  color: var(--muted);
  font-size: 12px;
}

.segmented-control {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
}

.segmented-control button {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  background: transparent;
}

.segmented-control button.active {
  color: #14100a;
  background: linear-gradient(135deg, var(--gold), #9f7930);
  font-weight: 800;
}

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

.macro-illustration-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.macro-illustration-head,
.macro-illustration-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.macro-illustration-head span,
.macro-illustration-foot span {
  color: var(--muted);
  font-size: 12px;
}

.macro-illustration-head strong,
.macro-illustration-foot strong {
  color: var(--text);
  font-size: 12px;
}

.macro-illustration-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.macro-food-icon {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  line-height: 0;
}

.macro-food-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.macro-icon-base {
  color: rgba(255, 255, 255, 0.16);
}

.macro-icon-fill {
  color: var(--macro-color);
}

.macro-food-icon-over {
  position: relative;
  filter: drop-shadow(0 0 8px rgba(240, 79, 85, 0.35));
}

.macro-food-icon-over .macro-icon-fill {
  color: #f04f55;
}

.macro-illustration-item.over {
  border-color: rgba(240, 79, 85, 0.35);
  background: rgba(240, 79, 85, 0.08);
}

.hydration-report {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.hydration-report span,
.hydration-report p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.hydration-report strong {
  display: block;
  color: var(--gold-2);
  font-size: 20px;
  margin: 3px 0;
}

.hydration-bar span {
  background: linear-gradient(90deg, #7ec8ff, #bfe7ff);
}

.hydration-report label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.hydration-report input {
  width: 100%;
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid rgba(222, 194, 132, 0.22);
  border-radius: 8px;
  padding: 8px;
  min-height: 38px;
}

.hydration-save-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(64, 196, 164, 0.22);
  border-radius: 8px;
  background: rgba(64, 196, 164, 0.08);
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.hydration-save-status.ok {
  border-color: rgba(64, 196, 164, 0.3);
  background: rgba(64, 196, 164, 0.1);
}

.hydration-save-status.warn {
  border-color: rgba(241, 201, 113, 0.38);
  background: rgba(241, 201, 113, 0.12);
}

.hydration-save-status.error {
  border-color: rgba(255, 122, 122, 0.34);
  background: rgba(255, 122, 122, 0.1);
}

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

.macro-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.macro-row-head strong {
  color: var(--text);
  font-size: 12px;
}

.macro-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.macro-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}

.macro-row.over .macro-bar span {
  background: linear-gradient(90deg, #d77a61, #ff9a9a);
}

.meal-review-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(222, 194, 132, 0.14);
  padding-top: 12px;
}

.meal-review-panel > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.meal-review-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meal-review-panel span {
  color: var(--muted);
  font-size: 12px;
}

.meal-review-panel p {
  flex-basis: 100%;
  margin: 0;
}

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

.readonly-field {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

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

.readonly-field strong {
  color: var(--text);
  font-size: 14px;
}

.meal-review-actions .ghost-btn {
  display: inline-grid;
  gap: 2px;
  min-height: 36px;
}

.meal-review-actions .ghost-btn.active {
  color: var(--gold-2);
  border-color: rgba(222, 194, 132, 0.65);
  background: rgba(216, 182, 106, 0.16);
}

.meal-review-actions .ghost-btn.suggested:not(.active) {
  border-color: rgba(233, 196, 106, 0.45);
}

.meal-review-actions span {
  font-size: 10px;
}

.meal-feedback-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
}

.meal-feedback-editor label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.meal-feedback-editor textarea {
  width: 100%;
  min-height: 96px;
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid rgba(222, 194, 132, 0.22);
  border-radius: 8px;
  padding: 10px;
  line-height: 1.6;
  resize: vertical;
}

.meal-feedback-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.07);
}

.meal-feedback-card.danger {
  border-color: rgba(224, 122, 95, 0.35);
  background: rgba(224, 122, 95, 0.08);
}

.meal-feedback-card.ok {
  border-color: rgba(128, 201, 155, 0.35);
  background: rgba(128, 201, 155, 0.08);
}

.meal-feedback-card p {
  margin: 0;
  line-height: 1.7;
}

.meal-suggestion-card {
  display: grid;
  gap: 14px;
}

.meal-suggestion-card.collapsed {
  padding: 10px;
}

.meal-suggestion-card.locked {
  border-color: rgba(222, 194, 132, 0.12);
}

.meal-suggestion-tab-btn {
  appearance: none;
  font: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.meal-suggestion-tab-btn::-webkit-details-marker {
  display: none;
}

.meal-suggestion-tab-btn > * {
  pointer-events: none;
}

.meal-suggestion-details {
  display: grid;
  gap: 14px;
}

.meal-suggestion-details[open] .meal-suggestion-tab-btn b,
.meal-suggestion-details.open .meal-suggestion-tab-btn b {
  color: var(--gold-2);
  background: rgba(216, 182, 106, 0.14);
}

.meal-suggestion-details[open] .meal-suggestion-tab-btn b::before,
.meal-suggestion-details.open .meal-suggestion-tab-btn b::before {
  content: "閉じる";
}

.meal-suggestion-details[open] .meal-suggestion-tab-btn b,
.meal-suggestion-details.open .meal-suggestion-tab-btn b {
  font-size: 0;
}

.meal-suggestion-details[open] .meal-suggestion-tab-btn b::before,
.meal-suggestion-details.open .meal-suggestion-tab-btn b::before {
  font-size: 12px;
}

.meal-suggestion-details-body {
  display: grid;
  gap: 14px;
  padding-top: 2px;
}

.meal-suggestion-details:not(.open):not([open]) .meal-suggestion-details-body {
  display: none;
}

.meal-suggestion-tab-btn div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.meal-suggestion-tab-btn span,
.meal-suggestion-tab-btn small {
  color: var(--muted);
}

.meal-suggestion-tab-btn strong {
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.meal-suggestion-tab-btn b {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #14100a;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  font-size: 12px;
}

.meal-suggestion-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.meal-suggestion-controls > div {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.meal-suggestion-controls span,
.meal-suggestion-footer p,
.meal-suggestion-result .muted {
  margin: 0;
}

.meal-suggestion-controls span {
  color: var(--muted);
  font-size: 12px;
}

.meal-suggestion-mode-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.meal-suggestion-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.meal-suggestion-buttons .ghost-btn.active {
  color: var(--gold-2);
  border-color: rgba(222, 194, 132, 0.68);
  background: rgba(216, 182, 106, 0.16);
}

.meal-suggestion-macro .ghost-btn:disabled,
.meal-suggestion-apply-btn:disabled {
  color: #bff0c9;
  border-color: rgba(128, 201, 155, 0.42);
  background: rgba(84, 170, 111, 0.16);
  opacity: 1;
  cursor: not-allowed;
}

.meal-suggestion-ai-status {
  padding: 10px 12px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.meal-suggestion-ai-status.active {
  color: var(--text);
}

.meal-suggestion-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.meal-suggestion-result {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.meal-suggestion-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.08), rgba(255, 255, 255, 0.025));
}

.meal-suggestion-item.applied {
  border-color: rgba(128, 201, 155, 0.45);
  background: linear-gradient(135deg, rgba(128, 201, 155, 0.12), rgba(255, 255, 255, 0.025));
}

.meal-suggestion-applied-label {
  display: inline-block;
  width: fit-content;
  margin: 0 0 7px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #bff0c9;
  background: rgba(84, 170, 111, 0.18);
  border: 1px solid rgba(128, 201, 155, 0.38);
  font-size: 12px;
  line-height: 1.2;
}

.meal-suggestion-source-badge {
  display: inline-block;
  width: fit-content;
  margin: 0 0 7px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.18);
  font-size: 12px;
  font-style: normal;
  line-height: 1.2;
}

.meal-suggestion-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.meal-suggestion-item strong {
  color: var(--text);
  line-height: 1.55;
}

.meal-suggestion-item p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.meal-suggestion-food-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.meal-suggestion-food-list span {
  width: auto;
  padding: 5px 8px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 12px;
  margin: 0;
}

.meal-suggestion-macro {
  display: grid;
  gap: 5px;
  justify-items: end;
  text-align: right;
}

.meal-suggestion-macro strong {
  color: var(--gold-2);
  font-size: 18px;
}

.meal-suggestion-macro span {
  margin: 0;
  font-size: 11px;
}

.weekly-meal-plan-card {
  display: grid;
  gap: 14px;
}

.weekly-meal-plan-card.collapsed {
  padding: 10px;
}

.weekly-meal-plan-result {
  display: grid;
  gap: 14px;
}

.weekly-meal-days,
.weekly-meal-list,
.weekly-shopping-section,
.weekly-shopping-list {
  display: grid;
  gap: 10px;
}

.weekly-meal-day {
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.weekly-meal-day summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.weekly-meal-day summary::-webkit-details-marker {
  display: none;
}

.weekly-meal-day summary span {
  color: var(--text);
  font-weight: 800;
}

.weekly-meal-day summary strong {
  color: var(--muted);
  font-size: 12px;
}

.weekly-meal-day > .muted,
.weekly-meal-list {
  padding: 0 12px 12px;
}

.weekly-meal-item {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.12);
  border-radius: 8px;
  background: rgba(6, 9, 16, 0.28);
}

.weekly-meal-item > span {
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 800;
}

.weekly-meal-item strong {
  color: var(--text);
  line-height: 1.55;
}

.weekly-meal-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.weekly-shopping-group {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.weekly-shopping-group > strong {
  color: var(--gold-2);
}

.weekly-shopping-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.weekly-shopping-row span {
  color: var(--text);
}

.weekly-shopping-row b {
  color: var(--text);
}

.weekly-shopping-row small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.meal-date-control {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-bottom: 14px;
}

.meal-date-control label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.meal-date-control input {
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid rgba(222, 194, 132, 0.22);
  border-radius: 8px;
  padding: 9px 10px;
}

.meal-category-accordion {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.meal-category-block {
  display: grid;
  gap: 10px;
  align-self: start;
}

.meal-category-block.open {
  grid-column: span 2;
}

.meal-category-btn {
  display: grid;
  gap: 5px;
  text-align: left;
  min-height: 84px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.meal-category-block.open .meal-category-btn {
  min-height: 74px;
}

.meal-category-btn.active {
  border-color: rgba(216, 182, 106, 0.56);
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.16), rgba(255, 255, 255, 0.035));
}

.meal-category-btn span {
  color: var(--muted);
  font-size: 12px;
}

.meal-category-btn strong {
  color: var(--gold-2);
  font-size: 20px;
}

.meal-category-btn small {
  color: var(--muted);
  line-height: 1.4;
}

.meal-category-popup {
  position: relative;
}

.meal-category-popup::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 22px;
  width: 14px;
  height: 14px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: #15120e;
  transform: rotate(45deg);
}

.meal-category-popup-card {
  position: relative;
  z-index: 1;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.meal-category-hint {
  grid-column: 1 / -1;
  margin: 0;
}

.mini-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.mini-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.mini-card h4 {
  margin: 0;
}

.mini-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-save {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}

.mini-delete {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.meal-inline-field {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.meal-inline-field textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid rgba(222, 194, 132, 0.22);
  border-radius: 8px;
  padding: 8px;
}

.meal-photo-retention-note {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.meal-photo-status {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(64, 196, 164, 0.22);
  border-radius: 8px;
  background: rgba(64, 196, 164, 0.08);
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.meal-photo-status.error {
  border-color: rgba(255, 122, 122, 0.34);
  background: rgba(255, 122, 122, 0.1);
}

.meal-photo-status.warn {
  border-color: rgba(241, 201, 113, 0.38);
  background: rgba(241, 201, 113, 0.12);
}

.meal-ai-analysis-actions {
  display: grid;
  gap: 5px;
  margin: 8px 0;
}

.meal-ai-analysis-actions small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.meal-photo-ai-guide {
  border-color: rgba(222, 194, 132, 0.24);
  background: linear-gradient(135deg, rgba(222, 194, 132, 0.1), rgba(12, 21, 36, 0.82));
}

.meal-photo-ai-guide.ready {
  border-color: rgba(64, 196, 164, 0.32);
}

.meal-photo-ai-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meal-ai-draft-note {
  margin: 8px 0;
  padding: 9px 10px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(222, 194, 132, 0.08);
  color: var(--text);
  font-size: 12px;
  line-height: 1.65;
}

.food-entry {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.045);
}

.food-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(156px, 210px) auto;
  gap: 6px;
  align-items: center;
}

.food-search-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.food-entry select,
.food-entry input {
  width: 100%;
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid rgba(222, 194, 132, 0.22);
  border-radius: 8px;
  padding: 8px;
  min-height: 36px;
}

.food-entry select.diet-warning-select.danger {
  color: #ff9a9a;
  border-color: rgba(255, 104, 104, 0.7);
  background: rgba(104, 19, 19, 0.32);
}

.food-entry select.diet-warning-select.warn {
  color: #ffd98a;
  border-color: rgba(255, 210, 105, 0.72);
  background: rgba(116, 86, 21, 0.30);
}

.diet-warning-option.danger {
  color: #d72f2f;
}

.diet-warning-option.warn {
  color: #ad7a00;
}

.food-warning {
  margin: -2px 0 2px;
  font-size: 11px;
}

.food-warning.danger {
  color: #ff9a9a;
}

.food-warning.warn {
  color: #ffd98a;
}

.food-entry .ghost-btn {
  min-height: 36px;
  padding: 7px 9px;
  font-size: 12px;
}

.food-amount-field {
  display: grid;
  grid-template-columns: auto minmax(48px, 1fr) auto;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.food-amount-field input {
  text-align: right;
}

.food-amount-field em {
  color: var(--muted);
  font-style: normal;
}

.food-serving-hint,
.food-amount-label {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.food-amount-label {
  display: inline-block;
  margin-top: 2px;
}

.food-amount-editor .food-amount-inputs {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) minmax(64px, 1fr);
  gap: 6px;
  max-width: 210px;
}

.food-amount-inputs label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
}

.food-amount-inputs input,
.food-amount-inputs select {
  min-width: 0;
}

.food-portion-help {
  margin: 2px 0 8px;
  font-size: 12px;
  line-height: 1.6;
}

.food-grams-inline {
  display: inline-grid;
  grid-template-columns: minmax(54px, 76px) auto;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.food-grams-inline input {
  width: 100%;
  min-height: 30px;
  padding: 5px 7px;
}

.food-grams-inline span {
  color: var(--muted);
  font-size: 12px;
}

.frequent-foods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.frequent-foods span {
  color: var(--muted);
  font-size: 11px;
}

.manual-food {
  color: var(--muted);
  font-size: 12px;
}

.manual-food summary {
  cursor: pointer;
  color: var(--gold-2);
}

.manual-food-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.manual-food-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.manual-food-grid label:nth-child(1),
.manual-food-grid label:nth-child(2) {
  grid-column: span 2;
}

.manual-food-save {
  grid-column: 1 / -1;
}

.food-lines {
  display: grid;
  gap: 6px;
}

.food-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid rgba(222, 194, 132, 0.12);
}

.food-line div {
  display: grid;
  gap: 2px;
}

.food-line strong {
  color: var(--text);
  font-size: 12px;
}

.food-line span {
  color: var(--muted);
  font-size: 11px;
}

.session-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 16px;
  margin-top: 14px;
}

.session-head,
.exercise-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.session-head h3 {
  margin: 0 0 6px;
}

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

.session-summary div {
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.16);
}

.session-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.session-summary strong {
  font-size: 14px;
}

.customer-quick-training-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7, 26, 51, 0.94), rgba(16, 43, 72, 0.88)),
    rgba(0, 0, 0, 0.18);
}

.customer-quick-training-overview div {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.customer-quick-training-overview span {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  margin-bottom: 4px;
}

.customer-quick-training-overview strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--gold-2);
  font-size: 15px;
}

.training-focused-record-card {
  display: grid;
  gap: 12px;
}

.training-focus-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(42, 130, 218, 0.24);
  border-left: 5px solid #2a82da;
  border-radius: 8px;
  background: rgba(42, 130, 218, 0.08);
}

.training-focus-banner strong,
.training-focus-banner span {
  display: block;
}

.training-focus-banner strong {
  color: var(--gold-2);
}

.training-focus-banner span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.training-focused-tool-dock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(8, 7, 6, 0.24);
}

.training-focused-tool-dock button {
  display: grid;
  place-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 6px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  font: inherit;
  cursor: pointer;
}

.training-focused-tool-dock button.active {
  border-color: rgba(216, 182, 106, 0.5);
  background: rgba(216, 182, 106, 0.12);
}

.training-focused-tool-dock span {
  color: var(--gold-2);
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.training-focused-tool-dock strong {
  max-width: 100%;
  color: inherit;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.training-focused-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(8, 7, 6, 0.24);
}

.staff-session-board {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.staff-session-queue,
.staff-session-workbench {
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(8, 7, 6, 0.28);
}

.staff-session-queue {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.staff-session-queue-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.staff-session-queue-head strong,
.staff-session-queue-head span {
  display: block;
}

.staff-session-queue-head strong {
  color: var(--gold-2);
}

.staff-session-queue-head span,
.staff-session-queue-item span,
.staff-session-toolbar span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.staff-session-queue-list {
  display: grid;
  gap: 8px;
}

.staff-session-queue-item {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.staff-session-queue-item.active {
  border-color: rgba(216, 182, 106, 0.48);
  background: rgba(216, 182, 106, 0.08);
}

.staff-session-queue-item strong {
  color: var(--text);
  font-size: 13px;
}

.staff-session-workbench {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.staff-session-summary {
  margin: 0;
}

.staff-session-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px dashed rgba(216, 182, 106, 0.32);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.055);
}

.session-call-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.session-call-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.session-call-main,
.session-call-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.session-call-main > div {
  display: grid;
  gap: 4px;
}

.session-call-main strong,
.session-call-volume b {
  color: var(--gold-2);
}

.session-call-main span,
.session-call-footer span {
  color: var(--muted);
  font-size: 12px;
}

.session-call-volume {
  text-align: right;
}

.session-call-volume small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.session-target-list,
.session-volume-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.session-target-chip,
.session-volume-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
}

.session-target-chip {
  color: #16110a;
  background: var(--gold);
  font-weight: 800;
}

.session-volume-chip {
  color: var(--text);
  border: 1px solid rgba(222, 194, 132, 0.18);
  background: rgba(216, 182, 106, 0.08);
}

.session-call-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(130px, 0.8fr) minmax(160px, auto);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.session-call-row div {
  display: grid;
  gap: 4px;
}

.session-call-row span {
  color: var(--muted);
  font-size: 12px;
}

.session-call-row strong {
  color: var(--gold-2);
}

.exercise-list {
  display: grid;
  gap: 12px;
}

.exercise-card {
  position: relative;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(8, 7, 6, 0.42);
  padding: 12px;
}

.training-card-toggle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.training-card-toggle strong {
  overflow-wrap: anywhere;
}

.training-card-toggle > span {
  flex-shrink: 0;
  font-size: 12px;
}

.exercise-card-body[hidden],
.training-unilateral-options[hidden],
.training-side-checks[hidden],
.exercise-card.is-collapsed .exercise-card-expanded-action,
.exercise-card.is-collapsed .sub-add-menu {
  display: none;
}

.exercise-card.is-collapsed .exercise-head {
  margin-bottom: 0;
}

.training-unilateral-options,
.training-side-checks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.training-unilateral-options {
  margin-bottom: 12px;
}

.training-unilateral-options .training-check-label,
.training-side-checks .training-check-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}

.training-check-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 20px;
  accent-color: #0f62d9;
}

.training-count-guide {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(42, 130, 218, 0.24);
  border-radius: 8px;
  background: rgba(42, 130, 218, 0.08);
}

.training-count-guide strong {
  color: var(--gold-2);
  font-size: 13px;
}

.training-count-guide span,
.training-count-guide small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.exercise-head {
  color: var(--gold-2);
  margin-bottom: 10px;
}

.exercise-head strong,
.exercise-head small {
  display: block;
}

.exercise-title-group {
  min-width: 0;
}

.exercise-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exercise-head small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

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

.exercise-head-actions .icon-btn {
  width: 34px;
  height: 34px;
}

.exercise-media {
  position: relative;
  display: grid;
  min-height: 148px;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.07);
}

.exercise-media img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
  padding: 8px;
  background: #fff;
}

.exercise-media.has-image {
  background: #fff;
}

.exercise-media.has-image span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  color: #16110a;
  background: rgba(222, 194, 132, 0.9);
  font-size: 12px;
  font-weight: 800;
}

.exercise-media.placeholder {
  place-items: center;
  min-height: 136px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(216, 182, 106, 0.15), rgba(44, 124, 255, 0.08)),
    rgba(255, 255, 255, 0.035);
}

.exercise-media.placeholder div {
  display: grid;
  gap: 5px;
  padding: 16px;
}

.exercise-media.placeholder span {
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.exercise-media.placeholder strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
}

.exercise-media.placeholder small {
  color: var(--muted);
  font-size: 12px;
}

.exercise-order-actions {
  display: flex;
  gap: 4px;
}

.exercise-order-actions .icon-btn {
  width: 30px;
  height: 30px;
  color: var(--gold-2);
  font-weight: 800;
}

.training-order-panel {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(8, 7, 6, 0.24);
}

.training-order-panel.compact {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.training-order-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.training-order-panel-head strong,
.training-order-panel-head span {
  display: block;
}

.training-order-panel-head strong {
  color: var(--gold-2);
}

.training-order-panel-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

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

.training-order-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(222, 194, 132, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.training-order-item.active {
  border-color: rgba(216, 182, 106, 0.42);
  background: rgba(216, 182, 106, 0.08);
}

.training-order-item strong,
.training-order-item span {
  display: block;
  min-width: 0;
}

.training-order-item strong {
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.training-order-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.training-drag-handle,
.training-drag-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.training-drag-handle {
  border: 1px solid rgba(216, 182, 106, 0.3);
  color: var(--gold-2);
  background: rgba(216, 182, 106, 0.08);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}

.training-drag-handle:active {
  cursor: grabbing;
}

.training-order-mini-actions {
  display: flex;
  gap: 4px;
}

.training-order-mini-actions .icon-btn {
  width: 30px;
  height: 30px;
  color: var(--gold-2);
  font-weight: 900;
}

.training-order-dragging {
  user-select: none;
}

.training-order-item.is-dragging,
.exercise-card.is-dragging {
  opacity: 0.68;
  transform: scale(0.995);
}

.training-order-item.training-card-scroll-focus,
.exercise-card.training-card-scroll-focus {
  border-color: rgba(241, 223, 174, 0.78);
  box-shadow: 0 0 0 3px rgba(216, 182, 106, 0.18), 0 14px 34px rgba(0, 0, 0, 0.22);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.training-order-item.drop-before::before,
.training-order-item.drop-after::after,
.exercise-card.drop-before::before,
.exercise-card.drop-after::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--gold-2);
  box-shadow: 0 0 0 3px rgba(216, 182, 106, 0.16);
  pointer-events: none;
}

.training-order-item.drop-before::before,
.exercise-card.drop-before::before {
  top: -5px;
}

.training-order-item.drop-after::after,
.exercise-card.drop-after::after {
  bottom: -5px;
}

.compact-add {
  width: 28px;
  height: 28px;
  border-color: rgba(216, 182, 106, 0.38);
  color: var(--gold-2);
  font-weight: 800;
}

.exercise-history-toggle {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.exercise-history-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.06);
}

.exercise-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.exercise-history-head span {
  color: var(--gold-2);
  font-weight: 800;
}

.exercise-history-head small,
.exercise-history-card small {
  color: var(--muted);
}

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

.exercise-history-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(8, 7, 6, 0.34);
}

.exercise-history-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.exercise-history-card strong {
  color: var(--gold-2);
}

.exercise-history-card span,
.exercise-history-card p {
  color: var(--text);
}

.exercise-history-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.exercise-history-card .ghost-btn {
  justify-self: start;
  padding: 8px 12px;
  font-size: 12px;
}

.sub-add-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sub-add-menu .ghost-btn {
  padding: 7px 9px;
  font-size: 12px;
}

.staff-session-card .sub-add-menu {
  padding: 8px;
  border: 1px dashed rgba(216, 182, 106, 0.28);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.055);
}

.staff-session-card .sub-add-menu .ghost-btn {
  min-height: 34px;
  padding: 8px 11px;
  border-color: rgba(216, 182, 106, 0.32);
  color: var(--gold-2);
  font-weight: 800;
}

.training-sub-setup {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr repeat(4, minmax(110px, 1fr));
  gap: 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(216, 182, 106, 0.055);
}

.training-sub-setup > div {
  display: grid;
  gap: 4px;
  align-content: center;
}

.training-sub-setup strong {
  color: var(--gold-2);
}

.training-sub-setup span {
  color: var(--muted);
  font-size: 12px;
}

.sub-exercise-list {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.055);
}

.sub-exercise-row {
  display: grid;
  grid-template-columns: 72px minmax(120px, 0.8fr) minmax(88px, 0.6fr) minmax(150px, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.sub-exercise-row span {
  color: var(--muted);
  font-size: 12px;
}

.sub-exercise-row .icon-btn {
  width: 34px;
  height: 34px;
}

.edit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.edit-grid label,
.set-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.text-edit-grid {
  grid-template-columns: 1fr 1fr;
  margin: 12px 0 0;
}

.exercise-comment {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.exercise-save-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.exercise-save-row .btn {
  min-width: 96px;
}

.exercise-guide-panel {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.065);
}

.exercise-guide-panel h4 {
  margin: 0;
  color: var(--gold-2);
  font-size: 14px;
}

.exercise-guide-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.exercise-guide-panel textarea.inline-input {
  min-height: 110px;
}

.cardio-note {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  color: var(--gold-2);
  font-size: 12px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.07);
}

.cardio-note textarea.inline-input {
  min-height: 110px;
}

.ai-readiness {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(233, 196, 106, 0.2);
  border-radius: 8px;
  background: rgba(233, 196, 106, 0.06);
}

.ai-readiness p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.ai-daily-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.ai-daily-summary div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.ai-daily-summary span {
  color: var(--muted);
  font-size: 12px;
}

.ai-daily-summary strong {
  color: var(--gold-2);
  font-size: 16px;
  word-break: break-word;
}

.ai-meal-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.ai-meal-photo-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.ai-meal-photo-card span {
  color: var(--muted);
  font-size: 12px;
}

.ai-meal-photo-card img,
.ai-photo-empty {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(222, 194, 132, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.ai-photo-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}

.ai-meal-photo-card strong {
  color: var(--gold-2);
  font-size: 14px;
}

.ai-draft-box {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.training-ai-advice {
  min-width: 0;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}

.training-ai-advice > summary {
  color: var(--gold-2);
  font-weight: 700;
  cursor: pointer;
}

.training-ai-advice-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.75;
  font-size: 14px;
}

.ai-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-draft-box textarea {
  width: 100%;
  min-height: 360px;
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid rgba(222, 194, 132, 0.22);
  border-radius: 8px;
  padding: 14px;
  line-height: 1.65;
  resize: vertical;
}

.life-log-ai-extract-card {
  display: grid;
  gap: 14px;
}

.life-log-ai-copy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.life-log-ai-copy-box textarea {
  min-height: 260px;
}

.life-log-ai-all-copy {
  display: grid;
  gap: 10px;
}

.life-log-ai-all-copy textarea {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.external-trainer-share-panel {
  display: grid;
  gap: 14px;
}

.external-trainer-share-box textarea {
  min-height: 320px;
}

.weekly-check-in-panel {
  display: grid;
  gap: 14px;
}

.weekly-check-in-form {
  gap: 14px;
}

.weekly-check-in-summary,
.weekly-check-in-store-grid,
.weekly-check-in-history {
  display: grid;
  gap: 10px;
}

.weekly-check-in-summary {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.weekly-check-in-summary span {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.weekly-check-in-summary strong {
  color: var(--gold-2);
}

.weekly-check-in-store-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.weekly-check-in-history > div {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  background: rgba(0, 0, 0, 0.14);
}

.churn-risk-card,
.churn-management-card {
  border-color: rgba(239, 184, 92, 0.28);
}

.churn-risk-reasons {
  color: var(--muted);
}

.churn-risk-level.high {
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
}

.churn-risk-level.medium {
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
}

.churn-risk-level.low {
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
}

.churn-risk-level.ok {
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
}

.life-log-score-card {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(222, 194, 132, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.life-log-score-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.life-log-score-main span {
  display: block;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.85rem;
}

.life-log-score-main strong {
  display: block;
  margin-top: 2px;
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1;
}

.life-log-score-main small {
  font-size: 0.42em;
  margin-left: 4px;
}

.life-log-score-main p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.65;
}

.life-log-score-meter {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.life-log-score-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #2563eb, #22c55e);
}

.life-log-score-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.life-log-score-breakdown span {
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 850;
  font-size: 0.84rem;
}

.weekly-review-dashboard {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  overflow: hidden;
  border: 4px solid #071f3d;
  border-radius: 24px;
  background: #f7f4ef;
  color: #061d39;
  box-shadow: 0 18px 42px rgba(2, 9, 24, 0.28);
}

.weekly-review-phonebar {
  display: grid;
  grid-template-columns: 42px 1fr 46px;
  align-items: center;
  min-height: 58px;
  padding: 0 10px;
  color: #061d39;
  border-bottom: 1px solid rgba(189, 146, 49, 0.45);
  background: linear-gradient(135deg, #f8f1e4, #e7d09d);
}

.weekly-review-phonebar strong {
  text-align: center;
  font-size: clamp(0.94rem, 2.9vw, 1.12rem);
  letter-spacing: 0;
}

.weekly-review-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #061d39;
  background: rgba(255, 255, 255, 0.32);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
}

.weekly-review-icon:last-child {
  justify-self: end;
  font-size: 0.78rem;
  border: 1px solid rgba(7, 31, 61, 0.18);
  background: rgba(255, 255, 255, 0.46);
}

.weekly-review-lead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 4px;
}

.weekly-review-lead .eyebrow {
  color: #bd9231;
  font-size: 0.74rem;
  font-weight: 950;
}

.weekly-review-lead h3 {
  margin: 3px 0 5px;
  color: #061d39;
  font-size: clamp(1.2rem, 5vw, 1.65rem);
  line-height: 1.28;
  letter-spacing: 0;
}

.weekly-review-lead p {
  margin: 0;
  max-width: 540px;
  color: #45546a;
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.65;
}

.weekly-review-record-days {
  display: grid;
  place-items: center;
  min-width: 86px;
  padding: 10px;
  border-radius: 8px;
  color: #071f3d;
  background: #ffffff;
  border: 1px solid rgba(7, 31, 61, 0.1);
}

.weekly-review-record-days strong {
  font-size: 1.7rem;
  line-height: 1;
}

.weekly-review-record-days small {
  font-size: 0.52em;
  margin-left: 2px;
}

.weekly-review-record-days span {
  color: #69778b;
  font-size: 0.72rem;
  font-weight: 850;
}

.weekly-review-chart-stack {
  display: grid;
  gap: 10px;
  padding: 0 12px;
}

.weekly-review-chart-card,
.weekly-review-life-card {
  display: grid;
  gap: 8px;
  padding: 12px 12px 8px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(7, 31, 61, 0.08);
  box-shadow: 0 5px 14px rgba(7, 31, 61, 0.06);
}

.weekly-review-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.weekly-review-chart-head strong {
  color: #061d39;
  font-size: 0.94rem;
}

.weekly-review-chart-head span {
  color: #56657a;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.weekly-review-chart-head b {
  color: #061d39;
  font-size: 1.15rem;
}

.weekly-review-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 104px;
}

.weekly-review-grid-line {
  stroke: rgba(7, 31, 61, 0.13);
  stroke-width: 1;
}

.weekly-review-line {
  fill: none;
  stroke: var(--weekly-chart-color);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weekly-review-dot {
  fill: var(--weekly-chart-color);
  stroke: #ffffff;
  stroke-width: 2;
}

.weekly-review-bar {
  fill: var(--weekly-chart-color);
}

.weekly-review-y-label,
.weekly-review-x-label {
  fill: #40516a;
  font-size: 10px;
  font-weight: 850;
}

.weekly-review-y-label {
  text-anchor: end;
}

.weekly-review-x-label {
  text-anchor: middle;
}

.weekly-review-life-card {
  margin: 0 12px;
}

.weekly-review-life-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(7, 31, 61, 0.08);
  border-radius: 8px;
}

.weekly-review-life-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 8px;
  text-align: center;
  border-left: 1px solid rgba(7, 31, 61, 0.08);
}

.weekly-review-life-grid div:first-child {
  border-left: 0;
}

.weekly-review-life-grid span {
  color: #56657a;
  font-size: 0.72rem;
  font-weight: 820;
  white-space: nowrap;
}

.weekly-review-life-grid strong {
  color: #061d39;
  font-size: clamp(0.78rem, 2.5vw, 0.95rem);
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.weekly-review-mini-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 12px 14px;
}

.weekly-review-mini-summary span {
  flex: 1 1 160px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 999px;
  color: #061d39;
  background: rgba(189, 146, 49, 0.15);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
}

.life-log-review-stack {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.life-log-review-block {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  background: rgba(255, 255, 255, 0.06);
  border-left: 5px solid rgba(222, 194, 132, 0.72);
}

.life-log-review-block.summary {
  border-left-color: #60a5fa;
}

.life-log-review-block.meal {
  border-left-color: #34d399;
}

.life-log-review-block.training {
  border-left-color: #a78bfa;
}

.life-log-review-block.next {
  border-left-color: #f59e0b;
}

.life-log-review-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.life-log-review-step {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #07110d;
  background: linear-gradient(135deg, #dec284, #f4e4aa);
  font-weight: 950;
  font-size: 0.82rem;
}

.life-log-review-block-head strong {
  display: block;
  color: var(--text);
  font-size: 1.02rem;
}

.life-log-review-block-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.78rem;
}

.life-log-review-copy {
  display: grid;
  gap: 8px;
}

.life-log-review-copy p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.72;
}

.life-log-visual-feedback {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border-left: 5px solid #60a5fa;
  background: rgba(255, 255, 255, 0.06);
}

.life-log-visual-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.life-log-visual-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1.45;
}

.life-log-visual-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.7;
}

.life-log-visual-head strong {
  color: #60a5fa;
  font-size: clamp(2rem, 10vw, 3.2rem);
  line-height: 1;
  white-space: nowrap;
}

.life-log-visual-head small {
  font-size: 0.42em;
  margin-left: 3px;
}

.life-log-nutrient-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.life-log-nutrient-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 850;
}

.life-log-nutrient-badge i,
.life-log-nutrient-card-head i {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #facc15;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.24);
}

.life-log-nutrient-badge.ok i,
.life-log-nutrient-card.ok .life-log-nutrient-card-head i {
  background: #22c55e;
}

.life-log-nutrient-badge.danger i,
.life-log-nutrient-card.danger .life-log-nutrient-card-head i {
  background: #f97316;
}

.life-log-nutrient-badge b {
  color: #bbf7d0;
}

.life-log-nutrient-badge.warn b,
.life-log-nutrient-badge.danger b {
  color: #fde68a;
}

.life-log-nutrient-card-grid {
  display: grid;
  gap: 12px;
}

.life-log-nutrient-card,
.life-log-staff-report {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.life-log-nutrient-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.life-log-nutrient-card-head strong,
.life-log-staff-report > strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}

.life-log-nutrient-card-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 800;
}

.life-log-nutrient-card p,
.life-log-staff-report p {
  margin: 0;
  color: var(--muted);
  font-weight: 740;
  line-height: 1.72;
}

.inline-input {
  width: 100%;
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid rgba(222, 194, 132, 0.22);
  border-radius: 8px;
  padding: 8px 9px;
  font-size: 16px;
}

textarea.inline-input {
  min-height: 70px;
  resize: vertical;
}

.set-list {
  display: grid;
  gap: 6px;
}

.set-row {
  display: grid;
  gap: 6px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 12px;
}

.set-row strong {
  color: var(--text);
}

.set-main {
  display: grid;
  grid-template-columns: 62px minmax(84px, 120px) minmax(84px, 120px) 72px 34px;
  gap: 5px;
  align-items: center;
}

.set-sub {
  display: grid;
  grid-template-columns: repeat(3, 72px) minmax(82px, auto);
  gap: 5px;
  margin-left: 67px;
}

.set-index {
  color: var(--gold-2);
  font-size: 11px;
}

.set-volume {
  color: var(--gold-2);
  font-size: 12px;
  text-align: right;
}

.set-volume small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.set-row label {
  gap: 3px;
}

.set-row .inline-input {
  min-height: 32px;
  padding: 6px 7px;
  border-radius: 7px;
  font-size: 16px;
}

.set-row .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.training-set-add-actions {
  align-items: center;
}

.training-set-add-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.staff-session-card .training-set-add-actions {
  padding: 8px 10px;
  border: 1px dashed rgba(216, 182, 106, 0.28);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.045);
}

.staff-session-card .training-set-add-actions .ghost-btn {
  border-color: rgba(216, 182, 106, 0.32);
  color: var(--gold-2);
  font-weight: 800;
}

.set-timer-btn {
  min-height: 32px;
  align-self: end;
  padding: 6px 9px;
  white-space: nowrap;
}

.set-timer-btn.active {
  border-color: rgba(42, 130, 218, 0.55);
  color: #0d6fd6;
  background: rgba(42, 130, 218, 0.12);
}

.training-timer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
  gap: 16px;
  align-items: center;
  border-color: rgba(42, 130, 218, 0.24);
  background: linear-gradient(135deg, rgba(42, 130, 218, 0.08), rgba(255, 255, 255, 0.86));
}

.training-timer-panel.finished {
  border-color: rgba(225, 80, 80, 0.35);
  background: linear-gradient(135deg, rgba(225, 80, 80, 0.1), rgba(255, 255, 255, 0.9));
}

.training-timer-display {
  display: grid;
  gap: 8px;
}

.training-timer-display strong {
  color: #0f2742;
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1;
  text-align: right;
}

.training-timer-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(42, 130, 218, 0.12);
}

.training-timer-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1b8cf0, #17bf9f);
  transition: width 0.25s ease;
}

.sub-set-row {
  display: grid;
  grid-template-columns: 42px minmax(120px, 1fr) repeat(4, minmax(64px, 88px)) 32px;
  gap: 5px;
  align-items: center;
  margin: 6px 0 2px 38px;
  padding: 8px;
  border-left: 2px solid rgba(216, 182, 106, 0.32);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.06);
}

.sub-set-row > span {
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 800;
}

.sub-set-row strong {
  color: var(--muted);
  font-size: 12px;
}

.sub-set-row label {
  gap: 3px;
}

.sub-set-row .inline-input {
  min-height: 31px;
  padding: 6px 7px;
  font-size: 16px;
}

.sub-set-row .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.next-set-suggestion {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(128, 201, 155, 0.22);
  border-radius: 8px;
  background: rgba(128, 201, 155, 0.06);
}

.next-set-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.next-set-head > div {
  display: grid;
  gap: 3px;
}

.next-set-head span {
  color: var(--muted);
  font-size: 12px;
}

.next-set-head small {
  color: var(--muted);
  font-size: 11px;
}

.next-set-head strong {
  color: var(--ok);
  font-size: 18px;
  text-align: right;
}

.next-set-head strong small {
  color: var(--muted);
  font-size: 11px;
}

.next-set-suggestion p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.next-set-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.next-set-option {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 9px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.next-set-option.recommended {
  border-color: rgba(128, 201, 155, 0.48);
  background: rgba(128, 201, 155, 0.11);
}

.next-set-option span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.next-set-option strong {
  color: var(--gold-2);
  font-size: 17px;
}

.next-set-option small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 0;
}

.icon-btn.danger {
  color: var(--danger);
  border-color: rgba(224, 122, 95, 0.35);
}

.photo-placeholder {
  position: relative;
  height: 82px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(222, 194, 132, 0.32);
  border-radius: 8px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  overflow: hidden;
}

.photo-placeholder input {
  display: none;
}

.meal-photo-picker {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.meal-photo-picker .photo-placeholder {
  margin-bottom: 0;
  cursor: default;
}

.meal-photo-source-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.meal-photo-source-btn {
  position: relative;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}

.meal-photo-source-btn input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-placeholder.has-photo {
  border-style: solid;
}

.photo-add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #14100a;
  background: var(--gold);
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.photo-record-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.photo-record-head h2,
.photo-record-head p {
  margin-top: 0;
}

.photo-record-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-width: min(360px, 100%);
}

.progress-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.photo-record-popup-panel .progress-photo-grid {
  margin-top: 12px;
}

.progress-photo-tile {
  position: relative;
  min-height: 190px;
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 12px;
  border: 1px dashed rgba(222, 194, 132, 0.35);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.035);
}

.progress-photo-tile.monthly-used {
  border-style: solid;
  border-color: rgba(216, 182, 106, 0.45);
  cursor: default;
}

.progress-photo-tile input {
  display: none;
}

.progress-photo-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progress-photo-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.78));
}

.progress-photo-tile.monthly-used::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.84));
}

.progress-photo-tile strong,
.progress-photo-tile small,
.progress-photo-empty {
  position: relative;
  z-index: 1;
}

.progress-photo-tile strong {
  color: var(--text);
}

.progress-photo-tile small {
  color: var(--muted);
}

.progress-photo-empty {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto 42px;
  border-radius: 50%;
  color: #14100a;
  background: var(--gold);
  font-size: 26px;
  font-weight: 800;
}

.progress-photo-history {
  display: grid;
  gap: 12px;
}

.progress-photo-history-card {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.progress-photo-thumb {
  min-height: 138px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.22);
}

.progress-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progress-photo-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}

.photo-storage-note {
  margin: 0 0 6px;
  font-size: 12px;
}

.progress-photo-usage-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.progress-photo-usage-controls label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.progress-photo-usage-controls select {
  width: 100%;
}

.row.compact {
  padding: 0;
  background: transparent;
  border: 0;
}

.notice {
  border-left: 3px solid var(--gold);
  padding: 12px 14px;
  background: rgba(216, 182, 106, 0.08);
  color: var(--gold-2);
  border-radius: 8px;
}

.notice.warn {
  border-color: rgba(245, 158, 11, 0.58);
  background: rgba(245, 158, 11, 0.12);
  color: #ffe6b0;
}

.notice.full {
  grid-column: 1 / -1;
}

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

.app-feedback-faq .notice {
  display: grid;
  gap: 8px;
  align-content: start;
}

.app-feedback-faq ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}

.payment-support-reminder {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.22);
}

.ai-loading-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 4, 3, 0.64);
  backdrop-filter: blur(6px);
}

.ai-loading-modal {
  width: min(420px, 92vw);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(216, 182, 106, 0.38);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(21, 18, 14, 0.98), rgba(9, 8, 6, 0.98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.ai-loading-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(216, 182, 106, 0.22);
  border-top-color: var(--gold-2);
  border-radius: 50%;
  animation: aiLoadingSpin 0.9s linear infinite;
}

.ai-loading-modal strong {
  display: block;
  color: var(--gold-2);
  font-size: 16px;
}

.ai-loading-modal p {
  margin: 6px 0 4px;
  color: var(--text);
  line-height: 1.6;
}

.ai-loading-modal small {
  color: var(--muted);
}

@keyframes aiLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

.app-install-hint {
  padding: 10px 12px;
}

.app-install-hint strong {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}

.app-install-hint p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.ai-coach-notification-reminder {
  display: grid;
  gap: 12px;
}

.ai-coach-notification-reminder .section-head {
  align-items: start;
}

.ai-coach-notification-reminder p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.7;
}

.ai-coach-notification-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-consult-shell {
  align-items: start;
}

.ai-consult-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.ai-consult-hero.locked {
  border-style: dashed;
  opacity: 0.9;
}

.ai-consult-progress {
  min-width: 132px;
  display: grid;
  gap: 8px;
}

.ai-consult-progress strong {
  font-size: 28px;
  color: var(--gold-2);
}

.ai-consult-progress small {
  font-size: 14px;
  color: var(--muted);
}

.ai-consult-progress span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #22c5a3);
  max-width: 100%;
}

.ai-consult-locked-card,
.ai-consult-result,
.ai-consult-premium {
  display: grid;
  gap: 14px;
}

.ai-consult-summary {
  padding: 14px;
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.09);
  color: var(--gold-2);
  font-weight: 700;
}

.ai-consult-grid .life-log-summary-card strong {
  line-height: 1.35;
}

.ai-consult-plan {
  display: grid;
  gap: 8px;
}

.ai-consult-plan p,
.ai-consult-premium p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.ai-consult-premium {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(216, 182, 106, 0.35);
  background: rgba(216, 182, 106, 0.08);
}

.ai-consult-premium strong {
  color: var(--gold-2);
}

.ai-consult-history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-consult-chat-card {
  display: grid;
  gap: 14px;
}

.ai-consult-chat-card.locked {
  border-style: dashed;
}

.ai-consult-chat-memory {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 197, 163, 0.2);
  border-radius: 8px;
  background: rgba(34, 197, 163, 0.08);
}

.ai-consult-chat-memory strong {
  color: var(--accent);
  font-size: 13px;
}

.ai-consult-chat-memory p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--text);
}

.ai-consult-chat-phone {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(120, 154, 196, 0.22);
  background: #8aa0b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.ai-consult-chat-header {
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #fff;
  background: #0b2746;
}

.ai-consult-chat-header h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  color: #fff;
}

.ai-consult-chat-header span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.ai-consult-chat-header strong {
  min-width: 68px;
  padding: 6px 9px;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.ai-consult-chat-header strong.ok {
  color: #0f2a1e;
  background: #8ee6b3;
}

.ai-consult-chat-header strong.warn {
  color: #3a2410;
  background: #f1c971;
}

.ai-consult-chat-avatar,
.ai-consult-chat-mini-avatar {
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #0b2746;
  background: #f1dfae;
  font-weight: 800;
  letter-spacing: 0;
}

.ai-consult-chat-avatar {
  width: 42px;
  height: 42px;
}

.ai-consult-chat-mini-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  font-size: 12px;
}

.ai-consult-chat-log {
  display: grid;
  align-content: end;
  gap: 14px;
  min-height: 360px;
  max-height: 520px;
  overflow: auto;
  padding: 18px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    #8aa0b8;
}

.ai-consult-chat-item {
  display: grid;
  gap: 10px;
}

.ai-consult-chat-row,
.ai-consult-chat-empty {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.ai-consult-chat-row.user {
  justify-content: flex-end;
}

.ai-consult-chat-row.assistant,
.ai-consult-chat-empty {
  justify-content: flex-start;
  align-items: flex-start;
}

.ai-consult-chat-row small {
  flex: 0 0 auto;
  margin-bottom: 4px;
  font-size: 11px;
  color: rgba(11, 39, 70, 0.72);
}

.ai-consult-chat-bubble {
  position: relative;
  max-width: min(620px, 78%);
  padding: 10px 13px;
  border-radius: 18px;
  border: 0;
  box-shadow: 0 1px 2px rgba(6, 18, 32, 0.12);
  word-break: break-word;
}

.ai-consult-chat-bubble span {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  color: rgba(11, 39, 70, 0.62);
}

.ai-consult-chat-bubble p {
  margin: 0;
  line-height: 1.55;
  color: #13253b;
}

.ai-consult-chat-bubble.user {
  border-bottom-right-radius: 5px;
  background: #8ee66f;
}

.ai-consult-chat-bubble.assistant {
  border-bottom-left-radius: 5px;
  background: #fff;
}

.ai-consult-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  background: rgba(245, 247, 250, 0.96);
  border-top: 1px solid rgba(11, 39, 70, 0.12);
}

.ai-consult-chat-form textarea {
  min-height: 42px;
  max-height: 120px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 20px;
  border: 1px solid rgba(11, 39, 70, 0.16);
  color: #13253b;
  background: #fff;
}

.ai-consult-chat-form button {
  align-self: end;
  min-width: 58px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #06c755;
  font-weight: 800;
  cursor: pointer;
}

.ai-consult-chat-form button:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.8);
  background: #8a98a8;
}

.ai-consult-chat-reply {
  padding: 14px;
  border-radius: 8px;
  background: rgba(34, 197, 163, 0.1);
  border: 1px solid rgba(34, 197, 163, 0.24);
}

.ai-consult-chat-proposal {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.store-chat-settings-card {
  border-color: rgba(34, 197, 163, 0.26);
  background:
    linear-gradient(135deg, rgba(34, 197, 163, 0.09), rgba(18, 20, 25, 0.95)),
    rgba(18, 20, 25, 0.92);
}

.store-chat-settings-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.store-chat-settings-summary div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.store-chat-settings-summary span,
.store-chat-settings-summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.store-chat-settings-summary strong {
  display: block;
  margin: 4px 0;
  color: var(--gold-2);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.store-chat-ai-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(120, 154, 196, 0.2);
  border-radius: 8px;
  background: rgba(120, 154, 196, 0.08);
}

.store-chat-ai-suggestion span {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.store-chat-settings-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.store-chat-check-section {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.store-chat-check-section > strong {
  color: var(--text);
}

.store-chat-compact-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.store-chat-compact-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.store-chat-compact-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.store-chat-compact-check.active,
.store-chat-compact-check:has(input:checked) {
  border-color: rgba(34, 197, 163, 0.42);
  color: var(--text);
  background: rgba(34, 197, 163, 0.12);
}

.upgrade-reminder-card {
  background:
    linear-gradient(135deg, rgba(216, 182, 106, 0.16), rgba(21, 18, 14, 0.94) 46%),
    rgba(21, 18, 14, 0.94);
}

.upgrade-reminder-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.upgrade-reminder-main strong,
.upgrade-rec-card h3 {
  color: var(--gold-2);
}

.upgrade-reminder-main p,
.upgrade-rec-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.upgrade-bullet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.upgrade-bullet-row span {
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--gold-2);
  background: rgba(216, 182, 106, 0.07);
  font-size: 12px;
}

.upgrade-price-box {
  min-width: 128px;
  display: grid;
  align-content: center;
  gap: 4px;
  border-left: 1px solid rgba(222, 194, 132, 0.14);
  padding-left: 14px;
}

.upgrade-price-box span {
  color: var(--muted);
  font-size: 12px;
}

.upgrade-price-box strong {
  color: var(--gold-2);
}

.upgrade-mini-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.upgrade-mini-card {
  text-align: left;
  border: 1px solid rgba(222, 194, 132, 0.13);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

.upgrade-mini-card span {
  display: block;
  color: var(--gold);
  font-size: 12px;
  margin-bottom: 6px;
}

.upgrade-mini-card strong {
  display: block;
  line-height: 1.55;
  font-size: 13px;
}

.upgrade-usage-bars,
.upgrade-rec-list,
.upgrade-gap-grid {
  display: grid;
  gap: 10px;
}

.upgrade-usage-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.upgrade-usage-row div:first-child {
  display: grid;
  gap: 3px;
}

.upgrade-usage-row span {
  color: var(--text);
}

.upgrade-usage-row strong {
  color: var(--muted);
  font-size: 12px;
}

.upgrade-usage-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.upgrade-usage-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), #f3d88c);
}

.upgrade-rec-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(222, 194, 132, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.upgrade-rec-card.primary {
  border-color: rgba(216, 182, 106, 0.34);
  background: rgba(216, 182, 106, 0.08);
}

.upgrade-rec-rank {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #14100a;
  font-weight: 900;
}

.upgrade-rec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.upgrade-rec-card h3 {
  margin: 0;
}

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

.upgrade-gap-grid div {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(222, 194, 132, 0.13);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.upgrade-gap-grid span {
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}

.rule-grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.workflow-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.workflow-strip div,
.sheet-summary {
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.workflow-strip span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #14100a;
  background: var(--gold);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.workflow-strip strong,
.sheet-summary h3 {
  display: block;
  margin: 0 0 8px;
  color: var(--gold-2);
  font-size: 14px;
}

.sheet-summary {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.sheet-summary p {
  margin: 0;
}

.counseling-accordion {
  display: grid;
  gap: 12px;
}

.counseling-sheet-block {
  border: 1px solid rgba(222, 194, 132, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
}

.counseling-sheet-block.open {
  border-color: rgba(222, 194, 132, 0.36);
}

.counseling-sheet-popup {
  border-top: 1px solid rgba(222, 194, 132, 0.12);
  padding: 14px;
  background: rgba(0, 0, 0, 0.16);
}

.counseling-popup-card {
  display: grid;
  gap: 14px;
}

.customer-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 176px;
  overflow-y: auto;
  padding-right: 4px;
}

.customer-switcher .active {
  border-color: var(--gold);
  color: var(--gold-2);
}

.customer-switcher .ghost-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.customer-switcher .ghost-btn small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.life-log-feedback-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.life-log-feedback-compose {
  display: grid;
  gap: 12px;
}

.life-log-feedback-preview {
  margin: 0;
}

.life-log-media-picker {
  position: relative;
  overflow: hidden;
}

.life-log-media-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.life-log-media-list {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.life-log-media-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(198, 164, 90, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.life-log-media-item img,
.life-log-media-item video {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.life-log-media-item div {
  display: grid;
  gap: 3px;
}

.life-log-media-item small {
  color: var(--muted);
}

.management-head {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 360px);
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}

.customer-search {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.customer-search input {
  width: 100%;
  color: var(--text);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
}

.customer-picker-card.compact {
  position: relative;
  gap: 14px;
}

.customer-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.customer-current {
  display: grid;
  gap: 4px;
}

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

.customer-current strong {
  color: var(--text);
  font-size: 20px;
}

.customer-current small {
  color: var(--muted);
}

.customer-picker-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.customer-picker-popover {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(45, 111, 214, 0.16);
  border-radius: 22px;
  background: rgba(241, 247, 255, 0.92);
  box-shadow: 0 18px 40px rgba(18, 34, 66, 0.12);
}

.scroll-box,
.audit-log-list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.body-make-daily-btn {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.body-make-daily-btn:hover {
  border-color: rgba(64, 196, 164, 0.38);
  background: rgba(64, 196, 164, 0.08);
}

.pending-action-list {
  max-height: 232px;
}

.ticket-history-list {
  max-height: 220px;
}

.customer-picker-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
  gap: 14px;
}

.customer-quick-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  align-content: start;
}

.customer-quick-nav .ghost-btn {
  justify-content: center;
  min-height: 40px;
}

.unified-feedback-notice strong {
  color: var(--text);
}

@media (max-width: 760px) {
  .customer-picker-grid {
    grid-template-columns: 1fr;
  }

  .customer-switcher {
    max-height: 132px;
  }

  .scroll-box,
  .audit-log-list {
    max-height: 210px;
  }
}

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

.management-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.16);
}

.management-card span,
.management-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.management-card strong {
  color: var(--gold-2);
  font-size: 20px;
}

.store-management-launcher {
  display: grid;
  gap: 14px;
}

.store-management-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.store-management-button-grid .ghost-btn {
  justify-content: center;
  min-height: 46px;
}

.store-management-button-grid .ghost-btn.active {
  background: linear-gradient(135deg, var(--gold), #9f7930);
  color: #14100a;
  border-color: transparent;
  font-weight: 700;
}

.store-management-popup-card {
  animation: panelFadeIn 0.16s ease-out;
}

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

.customer-management-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.customer-management-tabs .ghost-btn.active {
  background: linear-gradient(135deg, var(--gold), #9f7930);
  color: #14100a;
  border-color: transparent;
  font-weight: 700;
}

.body-make-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.body-make-tabs .ghost-btn.active {
  background: linear-gradient(135deg, var(--gold), #9f7930);
  color: #14100a;
  border-color: transparent;
  font-weight: 700;
}

.body-make-subtabs {
  gap: 6px;
}

.body-make-subselect-card {
  padding: 14px;
  scroll-margin-top: 104px;
}

.body-make-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.body-make-category-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.body-make-category-tools .compact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid rgba(222, 194, 132, 0.14);
}

.body-make-updates .section-head {
  align-items: flex-start;
}

.body-make-update-list {
  display: grid;
  gap: 10px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.body-make-update-item {
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.body-make-update-item.compact {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.055);
}

.body-make-update-item.no-thumb {
  grid-template-columns: minmax(0, 1fr);
}

.body-make-update-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(216, 182, 106, 0.12);
  color: var(--gold-2);
  font-weight: 900;
}

.body-make-update-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.body-make-update-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.body-make-update-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.body-make-update-copy small {
  color: var(--muted);
  font-size: 12px;
}

.owl-coach-update-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  margin-top: 12px;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.body-make-subselect {
  display: grid;
  gap: 8px;
}

.body-make-subselect span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.body-make-subselect select {
  min-height: 44px;
}

@media (max-width: 760px) {
  .body-make-info-page {
    gap: 16px;
  }

  .body-make-info-page .body-make-subselect-card {
    scroll-margin-top: 132px;
  }

  .customer-content .body-make-subselect-card {
    margin-top: 10px;
    padding: 90px 14px 18px;
  }

  .body-make-select-grid {
    grid-template-columns: 1fr;
  }

  .body-make-subselect {
    gap: 7px;
  }

  .body-make-subselect select {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }
}

.body-make-article {
  display: grid;
  gap: 14px;
}

.body-make-article-thumb {
  width: 100%;
  max-height: 260px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(222, 194, 132, 0.18);
}

.body-make-article h2 {
  margin: 0;
}

.body-make-article .lead {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.body-make-article p {
  margin: 0;
  line-height: 1.8;
  color: var(--muted);
}

.body-make-text-block {
  line-height: 1.8;
  color: var(--muted);
}

.body-make-inline-image {
  margin: 10px 0;
  display: grid;
  gap: 6px;
}

.body-make-inline-image img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  background: rgba(0, 0, 0, 0.18);
}

.body-make-inline-image figcaption {
  color: var(--muted);
  font-size: 12px;
}

.body-make-article a {
  color: var(--gold-2);
  overflow-wrap: anywhere;
  font-weight: 800;
}

.body-make-image-tools {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(96px, 140px) minmax(150px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(216, 182, 106, 0.055);
}

.body-make-draft-note {
  display: inline-block;
  margin: 8px 0 0;
  padding: 6px 10px;
  border: 1px solid rgba(216, 182, 106, 0.28);
  border-radius: 999px;
  color: var(--gold-2);
  background: rgba(216, 182, 106, 0.08);
  font-size: 12px;
  font-weight: 800;
}

.body-make-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.body-make-image-picker {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid rgba(222, 194, 132, 0.28);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--gold-2);
  font-weight: 800;
  cursor: pointer;
}

.body-make-image-picker input {
  display: none;
}

.body-make-thumbnail-preview {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed rgba(222, 194, 132, 0.28);
  border-radius: 8px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
}

.body-make-thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.body-make-editor textarea {
  min-height: 120px;
}

@media (max-width: 560px) {
  .body-make-info-page {
    gap: 16px;
  }

  .body-make-info-page .body-make-subselect-card {
    scroll-margin-top: 132px;
  }

  .customer-content .body-make-subselect-card {
    margin-top: 10px;
    padding: 90px 14px 18px;
  }

  .body-make-subselect {
    gap: 7px;
  }

  .body-make-subselect select {
    width: 100%;
    min-height: 50px;
    font-size: 16px;
  }

  .body-make-update-item {
    grid-template-columns: 1fr;
  }

  .body-make-update-thumb {
    width: 100%;
    max-width: 140px;
  }

  .body-make-select-grid {
    grid-template-columns: 1fr;
  }

  .body-make-category-tools,
  .body-make-category-tools .compact-form,
  .body-make-image-tools {
    grid-template-columns: 1fr;
  }

  .body-make-editor-actions {
    display: grid;
  }

  .meal-suggestion-tab-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  .meal-suggestion-tab-btn strong {
    font-size: 15px;
  }

  .meal-suggestion-tab-btn small {
    line-height: 1.45;
  }

  .meal-suggestion-tab-btn b {
    justify-self: end;
    min-width: 58px;
    padding: 8px 10px;
    text-align: center;
  }

  .meal-suggestion-controls {
    gap: 10px;
  }

  .meal-suggestion-controls > div {
    min-width: 0;
  }

  .meal-suggestion-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .meal-suggestion-buttons .ghost-btn {
    min-width: 0;
    min-height: 40px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.nutrition-form {
  grid-template-columns: repeat(4, 1fr);
}

.diet-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}

.diet-preset-row .ghost-btn {
  display: grid;
  gap: 2px;
  min-width: 132px;
  text-align: left;
}

.diet-preset-row .ghost-btn.active {
  color: var(--gold-2);
  border-color: rgba(222, 194, 132, 0.65);
  background: rgba(216, 182, 106, 0.16);
}

.diet-preset-row span {
  color: var(--muted);
  font-size: 11px;
}

.health-condition-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.health-condition-picker > div:first-child strong,
.health-condition-notice strong {
  color: var(--gold-2);
}

.health-condition-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.health-condition-group > span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.health-condition-picker label:has(textarea) {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.health-condition-picker textarea {
  min-height: 82px;
}

.health-condition-notice ul {
  margin: 8px 0;
  padding-left: 18px;
}

.health-condition-notice p,
.health-condition-notice small {
  display: block;
  margin: 6px 0 0;
  color: var(--muted);
}

.health-guide-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.health-guide-card {
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.health-guide-card summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.health-guide-card summary::-webkit-details-marker {
  display: none;
}

.health-guide-card summary span {
  color: var(--gold-2);
  font-weight: 800;
}

.health-guide-card summary small {
  color: var(--muted);
  font-size: 11px;
}

.health-guide-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.health-guide-body div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.health-guide-body strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.health-guide-body ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}

.weekly-plan-form {
  grid-template-columns: 1fr 1fr 2fr 1.4fr auto;
  align-items: end;
}

.strength-goal-form {
  grid-template-columns: repeat(3, 1fr) 1.4fr auto;
  align-items: end;
}

.feature-preset-form {
  grid-template-columns: 1.4fr 1fr auto;
  align-items: end;
}

.counseling-limit-form {
  grid-template-columns: 1.2fr 2fr auto;
  align-items: end;
}

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

.feature-toggle {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--text);
}

.feature-toggle.active {
  border-color: rgba(222, 194, 132, 0.52);
  background: rgba(216, 182, 106, 0.12);
}

.feature-toggle input {
  margin-top: 3px;
  accent-color: var(--gold);
}

.feature-toggle span {
  display: grid;
  gap: 4px;
}

.feature-toggle strong {
  font-size: 14px;
  color: var(--gold-2);
}

.feature-toggle small {
  color: var(--muted);
  line-height: 1.5;
}

.feature-save-btn {
  grid-column: 1 / -1;
  justify-self: end;
}

.weekly-plan-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
}

.nutrition-result {
  display: grid;
  gap: 6px;
  align-content: center;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(216, 182, 106, 0.07);
}

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

.nutrition-result strong {
  color: var(--gold-2);
  font-size: 17px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.section-head h2 {
  margin-bottom: 6px;
}

.section-head .ghost-btn {
  flex: 0 0 auto;
}

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

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

.counseling-form label:nth-of-type(2),
.counseling-form label:nth-of-type(n + 6) {
  grid-column: span 3;
}

.rule-grid div {
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.14);
}

.rule-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.rule-grid strong {
  color: var(--gold-2);
  font-size: 14px;
}

.booking-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.booking-control label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.booking-control input,
.booking-control select {
  width: 100%;
  color: var(--text);
  background: #0f0d0a;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
}

.ai-training-precheck {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.ai-training-menu-tab {
  padding: 0;
  overflow: hidden;
}

.ai-training-menu-tab > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.ai-training-menu-tab > summary::-webkit-details-marker {
  display: none;
}

.ai-training-menu-tab > summary span:first-child {
  display: grid;
  gap: 4px;
}

.ai-training-menu-tab > summary strong {
  color: var(--text);
}

.ai-training-menu-tab > summary small {
  color: var(--muted);
  font-size: 12px;
}

.ai-training-menu-tab[open] > summary {
  border-bottom: 1px solid rgba(42, 130, 218, 0.14);
  background: rgba(42, 130, 218, 0.06);
}

.ai-training-menu-tab-body {
  padding: 16px;
}

.ai-training-menu-launcher-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(42, 130, 218, 0.14);
  border-radius: 8px;
  background: rgba(42, 130, 218, 0.05);
}

.ai-training-menu-launcher-body > div {
  display: grid;
  gap: 4px;
}

.ai-training-menu-launcher-body strong {
  color: var(--text);
}

.ai-training-menu-launcher-body span {
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .ai-training-menu-launcher-body {
    align-items: stretch;
    flex-direction: column;
  }
}

.ai-training-precheck-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-training-precheck-head h4 {
  margin: 4px 0 0;
  font-size: 1rem;
  color: #0f172a;
}

.ai-training-precheck-head > strong {
  color: #1d4ed8;
  font-size: 1.1rem;
  text-align: right;
}

.ai-training-recommend-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.ai-training-recommend-chip {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: #fff;
}

.ai-training-recommend-chip strong {
  color: #0f172a;
  font-size: 1rem;
}

.ai-training-recommend-chip span {
  color: #334155;
  font-weight: 700;
}

.ai-training-recommend-chip small {
  color: #64748b;
  font-weight: 700;
}

.ai-unregistered-exercises {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(216, 182, 106, 0.28);
  border-radius: 8px;
  background: rgba(216, 182, 106, 0.08);
}

.ai-unregistered-exercises strong {
  color: var(--gold-2);
}

.ai-unregistered-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-unregistered-chip-list span {
  padding: 6px 9px;
  border: 1px solid rgba(216, 182, 106, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}

.ai-training-precheck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.ai-training-precheck-grid h5 {
  margin: 0 0 8px;
  color: #334155;
}

.ai-training-precheck-grid ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-training-precheck-grid li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.ai-training-precheck-grid li small {
  grid-column: 1 / -1;
  color: #64748b;
  font-weight: 700;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.slot-btn {
  display: grid;
  gap: 4px;
  text-align: left;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(222, 194, 132, 0.2);
  border-radius: 8px;
  padding: 13px;
}

.slot-btn:hover {
  border-color: var(--gold);
  background: rgba(216, 182, 106, 0.1);
}

.slot-btn strong {
  color: var(--gold-2);
  font-size: 18px;
}

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

.slot-btn.double-slot {
  border-color: rgba(216, 182, 106, 0.55);
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.18), rgba(111, 94, 57, 0.08));
}

.slot-btn.double-slot span {
  color: var(--gold-2);
}

.slot-check {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(222, 194, 132, 0.2);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.slot-check input {
  width: auto;
}

.slot-check.disabled {
  opacity: 0.42;
}

.calendar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.calendar-head h2 {
  margin-bottom: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
}

.calendar-day {
  min-height: 168px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.booking-calendar-day {
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.booking-calendar-day:hover {
  border-color: rgba(216, 182, 106, 0.5);
  background: rgba(216, 182, 106, 0.08);
}

.calendar-day.selected {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(216, 182, 106, 0.16), rgba(255, 255, 255, 0.035));
}

.calendar-day.closed {
  background: rgba(224, 122, 95, 0.08);
  border-color: rgba(224, 122, 95, 0.25);
}

.calendar-day-head {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.calendar-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
}

.calendar-event {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 9px;
  background: rgba(0, 0, 0, 0.16);
}

.booking-calendar-day .calendar-event {
  margin-top: 8px;
}

.calendar-event strong {
  color: var(--gold-2);
}

.calendar-event span,
.calendar-event small {
  color: var(--muted);
  font-size: 12px;
}

.customer-calendar-view {
  gap: 14px;
}

.customer-next-reservation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-color: rgba(64, 152, 255, 0.22);
  background: linear-gradient(135deg, rgba(64, 152, 255, 0.08), rgba(255, 255, 255, 0.04));
}

.customer-next-reservation-card h2 {
  margin: 8px 0 4px;
  font-size: 20px;
  line-height: 1.35;
}

.customer-next-reservation-card.empty {
  border-color: rgba(232, 177, 80, 0.22);
  background: rgba(232, 177, 80, 0.08);
}

.customer-next-reservation-note {
  display: grid;
  gap: 3px;
  min-width: 160px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.customer-next-reservation-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-next-reservation-note strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.customer-calendar-shell {
  display: grid;
  gap: 14px;
}

.customer-calendar-mode-tabs {
  justify-content: flex-start;
}

.customer-calendar-meal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.customer-calendar-meal-summary > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.customer-calendar-meal-summary span {
  color: var(--muted);
  font-size: 12px;
}

.customer-calendar-meal-summary strong {
  color: var(--text);
  font-size: 18px;
}

.customer-calendar-weekdays,
.customer-calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.customer-calendar-weekdays span {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.customer-calendar-day {
  min-height: 96px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.customer-calendar-day.selected {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(216, 182, 106, 0.18), rgba(255, 255, 255, 0.045));
}

.customer-calendar-day.out-month {
  opacity: 0.45;
}

.customer-calendar-day.closed {
  border-color: rgba(224, 122, 95, 0.22);
  background: rgba(224, 122, 95, 0.07);
}

.customer-calendar-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.customer-calendar-date strong {
  color: var(--text);
  font-size: 16px;
}

.customer-calendar-date small {
  color: var(--muted);
  font-size: 11px;
}

.customer-calendar-day-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.customer-calendar-chip {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.25;
}

.customer-calendar-chip.reservation {
  color: #f4fbff;
  background: rgba(37, 99, 235, 0.42);
  border: 1px solid rgba(147, 197, 253, 0.42);
  font-weight: 800;
}

.customer-calendar-chip.training {
  color: #f2fff4;
  background: rgba(22, 163, 74, 0.42);
  border: 1px solid rgba(134, 239, 172, 0.4);
  font-weight: 800;
}

.customer-calendar-chip.more {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
}

.customer-calendar-meal-mark {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 900;
  font-size: 18px;
}

.customer-calendar-meal-mark.good {
  color: #083d25;
  background: #9be7b0;
}

.customer-calendar-meal-mark.excellent {
  color: #10200f;
  background: linear-gradient(135deg, #d7b85b, #9be7b0);
  box-shadow: 0 0 0 2px rgba(216, 182, 106, 0.25);
}

.customer-calendar-meal-mark.caution {
  color: #3f2c02;
  background: #f3cd6b;
}

.customer-calendar-meal-mark.bad {
  color: #fff;
  background: #e25454;
}

.customer-calendar-meal-mark.empty {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.08);
}

.customer-calendar-day-body small,
.customer-calendar-day-body em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.customer-calendar-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 12px;
}

.customer-calendar-detail-block {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.customer-calendar-detail-block h3 {
  margin: 0;
}

.customer-calendar-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-calendar-session {
  display: grid;
  gap: 9px;
}

.customer-calendar-session > div:first-child {
  display: grid;
  gap: 3px;
}

.customer-calendar-session span,
.customer-calendar-exercise-list span {
  color: var(--muted);
  font-size: 12px;
}

.customer-calendar-exercise-list {
  display: grid;
  gap: 5px;
}

.customer-calendar-meal-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.customer-calendar-meal-detail > strong {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  font-size: 20px;
}

.customer-calendar-meal-detail.good > strong {
  color: #083d25;
  background: #9be7b0;
}

.customer-calendar-meal-detail.excellent > strong {
  color: #10200f;
  background: linear-gradient(135deg, #d7b85b, #9be7b0);
  box-shadow: 0 0 0 2px rgba(216, 182, 106, 0.25);
}

.customer-calendar-meal-detail.caution > strong {
  color: #3f2c02;
  background: #f3cd6b;
}

.customer-calendar-meal-detail.bad > strong {
  color: #fff;
  background: #e25454;
}

.customer-calendar-meal-detail p,
.customer-calendar-meal-detail small {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.calendar-month-label {
  align-self: center;
  color: var(--gold-2);
  min-width: 96px;
  text-align: center;
}

.calendar-mode-tabs {
  display: inline-flex;
  gap: 4px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 999px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  margin: 8px 0 14px;
}

.calendar-mode-tabs button {
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.calendar-mode-tabs button.active {
  color: var(--bg);
  background: var(--gold);
}

.ios-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.calendar-main-card {
  order: -2;
}

.calendar-draft-top {
  margin: 12px 0 14px;
}

.calendar-draft-top .calendar-draft-empty,
.calendar-draft-top .calendar-draft-editor {
  border-top: 1px solid rgba(222, 194, 132, 0.2);
}

.calendar-draft-top .calendar-draft-editor {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: end;
}

.calendar-draft-top .calendar-draft-editor .ios-editor-title,
.calendar-draft-top .calendar-draft-editor .booking-status,
.calendar-draft-top .calendar-draft-editor label:has(textarea),
.calendar-draft-top .calendar-draft-editor .calendar-draft-actions,
.calendar-draft-top .calendar-draft-editor p {
  grid-column: 1 / -1;
}

.calendar-draft-top .calendar-draft-empty {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
}

.calendar-draft-top .calendar-draft-empty .ios-editor-title,
.calendar-draft-top .calendar-draft-empty p {
  margin: 0;
}

.calendar-stage {
  position: relative;
  min-width: 0;
}

.calendar-draft-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 4, 3, 0.48);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.calendar-draft-popover {
  width: min(760px, 100%);
  max-height: min(680px, calc(100vh - 160px));
  overflow: auto;
  border: 1px solid rgba(216, 182, 106, 0.44);
  border-radius: 14px;
  background: rgba(15, 13, 10, 0.98);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.46);
}

.calendar-draft-popover .calendar-draft-editor {
  border: 0;
  border-radius: 14px;
}

.business-calendar-weekdays,
.business-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.business-calendar-weekdays {
  gap: 8px;
  margin: 10px 0 8px;
}

.business-calendar-weekdays span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.business-calendar-grid {
  gap: 8px;
}

.business-calendar-day {
  min-height: 150px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 9px;
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  overflow: hidden;
}

.business-calendar-day:hover {
  border-color: rgba(216, 182, 106, 0.44);
  background: rgba(216, 182, 106, 0.07);
}

.business-calendar-day.selected {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(216, 182, 106, 0.18), rgba(255, 255, 255, 0.04));
}

.business-calendar-day.out-month {
  opacity: 0.42;
}

.business-calendar-day.closed {
  background: rgba(224, 122, 95, 0.08);
  border-color: rgba(224, 122, 95, 0.25);
}

.business-calendar-date {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.business-calendar-date strong {
  color: var(--gold-2);
  font-size: 16px;
}

.business-calendar-day .calendar-event {
  position: relative;
  margin-top: 6px;
  padding-right: 28px;
}

.calendar-pill {
  display: block;
  width: 100%;
  margin-top: 5px;
  border-radius: 6px;
  padding: 4px 6px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reservation-pill {
  background: rgba(128, 201, 155, 0.16);
  border: 1px solid rgba(128, 201, 155, 0.22);
}

.business-pill {
  background: rgba(216, 182, 106, 0.14);
  border: 1px solid rgba(222, 194, 132, 0.22);
}

.calendar-more {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.business-week-view {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 8px;
}

.business-week-day {
  min-height: 260px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 10px;
  padding: 10px;
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.business-week-day:hover {
  border-color: rgba(216, 182, 106, 0.44);
  background: rgba(216, 182, 106, 0.07);
}

.business-week-day.selected {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(216, 182, 106, 0.18), rgba(255, 255, 255, 0.04));
}

.business-week-day.closed {
  background: rgba(224, 122, 95, 0.08);
  border-color: rgba(224, 122, 95, 0.25);
}

.business-day-view {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.035);
  min-height: 420px;
}

.business-timeline {
  display: grid;
  gap: 10px;
}

.ios-timeline-scroll,
.ios-week-timeline-scroll {
  width: 100%;
  max-height: 720px;
  overflow: auto;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 12px;
  background: rgba(7, 6, 5, 0.5);
}

.ios-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 1728px;
}

.ios-time-axis,
.ios-week-time-axis {
  position: relative;
  min-height: 1728px;
  border-right: 1px solid rgba(222, 194, 132, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

.ios-time-axis span,
.ios-week-time-axis span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.ios-time-grid,
.ios-week-day-column {
  position: relative;
  min-height: 1728px;
}

.ios-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(222, 194, 132, 0.11);
}

.ios-timeline-event {
  position: absolute;
  left: 8px;
  right: 8px;
  display: grid;
  align-content: start;
  gap: 2px;
  border: 1px solid rgba(222, 194, 132, 0.22);
  border-radius: 8px;
  padding: 7px 9px;
  overflow: hidden;
  color: var(--text);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
  z-index: 3;
  text-align: left;
  cursor: pointer;
}

.ios-timeline-event strong {
  font-size: 12px;
  line-height: 1.25;
}

.ios-timeline-event span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.25;
}

.ios-timeline-event.reservation {
  background: rgba(56, 140, 100, 0.42);
  border-color: rgba(128, 201, 155, 0.38);
}

.ios-timeline-event.business {
  background: rgba(164, 119, 41, 0.38);
  border-color: rgba(222, 194, 132, 0.35);
}

.ios-timeline-event:hover {
  border-color: var(--gold);
  filter: brightness(1.08);
}

.ios-calendar-slot {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 16px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

.ios-calendar-slot:hover {
  background: rgba(216, 182, 106, 0.16);
  outline: 1px solid rgba(216, 182, 106, 0.35);
}

.ios-calendar-slot.reservation:hover {
  background: rgba(128, 201, 155, 0.16);
  outline-color: rgba(128, 201, 155, 0.35);
}

.ios-closed-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 1728px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.66);
  background: repeating-linear-gradient(
    135deg,
    rgba(224, 122, 95, 0.08),
    rgba(224, 122, 95, 0.08) 12px,
    rgba(224, 122, 95, 0.03) 12px,
    rgba(224, 122, 95, 0.03) 24px
  );
  pointer-events: none;
}

.ios-week-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 58px repeat(7, minmax(118px, 1fr));
  background: rgba(10, 9, 7, 0.94);
  border-bottom: 1px solid rgba(222, 194, 132, 0.14);
}

.ios-week-header button {
  display: grid;
  gap: 2px;
  border: 0;
  border-left: 1px solid rgba(222, 194, 132, 0.1);
  padding: 10px 8px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.ios-week-header button.selected {
  color: #14100a;
  background: var(--gold);
}

.ios-week-header button span {
  font-size: 11px;
}

.ios-week-timeline {
  display: grid;
  grid-template-columns: 58px repeat(7, minmax(118px, 1fr));
  min-height: 1728px;
}

.ios-week-day-column {
  border-left: 1px solid rgba(222, 194, 132, 0.1);
}

.ios-week-day-column.selected {
  background: rgba(216, 182, 106, 0.045);
}

.ios-day-panel {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 14px;
  padding: 14px;
  background: rgba(8, 7, 5, 0.52);
}

.ios-day-head {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid rgba(222, 194, 132, 0.12);
  padding-bottom: 12px;
}

.ios-day-head span {
  color: var(--muted);
  font-size: 12px;
}

.ios-day-head strong {
  color: var(--gold-2);
  font-size: 24px;
}

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

.ios-event-item {
  display: grid;
  gap: 5px;
  border-radius: 10px;
  padding: 11px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.ios-event-item strong {
  color: var(--text);
  font-size: 14px;
}

.ios-event-item span,
.ios-event-item small {
  color: var(--muted);
  font-size: 12px;
}

.ios-event-item.reservation {
  border-left: 4px solid var(--ok);
}

.ios-event-item.business {
  border-left: 4px solid var(--gold);
}

.ios-event-item.closed {
  border-left: 4px solid var(--danger);
}

.ios-event-editor {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(222, 194, 132, 0.12);
  padding-top: 12px;
}

.calendar-draft-empty {
  border: 1px dashed rgba(222, 194, 132, 0.22);
  border-radius: 12px;
  padding: 12px;
}

.calendar-draft-editor {
  border: 1px solid rgba(222, 194, 132, 0.2);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.calendar-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hidden {
  display: none !important;
}

.ios-editor-title {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--gold-2);
}

.ios-editor-title span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(216, 182, 106, 0.16);
}

.ios-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.reservation-event {
  border-color: rgba(128, 201, 155, 0.28);
  background: rgba(128, 201, 155, 0.08);
}

.business-event {
  border-color: rgba(222, 194, 132, 0.24);
  background: rgba(216, 182, 106, 0.08);
}

.business-event .icon-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  min-height: 22px;
  font-size: 14px;
}

.product-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.product-card h3 {
  margin: 10px 0 4px;
}

.affiliate-panel {
  border-color: rgba(222, 194, 132, 0.18);
}

.life-log-affiliate-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(222, 194, 132, 0.16);
}

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

.affiliate-card {
  display: grid;
  gap: 8px;
  min-height: 120px;
  padding: 14px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  text-decoration: none;
}

.affiliate-card:hover {
  border-color: rgba(222, 194, 132, 0.42);
  background: rgba(222, 194, 132, 0.08);
}

.affiliate-card strong {
  line-height: 1.35;
}

.affiliate-card small,
.affiliate-disclosure {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.affiliate-disclosure {
  margin: 10px 0 0;
}

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

.payment-select-form {
  display: grid;
  gap: 14px;
}

.payment-checklist {
  display: grid;
  gap: 16px;
}

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

.payment-group-title {
  grid-column: 1 / -1;
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(222, 194, 132, 0.18);
  padding: 4px 0 8px;
}

.payment-product-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.payment-check-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(222, 194, 132, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.payment-check-item.warning {
  border-color: rgba(224, 122, 95, 0.42);
  background: rgba(224, 122, 95, 0.08);
}

.payment-check-item input {
  inline-size: 18px;
  block-size: 18px;
}

.payment-check-item span {
  display: grid;
  gap: 4px;
}

.payment-check-item small,
.product-rule,
.payment-preview-list small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.payment-preview-card {
  border-color: rgba(216, 182, 106, 0.42);
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.1), rgba(21, 18, 14, 0.95));
}

.payment-preview-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.payment-preview-total strong {
  color: var(--gold-2);
  font-size: 28px;
}

.payment-preview-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.payment-preview-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid rgba(222, 194, 132, 0.12);
  padding-top: 12px;
}

.payment-preview-list h3 {
  margin: 8px 0 4px;
}

.payment-preview-list p {
  margin: 0 0 4px;
}

.payment-preview-list article > strong {
  color: var(--gold-2);
  white-space: nowrap;
}

.payment-batch-form {
  margin-top: 16px;
  border-top: 1px solid rgba(222, 194, 132, 0.16);
  padding-top: 16px;
}

.payment-customer-notice {
  margin-top: 14px;
}

.service-route-card {
  border-color: rgba(222, 194, 132, 0.28);
  background:
    linear-gradient(135deg, rgba(222, 194, 132, 0.1), rgba(18, 20, 25, 0.95)),
    rgba(18, 20, 25, 0.92);
}

.service-route-card.ai {
  border-color: rgba(120, 154, 196, 0.28);
}

.service-route-card.goal {
  border-color: rgba(34, 197, 163, 0.3);
}

.service-route-card.store {
  border-color: rgba(222, 194, 132, 0.3);
}

.service-route-status {
  min-width: 170px;
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.service-route-status span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.service-route-status strong {
  color: var(--gold-2);
  font-size: 18px;
}

.service-route-main {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  gap: 14px;
  align-items: stretch;
}

.service-route-main h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.45;
}

.service-route-main p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.service-route-steps {
  display: grid;
  gap: 8px;
}

.service-route-steps span {
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.055);
}

.coaching-pathway-card {
  border-color: rgba(34, 197, 163, 0.28);
  background:
    linear-gradient(135deg, rgba(34, 197, 163, 0.12), rgba(18, 20, 25, 0.94)),
    rgba(18, 20, 25, 0.92);
}

.coaching-pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.coaching-pathway-grid article {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 13px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.coaching-pathway-grid span,
.online-chat-latest strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.coaching-pathway-grid strong {
  color: var(--text);
  font-size: 16px;
}

.coaching-pathway-grid p,
.online-chat-latest p,
.online-chat-latest small {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.online-chat-ops-card {
  border-color: rgba(34, 197, 163, 0.24);
}

.online-chat-latest {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 197, 163, 0.18);
  border-radius: 8px;
  background: rgba(34, 197, 163, 0.075);
}

.monthly-policy-sheets-card {
  border-color: rgba(128, 201, 155, 0.28);
  background:
    linear-gradient(135deg, rgba(128, 201, 155, 0.09), rgba(21, 18, 14, 0.94)),
    rgba(21, 18, 14, 0.92);
}

.monthly-policy-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.monthly-policy-sheet-option {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 188px;
  padding: 14px;
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.monthly-policy-sheet-option span {
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 900;
}

.monthly-policy-sheet-option strong {
  font-size: 16px;
  line-height: 1.45;
}

.monthly-policy-sheet-option p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.monthly-policy-sheet-option .ghost-btn {
  width: 100%;
  margin-top: auto;
}

.monthly-policy-send-box {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(34, 197, 163, 0.18);
  border-radius: 8px;
  background: rgba(34, 197, 163, 0.07);
}

.monthly-policy-send-box strong {
  color: var(--gold-2);
}

.monthly-policy-send-box p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.monthly-policy-send-box textarea {
  width: 100%;
  min-height: 150px;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  resize: vertical;
}

.monthly-policy-actions .ghost-btn,
.monthly-policy-actions .btn {
  min-height: 42px;
}

.store-chat-inbox-card {
  border-color: rgba(120, 154, 196, 0.24);
  background: rgba(255, 255, 255, 0.035);
}

.store-chat-app-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.store-chat-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.store-chat-tabs span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.store-chat-tabs .active {
  color: #fff;
  background: rgba(0, 0, 0, 0.52);
}

.store-chat-head-count {
  display: grid;
  gap: 0;
  justify-items: end;
}

.store-chat-head-count strong {
  color: var(--gold-2);
  font-size: 22px;
  line-height: 1;
}

.store-chat-head-count span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.store-chat-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.store-chat-search span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.store-chat-search input {
  width: 100%;
  border: 0;
  padding: 3px 0;
  color: var(--text);
  background: transparent;
  outline: 0;
}

.store-chat-search input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.store-chat-request-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(34, 197, 163, 0.18);
  border-radius: 8px;
  background: rgba(34, 197, 163, 0.065);
}

.store-chat-request-row.has-pending {
  border-color: rgba(34, 197, 163, 0.38);
  background: rgba(34, 197, 163, 0.12);
}

.store-chat-request-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #062817;
  background: #8ee6b3;
  font-size: 12px;
  font-weight: 900;
}

.store-chat-request-row strong,
.store-chat-request-row small {
  display: block;
  min-width: 0;
}

.store-chat-request-row small {
  margin-top: 4px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-chat-thread-list {
  display: grid;
  gap: 2px;
}

.store-chat-thread {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(42px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px 8px;
  border: 1px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.store-chat-thread:hover,
.store-chat-thread.active {
  border-color: rgba(216, 182, 106, 0.48);
  background: rgba(216, 182, 106, 0.08);
}

.store-chat-thread.needs-reply {
  background: rgba(34, 197, 163, 0.08);
}

.store-chat-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.store-chat-thread-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.store-chat-thread-top,
.store-chat-thread-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-chat-thread-top strong,
.store-chat-thread-message {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-chat-thread-top em {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  color: #06331f;
  background: #8ee6b3;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.store-chat-thread-top small,
.store-chat-thread-meta,
.store-chat-chevron {
  color: var(--muted);
}

.store-chat-thread-message {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.35;
}

.store-chat-thread-meta {
  flex-wrap: wrap;
  font-size: 12px;
}

.store-chat-thread-side {
  min-width: 34px;
  display: grid;
  gap: 7px;
  justify-items: end;
  align-self: stretch;
  align-content: center;
}

.store-chat-thread-side small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.store-chat-plan-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #0c1624;
  font-weight: 900;
}

.store-chat-unread {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #0f2a1e;
  background: #00c853;
  font-size: 13px;
  font-weight: 900;
}

.store-chat-chevron {
  font-size: 26px;
  line-height: 1;
}

.plan-ai {
  background: #8ee6b3;
  color: #0f2a1e;
}

.plan-goal-5 {
  background: #8bd3ff;
  color: #08243d;
}

.plan-goal-10 {
  background: #f1c971;
  color: #35220b;
}

.plan-goal-15 {
  background: #f09a9a;
  color: #3b0d0d;
}

.plan-store {
  background: #c9b6ff;
  color: #1d123d;
}

.plan-basic {
  background: #cbd5e1;
  color: #172033;
}

.notice.danger {
  border-color: rgba(224, 122, 95, 0.46);
  background: rgba(224, 122, 95, 0.1);
  color: #ffd8cf;
}

.service-comparison-card {
  background:
    linear-gradient(135deg, rgba(216, 182, 106, 0.1), rgba(21, 18, 14, 0.94)),
    rgba(21, 18, 14, 0.92);
}

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

.service-compare-plan {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.16);
}

.service-compare-plan.premium {
  border-color: rgba(216, 182, 106, 0.42);
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.14), rgba(0, 0, 0, 0.18));
}

.service-compare-plan h3 {
  margin: 0;
  font-size: 22px;
}

.service-price {
  margin: 0;
  color: var(--gold-2);
  font-size: 24px;
  font-weight: 800;
}

.compare-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 10px;
  border-top: 1px solid rgba(222, 194, 132, 0.12);
  padding-top: 10px;
}

.online-ai-quality {
  background:
    linear-gradient(135deg, rgba(216, 182, 106, 0.11), rgba(18, 20, 25, 0.94)),
    rgba(18, 20, 25, 0.92);
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.quality-grid > div {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

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

.quality-grid strong {
  line-height: 1.5;
}

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

.compare-row strong {
  font-size: 14px;
  line-height: 1.6;
}

.compare-note {
  margin: 14px 0 0;
}

.booking-confirm {
  border-color: rgba(216, 182, 106, 0.42);
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.12), rgba(21, 18, 14, 0.94));
}

.booking-confirm-popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
}

.booking-confirm-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(5, 4, 3, 0.68);
  backdrop-filter: blur(5px);
}

.booking-confirm-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(82vh, 680px);
  overflow: auto;
  border: 1px solid rgba(216, 182, 106, 0.42);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(216, 182, 106, 0.14), rgba(21, 18, 14, 0.98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
  padding: 18px;
}

.booking-confirm-dialog h2 {
  margin: 10px 0 14px;
}

.booking-confirm-dialog .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.booking-confirm-dialog .actions .btn,
.booking-confirm-dialog .actions .ghost-btn {
  flex: 1 1 180px;
  justify-content: center;
}

.embedded-confirm {
  margin-top: 14px;
  border: 1px solid rgba(216, 182, 106, 0.42);
  border-radius: 8px;
  padding: 14px;
}

.booking-status {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.booking-status h2 {
  margin: 10px 0 6px;
  font-size: 22px;
}

.booking-status p {
  margin: 0;
  color: var(--muted);
}

.booking-status.success {
  border-color: rgba(128, 201, 155, 0.42);
  background: linear-gradient(135deg, rgba(128, 201, 155, 0.12), rgba(21, 18, 14, 0.94));
}

.booking-status.pending {
  border-color: rgba(233, 196, 106, 0.42);
  background: linear-gradient(135deg, rgba(233, 196, 106, 0.12), rgba(21, 18, 14, 0.94));
}

.booking-status.error {
  border-color: rgba(224, 122, 95, 0.42);
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.12), rgba(21, 18, 14, 0.94));
}

.confirm-main {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.confirm-main strong {
  display: block;
  color: var(--gold-2);
  font-size: 24px;
  margin-top: 4px;
}

.confirm-main p {
  margin: 6px 0 0;
}

.product-price {
  color: var(--gold-2);
  font-size: 26px;
  font-weight: 800;
}

.product-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.compact-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.compact-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) repeat(3, auto);
  gap: 8px;
  align-items: center;
  border-top: 1px solid rgba(222, 194, 132, 0.12);
  padding: 10px 0;
}

.compact-row span {
  color: var(--muted);
  font-size: 13px;
}

.staff-account-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.staff-account-card {
  border: 1px solid rgba(222, 194, 132, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.staff-account-head,
.staff-account-badges,
.staff-account-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.staff-account-head {
  justify-content: space-between;
}

.staff-account-head strong {
  display: block;
  font-size: 15px;
}

.staff-account-head span,
.staff-account-fields span {
  color: var(--muted);
  font-size: 12px;
}

.staff-account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.staff-account-fields div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.staff-account-fields strong,
.staff-account-fields code {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.staff-account-actions {
  margin-top: 10px;
}

.compact-inline-form {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
  margin-top: 10px;
}

.compact-inline-form label {
  display: grid;
  gap: 4px;
  flex: 1 1 220px;
  color: var(--muted);
  font-size: 12px;
}

.compact-inline-form input {
  width: 100%;
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.66);
  color: var(--text);
}

.compact-inline-form .ghost-btn {
  min-height: 40px;
}

.staff-account-actions .btn,
.staff-account-actions .ghost-btn {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-layout {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: minmax(320px, 520px) 1fr;
  gap: 18px;
  align-items: stretch;
}

.login-card {
  width: 100%;
  background: rgba(15, 13, 10, 0.95);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px;
  box-shadow: var(--shadow);
}

.login-card img {
  width: 180px;
  box-sizing: border-box;
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 auto 18px;
}

.login-brand-lockup {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0 auto 22px;
  text-align: center;
}

.login-brand-logo {
  display: block;
  width: 92px;
  max-width: 32%;
  height: auto;
  margin: 0 auto 10px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.login-brand-lockup span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.login-brand-lockup h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1;
}

.login-brand-lockup strong {
  color: var(--text);
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.1;
}

.login-card h1 {
  text-align: center;
  margin: 0 0 10px;
}

.login-card h1 span {
  display: block;
}

.login-account-guide {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.login-account-guide p {
  margin: 0;
}

.login-account-guide .ghost-btn {
  width: 100%;
  text-align: center;
}

.login-side {
  display: grid;
  gap: 18px;
}

.login-panel {
  background: rgba(15, 13, 10, 0.9);
  border: 1px solid rgba(222, 194, 132, 0.18);
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.login-panel h2 {
  margin: 0 0 8px;
}

.login-panel label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.public-update-list {
  display: grid;
  gap: 10px;
}

.public-update-item {
  border-top: 1px solid rgba(222, 194, 132, 0.14);
  padding-top: 10px;
}

.public-update-item span {
  color: var(--muted);
  font-size: 12px;
}

.public-update-item strong {
  display: block;
  margin: 4px 0;
  color: var(--gold-2);
}

.public-update-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 980px) {
  .login-layout {
    grid-template-columns: 1fr;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .card,
  .card.wide {
    grid-column: 1 / -1;
  }

  .meal-grid,
  .meal-category-accordion,
  .training-grid,
  .rule-grid,
  .management-head,
  .management-grid,
  .affiliate-grid,
  .product-grid,
  .payment-checklist,
  .payment-check-group,
    .service-route-main,
    .store-chat-settings-summary,
    .store-chat-ai-suggestion,
    .store-chat-settings-grid,
    .coaching-pathway-grid,
    .service-compare-grid,
    .monthly-policy-sheet-grid,
    .monthly-policy-send-box,
    .quality-grid,
    .workflow-strip,
  .slot-grid,
  .booking-control,
  .calendar-grid,
  .calendar-strip {
    grid-template-columns: 1fr;
  }

  .ios-calendar-layout {
    grid-template-columns: 1fr;
  }

  .business-calendar-weekdays,
  .business-calendar-grid,
  .business-week-view {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
  }

  .compare-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .store-chat-thread {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 10px;
  }

  .store-chat-tabs span {
    padding: 6px 12px;
  }

  .store-chat-ai-suggestion {
    align-items: stretch;
  }

  .store-chat-avatar {
    width: 42px;
    height: 42px;
  }

  .store-chat-thread-top small {
    flex: 0 0 auto;
  }

  .business-calendar-day,
  .business-week-day {
    min-height: 82px;
    padding: 6px;
  }

  .business-calendar-date {
    margin-bottom: 4px;
  }

  .business-calendar-date strong {
    font-size: 14px;
  }

  .calendar-pill {
    padding: 3px 4px;
    font-size: 10px;
  }

  .ios-day-panel {
    position: static;
  }

  .ios-row-pair {
    grid-template-columns: 1fr;
  }

  .progress-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .food-entry-row,
  .manual-food-grid,
  .challenge-grid,
  .snapshot-metric-grid,
  .life-log-snapshot-grid,
  .training-goal-summary,
  .goal-checkbox-grid,
  .cardio-plan-summary,
  .ai-daily-summary,
  .ai-meal-photos,
  .meal-suggestion-controls,
  .meal-suggestion-item,
  .volume-equivalent-grid,
  .customer-quick-training-overview,
  .staff-session-board,
  .sales-summary-grid,
  .sales-check,
  .cash-count-grid,
  .food-line,
  .referral-summary,
  .referral-row,
  .check-grid,
  .upgrade-reminder-main,
  .upgrade-mini-list,
  .upgrade-usage-row,
  .upgrade-rec-card,
  .upgrade-gap-grid {
    grid-template-columns: 1fr;
  }

  .upgrade-price-box {
    border-left: 0;
    border-top: 1px solid rgba(222, 194, 132, 0.14);
    padding-left: 0;
    padding-top: 12px;
  }

  .session-head,
  .exercise-head,
  .section-head,
  .confirm-main,
  .booking-status,
  .payment-preview-list article,
  .pace-panel,
  .calendar-head,
  .sales-head,
  .photo-record-head,
  .challenge-share-head,
  .progress-photo-history-card {
    display: grid;
    grid-template-columns: 1fr;
  }

  .meal-summary-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .snapshot-main,
  .life-log-snapshot-score {
    align-items: flex-start;
  }

  .customer-home-snapshot {
    padding: 16px;
  }

  .snapshot-brand h2 {
    font-size: 19px;
  }

  .snapshot-score-ring {
    width: 78px;
  }

  .snapshot-score-ring strong {
    font-size: 25px;
  }

  .snapshot-metric-grid article,
  .life-log-snapshot-grid article {
    min-height: 0;
  }

  .section-head .ghost-btn {
    width: 100%;
  }

  .staff-session-queue {
    position: static;
  }

  .exercise-title-line {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .exercise-history-card div,
  .exercise-history-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .progress-photo-usage-controls {
    grid-template-columns: 1fr;
  }

  .meal-remaining {
    min-width: 104px;
    justify-self: end;
    text-align: right;
  }

  .meal-remaining strong {
    font-size: 22px;
  }

  .meal-suggestion-footer {
    display: grid;
  }

  .hydration-report {
    grid-template-columns: 1fr;
  }

  .customer-content {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }

  .customer-content .topbar {
    gap: 12px;
    padding-inline: 44px 86px;
  }

  .customer-content .topbar > .topbar-actions {
    justify-content: flex-start;
  }

  .customer-bottom-nav {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: min(430px, calc(100vw - 16px));
    border-radius: 20px;
  }

  .customer-bottom-nav button {
    padding: 7px 2px;
  }

  .customer-bottom-nav span {
    font-size: 10px;
  }

  .macro-illustration-grid {
    grid-template-columns: 1fr;
  }

  .meal-display-switch {
    align-items: stretch;
    flex-direction: column;
  }

  .segmented-control {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .health-guide-body {
    grid-template-columns: 1fr;
  }

  .health-guide-card summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .meal-suggestion-macro {
    justify-items: start;
    text-align: left;
  }

  .meal-category-block.open {
    grid-column: auto;
  }

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

  .session-call-row,
  .session-call-main,
  .session-call-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .session-call-volume {
    text-align: left;
  }

  .sub-exercise-row {
    grid-template-columns: 1fr;
  }

  .sub-exercise-row span {
    grid-column: auto;
  }

  .sub-set-row {
    grid-template-columns: 42px 1fr;
    margin-left: 18px;
  }

  .set-sub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
  }

  .training-timer-panel {
    grid-template-columns: 1fr;
  }

  .training-timer-display strong {
    text-align: left;
  }

  .sub-set-row label {
    grid-column: 1 / -1;
  }

  .body-record-form,
  .body-record-summary,
  .body-record-row {
    grid-template-columns: 1fr;
  }

  .training-body-map {
    min-height: 520px;
  }

  .balance-body-map {
    min-height: 0;
  }

  .balance-body-head,
  .balance-body-layout {
    grid-template-columns: 1fr;
  }

  .balance-body-head {
    display: grid;
  }

  .balance-score {
    text-align: left;
  }

  .balance-body-layout {
    display: grid;
  }

  .balance-body-figure {
    min-height: 280px;
    order: -1;
  }

  .balance-body-list.right .balance-part {
    text-align: left;
  }

  .balance-anatomy-grid {
    grid-template-columns: 1fr;
  }

  .balance-anatomy-stage {
    min-height: 440px;
    order: -1;
  }

  .balance-figure-crop {
    width: min(76%, 270px);
    height: 80%;
  }

  .balance-anatomy-callout {
    min-width: 82px;
    max-width: 106px;
    padding: 7px 8px;
    border-radius: 11px;
  }

  .balance-anatomy-callout strong {
    font-size: 11px;
  }

  .balance-anatomy-callout b {
    font-size: 12px;
  }

  .balance-anatomy-callout small {
    font-size: 10px;
  }

  .balance-anatomy-parts {
    grid-template-columns: 1fr 1fr;
  }

  .training-body-silhouette {
    width: 34%;
  }

  .body-map-label {
    width: 28%;
    min-width: 0;
    padding: 7px;
  }

  .body-map-label strong {
    font-size: 13px;
  }

  .today-record-popup {
    margin-left: 16px;
  }

  .edit-grid,
  .preset-row,
  .training-sub-setup,
  .text-edit-grid,
  .nutrition-form,
  .weekly-plan-form,
  .training-goal-form,
  .strength-goal-form,
  .counseling-limit-form,
  .feature-preset-form,
  .feature-toggle-grid,
  .counseling-form,
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .choice-grid,
  .basic-goal-summary-grid,
  .wizard-nav {
    grid-template-columns: 1fr;
  }

  .summary-row {
    grid-template-columns: 84px 1fr;
  }

  .wizard-stage-card,
  .wizard-progress-text {
    grid-template-columns: 1fr;
    display: grid;
    text-align: left;
  }

  .wizard-stage-card small,
  .wizard-progress-text span {
    text-align: left;
  }

  .wizard-dots {
    order: -1;
  }

  .health-condition-group {
    grid-template-columns: 1fr;
  }

  .feature-save-btn {
    justify-self: stretch;
  }

  .counseling-form label:nth-of-type(2),
  .counseling-form label:nth-of-type(n + 6) {
    grid-column: auto;
  }

  .set-main {
    grid-template-columns: 52px repeat(2, minmax(88px, 1fr)) 34px;
  }

  .set-volume {
    grid-column: 2 / 4;
    text-align: left;
  }

  .set-sub {
    grid-template-columns: repeat(3, minmax(64px, 1fr));
    margin-left: 57px;
  }

  .row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .row > span,
  .row > strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .row > .btn,
  .row > .ghost-btn {
    flex: 1 1 100%;
    width: 100%;
    white-space: normal;
  }

  .compact-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.line-link-box {
  border: 1px solid rgba(201, 162, 75, 0.22);
  background: rgba(201, 162, 75, 0.06);
  border-radius: 12px;
  margin-top: 16px;
  padding: 16px;
}

.line-link-code {
  background: #111827;
  border-radius: 10px;
  color: #f7e6aa;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 12px 0;
  padding: 14px;
  text-align: center;
  word-break: keep-all;
}

.subscription-panel {
  border-color: rgba(45, 99, 216, 0.16);
}

.subscription-list {
  display: grid;
  gap: 12px;
}

.subscription-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(45, 99, 216, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
}

.subscription-card h3 {
  margin: 8px 0 6px;
}

.subscription-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #64748b;
  font-size: 0.9rem;
}

.subscription-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.subscription-status.ok {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
}

.subscription-status.warn {
  color: #b45309;
  background: rgba(245, 158, 11, 0.18);
}

.subscription-status.neutral {
  color: #475569;
  background: rgba(148, 163, 184, 0.18);
}

.subscription-id {
  color: #64748b;
  font-size: 0.82rem;
  white-space: nowrap;
}

.subscription-panel .small {
  font-size: 0.86rem;
}

@media (max-width: 640px) {
  .weekly-review-dashboard {
    border-width: 3px;
    border-radius: 20px;
  }

  .weekly-review-phonebar {
    grid-template-columns: 38px 1fr 38px;
    min-height: 54px;
  }

  .weekly-review-lead {
    display: grid;
    padding: 12px 14px 2px;
  }

  .weekly-review-record-days {
    grid-template-columns: auto auto;
    justify-content: space-between;
    width: 100%;
  }

  .weekly-review-life-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weekly-review-life-grid div:nth-child(odd) {
    border-left: 0;
  }

  .weekly-review-life-grid div:nth-child(n + 3) {
    border-top: 1px solid rgba(7, 31, 61, 0.08);
  }

  .training-master-form,
  .training-master-edit-form {
    grid-template-columns: 1fr;
  }

  .training-master-card {
    grid-template-columns: 1fr;
  }

  .training-master-media {
    max-width: 180px;
  }

  .training-master-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-next-reservation-card {
    grid-template-columns: 1fr;
  }

  .customer-next-reservation-card h2 {
    font-size: 17px;
  }

  .customer-next-reservation-note {
    min-width: 0;
  }

  .body-weight-flow-card {
    padding: 13px;
  }

  .body-weight-flow-head,
  .body-weight-context-head {
    align-items: stretch;
    flex-direction: column;
  }

  .body-weight-flow-current {
    width: 100%;
    text-align: left;
  }

  .body-weight-context-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .body-weight-context-row.head {
    display: none;
  }

  .customer-calendar-meal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-calendar-month-grid,
  .customer-calendar-weekdays {
    gap: 4px;
  }

  .customer-calendar-day {
    min-height: 86px;
    padding: 6px;
  }

  .customer-calendar-date strong {
    font-size: 14px;
  }

  .customer-calendar-chip {
    padding: 3px 5px;
    font-size: 10px;
  }

  .customer-calendar-meal-mark {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .customer-calendar-detail-grid {
    grid-template-columns: 1fr;
  }

  .customer-calendar-slots {
    grid-template-columns: 1fr;
  }

  .business-task-row {
    grid-template-columns: 1fr;
  }

  .business-task-actions {
    justify-content: stretch;
  }

  .business-task-actions .btn,
  .business-task-actions .ghost-btn {
    flex: 1 1 160px;
  }

  .subscription-card {
    grid-template-columns: 1fr;
  }

  .faq-group-grid {
    grid-template-columns: 1fr;
  }

  .subscription-id {
    white-space: normal;
  }

  .staff-account-fields {
    grid-template-columns: 1fr;
  }

  .staff-account-actions .btn,
  .staff-account-actions .ghost-btn {
    flex: 1 1 120px;
  }
}

/* iOS/Safari zoom guard: keep editable controls at 16px+ without disabling pinch zoom. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
select,
textarea,
.inline-input,
[contenteditable="true"] {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
}
/* The support library is explicit and opt-in; hidden controls never participate in entry. */
.training-add-panel [hidden], .training-master-page [hidden] { display: none !important; }
.training-library-choice select { min-height: 46px; }
.support-exercise-safety { padding: 16px; margin: 8px 0 16px; border: 1px solid #bed3dc; border-radius: 12px; background: #f2f8fa; color: #223f50; line-height: 1.7; }
.support-exercise-safety p, .support-exercise-guide p { margin: 8px 0; }
.support-exercise-safety summary, .support-exercise-guide summary { cursor: pointer; padding: 6px 0; }
.support-exercise-safety a, .support-exercise-guide a { color: #245a79; overflow-wrap: anywhere; }
.support-exercise-guide { padding: 14px 0 4px; line-height: 1.7; }
.support-exercise-guide h4 { margin: 10px 0; }
[data-training-scope]:not([data-training-scope="normal"]) .exercise-select-preview { display: block; }
[data-training-scope]:not([data-training-scope="normal"]) .exercise-media { max-width: 400px; margin: 0 auto; }
.support-master-entry { margin: 18px 0; padding-top: 16px; border-top: 1px solid #d8e3e8; }
.support-set-fields { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 12px; align-items: end; }
.support-set-fields label { min-width: 0; display: grid; gap: 6px; }
.support-set-fields input { width: 100%; min-height: 44px; }
.support-library-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.support-library-filters label { display: grid; gap: 6px; min-width: 0; }
.support-library-filters select { width: 100%; min-width: 0; }
.support-professional-note { padding: 12px; border-left: 3px solid #376b82; background: #eef5f8; }
.support-set-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.support-set-fields > span, .support-set-fields > .full { grid-column: 1 / -1; }
.support-set-fields select { width: 100%; min-width: 0; }
@media (max-width: 600px) {
  .support-set-fields { grid-template-columns: 1fr 1fr; }
  .support-set-fields > span { grid-column: 1 / -1; }
  .support-set-fields > button { justify-self: end; }
}

.support-master-entry { display: flex; flex-wrap: wrap; gap: 10px; }
.support-master-entry .ghost-btn { white-space: normal; text-align: left; }
.support-master-entry p { flex-basis: 100%; }