/*! AraminConsole v0.1.0 — CSS — MIT © 2026 Ali Asghar Ramin — https://github.com/ARaminco/AraminConsole — icons: Lucide (ISC), font: Vazirmatn (OFL-1.1); see dist/LICENSE*.txt */

/* ==== css/tokens.css ==== */
/* ==========================================================================
   AraminConsole — design tokens
   --------------------------------------------------------------------------
   Every component reads ONLY these custom properties for colour, radius,
   shadow, spacing and motion. Dark mode, accents, density and radius are
   pure token swaps driven by attributes on <html>:

     data-theme   = light | dark          (unset → follows prefers-color-scheme)
     data-accent  = air (default) | orange | violet | blue | emerald | rose | amber | slate
     data-density = comfortable | compact
     data-radius  = sharp | default | round
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- type ---------------------------------------------------------- */
  --ac-font: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --ac-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;

  --ac-fs-2xs: 0.6875rem;  /* 11 */
  --ac-fs-xs: 0.75rem;     /* 12 */
  --ac-fs-sm: 0.8125rem;   /* 13 */
  --ac-fs-md: 0.875rem;    /* 14 — body */
  --ac-fs-lg: 1rem;        /* 16 */
  --ac-fs-xl: 1.125rem;    /* 18 */
  --ac-fs-2xl: 1.375rem;   /* 22 */
  --ac-fs-3xl: 1.75rem;    /* 28 */
  --ac-fs-4xl: 2.25rem;    /* 36 */

  --ac-lh-tight: 1.2;
  --ac-lh-snug: 1.4;
  --ac-lh-normal: 1.65;

  --ac-fw-regular: 400;
  --ac-fw-medium: 500;
  --ac-fw-semibold: 600;
  --ac-fw-bold: 700;
  --ac-fw-black: 800;

  /* ---- space (0.25rem steps) ----------------------------------------- */
  --ac-s-0: 0;
  --ac-s-1: 0.25rem;
  --ac-s-2: 0.5rem;
  --ac-s-3: 0.75rem;
  --ac-s-4: 1rem;
  --ac-s-5: 1.25rem;
  --ac-s-6: 1.5rem;
  --ac-s-7: 1.75rem;
  --ac-s-8: 2rem;
  --ac-s-9: 2.25rem;
  --ac-s-10: 2.5rem;
  --ac-s-11: 2.75rem;
  --ac-s-12: 3rem;

  /* ---- radius (default variant) -------------------------------------- */
  --ac-r-xs: 6px;
  --ac-r-sm: 10px;
  --ac-r-md: 12px;
  --ac-r-lg: 16px;
  --ac-r-xl: 22px;            /* cards */
  --ac-r-2xl: 28px;           /* flyouts, sheets */
  --ac-r-pill: 999px;

  /* ---- density-driven metrics ---------------------------------------- */
  --ac-control-h: 2.5rem;       /* buttons, inputs */
  --ac-control-h-sm: 2rem;
  --ac-control-h-lg: 3rem;
  --ac-control-px: 1rem;
  --ac-card-pad: 1.25rem;
  --ac-row-h: 3.25rem;          /* table rows, list rows */
  --ac-gap: 1rem;               /* grid gutters */
  --ac-touch: 44px;             /* minimum touch target */

  /* ---- motion (docs/motion.md) ----------------------------------------
     Enter / exit → ease-out curves. On-screen movement → ease-in-out.
     Hover colour → --ac-ease-hover. Never ease-in for UI. Springs are real
     spring curves sampled into linear() (interruptible CSS transitions). */
  --ac-ease: cubic-bezier(0.23, 1, 0.32, 1);          /* strong ease-out: the default for UI */
  --ac-ease-out: cubic-bezier(0.19, 1, 0.22, 1);      /* expo-out: reveals, lifts, long settles */
  --ac-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* things moving while on screen */
  --ac-ease-move: cubic-bezier(0.25, 1, 0.5, 1);      /* slides, panels */
  --ac-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS sheet / drawer */
  --ac-ease-hover: ease;                              /* colour / background changes */
  --ac-ease-in: cubic-bezier(0.4, 0, 0.6, 1);         /* kept for compatibility — exits use --ac-ease */
  --ac-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* small overshoot (bezier approximation) */
  /* spring k=520 c=34 (2.9 % overshoot, settles 385 ms) — pills, indicators, thumbs */
  --ac-spring: linear(0, 0.004 0.9%, 0.022 2.4%, 0.067 4.4%, 0.137 6.8%, 0.235 9.5%, 0.35 12.5%, 0.474 15.8%, 0.599 19.2%, 0.715 23%, 0.813 26.9%, 0.893 31%, 0.952 35.4%, 0.992 39.9%, 1.015 44.6%, 1.026 49.4%, 1.029 54.4%, 1.026 59.6%, 1.02 65%, 1.014 70.4%, 1.009 76.1%, 1.005 81.8%, 1.002 87.8%, 1 93.8%, 1);
  --ac-spring-dur: 400ms;
  /* spring k=380 c=20 (15 % overshoot, settles 690 ms) — icons, badges, checks: playful, rare */
  --ac-spring-bounce: linear(0, 0.008 0.9%, 0.05 2.4%, 0.148 4.4%, 0.298 6.8%, 0.496 9.5%, 0.702 12.5%, 0.889 15.8%, 1.035 19.2%, 1.122 23%, 1.152 26.9%, 1.135 31%, 1.093 35.4%, 1.045 39.9%, 1.006 44.6%, 0.984 49.4%, 0.977 54.4%, 0.981 59.6%, 0.99 65%, 0.998 70.4%, 1.002 76.1%, 1.004 81.8%, 1.003 87.8%, 1.001 93.8%, 1);
  --ac-spring-bounce-dur: 700ms;
  --ac-dur-0: 100ms;                                  /* press feedback */
  --ac-dur-1: 140ms;                                  /* hover, tooltip */
  --ac-dur-2: 180ms;                                  /* dropdown, popover */
  --ac-dur-3: 240ms;                                  /* tabs, panels */
  --ac-dur-4: 300ms;                                  /* modal, page */
  --ac-dur-sheet: 420ms;                              /* sheets / drawers (drawer curve) */
  --ac-dur-exit: 140ms;                               /* exits are faster than entrances */
  --ac-stagger: 45ms;                                 /* between siblings entering together */
  --ac-press: scale(0.97);
  --ac-press-sm: scale(0.92);                         /* small round icon buttons */
  --ac-lift: translateY(-4px);                        /* card hover lift */
  --ac-dir: 1;                                        /* inline direction multiplier: 1 ltr, -1 rtl */

  /* ---- z layers ------------------------------------------------------- */
  --ac-z-base: 1;
  --ac-z-sticky: 20;
  --ac-z-rail: 40;
  --ac-z-appbar: 50;
  --ac-z-tabbar: 55;
  --ac-z-dropdown: 60;
  --ac-z-drawer: 70;
  --ac-z-sheet: 80;
  --ac-z-modal: 90;
  --ac-z-toast: 100;
  --ac-z-palette: 110;
  --ac-z-tooltip: 120;

  /* ---- layout --------------------------------------------------------- */
  --ac-appbar-h: 4.5rem;              /* floating top pills row */
  --ac-tabbar-h: 4rem;                /* floating bottom pill */
  --ac-rail-w: 3.25rem;               /* slim floating icon rail */
  --ac-rail-w-collapsed: 3.25rem;
  --ac-flyout-w: 16.5rem;             /* group flyout next to the rail / phone drawer */
  --ac-pill-h: 2.875rem;              /* height of the top-bar pills */
  --ac-content-max: 96rem;
  --ac-content-pad: clamp(1rem, 2vw, 1.75rem);
  --ac-safe-top: env(safe-area-inset-top, 0px);
  --ac-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ac-safe-start: env(safe-area-inset-left, 0px);
  --ac-safe-end: env(safe-area-inset-right, 0px);

  /* ---- accent (orange-red default; overridden by data-accent) -------- */
  --ac-accent: #f0532d;
  --ac-accent-2: #ff7a4d;            /* gradient partner */
  --ac-accent-contrast: #ffffff;     /* text on solid accent */

  /* ---- highlight: the one warm spot (notification count, dock dot). Defaults to the accent; the Air preset makes it amber. */
  --ac-highlight: var(--ac-accent);
  --ac-highlight-contrast: var(--ac-accent-contrast);

  /* ---- ink: the black primary (buttons, active nav pill) ------------- */
  --ac-ink: #111113;
  --ac-ink-hover: #2a2a2e;
  --ac-ink-contrast: #ffffff;

  /* ---- colour: light -------------------------------------------------- */
  --ac-mix-toward: #000;             /* used to derive readable accent text */
  --ac-bg: #f2f2f3;                  /* warm light-gray canvas */
  --ac-bg-subtle: #ebebed;
  --ac-surface-1: #ffffff;           /* cards, pills */
  --ac-surface-2: #f6f6f7;           /* inset panels, KPI tiles */
  --ac-surface-3: #eeeef0;           /* tracks */
  --ac-elevated: #ffffff;
  --ac-hover: rgba(17, 17, 19, 0.04);
  --ac-active: rgba(17, 17, 19, 0.075);
  --ac-border: #ececee;              /* hairline */
  --ac-border-strong: #dcdce0;
  --ac-text: #111113;
  --ac-text-soft: #4b4b52;
  --ac-muted: #8b8b93;
  --ac-faint: #b6b6bd;
  --ac-scrim: rgba(17, 17, 19, 0.32);
  --ac-chrome-bg: #ffffff;           /* floating pills (top bar, rail, tab bar) */
  --ac-pill-bg: #f2f2f3;             /* secondary pill buttons, search fields */
  --ac-pill-bg-hover: #e8e8ea;

  --ac-success: #16a34a;
  --ac-success-soft: #e8f6ec;
  --ac-success-ink: #13803c;
  --ac-warning: #e08a00;
  --ac-warning-soft: #fff4e0;
  --ac-warning-ink: #995a00;
  --ac-danger: #e5484d;
  --ac-danger-soft: #fdeceb;
  --ac-danger-ink: #c0282e;
  --ac-info: #2f7cf6;
  --ac-info-soft: #e9f1ff;
  --ac-info-ink: #1b5bc4;
  --ac-neutral-soft: rgba(17, 17, 19, 0.055);
  --ac-neutral-ink: #4b4b52;

  --ac-chart-1: var(--ac-ink);       /* black series */
  --ac-chart-2: var(--ac-accent);    /* orange highlight */
  --ac-chart-3: #a3a3ab;
  --ac-chart-4: #ffb59c;
  --ac-chart-5: #22a06b;
  --ac-chart-6: #3b82f6;
  --ac-chart-7: #f5a524;
  --ac-chart-8: #d4d4d9;
  --ac-chart-grid: rgba(17, 17, 19, 0.06);

  /* ---- glass chrome --------------------------------------------------- */
  --ac-glass-bg: rgba(255, 255, 255, 0.78);
  --ac-glass-bg-strong: rgba(255, 255, 255, 0.92);
  --ac-glass-border: rgba(17, 17, 19, 0.07);
  --ac-glass-blur: saturate(180%) blur(20px);
  --ac-rail-bg: var(--ac-chrome-bg);

  /* ---- shadows (almost none — hairlines do the work) ------------------ */
  --ac-shadow-xs: 0 1px 2px rgba(17, 17, 19, 0.03);
  --ac-shadow-sm: 0 1px 2px rgba(17, 17, 19, 0.03), 0 2px 8px -4px rgba(17, 17, 19, 0.05);
  --ac-shadow-md: 0 2px 4px rgba(17, 17, 19, 0.03), 0 10px 24px -10px rgba(17, 17, 19, 0.12);
  --ac-shadow-lg: 0 2px 6px rgba(17, 17, 19, 0.04), 0 18px 40px -14px rgba(17, 17, 19, 0.18);
  --ac-shadow-xl: 0 4px 10px rgba(17, 17, 19, 0.05), 0 30px 64px -18px rgba(17, 17, 19, 0.26);
  --ac-shadow-glow: 0 10px 24px -8px color-mix(in oklab, var(--ac-accent) 60%, transparent);
  --ac-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ac-shadow-chrome: 0 1px 2px rgba(17, 17, 19, 0.03), 0 6px 18px -10px rgba(17, 17, 19, 0.12);

  /* ---- derived (do not override; follow accent + theme) --------------- */
  --ac-accent-hover: color-mix(in oklab, var(--ac-accent) 88%, var(--ac-mix-toward));
  --ac-accent-soft: color-mix(in oklab, var(--ac-accent) 11%, transparent);
  --ac-accent-soft-2: color-mix(in oklab, var(--ac-accent) 18%, transparent);
  --ac-accent-ink: color-mix(in oklab, var(--ac-accent) 85%, var(--ac-mix-toward));
  --ac-ring: color-mix(in oklab, var(--ac-accent) 38%, transparent);
  --ac-focus: 0 0 0 3px var(--ac-ring);
  --ac-gradient: linear-gradient(150deg, var(--ac-accent-2) 0%, var(--ac-accent) 70%);
  --ac-aurora:
    radial-gradient(60% 80% at 15% 0%, color-mix(in oklab, var(--ac-accent) 18%, transparent), transparent 70%),
    radial-gradient(50% 70% at 85% 10%, color-mix(in oklab, var(--ac-accent-2) 14%, transparent), transparent 70%);
}

/* Latin UI: Inter-like system stack; Persian / Arabic keep Vazirmatn */
:root:lang(en) { --ac-font: "Inter", "Segoe UI Variable Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Vazirmatn", sans-serif; }

/* ---- dark ------------------------------------------------------------ */
/* dark:start */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ac-mix-toward: #fff;
  --ac-accent: #f2603b;
  --ac-ink: #ffffff;
  --ac-ink-hover: #e6e6e8;
  --ac-ink-contrast: #0b0b0c;
  --ac-bg: #0b0b0c;
  --ac-bg-subtle: #111113;
  --ac-surface-1: #161618;
  --ac-surface-2: #1c1c1f;
  --ac-surface-3: #242428;
  --ac-elevated: #1b1b1e;
  --ac-hover: rgba(255, 255, 255, 0.05);
  --ac-active: rgba(255, 255, 255, 0.09);
  --ac-border: #232326;
  --ac-border-strong: #313136;
  --ac-text: #f2f2f3;
  --ac-text-soft: #b9b9c0;
  --ac-muted: #8a8a93;
  --ac-faint: #56565e;
  --ac-scrim: rgba(0, 0, 0, 0.6);
  --ac-chrome-bg: #161618;
  --ac-pill-bg: #222225;
  --ac-pill-bg-hover: #2b2b2f;

  --ac-success: #2ecf7a;
  --ac-success-soft: rgba(46, 207, 122, 0.12);
  --ac-success-ink: #5fe09a;
  --ac-warning: #f5b03d;
  --ac-warning-soft: rgba(245, 176, 61, 0.13);
  --ac-warning-ink: #fbc76c;
  --ac-danger: #f2555a;
  --ac-danger-soft: rgba(242, 85, 90, 0.13);
  --ac-danger-ink: #ff8a8e;
  --ac-info: #4d94ff;
  --ac-info-soft: rgba(77, 148, 255, 0.13);
  --ac-info-ink: #8bb8ff;
  --ac-neutral-soft: rgba(255, 255, 255, 0.07);
  --ac-neutral-ink: #c4c4ca;

  --ac-chart-3: #6b6b74;
  --ac-chart-4: #ffad8f;
  --ac-chart-8: #3a3a40;
  --ac-chart-grid: rgba(255, 255, 255, 0.07);

  --ac-glass-bg: rgba(22, 22, 24, 0.72);
  --ac-glass-bg-strong: rgba(22, 22, 24, 0.9);
  --ac-glass-border: rgba(255, 255, 255, 0.07);

  --ac-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ac-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  --ac-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px -14px rgba(0, 0, 0, 0.7);
  --ac-shadow-xl: 0 4px 10px rgba(0, 0, 0, 0.45), 0 30px 64px -18px rgba(0, 0, 0, 0.8);
  --ac-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ac-shadow-chrome: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ac-accent-soft: color-mix(in oklab, var(--ac-accent) 17%, transparent);
  --ac-accent-soft-2: color-mix(in oklab, var(--ac-accent) 26%, transparent);
  --ac-accent-ink: color-mix(in oklab, var(--ac-accent) 70%, var(--ac-mix-toward));
  --ac-accent-hover: color-mix(in oklab, var(--ac-accent) 86%, var(--ac-mix-toward));
}
/* dark:end */
/* The build script copies the dark block above into
   @media (prefers-color-scheme: dark) { :root:not([data-theme]) { … } }
   so pages without JS still follow the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {

  color-scheme: dark;
  --ac-mix-toward: #fff;
  --ac-accent: #f2603b;
  --ac-ink: #ffffff;
  --ac-ink-hover: #e6e6e8;
  --ac-ink-contrast: #0b0b0c;
  --ac-bg: #0b0b0c;
  --ac-bg-subtle: #111113;
  --ac-surface-1: #161618;
  --ac-surface-2: #1c1c1f;
  --ac-surface-3: #242428;
  --ac-elevated: #1b1b1e;
  --ac-hover: rgba(255, 255, 255, 0.05);
  --ac-active: rgba(255, 255, 255, 0.09);
  --ac-border: #232326;
  --ac-border-strong: #313136;
  --ac-text: #f2f2f3;
  --ac-text-soft: #b9b9c0;
  --ac-muted: #8a8a93;
  --ac-faint: #56565e;
  --ac-scrim: rgba(0, 0, 0, 0.6);
  --ac-chrome-bg: #161618;
  --ac-pill-bg: #222225;
  --ac-pill-bg-hover: #2b2b2f;

  --ac-success: #2ecf7a;
  --ac-success-soft: rgba(46, 207, 122, 0.12);
  --ac-success-ink: #5fe09a;
  --ac-warning: #f5b03d;
  --ac-warning-soft: rgba(245, 176, 61, 0.13);
  --ac-warning-ink: #fbc76c;
  --ac-danger: #f2555a;
  --ac-danger-soft: rgba(242, 85, 90, 0.13);
  --ac-danger-ink: #ff8a8e;
  --ac-info: #4d94ff;
  --ac-info-soft: rgba(77, 148, 255, 0.13);
  --ac-info-ink: #8bb8ff;
  --ac-neutral-soft: rgba(255, 255, 255, 0.07);
  --ac-neutral-ink: #c4c4ca;

  --ac-chart-3: #6b6b74;
  --ac-chart-4: #ffad8f;
  --ac-chart-8: #3a3a40;
  --ac-chart-grid: rgba(255, 255, 255, 0.07);

  --ac-glass-bg: rgba(22, 22, 24, 0.72);
  --ac-glass-bg-strong: rgba(22, 22, 24, 0.9);
  --ac-glass-border: rgba(255, 255, 255, 0.07);

  --ac-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ac-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  --ac-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px -14px rgba(0, 0, 0, 0.7);
  --ac-shadow-xl: 0 4px 10px rgba(0, 0, 0, 0.45), 0 30px 64px -18px rgba(0, 0, 0, 0.8);
  --ac-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ac-shadow-chrome: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ac-accent-soft: color-mix(in oklab, var(--ac-accent) 17%, transparent);
  --ac-accent-soft-2: color-mix(in oklab, var(--ac-accent) 26%, transparent);
  --ac-accent-ink: color-mix(in oklab, var(--ac-accent) 70%, var(--ac-mix-toward));
  --ac-accent-hover: color-mix(in oklab, var(--ac-accent) 86%, var(--ac-mix-toward));
}
}

/* ---- accent presets -------------------------------------------------- */
:root[data-accent="air"]    { --ac-accent: #0b7f8a; --ac-accent-2: #0c8893; }
:root[data-accent="orange"] { --ac-accent: #f0532d; --ac-accent-2: #ff7a4d; }
:root[data-accent="violet"] { --ac-accent: #6d4aff; --ac-accent-2: #a855f7; }
:root[data-accent="blue"]   { --ac-accent: #2563eb; --ac-accent-2: #06b6d4; }
:root[data-accent="emerald"]{ --ac-accent: #059669; --ac-accent-2: #84cc16; }
:root[data-accent="rose"]   { --ac-accent: #e11d48; --ac-accent-2: #f97316; }
:root[data-accent="amber"]  { --ac-accent: #d97706; --ac-accent-2: #ef4444; --ac-accent-contrast: #ffffff; }
:root[data-accent="slate"]  { --ac-accent: #334155; --ac-accent-2: #64748b; }
:root[data-theme="dark"][data-accent="orange"] { --ac-accent: #f2603b; }
:root[data-theme="dark"][data-accent="violet"] { --ac-accent: #8467ff; }
:root[data-theme="dark"][data-accent="blue"]   { --ac-accent: #3b82f6; }
:root[data-theme="dark"][data-accent="emerald"]{ --ac-accent: #10b981; }
:root[data-theme="dark"][data-accent="rose"]   { --ac-accent: #f43f5e; }
:root[data-theme="dark"][data-accent="amber"]  { --ac-accent: #f59e0b; --ac-accent-contrast: #1a1205; }
:root[data-theme="dark"][data-accent="slate"]  { --ac-accent: #94a3b8; --ac-accent-2: #cbd5e1; --ac-accent-contrast: #0b0f17; }

/* ---- Air (default) — the AIR brand: Night/Ink navy, Teal, one amber highlight (docs/theming.md) ----
   Contrast (WCAG 2.x): light — white on accent #0B7F8A 4.75, ink #1B2836 on white 14.96, text on canvas 15.85,
   muted #5f6e7d on white 5.23; dark — navy on accent #13B5C2 6.97, text on surface 13.74, muted on surface 5.05. */
:root:not([data-accent]):not([data-theme="dark"]),
:root[data-accent="air"]:not([data-theme="dark"]) {
  --ac-accent: #0b7f8a; --ac-accent-2: #0c8893; --ac-accent-contrast: #ffffff;
  --ac-highlight: #f5a524; --ac-highlight-contrast: #0f1b28;
  --ac-ink: #1b2836; --ac-ink-hover: #2c3d50; --ac-ink-contrast: #ffffff;
  --ac-bg: #f1f5f7; --ac-bg-subtle: #e9eff2;
  --ac-surface-2: #f5f8fa; --ac-surface-3: #e8eef1;
  --ac-hover: rgba(27, 40, 54, 0.04); --ac-active: rgba(27, 40, 54, 0.075);
  --ac-border: #e3e9ed; --ac-border-strong: #d3dce2;
  --ac-text: #0f1b28; --ac-text-soft: #3f4e5d; --ac-muted: #5f6e7d; --ac-faint: #a9b6c1;
  --ac-scrim: rgba(15, 27, 40, 0.34);
  --ac-pill-bg: #f1f5f7; --ac-pill-bg-hover: #e6edf1;
  --ac-neutral-soft: rgba(27, 40, 54, 0.06); --ac-neutral-ink: #3f4e5d;
  --ac-chart-3: #f5a524; --ac-chart-4: #9fdde2; --ac-chart-8: #d3dce2;
  --ac-chart-grid: rgba(27, 40, 54, 0.07);
  --ac-glass-border: rgba(27, 40, 54, 0.07);
}
:root[data-theme="dark"]:not([data-accent]),
:root[data-theme="dark"][data-accent="air"] {
  --ac-accent: #13b5c2; --ac-accent-2: #4fd0da; --ac-accent-contrast: #0f1b28;
  --ac-highlight: #ffb020; --ac-highlight-contrast: #0f1b28;
  --ac-ink: #eef3f6; --ac-ink-hover: #d5dee5; --ac-ink-contrast: #0f1b28;
  --ac-bg: #0f1b28; --ac-bg-subtle: #122130;
  --ac-surface-1: #162534; --ac-surface-2: #1b2c3d; --ac-surface-3: #233649; --ac-elevated: #1b2c3d;
  --ac-border: #223446; --ac-border-strong: #2e4459;
  --ac-text: #eef3f6; --ac-text-soft: #b4c2cf; --ac-muted: #8496a7; --ac-faint: #546577;
  --ac-scrim: rgba(5, 10, 16, 0.62);
  --ac-chrome-bg: #162534; --ac-pill-bg: #1d2e40; --ac-pill-bg-hover: #263a4f;
  --ac-neutral-ink: #c4d0db;
  --ac-chart-3: #ffb020; --ac-chart-4: #1f6f78; --ac-chart-8: #2e4459;
  --ac-glass-bg: rgba(22, 37, 52, 0.72); --ac-glass-bg-strong: rgba(22, 37, 52, 0.9);
}

/* ---- density --------------------------------------------------------- */
:root[data-density="compact"] {
  --ac-control-h: 2.125rem;
  --ac-control-h-sm: 1.75rem;
  --ac-control-h-lg: 2.5rem;
  --ac-control-px: 0.7rem;
  --ac-card-pad: 0.95rem;
  --ac-row-h: 2.625rem;
  --ac-gap: 0.75rem;
  --ac-fs-md: 0.8125rem;
  --ac-appbar-h: 4rem;
  --ac-pill-h: 2.5rem;
}

/* ---- radius variants ------------------------------------------------- */
:root[data-radius="sharp"] {
  --ac-r-xs: 2px;
  --ac-r-sm: 3px;
  --ac-r-md: 4px;
  --ac-r-lg: 6px;
  --ac-r-xl: 8px;
  --ac-r-2xl: 10px;
}
:root[data-radius="round"] {
  --ac-r-xs: 8px;
  --ac-r-sm: 11px;
  --ac-r-md: 14px;
  --ac-r-lg: 18px;
  --ac-r-xl: 24px;
  --ac-r-2xl: 32px;
}

/* ---- phones: slightly shorter top row ------------------------------ */
@media (max-width: 639.98px) {
  :root {
    --ac-appbar-h: 4rem;
    --ac-pill-h: 2.75rem;
  }
}


/* ==== css/base.css ==== */
/* ==========================================================================
   AraminConsole — base: font, reset, typography, focus, scrollbars, utilities
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/vazirmatn-variable.woff2") format("woff2-variations"),
       url("fonts/vazirmatn-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--ac-appbar-h) + var(--ac-safe-top) + 1rem);
}
body {
  min-height: 100dvh;
  background: var(--ac-bg);
  color: var(--ac-text);
  font-family: var(--ac-font);
  font-size: var(--ac-fs-md);
  line-height: var(--ac-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"], menu { list-style: none; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-block-start: 1px solid var(--ac-border); }
[hidden] { display: none !important; }
html[data-scroll-locked] { overflow: hidden; padding-inline-end: var(--ac-scrollbar-w, 0px); overscroll-behavior: none; }
:where(input, select, textarea)::placeholder { color: var(--ac-faint); opacity: 1; }

/* ---- typography ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .ac-h1, .ac-h2, .ac-h3, .ac-h4 {
  font-weight: var(--ac-fw-semibold);
  line-height: var(--ac-lh-tight);
  letter-spacing: -0.015em;
  color: var(--ac-text);
  text-wrap: balance;
}
.ac-h1 { font-size: var(--ac-fs-3xl); font-weight: var(--ac-fw-semibold); letter-spacing: -0.025em; }
.ac-h2 { font-size: var(--ac-fs-2xl); }
.ac-h3 { font-size: var(--ac-fs-xl); }
.ac-h4 { font-size: var(--ac-fs-lg); }
.ac-display { font-size: clamp(var(--ac-fs-3xl), 5vw, var(--ac-fs-4xl)); font-weight: var(--ac-fw-semibold); letter-spacing: -0.025em; line-height: 1.1; }
.ac-lead { font-size: var(--ac-fs-lg); color: var(--ac-text-soft); text-wrap: pretty; }
p { text-wrap: pretty; }
small, .ac-small { font-size: var(--ac-fs-sm); }
.ac-text-xs { font-size: var(--ac-fs-xs); }
.ac-text-sm { font-size: var(--ac-fs-sm); }
.ac-text-lg { font-size: var(--ac-fs-lg); }
.ac-text-soft { color: var(--ac-text-soft); }
.ac-text-muted { color: var(--ac-muted); }
.ac-text-accent { color: var(--ac-accent-ink); }
.ac-text-success { color: var(--ac-success-ink); }
.ac-text-warning { color: var(--ac-warning-ink); }
.ac-text-danger { color: var(--ac-danger-ink); }
.ac-text-start { text-align: start; }
.ac-text-center { text-align: center; }
.ac-text-end { text-align: end; }
.ac-fw-medium { font-weight: var(--ac-fw-medium); }
.ac-fw-semibold { font-weight: var(--ac-fw-semibold); }
.ac-fw-bold { font-weight: var(--ac-fw-bold); }
.ac-num, .ac-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ac-mono, code, kbd, samp, pre { font-family: var(--ac-font-mono); font-size: 0.92em; }
.ac-ltr { direction: ltr; unicode-bidi: isolate; }
.ac-gradient-text {
  background: var(--ac-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ac-link { color: var(--ac-accent-ink); font-weight: var(--ac-fw-semibold); border-radius: var(--ac-r-xs); }
.ac-link:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--ac-accent-soft-2); color: var(--ac-text); }

/* ---- focus ring --------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 2px;
  border-radius: var(--ac-r-sm);
}
.ac-focus-inset:focus-visible { outline-offset: -2px; }

/* ---- scrollbars --------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--ac-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ac-border-strong);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ac-muted); }
.ac-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.ac-no-scrollbar { scrollbar-width: none; }
.ac-no-scrollbar::-webkit-scrollbar { display: none; }

/* ---- icons -------------------------------------------------------------- */
.ac-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.ac-icon--sm { width: 1rem; height: 1rem; }
.ac-icon--md { width: 1.25rem; height: 1.25rem; }
.ac-icon--lg { width: 1.5rem; height: 1.5rem; }
.ac-icon--xl { width: 2rem; height: 2rem; stroke-width: 1.6; }
[dir="rtl"] .ac-flip-rtl { transform: scaleX(-1); }

/* ---- tone hook: any component that colours itself from --_tone accepts data-tone="accent|success|warning|danger|info|neutral".
   Doubled attribute selector so it beats component defaults regardless of file order. */
[data-tone="neutral"][data-tone] { --_tone: var(--ac-muted); }
[data-tone="success"][data-tone] { --_tone: var(--ac-success); }
[data-tone="warning"][data-tone] { --_tone: var(--ac-warning); }
[data-tone="danger"][data-tone] { --_tone: var(--ac-danger); }
[data-tone="info"][data-tone] { --_tone: var(--ac-info); }
[data-tone="accent"][data-tone] { --_tone: var(--ac-accent); }

/* ---- layout utilities ---------------------------------------------------- */
.ac-stack { display: flex; flex-direction: column; gap: var(--ac-stack-gap, var(--ac-s-4)); }
.ac-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-cluster-gap, var(--ac-s-2)); }
.ac-row { display: flex; align-items: center; gap: var(--ac-s-3); min-width: 0; }
.ac-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-3); min-width: 0; }
.ac-grow { flex: 1 1 auto; min-width: 0; }
.ac-center { display: grid; place-items: center; }
.ac-grid { display: grid; gap: var(--ac-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ac-grid-min, 16rem)), 1fr)); }
.ac-grid-2, .ac-grid-3, .ac-grid-4 { display: grid; gap: var(--ac-gap); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .ac-grid-2, .ac-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ac-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ac-gap-0 { --ac-stack-gap: 0; --ac-cluster-gap: 0; gap: 0; }
.ac-gap-1 { --ac-stack-gap: var(--ac-s-1); --ac-cluster-gap: var(--ac-s-1); gap: var(--ac-s-1); }
.ac-gap-2 { --ac-stack-gap: var(--ac-s-2); --ac-cluster-gap: var(--ac-s-2); gap: var(--ac-s-2); }
.ac-gap-3 { --ac-stack-gap: var(--ac-s-3); --ac-cluster-gap: var(--ac-s-3); gap: var(--ac-s-3); }
.ac-gap-4 { --ac-stack-gap: var(--ac-s-4); --ac-cluster-gap: var(--ac-s-4); gap: var(--ac-s-4); }
.ac-gap-6 { --ac-stack-gap: var(--ac-s-6); --ac-cluster-gap: var(--ac-s-6); gap: var(--ac-s-6); }
.ac-gap-8 { --ac-stack-gap: var(--ac-s-8); --ac-cluster-gap: var(--ac-s-8); gap: var(--ac-s-8); }
.ac-mt-auto { margin-block-start: auto; }
.ac-ms-auto { margin-inline-start: auto; }
.ac-w-full { inline-size: 100%; }
.ac-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.ac-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-visually-hidden, .ac-sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.ac-skip-link {
  position: fixed;
  inset-block-start: var(--ac-s-2);
  inset-inline-start: var(--ac-s-2);
  z-index: var(--ac-z-tooltip);
  padding: var(--ac-s-2) var(--ac-s-4);
  border-radius: var(--ac-r-md);
  background: var(--ac-ink);
  color: var(--ac-ink-contrast);
  transform: translateY(-200%);
  transition: transform var(--ac-dur-2) var(--ac-ease);
}
.ac-skip-link:focus { transform: none; }

@media (max-width: 1023.98px) { .ac-hide-mobile { display: none !important; } }
@media (min-width: 1024px) { .ac-hide-desktop { display: none !important; } }
@media (max-width: 639.98px) { .ac-hide-phone { display: none !important; } }

/* ---- entrance animation utilities (stagger timing lives in motion.css) ------
   Every keyframe that travels scales its distance by --ac-travel (1 = full motion,
   0 = reduced): reduced motion keeps the fade and drops the movement. */
@keyframes ac-fade-up {
  from { opacity: 0; transform: translateY(calc(14px * var(--ac-travel, 1))); }
  to { opacity: 1; transform: none; }
}
@keyframes ac-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ac-scale-in {
  from { opacity: 0; transform: scale(calc(1 - 0.04 * var(--ac-travel, 1))); }
  to { opacity: 1; transform: none; }
}
@keyframes ac-spin { to { transform: rotate(360deg); } }
@keyframes ac-pulse { 50% { opacity: 0.45; } }
.ac-animate-in { animation: ac-fade-up var(--ac-dur-4) var(--ac-ease-out) both; }
.ac-stagger > * { animation: ac-fade-up 560ms var(--ac-ease-out) both; }

/* ---- reduced motion policy (docs/motion.md) ------------------------------
   <html data-motion="full|reduced"> is resolved by boot.js / AC.motionPref from the
   ac:motion preference ('system' follows prefers-reduced-motion). Reduced keeps
   opacity / colour / blur crossfades, count-ups and chart reveals; it drops travel
   (translate, scale, springs), and decorative loops. data-motion="off" = everything off. */
:root { --ac-travel: 1; }
:root[data-motion="reduced"] { --ac-travel: 0; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion]) { --ac-travel: 0; } }
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  transition-property: opacity, color, background-color, border-color, outline-color, box-shadow, filter, fill, stroke, stop-color, visibility !important;
  scroll-behavior: auto !important;
}
:root[data-motion="reduced"] :is(.ac-skeleton, .ac-status, .ac-status::after, .ac-progress:indeterminate) { animation-play-state: paused !important; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  transition-duration: 1ms !important;
}
:root[data-motion="off"]::view-transition-group(*), :root[data-motion="off"]::view-transition-old(*), :root[data-motion="off"]::view-transition-new(*) { animation: none !important; }

@media print {
  body { background: #fff; color: #000; }
}

/* theme-dependent visibility (e.g. sun/moon toggle icons) */
:root[data-theme="dark"] .ac-only-light, :root:not([data-theme="dark"]) .ac-only-dark { display: none !important; }


/* ==== css/layout.css ==== */
/* ==========================================================================
   AraminConsole — app shell ("floating pills" layout)
   --------------------------------------------------------------------------
   <div class="ac-shell">
     <header class="ac-appbar" data-ac="appbar">        top row of floating pills:
       .ac-brand · .ac-topnav (segmented section nav, sliding ink pill) · .ac-utilbar + .ac-userchip
     <aside class="ac-dock" data-ac="dock">              slim floating icon rail (≥1024px):
       theme pill · section icons (active = ink circle) · help / logout pill
     <aside class="ac-rail" data-ac="rail">              group flyout next to the dock (≥1024px)
                                                         = off-canvas drawer with every link (<1024px)
     <div class="ac-scrim" data-ac-rail-close></div>
     <div class="ac-main"><main class="ac-content">…page…</main></div>
     <nav class="ac-tabbar" data-ac="tabbar">            floating pill tab bar (<1024px)
   </div>
   The window is the only scroll container (pull-to-refresh, large title and
   sticky headers all rely on that). Logical properties only → RTL mirrors.
   ========================================================================== */

:root { --ac-dir: 1; }
[dir="rtl"] { --ac-dir: -1; }

.ac-shell { min-height: 100dvh; }
.ac-main { position: relative; min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .ac-main { padding-inline-start: calc(var(--ac-rail-w) + var(--ac-s-3) + var(--ac-safe-start)); }
}

/* ---- floating chrome pill (shared by top bar, dock, tab bar) -------------- */
.ac-chrome {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-block-size: var(--ac-pill-h);
  padding: 4px;
  border-radius: var(--ac-r-pill);
  background: var(--ac-chrome-bg);
  border: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-chrome);
  min-width: 0;
}
/* round icon button used inside pills */
.ac-iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: calc(var(--ac-pill-h) - 10px);
  block-size: calc(var(--ac-pill-h) - 10px);
  flex: none;
  border-radius: 50%;
  color: var(--ac-text-soft);
  transition: background var(--ac-dur-1) var(--ac-ease), color var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-iconbtn:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-iconbtn:active { transform: scale(0.92); }
.ac-iconbtn .ac-icon { inline-size: 1.15rem; block-size: 1.15rem; }
.ac-iconbtn[aria-pressed="true"] { background: var(--ac-pill-bg); color: var(--ac-text); }

/* ---- top bar ------------------------------------------------------------------ */
.ac-appbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--ac-z-appbar);
  padding-block-start: var(--ac-safe-top);
  background: linear-gradient(to bottom, var(--ac-bg) 62%, color-mix(in oklab, var(--ac-bg) 0%, transparent));
  transition: background var(--ac-dur-3) var(--ac-ease);
}
/* once the page scrolls, content dissolves under the bar: a frosted layer that fades out downward,
   never a hard edge (the layer reaches past the bar and is masked to transparent) */
.ac-appbar::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.75rem 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, var(--ac-bg) 0%, color-mix(in oklab, var(--ac-bg) 88%, transparent) 55%, transparent 100%);
  -webkit-backdrop-filter: var(--ac-glass-blur);
  backdrop-filter: var(--ac-glass-blur);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  transition: opacity var(--ac-dur-3) var(--ac-ease);
}
.ac-appbar[data-scrolled="true"] { background: transparent; }
.ac-appbar[data-scrolled="true"]::before { opacity: 1; }
.ac-appbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ac-s-3);
  block-size: var(--ac-appbar-h);
  padding-inline: calc(var(--ac-content-pad) + var(--ac-safe-start)) calc(var(--ac-content-pad) + var(--ac-safe-end));
}
.ac-appbar__start { display: flex; align-items: center; gap: var(--ac-s-2); min-width: 0; justify-self: start; }
.ac-appbar__center { display: flex; align-items: center; justify-content: center; min-width: 0; }
.ac-appbar__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--ac-s-2); min-width: 0; justify-self: end; }
.ac-appbar__title {
  display: none;
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* bell count: small accent bubble on an .ac-iconbtn */
.ac-appbar__count {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  min-inline-size: 0.95rem;
  block-size: 0.95rem;
  padding-inline: 0.2rem;
  display: grid;
  place-items: center;
  border-radius: var(--ac-r-pill);
  background: var(--ac-highlight);
  color: var(--ac-highlight-contrast);
  font-size: 0.5625rem;
  font-weight: var(--ac-fw-bold);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--ac-chrome-bg);
  font-variant-numeric: tabular-nums;
}

/* brand pill */
.ac-brand {
  gap: var(--ac-s-2);
  padding-inline-end: var(--ac-s-4);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-md);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--ac-dur-1) var(--ac-ease);
}
.ac-brand:active { transform: var(--ac-press); }
.ac-brand__mark {
  display: grid;
  place-items: center;
  inline-size: calc(var(--ac-pill-h) - 10px);
  block-size: calc(var(--ac-pill-h) - 10px);
  flex: none;
  border-radius: 50%;
  background: var(--ac-gradient);
  color: var(--ac-accent-contrast);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px -4px color-mix(in oklab, var(--ac-accent) 70%, transparent);
}
.ac-brand__mark svg { inline-size: 1.05rem; block-size: 1.05rem; }

/* segmented section nav with a sliding ink pill (tabs.js: data-ac="navpill") */
.ac-topnav {
  position: relative;
  isolation: isolate;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.ac-topnav::-webkit-scrollbar { display: none; }
.ac-topnav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--ac-s-1);
  flex: none;
  block-size: calc(var(--ac-pill-h) - 10px);
  padding-inline: var(--ac-s-4);
  border-radius: var(--ac-r-pill);
  color: var(--ac-text-soft);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-medium);
  white-space: nowrap;
  transition: color var(--ac-dur-3) var(--ac-ease), background var(--ac-dur-1);
}
.ac-topnav__link:hover { color: var(--ac-text); }
.ac-topnav__link[aria-current="page"] { color: var(--ac-ink-contrast); }
.ac-topnav__link .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-topnav__ind {
  position: absolute;
  z-index: 0;
  inset-block: 4px;
  left: 0; /* rtl-ok: JS-measured indicator geometry */
  inline-size: var(--ac-ind-w, 0);
  border-radius: var(--ac-r-pill);
  background: var(--ac-ink);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.45);
  transform: translateX(var(--ac-ind-x, 0));
  opacity: var(--ac-ind-o, 0);
  transition: transform 420ms var(--ac-ease-out), inline-size 420ms var(--ac-ease-out), opacity var(--ac-dur-2);
  pointer-events: none;
}
.ac-topnav__ind[data-instant] { transition: none; }

/* utilities pill + user chip */
.ac-utilbar { gap: 2px; }
.ac-userchip {
  gap: var(--ac-s-2);
  padding-inline-end: var(--ac-s-3);
  text-align: start;
  transition: transform var(--ac-dur-1) var(--ac-ease), border-color var(--ac-dur-1);
}
.ac-userchip:hover { border-color: var(--ac-border-strong); }
.ac-userchip:active { transform: var(--ac-press); }
.ac-userchip .ac-avatar { --ac-avatar: calc(var(--ac-pill-h) - 10px); }
.ac-userchip__text { display: grid; min-width: 0; line-height: 1.25; }
.ac-userchip__text strong { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); white-space: nowrap; }
.ac-userchip__text small { font-size: var(--ac-fs-2xs); color: var(--ac-muted); white-space: nowrap; }
.ac-userchip > .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; color: var(--ac-muted); }

@media (max-width: 1279.98px) {
  .ac-userchip { padding-inline-end: 4px; }
  .ac-userchip :is(.ac-userchip__text, .ac-userchip > .ac-icon) { display: none; }
}
@media (min-width: 1024px) {
  .ac-appbar [data-mobile-only] { display: none; }
}
/* tablet: brand · scrolling nav · utilities */
@media (max-width: 1023.98px) {
  .ac-appbar__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ac-appbar__center { justify-content: flex-start; }
}
/* phone: brand mark · collapsing small title · utilities */
@media (max-width: 639.98px) {
  .ac-appbar__inner { gap: var(--ac-s-2); }
  .ac-brand { padding-inline-end: 4px; }
  .ac-brand__name, .ac-topnav, .ac-appbar [data-hide-phone] { display: none; }
  .ac-appbar__center { justify-content: center; }
  .ac-appbar__title { display: block; opacity: 0; transform: translateY(6px); transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-3) var(--ac-ease); }
  .ac-appbar[data-collapsed="true"] .ac-appbar__title { opacity: 1; transform: none; }
  .ac-appbar .ac-iconbtn { inline-size: 2.25rem; block-size: 2.25rem; }
}

/* route transitions: AC.motion.navigate() — styles in motion.css */

/* ---- dock: slim floating icon rail (desktop) --------------------------------- */
.ac-dock { display: none; }
@media (min-width: 1024px) {
  .ac-dock {
    position: fixed;
    z-index: var(--ac-z-rail);
    inset-inline-start: calc(var(--ac-content-pad) + var(--ac-safe-start));
    inset-block: calc(var(--ac-appbar-h) + var(--ac-safe-top) + var(--ac-s-1)) calc(var(--ac-s-5) + var(--ac-safe-bottom));
    inline-size: var(--ac-rail-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ac-s-6);
    animation: ac-fade-in var(--ac-dur-4) var(--ac-ease-out) both;
  }
}
.ac-dock__pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ac-s-1);
  inline-size: 100%;
  padding: 5px;
  border-radius: var(--ac-r-pill);
  background: var(--ac-chrome-bg);
  border: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-chrome);
  min-height: 0;
}
.ac-dock__nav { overflow-y: auto; scrollbar-width: none; flex: 0 1 auto; }
.ac-dock__nav::-webkit-scrollbar { display: none; }
.ac-dock__foot { margin-block-start: auto; }
.ac-dock__btn {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: calc(var(--ac-rail-w) - 12px);
  block-size: calc(var(--ac-rail-w) - 12px);
  flex: none;
  border-radius: 50%;
  color: var(--ac-text-soft);
  transition: background var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-dock__btn:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-dock__btn:active { transform: scale(0.9); }
.ac-dock__btn .ac-icon { inline-size: 1.15rem; block-size: 1.15rem; }
.ac-dock__btn[aria-expanded="true"] { background: var(--ac-pill-bg); color: var(--ac-text); }
.ac-dock__btn[aria-current="page"], .ac-dock__btn[data-active] {
  background: var(--ac-ink);
  color: var(--ac-ink-contrast);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.55);
}
.ac-dock__btn[aria-pressed="true"] { background: var(--ac-pill-bg); color: var(--ac-text); box-shadow: inset 0 0 0 1px var(--ac-border); }
.ac-dock__dot {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--ac-highlight);
  box-shadow: 0 0 0 2px var(--ac-chrome-bg);
}

/* ---- rail: group flyout (desktop) / drawer (mobile) ------------------------- */
.ac-rail {
  position: fixed;
  z-index: var(--ac-z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--ac-s-2);
  min-width: 0;
  padding: var(--ac-s-3);
  background: var(--ac-surface-1);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-r-2xl);
  box-shadow: var(--ac-shadow-xl);
  overflow: hidden;
  visibility: hidden;
}
.ac-rail__head { display: flex; align-items: center; gap: var(--ac-s-2); min-height: 2.5rem; padding-inline: var(--ac-s-2) 0; }
.ac-rail__heading { flex: 1 1 auto; min-width: 0; font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-rail__heading .ac-brand__mark { display: inline-grid; vertical-align: middle; margin-inline-end: var(--ac-s-2); inline-size: 2rem; block-size: 2rem; }
.ac-rail__close {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--ac-pill-bg);
  color: var(--ac-text-soft);
  transition: background var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-rail__close:hover { background: var(--ac-pill-bg-hover); color: var(--ac-text); }
.ac-rail__close:active { transform: scale(0.92); }
.ac-rail__close .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-rail__search {
  display: flex;
  align-items: center;
  gap: var(--ac-s-2);
  min-height: 2.5rem;
  padding-inline: var(--ac-s-3) var(--ac-s-2);
  border-radius: var(--ac-r-pill);
  background: var(--ac-pill-bg);
  color: var(--ac-muted);
  font-size: var(--ac-fs-sm);
  transition: background var(--ac-dur-1);
}
.ac-rail__search:hover { background: var(--ac-pill-bg-hover); }
.ac-rail__search > span { flex: 1; text-align: start; white-space: nowrap; overflow: hidden; }
.ac-rail__search .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-rail__search .ac-kbd { background: var(--ac-surface-1); }

.ac-rail__nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ac-s-4);
  min-height: 0;
  padding-block: var(--ac-s-1);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.ac-rail__nav::-webkit-scrollbar { display: none; }
.ac-rail__group { display: flex; flex-direction: column; gap: 2px; }
.ac-rail__label {
  padding: 0 var(--ac-s-3) var(--ac-s-1);
  font-size: var(--ac-fs-2xs);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-faint);
  white-space: nowrap;
  overflow: hidden;
}
.ac-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ac-s-3);
  min-height: 2.5rem;
  padding-inline: var(--ac-s-3) var(--ac-s-2);
  border-radius: var(--ac-r-pill);
  color: var(--ac-text-soft);
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-medium);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: background var(--ac-dur-1) var(--ac-ease), color var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-rail__link::-webkit-details-marker { display: none; }
.ac-rail__link:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-rail__link:active { transform: scale(0.985); }
.ac-rail__link > .ac-icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--ac-muted); transition: color var(--ac-dur-1); }
.ac-rail__link:hover > .ac-icon { color: var(--ac-text-soft); }
.ac-rail__link[aria-current="page"] { background: var(--ac-ink); color: var(--ac-ink-contrast); font-weight: var(--ac-fw-semibold); }
.ac-rail__link[aria-current="page"] > .ac-icon { color: var(--ac-ink-contrast); }
.ac-rail__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ac-rail__badge {
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding-inline: 0.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--ac-r-pill);
  background: var(--ac-neutral-soft);
  color: var(--ac-text-soft);
  font-size: var(--ac-fs-2xs);
  font-weight: var(--ac-fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ac-rail__badge--accent { background: var(--ac-accent); color: var(--ac-accent-contrast); }
.ac-rail__badge--danger { background: var(--ac-danger); color: #fff; }
.ac-rail__chev { inline-size: 0.95rem !important; block-size: 0.95rem !important; color: var(--ac-faint) !important; transition: transform var(--ac-dur-2) var(--ac-ease); }
/* nested group: <details class="ac-rail__sub"><summary class="ac-rail__link">…</summary><div class="ac-rail__subnav">links</div></details> */
.ac-rail__sub[open] > summary .ac-rail__chev { transform: rotate(90deg); }
[dir="rtl"] .ac-rail__sub[open] > summary .ac-rail__chev { transform: scaleX(-1) rotate(90deg); }
.ac-rail__subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-inline-start: 1.3rem;
  padding-inline-start: var(--ac-s-2);
  padding-block: 2px;
  border-inline-start: 1px solid var(--ac-border);
}
.ac-rail__subnav .ac-rail__link { min-height: 2.125rem; font-size: var(--ac-fs-sm); }
.ac-rail__foot { display: flex; flex-direction: column; gap: var(--ac-s-2); }

/* user card (drawer foot) */
.ac-usercard {
  display: flex;
  align-items: center;
  gap: var(--ac-s-3);
  min-width: 0;
  padding: var(--ac-s-2);
  border-radius: var(--ac-r-pill);
  background: var(--ac-surface-2);
  text-align: start;
  transition: background var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-usercard:hover { background: var(--ac-surface-3); }
.ac-usercard:active { transform: var(--ac-press); }
.ac-usercard__text { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.ac-usercard__text strong { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-usercard__text small { font-size: var(--ac-fs-xs); color: var(--ac-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-usercard > .ac-icon { color: var(--ac-muted); inline-size: 1rem; block-size: 1rem; }

/* desktop: flyout next to the dock, shows the chosen group only */
@media (min-width: 1024px) {
  .ac-rail {
    inset-inline-start: calc(var(--ac-content-pad) + var(--ac-safe-start) + var(--ac-rail-w) + var(--ac-s-3));
    inset-block-start: calc(var(--ac-appbar-h) + var(--ac-safe-top) + var(--ac-s-1));
    inline-size: var(--ac-flyout-w);
    max-block-size: calc(100dvh - var(--ac-appbar-h) - var(--ac-safe-top) - var(--ac-s-8));
    opacity: 0;
    transform: translateX(calc(-10px * var(--ac-dir))) scale(0.98);
    transform-origin: top left;
    transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-4) var(--ac-ease-out), visibility 0s linear var(--ac-dur-2);
  }
  [dir="rtl"] .ac-rail { transform-origin: top right; }
  .ac-rail[data-state="open"] { opacity: 1; visibility: visible; transform: none; transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-4) var(--ac-ease-out); }
  .ac-rail__group[data-off], .ac-rail__foot { display: none; }
  .ac-rail[data-group] .ac-rail__label { display: none; }
}

/* scrim (drawer backdrop on mobile; reused by overlays) */
.ac-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ac-z-rail) - 1);
  background: var(--ac-scrim);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ac-dur-3) var(--ac-ease);
}

/* mobile: rail = floating drawer with every link */
@media (max-width: 1023.98px) {
  .ac-rail {
    inset-block: calc(var(--ac-s-2) + var(--ac-safe-top)) calc(var(--ac-s-2) + var(--ac-safe-bottom));
    inset-inline-start: calc(var(--ac-s-2) + var(--ac-safe-start));
    inline-size: min(19rem, calc(100vw - 3.5rem));
    transform: translateX(calc(-110% * var(--ac-dir)));
    transition: transform var(--ac-dur-4) var(--ac-ease-out), visibility 0s linear var(--ac-dur-4);
  }
  .ac-rail[data-state="open"] { transform: none; visibility: visible; transition: transform var(--ac-dur-4) var(--ac-ease-out); }
  .ac-rail[data-state="open"] ~ .ac-scrim { opacity: 1; pointer-events: auto; z-index: calc(var(--ac-z-drawer) - 1); }
  .ac-rail[data-dragging] { transition: none; transform: translateX(var(--ac-drag, 0px)); }
  .ac-rail__link { min-height: var(--ac-touch); }
}

/* ---- content --------------------------------------------------------------- */
.ac-content {
  flex: 1 1 auto;
  inline-size: 100%;
  max-inline-size: var(--ac-content-max);
  margin-inline: auto;
  padding: var(--ac-s-1) calc(var(--ac-content-pad) + var(--ac-safe-end)) calc(var(--ac-content-pad) * 2) calc(var(--ac-content-pad) + var(--ac-safe-start));
  min-width: 0;
}
.ac-content:focus { outline: none; }
.ac-content--narrow { max-inline-size: 60rem; }
@media (max-width: 1023.98px) {
  .ac-content { padding-block-end: calc(var(--ac-tabbar-h) + var(--ac-safe-bottom) + var(--ac-s-10)); }
}

.ac-page-enter { animation: ac-fade-up var(--ac-dur-4) var(--ac-ease-out) backwards; } /* backwards: no transform left behind (it would trap position:fixed children) */

/* initial / slow-route placeholder inside .ac-content */
.ac-page-loading { display: grid; gap: var(--ac-s-6); padding-block: var(--ac-s-5); }

/* ---- page header: greeting title + muted sub + black pill action ---------- */
.ac-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ac-s-3) var(--ac-s-6);
  padding-block: var(--ac-s-2) var(--ac-s-6);
}
.ac-page-head__titles { display: grid; gap: var(--ac-s-1); min-width: 0; }
.ac-page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-s-2);
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-medium);
  color: var(--ac-muted);
}
.ac-page-head__title {
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
  font-weight: var(--ac-fw-semibold);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.ac-page-head__sub { color: var(--ac-muted); font-size: var(--ac-fs-md); max-inline-size: 64ch; }
.ac-page-head__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ac-s-2); }
@media (max-width: 639.98px) {
  .ac-page-head { padding-block: var(--ac-s-1) var(--ac-s-5); align-items: stretch; flex-direction: column; }
  .ac-page-head__title { font-size: 1.875rem; }
  .ac-page-head__actions > .ac-btn { flex: 1 1 auto; }
  .ac-page-head__actions > .ac-segmented { display: flex; flex: 1 1 100%; }
  .ac-page-head__actions > .ac-segmented > * { flex: 1 1 0; }
}

/* section inside a page */
.ac-section { display: grid; gap: var(--ac-s-4); margin-block-start: var(--ac-s-8); }
.ac-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-3); }
.ac-section__title { font-size: var(--ac-fs-lg); font-weight: var(--ac-fw-semibold); }
.ac-section__sub { color: var(--ac-muted); font-size: var(--ac-fs-sm); }

/* ---- bento / responsive 12-col grid --------------------------------------- */
/* children span all 12 on phone; .ac-span-xs-6 = half on phone;
   .ac-span-md-* from 640px; .ac-span-* from 1024px; .ac-span-xl-* from 1280px */
.ac-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--ac-gap);
}
.ac-bento > * { grid-column: span 12; min-width: 0; }
.ac-bento > .ac-span-xs-6 { grid-column: span 6; }
@media (min-width: 640px) {
  .ac-bento > .ac-span-md-3 { grid-column: span 3; }
  .ac-bento > .ac-span-md-4 { grid-column: span 4; }
  .ac-bento > .ac-span-md-6 { grid-column: span 6; }
  .ac-bento > .ac-span-md-8 { grid-column: span 8; }
  .ac-bento > .ac-span-md-12 { grid-column: span 12; }
}
@media (min-width: 1024px) {
  .ac-bento > .ac-span-2 { grid-column: span 2; }
  .ac-bento > .ac-span-3 { grid-column: span 3; }
  .ac-bento > .ac-span-4 { grid-column: span 4; }
  .ac-bento > .ac-span-5 { grid-column: span 5; }
  .ac-bento > .ac-span-6 { grid-column: span 6; }
  .ac-bento > .ac-span-7 { grid-column: span 7; }
  .ac-bento > .ac-span-8 { grid-column: span 8; }
  .ac-bento > .ac-span-9 { grid-column: span 9; }
  .ac-bento > .ac-span-12 { grid-column: span 12; }
  .ac-bento > .ac-row-2 { grid-row: span 2; }
}
@media (min-width: 1280px) {
  .ac-bento > .ac-span-xl-3 { grid-column: span 3; }
  .ac-bento > .ac-span-xl-4 { grid-column: span 4; }
  .ac-bento > .ac-span-xl-6 { grid-column: span 6; }
  .ac-bento > .ac-span-xl-8 { grid-column: span 8; }
}

/* ---- bottom tab bar: floating pill (phones / tablets) ----------------------- */
.ac-tabbar {
  position: fixed;
  inset-inline: calc(var(--ac-s-4) + var(--ac-safe-start)) calc(var(--ac-s-4) + var(--ac-safe-end));
  inset-block-end: calc(var(--ac-s-3) + var(--ac-safe-bottom));
  z-index: var(--ac-z-tabbar);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  max-inline-size: 26rem;
  block-size: var(--ac-tabbar-h);
  margin-inline: auto;
  padding-inline: var(--ac-s-2);
  border-radius: var(--ac-r-pill);
  background: var(--ac-glass-bg-strong);
  -webkit-backdrop-filter: var(--ac-glass-blur);
  backdrop-filter: var(--ac-glass-blur);
  border: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-lg);
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--ac-dur-4) var(--ac-ease);
}
.ac-tabbar[data-hidden="true"] { transform: translateY(calc(100% + var(--ac-s-6))); }
@media (min-width: 1024px) { .ac-tabbar { display: none; } }

.ac-tabbar__item {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  block-size: 100%;
  color: var(--ac-muted);
  transition: color var(--ac-dur-3) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-tabbar__item:active { transform: scale(0.9); }
.ac-tabbar__icon {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
}
.ac-tabbar__icon .ac-icon { inline-size: 1.3rem; block-size: 1.3rem; transition: transform var(--ac-dur-3) var(--ac-ease-spring); }
/* labels stay for screen readers; the pill shows icons only */
.ac-tabbar__label {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.ac-tabbar__item[aria-current="page"] { color: var(--ac-ink-contrast); }
.ac-tabbar__item[aria-current="page"] .ac-icon { stroke-width: 2.1; }
.ac-tabbar__badge {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  min-inline-size: 1rem;
  block-size: 1rem;
  padding-inline: 0.22rem;
  display: grid;
  place-items: center;
  border-radius: var(--ac-r-pill);
  background: var(--ac-accent);
  color: var(--ac-accent-contrast);
  font-size: 0.5625rem;
  font-weight: var(--ac-fw-bold);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--ac-chrome-bg);
}
/* sliding ink circle — positioned by tabbar.js with --ac-ind-x / --ac-ind-y / --ac-ind-w (physical px) */
.ac-tabbar__indicator {
  position: absolute;
  top: 0;
  left: 0; /* rtl-ok: JS-measured indicator geometry */
  inline-size: var(--ac-ind-w, 2.75rem);
  block-size: var(--ac-ind-w, 2.75rem);
  border-radius: 50%;
  background: var(--ac-ink);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
  transform: translate(var(--ac-ind-x, -200px), var(--ac-ind-y, 0px));
  opacity: var(--ac-ind-o, 0);
  transition: transform var(--ac-dur-4) var(--ac-ease-spring), opacity var(--ac-dur-2);
  pointer-events: none;
}
.ac-tabbar__indicator[data-instant] { transition: none; }

/* center FAB */
.ac-tabbar__fab-slot { display: grid; place-items: center; position: relative; z-index: 1; }
.ac-tabbar__fab {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  background: var(--ac-gradient);
  color: var(--ac-accent-contrast);
  box-shadow: var(--ac-shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform var(--ac-dur-2) var(--ac-ease-spring), box-shadow var(--ac-dur-2);
}
.ac-tabbar__fab:active { transform: scale(0.9) rotate(-8deg); }
.ac-tabbar__fab .ac-icon { inline-size: 1.4rem; block-size: 1.4rem; stroke-width: 2.4; transition: transform var(--ac-dur-3) var(--ac-ease-spring); }
.ac-tabbar__fab[aria-expanded="true"] .ac-icon { transform: rotate(45deg); }

/* standalone desktop FAB */
.ac-fab {
  position: fixed;
  inset-inline-end: calc(var(--ac-s-6) + var(--ac-safe-end));
  inset-block-end: calc(var(--ac-s-6) + var(--ac-safe-bottom));
  z-index: var(--ac-z-sticky);
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  background: var(--ac-gradient);
  color: var(--ac-accent-contrast);
  box-shadow: var(--ac-shadow-glow), var(--ac-shadow-lg);
  transition: transform var(--ac-dur-2) var(--ac-ease-spring);
}
.ac-fab:active { transform: scale(0.92); }
@media (max-width: 1023.98px) { .ac-fab { inset-block-end: calc(var(--ac-tabbar-h) + var(--ac-safe-bottom) + var(--ac-s-6)); } }

/* ---- pull to refresh indicator ------------------------------------------------ */
.ac-ptr {
  position: fixed;
  inset-inline: 0;
  inset-block-start: calc(var(--ac-appbar-h) + var(--ac-safe-top));
  z-index: calc(var(--ac-z-appbar) - 1);
  display: grid;
  place-items: center;
  block-size: 0;
  pointer-events: none;
}
.ac-ptr__spinner {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--ac-elevated);
  border: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-md);
  color: var(--ac-accent);
  transform: translateY(calc(var(--ac-ptr-y, 0px) - 2.5rem)) rotate(calc(var(--ac-ptr-p, 0) * 270deg)) scale(calc(0.5 + var(--ac-ptr-p, 0) * 0.5));
  opacity: var(--ac-ptr-p, 0);
}
.ac-ptr__spinner .ac-icon { inline-size: 1.1rem; block-size: 1.1rem; }
.ac-ptr[data-state="settling"] .ac-ptr__spinner { transition: transform var(--ac-dur-3) var(--ac-ease), opacity var(--ac-dur-3); }
.ac-ptr[data-state="refreshing"] .ac-ptr__spinner { transform: translateY(1rem); opacity: 1; transition: transform var(--ac-dur-3) var(--ac-ease); }
.ac-ptr[data-state="refreshing"] .ac-ptr__spinner .ac-icon { animation: ac-spin 0.8s linear infinite; }

/* ---- auth split layout --------------------------------------------------------- */
.ac-auth {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
  background: var(--ac-bg);
}
.ac-auth__aside {
  position: relative;
  display: none;
  overflow: hidden;
  padding: var(--ac-s-10);
  background: #111113;
  color: #f2f2f3;
  isolation: isolate;
}
.ac-auth__aside::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: var(--ac-aurora);
  filter: blur(20px) saturate(140%);
  opacity: 0.95;
}
.ac-auth__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--ac-s-8) + var(--ac-safe-top)) var(--ac-s-5) calc(var(--ac-s-8) + var(--ac-safe-bottom));
}
.ac-auth__card { inline-size: 100%; max-inline-size: 24rem; margin-inline: auto; display: grid; gap: var(--ac-s-5); }
.ac-auth__brand { display: flex; align-items: center; gap: var(--ac-s-3); font-weight: var(--ac-fw-bold); font-size: var(--ac-fs-lg); }
@media (min-width: 1024px) {
  .ac-auth { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .ac-auth__aside { display: flex; flex-direction: column; justify-content: space-between; margin: var(--ac-s-3); border-radius: var(--ac-r-2xl); }
}

/* ---- full-page centered states (errors, offline) ------------------------------ */
.ac-fullpage {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(var(--ac-s-8) + var(--ac-safe-top)) var(--ac-s-5) calc(var(--ac-s-8) + var(--ac-safe-bottom));
  background: var(--ac-bg);
  text-align: center;
}

/* ---- aurora hero helper -------------------------------------------------------- */
.ac-aurora { position: relative; isolation: isolate; overflow: hidden; }
.ac-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ac-aurora);
  pointer-events: none;
}

/* ---- toast container slot (toasts themselves live in feedback.css) ------------ */
.ac-toasts {
  position: fixed;
  z-index: var(--ac-z-toast);
  inset-block-end: calc(var(--ac-s-4) + var(--ac-safe-bottom));
  inset-inline-end: calc(var(--ac-s-4) + var(--ac-safe-end));
  display: flex;
  flex-direction: column;
  gap: var(--ac-s-2);
  inline-size: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.ac-toasts > * { pointer-events: auto; }
@media (max-width: 1023.98px) {
  .ac-toasts {
    inset-block-end: auto;
    inset-block-start: calc(var(--ac-s-2) + var(--ac-safe-top));
    inset-inline: var(--ac-s-3);
    inline-size: auto;
  }
}

@media print {
  .ac-rail, .ac-dock, .ac-appbar, .ac-tabbar, .ac-scrim, .ac-fab, .ac-toasts { display: none !important; }
  .ac-main { padding: 0; }
  .ac-content { padding: 0; max-inline-size: none; }
}

/* ---------------------------------------------------------------- powered-by credit (.ac-powered)
   Small attribution link. Keep it in the base template; remove or replace it freely (MIT). */
.ac-powered {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ac-s-1);
  padding-block: var(--ac-s-1); padding-inline: var(--ac-s-3);
  border-radius: var(--ac-r-pill);
  font-size: var(--ac-fs-xs); color: var(--ac-faint); text-decoration: none;
  transition: color var(--ac-dur-2) var(--ac-ease), background-color var(--ac-dur-2) var(--ac-ease);
}
.ac-powered:hover { color: var(--ac-text); background: var(--ac-hover); }
.ac-powered:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 2px; }
.ac-rail__foot > .ac-powered { align-self: center; }
.ac-main > .ac-powered { display: flex; margin-inline: auto; inline-size: max-content; margin-block: var(--ac-s-4) calc(var(--ac-tabbar-h) + var(--ac-safe-bottom) + var(--ac-s-6)); }
.ac-powered--page { display: flex; margin-inline: auto; inline-size: max-content; margin-block: var(--ac-s-3) calc(var(--ac-s-4) + var(--ac-safe-bottom)); }
@media (min-width: 1024px) {
  .ac-main > .ac-powered { display: none; }
  .ac-powered--float { position: fixed; inset-block-end: var(--ac-s-3); inset-inline-end: var(--ac-s-4); margin: 0; background: var(--ac-glass-bg); z-index: 1; }
}

/* brand logo inside the brand pill (replaces the monogram disc when a brand ships a wordmark) */
.ac-brand__logo { block-size: 1.25rem; inline-size: auto; flex: none; display: block; }
.ac-brand:has(.ac-brand__logo) { padding-inline-start: var(--ac-s-4); }
.ac-brand:has(.ac-brand__logo) .ac-brand__name { font-size: var(--ac-fs-sm); color: var(--ac-text-soft); padding-inline-start: var(--ac-s-2); border-inline-start: 1px solid var(--ac-border-strong); }


/* ==== css/components/apps.css ==== */
/* ==========================================================================
   App screens: kanban, split/stack, calendar, chat, mail, file manager,
   pricing, FAQ, activity timeline. Tokens only; logical properties.
   ========================================================================== */

/* ---- app toolbar (filters row above an app screen) ---- */
.ac-apptoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2) var(--ac-s-3); margin-block-end: var(--ac-s-4); }
.ac-apptoolbar__end { display: flex; align-items: center; gap: var(--ac-s-3); margin-inline-start: auto; }
@media (max-width: 639.98px) { .ac-apptoolbar .ac-searchpill { flex: 1 1 10rem; inline-size: auto; } .ac-apptoolbar > .ac-segmented { flex: 1 1 100%; } .ac-apptoolbar > .ac-segmented > * { flex: 1 1 0; } }

/* ---- kanban ---------------------------------------------------------------- */
.ac-kanban { display: flex; align-items: flex-start; gap: var(--ac-gap); overflow-x: auto; overscroll-behavior-x: contain; padding-block-end: var(--ac-s-3); scrollbar-width: thin; scroll-padding-inline: var(--ac-s-1); }
.ac-kanban__col { flex: 0 0 18.75rem; display: flex; flex-direction: column; gap: var(--ac-s-3); min-width: 0; padding: var(--ac-s-3); background: var(--ac-surface-1); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); }
.ac-kanban__head { display: flex; align-items: center; gap: var(--ac-s-2); padding: var(--ac-s-1) var(--ac-s-1) 0; min-block-size: 2rem; }
.ac-kanban__dot { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--_tone, var(--ac-muted)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--_tone, var(--ac-muted)) 16%, transparent); flex: none; }
.ac-kanban__name { font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); }
.ac-kanban__count { min-inline-size: 1.4rem; padding-inline: 0.4rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-2); color: var(--ac-text-soft); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); line-height: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.ac-kanban__head .ac-btn { margin-inline-start: auto; }
.ac-kanban__list { position: relative; display: flex; flex-direction: column; gap: var(--ac-s-2); min-block-size: 5rem; padding: var(--ac-s-2); border-radius: var(--ac-r-lg); background: var(--ac-surface-2); transition: background var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2); }
.ac-kanban__list[data-empty]::after { content: attr(data-empty-text); display: grid; place-items: center; min-block-size: 4.5rem; border: 1.5px dashed var(--ac-border-strong); border-radius: var(--ac-r-md); color: var(--ac-faint); font-size: var(--ac-fs-xs); }
.ac-kanban[data-dragging] .ac-kanban__list[data-over] { background: color-mix(in oklab, var(--ac-accent) 7%, var(--ac-surface-2)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ac-accent) 35%, transparent); }
.ac-kanban__card { position: relative; display: grid; gap: var(--ac-s-3); padding: var(--ac-s-3) var(--ac-s-3) var(--ac-s-3); background: var(--ac-surface-1); border: 1px solid var(--ac-border); border-radius: var(--ac-r-md); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: box-shadow var(--ac-dur-3) var(--ac-ease), transform var(--ac-dur-3) var(--ac-ease), border-color var(--ac-dur-2); }
@media (hover: hover) { .ac-kanban:not([data-dragging]) .ac-kanban__card:hover { transform: translateY(-2px); box-shadow: var(--ac-shadow-md); border-color: var(--ac-border-strong); } }
.ac-kanban__card:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 2px; }
.ac-kanban__card[data-armed] { transform: scale(1.03); box-shadow: var(--ac-shadow-lg); }
.ac-kanban__card[data-placeholder] { background: transparent; border: 1.5px dashed color-mix(in oklab, var(--ac-accent) 45%, var(--ac-border-strong)); box-shadow: none; transform: none; }
.ac-kanban__card[data-placeholder] > * { visibility: hidden; }
.ac-kanban__ghost { /* rtl-ok: left:0 + JS-measured physical translate */ position: fixed; inset-block-start: 0; left: 0; z-index: var(--ac-z-toast); inline-size: var(--_w); margin: 0; pointer-events: none; cursor: grabbing; transform: translate(var(--_x), var(--_y)); box-shadow: var(--ac-shadow-xs); transition: box-shadow var(--ac-dur-3) var(--ac-ease), rotate var(--ac-dur-3) var(--ac-ease-spring), scale var(--ac-dur-3) var(--ac-ease-spring); will-change: transform; }
.ac-kanban__ghost[data-lifted] { rotate: 2.5deg; scale: 1.04; box-shadow: var(--ac-shadow-xl); }
.ac-kanban__ghost[data-dropping] { transition: transform 200ms var(--ac-ease), box-shadow 200ms, rotate 200ms, scale 200ms; }
[dir="rtl"] .ac-kanban__ghost[data-lifted] { rotate: -2.5deg; }
html[data-ac-dragging], html[data-ac-dragging] * { cursor: grabbing !important; }
.ac-kanban__labels { display: flex; flex-wrap: wrap; gap: var(--ac-s-1); }
.ac-kanban__labels .ac-badge { block-size: 1.25rem; font-size: var(--ac-fs-2xs); }
.ac-kanban__title { font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); line-height: var(--ac-lh-snug); }
.ac-kanban__desc { margin-block-start: -0.4rem; color: var(--ac-muted); font-size: var(--ac-fs-xs); line-height: var(--ac-lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-kanban__progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-2xs); color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-kanban__meta { display: flex; align-items: center; gap: var(--ac-s-3); color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-kanban__meta > span { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.ac-kanban__meta .ac-icon { inline-size: 0.85rem; block-size: 0.85rem; }
.ac-kanban__meta .ac-avatar-group { margin-inline-start: auto; }
.ac-kanban__due[data-tone] { padding: 2px 0.45rem; border-radius: var(--ac-r-pill); background: color-mix(in oklab, var(--_tone) 12%, transparent); color: var(--_tone); font-weight: var(--ac-fw-semibold); }
.ac-kanban__add { display: flex; align-items: center; justify-content: center; gap: var(--ac-s-2); min-block-size: 2.5rem; border-radius: var(--ac-r-md); color: var(--ac-muted); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); transition: background var(--ac-dur-2), color var(--ac-dur-2); }
.ac-kanban__add:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-kanban__composer { display: grid; gap: var(--ac-s-2); padding: var(--ac-s-2); border-radius: var(--ac-r-md); background: var(--ac-surface-1); border: 1px solid var(--ac-border-strong); box-shadow: var(--ac-shadow-sm); animation: ac-fade-up var(--ac-dur-3) var(--ac-ease-out) both; }
.ac-kanban__composer textarea { resize: none; min-block-size: 3.5rem; border: 0; padding: var(--ac-s-1); background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-sm); outline: none; }
.ac-kanban__newcol { flex: 0 0 15rem; display: grid; place-items: center; gap: var(--ac-s-2); align-self: stretch; min-block-size: 10rem; border: 1.5px dashed var(--ac-border-strong); border-radius: var(--ac-r-xl); color: var(--ac-muted); font-weight: var(--ac-fw-medium); transition: background var(--ac-dur-2), color var(--ac-dur-2), border-color var(--ac-dur-2); }
.ac-kanban__newcol:hover { background: var(--ac-surface-1); color: var(--ac-text); border-color: var(--ac-ink); }
.ac-kanban__col[data-new] { animation: ac-fade-up var(--ac-dur-4) var(--ac-ease-out) both; }
.ac-kanban-pager { display: none; }
@media (max-width: 639.98px) {
  .ac-kanban { margin-inline: calc(var(--ac-content-pad) * -1); padding-inline: var(--ac-content-pad); gap: var(--ac-s-3); scroll-snap-type: x mandatory; scroll-padding-inline: var(--ac-content-pad); scrollbar-width: none; }
  .ac-kanban::-webkit-scrollbar { display: none; }
  .ac-kanban[data-dragging] { scroll-snap-type: none; }
  .ac-kanban__col, .ac-kanban__newcol { flex-basis: calc(100vw - var(--ac-content-pad) * 2 - var(--ac-safe-start) - var(--ac-safe-end)); scroll-snap-align: center; scroll-snap-stop: always; }
  .ac-kanban__newcol { min-block-size: 16rem; }
  .ac-kanban-pager { display: flex; gap: var(--ac-s-1); margin-block-end: var(--ac-s-3); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--ac-content-pad) * -1); padding-inline: var(--ac-content-pad); }
  .ac-kanban-pager::-webkit-scrollbar { display: none; }
  .ac-kanban-pager .ac-chip { flex: none; }
  .ac-kanban-pager .ac-chip[aria-current="true"] { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-ink-contrast); }
}
.ac-kdetail { display: grid; gap: var(--ac-s-4); }
.ac-kdetail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--ac-s-3); }
.ac-kdetail__field { display: grid; gap: var(--ac-s-1); padding: var(--ac-s-3); border-radius: var(--ac-r-md); background: var(--ac-surface-2); font-size: var(--ac-fs-sm); }
.ac-kdetail__field > small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-kdetail__check { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 2.25rem; font-size: var(--ac-fs-sm); }
.ac-kdetail__check input:checked + span { color: var(--ac-muted); text-decoration: line-through; }

/* ---- split view / phone navigation stack ---------------------------------- */
[data-ac-flat] { transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; backdrop-filter: none !important; animation: none !important; will-change: auto !important; contain: none !important; }
.ac-split, .ac-card.ac-split { display: grid; grid-auto-flow: column; min-width: 0; }
.ac-split__pane { min-width: 0; min-block-size: 0; }
@media (max-width: 639.98px) {
  .ac-split[data-stacked] { display: block; }
  .ac-split[data-stacked] > .ac-split__pane--wide { display: none; }
  .ac-split[data-stacked] > .ac-split__pane { transition: transform 360ms var(--ac-ease-out), opacity 360ms var(--ac-ease-out), filter 360ms; }
  .ac-split[data-stacked]:not([data-ready]) > .ac-split__pane { transition: none; }
  .ac-split[data-stacked] > .ac-split__pane:not(:first-child) {
    position: fixed; inset: 0; z-index: calc(var(--ac-z-tabbar) + 1);
    display: flex; flex-direction: column; background: var(--ac-bg);
    padding: var(--ac-safe-top) var(--ac-safe-end) 0 var(--ac-safe-start);
    box-shadow: var(--ac-shadow-xl);
    transform: translateX(calc(100% * var(--ac-dir) + var(--ac-drag, 0px)));
  }
  .ac-split[data-stacked] > .ac-split__pane[data-pos="top"]:not(:first-child) { transform: translateX(var(--ac-drag, 0px)); }
  .ac-split[data-stacked] > .ac-split__pane[data-pos="under"] { transform: translateX(calc(-28% * var(--ac-dir) * (1 - var(--ac-split-progress, 0)))); filter: brightness(calc(0.94 + 0.06 * var(--ac-split-progress, 0))); }
  .ac-split[data-stacked] > .ac-split__pane[data-pos="next"] { visibility: hidden; transition: transform 360ms var(--ac-ease-out), visibility 0s 360ms; }
  .ac-split[data-dragging] > .ac-split__pane { transition: none; }
  .ac-split[data-stacked] > .ac-split__pane[data-parked] { display: none; }
  html[data-ac-stacked] .ac-tabbar { transform: translateY(calc(100% + 2rem)); }
}

/* ---- calendar ---------------------------------------------------------------- */
.ac-cal { overflow: hidden; }
.ac-cal__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ac-s-3); padding: var(--ac-card-pad) var(--ac-card-pad) var(--ac-s-4); }
.ac-cal__nav { display: flex; align-items: center; gap: var(--ac-s-2); min-width: 0; }
.ac-cal__title { font-size: var(--ac-fs-xl); font-weight: var(--ac-fw-semibold); letter-spacing: -0.01em; white-space: nowrap; margin-inline-start: var(--ac-s-1); }
.ac-cal__body { padding: 0 var(--ac-card-pad) var(--ac-card-pad); min-width: 0; }
.ac-cal__pane { animation: ac-cal-in var(--ac-dur-4) var(--ac-ease-out) both; }
.ac-cal__pane[data-dir="1"] { --_from: calc(18px * var(--ac-dir)); --_fy: 0px; }
.ac-cal__pane[data-dir="-1"] { --_from: calc(-18px * var(--ac-dir)); --_fy: 0px; }
@keyframes ac-cal-in { from { opacity: 0; transform: translate(var(--_from, 0px), var(--_fy, 6px)); } }
.ac-cal-month { display: grid; border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); overflow: hidden; }
.ac-cal-month__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--ac-surface-2); }
.ac-cal-month__dow span { padding: var(--ac-s-2); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); color: var(--ac-muted); text-align: center; }
.ac-cal-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(6.5rem, 1fr); }
.ac-cal-day { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: var(--ac-s-1) var(--ac-s-1) var(--ac-s-2); border-block-start: 1px solid var(--ac-border); border-inline-start: 1px solid var(--ac-border); cursor: pointer; transition: background var(--ac-dur-2) var(--ac-ease); }
.ac-cal-day:nth-child(7n + 1) { border-inline-start: 0; }
.ac-cal-day:hover { background: var(--ac-hover); }
.ac-cal-day[data-out] { background: color-mix(in oklab, var(--ac-surface-2) 60%, transparent); }
.ac-cal-day[data-out] .ac-cal-day__num { color: var(--ac-faint); }
.ac-cal-day__num { align-self: flex-start; display: grid; place-items: center; min-inline-size: 1.75rem; block-size: 1.75rem; padding-inline: 0.3rem; border-radius: var(--ac-r-pill); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); font-variant-numeric: tabular-nums; transition: background var(--ac-dur-2), color var(--ac-dur-2), transform var(--ac-dur-1); }
.ac-cal-day__num:hover { background: var(--ac-surface-3); }
.ac-cal-day__num:active { transform: scale(0.92); }
.ac-cal-day[aria-selected="true"] .ac-cal-day__num { box-shadow: inset 0 0 0 1.5px var(--ac-ink); }
.ac-cal-day[data-today] .ac-cal-day__num { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-cal-day__evs { display: grid; gap: 3px; min-width: 0; }
.ac-cal-day__dots { display: none; }
.ac-cal-ev { --_tone: var(--ac-accent); display: flex; align-items: center; gap: 0.3rem; min-width: 0; padding: 2px 0.4rem; border-radius: var(--ac-r-xs); border-inline-start: 2px solid var(--_tone); background: color-mix(in oklab, var(--_tone) 13%, var(--ac-surface-1)); color: color-mix(in oklab, var(--_tone) 75%, var(--ac-text)); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-medium); text-align: start; transition: transform var(--ac-dur-1) var(--ac-ease), filter var(--ac-dur-2); }
.ac-cal-ev:hover { filter: brightness(0.96); transform: translateY(-1px); }
.ac-cal-ev:active { transform: var(--ac-press); }
.ac-cal-ev__t { flex: none; opacity: 0.75; font-variant-numeric: tabular-nums; }
.ac-cal-more { align-self: flex-start; padding: 0 0.35rem; border-radius: var(--ac-r-xs); color: var(--ac-muted); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); }
.ac-cal-more:hover { background: var(--ac-surface-3); color: var(--ac-text); }
.ac-cal-dayview { display: none; }
.ac-cal-week { --_hour: 3rem; display: grid; border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); overflow: hidden; }
.ac-cal-week__head, .ac-cal-week__body { display: grid; grid-template-columns: 3.25rem repeat(7, minmax(4.5rem, 1fr)); }
.ac-cal-week__head { background: var(--ac-surface-2); border-block-end: 1px solid var(--ac-border); }
.ac-cal-week__day { display: grid; justify-items: center; gap: 1px; padding: var(--ac-s-2) 0; transition: background var(--ac-dur-2); }
.ac-cal-week__day:hover { background: var(--ac-hover); }
.ac-cal-week__day small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-cal-week__day b { display: grid; place-items: center; inline-size: 1.85rem; block-size: 1.85rem; border-radius: 50%; font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; }
.ac-cal-week__day[data-today] b { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-cal-week__body { max-block-size: 30rem; overflow-y: auto; scrollbar-width: none; }
.ac-cal-week__hours span { display: block; block-size: var(--_hour); padding-inline: var(--ac-s-2); color: var(--ac-faint); font-size: var(--ac-fs-2xs); text-align: end; translate: 0 -0.45rem; font-variant-numeric: tabular-nums; }
.ac-cal-week__hours span:first-child { translate: none; }
.ac-cal-week__col { position: relative; border-inline-start: 1px solid var(--ac-border); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--_hour) - 1px), var(--ac-border) calc(var(--_hour) - 1px) var(--_hour)); }
.ac-cal-week__col[data-today] { background-color: color-mix(in oklab, var(--ac-accent) 4%, transparent); }
.ac-cal-block { --_tone: var(--ac-accent); position: absolute; inset-inline: 3px; inset-block-start: calc(var(--_top) * var(--_hour) + 1px); block-size: max(1.5rem, calc(var(--_len) * var(--_hour) - 3px)); display: grid; align-content: start; gap: 1px; padding: 0.3rem 0.45rem; overflow: hidden; border-radius: var(--ac-r-sm); background: color-mix(in oklab, var(--_tone) 16%, var(--ac-surface-1)); border-inline-start: 3px solid var(--_tone); color: color-mix(in oklab, var(--_tone) 70%, var(--ac-text)); font-size: var(--ac-fs-2xs); text-align: start; transition: transform var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2); }
.ac-cal-block:hover { transform: translateY(-1px); box-shadow: var(--ac-shadow-md); z-index: 1; }
.ac-cal-block:active { transform: var(--ac-press); }
.ac-cal-block strong { font-size: var(--ac-fs-xs); }
.ac-cal-now { position: absolute; inset-inline: 0; inset-block-start: calc(var(--_top) * var(--_hour)); block-size: 2px; background: var(--ac-accent); z-index: 2; pointer-events: none; }
.ac-cal-now::before { content: ""; position: absolute; inset-inline-start: -5px; inset-block-start: -4px; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--ac-accent); }
.ac-cal-agenda { display: grid; gap: var(--ac-s-2); }
.ac-cal-agenda__day { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--ac-s-3); padding: var(--ac-s-3); border-radius: var(--ac-r-lg); background: var(--ac-surface-2); }
.ac-cal-agenda__date { display: grid; justify-items: center; align-content: start; gap: 2px; padding-block-start: var(--ac-s-1); }
.ac-cal-agenda__date b { font-size: var(--ac-fs-2xl); font-weight: var(--ac-fw-semibold); line-height: 1; font-variant-numeric: tabular-nums; }
.ac-cal-agenda__date small { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-cal-agenda__day.is-today .ac-cal-agenda__date b { color: var(--ac-accent-ink); }
.ac-cal-agenda__evs { display: grid; gap: var(--ac-s-2); min-width: 0; }
.ac-cal-agenda__label { font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-cal-agenda__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); margin-block: var(--ac-s-4) var(--ac-s-2); }
.ac-cal-agenda__list { display: grid; gap: var(--ac-s-2); list-style: none; margin: 0; padding: 0; }
.ac-cal-row { --_tone: var(--ac-accent); position: relative; display: flex; align-items: center; gap: var(--ac-s-3); inline-size: 100%; min-block-size: 3.25rem; padding: var(--ac-s-2) var(--ac-s-3); padding-inline-start: var(--ac-s-5); border-radius: var(--ac-r-md); background: var(--ac-surface-1); border: 1px solid var(--ac-border); text-align: start; transition: transform var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2), border-color var(--ac-dur-2); }
.ac-cal-row::before { content: ""; position: absolute; inset-inline-start: 0.5rem; inset-block: 0.6rem; inline-size: 3px; border-radius: 3px; background: var(--_tone); }
.ac-cal-row:hover { transform: translateY(-1px); box-shadow: var(--ac-shadow-md); border-color: var(--ac-border-strong); }
.ac-cal-row:active { transform: var(--ac-press); }
.ac-cal-row__time { display: grid; flex: none; inline-size: 3rem; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; }
.ac-cal-row__time small { color: var(--ac-muted); font-weight: var(--ac-fw-regular); font-size: var(--ac-fs-2xs); }
.ac-cal-row__main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ac-cal-row__main strong { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-cal-row__main small { display: inline-flex; align-items: center; gap: 3px; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-cal-row__main small .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; }
.ac-cal-row__chev { color: var(--ac-faint); flex: none; transition: translate var(--ac-dur-2) var(--ac-ease); }
.ac-cal-row:hover .ac-cal-row__chev { translate: calc(3px * var(--ac-dir)) 0; color: var(--ac-text); }
.ac-cal-empty { padding: var(--ac-s-6) var(--ac-s-3); color: var(--ac-muted); font-size: var(--ac-fs-sm); text-align: center; list-style: none; }
.ac-cal-side { align-content: start; }
@media (min-width: 640px) and (max-width: 1279.98px) { .ac-cal-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.ac-cal-next__label { display: inline-flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-xs); opacity: 0.85; }
.ac-cal-next__label .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-cal-next__title { font-size: var(--ac-fs-xl); font-weight: var(--ac-fw-semibold); line-height: var(--ac-lh-snug); }
.ac-cal-next__when { font-size: var(--ac-fs-sm); opacity: 0.9; }
.ac-cal-next__left { align-self: flex-start; padding: 2px 0.6rem; border-radius: var(--ac-r-pill); background: rgba(255, 255, 255, 0.22); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); }
.ac-cal-mini { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ac-cal-mini li { min-width: 0; }
.ac-cal-mini button { display: flex; align-items: center; gap: var(--ac-s-2); inline-size: 100%; min-block-size: 2.5rem; padding-inline: var(--ac-s-2); border-radius: var(--ac-r-sm); font-size: var(--ac-fs-sm); text-align: start; transition: background var(--ac-dur-2), transform var(--ac-dur-1); }
.ac-cal-mini button:hover { background: var(--ac-hover); }
.ac-cal-mini button:active { transform: var(--ac-press); }
.ac-cal-mini i, .ac-cal-cats i { inline-size: 0.55rem; block-size: 0.55rem; flex: none; border-radius: 50%; background: var(--_tone, var(--ac-accent)); }
.ac-cal-mini bdi { margin-inline-start: auto; color: var(--ac-muted); font-size: var(--ac-fs-xs); font-variant-numeric: tabular-nums; }
.ac-cal-cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ac-s-2) var(--ac-s-3); list-style: none; margin: 0; padding: 0; font-size: var(--ac-fs-sm); }
.ac-cal-cats li { display: flex; align-items: center; gap: var(--ac-s-2); }
.ac-cal-tones { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); border: 0; padding: 0; margin: 0; }
.ac-cal-tones legend { margin-block-end: var(--ac-s-2); }
.ac-cal-tones label { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--_tone); cursor: pointer; transition: transform var(--ac-dur-2) var(--ac-ease-spring), box-shadow var(--ac-dur-2); }
.ac-cal-tones label:hover { transform: scale(1.08); }
.ac-cal-tones label:active { transform: scale(0.94); }
.ac-cal-tones input { appearance: none; margin: 0; inline-size: 100%; block-size: 100%; border-radius: 50%; cursor: pointer; }
.ac-cal-tones input:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 3px; }
.ac-cal-tones label:has(input:checked) { box-shadow: 0 0 0 3px var(--ac-surface-1), 0 0 0 5px var(--_tone); }
.ac-cal-detail { --_tone: var(--ac-accent); display: flex; gap: var(--ac-s-3); padding: var(--ac-s-4); border-radius: var(--ac-r-md); background: color-mix(in oklab, var(--_tone) 9%, var(--ac-surface-2)); }
.ac-cal-detail > i { inline-size: 4px; border-radius: 4px; background: var(--_tone); flex: none; }
@media (max-width: 1023.98px) {
  .ac-cal-dayview { display: block; }
  .ac-cal-month__grid { grid-auto-rows: minmax(4.5rem, 1fr); }
}
@media (max-width: 639.98px) {
  .ac-cal__bar { padding: var(--ac-s-4) var(--ac-s-4) var(--ac-s-3); }
  .ac-cal__bar > .ac-segmented { flex: 1 1 100%; display: flex; }
  .ac-cal__bar > .ac-segmented > * { flex: 1 1 0; }
  .ac-cal__nav { flex: 1 1 100%; }
  .ac-cal__title { font-size: var(--ac-fs-lg); margin-inline: auto; }
  .ac-cal__body { padding: 0 var(--ac-s-3) var(--ac-s-4); }
  .ac-cal-month { border: 0; border-radius: 0; }
  .ac-cal-month__dow { background: none; }
  .ac-cal-month__grid { grid-auto-rows: 3.1rem; }
  .ac-cal-day { align-items: center; padding: 3px 0; border: 0; }
  .ac-cal-day:hover, .ac-cal-day[data-out] { background: none; }
  .ac-cal-day__num { min-inline-size: 2.25rem; block-size: 2.25rem; align-self: center; }
  .ac-cal-day__evs { display: none; }
  .ac-cal-day__dots { display: flex; gap: 2px; block-size: 5px; }
  .ac-cal-day__dots i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--_tone, var(--ac-accent)); }
  .ac-cal-day[aria-selected="true"]:not([data-today]) .ac-cal-day__num { background: var(--ac-surface-3); box-shadow: none; }
  .ac-cal-week { margin-inline: calc(var(--ac-s-3) * -1); border-radius: 0; border-inline: 0; overflow-x: auto; }
  .ac-cal-week__head, .ac-cal-week__body { min-inline-size: 36rem; }
  .ac-cal-agenda__day { grid-template-columns: 2.75rem 1fr; padding: var(--ac-s-2); gap: var(--ac-s-2); }
}

/* ---- file manager --------------------------------------------------------------- */
.ac-files-side { display: grid; gap: var(--ac-gap); align-content: start; }
@media (min-width: 640px) and (max-width: 1279.98px) { .ac-files-side { grid-template-columns: 1fr 1fr; } }
.ac-files-usage { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--ac-s-4); }
.ac-files-usage .ac-ring { inline-size: 7rem; }
.ac-files-usage .ac-ring__label small { display: block; font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-regular); color: var(--ac-muted); }
.ac-files-usage > p { grid-column: 1 / -1; margin: 0; }
.ac-files-usage__list { display: grid; gap: var(--ac-s-2); list-style: none; margin: 0; padding: 0; font-size: var(--ac-fs-sm); }
.ac-files-usage__list li { display: flex; align-items: center; gap: var(--ac-s-2); }
.ac-files-usage__list i { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--_tone); flex: none; }
.ac-files-usage__list bdi { margin-inline-start: auto; color: var(--ac-muted); font-size: var(--ac-fs-xs); font-variant-numeric: tabular-nums; }
.ac-files { position: relative; overflow: hidden; }
.ac-files__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ac-s-3); padding: var(--ac-card-pad) var(--ac-card-pad) var(--ac-s-2); }
.ac-files__tools { display: flex; align-items: center; gap: var(--ac-s-2); }
.ac-files__body { display: grid; gap: var(--ac-s-5); padding: var(--ac-s-2) var(--ac-card-pad) var(--ac-card-pad); min-block-size: 20rem; }
.ac-files__sec { display: grid; gap: var(--ac-s-3); }
.ac-files__h { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); color: var(--ac-text-soft); }
.ac-files__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--ac-s-3); }
[data-view="list"] .ac-files__grid { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); overflow: hidden; }
.ac-file { position: relative; min-width: 0; }
.ac-file__main { display: grid; justify-items: start; gap: var(--ac-s-1); inline-size: 100%; padding: var(--ac-s-3); border-radius: var(--ac-r-lg); background: var(--ac-surface-2); border: 1px solid transparent; text-align: start; transition: transform var(--ac-dur-3) var(--ac-ease), box-shadow var(--ac-dur-3) var(--ac-ease), background var(--ac-dur-2), border-color var(--ac-dur-2); }
.ac-file__main:hover { background: var(--ac-surface-1); border-color: var(--ac-border); box-shadow: var(--ac-shadow-md); transform: translateY(-3px); }
.ac-file__main:active, .ac-file__main[data-pressed] { transform: var(--ac-press); }
.ac-file__main:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 2px; }
.ac-file__main[data-new] { animation: ac-file-in 480ms var(--ac-ease-spring) both; }
@keyframes ac-file-in { from { opacity: 0; transform: scale(0.85); } }
.ac-file__thumb { --_tone: var(--ac-muted); display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-block-end: var(--ac-s-2); border-radius: var(--ac-r-md); background: color-mix(in oklab, var(--_tone) 14%, var(--ac-surface-1)); color: color-mix(in oklab, var(--_tone) 80%, var(--ac-text)); }
.ac-file__thumb[data-kind="folder"] { background: color-mix(in oklab, var(--ac-warning) 22%, var(--ac-surface-1)); color: color-mix(in oklab, var(--ac-warning) 85%, var(--ac-text)); }
.ac-file__thumb[data-kind="image"] { background: linear-gradient(135deg, color-mix(in oklab, var(--ac-info) 55%, var(--ac-surface-1)), color-mix(in oklab, var(--ac-accent) 45%, var(--ac-surface-1))); color: #fff; }
.ac-file__thumb .ac-icon { inline-size: 1.35rem; block-size: 1.35rem; }
.ac-file__name { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-file__meta, .ac-file__date { color: var(--ac-muted); font-size: var(--ac-fs-2xs); font-variant-numeric: tabular-nums; }
.ac-file__date { display: none; }
.ac-file__more { position: absolute; inset-block-start: var(--ac-s-2); inset-inline-end: var(--ac-s-1); display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; color: var(--ac-muted); transition: background var(--ac-dur-2), color var(--ac-dur-2), transform var(--ac-dur-1); }
.ac-file__more:hover { background: var(--ac-surface-3); color: var(--ac-text); }
.ac-file__more:active { transform: scale(0.9); }
.ac-file--row .ac-file__main { grid-template-columns: auto minmax(0, 1fr) 8rem 5.5rem; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2) var(--ac-s-4); padding-inline-end: 3rem; border-radius: 0; background: var(--ac-surface-1); }
.ac-file--row + .ac-file--row .ac-file__main { border-block-start-color: var(--ac-border); }
.ac-file--row .ac-file__main:hover { transform: none; box-shadow: none; background: var(--ac-hover); border-color: transparent; }
.ac-file--row + .ac-file--row .ac-file__main:hover { border-block-start-color: var(--ac-border); }
.ac-file--row .ac-file__thumb { inline-size: 2.25rem; block-size: 2.25rem; margin: 0; border-radius: var(--ac-r-sm); }
.ac-file--row .ac-file__thumb .ac-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.ac-file--row .ac-file__date { display: block; }
.ac-file--row .ac-file__meta { text-align: end; }
.ac-file--row .ac-file__more { inset-block-start: 50%; translate: 0 -50%; }
.ac-files__drop { position: absolute; inset: var(--ac-s-2); z-index: 3; display: grid; place-items: center; align-content: center; gap: var(--ac-s-2); border: 2px dashed var(--ac-accent); border-radius: var(--ac-r-lg); background: color-mix(in oklab, var(--ac-accent) 8%, color-mix(in oklab, var(--ac-surface-1) 85%, transparent)); color: var(--ac-accent-ink); pointer-events: none; opacity: 0; scale: 0.98; transition: opacity var(--ac-dur-2), scale var(--ac-dur-3) var(--ac-ease-spring); backdrop-filter: blur(4px); }
.ac-files[data-drop] .ac-files__drop { opacity: 1; scale: 1; }
.ac-files-preview { display: grid; gap: var(--ac-s-4); }
.ac-files-preview__art { display: grid; place-items: center; block-size: 11rem; border-radius: var(--ac-r-lg); background: var(--ac-surface-2); }
.ac-files-preview__art .ac-file__thumb { inline-size: 5rem; block-size: 5rem; margin: 0; border-radius: var(--ac-r-lg); }
.ac-files-preview__art .ac-file__thumb .ac-icon { inline-size: 2.25rem; block-size: 2.25rem; }
@media (max-width: 639.98px) {
  .ac-files__bar { padding: var(--ac-s-4) var(--ac-s-4) var(--ac-s-2); }
  .ac-files__tools { flex: 1 1 100%; }
  .ac-files__tools .ac-searchpill { flex: 1; inline-size: auto; }
  .ac-files__body { padding: var(--ac-s-2) var(--ac-s-4) var(--ac-s-4); }
  .ac-files__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ac-s-2); }
  .ac-file--row .ac-file__main { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: var(--ac-s-3) 2.75rem; }
  .ac-file--row .ac-file__date { display: none; }
}

/* ---- pricing ---------------------------------------------------------------------- */
.ac-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ac-gap); align-items: stretch; }
.ac-plan { position: relative; display: flex; flex-direction: column; gap: var(--ac-s-5); padding: var(--ac-s-6); background: var(--ac-surface-1); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); transition: transform var(--ac-dur-4) var(--ac-ease-out), box-shadow var(--ac-dur-4) var(--ac-ease); }
@media (hover: hover) { .ac-plan:hover { transform: var(--ac-lift); box-shadow: var(--ac-shadow-lg); } }
.ac-plan--featured { background: var(--ac-ink); border-color: transparent; color: var(--ac-ink-contrast); box-shadow: var(--ac-shadow-lg); }
.ac-plan__ribbon { position: absolute; inset-block-start: var(--ac-s-5); inset-inline-end: var(--ac-s-5); padding: 3px 0.7rem; border-radius: var(--ac-r-pill); background: var(--ac-gradient); color: var(--ac-accent-contrast); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-bold); }
.ac-plan__head { display: grid; gap: var(--ac-s-2); }
.ac-plan__icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--ac-r-md); background: var(--ac-surface-2); color: var(--ac-text); }
.ac-plan--featured .ac-plan__icon { background: color-mix(in oklab, var(--ac-ink-contrast) 12%, transparent); color: inherit; }
.ac-plan__name { font-size: var(--ac-fs-xl); font-weight: var(--ac-fw-semibold); color: inherit; }
.ac-plan__desc { color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-plan--featured .ac-plan__desc, .ac-plan--featured .ac-plan__per { color: color-mix(in oklab, var(--ac-ink-contrast) 65%, transparent); }
.ac-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ac-s-2); min-block-size: 3.25rem; }
.ac-plan__amount { display: inline-block; font-size: 2.75rem; font-weight: var(--ac-fw-semibold); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ac-plan__per { color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-plan__was { color: var(--ac-faint); font-size: var(--ac-fs-sm); }
.ac-plan__was:not([hidden]) { animation: ac-pop var(--ac-dur-4) var(--ac-ease-spring) both; }
.ac-plan__features { display: grid; gap: var(--ac-s-3); list-style: none; margin: 0; padding: var(--ac-s-5) 0 0; border-block-start: 1px solid var(--ac-border); font-size: var(--ac-fs-sm); }
.ac-plan--featured .ac-plan__features { border-color: color-mix(in oklab, var(--ac-ink-contrast) 14%, transparent); }
.ac-plan__features li { display: flex; align-items: center; gap: var(--ac-s-3); }
.ac-plan__features .ac-icon { box-sizing: content-box; inline-size: 0.8rem; block-size: 0.8rem; padding: 0.25rem; border-radius: 50%; background: var(--ac-success-soft); color: var(--ac-success-ink); flex: none; }
.ac-plan--featured .ac-plan__features .ac-icon { background: var(--ac-accent); color: var(--ac-accent-contrast); }
.ac-plan__features li[data-off] { color: var(--ac-faint); }
.ac-plan__features li[data-off] .ac-icon { background: var(--ac-surface-3); color: var(--ac-faint); }
.ac-plan .ac-btn--block { min-block-size: 2.875rem; }
.ac-pricing__save { margin-inline-start: var(--ac-s-1); padding: 1px 0.4rem; border-radius: var(--ac-r-pill); background: var(--ac-accent); color: var(--ac-accent-contrast); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-bold); }
.ac-pricing-more { margin-block-start: var(--ac-gap); }
.ac-pricing__table th:not(:first-child), .ac-pricing__table td:not(:first-child) { text-align: center; }
.ac-pricing__table th:nth-child(3) { color: var(--ac-accent-ink); }
.ac-pricing__yes, .ac-pricing__no { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--ac-success-soft); color: var(--ac-success-ink); }
.ac-pricing__no { background: var(--ac-surface-2); color: var(--ac-faint); }
.ac-pricing__yes .ac-icon, .ac-pricing__no .ac-icon { inline-size: 0.85rem; block-size: 0.85rem; }
.ac-pricing__help .ac-plan__icon { background: var(--ac-accent-soft); color: var(--ac-accent-ink); }
@media (max-width: 1023.98px) { .ac-pricing { grid-template-columns: 1fr; max-inline-size: 30rem; margin-inline: auto; } .ac-plan--featured { order: -1; } }

/* ---- FAQ --------------------------------------------------------------------------- */
.ac-faq-hero { display: grid; gap: var(--ac-s-3); margin-block-end: var(--ac-gap); }
.ac-faq-hero .ac-faq-search { min-block-size: 3.25rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-1); padding-inline: var(--ac-s-2); }
.ac-faq-search .ac-input { font-size: var(--ac-fs-lg); }
.ac-faq-cats { display: flex; gap: var(--ac-s-2); overflow-x: auto; scrollbar-width: none; }
.ac-faq-cats .ac-chip { flex: none; gap: var(--ac-s-2); block-size: 2.25rem; }
.ac-faq-cats .ac-chip .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-faq-cats .ac-chip[aria-pressed="true"] { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-faq { border: 0; border-radius: var(--ac-r-xl); background: none; }
.ac-faq .ac-accordion__item[hidden] { display: none; }
.ac-faq .ac-accordion__head { min-block-size: 3.5rem; }
.ac-faq .ac-accordion__body { color: var(--ac-text-soft); line-height: var(--ac-lh-normal); }
.ac-faq-empty[hidden], .ac-faq[hidden] { display: none; }
.ac-faq mark { padding: 0 2px; border-radius: 4px; background: var(--ac-accent-soft); color: var(--ac-accent-ink); }
.ac-faq-side .ac-stat__icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.ac-card .ac-faq-cta { align-self: flex-start; background: #fff; color: #111; }
.ac-card .ac-faq-cta:hover { background: rgba(255, 255, 255, 0.88); }
.ac-faq-link { border-radius: var(--ac-r-md); transition: background var(--ac-dur-2); }
.ac-faq-link:hover { background: var(--ac-hover); }
.ac-faq-link:hover > .ac-icon:last-child { translate: calc(3px * var(--ac-dir)) 0; }
.ac-faq-link > .ac-icon:last-child { transition: translate var(--ac-dur-2) var(--ac-ease); }

/* ---- activity timeline ------------------------------------------------------------- */
.ac-activity__day { position: sticky; inset-block-start: calc(var(--ac-appbar-h, 4rem) + var(--ac-safe-top)); z-index: 1; margin-block: var(--ac-s-4) var(--ac-s-3); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); color: var(--ac-muted); }
.ac-activity__day:first-child { margin-block-start: 0; }
.ac-activity__day span { display: inline-block; padding: 3px 0.75rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-2); border: 1px solid var(--ac-border); }
.ac-activity__list { list-style: none; margin: 0; padding: 0; display: grid; }
.ac-activity__item { --_tone: var(--ac-muted); position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--ac-s-3); padding-block-end: var(--ac-s-5); }
.ac-activity__item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: calc(1.125rem - 1px); inset-block: 2.5rem 0.25rem; inline-size: 2px; border-radius: 2px; background: var(--ac-border); }
.ac-activity__item.is-new { animation: ac-fade-up var(--ac-dur-4) var(--ac-ease-out) both; }
.ac-activity__node { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: color-mix(in oklab, var(--_tone) 14%, var(--ac-surface-1)); color: color-mix(in oklab, var(--_tone) 80%, var(--ac-text)); box-shadow: 0 0 0 4px var(--ac-surface-1); transition: transform var(--ac-dur-3) var(--ac-ease-spring); }
.ac-activity__item:hover .ac-activity__node { transform: scale(1.1); }
.ac-activity__node .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-activity__body { display: grid; gap: var(--ac-s-1); min-width: 0; padding-block-start: 0.3rem; }
.ac-activity__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-1) var(--ac-s-2); margin: 0; font-size: var(--ac-fs-sm); color: var(--ac-text-soft); }
.ac-activity__title strong { color: var(--ac-text); font-weight: var(--ac-fw-semibold); }
.ac-activity__text { margin: 0; padding: var(--ac-s-2) var(--ac-s-3); border-radius: var(--ac-r-md); background: var(--ac-surface-2); color: var(--ac-text-soft); font-size: var(--ac-fs-sm); }
.ac-activity__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2); color: var(--ac-faint); font-size: var(--ac-fs-2xs); font-variant-numeric: tabular-nums; }
.ac-activity__more { display: flex; justify-content: center; padding-block-start: var(--ac-s-2); }


/* ==== css/components/button.css ==== */
/* ==========================================================================
   Buttons — pills. primary = ink (black; white in dark), default = gray pill
   .ac-btn + --primary | --secondary (default) | --outline | --accent | --gradient | --ghost | --soft | --danger | --danger-soft | --link
   sizes: --sm | --lg   shape: --icon (circle) | --square | --block
   loading: aria-busy="true" (spinner, label kept for width)
   group: <div class="ac-btn-group" role="group">…</div>
   ========================================================================== */

.ac-btn {
  --_bg: var(--ac-pill-bg);
  --_fg: var(--ac-text);
  --_bd: transparent;
  --_bg-hover: var(--ac-pill-bg-hover);
  --_shadow: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ac-s-2);
  min-block-size: var(--ac-control-h);
  padding-inline: var(--ac-control-px);
  border: 1px solid var(--_bd);
  border-radius: var(--ac-r-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--_shadow);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--ac-dur-1) var(--ac-ease),
    border-color var(--ac-dur-1) var(--ac-ease),
    color var(--ac-dur-1) var(--ac-ease),
    box-shadow var(--ac-dur-2) var(--ac-ease),
    transform var(--ac-dur-2) var(--ac-ease);
}
.ac-btn:hover { background: var(--_bg-hover); }
.ac-btn:active:not(:disabled, [aria-disabled="true"]) { transform: var(--ac-press); }
.ac-btn:focus-visible { outline: none; box-shadow: var(--_shadow), var(--ac-focus); }
.ac-btn:disabled, .ac-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; box-shadow: none; }
.ac-btn .ac-icon { inline-size: 1.1em; block-size: 1.1em; margin-inline: -0.1em; }
@media (pointer: coarse) { .ac-btn { min-block-size: max(var(--ac-control-h), 2.75rem); } }

/* primary = black ink pill (white in dark mode) */
.ac-btn--primary {
  --_bg: var(--ac-ink);
  --_fg: var(--ac-ink-contrast);
  --_bd: transparent;
  --_bg-hover: var(--ac-ink-hover);
  --_shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.ac-btn--primary:hover { box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.55); transform: translateY(-1px); }
/* accent CTA (orange gradient) — use sparingly */
.ac-btn--gradient, .ac-btn--accent {
  --_bg: var(--ac-accent);
  --_fg: var(--ac-accent-contrast);
  --_bd: transparent;
  --_bg-hover: var(--ac-accent-hover);
  --_shadow: var(--ac-shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ac-btn--gradient { background-image: var(--ac-gradient); }
.ac-btn--gradient:hover { filter: brightness(1.05) saturate(1.05); }
/* secondary = light gray pill (the default look) ; --outline = white pill with hairline */
.ac-btn--secondary { /* default look */ }
.ac-btn--outline { --_bg: var(--ac-surface-1); --_bd: var(--ac-border-strong); --_bg-hover: var(--ac-surface-2); }
.ac-btn--ghost {
  --_bg: transparent;
  --_bd: transparent;
  --_bg-hover: var(--ac-hover);
  --_shadow: none;
  --_fg: var(--ac-text-soft);
}
.ac-btn--ghost:hover { color: var(--ac-text); }
.ac-btn--soft {
  --_bg: var(--ac-accent-soft);
  --_fg: var(--ac-accent-ink);
  --_bd: transparent;
  --_bg-hover: var(--ac-accent-soft-2);
  --_shadow: none;
}
.ac-btn--danger {
  --_bg: var(--ac-danger);
  --_fg: #fff;
  --_bd: transparent;
  --_bg-hover: color-mix(in oklab, var(--ac-danger) 88%, #000);
  --_shadow: 0 1px 2px color-mix(in oklab, var(--ac-danger) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ac-btn--danger-soft {
  --_bg: var(--ac-danger-soft);
  --_fg: var(--ac-danger-ink);
  --_bd: transparent;
  --_bg-hover: color-mix(in oklab, var(--ac-danger) 18%, transparent);
  --_shadow: none;
}
.ac-btn--link {
  --_bg: transparent;
  --_bg-hover: transparent;
  --_bd: transparent;
  --_shadow: none;
  --_fg: var(--ac-accent-ink);
  min-block-size: auto;
  padding-inline: 0;
  overflow: visible;
}
.ac-btn--link:hover { text-decoration: underline; text-underline-offset: 3px; }

.ac-btn--sm { min-block-size: var(--ac-control-h-sm); padding-inline: calc(var(--ac-control-px) * 0.75); font-size: var(--ac-fs-sm); gap: var(--ac-s-1); }
.ac-btn--lg { min-block-size: var(--ac-control-h-lg); padding-inline: calc(var(--ac-control-px) * 1.4); font-size: var(--ac-fs-lg); }
.ac-btn--icon { padding-inline: 0; inline-size: var(--ac-control-h); flex: none; overflow: visible; border-radius: 50%; }
.ac-btn--icon.ac-btn--sm { inline-size: var(--ac-control-h-sm); }
.ac-btn--icon.ac-btn--lg { inline-size: var(--ac-control-h-lg); }
.ac-btn--icon .ac-icon { inline-size: 1.2rem; block-size: 1.2rem; margin: 0; }
@media (pointer: coarse) { .ac-btn--icon { inline-size: max(var(--ac-control-h), 2.75rem); } }
.ac-btn--pill { border-radius: var(--ac-r-pill); }
.ac-btn--square { border-radius: var(--ac-r-md); }
.ac-btn--block { display: flex; inline-size: 100%; }

/* loading */
.ac-btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.ac-btn[aria-busy="true"] > * { visibility: hidden; }
.ac-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  border-radius: 50%;
  border: 2px solid var(--_fg);
  border-inline-end-color: transparent;
  animation: ac-spin 0.7s linear infinite;
}

/* group */
.ac-btn-group { display: inline-flex; isolation: isolate; }
.ac-btn-group > .ac-btn { border-radius: 0; }
.ac-btn-group > .ac-btn:not(:first-child) { margin-inline-start: -1px; }
.ac-btn-group > .ac-btn:first-child { border-start-start-radius: var(--ac-r-pill); border-end-start-radius: var(--ac-r-pill); }
.ac-btn-group > .ac-btn:last-child { border-start-end-radius: var(--ac-r-pill); border-end-end-radius: var(--ac-r-pill); }
.ac-btn-group > .ac-btn:hover, .ac-btn-group > .ac-btn:focus-visible { z-index: 1; }
.ac-btn-group > .ac-btn:not(:first-child) { border-inline-start: 1px solid var(--ac-border); }
.ac-btn-group > .ac-btn--primary + .ac-btn--primary { border-inline-start: 1px solid color-mix(in oklab, var(--ac-ink-contrast) 22%, transparent); }

/* ripple (added by press.js on [data-ac="ripple"] or .ac-btn when AC.press.ripple=true) */
.ac-ripple {
  position: absolute;
  z-index: -1;
  inline-size: var(--ac-ripple-size, 100px);
  block-size: var(--ac-ripple-size, 100px);
  left: var(--ac-ripple-x, 0); /* rtl-ok: JS-measured pointer position */
  top: var(--ac-ripple-y, 0);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.16;
  transform: translate(-50%, -50%) scale(0);
  animation: ac-ripple 520ms var(--ac-ease-out) forwards;
  pointer-events: none;
}
@keyframes ac-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* generic press feedback for any element: class="ac-pressable" */
.ac-pressable { transition: transform var(--ac-dur-1) var(--ac-ease); cursor: pointer; }
.ac-pressable:active { transform: var(--ac-press); }
.ac-ripple-host { position: relative; overflow: hidden; }
.ac-card--interactive, .ac-tabbar__item { overflow: hidden; }

/* search field pill (card headers, toolbars): <label class="ac-searchpill"><svg class="ac-icon"/><input type="search" placeholder="…"></label> */
.ac-searchpill {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-s-2);
  min-block-size: var(--ac-control-h-sm);
  inline-size: clamp(9rem, 22vw, 15rem);
  padding-inline: var(--ac-s-3);
  border-radius: var(--ac-r-pill);
  border: 1px solid var(--ac-border);
  background: var(--ac-surface-1);
  color: var(--ac-muted);
  transition: border-color var(--ac-dur-1), box-shadow var(--ac-dur-2);
}
.ac-searchpill:focus-within { border-color: var(--ac-border-strong); box-shadow: var(--ac-focus); }
.ac-searchpill .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-searchpill input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: var(--ac-fs-sm); color: var(--ac-text); }
.ac-searchpill input::-webkit-search-cancel-button { display: none; }


/* ==== css/components/card.css ==== */
/* ==========================================================================
   Cards, stat tiles, bento tiles
   .ac-card [--flat | --glass | --interactive | --aurora | --accent | --inset]
     .ac-card__head > .ac-card__titles(.ac-card__title + .ac-card__sub) + .ac-card__actions
     .ac-card__body | .ac-card__media | .ac-card__foot
   .ac-stat  (stat tile; combine with .ac-card)
   ========================================================================== */

.ac-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ac-surface-1);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-r-xl);
  box-shadow: var(--ac-shadow-xs);
  transition: box-shadow var(--ac-dur-4) var(--ac-ease), transform var(--ac-dur-4) var(--ac-ease-out), border-color var(--ac-dur-2);
}
/* framer-style hover lift for dashboard tiles: bento children and .ac-card--lift (opt out: .ac-card--static) */
@media (hover: hover) {
  :is(.ac-bento > .ac-card, .ac-card--lift):not(.ac-card--static):hover { transform: var(--ac-lift); box-shadow: var(--ac-shadow-lg); }
}
.ac-card--pad, .ac-card > .ac-card__body { padding: var(--ac-card-pad); }
.ac-card--pad > .ac-card__body { padding: 0; }
.ac-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ac-s-3);
  padding: var(--ac-card-pad) var(--ac-card-pad) 0;
  min-width: 0;
}
.ac-card__head + .ac-card__body { padding-block-start: var(--ac-s-4); }
.ac-card__head--divided { padding-block-end: var(--ac-s-4); border-block-end: 1px solid var(--ac-border); }
.ac-card__head--divided + .ac-card__body { padding-block-start: var(--ac-card-pad); }
.ac-card__titles { display: grid; gap: 2px; min-width: 0; }
.ac-card__title { font-size: var(--ac-fs-lg); font-weight: var(--ac-fw-semibold); line-height: 1.35; letter-spacing: -0.01em; }
.ac-card__sub { font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-card__actions { display: flex; align-items: center; gap: var(--ac-s-1); flex: none; margin-block: -0.25rem; }
.ac-card__body { flex: 1 1 auto; min-width: 0; }
.ac-card__body--flush { padding: 0 !important; }
.ac-card__media { overflow: hidden; border-radius: var(--ac-r-xl) var(--ac-r-xl) 0 0; }
.ac-card__media img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ac-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-s-3);
  padding: var(--ac-s-3) var(--ac-card-pad);
  border-block-start: 1px solid var(--ac-border);
  font-size: var(--ac-fs-sm);
  color: var(--ac-muted);
}

.ac-card--flat { box-shadow: none !important; background: var(--ac-surface-2); }
.ac-card--inset { box-shadow: none !important; background: var(--ac-bg-subtle); border-color: transparent; }
.ac-card--glass {
  background: var(--ac-glass-bg);
  -webkit-backdrop-filter: var(--ac-glass-blur);
  backdrop-filter: var(--ac-glass-blur);
  border-color: var(--ac-glass-border);
}
.ac-card--interactive { cursor: pointer; }
.ac-card--interactive:hover { border-color: var(--ac-border-strong); box-shadow: var(--ac-shadow-md); transform: translateY(-1px); }
.ac-card--interactive:active { transform: var(--ac-press); box-shadow: var(--ac-shadow-xs); }
.ac-card--aurora { overflow: hidden; isolation: isolate; }
.ac-card--aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ac-aurora);
  opacity: 0.9;
  pointer-events: none;
}
.ac-card--accent {
  background: var(--ac-gradient);
  color: var(--ac-accent-contrast);
  border-color: transparent;
  box-shadow: 0 14px 30px -16px color-mix(in oklab, var(--ac-accent) 80%, transparent);
  overflow: hidden;
  isolation: isolate;
}
.ac-card--accent::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(120, 20, 0, 0.18), transparent 70%);
  pointer-events: none;
}
.ac-card--accent :is(.ac-card__sub, .ac-stat__label, .ac-stat__foot) { color: rgba(255, 255, 255, 0.82); }


/* ---- stat tile --------------------------------------------------------------- */
.ac-stat {
  display: grid;
  gap: var(--ac-s-2);
  padding: var(--ac-card-pad);
  overflow: hidden;
  isolation: isolate;
  align-content: start;
}
.ac-stat__head { display: flex; align-items: center; gap: var(--ac-s-2); min-width: 0; }
.ac-stat__label { flex: 1 1 auto; min-width: 0; font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); color: var(--ac-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-stat__icon {
  --_tone: var(--ac-text-soft);
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  border-radius: 50%;
  color: var(--_tone);
  background: var(--ac-surface-1);
  box-shadow: inset 0 0 0 1px var(--ac-border);
}
.ac-stat__icon[data-tone] { background: color-mix(in oklab, var(--_tone) 12%, transparent); box-shadow: none; }
.ac-card--accent .ac-stat__icon { background: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: none; }
.ac-stat__icon .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-stat__value {
  display: flex;
  align-items: baseline;
  gap: var(--ac-s-2);
  font-size: clamp(var(--ac-fs-2xl), 2.2vw, var(--ac-fs-3xl));
  font-weight: var(--ac-fw-semibold);
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 0;
}
.ac-stat__unit { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); color: var(--ac-muted); letter-spacing: 0; }
.ac-stat__foot { display: flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-xs); color: var(--ac-muted); min-width: 0; flex-wrap: wrap; }
/* sparkline slot — a chart teammate renders into it; height reserved here */
.ac-stat__spark { block-size: 2.75rem; margin-inline: calc(var(--ac-card-pad) * -1); margin-block-end: calc(var(--ac-card-pad) * -1); margin-block-start: var(--ac-s-1); }
.ac-stat--compact .ac-stat__value { font-size: var(--ac-fs-2xl); }

/* trend chip: <span class="ac-trend" data-trend="up|down|flat">12.4%</span> */
.ac-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px 2px 5px;
  border-radius: var(--ac-r-pill);
  font-size: var(--ac-fs-2xs);
  font-weight: var(--ac-fw-semibold);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  background: var(--ac-neutral-soft);
  color: var(--ac-neutral-ink);
}
.ac-trend::before {
  content: "";
  inline-size: 0.8rem;
  block-size: 0.8rem;
  background: currentColor;
  -webkit-mask: var(--_arrow) center / contain no-repeat;
  mask: var(--_arrow) center / contain no-repeat;
}
.ac-trend[data-trend="up"] { background: var(--ac-success-soft); color: var(--ac-success-ink); --_arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.ac-trend[data-trend="down"] { background: var(--ac-danger-soft); color: var(--ac-danger-ink); --_arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 8v9H8'/%3E%3C/svg%3E"); }
.ac-trend[data-trend="flat"] { --_arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.ac-card--accent .ac-trend, .ac-kpi--accent .ac-trend { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ---- hero card (welcome banner) ------------------------------------------------- */
.ac-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ac-s-4);
  padding: clamp(var(--ac-s-5), 3vw, var(--ac-s-8));
}
.ac-hero__title { font-size: clamp(var(--ac-fs-xl), 2.4vw, var(--ac-fs-3xl)); font-weight: var(--ac-fw-semibold); letter-spacing: -0.02em; line-height: 1.2; }
.ac-hero__text { color: var(--ac-text-soft); max-inline-size: 52ch; margin-block-start: var(--ac-s-2); }

/* ---- feature/bento tile with big icon ----------------------------------------- */
.ac-tile {
  display: grid;
  gap: var(--ac-s-3);
  align-content: start;
  padding: var(--ac-card-pad);
}
.ac-tile__icon {
  --_tone: var(--ac-accent);
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  color: var(--_tone);
  background: color-mix(in oklab, var(--_tone) 12%, transparent);
}
.ac-tile__title { font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-lg); }
.ac-tile__text { color: var(--ac-text-soft); font-size: var(--ac-fs-sm); }

/* ---- chart slot sizes (a chart teammate renders into [data-ac="chart"]) ------ */
.ac-chart-slot { position: relative; inline-size: 100%; block-size: var(--ac-chart-h, 16rem); min-width: 0; }
.ac-chart-slot--sm { --ac-chart-h: 10rem; }
.ac-chart-slot--lg { --ac-chart-h: 20rem; }
.ac-chart-slot--square { block-size: auto; aspect-ratio: 1; max-block-size: 15rem; margin-inline: auto; }
.ac-chart-slot:empty {
  border-radius: var(--ac-r-lg);
  background:
    linear-gradient(var(--ac-chart-grid) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, var(--ac-accent-soft), transparent);
}
.ac-chart-slot--square:empty { border-radius: 50%; background: conic-gradient(var(--ac-chart-1) 0 42%, var(--ac-chart-2) 0 70%, var(--ac-chart-3) 0 88%, var(--ac-chart-4) 0); -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%); mask: radial-gradient(circle, transparent 55%, #000 56%); opacity: 0.85; }
.ac-stat__spark:empty { background: linear-gradient(180deg, var(--ac-accent-soft), transparent); }

/* legend rows (used by dashboard + charts) */
.ac-legend { display: grid; gap: var(--ac-s-2); }
.ac-legend__item { display: flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-sm); min-width: 0; }
.ac-legend__swatch { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; flex: none; background: var(--_c, var(--ac-chart-1)); }
.ac-legend__item:nth-child(2) .ac-legend__swatch { --_c: var(--ac-chart-2); }
.ac-legend__item:nth-child(3) .ac-legend__swatch { --_c: var(--ac-chart-3); }
.ac-legend__item:nth-child(4) .ac-legend__swatch { --_c: var(--ac-chart-4); }
.ac-legend__item:nth-child(5) .ac-legend__swatch { --_c: var(--ac-chart-5); }
.ac-legend__value { margin-inline-start: auto; font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; }
.ac-legend--inline { display: flex; flex-wrap: wrap; gap: var(--ac-s-1) var(--ac-s-4); }
.ac-legend--inline .ac-legend__item { font-size: var(--ac-fs-xs); color: var(--ac-text-soft); }

/* ---- inset panel: light-gray rounded area inside a card (wallets, chart well, limits) ---- */
/* <div class="ac-inset"><div class="ac-inset__head">…</div>…</div> */
.ac-inset {
  display: grid;
  gap: var(--ac-s-3);
  min-width: 0;
  padding: var(--ac-s-4);
  border-radius: var(--ac-r-lg);
  background: var(--ac-surface-2);
}
.ac-inset__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); min-width: 0; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-inset__head small { font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-regular); color: var(--ac-muted); }

/* small label in a card corner + big figure */
.ac-label { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); color: var(--ac-text-soft); }
.ac-figure { font-size: clamp(1.625rem, 2.3vw, 2rem); font-weight: var(--ac-fw-semibold); letter-spacing: -0.035em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- KPI tile: tiles inside one card (2×2 cluster); one may be filled with the accent ---- */
/* <div class="ac-kpis"><div class="ac-kpi [ac-kpi--accent]"><div class="ac-kpi__head"><span class="ac-kpi__label">…</span><span class="ac-stat__icon">svg</span></div>
     <div class="ac-kpi__value">$610</div><div class="ac-kpi__foot"><span class="ac-trend" data-trend="up">7%</span>This month</div></div></div> */
.ac-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ac-s-3); block-size: 100%; }
.ac-kpi {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--ac-s-2);
  min-width: 0;
  min-block-size: 8.5rem;
  padding: var(--ac-s-4);
  border-radius: var(--ac-r-lg);
  background: var(--ac-surface-2);
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--ac-dur-4) var(--ac-ease-out), box-shadow var(--ac-dur-4) var(--ac-ease);
}
@media (hover: hover) { .ac-kpi:hover { transform: var(--ac-lift); box-shadow: var(--ac-shadow-md); } }
.ac-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); min-width: 0; }
.ac-kpi__label { font-size: var(--ac-fs-xs); color: var(--ac-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ac-kpi__value { align-self: center; font-size: clamp(1.375rem, 1.9vw, 1.75rem); font-weight: var(--ac-fw-semibold); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-kpi__foot { display: flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-2xs); color: var(--ac-muted); min-width: 0; white-space: nowrap; }
.ac-kpi--accent { background: var(--ac-gradient); color: var(--ac-accent-contrast); box-shadow: 0 14px 28px -14px color-mix(in oklab, var(--ac-accent) 85%, transparent); }
.ac-kpi--accent::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, 0.24), transparent 60%);
  pointer-events: none;
}
.ac-kpi--accent :is(.ac-kpi__label, .ac-kpi__foot) { color: rgba(255, 255, 255, 0.85); }
.ac-kpi--accent .ac-stat__icon { background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; }
/* dark Air: bright teal carries navy text, not white */
:root[data-theme="dark"]:where(:not([data-accent]), [data-accent="air"]) .ac-kpi--accent :is(.ac-kpi__label, .ac-kpi__foot, .ac-trend) { color: rgba(15, 27, 40, 0.82); }
:root[data-theme="dark"]:where(:not([data-accent]), [data-accent="air"]) .ac-kpi--accent .ac-stat__icon { background: rgba(15, 27, 40, 0.16); color: #0f1b28; }
:root[data-theme="dark"]:where(:not([data-accent]), [data-accent="air"]) .ac-kpi--accent .ac-trend { background: rgba(15, 27, 40, 0.14); }


/* ==== css/components/chart.css ==== */
/* Charts (src/js/components/chart.js) — inline SVG coloured from --ac-chart-* tokens via data-c */
.ac-chart { position: relative; display: flex; flex-direction: column; gap: var(--ac-s-2); min-width: 0; color: var(--ac-text); }
.ac-chart--h { block-size: var(--ac-chart-h); }
.ac-chart--auto, .ac-chart-slot.ac-chart--auto { block-size: auto; aspect-ratio: auto; }
.ac-chart--auto .ac-chart__plot { flex: none; block-size: var(--_h, auto); }
.ac-chart__plot { position: relative; flex: 1 1 auto; min-block-size: 0; border-radius: var(--ac-r-sm); outline-offset: 4px; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.ac-chart__svg { position: absolute; inset: 0; display: block; overflow: visible; font-family: inherit; } /* keep inherited direction: chart.js anchors text in LTR terms and RTL flips them; direction:ltr would mis-order Persian labels */
.ac-chart--auto .ac-chart__svg { position: static; }
:where(.ac-chart, .ac-dt) [data-c="1"] { --_c: var(--ac-chart-1); } :where(.ac-chart, .ac-dt) [data-c="2"] { --_c: var(--ac-chart-2); } :where(.ac-chart, .ac-dt) [data-c="3"] { --_c: var(--ac-chart-3); } :where(.ac-chart, .ac-dt) [data-c="4"] { --_c: var(--ac-chart-4); }
:where(.ac-chart, .ac-dt) [data-c="5"] { --_c: var(--ac-chart-5); } :where(.ac-chart, .ac-dt) [data-c="6"] { --_c: var(--ac-chart-6); } :where(.ac-chart, .ac-dt) [data-c="7"] { --_c: var(--ac-chart-7); } :where(.ac-chart, .ac-dt) [data-c="8"] { --_c: var(--ac-chart-8); }
:where(.ac-chart, .ac-dt) [data-c="accent"] { --_c: var(--ac-accent); } :where(.ac-chart, .ac-dt) [data-c="success"] { --_c: var(--ac-success); } :where(.ac-chart, .ac-dt) [data-c="warning"] { --_c: var(--ac-warning); }
:where(.ac-chart, .ac-dt) [data-c="danger"] { --_c: var(--ac-danger); } :where(.ac-chart, .ac-dt) [data-c="info"] { --_c: var(--ac-info); } :where(.ac-chart, .ac-dt) [data-c="neutral"] { --_c: var(--ac-muted); } :where(.ac-chart, .ac-dt) [data-c="contrast"] { --_c: var(--ac-accent-contrast); }

.ac-chart__legend { display: flex; flex-wrap: wrap; gap: var(--ac-s-1) var(--ac-s-3); }
.ac-chart__legend[hidden] { display: none; }
.ac-chart__key { display: inline-flex; align-items: center; gap: 6px; min-block-size: 1.75rem; padding-inline: var(--ac-s-2); margin-inline-start: calc(var(--ac-s-2) * -1); border-radius: var(--ac-r-pill); font-size: var(--ac-fs-xs); color: var(--ac-text-soft); transition: opacity var(--ac-dur-1), background var(--ac-dur-1); }
.ac-chart__key:hover { background: var(--ac-hover); }
.ac-chart__key[aria-pressed="false"] { opacity: 0.45; }
.ac-chart__key[aria-pressed="false"] .ac-chart__sw { background: transparent; box-shadow: inset 0 0 0 1.5px var(--_c); }
.ac-chart__sw { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; flex: none; background: var(--_c); }

.ac-chart__tick, .ac-chart__val, .ac-chart__fv, .ac-chart__cl { font-size: 10.5px; fill: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-chart__val, .ac-chart__fv { fill: var(--ac-text-soft); font-weight: var(--ac-fw-semibold); }
.ac-chart__fl { font-size: var(--ac-fs-sm); fill: var(--ac-text); font-weight: var(--ac-fw-medium); }
.ac-chart__grid { stroke: var(--ac-chart-grid); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.ac-chart__line { fill: none; stroke: var(--_c); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.ac-chart__line--dash { stroke-dasharray: 0.012 0.012; stroke-width: 1.75; opacity: 0.8; }
.ac-chart[data-type="sparkline"] .ac-chart__line { stroke-width: 2; }
.ac-chart__stop0 { stop-color: var(--_c); stop-opacity: 0.26; }
.ac-chart__stop1 { stop-color: var(--_c); stop-opacity: 0; }
:root[data-theme="dark"] .ac-chart__stop0 { stop-opacity: 0.34; }
.ac-chart__bar { fill: var(--_c); transition: opacity var(--ac-dur-2); }
.ac-chart__hover { opacity: 0; transition: opacity var(--ac-dur-1); pointer-events: none; }
.ac-chart__plot[data-hover] .ac-chart__hover { opacity: 1; }
.ac-chart__band { fill: var(--ac-chart-grid); }
.ac-chart__cross { stroke: var(--ac-border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.ac-chart__dot { fill: var(--ac-surface-1); stroke: var(--_c); stroke-width: 2.5; }
.ac-chart__track, .ac-chart__gt { fill: none; stroke: var(--ac-surface-3); stroke-linecap: round; }
.ac-chart__track { stroke-linecap: butt; }
.ac-chart__arc { fill: none; stroke: var(--_c); transition: opacity var(--ac-dur-2), stroke-width var(--ac-dur-2) var(--ac-ease); }
.ac-chart__arc[data-off], .ac-chart__fbar[data-off] { opacity: 0.35; }
.ac-chart__gv { fill: none; stroke: var(--_c); stroke-linecap: round; }
.ac-chart__cv, .ac-chart__gnum { font-size: 1.35rem; font-weight: var(--ac-fw-bold); fill: var(--ac-text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ac-chart__cell { fill: var(--ac-surface-3); }
.ac-chart__cell[data-l="1"] { fill: color-mix(in oklab, var(--ac-accent) 28%, var(--ac-surface-3)); }
.ac-chart__cell[data-l="2"] { fill: color-mix(in oklab, var(--ac-accent) 52%, var(--ac-surface-3)); }
.ac-chart__cell[data-l="3"] { fill: color-mix(in oklab, var(--ac-accent) 76%, var(--ac-surface-3)); }
.ac-chart__cell[data-l="4"] { fill: var(--ac-accent); }
.ac-chart__ring-sel { fill: none; stroke: var(--ac-text); stroke-width: 1.5; opacity: 0; pointer-events: none; }
.ac-chart__ring-sel[data-on] { opacity: 1; }
.ac-chart__ftrack { fill: var(--ac-surface-3); }
.ac-chart__fbar { fill: var(--_c); transition: opacity var(--ac-dur-2); }

.ac-chart__tip {
  position: absolute; z-index: 2; left: 0; top: 0; /* rtl-ok: JS-measured physical geometry, moved with transform */
  display: grid; gap: 3px; min-inline-size: 8.5rem; max-inline-size: 15rem; padding: var(--ac-s-2) var(--ac-s-3);
  border-radius: var(--ac-r-md); background: var(--ac-elevated); border: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-lg); font-size: var(--ac-fs-xs); line-height: 1.45; white-space: nowrap;
  pointer-events: none; opacity: 0;
  /* follows the pointer on a spring — transform only, no left/top layout */
  transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 100% - 12px)) scale(0.96);
  transition: opacity var(--ac-dur-1) var(--ac-ease), transform 320ms var(--ac-spring);
}
.ac-chart__tip[data-below] { transform: translate(calc(var(--x, 0px) - 50%), var(--y, 0px)) scale(0.96); }
.ac-chart__plot[data-hover] .ac-chart__tip { opacity: 1; transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 100% - 12px)); }
.ac-chart__plot[data-hover] .ac-chart__tip[data-below] { transform: translate(calc(var(--x, 0px) - 50%), var(--y, 0px)); }
.ac-chart__plot:not([data-hover]) .ac-chart__tip { transition: opacity var(--ac-dur-1) var(--ac-ease), transform 0s linear var(--ac-dur-1); }
.ac-chart__tip-head { font-weight: var(--ac-fw-semibold); color: var(--ac-text); }
.ac-chart__tip-row { display: flex; align-items: center; gap: var(--ac-s-2); color: var(--ac-text-soft); }
.ac-chart__tip-row b { margin-inline-start: auto; padding-inline-start: var(--ac-s-3); color: var(--ac-text); font-variant-numeric: tabular-nums; }
.ac-chart__tip-sub { color: var(--ac-muted); }


/* stat-tile sparklines sit on the card edge; on the accent card they use the contrast colour */
.ac-stat__spark.ac-chart { gap: 0; }
.ac-card--accent .ac-chart { --ac-chart-grid: rgba(255, 255, 255, 0.2); }

/* draw-in (paused until the chart scrolls into view; motion: docs/motion.md)
   bars grow from the baseline column by column (chart.js gives every bar --i and --_base);
   stacked segments share their column's delay so a stack rises as one */
.ac-chart[data-anim] .ac-chart__bar { transform-box: view-box; transform-origin: 0 var(--_base, 100%); animation: ac-chart-grow 760ms var(--ac-spring) both; animation-delay: calc(min(var(--i, 0), 14) * 38ms); }
.ac-chart[data-anim] .ac-chart__bar[data-h] { transform-origin: var(--_base, 0) 0; animation-name: ac-chart-grow-x; }
.ac-chart[data-anim] :is(.ac-chart__line, .ac-chart__arc, .ac-chart__gv) { stroke-dasharray: 1 1; animation: ac-chart-draw 1100ms var(--ac-ease-in-out) both; }
.ac-chart[data-anim] .ac-chart__line--dash { stroke-dasharray: 0.012 0.012; animation: none; }
.ac-chart[data-anim] .ac-chart__area { animation: ac-chart-rise 1000ms var(--ac-ease-out) 200ms both; }
.ac-chart[data-anim] .ac-chart__fbar { transform-box: fill-box; transform-origin: 0 50%; animation: ac-chart-grow-x 760ms var(--ac-spring) both; animation-delay: calc(var(--i, 0) * 60ms); } /* rtl-ok: overridden below for rtl */
[dir="rtl"] .ac-chart[data-anim] .ac-chart__fbar { transform-origin: 100% 50%; } /* rtl-ok: rtl override */
.ac-chart[data-anim] .ac-chart__cell, .ac-chart[data-anim] .ac-chart__ring { animation: ac-chart-fade 700ms var(--ac-ease-out) both; }
.ac-chart[data-anim] .ac-chart__arc:nth-child(3) { animation-delay: 90ms; } .ac-chart[data-anim] .ac-chart__arc:nth-child(4) { animation-delay: 180ms; }
.ac-chart[data-anim] .ac-chart__arc:nth-child(5) { animation-delay: 270ms; } .ac-chart[data-anim] .ac-chart__arc:nth-child(n + 6) { animation-delay: 340ms; }
.ac-chart[data-anim="wait"] * { animation-play-state: paused !important; }
@keyframes ac-chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ac-chart-fade { from { opacity: 0; } }
@keyframes ac-chart-rise { from { opacity: 0; transform: translateY(calc(8px * var(--ac-travel, 1))); } }
/* reduced motion (--ac-travel 0): bars fade in place instead of growing */
@keyframes ac-chart-grow { from { transform: scaleY(calc(1 - var(--ac-travel, 1))); opacity: calc(1 - (1 - var(--ac-travel, 1))); } }
@keyframes ac-chart-grow-x { from { transform: scaleX(calc(1 - var(--ac-travel, 1))); opacity: calc(1 - (1 - var(--ac-travel, 1))); } }

/* hover: the inspected column / slice stays, the rest steps back; legend hover spotlights a series */
.ac-chart__bar { transition: opacity var(--ac-dur-2) var(--ac-ease-hover); }
.ac-chart__plot[data-hover] .ac-chart__bar:not([data-on]) { opacity: 0.38; }
.ac-chart[data-spot] :is(.ac-chart__s, .ac-chart__bar, .ac-chart__arc):not([data-spot-on]) { opacity: 0.22; }
.ac-chart__s, .ac-chart__arc { transition: opacity var(--ac-dur-2) var(--ac-ease-hover), stroke-width var(--ac-dur-2) var(--ac-ease); }
.ac-chart__band { transition: x 260ms var(--ac-spring), y 260ms var(--ac-spring); }
.ac-chart__hover > .ac-chart__cross { transition: transform 260ms var(--ac-spring); }
.ac-chart__hover > .ac-chart__dot { transition: cx 260ms var(--ac-spring), cy 260ms var(--ac-spring); }
.ac-chart__key { transition: opacity var(--ac-dur-2) var(--ac-ease-hover), background var(--ac-dur-1) var(--ac-ease-hover), transform var(--ac-spring-dur) var(--ac-spring); }
.ac-chart__key:active { transform: scale(0.95); transition-duration: var(--ac-dur-0); }
.ac-chart__sw { transition: background var(--ac-dur-2) var(--ac-ease-hover), box-shadow var(--ac-dur-2) var(--ac-ease-hover), scale var(--ac-spring-bounce-dur) var(--ac-spring-bounce); }
.ac-chart__key[aria-pressed="false"] .ac-chart__sw { scale: 0.8; }
.ac-chart__arc { transform-box: view-box; transform-origin: 50% 50%; }
.ac-chart__plot[data-hover] .ac-chart__arc[data-on] { scale: 1.035; }
.ac-chart__arc { transition: opacity var(--ac-dur-2) var(--ac-ease-hover), scale 360ms var(--ac-spring); }
/* the tooltip moves with transform; keep its (hidden) box from widening the page — x is clamped inside the plot anyway */
.ac-chart__plot { overflow-x: clip; overflow-clip-margin: 10px; }


/* ==== css/components/data.css ==== */
/* Data display: swipe rows, description list, timeline, accordion, tree, code, JSON viewer, log viewer */

/* ---- swipe actions (lists + data-table phone cards) ---- */
.ac-swipe { position: relative; overflow: hidden; }
.ac-list__item.ac-swipe { padding: 0; display: block; }
.ac-swipe__actions { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; }
.ac-swipe__btn {
  --_tone: var(--ac-muted);
  display: grid; place-content: center; justify-items: center; gap: 2px; min-inline-size: 4.5rem; padding-inline: var(--ac-s-3);
  background: var(--_tone); color: #fff; font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold);
}
.ac-swipe__btn .ac-icon { inline-size: 1.2rem; block-size: 1.2rem; }
.ac-swipe__btn[data-tone="accent"] { --_tone: var(--ac-accent); } .ac-swipe__btn[data-tone="info"] { --_tone: var(--ac-info); }
.ac-swipe__btn[data-tone="success"] { --_tone: var(--ac-success); } .ac-swipe__btn[data-tone="warning"] { --_tone: var(--ac-warning); }
.ac-swipe__btn[data-tone="danger"] { --_tone: var(--ac-danger); }
.ac-swipe__content { position: relative; z-index: 1; background: var(--ac-surface-1); transform: translateX(var(--ac-drag, 0)); transition: transform var(--ac-dur-3) var(--ac-ease); touch-action: pan-y; }
.ac-list__item.ac-swipe > .ac-swipe__content { display: flex; align-items: center; gap: var(--ac-s-3); min-block-size: var(--ac-row-h); padding: var(--ac-s-2) var(--ac-card-pad); }
.ac-swipe[data-dragging] > .ac-swipe__content { transition: none; }
.ac-swipe[data-open] > .ac-swipe__content { box-shadow: var(--ac-shadow-md); }

/* ---- description list: <dl class="ac-dl [--cols-2|--inline]"><div><dt/><dd/></div></dl> ---- */
.ac-dl { display: grid; margin: 0; }
.ac-dl > div { display: grid; grid-template-columns: minmax(7rem, 34%) 1fr; gap: var(--ac-s-3); padding-block: var(--ac-s-3); border-block-end: 1px solid var(--ac-border); min-width: 0; }
.ac-dl > div:last-child { border-block-end: 0; }
.ac-dl dt { color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-dl dd { margin: 0; font-weight: var(--ac-fw-medium); min-width: 0; overflow-wrap: anywhere; }
.ac-dl--cols-2 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: var(--ac-s-6); }
.ac-dl--cols-2 > div { grid-template-columns: 1fr; gap: 2px; }
@media (max-width: 639.98px) { .ac-dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---- timeline: <ol class="ac-timeline"><li class="ac-timeline__item" data-tone><time/><div class="ac-timeline__body"><strong/><p/></div></li></ol> ---- */
.ac-timeline { list-style: none; padding: 0; margin: 0; display: grid; }
.ac-timeline__item { --_tone: var(--ac-accent); position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--ac-s-4); padding-block-end: var(--ac-s-5); }
.ac-timeline__item:last-child { padding-block-end: 0; }
.ac-timeline__item > time { padding-block-start: 2px; text-align: end; font-size: var(--ac-fs-xs); color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-timeline__body { position: relative; display: grid; gap: 2px; padding-inline-start: var(--ac-s-5); font-size: var(--ac-fs-sm); min-width: 0; }
.ac-timeline__body::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.35rem; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--_tone); box-shadow: 0 0 0 4px color-mix(in oklab, var(--_tone) 18%, transparent); }
.ac-timeline__item:not(:last-child) .ac-timeline__body::after { content: ""; position: absolute; inset-inline-start: calc(0.3rem - 1px); inset-block: 1.3rem calc(var(--ac-s-5) * -1 + 0.25rem); inline-size: 2px; background: var(--ac-border); border-radius: 2px; }
.ac-timeline__body p { margin: 0; color: var(--ac-text-soft); }
@media (max-width: 639.98px) { .ac-timeline__item { grid-template-columns: 1fr; gap: 2px; padding-inline-start: var(--ac-s-5); } .ac-timeline__item > time { text-align: start; order: 1; } .ac-timeline__body { margin-inline-start: calc(var(--ac-s-5) * -1); } }

/* ---- accordion ---- */
.ac-accordion { display: grid; border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); background: var(--ac-surface-1); overflow: hidden; }
.ac-accordion__item + .ac-accordion__item { border-block-start: 1px solid var(--ac-border); }
.ac-accordion__item[data-animating] { overflow: hidden; }
.ac-accordion__head { display: flex; align-items: center; gap: var(--ac-s-3); min-block-size: var(--ac-touch); padding: var(--ac-s-3) var(--ac-card-pad); font-weight: var(--ac-fw-semibold); cursor: pointer; list-style: none; transition: background var(--ac-dur-1); }
.ac-accordion__head::-webkit-details-marker { display: none; }
.ac-accordion__head:hover { background: var(--ac-hover); }
.ac-accordion__head::after { /* rtl-ok: border chevron rotated to point down — symmetric */ content: ""; margin-inline-start: auto; inline-size: 0.5rem; block-size: 0.5rem; border-right: 2px solid var(--ac-muted); border-bottom: 2px solid var(--ac-muted); transform: translateY(-2px) rotate(45deg); transition: transform var(--ac-dur-3) var(--ac-ease); flex: none; }
.ac-accordion__item[open]:not([data-closing]) > .ac-accordion__head::after { transform: translateY(2px) rotate(-135deg); }
.ac-accordion__body { padding: 0 var(--ac-card-pad) var(--ac-s-4); color: var(--ac-text-soft); font-size: var(--ac-fs-sm); line-height: var(--ac-lh-normal); }

/* ---- tree ---- */
.ac-tree, .ac-tree ul { list-style: none; margin: 0; padding: 0; }
.ac-tree ul { padding-inline-start: 1.1rem; margin-inline-start: 0.55rem; border-inline-start: 1px solid var(--ac-border); }
.ac-tree__item { outline: 0; }
.ac-tree__item[aria-expanded="false"] > ul { display: none; }
.ac-tree__row { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 2.1rem; padding-inline: var(--ac-s-1) var(--ac-s-2); border-radius: var(--ac-r-sm); font-size: var(--ac-fs-sm); cursor: pointer; user-select: none; transition: background var(--ac-dur-1); }
.ac-tree__row:hover { background: var(--ac-hover); }
.ac-tree__item:focus-visible > .ac-tree__row { box-shadow: inset 0 0 0 2px var(--ac-focus, var(--ac-accent)); }
.ac-tree__item[aria-selected="true"] > .ac-tree__row { background: var(--ac-accent-soft); color: var(--ac-accent-ink); font-weight: var(--ac-fw-semibold); }
.ac-tree__chev { inline-size: 0.9rem; block-size: 0.9rem; flex: none; color: var(--ac-muted); transition: transform var(--ac-dur-2) var(--ac-ease); }
.ac-tree__item[aria-expanded="true"] > .ac-tree__row .ac-tree__chev { transform: rotate(90deg); }
[dir="rtl"] .ac-tree__item[aria-expanded="true"] > .ac-tree__row .ac-tree__chev { transform: scaleX(-1) rotate(90deg); }
.ac-tree__icon { inline-size: 1rem; block-size: 1rem; flex: none; color: var(--ac-muted); }
.ac-tree__item[aria-expanded] > .ac-tree__row .ac-tree__icon { color: var(--ac-chart-3); }
.ac-tree__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-tree__meta { direction: ltr; unicode-bidi: isolate; font-size: var(--ac-fs-xs); color: var(--ac-muted); font-variant-numeric: tabular-nums; }

/* ---- code block + JSON viewer ---- */
.ac-code, .ac-json { position: relative; direction: ltr; text-align: start; border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); background: var(--ac-surface-2); font-size: var(--ac-fs-sm); min-width: 0; overflow: hidden; }
.ac-code__head, .ac-json__bar { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 2.5rem; padding-inline: var(--ac-s-4) var(--ac-s-2); border-block-end: 1px solid var(--ac-border); }
.ac-json__bar { justify-content: flex-end; border: 0; position: absolute; inset-inline-end: 0; inset-block-start: 0; z-index: 1; }
.ac-code__lang { flex: 1; font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); color: var(--ac-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ac-code__copy { display: inline-flex; align-items: center; gap: 6px; min-block-size: 2rem; padding-inline: var(--ac-s-2); border-radius: var(--ac-r-sm); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); color: var(--ac-text-soft); transition: background var(--ac-dur-1), color var(--ac-dur-1); }
.ac-code__copy:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-code__copy[data-done] { color: var(--ac-success-ink); }
.ac-code__copy .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-code pre { margin: 0; padding: var(--ac-s-4); overflow: auto; line-height: 1.65; tab-size: 2; }
.ac-code code { font-size: 0.86rem; counter-reset: ac-line; }
.ac-code__line::before { counter-increment: ac-line; content: counter(ac-line); display: inline-block; inline-size: 2ch; margin-inline-end: var(--ac-s-4); text-align: end; color: var(--ac-faint); user-select: none; }
.ac-code__k, .ac-json__v[data-t="boolean"], .ac-json__v[data-t="null"] { color: var(--ac-accent-ink); font-weight: var(--ac-fw-semibold); }
.ac-code__s, .ac-json__v[data-t="string"] { color: var(--ac-success-ink); }
.ac-code__n, .ac-json__v[data-t="number"] { color: var(--ac-warning-ink); }
.ac-code__c { color: var(--ac-muted); font-style: italic; }
.ac-code__p, .ac-json__k { color: var(--ac-info-ink); }
.ac-json__tree { padding: var(--ac-s-3) var(--ac-s-4); font-family: var(--ac-font-mono); font-size: 0.84rem; line-height: 1.7; overflow: auto; }
.ac-json__kids { padding-inline-start: 1.25rem; border-inline-start: 1px dashed var(--ac-border); margin-inline-start: 0.3rem; }
.ac-json__node > summary { list-style: none; cursor: pointer; border-radius: var(--ac-r-xs); }
.ac-json__node > summary::-webkit-details-marker { display: none; }
.ac-json__node > summary::before { content: "▸"; display: inline-block; inline-size: 1em; margin-inline-start: -1em; color: var(--ac-muted); transition: transform var(--ac-dur-2) var(--ac-ease); }
.ac-json__tree > .ac-json__node { margin-inline-start: 1em; }
.ac-json__node[open] > summary::before { transform: rotate(90deg); }
.ac-json__node > summary:hover { background: var(--ac-hover); }
.ac-json__p { color: var(--ac-muted); }
.ac-json__n { margin-inline: 6px; padding: 0 6px; border-radius: var(--ac-r-pill); background: var(--ac-surface-3); color: var(--ac-muted); font-size: 0.75rem; font-family: var(--ac-font); }
.ac-json__node[open] > summary :is(.ac-json__n, .ac-json__close), .ac-json__node:not([open]) > .ac-json__p { display: none; }

/* ---- log viewer ---- */
.ac-log { --_h: 22rem; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); background: var(--ac-surface-1); overflow: hidden; }
.ac-log__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2); padding: var(--ac-s-2) var(--ac-s-3); border-block-end: 1px solid var(--ac-border); }
.ac-log__levels { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-log__lvl {
  --_c: var(--ac-muted);
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 2rem; padding-inline: 0.6rem; border-radius: var(--ac-r-pill);
  border: 1px solid var(--ac-border); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); text-transform: capitalize; color: var(--ac-text-soft);
  transition: background var(--ac-dur-1), opacity var(--ac-dur-1);
}
.ac-log__lvl i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--_c); }
.ac-log__lvl[aria-pressed="true"] { background: color-mix(in oklab, var(--_c) 12%, transparent); border-color: color-mix(in oklab, var(--_c) 35%, transparent); }
.ac-log__lvl[aria-pressed="false"] { opacity: 0.5; }
.ac-log__n { color: var(--ac-muted); font-variant-numeric: tabular-nums; font-weight: var(--ac-fw-medium); }
:is(.ac-log__lvl, .ac-log__line)[data-level="info"] { --_c: var(--ac-info); }
:is(.ac-log__lvl, .ac-log__line)[data-level="warn"] { --_c: var(--ac-warning); }
:is(.ac-log__lvl, .ac-log__line)[data-level="error"] { --_c: var(--ac-danger); }
:is(.ac-log__lvl, .ac-log__line)[data-level="debug"] { --_c: var(--ac-faint); }
.ac-log__search { position: relative; flex: 1 1 10rem; display: flex; align-items: center; min-width: 0; }
.ac-log__search .ac-icon { position: absolute; inset-inline-start: 0.6rem; inline-size: 0.95rem; block-size: 0.95rem; color: var(--ac-muted); pointer-events: none; }
.ac-log__search input { inline-size: 100%; min-block-size: 2rem; padding-inline: 2rem var(--ac-s-2); border: 1px solid var(--ac-border); border-radius: var(--ac-r-sm); background: var(--ac-surface-2); font-size: var(--ac-fs-sm); }
.ac-log__search input:focus { outline: 0; border-color: var(--ac-accent); box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-log__tools { display: flex; gap: 2px; margin-inline-start: auto; }
.ac-log__tools [aria-pressed="true"]:not(.ac-log__pause) { color: var(--ac-accent-ink); background: var(--ac-accent-soft); }
.ac-log__pause[aria-pressed="true"] { color: var(--ac-warning-ink); background: var(--ac-warning-soft); }
.ac-log__view { block-size: var(--_h); overflow: auto; padding-block: var(--ac-s-2); direction: ltr; text-align: start; font-family: var(--ac-font-mono); font-size: 0.8rem; line-height: 1.55; background: var(--ac-surface-2); overscroll-behavior: contain; }
.ac-log__view:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: -2px; }
.ac-log__line { --_c: var(--ac-muted); display: flex; gap: var(--ac-s-3); padding: 1px var(--ac-s-3); border-inline-start: 2px solid transparent; }
.ac-log__line:hover { background: var(--ac-hover); }
.ac-log__line[data-level="error"] { background: color-mix(in oklab, var(--ac-danger) 7%, transparent); border-inline-start-color: var(--ac-danger); }
.ac-log__line[data-level="warn"] { border-inline-start-color: var(--ac-warning); }
.ac-log__line time { flex: none; color: var(--ac-faint); }
[data-no-ts] .ac-log__line time { display: none; }
.ac-log__lv { flex: none; inline-size: 5ch; color: var(--_c); font-weight: 700; }
.ac-log__src { flex: none; color: var(--ac-accent-ink); }
.ac-log__msg { min-width: 0; color: var(--ac-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-log__line[data-level="debug"] .ac-log__msg { color: var(--ac-text-soft); }
.ac-log__msg mark { background: color-mix(in oklab, var(--ac-warning) 35%, transparent); color: inherit; border-radius: 2px; }
.ac-log__empty { padding: var(--ac-s-6); text-align: center; color: var(--ac-muted); font-family: var(--ac-font); }
.ac-log__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); min-block-size: 2.5rem; padding-inline: var(--ac-s-3); border-block-start: 1px solid var(--ac-border); font-size: var(--ac-fs-xs); color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-log__jump { display: inline-flex; align-items: center; gap: 4px; min-block-size: 1.75rem; padding-inline: var(--ac-s-3); border-radius: var(--ac-r-pill); background: var(--ac-accent); color: var(--ac-accent-contrast); font-weight: var(--ac-fw-semibold); box-shadow: var(--ac-shadow-sm); animation: ac-dt-pop var(--ac-dur-2) var(--ac-ease); }
.ac-log__jump[hidden] { display: none; }
.ac-log__jump .ac-icon { inline-size: 0.9rem; block-size: 0.9rem; }
@media (max-width: 639.98px) { .ac-log__line { flex-wrap: wrap; column-gap: var(--ac-s-2); } .ac-log__msg { flex-basis: 100%; } .ac-log__src { display: none; } }


/* ==== css/components/datepicker.css ==== */
/* ==========================================================================
   Pop panels for form controls (combobox list, date picker, time picker).
   Top-layer popover positioned by JS (--_x/--_y); bottom sheet on phones ([data-sheet]).
   ========================================================================== */
.ac-pop {
  position: fixed; inset: auto; margin: 0; padding: 0;
  left: var(--_x, 0); top: var(--_y, 0); /* rtl-ok: JS-measured physical position */
  inline-size: max(var(--_w, 0px), 14rem); max-inline-size: calc(100vw - 16px); max-block-size: var(--_maxh, 22rem);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl);
  background: var(--ac-elevated); color: var(--ac-text); box-shadow: var(--ac-shadow-lg);
  z-index: var(--ac-z-dropdown);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top center;
  transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-2) var(--ac-ease);
}
.ac-pop[data-up] { transform-origin: bottom center; transform: translateY(4px) scale(0.98); }
.ac-pop[data-state="open"] { opacity: 1; transform: none; }
@starting-style { .ac-pop[data-state="open"] { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.ac-pop:not(:popover-open) { display: none; }
.ac-pop[hidden] { display: none; }
.ac-pop::backdrop { background: transparent; }
.ac-pop__scroll { overflow-y: auto; overscroll-behavior: contain; min-block-size: 0; flex: 1 1 auto; }
.ac-pop__grab { display: none; }
.ac-pop[data-sheet] {
  inset-inline: 0; top: auto; bottom: 0; inline-size: auto; max-inline-size: none; max-block-size: 88dvh;
  border-radius: var(--ac-r-2xl) var(--ac-r-2xl) 0 0; border-inline: 0; border-block-end: 0;
  padding-block-end: var(--ac-safe-bottom); z-index: var(--ac-z-sheet);
  transform: translateY(100%); translate: 0 var(--ac-drag, 0px);
  transition: opacity var(--ac-dur-2), transform var(--ac-dur-4) var(--ac-ease-out);
}
.ac-pop[data-sheet][data-state="open"] { transform: none; }
@starting-style { .ac-pop[data-sheet][data-state="open"] { transform: translateY(100%); } }
.ac-pop[data-sheet]::backdrop { background: var(--ac-scrim); }
.ac-pop[data-sheet] .ac-pop__grab { display: block; flex: none; inline-size: 2.25rem; block-size: 5px; margin: var(--ac-s-2) auto 0; border-radius: 5px; background: var(--ac-border-strong); cursor: grab; touch-action: none; }

/* ---- date picker ----------------------------------------------------- */
.ac-dp { inline-size: 19.5rem; padding: var(--ac-s-3); gap: var(--ac-s-2); }
.ac-dp[data-double] { inline-size: 38rem; }
.ac-dp__head { display: flex; align-items: center; gap: var(--ac-s-1); }
.ac-dp__nav, .ac-dp__title { display: grid; place-items: center; block-size: 2.25rem; border-radius: var(--ac-r-pill); color: var(--ac-text-soft); transition: background var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-1); }
.ac-dp__nav { inline-size: 2.25rem; flex: none; background: var(--ac-surface-3); }
.ac-dp__nav .ac-icon { inline-size: 1.1rem; block-size: 1.1rem; }
.ac-dp__title { flex: 1; font-weight: var(--ac-fw-bold); color: var(--ac-text); font-size: var(--ac-fs-md); white-space: pre; }
:is(.ac-dp__nav, .ac-dp__title):hover { background: var(--ac-hover); color: var(--ac-text); }
:is(.ac-dp__nav, .ac-dp__title, .ac-dp__day, .ac-dp__pick, .ac-dp__cal button, .ac-tp__opt):focus-visible { outline: none; box-shadow: var(--ac-focus); }
:is(.ac-dp__nav, .ac-dp__day, .ac-dp__pick, .ac-tp__opt):active { transform: scale(0.92); }
.ac-dp__body { display: grid; gap: var(--ac-s-4); }
.ac-dp[data-double] .ac-dp__body[data-view="days"] { grid-template-columns: 1fr 1fr; }
.ac-dp__body[data-view="months"], .ac-dp__body[data-view="years"] { grid-template-columns: repeat(3, 1fr); gap: var(--ac-s-2); padding-block: var(--ac-s-2); }
.ac-dp__body > * { animation: ac-dp-in var(--ac-dur-3) var(--ac-ease); }
@keyframes ac-dp-in { from { opacity: 0.4; } }
.ac-dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.ac-dp__row { display: contents; }
.ac-dp__wd { display: grid; place-items: center; block-size: 2rem; font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); color: var(--ac-muted); }
.ac-dp__cell { display: grid; }
.ac-dp__day {
  position: relative; display: grid; place-items: center; block-size: 2.375rem; border-radius: var(--ac-r-pill);
  font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); color: var(--ac-text);
  transition: background var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-dp__day:hover:not(:disabled, [aria-selected="true"], [data-start], [data-end], [data-in]) { background: var(--ac-hover); }
.ac-dp__day[data-out] { color: var(--ac-faint); }
.ac-dp__day:disabled { color: var(--ac-faint); opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
.ac-dp__day[aria-current="date"]::after { content: ""; position: absolute; inset-block-end: 5px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--ac-accent); }
.ac-dp__day[data-in] { background: var(--ac-surface-3); border-radius: 0; }
.ac-dp__day[data-start] { border-start-start-radius: var(--ac-r-pill); border-end-start-radius: var(--ac-r-pill); }
.ac-dp__day[data-end] { border-start-end-radius: var(--ac-r-pill); border-end-end-radius: var(--ac-r-pill); }
.ac-dp__day[aria-selected="true"], .ac-dp__day[data-start], .ac-dp__day[data-end] { background: var(--ac-text); color: var(--ac-surface-1); font-weight: var(--ac-fw-semibold); }
.ac-dp__day[aria-selected="true"]::after, .ac-dp__day[data-start]::after { background: currentColor; }
.ac-dp__pad { display: block; }
.ac-dp__pick { block-size: 2.75rem; border-radius: var(--ac-r-pill); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); transition: background var(--ac-dur-1), transform var(--ac-dur-1); }
.ac-dp__pick:hover { background: var(--ac-hover); }
.ac-dp__pick[aria-pressed="true"] { background: var(--ac-text); color: var(--ac-surface-1); }
.ac-dp__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); padding-block-start: var(--ac-s-2); border-block-start: 1px solid var(--ac-border); }
.ac-dp__cal { display: inline-flex; padding: 2px; border-radius: var(--ac-r-pill); background: var(--ac-surface-3); }
.ac-dp__cal button { padding: 4px var(--ac-s-3); border-radius: var(--ac-r-pill); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); color: var(--ac-muted); transition: background var(--ac-dur-2), color var(--ac-dur-2), box-shadow var(--ac-dur-2); }
.ac-dp__cal button[aria-pressed="true"] { background: var(--ac-surface-1); color: var(--ac-text); box-shadow: var(--ac-shadow-sm); }
.ac-dp[data-sheet] { padding: var(--ac-s-2) var(--ac-s-4) calc(var(--ac-s-4) + var(--ac-safe-bottom)); }
.ac-dp[data-sheet] .ac-dp__day { block-size: 2.75rem; font-size: var(--ac-fs-md); }
.ac-date .ac-input, .ac-time .ac-input { cursor: pointer; }

/* ---- time picker ----------------------------------------------------- */
.ac-tp { inline-size: 12rem; padding: var(--ac-s-2); gap: var(--ac-s-2); }
.ac-tp__cols { position: relative; display: flex; align-items: stretch; gap: var(--ac-s-1); block-size: 13rem; }
.ac-tp__cols::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(50% - 1.125rem); block-size: 2.25rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-3); pointer-events: none; }
.ac-tp__col { flex: 1; display: grid; align-content: start; gap: 2px; padding-block: 5.375rem; scroll-snap-type: y mandatory; scrollbar-width: none; }
.ac-tp__col::-webkit-scrollbar { display: none; }
.ac-tp__sep { align-self: center; font-weight: var(--ac-fw-bold); color: var(--ac-muted); }
.ac-tp__opt { position: relative; block-size: 2.25rem; border-radius: var(--ac-r-pill); scroll-snap-align: center; font-size: var(--ac-fs-md); color: var(--ac-text-soft); transition: color var(--ac-dur-1), font-weight var(--ac-dur-1); }
.ac-tp__opt:hover { color: var(--ac-text); background: var(--ac-hover); }
.ac-tp__opt[aria-selected="true"] { color: var(--ac-text); font-weight: var(--ac-fw-bold); }
.ac-tp[data-sheet] { padding: var(--ac-s-2) var(--ac-s-4) calc(var(--ac-s-4) + var(--ac-safe-bottom)); }
/* finance kit: secondary calendar under each day, Friday + official holidays */
.ac-dp__grid[data-secondary] .ac-dp__day { block-size: 2.75rem; place-content: center; gap: 1px; line-height: 1.05; }
.ac-dp__sub { font-size: 0.625rem; font-weight: var(--ac-fw-regular); color: var(--ac-muted); }
.ac-dp__day:is([data-holiday], [data-weekend]):not([aria-selected="true"], [data-start], [data-end]) { color: var(--ac-danger-ink); }
.ac-dp__day[data-holiday]:not([aria-selected="true"]) { background: color-mix(in oklab, var(--ac-danger-soft) 70%, transparent); }
.ac-dp__day[aria-selected="true"] .ac-dp__sub { color: inherit; opacity: 0.7; }
.ac-dp__cal button { padding-inline: var(--ac-s-2); }


/* ==== css/components/feedback.css ==== */
/* ==========================================================================
   Feedback — toasts (stacked, swipeable), alerts / banners, confirm & prompt,
   notification list (panel + page). Behaviour lives in toast.js, alert.js,
   confirm.js, notifications.js.
   ========================================================================== */

/* ---- toasts -------------------------------------------------------------- */
.ac-toasts { display: block; block-size: var(--_h, 0px); }
.ac-toasts[data-position] { position: fixed; z-index: var(--ac-z-toast); inset: auto; inline-size: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.ac-toasts[data-position^="top"] { inset-block-start: calc(var(--ac-s-4) + var(--ac-safe-top)); }
.ac-toasts[data-position^="bottom"] { inset-block-end: calc(var(--ac-s-4) + var(--ac-safe-bottom)); }
.ac-toasts[data-position$="start"] { inset-inline-start: calc(var(--ac-s-4) + var(--ac-safe-start)); }
.ac-toasts[data-position$="end"] { inset-inline-end: calc(var(--ac-s-4) + var(--ac-safe-end)); }
.ac-toasts[data-position$="center"] { inset-inline: 0; margin-inline: auto; }
@media (max-width: 1023.98px) {
  .ac-toasts[data-position] { inset-inline: var(--ac-s-3); inline-size: auto; margin: 0; }
  .ac-toasts[data-position^="bottom"] { inset-block-end: calc(var(--ac-tabbar-h) + var(--ac-safe-bottom) + var(--ac-s-2)); }
}
.ac-toast {
  --_sign: -1;
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: calc(20 - var(--_i, 0));
  display: flex;
  align-items: flex-start;
  gap: var(--ac-s-3);
  padding-block: var(--ac-s-3);
  padding-inline: var(--ac-s-4) var(--ac-s-3);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-r-xl);
  background: var(--ac-elevated);
  box-shadow: var(--ac-shadow-lg);
  color: var(--ac-text);
  font-size: var(--ac-fs-sm);
  overflow: hidden;
  opacity: var(--_so, 1);
  transform-origin: 50% 100%;
  transform: translateX(var(--_sx, 0px)) translateY(calc(var(--_y, 0px) * var(--_sign))) scale(var(--_s, 1));
  transition: transform var(--ac-dur-4) var(--ac-ease-out), opacity var(--ac-dur-3) var(--ac-ease), block-size var(--ac-dur-3) var(--ac-ease);
  touch-action: pan-y;
  user-select: none;
  cursor: default;
}
.ac-toasts[data-edge="top"] .ac-toast { --_sign: 1; inset-block: 0 auto; transform-origin: 50% 0; }
.ac-toast[data-state="enter"] { opacity: 0; transform: translateY(calc(110% * var(--_sign) * -1)) scale(0.96); }
.ac-toast[data-state="exit"] { opacity: 0; transform: translateY(calc(var(--_y, 0px) * var(--_sign))) scale(0.92); pointer-events: none; }
.ac-toast[data-state="swiped"] { opacity: 0; pointer-events: none; }
.ac-toast[data-dragging] { transition: none; cursor: grabbing; }
.ac-toast[data-hidden] { opacity: 0; pointer-events: none; }
.ac-toasts:not([data-expanded]) .ac-toast[data-behind] { block-size: var(--_fh); }
.ac-toast > * { transition: opacity var(--ac-dur-2) var(--ac-ease); }
.ac-toasts:not([data-expanded]) .ac-toast[data-behind] > * { opacity: 0; }
.ac-toast__icon { display: grid; place-items: center; flex: none; block-size: 1.25rem; color: var(--_tone, var(--ac-muted)); }
.ac-toast__icon .ac-icon { inline-size: 1.15rem; block-size: 1.15rem; }
.ac-toast__spinner { inline-size: 1rem; block-size: 1rem; border: 2px solid var(--ac-border-strong); border-block-start-color: var(--ac-accent); border-radius: 50%; animation: ac-spin 0.7s linear infinite; }
@keyframes ac-spin { to { rotate: 360deg; } }
.ac-toast__body { flex: 1; min-width: 0; display: grid; gap: 2px; padding-block: 1px; }
.ac-toast__title { font-weight: var(--ac-fw-semibold); line-height: var(--ac-lh-snug); }
.ac-toast__text { color: var(--ac-muted); line-height: var(--ac-lh-snug); }
.ac-toast__action { flex: none; align-self: center; border-radius: var(--ac-r-pill); }
.ac-toast__close {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: -1px;
  margin-inline-end: -2px;
  border: 0;
  border-radius: var(--ac-r-pill);
  background: none;
  color: var(--ac-faint);
  cursor: pointer;
}
.ac-toast__close:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-toast__close .ac-icon { inline-size: 0.9rem; block-size: 0.9rem; }
.ac-toast__progress { position: absolute; inset: auto 0 0; block-size: 2px; background: var(--ac-hover); }
.ac-toast__progress > span {
  display: block;
  block-size: 100%;
  background: var(--_tone, var(--ac-accent));
  opacity: 0.7;
  transform-origin: var(--_origin, left);
  animation: ac-toast-bar var(--_dur) linear forwards;
}
[dir="rtl"] .ac-toast__progress > span { --_origin: right; }
.ac-toasts[data-expanded] .ac-toast__progress > span, .ac-toast[data-dragging] .ac-toast__progress > span { animation-play-state: paused; }
@keyframes ac-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ac-toast__progress { display: none; } }

/* ---- alert / banner -------------------------------------------------------- */
.ac-alert {
  --_tone: var(--ac-info);
  display: flex;
  align-items: flex-start;
  gap: var(--ac-s-3);
  padding: var(--ac-s-3) var(--ac-s-4);
  border: 1px solid color-mix(in oklab, var(--_tone) 26%, transparent);
  border-radius: var(--ac-r-xl);
  background: color-mix(in oklab, var(--_tone) 8%, var(--ac-surface-1));
  color: var(--ac-text);
  font-size: var(--ac-fs-sm);
  line-height: var(--ac-lh-snug);
}
.ac-alert[data-state="closing"] { overflow: hidden; }
.ac-alert__icon { flex: none; inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 1px; color: var(--_tone); }
.ac-alert__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ac-alert__title { font-weight: var(--ac-fw-semibold); }
.ac-alert__text { color: var(--ac-text-soft); }
.ac-alert__actions { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); margin-block-start: var(--ac-s-2); }
.ac-alert__close {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin-block-start: -0.2rem;
  margin-inline-end: -0.4rem;
  border: 0;
  border-radius: var(--ac-r-pill);
  background: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
.ac-alert__close:hover { opacity: 1; background: color-mix(in oklab, var(--_tone) 14%, transparent); }
.ac-alert__close .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-alert--outline { background: transparent; }
.ac-alert--solid { border-color: transparent; background: var(--_tone); color: #fff; }
.ac-alert--solid :is(.ac-alert__icon, .ac-alert__text) { color: inherit; }
.ac-alert--solid .ac-alert__text { opacity: 0.88; }
.ac-alert--banner { align-items: center; border-radius: 0; border-inline: 0; padding-inline: var(--ac-content-pad, var(--ac-s-4)); }
.ac-alert--banner .ac-alert__body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ac-s-2); }
.ac-alert--banner .ac-alert__actions { margin: 0; }

/* ---- confirm / prompt ----------------------------------------------------- */
.ac-confirm .ac-dialog__body { display: grid; justify-items: center; gap: var(--ac-s-2); padding: var(--ac-s-6) var(--ac-s-6) var(--ac-s-5); text-align: center; }
.ac-confirm .ac-dialog__foot { display: grid; grid-template-columns: 1fr 1fr; padding: 0 var(--ac-s-6) var(--ac-s-6); border: 0; background: none; }
.ac-confirm__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: var(--ac-s-2);
  border-radius: 50%;
  background: color-mix(in oklab, var(--_tone) 13%, transparent);
  color: var(--_tone);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--_tone) 6%, transparent);
}
.ac-confirm__icon .ac-icon { inline-size: 1.4rem; block-size: 1.4rem; }
.ac-confirm__form { display: grid; gap: var(--ac-s-1); inline-size: 100%; margin-block-start: var(--ac-s-3); text-align: start; }
.ac-confirm__label { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); color: var(--ac-text-soft); }
.ac-confirm__label:empty { display: none; }
.ac-confirm__input {
  inline-size: 100%;
  block-size: var(--ac-control-h);
  padding-inline: var(--ac-s-3);
  border: 1px solid var(--ac-border-strong);
  border-radius: var(--ac-r-md);
  background: var(--ac-surface-1);
  color: var(--ac-text);
  font: inherit;
  outline: none;
  transition: border-color var(--ac-dur-1) var(--ac-ease), box-shadow var(--ac-dur-1) var(--ac-ease);
}
.ac-confirm__input:focus { border-color: var(--ac-accent); box-shadow: var(--ac-focus); }
.ac-confirm__input[aria-invalid="true"] { border-color: var(--ac-danger); box-shadow: 0 0 0 3px var(--ac-danger-soft); }
.ac-confirm__error { margin: 0; min-block-size: 1.1em; font-size: var(--ac-fs-xs); color: var(--ac-danger-ink); }
@media (max-width: 639.98px) {
  .ac-confirm .ac-dialog__foot { grid-template-columns: 1fr; padding-block-end: calc(var(--ac-s-4) + var(--ac-safe-bottom)); }
  .ac-confirm .ac-dialog__foot [data-confirm] { order: -1; }
}

/* ---- notification list ------------------------------------------------------ */
.ac-notif { display: flex; flex-direction: column; min-block-size: 0; flex: 1; }
.ac-notif__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); padding: var(--ac-s-4) var(--ac-s-4) var(--ac-s-3); }
.ac-notif-sheet .ac-notif__head { padding-inline-end: 3.5rem; }
.ac-notif__heading { display: flex; align-items: center; gap: var(--ac-s-2); margin: 0; font-size: var(--ac-fs-lg); font-weight: var(--ac-fw-semibold); }
.ac-notif__tabs { margin: 0 var(--ac-s-4) var(--ac-s-2); }
.ac-notif > :not(.ac-notif__list) { flex: none; }
.ac-notif__head, .ac-notif__tabs, .ac-notif__foot { flex: none; }
.ac-notif__list { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--ac-s-2) var(--ac-s-2); }
.ac-notif__group { position: sticky; inset-block-start: 0; z-index: 1; padding: var(--ac-s-2) var(--ac-s-2) var(--ac-s-1); background: var(--ac-elevated); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ac-faint); }
.ac-notif__row { position: relative; display: flex; align-items: center; border-radius: var(--ac-r-lg); transition: background var(--ac-dur-1) var(--ac-ease); }
.ac-notif__row:hover { background: var(--ac-hover); }
.ac-notif__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ac-s-3);
  flex: 1;
  min-width: 0;
  padding-block: var(--ac-s-3);
  padding-inline: var(--ac-s-2) var(--ac-s-6);
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.ac-notif__item:active { transform: scale(0.99); }
.ac-notif__lead { flex: none; }
.ac-notif__icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--ac-r-md); background: color-mix(in oklab, var(--_tone, var(--ac-accent)) 12%, transparent); color: var(--_tone, var(--ac-accent)); }
.ac-notif__icon .ac-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.ac-notif__lead.ac-avatar { --ac-avatar: 2.25rem; }
.ac-notif__main { display: grid; gap: 2px; min-width: 0; font-size: var(--ac-fs-sm); line-height: var(--ac-lh-snug); }
.ac-notif__title { color: var(--ac-text-soft); font-weight: var(--ac-fw-medium); }
[data-unread] .ac-notif__title { color: var(--ac-text); font-weight: var(--ac-fw-semibold); }
.ac-notif__text { color: var(--ac-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-notif__time { color: var(--ac-faint); font-size: var(--ac-fs-xs); }
.ac-notif__dot { position: absolute; inset-inline-end: var(--ac-s-3); inset-block-start: 1.15rem; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ac-accent); box-shadow: 0 0 0 3px var(--ac-accent-soft); opacity: 0; transform: scale(0.5); transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-3) var(--ac-ease-spring); pointer-events: none; }
[data-unread] > .ac-notif__dot { opacity: 1; transform: none; }
.ac-notif__foot { display: flex; align-items: center; justify-content: center; gap: var(--ac-s-1); padding: var(--ac-s-3); border-block-start: 1px solid var(--ac-border); color: var(--ac-accent-ink); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); text-decoration: none; }
.ac-notif__foot:hover { background: var(--ac-hover); }
.ac-notif-sheet .ac-notif__foot { padding-block-end: calc(var(--ac-s-3) + var(--ac-safe-bottom)); }
.ac-notif--page .ac-notif__head { padding-inline: var(--ac-s-5); }
.ac-notif--page .ac-notif__tabs { margin-inline: var(--ac-s-5); max-inline-size: 30rem; }
.ac-notif--page .ac-notif__list { padding-inline: var(--ac-s-3); overflow: visible; }
.ac-notif--page .ac-notif__group { background: var(--ac-surface-1); }
.ac-notif--page .ac-notif__item { padding-inline-end: var(--ac-s-2); }
.ac-notif--page .ac-notif__dot { position: static; flex: none; margin-inline: var(--ac-s-2) var(--ac-s-3); }
.ac-notif__more { opacity: 0; transition: opacity var(--ac-dur-1) var(--ac-ease); }
.ac-notif__row:is(:hover, :focus-within) .ac-notif__more { opacity: 1; }
@media (hover: none) { .ac-notif__more { opacity: 1; } }


/* ==== css/components/finance.css ==== */
/* Finance kit: money input + live amounts, bank logos, bank card (ISO ID-1), card form, Sheba input. */
.ac-bank-logo { inline-size: 1.75rem; block-size: 1.75rem; flex: none; vertical-align: middle; overflow: visible; }
.ac-bank-logo--sm { inline-size: 1.25rem; block-size: 1.25rem; }
.ac-bank-logo--lg { inline-size: 2.75rem; block-size: 2.75rem; }
[data-ac-money] { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.ac-money-tick { display: inline-block; animation: ac-money-pop 420ms var(--ac-ease); }
@keyframes ac-money-pop { from { opacity: 0.35; transform: translateY(0.25em); filter: blur(1px); } }

/* money input */
.ac-money .ac-input { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.ac-money__affix { padding-inline: var(--ac-s-1); }
.ac-money__unit {
  appearance: none; border: 0; padding: 0.3rem 0.75rem; border-radius: var(--ac-r-pill); cursor: pointer;
  background: var(--ac-surface-3); color: var(--ac-text); font: inherit; font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold);
  transition: background var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-money__unit:hover { background: var(--ac-hover); }
.ac-money__unit:active { transform: var(--ac-press); }
.ac-money__unit:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-money__words { min-block-size: 1.3em; margin-block-start: var(--ac-s-1); font-size: var(--ac-fs-xs); color: var(--ac-muted); line-height: var(--ac-lh-snug); }
.ac-money__words:not(:empty) { animation: ac-money-pop var(--ac-dur-2) var(--ac-ease); }

/* card number / Sheba inputs */
.ac-cardnum__bank, .ac-sheba__bank { gap: var(--ac-s-1); padding-inline: var(--ac-s-2); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); color: var(--ac-text-soft); }
.ac-cardnum__bank .ac-bank-logo, .ac-sheba__bank .ac-bank-logo { inline-size: 1.5rem; block-size: 1.5rem; }
.ac-cardnum__bank:empty, .ac-sheba__bank:empty { display: none; }
.ac-sheba__ir { font-weight: var(--ac-fw-semibold); color: var(--ac-text-soft); letter-spacing: 0.04em; }
.ac-sheba .ac-input, [data-card] { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ac-sheba__status { display: flex; align-items: center; gap: 0.375rem; min-block-size: 1.3em; margin-block-start: var(--ac-s-1); font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-sheba__status .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-sheba__status[data-state="valid"] { color: var(--ac-success-ink); }
.ac-sheba__status[data-state="invalid"] { color: var(--ac-danger-ink); }
.ac-sheba[data-valid] { border-color: color-mix(in oklab, var(--ac-success) 55%, var(--ac-border)); }

/* ---------------------------------------------------------------- bank card */
.ac-bcard {
  --_w: 22rem; --_rx: 0deg; --_ry: 0deg; --_mx: 50%; --_my: 30%; --_accent: #fff;
  position: relative; display: block; inline-size: min(100%, var(--_w)); aspect-ratio: 85.6 / 53.98;
  container-type: inline-size; perspective: 1100px; direction: ltr; text-align: start; color: #fff;
  border-radius: 14px; outline: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ac-bcard[data-size="sm"] { --_w: 16rem; }
.ac-bcard[data-size="lg"] { --_w: 26rem; }
.ac-bcard[data-size="fluid"] { --_w: 100%; }
.ac-bcard__tilt, .ac-bcard__flip, .ac-bcard__face, .ac-bcard__layers, .ac-bcard__layer, .ac-bcard__shine { position: absolute; inset: 0; }
.ac-bcard__tilt { transform: rotateX(var(--_rx)) rotateY(var(--_ry)); transform-style: preserve-3d; transition: transform 600ms var(--ac-ease), translate 320ms var(--ac-ease); }
.ac-bcard[data-tilting] .ac-bcard__tilt { transition: transform 80ms linear, translate 320ms var(--ac-ease); }
.ac-bcard:hover .ac-bcard__tilt { translate: 0 -4px; }
.ac-bcard__flip { transform-style: preserve-3d; transition: transform 850ms cubic-bezier(0.34, 1.3, 0.5, 1); }
.ac-bcard[data-flipped] .ac-bcard__flip { transform: rotateY(180deg); }
.ac-bcard__face {
  overflow: hidden; isolation: isolate; border-radius: 3.72cqi; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 3.2cqi 6cqi -3cqi rgb(0 0 0 / 0.55), 0 0.5cqi 1.2cqi rgb(0 0 0 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.18);
  transition: filter var(--ac-dur-3), box-shadow var(--ac-dur-3);
}
.ac-bcard__back { transform: rotateY(180deg); }
.ac-bcard:focus-visible .ac-bcard__face { box-shadow: 0 0 0 3px var(--ac-surface-1), 0 0 0 5px var(--ac-ring), 0 3.2cqi 6cqi -3cqi rgb(0 0 0 / 0.55); }
.ac-bcard[data-frozen] .ac-bcard__face { filter: grayscale(1) brightness(1.08) contrast(0.9); }
.ac-bcard__layers { z-index: -3; }
.ac-bcard__layer {
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--_c1) 62%, white 38%) 0%, transparent 52%),
    radial-gradient(70% 90% at 0% 100%, color-mix(in oklab, var(--_c2) 70%, black 30%) 0%, transparent 60%),
    linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.07) 38% 47%, transparent 47% 58%, rgb(255 255 255 / 0.04) 58% 63%, transparent 63%),
    linear-gradient(135deg, var(--_c1), var(--_c2));
}
.ac-bcard__pattern {
  position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0.45; mix-blend-mode: soft-light;
  background:
    var(--_guilloche) 120% 50% / 115% auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.ac-bcard__shine { z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(55% 75% at var(--_mx) var(--_my), rgb(255 255 255 / 0.26), transparent 62%); transition: opacity 400ms var(--ac-ease); mix-blend-mode: overlay; }
.ac-bcard[data-tilting] .ac-bcard__shine { opacity: 1; }
.ac-bcard__front::after {
  content: ""; position: absolute; inset: -20% -60%; z-index: 5; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.22) 48%, rgb(255 255 255 / 0.05) 52%, transparent 58%);
  transform: translateX(calc(-70% * var(--ac-dir, 1))); opacity: 0;
}
.ac-bcard:is(:hover, :focus-visible) .ac-bcard__front::after, .ac-bcard[data-sweep] .ac-bcard__front::after { animation: ac-bcard-sweep 1.15s var(--ac-ease) both; }
@keyframes ac-bcard-sweep { 0% { transform: translateX(calc(-70% * var(--ac-dir, 1))); opacity: 1; } 100% { transform: translateX(calc(70% * var(--ac-dir, 1))); opacity: 1; } }

.ac-bcard__top { position: absolute; inset-block-start: 5.4cqi; inset-inline: 6.4cqi; display: flex; justify-content: flex-start; }
.ac-bcard[data-region="ir"] .ac-bcard__top { justify-content: flex-end; }
.ac-bcard__brand { display: flex; align-items: center; gap: 2.2cqi; min-inline-size: 0; }
.ac-bcard[data-region="ir"] .ac-bcard__brand { flex-direction: row-reverse; }
.ac-bcard__logo, .ac-bcard__net { display: grid; flex: none; }
.ac-bcard__logo > *, .ac-bcard__net > * { grid-area: 1 / 1; display: grid; }
.ac-bcard__logo { inline-size: 10.5cqi; block-size: 10.5cqi; }
.ac-bcard__logo .ac-bank-logo, .ac-bcard__net .ac-bank-logo { inline-size: 100%; block-size: 100%; color: #fff; filter: drop-shadow(0 0.25cqi 0.4cqi rgb(0 0 0 / 0.25)); }
.ac-bcard__name { font-size: 4.1cqi; font-weight: var(--ac-fw-bold); line-height: 1.15; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.3cqi 0.8cqi rgb(0 0 0 / 0.25); }
.ac-bcard__chip { position: absolute; inset-block-start: 20.5cqi; inset-inline-start: 9cqi; inline-size: 13.6cqi; filter: drop-shadow(0 0.3cqi 0.5cqi rgb(0 0 0 / 0.3)); }
.ac-bcard__nfc { position: absolute; inset-block-start: 22.2cqi; inset-inline-start: 25.5cqi; inline-size: 6.6cqi; block-size: 6.6cqi; opacity: 0.85; }
.ac-bcard__number {
  position: absolute; inset-block-start: 36cqi; inset-inline: 9cqi 6cqi; display: flex; gap: 3.6cqi; justify-content: space-between;
  font: 600 6.5cqi/1 var(--ac-font-mono); letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #e9eaee 45%, #b9bcc4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0.3cqi 0 rgb(0 0 0 / 0.5)) drop-shadow(0 -0.12cqi 0 rgb(255 255 255 / 0.25));
}
.ac-bcard__number span { display: flex; }
.ac-bcard__number i { display: inline-block; font-style: normal; }
.ac-bcard__number i[data-dot] { color: rgb(255 255 255 / 0.82); -webkit-text-fill-color: rgb(255 255 255 / 0.82); }
.ac-bcard__bottom { position: absolute; inset-block-end: 5.4cqi; inset-inline: 9cqi 6.4cqi; display: flex; align-items: flex-end; gap: 6cqi; }
.ac-bcard__field { display: grid; gap: 0.9cqi; min-inline-size: 0; }
.ac-bcard__holder { flex: 1; }
.ac-bcard__field small { font-size: 2.3cqi; font-weight: var(--ac-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.66; white-space: nowrap; }
.ac-bcard__field b { font-size: 3.9cqi; font-weight: var(--ac-fw-semibold); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.25cqi 0 rgb(0 0 0 / 0.35); }
.ac-bcard__holder b { text-transform: uppercase; }
.ac-bcard__exp b { font-family: var(--ac-font-mono); font-variant-numeric: tabular-nums; }
.ac-bcard__net { inline-size: 15cqi; block-size: 9.5cqi; }
.ac-bcard[data-network="shetab"] .ac-bcard__net, .ac-bcard[data-network="mir"] .ac-bcard__net, .ac-bcard[data-network="unionpay"] .ac-bcard__net { inline-size: 9.5cqi; }
.ac-bcard[data-network="mastercard"] .ac-bcard__net { inline-size: 12cqi; }

/* back */
.ac-bcard__stripe { position: absolute; inset-inline: 0; inset-block-start: 6cqi; block-size: 11.5cqi; background: linear-gradient(180deg, #1d1d1f, #050506 60%, #19191b); box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.08); }
.ac-bcard__sign { position: absolute; inset-block-start: 22.5cqi; inset-inline: 6.4cqi; display: flex; gap: 1.6cqi; block-size: 8.5cqi; }
.ac-bcard__sigpanel { flex: 1; border-radius: 0.9cqi; background: repeating-linear-gradient(-45deg, #f7f4ea 0 0.9cqi, #e6e0cb 0.9cqi 1.8cqi); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.ac-bcard__cvv { display: grid; place-content: center; inline-size: 17cqi; border-radius: 0.9cqi; background: #fff; color: #121214; text-align: center; }
.ac-bcard__cvv small { font-size: 1.9cqi; font-weight: var(--ac-fw-bold); letter-spacing: 0.06em; opacity: 0.55; }
.ac-bcard__cvv b { font: italic 600 4.2cqi/1 var(--ac-font-mono); letter-spacing: 0.1em; }
.ac-bcard__fine { position: absolute; inset-block-start: 34.5cqi; inset-inline: 6.4cqi; margin: 0; font-size: 2.45cqi; line-height: 1.5; opacity: 0.72; direction: rtl; text-align: start; }
:root[dir="ltr"] .ac-bcard__fine { direction: ltr; }
.ac-bcard__backfoot { position: absolute; inset-block-end: 4.6cqi; inset-inline: 6.4cqi; display: flex; align-items: center; justify-content: space-between; }
.ac-bcard__backfoot .ac-bcard__logo { inline-size: 8.5cqi; block-size: 8.5cqi; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .ac-bcard__tilt, .ac-bcard__flip { transition-duration: 1ms; } .ac-bcard__front::after { animation: none !important; } }
.ac-bcard[data-region="ir"] .ac-bcard__bottom { flex-direction: row-reverse; inset-inline: 6.4cqi 9cqi; }
.ac-bcard[data-region="ir"] .ac-bcard__field { justify-items: end; text-align: end; }
.ac-bcard__field small { unicode-bidi: plaintext; }
@media (max-width: 639.98px) { .ac-sheba .ac-input { letter-spacing: 0; } .ac-sheba .ac-sheba__bank { display: none; } }


/* ==== css/components/form.css ==== */
/* ==========================================================================
   Forms — layout, inputs, choices, range, rating, OTP, number, password,
   swatches, combobox, tags, dropzone, wizard. Pop panels: datepicker.css
   ========================================================================== */

/* ---- layout ---------------------------------------------------------- */
.ac-form { display: grid; gap: var(--ac-s-5); }
.ac-form-grid { display: grid; gap: var(--ac-s-4) var(--ac-s-5); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .ac-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-form-grid > .ac-span-full { grid-column: 1 / -1; }
}
.ac-form-section { display: grid; gap: var(--ac-s-4); padding-block: var(--ac-s-6); border-block-start: 1px solid var(--ac-border); }
.ac-form-section:first-child { border: 0; padding-block-start: 0; }
.ac-form-section__title { font-size: var(--ac-fs-lg); font-weight: var(--ac-fw-semibold); }
.ac-form-section__sub { color: var(--ac-muted); font-size: var(--ac-fs-sm); margin-block-start: var(--ac-s-1); }
@media (min-width: 1024px) { .ac-form-section { grid-template-columns: minmax(12rem, 1fr) 2.2fr; gap: var(--ac-s-8); } }
.ac-form-actions { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); justify-content: flex-end; padding-block-start: var(--ac-s-4); border-block-start: 1px solid var(--ac-border); }

.ac-field { display: grid; gap: var(--ac-s-2); min-width: 0; align-content: start; }
.ac-label { display: flex; align-items: baseline; gap: var(--ac-s-1); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); color: var(--ac-text); }
.ac-label__req { color: var(--ac-danger); }
.ac-label__opt { margin-inline-start: auto; color: var(--ac-faint); font-weight: var(--ac-fw-regular); font-size: var(--ac-fs-xs); }
.ac-help { font-size: var(--ac-fs-xs); color: var(--ac-muted); line-height: var(--ac-lh-snug); }
.ac-field__error {
  display: flex; align-items: center; gap: var(--ac-s-1);
  font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); color: var(--ac-danger-ink);
  animation: ac-err-in var(--ac-dur-3) var(--ac-ease);
}
.ac-field__error::before { content: "!"; display: grid; place-items: center; flex: none; inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: var(--ac-danger); color: var(--ac-accent-contrast); font-size: 0.625rem; font-weight: var(--ac-fw-black); }
.ac-field[data-invalid] > .ac-help { display: none; }
@keyframes ac-err-in { from { opacity: 0; transform: translateY(-4px); } }

.ac-form-summary { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: var(--ac-s-2) var(--ac-s-4); margin: 0; padding: var(--ac-s-4); border-radius: var(--ac-r-xl); background: var(--ac-surface-3); border: 1px solid var(--ac-border); font-size: var(--ac-fs-sm); }
.ac-form-summary[hidden] { display: none; }
.ac-form-summary dt { color: var(--ac-muted); }
.ac-form-summary dd { margin: 0; font-weight: var(--ac-fw-medium); overflow-wrap: anywhere; }

/* ---- text inputs ----------------------------------------------------- */
.ac-input, .ac-select, .ac-input-group {
  --_bd: var(--ac-border);
  --_fill: var(--ac-surface-3);
  inline-size: 100%;
  min-block-size: var(--ac-control-h);
  border: 1px solid var(--_bd);
  border-radius: var(--ac-field-r, calc(var(--ac-control-h) / 2));
  background: var(--_fill);
  color: var(--ac-text);
  font-size: var(--ac-fs-md);
  transition: border-color var(--ac-dur-1) var(--ac-ease), box-shadow var(--ac-dur-2) var(--ac-ease), background-color var(--ac-dur-1);
}
.ac-input, .ac-select { padding-inline: calc(var(--ac-control-px) + 0.25rem); outline: none; }
textarea.ac-input { border-radius: var(--ac-r-lg); padding-block: var(--ac-s-2); min-block-size: 6rem; resize: vertical; line-height: var(--ac-lh-normal); field-sizing: content; max-block-size: 20rem; }
.ac-input:hover, .ac-select:hover, .ac-input-group:hover { --_bd: var(--ac-border-strong); }
.ac-input:focus-visible, .ac-select:focus-visible, .ac-input-group:focus-within { --_bd: var(--ac-accent); --_fill: var(--ac-surface-1); box-shadow: var(--ac-focus); }
.ac-input:disabled, .ac-select:disabled, .ac-input-group:has(:disabled:not(button)) { opacity: 0.55; cursor: not-allowed; }
.ac-input[readonly]:not(.ac-date .ac-input, .ac-time .ac-input) { --_fill: var(--ac-surface-2); }
.ac-input--sm { min-block-size: var(--ac-control-h-sm); font-size: var(--ac-fs-sm); }
.ac-input--lg { min-block-size: var(--ac-control-h-lg); font-size: var(--ac-fs-lg); }
@media (pointer: coarse) { .ac-input, .ac-select, .ac-input-group { min-block-size: max(var(--ac-control-h), 2.75rem); font-size: max(16px, var(--ac-fs-md)); } }

.ac-input-group[data-multiline], .ac-tags, .ac-combo__control:has(.ac-chip) { border-radius: var(--ac-r-lg); }
.ac-input-group { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-1) 0; padding-inline: var(--ac-s-1); cursor: text; }
.ac-input-group > .ac-input { flex: 1 1 4rem; min-inline-size: 0; border: 0; box-shadow: none; background: transparent; border-radius: 0; padding-inline: var(--ac-s-2); min-block-size: calc(var(--ac-control-h) - 2px); }
.ac-input-group__affix { display: inline-flex; align-items: center; gap: var(--ac-s-1); padding-inline: var(--ac-s-2); color: var(--ac-muted); font-size: var(--ac-fs-sm); white-space: nowrap; }
.ac-input-group__affix:has(.ac-icon) { padding-inline: var(--ac-s-3) 0; }
.ac-input-group__affix + .ac-input { padding-inline-start: var(--ac-s-1); }
.ac-input-group__affix--box { align-self: center; block-size: calc(var(--ac-control-h) - 10px); margin-inline: 3px 0; padding-inline: var(--ac-s-3); border-radius: var(--ac-r-pill); background: var(--ac-surface-1); color: var(--ac-text-soft); box-shadow: 0 0 0 1px var(--ac-border); }
.ac-input-group__btn {
  display: grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem;
  border-radius: 50%; color: var(--ac-muted);
  transition: background var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-input-group__btn:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-input-group__btn:active { transform: scale(0.9); }
.ac-input-group__btn:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-input-group__btn .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-input-group__btn[hidden] { display: none; }
.ac-input-group__count { padding-inline: var(--ac-s-2); font-size: var(--ac-fs-xs); color: var(--ac-faint); }
.ac-input-group__count[data-full] { color: var(--ac-warning-ink); }
.ac-input-group[data-multiline] { align-items: flex-start; padding: 0; }
.ac-input-group[data-multiline] > .ac-input { padding: var(--ac-s-2) var(--ac-control-px) var(--ac-s-6); }
.ac-input-group[data-multiline] > .ac-input-group__count { position: absolute; inset-block-end: var(--ac-s-2); inset-inline-end: var(--ac-s-1); }

/* floating label */
.ac-float { padding-block-start: 0; }
.ac-float > label { position: absolute; inset-inline-start: calc(var(--ac-s-4) + 1px); inset-block-start: 50%; translate: 0 -50%; max-inline-size: calc(100% - 2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-muted); font-size: var(--ac-fs-md); pointer-events: none; transform-origin: 0 0; transition: all var(--ac-dur-2) var(--ac-ease); }
.ac-float > label:dir(rtl) { transform-origin: 100% 0; }
.ac-float:has(> textarea) > label { inset-block-start: var(--ac-s-3); translate: none; }
.ac-float { min-block-size: 3.25rem; --ac-field-r: var(--ac-r-lg); }
.ac-float > .ac-input { padding-block: 1.1rem 0.25rem; align-self: stretch; }
.ac-float:focus-within > label, .ac-float > .ac-input:not(:placeholder-shown) ~ label { inset-block-start: 0.3rem; translate: 0 0; font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); letter-spacing: 0.01em; }
.ac-float:focus-within > label { color: var(--ac-accent-ink); }
.ac-float > .ac-input::placeholder { color: transparent; }

/* native select */
.ac-select { appearance: none; padding-inline-end: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ac-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--ac-muted) 50%);
  background-size: 5px 5px; background-repeat: no-repeat; background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.85rem) 52%; }
.ac-select:dir(rtl) { background-position: 0.85rem 52%, 1.15rem 52%; }
.ac-select[multiple] { background-image: none; padding-block: var(--ac-s-2); padding-inline-end: var(--ac-control-px); }

/* invalid */
.ac-field[data-invalid] :is(.ac-input, .ac-select, .ac-input-group, .ac-otp__box, .ac-number, .ac-dropzone__area) { --_bd: var(--ac-danger); }
.ac-field[data-invalid] :is(.ac-input, .ac-select):focus-visible, .ac-field[data-invalid] :is(.ac-input-group, .ac-number):focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac-danger) 25%, transparent); }
.ac-field[data-invalid] .ac-input-group > .ac-input { box-shadow: none; }
.ac-field[data-valid] .ac-input-group, .ac-field[data-valid] > .ac-input { --_bd: color-mix(in oklab, var(--ac-success) 60%, transparent); }

/* ---- choices --------------------------------------------------------- */
.ac-choice { display: flex; align-items: flex-start; gap: var(--ac-s-3); cursor: pointer; font-size: var(--ac-fs-md); line-height: 1.35; min-block-size: 1.5rem; }
.ac-choice > span { display: grid; gap: 2px; padding-block-start: 1px; }
.ac-choice small { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-choice:has(:disabled) { opacity: 0.5; cursor: not-allowed; }
.ac-choice--card { padding: var(--ac-s-3) var(--ac-s-4); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-surface-3); transition: border-color var(--ac-dur-1), background var(--ac-dur-1), box-shadow var(--ac-dur-2); }
.ac-choice--card:hover { border-color: var(--ac-border-strong); }
.ac-choice--card:has(:checked) { border-color: var(--ac-text); background: var(--ac-surface-1); box-shadow: 0 0 0 1px var(--ac-text); }
.ac-choice-group { display: grid; gap: var(--ac-s-3); border: 0; padding: 0; margin: 0; min-width: 0; }
.ac-choice-group--row { display: flex; flex-wrap: wrap; gap: var(--ac-s-3) var(--ac-s-5); }

.ac-check, .ac-radio, .ac-switch {
  appearance: none; flex: none; margin: 0; display: inline-grid; place-items: center; cursor: pointer;
  inline-size: 1.25rem; block-size: 1.25rem; border: 1.5px solid var(--ac-border-strong); background: var(--ac-surface-1); color: var(--ac-text);
  transition: background var(--ac-dur-2) var(--ac-ease), border-color var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2);
}
.ac-check { border-radius: 6px; }
.ac-radio { border-radius: 50%; }
.ac-check::before, .ac-radio::before { content: ""; inline-size: 100%; block-size: 100%; background: var(--ac-surface-1); scale: 0; transition: scale var(--ac-dur-2) var(--ac-ease-spring); }
.ac-check::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.ac-check:indeterminate::before { mask: linear-gradient(#000 0 0) center / 55% 2.5px no-repeat; scale: 1; }
.ac-radio::before { inline-size: 45%; block-size: 45%; border-radius: 50%; }
:is(.ac-check, .ac-radio):checked, .ac-check:indeterminate { background: var(--ac-text); border-color: var(--ac-text); }
:is(.ac-check, .ac-radio):checked::before { scale: 1; }
:is(.ac-check, .ac-radio, .ac-switch):hover:not(:checked) { border-color: var(--ac-muted); }
:is(.ac-check, .ac-radio, .ac-switch):focus-visible { outline: none; box-shadow: var(--ac-focus); }
:is(.ac-check, .ac-radio, .ac-switch):active { transform: scale(0.9); }
.ac-switch { inline-size: 2.375rem; block-size: 1.375rem; border-radius: var(--ac-r-pill); border: 0; background: var(--ac-border-strong); padding: 2px; place-items: center start; }
.ac-switch::before { content: ""; inline-size: 1.125rem; block-size: 1.125rem; border-radius: 50%; background: var(--ac-accent-contrast); box-shadow: var(--ac-shadow-sm); transition: translate var(--ac-dur-3) var(--ac-ease-spring), inline-size var(--ac-dur-2) var(--ac-ease); }
.ac-switch:active::before { inline-size: 1.375rem; }
.ac-switch:checked { background: var(--ac-accent); }
.ac-switch:checked::before { translate: 1rem; }
.ac-switch:checked:active::before { translate: 0.75rem; }
.ac-switch:dir(rtl):checked::before { translate: -1rem; }
.ac-switch:dir(rtl):checked:active::before { translate: -0.75rem; }
.ac-field[data-invalid] :is(.ac-check, .ac-radio) { border-color: var(--ac-danger); }

/* ---- range ----------------------------------------------------------- */
.ac-range { --_p: 50%; --_dir: to right; appearance: none; inline-size: 100%; block-size: 1.5rem; background: transparent; cursor: pointer; margin: 0; }
.ac-range:dir(rtl) { --_dir: to left; }
.ac-range::-webkit-slider-runnable-track { block-size: 4px; border-radius: 4px; background: linear-gradient(var(--_dir), var(--ac-accent) var(--_p), var(--_track, var(--ac-surface-3)) var(--_p)); }
.ac-range::-moz-range-track { block-size: 4px; border-radius: 4px; background: linear-gradient(var(--_dir), var(--ac-accent) var(--_p), var(--_track, var(--ac-surface-3)) var(--_p)); }
.ac-range::-webkit-slider-thumb { appearance: none; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: -7px; border-radius: 50%; background: var(--ac-surface-1); border: 4px solid var(--ac-accent); box-shadow: var(--ac-shadow-sm); transition: transform var(--ac-dur-2) var(--ac-ease-spring), box-shadow var(--ac-dur-2); }
.ac-range::-moz-range-thumb { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--ac-surface-1); border: 4px solid var(--ac-accent); }
.ac-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.ac-range:focus-visible { outline: none; }
.ac-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ac-focus); }
.ac-range-scale { display: flex; justify-content: space-between; font-size: var(--ac-fs-2xs); color: var(--ac-faint); font-variant-numeric: tabular-nums; }
.ac-limit { --_track: var(--ac-border-strong); display: grid; gap: var(--ac-s-2); padding: var(--ac-s-4); border-radius: var(--ac-r-xl); background: var(--ac-surface-3); border: 1px solid var(--ac-border); }
.ac-limit__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ac-s-3); }
.ac-limit__label { font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-limit__value { font-size: var(--ac-fs-xl); font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; }
.ac-limit__used { display: flex; gap: var(--ac-s-2); align-items: center; font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-limit__used strong { color: var(--ac-text); font-weight: var(--ac-fw-semibold); }

/* ---- toggle rows (settings list: icon · title + description · switch) -- */
.ac-toggle-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ac-toggle-row { display: flex; align-items: center; gap: var(--ac-s-3); padding-block: var(--ac-s-3); cursor: pointer; min-block-size: var(--ac-touch); }
.ac-toggle-row + .ac-toggle-row { border-block-start: 1px solid var(--ac-border); }
.ac-toggle-row__icon { display: grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--ac-surface-3); color: var(--ac-text-soft); transition: color var(--ac-dur-2); }
.ac-toggle-row__icon .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-toggle-row__text { flex: 1; min-inline-size: 0; display: grid; gap: 1px; }
.ac-toggle-row__title { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); }
.ac-toggle-row__desc { font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-toggle-row:has(:disabled) { opacity: 0.5; cursor: not-allowed; }
.ac-toggle-row:has(.ac-switch:not(:checked)) .ac-toggle-row__icon { color: var(--ac-faint); }
.ac-range-wrap { position: relative; display: block; padding-block-start: 1.9rem; }
.ac-range__bubble { position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--_p) * (100% - 1.125rem) / 100 + 0.5625rem); translate: -50% 0; padding: 2px var(--ac-s-2); border-radius: var(--ac-r-pill); background: var(--ac-text); color: var(--ac-surface-1); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); white-space: nowrap; pointer-events: none; transition: scale var(--ac-dur-2) var(--ac-ease-spring); }
.ac-range__bubble:dir(rtl) { translate: 50% 0; }
.ac-range-wrap:not(:hover, :focus-within) .ac-range__bubble { scale: 0.85; opacity: 0.85; }

/* ---- rating ---------------------------------------------------------- */
.ac-rating { display: inline-flex; gap: 2px; }
.ac-rating__star { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--ac-r-sm); color: var(--ac-border-strong); transition: color var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease); }
.ac-rating__star .ac-icon { inline-size: 1.4rem; block-size: 1.4rem; fill: currentColor; stroke-width: 1.5; }
.ac-rating__star[data-on] { color: var(--ac-accent); }
button.ac-rating__star:focus-visible { outline: none; box-shadow: var(--ac-focus); }
@media (hover: hover) {
  .ac-rating:has(button:hover) .ac-rating__star { color: var(--ac-border-strong); }
  .ac-rating .ac-rating__star:has(~ button:hover), .ac-rating button.ac-rating__star:hover { color: var(--ac-accent); transform: scale(1.08); }
}
span.ac-rating__star { inline-size: 1.1rem; block-size: 1.1rem; }
span.ac-rating__star .ac-icon { inline-size: 1rem; block-size: 1rem; }

/* ---- OTP ------------------------------------------------------------- */
.ac-otp { position: relative; display: flex; gap: clamp(4px, 1.5vw, var(--ac-s-2)); justify-content: center; }
.ac-otp__box {
  --_bd: var(--ac-border);
  flex: 1 1 0; max-inline-size: 3.25rem; min-inline-size: 0; block-size: 3.5rem;
  text-align: center; font-size: var(--ac-fs-2xl); font-weight: var(--ac-fw-bold); caret-color: var(--ac-accent);
  border: 1.5px solid var(--_bd); border-radius: var(--ac-r-lg); background: var(--ac-surface-3); outline: none;
  transition: border-color var(--ac-dur-1), box-shadow var(--ac-dur-2), transform var(--ac-dur-2) var(--ac-ease-spring);
}
.ac-otp__box:focus { --_bd: var(--ac-accent); background: var(--ac-surface-1); box-shadow: var(--ac-focus); transform: translateY(-2px); }
.ac-otp__box { animation: ac-otp-in 460ms var(--ac-ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.ac-otp__box:focus { animation: ac-otp-in 460ms var(--ac-ease-out) backwards, ac-otp-glow 1.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 45ms), 0s; }
.ac-otp[data-state="error"] .ac-otp__box { --_bd: var(--ac-danger); background: var(--ac-danger-soft); color: var(--ac-danger-ink); caret-color: var(--ac-danger); }
.ac-otp[data-state="error"] .ac-otp__box:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-danger) 22%, transparent); animation: none; }
.ac-otp[data-state="success"] .ac-otp__box { pointer-events: none; animation: none; }
.ac-otp__done { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ac-otp__done svg { block-size: 100%; max-block-size: 3.75rem; aspect-ratio: 1; overflow: visible; }
.ac-otp__done-fill { fill: var(--ac-success); }
.ac-otp__done-ring { fill: none; stroke: var(--ac-success); stroke-width: 3; stroke-dasharray: 1; transform: rotate(-90deg); transform-origin: center; transform-box: fill-box; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--ac-success) 40%, transparent)); }
.ac-otp__done-check { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
@keyframes ac-otp-in { from { opacity: 0; transform: translateY(calc(10px * var(--ac-travel, 1))) scale(calc(1 - 0.12 * var(--ac-travel, 1))); } }
@keyframes ac-otp-glow { 0%, 100% { box-shadow: 0 0 0 3px var(--ac-accent-soft); } 50% { box-shadow: 0 0 0 5px var(--ac-accent-soft), 0 0 18px -2px color-mix(in srgb, var(--ac-accent) 45%, transparent); } }
.ac-otp__box[data-filled] { --_bd: var(--ac-text); background: var(--ac-surface-1); }
.ac-otp__box:nth-child(3):not(:last-of-type) { margin-inline-end: var(--ac-s-2); }
.ac-otp[data-length="4"] .ac-otp__box:nth-child(3) { margin: 0; }

/* ---- number ---------------------------------------------------------- */
.ac-number { --_bd: var(--ac-border); display: inline-flex; align-items: center; gap: 2px; inline-size: 9rem; max-inline-size: 100%; min-block-size: var(--ac-control-h); padding: 3px; border: 1px solid var(--_bd); border-radius: var(--ac-r-pill); background: var(--ac-surface-3); overflow: hidden; transition: border-color var(--ac-dur-1), box-shadow var(--ac-dur-2); }
.ac-number:focus-within { --_bd: var(--ac-accent); box-shadow: var(--ac-focus); }
.ac-number > .ac-input { flex: 1; min-inline-size: 0; border: 0; box-shadow: none; text-align: center; padding: 0; font-weight: var(--ac-fw-semibold); appearance: textfield; -moz-appearance: textfield; background: transparent; }
.ac-number > .ac-input::-webkit-inner-spin-button, .ac-number > .ac-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.ac-number__btn { display: grid; place-items: center; inline-size: calc(var(--ac-control-h) - 8px); block-size: calc(var(--ac-control-h) - 8px); flex: none; border-radius: 50%; color: var(--ac-text); background: var(--ac-surface-1); box-shadow: 0 0 0 1px var(--ac-border); transition: background var(--ac-dur-1), color var(--ac-dur-1); touch-action: manipulation; }
.ac-number__btn:hover:not(:disabled) { background: var(--ac-text); color: var(--ac-surface-1); }
.ac-number__btn:active:not(:disabled) .ac-icon { transform: scale(0.8); }
.ac-number__btn:disabled { color: var(--ac-faint); cursor: not-allowed; }
.ac-number__btn .ac-icon { inline-size: 1rem; block-size: 1rem; transition: transform var(--ac-dur-1) var(--ac-ease); }

/* ---- password strength ---------------------------------------------- */
.ac-strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: var(--ac-s-1); --_c: var(--ac-border-strong); }
.ac-strength > span { block-size: 4px; border-radius: 4px; background: var(--ac-surface-3); transition: background var(--ac-dur-3) var(--ac-ease); }
.ac-strength > small { min-inline-size: 4.5rem; text-align: end; font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); color: var(--_c); }
.ac-strength[data-score="0"], .ac-strength[data-score="1"] { --_c: var(--ac-danger); }
.ac-strength[data-score="2"] { --_c: var(--ac-warning); }
.ac-strength[data-score="3"] { --_c: var(--ac-info); }
.ac-strength[data-score="4"] { --_c: var(--ac-success); }
.ac-strength > span { position: relative; overflow: hidden; }
.ac-strength > span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--_c); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; transition: transform var(--ac-spring-bounce-dur, 600ms) var(--ac-spring-bounce, var(--ac-ease-spring)), opacity var(--ac-dur-2) var(--ac-ease), background-color var(--ac-dur-4) var(--ac-ease); }
.ac-strength > span:dir(rtl)::after { transform-origin: 100% 50%; }
.ac-strength > span:nth-child(2)::after { transition-delay: 40ms; } .ac-strength > span:nth-child(3)::after { transition-delay: 80ms; } .ac-strength > span:nth-child(4)::after { transition-delay: 120ms; }
.ac-strength[data-score="0"] > span:nth-child(-n+1)::after, .ac-strength[data-score="1"] > span:nth-child(-n+1)::after,
.ac-strength[data-score="2"] > span:nth-child(-n+2)::after, .ac-strength[data-score="3"] > span:nth-child(-n+3)::after,
.ac-strength[data-score="4"] > span:nth-child(-n+4)::after { transform: scaleX(1); opacity: 1; }
.ac-strength > small { transition: color var(--ac-dur-4) var(--ac-ease); }
/* password checklist: ticks draw their stroke; caps-lock warning slides open */
.ac-pwrules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--ac-s-1) var(--ac-s-3); margin: var(--ac-s-2) 0 0; padding: 0; list-style: none; font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-pwrules li { display: flex; align-items: center; gap: var(--ac-s-2); transition: color var(--ac-dur-3) var(--ac-ease); }
.ac-pwrules li[data-met] { color: var(--ac-success-ink); }
.ac-pwrules__mark { flex: none; inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ac-pwrules__mark circle { stroke: var(--ac-border-strong); fill: transparent; transition: stroke var(--ac-dur-3), fill var(--ac-dur-3); }
.ac-pwrules__mark path { stroke: var(--ac-success-contrast, #fff); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset var(--ac-dur-4) var(--ac-ease-out) 60ms, opacity var(--ac-dur-2); }
.ac-pwrules li[data-met] circle { stroke: var(--ac-success); fill: var(--ac-success); }
.ac-pwrules li[data-met] path { stroke-dashoffset: 0; opacity: 1; }
.ac-capslock { display: grid; grid-template-rows: 0fr; margin: 0; opacity: 0; transition: grid-template-rows var(--ac-dur-3) var(--ac-ease-out), opacity var(--ac-dur-2) var(--ac-ease), margin var(--ac-dur-3) var(--ac-ease-out); }
.ac-capslock[data-on] { grid-template-rows: 1fr; opacity: 1; margin-block-start: var(--ac-s-2); }
.ac-capslock__inner { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 0; overflow: hidden; color: var(--ac-warning-ink); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); transform: translateY(calc(-4px * var(--ac-travel, 1))); transition: transform var(--ac-dur-3) var(--ac-ease-out); }
.ac-capslock[data-on] .ac-capslock__inner { transform: none; }
.ac-capslock .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; padding: 1px; border-radius: 4px; background: var(--ac-warning-soft); }
.ac-pw-toggle .ac-icon { transform-origin: 50% 50%; }

/* ---- swatches -------------------------------------------------------- */
.ac-swatches { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); }
.ac-swatch { position: relative; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--_c, var(--ac-surface-3)); color: var(--ac-accent-contrast); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform var(--ac-dur-2) var(--ac-ease-spring), box-shadow var(--ac-dur-2); }
.ac-swatch:hover { transform: scale(1.08); }
.ac-swatch .ac-icon { inline-size: 1rem; block-size: 1rem; stroke-width: 3; scale: 0; transition: scale var(--ac-dur-2) var(--ac-ease-spring); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.ac-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ac-surface-1), 0 0 0 4px var(--_c, var(--ac-accent)); }
.ac-swatch[aria-checked="true"] .ac-icon { scale: 1; }
.ac-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ac-surface-1), 0 0 0 4px var(--ac-ring); }
.ac-swatch--custom { background: conic-gradient(from 0deg, #f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); }
.ac-swatch--custom[data-picked] { background: var(--_c); }
.ac-swatch--custom .ac-icon { scale: 1; }
.ac-swatch__native { position: absolute; inset: 0; opacity: 0; inline-size: 100%; block-size: 100%; cursor: pointer; }

/* ---- combobox & tags ------------------------------------------------- */
.ac-combo { position: relative; min-width: 0; }
.ac-combo__control { padding-block: 3px; }
.ac-combo__caret { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; color: var(--ac-muted); cursor: pointer; transition: rotate var(--ac-dur-2) var(--ac-ease); }
.ac-combo__caret .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-combo[data-open] .ac-combo__caret { rotate: 180deg; }
.ac-combo[aria-busy="true"] .ac-combo__caret .ac-icon { animation: ac-spin 0.8s linear infinite; }
.ac-chip--input { block-size: 1.75rem; padding-inline: var(--ac-s-3) var(--ac-s-2); max-inline-size: 12rem; background: var(--ac-surface-1); border-color: var(--ac-border); color: var(--ac-text); margin-inline-start: 2px; animation: ac-chip-in var(--ac-dur-3) var(--ac-ease-spring); }
@keyframes ac-chip-in { from { scale: 0.6; opacity: 0; } }
@keyframes ac-spin { to { rotate: 360deg; } }
.ac-tags { padding-block: 3px; }
.ac-tags > .ac-input:disabled { display: none; }
.ac-combo__list { list-style: none; margin: 0; padding: var(--ac-s-1); }
.ac-combo__opt { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 2.375rem; padding-inline: var(--ac-s-2) var(--ac-s-3); border-radius: var(--ac-r-md); cursor: pointer; font-size: var(--ac-fs-md); }
.ac-combo__opt[data-active] { background: var(--ac-hover); }
.ac-combo__opt[aria-selected="true"] { font-weight: var(--ac-fw-semibold); }
.ac-combo__opt[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.ac-combo__check { display: grid; place-items: center; inline-size: 1.125rem; flex: none; opacity: 0; }
.ac-combo__check .ac-icon { inline-size: 1rem; block-size: 1rem; stroke-width: 2.6; }
.ac-combo__opt[aria-selected="true"] .ac-combo__check { opacity: 1; }
.ac-combo__label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-combo__label mark { background: none; color: inherit; font-weight: var(--ac-fw-bold); text-decoration: underline 2px var(--ac-accent); text-underline-offset: 3px; }
.ac-combo__meta { color: var(--ac-faint); font-size: var(--ac-fs-xs); }
.ac-combo__group { padding: var(--ac-s-2) var(--ac-s-3) var(--ac-s-1); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); color: var(--ac-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ac-combo__status { padding: var(--ac-s-4); text-align: center; color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-combo__status[hidden] { display: none; }

/* ---- dropzone -------------------------------------------------------- */
.ac-dropzone { display: grid; gap: var(--ac-s-3); }
.ac-dropzone__area {
  --_bd: var(--ac-border-strong);
  position: relative; display: grid; justify-items: center; gap: var(--ac-s-2); padding: var(--ac-s-8) var(--ac-s-4); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--_bd); border-radius: var(--ac-r-xl); background: var(--ac-surface-3);
  transition: border-color var(--ac-dur-2), background var(--ac-dur-2), transform var(--ac-dur-2) var(--ac-ease);
}
.ac-dropzone__area:hover, .ac-dropzone[data-drag] .ac-dropzone__area { --_bd: var(--ac-accent); background: var(--ac-surface-2); }
.ac-dropzone[data-drag] .ac-dropzone__area { transform: scale(1.01); }
.ac-dropzone:has(input:focus-visible) .ac-dropzone__area { box-shadow: var(--ac-focus); --_bd: var(--ac-accent); }
.ac-dropzone__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--ac-surface-1); color: var(--ac-text); box-shadow: var(--ac-shadow-sm); transition: transform var(--ac-dur-3) var(--ac-ease-spring); }
.ac-dropzone[data-drag] .ac-dropzone__icon { transform: translateY(-4px) scale(1.08); }
.ac-dropzone__icon .ac-icon { inline-size: 1.4rem; block-size: 1.4rem; }
.ac-dropzone__text { font-size: var(--ac-fs-md); font-weight: var(--ac-fw-medium); }
.ac-dropzone__text u { color: var(--ac-text); text-decoration: underline 2px var(--ac-accent); text-underline-offset: 4px; font-weight: var(--ac-fw-semibold); }
.ac-dropzone__hint { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ac-s-2); }
.ac-files:empty { display: none; }
.ac-files__item { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2); padding-inline-end: var(--ac-s-1); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-surface-1); animation: ac-err-in var(--ac-dur-3) var(--ac-ease); transition: opacity var(--ac-dur-2), scale var(--ac-dur-2); }
.ac-files__item[data-state="leaving"] { opacity: 0; scale: 0.96; }
.ac-files__item[data-state="error"] { border-color: color-mix(in oklab, var(--ac-danger) 40%, transparent); background: var(--ac-danger-soft); }
.ac-files__item[data-state="error"] .ac-files__meta { color: var(--ac-danger-ink); }
.ac-files__thumb { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; flex: none; border-radius: var(--ac-r-md); background: var(--ac-surface-3); color: var(--ac-muted); overflow: hidden; }
.ac-files__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ac-files__main { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }
.ac-files__name { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); }
.ac-files__meta { font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-files__item .ac-progress { margin-block-start: 4px; transition: opacity var(--ac-dur-3); }
.ac-files__item[data-state="done"] .ac-progress { opacity: 0; block-size: 0; margin: 0; }
.ac-files__item[data-state="done"] .ac-files__meta { color: var(--ac-success-ink); }

/* ---- wizard ---------------------------------------------------------- */
.ac-wizard { display: grid; gap: var(--ac-s-6); }
.ac-wizard__step { display: grid; gap: var(--ac-s-4); border: 0; padding: 0; margin: 0; min-width: 0; }
.ac-wizard__step[hidden] { display: none; }
.ac-wizard__step:focus { outline: none; }
.ac-wizard__step[data-enter="next"] { animation: ac-step-next var(--ac-dur-4) var(--ac-ease); }
.ac-wizard__step[data-enter="prev"] { animation: ac-step-prev var(--ac-dur-4) var(--ac-ease); }
@keyframes ac-step-next { from { opacity: 0; translate: 24px 0; } }
@keyframes ac-step-prev { from { opacity: 0; translate: -24px 0; } }
.ac-wizard__step:dir(rtl)[data-enter="next"] { animation-name: ac-step-prev; }
.ac-wizard__step:dir(rtl)[data-enter="prev"] { animation-name: ac-step-next; }
.ac-wizard__nav { display: flex; align-items: center; gap: var(--ac-s-2); padding-block-start: var(--ac-s-4); border-block-start: 1px solid var(--ac-border); }
.ac-wizard__count { margin-inline-end: auto; color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-wizard__nav [hidden] { display: none; }
.ac-wizard .ac-stepper .ac-step[data-state="done"] { cursor: pointer; }
@media (max-width: 639.98px) {
  .ac-wizard .ac-stepper .ac-step:not([data-state="current"]) .ac-step__text { display: none; }
  .ac-wizard__nav { position: sticky; inset-block-end: calc(var(--ac-tabbar-h) + var(--ac-safe-bottom)); margin-inline: calc(var(--ac-card-pad) * -1); padding: var(--ac-s-3) var(--ac-card-pad); background: var(--ac-glass-bg-strong); backdrop-filter: var(--ac-glass-blur); -webkit-backdrop-filter: var(--ac-glass-blur); z-index: 2; }
  .ac-wizard__nav .ac-btn { flex: 1; }
  .ac-wizard__count { display: none; }
}


/* ==== css/components/langpicker.css ==== */
/* Language picker (langpicker.js): trigger pill + popover (sheet on phones) */
.ac-lp__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: calc(var(--ac-pill-h) - 10px);
  padding-inline: 4px 8px;
  border-radius: var(--ac-r-pill);
  color: var(--ac-text-soft);
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background-color var(--ac-dur-1) var(--ac-ease-hover), color var(--ac-dur-1) var(--ac-ease-hover), transform var(--ac-spring-dur) var(--ac-spring);
}
.ac-lp__trigger:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-lp__trigger:active { transform: var(--ac-press); transition-duration: var(--ac-dur-0); }
.ac-lp__trigger[aria-expanded="true"] { background: var(--ac-pill-bg); color: var(--ac-text); }
.ac-lp__code { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.ac-lp__chev { inline-size: 0.8rem !important; block-size: 0.8rem !important; color: var(--ac-muted); transition: transform var(--ac-spring-dur) var(--ac-spring); }
.ac-lp__trigger[aria-expanded="true"] .ac-lp__chev { transform: rotate(180deg); }
.ac-lp__trigger[data-compact] :is(.ac-lp__code, .ac-lp__chev) { display: none; }
.ac-lp__trigger[data-compact] { padding-inline: 4px; }

/* badge: circular script glyph (inline SVG) + region flag dot at the end-bottom */
.ac-lp__badge { position: relative; display: inline-grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; }
.ac-lp__badge--sm { inline-size: 1.625rem; block-size: 1.625rem; }
.ac-lp__badge svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.ac-lp__badge-bg { fill: var(--ac-surface-3); stroke: var(--ac-border); stroke-width: 1; }
.ac-lp__badge-glyph { fill: var(--ac-text); font-family: var(--ac-font); font-size: 13px; font-weight: var(--ac-fw-bold); letter-spacing: -0.02em; }
.ac-lp__trigger .ac-lp__badge-bg { fill: var(--ac-ink); stroke: none; }
.ac-lp__trigger .ac-lp__badge-glyph { fill: var(--ac-ink-contrast); }
.ac-lp__badge .ac-flag {
  --ac-flag: 0.8rem;
  position: absolute;
  inset-block-end: -1px;
  inset-inline-end: -2px;
  box-shadow: 0 0 0 2px var(--ac-elevated);
}
.ac-lp__badge--sm .ac-flag { --ac-flag: 0.625rem; box-shadow: 0 0 0 1.5px var(--ac-chrome-bg); }

/* popover */
.ac-lp--pop {
  position: fixed;
  left: var(--ac-x, 0); /* rtl-ok: position.js measures physical x */
  top: var(--ac-y, 0); /* rtl-ok: position.js measures physical y */
  z-index: calc(var(--ac-z-modal) + 1);
  inline-size: 18.5rem;
  max-inline-size: calc(100vw - 1rem);
  padding: var(--ac-s-2);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-r-2xl);
  background: var(--ac-elevated);
  box-shadow: var(--ac-shadow-xl);
  transform-origin: var(--ac-origin, top);
  opacity: 0;
  transform: translateY(calc(-6px * var(--ac-travel, 1))) scale(calc(1 - 0.04 * var(--ac-travel, 1)));
  transition: opacity var(--ac-dur-exit) var(--ac-ease), transform var(--ac-dur-exit) var(--ac-ease);
}
.ac-lp--pop[data-state="open"] { opacity: 1; transform: none; transition: opacity var(--ac-dur-2) var(--ac-ease), transform 380ms var(--ac-spring); }
.ac-lp__head { display: grid; gap: 1px; padding: var(--ac-s-2) var(--ac-s-3) var(--ac-s-3); }
.ac-lp__title { font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); }
.ac-lp__hint { font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-lp__search { display: flex; align-items: center; gap: var(--ac-s-2); margin: 0 var(--ac-s-1) var(--ac-s-2); padding-inline: var(--ac-s-3); min-block-size: 2.25rem; border-radius: var(--ac-r-pill); background: var(--ac-pill-bg); color: var(--ac-muted); }
.ac-lp__search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: var(--ac-fs-sm); color: var(--ac-text); }
.ac-lp__list { position: relative; display: grid; gap: 2px; max-block-size: min(22rem, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.ac-lp__item {
  display: flex;
  align-items: center;
  gap: var(--ac-s-3);
  inline-size: 100%;
  padding: var(--ac-s-2);
  border-radius: var(--ac-r-lg);
  text-align: start;
  color: var(--ac-text);
  outline: none;
  transition: background-color var(--ac-dur-1) var(--ac-ease-hover), transform var(--ac-spring-dur) var(--ac-spring);
}
.ac-lp__list .ac-hl { border-radius: var(--ac-r-lg); }
.ac-lp__item:active { transform: scale(0.98); transition-duration: var(--ac-dur-0); }
.ac-lp__item:focus-visible { box-shadow: inset 0 0 0 2px var(--ac-ring); }
.ac-lp__item[aria-selected="true"] .ac-lp__badge-bg { fill: var(--ac-ink); stroke: none; }
.ac-lp__item[aria-selected="true"] .ac-lp__badge-glyph { fill: var(--ac-ink-contrast); }
.ac-lp__item .ac-lp__badge-bg, .ac-lp__item .ac-lp__badge-glyph { transition: fill var(--ac-dur-3) var(--ac-ease-hover); }
.ac-lp__names { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.ac-lp__native { font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-lp__en { font-size: var(--ac-fs-xs); color: var(--ac-muted); }
/* names are <bdi>-isolated: each keeps its own direction, the row keeps the UI's alignment */
.ac-lp__dir {
  flex: none;
  padding: 2px 7px;
  border-radius: var(--ac-r-pill);
  background: var(--ac-neutral-soft);
  color: var(--ac-muted);
  font-size: 0.625rem;
  font-weight: var(--ac-fw-bold);
  letter-spacing: 0.08em;
}
.ac-lp__dir[data-dir="rtl"] { background: var(--ac-accent-soft); color: var(--ac-accent-ink); }
.ac-lp__check { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; flex: none; border-radius: 50%; color: var(--ac-ink-contrast); background: var(--ac-ink); opacity: 0; transform: scale(calc(1 - 0.5 * var(--ac-travel, 1))); transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-spring-bounce-dur) var(--ac-spring-bounce); }
.ac-lp__check .ac-icon { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 3; }
.ac-lp__item[aria-selected="true"] .ac-lp__check { opacity: 1; transform: none; }

/* phone: same list inside a bottom sheet, bigger rows */
.ac-lp--sheet .ac-lp__list { max-block-size: none; }
.ac-lp--sheet .ac-lp__item { min-block-size: 3.5rem; padding-inline: var(--ac-s-3); }
.ac-lp-sheet .ac-dialog__body { padding-inline: var(--ac-s-3); }
@media (max-width: 639.98px) {
  .ac-appbar .ac-lp__trigger { padding-inline: 3px; }
  .ac-appbar .ac-lp__trigger :is(.ac-lp__code, .ac-lp__chev) { display: none; }
}


/* ==== css/components/misc.css ==== */
/* ==========================================================================
   Misc display atoms: badge, chip, status dot, avatar (+group), kbd, divider,
   skeleton, progress (bar + ring), empty state, simple list rows, feed
   ========================================================================== */

/* ---- badge --------------------------------------------------------------------- */
/* .ac-badge [--accent|--success|--warning|--danger|--info|--neutral] [--solid] [--outline] ; dot: <span class="ac-badge ac-badge--success ac-badge--dot">Paid</span> */
.ac-badge {
  --_bg: var(--ac-neutral-soft);
  --_fg: var(--ac-neutral-ink);
  --_dot: var(--ac-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  block-size: 1.375rem;
  padding-inline: 0.5rem;
  border-radius: var(--ac-r-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-semibold);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.ac-badge .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; margin-inline: -1px; }
.ac-badge--accent { --_bg: var(--ac-accent-soft); --_fg: var(--ac-accent-ink); --_dot: var(--ac-accent); }
.ac-badge--success { --_bg: var(--ac-success-soft); --_fg: var(--ac-success-ink); --_dot: var(--ac-success); }
.ac-badge--warning { --_bg: var(--ac-warning-soft); --_fg: var(--ac-warning-ink); --_dot: var(--ac-warning); }
.ac-badge--danger { --_bg: var(--ac-danger-soft); --_fg: var(--ac-danger-ink); --_dot: var(--ac-danger); }
.ac-badge--info { --_bg: var(--ac-info-soft); --_fg: var(--ac-info-ink); --_dot: var(--ac-info); }
.ac-badge--neutral { --_bg: var(--ac-neutral-soft); --_fg: var(--ac-neutral-ink); }
.ac-badge--solid { --_bg: var(--_dot); --_fg: #fff; }
.ac-badge--solid.ac-badge--accent { --_fg: var(--ac-accent-contrast); }
.ac-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--ac-border-strong); color: var(--ac-text-soft); }
.ac-badge--dot::before {
  content: "";
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: var(--_dot);
  flex: none;
}
.ac-badge--lg { block-size: 1.75rem; padding-inline: 0.7rem; font-size: var(--ac-fs-sm); }
/* count bubble */
.ac-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding-inline: 0.35rem;
  border-radius: var(--ac-r-pill);
  background: var(--ac-danger);
  color: #fff;
  font-size: var(--ac-fs-2xs);
  font-weight: var(--ac-fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- chip --------------------------------------------------------------------------- */
/* <button class="ac-chip" aria-pressed="true">…</button>  removable: <span class="ac-chip">x <button class="ac-chip__remove" aria-label="…"><svg/></button></span> */
.ac-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-s-1);
  block-size: 2rem;
  padding-inline: var(--ac-s-3);
  border-radius: var(--ac-r-pill);
  border: 1px solid var(--ac-border);
  background: var(--ac-surface-1);
  color: var(--ac-text-soft);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-medium);
  white-space: nowrap;
  transition: background var(--ac-dur-1), border-color var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease);
}
button.ac-chip:hover, a.ac-chip:hover { border-color: var(--ac-muted); color: var(--ac-text); }
button.ac-chip:active, a.ac-chip:active { transform: scale(0.95); }
.ac-chip[aria-pressed="true"], .ac-chip[aria-selected="true"], .ac-chip[aria-checked="true"] {
  background: var(--ac-surface-1);
  border-color: var(--ac-ink);
  color: var(--ac-text);
  box-shadow: inset 0 0 0 0.5px var(--ac-ink);
}
.ac-chip .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-chip .ac-avatar { --ac-avatar: 1.375rem; margin-inline-start: calc(var(--ac-s-2) * -1); }
.ac-chip__remove {
  display: grid;
  place-items: center;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-inline: 0 calc(var(--ac-s-1) * -1);
  border-radius: 50%;
  color: var(--ac-muted);
}
.ac-chip__remove:hover { background: var(--ac-active); color: var(--ac-text); }
.ac-chip__remove .ac-icon { inline-size: 0.75rem; block-size: 0.75rem; }

/* ---- status dot ---------------------------------------------------------------------- */
/* <span class="ac-status" data-status="online|busy|away|offline|error"></span> ; live pulse: add .ac-status--pulse */
.ac-status {
  --_c: var(--ac-faint);
  position: relative;
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--_c);
  vertical-align: middle;
}
.ac-status[data-status="online"] { --_c: var(--ac-success); }
.ac-status[data-status="busy"], .ac-status[data-status="error"] { --_c: var(--ac-danger); }
.ac-status[data-status="away"] { --_c: var(--ac-warning); }
.ac-status[data-status="info"] { --_c: var(--ac-info); }
.ac-status--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--_c);
  animation: ac-status-pulse 1.8s var(--ac-ease-out) infinite;
}
@keyframes ac-status-pulse { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3); opacity: 0; } }

/* ---- avatar ----------------------------------------------------------------------------- */
/* <span class="ac-avatar [--sm|--lg|--xl|--square]" data-color="1..8"><img alt=""> | initials</span>
   presence: <span class="ac-avatar"><img><span class="ac-status" data-status="online"></span></span> */
.ac-avatar {
  --ac-avatar: 2.25rem;
  --_c: var(--ac-chart-1);
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--ac-avatar);
  block-size: var(--ac-avatar);
  flex: none;
  border-radius: 50%;
  background: color-mix(in oklab, var(--_c) 16%, var(--ac-surface-1));
  color: color-mix(in oklab, var(--_c) 80%, var(--ac-mix-toward));
  font-size: calc(var(--ac-avatar) * 0.38);
  font-weight: var(--ac-fw-bold);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  vertical-align: middle;
}
.ac-avatar > img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }
.ac-avatar--xs { --ac-avatar: 1.5rem; }
.ac-avatar--sm { --ac-avatar: 1.875rem; }
.ac-avatar--lg { --ac-avatar: 3rem; }
.ac-avatar--xl { --ac-avatar: 4.5rem; }
.ac-avatar--square { border-radius: 28%; }
.ac-avatar[data-color="2"] { --_c: var(--ac-chart-2); }
.ac-avatar[data-color="3"] { --_c: var(--ac-chart-3); }
.ac-avatar[data-color="4"] { --_c: var(--ac-chart-4); }
.ac-avatar[data-color="5"] { --_c: var(--ac-chart-5); }
.ac-avatar[data-color="6"] { --_c: var(--ac-chart-6); }
.ac-avatar[data-color="7"] { --_c: var(--ac-chart-7); }
.ac-avatar[data-color="8"] { --_c: var(--ac-chart-8); }
.ac-avatar--gradient { background: var(--ac-gradient); color: var(--ac-accent-contrast); }
.ac-avatar > .ac-status {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: max(0.55rem, calc(var(--ac-avatar) * 0.28));
  block-size: max(0.55rem, calc(var(--ac-avatar) * 0.28));
  box-shadow: 0 0 0 2px var(--ac-surface-1);
}
.ac-avatar-group { display: inline-flex; align-items: center; }
.ac-avatar-group > .ac-avatar { box-shadow: 0 0 0 2px var(--ac-surface-1); transition: transform var(--ac-dur-2) var(--ac-ease); }
.ac-avatar-group > .ac-avatar + .ac-avatar { margin-inline-start: calc(var(--ac-avatar) * -0.3); }
.ac-avatar-group > .ac-avatar:hover { transform: translateY(-2px); z-index: 1; }
.ac-avatar-group__more { background: var(--ac-surface-3) !important; color: var(--ac-text-soft) !important; font-size: calc(var(--ac-avatar) * 0.32) !important; }

/* ---- kbd -------------------------------------------------------------------------------- */
.ac-kbd, kbd.ac-kbd {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.375rem;
  block-size: 1.375rem;
  padding-inline: 0.3rem;
  border-radius: var(--ac-r-xs);
  border: 1px solid var(--ac-border-strong);
  border-block-end-width: 2px;
  background: var(--ac-surface-2);
  color: var(--ac-muted);
  font-family: var(--ac-font);
  font-size: var(--ac-fs-2xs);
  font-weight: var(--ac-fw-semibold);
  line-height: 1;
  direction: ltr;
  white-space: nowrap;
}

/* ---- divider ------------------------------------------------------------------------------ */
.ac-divider { border: 0; block-size: 1px; background: var(--ac-border); margin-block: var(--ac-s-4); }
.ac-divider--vertical { display: inline-block; inline-size: 1px; block-size: 1.25rem; margin: 0 var(--ac-s-2); vertical-align: middle; }
.ac-divider--label {
  display: flex;
  align-items: center;
  gap: var(--ac-s-3);
  block-size: auto;
  background: none;
  color: var(--ac-muted);
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-semibold);
}
.ac-divider--label::before, .ac-divider--label::after { content: ""; flex: 1; block-size: 1px; background: var(--ac-border); }

/* ---- skeleton ------------------------------------------------------------------------------ */
.ac-skeleton {
  display: block;
  block-size: 1rem;
  border-radius: var(--ac-r-sm);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--ac-surface-1) 70%, transparent) 50%, transparent 100%) 0 0 / 200% 100% no-repeat,
    var(--ac-surface-3);
  animation: ac-shimmer 1.4s ease-in-out infinite;
}
:root[data-theme="dark"] .ac-skeleton { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%) 0 0 / 200% 100% no-repeat, var(--ac-surface-3); }
@keyframes ac-shimmer { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
[dir="rtl"] .ac-skeleton { animation-direction: reverse; }
.ac-skeleton--text { block-size: 0.75rem; border-radius: var(--ac-r-pill); }
.ac-skeleton--title { block-size: 1.25rem; inline-size: 45%; }
.ac-skeleton--circle { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; flex: none; }
.ac-skeleton--block { block-size: 8rem; border-radius: var(--ac-r-lg); }
.ac-skeleton--w-25 { inline-size: 25%; }
.ac-skeleton--w-50 { inline-size: 50%; }
.ac-skeleton--w-75 { inline-size: 75%; }

/* ---- progress bar (native element) ---------------------------------------------------------- */
/* <progress class="ac-progress [--success|--warning|--danger|--sm|--lg]" value="62" max="100"></progress> ; indeterminate: omit value */
.ac-progress {
  --_c: var(--ac-accent);
  appearance: none;
  -webkit-appearance: none;
  display: block;
  inline-size: 100%;
  block-size: 0.5rem;
  border: 0;
  border-radius: var(--ac-r-pill);
  --_track: repeating-linear-gradient(-45deg, var(--ac-surface-3) 0 3px, transparent 3px 6px), var(--ac-surface-2);
  background: var(--_track);
  overflow: hidden;
  color: var(--_c);
}
.ac-progress::-webkit-progress-bar { background: var(--_track); border-radius: var(--ac-r-pill); }
.ac-progress::-webkit-progress-value {
  background: var(--_c);
  border-radius: var(--ac-r-pill);
  transition: inline-size var(--ac-dur-4) var(--ac-ease);
}
.ac-progress::-moz-progress-bar { background: var(--_c); border-radius: var(--ac-r-pill); }
.ac-progress:indeterminate { background: linear-gradient(90deg, transparent, var(--_c), transparent) 0 0 / 40% 100% no-repeat, var(--ac-surface-3); animation: ac-indeterminate 1.2s var(--ac-ease) infinite; }
.ac-progress:indeterminate::-webkit-progress-bar { background: transparent; }
@keyframes ac-indeterminate { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } }
.ac-progress--success { --_c: var(--ac-success); }
.ac-progress--warning { --_c: var(--ac-warning); }
.ac-progress--danger { --_c: var(--ac-danger); }
.ac-progress--sm { block-size: 0.3rem; }
.ac-progress--lg { block-size: 0.75rem; }

/* ---- progress ring (ring.js builds the svg) -------------------------------------------------- */
/* <div class="ac-ring [--sm|--lg]" data-ac="ring" data-value="72" data-tone="success"><span class="ac-ring__label">72%</span></div> */
.ac-ring {
  --ac-ring-size: 5.5rem;
  --ac-ring-stroke: 8;
  --_tone: var(--ac-accent);
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--ac-ring-size);
  block-size: var(--ac-ring-size);
  flex: none;
}
.ac-ring--sm { --ac-ring-size: 3rem; --ac-ring-stroke: 9; }
.ac-ring--lg { --ac-ring-size: 8rem; --ac-ring-stroke: 7; }
.ac-ring svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); overflow: visible; }
.ac-ring__track { fill: none; stroke: var(--ac-surface-3); }
.ac-ring__bar {
  fill: none;
  stroke: var(--_tone);
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms var(--ac-ease-out);
  filter: drop-shadow(0 2px 4px color-mix(in oklab, var(--_tone) 35%, transparent));
}
.ac-ring__label { position: relative; display: grid; text-align: center; font-weight: var(--ac-fw-semibold); font-size: calc(var(--ac-ring-size) * 0.2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ac-ring__label small { font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-medium); color: var(--ac-muted); }
.ac-ring--sm .ac-ring__label { font-size: var(--ac-fs-2xs); }

/* ---- empty state ------------------------------------------------------------------------------ */
.ac-empty {
  display: grid;
  justify-items: center;
  gap: var(--ac-s-2);
  padding: var(--ac-s-12) var(--ac-s-6);
  text-align: center;
}
.ac-empty__art {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  margin-block-end: var(--ac-s-3);
  border-radius: 1.75rem;
  background: linear-gradient(160deg, var(--ac-surface-1), var(--ac-surface-3));
  border: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-md), var(--ac-shadow-inset);
  color: var(--ac-accent);
  isolation: isolate;
}
.ac-empty__art::before {
  content: "";
  position: absolute;
  inset: -1.5rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ac-accent-soft-2), transparent);
}
.ac-empty__art .ac-icon { inline-size: 2.25rem; block-size: 2.25rem; stroke-width: 1.6; }
.ac-empty__art svg:not(.ac-icon) { inline-size: 100%; block-size: 100%; }
.ac-empty__title { font-size: var(--ac-fs-lg); font-weight: var(--ac-fw-semibold); }
.ac-empty__text { color: var(--ac-muted); max-inline-size: 42ch; font-size: var(--ac-fs-sm); }
.ac-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ac-s-2); margin-block-start: var(--ac-s-3); }
.ac-empty--sm { padding: var(--ac-s-6); }
.ac-empty--sm .ac-empty__art { inline-size: 3.5rem; block-size: 3.5rem; border-radius: 1.1rem; }
.ac-empty--sm .ac-empty__art .ac-icon { inline-size: 1.5rem; block-size: 1.5rem; }

/* ---- simple list rows ---------------------------------------------------------------------------- */
/* <ul class="ac-list" role="list"><li class="ac-list__item"> avatar | .ac-list__main(.ac-list__title + .ac-list__meta) | .ac-list__end </li></ul> */
.ac-list { display: flex; flex-direction: column; list-style: none; padding: 0; }
.ac-list__item {
  display: flex;
  align-items: center;
  gap: var(--ac-s-3);
  min-block-size: var(--ac-row-h);
  padding-block: var(--ac-s-2);
  min-width: 0;
}
.ac-list--divided > .ac-list__item + .ac-list__item { border-block-start: 1px solid var(--ac-border); }
.ac-list--inset > .ac-list__item { padding-inline: var(--ac-card-pad); }
a.ac-list__item, button.ac-list__item { transition: background var(--ac-dur-1); text-align: start; inline-size: 100%; }
a.ac-list__item:hover, button.ac-list__item:hover { background: var(--ac-hover); }
.ac-list__main { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.ac-list__title { font-weight: var(--ac-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-list__meta { font-size: var(--ac-fs-xs); color: var(--ac-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-list__end { display: grid; justify-items: end; flex: none; text-align: end; font-variant-numeric: tabular-nums; line-height: 1.35; }
.ac-list__thumb {
  --_tone: var(--ac-accent);
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: color-mix(in oklab, var(--_tone) 12%, var(--ac-surface-1));
  color: var(--_tone);
}
.ac-list__thumb .ac-icon { inline-size: 1.15rem; block-size: 1.15rem; }

/* ---- activity feed -------------------------------------------------------------------------------- */
/* <ol class="ac-feed"><li class="ac-feed__item"><span class="ac-feed__icon" data-tone="success"><svg/></span><div class="ac-feed__body"><p>…</p><time>…</time></div></li></ol> */
.ac-feed { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ac-feed__item { position: relative; display: flex; gap: var(--ac-s-3); padding-block-end: var(--ac-s-5); min-width: 0; }
.ac-feed__item:last-child { padding-block-end: 0; }
.ac-feed__item:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(1rem - 0.5px);
  inset-block: 2.25rem 0.25rem;
  inline-size: 1px;
  background: var(--ac-border-strong);
}
.ac-feed__icon {
  --_tone: var(--ac-muted);
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  border-radius: 50%;
  background: color-mix(in oklab, var(--_tone) 13%, var(--ac-surface-1));
  color: var(--_tone);
  box-shadow: 0 0 0 4px var(--ac-surface-1);
}
.ac-feed__icon .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-feed__body { display: grid; gap: 2px; min-width: 0; padding-block-start: 0.3rem; font-size: var(--ac-fs-sm); line-height: 1.5; }
.ac-feed__body strong { font-weight: var(--ac-fw-semibold); }
.ac-feed__body time { font-size: var(--ac-fs-xs); color: var(--ac-muted); }

/* ---- currency / country flag dot ---------------------------------------------------------------- */
/* <span class="ac-flag" data-flag="us|eu|ae|ir|gb|tr" aria-hidden="true"></span> — CSS-drawn (no emoji), sized by --ac-flag */
.ac-flag {
  --ac-flag: 1.125rem;
  display: inline-block;
  inline-size: var(--ac-flag);
  block-size: var(--ac-flag);
  flex: none;
  border-radius: 50%;
  background: var(--ac-surface-3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  vertical-align: middle;
}
.ac-flag[data-flag="us"] { background: linear-gradient(#3c3b6e 0 0) 0 0 / 50% 54% no-repeat, repeating-linear-gradient(#d22f3b 0 7.7%, #fff 7.7% 15.4%); }
.ac-flag[data-flag="eu"] { background: radial-gradient(circle, transparent 0 34%, #ffcc00 35% 44%, transparent 45%), #1f4fbf; }
.ac-flag[data-flag="ae"] { background: linear-gradient(90deg, #e3262f 0 28%, transparent 28%), linear-gradient(#00843d 0 33.3%, #fff 33.3% 66.6%, #111 66.6%); }
.ac-flag[data-flag="ir"] { background: radial-gradient(circle, #da0000 0 12%, transparent 13%), linear-gradient(#239f40 0 33.3%, #fff 33.3% 66.6%, #da0000 66.6%); }
.ac-flag[data-flag="gb"] { background: linear-gradient(#c8102e 0 0) center / 100% 18% no-repeat, linear-gradient(90deg, #c8102e 0 0) center / 18% 100% no-repeat, linear-gradient(#fff 0 0) center / 100% 34% no-repeat, linear-gradient(90deg, #fff 0 0) center / 34% 100% no-repeat, #012169; }
.ac-flag[data-flag="tr"] { background: radial-gradient(circle at 42% 50%, #e30a17 0 22%, transparent 23%), radial-gradient(circle at 38% 50%, #fff 0 28%, transparent 29%), #e30a17; }


/* ==== css/components/nav.css ==== */
/* ==========================================================================
   Navigation: tabs (underline + pills), segmented control, breadcrumbs,
   pagination, stepper
   Indicators are positioned by tabs.js through --ac-ind-x / --ac-ind-w
   (physical px, measured — so they are RTL-correct automatically).
   ========================================================================== */

/* ---- tabs ------------------------------------------------------------------ */
.ac-tabs { display: grid; gap: var(--ac-s-4); min-width: 0; }
.ac-tabs__list {
  position: relative;
  display: flex;
  gap: var(--ac-s-1);
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-block-end: 1px solid var(--ac-border);
}
.ac-tabs__list::-webkit-scrollbar { display: none; }
.ac-tabs__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--ac-s-2);
  flex: none;
  min-block-size: 2.625rem;
  padding-inline: var(--ac-s-3);
  color: var(--ac-muted);
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-medium);
  white-space: nowrap;
  border-radius: var(--ac-r-sm) var(--ac-r-sm) 0 0;
  transition: color var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-tabs__tab:hover { color: var(--ac-text); }
.ac-tabs__tab:active { transform: var(--ac-press); }
.ac-tabs__tab[aria-selected="true"] { color: var(--ac-text); }
.ac-tabs__tab:focus-visible { outline-offset: -2px; }
.ac-tabs__tab .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-tabs__count {
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding-inline: 0.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--ac-r-pill);
  background: var(--ac-neutral-soft);
  font-size: var(--ac-fs-2xs);
  font-weight: var(--ac-fw-bold);
  font-variant-numeric: tabular-nums;
}
.ac-tabs__tab[aria-selected="true"] .ac-tabs__count { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-tabs__indicator {
  position: absolute;
  left: 0; /* rtl-ok: JS-measured indicator geometry */
  inset-block-end: -1px;
  block-size: 2px;
  inline-size: var(--ac-ind-w, 0);
  border-radius: 2px 2px 0 0;
  background: var(--ac-ink);
  transform: translateX(var(--ac-ind-x, 0));
  transition: transform var(--ac-dur-4) var(--ac-ease), inline-size var(--ac-dur-4) var(--ac-ease);
  pointer-events: none;
}
.ac-tabs__indicator[data-instant] { transition: none; }
.ac-tabs__panel { min-width: 0; }
.ac-tabs__panel:focus-visible { outline-offset: 4px; }
.ac-tabs__panel[data-entering] { animation: ac-fade-up var(--ac-dur-3) var(--ac-ease-out) both; }

/* pills */
.ac-tabs--pills .ac-tabs__list {
  inline-size: fit-content;
  max-inline-size: 100%;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-r-pill);
  background: var(--ac-surface-1);
  gap: 2px;
  padding: 4px;
}
.ac-tabs--pills .ac-tabs__tab {
  min-block-size: 2.125rem;
  border-radius: var(--ac-r-pill);
  padding-inline: var(--ac-s-4);
  font-size: var(--ac-fs-sm);
}
.ac-tabs--pills .ac-tabs__tab[aria-selected="true"] { color: var(--ac-ink-contrast); }
.ac-tabs--pills .ac-tabs__tab[aria-selected="true"] .ac-tabs__count { background: rgba(255, 255, 255, 0.22); color: inherit; }
.ac-tabs--pills .ac-tabs__indicator {
  inset-block: 4px;
  block-size: auto;
  border-radius: var(--ac-r-pill);
  background: var(--ac-ink);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.45);
}

/* ---- segmented control ------------------------------------------------------- */
.ac-segmented {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border-radius: var(--ac-r-pill);
  background: var(--ac-surface-1);
  border: 1px solid var(--ac-border);
  isolation: isolate;
  max-inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.ac-segmented--block { display: flex; }
.ac-segmented--block .ac-segmented__item { flex: 1 1 0; }
.ac-segmented__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ac-s-2);
  min-block-size: calc(var(--ac-control-h) - 8px);
  padding-inline: var(--ac-s-3);
  border-radius: var(--ac-r-pill);
  color: var(--ac-text-soft);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-medium);
  white-space: nowrap;
  transition: color var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-segmented__item:hover { color: var(--ac-text); }
.ac-segmented__item:active { transform: scale(0.95); }
.ac-segmented__item[aria-checked="true"], .ac-segmented__item[aria-selected="true"] { color: var(--ac-ink-contrast); }
.ac-segmented__item .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-segmented__thumb {
  position: absolute;
  z-index: 0;
  inset-block: 3px;
  left: 0; /* rtl-ok: JS-measured indicator geometry */
  inline-size: var(--ac-ind-w, 0);
  border-radius: var(--ac-r-pill);
  background: var(--ac-ink);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.45);
  transform: translateX(var(--ac-ind-x, 0));
  transition: transform var(--ac-dur-4) var(--ac-ease), inline-size var(--ac-dur-4) var(--ac-ease);
  pointer-events: none;
}
.ac-segmented__thumb[data-instant] { transition: none; }
.ac-segmented--sm .ac-segmented__item { min-block-size: calc(var(--ac-control-h-sm) - 6px); padding-inline: var(--ac-s-2); font-size: var(--ac-fs-xs); }

/* ---- breadcrumbs --------------------------------------------------------------- */
.ac-breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ac-s-1);
  list-style: none;
  padding: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-muted);
  min-width: 0;
}
.ac-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--ac-s-1); min-width: 0; }
.ac-breadcrumbs li + li::before {
  content: "";
  inline-size: 0.9rem;
  block-size: 0.9rem;
  flex: none;
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="rtl"] .ac-breadcrumbs li + li::before { transform: scaleX(-1); }
.ac-breadcrumbs a { padding: 2px 4px; border-radius: var(--ac-r-xs); transition: color var(--ac-dur-1), background var(--ac-dur-1); white-space: nowrap; }
.ac-breadcrumbs a:hover { color: var(--ac-text); background: var(--ac-hover); }
.ac-breadcrumbs [aria-current="page"] { color: var(--ac-text); font-weight: var(--ac-fw-semibold); padding-inline: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- pagination ------------------------------------------------------------------ */
.ac-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ac-s-3); }
.ac-pagination__info { font-size: var(--ac-fs-sm); color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-pagination__list { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.ac-pagination__btn {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.125rem;
  block-size: 2.125rem;
  padding-inline: var(--ac-s-2);
  border-radius: var(--ac-r-pill);
  color: var(--ac-text-soft);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-medium);
  font-variant-numeric: tabular-nums;
  transition: background var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-pagination__btn:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-pagination__btn:active { transform: scale(0.94); }
.ac-pagination__btn[aria-current="page"] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-pagination__btn:disabled { opacity: 0.4; }
.ac-pagination__btn .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-pagination__gap { color: var(--ac-faint); padding-inline: var(--ac-s-1); }

/* ---- stepper ----------------------------------------------------------------------- */
/* <ol class="ac-stepper"><li class="ac-step" data-state="done|current|upcoming|error">
     <span class="ac-step__dot">1</span><span class="ac-step__text"><strong>…</strong><small>…</small></span></li></ol> */
.ac-stepper {
  display: flex;
  gap: var(--ac-s-2);
  list-style: none;
  padding: 0;
  counter-reset: ac-step;
}
.ac-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ac-s-3);
  flex: 1 1 auto;
  min-width: 0;
  counter-increment: ac-step;
}
.ac-step:last-child { flex: none; }
.ac-step__text { flex: none; }
.ac-step:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  min-inline-size: 1rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ac-border-strong);
  margin-inline-end: var(--ac-s-2);
  transition: background var(--ac-dur-4) var(--ac-ease);
}
.ac-step[data-state="done"]:not(:last-child)::after { background: var(--ac-accent); }
.ac-step__dot {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--ac-surface-1);
  border: 1.5px solid var(--ac-border-strong);
  color: var(--ac-muted);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  font-variant-numeric: tabular-nums;
  transition: all var(--ac-dur-3) var(--ac-ease);
}
.ac-step__dot:empty::before { content: counter(ac-step); }
.ac-step__dot .ac-icon { inline-size: 1rem; block-size: 1rem; stroke-width: 2.6; }
.ac-step__text { display: grid; min-width: 0; line-height: 1.3; }
.ac-step__text strong { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-step__text small { font-size: var(--ac-fs-xs); color: var(--ac-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-step[data-state="current"] .ac-step__dot { border-color: var(--ac-accent); color: var(--ac-accent-ink); box-shadow: 0 0 0 4px var(--ac-accent-soft); }
.ac-step[data-state="done"] .ac-step__dot { background: var(--ac-accent); border-color: var(--ac-accent); color: var(--ac-accent-contrast); }
.ac-step[data-state="error"] .ac-step__dot { background: var(--ac-danger-soft); border-color: var(--ac-danger); color: var(--ac-danger-ink); }
.ac-step[data-state="upcoming"] .ac-step__text strong { color: var(--ac-muted); }
.ac-stepper--vertical { flex-direction: column; gap: 0; }
.ac-stepper--vertical .ac-step { flex-direction: row; align-items: flex-start; padding-block-end: var(--ac-s-5); }
.ac-stepper--vertical .ac-step:not(:last-child)::after {
  position: absolute;
  inset-inline-start: calc(1rem - 1px);
  inset-block: 2.25rem 0.25rem;
  inline-size: 2px;
  block-size: auto;
  min-inline-size: 0;
  margin: 0;
}
@media (max-width: 639.98px) {
  .ac-stepper:not(.ac-stepper--vertical) .ac-step:not([data-state="current"]) .ac-step__text { display: none; }
}


/* ==== css/components/overlay.css ==== */
/* ==========================================================================
   Overlays — modal (→ sheet on phones), bottom sheet, drawer, dropdown / context menu,
   action sheet, popover, tooltip, notification panel shell, theme customizer.
   Markup is documented in docs/overlays.md. Floating panels are placed by position.js
   through --ac-x / --ac-y (physical, JS-measured) and --ac-origin.
   ========================================================================== */

/* ---- dialog layers ------------------------------------------------------- */
.ac-modal, .ac-sheet, .ac-drawer {
  --_p: 1;
  position: fixed;
  inset: 0;
  z-index: var(--ac-z-modal);
  display: flex;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--ac-dur-4);
}
:is(.ac-modal, .ac-sheet, .ac-drawer)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ac-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--ac-dur-4) var(--ac-ease);
}
:is(.ac-modal, .ac-sheet, .ac-drawer, .ac-menu, .ac-popover)[data-state="closed"] { display: none; }
:is(.ac-modal, .ac-sheet, .ac-drawer)[data-state="open"] { visibility: visible; pointer-events: auto; transition: none; }
:is(.ac-modal, .ac-sheet, .ac-drawer)[data-state="open"]::before { opacity: var(--_p); }
:is(.ac-modal, .ac-sheet, .ac-drawer)[data-dragging] > .ac-dialog,
:is(.ac-modal, .ac-sheet, .ac-drawer)[data-dragging]::before { transition: none; }

.ac-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  max-block-size: 100%;
  background: var(--ac-elevated);
  color: var(--ac-text);
  border: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-xl);
  overflow: hidden;
  outline: none;
  transition: transform var(--ac-dur-4) var(--ac-ease-out), opacity var(--ac-dur-3) var(--ac-ease);
}
[data-bump] > .ac-dialog { animation: ac-bump var(--ac-dur-4) var(--ac-ease-spring); }
@keyframes ac-bump { 40% { scale: 1.025; } }
.ac-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: var(--ac-s-3);
  padding: var(--ac-s-5) var(--ac-s-5) var(--ac-s-3);
}
.ac-dialog__titles { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ac-dialog__title { margin: 0; font-size: var(--ac-fs-lg); font-weight: var(--ac-fw-semibold); line-height: var(--ac-lh-snug); }
.ac-dialog__sub, .ac-dialog__text { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-sm); line-height: var(--ac-lh-normal); }
.ac-dialog__close {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  margin: calc(var(--ac-s-1) * -1);
  border: 0;
  border-radius: var(--ac-r-pill);
  background: var(--ac-surface-3);
  color: var(--ac-text-soft);
  cursor: pointer;
  transition: background var(--ac-dur-1) var(--ac-ease), color var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-dialog__close:hover { background: var(--ac-active); color: var(--ac-text); }
.ac-dialog__close:active { transform: var(--ac-press); }
.ac-dialog__close .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-dialog__body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ac-s-1) var(--ac-s-5) var(--ac-s-5);
}
.ac-dialog__handle + .ac-dialog__body { padding-block-start: var(--ac-s-5); }
.ac-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ac-s-2);
  padding: var(--ac-s-2) var(--ac-s-5) var(--ac-s-5);
}
.ac-dialog__foot > .ac-btn { border-radius: var(--ac-r-pill); }
.ac-dialog__handle {
  display: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2;
  block-size: 1.375rem;
  cursor: grab;
  touch-action: none;
}
.ac-dialog__handle::before {
  content: "";
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: calc(50% - 1.125rem);
  inline-size: 2.25rem;
  block-size: 5px;
  border-radius: var(--ac-r-pill);
  background: var(--ac-border-strong);
}

/* modal (desktop) */
.ac-modal { align-items: center; justify-content: center; padding: calc(var(--ac-s-6) + var(--ac-safe-top)) var(--ac-s-4) calc(var(--ac-s-6) + var(--ac-safe-bottom)); }
.ac-modal > .ac-dialog {
  inline-size: min(100%, var(--_w, 32rem));
  max-block-size: min(100%, 52rem);
  border-radius: var(--ac-r-2xl);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}
.ac-modal[data-state="open"] > .ac-dialog { opacity: 1; transform: none; }
.ac-modal[data-size="sm"] { --_w: 26rem; }
.ac-modal[data-size="lg"] { --_w: 48rem; }
.ac-modal[data-size="xl"] { --_w: 64rem; }
.ac-modal[data-size="full"] { --_w: 100%; }
.ac-modal[data-size="full"] > .ac-dialog { block-size: 100%; max-block-size: none; }

/* bottom sheet (always) + modal on phones */
.ac-sheet { align-items: flex-end; justify-content: center; padding-block-start: calc(var(--ac-safe-top) + 0.75rem); }
.ac-sheet > .ac-dialog { inline-size: min(100%, 40rem); }
.ac-sheet[data-snaps] > .ac-dialog { block-size: calc(var(--_max) * 100dvh); }
.ac-sheet > .ac-dialog {
  border-block-end: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-start-start-radius: var(--ac-r-2xl);
  border-start-end-radius: var(--ac-r-2xl);
  padding-block-end: var(--ac-safe-bottom);
  transform: translateY(100%);
  transition-duration: var(--ac-dur-4), var(--ac-dur-3);
}
.ac-sheet[data-state="open"] > .ac-dialog { transform: translateY(var(--_y, 0px)); }
.ac-sheet .ac-dialog__handle { display: block; }
.ac-sheet .ac-dialog__head { touch-action: none; }
@media (max-width: 639.98px) {
  .ac-modal { align-items: flex-end; padding: calc(var(--ac-safe-top) + 0.75rem) 0 0; }
  .ac-modal > .ac-dialog {
    inline-size: 100%;
    border-block-end: 0;
    border-radius: var(--ac-r-2xl) var(--ac-r-2xl) 0 0;
    padding-block-end: var(--ac-safe-bottom);
    opacity: 1;
    transform: translateY(100%);
  }
  .ac-modal[data-state="open"] > .ac-dialog { transform: translateY(var(--_y, 0px)); }
  .ac-modal[data-size="full"] > .ac-dialog { block-size: 100%; }
  .ac-modal .ac-dialog__handle { display: block; }
  .ac-modal .ac-dialog__head { touch-action: none; }
  .ac-dialog__foot { padding-block-end: var(--ac-s-4); }
  .ac-dialog__foot > .ac-btn { flex: 1; }
}

/* drawer */
.ac-drawer { justify-content: flex-end; }
.ac-drawer[data-side="start"] { justify-content: flex-start; }
.ac-drawer > .ac-dialog {
  --_off: calc(104% * var(--ac-dir, 1));
  inline-size: min(var(--_w, 26rem), 88vw);
  block-size: 100%;
  border-block: 0;
  border-inline-end: 0;
  padding-block: var(--ac-safe-top) var(--ac-safe-bottom);
  transform: translateX(var(--_off));
}
.ac-drawer[data-side="start"] > .ac-dialog { --_off: calc(-104% * var(--ac-dir, 1)); border-inline-start: 0; border-inline-end: 1px solid var(--ac-border); }
.ac-drawer[data-state="open"] > .ac-dialog { transform: translateX(var(--_x, 0px)); }
.ac-drawer[data-size="sm"] { --_w: 22rem; }
.ac-drawer[data-size="lg"] { --_w: 36rem; }
.ac-drawer .ac-dialog__body { touch-action: pan-y; }
@media (min-width: 640px) {
  .ac-drawer { padding: var(--ac-s-2); }
  .ac-drawer > .ac-dialog { border: 1px solid var(--ac-border); border-radius: var(--ac-r-2xl); padding-block: 0; }
  .ac-drawer > .ac-dialog { --_off: calc(110% * var(--ac-dir, 1)); }
  .ac-drawer[data-side="start"] > .ac-dialog { --_off: calc(-110% * var(--ac-dir, 1)); }
}

/* ---- floating: menu, popover, tooltip ----------------------------------- */
.ac-menu, .ac-popover, .ac-tooltip {
  position: fixed;
  left: var(--ac-x, 0); /* rtl-ok: position.js measures physical x */
  top: var(--ac-y, 0);
  z-index: calc(var(--ac-z-modal) + 1);
  transform-origin: var(--ac-origin, top);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-2) var(--ac-ease), visibility 0s linear var(--ac-dur-2);
}
:is(.ac-menu, .ac-popover, .ac-tooltip)[data-state="open"] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.ac-menu, .ac-popover {
  max-block-size: min(var(--ac-avail-h, 28rem), 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ac-elevated);
  border: 1px solid var(--ac-border);
  box-shadow: var(--ac-shadow-lg);
  outline: none;
}
.ac-menu {
  min-inline-size: 13rem;
  max-inline-size: min(20rem, calc(100vw - 1rem));
  padding: var(--ac-s-1);
  border-radius: var(--ac-r-xl);
}
.ac-menu__item {
  display: flex;
  align-items: center;
  gap: var(--ac-s-2);
  inline-size: 100%;
  min-block-size: 2.125rem;
  padding: 0 var(--ac-s-2);
  border: 0;
  border-radius: var(--ac-r-md);
  background: none;
  color: var(--ac-text);
  font: inherit;
  font-size: var(--ac-fs-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.ac-menu__item:focus, .ac-menu__item[aria-expanded="true"] { background: var(--ac-surface-3); color: var(--ac-text); }
.ac-menu__item:focus-visible { box-shadow: inset 0 0 0 1px var(--ac-border-strong); }
.ac-menu__item:active { background: var(--ac-active); }
.ac-menu__item > .ac-icon { inline-size: 1rem; block-size: 1rem; flex: none; color: var(--ac-muted); }
.ac-menu__item:focus > .ac-icon { color: var(--ac-text-soft); }
.ac-menu__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ac-menu__kbd { font-family: inherit; font-size: var(--ac-fs-xs); color: var(--ac-faint); letter-spacing: 0.02em; direction: ltr; }
.ac-menu__chev { display: flex; color: var(--ac-faint); }
.ac-menu__chev .ac-icon { inline-size: 0.875rem; block-size: 0.875rem; }
.ac-menu__check { display: grid; place-items: center; inline-size: 1rem; flex: none; color: var(--ac-text); }
.ac-menu__check .ac-icon { inline-size: 0.9rem; block-size: 0.9rem; stroke-width: 2.6; }
[aria-checked="false"] > .ac-menu__check { opacity: 0; }
.ac-menu__item[data-tone="danger"], .ac-menu__item[data-tone="danger"] > .ac-icon { color: var(--ac-danger-ink); }
.ac-menu__item[data-tone="danger"]:focus { background: var(--ac-danger-soft); }
.ac-menu__item:is([aria-disabled="true"], :disabled) { opacity: 0.45; cursor: default; background: none; }
.ac-menu__sep { block-size: 1px; margin: var(--ac-s-1) calc(var(--ac-s-1) * -1); background: var(--ac-border); }
.ac-menu__label { padding: var(--ac-s-2) var(--ac-s-2) var(--ac-s-1); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ac-faint); }
@media (pointer: coarse) { .ac-menu__item { min-block-size: 2.75rem; } }
[data-ac-contextmenu] { -webkit-touch-callout: none; }
[data-ac-contextmenu][data-pressed] { transform: scale(0.98); transition: transform var(--ac-dur-2) var(--ac-ease); }

/* action sheet (menus on phones) */
.ac-actionsheet > .ac-dialog { background: none; border: 0; box-shadow: none; gap: var(--ac-s-2); padding: 0 var(--ac-s-2) calc(var(--ac-s-2) + var(--ac-safe-bottom)); }
.ac-actionsheet .ac-dialog__body, .ac-actionsheet .ac-dialog__foot .ac-btn { background: var(--ac-elevated); border-radius: var(--ac-r-2xl); box-shadow: var(--ac-shadow-lg); }
.ac-actionsheet .ac-dialog__body { padding: var(--ac-s-4) var(--ac-s-1) var(--ac-s-1); }
.ac-actionsheet .ac-dialog__foot { padding: 0; border: 0; background: none; }
.ac-actionsheet .ac-dialog__foot .ac-btn { min-block-size: 3.25rem; border-radius: var(--ac-r-2xl); border: 0; font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-lg); }
.ac-actionsheet .ac-menu {
  position: static;
  visibility: visible;
  opacity: 1;
  transform: none;
  max-block-size: none;
  max-inline-size: none;
  min-inline-size: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
}
.ac-actionsheet .ac-menu__item { min-block-size: 3.25rem; padding-inline: var(--ac-s-4); gap: var(--ac-s-3); font-size: var(--ac-fs-lg); border-radius: var(--ac-r-lg); }
.ac-actionsheet .ac-menu__item > .ac-icon, .ac-actionsheet .ac-menu__check { inline-size: 1.25rem; block-size: 1.25rem; }
.ac-actionsheet .ac-menu__kbd { display: none; }
.ac-actionsheet .ac-menu__sub > .ac-menu { display: none; padding-inline-start: var(--ac-s-6); }
.ac-actionsheet [aria-expanded="true"] + .ac-menu { display: block; }
.ac-actionsheet [aria-expanded="true"] .ac-menu__chev { rotate: calc(90deg * var(--ac-dir, 1)); }
.ac-actionsheet .ac-menu__sep { margin-inline: var(--ac-s-3); }

/* popover */
.ac-popover { inline-size: max-content; max-inline-size: min(22rem, calc(100vw - 1rem)); padding: var(--ac-s-4); border-radius: var(--ac-r-2xl); }

/* tooltip (inverted surface) */
.ac-tooltip {
  z-index: var(--ac-z-tooltip);
  max-inline-size: 16rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--ac-r-sm);
  background: var(--ac-text);
  color: var(--ac-bg);
  box-shadow: var(--ac-shadow-md);
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-medium);
  line-height: var(--ac-lh-snug);
  pointer-events: none;
  transition-duration: var(--ac-dur-1);
}
.ac-tooltip__kbd { font: inherit; opacity: 0.6; margin-inline-start: 0.35rem; direction: ltr; display: inline-block; }

/* notification panel shell (list styles in feedback.css) */
.ac-notif-pop { inline-size: 25rem; padding: 0; display: flex; flex-direction: column; overflow: hidden; max-block-size: min(var(--ac-avail-h, 36rem), 38rem); }
.ac-notif-sheet > .ac-dialog { block-size: 100%; }
.ac-notif-sheet .ac-dialog__head { position: absolute; inset-block-start: var(--ac-s-3); inset-inline-end: var(--ac-s-3); z-index: 3; padding: 0; }
.ac-notif-sheet .ac-dialog__titles { display: none; }
.ac-notif-sheet .ac-dialog__body { display: flex; flex-direction: column; padding: var(--ac-s-3) 0 0; overflow: hidden; }

/* ---- theme customizer --------------------------------------------------- */
.ac-cz__sec + .ac-cz__sec { margin-block-start: var(--ac-s-6); }
.ac-cz__label { margin: 0 0 var(--ac-s-2); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); color: var(--ac-muted); }
.ac-cz__modes, .ac-cz__langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ac-s-2); }
.ac-cz__mode, .ac-cz__lang {
  display: grid;
  gap: var(--ac-s-2);
  padding: var(--ac-s-2);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-r-xl);
  background: var(--ac-surface-1);
  color: var(--ac-text-soft);
  font: inherit;
  font-size: var(--ac-fs-sm);
  cursor: pointer;
  transition: border-color var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-cz__mode:hover, .ac-cz__lang:hover { border-color: var(--ac-border-strong); }
.ac-cz__mode:active, .ac-cz__lang:active, .ac-cz__swatch:active { transform: var(--ac-press); }
.ac-cz__mode[aria-checked="true"], .ac-cz__lang[aria-checked="true"] { border-color: var(--ac-text); box-shadow: inset 0 0 0 1px var(--ac-text); color: var(--ac-text); }
.ac-cz__mode-label { display: inline-flex; align-items: center; justify-content: center; gap: var(--ac-s-1); font-weight: var(--ac-fw-medium); }
.ac-cz__preview {
  --_a: #f5f5f8; --_b: #ffffff; --_l: #dedee6;
  display: grid;
  grid-template-columns: 32% 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 4px;
  aspect-ratio: 4 / 3;
  padding: 6px;
  border-radius: var(--ac-r-md);
  background: var(--_a);
  overflow: hidden;
}
.ac-cz__preview[data-preview="dark"] { --_a: #0d0d12; --_b: #1b1b24; --_l: #2e2e3b; }
.ac-cz__preview[data-preview="auto"] { background: linear-gradient(135deg, #f5f5f8 50%, #0d0d12 50%); }
.ac-cz__preview i { grid-row: 1 / -1; border-radius: 4px; background: var(--_b); box-shadow: inset 0 0 0 1px var(--_l); }
.ac-cz__preview b { block-size: 6px; border-radius: 3px; background: var(--_l); }
.ac-cz__preview b:first-of-type { inline-size: 60%; background: var(--ac-accent); }
.ac-cz__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr)); justify-items: center; gap: var(--ac-s-2); }
.ac-cz__swatch {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--ac-r-pill);
  background: var(--_sw);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  cursor: pointer;
  transition: box-shadow var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-cz__swatch .ac-icon { inline-size: 1rem; block-size: 1rem; stroke-width: 3; opacity: 0; transform: scale(0.4); transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-3) var(--ac-ease-spring); }
.ac-cz__swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ac-elevated), 0 0 0 4px var(--_sw); }
.ac-cz__swatch[aria-checked="true"] .ac-icon { opacity: 1; transform: none; }
.ac-cz__lang { gap: 2px; padding-block: var(--ac-s-3); text-align: center; }
.ac-cz__lang small { color: var(--ac-faint); font-size: var(--ac-fs-2xs); letter-spacing: 0.06em; }
.ac-cz .ac-dialog__foot { justify-content: space-between; border-block-start: 1px solid var(--ac-border); padding-block-start: var(--ac-s-4); }
.ac-cz__note { margin: var(--ac-s-2) 0 0; font-size: var(--ac-fs-xs); color: var(--ac-muted); line-height: var(--ac-lh-snug); }


/* ==== css/components/palette.css ==== */
/* ==========================================================================
   Command palette (built by palette.js — markup is generated)
   ========================================================================== */

.ac-palette {
  position: fixed;
  inset: 0;
  z-index: var(--ac-z-palette);
  display: grid;
  justify-items: center;
  align-items: start;
  padding: calc(min(14vh, 8rem) + var(--ac-safe-top)) var(--ac-s-4) var(--ac-s-4);
  visibility: hidden;
  pointer-events: none;
}
.ac-palette[data-state="open"] { visibility: visible; pointer-events: auto; }
.ac-palette__backdrop {
  position: absolute;
  inset: 0;
  background: var(--ac-scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--ac-dur-3) var(--ac-ease);
}
.ac-palette[data-state="open"] .ac-palette__backdrop { opacity: 1; }
.ac-palette__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: min(40rem, 100%);
  max-block-size: min(32rem, 100% - 2rem);
  border-radius: var(--ac-r-xl);
  background: var(--ac-glass-bg-strong);
  -webkit-backdrop-filter: var(--ac-glass-blur);
  backdrop-filter: var(--ac-glass-blur);
  border: 1px solid var(--ac-glass-border);
  box-shadow: var(--ac-shadow-xl), var(--ac-shadow-inset);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-3) var(--ac-ease);
}
.ac-palette[data-state="open"] .ac-palette__panel { opacity: 1; transform: none; }
.ac-palette__search {
  display: flex;
  align-items: center;
  gap: var(--ac-s-3);
  padding-inline: var(--ac-s-4);
  border-block-end: 1px solid var(--ac-border);
  color: var(--ac-muted);
}
.ac-palette__search .ac-icon { inline-size: 1.2rem; block-size: 1.2rem; }
.ac-palette__input {
  flex: 1;
  min-width: 0;
  block-size: 3.5rem;
  border: 0;
  background: transparent;
  color: var(--ac-text);
  font-size: var(--ac-fs-lg);
  outline: none;
}
.ac-palette__input::-webkit-search-cancel-button { display: none; }
.ac-palette__list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--ac-s-2); scroll-padding: var(--ac-s-2); }
.ac-palette__group {
  padding: var(--ac-s-2) var(--ac-s-3) var(--ac-s-1);
  font-size: var(--ac-fs-2xs);
  font-weight: var(--ac-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-faint);
}
.ac-palette__item {
  display: flex;
  align-items: center;
  gap: var(--ac-s-3);
  min-block-size: 2.75rem;
  padding-inline: var(--ac-s-3);
  border-radius: var(--ac-r-md);
  color: var(--ac-text-soft);
  cursor: pointer;
  scroll-margin: var(--ac-s-2);
  animation: ac-fade-in var(--ac-dur-2) var(--ac-ease) both;
}
.ac-palette__item[aria-selected="true"] { background: var(--ac-accent-soft); color: var(--ac-text); }
.ac-palette__icon {
  display: grid;
  place-items: center;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  flex: none;
  border-radius: var(--ac-r-sm);
  background: var(--ac-surface-1);
  border: 1px solid var(--ac-border);
  color: var(--ac-muted);
}
.ac-palette__item[aria-selected="true"] .ac-palette__icon { color: var(--ac-accent); border-color: color-mix(in oklab, var(--ac-accent) 30%, transparent); }
.ac-palette__icon .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-palette__text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.ac-palette__title { font-weight: var(--ac-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-palette__title mark { background: none; color: var(--ac-accent-ink); font-weight: var(--ac-fw-bold); }
.ac-palette__hint { font-size: var(--ac-fs-xs); color: var(--ac-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-palette__enter { opacity: 0; color: var(--ac-muted); }
.ac-palette__item[aria-selected="true"] .ac-palette__enter { opacity: 1; }
.ac-palette__empty { padding: var(--ac-s-10) var(--ac-s-4); text-align: center; color: var(--ac-muted); }
.ac-palette__foot {
  display: flex;
  align-items: center;
  gap: var(--ac-s-4);
  padding: var(--ac-s-2) var(--ac-s-4);
  border-block-start: 1px solid var(--ac-border);
  font-size: var(--ac-fs-xs);
  color: var(--ac-muted);
}
.ac-palette__foot span { display: inline-flex; align-items: center; gap: var(--ac-s-1); }
@media (max-width: 639.98px) {
  .ac-palette { padding: calc(var(--ac-s-2) + var(--ac-safe-top)) var(--ac-s-2) var(--ac-s-2); }
  .ac-palette__panel { max-block-size: 75dvh; }
  .ac-palette__foot { display: none; }
}


/* ==== css/components/table.css ==== */
/* ==========================================================================
   Table — base styles only (Phase 1). The data-table engineer owns this file
   and extends it (sorting, selection, sticky header, responsive cards …).
   <div class="ac-table-wrap"><table class="ac-table">…</table></div>
   ========================================================================== */

.ac-table-wrap { inline-size: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.ac-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ac-fs-md);
  font-variant-numeric: tabular-nums;
}
.ac-table th {
  padding: var(--ac-s-2) var(--ac-s-4);
  text-align: start;
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-muted);
  white-space: nowrap;
  background: var(--ac-surface-2);
  border-block: 1px solid var(--ac-border);
}
.ac-table td {
  block-size: var(--ac-row-h);
  padding: var(--ac-s-2) var(--ac-s-4);
  border-block-end: 1px solid var(--ac-border);
  white-space: nowrap;
  vertical-align: middle;
}
.ac-table tbody tr { transition: background var(--ac-dur-1); }
.ac-table tbody tr:hover { background: var(--ac-hover); }
.ac-table tbody tr:last-child td { border-block-end: 0; }
.ac-table .ac-num, .ac-table [data-align="end"] { text-align: end; }
.ac-table__cell-main { display: flex; align-items: center; gap: var(--ac-s-3); min-width: 0; }
.ac-table__cell-main > div { display: grid; line-height: 1.3; min-width: 0; }
.ac-table__cell-main small { color: var(--ac-muted); font-size: var(--ac-fs-xs); }

/* phones: rows become stacked cards; each <td data-label="…"> shows its label */
@media (max-width: 639.98px) {
  .ac-table--stack thead { display: none; }
  .ac-table--stack, .ac-table--stack tbody, .ac-table--stack tr, .ac-table--stack td { display: block; inline-size: 100%; }
  .ac-table--stack tr { padding: var(--ac-s-3) var(--ac-card-pad); border-block-end: 1px solid var(--ac-border); }
  .ac-table--stack tbody tr:last-child { border-block-end: 0; }
  .ac-table--stack td { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-3); block-size: auto; padding: 3px 0; border: 0; white-space: normal; }
  .ac-table--stack td[data-label]::before { content: attr(data-label); color: var(--ac-muted); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); }
  .ac-table--stack td:first-child { padding-block-end: var(--ac-s-2); }
}

/* ==========================================================================
   Data table  <div data-ac="table"> (src/js/components/table.js)
   ========================================================================== */
.ac-dt { --_pad: var(--ac-card-pad); display: flex; flex-direction: column; min-width: 0; }
.ac-dt__head { display: grid; gap: var(--ac-s-3); padding: var(--ac-s-3) var(--_pad); }
.ac-dt__head[hidden], .ac-dt__bulk[hidden], .ac-dt__foot[hidden] { display: none; }
.ac-dt__bar { display: flex; align-items: center; gap: var(--ac-s-2); min-width: 0; }
.ac-dt__tools { display: flex; align-items: center; gap: var(--ac-s-2); margin-inline-start: auto; flex: none; }
.ac-dt__search { position: relative; display: flex; align-items: center; flex: 1 1 16rem; max-inline-size: 22rem; min-width: 0; }
.ac-dt__search .ac-icon { position: absolute; inset-inline-start: 0.7rem; inline-size: 1rem; block-size: 1rem; color: var(--ac-muted); pointer-events: none; }
.ac-dt__search input, .ac-dt__select {
  inline-size: 100%; min-block-size: var(--ac-control-h-sm); padding-inline: var(--ac-s-3);
  border: 1px solid var(--ac-border-strong); border-radius: var(--ac-r-sm); background: var(--ac-surface-1);
  font-size: var(--ac-fs-sm); transition: border-color var(--ac-dur-1), box-shadow var(--ac-dur-1);
}
.ac-dt__search input { padding-inline-start: 2.2rem; }
.ac-dt__search input:focus, .ac-dt__select:focus { outline: 0; border-color: var(--ac-accent); box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-dt__menu { position: relative; }
.ac-dt__pop {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: var(--ac-z-dropdown);
  display: grid; min-inline-size: 12rem; max-block-size: 18rem; overflow: auto; padding: var(--ac-s-1);
  border: 1px solid var(--ac-border); border-radius: var(--ac-r-md); background: var(--ac-elevated); box-shadow: var(--ac-shadow-lg);
  animation: ac-dt-pop var(--ac-dur-2) var(--ac-ease);
}
.ac-dt__pop[hidden] { display: none; }
@keyframes ac-dt-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.ac-dt__opt { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 2.25rem; padding-inline: var(--ac-s-2); border-radius: var(--ac-r-sm); font-size: var(--ac-fs-sm); cursor: pointer; }
.ac-dt__opt:hover { background: var(--ac-hover); }
.ac-dt__filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ac-s-3); padding-block-start: var(--ac-s-1); animation: ac-dt-pop var(--ac-dur-2) var(--ac-ease); }
.ac-dt__filters[hidden] { display: none; }
.ac-dt__field { display: grid; gap: 4px; flex: 1 1 9rem; max-inline-size: 14rem; font-size: var(--ac-fs-xs); color: var(--ac-muted); font-weight: var(--ac-fw-medium); }
.ac-dt__select { color: var(--ac-text); }
select.ac-dt__select { padding-inline-end: var(--ac-s-2); cursor: pointer; }
.ac-dt :is(.ac-dt__cb, .ac-dt__opt input) { inline-size: 1rem; block-size: 1rem; margin: 0; accent-color: var(--ac-accent); cursor: pointer; flex: none; }

/* bulk bar: sticky under the app bar; floating glass pill above the tab bar on phones */
.ac-dt__bulk {
  position: sticky; inset-block-start: calc(var(--ac-appbar-h) + var(--ac-safe-top) + var(--ac-s-2)); z-index: 3;
  display: flex; align-items: center; gap: var(--ac-s-2); margin: 0 var(--_pad) var(--ac-s-3); padding: var(--ac-s-1) var(--ac-s-2);
  border-radius: var(--ac-r-lg); background: var(--ac-accent-soft); color: var(--ac-accent-ink); border: 1px solid color-mix(in oklab, var(--ac-accent) 22%, transparent);
  animation: ac-dt-pop var(--ac-dur-2) var(--ac-ease);
}
.ac-dt__count { font-size: var(--ac-fs-sm); font-variant-numeric: tabular-nums; }

.ac-dt__scroll[data-scroll] { max-block-size: var(--ac-dt-max, 70vh); overflow: auto; }
.ac-dt__table thead th { position: sticky; inset-block-start: 0; z-index: 1; }
.ac-dt__table th[data-align="end"], .ac-dt__table td[data-align="end"] { text-align: end; }
.ac-dt__sort { display: inline-flex; align-items: center; gap: 4px; margin-inline: -6px; padding: 4px 6px; border-radius: var(--ac-r-xs); font: inherit; color: inherit; white-space: nowrap; }
.ac-dt__sort:hover { color: var(--ac-text); background: var(--ac-hover); }
th[data-align="end"] .ac-dt__sort { flex-direction: row-reverse; }
.ac-dt__arrow { inline-size: 0.8rem; block-size: 0.8rem; opacity: 0.35; transition: opacity var(--ac-dur-1); }
.ac-dt__sort:hover .ac-dt__arrow, th:not([aria-sort="none"]) .ac-dt__arrow { opacity: 1; color: var(--ac-accent-ink); }
.ac-dt__sort sup { font-size: 0.65rem; color: var(--ac-accent-ink); }
.ac-dt__table :is(th, td).ac-dt__check { inline-size: 2.75rem; padding-inline-end: 0; }
.ac-dt__table :is(th, td).ac-dt__x { inline-size: 2.25rem; padding-inline: var(--ac-s-2) 0; }
.ac-dt__xbtn { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--ac-r-sm); color: var(--ac-muted); transition: transform var(--ac-dur-2) var(--ac-ease), background var(--ac-dur-1); }
.ac-dt__xbtn:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-dt__xbtn[aria-expanded="true"] { transform: rotate(90deg); color: var(--ac-accent-ink); }
[dir="rtl"] .ac-dt__xbtn[aria-expanded="true"] { transform: rotate(-90deg); }
.ac-dt__xbtn .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-dt__table td.ac-dt__act { inline-size: 1%; padding-block: 0; }
.ac-dt__actions { display: flex; justify-content: flex-end; gap: 2px; }
.ac-dt__actions .ac-btn { color: var(--ac-muted); }
.ac-dt__actions .ac-btn:hover { color: var(--ac-text); }
.ac-dt__actions .ac-btn[data-tone="danger"]:hover { color: var(--ac-danger); background: var(--ac-danger-soft); }
.ac-dt__actions .ac-btn span { display: none; }
.ac-dt__table tbody tr[data-selected] { background: color-mix(in oklab, var(--ac-accent) 7%, transparent); }
.ac-dt__table tbody tr[data-expanded] td { border-block-end-color: transparent; }
.ac-dt__detail td { padding-block: 0 var(--ac-s-4); white-space: normal; background: var(--ac-surface-2); }
.ac-dt__detail-in { padding-block-start: var(--ac-s-3); animation: ac-dt-pop var(--ac-dur-3) var(--ac-ease); }
.ac-dt__nil { color: var(--ac-faint); }
.ac-dt__prog { display: inline-flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-xs); color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-dt__prog .ac-progress { inline-size: 4.5rem; }
.ac-dt__table .ac-table__cell-main > div { max-inline-size: 16rem; }
.ac-dt[data-compact] .ac-dt__table td { block-size: 2.4rem; padding-block: 4px; }
.ac-dt[data-compact] .ac-dt__table .ac-avatar { --ac-avatar: 1.5rem; }
.ac-dt[data-compact] .ac-table__cell-main small { display: none; }
.ac-dt__empty td { block-size: auto; white-space: normal; }
.ac-dt__table tbody tr.ac-dt__empty:hover { background: none; }

.ac-dt__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ac-s-2) var(--ac-s-4); padding: var(--ac-s-3) var(--_pad); border-block-start: 1px solid var(--ac-border); }
.ac-dt__info { font-size: var(--ac-fs-sm); color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-dt__pager { display: flex; align-items: center; gap: var(--ac-s-3); }
.ac-dt__size { display: flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-sm); color: var(--ac-muted); }
.ac-dt__size .ac-dt__select { inline-size: auto; }
.ac-dt__gap { padding-inline: 4px; color: var(--ac-muted); }

/* phone cards */
.ac-dt__cards { display: grid; list-style: none; padding: 0; margin: 0; }
.ac-dt__card + .ac-dt__card { border-block-start: 1px solid var(--ac-border); }
.ac-dt__card-in { display: grid; gap: var(--ac-s-2); padding: var(--ac-s-3) var(--_pad); background: var(--ac-surface-1); }
.ac-dt__card[data-selected] .ac-dt__card-in { background: color-mix(in oklab, var(--ac-accent) 7%, var(--ac-surface-1)); }
.ac-dt__card-head { display: flex; align-items: center; gap: var(--ac-s-3); min-width: 0; }
.ac-dt__card-main { flex: 1 1 auto; min-width: 0; }
.ac-dt__card-end { flex: none; }
.ac-dt__kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ac-s-1) var(--ac-s-4); margin: 0; }
.ac-dt__kv > div { display: grid; min-width: 0; }
.ac-dt__kv dt { font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-dt__kv dd { margin: 0; font-size: var(--ac-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-dt__kv dd.ac-num { text-align: start; }
.ac-dt__more { display: inline-flex; align-items: center; gap: 4px; justify-self: start; min-block-size: 2rem; font-size: var(--ac-fs-xs); color: var(--ac-accent-ink); font-weight: var(--ac-fw-semibold); }
.ac-dt__more .ac-icon { inline-size: 0.9rem; block-size: 0.9rem; transition: transform var(--ac-dur-2) var(--ac-ease); }
.ac-dt__more[aria-expanded="true"] .ac-icon { transform: rotate(180deg); }
.ac-dt__selall { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2) var(--_pad); font-size: var(--ac-fs-sm); color: var(--ac-muted); border-block-end: 1px solid var(--ac-border); }
@media (max-width: 639.98px) {
  .ac-dt__search { max-inline-size: none; }
  .ac-dt__tools .ac-btn:not(.ac-btn--icon) { padding-inline: 0; inline-size: max(var(--ac-control-h-sm), 2.75rem); }
  .ac-dt__bulk {
    position: fixed; inset-inline: var(--ac-s-3); inset-block: auto calc(var(--ac-tabbar-h) + var(--ac-safe-bottom) + var(--ac-s-3)); z-index: var(--ac-z-toast);
    margin: 0; padding: var(--ac-s-2); border-radius: var(--ac-r-xl); background: var(--ac-glass-bg-strong); backdrop-filter: var(--ac-glass-blur); -webkit-backdrop-filter: var(--ac-glass-blur);
    color: var(--ac-text); border-color: var(--ac-glass-border); box-shadow: var(--ac-shadow-xl);
  }
  .ac-dt__foot { justify-content: center; }
  .ac-dt__info { inline-size: 100%; text-align: center; }
}

/* reference look (docs/DESIGN.md): inset rounded light header strip, small text, pill controls, dot + label status */
.ac-dt__scroll { padding-inline: var(--_pad); }
.ac-dt__table { font-size: var(--ac-fs-sm); }
.ac-dt__table thead th { background: var(--ac-surface-3); border: 0; padding-block: var(--ac-s-2); font-weight: var(--ac-fw-medium); }
.ac-dt__table thead th:first-child { border-start-start-radius: var(--ac-r-md); border-end-start-radius: var(--ac-r-md); }
.ac-dt__table thead th:last-child { border-start-end-radius: var(--ac-r-md); border-end-end-radius: var(--ac-r-md); }
.ac-dt__table td { padding-inline: var(--ac-s-3); }
.ac-dt__table th { padding-inline: var(--ac-s-3); }
.ac-dt__search input, .ac-dt__head .ac-btn, .ac-dt__select { border-radius: var(--ac-r-pill); }
.ac-dt__search input { background: var(--ac-surface-2); border-color: var(--ac-border); }
.ac-dt__head .ac-btn:not(.ac-btn--primary) { background: var(--ac-surface-2); border-color: var(--ac-border); box-shadow: none; }
.ac-dt__head .ac-btn[aria-expanded="true"], .ac-dt__head .ac-btn[aria-pressed="true"] { background: var(--ac-text); color: var(--ac-surface-1); }
.ac-dt .ac-badge--dot { background: none; padding-inline: 0; color: var(--ac-text-soft); font-weight: var(--ac-fw-medium); }
.ac-dt__foot { border-block-start: 0; }
.ac-dt__table tbody tr:hover { background: var(--ac-surface-2); }


/* ==== modules/chat/chat.css ==== */
/* Chat module (src/modules/chat). Tokens only; logical properties; RTL mirrored via --ac-dir. */
.ac-chat { display: grid; grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); block-size: clamp(34rem, calc(100dvh - 15.5rem), 56rem); min-width: 0; overflow: hidden; background: var(--ac-surface-1); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); }
.ac-chat[data-info] { grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr) minmax(17rem, 20rem); }
.ac-chat > .ac-chat__info { display: none; }
.ac-chat[data-info] > .ac-chat__info { display: flex; animation: ac-chat-slide var(--ac-dur-4) var(--ac-ease-out) both; }
@keyframes ac-chat-slide { from { opacity: 0; transform: translateX(calc(16px * var(--ac-dir))); } }
.ac-chat .ac-split__pane { min-width: 0; min-block-size: 0; }
.ac-chat__iconbtn { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: 50%; color: var(--ac-text-soft); transition: background var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2), transform var(--ac-dur-1) var(--ac-ease); }
.ac-chat__iconbtn:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-chat__iconbtn:active { transform: scale(0.9); }
.ac-chat__iconbtn[aria-pressed="true"] { background: var(--ac-surface-3); color: var(--ac-text); }
.ac-chat :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 2px; }
.ac-chat__mini { inline-size: 0.85rem; block-size: 0.85rem; color: var(--ac-faint); flex: none; }

/* side: list */
.ac-chat__side { display: flex; flex-direction: column; border-inline-end: 1px solid var(--ac-border); }
.ac-chat__sidehead { display: grid; gap: var(--ac-s-3); padding: var(--ac-s-4) var(--ac-s-4) var(--ac-s-2); }
.ac-chat__sidetitle { display: flex; align-items: center; justify-content: space-between; }
.ac-chat__sidetitle h2 { font-size: var(--ac-fs-xl); font-weight: var(--ac-fw-semibold); letter-spacing: -0.01em; }
.ac-chat__search { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 2.5rem; padding-inline: var(--ac-s-3); border-radius: var(--ac-r-pill); background: var(--ac-surface-2); border: 1px solid transparent; color: var(--ac-muted); transition: border-color var(--ac-dur-2), background var(--ac-dur-2), box-shadow var(--ac-dur-2); }
.ac-chat__search:focus-within { background: var(--ac-surface-1); border-color: var(--ac-border-strong); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac-ink) 6%, transparent); }
.ac-chat__search .ac-icon { inline-size: 1rem; block-size: 1rem; flex: none; }
.ac-chat__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-sm); }
.ac-chat__filters { display: flex; gap: var(--ac-s-1); overflow-x: auto; scrollbar-width: none; }
.ac-chat__filters::-webkit-scrollbar { display: none; }
.ac-chat__filter { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; block-size: 2rem; padding-inline: var(--ac-s-3); border-radius: var(--ac-r-pill); color: var(--ac-text-soft); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); transition: background var(--ac-dur-2), color var(--ac-dur-2), transform var(--ac-dur-1); }
.ac-chat__filter:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-chat__filter:active { transform: var(--ac-press); }
.ac-chat__filter[aria-selected="true"] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-chat__fcount:not(:empty) { min-inline-size: 1.1rem; padding-inline: 0.3rem; border-radius: var(--ac-r-pill); background: var(--ac-accent); color: var(--ac-accent-contrast); font-size: 0.625rem; line-height: 1.1rem; text-align: center; }
.ac-chat__convs { flex: 1; min-block-size: 0; overflow-y: auto; padding: 0 var(--ac-s-2) var(--ac-s-3); scrollbar-width: thin; overscroll-behavior: contain; }
.ac-chat__convs.is-in > * { animation: ac-fade-up var(--ac-dur-4) var(--ac-ease-out) both; }
.ac-chat__sec { padding: var(--ac-s-3) var(--ac-s-3) var(--ac-s-1); color: var(--ac-muted); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); letter-spacing: 0.03em; text-transform: uppercase; }
.ac-chat__conv { border-radius: var(--ac-r-lg); transition: background var(--ac-dur-2) var(--ac-ease); }
.ac-chat__conv:hover { background: var(--ac-hover); }
.ac-chat__conv[aria-current="true"] { background: var(--ac-surface-2); box-shadow: inset 0 0 0 1px var(--ac-border); }
.ac-chat__conv-btn { display: flex; align-items: center; gap: var(--ac-s-3); inline-size: 100%; padding: 0.6rem var(--ac-s-2); border-radius: inherit; text-align: start; -webkit-touch-callout: none; transition: transform var(--ac-dur-1) var(--ac-ease); }
.ac-chat__conv-btn:active { transform: scale(0.985); }
.ac-chat__conv-btn > .ac-avatar { --ac-avatar: 2.875rem; }
.ac-chat__conv-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ac-chat__conv-top, .ac-chat__conv-bottom { display: flex; align-items: center; gap: var(--ac-s-2); min-width: 0; }
.ac-chat__conv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); }
.ac-chat__conv-time { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; flex: none; color: var(--ac-faint); font-size: var(--ac-fs-2xs); font-variant-numeric: tabular-nums; }
.ac-chat__conv-bottom { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-chat__conv-last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-chat__conv-bottom > .ac-chat__mini { margin-inline-start: auto; }
.ac-chat__typing-text { flex: 1; color: var(--ac-accent-ink); font-weight: var(--ac-fw-medium); }
.ac-chat__badge { flex: none; min-inline-size: 1.3rem; block-size: 1.3rem; padding-inline: 0.35rem; margin-inline-start: auto; display: grid; place-items: center; border-radius: var(--ac-r-pill); background: var(--ac-accent); color: var(--ac-accent-contrast); font-size: 0.6875rem; font-weight: var(--ac-fw-bold); animation: ac-chat-pop var(--ac-dur-4) var(--ac-ease-spring) both; }
.ac-chat__conv[data-muted] .ac-chat__badge { background: var(--ac-surface-3); color: var(--ac-text-soft); }
@keyframes ac-chat-pop { from { transform: scale(0.4); opacity: 0; } }
.ac-chat__none, .ac-chat__pick { display: grid; place-items: center; align-content: center; gap: var(--ac-s-2); min-block-size: 12rem; padding: var(--ac-s-6); color: var(--ac-muted); font-size: var(--ac-fs-sm); text-align: center; }
.ac-chat__pick { block-size: 100%; }
.ac-chat__pick strong { color: var(--ac-text); font-size: var(--ac-fs-lg); }
.ac-chat__none .ac-icon, .ac-chat__pick .ac-icon { color: var(--ac-faint); }
.ac-chat-tick { display: inline-flex; color: var(--ac-faint); }
.ac-chat-tick .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-chat-tick[data-status="read"] { color: var(--ac-info); }
.ac-chat-tick[data-status="sending"] { opacity: 0.5; }

/* thread */
.ac-chat__thread { position: relative; display: flex; flex-direction: column; background: var(--ac-surface-2); }
.ac-chat[data-empty] .ac-chat__head, .ac-chat[data-empty] .ac-chat__composer, .ac-chat[data-empty] .ac-chat__top { visibility: hidden; }
.ac-chat__head { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 4rem; padding: var(--ac-s-2) var(--ac-s-3); background: var(--ac-surface-1); border-block-end: 1px solid var(--ac-border); }
.ac-chat__back { display: none; }
.ac-chat__who { display: flex; align-items: center; gap: var(--ac-s-3); flex: 1; min-width: 0; padding: var(--ac-s-1) var(--ac-s-2); border-radius: var(--ac-r-md); text-align: start; transition: background var(--ac-dur-2); }
.ac-chat__who:hover { background: var(--ac-hover); }
.ac-chat__who-text { display: grid; min-width: 0; }
.ac-chat__who-text strong { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); }
.ac-chat__who-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-chat__who-text small[data-typing] { color: var(--ac-accent-ink); }
.ac-chat__verified { inline-size: 1rem; block-size: 1rem; color: var(--ac-info); flex: none; }
.ac-chat__tools { display: flex; gap: 2px; }
.ac-chat__findbar { display: flex; align-items: center; gap: var(--ac-s-2); padding: var(--ac-s-2) var(--ac-s-4); background: var(--ac-surface-1); border-block-end: 1px solid var(--ac-border); color: var(--ac-muted); animation: ac-fade-up var(--ac-dur-3) var(--ac-ease-out) both; }
.ac-chat__findbar[hidden] { display: none; }
.ac-chat__findbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ac-text); font: inherit; }
.ac-chat__findcount { font-size: var(--ac-fs-xs); font-variant-numeric: tabular-nums; }
.ac-chat__scroller { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 var(--ac-s-5) var(--ac-s-3); background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--ac-text) 5%, transparent) 1px, transparent 0); background-size: 22px 22px; }
.ac-chat__top { display: flex; align-items: center; justify-content: center; gap: var(--ac-s-2); min-block-size: 3rem; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-chat__start { display: inline-flex; align-items: center; gap: var(--ac-s-2); padding: var(--ac-s-2) var(--ac-s-3); border-radius: var(--ac-r-md); background: var(--ac-surface-1); border: 1px solid var(--ac-border); }
.ac-chat__start .ac-icon { inline-size: 0.85rem; block-size: 0.85rem; }
.ac-chat__spinner { inline-size: 1rem; block-size: 1rem; border-radius: 50%; border: 2px solid var(--ac-border-strong); border-block-start-color: var(--ac-accent); animation: ac-chat-spin 700ms linear infinite; }
@keyframes ac-chat-spin { to { transform: rotate(360deg); } }
.ac-chat__msgs { display: flex; flex-direction: column; gap: 2px; }
.ac-chat__day, .ac-chat__system, .ac-chat__unreadline { display: flex; justify-content: center; margin-block: var(--ac-s-3); position: sticky; inset-block-start: var(--ac-s-2); z-index: 1; }
.ac-chat__system, .ac-chat__unreadline { position: static; }
.ac-chat__day span, .ac-chat__system span { padding: 3px 0.75rem; border-radius: var(--ac-r-pill); background: color-mix(in oklab, var(--ac-surface-1) 88%, transparent); border: 1px solid var(--ac-border); color: var(--ac-muted); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-medium); backdrop-filter: blur(8px); }
.ac-chat__unreadline { align-items: center; gap: var(--ac-s-3); color: var(--ac-accent-ink); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); }
.ac-chat__unreadline::before, .ac-chat__unreadline::after { content: ""; flex: 1; block-size: 1px; background: color-mix(in oklab, var(--ac-accent) 40%, transparent); }
.ac-chat__row { position: relative; display: flex; align-items: flex-end; gap: var(--ac-s-2); padding-inline-end: 12%; transform: translateX(var(--_swipe, 0px)); transition: transform var(--ac-dur-3) var(--ac-ease); }
.ac-chat__row.is-first { margin-block-start: var(--ac-s-2); }
.ac-chat__row.is-mine { flex-direction: row-reverse; padding-inline: 12% 0; }
.ac-chat__row[data-swiping] { transition: none; }
.ac-chat__row[data-new] { animation: ac-chat-in 380ms var(--ac-ease-spring) both; }
@keyframes ac-chat-in { from { opacity: 0; transform: translateY(12px) scale(0.94); } }
.ac-chat__row[data-flash] .ac-chat__bubble { animation: ac-chat-flash 1.2s var(--ac-ease) both; }
@keyframes ac-chat-flash { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac-accent) 55%, transparent); } }
.ac-chat__row[data-hit] .ac-chat__bubble { box-shadow: 0 0 0 2px var(--ac-warning); }
.ac-chat__ravatar { flex: none; inline-size: 1.875rem; }
.ac-chat__replyhint { position: absolute; inset-block-end: 0.6rem; inset-inline-end: -2rem; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--ac-surface-1); color: var(--ac-muted); box-shadow: var(--ac-shadow-sm); opacity: 0; transform: scale(0.6); transition: opacity var(--ac-dur-2), transform var(--ac-dur-3) var(--ac-ease-spring); }
.ac-chat__row.is-mine .ac-chat__replyhint { inset-inline: auto -2rem; }
.ac-chat__row[data-swiping] .ac-chat__replyhint { opacity: 0.6; }
.ac-chat__row[data-armed] .ac-chat__replyhint { opacity: 1; transform: scale(1); background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-chat__bwrap { position: relative; display: grid; justify-items: start; min-width: 0; max-inline-size: min(100%, 34rem); }
.ac-chat__row.is-mine .ac-chat__bwrap { justify-items: end; }
.ac-chat__bubble { position: relative; display: grid; gap: 3px; min-width: 0; max-inline-size: 100%; padding: 0.5rem 0.8rem 0.35rem; border-radius: 1.15rem; background: var(--ac-surface-1); border: 1px solid var(--ac-border); color: var(--ac-text); font-size: var(--ac-fs-md); line-height: var(--ac-lh-snug); overflow-wrap: anywhere; user-select: text; -webkit-touch-callout: none; transition: transform var(--ac-dur-2) var(--ac-ease); }
.ac-chat__row:not(.is-mine).is-last .ac-chat__bubble { border-end-start-radius: 0.35rem; }
.ac-chat__row.is-mine .ac-chat__bubble { background: var(--ac-ink); border-color: transparent; color: var(--ac-ink-contrast); }
.ac-chat__row.is-mine.is-last .ac-chat__bubble { border-end-end-radius: 0.35rem; }
.ac-chat__bubble[data-pressed] { transform: scale(0.96); }
.ac-chat__bubble.is-media { padding: 0.25rem; }
.ac-chat__bubble.is-media .ac-chat__meta { position: absolute; inset-block-end: 0.55rem; inset-inline-end: 0.6rem; padding: 1px 0.45rem; border-radius: var(--ac-r-pill); background: rgba(0, 0, 0, 0.45); color: #fff; opacity: 1; }
.ac-chat__bubble.is-deleted { background: transparent; border-style: dashed; color: var(--ac-muted); }
.ac-chat__row.is-mine .ac-chat__bubble.is-deleted { background: transparent; border-color: var(--ac-border-strong); color: var(--ac-muted); }
.ac-chat__deleted { display: inline-flex; align-items: center; gap: var(--ac-s-2); margin: 0; font-style: italic; font-size: var(--ac-fs-sm); }
.ac-chat__deleted .ac-icon { inline-size: 0.9rem; block-size: 0.9rem; }
.ac-chat__name { display: inline-flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); color: color-mix(in oklab, var(--_c, var(--ac-chart-2)) 80%, var(--ac-text)); }
.ac-chat__name small { color: var(--ac-muted); font-weight: var(--ac-fw-regular); }
.ac-chat [data-color="1"] { --_c: var(--ac-chart-1); } .ac-chat [data-color="2"] { --_c: var(--ac-chart-2); } .ac-chat [data-color="3"] { --_c: var(--ac-chart-3); } .ac-chat [data-color="4"] { --_c: var(--ac-chart-4); }
.ac-chat [data-color="5"] { --_c: var(--ac-chart-5); } .ac-chat [data-color="6"] { --_c: var(--ac-chart-6); } .ac-chat [data-color="7"] { --_c: var(--ac-chart-7); } .ac-chat [data-color="8"] { --_c: var(--ac-chart-8); }
.ac-chat__text { margin: 0; white-space: pre-wrap; }
.ac-chat__text a, .ac-chat__link { color: var(--ac-info); text-decoration: underline; text-underline-offset: 2px; }
.ac-chat__row.is-mine .ac-chat__text a { color: inherit; }
.ac-chat__meta { display: inline-flex; align-items: center; gap: 4px; justify-self: end; color: inherit; font-size: 0.625rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.ac-chat__meta .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; }
.ac-chat__meta > span { display: inline-flex; align-items: center; gap: 2px; }
.ac-chat__row.is-mine .ac-chat__meta { opacity: 0.75; }
.ac-chat__row.is-mine .ac-chat-tick { color: inherit; }
.ac-chat__row.is-mine .ac-chat-tick[data-status="read"] { color: color-mix(in oklab, var(--ac-info) 70%, var(--ac-ink-contrast)); }
.ac-chat__fwd { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ac-fs-2xs); font-style: italic; opacity: 0.7; }
.ac-chat__fwd .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; }
.ac-chat__quote { display: grid; gap: 1px; min-width: 0; padding: 0.3rem 0.6rem; border-radius: var(--ac-r-sm); border-inline-start: 3px solid var(--_c, var(--ac-accent)); background: color-mix(in oklab, currentColor 7%, transparent); color: inherit; text-align: start; font-size: var(--ac-fs-xs); transition: background var(--ac-dur-2); }
.ac-chat__quote:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
.ac-chat__quote strong { color: color-mix(in oklab, var(--_c, var(--ac-accent)) 80%, currentColor); }
.ac-chat__quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.8; }
.ac-chat__img { position: relative; display: block; inline-size: min(17rem, 62vw); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.95rem; cursor: zoom-in; transition: filter var(--ac-dur-2); }
.ac-chat__img:hover { filter: brightness(1.05); }
.ac-chat__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ac-chat__img[data-hue], .ac-chat__gallery [data-hue], .ac-lightbox__img[data-hue] { --_hue: 20; background: radial-gradient(circle at 28% 24%, hsl(calc(var(--_hue) + 40) 90% 72%), transparent 55%), linear-gradient(135deg, hsl(var(--_hue) 70% 58%), hsl(calc(var(--_hue) + 160) 55% 42%)); color: rgba(255, 255, 255, 0.85); }
.ac-chat__art { display: grid; place-items: center; block-size: 100%; }
.ac-chat__file { display: flex; align-items: center; gap: var(--ac-s-3); min-inline-size: min(15rem, 60vw); padding: var(--ac-s-2); border-radius: 0.85rem; background: color-mix(in oklab, currentColor 7%, transparent); }
.ac-chat__file-ic { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: var(--ac-r-sm); background: var(--ac-accent); color: var(--ac-accent-contrast); }
.ac-chat__file-main { display: grid; flex: 1; min-width: 0; }
.ac-chat__file-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-chat__file-main small { opacity: 0.65; font-size: var(--ac-fs-2xs); }
.ac-chat__file .ac-chat__iconbtn { color: inherit; }
.ac-chat__link { display: grid; gap: 2px; padding: var(--ac-s-2) var(--ac-s-3); border-radius: var(--ac-r-sm); border-inline-start: 3px solid var(--ac-info); background: color-mix(in oklab, var(--ac-info) 10%, transparent); color: inherit; text-decoration: none; font-size: var(--ac-fs-xs); transition: background var(--ac-dur-2); }
.ac-chat__link:hover { background: color-mix(in oklab, var(--ac-info) 16%, transparent); }
.ac-chat__link strong { font-size: var(--ac-fs-sm); }
.ac-chat__link-site { color: var(--ac-info); font-weight: var(--ac-fw-semibold); }
.ac-chat__row.is-mine .ac-chat__link-site { color: inherit; opacity: 0.8; }
.ac-chat__reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: -0.35rem; padding-inline: var(--ac-s-2); position: relative; z-index: 1; }
.ac-chat__react { display: inline-flex; align-items: center; gap: 3px; block-size: 1.6rem; padding-inline: 0.45rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-1); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-xs); font-size: var(--ac-fs-xs); transition: transform var(--ac-dur-2) var(--ac-ease-spring), border-color var(--ac-dur-2); }
.ac-chat__react:hover { transform: scale(1.08); }
.ac-chat__react:active { transform: scale(0.92); }
.ac-chat__react[aria-pressed="true"] { border-color: var(--ac-accent); background: var(--ac-accent-soft); color: var(--ac-accent-ink); }
.ac-chat__react[data-pop] { animation: ac-chat-pop 420ms var(--ac-ease-spring); }
.ac-chat__react bdi { font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; }
.ac-chat__hover { position: absolute; inset-block-start: 50%; inset-inline-start: calc(100% + 0.35rem); display: flex; gap: 2px; padding: 2px; border-radius: var(--ac-r-pill); background: var(--ac-surface-1); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.9); transition: opacity var(--ac-dur-2), transform var(--ac-dur-2) var(--ac-ease); }
.ac-chat__row.is-mine .ac-chat__hover { inset-inline: auto calc(100% + 0.35rem); }
.ac-chat__hover button { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; color: var(--ac-muted); transition: background var(--ac-dur-1), color var(--ac-dur-1); }
.ac-chat__hover button:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-chat__hover .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) { .ac-chat__row:hover .ac-chat__hover, .ac-chat__row:focus-within .ac-chat__hover { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); } }
.ac-chat__dots { display: flex; gap: 4px; padding: 0.8rem 0.95rem; }
.ac-chat__dots i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ac-muted); animation: ac-chat-typing 1.2s var(--ac-ease) infinite; }
.ac-chat__dots i:nth-child(2) { animation-delay: 0.15s; } .ac-chat__dots i:nth-child(3) { animation-delay: 0.3s; }
.ac-chat__row.is-typing { animation: ac-chat-in 300ms var(--ac-ease-spring) both; margin-block-start: var(--ac-s-2); }
@keyframes ac-chat-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } }
.ac-chat__tobottom { position: absolute; inset-block-end: 5.25rem; inset-inline-end: var(--ac-s-4); z-index: 2; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--ac-surface-1); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-md); color: var(--ac-text); animation: ac-chat-pop var(--ac-dur-3) var(--ac-ease-spring) both; transition: transform var(--ac-dur-1); }
.ac-chat__tobottom:active { transform: scale(0.9); }
.ac-chat__tobottom[hidden] { display: none; }
.ac-chat__tobottom span:not(:empty) { position: absolute; inset-block-start: -0.4rem; inset-inline-end: -0.2rem; min-inline-size: 1.25rem; padding-inline: 0.3rem; border-radius: var(--ac-r-pill); background: var(--ac-accent); color: var(--ac-accent-contrast); font-size: 0.625rem; font-weight: var(--ac-fw-bold); line-height: 1.25rem; text-align: center; }

/* voice note */
.ac-voice { display: flex; align-items: center; gap: var(--ac-s-2); min-inline-size: min(14rem, 60vw); padding: 0.15rem 0.2rem; }
.ac-voice__play { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; flex: none; border-radius: 50%; background: var(--ac-accent); color: var(--ac-accent-contrast); transition: transform var(--ac-dur-2) var(--ac-ease-spring); }
.ac-voice__play:hover { transform: scale(1.06); }
.ac-voice__play:active { transform: scale(0.9); }
.ac-voice__play .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-voice__wave { display: flex; align-items: center; gap: 2px; flex: 1; block-size: 1.7rem; }
.ac-voice__wave i { flex: 1; min-inline-size: 2px; block-size: 35%; border-radius: 2px; background: currentColor; opacity: 0.35; }
.ac-voice__wave i:nth-child(3n) { block-size: 70%; } .ac-voice__wave i:nth-child(4n + 1) { block-size: 52%; } .ac-voice__wave i:nth-child(5n) { block-size: 95%; } .ac-voice__wave i:nth-child(7n + 2) { block-size: 80%; }
.ac-voice__wave i:nth-child(-n + 10) { opacity: 0.9; }
.ac-voice[data-playing="true"] .ac-voice__wave i { animation: ac-chat-wave 900ms var(--ac-ease) infinite alternate; }
.ac-voice[data-playing="true"] .ac-voice__wave i:nth-child(2n) { animation-delay: -300ms; } .ac-voice[data-playing="true"] .ac-voice__wave i:nth-child(3n) { animation-delay: -600ms; }
@keyframes ac-chat-wave { to { transform: scaleY(0.45); opacity: 0.9; } }
.ac-voice__time { font-size: var(--ac-fs-2xs); opacity: 0.75; font-variant-numeric: tabular-nums; }

/* composer */
.ac-chat__bar { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2) var(--ac-s-3) var(--ac-s-2) var(--ac-s-4); background: var(--ac-surface-1); border-block-start: 1px solid var(--ac-border); animation: ac-fade-up var(--ac-dur-3) var(--ac-ease-out) both; }
.ac-chat__bar[hidden] { display: none; }
.ac-chat__bar-ic { color: var(--ac-accent); flex: none; }
.ac-chat__bar-main { display: grid; flex: 1; min-width: 0; padding-inline-start: var(--ac-s-3); border-inline-start: 2px solid var(--ac-accent); font-size: var(--ac-fs-xs); }
.ac-chat__bar-main strong { color: var(--ac-accent-ink); }
.ac-chat__bar-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-muted); }
.ac-chat__composer { display: flex; align-items: flex-end; gap: var(--ac-s-1); padding: var(--ac-s-3); background: var(--ac-surface-1); border-block-start: 1px solid var(--ac-border); }
.ac-chat__bar:not([hidden]) + .ac-chat__composer { border-block-start: 0; padding-block-start: 0; }
.ac-chat__composer[hidden], .ac-chat__readonly[hidden] { display: none; }
.ac-chat__cbtn { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: 50%; color: var(--ac-muted); transition: background var(--ac-dur-2), color var(--ac-dur-2), transform var(--ac-dur-1); }
.ac-chat__cbtn:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-chat__cbtn:active { transform: scale(0.9); }
.ac-chat__composer[data-recording] .ac-chat__cbtn { display: none; }
.ac-chat__field { flex: 1; min-width: 0; display: flex; align-items: center; min-block-size: 2.5rem; padding: 0.15rem var(--ac-s-4); border-radius: 1.25rem; background: var(--ac-surface-2); border: 1px solid var(--ac-border); transition: border-color var(--ac-dur-2), box-shadow var(--ac-dur-2), background var(--ac-dur-2); }
.ac-chat__field:focus-within { background: var(--ac-surface-1); border-color: var(--ac-border-strong); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac-ink) 7%, transparent); }
.ac-chat__field textarea { flex: 1; min-width: 0; max-block-size: 8.75rem; padding-block: 0.45rem; border: 0; outline: 0; resize: none; background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-md); line-height: 1.45; }
.ac-chat__field textarea[hidden], .ac-chat__rec[hidden] { display: none; }
.ac-chat__rec { display: flex; align-items: center; gap: var(--ac-s-2); flex: 1; font-size: var(--ac-fs-sm); font-variant-numeric: tabular-nums; }
.ac-chat__recdot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--ac-danger); animation: ac-chat-blink 1s steps(2, start) infinite; }
@keyframes ac-chat-blink { to { opacity: 0.2; } }
.ac-chat__recwave { display: flex; align-items: center; gap: 2px; flex: 1; block-size: 1.4rem; color: var(--ac-accent); }
.ac-chat__recwave i { flex: 1; block-size: 30%; border-radius: 2px; background: currentColor; animation: ac-chat-wave 600ms var(--ac-ease) infinite alternate; }
.ac-chat__recwave i:nth-child(2n) { block-size: 80%; animation-delay: -200ms; } .ac-chat__recwave i:nth-child(3n) { block-size: 55%; animation-delay: -400ms; }
.ac-chat__reccancel { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; color: var(--ac-danger); transition: background var(--ac-dur-2); }
.ac-chat__reccancel:hover { background: var(--ac-danger-soft); }
.ac-chat__send { position: relative; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: 50%; background: var(--ac-ink); color: var(--ac-ink-contrast); transition: transform var(--ac-dur-2) var(--ac-ease-spring), background var(--ac-dur-2); }
.ac-chat__send:hover { transform: scale(1.06); }
.ac-chat__send:active { transform: scale(0.9); }
.ac-chat__send[data-mode="send"] { background: var(--ac-accent); color: var(--ac-accent-contrast); }
.ac-chat__send > .ac-icon { position: absolute; transition: transform var(--ac-dur-3) var(--ac-ease-spring), opacity var(--ac-dur-2); }
.ac-chat__send[data-mode="mic"] .ac-chat__send-go, .ac-chat__send[data-mode="send"] .ac-chat__send-mic { opacity: 0; transform: scale(0.4) rotate(-30deg); }
.ac-chat__readonly { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-3); padding: var(--ac-s-3) var(--ac-s-4); background: var(--ac-surface-1); border-block-start: 1px solid var(--ac-border); color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-chat__readonly > span { display: inline-flex; align-items: center; gap: var(--ac-s-2); }
.ac-chat__pill { display: inline-flex; align-items: center; gap: var(--ac-s-2); block-size: 2.25rem; padding-inline: var(--ac-s-4); border-radius: var(--ac-r-pill); background: var(--ac-ink); color: var(--ac-ink-contrast); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); transition: transform var(--ac-dur-1); }
.ac-chat__pill:active { transform: var(--ac-press); }
.ac-chat__emoji { display: grid; grid-template-columns: repeat(8, 2.25rem); gap: 2px; max-block-size: 15rem; overflow-y: auto; padding: var(--ac-s-2); }
.ac-chat__emoji button { display: grid; place-items: center; block-size: 2.25rem; border-radius: var(--ac-r-sm); font-size: 1.3rem; transition: background var(--ac-dur-1), transform var(--ac-dur-2) var(--ac-ease-spring); }
.ac-chat__emoji button:hover { background: var(--ac-hover); transform: scale(1.2); }
.ac-chat__emoji button:active { transform: scale(0.9); }
.ac-chat__reactbar { display: flex; justify-content: space-between; gap: 2px; padding: var(--ac-s-1) var(--ac-s-1) var(--ac-s-2); margin-block-end: var(--ac-s-1); border-block-end: 1px solid var(--ac-border); }
.ac-chat__reactbar button { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; font-size: 1.3rem; transition: transform var(--ac-dur-2) var(--ac-ease-spring), background var(--ac-dur-1); animation: ac-chat-pop var(--ac-dur-4) var(--ac-ease-spring) both; }
.ac-chat__reactbar button:nth-child(2) { animation-delay: 30ms; } .ac-chat__reactbar button:nth-child(3) { animation-delay: 60ms; } .ac-chat__reactbar button:nth-child(4) { animation-delay: 90ms; } .ac-chat__reactbar button:nth-child(5) { animation-delay: 120ms; } .ac-chat__reactbar button:nth-child(6) { animation-delay: 150ms; }
.ac-chat__reactbar button:hover { transform: scale(1.25); background: var(--ac-hover); }
.ac-chat__reactbar button[aria-pressed="true"] { background: var(--ac-accent-soft); }

/* info sidebar */
.ac-chat__info { flex-direction: column; border-inline-start: 1px solid var(--ac-border); background: var(--ac-surface-1); }
.ac-chat__infohead { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 4rem; padding: var(--ac-s-2) var(--ac-s-3); border-block-end: 1px solid var(--ac-border); font-weight: var(--ac-fw-semibold); }
.ac-chat__infobody { flex: 1; min-block-size: 0; overflow-y: auto; padding-block-end: var(--ac-s-4); scrollbar-width: thin; }
.ac-chat__profile { display: grid; justify-items: center; gap: var(--ac-s-1); padding: var(--ac-s-6) var(--ac-s-4) var(--ac-s-4); text-align: center; }
.ac-chat__profile > .ac-avatar { --ac-avatar: 5rem; margin-block-end: var(--ac-s-2); }
.ac-chat__profile > strong { font-size: var(--ac-fs-lg); font-weight: var(--ac-fw-semibold); }
.ac-chat__profile > small { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-chat__qa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ac-s-2); inline-size: 100%; margin-block-start: var(--ac-s-4); }
.ac-chat__qa button { display: grid; justify-items: center; gap: 4px; padding: var(--ac-s-2) 2px; border-radius: var(--ac-r-md); background: var(--ac-surface-2); color: var(--ac-text-soft); font-size: 0.625rem; transition: background var(--ac-dur-2), color var(--ac-dur-2), transform var(--ac-dur-1); }
.ac-chat__qa button:hover { background: var(--ac-surface-3); color: var(--ac-text); }
.ac-chat__qa button:active { transform: var(--ac-press); }
.ac-chat__qa button[aria-pressed="true"] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-chat__qa span { overflow: hidden; max-inline-size: 100%; text-overflow: ellipsis; white-space: nowrap; }
.ac-chat__facts { display: grid; margin: 0 var(--ac-s-4); border-radius: var(--ac-r-md); background: var(--ac-surface-2); }
.ac-chat__facts:empty { display: none; }
.ac-chat__facts > div { display: grid; gap: 2px; padding: var(--ac-s-3); }
.ac-chat__facts > div + div { border-block-start: 1px solid var(--ac-border); }
.ac-chat__facts dt { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-chat__facts dd { margin: 0; font-size: var(--ac-fs-sm); }
.ac-chat__members { padding: var(--ac-s-2) var(--ac-s-2) 0; }
.ac-chat__member { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2); border-radius: var(--ac-r-md); }
.ac-chat__member:hover { background: var(--ac-hover); }
.ac-chat__member > span:nth-child(2) { display: grid; flex: 1; min-width: 0; font-size: var(--ac-fs-sm); }
.ac-chat__member small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-chat__tabs { position: sticky; inset-block-start: 0; z-index: 1; display: flex; gap: var(--ac-s-1); margin-block-start: var(--ac-s-4); padding: var(--ac-s-2) var(--ac-s-3); background: var(--ac-surface-1); border-block-end: 1px solid var(--ac-border); }
.ac-chat__tabs button { flex: 1; block-size: 2rem; border-radius: var(--ac-r-pill); color: var(--ac-text-soft); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); transition: background var(--ac-dur-2), color var(--ac-dur-2); }
.ac-chat__tabs button:hover { background: var(--ac-hover); }
.ac-chat__tabs button[aria-selected="true"] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-chat__tabpanel { padding: var(--ac-s-3); animation: ac-fade-up var(--ac-dur-3) var(--ac-ease-out) both; }
.ac-chat__tabpanel[hidden] { display: none; }
.ac-chat__tabpanel > .ac-chat__file { margin-block-end: var(--ac-s-2); background: var(--ac-surface-2); }
.ac-chat__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.ac-chat__gallery button { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--ac-r-xs); background: var(--ac-surface-3); color: rgba(255, 255, 255, 0.85); transition: transform var(--ac-dur-2) var(--ac-ease), filter var(--ac-dur-2); }
.ac-chat__gallery button:hover { transform: scale(0.96); filter: brightness(1.06); }
.ac-chat__gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ac-chat__linkrow { display: flex; align-items: flex-start; gap: var(--ac-s-3); padding: var(--ac-s-2); border-radius: var(--ac-r-md); font-size: var(--ac-fs-sm); transition: background var(--ac-dur-2); }
.ac-chat__linkrow:hover { background: var(--ac-hover); }
.ac-chat__linkrow > .ac-icon { box-sizing: content-box; padding: 0.5rem; border-radius: var(--ac-r-sm); background: var(--ac-info-soft); color: var(--ac-info-ink); flex: none; }
.ac-chat__linkrow > span { display: grid; min-width: 0; }
.ac-chat__linkrow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-chat__emptytab { padding: var(--ac-s-6) 0; color: var(--ac-muted); font-size: var(--ac-fs-sm); text-align: center; }

/* modals (new chat / forward) */
.ac-chat__newchat { display: grid; gap: var(--ac-s-3); }
.ac-chat__newmode { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ac-s-2); }
.ac-chat__newmode button { display: flex; align-items: center; justify-content: center; gap: var(--ac-s-2); block-size: 2.75rem; border-radius: var(--ac-r-md); background: var(--ac-surface-2); color: var(--ac-text-soft); font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-sm); transition: background var(--ac-dur-2), color var(--ac-dur-2), transform var(--ac-dur-1); }
.ac-chat__newmode button:active { transform: var(--ac-press); }
.ac-chat__newmode button[aria-selected="true"] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-chat__newchat input[hidden] { display: none; }
.ac-chat__newchat .ac-chat__search, .ac-chat__pickerlist { --x: 0; }
.ac-chat__pickerlist { display: grid; gap: 2px; max-block-size: 22rem; overflow-y: auto; margin-inline: calc(var(--ac-s-2) * -1); }
.ac-chat__pickrow { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2); border-radius: var(--ac-r-md); cursor: pointer; transition: background var(--ac-dur-2); }
.ac-chat__pickrow:hover { background: var(--ac-hover); }
.ac-chat__pickrow[hidden] { display: none; }
.ac-chat__pickrow > span:nth-child(2) { display: grid; flex: 1; min-width: 0; font-size: var(--ac-fs-sm); }
.ac-chat__pickrow small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-chat__pickrow input[hidden] { display: none; }
.ac-chat__modalfoot { display: flex; justify-content: flex-end; gap: var(--ac-s-2); inline-size: 100%; }

/* lightbox */
.ac-lightbox { --ac-pull: 0px; position: fixed; inset: 0; z-index: var(--ac-z-modal); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: var(--ac-s-3); padding: calc(var(--ac-s-3) + var(--ac-safe-top)) var(--ac-s-3) calc(var(--ac-s-6) + var(--ac-safe-bottom)); background: rgba(8, 8, 10, calc(0.92 - min(var(--ac-pull) / 600px, 0.5))); color: #fff; animation: ac-lb-in var(--ac-dur-3) var(--ac-ease-out) both; }
.ac-lightbox[data-closing] { animation: ac-lb-out 200ms var(--ac-ease-in) both; }
@keyframes ac-lb-in { from { opacity: 0; } }
@keyframes ac-lb-out { to { opacity: 0; } }
.ac-lightbox__top { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--ac-s-3); }
.ac-lightbox__who { display: flex; align-items: center; gap: var(--ac-s-2); flex: 1; min-width: 0; }
.ac-lightbox__who > span { display: grid; font-size: var(--ac-fs-sm); }
.ac-lightbox__who small { opacity: 0.6; font-size: var(--ac-fs-2xs); }
.ac-lightbox__count { opacity: 0.7; font-size: var(--ac-fs-sm); font-variant-numeric: tabular-nums; }
.ac-lightbox__btn, .ac-lightbox__nav { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; transition: background var(--ac-dur-2), transform var(--ac-dur-1), opacity var(--ac-dur-2); }
.ac-lightbox__btn:hover, .ac-lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
.ac-lightbox__btn:active, .ac-lightbox__nav:active { transform: scale(0.9); }
.ac-lightbox__nav:disabled { opacity: 0.25; pointer-events: none; }
.ac-lightbox__stage { display: grid; justify-items: center; align-content: center; gap: var(--ac-s-3); block-size: 100%; margin: 0; touch-action: pan-y; transform: translate(var(--ac-drag, 0px), var(--ac-pull)); transition: transform var(--ac-dur-3) var(--ac-ease); }
.ac-lightbox[data-dragging] .ac-lightbox__stage, .ac-lightbox__stage[data-dragging] { transition: none; }
.ac-lightbox__stage.is-in .ac-lightbox__img { animation: ac-lb-img 360ms var(--ac-ease-out) both; }
.ac-lightbox__stage[data-dir="1"].is-in .ac-lightbox__img { --_from: calc(40px * var(--ac-dir)); }
.ac-lightbox__stage[data-dir="-1"].is-in .ac-lightbox__img { --_from: calc(-40px * var(--ac-dir)); }
@keyframes ac-lb-img { from { opacity: 0; transform: translateX(var(--_from, 0px)) scale(0.96); } }
.ac-lightbox__img { display: grid; place-items: center; inline-size: min(100%, 60rem); max-block-size: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ac-r-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.ac-lightbox__img img { inline-size: 100%; block-size: 100%; object-fit: contain; background: #000; }
.ac-lightbox figcaption { max-inline-size: 40rem; text-align: center; font-size: var(--ac-fs-sm); opacity: 0.85; }

/* tablet + phone */
@media (max-width: 1023.98px) {
  .ac-chat { grid-template-columns: minmax(15rem, 18.5rem) minmax(0, 1fr); }
  .ac-chat[data-info] { grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); }
  .ac-chat[data-info] > .ac-chat__side { display: none; }
  .ac-chat__hide-sm { display: none; }
}
@media (max-width: 639.98px) {
  .ac-chat[data-stacked] { display: block; block-size: auto; overflow: visible; background: none; border: 0; border-radius: 0; }
  .ac-chat[data-stacked] > .ac-chat__side { border: 0; }
  .ac-chat[data-stacked] .ac-chat__sidehead { padding: 0 0 var(--ac-s-3); }
  .ac-chat[data-stacked] .ac-chat__sidetitle { display: none; }
  .ac-chat[data-stacked] .ac-chat__search { background: var(--ac-surface-1); border-color: var(--ac-border); }
  .ac-chat[data-stacked] .ac-chat__convs { overflow: visible; padding: var(--ac-s-1); border-radius: var(--ac-r-xl); background: var(--ac-surface-1); border: 1px solid var(--ac-border); }
  .ac-chat[data-stacked] > .ac-split__pane.ac-chat__thread, .ac-chat[data-stacked] > .ac-split__pane.ac-chat__info { padding-block-start: 0; }
  .ac-chat[data-stacked] > .ac-chat__info { display: flex; border: 0; }
  .ac-chat[data-stacked] .ac-chat__head, .ac-chat[data-stacked] .ac-chat__infohead { padding-block-start: calc(var(--ac-s-2) + var(--ac-safe-top)); min-block-size: calc(3.75rem + var(--ac-safe-top)); padding-inline: var(--ac-s-1) var(--ac-s-2); }
  .ac-chat[data-stacked] .ac-chat__back { display: inline-grid; }
  .ac-chat[data-stacked] .ac-chat__who { padding-inline: var(--ac-s-1); }
  .ac-chat[data-stacked] .ac-chat__scroller { padding-inline: var(--ac-s-3); }
  .ac-chat[data-stacked] .ac-chat__composer, .ac-chat[data-stacked] .ac-chat__readonly { padding-block-end: calc(var(--ac-s-3) + var(--ac-safe-bottom)); }
  .ac-chat[data-stacked] .ac-chat__tobottom { inset-block-end: calc(5.25rem + var(--ac-safe-bottom)); }
  .ac-chat__row { padding-inline-end: 8%; }
  .ac-chat__row.is-mine { padding-inline-start: 8%; }
  .ac-chat__tools .ac-chat__iconbtn[data-act="find"] { display: none; }
}


/* ==== modules/files/files.css ==== */
/* Files module — Finder-class window: toolbar · sidebar · views (icons / list / columns / gallery) · status bar ·
   preview & Get Info pane, Quick Look, uploads, phone Files-app layout. Tokens only, logical properties. */
.ac-fm {
  --fm-icon: 76px;
  --fm-fold-b: #4f9bf0; --fm-fold-f: #7dbaf7; --fm-fold-h: rgba(255, 255, 255, 0.55); --fm-fold-g: #3d86d9;
  --fm-page: #fff; --fm-page-line: #d9dce2; --fm-page-fold: #eceef2; --fm-page-ink: #c9cdd4;
  --fm-sel: var(--ac-ink); --fm-sel-ink: var(--ac-ink-contrast); --fm-side: color-mix(in oklab, var(--ac-surface-2) 70%, transparent);
  container-type: inline-size;
  position: relative; display: flex; flex-direction: column; block-size: var(--fm-h, 42rem); min-block-size: 26rem;
  border: 1px solid var(--ac-border); border-radius: var(--ac-r-2xl); background: var(--ac-surface-1); overflow: hidden; outline: none;
  color: var(--ac-text); -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] .ac-fm, :root[data-theme="dark"] .ac-fm-ql, :root[data-theme="dark"] .ac-fm-ghost, :root[data-theme="dark"] .ac-fm-up, :root[data-theme="dark"] .ac-fm-layer {
  --fm-fold-b: #3b82d6; --fm-fold-f: #5ea3ec; --fm-fold-h: rgba(255, 255, 255, 0.3); --fm-fold-g: #2b6fbf;
  --fm-page: #2a2a2e; --fm-page-line: #3b3b41; --fm-page-fold: #35353b; --fm-page-ink: #55555d;
}
.ac-fm-ql, .ac-fm-ghost, .ac-fm-up, .ac-fm-layer, .ac-fm-selbar { --fm-fold-b: #4f9bf0; --fm-fold-f: #7dbaf7; --fm-fold-h: rgba(255, 255, 255, 0.55); --fm-fold-g: #3d86d9; --fm-page: #fff; --fm-page-line: #d9dce2; --fm-page-fold: #eceef2; --fm-page-ink: #c9cdd4; }
.ac-fm button:not(.ac-btn) { font: inherit; color: inherit; }
.ac-fm [hidden] { display: none !important; }

/* ---- artwork ------------------------------------------------------------- */
.fmi { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.fmi-page { fill: var(--fm-page); stroke: var(--fm-page-line); stroke-width: 1; }
.fmi-fold { fill: var(--fm-page-fold); stroke: var(--fm-page-line); stroke-width: 1; stroke-linejoin: round; }
.fmi-line { fill: var(--fm-page-ink); }
.fmi--folder { filter: drop-shadow(0 1px 1px rgba(20, 40, 80, 0.12)); }
.fmi-fb { fill: var(--fm-fold-b); } .fmi-ff { fill: var(--fm-fold-f); } .fmi-fh { fill: var(--fm-fold-h); } .fmi-fg { fill: var(--fm-fold-g); opacity: 0.75; }
.fmi[data-color="red"] { --fm-fold-b: #e5484d; --fm-fold-f: #f87171; --fm-fold-g: #c53035; }
.fmi[data-color="orange"] { --fm-fold-b: #ea6a2e; --fm-fold-f: #fb9a5b; --fm-fold-g: #c9541c; }
.fmi[data-color="yellow"] { --fm-fold-b: #d9a20b; --fm-fold-f: #f5c63c; --fm-fold-g: #b48406; }
.fmi[data-color="green"] { --fm-fold-b: #1f9d55; --fm-fold-f: #4cc47e; --fm-fold-g: #177a42; }
.fmi[data-color="purple"] { --fm-fold-b: #8b5cf6; --fm-fold-f: #b391fb; --fm-fold-g: #6d3fe0; }
.fmi[data-color="gray"] { --fm-fold-b: #7d8590; --fm-fold-f: #a7adb6; --fm-fold-g: #636a74; }
.fmi--pdf { --_c: #e5484d; } .fmi--doc { --_c: #2f6fde; } .fmi--xls { --_c: #1e9e5a; } .fmi--ppt { --_c: #e8682f; } .fmi--zip { --_c: #a07a3c; }
.fmi--code { --_c: #5b5bd6; } .fmi--txt { --_c: #7d8590; } .fmi--audio { --_c: #d0417e; } .fmi--video { --_c: #7c4ddb; } .fmi--image { --_c: #0e9f9a; } .fmi--unknown { --_c: #8b8f98; }
.ac-fm__art { position: relative; display: grid; place-items: center; flex: none; }
.ac-fm__art > .fmi, .ac-fm__art > .ac-fm-live, .ac-fm__art > .ac-fm-thumb { max-inline-size: 100%; max-block-size: 100%; }
.ac-fm-live { display: grid; place-items: center; inline-size: 100%; block-size: 100%; }
.ac-fm-live > .fmi { inline-size: 100%; block-size: 100%; }
.ac-fm-thumb { position: relative; display: inline-grid; place-items: center; max-inline-size: 100%; max-block-size: 100%; border-radius: 4px; background: var(--fm-page); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.12); overflow: hidden; }
.ac-fm-thumb img { display: block; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.ac-fm-thumb[data-page] { padding: 0; }
.ac-fm-thumb[data-type="video"] { background: #111; border-radius: 6px; }
.ac-fm-thumb__play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; display: grid; place-items: center; inline-size: 34%; max-inline-size: 2.25rem; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; backdrop-filter: blur(6px); }
.ac-fm-thumb__play .ac-icon { inline-size: 50%; block-size: 50%; fill: currentColor; }
.ac-fm-thumb__dur { position: absolute; inset-block-end: 4px; inset-inline-end: 4px; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; font-variant-numeric: tabular-nums; }
/* text / CSV / Markdown / audio / Office mini pages */
.ac-fm-page { position: relative; display: block; inline-size: 78%; aspect-ratio: 0.78; max-block-size: 100%; border-radius: 4px; background: var(--fm-page); box-shadow: 0 0 0 1px var(--fm-page-line), 0 2px 6px rgba(0, 0, 0, 0.1); overflow: hidden; text-align: start; color: var(--ac-text-soft); }
.ac-fm-page__in { position: absolute; inset: 9% 9% 18%; display: flex; flex-direction: column; gap: 0.18em; font-size: calc(var(--_fs, 76px) * 0.075); line-height: 1.35; overflow: hidden; }
.ac-fm-page__in code { font-family: var(--ac-font-mono); font-size: 0.9em; white-space: pre; direction: ltr; text-align: left; color: var(--ac-text-soft); }
.ac-fm-page__in b { color: var(--ac-text); font-size: 1.15em; }
.ac-fm-page__in span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-fm-page__in table { border-collapse: collapse; font-size: 0.86em; inline-size: 100%; }
.ac-fm-page__in th, .ac-fm-page__in td { border: 1px solid var(--fm-page-line); padding: 0.1em 0.25em; white-space: nowrap; overflow: hidden; max-inline-size: 3em; text-overflow: ellipsis; }
.ac-fm-page__in th { background: color-mix(in oklab, #1e9e5a 14%, transparent); color: var(--ac-text); }
.ac-fm-page__ext { position: absolute; inset-block-end: 6%; inset-inline-start: 8%; padding: 0.1em 0.45em; border-radius: 0.35em; background: #7d8590; color: #fff; font-size: calc(var(--_fs, 76px) * 0.085); font-weight: 700; letter-spacing: 0.03em; }
.ac-fm-page__ext[data-type="code"] { background: #5b5bd6; } .ac-fm-page__ext[data-type="audio"] { background: #d0417e; } .ac-fm-page__ext[data-type="doc"] { background: #2f6fde; }
.ac-fm-page__ext[data-type="xls"] { background: #1e9e5a; } .ac-fm-page__ext[data-type="ppt"] { background: #e8682f; }
.ac-fm-page--csv .ac-fm-page__ext { background: #1e9e5a; }
.ac-fm-page--office .ac-fm-page__in > i, .ac-fm-page__slide > i { display: block; block-size: 0.42em; border-radius: 1em; background: var(--fm-page-ink); }
.ac-fm-page--office .ac-fm-page__in > i:nth-child(3n) { inline-size: 70%; }
.ac-fm-page__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fm-page-line); border: 1px solid var(--fm-page-line); }
.ac-fm-page__grid i { block-size: 0.9em; background: var(--fm-page); }
.ac-fm-page__grid i:nth-child(-n+4) { background: color-mix(in oklab, #1e9e5a 20%, var(--fm-page)); }
.ac-fm-page[data-type="ppt"] { aspect-ratio: 1.45; inline-size: 92%; }
.ac-fm-page__slide { display: flex; flex-direction: column; justify-content: center; gap: 0.35em; block-size: 100%; padding: 0.4em; border-radius: 0.3em; background: linear-gradient(135deg, #2a2a30, #111); }
.ac-fm-page__slide b { color: #fff !important; } .ac-fm-page__slide i { background: rgba(255, 255, 255, 0.3) !important; inline-size: 60%; }
.ac-fm-page--audio { display: grid; place-items: center; aspect-ratio: 1; inline-size: 88%; border-radius: 18%; background: linear-gradient(135deg, #f472b6, #9333ea); box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3); }
.ac-fm-page--audio .ac-fm-page__ext { background: rgba(0, 0, 0, 0.25); }
.ac-fm-wave { inline-size: 74%; block-size: 46%; fill: rgba(255, 255, 255, 0.92); }

/* ---- toolbar ------------------------------------------------------------- */
.ac-fm__bar { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 3.5rem; padding: var(--ac-s-2) var(--ac-s-3); border-block-end: 1px solid var(--ac-border); background: var(--ac-surface-1); }
.ac-fm__navgrp, .ac-fm__hist, .ac-fm__tools { display: flex; align-items: center; gap: 2px; flex: none; }
.ac-fm__tools { gap: var(--ac-s-1); margin-inline-start: auto; }
.ac-fm__hist { margin-inline-start: var(--ac-s-1); }
.ac-fm__tb { display: inline-grid; place-items: center; inline-size: 2.125rem; block-size: 2.125rem; border-radius: var(--ac-r-md); color: var(--ac-text-soft); transition: background-color var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm__tb:hover:not(:disabled) { background: var(--ac-hover); color: var(--ac-text); }
.ac-fm__tb:active:not(:disabled) { transform: scale(0.92); }
.ac-fm__tb:disabled { opacity: 0.35; }
.ac-fm__tb[aria-pressed="true"] { background: var(--ac-active); color: var(--ac-text); }
.ac-fm__tb:focus-visible, .ac-fm__crumb:focus-visible, .ac-fm__nav:focus-visible { outline: 2px solid var(--ac-ring, var(--ac-accent)); outline-offset: 1px; }
.ac-fm__sep { inline-size: 1px; block-size: 1.25rem; margin-inline: var(--ac-s-1); background: var(--ac-border); }
.ac-fm__views .ac-segmented__item { min-inline-size: 2.125rem; padding-inline: 0.45rem; }
.ac-fm__where { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; cursor: text; border-radius: var(--ac-r-md); }
.ac-fm__crumbs { min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.ac-fm__crumbs::-webkit-scrollbar { display: none; }
.ac-fm__crumbs ol { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.ac-fm__crumbs li { display: flex; align-items: center; flex: none; }
.ac-fm__crumb-sep { display: inline-grid; color: var(--ac-faint); } .ac-fm__crumb-sep .ac-icon { inline-size: 0.9rem; block-size: 0.9rem; }
.ac-fm__crumb { display: inline-flex; align-items: center; gap: 0.35rem; max-inline-size: 14rem; block-size: 2rem; padding-inline: 0.5rem; border-radius: var(--ac-r-md); color: var(--ac-muted); font-size: var(--ac-fs-sm); transition: background-color var(--ac-dur-1), color var(--ac-dur-1); }
.ac-fm__crumb span { overflow: hidden; text-overflow: ellipsis; }
.ac-fm__crumb .ac-icon { inline-size: 1rem; block-size: 1rem; flex: none; }
.ac-fm__crumb:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-fm__crumb[aria-current="page"] { color: var(--ac-text); font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-md); }
.ac-fm__crumb[data-over] { background: var(--ac-accent-soft); color: var(--ac-accent-ink); box-shadow: inset 0 0 0 2px var(--ac-accent); }
.ac-fm__pathform { flex: 1; }
.ac-fm__pathinput { inline-size: 100%; block-size: 2.125rem; padding-inline: 0.75rem; border: 1px solid var(--ac-accent); border-radius: var(--ac-r-md); background: var(--ac-surface-1); color: var(--ac-text); font: inherit; font-size: max(16px, var(--ac-fs-sm)); outline: 3px solid var(--ac-accent-soft); }
.ac-fm__search { position: relative; display: flex; align-items: center; inline-size: 11rem; block-size: 2.125rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-2); transition: inline-size var(--ac-dur-3) var(--ac-ease-out), background-color var(--ac-dur-2), box-shadow var(--ac-dur-2); }
.ac-fm__search:focus-within { inline-size: 15rem; background: var(--ac-surface-1); box-shadow: 0 0 0 1px var(--ac-border-strong), 0 0 0 4px var(--ac-accent-soft); }
.ac-fm__search-i { display: grid; place-items: center; inline-size: 2rem; color: var(--ac-muted); flex: none; } .ac-fm__search-i .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-fm__q { flex: 1; min-inline-size: 0; block-size: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: var(--ac-fs-sm); outline: none; }
.ac-fm__q::-webkit-search-cancel-button { cursor: pointer; }
.ac-fm__kbd { margin-inline-end: 0.5rem; padding: 0 0.3rem; border-radius: 4px; background: var(--ac-surface-3); color: var(--ac-faint); font: 600 10px/1.5 var(--ac-font-sans); }
.ac-fm__search:focus-within .ac-fm__kbd { display: none; }
.ac-fm__upbtn { margin-inline-start: var(--ac-s-1); }
@container (max-width: 1180px) { .ac-fm__upbtn span, .ac-fm__kbd { display: none; } .ac-fm__search { inline-size: 9rem; } .ac-fm__search:focus-within { inline-size: 12rem; } }
@container (max-width: 980px) { [data-act="share"].ac-fm__tb, .ac-fm__sep { display: none; } }
@container (max-width: 1099px) { [data-act="preview"].ac-fm__tb { display: none; } }

/* ---- search filters -------------------------------------------------------- */
.ac-fm__filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ac-s-2); padding: var(--ac-s-2) var(--ac-s-4); border-block-end: 1px solid var(--ac-border); background: var(--ac-bg-subtle, var(--ac-surface-2)); animation: ac-fade-in var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm__scope .ac-segmented__item { max-inline-size: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-fm__fchips { display: flex; flex-wrap: wrap; gap: var(--ac-s-1); }
.ac-fm-fchip { display: inline-flex; align-items: center; gap: 0.25rem; block-size: 1.875rem; padding-inline: 0.75rem 0.5rem; border: 1px dashed var(--ac-border-strong); border-radius: var(--ac-r-pill); color: var(--ac-text-soft); font-size: var(--ac-fs-xs); transition: background-color var(--ac-dur-1), border-color var(--ac-dur-1); }
.ac-fm-fchip:hover { background: var(--ac-hover); }
.ac-fm-fchip[aria-pressed="true"] { border-style: solid; border-color: var(--ac-ink); background: var(--ac-ink); color: var(--ac-ink-contrast); }

/* ---- body: sidebar · main · pane ------------------------------------------- */
.ac-fm__body { flex: 1; min-block-size: 0; display: grid; grid-template-columns: 14.5rem minmax(0, 1fr) 0; transition: grid-template-columns var(--ac-dur-4) var(--ac-ease-out); }
.ac-fm[data-sidebar="false"] .ac-fm__body { grid-template-columns: 0 minmax(0, 1fr) 0; }
.ac-fm[data-info="true"] .ac-fm__body { grid-template-columns: 14.5rem minmax(0, 1fr) 19.5rem; }
.ac-fm[data-info="true"][data-sidebar="false"] .ac-fm__body { grid-template-columns: 0 minmax(0, 1fr) 19.5rem; }
.ac-fm[data-pane="preview"][data-view="columns"] .ac-fm__body { grid-template-columns: 14.5rem minmax(0, 1fr) 0; }
.ac-fm[data-pane="preview"][data-view="columns"][data-sidebar="false"] .ac-fm__body { grid-template-columns: 0 minmax(0, 1fr) 0; }
@container (max-width: 1099px) { .ac-fm .ac-fm__body, .ac-fm[data-info="true"] .ac-fm__body { grid-template-columns: 13rem minmax(0, 1fr) 0; } .ac-fm[data-sidebar="false"] .ac-fm__body { grid-template-columns: 0 minmax(0, 1fr) 0; } }
@container (max-width: 700px) { .ac-fm .ac-fm__body, .ac-fm[data-info="true"] .ac-fm__body { grid-template-columns: 0 minmax(0, 1fr) 0; } }
.ac-fm__side { min-inline-size: 0; overflow: hidden auto; padding: var(--ac-s-3) var(--ac-s-2); background: var(--fm-side); border-inline-end: 1px solid var(--ac-border); scrollbar-width: thin; }
.ac-fm[data-sidebar="false"] .ac-fm__side { visibility: hidden; padding: 0; border: 0; }
.ac-fm__sec + .ac-fm__sec { margin-block-start: var(--ac-s-4); }
.ac-fm__sec-h { margin: 0 0 var(--ac-s-1); padding-inline: 0.6rem; color: var(--ac-faint); font-size: var(--ac-fs-2xs, 0.6875rem); font-weight: var(--ac-fw-semibold); letter-spacing: 0.02em; }
.ac-fm__nav { display: flex; align-items: center; gap: 0.6rem; inline-size: 100%; min-block-size: 2.125rem; padding: 0.3rem 0.6rem; border-radius: var(--ac-r-md); color: var(--ac-text-soft); font-size: var(--ac-fs-sm); text-align: start; transition: background-color var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm__nav > .ac-icon { inline-size: 1.05rem; block-size: 1.05rem; color: var(--ac-muted); flex: none; }
.ac-fm__nav:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-fm__nav:active { transform: scale(0.98); }
.ac-fm__nav[aria-current="page"] { background: var(--ac-active); color: var(--ac-text); font-weight: var(--ac-fw-medium); }
.ac-fm__nav[aria-current="page"] > .ac-icon { color: var(--ac-accent); }
.ac-fm__nav[data-over] { background: var(--ac-accent); color: var(--ac-accent-contrast); }
.ac-fm__nav[data-over] > .ac-icon { color: inherit; }
.ac-fm__nav-t { flex: 1; min-inline-size: 0; display: grid; gap: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-fm__nav-t small { color: var(--ac-faint); font-size: 0.6875rem; }
.ac-fm__nav-art { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.ac-fm__nav-n { color: var(--ac-faint); font-size: var(--ac-fs-xs); font-variant-numeric: tabular-nums; }
.ac-fm__nav-chev { display: none; color: var(--ac-faint); }
.ac-fm__nav--loc { align-items: flex-start; } .ac-fm__nav--loc > .ac-icon { margin-block-start: 1px; }
.ac-fm__usage { display: block; block-size: 4px; border-radius: 4px; background: var(--ac-surface-3); overflow: hidden; }
.ac-fm__usage i { display: block; inline-size: var(--_p); block-size: 100%; border-radius: inherit; background: var(--ac-ink); }
.ac-fm__tagdot { inline-size: 0.7rem; block-size: 0.7rem; margin-inline: 0.18rem; border-radius: 50%; background: var(--_t); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--_t) 30%, transparent); flex: none; }
.ac-fm__sec--end { padding-block-start: var(--ac-s-3); border-block-start: 1px solid var(--ac-border); }

.ac-fm__main { position: relative; min-inline-size: 0; min-block-size: 0; display: flex; flex-direction: column; }
.ac-fm__view { position: relative; flex: 1; min-block-size: 0; overflow: auto; outline: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; scrollbar-width: thin; }
.ac-fm__view[aria-busy="true"]::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: linear-gradient(90deg, transparent, var(--ac-accent), transparent); background-size: 50% 100%; animation: ac-fm-load 0.9s linear infinite; }
@keyframes ac-fm-load { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.ac-fm__status { display: flex; align-items: center; gap: var(--ac-s-3); min-block-size: 2rem; padding: 0.25rem var(--ac-s-4); border-block-start: 1px solid var(--ac-border); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-fm__status-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-fm__dot { margin-inline: 0.15rem; }
.ac-fm__grow { flex: 1; }
.ac-fm__zoom { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ac-faint); }
.ac-fm__zoom .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; } .ac-fm__zoom .ac-icon:last-child { inline-size: 1.05rem; block-size: 1.05rem; }
.ac-fm__zoom .ac-range { inline-size: 6.5rem; }
.ac-fm__info { min-inline-size: 0; overflow: hidden auto; border-inline-start: 1px solid var(--ac-border); background: var(--ac-surface-1); scrollbar-width: thin; }
.ac-fm[data-info="false"] .ac-fm__info { visibility: hidden; border: 0; }
@container (max-width: 1099px) { .ac-fm__info { visibility: hidden; border: 0 !important; } }

/* drop overlay (files from the desktop) */
.ac-fm__drop { position: absolute; inset: var(--ac-s-2); z-index: 5; display: grid; place-items: center; border: 2px dashed var(--ac-accent); border-radius: var(--ac-r-xl); background: color-mix(in oklab, var(--ac-accent-soft) 70%, transparent); color: var(--ac-accent-ink); pointer-events: none; opacity: 0; transition: opacity var(--ac-dur-2); }
.ac-fm[data-filedrop] .ac-fm__drop { opacity: 1; }
.ac-fm[data-filedrop-folder] .ac-fm__drop { opacity: 0.35; }
.ac-fm__drop-card { display: grid; justify-items: center; gap: var(--ac-s-2); padding: var(--ac-s-5) var(--ac-s-6); border-radius: var(--ac-r-xl); background: var(--ac-elevated); box-shadow: var(--ac-shadow-lg); font-size: var(--ac-fs-sm); transform: translateY(calc(6px * var(--ac-travel, 1))); transition: transform var(--ac-dur-3) var(--ac-ease-spring); }
.ac-fm[data-filedrop] .ac-fm__drop-card { transform: none; }
.ac-fm__drop-card .ac-icon { inline-size: 2rem; block-size: 2rem; color: var(--ac-accent); }

/* group heads */
.ac-fm__group + .ac-fm__group { margin-block-start: var(--ac-s-2); }
.ac-fm__gh { position: sticky; inset-block-start: 0; z-index: 2; display: flex; align-items: center; gap: var(--ac-s-2); margin: 0; padding: 0.55rem var(--ac-s-5) 0.35rem; background: color-mix(in oklab, var(--ac-surface-1) 88%, transparent); backdrop-filter: blur(8px); color: var(--ac-text); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-fm__gh bdi { color: var(--ac-faint); font-weight: 400; font-size: var(--ac-fs-xs); }

/* ---- icons view --------------------------------------------------------- */
.ac-fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--fm-icon) + 3rem), 1fr)); gap: var(--ac-s-2) var(--ac-s-1); padding: var(--ac-s-3) var(--ac-s-4) var(--ac-s-6); }
.ac-fm-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: var(--ac-s-2) var(--ac-s-1); border-radius: var(--ac-r-lg); outline: none; cursor: default; }
.ac-fm-tile > .ac-fm__art { --_fs: var(--fm-icon); inline-size: calc(var(--fm-icon) + 14px); block-size: calc(var(--fm-icon) + 8px); padding: 5px; border-radius: var(--ac-r-md); transition: background-color var(--ac-dur-1), transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm-tile > .ac-fm__art > .fmi, .ac-fm-tile > .ac-fm__art > .ac-fm-live { inline-size: var(--fm-icon); block-size: var(--fm-icon); }
.ac-fm-tile:hover > .ac-fm__art { background: var(--ac-hover); }
.ac-fm-tile__label { display: flex; justify-content: center; inline-size: 100%; min-block-size: 2.5em; }
.ac-fm-tile .ac-fm__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-inline-size: 100%; block-size: fit-content; padding: 0.05rem 0.45rem; border-radius: 0.4rem; overflow: hidden; font-size: var(--ac-fs-sm); line-height: 1.35; text-align: center; overflow-wrap: anywhere; transition: background-color var(--ac-dur-1), color var(--ac-dur-1); }
.ac-fm-tile__sub { display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-block-size: 1rem; color: var(--ac-faint); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.ac-fm-tile[aria-selected="true"] > .ac-fm__art { background: var(--ac-active); }
.ac-fm-tile[aria-selected="true"] .ac-fm__name { background: var(--ac-active); }
.ac-fm__view:focus-within .ac-fm-tile[aria-selected="true"] .ac-fm__name { background: var(--fm-sel); color: var(--fm-sel-ink); }
.ac-fm-tile[data-cursor]:focus-visible > .ac-fm__art { box-shadow: 0 0 0 2px var(--ac-accent); }
.ac-fm-alert { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--ac-warning); color: #fff; box-shadow: 0 0 0 2px var(--ac-surface-1); }
.ac-fm-alert[data-tone="danger"] { background: var(--ac-danger); }
.ac-fm-alert .ac-icon { inline-size: 0.7rem; block-size: 0.7rem; }
.ac-fm-alert--inline { position: static; display: inline-grid; margin-inline-start: 0.35rem; box-shadow: none; vertical-align: middle; }
.ac-fm-seal { position: absolute; inset-block-end: 2px; inset-inline-end: 2px; display: grid; place-items: center; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; background: var(--ac-info, #2563eb); color: #fff; box-shadow: 0 0 0 2px var(--ac-surface-1); }
.ac-fm-seal .ac-icon { inline-size: 0.75rem; block-size: 0.75rem; }
.ac-fm-dots { display: inline-flex; align-items: center; }
.ac-fm-dots i { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--_t); box-shadow: 0 0 0 1.5px var(--ac-surface-1); }
.ac-fm-dots i + i { margin-inline-start: -0.2rem; }
.ac-fm-star { display: inline-grid; color: #f5a524; } .ac-fm-star .ac-icon, .ac-icon.ac-fm-star { inline-size: 0.7rem; block-size: 0.7rem; fill: currentColor; color: #f5a524; }
.ac-fm-mini { display: inline-grid; color: var(--ac-faint); } .ac-fm-mini .ac-icon { inline-size: 0.75rem; block-size: 0.75rem; }

/* states shared by all views */
[data-id][data-cut] .ac-fm__art { opacity: 0.45; }
[data-id][data-dragging] { opacity: 0.4; }
[data-id][data-over] > .ac-fm__art, .ac-fm-row[data-over], .ac-fm-crow[data-over] { background: var(--ac-accent-soft) !important; box-shadow: inset 0 0 0 2px var(--ac-accent); }
[data-id][data-spring] > .ac-fm__art { animation: ac-fm-blink 0.36s steps(2, start) 2; }
@keyframes ac-fm-blink { to { opacity: 0.35; } }
[data-id][data-pressed] { transform: scale(0.97); transition: transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm[data-dragging] .ac-fm__view, .ac-fm[data-dragging] { cursor: grabbing; }
.ac-fm[data-resizing] { cursor: col-resize; }
.ac-fm-rename { position: relative; z-index: 3; inline-size: 100%; max-inline-size: 16rem; padding: 0.15rem 0.4rem; border: 1px solid var(--ac-accent); border-radius: 0.4rem; background: var(--ac-surface-1); color: var(--ac-text); font: inherit; font-size: max(16px, var(--ac-fs-sm)); line-height: 1.35; text-align: center; resize: none; outline: 3px solid var(--ac-accent-soft); user-select: text; -webkit-user-select: text; }
.ac-fm-row .ac-fm-rename, .ac-fm-crow .ac-fm-rename, .ac-fm-prow .ac-fm-rename { text-align: start; max-inline-size: none; flex: 1; }
.ac-fm-band { position: absolute; z-index: 4; border: 1px solid color-mix(in oklab, var(--ac-accent) 70%, transparent); border-radius: 3px; background: color-mix(in oklab, var(--ac-accent) 12%, transparent); pointer-events: none; }

/* chips */
.ac-fm-chip { display: inline-flex; align-items: center; gap: 0.25rem; block-size: 1.25rem; padding-inline: 0.45rem; border-radius: var(--ac-r-pill); background: var(--ac-neutral-soft); color: var(--ac-neutral-ink); font-size: 0.6875rem; font-weight: var(--ac-fw-medium); white-space: nowrap; vertical-align: middle; }
.ac-fm-chip .ac-icon { inline-size: 0.7rem; block-size: 0.7rem; }
.ac-fm-chip[data-tone="success"] { background: var(--ac-success-soft); color: var(--ac-success-ink); }
.ac-fm-chip[data-tone="warning"] { background: var(--ac-warning-soft); color: var(--ac-warning-ink); }
.ac-fm-chip[data-tone="danger"] { background: var(--ac-danger-soft); color: var(--ac-danger-ink); }
.ac-fm-chip[data-tone="info"] { background: var(--ac-info-soft); color: var(--ac-info-ink); }
.ac-fm-chip--ocr { margin-inline-start: 0.35rem; font-size: 0.625rem; letter-spacing: 0.03em; }
.ac-fm-chip--ocr[data-ocr="done"] { background: var(--ac-success-soft); color: var(--ac-success-ink); }
.ac-fm-chip--ocr[data-ocr="pending"] { background: var(--ac-warning-soft); color: var(--ac-warning-ink); }
.ac-fm-spin { display: inline-block; inline-size: 0.7rem; block-size: 0.7rem; border: 1.5px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ac-spin 0.8s linear infinite; vertical-align: middle; }

/* ---- list view ------------------------------------------------------------- */
.ac-fm-table { min-inline-size: var(--fm-minw); font-size: var(--ac-fs-sm); }
.ac-fm-thead, .ac-fm-row { display: grid; grid-template-columns: var(--fm-cols); align-items: center; }
.ac-fm-thead { position: sticky; inset-block-start: 0; z-index: 3; block-size: 2rem; border-block-end: 1px solid var(--ac-border); background: color-mix(in oklab, var(--ac-surface-1) 92%, transparent); backdrop-filter: blur(8px); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-fm-th { position: relative; display: flex; align-items: center; min-inline-size: 0; block-size: 100%; }
.ac-fm-th + .ac-fm-th::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0.5rem; inline-size: 1px; background: var(--ac-border); }
.ac-fm-th__b { display: flex; align-items: center; gap: 0.25rem; inline-size: 100%; block-size: 100%; padding-inline: 0.75rem; font-weight: var(--ac-fw-medium); text-align: start; white-space: nowrap; overflow: hidden; }
button.ac-fm-th__b:hover { color: var(--ac-text); background: var(--ac-hover); }
.ac-fm-th[aria-sort="ascending"] .ac-fm-th__b, .ac-fm-th[aria-sort="descending"] .ac-fm-th__b { color: var(--ac-text); }
.ac-fm-th__grip { position: absolute; inset-inline-end: -4px; inset-block: 0; z-index: 1; inline-size: 8px; cursor: col-resize; }
.ac-fm-th__grip:hover { background: linear-gradient(90deg, transparent 3px, var(--ac-accent) 3px 5px, transparent 5px); }
.ac-fm-tbody { padding: 0.25rem var(--ac-s-2) var(--ac-s-6); }
.ac-fm-row { min-block-size: 2.125rem; border-radius: var(--ac-r-sm); outline: none; cursor: default; }
.ac-fm-tbody > .ac-fm-row:nth-child(even of :not(.ac-fm-row--group)) { background: color-mix(in oklab, var(--ac-surface-2) 55%, transparent); }
.ac-fm-row:hover { background: var(--ac-hover) !important; }
.ac-fm-row[aria-selected="true"] { background: var(--ac-active) !important; }
.ac-fm__view:focus-within .ac-fm-row[aria-selected="true"] { background: var(--fm-sel) !important; color: var(--fm-sel-ink); }
.ac-fm__view:focus-within .ac-fm-row[aria-selected="true"] .ac-fm-cell--muted, .ac-fm__view:focus-within .ac-fm-row[aria-selected="true"] .ac-fm-cell { color: inherit; }
.ac-fm-row--group { min-block-size: 2.25rem; margin-block-start: var(--ac-s-2); background: none !important; font-weight: var(--ac-fw-semibold); }
.ac-fm-row--group bdi { color: var(--ac-faint); font-weight: 400; }
.ac-fm-row--loading { color: var(--ac-muted); }
.ac-fm-cell { display: flex; align-items: center; gap: 0.35rem; min-inline-size: 0; padding-inline: 0.75rem; overflow: hidden; white-space: nowrap; color: var(--ac-text-soft); font-variant-numeric: tabular-nums; }
.ac-fm-cell--name { gap: 0.4rem; padding-inline-start: calc(0.25rem + var(--lvl, 0) * 1.2rem); color: var(--ac-text); }
.ac-fm-cell--name .ac-fm__name { overflow: hidden; text-overflow: ellipsis; }
.ac-fm-cell--name > .ac-fm__art { inline-size: 1.4rem; block-size: 1.4rem; --_fs: 22px; }
.ac-fm-cell--name > .ac-fm__art .ac-fm-thumb { border-radius: 2px; }
.ac-fm-cell--name > .ac-fm__art .ac-fm-thumb__play, .ac-fm-cell--name > .ac-fm__art .ac-fm-thumb__dur { display: none; }
.ac-fm-cell--muted { color: var(--ac-muted); }
.ac-fm-cell__t { overflow: hidden; text-overflow: ellipsis; color: var(--ac-muted); }
.ac-fm-disc { display: inline-grid; place-items: center; inline-size: 1rem; block-size: 1rem; flex: none; border-radius: 3px; color: var(--ac-muted); }
.ac-fm-disc .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; transition: transform var(--ac-dur-2) var(--ac-ease-out); }
button.ac-fm-disc:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-fm-row[aria-expanded="true"] .ac-fm-disc .ac-icon { transform: rotate(90deg); }
[dir="rtl"] .ac-fm-row[aria-expanded="true"] .ac-fm-disc .ac-icon { transform: scaleX(-1) rotate(90deg); }

/* ---- column view -------------------------------------------------------- */
.ac-fm-cols { display: flex; block-size: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.ac-fm[data-view="columns"] .ac-fm__view { overflow: hidden; }
.ac-fm-col { flex: none; inline-size: 15rem; block-size: 100%; overflow-y: auto; padding: 0.35rem; border-inline-end: 1px solid var(--ac-border); scrollbar-width: thin; animation: ac-fm-col-in var(--ac-dur-3) var(--ac-ease-out); }
@keyframes ac-fm-col-in { from { opacity: 0; transform: translateX(calc(-8px * var(--ac-travel, 1))); } }
[dir="rtl"] .ac-fm-col { animation-name: ac-fm-col-in-rtl; }
@keyframes ac-fm-col-in-rtl { from { opacity: 0; transform: translateX(calc(8px * var(--ac-travel, 1))); } }
.ac-fm-col__empty { padding: var(--ac-s-6) var(--ac-s-3); color: var(--ac-faint); font-size: var(--ac-fs-xs); text-align: center; }
.ac-fm-crow { display: flex; align-items: center; gap: 0.5rem; min-block-size: 2rem; padding: 0.15rem 0.5rem; border-radius: var(--ac-r-sm); font-size: var(--ac-fs-sm); outline: none; cursor: default; }
.ac-fm-crow > .ac-fm__art { inline-size: 1.4rem; block-size: 1.4rem; --_fs: 22px; }
.ac-fm-crow > .ac-fm__art .ac-fm-thumb__play, .ac-fm-crow > .ac-fm__art .ac-fm-thumb__dur { display: none; }
.ac-fm-crow .ac-fm__name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-fm-crow__chev { inline-size: 0.8rem; block-size: 0.8rem; color: var(--ac-faint); }
.ac-fm-crow:hover { background: var(--ac-hover); }
.ac-fm-crow[data-path] { background: var(--ac-active); }
.ac-fm-crow[aria-selected="true"] { background: var(--ac-active); }
.ac-fm-col[data-active] .ac-fm-crow[aria-selected="true"], .ac-fm-col:last-of-type .ac-fm-crow[aria-selected="true"] { background: var(--fm-sel); color: var(--fm-sel-ink); }
.ac-fm-col[data-active] .ac-fm-crow[aria-selected="true"] .ac-fm-crow__chev { color: inherit; }
.ac-fm-col--prev { inline-size: auto; min-inline-size: 20rem; flex: 1 0 20rem; max-inline-size: 32rem; padding: var(--ac-s-4); }

/* preview card (columns, pane) */
.ac-fm-pcard { display: flex; flex-direction: column; align-items: center; gap: var(--ac-s-2); text-align: center; }
.ac-fm-pcard__art { inline-size: 100%; display: grid; place-items: center; }
.ac-fm-pcard__name { max-inline-size: 100%; font-weight: var(--ac-fw-semibold); overflow-wrap: anywhere; }
.ac-fm-pcard__sub { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-fm-pcard__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.ac-fm-pcard__chips .ac-fm-chip--ocr { margin: 0; }
.ac-fm-pcard__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ac-s-1); margin-block-start: var(--ac-s-1); }
.ac-fm-pcard .ac-fm-dl { inline-size: 100%; text-align: start; }
.ac-fm-dl { display: grid; gap: 0; margin: 0; font-size: var(--ac-fs-xs); }
.ac-fm-dl > div { display: grid; grid-template-columns: minmax(5.5rem, 38%) 1fr; gap: var(--ac-s-2); padding-block: 0.4rem; border-block-end: 1px solid var(--ac-border); }
.ac-fm-dl > div:last-child { border: 0; }
.ac-fm-dl dt { color: var(--ac-muted); }
.ac-fm-dl dd { margin: 0; color: var(--ac-text); overflow-wrap: anywhere; display: grid; gap: 2px; }
.ac-fm-dl dd small { color: var(--ac-faint); }

/* large live previews (pane, column preview, gallery, Quick Look) */
.ac-fm-fullslot { display: grid; place-items: center; inline-size: 100%; min-block-size: 9rem; max-block-size: 17rem; --_fs: 150px; }
.ac-fm-fullslot > .ac-fm-live, .ac-fm-fullslot > .fmi { inline-size: 9rem; block-size: 9rem; }
.ac-fm-fullslot .ac-fm-thumb, .ac-fm-fullslot .ac-fm-page { max-block-size: 16rem; }
.ac-fm-full { inline-size: 100%; display: grid; place-items: center; }
.ac-fm-fullslot > .ac-fm-full { max-block-size: 17rem; block-size: 17rem; }
.ac-fm-full--image img { display: block; max-inline-size: 100%; max-block-size: 100%; border-radius: var(--ac-r-sm); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12); object-fit: contain; }
.ac-fm-fullslot .ac-fm-full--image img { max-block-size: 16.5rem; }
.ac-fm-full--video video { display: block; inline-size: 100%; max-block-size: 100%; border-radius: var(--ac-r-md); background: #000; }
.ac-fm-full--audio { gap: var(--ac-s-3); --_fs: 140px; }
.ac-fm-full--audio .ac-fm-page--audio { inline-size: 9rem; }
.ac-fm-full--audio audio { inline-size: 100%; max-inline-size: 24rem; }
.ac-fm-full--pdf { block-size: 100%; }
.ac-fm-full--pdf object { inline-size: 100%; block-size: 100%; min-block-size: 16rem; border: 0; border-radius: var(--ac-r-sm); background: var(--ac-surface-2); }
.ac-fm-full__fb { display: grid; justify-items: center; gap: var(--ac-s-2); max-block-size: 100%; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-fm-full__fb > .fmi { inline-size: 8rem; block-size: 8rem; }
.ac-fm-full__page { max-inline-size: 100%; max-block-size: 13rem; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.14); }
.ac-fm-full--thumb .ac-fm-thumb { max-block-size: 16rem; } .ac-fm-full--thumb .ac-fm-thumb img { max-block-size: 16rem; }
.ac-fm-full--thumb .ac-fm-page { inline-size: 11rem; --_fs: 150px; }
.ac-fm-full--text, .ac-fm-full--csv, .ac-fm-full--md { place-items: start stretch; inline-size: 100%; block-size: 100%; max-block-size: 17rem; margin: 0; padding: var(--ac-s-3); overflow: auto; border-radius: var(--ac-r-md); background: var(--ac-surface-2); text-align: start; font-size: var(--ac-fs-xs); user-select: text; -webkit-user-select: text; }
.ac-fm-full--text { display: block; white-space: pre-wrap; font-family: inherit; line-height: 1.7; }
.ac-fm-full--text.is-code { font-family: var(--ac-font-mono); white-space: pre; text-align: left; }
.ac-fm-full--csv { display: block; padding: 0; }
.ac-fm-csv { border-collapse: collapse; inline-size: max-content; min-inline-size: 100%; font-size: var(--ac-fs-xs); font-variant-numeric: tabular-nums; }
.ac-fm-csv th { position: sticky; inset-block-start: 0; background: var(--ac-surface-3); font-weight: var(--ac-fw-semibold); }
.ac-fm-csv th, .ac-fm-csv td { padding: 0.35rem 0.65rem; border-block-end: 1px solid var(--ac-border); text-align: start; white-space: nowrap; }
.ac-fm-csv td.is-num { direction: ltr; text-align: end; }
.ac-fm-csv tbody tr:hover { background: var(--ac-hover); }
.ac-fm-md { display: block; line-height: 1.8; }
.ac-fm-md :is(h1, h2, h3, h4) { margin: 0.6em 0 0.3em; line-height: 1.3; } .ac-fm-md h1 { font-size: 1.35em; } .ac-fm-md h2 { font-size: 1.15em; }
.ac-fm-md p, .ac-fm-md ul, .ac-fm-md ol, .ac-fm-md blockquote, .ac-fm-md pre { margin: 0 0 0.6em; }
.ac-fm-md ul, .ac-fm-md ol { padding-inline-start: 1.3em; }
.ac-fm-md blockquote { padding-inline-start: 0.8em; border-inline-start: 3px solid var(--ac-accent); color: var(--ac-text-soft); }
.ac-fm-md code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--ac-surface-3); font-family: var(--ac-font-mono); font-size: 0.9em; }
.ac-fm-md pre { padding: 0.7em; border-radius: var(--ac-r-sm); background: var(--ac-surface-3); direction: ltr; text-align: left; overflow: auto; } .ac-fm-md pre code { background: none; padding: 0; }
.ac-fm-md hr { border: 0; border-block-start: 1px solid var(--ac-border); }
.ac-fm-md a { color: var(--ac-accent-ink); }

/* ---- gallery view --------------------------------------------------------- */
.ac-fm-gal { display: grid; grid-template-rows: minmax(0, 1fr) auto; block-size: 100%; }
.ac-fm[data-view="gallery"] .ac-fm__view { overflow: hidden; }
.ac-fm-gal__stage { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; min-block-size: 0; }
.ac-fm-gal__hero { display: grid; place-items: center; min-block-size: 0; padding: var(--ac-s-5); background: radial-gradient(ellipse at center, var(--ac-surface-2), var(--ac-surface-1) 70%); }
.ac-fm-gal__big { display: grid; place-items: center; inline-size: 100%; block-size: 100%; min-block-size: 0; --_fs: 220px; }
.ac-fm-gal__big > .fmi { inline-size: 12rem; block-size: 12rem; }
.ac-fm-gal__big > .ac-fm-fullslot { block-size: 100%; max-block-size: none; }
.ac-fm-gal__big > .ac-fm-fullslot > .ac-fm-full { block-size: 100%; max-block-size: none; }
.ac-fm-gal__big .ac-fm-full--image img, .ac-fm-gal__big .ac-fm-full--video video { max-block-size: 100%; }
.ac-fm-gal__big .ac-fm-full--text, .ac-fm-gal__big .ac-fm-full--csv, .ac-fm-gal__big .ac-fm-full--md { max-block-size: 100%; max-inline-size: 46rem; background: var(--ac-surface-1); box-shadow: 0 0 0 1px var(--ac-border); }
.ac-fm-gal__big .ac-fm-fullslot > .ac-fm-live { inline-size: 12rem; block-size: 12rem; }
.ac-fm-gal__big .ac-fm-thumb, .ac-fm-gal__big .ac-fm-thumb img { max-block-size: 100%; }
.ac-fm-gal__big .ac-fm-full__page { max-block-size: 100%; }
.ac-fm-gal__big .ac-fm-full--pdf object { min-block-size: 100%; }
.ac-fm-gal__meta { display: flex; flex-direction: column; gap: var(--ac-s-2); padding: var(--ac-s-4); border-inline-start: 1px solid var(--ac-border); overflow: auto; }
.ac-fm-gal__name { font-weight: var(--ac-fw-semibold); overflow-wrap: anywhere; }
.ac-fm-gal__sub { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-fm-gal__meta .ac-fm-pcard__chips, .ac-fm-gal__meta .ac-fm-pcard__acts { justify-content: flex-start; }
.ac-fm-gal__strip { display: flex; gap: 0.35rem; padding: var(--ac-s-2) var(--ac-s-3); overflow-x: auto; border-block-start: 1px solid var(--ac-border); background: var(--ac-surface-1); scrollbar-width: thin; }
.ac-fm-film { flex: none; display: grid; place-items: center; inline-size: 4.25rem; block-size: 4.25rem; padding: 0.3rem; border-radius: var(--ac-r-md); outline: none; transition: background-color var(--ac-dur-1), transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm-film > .ac-fm__art { inline-size: 100%; block-size: 100%; --_fs: 56px; }
.ac-fm-film .ac-fm-thumb__play { display: none; }
.ac-fm-film:hover { background: var(--ac-hover); }
.ac-fm-film[aria-selected="true"] { background: var(--ac-active); box-shadow: inset 0 0 0 2px var(--ac-ink); }
@container (max-width: 760px) { .ac-fm-gal__stage { grid-template-columns: 1fr; } .ac-fm-gal__meta { display: none; } }

/* ---- empty states --------------------------------------------------------- */
.ac-fm-empty { display: grid; justify-items: center; align-content: center; gap: var(--ac-s-2); min-block-size: 100%; padding: var(--ac-s-10) var(--ac-s-4); color: var(--ac-muted); text-align: center; }
.ac-fm-empty__art { inline-size: 5.5rem; block-size: 5.5rem; opacity: 0.85; display: grid; place-items: center; }
.ac-fm-empty__art > .ac-icon { inline-size: 2.5rem; block-size: 2.5rem; color: var(--ac-faint); }
.ac-fm-empty h3 { margin: 0; color: var(--ac-text); font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); }
.ac-fm-empty p { margin: 0; font-size: var(--ac-fs-sm); }
.ac-fm-empty--sm { min-block-size: 14rem; } .ac-fm-empty--sm > .ac-icon { inline-size: 1.75rem; block-size: 1.75rem; color: var(--ac-faint); }

/* ---- inspector / preview pane --------------------------------------------- */
.ac-fm-ins, .ac-fm-pane { display: grid; gap: var(--ac-s-2); padding: var(--ac-s-4); }
.ac-fm-pane { padding-block-start: var(--ac-s-5); }
.ac-fm-ins__hero { display: grid; place-items: center; block-size: 8.5rem; --_fs: 120px; }
.ac-fm-ins__hero > .ac-fm__art { inline-size: 7.5rem; block-size: 7.5rem; }
.ac-fm-ins__hero > .ac-fm__art > * { inline-size: 100%; block-size: 100%; }
.ac-fm-ins__hero > .ac-fm__art .ac-fm-thumb { inline-size: auto; block-size: auto; }
.ac-fm-ins__hero--multi { display: flex; justify-content: center; }
.ac-fm-ins__hero--multi > .ac-fm__art { inline-size: 5rem; block-size: 5rem; margin-inline: -1.2rem; }
.ac-fm-ins__hero--multi > .ac-fm__art:nth-child(1) { transform: rotate(-8deg); } .ac-fm-ins__hero--multi > .ac-fm__art:nth-child(3) { transform: rotate(8deg); }
.ac-fm-ins__name { margin: 0; font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); text-align: center; overflow-wrap: anywhere; }
.ac-fm-ins__sub { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-xs); text-align: center; }
.ac-fm-ins__acts { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ac-s-1); margin-block: var(--ac-s-1) var(--ac-s-2); }
.ac-fm-ins__acts [aria-pressed="true"] .ac-icon { fill: #f5a524; color: #f5a524; }
.ac-fm-ins__sec { border-block-start: 1px solid var(--ac-border); }
.ac-fm-ins__sec > summary { display: flex; align-items: center; justify-content: space-between; padding-block: 0.65rem; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); cursor: pointer; list-style: none; }
.ac-fm-ins__sec > summary::-webkit-details-marker { display: none; }
.ac-fm-ins__sec > summary .ac-icon { color: var(--ac-faint); transition: transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm-ins__sec[open] > summary .ac-icon { transform: rotate(180deg); }
.ac-fm-ins__body { display: grid; gap: var(--ac-s-2); padding-block-end: var(--ac-s-3); }
.ac-fm-ins__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; } .ac-fm-ins__chips .ac-fm-chip--ocr { margin: 0; }
.ac-fm-ins__muted { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-fm-ins__greg { color: var(--ac-faint); font-size: 0.6875rem; margin-block-start: -0.25rem; }
.ac-fm-ins__add { justify-self: start; }
.ac-fm-field { display: grid; gap: 0.3rem; font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-fm-field > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); }
.ac-fm-field .ac-input, .ac-fm-field .ac-select { min-block-size: 2.25rem; font-size: var(--ac-fs-sm); }
.ac-fm-field2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ac-s-2); }
.ac-fm-check2 { display: flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-xs); color: var(--ac-text-soft); cursor: pointer; }
.ac-fm-ocr { display: flex; align-items: center; gap: var(--ac-s-2); padding: 0.55rem 0.7rem; border-radius: var(--ac-r-md); background: var(--ac-surface-2); font-size: var(--ac-fs-xs); }
.ac-fm-ocr > span { flex: 1; } .ac-fm-ocr[data-ocr="done"] > .ac-icon { color: var(--ac-success); } .ac-fm-ocr[data-ocr="pending"] > .ac-icon { color: var(--ac-warning); animation: ac-pulse 1.2s ease-in-out infinite; }
.ac-fm-comment { min-block-size: 4.5rem; font-size: var(--ac-fs-sm); resize: vertical; }
.ac-fm-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ac-fm-tagbtn { display: inline-flex; align-items: center; gap: 0.35rem; block-size: 1.75rem; padding-inline: 0.55rem 0.7rem; border: 1px solid var(--ac-border); border-radius: var(--ac-r-pill); font-size: var(--ac-fs-xs); color: var(--ac-text-soft); transition: background-color var(--ac-dur-1), border-color var(--ac-dur-1); }
.ac-fm-tagbtn i { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--_t); }
.ac-fm-tagbtn:hover { background: var(--ac-hover); }
.ac-fm-tagbtn[aria-pressed="true"] { border-color: var(--_t); background: color-mix(in oklab, var(--_t) 14%, transparent); color: var(--ac-text); }
.ac-fm-person { display: flex; align-items: center; gap: var(--ac-s-2); }
.ac-fm-person__n { flex: 1; min-inline-size: 0; display: grid; font-size: var(--ac-fs-sm); }
.ac-fm-person__n small { color: var(--ac-faint); font-size: 0.6875rem; overflow: hidden; text-overflow: ellipsis; }
.ac-fm-person__r { inline-size: auto; min-block-size: 1.875rem; padding-block: 0; font-size: var(--ac-fs-xs); }
.ac-fm-vers, .ac-fm-act { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ac-fm-vers li { position: relative; display: flex; align-items: center; gap: var(--ac-s-2); padding-block: 0.45rem; }
.ac-fm-vers li + li::before { content: ""; position: absolute; inset-inline-start: 0.3rem; inset-block-start: -0.55rem; block-size: 1.1rem; inline-size: 1px; background: var(--ac-border-strong); }
.ac-fm-vers__dot { inline-size: 0.65rem; block-size: 0.65rem; border-radius: 50%; border: 2px solid var(--ac-border-strong); flex: none; background: var(--ac-surface-1); }
.ac-fm-vers li:first-child .ac-fm-vers__dot { border-color: var(--ac-success); background: var(--ac-success); }
.ac-fm-vers__m { flex: 1; display: grid; font-size: var(--ac-fs-xs); } .ac-fm-vers__m small { color: var(--ac-faint); }
.ac-fm-act li { display: flex; gap: var(--ac-s-2); padding-block: 0.4rem; font-size: var(--ac-fs-xs); }
.ac-fm-act li > span:last-child { display: grid; } .ac-fm-act small { color: var(--ac-faint); }
.ac-fm-inspector--sheet .ac-fm-ins { padding-block-start: 0; }

/* ---- share & conflict dialogs --------------------------------------------- */
.ac-fm-share { display: grid; gap: var(--ac-s-3); }
.ac-fm-share__file { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2) var(--ac-s-3); border-radius: var(--ac-r-lg); background: var(--ac-surface-2); }
.ac-fm-share__file > .ac-fm__art { inline-size: 2.5rem; block-size: 2.5rem; --_fs: 40px; }
.ac-fm-share__file > span:last-child { display: grid; min-inline-size: 0; } .ac-fm-share__file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-fm-share__file small { color: var(--ac-muted); }
.ac-fm-share__link { display: flex; gap: var(--ac-s-2); } .ac-fm-share__link .ac-input { flex: 1; font-size: max(16px, var(--ac-fs-sm)); }
.ac-fm-share__pw .ac-input { inline-size: 100%; font-size: max(16px, var(--ac-fs-sm)); }
.ac-fm-share__people { display: grid; gap: var(--ac-s-2); padding-block-start: var(--ac-s-2); border-block-start: 1px solid var(--ac-border); }
.ac-fm-share__h { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-fm-layer .ac-fm-field .ac-input, .ac-fm-layer .ac-fm-field .ac-select { font-size: max(16px, var(--ac-fs-sm)); }
.ac-fm-conflict { display: grid; justify-items: center; gap: var(--ac-s-3); text-align: center; }
.ac-fm-conflict__art { inline-size: 4rem; block-size: 4rem; }
.ac-fm-conflict-layer .ac-dialog__foot { flex-wrap: wrap; }

/* ---- uploads panel (portaled) ---------------------------------------------- */
.ac-fm-up { position: fixed; z-index: calc(var(--ac-z-toast, 80) - 1); inset-block-end: calc(var(--ac-s-5) + var(--ac-safe-bottom, 0px)); inset-inline-end: calc(var(--ac-s-5) + var(--ac-safe-end, 0px)); inline-size: min(23rem, calc(100vw - 2rem)); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-elevated); box-shadow: var(--ac-shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.18)); overflow: hidden; color: var(--ac-text); font-size: var(--ac-fs-sm); }
.ac-fm-up[hidden] { display: none; }
.ac-fm-up__head { position: relative; display: flex; align-items: center; gap: var(--ac-s-1); padding: 0.75rem 0.6rem 0.75rem 1rem; padding-inline: 1rem 0.6rem; font-weight: var(--ac-fw-semibold); }
.ac-fm-up__t { flex: 1; }
.ac-fm-up__ib { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; color: var(--ac-muted); transition: background-color var(--ac-dur-1), transform var(--ac-dur-3) var(--ac-ease-out); }
.ac-fm-up__ib:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-fm-up[data-collapsed="true"] [data-up="toggle"] { transform: rotate(180deg); }
.ac-fm-up__bar { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--ac-surface-3); }
.ac-fm-up__bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--_p, 0) * 100%); background: var(--ac-accent); transition: inline-size 0.2s linear; }
.ac-fm-up[data-busy="false"] .ac-fm-up__bar::after { background: var(--ac-success); }
.ac-fm-up__list { display: grid; max-block-size: 18rem; margin: 0; padding: 0.3rem; overflow: auto; list-style: none; transition: max-block-size var(--ac-dur-3) var(--ac-ease-out), padding var(--ac-dur-3); }
.ac-fm-up[data-collapsed="true"] .ac-fm-up__list { max-block-size: 0; padding-block: 0; }
.ac-fm-job { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.55rem; border-radius: var(--ac-r-md); }
.ac-fm-job:hover { background: var(--ac-hover); }
.ac-fm-job__art { inline-size: 2rem; block-size: 2rem; flex: none; }
.ac-fm-job__m { flex: 1; min-inline-size: 0; display: grid; }
.ac-fm-job__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-sm); }
.ac-fm-job__s { color: var(--ac-muted); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.ac-fm-job[data-state="error"] .ac-fm-job__s { color: var(--ac-danger-ink); }
.ac-fm-job[data-state="cancelled"], .ac-fm-job[data-state="skipped"] { opacity: 0.6; }
.ac-fm-job__ring { position: relative; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; flex: none; }
.ac-fm-job__ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
[dir="rtl"] .ac-fm-job__ring > svg { transform: rotate(-90deg) scaleY(-1); }
.ac-fm-job__ring circle { fill: none; stroke: var(--ac-surface-3); stroke-width: 3; }
.ac-fm-job__ring .ac-fm-job__bar { stroke: var(--ac-accent); stroke-linecap: round; transition: stroke-dashoffset 0.15s linear; }
.ac-fm-job[data-state="paused"] .ac-fm-job__bar { stroke: var(--ac-warning); }
.ac-fm-job__ok, .ac-fm-job__err { display: none; position: absolute; inset: 0; place-items: center; border-radius: 50%; color: #fff; }
.ac-fm-job__ok { background: var(--ac-success); } .ac-fm-job__err { background: var(--ac-danger); }
.ac-fm-job__ok .ac-icon, .ac-fm-job__err .ac-icon { inline-size: 0.9rem; block-size: 0.9rem; }
.ac-fm-job[data-state="done"] .ac-fm-job__ok, .ac-fm-job[data-state="error"] .ac-fm-job__err { display: grid; }
.ac-fm-job[data-state="done"] .ac-fm-job__ring > svg, .ac-fm-job[data-state="error"] .ac-fm-job__ring > svg { display: none; }
.ac-fm-job__b { display: flex; gap: 2px; }
.ac-fm-job__b button { display: grid; place-items: center; inline-size: 1.85rem; block-size: 1.85rem; border-radius: 50%; color: var(--ac-muted); transition: background-color var(--ac-dur-1), transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm-job__b button:hover { background: var(--ac-hover); color: var(--ac-text); } .ac-fm-job__b button:active { transform: scale(0.9); }
.ac-fm-job__b .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }

/* ---- drag ghost (portaled) -------------------------------------------------- */
.ac-fm-ghost { position: fixed; inset-block-start: 0; left: 0; z-index: 9999; pointer-events: none; display: grid; justify-items: center; gap: 0.3rem; translate: -50% -50%; will-change: transform; }
.ac-fm-ghost__stack { position: relative; inline-size: 4rem; block-size: 4rem; transform-origin: 50% 60%; }
.ac-fm-ghost__card { position: absolute; inset: 0; display: grid; place-items: center; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22)); transform: translate(calc(var(--i) * 5px), calc(var(--i) * -4px)) rotate(calc(var(--i) * 5deg)); }
.ac-fm-ghost__card > * { max-inline-size: 100%; max-block-size: 100%; }
.ac-fm-ghost__name { max-inline-size: 12rem; padding: 0.1rem 0.5rem; border-radius: 0.4rem; background: var(--ac-ink); color: var(--ac-ink-contrast); font-size: var(--ac-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-fm-ghost__count { position: absolute; inset-block-start: -0.4rem; inset-inline-end: -0.4rem; min-inline-size: 1.4rem; block-size: 1.4rem; padding-inline: 0.35rem; border-radius: var(--ac-r-pill); background: var(--ac-danger); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.4rem; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.ac-fm-ghost__op { position: absolute; inset-block-end: 1rem; inset-inline-end: -0.3rem; display: grid; place-items: center; inline-size: 1.3rem; block-size: 1.3rem; border-radius: 50%; background: var(--ac-success); color: #fff; }
.ac-fm-ghost__op .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; }

/* ---- Quick Look (portaled) -------------------------------------------------- */
.ac-fm-ql { position: fixed; inset: 0; z-index: var(--ac-z-modal, 70); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.ac-fm-ql__scrim { position: absolute; inset: 0; background: color-mix(in oklab, #000 46%, transparent); backdrop-filter: blur(10px) saturate(1.1); }
.ac-fm-ql__panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; inline-size: min(64rem, 100%); block-size: min(46rem, 100%); border: 1px solid var(--ac-glass-border, rgba(255, 255, 255, 0.16)); border-radius: var(--ac-r-2xl); background: var(--ac-elevated); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35); overflow: hidden; color: var(--ac-text); }
.ac-fm-ql__bar { display: flex; align-items: center; gap: var(--ac-s-1); padding: 0.55rem 0.7rem; border-block-end: 1px solid var(--ac-border); }
.ac-fm-ql__title { flex: 1; min-inline-size: 0; display: grid; text-align: center; }
.ac-fm-ql__title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-sm); }
.ac-fm-ql__title small { color: var(--ac-muted); font-size: 0.6875rem; }
.ac-fm-ql__b { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; color: var(--ac-text-soft); transition: background-color var(--ac-dur-1), transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm-ql__b:hover { background: var(--ac-hover); color: var(--ac-text); } .ac-fm-ql__b:active { transform: scale(0.9); }
.ac-fm-ql__zoom { display: none; }
.ac-fm-ql[data-zoomable="true"] .ac-fm-ql__zoom { display: inline-flex; }
.ac-fm-ql__stage { position: relative; min-block-size: 0; overflow: hidden; background: var(--ac-surface-2); touch-action: none; }
.ac-fm-ql__content { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--ac-s-4); }
.ac-fm-ql__content > .ac-fm-full { block-size: 100%; max-block-size: none; }
.ac-fm-ql__content .ac-fm-full--image { overflow: hidden; }
.ac-fm-ql__content .ac-fm-full--image img { max-block-size: 100%; cursor: zoom-in; transform-origin: center; will-change: transform; }
.ac-fm-ql[data-zoomed="true"] .ac-fm-full--image img { cursor: grab; }
.ac-fm-ql__content .ac-fm-full--video video { max-block-size: 100%; inline-size: auto; max-inline-size: 100%; }
.ac-fm-ql__content .ac-fm-full--pdf { place-items: stretch; } .ac-fm-ql__content .ac-fm-full--pdf object { block-size: 100%; }
.ac-fm-ql__content :is(.ac-fm-full--text, .ac-fm-full--csv, .ac-fm-full--md) { max-block-size: 100%; max-inline-size: 52rem; justify-self: center; background: var(--ac-surface-1); box-shadow: 0 0 0 1px var(--ac-border); font-size: var(--ac-fs-sm); }
.ac-fm-ql__content .ac-fm-full--md { padding: var(--ac-s-6) var(--ac-s-8); }
.ac-fm-ql__content .ac-fm-full--audio .ac-fm-page--audio { inline-size: 12rem; }
.ac-fm-ql__content .ac-fm-full--thumb .ac-fm-thumb, .ac-fm-ql__content .ac-fm-full--thumb .ac-fm-thumb img { max-block-size: 34rem; }
.ac-fm-ql__content .ac-fm-full--thumb .ac-fm-page { inline-size: 18rem; --_fs: 240px; }
.ac-fm-ql__loading { inline-size: 7rem; block-size: 7rem; opacity: 0.6; }
.ac-fm-ql__loading > * { inline-size: 100%; block-size: 100%; }
.ac-fm-ql__card { display: grid; justify-items: center; gap: var(--ac-s-2); color: var(--ac-muted); font-size: var(--ac-fs-sm); text-align: center; }
.ac-fm-ql__card b { color: var(--ac-text); font-size: var(--ac-fs-md); }
.ac-fm-ql__cardart { inline-size: 8rem; block-size: 8rem; }
.ac-fm-ql__nav { position: absolute; inset-block-start: 50%; z-index: 2; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; translate: 0 -50%; border-radius: 50%; background: var(--ac-elevated); box-shadow: var(--ac-shadow-md); color: var(--ac-text); opacity: 0; transition: opacity var(--ac-dur-2), transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-fm-ql__panel:hover .ac-fm-ql__nav, .ac-fm-ql__nav:focus-visible { opacity: 1; }
.ac-fm-ql__nav:active { transform: scale(0.92); }
.ac-fm-ql__nav--prev { inset-inline-start: var(--ac-s-3); } .ac-fm-ql__nav--next { inset-inline-end: var(--ac-s-3); }
.ac-fm-ql__count { padding: 0.4rem; border-block-start: 1px solid var(--ac-border); color: var(--ac-muted); font-size: 0.6875rem; text-align: center; font-variant-numeric: tabular-nums; }
.ac-fm-ql__count:empty { display: none; }

/* ---- phone header & browse (hidden on larger screens) ------------------------- */
.ac-fm__phead, .ac-fm-selbar { display: none; }
.ac-fm-browse { padding: var(--ac-s-3); }

/* ======================= phone: native Files-app feel ======================== */
@media (max-width: 639.98px) {
  .ac-fm { --fm-icon: 64px; block-size: auto; min-block-size: 0; border: 0; border-radius: 0; background: none; overflow: visible; container-type: normal; }
  .ac-fm__bar, .ac-fm__side, .ac-fm__info, .ac-fm__status, .ac-fm__filters { display: none !important; }
  .ac-fm__body { display: block; }
  .ac-fm__view { overflow: visible; user-select: none; }
  .ac-fm[data-view="columns"] .ac-fm__view, .ac-fm[data-view="gallery"] .ac-fm__view { overflow: visible; }
  .ac-fm__phead { display: block; position: sticky; inset-block-start: calc(var(--ac-appbar-h) - var(--ac-s-2)); z-index: 4; margin-inline: calc(var(--ac-content-pad) * -1); padding: 0 var(--ac-content-pad) var(--ac-s-2); background: color-mix(in oklab, var(--ac-bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
  .ac-fm__prow { display: flex; align-items: center; gap: var(--ac-s-1); min-block-size: 2.75rem; }
  .ac-fm__pback { display: inline-flex; align-items: center; gap: 0.1rem; min-block-size: 2.75rem; max-inline-size: 60%; margin-inline-start: -0.4rem; padding-inline: 0.2rem 0.5rem; border-radius: var(--ac-r-md); color: var(--ac-accent-ink); font-size: 1rem; }
  .ac-fm__pback .ac-icon { inline-size: 1.5rem; block-size: 1.5rem; flex: none; }
  .ac-fm__pback-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-fm__pback:active, .ac-fm__ptxt:active, .ac-fm__pbtn:active { opacity: 0.5; }
  .ac-fm__ptxt { min-block-size: 2.75rem; padding-inline: 0.6rem; color: var(--ac-accent-ink); font-size: 1rem; }
  .ac-fm__ptxt.is-strong { font-weight: var(--ac-fw-semibold); }
  .ac-fm__pbtn { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; color: var(--ac-accent-ink); }
  .ac-fm__pbtn .ac-icon { inline-size: 1.4rem; block-size: 1.4rem; padding: 0.15rem; border: 1.5px solid currentColor; border-radius: 50%; }
  .ac-fm__ptitle { margin: 0 0 var(--ac-s-2); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 50%; }
  [dir="rtl"] .ac-fm__ptitle { transform-origin: 100% 50%; }
  .ac-fm__psearchwrap { block-size: calc(2.5rem * (1 - var(--fm-sq, 0))); opacity: calc(1 - var(--fm-sq, 0) * 1.6); overflow: hidden; }
  .ac-fm__psearch { display: flex; align-items: center; gap: 0.35rem; block-size: 2.25rem; padding-inline: 0.6rem; border-radius: 0.7rem; background: var(--ac-surface-3); color: var(--ac-muted); transform: scaleY(calc(1 - var(--fm-sq, 0) * 0.3)); }
  .ac-fm__psearch .ac-icon { inline-size: 1.05rem; block-size: 1.05rem; }
  .ac-fm__pq { font-size: 16px; color: var(--ac-text); }
  .ac-fm[data-loc="browse"] .ac-fm__ptitle { font-size: 2.125rem; }

  /* browse = sidebar as grouped inset lists */
  .ac-fm-browse { padding: var(--ac-s-1) 0 var(--ac-s-4); }
  .ac-fm-browse .ac-fm__sec { margin: 0 0 var(--ac-s-5); padding: 0; border: 0; }
  .ac-fm-browse .ac-fm__sec-h { padding: 0 0 var(--ac-s-2); color: var(--ac-text); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
  .ac-fm-browse .ac-fm__sec > .ac-fm__nav { min-block-size: 2.9rem; padding: 0.5rem 0.85rem; border-radius: 0; background: var(--ac-surface-1); font-size: 1rem; color: var(--ac-text); }
  .ac-fm-browse .ac-fm__sec > .ac-fm__nav:first-of-type { border-start-start-radius: var(--ac-r-lg); border-start-end-radius: var(--ac-r-lg); }
  .ac-fm-browse .ac-fm__sec > .ac-fm__nav:last-of-type { border-end-start-radius: var(--ac-r-lg); border-end-end-radius: var(--ac-r-lg); }
  .ac-fm-browse .ac-fm__sec > .ac-fm__nav + .ac-fm__nav { box-shadow: inset 0 1px 0 var(--ac-border); }
  .ac-fm-browse .ac-fm__nav > .ac-icon { inline-size: 1.3rem; block-size: 1.3rem; color: var(--ac-accent); }
  .ac-fm-browse .ac-fm__nav-art { inline-size: 1.45rem; block-size: 1.45rem; }
  .ac-fm-browse .ac-fm__nav-chev { display: inline-grid; }
  .ac-fm-browse .ac-fm__nav:active { background: var(--ac-active); transform: none; }
  .ac-fm-browse .ac-fm__nav[aria-current] { background: var(--ac-surface-1); font-weight: 400; }

  /* list rows */
  .ac-fm__gh { position: static; padding: var(--ac-s-3) 0 var(--ac-s-1); background: none; backdrop-filter: none; }
  .ac-fm-plist { display: grid; border-radius: var(--ac-r-lg); background: var(--ac-surface-1); overflow: hidden; }
  .ac-fm-prow { position: relative; outline: none; overflow: hidden; touch-action: pan-y; }
  .ac-fm-prow + .ac-fm-prow .ac-fm-prow__c::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 4.2rem 0; block-size: 1px; background: var(--ac-border); }
  .ac-fm-prow__c { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.75rem; min-block-size: 3.9rem; padding: 0.5rem 0.4rem 0.5rem 0.85rem; padding-inline: 0.85rem 0.4rem; background: var(--ac-surface-1); transform: translateX(var(--sx, 0px)); transition: transform 0.32s cubic-bezier(0.19, 1, 0.22, 1), background-color var(--ac-dur-1); }
  .ac-fm-prow[data-swiping] .ac-fm-prow__c { transition: none; }
  .ac-fm-prow:active .ac-fm-prow__c { background: var(--ac-active); }
  .ac-fm-prow > .ac-fm-prow__c > .ac-fm__art { inline-size: 2.6rem; block-size: 2.6rem; --_fs: 42px; }
  .ac-fm-prow > .ac-fm-prow__c > .ac-fm__art .ac-fm-thumb__play { max-inline-size: 1rem; } .ac-fm-prow .ac-fm-thumb__dur { display: none; }
  .ac-fm-prow__main { flex: 1; min-inline-size: 0; display: grid; gap: 0.1rem; }
  .ac-fm-prow .ac-fm__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; color: var(--ac-text); }
  .ac-fm-prow__meta { display: flex; align-items: center; gap: 0.3rem; color: var(--ac-muted); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; }
  .ac-fm-prow__chips { display: flex; gap: 0.3rem; margin-block-start: 0.15rem; }
  .ac-fm-prow__chev { color: var(--ac-faint); } .ac-fm-prow__chev .ac-icon { inline-size: 1.1rem; block-size: 1.1rem; }
  .ac-fm-prow__more { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; color: var(--ac-muted); }
  .ac-fm-prow__acts { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; }
  .ac-fm-prow__acts button { display: grid; place-content: center; justify-items: center; gap: 0.15rem; inline-size: 4.75rem; color: #fff; font-size: 0.75rem; background: var(--ac-warning); }
  .ac-fm-prow__acts button[data-tone="danger"] { background: var(--ac-danger); }
  .ac-fm-prow__acts .ac-icon { inline-size: 1.25rem; block-size: 1.25rem; }
  .ac-fm-check { display: grid; place-items: center; inline-size: 0; block-size: 1.45rem; margin-inline-end: -0.75rem; border-radius: 50%; border: 0 solid var(--ac-border-strong); color: transparent; opacity: 0; transition: inline-size 0.28s cubic-bezier(0.19, 1, 0.22, 1), margin 0.28s cubic-bezier(0.19, 1, 0.22, 1), opacity var(--ac-dur-2), background-color var(--ac-dur-1); flex: none; }
  .ac-fm-check .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
  .ac-fm[data-selecting="true"] .ac-fm-check { inline-size: 1.45rem; margin-inline-end: 0; border-width: 1.5px; opacity: 1; }
  .ac-fm[data-selecting="true"] .ac-fm-prow[aria-selected="true"] .ac-fm-check { border-color: var(--ac-accent); background: var(--ac-accent); color: #fff; }
  .ac-fm[data-selecting="true"] .ac-fm-prow[aria-selected="true"] .ac-fm-prow__c { background: color-mix(in oklab, var(--ac-accent) 7%, var(--ac-surface-1)); }
  .ac-fm[data-selecting="true"] .ac-fm-prow__chev, .ac-fm[data-selecting="true"] .ac-fm-prow__more { visibility: hidden; }

  /* icons & gallery on phone */
  .ac-fm-grid { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); padding: var(--ac-s-2) 0; }
  .ac-fm-tile .ac-fm__name { font-size: 0.8125rem; }
  .ac-fm-tile[aria-selected="true"] .ac-fm__name { background: var(--ac-accent); color: #fff; }
  .ac-fm-gal { block-size: auto; }
  .ac-fm-gal__stage { grid-template-columns: 1fr; }
  .ac-fm-gal__hero { block-size: 52vh; margin-inline: calc(var(--ac-content-pad) * -1); padding: var(--ac-s-3); }
  .ac-fm-gal__meta { display: none; }
  .ac-fm-gal__strip { margin-inline: calc(var(--ac-content-pad) * -1); padding-inline: var(--ac-content-pad); border: 0; background: none; }
  .ac-fm-empty { min-block-size: 50vh; }

  /* selection bar replaces the tab bar while selecting */
  .ac-fm-selbar { position: fixed; z-index: calc(var(--ac-z-tabbar, 40) + 2); inset-inline: var(--ac-s-3); inset-block-end: calc(var(--ac-s-3) + var(--ac-safe-bottom, 0px)); display: flex; justify-content: space-around; gap: 2px; padding: 0.35rem; border: 1px solid var(--ac-border); border-radius: var(--ac-r-pill); background: color-mix(in oklab, var(--ac-elevated) 92%, transparent); backdrop-filter: blur(16px); box-shadow: var(--ac-shadow-lg); }
  .ac-fm-selbar[data-state="closed"] { display: none; }
  .ac-fm-selbar button { flex: 1; display: grid; justify-items: center; gap: 0.1rem; min-block-size: 3rem; padding: 0.3rem 0.2rem; border-radius: var(--ac-r-pill); color: var(--ac-accent-ink); font: inherit; font-size: 0.6875rem; }
  .ac-fm-selbar button[data-tone="danger"] { color: var(--ac-danger-ink); }
  .ac-fm-selbar button:disabled { opacity: 0.35; }
  .ac-fm-selbar button:active:not(:disabled) { background: var(--ac-active); }
  .ac-fm-selbar .ac-icon { inline-size: 1.3rem; block-size: 1.3rem; }
  :root[data-fm-selecting] .ac-tabbar { opacity: 0; pointer-events: none; transition: opacity var(--ac-dur-2); }

  .ac-fm-up { inset-inline: var(--ac-s-3); inline-size: auto; inset-block-end: calc(var(--ac-tabbar-h) + var(--ac-safe-bottom, 0px) + var(--ac-s-4)); }
  .ac-fm-ql { padding: 0; }
  .ac-fm-ql__panel { inline-size: 100%; block-size: 100%; border: 0; border-radius: 0; padding-block: var(--ac-safe-top, 0px) var(--ac-safe-bottom, 0px); }
  .ac-fm-ql__nav { display: none; }
  .ac-fm-ql__content { padding: var(--ac-s-2); }
  .ac-fm-ql__content .ac-fm-full--md { padding: var(--ac-s-4); }
  .ac-fm-rename { font-size: 16px; }
}
@media (hover: none) { .ac-fm-tile:hover > .ac-fm__art, .ac-fm-crow:hover, .ac-fm-row:hover { background: none; } }


/* ==== modules/invoice-ir/invoice-ir.css ==== */
/* Iranian invoices module. The sheet is paper: always white with dark ink (both themes), sized in mm,
   scaled to fit on screen (--aci-zoom), printed 1:1 with @page set by JS. Logical properties only. */
.aci { --_ink: #141416; --_soft: #3b3b41; --_mute: #74747c; --_line: #2a2a2e; --_hair: #dcdce1; --_fill: #f3f3f5; --_acc: var(--ac-accent, #f0532d); display: grid; gap: var(--ac-s-3); min-inline-size: 0; }
.aci-toolbar-slot { min-inline-size: 0; }
.aci-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2); }
.aci-toolbar .aci-print { margin-inline-start: auto; }
.aci-stage { display: flex; justify-content: center; min-inline-size: 0; padding: var(--ac-s-4); border-radius: var(--ac-r-xl); background: var(--ac-bg-subtle, var(--ac-surface-2)); border: 1px solid var(--ac-border); overflow: hidden; }
@media (max-width: 639.98px) { .aci-stage { padding: var(--ac-s-2); border-radius: var(--ac-r-lg); } }

/* ---------- sheet */
.aci-sheet { --aci-w: 210mm; --aci-h: 297mm; --aci-pad: 9mm; --aci-fs: 10.5px; zoom: var(--aci-zoom, 1); flex: none; box-sizing: border-box; inline-size: var(--aci-w); min-block-size: var(--aci-h); padding: var(--aci-pad); background: #fff; color: var(--_ink); font-family: var(--ac-font); font-size: var(--aci-fs); line-height: 1.55; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px -12px rgba(0, 0, 0, 0.22); text-align: start; color-scheme: light; transition: box-shadow var(--ac-dur-2) var(--ac-ease); }
.aci-sheet[data-paper="a4l"] { --aci-w: 297mm; --aci-h: 210mm; --aci-pad: 8mm; --aci-fs: 10.5px; }
.aci-sheet[data-paper="a5"] { --aci-w: 148mm; --aci-h: 210mm; --aci-pad: 6mm; --aci-fs: 7.4px; }
.aci-sheet[data-paper="a5l"] { --aci-w: 210mm; --aci-h: 148mm; --aci-pad: 6mm; --aci-fs: 7.6px; }
.aci-sheet[data-paper="a4"][data-type="official"] { --aci-fs: 8.6px; }
.aci-sheet[data-paper="a4"][data-type="proforma"], .aci-sheet[data-paper="a4l"][data-type="proforma"] { --aci-fs: 11px; }
.aci-sheet[data-paper="a5"][data-type="proforma"] { --aci-fs: 8px; }
.aci-sheet[data-paper="a5l"][data-type="proforma"] { --aci-fs: 8px; }
.aci-sheet *, .aci-sheet *::before, .aci-sheet *::after { box-sizing: border-box; }
.aci-sheet :is(h1, h2, h3, h4, strong, b, th, td, dt, dd, p, small, span) { color: inherit; }
.aci-sheet small { font-size: 0.86em; }
.aci-table--official td:nth-child(2) .aci-mono { white-space: normal; overflow-wrap: anywhere; font-size: 0.92em; letter-spacing: 0; }
.aci-sheet .aci-f__l, .aci-sheet .aci-muted, .aci-sheet .aci-meta dt, .aci-sheet .aci-pmeta dt, .aci-sheet .aci-pcard h3, .aci-sheet .aci-desc small { color: var(--_mute); }
.aci-sheet h2, .aci-sheet h3, .aci-sheet p, .aci-sheet dl, .aci-sheet dd, .aci-sheet ul { margin: 0; padding: 0; }
.aci-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aci-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
.aci-ltr { direction: ltr; unicode-bidi: isolate; }
.aci-muted { color: var(--_mute); }
.aci-strong { font-weight: 700; }
.aci-blank { display: inline-block; inline-size: 6em; border-block-end: 1px dotted var(--_mute); vertical-align: baseline; }

/* ---------- official */
.aci-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2em; margin-block-end: 0.9em; }
.aci-head__side { min-block-size: 1px; }
.aci-logo { max-block-size: 4.2em; max-inline-size: 9em; object-fit: contain; }
.aci-title { font-size: 1.6em; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; text-align: center; padding-block: 0.5em; padding-inline: 1.4em; border: 1.5px solid var(--_line); border-radius: 0.6em; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--_hair); }
.aci-meta { justify-self: end; display: grid; gap: 0.15em; min-inline-size: 15em; }
.aci-meta > div { display: flex; justify-content: space-between; gap: 1em; padding-block: 0.15em; border-block-end: 1px dotted var(--_hair); }
.aci-meta dt { color: var(--_mute); }
.aci-meta dd { font-weight: 600; }
.aci-band { display: flex; align-items: center; gap: 0.5em; padding-block: 0.45em; padding-inline: 0.8em; font-size: 1.02em; font-weight: 700; background: var(--_fill); border: 1px solid var(--_line); border-block-end: 0; border-start-start-radius: 0.45em; border-start-end-radius: 0.45em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-band::before { content: ""; inline-size: 0.32em; block-size: 1em; border-radius: 1em; background: var(--_ink); }
.aci-party { margin-block-end: 0.7em; break-inside: avoid; }
.aci-party__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--_hair); border: 1px solid var(--_line); border-end-start-radius: 0.45em; border-end-end-radius: 0.45em; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-f { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; min-inline-size: 0; padding-block: 0.42em; padding-inline: 0.7em; background: #fff; }
.aci-f--wide { grid-column: span 2; }
.aci-f--full { grid-column: 1 / -1; }
.aci-f__l { color: var(--_mute); white-space: nowrap; }
.aci-f__v { font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.aci-band--table { margin-block-start: 0.2em; }
.aci-table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; }
.aci-table--official { border: 1px solid var(--_line); }
.aci-table--official th, .aci-table--official td { padding-block: 0.38em; padding-inline: 0.4em; border: 1px solid var(--_hair); vertical-align: middle; }
.aci-table--official thead th { background: var(--_fill); font-weight: 700; font-size: 0.9em; line-height: 1.3; text-align: center; border-color: var(--_line); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-table--official thead th small { display: block; font-weight: 500; color: var(--_mute); font-size: 0.88em; }
.aci-table--official td { text-align: end; }
.aci-table--official td.aci-c { text-align: center; }
.aci-table--official td.aci-desc { text-align: start; }
.aci-desc small { display: block; color: var(--_mute); font-size: 0.88em; }
.aci-table--official tbody tr:nth-child(even) td { background: #fafafb; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-table--official tfoot td, .aci-table--official tfoot th { background: var(--_fill); font-weight: 700; border-block-start: 1.5px solid var(--_line); border-color: var(--_line); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-table--official tfoot td { text-align: end; }
.aci-sumlabel { text-align: center; }
.aci-table--official col.w-row { inline-size: 3.2%; }
.aci-table--official col.w-code { inline-size: 8%; }
.aci-table--official col.w-desc { inline-size: 21%; }
.aci-table--official col.w-qty { inline-size: 6%; }
.aci-table--official col.w-unit { inline-size: 6.4%; }
.aci-table--official col.w-amt { inline-size: 9.2%; }
.aci-words, .aci-terms, .aci-notes { padding-block: 0.45em; padding-inline: 0.8em; border: 1px solid var(--_line); border-block-start: 0; }
.aci-terms { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em 1.5em; }
.aci-terms__rate { color: var(--_soft); }
.aci-notes { min-block-size: 2.6em; border-end-start-radius: 0.45em; border-end-end-radius: 0.45em; }
.aci-check { display: inline-flex; align-items: center; gap: 0.35em; margin-inline-end: 1em; font-weight: 600; }
.aci-check i { display: inline-grid; place-items: center; inline-size: 1.05em; block-size: 1.05em; border: 1.3px solid var(--_ink); border-radius: 0.2em; }
.aci-check[data-on="true"] i::after { content: ""; inline-size: 0.55em; block-size: 0.55em; border-radius: 0.1em; background: var(--_ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; margin-block-start: 0.9em; break-inside: avoid; }
.aci-sign { display: flex; align-items: flex-start; justify-content: center; min-block-size: 6.5em; padding: 0.6em; border: 1px dashed #9a9aa2; border-radius: 0.5em; color: var(--_mute); font-weight: 600; }

/* ---------- proforma */
.aci-sheet[data-type="proforma"] { --aci-pad: 11mm; }
.aci-sheet[data-type="proforma"][data-paper^="a5"] { --aci-pad: 7mm; }
.aci-phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em; padding-block-end: 1.2em; margin-block-end: 1.2em; border-block-end: 2px solid var(--_ink); }
.aci-brand { display: flex; align-items: center; gap: 0.8em; }
.aci-brand__mark { display: grid; place-items: center; inline-size: 3.6em; block-size: 3.6em; border-radius: 1.1em; background: linear-gradient(135deg, #ff6a3d, var(--_acc)); color: #fff; font-size: 1.15em; font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-brand__logo { max-block-size: 3.6em; max-inline-size: 8em; object-fit: contain; }
.aci-brand__name { display: block; font-size: 1.45em; font-weight: 800; letter-spacing: -0.01em; }
.aci-brand small { display: block; color: var(--_mute); }
.aci-phead__meta { text-align: end; }
.aci-ptitle { font-size: 2.1em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.aci-pmeta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3em 1.2em; margin-block-start: 0.5em; }
.aci-pmeta dt { color: var(--_mute); font-size: 0.85em; }
.aci-pmeta dd { font-weight: 700; }
.aci-pparties { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-block-end: 1.2em; }
.aci-pcard { padding: 0.9em 1em; border-radius: 0.8em; background: var(--_fill); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-pcard h3 { font-size: 0.82em; font-weight: 600; color: var(--_mute); margin-block-end: 0.3em; }
.aci-pcard__name { display: block; font-size: 1.12em; margin-block-end: 0.2em; }
.aci-pcard p { color: var(--_soft); }
.aci-table--proforma th, .aci-table--proforma td { padding-block: 0.65em; padding-inline: 0.6em; text-align: end; vertical-align: top; }
.aci-table--proforma thead th { font-size: 0.85em; font-weight: 600; color: var(--_mute); border-block-end: 1.5px solid var(--_ink); white-space: nowrap; }
.aci-table--proforma thead th small { font-weight: 400; }
.aci-table--proforma tbody td { border-block-end: 1px solid var(--_hair); }
.aci-table--proforma th:nth-child(-n+2), .aci-table--proforma td:nth-child(-n+2) { text-align: start; }
.aci-table--proforma td.aci-c, .aci-table--proforma th:nth-child(3) { text-align: center; }
.aci-table--proforma col.w-row { inline-size: 6%; }
.aci-table--proforma col.w-pdesc { inline-size: 38%; }
.aci-table--proforma col.w-pqty { inline-size: 12%; }
.aci-table--proforma col.w-amt { inline-size: 14.6%; }
.aci-pbottom { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5em; margin-block-start: 1.2em; break-inside: avoid; }
.aci-pay h3, .aci-pnotes h3 { font-size: 0.85em; font-weight: 600; color: var(--_mute); margin-block-end: 0.5em; }
.aci-banks { list-style: none; display: grid; gap: 0.6em; margin-block-end: 0.8em; }
.aci-bank { display: flex; gap: 0.7em; align-items: flex-start; padding: 0.7em 0.8em; border: 1px solid var(--_hair); border-radius: 0.7em; }
.aci-banklogo { flex: none; inline-size: 2.4em; block-size: 2.4em; }
.aci-banklogo--x { border-radius: 0.6em; background: var(--_fill); }
.aci-bank__main { display: grid; gap: 0.15em; min-inline-size: 0; flex: 1; }
.aci-bank__head { display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; align-items: baseline; }
.aci-bank__head span { color: var(--_mute); font-size: 0.9em; }
.aci-bank__row { display: flex; justify-content: space-between; gap: 0.8em; font-size: 0.95em; }
.aci-bank__row > span { color: var(--_mute); }
.aci-qr { display: flex; align-items: center; gap: 0.8em; }
.aci-qr__code { flex: none; inline-size: 5.6em; block-size: 5.6em; padding: 0.3em; border: 1px solid var(--_hair); border-radius: 0.6em; background: #fff; }
.aci-qr__code svg { display: block; inline-size: 100%; block-size: 100%; fill: var(--_ink); }
.aci-qr strong { display: block; }
.aci-qr small { display: block; color: var(--_mute); font-size: 0.85em; word-break: break-all; }
.aci-ptotals { display: grid; align-content: start; gap: 0.15em; }
.aci-ptotals__row { display: flex; justify-content: space-between; gap: 1em; padding-block: 0.4em; border-block-end: 1px dashed var(--_hair); color: var(--_soft); }
.aci-ptotals__row--disc > span:last-child { color: #c2410c; }
.aci-ptotals__due { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-block-start: 0.6em; padding-block: 0.8em; padding-inline: 1em; border-radius: 0.8em; background: var(--_ink); color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-ptotals__due strong { font-size: 1.4em; font-weight: 800; }
.aci-ptotals__due small { font-size: 0.6em; font-weight: 500; opacity: 0.75; }
.aci-ptotals__words { margin-block-start: 0.5em !important; color: var(--_soft); font-size: 0.92em; }
.aci-pnotes { margin-block-start: 1.2em; padding: 0.8em 1em; border-inline-start: 3px solid var(--_acc); background: #fff8f5; border-radius: 0.3em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aci-pnotes p { color: var(--_soft); white-space: pre-line; }
.aci-signs--p { margin-block-start: 1.4em; }
.aci-signs--p .aci-sign { min-block-size: 5.5em; }
.aci-disclaimer { margin-block-start: 1em !important; color: var(--_mute); font-size: 0.85em; text-align: center; }
@media (max-width: 639.98px) { .aci-toolbar .aci-print { margin-inline-start: 0; } }

/* ---------- editor + preview workspace */
.aci-workspace { display: grid; gap: var(--ac-gap, var(--ac-s-4)); align-items: start; min-inline-size: 0; }
.aci-workspace > * { min-inline-size: 0; }
@media (min-width: 1280px) {
  .aci-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .aci-workspace__preview { position: sticky; inset-block-start: calc(var(--ac-appbar-h, 64px) + var(--ac-s-4)); }
}
/* ---------- editor */
.aci-ed { display: grid; gap: var(--ac-s-3); min-inline-size: 0; container: aci-ed / inline-size; }
.aci-ed__group { border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); background: var(--ac-surface-1); padding: var(--ac-s-4); display: grid; gap: var(--ac-s-3); }
.aci-ed__group > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); min-block-size: var(--ac-touch, 44px); margin: calc(var(--ac-s-2) * -1) 0; font-weight: var(--ac-fw-semibold); cursor: pointer; list-style: none; border-radius: var(--ac-r-md); }
.aci-ed__group > summary::-webkit-details-marker { display: none; }
.aci-ed__group > summary .ac-icon { transition: transform var(--ac-dur-2) var(--ac-ease-out); color: var(--ac-muted); }
.aci-ed__group[open] > summary .ac-icon { transform: rotate(180deg); }
.aci-ed__group > summary:hover { color: var(--ac-text); }
.aci-ed__group > summary:focus-visible { outline: 2px solid var(--ac-ring, var(--ac-accent)); outline-offset: 2px; }
.aci-ed__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ac-s-2); }
.aci-ed__h { margin: 0; font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); display: flex; align-items: center; gap: var(--ac-s-2); }
.aci-ed__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ac-s-2); }
.aci-ed__ihead, .aci-ed__item { display: grid; grid-template-columns: 1.5rem minmax(0, 2.3fr) minmax(0, 1.2fr) 4.25rem 6.75rem minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 2.25rem; gap: var(--ac-s-2); align-items: center; }
.aci-ed__ihead { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.aci-ed__item { padding: var(--ac-s-1); margin-inline: calc(var(--ac-s-1) * -1); border-radius: var(--ac-r-md); transition: background var(--ac-dur-2) var(--ac-ease); animation: aci-in var(--ac-dur-3, 240ms) var(--ac-ease-out); }
.aci-ed__item:hover, .aci-ed__item:focus-within { background: var(--ac-hover); }
.aci-ed__item .ac-input, .aci-ed__item .ac-select { min-inline-size: 0; }
.aci-ed__idx { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--ac-surface-3); color: var(--ac-text-soft); font-size: var(--ac-fs-2xs); font-variant-numeric: tabular-nums; }
.aci-ed__line { text-align: end; font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aci-ed__line::before { content: attr(data-label); display: none; margin-inline-end: var(--ac-s-2); color: var(--ac-muted); font-weight: 400; font-size: var(--ac-fs-xs); }
.aci-ed__rm { color: var(--ac-muted); }
.aci-ed__rm:hover { color: var(--ac-danger); background: var(--ac-danger-soft); }
.aci-ed__rm:active { transform: var(--ac-press, scale(0.95)); }
@keyframes aci-in { from { opacity: 0; transform: translateY(4px); } }
.aci-ed__totals { position: sticky; inset-block-end: var(--ac-s-3); z-index: 2; padding: var(--ac-s-3) var(--ac-s-4); border-radius: var(--ac-r-lg); background: var(--ac-ink); color: var(--ac-ink-contrast); box-shadow: var(--ac-shadow-lg); }
.aci-ed__tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ac-s-3); }
.aci-ed__tgrid > div { display: grid; gap: 2px; min-inline-size: 0; }
.aci-ed__tgrid span { font-size: var(--ac-fs-2xs); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aci-ed__tgrid bdi { font-weight: var(--ac-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aci-ed__due bdi { color: var(--ac-accent); font-size: var(--ac-fs-lg); }
.aci-ed__due small { font-size: var(--ac-fs-2xs); opacity: 0.8; color: var(--ac-ink-contrast); }
.aci-ed__words { margin: var(--ac-s-1) 0 0; font-size: var(--ac-fs-xs); opacity: 0.75; }
/* item rows follow the editor's own width (side-by-side on desktop, full width on tablets) */
@container aci-ed (max-width: 52rem) {
  .aci-ed__ihead { display: none; }
  .aci-ed__item { grid-template-columns: 1.5rem repeat(10, minmax(0, 1fr)) 2.25rem; padding: var(--ac-s-2); margin-inline: 0; border: 1px solid var(--ac-border); }
  .aci-ed__title { grid-column: 2 / 9; }
  .aci-ed__code { grid-column: 9 / 12; }
  .aci-ed__rm { grid-column: 12; grid-row: 1; }
  .aci-ed__qty { grid-column: 2 / 3; }
  .aci-ed__unit { grid-column: 3 / 6; }
  .aci-ed__price { grid-column: 6 / 9; }
  .aci-ed__disc { grid-column: 9 / 12; }
  .aci-ed__line { grid-column: 2 / 12; }
  .aci-ed__line::before { display: inline; }
}
@container aci-ed (max-width: 30rem) {
  .aci-ed__item { grid-template-columns: 1.5rem repeat(4, minmax(0, 1fr)) 2.25rem; }
  .aci-ed__title { grid-column: 2 / 6; }
  .aci-ed__rm { grid-column: 6; }
  .aci-ed__code { grid-column: 2 / 4; }
  .aci-ed__qty { grid-column: 4 / 5; }
  .aci-ed__unit { grid-column: 5 / 7; }
  .aci-ed__price { grid-column: 2 / 4; }
  .aci-ed__disc { grid-column: 4 / 7; }
  .aci-ed__line { grid-column: 2 / 7; }
  .aci-ed__tgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639.98px) {
  .aci-ed__group { padding: var(--ac-s-3); }
  .aci-ed__totals { inset-block-end: calc(var(--ac-tabbar-h, 64px) + var(--ac-safe-bottom, 0px) + var(--ac-s-4)); }
}

/* ---------- print: the sheet only, 1:1, header row repeats on every page */
@media print {
  body:has(.aci-sheet) :is(.ac-content, .ac-page, .ac-page > *, .ac-bento, .ac-bento > *) { animation: none !important; opacity: 1 !important; transform: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; display: block !important; max-inline-size: none !important; inline-size: auto !important; }
  .aci, .aci-stage { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; overflow: visible !important; }
  .aci-sheet { zoom: 1 !important; inline-size: auto !important; min-block-size: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  .aci-table thead { display: table-header-group; }
  .aci-table tfoot { display: table-row-group; }
  .aci-table tr { break-inside: avoid; }
  .aci-words, .aci-terms, .aci-notes, .aci-pbottom, .aci-signs { break-inside: avoid; }
  html body:has(.aci-sheet) :is([data-aci-noprint], .aci-toolbar-slot, .aci-ed, .ac-page-head) { display: none !important; }
  html body:has(.aci-sheet) > :not(.ac-shell) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .aci-ed__item { animation: none; } }


/* ==== modules/mail/mail.css ==== */
/* Mail module (src/modules/mail). Tokens only; logical properties; RTL mirrored via --ac-dir. */
.ac-mail { position: relative; display: grid; grid-template-columns: 14.5rem minmax(20rem, 26rem) minmax(0, 1fr); block-size: clamp(34rem, calc(100dvh - 15.5rem), 58rem); min-width: 0; overflow: hidden; background: var(--ac-surface-1); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); }
.ac-mail[data-settings] { grid-template-columns: 14.5rem minmax(0, 1fr) 0; }
.ac-mail[data-settings] > .ac-mail__reader { display: none; }
.ac-mail .ac-split__pane { min-width: 0; min-block-size: 0; }
:is(.ac-mail, .ac-mail__composer) :is(button, a, input, select, textarea, [contenteditable="true"]):focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 2px; }
.ac-mail__ib { position: relative; display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; flex: none; border-radius: 50%; color: var(--ac-text-soft); transition: background var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2), transform var(--ac-dur-1) var(--ac-ease); }
.ac-mail__ib:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-mail__ib:active { transform: scale(0.9); }
.ac-mail__ib[aria-pressed="true"] { color: var(--ac-danger); }
.ac-mail__ib--sm { inline-size: 1.85rem; block-size: 1.85rem; }
.ac-mail__ib .ac-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.ac-mail__ib[data-spin] .ac-icon { animation: ac-mail-spin 700ms var(--ac-ease); }
@keyframes ac-mail-spin { to { transform: rotate(360deg); } }
.ac-mail__sep { inline-size: 1px; block-size: 1.25rem; margin-inline: var(--ac-s-1); background: var(--ac-border); flex: none; }
.ac-mail__end { margin-inline-start: auto; }
.ac-mail__dot { position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--ac-accent); box-shadow: 0 0 0 2px var(--ac-surface-1); }
.ac-mail__dot[hidden] { display: none; }
.ac-mail__link { color: var(--ac-accent-ink); font-weight: var(--ac-fw-semibold); text-decoration: underline; text-underline-offset: 2px; }
.ac-mail [data-tone] { --_tone: var(--ac-muted); }
.ac-mail [data-tone="accent"] { --_tone: var(--ac-accent); } .ac-mail [data-tone="info"] { --_tone: var(--ac-info); } .ac-mail [data-tone="success"] { --_tone: var(--ac-success); }
.ac-mail [data-tone="warning"] { --_tone: var(--ac-warning); } .ac-mail [data-tone="danger"] { --_tone: var(--ac-danger); }

/* rail */
.ac-mail__rail { display: flex; flex-direction: column; gap: 2px; padding: var(--ac-s-4) var(--ac-s-3); background: var(--ac-surface-2); border-inline-end: 1px solid var(--ac-border); overflow-y: auto; scrollbar-width: none; }
.ac-mail__compose { display: inline-flex; align-items: center; justify-content: center; gap: var(--ac-s-2); min-block-size: 3rem; margin-block-end: var(--ac-s-3); border-radius: var(--ac-r-lg); background: var(--ac-ink); color: var(--ac-ink-contrast); font-weight: var(--ac-fw-semibold); box-shadow: var(--ac-shadow-md); transition: transform var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2); }
.ac-mail__compose:hover { transform: translateY(-2px); box-shadow: var(--ac-shadow-lg); }
.ac-mail__compose:active { transform: var(--ac-press); }
.ac-mail__folders, .ac-mail__labels { display: grid; gap: 2px; }
.ac-mail__folder { display: flex; align-items: center; gap: var(--ac-s-3); inline-size: 100%; min-block-size: 2.4rem; padding-inline: var(--ac-s-3); border-radius: var(--ac-r-pill); color: var(--ac-text-soft); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); text-align: start; transition: background var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2), transform var(--ac-dur-1); }
.ac-mail__folder:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-mail__folder:active { transform: var(--ac-press); }
.ac-mail__folder[aria-current="true"] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-mail__folder > .ac-icon { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }
.ac-mail__folder > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-mail__fcount { font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; opacity: 0.75; }
.ac-mail__fcount.is-strong { opacity: 1; padding: 1px 0.45rem; border-radius: var(--ac-r-pill); background: var(--ac-accent); color: var(--ac-accent-contrast); }
.ac-mail__label > i { inline-size: 0.6rem; block-size: 0.6rem; margin-inline: 0.2rem; border-radius: 3px; background: var(--_tone); flex: none; }
.ac-mail__railhead { display: flex; align-items: center; justify-content: space-between; margin: var(--ac-s-4) var(--ac-s-1) var(--ac-s-1) var(--ac-s-3); color: var(--ac-muted); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.ac-mail__railfoot { display: grid; gap: var(--ac-s-2); margin-block-start: auto; padding-block-start: var(--ac-s-3); }
.ac-mail__storage { display: grid; gap: var(--ac-s-2); padding: var(--ac-s-3); border-radius: var(--ac-r-md); background: var(--ac-surface-1); border: 1px solid var(--ac-border); font-size: var(--ac-fs-xs); }
.ac-mail__storagehead { display: flex; justify-content: space-between; gap: var(--ac-s-2); }
.ac-mail__storagehead bdi { color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-mail__meter { display: block; block-size: 0.35rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-3); overflow: hidden; }
.ac-mail__meter i { display: block; inline-size: 41%; block-size: 100%; border-radius: inherit; background: var(--ac-accent); }

/* list pane */
.ac-mail__listpane { display: flex; flex-direction: column; border-inline-end: 1px solid var(--ac-border); }
.ac-mail[data-settings] .ac-mail__listpane { border: 0; }
.ac-mail__lhead { display: grid; gap: var(--ac-s-3); padding: var(--ac-s-4) var(--ac-s-4) 0; }
.ac-mail__ltitle { display: flex; align-items: baseline; gap: var(--ac-s-2); }
.ac-mail__ltitle h2 { font-size: var(--ac-fs-xl); font-weight: var(--ac-fw-semibold); letter-spacing: -0.01em; }
.ac-mail__lcount { color: var(--ac-muted); font-size: var(--ac-fs-sm); font-variant-numeric: tabular-nums; }
.ac-mail__searchrow { display: flex; gap: var(--ac-s-2); }
.ac-mail__search { display: flex; align-items: center; gap: var(--ac-s-2); flex: 1; min-width: 0; min-block-size: 2.4rem; padding-inline: var(--ac-s-3); border-radius: var(--ac-r-pill); background: var(--ac-surface-2); border: 1px solid transparent; color: var(--ac-muted); transition: border-color var(--ac-dur-2), background var(--ac-dur-2), box-shadow var(--ac-dur-2); }
.ac-mail__search:focus-within { background: var(--ac-surface-1); border-color: var(--ac-border-strong); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac-ink) 6%, transparent); }
.ac-mail__search .ac-icon { inline-size: 1rem; block-size: 1rem; flex: none; }
.ac-mail__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-sm); }
.ac-mail__searchrow .ac-mail__ib { inline-size: 2.4rem; block-size: 2.4rem; background: var(--ac-surface-2); }
.ac-mail__chips { display: none; gap: var(--ac-s-1); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--ac-s-4) * -1); padding-inline: var(--ac-s-4); }
.ac-mail__chips::-webkit-scrollbar { display: none; }
.ac-mail__chips .ac-chip { flex: none; }
.ac-mail__chips .ac-chip[aria-pressed="true"] { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-mail__toolbar { display: flex; align-items: center; gap: var(--ac-s-1); min-block-size: 2.75rem; margin-inline: calc(var(--ac-s-4) * -1); padding-inline: var(--ac-s-3); border-block-end: 1px solid var(--ac-border); }
.ac-mail[data-selecting] .ac-mail__toolbar { background: color-mix(in oklab, var(--ac-accent) 7%, var(--ac-surface-1)); }
.ac-mail__check { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; flex: none; border-radius: 50%; cursor: pointer; transition: background var(--ac-dur-2); }
.ac-mail__check:hover { background: var(--ac-hover); }
.ac-mail__selcount { font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); white-space: nowrap; }
.ac-mail__bulk { display: flex; align-items: center; gap: 1px; margin-inline-start: auto; animation: ac-fade-up var(--ac-dur-3) var(--ac-ease-out) both; }
.ac-mail__bulk .ac-mail__ib { inline-size: 2rem; block-size: 2rem; }
.ac-mail__pager { margin-inline-start: auto; color: var(--ac-muted); font-size: var(--ac-fs-xs); font-variant-numeric: tabular-nums; }
.ac-mail__banner { display: flex; align-items: center; justify-content: center; gap: var(--ac-s-2); padding: var(--ac-s-2) var(--ac-s-4); background: var(--ac-warning-soft); color: var(--ac-warning-ink); font-size: var(--ac-fs-xs); }
.ac-mail__banner[hidden] { display: none; }
.ac-mail__banner .ac-mail__link { color: inherit; }
.ac-mail__list { flex: 1; min-block-size: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.ac-mail__list[hidden], .ac-mail__settings[hidden] { display: none; }
.ac-mail__list.is-in > * { animation: ac-fade-up var(--ac-dur-4) var(--ac-ease-out) both; }
.ac-mail__list.is-in > :nth-child(2) { animation-delay: 30ms; } .ac-mail__list.is-in > :nth-child(3) { animation-delay: 60ms; } .ac-mail__list.is-in > :nth-child(4) { animation-delay: 90ms; } .ac-mail__list.is-in > :nth-child(n + 5) { animation-delay: 120ms; }
.ac-mail__row { position: relative; border-block-end: 1px solid var(--ac-border); overflow: hidden; }
.ac-mail__row > .ac-swipe__content.ac-mail__rowin { display: flex; align-items: flex-start; gap: 0; padding: 0 var(--ac-s-2) 0 var(--ac-s-1); min-block-size: 0; background: var(--ac-surface-1); transition: background var(--ac-dur-2), transform var(--ac-dur-3) var(--ac-ease); }
.ac-mail__row:hover > .ac-mail__rowin { background: color-mix(in oklab, var(--ac-hover) 100%, var(--ac-surface-1)); }
.ac-mail__row[data-selected] > .ac-mail__rowin { background: color-mix(in oklab, var(--ac-accent) 8%, var(--ac-surface-1)); }
.ac-mail__row[aria-current="true"] > .ac-mail__rowin { background: var(--ac-surface-2); }
.ac-mail__row[aria-current="true"]::before { content: ""; position: absolute; z-index: 2; inset-block: var(--ac-s-2); inset-inline-start: 0; inline-size: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--ac-ink); }
.ac-mail__rowin > .ac-mail__check { margin-block-start: 0.85rem; }
.ac-mail__star { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; flex: none; margin-block-start: 0.85rem; border-radius: 50%; color: var(--ac-faint); transition: color var(--ac-dur-2), transform var(--ac-dur-2) var(--ac-ease-spring), background var(--ac-dur-2); }
.ac-mail__star:hover { color: var(--ac-text); background: var(--ac-hover); transform: scale(1.1); }
.ac-mail__star:active { transform: scale(0.85); }
.ac-mail__star[aria-pressed="true"] { color: var(--ac-warning); }
.ac-mail__star[aria-pressed="true"] .ac-icon { fill: currentColor; animation: ac-mail-pop var(--ac-dur-4) var(--ac-ease-spring); }
@keyframes ac-mail-pop { 50% { transform: scale(1.35); } }
.ac-mail__star .ac-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.ac-mail__open { display: flex; align-items: flex-start; gap: var(--ac-s-3); flex: 1; min-width: 0; padding: var(--ac-s-3) var(--ac-s-2); text-align: start; -webkit-touch-callout: none; user-select: none; }
.ac-mail__open > .ac-avatar { margin-block-start: 2px; }
.ac-mail__rowmain { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ac-mail__rowtop { display: flex; align-items: center; gap: var(--ac-s-2); min-width: 0; font-size: var(--ac-fs-sm); }
.ac-mail__from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ac-fw-medium); color: var(--ac-text-soft); }
.ac-mail__n { flex: none; color: var(--ac-muted); font-size: var(--ac-fs-2xs); font-variant-numeric: tabular-nums; }
.ac-mail__draft { flex: none; color: var(--ac-danger); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); }
.ac-mail__imp { inline-size: 0.85rem; block-size: 0.85rem; color: var(--ac-danger); flex: none; }
.ac-mail__clip { inline-size: 0.85rem; block-size: 0.85rem; color: var(--ac-faint); flex: none; }
.ac-mail__rowtop time { margin-inline-start: auto; flex: none; color: var(--ac-faint); font-size: var(--ac-fs-2xs); font-variant-numeric: tabular-nums; }
.ac-mail__subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-text-soft); font-size: var(--ac-fs-sm); }
.ac-mail__snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-mail__row[data-unread] .ac-mail__from, .ac-mail__row[data-unread] .ac-mail__subj { color: var(--ac-text); font-weight: var(--ac-fw-bold); }
.ac-mail__row[data-unread] .ac-mail__rowtop time { color: var(--ac-accent-ink); font-weight: var(--ac-fw-semibold); }
.ac-mail__row[data-unread]::after { content: ""; position: absolute; inset-inline-start: 0.35rem; inset-block-start: 1.6rem; inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: var(--ac-accent); }
.ac-mail__list[data-density="compact"] .ac-mail__open { padding-block: var(--ac-s-2); }
.ac-mail__list[data-density="compact"] .ac-mail__open > .ac-avatar, .ac-mail__list[data-density="compact"] .ac-mail__snip { display: none; }
.ac-mail__list[data-density="compact"] :is(.ac-mail__star, .ac-mail__rowin > .ac-mail__check) { margin-block-start: 0.4rem; }
.ac-mail__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-block-start: 3px; }
.ac-mail__tag { display: inline-flex; align-items: center; gap: 2px; block-size: 1.25rem; padding-inline: 0.45rem; border-radius: var(--ac-r-xs); background: color-mix(in oklab, var(--_tone) 14%, transparent); color: color-mix(in oklab, var(--_tone) 75%, var(--ac-text)); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); }
.ac-mail__tag button { display: grid; place-items: center; inline-size: 1rem; block-size: 1rem; border-radius: 50%; opacity: 0.6; }
.ac-mail__tag button:hover { opacity: 1; background: color-mix(in oklab, var(--_tone) 22%, transparent); }
.ac-mail__tag .ac-icon { inline-size: 0.7rem; block-size: 0.7rem; }
.ac-mail__when-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--ac-info-ink); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); }
.ac-mail__when-tag .ac-icon { inline-size: 0.75rem; block-size: 0.75rem; }
.ac-mail__hover { position: absolute; inset-block-start: var(--ac-s-2); inset-inline-end: var(--ac-s-2); display: flex; gap: 1px; padding: 2px; border-radius: var(--ac-r-pill); background: var(--ac-surface-1); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity var(--ac-dur-2), transform var(--ac-dur-2) var(--ac-ease); }
.ac-mail__hover button { display: grid; place-items: center; inline-size: 1.85rem; block-size: 1.85rem; border-radius: 50%; color: var(--ac-muted); transition: background var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-1); }
.ac-mail__hover button:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-mail__hover button:active { transform: scale(0.9); }
.ac-mail__hover .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) { .ac-mail__row:hover .ac-mail__hover, .ac-mail__row:focus-within .ac-mail__hover { opacity: 1; pointer-events: auto; transform: none; } }
.ac-mail__empty, .ac-mail__pick { display: grid; place-items: center; align-content: center; gap: var(--ac-s-2); min-block-size: 16rem; padding: var(--ac-s-6); color: var(--ac-muted); font-size: var(--ac-fs-sm); text-align: center; }
.ac-mail__pick { block-size: 100%; }
.ac-mail__empty strong, .ac-mail__pick strong { color: var(--ac-text); font-size: var(--ac-fs-lg); }
.ac-mail__empty .ac-icon, .ac-mail__pick .ac-icon { color: var(--ac-faint); }

/* reader */
.ac-mail__reader { display: flex; flex-direction: column; background: var(--ac-surface-1); }
.ac-mail__rbar { display: flex; align-items: center; gap: 2px; min-block-size: 3.5rem; padding: var(--ac-s-2) var(--ac-s-3); border-block-end: 1px solid var(--ac-border); }
.ac-mail .ac-mail__back { display: none; }
.ac-mail__rbody { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--ac-s-5) var(--ac-s-6) var(--ac-s-8); scrollbar-width: thin; }
.ac-mail__rbody.is-in { animation: ac-fade-up var(--ac-dur-4) var(--ac-ease-out) both; }
.ac-mail__subject { display: flex; align-items: flex-start; gap: var(--ac-s-1); }
.ac-mail__subject h2 { flex: 1; min-width: 0; font-size: var(--ac-fs-2xl); font-weight: var(--ac-fw-semibold); line-height: var(--ac-lh-snug); letter-spacing: -0.015em; }
.ac-mail__subject .ac-mail__star { margin: 0; }
.ac-mail__rbody > .ac-mail__tags { margin-block: var(--ac-s-2) 0; }
.ac-mail__thread { display: grid; gap: var(--ac-s-3); margin-block-start: var(--ac-s-5); }
.ac-mail__msg { display: grid; gap: var(--ac-s-4); padding: var(--ac-s-4); border-radius: var(--ac-r-lg); border: 1px solid var(--ac-border); background: var(--ac-surface-1); }
.ac-mail__msg.is-collapsed { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-3) var(--ac-s-4); background: var(--ac-surface-2); border-color: transparent; text-align: start; transition: background var(--ac-dur-2), transform var(--ac-dur-1); }
.ac-mail__msg.is-collapsed:hover { background: var(--ac-surface-3); }
.ac-mail__msg.is-collapsed:active { transform: scale(0.995); }
.ac-mail__msg.is-collapsed .ac-mail__mhead { display: flex; gap: var(--ac-s-3); min-width: 0; flex: 1; font-size: var(--ac-fs-sm); }
.ac-mail__msnip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-muted); }
.ac-mail__msg.is-collapsed time { color: var(--ac-faint); font-size: var(--ac-fs-2xs); flex: none; }
.ac-mail__mtop { display: flex; align-items: flex-start; gap: var(--ac-s-3); }
.ac-mail__mhead { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ac-mail__mhead strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); }
.ac-mail__mhead strong small { color: var(--ac-muted); font-weight: var(--ac-fw-regular); font-size: var(--ac-fs-xs); }
.ac-mail__tolink { display: inline-flex; align-items: center; gap: 2px; justify-self: start; max-inline-size: 100%; color: var(--ac-muted); font-size: var(--ac-fs-xs); border-radius: var(--ac-r-xs); transition: color var(--ac-dur-2); }
.ac-mail__tolink:hover { color: var(--ac-text); }
.ac-mail__tolink > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-mail__tolink .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; transition: transform var(--ac-dur-2); }
.ac-mail__tolink[aria-expanded="true"] .ac-icon { transform: rotate(180deg); }
.ac-mail__mtime { color: var(--ac-muted); font-size: var(--ac-fs-xs); white-space: nowrap; padding-block-start: 0.35rem; }
.ac-mail__mtools { display: flex; gap: 1px; }
.ac-mail__details { display: grid; gap: var(--ac-s-1); margin: 0; padding: var(--ac-s-3); border-radius: var(--ac-r-md); background: var(--ac-surface-2); font-size: var(--ac-fs-xs); animation: ac-fade-up var(--ac-dur-3) var(--ac-ease-out) both; }
.ac-mail__details[hidden] { display: none; }
.ac-mail__details > div { display: grid; grid-template-columns: 5rem 1fr; gap: var(--ac-s-2); }
.ac-mail__details dt { color: var(--ac-muted); }
.ac-mail__details dd { margin: 0; overflow-wrap: anywhere; }
.ac-mail__body { max-inline-size: 72ch; color: var(--ac-text); font-size: var(--ac-fs-md); line-height: var(--ac-lh-normal); overflow-wrap: anywhere; }
.ac-mail__body > * + * { margin-block-start: var(--ac-s-3); }
.ac-mail__body p { margin: 0; }
.ac-mail__body ul, .ac-mail__body ol { margin: 0; padding-inline-start: var(--ac-s-6); }
.ac-mail__body a { color: var(--ac-info); text-decoration: underline; text-underline-offset: 2px; }
.ac-mail__body code { padding: 1px 0.35rem; border-radius: var(--ac-r-xs); background: var(--ac-surface-2); font-family: var(--ac-font-mono); font-size: 0.9em; }
.ac-mail__body blockquote, .ac-mail__editor blockquote { margin: 0; padding-inline-start: var(--ac-s-3); border-inline-start: 3px solid var(--ac-border-strong); color: var(--ac-text-soft); }
.ac-mail__atts { display: grid; gap: var(--ac-s-2); padding-block-start: var(--ac-s-3); border-block-start: 1px solid var(--ac-border); }
.ac-mail__atthead { display: flex; align-items: center; gap: var(--ac-s-2); color: var(--ac-muted); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); }
.ac-mail__atthead .ac-icon { inline-size: 0.85rem; block-size: 0.85rem; }
.ac-mail__attgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--ac-s-2); }
.ac-mail__att { position: relative; display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2); border-radius: var(--ac-r-md); border: 1px solid var(--ac-border); background: var(--ac-surface-1); font-size: var(--ac-fs-sm); transition: transform var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2), border-color var(--ac-dur-2); }
.ac-mail__att:hover { transform: translateY(-2px); box-shadow: var(--ac-shadow-md); border-color: var(--ac-border-strong); }
.ac-mail__att:active { transform: var(--ac-press); }
.ac-mail__attart { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: var(--ac-r-sm); background: var(--ac-surface-2); color: var(--ac-text-soft); }
.ac-mail__att[data-kind="pdf"] .ac-mail__attart { background: var(--ac-danger-soft); color: var(--ac-danger-ink); }
.ac-mail__att[data-kind="image"] .ac-mail__attart { background: linear-gradient(135deg, color-mix(in oklab, var(--ac-info) 60%, var(--ac-surface-1)), color-mix(in oklab, var(--ac-accent) 50%, var(--ac-surface-1))); color: #fff; }
.ac-mail__attmeta { display: grid; flex: 1; min-width: 0; }
.ac-mail__attmeta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ac-fw-semibold); }
.ac-mail__attmeta small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-mail__attdl { color: var(--ac-faint); transition: color var(--ac-dur-2), transform var(--ac-dur-2) var(--ac-ease); }
.ac-mail__att:hover .ac-mail__attdl { color: var(--ac-text); transform: translateY(2px); }
.ac-mail__actions { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); padding-block-start: var(--ac-s-2); }

/* settings */
.ac-mail__settings { flex: 1; min-block-size: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--ac-s-4); padding: var(--ac-s-4); }
.ac-mail__setgroup { display: grid; max-inline-size: 44rem; border-radius: var(--ac-r-lg); border: 1px solid var(--ac-border); background: var(--ac-surface-1); }
.ac-mail__setrow { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-4); min-block-size: 3.75rem; padding: var(--ac-s-3) var(--ac-s-4); }
.ac-mail__setrow + .ac-mail__setrow { border-block-start: 1px solid var(--ac-border); }
.ac-mail__setrow > div, .ac-mail__setlabel { display: grid; gap: 2px; font-size: var(--ac-fs-sm); }
.ac-mail__setrow small, .ac-mail__setlabel small { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-mail__setlabel { padding: var(--ac-s-4) var(--ac-s-4) var(--ac-s-2); }
.ac-mail__select { inline-size: auto; min-inline-size: 10rem; }
.ac-mail__sig { margin: 0 var(--ac-s-4) var(--ac-s-4); inline-size: auto; resize: vertical; }

/* filters popover */
.ac-mail__filters { display: grid; gap: var(--ac-s-3); inline-size: 17rem; padding: var(--ac-s-4); }
.ac-mail__flabel { display: grid; gap: var(--ac-s-1); font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-mail__ffoot { display: flex; justify-content: space-between; gap: var(--ac-s-2); }

/* compose window */
.ac-mail__composer { position: fixed; inset-block-end: 0; inset-inline-end: var(--ac-s-6); z-index: var(--ac-z-drawer); inline-size: min(36rem, calc(100vw - 2rem)); animation: ac-mail-up 320ms var(--ac-ease-out) both; }
.ac-mail__composer[hidden] { display: none; }
.ac-mail__composer[data-closing] { animation: ac-mail-down 200ms var(--ac-ease-in) both; }
@keyframes ac-mail-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes ac-mail-down { to { transform: translateY(40px); opacity: 0; } }
.ac-mail__cwin { display: flex; flex-direction: column; block-size: min(34rem, calc(100dvh - 5rem)); overflow: hidden; border-start-start-radius: var(--ac-r-xl); border-start-end-radius: var(--ac-r-xl); background: var(--ac-elevated, var(--ac-surface-1)); border: 1px solid var(--ac-border); border-block-end: 0; box-shadow: var(--ac-shadow-xl); transition: block-size var(--ac-dur-4) var(--ac-ease-out); }
.ac-mail__composer[data-min] .ac-mail__cwin { block-size: 3rem; }
.ac-mail__composer[data-min] { inline-size: 20rem; }
.ac-mail__composer[data-max] { inset: 4vh 0 0; margin-inline: auto; inline-size: min(64rem, 94vw); }
.ac-mail__composer[data-max] .ac-mail__cwin { block-size: 92vh; border-radius: var(--ac-r-xl); border-block-end: 1px solid var(--ac-border); }
.ac-mail__chead { display: flex; align-items: center; gap: 2px; min-block-size: 3rem; padding-inline: var(--ac-s-4) var(--ac-s-2); background: var(--ac-ink); color: var(--ac-ink-contrast); cursor: default; }
.ac-mail__composer[data-min] .ac-mail__chead { cursor: pointer; }
.ac-mail__chead strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-mail__chead .ac-mail__ib { color: inherit; opacity: 0.8; }
.ac-mail__chead .ac-mail__ib:hover { opacity: 1; background: color-mix(in oklab, var(--ac-ink-contrast) 14%, transparent); }
.ac-mail__cbody { position: relative; display: flex; flex-direction: column; flex: 1; min-block-size: 0; overflow-y: auto; }
.ac-mail__crow { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 2.75rem; padding-inline: var(--ac-s-4); border-block-end: 1px solid var(--ac-border); }
.ac-mail__crow[hidden] { display: none; }
.ac-mail__crow > label { flex: none; min-inline-size: 3.5rem; color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-mail__chips-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1; min-width: 0; padding-block: 0.35rem; cursor: text; }
.ac-mail__chips-in[data-invalid] { box-shadow: inset 0 -2px 0 var(--ac-danger); }
.ac-mail__chips-in input { flex: 1; min-inline-size: 8rem; border: 0; outline: 0; background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-sm); }
.ac-mail__chip { display: inline-flex; align-items: center; gap: 5px; block-size: 1.75rem; padding-inline: 2px 4px; border-radius: var(--ac-r-pill); background: var(--ac-surface-2); border: 1px solid var(--ac-border); font-size: var(--ac-fs-xs); animation: ac-mail-pop 300ms var(--ac-ease-spring); }
.ac-mail__chip .ac-avatar { --ac-avatar: 1.4rem; }
.ac-mail__chip button { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; color: var(--ac-muted); }
.ac-mail__chip button:hover { background: var(--ac-surface-3); color: var(--ac-text); }
.ac-mail__chip .ac-icon { inline-size: 0.75rem; block-size: 0.75rem; }
.ac-mail__ccbtn { flex: none; padding: 0.2rem 0.45rem; border-radius: var(--ac-r-xs); color: var(--ac-muted); font-size: var(--ac-fs-xs); transition: background var(--ac-dur-2), color var(--ac-dur-2); }
.ac-mail__ccbtn:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-mail__ccbtn[hidden] { display: none; }
.ac-mail__suggest { position: absolute; inset-block-start: var(--_top, 2.75rem); inset-inline: var(--ac-s-4); z-index: 3; display: grid; padding: var(--ac-s-1); border-radius: var(--ac-r-md); background: var(--ac-elevated, var(--ac-surface-1)); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-lg); animation: ac-fade-up var(--ac-dur-2) var(--ac-ease-out) both; }
.ac-mail__suggest[hidden] { display: none; }
.ac-mail__suggest button { display: flex; align-items: center; gap: var(--ac-s-2); padding: var(--ac-s-2); border-radius: var(--ac-r-sm); text-align: start; font-size: var(--ac-fs-sm); }
.ac-mail__suggest button > span { display: grid; min-width: 0; }
.ac-mail__suggest small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-mail__suggest button:hover, .ac-mail__suggest button[aria-selected="true"] { background: var(--ac-hover); }
.ac-mail__csubj { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); }
.ac-mail__rte { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: var(--ac-s-1) var(--ac-s-3); border-block-end: 1px solid var(--ac-border); }
.ac-mail__rte button { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--ac-r-sm); color: var(--ac-text-soft); transition: background var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-1); }
.ac-mail__rte button:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-mail__rte button:active { transform: scale(0.9); }
.ac-mail__rte button[aria-pressed="true"] { background: var(--ac-surface-3); color: var(--ac-text); }
.ac-mail__rte .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-mail__editor { flex: 1; min-block-size: 9rem; padding: var(--ac-s-4); outline: none; font-size: var(--ac-fs-md); line-height: var(--ac-lh-normal); overflow-wrap: anywhere; }
.ac-mail__editor > * + * { margin-block-start: var(--ac-s-2); }
.ac-mail__editor p { margin: 0; }
.ac-mail__editor ul, .ac-mail__editor ol { margin: 0; padding-inline-start: var(--ac-s-6); }
.ac-mail__editor a { color: var(--ac-info); text-decoration: underline; }
.ac-mail__sigblock { margin-block-start: var(--ac-s-4); color: var(--ac-muted); font-size: var(--ac-fs-sm); user-select: none; }
.ac-mail__cfiles { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); padding: 0 var(--ac-s-4) var(--ac-s-3); }
.ac-mail__cfiles:empty { display: none; }
.ac-mail__cfile { position: relative; display: inline-flex; align-items: center; gap: var(--ac-s-2); max-inline-size: 15rem; padding: var(--ac-s-2) var(--ac-s-2) var(--ac-s-2) var(--ac-s-3); overflow: hidden; border-radius: var(--ac-r-md); background: var(--ac-surface-2); font-size: var(--ac-fs-xs); animation: ac-mail-pop 300ms var(--ac-ease-spring); }
.ac-mail__cfile > span { display: grid; min-width: 0; }
.ac-mail__cfile > span bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ac-fw-semibold); }
.ac-mail__cfile small { color: var(--ac-muted); }
.ac-mail__cfile button { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; flex: none; border-radius: 50%; color: var(--ac-muted); }
.ac-mail__cfile button:hover { background: var(--ac-surface-3); color: var(--ac-text); }
.ac-mail__prog { position: absolute; inset-inline-start: 0; inset-block-end: 0; block-size: 3px; inline-size: 100%; background: var(--ac-accent); transform-origin: left; transform: scaleX(1); opacity: 0; transition: opacity var(--ac-dur-2); }
[dir="rtl"] .ac-mail__prog { transform-origin: right; }
.ac-mail__cfile[data-uploading] .ac-mail__prog { opacity: 1; animation: ac-mail-prog 1.4s var(--ac-ease-out) both; }
@keyframes ac-mail-prog { from { transform: scaleX(0); } to { transform: scaleX(0.9); } }
.ac-mail__cfoot { display: flex; align-items: center; gap: var(--ac-s-1); padding: var(--ac-s-3); border-block-start: 1px solid var(--ac-border); }
.ac-mail__sendgroup { display: inline-flex; }
.ac-mail__sendgroup .ac-btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.ac-mail__sendmore { padding-inline: var(--ac-s-2); border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start: 1px solid color-mix(in oklab, var(--ac-ink-contrast) 25%, transparent); }
.ac-mail__saved { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-muted); font-size: var(--ac-fs-2xs); }

/* tablet: icon rail */
@media (max-width: 1279.98px) {
  .ac-mail { grid-template-columns: 4.25rem minmax(18rem, 22rem) minmax(0, 1fr); }
  .ac-mail[data-settings] { grid-template-columns: 4.25rem minmax(0, 1fr) 0; }
  .ac-mail__rail { align-items: center; padding-inline: var(--ac-s-2); }
  .ac-mail__compose { inline-size: 3rem; padding: 0; }
  .ac-mail__compose span, .ac-mail__folder > span, .ac-mail__fcount, .ac-mail__railhead span, .ac-mail__storage { display: none; }
  .ac-mail__fcount.is-strong { display: block; position: absolute; inset-block-start: 2px; inset-inline-end: 2px; min-inline-size: 1rem; padding: 0 0.25rem; font-size: 0.5625rem; line-height: 1rem; }
  .ac-mail__folder { position: relative; justify-content: center; inline-size: 2.75rem; padding: 0; }
  .ac-mail__railhead { margin-inline: 0; }
}
@media (max-width: 1023.98px) {
  .ac-mail { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); }
  .ac-mail[data-settings] { grid-template-columns: minmax(0, 1fr) 0; }
  .ac-mail > .ac-mail__rail { display: none; }
  .ac-mail__chips { display: flex; }
  .ac-mail__hide-sm { display: none; }
  .ac-mail__rbody { padding-inline: var(--ac-s-4); }
}
@media (max-width: 639.98px) {
  .ac-mail[data-stacked] { display: block; block-size: auto; overflow: visible; background: none; border: 0; border-radius: 0; }
  .ac-mail[data-stacked] > .ac-mail__listpane { border: 0; }
  .ac-mail[data-stacked] .ac-mail__lhead { padding: 0 0 var(--ac-s-2); }
  .ac-mail[data-stacked] .ac-mail__ltitle { display: none; }
  .ac-mail[data-stacked] .ac-mail__search, .ac-mail[data-stacked] .ac-mail__searchrow .ac-mail__ib { background: var(--ac-surface-1); border-color: var(--ac-border); }
  .ac-mail[data-stacked] .ac-mail__toolbar { margin-inline: 0; padding-inline: var(--ac-s-1); border: 0; border-radius: var(--ac-r-pill); }
  .ac-mail[data-stacked] .ac-mail__list, .ac-mail[data-stacked] .ac-mail__settings { overflow: visible; border-radius: var(--ac-r-xl); background: var(--ac-surface-1); border: 1px solid var(--ac-border); }
  .ac-mail[data-stacked] .ac-mail__settings { padding: var(--ac-s-2); background: none; border: 0; }
  .ac-mail[data-stacked] .ac-mail__row:last-child { border-block-end: 0; }
  .ac-mail__rowin > .ac-mail__check { display: none; }
  .ac-mail[data-selecting] .ac-mail__rowin > .ac-mail__check { display: inline-grid; }
  .ac-mail__hover { display: none; }
  .ac-mail[data-stacked] > .ac-split__pane.ac-mail__reader { padding-block-start: 0; background: var(--ac-surface-1); }
  .ac-mail[data-stacked] .ac-mail__rbar { padding-block-start: calc(var(--ac-s-2) + var(--ac-safe-top)); min-block-size: calc(3.5rem + var(--ac-safe-top)); padding-inline: var(--ac-s-1); }
  .ac-mail[data-stacked] .ac-mail__back { display: inline-grid; margin-inline-end: auto; }
  .ac-mail[data-stacked] .ac-mail__rbar .ac-mail__sep, .ac-mail[data-stacked] .ac-mail__rbar [data-ract="print"] { display: none; }
  .ac-mail[data-stacked] .ac-mail__rbody { padding: var(--ac-s-4) var(--ac-s-4) calc(var(--ac-s-8) + var(--ac-safe-bottom)); }
  .ac-mail__subject h2 { font-size: var(--ac-fs-xl); }
  .ac-mail__msg { padding: var(--ac-s-3); }
  .ac-mail__mtime { display: none; }
  .ac-mail__composer, .ac-mail__composer[data-max], .ac-mail__composer[data-min] { inset: 0; inline-size: auto; margin: 0; z-index: var(--ac-z-modal); animation-name: ac-mail-sheet; }
  @keyframes ac-mail-sheet { from { transform: translateY(100%); } }
  .ac-mail__cwin, .ac-mail__composer[data-max] .ac-mail__cwin, .ac-mail__composer[data-min] .ac-mail__cwin { block-size: 100%; border-radius: 0; border: 0; padding-block-end: var(--ac-safe-bottom); }
  .ac-mail__chead { min-block-size: calc(3.25rem + var(--ac-safe-top)); padding-block-start: var(--ac-safe-top); }
  .ac-mail__hide-phone { display: none; }
}


/* ==== modules/maps/maps.css ==== */
/* AraminConsole — maps module (src/modules/maps). Tokens only; the map canvas is always LTR internally
   (JS-measured positions), controls use logical corners so they mirror in RTL. */
:root { --ac-map-css: 1; }

.ac-map {
  --_ctl: var(--ac-chrome-bg);
  --_gap: var(--ac-s-3);
  --ac-map-pad-top: 0px; --ac-map-pad-bottom: 0px; --ac-map-pad-start: 0px; --ac-map-pad-end: 0px;
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  min-block-size: 16rem;
  border-radius: var(--ac-r-xl);
  background: var(--ac-surface-2, var(--ac-bg-subtle));
  color: var(--ac-text);
  contain: layout paint;
  -webkit-tap-highlight-color: transparent;
}
.ac-map[data-fullscreen], .ac-map:fullscreen { position: fixed; inset: 0; z-index: var(--ac-z-modal); border-radius: 0; min-block-size: 100dvh; }
.ac-map:fullscreen { position: relative; }

.ac-map__viewport {
  position: absolute; inset: 0; overflow: hidden; direction: ltr;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab; outline: none;
}
.ac-map[data-static] .ac-map__viewport { cursor: default; touch-action: auto; }
.ac-map[data-dragging] .ac-map__viewport { cursor: grabbing; }
.ac-map[data-drawing] .ac-map__viewport { cursor: crosshair; }
.ac-map__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--ac-ring, var(--ac-accent)); }

/* plain grid: offline / loading fallback that pans and zooms with the map */
.ac-map__grid {
  position: absolute; left: -128px; top: -128px; width: calc(100% + 512px); height: calc(100% + 512px);
  transform-origin: 0 0; pointer-events: none;
  background-image:
    linear-gradient(var(--ac-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--ac-border) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 128px 128px;
}
.ac-map[data-no-tiles] .ac-map__grid, .ac-map[data-offline] .ac-map__grid { opacity: 1; }

.ac-map__tiles, .ac-map__overlay, .ac-map__float { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ac-map__level { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.ac-map__tile {
  position: absolute; left: 0; top: 0; width: 257px; height: 257px; max-width: none;
  opacity: 0; transition: opacity 220ms var(--ac-ease); pointer-events: none; user-select: none;
}
.ac-map__tile.is-loaded { opacity: 1; }
.ac-map__tile[data-failed] { visibility: hidden; }
.ac-map[data-muted] .ac-map__tiles { filter: saturate(0.5) contrast(1.03); }
.ac-map[data-dark-filter] .ac-map__tiles { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.6); }

.ac-map__svg { position: absolute; left: 0; top: 0; overflow: visible; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.ac-map__heat { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.ac-map__float { will-change: transform; }
.ac-map__pane { position: absolute; left: 0; top: 0; }

/* ---- vector shapes ------------------------------------------------- */
.ac-map-shape { --_c: var(--ac-ink); --_w: 3px; --_fo: 0.12; }
.ac-map-shape[data-tone="accent"] { --_c: var(--ac-accent); }
.ac-map-shape[data-tone="success"] { --_c: var(--ac-success); }
.ac-map-shape[data-tone="warning"] { --_c: var(--ac-warning); }
.ac-map-shape[data-tone="danger"] { --_c: var(--ac-danger); }
.ac-map-shape[data-tone="info"] { --_c: var(--ac-info); }
.ac-map-shape[data-tone="neutral"] { --_c: var(--ac-muted); }
.ac-map-shape__path { fill: none; stroke: var(--_c); stroke-width: var(--_w); stroke-linecap: round; stroke-linejoin: round; transition: stroke-width var(--ac-dur-1) var(--ac-ease), fill-opacity var(--ac-dur-1) var(--ac-ease); }
.ac-map-shape__case { fill: none; stroke: var(--ac-surface-1, #fff); stroke-width: calc(var(--_w) + 4px); stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; }
.ac-map-shape--polygon .ac-map-shape__path, .ac-map-shape--circle .ac-map-shape__path { fill: var(--_c); fill-opacity: var(--_fo); fill-rule: evenodd; --_w: 2px; }
.ac-map-shape[data-interactive] .ac-map-shape__path { pointer-events: visiblePainted; cursor: pointer; }
.ac-map-shape--line[data-interactive] .ac-map-shape__path { pointer-events: stroke; }
.ac-map-shape--dash .ac-map-shape__path { stroke-dasharray: 6 8; --_w: 2px; }
.ac-map-shape--flow .ac-map-shape__path { stroke-dasharray: 1 11; stroke-width: calc(var(--_w) + 1px); animation: ac-map-flow 900ms linear infinite; }
@keyframes ac-map-flow { to { stroke-dashoffset: -12; } }
.ac-map-shape--guide .ac-map-shape__path { stroke-dasharray: 4 6; --_w: 1.5px; opacity: 0.7; }
.ac-map-shape--drawing .ac-map-shape__path { --_fo: 0.1; }
.ac-map-shape--measure .ac-map-shape__path { stroke-dasharray: 8 6; --_w: 2.5px; }
.ac-map-shape--accuracy .ac-map-shape__path { --_w: 1px; --_fo: 0.12; }
.ac-map-shape.is-selected .ac-map-shape__path { --_w: 3px; --_fo: 0.22; stroke-dasharray: 7 5; }
@media (hover: hover) and (pointer: fine) {
  .ac-map-shape[data-interactive]:hover .ac-map-shape__path { --_fo: 0.22; stroke-width: calc(var(--_w) + 1px); }
}

/* ---- markers ------------------------------------------------------- */
.ac-map-marker { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; outline: none; }
.ac-map-marker[hidden] { display: none; }
.ac-map-marker[aria-hidden="true"]:not(.ac-map-handle-m) { pointer-events: none; }
.ac-map-marker__in { position: absolute; left: 0; top: 0; }
.ac-map-marker:focus-visible .ac-map-marker__in > :first-child { outline: 2px solid var(--ac-accent); outline-offset: 3px; border-radius: var(--ac-r-pill); }
.ac-map-marker[data-kind="pin"]:hover, .ac-map-marker:focus-visible { z-index: 5; }

.ac-map-pin { --_c: var(--ac-ink); --_i: var(--ac-ink-contrast); position: absolute; left: -16px; top: -43px; width: 32px; height: 42px; display: block; cursor: pointer; transform-origin: 50% 100%; transition: transform var(--ac-dur-1) var(--ac-ease); filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.22)); }
.ac-map-marker[data-tone="accent"] .ac-map-pin { --_c: var(--ac-accent); --_i: var(--ac-accent-contrast, #fff); }
.ac-map-marker[data-tone="success"] .ac-map-pin { --_c: var(--ac-success); --_i: #fff; }
.ac-map-marker[data-tone="warning"] .ac-map-pin { --_c: var(--ac-warning); --_i: #fff; }
.ac-map-marker[data-tone="danger"] .ac-map-pin { --_c: var(--ac-danger); --_i: #fff; }
.ac-map-marker[data-tone="neutral"] .ac-map-pin { --_c: var(--ac-muted); --_i: #fff; }
.ac-map-pin__shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--_c); stroke: var(--ac-surface-1, #fff); stroke-width: 2; }
.ac-map-pin__icon { position: absolute; left: 0; top: 4px; width: 32px; height: 24px; display: grid; place-items: center; color: var(--_i); }
.ac-map-pin__icon .ac-icon { width: 15px; height: 15px; }
.ac-map-pin__icon i { width: 9px; height: 9px; border-radius: 50%; background: var(--_i); }
.ac-map-pin__shadow { position: absolute; left: -8px; top: -3px; width: 16px; height: 6px; border-radius: 50%; background: rgb(0 0 0 / 0.22); filter: blur(1.5px); transition: transform var(--ac-dur-1) var(--ac-ease), opacity var(--ac-dur-1) var(--ac-ease); }
@media (hover: hover) and (pointer: fine) {
  .ac-map-marker:hover .ac-map-pin { transform: translateY(-3px) scale(1.06); }
  .ac-map-marker:hover .ac-map-pin__shadow { transform: scale(0.8); opacity: 0.7; }
}
.ac-map-marker:active .ac-map-pin { transform: scale(0.94); transition-duration: var(--ac-dur-0); }
.ac-map-marker[data-dragging] .ac-map-pin { transform: translateY(-10px) scale(1.06); }
.ac-map-marker[data-dragging] .ac-map-pin__shadow { transform: scale(0.65); opacity: 0.5; }

.ac-map-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--ac-ink); box-shadow: 0 0 0 3px var(--ac-surface-1, #fff), 0 2px 6px rgb(0 0 0 / 0.25); cursor: pointer; }
.ac-map-marker[data-tone="accent"] .ac-map-dot { background: var(--ac-accent); }

.ac-map-me { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--ac-accent); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgb(0 0 0 / 0.3); }
.ac-map-me i { position: absolute; inset: -3px; border-radius: 50%; background: var(--ac-accent); opacity: 0.35; animation: ac-map-pulse 1.8s var(--ac-ease-out) infinite; }
@keyframes ac-map-pulse { from { transform: scale(1); opacity: 0.45; } to { transform: scale(3.2); opacity: 0; } }

.ac-map-veh { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; cursor: pointer; }
.ac-map-veh__body { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ac-ink); color: var(--ac-ink-contrast); box-shadow: 0 0 0 3px var(--ac-surface-1, #fff), 0 4px 10px rgb(0 0 0 / 0.25); transition: transform var(--ac-dur-1) var(--ac-ease); }
.ac-map-veh__body .ac-icon { width: 16px; height: 16px; }
.ac-map-veh__dir { position: absolute; inset: -9px; border-radius: 50%; }
.ac-map-veh__dir::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -6px; border: 6px solid transparent; border-top-width: 0; border-bottom: 8px solid var(--ac-accent); }
.ac-map-veh__label { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--ac-fs-2xs, 10px); font-weight: 600; padding: 1px 6px; border-radius: var(--ac-r-pill); background: var(--ac-chrome-bg); color: var(--ac-text); box-shadow: var(--ac-shadow-xs); }
.ac-map-marker[data-tone="accent"] .ac-map-veh__body { background: var(--ac-accent); color: #fff; }
.ac-map-marker[data-tone="neutral"] .ac-map-veh__body { background: var(--ac-muted); }
.ac-map-marker[data-tone="neutral"] .ac-map-veh__dir { display: none; }
.ac-map-marker:active .ac-map-veh__body { transform: scale(0.92); }

.ac-map-cluster {
  --_s: 34px; position: absolute; left: calc(var(--_s) / -2); top: calc(var(--_s) / -2); width: var(--_s); height: var(--_s);
  border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--ac-ink); color: var(--ac-ink-contrast); font-weight: 700; font-size: var(--ac-fs-xs, 12px); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac-ink) 18%, transparent), 0 0 0 7px color-mix(in srgb, var(--ac-surface-1, #fff) 70%, transparent), 0 4px 12px rgb(0 0 0 / 0.2);
  transition: transform var(--ac-dur-1) var(--ac-ease);
}
.ac-map-cluster[data-size="md"] { --_s: 42px; }
.ac-map-cluster[data-size="lg"] { --_s: 50px; background: var(--ac-accent); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--ac-accent) 25%, transparent), 0 4px 14px rgb(0 0 0 / 0.2); }
@media (hover: hover) and (pointer: fine) { .ac-map-marker:hover .ac-map-cluster { transform: scale(1.08); } }
.ac-map-marker:active .ac-map-cluster { transform: scale(0.94); }

.ac-map-label { position: absolute; left: 0; top: -14px; transform: translate(-50%, -100%); white-space: nowrap; padding: 4px 10px; border-radius: var(--ac-r-pill); background: var(--ac-ink); color: var(--ac-ink-contrast); font-size: var(--ac-fs-xs, 12px); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: var(--ac-shadow-md); pointer-events: none; unicode-bidi: plaintext; }
.ac-map-handle { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--ac-surface-1, #fff); border: 2.5px solid var(--ac-ink); box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }
.ac-map-marker.is-first .ac-map-handle { border-color: var(--ac-accent); }
.ac-map-handle-m { z-index: 3; touch-action: none; }
.ac-map-handle-m .ac-map-handle { cursor: grab; transition: transform var(--ac-dur-1) var(--ac-ease); }
.ac-map-handle-m .ac-map-handle::after { content: ""; position: absolute; inset: -13px; border-radius: 50%; } /* 40px touch target */
.ac-map-handle-m.is-mid .ac-map-handle { transform: scale(0.75); opacity: 0.7; border-style: dashed; }
.ac-map-handle-m.is-center .ac-map-handle, .ac-map-handle-m.is-radius .ac-map-handle { border-color: var(--ac-accent); }
.ac-map-handle-m[data-dragging] .ac-map-handle { transform: scale(1.3); cursor: grabbing; opacity: 1; }

/* ---- popup (our popover look) --------------------------------------- */
.ac-map-popup { position: absolute; left: 0; top: 0; z-index: 10; width: 0; height: 0; }
.ac-map-popup[data-state="closed"] { display: none; }
.ac-map-popup__box {
  position: absolute; left: 0; bottom: 10px; translate: -50% 0;
  inline-size: max-content; max-inline-size: min(18rem, 78vw); min-inline-size: 11rem;
  padding: var(--ac-s-3) var(--ac-s-4); padding-inline-end: var(--ac-s-8);
  border-radius: var(--ac-r-2xl, 22px); background: var(--ac-elevated); color: var(--ac-text);
  border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-lg);
  font-size: var(--ac-fs-sm, 13px); line-height: 1.5; text-align: start;
  cursor: auto; user-select: text; -webkit-user-select: text;
  transform-origin: 50% 100%; opacity: 0; transform: translateY(4px) scale(0.96);
  transition: opacity var(--ac-dur-exit, 140ms) var(--ac-ease), transform var(--ac-dur-exit, 140ms) var(--ac-ease);
}
.ac-map-popup--wide .ac-map-popup__box { max-inline-size: min(22rem, 86vw); }
.ac-map-popup__box::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--ac-elevated); border-right: 1px solid var(--ac-border); border-bottom: 1px solid var(--ac-border); transform: rotate(45deg); }
.ac-map-popup[data-state="open"] .ac-map-popup__box { opacity: 1; transform: none; transition-duration: var(--ac-dur-2); }
.ac-map-popup__close { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ac-muted); cursor: pointer; }
.ac-map-popup__close .ac-icon { width: 15px; height: 15px; }
.ac-map-popup__close:focus-visible { outline: 2px solid var(--ac-accent); }
@media (hover: hover) and (pointer: fine) { .ac-map-popup__close:hover { background: var(--ac-hover); color: var(--ac-text); } }
.ac-map-popup__body > :first-child { margin-block-start: 0; }
.ac-map-addr { display: grid; gap: var(--ac-s-1); justify-items: start; }
.ac-map-addr__title { font-weight: 600; }
.ac-map-addr__sub { color: var(--ac-muted); font-size: var(--ac-fs-xs, 12px); }
.ac-map-addr__coords { display: grid; gap: 1px; font-family: var(--ac-font-mono, ui-monospace, monospace); font-size: 11px; color: var(--ac-text-soft); text-align: left; justify-self: stretch; }
.ac-map-addr .ac-btn { margin-block-start: var(--ac-s-1); }
.ac-map-addr .ac-btn[data-done] { color: var(--ac-success-ink, var(--ac-success)); }

/* ---- controls ------------------------------------------------------ */
.ac-map__corner { position: absolute; z-index: 20; display: flex; flex-direction: column; gap: var(--ac-s-2); pointer-events: none; max-inline-size: calc(100% - 2 * var(--_gap)); }
.ac-map__corner > * { pointer-events: auto; }
.ac-map__corner[data-pos^="top"] { inset-block-start: calc(var(--_gap) + var(--ac-map-pad-top)); }
.ac-map__corner[data-pos^="bottom"] { inset-block-end: calc(var(--_gap) + var(--ac-map-pad-bottom)); }
.ac-map__corner[data-pos$="start"] { inset-inline-start: calc(var(--_gap) + var(--ac-map-pad-start)); align-items: flex-start; }
.ac-map__corner[data-pos$="end"] { inset-inline-end: calc(var(--_gap) + var(--ac-map-pad-end)); align-items: flex-end; }
.ac-map__corner[data-pos="bottom-start"] { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }

.ac-map__bar { display: flex; flex-direction: column; padding: 3px; border-radius: var(--ac-r-pill); background: var(--_ctl); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); }
.ac-map__bar--row { flex-direction: row; }
.ac-map__btn {
  inline-size: 38px; block-size: 38px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: transparent; color: var(--ac-text); cursor: pointer; touch-action: manipulation;
  transition: background-color var(--ac-dur-1) var(--ac-ease-hover), color var(--ac-dur-1) var(--ac-ease-hover), transform var(--ac-dur-0) var(--ac-ease);
}
.ac-map__btn .ac-icon { width: 18px; height: 18px; }
.ac-map__btn--solo { background: var(--_ctl); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); inline-size: 44px; block-size: 44px; }
@media (hover: hover) and (pointer: fine) { .ac-map__btn:hover:not(:disabled) { background: var(--ac-pill-bg); } }
.ac-map__btn:active:not(:disabled) { transform: scale(0.9); }
.ac-map__btn:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 1px; }
.ac-map__btn:disabled { color: var(--ac-faint); cursor: default; }
.ac-map__btn[aria-pressed="true"], .ac-map__btn[aria-expanded="true"] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-map__btn[data-state="on"] { color: var(--ac-accent); }
.ac-map__btn[data-state="busy"] .ac-icon { animation: ac-map-spin 1s linear infinite; }
.ac-map__btn[data-state="error"] { color: var(--ac-danger); }
@keyframes ac-map-spin { to { transform: rotate(360deg); } }

.ac-map__scale { inline-size: max-content; display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; border-radius: var(--ac-r-md, 10px); background: var(--ac-glass-bg); backdrop-filter: var(--ac-glass-blur); -webkit-backdrop-filter: var(--ac-glass-blur); font-size: 10px; font-weight: 600; color: var(--ac-text-soft); font-variant-numeric: tabular-nums; pointer-events: none; }
.ac-map__scale-bar { display: block; inline-size: 96px; block-size: 4px; }
.ac-map__scale-bar i { display: block; block-size: 100%; border-radius: 2px; background: var(--ac-ink); transform-origin: 0 50%; transition: transform var(--ac-dur-2) var(--ac-ease); }
[dir="rtl"] .ac-map__scale-bar i { transform-origin: 100% 50%; }
.ac-map__coords { border: 0; padding: 5px 10px; border-radius: var(--ac-r-pill); background: var(--ac-glass-bg); backdrop-filter: var(--ac-glass-blur); -webkit-backdrop-filter: var(--ac-glass-blur); color: var(--ac-text); font: 600 11px/1.3 var(--ac-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.ac-map__coords:focus-visible { outline: 2px solid var(--ac-accent); }
.ac-map__attrib { max-inline-size: min(26rem, 100%); padding: 2px 8px; border-radius: var(--ac-r-pill); background: var(--ac-glass-bg-strong); font-size: 10px; line-height: 1.6; color: var(--ac-text-soft); direction: ltr; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-map__attrib a { color: inherit; text-decoration: underline; text-decoration-color: var(--ac-border-strong); }
.ac-map__corner[data-pos="bottom-end"] { inset-inline-end: 6px; inset-block-end: calc(6px + var(--ac-map-pad-bottom)); }

.ac-map__notice { position: absolute; z-index: 15; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; display: flex; align-items: center; gap: var(--ac-s-2); max-inline-size: 80%; padding: 8px 14px; border-radius: var(--ac-r-pill); background: var(--ac-chrome-bg); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-md); font-size: var(--ac-fs-xs, 12px); color: var(--ac-text-soft); pointer-events: none; }
[dir="rtl"] .ac-map__notice { translate: 50% -50%; }
.ac-map__notice[hidden] { display: none; }
.ac-map__notice .ac-icon { width: 16px; height: 16px; flex: none; }

/* search */
.ac-map__search { position: relative; inline-size: min(20rem, calc(100vw - 7rem)); }
.ac-map__search-field { display: flex; align-items: center; gap: var(--ac-s-2); block-size: 44px; padding-inline: 14px 6px; border-radius: var(--ac-r-pill); background: var(--_ctl); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); color: var(--ac-muted); cursor: text; transition: box-shadow var(--ac-dur-1) var(--ac-ease); }
.ac-map__search-field:focus-within { box-shadow: 0 0 0 3px var(--ac-focus, color-mix(in srgb, var(--ac-accent) 25%, transparent)), var(--ac-shadow-sm); }
.ac-map__search-field .ac-icon { width: 17px; height: 17px; flex: none; }
.ac-map__search input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: none; color: var(--ac-text); font: inherit; font-size: 16px; }
@media (min-width: 640px) { .ac-map__search input { font-size: var(--ac-fs-sm, 14px); } }
.ac-map__search input::-webkit-search-cancel-button { display: none; }
.ac-map__search-clear { inline-size: 32px; block-size: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ac-muted); display: grid; place-items: center; cursor: pointer; }
.ac-map__search-clear[hidden] { display: none; }
.ac-map__results { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: var(--ac-r-xl); background: var(--ac-elevated); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-lg); max-block-size: 18rem; overflow: auto; animation: ac-map-in var(--ac-dur-2) var(--ac-ease); }
.ac-map__results[hidden] { display: none; }
.ac-map__results li { display: flex; gap: var(--ac-s-2); align-items: flex-start; padding: 8px 10px; border-radius: var(--ac-r-md, 12px); cursor: pointer; font-size: var(--ac-fs-sm, 13px); }
.ac-map__results li .ac-icon { width: 16px; height: 16px; margin-block-start: 2px; color: var(--ac-muted); flex: none; }
.ac-map__results li span { display: grid; min-inline-size: 0; }
.ac-map__results li small { color: var(--ac-muted); font-size: var(--ac-fs-xs, 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-map__results li[aria-selected="true"] { background: var(--ac-pill-bg); }
@media (hover: hover) and (pointer: fine) { .ac-map__results li[data-i]:hover { background: var(--ac-hover); } }
.ac-map__results .ac-map__results-empty { color: var(--ac-muted); cursor: default; }
@keyframes ac-map-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }

/* layer switcher */
.ac-map__layers { position: relative; }
.ac-map__panel { position: absolute; inset-block-start: 0; inset-inline-end: calc(100% + 8px); min-inline-size: 13rem; padding: 8px; border-radius: var(--ac-r-xl); background: var(--ac-elevated); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-lg); transform-origin: top right; transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-2) var(--ac-ease), visibility 0s linear 0s; }
[dir="rtl"] .ac-map__panel { transform-origin: top left; }
.ac-map__panel[data-state="closed"] { opacity: 0; visibility: hidden; transform: scale(0.96); transition-duration: var(--ac-dur-exit, 140ms), var(--ac-dur-exit, 140ms), 0s; transition-delay: 0s, 0s, var(--ac-dur-exit, 140ms); pointer-events: none; }
.ac-map__panel-label { padding: 6px 8px 4px; font-size: 11px; font-weight: 600; color: var(--ac-muted); }
.ac-map__opt { display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding: 4px 8px; border-radius: var(--ac-r-md, 12px); font-size: var(--ac-fs-sm, 13px); cursor: pointer; }
.ac-map__opt span { display: flex; align-items: center; gap: 8px; flex: 1; }
.ac-map__opt .ac-icon { width: 16px; height: 16px; color: var(--ac-muted); }
.ac-map__opt input[type="radio"] { accent-color: var(--ac-ink); inline-size: 16px; block-size: 16px; margin: 0; }
.ac-map__opt .ac-switch { order: 2; }
@media (hover: hover) and (pointer: fine) { .ac-map__opt:hover { background: var(--ac-hover); } }

/* draw hint */
.ac-map__hint { position: absolute; z-index: 25; inset-block-end: calc(var(--_gap) + 34px + var(--ac-map-pad-bottom)); inset-inline-start: 50%; translate: -50% 0; display: flex; align-items: center; gap: var(--ac-s-2); flex-wrap: wrap; justify-content: center; max-inline-size: calc(100% - 2rem); padding: 6px 6px 6px 14px; padding-inline: 14px 6px; border-radius: var(--ac-r-pill); background: var(--ac-chrome-bg); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-lg); font-size: var(--ac-fs-xs, 12px); color: var(--ac-text-soft); animation: ac-map-in var(--ac-dur-2) var(--ac-ease); }
[dir="rtl"] .ac-map__hint { translate: 50% 0; }
.ac-map__hint[hidden] { display: none; }
.ac-map__hint-text { font-variant-numeric: tabular-nums; }
.ac-map__hint-acts { display: flex; gap: 4px; }
.ac-map__hint-acts [hidden] { display: none; }

/* ---- location picker ---------------------------------------------- */
.ac-locpick { display: block; }
.ac-locpick__ui { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2); padding-inline-end: var(--ac-s-3); border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg, 16px); background: var(--ac-surface-1, var(--ac-elevated)); }
.ac-locpick__thumb { inline-size: 48px; block-size: 48px; flex: none; border-radius: var(--ac-r-md, 12px); display: grid; place-items: center; color: var(--ac-accent); background: var(--ac-accent-soft); background-image: linear-gradient(var(--ac-border) 1px, transparent 1px), linear-gradient(90deg, var(--ac-border) 1px, transparent 1px); background-size: 12px 12px; }
.ac-locpick[data-empty] .ac-locpick__thumb { color: var(--ac-muted); background-color: var(--ac-pill-bg); }
.ac-locpick__text { display: grid; flex: 1; min-inline-size: 0; font-size: var(--ac-fs-sm, 13px); }
.ac-locpick__text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-locpick[data-empty] .ac-locpick__text b { font-weight: 500; color: var(--ac-muted); }
.ac-locpick__text small { color: var(--ac-muted); font-family: var(--ac-font-mono, ui-monospace, monospace); font-size: 11px; text-align: start; }
[dir="rtl"] .ac-locpick__text small { text-align: end; }

.ac-map-picker { position: relative; block-size: min(60vh, 32rem); margin: calc(var(--ac-s-1) * -1) 0; border-radius: var(--ac-r-xl); overflow: hidden; }
.ac-map-picker__map { position: absolute; inset: 0; border-radius: inherit; }
.ac-map-picker__map .ac-map__corner[data-pos^="bottom"] { inset-block-end: 80px; }
.ac-map-picker__pin { position: absolute; left: 50%; top: 50%; z-index: 18; width: 0; height: 0; pointer-events: none; }
.ac-map-picker__pin .ac-map-pin { --_c: var(--ac-accent); --_i: #fff; transition: transform var(--ac-dur-2) var(--ac-ease-spring, var(--ac-ease)); }
.ac-map-picker__pin .ac-map-pin__shadow { transition: transform var(--ac-dur-2) var(--ac-ease), opacity var(--ac-dur-2) var(--ac-ease); }
.ac-map-picker__pin[data-lift] .ac-map-pin { transform: translateY(-14px); }
.ac-map-picker__pin[data-lift] .ac-map-pin__shadow { transform: scale(0.6); opacity: 0.45; }
.ac-map-picker__bar { position: absolute; z-index: 19; inset-inline: var(--ac-s-3); inset-block-end: var(--ac-s-3); display: flex; align-items: center; gap: var(--ac-s-3); padding: 10px 14px; border-radius: var(--ac-r-xl); background: var(--ac-glass-bg-strong); backdrop-filter: var(--ac-glass-blur); -webkit-backdrop-filter: var(--ac-glass-blur); border: 1px solid var(--ac-glass-border); box-shadow: var(--ac-shadow-md); }
.ac-map-picker__icon { inline-size: 36px; block-size: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ac-accent-soft); color: var(--ac-accent); }
.ac-map-picker__text { display: grid; min-inline-size: 0; font-size: var(--ac-fs-sm, 13px); }
.ac-map-picker__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ac-map-picker__text small { font-family: var(--ac-font-mono, ui-monospace, monospace); font-size: 11px; color: var(--ac-muted); text-align: start; }
[dir="rtl"] .ac-map-picker__text small { text-align: end; }
.ac-map-picker .ac-map { border-radius: inherit; }
.ac-map-picker .ac-map__attrib { max-inline-size: 60%; }
@media (max-width: 639.98px) {
  .ac-map-picker { block-size: 58dvh; }
  .ac-map-picker .ac-map__search { inline-size: calc(100vw - 7.5rem); }
}

@media (max-width: 639.98px) {
  .ac-map { --_gap: var(--ac-s-2); }
  .ac-map__btn { inline-size: 40px; block-size: 40px; }
  .ac-map__attrib { max-inline-size: 58vw; }
  .ac-map__coords { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-map-shape--flow .ac-map-shape__path, .ac-map-me i { animation: none; }
}


/* ==== modules/marketing/marketing.css ==== */
/* Marketing dashboards module (Search Console + GA4-like overview). Tokens only, logical properties. */
.mk { display: grid; gap: var(--ac-gap, var(--ac-s-4)); min-inline-size: 0; }
.mk[aria-busy="true"] .ac-bento { opacity: 0.6; transition: opacity var(--ac-dur-2) var(--ac-ease); }
.mk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2) var(--ac-s-4); }
.mk-bar__note { margin-inline-start: auto; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.mk-compare { min-block-size: var(--ac-control-h-sm); font-size: var(--ac-fs-sm); }
.mk-slot { display: grid; min-inline-size: 0; }
/* the core chart's hidden data table / idle tooltip can be wider than a phone-sized chart: keep them from widening the page */
.mk .ac-chart { overflow-x: clip; overflow-clip-margin: 4px; }
.mk-fill { block-size: 100%; }
.mk-h3 { margin: var(--ac-s-4) 0 var(--ac-s-2); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); color: var(--ac-text-soft); }
.mk-mono { font-family: var(--ac-font-mono); font-size: var(--ac-fs-xs); }

/* ---- metric toggle cards (GSC) */
.mk-toggles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ac-s-2); padding: var(--ac-s-2); }
.mk-toggle { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "c l" "v v" "d d"; align-content: start; gap: var(--ac-s-1) var(--ac-s-2); min-block-size: 6.25rem; padding: var(--ac-s-3) var(--ac-s-4); border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); background: var(--ac-surface-1); color: var(--ac-text); text-align: start; font: inherit; cursor: pointer; transition: background var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2) var(--ac-ease), border-color var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-2) var(--ac-ease-out), box-shadow var(--ac-dur-2) var(--ac-ease); }
.mk-toggle:hover { border-color: var(--_c); transform: translateY(-2px); }
.mk-toggle:active { transform: var(--ac-press, scale(0.97)); }
.mk-toggle:focus-visible { outline: 2px solid var(--_c); outline-offset: 2px; }
.mk-toggle[aria-checked="true"] { background: var(--_c); border-color: var(--_c); color: var(--_on); box-shadow: 0 12px 24px -16px var(--_c); }
.mk-toggle__check { grid-area: c; display: grid; place-items: center; inline-size: 1.125rem; block-size: 1.125rem; border: 1.5px solid currentColor; border-radius: 5px; opacity: 0.85; }
.mk-toggle__check svg { inline-size: 0.8rem; block-size: 0.8rem; opacity: 0; transform: scale(0.6); transition: opacity var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-2) var(--ac-ease-spring, var(--ac-ease-out)); }
.mk-toggle[aria-checked="true"] .mk-toggle__check svg { opacity: 1; transform: none; }
.mk-toggle__label { grid-area: l; font-size: var(--ac-fs-xs); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-toggle__value { grid-area: v; font-size: clamp(1.25rem, 1.8vw, 1.75rem); font-weight: var(--ac-fw-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.mk-toggle__delta { grid-area: d; }
.mk-toggle[aria-checked="true"] .ac-trend { background: rgba(255, 255, 255, 0.22); color: inherit; }

/* ---- custom multi-axis chart */
.mk-chart-slot { block-size: 280px; }
.mk-chart { position: relative; block-size: 100%; min-inline-size: 0; border-radius: var(--ac-r-md); outline: none; touch-action: pan-y; }
.mk-chart:focus-visible { box-shadow: 0 0 0 2px var(--ac-ring, var(--ac-accent)); }
.mk-chart__svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.mk-chart__grid { stroke: var(--ac-chart-grid, var(--ac-border)); stroke-width: 1; shape-rendering: crispEdges; }
.mk-chart__x, .mk-chart__y { font-size: 10.5px; fill: var(--ac-muted); font-variant-numeric: tabular-nums; }
.mk-chart__line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk-chart__line--prev { stroke-dasharray: 4 4; stroke-width: 1.5; opacity: 0.55; }
.mk-chart--enter .mk-chart__line:not(.mk-chart__line--prev) { stroke-dasharray: 1; animation: mk-draw 800ms var(--ac-ease-out) both; }
@keyframes mk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.mk-chart__cross { stroke: var(--ac-border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.mk-chart__dots circle { stroke: var(--ac-surface-1); stroke-width: 2; }
.mk-chart__tip { position: absolute; inset-block-start: var(--ac-s-2); z-index: 2; display: grid; gap: 4px; min-inline-size: 11rem; padding: var(--ac-s-2) var(--ac-s-3); border-radius: var(--ac-r-md); background: var(--ac-elevated); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-md); font-size: var(--ac-fs-xs); pointer-events: none; }
.mk-chart__tip strong { font-weight: var(--ac-fw-semibold); margin-block-end: 2px; }
.mk-chart__tip span { display: flex; align-items: center; gap: var(--ac-s-2); color: var(--ac-text-soft); }
.mk-chart__tip i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; flex: none; }
.mk-chart__tip b { margin-inline-start: auto; color: var(--ac-text); font-variant-numeric: tabular-nums; }

/* ---- tabs + tables */
.mk-tabs-body { padding-block-start: var(--ac-s-2); }
.mk-tabs { display: flex; gap: var(--ac-s-1); overflow-x: auto; scrollbar-width: none; margin-block-end: var(--ac-s-3); padding-block-end: 2px; border-block-end: 1px solid var(--ac-border); }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tab { position: relative; flex: none; min-block-size: var(--ac-touch, 44px); padding-inline: var(--ac-s-3); border: 0; background: none; color: var(--ac-muted); font: inherit; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium, 500); cursor: pointer; border-radius: var(--ac-r-md) var(--ac-r-md) 0 0; transition: color var(--ac-dur-2) var(--ac-ease), background var(--ac-dur-2) var(--ac-ease); }
.mk-tab::after { content: ""; position: absolute; inset-inline: var(--ac-s-2); inset-block-end: -3px; block-size: 2.5px; border-radius: 2px; background: var(--ac-ink); transform: scaleX(0); transition: transform var(--ac-dur-2) var(--ac-ease-out); }
.mk-tab:hover { color: var(--ac-text); background: var(--ac-hover); }
.mk-tab:active { transform: var(--ac-press, scale(0.97)); }
.mk-tab:focus-visible { outline: 2px solid var(--ac-ring, var(--ac-accent)); outline-offset: -2px; }
.mk-tab[aria-selected="true"] { color: var(--ac-text); font-weight: var(--ac-fw-semibold); }
.mk-tab[aria-selected="true"]::after { transform: none; }
.mk-keycell { display: grid; gap: 5px; min-inline-size: 0; max-inline-size: 30rem; }
.mk-keycell:has(.mk-cc) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--ac-s-2); }
.mk-keycell:has(.mk-cc) .mk-meter { grid-column: 2; }
.mk-keycell__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ac-fw-medium, 500); }
.mk-num { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--ac-s-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-num .ac-trend { font-size: var(--ac-fs-2xs); }
.mk-meter { display: block; block-size: 4px; min-inline-size: 3rem; border-radius: 4px; background: var(--ac-surface-3); overflow: hidden; }
.mk-meter i { display: block; inline-size: var(--_w, 0%); block-size: 100%; border-radius: inherit; background: var(--ac-accent); transition: inline-size var(--ac-dur-3, 320ms) var(--ac-ease-out); }
.mk-meter[data-tone="neutral"] i { background: var(--ac-ink); opacity: 0.75; }
.mk-cc { display: inline-grid; place-items: center; min-inline-size: 1.9rem; block-size: 1.25rem; padding-inline: 4px; border-radius: 5px; background: var(--ac-surface-3); color: var(--ac-text-soft); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; font-family: var(--ac-font-mono); direction: ltr; }

/* ---- coverage / links / lists */
.mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ac-s-2); margin-block-end: var(--ac-s-3); }
.mk-big { display: grid; gap: 2px; padding: var(--ac-s-3) var(--ac-s-4); border-radius: var(--ac-r-lg); background: var(--ac-surface-2); }
.mk-big > span { display: flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-xs); color: var(--ac-text-soft); }
.mk-big > span i { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--ac-success); }
.mk-big[data-tone="neutral"] > span i { background: var(--ac-chart-8); box-shadow: inset 0 0 0 1px var(--ac-border-strong); }
.mk-big strong { font-size: var(--ac-fs-2xl, 1.5rem); font-weight: var(--ac-fw-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mk-big small { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.mk-reasons, .mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mk-reasons li, .mk-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(3rem, 30%) 4rem; align-items: center; gap: var(--ac-s-3); min-block-size: 2.5rem; padding-inline: var(--ac-s-2); border-radius: var(--ac-r-md); transition: background var(--ac-dur-1) var(--ac-ease); }
.mk-reasons li { grid-template-columns: minmax(0, 1fr) minmax(3rem, 24%) 3.5rem 1.4rem; }
.mk-reasons li:hover, .mk-list li:hover { background: var(--ac-hover); }
.mk-reasons b, .mk-list b { text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-sm); }
.mk-reasons__t { display: grid; min-inline-size: 0; font-size: var(--ac-fs-sm); }
.mk-reasons__t small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.mk-reasons .ac-trend { padding: 0; inline-size: 1.4rem; block-size: 1.4rem; justify-content: center; }
.mk-list li { grid-template-columns: auto minmax(0, 1fr) minmax(2.5rem, 28%) 3.5rem; }
.mk-list li:not(:has(.mk-cc)) { grid-template-columns: minmax(0, 1fr) minmax(2.5rem, 30%) 3.5rem; }
.mk-list__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-sm); }
.mk-links { display: grid; gap: 0 var(--ac-s-4); }
.mk-links .mk-h3 { margin-block-start: var(--ac-s-3); }

/* ---- Core Web Vitals */
.mk-cwvs { display: grid; gap: var(--ac-s-5, 1.25rem); }
.mk-cwv { display: grid; gap: var(--ac-s-2); }
.mk-cwv__head { display: flex; justify-content: space-between; align-items: center; gap: var(--ac-s-2); }
.mk-cwv__head strong { display: inline-flex; align-items: center; gap: var(--ac-s-2); font-weight: var(--ac-fw-semibold); }
.mk-stack { display: flex; gap: 3px; block-size: 0.875rem; }
.mk-stack i { inline-size: var(--_w); min-inline-size: 4px; border-radius: 4px; background: var(--ac-success); transform-origin: var(--_origin, left); animation: mk-grow 600ms var(--ac-ease-out) both; transition: filter var(--ac-dur-1) var(--ac-ease); }
[dir="rtl"] .mk-stack i { --_origin: right; }
.mk-stack i:hover { filter: brightness(1.1); }
.mk-stack i[data-tone="warning"] { background: var(--ac-warning); animation-delay: 80ms; }
.mk-stack i[data-tone="danger"] { background: var(--ac-danger); animation-delay: 160ms; }
@keyframes mk-grow { from { transform: scaleX(0); } }
.mk-cwv__legend { display: flex; flex-wrap: wrap; gap: var(--ac-s-1) var(--ac-s-4); font-size: var(--ac-fs-xs); color: var(--ac-text-soft); }
.mk-cwv__legend span { display: inline-flex; align-items: center; gap: 6px; }
.mk-cwv__legend i { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 3px; background: var(--ac-success); }
.mk-cwv__legend i[data-tone="warning"] { background: var(--ac-warning); }
.mk-cwv__legend i[data-tone="danger"] { background: var(--ac-danger); }
.mk-cwv__legend b { color: var(--ac-text); font-variant-numeric: tabular-nums; }
.mk-cwv__metrics { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); }
.mk-chipm { display: inline-flex; align-items: center; gap: 6px; min-block-size: 1.75rem; padding-inline: var(--ac-s-3); border-radius: var(--ac-r-pill); background: var(--ac-success-soft); color: var(--ac-success-ink); font-size: var(--ac-fs-xs); }
.mk-chipm[data-tone="warning"] { background: var(--ac-warning-soft); color: var(--ac-warning-ink); }
.mk-chipm[data-tone="danger"] { background: var(--ac-danger-soft); color: var(--ac-danger-ink); }
.mk-chipm b { font-size: 0.66rem; letter-spacing: 0.05em; opacity: 0.8; }

/* ---- overview: KPIs, realtime, campaigns, email, social */
.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ac-gap, var(--ac-s-4)); }
.mk-kpis .ac-stat__value bdi { font-variant-numeric: tabular-nums; }
.mk-rtcard .ac-card__body { display: grid; align-content: start; }
.mk-rt { display: grid; align-content: start; min-inline-size: 0; }
.mk-live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--ac-r-pill); background: var(--ac-success-soft); color: var(--ac-success-ink); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); }
.mk-live i { position: relative; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--ac-success); }
.mk-live i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: mk-ping 1.6s var(--ac-ease-out) infinite; }
@keyframes mk-ping { to { transform: scale(2.6); opacity: 0; } }
.mk-rt__num { margin-block-start: var(--ac-s-3); font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: var(--ac-fw-semibold); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-rt__cap { margin: var(--ac-s-1) 0 var(--ac-s-3); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.mk-rt__bars { display: flex; align-items: flex-end; gap: 3px; block-size: 3.5rem; padding-block-end: var(--ac-s-1); border-block-end: 1px solid var(--ac-border); }
.mk-rt__bars i { flex: 1 1 0; block-size: var(--_h); min-block-size: 3px; border-radius: 3px 3px 1px 1px; background: var(--ac-ink); opacity: 0.85; transition: block-size 500ms var(--ac-ease-out); }
.mk-rt__bars i:last-child { background: var(--ac-accent); opacity: 1; }
.mk-rt__h { margin: var(--ac-s-4) 0 var(--ac-s-1); font-size: var(--ac-fs-xs); color: var(--ac-text-soft); font-weight: var(--ac-fw-semibold); }
.mk-camp { display: flex; align-items: center; gap: var(--ac-s-3); min-inline-size: 0; }
.mk-camp > div { display: grid; min-inline-size: 0; }
.mk-camp strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ac-fw-semibold); }
.mk-camp small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.mk-plat { flex: none; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 0.7rem; background: var(--ac-info-soft); color: var(--ac-info-ink); font-weight: 800; font-size: var(--ac-fs-sm); }
.mk-plat[data-p="meta"] { background: var(--ac-accent-soft); color: var(--ac-accent-ink); }
.mk-roas { display: inline-flex; padding: 2px 8px; border-radius: var(--ac-r-pill); background: var(--ac-success-soft); color: var(--ac-success-ink); font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; }
.mk-roas[data-tone="warning"] { background: var(--ac-warning-soft); color: var(--ac-warning-ink); }
.mk-roas[data-tone="danger"] { background: var(--ac-danger-soft); color: var(--ac-danger-ink); }
.mk-email { list-style: none; margin: 0; padding: 0; display: grid; }
.mk-email__item { display: grid; gap: var(--ac-s-2); padding-block: var(--ac-s-3); border-block-end: 1px solid var(--ac-border); }
.mk-email__item:first-child { padding-block-start: 0; }
.mk-email__item:last-child { border-block-end: 0; padding-block-end: 0; }
.mk-email__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--ac-s-3); }
.mk-email__head strong { font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-sm); }
.mk-email__stats { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--ac-s-4); }
.mk-email__stats > span { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px var(--ac-s-2); }
.mk-email__stats small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.mk-email__stats b { justify-self: end; font-variant-numeric: tabular-nums; font-size: var(--ac-fs-sm); }
.mk-email__stats .mk-meter { grid-column: 1 / -1; }
.mk-social { display: grid; gap: var(--ac-s-4); }
.mk-social__nets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ac-s-2); }
.mk-net { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px var(--ac-s-2); padding: var(--ac-s-3); border-radius: var(--ac-r-lg); background: var(--ac-surface-2); transition: transform var(--ac-dur-2) var(--ac-ease-out); }
.mk-net:hover { transform: translateY(-2px); }
.mk-net__dot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--_c); }
.mk-net__name { font-size: var(--ac-fs-xs); color: var(--ac-text-soft); }
.mk-net strong { grid-column: 1 / 3; font-size: var(--ac-fs-xl, 1.25rem); font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; }
.mk-net .ac-trend { grid-column: 3; grid-row: 1 / 3; }

@media (min-width: 640px) { .mk-links { grid-template-columns: 1fr; } }
@media (max-width: 1023.98px) {
  .mk-kpis { grid-template-columns: 1fr 1fr; }
  .mk-toggles { grid-template-columns: 1fr 1fr; }
  .mk-social__nets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639.98px) {
  .mk-bar__note { margin-inline-start: 0; inline-size: 100%; }
  .mk-bar .ac-segmented { max-inline-size: 100%; overflow-x: auto; }
  .mk-toggle { min-block-size: 5.5rem; padding: var(--ac-s-3); }
  .mk-chart-slot { block-size: 220px; }
  .mk-reasons li { grid-template-columns: minmax(0, 1fr) 3.5rem 1.4rem; }
  .mk-reasons li .mk-meter { display: none; }
  .mk-email__stats { grid-template-columns: 1fr 1fr; }
  .mk-kpis { gap: var(--ac-s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-stack i, .mk-live i::after, .mk-chart--enter .mk-chart__line { animation: none !important; }
}


/* ==== modules/notify/notify.css ==== */
/* Notify module — rich cards & progress (stacked per position), top banner, undo snackbar, dynamic island,
   inline alerts, preferences card with a position picker. Tokens only; logical properties; RTL-aware. */

/* ---------------------------------------------------------------- shared lead (icon / avatar) */
.ac-ntf__icon {
  --_tone: var(--ac-ink); --_soft: var(--ac-surface-2);
  flex: none; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--ac-r-md);
  background: var(--_soft); color: var(--_tone);
}
.ac-ntf__icon[data-tone="accent"] { --_tone: var(--ac-accent-ink); --_soft: var(--ac-accent-soft); }
.ac-ntf__icon[data-tone="success"] { --_tone: var(--ac-success-ink); --_soft: var(--ac-success-soft); }
.ac-ntf__icon[data-tone="warning"] { --_tone: var(--ac-warning-ink); --_soft: var(--ac-warning-soft); }
.ac-ntf__icon[data-tone="danger"] { --_tone: var(--ac-danger-ink); --_soft: var(--ac-danger-soft); }
.ac-ntf__icon[data-tone="info"] { --_tone: var(--ac-info-ink); --_soft: var(--ac-info-soft); }
.ac-ntf__icon .ac-icon { inline-size: 1.1rem; block-size: 1.1rem; }
.ac-ntf__avatar { flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; object-fit: cover; }
.ac-ntf__close {
  flex: none; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; margin: -2px -4px 0 0; margin-inline: 0 -4px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ac-muted); cursor: pointer;
  transition: background var(--ac-dur-1) var(--ac-ease), color var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-ntf__close:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-ntf__close:active { transform: scale(0.9); }
.ac-ntf__close:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-ntf__close .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-ntf__actions { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); margin-block-start: var(--ac-s-2); }

/* ---------------------------------------------------------------- card stack */
.ac-ntf-stack {
  position: fixed; z-index: var(--ac-z-toast); inline-size: min(24rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: var(--ac-s-2);
  pointer-events: none;
}
.ac-ntf-stack[data-position^="top"] { inset-block-start: calc(var(--ac-s-4) + var(--ac-safe-top, 0px) + var(--ac-banner-h, 0px) + var(--ac-island-h, 0px)); }
.ac-ntf-stack[data-position^="bottom"] { inset-block-end: calc(var(--ac-s-4) + var(--ac-safe-bottom, 0px)); flex-direction: column-reverse; }
.ac-ntf-stack[data-position$="start"] { inset-inline-start: calc(var(--ac-s-4) + var(--ac-safe-start, 0px)); }
.ac-ntf-stack[data-position$="end"] { inset-inline-end: calc(var(--ac-s-4) + var(--ac-safe-end, 0px)); }
.ac-ntf-stack[data-position$="center"] { inset-inline: 0; margin-inline: auto; }
@media (max-width: 639.98px) {
  .ac-ntf-stack[data-position] { inset-inline: var(--ac-s-3); inline-size: auto; margin: 0; }
  .ac-ntf-stack[data-position^="bottom"] { inset-block-end: calc(var(--ac-tabbar-h, 4rem) + var(--ac-safe-bottom, 0px) + var(--ac-s-2)); }
}
.ac-ntf-stack__list { display: flex; flex-direction: column; gap: var(--ac-s-2); }
.ac-ntf-stack[data-expanded] .ac-ntf-stack__list { max-block-size: min(70vh, 40rem); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; padding: 2px; margin: -2px; }
.ac-ntf-stack__more {
  pointer-events: auto; align-self: center; border: 1px solid var(--ac-border); border-radius: var(--ac-r-pill); background: var(--ac-elevated);
  color: var(--ac-text-soft, var(--ac-text)); font: inherit; font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold, 600);
  padding: 0.3rem 0.8rem; box-shadow: var(--ac-shadow-sm); cursor: pointer; transition: transform var(--ac-dur-1) var(--ac-ease);
}
.ac-ntf-stack__more:active { transform: scale(0.96); }
.ac-ntf-stack__more:focus-visible { outline: none; box-shadow: var(--ac-focus); }

.ac-ntf {
  --_sx: 0px; --_sy: 0px; --_so: 1;
  position: relative; pointer-events: auto; overflow: hidden; border-radius: var(--ac-r-xl);
  background: var(--ac-elevated); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-lg);
  color: var(--ac-text); font-size: var(--ac-fs-sm); touch-action: pan-y;
  opacity: var(--_so); transform: translate(var(--_sx), var(--_sy));
  transition: transform var(--ac-dur-3) var(--ac-ease-out, var(--ac-ease)), opacity var(--ac-dur-2) var(--ac-ease-out, var(--ac-ease)), box-shadow var(--ac-dur-2) var(--ac-ease);
}
.ac-ntf[data-state="enter"] { opacity: 0; transform: translateY(14px) scale(0.97); }
.ac-ntf-stack[data-position^="top"] .ac-ntf[data-state="enter"] { transform: translateY(-14px) scale(0.97); }
.ac-ntf[data-state="exit"] { opacity: 0; transform: scale(0.95); transition-duration: var(--ac-dur-2); pointer-events: none; }
.ac-ntf[data-state="swiped"] { opacity: 0; pointer-events: none; }
.ac-ntf[data-dragging] { transition: none; cursor: grabbing; }
.ac-ntf[data-overflow] { display: none; }
.ac-ntf[data-tone="danger"] { border-color: color-mix(in oklab, var(--ac-danger) 35%, var(--ac-border)); }
.ac-ntf__image { display: block; inline-size: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; background: var(--ac-surface-2); }
.ac-ntf__row { display: flex; gap: var(--ac-s-3); align-items: flex-start; padding: var(--ac-s-3) var(--ac-s-3) var(--ac-s-3) var(--ac-s-3); }
.ac-ntf__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ac-ntf__head { display: flex; align-items: baseline; gap: var(--ac-s-2); }
.ac-ntf__title { flex: 1; min-width: 0; font-weight: var(--ac-fw-semibold, 600); line-height: var(--ac-lh-snug); }
.ac-ntf__meta { flex: none; color: var(--ac-faint, var(--ac-muted)); font-size: var(--ac-fs-xs); }
.ac-ntf__text { margin: 0; color: var(--ac-muted); line-height: var(--ac-lh-snug); }
.ac-ntf__progress { position: relative; block-size: 6px; margin-block-start: var(--ac-s-2); border-radius: 6px; background: var(--ac-surface-3); overflow: hidden; }
.ac-ntf__bar { position: absolute; inset: 0; background: var(--ac-ink); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--_p, 0)); transition: transform var(--ac-dur-3) var(--ac-ease-out, var(--ac-ease)); }
[dir="rtl"] .ac-ntf__bar { transform-origin: 100% 50%; }
.ac-ntf[data-tone="success"] .ac-ntf__bar { background: var(--ac-success); }
.ac-ntf[data-tone="danger"] .ac-ntf__bar { background: var(--ac-danger); }
.ac-ntf__pct { justify-self: end; color: var(--ac-muted); font-size: var(--ac-fs-xs); font-variant-numeric: tabular-nums; }
.ac-ntf__timer { position: absolute; inset: auto 0 0; block-size: 2px; background: var(--ac-ink); opacity: 0.18; transform-origin: 0 50%; animation: ac-ntf-timer var(--_dur) linear forwards; animation-play-state: var(--_play, running); }
[dir="rtl"] .ac-ntf__timer { transform-origin: 100% 50%; }
@keyframes ac-ntf-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------------------------------------------------------------- banner (full width, top) */
.ac-ntf-banner {
  --_sy: 0px; --_so: 1;
  position: fixed; z-index: calc(var(--ac-z-toast) + 1); inset-block-start: 0; inset-inline: 0;
  padding: calc(var(--ac-safe-top, 0px) + var(--ac-s-2)) var(--ac-s-4) var(--ac-s-2);
  background: var(--ac-ink); color: var(--ac-ink-contrast, #fff); box-shadow: var(--ac-shadow-md); touch-action: pan-x;
  opacity: var(--_so); transform: translateY(min(0px, var(--_sy)));
  transition: transform var(--ac-dur-3) var(--ac-ease-out, var(--ac-ease)), opacity var(--ac-dur-2) var(--ac-ease);
}
.ac-ntf-banner[data-tone="danger"] { background: var(--ac-danger); color: #fff; }
.ac-ntf-banner[data-tone="warning"] { background: var(--ac-warning); color: #1b1300; }
.ac-ntf-banner[data-tone="success"] { background: var(--ac-success); color: #fff; }
.ac-ntf-banner[data-tone="info"] { background: var(--ac-info); color: #fff; }
.ac-ntf-banner[data-tone="accent"] { background: var(--ac-accent); color: var(--ac-accent-contrast, #fff); }
.ac-ntf-banner[data-state="enter"], .ac-ntf-banner[data-state="exit"] { transform: translateY(-105%); }
.ac-ntf-banner[data-state="swiped"] { opacity: 0; }
.ac-ntf-banner[data-dragging] { transition: none; }
.ac-ntf-banner__inner { display: flex; align-items: center; gap: var(--ac-s-3); max-inline-size: var(--ac-content-max, 80rem); margin-inline: auto; min-block-size: 2.5rem; }
.ac-ntf-banner .ac-ntf__icon { --_soft: rgb(255 255 255 / 0.16); --_tone: currentColor; inline-size: 2rem; block-size: 2rem; border-radius: 50%; }
.ac-ntf-banner__text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: var(--ac-s-2); align-items: baseline; font-size: var(--ac-fs-sm); }
.ac-ntf-banner__text strong { font-weight: var(--ac-fw-semibold, 600); }
.ac-ntf-banner__text span { opacity: 0.82; }
.ac-ntf-banner .ac-ntf__actions { margin: 0; flex: none; }
.ac-ntf-banner .ac-btn { --_bg: rgb(255 255 255 / 0.16); background: var(--_bg); color: inherit; border-color: transparent; }
.ac-ntf-banner .ac-btn:hover { --_bg: rgb(255 255 255 / 0.26); }
.ac-ntf-banner .ac-btn--primary { background: #fff; color: #111; }
.ac-ntf-banner[data-tone="warning"] .ac-btn--primary { background: #1b1300; color: #fff; }
.ac-ntf-banner .ac-ntf__close { color: inherit; opacity: 0.8; margin: 0; }
.ac-ntf-banner .ac-ntf__close:hover { background: rgb(255 255 255 / 0.16); opacity: 1; }
@media (max-width: 639.98px) {
  .ac-ntf-banner__text { display: grid; }
  .ac-ntf-banner .ac-ntf__actions .ac-btn span { white-space: nowrap; }
}

/* ---------------------------------------------------------------- snackbar (inverse pill, undo + countdown ring) */
.ac-snack {
  --_sy: 0px; --_so: 1;
  position: fixed; z-index: var(--ac-z-toast); inset-inline: 0; margin-inline: auto; inline-size: max-content; max-inline-size: calc(100vw - 2rem);
  inset-block-end: calc(var(--ac-s-5) + var(--ac-safe-bottom, 0px));
  display: flex; align-items: center; gap: var(--ac-s-2); padding: 0.4rem 0.4rem 0.4rem 0.9rem; padding-inline: 0.9rem 0.4rem;
  background: var(--ac-ink); color: var(--ac-ink-contrast, #fff); border-radius: var(--ac-r-pill); box-shadow: var(--ac-shadow-xl);
  font-size: var(--ac-fs-sm); touch-action: pan-x; opacity: var(--_so); transform: translateY(max(0px, var(--_sy)));
  transition: transform var(--ac-dur-3) var(--ac-ease-spring, var(--ac-ease)), opacity var(--ac-dur-2) var(--ac-ease);
}
.ac-snack[data-position="top"] { inset-block: calc(var(--ac-s-4) + var(--ac-safe-top, 0px)) auto; transform: translateY(min(0px, var(--_sy))); }
@media (max-width: 1023.98px) { .ac-snack:not([data-position="top"]) { inset-block-end: calc(var(--ac-tabbar-h, 4rem) + var(--ac-safe-bottom, 0px) + var(--ac-s-3)); } }
.ac-snack[data-state="enter"], .ac-snack[data-state="exit"] { opacity: 0; transform: translateY(16px) scale(0.96); }
.ac-snack[data-position="top"][data-state="enter"], .ac-snack[data-position="top"][data-state="exit"] { transform: translateY(-16px) scale(0.96); }
.ac-snack[data-state="exit"] { transition-duration: var(--ac-dur-2); }
.ac-snack[data-dragging] { transition: none; }
.ac-snack__ring { flex: none; inline-size: 1.1rem; block-size: 1.1rem; transform: rotate(-90deg); }
.ac-snack__ring circle { fill: none; stroke: currentColor; stroke-width: 2.5; opacity: 0.22; }
.ac-snack__ring .ac-snack__left { opacity: 1; stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; animation: ac-snack-ring var(--_dur) linear forwards; animation-play-state: var(--_play, running); }
@keyframes ac-snack-ring { to { stroke-dashoffset: 100; } }
.ac-snack__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ac-fw-medium, 500); }
.ac-snack__action, .ac-snack__close {
  flex: none; display: inline-flex; align-items: center; gap: 0.3rem; border: 0; font: inherit; cursor: pointer; color: inherit;
  transition: background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-snack__action { padding: 0.35rem 0.8rem; border-radius: var(--ac-r-pill); background: rgb(255 255 255 / 0.14); font-weight: var(--ac-fw-semibold, 600); color: var(--ac-accent-2, var(--ac-accent)); }
:root[data-theme="dark"] .ac-snack__action { background: rgb(0 0 0 / 0.08); }
.ac-snack__action .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-snack__close { inline-size: 1.9rem; block-size: 1.9rem; justify-content: center; border-radius: 50%; background: transparent; opacity: 0.7; }
.ac-snack__close .ac-icon { inline-size: 0.9rem; block-size: 0.9rem; }
.ac-snack__action:hover, .ac-snack__close:hover { background: rgb(255 255 255 / 0.22); opacity: 1; }
.ac-snack__action:active, .ac-snack__close:active { transform: scale(0.94); }
.ac-snack__action:focus-visible, .ac-snack__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ac-accent); }

/* ---------------------------------------------------------------- dynamic island */
.ac-island {
  --_sy: 0px; --_so: 1;
  position: fixed; z-index: calc(var(--ac-z-toast) + 2); inset-block-start: calc(var(--ac-s-2) + var(--ac-safe-top, 0px) + var(--ac-banner-h, 0px)); inset-inline: 0; margin-inline: auto;
  inline-size: max-content; min-inline-size: 9rem; max-inline-size: min(22rem, calc(100vw - 1.5rem));
  padding: 0.45rem 0.55rem; border-radius: 1.6rem; background: #0b0b0c; color: #f5f5f7; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.06) inset;
  touch-action: pan-x; opacity: var(--_so); transform: translateY(min(0px, var(--_sy)));
  transition: max-inline-size 420ms var(--ac-ease-spring, cubic-bezier(.34, 1.56, .64, 1)), padding 420ms var(--ac-ease-spring, cubic-bezier(.34, 1.56, .64, 1)),
    border-radius 420ms var(--ac-ease-spring, cubic-bezier(.34, 1.56, .64, 1)), transform 380ms var(--ac-ease-spring, cubic-bezier(.34, 1.56, .64, 1)), opacity 200ms var(--ac-ease);
}
.ac-island[data-state="enter"], .ac-island[data-state="exit"] { opacity: 0; transform: translateY(-8px) scale(0.6); }
.ac-island[data-dragging] { transition: none; }
.ac-island:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-island[data-expanded] { max-inline-size: min(24rem, calc(100vw - 1.5rem)); inline-size: min(24rem, calc(100vw - 1.5rem)); padding: 0.85rem 0.95rem; border-radius: 1.9rem; cursor: default; }
.ac-island__compact { display: flex; align-items: center; gap: 0.55rem; min-block-size: 1.6rem; }
.ac-island__glyph { flex: none; display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; }
.ac-island__glyph[data-tone="success"] { background: #1f8f4e; }
.ac-island__glyph[data-tone="danger"] { background: #d93b3b; }
.ac-island__glyph[data-tone="warning"] { background: #d99a14; color: #111; }
.ac-island__glyph[data-tone="accent"] { background: var(--ac-accent); }
.ac-island__glyph[data-tone="info"] { background: #2d6fe0; }
.ac-island__glyph .ac-icon { inline-size: 0.9rem; block-size: 0.9rem; }
.ac-island .ac-ntf__avatar { inline-size: 1.6rem; block-size: 1.6rem; font-size: 0.65rem; }
.ac-island__title { flex: 1; min-width: 0; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold, 600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-island__badge { flex: none; min-inline-size: 1.4rem; padding-inline: 0.4rem; block-size: 1.4rem; display: grid; place-items: center; border-radius: 1rem; background: var(--ac-accent); color: #fff; font-size: var(--ac-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ac-island__live { flex: none; inline-size: 0.5rem; block-size: 0.5rem; margin-inline: 0.25rem; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 0 rgb(52 199 89 / 0.6); animation: ac-island-live 1.8s ease-out infinite; }
@keyframes ac-island-live { 70% { box-shadow: 0 0 0 7px rgb(52 199 89 / 0); } 100% { box-shadow: 0 0 0 0 rgb(52 199 89 / 0); } }
.ac-island__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 380ms var(--ac-ease-spring, var(--ac-ease)), opacity 200ms var(--ac-ease); }
.ac-island__more > * { min-block-size: 0; overflow: hidden; }
.ac-island__more { gap: 0; }
.ac-island[data-expanded] .ac-island__more { grid-template-rows: 1fr; opacity: 1; transition-delay: 60ms; }
.ac-island__more > :first-child { margin-block-start: 0.6rem; }
.ac-island__text { margin: 0; color: rgb(245 245 247 / 0.75); font-size: var(--ac-fs-sm); line-height: var(--ac-lh-snug); }
.ac-island__progress { block-size: 5px; border-radius: 5px; background: rgb(255 255 255 / 0.14); overflow: hidden; margin-block-start: 0.6rem; }
.ac-island__progress span { display: block; block-size: 100%; inline-size: 100%; background: #fff; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--_p, 0)); transition: transform var(--ac-dur-3) var(--ac-ease); }
[dir="rtl"] .ac-island__progress span { transform-origin: 100% 50%; }
.ac-island .ac-ntf__actions .ac-btn { background: rgb(255 255 255 / 0.12); color: #fff; border-color: transparent; }
.ac-island .ac-ntf__actions .ac-btn:hover { background: rgb(255 255 255 / 0.2); }
.ac-island .ac-ntf__actions .ac-btn--primary { background: #fff; color: #0b0b0c; }

/* ---------------------------------------------------------------- inline alert (uses .ac-alert) */
.ac-ntf-inline { animation: ac-ntf-in var(--ac-dur-3) var(--ac-ease-out, var(--ac-ease)) both; }
@keyframes ac-ntf-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------------------------------------------------------------- preferences card */
.ac-ntf-prefs__grid { display: grid; gap: var(--ac-s-1); }
@media (min-width: 1024px) { .ac-ntf-prefs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ac-s-6); } }
.ac-ntf-prefs__scroll { position: relative; overflow-x: auto; margin-inline: calc(var(--ac-card-pad, 1.25rem) * -1); padding-inline: var(--ac-card-pad, 1.25rem); }
.ac-ntf-prefs__table { inline-size: 100%; border-collapse: collapse; font-size: var(--ac-fs-sm); min-inline-size: 34rem; }
.ac-ntf-prefs__table th, .ac-ntf-prefs__table td { padding: var(--ac-s-2) var(--ac-s-2); text-align: center; border-block-end: 1px solid var(--ac-border); vertical-align: middle; }
.ac-ntf-prefs__table thead th { color: var(--ac-muted); font-weight: var(--ac-fw-medium, 500); font-size: var(--ac-fs-xs); }
.ac-ntf-prefs__table th[scope="row"], .ac-ntf-prefs__table thead th:first-child { text-align: start; }
.ac-ntf-prefs__table tbody tr:last-child > * { border-block-end: 0; }
.ac-ntf-prefs__ev { display: flex; align-items: center; gap: var(--ac-s-3); font-weight: normal; }
.ac-ntf-prefs__ev strong { display: block; font-weight: var(--ac-fw-semibold, 600); }
.ac-ntf-prefs__ev small { display: block; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-ntf-prefs__select {
  font: inherit; font-size: var(--ac-fs-xs); color: var(--ac-text); background: var(--ac-surface-2); border: 1px solid var(--ac-border);
  border-radius: var(--ac-r-pill); padding: 0.3rem 0.6rem; cursor: pointer;
}
.ac-ntf-prefs__select:focus-visible { outline: none; box-shadow: var(--ac-focus); }

.ac-pospick { flex: none; display: grid; grid-template-columns: repeat(3, 1.6rem); grid-template-rows: repeat(2, 1.1rem); gap: 3px; padding: 4px; border-radius: 9px; background: var(--ac-surface-2); border: 1px solid var(--ac-border); }
.ac-pospick__cell { position: relative; border: 0; padding: 0; border-radius: 4px; background: transparent; cursor: pointer; transition: background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease); }
.ac-pospick__cell span { position: absolute; inset: 30%; border-radius: 2px; background: var(--ac-border-strong); transition: background var(--ac-dur-2) var(--ac-ease), inset var(--ac-dur-2) var(--ac-ease-spring, var(--ac-ease)); }
.ac-pospick__cell:hover { background: var(--ac-hover); }
.ac-pospick__cell:active { transform: scale(0.9); }
.ac-pospick__cell:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-pospick__cell[aria-checked="true"] { background: var(--ac-elevated); box-shadow: var(--ac-shadow-xs); }
.ac-pospick__cell[aria-checked="true"] span { inset: 22% 14%; background: var(--ac-ink); }

@media (prefers-reduced-motion: reduce) {
  .ac-island__live { animation: none; }
  .ac-ntf__timer, .ac-snack__ring .ac-snack__left { animation: none; }
}
/* the settings card may sit in a grid / bento cell: never let the wide table push the page sideways */
[data-ac~="notify-prefs"], .ac-ntf-prefs, .ac-ntf-prefs .ac-card__body { min-inline-size: 0; max-inline-size: 100%; }
/* mixed-script content (file names, sizes, English names in Persian UI): each line takes the direction of its first strong letter */
.ac-ntf__title, .ac-ntf__text, .ac-ntf-banner__text > *, .ac-snack__text, .ac-island__title, .ac-island__text { unicode-bidi: plaintext; }


/* ==== modules/prose/prose.css ==== */
/* Prose module — long-form typography + article chrome + blog cards + docs layout + Markdown editor.
   Tokens only, logical properties only; mixed-direction paragraphs resolve their own direction (unicode-bidi: plaintext),
   code is always LTR. Reduced motion keeps fades and colour, drops travel. */

/* ---------------------------------------------------------------- typography */
.ac-prose {
  --_measure: 70ch;
  --_gap: 1.15em;
  color: var(--ac-text);
  font-size: 1.0625rem;
  line-height: 1.95;
  overflow-wrap: break-word;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
  min-inline-size: 0;
}
:root:lang(en) .ac-prose, .ac-prose:lang(en) { line-height: 1.75; }
.ac-prose > * { max-inline-size: var(--_measure); margin-block: 0; }
.ac-prose > * + * { margin-block-start: var(--_gap); }
.ac-prose > :is(.ac-prose__table, .ac-prose__code, .ac-code, .ac-prose__figure--wide) { max-inline-size: min(100%, calc(var(--_measure) + 12ch)); }
.ac-prose :is(p, li, h1, h2, h3, h4, h5, h6, td, th, figcaption, summary, dd, dt, .ac-callout__title) { unicode-bidi: plaintext; text-align: start; }

.ac-prose :is(h1, h2, h3, h4, h5, h6) {
  position: relative;
  color: var(--ac-text);
  font-weight: var(--ac-fw-semibold);
  letter-spacing: -0.012em;
  text-wrap: balance;
  scroll-margin-block-start: calc(var(--ac-appbar-h) + 1rem);
}
.ac-prose h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.22; letter-spacing: -0.022em; }
.ac-prose h2 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.8rem); line-height: 1.3; }
.ac-prose h3 { font-size: 1.28rem; line-height: 1.4; }
.ac-prose h4 { font-size: 1.1rem; line-height: 1.5; }
.ac-prose :is(h5, h6) { font-size: 1rem; line-height: 1.5; color: var(--ac-text-soft); }
.ac-prose h6 { font-size: var(--ac-fs-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.ac-prose > h2 { margin-block-start: 2.3em; }
.ac-prose > :is(h3, h4) { margin-block-start: 1.9em; }
.ac-prose > :is(h5, h6) { margin-block-start: 1.6em; }
.ac-prose > :is(h1, h2, h3, h4, h5, h6) + * { margin-block-start: 0.6em; }
.ac-prose > :first-child { margin-block-start: 0; }

.ac-anchor {
  display: inline-grid;
  place-items: center;
  inline-size: 1.4em;
  block-size: 1.4em;
  margin-inline-start: 0.35em;
  border-radius: var(--ac-r-sm);
  color: var(--ac-faint);
  font-size: 0.75em;
  font-weight: var(--ac-fw-medium);
  text-decoration: none;
  vertical-align: 0.12em;
  opacity: 0;
  transition: opacity var(--ac-dur-1) var(--ac-ease), color var(--ac-dur-1), background-color var(--ac-dur-1);
}
:is(h1, h2, h3, h4, h5, h6):hover > .ac-anchor, .ac-anchor:focus-visible { opacity: 1; }
.ac-anchor:hover { color: var(--ac-accent-ink); background: var(--ac-accent-soft); }
.ac-anchor:focus-visible { outline: none; box-shadow: var(--ac-focus); }
@media (hover: none) { .ac-anchor { opacity: 0.5; } }

.ac-prose a:not(.ac-anchor, .ac-btn, .ac-chip, .ac-toc__link, [class*="ac-footnotes__"]) {
  color: var(--ac-text);
  font-weight: var(--ac-fw-medium);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ac-accent) 55%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  border-radius: 2px;
  transition: color var(--ac-dur-1), text-decoration-color var(--ac-dur-1), background-color var(--ac-dur-1);
}
.ac-prose a:not(.ac-anchor, .ac-btn, .ac-chip, .ac-toc__link):hover { color: var(--ac-accent-ink); text-decoration-color: currentColor; }
.ac-prose a:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 2px; }
.ac-prose a.ac-autolink { overflow-wrap: anywhere; unicode-bidi: isolate; }
.ac-prose :is(strong, b) { font-weight: var(--ac-fw-bold); color: var(--ac-text); }
.ac-prose mark { padding-inline: 0.15em; border-radius: 3px; background: var(--ac-accent-soft-2, var(--ac-accent-soft)); color: inherit; }
.ac-prose del { color: var(--ac-muted); text-decoration-thickness: 1.5px; }
.ac-prose :is(sub, sup) { font-size: 0.72em; line-height: 0; }
.ac-prose abbr[title] { text-decoration: underline dotted; cursor: help; }

/* lists (nested, task, Persian numerals) */
.ac-prose :is(ul, ol) { padding-inline-start: 1.6em; }
.ac-prose li { padding-inline-start: 0.25em; }
.ac-prose li + li, .ac-prose li > :is(ul, ol) { margin-block-start: 0.35em; }
.ac-prose li > p { margin-block: 0.4em; }
.ac-prose ::marker { color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-prose ul > li::marker { color: var(--ac-accent); }
.ac-prose ul ul { list-style-type: circle; }
.ac-prose ul ul ul { list-style-type: square; }
.ac-prose ol ol { list-style-type: lower-alpha; }
.ac-prose[data-numerals="persian"] ol, .ac-prose ol[data-numerals="persian"] { list-style-type: persian; }
.ac-prose[data-numerals="persian"] ol ol { list-style-type: persian; }
.ac-prose[data-numerals="arabic"] ol, .ac-prose ol[data-numerals="arabic"] { list-style-type: arabic-indic; }
.ac-prose .ac-tasklist { list-style: none; padding-inline-start: 0.2em; }
.ac-task { display: flex; align-items: flex-start; gap: 0.6em; }
.ac-task__box {
  appearance: none;
  flex: none;
  inline-size: 1.15em;
  block-size: 1.15em;
  margin: 0.4em 0 0;
  border: 1.5px solid var(--ac-border-strong);
  border-radius: 0.35em;
  background: var(--ac-surface-1) no-repeat center / 78%;
}
.ac-task__box:checked {
  border-color: var(--ac-ink);
  background-color: var(--ac-ink);
  background-image: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .ac-task__box:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ac-task[data-done] > .ac-task__text { color: var(--ac-muted); }
.ac-task__text { min-inline-size: 0; flex: 1; }

/* quotes + callouts */
.ac-prose blockquote {
  position: relative;
  margin-inline: 0;
  padding-block: 0.15em;
  padding-inline: 1.15em 0;
  border-inline-start: 3px solid var(--ac-ink);
  color: var(--ac-text-soft);
  font-size: 1.08em;
}
.ac-prose blockquote > * + * { margin-block-start: 0.7em; }
.ac-prose blockquote > :is(p, ul, ol) { margin: 0; }
.ac-prose blockquote blockquote { font-size: 1em; border-inline-start-color: var(--ac-border-strong); margin-block-start: 0.7em; }
.ac-callout {
  --_tone: var(--ac-info); --_soft: var(--ac-info-soft); --_ink: var(--ac-info-ink);
  padding: 0.9em 1.1em;
  border: 1px solid color-mix(in srgb, var(--_tone) 22%, transparent);
  border-radius: var(--ac-r-lg);
  background: var(--_soft);
  font-size: 0.97em;
}
.ac-callout[data-kind="tip"] { --_tone: var(--ac-success); --_soft: var(--ac-success-soft); --_ink: var(--ac-success-ink); }
.ac-callout[data-kind="important"] { --_tone: var(--ac-accent); --_soft: var(--ac-accent-soft); --_ink: var(--ac-accent-ink); }
.ac-callout[data-kind="warning"] { --_tone: var(--ac-warning); --_soft: var(--ac-warning-soft); --_ink: var(--ac-warning-ink); }
.ac-callout:is([data-kind="caution"], [data-kind="danger"]) { --_tone: var(--ac-danger); --_soft: var(--ac-danger-soft); --_ink: var(--ac-danger-ink); }
.ac-callout > * + * { margin-block-start: 0.55em; }
.ac-callout > :is(p, ul, ol) { margin-block-end: 0; }
.ac-callout__title { display: flex; align-items: center; gap: 0.5em; margin: 0; color: var(--_ink); font-weight: var(--ac-fw-semibold); font-size: 0.95em; }
.ac-callout__title .ac-icon { inline-size: 1.15em; block-size: 1.15em; flex: none; }
.ac-callout :is(code) { background: color-mix(in srgb, var(--_tone) 12%, transparent); }

/* code */
.ac-prose :not(pre) > code {
  padding: 0.12em 0.42em;
  border-radius: 0.4em;
  background: var(--ac-surface-2);
  border: 1px solid var(--ac-border);
  color: var(--ac-text);
  font-family: var(--ac-font-mono);
  font-size: 0.84em;
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}
.ac-prose :is(.ac-code, .ac-prose__code) { direction: ltr; text-align: left; }
.ac-prose pre:not(.ac-code pre) { direction: ltr; text-align: left; overflow: auto; padding: 1em; border-radius: var(--ac-r-lg); background: var(--ac-surface-2); font-size: 0.86em; }
.ac-prose kbd, .ac-prose .ac-kbd {
  display: inline-block;
  min-inline-size: 1.7em;
  padding: 0.05em 0.45em;
  border: 1px solid var(--ac-border-strong);
  border-block-end-width: 2.5px;
  border-radius: 0.4em;
  background: var(--ac-surface-1);
  color: var(--ac-text);
  font-family: var(--ac-font-mono);
  font-size: 0.78em;
  font-weight: var(--ac-fw-semibold);
  line-height: 1.6;
  text-align: center;
  direction: ltr;
  unicode-bidi: isolate;
  vertical-align: 0.08em;
}

/* tables */
.ac-prose__table { overflow-x: auto; border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); background: var(--ac-surface-1); overscroll-behavior-inline: contain; scrollbar-width: thin; }
.ac-prose__table:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-prose table { inline-size: 100%; border-collapse: collapse; font-size: 0.92em; line-height: 1.6; font-variant-numeric: tabular-nums; }
.ac-prose :is(th, td) { padding: 0.7em 1em; text-align: start; vertical-align: top; border-block-end: 1px solid var(--ac-border); }
.ac-prose th { background: var(--ac-bg-subtle); color: var(--ac-text-soft); font-size: 0.9em; font-weight: var(--ac-fw-semibold); white-space: nowrap; }
.ac-prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ac-bg-subtle) 60%, transparent); }
.ac-prose tbody tr:last-child > * { border-block-end: 0; }
.ac-prose tbody tr { transition: background-color var(--ac-dur-1); }
.ac-prose tbody tr:hover { background: var(--ac-hover); }
.ac-prose [data-align="center"] { text-align: center; }
.ac-prose [data-align="end"] { text-align: end; }

/* media */
.ac-prose img { display: block; max-inline-size: 100%; block-size: auto; border-radius: var(--ac-r-lg); }
.ac-prose p img, .ac-prose li img { display: inline; vertical-align: middle; }
.ac-prose__zoom { cursor: zoom-in; transition: filter var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2); }
.ac-prose__zoom:hover { filter: brightness(1.03) saturate(1.05); box-shadow: var(--ac-shadow-md); }
.ac-prose__zoom:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-prose figure { margin-inline: 0; display: grid; gap: 0.6em; justify-items: center; }
.ac-prose figure > img { inline-size: 100%; border: 1px solid var(--ac-border); }
.ac-prose figcaption { color: var(--ac-muted); font-size: var(--ac-fs-sm); line-height: 1.6; text-align: center !important; max-inline-size: 52ch; }
.ac-prose hr { block-size: auto; margin-block: 2.4em; border: 0; color: var(--ac-faint); text-align: center; overflow: visible; }
.ac-prose hr::before { content: "\2022\2002\2022\2002\2022"; letter-spacing: 0.4em; font-size: 0.9em; }

/* details */
.ac-prose__details { border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg); background: var(--ac-surface-1); overflow: hidden; }
.ac-prose__details > summary {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.75em 1em;
  cursor: pointer;
  font-weight: var(--ac-fw-semibold);
  list-style: none;
  transition: background-color var(--ac-dur-1);
}
.ac-prose__details > summary::-webkit-details-marker { display: none; }
.ac-prose__details > summary::before {
  content: "";
  flex: none;
  inline-size: 0.55em; block-size: 0.55em;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  rotate: -45deg;
  color: var(--ac-muted);
  transition: rotate var(--ac-dur-2) var(--ac-ease-out);
}
.ac-prose__details > summary:dir(rtl)::before { rotate: 135deg; }
.ac-prose__details[open] > summary::before { rotate: 45deg; }
.ac-prose__details > summary:hover { background: var(--ac-hover); }
.ac-prose__details > summary:focus-visible { outline: none; box-shadow: inset var(--ac-focus); }
.ac-prose__details-body { padding: 0 1em 1em; }
.ac-prose__details-body > * + * { margin-block-start: 0.7em; }
.ac-prose__details[open] > .ac-prose__details-body { animation: ac-prose-reveal var(--ac-dur-3) var(--ac-ease-out) both; }
.ac-prose__box { padding: 1em; border-radius: var(--ac-r-lg); background: var(--ac-surface-2); }

/* footnotes */
.ac-fnref { margin-inline-start: 0.1em; }
.ac-fnref a { display: inline-grid; place-items: center; min-inline-size: 1.35em; padding-inline: 0.25em; border-radius: var(--ac-r-pill); background: var(--ac-surface-2); color: var(--ac-text) !important; font-size: 0.85em; font-weight: var(--ac-fw-semibold); text-decoration: none !important; }
.ac-fnref a:hover { background: var(--ac-accent-soft); color: var(--ac-accent-ink) !important; }
.ac-footnotes { margin-block-start: 3em !important; padding-block-start: 1.25em; border-block-start: 1px solid var(--ac-border); color: var(--ac-text-soft); font-size: 0.9em; }
.ac-footnotes ol { padding-inline-start: 1.4em; }
.ac-footnotes li { border-radius: var(--ac-r-sm); scroll-margin-block-start: calc(var(--ac-appbar-h) + 1rem); }
.ac-footnotes p { margin: 0; }
.ac-footnotes__back { margin-inline-start: 0.3em; color: var(--ac-muted); text-decoration: none; }
.ac-footnotes__back:hover { color: var(--ac-accent-ink); }

/* drop cap + lead paragraph helpers */
.ac-prose .ac-lead, .ac-prose--lead > p:first-of-type { font-size: 1.18em; color: var(--ac-text-soft); line-height: 1.85; }

@keyframes ac-prose-reveal { from { opacity: 0; transform: translateY(calc(-4px * var(--ac-travel, 1))); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- lightbox */
.ac-lightbox {
  position: fixed; inset: 0;
  inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none;
  margin: 0; padding: calc(var(--ac-safe-top) + 3.5rem) 1rem calc(var(--ac-safe-bottom) + 1rem);
  border: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 0.75rem;
  background: rgb(0 0 0 / 0.82);
  color: #fff;
}
.ac-lightbox::backdrop { background: transparent; }
.ac-lightbox__fig { margin: 0; display: grid; place-items: center; min-block-size: 0; block-size: 100%; inline-size: 100%; }
.ac-lightbox__img { max-inline-size: min(100%, 1400px); max-block-size: 100%; object-fit: contain; border-radius: 18px; cursor: zoom-out; box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6); }
.ac-lightbox__cap { margin: 0; max-inline-size: 60ch; text-align: center; font-size: var(--ac-fs-sm); color: rgb(255 255 255 / 0.8); unicode-bidi: plaintext; }
.ac-lightbox__close {
  position: absolute; inset-block-start: calc(var(--ac-safe-top) + 0.75rem); inset-inline-end: 0.75rem;
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.14); color: #fff; cursor: pointer;
  transition: background-color var(--ac-dur-1);
}
.ac-lightbox__close:hover { background: rgb(255 255 255 / 0.26); }
.ac-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------------------------------------------------------------- article chrome */
.ac-readbar { position: fixed; inset-inline: 0; inset-block-start: 0; z-index: calc(var(--ac-z-appbar, 40) + 1); block-size: 3px; pointer-events: none; opacity: 0; transition: opacity var(--ac-dur-3) var(--ac-ease); }
.ac-readbar[data-on] { opacity: 1; }
.ac-readbar__fill { display: block; block-size: 100%; background: var(--ac-accent); border-start-end-radius: 3px; border-end-end-radius: 3px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); will-change: transform; }
.ac-readbar__fill:dir(rtl) { transform-origin: 100% 50%; }

.ac-article { display: grid; gap: var(--ac-s-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
.ac-article__main { min-inline-size: 0; display: grid; gap: var(--ac-s-8); }
@media (min-width: 1024px) {
  .ac-article { grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--ac-s-10); }
  .ac-article__aside { position: sticky; inset-block-start: calc(var(--ac-appbar-h) + 1rem); order: 2; }
}
.ac-article__card { padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--ac-border); border-radius: var(--ac-r-2xl); background: var(--ac-surface-1); min-inline-size: 0; }
.ac-article__card > .ac-prose { margin-inline: auto; max-inline-size: 72ch; }
.ac-article__head { display: grid; gap: var(--ac-s-4); max-inline-size: 72ch; margin-inline: auto; margin-block-end: var(--ac-s-8); }
.ac-article__eyebrow { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); align-items: center; }
.ac-article__title { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); font-weight: var(--ac-fw-semibold); line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; }
.ac-article__sub { margin: 0; color: var(--ac-muted); font-size: 1.12rem; line-height: 1.8; text-wrap: pretty; }
.ac-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2) var(--ac-s-4); color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-article__meta > span { display: inline-flex; align-items: center; gap: 0.4em; }
.ac-article__meta .ac-icon { inline-size: 1rem; block-size: 1rem; }
.ac-article__by { display: inline-flex; align-items: center; gap: var(--ac-s-2); color: var(--ac-text); font-weight: var(--ac-fw-medium); }
.ac-article__cover { aspect-ratio: 21 / 9; border-radius: var(--ac-r-xl); overflow: hidden; margin-block-end: var(--ac-s-8); background: var(--ac-surface-2); }

/* TOC (sticky on desktop, collapsible on phones) */
.ac-toc { border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-surface-1); }
.ac-toc > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); padding: var(--ac-s-3) var(--ac-s-4); cursor: pointer; list-style: none; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-toc > summary::-webkit-details-marker { display: none; }
.ac-toc > summary .ac-icon { transition: rotate var(--ac-dur-2) var(--ac-ease-out); color: var(--ac-muted); }
.ac-toc[open] > summary .ac-icon { rotate: 180deg; }
.ac-toc > summary:focus-visible { outline: none; box-shadow: var(--ac-focus); border-radius: inherit; }
.ac-toc__scroll { position: relative; max-block-size: min(60vh, 32rem); overflow: auto; padding: 0 var(--ac-s-2) var(--ac-s-3); scrollbar-width: thin; overscroll-behavior: contain; }
.ac-toc__list { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.ac-toc__item[data-depth="1"] { padding-inline-start: var(--ac-s-3); }
.ac-toc__item[data-depth="2"] { padding-inline-start: var(--ac-s-6); }
.ac-toc__link {
  display: block;
  padding: 0.38rem var(--ac-s-3);
  border-radius: var(--ac-r-sm);
  color: var(--ac-muted);
  font-size: var(--ac-fs-sm);
  line-height: 1.5;
  text-decoration: none;
  unicode-bidi: plaintext;
  transition: color var(--ac-dur-1), background-color var(--ac-dur-1);
}
.ac-toc__link:hover { color: var(--ac-text); background: var(--ac-hover); }
.ac-toc__link[aria-current] { color: var(--ac-text); font-weight: var(--ac-fw-semibold); }
.ac-toc__link:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-toc__ind {
  position: absolute; inset-inline-start: var(--ac-s-2); inset-block-start: 0;
  inline-size: 2px; block-size: var(--_h, 0); border-radius: 2px;
  background: var(--ac-accent);
  transform: translateY(var(--_y, 0));
  opacity: 0;
  transition: transform var(--ac-dur-3) var(--ac-ease-out), block-size var(--ac-dur-3) var(--ac-ease-out), opacity var(--ac-dur-2);
}
.ac-toc__ind[data-on] { opacity: 1; }
@media (min-width: 1024px) {
  .ac-toc { border: 0; background: none; }
  .ac-toc > summary { pointer-events: none; padding-inline: var(--ac-s-3); color: var(--ac-faint); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--ac-fs-xs); }
  .ac-toc > summary .ac-icon { display: none; }
  .ac-toc__scroll { max-block-size: calc(100dvh - var(--ac-appbar-h) - 14rem); padding-inline: 0; }
}
@media (max-width: 1023.98px) {
  .ac-toc[open] .ac-toc__scroll { animation: ac-prose-reveal var(--ac-dur-3) var(--ac-ease-out) both; }
}
.ac-article__aside { display: grid; gap: var(--ac-s-4); min-inline-size: 0; }
.ac-article__aside-card { padding: var(--ac-s-4); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-surface-1); display: grid; gap: var(--ac-s-3); font-size: var(--ac-fs-sm); }

/* tags, share, author, pager, related, comments */
.ac-tags { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); }
.ac-tag { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.3rem 0.8rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-2); color: var(--ac-text-soft); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); text-decoration: none; transition: background-color var(--ac-dur-1), color var(--ac-dur-1); }
.ac-tag::before { content: "#"; color: var(--ac-faint); }
a.ac-tag:hover, button.ac-tag:hover { background: var(--ac-ink); color: var(--ac-ink-contrast); }
a.ac-tag:hover::before { color: inherit; }
.ac-tag:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2); }
.ac-share__label { color: var(--ac-muted); font-size: var(--ac-fs-sm); margin-inline-end: var(--ac-s-1); }
.ac-share .ac-btn[data-done] { background: var(--ac-success-soft); color: var(--ac-success-ink); border-color: transparent; }
.ac-author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ac-s-4); align-items: center; padding: var(--ac-s-5); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-surface-1); }
.ac-author__name { margin: 0; font-weight: var(--ac-fw-semibold); }
.ac-author__role { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-author__bio { grid-column: 1 / -1; margin: 0; color: var(--ac-text-soft); font-size: var(--ac-fs-sm); line-height: 1.8; }
@media (min-width: 640px) { .ac-author { grid-template-columns: auto minmax(0, 1fr) auto; } .ac-author__bio { grid-column: 2 / -1; } }
.ac-pager { display: grid; gap: var(--ac-s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ac-pager__link {
  display: grid; gap: 0.2rem;
  padding: var(--ac-s-4) var(--ac-s-5);
  border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-surface-1);
  color: var(--ac-text); text-decoration: none;
  transition: border-color var(--ac-dur-2), transform var(--ac-dur-2) var(--ac-ease-out), box-shadow var(--ac-dur-2);
}
.ac-pager__link[data-dir="next"] { text-align: end; }
.ac-pager__dir { display: inline-flex; align-items: center; gap: 0.35em; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-pager__link[data-dir="next"] .ac-pager__dir { justify-content: flex-end; }
.ac-pager__title { font-weight: var(--ac-fw-semibold); line-height: 1.5; }
.ac-pager__link:hover { border-color: var(--ac-border-strong); transform: translateY(calc(-2px * var(--ac-travel, 1))); box-shadow: var(--ac-shadow-sm); }
.ac-pager__link:active { transform: scale(0.99); }
.ac-pager__link:focus-visible { outline: none; box-shadow: var(--ac-focus); }

/* blog / related cards */
.ac-posts { display: grid; gap: var(--ac-s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ac-post-card {
  position: relative;
  display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-surface-1);
  overflow: hidden; color: inherit; text-decoration: none;
  transition: border-color var(--ac-dur-2), transform var(--ac-dur-3) var(--ac-ease-out), box-shadow var(--ac-dur-3) var(--ac-ease-out);
}
.ac-post-card:hover { transform: translateY(calc(-4px * var(--ac-travel, 1))); border-color: var(--ac-border-strong); box-shadow: var(--ac-shadow-md); }
.ac-post-card:active { transform: scale(0.99); }
.ac-post-card:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-post-card__cover { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: var(--_cover, var(--ac-gradient)); color: rgb(255 255 255 / 0.92); }
.ac-post-card__cover > .ac-icon { inline-size: 2.6rem; block-size: 2.6rem; transition: transform var(--ac-dur-4) var(--ac-ease-out); }
.ac-post-card:hover .ac-post-card__cover > .ac-icon { transform: scale(calc(1 + 0.1 * var(--ac-travel, 1))) rotate(calc(-6deg * var(--ac-travel, 1))); }
.ac-post-card__cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 10%, rgb(255 255 255 / 0.25), transparent 60%), repeating-linear-gradient(90deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 28px); }
.ac-post-card__cover[data-cover="1"] { --_cover: linear-gradient(135deg, #ff6a3d, #ee4a22); }
.ac-post-card__cover[data-cover="2"] { --_cover: linear-gradient(135deg, #1f1f23, #3b3b42); }
.ac-post-card__cover[data-cover="3"] { --_cover: linear-gradient(135deg, #2563eb, #0ea5e9); }
.ac-post-card__cover[data-cover="4"] { --_cover: linear-gradient(135deg, #059669, #34d399); }
.ac-post-card__cover[data-cover="5"] { --_cover: linear-gradient(135deg, #7c3aed, #c084fc); }
.ac-post-card__cover[data-cover="6"] { --_cover: linear-gradient(135deg, #d97706, #fbbf24); }
.ac-post-card__cover .ac-badge { position: absolute; inset-block-start: var(--ac-s-3); inset-inline-start: var(--ac-s-3); z-index: 1; }
.ac-post-card__body { display: grid; gap: var(--ac-s-2); align-content: start; padding: var(--ac-s-4) var(--ac-s-5) var(--ac-s-5); }
.ac-post-card__title { margin: 0; font-size: var(--ac-fs-lg); font-weight: var(--ac-fw-semibold); line-height: 1.5; text-wrap: balance; unicode-bidi: plaintext; text-align: start; }
.ac-post-card__excerpt { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-sm); line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; unicode-bidi: plaintext; text-align: start; }
.ac-post-card__meta { display: flex; align-items: center; gap: var(--ac-s-2); margin-block-start: var(--ac-s-2); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-post-card__meta .ac-avatar { inline-size: 1.6rem; block-size: 1.6rem; font-size: 0.6rem; }
.ac-post-card--feature { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .ac-post-card--feature { grid-template-columns: 1.3fr 1fr; grid-template-rows: none; }
  .ac-post-card--feature .ac-post-card__cover { aspect-ratio: auto; min-block-size: 18rem; }
  .ac-post-card--feature .ac-post-card__body { align-content: center; padding: var(--ac-s-8); }
  .ac-post-card--feature .ac-post-card__title { font-size: var(--ac-fs-2xl); }
  .ac-post-card--feature .ac-post-card__excerpt { -webkit-line-clamp: 4; font-size: var(--ac-fs-md); }
}

/* comments */
.ac-comments { display: grid; gap: var(--ac-s-5); }
.ac-comments__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ac-s-3); }
.ac-comments__title { margin: 0; font-size: var(--ac-fs-xl); font-weight: var(--ac-fw-semibold); }
.ac-compose { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ac-s-3); align-items: start; }
.ac-compose__box { display: grid; gap: var(--ac-s-2); padding: var(--ac-s-2); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-surface-1); transition: border-color var(--ac-dur-1), box-shadow var(--ac-dur-2); }
.ac-compose__box:focus-within { border-color: var(--ac-accent); box-shadow: var(--ac-focus); }
.ac-compose__box textarea { min-block-size: 4.5rem; padding: var(--ac-s-2) var(--ac-s-3); border: 0; outline: none; background: none; color: inherit; font: inherit; line-height: 1.8; resize: vertical; unicode-bidi: plaintext; }
.ac-compose__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); padding-inline-start: var(--ac-s-2); color: var(--ac-faint); font-size: var(--ac-fs-xs); }
.ac-comment-list { display: grid; gap: var(--ac-s-4); margin: 0; padding: 0; list-style: none; }
.ac-comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ac-s-3); }
.ac-comment__body { display: grid; gap: var(--ac-s-1); min-inline-size: 0; }
.ac-comment__bubble { padding: var(--ac-s-3) var(--ac-s-4); border-radius: var(--ac-r-lg); border-start-start-radius: var(--ac-r-xs); background: var(--ac-surface-2); }
.ac-comment__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ac-s-2); font-size: var(--ac-fs-sm); }
.ac-comment__who b { font-weight: var(--ac-fw-semibold); }
.ac-comment__who time { color: var(--ac-faint); font-size: var(--ac-fs-xs); }
.ac-comment__text { margin: 0; font-size: var(--ac-fs-sm); line-height: 1.85; unicode-bidi: plaintext; text-align: start; overflow-wrap: anywhere; }
.ac-comment__actions { display: flex; gap: var(--ac-s-1); }
.ac-comment__actions button { display: inline-flex; align-items: center; gap: 0.35em; min-block-size: 2rem; padding-inline: var(--ac-s-2); border: 0; border-radius: var(--ac-r-pill); background: none; color: var(--ac-muted); font: inherit; font-size: var(--ac-fs-xs); cursor: pointer; transition: color var(--ac-dur-1), background-color var(--ac-dur-1); }
.ac-comment__actions button:hover { color: var(--ac-text); background: var(--ac-hover); }
.ac-comment__actions button:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-comment__actions button[aria-pressed="true"] { color: var(--ac-accent-ink); }
.ac-comment__actions button[aria-pressed="true"] .ac-icon { fill: currentColor; animation: ac-prose-pop var(--ac-spring-bounce-dur, 600ms) var(--ac-spring-bounce, var(--ac-ease-spring)); }
.ac-comment__actions .ac-icon { inline-size: 0.95rem; block-size: 0.95rem; }
.ac-comment .ac-comment-list { margin-block-start: var(--ac-s-3); padding-inline-start: var(--ac-s-2); border-inline-start: 2px solid var(--ac-border); }
.ac-comment[data-new] { animation: ac-prose-in var(--ac-dur-4) var(--ac-ease-out) both; }
@keyframes ac-prose-pop { 0% { scale: 1; } 40% { scale: calc(1 + 0.35 * var(--ac-travel, 1)); } 100% { scale: 1; } }
@keyframes ac-prose-in { from { opacity: 0; transform: translateY(calc(8px * var(--ac-travel, 1))); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- docs layout */
.ac-docs { display: grid; gap: var(--ac-s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.ac-docs__nav { min-inline-size: 0; }
.ac-docs__main { min-inline-size: 0; }
@media (min-width: 1024px) {
  .ac-docs { grid-template-columns: 15rem minmax(0, 1fr); }
  .ac-docs__nav { position: sticky; inset-block-start: calc(var(--ac-appbar-h) + 1rem); }
}
@media (min-width: 1280px) {
  .ac-docs { grid-template-columns: 15rem minmax(0, 1fr) 14rem; }
  .ac-docs__toc { position: sticky; inset-block-start: calc(var(--ac-appbar-h) + 1rem); order: 3; }
}
.ac-docs__toc { min-inline-size: 0; }
@media (min-width: 1024px) and (max-width: 1279.98px) { .ac-docs__toc { grid-column: 2; grid-row: 1; } }
.ac-doctree { border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); background: var(--ac-surface-1); }
.ac-doctree > summary { display: flex; align-items: center; justify-content: space-between; padding: var(--ac-s-3) var(--ac-s-4); cursor: pointer; list-style: none; font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-sm); }
.ac-doctree > summary::-webkit-details-marker { display: none; }
.ac-doctree > summary .ac-icon { color: var(--ac-muted); transition: rotate var(--ac-dur-2) var(--ac-ease-out); }
.ac-doctree[open] > summary .ac-icon { rotate: 180deg; }
.ac-doctree__body { display: grid; gap: var(--ac-s-3); padding: 0 var(--ac-s-2) var(--ac-s-3); }
.ac-doctree__group { display: grid; gap: 1px; }
.ac-doctree__label { padding: var(--ac-s-2) var(--ac-s-3) var(--ac-s-1); color: var(--ac-faint); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; }
.ac-doctree__link { display: flex; align-items: center; gap: var(--ac-s-2); padding: 0.45rem var(--ac-s-3); border-radius: var(--ac-r-md); color: var(--ac-text-soft); font-size: var(--ac-fs-sm); text-decoration: none; transition: background-color var(--ac-dur-1), color var(--ac-dur-1); }
.ac-doctree__link .ac-icon { inline-size: 1rem; block-size: 1rem; color: var(--ac-muted); }
.ac-doctree__link:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-doctree__link[aria-current] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-doctree__link[aria-current] .ac-icon { color: inherit; }
.ac-doctree__link:focus-visible { outline: none; box-shadow: var(--ac-focus); }
@media (min-width: 1024px) {
  .ac-doctree { border: 0; background: none; }
  .ac-doctree > summary { display: none; }
  .ac-doctree__body { padding: 0; }
}
.ac-docs__main[aria-busy="true"] .ac-prose { opacity: 0.4; transition: opacity var(--ac-dur-2); }
.ac-docs__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2); margin-block-end: var(--ac-s-4); color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-docs__crumbs a { color: inherit; text-decoration: none; }
.ac-docs__crumbs a:hover { color: var(--ac-text); }
.ac-docs__edit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ac-s-3); margin-block-start: var(--ac-s-8); padding-block-start: var(--ac-s-5); border-block-start: 1px solid var(--ac-border); color: var(--ac-muted); font-size: var(--ac-fs-sm); }

/* ---------------------------------------------------------------- Markdown editor */
.ac-mde { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--ac-border); border-radius: var(--ac-r-2xl); background: var(--ac-surface-1); overflow: hidden; min-block-size: 32rem; }
.ac-mde__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-1); padding: var(--ac-s-2); border-block-end: 1px solid var(--ac-border); background: var(--ac-bg-subtle); }
.ac-mde__sep { inline-size: 1px; block-size: 1.4rem; margin-inline: var(--ac-s-1); background: var(--ac-border); }
.ac-mde__tool { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 0; border-radius: var(--ac-r-md); background: none; color: var(--ac-text-soft); cursor: pointer; touch-action: manipulation; transition: background-color var(--ac-dur-1), color var(--ac-dur-1), transform var(--ac-dur-0) var(--ac-ease-out); }
.ac-mde__tool:hover { background: var(--ac-surface-1); color: var(--ac-text); box-shadow: 0 0 0 1px var(--ac-border); }
.ac-mde__tool:active { transform: scale(0.92); }
.ac-mde__tool:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-mde__tool[aria-pressed="true"] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-mde__tool .ac-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.ac-mde__spacer { flex: 1; }
.ac-mde__panes { display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
@media (min-width: 900px) { .ac-mde__panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ac-mde__pane + .ac-mde__pane { border-inline-start: 1px solid var(--ac-border); } }
.ac-mde__pane { min-inline-size: 0; min-block-size: 26rem; max-block-size: 70vh; overflow: auto; overscroll-behavior: contain; }
.ac-mde__src { display: block; inline-size: 100%; block-size: 100%; min-block-size: 26rem; padding: var(--ac-s-5); border: 0; outline: none; resize: none; background: none; color: var(--ac-text); font-family: var(--ac-font-mono); font-size: 0.92rem; line-height: 1.85; tab-size: 2; unicode-bidi: plaintext; }
.ac-mde__src:lang(fa), .ac-mde__src:lang(ar) { font-family: var(--ac-font-mono), var(--ac-font); }
.ac-mde__preview { padding: var(--ac-s-5) var(--ac-s-6); }
.ac-mde__preview > .ac-prose { font-size: 1rem; }
.ac-mde__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2) var(--ac-s-4); padding: var(--ac-s-2) var(--ac-s-4); border-block-start: 1px solid var(--ac-border); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-mde__status b { color: var(--ac-text); font-weight: var(--ac-fw-semibold); }
.ac-mde__saved { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.35em; transition: opacity var(--ac-dur-3); }
.ac-mde__saved[data-state="dirty"] { opacity: 0.5; }
@media (max-width: 899.98px) {
  .ac-mde[data-view="write"] .ac-mde__pane--preview, .ac-mde[data-view="preview"] .ac-mde__pane--src { display: none; }
  .ac-mde__pane { max-block-size: none; }
}
.ac-mde__pane--preview[data-flash] { animation: ac-prose-flash 500ms var(--ac-ease) both; }
@keyframes ac-prose-flash { from { background-color: var(--ac-accent-soft); } to { background-color: transparent; } }

/* print */
@media print {
  .ac-readbar, .ac-article__aside, .ac-share, .ac-comments, .ac-pager, .ac-anchor { display: none !important; }
  .ac-prose { font-size: 11pt; }
  .ac-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* article footer + blog toolbar */
.ac-article__foot { display: grid; gap: var(--ac-s-4); max-inline-size: 72ch; margin: var(--ac-s-10) auto 0; padding-block-start: var(--ac-s-5); border-block-start: 1px solid var(--ac-border); }
.ac-blog-bar { flex-wrap: wrap; gap: var(--ac-s-3); margin-block-end: var(--ac-s-5); }
.ac-blog-search { inline-size: min(100%, 20rem); }
@media (max-width: 639.98px) { .ac-blog-bar > .ac-cluster { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--ac-content-pad, 1rem)); padding-inline: var(--ac-content-pad, 1rem); } .ac-blog-search { inline-size: 100%; } }
.ac-article__card > .ac-prose, .ac-article__head, .ac-article__foot { max-inline-size: 46rem; margin-inline: auto; }
.ac-article__title { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); }
.ac-prose :is(td, th) > code, .ac-prose :is(td, th) > a > code { white-space: nowrap; overflow-wrap: normal; }
.ac-mde__src[dir="rtl"] { font-family: var(--ac-font); font-size: 0.98rem; }


/* ==== modules/pwa/pwa.css ==== */
/* PWA module — install invitation (sheet / banner / floating card / inline card / iOS steps), splash, standalone tweaks. */

/* ---------------------------------------------------------------- shared atoms */
.ac-install { display: grid; gap: var(--ac-s-5); }
.ac-install__hero { display: flex; align-items: center; gap: var(--ac-s-4); }
.ac-install__icon {
  flex: none; display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 22%;
  background: var(--ac-surface-2); overflow: hidden; color: var(--ac-ink);
  box-shadow: 0 0 0 1px var(--ac-border), 0 8px 20px -10px rgb(0 0 0 / 0.35);
}
.ac-install__icon img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ac-install__icon .ac-icon { inline-size: 45%; block-size: 45%; }
.ac-install__icon--sm { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 24%; box-shadow: 0 0 0 1px var(--ac-border); }
.ac-install__titles { min-width: 0; display: grid; gap: 2px; }
.ac-install__name { margin: 0; font-size: var(--ac-fs-2xl); font-weight: var(--ac-fw-bold, 700); line-height: var(--ac-lh-tight); letter-spacing: -0.01em; }
.ac-install__by { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-install__stars { color: var(--ac-warning, #f5a524); letter-spacing: 1px; font-size: 0.7em; margin-inline-start: 0.35em; }

.ac-install__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding-block: var(--ac-s-3);
  border-block: 1px solid var(--ac-border);
}
.ac-install__stat { display: grid; gap: 2px; justify-items: center; text-align: center; padding-inline: var(--ac-s-2); }
.ac-install__stat + .ac-install__stat { border-inline-start: 1px solid var(--ac-border); }
.ac-install__stat dt { font-weight: var(--ac-fw-semibold, 600); font-size: var(--ac-fs-lg); display: flex; flex-direction: column; align-items: center; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ac-install__stat dt .ac-install__stars { margin: 2px 0 0; font-size: 0.6rem; }
.ac-install__stat dd { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-xs); }

.ac-install__shots {
  display: flex; gap: var(--ac-s-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(var(--ac-s-5) * -1); padding-inline: var(--ac-s-5); padding-block-end: var(--ac-s-1); scrollbar-width: none;
}
.ac-install__shots::-webkit-scrollbar { display: none; }
.ac-install__shots img {
  flex: none; scroll-snap-align: start; block-size: 15rem; inline-size: auto; aspect-ratio: 9 / 19.5; object-fit: cover;
  border-radius: var(--ac-r-lg); background: var(--ac-surface-2); box-shadow: 0 0 0 1px var(--ac-border);
}
.ac-install__shots[data-ff="wide"] img { block-size: 11rem; aspect-ratio: 16 / 10; }
.ac-install__shots:focus-visible { outline: none; box-shadow: var(--ac-focus); border-radius: var(--ac-r-lg); }

.ac-install__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ac-s-3); }
.ac-install__benefits li { display: flex; gap: var(--ac-s-3); align-items: flex-start; }
.ac-install__benefits strong { display: block; font-weight: var(--ac-fw-semibold, 600); }
.ac-install__benefits small { display: block; color: var(--ac-muted); font-size: var(--ac-fs-sm); line-height: var(--ac-lh-snug); }
.ac-install__bicon { flex: none; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--ac-r-md); background: var(--ac-surface-2); color: var(--ac-ink); }
.ac-install__bicon .ac-icon { inline-size: 1.1rem; block-size: 1.1rem; }

.ac-install__actions { display: grid; grid-template-columns: 1fr auto; gap: var(--ac-s-2); }
.ac-install__actions--one { grid-template-columns: 1fr; margin-block-start: var(--ac-s-4); }
.ac-install__go { justify-content: center; }
.ac-install__note { margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--ac-s-1); color: var(--ac-muted); font-size: var(--ac-fs-xs); }

/* sheet variant: the dialog carries the content; tighten its chrome */
.ac-install-sheet .ac-dialog__head { padding-block-end: 0; }
.ac-install-sheet .ac-dialog__body { padding-block-start: 0; }
.ac-install-sheet .ac-install__hero { animation: ac-install-rise var(--ac-dur-4, 320ms) var(--ac-ease-out, ease-out) both; }
.ac-install-sheet .ac-install > :nth-child(n + 2) { animation: ac-install-rise var(--ac-dur-4, 320ms) var(--ac-ease-out, ease-out) both; animation-delay: 40ms; }
.ac-install-sheet .ac-install > :nth-child(n + 3) { animation-delay: 80ms; }
.ac-install-sheet .ac-install > :nth-child(n + 4) { animation-delay: 120ms; }
@keyframes ac-install-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- banner (top, full width) */
.ac-install-banner {
  position: fixed; z-index: var(--ac-z-toast); inset-block-start: calc(var(--ac-s-3) + var(--ac-safe-top, 0px)); inset-inline: var(--ac-s-3);
  margin-inline: auto; max-inline-size: 40rem; display: flex; align-items: center; gap: var(--ac-s-3);
  padding: var(--ac-s-2) var(--ac-s-2) var(--ac-s-2) var(--ac-s-3); padding-inline: var(--ac-s-3) var(--ac-s-2);
  background: var(--ac-glass-bg-strong, var(--ac-elevated)); -webkit-backdrop-filter: blur(var(--ac-glass-blur, 18px)) saturate(1.6); backdrop-filter: blur(var(--ac-glass-blur, 18px)) saturate(1.6);
  border: 1px solid var(--ac-glass-border, var(--ac-border)); border-radius: var(--ac-r-pill); box-shadow: var(--ac-shadow-lg);
  transition: transform var(--ac-dur-3) var(--ac-ease-out, ease-out), opacity var(--ac-dur-2) var(--ac-ease-out, ease-out);
}
.ac-install-banner[data-state="enter"], .ac-install-banner[data-state="exit"] { opacity: 0; transform: translateY(calc(-100% - var(--ac-s-4))); }
.ac-install-banner[data-state="exit"] { transition-duration: var(--ac-dur-2); }
.ac-install-banner__text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ac-install-banner__text strong { font-weight: var(--ac-fw-semibold, 600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-install-banner__text small { color: var(--ac-muted); font-size: var(--ac-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-install-banner__text .ac-install__stars { margin: 0; font-size: 0.6rem; }
.ac-install-banner__close, .ac-install-card__close {
  flex: none; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--ac-muted); cursor: pointer; transition: background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease);
}
.ac-install-banner__close:hover, .ac-install-card__close:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-install-banner__close:active, .ac-install-card__close:active { transform: scale(0.92); }
.ac-install-banner__close:focus-visible, .ac-install-card__close:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.ac-install-banner__close .ac-icon, .ac-install-card__close .ac-icon { inline-size: 1rem; block-size: 1rem; }

/* ---------------------------------------------------------------- floating card + inline settings card */
.ac-install-card {
  position: relative; display: grid; gap: var(--ac-s-3); padding: var(--ac-s-4);
  background: var(--ac-elevated); border: 1px solid var(--ac-border); border-radius: var(--ac-r-2xl);
}
.ac-install-card[data-variant="card"] {
  position: fixed; z-index: var(--ac-z-toast); inline-size: min(23rem, calc(100vw - 2 * var(--ac-s-3)));
  inset-block-end: calc(var(--ac-s-5) + var(--ac-safe-bottom, 0px)); inset-inline-end: calc(var(--ac-s-5) + var(--ac-safe-end, 0px));
  box-shadow: var(--ac-shadow-xl); transform-origin: 100% 100%;
  transition: transform var(--ac-dur-3) var(--ac-ease-spring, var(--ac-ease)), opacity var(--ac-dur-2) var(--ac-ease-out, ease-out);
}
[dir="rtl"] .ac-install-card[data-variant="card"] { transform-origin: 0 100%; }
.ac-install-card[data-variant="card"][data-state="enter"], .ac-install-card[data-variant="card"][data-state="exit"] { opacity: 0; transform: translateY(12px) scale(0.96); }
@media (max-width: 1023.98px) {
  .ac-install-card[data-variant="card"] { inset-inline: var(--ac-s-3); inline-size: auto; inset-block-end: calc(var(--ac-tabbar-h, 4rem) + var(--ac-safe-bottom, 0px) + var(--ac-s-3)); }
}
.ac-install-card__close { position: absolute; inset-block-start: var(--ac-s-2); inset-inline-end: var(--ac-s-2); }
.ac-install-card__head { display: flex; gap: var(--ac-s-3); align-items: center; padding-inline-end: var(--ac-s-6); }
.ac-install-card__head .ac-install__icon { inline-size: 3.25rem; block-size: 3.25rem; }
.ac-install-card__title { display: block; font-weight: var(--ac-fw-semibold, 600); font-size: var(--ac-fs-lg); }
.ac-install-card__text { margin: 2px 0 0; color: var(--ac-muted); font-size: var(--ac-fs-sm); line-height: var(--ac-lh-snug); }
.ac-install-card__chips { display: flex; flex-wrap: wrap; gap: var(--ac-s-1); }
.ac-install-card__chips .ac-chip { pointer-events: none; }
.ac-install-card__actions { display: flex; gap: var(--ac-s-2); align-items: center; }
.ac-install-card__actions .ac-btn--primary { flex: 1; justify-content: center; }
.ac-install-card[data-variant="inline"] .ac-install-card__actions .ac-btn--primary { flex: none; }

/* ---------------------------------------------------------------- iOS instructions (animated SVG) */
.ac-ios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ac-s-3); }
.ac-ios__step { display: flex; gap: var(--ac-s-4); align-items: center; padding: var(--ac-s-3); border-radius: var(--ac-r-xl); background: var(--ac-surface-2); }
.ac-ios__art { flex: none; inline-size: 5.5rem; block-size: 5.5rem; }
.ac-ios__frame { fill: var(--ac-elevated); stroke: var(--ac-border-strong); stroke-width: 1.5; }
.ac-ios__screen { fill: var(--ac-bg); }
.ac-ios__bar { fill: var(--ac-surface-3); }
.ac-ios__pulse { fill: color-mix(in oklab, var(--ac-info, #3b82f6) 22%, transparent); transform-box: fill-box; transform-origin: center; animation: ac-ios-pulse 1.6s var(--ac-ease-out, ease-out) infinite; }
.ac-ios__glyph { fill: none; stroke: var(--ac-info, #3b82f6); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ac-ios__glyph--inv { stroke: #fff; }
.ac-ios__panel { fill: var(--ac-elevated); stroke: var(--ac-border); }
.ac-ios__sheet { animation: ac-ios-sheet 2.4s var(--ac-ease-out, ease-out) infinite; }
.ac-ios__row { fill: var(--ac-surface-2); }
.ac-ios__row--hl { fill: color-mix(in oklab, var(--ac-info, #3b82f6) 18%, var(--ac-surface-2)); animation: ac-ios-hl 2.4s ease infinite; }
.ac-ios__plus { stroke: var(--ac-text); stroke-width: 1.4; stroke-linecap: round; }
.ac-ios__app { fill: var(--ac-surface-3); }
.ac-ios__mine { fill: var(--ac-ink); }
.ac-ios__new { transform-box: fill-box; transform-origin: center; animation: ac-ios-land 2.4s var(--ac-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) infinite; }
.ac-ios__text { display: grid; gap: 2px; min-width: 0; }
.ac-ios__text strong { font-weight: var(--ac-fw-semibold, 600); }
.ac-ios__text small { color: var(--ac-muted); font-size: var(--ac-fs-sm); line-height: var(--ac-lh-snug); }
.ac-ios__n { display: inline-grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: var(--ac-ink); color: var(--ac-ink-contrast, #fff); font-size: var(--ac-fs-xs); font-weight: 700; margin-block-end: 2px; }
.ac-ios__step { animation: ac-install-rise var(--ac-dur-4, 320ms) var(--ac-ease-out, ease-out) both; }
.ac-ios__step:nth-child(2) { animation-delay: 60ms; }
.ac-ios__step:nth-child(3) { animation-delay: 120ms; }
@keyframes ac-ios-pulse { 0% { transform: scale(0.7); opacity: 1; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ac-ios-sheet { 0% { transform: translateY(40px); opacity: 0; } 25%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes ac-ios-hl { 0%, 40% { opacity: 0.4; } 55%, 85% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes ac-ios-land { 0%, 20% { transform: translateY(-14px) scale(0.6); opacity: 0; } 45%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- splash + standalone */
.ac-splash {
  position: fixed; inset: 0; z-index: calc(var(--ac-z-tooltip, 900) + 10); display: grid; place-content: center; justify-items: center; gap: var(--ac-s-4);
  background: var(--ac-bg); color: var(--ac-text); transition: opacity 360ms var(--ac-ease-out, ease-out), transform 360ms var(--ac-ease-out, ease-out);
}
.ac-splash[data-state="out"] { opacity: 0; transform: scale(1.04); pointer-events: none; }
.ac-splash__mark { display: grid; place-items: center; inline-size: 5rem; block-size: 5rem; border-radius: 24%; background: var(--ac-ink); color: var(--ac-ink-contrast, #fff); box-shadow: var(--ac-shadow-lg); animation: ac-install-rise 420ms var(--ac-ease-out, ease-out) both; }
.ac-splash__mark svg, .ac-splash__mark img { inline-size: 55%; block-size: 55%; }
.ac-splash__name { font-weight: 700; font-size: var(--ac-fs-xl); letter-spacing: -0.01em; }
.ac-splash__bar { inline-size: 6rem; block-size: 3px; border-radius: 3px; background: var(--ac-surface-3); overflow: hidden; }
.ac-splash__bar span { display: block; inline-size: 40%; block-size: 100%; background: var(--ac-accent); border-radius: inherit; animation: ac-splash-bar 1s ease-in-out infinite; }
@keyframes ac-splash-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
[dir="rtl"] .ac-splash__bar span { animation-direction: reverse; }

html[data-standalone] { overscroll-behavior-y: none; }
html[data-standalone] body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
html[data-standalone] .ac-appbar, html[data-standalone] .ac-tabbar, html[data-standalone] .ac-dock { -webkit-user-select: none; user-select: none; }
/* window-controls-overlay: keep the floating top bar clear of the title-bar buttons */
@media (display-mode: window-controls-overlay) {
  .ac-appbar { padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px)); -webkit-app-region: drag; app-region: drag; }
  .ac-appbar a, .ac-appbar button, .ac-appbar input { -webkit-app-region: no-drag; app-region: no-drag; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-ios__pulse, .ac-ios__sheet, .ac-ios__row--hl, .ac-ios__new, .ac-splash__bar span { animation: none; }
}


/* ==== modules/support-chat/support-chat.css ==== */
/* Support chat module — floating launcher + Intercom-style panel. Tokens only; logical properties; RTL-aware origin. */
.ac-sc { --sc-accent: var(--ac-accent); --sc-accent-2: color-mix(in oklab, var(--sc-accent) 78%, #000); --sc-on: #fff; --sc-gap: 1.5rem; --sc-size: 3.5rem; position: fixed; z-index: calc(var(--ac-z-tabbar) + 2); inset-block-end: 0; inset-inline-end: 0; inline-size: 0; block-size: 0; }
.ac-sc[data-position="start"] { inset-inline: 0 auto; }

.ac-sc__launcher { position: fixed; inset-block-end: calc(var(--sc-gap) + var(--ac-safe-bottom)); inset-inline-end: calc(var(--sc-gap) + var(--ac-safe-end)); display: grid; place-items: center; inline-size: var(--sc-size); block-size: var(--sc-size); border-radius: 50%; background: linear-gradient(145deg, color-mix(in oklab, var(--sc-accent) 88%, #fff), var(--sc-accent-2)); color: var(--sc-on); box-shadow: 0 10px 28px -8px color-mix(in oklab, var(--sc-accent) 70%, transparent), 0 2px 6px rgb(0 0 0 / 0.12); cursor: pointer; transition: transform 220ms var(--ac-ease), box-shadow var(--ac-dur-2) var(--ac-ease), opacity var(--ac-dur-2) var(--ac-ease); -webkit-tap-highlight-color: transparent; }
.ac-sc[data-position="start"] .ac-sc__launcher { inset-inline: calc(var(--sc-gap) + var(--ac-safe-start)) auto; }
.ac-sc:not([data-ready]) .ac-sc__launcher { transform: scale(0.6); opacity: 0; }
.ac-sc__launcher:hover { transform: scale(1.06); box-shadow: 0 14px 34px -8px color-mix(in oklab, var(--sc-accent) 80%, transparent), 0 2px 6px rgb(0 0 0 / 0.12); }
.ac-sc__launcher:active { transform: scale(0.94); transition-duration: var(--ac-dur-0); }
.ac-sc__launcher:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ac-bg), 0 0 0 6px var(--sc-accent); }
.ac-sc__lic { grid-area: 1 / 1; display: grid; place-items: center; transition: transform 320ms var(--ac-ease-spring), opacity 180ms var(--ac-ease); }
.ac-sc__lic .ac-icon { inline-size: 1.6rem; block-size: 1.6rem; }
.ac-sc__lic--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.ac-sc[data-state="open"] .ac-sc__lic--open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.ac-sc[data-state="open"] .ac-sc__lic--close { opacity: 1; transform: none; }
.ac-sc__badge { position: absolute; inset-block-start: -0.2rem; inset-inline-end: -0.2rem; min-inline-size: 1.35rem; block-size: 1.35rem; padding-inline: 0.3rem; display: grid; place-items: center; border-radius: var(--ac-r-pill); background: var(--ac-danger); color: #fff; font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-bold); box-shadow: 0 0 0 2px var(--ac-bg); }
.ac-sc__badge[hidden] { display: none; }

.ac-sc__panel { position: fixed; inset-block-end: calc(var(--sc-gap) + var(--sc-size) + 0.85rem + var(--ac-safe-bottom)); inset-inline-end: calc(var(--sc-gap) + var(--ac-safe-end)); display: flex; flex-direction: column; inline-size: min(24rem, calc(100vw - 2 * var(--sc-gap))); block-size: min(41rem, calc(100dvh - var(--sc-size) - 3 * var(--sc-gap))); overflow: hidden; border-radius: 1.5rem; background: var(--ac-bg); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-xl); outline: none;
  transform-origin: bottom right; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.9); pointer-events: none;
  transition: transform 260ms var(--ac-ease), opacity 180ms var(--ac-ease), visibility 0s linear 260ms; }
[dir="rtl"] .ac-sc__panel, .ac-sc[data-position="start"] .ac-sc__panel { transform-origin: bottom left; }
[dir="rtl"] .ac-sc[data-position="start"] .ac-sc__panel { transform-origin: bottom right; }
.ac-sc[data-position="start"] .ac-sc__panel { inset-inline: calc(var(--sc-gap) + var(--ac-safe-start)) auto; }
.ac-sc[data-state="open"] .ac-sc__panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: transform 440ms cubic-bezier(0.34, 1.32, 0.64, 1), opacity 200ms var(--ac-ease), visibility 0s; }
.ac-sc__panel[data-dragging] { transition: none !important; }
.ac-sc__grab { display: none; }
.ac-sc__views { position: relative; flex: 1; min-block-size: 0; }
.ac-sc__view { position: absolute; inset: 0; display: flex; flex-direction: column; min-block-size: 0; background: var(--ac-bg); transition: transform 280ms var(--ac-ease), opacity 200ms var(--ac-ease); }
.ac-sc__view[data-entering] { transform: translateX(calc(32px * var(--ac-dir))); opacity: 0; transition: none; }
.ac-sc__view[data-entering="-1"] { transform: translateX(calc(-32px * var(--ac-dir))); }
.ac-sc__view[data-leaving] { transform: translateX(calc(-24px * var(--ac-dir) * var(--sc-out, 1))); opacity: 0; pointer-events: none; }

.ac-sc__icon { display: grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; color: var(--ac-text-soft); cursor: pointer; transition: background var(--ac-dur-1) var(--ac-ease), color var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-sc__icon:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-sc__icon:active { transform: var(--ac-press-sm); }
.ac-sc__icon:focus-visible, .ac-sc__icon:focus-within { outline: none; box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-sc__icon--light { color: color-mix(in oklab, var(--sc-on) 85%, transparent); }
.ac-sc__icon--light:hover { background: rgb(255 255 255 / 0.16); color: var(--sc-on); }

/* home */
.ac-sc__home { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ac-sc__hero { flex: none; padding: var(--ac-s-5) var(--ac-s-5) 3.25rem; background: radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--sc-accent) 70%, #fff) 0%, transparent 55%), linear-gradient(160deg, var(--sc-accent), var(--sc-accent-2)); color: var(--sc-on); }
.ac-sc__hero-top { display: flex; align-items: center; gap: var(--ac-s-2); }
.ac-sc__brand { display: inline-flex; align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-sm); }
.ac-sc__brand .ac-icon { inline-size: 1.25rem; block-size: 1.25rem; }
.ac-sc__team { display: inline-flex; margin-inline-start: auto; }
.ac-sc__tav { --ac-avatar: 2rem; box-shadow: 0 0 0 2px var(--sc-accent); }
.ac-sc__tav + .ac-sc__tav { margin-inline-start: -0.55rem; }
.ac-sc__greet { margin: var(--ac-s-6) 0 var(--ac-s-1); font-size: 1.75rem; font-weight: var(--ac-fw-bold); line-height: var(--ac-lh-tight); }
.ac-sc__greet-sub { margin: 0; font-size: var(--ac-fs-lg); opacity: 0.86; }
.ac-sc__scroll { flex: 1; display: grid; align-content: start; gap: var(--ac-s-3); padding: var(--ac-s-4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ac-sc__home .ac-sc__scroll { position: relative; margin-block-start: -2.25rem; overflow: visible; padding-block-start: 0; }
.ac-sc__card { display: grid; gap: var(--ac-s-2); padding: var(--ac-s-4); border-radius: 1.15rem; background: var(--ac-surface-1); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); text-align: start; color: inherit; }
.ac-sc__card h3 { display: flex; align-items: center; gap: var(--ac-s-1); margin: 0 0 var(--ac-s-1); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-sc__start { grid-template-columns: minmax(0, 1fr) auto; align-items: center; cursor: pointer; transition: transform 220ms var(--ac-ease), box-shadow 220ms var(--ac-ease), border-color var(--ac-dur-1) var(--ac-ease); }
.ac-sc__start:hover { transform: translateY(-2px); box-shadow: var(--ac-shadow-md); border-color: var(--ac-border-strong); }
.ac-sc__start:active { transform: var(--ac-press); transition-duration: var(--ac-dur-0); }
.ac-sc__start:focus-visible, .ac-sc__row:focus-visible, .ac-sc__article:focus-visible, .ac-sc__chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-sc__start-main { display: grid; gap: 2px; }
.ac-sc__start-main b { font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); }
.ac-sc__start-main small { display: inline-flex; align-items: center; gap: var(--ac-s-2); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-sc__send-ic { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--sc-accent); color: var(--sc-on); transition: transform 260ms var(--ac-ease-spring); }
.ac-sc__start:hover .ac-sc__send-ic { transform: translateX(calc(3px * var(--ac-dir))) rotate(calc(-8deg * var(--ac-dir))); }
.ac-sc__dot { flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--ac-faint); }
.ac-sc__dot[data-on="true"] { background: var(--ac-success); box-shadow: 0 0 0 3px var(--ac-success-soft); }
.ac-sc__row { position: relative; display: flex; align-items: center; gap: var(--ac-s-3); margin-inline: calc(-1 * var(--ac-s-2)); padding: var(--ac-s-2); border-radius: var(--ac-r-lg); text-align: start; cursor: pointer; transition: background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-sc__row:hover { background: var(--ac-hover); }
.ac-sc__row:active { transform: var(--ac-press); }
.ac-sc__row-main { display: grid; flex: 1; min-inline-size: 0; }
.ac-sc__row-main b { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-sc__row-main span { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-sc__row time { flex: none; align-self: flex-start; color: var(--ac-faint); font-size: var(--ac-fs-2xs); }
.ac-sc__unread { position: absolute; inset-inline-end: var(--ac-s-3); inset-block-end: var(--ac-s-3); inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--sc-accent); }
.ac-sc__search { display: flex; align-items: center; gap: var(--ac-s-2); block-size: 2.6rem; padding-inline: var(--ac-s-3); border-radius: var(--ac-r-pill); background: var(--ac-surface-2); border: 1px solid var(--ac-border); color: var(--ac-muted); transition: border-color var(--ac-dur-1) var(--ac-ease), box-shadow var(--ac-dur-2) var(--ac-ease); }
.ac-sc__search:focus-within { border-color: var(--ac-border-strong); box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-sc__search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-sm); outline: none; }
.ac-sc__articles { display: grid; }
.ac-sc__article { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-2); margin-inline: calc(-1 * var(--ac-s-2)); border-radius: var(--ac-r-lg); text-align: start; cursor: pointer; transition: background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-sc__article:hover { background: var(--ac-hover); }
.ac-sc__article:active { transform: var(--ac-press); }
.ac-sc__article > .ac-icon:first-child { flex: none; padding: 0.45rem; inline-size: 2.1rem; block-size: 2.1rem; border-radius: 50%; background: var(--ac-surface-3); color: var(--ac-text-soft); }
.ac-sc__article > span { display: grid; flex: 1; min-inline-size: 0; }
.ac-sc__article b { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); }
.ac-sc__article small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-sc__chev { color: var(--ac-faint); transition: translate var(--ac-dur-2) var(--ac-ease); }
.ac-sc__article:hover .ac-sc__chev { translate: calc(3px * var(--ac-dir)) 0; }
.ac-sc__none, .ac-sc__muted { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-sc__powered { display: flex; align-items: center; justify-content: center; gap: var(--ac-s-1); margin: var(--ac-s-1) 0 var(--ac-s-2); color: var(--ac-faint); font-size: var(--ac-fs-2xs); }

/* bar (chat / offline / article) */
.ac-sc__bar { flex: none; display: flex; align-items: center; gap: var(--ac-s-2); padding: var(--ac-s-3) var(--ac-s-3); background: var(--ac-surface-1); border-block-end: 1px solid var(--ac-border); }
.ac-sc__bar-av { position: relative; flex: none; }
.ac-sc__bar-av .ac-avatar { --ac-avatar: 2.4rem; }
.ac-sc__bar-av .ac-sc__dot { position: absolute; inset-block-end: 0; inset-inline-end: 0; box-shadow: 0 0 0 2px var(--ac-surface-1); }
.ac-sc__bar-main { display: grid; flex: 1; min-inline-size: 0; }
.ac-sc__bar-main b { font-size: var(--ac-fs-md); font-weight: var(--ac-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-sc__bar-main small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--ac-dur-2); }
.ac-sc__bar-main small[data-typing] { color: var(--sc-accent); }

/* conversation */
.ac-sc__msgs { flex: 1; min-block-size: 0; display: flex; flex-direction: column; gap: var(--ac-s-2); padding: var(--ac-s-4) var(--ac-s-3); overflow-y: auto; overscroll-behavior: contain; background: var(--ac-surface-2); scrollbar-width: thin; outline: none; }
.ac-sc__day { align-self: center; padding: 2px 0.7rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-1); border: 1px solid var(--ac-border); color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-sc__msg { display: flex; align-items: flex-end; gap: var(--ac-s-2); max-inline-size: 86%; }
.ac-sc__msg[data-mine="true"] { align-self: flex-end; }
.ac-sc__mav { --ac-avatar: 1.75rem; }
.ac-sc__bubble { display: grid; gap: var(--ac-s-1); padding: 0.55rem 0.8rem 0.35rem; border-radius: 1.1rem; border-end-start-radius: 0.35rem; background: var(--ac-surface-1); border: 1px solid var(--ac-border); font-size: var(--ac-fs-sm); line-height: 1.7; overflow-wrap: anywhere; }
.ac-sc__msg[data-mine="true"] .ac-sc__bubble { border-radius: 1.1rem; border-end-end-radius: 0.35rem; background: var(--sc-accent); border-color: transparent; color: var(--sc-on); }
.ac-sc__bubble p { margin: 0; white-space: pre-wrap; }
.ac-sc__meta { display: inline-flex; align-items: center; gap: 3px; justify-self: end; font-size: 0.625rem; opacity: 0.65; font-variant-numeric: tabular-nums; }
.ac-sc__receipt { display: inline-grid; }
.ac-sc__receipt .ac-icon { inline-size: 0.85rem; block-size: 0.85rem; }
.ac-sc__receipt[data-status="read"] { opacity: 1; }
.ac-sc__msg[data-mine="true"] .ac-sc__meta:has([data-status="read"]) { opacity: 0.95; }
.ac-sc__receipt[data-status="read"] .ac-icon { animation: ac-sc-pop 300ms var(--ac-ease-spring); }
.ac-sc__file { display: inline-flex; align-items: center; gap: var(--ac-s-2); padding: 0.35rem 0.55rem; border-radius: var(--ac-r-md); background: color-mix(in oklab, currentColor 10%, transparent); font-size: var(--ac-fs-xs); }
.ac-sc__file .ac-icon { flex: none; inline-size: 1rem; block-size: 1rem; }
.ac-sc__file small { opacity: 0.7; }
.ac-sc__msg[data-new] { animation: ac-sc-in 320ms var(--ac-ease) both; }
.ac-sc__msg[data-new] .ac-sc__bubble { animation: ac-sc-pop 360ms var(--ac-ease-spring) both; transform-origin: bottom left; }
.ac-sc__msg[data-mine="true"][data-new] .ac-sc__bubble { transform-origin: bottom right; }
[dir="rtl"] .ac-sc__msg[data-new] .ac-sc__bubble { transform-origin: bottom right; }
[dir="rtl"] .ac-sc__msg[data-mine="true"][data-new] .ac-sc__bubble { transform-origin: bottom left; }
@keyframes ac-sc-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ac-sc-pop { from { transform: scale(0.9); } }
.ac-sc__typing .ac-sc__bubble { display: flex; gap: 4px; padding: 0.75rem 0.85rem; animation: ac-sc-in 220ms var(--ac-ease) both; }
.ac-sc__typing .ac-sc__bubble i { inline-size: 0.42rem; block-size: 0.42rem; border-radius: 50%; background: var(--ac-muted); animation: ac-sc-dot 1.1s var(--ac-ease) infinite; }
.ac-sc__typing .ac-sc__bubble i:nth-child(2) { animation-delay: 0.15s; }
.ac-sc__typing .ac-sc__bubble i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ac-sc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.ac-sc__quick { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ac-s-2); padding: 0 var(--ac-s-3) var(--ac-s-3); background: var(--ac-surface-2); }
.ac-sc__quick[hidden] { display: none; }
.ac-sc__chip { block-size: 2.1rem; padding-inline: 0.85rem; border-radius: var(--ac-r-pill); border: 1px solid color-mix(in oklab, var(--sc-accent) 55%, transparent); background: var(--ac-surface-1); color: color-mix(in oklab, var(--sc-accent) 80%, var(--ac-text)); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); cursor: pointer; animation: ac-sc-in 260ms var(--ac-ease) both; transition: background var(--ac-dur-1) var(--ac-ease), color var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-sc__chip:nth-child(2) { animation-delay: 50ms; } .ac-sc__chip:nth-child(3) { animation-delay: 100ms; } .ac-sc__chip:nth-child(n+4) { animation-delay: 150ms; }
.ac-sc__chip:hover { background: var(--sc-accent); color: var(--sc-on); }
.ac-sc__chip:active { transform: var(--ac-press); }
.ac-sc__composer { position: relative; flex: none; display: grid; gap: var(--ac-s-1); padding: var(--ac-s-2) var(--ac-s-3) calc(var(--ac-s-2) + var(--ac-safe-bottom)); background: var(--ac-surface-1); border-block-start: 1px solid var(--ac-border); }
.ac-sc__composer textarea { inline-size: 100%; min-block-size: 2.5rem; max-block-size: 8.25rem; padding: var(--ac-s-2) var(--ac-s-1) 0; border: 0; background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-md); line-height: 1.6; resize: none; outline: none; }
.ac-sc__tools { display: flex; align-items: center; gap: 2px; }
.ac-sc__tools label { cursor: pointer; }
.ac-sc__send { display: grid; place-items: center; margin-inline-start: auto; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: var(--sc-accent); color: var(--sc-on); cursor: pointer; transition: transform 260ms var(--ac-ease-spring), background var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2) var(--ac-ease); }
.ac-sc__send:hover:not(:disabled) { transform: scale(1.06); }
.ac-sc__send:active:not(:disabled) { transform: scale(0.9); transition-duration: var(--ac-dur-0); }
.ac-sc__send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-sc__send:disabled { background: var(--ac-surface-3); color: var(--ac-faint); transform: scale(0.9); cursor: default; }
.ac-sc__emoji { position: absolute; inset-inline: var(--ac-s-3); inset-block-end: calc(100% + var(--ac-s-2)); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; padding: var(--ac-s-2); border-radius: var(--ac-r-xl); background: var(--ac-elevated); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-lg); transform-origin: bottom center; animation: ac-sc-emoji 200ms var(--ac-ease) both; }
.ac-sc__emoji[hidden] { display: none; }
.ac-sc__emoji button { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--ac-r-md); font-size: 1.25rem; cursor: pointer; transition: background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-1) var(--ac-ease-spring); }
.ac-sc__emoji button:hover { background: var(--ac-hover); transform: scale(1.18); }
.ac-sc__emoji button:active { transform: scale(0.92); }
@keyframes ac-sc-emoji { from { opacity: 0; transform: translateY(6px) scale(0.96); } }

/* offline + article */
.ac-sc__off-form { display: grid; gap: var(--ac-s-3); margin-block-start: var(--ac-s-2); }
.ac-sc__off-form label { display: grid; gap: var(--ac-s-1); font-size: var(--ac-fs-xs); color: var(--ac-text-soft); }
.ac-sc__done { display: grid; justify-items: center; gap: var(--ac-s-2); padding: var(--ac-s-8) var(--ac-s-4); text-align: center; }
.ac-sc__done > .ac-icon { inline-size: 3rem; block-size: 3rem; padding: 0.6rem; border-radius: 50%; background: var(--ac-success-soft); color: var(--ac-success-ink); animation: ac-sc-pop 420ms var(--ac-ease-spring) both; }
.ac-sc__done h3 { margin: 0; font-size: var(--ac-fs-lg); }
.ac-sc__done p { margin: 0 0 var(--ac-s-2); color: var(--ac-muted); font-size: var(--ac-fs-sm); }
.ac-sc__article-body p { margin: 0; color: var(--ac-text-soft); font-size: var(--ac-fs-sm); line-height: 1.9; }
.ac-sc__article-body h3 { font-size: var(--ac-fs-lg); }
.ac-sc__art-ic { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--ac-r-lg); background: color-mix(in oklab, var(--sc-accent) 14%, transparent); color: var(--sc-accent); }
.ac-sc__helpful { display: flex; align-items: center; gap: var(--ac-s-1); margin-block-start: var(--ac-s-3); padding-block-start: var(--ac-s-3); border-block-start: 1px solid var(--ac-border); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-sc__helpful > span:first-child { flex: 1; display: inline-flex; align-items: center; gap: var(--ac-s-1); }

/* hide the launcher under pushed phone screens and foreign modal layers */
html[data-ac-stacked] .ac-sc:not([data-state="open"]) .ac-sc__launcher, html[data-scroll-locked] .ac-sc:not([data-locked]) .ac-sc__launcher { opacity: 0; transform: scale(0.6); pointer-events: none; }

@media (max-width: 1023.98px) {
  .ac-sc { --sc-gap: 1rem; --sc-size: 3.25rem; }
  .ac-sc__launcher { inset-block-end: calc(var(--ac-tabbar-h) + var(--ac-safe-bottom) + 1.6rem); }
  .ac-sc__panel { inset-block-end: calc(var(--ac-tabbar-h) + var(--ac-safe-bottom) + var(--sc-size) + 2.4rem); block-size: min(38rem, calc(100dvh - var(--ac-tabbar-h) - var(--sc-size) - 4.5rem)); }
}
@media (max-width: 639.98px) {
  .ac-sc__panel { inset: 0; inline-size: auto; block-size: auto; border-radius: 0; border: 0; padding-block-start: var(--ac-safe-top); transform: translateY(100%); opacity: 1; transform-origin: center bottom;
    transition: transform 300ms var(--ac-ease), visibility 0s linear 300ms; }
  .ac-sc[data-position] .ac-sc__panel { inset: 0; }
  .ac-sc[data-state="open"] .ac-sc__panel { transform: none; transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; }
  .ac-sc[data-state="open"] .ac-sc__launcher { opacity: 0; transform: scale(0.6); pointer-events: none; }
  .ac-sc__grab { display: block; position: absolute; z-index: 2; inset-block-start: calc(var(--ac-safe-top) + 6px); inset-inline-start: 50%; inline-size: 2.5rem; block-size: 4px; margin-inline-start: -1.25rem; border-radius: 4px; background: color-mix(in oklab, var(--ac-text) 25%, transparent); }
  .ac-sc__bar { padding-block-start: var(--ac-s-4); }
  .ac-sc__hero { padding-block-start: var(--ac-s-6); }
  .ac-sc__msg { max-inline-size: 90%; }
  .ac-sc__composer textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-sc__panel, .ac-sc[data-state="open"] .ac-sc__panel { transform: none; transition: opacity 160ms linear, visibility 0s linear 160ms; }
  .ac-sc[data-state="open"] .ac-sc__panel { transition: opacity 160ms linear; }
}


/* ==== modules/terminal/terminal.css ==== */
/* Terminal module: always a dark, LTR surface (like a payment-card visual), accent prompt. Tokens for accent/radius/motion. */
.ac-term { --_bg: #111113; --_fg: #e7e7ea; --_mute: #8b8b93; --_ok: #4ade80; --_warn: #fbbf24; --_err: #f87171; display: flex; flex-direction: column; min-block-size: 18rem; border-radius: var(--ac-r-lg); background: var(--_bg); color: var(--_fg); direction: ltr; text-align: start; overflow: hidden; font-family: var(--ac-font-mono); font-size: 0.8rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ac-term[aria-busy="true"] .ac-term__run { opacity: 0.5; }
.ac-term__bar { display: flex; align-items: center; gap: 6px; padding: 0.6rem 0.85rem; border-block-end: 1px solid rgba(255, 255, 255, 0.07); }
.ac-term__bar i { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: #ff5f57; }
.ac-term__bar i:nth-child(2) { background: #febc2e; }
.ac-term__bar i:nth-child(3) { background: #28c840; }
.ac-term__bar span { margin-inline-start: auto; color: var(--_mute); font-size: 0.7rem; }
.ac-term__out { flex: 1 1 0; min-block-size: 10rem; max-block-size: 20rem; overflow: auto; padding: 0.75rem 0.85rem; line-height: 1.6; overscroll-behavior: contain; white-space: nowrap; }
.ac-term__out:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: -2px; }
.ac-term__line + .ac-term__line { margin-block-start: 2px; }
.ac-term__line--echo { margin-block-start: var(--ac-s-2) !important; }
.ac-term__line--muted, .ac-term .t-muted { color: var(--_mute); }
.ac-term__line--ok, .ac-term .t-ok { color: var(--_ok); }
.ac-term__line--warn, .ac-term .t-warn { color: var(--_warn); }
.ac-term__line--err, .ac-term .t-err { color: var(--_err); }
.ac-term__prompt, .ac-term .t-cmd { color: var(--ac-accent); font-weight: 600; }
.ac-term__form { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.55rem; padding-inline: 0.85rem 0.55rem; border-block-start: 1px solid rgba(255, 255, 255, 0.07); }
.ac-term__input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: max(16px, 0.8rem); caret-color: var(--ac-accent); outline: none; }
.ac-term__input::placeholder { color: #55555c; }
.ac-term__run { display: grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--ac-accent); color: var(--ac-accent-contrast); transition: transform var(--ac-dur-2) var(--ac-ease-out), filter var(--ac-dur-2); }
.ac-term__run:hover { filter: brightness(1.08); }
.ac-term__run:active { transform: var(--ac-press); }
.ac-term__run:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-term__chips { display: flex; gap: 6px; padding: 0 0.85rem 0.75rem; overflow-x: auto; scrollbar-width: none; }
.ac-term__chip { flex: none; min-block-size: 2rem; padding-inline: 0.75rem; border-radius: var(--ac-r-pill); background: rgba(255, 255, 255, 0.08); color: var(--_fg); font: inherit; font-size: 0.72rem; transition: background var(--ac-dur-2), transform var(--ac-dur-2) var(--ac-ease-out); }
.ac-term__chip:hover { background: rgba(255, 255, 255, 0.15); }
.ac-term__chip:active { transform: var(--ac-press); }
.ac-term__chip:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }


/* ==== modules/tickets/tickets.css ==== */
/* Tickets module — inbox, ticket detail, composer, SLA chips, create modal, customer tracking. Tokens only; logical properties. */
.ac-tk-inbox__bar { display: flex; align-items: center; gap: var(--ac-s-3); padding: 0 var(--ac-card-pad) var(--ac-s-3); overflow-x: auto; scrollbar-width: none; }
.ac-tk-inbox__bar::-webkit-scrollbar { display: none; }
.ac-tk-views { flex: none; }
.ac-tk-views .ac-segmented__item { gap: var(--ac-s-2); }
.ac-tk-views__n { min-inline-size: 1.35rem; padding: 1px 0.4rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-3); color: var(--ac-text-soft); font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); line-height: 1.4; text-align: center; transition: background var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2) var(--ac-ease); }
.ac-tk-views__n[data-alert] { background: var(--ac-danger-soft); color: var(--ac-danger-ink); }
.ac-tk-views .ac-segmented__item[aria-checked="true"] .ac-tk-views__n:not([data-alert]) { background: color-mix(in oklab, currentColor 18%, transparent); color: inherit; }

.ac-tk-subj { display: grid; gap: 3px; min-inline-size: 0; max-inline-size: 26rem; color: inherit; text-decoration: none; border-radius: var(--ac-r-sm); outline-offset: 3px; }
.ac-tk-subj__top { display: inline-flex; align-items: center; gap: var(--ac-s-2); color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-tk-subj__id { font-size: var(--ac-fs-2xs); letter-spacing: 0.01em; }
.ac-tk-subj__ch, .ac-tk-subj__n { display: inline-flex; align-items: center; gap: 3px; }
.ac-tk-subj__ch .ac-icon, .ac-tk-subj__n .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; }
.ac-tk-subj__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ac-fw-semibold); transition: color var(--ac-dur-1) var(--ac-ease); }
.ac-tk-subj:hover .ac-tk-subj__title { color: var(--ac-accent-ink); }
.ac-tk-subj:active { transform: var(--ac-press); }
.ac-tk-person { display: inline-flex; align-items: center; gap: var(--ac-s-2); min-inline-size: 0; max-inline-size: 11rem; }
.ac-tk-person--none { color: var(--ac-muted); }
.ac-tk-noone { background: var(--ac-surface-3); color: var(--ac-muted); }
.ac-tk-noone .ac-icon { inline-size: 60%; block-size: 60%; }

.ac-tk-chip, .ac-tk-sla { --_tone: var(--ac-muted); display: inline-flex; align-items: center; gap: 0.35rem; block-size: 1.5rem; padding-inline: 0.55rem; border-radius: var(--ac-r-pill); background: color-mix(in oklab, var(--_tone) 12%, transparent); color: color-mix(in oklab, var(--_tone) 72%, var(--ac-text)); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); white-space: nowrap; line-height: 1; }
.ac-tk-chip::before { content: ""; inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: var(--_tone); }
.ac-tk-sla .ac-icon { inline-size: 0.85rem; block-size: 0.85rem; }
.ac-tk-sla bdi { font-variant-numeric: tabular-nums; }
.ac-tk-sla[data-overdue] .ac-icon { animation: ac-tk-ring 1.6s var(--ac-ease) infinite; transform-origin: 50% 20%; }
@keyframes ac-tk-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 85% { transform: rotate(12deg); } 92% { transform: rotate(-6deg); } }
.ac-tk-prio { --_tone: var(--ac-muted); display: inline-flex; align-items: flex-end; gap: 2px; font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); white-space: nowrap; }
.ac-tk-prio > i { inline-size: 3px; border-radius: 2px; background: var(--ac-border-strong); }
.ac-tk-prio > i:nth-child(1) { block-size: 0.45rem; } .ac-tk-prio > i:nth-child(2) { block-size: 0.7rem; } .ac-tk-prio > i:nth-child(3) { block-size: 0.95rem; margin-inline-end: 0.4rem; }
.ac-tk-prio[data-level="low"] > i:nth-child(-n+1), .ac-tk-prio[data-level="normal"] > i:nth-child(-n+2), .ac-tk-prio[data-level="high"] > i, .ac-tk-prio[data-level="urgent"] > i { background: var(--_tone); }
.ac-tk-prio[data-level="urgent"] { color: var(--ac-danger-ink); }

/* ---- detail ---- */
.ac-tk-detail { container-type: inline-size; min-inline-size: 0; }
.ac-tk-detail__grid { display: grid; gap: var(--ac-gap); align-items: start; }
.ac-tk-detail__grid > .ac-tk-side { display: none; }
@container (min-width: 56rem) {
  .ac-tk-detail__grid { grid-template-columns: minmax(0, 1fr) 20.5rem; }
  .ac-tk-detail__grid > .ac-tk-side { display: grid; position: sticky; inset-block-start: calc(var(--ac-appbar-h) + var(--ac-s-4)); }
  .ac-tk-details-btn { display: none; }
  .ac-tk-conv { block-size: clamp(34rem, calc(100dvh - 12.5rem), 62rem); }
  .ac-tk-thread { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
}
.ac-tk-conv { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; background: var(--ac-surface-1); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); }
.ac-tk-conv__head { display: flex; align-items: flex-start; gap: var(--ac-s-3); padding: var(--ac-s-4) var(--ac-card-pad); border-block-end: 1px solid var(--ac-border); }
.ac-tk-conv__titles { display: grid; gap: var(--ac-s-1); flex: 1; min-inline-size: 0; }
.ac-tk-conv__eyebrow { display: flex; align-items: center; gap: var(--ac-s-1); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-tk-conv__title { margin: 0; font-size: var(--ac-fs-lg); font-weight: var(--ac-fw-semibold); line-height: var(--ac-lh-snug); }
.ac-tk-conv__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-2); margin-block-start: var(--ac-s-1); }
.ac-tk-conv__tools { display: flex; gap: 2px; flex: none; }
.ac-tk-back { flex: none; margin-inline-start: calc(-1 * var(--ac-s-2)); }
.ac-tk-thread { display: flex; flex-direction: column; gap: var(--ac-s-4); padding: var(--ac-s-5) var(--ac-card-pad); background: var(--ac-surface-2); min-block-size: 10rem; scrollbar-width: thin; outline: none; }
.ac-tk-msg { display: flex; align-items: flex-end; gap: var(--ac-s-2); max-inline-size: min(84%, 40rem); }
.ac-tk-msg[data-mine] { flex-direction: row-reverse; align-self: flex-end; }
.ac-tk-msg__body { display: grid; gap: var(--ac-s-1); min-inline-size: 0; }
.ac-tk-msg[data-mine] .ac-tk-msg__body { justify-items: end; }
.ac-tk-msg__meta { display: flex; align-items: baseline; gap: var(--ac-s-2); padding-inline: var(--ac-s-1); font-size: var(--ac-fs-2xs); color: var(--ac-muted); }
.ac-tk-msg__meta b { color: var(--ac-text-soft); font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-xs); }
.ac-tk-bubble { padding: 0.65rem 0.9rem; border-radius: 1.15rem; border-end-start-radius: 0.35rem; background: var(--ac-surface-1); border: 1px solid var(--ac-border); font-size: var(--ac-fs-md); line-height: 1.75; overflow-wrap: anywhere; }
.ac-tk-msg[data-mine] .ac-tk-bubble { border-radius: 1.15rem; border-end-end-radius: 0.35rem; background: var(--ac-ink); border-color: transparent; color: var(--ac-ink-contrast); }
.ac-tk-bubble p, .ac-tk-note p { margin: 0; white-space: pre-wrap; }
.ac-tk-note { align-self: flex-end; display: grid; gap: var(--ac-s-2); inline-size: min(88%, 40rem); padding: var(--ac-s-3) var(--ac-s-4); border-radius: var(--ac-r-lg); background: var(--ac-warning-soft); border: 1px dashed color-mix(in oklab, var(--ac-warning) 55%, transparent); color: var(--ac-text); font-size: var(--ac-fs-sm); line-height: 1.75; }
.ac-tk-note__head { display: flex; align-items: center; gap: var(--ac-s-1); color: var(--ac-warning-ink); font-size: var(--ac-fs-xs); }
.ac-tk-note__head span { color: var(--ac-text-soft); }
.ac-tk-note__head time, .ac-tk-sys time { margin-inline-start: auto; color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-tk-sys { align-self: center; display: inline-flex; align-items: center; gap: var(--ac-s-2); max-inline-size: 100%; padding: 0.3rem 0.75rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-1); border: 1px solid var(--ac-border); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-tk-sys time::before { content: "·"; margin-inline-end: var(--ac-s-2); }
.ac-tk-thread > [data-new] { animation: ac-tk-in 280ms var(--ac-ease) both; }
.ac-tk-msg[data-new] .ac-tk-bubble { transform-origin: bottom left; animation: ac-tk-pop 320ms var(--ac-ease-spring) both; }
.ac-tk-msg[data-mine][data-new] .ac-tk-bubble { transform-origin: bottom right; }
[dir="rtl"] .ac-tk-msg[data-new] .ac-tk-bubble { transform-origin: bottom right; }
[dir="rtl"] .ac-tk-msg[data-mine][data-new] .ac-tk-bubble { transform-origin: bottom left; }
@keyframes ac-tk-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ac-tk-pop { from { transform: scale(0.94); } }

.ac-tk-files { display: flex; flex-wrap: wrap; gap: var(--ac-s-2); }
.ac-tk-file { display: inline-flex; align-items: center; gap: var(--ac-s-2); max-inline-size: 100%; block-size: 2.25rem; padding-inline: 0.6rem 0.75rem; border-radius: var(--ac-r-md); background: var(--ac-surface-1); border: 1px solid var(--ac-border); font-size: var(--ac-fs-xs); transition: border-color var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-tk-file:hover { border-color: var(--ac-border-strong); }
.ac-tk-file > .ac-icon { flex: none; inline-size: 1rem; block-size: 1rem; color: var(--ac-info); }
.ac-tk-file[data-type="image"] > .ac-icon { color: var(--ac-success); }
.ac-tk-file[data-type="pdf"] > .ac-icon { color: var(--ac-danger); }
.ac-tk-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 12rem; font-weight: var(--ac-fw-medium); }
.ac-tk-file small { color: var(--ac-muted); }
.ac-tk-file__x { display: grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; margin-inline-end: -0.3rem; border-radius: 50%; color: var(--ac-muted); }
.ac-tk-file__x:hover { background: var(--ac-hover); color: var(--ac-danger); }
.ac-tk-file__x .ac-icon { inline-size: 0.8rem; block-size: 0.8rem; }

/* composer */
.ac-tk-composer { display: grid; gap: var(--ac-s-2); padding: var(--ac-s-3) var(--ac-card-pad) var(--ac-s-4); background: var(--ac-surface-1); border-block-start: 1px solid var(--ac-border); border-end-start-radius: var(--ac-r-xl); border-end-end-radius: var(--ac-r-xl); }
.ac-tk-composer__modes { display: flex; align-items: center; gap: var(--ac-s-1); }
.ac-tk-composer__modes [role="tab"] { display: inline-flex; align-items: center; gap: var(--ac-s-1); block-size: 2rem; padding-inline: 0.75rem; border-radius: var(--ac-r-pill); color: var(--ac-muted); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-semibold); transition: background var(--ac-dur-1) var(--ac-ease), color var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-tk-composer__modes [role="tab"]:hover { background: var(--ac-hover); color: var(--ac-text); }
.ac-tk-composer__modes [role="tab"]:active { transform: var(--ac-press); }
.ac-tk-composer__modes [role="tab"][aria-selected="true"] { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-tk-composer[data-mode="note"] [data-tk-mode="note"][aria-selected="true"] { background: var(--ac-warning); color: #1a1205; }
.ac-tk-composer__hint { margin-inline-start: auto; color: var(--ac-warning-ink); font-size: var(--ac-fs-2xs); }
.ac-tk-composer__box { display: grid; gap: var(--ac-s-2); padding: var(--ac-s-2) var(--ac-s-2) var(--ac-s-2) var(--ac-s-2); border-radius: var(--ac-r-lg); background: var(--ac-surface-2); border: 1px solid var(--ac-border); transition: border-color var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2) var(--ac-ease), background var(--ac-dur-2) var(--ac-ease); }
.ac-tk-composer__box:focus-within { border-color: var(--ac-border-strong); box-shadow: 0 0 0 4px var(--ac-ring); background: var(--ac-surface-1); }
.ac-tk-composer[data-mode="note"] .ac-tk-composer__box { background: var(--ac-warning-soft); border-color: color-mix(in oklab, var(--ac-warning) 50%, transparent); border-style: dashed; }
.ac-tk-composer__input { inline-size: 100%; min-block-size: 3.2rem; max-block-size: 13.75rem; padding: var(--ac-s-2) var(--ac-s-2) 0; border: 0; background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-md); line-height: 1.7; resize: none; outline: none; }
.ac-tk-composer__files:empty { display: none; }
.ac-tk-composer__files { padding-inline: var(--ac-s-1); }
.ac-tk-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); }
.ac-tk-composer__tools { display: flex; gap: 2px; }
.ac-tk-composer__tools label { cursor: pointer; }
.ac-tk-composer__tools label:focus-within { box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-tk-composer__send { display: flex; gap: 1px; }
.ac-tk-composer__send > [data-tk-send]:has(+ .ac-tk-send-more) { border-start-end-radius: 0.35rem; border-end-end-radius: 0.35rem; }
.ac-tk-send-more { border-start-start-radius: 0.35rem; border-end-start-radius: 0.35rem; }
.ac-tk-composer[data-mode="note"] [data-tk-send] { background: var(--ac-warning); color: #1a1205; }

/* side panels */
.ac-tk-side { gap: var(--ac-gap); align-content: start; min-inline-size: 0; }
.ac-tk-panel { display: grid; gap: var(--ac-s-3); padding: var(--ac-s-4) var(--ac-s-5); background: var(--ac-surface-1); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); min-inline-size: 0; }
.ac-tk-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); }
.ac-tk-panel__head h3 { display: inline-flex; align-items: center; gap: var(--ac-s-2); margin: 0; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-tk-muted { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-tk-slacard { --_tone: var(--ac-success); }
.ac-tk-slacard__clock { font-size: 2rem; font-weight: var(--ac-fw-semibold); letter-spacing: 0.02em; line-height: 1; direction: ltr; text-align: start; color: color-mix(in oklab, var(--_tone) 55%, var(--ac-text)); }
.ac-tk-slacard__bar { block-size: 0.4rem; border-radius: var(--ac-r-pill); background: var(--ac-surface-3); overflow: hidden; }
.ac-tk-slacard__bar i { display: block; block-size: 100%; border-radius: inherit; background: var(--_tone); transform-origin: right; transform: scaleX(0); transition: transform 600ms var(--ac-ease); }
[dir="ltr"] .ac-tk-slacard__bar i { transform-origin: left; }
.ac-tk-slacard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-tk-props { display: grid; gap: var(--ac-s-2); }
.ac-tk-prop { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: var(--ac-s-2); font-size: var(--ac-fs-sm); }
.ac-tk-prop > span { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-tk-prop .ac-select { block-size: 2.25rem; min-block-size: 2.25rem; font-size: var(--ac-fs-sm); }
.ac-tk-prop--ro b { display: inline-flex; align-items: center; gap: var(--ac-s-1); min-block-size: 2rem; font-weight: var(--ac-fw-medium); }
.ac-tk-prop--ro b .ac-icon { color: var(--ac-muted); }
.ac-tk-tags { display: grid; gap: var(--ac-s-2); padding-block-start: var(--ac-s-3); border-block-start: 1px solid var(--ac-border); }
.ac-tk-tags__label { color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-tk-tags__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-s-1); }
.ac-tk-tag { gap: var(--ac-s-1); }
.ac-tk-tags__input { flex: 1 1 6rem; min-inline-size: 6rem; block-size: 2rem; padding-inline: var(--ac-s-2); border: 1px dashed var(--ac-border-strong); border-radius: var(--ac-r-pill); background: transparent; color: var(--ac-text); font: inherit; font-size: var(--ac-fs-xs); outline: none; transition: border-color var(--ac-dur-1) var(--ac-ease); }
.ac-tk-tags__input:focus { border-style: solid; border-color: var(--ac-ink); }
.ac-tk-cust { display: flex; align-items: center; gap: var(--ac-s-3); min-inline-size: 0; }
.ac-tk-cust > div { display: grid; min-inline-size: 0; }
.ac-tk-cust a { color: var(--ac-muted); font-size: var(--ac-fs-xs); overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ac-tk-cust a:hover { color: var(--ac-accent-ink); }
.ac-tk-csat { display: flex; align-items: center; gap: var(--ac-s-3); }
.ac-tk-csat--empty { justify-content: space-between; }
.ac-tk-csat__face { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--ac-success-soft); color: var(--ac-success-ink); }
.ac-tk-csat__face[data-score="3"] { background: var(--ac-warning-soft); color: var(--ac-warning-ink); }
.ac-tk-csat__face[data-score="1"], .ac-tk-csat__face[data-score="2"] { background: var(--ac-danger-soft); color: var(--ac-danger-ink); }
.ac-tk-csat b { margin-inline-start: auto; font-size: var(--ac-fs-xs); color: var(--ac-muted); }
.ac-tk-log { position: relative; display: grid; gap: var(--ac-s-3); margin: 0; padding: 0; list-style: none; }
.ac-tk-log::before { content: ""; position: absolute; inset-block: 0.4rem; inset-inline-start: 0.28rem; inline-size: 1px; background: var(--ac-border); }
.ac-tk-log li { position: relative; display: grid; grid-template-columns: 0.6rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--ac-s-3); font-size: var(--ac-fs-xs); color: var(--ac-text-soft); }
.ac-tk-log li > i { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--ac-surface-1); border: 2px solid var(--ac-border-strong); transform: translateY(1px); }
.ac-tk-log li[data-from="agent"] > i { border-color: var(--ac-ink); }
.ac-tk-log li[data-from="note"] > i { border-color: var(--ac-warning); }
.ac-tk-log li[data-from="customer"] > i { border-color: var(--ac-info); }
.ac-tk-log li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-tk-log time { color: var(--ac-faint); font-size: var(--ac-fs-2xs); white-space: nowrap; }
.ac-tk-side-sheet .ac-tk-side { display: grid; }
.ac-tk-side-sheet .ac-tk-panel { padding-inline: var(--ac-s-4); }

/* canned replies */
.ac-tk-canned { display: grid; gap: var(--ac-s-2); inline-size: min(23rem, calc(100vw - 2rem)); }
.ac-tk-canned-pop { padding: var(--ac-s-2); }
.ac-tk-canned__search { inline-size: 100%; }
.ac-tk-canned__list { display: grid; gap: 2px; max-block-size: 18rem; overflow-y: auto; scrollbar-width: thin; }
.ac-tk-canned__item { display: grid; gap: 2px; padding: var(--ac-s-2) var(--ac-s-3); border-radius: var(--ac-r-md); text-align: start; transition: background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-tk-canned__item b { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-tk-canned__item span { color: var(--ac-muted); font-size: var(--ac-fs-xs); line-height: 1.6; }
.ac-tk-canned__item:hover, .ac-tk-canned__item[aria-selected="true"] { background: var(--ac-hover); }
.ac-tk-canned__item:active { transform: var(--ac-press); }
.ac-tk-canned__none { padding: var(--ac-s-4); text-align: center; }

/* screen mode: fills a pushed phone screen or a drawer */
.ac-tk-detail[data-screen] { display: flex; flex-direction: column; block-size: 100%; min-block-size: 0; }
.ac-tk-detail[data-screen] > .ac-tk-detail__grid { flex: 1; min-block-size: 0; display: flex; align-items: stretch; }
.ac-tk-detail[data-screen] .ac-tk-conv { flex: 1; block-size: auto; border: 0; border-radius: 0; }
.ac-tk-detail[data-screen] .ac-tk-thread { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.ac-tk-detail[data-screen] .ac-tk-composer { border-radius: 0; padding-block-end: calc(var(--ac-s-3) + var(--ac-safe-bottom)); }
.ac-tk-drawer .ac-dialog { padding: 0; }
.ac-tk-drawer .ac-dialog__body { display: flex; flex-direction: column; flex: 1; min-block-size: 0; padding: 0; overflow: hidden; }

@media (max-width: 1023.98px) {
  .ac-tk-detail:not([data-screen]) .ac-tk-composer { position: sticky; inset-block-end: calc(var(--ac-tabbar-h) + var(--ac-safe-bottom) + var(--ac-s-4)); z-index: 2; margin-inline: var(--ac-s-2); margin-block-end: var(--ac-s-2); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); box-shadow: var(--ac-shadow-lg); }
}
@media (max-width: 639.98px) {
  .ac-tk-conv__head { padding-inline: var(--ac-s-4); }
  .ac-tk-thread { padding-inline: var(--ac-s-3); }
  .ac-tk-msg { max-inline-size: 92%; }
  .ac-tk-msg > .ac-avatar { display: none; }
  .ac-tk-note { inline-size: 96%; }
  .ac-tk-composer { padding-inline: var(--ac-s-3); }
  .ac-tk-composer__hint { display: none; }
  .ac-tk-conv__title { font-size: var(--ac-fs-md); }
  .ac-tk-person { max-inline-size: 8rem; }
}

/* create modal */
.ac-tk-create { display: grid; gap: var(--ac-s-4); }
.ac-tk-create__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ac-s-2); }
.ac-tk-cat { position: relative; cursor: pointer; }
.ac-tk-cat input { position: absolute; opacity: 0; pointer-events: none; }
.ac-tk-cat > span { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 3rem; padding: var(--ac-s-2) var(--ac-s-3); border-radius: var(--ac-r-lg); border: 1px solid var(--ac-border); background: var(--ac-surface-1); font-size: var(--ac-fs-sm); transition: border-color var(--ac-dur-1) var(--ac-ease), background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-tk-cat > span .ac-icon { flex: none; padding: 0.35rem; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; background: var(--ac-surface-3); color: var(--ac-text-soft); transition: background var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2) var(--ac-ease); }
.ac-tk-cat > span b { font-weight: var(--ac-fw-medium); }
.ac-tk-cat:hover > span { border-color: var(--ac-border-strong); }
.ac-tk-cat:active > span { transform: var(--ac-press); }
.ac-tk-cat input:checked + span { border-color: var(--ac-ink); box-shadow: inset 0 0 0 1px var(--ac-ink); }
.ac-tk-cat input:checked + span .ac-icon { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-tk-cat input:focus-visible + span { box-shadow: 0 0 0 3px var(--ac-ring); }
@media (max-width: 639.98px) { .ac-tk-create__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* customer tracking */
.ac-tk-track { container-type: inline-size; }
.ac-tk-track__list { display: grid; gap: var(--ac-s-4); margin: 0; padding: 0; list-style: none; }
.ac-tk-track__step { position: relative; display: flex; align-items: center; gap: var(--ac-s-3); }
.ac-tk-track__step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 1rem; inset-block-start: 2.1rem; block-size: calc(100% - 0.9rem); inline-size: 2px; border-radius: 2px; background: var(--ac-border); }
.ac-tk-track__step[data-state="done"]:not(:last-child)::after { background: var(--ac-ink); }
.ac-tk-track__dot { display: grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--ac-surface-3); color: var(--ac-muted); transition: background var(--ac-dur-3) var(--ac-ease), color var(--ac-dur-3) var(--ac-ease); }
.ac-tk-track__step[data-state="done"] .ac-tk-track__dot { background: var(--ac-ink); color: var(--ac-ink-contrast); }
.ac-tk-track__step[data-state="current"] .ac-tk-track__dot { background: var(--ac-accent); color: var(--ac-accent-contrast); box-shadow: 0 0 0 5px var(--ac-accent-soft); }
.ac-tk-track__text { display: grid; gap: 1px; min-inline-size: 0; }
.ac-tk-track__text b { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-tk-track__text small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-tk-track__step[data-state="todo"] b { color: var(--ac-muted); font-weight: var(--ac-fw-medium); }
@container (min-width: 34rem) {
  .ac-tk-track__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ac-s-2); }
  .ac-tk-track__step { flex-direction: column; align-items: flex-start; }
  .ac-tk-track__step:not(:last-child)::after { inset-inline-start: 2.6rem; inset-inline-end: calc(-1 * var(--ac-s-2) + 0.6rem); inset-block-start: 1rem; block-size: 2px; inline-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .ac-tk-sla[data-overdue] .ac-icon { animation: none; } }

/* list → detail push on phones (wrap the page in .ac-split.ac-tk-split[data-ac=split] with an empty .ac-tk-screen pane) */
.ac-tk-split:not([data-stacked]) > .ac-tk-screen { display: none; }
.ac-tk-screen { min-block-size: 0; }
.ac-tk-screen > .ac-tk-detail { flex: 1; }
.ac-tk-load { inline-size: 4.5rem; }
.ac-list__end:has(> .ac-tk-load) { display: inline-flex; align-items: center; gap: var(--ac-s-2); }

/* customer portal: my requests list + timeline + conversation */
.ac-tk-portal { grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: var(--ac-gap); align-items: start; }
.ac-split:not([data-stacked]) .ac-tk-back[data-split-back] { display: none; }
.ac-tk-mylist { display: grid; gap: var(--ac-s-2); margin: 0; padding: 0; list-style: none; }
.ac-tk-myitem { display: grid; gap: var(--ac-s-1); inline-size: 100%; padding: var(--ac-s-3) var(--ac-s-4); border-radius: var(--ac-r-lg); border: 1px solid var(--ac-border); background: var(--ac-surface-1); text-align: start; color: inherit; cursor: pointer; transition: border-color var(--ac-dur-1) var(--ac-ease), background var(--ac-dur-1) var(--ac-ease), box-shadow var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-tk-myitem:hover { border-color: var(--ac-border-strong); }
.ac-tk-myitem:active { transform: var(--ac-press); }
.ac-tk-myitem:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-tk-myitem[aria-current="true"] { border-color: var(--ac-ink); box-shadow: inset 0 0 0 1px var(--ac-ink); }
.ac-tk-myitem__top { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-tk-myitem__title { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); line-height: var(--ac-lh-snug); }
.ac-tk-myitem__meta { display: flex; align-items: center; gap: var(--ac-s-1); color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-tk-myitem__new { margin-inline-start: auto; padding: 1px 0.5rem; border-radius: var(--ac-r-pill); background: var(--ac-accent-soft); color: var(--ac-accent-ink); font-style: normal; font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-semibold); }
.ac-tk-portal__detail { display: flex; flex-direction: column; gap: var(--ac-s-3); min-inline-size: 0; }
.ac-tk-portal__track { flex: none; padding: var(--ac-s-4); border-radius: var(--ac-r-lg); background: var(--ac-surface-1); border: 1px solid var(--ac-border); }
.ac-tk-portal__conv { display: flex; block-size: clamp(28rem, calc(100dvh - 22rem), 40rem); border: 1px solid var(--ac-border); border-radius: var(--ac-r-xl); overflow: hidden; }
.ac-tk-portal__conv > .ac-tk-detail { flex: 1; }
.ac-tk-help .ac-card__body { display: grid; grid-template-columns: auto minmax(14rem, 22rem); align-items: center; gap: var(--ac-s-3) var(--ac-s-6); }
.ac-tk-help__text { display: flex; align-items: center; gap: var(--ac-s-3); min-inline-size: 0; }
.ac-tk-help__text .ac-card__title { margin: 0; }
.ac-tk-help__icon { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--ac-r-lg); background: var(--ac-accent-soft); color: var(--ac-accent-ink); }
.ac-tk-help__search { inline-size: 100%; }
.ac-tk-help__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--ac-s-2); }
.ac-tk-help__chip { gap: var(--ac-s-1); }
.ac-tk-create__cats--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-tk-create__cats--lg .ac-tk-cat > span { min-block-size: 4rem; padding-inline: var(--ac-s-4); }
.ac-tk-crumb { display: inline-flex; align-items: center; gap: var(--ac-s-1); color: inherit; text-decoration: none; transition: color var(--ac-dur-1) var(--ac-ease); }
.ac-tk-crumb:hover { color: var(--ac-text); }
.ac-btn[aria-disabled] { opacity: 0.45; pointer-events: none; }
@media (max-width: 639.98px) {
  .ac-tk-help .ac-card__body { grid-template-columns: 1fr; }
  .ac-tk-help__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--ac-card-pad)); padding-inline: var(--ac-card-pad); }
  .ac-tk-portal[data-stacked] .ac-tk-portal__conv { flex: 1; block-size: auto; border: 0; border-radius: 0; }
  .ac-tk-create__cats--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ac-tk-slacard[data-met] .ac-tk-slacard__clock, .ac-tk-slacard[data-met] .ac-tk-slacard__bar { display: none; }
.ac-tk-slacard__met { display: flex; align-items: center; gap: var(--ac-s-2); margin: 0; color: var(--ac-success-ink); font-size: var(--ac-fs-sm); }


/* ==== modules/uptime/uptime.css ==== */
/* Uptime module: one row per service, label + daily bars. Tokens only. */
.ac-uptime { display: grid; gap: var(--ac-s-3); }
.ac-uptime__row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); align-items: center; gap: var(--ac-s-4); }
.ac-uptime__label { display: flex; justify-content: space-between; gap: var(--ac-s-2); font-size: var(--ac-fs-sm); min-width: 0; }
.ac-uptime__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.ac-uptime__pct { font-weight: var(--ac-fw-semibold); font-variant-numeric: tabular-nums; }
.ac-uptime__bars { display: flex; gap: 2px; block-size: 1.75rem; min-width: 0; }
.ac-uptime__bars i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: color-mix(in oklab, var(--ac-success) 75%, var(--ac-surface-1)); transform-origin: bottom; transition: transform var(--ac-dur-2) var(--ac-ease-out), filter var(--ac-dur-2); }
.ac-uptime__bars i:hover { transform: scaleY(1.18); filter: brightness(1.1); }
.ac-uptime__bars i[data-s="partial"] { background: var(--ac-warning); }
.ac-uptime__bars i[data-s="down"] { background: var(--ac-danger); }
.ac-uptime__bars i[data-s="none"] { background: var(--ac-surface-3); }
@media (max-width: 639.98px) {
  .ac-uptime__row { grid-template-columns: 1fr; gap: var(--ac-s-1); }
  .ac-uptime__bars { block-size: 1.25rem; }
  .ac-uptime__bars i:nth-child(-n+45) { display: none; }
}


/* ==== modules/user-panel/user-panel.css ==== */
/* User panel module — customer "my account" home blocks. Tokens only; logical properties; phone = native app home. */
.ac-up-id { display: flex; align-items: center; gap: var(--ac-s-2); margin-block-end: var(--ac-s-2); }
.ac-up-id .ac-avatar { --ac-avatar: 2.5rem; box-shadow: 0 0 0 3px var(--ac-bg), 0 0 0 4px color-mix(in oklab, #d4a537 70%, transparent); }
.ac-up-tier { display: inline-flex; align-items: center; gap: 0.3rem; block-size: 1.6rem; padding-inline: 0.6rem; border-radius: var(--ac-r-pill); background: linear-gradient(135deg, #f7e2a6, #d9a93a); color: #4a3608; font-size: var(--ac-fs-2xs); font-weight: var(--ac-fw-bold); }
.ac-up-tier .ac-icon { inline-size: 0.85rem; block-size: 0.85rem; }

/* wallet: dark glossy card */
.ac-up-wallet { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: space-between; gap: var(--ac-s-4); padding: var(--ac-s-6); border-radius: var(--ac-r-xl); color: #f5f5f6; background: radial-gradient(120% 140% at 100% 0%, #3a3a40 0%, transparent 50%), radial-gradient(90% 120% at 0% 100%, color-mix(in oklab, var(--ac-accent) 38%, #141416) 0%, transparent 60%), linear-gradient(160deg, #1d1d21, #0c0c0e); border: 1px solid #2a2a2f; }
.ac-up-wallet::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.035) 0 2px, transparent 2px 14px); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.ac-up-wallet::after { content: ""; position: absolute; z-index: -1; inset-block-start: -40%; inset-inline-end: -20%; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 0.09), transparent 65%); }
.ac-up-wallet__top { display: flex; align-items: center; gap: var(--ac-s-2); }
.ac-up-wallet__label { display: inline-flex; align-items: center; gap: var(--ac-s-2); flex: 1; color: rgb(255 255 255 / 0.7); font-size: var(--ac-fs-sm); }
.ac-up-wallet__label .ac-icon { color: var(--ac-accent); }
.ac-up-wallet .ac-money-unit { background: rgb(255 255 255 / 0.08); --ac-ink: #fff; --ac-ink-contrast: #111; color: rgb(255 255 255 / 0.8); }
.ac-up-eye { display: grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.85); cursor: pointer; transition: background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-up-eye:hover { background: rgb(255 255 255 / 0.16); }
.ac-up-eye:active { transform: var(--ac-press-sm); }
.ac-up-eye:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(255 255 255 / 0.35); }
.ac-up-wallet__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ac-s-2); font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); font-weight: var(--ac-fw-semibold); letter-spacing: -0.01em; line-height: 1.1; }
.ac-up-wallet__amount [data-up-amount] { transition: filter 260ms var(--ac-ease), opacity 260ms var(--ac-ease); }
[data-private] [data-up-amount] { filter: blur(10px); opacity: 0.7; user-select: none; }
.ac-up-wallet__sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ac-s-2); color: rgb(255 255 255 / 0.66); font-size: var(--ac-fs-xs); }
.ac-up-wallet__sub .ac-trend { background: rgb(52 199 89 / 0.16); color: #7ee2a0; }
.ac-up-wallet__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ac-s-2); }
.ac-up-wallet__actions .ac-btn { --ac-control-h: 2.75rem; background: rgb(255 255 255 / 0.1); color: #fff; border-color: transparent; }
.ac-up-wallet__actions .ac-btn:hover { background: rgb(255 255 255 / 0.18); }
.ac-up-wallet__actions .ac-btn--primary { background: #fff; color: #111; }
.ac-up-wallet__actions .ac-btn--primary:hover { background: #ececee; }
.ac-up-points { display: grid; gap: var(--ac-s-2); padding-block-start: var(--ac-s-4); border-block-start: 1px solid rgb(255 255 255 / 0.1); font-size: var(--ac-fs-xs); color: rgb(255 255 255 / 0.7); }
.ac-up-points__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-s-2); }
.ac-up-points__row b { color: #fff; font-weight: var(--ac-fw-semibold); }
.ac-up-points progress { --ac-progress-track: rgb(255 255 255 / 0.12); }

/* quick actions: app grid */
.ac-up-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ac-s-2) var(--ac-s-1); margin: 0; padding: 0; list-style: none; }
.ac-up-app { display: grid; justify-items: center; gap: var(--ac-s-2); padding: var(--ac-s-2) var(--ac-s-1); border-radius: var(--ac-r-lg); color: var(--ac-text-soft); font-size: var(--ac-fs-xs); font-weight: var(--ac-fw-medium); text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background var(--ac-dur-1) var(--ac-ease), color var(--ac-dur-1) var(--ac-ease); }
.ac-up-app__icon { --_tone: var(--ac-text-soft); position: relative; display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 1.1rem; background: color-mix(in oklab, var(--_tone) 12%, var(--ac-surface-1)); color: color-mix(in oklab, var(--_tone) 80%, var(--ac-text)); transition: transform 260ms var(--ac-ease-spring), box-shadow var(--ac-dur-2) var(--ac-ease); }
.ac-up-app__icon .ac-icon { inline-size: 1.35rem; block-size: 1.35rem; }
.ac-up-app__badge { position: absolute; inset-block-start: -0.3rem; inset-inline-end: -0.3rem; min-inline-size: 1.15rem; block-size: 1.15rem; padding-inline: 0.25rem; display: grid; place-items: center; border-radius: var(--ac-r-pill); background: var(--ac-accent); color: var(--ac-accent-contrast); font-size: 0.625rem; font-weight: var(--ac-fw-bold); box-shadow: 0 0 0 2px var(--ac-surface-1); }
.ac-up-app:hover { color: var(--ac-text); }
.ac-up-app:hover .ac-up-app__icon { transform: translateY(-3px); box-shadow: 0 8px 18px -10px color-mix(in oklab, var(--_tone) 80%, transparent); }
.ac-up-app:active .ac-up-app__icon { transform: scale(0.92); transition-duration: var(--ac-dur-0); }
.ac-up-app:focus-visible { outline: none; }
.ac-up-app:focus-visible .ac-up-app__icon { box-shadow: 0 0 0 3px var(--ac-ring); }

/* completeness */
.ac-up-complete { display: grid; gap: var(--ac-s-4); }
.ac-up-complete__top { display: flex; align-items: center; gap: var(--ac-s-4); }
.ac-up-complete__top .ac-ring { --ac-ring-size: 5.25rem; flex: none; }
.ac-up-complete__top p { margin: 0; color: var(--ac-muted); font-size: var(--ac-fs-xs); line-height: 1.7; }
.ac-up-complete__top b { display: block; color: var(--ac-text); font-size: var(--ac-fs-md); }
.ac-up-checks { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ac-up-checks li { display: flex; align-items: center; gap: var(--ac-s-2); min-block-size: 2.4rem; padding-inline: var(--ac-s-2); border-radius: var(--ac-r-md); font-size: var(--ac-fs-sm); transition: background var(--ac-dur-1) var(--ac-ease); }
.ac-up-checks li > .ac-icon { flex: none; inline-size: 1.15rem; block-size: 1.15rem; color: var(--ac-faint); }
.ac-up-checks li[data-done] { color: var(--ac-muted); }
.ac-up-checks li[data-done] > .ac-icon { color: var(--ac-success); }
.ac-up-checks li:not([data-done]):hover { background: var(--ac-hover); }
.ac-up-checks li > span { flex: 1; }
.ac-up-checks li[data-done] > span { text-decoration: line-through; text-decoration-color: var(--ac-border-strong); }
.ac-up-checks .ac-btn { --ac-control-h-sm: 1.9rem; }

/* orders */
.ac-up-orders { display: grid; gap: var(--ac-s-2); margin: 0; padding: 0; list-style: none; }
.ac-up-order { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ac-s-2) var(--ac-s-4); padding: var(--ac-s-3) var(--ac-s-4); border-radius: var(--ac-r-lg); background: var(--ac-surface-2); border: 1px solid transparent; color: inherit; text-decoration: none; transition: border-color var(--ac-dur-1) var(--ac-ease), background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-up-order:hover { border-color: var(--ac-border-strong); background: var(--ac-surface-1); }
.ac-up-order:active { transform: var(--ac-press); }
.ac-up-order__thumb { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--ac-r-md); background: var(--ac-surface-1); border: 1px solid var(--ac-border); color: var(--ac-text-soft); }
.ac-up-order__main { display: grid; gap: 2px; min-inline-size: 0; }
.ac-up-order__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-up-order__main small { color: var(--ac-muted); font-size: var(--ac-fs-2xs); }
.ac-up-order__end { display: grid; justify-items: end; gap: var(--ac-s-1); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-up-order .ac-up-steps { grid-column: 2 / -1; }
.ac-up-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; margin: var(--ac-s-1) 0 0; padding: 0; list-style: none; }
.ac-up-steps li { display: grid; gap: 4px; color: var(--ac-faint); font-size: 0.625rem; }
.ac-up-steps li > i { block-size: 4px; border-radius: var(--ac-r-pill); background: var(--ac-surface-3); overflow: hidden; }
.ac-up-steps li[data-state="done"] > i { background: var(--ac-ink); }
.ac-up-steps li[data-state="current"] > i { background: linear-gradient(90deg, var(--ac-accent) 0 60%, var(--ac-surface-3) 60%); }
[dir="rtl"] .ac-up-steps li[data-state="current"] > i { background: linear-gradient(270deg, var(--ac-accent) 0 60%, var(--ac-surface-3) 60%); }
.ac-up-steps li[data-state="done"], .ac-up-steps li[data-state="current"] { color: var(--ac-text-soft); }
.ac-up-steps li[data-state="current"] span { color: var(--ac-accent-ink); font-weight: var(--ac-fw-semibold); }

/* compact lists (tickets, notifications) */
.ac-up-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.ac-up-row { position: relative; display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-3) var(--ac-s-2); margin-inline: calc(-1 * var(--ac-s-2)); border-radius: var(--ac-r-lg); color: inherit; text-decoration: none; transition: background var(--ac-dur-1) var(--ac-ease), transform var(--ac-dur-0) var(--ac-ease); }
.ac-up-rows > li + li .ac-up-row::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--ac-s-2); block-size: 1px; background: var(--ac-border); }
a.ac-up-row:hover, button.ac-up-row:hover { background: var(--ac-hover); }
a.ac-up-row:active, button.ac-up-row:active { transform: var(--ac-press); }
.ac-up-row__icon { --_tone: var(--ac-muted); display: grid; place-items: center; flex: none; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: color-mix(in oklab, var(--_tone) 13%, transparent); color: color-mix(in oklab, var(--_tone) 80%, var(--ac-text)); }
.ac-up-row__icon .ac-icon { inline-size: 1.1rem; block-size: 1.1rem; }
.ac-up-row__main { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.ac-up-row__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); }
.ac-up-row__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ac-muted); font-size: var(--ac-fs-xs); }
.ac-up-row__end { display: grid; justify-items: end; gap: var(--ac-s-1); flex: none; color: var(--ac-faint); font-size: var(--ac-fs-2xs); }
.ac-up-row[data-unread] .ac-up-row__main b::after { content: ""; display: inline-block; inline-size: 0.45rem; block-size: 0.45rem; margin-inline-start: var(--ac-s-2); border-radius: 50%; background: var(--ac-accent); vertical-align: middle; }

/* security */
.ac-up-sec { display: grid; gap: var(--ac-s-4); }
.ac-up-sec__score { display: flex; align-items: center; gap: var(--ac-s-3); padding: var(--ac-s-3) var(--ac-s-4); border-radius: var(--ac-r-lg); background: var(--ac-warning-soft); color: var(--ac-warning-ink); }
.ac-up-sec__score[data-tone="success"] { background: var(--ac-success-soft); color: var(--ac-success-ink); }
.ac-up-sec__score > .ac-icon { flex: none; inline-size: 2rem; block-size: 2rem; }
.ac-up-sec__score b { display: block; font-size: var(--ac-fs-md); }
.ac-up-sec__score small { font-size: var(--ac-fs-xs); opacity: 0.85; }

@media (max-width: 639.98px) {
  .ac-up-wallet { padding: var(--ac-s-5); border-radius: 1.6rem; }
  .ac-up-wallet__actions .ac-btn span { font-size: var(--ac-fs-xs); }
  .ac-up-quick { background: transparent; border: 0; box-shadow: none; }
  .ac-up-quick > .ac-card__head { padding-inline: var(--ac-s-1); }
  .ac-up-quick > .ac-card__body { padding: 0; }
  .ac-up-apps { gap: var(--ac-s-3) 0; }
  .ac-up-app__icon { inline-size: 3.5rem; block-size: 3.5rem; border-radius: 1.2rem; background: var(--ac-surface-1); border: 1px solid var(--ac-border); }
  .ac-up-orders { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ac-card-pad); margin-inline: calc(-1 * var(--ac-card-pad)); padding-inline: var(--ac-card-pad); padding-block-end: var(--ac-s-1); scrollbar-width: none; overscroll-behavior-x: contain; }
  .ac-up-orders::-webkit-scrollbar { display: none; }
  .ac-up-order { scroll-snap-align: start; grid-template-columns: auto minmax(0, 1fr); align-content: start; }
  .ac-up-order__end { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; }
  .ac-up-order .ac-up-steps { grid-column: 1 / -1; }
}


/* ==== css/motion.css ==== */
/* ==========================================================================
   AraminConsole — motion system & micro-interactions (docs/motion.md)
   Loaded last by the build, so it refines every component without touching
   their structure. Rules of the house (Emil Kowalski / Linear / Vercel):
   - only transform, opacity, filter, clip-path move; colours fade with --ac-ease-hover
   - enter with ease-out, move with ease-in-out / springs, exit faster than enter
   - hover motion only for fine pointers; press feedback on :active at once
   - keyboard-driven changes are instant; RTL mirrors through --ac-dir (1 | -1)
   ========================================================================== */

[dir="ltr"] { --ac-dir: 1; }
[dir="rtl"] { --ac-dir: -1; }

/* ---- press feedback: quick in, spring back out ---------------------------- */
:is(.ac-btn, .ac-iconbtn, .ac-dock__btn, .ac-brand, .ac-userchip, .ac-usercard, .ac-tabbar__item, .ac-tabbar__fab, .ac-fab, .ac-chip, .ac-segmented__item, .ac-tabs__tab, .ac-topnav__link, .ac-pagination__btn, .ac-rail__close, .ac-dialog__close, .ac-lp__trigger) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:is(.ac-iconbtn, .ac-dock__btn, .ac-rail__close, .ac-dialog__close, .ac-tabbar__fab, .ac-fab) {
  transition-property: background-color, color, box-shadow, transform;
  transition-duration: var(--ac-dur-1), var(--ac-dur-1), var(--ac-dur-2), var(--ac-spring-dur);
  transition-timing-function: var(--ac-ease-hover), var(--ac-ease-hover), var(--ac-ease), var(--ac-spring);
}
:is(.ac-iconbtn, .ac-dock__btn, .ac-rail__close, .ac-dialog__close):active { transform: var(--ac-press-sm); transition-duration: var(--ac-dur-0); transition-timing-function: var(--ac-ease); }
.ac-btn { transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: var(--ac-dur-1), var(--ac-dur-1), var(--ac-dur-1), var(--ac-dur-2), var(--ac-spring-dur); transition-timing-function: var(--ac-ease-hover), var(--ac-ease-hover), var(--ac-ease-hover), var(--ac-ease), var(--ac-spring); }
.ac-btn:active:not(:disabled, [aria-disabled="true"]) { transition-duration: var(--ac-dur-0); transition-timing-function: var(--ac-ease); }

/* loading morph: the label blurs away, the spinner scales in (no layout change) */
.ac-btn > * { transition: opacity var(--ac-dur-2) var(--ac-ease), filter var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-2) var(--ac-ease); }
.ac-btn[aria-busy="true"] > * { visibility: visible; opacity: 0; filter: blur(3px); transform: scale(0.9); }
.ac-btn[aria-busy="true"]::after { animation: ac-spin 0.7s linear infinite, ac-pop-in var(--ac-dur-3) var(--ac-ease) both; }
@keyframes ac-pop-in { from { opacity: 0; scale: calc(1 - 0.5 * var(--ac-travel, 1)); } }

/* ---- hover motion only where a precise pointer exists --------------------- */
@media (hover: hover) and (pointer: fine) {
  .ac-btn--primary:hover { transform: translateY(-1px); }
  .ac-card--interactive:hover { transform: translateY(-1px); }
  .ac-avatar-group > .ac-avatar:hover { transform: translateY(-2px); }
  .ac-tabbar__fab:hover, .ac-fab:hover { transform: scale(1.04); }
}
@media (hover: none), (pointer: coarse) {
  .ac-btn--primary:hover, .ac-card--interactive:hover, .ac-avatar-group > .ac-avatar:hover { transform: none; }
}

/* ---- cards: framer-style lift (bento) + springy settle -------------------- */
.ac-card { transition: box-shadow var(--ac-dur-4) var(--ac-ease), transform 520ms var(--ac-spring), border-color var(--ac-dur-2) var(--ac-ease-hover); }
.ac-kpi { transition: transform 520ms var(--ac-spring), box-shadow var(--ac-dur-4) var(--ac-ease); }

/* ---- entrance stagger (the reel): fade-up, 45 ms apart, capped ------------ */
.ac-stagger > * { animation: ac-fade-up 620ms var(--ac-ease-out) both; }
.ac-stagger > :nth-child(1) { animation-delay: 0ms; }
.ac-stagger > :nth-child(2) { animation-delay: calc(var(--ac-stagger) * 1); }
.ac-stagger > :nth-child(3) { animation-delay: calc(var(--ac-stagger) * 2); }
.ac-stagger > :nth-child(4) { animation-delay: calc(var(--ac-stagger) * 3); }
.ac-stagger > :nth-child(5) { animation-delay: calc(var(--ac-stagger) * 4); }
.ac-stagger > :nth-child(6) { animation-delay: calc(var(--ac-stagger) * 5); }
.ac-stagger > :nth-child(7) { animation-delay: calc(var(--ac-stagger) * 6); }
.ac-stagger > :nth-child(n + 8) { animation-delay: calc(var(--ac-stagger) * 7); }
@keyframes ac-fade-up { from { opacity: 0; transform: translateY(calc(16px * var(--ac-travel, 1))) scale(calc(1 - 0.015 * var(--ac-travel, 1))); } to { opacity: 1; transform: none; } }

/* ---- spring-driven indicators (motion.js slide writes the geometry) ------- */
:is(.ac-topnav__ind, .ac-tabs__indicator, .ac-segmented__thumb, .ac-tabbar__indicator, .ac-track, .ac-hl)[data-spring] { transition: opacity var(--ac-dur-2) var(--ac-ease); }
.ac-tabbar__indicator { block-size: var(--ac-ind-h, var(--ac-ind-w, 2.75rem)); border-radius: var(--ac-r-pill); }
.ac-topnav__link, .ac-segmented__item, .ac-tabs--pills .ac-tabs__tab, .ac-tabbar__item { transition: color var(--ac-dur-3) var(--ac-ease-hover), transform var(--ac-spring-dur) var(--ac-spring); }

/* ink layer (motion.js inkLayer): white copies of the labels on an ink fill, clipped to the
   pill geometry — label colour flips exactly under the moving pill (Emil's clip-path tabs) */
.ac-ink {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--ac-ink);
  clip-path: inset(var(--ac-ind-y, 4px) calc(100% - var(--ac-ind-x, 0px) - var(--ac-ind-w, 0px)) calc(100% - var(--ac-ind-y, 4px) - var(--ac-ind-h, calc(100% - 8px))) var(--ac-ind-x, 0px) round var(--ac-r-pill)); /* rtl-ok: JS-measured physical geometry */
  opacity: var(--ac-ind-o, 1);
  pointer-events: none;
  transition: opacity var(--ac-dur-2) var(--ac-ease);
}
.ac-segmented > .ac-ink { --ac-ind-y: 3px; }
.ac-ink > .ac-ink__item {
  position: absolute;
  top: 0; /* rtl-ok: JS-measured physical geometry */
  left: 0; /* rtl-ok: JS-measured physical geometry */
  margin: 0;
  color: var(--ac-ink-contrast) !important;
  background: none !important;
  box-shadow: none !important;
  transition: none !important;
  animation: none !important;
}
.ac-ink > .ac-ink__item * { animation: none !important; transition: none !important; }
.ac-tabbar > .ac-ink { z-index: 2; }
.ac-tabbar > .ac-ink > .ac-ink__item .ac-icon { stroke-width: 2.1; }
.ac-tabbar > .ac-ink .ac-tabbar__badge { box-shadow: 0 0 0 2px var(--ac-ink); }
[data-ink] > :is(.ac-topnav__link, .ac-segmented__item, .ac-tabbar__item)[aria-current="page"],
[data-ink] > .ac-segmented__item:is([aria-checked="true"], [aria-selected="true"]),
.ac-tabs--pills [data-ink] > .ac-tabs__tab[aria-selected="true"] { color: var(--ac-text-soft); }
.ac-tabbar[data-ink] > .ac-tabbar__item[aria-current="page"] { color: var(--ac-muted); }

/* generic tracked indicator (motion.js track): dock nav ink circle */
.ac-track {
  position: absolute;
  top: 0; /* rtl-ok: JS-measured physical geometry */
  left: 0; /* rtl-ok: JS-measured physical geometry */
  z-index: 0;
  inline-size: var(--ac-ind-w, 0);
  block-size: var(--ac-ind-h, 0);
  border-radius: var(--ac-r-pill);
  background: var(--ac-ink);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.55);
  transform: translate(var(--ac-ind-x, 0), var(--ac-ind-y, 0));
  opacity: 0;
  pointer-events: none;
}
.ac-track[data-on] { opacity: 1; }
.ac-dock__nav { position: relative; isolation: isolate; }
.ac-dock__nav > .ac-dock__btn { z-index: 1; }
.ac-dock__nav[data-track] > .ac-dock__btn:is([data-active], [aria-current="page"]) { background: transparent; box-shadow: none; color: var(--ac-text-soft); }
.ac-dock__nav > .ac-ink { --ac-ind-y: 0px; }
.ac-dock__nav > .ac-ink > .ac-ink__item .ac-dock__dot { box-shadow: 0 0 0 2px var(--ac-ink); }

/* ---- sliding hover highlight (menus, rail, palette, language picker) ------ */
.ac-hl {
  position: absolute;
  top: 0; /* rtl-ok: JS-measured physical geometry */
  left: 0; /* rtl-ok: JS-measured physical geometry */
  z-index: 0;
  inline-size: var(--ac-ind-w, 0);
  block-size: var(--ac-ind-h, 0);
  border-radius: var(--ac-r-md);
  background: var(--ac-surface-3);
  transform: translate(var(--ac-ind-x, 0), var(--ac-ind-y, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ac-dur-2) var(--ac-ease);
}
.ac-hl[data-on] { opacity: 1; transition-duration: 60ms; }
.ac-hl[data-tone="danger"] { background: var(--ac-danger-soft); }
.ac-rail__nav .ac-hl { border-radius: var(--ac-r-pill); background: var(--ac-hover); }
.ac-rail__nav { position: relative; isolation: isolate; }
[data-hl] > :not(.ac-hl), [data-hl] :is(.ac-menu__item, .ac-rail__link, .ac-palette__item, .ac-lp__item) { position: relative; z-index: 1; }
.ac-menu[data-hl] .ac-menu__item:is(:focus, :hover):not([aria-expanded="true"], :active),
.ac-rail__nav[data-hl] .ac-rail__link:hover:not([aria-current="page"]),
.ac-lp__list[data-hl] .ac-lp__item:is(:focus, :hover) { background: transparent; }
/* command palette: one indicator = the active row (hover and arrow keys share it) */
.ac-palette__list .ac-hl { border-radius: var(--ac-r-md); background: var(--ac-accent-soft); }
.ac-palette__list[data-hl] .ac-palette__item[aria-selected="true"] { background: transparent; }
@media (hover: none) { .ac-hl:not(.ac-palette__list > .ac-hl) { display: none; } }

/* ---- menus / popovers / tooltips: origin-aware scale, fast exit ----------- */
.ac-menu, .ac-popover {
  transform: scale(0.95);
  transition: opacity var(--ac-dur-exit) var(--ac-ease), transform var(--ac-dur-exit) var(--ac-ease), visibility 0s linear var(--ac-dur-exit);
}
:is(.ac-menu, .ac-popover)[data-state="open"] { transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-2) var(--ac-ease); }
.ac-menu[data-side="bottom"]:not([data-state="open"]) { transform: translateY(-4px) scale(0.95); }
.ac-menu[data-side="top"]:not([data-state="open"]) { transform: translateY(4px) scale(0.95); }
.ac-tooltip { transform: scale(0.97); transition: opacity 125ms var(--ac-ease), transform 125ms var(--ac-ease), visibility 0s linear 125ms; }
.ac-tooltip[data-state="open"] { transition-delay: 0s; }
.ac-tooltip[data-instant] { transition-duration: 0s; }
.ac-menu__check .ac-icon { transition: scale var(--ac-spring-bounce-dur) var(--ac-spring-bounce), opacity var(--ac-dur-1) var(--ac-ease); }
[aria-checked="false"] > .ac-menu__check .ac-icon { scale: 0.4; }

/* ---- dialogs: modal scales from center, sheets & drawers ride the drawer curve -- */
.ac-modal > .ac-dialog { transition: transform var(--ac-dur-4) var(--ac-ease-out), opacity var(--ac-dur-3) var(--ac-ease); }
.ac-modal:not([data-state="open"]) > .ac-dialog { transition-duration: var(--ac-dur-2), var(--ac-dur-exit); }
.ac-sheet > .ac-dialog, .ac-drawer > .ac-dialog { transition: transform var(--ac-dur-sheet) var(--ac-ease-drawer), opacity var(--ac-dur-3) var(--ac-ease); }
@media (max-width: 639.98px) {
  .ac-modal > .ac-dialog { transition: transform var(--ac-dur-sheet) var(--ac-ease-drawer), opacity var(--ac-dur-3) var(--ac-ease); }
}
:is(.ac-modal, .ac-sheet, .ac-drawer)::before { transition: opacity var(--ac-dur-sheet) var(--ac-ease-drawer); }
:is(.ac-modal, .ac-sheet, .ac-drawer)[data-dragging] > .ac-dialog { transition: none; }

/* ---- form controls -------------------------------------------------------- */
/* switch: spring thumb with squash while pressed */
.ac-switch::before { transition: translate var(--ac-spring-dur) var(--ac-spring), inline-size var(--ac-dur-2) var(--ac-ease); }
.ac-switch { transition: background-color var(--ac-dur-3) var(--ac-ease-hover), box-shadow var(--ac-dur-2) var(--ac-ease), transform var(--ac-spring-dur) var(--ac-spring); }
/* checkbox: the check mark is drawn (clip reveal along the stroke), radio dot pops */
.ac-check::before { scale: 1; clip-path: inset(0 100% 0 0); transition: clip-path var(--ac-dur-exit) var(--ac-ease); } /* rtl-ok: a check mark is not mirrored */
.ac-check:checked::before { clip-path: inset(0 0 0 0); transition: clip-path 260ms var(--ac-ease) 40ms; }
.ac-check:indeterminate::before { clip-path: inset(0 0 0 0); }
.ac-radio::before { transition: scale var(--ac-spring-bounce-dur) var(--ac-spring-bounce); }
:is(.ac-check, .ac-radio, .ac-switch) { transition: background-color var(--ac-dur-2) var(--ac-ease-hover), border-color var(--ac-dur-2) var(--ac-ease-hover), box-shadow var(--ac-dur-2) var(--ac-ease), transform var(--ac-spring-dur) var(--ac-spring); }
:is(.ac-check, .ac-radio, .ac-switch):active { transition-duration: var(--ac-dur-2), var(--ac-dur-2), var(--ac-dur-2), var(--ac-dur-0); }
/* inputs: the focus ring grows in from the border */
:is(.ac-input, .ac-select, .ac-input-group, .ac-number, .ac-searchpill, .ac-confirm__input) { transition: border-color var(--ac-dur-1) var(--ac-ease-hover), box-shadow var(--ac-dur-2) var(--ac-ease), background-color var(--ac-dur-1) var(--ac-ease-hover); }
.ac-float > label { transition: inset-block-start var(--ac-dur-2) var(--ac-ease), translate var(--ac-dur-2) var(--ac-ease), font-size var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2) var(--ac-ease-hover); }

/* ---- rail flyout / drawer: items cascade in from the start edge ----------- */
.ac-rail[data-state="open"] .ac-rail__group:not([data-off]) > :is(.ac-rail__link, .ac-rail__sub, .ac-rail__label) { animation: ac-from-start 340ms var(--ac-ease-out) both; }
.ac-rail[data-state="open"] .ac-rail__group:not([data-off]) > :nth-child(2) { animation-delay: 25ms; }
.ac-rail[data-state="open"] .ac-rail__group:not([data-off]) > :nth-child(3) { animation-delay: 50ms; }
.ac-rail[data-state="open"] .ac-rail__group:not([data-off]) > :nth-child(4) { animation-delay: 75ms; }
.ac-rail[data-state="open"] .ac-rail__group:not([data-off]) > :nth-child(5) { animation-delay: 100ms; }
.ac-rail[data-state="open"] .ac-rail__group:not([data-off]) > :nth-child(n + 6) { animation-delay: 120ms; }
@keyframes ac-from-start { from { opacity: 0; transform: translateX(calc(-10px * var(--ac-dir) * var(--ac-travel, 1))); } }
.ac-rail__sub[open] > .ac-rail__subnav { animation: ac-fade-down var(--ac-dur-3) var(--ac-ease) both; }
@keyframes ac-fade-down { from { opacity: 0; transform: translateY(calc(-6px * var(--ac-travel, 1))); } }
.ac-rail__chev { transition: transform var(--ac-spring-dur) var(--ac-spring) !important; }

/* ---- tab bar: icon pop + FAB ---------------------------------------------- */
.ac-tabbar__fab .ac-icon { transition: transform var(--ac-spring-bounce-dur) var(--ac-spring-bounce); }
.ac-tabbar__fab:active { transform: scale(0.9) rotate(calc(-8deg * var(--ac-dir))); transition-duration: var(--ac-dur-0); }

/* ---- badges & counts: bump (motion.bump) + entrance ----------------------- */
:is(.ac-appbar__count, .ac-tabbar__badge, .ac-rail__badge, .ac-count, .ac-dock__dot) { animation: ac-badge-in var(--ac-spring-bounce-dur) var(--ac-spring-bounce) both; animation-delay: 300ms; }
@keyframes ac-badge-in { from { transform: scale(calc(1 - 0.6 * var(--ac-travel, 1))); opacity: 0; } }

/* ---- skeleton → content ---------------------------------------------------- */
.ac-skeleton { transition: opacity var(--ac-dur-3) var(--ac-ease); }
[data-loaded] > .ac-skeleton, .ac-skeleton[data-done] { opacity: 0; }

/* ---- data table ----------------------------------------------------------- */
.ac-dt__bulk { animation: ac-bulk-in 380ms var(--ac-spring) both; }
@keyframes ac-bulk-in { from { opacity: 0; transform: translateY(calc(-8px * var(--ac-travel, 1))); } }
.ac-dt__table tbody tr { transition: background-color var(--ac-dur-1) var(--ac-ease-hover); }
.ac-dt__xbtn { transition: transform var(--ac-spring-dur) var(--ac-spring), background var(--ac-dur-1) var(--ac-ease-hover); }
.ac-dt__detail-in { animation: ac-fade-down var(--ac-dur-3) var(--ac-ease) both; }

/* ---- page transitions (View Transitions; motion.navigate) ----------------- */
/* Only the page content is captured — the chrome stays live, so the nav pill and the tab
   bar keep springing while the page swaps. Forward = toward the inline end of the nav. */
:root[data-vt="page"] { view-transition-name: none; }
:root[data-vt="page"] .ac-content { view-transition-name: ac-page; }
::view-transition-group(ac-page) { animation: none; }
:root[data-vt="page"]::view-transition-old(ac-page) { animation: ac-page-out var(--ac-dur-exit) var(--ac-ease) both; }
:root[data-vt="page"]::view-transition-new(ac-page) { animation: ac-page-in 380ms var(--ac-ease-out) both; }
:root[data-vt-dir="forward"]::view-transition-old(ac-page) { --_dx: calc(-18px * var(--ac-dir)); }
:root[data-vt-dir="forward"]::view-transition-new(ac-page) { --_dx: calc(28px * var(--ac-dir)); }
:root[data-vt-dir="back"]::view-transition-old(ac-page) { --_dx: calc(18px * var(--ac-dir)); }
:root[data-vt-dir="back"]::view-transition-new(ac-page) { --_dx: calc(-28px * var(--ac-dir)); }
@keyframes ac-page-out { to { opacity: 0; transform: translateX(calc(var(--_dx, 0px) * var(--ac-travel, 1))); filter: blur(2px); } }
@keyframes ac-page-in { from { opacity: 0; transform: translate(calc(var(--_dx, 0px) * var(--ac-travel, 1)), calc(var(--_dy, 0px) * var(--ac-travel, 1))); filter: blur(2px); } }
:root[data-vt-dir="none"]::view-transition-new(ac-page) { --_dy: 10px; }

/* language / direction switch: whole-document crossfade with a blur bridge (nothing can
   slide when the layout mirrors, so the two states melt into each other instead) */
:root[data-vt="lang"]::view-transition-group(root) { animation-duration: 0s; }
:root[data-vt="lang"]::view-transition-old(root) { animation: ac-lang-out 200ms var(--ac-ease) both; }
:root[data-vt="lang"]::view-transition-new(root) { animation: ac-lang-in 420ms var(--ac-ease-out) 40ms both; }
@keyframes ac-lang-out { to { opacity: 0; filter: blur(6px); } }
@keyframes ac-lang-in { from { opacity: 0; filter: blur(6px); } }

/* theme switch: circular reveal from the control that was pressed (motion.js themeReveal) */
:root.ac-theme-switching::view-transition-old(root), :root.ac-theme-switching::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root.ac-theme-switching::view-transition-new(root) { z-index: 2; }

/* ---- RTL: directional glyphs follow the reading direction ----------------- */
[dir="rtl"] .ac-trend::before { transform: scaleX(-1); }
[dir="rtl"] :is(.ac-pagination__btn, .ac-dp__nav, .ac-carousel__nav) > .ac-icon:not(.ac-no-flip) { transform: scaleX(-1); }

/* ---- reduced motion: handled by --ac-travel (base.css) — every keyframe above scales its
   distance by it, so data-motion="reduced" keeps the fades and drops the travel. */

/* command palette: an opaque surface with one clean drop shadow — a translucent glass panel let the
   blurred cards behind it bleed through as soft blobs (owner report). The blur stays on the backdrop. */
.ac-palette__panel { background: var(--ac-elevated); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--ac-shadow-xl); }
.ac-palette__panel { transform: translateY(calc(-8px * var(--ac-travel, 1))) scale(calc(1 - 0.02 * var(--ac-travel, 1))); transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-3) var(--ac-ease); }
.ac-palette[data-state="open"] .ac-palette__panel { transform: none; }

/* Page intro (reel style): cards shimmer briefly, then their content rises in. Toggle `.is-loading` on `.ac-page`. */
.ac-page .ac-card > * { transition: opacity 420ms var(--ac-ease-out, ease-out), transform 520ms var(--ac-ease-out, ease-out); }
.ac-page.is-loading .ac-card > * { opacity: 0; transform: translateY(6px); }
.ac-page.is-loading .ac-card {
  background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ac-text) 6%, transparent) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: ac-intro-shimmer 900ms linear infinite;
}
@keyframes ac-intro-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
html[data-motion="reduced"] .ac-page .ac-card > * { transform: none; }