/*! SMMService theme · style.css · v0.8.4 · built 2026-10-10 (PAGE:orders v1.0.3) · tokens v1.4.0 */
/* Structure and rules: .claude/skills/frontend-architecture/SKILL.md §4. Edit only inside the region you own. */

/* >>> REGION:TOKENS — copied verbatim from .claude/skills/designer/tokens.css. Edit tokens.css, never here. */
/*! SMMService design tokens · v1.4.0 · 2026-10-08 (+ --fs-4xl display heading, light-surface roles for light cards on dark bands)
   SOURCE OF TRUTH for every color, font, size, space, radius, shadow, motion value.
   Palette "Deep Teal Authority" + type "Direction A" (Manrope + JetBrains Mono) — chosen by the owner in the
   brand-identity project. Logo still pending. Copy into style.css REGION:TOKENS with tools/sync_tokens.py — never by hand.
   Contrast (WCAG): every text/background pair used by the semantic roles below is ≥ 4.5:1 unless marked LARGE/DECOR. */

:root {
  /* ---------- Brand palette (raw — components never use these directly) ---------- */
  --ink:         #0A1416;   /* near-black, teal-tinted */
  --bone:        #F5F3EE;   /* warm off-white page background */
  --teal-50:     #EAF4F2;
  --teal-100:    #D7EAE7;   /* "Teal Mist" */
  --teal-300:    #5CC8BC;   /* "Teal Light" — ONLY on dark backgrounds (2.0:1 on white). DECOR on light */
  --teal-600:    #0E6E6A;   /* "Deep Teal" — primary. white text 6.07:1 */
  --teal-700:    #0B5855;   /* hover/pressed. white text 8.26:1 */
  --teal-800:    #08403E;   /* dark sections. white text 11.6:1 */
  --coral-500:   #FF6B4A;   /* "Signal Coral" — accent. INK text only (6.6:1). Never white text (2.8:1), never text on light bg (2.5:1) */
  --coral-600:   #F2573A;   /* coral hover. ink text 5.5:1 */

  /* ---------- Neutrals (teal-tinted, bone-warm) ---------- */
  --n-0:   #FFFFFF;
  --n-50:  #F5F3EE;   /* = bone */
  --n-100: #ECEAE4;
  --n-200: #DEDCD5;
  --n-300: #C4C6C2;
  --n-400: #94A0A0;   /* borders/icons only — NOT text (2.4–2.7:1) */
  --n-450: #808C8C;   /* form-control borders: 3.5:1 white, 3.1:1 bone (WCAG 1.4.11 non-text) */
  --n-500: #5E6B6C;   /* smallest muted text: 5.5:1 white, 5.0:1 bone. NOT on teal-100 (4.4:1) */
  --n-600: #43504F;   /* muted text anywhere light (≥ 6.7:1) */
  --n-700: #2C3838;
  --n-800: #172224;
  --n-900: #0A1416;   /* = ink */

  /* ---------- Status (distinct from coral: coral is never an error color) ---------- */
  --success-600: #15803D;  --success-50: #ECFDF3;   /* 4.5:1 on bone */
  --warning-600: #B45309;  --warning-50: #FFF7E6;   /* 4.5:1 on bone */
  --danger-600:  #B4232A;  --danger-50:  #FDECEC;   /* 5.9:1 on bone; white text 6.5:1 */
  --danger-700:  #8F1C22;                           /* danger hover; white text 8.9:1 */
  --info-600:    #0E6E6A;  --info-50:    #EAF4F2;   /* info reuses teal */

  /* ---------- Semantic roles (components use ONLY these and the scales below) ---------- */
  --color-bg:             var(--n-50);      /* page */
  --color-bg-raised:      var(--n-0);       /* cards, panels, inputs */
  --color-bg-sunken:      var(--n-100);     /* table stripes, code */
  --color-bg-inverse:     var(--ink);       /* dark bands, footer */
  --color-bg-brand:       var(--teal-800);  /* dark teal bands */
  --color-bg-brand-soft:  var(--teal-50);
  --color-border:         var(--n-200);
  --color-border-strong:  var(--n-300);
  --color-border-control: var(--n-450);    /* inputs, selects, checkboxes: 3:1 boundary */
  --color-border-inverse: var(--n-700);    /* dividers on dark bands */
  --color-bg-inverse-raised: var(--n-800); /* cards / code on dark bands */
  --color-text:           var(--ink);
  --color-text-muted:     var(--n-600);
  --color-text-subtle:    var(--n-500);     /* small meta text on white/bone only */
  --color-text-inverse:   var(--bone);
  --color-text-inverse-muted: var(--n-300);
  --color-text-on-brand:  var(--n-0);
  --color-link:           var(--teal-600);
  --color-link-hover:     var(--teal-700);
  --color-link-on-dark:   var(--teal-300);
  --color-primary:        var(--teal-600);  /* primary buttons: white text */
  --color-primary-hover:  var(--teal-700);
  --color-primary-active: var(--teal-800);
  --color-accent:         var(--coral-500); /* highlights, badges, one CTA per screen max: INK text */
  --color-accent-hover:   var(--coral-600);
  --color-text-on-accent: var(--ink);
  --color-focus:          var(--teal-600);
  --color-focus-on-dark:  var(--teal-300);
  /* light-surface roles: the default light values, restored by a light card inside a dark band (dark surfaces re-map
     the roles above). Keep each equal to its role above. */
  --color-light-text-muted:  var(--n-600);
  --color-light-text-subtle: var(--n-500);
  --color-light-link:        var(--teal-600);
  --color-light-link-hover:  var(--teal-700);
  --color-light-border:      var(--n-200);
  --color-light-focus:       var(--teal-600);
  /* status roles: text/dot/border colour + soft background (Ink text on every soft bg ≥ 16:1) */
  --color-success: var(--success-600);  --color-success-soft: var(--success-50);
  --color-warning: var(--warning-600);  --color-warning-soft: var(--warning-50);
  --color-danger:  var(--danger-600);   --color-danger-soft:  var(--danger-50);   --color-danger-hover: var(--danger-700);
  --color-info:    var(--info-600);     --color-info-soft:    var(--info-50);

  /* ---------- Typography ---------- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;   /* prices, IDs, API, data */

  --fs-xs:   0.8125rem;  /* 13px  labels, meta */
  --fs-sm:   0.875rem;   /* 14px  helper, table meta */
  --fs-base: 1rem;       /* 16px  body; inputs never smaller */
  --fs-md:   1.125rem;   /* 18px  lead, guide body */
  --fs-lg:   1.25rem;    /* 20px  h4 */
  --fs-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.5625rem);   /* h3 22→25 */
  --fs-2xl:  clamp(1.625rem, 1.35rem + 1.3vw, 1.953rem);   /* h2 26→31 */
  --fs-3xl:  clamp(2rem, 1.5rem + 2.4vw, 3.052rem);        /* h1 32→49 */
  --fs-4xl:  clamp(2.25rem, 1.65rem + 2.9vw, 3.815rem);    /* display h1 (home hero) 36→61 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;   /* Manrope display headings only */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.6;
  --ls-tight: -0.02em;   /* large headings */
  --ls-caps:  0.06em;    /* small uppercase labels */
  --measure:  68ch;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;  --space-4: 1rem;   --space-5: 1.5rem;
  --space-6: 2rem;     --space-7: 3rem;    --space-8: 4rem;     --space-9: 6rem;   --space-10: 8rem;

  /* ---------- Layout ---------- */
  --container: 75rem;          /* 1200px */
  --container-wide: 85rem;     /* 1360px  dashboards/tables */
  --container-narrow: 46rem;   /* 736px  guides, policies */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-h: 4rem;
  --sidebar-w: 15rem;          /* 240px  signed-in sidebar (desktop ≥ 1024) */
  --logo-h: 1.25rem;           /* 20px  header logo height, desktop (trimmed wordmark) */
  --logo-h-sm: 1.125rem;       /* 18px  header / menu logo height, phones */
  /* Breakpoints (media queries only — CSS vars can't be used there): 480 · 768 · 1024 · 1280 px, min-width */

  /* ---------- Shape ---------- */
  --radius-sm: 4px;   --radius-md: 6px;    --radius-lg: 8px;    --radius-pill: 999px;   /* owner: small radius; pill = status badges only */
  --border-w: 1px;
  --shadow-1: 0 1px 2px rgb(10 20 22 / 0.06), 0 1px 3px rgb(10 20 22 / 0.08);
  --shadow-2: 0 10px 30px rgb(10 20 22 / 0.10);

  /* ---------- Interaction ---------- */
  --tap-min: 44px;
  --control-h: 2.75rem;      /* 44px  buttons, inputs */
  --control-h-sm: 2.25rem;   /* 36px  small buttons in desktop tables only (phones keep 44px) */
  --row-h: 2.5rem;           /* 40px  compact table rows */
  --focus-ring: 0 0 0 2px var(--color-bg-raised), 0 0 0 4px var(--color-focus);
  --focus-ring-on-dark: 0 0 0 2px var(--color-bg-inverse), 0 0 0 4px var(--color-focus-on-dark);
  --focus-ring-on-light: 0 0 0 2px var(--color-bg-raised), 0 0 0 4px var(--color-light-focus);
  --dur-fast: 150ms;  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- Layers ---------- */
  --z-header: 100;  --z-drawer: 200;  --z-modal: 1050;  --z-toast: 1100;   /* modal/toast above Bootstrap 3 (1040/1050) */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Dark mode: not planned (brand brief). If added later, redefine SEMANTIC roles only under [data-theme="dark"]. */
/* <<< REGION:TOKENS */

/* >>> REGION:BASE — element defaults */
*, *::before, *::after { box-sizing: border-box; }
/* Bootstrap sets html 10px; our rem tokens need 16px (Bootstrap uses px only) */
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); font-family: var(--font-sans); color: inherit; line-height: var(--lh-snug); }
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-text-muted); }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-bold); }
a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--color-link-hover); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; border: 0; }
hr { margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--color-border); }
code, kbd, samp, pre { font-family: var(--font-mono); }
code { padding: 0.1em 0.35em; font-size: 0.875em; color: var(--color-text); background: var(--color-bg-sunken); border-radius: var(--radius-sm); }
kbd { padding: 0.1em 0.4em; font-size: 0.8125em; color: var(--color-text); background: var(--color-bg-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: none; }
table { border-collapse: collapse; }
label { font-weight: var(--fw-semibold); }
::selection { background: var(--color-bg-brand-soft); color: var(--color-text); }
/* <<< REGION:BASE */

/* >>> REGION:LAYOUT — .ui-container, .ui-section, .ui-grid, .ui-stack, .ui-cluster, .ui-split */
.ui-container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.ui-container--wide { max-width: var(--container-wide); }
.ui-container--narrow { max-width: var(--container-narrow); }
/* Section rhythm sits at the dense end of the scale (owner: dashboard density, not airy marketing). */
.ui-section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.ui-section--tight { padding-top: var(--space-5); padding-bottom: var(--space-5); }
@media (min-width: 1024px) {
  .ui-section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .ui-section--tight { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}
/* Dark surfaces (sections, dark cards, dark CTA bands): re-map the roles text sits on.
   Light components inside keep their own colours. Allowed inside: text, links, ui-btn primary/accent/secondary, ui-badge, ui-code. */
.ui-section--dark, .ui-section--brand, .ui-card--dark, .ui-cta--dark, .ui-cta--brand {
  color: var(--color-text-inverse);
  --color-text-muted: var(--color-text-inverse-muted);
  --color-text-subtle: var(--color-text-inverse-muted);
  --color-link: var(--color-link-on-dark);
  --color-link-hover: var(--color-text-inverse);
  --color-border: var(--color-border-inverse);
  --color-focus: var(--color-focus-on-dark);
  --focus-ring: var(--focus-ring-on-dark);
}
.ui-section--dark { background: var(--color-bg-inverse); }
.ui-section--brand { background: var(--color-bg-brand); }
/* A light card on a dark band (e.g. the white login card on the home hero) restores the light roles. */
.ui-section--dark .ui-card:not(.ui-card--dark), .ui-section--brand .ui-card:not(.ui-card--dark) {
  --color-text-muted: var(--color-light-text-muted);
  --color-text-subtle: var(--color-light-text-subtle);
  --color-link: var(--color-light-link);
  --color-link-hover: var(--color-light-link-hover);
  --color-border: var(--color-light-border);
  --color-focus: var(--color-light-focus);
  --focus-ring: var(--focus-ring-on-light);
}
.ui-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.ui-stack > * { margin-top: 0; margin-bottom: 0; }
.ui-stack--gap-2 { gap: var(--space-2); }
.ui-stack--gap-3 { gap: var(--space-3); }
.ui-stack--gap-5 { gap: var(--space-5); }
.ui-stack--gap-6 { gap: var(--space-6); }
.ui-stack--gap-7 { gap: var(--space-7); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ui-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 768px) {
  .ui-grid { gap: var(--space-5); }
  .ui-grid--2, .ui-grid--3, .ui-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) {
  .ui-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
  .ui-split--60-40 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .ui-split--reverse > :first-child { order: 2; }
}
/* <<< REGION:LAYOUT */

/* >>> REGION:COMPONENTS — one sub-block per component in designer/components.md, same order */
/* 1 Button */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-4);
  font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: var(--lh-tight);
  color: var(--color-text); background: var(--color-bg-raised);
  border: 1px solid transparent; border-radius: var(--radius-md);
  text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ui-btn:hover, .ui-btn:focus { text-decoration: none; }
.ui-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-btn:active { transform: translateY(1px); }
.ui-btn .fas, .ui-btn .fab, .ui-btn .far { font-size: 0.875em; }
.ui-btn--primary { color: var(--color-text-on-brand); background: var(--color-primary); border-color: var(--color-primary); }
.ui-btn--primary:hover, .ui-btn--primary:focus { color: var(--color-text-on-brand); background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.ui-btn--primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }
.ui-btn--accent { color: var(--color-text-on-accent); background: var(--color-accent); border-color: var(--color-accent); }
.ui-btn--accent:hover, .ui-btn--accent:focus, .ui-btn--accent:active { color: var(--color-text-on-accent); background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.ui-btn--secondary { color: var(--color-text); background: var(--color-bg-raised); border-color: var(--color-border-control); }
.ui-btn--secondary:hover, .ui-btn--secondary:focus { color: var(--color-text); background: var(--color-bg-raised); border-color: var(--color-text); }
.ui-btn--secondary:active { background: var(--color-bg-sunken); }
.ui-btn--ghost { color: var(--color-link); background: transparent; }
.ui-btn--ghost:hover, .ui-btn--ghost:focus { color: var(--color-link-hover); background: var(--color-bg-sunken); }
.ui-btn--danger { color: var(--color-text-on-brand); background: var(--color-danger); border-color: var(--color-danger); }
.ui-btn--danger:hover, .ui-btn--danger:focus, .ui-btn--danger:active { color: var(--color-text-on-brand); background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
/* --sm is 36px on desktop only (touch keeps 44px) */
.ui-btn--sm { padding: 0 var(--space-3); font-size: var(--fs-sm); }
@media (min-width: 1024px) { .ui-btn--sm { min-height: var(--control-h-sm); } }
.ui-btn--lg { min-height: calc(var(--control-h) + var(--space-2)); padding: 0 var(--space-5); font-size: var(--fs-md); }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--icon { width: var(--control-h); padding: 0; }
@media (min-width: 1024px) { .ui-btn--icon.ui-btn--sm { width: var(--control-h-sm); } }
.ui-btn[disabled], .ui-btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; }
.ui-btn.is-loading { pointer-events: none; cursor: progress; }
/* .is-unavailable (+ aria-disabled="true"): looks disabled but keeps hover/focus so a tooltip can say why (refill wait time) */
.ui-btn.is-unavailable, .ui-btn.is-unavailable:hover, .ui-btn.is-unavailable:focus, .ui-btn.is-unavailable:active {
  color: var(--color-text-subtle); background: var(--color-bg-sunken); border-color: var(--color-border); cursor: not-allowed; transform: none;
}
.ui-btn.is-loading::before {
  content: ""; width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ui-spin 700ms linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
/* 2 Field */
.ui-field { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.ui-field__label { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.ui-field__help { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.ui-field__error, .ui-field__success { display: none; align-items: baseline; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ui-field__error { color: var(--color-danger); }
.ui-field__success { color: var(--color-success); }
.has-error .ui-field__error, .has-success .ui-field__success { display: flex; }
.has-error .ui-input, .has-error .ui-select, .has-error .ui-textarea { border-color: var(--color-danger); }
.has-error .ui-input:focus, .has-error .ui-select:focus, .has-error .ui-textarea:focus { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); }
.has-success .ui-input, .has-success .ui-select, .has-success .ui-textarea { border-color: var(--color-success); }
/* 3 Input / select / textarea */
.ui-input, .ui-select, .ui-textarea {
  display: block; width: 100%; height: auto; min-height: var(--control-h); margin: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--color-text);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-sm); box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--color-text-muted); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 1px var(--color-focus); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--color-text-subtle); opacity: 1; }
.ui-input[disabled], .ui-select[disabled], .ui-textarea[disabled], .ui-input[readonly] { color: var(--color-text-muted); background-color: var(--color-bg-sunken); border-color: var(--color-border-strong); cursor: not-allowed; }
.ui-input[readonly] { cursor: text; }
.ui-input--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-select {
  padding-right: var(--space-7); -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25em) 52%, calc(100% - 0.9em) 52%;
  background-size: 0.35em 0.35em, 0.35em 0.35em; background-repeat: no-repeat;
}
.ui-select[multiple] { padding-right: var(--space-3); background-image: none; }
.ui-textarea { min-height: calc(var(--control-h) * 2.5); resize: vertical; }
/* 3b Input group */
.ui-input-group { display: flex; align-items: stretch; width: 100%; }
.ui-input-group > .ui-input, .ui-input-group > .ui-select { flex: 1 1 auto; min-width: 0; border-radius: 0; }
.ui-input-group > * + * { margin-left: -1px; }
.ui-input-group > :first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.ui-input-group > :last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.ui-input-group > .ui-btn { flex: none; border-radius: 0; }
.ui-input-group > .ui-input:focus, .ui-input-group > .ui-select:focus, .ui-input-group > .ui-btn:focus-visible { position: relative; z-index: 1; }
.ui-input-group__addon {
  display: flex; align-items: center; flex: none; padding: 0 var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-text-muted);
  background: var(--color-bg-sunken); border: 1px solid var(--color-border-control);
}
/* 4 Checkbox / radio */
.ui-check { display: flex; align-items: flex-start; gap: var(--space-3); max-width: none; min-height: var(--tap-min); margin: 0; padding: var(--space-2) 0; font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--color-text); cursor: pointer; }
.ui-check input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0.05em 0 0; accent-color: var(--color-primary); cursor: pointer; }
.ui-check input:disabled, .ui-check input:disabled + span { color: var(--color-text-subtle); cursor: not-allowed; }
.ui-check__help { display: block; margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--color-text-muted); }
/* 5 Card */
.ui-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); color: var(--color-text); background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ui-card > * { margin-top: 0; margin-bottom: 0; }
.ui-card__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--row-h); height: var(--row-h); font-size: var(--fs-lg); color: var(--color-primary); background: var(--color-bg-brand-soft); border-radius: var(--radius-sm); }
.ui-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: normal; }
.ui-card__text { color: var(--color-text-muted); }
.ui-card__link { margin-top: auto; padding-top: var(--space-2); font-weight: var(--fw-semibold); }
.ui-card--link { transition: border-color var(--dur-fast) var(--ease-out); }
.ui-card--link .ui-card__title a { color: inherit; text-decoration: none; }
.ui-card--link .ui-card__title a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
.ui-card--link .ui-card__title a:focus-visible { outline: none; }
.ui-card--link:hover { border-color: var(--color-text-muted); }
.ui-card--link:hover .ui-card__title a { color: var(--color-link); }
.ui-card--link:focus-within { box-shadow: var(--focus-ring); }
.ui-card--flat { background: var(--color-bg-sunken); border-color: transparent; }
.ui-card--dark { color: var(--color-text-inverse);
background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); }
.ui-card--dark .ui-card__icon { color: var(--color-link-on-dark); background: var(--color-bg-inverse-raised); }
/* 6 Stat */
/* 7 Steps */
.ui-steps { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: ui-step; }
.ui-steps__item { position: relative; padding-left: calc(var(--control-h) + var(--space-4)); counter-increment: ui-step; }
.ui-steps__item::before {
  content: counter(ui-step, decimal-leading-zero); position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary);
  background: var(--color-bg-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
.ui-steps__item h3 { margin: 0 0 var(--space-1); font-size: var(--fs-lg); }
.ui-steps__item p { margin: 0; color: var(--color-text-muted); }
@media (min-width: 1024px) { .ui-steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
/* Steps --lg: big Mono numbers, no box. Phones: number left of the text; 768: 2 columns, number on top;
   1024: all steps in one row with a hairline connector from each number towards the next step. */
.ui-steps--lg { gap: var(--space-6); }
.ui-steps--lg .ui-steps__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: var(--space-4); padding-left: 0; }
.ui-steps--lg .ui-steps__item::before { position: static; grid-row: 1 / span 2; display: block; width: auto; height: auto; font-size: var(--fs-2xl); line-height: var(--lh-tight); background: none; border: 0; border-radius: 0; }
@media (min-width: 768px) {
  .ui-steps--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-steps--lg .ui-steps__item { display: block; }
  .ui-steps--lg .ui-steps__item::before { margin-bottom: var(--space-3); }
}
@media (min-width: 1024px) {
  .ui-steps--lg { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ui-steps--lg .ui-steps__item:not(:last-child)::after {
    content: ""; position: absolute; top: calc(var(--fs-2xl) * var(--lh-tight) / 2); left: calc(2ch + var(--space-4)); right: calc(var(--space-4) - var(--space-6));
    font-family: var(--font-mono); font-size: var(--fs-2xl); border-top: 1px solid var(--color-border-strong);
  }
}
/* 8 Feature list */
.ui-features { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.ui-features > li { display: flex; align-items: flex-start; gap: var(--space-3); }
.ui-features > li > i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--row-h); height: var(--row-h); color: var(--color-primary); background: var(--color-bg-brand-soft); border-radius: var(--radius-sm); }
.ui-features h3 { margin: 0 0 var(--space-1); font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: normal; }
.ui-features p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
@media (min-width: 768px) { .ui-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); } }
.ui-features__link { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
/* Feature list --rows: one column at every width, hairline between rows (put it in a ui-card for an outer border) */
.ui-features.ui-features--rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ui-features--rows > li { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.ui-features--rows > li:first-child { padding-top: 0; border-top: 0; }
.ui-features--rows > li:last-child { padding-bottom: 0; }
/* 9 Table */
.ui-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ui-table { width: 100%; margin: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--color-text); font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; }
.ui-table th, .ui-table td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-border); }
.ui-table thead th {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--color-text-muted); white-space: nowrap; vertical-align: bottom;
  background: var(--color-bg-sunken); border-bottom-color: var(--color-border-strong);
}
.ui-table td { height: var(--row-h); }
.ui-table tbody tr:last-child > td, .ui-table tbody tr:last-child > th { border-bottom: 0; }
.ui-table tbody tr:hover > td { background: var(--color-bg); }
.ui-table .is-num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.ui-table thead .is-num { font-family: var(--font-sans); }
.ui-table .is-id { font-family: var(--font-mono); color: var(--color-text-muted); white-space: nowrap; }
.ui-table .is-action { width: 1%; text-align: right; white-space: nowrap; }
.ui-table .is-primary { font-weight: var(--fw-semibold); min-width: 14rem; }
.ui-table .is-long { min-width: 8rem; overflow-wrap: anywhere; }
.ui-table__copy { min-height: var(--tap-min); padding: 0; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; text-decoration: underline dashed var(--color-border-strong); text-underline-offset: 0.25em; }
.ui-table__copy:hover { color: var(--color-text); text-decoration-color: var(--color-text); }
.ui-table__copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (min-width: 1024px) { .ui-table__copy { min-height: 0; } }
.ui-table__sub { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-text-muted); }
.ui-table__group > th { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-align: left; color: var(--color-text); background: var(--color-bg-brand-soft); border-bottom-color: var(--color-border-strong); }
.ui-table__empty > td { height: auto; padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-muted); }
.ui-table--compact th, .ui-table--compact td { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.ui-table--compact td { height: var(--control-h-sm); }
@media (min-width: 1024px) {
  .ui-table-wrap--sticky { overflow: visible; }
  .ui-table-wrap--sticky .ui-table thead th { position: sticky; top: var(--header-h); z-index: 1; }
  .ui-table-wrap--sticky .ui-table thead th:first-child { border-top-left-radius: var(--radius-md); }
  .ui-table-wrap--sticky .ui-table thead th:last-child { border-top-right-radius: var(--radius-md); }
}
/* phone card mode: rows become label/value cards (data-label) */
@media not all and (min-width: 768px) {
  .ui-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-table--cards, .ui-table--cards tbody, .ui-table--cards tr { display: block; }
  .ui-table--cards tbody tr { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .ui-table--cards tbody tr.ui-table__group { padding: 0; }
  .ui-table--cards tbody tr:last-child { border-bottom: 0; }
  .ui-table--cards tbody tr:hover > td { background: transparent; }
  .ui-table--cards td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); height: auto; padding: var(--space-1) 0; text-align: right; border: 0; }
  .ui-table--cards td::before { content: attr(data-label); flex: none; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-text-muted); text-align: left; }
  .ui-table--cards td:not([data-label])::before { display: none; }
  .ui-table--cards td.is-primary { order: -1; display: block; min-width: 0; padding-bottom: var(--space-2); font-size: var(--fs-base); text-align: left; }
  .ui-table--cards td.is-action { display: block; width: auto; padding-top: var(--space-3); }
  .ui-table--cards td.is-action .ui-btn { width: 100%; }
  .ui-table--cards .ui-table__group > th { display: block; padding: var(--space-2) var(--space-4); }
  .ui-table--cards .ui-table__empty > td { display: block; text-align: center; }
  .ui-table--cards td.is-long { display: block; text-align: left; }
  .ui-table--cards td.is-long[data-label]::before { display: block; margin-bottom: var(--space-1); }
}
/* --cards-lg: the same card mode below 1280px, for wide tables only (Orders: the signed-in sidebar leaves ~735px at 1024); narrow tables keep --cards */
@media not all and (min-width: 1280px) {
  .ui-table--cards-lg thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-table--cards-lg, .ui-table--cards-lg tbody, .ui-table--cards-lg tr { display: block; }
  .ui-table--cards-lg tbody tr { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .ui-table--cards-lg tbody tr.ui-table__group { padding: 0; }
  .ui-table--cards-lg tbody tr:last-child { border-bottom: 0; }
  .ui-table--cards-lg tbody tr:hover > td { background: transparent; }
  .ui-table--cards-lg td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); height: auto; padding: var(--space-1) 0; text-align: right; border: 0; }
  .ui-table--cards-lg td::before { content: attr(data-label); flex: none; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-text-muted); text-align: left; }
  .ui-table--cards-lg td:not([data-label])::before { display: none; }
  .ui-table--cards-lg td.is-primary { order: -1; display: block; min-width: 0; padding-bottom: var(--space-2); font-size: var(--fs-base); text-align: left; }
  .ui-table--cards-lg td.is-action { display: block; width: auto; padding-top: var(--space-3); }
  .ui-table--cards-lg td.is-action .ui-btn { width: 100%; }
  .ui-table--cards-lg .ui-table__group > th { display: block; padding: var(--space-2) var(--space-4); }
  .ui-table--cards-lg .ui-table__empty > td { display: block; text-align: center; }
  .ui-table--cards-lg td.is-long { display: block; text-align: left; }
  .ui-table--cards-lg td.is-long[data-label]::before { display: block; margin-bottom: var(--space-1); }
}
/* 10 Badge */
.ui-badge {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.15em 0.65em;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.45; letter-spacing: normal;
  color: var(--color-text); background: var(--color-bg-sunken); border: 1px solid transparent; border-radius: var(--radius-pill);
  white-space: nowrap; vertical-align: middle; --badge-dot: var(--color-text-subtle);
}
.ui-badge::before { content: ""; flex: none; width: 0.5em; height: 0.5em; background: var(--badge-dot); border-radius: 50%; }
.ui-badge--neutral { --badge-dot: var(--color-text-subtle); }
.ui-badge--success { background: var(--color-success-soft); --badge-dot: var(--color-success); }
.ui-badge--warning { background: var(--color-warning-soft); --badge-dot: var(--color-warning); }
.ui-badge--danger { background: var(--color-danger-soft); --badge-dot: var(--color-danger); }
.ui-badge--info { background: var(--color-info-soft); --badge-dot: var(--color-info); }
.ui-badge--accent { color: var(--color-text-on-accent); background: var(--color-accent); }
.ui-badge--accent::before, .ui-badge--outline::before { display: none; }
.ui-badge--outline { color: var(--color-text-muted); background: var(--color-bg-raised); border-color: var(--color-border-strong); border-radius: var(--radius-sm); }
/* 11 Alert */
.ui-alert { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text); background: var(--color-bg-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.ui-alert > i { flex: none; margin-top: 0.3em; }
.ui-alert__body { flex: 1 1 auto; min-width: 0; }
.ui-alert__body > :last-child { margin-bottom: 0; }
.ui-alert__title { display: block; font-weight: var(--fw-bold); }
.ui-alert--success { background: var(--color-success-soft); border-color: var(--color-success); }
.ui-alert--success > i { color: var(--color-success); }
.ui-alert--warning { background: var(--color-warning-soft); border-color: var(--color-warning); }
.ui-alert--warning > i { color: var(--color-warning); }
.ui-alert--danger { background: var(--color-danger-soft); border-color: var(--color-danger); }
.ui-alert--danger > i { color: var(--color-danger); }
.ui-alert--info { background: var(--color-info-soft); border-color: var(--color-info); }
.ui-alert--info > i { color: var(--color-info); }
.ui-alert a { color: var(--color-text); font-weight: var(--fw-semibold); }
/* 12 Accordion / FAQ */
.ui-accordion { border-top: 1px solid var(--color-border); }
.ui-accordion__item { border-bottom: 1px solid var(--color-border); }
.ui-accordion__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: calc(var(--tap-min) + var(--space-2)); padding: var(--space-3) 0;
  font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: var(--lh-snug); list-style: none; cursor: pointer;
}
.ui-accordion__item > summary::-webkit-details-marker { display: none; }
.ui-accordion__item > summary::after {
  content: ""; flex: none; width: 0.5em; height: 0.5em; margin-right: var(--space-1);
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-25%) rotate(45deg); transition: transform var(--dur-fast) var(--ease-out);
}
.ui-accordion__item[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
.ui-accordion__item > summary:hover { color: var(--color-link); }
.ui-accordion__item > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ui-accordion__body { max-width: var(--measure); padding: 0 0 var(--space-4); color: var(--color-text-muted); }
.ui-accordion__body > :last-child { margin-bottom: 0; }
/* 13 Tabs */
.ui-tabs__list { display: flex; gap: var(--space-1); margin: 0 0 var(--space-5); overflow-x: auto; border-bottom: 1px solid var(--color-border); scrollbar-width: none; }
.ui-tabs__list::-webkit-scrollbar { display: none; }
.ui-tabs__tab {
  flex: none; min-height: var(--tap-min); margin: 0 0 -1px; padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text-muted);
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; white-space: nowrap;
}
.ui-tabs__tab:hover { color: var(--color-text); }
.ui-tabs__tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-primary); }
.ui-tabs__tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.ui-tabs__panel:focus-visible { outline-offset: var(--space-1); }
/* 14 Breadcrumb */
.ui-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--color-text-muted); }
.ui-breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-text-subtle); }
.ui-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.ui-breadcrumb a:hover { color: var(--color-link); text-decoration: underline; }
.ui-breadcrumb [aria-current] { font-weight: var(--fw-semibold); color: var(--color-text); }
/* 15 Pagination */
.ui-pagination { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-5) 0; padding: 0; list-style: none; border-radius: 0; }
.ui-pagination > li { display: block; }
.ui-pagination > li > a, .ui-pagination > li > span {
  float: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-min); height: var(--tap-min); margin: 0; padding: 0 var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1; color: var(--color-text); text-decoration: none;
  background: var(--color-bg-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
.ui-pagination > li:first-child > a, .ui-pagination > li:first-child > span, .ui-pagination > li:last-child > a, .ui-pagination > li:last-child > span { margin-left: 0; border-radius: var(--radius-sm); }
.ui-pagination > li > a:hover, .ui-pagination > li > a:focus { z-index: 1; color: var(--color-text); background: var(--color-bg-raised); border-color: var(--color-text); }
.ui-pagination > li > a:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.ui-pagination > .active > a, .ui-pagination > .active > span, .ui-pagination > .active > a:hover, .ui-pagination > .active > a:focus, .ui-pagination > .active > span:hover {
  z-index: 1; font-weight: var(--fw-semibold); color: var(--color-text-inverse); background: var(--color-text); border-color: var(--color-text); cursor: default;
}
.ui-pagination > .disabled > a, .ui-pagination > .disabled > span, .ui-pagination > .disabled > a:hover, .ui-pagination > .disabled > a:focus {
  color: var(--color-text-subtle); background: var(--color-bg-sunken); border-color: var(--color-border); cursor: not-allowed;
}
@media (min-width: 1024px) {
  .ui-pagination > li > a, .ui-pagination > li > span { min-width: var(--control-h-sm); height: var(--control-h-sm); }
}
/* 16 Chips / filter */
.ui-chips { display: flex; gap: var(--space-2); margin: 0; padding: 0 0 var(--space-1); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; list-style: none; }
/* phones: one row that scrolls; the right edge fades to show there is more (mask = alpha only); the spacer lets the last chip clear the fade */
@media not all and (min-width: 768px) {
  .ui-chips { -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--space-6)), transparent); mask-image: linear-gradient(to right, black calc(100% - var(--space-6)), transparent); }
  .ui-chips::after { content: ""; flex: none; width: var(--space-5); }
}
@media (min-width: 768px) { .ui-chips { flex-wrap: wrap; overflow-x: visible; } }
.ui-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  min-height: var(--tap-min); padding: 0 var(--space-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1; color: var(--color-text); text-decoration: none; white-space: nowrap;
  background: var(--color-bg-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); cursor: pointer;
}
@media (min-width: 1024px) { .ui-chip { min-height: var(--control-h-sm); } }
.ui-chip:hover, .ui-chip:focus { color: var(--color-text); text-decoration: none; border-color: var(--color-text); }
.ui-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-chip.is-active, .ui-chip[aria-current], .ui-chip[aria-pressed="true"] { color: var(--color-text-inverse); background: var(--color-text); border-color: var(--color-text); }
.ui-chip > i { color: inherit; }
/* 17 Empty state */
.ui-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); text-align: center; background: var(--color-bg-raised); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.ui-empty > i { font-size: var(--fs-2xl); color: var(--color-text-subtle); }
.ui-empty > p { max-width: 40ch; margin: 0; color: var(--color-text-muted); }
/* 18 CTA band */
.ui-cta { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-6) var(--space-5); background: var(--color-bg-brand-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ui-cta > * { margin: 0; }
.ui-cta__title { font-size: var(--fs-xl); }
.ui-cta__text { color: var(--color-text-muted); }
@media (min-width: 768px) { .ui-cta { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-6); } .ui-cta__actions { grid-column: 2; grid-row: 1 / span 2; } }
.ui-cta--dark { border-color: transparent; background: var(--color-bg-inverse); }
.ui-cta--brand { border-color: transparent; background: var(--color-bg-brand); }
/* 19 Code block */
.ui-code {
  display: block; margin: 0 0 var(--space-4); padding: var(--space-4); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text-inverse);
  white-space: pre; word-break: normal; overflow-wrap: normal; tab-size: 2;
  background: var(--color-bg-inverse); border: 0; border-radius: var(--radius-md);
}
.ui-code code { padding: 0; font-size: inherit; color: inherit; white-space: inherit; background: none; border-radius: 0; }
.ui-code-wrap { position: relative; min-width: 0; margin: 0 0 var(--space-4); }
.ui-code-wrap > .ui-code { margin: 0; padding-top: calc(var(--control-h) + var(--space-2)); }
.ui-code__copy { position: absolute; top: var(--space-2); right: var(--space-2); }
/* 20 Prose */
.ui-prose { max-width: var(--measure); font-size: var(--fs-base); line-height: var(--lh-body); }
.ui-prose > :first-child { margin-top: 0; }
.ui-prose h2 { margin-top: var(--space-7); }
.ui-prose h3 { margin-top: var(--space-6); }
.ui-prose h4 { margin-top: var(--space-5); }
.ui-prose li + li { margin-top: var(--space-1); }
.ui-prose img { display: block; margin: var(--space-5) 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ui-prose blockquote { margin: var(--space-5) 0; padding: 0 0 0 var(--space-4); font-size: var(--fs-base); color: var(--color-text-muted); border-left: 2px solid var(--color-primary); }
.ui-prose table { display: block; max-width: 100%; margin: var(--space-5) 0; overflow-x: auto; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ui-prose th, .ui-prose td { padding: var(--space-2) var(--space-3); text-align: left; border: 1px solid var(--color-border); }
.ui-prose th { font-weight: var(--fw-semibold); background: var(--color-bg-sunken); }
.ui-prose pre { padding: var(--space-4); overflow-x: auto; font-size: var(--fs-sm); color: var(--color-text-inverse); background: var(--color-bg-inverse); border: 0; border-radius: var(--radius-md); word-break: normal; white-space: pre; }
.ui-prose pre code { padding: 0; color: inherit; background: none; }
/* 21 Media frame */
.ui-media { margin: 0; }
.ui-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.ui-media figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }
.ui-media--screenshot img, .ui-media--screenshot .ui-media__placeholder { background: var(--color-bg-raised); border: 1px solid var(--color-border-strong); }
.ui-media__placeholder {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-xs); text-align: center; color: var(--color-text-muted);
  background: var(--color-bg-sunken); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
}
.ui-media__placeholder--16x9 { aspect-ratio: 16 / 9; }
.ui-media__placeholder--1x1 { aspect-ratio: 1 / 1; }
/* 22 Skeleton */
.ui-skeleton { display: block; height: 1em; background: var(--color-bg-sunken); border-radius: var(--radius-sm); animation: ui-pulse 1400ms ease-in-out infinite; }
.ui-skeleton--title { height: var(--fs-xl); }
.ui-skeleton--row { height: var(--row-h); }
@keyframes ui-pulse { 50% { opacity: 0.5; } }
/* 23 Key–value list: phones label above value; from 480 label left, value right; hairline between rows */
.ui-dl { margin: 0; }
.ui-dl__row { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.ui-dl__row:first-child { padding-top: 0; border-top: 0; }
.ui-dl__row:last-child { padding-bottom: 0; }
.ui-dl dt { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-text-muted); }
.ui-dl dd { margin: 0; font-weight: var(--fw-semibold); }
@media (min-width: 480px) {
  .ui-dl__row { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
  .ui-dl dt { flex: none; }
  .ui-dl dd { text-align: right; }
}
/* 24 Bulk select + selection bar (module bulk-select). Checkboxes and bar stay hidden until the script adds .is-ready */
.ui-bulk:not(.is-ready) .ui-bulk__cell { display: none; }
.ui-bulk__cell { width: 1%; }
.ui-bulk__cell input { width: 1.125rem; height: 1.125rem; margin: 0; vertical-align: middle; accent-color: var(--color-primary); cursor: pointer; }
.ui-bulk tr.is-selected, .ui-bulk tr.is-selected > td { background: var(--color-bg-brand-soft); }
.ui-bulkbar {
  position: relative; z-index: 2; display: none; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--color-bg-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-1);
}
.ui-bulk.has-selection .ui-bulkbar, .ui-bulkbar:not([data-state="select"]) { display: flex; }
.ui-bulkbar p { margin: 0; }
.ui-bulkbar__all { display: none; align-items: center; min-height: var(--tap-min); padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ui-bulkbar__count { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bulkbar__actions, .ui-bulkbar__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-bulkbar__actions { margin-left: auto; }
.ui-bulk:not(.has-selection) .ui-bulkbar__count, .ui-bulk:not(.has-selection) .ui-bulkbar__actions { display: none; }
.ui-bulkbar__confirm, .ui-bulkbar__run, .ui-bulkbar__result { display: none; }
.ui-bulkbar:not([data-state="select"]) > :not(.ui-bulkbar__confirm):not(.ui-bulkbar__run):not(.ui-bulkbar__result) { display: none; }
.ui-bulkbar[data-state="confirm"] .ui-bulkbar__confirm, .ui-bulkbar[data-state="run"] .ui-bulkbar__run, .ui-bulkbar[data-state="result"] .ui-bulkbar__result { display: flex; }
.ui-bulkbar__msg { flex: 1 1 14rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ui-bulkbar__run, .ui-bulkbar__result { flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: var(--tap-min); font-size: var(--fs-sm); }
.ui-bulkbar__run::before { content: ""; width: 1em; height: 1em; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin 700ms linear infinite; }
.ui-bulkbar__result .ui-btn { margin-left: auto; }
.ui-bulkbar [hidden] { display: none; }
/* sticky under the header from 768px; on phones it stays in the flow above the cards */
@media (min-width: 768px) { .ui-bulkbar { position: sticky; top: var(--header-h); } }
@media (min-width: 1024px) { .ui-bulkbar__all { min-height: var(--control-h-sm); } }
/* card mode: checkbox top-left of each card; select-all lives in the bar (the table head is hidden) */
@media not all and (min-width: 768px) {
  .ui-bulk.is-ready .ui-bulkbar { display: flex; }
  .ui-bulk.is-ready .ui-bulkbar__all { display: inline-flex; }
  .ui-bulk.is-ready .ui-table--cards tbody tr { position: relative; padding-left: calc(var(--space-2) + var(--tap-min)); }
  .ui-bulk.is-ready .ui-table--cards td.ui-bulk__cell { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: var(--tap-min); height: calc(var(--tap-min) + var(--space-2)); padding: 0; }
}
@media not all and (min-width: 1280px) {
  .ui-bulk--cards-lg.is-ready .ui-bulkbar { display: flex; }
  .ui-bulk--cards-lg.is-ready .ui-bulkbar__all { display: inline-flex; }
  .ui-bulk.is-ready .ui-table--cards-lg tbody tr { position: relative; padding-left: calc(var(--space-2) + var(--tap-min)); }
  .ui-bulk.is-ready .ui-table--cards-lg td.ui-bulk__cell { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: var(--tap-min); height: calc(var(--tap-min) + var(--space-2)); padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .ui-bulkbar__run::before { animation: none; border-right-color: currentColor; opacity: 0.6; } }
/* <<< REGION:COMPONENTS */

/* >>> REGION:PANEL-COMPAT — restyled Bootstrap 3 / panel-generated classes */
/* Bootstrap 3 / panel markup, restyled. Selectors match Bootstrap's specificity; loading later, ours win. */
/* Buttons */
.btn {
  height: auto; padding: 0 var(--space-4);
  font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: calc(var(--control-h) - 2px);
  border-radius: var(--radius-md); box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:focus, .btn.focus, .btn:active:focus, .btn.active:focus, .btn:active.focus, .btn.active.focus { outline: none; }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn:active, .btn.active { box-shadow: none; }
.btn-xs { padding: 0 var(--space-3); font-size: var(--fs-sm); line-height: calc(var(--control-h) - 2px); border-radius: var(--radius-md); }
@media (min-width: 1024px) { .btn-xs { line-height: calc(var(--control-h-sm) - 2px); } }
.btn-default { color: var(--color-text); background-color: var(--color-bg-raised); border-color: var(--color-border-control); }
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .btn-default:active:hover, .btn-default:active:focus, .btn-default.active:hover, .btn-default.active:focus, .open > .dropdown-toggle.btn-default {
  color: var(--color-text); background-color: var(--color-bg-raised); border-color: var(--color-text);
}
.btn-primary { color: var(--color-text-on-brand); background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary.active:hover, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary {
  color: var(--color-text-on-brand); background-color: var(--color-primary-hover); border-color: var(--color-primary-hover);
}
.btn-primary:active, .btn-primary.active { color: var(--color-text-on-brand); background-color: var(--color-primary-active); border-color: var(--color-primary-active); }
.btn-primary.disabled, .btn-primary[disabled], .btn-primary.disabled:hover, .btn-primary[disabled]:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-link { color: var(--color-link); font-weight: var(--fw-semibold); }
.btn-link:hover, .btn-link:focus { color: var(--color-link-hover); }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: 0.45; }
/* Forms */
.form-group { margin-bottom: var(--space-4); }
.control-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.form-control {
  height: var(--control-h); padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--color-text);
  background-color: var(--color-bg-raised); border: 1px solid var(--color-border-control); border-radius: var(--radius-sm); box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-control:focus { border-color: var(--color-focus); outline: 0; box-shadow: 0 0 0 1px var(--color-focus); }
.form-control::placeholder { color: var(--color-text-subtle); opacity: 1; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { color: var(--color-text-muted); background-color: var(--color-bg-sunken); border-color: var(--color-border-strong); opacity: 1; }
textarea.form-control { height: auto; min-height: calc(var(--control-h) * 2.5); }
select.form-control { cursor: pointer; }
.help-block { margin-top: var(--space-2); margin-bottom: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.has-error .form-control { border-color: var(--color-danger); box-shadow: none; }
.has-error .form-control:focus { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); }
.has-error .help-block, .has-error .control-label { color: var(--color-danger); }
.input-group-addon { padding: 0 var(--space-3); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-text-muted); background-color: var(--color-bg-sunken); border-color: var(--color-border-control); border-radius: var(--radius-sm); }
.input-group-btn > .btn { line-height: calc(var(--control-h) - 2px); }
.checkbox label, .radio label { font-weight: var(--fw-regular); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }
/* Tables */
.table { margin-bottom: 0; font-size: var(--fs-sm); color: var(--color-text); font-variant-numeric: tabular-nums; }
.table > thead > tr > th {
  padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--color-text-muted); white-space: nowrap; background: var(--color-bg-sunken); border-top: 0; border-bottom: 1px solid var(--color-border-strong);
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td { padding: var(--space-2) var(--space-3); vertical-align: middle; border-top: 1px solid var(--color-border); }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th { border-color: var(--color-border); }
/* Wells/panels. Classes no baseline template uses are left to Bootstrap until needed. */
.well { padding: var(--space-4); background-color: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; }
.panel { background-color: var(--color-bg-raised); border-radius: var(--radius-md); box-shadow: none; }
.panel-body { padding: var(--space-4); }
/* Nav pills (panel status filters) = .ui-chip look */
.nav-pills > li > a { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--color-text); background-color: var(--color-bg-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.nav-pills > li + li { margin-left: var(--space-2); }
.nav-pills > li > a:hover, .nav-pills > li > a:focus { color: var(--color-text); background-color: var(--color-bg-raised); border-color: var(--color-text); }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: var(--color-text-inverse); background-color: var(--color-text); border-color: var(--color-text); }
/* Alerts */
.alert { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--fs-sm); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.alert-success { color: var(--color-text); background-color: var(--color-success-soft); border-color: var(--color-success); }
.alert-info { color: var(--color-text); background-color: var(--color-info-soft); border-color: var(--color-info); }
.alert-warning { color: var(--color-text); background-color: var(--color-warning-soft); border-color: var(--color-warning); }
.alert-danger { color: var(--color-text); background-color: var(--color-danger-soft); border-color: var(--color-danger); }
.alert .alert-link, .alert a { color: var(--color-text); font-weight: var(--fw-semibold); }
.close { min-width: var(--tap-min); min-height: var(--tap-min); margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0; font-size: var(--fs-lg); font-weight: var(--fw-regular); color: var(--color-text); text-shadow: none; opacity: 0.6; }
.close:hover, .close:focus { color: var(--color-text); opacity: 1; }
/* Alert close (every alert type): 44px tap area (tap-min, also on phones) drawn as a 36px shape, vertically centred
   inside the alert padding. Absolutely positioned, so a one-line alert keeps its height. Overrides Bootstrap's
   .alert-dismissible .close { position: relative; right: -21px } and the negative margins of .close above. */
.alert-dismissible { position: relative; padding-right: calc(var(--tap-min) + var(--space-2)); }
.alert-dismissible .close { position: absolute; top: 50%; right: var(--space-1); z-index: 0; display: flex; align-items: center; justify-content: center; float: none; width: var(--tap-min); height: var(--tap-min); min-width: 0; min-height: 0; margin: 0; padding: 0; font-size: var(--fs-xl); line-height: 1; color: var(--color-text); background: none; border: 0; opacity: 0.7; transform: translateY(-50%); }
.alert-dismissible .close::before { content: ""; position: absolute; top: var(--space-1); right: var(--space-1); bottom: var(--space-1); left: var(--space-1); z-index: -1; border-radius: var(--radius-md); transition: background-color var(--dur-fast) var(--ease-out); }
.alert-dismissible .close:hover, .alert-dismissible .close:focus { color: var(--color-text); opacity: 1; }
.alert-dismissible .close:hover::before { background-color: var(--color-bg-raised); }
.alert-dismissible .close:focus-visible { outline: none; }
.alert-dismissible .close:focus-visible::before { box-shadow: var(--focus-ring); }
/* Button-like links: no underline in any state (base links underline only in running text) */
.btn, .btn:hover, .btn:focus, .btn:active, .btn.active,
.nav > li > a, .nav > li > a:hover, .nav > li > a:focus, .nav > .active > a,
.btn-group a, .list-group-item, .list-group-item:hover, .list-group-item:focus,
.pagination > li > a, .pagination > li > span, .pager li > a, .pager li > span,
.dropdown-menu > li > a, .ui-btn, .ui-chip { text-decoration: none; }
/* Panel toast, top-centre (bottom-right is for widgets). [CHECK: panel JS only toggles it] */
#notify-wrapper {
  position: fixed; top: calc(var(--header-h) + var(--space-3)); left: 50%; z-index: var(--z-toast);
  width: calc(100% - var(--gutter) * 2); max-width: var(--container-narrow); margin: 0;
  transform: translateX(-50%); box-shadow: var(--shadow-2);
}
/* Modals (centred card on phones, own scroll when tall) */
.modal-backdrop { background-color: var(--color-bg-inverse); }
.modal-backdrop.in { opacity: 0.55; }
.modal-content { background-color: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.modal-header { padding: var(--space-4) var(--space-5); border-bottom-color: var(--color-border); }
.modal-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.modal-body { padding: var(--space-5); }
.modal-footer { padding: var(--space-4) var(--space-5); border-top-color: var(--color-border); }
@media not all and (min-width: 768px) {
  .modal-dialog { display: flex; align-items: center; min-height: calc(100% - var(--space-4) * 2); margin: var(--space-4); }
  .modal-content { width: 100%; max-height: calc(100vh - var(--space-4) * 2); max-height: calc(100dvh - var(--space-4) * 2); overflow-y: auto; }
  /* Services "View" pop-up only (built by panel script 2bmkw3h7moize9wl.js): wider body. Same height as other pop-ups.
     !important: the panel script sets an inline style="padding-right: 15px" on this modal. */
  .service-description-modal { padding-right: 0 !important; }
  .service-description-modal .modal-dialog { margin: var(--space-4) var(--space-2); }
  .service-description-modal .modal-header, .service-description-modal .modal-body, .service-description-modal .modal-footer { padding-left: var(--space-3); padding-right: var(--space-3); }
}
/* Dropdowns */
.dropdown-menu { max-width: calc(100vw - var(--gutter) * 2); max-height: min(60vh, 24rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1) 0; font-size: var(--fs-sm); background-color: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.dropdown-menu > li > a { display: block; padding: var(--space-2) var(--space-4); line-height: var(--lh-snug); color: var(--color-text); text-decoration: none; white-space: nowrap; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: var(--color-text); text-decoration: none; background-color: var(--color-bg-sunken); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { font-weight: var(--fw-semibold); color: var(--color-text); background-color: var(--color-bg-brand-soft); }
.dropdown-menu .divider { background-color: var(--color-border); }
/* Phones: page dropdowns open under their button and take the room up to the right edge of the column (static
   parent + auto offsets), so a long list (services filter) gets the width and a short one never pokes off-screen. */
@media not all and (min-width: 768px) {
  .dropdown-menu > li > a { white-space: normal; }
  .site-main .dropdown, .site-main .nav > li, .site-main .btn-group { position: static; }
  .site-main .dropdown > .dropdown-menu { top: auto; left: auto; right: auto; }
}
.navbar-icon { margin-right: var(--space-1); }   /* admin menu icon class kept from the original layout */
/* Old page templates (Bootstrap .container): space under the new header (the old navbar gave 20px) and, next to the
   signed-in sidebar, no fixed Bootstrap widths. New pages use .pg-* roots and are not affected. */
.site-main > .container:first-child, .site-main > .container-fluid:first-child { padding-top: var(--space-6); }
.site-app .container { width: auto; max-width: var(--container); }
/* Phone width safety net — CSS alone keeps every page within the screen, even without script.js or for tables the
   panel adds later: page content never widens the page; below 768px every table scrolls sideways in its own box.
   MODULE:tablewrap (script.js) wraps every table on phones, and from 768px only a table that would stick out past the
   page area, in .site-scroll-x (full-width scroll box); tables that fit on wide screens are never wrapped. */
.site-main { min-width: 0; overflow-x: hidden; overflow-x: clip; overflow-wrap: break-word; }
.site-main pre { max-width: 100%; overflow-x: auto; }
@media not all and (min-width: 768px) {
  .site-main table { display: block; width: 0; min-width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-main .site-scroll-x > table { display: table; width: 100%; min-width: 0; max-width: none; overflow: visible; }
  /* panel Bootstrap: .well-float { float: left; width: auto; min-width: 100% } grows to its widest code line or table */
  .site-main .well-float { float: none; }
}
/* Only exists where MODULE:tablewrap put it. width 0 + min-width 100%: the box never adds its table's width to a
   shrink-to-fit parent (the panel's .well-float), so the table scrolls inside instead of stretching the page. */
.site-scroll-x { width: 0; min-width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.site-scroll-x > table { margin-bottom: 0; }
/* The panel's global Bootstrap file sets body { padding-bottom: 50px } — an empty band under every page. */
body { padding-bottom: 0; }
/* Telegram button integration (panel-made, fixed bottom-right): 48px on phones. Rare max-width fix: its own CSS sets 60px. */
@media (max-width: 767px) {
  .integration-fixed .telegram-button, .integration-fixed .telegram-button svg { width: var(--space-7); height: var(--space-7); }
}
/* Tooltips */
.tooltip { font-family: var(--font-sans); font-size: var(--fs-xs); }
.tooltip.in { opacity: 1; }
.tooltip-inner { max-width: 18rem; padding: var(--space-2) var(--space-3); color: var(--color-text-inverse); text-align: left; background-color: var(--color-bg-inverse); border-radius: var(--radius-sm); }
.tooltip.top .tooltip-arrow { border-top-color: var(--color-bg-inverse); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--color-bg-inverse); }
.tooltip.left .tooltip-arrow { border-left-color: var(--color-bg-inverse); }
.tooltip.right .tooltip-arrow { border-right-color: var(--color-bg-inverse); }
/* Labels, badges */
.label { display: inline-block; padding: 0.15em 0.65em; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.45; color: var(--color-text); border-radius: var(--radius-pill); }
.label-default { background-color: var(--color-bg-sunken); }
.label-primary, .label-info { background-color: var(--color-info-soft); }
.label-success { background-color: var(--color-success-soft); }
.label-warning { background-color: var(--color-warning-soft); }
.label-danger { background-color: var(--color-danger-soft); }
.badge { padding: 0.2em 0.55em; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-on-brand); background-color: var(--color-text-muted); border-radius: var(--radius-pill); }
.text-muted { color: var(--color-text-muted); }
pre { color: var(--color-text); background-color: var(--color-bg-sunken); border-color: var(--color-border); border-radius: var(--radius-md); word-break: normal; }
/* <<< REGION:PANEL-COMPAT */

/* >>> REGION:GLOBAL — .site-header, .site-nav, .site-drawer, .site-footer, .site-alerts */
/* Look set on the style guide; wired to layout.twig v1.0.0 (2026-10-04). */
/* Skip link */
.site-skip { position: absolute; top: var(--space-2); left: var(--space-2); z-index: var(--z-toast); padding: var(--space-2) var(--space-4); font-weight: var(--fw-semibold); color: var(--color-text-on-brand); background: var(--color-primary); border-radius: var(--radius-md); transform: translateY(-200%); }
.site-skip:focus { color: var(--color-text-on-brand); transform: none; }
/* Header */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-bg-raised); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-2); height: var(--header-h); }
@media (min-width: 480px) { .site-header__inner { gap: var(--space-4); } }
.site-header__logo { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; line-height: var(--tap-min); white-space: nowrap; text-overflow: ellipsis; color: var(--color-text); text-decoration: none; }
.site-header__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--logo-h-sm); }
@media (min-width: 1024px) { .site-header__logo img { max-height: var(--logo-h); } }
.site-header__actions { display: flex; flex: none; align-items: center; gap: var(--space-2); margin-left: auto; }
.site-header__login, .site-header__signup { display: none; }
@media (min-width: 768px) { .site-header__login, .site-header__signup { display: inline-flex; } }
@media (min-width: 1024px) { .site-header__menu { display: none; } }
.site-nav { display: none; }
@media (min-width: 1024px) { .site-nav { display: block; margin-left: var(--space-4); } }
.site-nav__list { display: flex; align-items: stretch; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.site-nav__link {
  display: flex; align-items: center; height: var(--header-h); padding: 0 var(--space-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent; transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover, .site-nav__link:focus { color: var(--color-text); text-decoration: none; }
.site-nav__link:focus-visible { outline-offset: -2px; }
.site-nav__link[aria-current] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-primary); }
/* Balance (logged in) */
.site-balance { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: 0 var(--space-2); font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }
.site-balance__value { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.site-header__tools > .site-balance { display: none; }
@media (min-width: 1024px) { .site-header__tools > .site-balance { display: inline-flex; } }
/* Drawer (MODULE:drawer; :target fallback without JS) */
.site-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-drawer); display: none; overflow-y: auto; padding: 0 var(--gutter) var(--space-6); background: var(--color-bg-raised); }
.site-drawer.is-open, .site-drawer:target { display: block; }
@media (min-width: 1024px) { .site-drawer.is-open, .site-drawer:target { display: none; } }
.site-drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.site-drawer__list { margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.site-drawer__link { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--tap-min) + var(--space-1)); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.site-drawer__link:hover, .site-drawer__link:focus { color: var(--color-link); text-decoration: none; }
.site-drawer__link[aria-current] { color: var(--color-link); }
.site-drawer__actions { display: grid; gap: var(--space-3); }
body.is-drawer-open { overflow: hidden; }
/* Footer */
.site-footer {
  padding: var(--space-7) 0 var(--space-5); color: var(--color-text-inverse); background: var(--color-bg-inverse);
  --color-text-muted: var(--color-text-inverse-muted); --color-link: var(--color-link-on-dark); --color-link-hover: var(--color-text-inverse);
  --color-border: var(--color-border-inverse); --color-focus: var(--color-focus-on-dark);
  --focus-ring: var(--focus-ring-on-dark);
}
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 480px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } .site-footer__brand { grid-column: auto; } }
.site-footer__brand > * { margin: 0 0 var(--space-3); }
.site-footer__tagline { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.site-footer__support { font-size: var(--fs-sm); color: var(--color-text-muted); }
.site-footer__title { margin: 0 0 var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-text-muted); }
.site-footer__links { margin: 0; padding: 0; list-style: none; }
.site-footer__link { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--fs-sm); color: var(--color-text-inverse); text-decoration: none; }
@media (min-width: 1024px) { .site-footer__link { min-height: 0; padding: var(--space-1) 0; } }
.site-footer__link:hover, .site-footer__link:focus { color: var(--color-link); text-decoration: underline; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); font-size: var(--fs-md); color: var(--color-text-inverse); border: 1px solid var(--color-border-inverse); border-radius: var(--radius-md); text-decoration: none; }
.site-footer__social a:hover, .site-footer__social a:focus { color: var(--color-link); border-color: var(--color-link); }
.site-footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border-inverse); }
.site-footer__disclaimer { max-width: var(--measure); margin: 0 0 var(--space-3); font-size: var(--fs-xs); color: var(--color-text-muted); }
.site-footer__legal { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
/* Layout wiring (layout.twig v1.0.0): logo text fallback, centred guest nav, app nav overflow, balance, account, drawer extras */
.site-main:focus { outline: 0; }
.site-header__logo, .site-drawer__brand, .site-footer__logo { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.site-drawer__brand { min-width: 0; }
.site-drawer__brand img, .site-footer__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--logo-h-sm); }
.site-footer__logo { display: inline-flex; color: var(--color-text-inverse); text-decoration: none; }
.site-header__tools { margin: 0 0 0 auto; padding: 0; list-style: none; }
.site-header__tools > li { display: flex; align-items: center; }
@media (min-width: 1024px) {
  .site-header--guest .site-nav { margin: 0 auto; }
  .site-header--guest .site-header__actions { margin-left: 0; }
}
.site-nav__item { display: flex; }
.site-caret { margin-left: var(--space-1); font-size: var(--fs-xs); }
.site-balance__toggle { display: inline-flex; white-space: nowrap; align-items: baseline; gap: var(--space-2); min-height: var(--tap-min); padding: var(--space-3) var(--space-2); color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.site-balance__toggle:hover, .site-balance__toggle:focus { color: inherit; text-decoration: none; background: var(--color-bg-sunken); }
.site-balance__value.badge { padding: 0; font-weight: var(--fw-semibold); line-height: inherit; color: var(--color-text); vertical-align: baseline; background: none; border-radius: 0; }
.site-header__tools > .site-account { display: none; }
@media (min-width: 1024px) { .site-header__tools > .site-account { display: flex; } .site-header__tools > .site-header__menu-item { display: none; } }
.site-account__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-drawer__title { margin: var(--space-5) 0 var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-text-muted); }
.site-drawer__balance { margin: var(--space-3) 0 var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.site-drawer__balance-toggle { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; min-height: var(--tap-min); padding: var(--space-2) 0; font: inherit; text-align: left; color: var(--color-text); background: none; border: 0; cursor: pointer; }
.site-drawer__balance-toggle:hover, .site-drawer__balance-toggle:focus { color: var(--color-text); text-decoration: none; }
.site-drawer__balance-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-text-muted); }
.site-drawer__balance-value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.site-drawer__balance .dropdown-menu { position: static; float: none; margin-top: var(--space-2); box-shadow: none; }
.site-drawer__langs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
/* Page wrapper: footer always reaches the bottom; on guest pages anything the panel adds after the footer sits on Ink */
.site-page { display: flex; flex-direction: column; min-height: 100vh; background: var(--color-bg); }
.site-body--guest { background: var(--color-bg-inverse); }
.site-main, .site-app { flex: 1 0 auto; }
/* End-of-page clearance for the floating Telegram button (48px + offset) */
.site-main { padding-bottom: var(--space-6); }
.site-body--app .site-main { padding-bottom: var(--space-9); }
.site-footer__bottom { padding-bottom: var(--space-8); }
@media (min-width: 768px) { .site-footer__bottom { padding-bottom: 0; } }
/* Signed-in header: full width; logo column = sidebar width on desktop */
.site-header--app .site-header__inner { padding: 0 var(--gutter); }
@media (min-width: 1024px) { .site-header--app .site-header__inner { padding-left: calc(var(--space-3) * 2); } }
/* Signed-in sidebar (>= 1024 px): fixed below the header, full height, own scroll; phones use the drawer */
.site-sidebar { display: none; }
@media (min-width: 1024px) {
  .site-app { padding-left: var(--sidebar-w); }
  .site-sidebar { display: block; position: fixed; top: calc(var(--header-h) + 1px); bottom: 0; left: 0; z-index: var(--z-header); width: var(--sidebar-w); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-3); background: var(--color-bg-raised); border-right: 1px solid var(--color-border); }
}
.site-sidebar__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.site-sidebar__link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-h); padding: 0 var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius-md); }
.site-sidebar__link:hover, .site-sidebar__link:focus { color: var(--color-text); text-decoration: none; background: var(--color-bg-sunken); }
.site-sidebar__link[aria-current] { color: var(--color-text); background: var(--color-bg-brand-soft); box-shadow: inset 2px 0 0 var(--color-primary); }
.site-sidebar__icon { flex: none; width: 1.25em; text-align: center; }
/* <<< REGION:GLOBAL */

/* PAGE blocks are inserted here by /page-build, alphabetical (markers: >>> PAGE:name / <<< PAGE:name) */

/* >>> PAGE:home — Guest home / sign in (signin.twig 1.1.0). Hero on the brand band; order: phones H1 · sub · login card ·
   buttons · micro-line; 768–1023 text, buttons, card; >= 1024 text left, card right. .forgot-password / .g_id_signin = panel + Google markup.
   Backgrounds alternate: brand · band · bone · band · bone · band · bone · band · dark · bone · band · bone. */
.pg-home__hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); grid-template-areas: "intro" "login" "actions"; }
.pg-home__intro { grid-area: intro; }
.pg-home__actions { grid-area: actions; }
.pg-home__title { margin-bottom: var(--space-4); font-size: var(--fs-4xl); }
.pg-home__sub { margin: 0; color: var(--color-text-inverse); }
.pg-home__micro { margin: var(--space-3) 0 0; }
/* Phones: card inset in the band; side padding 12px minus the 1px border so a 304px captcha fits at 360 (scrolls inside at 320) */
.pg-home__login { grid-area: login; gap: var(--space-4); padding: var(--space-5) calc(var(--space-3) - 1px); }
.pg-home__login-title { font-size: var(--fs-lg); letter-spacing: normal; }
.pg-home__login form { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.pg-home__login .form-group, .pg-home__login .alert { margin: 0; }
.pg-home__label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); }
.pg-home__label-row .control-label { margin: 0; }
.pg-home .forgot-password { position: static; font-size: var(--fs-sm); }
.pg-home__login a { font-weight: var(--fw-semibold); text-decoration: none; }
.pg-home__login a:hover, .pg-home__login a:focus { text-decoration: underline; }
.pg-home__captcha { max-width: 100%; overflow-x: auto; }
.pg-home__or { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.pg-home__or::before, .pg-home__or::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.pg-home__google { display: flex; justify-content: center; min-height: var(--control-h); }
.pg-home__signup { margin: 0; font-size: var(--fs-sm); text-align: center; color: var(--color-text-muted); }
@media (min-width: 480px) {
  .pg-home__login { padding: var(--space-5); }
}
@media (min-width: 768px) {
  .pg-home__hero { grid-template-areas: "intro" "actions" "login"; }
  .pg-home__login { width: 100%; max-width: 52ch; }
}
@media (min-width: 1024px) {
  .pg-home__hero-wrap { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .pg-home__hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "intro login" "actions login"; gap: var(--space-6) var(--space-8); }
  .pg-home__intro { align-self: end; }
  .pg-home__actions { align-self: start; }
  .pg-home__login { max-width: none; box-shadow: var(--shadow-2); }
}
/* Bands, section heads, splits */
.pg-home__band { background: var(--color-bg-raised); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.pg-home__head { max-width: var(--measure); margin-bottom: var(--space-6); }
.pg-home__head > :last-child { margin-bottom: 0; }
.pg-home__head p { color: var(--color-text-muted); }
.pg-home__top { align-items: start; }
.pg-home__top > .pg-home__head { margin-bottom: 0; }
/* Trust strip */
.pg-home__trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pg-home__trust li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.pg-home__trust i { flex: none; margin-top: var(--space-1); color: var(--color-primary); }
.pg-home__trust strong { display: block; font-weight: var(--fw-semibold); }
.pg-home__trust span { color: var(--color-text-muted); }
@media (min-width: 768px) { .pg-home__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }
/* Basics: check list + links */
.pg-home__checks { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.pg-home__checks li { display: flex; gap: var(--space-3); }
.pg-home__checks i { flex: none; margin-top: var(--space-1); color: var(--color-link); }
.pg-home__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-weight: var(--fw-semibold); }
/* Platforms: link cards 2 · 3 · 5 */
.pg-home__platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.pg-home__platforms .ui-card { padding: var(--space-4); }
.pg-home__platforms .ui-card__title { font-size: var(--fs-base); }
.pg-home__platforms .ui-card__text { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.pg-home__svg { width: 1em; height: 1em; }
.pg-home__more { margin: 0; font-weight: var(--fw-semibold); }
@media (min-width: 768px) { .pg-home__platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1024px) { .pg-home__platforms { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Dashboard preview (hidden while preview_img is empty): continues the steps section */
.pg-home__preview { padding-top: 0; }
.pg-home__shot { max-width: 60rem; }
/* Why: heading left, feature list right from 1024 */
@media (min-width: 1024px) {
  .pg-home__why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); align-items: start; }
  .pg-home__why > .pg-home__head { margin-bottom: 0; }
}
/* API band */
.pg-home__api-list { margin-bottom: var(--space-5); }
.pg-home__api-list dt { color: var(--color-link); }
.pg-home__code { margin: 0; border: 1px solid var(--color-border); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Payments */
.pg-home__tags { margin: 0 0 var(--space-3); padding: 0; list-style: none; gap: var(--space-2); }
.pg-home__tags .u-eyebrow { margin: 0; }
/* Check table */
.pg-home__table { margin-bottom: var(--space-5); }
.pg-home__table td { vertical-align: top; }
.pg-home__note { max-width: var(--measure); }
.pg-home__note p { color: var(--color-text-muted); }
@media (min-width: 768px) {
  .pg-home__table th, .pg-home__table td { padding: var(--space-3) var(--space-4); }
  .pg-home__table .is-primary { width: 26%; min-width: 0; }
  .pg-home__table td:nth-child(2) { width: 32%; color: var(--color-text-muted); }
}
/* FAQ: 1 column, 2 from 1024 */
.pg-home__faq { display: grid; }
.pg-home__faq > .ui-accordion + .ui-accordion { border-top: 0; }
@media (min-width: 1024px) {
  .pg-home__faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
  .pg-home__faq > .ui-accordion + .ui-accordion { border-top: 1px solid var(--color-border); }
}
/* Guides (hidden until show_guides) */
.pg-home__guides { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-weight: var(--fw-semibold); }
@media (min-width: 768px) { .pg-home__guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* <<< PAGE:home */

/* >>> PAGE:neworder — New order (neworder.twig). Also restyles panel widgets that exist only on this page: select2
   dropdowns (their lists open inside #pg-neworder-dropdowns), the search box (built by the panel, replaces
   #new-order-search) and the #fields blocks. Panel CSS for them loads after style.css, hence the .pg-neworder prefix. */
.pg-neworder { max-width: 100rem; min-height: 100vh; margin: 0 auto; padding: var(--space-5) var(--gutter) var(--space-7); }   /* taller than the screen from the first paint: a desktop scrollbar never appears later and narrows the page */
.pg-neworder__dropdowns { position: relative; }
.pg-neworder__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.pg-neworder__main { display: block; padding: 0; background: none; border: 0; }   /* phones: no frame, full width */
.pg-neworder__summary { gap: var(--space-4); padding: var(--space-4); }
.pg-neworder__summary[hidden] { display: none; }   /* .ui-card's display would beat [hidden] */
@media (min-width: 768px) { .pg-neworder__main { padding: var(--space-5); background: var(--color-bg-raised); border: 1px solid var(--color-border); } }
/* 2 columns from 1280px (form 60 / summary 40); the card stays under the header, never taller than the screen,
   and the description scrolls inside its own box */
@media (min-width: 1280px) {
  .pg-neworder__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); }
  .pg-neworder__side { align-self: stretch; }
  .pg-neworder__summary { position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100vh - var(--header-h) - var(--space-6)); overflow: hidden; }
  .pg-neworder__desc-slot { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .pg-neworder__desc-slot .pg-neworder__desc { display: flex; flex-direction: column; min-height: 0; }
  .pg-neworder__desc-slot .panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
/* Platform filter: phones = icon tiles in 2 rows (--pg-cols from script.js), extra columns scroll inside the box */
.pg-neworder__platforms { margin-bottom: var(--space-4); }
.pg-neworder__label { margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pg-neworder__platform-list { display: grid; grid-template-columns: repeat(var(--pg-cols, 6), minmax(var(--tap-min), 1fr)); gap: var(--space-1); overflow-x: auto; scrollbar-width: thin; }
.pg-neworder__platform { justify-content: center; padding: 0; font-size: var(--fs-md); }
.pg-neworder__svg { flex: none; width: 1em; height: 1em; }
.pg-neworder__platform[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.pg-neworder__platform-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
  .pg-neworder__platform-list { display: flex; flex-wrap: wrap; gap: var(--space-2); overflow: visible; }
  .pg-neworder__platform { padding: 0 var(--space-3); font-size: var(--fs-sm); }
  .pg-neworder__platform-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* Search box and select2 dropdowns (panel widgets). Before the panel starts, the template's search box and the plain
   selects (.ui-select) have the same size and look, so nothing moves when the panel swaps them. */
.pg-neworder .search-dropdown .input-wrapper { position: relative; }
.pg-neworder .search-dropdown .input-wrapper .form-control { height: var(--control-h); padding: 0 var(--tap-min); background-image: none; }
.pg-neworder .search-dropdown .input-wrapper__prepend, .pg-neworder .search-dropdown .input-wrapper__append { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--tap-min); padding: 0; color: var(--color-text-muted); background: none; border: 0; }
.pg-neworder .search-dropdown .input-wrapper__prepend { left: 0; }
.pg-neworder .search-dropdown .input-wrapper__append { right: 0; }
.pg-neworder .select2-container { max-width: 100%; }
.pg-neworder .select2-container--default .select2-selection--single { display: flex; align-items: center; height: auto; min-height: var(--control-h); padding: 0; font-size: var(--fs-base); background: var(--color-bg-raised); border: 1px solid var(--color-border-control); border-radius: var(--radius-sm);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25em) 52%, calc(100% - 0.9em) 52%; background-size: 0.35em 0.35em, 0.35em 0.35em; background-repeat: no-repeat; }   /* = .ui-select arrow */
.pg-neworder .select2-container--default .select2-selection--single .select2-selection__rendered { flex: 1 1 auto; min-width: 0; padding: 0 var(--space-7) 0 var(--space-3); line-height: var(--lh-snug); color: var(--color-text); }
.pg-neworder .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.pg-neworder .select2-container--default.select2-container--focus .select2-selection--single, .pg-neworder .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--color-focus); box-shadow: 0 0 0 1px var(--color-focus); }
.pg-neworder .select2-dropdown { overflow: hidden; background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.pg-neworder .select2-results > .select2-results__options { max-height: min(60vh, 24rem); overflow-y: auto; overscroll-behavior: contain; }
.pg-neworder .select2-results__option { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--color-text); white-space: normal; overflow-wrap: anywhere; }
.pg-neworder .select2-results__option a { display: block; color: inherit; text-decoration: none; }
.pg-neworder .select2-container--default .select2-results__option--highlighted[aria-selected], .pg-neworder .search-dropdown .select2-results__option:hover { color: var(--color-text); background: var(--color-bg-sunken); }
.pg-neworder .select2-container--default .select2-results__option[aria-selected="true"] { font-weight: var(--fw-semibold); background: var(--color-bg-brand-soft); }
.pg-neworder .select2-selection__id { display: inline-block; margin: 0 var(--space-2) 0 0; padding: 0 var(--space-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.6; color: var(--color-text-muted); background: var(--color-bg-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.pg-neworder .select2-selection__icon { margin-right: var(--space-2); }
.pg-neworder .select2-selection__icon img { display: inline-block; width: 1.25em; height: 1.25em; }
/* Panel fields (#fields): checkbox and radio rows, textareas, date field */
.pg-neworder #fields textarea.form-control { height: calc(var(--control-h) * 3); resize: vertical; }
.pg-neworder .form-group__checkbox { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); }
.pg-neworder .form-group__checkbox label { display: flex; align-items: center; min-height: var(--tap-min); margin: 0; font-weight: var(--fw-regular); cursor: pointer; }
.pg-neworder .form-group__checkbox input { width: 1.125rem; height: 1.125rem; margin: 0; cursor: pointer; }
.pg-neworder .form-group__label-title { flex: 1 1 auto; }
.pg-neworder .checkmark, .pg-neworder .radiomark { display: none; }
.pg-neworder .depend-fields { padding-left: var(--space-4); border-left: 2px solid var(--color-border); }
.pg-neworder .input-group-btn > .btn { height: var(--control-h); }
/* Description (panel element; in the summary card from 1024px) */
.pg-neworder__desc .panel-body { padding: var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-body); background: var(--color-bg-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.pg-neworder__desc-slot .pg-neworder__desc { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pg-neworder__desc-slot .panel-body { padding: 0; background: none; border: 0; }
/* Receipt (panel success message): compact, one "Label: value" line each, Manrope only, long names and links wrap */
.pg-neworder__receipt { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.pg-neworder__receipt.alert-dismissible .close { top: var(--space-1); transform: none; }   /* × top-right */
.pg-neworder__receipt-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--fs-base); line-height: var(--lh-snug); }
.pg-neworder__receipt-title > i { color: var(--color-success); }
.pg-neworder__receipt-list { margin: 0; line-height: var(--lh-snug); }
.pg-neworder__receipt-list > div + div { margin-top: var(--space-1); }
.pg-neworder__receipt-list dt, .pg-neworder__receipt-list dd { display: inline; margin: 0; }
.pg-neworder__receipt-list dt { font-weight: var(--fw-regular); color: var(--color-text-muted); }
.pg-neworder__receipt-list dd { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.pg-neworder__receipt-link { word-break: break-all; }   /* a link starts right after its label and breaks anywhere */
.pg-neworder__funds { margin-left: var(--space-2); white-space: nowrap; }
/* Summary card */
.pg-neworder__svc { display: grid; justify-items: start; gap: var(--space-1); }
.pg-neworder__svc-name { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.pg-neworder__svc-rate { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.pg-neworder__recent-title { margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.pg-neworder__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pg-neworder__tile { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-1); text-align: center; background: var(--color-bg-sunken); border-radius: var(--radius-sm); }
.pg-neworder__tile-qty { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.pg-neworder__tile-time { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }
/* <<< PAGE:neworder */

/* >>> PAGE:orders — Orders (orders.twig 1.0.3). Full width with the old page's padding; one table at every width (scrolls inside its box on small screens).
   Column widths come from the panel classes kept from the old page: .width-40 (Link) and .nowrap (theme bootstrap.css). */
.pg-orders { padding: var(--space-6) calc(var(--space-4) - 1px) 0; }   /* = the old container-fluid/row/col: 32px top, 15px sides */
.pg-orders__top { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.pg-orders__filters { min-width: 0; }
@media (min-width: 768px) { .pg-orders__search { width: 100%; max-width: 24rem; } }
@media (min-width: 1280px) { .pg-orders__top { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; } }
.pg-orders__sid { font-family: var(--font-mono); }
/* no card mode here: the bar shows only while orders are selected (the header checkbox selects all at every width) */
.pg-orders .ui-bulk:not(.has-selection) .ui-bulkbar[data-state="select"] { display: none; }
.pg-orders__details { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); vertical-align: middle; color: var(--color-link); }
.pg-orders__details:hover, .pg-orders__details:focus { color: var(--color-link-hover); }
.pg-orders__status > i { margin-left: var(--space-1); color: var(--color-text-muted); cursor: help; }
.pg-orders__status > i:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.pg-orders__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.pg-orders__note { font-size: var(--fs-sm); color: var(--color-text-muted); white-space: normal; text-align: right; }
@media (min-width: 1280px) { .pg-orders__details { min-width: 0; min-height: 0; margin-left: var(--space-1); } }
/* <<< PAGE:orders */

/* >>> REGION:UTILITIES — .u-* helpers, always last */
.u-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-num { font-variant-numeric: tabular-nums; }
.u-lead { max-width: var(--measure); font-size: var(--fs-md); line-height: var(--lh-body); color: var(--color-text-muted); }
.u-small { font-size: var(--fs-sm); }
.u-muted { color: var(--color-text-muted); }
.u-eyebrow { display: block; margin-bottom: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-text-muted); }
.u-measure { max-width: var(--measure); }
.u-nowrap { white-space: nowrap; }
.u-right { text-align: right; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
/* <<< REGION:UTILITIES */