/* --- styles/00-layers.css --- */
/*
 * WG-Guard design system. Source files in web/styles are concatenated in
 * path order into /assets/css/app.css when the server starts (no build tool).
 * Tokens come from the active visual preset (web/themes); components read
 * tokens only, so a preset restyles every page without page-specific rules.
 * Contract: docs/product/design-system.md.
 */
@layer reset, tokens, base, components, layout, pages, utilities;

/* WG-Guard preset (generated from web/themes/wg-guard-neutral.json) */
@layer tokens{
:root{--background:#ffffff;--foreground:#171717;--card:#ffffff;--card-foreground:#171717;--popover:#ffffff;--popover-foreground:#171717;--primary:#171717;--primary-foreground:#ffffff;--secondary:#f2f2f2;--secondary-foreground:#171717;--muted:#fafafa;--muted-foreground:#666666;--accent:#f2f2f2;--accent-foreground:#171717;--destructive:#cb2a2f;--border:#ebebeb;--input:#e0e0e0;--ring:#8f8f8f;--chart-1:#0070f3;--chart-2:#7928ca;--chart-3:#f5a623;--chart-4:#0d9488;--chart-5:#e5186f;--sidebar:#fafafa;--sidebar-foreground:#4d4d4d;--sidebar-primary:#171717;--sidebar-primary-foreground:#ffffff;--sidebar-accent:#ebebeb;--sidebar-accent-foreground:#171717;--sidebar-border:#ebebeb;--sidebar-ring:#8f8f8f;--destructive-foreground:#ffffff;--success:#18794e;--success-foreground:#ffffff;--warning:#a35200;--warning-foreground:#ffffff;--info:#0064d6;--info-foreground:#ffffff;--font-sans:"Geist", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-serif:ui-serif, Georgia, serif;--font-mono:"Geist Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--radius:0.5rem;--shadow-color:oklch(0 0 0);--shadow-opacity:0.06;--shadow-blur:3px;--shadow-spread:0px;--shadow-offset-x:0px;--shadow-offset-y:1px;--shadow-2xs:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 3%, transparent);--shadow-xs:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 3%, transparent);--shadow-sm:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 6%, transparent), 0px 1px 2px -1px color-mix(in srgb, oklch(0 0 0) 6%, transparent);--shadow:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 6%, transparent), 0px 1px 2px -1px color-mix(in srgb, oklch(0 0 0) 6%, transparent);--shadow-md:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 6%, transparent), 0px 2px 4px -1px color-mix(in srgb, oklch(0 0 0) 6%, transparent);--shadow-lg:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 6%, transparent), 0px 4px 6px -1px color-mix(in srgb, oklch(0 0 0) 6%, transparent);--shadow-xl:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 6%, transparent), 0px 8px 10px -1px color-mix(in srgb, oklch(0 0 0) 6%, transparent);--shadow-2xl:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 15%, transparent);--tracking-normal:0em;--spacing:0.25rem;--primary-text:#171717;--destructive-text:#cb2a2f;}
:root[data-theme="dark"]{--background:#0a0a0a;--foreground:#ededed;--card:#0a0a0a;--card-foreground:#ededed;--popover:#111111;--popover-foreground:#ededed;--primary:#ededed;--primary-foreground:#0a0a0a;--secondary:#1a1a1a;--secondary-foreground:#ededed;--muted:#111111;--muted-foreground:#a1a1a1;--accent:#1f1f1f;--accent-foreground:#ededed;--destructive:#d93036;--border:#242424;--input:#2e2e2e;--ring:#707070;--chart-1:#3291ff;--chart-2:#a26ee8;--chart-3:#f5a623;--chart-4:#2dd4bf;--chart-5:#ff4d8d;--sidebar:#0a0a0a;--sidebar-foreground:#a1a1a1;--sidebar-primary:#ededed;--sidebar-primary-foreground:#0a0a0a;--sidebar-accent:#1f1f1f;--sidebar-accent-foreground:#ededed;--sidebar-border:#1f1f1f;--sidebar-ring:#707070;--destructive-foreground:#ffffff;--success:#3fbf6f;--success-foreground:#04140a;--warning:#f2a33a;--warning-foreground:#1a0f00;--info:#52a8ff;--info-foreground:#001226;--font-sans:"Geist", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-serif:ui-serif, Georgia, serif;--font-mono:"Geist Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--radius:0.5rem;--shadow-color:oklch(0 0 0);--shadow-opacity:0.4;--shadow-blur:3px;--shadow-spread:0px;--shadow-offset-x:0px;--shadow-offset-y:1px;--shadow-2xs:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 20%, transparent);--shadow-xs:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 20%, transparent);--shadow-sm:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 1px 2px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 1px 2px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow-md:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 2px 4px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow-lg:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 4px 6px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow-xl:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 8px 10px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow-2xl:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 100%, transparent);--tracking-normal:0em;--spacing:0.25rem;--primary-text:#ededed;--destructive-text:#ff6166;}
@media (prefers-color-scheme: dark){:root:not([data-theme]){--background:#0a0a0a;--foreground:#ededed;--card:#0a0a0a;--card-foreground:#ededed;--popover:#111111;--popover-foreground:#ededed;--primary:#ededed;--primary-foreground:#0a0a0a;--secondary:#1a1a1a;--secondary-foreground:#ededed;--muted:#111111;--muted-foreground:#a1a1a1;--accent:#1f1f1f;--accent-foreground:#ededed;--destructive:#d93036;--border:#242424;--input:#2e2e2e;--ring:#707070;--chart-1:#3291ff;--chart-2:#a26ee8;--chart-3:#f5a623;--chart-4:#2dd4bf;--chart-5:#ff4d8d;--sidebar:#0a0a0a;--sidebar-foreground:#a1a1a1;--sidebar-primary:#ededed;--sidebar-primary-foreground:#0a0a0a;--sidebar-accent:#1f1f1f;--sidebar-accent-foreground:#ededed;--sidebar-border:#1f1f1f;--sidebar-ring:#707070;--destructive-foreground:#ffffff;--success:#3fbf6f;--success-foreground:#04140a;--warning:#f2a33a;--warning-foreground:#1a0f00;--info:#52a8ff;--info-foreground:#001226;--font-sans:"Geist", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-serif:ui-serif, Georgia, serif;--font-mono:"Geist Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--radius:0.5rem;--shadow-color:oklch(0 0 0);--shadow-opacity:0.4;--shadow-blur:3px;--shadow-spread:0px;--shadow-offset-x:0px;--shadow-offset-y:1px;--shadow-2xs:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 20%, transparent);--shadow-xs:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 20%, transparent);--shadow-sm:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 1px 2px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 1px 2px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow-md:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 2px 4px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow-lg:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 4px 6px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow-xl:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 40%, transparent), 0px 8px 10px -1px color-mix(in srgb, oklch(0 0 0) 40%, transparent);--shadow-2xl:0px 1px 3px 0px color-mix(in srgb, oklch(0 0 0) 100%, transparent);--tracking-normal:0em;--spacing:0.25rem;--primary-text:#ededed;--destructive-text:#ff6166;}
}
}
/* --- styles/01-fonts.css --- */
/* Self-hosted faces (SIL OFL 1.1, see THIRD_PARTY.md). A browser downloads a
 * face only when the active preset's stack uses it. Vazirmatn covers Arabic
 * script only, so Latin text keeps the preset's own face in Persian too. */
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-mono.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/dmsans.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plusjakartasans.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/spacegrotesk.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/archivo.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrainsmono.woff2") format("woff2"); }
@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/firacode.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/sourcecodepro.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibmplexmono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/ibmplexmono-500.woff2") format("woff2"); }

/* --- styles/02-tokens.css --- */
/* Structural tokens. Color, type, radius, shadow and spacing base come from
 * the preset (generated rules precede this file); everything here derives
 * from them, so a preset's --radius or --spacing reshapes every component.
 * Layout axes are attributes on <html>: data-density, data-sidebar,
 * data-tabs and data-surface (see docs/product/design-system.md). */
@layer tokens {
  /* Fallbacks for presets that omit WG-Guard extensions. :where() keeps
   * them below every generated preset rule regardless of file order. */
  :where(:root) {
    --primary-text: var(--primary);
    --destructive-text: var(--destructive);
    --destructive-foreground: #fff;
    --success: #18794e; --success-foreground: #fff;
    --warning: #a35200; --warning-foreground: #fff;
    --info: #0064d6; --info-foreground: #fff;
    --tracking-normal: 0em;
    --spacing: .25rem;
  }

  :root {
    --radius-xs: max(2px, calc(var(--radius) - 6px));
    --radius-sm: max(3px, calc(var(--radius) - 4px));
    --radius-md: max(4px, calc(var(--radius) - 2px));
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-full: 9999px;

    /* Spacing follows the preset's base unit (Tailwind's --spacing). */
    --s-0_5: calc(var(--spacing) * .5);
    --s-1: var(--spacing);
    --s-1_5: calc(var(--spacing) * 1.5);
    --s-2: calc(var(--spacing) * 2);
    --s-2_5: calc(var(--spacing) * 2.5);
    --s-3: calc(var(--spacing) * 3);
    --s-4: calc(var(--spacing) * 4);
    --s-5: calc(var(--spacing) * 5);
    --s-6: calc(var(--spacing) * 6);
    --s-8: calc(var(--spacing) * 8);
    --s-10: calc(var(--spacing) * 10);
    --s-12: calc(var(--spacing) * 12);
    --s-16: calc(var(--spacing) * 16);

    --text-2xs: .6875rem;
    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-base: .875rem;
    --text-md: .9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --leading: 1.5;
    --leading-tight: 1.25;

    --font-ui: "Vazirmatn", var(--font-sans);
    --font-code: var(--font-mono);

    /* Density: default (shadcn). */
    --control-h: calc(var(--spacing) * 9);
    --control-h-sm: calc(var(--spacing) * 8);
    --control-h-lg: calc(var(--spacing) * 10);
    --control-px: var(--s-3);
    --control-text: var(--text-base);
    --card-p: var(--s-6);
    --card-gap: var(--s-6);
    --section-gap: var(--s-8);
    --page-px: var(--s-6);
    --page-py: var(--s-6);
    --row-py: var(--s-3);
    --cell-px: var(--s-3);
    --header-h: calc(var(--spacing) * 14);
    --sidebar-w: 16rem;
    --sidebar-w-rail: calc(var(--spacing) * 12);
    --icon: 1rem;
    --icon-sm: .875rem;
    --hit: 2.75rem;

    --ease: cubic-bezier(.2, 0, 0, 1);
    --dur-fast: 120ms;
    --dur: 180ms;
    --dur-slow: 240ms;

    --z-sticky: 20;
    --z-sidebar: 30;
    --z-overlay: 40;
    --z-popover: 50;
    --z-toast: 60;
    --z-tooltip: 70;

    --overlay: color-mix(in srgb, #000 50%, transparent);
    --hover: color-mix(in srgb, var(--accent) 70%, transparent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--ring) 45%, transparent);
    --focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--destructive) 25%, transparent);
    --card-shadow: var(--shadow-sm);
    --surface-border: var(--border);

    color-scheme: light;
  }
  :root[data-theme="dark"] { color-scheme: dark; --overlay: color-mix(in srgb, #000 70%, transparent); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --overlay: color-mix(in srgb, #000 70%, transparent); } }

  /* Vercel/Linear density: tighter controls and padding. */
  :root[data-density="compact"] {
    --control-h: calc(var(--spacing) * 8);
    --control-h-sm: calc(var(--spacing) * 7);
    --control-h-lg: calc(var(--spacing) * 9);
    --control-px: var(--s-2_5);
    --card-p: var(--s-4);
    --card-gap: var(--s-4);
    --section-gap: var(--s-6);
    --page-px: var(--s-6);
    --page-py: var(--s-5);
    --row-py: var(--s-2_5);
    --header-h: calc(var(--spacing) * 12);
    --sidebar-w: 15rem;
  }
  :root[data-density="comfortable"] {
    --control-h: calc(var(--spacing) * 10);
    --control-h-sm: calc(var(--spacing) * 9);
    --control-h-lg: calc(var(--spacing) * 11);
    --control-px: var(--s-4);
    --card-p: var(--s-8);
    --card-gap: var(--s-6);
    --section-gap: var(--s-10);
    --page-px: var(--s-8);
    --page-py: var(--s-8);
    --row-py: var(--s-4);
    --header-h: calc(var(--spacing) * 16);
    --sidebar-w: 17rem;
  }
  :root[data-surface="flat"] { --card-shadow: none; }

  /* Touch: controls stay at least 40px and keep a 44px hit area (::after). The
   * [data-density] selector outranks the density rules above, which <html> always carries. */
  @media (pointer: coarse) {
    :root, :root[data-density] {
      --control-h: max(2.5rem, calc(var(--spacing) * 10));
      --control-h-sm: 2.25rem;
      --control-h-lg: 2.75rem;
    }
  }
  @media (max-width: 640px) {
    :root { --page-px: var(--s-4); --page-py: var(--s-4); --card-p: var(--s-4); --section-gap: var(--s-6); }
  }
}

/* --- styles/10-base.css --- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  svg { flex-shrink: 0; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
  a { color: inherit; text-decoration: none; }
  table { border-collapse: collapse; border-spacing: 0; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  legend { padding: 0; }
  ul, ol { padding: 0; list-style: none; }
  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
  dialog { padding: 0; border: 0; color: inherit; background: none; max-width: none; max-height: none; }
  [hidden] { display: none !important; }
  h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; }
}

@layer base {
  html {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: var(--leading);
    letter-spacing: var(--tracking-normal);
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";
    scrollbar-gutter: stable;
  }
  /* Arabic script joins its letters: never track Persian text. */
  :root[lang="fa"] { letter-spacing: 0; --leading: 1.65; }
  body {
    font-size: var(--text-base);
    background: var(--background);
    color: var(--foreground);
  }
  h1, h2, h3, h4 { font-weight: 600; line-height: var(--leading-tight); letter-spacing: -0.015em; text-wrap: balance; }
  :root[lang="fa"] :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.4; }
  p { text-wrap: pretty; }
  strong, b { font-weight: 600; }
  small { font-size: var(--text-xs); }
  code, kbd, samp, pre { font-family: var(--font-code); font-size: .92em; }
  hr { border: 0; border-top: 1px solid var(--border); }
  ::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
  input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
  ::placeholder { color: var(--muted-foreground); opacity: 1; }
  :root { accent-color: var(--primary); }

  /* Scrollbars: thin and tokenized. */
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent; }

  /* Icons: lucide sprite, currentColor stroke. */
  .icon { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
  [dir="rtl"] .icon--directional { transform: scaleX(-1); }

  /* Technical values: isolated LTR, Latin digits, tabular, monospace. */
  .tech, .mono, [data-tech] {
    direction: ltr; unicode-bidi: isolate;
    font-family: var(--font-code); font-size: .92em; font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }
  .num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
  .ltr { direction: ltr; unicode-bidi: isolate; }
  bdi { unicode-bidi: isolate; }
  [dir="rtl"] .tech, [dir="rtl"] .ltr { text-align: start; }

  .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link:focus {
    position: fixed !important; inset-inline-start: var(--s-3); top: var(--s-3); z-index: var(--z-tooltip);
    width: auto; height: auto; margin: 0; clip: auto; white-space: normal;
    padding: var(--s-2) var(--s-3); border-radius: var(--radius-md);
    background: var(--primary); color: var(--primary-foreground); font-weight: 500;
  }

  a.link, .prose a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
  a.link:hover, .prose a:hover { text-decoration-color: currentColor; }

  /* Reduced motion removes transitions outright: a near-zero duration still starts an `all`
     transition on every element, so an inherited visibility flip stays `hidden` for the first
     frame and synchronous focus() into a just-opened drawer or dialog is lost. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  }
}

/* --- styles/20-components/badge.css --- */
/* Badge — status and metadata chips. Tone never relies on color alone:
 * every badge carries its text, and status badges add a dot. */
@layer components {
  .badge {
    --badge-bg: var(--secondary);
    --badge-fg: var(--secondary-foreground);
    --badge-border: transparent;
    display: inline-flex; align-items: center; gap: var(--s-1); width: fit-content; flex-shrink: 0;
    height: 1.375rem; padding-inline: var(--s-2);
    border: 1px solid var(--badge-border); border-radius: var(--radius-sm);
    background: var(--badge-bg); color: var(--badge-fg);
    font-size: var(--text-xs); font-weight: 500; line-height: 1; white-space: nowrap;
  }
  .badge > .icon { width: .75rem; height: .75rem; }
  .badge--outline { --badge-bg: transparent; --badge-fg: var(--foreground); --badge-border: var(--border); }
  .badge--primary { --badge-bg: var(--primary); --badge-fg: var(--primary-foreground); }
  .badge--success { --badge-bg: color-mix(in srgb, var(--success) 12%, transparent); --badge-fg: var(--success); --badge-border: color-mix(in srgb, var(--success) 22%, transparent); }
  .badge--warning { --badge-bg: color-mix(in srgb, var(--warning) 12%, transparent); --badge-fg: var(--warning); --badge-border: color-mix(in srgb, var(--warning) 24%, transparent); }
  .badge--destructive { --badge-bg: color-mix(in srgb, var(--destructive) 10%, transparent); --badge-fg: var(--destructive-text); --badge-border: color-mix(in srgb, var(--destructive) 22%, transparent); }
  .badge--info { --badge-bg: color-mix(in srgb, var(--info) 11%, transparent); --badge-fg: var(--info); --badge-border: color-mix(in srgb, var(--info) 22%, transparent); }
  .badge--muted { --badge-bg: transparent; --badge-fg: var(--muted-foreground); --badge-border: var(--border); }
  .badge--pill { border-radius: var(--radius-full); }
  .badge--count { min-width: 1.25rem; height: 1.25rem; justify-content: center; padding-inline: var(--s-1_5); border-radius: var(--radius-full); font-variant-numeric: tabular-nums; }

  /* Status dot: the colored point used in badges, rows and headers. */
  .dot { width: .5rem; height: .5rem; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
  .dot--success { color: var(--success); }
  .dot--warning { color: var(--warning); }
  .dot--destructive { color: var(--destructive-text); }
  .dot--info { color: var(--info); }
  .dot--muted { color: color-mix(in srgb, var(--muted-foreground) 60%, transparent); }
  .dot--live { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
}

/* --- styles/20-components/button.css --- */
/* Button — shadcn variants: primary, secondary, outline (default), ghost,
 * destructive, link; sizes sm, lg, icon. <a> and <button> look identical. */
@layer components {
  .btn {
    --btn-bg: var(--background);
    --btn-fg: var(--foreground);
    --btn-border: var(--input);
    --btn-hover: var(--accent);
    --btn-hover-fg: var(--accent-foreground);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    flex-shrink: 0;
    height: var(--control-h); padding-inline: var(--control-px);
    border: 1px solid var(--btn-border); border-radius: var(--radius-md);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: var(--control-text); font-weight: 500; line-height: 1; white-space: nowrap;
    box-shadow: var(--shadow-xs);
    cursor: pointer; user-select: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .btn > .icon { width: var(--icon); height: var(--icon); }
  .btn:hover { background: var(--btn-hover); color: var(--btn-hover-fg); }
  .btn:focus-visible { outline: none; border-color: var(--ring); box-shadow: var(--focus-ring); }
  .btn:active:not(:disabled, [aria-disabled="true"]) { transform: translateY(.5px); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; box-shadow: none; }
  form[aria-busy="true"] .btn[type="submit"][aria-disabled="true"], .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
  :root[data-theme="dark"] .btn:not([class*="btn--"]),
  :root[data-theme="dark"] .btn--outline { --btn-bg: color-mix(in srgb, var(--input) 30%, transparent); --btn-hover: color-mix(in srgb, var(--input) 55%, transparent); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .btn:not([class*="btn--"]),
    :root:not([data-theme]) .btn--outline { --btn-bg: color-mix(in srgb, var(--input) 30%, transparent); --btn-hover: color-mix(in srgb, var(--input) 55%, transparent); }
  }

  .btn--primary { --btn-bg: var(--primary); --btn-fg: var(--primary-foreground); --btn-border: var(--primary); --btn-hover: color-mix(in srgb, var(--primary) 88%, var(--background)); --btn-hover-fg: var(--primary-foreground); }
  .btn--secondary { --btn-bg: var(--secondary); --btn-fg: var(--secondary-foreground); --btn-border: transparent; --btn-hover: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 8%); --btn-hover-fg: var(--secondary-foreground); box-shadow: none; }
  .btn--ghost { --btn-bg: transparent; --btn-border: transparent; --btn-hover: var(--accent); box-shadow: none; }
  .btn--destructive { --btn-bg: var(--destructive); --btn-fg: var(--destructive-foreground); --btn-border: var(--destructive); --btn-hover: color-mix(in srgb, var(--destructive) 88%, var(--background)); --btn-hover-fg: var(--destructive-foreground); }
  .btn--destructive:focus-visible { box-shadow: var(--focus-ring-danger); }
  .btn--danger-ghost { --btn-bg: transparent; --btn-fg: var(--destructive-text); --btn-border: transparent; --btn-hover: color-mix(in srgb, var(--destructive) 10%, transparent); --btn-hover-fg: var(--destructive-text); box-shadow: none; }
  .btn--link { --btn-bg: transparent; --btn-fg: var(--primary-text); --btn-border: transparent; --btn-hover: transparent; --btn-hover-fg: var(--primary-text); box-shadow: none; height: auto; padding: 0; }
  .btn--link:hover { text-decoration: underline; text-underline-offset: 4px; }

  .btn--sm { height: var(--control-h-sm); padding-inline: calc(var(--control-px) - var(--s-0_5)); gap: var(--s-1_5); font-size: var(--text-sm); }
  .btn--xs { height: calc(var(--control-h-sm) - var(--s-1_5)); padding-inline: var(--s-2); gap: var(--s-1); font-size: var(--text-xs); border-radius: var(--radius-sm); }
  .btn--lg { height: var(--control-h-lg); padding-inline: var(--s-6); }
  .btn--block { width: 100%; }
  .btn--icon { width: var(--control-h); padding: 0; }
  .btn--icon.btn--sm { width: var(--control-h-sm); }
  .btn--icon.btn--xs { width: calc(var(--control-h-sm) - var(--s-1_5)); }
  .btn--icon > .icon { margin: 0; }
  /* 44px hit area on touch without enlarging the visual control. */
  @media (pointer: coarse) {
    .btn::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, var(--hit)); height: max(100%, var(--hit)); transform: translate(-50%, -50%); }
  }
  .btn .kbd { margin-inline-start: var(--s-1); }
  .btn-count { font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

  /* Button group: joined controls with one outer radius. */
  .btn-group { display: inline-flex; align-items: stretch; isolation: isolate; }
  .btn-group > .btn { border-radius: 0; box-shadow: none; }
  .btn-group > .btn:not(:first-child) { margin-inline-start: -1px; }
  .btn-group > .btn:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
  .btn-group > .btn:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
  .btn-group > .btn:focus-visible { z-index: 1; }
}

/* --- styles/20-components/card.css --- */
/* Card — the one surface primitive. data-surface (flat|raised) on <html>
 * decides elevation; cards never nest visually (an inner card is a .panel). */
@layer components {
  .card {
    display: flex; flex-direction: column; gap: var(--card-gap);
    padding-block: var(--card-p);
    min-width: 0;
    background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--surface-border); border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
  }
  .card-header {
    display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--s-1_5) var(--s-4);
    padding-inline: var(--card-p);
  }
  .card-header:has(+ .card-content > .table-wrap:first-child) { padding-bottom: 0; }
  .card-header > :not(.card-action) { grid-column: 1; }
  .card-title { font-size: var(--text-md); font-weight: 600; line-height: var(--leading-tight); display: flex; align-items: center; gap: var(--s-2); }
  .card-title > .icon { color: var(--muted-foreground); }
  .card-description { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; }
  .card-action { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: flex; align-items: center; gap: var(--s-2); }
  .card-content { padding-inline: var(--card-p); min-width: 0; }
  .card-content--flush { padding-inline: 0; }
  .card-footer {
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    padding-inline: var(--card-p);
  }
  .card-footer--bordered { border-top: 1px solid var(--border); padding-top: var(--card-p); margin-top: calc(var(--card-gap) * -0.25); }
  .card-footer--end { justify-content: flex-end; }
  .card--flush { padding-block: 0; gap: 0; overflow: hidden; }
  .card--flush > .card-header { padding-block: var(--card-p); }
  .card--flush > .card-header + .card-content { border-top: 1px solid var(--border); }
  .card--interactive { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
  .card--interactive:hover { border-color: color-mix(in srgb, var(--foreground) 20%, var(--border)); }
  .card--muted { background: var(--muted); box-shadow: none; }
  .card--danger { border-color: color-mix(in srgb, var(--destructive) 35%, var(--border)); }
  a.card { color: inherit; }
  a.card:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--ring); }

  /* Panel: an inner region inside a card (no second elevation). */
  .panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); padding: var(--s-4); min-width: 0; }
  .panel--muted { background: var(--muted); border-color: transparent; }
}

/* --- styles/20-components/chart.css --- */
/* Charts — server-rendered SVG (svgchart.go, sparkline.go) colored by the
 * preset's --chart-1..5. RX uses a solid line, TX a dashed one, so series
 * never depend on color alone. */
@layer components {
  :root { --chart-rx: var(--chart-1); --chart-tx: var(--chart-2); }
  .legend { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted-foreground); }
  .legend-item { display: inline-flex; align-items: center; gap: var(--s-1_5); font-size: var(--text-xs); color: var(--muted-foreground); }
  .swatch { width: .875rem; height: 2px; border-radius: 1px; background: var(--chart-rx); flex-shrink: 0; }
  .swatch--tx { background: none; border-top: 2px dashed var(--chart-tx); height: 0; }
  .chart-wrap { min-width: 0; }
  .chart-period { font-size: var(--text-2xs); color: var(--muted-foreground); font-family: var(--font-code); direction: ltr; unicode-bidi: isolate; }

  .chart-grid, .spark-grid { fill: none; stroke: color-mix(in srgb, var(--border) 80%, transparent); stroke-width: 1; stroke-dasharray: 3 5; shape-rendering: crispEdges; vector-effect: non-scaling-stroke; }
  .chart path.chart-rx, .chart path.chart-tx { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
  .chart path.chart-rx { stroke: var(--chart-rx); }
  .chart path.chart-tx { stroke: var(--chart-tx); stroke-dasharray: 5 4; }
  .chart-area { fill: var(--chart-rx); opacity: .1; }
  .chart-point-rx, .chart-marker-rx { fill: var(--chart-rx); }
  .chart-point-tx, .chart-marker-tx { fill: var(--chart-tx); }
  .sparkline, .chart { cursor: crosshair; touch-action: pan-y; overflow: visible; }
  .sparkline { display: block; width: 100%; height: 4rem; direction: ltr; }
  .spark-line { fill: none; stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
  .spark-primary { stroke: var(--chart-rx); }
  .spark-secondary { stroke: var(--chart-tx); stroke-dasharray: 4 3; }
  .spark-muted { stroke: var(--muted-foreground); }
  .spark-area { fill: var(--chart-rx); opacity: .08; }
  .spark-dot { fill: var(--chart-rx); }
  .spark-dot.spark-secondary { fill: var(--chart-tx); }
  .spark-empty { min-height: 4rem; display: grid; place-items: center; color: var(--muted-foreground); font-size: var(--text-xs); border: 1px dashed var(--border); border-radius: var(--radius-md); }

  /* charts.js hosts the tooltip and round HTML markers beside each SVG. */
  .interactive-chart { position: relative; isolation: isolate; }
  .chart-dot { position: absolute; width: 9px; height: 9px; border-radius: var(--radius-full); border: 2px solid var(--card); background: var(--chart-rx); transform: translate(-50%, -50%); pointer-events: none; }
  .chart-dot--secondary { background: var(--chart-tx); }
  .chart-dot[hidden] { display: none; }
  .chart-inspector { opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
  .interactive-chart.is-inspecting .chart-inspector { opacity: 1; }
  .chart-inspector line { stroke: color-mix(in srgb, var(--foreground) 35%, transparent); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
  .chart-inspector circle { fill: var(--chart-rx); stroke: var(--card); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
  .chart-inspector circle:nth-of-type(2) { fill: var(--chart-tx); }
  .chart-tooltip {
    position: fixed; inset: auto; margin: 0; z-index: var(--z-tooltip); width: max-content; max-width: min(20rem, calc(100vw - 16px));
    padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lg);
    font-size: var(--text-xs); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease);
  }
  .chart-tooltip.is-visible { opacity: 1; pointer-events: auto; }
  .chart-tooltip-title { display: block; margin-bottom: var(--s-1); color: var(--muted-foreground); font-family: var(--font-code); direction: ltr; unicode-bidi: isolate; }
  .chart-tooltip-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); padding-block: 2px; }
  .chart-tooltip-name { display: flex; align-items: center; gap: var(--s-1_5); color: var(--muted-foreground); }
  .chart-tooltip-swatch { width: .5rem; height: .5rem; border-radius: 2px; background: var(--chart-rx); flex: none; }
  .chart-tooltip-swatch--secondary { background: var(--chart-tx); }
  .chart-tooltip-value { font-weight: 600; font-variant-numeric: tabular-nums; }

  /* Traffic plot: y-axis labels + SVG + x-axis ticks (always LTR time). */
  .traffic-plot { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s-2_5); row-gap: var(--s-2); direction: ltr; }
  .traffic-plot > .chart { grid-column: 2; grid-row: 1; width: 100%; height: clamp(11rem, 22vw, 16rem); }
  .traffic-y-axis, .traffic-x-axis { font-size: var(--text-2xs); line-height: 1rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-family: var(--font-code); }
  .traffic-y-axis { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)) 0; align-items: start; text-align: right; }
  .traffic-y-axis > span { transform: translateY(-50%); white-space: nowrap; }
  .traffic-x-axis { grid-column: 2; display: flex; height: 1rem; }
  .traffic-tick { position: relative; flex: 1 1 0; min-width: 0; }
  .traffic-tick:last-child { flex: 0 0 0; }
  .traffic-tick-label { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; }
  .traffic-tick:first-child > .traffic-tick-label { transform: none; }
  .traffic-tick:last-child > .traffic-tick-label { transform: translateX(-100%); }
  .traffic-tick:only-child { flex: 1; text-align: center; }
  .traffic-tick:only-child > .traffic-tick-label { left: 50%; transform: translateX(-50%); }
  @media (max-width: 800px) { .traffic-tick-minor { display: none; } }

  /* Percent gauge ring (CPU/RAM/disk). */
  .resource-gauge { width: 2.25rem; height: 2.25rem; transform: rotate(-90deg); flex-shrink: 0; }
  .gauge-track { fill: none; stroke: color-mix(in srgb, var(--foreground) 9%, transparent); stroke-width: 5; }
  .gauge-value { fill: none; stroke: var(--chart-rx); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray var(--dur-slow) var(--ease); }
}
@layer components {
  .resource-card { gap: var(--s-2); }
  .resource-value-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .resource-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .resource-pair > div { display: flex; flex-direction: column; gap: 2px; }
  .resource-pair strong { font-size: var(--text-lg); font-weight: 600; }
  .resource-facts { margin-top: var(--s-1); }
  .resource-facts .kv-row { padding-block: var(--s-1_5); font-size: var(--text-xs); }
  /* Six resource cards: 3 × 2 on desktop, 2 × 3 on tablets, stacked on phones. */
  .stat-grid.resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 1100px) { .stat-grid.resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .stat-grid.resource-grid { grid-template-columns: 1fr; } }
}

/* --- styles/20-components/data.css --- */
/* Data display — Table / data table (cards on phones), Item rows, Stat,
 * Alert, Empty state, Accordion / collapsible sections. */
@layer components {
  .table-wrap { width: 100%; overflow-x: auto; min-width: 0; }
  .table-frame { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); overflow: hidden; box-shadow: var(--card-shadow); }
  .table-frame > .table-wrap { border-radius: inherit; }
  .table { width: 100%; font-size: var(--text-base); caption-side: bottom; }
  .table th {
    height: 2.5rem; padding: 0 var(--cell-px); text-align: start; vertical-align: middle;
    font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); white-space: nowrap;
    background: color-mix(in srgb, var(--muted) 55%, transparent); border-bottom: 1px solid var(--border);
  }
  .table td { padding: var(--row-py) var(--cell-px); vertical-align: middle; border-bottom: 1px solid var(--border); }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
  .table tbody tr:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }
  .table tbody tr[aria-selected="true"], .table tbody tr:has(.js-sel:checked) { background: color-mix(in srgb, var(--primary) 5%, transparent); }
  .table .col-check { width: 2.5rem; padding-inline-end: 0; }
  .table .col-actions { width: 1%; white-space: nowrap; text-align: end; }
  .table .col-num { text-align: end; font-variant-numeric: tabular-nums; }
  .table caption { padding: var(--s-3); color: var(--muted-foreground); font-size: var(--text-sm); }
  .table--compact td { padding-block: var(--s-1_5); }
  .table--plain th { background: transparent; }
  .row-actions { display: inline-flex; align-items: center; gap: var(--s-0_5); justify-content: flex-end; }
  .cell-main { font-weight: 500; color: var(--foreground); display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  a.cell-main:hover { text-decoration: underline; text-underline-offset: 3px; }
  /* Touch: the clipped (ellipsis) link cannot carry a ::after hit area, so its own box grows. */
  @media (pointer: coarse) { a.cell-main { min-width: var(--hit); min-height: var(--hit); padding-block: calc((var(--hit) - 1lh) / 2); } }
  .cell-sub { display: block; font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 1px; }
  .cell-identity { display: flex; align-items: center; gap: var(--s-2_5); min-width: 0; }
  .cell-identity > div { min-width: 0; }
  .cell-meter { display: flex; flex-direction: column; gap: var(--s-1); min-width: 8rem; }
  .cell-meter-text { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

  /* Phones: rows become labeled cards (td[data-label]); one DOM tree. */
  @media (max-width: 800px) {
    .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table--cards, .table--cards tbody { display: block; }
    .table--cards tbody { display: flex; flex-direction: column; }
    .table--cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); position: relative; }
    .table--cards tbody tr:last-child { border-bottom: 0; }
    .table--cards td { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; min-width: 0; }
    .table--cards td.col-num { text-align: start; }
    .table--cards td[data-label]::before { content: attr(data-label); font-size: var(--text-2xs); color: var(--muted-foreground); font-weight: 500; text-transform: none; }
    .table--cards td.cell-primary { grid-column: 1 / -1; padding-inline-end: 3rem; }
    .table--cards td.cell-primary::before { display: none; }
    .table--cards td.col-check { position: absolute; inset-inline-end: var(--s-3); top: var(--s-3); width: auto; }
    .table--cards td.col-check::before { display: none; }
    .table--cards td.col-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; width: auto; border-top: 1px dashed var(--border); padding-top: var(--s-2); }
    .table--cards td.col-actions::before { display: none; }
    .table--cards td.cell-wide { grid-column: 1 / -1; }
    .table--cards .row-actions { justify-content: flex-start; flex-wrap: wrap; }
    .table--cards tr:has(> td.col-check) td.cell-primary { padding-inline-end: 2.5rem; }
  }

  /* Item: list rows (outbounds, rules, devices, settings rows). */
  .item-group { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; }
  .item-group > .item + .item { border-top: 1px solid var(--border); }
  .item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); min-width: 0; position: relative; }
  .item--interactive { transition: background-color var(--dur-fast) var(--ease); }
  .item--interactive:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }
  .item-media { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: var(--muted); color: var(--foreground); border: 1px solid var(--border); }
  .item-media > .icon { width: var(--icon-sm); height: var(--icon-sm); }
  .item-media--plain { background: transparent; border: 0; width: auto; height: auto; color: var(--muted-foreground); }
  .item-content { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .item-title { display: flex; align-items: center; gap: var(--s-2); font-weight: 500; min-width: 0; flex-wrap: wrap; }
  .item-description { font-size: var(--text-sm); color: var(--muted-foreground); min-width: 0; overflow-wrap: anywhere; }
  .item-actions { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
  .item-meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-xs); color: var(--muted-foreground); flex-wrap: wrap; }
  .item-meta > * + *::before { content: "·"; margin-inline-end: var(--s-3); color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); }
  .item--muted { opacity: .62; }
  a.item-link::after { content: ""; position: absolute; inset: 0; }
  a.item-link:focus-visible { outline: none; }
  .item:has(a.item-link:focus-visible) { box-shadow: inset var(--focus-ring); }
  .item-actions, .item-actions * { position: relative; z-index: 1; }
  @media (max-width: 640px) { .item { flex-wrap: wrap; } .item-actions { margin-inline-start: auto; } }

  /* Stat: metric tiles (Vercel usage blocks). .stat-grid joins them. */
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; }
  .stat-grid > .stat { border-inline-end: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; }
  [dir="rtl"] .stat-grid > .stat { margin: 0 0 -1px -1px; }
  .stat { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--card-p); min-width: 0; }
  .stat-label { display: flex; align-items: center; gap: var(--s-1_5); font-size: var(--text-sm); color: var(--muted-foreground); font-weight: 500; }
  .stat-label > .icon { width: var(--icon-sm); height: var(--icon-sm); }
  .stat-value { display: flex; align-items: baseline; gap: var(--s-1); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
  :root[lang="fa"] .stat-value { letter-spacing: 0; }
  .stat-unit { font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); letter-spacing: 0; }
  .stat-meta { display: flex; align-items: center; gap: var(--s-1_5); font-size: var(--text-xs); color: var(--muted-foreground); flex-wrap: wrap; }
  .stat-meta .is-warn { color: var(--warning); }
  .stat-meta .is-danger { color: var(--destructive-text); }
  a.stat { color: inherit; transition: background-color var(--dur-fast) var(--ease); }
  a.stat:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }

  /* Alert / callout */
  .alert {
    --alert-tone: var(--foreground);
    display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--s-0_5) var(--s-3);
    padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--card); color: var(--card-foreground); font-size: var(--text-sm);
  }
  .alert > .icon { color: var(--alert-tone); margin-top: 2px; grid-row: span 2; }
  .alert-title { font-size: inherit; font-weight: 500; color: var(--foreground); line-height: 1.4; letter-spacing: normal; }
  .alert-description, .alert > p, .alert > span:not(.alert-title) { color: var(--muted-foreground); grid-column: 2; line-height: 1.55; }
  .alert > .alert-action { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .alert > :only-child { grid-column: 1 / -1; }
  .alert--info { --alert-tone: var(--info); background: color-mix(in srgb, var(--info) 6%, var(--card)); border-color: color-mix(in srgb, var(--info) 22%, var(--border)); }
  .alert--success { --alert-tone: var(--success); background: color-mix(in srgb, var(--success) 6%, var(--card)); border-color: color-mix(in srgb, var(--success) 24%, var(--border)); }
  .alert--warning { --alert-tone: var(--warning); background: color-mix(in srgb, var(--warning) 7%, var(--card)); border-color: color-mix(in srgb, var(--warning) 26%, var(--border)); }
  .alert--destructive, .alert--error { --alert-tone: var(--destructive-text); background: color-mix(in srgb, var(--destructive) 6%, var(--card)); border-color: color-mix(in srgb, var(--destructive) 26%, var(--border)); }
  .alert--destructive .alert-title, .alert--error .alert-title { color: var(--destructive-text); }
  @media (max-width: 640px) { .alert { grid-template-columns: auto 1fr; } .alert > .alert-action { grid-column: 2; grid-row: auto; justify-self: start; margin-top: var(--s-2); } }

  /* Empty state */
  .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-2); padding: var(--s-10) var(--s-6); color: var(--muted-foreground); }
  .empty--bordered { border: 1px dashed var(--border); border-radius: var(--radius-xl); }
  .empty--compact { padding: var(--s-6) var(--s-4); }
  .empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: var(--muted); color: var(--foreground); border: 1px solid var(--border); margin-bottom: var(--s-1); }
  .empty-title { font-size: var(--text-md); font-weight: 600; color: var(--foreground); }
  .empty-description { font-size: var(--text-sm); max-width: 28rem; }
  .empty-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; justify-content: center; }

  /* Accordion / collapsible (details/summary). */
  .accordion { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); overflow: hidden; box-shadow: var(--card-shadow); }
  .accordion > details + details { border-top: 1px solid var(--border); }
  .collapsible > summary, .accordion summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-3) var(--s-4); font-weight: 500; min-height: var(--control-h-lg);
  }
  .collapsible > summary::after, .accordion summary::after {
    content: ""; width: .5rem; height: .5rem; flex-shrink: 0; margin-inline-start: auto;
    /* Physical borders: the rotated corner must point down in both directions. */
    border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground);
    transform: rotate(45deg) translateY(-2px); transition: transform var(--dur) var(--ease);
  }
  details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .collapsible > summary:hover, .accordion summary:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
  .collapsible > summary:focus-visible, .accordion summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
  .collapsible-content, .accordion-content { padding: var(--s-1) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
  .collapsible { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
  .collapsible--plain { border: 0; background: transparent; }
  .collapsible--plain > summary { padding-inline: 0; }
  .collapsible--plain > .collapsible-content { padding-inline: 0; }
  .summary-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .summary-hint { font-size: var(--text-xs); color: var(--muted-foreground); font-weight: 400; }
}

/* --- styles/20-components/forms.css --- */
/* Form controls — Input, Textarea, Native Select, Input Group, Checkbox,
 * Radio, Switch, Field (label/description/error), Fieldset, Toggle group.
 * Native elements carry the semantics; styling never removes them. */
@layer components {
  .input, .textarea, .select, .js-sel .select-trigger {
    width: 100%; min-width: 0;
    height: var(--control-h); padding-inline: var(--control-px);
    border: 1px solid var(--input); border-radius: var(--radius-md);
    background: transparent; color: var(--foreground);
    font-size: var(--control-text); line-height: 1.4;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  :root[data-theme="dark"] :is(.input, .textarea, .select) { background-color: color-mix(in srgb, var(--input) 30%, transparent); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme]) :is(.input, .textarea, .select) { background: color-mix(in srgb, var(--input) 30%, transparent); } }
  .input:hover, .textarea:hover, .select:hover { border-color: color-mix(in srgb, var(--foreground) 22%, var(--input)); }
  .input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: none; border-color: var(--ring); box-shadow: var(--focus-ring); }
  .input:disabled, .textarea:disabled, .select:disabled, .input[readonly] { opacity: .6; cursor: not-allowed; background: var(--muted); }
  .input[readonly] { opacity: 1; cursor: text; }
  :is(.input, .textarea, .select)[aria-invalid="true"] { border-color: var(--destructive); }
  :is(.input, .textarea, .select)[aria-invalid="true"]:focus-visible { box-shadow: var(--focus-ring-danger); }
  .input[type="file"] { padding: 0; height: auto; min-height: var(--control-h); line-height: calc(var(--control-h) - 2px); }
  .input[type="file"]::file-selector-button { height: calc(var(--control-h) - 2px); margin-inline-end: var(--s-3); padding-inline: var(--s-3); border: 0; border-inline-end: 1px solid var(--input); background: var(--muted); color: var(--foreground); font: inherit; font-weight: 500; cursor: pointer; }
  .input--sm { height: var(--control-h-sm); font-size: var(--text-sm); }
  .input--tech, .textarea--tech { font-family: var(--font-code); font-size: var(--text-sm); direction: ltr; text-align: left; }
  [dir="rtl"] .input--tech { text-align: right; }
  [dir="rtl"] .input--tech:not(:placeholder-shown) { text-align: left; }
  /* Numbers and dates keep LTR editing order but align at the RTL start edge. */
  [dir="rtl"] .input:is([inputmode="numeric"], [inputmode="decimal"], [type="number"], [type="date"]) { direction: ltr; text-align: right; }
  input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }
  .textarea { height: auto; min-height: 5rem; padding-block: var(--s-2); resize: vertical; line-height: 1.55; }
  .textarea--tech { line-height: 1.7; white-space: pre; overflow-wrap: normal; overflow-x: auto; }

  /* Native select with a chevron; the enhanced listbox (select.js) reuses it. */
  .select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-inline-end: calc(var(--control-px) + 1.25rem);
    background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%), linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
    background-size: 4.5px 4.5px, 4.5px 4.5px; background-repeat: no-repeat;
    background-position: calc(100% - var(--control-px) - 6px) 52%, calc(100% - var(--control-px) - 1.5px) 52%;
  }
  [dir="rtl"] .select { background-position: calc(var(--control-px) + 1.5px) 52%, calc(var(--control-px) + 6px) 52%; }
  .select--sm { height: var(--control-h-sm); font-size: var(--text-sm); }
  .select--auto { width: auto; }

  /* Input group: leading/trailing addons (icon, unit, button) in one frame. */
  .input-group {
    position: relative; display: flex; align-items: center; width: 100%; min-width: 0;
    height: var(--control-h); border: 1px solid var(--input); border-radius: var(--radius-md);
    background: transparent; box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .input-group:focus-within { border-color: var(--ring); box-shadow: var(--focus-ring); }
  .input-group:has([aria-invalid="true"]) { border-color: var(--destructive); }
  .input-group > .input, .input-group > .select, :root[data-theme="dark"] .input-group > :is(.input, .select) { border: 0; box-shadow: none; background-color: transparent; height: 100%; flex: 1; }
  .input-group > .input:focus-visible { box-shadow: none; }
  .input-group-addon { display: inline-flex; align-items: center; gap: var(--s-1); padding-inline: var(--control-px); color: var(--muted-foreground); font-size: var(--text-sm); white-space: nowrap; height: 100%; }
  .input-group-addon:first-child { padding-inline-end: 0; }
  .input-group-addon:last-child { padding-inline-start: 0; }
  .input-group-addon--boxed { background: var(--muted); border-inline-start: 1px solid var(--input); padding-inline: var(--control-px); }
  .input-group-addon--boxed:first-child { border-inline-start: 0; border-inline-end: 1px solid var(--input); }
  .input-group > .btn { height: calc(100% - 6px); margin-inline: 3px; box-shadow: none; }
  :root[data-theme="dark"] .input-group { background: color-mix(in srgb, var(--input) 30%, transparent); }
  /* Touch: text fields and selects are themselves the 44px target (they cannot carry a ::after
   * hit area); a group's 1px frame sits outside its 44px inner field. */
  @media (pointer: coarse) {
    .input, .select, .js-sel .select-trigger, .choice-menu-trigger { min-width: var(--hit); min-height: var(--hit); }
    .input-group { min-height: calc(var(--hit) + 2px); }
  }

  /* Checkbox and radio: native inputs drawn with tokens. */
  .checkbox, .radio {
    appearance: none; -webkit-appearance: none; flex-shrink: 0;
    display: inline-grid; place-content: center;
    width: 1rem; height: 1rem; margin: 0;
    border: 1px solid var(--input); background: var(--background);
    box-shadow: var(--shadow-xs); cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .checkbox { border-radius: var(--radius-xs); }
  .radio { border-radius: 50%; }
  .checkbox::before { content: ""; width: .625rem; height: .625rem; transform: scale(0); transition: transform var(--dur-fast) var(--ease); background: var(--primary-foreground);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
  .checkbox:checked, .checkbox:indeterminate { background: var(--primary); border-color: var(--primary); }
  .checkbox:checked::before { transform: scale(1); }
  .checkbox:indeterminate::before { transform: scale(1); clip-path: none; height: 2px; width: .5rem; }
  .radio::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; transform: scale(0); background: var(--primary); transition: transform var(--dur-fast) var(--ease); }
  .radio:checked { border-color: var(--primary); }
  .radio:checked::before { transform: scale(1); }
  .checkbox:focus-visible, .radio:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--ring); }
  .checkbox:disabled, .radio:disabled { opacity: .5; cursor: not-allowed; }
  :root[data-theme="dark"] :is(.checkbox, .radio):not(:checked) { background: color-mix(in srgb, var(--input) 30%, transparent); }
  /* Compact glyph inside a 44px touch hit area. */
  @media (pointer: coarse) {
    .checkbox, .radio { position: relative; }
    :is(.checkbox, .radio)::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: var(--hit); height: var(--hit); transform: translate(-50%, -50%); }
  }

  /* Switch: <input type="checkbox" role="switch" class="switch">. */
  .switch {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; margin: 0;
    width: 2.125rem; height: 1.25rem; border-radius: var(--radius-full);
    background: var(--input); border: 1px solid transparent; cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background-color var(--dur) var(--ease);
  }
  .switch::before {
    content: ""; position: absolute; top: 1px; inset-inline-start: 1px;
    width: 1rem; height: 1rem; border-radius: 50%; background: var(--background);
    box-shadow: 0 1px 2px rgb(0 0 0 / .2);
    transition: transform var(--dur) var(--ease);
  }
  .switch:checked { background: var(--primary); }
  .switch:checked::before { transform: translateX(.875rem); }
  [dir="rtl"] .switch:checked::before { transform: translateX(-.875rem); }
  :root[data-theme="dark"] .switch:checked::before { background: var(--primary-foreground); }
  .switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .switch:disabled { opacity: .5; cursor: not-allowed; }

  /* Field: label + control + description + error. */
  .field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
  .field-label, .field > label:first-child:not(.choice) { font-size: var(--text-sm); font-weight: 500; line-height: 1.3; color: var(--foreground); display: flex; align-items: center; gap: var(--s-1_5); }
  .field-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
  .field-optional { color: var(--muted-foreground); font-weight: 400; font-size: var(--text-xs); }
  .field-description, .hint { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.5; }
  .field-error { font-size: var(--text-xs); color: var(--destructive-text); font-weight: 500; display: flex; align-items: center; gap: var(--s-1); }
  .field-error:empty { display: none; }
  .field--inline { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .field--inline > .field-text { display: flex; flex-direction: column; gap: var(--s-0_5); min-width: 0; }
  .field-help { position: relative; display: inline-flex; }
  .field-label-row > .field-help { margin-inline-end: auto; }
  .field-help-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; color: var(--muted-foreground); font-size: 10px; border: 1px solid var(--border); }
  /* Compact glyph, 24px hit area (44px on touch) without enlarging the visual. */
  .field-help-trigger::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 1.5rem; height: 1.5rem; transform: translate(-50%, -50%); }
  @media (pointer: coarse) { .field-help-trigger::after { width: var(--hit); height: var(--hit); } }
  .field-help-trigger:hover { color: var(--foreground); }
  .field-help-content { position: absolute; z-index: var(--z-popover); top: calc(100% + 6px); inset-inline-start: 0; width: min(18rem, 80vw); padding: var(--s-2) var(--s-3); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--popover); color: var(--popover-foreground); font-size: var(--text-xs); font-weight: 400; box-shadow: var(--shadow-md); }

  /* Field grid: responsive two/three-column forms. */
  .field-grid { display: grid; gap: var(--s-4) var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-span-2 { grid-column: span 2; }
  .field-span-full { grid-column: 1 / -1; }
  @media (max-width: 640px) { .field-grid--2, .field-grid--3 { grid-template-columns: 1fr; } .field-span-2 { grid-column: auto; } }

  .fieldset { display: flex; flex-direction: column; gap: var(--s-4); }
  .fieldset-legend { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--s-1); }

  /* Choice: a label wrapping a checkbox/radio/switch and its text. */
  .choice { display: flex; align-items: flex-start; gap: var(--s-2_5); cursor: pointer; font-size: var(--text-base); line-height: 1.4; min-width: 0; }
  .choice > :is(.checkbox, .radio) { margin-top: .15em; }
  .choice-text { display: flex; flex-direction: column; gap: var(--s-0_5); min-width: 0; }
  .choice-description { font-size: var(--text-xs); color: var(--muted-foreground); }
  .choice:has(:disabled) { opacity: .6; cursor: not-allowed; }
  .choice-list { display: flex; flex-direction: column; gap: var(--s-3); }

  /* Choice card: radio/checkbox cards (strategies, profiles, kinds). */
  .choice-card {
    position: relative; display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--card); cursor: pointer; min-width: 0;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .choice-card:hover { border-color: color-mix(in srgb, var(--foreground) 22%, var(--border)); }
  .choice-card:has(input:checked), .choice-card[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary) 4%, var(--card)); }
  .choice-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .choice-card > input { margin-top: .15em; }
  .choice-card-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; flex: 1; }
  .choice-card-title { font-weight: 500; display: flex; align-items: center; gap: var(--s-2); }
  .choice-card-description { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.5; }
  .choice-card--hidden-input > input { position: absolute; opacity: 0; pointer-events: none; }
  .choice-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

  /* Toggle group: segmented radio control (Vercel/Linear switcher). */
  .toggle-group {
    display: inline-flex; align-items: center; gap: 2px; padding: 2px;
    border-radius: var(--radius-md); background: var(--muted); border: 1px solid var(--border);
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
  }
  .toggle-group > label, .toggle-group > a, .toggle-group > button {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1_5);
    height: calc(var(--control-h-sm) - 6px); padding-inline: var(--s-2_5);
    border-radius: calc(var(--radius-md) - 2px); color: var(--muted-foreground);
    font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .toggle-group > label > input { position: absolute; opacity: 0; pointer-events: none; }
  .toggle-group > :hover { color: var(--foreground); }
  .toggle-group > label:has(input:checked), .toggle-group > [aria-pressed="true"], .toggle-group > [aria-current], .toggle-group > [aria-selected="true"] {
    background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border);
  }
  .toggle-group > label:has(input:focus-visible), .toggle-group > :focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* Chips: multi-select presets and filter pills. */
  .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .chip {
    position: relative; display: inline-flex; align-items: center; gap: var(--s-1_5);
    height: var(--control-h-sm); padding-inline: var(--s-3);
    border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--background); color: var(--foreground); font-size: var(--text-sm); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .chip > input { position: absolute; opacity: 0; pointer-events: none; }
  .chip:hover { border-color: color-mix(in srgb, var(--foreground) 25%, var(--border)); }
  .chip:has(input:checked) { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
  .chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .chip > .icon { width: .875rem; height: .875rem; }

  .form-errors { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
  .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
  .form-actions--start { justify-content: flex-start; }
  .form-actions--between { justify-content: space-between; }
  .password-field { position: relative; }
  .password-field > .input { padding-inline-end: calc(var(--control-h) + var(--s-1)); }
  .password-field > .btn { position: absolute; inset-inline-end: 2px; top: 2px; height: calc(var(--control-h) - 4px); width: calc(var(--control-h) - 4px); border: 0; box-shadow: none; }
}

/* --- styles/20-components/misc.css --- */
/* Small primitives: kbd, separator, avatar, spinner, skeleton, progress,
 * meter rings, code/copy values and description lists. */
@layer components {
  .kbd {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    min-width: 1.25rem; height: 1.25rem; padding-inline: var(--s-1);
    border: 1px solid var(--border); border-radius: var(--radius-xs);
    background: var(--muted); color: var(--muted-foreground);
    font-family: var(--font-code); font-size: var(--text-2xs); font-weight: 500; line-height: 1;
    direction: ltr; unicode-bidi: isolate;
  }
  .separator { flex-shrink: 0; background: var(--border); height: 1px; width: 100%; border: 0; }
  .separator--vertical { width: 1px; height: 1rem; align-self: center; }

  .avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2rem; height: 2rem; border-radius: var(--radius-full);
    background: var(--muted); color: var(--foreground);
    font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
    border: 1px solid var(--border);
  }
  .avatar--sm { width: 1.5rem; height: 1.5rem; font-size: var(--text-2xs); }
  .avatar--lg { width: 2.75rem; height: 2.75rem; font-size: var(--text-base); }
  .avatar--square { border-radius: var(--radius-md); }
  .avatar--primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }

  .spinner { width: var(--icon); height: var(--icon); border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; flex-shrink: 0; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .htmx-indicator { display: none; }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }

  .skeleton { border-radius: var(--radius-md); background: color-mix(in srgb, var(--muted-foreground) 14%, transparent); animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .55; } }

  /* Progress / meter. Widths come from w0…w100 classes (strict CSP). */
  .progress { position: relative; height: .375rem; width: 100%; overflow: hidden; border-radius: var(--radius-full); background: color-mix(in srgb, var(--foreground) 9%, transparent); }
  .progress-bar { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--primary); transition: width var(--dur-slow) var(--ease); }
  .progress--sm { height: .25rem; }
  .progress--lg { height: .5rem; }
  .progress-bar.tone-success, .progress--success .progress-bar { background: var(--success); }
  .progress-bar.tone-warning, .progress--warning .progress-bar, .progress-bar.is-warn { background: var(--warning); }
  .progress-bar.tone-danger, .progress--danger .progress-bar, .progress-bar.is-danger { background: var(--destructive); }
  .progress-bar.tone-muted { background: var(--muted-foreground); }

  /* Technical value with copy button. */
  .code {
    display: inline-flex; align-items: center; max-width: 100%;
    padding: 0 var(--s-1_5); min-height: 1.375rem;
    border-radius: var(--radius-sm); background: var(--muted); border: 1px solid var(--border);
    font-family: var(--font-code); font-size: var(--text-xs); color: var(--foreground);
    direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; word-break: break-all;
  }
  .code-block {
    display: block; margin: 0; padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--muted);
    font-family: var(--font-code); font-size: var(--text-xs); line-height: 1.7;
    direction: ltr; text-align: left; white-space: pre; overflow: auto; max-height: 24rem;
  }
  .code-block--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  .copy-field { display: flex; align-items: center; gap: var(--s-1); min-width: 0; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--muted); padding-inline-start: var(--s-3); height: var(--control-h); }
  .copy-field > .tech, .copy-field > code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
  .copy-field > .btn { border: 0; box-shadow: none; height: calc(var(--control-h) - 2px); }
  .copy-field > input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--foreground); font-size: var(--text-sm); }
  .copy-field > input:focus-visible { outline: none; }
  .copy-field:focus-within { border-color: var(--ring); box-shadow: var(--focus-ring); }

  /* Description list: label/value grid used for entity summaries. */
  .dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--s-2_5) var(--s-6); font-size: var(--text-base); }
  .dl > dt { color: var(--muted-foreground); }
  .dl > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .dl--stack { grid-template-columns: 1fr; gap: var(--s-1) 0; }
  .dl--stack > dd { margin-bottom: var(--s-2); }
  @media (max-width: 480px) { .dl { grid-template-columns: 1fr; gap: var(--s-0_5) 0; } .dl > dd { margin-bottom: var(--s-2); } }

  /* Key/value rows divided by hairlines (Vercel "details" lists). */
  .kv { display: flex; flex-direction: column; }
  .kv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2_5); border-bottom: 1px solid var(--border); min-width: 0; }
  .kv-row:last-child { border-bottom: 0; }
  .kv-label { color: var(--muted-foreground); font-size: var(--text-sm); flex-shrink: 0; }
  .kv-value { font-weight: 500; min-width: 0; text-align: end; overflow-wrap: anywhere; display: flex; align-items: center; gap: var(--s-2); justify-content: flex-end; }
}

/* --- styles/20-components/navigation.css --- */
/* Navigation — Tabs (underline | segmented via data-tabs), Breadcrumb,
 * Pagination. Tabs are links (server-navigated), buttons (in-page) or CSS-only
 * radio tabs: <input type=radio class=sr-only> directly before <label class=tab>. */
@layer components {
  .tabs {
    display: flex; align-items: center; gap: var(--s-1);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1_5);
    flex-shrink: 0; height: var(--control-h-sm); padding-inline: var(--s-3);
    border-radius: var(--radius-md); color: var(--muted-foreground);
    font-size: var(--text-base); font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .tab > .icon { width: var(--icon-sm); height: var(--icon-sm); }
  .tab:hover { color: var(--foreground); }
  .tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .tab-count { font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-family: var(--font-code); }
  .tab[aria-selected="true"], .tab[aria-current="page"], .tab[aria-current="true"], :checked + .tab { color: var(--foreground); }
  :focus-visible + .tab { box-shadow: var(--focus-ring); }

  /* Underline (Vercel): hairline baseline, 2px indicator on the active tab. */
  :root:not([data-tabs="segmented"]) .tabs { border-bottom: 1px solid var(--border); gap: var(--s-1); }
  :root:not([data-tabs="segmented"]) .tab { height: auto; padding: var(--s-2) var(--s-2_5) var(--s-3); border-radius: 0; margin-bottom: -1px; }
  :root:not([data-tabs="segmented"]) .tab::before { content: ""; position: absolute; inset: var(--s-1) 0 var(--s-2); border-radius: var(--radius-md); z-index: -1; transition: background-color var(--dur-fast) var(--ease); }
  :root:not([data-tabs="segmented"]) .tab:hover::before { background: var(--accent); }
  :root:not([data-tabs="segmented"]) .tab { isolation: isolate; }
  :root:not([data-tabs="segmented"]) .tab[aria-selected="true"]::after,
  :root:not([data-tabs="segmented"]) .tab[aria-current="page"]::after,
  :root:not([data-tabs="segmented"]) .tab[aria-current="true"]::after,
  :root:not([data-tabs="segmented"]) :checked + .tab::after { content: ""; position: absolute; inset-inline: var(--s-2_5); bottom: 0; height: 2px; border-radius: 2px; background: var(--foreground); }

  /* Segmented (shadcn TabsList): muted track, raised active trigger. */
  :root[data-tabs="segmented"] .tabs { width: fit-content; padding: 3px; gap: 2px; border-radius: var(--radius-lg); background: var(--muted); }
  :root[data-tabs="segmented"] .tab { height: calc(var(--control-h) - 6px); padding-inline: var(--s-3); border-radius: calc(var(--radius-lg) - 3px); border: 1px solid transparent; }
  :root[data-tabs="segmented"] .tab[aria-selected="true"],
  :root[data-tabs="segmented"] .tab[aria-current="page"],
  :root[data-tabs="segmented"] .tab[aria-current="true"],
  :root[data-tabs="segmented"] :checked + .tab { background: var(--background); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--border) 60%, transparent); }
  :root[data-theme="dark"][data-tabs="segmented"] .tab[aria-selected="true"], :root[data-theme="dark"][data-tabs="segmented"] .tab[aria-current], :root[data-theme="dark"][data-tabs="segmented"] :checked + .tab { background: color-mix(in srgb, var(--input) 45%, var(--background)); border-color: var(--input); }
  @media (max-width: 640px) { :root[data-tabs="segmented"] .tabs { width: 100%; } }
  .tabs--full { width: 100% !important; }
  .tab-panel[hidden] { display: none; }

  .breadcrumb { display: flex; align-items: center; gap: var(--s-1_5); flex-wrap: nowrap; min-width: 0; font-size: var(--text-base); color: var(--muted-foreground); }
  .breadcrumb > li { display: inline-flex; align-items: center; gap: var(--s-1_5); min-width: 0; }
  .breadcrumb > li + li::before { content: "/"; color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); }
  .breadcrumb a:hover { color: var(--foreground); }
  @media (pointer: coarse) {
    .tab { min-height: var(--hit); }
    .breadcrumb a { position: relative; }
    .breadcrumb a::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, var(--hit)); height: max(100%, var(--hit)); transform: translate(-50%, -50%); }
  }
  .breadcrumb [aria-current="page"] { color: var(--foreground); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--muted-foreground); }
  .pagination-pages { display: flex; align-items: center; gap: var(--s-1); }
}

/* --- styles/20-components/overlays.css --- */
/* Overlays — Dialog / Alert dialog, Sheet (side drawer), Dropdown menu,
 * Select listbox, Popover, Tooltip, Toast and Command palette. Native
 * <dialog> provides modality and focus containment. */
@layer components {
  /* Dialog */
  dialog.dialog, dialog.sheet { color: var(--popover-foreground); }
  dialog.dialog::backdrop, dialog.sheet::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
  dialog.dialog {
    width: min(32rem, calc(100vw - 2rem)); max-height: min(85dvh, 48rem);
    margin: auto; overflow: hidden;
    display: none; flex-direction: column;
    background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
  }
  dialog.dialog[open] { display: flex; animation: dialog-in var(--dur) var(--ease); }
  dialog.dialog[open]::backdrop { animation: fade-in var(--dur) var(--ease); }
  .dialog--sm { width: min(26rem, calc(100vw - 2rem)) !important; }
  .dialog--lg { width: min(42rem, calc(100vw - 2rem)) !important; }
  .dialog--xl { width: min(56rem, calc(100vw - 2rem)) !important; }
  .dialog-header { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-5) var(--s-6) var(--s-3); }
  .dialog-heading { display: flex; flex-direction: column; gap: var(--s-1_5); flex: 1; min-width: 0; }
  .dialog-title { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-tight); }
  .dialog-description { font-size: var(--text-sm); color: var(--muted-foreground); }
  .dialog-header > .btn--icon { margin-inline-end: calc(var(--s-2) * -1); margin-top: calc(var(--s-1) * -1); color: var(--muted-foreground); }
  .dialog-body { padding: var(--s-2) var(--s-6) var(--s-5); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s-4); flex: 1; min-height: 0; }
  .dialog-footer { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 50%, transparent); flex-wrap: wrap; }
  .dialog-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); flex-shrink: 0; background: var(--muted); color: var(--foreground); }
  .dialog--danger .dialog-icon { background: color-mix(in srgb, var(--destructive) 12%, transparent); color: var(--destructive-text); }
  @media (max-width: 640px) {
    dialog.dialog { width: 100% !important; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
    dialog.dialog[open] { animation: sheet-up var(--dur-slow) var(--ease); }
    .dialog-footer { flex-direction: column-reverse; }
    .dialog-footer > .btn { width: 100%; }
  }

  /* Sheet: side panel for create/edit flows. */
  dialog.sheet {
    position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; margin: 0;
    width: min(32rem, 100%); height: 100dvh; max-height: 100dvh;
    display: none; grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--popover); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-2xl);
  }
  dialog.sheet[open] { display: grid; animation: sheet-in var(--dur-slow) var(--ease); }
  [dir="rtl"] dialog.sheet[open] { animation-name: sheet-in-rtl; }
  .sheet--lg { width: min(40rem, 100vw) !important; }
  .sheet-header { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border); }
  .sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
  .sheet-footer { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); padding-bottom: max(var(--s-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--popover); }
  @media (max-width: 640px) { .sheet-header, .sheet-body, .sheet-footer { padding-inline: var(--s-4); } }

  @keyframes fade-in { from { opacity: 0; } }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(4px) scale(.98); } }
  @keyframes sheet-in { from { transform: translateX(100%); } }
  @keyframes sheet-in-rtl { from { transform: translateX(-100%); } }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes pop-in { from { opacity: 0; transform: translateY(-2px) scale(.98); } }

  /* Dropdown menu (ui.js positions .menu next to its .menu-anchor trigger). */
  .menu-anchor { position: relative; display: inline-flex; }
  .menu, .select-content, .popover {
    z-index: var(--z-popover);
    min-width: 11rem; padding: var(--s-1);
    background: var(--popover); color: var(--popover-foreground);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .menu { display: none; position: absolute; top: calc(100% + 4px); inset-inline-end: 0; }
  .menu.is-open { display: block; animation: pop-in var(--dur-fast) var(--ease); }
  .menu > a, .menu > button, .menu > form > button, .menu-item, .select-item {
    display: flex; align-items: center; gap: var(--s-2); width: 100%;
    min-height: 2rem; padding: var(--s-1_5) var(--s-2);
    border-radius: var(--radius-sm); color: var(--popover-foreground);
    font-size: var(--text-sm); text-align: start; white-space: nowrap; cursor: pointer;
  }
  .menu > a > .icon, .menu > button > .icon, .menu > form > button > .icon, .menu-item > .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--muted-foreground); }
  .menu > :is(a, button, form > button):is(:hover, :focus-visible), .menu-item:is(:hover, :focus-visible), .select-item:hover, .select-item[data-highlighted] { background: var(--accent); color: var(--accent-foreground); outline: none; }
  .menu > :is(a, button, form > button):is(:hover, :focus-visible) > .icon { color: var(--accent-foreground); }
  .menu .is-danger, .menu-item--danger { color: var(--destructive-text) !important; }
  .menu .is-danger > .icon, .menu-item--danger > .icon { color: var(--destructive-text) !important; }
  .menu .is-danger:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent) !important; }
  .menu > form { display: block; }
  .menu-label { padding: var(--s-1_5) var(--s-2); font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); }
  .menu-separator, .menu > hr { height: 1px; margin: var(--s-1) calc(var(--s-1) * -1); background: var(--border); border: 0; }
  .menu-shortcut { margin-inline-start: auto; font-size: var(--text-xs); color: var(--muted-foreground); }
  .menu [role="menuitemradio"][aria-checked="true"]::after, .menu [role="menuitemcheckbox"][aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; font-size: var(--text-xs); }
  @media (pointer: coarse) { .menu > a, .menu > button, .menu > form > button, .menu-item, .select-item { min-height: 2.75rem; } }

  /* Enhanced select (select.js) */
  .select-control { display: block; min-width: 0; }
  .select-control > select[hidden] { display: none; }
  .select-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); text-align: start; cursor: pointer; background-image: none !important; padding-inline-end: var(--control-px) !important; }
  .select-trigger[aria-expanded="true"] { border-color: var(--ring); box-shadow: var(--focus-ring); }
  .select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .select-chevron { color: var(--muted-foreground); font-size: .75rem; line-height: 1; transform: translateY(-2px); }
  .select-content { position: fixed; inset: auto; margin: 0; overflow: auto; }
  .select-content[hidden] { display: none; }
  .select-item { justify-content: space-between; }
  .select-item[aria-disabled="true"] { opacity: .5; cursor: default; }
  .select-check { opacity: 0; font-size: var(--text-xs); }
  .select-item[aria-selected="true"] .select-check { opacity: 1; }

  /* Tooltip (ui.js renders one .floating-tip for any [data-tip]). */
  .floating-tip {
    position: fixed; z-index: var(--z-tooltip); pointer-events: none; max-width: 18rem;
    padding: var(--s-1) var(--s-2); border-radius: var(--radius-sm);
    background: var(--foreground); color: var(--background);
    font-size: var(--text-xs); font-weight: 500; line-height: 1.4;
    animation: fade-in var(--dur-fast) var(--ease);
  }

  /* Toasts */
  .toasts { position: fixed; z-index: var(--z-toast); inset-block-end: var(--s-4); inset-inline-end: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); width: min(22rem, calc(100vw - 2rem)); pointer-events: none; }
  .toast {
    pointer-events: auto; display: flex; align-items: center; gap: var(--s-2_5);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
    background: var(--popover); color: var(--popover-foreground);
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    font-size: var(--text-sm); animation: toast-in var(--dur) var(--ease);
  }
  .toast > span:not(.toast-icon) { flex: 1; min-width: 0; }
  .toast-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; background: var(--success); color: var(--success-foreground); }
  .toast--err .toast-icon { background: var(--destructive); color: var(--destructive-foreground); }
  .toast--err { border-color: color-mix(in srgb, var(--destructive) 35%, var(--border)); }
  .toast > .icon-btn { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; }
  .toast > .icon-btn:hover { background: var(--accent); color: var(--foreground); }
  .copy-feedback { position: fixed; z-index: var(--z-tooltip); padding: var(--s-1_5) var(--s-2_5); width: auto; gap: var(--s-1_5); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
  @media (max-width: 640px) { .toasts { inset-inline: var(--s-3); inset-block-end: max(var(--s-3), env(safe-area-inset-bottom)); width: auto; } }

  /* Command palette (⌘K): navigation and quick actions. */
  dialog.command { width: min(36rem, calc(100vw - 2rem)); margin: 12dvh auto auto; display: none; flex-direction: column; max-height: 70dvh; overflow: hidden; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-2xl); }
  dialog.command[open] { display: flex; animation: dialog-in var(--dur-fast) var(--ease); }
  dialog.command::backdrop { background: color-mix(in srgb, var(--overlay) 70%, transparent); }
  .command-input { display: flex; align-items: center; gap: var(--s-2); padding-inline: var(--s-4); border-bottom: 1px solid var(--border); }
  .command-input > .icon { color: var(--muted-foreground); }
  .command-input > input { flex: 1; height: 3rem; border: 0; background: transparent; font-size: var(--text-md); outline: none; }
  .command-list { overflow-y: auto; padding: var(--s-2); overscroll-behavior: contain; }
  .command-group { padding-block: var(--s-1); }
  .command-group-label { padding: var(--s-1_5) var(--s-2); font-size: var(--text-xs); color: var(--muted-foreground); font-weight: 500; }
  .command-item { display: flex; align-items: center; gap: var(--s-2_5); min-height: 2.25rem; padding: var(--s-1_5) var(--s-2); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--popover-foreground); cursor: pointer; }
  .command-item > .icon { color: var(--muted-foreground); }
  .command-item[aria-selected="true"], .command-item:hover { background: var(--accent); color: var(--accent-foreground); }
  .command-item[hidden] { display: none; }
  .command-empty { padding: var(--s-8) var(--s-4); text-align: center; color: var(--muted-foreground); font-size: var(--text-sm); }
  .command-footer { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-foreground); }
}

/* --- styles/20-components/widgets.css --- */
/* Script-rendered widgets: date picker (app.js), multi-select choice menu
 * and field guidance popovers (presentation.js), and the generic icon button
 * that scripts create. */
@layer components {
  .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--radius-md); color: var(--muted-foreground); font-size: var(--text-md); line-height: 1; }
  .icon-btn:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }
  .icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .icon-btn:disabled { opacity: .35; cursor: not-allowed; }
  @media (pointer: coarse) {
    .icon-btn { position: relative; }
    .icon-btn::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, var(--hit)); height: max(100%, var(--hit)); transform: translate(-50%, -50%); }
  }

  /* Calendar (Jalali in fa, Gregorian in en). */
  .calendar { position: fixed; z-index: calc(var(--z-popover) + 5); display: none; padding: var(--s-3); user-select: none; max-height: calc(100dvh - 16px); overflow-y: auto; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
  .calendar.is-open { display: block; animation: pop-in var(--dur-fast) var(--ease); }
  .cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-2); }
  .cal-title { font-size: var(--text-sm); font-weight: 500; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cal-wd { text-align: center; font-size: var(--text-2xs); color: var(--muted-foreground); padding: 2px 0 var(--s-1); }
  .cal-day { min-height: 2.125rem; border-radius: var(--radius-md); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--popover-foreground); transition: background-color var(--dur-fast) var(--ease); }
  .cal-day:hover:not(:disabled) { background: var(--accent); }
  .cal-day:disabled { opacity: .35; cursor: not-allowed; }
  .cal-day.is-today { background: var(--muted); font-weight: 600; }
  .cal-day.is-selected { background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
  .cal-day:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  /* Touch: app.js sizes the calendar to at most 338px (the viewport at 320px); seven gapless
   * columns then stay at least 44px wide. */
  @media (pointer: coarse) { .calendar { padding-inline: var(--s-1); } .cal-grid { gap: 0; } .cal-day { min-height: var(--hit); } }
  .cal-foot { display: flex; justify-content: flex-end; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border); }
  .calendar-field { position: relative; }

  /* Choice menu: searchable multi-select inside a <details>. */
  .choice-menu { position: relative; }
  .choice-menu-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); height: var(--control-h); padding-inline: var(--control-px); border: 1px solid var(--input); border-radius: var(--radius-md); background: transparent; box-shadow: var(--shadow-xs); font-size: var(--control-text); }
  .choice-menu-trigger::after { content: ""; width: .4rem; height: .4rem; /* physical: a rotated glyph */ border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground); transform: rotate(45deg) translateY(-2px); }
  .choice-menu[open] > .choice-menu-trigger, .choice-menu-trigger:focus-visible { outline: none; border-color: var(--ring); box-shadow: var(--focus-ring); }
  .choice-menu-panel { padding: var(--s-1); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-popover); }
  .choice-menu-panel[popover] { position: fixed; inset: auto; margin: 0; max-width: calc(100vw - 16px); max-height: min(26rem, calc(100dvh - 32px)); overflow: auto; }
  .choice-menu-panel .input { margin-bottom: var(--s-1); }
  .choice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1); }
  .choice-option { display: flex; align-items: center; gap: var(--s-2_5); padding: var(--s-1_5) var(--s-2); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; }
  .choice-option:hover { background: var(--accent); }
  .choice-option[hidden] { display: none !important; }

  /* Guidance popovers (field "?" help). */
  .field-help-content[popover] { position: fixed; inset: auto; margin: 0; top: auto; }
  .field-help-content .hint, .field-help-content p { color: inherit; font-size: inherit; }
}

/* --- styles/30-layout/auth.css --- */
/* Focused access layout (login, onboarding, error). */
@layer layout {
  .auth { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--background); }
  .auth-top { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-6); }
  .auth-brand { display: flex; align-items: center; gap: var(--s-2_5); font-weight: 600; }
  .auth-brand .brand-mark { background: var(--primary); color: var(--primary-foreground); }
  .auth-main { display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-4) var(--s-12); }
  .auth-card { width: min(24rem, 100%); display: flex; flex-direction: column; gap: var(--s-6); }
  .auth-card--wide { width: min(30rem, 100%); }
  .auth-heading { display: flex; flex-direction: column; gap: var(--s-1_5); text-align: center; align-items: center; }
  .auth-heading .brand-mark { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: var(--primary); color: var(--primary-foreground); margin-bottom: var(--s-2); }
  .auth-heading .brand-mark > .icon { width: 1.25rem; height: 1.25rem; }
  .auth-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; }
  :root[lang="fa"] .auth-title { letter-spacing: 0; }
  .auth-description { color: var(--muted-foreground); font-size: var(--text-base); }
  .auth-foot { padding: var(--s-4) var(--s-6); text-align: center; font-size: var(--text-xs); color: var(--muted-foreground); }
  .preferences { display: flex; align-items: center; gap: var(--s-1); }
  .locale-choice { font-weight: 500; }
}

/* --- styles/30-layout/page.css --- */
/* Page composition — header, sections and layout primitives. */
@layer layout {
  .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
  .page-heading { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; flex: 1 1 18rem; }
  .page-eyebrow { display: inline-flex; align-items: center; gap: var(--s-1_5); font-size: var(--text-sm); color: var(--muted-foreground); }
  .page-eyebrow a:hover { color: var(--foreground); }
  .page-title { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.025em; display: flex; align-items: center; gap: var(--s-2_5); flex-wrap: wrap; }
  :root[lang="fa"] .page-title { letter-spacing: 0; }
  .page-description { color: var(--muted-foreground); font-size: var(--text-base); max-width: 48rem; }
  .page-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .page-header + .tabs { margin-top: calc(var(--section-gap) * -0.5); }
  @media (max-width: 640px) {
    .page-title { font-size: var(--text-xl); }
    .page-actions { width: 100%; }
    .page-actions > .btn--primary:last-child { margin-inline-start: auto; }
  }

  .section { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
  .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
  .section-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .section-title { font-size: var(--text-md); font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
  .section-description { font-size: var(--text-sm); color: var(--muted-foreground); }

  /* Settings-style rows: label column + control column inside a card. */
  .setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-4) var(--s-8); padding: var(--s-5) var(--card-p); border-top: 1px solid var(--border); }
  .setting-row:first-child { border-top: 0; }
  .setting-label { display: flex; flex-direction: column; gap: var(--s-1); }
  .setting-title { font-weight: 500; }
  .setting-description { font-size: var(--text-sm); color: var(--muted-foreground); }
  .setting-control { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
  @media (max-width: 760px) { .setting-row { grid-template-columns: 1fr; gap: var(--s-3); } }

  .stack { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
  .stack-xs { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
  .stack-sm { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
  .stack-lg { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
  .cluster { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
  .cluster-lg { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
  .row { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-width: 0; }
  .spacer { flex: 1; }
  .grid { display: grid; gap: var(--s-4); min-width: 0; }
  .grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-auto { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
  @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
  .split { display: grid; gap: var(--section-gap) var(--s-6); grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); align-items: start; }
  .split > .split-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); display: flex; flex-direction: column; gap: var(--s-4); }
  @media (max-width: 1100px) { .split { grid-template-columns: 1fr; } .split > .split-aside { position: static; } }

  /* Toolbar: search + filters + actions above a collection. */
  .toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .toolbar > .toolbar-search { flex: 1 1 16rem; max-width: 24rem; }
  .toolbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); }
  @media (max-width: 640px) { .toolbar > .toolbar-search { max-width: none; flex-basis: 100%; } }

  /* Sticky save bar for long forms. */
  .savebar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-top: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--popover) 92%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); }
  .savebar-status { font-size: var(--text-sm); color: var(--muted-foreground); }
  .bulk-bar { position: sticky; bottom: var(--s-4); z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; width: fit-content; max-width: 100%; margin-inline: auto; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--popover); box-shadow: var(--shadow-xl); font-size: var(--text-sm); }
  .bulk-bar[hidden] { display: none; }
}

/* --- styles/30-layout/public.css --- */
/* Public subscription layout: customer-facing, no admin chrome. */
@layer layout {
  .public { min-height: 100dvh; display: flex; flex-direction: column; background: var(--background); }
  .public-header { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: var(--header-h); padding-inline: max(var(--s-4), calc((100vw - 46rem) / 2)); background: color-mix(in srgb, var(--background) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
  .public-brand { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; min-width: 0; }
  .public-brand .brand-mark { background: var(--primary); color: var(--primary-foreground); }
  .public-main { flex: 1; width: 100%; max-width: 46rem; margin-inline: auto; padding: var(--s-6) var(--s-4) var(--s-12); display: flex; flex-direction: column; gap: var(--s-5); }
  .public-main--wide { max-width: 64rem; }
  .public-foot { padding: var(--s-6) var(--s-4); text-align: center; font-size: var(--text-xs); color: var(--muted-foreground); }
}

/* --- styles/30-layout/shell.css --- */
/* App shell — shadcn Sidebar block. data-sidebar on <html> picks the
 * composition: plain (Vercel: flush sidebar + hairline), inset (Linear /
 * sidebar-07: content in a rounded panel) or floating (sidebar as a panel).
 * Below 960px the sidebar is a modal drawer (ui.js); the desktop rail
 * collapses to icons with tooltips. */
@layer layout {
  .app { display: flex; min-height: 100dvh; background: var(--background); }
  :root[data-sidebar="inset"] .app { background: var(--sidebar); }

  .sidebar {
    position: sticky; top: 0; z-index: var(--z-sidebar);
    display: flex; flex-direction: column; flex-shrink: 0;
    width: var(--sidebar-w); height: 100dvh;
    background: var(--sidebar); color: var(--sidebar-foreground);
    border-inline-end: 1px solid var(--sidebar-border);
  }
  /* Animate only a user toggle, never the saved state restored on load. */
  .app[data-rail-animate] .sidebar { transition: width var(--dur) var(--ease); }
  :root[data-sidebar="inset"] .sidebar { border-inline-end: 0; }
  :root[data-sidebar="floating"] .sidebar {
    top: var(--s-2); height: calc(100dvh - var(--s-4)); margin: var(--s-2); margin-inline-end: 0;
    border: 1px solid var(--sidebar-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  }

  .sidebar-header { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2); min-height: var(--header-h); }
  .sidebar-brand { display: flex; align-items: center; gap: var(--s-2_5); min-width: 0; flex: 1; padding: var(--s-1); border-radius: var(--radius-md); }
  .sidebar-brand:hover { background: var(--sidebar-accent); }
  .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md); background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); flex-shrink: 0; }
  .brand-mark > .icon { width: 1rem; height: 1rem; }
  .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .brand-name { font-weight: 600; font-size: var(--text-base); color: var(--sidebar-accent-foreground); white-space: nowrap; }
  .brand-sub { font-size: var(--text-xs); color: var(--sidebar-foreground); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .sidebar-search {
    display: flex; align-items: center; gap: var(--s-2); margin: 0 var(--s-3) var(--s-2);
    height: var(--control-h-sm); padding-inline: var(--s-2_5);
    border: 1px solid var(--sidebar-border); border-radius: var(--radius-md);
    background: var(--background); color: var(--muted-foreground); font-size: var(--text-sm);
    box-shadow: var(--shadow-xs); cursor: pointer;
  }
  .sidebar-search > span { flex: 1; text-align: start; }
  .sidebar-search:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 18%, var(--sidebar-border)); }
  .sidebar-search:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  .sidebar-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-1) var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
  .sidebar-group { display: flex; flex-direction: column; gap: 1px; }
  .sidebar-group-label { display: flex; align-items: center; height: 1.75rem; padding-inline: var(--s-2); font-size: var(--text-xs); font-weight: 500; color: color-mix(in srgb, var(--sidebar-foreground) 75%, transparent); white-space: nowrap; }
  .sidebar-menu { display: flex; flex-direction: column; gap: 1px; }
  .sidebar-item {
    position: relative; display: flex; align-items: center; gap: var(--s-2_5);
    height: var(--control-h-sm); padding-inline: var(--s-2);
    border-radius: var(--radius-md); color: var(--sidebar-foreground);
    font-size: var(--text-base); font-weight: 450; white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .sidebar-item > .icon { width: var(--icon); height: var(--icon); opacity: .85; }
  .sidebar-item > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sidebar-item > .sidebar-marker { margin-inline-start: auto; }
  .sidebar-item:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
  .sidebar-item[aria-current="page"] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 500; }
  .sidebar-item[aria-current="page"] > .icon { opacity: 1; }
  .sidebar-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sidebar-ring); }
  .sidebar-marker { width: .4rem; height: .4rem; border-radius: 50%; background: var(--info); flex-shrink: 0; }
  @media (pointer: coarse) { .sidebar-item, .sidebar-search { height: var(--hit); } .sidebar-brand, .sidebar-user { min-height: var(--hit); } }

  .sidebar-footer { padding: var(--s-2); border-top: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: var(--s-1); }
  :root[data-sidebar="inset"] .sidebar-footer { border-top: 0; }
  .sidebar-user { display: flex; align-items: center; gap: var(--s-2_5); width: 100%; padding: var(--s-1_5) var(--s-2); border-radius: var(--radius-md); text-align: start; color: var(--sidebar-foreground); }
  .sidebar-user:hover, .sidebar-user[aria-expanded="true"] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
  .sidebar-user-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
  .sidebar-user-name { font-weight: 500; font-size: var(--text-sm); color: var(--sidebar-accent-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-user-role { font-size: var(--text-xs); color: var(--sidebar-foreground); }
  .sidebar-footer .menu-anchor { display: flex; }
  .sidebar-footer .menu { inset-inline-end: auto; inset-inline-start: 0; bottom: calc(100% + 4px); top: auto; width: 100%; }
  .nav-close { display: none; }

  /* Desktop icon rail */
  @media (min-width: 961px) {
    .app[data-collapsed] .sidebar { width: var(--sidebar-w-rail); }
    .app[data-collapsed] :is(.brand-text, .sidebar-group-label, .sidebar-search > span, .sidebar-search > .kbd, .sidebar-user-text, .sidebar-marker) { display: none; }
    /* Rail links have no aria-label: their text stays in the accessibility tree. */
    .app[data-collapsed] .sidebar-item > span:not(.sidebar-marker) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .app[data-collapsed] .sidebar-header { justify-content: center; padding-inline: var(--s-2); }
    .app[data-collapsed] .sidebar-brand { flex: 0; }
    .app[data-collapsed] .sidebar-item, .app[data-collapsed] .sidebar-user { justify-content: center; padding-inline: 0; }
    .app[data-collapsed] .sidebar-search { justify-content: center; margin-inline: var(--s-2); padding: 0; }
    .app[data-collapsed] .sidebar-group + .sidebar-group { border-top: 1px solid var(--sidebar-border); padding-top: var(--s-2); }
    .app[data-collapsed] .sidebar-footer .menu { width: 14rem; }
  }

  /* Phone/tablet drawer */
  .scrim { display: none; }
  @media (max-width: 960px) {
    .sidebar, :root[data-sidebar="floating"] .sidebar {
      position: fixed; inset-block: 0; inset-inline-start: 0; top: 0; margin: 0; height: 100dvh; width: min(18rem, 86vw);
      border-radius: 0; border: 0; border-inline-end: 1px solid var(--sidebar-border); box-shadow: var(--shadow-2xl);
      transform: translateX(var(--drawer-x, -105%)); visibility: hidden;
      transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
    }
    :root[dir="rtl"] { --drawer-x: 105%; }
    .sidebar.is-open { transform: none !important; visibility: visible; transition: transform var(--dur-slow) var(--ease); }
    .scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1); background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease); }
    .scrim.is-open { opacity: 1; pointer-events: auto; }
    .nav-close { display: inline-flex; }
    :root[data-sidebar="inset"] .app { background: var(--background); }
  }

  /* Main column */
  .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--background); }
  :root[data-sidebar="inset"] .app-main { margin: var(--s-2); margin-inline-start: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); min-height: calc(100dvh - var(--s-4)); overflow: clip; }
  @media (max-width: 960px) { :root[data-sidebar="inset"] .app-main { margin: 0; border: 0; border-radius: 0; box-shadow: none; } }

  .app-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0;
    height: var(--header-h); padding-inline: var(--s-4);
    border-bottom: 1px solid var(--border);
  }
  /* The translucent blur lives on a pseudo-element: backdrop-filter on the header itself would make
     it the containing block for its position:fixed menus and offset them by the sidebar width. */
  .app-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--background) 85%, transparent); backdrop-filter: saturate(1.4) blur(8px); }
  .app-header .separator--vertical { margin-inline: var(--s-1); }
  .app-header-title { font-size: var(--text-base); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-header-actions { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }
  .drawer-toggle { display: none; }
  @media (max-width: 960px) { .drawer-toggle { display: inline-flex; } .sidebar-desktop-toggle { display: none; } .app-header { padding-inline: var(--s-2) var(--s-3); } }
  .header-search { display: none; }
  @media (max-width: 960px) { .header-search { display: inline-flex; } }

  .app-content {
    flex: 1; width: 100%; max-width: var(--content-max, 80rem); margin-inline: auto;
    padding: var(--page-py) var(--page-px) calc(var(--page-py) * 2);
    display: flex; flex-direction: column; gap: var(--section-gap);
    min-width: 0;
  }
  .app-content:focus { outline: none; }
  .content--narrow { --content-max: 48rem; }
  .content--settings { --content-max: 64rem; }
  .content--wide { --content-max: 96rem; }
}

/* --- styles/40-pages/admin.css --- */
/* Admin workspaces: settings sections, domains, scope pickers, tokens,
 * webhooks and resellers. Tokens only; logical properties. */
@layer pages {
  /* Settings: sticky section nav beside setting-row cards. */
  .settings-layout { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .settings-nav { position: sticky; top: calc(var(--header-h) + var(--s-5)); display: flex; flex-direction: column; gap: 1px; }
  .settings-nav > a { display: flex; align-items: center; min-height: 2rem; padding: var(--s-1_5) var(--s-2_5); border-radius: var(--radius-md); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: 500; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
  .settings-nav > a:hover { color: var(--foreground); background: var(--accent); }
  .settings-nav > a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .settings-nav > a[aria-current="true"] { color: var(--foreground); background: var(--accent); }
  @media (pointer: coarse) { .settings-nav > a { min-height: var(--hit); } }
  .settings-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
  .settings-section { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
  .settings-note { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--text-sm); color: var(--muted-foreground); }
  .settings-note > .icon { margin-top: .2em; flex-shrink: 0; }
  .settings-field .setting-title { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .settings-readonly { justify-content: center; align-items: flex-start; min-height: var(--control-h); }
  .settings-section .setting-row { padding-block: var(--s-4); }
  .setting-row--stack { grid-template-columns: 1fr; gap: var(--s-3); }
  .settings-meta { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.5; }
  .settings-meta-values { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
  .settings-meta-values bdi { color: var(--foreground); }
  .settings-field.is-invalid { background: color-mix(in srgb, var(--destructive) 4%, transparent); }

  .settings-advanced, .card-disclosure { border-top: 1px solid var(--border); }
  .settings-advanced > summary, .card-disclosure > summary { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--card-p); font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
  .settings-advanced > summary:hover, .card-disclosure > summary:hover { color: var(--foreground); background: color-mix(in srgb, var(--muted) 50%, transparent); }
  .settings-advanced > summary:focus-visible, .card-disclosure > summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
  .settings-advanced > summary::after, .card-disclosure > summary::after { content: ""; width: .45rem; height: .45rem; margin-inline-start: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); /* physical: the chevron is a rotated glyph, identical in RTL */ transition: transform var(--dur) var(--ease); }
  .settings-advanced[open] > summary::after, .card-disclosure[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .settings-advanced-body > .setting-row:first-child { border-top: 1px solid var(--border); }

  .settings-section-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--card-p); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 55%, transparent); font-size: var(--text-sm); color: var(--muted-foreground); }
  .settings-section-foot > p { flex: 1 1 16rem; }

  .settings-savebar { margin-top: 0; }
  .settings-save-status { display: flex; align-items: center; gap: var(--s-2_5); min-width: 0; }
  .settings-save-dot { color: var(--success); }
  .is-dirty .settings-save-dot { color: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); }
  .is-dirty .settings-savebar { border-color: color-mix(in srgb, var(--foreground) 25%, var(--border)); }

  @media (max-width: 960px) {
    .settings-layout { grid-template-columns: 1fr; gap: var(--s-4); }
    .settings-nav { top: var(--header-h); z-index: var(--z-sticky); flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--page-px) * -1); padding: var(--s-2) var(--page-px); background: var(--background); border-bottom: 1px solid var(--border); }
    .settings-nav::-webkit-scrollbar { display: none; }
    .settings-nav > a { flex-shrink: 0; white-space: nowrap; }
    .settings-section { scroll-margin-top: calc(var(--header-h) + 3.5rem); }
  }
}

@layer pages {
  /* Domains: one card per origin, certificate facts as key/value rows. */
  .domain-site > .card-content { flex: 1; }
  .domain-origin-empty { color: var(--muted-foreground); font-size: var(--text-sm); }
  .domain-fingerprint { border-bottom: 0; padding-bottom: var(--s-1); }
  .domain-fingerprint-value { display: block; padding: var(--s-1_5) var(--s-2); line-height: 1.6; }
  .domain-method[hidden] { display: none; }
  .domain-configure { display: flex; flex-direction: column; }
  .grid-2 > .domain-aside { display: contents; }
  .domain-aside > .card { min-width: 0; }
}

@layer pages {
  /* Scope picker: presets, then permission families as accordion groups. */
  .scope-picker { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
  .scope-picker > legend { margin-bottom: var(--s-1); }
  .scope-presets { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); flex-wrap: wrap; }
  .scope-presets > .field-description { flex: 1 1 18rem; }
  .scope-groups summary { min-height: var(--control-h); padding-block: var(--s-2); font-size: var(--text-sm); }
  .scope-groups summary > .badge { margin-inline-start: auto; }
  .scope-groups summary::after { margin-inline-start: var(--s-1); }
  .scope-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 2px var(--s-3); }
  .scope-groups .scope-list { padding: 0 var(--s-2) var(--s-2); gap: 2px var(--s-3); }
  .scope-list--flat { padding: var(--s-1_5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); max-height: 28rem; overflow-y: auto; }
  .scope-option { padding: var(--s-2); border-radius: var(--radius-md); transition: background-color var(--dur-fast) var(--ease); }
  .scope-option:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }
  .scope-option:has(input:checked) { background: color-mix(in srgb, var(--primary) 5%, transparent); }
  .scope-option-title { display: flex; align-items: baseline; gap: var(--s-1_5) var(--s-2); flex-wrap: wrap; font-size: var(--text-sm); font-weight: 500; }
  .scope-id { font-size: var(--text-2xs); font-weight: 400; color: var(--muted-foreground); }
  .scope-option--invalid { border: 1px dashed color-mix(in srgb, var(--destructive) 45%, var(--border)); }

  /* Scope / event chips in tables: first few inline, the rest on demand. */
  .scope-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-width: 0; max-width: 28rem; }
  .scope-chips > .badge { font-size: var(--text-2xs); }
  .scope-chips-more { display: contents; }
  .scope-chips-more > summary { cursor: pointer; }
  .scope-chips-more > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .scope-chips-more[open] > summary { display: none; }
  .scope-chips-more > .scope-chips { display: contents; }
  .token-revoked { opacity: .62; }

  /* One-time secret: success-tinted card, value in a copy field. */
  .secret-reveal { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); background: color-mix(in srgb, var(--success) 4%, var(--card)); }
  .secret-reveal .card-title > .icon { color: var(--success); }
  .secret-reveal .copy-field { background: var(--background); }
  .secret-reveal-foot { justify-content: space-between; }
  .secret-reveal-foot > p { flex: 1 1 16rem; }

  .hook-stats { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--text-xs); color: var(--muted-foreground); }
  .hook-stats > span { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; }
  .hook-stats .dot { width: .375rem; height: .375rem; }
}

@layer pages {
  .ops-time { white-space: nowrap; }
  @media (max-width: 800px) { .ops-time { white-space: normal; overflow-wrap: anywhere; align-self: flex-start; } }
}

@layer pages {
  .card-disclosure-body { padding: var(--s-1) var(--card-p) var(--card-p); }
  .card-disclosure > summary { color: var(--foreground); }
  .reseller-card > .reseller-scopes { padding-block: var(--s-3); }
  .reseller-card .scope-chips { max-width: none; }
  .reseller-card .card-description { overflow-wrap: anywhere; }
}

@layer pages {
  .reseller-carry { align-self: end; min-height: var(--control-h); align-items: center; }
}

@layer pages {
  /* Behaviour/test hooks that also carry layout. */
  .domain-fieldset { min-width: 0; }
  .domain-operation { min-width: 0; }
  .settings-secret-clear { width: fit-content; }
  .ops-scope-group { min-width: 0; }
}

/* --- styles/40-pages/appearance.css --- */
/* Appearance: the theme gallery. Each preview paints a miniature app from
   the preset's own swatch variables (--sw-*, generated into
   theme-swatches.css), so it shows the preset regardless of the active one. */
@layer pages {
  .preset-toolbar { justify-content: space-between; }
  .toolbar-hint { font-size: var(--text-xs); color: var(--muted-foreground); }

  .preset-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
  @media (max-width: 640px) { .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } }

  .preset-card, .layout-card {
    position: relative; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
    padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--card); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .preset-card:hover, .layout-card:hover { border-color: color-mix(in srgb, var(--foreground) 24%, var(--border)); }
  .preset-card:has(input:checked), .layout-card:has(input:checked) { border-color: var(--foreground); box-shadow: 0 0 0 1px var(--foreground); }
  .preset-card:has(input:focus-visible), .layout-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .preset-card[hidden] { display: none; }

  .preset-check { z-index: 1; }
  .preset-check {
    position: absolute; inset-block-start: var(--s-3); inset-inline-end: var(--s-3);
    display: none; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--foreground); color: var(--background);
  }
  .preset-check > .icon { width: .8rem; height: .8rem; stroke-width: 3; }
  :is(.preset-card, .layout-card):has(input:checked) .preset-check { display: grid; }

  .preset-meta { display: flex; flex-direction: column; gap: var(--s-0_5); padding: var(--s-0_5) var(--s-1) var(--s-1); min-width: 0; }
  .preset-name { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .preset-title { display: flex; align-items: center; gap: var(--s-1_5); min-width: 0; }
  .preset-flag { flex-shrink: 0; font-size: .6875rem; }
  @media (max-width: 640px) { .preset-title { flex-wrap: wrap; } .preset-name { flex-basis: 100%; } }
  .preset-axes { font-size: var(--text-xs); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Miniature app. Sizes are illustration geometry, not UI spacing. */
  .preset-preview {
    --pp-r: calc(var(--sw-radius, .5rem) * .6);
    display: grid; grid-template-columns: 27% minmax(0, 1fr); aspect-ratio: 16 / 10; overflow: hidden;
    border: 1px solid var(--sw-border, var(--border)); border-radius: calc(var(--radius-lg) - 3px);
    background: var(--sw-background, var(--background)); color: var(--sw-foreground, var(--foreground));
    font-family: var(--sw-font-sans, var(--font-sans));
  }
  .pp-sidebar { display: flex; flex-direction: column; gap: 5px; padding: 9px 7px; background: var(--sw-sidebar, var(--sidebar)); border-inline-end: 1px solid var(--sw-border, var(--border)); }
  .pp-sidebar > i { height: 5px; border-radius: 3px; background: var(--sw-muted, var(--muted)); }
  .pp-sidebar > i:first-child { width: 60%; margin-bottom: 4px; background: var(--sw-foreground, var(--foreground)); opacity: .85; }
  .pp-sidebar > i:nth-child(2) { background: var(--sw-accent, var(--accent)); box-shadow: inset 0 -1px 0 var(--sw-primary, var(--primary)); }
  .pp-main { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 0; }
  .pp-head { display: flex; align-items: center; justify-content: space-between; }
  .pp-type { font-size: .8125rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
  .pp-btn { width: 30%; height: 11px; border-radius: var(--pp-r); background: var(--sw-primary, var(--primary)); }
  .pp-card { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 7px; border: 1px solid var(--sw-border, var(--border)); border-radius: var(--pp-r); background: var(--sw-card, var(--card)); min-height: 0; }
  .pp-line { height: 4px; width: 72%; border-radius: 2px; background: var(--sw-muted-foreground, var(--muted-foreground)); opacity: .45; }
  .pp-line--short { width: 44%; opacity: .25; }
  .pp-chart { flex: 1; display: flex; align-items: flex-end; gap: 3px; margin-top: 2px; min-height: 0; }
  .pp-chart > i { flex: 1; border-radius: 2px 2px 0 0; background: var(--sw-chart-1, var(--chart-1)); }
  .pp-chart > i:nth-child(1) { height: 40%; }
  .pp-chart > i:nth-child(2) { height: 72%; background: var(--sw-chart-2, var(--chart-2)); }
  .pp-chart > i:nth-child(3) { height: 55%; }
  .pp-chart > i:nth-child(4) { height: 92%; background: var(--sw-chart-3, var(--chart-3)); }
  .pp-chart > i:nth-child(5) { height: 64%; }
  /* Layout axes, so each card also shows its composition. */
  .preset-preview[data-layout="inset"] .pp-sidebar { border-inline-end: 0; }
  .preset-preview[data-layout="inset"] .pp-main { margin-block: 4px; margin-inline-end: 4px; border: 1px solid var(--sw-border, var(--border)); border-radius: var(--pp-r); background: var(--sw-background, var(--background)); }
  .preset-preview[data-layout="inset"] { background: var(--sw-sidebar, var(--sidebar)); }
  .preset-preview[data-layout="floating"] .pp-sidebar { margin: 4px; border: 1px solid var(--sw-border, var(--border)); border-radius: var(--pp-r); }

  /* Subscription designs: a schematic thumbnail per design (five <i> parts). */
  .layout-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
  @media (max-width: 640px) { .layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } }
  .layout-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s-1) var(--s-1); min-width: 0; }
  .layout-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1_5); font-size: var(--text-sm); font-weight: 500; }
  .layout-hint { font-size: var(--text-xs); color: var(--muted-foreground); }
  .layout-thumb { position: relative; display: grid; gap: 4px; height: 5.75rem; padding: .6rem; overflow: hidden; border-radius: var(--radius-md); background: var(--muted); }
  .layout-thumb > i { display: block; min-width: 0; border-radius: 3px; background: color-mix(in srgb, var(--foreground) 14%, transparent); }
  .layout-card:has(input:checked) .layout-thumb { background: color-mix(in srgb, var(--primary) 10%, var(--muted)); }

  .layout-thumb[data-layout="ticket"] { grid-template-columns: minmax(0, 1fr) 1.75rem; gap: 0; }
  .layout-thumb[data-layout="ticket"] > i:nth-child(1) { grid-area: 1 / 1; border: 1px solid var(--border); border-radius: 6px 0 0 6px; background: var(--card); }
  .layout-thumb[data-layout="ticket"] > i:nth-child(2) { grid-area: 1 / 2; border: 1px solid var(--border); border-inline-start: 1.5px dashed var(--border); border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--primary) 16%, var(--card)); }
  :root[dir="rtl"] .layout-thumb[data-layout="ticket"] > i:nth-child(1) { border-radius: 0 6px 6px 0; }
  :root[dir="rtl"] .layout-thumb[data-layout="ticket"] > i:nth-child(2) { border-radius: 6px 0 0 6px; }
  .layout-thumb[data-layout="ticket"] > i:nth-child(n+3) { position: absolute; inset-inline-start: 1.1rem; height: 5px; background: color-mix(in srgb, var(--foreground) 22%, transparent); }
  .layout-thumb[data-layout="ticket"] > i:nth-child(3) { top: 1.2rem; width: 38%; height: 7px; background: color-mix(in srgb, var(--foreground) 55%, transparent); }
  .layout-thumb[data-layout="ticket"] > i:nth-child(4) { top: 2.25rem; width: 48%; }
  .layout-thumb[data-layout="ticket"] > i:nth-child(5) { bottom: 1.2rem; width: 52%; height: 3px; background: var(--primary); }

  .layout-thumb[data-layout="card"] { place-items: center; }
  .layout-thumb[data-layout="card"] > i:nth-child(1) { grid-area: 1 / 1; width: 6.5rem; aspect-ratio: 1.586; border-radius: 6px; background: var(--primary); background: linear-gradient(135deg, var(--primary) 10%, oklch(from var(--primary) l c calc(h + 40))); box-shadow: var(--shadow-md); }
  .layout-thumb[data-layout="card"] > i:nth-child(2) { grid-area: 1 / 1; width: 1rem; height: .75rem; margin: 0 4.4rem 1.5rem 0; border-radius: 2px; background: color-mix(in srgb, var(--primary-foreground) 70%, transparent); }
  .layout-thumb[data-layout="card"] > i:nth-child(3) { grid-area: 1 / 1; width: 3rem; height: 4px; margin: 1.6rem 2.6rem 0 0; background: color-mix(in srgb, var(--primary-foreground) 75%, transparent); }
  :root[dir="rtl"] .layout-thumb[data-layout="card"] > i:nth-child(2) { margin: 0 0 1.5rem 4.4rem; }
  :root[dir="rtl"] .layout-thumb[data-layout="card"] > i:nth-child(3) { margin: 1.6rem 0 0 2.6rem; }
  .layout-thumb[data-layout="card"] > i:nth-child(n+4) { display: none; }

  .layout-thumb[data-layout="minimal"] { align-content: start; gap: 6px; padding: .8rem; background: var(--card); border: 1px solid var(--border); }
  .layout-thumb[data-layout="minimal"] > i:nth-child(1) { width: 45%; height: 9px; background: color-mix(in srgb, var(--foreground) 60%, transparent); }
  .layout-thumb[data-layout="minimal"] > i:nth-child(2) { width: 70%; height: 4px; }
  .layout-thumb[data-layout="minimal"] > i:nth-child(3) { width: 100%; height: 3px; margin-top: 6px; background: linear-gradient(90deg, var(--primary) 40%, color-mix(in srgb, var(--foreground) 12%, transparent) 40%); }
  .layout-thumb[data-layout="minimal"] > i:nth-child(n+4) { width: 100%; height: 1px; margin-top: 7px; }

  .layout-thumb[data-layout="portal"] { grid-template-columns: repeat(2, 2.1rem); justify-content: center; align-content: center; gap: 6px 10px; }
  .layout-thumb[data-layout="portal"] > i:nth-child(1) { grid-column: 1 / -1; justify-self: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--primary); }
  .layout-thumb[data-layout="portal"] > i:nth-child(2), .layout-thumb[data-layout="portal"] > i:nth-child(3) { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: conic-gradient(var(--primary) 0 62%, color-mix(in srgb, var(--foreground) 12%, transparent) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 3px)); }
  .layout-thumb[data-layout="portal"] > i:nth-child(3) { background: conic-gradient(var(--primary) 0 35%, color-mix(in srgb, var(--foreground) 12%, transparent) 0); }
  .layout-thumb[data-layout="portal"] > i:nth-child(4) { position: absolute; inset-inline: 22%; bottom: 6px; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--foreground) 18%, transparent); }
  .layout-thumb[data-layout="portal"] > i:nth-child(5) { display: none; }

  .savebar-text { display: flex; flex-direction: column; gap: var(--s-0_5); min-width: 0; }
  .savebar-title { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .savebar-hint { font-size: var(--text-xs); color: var(--muted-foreground); }
  .savebar-hint[data-state="dirty"] { color: var(--warning); }
  @media (max-width: 640px) { .savebar { padding: var(--s-2) var(--s-3); } .savebar-hint { display: none; } }

  .setting-control--inline { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .setting-control--inline > .select { flex: 1 1 12rem; }
}

/* --- styles/40-pages/auth.css --- */
/* Access surfaces: sign-in, first-run owner setup and error pages. */
@layer pages {
  .auth-card { gap: var(--s-5); }
  .auth-heading > .badge { margin-bottom: var(--s-1); }
  .auth-panel { box-shadow: var(--shadow-sm); }
  .auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
  .auth-form > .btn--block { margin-top: var(--s-1); }
  .auth-optional > summary { min-height: var(--control-h); padding-block: var(--s-2); font-size: var(--text-sm); }
  .auth-optional > .collapsible-content { padding-top: 0; }
  .auth-note { text-align: center; font-size: var(--text-xs); color: var(--muted-foreground); text-wrap: balance; }

  /* Password reveal: one eye glyph at a time, following aria-pressed. */
  [data-toggle-password] > .icon + .icon { display: none; }
  [data-toggle-password][aria-pressed="true"] > .icon:first-child { display: none; }
  [data-toggle-password][aria-pressed="true"] > .icon + .icon { display: block; }
  .password-field > .btn--sm { top: calc((var(--control-h) - var(--control-h-sm)) / 2); inset-inline-end: calc((var(--control-h) - var(--control-h-sm)) / 2); width: var(--control-h-sm); height: var(--control-h-sm); }

  /* Error surface: an empty-state composition in every layout. */
  .surface-error { min-height: min(24rem, 60dvh); }
  .surface-error:focus { outline: none; }
  .surface-error > .badge { margin-bottom: var(--s-1); }
  .surface-error > .empty-title { font-size: var(--text-xl); }
  :root:not([lang="fa"]) .surface-error > .empty-title { letter-spacing: -0.02em; }
}

/* --- styles/40-pages/interfaces.css --- */
/* Interfaces workspace: list facts, pool editor and the obfuscation card. */
@layer pages {
  .ifaces-table td { white-space: nowrap; }
  .ifaces-table td.cell-primary { min-width: 9rem; }
  .iface-pools { display: flex; flex-wrap: wrap; gap: var(--s-0_5) var(--s-2); }

  /* Header actions (mode toggle, obfuscation switch) drop below the title on phones. */
  @media (max-width: 640px) {
    .iface-form .card-header { grid-template-columns: minmax(0, 1fr); }
    .iface-form .card-action { grid-column: 1; grid-row: auto; }
  }

  .pool-usage { border-block: 1px solid var(--border); }
  .pool-add { display: flex; align-items: flex-end; gap: var(--s-2); flex-wrap: wrap; }
  .pool-add > .field { flex: 1 1 16rem; }
  [data-pool-status]:empty { display: none; }

  .obf-switch { align-items: center; white-space: nowrap; }
  .obf-presets > .choice-card { text-align: start; width: 100%; }
  .obf-presets > .choice-card .icon { color: var(--muted-foreground); }
  .obf-presets > .choice-card[aria-pressed="true"] .icon { color: var(--foreground); }
  .obf-presets > .choice-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  [data-obf-box][aria-busy="true"] .obf-presets { opacity: .65; cursor: progress; }
  .obf-note { align-items: flex-start; }
  .obf-note > .icon { margin-top: 2px; }

  /* Parameter disclosure is the card's last region, flush with its edges. */
  .obf-card > .obf-params { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; margin-block-end: calc(var(--card-p) * -1); }
  .obf-card > .obf-params > summary { padding-inline: var(--card-p); border-end-start-radius: var(--radius-xl); border-end-end-radius: var(--radius-xl); }
  .obf-card > .obf-params[open] > summary { border-radius: 0; }
  .obf-card > .obf-params > .collapsible-content { padding: var(--s-2) var(--card-p) var(--card-p); gap: var(--s-6); }
  .obf-headers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 900px) { .obf-headers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}
@layer pages {
  /* Three section tabs fit a 320px phone once their icons are dropped. */
  @media (max-width: 480px) { .iface-form .tabs .tab > .icon { display: none; } }
}
@layer pages {
  /* Phone cards stack label over value; numeric columns stay start-aligned there. */
}

/* --- styles/40-pages/operations.css --- */
/* Operations workspaces: backups, cleanup, audit log, updates/maintenance
 * and system health. Compositions only; components come from 20-components. */
@layer pages {
  /* Nested page stacks (maintenance, live status region) keep the shell rhythm. */
  .ops-page { display: flex; flex-direction: column; gap: var(--section-gap); min-width: 0; }
  .ops-page:empty { display: none; }
  .ops-align-start { align-items: start; }
  .ops-loading { align-items: center; color: var(--muted-foreground); }
  .ops-panel-title { font-size: var(--text-sm); font-weight: 600; }
  .ops-stat-text { font-size: var(--text-md); letter-spacing: 0; min-height: 1.75rem; align-items: center; }
  .ops-version { font-size: var(--text-lg); letter-spacing: 0; overflow-wrap: anywhere; }
  .ops-archive-name { overflow-wrap: anywhere; white-space: normal; }
  .ops-menu-hint { padding: var(--s-2) var(--s-2) var(--s-1); border-top: 1px solid var(--border); margin-top: var(--s-1); }
  .ops-bullets { display: flex; flex-direction: column; gap: var(--s-1); padding-inline-start: var(--s-4); list-style: disc; }

  /* Receipt: the progress spinner takes the alert icon slot. */
  .operation-receipt > .spinner { grid-row: span 2; margin-top: 2px; color: var(--alert-tone); }

  /* Numbered guidance steps. */
  .ops-steps { counter-reset: ops-step; display: flex; flex-direction: column; gap: var(--s-2_5); }
  .ops-steps > li { counter-increment: ops-step; display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-2_5); align-items: start; font-size: var(--text-sm); line-height: 1.55; }
  .ops-steps > li::before {
    content: counter(ops-step); display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; margin-top: 1px; border: 1px solid var(--border); border-radius: var(--radius-full);
    font-family: var(--font-code); font-size: var(--text-2xs); color: var(--muted-foreground);
  }

  /* Operation timeline: hairline rail with state markers. */
  .ops-timeline { display: flex; flex-direction: column; position: relative; }
  .ops-timeline-step { position: relative; display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-3); padding-bottom: var(--s-3); }
  .ops-timeline-step:last-child { padding-bottom: 0; }
  .ops-timeline-step:not(:last-child)::before { content: ""; position: absolute; inset-block: 1.5rem 0; inset-inline-start: calc(.75rem - .5px); width: 1px; background: var(--border); }
  .ops-timeline-marker {
    display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
    border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card); color: var(--muted-foreground);
  }
  .ops-timeline-marker > .icon { width: .75rem; height: .75rem; }
  .ops-timeline-marker > .spinner { width: .75rem; height: .75rem; color: var(--info); }
  .ops-timeline-step[data-state="succeeded"] .ops-timeline-marker { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); background: color-mix(in srgb, var(--success) 8%, var(--card)); }
  .ops-timeline-step[data-state="failed"] .ops-timeline-marker { color: var(--destructive-text); border-color: color-mix(in srgb, var(--destructive) 35%, var(--border)); background: color-mix(in srgb, var(--destructive) 8%, var(--card)); }
  .ops-timeline-step[data-state="running"] .ops-timeline-marker { border-color: color-mix(in srgb, var(--info) 35%, var(--border)); }
  .ops-timeline-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 2px; }
  .ops-timeline-title { font-size: var(--text-sm); font-weight: 500; }
  .ops-timeline-meta { font-size: var(--text-xs); color: var(--muted-foreground); }
  .ops-timeline--compact .ops-timeline-step { padding-bottom: var(--s-2); }

  /* Maintenance history rows (accordion summaries). */
  .ops-history summary { min-height: 0; padding-block: var(--s-2_5); }
  .ops-history-row { display: flex; align-items: center; gap: var(--s-3); min-width: 0; flex: 1; flex-wrap: wrap; }
  .ops-history-title { font-weight: 500; }
  .ops-history-time { margin-inline-start: auto; }

  /* Release browser: a dense list with a status rail, filters above. */
  .ops-release-browser > summary { display: none; }
  @media (max-width: 800px) {
    .ops-release-browser > summary {
      display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-h-lg);
      padding: var(--s-2) var(--card-p); border-top: 1px solid var(--border); font-weight: 500; font-size: var(--text-sm);
    }
    .ops-release-browser > summary::after { content: ""; width: .5rem; height: .5rem; margin-inline-start: auto; border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur) var(--ease); }
    .ops-release-browser[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
    .ops-release-browser > summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
  }
  .ops-release-toolbar { padding: var(--s-3) var(--card-p); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 40%, transparent); }
  .ops-release-note { padding: var(--s-3) var(--card-p) 0; }
  .ops-release-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
  .ops-release-list > li + li { border-top: 1px solid var(--border); }
  .ops-release { padding-inline: var(--card-p); padding-block: var(--s-2_5); }
  .ops-release[aria-current="true"] { background: color-mix(in srgb, var(--primary) 4%, transparent); }
  .ops-release:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
  [data-release-list][data-density="compact"] .ops-release { padding-block: var(--s-1); }
  [data-release-list][data-density="compact"] .ops-release .item-description { display: none; }
  .ops-release-mark { align-self: stretch; width: 2px; border-radius: 2px; background: var(--border); flex-shrink: 0; }
  .ops-release-mark.is-installed { background: var(--success); }
  .ops-release-mark.is-newer { background: var(--info); }
  .ops-release[aria-current="true"] .ops-release-mark { background: var(--foreground); }
  .ops-release-footer { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2_5) var(--card-p); border-top: 1px solid var(--border); }
  .ops-release-footer .pagination { flex-wrap: nowrap; }
  @media (max-width: 640px) { .ops-release { flex-wrap: nowrap; } .ops-release .item-actions { margin-inline-start: 0; } }

  .ops-core-options { display: grid; gap: var(--s-3); padding-block: var(--card-p); border-top: 1px solid var(--border); }
  .ops-core-option[aria-current="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary) 4%, var(--card)); }
  .ops-core-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .ops-core-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--text-xs); }

  /* Version transition: from → to. */
  .ops-transition { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-2); }
  .ops-transition > .icon { color: var(--muted-foreground); }
  .ops-transition-end { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); }
  .ops-transition-end > .tech { overflow-wrap: anywhere; font-weight: 500; }
  .ops-notes { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.6; max-height: 18rem; overflow: auto; }

  /* Audit log: filter bar + dense event rows with expandable detail. */
  .audit-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: start; }
  .audit-filters-actions { display: flex; gap: var(--s-2); padding-top: calc(var(--text-sm) * 1.3 + var(--s-2)); }
  @media (max-width: 720px) { .audit-filters { grid-template-columns: 1fr; } .audit-filters-actions { padding-top: 0; } }

  .audit-log { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; }
  .audit-log-head, .audit-entry-summary {
    display: grid; grid-template-columns: 12rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 1.5rem;
    gap: var(--s-4); align-items: center; padding-inline: var(--cell-px);
  }
  .audit-log-head { height: 2.25rem; font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); background: color-mix(in srgb, var(--muted) 55%, transparent); border-bottom: 1px solid var(--border); }
  .audit-entry + .audit-entry { border-top: 1px solid var(--border); }
  .audit-entry-summary { padding-block: var(--s-2); min-height: 2.75rem; transition: background-color var(--dur-fast) var(--ease); }
  .audit-entry-summary:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }
  .audit-entry-summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
  .audit-entry > details[open] > .audit-entry-summary { background: color-mix(in srgb, var(--muted) 45%, transparent); }
  .audit-entry-time { font-size: var(--text-xs); color: var(--muted-foreground); white-space: nowrap; }
  .audit-entry-action { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .audit-entry-title { font-weight: 500; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .audit-entry-code { font-size: var(--text-2xs); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .audit-entry-actor, .audit-entry-target { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--text-sm); }
  .audit-entry-target { color: var(--muted-foreground); }
  .audit-entry-actor > .tech { font-size: var(--text-xs); color: var(--muted-foreground); }
  .audit-entry-toggle { display: inline-flex; justify-content: center; color: var(--muted-foreground); }
  .audit-entry-toggle > .icon { transition: transform var(--dur) var(--ease); }
  .audit-entry > details[open] .audit-entry-toggle > .icon { transform: rotate(180deg); }
  .audit-entry-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-4); padding: var(--s-3) var(--cell-px) var(--s-4); border-top: 1px dashed var(--border); background: color-mix(in srgb, var(--muted) 25%, transparent); }
  .audit-entry-detail > :only-child { grid-column: 1 / -1; }
  .audit-entry-facts { font-size: var(--text-sm); grid-template-columns: minmax(6rem, max-content) 1fr; gap: var(--s-1_5) var(--s-4); align-content: start; }
  .audit-entry-facts > dd.cluster { flex-wrap: nowrap; gap: var(--s-1); }
  .audit-json { max-height: 18rem; }
  @media (max-width: 900px) {
    .audit-log-head { display: none; }
    .audit-entry-summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "action toggle" "actor time" "target target"; gap: var(--s-1) var(--s-3); padding-block: var(--s-2_5); }
    .audit-entry-action { grid-area: action; }
    .audit-entry-toggle { grid-area: toggle; }
    .audit-entry-actor { grid-area: actor; }
    .audit-entry-time { grid-area: time; justify-self: end; }
    .audit-entry-target { grid-area: target; font-size: var(--text-xs); }
    .audit-entry-target:has(> [aria-hidden="true"]:only-child) { display: none; }
    .audit-entry-detail { grid-template-columns: 1fr; }
  }
}
@layer pages {
  /* LTR codes inside RTL flex columns hug the reading start edge. */
  .audit-entry-action > .tech, .ops-timeline-body > .tech { align-self: flex-start; max-width: 100%; }
  .backup-summary-grid > .stat > .stat-meta { line-height: 1.5; }
  @media (max-width: 640px) { .backup-summary-grid > .stat > .stat-meta { display: none; } .backup-summary-grid > .stat { padding-block: var(--s-3); } }
}
@layer pages {
  @media (max-width: 900px) { .audit-entry-toggle { justify-self: end; } }
}
@layer pages {
  .alert-description > .code { align-self: flex-start; }
}
@layer pages {
  .ops-page > .toggle-group { align-self: flex-start; }
}
@layer pages {
  .ops-checks .kv-label { flex-shrink: 1; min-width: 0; }
  .ops-checks .badge { white-space: normal; height: auto; min-height: 1.375rem; text-align: start; line-height: 1.2; padding-block: 2px; }
}

/* --- styles/40-pages/plans.css --- */
/* Templates workspace: compact limit columns and unit selectors joined to
 * numeric inputs (GB/MB, days/hours/months). Shared by the interface form. */
@layer pages {
  .plans-table td { white-space: nowrap; }
  .plans-table td.cell-primary { white-space: normal; min-width: 12rem; }
  .plan-rate { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
  .plan-rate .icon { color: var(--muted-foreground); }

  /* Trailing unit selector inside an input group. */
  .input-group > .select.unit-select {
    flex: 0 0 auto; width: auto; min-width: 5.5rem;
    border-inline-start: 1px solid var(--input); border-radius: 0;
    border-start-end-radius: calc(var(--radius-md) - 1px); border-end-end-radius: calc(var(--radius-md) - 1px);
    background-color: var(--muted);
    font-size: var(--text-sm);
  }
}

/* --- styles/40-pages/qr.css --- */
/* Device QR dialog — shared by the panel (users) and the public subscription
 * page. qr.js toggles dialog--sm / dialog--lg and creates .qr-all-card. */
@layer pages {
  .qr-single { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
  .qr-frame {
    position: relative; display: grid; place-items: center; gap: var(--s-2);
    width: min(100%, 18rem); aspect-ratio: 1; padding: var(--s-3);
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--muted);
  }
  .qr-frame > img { width: 100%; height: auto; border-radius: var(--radius-sm); }
  .qr-state { font-size: var(--text-sm); color: var(--muted-foreground); text-align: center; }
  .qr-state:empty { display: none; }
  .qr-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
  .qr-all-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin: 0;
    padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
  }
  .qr-all-card > figcaption { font-size: var(--text-sm); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qr-all-card > img { width: 100%; height: auto; border-radius: var(--radius-sm); }
}

/* --- styles/40-pages/routing.css --- */
/* Routing workspace: rule rows ("match → target"), targets and outbound cards. */
@layer pages {
  .routing-target { display: inline-flex; align-items: center; gap: var(--s-1_5); height: 1.5rem; padding-inline: var(--s-2); border-radius: var(--radius-sm); background: var(--secondary); color: var(--secondary-foreground); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; max-width: 100%; }
  .routing-target > bdi { overflow: hidden; text-overflow: ellipsis; }
  .routing-target[data-target="direct"] { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); }
  .routing-target[data-target="block"] { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive-text); }
  .routing-target[data-target="balancer"] { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); }
  .routing-arrow { display: inline-flex; color: var(--muted-foreground); }

  .rule-list { counter-reset: none; }
  .rule-row { align-items: center; }
  .rule-index { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--muted-foreground); font-size: var(--text-xs); }
  .rule-flow { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); min-width: 0; }
  .rule-match { display: inline-flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; min-width: 0; }
  .rule-default { background: color-mix(in srgb, var(--muted) 60%, transparent); }
  .rule-default-form { display: flex; align-items: center; gap: var(--s-3); width: 100%; flex-wrap: wrap; }
  .rule-default-form > .item-content { flex: 1 1 14rem; }
  .rule-default-controls { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
  .rule-default-controls > .select { width: auto; min-width: 12rem; max-width: 100%; }
  .rule-empty { justify-content: center; }
  .rule-empty > .empty { width: 100%; }
  @media (max-width: 640px) {
    .rule-row { align-items: flex-start; }
    .rule-row > .item-actions { width: 100%; justify-content: flex-end; border-top: 1px dashed var(--border); padding-top: var(--s-2); }
    .rule-default-controls { width: 100%; }
    .rule-default-controls > .select { flex: 1; min-width: 0; }
  }

  .outbound-card.is-disabled { opacity: .7; }
  .outbound-card .card-footer { justify-content: space-between; }
  .outbound-card .card-footer > p { flex: 1; }
  .routing-check { align-items: center; }

  .member-row .input { width: 4.5rem; }
}
@layer pages {
  /* The per-connection note only matters for strategies that rotate exits. */
  .routing-per-connection { display: none; }
  .strategy-section:has(input[name=strategy][value=round_robin]:checked, input[name=strategy][value=random]:checked, input[name=strategy][value=least_conn]:checked) .routing-per-connection { display: grid; }
  .balancer-card.is-disabled { opacity: .7; }
  .member-item { padding-block: var(--s-2); }
  fieldset.card > .card-header { padding-top: 0; }
}
@layer pages {
  .step { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-full); background: var(--primary); color: var(--primary-foreground); font-size: var(--text-2xs); font-weight: 600; font-family: var(--font-code); }
  .routing-category-cloud { display: flex; flex-wrap: wrap; gap: var(--s-1); max-height: 14rem; overflow: auto; }
}
@layer pages {
  .outbound-card > .card-content.kv { flex: 1; }
  .balancer-card > ol.card-content { flex: 1; }
}

/* --- styles/40-pages/sub-base.css --- */
/* Public subscription page (sub-base sorts before every sub-<layout>.css, so a
 * design overrides it at equal specificity): the body every design shares (notice, section tabs,
 * devices, the accordion setup guide, details). Each design's hero lives in
 * sub-<layout>.css and is scoped to .sub--<layout> / body[data-sub-layout]. */
@layer pages {
  .sub { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
  .sub-preview-note { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px dashed var(--border); border-radius: var(--radius-lg); font-size: var(--text-xs); color: var(--muted-foreground); }

  /* Latin number + localized unit (never one bidi run). */
  .sub-qty { display: inline-flex; align-items: baseline; gap: .3em; }
  .sub-qty-unit { font-size: .6em; color: var(--muted-foreground); font-weight: 500; letter-spacing: 0; }
  .sub-value-text { font-size: var(--text-base); font-weight: 500; }

  /* Data and time meters, shared by every hero. */
  .sub-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); }
  @media (max-width: 480px) { .sub-meters { grid-template-columns: minmax(0, 1fr); } }
  .sub-meter { display: flex; flex-direction: column; gap: var(--s-1_5); min-width: 0; }
  .sub-meter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--text-xs); color: var(--muted-foreground); }
  .sub-meter-head > span:first-child { display: inline-flex; align-items: center; gap: var(--s-1); }
  .sub-meter-note { font-variant-numeric: tabular-nums; }

  /* Section tabs: CSS radio tabs (inputs precede labels), panels via :has(). On
   * phones the tab row sticks under the header so sections stay one tap away. */
  .sub-sections { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
  .sub-tabs-picker { min-width: 0; }
  @media (max-width: 640px) {
    .sub-tabs-picker { position: sticky; top: var(--header-h); z-index: var(--z-sticky); margin-inline: calc(var(--s-4) * -1); padding: var(--s-1) var(--s-4) 0; background: var(--background); }
    .sub-tabs > .tab { flex: 1 1 0; }
  }
  .sub-panel { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; scroll-margin-top: calc(var(--header-h) + 4rem); }
  .sub-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
  .sub-panel-heading { display: flex; flex-direction: column; gap: var(--s-0_5); min-width: 0; }
  .sub-panel-title { font-size: var(--text-md); font-weight: 600; }
  .sub-panel-description { font-size: var(--text-sm); color: var(--muted-foreground); }
  @supports selector(:has(*)) {
    .sub-panel { display: none; }
    .sub-sections:has(#sub-tab-connect:checked) > [data-panel="connect"],
    .sub-sections:has(#sub-tab-guide:checked) > [data-panel="guide"],
    .sub-sections:has(#sub-tab-details:checked) > [data-panel="details"] { display: flex; }
    /* The selected tab already names the panel. */
    .sub-panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  @supports not selector(:has(*)) { .sub-tabs-picker { display: none; } }

  /* Devices */
  .sub-device-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s-3); }
  .sub-device { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--card-shadow); }
  .sub-device-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
  .sub-device-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: var(--muted); color: var(--foreground); }
  .sub-device-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sub-device-name { font-size: var(--text-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sub-device-meta { display: flex; flex-wrap: wrap; column-gap: var(--s-1_5); font-size: var(--text-xs); color: var(--muted-foreground); }
  .sub-device-meta > * + *::before { content: "·"; margin-inline-end: var(--s-1_5); opacity: .7; }
  /* The customer's primary actions stay at least 36px under every density. */
  /* Download spans the row; QR and Copy key pair up; the AmneziaVPN hand-off
   * (the longest label) takes its own row. */
  .sub-device-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--s-2); }
  .sub-device-actions > .sub-handoff { grid-column: 1 / -1; }
  .sub-device-actions > .btn { width: 100%; min-width: 0; height: max(var(--control-h), 2.25rem); }
  .sub-device-actions > .btn > span { overflow: hidden; text-overflow: ellipsis; }
  .sub-device-actions > .btn--primary { grid-column: 1 / -1; }
  .sub-device-note { display: flex; align-items: flex-start; gap: var(--s-1_5); font-size: var(--text-xs); color: var(--muted-foreground); }
  .sub-device-note > .icon { margin-top: 2px; }
  .sub-device-note--warning { color: var(--warning); }
  .sub-device-state { font-size: var(--text-xs); color: var(--muted-foreground); }
  .sub-device-state:empty { display: none; }
  .sub-device-state[role="alert"] { color: var(--destructive-text); }

  /* Setup guide: platform radio tabs, then one accordion item per app (the
   * recommended app open). Without :has() every platform is listed. */
  .sub-os { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
  .sub-os-picker { min-width: 0; }
  @media (max-width: 480px) {
    .sub-os-tabs > .tab { padding-inline: var(--s-2); }
    .sub-os-tabs > .tab > .icon { display: none; }
  }
  .sub-os-panel { display: flex; flex-direction: column; gap: var(--s-3); }
  .sub-os-title { display: none; align-items: center; gap: var(--s-2); font-size: var(--text-base); }
  @supports not selector(:has(*)) {
    .sub-os-picker { display: none; }
    .sub-os-title { display: flex; }
  }
  @supports selector(:has(*)) {
    .sub-os-panel { display: none; }
    .sub-os:has(#os-android:checked) > [data-os="android"],
    .sub-os:has(#os-ios:checked) > [data-os="ios"],
    .sub-os:has(#os-windows:checked) > [data-os="windows"],
    .sub-os:has(#os-macos:checked) > [data-os="macos"],
    .sub-os:has(#os-linux:checked) > [data-os="linux"] { display: flex; }
  }
  .sub-app > summary { align-items: flex-start; justify-content: flex-start; gap: var(--s-3); padding-block: var(--s-3_5, var(--s-3)); }
  .sub-app-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
  .sub-app[open] .sub-app-icon { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
  .sub-app-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-weight: 600; }
  .sub-app .accordion-content { padding-inline-start: calc(var(--s-4) + 2.25rem + var(--s-3)); }
  @media (max-width: 480px) { .sub-app .accordion-content { padding-inline-start: var(--s-4); } }
  .sub-steps { display: flex; flex-direction: column; gap: var(--s-2_5); counter-reset: sub-step; font-size: var(--text-sm); }
  .sub-steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--s-2_5); counter-increment: sub-step; }
  .sub-steps > li::before {
    content: counter(sub-step); grid-row: span 2;
    display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-top: .1em;
    border-radius: var(--radius-full); background: var(--muted);
    font-size: var(--text-2xs); font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums;
  }
  .sub-step-links { display: flex; flex-wrap: wrap; gap: var(--s-1_5); margin-top: var(--s-1_5); }
  .sub-step-links:empty { display: none; }
  /* Copyable command/path in a step (copy-field anatomy; LTR value). */
  .sub-command { display: flex; margin-top: var(--s-1_5); max-width: 32rem; }
  .sub-command > code { user-select: all; }
  .sub-command > .btn:not([data-copied]) > .icon + .icon, .sub-command > .btn[data-copied] > .icon:first-child { display: none; }
  .sub-command > .btn[data-copied] { color: var(--success); }

  .sub-faq { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }
  .sub-faq-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); font-weight: 600; }
  .sub-faq .accordion-content > p { font-size: var(--text-sm); color: var(--muted-foreground); }

  /* Details */
  .sub-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--s-3); }
  .sub-detail-card { gap: var(--s-2); padding: var(--s-4); }
  .sub-detail-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); font-weight: 600; }
  .sub-detail-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); font-size: var(--text-sm); }
  .sub-detail-list > div + div { border-top: 1px solid var(--border); }
  .sub-detail-list dt { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--muted-foreground); }
  .sub-detail-list dd { font-weight: 500; text-align: end; min-width: 0; }

  .sub-note { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--text-xs); color: var(--muted-foreground); }
  .sub-note > .icon { margin-top: 2px; }

  /* Visitor page-style picker: every preset stays inside the viewport and
   * scrolls. ui.js writes an inline max-height for every menu; this one is shorter. */
  .sub-preset-menu { min-width: 13rem; max-height: min(26rem, calc(100dvh - var(--header-h) - var(--s-6))) !important; overscroll-behavior: contain; }

  /* Status tone for hero seals and rings: one mapping for every design. */
  .sub [data-status] { --status-tone: var(--warning); }
  .sub [data-status="active"] { --status-tone: var(--success); }
  .sub [data-status="waiting_first_connection"] { --status-tone: var(--info); }
  .sub [data-status="expired"], .sub [data-status="traffic_exceeded"] { --status-tone: var(--destructive); }
}

/* --- styles/40-pages/sub-designs/card.css --- */
/* Subscription design "card": a membership card in the theme's primary color
 * beside the usage tiles. The gradient keeps the primary's lightness (relative
 * oklch, hue shift only) so primary-foreground keeps its contrast; browsers
 * without relative colors show the solid primary. */
@layer pages {
  .member { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
  @media (max-width: 720px) { .member { grid-template-columns: minmax(0, 1fr); } }
  .member-card {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3);
    aspect-ratio: 1.586; width: 100%; max-width: 26rem; justify-self: center; padding: var(--s-5);
    border-radius: calc(var(--radius-xl) + .25rem); color: var(--primary-foreground);
    background: var(--primary);
    background: linear-gradient(135deg, var(--primary) 10%, oklch(from var(--primary) l c calc(h + 40)));
    box-shadow: var(--shadow-xl);
  }
  /* Light sheen and a faint guilloche ring: decoration only. */
  .member-card::before { content: ""; position: absolute; z-index: -1; inset: -45% -25% auto auto; width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary-foreground) 24%, transparent), transparent 68%); }
  .member-card::after { content: ""; position: absolute; z-index: -1; inset: auto auto -55% -30%; width: 90%; aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--primary-foreground) 16%, transparent); box-shadow: 0 0 0 1.25rem color-mix(in srgb, var(--primary-foreground) 5%, transparent); }
  .member-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .member-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); font-weight: 600; }
  .member-mark { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-foreground) 18%, transparent); }
  .member-card .sub-status { background: color-mix(in srgb, var(--primary-foreground) 16%, transparent); color: var(--primary-foreground); border-color: transparent; }
  .member-chip {
    width: 2.75rem; height: 2rem; border-radius: .45rem;
    background:
      linear-gradient(90deg, transparent 32%, color-mix(in srgb, var(--primary) 35%, transparent) 32% 36%, transparent 36% 64%, color-mix(in srgb, var(--primary) 35%, transparent) 64% 68%, transparent 68%),
      linear-gradient(0deg, transparent 45%, color-mix(in srgb, var(--primary) 35%, transparent) 45% 55%, transparent 55%),
      color-mix(in srgb, var(--primary-foreground) 72%, transparent);
  }
  .member-name { font-size: var(--text-2xl); font-weight: 600; letter-spacing: .01em; line-height: var(--leading-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .member-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
  .member-bottom > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .member-bottom > div:last-child { text-align: end; }
  .member-label { font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
  :root[lang="fa"] .member-label { letter-spacing: 0; font-size: var(--text-xs); }
  .member-value { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .member-value .sub-qty-unit, .member-card .sub-qty-unit { color: inherit; opacity: .8; }

  .member-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: var(--s-5) var(--s-4);
    padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--card-shadow);
  }
  .member-stats > .sub-meters { grid-column: 1 / -1; }
  .member-stat { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
  .member-stat-label { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--text-xs); color: var(--muted-foreground); }
  .member-stat-value { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; line-height: var(--leading-tight); }
  @media (max-width: 400px) { .member-card { padding: var(--s-4); } .member-name { font-size: var(--text-xl); } .member-stat-value { font-size: var(--text-2xl); } }
}

/* --- styles/40-pages/sub-designs/minimal.css --- */
/* Subscription design "minimal": text-first, no frames. The hero is a heading,
 * one row of facts and the meters; devices drop their card chrome for rows. */
@layer pages {
  .lean { display: flex; flex-direction: column; gap: var(--s-5); padding-bottom: var(--s-6); border-bottom: 1px solid var(--border); }
  .lean-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
  .lean-identity { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
  .lean-name { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.035em; line-height: var(--leading-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root[lang="fa"] .lean-name { letter-spacing: 0; }
  .lean-plan { font-size: var(--text-sm); color: var(--muted-foreground); }
  .lean-facts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-10, var(--s-8)); }
  .lean-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .lean-facts dt { font-size: var(--text-xs); color: var(--muted-foreground); }
  .lean-facts dd { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
  .lean-facts dd .sub-value-text { font-size: var(--text-sm); }
  @media (max-width: 640px) { .lean-name { font-size: var(--text-2xl); } .lean-facts { gap: var(--s-3) var(--s-6); } }

  .sub--minimal .sub-device-list { grid-template-columns: minmax(0, 1fr); gap: 0; border-block: 1px solid var(--border); }
  .sub--minimal .sub-device { padding: var(--s-4) 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .sub--minimal .sub-device + .sub-device { border-top: 1px solid var(--border); }
  @media (min-width: 641px) {
    .sub--minimal .sub-device-actions { display: flex; flex-wrap: wrap; padding-inline-start: calc(2.5rem + var(--s-3)); }
    .sub--minimal .sub-device-actions > .btn { width: auto; }
  }
  .sub--minimal .sub-detail-card { border: 0; box-shadow: none; background: none; padding-inline: 0; }
}

/* --- styles/40-pages/sub-designs/portal.css --- */
/* Subscription design "portal": app-style. A centered identity, data and time
 * as conic rings with the value inside, and on phones the section tabs become a
 * floating bottom bar. Ring angles come from the fixed w0…w100 classes (strict
 * CSP: no inline styles); the mask uses alpha only. */
@layer pages {
  body[data-sub-layout="portal"] .public-main { max-width: 34rem; }
  body[data-sub-layout="portal"] .public-header { padding-inline: max(var(--s-4), calc((100vw - 34rem) / 2)); }
  .portal {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-6); padding: var(--s-6) var(--s-4);
    text-align: center; border: 1px solid var(--border); border-radius: calc(var(--radius-xl) + .5rem);
    background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 72%), var(--card);
    box-shadow: var(--card-shadow);
  }
  .portal-identity { display: flex; flex-direction: column; align-items: center; gap: var(--s-1_5); min-width: 0; max-width: 100%; }
  .portal-avatar { width: 4rem; height: 4rem; border-radius: var(--radius-full); font-size: var(--text-xl); background: var(--primary); color: var(--primary-foreground); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
  .portal-name { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .portal-plan { font-size: var(--text-sm); color: var(--muted-foreground); }
  .portal-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); width: 100%; }
  .portal-ring-card { display: grid; justify-items: center; gap: var(--s-2); min-width: 0; }
  .portal-ring-card > .sub-ring, .portal-ring-card > .portal-ring-value { grid-area: 1 / 1; }
  .portal-ring-value { align-self: center; max-width: 5.5rem; font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-tight); }
  .portal-ring-value .sub-value-text { font-size: var(--text-xs); }
  .portal-ring-label { font-size: var(--text-xs); color: var(--muted-foreground); }
  .sub-ring {
    --p: 0; --tone: var(--primary);
    display: block; width: 7.5rem; aspect-ratio: 1; border-radius: var(--radius-full);
    background: conic-gradient(var(--tone) calc(var(--p) * 1%), color-mix(in srgb, var(--foreground) 9%, transparent) 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - .55rem), black calc(100% - .55rem + 1px));
  }
  .sub-ring.is-warn { --tone: var(--warning); }
  .sub-ring.is-danger { --tone: var(--destructive); }
  .sub-ring.w5 { --p: 5; } .sub-ring.w10 { --p: 10; } .sub-ring.w15 { --p: 15; } .sub-ring.w20 { --p: 20; }
  .sub-ring.w25 { --p: 25; } .sub-ring.w30 { --p: 30; } .sub-ring.w35 { --p: 35; } .sub-ring.w40 { --p: 40; }
  .sub-ring.w45 { --p: 45; } .sub-ring.w50 { --p: 50; } .sub-ring.w55 { --p: 55; } .sub-ring.w60 { --p: 60; }
  .sub-ring.w65 { --p: 65; } .sub-ring.w70 { --p: 70; } .sub-ring.w75 { --p: 75; } .sub-ring.w80 { --p: 80; }
  .sub-ring.w85 { --p: 85; } .sub-ring.w90 { --p: 90; } .sub-ring.w95 { --p: 95; } .sub-ring.w100 { --p: 100; }
  @media (max-width: 400px) { .sub-ring { width: 6.25rem; } .portal-ring-value { font-size: var(--text-base); max-width: 4.5rem; } }

  /* Phones: a floating bottom tab bar (icon over label), clear of the home indicator. */
  @media (max-width: 640px) {
    body[data-sub-layout="portal"] .public-main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
    body[data-sub-layout="portal"] .public-foot { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
    .sub--portal .sub-tabs-picker { position: fixed; top: auto; inset-inline: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); margin: 0; padding: 0; background: none; }
    .sub--portal .sub-tabs {
      width: 100%; justify-content: space-around; gap: 2px; padding: 4px;
      border: 1px solid var(--border); border-radius: var(--radius-full);
      background: color-mix(in srgb, var(--popover) 90%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-lg);
    }
    .sub--portal .sub-tabs > .tab { flex: 1 1 0; flex-direction: column; gap: 2px; height: auto; min-height: 3rem; margin: 0; padding: var(--s-1_5) var(--s-1); border: 0; border-radius: var(--radius-full); font-size: var(--text-2xs); box-shadow: none; }
    .sub--portal .sub-tabs > .tab > .icon { width: 1.125rem; height: 1.125rem; }
    .sub--portal .sub-tabs > .tab::before, .sub--portal .sub-tabs > .tab::after, .sub--portal .sub-tabs .tab-count { display: none; }
    .sub--portal .sub-tabs > :checked + .tab { background: var(--accent); color: var(--foreground); }
  }
}

/* --- styles/40-pages/sub-designs/ticket.css --- */
/* Subscription design "ticket": a boarding pass. The status stub sits beside the
 * pass on wide screens and below it on phones, joined by a dashed perforation
 * with a notch at each end. Notches are circles in the page color centred on
 * the edge; the ticket clips their outer half, so the edge reads as cut. */
@layer pages {
  .ticket {
    --notch: 1.25rem;
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem;
    border: 1px solid var(--border); border-radius: calc(var(--radius-xl) + .25rem);
    background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-md); overflow: clip;
  }
  .ticket-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; padding: var(--s-6); }
  .ticket-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .ticket-kind { display: inline-flex; align-items: center; gap: var(--s-1_5); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
  .ticket-holder { display: flex; flex-direction: column; gap: var(--s-0_5); min-width: 0; }
  .ticket-label, .ticket-fields dt { font-size: var(--text-2xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
  :root[lang="fa"] :is(.ticket-kind, .ticket-label, .ticket-fields dt) { letter-spacing: 0; font-size: var(--text-xs); }
  .ticket-name { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: var(--leading-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ticket-plan { font-size: var(--text-sm); color: var(--muted-foreground); }
  .ticket-fields { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--border); }
  .ticket-fields > div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
  .ticket-fields dd { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-tight); white-space: nowrap; }
  .ticket-fields dd .sub-value-text { font-size: var(--text-sm); white-space: normal; }

  .ticket-stub {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3);
    padding: var(--s-6) var(--s-4); text-align: center;
    border-inline-start: 2px dashed var(--border);
    background: color-mix(in srgb, var(--status-tone) 7%, var(--card));
    border-start-end-radius: inherit; border-end-end-radius: inherit;
  }
  .ticket-stub::before, .ticket-stub::after {
    content: ""; position: absolute; inset-inline-start: calc(var(--notch) / -2 - 1px);
    width: var(--notch); height: var(--notch); border-radius: 50%;
    background: var(--background); border: 1px solid var(--border);
  }
  .ticket-stub::before { top: calc(var(--notch) / -2 - 1px); }
  .ticket-stub::after { bottom: calc(var(--notch) / -2 - 1px); }
  .ticket-seal { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-full); background: color-mix(in srgb, var(--status-tone) 16%, transparent); color: var(--status-tone); }
  .ticket-seal > .icon { width: 1.5rem; height: 1.5rem; }
  .ticket-stub-title { font-size: var(--text-sm); font-weight: 600; }
  .ticket-barcode {
    width: 100%; max-width: 7.5rem; height: 2.25rem; border-radius: 2px; opacity: .55;
    background: repeating-linear-gradient(90deg, var(--foreground) 0 2px, transparent 2px 4px, var(--foreground) 4px 5px, transparent 5px 7px, var(--foreground) 7px 10px, transparent 10px 12px, var(--foreground) 12px 13px, transparent 13px 16px);
  }

  /* Phones: the stub tears off below; notches move to the side edges. */
  @media (max-width: 640px) {
    .ticket { grid-template-columns: minmax(0, 1fr); }
    .ticket-main { padding: var(--s-5) var(--s-4); gap: var(--s-4); }
    .ticket-name { font-size: var(--text-2xl); }
    .ticket-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ticket-stub {
      flex-direction: row; justify-content: flex-start; gap: var(--s-3); padding: var(--s-4); text-align: start;
      border-inline-start: 0; border-top: 2px dashed var(--border);
      border-radius: 0 0 calc(var(--radius-xl) + .25rem) calc(var(--radius-xl) + .25rem);
    }
    .ticket-stub::before, .ticket-stub::after { inset-inline-start: auto; top: calc(var(--notch) / -2 - 1px); bottom: auto; }
    .ticket-stub::before { left: calc(var(--notch) / -2 - 1px); }
    .ticket-stub::after { right: calc(var(--notch) / -2 - 1px); }
    .ticket-seal { width: 2.75rem; height: 2.75rem; }
    .ticket-barcode { margin-inline-start: auto; max-width: 5.5rem; height: 1.75rem; }
  }
}

/* --- styles/40-pages/users.css --- */
/* Users workspace — list toolbar, unit inputs, create sheet and detail
 * compositions that the shared components do not cover. */
@layer pages {
  /* Toolbar: search stays visible; status/sort sit inline on wide screens
   * and collapse behind a Filters disclosure on narrow ones (app.js). */
  .users-filters { min-width: 0; }
  .users-filters-toggle { display: none; }
  .users-filter-fields { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .users-filter { width: auto; }
  .users-filter > .input-group-addon { font-size: var(--text-xs); }
  .users-filter > .select { padding-inline-start: var(--s-2); }
  @media (max-width: 800px) {
    .users-toolbar > .toolbar-search { flex: 1 1 12rem; max-width: none; }
    .users-filters-toggle { display: inline-flex; }
    .users-filters[open] { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--s-2); }
    .users-filters[open] > .users-filters-toggle { align-self: flex-start; background: var(--accent); }
    .users-filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .users-filter { min-width: 0; }
  }
  @media (max-width: 420px) { .users-filter-fields { grid-template-columns: 1fr; } }

  /* Table: usage meter width, dense card flow on phones. */
  .users-table .cell-meter { min-width: 9rem; max-width: 14rem; }
  .users-table .cell-identity .cell-sub { max-width: 14rem; }
  .users-table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 2.75rem; padding: var(--s-1_5) var(--cell-px); border-top: 1px solid var(--border); }
  @media (max-width: 800px) {
    .users-table tr, .users-device-table tr { grid-auto-flow: row dense; }
    .users-table .cell-meter { max-width: none; }
    .users-table .users-col-activity { display: none; }
    /* Row actions share the devices row instead of a separate footer. */
    .users-table td.col-actions { grid-column: 2; justify-content: flex-end; align-self: end; border-top: 0; padding-top: 0; }
    .users-table td.col-actions .row-actions { justify-content: flex-end; }
    .users-table-foot { padding-inline: var(--s-4); }
  }

  /* Device table on phones: actions float in the card's top corner. */
  @media (max-width: 800px) {
    .users-device-table td.cell-primary { padding-inline-end: 7.5rem; }
    .users-device-table td.col-actions { position: absolute; top: var(--s-2); inset-inline-end: var(--s-3); width: auto; border-top: 0; padding-top: 0; }
  }
  @media (max-width: 640px) {
    #user-devices > .card-header { grid-template-columns: 1fr; }
    #user-devices > .card-header > .card-action { grid-column: 1; grid-row: auto; }
  }

  /* Number + unit inputs (traffic, duration) with an optional preset menu. */
  .users-unit-group > .select { flex: none; width: auto; border-inline-start: 1px solid var(--input); border-radius: 0; }
  .users-preset-row { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
  .users-preset-row > .input-group { flex: 1; }
  .users-preset-row > .select-control, .users-preset-row > .users-preset { flex: none; width: auto; }
  .users-preset-row .select-trigger { width: auto; color: var(--muted-foreground); }

  /* Forms embedded in dialogs and the create sheet keep the overlay grid. */
  .users-dialog-form, .users-sheet-form { display: contents; }
  dialog.sheet .users-form-section { padding-block: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  dialog.sheet .users-form-section > .card-header, dialog.sheet .users-form-section > .card-content { padding-inline: 0; }
  dialog.sheet .sheet-body > .users-form-section + *, dialog.sheet .users-terms { padding-top: var(--s-5); border-top: 1px solid var(--border); }

  .users-form-page--narrow { max-width: 36rem; }
  .users-terms > .tabs { margin-bottom: var(--s-1); }

  /* Detail page: the summary keeps two columns on phones. */
  @media (max-width: 640px) { .user-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .user-stats .stat { padding-inline: var(--s-4); } .user-stats .stat-value { font-size: var(--text-xl); } }
  .user-title { font-size: 1em; }
  .user-note { white-space: pre-wrap; overflow-wrap: anywhere; }
  .stat > .progress { margin-block: var(--s-1); }
}

/* --- styles/90-utilities.css --- */
/* Utilities: small, single-purpose helpers. Prefer components first. */
@layer utilities {
  /* Meter widths (strict CSP forbids inline styles; Go picks the step). */
  .w0 > .progress-bar, .w0.progress-bar { width: 0%; }
  .w5 > .progress-bar, .w5.progress-bar { width: 5%; }
  .w10 > .progress-bar, .w10.progress-bar { width: 10%; }
  .w15 > .progress-bar, .w15.progress-bar { width: 15%; }
  .w20 > .progress-bar, .w20.progress-bar { width: 20%; }
  .w25 > .progress-bar, .w25.progress-bar { width: 25%; }
  .w30 > .progress-bar, .w30.progress-bar { width: 30%; }
  .w35 > .progress-bar, .w35.progress-bar { width: 35%; }
  .w40 > .progress-bar, .w40.progress-bar { width: 40%; }
  .w45 > .progress-bar, .w45.progress-bar { width: 45%; }
  .w50 > .progress-bar, .w50.progress-bar { width: 50%; }
  .w55 > .progress-bar, .w55.progress-bar { width: 55%; }
  .w60 > .progress-bar, .w60.progress-bar { width: 60%; }
  .w65 > .progress-bar, .w65.progress-bar { width: 65%; }
  .w70 > .progress-bar, .w70.progress-bar { width: 70%; }
  .w75 > .progress-bar, .w75.progress-bar { width: 75%; }
  .w80 > .progress-bar, .w80.progress-bar { width: 80%; }
  .w85 > .progress-bar, .w85.progress-bar { width: 85%; }
  .w90 > .progress-bar, .w90.progress-bar { width: 90%; }
  .w95 > .progress-bar, .w95.progress-bar { width: 95%; }
  .w100 > .progress-bar, .w100.progress-bar { width: 100%; }
  .is-warn > .progress-bar { background: var(--warning); }
  .is-danger > .progress-bar { background: var(--destructive); }

  .text-muted { color: var(--muted-foreground); }
  .text-foreground { color: var(--foreground); }
  .text-success { color: var(--success); }
  .text-warn, .text-warning { color: var(--warning); }
  .text-danger { color: var(--destructive-text); }
  .text-info { color: var(--info); }
  .text-primary { color: var(--primary-text); }
  .text-xs { font-size: var(--text-xs); }
  .text-sm { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg { font-size: var(--text-lg); }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .text-end { text-align: end; }
  .text-center { text-align: center; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .nowrap { white-space: nowrap; }
  .break { overflow-wrap: anywhere; }
  .tabular { font-variant-numeric: tabular-nums; }
  .w-full { width: 100%; }
  .min-w-0 { min-width: 0; }
  .flex-1 { flex: 1; }
  .shrink-0 { flex-shrink: 0; }
  .ms-auto { margin-inline-start: auto; }
  .mt-1 { margin-top: var(--s-1); }
  .mt-2 { margin-top: var(--s-2); }
  .mt-4 { margin-top: var(--s-4); }
  @media (max-width: 640px) { .hide-sm { display: none !important; } }
  @media (min-width: 641px) { .show-sm { display: none !important; } }
}