:root {
  --client-page: #f5eedd;
  --client-card: #fffdf8;
  --client-border: #eadfc4;
  --client-hairline: #dcc9a3;
  --client-ink: #2b251e;
  --client-secondary: #4a4036;
  --client-muted: #6f6250;
  --moss: #596f44;
  --moss-hover: #475a37;
  --moss-deep: #2c3823;
  --moss-tint: #e6ecdb;
  --moss-mid: #aebf93;
  --honey: #dfa854;
  --honey-hover: #cf9038;
  --honey-pale: #f3dcae;
  --clay: #c16a41;
  --client-danger: #a8442a;
  --client-error-tint: #f7e4dc;
  --admin-page: #F2F2F7;
  --admin-card: #FFFFFF;
  --admin-divider: rgba(60,60,67,.12);
  --admin-row-hover: #F8FBFE;
  --admin-ink: #1C1C1E;
  --admin-secondary: #6E6E73;
  --admin-tertiary: #8E8E93;
  --brand-blue: #00AFF1;
  --brand-blue-deep: #006A94;
  --brand-blue-hover: #005A7F;
  --brand-tint: #E6F7FE;
  --grooming-teal: #32ADE6;
  --teal-tint: #E3F4FC;
  --teal-text: #005A85;
  --success-tint: #E9F9EE;
  --success-text: #1B7A3A;
  --warning-tint: #FFF4E0;
  --warning-text: #8A4B00;
  --danger-tint: #FDECEA;
  --danger-text: #A4261A;
  --danger-filled: #C7291B;
  --success-dot: #34C759;
  --amber-dot: #FF9500;
  --font-client: 'Karla', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-admin: 'Plus Jakarta Sans', system-ui, sans-serif;
  --client-title-size: 32px;
  --client-title-line: 38px;
  --client-body-size: 19px;
  --client-body-line: 28px;
  --client-card-title-size: 21px;
  --client-card-title-line: 26px;
  --client-meta-size: 17px;
  --client-meta-line: 24px;
  --client-price-size: 24px;
  --client-button-size: 21px;
  --client-label-size: 16px;
  --client-min-text: 15px;
  --admin-title-size: 26px;
  --admin-section-size: 18px;
  --admin-body-size: 16px;
  --admin-body-line: 22px;
  --admin-row-primary-size: 17px;
  --admin-row-secondary-size: 15px;
  --admin-chip-size: 14px;
  --admin-micro-size: 12px;
  --admin-number-size: 34px;
  --space-unit: 8px;
  --client-page-padding: 20px;
  --client-card-gap: 12px;
  --section-gap: 24px;
  --client-card-radius: 20px;
  --client-control-radius: 16px;
  --admin-card-radius: 18px;
  --admin-control-radius: 12px;
  --pill-radius: 999px;
  --client-button-height: 64px;
  --client-secondary-height: 56px;
  --client-choice-height: 84px;
  --phone-height: 48px;
  --admin-control-height: 48px;
  --admin-row-control-height: 44px;
  --admin-card-shadow: 0 .5px 0 rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.04);
  --client-focus: 4px solid rgba(89,111,68,.5);
  --admin-focus: 0 0 0 3px rgba(0,175,241,.45);
  --motion-duration: 150ms;
}
* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0 0 12px; }
[hidden] { display: none !important; }
.icon { flex-shrink: 0; vertical-align: middle; }
.client { min-height: 100dvh; background: var(--client-page); color: var(--client-ink); font: 500 var(--client-body-size)/var(--client-body-line) var(--font-client); }
.client .serif, .client h1 { font-family: var(--font-display); font-variation-settings: "SOFT" 60, "WONK" 1; }
.client h1 { font-size: var(--client-title-size); line-height: var(--client-title-line); font-weight: 600; color: var(--moss-deep); }
.client p { color: var(--client-secondary); }
.client :focus-visible { outline: var(--client-focus); outline-offset: 3px; }
.client label { font-size: var(--client-meta-size); font-weight: 700; }
.client input:not([type="checkbox"]):not([type="radio"]), .client select, .client textarea { width: 100%; min-width: 0; min-height: 64px; padding: 0 18px; font-size: 20px; color: var(--client-ink); background: var(--client-card); border: 2px solid var(--client-hairline); border-radius: var(--client-control-radius); }
.client-header { height: 72px; padding: 0 var(--client-page-padding); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.client-header > a:first-child { display: flex; align-items: center; min-height: 44px; min-width: 0; }
.client-header img { height: 44px; width: auto; object-fit: contain; }
.phone-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--phone-height); padding: 0 16px; border-radius: var(--pill-radius); color: var(--moss-deep); background: var(--moss-tint); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-pill .icon { width: 22px; height: 22px; }
.phone-pill:hover { background: #cdd9b9; }
.progress { padding: 8px 20px 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--client-label-size); line-height: 20px; font-weight: 700; color: var(--moss-hover); }
.progress-segments { display: flex; gap: 6px; height: 8px; }
.progress-segments > span { flex: 1; border-radius: 4px; background: var(--client-border); }
.progress-segments .done { background: var(--honey-hover); }
.progress-segments .current { background: var(--honey); }
.btn-honey, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--client-button-height); padding: 12px 20px; border: 0; border-radius: var(--client-control-radius); font-size: var(--client-button-size); line-height: 26px; font-weight: 700; text-align: center; transition: background var(--motion-duration) ease, transform var(--motion-duration) ease; }
.btn-honey { background: var(--honey); color: var(--client-ink); }
.btn-honey:hover { background: var(--honey-hover); }
.btn-honey:active { transform: scale(.98); }
.btn-ghost { min-height: var(--client-secondary-height); border: 2px solid var(--client-hairline); background: var(--client-card); color: var(--moss-hover); }
.btn-ghost:hover { background: var(--client-border); }
.pick { display: flex; align-items: center; gap: 16px; width: 100%; min-height: var(--client-choice-height); padding: 18px 20px; border: 2px solid var(--client-border); border-radius: var(--client-card-radius); text-align: left; background: var(--client-card); color: var(--client-ink); transition: border-color var(--motion-duration) ease, background var(--motion-duration) ease; }
.pick:hover { border-color: var(--moss-mid); }
.pick[aria-pressed="true"] { padding: 17px 19px; border: 3px solid var(--moss); background: var(--moss-tint); }
.pick-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 4px; overflow-wrap: anywhere; }
.pick-title { font-size: var(--client-card-title-size); line-height: var(--client-card-title-line); font-weight: 700; }
.pick-meta { font-size: var(--client-meta-size); line-height: var(--client-meta-line); font-weight: 500; color: var(--client-secondary); }
.pick-price { font-size: var(--client-price-size); font-weight: 600; color: var(--moss-deep); font-variant-numeric: tabular-nums; }
.pick-tick { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--pill-radius); background: var(--moss); color: white; }
.pick-unavailable, .pick-unavailable:hover { background: var(--client-page); border: 2px dashed var(--client-hairline); color: var(--client-muted); }
.pick-unavailable .pick-meta { color: var(--client-muted); }
.admin { min-height: 100dvh; font: 500 var(--admin-body-size)/var(--admin-body-line) var(--font-admin); background: var(--admin-page); color: var(--admin-ink); }
.admin h1 { font-size: var(--admin-title-size); line-height: 32px; font-weight: 800; letter-spacing: -.02em; }
.admin h2 { font-size: var(--admin-section-size); font-weight: 700; }
.admin :focus-visible { outline: none; box-shadow: var(--admin-focus); }
.admin input, .admin select, .admin textarea { min-height: var(--admin-control-height); padding: 0 14px; border: 0; border-radius: var(--admin-control-radius); background: var(--admin-page); color: var(--admin-ink); }
.admin .btn-honey, .admin .btn-ghost, .admin .btn-primary, .admin .btn-secondary, .admin .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--admin-control-height); padding: 0 16px; border: 0; border-radius: var(--admin-control-radius); font-size: var(--admin-body-size); font-weight: 700; transition: background var(--motion-duration) ease, transform var(--motion-duration) ease; }
.admin .btn-honey, .admin .btn-primary { background: var(--brand-blue-deep); color: white; }
.admin .btn-honey:hover, .admin .btn-primary:hover { background: var(--brand-blue-hover); }
.admin .btn-ghost, .admin .btn-secondary { background: var(--brand-tint); color: var(--brand-blue-deep); }
.admin .btn-danger { background: var(--danger-filled); color: white; }
.admin button:active { transform: scale(.97); }
.admin .pick { border: 0; border-radius: var(--admin-card-radius); background: var(--admin-card); color: var(--admin-ink); box-shadow: var(--admin-card-shadow); }
.admin .pick-title { font-size: var(--admin-row-primary-size); }
.admin .pick-meta { font-size: var(--admin-row-secondary-size); color: var(--admin-secondary); }
.admin .pick[aria-pressed="true"] { background: var(--brand-tint); box-shadow: inset 0 0 0 2px var(--brand-blue); padding: 18px 20px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: var(--pill-radius); font-size: var(--admin-chip-size); font-weight: 700; white-space: nowrap; }
.chip .icon { width: 16px; height: 16px; }
.chip.success { background: var(--success-tint); color: var(--success-text); }
.chip.warning { background: var(--warning-tint); color: var(--warning-text); }
.chip.danger { background: var(--danger-tint); color: var(--danger-text); }
.chip.brand { background: var(--brand-tint); color: var(--brand-blue-deep); }
.chip.teal { background: var(--teal-tint); color: var(--teal-text); }
.chip.neutral { background: var(--admin-page); color: var(--admin-ink); }
.error-state, .loading { padding: 20px; }
.client .error-state { color: var(--client-danger); background: var(--client-error-tint); }
.admin .error-state { color: var(--danger-text); background: var(--danger-tint); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  button:active, .btn-honey:active { transform: none !important; }
}