/* ============================================================================
   SAJIL design system v3 (docs/DESIGN-SYSTEM.md)
   Type: Inter (Latin) + IBM Plex Sans Arabic (Arabic), IBM Plex Mono for codes only; tabular numbers.
   Look: a warm off-white canvas with white surfaces by default, a quiet neutral dark, one accent, soft depth.
   RTL-first (logical properties only), mobile-first, light + dark themes.
   ========================================================================== */
/* Cascade layers, lowest first. Anything outside a layer (a business's white-label CSS) wins over all of them.
   tokens: primitives, semantic aliases, presets · base: element defaults and the original components below ·
   components: the design system's components (components.css, page CSS) · utilities · overrides: a11y modes */
@layer tokens, base, components, utilities, overrides;
@import url("/assets/fonts/fonts.css");
@import url("/assets/tokens.css") layer(tokens);
/* built-in theme presets (Settings → Branding), selected by <html data-preset> */
@import url("/assets/themes.css") layer(tokens);
@import url("/assets/components.css") layer(components);
@import url("/assets/utilities.css") layer(utilities);
@import url("/assets/a11y.css") layer(overrides);

@layer tokens {
:root {
  /* Type scale: compact by default. --text-scale is the one knob for the "text size" setting (0.9 – 1.3);
     every size below is in rem, so it follows. Inputs stay at 16px+ so phones don't zoom on focus. */
  --text-scale: 1;
  --fs-root: calc(15px * var(--text-scale));
  --fs-root-ar: calc(16px * var(--text-scale));
  /* tenant colour is injected as --brand */
  --brand: #3b82f6;
  --brand-ink: #ffffff;
  --brand-soft: color-mix(in srgb, var(--brand) 16%, transparent);
  --brand-line: color-mix(in srgb, var(--brand) 40%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 30%, transparent);
  --brand-text: color-mix(in srgb, var(--brand) 70%, #ffffff);

  /* dark (default) */
  --bg: #0e0e10;
  --bg-elev: #121214;
  --surface: #17171a;
  --surface-2: #1e1e22;
  --surface-3: #27272c;
  --border: rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .13);
  --text: #f5f5f4;
  --text-2: #d6d3d1;
  --muted: #a8a29e;
  --faint: #78716c;
  --ok: #34d399; --ok-soft: rgba(52, 211, 153, .12);
  --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .12);
  --bad: #f87171; --bad-soft: rgba(248, 113, 113, .12);
  --info: #a5b4fc; --info-soft: rgba(165, 180, 252, .12);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .6);
  --grid-line: transparent;
  --glow-bottom: transparent;

  --font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-xl: 24px; --r-lg: 18px; --r-md: 12px; --r-sm: 9px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f6f3;
  --bg-elev: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f3f2ee;
  --surface-3: #e9e7e1;
  --border: rgba(28, 25, 20, .08);
  --border-strong: rgba(28, 25, 20, .15);
  --text: #171614;
  --text-2: #3b3833;
  --muted: #65615a;
  --faint: #8f8a81;
  --ok: #047857; --ok-soft: #e6f5ee;
  --warn: #a14a07; --warn-soft: #fcf0dc;
  --bad: #b91c1c; --bad-soft: #fcebea;
  --info: #4338ca; --info-soft: #eeedfc;
  --brand-text: color-mix(in srgb, var(--brand) 88%, #000000);
  --shadow: 0 1px 2px rgba(28, 25, 20, .05), 0 6px 16px -6px rgba(28, 25, 20, .08), 0 18px 40px -20px rgba(28, 25, 20, .14);
  --grid-line: transparent;
  --glow-bottom: transparent;
  color-scheme: light;
}
} /* end of @layer tokens */

@layer base {
/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--fs-root); font-optical-sizing: auto; }
html[lang="ar"] { font-size: var(--fs-root-ar); }
body { margin: 0; min-height: 100dvh; font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--bg); position: relative; }
html[lang="ar"] body { line-height: 1.7; }
/* atmosphere: quiet grid + brand glow from below (as in the brand guide) */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, var(--text) 40%, transparent 100%); }
body::after { content: ""; position: fixed; inset-inline: -20%; bottom: -40vh; height: 80vh; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at center, var(--glow-bottom), transparent 65%); }
img { max-width: 100%; display: block; }
a { color: var(--brand-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; font-weight: var(--fw-display, 700); color: var(--text); font-family: var(--font-display, var(--font)); text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.1rem); letter-spacing: -.028em; line-height: 1.12; }
h2 { font-size: 1.2rem; letter-spacing: -.018em; }
h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.35; }
p { margin: 0 0 .75em; }
::selection { background: var(--selection-bg); color: var(--selection-ink); }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); }
/* Skip link: hidden until focused with the keyboard (WCAG 2.4.1) */
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: var(--z-skip); padding: 10px 16px; border-radius: var(--r-md);
  background: var(--brand); color: var(--brand-ink); font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
/* Country code + number: side by side when there is room, stacked on narrow phones */
.svc-group { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 12px 14px; }
.svc-group > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; list-style: none; min-height: 32px; }
.svc-group > summary::-webkit-details-marker { display: none; }
.svc-group > summary::after { content: '⌄'; color: var(--muted); }
.svc-group[open] > summary::after { content: '⌃'; }
.tel-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tel-row > select { flex: 1 1 140px; min-width: 0; width: auto; }
.tel-row > input { flex: 999 1 160px; min-width: 0; width: auto; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.tiny { font-size: .76rem; }
.hidden { display: none !important; }
@media (max-width: 520px) { .hide-narrow { display: none !important; } }
.lang-quiet { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .8rem; cursor: pointer; }
.lang-quiet select { width: auto; min-height: 0; border: 0; background: transparent; color: inherit; font: inherit; padding: 2px 4px; cursor: pointer; box-shadow: none; }
.lang-quiet select:hover { color: var(--text); }
.footer .lang-quiet { display: flex; justify-content: center; margin-bottom: 10px; }
.lang-select { width: auto; min-height: 36px; padding-block: 4px; padding-inline: 10px 28px; font-size: .84rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono, code { font-family: var(--mono); font-size: .86em; }
code { background: var(--surface-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; }
.ico { flex: none; vertical-align: middle; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* mono "eyebrow" label (latin uppercase spaced; arabic left unspaced so letters stay joined) */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); margin-bottom: 8px; }
html[lang="ar"] .eyebrow { font-family: var(--font); letter-spacing: 0; font-size: .82rem; font-weight: 600; }
.eyebrow .n { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.glow-text { color: var(--brand-text); text-shadow: 0 0 28px var(--brand-glow); }
.display { font-size: clamp(1.8rem, 6vw, 2.9rem); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; }
html[lang="ar"] .display { letter-spacing: 0; line-height: 1.3; }

/* ---------------------------------------------------------------- layout */
.container { width: 100%; max-width: 680px; margin-inline: auto; padding-inline: 16px; }
.wide { max-width: 1180px; }
.stack > * + * { margin-block-start: var(--stack-gap); }
.stack-sm > * + * { margin-block-start: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.nowrap { flex-wrap: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); padding: var(--card-pad); box-shadow: var(--shadow); position: relative; }
.card.flat { box-shadow: none; background: var(--surface-2); }
.card.glow { border-color: var(--brand-line); box-shadow: 0 0 0 1px var(--brand-soft), var(--shadow); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.icon-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-2); }
.icon-tile.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 8px 26px -8px var(--brand-glow); }
.icon-tile.soft { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-text); }
.icon-tile.lg { width: 52px; height: 52px; border-radius: 15px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); padding: 9px 16px; border-radius: var(--control-radius);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: .94rem; font-weight: 600; letter-spacing: -.005em; box-shadow: var(--shadow-xs);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .18s var(--ease), border-color .18s var(--ease), transform .08s, box-shadow .18s var(--ease);
  -webkit-tap-highlight-color: transparent; }
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.primary { background: var(--brand); border-color: transparent; color: var(--brand-ink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--brand-ink) 18%, transparent) inset, 0 10px 28px -10px var(--brand-glow); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.danger.solid { background: var(--bad); color: var(--bad-ink); border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.block { width: 100%; }
.btn.sm { min-height: var(--control-h-sm); padding: 6px 12px; font-size: .85rem; border-radius: var(--r-sm); }
.btn.lg { min-height: var(--control-h-lg); padding: 10px 20px; font-size: 1rem; border-radius: 14px; }
.btn.icon { min-width: var(--control-h); padding: 8px; }
.btn.sm.icon { min-width: var(--control-h-sm); padding: 6px; }

/* ---------------------------------------------------------------- forms */
label { display: block; font-weight: 600; font-size: .86rem; color: var(--text-2); margin-block-end: 6px; }
.field { margin-block-end: 14px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .78rem; margin-top: 5px; line-height: 1.5; }
input, select, textarea { width: 100%; font: inherit; font-size: max(16px, 1rem); color: var(--text); background: var(--surface-field);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; min-height: var(--control-h); transition: border-color .15s, box-shadow .15s; }
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background-color: var(--surface-field); }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 5px 5px; background-repeat: no-repeat; background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; padding-inline-end: 34px; }
[dir="rtl"] select { background-position: 13px 52%, 18px 52%; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); background-color: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--brand); flex: none; margin-top: 2px; }
input[type="color"] { padding: 5px; height: 46px; cursor: pointer; }
input[type="search"] { padding-inline-start: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238a92a6' stroke-width='1.75' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px 50%; }
[dir="rtl"] input[type="search"] { background-position: calc(100% - 13px) 50%; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--text); cursor: pointer; font-size: .92rem; }
.input-group { display: flex; align-items: stretch; }
.input-group > span { display: flex; align-items: center; padding-inline: 12px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted);
  font-size: .82rem; font-weight: 600; white-space: nowrap; }
.input-group > span:first-child { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); border-inline-end: 0; }
.input-group > span:last-child { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); border-inline-start: 0; }
.input-group > input, .input-group > textarea { border-radius: 0; }
.input-group > :first-child:is(input, textarea) { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); }
.input-group > :last-child:is(input, textarea) { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
.error-text { color: var(--bad); font-size: .86rem; margin-top: 6px; }
.error-text:empty { display: none; }

/* ---------------------------------------------------------------- badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.5;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge.plain::before { display: none; }
.badge.pending { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.confirmed { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.completed { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge.cancelled, .badge.denied { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.badge.no_show { background: var(--surface-3); color: var(--muted); }
.badge.brand { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-line); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }

/* ---------------------------------------------------------------- lists & rows */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--row-pad) 0; border-bottom: 1px solid var(--border); }
.list > li:last-child { border-bottom: 0; }
.list > li.link { cursor: pointer; border-radius: 10px; padding-inline: 8px; margin-inline: -8px; transition: background .15s; }
.list > li.link:hover { background: var(--surface-2); }
.item-btn { display: flex; width: 100%; text-align: start; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 15px 16px; font: inherit; color: inherit; cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); box-shadow: var(--shadow); }
.item-btn:hover { border-color: var(--brand-line); background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.item-btn[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 14px 40px -20px var(--brand-glow); }
.item-btn[disabled] { opacity: .5; cursor: not-allowed; }
.item-btn .chev { color: var(--faint); }
/* a small choice of chips (who a booking is for) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .btn[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-text); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); box-shadow: 0 0 0 1px var(--brand); }
/* staff photos: small and round beside the name, the initial when there is none */
.label { display: block; font-weight: 600; font-size: .85rem; color: var(--text-2); margin-block-end: 6px; }
.field.full { grid-column: 1 / -1; }
.face { inline-size: 28px; block-size: 28px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-3); display: inline-grid; place-items: center; font-size: .75rem; font-weight: 600; color: var(--text-2); }
.face.lg { inline-size: 64px; block-size: 64px; font-size: 1.3rem; }
.chips .chip-person { padding-inline-start: 5px; gap: 8px; }
.face.blank { border: 1px solid var(--border-strong); }

/* ---------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { text-align: start; padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: transparent; }
html[lang="ar"] .table th { font-family: var(--font); letter-spacing: 0; font-size: .8rem; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface-2); }
@media (max-width: 720px) {
  .table.responsive thead { display: none; }
  .table.responsive, .table.responsive tbody { display: block; }
  .table.responsive tr { display: block; border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 10px; padding: 8px 14px; background: var(--surface); box-shadow: var(--shadow); }
  .table.responsive td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 7px 0; text-align: end; }
  .table.responsive td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; text-align: start; }
}

/* ---------------------------------------------------------------- toast & dialog */
.toast { position: fixed; inset-inline: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 440px; background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border-strong); padding: 12px 16px; border-radius: var(--r-md); box-shadow: var(--elev-3); z-index: var(--z-toast); animation: up .25s var(--ease);
  display: flex; gap: 10px; align-items: center; font-weight: 500; }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); flex: none; }
.toast.err::before { background: var(--bad); box-shadow: 0 0 12px var(--bad); }
@keyframes up { from { transform: translateY(12px); opacity: 0; } }
dialog { border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: 0; width: min(580px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  background: var(--surface); color: var(--text); box-shadow: var(--elev-3); overflow: hidden; display: flex; flex-direction: column; }
dialog:not([open]) { display: none; }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(6px); }
dialog .dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
dialog .dlg-body { padding: 18px; overflow: auto; flex: 1; }
dialog .dlg-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--bg-elev); flex-wrap: wrap; }
@media (max-width: 560px) {
  dialog { width: 100vw; max-width: 100vw; max-height: 94dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0; animation: sheet .28s var(--ease); }
  dialog .dlg-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  dialog .dlg-foot .btn { flex: 1; }
}
@keyframes sheet { from { transform: translateY(40px); opacity: .4; } }

.spinner { width: 22px; height: 22px; border: 2px solid var(--border-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 20%, var(--surface-3) 50%, var(--surface-2) 80%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--r-md); min-height: 46px; }
@keyframes sk { to { background-position: -200% 0; } }
.empty { text-align: center; color: var(--muted); padding: 36px 16px; display: grid; justify-items: center; gap: 10px; }
.empty .icon-tile { width: 48px; height: 48px; }

/* language + theme switch */
.lang { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); }
.lang button { border: 0; background: transparent; padding: 4px 11px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 30px; border-radius: 999px; transition: background .15s, color .15s; }
.lang button[lang="en"], .lang button[lang="de"] { letter-spacing: .04em; }
.lang button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 14px -6px var(--brand-glow); }
.theme-toggle { width: 38px; height: 38px; min-height: 38px; border-radius: 999px; padding: 0; }

/* ============================================================== public booking */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--border); }
.topbar .container { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; min-width: 0; color: var(--text); text-decoration: none; }
.brand img { height: 36px; width: auto; border-radius: 10px; }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); box-shadow: 0 8px 20px -8px var(--brand-glow); flex: none; }
.brand .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.page-head { padding: 28px 0 8px; }
.page-head h1 { margin-bottom: 6px; }
.steps { display: flex; gap: 6px; margin: 18px 0 4px; }
.steps span { flex: 1; height: 3px; border-radius: 3px; background: var(--border-strong); transition: background .3s; }
.steps span.on { background: var(--brand); }
.svc { display: grid; gap: 3px; }
.svc strong { font-size: 1rem; }
.svc .desc { color: var(--muted); font-size: .86rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc .price, .price { font-weight: 700; white-space: nowrap; font-size: .95rem; }
.svc-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.svc-meta > span { display: inline-flex; align-items: center; gap: 5px; }

.cal { user-select: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head strong { font-size: 1rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid .wd { text-align: center; font-size: .72rem; color: var(--muted); padding: 2px 0 6px; font-weight: 600; }
.cal-day { aspect-ratio: 1; border: 1px solid transparent; border-radius: 12px; background: transparent; font: inherit; font-size: .92rem; color: var(--faint); cursor: default; min-height: 40px; position: relative; font-variant-numeric: tabular-nums; }
.cal-day.avail { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); cursor: pointer; font-weight: 500; transition: border-color .15s, background .15s; }
.cal-day.avail:hover { border-color: var(--brand); background: var(--brand-soft); }
.cal-day.full { color: var(--muted); border: 1px dashed var(--border-strong); cursor: pointer; } /* fully booked: the waitlist can be joined */
.cal-day.full:hover { border-color: var(--brand); }
.cal-day[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); box-shadow: 0 10px 24px -10px var(--brand-glow); }
.cal-day.today::after { content: ""; position: absolute; bottom: 5px; inset-inline-start: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); transform: translateX(-50%); }
[dir="rtl"] .cal-day.today::after { transform: translateX(50%); }
.cal-day[aria-pressed="true"].today::after { background: var(--brand-ink); }
.section-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; font-weight: 600; margin: 4px 0 10px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot { min-height: 46px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); font: inherit; font-weight: 600; cursor: pointer; color: var(--text);
  display: grid; place-items: center; align-content: center; gap: 1px; line-height: 1.25; padding: 6px; transition: border-color .15s, background .15s, box-shadow .15s; }
.slot .t { font-size: .98rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.slot small { font-weight: 400; color: var(--muted); font-size: .7rem; }
.slot:hover { border-color: var(--brand); }
.slot[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); box-shadow: 0 10px 26px -10px var(--brand-glow); }
.slot[aria-pressed="true"] small { color: inherit; opacity: .85; }
.slot[disabled] { opacity: .4; cursor: not-allowed; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; }
.summary-row > :first-child { color: var(--muted); font-size: .88rem; }
.summary-row > :last-child { text-align: end; font-weight: 500; }
.summary-row.total { border-top: 1px dashed var(--border-strong); margin-top: 8px; padding-top: 12px; }
.summary-row.total > * { font-weight: 700; color: var(--text); font-size: 1.08rem; }
.sticky-cta { position: sticky; bottom: 0; z-index: 5; background: linear-gradient(to top, var(--bg) 62%, transparent); padding: 18px 0 calc(16px + env(safe-area-inset-bottom)); margin-top: 8px; }
.success-icon { width: 76px; height: 76px; border-radius: 24px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; margin: 6px auto 16px;
  box-shadow: 0 18px 50px -14px var(--brand-glow); }
.success-icon.pending { background: var(--warn-soft); color: var(--warn); box-shadow: none; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.ref-chip { display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-family: var(--mono); font-size: 1.05rem; letter-spacing: .12em; }
.footer { text-align: center; color: var(--muted); font-size: .78rem; padding: 28px 16px 36px; }
.footer a { color: inherit; text-decoration: none; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; font-weight: 600; }
.footer a:hover { color: var(--text); }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--text-2); font-size: .86rem; }
.notice.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.notice .ico { color: var(--brand-text); margin-top: 2px; }
.notice.warn .ico { color: var(--warn); }

/* payment trust line */
.pay-trust { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--text-2); }
.pay-trust .ico { color: var(--ok); }

/* chat */
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow: auto; padding: 2px; }
.bubble { max-width: 82%; padding: 9px 13px; border-radius: 16px; border-end-start-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; }
.bubble.me { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-color: transparent; border-end-start-radius: 16px; border-end-end-radius: 6px; }
.bubble .meta { display: block; font-size: .68rem; opacity: .7; margin-top: 3px; font-family: var(--mono); }

/* design picker */
.designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.design { border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); cursor: pointer; text-align: start; padding: 0; font: inherit; color: inherit; position: relative; transition: border-color .15s, box-shadow .15s; }
.design .ph { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); display: grid; place-items: center; color: var(--faint); }
.design img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.design .info { padding: 10px 12px; font-size: .84rem; display: grid; gap: 2px; }
.design[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 14px 34px -16px var(--brand-glow); }
.design[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 8px; inset-inline-end: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }

/* progress stages */
.stages { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.stages .st { flex: 1 0 auto; text-align: start; font-size: .72rem; color: var(--faint); padding-top: 10px; border-top: 3px solid var(--border-strong); min-width: 76px; font-weight: 500; }
.stages .st.done { border-color: var(--brand-line); color: var(--muted); }
.stages .st.cur { border-color: var(--brand); color: var(--brand-text); font-weight: 700; box-shadow: 0 -6px 14px -10px var(--brand-glow); }

/* ============================================================== admin */
.admin-shell { display: grid; min-height: 100dvh; grid-template-columns: 1fr; }
.sidebar { background: var(--bg-elev); border-inline-end: 1px solid var(--border); padding: 14px 12px; position: fixed; inset-block: 0; inset-inline-start: 0; width: 280px; z-index: 50;
  transform: translateX(-105%); transition: transform .28s var(--ease); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
[dir="rtl"] .sidebar { transform: translateX(105%); }
.sidebar.open { transform: none !important; box-shadow: var(--elev-3); }
.scrim { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); z-index: var(--z-scrim); }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .92rem; transition: background .15s, color .15s; position: relative; }
.nav a .ico { color: var(--faint); transition: color .15s; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a:hover .ico { color: var(--text-2); }
.nav a.active { background: var(--brand-soft); color: var(--text); font-weight: 600; }
.nav a.active .ico { color: var(--brand-text); }
.nav a.active::before { content: ""; position: absolute; inset-inline-start: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); box-shadow: 0 0 12px var(--brand-glow); }
[dir="rtl"] .nav a.active::before { border-radius: 3px 0 0 3px; }
.nav .sep { font-size: .7rem; font-weight: 600; text-transform: uppercase; color: var(--muted); padding: 16px 11px 6px; letter-spacing: .07em; }
html[lang="ar"] .nav .sep { font-family: var(--font); letter-spacing: 0; font-size: .75rem; }
.nav .count { margin-inline-start: auto; background: var(--warn); color: var(--warn-ink); border-radius: 999px; font-size: .68rem; padding: 0 7px; font-weight: 700; font-family: var(--mono); line-height: 1.6; }
.sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.me { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--border-strong); display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--text-2); flex: none; }
.main { min-width: 0; }
.main-head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.main-head .inner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 62px; max-width: 1240px; }
.main-head h1 { font-size: 1.08rem; margin: 0; }
.main-body { padding: 18px 16px 40px; max-width: 1240px; }
@media (min-width: 1000px) {
  .admin-shell { grid-template-columns: 252px 1fr; }
  .sidebar, [dir="rtl"] .sidebar { position: sticky; top: 0; height: 100dvh; transform: none; width: auto; }
  .menu-btn { display: none !important; }
  .main-head .inner { padding: 10px 28px; }
  .main-body { padding: 26px 28px 48px; }
}
.stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } }
.stats .card { padding: 14px; min-width: 0; }
@media (max-width: 899px) { .stats .span2 { grid-column: span 2; } }
.stat .v { overflow-wrap: anywhere; }
@media (max-width: 420px) { .stat .v { font-size: 1.3rem; } }
.stat { display: grid; gap: 8px; align-content: start; }
.stat .k { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; font-weight: 500; }
.stat .v { font-size: 1.75rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; color: var(--text); }
.stat.accent { border-color: var(--brand-line); background: linear-gradient(160deg, var(--brand-soft), var(--surface) 60%); }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(262px, 84vw); gap: 12px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; }
.kanban > .col { scroll-snap-align: start; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; min-height: 240px; }
.kanban > .col h3 { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; margin-bottom: 12px; }
@media (min-width: 700px) { .kanban { grid-auto-columns: 272px; } }
.kcard { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 12px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, transform .15s; box-shadow: var(--shadow); }
.kcard:hover { border-color: var(--brand-line); transform: translateY(-1px); }
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 18px; scrollbar-width: none; }
.tabs button { border: 0; background: transparent; font: inherit; font-size: .9rem; padding: 10px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; min-height: 44px; font-weight: 500; margin-bottom: -1px; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-color: var(--brand); font-weight: 600; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.seg button { border: 0; background: transparent; font: inherit; font-size: .84rem; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 9px; cursor: pointer; min-height: 34px; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.weekdays { display: flex; gap: 6px; flex-wrap: wrap; }
.weekdays label { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--border-strong); background: var(--surface-2); border-radius: 999px; padding: 6px 12px; font-weight: 500; font-size: .85rem; margin: 0; cursor: pointer; color: var(--text); }
.weekdays label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.weekdays input { margin: 0; width: 16px; height: 16px; }
.weekcal { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.weekcal .day { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; min-height: 280px; }
.weekcal .day h4 { margin: 0 0 10px; font-size: .8rem; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; }
.weekcal .day.today { border-color: var(--brand-line); }
.weekcal .day.today h4 { color: var(--brand-text); }
.weekcal .ev { border-inline-start: 3px solid var(--brand); background: var(--surface); border-radius: 10px; padding: 7px 9px; font-size: .78rem; margin-bottom: 7px; cursor: pointer; box-shadow: var(--shadow); line-height: 1.45; transition: transform .12s; }
.weekcal .ev:hover { transform: translateY(-1px); }
.weekcal .ev .t { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-2); }
.weekcal .ev.busy { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); border-inline-start-color: var(--faint); color: var(--muted); }
.monthgrid { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 6px; min-width: 660px; }
.monthgrid .mcell { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 7px; min-height: 92px; cursor: pointer; transition: border-color .15s; }
.monthgrid .mcell:hover { border-color: var(--brand-line); }
.monthgrid .mcell .d { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--muted); }
.monthgrid .mcell.today { border-color: var(--brand); }
.monthgrid .mcell .e { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; color: var(--text-2); }
/* calendar items are buttons (keyboard and screen readers reach them) */
.weekcal button.ev { display: grid; inline-size: 100%; text-align: start; font: inherit; font-size: .78rem; color: var(--text); border: 0; border-inline-start: 3px solid var(--c, var(--brand)); }
.monthgrid button.mcell { display: grid; align-content: start; gap: 2px; inline-size: 100%; text-align: start; font: inherit; color: inherit; }
.copybox { display: flex; gap: 8px; }
.copybox input { font-family: var(--mono); font-size: 13.5px; direction: ltr; text-align: left; color: var(--text-2); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; float: inline-end; color: var(--muted); }
details[open] > summary::after { content: "−"; }

/* ============================================================== landing */
.hero { padding: 64px 0 28px; text-align: center; }
.hero p.lead { font-size: 1.12rem; color: var(--muted); max-width: 620px; margin: 18px auto 28px; line-height: 1.7; }
.hero .cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.features { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 40px 0; padding: 0; list-style: none; }
.feature { display: grid; gap: 12px; align-content: start; }
.feature p { color: var(--muted); font-size: .9rem; margin: 0; }
.pill-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); font-size: .82rem; color: var(--text-2); }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.type-grid .item-btn { padding: 12px 14px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Documents a business asks for (customer page and admin booking): one block per document, a quiet line between */
.doc-item + .doc-item { border-block-start: 1px solid var(--border); padding-block-start: 12px; }
.doc-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); }

/* Booking review step: three numbered sections, each with "Edit"; optional details folded */
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.review-sec { padding: 14px 16px; }
.review-head { display: flex; align-items: center; gap: 10px; margin-block-end: 6px; }
.review-head h2 { flex: 1; margin: 0; font-size: 1rem; }
.review-head h2:focus { outline: none; }
.review-head .btn { margin-inline-end: -8px; }
.review-n { flex: none; display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand-text); font-family: var(--mono); font-size: .78rem; font-weight: 600; }
.review-row { display: flex; align-items: center; gap: 10px; padding-block: 6px; }
.review-row + .review-row { border-block-start: 1px solid var(--border); }
.review-sec .summary-row { padding-block: 4px; }
.review-more { margin-block-start: 6px; }
.review-more > summary, .more-info > summary { cursor: pointer; color: var(--brand-text); font-size: .88rem; font-weight: 600; padding-block: 6px; }
.review-dates { margin: 4px 0 0; padding-inline-start: 18px; display: grid; gap: 2px; }
.review-price .summary-row.total:first-child { border-block-start: 0; margin-block-start: 0; padding-block-start: 0; }
.more-info { margin-block-end: 14px; }
.more-info .more-body { padding-block-start: 8px; }
/* Booking form questions (forms.js, forms-admin.js): choices as quiet tiles, the price a choice adds at the end */
fieldset.q-group { border: 0; padding: 0; margin: 0 0 14px; min-inline-size: 0; }
fieldset.q-group > legend { padding: 0; }
.q-choices { display: grid; gap: 8px; }
.q-choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-choices .check { margin: 0; padding: 10px 12px; min-height: 44px; align-items: center; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.q-choices .check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.q-choices .check input { margin-top: 0; }
.q-price { margin-inline-start: auto; color: var(--muted); font-size: .85rem; font-weight: 500; white-space: nowrap; }
.q-info { margin-block: 6px 14px; }
.q-info h3 { margin: 0 0 4px; }
.q-info p { margin: 0; }
.q-item > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; }
.q-item > summary > .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-item[open] > summary { margin-block-end: 10px; }
.q-rule { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
@media (max-width: 560px) { .q-rule { grid-template-columns: 1fr 1fr; } }
/* AI proposals (form-ai.js): a checkbox beside the question as the booking page shows it */
.ai-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; }
.ai-item > input[type="checkbox"] { margin-block-start: 4px; inline-size: 18px; block-size: 18px; }
.ai-field .field, .ai-field fieldset.q-group, .ai-field .q-info { margin-block-end: 0; }
.ai-field .q-choices { gap: 6px; }
.ai-field .q-choices .check { min-height: 36px; padding-block: 6px; }
.ai-line { display: flex; gap: 8px; align-items: baseline; }
.ai-options { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
} /* end of @layer base */