/*!
 * Armsys UI 2.0.1 — Framework-independent design system by Armsys Technology
 * Usage: <link rel="stylesheet" href="armsys-ui.css"> + <body class="aui"> (or any <div class="aui">)
 * Generated from src/ by scripts/build.mjs — edit the sources, not this file.
 * MIT License · https://github.com/armsys-tech/ui-kit
 */

/* ==========================================================================
   Armsys UI 2 — Design tokens
   Every token lives on the .aui scope so the kit never leaks into a host page.
   <body class="aui"> for full pages, <div class="aui"> for scoped islands.
   ========================================================================== */

/* Tone is NOT inherited: a badge inside a danger alert stays neutral. */
@property --aui-tone { syntax: "*"; inherits: false; }
@property --aui-on-tone { syntax: "*"; inherits: false; }

.aui {
  color-scheme: dark;

  /* ---------- Neutral surfaces ---------- */
  --aui-bg: #09090b;
  --aui-bg-alt: #0d0d10;
  --aui-surface-1: #111114;
  --aui-surface-2: #18181c;
  --aui-surface-3: #202025;
  --aui-surface-4: #29292f;
  --aui-surface-elevated: #141417;  /* menus, popovers, modals */
  --aui-overlay: rgb(3 3 5 / .66);
  --aui-hover: rgb(255 255 255 / .045);
  --aui-active: rgb(255 255 255 / .08);
  --aui-input-bg: #0c0c0f;

  /* ---------- Borders ---------- */
  --aui-border-soft: #1b1b20;
  --aui-border: #27272c;
  --aui-border-strong: #36363d;
  --aui-border-interactive: #4b4b55;

  /* ---------- Text ---------- */
  --aui-text: #f4f4f5;
  --aui-text-secondary: #d4d4d8;
  --aui-text-muted: #a1a1aa;
  --aui-text-subtle: #71717a;
  --aui-text-disabled: #52525b;
  --aui-link: #8fb0ff;

  /* ---------- Primary action (inverted, high contrast) ---------- */
  --aui-primary: #f4f4f5;
  --aui-primary-hover: #ffffff;
  --aui-primary-active: #e4e4e7;
  --aui-on-primary: #09090b;

  /* ---------- Brand accent (override with data-aui-accent) ---------- */
  --aui-accent: #4d7cfe;
  --aui-accent-hover: #6a91ff;
  --aui-accent-active: #3f6ef0;
  --aui-on-accent: #ffffff;

  /* ---------- Semantic & categorical colors ---------- */
  --aui-success: #3ecf8e;  --aui-on-success: #03140c;
  --aui-info: #5aa9ff;     --aui-on-info: #03101f;
  --aui-warning: #f5b83d;  --aui-on-warning: #1a1002;
  --aui-danger: #f2555a;   --aui-on-danger: #ffffff;
  --aui-danger-solid: #e5484d;
  --aui-danger-solid-hover: #ef5c61;
  --aui-purple: #a78bfa;   --aui-on-purple: #12082b;
  --aui-pink: #f472b6;     --aui-on-pink: #2a0818;
  --aui-orange: #fb8c3c;   --aui-on-orange: #1f0d02;
  --aui-yellow: #facc15;   --aui-on-yellow: #1a1500;
  --aui-teal: #2dd4bf;     --aui-on-teal: #02171a;
  --aui-neutral: #a1a1aa;  --aui-on-neutral: #09090b;

  /* Soft/tonal mixing ratios — used by every tonal component */
  --aui-soft-bg: 12%;
  --aui-soft-border: 28%;

  /* Rank / medal colors */
  --aui-gold: #f3c64b;
  --aui-silver: #cfd6e2;
  --aui-bronze: #e39a64;

  /* ---------- Code (Atom One Dark) ---------- */
  --aui-code-bg: #1d2026;
  --aui-code-header: #191b20;
  --aui-code-border: #2a2e36;
  --aui-code-line: rgb(255 255 255 / .04);
  --aui-code-gutter: #4b5263;
  --aui-code-text: #abb2bf;
  --aui-code-muted: #7f848e;
  --aui-code-keyword: #c678dd;
  --aui-code-string: #98c379;
  --aui-code-number: #d19a66;
  --aui-code-comment: #5c6370;
  --aui-code-function: #61afef;
  --aui-code-property: #e06c75;
  --aui-code-attr: #d19a66;
  --aui-code-operator: #56b6c2;
  --aui-code-punctuation: #abb2bf;
  --aui-code-type: #e5c07b;
  --aui-code-tag: #e06c75;
  --aui-code-literal: #56b6c2;
  --aui-code-selection: rgb(97 175 239 / .22);

  /* ---------- Typography ---------- */
  --aui-font: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --aui-font-display: var(--aui-font);
  --aui-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --aui-fs-2xs: .6875rem;   /* 11 */
  --aui-fs-xs: .75rem;      /* 12 */
  --aui-fs-sm: .8125rem;    /* 13 */
  --aui-fs-md: .875rem;     /* 14 — application body */
  --aui-fs-lg: .9375rem;    /* 15 — public body */
  --aui-fs-xl: 1.0625rem;   /* 17 — lead */
  --aui-fs-2xl: 1.25rem;    /* 20 */
  --aui-fs-h4: 1rem;
  --aui-fs-h3: 1.1875rem;
  --aui-fs-h2: 1.5rem;
  --aui-fs-h1: 2rem;
  --aui-fs-display: clamp(2.25rem, 4.6vw, 3.5rem);
  --aui-lh-tight: 1.2;
  --aui-lh: 1.55;
  --aui-lh-relaxed: 1.7;
  --aui-fw-regular: 400;
  --aui-fw-medium: 500;
  --aui-fw-semibold: 600;
  --aui-fw-bold: 680;

  /* ---------- Spacing (4px base) ---------- */
  --aui-space-0: 0;
  --aui-space-1: 4px;
  --aui-space-2: 8px;
  --aui-space-3: 12px;
  --aui-space-4: 16px;
  --aui-space-5: 20px;
  --aui-space-6: 24px;
  --aui-space-8: 32px;
  --aui-space-10: 40px;
  --aui-space-12: 48px;
  --aui-space-16: 64px;
  --aui-space-20: 80px;
  --aui-space-24: 96px;

  /* ---------- Radius ---------- */
  --aui-radius-xs: 4px;
  --aui-radius-sm: 6px;
  --aui-radius-md: 8px;
  --aui-radius-lg: 12px;
  --aui-radius-xl: 16px;
  --aui-radius-2xl: 20px;
  --aui-radius-full: 999px;

  /* ---------- Control sizes (buttons, inputs, selects share these) ---------- */
  --aui-control-h-xs: 24px;
  --aui-control-h-sm: 30px;
  --aui-control-h: 36px;
  --aui-control-h-lg: 42px;
  --aui-control-h-xl: 48px;
  --aui-control-radius: var(--aui-radius-sm);

  /* ---------- Layout (one frame for every public surface) ---------- */
  --aui-frame: 1440px;          /* header, docs, footer, sections */
  --aui-content: 1200px;        /* optional inner content width */
  --aui-narrow: 760px;
  --aui-prose-width: 760px;
  --aui-gutter: 32px;
  --aui-header-h: 64px;         /* site header, docs header, app topbar, sidebar header */
  --aui-sidebar-w: 256px;
  --aui-sidebar-w-collapsed: 64px;
  --aui-docs-nav-w: 264px;
  --aui-docs-toc-w: 232px;
  --aui-titlebar-h: 36px;       /* Electron / desktop title bar */

  /* ---------- Effects ---------- */
  --aui-shadow-xs: 0 1px 1px rgb(0 0 0 / .25);
  --aui-shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --aui-shadow-md: 0 8px 24px rgb(0 0 0 / .32);
  --aui-shadow-lg: 0 18px 48px rgb(0 0 0 / .45);
  --aui-shadow-overlay: 0 16px 48px rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .25);
  --aui-highlight: inset 0 1px 0 rgb(255 255 255 / .04);
  --aui-focus: #7a9dff;
  --aui-ring: 0 0 0 3px color-mix(in srgb, var(--aui-accent) 24%, transparent);
  --aui-grid-line: rgb(255 255 255 / .035);
  --aui-blur: saturate(1.4) blur(14px);

  /* ---------- Motion ---------- */
  --aui-dur-fast: 120ms;
  --aui-dur: 180ms;
  --aui-dur-slow: 280ms;
  --aui-ease: cubic-bezier(.2, .7, .2, 1);
  --aui-ease-out: cubic-bezier(.16, 1, .3, 1);
  --aui-ease-in: cubic-bezier(.4, 0, 1, 1);

  /* ---------- Z layers ---------- */
  --aui-z-sticky: 30;
  --aui-z-header: 40;
  --aui-z-dropdown: 50;
  --aui-z-drawer: 60;
  --aui-z-modal: 70;
  --aui-z-toast: 80;
  --aui-z-tooltip: 90;
}

/* ---------- Brand accent presets: <body class="aui" data-aui-accent="violet"> ---------- */
.aui[data-aui-accent="violet"]  { --aui-accent: #8b5cf6; --aui-accent-hover: #a07cff; --aui-accent-active: #7c4ddf; --aui-link: #b9a2ff; --aui-focus: #a58bff; }
.aui[data-aui-accent="emerald"] { --aui-accent: #10b981; --aui-accent-hover: #2ccf98; --aui-accent-active: #0ea371; --aui-on-accent: #02140d; --aui-link: #5ee0b0; --aui-focus: #4ad6a3; }
.aui[data-aui-accent="orange"]  { --aui-accent: #f97316; --aui-accent-hover: #ff8a3a; --aui-accent-active: #e5640c; --aui-on-accent: #1d0b00; --aui-link: #ffab73; --aui-focus: #ff9b55; }
.aui[data-aui-accent="rose"]    { --aui-accent: #f43f5e; --aui-accent-hover: #ff5f7a; --aui-accent-active: #df2f4f; --aui-link: #ff8ea1; --aui-focus: #ff7b92; }
.aui[data-aui-accent="cyan"]    { --aui-accent: #06b6d4; --aui-accent-hover: #22cbe6; --aui-accent-active: #0aa1bb; --aui-on-accent: #01141a; --aui-link: #67dcf0; --aui-focus: #4fd3ea; }
.aui[data-aui-accent="mono"]    { --aui-accent: #f4f4f5; --aui-accent-hover: #ffffff; --aui-accent-active: #e4e4e7; --aui-on-accent: #09090b; --aui-link: #f4f4f5; --aui-focus: #a1a1aa; }

/* ---------- Density ---------- */
.aui--dense {
  --aui-control-h-xs: 22px;
  --aui-control-h-sm: 26px;
  --aui-control-h: 30px;
  --aui-control-h-lg: 36px;
  --aui-control-h-xl: 42px;
  --aui-fs-md: .8125rem;
  --aui-header-h: 52px;
}
.aui--comfortable {
  --aui-control-h-sm: 32px;
  --aui-control-h: 40px;
  --aui-control-h-lg: 46px;
  --aui-control-h-xl: 52px;
}

/* ---------- Light theme (full parity) ---------- */
.aui[data-aui-theme="light"] {
  color-scheme: light;
  --aui-bg: #ffffff;
  --aui-bg-alt: #fafafa;
  --aui-surface-1: #ffffff;
  --aui-surface-2: #f4f4f5;
  --aui-surface-3: #ebebee;
  --aui-surface-4: #e1e1e6;
  --aui-surface-elevated: #ffffff;
  --aui-overlay: rgb(9 9 11 / .38);
  --aui-hover: rgb(9 9 11 / .04);
  --aui-active: rgb(9 9 11 / .07);
  --aui-input-bg: #ffffff;
  --aui-border-soft: #efeff1;
  --aui-border: #e4e4e7;
  --aui-border-strong: #d4d4d8;
  --aui-border-interactive: #a1a1aa;
  --aui-text: #09090b;
  --aui-text-secondary: #27272a;
  --aui-text-muted: #52525b;
  --aui-text-subtle: #71717a;
  --aui-text-disabled: #a1a1aa;
  --aui-link: #2f5fe0;
  --aui-primary: #09090b;
  --aui-primary-hover: #27272a;
  --aui-primary-active: #3f3f46;
  --aui-on-primary: #ffffff;
  --aui-accent: #3b6af0;
  --aui-accent-hover: #2f5fe0;
  --aui-accent-active: #2852cc;
  --aui-success: #16a36a;  --aui-on-success: #ffffff;
  --aui-info: #2f7fe0;     --aui-on-info: #ffffff;
  --aui-warning: #c98a0b;  --aui-on-warning: #ffffff;
  --aui-danger: #dc3a40;   --aui-on-danger: #ffffff;
  --aui-danger-solid: #dc3a40;
  --aui-danger-solid-hover: #c9303a;
  --aui-purple: #7c4ddf;   --aui-on-purple: #ffffff;
  --aui-pink: #db2777;     --aui-on-pink: #ffffff;
  --aui-orange: #e5640c;   --aui-on-orange: #ffffff;
  --aui-yellow: #b38900;   --aui-on-yellow: #ffffff;
  --aui-teal: #0f9488;     --aui-on-teal: #ffffff;
  --aui-neutral: #52525b;  --aui-on-neutral: #ffffff;
  --aui-gold: #b8860b;
  --aui-silver: #6b7280;
  --aui-bronze: #b4652d;
  --aui-soft-bg: 10%;
  --aui-soft-border: 30%;
  --aui-shadow-xs: 0 1px 1px rgb(9 9 11 / .04);
  --aui-shadow-sm: 0 1px 2px rgb(9 9 11 / .06);
  --aui-shadow-md: 0 8px 24px rgb(9 9 11 / .08);
  --aui-shadow-lg: 0 18px 48px rgb(9 9 11 / .12);
  --aui-shadow-overlay: 0 16px 48px rgb(9 9 11 / .14), 0 0 0 1px rgb(9 9 11 / .05);
  --aui-highlight: inset 0 1px 0 rgb(255 255 255 / .6);
  --aui-focus: #3b6af0;
  --aui-grid-line: rgb(9 9 11 / .05);
}
/* Code surfaces stay Atom One Dark in the light theme — re-dark their local text tokens */
.aui[data-aui-theme="light"] :is(.aui-code, .aui-cli, .aui-log, .aui-terminal) {
  --aui-text: #e6e6e6;
  --aui-text-secondary: #c8ccd4;
  --aui-text-muted: #9aa1ad;
  --aui-text-subtle: #7f848e;
  --aui-border: #2a2e36;
  --aui-border-soft: #252930;
  --aui-border-strong: #353a44;
  --aui-surface-1: #21252b;
  --aui-surface-2: #2a2f37;
  --aui-hover: rgb(255 255 255 / .06);
  --aui-primary: #e6e6e6;
  color-scheme: dark;
}

/* ==========================================================================
   Armsys UI 2 — Scoped base, typography, tones, utilities, motion
   Every element rule is scoped to .aui and uses :where() to keep specificity
   at zero, so host applications can override anything without !important.
   ========================================================================== */
.aui {
  font-family: var(--aui-font);
  font-size: var(--aui-fs-md);
  line-height: var(--aui-lh);
  color: var(--aui-text);
  background: var(--aui-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-text-size-adjust: 100%;
}
html:has(> body.aui) { background: var(--aui-bg, #09090b); scroll-padding-top: 80px; }
body.aui { margin: 0; min-height: 100vh; min-height: 100dvh; }
.aui--transparent { background: transparent; }
.aui :where(*, *::before, *::after) { box-sizing: border-box; }
.aui :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
.aui :where(h1, h2, h3, h4, h5, h6) { font-weight: var(--aui-fw-semibold); line-height: var(--aui-lh-tight); letter-spacing: -.015em; color: var(--aui-text); }
.aui :where(a) { color: inherit; text-decoration: none; }
.aui :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
.aui :where(button) { -webkit-tap-highlight-color: transparent; }
.aui :where(img, video, canvas, svg) { max-width: 100%; }
.aui :where(img, video) { height: auto; }
.aui :where(code, kbd, samp, pre) { font-family: var(--aui-font-mono); }
.aui :where(hr) { border: 0; border-top: 1px solid var(--aui-border-soft); margin: var(--aui-space-6) 0; }
.aui :where([hidden]) { display: none !important; }
.aui ::selection { background: color-mix(in srgb, var(--aui-accent) 35%, transparent); color: var(--aui-text); }
.aui :where(:focus-visible) { outline: 2px solid var(--aui-focus); outline-offset: 2px; }
.aui :where(:focus:not(:focus-visible)) { outline: none; }
.aui :where(*) { scrollbar-color: var(--aui-surface-4) transparent; }
.aui :where(::-webkit-scrollbar) { width: 10px; height: 10px; }
.aui :where(::-webkit-scrollbar-thumb) { background: var(--aui-surface-4); border: 3px solid transparent; background-clip: padding-box; border-radius: 10px; }
.aui :where(::-webkit-scrollbar-thumb:hover) { background-color: var(--aui-border-interactive); }
.aui :where(::-webkit-scrollbar-track, ::-webkit-scrollbar-corner) { background: transparent; }
.aui.is-scroll-locked, .aui .is-scroll-locked { overflow: hidden; }
html.aui-scroll-locked { overflow: hidden; }

/* ---------- Icons: <svg class="aui-icon"><use href="#aui-i-search"/></svg> ---------- */
.aui-icon {
  width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.aui-icon--2xs { width: 10px; height: 10px; }
.aui-icon--xs { width: 12px; height: 12px; }
.aui-icon--sm { width: 14px; height: 14px; }
.aui-icon--lg { width: 20px; height: 20px; }
.aui-icon--xl { width: 24px; height: 24px; }
.aui-icon--2xl { width: 32px; height: 32px; stroke-width: 1.5; }
.aui-icon--fill { fill: currentColor; stroke: none; }
.aui-icon--spin { animation: aui-spin .8s linear infinite; }

/* ---------- Brand mark ---------- */
.aui-brand { display: inline-flex; align-items: center; gap: 10px; font-size: var(--aui-fs-lg); font-weight: var(--aui-fw-semibold); letter-spacing: -.02em; color: var(--aui-text); white-space: nowrap; text-decoration: none; }
.aui-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.aui-brand-text small, .aui-brand small { font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-medium); letter-spacing: .02em; color: var(--aui-text-subtle); }
.aui-brand-sub { padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--aui-border); font-weight: var(--aui-fw-regular); color: var(--aui-text-subtle); }
.aui-logo { --_s: 28px; width: var(--_s); height: var(--_s); flex: none; display: inline-grid; place-items: center; border-radius: calc(var(--_s) * .27); background: var(--aui-primary); color: var(--aui-on-primary); }
.aui-logo > svg, .aui-logo > img { width: 60%; height: 60%; }
.aui-logo--sm { --_s: 22px; }
.aui-logo--lg { --_s: 36px; }
.aui-logo--xl { --_s: 48px; }
.aui-logo--accent { background: var(--aui-accent); color: var(--aui-on-accent); }

/* ---------- Typography scale ---------- */
.aui-display { font-family: var(--aui-font-display); font-size: var(--aui-fs-display); font-weight: var(--aui-fw-bold); letter-spacing: -.038em; line-height: 1.06; text-wrap: balance; }
.aui-h1 { font-size: var(--aui-fs-h1); font-weight: var(--aui-fw-bold); letter-spacing: -.028em; line-height: 1.15; }
.aui-h2 { font-size: var(--aui-fs-h2); font-weight: var(--aui-fw-semibold); letter-spacing: -.022em; line-height: 1.2; }
.aui-h3 { font-size: var(--aui-fs-h3); font-weight: var(--aui-fw-semibold); letter-spacing: -.015em; line-height: 1.3; }
.aui-h4 { font-size: var(--aui-fs-h4); font-weight: var(--aui-fw-semibold); letter-spacing: -.01em; line-height: 1.35; }
.aui-lead { font-size: var(--aui-fs-xl); line-height: var(--aui-lh-relaxed); color: var(--aui-text-muted); text-wrap: pretty; }
.aui-body { font-size: var(--aui-fs-md); line-height: var(--aui-lh); }
.aui-small { font-size: var(--aui-fs-sm); }
.aui-caption { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-overline { font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--aui-text-subtle); }
.aui-mono { font-family: var(--aui-font-mono); font-size: .92em; }
.aui-gradient-text { background: linear-gradient(180deg, var(--aui-text) 30%, color-mix(in srgb, var(--aui-text) 55%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aui-kbd, .aui :where(kbd) {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; gap: 2px;
  font-family: var(--aui-font-mono); font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-medium); line-height: 1; color: var(--aui-text-muted);
  background: var(--aui-surface-2); border: 1px solid var(--aui-border); border-bottom-width: 2px; border-radius: var(--aui-radius-xs);
}
.aui-kbd--sm { min-width: 16px; height: 16px; padding: 0 3px; font-size: 10px; border-bottom-width: 1px; }
.aui-kbd-group { display: inline-flex; align-items: center; gap: 3px; }

/* ---------- Tones ----------
   Any tonal component reads --aui-tone / --aui-on-tone. Set them with a
   modifier that ends in the tone name (aui-badge--success, aui-alert--danger,
   aui-btn--soft aui-btn--warning …) or the explicit aui-tone--{name} class.  */
.aui :where([class*="--accent"])  { --aui-tone: var(--aui-accent);  --aui-on-tone: var(--aui-on-accent); }
.aui :where([class*="--success"]) { --aui-tone: var(--aui-success); --aui-on-tone: var(--aui-on-success); }
.aui :where([class*="--info"])    { --aui-tone: var(--aui-info);    --aui-on-tone: var(--aui-on-info); }
.aui :where([class*="--warning"]) { --aui-tone: var(--aui-warning); --aui-on-tone: var(--aui-on-warning); }
.aui :where([class*="--danger"])  { --aui-tone: var(--aui-danger);  --aui-on-tone: var(--aui-on-danger); }
.aui :where([class*="--purple"])  { --aui-tone: var(--aui-purple);  --aui-on-tone: var(--aui-on-purple); }
.aui :where([class*="--pink"])    { --aui-tone: var(--aui-pink);    --aui-on-tone: var(--aui-on-pink); }
.aui :where([class*="--orange"])  { --aui-tone: var(--aui-orange);  --aui-on-tone: var(--aui-on-orange); }
.aui :where([class*="--yellow"])  { --aui-tone: var(--aui-yellow);  --aui-on-tone: var(--aui-on-yellow); }
.aui :where([class*="--teal"])    { --aui-tone: var(--aui-teal);    --aui-on-tone: var(--aui-on-teal); }
.aui :where([class*="--neutral"]) { --aui-tone: var(--aui-neutral); --aui-on-tone: var(--aui-on-neutral); }

/* ---------- Motion ---------- */
@keyframes aui-spin { to { transform: rotate(360deg); } }
@keyframes aui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes aui-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes aui-rise { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes aui-sink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes aui-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes aui-slide-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes aui-slide-out-right { from { transform: none; } to { transform: translateX(100%); } }
@keyframes aui-slide-in-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes aui-slide-out-left { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes aui-slide-in-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes aui-slide-out-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes aui-slide-in-down { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes aui-slide-out-up { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes aui-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_t, var(--aui-success)) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes aui-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes aui-flash { from { background: color-mix(in srgb, var(--aui-accent) 14%, transparent); } to { background: transparent; } }
@keyframes aui-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@keyframes aui-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .aui :where(*:not(.aui-spinner):not(.aui-icon--spin)), .aui :where(*::before, *::after) {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Armsys UI 2 — Prose
   Styles plain semantic HTML (CMS output, Markdown, WordPress content).
   Loaded before components so component classes inside prose win.
   ========================================================================== */
.aui-prose { font-size: 1rem; line-height: 1.75; color: var(--aui-text-secondary); overflow-wrap: break-word; }
.aui-prose--sm { font-size: var(--aui-fs-md); line-height: 1.7; }
.aui-prose--lg { font-size: 1.0625rem; line-height: 1.8; }
.aui-prose > :where(:first-child) { margin-top: 0; }
.aui-prose > :where(:last-child) { margin-bottom: 0; }
.aui-prose :where(h1, h2, h3, h4, h5, h6) { position: relative; color: var(--aui-text); font-weight: var(--aui-fw-semibold); scroll-margin-top: calc(var(--aui-header-h) + 24px); text-wrap: balance; }
.aui-prose :where(h1) { font-size: 1.875rem; letter-spacing: -.028em; line-height: 1.2; margin: 0 0 .7em; }
.aui-prose :where(h2) { font-size: 1.375rem; letter-spacing: -.022em; line-height: 1.3; margin: 2.3em 0 .7em; }
.aui-prose :where(h3) { font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.4; margin: 1.9em 0 .55em; }
.aui-prose :where(h4) { font-size: 1rem; margin: 1.7em 0 .5em; }
.aui-prose :where(h5) { font-size: .9375rem; margin: 1.5em 0 .4em; }
.aui-prose :where(h6) { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--aui-text-muted); margin: 1.5em 0 .4em; }
.aui-prose :where(p) { margin: 0 0 1.15em; }
.aui-prose :where(a) { color: var(--aui-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--aui-link) 38%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color var(--aui-dur-fast); }
.aui-prose :where(a:hover) { text-decoration-color: currentColor; }
.aui-prose :where(strong, b) { color: var(--aui-text); font-weight: var(--aui-fw-semibold); }
.aui-prose :where(em, i) { font-style: italic; }
.aui-prose :where(small) { font-size: .85em; color: var(--aui-text-muted); }
.aui-prose :where(ul, ol) { margin: 0 0 1.15em; padding-left: 1.4em; }
.aui-prose :where(li) { margin: .4em 0; padding-left: .2em; }
.aui-prose :where(li::marker) { color: var(--aui-text-subtle); }
.aui-prose :where(ol > li::marker) { font-variant-numeric: tabular-nums; font-size: .92em; }
.aui-prose :where(li > ul, li > ol) { margin: .4em 0 .2em; }
.aui-prose :where(blockquote) { margin: 1.6em 0; padding: .15em 0 .15em 1.1em; border-left: 2px solid var(--aui-border-strong); color: var(--aui-text-muted); }
.aui-prose :where(blockquote p:last-child) { margin-bottom: 0; }
.aui-prose :where(hr) { margin: 2.6em 0; border: 0; border-top: 1px solid var(--aui-border-soft); }
.aui-prose :where(img, video) { border-radius: var(--aui-radius-md); border: 1px solid var(--aui-border-soft); }
.aui-prose :where(figure) { margin: 1.8em 0; }
.aui-prose :where(figcaption) { margin-top: .7em; font-size: var(--aui-fs-sm); color: var(--aui-text-subtle); text-align: center; }
.aui-prose :where(:not(pre) > code) {
  font-size: .85em; padding: .14em .4em; border-radius: var(--aui-radius-xs);
  background: var(--aui-surface-2); border: 1px solid var(--aui-border-soft); color: var(--aui-text); white-space: break-spaces;
}
.aui-prose :where(pre) {
  margin: 1.6em 0; padding: 14px 16px; overflow-x: auto; border-radius: var(--aui-radius-md);
  background: var(--aui-code-bg); border: 1px solid var(--aui-code-border); color: var(--aui-code-text);
  font-size: .8125rem; line-height: 1.7; tab-size: 2;
}
.aui-prose :where(pre code) { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; white-space: pre; }
.aui-prose :where(table) {
  width: 100%; margin: 1.6em 0; border-collapse: separate; border-spacing: 0; font-size: var(--aui-fs-md); line-height: 1.55;
  border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); overflow: hidden;
}
.aui-prose :where(th) { text-align: left; font-weight: var(--aui-fw-semibold); font-size: var(--aui-fs-sm); color: var(--aui-text); background: var(--aui-surface-1); padding: 10px 14px; border-bottom: 1px solid var(--aui-border); }
.aui-prose :where(td) { padding: 10px 14px; border-bottom: 1px solid var(--aui-border-soft); vertical-align: top; }
.aui-prose :where(tbody tr:last-child td) { border-bottom: 0; }
.aui-prose :where(dl) { margin: 0 0 1.15em; }
.aui-prose :where(dt) { color: var(--aui-text); font-weight: var(--aui-fw-semibold); margin-top: .8em; }
.aui-prose :where(dd) { margin: .2em 0 0 1em; }
.aui-prose :where(mark) { background: color-mix(in srgb, var(--aui-yellow) 22%, transparent); color: var(--aui-text); padding: 0 .2em; border-radius: 3px; }
.aui-prose > :where(.aui-code, .aui-callout, .aui-table-wrap, .aui-endpoint, .aui-params, .aui-code-group, .aui-demo, .aui-cli, .aui-steps, .aui-accordion, .aui-card) { margin-block: 1.6em; }

/* Heading anchors: <h2 id="x"><a class="aui-anchor" href="#x">#</a>Title</h2> */
.aui-anchor {
  position: absolute; left: -1.05em; top: 0; width: 1em; color: var(--aui-text-subtle) !important;
  text-decoration: none !important; font-weight: var(--aui-fw-regular); opacity: 0; transition: opacity var(--aui-dur-fast);
}
:is(h1, h2, h3, h4, h5, h6):hover > .aui-anchor, .aui-anchor:focus-visible { opacity: 1; }

/* Numbered steps: <ol class="aui-steps"><li><h3>…</h3><p>…</p></li></ol> */
.aui-steps { list-style: none; counter-reset: aui-step; padding: 0 !important; margin-left: 0; }
.aui-steps > li { position: relative; counter-increment: aui-step; padding: 0 0 1.4em 2.6em !important; margin: 0 !important; }
.aui-steps > li::before {
  content: counter(aui-step); position: absolute; left: 0; top: .1em; width: 1.7em; height: 1.7em; display: grid; place-items: center;
  font-size: .78em; font-weight: var(--aui-fw-semibold); color: var(--aui-text); background: var(--aui-surface-2); border: 1px solid var(--aui-border-strong); border-radius: 50%;
}
.aui-steps > li::after { content: ""; position: absolute; left: calc(.85em - .5px); top: 2.1em; bottom: .4em; width: 1px; background: var(--aui-border); }
.aui-steps > li:last-child::after { display: none; }
.aui-steps > li > :where(h3, h4) { margin-top: 0 !important; }

@media (max-width: 640px) {
  .aui-prose :where(table) { display: block; overflow-x: auto; white-space: nowrap; }
  .aui-anchor { display: none; }
}

/* ==========================================================================
   Armsys UI 2 — Buttons, button groups, split buttons, FAB, close, links, chips
   Every variant only sets private custom properties (--_bg, --_bg-h …);
   the base rule paints them. Sizes and shapes compose freely with variants.

   Variants : (default secondary) primary accent outline ghost soft link
              success danger warning info  (solid tones)
              soft/outline/ghost + any tone: aui-btn--soft aui-btn--danger
   Sizes    : xs sm (md) lg xl          Shapes: icon pill block square
   States   : :disabled .is-loading .is-active [aria-pressed=true] [aria-expanded=true]
   ========================================================================== */
.aui-btn {
  --_h: var(--aui-control-h); --_px: 14px; --_fs: var(--aui-fs-sm); --_gap: 8px; --_r: var(--aui-control-radius); --_ic: 16px;
  --_bg: var(--aui-surface-2); --_bd: var(--aui-border-strong); --_fg: var(--aui-text);
  --_bg-h: var(--aui-surface-3); --_bd-h: var(--aui-border-interactive); --_fg-h: var(--_fg);
  --_bg-a: var(--aui-surface-4); --_sh: var(--aui-highlight), var(--aui-shadow-xs);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--_gap); flex: none;
  height: var(--_h); min-width: 0; padding: 0 var(--_px); margin: 0;
  font: inherit; font-size: var(--_fs); font-weight: var(--aui-fw-medium); line-height: 1; letter-spacing: -.005em;
  color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--_r); box-shadow: var(--_sh);
  white-space: nowrap; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--aui-dur-fast), border-color var(--aui-dur-fast), color var(--aui-dur-fast), box-shadow var(--aui-dur-fast), transform var(--aui-dur-fast), opacity var(--aui-dur-fast);
}
.aui-btn:hover { color: var(--_fg-h); background: var(--_bg-h); border-color: var(--_bd-h); }
.aui-btn:active { background: var(--_bg-a); transform: translateY(.5px); }
.aui-btn:focus-visible { outline: 2px solid var(--aui-focus); outline-offset: 2px; }
.aui-btn > .aui-icon, .aui-btn > svg { width: var(--_ic); height: var(--_ic); flex: none; }
.aui-btn > .aui-icon:first-child:not(:last-child) { margin-left: -2px; }
.aui-btn > .aui-icon:last-child:not(:first-child) { margin-right: -2px; }
.aui-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aui-btn .aui-kbd { height: 18px; min-width: 18px; margin-right: -6px; background: transparent; border-color: color-mix(in srgb, currentColor 22%, transparent); color: inherit; opacity: .7; }

/* ---------- Variants ---------- */
.aui-btn--primary {
  --_bg: var(--aui-primary); --_bd: var(--aui-primary); --_fg: var(--aui-on-primary);
  --_bg-h: var(--aui-primary-hover); --_bd-h: var(--aui-primary-hover); --_bg-a: var(--aui-primary-active);
  --_sh: var(--aui-shadow-xs); font-weight: var(--aui-fw-semibold);
}
.aui-btn--accent {
  --_bg: var(--aui-accent); --_bd: var(--aui-accent); --_fg: var(--aui-on-accent);
  --_bg-h: var(--aui-accent-hover); --_bd-h: var(--aui-accent-hover); --_bg-a: var(--aui-accent-active);
  --_sh: inset 0 1px 0 rgb(255 255 255 / .14), var(--aui-shadow-xs); font-weight: var(--aui-fw-semibold);
}
.aui-btn--secondary { --_bg: var(--aui-surface-2); }
.aui-btn--outline {
  --_t: var(--aui-tone, var(--aui-text));
  --_bg: transparent; --_bd: color-mix(in srgb, var(--aui-tone, var(--aui-border-strong)) 55%, var(--aui-border-strong)); --_fg: var(--_t); --_sh: none;
  --_bg-h: color-mix(in srgb, var(--aui-tone, var(--aui-text)) 7%, transparent); --_bd-h: var(--aui-tone, var(--aui-border-interactive));
  --_bg-a: color-mix(in srgb, var(--aui-tone, var(--aui-text)) 12%, transparent);
}
.aui-btn--ghost {
  --_t: var(--aui-tone, var(--aui-text-muted));
  --_bg: transparent; --_bd: transparent; --_fg: var(--_t); --_sh: none;
  --_bg-h: var(--aui-hover); --_bd-h: transparent; --_fg-h: var(--aui-tone, var(--aui-text)); --_bg-a: var(--aui-active);
}
.aui-btn--soft {
  --_t: var(--aui-tone, var(--aui-accent));
  --_bg: color-mix(in srgb, var(--_t) var(--aui-soft-bg), transparent); --_bd: color-mix(in srgb, var(--_t) 22%, transparent); --_fg: var(--_t); --_sh: none;
  --_bg-h: color-mix(in srgb, var(--_t) 18%, transparent); --_bd-h: color-mix(in srgb, var(--_t) 40%, transparent); --_fg-h: var(--_t);
  --_bg-a: color-mix(in srgb, var(--_t) 24%, transparent);
}
.aui-btn--link {
  --_t: var(--aui-tone, var(--aui-link));
  --_bg: transparent; --_bd: transparent; --_fg: var(--_t); --_sh: none; --_bg-h: transparent; --_bd-h: transparent; --_bg-a: transparent;
  --_px: 0; height: auto; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
}
.aui-btn--link:hover { text-decoration-color: currentColor; }
.aui-btn--link:active { transform: none; }

/* Solid tones (success / danger / warning / info / purple …) */
.aui-btn:is(.aui-btn--success, .aui-btn--danger, .aui-btn--warning, .aui-btn--info, .aui-btn--purple, .aui-btn--pink, .aui-btn--orange, .aui-btn--teal):not(.aui-btn--soft, .aui-btn--outline, .aui-btn--ghost, .aui-btn--link) {
  --_t: var(--aui-tone);
  --_bg: var(--_t); --_bd: var(--_t); --_fg: var(--aui-on-tone);
  --_bg-h: color-mix(in srgb, var(--_t) 88%, white); --_bd-h: var(--_bg-h); --_bg-a: color-mix(in srgb, var(--_t) 85%, black);
  --_sh: inset 0 1px 0 rgb(255 255 255 / .12), var(--aui-shadow-xs); font-weight: var(--aui-fw-semibold);
}
.aui-btn.aui-btn--danger:not(.aui-btn--soft, .aui-btn--outline, .aui-btn--ghost, .aui-btn--link) { --_bg: var(--aui-danger-solid); --_bd: var(--aui-danger-solid); --_bg-h: var(--aui-danger-solid-hover); --_bd-h: var(--aui-danger-solid-hover); }

/* Social / third-party sign-in */
.aui-btn--social { --_bg: var(--aui-surface-1); --_bd: var(--aui-border-strong); --_bg-h: var(--aui-surface-2); font-weight: var(--aui-fw-medium); }
.aui-btn--social > .aui-btn-brand { width: 18px; height: 18px; flex: none; }

/* ---------- Sizes ---------- */
.aui-btn--xs { --_h: var(--aui-control-h-xs); --_px: 8px; --_fs: var(--aui-fs-2xs); --_gap: 4px; --_ic: 12px; --_r: var(--aui-radius-xs); }
.aui-btn--sm { --_h: var(--aui-control-h-sm); --_px: 10px; --_fs: var(--aui-fs-xs); --_gap: 6px; --_ic: 14px; --_r: calc(var(--aui-control-radius) - 1px); }
.aui-btn--lg { --_h: var(--aui-control-h-lg); --_px: 18px; --_fs: var(--aui-fs-md); --_gap: 8px; --_ic: 18px; --_r: var(--aui-radius-md); }
.aui-btn--xl { --_h: var(--aui-control-h-xl); --_px: 22px; --_fs: var(--aui-fs-lg); --_gap: 10px; --_ic: 18px; --_r: var(--aui-radius-md); }

/* ---------- Shapes ---------- */
.aui-btn--icon { width: var(--_h); --_px: 0; }
.aui-btn--pill { --_r: var(--aui-radius-full); }
.aui-btn--pill:not(.aui-btn--icon) { --_px: calc(var(--_h) * .45); }
.aui-btn--block { display: flex; width: 100%; }
.aui-btn--start { justify-content: flex-start; }
.aui-btn--start > .aui-btn-end, .aui-btn > .aui-btn-end { margin-left: auto; }

/* ---------- States ---------- */
.aui-btn.is-active, .aui-btn[aria-pressed="true"], .aui-btn[aria-expanded="true"]:not(.aui-btn--primary, .aui-btn--accent) { --_bg: var(--aui-active); --_bd: var(--aui-border-strong); --_fg: var(--aui-text); }
.aui-btn--ghost.is-active, .aui-btn--ghost[aria-pressed="true"], .aui-btn--ghost[aria-expanded="true"] { --_bd: transparent; }
.aui-btn:disabled, .aui-btn.is-disabled, .aui-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.aui-btn.is-loading { pointer-events: none; cursor: progress; }
.aui-btn.is-loading::before {
  content: ""; flex: none; width: calc(var(--_ic) - 2px); height: calc(var(--_ic) - 2px);
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: aui-spin .7s linear infinite; opacity: .85;
}
.aui-btn.is-loading > .aui-icon:first-child { display: none; }
.aui-btn--icon.is-loading > *, .aui-btn.is-loading.is-loading--center > * { display: none; }
.aui-btn.is-success { --_bg: color-mix(in srgb, var(--aui-success) 14%, transparent); --_bd: color-mix(in srgb, var(--aui-success) 40%, transparent); --_fg: var(--aui-success); }

/* Count / badge inside a button */
.aui-btn-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-right: -4px;
  font-size: 10.5px; font-weight: var(--aui-fw-semibold); font-variant-numeric: tabular-nums; line-height: 1;
  color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); border-radius: var(--aui-radius-full);
}
.aui-btn-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--aui-danger); box-shadow: 0 0 0 2px var(--aui-bg); }

/* ---------- Groups & split ---------- */
.aui-btn-group { display: inline-flex; isolation: isolate; vertical-align: middle; }
.aui-btn-group > .aui-btn { --_r: 0; box-shadow: none; }
.aui-btn-group > .aui-btn + .aui-btn { margin-left: -1px; }
.aui-btn-group > .aui-btn:first-child { border-top-left-radius: var(--aui-control-radius); border-bottom-left-radius: var(--aui-control-radius); }
.aui-btn-group > .aui-btn:last-child { border-top-right-radius: var(--aui-control-radius); border-bottom-right-radius: var(--aui-control-radius); }
.aui-btn-group > .aui-btn:hover, .aui-btn-group > .aui-btn:focus-visible, .aui-btn-group > .aui-btn.is-active, .aui-btn-group > .aui-btn[aria-pressed="true"] { z-index: 1; }
.aui-btn-group > .aui-dropdown > .aui-btn { border-radius: 0 var(--aui-control-radius) var(--aui-control-radius) 0; margin-left: -1px; box-shadow: none; }
.aui-btn-group--vertical { flex-direction: column; }
.aui-btn-group--vertical > .aui-btn + .aui-btn { margin: -1px 0 0; }
.aui-btn-group--vertical > .aui-btn:first-child { border-radius: var(--aui-control-radius) var(--aui-control-radius) 0 0; }
.aui-btn-group--vertical > .aui-btn:last-child { border-radius: 0 0 var(--aui-control-radius) var(--aui-control-radius); }
.aui-btn-group--block { display: flex; }
.aui-btn-group--block > .aui-btn { flex: 1; }
/* Split button: primary action + caret menu */
.aui-btn-split { display: inline-flex; isolation: isolate; }
.aui-btn-split > .aui-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.aui-btn-split > .aui-btn:last-child, .aui-btn-split > .aui-dropdown > .aui-btn { width: var(--_h); --_px: 0; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.aui-btn-split > .aui-btn--primary + .aui-btn--primary, .aui-btn-split > .aui-dropdown > .aui-btn--primary, .aui-btn-split > .aui-btn--accent + .aui-btn--accent, .aui-btn-split > .aui-dropdown > .aui-btn--accent { margin-left: 1px; }
.aui-btn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Floating action button ---------- */
.aui-fab {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--aui-z-sticky);
  --_h: 52px; --_r: 16px; --_ic: 20px; box-shadow: var(--aui-shadow-lg);
}
.aui-fab:not(.aui-btn--icon) { --_px: 20px; }

/* ---------- Close button (modals, alerts, toasts, drawers, chips) ---------- */
.aui-close {
  --_s: 28px;
  flex: none; display: inline-grid; place-items: center; width: var(--_s); height: var(--_s); padding: 0; margin: 0;
  color: var(--aui-text-subtle); background: none; border: 0; border-radius: var(--aui-radius-sm); cursor: pointer;
  transition: color var(--aui-dur-fast), background-color var(--aui-dur-fast);
}
.aui-close:hover { color: var(--aui-text); background: var(--aui-hover); }
.aui-close > .aui-icon { width: 16px; height: 16px; }
.aui-close--sm { --_s: 22px; }
.aui-close--sm > .aui-icon { width: 14px; height: 14px; }
.aui-close:not(:has(svg))::before { content: ""; width: 12px; height: 12px; background: currentColor; clip-path: polygon(14% 4%, 50% 40%, 86% 4%, 96% 14%, 60% 50%, 96% 86%, 86% 96%, 50% 60%, 14% 96%, 4% 86%, 40% 50%, 4% 14%); }

/* ---------- Links ---------- */
.aui-link { color: var(--aui-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--aui-link) 35%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color var(--aui-dur-fast), color var(--aui-dur-fast); cursor: pointer; }
.aui-link:hover { text-decoration-color: currentColor; }
.aui-link--quiet { color: var(--aui-text-muted); text-decoration: none; }
.aui-link--quiet:hover { color: var(--aui-text); }
.aui-link--plain { color: inherit; text-decoration: none; }
.aui-link--plain:hover { color: var(--aui-text); text-decoration: underline; }
.aui-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text); }
.aui-link-arrow .aui-icon { width: 14px; height: 14px; color: var(--aui-text-subtle); transition: transform var(--aui-dur) var(--aui-ease), color var(--aui-dur); }
.aui-link-arrow:hover .aui-icon, a:hover > .aui-link-arrow .aui-icon, a:hover .aui-link-arrow .aui-icon { transform: translateX(3px); color: var(--aui-text); }
.aui-link-external::after { content: "↗"; display: inline-block; margin-left: 2px; font-size: .85em; opacity: .6; }

/* ---------- Chips: filters, tags, removable tokens ---------- */
.aui-chip {
  --_t: var(--aui-tone, var(--aui-text-muted)); --_h: 28px;
  display: inline-flex; align-items: center; gap: 6px; height: var(--_h); padding: 0 11px; margin: 0; flex: none;
  font: inherit; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); color: var(--_t);
  background: transparent; border: 1px solid var(--aui-border); border-radius: var(--aui-radius-full);
  white-space: nowrap; text-decoration: none; transition: color var(--aui-dur-fast), border-color var(--aui-dur-fast), background-color var(--aui-dur-fast);
}
:is(a, button, label).aui-chip { cursor: pointer; }
:is(a, button, label).aui-chip:hover { color: var(--aui-tone, var(--aui-text)); border-color: var(--aui-border-interactive); background: var(--aui-hover); }
.aui-chip.is-active, .aui-chip[aria-pressed="true"], .aui-chip:has(> input:checked) { color: var(--aui-tone, var(--aui-text)); background: color-mix(in srgb, var(--aui-tone, var(--aui-text)) 10%, var(--aui-surface-2)); border-color: color-mix(in srgb, var(--aui-tone, var(--aui-text)) 30%, var(--aui-border-strong)); }
.aui-chip > input { position: absolute; opacity: 0; pointer-events: none; }
.aui-chip:has(> input:focus-visible) { outline: 2px solid var(--aui-focus); outline-offset: 2px; }
.aui-chip .aui-icon { width: 13px; height: 13px; }
.aui-chip > .aui-avatar { --_s: 20px; margin-left: -7px; }
.aui-chip-count { color: var(--aui-text-subtle); font-variant-numeric: tabular-nums; }
.aui-chip-remove { display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 -5px 0 -1px; padding: 0; color: inherit; background: none; border: 0; border-radius: 50%; opacity: .6; cursor: pointer; }
.aui-chip-remove:hover { opacity: 1; background: var(--aui-hover); }
.aui-chip-remove .aui-icon { width: 11px; height: 11px; }
.aui-chip--soft { background: color-mix(in srgb, var(--_t) 10%, transparent); border-color: color-mix(in srgb, var(--_t) 24%, transparent); }
.aui-chip--sm { --_h: 22px; padding: 0 8px; font-size: var(--aui-fs-2xs); gap: 4px; }
.aui-chip--lg { --_h: 34px; padding: 0 14px; font-size: var(--aui-fs-sm); }
.aui-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }

/* ==========================================================================
   Armsys UI 2 — Forms
   Field anatomy · inputs · selects · textareas · affixes · input groups ·
   validation · password/clear/stepper · search · OTP · tags · file/dropzone ·
   range · color · checkbox/radio/switch · choice cards · enhanced select.
   ========================================================================== */

/* ---------- Field anatomy ---------- */
.aui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aui-field--inline { flex-direction: row; align-items: center; gap: 12px; }
.aui-field--horizontal { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); align-items: start; gap: 6px 24px; }
.aui-field--horizontal > .aui-label { padding-top: calc((var(--aui-control-h) - 20px) / 2); }
.aui-field--horizontal > :not(.aui-label) { grid-column: 2; }
.aui-label { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text-secondary); }
.aui-label .aui-icon { width: 14px; height: 14px; color: var(--aui-text-subtle); }
.aui-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aui-label-row > :not(.aui-label) { font-size: var(--aui-fs-xs); }
.aui-required::after { content: "*"; margin-left: 2px; color: var(--aui-danger); font-weight: var(--aui-fw-semibold); }
.aui-optional { font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-regular); color: var(--aui-text-subtle); }
.aui-help { display: flex; align-items: flex-start; gap: 6px; font-size: var(--aui-fs-xs); line-height: 1.5; color: var(--aui-text-subtle); }
.aui-help > .aui-icon { width: 13px; height: 13px; margin-top: 2px; }
.aui-help.is-error, .aui-field-error { color: var(--aui-danger); }
.aui-help.is-success { color: var(--aui-success); }
.aui-help.is-warning { color: var(--aui-warning); }
.aui-help-row { display: flex; justify-content: space-between; gap: 12px; }
.aui-counter { margin-left: auto; font-size: var(--aui-fs-2xs); color: var(--aui-text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aui-counter.is-over { color: var(--aui-danger); }

/* ---------- Text-like controls ---------- */
.aui-input, .aui-select, .aui-textarea {
  --_h: var(--aui-control-h); --_px: 12px; --_fs: var(--aui-fs-sm);
  display: block; width: 100%; height: var(--_h); margin: 0; padding: 0 var(--_px); min-width: 0;
  font: inherit; font-size: var(--_fs); line-height: 1.4; color: var(--aui-text);
  background-color: var(--aui-input-bg); border: 1px solid var(--aui-border); border-radius: var(--aui-control-radius);
  box-shadow: var(--aui-shadow-xs); outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color var(--aui-dur-fast), box-shadow var(--aui-dur-fast), background-color var(--aui-dur-fast);
}
.aui-input::placeholder, .aui-textarea::placeholder { color: var(--aui-text-disabled); opacity: 1; }
.aui-input:hover, .aui-select:hover, .aui-textarea:hover { border-color: var(--aui-border-strong); }
.aui-input:focus, .aui-select:focus, .aui-textarea:focus, .aui-input.is-focused { border-color: color-mix(in srgb, var(--aui-accent) 65%, var(--aui-border-interactive)); box-shadow: var(--aui-ring); }
.aui-input:focus-visible, .aui-select:focus-visible, .aui-textarea:focus-visible { outline: none; }
.aui-textarea { height: auto; min-height: 92px; padding: 9px var(--_px); line-height: 1.55; resize: vertical; }
.aui-textarea--code, .aui-input--mono { font-family: var(--aui-font-mono); font-size: var(--aui-fs-xs); }
.aui-textarea[data-aui-autosize] { resize: none; overflow: hidden; }
.aui-select {
  padding-right: 34px; cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.aui-select[multiple], .aui-select[size] { height: auto; padding: 4px; background-image: none; }
.aui-select option { background: var(--aui-surface-elevated); color: var(--aui-text); }
.aui-input[type="number"] { font-variant-numeric: tabular-nums; }
.aui-input[type="search"]::-webkit-search-cancel-button, .aui-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.aui-input[type="date"], .aui-input[type="time"], .aui-input[type="datetime-local"], .aui-input[type="month"] { font-variant-numeric: tabular-nums; }
.aui-input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; filter: invert(.8); }
.aui[data-aui-theme="light"] .aui-input::-webkit-calendar-picker-indicator { filter: none; }
.aui-input[type="color"] { width: var(--_h); padding: 4px; cursor: pointer; }
.aui-input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.aui-input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }

/* Sizes (inputs, selects, addons, input groups) */
:is(.aui-input, .aui-select).aui-input--xs, .aui-input-wrap--xs :is(.aui-input, .aui-select) { --_h: var(--aui-control-h-xs); --_px: 8px; --_fs: var(--aui-fs-2xs); }
:is(.aui-input, .aui-select).aui-input--sm, .aui-input-wrap--sm :is(.aui-input, .aui-select) { --_h: var(--aui-control-h-sm); --_px: 10px; --_fs: var(--aui-fs-xs); }
:is(.aui-input, .aui-select).aui-input--lg, .aui-input-wrap--lg :is(.aui-input, .aui-select) { --_h: var(--aui-control-h-lg); --_px: 14px; --_fs: var(--aui-fs-md); }
:is(.aui-input, .aui-select).aui-input--xl, .aui-input-wrap--xl :is(.aui-input, .aui-select) { --_h: var(--aui-control-h-xl); --_px: 16px; --_fs: var(--aui-fs-lg); border-radius: var(--aui-radius-md); }
.aui-select.aui-input--sm, .aui-select.aui-input--xs { padding-right: 28px; background-position: right 7px center; }
/* Variants */
.aui-input--filled { background-color: var(--aui-surface-2); border-color: transparent; box-shadow: none; }
.aui-input--filled:hover { background-color: var(--aui-surface-3); border-color: transparent; }
.aui-input--ghost { background-color: transparent; border-color: transparent; box-shadow: none; }
.aui-input--ghost:hover { background-color: var(--aui-hover); border-color: transparent; }
.aui-input--pill { border-radius: var(--aui-radius-full); }

/* Validation */
:is(.aui-input, .aui-select, .aui-textarea):is(.is-invalid, [aria-invalid="true"]) { border-color: color-mix(in srgb, var(--aui-danger) 70%, transparent); }
:is(.aui-input, .aui-select, .aui-textarea):is(.is-invalid, [aria-invalid="true"]):focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--aui-danger) 22%, transparent); }
:is(.aui-input, .aui-select, .aui-textarea).is-valid { border-color: color-mix(in srgb, var(--aui-success) 60%, transparent); }
:is(.aui-input, .aui-select, .aui-textarea).is-valid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--aui-success) 20%, transparent); }
:is(.aui-input, .aui-select, .aui-textarea).is-warning { border-color: color-mix(in srgb, var(--aui-warning) 60%, transparent); }
.aui-input.is-shake, .aui-field.is-shake { animation: aui-shake .4s; }
:is(.aui-input, .aui-select, .aui-textarea):disabled { opacity: .55; cursor: not-allowed; background-color: var(--aui-surface-1); box-shadow: none; }
:is(.aui-input, .aui-textarea)[readonly] { background-color: var(--aui-bg-alt); color: var(--aui-text-muted); box-shadow: none; }
:is(.aui-input, .aui-textarea)[readonly]:focus { box-shadow: none; border-color: var(--aui-border-strong); }

/* ---------- Affixes: icons, buttons, text inside the control ----------
   <div class="aui-input-wrap">
     <svg class="aui-icon aui-input-icon">…</svg>          leading icon
     <input class="aui-input">
     <div class="aui-input-end">…</div>                     trailing slot (kbd, button, spinner, unit)
   </div>                                                     */
.aui-input-wrap { --_h: var(--aui-control-h); --_wrap-h: var(--_h); position: relative; display: block; min-width: 0; }
.aui-input-wrap--xs { --_h: var(--aui-control-h-xs); }
.aui-input-wrap--sm { --_h: var(--aui-control-h-sm); }
.aui-input-wrap--lg { --_h: var(--aui-control-h-lg); }
.aui-input-wrap--xl { --_h: var(--aui-control-h-xl); }
.aui-input-wrap > .aui-icon, .aui-input-icon, .aui-input-start {
  position: absolute; left: 11px; top: calc(var(--_h) / 2); transform: translateY(-50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; color: var(--aui-text-subtle); pointer-events: none;
}
.aui-input-start { font-size: var(--aui-fs-sm); }
.aui-input-wrap > .aui-icon ~ :is(.aui-input, .aui-select), .aui-input-wrap > .aui-input-icon ~ :is(.aui-input, .aui-select) { padding-left: 34px; }
.aui-input-wrap--lg > .aui-icon ~ .aui-input, .aui-input-wrap--xl > .aui-icon ~ .aui-input { padding-left: 40px; }
.aui-input-wrap--lg > .aui-icon, .aui-input-wrap--xl > .aui-icon { left: 14px; width: 18px; height: 18px; }
.aui-input-wrap > .aui-input-start ~ .aui-input { padding-left: var(--_start, 44px); }
.aui-input-end {
  position: absolute; right: 5px; top: calc(var(--_h) / 2); transform: translateY(-50%); z-index: 1;
  display: flex; align-items: center; gap: 2px; color: var(--aui-text-subtle); font-size: var(--aui-fs-xs);
}
.aui-input-end > .aui-btn { --_h: calc(var(--_wrap-h, var(--aui-control-h)) - 10px); }
.aui-input-end > .aui-unit { padding: 0 7px; }
.aui-input-wrap:has(> .aui-input-end) > :is(.aui-input, .aui-select) { padding-right: var(--_end, 40px); }
.aui-input-wrap:has(> .aui-input-end > :nth-child(2)) > .aui-input { padding-right: var(--_end, 70px); }
.aui-input-wrap--sm .aui-input-end > .aui-btn { --_h: 22px; }
/* Small icon actions inside inputs: clear ×, show password, copy */
.aui-input-action {
  display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; margin: 0;
  color: var(--aui-text-subtle); background: none; border: 0; border-radius: var(--aui-radius-xs); cursor: pointer;
  transition: color var(--aui-dur-fast), background-color var(--aui-dur-fast);
}
.aui-input-action:hover { color: var(--aui-text); background: var(--aui-hover); }
.aui-input-action .aui-icon { width: 15px; height: 15px; }
.aui-input-wrap--sm .aui-input-action { width: 22px; height: 22px; }
.aui-input-wrap--sm .aui-input-action .aui-icon { width: 13px; height: 13px; }
[data-aui-clear]:not(.is-visible) { visibility: hidden; }
.aui-input-wrap.is-revealed .aui-reveal-off, .aui-input-wrap:not(.is-revealed) .aui-reveal-on { display: none; }
/* Validation icon slot */
.aui-input-status { width: 15px; height: 15px; margin-right: 5px; }
.aui-input-status.is-error { color: var(--aui-danger); }
.aui-input-status.is-success { color: var(--aui-success); }
/* Keyboard hint inside search inputs */
.aui-input-end > .aui-kbd { margin-right: 4px; }

/* ---------- Input group with addons / buttons / selects ---------- */
.aui-input-group { --_h: var(--aui-control-h); display: flex; align-items: stretch; min-width: 0; isolation: isolate; }
.aui-input-group--sm { --_h: var(--aui-control-h-sm); }
.aui-input-group--lg { --_h: var(--aui-control-h-lg); }
.aui-input-group > * { border-radius: 0; box-shadow: none; }
.aui-input-group > :is(.aui-input, .aui-select, .aui-btn) { --_h: inherit; height: var(--_h); }
.aui-input-group > * + * { margin-left: -1px; }
.aui-input-group > :first-child, .aui-input-group > :first-child > :is(.aui-input, .aui-select) { border-top-left-radius: var(--aui-control-radius); border-bottom-left-radius: var(--aui-control-radius); }
.aui-input-group > :last-child, .aui-input-group > :last-child > :is(.aui-input, .aui-select) { border-top-right-radius: var(--aui-control-radius); border-bottom-right-radius: var(--aui-control-radius); }
.aui-input-group > :not(:first-child) > :is(.aui-input, .aui-select) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.aui-input-group > :not(:last-child) > :is(.aui-input, .aui-select) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.aui-input-group > :is(.aui-input, .aui-input-wrap) { flex: 1 1 auto; width: auto; }
.aui-input-group > .aui-select { flex: 0 0 auto; width: auto; }
.aui-input-group > :focus, .aui-input-group > :focus-within, .aui-input-group > :hover { position: relative; z-index: 1; }
.aui-input-addon {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0 12px; height: var(--_h);
  font-size: var(--aui-fs-sm); color: var(--aui-text-subtle); white-space: nowrap;
  background: var(--aui-surface-1); border: 1px solid var(--aui-border);
}
.aui-input-addon--mono { font-family: var(--aui-font-mono); font-size: var(--aui-fs-xs); }
.aui-input-addon .aui-icon { width: 15px; height: 15px; }

/* ---------- Number stepper: <div class="aui-stepper" data-aui-stepper> − <input> + </div> ---------- */
.aui-stepper { --_h: var(--aui-control-h); display: inline-flex; align-self: flex-start; width: max-content; align-items: stretch; height: var(--_h); background: var(--aui-input-bg); border: 1px solid var(--aui-border); border-radius: var(--aui-control-radius); overflow: hidden; box-shadow: var(--aui-shadow-xs); }
.aui-stepper:focus-within { border-color: color-mix(in srgb, var(--aui-accent) 65%, var(--aui-border-interactive)); box-shadow: var(--aui-ring); }
.aui-stepper > input { width: var(--_w, 64px); min-width: 0; padding: 0 4px; margin: 0; text-align: center; font-size: var(--aui-fs-sm); font-variant-numeric: tabular-nums; color: var(--aui-text); background: transparent; border: 0; outline: none; -moz-appearance: textfield; appearance: textfield; }
.aui-stepper > input::-webkit-inner-spin-button, .aui-stepper > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.aui-stepper > button { display: grid; place-items: center; width: var(--_h); flex: none; padding: 0; color: var(--aui-text-muted); background: var(--aui-surface-1); border: 0; cursor: pointer; transition: background-color var(--aui-dur-fast), color var(--aui-dur-fast); }
.aui-stepper > button:first-child { border-right: 1px solid var(--aui-border); }
.aui-stepper > button:last-child { border-left: 1px solid var(--aui-border); }
.aui-stepper > button:hover { color: var(--aui-text); background: var(--aui-surface-2); }
.aui-stepper > button:disabled { opacity: .4; cursor: not-allowed; }
.aui-stepper > button .aui-icon { width: 14px; height: 14px; }
.aui-stepper--sm { --_h: var(--aui-control-h-sm); }
.aui-stepper--lg { --_h: var(--aui-control-h-lg); }

/* ---------- OTP / PIN: <div class="aui-otp" data-aui-otp><input>×6</div> ---------- */
.aui-otp { display: flex; align-items: center; gap: 8px; }
.aui-otp > input {
  width: var(--_s, 44px); height: calc(var(--_s, 44px) * 1.15); padding: 0; margin: 0; text-align: center;
  font-family: var(--aui-font-mono); font-size: 1.25rem; font-weight: var(--aui-fw-semibold); color: var(--aui-text); caret-color: var(--aui-accent);
  background: var(--aui-input-bg); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); outline: none; box-shadow: var(--aui-shadow-xs);
  transition: border-color var(--aui-dur-fast), box-shadow var(--aui-dur-fast);
}
.aui-otp > input:hover { border-color: var(--aui-border-strong); }
.aui-otp > input:focus { border-color: color-mix(in srgb, var(--aui-accent) 65%, var(--aui-border-interactive)); box-shadow: var(--aui-ring); }
.aui-otp > input:not(:placeholder-shown) { border-color: var(--aui-border-strong); }
.aui-otp-sep { width: 10px; height: 2px; flex: none; background: var(--aui-border-interactive); border-radius: 2px; }
.aui-otp.is-invalid > input { border-color: color-mix(in srgb, var(--aui-danger) 70%, transparent); }
.aui-otp.is-valid > input { border-color: color-mix(in srgb, var(--aui-success) 60%, transparent); }
.aui-otp--sm { --_s: 36px; gap: 6px; }
.aui-otp--sm > input { font-size: 1rem; }
.aui-otp--center { justify-content: center; }

/* ---------- Tag input: <div class="aui-tags" data-aui-tags><input></div> ---------- */
.aui-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--aui-control-h); padding: 4px 6px; cursor: text;
  background: var(--aui-input-bg); border: 1px solid var(--aui-border); border-radius: var(--aui-control-radius); box-shadow: var(--aui-shadow-xs);
  transition: border-color var(--aui-dur-fast), box-shadow var(--aui-dur-fast);
}
.aui-tags:hover { border-color: var(--aui-border-strong); }
.aui-tags:focus-within { border-color: color-mix(in srgb, var(--aui-accent) 65%, var(--aui-border-interactive)); box-shadow: var(--aui-ring); }
.aui-tags > input { flex: 1 1 80px; min-width: 60px; height: 24px; padding: 0 4px; margin: 0; font-size: var(--aui-fs-sm); color: var(--aui-text); background: transparent; border: 0; outline: none; }
.aui-tags > input::placeholder { color: var(--aui-text-disabled); }
.aui-tags > .aui-chip { --_h: 24px; padding: 0 8px; background: var(--aui-surface-2); border-color: var(--aui-border-strong); color: var(--aui-text-secondary); }

/* ---------- File input & dropzone ---------- */
.aui-file { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: var(--aui-control-h); padding: 0 4px 0 0; font-size: var(--aui-fs-sm); color: var(--aui-text-subtle); background: var(--aui-input-bg); border: 1px solid var(--aui-border); border-radius: var(--aui-control-radius); overflow: hidden; }
.aui-file > input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aui-file-btn { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px; font-weight: var(--aui-fw-medium); color: var(--aui-text); background: var(--aui-surface-2); border-right: 1px solid var(--aui-border); white-space: nowrap; }
.aui-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-file:hover .aui-file-btn { background: var(--aui-surface-3); }
.aui-file:focus-within { box-shadow: var(--aui-ring); border-color: color-mix(in srgb, var(--aui-accent) 65%, var(--aui-border-interactive)); }
.aui-dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 20px; text-align: center;
  font-size: var(--aui-fs-sm); color: var(--aui-text-muted); background: var(--aui-bg-alt); border: 1.5px dashed var(--aui-border-strong); border-radius: var(--aui-radius-lg);
  cursor: pointer; transition: border-color var(--aui-dur-fast), background-color var(--aui-dur-fast);
}
.aui-dropzone > input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aui-dropzone:hover, .aui-dropzone.is-dragover { border-color: var(--aui-accent); background: color-mix(in srgb, var(--aui-accent) 6%, var(--aui-bg-alt)); }
.aui-dropzone:focus-within { box-shadow: var(--aui-ring); }
.aui-dropzone-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; color: var(--aui-text-secondary); background: var(--aui-surface-2); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); }
.aui-dropzone-title { font-weight: var(--aui-fw-medium); color: var(--aui-text); }
.aui-dropzone-title b { color: var(--aui-link); font-weight: var(--aui-fw-medium); }
.aui-dropzone-hint { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-file-list { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.aui-file-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: var(--aui-fs-sm); background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); }
.aui-file-item-body { flex: 1; min-width: 0; }
.aui-file-item-name { color: var(--aui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-file-item-meta { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-file-item .aui-progress { margin-top: 6px; }

/* ---------- Range slider: <input type="range" class="aui-range"> (fill via --_p, set by JS) ---------- */
.aui-range { --_p: 50%; --_t: var(--aui-tone, var(--aui-accent)); width: 100%; height: 20px; margin: 0; padding: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
.aui-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--_t) var(--_p), var(--aui-surface-4) var(--_p)); }
.aui-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--aui-surface-4); }
.aui-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--_t); }
.aui-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgb(0 0 0 / .25), 0 2px 6px rgb(0 0 0 / .35); transition: transform var(--aui-dur-fast); }
.aui-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgb(0 0 0 / .25), 0 2px 6px rgb(0 0 0 / .35); }
.aui-range:hover::-webkit-slider-thumb { transform: scale(1.1); }
.aui-range:focus-visible { outline: none; }
.aui-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--_t) 30%, transparent); }
.aui-range:disabled { opacity: .45; cursor: not-allowed; }
.aui-range-row { display: flex; align-items: center; gap: 12px; }
.aui-range-value { min-width: 40px; text-align: right; font-size: var(--aui-fs-xs); font-variant-numeric: tabular-nums; color: var(--aui-text); }
.aui-range-labels { display: flex; justify-content: space-between; margin-top: 2px; font-size: var(--aui-fs-2xs); color: var(--aui-text-subtle); }

/* ---------- Checkbox & radio: <label class="aui-check"><input type="checkbox"><span>Label</span></label> ---------- */
.aui-check { --_s: 16px; position: relative; display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--aui-fs-sm); line-height: 1.45; color: var(--aui-text-secondary); cursor: pointer; }
.aui-check > input, input.aui-checkbox, input.aui-radio {
  appearance: none; -webkit-appearance: none; flex: none; width: var(--_s, 16px); height: var(--_s, 16px); margin: calc((1.45em - var(--_s, 16px)) / 2) 0 0; display: inline-grid; place-content: center;
  background: var(--aui-input-bg); border: 1px solid var(--aui-border-interactive); border-radius: 4px; cursor: pointer;
  transition: background-color var(--aui-dur-fast), border-color var(--aui-dur-fast), box-shadow var(--aui-dur-fast);
}
.aui-check > input[type="radio"], input.aui-radio { border-radius: 50%; }
.aui-check > input::before, input.aui-checkbox::before, input.aui-radio::before {
  content: ""; width: calc(var(--_s, 16px) * .62); height: calc(var(--_s, 16px) * .62); transform: scale(0); transition: transform var(--aui-dur-fast) var(--aui-ease); background: var(--aui-on-accent);
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 22%, 84% 6%, 40% 66%);
}
.aui-check > input[type="radio"]::before, input.aui-radio::before { width: calc(var(--_s, 16px) * .38); height: calc(var(--_s, 16px) * .38); border-radius: 50%; clip-path: none; }
.aui-check > input:checked, .aui-check > input:indeterminate, input:is(.aui-checkbox, .aui-radio):is(:checked, :indeterminate) { background: var(--aui-accent); border-color: var(--aui-accent); }
.aui-check > input:checked::before, input:is(.aui-checkbox, .aui-radio):checked::before { transform: scale(1); }
.aui-check > input:indeterminate::before, input.aui-checkbox:indeterminate::before { transform: scale(1); height: 2px; width: 8px; clip-path: none; }
.aui-check > input:hover:not(:checked), input:is(.aui-checkbox, .aui-radio):hover:not(:checked) { border-color: var(--aui-text-subtle); }
.aui-check > input:focus-visible, input:is(.aui-checkbox, .aui-radio):focus-visible { outline: 2px solid var(--aui-focus); outline-offset: 2px; }
.aui-check > input.is-invalid, .aui-check > input[aria-invalid="true"] { border-color: var(--aui-danger); }
.aui-check > input:disabled { opacity: .45; cursor: not-allowed; }
.aui-check:has(> input:disabled) { cursor: not-allowed; color: var(--aui-text-disabled); }
.aui-check-body { display: flex; flex-direction: column; min-width: 0; }
.aui-check-title { color: var(--aui-text); font-weight: var(--aui-fw-medium); }
.aui-check-desc { display: block; margin-top: 2px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-check--sm { --_s: 14px; font-size: var(--aui-fs-xs); gap: 8px; }
.aui-check--lg { --_s: 18px; font-size: var(--aui-fs-md); }
.aui-check-group { display: flex; flex-direction: column; gap: 10px; }
.aui-check-group--row { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }

/* ---------- Switch: <label class="aui-switch"><input type="checkbox" role="switch"><span>Label</span></label> ---------- */
.aui-switch { --_w: 34px; --_h: 20px; --_t: var(--aui-tone, var(--aui-accent)); display: inline-flex; align-items: center; gap: 10px; font-size: var(--aui-fs-sm); color: var(--aui-text-secondary); cursor: pointer; }
.aui-switch > input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: var(--_w); height: var(--_h); margin: 0;
  background: var(--aui-surface-4); border: 1px solid var(--aui-border-strong); border-radius: 999px; cursor: pointer;
  transition: background-color var(--aui-dur), border-color var(--aui-dur);
}
.aui-switch > input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: calc(var(--_h) - 6px); height: calc(var(--_h) - 6px); border-radius: 50%;
  background: var(--aui-text-muted); box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform var(--aui-dur) var(--aui-ease-out), background-color var(--aui-dur), width var(--aui-dur);
}
.aui-switch > input:active::before { width: calc(var(--_h) - 2px); }
.aui-switch > input:checked { background: var(--_t); border-color: var(--_t); }
.aui-switch > input:checked::before { transform: translateX(calc(var(--_w) - var(--_h))); background: #fff; }
.aui-switch > input:checked:active::before { transform: translateX(calc(var(--_w) - var(--_h) - 4px)); }
.aui-switch > input:focus-visible { outline: 2px solid var(--aui-focus); outline-offset: 2px; }
.aui-switch > input:disabled { opacity: .45; cursor: not-allowed; }
.aui-switch:has(> input:disabled) { cursor: not-allowed; color: var(--aui-text-disabled); }
.aui-switch--sm { --_w: 28px; --_h: 16px; font-size: var(--aui-fs-xs); }
.aui-switch--lg { --_w: 42px; --_h: 24px; }
.aui-switch--end { flex-direction: row-reverse; justify-content: space-between; width: 100%; }

/* ---------- Choice cards: radio/checkbox as selectable cards ----------
   <label class="aui-choice"><input type="radio" name="plan"><span class="aui-choice-body">…</span></label> */
.aui-choice-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px; }
.aui-choice {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; min-width: 0; cursor: pointer;
  background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md);
  transition: border-color var(--aui-dur-fast), background-color var(--aui-dur-fast), box-shadow var(--aui-dur-fast);
}
.aui-choice:hover { border-color: var(--aui-border-strong); background: var(--aui-surface-2); }
.aui-choice > input { position: absolute; opacity: 0; pointer-events: none; }
.aui-choice > input.aui-checkbox, .aui-choice > input.aui-radio { position: static; opacity: 1; pointer-events: auto; margin-top: 2px; }
.aui-choice:has(> input:checked) { border-color: var(--aui-accent); background: color-mix(in srgb, var(--aui-accent) 6%, var(--aui-surface-1)); box-shadow: 0 0 0 1px var(--aui-accent); }
.aui-choice:has(> input:focus-visible) { outline: 2px solid var(--aui-focus); outline-offset: 2px; }
.aui-choice:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
.aui-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aui-choice-title { font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-choice-desc { font-size: var(--aui-fs-xs); line-height: 1.5; color: var(--aui-text-subtle); }
.aui-choice-end { margin-left: auto; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-semibold); color: var(--aui-text); white-space: nowrap; }
.aui-choice-check { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--aui-border-interactive); color: transparent; transition: all var(--aui-dur-fast); }
.aui-choice-check .aui-icon { width: 12px; height: 12px; stroke-width: 3; }
.aui-choice:has(> input:checked) .aui-choice-check { color: var(--aui-on-accent); background: var(--aui-accent); border-color: var(--aui-accent); }
.aui-choice--center { flex-direction: column; align-items: center; text-align: center; }
.aui-choice--center .aui-choice-body { align-items: center; }

/* ---------- Enhanced select / combobox (JS: <select class="aui-select" data-aui-select>) ---------- */
.aui-combobox { position: relative; display: block; min-width: 0; }
.aui-combobox > select { position: absolute; inset: auto 0 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.aui-combobox-trigger {
  --_h: var(--aui-control-h);
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: var(--_h); padding: 3px 34px 3px 12px; margin: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--aui-fs-sm); color: var(--aui-text);
  background: var(--aui-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center / 15px;
  border: 1px solid var(--aui-border); border-radius: var(--aui-control-radius); box-shadow: var(--aui-shadow-xs);
  transition: border-color var(--aui-dur-fast), box-shadow var(--aui-dur-fast);
}
.aui-combobox-trigger:hover { border-color: var(--aui-border-strong); }
.aui-combobox-trigger:focus-visible, .aui-combobox.is-open .aui-combobox-trigger { outline: none; border-color: color-mix(in srgb, var(--aui-accent) 65%, var(--aui-border-interactive)); box-shadow: var(--aui-ring); }
.aui-combobox-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; overflow: hidden; }
.aui-combobox-value > span:only-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-combobox-placeholder { color: var(--aui-text-disabled); }
.aui-combobox-value > .aui-chip { --_h: 22px; padding: 0 7px; background: var(--aui-surface-2); border-color: var(--aui-border-strong); color: var(--aui-text-secondary); }
.aui-combobox--sm .aui-combobox-trigger { --_h: var(--aui-control-h-sm); font-size: var(--aui-fs-xs); padding-left: 10px; }
.aui-combobox--lg .aui-combobox-trigger { --_h: var(--aui-control-h-lg); font-size: var(--aui-fs-md); }
.aui-combobox.is-disabled .aui-combobox-trigger { opacity: .55; cursor: not-allowed; }
.aui-combobox > .aui-menu { width: 100%; max-height: 320px; display: flex; flex-direction: column; }
.aui-combobox .aui-menu-list { overflow-y: auto; overscroll-behavior: contain; }
.aui-combobox-empty { padding: 14px 10px; font-size: var(--aui-fs-sm); text-align: center; color: var(--aui-text-subtle); }

/* ---------- Composed form layouts ---------- */
.aui-form { display: flex; flex-direction: column; gap: 18px; }
.aui-form--compact { gap: 12px; }
.aui-form-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 18px 16px; }
.aui-form-grid--3 { --cols: 3; }
.aui-form-grid > .aui-span-full { grid-column: 1 / -1; }
.aui-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.aui-form-actions--start { justify-content: flex-start; }
.aui-form-actions--between { justify-content: space-between; }
.aui-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aui-fieldset > legend { padding: 0; margin-bottom: 8px; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text-secondary); }
.aui-fieldset--card { padding: 18px; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); }
.aui-fieldset--card > legend { float: left; width: 100%; margin-bottom: 14px; }
.aui-option-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; border-top: 1px solid var(--aui-border-soft); }
.aui-option-row:first-child { border-top: 0; padding-top: 0; }
.aui-option-row:last-child { padding-bottom: 0; }
.aui-option-row-body { min-width: 0; }
.aui-option-row-title { font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text); }
.aui-option-row-desc { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); margin-top: 2px; }

/* Date range trigger (visual) */
.aui-daterange {
  display: inline-flex; align-items: center; gap: 8px; height: var(--aui-control-h); padding: 0 12px;
  font-size: var(--aui-fs-sm); color: var(--aui-text-secondary); background: var(--aui-input-bg);
  border: 1px solid var(--aui-border); border-radius: var(--aui-control-radius); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.aui-daterange--sm { height: var(--aui-control-h-sm); padding: 0 10px; font-size: var(--aui-fs-xs); }
.aui-daterange:hover { border-color: var(--aui-border-strong); }
.aui-daterange .aui-icon { color: var(--aui-text-subtle); }
.aui-daterange-sep { color: var(--aui-text-disabled); }

/* Password strength meter */
.aui-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.aui-strength > span { height: 4px; border-radius: 4px; background: var(--aui-surface-4); transition: background-color var(--aui-dur); }
.aui-strength[data-level="1"] > span:nth-child(-n+1) { background: var(--aui-danger); }
.aui-strength[data-level="2"] > span:nth-child(-n+2) { background: var(--aui-warning); }
.aui-strength[data-level="3"] > span:nth-child(-n+3) { background: var(--aui-info); }
.aui-strength[data-level="4"] > span { background: var(--aui-success); }

@media (max-width: 760px) {
  .aui-form-grid, .aui-form-grid--3 { --cols: 1; }
  .aui-choice-grid { --cols: 1; }
  .aui-field--horizontal { grid-template-columns: minmax(0, 1fr); }
  .aui-field--horizontal > :not(.aui-label) { grid-column: 1; }
  .aui-field--horizontal > .aui-label { padding-top: 0; }
  .aui-option-row { align-items: flex-start; }
  .aui-otp { gap: 6px; }
  .aui-input, .aui-select, .aui-textarea, .aui-combobox-trigger, .aui-tags > input { font-size: max(16px, var(--_fs, 16px)); } /* prevent iOS zoom */
}

/* ==========================================================================
   Armsys UI 2 — Dropdown menus, context menus, submenus, popovers, tooltips
   JS positions open menus with position:fixed and flips/shifts them inside
   the viewport (works inside overflow:hidden cards & tables). On phones a
   menu opens as a bottom sheet unless data-aui-sheet="false".
   ========================================================================== */
.aui-dropdown { position: relative; display: inline-flex; vertical-align: middle; }
.aui-dropdown--block { display: flex; }
.aui-menu {
  --_w: 220px;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--aui-z-dropdown); min-width: var(--_w); max-width: min(360px, calc(100vw - 16px)); padding: 4px;
  font-size: var(--aui-fs-sm); color: var(--aui-text-secondary); text-align: left;
  background: var(--aui-surface-elevated); border: 1px solid var(--aui-border-strong); border-radius: var(--aui-radius-lg); box-shadow: var(--aui-shadow-overlay);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: var(--_origin, top left);
  transition: opacity var(--aui-dur-fast), transform var(--aui-dur-fast) var(--aui-ease-out), visibility 0s linear var(--aui-dur-fast);
}
.aui-dropdown.is-open > .aui-menu, .aui-menu.is-open, .aui-menu.is-static { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.aui-menu.is-static { position: relative; top: auto; left: auto; z-index: auto; }
.aui-menu.is-floating { position: fixed; top: 0; left: 0; margin: 0; }
.aui-menu[data-placement^="top"] { --_origin: bottom left; }
.aui-menu--end { left: auto; right: 0; --_origin: top right; }
.aui-menu--up { top: auto; bottom: calc(100% + 6px); --_origin: bottom left; }
.aui-menu--context { position: fixed; top: 0; left: 0; }
.aui-menu--sm { --_w: 168px; }
.aui-menu--lg { --_w: 280px; }
.aui-menu--xl { --_w: 340px; }
.aui-menu--scroll { max-height: min(360px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.aui-menu-list { display: flex; flex-direction: column; gap: 1px; }

.aui-menu-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; margin: 0;
  font: inherit; font-size: var(--aui-fs-sm); line-height: 1.35; color: var(--aui-text-secondary); text-align: left; text-decoration: none; white-space: nowrap;
  background: none; border: 0; border-radius: var(--aui-radius-sm); cursor: pointer; outline: none; user-select: none; -webkit-user-select: none;
}
.aui-menu-item > .aui-icon { width: 16px; height: 16px; color: var(--aui-text-subtle); }
.aui-menu-item:hover, .aui-menu-item:focus-visible, .aui-menu-item.is-highlighted { background: var(--aui-hover); color: var(--aui-text); }
.aui-menu-item:focus-visible { box-shadow: inset 0 0 0 1px var(--aui-border-strong); }
.aui-menu-item:hover > .aui-icon, .aui-menu-item.is-highlighted > .aui-icon { color: var(--aui-text-muted); }
.aui-menu-item.is-active, .aui-menu-item[aria-current="true"], .aui-menu-item[aria-selected="true"] { color: var(--aui-text); }
.aui-menu-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aui-menu-item-title { color: var(--aui-text); font-weight: var(--aui-fw-medium); overflow: hidden; text-overflow: ellipsis; }
.aui-menu-item-desc { margin-top: 1px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); white-space: normal; }
.aui-menu-item:has(.aui-menu-item-desc) { align-items: flex-start; padding-block: 8px; }
.aui-menu-item:has(.aui-menu-item-desc) > .aui-icon { margin-top: 1px; }
.aui-menu-item:has(.aui-menu-item-desc) > .aui-icon-box { margin-top: 0; }
.aui-menu-item > .aui-icon-box { --_s: 30px; }
.aui-menu-item-end, .aui-menu-item > .aui-kbd, .aui-menu-item > .aui-kbd-group, .aui-menu-item > .aui-badge { margin-left: auto; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-menu-item > .aui-kbd ~ .aui-kbd { margin-left: 2px; }
.aui-menu-item--danger, .aui-menu-item--danger > .aui-icon { color: var(--aui-danger) !important; }
.aui-menu-item--danger:hover, .aui-menu-item--danger.is-highlighted { background: color-mix(in srgb, var(--aui-danger) 11%, transparent); }
.aui-menu-item:disabled, .aui-menu-item.is-disabled, .aui-menu-item[aria-disabled="true"] { opacity: .42; pointer-events: none; }
/* Checkable items: role="menuitemcheckbox|menuitemradio" + aria-checked */
.aui-menu-item[role="menuitemcheckbox"], .aui-menu-item[role="menuitemradio"], .aui-menu-item[role="option"] { padding-left: 32px; }
.aui-menu-item:is([role="menuitemcheckbox"], [role="menuitemradio"], [role="option"])::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: 0;
  background: var(--aui-text); transition: opacity var(--aui-dur-fast);
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 22%, 84% 6%, 40% 66%); transform: scale(.72);
}
.aui-menu-item[role="menuitemradio"]::before { clip-path: circle(28% at 50% 50%); transform: none; }
.aui-menu-item:is([aria-checked="true"], [aria-selected="true"])::before { opacity: 1; }
.aui-menu-item[role="option"]:has(.aui-menu-item-desc)::before { top: 18px; }
/* Submenu: <div class="aui-menu-sub"><button class="aui-menu-item">More…</button><div class="aui-menu">…</div></div> */
.aui-menu-sub { position: relative; }
.aui-menu-sub > .aui-menu-item::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid var(--aui-text-subtle); border-bottom: 1.5px solid var(--aui-text-subtle); transform: rotate(-45deg); }
.aui-menu-sub > .aui-menu { top: -5px; left: calc(100% + 2px); --_origin: top left; }
.aui-menu-sub:hover > .aui-menu, .aui-menu-sub.is-open > .aui-menu, .aui-menu-sub:focus-within > .aui-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.aui-menu-sub.is-flip > .aui-menu { left: auto; right: calc(100% + 2px); }
.aui-menu-sub:hover > .aui-menu-item, .aui-menu-sub.is-open > .aui-menu-item { background: var(--aui-hover); color: var(--aui-text); }

.aui-menu-label { padding: 8px 10px 4px; font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--aui-text-subtle); }
.aui-menu-sep { height: 1px; margin: 4px -4px; background: var(--aui-border-soft); border: 0; }
.aui-menu-header { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin: 0 0 4px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-menu-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin: 4px -4px -4px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); background: var(--aui-bg-alt); border-top: 1px solid var(--aui-border-soft); border-radius: 0 0 var(--aui-radius-lg) var(--aui-radius-lg); }
.aui-menu-search { position: relative; margin: -4px -4px 4px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-menu-search > .aui-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--aui-text-subtle); pointer-events: none; }
.aui-menu-search > input { width: 100%; height: 40px; padding: 0 12px 0 36px; margin: 0; font-size: var(--aui-fs-sm); color: var(--aui-text); background: transparent; border: 0; outline: none; }
.aui-menu-search > input::placeholder { color: var(--aui-text-disabled); }
.aui-menu-empty { padding: 16px 10px; text-align: center; font-size: var(--aui-fs-sm); color: var(--aui-text-subtle); }
.aui-menu-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 2px; }

/* Mobile bottom-sheet presentation (added by JS on small screens) */
.aui-menu.is-sheet {
  position: fixed; inset: auto 0 0 0; width: auto; max-width: none; min-width: 0; max-height: 78vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 8px calc(10px + env(safe-area-inset-bottom)); z-index: var(--aui-z-modal); font-size: var(--aui-fs-md);
  border-radius: var(--aui-radius-2xl) var(--aui-radius-2xl) 0 0; border-width: 1px 0 0; transform: translateY(100%); opacity: 1;
  transition: transform var(--aui-dur-slow) var(--aui-ease-out), visibility 0s linear var(--aui-dur-slow);
}
.aui-menu.is-sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--aui-border-interactive); }
.aui-dropdown.is-open > .aui-menu.is-sheet, .aui-menu.is-sheet.is-open { transform: none; transition-delay: 0s; }
.aui-menu.is-sheet .aui-menu-item { min-height: 46px; padding-inline: 14px; font-size: var(--aui-fs-md); }
.aui-menu.is-sheet .aui-menu-item:is([role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]) { padding-left: 38px; }
.aui-menu.is-sheet .aui-menu-item:is([role="menuitemcheckbox"], [role="menuitemradio"], [role="option"])::before { left: 14px; }
.aui-menu.is-sheet .aui-menu-sub > .aui-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px; background: transparent; min-width: 0; display: none; }
.aui-menu.is-sheet .aui-menu-sub.is-open > .aui-menu { display: block; }
.aui-sheet-backdrop { position: fixed; inset: 0; z-index: calc(var(--aui-z-modal) - 1); background: var(--aui-overlay); animation: aui-fade-in var(--aui-dur) ease-out; -webkit-tap-highlight-color: transparent; }
.aui-sheet-backdrop.is-leaving { animation: aui-fade-out var(--aui-dur) ease-in forwards; }

/* ---------- Popover: rich floating panel (data-aui-popover="#id") ---------- */
.aui-popover {
  position: absolute; z-index: var(--aui-z-dropdown); width: max-content; min-width: 240px; max-width: min(380px, calc(100vw - 16px)); padding: 14px;
  font-size: var(--aui-fs-sm); color: var(--aui-text-secondary);
  background: var(--aui-surface-elevated); border: 1px solid var(--aui-border-strong); border-radius: var(--aui-radius-lg); box-shadow: var(--aui-shadow-overlay);
  opacity: 0; visibility: hidden; transform: scale(.97); transform-origin: var(--_origin, top center);
  transition: opacity var(--aui-dur-fast), transform var(--aui-dur-fast) var(--aui-ease-out), visibility 0s linear var(--aui-dur-fast);
}
.aui-popover.is-open, .aui-popover.is-static, .aui-dropdown.is-open > .aui-popover { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.aui-popover.is-static { position: relative; }
.aui-popover.is-floating { position: fixed; top: 0; left: 0; }
.aui-dropdown > .aui-popover { top: calc(100% + 8px); left: 0; }
.aui-dropdown > .aui-popover--end { left: auto; right: 0; }
.aui-dropdown > .aui-popover--center { left: 50%; translate: -50% 0; }
.aui-popover.is-floating { translate: none; }
.aui-popover--flush { padding: 0; }
.aui-popover--lg { min-width: 320px; max-width: min(460px, calc(100vw - 16px)); }
.aui-popover-header { display: flex; align-items: center; gap: 10px; margin: -14px -14px 12px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-popover-title { font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-popover-header > .aui-close, .aui-popover-header > .aui-btn:last-child { margin-left: auto; }
.aui-popover-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 12px -14px -14px; padding: 10px 14px; background: var(--aui-bg-alt); border-top: 1px solid var(--aui-border-soft); border-radius: 0 0 var(--aui-radius-lg) var(--aui-radius-lg); }
.aui-popover-arrow { position: absolute; width: 10px; height: 10px; background: inherit; border: 1px solid var(--aui-border-strong); border-width: 1px 0 0 1px; transform: rotate(45deg); }
.aui-popover[data-placement^="bottom"] > .aui-popover-arrow { top: -6px; left: var(--_ax, 50%); margin-left: -5px; }
.aui-popover[data-placement^="top"] > .aui-popover-arrow { bottom: -6px; left: var(--_ax, 50%); margin-left: -5px; transform: rotate(225deg); }

/* ---------- Tooltip (CSS only): data-aui-tooltip="Copy" [data-aui-tooltip-pos="top|bottom|left|right"] ---------- */
.aui [data-aui-tooltip] { position: relative; }
.aui [data-aui-tooltip]::after {
  content: attr(data-aui-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: var(--aui-z-tooltip);
  width: max-content; max-width: 260px; padding: 5px 8px; white-space: normal; text-align: center;
  font-family: var(--aui-font); font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-medium); line-height: 1.35; letter-spacing: 0; text-transform: none;
  color: var(--aui-bg); background: var(--aui-text); border-radius: var(--aui-radius-xs); box-shadow: var(--aui-shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 3px); transition: opacity var(--aui-dur-fast), transform var(--aui-dur-fast), visibility 0s linear var(--aui-dur-fast);
}
.aui [data-aui-tooltip]:hover::after, .aui [data-aui-tooltip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .3s; }
.aui [data-aui-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -3px); }
.aui [data-aui-tooltip-pos="left"]::after { left: auto; right: calc(100% + 8px); bottom: 50%; transform: translate(3px, 50%); }
.aui [data-aui-tooltip-pos="left"]:hover::after, .aui [data-aui-tooltip-pos="left"]:focus-visible::after { transform: translate(0, 50%); }
.aui [data-aui-tooltip-pos="right"]::after { left: calc(100% + 8px); bottom: 50%; transform: translate(-3px, 50%); }
.aui [data-aui-tooltip-pos="right"]:hover::after, .aui [data-aui-tooltip-pos="right"]:focus-visible::after { transform: translate(0, 50%); }
.aui [data-aui-tooltip=""]::after { display: none; }
@media (hover: none) { .aui [data-aui-tooltip]::after { display: none; } }

@media (max-width: 640px) {
  .aui-menu-sub > .aui-menu { left: 8px; top: calc(100% - 2px); }
}

/* ==========================================================================
   Armsys UI 2 — Overlays: modal, dialog, drawer, bottom sheet
   All use native <dialog> (focus trap, Escape, top layer). JS adds
   enter/exit animations, scroll-lock, backdrop click and drag-to-dismiss.

   Modals become bottom sheets on phones (≤640px) like Flutter's
   showModalBottomSheet — opt out with .aui-modal--no-sheet.
   ========================================================================== */
.aui-modal, .aui-drawer, .aui-sheet {
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  color: var(--aui-text); font-size: var(--aui-fs-md);
  background: var(--aui-surface-elevated); box-shadow: var(--aui-shadow-overlay); overflow: hidden;
}
.aui-modal::backdrop, .aui-drawer::backdrop, .aui-sheet::backdrop { background: var(--aui-overlay); animation: aui-fade-in var(--aui-dur) ease-out; }
:is(.aui-modal, .aui-drawer, .aui-sheet).is-closing::backdrop { animation: aui-fade-out var(--aui-dur) ease-in forwards; }
.aui-modal--blur::backdrop, .aui-sheet--blur::backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ---------- Modal ---------- */
.aui-modal {
  --_w: 520px;
  width: min(var(--_w), calc(100vw - 32px)); max-height: min(calc(100dvh - 48px), 880px); margin: auto;
  border: 1px solid var(--aui-border-strong); border-radius: var(--aui-radius-xl);
}
.aui-modal[open], .aui-modal.is-static { display: flex; flex-direction: column; }
.aui-modal[open] { animation: aui-rise var(--aui-dur) var(--aui-ease-out); }
.aui-modal.is-closing { animation: aui-sink var(--aui-dur-fast) var(--aui-ease-in) forwards; }
.aui-modal.is-static { position: relative; margin: 0; width: 100%; max-width: var(--_w); box-shadow: var(--aui-shadow-md); }
.aui-modal--sm { --_w: 400px; }
.aui-modal--lg { --_w: 720px; }
.aui-modal--xl { --_w: 960px; }
.aui-modal--full { --_w: 100vw; width: calc(100vw - 32px); height: calc(100dvh - 32px); max-height: none; }
.aui-modal--center { text-align: center; }
.aui-modal--center .aui-modal-header { flex-direction: column; align-items: center; padding-top: 24px; }
.aui-modal--center .aui-modal-header > .aui-close { position: absolute; top: 12px; right: 12px; }
.aui-modal--center .aui-modal-footer { justify-content: center; }

.aui-modal-header { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 0; flex: none; }
.aui-modal-header > .aui-icon-box { margin-top: -2px; }
.aui-modal-heading { flex: 1; min-width: 0; }
.aui-modal-title { font-size: var(--aui-fs-lg); font-weight: var(--aui-fw-semibold); letter-spacing: -.012em; line-height: 1.35; color: var(--aui-text); }
.aui-modal-desc { margin-top: 4px; font-size: var(--aui-fs-sm); line-height: 1.55; color: var(--aui-text-muted); }
.aui-modal-header > .aui-close { margin: -4px -6px 0 auto; }
.aui-modal-header--bordered { padding-bottom: 16px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-modal-body { flex: 1 1 auto; min-height: 0; padding: 18px 20px 20px; overflow-y: auto; overscroll-behavior: contain; color: var(--aui-text-secondary); }
.aui-modal-header + .aui-modal-footer { margin-top: 20px; }
.aui-modal-body--flush { padding: 0; }
.aui-modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: none; padding: 14px 20px; background: var(--aui-bg-alt); border-top: 1px solid var(--aui-border-soft); }
.aui-modal-footer > .aui-spacer { flex: 1; }
.aui-modal-footer--plain { background: transparent; border-top: 0; padding-top: 0; }
.aui-modal-footer--stack { flex-direction: column-reverse; align-items: stretch; }
.aui-modal-footer--split > * { flex: 1; }
.aui-modal-hero { display: grid; place-items: center; height: 140px; margin: -1px -1px 0; background: var(--aui-bg-alt); border-bottom: 1px solid var(--aui-border-soft); }

/* ---------- Drawer (side / top / bottom panel) ---------- */
.aui-drawer {
  --_w: 440px;
  position: fixed; inset: 0 0 0 auto; width: min(var(--_w), 100vw); height: 100%; height: 100dvh;
  border-left: 1px solid var(--aui-border-strong);
}
.aui-drawer[open] { display: flex; flex-direction: column; animation: aui-slide-in-right var(--aui-dur-slow) var(--aui-ease-out); }
.aui-drawer.is-closing { animation: aui-slide-out-right var(--aui-dur) var(--aui-ease-in) forwards; }
.aui-drawer--left { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--aui-border-strong); }
.aui-drawer--left[open] { animation-name: aui-slide-in-left; }
.aui-drawer--left.is-closing { animation-name: aui-slide-out-left; }
.aui-drawer--top, .aui-drawer--bottom { width: 100%; height: auto; max-height: 85dvh; border: 0; }
.aui-drawer--top { inset: 0 0 auto 0; border-bottom: 1px solid var(--aui-border-strong); }
.aui-drawer--top[open] { animation-name: aui-slide-in-down; }
.aui-drawer--top.is-closing { animation-name: aui-slide-out-up; }
.aui-drawer--bottom { inset: auto 0 0 0; border-top: 1px solid var(--aui-border-strong); }
.aui-drawer--bottom[open] { animation-name: aui-slide-in-up; }
.aui-drawer--bottom.is-closing { animation-name: aui-slide-out-down; }
.aui-drawer--sm { --_w: 340px; }
.aui-drawer--lg { --_w: 640px; }
.aui-drawer--xl { --_w: 860px; }
.aui-drawer--inset { inset: 8px 8px 8px auto; height: calc(100dvh - 16px); border: 1px solid var(--aui-border-strong); border-radius: var(--aui-radius-xl); }
.aui-drawer .aui-modal-header { padding: 0 12px 0 20px; min-height: var(--aui-header-h); align-items: center; border-bottom: 1px solid var(--aui-border-soft); }
.aui-drawer .aui-modal-header > .aui-close { margin: 0 0 0 auto; }
.aui-drawer .aui-modal-body { padding: 20px; }

/* ---------- Bottom sheet (all screen sizes) ----------
   <dialog class="aui-sheet" id="s"><div class="aui-sheet-handle"></div> … </dialog> */
.aui-sheet {
  --_w: 640px;
  position: fixed; inset: auto 0 0 0; width: min(var(--_w), 100vw); max-height: 92dvh; margin: 0 auto;
  border: 1px solid var(--aui-border-strong); border-bottom: 0; border-radius: var(--aui-radius-2xl) var(--aui-radius-2xl) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.aui-sheet[open] { display: flex; flex-direction: column; animation: aui-slide-in-up var(--aui-dur-slow) var(--aui-ease-out); }
.aui-sheet.is-closing { animation: aui-slide-out-down var(--aui-dur) var(--aui-ease-in) forwards; }
.aui-sheet.is-dragging { animation: none; transition: none; }
.aui-sheet--full { height: 92dvh; }
.aui-sheet-handle, .aui-modal-handle { display: none; flex: none; position: relative; height: 22px; cursor: grab; touch-action: none; }
.aui-sheet-handle::before, .aui-modal-handle::before { content: ""; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--aui-border-interactive); }
.aui-sheet > .aui-sheet-handle { display: block; }
.aui-sheet > .aui-sheet-handle + .aui-modal-header { padding-top: 4px; }
.aui-sheet .aui-modal-footer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }

/* ---------- Phones: modals present as bottom sheets ---------- */
@media (max-width: 640px) {
  .aui-modal:not(.aui-modal--no-sheet):not(.is-static) {
    width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0;
    border-width: 1px 0 0; border-radius: var(--aui-radius-2xl) var(--aui-radius-2xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .aui-modal:not(.aui-modal--no-sheet):not(.is-static)[open] { animation: aui-slide-in-up var(--aui-dur-slow) var(--aui-ease-out); }
  .aui-modal:not(.aui-modal--no-sheet):not(.is-static).is-closing { animation: aui-slide-out-down var(--aui-dur) var(--aui-ease-in) forwards; }
  .aui-modal:not(.aui-modal--no-sheet):not(.is-static).is-dragging { animation: none; }
  .aui-modal:not(.aui-modal--no-sheet):not(.is-static) > .aui-modal-handle { display: block; }
  .aui-modal:not(.aui-modal--no-sheet):not(.is-static) > .aui-modal-handle + .aui-modal-header { padding-top: 4px; }
  .aui-modal:not(.aui-modal--no-sheet):not(.is-static) .aui-modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .aui-modal:not(.aui-modal--no-sheet):not(.is-static) .aui-modal-footer > .aui-btn { width: 100%; --_h: var(--aui-control-h-lg); }
  .aui-modal:not(.aui-modal--no-sheet):not(.is-static) .aui-modal-footer > .aui-spacer { display: none; }
  .aui-modal--full:not(.aui-modal--no-sheet) { height: 92dvh; }
  .aui-sheet { width: 100%; border-left: 0; border-right: 0; }
  .aui-drawer:not(.aui-drawer--left):not(.aui-drawer--top) { --_w: 100vw; }
}

/* ---------- Command palette (⌘K): <dialog class="aui-command" data-aui-command> ---------- */
.aui-command {
  --_w: 620px;
  width: min(var(--_w), calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 120px)); margin: 12vh auto auto;
  border: 1px solid var(--aui-border-strong); border-radius: var(--aui-radius-xl);
  color: var(--aui-text); background: var(--aui-surface-elevated); box-shadow: var(--aui-shadow-overlay); padding: 0; overflow: hidden;
}
.aui-command[open] { display: flex; flex-direction: column; animation: aui-pop var(--aui-dur) var(--aui-ease-out); }
.aui-command.is-closing { animation: aui-fade-out var(--aui-dur-fast) ease-in forwards; }
.aui-command::backdrop { background: var(--aui-overlay); animation: aui-fade-in var(--aui-dur) ease-out; }
.aui-command-search { position: relative; flex: none; border-bottom: 1px solid var(--aui-border-soft); }
.aui-command-search > .aui-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--aui-text-subtle); pointer-events: none; }
.aui-command-search > input { width: 100%; height: 56px; padding: 0 16px 0 48px; margin: 0; font-size: var(--aui-fs-lg); color: var(--aui-text); background: transparent; border: 0; outline: none; }
.aui-command-search > input::placeholder { color: var(--aui-text-disabled); }
.aui-command-search > .aui-kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.aui-command-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.aui-command-group + .aui-command-group { margin-top: 6px; }
.aui-command-list .aui-menu-item { min-height: 40px; padding: 8px 12px; border-radius: var(--aui-radius-md); }
.aui-command-list .aui-menu-item > .aui-icon { width: 17px; height: 17px; }
.aui-command-list .aui-menu-item[aria-selected="true"], .aui-command-list .aui-menu-item.is-highlighted { background: var(--aui-active); color: var(--aui-text); }
.aui-command-empty { padding: 36px 16px; text-align: center; font-size: var(--aui-fs-sm); color: var(--aui-text-subtle); }
.aui-command-footer { display: flex; align-items: center; gap: 16px; flex: none; padding: 9px 14px; font-size: var(--aui-fs-2xs); color: var(--aui-text-subtle); background: var(--aui-bg-alt); border-top: 1px solid var(--aui-border-soft); }
.aui-command-footer > span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .aui-command { margin: 8px auto auto; max-height: calc(100dvh - 16px); }
  .aui-command-footer { display: none; }
}

/* ==========================================================================
   Armsys UI 2 — Navigation
   Vertical nav · tabs (line / pills / enclosed / vertical) · segmented ·
   breadcrumb · pagination · wizard steps · page header · toolbar · accordion
   ========================================================================== */

/* ---------- Vertical nav (app sidebar, settings, docs-like menus) ---------- */
.aui-nav { display: flex; flex-direction: column; gap: 1px; }
.aui-nav-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; margin: 20px 0 6px; font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--aui-text-subtle); }
.aui-nav-title:first-child { margin-top: 6px; }
.aui-nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; width: 100%; margin: 0;
  font: inherit; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); text-align: left; text-decoration: none;
  background: none; border: 0; border-radius: var(--aui-radius-sm); cursor: pointer; transition: background-color var(--aui-dur-fast), color var(--aui-dur-fast);
}
.aui-nav-item > .aui-icon { color: var(--aui-text-subtle); transition: color var(--aui-dur-fast); }
.aui-nav-item:hover { background: var(--aui-hover); color: var(--aui-text); }
.aui-nav-item:hover > .aui-icon { color: var(--aui-text-muted); }
.aui-nav-item.is-active, .aui-nav-item[aria-current="page"] { background: var(--aui-active); color: var(--aui-text); font-weight: var(--aui-fw-medium); }
.aui-nav-item.is-active > .aui-icon, .aui-nav-item[aria-current="page"] > .aui-icon { color: var(--aui-text); }
.aui-nav--indicator .aui-nav-item.is-active::before, .aui-nav--indicator .aui-nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--aui-accent); }
.aui-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-nav-count { margin-left: auto; font-size: var(--aui-fs-2xs); color: var(--aui-text-subtle); font-variant-numeric: tabular-nums; }
.aui-nav-item > .aui-badge { margin-left: auto; }
.aui-nav-item > .aui-dot { margin-left: auto; }
/* Collapsible group: <details class="aui-nav-group" open><summary class="aui-nav-item">…</summary><div class="aui-nav-children">…</div></details> */
details.aui-nav-group > summary { list-style: none; }
details.aui-nav-group > summary::-webkit-details-marker { display: none; }
details.aui-nav-group > summary::after { content: ""; flex: none; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid var(--aui-text-subtle); border-bottom: 1.5px solid var(--aui-text-subtle); transform: rotate(-45deg); transition: transform var(--aui-dur) var(--aui-ease); }
details.aui-nav-group[open] > summary::after { transform: rotate(45deg); }
.aui-nav-children { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 18px; padding-left: 10px; border-left: 1px solid var(--aui-border-soft); }
.aui-nav-children .aui-nav-item { min-height: 30px; padding: 4px 10px; font-size: var(--aui-fs-sm); }
.aui-nav-sep { height: 1px; margin: 10px 4px; background: var(--aui-border-soft); }

/* ---------- Tabs ---------- */
.aui-tabs { position: relative; display: flex; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--aui-border); overflow-x: auto; scrollbar-width: none; }
.aui-tabs::-webkit-scrollbar { display: none; }
.aui-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; margin: 0 0 -1px; padding: 10px 12px; flex: none;
  font: inherit; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text-subtle); white-space: nowrap; text-decoration: none;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--aui-dur-fast), border-color var(--aui-dur-fast), background-color var(--aui-dur-fast);
}
.aui-tab:hover { color: var(--aui-text-secondary); }
.aui-tab.is-active, .aui-tab[aria-selected="true"], .aui-tab[aria-current="page"] { color: var(--aui-text); border-bottom-color: var(--aui-primary); }
.aui-tab .aui-badge { --_h: 18px; }
.aui-tab .aui-icon { width: 15px; height: 15px; }
.aui-tab-count { font-size: var(--aui-fs-2xs); color: var(--aui-text-subtle); font-variant-numeric: tabular-nums; }
.aui-tabs--sm .aui-tab { padding: 8px 10px; font-size: var(--aui-fs-xs); }
.aui-tabs--lg .aui-tab { padding: 12px 14px; font-size: var(--aui-fs-md); }
.aui-tabs--accent .aui-tab.is-active, .aui-tabs--accent .aui-tab[aria-selected="true"] { border-bottom-color: var(--aui-accent); }
.aui-tabs--block .aui-tab { flex: 1; justify-content: center; }
/* Pills */
.aui-tabs--pills { gap: 4px; border-bottom: 0; }
.aui-tabs--pills .aui-tab { margin: 0; padding: 7px 12px; border: 0; border-radius: var(--aui-radius-full); }
.aui-tabs--pills .aui-tab:hover { background: var(--aui-hover); }
.aui-tabs--pills .aui-tab:is(.is-active, [aria-selected="true"], [aria-current="page"]) { color: var(--aui-text); background: var(--aui-active); }
/* Enclosed (folder) */
.aui-tabs--enclosed { gap: 0; }
.aui-tabs--enclosed .aui-tab { border: 1px solid transparent; border-bottom: 0; border-radius: var(--aui-radius-md) var(--aui-radius-md) 0 0; }
.aui-tabs--enclosed .aui-tab:is(.is-active, [aria-selected="true"]) { background: var(--aui-surface-1); border-color: var(--aui-border); margin-bottom: -1px; padding-bottom: 11px; }
/* Vertical */
.aui-tabs--vertical { flex-direction: column; border-bottom: 0; border-left: 1px solid var(--aui-border); gap: 0; overflow: visible; }
.aui-tabs--vertical .aui-tab { margin: 0 0 0 -1px; border-bottom: 0; border-left: 2px solid transparent; justify-content: flex-start; padding: 8px 14px; }
.aui-tabs--vertical .aui-tab:is(.is-active, [aria-selected="true"]) { border-left-color: var(--aui-primary); }
.aui-tab-panel { padding-top: 18px; }
.aui-tab-panel:focus-visible { outline: none; }
.aui-tab-panel--flush { padding-top: 0; }

/* ---------- Segmented control ---------- */
.aui-segmented { --_h: var(--aui-control-h); display: inline-flex; align-items: center; gap: 2px; height: var(--_h); padding: 3px; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: calc(var(--aui-control-radius) + 2px); max-width: 100%; overflow-x: auto; scrollbar-width: none; vertical-align: middle; }
.aui-segmented > :is(button, a, label) {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 0 12px; margin: 0; flex: none;
  font: inherit; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); color: var(--aui-text-muted); white-space: nowrap; text-decoration: none;
  background: transparent; border: 0; border-radius: calc(var(--aui-control-radius) - 1px); cursor: pointer; transition: background-color var(--aui-dur-fast), color var(--aui-dur-fast), box-shadow var(--aui-dur-fast);
}
.aui-segmented > label > input { position: absolute; opacity: 0; pointer-events: none; }
.aui-segmented > :hover { color: var(--aui-text); }
.aui-segmented > :is(.is-active, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"]), .aui-segmented > label:has(> input:checked) {
  color: var(--aui-text); background: var(--aui-surface-3); box-shadow: inset 0 0 0 1px var(--aui-border-strong), var(--aui-shadow-sm);
}
.aui[data-aui-theme="light"] .aui-segmented { background: var(--aui-surface-2); }
.aui[data-aui-theme="light"] .aui-segmented > :is(.is-active, [aria-pressed="true"], [aria-selected="true"]), .aui[data-aui-theme="light"] .aui-segmented > label:has(> input:checked) { background: #fff; }
.aui-segmented .aui-icon { width: 14px; height: 14px; }
.aui-segmented .aui-badge { --_h: 16px; padding: 0 5px; }
.aui-segmented--sm { --_h: var(--aui-control-h-sm); }
.aui-segmented--sm > :is(button, a, label) { padding: 0 9px; }
.aui-segmented--lg { --_h: var(--aui-control-h-lg); }
.aui-segmented--lg > :is(button, a, label) { font-size: var(--aui-fs-sm); padding: 0 16px; }
.aui-segmented--block { display: flex; }
.aui-segmented--block > * { flex: 1; }
.aui-segmented--pill, .aui-segmented--pill > * { border-radius: var(--aui-radius-full) !important; }

/* ---------- Breadcrumb ---------- */
.aui-breadcrumb ol, ol.aui-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.aui-breadcrumb li + li::before { content: "/"; color: var(--aui-text-disabled); }
.aui-breadcrumb--chevron li + li::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid var(--aui-text-disabled); border-bottom: 1.5px solid var(--aui-text-disabled); transform: rotate(-45deg); margin-right: 2px; }
.aui-breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--aui-text-subtle); transition: color var(--aui-dur-fast); }
.aui-breadcrumb a:hover { color: var(--aui-text); }
.aui-breadcrumb .aui-icon { width: 14px; height: 14px; }
.aui-breadcrumb [aria-current="page"] { color: var(--aui-text-secondary); }
.aui-breadcrumb--md ol, ol.aui-breadcrumb--md { font-size: var(--aui-fs-sm); }

/* ---------- Pagination ---------- */
.aui-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.aui-page {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 8px;
  font: inherit; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); color: var(--aui-text-muted); font-variant-numeric: tabular-nums; text-decoration: none;
  background: none; border: 1px solid transparent; border-radius: var(--aui-radius-sm); cursor: pointer; transition: color var(--aui-dur-fast), background-color var(--aui-dur-fast), border-color var(--aui-dur-fast);
}
.aui-page:hover { color: var(--aui-text); background: var(--aui-hover); }
.aui-page.is-active, .aui-page[aria-current="page"] { color: var(--aui-text); background: var(--aui-surface-2); border-color: var(--aui-border-strong); }
.aui-page:disabled, .aui-page.is-disabled { opacity: .4; pointer-events: none; }
.aui-page .aui-icon { width: 14px; height: 14px; }
.aui-page-gap { color: var(--aui-text-disabled); padding: 0 4px; font-size: var(--aui-fs-xs); }
.aui-pagination-info { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); font-variant-numeric: tabular-nums; }

/* ---------- Wizard steps: <ol class="aui-wizard"><li class="is-done">…</li><li class="is-current">…</li></ol> ---------- */
.aui-wizard { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: aui-wizard; }
.aui-wizard > li { position: relative; flex: 1; display: flex; align-items: flex-start; gap: 10px; min-width: 0; counter-increment: aui-wizard; font-size: var(--aui-fs-sm); color: var(--aui-text-subtle); }
.aui-wizard > li::before {
  content: counter(aui-wizard); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-semibold); color: var(--aui-text-muted); background: var(--aui-surface-2); border: 1px solid var(--aui-border-strong);
}
.aui-wizard > li:not(:last-child)::after { content: ""; flex: 1; height: 1px; margin-top: 13px; min-width: 16px; background: var(--aui-border); }
.aui-wizard > li.is-current { color: var(--aui-text); }
.aui-wizard > li.is-current::before { color: var(--aui-on-primary); background: var(--aui-primary); border-color: var(--aui-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aui-primary) 14%, transparent); }
.aui-wizard > li.is-done { color: var(--aui-text-secondary); }
.aui-wizard > li.is-done::before { content: ""; color: var(--aui-on-accent); background: var(--aui-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--aui-accent); }
.aui-wizard > li.is-done:not(:last-child)::after { background: var(--aui-accent); }
.aui-wizard > li.is-error::before { content: "!"; color: var(--aui-on-danger); background: var(--aui-danger); border-color: var(--aui-danger); }
.aui-wizard-body { min-width: 0; padding-top: 3px; }
.aui-wizard-title { font-weight: var(--aui-fw-medium); white-space: nowrap; }
.aui-wizard-desc { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-wizard--vertical { flex-direction: column; gap: 0; }
.aui-wizard--vertical > li { width: 100%; padding-bottom: 22px; }
.aui-wizard--vertical > li:not(:last-child)::after { position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; height: auto; margin: 0; min-width: 0; }

/* ---------- Page header ---------- */
.aui-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.aui-page-header-body { min-width: 0; }
.aui-page-header .aui-breadcrumb { margin-bottom: 10px; }
.aui-page-title { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: var(--aui-fw-semibold); letter-spacing: -.024em; line-height: 1.2; color: var(--aui-text); }
.aui-page-desc { margin-top: 6px; max-width: 680px; font-size: var(--aui-fs-sm); line-height: 1.55; color: var(--aui-text-muted); }
.aui-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aui-page-header--bordered { padding-bottom: 20px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-page-header--tabs { margin-bottom: 0; }
.aui-page-header--tabs + .aui-tabs { margin-bottom: 24px; }

/* ---------- Toolbar & filter bar ---------- */
.aui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.aui-toolbar > .aui-spacer { flex: 1 1 auto; }
.aui-toolbar > .aui-input-wrap { flex: 0 1 280px; }
.aui-toolbar > .aui-input-wrap--grow { flex: 1 1 320px; }
.aui-toolbar > .aui-select, .aui-toolbar > .aui-combobox { width: auto; }
.aui-toolbar--bar { padding: 10px; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); }
.aui-card > .aui-toolbar { padding: 12px 14px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-toolbar-label { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); white-space: nowrap; }
/* Bulk-selection bar */
.aui-bulkbar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; font-size: var(--aui-fs-sm); color: var(--aui-text); background: color-mix(in srgb, var(--aui-accent) 10%, var(--aui-surface-1)); border: 1px solid color-mix(in srgb, var(--aui-accent) 32%, var(--aui-border)); border-radius: var(--aui-radius-md); }
.aui-bulkbar > .aui-row:last-child { margin-left: auto; }

/* ---------- Accordion (native <details>) ---------- */
.aui-accordion { border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); overflow: hidden; background: var(--aui-surface-1); }
.aui-accordion > details + details { border-top: 1px solid var(--aui-border-soft); }
.aui-accordion summary {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; list-style: none; cursor: pointer;
  font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text); transition: background-color var(--aui-dur-fast);
}
.aui-accordion summary::-webkit-details-marker { display: none; }
.aui-accordion summary:hover { background: var(--aui-hover); }
.aui-accordion summary::after { content: ""; flex: none; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--aui-text-subtle); border-bottom: 1.5px solid var(--aui-text-subtle); transform: translateY(-2px) rotate(45deg); transition: transform var(--aui-dur) var(--aui-ease); }
.aui-accordion details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.aui-accordion summary .aui-icon { color: var(--aui-text-subtle); }
.aui-accordion-body { padding: 0 16px 16px; font-size: var(--aui-fs-sm); line-height: 1.65; color: var(--aui-text-muted); }
.aui-accordion summary .aui-icon ~ * { min-width: 0; }
.aui-accordion summary:has(> .aui-icon:first-child) + .aui-accordion-body { padding-left: 42px; }
.aui-accordion--flush { border: 0; border-radius: 0; background: transparent; }
.aui-accordion--flush > details { border-bottom: 1px solid var(--aui-border); }
.aui-accordion--flush > details + details { border-top: 0; }
.aui-accordion--flush summary { padding-inline: 2px; font-size: var(--aui-fs-lg); }
.aui-accordion--flush summary:hover { background: transparent; color: var(--aui-text); }
.aui-accordion--flush .aui-accordion-body { padding-inline: 2px; font-size: var(--aui-fs-md); }
.aui-accordion--separated { border: 0; background: transparent; display: grid; gap: 8px; overflow: visible; }
.aui-accordion--separated > details { border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); background: var(--aui-surface-1); overflow: hidden; }
.aui-accordion--separated > details + details { border-top: 1px solid var(--aui-border); }

@media (max-width: 760px) {
  .aui-toolbar > .aui-input-wrap, .aui-toolbar > .aui-input-wrap--grow { flex: 1 1 100%; }
  .aui-page-header { align-items: flex-start; }
  .aui-page-actions { width: 100%; }
  .aui-wizard:not(.aui-wizard--vertical) .aui-wizard-body { display: none; }
  .aui-wizard:not(.aui-wizard--vertical) > li.is-current .aui-wizard-body { display: block; }
}

/* ==========================================================================
   Armsys UI 2 — Data display
   Card · panel · icon box · stat/metric · badge · dot/status · avatar ·
   entity · list · description list · progress/ring/meter · mini charts ·
   skeleton · empty state · timeline · log stream · uptime strip
   ========================================================================== */

/* ---------- Card & panel ---------- */
.aui-card { position: relative; min-width: 0; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); }
.aui-card--pad { padding: 20px; }
.aui-card--pad-sm { padding: 14px; }
.aui-card--flat { background: transparent; }
.aui-card--elevated { background: var(--aui-surface-elevated); border-color: var(--aui-border-strong); box-shadow: var(--aui-shadow-md); }
.aui-card--inset { background: var(--aui-bg-alt); border-color: var(--aui-border-soft); }
.aui-card--dashed { background: transparent; border-style: dashed; border-color: var(--aui-border-strong); }
.aui-card--clip { overflow: hidden; }
.aui-card--interactive { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--aui-dur-fast), background-color var(--aui-dur-fast), transform var(--aui-dur-fast); }
.aui-card--interactive:hover { border-color: var(--aui-border-strong); background: var(--aui-surface-2); }
.aui-card--selected { border-color: var(--aui-accent); box-shadow: 0 0 0 1px var(--aui-accent); }
.aui-card--tone { --_t: var(--aui-tone, var(--aui-accent)); background: color-mix(in srgb, var(--_t) 6%, var(--aui-surface-1)); border-color: color-mix(in srgb, var(--_t) 26%, var(--aui-border)); }
.aui-card--glow { isolation: isolate; overflow: hidden; }
.aui-card--glow::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: radial-gradient(600px circle at var(--mx, 50%) -20%, color-mix(in srgb, var(--aui-accent) 14%, transparent), transparent 60%); pointer-events: none; }
.aui-panel { position: relative; min-width: 0; background: var(--aui-bg-alt); border: 1px solid var(--aui-border-soft); border-radius: var(--aui-radius-md); }
.aui-card-header { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 20px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-card-header--plain { border-bottom: 0; padding-bottom: 0; min-height: 0; padding-top: 18px; }
.aui-card-heading { min-width: 0; flex: 1; }
.aui-card-title { display: flex; align-items: center; gap: 8px; font-size: var(--aui-fs-md); font-weight: var(--aui-fw-semibold); color: var(--aui-text); letter-spacing: -.01em; }
.aui-card-desc { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); margin-top: 2px; }
.aui-card-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.aui-card-body { padding: 20px; }
.aui-card-body--sm { padding: 14px 16px; }
.aui-card-body--flush { padding: 0; }
.aui-card-footer { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--aui-border-soft); font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-card-footer--end { justify-content: flex-end; }
.aui-card-footer--muted { background: var(--aui-bg-alt); border-radius: 0 0 var(--aui-radius-lg) var(--aui-radius-lg); }
.aui-card-media { margin: -1px -1px 0; border-radius: var(--aui-radius-lg) var(--aui-radius-lg) 0 0; overflow: hidden; aspect-ratio: var(--ratio, 16 / 9); background: var(--aui-surface-2); }
.aui-card-media > img { width: 100%; height: 100%; object-fit: cover; }
.aui-card > .aui-table-wrap, .aui-panel > .aui-table-wrap { border: 0; border-radius: 0 0 var(--aui-radius-lg) var(--aui-radius-lg); background: transparent; }
.aui-card > .aui-card-header + .aui-table-wrap:not(:last-child), .aui-card > .aui-toolbar + .aui-table-wrap:not(:last-child) { border-radius: 0; }

/* ---------- Icon box ---------- */
.aui-icon-box {
  --_t: var(--aui-tone, var(--aui-text-secondary)); --_s: 36px;
  width: var(--_s); height: var(--_s); flex: none; display: inline-grid; place-items: center; border-radius: calc(var(--_s) * .24);
  color: var(--_t); background: var(--aui-surface-2); border: 1px solid var(--aui-border);
}
.aui-icon-box:is(.aui-icon-box--accent, .aui-icon-box--success, .aui-icon-box--info, .aui-icon-box--warning, .aui-icon-box--danger, .aui-icon-box--purple, .aui-icon-box--pink, .aui-icon-box--orange, .aui-icon-box--yellow, .aui-icon-box--teal, .aui-icon-box--neutral) { background: color-mix(in srgb, var(--_t) var(--aui-soft-bg), transparent); border-color: color-mix(in srgb, var(--_t) 24%, transparent); }
.aui-icon-box--solid { background: var(--_t) !important; color: var(--aui-on-tone, var(--aui-bg)) !important; border-color: transparent !important; }
.aui-icon-box--xs { --_s: 24px; }
.aui-icon-box--xs .aui-icon { width: 13px; height: 13px; }
.aui-icon-box--sm { --_s: 30px; }
.aui-icon-box--sm .aui-icon { width: 15px; height: 15px; }
.aui-icon-box--lg { --_s: 44px; }
.aui-icon-box--lg .aui-icon { width: 20px; height: 20px; }
.aui-icon-box--xl { --_s: 56px; }
.aui-icon-box--xl .aui-icon { width: 26px; height: 26px; }
.aui-icon-box--round { border-radius: 50%; }

/* ---------- Stats & metrics ---------- */
.aui-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aui-stat-label { display: flex; align-items: center; gap: 6px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); color: var(--aui-text-muted); }
.aui-stat-label > .aui-delta, .aui-stat-label > .aui-badge, .aui-stat-label > .aui-stat-icon { margin-left: auto; }
.aui-stat-label .aui-icon { width: 14px; height: 14px; color: var(--aui-text-subtle); }
.aui-stat-value { font-size: 1.75rem; font-weight: var(--aui-fw-semibold); letter-spacing: -.028em; line-height: 1.1; color: var(--aui-text); font-variant-numeric: tabular-nums; }
.aui-stat-value small { font-size: .55em; font-weight: var(--aui-fw-medium); color: var(--aui-text-subtle); letter-spacing: 0; margin-left: 2px; }
.aui-stat-meta { display: flex; align-items: center; gap: 8px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-stat-icon { --_t: var(--aui-tone, var(--aui-text-muted)); color: var(--_t); }
.aui-stat--sm .aui-stat-value { font-size: 1.25rem; letter-spacing: -.015em; }
.aui-stat--lg .aui-stat-value { font-size: 2.5rem; letter-spacing: -.035em; }
.aui-delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); font-variant-numeric: tabular-nums; color: var(--aui-text-muted); }
.aui-delta.is-up { color: var(--aui-success); }
.aui-delta.is-down { color: var(--aui-danger); }
.aui-delta.is-up::before { content: "↑"; }
.aui-delta.is-down::before { content: "↓"; }
.aui-delta--pill { height: 20px; padding: 0 6px; border-radius: var(--aui-radius-full); background: color-mix(in srgb, currentColor 12%, transparent); }
.aui-metric { padding: 18px 20px; }
.aui-metric :is(.aui-bars, .aui-spark, .aui-progress) { margin-top: 14px; }
.aui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--aui-border-soft); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); overflow: hidden; }
.aui-stats > * { background: var(--aui-surface-1); padding: 18px 20px; }
.aui-stats--public { background: transparent; border: 0; border-radius: 0; gap: 0; overflow: visible; }
.aui-stats--public > * { background: transparent; padding: 4px 28px; border-left: 1px solid var(--aui-border-soft); }
.aui-stats--public > :first-child { border-left: 0; padding-left: 0; }
.aui-stats--public .aui-stat-value { font-size: 2.25rem; letter-spacing: -.035em; }

/* ---------- Badge ---------- */
.aui-badge {
  --_t: var(--aui-tone, var(--aui-text-muted)); --_h: 20px;
  display: inline-flex; align-items: center; gap: 5px; height: var(--_h); padding: 0 7px; flex: none; vertical-align: middle;
  font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-medium); line-height: 1; letter-spacing: .01em; white-space: nowrap;
  color: var(--aui-text-secondary); background: var(--aui-surface-2); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-xs);
}
.aui-badge:is(.aui-badge--accent, .aui-badge--success, .aui-badge--info, .aui-badge--warning, .aui-badge--danger, .aui-badge--purple, .aui-badge--pink, .aui-badge--orange, .aui-badge--yellow, .aui-badge--teal, .aui-badge--neutral), .aui-badge--outline, .aui-badge--solid { color: var(--_t); background: color-mix(in srgb, var(--_t) var(--aui-soft-bg), transparent); border-color: color-mix(in srgb, var(--_t) var(--aui-soft-border), transparent); }
.aui-badge.aui-badge--outline { background: transparent; }
.aui-badge.aui-badge--solid { background: var(--_t); border-color: var(--_t); color: var(--aui-on-tone, var(--aui-bg)); font-weight: var(--aui-fw-semibold); }
.aui-badge--pill { border-radius: var(--aui-radius-full); padding: 0 9px; }
.aui-badge--sm { --_h: 16px; padding: 0 5px; font-size: 10px; }
.aui-badge--lg { --_h: 24px; padding: 0 9px; font-size: var(--aui-fs-xs); }
.aui-badge--mono { font-family: var(--aui-font-mono); }
.aui-badge .aui-dot { --_s: 6px; }
.aui-badge .aui-icon { width: 12px; height: 12px; }
/* Notification count bubble: <span class="aui-count">3</span> */
.aui-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; font-weight: var(--aui-fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; color: var(--aui-on-danger); background: var(--aui-danger); border-radius: var(--aui-radius-full); }
.aui-count--accent { color: var(--aui-on-accent); background: var(--aui-accent); }
.aui-count--neutral { color: var(--aui-text); background: var(--aui-surface-4); }

/* ---------- Status dot ---------- */
.aui-dot { --_t: var(--aui-tone, var(--aui-text-subtle)); --_s: 8px; display: inline-block; flex: none; width: var(--_s); height: var(--_s); border-radius: 50%; background: var(--_t); }
.aui-dot.is-live { animation: aui-pulse 2s ease-out infinite; }
.aui-dot--ring { background: transparent; box-shadow: inset 0 0 0 2px var(--_t); }
.aui-dot--lg { --_s: 10px; }
.aui-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--aui-fs-sm); color: var(--aui-text-secondary); white-space: nowrap; }

/* ---------- Connection pill ---------- */
.aui-conn {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 9px;
  font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); color: var(--aui-text-secondary); white-space: nowrap;
  background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-full);
}
.aui-conn-meta { color: var(--aui-text-subtle); font-family: var(--aui-font-mono); font-size: var(--aui-fs-2xs); }

/* ---------- Avatar ---------- */
.aui-avatar {
  --_s: 32px; --_t: var(--aui-tone, var(--aui-text-secondary));
  position: relative; width: var(--_s); height: var(--_s); flex: none; display: inline-grid; place-items: center;
  font-size: calc(var(--_s) * .38); font-weight: var(--aui-fw-semibold); letter-spacing: -.02em; line-height: 1; text-transform: uppercase;
  color: var(--_t); background: color-mix(in srgb, var(--_t) 14%, var(--aui-surface-2)); border: 1px solid color-mix(in srgb, var(--_t) 22%, var(--aui-border)); border-radius: 50%;
}
.aui-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.aui-avatar--xs { --_s: 20px; }
.aui-avatar--sm { --_s: 26px; }
.aui-avatar--lg { --_s: 44px; }
.aui-avatar--xl { --_s: 56px; }
.aui-avatar--2xl { --_s: 80px; }
.aui-avatar--square { border-radius: calc(var(--_s) * .24); }
.aui-avatar-status { position: absolute; right: -1px; bottom: -1px; width: calc(var(--_s) * .3); height: calc(var(--_s) * .3); min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--aui-text-subtle); box-shadow: 0 0 0 2px var(--aui-bg); }
.aui-avatar-status.is-online { background: var(--aui-success); }
.aui-avatar-status.is-busy { background: var(--aui-danger); }
.aui-avatar-status.is-away { background: var(--aui-warning); }
.aui-avatar-stack { display: inline-flex; align-items: center; }
.aui-avatar-stack > .aui-avatar { box-shadow: 0 0 0 2px var(--aui-bg); }
.aui-avatar-stack > .aui-avatar + .aui-avatar { margin-left: calc(var(--_s) * -.25); }

/* ---------- Entity (avatar + name) ---------- */
.aui-entity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aui-entity-body { min-width: 0; display: flex; flex-direction: column; }
.aui-entity-name { font-weight: var(--aui-fw-medium); color: var(--aui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-entity-sub { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- List ---------- */
.aui-list { list-style: none; margin: 0; padding: 0; }
.aui-list > li, .aui-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--aui-border-soft); min-width: 0; color: inherit; text-decoration: none; }
.aui-list > li:first-child, .aui-list-item:first-child { border-top: 0; }
.aui-list--hover > :is(li, .aui-list-item), a.aui-list-item { transition: background-color var(--aui-dur-fast); cursor: pointer; }
.aui-list--hover > :is(li, .aui-list-item):hover, a.aui-list-item:hover { background: var(--aui-hover); }
.aui-list--compact > :is(li, .aui-list-item) { padding: 8px 14px; }
.aui-list--inset > :is(li, .aui-list-item) { padding-inline: 0; }
.aui-list-item.is-active { background: var(--aui-active); }
.aui-list-item.is-unread { box-shadow: inset 2px 0 0 var(--aui-accent); }
.aui-list-body { flex: 1; min-width: 0; }
.aui-list-title { font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-list-meta { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-list-text { margin-top: 2px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); }
.aui-list-end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }

/* ---------- Description list & key/value ---------- */
.aui-dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 10px 28px; margin: 0; font-size: var(--aui-fs-sm); }
.aui-dl > dt { color: var(--aui-text-subtle); }
.aui-dl > dd { margin: 0; color: var(--aui-text-secondary); min-width: 0; overflow-wrap: anywhere; }
.aui-dl--stacked { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.aui-dl--stacked > dd + dt { margin-top: 12px; }
.aui-kv { display: flex; flex-direction: column; margin: 0; color: var(--aui-text); }
.aui-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--aui-border-soft); font-size: var(--aui-fs-sm); }
.aui-kv > div:last-child { border-bottom: 0; }
.aui-kv :where(div > :first-child) { color: var(--aui-text-subtle); margin: 0; }
.aui-kv :where(div > :last-child) { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Progress, ring & meter ---------- */
.aui-progress { --_t: var(--aui-tone, var(--aui-accent)); position: relative; height: 6px; background: var(--aui-surface-3); border-radius: var(--aui-radius-full); overflow: hidden; }
.aui-progress > span { display: block; height: 100%; width: var(--value, 0%); background: var(--_t); border-radius: inherit; transition: width var(--aui-dur-slow) var(--aui-ease); }
.aui-progress--indeterminate > span { width: 30%; animation: aui-indeterminate 1.3s var(--aui-ease) infinite; }
.aui-progress--striped > span { background-image: linear-gradient(45deg, rgb(255 255 255 / .16) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / .16) 50%, rgb(255 255 255 / .16) 75%, transparent 75%); background-size: 12px 12px; }
.aui-progress--xs { height: 3px; }
.aui-progress--sm { height: 4px; }
.aui-progress--lg { height: 10px; }
.aui-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: var(--aui-fs-xs); color: var(--aui-text-muted); }
.aui-progress-label > :last-child { color: var(--aui-text); font-variant-numeric: tabular-nums; }
.aui-progress-stack { display: flex; height: 8px; gap: 2px; border-radius: var(--aui-radius-full); overflow: hidden; background: var(--aui-surface-3); }
.aui-progress-stack > span { --_t: var(--aui-tone, var(--aui-accent)); width: var(--value); background: var(--_t); }
/* Ring: <div class="aui-ring" style="--value:72"><span>72%</span></div> */
.aui-ring {
  --_t: var(--aui-tone, var(--aui-accent)); --_s: 56px; --_w: 6px;
  position: relative; display: inline-grid; place-items: center; width: var(--_s); height: var(--_s); flex: none;
  font-size: calc(var(--_s) * .24); font-weight: var(--aui-fw-semibold); font-variant-numeric: tabular-nums; color: var(--aui-text);
  border-radius: 50%; background: conic-gradient(var(--_t) calc(var(--value, 0) * 1%), var(--aui-surface-3) 0);
}
.aui-ring::before { content: ""; position: absolute; inset: var(--_w); border-radius: 50%; background: var(--_bg, var(--aui-surface-1)); }
.aui-ring > * { position: relative; }
.aui-ring--sm { --_s: 36px; --_w: 4px; }
.aui-ring--lg { --_s: 88px; --_w: 8px; }

/* Minimal bar chart: <div class="aui-bars"><span style="--h:40%"></span>…</div> */
.aui-bars { --_t: var(--aui-tone, var(--aui-accent)); display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.aui-bars > span { flex: 1; min-height: 2px; height: var(--h, 10%); background: color-mix(in srgb, var(--_t) 45%, var(--aui-surface-3)); border-radius: 2px 2px 0 0; transition: background-color var(--aui-dur-fast); }
.aui-bars > span:hover, .aui-bars > span.is-hl { background: var(--_t); }
.aui-bars--sm { height: 36px; }
.aui-bars--tall { height: 160px; gap: 4px; }
/* Inline SVG sparkline: <svg class="aui-spark" viewBox="0 0 100 30" preserveAspectRatio="none"><polyline points="…"/></svg> */
.aui-spark { --_t: var(--aui-tone, var(--aui-accent)); display: block; width: 100%; height: 36px; overflow: visible; fill: none; stroke: var(--_t); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.aui-spark :is(polyline, path, line) { vector-effect: non-scaling-stroke; }
.aui-spark .aui-spark-area { fill: color-mix(in srgb, var(--_t) 14%, transparent); stroke: none; }
/* Chart legend */
.aui-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--aui-fs-xs); color: var(--aui-text-muted); }
.aui-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Skeleton ---------- */
.aui-skeleton {
  display: block; height: 12px; border-radius: var(--aui-radius-xs);
  background: linear-gradient(90deg, var(--aui-surface-2) 25%, var(--aui-surface-3) 50%, var(--aui-surface-2) 75%);
  background-size: 200% 100%; animation: aui-shimmer 1.4s linear infinite;
}
.aui-skeleton--text { height: 10px; margin: 6px 0; }
.aui-skeleton--title { height: 16px; width: 40%; }
.aui-skeleton--circle { border-radius: 50%; width: 32px; height: 32px; }
.aui-skeleton--block { height: 80px; border-radius: var(--aui-radius-md); }

/* ---------- Empty state ---------- */
.aui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 24px; }
.aui-empty > .aui-icon-box { margin-bottom: 8px; }
.aui-empty-title { font-size: var(--aui-fs-md); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-empty-text { max-width: 380px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); line-height: 1.55; }
.aui-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.aui-empty--bordered { border: 1px dashed var(--aui-border-strong); border-radius: var(--aui-radius-lg); }
.aui-empty--sm { padding: 28px 16px; }

/* ---------- Timeline ---------- */
.aui-timeline { list-style: none; margin: 0; padding: 0; }
.aui-timeline > li { position: relative; padding: 0 0 20px 28px; }
.aui-timeline > li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 2px; width: 1px; background: var(--aui-border); }
.aui-timeline > li:last-child { padding-bottom: 0; }
.aui-timeline > li:last-child::before { display: none; }
.aui-timeline-marker { --_t: var(--aui-tone, var(--aui-border-interactive)); position: absolute; left: 2px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--aui-bg); box-shadow: inset 0 0 0 2px var(--_t); }
.aui-timeline-marker--icon { left: -4px; top: -2px; width: 23px; height: 23px; display: grid; place-items: center; color: var(--_t); background: var(--aui-surface-2); box-shadow: inset 0 0 0 1px var(--aui-border-strong); }
.aui-timeline-marker--icon .aui-icon { width: 12px; height: 12px; }
.aui-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.aui-timeline-title { font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text); }
.aui-timeline-time { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); font-variant-numeric: tabular-nums; }
.aui-timeline-text { margin-top: 3px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); }

/* ---------- Event / log stream ---------- */
.aui-log { font-family: var(--aui-font-mono); font-size: 12px; line-height: 1.6; background: var(--aui-code-bg); color: var(--aui-code-text); overflow: auto; }
.aui-log-row { display: grid; grid-template-columns: 92px 48px minmax(64px, 140px) minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 5px 16px; border-bottom: 1px solid rgb(255 255 255 / .03); }
.aui-log-row:hover { background: rgb(255 255 255 / .03); }
.aui-log-row.is-new { animation: aui-flash 1.6s ease-out; }
.aui-log-row.is-selected { background: color-mix(in srgb, var(--aui-accent) 10%, transparent); box-shadow: inset 2px 0 0 var(--aui-accent); }
.aui-log-time { color: var(--aui-code-muted); font-variant-numeric: tabular-nums; }
.aui-log-level { font-weight: 700; font-size: 10.5px; letter-spacing: .04em; color: var(--aui-code-muted); }
.aui-log-level.is-info { color: var(--aui-code-function); }
.aui-log-level.is-ok { color: var(--aui-code-string); }
.aui-log-level.is-warn { color: var(--aui-code-type); }
.aui-log-level.is-error { color: var(--aui-code-property); }
.aui-log-level.is-debug { color: var(--aui-code-keyword); }
.aui-log-src { color: var(--aui-code-operator); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-log-msg { color: var(--aui-code-text); white-space: pre-wrap; word-break: break-word; }
.aui-log-msg b { color: #e6e6e6; font-weight: 600; }
.aui-log-extra { color: var(--aui-code-muted); font-size: 11px; }
.aui-log-empty { padding: 32px 16px; text-align: center; color: var(--aui-code-muted); font-family: var(--aui-font); }
.aui-log--scroll { max-height: var(--aui-log-h, 420px); }
.aui-log--plain { background: transparent; }

/* ---------- Uptime history strip ---------- */
.aui-uptime { display: flex; gap: 2px; height: 28px; }
.aui-uptime > span { flex: 1; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--aui-success) 75%, transparent); transition: opacity var(--aui-dur-fast); }
.aui-uptime > span:hover { opacity: .7; }
.aui-uptime > .is-warn { background: var(--aui-warning); }
.aui-uptime > .is-down { background: var(--aui-danger); }
.aui-uptime > .is-none { background: var(--aui-surface-3); }
.aui-uptime-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--aui-fs-2xs); color: var(--aui-text-subtle); }

@media (max-width: 760px) {
  .aui-log-row { grid-template-columns: 70px 44px minmax(0, 1fr); }
  .aui-log-src, .aui-log-extra { display: none; }
  .aui-card-header, .aui-card-body, .aui-card-footer { padding-inline: 16px; }
  .aui-stats--public { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .aui-stats--public > * { padding: 0 16px; }
  .aui-stats--public > :nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   Armsys UI 2 — Table system
   One foundation (.aui-table) + modifiers: dense, public, comparison, params, ranking.
   ========================================================================== */
.aui-table-wrap { width: 100%; overflow-x: auto; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); -webkit-overflow-scrolling: touch; }
.aui-table-wrap--scroll { max-height: var(--aui-table-h, 520px); overflow: auto; }
.aui-table-wrap--scroll .aui-table thead th { position: sticky; top: 0; z-index: 1; }
.aui-table-wrap--plain { background: transparent; border: 0; border-radius: 0; }
.aui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--aui-fs-sm); font-variant-numeric: tabular-nums; }
.aui-table th {
  text-align: left; white-space: nowrap; padding: 10px 16px;
  font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); color: var(--aui-text-subtle);
  background: var(--aui-bg-alt); border-bottom: 1px solid var(--aui-border);
}
.aui-table td { padding: 11px 16px; vertical-align: middle; color: var(--aui-text-secondary); border-bottom: 1px solid var(--aui-border-soft); }
.aui-table tbody tr:last-child > td { border-bottom: 0; }
.aui-table tfoot td { background: var(--aui-bg-alt); border-top: 1px solid var(--aui-border); border-bottom: 0; font-weight: var(--aui-fw-medium); color: var(--aui-text); }
.aui-table tbody tr { transition: background-color var(--aui-dur-fast); }
.aui-table:not(.aui-table--static) tbody tr:hover { background: var(--aui-hover); }
.aui-table tr.is-selected { background: color-mix(in srgb, var(--aui-accent) 8%, transparent) !important; }
.aui-table tr.is-selected > td:first-child { box-shadow: inset 2px 0 0 var(--aui-accent); }
.aui-table tr.is-muted > td { color: var(--aui-text-subtle); }
.aui-table tr.is-muted .aui-entity-name { color: var(--aui-text-muted); }
.aui-table .aui-num, .aui-table th.aui-num { text-align: right; }
.aui-table .aui-center { text-align: center; }
.aui-table-strong { color: var(--aui-text); font-weight: var(--aui-fw-medium); }
.aui-table-actions { width: 1%; white-space: nowrap; text-align: right; }
.aui-table-actions > * + * { margin-left: 2px; }
.aui-table .aui-check-cell { width: 40px; padding-right: 0; }
.aui-table .aui-check { vertical-align: middle; }
.aui-table code { font-size: .92em; color: var(--aui-text); }
.aui-sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.aui-sort:hover, th[aria-sort] .aui-sort { color: var(--aui-text); }
.aui-sort .aui-icon { width: 12px; height: 12px; opacity: .5; }
th[aria-sort] .aui-sort .aui-icon { opacity: 1; }
th[aria-sort="descending"] .aui-sort .aui-icon { transform: rotate(180deg); }
th[data-aui-sort], th[data-aui-sort] .aui-sort { cursor: pointer; user-select: none; }
.aui-table tr.is-clickable { cursor: pointer; }
.aui-table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--aui-surface-2) 45%, transparent); }
.aui-table--bordered td + td, .aui-table--bordered th + th { border-left: 1px solid var(--aui-border-soft); }
.aui-table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--aui-border-soft); font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }

/* Dense — operational screens */
.aui-table--dense { font-size: var(--aui-fs-xs); }
.aui-table--dense th { padding: 7px 12px; font-size: var(--aui-fs-2xs); letter-spacing: .02em; }
.aui-table--dense td { padding: 6px 12px; }

/* Public — websites, directories, leaderboards */
.aui-table--public { font-size: var(--aui-fs-md); }
.aui-table--public th { background: transparent; padding: 12px 16px; font-size: var(--aui-fs-xs); letter-spacing: .02em; }
.aui-table--public td { padding: 14px 16px; }

/* Comparison — pricing/features */
.aui-table--comparison { table-layout: fixed; font-size: var(--aui-fs-sm); }
.aui-table--comparison th { background: transparent; padding: 16px; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-semibold); color: var(--aui-text); vertical-align: bottom; }
.aui-table--comparison th:first-child { width: 34%; }
.aui-table--comparison th:not(:first-child), .aui-table--comparison td:not(:first-child) { text-align: center; }
.aui-table--comparison td { padding: 13px 16px; }
.aui-table--comparison td:first-child { color: var(--aui-text-muted); }
.aui-table--comparison .is-featured { background: color-mix(in srgb, var(--aui-accent) 5%, transparent); }
.aui-table--comparison th.is-featured { box-shadow: inset 0 2px 0 var(--aui-accent); }
.aui-table-group > td, .aui-table-group > th {
  padding-top: 22px !important; font-size: var(--aui-fs-2xs) !important; font-weight: var(--aui-fw-semibold) !important; letter-spacing: .1em; text-transform: uppercase;
  color: var(--aui-text) !important; text-align: left !important; background: transparent !important;
}
.aui-yes { color: var(--aui-success); }
.aui-no { color: var(--aui-text-disabled); }
.aui-yes .aui-icon, .aui-no .aui-icon { width: 16px; height: 16px; }

/* Params — API / configuration */
.aui-table--params td { vertical-align: top; padding: 12px 16px; line-height: 1.55; }
.aui-table--params td:first-child { white-space: nowrap; font-family: var(--aui-font-mono); font-size: var(--aui-fs-xs); color: var(--aui-text); font-weight: var(--aui-fw-semibold); }
.aui-table--params td:nth-child(2) { white-space: nowrap; font-family: var(--aui-font-mono); font-size: var(--aui-fs-xs); color: var(--aui-code-type); }

/* Ranking */
.aui-table--ranking td { padding-top: 12px; padding-bottom: 12px; }
.aui-table--ranking td:first-child, .aui-table--ranking th:first-child { width: 88px; padding-right: 0; white-space: nowrap; }
.aui-table tr.is-locked > td { color: var(--aui-text-subtle); }
.aui-blur { filter: blur(5px); user-select: none; pointer-events: none; }
.aui-table-cta > td { padding: 22px 16px !important; text-align: center; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--aui-accent) 5%, transparent)) !important; }

/* Rank number */
.aui-rank {
  --_t: var(--aui-text-secondary);
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-semibold); font-variant-numeric: tabular-nums; color: var(--_t);
  background: var(--aui-surface-2); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-sm);
}
.aui-rank--1 { --_t: var(--aui-gold); }
.aui-rank--2 { --_t: var(--aui-silver); }
.aui-rank--3 { --_t: var(--aui-bronze); }
.aui-rank--1, .aui-rank--2, .aui-rank--3 { background: color-mix(in srgb, var(--_t) 12%, transparent); border-color: color-mix(in srgb, var(--_t) 32%, transparent); }
.aui-rank-change { font-size: var(--aui-fs-2xs); font-variant-numeric: tabular-nums; margin-left: 6px; color: var(--aui-text-subtle); }
.aui-rank-change.is-up { color: var(--aui-success); }
.aui-rank-change.is-down { color: var(--aui-danger); }

/* ==========================================================================
   Armsys UI 2 — Feedback: alerts, banners, notices, callouts, toasts, spinners
   ========================================================================== */
.aui-alert {
  --_t: var(--aui-tone, var(--aui-text-muted));
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  font-size: var(--aui-fs-sm); line-height: 1.55; color: var(--aui-text-secondary);
  background: color-mix(in srgb, var(--_t) 7%, var(--aui-surface-1));
  border: 1px solid color-mix(in srgb, var(--_t) 28%, var(--aui-border)); border-radius: var(--aui-radius-md);
}
.aui-alert > .aui-icon { margin-top: 2px; color: var(--_t); }
.aui-alert-body { flex: 1; min-width: 0; }
.aui-alert-title { font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-alert-title + * { margin-top: 2px; }
.aui-alert-text { color: var(--aui-text-muted); }
.aui-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aui-alert > .aui-close { margin: -3px -5px -3px auto; }
.aui-alert--accent-bar { border-left: 3px solid var(--_t); border-radius: 0 var(--aui-radius-md) var(--aui-radius-md) 0; }
.aui-alert--solid { color: var(--aui-on-tone, var(--aui-text)); background: var(--_t); border-color: var(--_t); }
.aui-alert--solid :is(.aui-alert-title, .aui-alert-text), .aui-alert--solid > .aui-icon { color: inherit; }
.aui-alert--solid .aui-close { color: inherit; opacity: .8; }
.aui-alert--banner { border-radius: 0; border-width: 0 0 1px; justify-content: center; align-items: center; padding: 9px 16px; }
.aui-alert--banner > .aui-close { margin: -4px 0 -4px auto; }
.aui-alert--sm { padding: 8px 12px; font-size: var(--aui-fs-xs); gap: 8px; }
.aui-alert--sm > .aui-icon { width: 14px; height: 14px; margin-top: 1px; }

/* Announcement bar above the site header */
.aui-announce { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 8px 48px; font-size: var(--aui-fs-sm); color: var(--aui-text-secondary); background: var(--aui-surface-1); border-bottom: 1px solid var(--aui-border-soft); text-align: center; }
.aui-announce a { color: var(--aui-text); font-weight: var(--aui-fw-medium); }
.aui-announce > .aui-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.aui-announce--accent { color: var(--aui-on-accent); background: var(--aui-accent); border-color: transparent; }
.aui-announce--accent :is(a, .aui-close) { color: inherit; }

.aui-notice {
  --_t: var(--aui-tone, var(--aui-border-interactive));
  padding: 10px 14px; font-size: var(--aui-fs-sm); color: var(--aui-text-secondary);
  background: var(--aui-surface-1); border-left: 2px solid var(--_t); border-radius: 0 var(--aui-radius-sm) var(--aui-radius-sm) 0;
}
.aui-notice strong { color: var(--aui-text); }

/* Callouts — documentation & prose: note · tip · info · warning · danger */
.aui-callout {
  --_t: var(--aui-tone, var(--aui-info));
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  font-size: var(--aui-fs-md); line-height: 1.65; color: var(--aui-text-secondary);
  background: color-mix(in srgb, var(--_t) 6%, var(--aui-surface-1));
  border: 1px solid color-mix(in srgb, var(--_t) 24%, var(--aui-border)); border-radius: var(--aui-radius-md);
}
.aui-callout > .aui-icon { margin-top: 4px; color: var(--_t); }
.aui-callout-body { flex: 1; min-width: 0; }
.aui-callout-body > :last-child { margin-bottom: 0; }
.aui-callout-body p { margin: 0 0 .5em; }
.aui-callout-title { font-weight: var(--aui-fw-semibold); color: var(--aui-text); margin-bottom: 2px; }
.aui-callout--note { --_t: var(--aui-text-muted); }
.aui-callout--tip { --_t: var(--aui-success); }

/* Toasts — ArmsysUI.toast({ title, message, variant, action, timeout, position }) */
.aui-toast-region { position: fixed; z-index: var(--aui-z-toast); display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.aui-toast-region, .aui-toast-region--bottom-right { right: 16px; bottom: 16px; }
.aui-toast-region--top-right { top: 16px; right: 16px; bottom: auto; flex-direction: column-reverse; }
.aui-toast-region--top-center { top: 16px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); flex-direction: column-reverse; }
.aui-toast-region--bottom-center { bottom: 16px; left: 50%; right: auto; transform: translateX(-50%); }
.aui-toast-region--bottom-left { left: 16px; bottom: 16px; right: auto; }
.aui-toast {
  --_t: var(--aui-tone, var(--aui-text-muted));
  position: relative; pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 14px; overflow: hidden;
  font-size: var(--aui-fs-sm); color: var(--aui-text-secondary);
  background: var(--aui-surface-elevated); border: 1px solid var(--aui-border-strong); border-radius: var(--aui-radius-lg); box-shadow: var(--aui-shadow-overlay);
  animation: aui-rise var(--aui-dur) var(--aui-ease-out);
}
.aui-toast > .aui-icon { margin-top: 2px; color: var(--_t); }
.aui-toast > .aui-spinner { margin-top: 2px; }
.aui-toast-body { flex: 1; min-width: 0; }
.aui-toast-title { font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-toast-text { color: var(--aui-text-muted); margin-top: 1px; }
.aui-toast-actions { display: flex; gap: 8px; margin-top: 8px; }
.aui-toast > .aui-close { margin: -4px -4px -4px 0; }
.aui-toast-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--_t); opacity: .6; transform-origin: left; animation: aui-toast-timer var(--_d, 4s) linear forwards; }
.aui-toast:hover .aui-toast-progress { animation-play-state: paused; }
@keyframes aui-toast-timer { to { transform: scaleX(0); } }
.aui-toast.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity var(--aui-dur-fast), transform var(--aui-dur-fast); }
@media (max-width: 640px) {
  .aui-toast-region { left: 12px !important; right: 12px !important; width: auto; transform: none !important; }
  .aui-toast-region:not(.aui-toast-region--top-right):not(.aui-toast-region--top-center) { bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Spinner & loading */
.aui-spinner { --_s: 16px; display: inline-block; flex: none; width: var(--_s); height: var(--_s); border: 2px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; border-radius: 50%; animation: aui-spin .7s linear infinite; vertical-align: middle; color: var(--aui-text); }
.aui-spinner--xs { --_s: 10px; border-width: 1.5px; }
.aui-spinner--sm { --_s: 12px; border-width: 1.5px; }
.aui-spinner--lg { --_s: 24px; }
.aui-spinner--xl { --_s: 36px; border-width: 3px; }
.aui-spinner--accent { color: var(--aui-accent); }
.aui-dots { display: inline-flex; gap: 4px; }
.aui-dots > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: aui-dots 1.2s infinite ease-in-out both; }
.aui-dots > span:nth-child(2) { animation-delay: .15s; }
.aui-dots > span:nth-child(3) { animation-delay: .3s; }
@keyframes aui-dots { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
.aui-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); }
.aui-loading-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: color-mix(in srgb, var(--aui-bg) 65%, transparent); border-radius: inherit; backdrop-filter: blur(1px); }
.aui-page-loader { position: fixed; top: 0; left: 0; right: 0; z-index: var(--aui-z-toast); height: 2px; overflow: hidden; background: transparent; }
.aui-page-loader > span { display: block; width: 30%; height: 100%; background: var(--aui-accent); animation: aui-indeterminate 1.1s var(--aui-ease) infinite; }

/* ==========================================================================
   Armsys UI 2 — Code & developer experience (Atom One Dark)
   Code windows · code groups · line numbers / highlight / diff · terminal ·
   CLI · inline code · copy · highlight.js theme · HTTP methods · endpoints ·
   parameters · responses · two-column API reference.

   Highlighting: armsys-ui.js lazy-loads highlight.js from cdnjs for any
   <pre><code class="language-xxx"> and paints it with the .hljs-* rules below.
   Hand-written token spans (.aui-tok-*) use the same palette.
   ========================================================================== */
.aui-code { --_r: var(--aui-radius-lg); position: relative; min-width: 0; background: var(--aui-code-bg); border: 1px solid var(--aui-code-border); border-radius: var(--_r); overflow: hidden; color: var(--aui-code-text); }
.aui-code-header { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 6px 0 14px; background: var(--aui-code-header); border-bottom: 1px solid var(--aui-code-border); }
.aui-code-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--aui-font-mono); font-size: var(--aui-fs-xs); color: #c8ccd4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-code-title .aui-icon { width: 14px; height: 14px; color: var(--aui-code-muted); }
.aui-code-lang { font-family: var(--aui-font-mono); font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-medium); color: var(--aui-code-muted); letter-spacing: .02em; text-transform: lowercase; }
.aui-code-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.aui-code-dots { display: inline-flex; gap: 6px; margin-right: 4px; }
.aui-code-dots > i { width: 11px; height: 11px; border-radius: 50%; background: #3a3f4b; }
.aui-code-dots--color > i:nth-child(1) { background: #ff5f57; }
.aui-code-dots--color > i:nth-child(2) { background: #febc2e; }
.aui-code-dots--color > i:nth-child(3) { background: #28c840; }
.aui-code-tabs { display: flex; align-items: stretch; align-self: stretch; gap: 2px; margin-left: -6px; overflow-x: auto; scrollbar-width: none; }
.aui-code-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; margin-bottom: -1px; flex: none;
  font: inherit; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); color: var(--aui-code-muted); white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--aui-dur-fast), border-color var(--aui-dur-fast);
}
.aui-code-tab:hover { color: #c8ccd4; }
.aui-code-tab.is-active, .aui-code-tab[aria-selected="true"] { color: #e6e6e6; border-bottom-color: var(--aui-code-function); }
.aui-code-tab .aui-icon { width: 13px; height: 13px; }
.aui-code-body { position: relative; }
.aui-code-body > .aui-copy--float { position: absolute; top: 8px; right: 8px; z-index: 1; opacity: 0; transition: opacity var(--aui-dur-fast); }
.aui-code-body:hover > .aui-copy--float, .aui-code-body > .aui-copy--float:focus-visible, .aui-code-body > .aui-copy--float.is-copied { opacity: 1; }
@media (hover: none) { .aui-code-body > .aui-copy--float { opacity: 1; } }
.aui-pre, .aui-code pre {
  margin: 0; padding: 16px 18px; overflow: auto; max-height: var(--aui-code-max-h, none);
  font-family: var(--aui-font-mono); font-size: 12.75px; line-height: 1.7; color: var(--aui-code-text); tab-size: 2; white-space: pre;
  background: transparent; border: 0; border-radius: 0; scrollbar-color: #3a3f4b transparent;
}
.aui-code pre code, .aui-pre code { display: block; min-width: max-content; font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.aui-code pre code.hljs { background: none; padding: 0; overflow: visible; }
.aui-code ::selection { background: var(--aui-code-selection); }
.aui-code-footer { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--aui-code-border); font-size: var(--aui-fs-xs); color: var(--aui-code-muted); background: var(--aui-code-header); }
.aui-code--scroll { --aui-code-max-h: 380px; }
.aui-code--flush { border-radius: 0; border: 0; }
.aui-code--wrap pre { white-space: pre-wrap; word-break: break-word; }
.aui-code--wrap pre code { min-width: 0; }
.aui-code--sm pre { font-size: 12px; padding: 12px 14px; }

/* Lines: JS wraps each line in .aui-line when [data-aui-lines] or line marks are used */
.aui-code pre:has(.aui-line) { padding-inline: 0; }
.aui-line { display: inline-block; min-width: 100%; padding: 0 18px; }
.aui-code[data-aui-lines] pre code, .aui-code.aui-code--lines pre code { counter-reset: aui-line; }
:is(.aui-code[data-aui-lines], .aui-code--lines) .aui-line { padding-left: 52px; position: relative; }
:is(.aui-code[data-aui-lines], .aui-code--lines) .aui-line::before {
  counter-increment: aui-line; content: counter(aui-line); position: absolute; left: 18px; width: 22px; text-align: right;
  color: var(--aui-code-gutter); user-select: none; -webkit-user-select: none;
}
.aui-line.is-hl, .aui-code-hl { background: rgb(97 175 239 / .1); box-shadow: inset 2px 0 0 var(--aui-code-function); }
.aui-line.is-add, .aui-code-add { background: rgb(152 195 121 / .12); box-shadow: inset 2px 0 0 var(--aui-code-string); }
.aui-line.is-del, .aui-code-del { background: rgb(224 108 117 / .12); box-shadow: inset 2px 0 0 var(--aui-code-property); }
.aui-line.is-add::after, .aui-line.is-del::after { position: absolute; left: 6px; user-select: none; }
.aui-line.is-dim { opacity: .45; }
.aui-code-hl, .aui-code-add, .aui-code-del { display: inline-block; min-width: calc(100% + 36px); margin: 0 -18px; padding: 0 18px; }

/* ---------- highlight.js — Atom One Dark mapped to tokens ---------- */
.aui .hljs { color: var(--aui-code-text); background: transparent; }
.aui :is(.hljs-comment, .hljs-quote) { color: var(--aui-code-comment); font-style: italic; }
.aui :is(.hljs-doctag, .hljs-keyword, .hljs-formula) { color: var(--aui-code-keyword); }
.aui :is(.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst) { color: var(--aui-code-tag); }
.aui .hljs-literal { color: var(--aui-code-literal); }
.aui :is(.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string) { color: var(--aui-code-string); }
.aui :is(.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number) { color: var(--aui-code-number); }
.aui :is(.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title) { color: var(--aui-code-function); }
.aui :is(.hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title) { color: var(--aui-code-type); }
.aui :is(.hljs-params) { color: var(--aui-code-text); }
.aui .hljs-property { color: var(--aui-code-property); }
.aui .hljs-operator { color: var(--aui-code-operator); }
.aui .hljs-punctuation { color: var(--aui-code-punctuation); }
.aui .hljs-emphasis { font-style: italic; }
.aui .hljs-strong { font-weight: bold; }
.aui .hljs-link { text-decoration: underline; }

/* ---------- Hand-written tokens (no runtime) ---------- */
.aui-tok-keyword { color: var(--aui-code-keyword); }
.aui-tok-string { color: var(--aui-code-string); }
.aui-tok-number, .aui-tok-boolean, .aui-tok-attr { color: var(--aui-code-number); }
.aui-tok-comment { color: var(--aui-code-comment); font-style: italic; }
.aui-tok-function, .aui-tok-title { color: var(--aui-code-function); }
.aui-tok-property, .aui-tok-tag { color: var(--aui-code-tag); }
.aui-tok-operator, .aui-tok-literal { color: var(--aui-code-operator); }
.aui-tok-punctuation, .aui-tok-variable { color: var(--aui-code-text); }
.aui-tok-type, .aui-tok-class { color: var(--aui-code-type); }

/* Terminal */
.aui-code--terminal { --aui-code-bg: #16181d; }
.aui-code--terminal pre { color: #c8ccd4; }
.aui-code-prompt { color: var(--aui-code-string); user-select: none; -webkit-user-select: none; margin-right: 10px; }
.aui-code-output { color: var(--aui-code-muted); }

/* Code group: several files behind tabs — <div class="aui-code" data-aui-tabs> with .aui-code-tab + [data-aui-panel] */
.aui-code > [data-aui-panel] { position: relative; }

/* Inline code outside prose */
.aui-code-inline { font-family: var(--aui-font-mono); font-size: .86em; padding: .12em .4em; color: var(--aui-text); background: var(--aui-surface-2); border: 1px solid var(--aui-border-soft); border-radius: var(--aui-radius-xs); white-space: break-spaces; }

/* Copy button: <button class="aui-copy" data-aui-copy>…</button> */
.aui-copy {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; flex: none;
  font: inherit; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); white-space: nowrap;
  background: transparent; border: 1px solid transparent; border-radius: var(--aui-radius-sm); cursor: pointer;
  transition: color var(--aui-dur-fast), background-color var(--aui-dur-fast), border-color var(--aui-dur-fast);
}
.aui-copy:hover { color: var(--aui-text); background: var(--aui-hover); }
.aui-code .aui-copy { color: var(--aui-code-muted); }
.aui-code .aui-copy:hover { color: #e6e6e6; background: rgb(255 255 255 / .06); }
.aui-copy .aui-icon { width: 14px; height: 14px; }
.aui-copy--float { background: #262a33; border-color: #353a44; }
.aui-copy--icon { width: 28px; padding: 0; justify-content: center; }
.aui-copy .aui-copy-done { display: none; }
.aui-copy .aui-copy-idle { display: inline-flex; align-items: center; gap: 6px; }
.aui-copy.is-copied, .aui-code .aui-copy.is-copied { color: var(--aui-success); }
.aui-copy.is-copied .aui-copy-idle { display: none; }
.aui-copy.is-copied .aui-copy-done { display: inline-flex; align-items: center; gap: 6px; }

/* Single-line CLI command */
.aui-cli {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 16px; max-width: 100%;
  font-family: var(--aui-font-mono); font-size: 13px; color: #c8ccd4;
  background: var(--aui-code-bg); border: 1px solid var(--aui-code-border); border-radius: var(--aui-radius-md);
}
.aui-cli::before { content: "$"; color: var(--aui-code-string); user-select: none; -webkit-user-select: none; }
.aui-cli--npm::before { content: ">"; }
.aui-cli > code, .aui-cli-cmd { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font: inherit; color: inherit; }
.aui-cli .aui-copy { color: var(--aui-code-muted); }
.aui-cli .aui-copy:hover { color: #e6e6e6; background: rgb(255 255 255 / .06); }

/* ---------- HTTP methods ---------- */
.aui-method {
  --_t: var(--aui-text-muted);
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 48px; height: 20px; padding: 0 6px;
  font-family: var(--aui-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase;
  color: var(--_t); background: color-mix(in srgb, var(--_t) 12%, transparent); border: 1px solid color-mix(in srgb, var(--_t) 30%, transparent); border-radius: var(--aui-radius-xs);
}
.aui-method--get { --_t: var(--aui-success); }
.aui-method--post { --_t: var(--aui-info); }
.aui-method--put { --_t: var(--aui-orange); }
.aui-method--patch { --_t: var(--aui-purple); }
.aui-method--delete { --_t: var(--aui-danger); }
.aui-method--head, .aui-method--options { --_t: var(--aui-text-muted); }
.aui-method--wss, .aui-method--ws { --_t: var(--aui-pink); }
.aui-method--grpc, .aui-method--event { --_t: var(--aui-teal); }
.aui-method--sm { min-width: 38px; height: 17px; font-size: 9.5px; padding: 0 4px; }

/* ---------- Endpoint ---------- */
.aui-endpoint {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 46px; padding: 6px 6px 6px 12px;
  font-family: var(--aui-font-mono); font-size: 13px;
  background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md);
}
.aui-endpoint-path { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--aui-text); scrollbar-width: none; }
.aui-endpoint-host { color: var(--aui-text-subtle); }
.aui-path-param { color: var(--aui-code-number); }
.aui[data-aui-theme="light"] .aui-path-param { color: #b76b01; }
.aui-endpoint .aui-btn { font-family: var(--aui-font); }
.aui-endpoint-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aui-endpoint-title { font-size: var(--aui-fs-h3); font-weight: var(--aui-fw-semibold); letter-spacing: -.015em; color: var(--aui-text); }
.aui-endpoint-summary { margin-top: 6px; color: var(--aui-text-muted); font-size: var(--aui-fs-md); }

/* ---------- Parameters / property list ---------- */
.aui-params { border-top: 1px solid var(--aui-border); }
.aui-params-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--aui-text-subtle); }
.aui-param { padding: 14px 0; border-bottom: 1px solid var(--aui-border-soft); }
.aui-param-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.aui-param-name { font-family: var(--aui-font-mono); font-size: 13px; font-weight: 600; color: var(--aui-text); }
.aui-param-type { font-family: var(--aui-font-mono); font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-param-req { font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--aui-warning); }
.aui-param-opt { font-size: var(--aui-fs-2xs); color: var(--aui-text-disabled); letter-spacing: .04em; text-transform: uppercase; }
.aui-param-default { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-param-default code { font-family: var(--aui-font-mono); color: var(--aui-text-muted); }
.aui-param-desc { margin-top: 6px; font-size: var(--aui-fs-md); line-height: 1.6; color: var(--aui-text-muted); }
.aui-param-desc code { font-family: var(--aui-font-mono); font-size: .86em; padding: .1em .35em; color: var(--aui-text); background: var(--aui-surface-2); border-radius: 4px; }
.aui-param-values { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aui-param-children { margin-top: 12px; padding: 0 0 0 14px; border-left: 1px solid var(--aui-border); }
.aui-param-children > .aui-param:last-child { border-bottom: 0; padding-bottom: 0; }
.aui-param-children > .aui-param:first-child { padding-top: 0; }
details.aui-param-toggle > summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 10px; font-size: var(--aui-fs-xs); color: var(--aui-text-muted); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-full); cursor: pointer; list-style: none; }
details.aui-param-toggle > summary::-webkit-details-marker { display: none; }
details.aui-param-toggle > summary::before { content: "+"; font-family: var(--aui-font-mono); }
details.aui-param-toggle[open] > summary::before { content: "−"; }

/* Response status list */
.aui-responses { display: flex; flex-direction: column; border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); overflow: hidden; }
.aui-response { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--aui-border-soft); font-size: var(--aui-fs-sm); color: var(--aui-text-muted); }
.aui-response:first-child { border-top: 0; }
.aui-status-code { font-family: var(--aui-font-mono); font-weight: 700; font-size: var(--aui-fs-xs); min-width: 34px; }
.aui-status-code.is-2xx { color: var(--aui-success); }
.aui-status-code.is-3xx { color: var(--aui-info); }
.aui-status-code.is-4xx { color: var(--aui-warning); }
.aui-status-code.is-5xx { color: var(--aui-danger); }

/* Two-column API reference: description left, sticky examples right */
.aui-api { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.aui-api-examples { position: sticky; top: calc(var(--aui-header-h) + 24px); display: flex; flex-direction: column; gap: 16px; }
.aui-api + .aui-api { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--aui-border-soft); }
@media (max-width: 1100px) {
  .aui-api { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .aui-api-examples { position: static; }
}

/* ==========================================================================
   Armsys UI 2 — Frame: the shared shell of every public surface
   ONE container width (--aui-frame), ONE header height (--aui-header-h).
   Website, docs, pricing, blog, changelog and data pages all use the same
   .aui-site-header + .aui-container + .aui-site-footer, so moving between
   them never changes the header's size or the content's left edge.

   <body class="aui aui-site">                       (add aui-site--fluid for edge-to-edge)
     <header class="aui-site-header"><div class="aui-container aui-site-header-inner">…</div></header>
     <main>…</main>
     <footer class="aui-site-footer"><div class="aui-container">…</div></footer>
   ========================================================================== */
.aui-site { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-size: var(--aui-fs-lg); }
.aui-site > main, .aui-site-main { flex: 1 0 auto; min-width: 0; }
.aui-site--fluid { --aui-frame: 100vw; }
.aui-container { width: 100%; max-width: calc(var(--aui-frame) + var(--aui-gutter) * 2); margin-inline: auto; padding-inline: var(--aui-gutter); }
.aui-container--content { max-width: calc(var(--aui-content) + var(--aui-gutter) * 2); }
.aui-container--narrow { max-width: calc(var(--aui-narrow) + var(--aui-gutter) * 2); }
.aui-container--fluid { max-width: none; }

/* ---------- Site header ---------- */
.aui-site-header {
  position: sticky; top: 0; z-index: var(--aui-z-header); height: var(--aui-header-h); flex: none;
  background: color-mix(in srgb, var(--aui-bg) 82%, transparent); border-bottom: 1px solid var(--aui-border-soft);
  backdrop-filter: var(--aui-blur); -webkit-backdrop-filter: var(--aui-blur);
}
.aui-site-header--transparent:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.aui-site-header--static { position: relative; }
.aui-site-header-inner { display: flex; align-items: center; gap: 24px; height: 100%; }
.aui-site-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: var(--aui-fs-lg); font-weight: var(--aui-fw-semibold); letter-spacing: -.02em; color: var(--aui-text); text-decoration: none; }
.aui-site-brand > .aui-badge { margin-left: 2px; }
.aui-site-brand .aui-brand-sub { padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--aui-border); font-weight: var(--aui-fw-regular); color: var(--aui-text-subtle); }
.aui-site-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.aui-site-nav > ul { display: contents; list-style: none; }
.aui-site-nav-item { position: relative; list-style: none; }
.aui-site-nav-link {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; margin: 0;
  font: inherit; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text-muted); white-space: nowrap; text-decoration: none;
  background: none; border: 0; border-radius: var(--aui-radius-sm); cursor: pointer; transition: color var(--aui-dur-fast), background-color var(--aui-dur-fast);
}
.aui-site-nav-link:hover, .aui-site-nav-item:hover > .aui-site-nav-link, .aui-site-nav-item.is-open > .aui-site-nav-link { color: var(--aui-text); background: var(--aui-hover); }
.aui-site-nav-link.is-active, .aui-site-nav-link[aria-current="page"] { color: var(--aui-text); }
.aui-site-nav-link .aui-icon { width: 13px; height: 13px; color: var(--aui-text-subtle); transition: transform var(--aui-dur) var(--aui-ease); }
.aui-site-nav-item.is-open > .aui-site-nav-link .aui-icon { transform: rotate(180deg); }
.aui-site-search { flex: 0 1 280px; margin-left: auto; }
.aui-site-search + .aui-site-actions { margin-left: 0; }
.aui-site-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.aui-nav-toggle { display: none !important; }
.aui-site-header .aui-search-trigger { height: 34px; }

/* ---------- Mega menu / product menu ---------- */
.aui-mega {
  position: absolute; top: calc(100% + 12px); left: -8px; z-index: var(--aui-z-dropdown); width: max-content; min-width: 280px; max-width: min(820px, calc(100vw - 32px)); padding: 6px;
  background: var(--aui-surface-elevated); border: 1px solid var(--aui-border-strong); border-radius: var(--aui-radius-xl); box-shadow: var(--aui-shadow-overlay);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.99); transform-origin: top left;
  transition: opacity var(--aui-dur-fast), transform var(--aui-dur) var(--aui-ease-out), visibility 0s linear var(--aui-dur-fast);
}
.aui-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.aui-site-nav-item.is-open > .aui-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 961px) {
  .aui-site-nav-item:hover > .aui-mega, .aui-site-nav-item:focus-within > .aui-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .aui-site-nav-item:hover > .aui-site-nav-link .aui-icon { transform: rotate(180deg); }
}
.aui-mega--end { left: auto; right: -8px; transform-origin: top right; }
.aui-mega-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(240px, 1fr)); gap: 2px; }
.aui-mega-group { padding: 4px; min-width: 0; }
.aui-mega-group + .aui-mega-group { border-left: 1px solid var(--aui-border-soft); }
.aui-mega-title { padding: 8px 10px 6px; font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--aui-text-subtle); }
.aui-mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: var(--aui-radius-md); color: inherit; text-decoration: none; transition: background-color var(--aui-dur-fast); }
.aui-mega-item:hover, .aui-mega-item:focus-visible { background: var(--aui-hover); }
.aui-mega-item .aui-icon-box { --_s: 34px; }
.aui-mega-item-title { display: flex; align-items: center; gap: 6px; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text); line-height: 1.35; }
.aui-mega-item-desc { display: block; margin-top: 2px; font-size: var(--aui-fs-xs); line-height: 1.45; color: var(--aui-text-subtle); white-space: normal; }
.aui-mega-feature { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 100%; padding: 16px; border-radius: var(--aui-radius-lg); background: linear-gradient(160deg, color-mix(in srgb, var(--aui-accent) 18%, var(--aui-surface-2)), var(--aui-surface-1)); border: 1px solid var(--aui-border); color: inherit; text-decoration: none; }
.aui-mega-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px -6px -6px; padding: 10px 16px; font-size: var(--aui-fs-xs); color: var(--aui-text-muted); background: var(--aui-bg-alt); border-top: 1px solid var(--aui-border-soft); border-radius: 0 0 var(--aui-radius-xl) var(--aui-radius-xl); }

/* ---------- Search trigger (opens command palette) ---------- */
.aui-search-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; height: var(--aui-control-h); padding: 0 6px 0 10px; margin: 0;
  font: inherit; font-size: var(--aui-fs-sm); color: var(--aui-text-subtle); text-align: left;
  background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-control-radius); cursor: pointer; transition: border-color var(--aui-dur-fast), color var(--aui-dur-fast), background-color var(--aui-dur-fast);
}
.aui-search-trigger:hover { border-color: var(--aui-border-strong); color: var(--aui-text-muted); }
.aui-search-trigger > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-search-trigger > .aui-icon { width: 15px; height: 15px; }

/* ---------- Footer ---------- */
.aui-site-footer { flex: none; padding: 64px 0 28px; font-size: var(--aui-fs-sm); background: var(--aui-bg); border-top: 1px solid var(--aui-border-soft); }
.aui-site-footer--compact { padding: 20px 0; }
.aui-site-footer--compact .aui-footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.aui-footer-grid { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(var(--cols, 4), minmax(0, 1fr)); gap: 32px; }
.aui-footer-brand > p { margin-top: 14px; max-width: 300px; font-size: var(--aui-fs-sm); line-height: 1.6; color: var(--aui-text-subtle); }
.aui-footer-brand .aui-row { margin-top: 18px; }
.aui-footer-col h4, .aui-footer-title { margin: 0 0 14px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-semibold); letter-spacing: .01em; color: var(--aui-text); }
.aui-footer-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aui-footer-col a { font-size: var(--aui-fs-sm); color: var(--aui-text-subtle); transition: color var(--aui-dur-fast); }
.aui-footer-col a:hover { color: var(--aui-text); }
.aui-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 22px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); border-top: 1px solid var(--aui-border-soft); }
.aui-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.aui-footer-legal a:hover { color: var(--aui-text); }

/* ---------- Responsive frame ---------- */
@media (max-width: 1100px) {
  .aui-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aui-footer-brand { grid-column: 1 / -1; }
  .aui-site-search { flex-basis: 200px; }
}
@media (max-width: 960px) {
  .aui-site-header :is(.aui-site-nav, .aui-site-search), .aui-site-header .aui-site-actions > .aui-hide-mobile { display: none; }
  .aui-nav-toggle { display: inline-flex !important; }
  .aui-site-header .aui-site-actions { margin-left: auto; }
  .aui-site-header.is-open { background: var(--aui-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .aui-site-header.is-open .aui-site-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; inset: var(--aui-header-h) 0 0 0; z-index: var(--aui-z-drawer);
    padding: 8px var(--aui-gutter) calc(32px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--aui-bg); animation: aui-fade-in var(--aui-dur) ease-out;
  }
  .aui-site-header.is-open .aui-site-nav-link { width: 100%; height: 52px; padding: 0 4px; font-size: var(--aui-fs-lg); justify-content: space-between; border-bottom: 1px solid var(--aui-border-soft); border-radius: 0; background: none; }
  .aui-site-header.is-open .aui-mega { position: static; display: none; width: auto; max-width: none; min-width: 0; padding: 6px 0 12px; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; }
  .aui-site-header.is-open .aui-site-nav-item.is-open > .aui-mega { display: block; }
  .aui-site-header.is-open .aui-mega-grid { grid-template-columns: minmax(0, 1fr); }
  .aui-site-header.is-open .aui-mega-group + .aui-mega-group { border-left: 0; }
  .aui-site-header.is-open :is(.aui-mega-footer, .aui-mega-feature) { display: none; }
  .aui-site-header.is-open .aui-site-nav-mobile-actions { display: grid; }
}
.aui-site-nav-mobile-actions { display: none; gap: 8px; margin-top: 20px; }
@media (max-width: 640px) {
  .aui-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .aui-site-header-inner { gap: 12px; }
}

/* ==========================================================================
   Armsys UI 2 — Public website sections
   Hero · eyebrow · sections · feature/card/tile grids · product & resource
   cards · checklist · logo strip · CTA · split · media · window frame ·
   testimonial · FAQ · link lists. Shell (header/footer) lives in frame.css.
   ========================================================================== */
/* ---------- Hero ---------- */
.aui-hero { position: relative; padding: 112px 0 96px; isolation: isolate; }
.aui-hero--glow::after { content: ""; position: absolute; left: 50%; top: -240px; z-index: -1; width: min(1100px, 120vw); height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--aui-accent) 22%, transparent), transparent); opacity: .7; pointer-events: none; }
.aui-hero--grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--aui-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--aui-grid-line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 25%, transparent 72%);
}
.aui-hero-inner { max-width: 760px; }
.aui-hero--center .aui-hero-inner { margin-inline: auto; text-align: center; }
.aui-hero--center :is(.aui-hero-actions, .aui-hero-meta) { justify-content: center; }
.aui-hero--center .aui-hero-description { margin-inline: auto; }
.aui-hero-title { margin-top: 20px; font-size: var(--aui-fs-display); font-weight: var(--aui-fw-bold); letter-spacing: -.038em; line-height: 1.07; color: var(--aui-text); text-wrap: balance; }
.aui-hero-title:first-child { margin-top: 0; }
.aui-hero-title em { font-style: normal; color: var(--aui-text-subtle); }
.aui-hero-description { margin-top: 20px; max-width: 600px; font-size: var(--aui-fs-xl); line-height: 1.65; color: var(--aui-text-muted); text-wrap: pretty; }
.aui-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; }
.aui-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 22px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-hero-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.aui-hero-meta .aui-icon { width: 14px; height: 14px; color: var(--aui-success); }
.aui-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.aui-hero--split .aui-hero-inner { max-width: 560px; }
.aui-hero-visual { min-width: 0; }
.aui-hero--short { padding-bottom: 48px; }
.aui-hero--compact { padding: 64px 0 44px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-hero--compact .aui-hero-title { font-size: clamp(1.75rem, 3vw, 2.375rem); letter-spacing: -.03em; }
.aui-hero--compact .aui-hero-description { font-size: var(--aui-fs-lg); margin-top: 12px; }
.aui-hero--compact .aui-breadcrumb { margin-bottom: 18px; }

/* Eyebrow */
.aui-eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: 8px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); color: var(--aui-text-muted); letter-spacing: .01em; }
.aui-eyebrow--caps { font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--aui-text-subtle); }
.aui-eyebrow--pill { height: 28px; padding: 0 12px 0 4px; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-full); color: var(--aui-text-secondary); text-decoration: none; transition: border-color var(--aui-dur-fast); }
a.aui-eyebrow--pill:hover { border-color: var(--aui-border-interactive); }
.aui-eyebrow--pill > .aui-badge { border-radius: var(--aui-radius-full); }
.aui-eyebrow--pill .aui-icon { width: 13px; height: 13px; color: var(--aui-text-subtle); }

/* ---------- Sections ---------- */
.aui-section { padding: 96px 0; }
.aui-section--tight { padding: 56px 0; }
.aui-section--flush-top { padding-top: 0; }
.aui-section--alt { background: var(--aui-bg-alt); }
.aui-section--bordered { border-top: 1px solid var(--aui-border-soft); }
.aui-section-header { max-width: 640px; margin-bottom: 44px; }
.aui-section-header--center { margin-inline: auto; text-align: center; }
.aui-section-header--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.aui-section-header--split > :first-child { max-width: 640px; }
.aui-section-title { margin-top: 12px; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: var(--aui-fw-semibold); letter-spacing: -.03em; line-height: 1.18; color: var(--aui-text); text-wrap: balance; }
.aui-section-title:first-child { margin-top: 0; }
.aui-section-desc { margin-top: 12px; font-size: var(--aui-fs-lg); line-height: 1.65; color: var(--aui-text-muted); text-wrap: pretty; }

/* ---------- Grids ---------- */
.aui-feature-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1px; background: var(--aui-border-soft); border: 1px solid var(--aui-border-soft); border-radius: var(--aui-radius-lg); overflow: hidden; }
.aui-feature-grid > * { background: var(--aui-bg); padding: 28px; min-width: 0; }
.aui-section--alt .aui-feature-grid > * { background: var(--aui-bg-alt); }
.aui-card-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.aui-feature-grid--2, .aui-card-grid--2 { --cols: 2; }
.aui-feature-grid--4, .aui-card-grid--4 { --cols: 4; }
.aui-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr)); gap: 12px; }

/* Feature */
.aui-feature-title { margin-top: 18px; font-size: var(--aui-fs-lg); font-weight: var(--aui-fw-semibold); letter-spacing: -.012em; color: var(--aui-text); }
.aui-feature-title:first-child { margin-top: 0; }
.aui-feature-text { margin-top: 6px; font-size: var(--aui-fs-md); line-height: 1.62; color: var(--aui-text-muted); }
.aui-feature .aui-link-arrow { margin-top: 16px; }
.aui-feature-card { display: block; padding: 24px; color: inherit; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); transition: border-color var(--aui-dur-fast), background-color var(--aui-dur-fast); }
a.aui-feature-card:hover { border-color: var(--aui-border-strong); background: var(--aui-surface-2); }

/* Product / solution card */
.aui-product-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; color: inherit; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); transition: border-color var(--aui-dur-fast); }
a.aui-product-card:hover { border-color: var(--aui-border-strong); }
.aui-product-card-head { display: flex; align-items: center; gap: 12px; }
.aui-product-name { font-size: var(--aui-fs-h4); font-weight: var(--aui-fw-semibold); letter-spacing: -.012em; color: var(--aui-text); }
.aui-product-kind { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-product-desc { margin-top: 16px; font-size: var(--aui-fs-md); line-height: 1.62; color: var(--aui-text-muted); }
.aui-product-card .aui-checklist { margin-top: 18px; }
.aui-product-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; }
.aui-product-visual { margin: -24px -24px 22px; padding: 18px; border-bottom: 1px solid var(--aui-border-soft); background: var(--aui-bg-alt); border-radius: var(--aui-radius-lg) var(--aui-radius-lg) 0 0; }

/* Tile — integration / SDK / tool / language */
.aui-tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; color: inherit; text-decoration: none; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); transition: border-color var(--aui-dur-fast), background-color var(--aui-dur-fast); }
a.aui-tile:hover { border-color: var(--aui-border-strong); background: var(--aui-surface-2); }
.aui-tile-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.aui-tile-title { display: block; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-tile-meta { display: block; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-tile > .aui-icon:last-child { color: var(--aui-text-subtle); transition: transform var(--aui-dur) var(--aui-ease); }
a.aui-tile:hover > .aui-icon:last-child { transform: translateX(2px); color: var(--aui-text); }
.aui-lang-mark { width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; border-radius: var(--aui-radius-sm); font-family: var(--aui-font-mono); font-size: 11px; font-weight: 700; color: var(--aui-text); background: var(--aui-surface-3); border: 1px solid var(--aui-border-strong); }

/* Resource card */
.aui-resource-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; color: inherit; border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); transition: border-color var(--aui-dur-fast), background-color var(--aui-dur-fast); }
a.aui-resource-card:hover { border-color: var(--aui-border-strong); background: var(--aui-surface-1); }
.aui-resource-kind { font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--aui-text-subtle); }
.aui-resource-title { font-size: var(--aui-fs-md); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-resource-text { font-size: var(--aui-fs-sm); line-height: 1.55; color: var(--aui-text-muted); }
.aui-resource-card .aui-link-arrow { margin-top: auto; padding-top: 6px; }

/* Checklist */
.aui-checklist { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: var(--aui-fs-sm); line-height: 1.5; color: var(--aui-text-secondary); }
.aui-checklist > li { display: flex; align-items: flex-start; gap: 10px; }
.aui-checklist > li::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
  background: color-mix(in srgb, var(--aui-success) 14%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ecf8e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.aui-checklist > li.is-off { color: var(--aui-text-subtle); }
.aui-checklist > li.is-off::before { background: var(--aui-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 10px no-repeat; }
.aui-checklist--plain > li::before { background: none; width: 4px; height: 4px; margin: 9px 4px 0; background-color: var(--aui-text-subtle); }

/* Logo strip */
.aui-logo-strip-title { margin-bottom: 26px; text-align: center; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 52px; }
.aui-logo-item { display: inline-flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: var(--aui-fw-semibold); letter-spacing: -.03em; color: var(--aui-text-subtle); opacity: .85; transition: color var(--aui-dur-fast), opacity var(--aui-dur-fast); }
.aui-logo-item:hover { color: var(--aui-text-secondary); opacity: 1; }
.aui-logo-item .aui-icon { width: 18px; height: 18px; }

/* CTA */
.aui-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 44px; overflow: hidden; isolation: isolate; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); }
.aui-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--aui-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--aui-grid-line) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.aui-cta--center { flex-direction: column; text-align: center; }
.aui-cta--center::before { -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%); mask-image: radial-gradient(ellipse at center, #000, transparent 70%); }
.aui-cta-body { max-width: 600px; }
.aui-cta-title { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: var(--aui-fw-semibold); letter-spacing: -.028em; line-height: 1.2; color: var(--aui-text); text-wrap: balance; }
.aui-cta-text { margin-top: 10px; font-size: var(--aui-fs-lg); line-height: 1.6; color: var(--aui-text-muted); }
.aui-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Split content & media */
.aui-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.aui-split--reverse > :first-child { order: 2; }
.aui-split-body > .aui-checklist { margin-top: 24px; }
.aui-split-body > .aui-hero-actions { margin-top: 28px; }
.aui-media { position: relative; display: grid; place-items: center; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); }
.aui-media::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--aui-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--aui-grid-line) 1px, transparent 1px); background-size: 32px 32px; }
.aui-media > * { position: relative; }
.aui-media > img, .aui-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Product window frame (screenshots, live UI previews) */
.aui-window { min-width: 0; overflow: hidden; background: var(--aui-bg-alt); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-xl); box-shadow: var(--aui-shadow-lg); }
.aui-window-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); background: var(--aui-surface-1); border-bottom: 1px solid var(--aui-border-soft); }
.aui-window-dots { display: inline-flex; gap: 6px; }
.aui-window-dots > i { width: 9px; height: 9px; border-radius: 50%; background: var(--aui-surface-3); border: 1px solid var(--aui-border-strong); }
.aui-window-body { padding: 16px; }
.aui-window > .aui-code { border: 0; border-radius: 0; }

/* Testimonial / quote */
.aui-quote { margin: 0; padding: 28px; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); }
.aui-quote > blockquote { margin: 0; font-size: var(--aui-fs-lg); line-height: 1.65; color: var(--aui-text-secondary); }
.aui-quote > figcaption { display: flex; align-items: center; gap: 12px; margin-top: 20px; }

/* FAQ / accordion (native <details>) */
.aui-faq { border-top: 1px solid var(--aui-border); }
.aui-faq > details { border-bottom: 1px solid var(--aui-border); }
.aui-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 2px; list-style: none; cursor: pointer;
  font-size: var(--aui-fs-lg); font-weight: var(--aui-fw-medium); color: var(--aui-text); transition: color var(--aui-dur-fast);
}
.aui-faq summary::-webkit-details-marker { display: none; }
.aui-faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid var(--aui-text-subtle); border-bottom: 1.5px solid var(--aui-text-subtle); transform: translateY(-2px) rotate(45deg); transition: transform var(--aui-dur) var(--aui-ease); }
.aui-faq details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.aui-faq summary:hover { color: var(--aui-text); }
.aui-faq summary:hover::after { border-color: var(--aui-text); }
.aui-faq-body { max-width: 760px; padding: 0 2px 22px; font-size: var(--aui-fs-md); line-height: 1.72; color: var(--aui-text-muted); }
.aui-faq-body > p + p { margin-top: .8em; }
.aui-faq--cards { border: 0; display: grid; gap: 8px; }
.aui-faq--cards > details { border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); background: var(--aui-surface-1); padding: 0 16px; }
.aui-faq--sm summary { font-size: var(--aui-fs-md); padding: 14px 2px; }
.aui-faq-layout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; }

/* Related links */
.aui-link-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.aui-link-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.aui-link-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--aui-radius-sm); font-size: var(--aui-fs-sm); color: var(--aui-text-secondary); }
.aui-link-list a:hover { background: var(--aui-hover); color: var(--aui-text); }

/* ---------- Responsive marketing sections ---------- */
@media (max-width: 1100px) {
  .aui-feature-grid--4, .aui-card-grid--4 { --cols: 2; }
}
@media (max-width: 960px) {
  .aui-hero { padding: 72px 0 60px; }
  .aui-hero-grid, .aui-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .aui-split--reverse > :first-child { order: 0; }
  .aui-feature-grid, .aui-card-grid { --cols: 2; }
  .aui-faq-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .aui-section { padding: 72px 0; }
}
@media (max-width: 640px) {
  .aui-feature-grid, .aui-card-grid, .aui-feature-grid--4, .aui-card-grid--4 { --cols: 1; }
  .aui-feature-grid > * { padding: 22px; }
  .aui-cta { padding: 28px 22px; }
  .aui-hero-actions > .aui-btn { flex: 1 1 auto; }
  .aui-section { padding: 56px 0; }
}

/* ==========================================================================
   Armsys UI 2 — Documentation layout
   Lives INSIDE the shared frame: same header, same container edges as the
   website, so the docs nav text lines up with the header logo.

   <body class="aui aui-site">
     <header class="aui-site-header">…</header>
     <div class="aui-docs">                 [ nav | article | on this page ]
       <aside class="aui-docs-sidebar" id="docs-nav">…</aside>
       <main class="aui-docs-main"><article class="aui-docs-article">…</article></main>
       <aside class="aui-docs-toc">…</aside>
     </div>
   ========================================================================== */
.aui-docs {
  display: grid; grid-template-columns: var(--aui-docs-nav-w) minmax(0, 1fr) var(--aui-docs-toc-w);
  width: 100%; max-width: calc(var(--aui-frame) + var(--aui-gutter) * 2); margin-inline: auto; padding-inline: var(--aui-gutter);
  flex: 1 0 auto;
}
.aui-docs--no-toc { grid-template-columns: var(--aui-docs-nav-w) minmax(0, 1fr); }
.aui-docs-sidebar {
  position: sticky; top: var(--aui-header-h); height: calc(100vh - var(--aui-header-h)); height: calc(100dvh - var(--aui-header-h));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 28px 20px 48px 0; border-right: 1px solid var(--aui-border-soft); background: var(--aui-bg);
}
.aui-docs-main { min-width: 0; padding: 44px 0 96px 56px; }
.aui-docs--no-toc .aui-docs-main { padding-right: 0; }
.aui-docs-article { max-width: var(--aui-prose-width); margin-inline: auto; }
.aui-docs--wide .aui-docs-article { max-width: 1080px; }
.aui-docs-toc { position: sticky; top: var(--aui-header-h); height: calc(100vh - var(--aui-header-h)); overflow-y: auto; padding: 44px 0 40px 32px; scrollbar-width: none; }
.aui-docs-sidebar > .aui-search-trigger { margin-bottom: 20px; }

/* Docs navigation — negative inline margin aligns link text with the header logo */
.aui-docs-nav { display: flex; flex-direction: column; margin-left: -10px; }
.aui-docs-group + .aui-docs-group { margin-top: 24px; }
.aui-docs-group-title { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-docs-group-title .aui-icon { width: 14px; height: 14px; color: var(--aui-text-subtle); }
.aui-docs-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.aui-docs-link {
  display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 10px; border-radius: var(--aui-radius-sm);
  font-size: var(--aui-fs-sm); line-height: 1.45; color: var(--aui-text-muted); text-decoration: none; transition: color var(--aui-dur-fast), background-color var(--aui-dur-fast);
}
.aui-docs-link:hover { color: var(--aui-text); background: var(--aui-hover); }
.aui-docs-link.is-active, .aui-docs-link[aria-current="page"] { color: var(--aui-text); background: var(--aui-active); font-weight: var(--aui-fw-medium); }
.aui-docs-link .aui-method { margin-left: auto; min-width: 38px; height: 17px; font-size: 9.5px; padding: 0 4px; }
.aui-docs-link .aui-badge { margin-left: auto; --_h: 17px; padding: 0 5px; font-size: 10px; }
.aui-docs-sub { margin: 2px 0 6px 12px !important; padding-left: 8px !important; border-left: 1px solid var(--aui-border-soft); }
.aui-docs-sub .aui-docs-link { font-size: var(--aui-fs-xs); min-height: 26px; padding: 4px 8px; }
details.aui-docs-group > summary { list-style: none; cursor: pointer; }
details.aui-docs-group > summary::-webkit-details-marker { display: none; }
details.aui-docs-group > summary::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid var(--aui-text-subtle); border-bottom: 1.5px solid var(--aui-text-subtle); transform: rotate(-45deg); transition: transform var(--aui-dur) var(--aui-ease); }
details.aui-docs-group[open] > summary::after { transform: rotate(45deg); }

/* Article header */
.aui-docs-header { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-docs-header .aui-breadcrumb { margin-bottom: 16px; }
.aui-docs-eyebrow { margin-bottom: 10px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-semibold); color: var(--aui-accent); }
.aui-docs-title { font-size: clamp(1.875rem, 3vw, 2.375rem); font-weight: var(--aui-fw-bold); letter-spacing: -.032em; line-height: 1.12; color: var(--aui-text); text-wrap: balance; }
.aui-docs-lead { margin-top: 14px; font-size: var(--aui-fs-xl); line-height: 1.65; color: var(--aui-text-muted); text-wrap: pretty; }
.aui-docs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-docs-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.aui-docs-meta .aui-icon { width: 13px; height: 13px; }
.aui-docs-section { scroll-margin-top: calc(var(--aui-header-h) + 24px); }
.aui-docs-section + .aui-docs-section { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--aui-border-soft); }

/* On this page */
.aui-toc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-toc-title .aui-icon { width: 14px; height: 14px; color: var(--aui-text-subtle); }
.aui-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--aui-border-soft); }
.aui-toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; font-size: var(--aui-fs-xs); line-height: 1.45; color: var(--aui-text-subtle); border-left: 1px solid transparent; transition: color var(--aui-dur-fast), border-color var(--aui-dur-fast); }
.aui-toc a:hover { color: var(--aui-text-secondary); }
.aui-toc a.is-active, .aui-toc a[aria-current="true"] { color: var(--aui-text); border-left-color: var(--aui-accent); }
.aui-toc .aui-toc-sub > a { padding-left: 26px; }
.aui-toc-footer { display: grid; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--aui-border-soft); }
.aui-toc-footer a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-toc-footer a:hover { color: var(--aui-text); }
.aui-toc-footer .aui-icon { width: 13px; height: 13px; }

/* Previous / next */
.aui-docs-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 64px; }
.aui-pager-link { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); text-decoration: none; transition: border-color var(--aui-dur-fast), background-color var(--aui-dur-fast); }
.aui-pager-link:hover { border-color: var(--aui-border-strong); background: var(--aui-surface-1); }
.aui-pager-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-pager-label .aui-icon { width: 13px; height: 13px; }
.aui-pager-title { font-size: var(--aui-fs-md); font-weight: var(--aui-fw-medium); color: var(--aui-text); }
.aui-pager-link--next { grid-column: 2; align-items: flex-end; text-align: right; }
.aui-docs-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--aui-border-soft); font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-docs-foot a { display: inline-flex; align-items: center; gap: 6px; }
.aui-docs-foot a:hover { color: var(--aui-text); }
.aui-feedback { display: flex; align-items: center; gap: 8px; }

/* Docs mobile bar (visible ≤ 900px) */
.aui-docs-mobilebar { display: none; }

/* ---------- Component reference primitives (showcases, design docs) ---------- */
.aui-demo { margin: 14px 0 32px; border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); overflow: hidden; }
.aui-demo-preview { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 28px; background: var(--aui-bg-alt); }
.aui-demo-preview--stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.aui-demo-preview--start { align-items: flex-start; }
.aui-demo-preview--center { justify-content: center; }
.aui-demo-preview--block { display: block; }
.aui-demo-preview--flush { padding: 0; display: block; }
.aui-demo-preview--canvas { background-color: var(--aui-bg-alt); background-image: radial-gradient(var(--aui-border) 1px, transparent 1px); background-size: 16px 16px; }
.aui-demo-preview--tall { min-height: 320px; }
.aui-demo > .aui-code, .aui-demo > details > .aui-code { border: 0; border-top: 1px solid var(--aui-border); border-radius: 0; }
.aui-demo > details > summary { display: flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); border-top: 1px solid var(--aui-border); cursor: pointer; list-style: none; background: var(--aui-surface-1); }
.aui-demo > details > summary::-webkit-details-marker { display: none; }
.aui-demo > details > summary:hover { color: var(--aui-text); }
.aui-demo > details[open] > summary .aui-icon { transform: rotate(90deg); }
.aui-demo-label { margin: 0 0 6px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-semibold); letter-spacing: .02em; color: var(--aui-text-muted); }
.aui-demo-title { margin: 36px 0 4px; font-size: var(--aui-fs-md); font-weight: var(--aui-fw-semibold); color: var(--aui-text); scroll-margin-top: calc(var(--aui-header-h) + 24px); }
.aui-demo-desc { margin: 0 0 12px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); }
.aui-demo-desc code { font-family: var(--aui-font-mono); font-size: .88em; color: var(--aui-text-secondary); }
.aui-swatch { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); overflow: hidden; background: var(--aui-surface-1); }
.aui-swatch-color { height: 56px; background: var(--c); border-bottom: 1px solid var(--aui-border-soft); }
.aui-swatch-body { padding: 8px 10px; }
.aui-swatch-name { font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-medium); color: var(--aui-text); }
.aui-swatch-token { font-family: var(--aui-font-mono); font-size: 10.5px; color: var(--aui-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-scale-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--aui-border-soft); }
.aui-scale-row:last-child { border-bottom: 0; }
.aui-scale-meta { font-family: var(--aui-font-mono); font-size: 11px; color: var(--aui-text-subtle); }

/* ---------- Responsive docs ---------- */
@media (max-width: 1240px) {
  .aui-docs { grid-template-columns: var(--aui-docs-nav-w) minmax(0, 1fr); }
  .aui-docs-toc { display: none; }
  .aui-docs-main { padding-left: 44px; }
}
@media (max-width: 900px) {
  .aui-docs, .aui-docs--no-toc { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .aui-docs-mobilebar {
    position: sticky; top: var(--aui-header-h); z-index: calc(var(--aui-z-header) - 1); display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 var(--aui-gutter);
    font-size: var(--aui-fs-sm); color: var(--aui-text-muted); background: color-mix(in srgb, var(--aui-bg) 92%, transparent); border-bottom: 1px solid var(--aui-border-soft); backdrop-filter: var(--aui-blur); -webkit-backdrop-filter: var(--aui-blur);
  }
  .aui-docs-sidebar {
    position: fixed; left: 0; top: var(--aui-header-h); bottom: 0; z-index: var(--aui-z-drawer); width: min(320px, 86vw); height: auto;
    padding: 20px 16px 48px 26px; transform: translateX(-102%); visibility: hidden; transition: transform var(--aui-dur-slow) var(--aui-ease-out), visibility 0s linear var(--aui-dur-slow); box-shadow: var(--aui-shadow-overlay);
  }
  .aui-docs-sidebar.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .aui-docs-main { padding: 28px var(--aui-gutter) 72px; }
  .aui-docs-pager { grid-template-columns: minmax(0, 1fr); }
  .aui-pager-link--next { grid-column: auto; }
  .aui-scale-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .aui-demo-preview { padding: 18px; }
}

/* ==========================================================================
   Armsys UI 2 — Application layouts
   Sidebar shell · collapsible sidebar · topbar · top-nav shell · content
   widths · settings · split pane · full-height tool · statusbar · embedded
   mini panel. Header height is shared with the public frame (--aui-header-h).

   <body class="aui">
     <div class="aui-app">
       <aside class="aui-sidebar" id="sidebar">header · body · footer</aside>
       <div class="aui-app-main">
         <header class="aui-topbar">…</header>
         <main class="aui-app-content">…</main>
       </div>
     </div>
   ========================================================================== */
.aui-app { display: grid; grid-template-columns: var(--aui-sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; transition: grid-template-columns var(--aui-dur-slow) var(--aui-ease); }
.aui-sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; min-width: 0; background: var(--aui-bg); border-right: 1px solid var(--aui-border-soft); z-index: var(--aui-z-drawer); }
.aui-sidebar--alt { background: var(--aui-bg-alt); }
.aui-sidebar-header { display: flex; align-items: center; gap: 10px; height: var(--aui-header-h); padding: 0 12px 0 18px; border-bottom: 1px solid var(--aui-border-soft); flex: none; min-width: 0; }
.aui-sidebar-header > .aui-brand { flex: 1; min-width: 0; }
.aui-sidebar-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 16px; scrollbar-width: thin; }
.aui-sidebar-footer { flex: none; padding: 10px; border-top: 1px solid var(--aui-border-soft); }
.aui-sidebar-card { padding: 12px; border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); background: var(--aui-surface-1); font-size: var(--aui-fs-xs); color: var(--aui-text-muted); }
.aui-sidebar-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border-radius: var(--aui-radius-md); background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aui-sidebar-user:hover { background: var(--aui-hover); }
.aui-sidebar-user-text { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.aui-sidebar-user-text > :first-child { font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-sidebar-user-text > :last-child { font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Workspace / org switcher */
.aui-switcher { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 6px 8px; margin: 0; font: inherit; text-align: left; color: inherit; background: none; border: 0; border-radius: var(--aui-radius-md); cursor: pointer; }
.aui-switcher:hover { background: var(--aui-hover); }
.aui-switcher > .aui-icon:last-child { margin-left: auto; color: var(--aui-text-subtle); }

.aui-app-main { min-width: 0; display: flex; flex-direction: column; }
.aui-topbar {
  position: sticky; top: 0; z-index: var(--aui-z-header); display: flex; align-items: center; gap: 12px; height: var(--aui-header-h); padding: 0 24px; flex: none;
  background: color-mix(in srgb, var(--aui-bg) 86%, transparent); border-bottom: 1px solid var(--aui-border-soft); backdrop-filter: var(--aui-blur); -webkit-backdrop-filter: var(--aui-blur);
}
.aui-topbar-title { font-size: var(--aui-fs-md); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-topbar .aui-breadcrumb { font-size: var(--aui-fs-sm); }
.aui-topbar .aui-breadcrumb ol { font-size: var(--aui-fs-sm); }
.aui-topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.aui-topbar-search { flex: 0 1 340px; margin-left: auto; }
.aui-topbar-search + .aui-topbar-actions { margin-left: 0; }
.aui-app-content { flex: 1; width: 100%; padding: 32px 32px 64px; }
.aui-app-content--narrow { max-width: 1120px; margin-inline: auto; }
.aui-app-content--center { max-width: calc(var(--aui-frame) + 64px); margin-inline: auto; }
.aui-app-content--full { padding: 0; display: flex; flex-direction: column; }

/* Top navigation shell (no sidebar) — uses the same frame as the website */
.aui-app--topnav { display: flex; flex-direction: column; }
.aui-app--topnav .aui-topbar { padding: 0; }
.aui-app--topnav .aui-topbar > .aui-container { display: flex; align-items: center; gap: 16px; height: 100%; }
.aui-app--topnav .aui-app-content { width: 100%; max-width: calc(var(--aui-frame) + var(--aui-gutter) * 2); margin-inline: auto; padding-inline: var(--aui-gutter); }
.aui-topnav { display: flex; align-items: center; gap: 2px; margin-left: 12px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.aui-topnav > a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-medium); color: var(--aui-text-muted); border-radius: var(--aui-radius-sm); white-space: nowrap; transition: color var(--aui-dur-fast), background-color var(--aui-dur-fast); }
.aui-topnav > a:hover { color: var(--aui-text); background: var(--aui-hover); }
.aui-topnav > a.is-active, .aui-topnav > a[aria-current="page"] { color: var(--aui-text); background: var(--aui-active); }
.aui-subnav { position: sticky; top: var(--aui-header-h); z-index: calc(var(--aui-z-header) - 1); background: var(--aui-bg); border-bottom: 1px solid var(--aui-border-soft); }
.aui-subnav > .aui-tabs, .aui-subnav > .aui-container > .aui-tabs { border-bottom: 0; }

/* Collapsible sidebar → icon rail: add .aui-app--collapsed (JS: data-aui-sidebar-collapse) */
.aui-app--collapsed { --aui-sidebar-w: var(--aui-sidebar-w-collapsed); }
.aui-app--collapsed .aui-sidebar-header { justify-content: center; padding: 0; }
.aui-app--collapsed .aui-sidebar :is(.aui-nav-label, .aui-nav-title, .aui-brand-text, .aui-nav-count, .aui-nav-item > .aui-badge, .aui-sidebar-card, .aui-sidebar-user-text, .aui-switcher > :not(.aui-avatar):not(.aui-logo), .aui-hide-collapsed) { display: none; }
.aui-app--collapsed .aui-nav-item { justify-content: center; padding: 0; height: 38px; }
.aui-app--collapsed .aui-nav-title + .aui-nav-item, .aui-app--collapsed .aui-nav-sep { margin-top: 10px; }
.aui-app--collapsed :is(.aui-sidebar-user, .aui-switcher) { justify-content: center; }
.aui-app--collapsed .aui-nav-children { display: none; }
.aui-app--collapsed .aui-sidebar-body { overflow: visible; }
.aui-app--collapsed details.aui-nav-group > summary::after { display: none; }

/* Dashboard helpers */
.aui-section-title-sm { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0 12px; font-size: var(--aui-fs-md); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-section-title-sm:first-child { margin-top: 0; }

/* Settings layout */
.aui-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.aui-settings-nav { position: sticky; top: calc(var(--aui-header-h) + 24px); }
.aui-settings-nav .aui-nav--indicator .aui-nav-item:is(.is-active, [aria-current="page"])::before { left: 0; }
.aui-settings-content { min-width: 0; max-width: 880px; }
.aui-form-section { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 20px 48px; padding: 32px 0; border-top: 1px solid var(--aui-border-soft); }
.aui-form-section:first-child { border-top: 0; padding-top: 0; }
.aui-form-section-title { font-size: var(--aui-fs-md); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-form-section-desc { margin-top: 4px; font-size: var(--aui-fs-sm); line-height: 1.55; color: var(--aui-text-muted); }
.aui-save-bar { position: sticky; bottom: 16px; z-index: var(--aui-z-sticky); display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 10px 10px 10px 16px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); background: var(--aui-surface-elevated); border: 1px solid var(--aui-border-strong); border-radius: var(--aui-radius-lg); box-shadow: var(--aui-shadow-lg); animation: aui-rise var(--aui-dur) var(--aui-ease-out); }
.aui-save-bar > .aui-row:last-child { margin-left: auto; }
.aui-danger-zone { border: 1px solid color-mix(in srgb, var(--aui-danger) 32%, var(--aui-border)); border-radius: var(--aui-radius-lg); overflow: hidden; }
.aui-danger-zone > .aui-option-row { padding: 16px 18px; }
.aui-danger-zone > .aui-option-row:first-child { padding-top: 16px; }
.aui-danger-zone > .aui-option-row:last-child { padding-bottom: 16px; }

/* Split pane (list / detail) */
.aui-split-pane { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); min-height: 480px; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); overflow: hidden; }
.aui-split-pane > * { min-width: 0; min-height: 0; }
.aui-split-pane > * + * { border-left: 1px solid var(--aui-border); }
.aui-pane { display: flex; flex-direction: column; min-height: 0; }
.aui-pane-header { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--aui-border-soft); }
.aui-pane-body { flex: 1; min-height: 0; overflow: auto; }

/* Full-height tool (editors, consoles, map views) */
.aui-tool { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; }
.aui-tool-bar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; flex: none; border-bottom: 1px solid var(--aui-border-soft); background: var(--aui-bg); }
.aui-tool-body { flex: 1; min-height: 0; display: flex; }
.aui-tool-body > * { min-width: 0; min-height: 0; }
.aui-statusbar { display: flex; align-items: center; gap: 16px; height: 28px; padding: 0 12px; flex: none; font-size: var(--aui-fs-2xs); color: var(--aui-text-subtle); border-top: 1px solid var(--aui-border-soft); background: var(--aui-bg-alt); font-variant-numeric: tabular-nums; }
.aui-statusbar > * { display: inline-flex; align-items: center; gap: 6px; }
.aui-statusbar > .aui-spacer { flex: 1; }

/* Embedded mini panel */
.aui-mini { min-width: 0; background: var(--aui-bg); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); overflow: hidden; }
.aui-mini-header { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 12px; font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-semibold); color: var(--aui-text); border-bottom: 1px solid var(--aui-border-soft); background: var(--aui-bg-alt); }
.aui-mini-header > .aui-row:last-child { margin-left: auto; }
.aui-mini-body { padding: 12px; }
.aui-mini-footer { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--aui-border-soft); font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }

/* Generic backdrop for off-canvas navs (added by JS) */
.aui-backdrop { position: fixed; inset: 0; z-index: calc(var(--aui-z-drawer) - 1); background: var(--aui-overlay); animation: aui-fade-in var(--aui-dur) ease-out; }
.aui-backdrop.is-leaving { animation: aui-fade-out var(--aui-dur) ease-in forwards; }

/* Responsive application shell */
.aui-sidebar-toggle { display: none !important; }
@media (max-width: 960px) {
  .aui-app, .aui-app--collapsed { grid-template-columns: minmax(0, 1fr); --aui-sidebar-w: 280px; }
  .aui-app > .aui-sidebar { position: fixed; left: 0; top: 0; width: min(var(--aui-sidebar-w), 86vw); transform: translateX(-100%); visibility: hidden; transition: transform var(--aui-dur-slow) var(--aui-ease-out), visibility 0s linear var(--aui-dur-slow); box-shadow: var(--aui-shadow-overlay); }
  .aui-app > .aui-sidebar.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .aui-app--collapsed .aui-sidebar :is(.aui-nav-label, .aui-nav-title, .aui-brand-text, .aui-nav-count, .aui-sidebar-user-text, .aui-sidebar-card) { display: revert; }
  .aui-app--collapsed .aui-nav-item { justify-content: flex-start; padding: 6px 10px; height: auto; }
  .aui-sidebar-toggle { display: inline-flex !important; }
  .aui-sidebar-collapse { display: none !important; }
  .aui-topbar { padding: 0 16px; gap: 8px; }
  .aui-topbar-search { display: none; }
  .aui-app-content { padding: 20px 16px 56px; }
  .aui-settings { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .aui-settings-nav { position: static; }
  .aui-settings-nav .aui-nav { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .aui-settings-nav .aui-nav-item { width: auto; flex: none; }
  .aui-settings-nav .aui-nav-title { display: none; }
  .aui-form-section { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .aui-split-pane { grid-template-columns: minmax(0, 1fr); }
  .aui-split-pane > * + * { border-left: 0; border-top: 1px solid var(--aui-border); }
}

/* ==========================================================================
   Armsys UI 2 — Authentication
   Split layout: showcase on the left (brand, headline, feature cards,
   testimonial, stats), form on the right. Works for sign in, sign up,
   forgot/reset password, 2FA/OTP, email verification, invite, SSO.

   <body class="aui">
     <div class="aui-auth">                         (+ --reverse | --center)
       <aside class="aui-auth-aside">…showcase…</aside>
       <main class="aui-auth-main">
         <div class="aui-auth-top">brand · switch link</div>
         <div class="aui-auth-form">header · social · divider · form · switch</div>
         <div class="aui-auth-bottom">legal links</div>
       </main>
     </div>
   ========================================================================== */
.aui-auth { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.aui-auth--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.aui-auth--reverse > .aui-auth-aside { order: 2; border-right: 0; border-left: 1px solid var(--aui-border-soft); }

/* ---------- Showcase side ---------- */
.aui-auth-aside {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 40px 56px; overflow: hidden; isolation: isolate;
  background: var(--aui-bg-alt); border-right: 1px solid var(--aui-border-soft);
}
.aui-auth-aside::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--aui-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--aui-grid-line) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 30% 30%, #000 30%, transparent 80%);
}
.aui-auth-aside::after {
  content: ""; position: absolute; z-index: -1; left: -20%; top: -30%; width: 90%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--aui-accent) 22%, transparent), transparent); opacity: .8;
}
.aui-auth-aside--image { background-size: cover; background-position: center; }
.aui-auth-aside--image::before { background: linear-gradient(180deg, rgb(0 0 0 / .2), rgb(0 0 0 / .75)); -webkit-mask-image: none; mask-image: none; }
.aui-auth-aside--image::after { display: none; }
.aui-auth-aside-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.aui-auth-showcase { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; max-width: 560px; padding: 36px 0; }
.aui-auth-headline { font-size: clamp(1.875rem, 3vw, 2.625rem); font-weight: var(--aui-fw-bold); letter-spacing: -.035em; line-height: 1.1; color: var(--aui-text); text-wrap: balance; }
.aui-auth-headline em { font-style: normal; color: var(--aui-text-subtle); }
.aui-auth-subline { margin-top: 16px; max-width: 480px; font-size: var(--aui-fs-xl); line-height: 1.6; color: var(--aui-text-muted); text-wrap: pretty; }
.aui-auth-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 32px; width: 100%; }
.aui-auth-feature {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px;
  background: color-mix(in srgb, var(--aui-surface-1) 80%, transparent); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.aui-auth-feature > .aui-icon-box { margin-bottom: 4px; }
.aui-auth-feature-title { font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-auth-feature-text { font-size: var(--aui-fs-xs); line-height: 1.55; color: var(--aui-text-subtle); }
.aui-auth-list { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.aui-auth-list > li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--aui-fs-sm); color: var(--aui-text-secondary); }
.aui-auth-list > li > .aui-icon-box { --_s: 28px; }
.aui-auth-list b { display: block; color: var(--aui-text); font-weight: var(--aui-fw-semibold); }
.aui-auth-quote { margin: 0; padding: 16px 18px; max-width: 560px; background: color-mix(in srgb, var(--aui-surface-1) 85%, transparent); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); }
.aui-auth-quote > blockquote { margin: 0; font-size: var(--aui-fs-md); line-height: 1.65; color: var(--aui-text-secondary); }
.aui-auth-quote > figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: var(--aui-fs-sm); }
.aui-auth-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
.aui-auth-stats .aui-stat-value { font-size: 1.5rem; }
.aui-auth-aside-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-auth-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; color: var(--aui-text-subtle); font-size: var(--aui-fs-sm); font-weight: var(--aui-fw-semibold); letter-spacing: -.02em; }

/* ---------- Form side ---------- */
.aui-auth-main { display: flex; flex-direction: column; min-width: 0; padding: 32px 40px; background: var(--aui-bg); }
.aui-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); }
.aui-auth-top > :only-child { margin-left: auto; }
.aui-auth-form { width: 100%; max-width: 400px; margin: auto; padding: 48px 0; }
.aui-auth-form--wide { max-width: 480px; }
.aui-auth-header { margin-bottom: 28px; }
.aui-auth-header > .aui-logo, .aui-auth-header > .aui-icon-box { margin-bottom: 20px; }
.aui-auth-title { font-size: 1.625rem; font-weight: var(--aui-fw-bold); letter-spacing: -.028em; line-height: 1.2; color: var(--aui-text); }
.aui-auth-desc { margin-top: 8px; font-size: var(--aui-fs-md); line-height: 1.55; color: var(--aui-text-muted); }
.aui-auth-desc b, .aui-auth-desc strong { color: var(--aui-text); font-weight: var(--aui-fw-medium); }
.aui-auth-social { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 10px; }
.aui-auth-social--2 { --cols: 2; }
.aui-auth-social--3 { --cols: 3; }
.aui-auth-divider { margin: 24px 0; }
.aui-auth-form .aui-form { gap: 16px; }
.aui-auth-form .aui-btn--block { --_h: var(--aui-control-h-lg); }
.aui-auth-form :is(.aui-input, .aui-select) { --_h: var(--aui-control-h-lg); }
.aui-auth-form .aui-input-wrap { --_h: var(--aui-control-h-lg); }
.aui-auth-switch { margin-top: 24px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); }
.aui-auth-legal { margin-top: 20px; font-size: var(--aui-fs-xs); line-height: 1.6; color: var(--aui-text-subtle); }
.aui-auth-legal a { color: var(--aui-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.aui-auth-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-auth-bottom a:hover { color: var(--aui-text); }
.aui-auth-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); }
.aui-auth-back:hover { color: var(--aui-text); }
.aui-auth-back .aui-icon { width: 15px; height: 15px; }
.aui-auth-result { text-align: center; }
.aui-auth-result > .aui-icon-box { margin: 0 auto 20px; }
.aui-auth-resend { margin-top: 18px; font-size: var(--aui-fs-sm); color: var(--aui-text-muted); text-align: center; }

/* ---------- Centered single-card variant ---------- */
.aui-auth--center { grid-template-columns: minmax(0, 1fr); place-items: center; padding: 48px 16px; overflow: hidden; }
.aui-auth--center::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--aui-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--aui-grid-line) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 20%, transparent 75%); }
.aui-auth--center > * { position: relative; }
.aui-auth-card { width: min(420px, 100%); padding: 32px; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-xl); box-shadow: var(--aui-shadow-lg); }
.aui-auth-card .aui-auth-form { padding: 0; }
.aui-auth--center .aui-auth-header { text-align: center; }
.aui-auth--center .aui-auth-header > .aui-logo { margin-inline: auto; }

@media (max-width: 1100px) {
  .aui-auth-aside { padding: 32px 36px; }
  .aui-auth-features { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .aui-auth, .aui-auth--reverse { grid-template-columns: minmax(0, 1fr); }
  .aui-auth-aside { display: none; }
  .aui-auth-aside.aui-auth-aside--mobile { display: flex; order: 0; padding: 24px var(--aui-gutter); border: 0; border-bottom: 1px solid var(--aui-border-soft); }
  .aui-auth-aside--mobile .aui-auth-showcase { padding: 16px 0 0; }
  .aui-auth-aside--mobile :is(.aui-auth-features, .aui-auth-quote, .aui-auth-stats, .aui-auth-aside-bottom, .aui-auth-list) { display: none; }
  .aui-auth-main { padding: 20px var(--aui-gutter) 24px; }
  .aui-auth-form { padding: 32px 0; }
}
@media (max-width: 640px) {
  .aui-auth-card { padding: 24px 20px; }
  .aui-auth-social--3 { --cols: 1; }
}

/* ==========================================================================
   Armsys UI 2 — Pricing
   Works for 2, 3 or 4 plans without redesign: .aui-pricing-grid--2/--3/--4
   ========================================================================== */
.aui-pricing-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-bottom: 40px; }
.aui-pricing-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.aui-pricing-grid--2 { --cols: 2; max-width: 820px; margin-inline: auto; }
.aui-pricing-grid--3 { --cols: 3; }
.aui-pricing-grid--4 { --cols: 4; }
.aui-pricing-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); }
.aui-pricing-card.is-featured {
  border-color: color-mix(in srgb, var(--aui-accent) 55%, var(--aui-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--aui-accent) 8%, var(--aui-surface-1)), var(--aui-surface-1) 42%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aui-accent) 22%, transparent), 0 16px 48px rgb(0 0 0 / .25);
}
.aui-plan-badge { position: absolute; top: -11px; left: 28px; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; font-size: var(--aui-fs-2xs); font-weight: var(--aui-fw-semibold); letter-spacing: .02em; color: var(--aui-on-accent); background: var(--aui-accent); border-radius: var(--aui-radius-full); }
.aui-plan-name { display: flex; align-items: center; gap: 8px; font-size: var(--aui-fs-lg); font-weight: var(--aui-fw-semibold); letter-spacing: -.012em; color: var(--aui-text); }
.aui-plan-desc { margin-top: 6px; min-height: 3.2em; font-size: var(--aui-fs-sm); line-height: 1.55; color: var(--aui-text-muted); }
.aui-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin-top: 22px; }
.aui-price-currency { align-self: flex-start; margin-top: 5px; font-size: 1.125rem; font-weight: var(--aui-fw-medium); color: var(--aui-text-muted); }
.aui-price-amount { font-size: 2.5rem; font-weight: var(--aui-fw-bold); letter-spacing: -.04em; line-height: 1; color: var(--aui-text); font-variant-numeric: tabular-nums; }
.aui-price-amount--text { font-size: 1.875rem; letter-spacing: -.03em; }
.aui-price-suffix { font-size: var(--aui-fs-sm); color: var(--aui-text-subtle); }
.aui-price-note { margin-top: 8px; min-height: 1.5em; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-price-old { font-size: var(--aui-fs-md); color: var(--aui-text-disabled); text-decoration: line-through; }
.aui-pricing-card > .aui-btn { margin-top: 22px; }
.aui-plan-features { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--aui-border-soft); }
.aui-plan-features-title { margin-bottom: 14px; font-size: var(--aui-fs-xs); font-weight: var(--aui-fw-semibold); color: var(--aui-text); }
.aui-pricing-wide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 16px; padding: 24px 28px; background: var(--aui-bg-alt); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); }
.aui-pricing-wide-body { max-width: 640px; }
.aui-pricing-wide .aui-plan-desc { min-height: 0; }
.aui-pricing-wide .aui-checklist { grid-template-columns: repeat(2, minmax(0, auto)); column-gap: 28px; margin-top: 14px; }
.aui-pricing-note { margin-top: 20px; text-align: center; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
@media (max-width: 1100px) { .aui-pricing-grid--4 { --cols: 2; } }
@media (max-width: 820px) {
  .aui-pricing-grid, .aui-pricing-grid--2, .aui-pricing-grid--3, .aui-pricing-grid--4 { --cols: 1; max-width: 480px; margin-inline: auto; }
  .aui-plan-desc { min-height: 0; }
  .aui-pricing-wide .aui-checklist { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Armsys UI 2 — Public data pages (leaderboards, rankings, directories, catalogs)
   Builds on the shared table, toolbar, entity and rank components.
   ========================================================================== */
.aui-podium { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; }
.aui-podium-item {
  --_t: var(--aui-border-strong);
  position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; overflow: hidden; color: inherit;
  background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-lg); transition: border-color var(--aui-dur-fast);
}
.aui-podium-item::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--_t), transparent 80%); }
a.aui-podium-item:hover { border-color: var(--aui-border-strong); }
.aui-podium-item.is-1 { --_t: var(--aui-gold); }
.aui-podium-item.is-2 { --_t: var(--aui-silver); }
.aui-podium-item.is-3 { --_t: var(--aui-bronze); }
.aui-podium-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aui-podium-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 14px; border-top: 1px solid var(--aui-border-soft); }
.aui-podium-stats .aui-stat-value { font-size: 1.25rem; }
.aui-data-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.aui-data-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); }
.aui-data-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.aui-data-section + .aui-data-section { margin-top: 40px; }
.aui-locked-overlay { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aui-locked-overlay .aui-icon-box { margin-bottom: 2px; }
.aui-catalog-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; color: inherit; background: var(--aui-surface-1); border: 1px solid var(--aui-border); border-radius: var(--aui-radius-md); transition: border-color var(--aui-dur-fast); }
a.aui-catalog-card:hover { border-color: var(--aui-border-strong); }
@media (max-width: 900px) {
  .aui-podium { --cols: 1; }
}

/* ==========================================================================
   Armsys UI 2 — Desktop apps (Electron, Tauri, WebView2)
   Frameless title bar with drag region and window controls, plus a shell
   that keeps scrolling inside the content area instead of the window.

   <body class="aui aui-desktop" data-aui-platform="win|mac|linux">
     <header class="aui-titlebar">
       <div class="aui-titlebar-title">…</div>
       <div class="aui-titlebar-actions aui-no-drag">…</div>
       <div class="aui-window-controls aui-no-drag">min · max · close</div>
     </header>
     <div class="aui-desktop-body"> <div class="aui-app">…</div> </div>
   </body>
   ========================================================================== */
.aui-desktop { display: flex; flex-direction: column; height: 100vh; overflow: hidden; user-select: none; -webkit-user-select: none; }
.aui-desktop :is(input, textarea, [contenteditable], .aui-selectable, pre, code, .aui-prose, td) { user-select: text; -webkit-user-select: text; }
.aui-desktop-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.aui-desktop-body > .aui-app { flex: 1; min-height: 0; height: 100%; }
.aui-desktop-body .aui-sidebar { height: 100%; }
.aui-desktop-body .aui-app-main { min-height: 0; overflow-y: auto; }

.aui-titlebar {
  position: relative; z-index: var(--aui-z-header); display: flex; align-items: center; gap: 10px; height: var(--aui-titlebar-h); padding: 0 0 0 12px; flex: none;
  font-size: var(--aui-fs-xs); color: var(--aui-text-muted); background: var(--aui-bg-alt); border-bottom: 1px solid var(--aui-border-soft);
  -webkit-app-region: drag; app-region: drag;
}
.aui-titlebar-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: var(--aui-fw-medium); color: var(--aui-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-titlebar-title .aui-logo { --_s: 18px; }
.aui-titlebar-center { position: absolute; left: 50%; transform: translateX(-50%); width: min(420px, 40vw); }
.aui-titlebar-center .aui-search-trigger { height: 26px; font-size: var(--aui-fs-xs); background: var(--aui-surface-1); }
.aui-titlebar-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; padding-right: 6px; }
.aui-titlebar-actions .aui-btn { --_h: 26px; }
.aui-no-drag, .aui-titlebar :is(button, a, input, select, .aui-dropdown) { -webkit-app-region: no-drag; app-region: no-drag; }
.aui-drag { -webkit-app-region: drag; app-region: drag; }
/* macOS traffic lights live on the left: reserve space */
.aui-desktop[data-aui-platform="mac"] .aui-titlebar { padding-left: 80px; }
.aui-desktop[data-aui-platform="mac"] .aui-window-controls { display: none; }
/* Windows / Linux controls */
.aui-window-controls { display: flex; align-self: stretch; margin-left: 4px; }
.aui-titlebar-actions + .aui-window-controls { margin-left: 0; }
.aui-window-control { display: grid; place-items: center; width: 46px; height: 100%; padding: 0; color: var(--aui-text-muted); background: none; border: 0; cursor: default; transition: background-color var(--aui-dur-fast), color var(--aui-dur-fast); }
.aui-window-control:hover { color: var(--aui-text); background: var(--aui-hover); }
.aui-window-control--close:hover { color: #fff; background: #e81123; }
.aui-window-control svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; }
/* Desktop density: apps feel tighter than websites */
.aui-desktop { --aui-header-h: 52px; }

/* ==========================================================================
   Armsys UI 2 — Utilities (loaded LAST so they win over component defaults)
   Text, spacing, flex/grid helpers and responsive visibility.
   ========================================================================== */
/* ---------- Text utilities ---------- */
.aui-text { color: var(--aui-text); }
.aui-text-secondary { color: var(--aui-text-secondary); }
.aui-text-muted { color: var(--aui-text-muted); }
.aui-text-subtle { color: var(--aui-text-subtle); }
.aui-text-accent { color: var(--aui-accent); }
.aui-text-success { color: var(--aui-success); }
.aui-text-warning { color: var(--aui-warning); }
.aui-text-danger { color: var(--aui-danger); }
.aui-text-info { color: var(--aui-info); }
.aui-text-2xs { font-size: var(--aui-fs-2xs); }
.aui-text-xs { font-size: var(--aui-fs-xs); }
.aui-text-sm { font-size: var(--aui-fs-sm); }
.aui-text-md { font-size: var(--aui-fs-md); }
.aui-text-lg { font-size: var(--aui-fs-lg); }
.aui-text-xl { font-size: var(--aui-fs-xl); }
.aui-medium { font-weight: var(--aui-fw-medium); }
.aui-semibold { font-weight: var(--aui-fw-semibold); }
.aui-bold { font-weight: var(--aui-fw-bold); }
.aui-center { text-align: center; }
.aui-right { text-align: right; }
.aui-num { font-variant-numeric: tabular-nums; text-align: right; }
.aui-tabular { font-variant-numeric: tabular-nums; }
.aui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.aui-clamp-2, .aui-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.aui-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.aui-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.aui-nowrap { white-space: nowrap; }
.aui-break { overflow-wrap: anywhere; }
.aui-balance { text-wrap: balance; }

/* ---------- Layout utilities ---------- */
.aui-row { display: flex; align-items: center; gap: var(--gap, 8px); min-width: 0; }
.aui-row--top { align-items: flex-start; }
.aui-row--baseline { align-items: baseline; }
.aui-row--between { justify-content: space-between; }
.aui-row--center { justify-content: center; }
.aui-row--end { justify-content: flex-end; }
.aui-wrap { flex-wrap: wrap; }
.aui-stack { display: flex; flex-direction: column; gap: var(--gap, 12px); min-width: 0; }
.aui-stack--center { align-items: center; text-align: center; }
.aui-spacer, .aui-grow { flex: 1 1 auto; min-width: 0; }
.aui-shrink-0 { flex-shrink: 0; }
.aui-grid { display: grid; gap: var(--gap, 16px); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.aui-grid--2 { --cols: 2; }
.aui-grid--3 { --cols: 3; }
.aui-grid--4 { --cols: 4; }
.aui-grid--5 { --cols: 5; }
.aui-grid--6 { --cols: 6; }
.aui-grid--12 { --cols: 12; }
.aui-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr)); }
.aui-grid--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, var(--side, 340px)); }
.aui-span-2 { grid-column: span 2; }
.aui-span-3 { grid-column: span 3; }
.aui-span-4 { grid-column: span 4; }
.aui-span-5 { grid-column: span 5; }
.aui-span-6 { grid-column: span 6; }
.aui-span-7 { grid-column: span 7; }
.aui-span-8 { grid-column: span 8; }
.aui-span-9 { grid-column: span 9; }
.aui-span-full { grid-column: 1 / -1; }
.aui-gap-0 { --gap: 0; } .aui-gap-1 { --gap: 4px; } .aui-gap-2 { --gap: 8px; } .aui-gap-3 { --gap: 12px; }
.aui-gap-4 { --gap: 16px; } .aui-gap-5 { --gap: 20px; } .aui-gap-6 { --gap: 24px; } .aui-gap-8 { --gap: 32px; } .aui-gap-10 { --gap: 40px; } .aui-gap-12 { --gap: 48px; }
.aui-mt-0 { margin-top: 0; } .aui-mt-1 { margin-top: 4px; } .aui-mt-2 { margin-top: 8px; } .aui-mt-3 { margin-top: 12px; }
.aui-mt-4 { margin-top: 16px; } .aui-mt-5 { margin-top: 20px; } .aui-mt-6 { margin-top: 24px; } .aui-mt-8 { margin-top: 32px; } .aui-mt-10 { margin-top: 40px; } .aui-mt-12 { margin-top: 48px; } .aui-mt-16 { margin-top: 64px; }
.aui-mb-0 { margin-bottom: 0; } .aui-mb-2 { margin-bottom: 8px; } .aui-mb-3 { margin-bottom: 12px; } .aui-mb-4 { margin-bottom: 16px; } .aui-mb-6 { margin-bottom: 24px; } .aui-mb-8 { margin-bottom: 32px; }
.aui-ml-auto { margin-left: auto; } .aui-mr-auto { margin-right: auto; } .aui-mx-auto { margin-inline: auto; }
.aui-p-0 { padding: 0; } .aui-p-2 { padding: 8px; } .aui-p-3 { padding: 12px; } .aui-p-4 { padding: 16px; } .aui-p-5 { padding: 20px; } .aui-p-6 { padding: 24px; } .aui-p-8 { padding: 32px; }
.aui-w-full { width: 100%; }
.aui-w-auto { width: auto; }
.aui-min-0 { min-width: 0; }
.aui-max-narrow { max-width: var(--aui-narrow); }
.aui-max-prose { max-width: var(--aui-prose-width); }
.aui-relative { position: relative; }
.aui-sticky { position: sticky; top: calc(var(--aui-header-h) + 16px); }
.aui-rounded { border-radius: var(--aui-radius-md); }
.aui-bordered { border: 1px solid var(--aui-border); }
.aui-surface { background: var(--aui-surface-1); }
.aui-divider { height: 1px; border: 0; background: var(--aui-border-soft); margin: var(--aui-space-4) 0; }
.aui-divider--v { width: 1px; height: 20px; margin: 0 4px; align-self: center; flex: none; }
.aui-divider-text { display: flex; align-items: center; gap: 12px; font-size: var(--aui-fs-xs); color: var(--aui-text-subtle); white-space: nowrap; }
.aui-divider-text::before, .aui-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--aui-border-soft); }
.aui-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; }
@media (min-width: 761px) { .aui-show-mobile { display: none !important; } }
.aui-scroll-x { overflow-x: auto; scrollbar-width: thin; }
.aui-scroll-y { overflow-y: auto; scrollbar-width: thin; }
.aui-skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; font-size: var(--aui-fs-sm); color: var(--aui-on-primary); background: var(--aui-primary); border-radius: var(--aui-radius-sm); transition: top var(--aui-dur); }
.aui-skip-link:focus { top: 12px; }

@media (max-width: 1100px) {
  .aui-grid--4, .aui-grid--5, .aui-grid--6 { --cols: 2; }
  .aui-grid--12 { --cols: 6; }
  .aui-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .aui-grid > :is(.aui-span-6, .aui-span-7, .aui-span-8, .aui-span-9) { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .aui { --aui-gutter: 24px; }
}
@media (max-width: 760px) {
  .aui-grid--2, .aui-grid--3, .aui-grid--4, .aui-grid--5, .aui-grid--6, .aui-grid--12 { --cols: 1; }
  .aui-grid > [class*="aui-span-"] { grid-column: 1 / -1; }
  .aui-hide-mobile { display: none !important; }
  .aui { --aui-gutter: 16px; }
}