/* ==========================================================================
   SMM Panel — design system
   Porcelain canvas, white surfaces, one jade brand colour. Inter for the
   interface (tabular figures for data), Panel Display (a SemiExpanded cut of
   Mona Sans) for titles and money, Mukta for Devanagari.
   Signature: an engraved line texture, used only on the wallet, the public
   hero, the sign-in aside and the closing call to action.
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Panel Display"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/panel-display-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/mukta-devanagari-400-normal.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/mukta-devanagari-600-normal.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

/* ---------- Tokens ---------- */
:root {
  --brand: #0b7a75;
  --brand-hover: #09625e;
  --brand-ink: #ffffff;
  --brand-50: #ecf6f5;
  --brand-100: #d3ebe8;
  --brand-200: #a6d8d3;
  --live: #f2a20c;

  --paper: #ffffff;
  --paper-2: #fafbfb;   /* table heads, footers: one step off white */
  --canvas: #f3f6f6;    /* porcelain */
  --sunken: #f0f3f4;
  --ink: #0c1a1e;
  --ink-2: #2f3e44;
  --muted: #56666c;
  --faint: #5d6c72;     /* 4.5:1 or better on every light surface (WCAG AA) */
  --line: #e2e8e9;
  --line-soft: #ecf0f1;
  --line-strong: #cdd6d8;

  --green: #137a39; --green-bg: #e6f6ec;
  --blue: #1d4ed8; --blue-bg: #e7eefe;
  --indigo: #4338ca; --indigo-bg: #ebebfd;
  --amber: #a5560a; --amber-bg: #fdf1d9;
  --orange: #c2410c; --orange-bg: #fff0e5;
  --red: #b42318; --red-bg: #fdecea;
  --purple: #6d28d9; --purple-bg: #f1eafe;
  --gray: #475467; --gray-bg: #eef1f3;

  /* Elevation: hairline panels (1), raised and hovered cards (2), menus and toasts (3), dialogs (4). */
  --e1: 0 1px 2px rgba(12, 26, 30, .045);
  --e2: 0 1px 2px rgba(12, 26, 30, .05), 0 8px 24px -12px rgba(12, 26, 30, .16);
  --e3: 0 2px 6px rgba(12, 26, 30, .05), 0 18px 40px -12px rgba(12, 26, 30, .22);
  --e4: 0 4px 12px rgba(12, 26, 30, .06), 0 32px 72px -16px rgba(12, 26, 30, .34);
  --focus: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent);
  --ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand);
  --shadow-pop: var(--e3);
  --shadow-sheet: 0 -12px 48px -16px rgba(12, 26, 30, .3);

  --font: "Inter", "Mukta", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --font-display: "Panel Display", "Inter", "Mukta", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --rf: 1;              /* corner scale (Admin → Appearance: sharp .45, standard 1, round 1.35) */
  --r-xs: calc(6px * var(--rf, 1));
  --r-sm: calc(8px * var(--rf, 1));
  --r-md: calc(10px * var(--rf, 1));
  --r-lg: calc(14px * var(--rf, 1));
  --r-xl: calc(20px * var(--rf, 1));
  --sheet-r: calc(18px * var(--rf, 1));

  --sidebar-w: 272px;
  --topbar-h: 64px;
  --bottom-h: 66px;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

/* Optional dark theme (off unless staff allow it under Settings, Branding). */
:root[data-theme="dark"] {
  --brand: #2fb3a9;
  --brand-hover: #4cc6bc;
  --brand-ink: #04211f;
  --brand-50: #0f2a29;
  --brand-100: #15403d;
  --brand-200: #1f5c58;
  --paper: #141b21;
  --paper-2: #161e24;
  --canvas: #0e1418;
  --sunken: #11181d;
  --ink: #e8eef1;
  --ink-2: #c6d0d6;
  --muted: #98a4ad;
  --faint: #86919a;
  --line: #243038;
  --line-soft: #1e282f;
  --line-strong: #33424c;
  --green: #4ade80; --green-bg: #12301f;
  --blue: #7aa2ff; --blue-bg: #17264a;
  --indigo: #a5a6ff; --indigo-bg: #22224a;
  --amber: #f5b454; --amber-bg: #3a2a0f;
  --orange: #fb9b5b; --orange-bg: #3a2010;
  --red: #f87171; --red-bg: #3c1616;
  --purple: #c4a1ff; --purple-bg: #2a1d47;
  --gray: #a9b4bc; --gray-bg: #1f2930;
  --e1: 0 1px 2px rgba(0, 0, 0, .3);
  --e2: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -12px rgba(0, 0, 0, .6);
  --e3: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 44px -12px rgba(0, 0, 0, .7);
  --e4: 0 4px 12px rgba(0, 0, 0, .4), 0 32px 72px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }
/* Keyboard focus never hides under the bars fixed to the bottom of the screen (WCAG 2.2, 2.4.11): when the browser
   scrolls a focused control into view, it keeps this much room free above them. The contact button counts too: it
   covers the bottom-right corner of every page it is shown on. */
html:has(.contact-fab) { scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) {
  html:has(.bottom-nav) { scroll-padding-bottom: calc(var(--bottom-h) + 16px + env(safe-area-inset-bottom)); }
  html:has(.bottom-nav):has(.contact-fab) { scroll-padding-bottom: calc(var(--bottom-h) + 84px + env(safe-area-inset-bottom)); }
  html:has(.bottom-nav):has(.save-bar, .order-bar) { scroll-padding-bottom: calc(var(--bottom-h) + 88px + env(safe-area-inset-bottom)); }
  html:has(.bottom-nav):has(.ap-save) { scroll-padding-bottom: calc(var(--bottom-h) + 136px + env(safe-area-inset-bottom)); }
  html:has(.bottom-nav):has(.bulk-bar.show) { scroll-padding-bottom: calc(var(--bottom-h) + 212px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) { html:has(.save-bar, .ap-save, .bulk-bar.show) { scroll-padding-bottom: 96px; } }
@media (min-width: 768px) and (max-width: 1099px) { html:has(.order-bar) { scroll-padding-bottom: 96px; } }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 15px/1.55 var(--font); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
}
body.public, body.auth { background: var(--paper); }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
/* Links inside running text are underlined so they never rely on colour alone (WCAG 1.4.1). */
p a:not(.btn):not(.chip):not(.badge), .auth-foot a, .auth-legal a, .prose a:not(.btn), .help a, .hint a, .sub a, .desc a, td p a, .check-row a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
p a:not(.btn):not(.chip):not(.badge):hover, .auth-foot a:hover, .auth-legal a:hover, .prose a:not(.btn):hover { text-decoration-color: currentColor; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); line-height: 1.25; font-weight: 650; letter-spacing: -0.011em; }
/* Page titles use the display face; smaller UI headings (panels, dialogs) stay in Inter for legibility. */
h1 { font-family: var(--font-display); font-weight: 620; font-size: 1.7rem; letter-spacing: -0.022em; line-height: 1.15; text-wrap: balance; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }
small, .small { font-size: .84rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: .86em; }
code { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-xs); padding: .1em .38em; word-break: break-word; }
pre { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; overflow: auto; line-height: 1.55; }
pre code { background: none; border: 0; padding: 0; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: calc(6px * var(--rf, 1)); padding: 0 .35em; background: var(--paper); color: var(--muted); font-size: .72rem; line-height: 1; }
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: calc(4px * var(--rf, 1)); }
.num, .tabular { font-variant-numeric: tabular-nums; }
/* The display face keeps its default glyphs: no Inter stylistic sets, and proportional figures (its tabular zero is slashed). */
h1, .brand-name, .wallet-card .amount, .stat .value, .balance-hero .figure, .summary-total .figure, .order-bar .amt strong, .prose h2,
.auth-aside h2, .account-balance strong, .pf-card-name, .pop-price strong, .section-head h2, .step::before, .cta-band h2 { font-feature-settings: normal; }
.stat .value.num, .stat .value .num, .balance-hero .figure .num, .summary-total .figure .num { font-variant-numeric: normal; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon-sm { width: 15px; height: 15px; vertical-align: -2px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 28px; height: 28px; }
.skip-link { position: absolute; left: 12px; top: -120px; z-index: 200; background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); font-weight: 600; }
.skip-link:focus { top: 12px; color: var(--ink); text-decoration: none; box-shadow: var(--e3); }
.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; }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Signature: engraved line texture ----------
   Fine wave lines and a guilloche rosette, drawn in the brand colour through a CSS mask so a custom brand
   colour carries over. Decorative only; the pseudo-elements sit behind the content. */
.engraved, .wallet-card, .balance-hero, .cta-band, .auth-aside, .hero { position: relative; isolation: isolate; }
.engraved, .wallet-card, .balance-hero, .cta-band, .auth-aside { overflow: hidden; }
.engraved::before, .wallet-card::before, .balance-hero::before, .cta-band::before, .auth-aside::before, .hero::before,
.engraved::after, .wallet-card::after, .balance-hero::after, .cta-band::after, .auth-aside::after, .hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--brand);
}
.engraved::before, .wallet-card::before, .balance-hero::before, .cta-band::before, .auth-aside::before, .hero::before {
  inset: 0; opacity: .14;
  -webkit-mask-image: url("../img/engrave-waves.svg?v=1"), linear-gradient(200deg, #000 12%, transparent 78%);
  mask-image: url("../img/engrave-waves.svg?v=1"), linear-gradient(200deg, #000 12%, transparent 78%);
  -webkit-mask-size: 480px 96px, 100% 100%; mask-size: 480px 96px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.engraved::after, .wallet-card::after, .balance-hero::after, .cta-band::after, .auth-aside::after, .hero::after {
  width: 240px; height: 240px; right: -84px; top: -92px; opacity: .2;
  -webkit-mask: url("../img/engrave-rosette.svg?v=1") center / contain no-repeat; mask: url("../img/engrave-rosette.svg?v=1") center / contain no-repeat;
}

/* ---------- App shell ----------
   Phones and tablets: white top bar over the porcelain canvas, a slide-in menu and a bottom bar.
   Desktop: the menu sits on the canvas and the page is an inset white sheet. */
.app { min-height: 100vh; min-height: 100dvh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--sidebar-w); max-width: calc(100vw - 40px);
  background: var(--paper); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  transform: translateX(-104%); transition: transform .28s var(--ease), visibility 0s linear .28s; padding-bottom: env(safe-area-inset-bottom);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  visibility: hidden; /* closed, it is out of the keyboard order and hidden from screen readers too */
}
.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--e4); visibility: visible; transition: transform .28s var(--ease), visibility 0s; }
/* The menu scrolls as a whole when it is taller than the screen; its parts never shrink (the wallet card clips its texture). */
.sidebar > * { flex-shrink: 0; }
.sidebar-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(12, 26, 30, .34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .22s; }
.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
.app-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 1024px) {
  .sidebar { transform: none; box-shadow: none !important; background: transparent; border-radius: 0; padding-top: 10px; max-width: none; visibility: visible; }
  .sidebar-scrim { display: none; }
  .app-main {
    margin: 10px 10px 10px var(--sidebar-w); min-height: calc(100vh - 20px); min-height: calc(100dvh - 20px);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--sheet-r); box-shadow: var(--e1);
  }
}

.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 20px; min-height: var(--topbar-h); }
.sidebar-close { margin-left: auto; }
@media (min-width: 1024px) { .sidebar .sidebar-close { display: none; } }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; min-width: 0; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand img { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.brand-mark {
  width: 32px; height: 32px; border-radius: calc(10px * var(--rf, 1)); display: grid; place-items: center; flex: none; color: var(--brand-ink);
  background: var(--brand) linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px -2px color-mix(in srgb, var(--brand) 60%, transparent);
}
.brand-mark svg { width: 18px; height: 18px; stroke-width: 2.4; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; }

/* Wallet: the signature card at the top of the menu. */
.wallet-card {
  margin: 2px 14px 14px; padding: 15px 16px 16px; border: 1px solid var(--line); border-radius: calc(16px * var(--rf, 1));
  background: linear-gradient(160deg, var(--paper) 40%, color-mix(in srgb, var(--brand-50) 80%, var(--paper)));
  box-shadow: var(--e1);
}
.wallet-card::after { width: 190px; height: 190px; right: -70px; top: -78px; }
.wallet-card .label { font-size: .78rem; font-weight: 550; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wallet-card .amount { font-family: var(--font-display); font-weight: 620; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.15; margin: 6px 0 2px; overflow-wrap: anywhere; color: var(--ink); }
.wallet-card .bonus { font-size: .76rem; color: var(--muted); line-height: 1.45; }
.wallet-card .btn { margin-top: 12px; width: 100%; }

.nav { padding: 4px 12px 16px; flex: 1 0 auto; }
.nav-group + .nav-group { margin-top: 16px; }
.nav-label { font-size: .74rem; font-weight: 600; color: var(--faint); padding: 0 10px 6px; margin: 0; letter-spacing: .005em; }
.nav-link {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-md);
  color: var(--ink-2); font-weight: 520; font-size: .9rem; position: relative; min-height: 38px;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.nav-link .icon { color: var(--faint); transition: color .15s; }
.nav-link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); text-decoration: none; }
.nav-link:hover .icon { color: var(--ink-2); }
.nav-link.active { background: var(--brand-50); color: var(--brand-hover); font-weight: 600; }
.nav-link.active .icon { color: var(--brand); }
@media (min-width: 1024px) {
  /* On the canvas the current page is a raised white tab. */
  .nav-link.active { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--e1); }
}
.nav-link .count { margin-left: auto; font-size: .7rem; font-weight: 650; background: var(--brand); color: var(--brand-ink); border-radius: 999px; padding: 2px 7px; min-width: 20px; text-align: center; line-height: 1.3; }
.nav-link .count.warn { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 22%, transparent); }
.sidebar-foot { padding: 12px 22px 18px; font-size: .8rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sidebar-foot a { color: var(--muted); }
.sidebar-foot a:hover { color: var(--ink); }

.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: 10px;
  padding: 0 var(--gutter); padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) { .topbar { border-radius: var(--sheet-r) var(--sheet-r) 0 0; padding: 0 24px; } }
.topbar .brand { display: inline-flex; }
@media (min-width: 1024px) { .topbar .brand, .topbar .menu-toggle { display: none; } }
.topbar-search {
  flex: 1; max-width: 480px; display: none; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); color: var(--muted); cursor: pointer; font: inherit; font-size: .875rem; text-align: left;
  box-shadow: inset 0 1px 2px rgba(12, 26, 30, .03); transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.topbar-search:hover { border-color: var(--line-strong); background: var(--paper); }
.topbar-search span { flex: 1; }
.topbar-search .icon { color: var(--faint); }
@media (min-width: 768px) { .topbar-search { display: flex; } }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.balance-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px 0 5px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-weight: 650; font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: var(--e1);
  transition: border-color .15s, box-shadow .15s;
}
.balance-pill:hover { border-color: var(--brand-200); color: var(--ink); text-decoration: none; box-shadow: var(--e2); }
.balance-pill .plus { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.balance-pill .plus svg { width: 14px; height: 14px; stroke-width: 2.6; }
@media (max-width: 380px) { .balance-pill { padding: 0 10px; } .balance-pill .plus { display: none; } }
/* Phones: a compact balance (rounded down, exact value in the title and label) and no logo, so the actions always fit. */
.balance-pill .amt-short { display: none; }
@media (max-width: 599px) {
  .balance-pill .amt-full { display: none; }
  .balance-pill .amt-short { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .balance-pill { min-width: 0; }
  .topbar-actions { min-width: 0; }
}
@media (max-width: 439px) { .topbar .brand { display: none; } }
.balance-pill .amt-tiny { display: none; }
@media (max-width: 359px) { .balance-pill .amt-short { display: none; } .balance-pill .amt-tiny { display: inline; } }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent; color: var(--ink-2); cursor: pointer; padding: 0; flex: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
.icon-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--ring); }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper); }
.user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 3px; border-radius: 999px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink); font: inherit; }
.user-btn:hover { background: var(--sunken); }
.user-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--ring); }

.main { flex: 1; padding: 20px var(--gutter) calc(var(--bottom-h) + 28px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { :root { --gutter: 24px; } .main { padding-top: 26px; padding-bottom: 40px; } }
@media (min-width: 1280px) { :root { --gutter: 36px; } .main { padding-top: 32px; padding-bottom: 56px; } }
.container { width: 100%; max-width: 1240px; margin: 0 auto; }
.container-narrow { max-width: 860px; }
.container-xs { max-width: 560px; }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 22px; }
.page-header .titles { flex: 1 1 280px; min-width: 0; }
.page-header h1 { font-size: 1.6rem; }
.page-header p { color: var(--muted); margin: 6px 0 0; font-size: .9375rem; max-width: 66ch; }
.page-header .actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 768px) { .page-header h1 { font-size: 1.875rem; } .page-header { margin-bottom: 28px; } }
/* Phones: two or more header actions share the row instead of ragged-wrapping. */
@media (max-width: 639px) {
  .page-header .actions { width: 100%; }
  .page-header .actions > .btn:not(:only-child) { flex: 1 1 auto; }
}
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .8125rem; color: var(--muted); margin-bottom: 8px; }
.breadcrumbs a { color: var(--muted); padding: 2px 4px; margin: -2px -4px; border-radius: calc(6px * var(--rf, 1)); }
.breadcrumbs a:hover { color: var(--ink); background: var(--sunken); text-decoration: none; }
.breadcrumbs .icon { width: 14px; height: 14px; color: var(--faint); margin: 0 2px; }

/* Bottom navigation (phones) */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--bottom-h) + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -20px rgba(12, 26, 30, .4);
}
@media (min-width: 768px) { .bottom-nav { display: none; } }
.bottom-nav a, .bottom-nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; cursor: pointer;
  color: var(--muted); font: 550 .6875rem/1 var(--font); padding: 6px 0; min-width: 0; -webkit-tap-highlight-color: transparent;
}
.bottom-nav a:hover { text-decoration: none; color: var(--ink); }
.bottom-nav .icon { width: 52px; height: 28px; padding: 3px 15px; border-radius: 999px; transition: background-color .2s; }
.bottom-nav .active { color: var(--brand-hover); font-weight: 650; }
.bottom-nav .active .icon { background: var(--brand-50); color: var(--brand); }
.bottom-nav .primary { color: var(--ink); }
.bottom-nav .primary .bubble {
  width: 50px; height: 50px; margin-top: -24px; border-radius: calc(17px * var(--rf, 1)); color: var(--brand-ink); display: grid; place-items: center;
  background: var(--brand) linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--brand) 70%, transparent), 0 0 0 4px var(--paper);
}
.bottom-nav .primary .bubble .icon { width: 24px; height: 24px; padding: 0; stroke-width: 2.4; background: none; }
/* With a fixed order bar above the nav there is no room for the raised bubble, so it sits in line. */
.has-order-bar .bottom-nav .primary .bubble { width: 34px; height: 34px; margin-top: -4px; border-radius: calc(11px * var(--rf, 1)); box-shadow: none; }
.has-order-bar .bottom-nav .primary .bubble .icon { width: 20px; height: 20px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--line-strong); --btn-sh: 0 1px 2px rgba(12, 26, 30, .06);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 15px;
  border-radius: var(--r-md); border: 1px solid var(--btn-bd); background-color: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-sh);
  font: 600 .875rem/1 var(--font); letter-spacing: -0.003em; cursor: pointer; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
  text-decoration: none !important; position: relative;
}
.btn:hover { --btn-bg: var(--paper-2); --btn-bd: color-mix(in srgb, var(--line-strong) 75%, var(--ink-2)); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
/* --btn-sh is always a shadow list (never "none"), or this ring would be dropped. */
.btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--btn-sh), var(--ring); }
.btn .icon { width: 17px; height: 17px; }
.btn-primary {
  --btn-bg: var(--brand); --btn-fg: var(--brand-ink); --btn-bd: color-mix(in srgb, var(--brand) 84%, #000);
  --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px color-mix(in srgb, var(--brand) 28%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--brand) 45%, transparent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 70%);
}
.btn-primary:hover { --btn-bg: var(--brand-hover); --btn-bd: color-mix(in srgb, var(--brand-hover) 84%, #000); }
.btn-soft { --btn-bg: var(--brand-50); --btn-fg: var(--brand-hover); --btn-bd: transparent; --btn-sh: 0 0 #0000; }
.btn-soft:hover { --btn-bg: var(--brand-100); --btn-bd: transparent; }
.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--ink-2); --btn-sh: 0 0 #0000; }
.btn-ghost:hover { --btn-bg: var(--sunken); --btn-bd: transparent; }
.btn-danger {
  --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: color-mix(in srgb, var(--red) 84%, #000);
  --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px color-mix(in srgb, var(--red) 28%, transparent);
}
.btn-danger:hover { --btn-bg: color-mix(in srgb, var(--red) 88%, #000); --btn-bd: color-mix(in srgb, var(--red) 75%, #000); }
.btn-danger-soft { --btn-bg: var(--red-bg); --btn-fg: var(--red); --btn-bd: transparent; --btn-sh: 0 0 #0000; }
.btn-danger-soft:hover { --btn-bg: color-mix(in srgb, var(--red-bg) 80%, var(--red)); --btn-bd: transparent; }
.btn-sm { min-height: 32px; padding: 0 11px; font-size: .8125rem; border-radius: var(--r-sm); gap: 6px; }
.btn-sm .icon { width: 15px; height: 15px; }
.btn-lg { min-height: 48px; padding: 0 20px; font-size: .9375rem; border-radius: calc(12px * var(--rf, 1)); }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-sm.btn-icon { width: 32px; }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; box-shadow: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--btn-fg) 35%, transparent); border-top-color: var(--btn-fg); animation: spin .7s linear infinite;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Badges, chips, avatars ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap;
  background: var(--gray-bg); color: var(--gray); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent); letter-spacing: .003em;
}
.badge .icon { width: 12px; height: 12px; stroke-width: 2.3; }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-indigo { background: var(--indigo-bg); color: var(--indigo); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-orange { background: var(--orange-bg); color: var(--orange); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
.badge-gray { background: var(--gray-bg); color: var(--gray); }
.badge-brand { background: var(--brand-50); color: var(--brand-hover); }
.badge-outline { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.badge-test { background: repeating-linear-gradient(-45deg, var(--amber-bg), var(--amber-bg) 6px, var(--paper) 6px, var(--paper) 11px); color: var(--amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink-2); font: 550 .8125rem/1 var(--font); cursor: pointer; white-space: nowrap; box-shadow: 0 1px 1px rgba(12, 26, 30, .03);
  transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.chip.active, .chip[aria-pressed="true"] { background: var(--brand-50); color: var(--brand-hover); border-color: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.chip:focus-visible, .chip.active:focus-visible, .chip[aria-pressed="true"]:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--ring); }
.chip .icon { width: 16px; height: 16px; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.chip-row::-webkit-scrollbar { display: none; }
/* Rows that scroll sideways fade out at the edge that has more to show (classes set by app.js). */
.chip-row.is-scrollable, .tabs.is-scrollable, .status-tabs.is-scrollable, .segmented.is-scrollable {
  --fade-l: 0px; --fade-r: 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}
.chip-row.is-scrolled, .tabs.is-scrolled, .status-tabs.is-scrolled, .segmented.is-scrolled { --fade-l: 28px; }
.chip-row.at-end, .tabs.at-end, .status-tabs.at-end, .segmented.at-end { --fade-r: 0px; }
/* With a mouse there is no swipe, so a long row can be dragged sideways (app.js); nothing changes size while it does. */
.chip-row.is-dragging, .tabs.is-dragging, .status-tabs.is-dragging, .segmented.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }

.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 650; font-size: .78rem; flex: none; letter-spacing: 0; box-shadow: inset 0 0 0 1px rgba(12, 26, 30, .06); }
.avatar-sm { width: 26px; height: 26px; font-size: .66rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar-h0 { background: #dff3f0; color: #0a5f5b; } .avatar-h1 { background: #e7eefe; color: #1d4ed8; }
.avatar-h2 { background: #fdf1d9; color: #8a4a08; } .avatar-h3 { background: #f1eafe; color: #6d28d9; }
.avatar-h4 { background: #fde8ef; color: #b4234d; } .avatar-h5 { background: #e6f6ec; color: #166534; }
:root[data-theme="dark"] .avatar { filter: saturate(.85) brightness(.9); }

/* ---------- Panels ---------- */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e1); min-width: 0; }
.panel + .panel { margin-top: 16px; }
.panel-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); min-height: 60px; }
.panel-header h2, .panel-header h3 { font-size: .9375rem; font-weight: 650; letter-spacing: -0.006em; }
.panel-header .sub { color: var(--muted); font-size: .8125rem; margin: 2px 0 0; }
.panel-header .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-body { padding: 20px; }
.panel-body.tight { padding: 12px; }
.panel-footer { padding: 14px 20px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--paper-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.panel-flush .panel-body { padding: 0; }
.panel-soft { background: var(--sunken); border-color: transparent; box-shadow: none; }
@media (max-width: 640px) { .panel-header, .panel-body, .panel-footer { padding-left: 16px; padding-right: 16px; } }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
/* Two columns only where each gets at least 420px (panels holding tables of figures). */
.grid-2.grid-2-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.split { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; } .split-wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.split > *, .grid > *, .order-layout > *, .hero-grid > *, .form-grid > * { min-width: 0; } /* long unbreakable text (a URL, a truncated line) never widens its column */
/* Panels placed side by side in a grid line up; the stacked-panel gap only applies in normal flow. */
.grid > .panel, .split > .panel, .order-layout > .panel { margin-top: 0; }
.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 10px; }

/* ---------- KPI strip: one panel, divided cells (not a row of identical cards) ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e1); overflow: hidden; }
.stat { padding: 18px 20px; min-width: 0; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; container-type: inline-size; }
.stats > .stat:last-child { border-right: 0; }
.stats.cols-2 { --cols: 2; } .stats.cols-3 { --cols: 3; } .stats.cols-5 { --cols: 5; } .stats.cols-6 { --cols: 3; }
/* Each column count drops the right border on its last column and the bottom border on its last row. */
@media (max-width: 899px) {
  .stats > .stat:nth-child(2n) { border-right: 0; }
  .stats > .stat:nth-child(2n+1):nth-last-child(-n+2), .stats > .stat:nth-child(2n+1):nth-last-child(-n+2) ~ .stat { border-bottom: 0; }
}
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .stats.cols-2 > .stat:nth-child(2n), .stats.cols-3 > .stat:nth-child(3n), .stats.cols-5 > .stat:nth-child(5n), .stats.cols-6 > .stat:nth-child(3n),
  .stats:not(.cols-2):not(.cols-3):not(.cols-5):not(.cols-6) > .stat:nth-child(4n) { border-right: 0; }
  .stats.cols-2 > .stat:nth-child(2n+1):nth-last-child(-n+2), .stats.cols-2 > .stat:nth-child(2n+1):nth-last-child(-n+2) ~ .stat,
  .stats.cols-3 > .stat:nth-child(3n+1):nth-last-child(-n+3), .stats.cols-3 > .stat:nth-child(3n+1):nth-last-child(-n+3) ~ .stat,
  .stats.cols-5 > .stat:nth-child(5n+1):nth-last-child(-n+5), .stats.cols-5 > .stat:nth-child(5n+1):nth-last-child(-n+5) ~ .stat,
  .stats.cols-6 > .stat:nth-child(3n+1):nth-last-child(-n+3), .stats.cols-6 > .stat:nth-child(3n+1):nth-last-child(-n+3) ~ .stat,
  .stats:not(.cols-2):not(.cols-3):not(.cols-5):not(.cols-6) > .stat:nth-child(4n+1):nth-last-child(-n+4),
  .stats:not(.cols-2):not(.cols-3):not(.cols-5):not(.cols-6) > .stat:nth-child(4n+1):nth-last-child(-n+4) ~ .stat { border-bottom: 0; }
}
/* Five figures: three on top and two below until the page is wide enough for one row of five.
   The row line is an inset shadow, so the last-row border rules above stay as they are. */
@media (min-width: 900px) and (max-width: 1279px) {
  .stats.cols-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats.cols-5 > .stat { grid-column: span 2; }
  .stats.cols-5 > .stat:nth-child(n+4) { grid-column: span 3; }
  .stats.cols-5 > .stat:nth-child(3) { border-right: 0; }
  .stats.cols-5 > .stat:nth-child(-n+3) { box-shadow: inset 0 -1px 0 var(--line-soft); }
}
/* Six figures (reports) sit three to a row until the page is wide enough for one row of six. */
@media (min-width: 1440px) {
  .stats.cols-6 { --cols: 6; }
  .stats.cols-6 > .stat { border-bottom: 0; }
  .stats.cols-6 > .stat:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .stats.cols-6 > .stat:nth-child(6n) { border-right: 0; }
}
.stat .label { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .8125rem; font-weight: 550; }
.stat .label .icon { width: 26px; height: 26px; padding: 5px; border-radius: calc(8px * var(--rf, 1)); background: var(--sunken); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-soft); }
.stat .value { font-family: var(--font-display); font-size: 1.6rem; font-size: clamp(1.1rem, 12cqi, 1.6rem); font-weight: 600; letter-spacing: -0.028em; margin-top: 12px; line-height: 1.1; overflow-wrap: anywhere; color: var(--ink); }
@media (max-width: 479px) { .stat { padding: 14px; } .stat .value { font-size: 1.28rem; font-size: clamp(1.05rem, 13cqi, 1.28rem); margin-top: 10px; } .stat .label { gap: 7px; } .stat .label .icon { width: 24px; height: 24px; padding: 4.5px; } }
.stat .meta { font-size: .8rem; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stat .spark { margin-top: auto; padding-top: 12px; }
@media (max-width: 479px) { .stat .spark { height: 30px; padding-top: 8px; } }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; font-size: .76rem; padding: 2px 6px 2px 4px; border-radius: 999px; }
.delta .icon { width: 13px; height: 13px; stroke-width: 2.5; }
.delta.up { color: var(--green); background: var(--green-bg); } .delta.down { color: var(--red); background: var(--red-bg); } .delta.flat { color: var(--muted); background: var(--sunken); }
a.stat { color: inherit; transition: background-color .15s; }
a.stat:hover { background: var(--paper-2); text-decoration: none; }
a.stat:hover .value { color: var(--brand-hover); }

/* Sparkline (sparkline() helper): a decorative trend under a figure that is also given as text. */
.spark { display: block; width: 100%; height: 42px; overflow: visible; }
.spark-cap { display: block; margin-top: 4px; font-size: .72rem; color: var(--muted); text-align: right; }
.spark .spark-area { fill: color-mix(in srgb, var(--brand) 10%, transparent); stroke: none; }
.spark .spark-line { fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- Dashboard opening: greeting, wallet and figures ---------- */
.welcome { display: grid; gap: 16px; margin-bottom: 20px; }
@media (min-width: 900px) { .welcome { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.welcome h1 { font-size: 1.65rem; }
@media (min-width: 768px) { .welcome h1 { font-size: 2rem; } }
.welcome p { color: var(--muted); margin-top: 6px; }
.dash-top { display: grid; gap: 16px; margin-bottom: 16px; align-items: stretch; }
@media (min-width: 1200px) { .dash-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.dash-top > .stats { margin: 0; }

.balance-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(155deg, var(--paper) 35%, color-mix(in srgb, var(--brand-50) 85%, var(--paper)));
  box-shadow: var(--e2); container-type: inline-size;
}
.balance-hero::after { width: 300px; height: 300px; right: -110px; top: -130px; opacity: .16; }
.balance-hero .figure { font-family: var(--font-display); font-weight: 620; font-size: 2.1rem; font-size: clamp(1.6rem, 11cqi, 2.1rem); letter-spacing: -0.035em; line-height: 1; color: var(--ink); overflow-wrap: anywhere; }
.balance-hero .caption { font-size: .8125rem; color: var(--muted); font-weight: 550; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.balance-hero .caption .icon { width: 16px; height: 16px; color: var(--brand); }
/* Dashboard variant: a tall card beside the figures. */
.dash-top > .balance-hero { flex-direction: column; align-items: stretch; justify-content: space-between; padding: 24px 26px; min-height: 196px; }
.dash-top > .balance-hero .figure { font-size: clamp(2.1rem, 4.2vw, 2.9rem); font-size: clamp(1.8rem, 11cqi, 2.9rem); }
@media (max-width: 479px) { .dash-top > .balance-hero { padding: 20px; min-height: 0; } .dash-top > .balance-hero .btn-row > .btn { flex: 1 1 auto; } }
/* The latest wallet movement at the foot of the dashboard balance card. */
.wallet-last {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: calc(14px * var(--rf, 1)); color: var(--ink-2); text-decoration: none;
  background: color-mix(in srgb, var(--paper) 82%, transparent); border: 1px solid var(--line-soft); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: border-color .15s, box-shadow .15s;
}
.wallet-last:hover { border-color: var(--line-strong); box-shadow: var(--e1); color: var(--ink); text-decoration: none; }
.wallet-last .tile-ico { width: 34px; height: 34px; border-radius: calc(10px * var(--rf, 1)); }
.wallet-last .tile-ico .icon { width: 16px; height: 16px; }
.wallet-last .grow { min-width: 0; }
.wallet-last .k { display: block; font-size: .72rem; font-weight: 550; color: var(--muted); }
.wallet-last .t { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-last .v { font-weight: 650; font-size: .9rem; white-space: nowrap; color: var(--ink); }
/* "Order again" on the dashboard balance card: the services last ordered, one tap from the order form. */
.reorder { display: grid; gap: 8px; margin-top: 20px; }
.reorder .k { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: var(--muted); }
.reorder .k .icon { width: 14px; height: 14px; color: var(--brand); }
.reorder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.reorder-item {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px 6px 7px; border-radius: calc(12px * var(--rf, 1)); color: var(--ink); text-decoration: none;
  font-size: .86rem; font-weight: 560; background: color-mix(in srgb, var(--paper) 80%, transparent); border: 1px solid var(--line-soft); transition: border-color .15s, box-shadow .15s;
}
.reorder-item:hover { border-color: var(--line-strong); box-shadow: var(--e1); color: var(--ink); text-decoration: none; }
.reorder-item .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reorder-item > .icon { flex: none; width: 16px; height: 16px; color: var(--faint); transition: color .15s, transform .15s; }
.reorder-item:hover > .icon { color: var(--brand); transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .reorder-item:hover > .icon { transform: none; } }
/* A list title that links to its record without looking like body-text links. */
.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { color: var(--brand-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Tables / data grid ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.toolbar .search { flex: 1 1 220px; position: relative; min-width: 0; }
.toolbar .search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.toolbar .search input {
  width: 100%; height: 40px; padding: 0 12px 0 38px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font: inherit; font-size: .875rem;
  box-shadow: inset 0 1px 2px rgba(12, 26, 30, .03); transition: border-color .15s, box-shadow .15s;
}
.toolbar .search input:hover { border-color: color-mix(in srgb, var(--line-strong) 70%, var(--ink-2)); }
.toolbar .search input:focus { border-color: var(--brand); box-shadow: var(--focus); outline: 2px solid transparent; }
.toolbar select, .toolbar .input {
  height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background-color: var(--paper); color: var(--ink); font: inherit; font-size: .86rem; padding: 0 32px 0 12px; max-width: 100%;
  box-shadow: inset 0 1px 2px rgba(12, 26, 30, .03); transition: border-color .15s, box-shadow .15s;
}
.toolbar select, .bulk-bar select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2356666c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.toolbar select:hover, .toolbar .input:hover { border-color: color-mix(in srgb, var(--line-strong) 70%, var(--ink-2)); }
.toolbar select:focus, .toolbar .input:focus { border-color: var(--brand); box-shadow: var(--focus); outline: 2px solid transparent; }
.toolbar .input { padding-right: 12px; }
.toolbar .spacer { flex: 1; }
/* Phones: filter controls fill the row in pairs instead of leaving ragged gaps. */
@media (max-width: 639px) {
  .toolbar > select, .toolbar > .field-plain { flex: 1 1 100%; min-width: 0; }
  .toolbar > .input, .toolbar > .inline-flex { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .toolbar > .inline-flex { flex-direction: column; align-items: stretch; gap: 4px; }
  .toolbar > .inline-flex > .input { min-width: 0; }
}
.status-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 8px 12px 0; border-bottom: 1px solid var(--line-soft); }
.status-tabs::-webkit-scrollbar { display: none; }
.status-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px 11px; color: var(--muted); font-weight: 550; font-size: .875rem; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.status-tabs a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line-strong); }
.status-tabs a.active { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.status-tabs .n { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--sunken); border-radius: 999px; padding: 0 6px; min-width: 20px; text-align: center; line-height: 18px; font-weight: 600; }
.status-tabs a.active .n { background: var(--brand-50); color: var(--brand-hover); }

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; container: table-wrap / inline-size; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.table th {
  position: sticky; top: 0; z-index: 1; background: var(--paper-2); color: var(--muted); font-weight: 600; font-size: .75rem; text-align: left; letter-spacing: .01em;
  padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.table th a:hover { color: var(--ink); text-decoration: none; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color .12s; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--paper-2) 70%, var(--sunken)); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .strong { color: var(--ink); font-weight: 600; }
.table .muted { color: var(--muted); }
.table .nowrap { white-space: nowrap; }
.table .check { width: 40px; padding-right: 0; }
.table .actions { width: 1%; white-space: nowrap; text-align: right; }
.table .truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.table tr.is-selected td { background: var(--brand-50); }
.table tr.is-flagged td { background: color-mix(in srgb, var(--red-bg) 70%, transparent); }
.table tr.is-flagged td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.table tr[data-href] { cursor: pointer; }
/* Text links in a row's title cell (the record, its customer, a receipt) are 24px tall, so two stacked links stay
   easy to hit on touch screens (WCAG 2.2, 2.5.8). */
.table td.card-title a:not(.btn):not(.badge):not(.chip):not(.link-cell):not(.block):not(.truncate):not(.inline-flex) { display: inline-block; line-height: 24px; }
.cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-main .t { color: var(--ink); font-weight: 600; }
.cell-main .s { color: var(--muted); font-size: .8rem; }
.link-cell { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; color: var(--ink-2); }
.link-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-cell .icon { width: 14px; height: 14px; color: var(--faint); }
/* A table inside a panel body that runs to the panel's edges, like the tables placed directly in a panel. */
.table-wrap.bleed { width: auto; margin-left: -20px; margin-right: -20px; }
/* Panels narrower than 1000px (laptops with the sidebar, tablets): tighter cells, and long column titles wrap
   instead of widening their column, so the columns fit without scrolling sideways. */
@container table-wrap (max-width: 999px) {
  .table th, .table td { padding-left: 12px; padding-right: 12px; }
  .table th { white-space: normal; }
}

/* Mobile: rows become cards */
@media (max-width: 720px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); position: relative; }
  .table-cards tbody tr:last-child { border-bottom: 0; }
  .table-cards td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .table-cards td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 500; text-align: left; flex: none; }
  .table-cards td.card-title { display: block; text-align: left; padding-bottom: 6px; }
  .table-cards td.card-title::before { display: none; }
  .table-cards td.check { position: absolute; right: 14px; top: 14px; width: auto; }
  .table-cards tr:has(td.check) td.card-title { padding-right: 34px; }
  .table-cards tr.is-flagged { background: color-mix(in srgb, var(--red-bg) 70%, transparent); box-shadow: inset 3px 0 0 var(--red); }
  .table-cards tr.is-flagged td, .table-cards tr.is-flagged td:first-child { background: none; box-shadow: none; }
  .table-cards td.check::before { display: none; }
  .table-cards td.actions { justify-content: flex-end; padding-top: 8px; width: 100%; }
  .table-cards td.actions::before { display: none; }
  .table-cards tbody tr:hover td { background: none; }
  .table-cards .truncate, .table-cards .link-cell { max-width: 62vw; }
  .table-cards td.num { text-align: right; }
  /* Optional card roles: a full-width, left-aligned cell (service name, progress bar) and a status pinned beside the title. */
  .table-cards td.card-main { display: block; text-align: left; padding: 4px 0 6px; }
  .table-cards td.card-main::before { display: none; }
  .table-cards td.card-main .link-cell, .table-cards td.card-main .truncate { max-width: 100%; }
  .table-cards td.card-status { position: absolute; right: 16px; top: 14px; width: auto; padding: 0; display: block; text-align: right; }
  .table-cards td.card-status::before { display: none; }
  .table-cards tr:has(td.card-status) td.card-title { padding-right: 128px; }
  .table-cards tr:has(td.card-status):has(td.check) td.card-title { padding-right: 160px; }
  .table-cards tr:has(td.card-status) td.check { right: 14px; top: 46px; }
}
/* Tables marked cards-lg have too many columns for mid-size screens: their rows become cards as soon as their panel is
   narrower than 900px, whatever the screen (the same rules as above; keep the two blocks in step, a test compares them). */
@container table-wrap (max-width: 899px) {
  .table-cards.cards-lg thead { display: none; }
  .table-cards.cards-lg, .table-cards.cards-lg tbody, .table-cards.cards-lg tr, .table-cards.cards-lg td { display: block; width: 100%; }
  .table-cards.cards-lg tr { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); position: relative; }
  .table-cards.cards-lg tbody tr:last-child { border-bottom: 0; }
  .table-cards.cards-lg td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .table-cards.cards-lg td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 500; text-align: left; flex: none; }
  .table-cards.cards-lg td.card-title { display: block; text-align: left; padding-bottom: 6px; }
  .table-cards.cards-lg td.card-title::before { display: none; }
  .table-cards.cards-lg td.check { position: absolute; right: 14px; top: 14px; width: auto; }
  .table-cards.cards-lg tr:has(td.check) td.card-title { padding-right: 34px; }
  .table-cards.cards-lg tr.is-flagged { background: color-mix(in srgb, var(--red-bg) 70%, transparent); box-shadow: inset 3px 0 0 var(--red); }
  .table-cards.cards-lg tr.is-flagged td, .table-cards.cards-lg tr.is-flagged td:first-child { background: none; box-shadow: none; }
  .table-cards.cards-lg td.check::before { display: none; }
  .table-cards.cards-lg td.actions { justify-content: flex-end; padding-top: 8px; width: 100%; }
  .table-cards.cards-lg td.actions::before { display: none; }
  .table-cards.cards-lg tbody tr:hover td { background: none; }
  .table-cards.cards-lg .truncate, .table-cards.cards-lg .link-cell { max-width: 100%; }
  .table-cards.cards-lg td.num { text-align: right; }
  /* Optional card roles: a full-width, left-aligned cell (service name, progress bar) and a status pinned beside the title. */
  .table-cards.cards-lg td.card-main { display: block; text-align: left; padding: 4px 0 6px; }
  .table-cards.cards-lg td.card-main::before { display: none; }
  .table-cards.cards-lg td.card-main .link-cell, .table-cards.cards-lg td.card-main .truncate { max-width: 100%; }
  .table-cards.cards-lg td.card-status { position: absolute; right: 16px; top: 14px; width: auto; padding: 0; display: block; text-align: right; }
  .table-cards.cards-lg td.card-status::before { display: none; }
  .table-cards.cards-lg tr:has(td.card-status) td.card-title { padding-right: 128px; }
  .table-cards.cards-lg tr:has(td.card-status):has(td.check) td.card-title { padding-right: 160px; }
  .table-cards.cards-lg tr:has(td.card-status) td.check { right: 14px; top: 46px; }
}

/* Bulk actions: a floating white bar while rows are selected. */
.bulk-bar {
  display: none; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-lg); margin: 12px; flex-wrap: wrap; font-size: .875rem; box-shadow: var(--e3);
}
.bulk-bar [data-count] { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .75rem; font-variant-numeric: tabular-nums; }
.bulk-bar.show { display: flex; position: sticky; bottom: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom)); z-index: 6; animation: menu-in .18s var(--ease); }
@media (min-width: 768px) { .bulk-bar.show { bottom: 16px; } }
.bulk-count { display: inline-flex; align-items: center; gap: 4px; }
.bulk-count .btn-icon { margin-left: 2px; }
.bulk-count .bulk-all { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding-left: 8px; padding-right: 8px; }
.bulk-bar .check-row { align-items: center; font-size: .86rem; }
.bulk-bar .check-row input { margin-top: 0; }
/* "Select all" above the rows while a table is laid out as cards: the table head, which has the select-all box, is
   hidden then. The box sits on the right, in line with the boxes of the cards. */
.cards-select-all { display: none; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px 8px 16px;
  border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-size: .86rem; font-weight: 550; cursor: pointer; -webkit-user-select: none; user-select: none; }
.cards-select-all input { order: 2; margin: 0; flex: none; }
@media (max-width: 720px) { .cards-select-all { display: flex; } }
@container table-wrap (max-width: 899px) { .cards-select-all.lg { display: flex; } }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: .8125rem; color: var(--muted); }
.pagination .pages { display: flex; gap: 4px; flex-wrap: wrap; }
.pagination a, .pagination span.p {
  min-width: 34px; height: 34px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line);
  color: var(--ink-2); font-weight: 550; font-variant-numeric: tabular-nums; background: var(--paper);
}
.pagination a:hover { background: var(--paper-2); border-color: var(--line-strong); text-decoration: none; color: var(--ink); }
.pagination .current, .pagination span.p.current { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.pagination .gap { border: 0; min-width: 20px; background: none; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 16px; }
.form-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.form-section + .form-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.form-section > h3 { margin-bottom: 4px; font-size: 1rem; }
.form-section > .desc { color: var(--muted); font-size: .875rem; margin-bottom: 16px; }

.field { position: relative; min-width: 0; }
.field > .control {
  width: 100%; min-height: 52px; padding: 22px 14px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background-color: var(--paper); color: var(--ink); font: 400 .95rem/1.35 var(--font); appearance: none; -webkit-appearance: none;
  box-shadow: inset 0 1px 2px rgba(12, 26, 30, .035); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field > textarea.control { min-height: 120px; resize: vertical; padding-top: 26px; line-height: 1.5; }
.field > select.control { padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2356666c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.field > .control:hover { border-color: color-mix(in srgb, var(--line-strong) 60%, var(--ink-2)); }
.field > .control:focus { border-color: var(--brand); box-shadow: var(--focus); outline: 2px solid transparent; }
.field > label {
  position: absolute; left: 15px; top: 16px; color: var(--muted); font-size: .95rem; pointer-events: none; transform-origin: left top;
  transition: transform .15s var(--ease), color .15s, top .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 30px);
}
.field > .control:focus + label, .field > .control:not(:placeholder-shown) + label, .field > select.control + label, .field.has-value > label, .field > input[type="date"] + label, .field > input[type="datetime-local"] + label {
  transform: translateY(-9px) scale(.78); color: var(--muted);
}
.field > .control:focus + label { color: var(--brand); }
.field > .control::placeholder { color: transparent; }
.field > .control:focus::placeholder { color: var(--faint); }
.field.has-prefix > .control { padding-left: 44px; }
.field.has-prefix > label { left: 45px; }
.field .prefix { position: absolute; left: 14px; top: 17px; color: var(--muted); font-weight: 600; font-size: .9rem; pointer-events: none; }
.field .suffix { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }
.field.has-suffix > .control { padding-right: 52px; }
/* Leading icon inside a floating-label field (field(..., ['icon' => 'mail'])). Decorative: aria-hidden. */
.field.has-icon > .control { padding-left: 44px; }
.field.has-icon > select.control { padding-left: 44px; }
.field.has-icon > label { left: 45px; max-width: calc(100% - 60px); }
.field .lead-icon { position: absolute; left: 14px; top: 17px; display: flex; color: var(--faint); pointer-events: none; transition: color .15s; }
.field .lead-icon .icon { width: 18px; height: 18px; }
.field.has-icon:focus-within .lead-icon { color: var(--brand); }
.field.invalid .lead-icon { color: var(--red); }
/* First and last name side by side from tablet width up. */
.name-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .name-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Country code + number: stacked in narrow forms (sign-up card, phones), joined side by side where the form is wide. */
.phone-field { container-type: inline-size; }
.phone-row { display: grid; gap: 12px; }
.field.phone-number.has-prefix > .control { padding-left: 64px; }
.field.phone-number.has-prefix > label { left: 65px; max-width: calc(100% - 80px); }
.field.phone-number .prefix { color: var(--ink-2); font-variant-numeric: tabular-nums; }
@container (min-width: 440px) {
  .phone-row { grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); gap: 0; align-items: start; }
  .phone-row > .field:first-child > .control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .phone-row > .field + .field > .control { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; width: calc(100% + 1px); }
}
.field .help { font-size: .8rem; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.field .error { font-size: .82rem; color: var(--red); margin-top: 6px; display: flex; align-items: flex-start; gap: 6px; font-weight: 500; }
.field .error .icon { width: 15px; height: 15px; margin-top: 2px; }
.caps-hint { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .8rem; font-weight: 500; color: var(--amber); }
.caps-hint .icon { width: 15px; height: 15px; flex: none; }
/* The show-password button stays above its field (custom CSS cannot slide the field over it), an icon inside a button
   never takes the click itself, and Edge's own reveal button is hidden beside ours. */
.field .suffix { z-index: 2; }
button svg, [role="button"] svg { pointer-events: none; }
.field input::-ms-reveal, .field input::-ms-clear { display: none; }

/* ---------- Bot protection (Captcha::render) ----------
   Room is kept for the widget while its script loads (nothing jumps), and in a narrow card the fixed-width widgets
   are scaled down to fit instead of widening the page. reCAPTCHA v3 shows its notice as text under the form, which
   Google accepts in place of the floating badge (the badge would cover the phone navigation). */
.captcha-box { container-type: inline-size; min-width: 0; overflow: hidden; }
.captcha-box[data-captcha="turnstile"] { min-height: 65px; }
.captcha-box[data-captcha="recaptcha_v2"], .captcha-box[data-captcha="hcaptcha"] { min-height: 78px; }
.captcha-box > .cf-turnstile, .captcha-box > .g-recaptcha, .captcha-box > .h-captcha { transform-origin: left top; }
@container (max-width: 303px) { .captcha-box > .cf-turnstile, .captcha-box > .g-recaptcha, .captcha-box > .h-captcha { transform: scale(.9); } }
@container (max-width: 275px) { .captcha-box > .cf-turnstile, .captcha-box > .g-recaptcha, .captcha-box > .h-captcha { transform: scale(.8); } }
@container (max-width: 245px) { .captcha-box > .cf-turnstile, .captcha-box > .g-recaptcha, .captcha-box > .h-captcha { transform: scale(.7); } }
.grecaptcha-badge { visibility: hidden; }
.captcha-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); font-size: .85rem; line-height: 1.45;
}
.captcha-note > .icon { width: 17px; height: 17px; flex: none; }
.captcha-note > .grow { flex: 1 1 170px; min-width: 0; }
.captcha-note-wait { color: var(--ink-2); background: var(--paper-2); }
.captcha-note-wait > .icon { color: var(--brand); animation: spin 1s linear infinite; }
.captcha-note-todo { color: var(--amber); background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.captcha-note-error { color: var(--red); background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
@media (prefers-reduced-motion: reduce) { .captcha-note-wait > .icon { animation: none; } }
.field.invalid > .control, .control[aria-invalid="true"] { border-color: var(--red); background-color: color-mix(in srgb, var(--red-bg) 35%, var(--paper)); }
.field.invalid > .control:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent); }
.field.valid > .control { border-color: color-mix(in srgb, var(--green) 55%, var(--line-strong)); }
.field > .control:disabled, .field > .control[readonly] { background-color: var(--sunken); color: var(--muted); box-shadow: none; }

/* Plain labelled inputs (dense admin forms, filters) */
.label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background-color: var(--paper);
  color: var(--ink); font: 400 .9rem/1.4 var(--font); box-shadow: inset 0 1px 2px rgba(12, 26, 30, .035); transition: border-color .15s, box-shadow .15s;
}
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--line-strong) 65%, var(--ink-2)); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2356666c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: var(--focus); outline: 2px solid transparent; }
.input.mono, .textarea.mono, .select.mono { font-family: var(--font-mono); font-size: .86rem; }
/* File inputs: a dashed drop area (a file can be dropped on it), the native button a small secondary button with an
   upload icon, and the file name beside it. Still the browser's own control, so keyboard and screen readers work as usual. */
.input[type="file"] {
  min-height: 52px; padding: 9px 10px; color: var(--muted); font-size: .875rem; cursor: pointer; border-style: dashed; background-color: var(--paper-2);
  transition: border-color .15s, background-color .15s;
}
.input[type="file"]:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line-strong)); background-color: color-mix(in srgb, var(--brand-50) 50%, var(--paper)); }
.input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 32px; padding: 0 12px 0 32px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2356666c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") no-repeat 11px center / 15px 15px;
  color: var(--ink); font: 600 .8125rem/1 var(--font); cursor: pointer; transition: background-color .15s; box-shadow: 0 1px 2px rgba(12, 26, 30, .05);
}
.input[type="file"]:hover::file-selector-button { background-color: var(--paper-2); }
.input[type="file"]:focus { border-color: var(--brand); box-shadow: var(--ring); outline: 2px solid transparent; }
.field > .control.mono { font-family: var(--font-mono); font-size: .88rem; }

.check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
.check-row input { margin-top: 2px; }
.check-row .desc { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--brand); flex: none; cursor: pointer; }

.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: .9rem; color: var(--ink-2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .18s; flex: none; box-shadow: inset 0 1px 2px rgba(12, 26, 30, .12); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12, 26, 30, .28), 0 0 0 .5px rgba(12, 26, 30, .06); transition: transform .2s var(--ease); }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); outline: 2px solid transparent; outline-offset: 2px; }
.switch:has(input:disabled) { cursor: not-allowed; color: var(--muted); }
.switch input:disabled + .track { opacity: .5; }
.switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .text strong { display: block; font-weight: 600; color: var(--ink); font-size: .9rem; }
.switch-row .text span { color: var(--muted); font-size: .84rem; }

.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.choice {
  position: relative; display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); cursor: pointer;
  background: var(--paper); transition: border-color .15s, background-color .15s, box-shadow .15s; min-height: 64px; box-shadow: var(--e1);
}
.choice:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line-strong)); box-shadow: var(--e2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand); }
.choice:has(input:focus-visible) { box-shadow: var(--ring); outline: 2px solid transparent; outline-offset: 2px; }
.choice .choice-icon { width: 40px; height: 40px; border-radius: calc(11px * var(--rf, 1)); background: var(--sunken); display: grid; place-items: center; color: var(--ink-2); flex: none; box-shadow: inset 0 0 0 1px var(--line-soft); }
.choice:has(input:checked) .choice-icon { background: var(--paper); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-100); }
.choice .t { font-weight: 600; color: var(--ink); font-size: .92rem; display: block; }
.choice .s { color: var(--muted); font-size: .8rem; display: block; }
.choice .tick { margin-left: auto; color: var(--brand); opacity: 0; transition: opacity .15s; }
.choice:has(input:checked) .tick { opacity: 1; }

.segmented { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; background: var(--sunken); border-radius: var(--r-md); gap: 2px; border: 1px solid var(--line); }
.segmented::-webkit-scrollbar { display: none; }
.segmented > * { flex: none; white-space: nowrap; }
.segmented label, .segmented a, .segmented button { padding: 6px 12px; border-radius: calc(7px * var(--rf, 1)); font-size: .8125rem; font-weight: 550; color: var(--muted); cursor: pointer; border: 0; background: none; font-family: inherit; transition: color .15s, background-color .15s; }
.segmented input { position: absolute; opacity: 0; }
.segmented label:has(input:checked), .segmented .active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(12, 26, 30, .08), 0 0 0 1px rgba(12, 26, 30, .04); }
.segmented a:hover { text-decoration: none; color: var(--ink); }
.segmented label:has(input:focus-visible) { box-shadow: var(--ring); color: var(--ink); outline: 2px solid transparent; }

.input-copy { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); }
.input-copy input, .input-copy code { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 12px; font: .86rem var(--font-mono); color: var(--ink); }
.input-copy code { white-space: nowrap; overflow-x: auto; }
.input-copy .btn { border-radius: 0; border: 0; border-left: 1px solid var(--line-strong); min-height: 42px; --btn-sh: 0 0 #0000; } /* not box-shadow: none, which would also drop the focus ring */
/* The box clips anything drawn outside its children, so their focus rings are drawn inside. */
.input-copy input:focus-visible, .input-copy code:focus-visible, .input-copy .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; box-shadow: none; }

.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.form-actions .hint { color: var(--muted); font-size: .84rem; }

/* ---------- Alerts, toasts, empty states, skeletons ---------- */
.alert {
  --tone: var(--blue);
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--tone) 20%, transparent);
  font-size: .9rem; line-height: 1.5; color: var(--ink-2);
}
.alert > .icon { margin-top: 1px; color: var(--tone); }
.alert .body { flex: 1; min-width: 0; }
.alert strong { color: var(--tone); }
.alert .body > strong:first-child { display: block; margin-bottom: 1px; }
.alert a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); text-underline-offset: 3px; }
.alert-info { --tone: var(--blue); background: var(--blue-bg); }
.alert-success { --tone: var(--green); background: var(--green-bg); }
.alert-warning { --tone: var(--amber); background: var(--amber-bg); }
.alert-danger, .alert-error { --tone: var(--red); background: var(--red-bg); }
.alert-neutral { --tone: var(--ink-2); background: var(--paper-2); border-color: var(--line); }
.alert-brand { --tone: var(--brand-hover); background: var(--brand-50); }
.alert .close { margin-left: auto; background: none; border: 0; color: var(--ink-2); cursor: pointer; opacity: .65; padding: 2px; border-radius: calc(6px * var(--rf, 1)); }
.alert .close:hover { opacity: 1; }

.toasts { position: fixed; z-index: 120; left: 12px; right: 12px; bottom: calc(var(--bottom-h) + 14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; align-items: center; }
@media (min-width: 768px) { .toasts { left: auto; right: 24px; bottom: 24px; align-items: flex-end; } }
@media (max-width: 1099px) { .has-order-bar .toasts { bottom: calc(var(--bottom-h) + 84px + env(safe-area-inset-bottom)); } }
@media (min-width: 768px) and (max-width: 1099px) { .has-order-bar .toasts { bottom: 96px; } }
.toast {
  pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; width: min(420px, 100%); padding: 13px 14px; border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--e3); font-size: .9rem; line-height: 1.45; animation: toast-in .3s var(--ease);
}
.toast > .icon { width: 28px; height: 28px; padding: 5px; margin-top: -3px; border-radius: 50%; flex: none; color: var(--blue); background: var(--blue-bg); }
.toast.success > .icon { color: var(--green); background: var(--green-bg); }
.toast.error > .icon { color: var(--red); background: var(--red-bg); }
.toast.warning > .icon { color: var(--amber); background: var(--amber-bg); }
.toast.info > .icon { color: var(--blue); background: var(--blue-bg); }
.toast .msg { flex: 1; padding-top: 1px; color: var(--ink); font-weight: 500; }
.toast button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; border-radius: calc(6px * var(--rf, 1)); }
.toast button:hover { color: var(--ink); background: var(--sunken); }
.toast.leaving { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
/* The art tile carries two soft rings, an echo of the engraved rosette. */
.empty .art {
  width: 56px; height: 56px; border-radius: calc(18px * var(--rf, 1)); background: var(--paper); display: grid; place-items: center; margin: 8px auto 18px; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line), var(--e1), 0 0 0 8px color-mix(in srgb, var(--sunken) 80%, transparent), 0 0 0 16px color-mix(in srgb, var(--sunken) 40%, transparent);
}
.empty .art .icon { width: 26px; height: 26px; }
.empty h3 { color: var(--ink); font-size: 1.02rem; margin-bottom: 6px; }
.empty p { max-width: 380px; margin: 0 auto 18px; font-size: .9rem; }

.skeleton { position: relative; overflow: hidden; background: var(--sunken); border-radius: calc(8px * var(--rf, 1)); min-height: 14px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 75%, transparent), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

.progress { height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--brand); border-radius: inherit; transition: width .5s var(--ease); }
progress.bar { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--sunken); overflow: hidden; display: block; box-shadow: inset 0 0 0 1px var(--line-soft); }
progress.bar::-webkit-progress-bar { background: var(--sunken); border-radius: 999px; }
progress.bar::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
progress.bar::-moz-progress-bar { background: var(--brand); border-radius: 999px; }
progress.bar.green::-webkit-progress-value { background: var(--green); } progress.bar.green::-moz-progress-bar { background: var(--green); }
progress.bar.amber::-webkit-progress-value { background: var(--live); } progress.bar.amber::-moz-progress-bar { background: var(--live); }
progress.bar.red::-webkit-progress-value { background: var(--red); } progress.bar.red::-moz-progress-bar { background: var(--red); }

/* ---------- Dropdowns, dialogs, tabs ---------- */
.dropdown { position: relative; display: inline-block; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 228px; padding: 6px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e3); display: none; transform-origin: top right;
}
.menu.left { left: 0; right: auto; transform-origin: top left; }
.menu.up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom right; }
.dropdown.open > .menu { display: block; animation: menu-in .16s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: calc(8px * var(--rf, 1)); color: var(--ink-2); font: 500 .875rem/1.3 var(--font); background: none; border: 0; cursor: pointer; text-align: left; min-height: 36px; }
.menu a:hover, .menu button:hover { background: var(--sunken); color: var(--ink); text-decoration: none; }
.menu a:focus-visible, .menu button:focus-visible { outline: 2px solid transparent; outline-offset: -2px; background: var(--sunken); box-shadow: inset 0 0 0 2px var(--brand); }
.menu .icon { width: 16px; height: 16px; color: var(--faint); }
.menu .danger, .menu .danger .icon { color: var(--red); }
.menu .sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }
.menu .menu-head { padding: 10px 10px 10px; border-bottom: 1px solid var(--line-soft); margin: 0 0 6px; }
.menu .menu-head strong { display: block; color: var(--ink); font-size: .9rem; }
.menu .menu-head span { color: var(--muted); font-size: .8rem; word-break: break-all; }
.menu form { margin: 0; }

.notif-menu { width: min(390px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
/* Phones: the bell sits mid-topbar, so the menu spans the screen under the bar instead of running off the left edge. */
@media (max-width: 599px) {
  .notif-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 6px); width: auto; }
}
.notif-menu .head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.menu.notif-menu .head a { display: inline-flex; width: auto; min-height: 0; padding: 4px 8px; margin: -4px -8px -4px 0; border-radius: calc(6px * var(--rf, 1)); color: var(--brand); font-weight: 600; font-size: .8125rem; }
.menu.notif-menu .head a:hover { background: var(--brand-50); color: var(--brand-hover); }
.menu.notif-menu .head a:focus-visible { background: none; box-shadow: var(--ring); outline: 2px solid transparent; }
.notif-list { max-height: 420px; max-height: min(420px, calc(100dvh - var(--topbar-h) - 120px)); overflow-y: auto; overscroll-behavior: contain; }
.menu.notif-menu a.notif, .menu.notif-menu div.notif { padding: 12px 16px; border-radius: 0; font: inherit; align-items: flex-start; min-height: 0; }
.notif { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--paper-2); text-decoration: none; color: var(--ink); }
.notif.unread { background: color-mix(in srgb, var(--brand-50) 65%, transparent); box-shadow: inset 3px 0 0 var(--brand); }
.notif .ico { width: 34px; height: 34px; border-radius: calc(10px * var(--rf, 1)); background: var(--sunken); display: grid; place-items: center; flex: none; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-soft); }
/* The icon tile takes the colour of what happened (NotificationService::tone()). */
.notif .ico.green { background: var(--green-bg); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 14%, transparent); }
.notif .ico.red { background: var(--red-bg); color: var(--red); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 14%, transparent); }
.notif .ico.amber { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 14%, transparent); }
.notif .ico.brand { background: var(--brand-50); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.notif .ico.blue { background: var(--blue-bg); color: var(--blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); }
.notif .ico.purple { background: var(--purple-bg); color: var(--purple); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 14%, transparent); }
/* The notifications page, one block per day. */
.notif-day + .notif-day { border-top: 1px solid var(--line); }
.notif-day-title { margin: 0; padding: 12px 16px 10px; font-size: .78rem; font-weight: 650; color: var(--muted); background: var(--paper-2); border-bottom: 1px solid var(--line-soft); }
.notif-day:first-child .notif-day-title { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.notif .t { font-weight: 600; font-size: .875rem; color: var(--ink); }
.notif .b { font-size: .82rem; color: var(--muted); }
.notif .w { font-size: .74rem; color: var(--faint); margin-top: 2px; }

dialog.modal { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; overflow: hidden; color: var(--ink); }
dialog.modal::backdrop { background: rgba(12, 26, 30, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.modal[open] { display: flex; align-items: flex-end; justify-content: center; }
.modal-card {
  width: 100%; max-height: 92vh; max-height: 92dvh; background: var(--paper); border-radius: calc(22px * var(--rf, 1)) calc(22px * var(--rf, 1)) 0 0; box-shadow: var(--shadow-sheet);
  display: flex; flex-direction: column; animation: sheet-up .3s var(--ease); padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 640px) {
  dialog.modal[open] { align-items: center; padding: 24px; }
  .modal-card { max-width: 520px; border-radius: var(--r-xl); animation: modal-in .22s var(--ease); max-height: 88vh; box-shadow: var(--e4), 0 0 0 1px rgba(12, 26, 30, .04); }
  .modal-card.wide { max-width: 760px; }
  .modal-card.xwide { max-width: 980px; }
}
@keyframes sheet-up { from { transform: translateY(48px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes modal-in { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line-soft); }
.modal-head h2 { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.012em; }
.modal-head p { color: var(--muted); font-size: .875rem; margin: 4px 0 0; }
.modal-head .icon-btn { margin: -6px -10px 0 auto; }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; background: var(--paper-2); }
@media (min-width: 640px) { .modal-foot { border-radius: 0 0 var(--r-xl) var(--r-xl); } }
.modal-foot .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .modal-foot .btn { flex: 0 0 auto; } }
@media (max-width: 639px) { .modal-head, .modal-body, .modal-foot { padding-left: 20px; padding-right: 20px; } }
.modal-grabber { width: 40px; height: 4px; border-radius: calc(4px * var(--rf, 1)); background: var(--line-strong); margin: 10px auto 0; flex: none; }
@media (min-width: 640px) { .modal-grabber { display: none; } }
.confirm-icon { width: 44px; height: 44px; border-radius: calc(13px * var(--rf, 1)); display: grid; place-items: center; background: var(--red-bg); color: var(--red); flex: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 16%, transparent); }
.confirm-icon.brand { background: var(--brand-50); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px 12px; color: var(--muted); font: 550 .875rem/1 var(--font); white-space: nowrap; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.tabs a:hover, .tabs button:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line-strong); }
.tabs .active, .tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.tabs .active:hover { border-bottom-color: var(--brand); }
.tabs .icon { width: 16px; height: 16px; }
.tabs .active .icon { color: var(--brand); }

/* ---------- Lists, timelines, key-values ---------- */
.list { margin: 0; padding: 0; list-style: none; }
.list > li, .list-item { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.list > li:last-child, .list-item:last-child { border-bottom: 0; }
.list > li.items-start, .list-item.items-start { align-items: flex-start; }
a.list-item { color: inherit; transition: background-color .12s; }
a.list-item:hover { background: var(--paper-2); text-decoration: none; }
a.list-item:hover .t { color: var(--brand-hover); }
.list .grow { flex: 1; min-width: 0; }
.list .t { color: var(--ink); font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .12s; }
.list .s { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .end { text-align: right; flex: none; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .list > li, .list-item { padding-left: 16px; padding-right: 16px; } }
.tile-ico { width: 38px; height: 38px; border-radius: calc(11px * var(--rf, 1)); display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); flex: none; box-shadow: inset 0 0 0 1px var(--line-soft); }
.tile-ico.brand { background: var(--brand-50); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.tile-ico.green { background: var(--green-bg); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 14%, transparent); }
.tile-ico.red { background: var(--red-bg); color: var(--red); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 14%, transparent); }
.tile-ico.amber { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 14%, transparent); }
.tile-ico.blue { background: var(--blue-bg); color: var(--blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); }
.tile-ico.purple { background: var(--purple-bg); color: var(--purple); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 14%, transparent); }

.kv { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 0; font-size: .9rem; margin: 0; }
.kv dt, .kv dd { padding: 11px 0; border-bottom: 1px solid var(--line-soft); margin: 0; min-width: 0; }
.kv dt { color: var(--muted); }
.kv dd { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 18px 28px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: -6px; width: 2px; background: var(--line); border-radius: calc(2px * var(--rf, 1)); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); }
.timeline li.done::after { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.timeline .t { font-weight: 600; font-size: .875rem; color: var(--ink); }
.timeline .s { font-size: .8rem; color: var(--muted); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hint-list { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.5; }
.checklist li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--e1); }
.checklist li.done { background: var(--paper-2); border-color: var(--line-soft); box-shadow: none; }
.checklist li.done .t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.checklist .mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; flex: none; color: transparent; }
.checklist li.done .mark { background: var(--green); border-color: var(--green); color: #fff; }
.checklist .mark .icon { width: 14px; height: 14px; stroke-width: 3; }
.checklist .t { flex: 1; font-weight: 550; font-size: .9rem; color: var(--ink); }

/* ---------- Order composer ---------- */
.order-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .order-layout { grid-template-columns: minmax(0, 1fr) 348px; gap: 20px; } .order-summary { position: sticky; top: calc(var(--topbar-h) + 24px); } }
.picker-trigger {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 66px; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; box-shadow: var(--e1);
}
.picker-trigger:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line-strong)); box-shadow: var(--e2); }
.picker-trigger:focus-visible { border-color: var(--brand); box-shadow: var(--ring); outline: 2px solid transparent; }
.picker-trigger .grow { flex: 1; min-width: 0; }
.picker-trigger .t { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-trigger .s { font-size: .82rem; color: var(--muted); display: block; }
.picker-trigger.placeholder .t { color: var(--ink-2); font-weight: 550; }
/* Numbered panel headers on the order form: choosing a service and filling in the details are real steps. */
.step-no { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; align-self: flex-start; margin-top: 1px; font: 650 .82rem/1 var(--font-display); font-feature-settings: normal; color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent); }
.svc-id { display: inline-grid; place-items: center; min-width: 46px; height: 22px; padding: 0 6px; border-radius: calc(6px * var(--rf, 1)); background: var(--sunken); color: var(--muted); font: 600 .72rem/1 var(--font); font-variant-numeric: tabular-nums; flex: none; box-shadow: inset 0 0 0 1px var(--line-soft); }
.svc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.svc-facts > div { padding: 12px 14px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin: 0 -1px -1px 0; }
.svc-facts .k { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.svc-facts .k .icon { width: 14px; height: 14px; }
.svc-facts .v { font-weight: 650; font-size: .92rem; margin-top: 3px; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Narrow phones: facts become label/value rows so neither side has to wrap. */
@media (max-width: 479px) {
  .svc-facts { grid-template-columns: minmax(0, 1fr); }
  .svc-facts > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; border-right: 0; }
  .svc-facts .v { margin-top: 0; text-align: right; }
  .svc-facts > div > :nth-child(n+3) { flex-basis: 100%; }
}
.svc-desc { font-size: .875rem; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px 14px; max-height: 220px; overflow: auto; }
.svc-desc ul { padding-left: 18px; margin: 6px 0; }
.qty-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qty-chips button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: 550 .8rem/1 var(--font); color: var(--ink-2); cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s, background-color .15s; box-shadow: 0 1px 1px rgba(12, 26, 30, .03); }
.qty-chips button:hover { border-color: var(--brand-200); color: var(--brand-hover); }
.qty-chips button[aria-pressed="true"] { background: var(--brand-50); border-color: var(--brand); color: var(--brand-hover); }
.qty-chips button:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--ring); }
.summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 16px; margin-top: 8px; border-top: 1px dashed var(--line-strong); }
.summary-total .figure { font-family: var(--font-display); font-weight: 620; font-size: 1.8rem; letter-spacing: -0.03em; color: var(--ink); }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .875rem; color: var(--muted); }
.summary-row strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.order-bar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); z-index: 44; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(12, 26, 30, .35);
}
.order-bar .amt { flex: 1; min-width: 0; }
.order-bar .amt span { display: block; font-size: .74rem; color: var(--muted); }
.order-bar .amt strong { font-family: var(--font-display); font-weight: 620; font-size: 1.2rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .order-bar { bottom: 0; } }
@media (min-width: 1024px) and (max-width: 1099px) {
  .order-bar { left: calc(var(--sidebar-w) + 1px); right: 11px; bottom: 11px; padding: 12px 24px; border-radius: 0 0 var(--sheet-r) var(--sheet-r); }
}
@media (min-width: 1100px) { .order-bar { display: none; } }
.has-order-bar .main { padding-bottom: calc(var(--bottom-h) + 110px + env(safe-area-inset-bottom)); }

.picker-search { position: sticky; top: 0; background: var(--paper); padding: 16px 20px 12px; border-bottom: 1px solid var(--line-soft); z-index: 2; }
.picker-search input { width: 100%; height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0 14px 0 42px; font: inherit; color: var(--ink); background: var(--paper); box-shadow: inset 0 1px 2px rgba(12, 26, 30, .035); }
.picker-search input:focus { border-color: var(--brand); box-shadow: var(--focus); outline: 2px solid transparent; }
.picker-search > .icon { position: absolute; left: 34px; top: 30px; color: var(--faint); pointer-events: none; }
.picker-search .chip-row { margin-top: 10px; }
.picker-list { padding: 6px 10px 14px; }
.picker-group { font-size: .78rem; font-weight: 650; color: var(--muted); padding: 14px 10px 6px; display: flex; align-items: center; gap: 8px; }
.picker-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px; border-radius: var(--r-md); border: 1px solid transparent; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: background-color .12s; }
.picker-item:hover, .picker-item.focused { background: var(--paper-2); border-color: var(--line-soft); }
.picker-item.selected { background: var(--brand-50); border-color: var(--brand-100); }
.picker-item .grow { flex: 1; min-width: 0; }
.picker-item .t { font-weight: 550; font-size: .9rem; line-height: 1.35; }
.picker-item .s { font-size: .78rem; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.picker-item .price { font-weight: 650; font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.picker-item .price small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; text-align: right; }
.picker-more { display: flex; justify-content: center; padding: 12px 0 4px; }
.fav-btn { color: var(--faint); }
.fav-btn.on { color: var(--live); }
.fav-btn.on svg { fill: currentColor; }

/* ---------- Command palette ---------- */
.cmdk-card { max-width: 640px !important; overflow: hidden; }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.cmdk-input > .icon { color: var(--brand); }
.cmdk-input input { flex: 1; border: 0; font: 500 1.02rem var(--font); color: var(--ink); background: transparent; min-width: 0; }
.cmdk-input input:focus-visible { outline: 2px solid transparent; }
.cmdk-input:focus-within { box-shadow: inset 0 -2px 0 var(--brand); }
.cmdk-results { max-height: min(60vh, 460px); overflow-y: auto; padding: 8px; }
.cmdk-section { font-size: .74rem; color: var(--faint); font-weight: 650; padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: calc(10px * var(--rf, 1)); color: var(--ink-2); cursor: pointer; }
.cmdk-item .icon { color: var(--faint); }
.cmdk-item.focused, .cmdk-item:hover { background: var(--brand-50); color: var(--ink); text-decoration: none; }
.cmdk-item.focused .icon, .cmdk-item:hover .icon { color: var(--brand); }
.cmdk-item .hint { margin-left: auto; font-size: .76rem; color: var(--faint); }
.cmdk-foot { display: flex; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--line-soft); font-size: .76rem; color: var(--muted); background: var(--paper-2); }

/* ---------- Ticket conversation ---------- */
.thread { display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 10px; max-width: 760px; }
.msg .bubble { border: 1px solid var(--line); border-radius: calc(4px * var(--rf, 1)) var(--r-lg) var(--r-lg) var(--r-lg); padding: 12px 14px; background: var(--paper); min-width: 0; flex: 1; box-shadow: var(--e1); }
.msg.mine { margin-left: auto; flex-direction: row-reverse; }
.msg.mine .bubble { background: var(--brand-50); border-color: var(--brand-100); border-radius: var(--r-lg) calc(4px * var(--rf, 1)) var(--r-lg) var(--r-lg); }
.msg.internal .bubble { background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 25%, transparent); border-style: dashed; box-shadow: none; }
.msg .meta { font-size: .76rem; color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.msg .meta strong { color: var(--ink); }
.msg .text { font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.attachment { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line); font-size: .82rem; }

/* ---------- Markdown content ---------- */
.prose { font-size: 1rem; line-height: 1.72; color: var(--ink-2); max-width: 72ch; overflow-wrap: break-word; }
.prose h2 { font-family: var(--font-display); font-weight: 620; letter-spacing: -0.02em; font-size: 1.4rem; margin: 1.8em 0 .5em; }
.prose h3 { font-size: 1.12rem; margin: 1.5em 0 .4em; }
.prose h4 { font-size: 1rem; margin: 1.3em 0 .4em; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose .md-table { margin: 0 0 1.05em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .3em; }
.prose li::marker { color: var(--brand); }
.prose img { border-radius: var(--r-lg); border: 1px solid var(--line); margin: 1.2em 0; }
.prose blockquote { border-left: 3px solid var(--brand); padding: .2em 0 .2em 1em; color: var(--ink); }
.prose .md-table { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose th { background: var(--paper-2); }
.prose .text-center { text-align: center; } .prose .text-right { text-align: right; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose > :first-child { margin-top: 0; }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; }
@media (min-width: 1024px) { .auth-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
/* The aside is a porcelain panel with the engraved texture and a product preview: same white system as the app. */
.auth-aside {
  display: none; color: var(--ink); padding: 44px 48px; margin: 12px; border-radius: calc(24px * var(--rf, 1)); border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--canvas) 30%, color-mix(in srgb, var(--brand-50) 75%, var(--canvas)));
}
.auth-aside::before { opacity: .17; -webkit-mask-image: url("../img/engrave-waves.svg?v=1"), linear-gradient(180deg, #000 0%, transparent 70%); mask-image: url("../img/engrave-waves.svg?v=1"), linear-gradient(180deg, #000 0%, transparent 70%); }
.auth-aside::after { width: 520px; height: 520px; right: -170px; top: auto; bottom: -190px; opacity: .2; }
@media (min-width: 1024px) {
  /* Kept in view beside long forms such as sign-up. */
  .auth-aside { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; position: sticky; top: 12px; align-self: start; min-height: calc(100vh - 24px); min-height: calc(100dvh - 24px); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .auth-aside { padding: 32px 40px; gap: 24px; }
  .auth-aside h2 { font-size: 1.9rem; }
  .auth-points { display: none; }
}
.auth-aside h2 { color: var(--ink); font-family: var(--font-display); font-weight: 620; font-size: clamp(2rem, 2.9vw, 2.6rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 15ch; text-wrap: balance; }
.auth-aside p { color: var(--muted); max-width: 44ch; font-size: 1.02rem; }
.auth-aside .grid-art { display: none; }
.auth-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.auth-points li { display: flex; align-items: center; gap: 12px; font-weight: 550; color: var(--ink-2); font-size: .95rem; }
.auth-points .icon { width: 30px; height: 30px; padding: 7px; border-radius: 50%; color: var(--brand); background: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent), var(--e1); }
.auth-aside .ticker { display: grid; gap: 10px; max-width: 440px; padding: 16px; background: color-mix(in srgb, var(--paper) 82%, transparent); border: 1px solid var(--line); border-radius: calc(20px * var(--rf, 1)); box-shadow: var(--e3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ticker-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line-soft); box-shadow: var(--e1); }
.ticker-row .ico { width: 36px; height: 36px; border-radius: calc(11px * var(--rf, 1)); display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.ticker-row .grow { flex: 1; min-width: 0; }
.ticker-row .t { font-weight: 600; font-size: .9rem; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.ticker-row .s { font-size: .78rem; color: var(--muted); font-weight: 550; font-variant-numeric: tabular-nums; }
.ticker-row progress.bar { height: 6px; margin-top: 8px; }
.ticker-note { font-size: .78rem; color: var(--muted); margin: 0 0 2px 4px; font-weight: 550; }
.auth-main { display: flex; flex-direction: column; padding: 22px 18px calc(28px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .auth-main { padding: 32px 48px; } }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-form { width: 100%; max-width: 420px; margin: auto; padding: 36px 0; }
@media (max-width: 639px) {
  /* Phones: the form starts under the header, so it stays put above the on-screen keyboard. */
  .auth-form { margin: 0 auto auto; padding: 44px 0 32px; }
}
@media (max-width: 1023px) {
  /* Without the aside, the form column carries a faint corner of the engraved rosette. */
  .auth-main { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
  .auth-main::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--brand);
    width: 320px; height: 320px; right: -150px; top: -150px; opacity: .1;
    -webkit-mask: url("../img/engrave-rosette.svg?v=1") center / contain no-repeat; mask: url("../img/engrave-rosette.svg?v=1") center / contain no-repeat;
  }
}
.auth-form h1 { font-size: 2rem; letter-spacing: -0.03em; }
.auth-form .lead { color: var(--muted); margin: 10px 0 28px; }
.auth-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.auth-foot { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 20px; }
.divider-text { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: .8rem; margin: 20px 0; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* "Continue with Google": a neutral button with a lettered mark (no third-party logo is bundled). */
.btn-google { --btn-bg: var(--paper); --btn-bd: var(--line-strong); --btn-fg: var(--ink); font-weight: 600; }
.btn-google:hover { --btn-bg: var(--paper-2); color: var(--ink); text-decoration: none; }
.btn-google .g-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); font: 700 .85rem/1 var(--font); color: #1a73e8; background: #fff; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.pw-meter span { height: 4px; border-radius: calc(4px * var(--rf, 1)); background: var(--line); transition: background .2s; }
.pw-meter[data-score="1"] span:nth-child(-n+1) { background: var(--red); }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--live); }
.pw-meter[data-score="3"] span:nth-child(-n+3) { background: var(--green); }
.pw-meter[data-score="4"] span { background: var(--green); }
.otp-input { letter-spacing: .5em; font-size: 1.4rem !important; text-align: center; font-variant-numeric: tabular-nums; font-family: var(--font-mono) !important; }

/* ---------- Public site ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(12, 26, 30, .35); }
.site-header .inner { display: flex; align-items: center; gap: 18px; height: 72px; }
.site-nav { display: none; gap: 2px; margin-left: 22px; }
.site-nav a { padding: 8px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 550; font-size: .9rem; transition: color .15s, background-color .15s; }
.site-nav a:hover, .site-nav a.active { color: var(--ink); background: var(--sunken); text-decoration: none; }
@media (min-width: 900px) { .site-nav { display: flex; } .site-menu-btn { display: none !important; } }
.site-header .cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 520px) {
  .site-header .cta .btn-ghost { display: none; }
  .site-header .cta .btn { min-height: 38px; padding: 0 13px; font-size: .86rem; }
  .site-header .inner { gap: 12px; height: 64px; }
}
@media (max-width: 430px) {
  .site-header .cta { gap: 4px; }
  .site-header .cta .btn { min-height: 36px; padding: 0 11px; font-size: .84rem; }
  .site-header .brand { font-size: .9rem; gap: 8px; }
  .site-header .brand-mark { width: 30px; height: 30px; }
  .site-header .inner { gap: 10px; }
}
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
.mobile-nav { display: none; border-top: 1px solid var(--line); padding: 8px 0 16px; }
.mobile-nav.open { display: block; animation: menu-in .18s var(--ease); }
.mobile-nav a { display: flex; padding: 13px 4px; color: var(--ink); font-weight: 550; border-bottom: 1px solid var(--line-soft); }
.mobile-nav a:hover { text-decoration: none; color: var(--brand-hover); }

/* Hero: the price calculator is the product demo; the engraving sits behind it, fading out towards the headline. */
.hero { padding: 44px 0 40px; background: linear-gradient(180deg, var(--paper) 0%, var(--canvas) 100%); border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.hero::before {
  opacity: .16;
  -webkit-mask-image: url("../img/engrave-waves.svg?v=1"), linear-gradient(255deg, #000 15%, transparent 62%);
  mask-image: url("../img/engrave-waves.svg?v=1"), linear-gradient(255deg, #000 15%, transparent 62%);
}
.hero::after { width: 760px; height: 760px; right: -260px; top: -150px; opacity: .13; }
@media (max-width: 1023px) { .hero::after { width: 520px; height: 520px; right: -230px; top: auto; bottom: -160px; } }
@media (min-width: 1024px) { .hero { padding: 80px 0 76px; } }
.hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; }
}
.hero h1 { font-family: var(--font-display); font-weight: 640; font-size: clamp(2.3rem, 5.8vw, 4.05rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 15ch; text-wrap: balance; }
.hero .lede { font-size: clamp(1.04rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 48ch; margin: 22px 0 30px; line-height: 1.6; }
@media (max-width: 599px) { .hero .btn-row > .btn { flex: 1 1 auto; } }
.hero .proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; max-width: 560px; }
.hero .proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero .proof .icon { color: var(--brand); width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--brand-50); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent); }
/* The card beside the headline: guests get the sign-in card, signed-in visitors their balance and next steps.
   Phones and tablets: right under the introduction, before the buttons (DOM order). Computers: beside the headline,
   spanning its rows; the copy stays top-aligned, so nothing the browser paints later can move it (layout shift). */
.hero-grid.has-signin, .hero-grid.has-account { gap: 0; }
:is(.has-signin, .has-account) > .lede { margin-bottom: 26px; }
:is(.has-signin, .has-account).no-lede > h1 { margin-bottom: 26px; } /* no introduction under the headline */
.has-signin > .signin-card, .has-account > .account-card { margin: 2px 0 30px; }
@media (min-width: 600px) and (max-width: 1023px) { .has-signin > .signin-card, .has-account > .account-card { max-width: 540px; } }
@media (min-width: 1024px) {
  .hero-grid.has-signin, .hero-grid.has-account { grid-template-rows: repeat(4, auto) 1fr; column-gap: 64px; }
  :is(.hero-grid.has-signin, .hero-grid.has-account) > * { grid-column: 1; }
  .hero-grid.has-signin > .signin-card, .hero-grid.has-account > .account-card { grid-column: 2; grid-row: 1 / -1; margin: 0; width: 100%; max-width: 470px; justify-self: end; }
  .hero-grid.has-account > .account-card { align-self: center; max-width: 440px; }
  :is(.hero-grid.has-signin, .hero-grid.has-account) > h1 { margin-top: 26px; }
  :is(.has-signin, .has-account) > .lede, :is(.has-signin, .has-account).no-lede > h1 { margin-bottom: 30px; }
}
/* Short laptop screens: less air around the card, so the security check and Google sign-in stay in the first screen. */
@media (min-width: 1024px) and (max-height: 760px) {
  .hero-signin { padding: 36px 0 44px; }
  .hero-signin .signin-card { padding: 22px 26px; }
  .hero-signin .signin-head { margin-bottom: 16px; }
  .hero-signin .signin-card .divider-text { margin: 12px 0; }
  .hero-signin .signin-foot { margin-top: 16px; padding-top: 14px; }
}
.signin-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: calc(24px * var(--rf, 1)); padding: 22px 20px; position: relative;
  box-shadow: 0 1px 2px rgba(12, 26, 30, .04), 0 32px 64px -28px rgba(12, 26, 30, .3), 0 0 0 6px color-mix(in srgb, var(--paper) 55%, transparent);
}
@media (min-width: 640px) { .signin-card { padding: 30px; } }
.signin-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.signin-head .tile-ico { width: 42px; height: 42px; border-radius: calc(12px * var(--rf, 1)); }
.signin-head .tile-ico .icon { width: 19px; height: 19px; }
.signin-head h2 { font-family: var(--font-display); font-weight: 640; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.1; margin: 1px 0 0; font-feature-settings: normal; }
.signin-head p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.signin-card .divider-text { margin: 18px 0; }
.signin-foot { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); text-align: center; color: var(--muted); font-size: .92rem; }
.signin-foot a { font-weight: 600; display: inline-block; } /* the link moves to its own line rather than breaking */
/* One entrance on the public home page: the hero card settles into place. Transform only, so the card is
   visible (and counted for Largest Contentful Paint) from the first frame. */
@media (prefers-reduced-motion: no-preference) {
  .hero .account-card, .hero .signin-card { animation: rise .8s var(--ease) .05s both; }
  .hero .signin-card:target { animation: none; } /* opened at #sign-in: the browser scrolls to where the card really is */
}
@keyframes rise { from { transform: translateY(18px) scale(.985); } to { transform: none; } }

/* Payment methods under the figures in the hero: names as staff configured them. */
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; max-width: 560px; }
.pay-label { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--muted); }
.pay-label .icon { width: 16px; height: 16px; color: var(--brand); }
.pay-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pay-list li { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: .82rem; font-weight: 600; color: var(--ink-2); box-shadow: var(--e1); }

/* Signed in: the balance and the next steps beside the headline (instead of the sign-in card). */
.account-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: calc(24px * var(--rf, 1)); padding: 22px 20px; position: relative;
  box-shadow: 0 1px 2px rgba(12, 26, 30, .04), 0 32px 64px -28px rgba(12, 26, 30, .3), 0 0 0 6px color-mix(in srgb, var(--paper) 55%, transparent);
}
@media (min-width: 640px) { .account-card { padding: 28px; } }
.account-card-head { display: flex; align-items: center; gap: 14px; }
.account-card-head h2 { font-family: var(--font-display); font-weight: 640; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.15; margin: 0; }
.account-card-head p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.account-balance { margin-top: 20px; padding: 16px 18px; border-radius: calc(16px * var(--rf, 1)); background: var(--canvas); border: 1px solid var(--line-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.account-balance > span { font-size: .84rem; font-weight: 600; color: var(--muted); }
.account-balance strong { font-family: var(--font-display); font-weight: 640; font-size: clamp(1.6rem, 4vw, 2rem); letter-spacing: -0.035em; line-height: 1; color: var(--ink); overflow-wrap: anywhere; }
.account-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.account-actions .btn { justify-content: center; }
.account-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.account-links a { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 10px; border-radius: calc(10px * var(--rf, 1)); color: var(--ink-2); font-weight: 550; font-size: .9rem; }
.account-links a:hover { background: var(--sunken); color: var(--ink); text-decoration: none; }
.account-links .icon { width: 17px; height: 17px; color: var(--brand); flex: none; }
@media (max-width: 379px) { .account-actions { grid-template-columns: minmax(0, 1fr); } }

/* Platform tiles: one per platform the shop sells, the best-known first, then "All services". */
.pf-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .pf-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .pf-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: calc(18px * var(--rf, 1));
  background: var(--paper); color: var(--ink); box-shadow: var(--e1); transition: border-color .18s, box-shadow .18s, transform .18s var(--ease);
}
@media (min-width: 600px) { .pf-card { padding: 20px; gap: 16px; } }
.pf-card:hover { border-color: var(--brand-200); box-shadow: var(--e2); transform: translateY(-1px); text-decoration: none; color: var(--ink); }
.pf-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pf-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pf-card-top .tile-ico { width: 44px; height: 44px; border-radius: calc(12px * var(--rf, 1)); }
.pf-card .go { color: var(--faint); display: inline-flex; transition: color .18s, transform .18s var(--ease); }
.pf-card .go .icon { width: 18px; height: 18px; }
.pf-card:hover .go { color: var(--brand); transform: translate(2px, -2px); }
.pf-card-name { font-family: var(--font-display); font-weight: 640; font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.pf-card-meta { display: grid; gap: 2px; font-size: .82rem; color: var(--muted); margin-top: -8px; }
.pf-card-price { color: var(--ink-2); font-weight: 550; }
.pf-card-all { background: linear-gradient(160deg, var(--paper) 35%, color-mix(in srgb, var(--brand-50) 85%, var(--paper))); border-style: dashed; border-color: var(--brand-200); }
@media (max-width: 599px) { .pf-card.pf-more { display: none; } }
@media (prefers-reduced-motion: reduce) { .pf-card, .pf-card .go { transition: none; } .pf-card:hover, .pf-card:hover .go { transform: none; } }

/* Popular services: name and facts, price, and the order button. Phones: the price and button go under the name. */
.pop-list { display: grid; gap: 10px; }
.pop-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon main main" "price price order"; align-items: center; gap: 12px 14px;
  padding: 16px; border: 1px solid var(--line); border-radius: calc(18px * var(--rf, 1)); background: var(--paper); box-shadow: var(--e1);
}
.pop-row > .pf { grid-area: icon; align-self: start; }
.pop-main { grid-area: main; min-width: 0; }
.pop-price { grid-area: price; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pop-order { grid-area: order; justify-self: end; }
@media (min-width: 760px) {
  .pop-row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon main price order"; gap: 16px 22px; padding: 16px 20px; }
  .pop-row > .pf { align-self: center; }
  .pop-price { flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
}
.pop-name { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.pop-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 8px 0 0; padding: 0; font-size: .8rem; color: var(--muted); }
.pop-facts li { display: inline-flex; align-items: center; gap: 6px; }
.pop-facts li > .icon { width: 14px; height: 14px; color: var(--faint); flex: none; }
.pop-facts .badge > .icon { color: inherit; }
.pop-price strong { font-family: var(--font-display); font-weight: 640; font-size: 1.3rem; letter-spacing: -0.025em; line-height: 1; color: var(--ink); white-space: nowrap; }
.pop-price span { font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* Latest service updates: the heading beside the list on wide screens. */
.updates-grid { display: grid; gap: 8px 64px; }
@media (min-width: 1024px) { .updates-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.updates-grid > .panel .list-item .faint { flex: none; }

.section { padding: 64px 0; }
@media (min-width: 1024px) { .section { padding: 96px 0; } }
.section-alt { background: var(--canvas); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-head { max-width: 660px; margin-bottom: 36px; }
.section-head h2 { font-family: var(--font-display); font-weight: 630; font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.06; text-wrap: balance; }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.05rem; line-height: 1.6; }
/* A real sequence: numbered markers joined by a hairline on wide screens. */
.steps { display: grid; gap: 22px; counter-reset: step; position: relative; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; border-top: 1px dashed var(--line-strong); }
}
.step { position: relative; }
.step::before {
  counter-increment: step; content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 50%; position: relative;
  font-family: var(--font-display); font-weight: 650; font-size: 1.15rem; color: var(--brand); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--brand-200), 0 0 0 6px var(--paper), 0 0 0 7px var(--line-soft);
}
.step h3 { font-size: 1.1rem; margin-bottom: 8px; letter-spacing: -0.015em; }
.step p { color: var(--muted); font-size: .95rem; }
/* Very narrow phones: one tile per row, logo beside the name. */
@media (max-width: 359px) {
  .pf-board { grid-template-columns: minmax(0, 1fr); }
  .pf-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; }
  .pf-card-top { grid-row: 1 / span 2; }
  .pf-card-top .go { display: none; }
  .pf-card-meta { margin-top: 0; }
}
.feature-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .feature-list { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.feature { display: flex; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.feature .tile-ico { width: 44px; height: 44px; border-radius: calc(13px * var(--rf, 1)); }
.feature h3 { font-size: 1.04rem; margin-bottom: 5px; letter-spacing: -0.012em; }
.feature p { color: var(--muted); font-size: .94rem; margin: 0; }
.faq-layout { display: grid; gap: 8px 64px; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .faq-layout > .section-head { position: sticky; top: 104px; } }
.faq { max-width: 820px; interpolate-size: allow-keywords; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary > .faq-q { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; } /* questions are real headings for search and screen readers */
.faq summary > .icon { transition: transform .25s var(--ease), background-color .2s, color .2s; color: var(--ink-2); width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--sunken); }
.faq summary:hover > .icon { background: var(--brand-50); color: var(--brand); }
.faq details[open] summary > .icon { transform: rotate(45deg); background: var(--brand); color: var(--brand-ink); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq .answer { padding: 0 0 22px; color: var(--muted); max-width: 70ch; }
.faq .answer.prose { padding-right: 44px; }
/* Other disclosures (order lines, request logs, "Details"): a small chevron instead of the browser's triangle. */
details:not(.faq > details) > summary { cursor: pointer; list-style: none; width: fit-content; max-width: 100%; border-radius: calc(6px * var(--rf, 1)); }
details:not(.faq > details) > summary::-webkit-details-marker { display: none; }
details:not(.faq > details) > summary::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: currentColor; opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .2s var(--ease);
}
details[open]:not(.faq > details) > summary::before { transform: rotate(90deg); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .28s var(--ease), content-visibility .28s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
/* Closing call to action: a white card with the engraving, not a dark block. */
.cta-band {
  border-radius: calc(28px * var(--rf, 1)); color: var(--ink); padding: 40px 24px; display: grid; gap: 22px; align-items: center; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--paper) 35%, color-mix(in srgb, var(--brand-50) 85%, var(--paper))); box-shadow: var(--e2);
}
.cta-band::after { width: 460px; height: 460px; right: -120px; top: -150px; opacity: .2; }
@media (min-width: 860px) { .cta-band { grid-template-columns: 1fr auto; padding: 56px 60px; } }
.cta-band h2 { color: var(--ink); font-family: var(--font-display); font-weight: 630; font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.08; }
.cta-band p { color: var(--muted); margin-top: 10px; max-width: 52ch; font-size: 1.02rem; }
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 calc(32px + env(safe-area-inset-bottom)); margin-top: 72px; font-size: .9rem; color: var(--muted); background: var(--canvas); }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; } }
.site-footer h3 { font-size: .86rem; color: var(--ink); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer .brand, .site-footer .brand:hover { color: var(--ink); }
.site-footer .footer-grid p { max-width: 36ch; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .84rem; }
.price-table td .svc-name { font-weight: 550; color: var(--ink); }
.post-card { display: flex; flex-direction: column; border-radius: calc(16px * var(--rf, 1)); overflow: hidden; border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: var(--e1); transition: border-color .18s, box-shadow .18s, transform .18s var(--ease); }
.post-card:hover { text-decoration: none; color: var(--ink); border-color: var(--line-strong); box-shadow: var(--e2); transform: translateY(-1px); }
.post-card .cover { aspect-ratio: 16/9; background: var(--sunken); object-fit: cover; width: 100%; }
/* Blog list: cards keep a card's width (a lone post does not stretch across the page); on wide screens the
   newest post on the first page is featured across the row, cover beside the text. */
.post-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 860px) {
  .post-grid > .post-card.featured { grid-column: 1 / -1; flex-direction: row; }
  .post-grid > .post-card.featured > .cover, .post-grid > .post-card.featured > .post-cover { flex: 0 0 50%; width: 50%; height: auto; min-height: 300px; aspect-ratio: auto; }
  .post-grid > .post-card.featured > .body { flex: 1; min-width: 0; align-self: center; padding: 32px 36px; }
  .post-grid > .post-card.featured h2 { font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.2; }
  .post-grid > .post-card.featured .post-cover-badge { width: 64px; height: 64px; }
  .post-grid > .post-card.featured .post-cover-badge .icon { width: 30px; height: 30px; }
}
.post-card .body { padding: 18px 20px 20px; }
.post-card h3 { font-size: 1.08rem; margin-bottom: 6px; letter-spacing: -0.012em; }
.post-card p { color: var(--muted); font-size: .9rem; }
.post-meta { font-size: .82rem; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.article-head { max-width: 780px; padding: 56px 0 24px; }
.article-head h1 { font-family: var(--font-display); font-weight: 640; font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -0.035em; line-height: 1.06; }

/* ---------- Settings ---------- */
.settings-nav { width: 236px; position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; }
.settings-nav .nav-group + .nav-group { margin-top: 12px; }
.settings-nav .nav-link.active { background: var(--brand-50); color: var(--brand-hover); box-shadow: none; }
.save-bar { position: sticky; bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); z-index: 5; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 0 0 var(--r-lg) var(--r-lg); }
@media (min-width: 768px) { .save-bar { bottom: 0; } }

/* ---------- Dense label-above inputs ---------- */
.field-plain { min-width: 0; }
.field-plain.invalid .input, .field-plain.invalid .select, .field-plain.invalid .textarea { border-color: var(--red); }
.field-plain .error { display: flex; align-items: flex-start; gap: 6px; color: var(--red); font-size: .8rem; margin-top: 6px; }
.field-plain .error .icon { width: 14px; height: 14px; margin-top: 2px; }
.empty .art.brand { background: var(--brand-50); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent), var(--e1), 0 0 0 8px color-mix(in srgb, var(--brand-50) 60%, transparent), 0 0 0 16px color-mix(in srgb, var(--brand-50) 30%, transparent); }
/* Error pages: centred, with the status code as a small label above the title. */
.error-page { padding: 12vh 20px 10vh; }
.error-page .art { width: 64px; height: 64px; border-radius: calc(20px * var(--rf, 1)); }
.error-page .art .icon { width: 28px; height: 28px; }
.error-page h1 { font-size: 2rem; }
.error-page p { max-width: 44ch; }

/* ---------- Installer ---------- */
.install-body { background: var(--canvas); }
.install { width: 100%; max-width: 760px; margin: 0 auto; padding: 28px 16px calc(40px + env(safe-area-inset-bottom)); }
.install-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.install-steps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.install-steps::-webkit-scrollbar { display: none; }
.install-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); font-size: .82rem; font-weight: 550; white-space: nowrap; box-shadow: var(--e1); }
.install-steps .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.install-steps .n .icon { width: 13px; height: 13px; stroke-width: 3; }
.install-steps li.current { border-color: var(--brand); color: var(--ink); }
.install-steps li.current .n { background: var(--brand); color: var(--brand-ink); }
.install-steps li.done .n { background: var(--green-bg); color: var(--green); }
/* The installer has no copy button or scroll hints, so its cron command wraps; on phones only the current step keeps its
   label on screen (the others keep theirs for screen readers), so the step you are on is always in view. */
.install .input-copy code { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .install-steps li { position: relative; }
  .install-steps li:not(.current) { padding: 6px; }
  .install-steps li:not(.current) > span:not(.n) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .install-steps li { flex: none; }
  .install-steps li.current { flex: 0 1 auto; min-width: 0; }
  .install-steps li.current > span:not(.n) { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 359px) {
  .install-steps { gap: 4px; }
  .install-steps li:not(.current) { padding: 4px; }
  .install-steps li.current { padding-right: 10px; }
}
.install-howto { margin: 0 0 18px; padding-left: 1.2em; color: var(--ink-2); line-height: 1.7; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.check-item:last-child { border-bottom: 0; }
.check-item .grow { min-width: 0; }
.check-item .t { display: block; font-weight: 600; color: var(--ink); font-size: .92rem; }
.check-item .s { display: block; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.check-item .mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sunken); color: var(--muted); }
.check-item .mark .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.check-item .mark.ok { background: var(--green-bg); color: var(--green); }
.check-item .mark.bad { background: var(--red-bg); color: var(--red); }
.check-item .mark.warn { background: var(--amber-bg); color: var(--amber); }

/* ---------- Utilities ---------- */
.muted { color: var(--muted); } .faint { color: var(--faint); } .ink { color: var(--ink); }
/* Tone utilities win over component text colours (e.g. a green amount inside .kv dd or .summary-row strong). */
.text-green { color: var(--green) !important; } .text-red { color: var(--red) !important; } .text-amber { color: var(--amber) !important; } .text-brand { color: var(--brand) !important; }
.strong { font-weight: 600; } .semibold { font-weight: 600; } .bold { font-weight: 700; }
.text-right { text-align: right; } .text-center { text-align: center; } .text-left { text-align: left; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .min-w-0 { min-width: 0; }
/* A link that sits inside muted running text: underlined so it never relies on colour alone. */
.link-u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.break { overflow-wrap: anywhere; word-break: break-word; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; } .mt-6 { margin-top: 32px; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.block { display: block; }
.pt-hero { padding-top: 12vh; }
.fs-sm { font-size: .85rem; } .fs-xs { font-size: .78rem; } .fs-lg { font-size: 1.1rem; }
.hide-sm { display: none !important; }
@media (min-width: 640px) { .hide-sm { display: revert !important; } .show-sm-only { display: none !important; } }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .show-mobile { display: none !important; } }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.dot-sep::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin: 0 7px 3px; opacity: .6; }
.impersonation-bar { position: sticky; top: 0; z-index: 70; background: var(--amber-bg); color: var(--amber); border-bottom: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); padding: 8px var(--gutter); font-size: .86rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.impersonation-bar form { margin-left: auto; }
.test-ribbon { font-size: .74rem; font-weight: 650; color: var(--amber); }

/* ---------- Visitor extras from Admin → Appearance and Code & tracking ---------- */
/* Message bar above the header (public site) or above the page content (customer area). */
.topbar-msg { position: relative; z-index: 5; font-size: .9rem; line-height: 1.45; }
.topbar-off .topbar-msg { display: none; }
.topbar-msg-inner { max-width: 1200px; margin: 0 auto; padding: 8px 20px; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.topbar-msg p { margin: 0; flex: 0 1 auto; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.topbar-msg a { color: inherit; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.topbar-msg a:hover { text-decoration-thickness: 2px; }
.topbar-msg a .icon { width: 15px; height: 15px; }
.topbar-msg .icon-btn { flex: none; width: 32px; height: 32px; color: inherit; margin-right: -8px; }
.topbar-msg .icon-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.topbar-msg-brand { background: var(--brand); color: var(--brand-ink); }
.topbar-msg-brand a:focus-visible, .topbar-msg-brand .icon-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; box-shadow: none; }
.topbar-msg-neutral { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.topbar-msg-attention { background: var(--amber-bg); color: var(--amber); border-bottom: 1px solid color-mix(in srgb, var(--amber) 28%, transparent); }
.app-body .topbar-msg { border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; }
.app-body .topbar-msg-inner { justify-content: flex-start; padding: 9px 14px; }
.app-body .topbar-msg p { text-align: left; flex: 1 1 auto; }
.app-body .topbar-msg-neutral { border: 1px solid var(--line); box-shadow: var(--e1); }

/* Floating WhatsApp / Telegram button: a plain link, white glyph on the service colour (3:1 or better). */
.contact-fab {
  position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  box-shadow: 0 10px 24px -8px rgba(12, 26, 30, .45), 0 2px 6px rgba(12, 26, 30, .16); transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.contact-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(12, 26, 30, .5), 0 3px 8px rgba(12, 26, 30, .18); text-decoration: none; }
.contact-fab:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.contact-fab-glyph { width: 28px; height: 28px; fill: currentColor; }
.contact-fab-whatsapp { background: #128c7e; }
.contact-fab-telegram { background: #1c7fb8; }
.app-body .contact-fab { bottom: calc(var(--bottom-h) + 14px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .app-body .contact-fab { bottom: 24px; right: 24px; } }
/* The end of the page keeps room for the button too, so the last links and controls can scroll clear of it. */
body:has(.contact-fab) .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) { .app-body:not(.has-order-bar):has(.contact-fab) .main { padding-bottom: calc(var(--bottom-h) + 84px + env(safe-area-inset-bottom)); } }
@media (min-width: 768px) { .app-body:has(.contact-fab) .main { padding-bottom: 96px; } }
/* Out of sight and out of the keyboard order while the cookie banner asks (it sits where the button would be). */
body:has(.consent:not([hidden]):not(.leaving)) .contact-fab { visibility: hidden; }

/* Cookie banner ("Ask first"): shown by app.js, so it never appears where it could not work. */
.consent {
  position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--e4);
  padding: 18px 18px 16px; display: grid; gap: 14px; font-size: .9rem; line-height: 1.5;
  animation: consent-in .32s var(--ease) both;
}
.consent[hidden] { display: none; }
.consent p { margin: 0; color: var(--ink-2); }
.consent p a { font-weight: 600; margin-left: 4px; white-space: nowrap; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-actions .btn { flex: 1 1 auto; justify-content: center; }
.consent.leaving { opacity: 0; transform: translateY(12px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.app-body .consent { bottom: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) {
  .consent { left: 20px; right: auto; bottom: 20px; max-width: 460px; padding: 20px 22px 18px; }
  .consent-actions { justify-content: flex-end; }
  .consent-actions .btn { flex: 0 0 auto; }
}
@media (min-width: 768px) { .app-body .consent { bottom: 24px; } }
/* On the order form the banner sits above the order bar rather than over its button; on computers it sits beside the
   menu rather than over it, and on smaller screens the opened menu can scroll its last links above the banner. */
@media (max-width: 1099px) { .has-order-bar .consent { bottom: calc(var(--bottom-h) + 84px + env(safe-area-inset-bottom)); } }
@media (min-width: 768px) and (max-width: 1099px) { .has-order-bar .consent { bottom: 96px; } }
@media (min-width: 1024px) { .app-body .consent { left: calc(var(--sidebar-w) + 24px); } }
@media (max-width: 1023px) { body:has(.consent:not([hidden]):not(.leaving)) .sidebar { padding-bottom: calc(var(--consent-room, 0px) + env(safe-area-inset-bottom)); scroll-padding-bottom: var(--consent-room, 0px); } }
@keyframes consent-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* While the banner asks, the page keeps room for it at the bottom (--consent-room is measured by app.js), so a focused
   control or the end of the page never sits under it (WCAG 2.2, 2.4.11). */
html:has(.consent:not([hidden]):not(.leaving)) { scroll-padding-bottom: var(--consent-room, 0px); }
body:has(.consent:not([hidden]):not(.leaving)) { padding-bottom: var(--consent-room, 0px); }

/* Ad spots (Code & tracking): centred in the page column; hidden while their code waits for cookie consent. */
.ad-slot { max-width: 1200px; margin: 24px auto; padding: 0 20px; text-align: center; overflow: hidden; }
.ad-slot:not(:has(> :not(template))) { display: none; }
.app-body .ad-slot { max-width: none; margin: 0 0 16px; padding: 0; }
@media print { .ad-slot { display: none !important; } }

/* Texture switched off in Appearance. */
[data-texture="off"] :is(.engraved, .wallet-card, .balance-hero, .cta-band, .auth-aside, .hero)::before,
[data-texture="off"] :is(.engraved, .wallet-card, .balance-hero, .cta-band, .auth-aside, .hero)::after { display: none; }

/* ==========================================================================
   Illustration system — engraved line art for empty states, error pages and
   the home "how it works" steps. Every colour is a token so a custom brand
   colour carries over; the art is decorative (aria-hidden on the inline SVG).
   ========================================================================== */
.illus { display: block; width: 100%; height: auto; }
.il-tint { fill: color-mix(in srgb, var(--brand) 7%, var(--paper)); }
.il-ring { stroke: color-mix(in srgb, var(--brand) 26%, transparent); }
.il-wave { stroke: color-mix(in srgb, var(--brand) 34%, transparent); }
.il-card { fill: var(--paper); stroke: var(--line-strong); }
.il-paper-fill { fill: var(--paper); }
.il-muted { stroke: var(--line-strong); }
.il-muted-fill { fill: var(--line-strong); }
.il-track-fill { fill: var(--sunken); }
.il-ink { stroke: var(--ink-2); }
.il-ink-fill { fill: var(--ink-2); }
.il-brand { stroke: var(--brand); }
.il-brand-fill { fill: var(--brand); }
.il-brand-soft-fill { fill: var(--brand-100); }
.il-on-brand { stroke: var(--brand-ink); }
.il-accent { stroke: var(--live); }
.il-accent-fill { fill: var(--live); }

/* Empty state: a bespoke illustration, or the generic engraved backdrop with the Lucide icon in a medallion. */
.empty-art { width: min(236px, 60%); margin: 0 auto 10px; }
.empty-art .illus { display: block; width: 100%; height: auto; }
.empty-spot { position: relative; }
.empty-medallion {
  position: absolute; left: 50%; top: 45.3%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: calc(19px * var(--rf, 1)); display: grid; place-items: center;
  background: var(--paper); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-100), var(--e2);
}
.empty-medallion .icon { width: 26px; height: 26px; }
@media (max-width: 479px) { .empty-art { width: min(200px, 72%); } .empty-medallion { width: 52px; height: 52px; } .empty-medallion .icon { width: 23px; height: 23px; } }

/* Error pages: a larger illustration and a calmer, more finished layout. */
.error-art { width: min(340px, 84%); margin: 0 auto 14px; }
.error-art .illus { display: block; width: 100%; height: auto; }
.error-page .status-code { display: inline-block; font-weight: 650; font-size: .74rem; letter-spacing: .08em; color: var(--brand-hover); background: var(--brand-50); padding: 4px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent); margin-bottom: 14px; }

/* ==========================================================================
   Server-rendered SVG charts (area/line, donut, bar list). Coloured through
   `cc-*` classes that set `color`, so chart marks use currentColor and recolour
   with the brand. No inline styles; axis figures are tabular.
   ========================================================================== */
.chart { display: block; width: 100%; height: auto; }
.chart text { font-family: var(--font); }
.chart-num { font-variant-numeric: tabular-nums; }
/* Area chart: [axis figures | plot] above [ | dates]. The plot stretches to its box with constant-width
   strokes; the figures are HTML, so they stay legible at every width. */
.chart-frame { --ch: 176px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
.chart-frame.chart-sm { --ch: 148px; }
.chart-frame.chart-lg { --ch: 216px; }
@media (min-width: 768px) { .chart-frame { --ch: 208px; } .chart-frame.chart-sm { --ch: 168px; } .chart-frame.chart-lg { --ch: 280px; } }
.chart-y { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 11px; line-height: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-plot { grid-column: 2; grid-row: 1; position: relative; height: var(--ch); margin: 7px 0; }
.chart-plot > .chart-area { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-x { grid-column: 2; grid-row: 2; display: flex; margin-top: 3px; font-size: 11px; line-height: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-x i { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; font-style: normal; }
.chart-x i.xs { justify-content: flex-start; }
.chart-x i.xe { justify-content: flex-end; }
.chart-x b { font-weight: 500; white-space: nowrap; }
@media (max-width: 520px) { .chart-x i.xo b { display: none; } }
.chart-grid { stroke: var(--line-soft); stroke-width: 1; }
.chart-zero { stroke: var(--line-strong); }
.chart-line { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.chart-fill { stroke: none; }
.chart-fade-top { stop-color: currentColor; stop-opacity: .26; }
.chart-fade-end { stop-color: currentColor; stop-opacity: .02; }
.chart-dot { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; }
.chart-dot-core { fill: none; stroke: var(--paper); stroke-width: 4; stroke-linecap: round; }
.chart-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-strong); pointer-events: none; }
.chart-guide[hidden] { display: none; }
.chart-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8rem; color: var(--muted); }
.chart-legend li { display: inline-flex; align-items: center; gap: 7px; }
.chart-donut { max-width: 208px; margin: 2px auto; }
.chart-track { stroke: var(--sunken); }
.donut-seg { stroke: currentColor; }
.chart-center { fill: var(--ink); font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.chart-center-sub { fill: var(--muted); font-size: 12px; font-weight: 550; }
.cc-brand { color: var(--brand); } .cc-indigo { color: var(--indigo); } .cc-green { color: var(--green); }
.cc-blue { color: var(--blue); } .cc-amber { color: var(--amber); } .cc-orange { color: var(--orange); }
.cc-red { color: var(--red); } .cc-gray { color: var(--gray); } .cc-purple { color: var(--purple); } .cc-live { color: var(--live); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; background: currentColor; flex: none; display: inline-block; }
/* A compact tooltip some charts show on hover/focus (progressive enhancement; the chart is complete without it). */
.chart-wrap { position: relative; }
.chart-tip { position: absolute; z-index: 3; pointer-events: none; padding: 8px 11px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--e3); font-size: .78rem; line-height: 1.55; color: var(--ink-2); white-space: pre; font-variant-numeric: tabular-nums; transform: translate(-50%, calc(-100% - 10px)); }
.chart-tip::first-line { font-weight: 650; color: var(--ink); }
.chart-tip[hidden] { display: none; }
.chart-hit { fill: transparent; pointer-events: all; }

/* Horizontal bar list: readable rows (labels and values are real text) with a proportional, decorative bar. */
.barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.bar-row { min-width: 0; }
.bar-link { display: block; color: inherit; }
.bar-link:hover { text-decoration: none; }
.bar-link:hover .bar-label { color: var(--brand-hover); }
.bar-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-xs); }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.bar-label { font-weight: 600; color: var(--ink); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-val { flex: none; font-weight: 650; color: var(--ink); font-size: .875rem; white-space: nowrap; }
.bar-track { display: block; width: 100%; height: 10px; background: var(--sunken); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-soft); }
.bar-fill { fill: currentColor; }
.bar-sub { margin-top: 6px; font-size: .78rem; color: var(--muted); }

/* ==========================================================================
   Home page extras — platform logo strip, illustrated steps, bento features
   ========================================================================== */
/* A quiet, gently scrolling strip of the platforms the shop sells (decorative; the catalogue links sit below). */
.logo-strip { padding: 20px 0; border-bottom: 1px solid var(--line-soft); background: var(--paper); overflow: hidden; }
.logo-strip .wrap { display: flex; align-items: center; gap: 20px; }
.logo-strip .logo-lede { flex: none; font-size: .8rem; font-weight: 600; color: var(--faint); max-width: 10ch; line-height: 1.3; }
.logo-marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-track { display: flex; width: max-content; gap: 12px; animation: logo-scroll 42s linear infinite; }
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track { animation-play-state: paused; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
.logo-chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-weight: 600; font-size: .85rem; white-space: nowrap; box-shadow: var(--e1); }
.logo-chip .pf { pointer-events: none; }
/* Pause/play for the moving strip (WCAG 2.2.2): pressed = paused; the icon shows what a press will do next. */
.logo-pause { border-color: var(--line); background: var(--paper); box-shadow: var(--e1); }
.logo-pause .i-play, .logo-pause[aria-pressed="true"] .i-pause { display: none; }
.logo-pause[aria-pressed="true"] .i-play { display: inline; }
.logo-strip.is-paused .logo-track { animation-play-state: paused; }
@media (max-width: 560px) { .logo-strip .logo-lede { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .logo-pause { display: none; }
}

/* How ordering works: a small original illustration per step (the sequence reads left to right). */
.steps-illus { counter-reset: none; }
.steps-illus::before { display: none; }
.steps-illus .step::before { display: none; }
.steps-illus .step { padding-top: 0; }
.step-art { width: 150px; max-width: 62%; margin: 0 0 16px; }
.step-art .illus { display: block; width: 100%; height: auto; }
@media (min-width: 860px) { .steps-illus .step-art { margin-left: -4px; } }

/* "Included with every account": a bento grid; a few highlight cards carry a small decorative mock-visual. */
.bento { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
@media (min-width: 680px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bento-card { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--e1); }
.bento-card .tile-ico { width: 40px; height: 40px; border-radius: calc(12px * var(--rf, 1)); }
.bento-card h3 { font-size: 1rem; letter-spacing: -0.012em; }
.bento-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
@media (min-width: 680px) { .bento-card.wide { grid-column: span 2; } }
.bento-card.wide { background: linear-gradient(165deg, var(--paper) 55%, color-mix(in srgb, var(--brand-50) 70%, var(--paper))); }
.bento-visual { margin-top: auto; padding-top: 4px; }
/* Mock-visuals (decorative, aria-hidden): a live-tracking bar, a refund pill, an API code line, a 2FA code. */
.mock-progress { display: flex; align-items: center; gap: 10px; }
.mock-progress .bar-track { height: 9px; }
.mock-progress .mk-pct { flex: none; font-size: .78rem; font-weight: 650; color: var(--brand-hover); font-variant-numeric: tabular-nums; }
.mock-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-weight: 650; font-size: .82rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 20%, transparent); }
.mock-pill .icon { width: 15px; height: 15px; }
.mock-code { display: block; padding: 11px 13px; border-radius: var(--r-sm); background: var(--paper-2); border: 1px solid var(--line); font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-code .mk-verb { color: var(--brand-hover); font-weight: 650; } .mock-code .mk-str { color: var(--green); } .mock-code .mk-key { color: var(--purple); }
.mock-otp { display: flex; gap: 6px; }
.mock-otp span { flex: 1; min-width: 0; display: grid; place-items: center; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); font-family: var(--font-mono); font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.mock-otp span.on { border-color: var(--brand); color: var(--brand-hover); background: var(--brand-50); }

/* Phones: the home sections stay short. Each step puts its picture beside the text, "Included with every account"
   becomes a list without the decorative mock-ups, and popular services keep the facts that matter most. */
@media (max-width: 599px) {
  .steps-illus .step { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .steps-illus .step-art { width: 76px; max-width: none; margin: 0; grid-row: 1 / span 2; }
  .steps-illus .step h3 { margin-top: 6px; }
  .bento { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bento-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px; }
  .bento-card .tile-ico { grid-row: 1 / span 2; }
  .bento-card .bento-visual { display: none; }
  .pop-facts .fact-extra { display: none; }
}

/* Generated blog cover (post without a featured image): engraved rings and a glyph, seeded from the slug. */
.post-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-50); }
.post-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.bc-bg { fill: color-mix(in srgb, var(--brand) 8%, var(--paper)); }
/* Hairlines at every size (the art is scaled to fit the card or the banner, the lines are not). */
.bc-ring circle, .bc-wave path { vector-effect: non-scaling-stroke; }
.bc-ring { stroke: color-mix(in srgb, var(--brand) 24%, transparent); stroke-width: 1.1; }
.bc-wave { stroke: color-mix(in srgb, var(--brand) 34%, transparent); stroke-width: 1.4; }
.post-cover-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: calc(16px * var(--rf, 1)); display: grid; place-items: center; background: var(--paper); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-100), var(--e2); }
.post-cover-badge .icon { width: 25px; height: 25px; }
.post-card:hover .post-cover-badge { color: var(--brand-hover); }
.post-cover-banner { margin-bottom: 6px; }
.post-cover.banner { aspect-ratio: 2.8 / 1; border-radius: var(--r-lg); border: 1px solid var(--line); }
@media (max-width: 560px) { .post-cover.banner { aspect-ratio: 2 / 1; } }

/* ---------- Touch screens: larger targets ---------- */
@media (pointer: coarse) {
  .btn-sm { min-height: 40px; }
  .btn-sm.btn-icon { width: 40px; }
  .chip { min-height: 40px; }
  .qty-chips button { height: 40px; padding: 0 14px; }
  .pagination a, .pagination span.p { min-width: 40px; height: 40px; }
  .nav-link { min-height: 44px; }
  .segmented label, .segmented a, .segmented button { padding: 9px 13px; }
  .menu a, .menu button { min-height: 44px; }
}

/* ---------- Page transitions ----------
   Same-site navigations cross-fade the content while the menu, top bar and bottom bar stay put
   (browsers without cross-document view transitions simply load the page). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sidebar { view-transition-name: app-sidebar; }
  .topbar { view-transition-name: app-topbar; }
  .bottom-nav { view-transition-name: app-bottom-nav; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: var(--ease); }
}

@media print {
  .sidebar, .topbar, .bottom-nav, .toasts, .btn, .site-header, .site-footer, .topbar-msg, .contact-fab, .consent { display: none !important; }
  .app-main { margin: 0 !important; border: 0 !important; box-shadow: none !important; }
  body { background: #fff; }
  .engraved::before, .engraved::after, .wallet-card::before, .wallet-card::after, .balance-hero::before, .balance-hero::after, .cta-band::before, .cta-band::after, .hero::before, .hero::after { display: none; }
}

/* API access: revoked keys folded under the table of active keys. */
.revoked-keys { border-top: 1px solid var(--line-soft); padding: 12px 20px 14px; }
.revoked-keys > summary { font-size: .84rem; font-weight: 600; color: var(--ink-2); padding: 4px 0; }
.revoked-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.revoked-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.revoked-list li .grow { min-width: 0; }
.revoked-list .strong { color: var(--ink-2); font-weight: 560; }
.revoked-more { margin: 8px 0 0; }