/* SHINIMINI Maison. Binding visual reference: design/reference. */
@font-face { font-family: "Instrument Serif"; src: url("/assets/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Variable"; src: url("/assets/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono Variable"; src: url("/assets/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- Tokens: light ("Porcelain") ---------- */
:root {
  --ground: #eceae6;        /* page behind panels */
  --paper: #faf9f7;         /* panels, sidebar, drawers */
  --paper-2: #f3f1ed;       /* inset, hover, table head */
  --raised: #ffffff;        /* floating: menus, popovers */
  --ink: #141210;
  --ink-2: #6a655d;         /* secondary text, 5.6:1 on paper */
  --ink-3: #8f897f;         /* tertiary, labels only (large/bold) */
  --hair: #dcd8d1;          /* hairlines */
  --hair-2: #e7e4de;        /* faint grid */
  --champagne: #a8874e;     /* metal detail: rules, markers, focus */
  --champagne-ink: #7d6232; /* champagne as text, 5.2:1 on paper */
  --cta: #141210;           /* primary action: lacquer */
  --on-cta: #faf9f7;
  --now: #b4573e;           /* current-time line */

  --ok: #3f6b4a;   --ok-bg: #e3ebe2;
  --warn: #8a5a12; --warn-bg: #f3e8d2;
  --bad: #9b3a2e;  --bad-bg: #f4e0dc;
  --info: #3d5a73; --info-bg: #dfe7ee;

  /* Diary tones: fill / edge / text */
  --t-sage: #dfe5da;  --t-sage-e: #7d9474;  --t-sage-i: #33452e;
  --t-clay: #eedfd6;  --t-clay-e: #b57d63;  --t-clay-i: #5e3423;
  --t-mist: #dce3e8;  --t-mist-e: #7a95a8;  --t-mist-i: #2c4252;
  --t-sand: #ece3d1;  --t-sand-e: #b39760;  --t-sand-i: #54431f;
  --t-lilac: #e4dee8; --t-lilac-e: #94809f; --t-lilac-i: #44344f;

  --f-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-ui: "Geist Variable", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (UI 14 base on staff, 16 on customer) */
  --fs-micro: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 40px; --fs-3xl: 64px;

  --r-ctl: 8px; --r-panel: 14px; --r-pill: 999px;
  --sh-float: 0 1px 0 rgba(20,18,16,.04), 0 12px 32px -8px rgba(20,18,16,.18), 0 2px 6px rgba(20,18,16,.06);
  --sh-lift: 0 1px 2px rgba(20,18,16,.06), 0 6px 16px -6px rgba(20,18,16,.12);
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}

/* ---------- Tokens: dark ("Lacquer") ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0c0b0a; --paper: #151412; --paper-2: #1c1a17; --raised: #221f1c;
    --ink: #eeeae3; --ink-2: #a39c91; --ink-3: #7a7369; --hair: #2c2925; --hair-2: #211f1c;
    --champagne: #cfb27e; --champagne-ink: #d8bf90; --cta: #eeeae3; --on-cta: #141210; --now: #e07a5f;
    --ok: #8fbf98; --ok-bg: #1b2a1e; --warn: #e2b467; --warn-bg: #2d2313; --bad: #ec8f80; --bad-bg: #321a16; --info: #95b6d0; --info-bg: #17232d;
    --t-sage: #1d241b; --t-sage-e: #6f8a66; --t-sage-i: #c9d8c2;
    --t-clay: #2a1e18; --t-clay-e: #b07a60; --t-clay-i: #ecd2c4;
    --t-mist: #1a2229; --t-mist-e: #6f8ca0; --t-mist-i: #c9d8e3;
    --t-sand: #282217; --t-sand-e: #a98d55; --t-sand-i: #e8dcc1;
    --t-lilac: #231e28; --t-lilac-e: #8c789a; --t-lilac-i: #ddd0e6;
    --sh-float: 0 0 0 1px rgba(255,255,255,.04), 0 18px 40px -10px rgba(0,0,0,.7);
    --sh-lift: 0 0 0 1px rgba(255,255,255,.03), 0 8px 20px -8px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0c0b0a; --paper: #151412; --paper-2: #1c1a17; --raised: #221f1c;
  --ink: #eeeae3; --ink-2: #a39c91; --ink-3: #7a7369; --hair: #2c2925; --hair-2: #211f1c;
  --champagne: #cfb27e; --champagne-ink: #d8bf90; --cta: #eeeae3; --on-cta: #141210; --now: #e07a5f;
  --ok: #8fbf98; --ok-bg: #1b2a1e; --warn: #e2b467; --warn-bg: #2d2313; --bad: #ec8f80; --bad-bg: #321a16; --info: #95b6d0; --info-bg: #17232d;
  --t-sage: #1d241b; --t-sage-e: #6f8a66; --t-sage-i: #c9d8c2;
  --t-clay: #2a1e18; --t-clay-e: #b07a60; --t-clay-i: #ecd2c4;
  --t-mist: #1a2229; --t-mist-e: #6f8ca0; --t-mist-i: #c9d8e3;
  --t-sand: #282217; --t-sand-e: #a98d55; --t-sand-i: #e8dcc1;
  --t-lilac: #231e28; --t-lilac-e: #8c789a; --t-lilac-i: #ddd0e6;
  --sh-float: 0 0 0 1px rgba(255,255,255,.04), 0 18px 40px -10px rgba(0,0,0,.7);
  --sh-lift: 0 0 0 1px rgba(255,255,255,.03), 0 8px 20px -8px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* Compatibility names retain existing functional view styles. */
:root {
  --bg: var(--ground); --surface: var(--paper); --surface-2: var(--paper-2); --surface-3: var(--hair-2);
  --line: var(--hair-2); --line-strong: var(--hair); --gold: var(--champagne); --gold-ink: var(--champagne-ink);
  --on-gold: var(--on-cta); --gold-soft: var(--paper-2); --ok-soft: var(--ok-bg); --warn-soft: var(--warn-bg);
  --bad-soft: var(--bad-bg); --info-soft: var(--info-bg); --muted-soft: var(--paper-2);
  --brand: #7a5c2e; --on-brand: #ffffff; --brand-ink: var(--brand); --off: var(--paper-2);
  --font: var(--f-ui); --display: var(--f-display); --mono: var(--f-mono);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  --r1: var(--r-ctl); --r2: var(--r-panel); --r3: 18px; --shadow: var(--sh-float); --dur: 160ms;
  --sidebar: 236px; --topbar: 62px;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--font); background: var(--bg); color: var(--ink); }
html.admin body { font-size: 14px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--s3); font-weight: 600; }
h1 { font-family: var(--display); font-weight: 560; font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; } h3 { font-size: .95rem; }
p { margin: 0 0 var(--s3); }
a { color: var(--gold-ink); text-underline-offset: 2px; }
code, pre, kbd { font-family: var(--mono); font-size: .85em; }
kbd { border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface-2); }
pre { white-space: pre-wrap; word-break: break-all; background: var(--surface-2); border: 1px solid var(--line); padding: var(--s2); border-radius: var(--r1); }
.num, .money, time, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); } .small { font-size: .85em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s2); top: -48px; z-index: 100; background: var(--surface); color: var(--ink); padding: var(--s2) var(--s3); border-radius: var(--r1); }
.skip:focus { top: var(--s2); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.icon { flex: none; vertical-align: -3px; }

/* ---------- controls ---------- */
button, .button, .btn { font: inherit; font-weight: 550; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r1); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
button:hover, .button:hover { background: var(--surface-2); }
.btn.primary, button.primary, .button.primary, form button[type="submit"]:not(.ghost):not(.danger) { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn.primary:hover, button.primary:hover, form button[type="submit"]:not(.ghost):not(.danger):hover { background: color-mix(in srgb, var(--gold) 88%, var(--ink)); }
.btn.ghost, button.ghost { background: transparent; }
.btn.danger, button.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: var(--surface); }
.btn.danger.solid { background: var(--bad); color: #fff; border-color: var(--bad); }
html[data-theme="dark"] .btn.danger.solid { color: #1b1914; }
.btn.icon-only, button.icon-only { width: 36px; padding: 0; }
.btn.sm, button.sm { min-height: 30px; padding: 0 10px; font-size: .9em; }
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r1); min-height: 36px; padding: 6px 10px; width: 100%; }
textarea { min-height: 80px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--gold); flex: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }
label { font-weight: 550; display: block; }
label > input, label > select, label > textarea { margin-top: var(--s1); font-weight: 400; }
label.check, .field.check { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 400; }
label.check input, .field.check input { margin-top: 2px; }
.field { display: grid; gap: var(--s1); }
.field small { color: var(--ink-2); }
.field-error { color: var(--bad); font-size: .9em; }
.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.stack > * + * { margin-top: var(--s3); }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; } .grow { flex: 1; min-width: 0; }
.grid2 { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.msg { min-height: 1.4em; margin: var(--s2) 0; } .msg.error, .error { color: var(--bad); } .msg.okay, .okay { color: var(--ok); }

/* ---------- display components ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); min-width: 0; }
.card > h2:first-child { margin-top: 0; }
.cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.chip, .badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--line-strong); background: var(--muted-soft); color: var(--ink); white-space: nowrap; line-height: 1.5; }
.chip::before, .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip.t-ok, .badge.s-confirmed, .badge.s-succeeded, .badge.s-completed, .badge.s-delivered, .badge.s-settled { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.chip.t-warn, .badge.s-pending_deposit, .badge.s-requires_payment, .badge.s-pending, .badge.s-open { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.chip.t-bad, .badge.s-failed, .badge.s-no_show, .badge.s-staff_action_required, .badge.s-revoked { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.chip.t-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.chip.t-muted, .badge.s-cancelled, .badge.s-expired, .badge.s-resolved { background: var(--muted-soft); color: var(--ink-2); }
dl.facts { display: grid; grid-template-columns: minmax(100px, max-content) minmax(0, 1fr); gap: 6px var(--s4); margin: 0; }
dl.facts dt { color: var(--ink-2); } dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); max-width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .8rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; } tr.clickable:hover { background: var(--surface-2); }
.empty { border: 1px dashed var(--line-strong); border-radius: var(--r2); padding: var(--s5); text-align: center; color: var(--ink-2); background: var(--surface); }
.empty p { margin: 0 0 var(--s2); } .empty.error { color: var(--bad); border-color: var(--bad); }
.loading { color: var(--ink-2); }
.notice { border: 1px solid var(--line); border-left: 4px solid var(--gold); padding: var(--s3); border-radius: var(--r1); background: var(--surface); }
.notice.warn { border-left-color: var(--warn); } .notice.bad { border-left-color: var(--bad); } .notice.ok { border-left-color: var(--ok); }
.money-table { width: 100%; } .money-table td { padding: 4px 0; border: 0; } .money-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; } .money-table tr.total td { border-top: 1px solid var(--line); font-weight: 650; padding-top: 8px; }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r1); overflow: hidden; background: var(--surface); max-width: 100%; overflow-x: auto; }
.segmented button { border: 0; border-radius: 0; min-height: 32px; border-right: 1px solid var(--line); background: transparent; font-weight: 500; padding: 0 10px; }
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { background: var(--gold-soft); color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--gold); }
.page-head { display: flex; gap: var(--s3); align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s4); }
.page-head h1 { margin: 0; } .page-head p { margin: 2px 0 0; } .page-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.kpis { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4); }
.kpi span { color: var(--ink-2); font-size: .85rem; } .kpi strong { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; font-weight: 650; }
.list { list-style: none; margin: 0; padding: 0; } .list > li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; } .list > li:last-child { border-bottom: 0; }
.list .t { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 48px; }

/* ---------- overlays: drawer, dialog, toasts, palette ---------- */
.scrim { position: fixed; inset: 0; background: rgb(10 8 4 / .35); z-index: 40; animation: fade var(--dur) var(--ease); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow); z-index: 41; display: flex; flex-direction: column; animation: slide var(--dur) var(--ease); }
.drawer.wide { width: min(720px, 100vw); }
.drawer-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; flex: 1; font-size: 1.05rem; }
.drawer-body { padding: var(--s4); overflow: auto; flex: 1; }
.drawer-body section + section { margin-top: var(--s5); }
.drawer-body h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin-bottom: var(--s2); }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
dialog.confirm { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); color: var(--ink); padding: var(--s5); width: min(420px, calc(100vw - 32px)); box-shadow: var(--shadow); }
dialog.confirm::backdrop { background: rgb(10 8 4 / .4); }
dialog.confirm h2 { margin-top: 0; }
.toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 60; display: grid; gap: var(--s2); width: min(380px, calc(100vw - 32px)); max-height: 35dvh; overflow-y: auto; }
.toast { display: flex; gap: var(--s2); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: var(--r2); padding: var(--s3); box-shadow: var(--shadow); animation: fade var(--dur) var(--ease); }
.toast.ok { border-left-color: var(--ok); } .toast.error { border-left-color: var(--bad); }
.toast p { margin: 0; flex: 1; } .toast button { min-height: 28px; width: 28px; padding: 0; border: 0; }
.palette { position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow); z-index: 70; overflow: hidden; }
.palette input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; min-height: 48px; padding: 0 var(--s4); font-size: 1rem; }
.palette ul { list-style: none; margin: 0; padding: var(--s1); max-height: 50vh; overflow: auto; }
.palette li { padding: var(--s2) var(--s3); border-radius: var(--r1); display: flex; gap: var(--s2); align-items: center; cursor: pointer; }
.palette li[aria-selected="true"] { background: var(--gold-soft); }
.palette li small { margin-left: auto; color: var(--ink-2); }

/* ---------- staff shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: var(--topbar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { grid-row: 1 / 3; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand-mark { display: flex; align-items: center; gap: var(--s2); min-height: var(--topbar); padding: 0 var(--s4); font-weight: 650; border-bottom: 1px solid var(--line); }
.brand-mark::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--gold); transform: rotate(45deg); flex: none; }
.brand-mark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.nav { padding: var(--s2); flex: 1; }
.nav-group + .nav-group { margin-top: var(--s2); }
.nav-group h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: var(--s2) var(--s2) var(--s1); font-weight: 600; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r1); color: var(--ink); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--gold-soft); font-weight: 650; box-shadow: inset 3px 0 0 var(--gold); }
.nav a .icon { color: var(--ink-2); }
.sidebar-foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-2); }
.demo-flag { display: inline-block; font-size: .72rem; font-weight: 650; padding: 0 6px; border-radius: 4px; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.topbar { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; min-width: 0; }
.topbar .biz { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.topbar select.loc { width: auto; max-width: 200px; min-height: 32px; }
.search-box { position: relative; flex: 1; max-width: 420px; min-width: 0; }
.search-box input { padding-left: 32px; min-height: 34px; background: var(--surface-2); border-color: var(--line-strong); }
.search-box > .icon { position: absolute; left: 9px; top: 8px; color: var(--ink-2); pointer-events: none; }
.search-results { position: absolute; top: 40px; left: 0; right: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow); z-index: 50; max-height: 60vh; overflow: auto; padding: var(--s1); }
.search-results h3 { font-size: .72rem; text-transform: uppercase; color: var(--ink-2); margin: var(--s2) var(--s2) var(--s1); }
.search-results a { display: block; padding: 6px var(--s2); border-radius: var(--r1); color: var(--ink); text-decoration: none; }
.search-results a:hover, .search-results a:focus { background: var(--gold-soft); }
.topbar .spacer { flex: 1; }
.alert-count { font-size: .75rem; font-weight: 700; background: var(--bad); color: #fff; border-radius: 999px; padding: 0 6px; line-height: 18px; }
html[data-theme="dark"] .alert-count { color: #1b1914; }
.menu { position: absolute; right: 0; top: 42px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow); min-width: 240px; padding: var(--s1); z-index: 50; }
.menu button, .menu a { display: flex; width: 100%; justify-content: flex-start; border: 0; background: transparent; min-height: 34px; color: var(--ink); text-decoration: none; padding: 0 10px; border-radius: var(--r1); align-items: center; gap: 8px; white-space: normal; text-align: left; }
.menu button:hover, .menu a:hover { background: var(--surface-2); }
.menu .menu-head { padding: 6px 10px; font-size: .85rem; color: var(--ink-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s1); }
.rel { position: relative; }
.content { padding: var(--s5) var(--s6); min-width: 0; }
.content:focus { outline: none; }
.menu-btn { display: none; }
@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 85vw); z-index: 45; transform: translateX(-105%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility var(--dur); box-shadow: var(--shadow); }
  .shell.nav-open .sidebar { transform: none; visibility: visible; }
  .menu-btn { display: inline-flex; }
  .content { padding: var(--s4); }
  #profile-btn .hide-sm { display: none; }
  .topbar .biz { display: none; }
}
@media (max-width: 700px) {
  .topbar { gap: var(--s1); padding: 0 var(--s2); }
  .topbar .biz, .topbar select.loc, .hide-sm { display: none !important; }
  .search-box { max-width: none; }
  .content { padding: var(--s3); }
  h1 { font-size: 1.35rem; }
  .toasts { right: var(--s4); left: var(--s4); width: auto; }
}

/* ---------- calendar ---------- */
.cal-toolbar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s3); }
.cal-toolbar h1 { margin: 0 var(--s2) 0 0; font-size: 1.35rem; }
.cal-toolbar input[type="date"] { width: auto; }
.legend { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); font-size: .85rem; align-items: center; }
.cal-filters { margin-bottom: var(--s3); }
.cal-filters fieldset { border: 0; padding: 0; margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.cal-filters legend { font-weight: 600; margin-bottom: var(--s1); width: 100%; }
.cal-scroll { overflow: auto; max-height: calc(100vh - 230px); min-height: 360px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); position: relative; overscroll-behavior: contain; }
.cal-grid { display: grid; position: relative; min-width: 100%; }
.cal-corner, .cal-colhead { position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line); height: 48px; padding: 6px 8px; font-weight: 600; font-size: .85rem; overflow: hidden; }
.cal-corner { left: 0; z-index: 6; border-right: 1px solid var(--line); font-weight: 500; font-size: .7rem; color: var(--ink-2); }
.cal-colhead { border-left: 1px solid var(--line); white-space: nowrap; text-overflow: ellipsis; }
.cal-colhead small { display: block; font-weight: 400; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.cal-colhead.today { box-shadow: inset 0 -3px 0 var(--gold); }
.cal-gutter { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line); }
.cal-gutter span { position: absolute; right: 6px; font-size: .72rem; color: var(--ink-2); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.cal-gutter span:first-child { transform: none; }
.cal-col { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% var(--hour); }
.cal-col .off { position: absolute; left: 0; right: 0; background-color: var(--off); background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--line-strong) 45%, transparent) 6px 7px); pointer-events: none; }
.cal-col.drop-target { background-color: color-mix(in srgb, var(--gold) 8%, transparent); }
.slot-btn { position: absolute; left: 0; right: 0; border: 0; border-radius: 0; background: transparent; min-height: 0; padding: 0; opacity: 0; justify-content: flex-start; font-size: .72rem; color: var(--gold-ink); }
.slot-btn:hover, .slot-btn:focus-visible { opacity: 1; background: color-mix(in srgb, var(--gold) 14%, transparent); outline-offset: -2px; }
.appt { position: absolute; left: 3px; right: 3px; border-radius: var(--r1); border: 1px solid var(--line-strong); border-left: 4px solid var(--gold); background: var(--surface); padding: 3px 6px 7px; font-size: .78rem; line-height: 1.3; overflow: hidden; cursor: grab; z-index: 2; touch-action: none; user-select: none; color: var(--ink); text-align: left; box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.appt:hover, .appt:focus-visible { z-index: 3; box-shadow: var(--shadow); }
.appt strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.appt .meta { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.appt .chip { font-size: .68rem; padding: 0 5px; margin-top: 2px; }
.appt.st-confirmed { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok-soft) 70%, var(--surface)); }
.appt.st-pending_deposit { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 80%, var(--surface)); border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; }
.appt.st-completed { border-left-color: var(--info); background: color-mix(in srgb, var(--info-soft) 70%, var(--surface)); }
.appt.st-no_show { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad-soft) 70%, var(--surface)); }
.appt.dragging, .appt.previewing { opacity: .9; box-shadow: var(--shadow); z-index: 5; outline: 2px dashed var(--gold); }
.appt.pending-save { opacity: .7; }
.appt .resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.appt .resize::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 2px; margin-left: -9px; border-radius: 1px; background: var(--ink-2); }
.now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--now); z-index: 4; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--now); }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--surface); }
.cal-month .dow { padding: 6px 8px; font-size: .75rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cal-month .day { min-height: 104px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-month .day.other { background: var(--surface-2); }
.cal-month .day.today .dnum { background: var(--gold); color: var(--on-gold); border-radius: 999px; }
.cal-month .dnum { font-size: .8rem; font-weight: 600; align-self: flex-start; border: 0; background: transparent; min-height: 24px; padding: 0 6px; }
.cal-month .mitem { font-size: .74rem; text-align: left; min-height: 0; padding: 1px 4px; border: 0; border-left: 3px solid var(--gold); border-radius: 3px; background: var(--surface-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; width: 100%; font-weight: 500; }
.cal-month .mitem.st-pending_deposit { border-left-color: var(--warn); } .cal-month .mitem.st-confirmed { border-left-color: var(--ok); } .cal-month .mitem.st-completed { border-left-color: var(--info); } .cal-month .mitem.st-no_show { border-left-color: var(--bad); }
.agenda-day h2 { padding: var(--s2) 0; margin: 0; }
.agenda-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); margin-bottom: var(--s2); text-align: left; width: 100%; justify-content: stretch; min-height: 0; font-weight: 400; white-space: normal; }
.agenda-item .t { font-variant-numeric: tabular-nums; font-weight: 650; }
@media (max-width: 700px) { .cal-month .day { min-height: 64px; padding: 2px; } .cal-month .mitem { font-size: .65rem; } .agenda-item { grid-template-columns: 64px minmax(0, 1fr); } .agenda-item .chip { grid-column: 2; justify-self: start; } .cal-scroll { max-height: calc(100vh - 280px); } }

/* ---------- server pages (login, signup, checkout) ---------- */
.bar { display: flex; gap: var(--s3); align-items: center; padding: 0 var(--s5); min-height: 56px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.logo { font-weight: 650; color: var(--ink); text-decoration: none; margin-right: auto; display: inline-flex; align-items: center; gap: var(--s2); }
html.admin .logo::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--gold); transform: rotate(45deg); }
.testbar { background: var(--warn-soft); color: var(--warn); border-bottom: 2px solid var(--warn); }
main.narrow { max-width: 760px; margin: var(--s6) auto; padding: 0 var(--s4); }
main.auth { max-width: 440px; margin: 8vh auto; padding: 0 var(--s4); }
main.auth form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s6); }
main.wide { max-width: 1400px; margin: var(--s4) auto; padding: 0 var(--s4); }
.foot { text-align: center; color: var(--ink-2); font-size: .85rem; padding: var(--s6) var(--s4); }
.links li { margin: var(--s2) 0; }

/* ---------- customer booking (Explore) ---------- */
html.customer body { font-size: 16px; }
.bk-head { background: var(--brand); color: var(--on-brand); }
.bk-head-in { max-width: 1120px; margin: 0 auto; padding: var(--s4); display: flex; align-items: center; gap: var(--s3); }
.bk-head .bk-name { font-family: var(--display); font-weight: 560; font-size: 1.4rem; margin: 0; color: var(--on-brand); flex: 1; }
.bk-head button { background: transparent; color: var(--on-brand); border-color: currentColor; }
.bk-head button:hover { background: color-mix(in srgb, var(--on-brand) 14%, transparent); }
.bk-wrap { max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
.bk-main h1 { font-size: 1.45rem; margin-bottom: var(--s3); }
.bk-main h1:focus { outline: none; }
.progress { display: flex; gap: var(--s1); list-style: none; padding: 0; margin: 0 0 var(--s4); font-size: .85rem; color: var(--ink-2); }
.progress li { flex: 1; border-top: 3px solid var(--line-strong); padding-top: 6px; }
.progress li.done { border-top-color: var(--brand-ink); }
.progress li[aria-current="step"] { border-top-color: var(--brand-ink); color: var(--ink); font-weight: 650; }
.bk-tools { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); align-items: center; }
.bk-tools .search-box { max-width: none; flex: 1 1 220px; }
.bk-tools select { width: auto; flex: 1 1 200px; }
.filters { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s3); }
.filters button { min-height: 32px; border-radius: 999px; font-weight: 500; }
@media (max-width: 860px) { .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: x proximity; } .filters button { flex: 0 0 auto; min-height: 40px; scroll-snap-align: start; } }
.filters button[aria-pressed="true"], .svc button[aria-pressed="true"], .days button[aria-pressed="true"], .slot[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.svc-list { display: grid; gap: var(--s2); }
.svc-groups { display: grid; gap: var(--s4); }
.extras { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s2) var(--s3); margin-top: var(--s2); display: grid; gap: var(--s1); }
.extras legend { font-weight: 600; padding: 0 var(--s1); }
.extras .check { display: flex; align-items: center; gap: var(--s2); min-height: 44px; }
.svc-cat { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s2) 0; font-weight: 600; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4); }
.svc.selected { border-color: var(--brand-ink); box-shadow: inset 4px 0 0 var(--brand-ink); }
.svc h3 { margin: 0 0 2px; font-size: 1rem; } .svc p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.svc .facts-line { font-size: .88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: 4px; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s1); margin-bottom: var(--s3); }
.days button { flex-direction: column; min-height: 58px; padding: 4px 2px; gap: 0; font-weight: 500; font-size: .85rem; }
.days button strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: var(--s2); }
.slot { font-variant-numeric: tabular-nums; }
.summary { position: sticky; top: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s4); }
.summary h2 { font-size: 1rem; }
.summary ul { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.summary li { display: flex; justify-content: space-between; gap: var(--s2); padding: 4px 0; border-bottom: 1px solid var(--line); }
.summary .cta { width: 100%; margin-top: var(--s3); min-height: 44px; }
.summary .rule { font-size: .85rem; color: var(--ink-2); margin-top: var(--s2); }
.customer .btn.primary, .customer button.primary, .customer form button[type="submit"]:not(.ghost), .customer a.button.primary { background: var(--cta); border-color: var(--cta); color: var(--on-cta); }
.customer .btn.primary:hover, .customer button.primary:hover, .customer form button[type="submit"]:not(.ghost):hover { background: var(--cta); filter: brightness(1.15); }
.customer a, .customer .svc.selected { --gold-ink: var(--brand-ink); }
.customer a { color: var(--brand-ink); }
.customer a.button:not(.primary), .customer a.btn:not(.primary) { color: var(--ink); }
@media (min-width: 600px) { .search-box { min-width: 160px; } }
.mobile-bar { display: none; }
@media (max-width: 860px) {
  .bk-wrap { grid-template-columns: minmax(0, 1fr); padding-bottom: 140px; }
  .summary { position: static; }
  .summary .cta { display: none; }
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgb(0 0 0 / .08); }
  .mobile-bar .mb-text { flex: 1; min-width: 0; font-size: .9rem; }
  .mobile-bar .mb-text strong { display: block; font-variant-numeric: tabular-nums; }
  .mobile-bar button { min-height: 46px; }
  .bk-head .bk-name { font-size: 1.15rem; }
  .svc { grid-template-columns: minmax(0, 1fr); }
}
.state-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s5); }
.state-card .state-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--s2); }
.state-card.ok .state-icon { background: var(--ok-soft); color: var(--ok); } .state-card.warn .state-icon { background: var(--warn-soft); color: var(--warn); } .state-card.bad .state-icon { background: var(--bad-soft); color: var(--bad); } .state-card.info .state-icon { background: var(--info-soft); color: var(--info); }
@media print { .bk-head button, .mobile-bar, .actions-row { display: none !important; } }

/* Payments and billing views */
.plan-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plan-grid .card { margin: 0; }
.row.wrap { flex-wrap: wrap; }
#rec-items > li { margin-bottom: 12px; }

/* Diary: compact view menu and collapsible help on phones */
.view-select { display: none; }
.show-sm { display: none !important; }
/* Configure: a quiet index and an ordered document, not an equal-weight card grid. */
.eyebrow { display: block; font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); margin-bottom: var(--s2); }
.configure-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s8); max-width: 1100px; }
.configure-index { position: sticky; top: calc(var(--topbar) + 24px); align-self: start; display: grid; gap: var(--s3); padding-top: var(--s5); }
.configure-index h2 { font-family: var(--display); font-size: 1.4rem; font-weight: 450; overflow-wrap: anywhere; }
.configure-index a { display: block; text-decoration: none; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.saved-state { color: var(--ok); font-size: .85rem; }
.setup-pane { margin-top: var(--s6); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.section-heading h2 { margin: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 450; }
.location-list { background: var(--surface); border-top: 1px solid var(--line-strong); }
.location-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s6); width: 100%; padding: var(--s6); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; white-space: normal; justify-content: stretch; }
.location-row strong { display: block; font-family: var(--display); font-weight: 450; font-size: 1.5rem; margin-bottom: var(--s2); }
.location-row .muted { display: block; }
.interval-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto 90px auto; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
@media (max-width: 700px) { .location-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s4); } .location-row > .muted { grid-row: 2; } .interval-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .interval-row select { grid-column: 1 / 4; } .interval-row button { grid-column: 1 / 4; } }
.configure-sections { min-width: 0; }
.configure-section { background: var(--surface); padding: var(--s7); border-top: 1px solid var(--line-strong); margin-bottom: var(--s7); }
.configure-section .section-caption { padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.section-caption h2 { font-family: var(--display); font-size: 1.7rem; font-weight: 450; }
.configure-section .form { max-width: 620px; }
@media (max-width: 1000px) { .configure-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .configure-index { position: static; padding-top: 0; } .configure-index a, .configure-index h2, .configure-index .muted { display: none; } }
@media (max-width: 700px) { .configure-section { padding: var(--s5) var(--s4); } }
@media (max-width: 700px) { .show-sm { display: flex !important; } .topbar .search-box { flex: 1 1 auto; min-width: 0; } .topbar .spacer { display: none; } }
.cal-help-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s1) 0 var(--s2); }
.cal-help summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 0.875rem; }
.cal-help[open] { flex-basis: 100%; }
.cal-help .legend { margin-top: var(--s1); }
.scroll-hint { display: none; margin: 0; }
@media (max-width: 700px) {
  .view-pick .segmented { display: none; }
  .view-select { display: block; min-height: 44px; }
  .scroll-hint { display: inline-flex; align-items: center; gap: 4px; }
}

/* Editorial atelier: composed catalogue, compact operating chrome and document-like detail. */

.workspace-mark { color: var(--gold-ink); font-family: var(--display); font-size: 1.25rem; letter-spacing: .11em; font-weight: 550; text-decoration: none; }
.brand-mark { min-height: var(--topbar); padding: 18px 20px; border-bottom: 1px solid var(--line); }
.sidebar { background: var(--surface); }
.nav-group { margin-bottom: 18px; }
.nav-group h2 { letter-spacing: .14em; font-size: .64rem; }
.nav a { min-height: 38px; border-radius: 3px; }
.nav a[aria-current="page"] { background: var(--surface-2); color: var(--gold-ink); border-left-color: transparent; font-weight: 650; }
.topbar { background: var(--surface); gap: 12px; box-shadow: none; }
.topbar .biz { font-size: .82rem; font-weight: 550; }
.view { padding-top: 26px; }
.page-header h1 { font-family: var(--display); font-size: 2rem; font-weight: 430; letter-spacing: -.025em; }
.cal-controls { background: var(--surface); padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; }
.cal-scroll { border-radius: 5px; box-shadow: none; }
.cal-colhead { font-weight: 650; background: var(--surface-2); border-bottom-color: var(--line-strong); }
.cal-colhead small { font-size: .7rem; font-weight: 450; }
.cal-gutter { background: var(--surface); }
.appt { border-radius: 4px; box-shadow: none; padding: 5px 7px; font-size: .76rem; }
.appt strong { font-weight: 650; letter-spacing: -.015em; }
.appt .meta { font-size: .68rem; line-height: 1.5; }
.appt .chip { font-size: .61rem; padding: 1px 4px; }
.bk-head { background: var(--surface); color: var(--ink); border-top: 4px solid var(--brand); border-bottom: 1px solid var(--line); }
.bk-head .bk-name { color: var(--ink); font-size: 1.05rem; font-weight: 430; }
.bk-head button { color: var(--ink); border-color: var(--line); }
.bk-wrap { max-width: 1220px; grid-template-columns: minmax(0, 1fr) 310px; gap: 36px 64px; padding: 40px 40px 80px; }
.booking-identity { grid-column: 1 / -1; border-bottom: 1px solid var(--line-strong); padding: 0 0 28px; }
.booking-identity h2 { font-family: var(--display); font-weight: 430; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.15; letter-spacing: -.025em; margin-bottom: 12px; max-width: 780px; }
.booking-identity > p:not(.eyebrow) { color: var(--ink-2); max-width: 600px; margin: 0; }
.bk-main h1 { font-family: var(--display); font-weight: 430; font-size: 1.9rem; }
.progress { max-width: 560px; font-size: .75rem; margin-bottom: 28px; }
.progress li { border-top-width: 1px; padding-top: 8px; }
.svc-groups { gap: 32px; }
.svc-cat { letter-spacing: .15em; border-bottom: 1px solid var(--line-strong); padding-bottom: 12px; margin-bottom: 0; }
.svc-list { gap: 0; }
.svc { grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 24px 0; }
.svc-index { font-size: .72rem; color: var(--ink-2); align-self: start; padding-top: 5px; font-variant-numeric: tabular-nums; }
.svc h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 450; margin-bottom: 8px; line-height: 1.2; }
.svc-copy p { font-size: .88rem; }
.svc .facts-line { font-size: .76rem; margin-top: 8px; }
.svc-price { font-weight: 500; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc.selected { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); box-shadow: none; border-bottom-color: var(--brand-ink); padding-left: 12px; padding-right: 12px; }
.svc .btn { border-radius: 3px; min-height: 44px; }
.summary { border-radius: 0; border: 1px solid var(--line-strong); border-top: 3px solid var(--brand); padding: 28px; }
.summary h2 { font-family: var(--display); font-size: 1.55rem; font-weight: 430; margin-bottom: 20px; }
.summary .money-table { margin-top: 20px; }
.summary .rule { font-size: .78rem; line-height: 1.65; }
.drawer { border-left: 1px solid var(--line-strong); box-shadow: -8px 0 32px rgb(0 0 0 / .08); }
.drawer-body > section { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 24px; }
.inspect-heading h2 { font-family: var(--display); font-size: 1.9rem; font-weight: 430; margin: 16px 0 8px; }
.profile-heading { display: flex; gap: 20px; align-items: center; padding: 4px 0 24px; border-bottom: 1px solid var(--line-strong); }
.profile-heading h2 { font-family: var(--display); font-size: 2rem; font-weight: 430; margin: 0; }
.profile-initials { width: 64px; height: 76px; flex: 0 0 auto; display: grid; place-items: center; background: var(--surface-2); font-family: var(--display); color: var(--gold-ink); font-size: 1.8rem; }
.money-table { font-variant-numeric: tabular-nums; }
.money-table tr.total { border-top: 1px solid var(--line-strong); }
@media (max-width: 860px) {
  .bk-wrap { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 140px; gap: 28px; }
  .booking-identity { padding-bottom: 20px; }
  .summary { margin-top: 16px; }
  .svc { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; padding: 20px 0; }
  .svc-price { grid-column: 2; justify-self: start; }
  .svc > .btn { grid-column: 3; grid-row: 1 / 3; }
  .view { padding-top: 18px; }
  .page-header h1 { font-size: 1.7rem; }
  .cal-controls { padding: 8px; }
  .profile-heading h2 { font-size: 1.6rem; }
}

/* Software account: a working statement, not a marketing card grid. */
#billing-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .85fr); gap: 20px; align-items: start; }
#billing-body h2 { margin: 0 0 16px; font: 500 1.35rem/1.2 Georgia, 'Times New Roman', serif; }
.billing-mode-note { grid-column: 1 / -1; padding: 14px 0; border-block: 1px solid var(--line); color: var(--ink-2); font-size: .85rem; }
.billing-statement { grid-row: span 2; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.billing-statement-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.billing-statement-head .eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.billing-access { padding-block: 14px; border-block: 1px solid var(--line); }
.billing-access p { margin: 8px 0 0; font-size: .9rem; }
.billing-usage, .billing-benefits { padding: 20px 0; border-top: 1px solid var(--line); }
.billing-journal, .billing-comparison { grid-column: 1 / -1; min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.billing-journal td, .billing-comparison td { vertical-align: top; }
.billing-comparison .money { white-space: nowrap; }
.billing-comparison p { margin: 5px 0 0; }
#billing-body .btn { min-height: 44px; }
#billing-body .table-wrap { max-width: 100%; overflow-x: auto; }
@media (max-width: 900px) {
  #billing-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .billing-statement { grid-row: auto; padding: 20px; }
  .billing-statement-head { flex-wrap: wrap; }
  #billing-body .dl { grid-template-columns: minmax(90px, .7fr) minmax(0, 1fr); }
}

/* Customer collection, time selection, details and booking ticket. */
html.customer body { background: var(--paper); font-size: 16px; }
.bk-head { border-top: 0; border-bottom: 1px solid var(--hair-2); background: var(--paper); }
.bk-head-in { max-width: 1180px; padding: 18px 24px; }
.bk-head .bk-name { font: 400 22px/1 var(--f-display); margin: 0; }
.booking-seal { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--brand-ink); margin-right: 12px; vertical-align: middle; color: var(--ink); font: italic 400 14px/1 var(--f-display); }
.bk-wrap { display: block; max-width: 1180px; padding: 0 24px 96px; }
.booking-identity { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; border: 0; padding: 56px 0 36px; }
.booking-identity h2 { font: 400 clamp(48px, 7vw, 100px)/.92 var(--f-display); letter-spacing: -.025em; margin: 12px 0 0; color: var(--ink); }
.booking-identity h2 em { color: color-mix(in srgb, var(--brand-ink) 45%, var(--ink)); }
.booking-facts { display: grid; gap: 14px; color: var(--ink-2); padding-bottom: 10px; font-size: 14px; }
.booking-facts > div { display: flex; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--hair-2); }
.booking-facts strong { font-weight: 500; min-width: 108px; color: var(--ink); }
.progress { display: flex; gap: 0; margin: 0 0 28px; max-width: none; padding: 0; border-top: 1px solid var(--hair); list-style: none; }
.progress li { flex: 1; display: flex; gap: 10px; align-items: baseline; padding-top: 14px; border: 0; font-size: 13px; color: var(--ink-2); position: relative; }
.progress .step-number { font: italic 400 22px/1 var(--f-display); }
.progress li[aria-current=step] { color: var(--ink); font-weight: 500; }
.progress li[aria-current=step]::before, .progress li.done::before { content: ""; position: absolute; top: -1px; left: 0; right: 12px; height: 2px; background: var(--brand); }
.bk-body { display: grid; grid-template-columns: 170px minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.bk-body.no-cats { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
.bk-categories { position: sticky; top: 80px; }
.bk-categories .filters { display: grid; gap: 2px; }
.bk-categories .filters button { justify-content: flex-start; border: 0; background: transparent; border-radius: 8px; padding: 9px 12px; font-size: 14px; color: var(--ink-2); }
.bk-categories .filters button[aria-pressed=true] { background: color-mix(in srgb, var(--brand) 9%, var(--paper)); color: var(--ink); }
.bk-main h1 { font: 400 40px/1 var(--f-display); margin: 0 0 22px; }
.bk-main { padding-top: 0; min-width: 0; }
.bk-tools { margin-bottom: 20px; }
.svc-cat { font: 400 34px/1.1 var(--f-display); letter-spacing: -.01em; text-transform: none; border: 0; padding: 0; margin: 32px 0 6px; color: var(--ink); }
.svc-group:first-child .svc-cat { margin-top: 16px; }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; padding: 20px 0; border-top: 1px solid var(--hair-2); border-bottom: 0; border-radius: 0; background: transparent; }
.svc:last-child { border-bottom: 1px solid var(--hair-2); }
.svc h3 { font: 400 24px/1.1 var(--f-display); margin: 0; }
.svc-copy p { color: var(--ink-2); margin-top: 6px; font-size: 14.5px; }
.svc .facts-line { margin-top: 8px; color: var(--ink-2); font-size: 12.5px; }
.svc.selected { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 9%, var(--paper)), transparent 80%); border-color: var(--hair-2); padding: 20px 0; }
.svc-price { font-size: 17px; font-weight: 400; }
.svc .btn.service-add { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--hair); background: var(--paper); }
.svc .btn.service-add[aria-pressed=true] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.summary { position: sticky; top: 80px; margin: 0; align-self: start; padding: 26px 26px 22px; background: var(--raised); border: 1px solid var(--hair-2); border-radius: 16px; box-shadow: var(--sh-lift); }
.summary h2 { font: 400 30px/1.05 var(--f-display); margin: 6px 0 16px; }
.summary ul { margin-top: 18px; }
.summary .rule { font-size: 12.5px; padding: 12px 14px; background: var(--paper-2); border-radius: 10px; color: var(--ink-2); line-height: 1.6; margin: 14px 0 16px; }
.summary .cta { width: 100%; min-height: 48px; font-size: 15px; border-radius: 10px; }
.practitioner-options { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 26px; }
.practitioner { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--hair); background: var(--paper); font-size: 13.5px; }
.practitioner[aria-pressed=true] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(56px, 1fr); gap: 8px; overflow-x: auto; margin: 24px 0 18px; padding: 2px 0 6px; }
.days button { height: 86px; border-radius: 12px; border-color: var(--hair-2); background: var(--paper); display: grid; justify-items: center; padding: 10px 0 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.days button strong { font: 400 28px/1 var(--f-display); }
.days button[aria-pressed=true], .slot[aria-pressed=true] { background: var(--cta); color: var(--on-cta); border-color: var(--cta); box-shadow: none; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 26px; }
.slots .slot { height: 44px; border-radius: 10px; font-size: 14.5px; }
#details { background: transparent; border: 0; padding: 0; box-shadow: none; }
#details .field { margin-top: 18px; }
#details .field.check { padding: 14px 0; border-top: 1px solid var(--hair-2); }
.state-card { padding: 32px 0 60px; background: transparent; border: 0; }
.state-card h1 { font: 400 clamp(44px, 6vw, 78px)/.95 var(--f-display); letter-spacing: -.02em; margin-bottom: 26px; }
.state-card .facts { margin: 28px 0; padding: 28px; background: var(--raised); border: 1px solid var(--hair-2); border-radius: 18px; box-shadow: var(--sh-lift); }
.state-card .money-table { max-width: 540px; }
.mobile-bar { background: var(--raised); border-top: 1px solid var(--hair); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px -12px rgba(0,0,0,.18); }
.mobile-bar .mb-text { min-width: 0; }
.mobile-bar .mb-text strong { font: 400 24px/1.1 var(--f-display); display: block; }
.mobile-bar .btn { min-height: 48px; max-width: 54%; padding-inline: 14px; white-space: normal; }
@media (max-width: 1100px) { .bk-body { grid-template-columns: minmax(0, 1fr) 320px; } .bk-categories { display: none; } }
@media (max-width: 760px) {
  .bk-wrap { padding: 0 16px 120px; }
  .bk-head-in { padding: 16px; }
  .booking-identity { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 24px; }
  .booking-identity h2 { font-size: 60px; }
  .bk-body, .bk-body.no-cats { grid-template-columns: 1fr; gap: 24px; }
  .bk-body > .summary { display: none; }
  .bk-main h1 { font-size: 36px; }
  .svc { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .svc-price { grid-column: 1; grid-row: 2; }
  .svc > .btn.service-add { grid-column: 2; grid-row: 1 / span 2; }
  .days { grid-auto-columns: 60px; }
  .bk-main > .row > strong { font-size: 12px; order: -1; flex-basis: 100%; }
  .summary { display: none; }
  .mobile-bar { display: flex; }
  .state-card .facts { padding: 22px; grid-template-columns: 90px 1fr; }
  .progress li { font-size: 12px; gap: 6px; }
}

/* Architectural diary and document-like inspector. */
.cal-toolbar { background: transparent; border: 0; padding: 0 0 20px; gap: 10px; }
.cal-editorial { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-basis: 100%; margin-bottom: 12px; }
.cal-toolbar .cal-editorial h1 { font: 400 44px/1.05 var(--f-display); letter-spacing: -.01em; margin: 10px 0 8px; }
.cal-editorial .btn { min-height: 44px; }
.cal-controls { background: transparent; border: 0; padding: 0; margin-bottom: 18px; gap: 10px; }
.cal-scroll { background: var(--paper); border: 1px solid var(--hair-2); border-radius: 16px; }
.cal-colhead { display: flex; gap: 10px; align-items: center; padding: 12px; background: var(--paper); border-bottom-color: var(--hair); }
.cal-colhead > div { min-width: 0; }
.cal-colhead strong { font-size: 13.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-colhead small { font-size: 11.5px; color: var(--ink-2); }
.cal-gutter, .cal-corner { background: var(--paper); }
.cal-col { border-color: var(--hair-2); }
.appt { --tf: var(--t-sage); --te: var(--t-sage-e); --ti: var(--t-sage-i); border: 1px solid color-mix(in srgb, var(--te) 28%, transparent); background: var(--tf); color: var(--ti); border-radius: 9px; padding: 7px 9px 6px 11px; box-shadow: none; overflow: hidden; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.appt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--te); }
.appt.tone-sage { --tf: var(--t-sage); --te: var(--t-sage-e); --ti: var(--t-sage-i); }
.appt.tone-clay { --tf: var(--t-clay); --te: var(--t-clay-e); --ti: var(--t-clay-i); }
.appt.tone-mist { --tf: var(--t-mist); --te: var(--t-mist-e); --ti: var(--t-mist-i); }
.appt.tone-sand { --tf: var(--t-sand); --te: var(--t-sand-e); --ti: var(--t-sand-i); }
.appt.tone-lilac { --tf: var(--t-lilac); --te: var(--t-lilac-e); --ti: var(--t-lilac-i); }
.appt.st-pending_deposit, .appt.st-confirmed, .appt.st-completed { background: var(--tf); color: var(--ti); }
.appt > .appt-time, .appt > strong, .appt > .meta { flex-shrink: 0; }
.appt-status { position: absolute; right: 6px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.st-pending_deposit .appt-status { background: var(--warn); }
.st-no_show .appt-status { background: var(--bad); }
.appt .appt-time { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.appt strong { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt .meta { font-size: 12px; line-height: 1.4; color: inherit; opacity: 1; }
.appt .chip { position: static; align-self: flex-start; height: 18px; min-height: 18px; font-size: 10px; padding: 1px 6px; background: color-mix(in srgb, var(--paper) 75%, transparent); }
.appt.compact { flex-direction: row; align-items: center; padding-top: 3px; padding-bottom: 3px; gap: 5px; }
.appt.compact .appt-time { max-width: 36px; overflow: hidden; }
.appt.compact .meta { display: none; }
.appt.st-completed { opacity: 1; border-style: dashed; }
.appt.st-no_show { background: repeating-linear-gradient(135deg, var(--tf) 0 8px, color-mix(in srgb, var(--tf) 70%, var(--paper)) 8px 16px); }
.agenda-item { border-radius: 10px; background: var(--paper); border-color: var(--hair-2); padding: 14px; }
.agenda-item strong { font-size: 14px; }
.inspect-heading h2 { font: 400 34px/1.02 var(--f-display); }
.inspect-heading > p strong { font-weight: 500; font-size: 14px; }
.inspect-client { display: flex; gap: 18px; align-items: center; }
.inspect-client > div { min-width: 0; flex: 1; }
.inspect-client .facts { grid-template-columns: 64px 1fr; font-size: 13px; }
.profile-heading { padding-bottom: 22px; border-color: var(--hair-2); }
.profile-heading h2 { font: 400 48px/1 var(--f-display); letter-spacing: -.02em; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
#today-list > li { padding: 16px 0; }
#today-list .t { font: italic 400 24px/1 var(--f-display); min-width: 54px; }
#today-list a { font-weight: 550; color: var(--ink); text-decoration: none; }
.activity-feed { list-style: none; padding: 0; margin: 0; }
.activity-feed li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--hair-2); font-size: 13px; }
.activity-feed time { color: var(--ink-2); font-size: 12px; padding-top: 1px; }
.activity-feed p { margin: 0 0 4px; }
.activity-source { font: 400 11.5px/1.3 var(--f-mono); color: var(--champagne-ink); }
@media (max-width: 900px) { .today-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cal-editorial { align-items: flex-start; flex-wrap: wrap; } .cal-toolbar .cal-editorial h1 { font-size: 34px; } .cal-editorial .btn { margin: 0; } .profile-heading h2 { font-size: 36px; } .profile-heading .avatar { width: 64px; height: 64px; font-size: 26px; } }

/* Maison shared components. Functional legacy class names use the same materials. */
body { font-family: var(--f-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
h1, h2, h3 { font-weight: 400; }
h1, .page-head h1 { font-family: var(--f-display); font-size: 46px; line-height: 1; letter-spacing: -.02em; }
.page-head { margin-bottom: 22px; gap: 20px; }
.page-head p { margin-top: 10px; font-size: 13px; }
.eyebrow { font: 550 11px/1.5 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.btn, button, .button { height: 38px; min-height: 38px; border-radius: var(--r-ctl); border: 1px solid var(--hair); background: var(--paper); color: var(--ink); padding-inline: 16px; font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); }
.btn:hover, button:hover { background: var(--paper-2); border-color: var(--ink-3); }
.btn:active, button:active { transform: translateY(1px); }
.btn.primary, button.primary, .button.primary, form button[type="submit"]:not(.ghost):not(.danger) { background: var(--cta); color: var(--on-cta); border-color: var(--cta); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.18); }
.btn.primary:hover, button.primary:hover, form button[type="submit"]:not(.ghost):not(.danger):hover { background: var(--cta); color: var(--on-cta); border-color: var(--cta); filter: brightness(1.2); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--paper-2); }
.btn.sm { height: 30px; min-height: 30px; padding-inline: 11px; font-size: 12.5px; }
.btn.danger { color: var(--bad); }
.btn.icon-only { width: 38px; padding: 0; }
input, textarea, .select-trigger { border-color: var(--hair); background: var(--raised); border-radius: var(--r-ctl); min-height: 40px; font-weight: 400; }
input:focus, textarea:focus, .select-trigger:focus-visible { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px color-mix(in srgb, var(--champagne) 22%, transparent); }
.field > label { font-size: 12.5px; font-weight: 500; }
.select { position: relative; min-width: 0; }
.select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 0 12px; height: auto; }
.select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chevron { color: var(--ink-2); flex: none; font-size: 18px; }
.control[aria-invalid="true"] .select-trigger { border-color: var(--bad); }
.control.expanded { z-index: 45; }
.listbox, .date-popover { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; min-width: 100%; background: var(--raised); border: 1px solid var(--hair); border-radius: 12px; padding: 6px; box-shadow: var(--sh-float); }
.listbox { display: grid; gap: 2px; max-height: min(320px, 45vh); overflow: auto; min-width: min(220px, 85vw); font-weight: 400; }
.listbox[hidden], .date-popover[hidden] { display: none !important; }
.option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); min-height: 36px; }
.option:hover, .option.active-option { background: var(--paper-2); }
.option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.option .check { margin-left: auto; color: var(--champagne-ink); opacity: 0; }
.option[aria-selected="true"] .check { opacity: 1; }
.date-popover { width: 294px; max-width: calc(100vw - 36px); padding: 12px; }
.date-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.date-head strong { font-weight: 500; font-size: 13px; }
.date-head .btn { padding: 0; width: 32px; }
.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-weekday { text-align: center; color: var(--ink-2); font-size: 11px; padding: 6px 0; }
.date-day { min-height: 34px; height: 34px; padding: 0; border: 0; background: transparent; font-size: 12px; }
.date-day[aria-pressed="true"] { background: var(--cta); color: var(--on-cta); }
.date-day.outside-month { color: var(--ink-2); }
.toggle { position: relative; display: inline-block; width: 36px; height: 22px; flex: none; }
.toggle input { position: absolute; inset: 0; opacity: 0; width: 36px; height: 22px; margin: 0; cursor: pointer; z-index: 1; }
.toggle > span { position: absolute; inset: 0; border-radius: 999px; background: var(--hair); transition: background .18s var(--ease); pointer-events: none; }
.toggle > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--raised); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s var(--ease); }
.toggle input:checked + span { background: var(--cta); }
.toggle input:checked + span::after { transform: translateX(14px); background: var(--on-cta); }
.toggle input:focus-visible + span { outline: 2px solid var(--champagne); outline-offset: 2px; }
.chip, .badge { height: 22px; padding: 0 9px; border: 0; font-size: 11.5px; font-weight: 550; letter-spacing: .01em; background: var(--paper-2); color: var(--ink-2); }
.chip::before, .badge::before { width: 6px; height: 6px; opacity: .9; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--hair-2); }
.segmented button { min-height: 30px; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; color: var(--ink-2); font-size: 13px; }
.segmented button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: var(--sh-lift); font-weight: 500; }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--hair); overflow-x: auto; }
.tabs button { position: relative; height: 40px; border: 0; padding: 0; background: none; color: var(--ink-2); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom: 2px solid var(--champagne); }
.avatar { --a1: #d9cbb4; --a2: #b99c6e; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(120% 120% at 30% 20%, var(--a1), var(--a2)); color: #2a2116; font: 400 16px/1 var(--f-display); letter-spacing: .02em; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px color-mix(in srgb, var(--champagne) 40%, transparent); }
.avatar.sm { width: 26px; height: 26px; font-size: 12px; }
.avatar.lg { width: 64px; height: 64px; font-size: 26px; }
.avatar.xl { width: 88px; height: 88px; font-size: 36px; }
.avatar.a-sage { --a1: #d6dfd0; --a2: #93a989; } .avatar.a-clay { --a1: #ecd6c9; --a2: #c49077; } .avatar.a-mist { --a1: #d5e0e8; --a2: #8ca6b8; } .avatar.a-lilac { --a1: #e3dbe9; --a2: #a592b1; }
.statement .line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--hair); }
.statement .line:last-child { border-bottom: 0; }
.statement .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--ink); }
.statement .total .money { font: 400 34px/1 var(--f-display); letter-spacing: -.02em; }
.money-table td { padding: 9px 0; border-bottom: 1px dashed var(--hair); }
.money-table tr.total td { border-top: 1px solid var(--ink); font-weight: 400; }
.money-table tr.total td:last-child { font: 400 30px/1.15 var(--f-display); }
.card { background: var(--paper); border-color: var(--hair-2); border-radius: var(--r-panel); padding: 22px; }
.card > h2 { font: 400 24px/1.1 var(--f-display); margin-bottom: 18px; }
.table-wrap { background: var(--paper); border-color: var(--hair-2); border-radius: 14px; }
th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 550; padding: 10px 14px; border-color: var(--hair); background: transparent; }
td { padding: 13px 14px; border-color: var(--hair-2); }
.drawer { top: 10px; right: 10px; bottom: 10px; width: min(520px, calc(100vw - 20px)); border: 1px solid var(--hair); border-radius: 18px; background: var(--paper); box-shadow: var(--sh-float); overflow: hidden; }
.drawer-head { padding: 20px 22px 16px; border-color: var(--hair-2); }
.drawer-head h2 { font: 400 26px/1.05 var(--f-display); }
.drawer-body { padding: 20px 22px 22px; }
.drawer-body > section { border-color: var(--hair-2); margin-bottom: 18px; padding-bottom: 18px; }
.drawer-body h3 { font-size: 10.5px; letter-spacing: .14em; font-weight: 550; }
.toast { background: var(--cta); color: var(--on-cta); border: 0; border-radius: 12px; padding: 12px 14px 12px 16px; align-items: center; box-shadow: var(--sh-float); }
.toast .btn { color: var(--on-cta); background: transparent; border-color: color-mix(in srgb, var(--on-cta) 30%, transparent); }
.toast.error { border: 1px solid var(--bad); }
.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 24px; border: 0; background: transparent; }
.empty p { max-width: 38ch; color: var(--ink-2); }
.empty-mark { font: 400 30px/1 var(--f-display); color: var(--champagne-ink); }
.skeleton { border-radius: 6px; background: linear-gradient(90deg, var(--paper-2), var(--hair-2), var(--paper-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.content { padding: 0; }
.view { padding: 28px 28px 64px; }
.workspace-mark { color: var(--ink); font: 400 22px/1 var(--f-display); letter-spacing: .02em; }
.brand-mark { border-bottom-color: var(--hair-2); }
.brand-mark::before { width: 8px; height: 8px; border-radius: 0; background: var(--champagne); }
.nav { padding: 18px 14px; }
.nav a { color: var(--ink-2); border-radius: 8px; font-size: 13.5px; font-weight: 450; }
.nav a[aria-current="page"] { background: var(--paper-2); color: var(--ink); font-weight: 550; box-shadow: none; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 2px; background: var(--champagne); }
.nav a { position: relative; }
.topbar { padding: 12px 28px; border-color: var(--hair-2); background: color-mix(in srgb, var(--ground) 70%, var(--paper)); }
.topbar .loc { max-width: 190px; flex: 0 1 190px; }
.example { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.notice { border: 0; border-radius: 10px; padding: 12px 14px; background: var(--paper-2); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); margin-bottom: 22px; }
.kpi { background: transparent; border: 0; border-radius: 0; padding: 16px 18px 16px 0; }
.kpi + .kpi { padding-left: 18px; border-left: 1px solid var(--hair-2); }
.kpi strong { font: 400 40px/1.05 var(--f-display); letter-spacing: -.02em; margin-top: 5px; }
#billing-body h2 { font: 400 28px/1.1 var(--f-display); }
.billing-statement { border: 1px solid var(--hair-2); border-radius: 16px; }
@media (max-width: 760px) {
  .view { padding: 20px 16px 100px; }
  .page-head h1, h1 { font-size: 36px; }
  .topbar { padding: 10px 16px; }
  .btn, button, .select-trigger, input:not([type=checkbox]):not([type=hidden]), .option { min-height: 44px; height: auto; }
  .btn.icon-only { width: 44px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(3) { padding-left: 0; border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--hair-2); }
  .kpi strong { font-size: 32px; }
  .card { padding: 18px; }
  .drawer { top: 6px; right: 6px; bottom: 6px; width: calc(100vw - 12px); }
  .drawer.wide { width: calc(100vw - 12px); }
  .date-day { min-height: 34px; height: 34px; }
}