/* ==========================================================================
   e-Policy UI — design system stylesheet (assets/ui/ui.css)
   "Institutional & calm": cool slate neutrals, one accent (var(--pri)) used
   sparingly, everything built from tokens. Theme is driven by attributes on
   <html>: data-theme (default|ocean|forest|sunset|midnight|rose|studio|studio-dark),
   data-accent (indigo|blue|cyan|emerald|amber|rose|violet|slate|gold) and
   data-sidebar (dark|light|gradient). Reference: assets/ui/README.md
   --------------------------------------------------------------------------
   0  Tokens          5  Legacy classes (card-m, btn-m, inp, pill, ...)
   1  Base            6  SweetAlert2 theme
   2  App shell       7  Tailwind bridge (calm + midnight-safe colours)
   3  Components      8  Utilities
   4  Feedback kit    9  Motion, print
   ========================================================================== */

/* ==========================================================================
   0. TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* Type — Google Sans ships a Thai subset; Noto Sans Thai is the Thai fallback */
  --font-sans: "Google Sans Text", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Google Sans", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing — 4px grid */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;
  --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-11: 44px; --sp-12: 48px;

  /* Radius — hierarchy: badge 6 · control 8 · card 12 · panel 16 · dialog 20 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* Layout */
  --sb-w: 264px;
  --sb-cw: 72px;
  --topbar-h: 60px;
  --content-max: 1280px;
  --page-px: 32px;
  --page-py: 28px;
  --gap-block: 24px;
  --gap-inner: 16px;
  --z-topbar: 30;
  --z-overlay: 55;
  --z-sidebar: 60;
  --z-dropdown: 70;
  --z-modal: 80;
  --z-toast: 1100;
  --z-route: 1200;

  /* Neutrals (default theme) */
  --bg-rgb: 245 246 248;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #f1f3f6;
  --line: #e6e8ec;
  --line-soft: #eef0f3;
  --line-strong: #d5d9e0;
  --line-hover: #c3c9d2;
  --text: #18212f;
  --text-2: #3b4655;
  --muted: #5b6676;
  --hint: #6b7483;
  --placeholder: #9aa2ae;
  --hover: #f3f5f8;
  --active: #eceff3;
  --overlay: rgba(15, 23, 42, .42);
  --on-solid: #ffffff;

  /* Semantic tones: <tone> = icon/solid, -ink = text on soft, -soft = tint bg, -line = tint border */
  --ok: #1d8255;    --ok-solid: #1d8255; --ok-hover: #186e48; --ok-ink: #1a6b47;   --ok-soft: #eaf6ef;   --ok-line: #cbe7d8;
  --warn: #b7791f;  --warn-solid: #9e681a; --warn-ink: #855709; --warn-soft: #fdf4e3; --warn-line: #f0deb3;
  --err: #c93c3c;   --err-solid: #c93c3c; --err-hover: #b13333; --err-ink: #a33030;  --err-soft: #fcefef; --err-line: #f4cfcf; --err-ring: rgba(201, 60, 60, .2);
  --info: #2f6fbf;  --info-ink: #285b9e; --info-soft: #ecf3fb; --info-line: #d0e0f4;
  --vio: #6a4fc2;   --vio-ink: #5a43a6;  --vio-soft: #f2effb;  --vio-line: #ddd5f4;
  --cyan: #0f7f8c;  --cyan-ink: #0d6670; --cyan-soft: #e7f4f5; --cyan-line: #c6e4e7;
  --neu: #6b7482;   --neu-ink: #4a5463;  --neu-soft: #f1f3f6;  --neu-line: #e1e4e9;
  --c-rss: #c2570c; --c-rss-solid: #b9520b; --c-rss-hover: #9f460a; --c-rss-soft: #fdf1e7; --c-rss-line: #f6d6bd;

  /* Elevation — layered, low opacity */
  --e-0: none;
  --e-1: 0 1px 2px rgba(16, 24, 40, .05);
  --e-2: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --e-3: 0 2px 4px -2px rgba(16, 24, 40, .05), 0 8px 20px -4px rgba(16, 24, 40, .09);
  --e-4: 0 4px 8px -2px rgba(16, 24, 40, .06), 0 24px 48px -12px rgba(16, 24, 40, .22);

  /* Accent (default = indigo). --pri: text/icon tone · --pri-solid: filled bg */
  --pri: #4c55c8;
  --pri-solid: #4c55c8;
  --pri-hover: #3f47ad;
  --pri-soft: #eef0fc;
  --pri-line: #dcdff7;
  --pri-ink: #3a41a0;
  --pri-bright: #a4abf3;
  --pri-ring: rgba(76, 85, 200, .2);
  --pri-ring-strong: rgba(76, 85, 200, .32);

  /* Sidebar (dark style) */
  --sb-bg: #0f1729;
  --sb-bg-2: #121b30;
  --sb-line: rgba(255, 255, 255, .07);
  --sb-text: #a7b0c0;
  --sb-text-strong: #f1f4f8;
  --sb-icon: #8a95a8;
  --sb-label: #7b869a;
  --sb-hover: rgba(255, 255, 255, .05);
  --sb-active-bg: rgba(255, 255, 255, .08);
  --sb-active-text: #ffffff;
  --sb-indicator: var(--pri-bright);
  --sb-scroll: rgba(255, 255, 255, .14);

  /* Chart palette (read with UI.chartColors()) */
  --chart-1: var(--pri);
  --chart-2: #2f8f83;
  --chart-3: #c27a2c;
  --chart-4: #8a5cc2;
  --chart-5: #c2506e;
  --chart-6: #4f8fc9;
  --chart-7: #7a8696;
  --chart-8: #5f9e4a;
}

/* Legacy token aliases — pages use these names inline (var(--card), var(--pri2) ...) */
:root {
  --card: var(--surface);
  --topbar: var(--surface);
  --border: var(--line);
  --td-border: var(--line-soft);
  --c-ok: var(--ok);
  --c-err: var(--err);
  --c-warn: var(--warn);
  --pri2: var(--pri-hover);
  --pri-light: var(--pri-soft);
  --glow: var(--pri-ring-strong);
  --glow-soft: var(--pri-ring);
  --glow-12: var(--pri-ring);
  --card-hover-shadow: var(--e-3);
  --file-btn-bg: var(--surface-3);
  --file-btn-bg-h: var(--active);
  --sb1: var(--sb-bg);
  --sb2: var(--sb-bg-2);
  --sb-txt: var(--sb-text);
  --sb-htxt: var(--sb-text-strong);
  --sb-hbg: var(--sb-hover);
  --sb-sec: var(--sb-label);
  --sb-bdr: var(--sb-line);
  --sb-logo: var(--sb-text-strong);
  --sb-usr: var(--sb-text-strong);
  --sb-sub: var(--sb-label);
  --sb-grad: linear-gradient(180deg, var(--sb-bg), var(--sb-bg-2));
  --sb-border-right: 1px solid var(--sb-line);
}

/* ---- Accents (light themes) ---- */
:root[data-accent="indigo"]  { --pri: #4c55c8; --pri-solid: #4c55c8; --pri-hover: #3f47ad; --pri-soft: #eef0fc; --pri-line: #dcdff7; --pri-ink: #3a41a0; --pri-bright: #a4abf3; --pri-ring: rgba(76, 85, 200, .2);  --pri-ring-strong: rgba(76, 85, 200, .32); }
:root[data-accent="blue"]    { --pri: #2f66c4; --pri-solid: #2f66c4; --pri-hover: #2756a8; --pri-soft: #ecf2fc; --pri-line: #d4e2f6; --pri-ink: #24508f; --pri-bright: #9cc0f5; --pri-ring: rgba(47, 102, 196, .2); --pri-ring-strong: rgba(47, 102, 196, .32); }
:root[data-accent="cyan"]    { --pri: #0e7490; --pri-solid: #0e7490; --pri-hover: #0c6178; --pri-soft: #e7f5f8; --pri-line: #c6e6ed; --pri-ink: #0b5a6f; --pri-bright: #7fd3e3; --pri-ring: rgba(14, 116, 144, .2); --pri-ring-strong: rgba(14, 116, 144, .32); }
:root[data-accent="emerald"] { --pri: #15805c; --pri-solid: #15805c; --pri-hover: #116b4d; --pri-soft: #e8f5ef; --pri-line: #c9e8d9; --pri-ink: #0f6447; --pri-bright: #7fd6b0; --pri-ring: rgba(21, 128, 92, .2);  --pri-ring-strong: rgba(21, 128, 92, .32); }
:root[data-accent="amber"]   { --pri: #a35b0c; --pri-solid: #a35b0c; --pri-hover: #8a4d0a; --pri-soft: #fdf4e5; --pri-line: #f2dfb7; --pri-ink: #82480a; --pri-bright: #f3c46d; --pri-ring: rgba(163, 91, 12, .2);  --pri-ring-strong: rgba(163, 91, 12, .32); }
:root[data-accent="rose"]    { --pri: #be3456; --pri-solid: #be3456; --pri-hover: #a32b48; --pri-soft: #fcedf1; --pri-line: #f5d2db; --pri-ink: #9b2945; --pri-bright: #f3a1b5; --pri-ring: rgba(190, 52, 86, .2);  --pri-ring-strong: rgba(190, 52, 86, .32); }
:root[data-accent="violet"]  { --pri: #6b4fc4; --pri-solid: #6b4fc4; --pri-hover: #5a41a8; --pri-soft: #f2effc; --pri-line: #ded7f6; --pri-ink: #553ea3; --pri-bright: #c1b0f5; --pri-ring: rgba(107, 79, 196, .2); --pri-ring-strong: rgba(107, 79, 196, .32); }
:root[data-accent="slate"]   { --pri: #475569; --pri-solid: #475569; --pri-hover: #3a4555; --pri-soft: #f0f2f5; --pri-line: #dde1e7; --pri-ink: #374151; --pri-bright: #b4bfcf; --pri-ring: rgba(71, 85, 105, .2);  --pri-ring-strong: rgba(71, 85, 105, .32); }

/* ---- Themes (tinted neutrals; ink stays near-neutral for calm) ---- */
:root[data-theme="ocean"] {
  --bg-rgb: 242 246 250; --bg: #f2f6fa; --surface-2: #f6f9fc; --surface-3: #edf2f7;
  --line: #e0e7ef; --line-soft: #ebf0f5; --line-strong: #cfd9e4; --line-hover: #bccbd9;
  --text: #142235; --text-2: #34465c; --muted: #526377; --hint: #66778c; --placeholder: #93a2b4;
  --hover: #eef3f8; --active: #e6edf4;
  --sb-bg: #0c1a2d; --sb-bg-2: #0f2037;
}
:root[data-theme="forest"] {
  --bg-rgb: 243 246 244; --bg: #f3f6f4; --surface-2: #f7f9f8; --surface-3: #eef2ef;
  --line: #e1e8e3; --line-soft: #ecf0ed; --line-strong: #d0dad3; --line-hover: #bccac0;
  --text: #15241c; --text-2: #34463b; --muted: #536459; --hint: #67766c; --placeholder: #95a39a;
  --hover: #eff3f0; --active: #e6ece8;
  --sb-bg: #0e1c16; --sb-bg-2: #11231b;
}
:root[data-theme="sunset"] {
  --bg-rgb: 248 245 242; --bg: #f8f5f2; --surface-2: #fbf9f6; --surface-3: #f3efea;
  --line: #ebe5de; --line-soft: #f2eee9; --line-strong: #ddd5cb; --line-hover: #cbc0b3;
  --text: #261c15; --text-2: #4a3b30; --muted: #67594e; --hint: #7a6c60; --placeholder: #a6998d;
  --hover: #f5f1ec; --active: #eee8e1;
  --sb-bg: #1c1511; --sb-bg-2: #231a15;
}
:root[data-theme="rose"] {
  --bg-rgb: 248 244 245; --bg: #f8f4f5; --surface-2: #fbf8f9; --surface-3: #f3eef0;
  --line: #ebe2e5; --line-soft: #f2ecee; --line-strong: #ddd2d6; --line-hover: #cbbdc2;
  --text: #271a1f; --text-2: #4b3940; --muted: #69585f; --hint: #7b6c73; --placeholder: #a7999f;
  --hover: #f5f0f2; --active: #eee7ea;
  --sb-bg: #1c1317; --sb-bg-2: #24181d;
}

/* ---- Midnight: a real dark mode ---- */
:root[data-theme="midnight"], :root[data-theme="studio-dark"] {
  color-scheme: dark;
  --bg-rgb: 14 17 22; --bg: #0e1116; --surface: #151a21; --surface-2: #1a2029; --surface-3: #212833;
  --line: #262e3a; --line-soft: #1f2630; --line-strong: #343e4c; --line-hover: #46515f;
  --text: #e6e9ee; --text-2: #c7ccd5; --muted: #9aa3b1; --hint: #808a99; --placeholder: #6b7482;
  --hover: #1c232d; --active: #232b36;
  --overlay: rgba(0, 0, 0, .6);
  --ok: #4fbf8e;   --ok-solid: #17825c; --ok-hover: #1c9068; --ok-ink: #7fd6b0;   --ok-soft: rgba(79, 191, 142, .12);  --ok-line: rgba(79, 191, 142, .28);
  --warn: #e0a64a; --warn-solid: #a76410; --warn-ink: #ecc072; --warn-soft: rgba(224, 166, 74, .12); --warn-line: rgba(224, 166, 74, .28);
  --err: #e36a6a;  --err-solid: #b83a3a; --err-hover: #c44545; --err-ink: #f2a0a0; --err-soft: rgba(227, 106, 106, .12); --err-line: rgba(227, 106, 106, .3); --err-ring: rgba(227, 106, 106, .28);
  --info: #6aa3ea; --info-ink: #9cc2f3; --info-soft: rgba(106, 163, 234, .12); --info-line: rgba(106, 163, 234, .28);
  --vio: #a08cec;  --vio-ink: #c3b6f5;  --vio-soft: rgba(160, 140, 236, .13); --vio-line: rgba(160, 140, 236, .3);
  --cyan: #4fbfcf; --cyan-ink: #8ad8e2; --cyan-soft: rgba(79, 191, 207, .12); --cyan-line: rgba(79, 191, 207, .28);
  --neu: #8c96a5;  --neu-ink: #c0c7d2;  --neu-soft: rgba(148, 160, 178, .12); --neu-line: rgba(148, 160, 178, .24);
  --c-rss: #e58a4a; --c-rss-solid: #b9520b; --c-rss-hover: #c95f12; --c-rss-soft: rgba(229, 138, 74, .12); --c-rss-line: rgba(229, 138, 74, .3);
  --e-1: 0 1px 2px rgba(0, 0, 0, .3);
  --e-2: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
  --e-3: 0 2px 4px -2px rgba(0, 0, 0, .3), 0 8px 20px -4px rgba(0, 0, 0, .45);
  --e-4: 0 4px 8px -2px rgba(0, 0, 0, .35), 0 24px 48px -12px rgba(0, 0, 0, .6);
  --sb-bg: #0a0d12; --sb-bg-2: #0c1016;
  --chart-2: #4fb3a5; --chart-3: #dd9a52; --chart-4: #a98be0; --chart-5: #e07a95; --chart-6: #77abe0; --chart-7: #8f9aab; --chart-8: #82bd6c;
}
/* Midnight × accent: lighter text tone, mid-tone fills (white text stays AA) */
:root:is([data-theme="midnight"], [data-theme="studio-dark"])[data-accent="indigo"]  { --pri: #8f96f0; --pri-solid: #5b63d6; --pri-hover: #6a72e0; --pri-ink: #b9bef7; --pri-soft: rgba(143, 150, 240, .14); --pri-line: rgba(143, 150, 240, .32); --pri-ring: rgba(143, 150, 240, .28); --pri-ring-strong: rgba(143, 150, 240, .4); }
:root:is([data-theme="midnight"], [data-theme="studio-dark"])[data-accent="blue"]    { --pri: #7fb0f2; --pri-solid: #3b71ca; --pri-hover: #4a7fd6; --pri-ink: #a9caf6; --pri-soft: rgba(127, 176, 242, .14); --pri-line: rgba(127, 176, 242, .32); --pri-ring: rgba(127, 176, 242, .28); --pri-ring-strong: rgba(127, 176, 242, .4); }
:root:is([data-theme="midnight"], [data-theme="studio-dark"])[data-accent="cyan"]    { --pri: #5ccbe0; --pri-solid: #117c94; --pri-hover: #168aa3; --pri-ink: #92dcea; --pri-soft: rgba(92, 203, 224, .13);  --pri-line: rgba(92, 203, 224, .3);   --pri-ring: rgba(92, 203, 224, .26);  --pri-ring-strong: rgba(92, 203, 224, .38); }
:root:is([data-theme="midnight"], [data-theme="studio-dark"])[data-accent="emerald"] { --pri: #5fcf9f; --pri-solid: #17825c; --pri-hover: #1c9068; --pri-ink: #92dfbe; --pri-soft: rgba(95, 207, 159, .13);  --pri-line: rgba(95, 207, 159, .3);   --pri-ring: rgba(95, 207, 159, .26);  --pri-ring-strong: rgba(95, 207, 159, .38); }
:root:is([data-theme="midnight"], [data-theme="studio-dark"])[data-accent="amber"]   { --pri: #ecb45c; --pri-solid: #a76410; --pri-hover: #b8711a; --pri-ink: #f2cb8a; --pri-soft: rgba(236, 180, 92, .13);  --pri-line: rgba(236, 180, 92, .3);   --pri-ring: rgba(236, 180, 92, .26);  --pri-ring-strong: rgba(236, 180, 92, .38); }
:root:is([data-theme="midnight"], [data-theme="studio-dark"])[data-accent="rose"]    { --pri: #f08aa2; --pri-solid: #c63d60; --pri-hover: #d04b6d; --pri-ink: #f5b0c1; --pri-soft: rgba(240, 138, 162, .13); --pri-line: rgba(240, 138, 162, .3);  --pri-ring: rgba(240, 138, 162, .26); --pri-ring-strong: rgba(240, 138, 162, .38); }
:root:is([data-theme="midnight"], [data-theme="studio-dark"])[data-accent="violet"]  { --pri: #b19df2; --pri-solid: #7458d0; --pri-hover: #8166d8; --pri-ink: #cbbdf6; --pri-soft: rgba(177, 157, 242, .14); --pri-line: rgba(177, 157, 242, .32); --pri-ring: rgba(177, 157, 242, .28); --pri-ring-strong: rgba(177, 157, 242, .4); }
:root:is([data-theme="midnight"], [data-theme="studio-dark"])[data-accent="slate"]   { --pri: #a9b5c6; --pri-solid: #5a687c; --pri-hover: #67768b; --pri-ink: #c6cfdb; --pri-soft: rgba(169, 181, 198, .13); --pri-line: rgba(169, 181, 198, .28); --pri-ring: rgba(169, 181, 198, .26); --pri-ring-strong: rgba(169, 181, 198, .38); }

/* ---- Sidebar styles (declared after themes so they win) ---- */
:root[data-sidebar="light"] {
  --sb-bg: var(--surface); --sb-bg-2: var(--surface); --sb-line: var(--line);
  --sb-text: var(--text-2); --sb-text-strong: var(--text); --sb-icon: var(--muted); --sb-label: var(--neu);
  --sb-hover: var(--hover); --sb-active-bg: var(--pri-soft); --sb-active-text: var(--pri-ink);
  --sb-indicator: var(--pri); --sb-scroll: var(--line-strong);
}
:root[data-sidebar="gradient"] {
  --sb-bg: #141a3a; --sb-bg-2: #1c2250;
  --sb-bg: color-mix(in srgb, var(--pri-solid) 16%, #0c1124);
  --sb-bg-2: color-mix(in srgb, var(--pri-solid) 32%, #0f1530);
  --sb-line: rgba(255, 255, 255, .08);
}

/* ==========================================================================
   1. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; } /* also holds if the Tailwind CDN is unreachable */
/* Default border colour on-token. `html *` (0,0,1) beats Tailwind preflight's `*` (0,0,0)
   but loses to every class (Tailwind border-* utilities, SweetAlert2, components), so plain
   .border / .divide-y / <hr> follow the theme (no bright #e5e7eb lines in midnight). */
html *, html *::before, html *::after { border-color: var(--line); }
[hidden]:not([hidden="until-found"]) { display: none !important; }
.sidebar-overlay.hidden { display: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }
html body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .font-display { font-family: var(--font-display); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--pri-ring-strong); color: var(--text); }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--pri-solid); }
hr { border: 0; border-top: 1px solid var(--line); }
img, svg { max-width: 100%; }

/* Icons — Material Symbols (clip ligature text while the font loads) */
.material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
  user-select: none;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}
.icon-fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.icon-3xs { font-size: 14px !important; }
.icon-2xs { font-size: 16px !important; }
.icon-xs  { font-size: 18px !important; }
.icon-sm  { font-size: 20px !important; }
.icon-md  { font-size: 22px !important; }
.icon-lg  { font-size: 24px !important; }
.icon-xl  { font-size: 32px !important; }
.icon-2xl { font-size: 40px !important; }
.icon-14 { font-size: 14px !important; } .icon-16 { font-size: 16px !important; } .icon-18 { font-size: 18px !important; }
.icon-20 { font-size: 20px !important; } .icon-24 { font-size: 24px !important; } .icon-32 { font-size: 32px !important; }
.icon-40 { font-size: 40px !important; } .icon-48 { font-size: 48px !important; }

/* Scrollbars (WebKit fallback; scrollbar-color covers modern engines) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--hint); }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-route);
  padding: 8px 14px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); box-shadow: none;
  transform: translateY(calc(-100% - 32px)); transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus { transform: none; box-shadow: var(--e-3); }

/* ==========================================================================
   2. APP SHELL — sidebar · topbar · page · footer
   ========================================================================== */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: var(--z-sidebar);
  width: var(--sb-w);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--sb-bg), var(--sb-bg-2));
  border-right: 1px solid var(--sb-line);
  color: var(--sb-text);
  transition: width var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.sb-head {
  display: flex; align-items: center; gap: 8px;
  height: var(--topbar-h); padding: 0 12px; flex-shrink: 0;
}
.sb-brand {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0; padding: 6px; border-radius: var(--r-sm);
  color: var(--sb-text-strong);
}
.sb-brand:hover { background: var(--sb-hover); }
.sb-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--pri-solid); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .18);
}
.sb-mark .material-symbols-outlined { font-size: 19px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.sb-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-brand-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--sb-text-strong); }
.sb-brand-org { font-size: var(--fs-xs); color: var(--sb-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-icon-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--sb-icon); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sb-icon-btn:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sb-close { display: none; }

.sb-nav {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 12px 16px;
  scrollbar-width: thin; scrollbar-color: var(--sb-scroll) transparent;
}
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--sb-scroll); border: 0; }
.sb-group + .sb-group { margin-top: 18px; }
.sb-label {
  display: flex; align-items: center; gap: 6px;
  width: 100%; height: 30px; padding: 0 12px; margin: 0 0 2px;
  border: 0; border-radius: var(--r-sm); background: transparent;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .01em;
  color: var(--sb-label); text-align: left;
}

.sidebar-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--sb-text);
  font-size: 14.5px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sidebar-link + .sidebar-link { margin-top: 2px; }
.sidebar-link .material-symbols-outlined { font-size: 20px; color: var(--sb-icon); transition: color var(--dur-1) var(--ease); }
.sidebar-link .sb-text { overflow: hidden; text-overflow: ellipsis; }
.sidebar-link:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sidebar-link:hover .material-symbols-outlined { color: var(--sb-text-strong); }
.sidebar-link.active { background: var(--sb-active-bg); color: var(--sb-active-text); }
.sidebar-link.active .material-symbols-outlined { color: var(--sb-indicator); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.sidebar-link.active::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sb-indicator);
}
.sidebar-link:focus-visible { outline: 2px solid var(--sb-indicator); outline-offset: -2px; }
.sidebar .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Accordion group (admin) — head is styled as a section label */
.acc-head { cursor: pointer; user-select: none; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.acc-head:hover { background: var(--sb-hover); color: var(--sb-text); }
.acc-head .sb-arrow { margin-left: auto; font-size: 18px; transition: transform var(--dur-2) var(--ease); }
.acc-head.open .sb-arrow { transform: rotate(180deg); }
.acc-body {
  overflow: hidden; max-height: 0; opacity: 0; visibility: hidden;
  transition: max-height var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-3);
}
.acc-body.open { max-height: 640px; opacity: 1; visibility: visible; transition-delay: 0s; }

.sb-foot { flex-shrink: 0; padding: 8px 12px 12px; border-top: 1px solid var(--sb-line); display: flex; flex-direction: column; gap: 4px; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-sm); min-width: 0; }
.sb-user .avatar { box-shadow: none; }
.sb-user-info { flex: 1; min-width: 0; line-height: 1.3; }
.sb-user-name { display: block; font-size: 14px; font-weight: 500; color: var(--sb-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { display: block; font-size: var(--fs-xs); color: var(--sb-label); }
.sb-collapse {
  display: flex; align-items: center; gap: 12px;
  width: 100%; height: 36px; padding: 0 12px;
  border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
  font: 500 13px/1 var(--font-sans); color: var(--sb-label);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sb-collapse:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sb-collapse .material-symbols-outlined { font-size: 20px; }

.sidebar-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--overlay);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: ui-fade var(--dur-2) var(--ease) both;
}

/* Main column */
.main-wrap {
  margin-left: var(--sb-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
  transition: margin-left var(--dur-3) var(--ease);
}
.app-main { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
.page {
  flex: 1 0 auto;
  width: 100%; max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--page-py) var(--page-px) var(--sp-10);
  min-width: 0;
}

/* Topbar — translucent, hairline once scrolled */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  height: var(--topbar-h);
  background: rgb(var(--bg-rgb) / .86);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
html.is-scrolled .topbar { border-bottom-color: var(--line); box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.topbar-inner {
  height: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--page-px);
  display: flex; align-items: center; gap: 12px;
}
.topbar .topbar-menu { display: none; margin-left: -8px; }
.topbar-heading { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.topbar-heading .crumbs { flex-shrink: 1; min-width: 0; }
.topbar-sep { color: var(--hint); font-size: 18px; }
.topbar-title {
  margin: 0; min-width: 0;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; line-height: 1.3;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.topbar.title-hidden .topbar-title,
.topbar.title-hidden .topbar-sep { opacity: 0; transform: translateY(3px); pointer-events: none; }
/* with a breadcrumb the trail keeps its current-page leaf (no dangling "หน้าแรก" alone) */
@media (min-width: 641px) {
  .topbar.title-hidden .topbar-heading:has(.crumbs) .topbar-title,
  .topbar.title-hidden .topbar-heading:has(.crumbs) .topbar-sep { opacity: 1; transform: none; pointer-events: auto; }
}
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }

.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 10px 0 4px;
  border: 1px solid transparent; border-radius: var(--r-full);
  background: transparent; color: var(--text-2); cursor: pointer;
  font: 500 var(--fs-sm)/1 var(--font-sans);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.user-chip:hover, .user-chip[aria-expanded="true"] { background: var(--surface); border-color: var(--line); box-shadow: var(--e-1); }
.user-chip-name { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip-caret { font-size: 18px !important; color: var(--hint); }

/* Footer — hairline aligned with the content column */
.app-footer { margin-top: auto; padding: 0 var(--page-px); }
.app-footer-inner {
  max-width: calc(var(--content-max) - 2 * var(--page-px)); margin: 0 auto;
  padding: 18px 0 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.5;
}
.app-footer-inner > span:last-child { color: var(--hint); }

/* Collapsed sidebar (desktop) — html.sb-collapsed is the single source of truth */
@media (min-width: 1024px) {
  html.sb-collapsed .sidebar { width: var(--sb-cw); }
  html.sb-collapsed .main-wrap { margin-left: var(--sb-cw); }
  html.sb-collapsed .sidebar .sb-text,
  html.sb-collapsed .sidebar .sb-brand-text,
  html.sb-collapsed .sidebar .sb-user-info,
  html.sb-collapsed .sidebar .sb-user-logout {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  html.sb-collapsed .sb-head { padding: 0 12px; }
  html.sb-collapsed .sb-brand { justify-content: center; padding: 6px 0; }
  html.sb-collapsed .sidebar-link { justify-content: center; padding: 0; gap: 0; }
  html.sb-collapsed .sb-label { justify-content: center; padding: 0; height: 21px; pointer-events: none; }
  html.sb-collapsed .sb-label::after { content: ""; width: 20px; height: 1px; background: var(--sb-line); }
  html.sb-collapsed .sb-label .sb-arrow { display: none; }
  html.sb-collapsed .sb-group:first-child > .sb-label { display: none; }
  html.sb-collapsed .acc-body { max-height: none; opacity: 1; visibility: visible; }
  html.sb-collapsed .sb-user { justify-content: center; padding: 6px 0; }
  html.sb-collapsed .sb-collapse { justify-content: center; padding: 0; }
}

/* Tablet & phone: off-canvas drawer */
@media (max-width: 1023px) {
  :root { --page-px: 24px; --page-py: 24px; }
  /* closed drawer is also hidden from Tab / screen readers (visibility flips after the slide) */
  .sidebar { width: min(300px, 86vw); transform: translateX(-100%); box-shadow: none; visibility: hidden;
    transition: width var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), visibility 0s linear var(--dur-3); }
  .sidebar.mobile-open { transform: none; box-shadow: var(--e-4); visibility: visible; transition-delay: 0s; }
  .sb-close { display: grid; }
  .main-wrap { margin-left: 0 !important; }
  .topbar .topbar-menu { display: inline-flex; }
  .sb-collapse { display: none; }
  html.sb-open { overflow: hidden; }
}
@media (min-width: 1024px) { .sidebar-overlay { display: none !important; } }
@media (max-width: 640px) {
  :root { --page-px: 16px; --page-py: 20px; --gap-block: 16px; --gap-inner: 12px; --topbar-h: 56px; }
  .user-chip-name, .topbar-heading .crumbs, .topbar-heading .topbar-sep { display: none; }
  .user-chip { padding: 0 6px 0 4px; }
  .app-footer-inner { justify-content: center; text-align: center; }
}

/* ==========================================================================
   3. COMPONENTS
   ========================================================================== */

/* ---- Tones (shared by stat-card, icon-chip, avatar, alert, meter) ---- */
.tone-accent  { --tone: var(--pri);  --tone-ink: var(--pri-ink);  --tone-soft: var(--pri-soft);  --tone-line: var(--pri-line); }
.tone-success { --tone: var(--ok);   --tone-ink: var(--ok-ink);   --tone-soft: var(--ok-soft);   --tone-line: var(--ok-line); }
.tone-warning { --tone: var(--warn); --tone-ink: var(--warn-ink); --tone-soft: var(--warn-soft); --tone-line: var(--warn-line); }
.tone-danger  { --tone: var(--err);  --tone-ink: var(--err-ink);  --tone-soft: var(--err-soft);  --tone-line: var(--err-line); }
.tone-info    { --tone: var(--info); --tone-ink: var(--info-ink); --tone-soft: var(--info-soft); --tone-line: var(--info-line); }
.tone-violet  { --tone: var(--vio);  --tone-ink: var(--vio-ink);  --tone-soft: var(--vio-soft);  --tone-line: var(--vio-line); }
.tone-cyan    { --tone: var(--cyan); --tone-ink: var(--cyan-ink); --tone-soft: var(--cyan-soft); --tone-line: var(--cyan-line); }
.tone-neutral { --tone: var(--neu);  --tone-ink: var(--neu-ink);  --tone-soft: var(--neu-soft);  --tone-line: var(--neu-line); }
.tone-rss     { --tone: var(--c-rss); --tone-ink: var(--c-rss); --tone-soft: var(--c-rss-soft); --tone-line: var(--c-rss-line); }

/* ---- Page head ---- */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; margin-bottom: var(--gap-block);
}
.page-head-main { flex: 1 1 420px; min-width: 0; }
.page-head .crumbs { margin-bottom: 8px; }
/* top-aligned so a long, wrapping title keeps the icon beside its first line;
   the title's padding centres a single line on the icon */
.page-title-row { --page-icon-size: 44px; display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.page-icon + .page-title { padding-top: max(0px, calc((var(--page-icon-size) - 1.25em) / 2)); }
.page-meta { margin-top: 12px; row-gap: 8px; }
.page-icon {
  width: var(--page-icon-size, 44px); height: var(--page-icon-size, 44px); flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--line); box-shadow: var(--e-1);
}
.page-icon .material-symbols-outlined { font-size: 22px; }
.page-title {
  margin: 0;
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600;
  line-height: var(--lh-tight); color: var(--text);
  overflow-wrap: anywhere;
}
.page-desc { margin: 6px 0 0; max-width: 72ch; font-size: var(--fs-base); line-height: 1.6; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-actions > .input-group { min-width: 210px; }   /* a filter (e.g. year select) in the head */
@media (max-width: 640px) {
  .page-title { font-size: var(--fs-xl); }
  .page-title-row { --page-icon-size: 40px; }
  .page-actions { width: 100%; }
  .page-actions > .btn, .page-actions > .btn-m, .page-actions > .input-group { flex: 1 1 auto; }
  .page-actions > .input-group { min-width: 0; }
}

/* ---- Breadcrumb ---- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs li + li::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0;
  border-top: 1.5px solid var(--hint); border-right: 1.5px solid var(--hint);
  transform: rotate(45deg); margin-right: 4px; opacity: .8;
}
.crumbs a { color: var(--muted); border-radius: 4px; transition: color var(--dur-1) var(--ease); }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--text-2); font-weight: 500; }

/* ---- Section rhythm ---- */
.section { margin-bottom: var(--gap-block); }
.section:last-child { margin-bottom: 0; }
.stack > *, .stack-sm > *, .grid-2 > .section, .layout-split > .section, .layout-split > * > .section:last-child, .form-grid > .section { margin-top: 0; margin-bottom: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; color: var(--text); }
.section-desc { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: var(--gap-block); }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.layout-split { display: grid; gap: var(--gap-block); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .layout-split { grid-template-columns: minmax(0, 1fr) 340px; } }
.grid-2 { display: grid; gap: var(--gap-inner); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Card ---- */
.card, .card-m {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
}
.card-m { transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.card.is-flush, .card-m.is-flush { overflow: hidden; }
/* a card with a footer is a column so the footer sits at the bottom when grid rows stretch it */
.card:has(> .card-foot) { display: flex; flex-direction: column; }
.card:has(> .card-foot) > .card-body { flex: 1 1 auto; }
.card > .card-foot { margin-top: auto; }
.card-head {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
.card-head-text { flex: 1; min-width: 0; }
.card-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; line-height: 1.35; color: var(--text); }
.card-meta { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.card-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.card-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--tone-soft, var(--surface-3)); color: var(--tone-ink, var(--text-2));
}
.card-icon .material-symbols-outlined { font-size: 18px; }
.card-body { padding: 20px; }
.card-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px);
}
.card-foot.is-between { justify-content: space-between; }
@media (max-width: 640px) {
  .card-head { padding: 12px 16px; min-height: 56px; }
  .card-body { padding: 16px; }
  .card-foot { padding: 12px 16px; }
}

/* ---- Icon chip ---- */
.icon-chip {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  background: var(--tone-soft, var(--pri-soft)); color: var(--tone-ink, var(--pri-ink));
}
.icon-chip .material-symbols-outlined { font-size: 20px; }
.icon-chip.is-sm { width: 28px; height: 28px; border-radius: var(--r-sm); }
.icon-chip.is-sm .material-symbols-outlined { font-size: 16px; }
.icon-chip.is-lg { width: 44px; height: 44px; border-radius: var(--r-md); }
.icon-chip.is-lg .material-symbols-outlined { font-size: 22px; }

/* ---- Stat card ---- */
.stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: var(--gap-block); }
.stat-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width: 1024px) { .stat-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .stat-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label icon" "value icon" "meta meta";
  column-gap: 12px; row-gap: 2px; align-items: start; align-content: start; /* rows don't stretch when a neighbour card is taller */
  padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e-1);
  min-width: 0;
}
.stat-label { grid-area: label; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); line-height: 1.4; }
.stat-value {
  grid-area: value;
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text);
  overflow-wrap: anywhere;
}
.stat-icon {
  grid-area: icon;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--tone-soft, var(--pri-soft)); color: var(--tone-ink, var(--pri-ink));
}
.stat-icon .material-symbols-outlined { font-size: 21px; }
.stat-meta { grid-area: meta; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-delta.is-up { color: var(--ok-ink); }
.stat-delta.is-down { color: var(--err-ink); }
a.stat-card { transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); }
a.stat-card:hover { border-color: var(--line-strong); box-shadow: var(--e-2); }
@media (max-width: 640px) {
  .stat-grid { gap: 12px; }
  .stat-card { padding: 14px 16px; }
  .stat-value { font-size: var(--fs-xl); }
  .stat-icon { width: 34px; height: 34px; border-radius: var(--r-sm); }
  .stat-icon .material-symbols-outlined { font-size: 18px; }
}

/* ---- Buttons (.btn + legacy .btn-m share one engine) ---- */
.btn, .btn-m {
  --btn-h: 40px; --btn-px: 16px; --btn-fs: var(--fs-base);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text);
  font-family: var(--font-sans); font-size: var(--btn-fs); font-weight: 500; line-height: 1.2;
  white-space: nowrap; text-decoration: none; text-align: center;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.btn .material-symbols-outlined, .btn-m .material-symbols-outlined { font-size: 20px; margin: 0 -2px; }
.btn:active:not(:disabled):not([aria-disabled="true"]), .btn-m:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(.5px); }
.btn:focus-visible, .btn-m:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled,
.btn-m:disabled, .btn-m[aria-disabled="true"], .btn-m.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Variants */
.btn.btn-primary, .btn-m.primary {
  background: var(--pri-solid); color: var(--on-solid);
  box-shadow: var(--e-1), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn.btn-primary:hover, .btn-m.primary:hover { background: var(--pri-hover); color: var(--on-solid); }
.btn.btn-secondary, .btn-m.outline {
  background: var(--surface); color: var(--text);
  border-color: var(--line-strong); box-shadow: var(--e-1);
}
/* Tailwind ships an `.outline` utility (outline-style:solid) that collides with the legacy modifier */
.btn-m.outline { outline: none; }
.btn-m.outline:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.btn.btn-secondary:hover, .btn-m.outline:hover { background: var(--surface-2); border-color: var(--line-hover); color: var(--text); }
.btn.btn-ghost, .btn-m.ghost { background: transparent; color: var(--muted); }
.btn.btn-ghost:hover, .btn-m.ghost:hover { background: var(--hover); color: var(--text); }
.btn.btn-danger, .btn-m.danger { background: var(--err-solid); color: #fff; box-shadow: var(--e-1), inset 0 1px 0 rgba(255, 255, 255, .1); }
.btn.btn-danger:hover, .btn-m.danger:hover { background: var(--err-hover); color: #fff; }
.btn.btn-danger-soft, .btn-m.danger-soft { background: var(--err-soft); color: var(--err-ink); border-color: var(--err-line); }
.btn.btn-danger-soft:hover, .btn-m.danger-soft:hover { background: var(--err-solid); color: #fff; border-color: var(--err-solid); }
.btn.btn-success, .btn-m.success { background: var(--ok-solid); color: #fff; box-shadow: var(--e-1), inset 0 1px 0 rgba(255, 255, 255, .1); }
.btn.btn-success:hover, .btn-m.success:hover { background: var(--ok-hover); color: #fff; }
.btn.btn-warning, .btn-m.warning { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }
.btn.btn-warning:hover, .btn-m.warning:hover { background: var(--warn-solid); color: #fff; border-color: var(--warn-solid); }
.btn.btn-soft, .btn-m.soft { background: var(--pri-soft); color: var(--pri-ink); border-color: var(--pri-line); }
.btn.btn-soft:hover, .btn-m.soft:hover { background: var(--pri-line); }
.btn.btn-rss, .btn-m.rss { background: var(--c-rss-solid); color: #fff; box-shadow: var(--e-1); }
.btn.btn-rss:hover, .btn-m.rss:hover { background: var(--c-rss-hover); color: #fff; }
.btn.btn-link, .btn-m.link { min-height: auto; padding: 0; color: var(--pri); border: 0; }
.btn.btn-link:hover, .btn-m.link:hover { text-decoration: underline; text-underline-offset: 3px; }
:root:is([data-theme="midnight"], [data-theme="studio-dark"]) :is(.btn.btn-primary, .btn-m.primary) { box-shadow: var(--e-1); }
.btn.btn-danger:focus-visible, .btn-m.danger:focus-visible, .btn.btn-danger-soft:focus-visible, .btn-m.danger-soft:focus-visible { outline-color: var(--err); }

/* Sizes */
.btn.btn-sm, .btn-m.sm { --btn-h: 32px; --btn-px: 12px; --btn-fs: var(--fs-sm); gap: 6px; }
.btn.btn-sm .material-symbols-outlined, .btn-m.sm .material-symbols-outlined { font-size: 18px; }
.btn.btn-xs, .btn-m.xs { --btn-h: 28px; --btn-px: 10px; --btn-fs: var(--fs-xs); gap: 4px; border-radius: var(--r-xs); }
.btn.btn-xs .material-symbols-outlined, .btn-m.xs .material-symbols-outlined { font-size: 16px; }
.btn.btn-lg, .btn-m.lg { --btn-h: 48px; --btn-px: 20px; --btn-fs: var(--fs-md); }
.btn.btn-block, .btn-m.block { display: flex; width: 100%; }
.btn.btn-icon, .btn-m.icon { width: var(--btn-h); padding: 0; gap: 0; }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Loading state (UI.busy / data-busy / [data-loading]) */
.btn.is-loading, .btn[data-loading], .btn-m.is-loading, .btn-m[data-loading], [data-loading] { cursor: progress; pointer-events: none; }
.btn.is-loading:disabled, .btn[data-loading]:disabled, .btn-m.is-loading:disabled, .btn-m[data-loading]:disabled { opacity: .85; }
.busy-label { overflow: hidden; text-overflow: ellipsis; }
.busy-elapsed { font-variant-numeric: tabular-nums; opacity: .78; font-size: .9em; }
.busy-elapsed:empty { display: none; }

/* Touch targets */
@media (pointer: coarse) {
  .btn, .btn-m { --btn-h: 44px; }
  .btn.btn-sm, .btn-m.sm { --btn-h: 40px; }
  .btn.btn-xs, .btn-m.xs { --btn-h: 36px; }
  .input, .select, .inp { min-height: 44px; }
  .sidebar-link { height: 44px; }
  .sb-icon-btn, .ui-toast-close { width: 44px; height: 44px; }
  .page-btn { min-width: 44px; height: 44px; }
  .tab { height: 44px; }
  .menu-item { min-height: 44px; }
  .chip { height: 40px; }
  .user-chip { height: 44px; }
  .segmented > button, .segmented > a, .segmented > .seg { min-height: 40px; min-width: 40px; }
  .switch-row { min-height: 44px; }
  .range { height: 44px; }
  .row-actions-slot { width: 40px; height: 40px; }
}

/* ---- Spinner ---- */
.spinner {
  display: inline-block; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ui-spin .7s linear infinite;
  vertical-align: -3px; opacity: .9;
}
.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 24px; height: 24px; border-width: 2.5px; }
.spinner-accent { color: var(--pri); }

/* ---- Form controls (.input/.select/.textarea + legacy .inp) ---- */
.input, .select, .textarea, .inp {
  display: block; width: 100%;
  min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background-color: var(--surface); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5;
  box-shadow: var(--e-1);
  outline: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.input:hover, .select:hover, .textarea:hover, .inp:hover { border-color: var(--line-hover); }
.input:focus, .select:focus, .textarea:focus, .inp:focus,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible, .inp:focus-visible {
  outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-ring);
}
.input::placeholder, .textarea::placeholder, .inp::placeholder { color: var(--placeholder); opacity: 1; }
.input:disabled, .select:disabled, .textarea:disabled, .inp:disabled { background-color: var(--surface-2); color: var(--hint); cursor: not-allowed; box-shadow: none; }
.input[readonly], .textarea[readonly], .inp[readonly] { background-color: var(--surface-2); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid, .inp.is-invalid,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .inp[aria-invalid="true"] { border-color: var(--err); }
.input.is-invalid:focus, .select.is-invalid:focus, .textarea.is-invalid:focus, .inp.is-invalid:focus,
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus, .inp[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--err-ring); }
.select, select.inp, select.input {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7482' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
:root:is([data-theme="midnight"], [data-theme="studio-dark"]) :is(.select, select.inp, select.input) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.select[multiple], select.inp[multiple] { background-image: none; padding-right: 12px; }
.textarea, textarea.inp, textarea.input { min-height: 96px; resize: vertical; padding-top: 10px; padding-bottom: 10px; }
.input-sm, .inp.inp-sm { min-height: 32px; padding: 4px 10px; font-size: var(--fs-sm); }
.select.input-sm, select.inp.inp-sm { padding-right: 32px; background-position: right 8px center; }
.input-lg { min-height: 48px; font-size: var(--fs-md); padding: 10px 14px; }
input[type="file"] { color: var(--muted); font-size: var(--fs-sm); }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font: 500 var(--fs-sm)/1.2 var(--font-sans); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
input[type="file"]::file-selector-button:hover { background: var(--surface-2); }
@media (max-width: 640px) { .input, .select, .textarea, .inp { font-size: 16px; } }

/* Field wrapper */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label, .label {
  display: block;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.4;
  color: var(--text-2);
  text-transform: none; letter-spacing: normal;
}
.label { margin-bottom: 6px; }
.field > .label { margin-bottom: 0; }
.field-label .req, .label .req { color: var(--err); margin-left: 2px; }
.field-hint { font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.field-error { display: flex; align-items: flex-start; gap: 4px; font-size: var(--fs-xs); line-height: 1.5; font-weight: 500; color: var(--err-ink); }
.field-error .material-symbols-outlined { font-size: 16px; margin-top: 1px; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea, .field.is-invalid .inp { border-color: var(--err); }
.form-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid .span-all { grid-column: 1 / -1; } }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 640px) { .form-actions > .btn, .form-actions > .btn-m { flex: 1 1 100%; } }

/* Input with icon / suffix */
.input-group { position: relative; display: flex; align-items: center; min-width: 0; }
.input-group > .input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  z-index: 1; pointer-events: none;
  font-size: 20px; color: var(--hint);
}
.input-group > .input-icon ~ .input, .input-group > .input-icon ~ .inp, .input-group > .input-icon ~ .select { padding-left: 40px; }
.input-group > .input-suffix { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; gap: 2px; }
.input-group.has-suffix > .input, .input-group.has-suffix > .inp { padding-right: 44px; }
.input-group .input-suffix .btn { --btn-h: 32px; }

/* Choice rows: checkbox/radio cards + switch */
.check {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.check:hover { border-color: var(--line-strong); }
.check input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.check:has(input:checked) { border-color: var(--pri-line); background: var(--pri-soft); }
.check:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.check-title { display: block; font-weight: 500; color: var(--text); line-height: 1.4; }
.check-hint { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.switch {
  -webkit-appearance: none; appearance: none;
  position: relative; flex-shrink: 0;
  width: 36px; height: 20px; margin: 0;
  border-radius: 999px; background: var(--line-strong); cursor: pointer;
  transition: background-color var(--dur-2) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .25);
  transition: transform var(--dur-2) var(--ease);
}
.switch:checked { background: var(--pri-solid); }
.switch:checked::after { transform: translateX(16px); }
.switch:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Toolbar (search / filter row) ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.toolbar > .toolbar-grow, .toolbar > .input-group { flex: 1 1 280px; min-width: 0; }
.toolbar > .select, .toolbar > select.inp, .toolbar > select.input { width: auto; min-width: 160px; flex: 0 1 auto; }
.toolbar-spacer { flex: 1 1 auto; }
@media (max-width: 640px) {
  .toolbar > * { flex: 1 1 100%; }
  .toolbar > .select, .toolbar > select.inp, .toolbar > select.input { width: 100%; }
  .toolbar > .btn, .toolbar > .btn-m { flex: 1 1 0; }
  .toolbar > .btn.btn-icon, .toolbar > .btn-m.icon { flex: 0 0 auto; }
}

/* ---- Table ---- */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap.is-scroll { max-height: min(70vh, 720px); overflow: auto; }
@media (max-width: 767px) { .tbl-wrap > .tbl { min-width: 640px; } }
.tbl-wrap > .tbl.is-wide { min-width: 900px; }
.tbl {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--tbl-td-fs, 14px); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tbl th {
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--tbl-th-fs, 13px); font-weight: 500; line-height: 1.4;
  color: var(--muted);
  text-align: left; text-transform: none; letter-spacing: normal;
  white-space: nowrap; vertical-align: middle;
}
.tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--tbl-td-fs, 14px); line-height: 1.5;
  color: var(--text); vertical-align: middle;
}
.tbl th:first-child, .tbl td:first-child { padding-left: 20px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 20px; }
/* rows keep a consistent ~2-line height (setting from the original design) */
.tbl tbody tr { height: calc(var(--tbl-td-fs, 14px) * 3.6); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl th.text-center, .tbl td.text-center { text-align: center; }
.tbl th.text-right, .tbl td.text-right, .tbl .num { text-align: right; }
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.is-clickable, .tbl tr[data-href] { cursor: pointer; }
.tbl tr.is-muted td { color: var(--hint); }
.tbl tr.is-selected td { background: var(--pri-soft); }
.tbl tr:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.tbl-wrap.is-scroll .tbl th, .tbl.tbl-sticky th { position: sticky; top: 0; z-index: 1; }
.tbl.tbl-sticky th { top: var(--topbar-h); }
.tbl.tbl-compact th { padding-top: 8px; padding-bottom: 8px; }
.tbl.tbl-compact td { padding-top: 8px; padding-bottom: 8px; }
.tbl.tbl-compact tbody tr { height: auto; }
.tbl-sort {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.tbl-sort:hover { color: var(--text); }
.tbl-sort .material-symbols-outlined { font-size: 16px; color: var(--hint); }
th[aria-sort="ascending"] .tbl-sort, th[aria-sort="descending"] .tbl-sort { color: var(--text); }
th[aria-sort] .tbl-sort .material-symbols-outlined { color: var(--pri); }

/* Phone list that mirrors a table (pair with .hidden lg:block on the table) */
.m-list { border-top: 1px solid var(--line); }
.m-list:first-child { border-top: 0; }
.m-item { display: block; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); transition: background-color var(--dur-1) var(--ease); }
.m-item:last-child { border-bottom: 0; }
.m-item[data-href], a.m-item, .m-item.is-clickable { cursor: pointer; }
.m-item[data-href]:hover, a.m-item:hover, .m-item.is-clickable:hover { background: var(--hover); }
.m-title { margin: 0 0 10px; font-weight: 500; font-size: var(--fs-base); line-height: 1.5; color: var(--text); }
.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.m-label { display: block; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--muted); }
.m-value { font-size: var(--fs-sm); color: var(--text-2); }
@media (max-width: 640px) { .m-item { padding: 14px 16px; } }

/* Document title link (tables, lists) — ink by default, accent only on interaction */
.doc-link { color: var(--text); font-weight: 500; text-decoration: none; transition: color var(--dur-1) var(--ease); }
.doc-link:hover, .tbl tr:hover .doc-link, .m-item:hover .doc-link { color: var(--pri); }
.doc-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc-link.is-cancelled, .is-cancelled > .doc-link,
.tbl tr:hover .doc-link.is-cancelled, .m-item:hover .doc-link.is-cancelled { color: var(--hint); text-decoration: line-through; }

/* ---- Badges (.badge + soft variants; legacy .pill) ---- */
:where(.badge), .pill {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 22px; padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.2;
  white-space: nowrap; vertical-align: middle;
  background: var(--neu-soft); color: var(--neu-ink);
  box-shadow: inset 0 0 0 1px var(--neu-line);
}
:where(.badge) .material-symbols-outlined, .pill .material-symbols-outlined { font-size: 14px; margin-left: -2px; }
.badge-neutral, .pill-gray   { background: var(--neu-soft);  color: var(--neu-ink);  box-shadow: inset 0 0 0 1px var(--neu-line); }
.badge-accent                { background: var(--pri-soft);  color: var(--pri-ink);  box-shadow: inset 0 0 0 1px var(--pri-line); }
.badge-success, .pill-green  { background: var(--ok-soft);   color: var(--ok-ink);   box-shadow: inset 0 0 0 1px var(--ok-line); }
.badge-warning, .pill-amber  { background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn-line); }
.badge-danger, .pill-red     { background: var(--err-soft);  color: var(--err-ink);  box-shadow: inset 0 0 0 1px var(--err-line); }
.badge-info, .pill-blue      { background: var(--info-soft); color: var(--info-ink); box-shadow: inset 0 0 0 1px var(--info-line); }
.badge-violet, .pill-purple  { background: var(--vio-soft);  color: var(--vio-ink);  box-shadow: inset 0 0 0 1px var(--vio-line); }
.badge-cyan, .pill-cyan      { background: var(--cyan-soft); color: var(--cyan-ink); box-shadow: inset 0 0 0 1px var(--cyan-line); }
.badge-rss                   { background: var(--c-rss-soft); color: var(--c-rss); box-shadow: inset 0 0 0 1px var(--c-rss-line); }
.badge-solid { background: var(--pri-solid); color: #fff; box-shadow: none; }
.badge-lg { min-height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
.badge-round { border-radius: var(--r-full); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge-count { min-width: 20px; min-height: 20px; padding: 0 6px; justify-content: center; border-radius: var(--r-full); font-variant-numeric: tabular-nums; }

/* ---- Alerts (.alert + tone; legacy .alert-success/error/warning/info) ---- */
.alert, .alert-info, .alert-success, .alert-warning, .alert-error, .alert-danger {
  --tone: var(--info); --tone-ink: var(--info-ink); --tone-soft: var(--info-soft); --tone-line: var(--info-line);
  padding: 12px 16px;
  border: 1px solid var(--tone-line); border-radius: var(--r-md);
  background: var(--tone-soft); color: var(--tone-ink);
  line-height: 1.6;
}
.alert { display: flex; align-items: flex-start; gap: 12px; }
.alert-success { --tone: var(--ok);   --tone-ink: var(--ok-ink);   --tone-soft: var(--ok-soft);   --tone-line: var(--ok-line); }
.alert-warning { --tone: var(--warn); --tone-ink: var(--warn-ink); --tone-soft: var(--warn-soft); --tone-line: var(--warn-line); }
.alert-error, .alert-danger { --tone: var(--err); --tone-ink: var(--err-ink); --tone-soft: var(--err-soft); --tone-line: var(--err-line); }
.alert-neutral { --tone: var(--neu); --tone-ink: var(--text-2); --tone-soft: var(--surface-2); --tone-line: var(--line); }
:is(.alert, .alert-info, .alert-success, .alert-warning, .alert-error, .alert-danger) > .material-symbols-outlined { color: var(--tone); flex-shrink: 0; font-size: 20px; }
.alert > .material-symbols-outlined:first-child { margin-top: 2px; }
.alert-content { flex: 1; min-width: 0; }
.alert-title { display: block; margin: 0 0 2px; font-weight: 600; color: var(--tone-ink); }
.alert-body { color: var(--tone-ink); }
.alert-body > :last-child { margin-bottom: 0; }
:is(.alert, .alert-info, .alert-success, .alert-warning, .alert-error, .alert-danger) a:not(.btn):not(.btn-m) { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.alert-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.alert.is-compact { padding: 8px 12px; font-size: var(--fs-sm); gap: 8px; }

/* ---- Empty state ---- */
:where(.empty-state) {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 24px; gap: 4px;
}
.empty-icon {
  width: 56px; height: 56px; margin-bottom: 12px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3); color: var(--muted);
}
.empty-icon .material-symbols-outlined { font-size: 28px; }
.empty-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; color: var(--text); }
.empty-desc { margin: 2px 0 0; max-width: 46ch; font-size: var(--fs-base); line-height: 1.6; color: var(--muted); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.empty-state.is-compact { padding: 32px 16px; }
.empty-state.is-compact .empty-icon { width: 44px; height: 44px; }

/* ---- Pagination ---- */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--line);
}
.pagination.is-plain { padding: 0; border-top: 0; }
.pagination-pages { display: flex; align-items: center; gap: 4px; }
.page-btn {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--text-2); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
a.page-btn:hover { background: var(--hover); color: var(--text); }
.page-btn.is-active, .page-btn[aria-current="page"] { background: var(--pri-soft); color: var(--pri-ink); border-color: var(--pri-line); font-weight: 600; }
.page-btn.is-disabled, .page-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.page-gap { min-width: 20px; text-align: center; color: var(--hint); }
.pagination-info { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.pagination .page-nav.is-disabled, .pagination .page-nav[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
@media (max-width: 640px) {
  .pagination { padding: 12px 16px; }
  .pagination-pages { display: none; }
}
@media (min-width: 641px) { .pagination .pagination-info.is-mobile { display: none; } }

/* ---- Tabs & segmented control ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: 500 var(--fs-base)/1 var(--font-sans); color: var(--muted); white-space: nowrap;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-active, .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--pri); }
.tab .badge-count { margin-left: 2px; }
.segmented {
  display: inline-flex; align-items: center; gap: 2px;
  width: max-content; max-width: 100%; align-self: flex-start;
  padding: 3px; border-radius: 10px;
  background: var(--surface-3); border: 1px solid var(--line);
}
.segmented > button, .segmented > a, .segmented > .seg {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 0 12px;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: 500 var(--fs-sm)/1 var(--font-sans); color: var(--muted);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.segmented > :hover { color: var(--text); }
.segmented > .is-active, .segmented > [aria-pressed="true"], .segmented > [aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--e-2); }

/* ---- Dropdown menu ---- */
.menu { position: relative; display: inline-flex; }
.menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-dropdown);
  min-width: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--e-4);
  transform-origin: top right;
  animation: ui-pop var(--dur-2) var(--ease) both;
}
.menu-panel[hidden] { display: none; }
.menu-panel.is-left { right: auto; left: 0; transform-origin: top left; }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.menu-title { font-weight: 500; color: var(--text); line-height: 1.3; }
.menu-sub { font-size: var(--fs-xs); color: var(--muted); }
.menu-sep { height: 1px; margin: 4px -6px; background: var(--line); }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 38px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  font: 400 var(--fs-base)/1.2 var(--font-sans); color: var(--text-2); text-align: left; text-decoration: none;
}
.menu-item .material-symbols-outlined { font-size: 20px; color: var(--muted); }
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); color: var(--text); outline: none; }
.menu-item.is-danger, .menu-item.is-danger .material-symbols-outlined { color: var(--err-ink); }
.menu-item.is-danger:hover { background: var(--err-soft); }

/* ---- Modal (UI.modal.open / [data-modal-close]) ---- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: 16px;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: ui-fade var(--dur-2) var(--ease) both;
}
.modal[hidden], .modal.hidden { display: none; }
.modal-panel {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--e-4);
  animation: ui-pop var(--dur-3) var(--ease) both;
}
.modal-panel.is-sm { width: min(420px, 100%); }
.modal-panel.is-lg { width: min(760px, 100%); }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 8px; }
.modal-title { flex: 1; margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; color: var(--text); }
.modal-desc { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.modal-body { padding: 8px 20px 20px; color: var(--text-2); }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); }
html.ui-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .modal { place-items: end center; padding: 0; }
  .modal-panel { width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .modal-foot { border-radius: 0; }
  .modal-foot > .btn { flex: 1 1 auto; }
}

/* ---- Skeleton ---- */
.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-xs);
  animation: ui-shimmer 1.4s ease-in-out infinite;
}
.skeleton-text { height: .8em; margin: .45em 0; }
.skeleton-text.is-short { width: 60%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-block { height: 120px; border-radius: var(--r-md); }

/* ---- Divider, kbd, code ---- */
.divider { height: 1px; margin: 16px 0; border: 0; background: var(--line); }
.divider-label { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: var(--fs-sm); color: var(--hint); }
.divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.divider-v { width: 1px; align-self: stretch; background: var(--line); }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-xs);
  background: var(--surface); color: var(--text-2);
  font: 500 12px/1 var(--font-mono);
}
.code, .code-chip {
  display: inline-block; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text-2);
  font-family: var(--font-mono); font-size: .86em; line-height: 1.6;
  overflow-wrap: anywhere;
}
.code-block {
  display: block; margin: 0; padding: 14px 16px; overflow: auto;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: #111827; color: #e5e7eb;
  font: 13px/1.6 var(--font-mono);
}
:root:is([data-theme="midnight"], [data-theme="studio-dark"]) .code-block { background: #0a0d12; }
.mono-url { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* ---- Avatar ---- */
.avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--tone-soft, var(--pri-soft)); color: var(--tone-ink, var(--pri-ink));
  font-family: var(--font-display); font-size: 13px; font-weight: 600; line-height: 1;
  text-transform: uppercase; overflow: hidden; user-select: none;
}
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-lg { width: 40px; height: 40px; font-size: 15px; }
.avatar-xl { width: 56px; height: 56px; font-size: 20px; }
.sidebar .avatar { background: var(--pri-solid); color: #fff; }

/* ---- Chip (filter / choice) ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-2); cursor: pointer;
  font: 500 var(--fs-sm)/1 var(--font-sans); white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip:hover { background: var(--surface-2); border-color: var(--line-hover); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--pri-soft); border-color: var(--pri-line); color: var(--pri-ink); }
.chip .material-symbols-outlined { font-size: 16px; }
.chip-remove { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.chip-remove:hover { background: var(--active); }

/* ---- Key–value list ---- */
.kv { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); margin: 0; }
.kv > dt, .kv > dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.kv > dt { padding-right: 16px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.kv > dd { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.kv > dt:last-of-type, .kv > dd:last-of-type { border-bottom: 0; }
@media (max-width: 640px) {
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv > dt { padding: 12px 0 2px; border-bottom: 0; }
  .kv > dd { padding: 0 0 12px; }
}

/* ---- Divided list rows ---- */
.list { margin: 0; padding: 0; list-style: none; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.list-row:last-child { border-bottom: 0; }
.list-row.is-interactive { cursor: pointer; transition: background-color var(--dur-1) var(--ease); }
.list-row.is-interactive:hover { background: var(--hover); }
.list-main { flex: 1; min-width: 0; }
.list-title { margin: 0; font-weight: 500; color: var(--text); line-height: 1.45; }
.list-meta { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.list-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (max-width: 640px) { .list-row { padding: 12px 16px; flex-wrap: wrap; } }

/* ---- Meter (inline share bar) ---- */
.meter { position: relative; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter-fill { height: 100%; border-radius: inherit; background: var(--tone, var(--pri)); transition: width var(--dur-3) var(--ease); }

/* ---- Icon list (do / don't, feature bullets) ---- */
.icon-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.icon-list > li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; }
.icon-list > li > .material-symbols-outlined { margin-top: 2px; font-size: 20px; color: var(--tone, var(--muted)); }

/* ---- Steps (numbered sequence) ---- */
.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0 0 var(--gap-block); padding: 0; list-style: none; }
.steps:last-child { margin-bottom: 0; }
.step-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.step-num {
  width: 28px; height: 28px; margin-bottom: 10px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--pri-soft); color: var(--pri-ink);
  font: 600 13px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.step-title { margin: 0 0 4px; font-weight: 600; color: var(--text); }
.step-desc { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* ---- Dropzone (file picker) ---- */
.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 36px 24px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--muted);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.dropzone:hover { border-color: var(--line-hover); background: var(--hover); }
.dropzone.is-dragover, .dropzone:focus-within { border-color: var(--pri); background: var(--pri-soft); }
.dropzone.is-dragover .dropzone-icon { background: var(--surface); }
.dropzone-icon { width: 52px; height: 52px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--pri); box-shadow: var(--e-1); }
.dropzone-icon .material-symbols-outlined { font-size: 26px; }
.dropzone-title { margin: 0; font-weight: 600; font-size: var(--fs-md); color: var(--text); }
.dropzone-hint { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ---- Sticky action bar (bottom of long forms) ---- */
.action-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: var(--gap-block); padding: 12px 0;
  background: rgb(var(--bg-rgb) / .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.action-bar-info { margin: 0 auto 0 0; font-size: var(--fs-sm); color: var(--muted); }
.action-bar-info strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.action-bar-status { flex: 1 1 100%; min-width: 0; }   /* inline progress / status row above the buttons */
.stack > .action-bar { margin-top: 0; }                 /* the stack gap already separates it */
@media (max-width: 640px) {
  .action-bar-info { flex: 1 1 100%; }
  .action-bar > .btn, .action-bar > .btn-m { flex: 1 1 0; }
}

/* ---- Floating bulk-action bar (fixed, centred in the main column) ---- */
.float-bar {
  position: fixed; bottom: 20px; left: var(--sb-w); right: 0; z-index: 40;
  display: flex; justify-content: center; pointer-events: none;
  padding: 0 16px;
  transition: left var(--dur-3) var(--ease);
}
.float-bar[hidden] { display: none; }
.float-bar-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 8px 8px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-full);
  box-shadow: var(--e-4);
  animation: ui-pop var(--dur-3) var(--ease) both;
}
.float-bar-count { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 4px; }
@media (min-width: 1024px) { html.sb-collapsed .float-bar { left: var(--sb-cw); } }
@media (max-width: 1023px) { .float-bar { left: 0; } }
/* phones: full-width rounded bar, count on the left, actions on the right (no wrapping) */
@media (max-width: 639px) {
  .float-bar { bottom: 12px; padding: 0 12px; }
  .float-bar-inner { width: 100%; flex-wrap: nowrap; justify-content: space-between; border-radius: var(--r-lg); padding: 8px 8px 8px 16px; }
  .float-bar-inner > :first-child { margin-right: auto; white-space: nowrap; }
}
/* keep the end of the page reachable while a bulk bar is showing */
body:has(.float-bar:not([hidden])) .app-main .page { padding-bottom: 96px; }

/* ---- Standalone layouts: public page (no sidebar) · auth card · PDF viewer ---- */
.main-wrap.is-public { margin-left: 0 !important; }
.auth-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  background: radial-gradient(1100px 420px at 50% -8%, var(--pri-soft), transparent 70%), var(--bg);
}
.auth-card {
  width: min(420px, 100%);
  padding: 32px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--e-3);
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; text-align: center; }
.auth-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--pri-solid); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--e-2); }
.auth-mark .material-symbols-outlined { font-size: 28px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.auth-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--text); line-height: 1.3; }
.auth-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.auth-foot > .material-symbols-outlined { font-size: 18px; color: var(--hint); }
.auth-card.is-wide { width: min(540px, 100%); }
.auth-card > .alert { margin-bottom: 20px; }
.auth-form { display: grid; gap: 20px; }
.auth-form .btn-lg { margin-top: 4px; }
.auth-copy { margin: 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
@media (max-width: 640px) { .auth-card { padding: 24px 20px; } }
@media (prefers-reduced-motion: no-preference) { .auth-card { animation: ui-rise var(--dur-3) var(--ease) both; } }

/* Split auth layout: brand panel in the sidebar colours (≥1024px) beside .auth-shell */
.auth-split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.auth-split > .auth-shell { min-height: 100%; align-content: center; gap: 20px; }
.auth-aside { display: none; }
@media (min-width: 1024px) {
  .auth-split { grid-template-columns: minmax(400px, 5fr) 7fr; }
  .auth-aside {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    padding: 40px 48px;
    color: var(--sb-text);
    background: radial-gradient(520px 320px at 0% 0%, color-mix(in srgb, var(--pri-solid) 20%, transparent), transparent 72%), linear-gradient(180deg, var(--sb-bg), var(--sb-bg-2));
    border-right: 1px solid var(--sb-line);
  }
  .auth-split .auth-card .auth-brand { align-items: flex-start; text-align: left; }
  .auth-split .auth-only-single { display: none; }
}
.auth-aside-brand { display: flex; align-items: center; gap: 12px; }
.auth-aside-brand .auth-mark { width: 40px; height: 40px; border-radius: var(--r-md); }
.auth-aside-brand .auth-mark .material-symbols-outlined { font-size: 22px; }
.auth-aside-name { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-tight); color: var(--sb-text-strong); }
.auth-aside-org { margin: 2px 0 0; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--sb-label); }
.auth-aside-body { max-width: 440px; }
.auth-aside-eyebrow { margin: 0 0 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--sb-indicator); }
.auth-aside-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; line-height: var(--lh-snug); color: var(--sb-text-strong); }
.auth-aside-desc { margin: 12px 0 0; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--sb-text); }
.auth-aside-list { display: grid; gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.auth-aside-list > li { display: flex; align-items: flex-start; gap: 12px; }
.auth-aside-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--sb-active-bg); color: var(--sb-indicator); border: 1px solid var(--sb-line); }
.auth-aside-icon .material-symbols-outlined { font-size: 20px; }
.auth-aside-item-title { display: block; font-weight: 500; line-height: var(--lh-snug); color: var(--sb-text-strong); }
.auth-aside-item-desc { display: block; margin-top: 2px; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--sb-text); }
.auth-aside-foot { margin: 0; font-size: var(--fs-xs); color: var(--sb-label); }

/* PDF viewer — always a dark "lightbox" surface (independent of theme); the accent still follows data-accent */
.viewer {
  --viewer-bg: #2b2f36; --viewer-bar: #16191e; --viewer-stage: #525659;
  --viewer-ink: #e6e9ee; --viewer-strong: #ffffff; --viewer-muted: #a9b0bb;
  --viewer-soft: rgba(255, 255, 255, .08); --viewer-soft-hover: rgba(255, 255, 255, .14); --viewer-line: rgba(255, 255, 255, .12);
  --viewer-err-soft: rgba(240, 82, 82, .14); --viewer-err-ink: #f6a3a3;
  position: fixed; inset: 0; display: flex; flex-direction: column;
  background: var(--viewer-bg); color: var(--viewer-ink); font-family: var(--font-sans);
}
.viewer-bar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px; padding: 0 8px 0 12px;
  background: var(--viewer-bar); border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.viewer-title { flex: 1; min-width: 0; margin: 0 6px; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--viewer-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-doc-icon { color: var(--viewer-muted); font-size: 20px; margin-left: 4px; flex-shrink: 0; }
.viewer-sep { width: 1px; height: 24px; margin: 0 4px; flex-shrink: 0; background: var(--viewer-line); }
.viewer .btn { color: var(--viewer-ink); }
.viewer .btn:hover { background: var(--viewer-soft); color: var(--viewer-strong); }
/* dark-surface variants: translucent secondary, legible busy state, ring offset in the bar colour */
.viewer .btn.btn-secondary { background: var(--viewer-soft); border-color: var(--viewer-line); color: var(--viewer-ink); box-shadow: none; }
.viewer .btn.btn-secondary:hover { background: var(--viewer-soft-hover); color: var(--viewer-strong); }
.viewer .btn.btn-primary, .viewer .btn.btn-primary:hover { color: var(--on-solid); }
.viewer .btn[data-loading], .viewer .btn[data-loading][aria-disabled="true"] { opacity: 1; color: var(--viewer-ink); }
.viewer .busy-elapsed { color: var(--viewer-muted); }
.viewer .btn:focus-visible, .on-dark .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--viewer-bar, #16191e), 0 0 0 4px var(--pri-bright, var(--pri)); }
.viewer-stage { position: relative; flex: 1; min-height: 0; }
.viewer-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--viewer-stage); }
.viewer-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--viewer-bg); color: var(--viewer-muted); text-align: center; padding: 24px;
}
.viewer-overlay[hidden] { display: none; }
.viewer-overlay .spinner { color: var(--viewer-strong); }
.viewer-status { margin: 0; font-size: var(--fs-base); font-weight: 500; color: var(--viewer-ink); }
.viewer-elapsed { font-size: var(--fs-sm); color: var(--viewer-muted); font-variant-numeric: tabular-nums; }
.viewer-note { margin: 8px 0 0; max-width: 42ch; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--viewer-muted); }
/* State block on the dark stage (loading fallback / error / phone hand-off) — .empty-state uses theme tokens */
.viewer-state { max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.viewer-state-icon { width: 56px; height: 56px; margin-bottom: 8px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--viewer-soft); color: var(--viewer-ink); }
.viewer-state-icon .material-symbols-outlined { font-size: 28px; }
.viewer-state.is-error .viewer-state-icon { background: var(--viewer-err-soft); color: var(--viewer-err-ink); }
.viewer-state-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-snug); color: var(--viewer-strong); overflow-wrap: anywhere; }
.viewer-state-desc { margin: 0; max-width: 44ch; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--viewer-muted); overflow-wrap: anywhere; }
.viewer-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
/* phone hand-off panel (hidden until a script sets display:flex) */
.viewer-fallback {
  display: none; position: absolute; inset: 0; z-index: 1; overflow-y: auto;
  flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 32px 20px; text-align: center;
}
.viewer-fallback > .viewer-state { margin: auto 0; }
.viewer-fallback .viewer-state-title { font-size: var(--fs-md); }
.viewer-fallback .viewer-state-actions { width: 100%; max-width: 320px; flex-direction: column; align-items: stretch; }
@media (max-width: 639px) {
  .viewer-bar { padding: 0 4px; }
  .viewer-doc-icon, .viewer-sep { display: none; }
  .viewer-bar .busy-label { min-width: 0; max-width: 7.5em; } /* compact toolbar: truncated status + elapsed */
}

/* ==========================================================================
   3b. PATTERNS — shared pieces consolidated from the page migrations
   ========================================================================== */

/* ---- Meta items (icon + text, e.g. under a title or in a list row) ---- */
.meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.meta-item .material-symbols-outlined { font-size: 18px; color: var(--hint); }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.meta-row > .meta-item { font-size: inherit; gap: 4px; }
.meta-row > .meta-item .material-symbols-outlined { font-size: 14px; }

/* ---- Reading text ---- */
.prose { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--text-2); overflow-wrap: anywhere; }
.prose > * + * { margin-top: .75em; }
.icon-inline { font-size: 1.15em !important; vertical-align: -.2em; margin: 0 2px; color: var(--text-2); }
.wrap-anywhere { overflow-wrap: anywhere; }
.divider.is-tight { margin: 4px 0; }
.kv.is-flush > dt:first-of-type, .kv.is-flush > dd:first-of-type { padding-top: 0; }
.kv.is-flush > dt:last-of-type, .kv.is-flush > dd:last-of-type { padding-bottom: 0; }
/* readable lists inside alerts (Tailwind preflight strips list styles) */
.alert-list, .alert-body :where(ul, ol) { display: grid; gap: 4px; margin: 4px 0 0; padding-left: 1.2em; }
.alert-list, .alert-body :where(ul) { list-style: disc; }
.alert-body :where(ol) { list-style: decimal; }
.alert-list > li::marker, .alert-body :where(li)::marker { color: var(--tone); }

/* ---- Empty state: tones (also as an error / locked state) ---- */
.empty-state[class*="tone-"] .empty-icon { background: var(--tone-soft); color: var(--tone-ink); }
.empty-icon.is-danger { background: var(--err-soft); color: var(--err-ink); }
.empty-note { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.empty-state > .alert { width: min(100%, 440px); margin-top: 16px; text-align: left; }

/* ---- Forms: fieldset, check grid, date parts, code inputs, range, switch row ---- */
.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset > legend, .legend { display: block; padding: 0; margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--text-2); }
.fieldset > legend.is-title, .legend.is-title { margin-bottom: 2px; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.fieldset > legend.is-title + .field-hint { display: block; margin: 0 0 12px; }
.fieldset > .field-hint { display: block; margin-top: 8px; }
/* a separator *below* each group (a fieldset's top border would collide with its legend) */
.fieldset.is-separated:not(:last-child) { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.check-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .check-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check.is-disabled { opacity: .55; cursor: not-allowed; }
.check .when-disabled { display: none; }
.check.is-disabled .when-enabled, .check:has(input:disabled) .when-enabled { display: none; }
.check.is-disabled .when-disabled, .check:has(input:disabled) .when-disabled { display: block; }
.check-title .material-symbols-outlined { font-size: 18px; vertical-align: -4px; margin-right: 4px; color: var(--muted); }
.field-hint .material-symbols-outlined { font-size: 16px; vertical-align: -3px; margin-right: 2px; }
.label-note { font-weight: 400; color: var(--hint); }
.field-sublabel { font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
/* day · month · BE year picker (proportional columns) */
.date-parts { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
.date-parts > .field { gap: 4px; }
@media (max-width: 640px) { .date-parts { gap: 8px; } }
.input-code:not(:placeholder-shown) { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.range-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.range { display: block; width: 100%; height: 28px; margin: 0; cursor: pointer; accent-color: var(--pri-solid); }
.switch-row { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; min-height: 32px; cursor: pointer; user-select: none; font-size: var(--fs-sm); color: var(--text-2); }

/* ---- Option cards (radio/checkbox pickers: themes, swatches …) ---- */
.option-card {
  position: relative; display: flex; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.option-card:hover { border-color: var(--line-hover); }
.option-card > input[type="radio"], .option-card > input[type="checkbox"] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.option-card:has(> input:checked), .option-card.is-checked { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-ring); }
.option-card:has(> input:focus-visible) { outline: 2px solid var(--pri); outline-offset: 2px; }
.option-card:has(> input:disabled) { opacity: .55; cursor: not-allowed; }
.option-card.is-stacked { flex-direction: column; gap: 8px; padding: 8px; }
.option-card.is-inline { align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; }
.option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.option-card.is-stacked .option-text { padding: 0 4px 2px; }
.option-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.option-card.is-inline .option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.option-hint { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.option-check {
  position: absolute; top: 12px; right: 12px;
  font-size: 22px !important; color: var(--pri-solid); background: var(--surface); border-radius: 50%;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  opacity: 0; transform: scale(.6);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.option-card > input:checked ~ .option-check { opacity: 1; transform: none; }
.option-swatch { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--swatch, var(--pri-solid)); color: var(--on-solid); }
.option-swatch .material-symbols-outlined {
  font-size: 16px; opacity: 0; transform: scale(.5);
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 20;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.option-card > input:checked ~ .option-swatch .material-symbols-outlined { opacity: 1; transform: none; }

/* ---- Buttons: destructive ghost (neutral until hover/focus) ---- */
.btn.btn-ghost.is-danger:hover, .btn.btn-ghost-danger:hover, .btn-m.ghost.is-danger:hover { background: var(--err-soft); color: var(--err-ink); }
.btn.btn-ghost-danger { background: transparent; color: var(--muted); }
.btn.btn-ghost.is-danger:focus-visible, .btn.btn-ghost-danger:focus-visible { outline-color: var(--err); }

/* ---- Cards: danger zone · featured ---- */
.card.is-danger { border-color: var(--err-line); }
.card.is-danger > .card-head { border-bottom-color: var(--err-line); }
.card.is-danger > .card-foot { border-top-color: var(--err-line); }
@media (max-width: 640px) { .card.is-danger > .card-foot > .btn { flex: 1 1 100%; } }
.card.is-featured { border-color: var(--tone-line, var(--pri-line)); }

/* ---- Panel: bordered surface-2 box (status box, option block) ---- */
.panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.panel-main { flex: 1 1 280px; min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.panel-title { margin: 0; font-weight: 600; line-height: 1.4; color: var(--text); }
.panel-desc { margin: 2px 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.panel.is-stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 16px; }
.panel.is-stack > .panel-desc { margin: 0; }
.panel.is-stack > :last-child:not(:first-child) { margin-top: auto; }
.panel.is-flush { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 20px; }
@media (max-width: 640px) { .panel.is-flush { padding: 16px; } }

/* ---- Code snippet with copy button · copyable URL field ---- */
.code-snippet { position: relative; }
.code-snippet > .code-block { padding-right: 56px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
.code-snippet > .btn { position: absolute; top: 8px; right: 8px; }
.copy-field { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; margin-top: 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.copy-field:has(> .btn) { padding: 4px 4px 4px 10px; }
.copy-field-text { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }

/* ---- Inline status (per-row AJAX results) ---- */
.inline-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.inline-status:empty { display: none; }
.inline-status .material-symbols-outlined { font-size: 16px; }
.inline-status.is-busy { color: var(--pri); }
.inline-status.is-ok { color: var(--ok-ink); }
.inline-status.is-err { color: var(--err-ink); }
.inline-status-time, .status-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-2); }

/* ---- Lists: tight / compact / scroll / boxed / stacked rows ---- */
.list-row.is-tight { padding-top: 12px; padding-bottom: 12px; }
.list-row.is-start { align-items: flex-start; }
.list-row.is-nowrap { flex-wrap: nowrap; }
.list-heading { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-snug); color: var(--text); overflow-wrap: anywhere; }
.list-heading.is-lg { font-size: var(--fs-lg); }
.list-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.list-count { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.list-main > .meter { margin-top: 8px; }
.list.is-scroll { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.list.is-scroll.is-sm { max-height: 14rem; }
.list.is-boxed { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); text-align: left; }
.list.is-boxed > .list-row { padding: 10px 14px; }
.list.is-compact > .list-row { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; font-size: var(--fs-sm); color: var(--text-2); }
.list.is-compact > .list-row > .truncate-1 { flex: 1; min-width: 0; }
.list.is-compact > .list-row > .material-symbols-outlined { font-size: 18px; color: var(--tone, var(--muted)); }
/* icon | main | actions — actions move under the text below 1024px */
.list-row.is-stacked { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start; padding: 20px; }
.list-row.is-stacked > .list-actions { grid-column: 2; flex-wrap: wrap; }
@media (min-width: 1024px) {
  .list-row.is-stacked { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .list-row.is-stacked > .list-actions { grid-column: auto; justify-content: flex-end; }
}
@media (max-width: 640px) {
  .list-row.is-stacked { padding: 16px; }
  .list-row.is-stacked > .list-actions { grid-column: 1 / -1; }
  .list-row.is-stacked > .list-actions > .btn { flex: 1 1 auto; }
}

/* ---- Leaderboards / shares ---- */
.rank-num { width: 28px; height: 28px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-num.is-top { background: var(--pri-soft); color: var(--pri-ink); }
.meter-row, .share-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.meter-row > .meter, .share-cell > .meter { flex: 1 1 auto; }
.meter-row > .num, .meter-row > .meter-value, .share-cell > .num { min-width: 3.6em; text-align: right; font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---- Table helpers: grow column, selection, row number, sub line, row actions, stacked rows ---- */
.tbl th.col-grow, .tbl td.col-grow { width: 100%; }
.tbl th.tbl-check, .tbl td.tbl-check { width: 44px; padding-right: 0; text-align: center; }
.tbl-check input, .m-check input, .m-selectbar input { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.tbl.is-top td { vertical-align: top; }
.tbl th.row-num, .tbl td.row-num { width: 64px; color: var(--hint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-sub { margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.row-actions, .tbl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.row-actions-slot { display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--hint); }
.row-actions-slot .material-symbols-outlined { font-size: 18px; }
/* .tbl-stack: below 768px rows reflow into cards; label cells with td[data-label] (for tables with inline inputs) */
@media (max-width: 767px) {
  .tbl-wrap > .tbl.tbl-stack { min-width: 0; }
  .tbl.tbl-stack, .tbl.tbl-stack tbody { display: block; }
  .tbl.tbl-stack thead { display: none; }
  .tbl.tbl-stack tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; height: auto; padding: 16px; border-bottom: 1px solid var(--line-soft); }
  .tbl.tbl-stack tbody tr:last-child { border-bottom: 0; }
  .tbl.tbl-stack tbody tr:hover td { background: transparent; }
  .tbl.tbl-stack td, .tbl.tbl-stack td:first-child, .tbl.tbl-stack td:last-child { display: block; grid-column: 1 / -1; padding: 0; border: 0; text-align: left; }
  .tbl.tbl-stack td.stack-main { grid-column: 1; grid-row: 1; }
  .tbl.tbl-stack td.stack-aside { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; text-align: right; }
  .tbl.tbl-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
  .tbl.tbl-stack td.stack-aside[data-label]::before { display: inline; margin: 0; }
}
/* .tbl-sticky needs an un-clipped ancestor: let the standard wrappers overflow on desktop */
@media (min-width: 1024px) {
  .tbl-wrap:has(> .tbl.tbl-sticky:not(.is-wide)) { overflow: visible; }
  .card.is-flush:has(.tbl.tbl-sticky) { overflow: visible; }
}

/* ---- Phone list: selection, index chip, leading checkbox ---- */
.m-selectbar { display: none; }
@media (max-width: 1023px) {
  .m-selectbar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
}
@media (max-width: 640px) { .m-selectbar { padding: 0 16px; } }
.m-selectbar + .m-list { border-top: 0; }
.m-item.has-check { display: flex; align-items: flex-start; gap: 8px; }
.m-check { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px 0 -10px -12px; cursor: pointer; }
.m-body { flex: 1; min-width: 0; }
.m-item.is-selected, .m-item.is-selected:hover { background: var(--pri-soft); }
.m-head { display: flex; align-items: flex-start; gap: 12px; }
.m-head > .m-main { flex: 1; min-width: 0; }
.m-head .m-title { margin-bottom: 0; }
.m-head + .m-grid { margin-top: 12px; }
.m-idx { flex-shrink: 0; min-width: 28px; height: 28px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-3); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.m-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.m-actions.is-end { justify-content: flex-end; }
.m-grid > .span-all { grid-column: 1 / -1; }

/* ---- Identity cell (avatar + name row with badges + meta) ---- */
.ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ident-text { min-width: 0; }
.ident-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ident-name { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.ident-meta { margin-top: 1px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.is-locked .ident > .avatar, .ident.is-muted > .avatar { opacity: .55; }

/* ---- Toolbar: two selects share a row on phones ---- */
@media (max-width: 640px) { .toolbar > .is-half, .toolbar > .select.is-half { flex: 1 1 0; min-width: 0; } }

/* ---- Stat grid: three compact counters in one row on phones ---- */
@media (max-width: 639px) {
  .stat-grid.is-compact-sm, .stat-grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  :is(.stat-grid.is-compact-sm, .stat-grid.is-compact) .stat-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value"; padding: 12px; }
  :is(.stat-grid.is-compact-sm, .stat-grid.is-compact) :is(.stat-icon, .stat-meta) { display: none; }
  :is(.stat-grid.is-compact-sm, .stat-grid.is-compact) .stat-value { font-size: var(--fs-xl); }
  :is(.stat-grid.is-compact-sm, .stat-grid.is-compact) :is(.tone-success, .tone-danger, .tone-warning) .stat-value { color: var(--tone-ink); }
}

/* ---- Region reloading (select[data-nav] + data-busy-region) ---- */
.is-reloading { opacity: .55; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
select[aria-busy="true"], select[data-nav][disabled] { cursor: progress; }

/* ---- Dropzone variants ---- */
.dropzone-text { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.dropzone .show-compact { display: none; }
.dropzone.is-compact { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 16px 20px; text-align: left; }
.dropzone.is-compact .dropzone-icon { width: 44px; height: 44px; margin: 0; }
.dropzone.is-compact .dropzone-text { align-items: flex-start; }
.dropzone.is-compact .hide-compact { display: none; }
.dropzone.is-compact .show-compact { display: inline; }
.dropzone.is-disabled, .dropzone[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---- Modal: anchored near the top (≥641px) so it doesn't jump when content shrinks ---- */
@media (min-width: 641px) {
  .modal.is-top { place-items: start center; padding-top: 8vh; }
  .modal.is-top > .modal-panel { max-height: 84vh; }
}
.modal-head-text { flex: 1; min-width: 0; }
.modal-head > .icon-chip { margin-top: 2px; }

/* ---- Chart container (Chart.js) with skeleton / error overlay — see UI.chart ---- */
.chart-box { position: relative; height: 260px; }
.chart-box.is-donut { height: 300px; max-width: 340px; margin-inline: auto; }
.chart-box > canvas { position: relative; z-index: 1; }
.chart-placeholder { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; gap: 8px; padding: 16px; text-align: center; font-size: var(--fs-sm); color: var(--muted); background: var(--surface); }
.chart-skeleton { width: 100%; height: 100%; border-radius: var(--r-sm); }
.chart-box.is-donut .chart-skeleton { width: 68%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.chart-box.is-ready > .chart-placeholder { display: none; }
.chart-box.is-error > .chart-placeholder .material-symbols-outlined { font-size: 28px; color: var(--hint); }
.chart-error-title { margin: 4px 0 0; font-weight: 500; color: var(--text); }
.chart-error-desc { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 640px) { .chart-box { height: 230px; } .chart-box.is-donut { height: 290px; } }

/* ---- Example / callout block (do vs caution samples) ---- */
.example-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.example-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.example-title { flex: 1; min-width: 0; margin: 0; font-weight: 600; line-height: var(--lh-snug); color: var(--text); }
.example-card > .code { display: block; width: fit-content; max-width: 100%; padding: 4px 10px; background: var(--surface); color: var(--text); font-size: var(--fs-sm); }
.example-desc { margin: 8px 0 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--muted); }

/* ---- Public topbar brand (pages without sidebar) ---- */
.topbar-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; color: var(--text); text-decoration: none; }
.topbar-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.topbar-brand-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.topbar-brand-org { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .topbar-brand-text { display: none; } }

/* ---- Reader font scale (A- / A / A+) — set data-font-scale="sm|lg" on <body> or <html> ---- */
[data-font-scale="sm"] { --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --tbl-td-fs: 13px; --tbl-th-fs: 12px; }
[data-font-scale="lg"] { --fs-xs: 13.5px; --fs-sm: 15px; --fs-base: 17px; --fs-md: 18px; --fs-lg: 20px; --tbl-td-fs: 16.5px; --tbl-th-fs: 14.5px; }
.segmented.is-scale > * { min-width: 34px; font-weight: 600; }
.segmented.is-scale > [data-scale="sm"] { font-size: 12px; }
.segmented.is-scale > [data-scale="md"] { font-size: 14px; }
.segmented.is-scale > [data-scale="lg"] { font-size: 16.5px; }

/* ---- Static progress dialog markup (same parts as UI.progress.open) ---- */
.ui-p-note { margin: 12px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }

/* ==========================================================================
   4. FEEDBACK KIT — progress, route bar, toasts, progress dialog
   ========================================================================== */
.progress { position: relative; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress-fill {
  height: 100%; width: 0; border-radius: inherit;
  background: var(--pri-solid);
  transition: width var(--dur-3) var(--ease);
}
.progress.is-indeterminate .progress-fill { width: 38%; animation: ui-indeterminate 1.3s var(--ease-in-out) infinite; }
.progress.is-success .progress-fill { background: var(--ok); }
.progress.is-error .progress-fill { background: var(--err); }

/* Route progress (top bar + delayed status chip) */
.ui-routebar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-route); height: 2px; pointer-events: none; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.ui-routebar.is-active { opacity: 1; }
.ui-routebar-fill { height: 100%; background: var(--pri-solid); transform-origin: 0 50%; transform: scaleX(0); transition: transform 240ms var(--ease); box-shadow: 0 0 8px var(--pri-ring-strong); }
.ui-routechip {
  position: fixed; left: 50%; bottom: 20px; z-index: var(--z-route);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-2); box-shadow: var(--e-4);
  font-size: var(--fs-sm); line-height: 1.2;
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ui-routechip.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ui-routechip .spinner { color: var(--pri); }
.ui-routechip-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.ui-routechip-time:empty { display: none; }

/* Toasts */
.ui-toasts {
  position: fixed; top: calc(var(--topbar-h) + 10px); right: 16px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.ui-toast {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 12px 12px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--e-4);
  pointer-events: auto;
  animation: ui-toast-in var(--dur-3) var(--ease) both;
}
.ui-toast.is-leaving { animation: ui-toast-out var(--dur-2) var(--ease) both; }
.ui-toast-icon {
  width: 28px !important; height: 28px !important; flex-shrink: 0;
  display: grid !important; place-items: center;
  border-radius: 50%; background: var(--tone-soft, var(--info-soft)); color: var(--tone, var(--info));
  font-size: 18px !important; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}
.ui-toast-body { flex: 1; min-width: 0; padding-top: 3px; }
.ui-toast-title { font-weight: 600; font-size: var(--fs-base); line-height: 1.35; color: var(--text); }
.ui-toast-msg { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.ui-toast-msg:empty { display: none; }
.ui-toast-close {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--hint); cursor: pointer;
}
.ui-toast-close:hover { background: var(--hover); color: var(--text); }
.ui-toast-close .material-symbols-outlined { font-size: 18px; }
.ui-toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tone, var(--info)); opacity: .35; transform-origin: 0 50%; }
@media (max-width: 640px) { .ui-toasts { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } }

/* Progress dialog (UI.progress.open) */
.ui-pmodal {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 5);
  display: grid; place-items: center; padding: 16px;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: ui-fade var(--dur-2) var(--ease) both;
}
.ui-pmodal-panel {
  width: min(460px, 100%);
  padding: 22px 22px 18px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--e-4);
  animation: ui-pop var(--dur-3) var(--ease) both;
  outline: none;
}
.ui-pinline .ui-pmodal-panel { width: 100%; padding: 16px; box-shadow: none; animation: none; border-radius: var(--r-md); }
.ui-p-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ui-p-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--pri-soft); color: var(--pri);
}
.ui-p-icon .material-symbols-outlined { font-size: 20px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.ui-pmodal.is-done .ui-p-icon, .ui-pinline.is-done .ui-p-icon { background: var(--ok-soft); color: var(--ok); }
.ui-pmodal.is-error .ui-p-icon, .ui-pinline.is-error .ui-p-icon { background: var(--err-soft); color: var(--err); }
.ui-p-titles { flex: 1; min-width: 0; }
.ui-p-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; line-height: 1.4; color: var(--text); }
.ui-p-status { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; min-height: 1.5em; }
.ui-p-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ui-p-pct { font-weight: 600; color: var(--text-2); }
.ui-p-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ui-p-actions[hidden] { display: none; }

/* ==========================================================================
   5. LEGACY CLASSES — restyled to the system so unmigrated markup matches
   ========================================================================== */

/* .stat-pill (old gradient tiles) → calm stat card. The inline gradient is
   ignored; its colour picks the tone so meaning is kept. */
.stat-pill {
  --tone: var(--pri); --tone-ink: var(--pri-ink); --tone-soft: var(--pri-soft);
  position: relative; overflow: hidden;
  padding: 18px 20px;
  background: var(--surface) !important;
  color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--e-1);
}
.stat-pill::before, .stat-pill::after { content: none; display: none; }
.stat-pill[style*="#059669"], .stat-pill[style*="#10b981"], .stat-pill[style*="#16a34a"], .stat-pill[style*="#22c55e"] { --tone: var(--ok); --tone-ink: var(--ok-ink); --tone-soft: var(--ok-soft); }
.stat-pill[style*="#e11d48"], .stat-pill[style*="#f43f5e"], .stat-pill[style*="#ef4444"], .stat-pill[style*="#dc2626"] { --tone: var(--err); --tone-ink: var(--err-ink); --tone-soft: var(--err-soft); }
.stat-pill[style*="#7c3aed"], .stat-pill[style*="#a78bfa"], .stat-pill[style*="#8b5cf6"], .stat-pill[style*="#9333ea"] { --tone: var(--vio); --tone-ink: var(--vio-ink); --tone-soft: var(--vio-soft); }
.stat-pill[style*="#f59e0b"], .stat-pill[style*="#d97706"], .stat-pill[style*="#f97316"] { --tone: var(--warn); --tone-ink: var(--warn-ink); --tone-soft: var(--warn-soft); }
.stat-pill[style*="#06b6d4"], .stat-pill[style*="#0891b2"] { --tone: var(--cyan); --tone-ink: var(--cyan-ink); --tone-soft: var(--cyan-soft); }
.stat-pill > .relative {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label icon" "value icon";
  column-gap: 12px; row-gap: 2px; align-items: start;
}
.stat-pill > .relative > .material-symbols-outlined {
  grid-area: icon; margin: 0;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; background: var(--tone-soft); color: var(--tone-ink);
  font-size: 21px;
}
.stat-pill > .relative > div:nth-of-type(1) {
  grid-area: value;
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text);
}
.stat-pill > .relative > div:nth-of-type(2) { grid-area: label; font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--muted); }
@media (max-width: 640px) {
  .stat-pill { padding: 14px 16px; }
  .stat-pill > .relative > div:nth-of-type(1) { font-size: var(--fs-xl); }
  .stat-pill > .relative > .material-symbols-outlined { width: 34px; height: 34px; font-size: 18px; border-radius: var(--r-sm); }
}

.st-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; cursor: default; }
.st-icon .material-symbols-outlined { font-size: 17px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.hover-lift { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.hover-lift:hover { transform: translateY(-1px); box-shadow: var(--e-3); }
.f-auto { width: 100%; }
@media (min-width: 768px) { .f-auto { width: auto !important; min-width: 150px; } }

/* ==========================================================================
   6. SWEETALERT2 THEME (SweetAlert2 v11 CSS variables + .btn buttons)
   ========================================================================== */
:root {
  --swal2-width: 28rem;
  --swal2-padding: 0 0 1.25rem;
  --swal2-border: 1px solid var(--line);
  --swal2-border-radius: var(--r-xl);
  --swal2-background: var(--surface);
  --swal2-color: var(--text-2);
  --swal2-backdrop: var(--overlay);
  --swal2-outline: 0 0 0 3px var(--pri-ring);
  --swal2-icon-zoom: .78;
  --swal2-title-padding: .5rem 1.5rem 0;
  --swal2-html-container-padding: .5rem 1.75rem .25rem;
  --swal2-input-border: 1px solid var(--line-strong);
  --swal2-input-border-radius: var(--r-sm);
  --swal2-input-box-shadow: var(--e-1);
  --swal2-input-background: var(--surface);
  --swal2-input-hover-box-shadow: var(--e-1);
  --swal2-input-focus-border: 1px solid var(--pri);
  --swal2-input-focus-box-shadow: 0 0 0 3px var(--pri-ring);
  --swal2-validation-message-background: var(--err-soft);
  --swal2-validation-message-color: var(--err-ink);
  --swal2-footer-border-color: var(--line);
  --swal2-footer-color: var(--muted);
  --swal2-timer-progress-bar-background: var(--pri-ring-strong);
  --swal2-close-button-color: var(--hint);
  --swal2-confirm-button-background-color: var(--pri-solid);
  --swal2-confirm-button-border-radius: var(--r-sm);
  --swal2-cancel-button-background-color: var(--neu);
  --swal2-cancel-button-border-radius: var(--r-sm);
  --swal2-deny-button-background-color: var(--err-solid);
  --swal2-deny-button-border-radius: var(--r-sm);
  --swal2-actions-margin: 1.25rem auto 0;
}
.swal2-container { font-family: var(--font-sans); }
.swal2-container.swal2-backdrop-show { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.swal2-popup { font-family: var(--font-sans); box-shadow: var(--e-4); }
.swal2-popup .swal2-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; color: var(--text); }
.swal2-popup .swal2-html-container { font-size: var(--fs-base); line-height: 1.6; color: var(--muted); }
.swal2-popup .swal2-actions { gap: 8px; }
.swal2-popup .swal2-actions .btn { margin: 0; min-width: 96px; }
/* SweetAlert2 shows its buttons with an inline display:inline-block — keep .btn's flex layout (icon gap) */
.swal2-popup .swal2-actions .btn[style*="inline-block"] { display: inline-flex !important; }
.swal2-icon .material-symbols-outlined { font-size: 40px; }
.swal2-popup .swal2-input.input-code { text-align: center; font-size: var(--fs-xl); letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.swal2-popup .swal2-input.input-code::placeholder { letter-spacing: normal; font-size: var(--fs-md); }
/* Content helpers for dialogs (html: '...') */
.swal-form { text-align: left; }
.swal-msg { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--muted); }
.swal-lead { margin: 0 0 6px; font-weight: 600; color: var(--err-ink); text-align: left; }
.swal-list { display: grid; gap: 2px; margin: 8px 0 16px; padding-left: 1.2em; list-style: disc; text-align: left; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.swal-list:last-child { margin-bottom: 0; }
.swal-code-url { display: block; padding: 8px 10px; text-align: left; font-size: 12.5px; }
.swal2-popup .swal2-styled { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-base); padding: 0 18px; min-height: 40px; }
.swal2-popup .swal2-styled:focus-visible { box-shadow: 0 0 0 3px var(--pri-ring); }
.swal2-popup .swal2-input, .swal2-popup .swal2-textarea, .swal2-popup .swal2-select {
  font-family: var(--font-sans); font-size: var(--fs-md); color: var(--text);
  height: 44px; margin: 1rem 1.75rem .25rem; width: auto;
}
.swal2-popup .swal2-validation-message { margin: .75rem 1.75rem 0; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.swal2-popup .swal2-loader { border-color: var(--pri) transparent var(--pri) transparent; }
.swal2-popup .swal2-timer-progress-bar-container { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.swal2-icon.swal2-success { border-color: var(--ok-line) !important; color: var(--ok) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--ok) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--ok-line) !important; }
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-icon.swal2-success .swal2-success-fix { background-color: var(--surface) !important; }
.swal2-icon.swal2-error { border-color: var(--err-line) !important; color: var(--err) !important; }
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--err) !important; }
.swal2-icon.swal2-warning { border-color: var(--warn-line) !important; color: var(--warn) !important; }
.swal2-icon.swal2-info { border-color: var(--info-line) !important; color: var(--info) !important; }
.swal2-icon.swal2-question { border-color: var(--line-strong) !important; color: var(--muted) !important; }
.ui-swal-elapsed { margin: .75rem auto 0; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.swal2-popup.swal2-toast { border-radius: var(--r-md); box-shadow: var(--e-4); }

/* ==========================================================================
   7. TAILWIND BRIDGE — keep utility colours on-token (calm + midnight-safe)
   ========================================================================== */
/* accent family → var(--pri) (kept from the original header) */
.text-blue-700, .text-blue-600, .text-blue-500, .text-purple-700, .text-purple-600, .text-purple-500, .text-indigo-700, .text-indigo-600, .text-indigo-500 { color: var(--pri) !important; }
.bg-blue-100, .bg-purple-100, .bg-indigo-100 { background-color: var(--pri-soft) !important; }
.hover\:text-blue-600:hover, .hover\:text-blue-700:hover, .hover\:text-blue-800:hover, .hover\:text-purple-700:hover, .group:hover .group-hover\:text-blue-700 { color: var(--pri-hover) !important; }
:root .bg-blue-600, :root .bg-indigo-500, :root .bg-indigo-600, :root .bg-purple-600, :root .bg-purple-700 { background-color: var(--pri-solid); }
:root .hover\:bg-blue-700:hover, :root .hover\:bg-indigo-700:hover, :root .hover\:bg-purple-700:hover { background-color: var(--pri-hover); }
:root .bg-purple-50, :root .bg-indigo-50 { background-color: var(--pri-soft); }
:root .text-purple-900, :root .text-indigo-900 { color: var(--pri-ink); }
:root .border-blue-500, :root .border-indigo-500, :root .border-purple-400, :root .border-purple-500 { border-color: var(--pri); }
:root .ring-purple-200 { --tw-ring-color: var(--pri-line); }
:root .focus\:ring-blue-500:focus, :root .focus\:ring-indigo-500:focus, :root .focus\:ring-green-500:focus, :root .focus\:ring-yellow-500:focus { --tw-ring-color: var(--pri-ring-strong); }
:root .focus\:ring-red-500:focus { --tw-ring-color: var(--err-ring); }
:root .focus\:border-blue-500:focus, :root .focus\:border-purple-500:focus { border-color: var(--pri); }
:root .hover\:bg-blue-50:hover { background-color: var(--pri-soft); }
/* gradient buttons/panels → one calm fill */
:root [class*="bg-gradient-to-"]:is(.from-indigo-500, .from-indigo-600, .from-blue-500, .from-blue-600, .from-purple-500, .from-purple-600) { background-image: none; background-color: var(--pri-solid); }
:root [class*="bg-gradient-to-"]:is(.from-indigo-500, .from-indigo-600, .from-blue-500, .from-blue-600, .from-purple-500, .from-purple-600):hover { background-color: var(--pri-hover); }
:root [class*="bg-gradient-to-"]:is(.from-red-500, .from-red-600) { background-image: none; background-color: var(--err-solid); }
:root [class*="bg-gradient-to-"]:is(.from-red-500, .from-red-600):hover { background-color: var(--err-hover); }
:root [class*="bg-gradient-to-"]:is(.from-green-500, .from-green-600, .from-emerald-500, .from-emerald-600) { background-image: none; background-color: var(--ok-solid); }
:root [class*="bg-gradient-to-"]:is(.from-blue-50, .from-indigo-50, .from-sky-50) { background-image: none; background-color: var(--info-soft); }
:root [class*="bg-gradient-to-"]:is(.from-yellow-50, .from-amber-50, .from-orange-50) { background-image: none; background-color: var(--warn-soft); }
:root [class*="bg-gradient-to-"]:is(.from-green-50, .from-emerald-50) { background-image: none; background-color: var(--ok-soft); }
:root [class*="bg-gradient-to-"]:is(.from-red-50, .from-rose-50) { background-image: none; background-color: var(--err-soft); }
:root [class*="bg-gradient-to-"]:is(.from-purple-50, .from-violet-50) { background-image: none; background-color: var(--vio-soft); }
:root [class*="bg-gradient-to-"]:is(.from-gray-50, .from-slate-50) { background-image: none; background-color: var(--surface-2); }
/* status colours → semantic tokens */
:root .bg-blue-50 { background-color: var(--info-soft); }
:root .border-blue-100, :root .border-blue-200 { border-color: var(--info-line); }
:root .text-blue-800, :root .text-blue-900 { color: var(--info-ink); }
:root .bg-red-50, :root .bg-red-100, :root .bg-red-50\/50 { background-color: var(--err-soft); }
:root .border-red-100, :root .border-red-200, :root .border-red-300 { border-color: var(--err-line); }
:root .border-red-400, :root .border-red-500 { border-color: var(--err); }
:root .text-red-400, :root .text-red-500 { color: var(--err); }
:root .text-red-600, :root .text-red-700, :root .text-red-800 { color: var(--err-ink); }
:root .bg-red-600 { background-color: var(--err-solid); }
:root .hover\:bg-red-700:hover { background-color: var(--err-hover); }
:root .hover\:bg-red-50:hover { background-color: var(--err-soft); }
:root .hover\:text-red-700:hover { color: var(--err-hover); }
:root .bg-yellow-50, :root .bg-yellow-100, :root .bg-amber-50 { background-color: var(--warn-soft); }
:root .border-yellow-200, :root .border-amber-200 { border-color: var(--warn-line); }
:root .border-yellow-500 { border-color: var(--warn); }
:root .text-yellow-500 { color: var(--warn); }
:root .text-yellow-600, :root .text-yellow-700, :root .text-yellow-800, :root .text-orange-600, :root .text-orange-700 { color: var(--warn-ink); }
:root .bg-green-50, :root .bg-green-100, :root .bg-emerald-50 { background-color: var(--ok-soft); }
:root .border-green-200 { border-color: var(--ok-line); }
:root .border-green-500, :root .border-emerald-500 { border-color: var(--ok); }
:root .text-green-400, :root .text-green-500 { color: var(--ok); }
:root .text-green-600, :root .text-green-700, :root .text-green-800, :root .text-emerald-900 { color: var(--ok-ink); }
:root .bg-green-600, :root .bg-emerald-600 { background-color: var(--ok-solid); }
:root .hover\:bg-green-700:hover { background-color: var(--ok-hover); }
:root .hover\:bg-green-100:hover, :root .hover\:bg-emerald-50:hover { background-color: var(--ok-soft); }
/* neutrals → surface/text tokens (tinted themes + midnight follow) */
:root .bg-white { background-color: var(--surface); }
:root .bg-gray-50, :root .bg-slate-50 { background-color: var(--surface-2); }
:root .bg-gray-100, :root .bg-slate-100 { background-color: var(--surface-3); }
:root .text-gray-900, :root .text-gray-800, :root .text-slate-900, :root .text-slate-800 { color: var(--text); }
:root .text-gray-700, :root .text-slate-700 { color: var(--text-2); }
:root .text-gray-600, :root .text-gray-500, :root .text-slate-600, :root .text-slate-500 { color: var(--muted); }
:root .text-gray-400, :root .text-gray-300, :root .text-slate-400 { color: var(--hint); }
:root .border-gray-100 { border-color: var(--line-soft); }
:root .border-gray-200 { border-color: var(--line); }
:root .border-gray-300 { border-color: var(--line-strong); }
:root .divide-gray-100 > :not([hidden]) ~ :not([hidden]), :root .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line-soft); }
:root .hover\:bg-gray-50:hover, :root .hover\:bg-gray-100:hover { background-color: var(--hover); }
:root .hover\:bg-gray-200:hover { background-color: var(--active); }
:root .hover\:bg-white:hover { background-color: var(--surface); }
:root .group:hover .group-hover\:text-gray-900 { color: var(--text); }

/* ==========================================================================
   8. UTILITIES
   ========================================================================== */
.text-muted { color: var(--muted) !important; }
.text-hint { color: var(--hint) !important; }
.text-strong { color: var(--text) !important; }
.text-2 { color: var(--text-2) !important; }
.text-accent { color: var(--pri) !important; }
.text-ok { color: var(--ok-ink) !important; }
.text-warn { color: var(--warn-ink) !important; }
.text-err { color: var(--err-ink) !important; }
.text-info { color: var(--info-ink) !important; }
.fs-xs { font-size: var(--fs-xs) !important; } .fs-sm { font-size: var(--fs-sm) !important; } .fs-base { font-size: var(--fs-base) !important; }
.fs-md { font-size: var(--fs-md) !important; } .fs-lg { font-size: var(--fs-lg) !important; } .fs-xl { font-size: var(--fs-xl) !important; } .fs-2xl { font-size: var(--fs-2xl) !important; }
.fw-medium { font-weight: 500 !important; } .fw-semibold { font-weight: 600 !important; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link { color: var(--pri); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.surface { background: var(--surface); }
.surface-2 { background: var(--surface-2); }
.hairline-top { border-top: 1px solid var(--line); }
.hairline-bottom { border-bottom: 1px solid var(--line); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 639px) { .hide-sm { display: none !important; } }
@media (min-width: 640px) { .show-sm-only { display: none !important; } }

/* ==========================================================================
   8b. STUDIO THEME — หน้าตาแบบ Prompt Studio
   data-theme="studio" (สว่าง) · "studio-dark" (มืด — ใช้ส่วนโหมดมืดร่วมกับ midnight แล้วทับโทนกลาง)
   ขาวสะอาด หมึกเกือบดำ สีเน้นใช้น้อย ๆ · ปุ่มหลักเป็นหมึกดำทรงแคปซูล · การ์ดมุม 20px เงาบาง
   แถบเมนูเป็นพื้นการ์ดเสมอ (ไม่ขึ้นกับ data-sidebar)
   ========================================================================== */

/* ---- Accent: ทองหม่น (ค่าเริ่มต้นของ Studio — ใช้ได้กับทุกธีม) ---- */
:root[data-accent="gold"] { --pri: #8f6820; --pri-solid: #b8862b; --pri-hover: #9a7024; --pri-soft: #f6efe1; --pri-line: #ead9b6; --pri-ink: #7a5818; --pri-bright: #e0b25c; --pri-ring: rgba(184, 134, 43, .18); --pri-ring-strong: rgba(184, 134, 43, .3); }
:root:is([data-theme="midnight"], [data-theme="studio-dark"])[data-accent="gold"] { --pri: #e0b25c; --pri-solid: #a8781f; --pri-hover: #b98628; --pri-ink: #ecc983; --pri-soft: rgba(224, 178, 92, .14); --pri-line: rgba(224, 178, 92, .32); --pri-ring: rgba(224, 178, 92, .26); --pri-ring-strong: rgba(224, 178, 92, .38); }

/* ---- Tokens: สว่าง ---- */
:root[data-theme="studio"] {
  --bg-rgb: 255 255 255; --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7f8; --surface-3: #f1f1f3;
  --line: #e5e5e9; --line-soft: #eeeef1; --line-strong: #d3d3d9; --line-hover: #bdbdc5;
  --text: #15151a; --text-2: #4a4a55; --muted: #6a6974; --hint: #7a7984; --placeholder: #9b9aa4;
  --hover: #f4f4f6; --active: #ececef;
  --overlay: rgba(10, 10, 14, .38);
  --ink-solid: #15151a; --on-ink: #ffffff;
  --e-1: 0 1px 2px rgb(20 20 30 / .04), 0 1px 1px rgb(20 20 30 / .03);
  --e-2: 0 1px 2px rgb(20 20 30 / .05), 0 8px 24px -8px rgb(20 20 30 / .10);
  --e-3: 0 1px 2px rgb(20 20 30 / .05), 0 12px 32px -12px rgb(20 20 30 / .14);
  --e-4: 0 2px 6px rgb(20 20 30 / .06), 0 24px 48px -16px rgb(20 20 30 / .18);
}
/* ---- Tokens: มืด (ทับโทนกลางของ midnight ให้เป็นเทาดำอมอุ่นแบบ Prompt Studio) ---- */
:root[data-theme="studio-dark"] {
  --bg-rgb: 14 14 17; --bg: #0e0e11; --surface: #16161b; --surface-2: #1b1b21; --surface-3: #111115;
  --line: #26262d; --line-soft: #1f1f25; --line-strong: #34343c; --line-hover: #45454e;
  --text: #f1f0ec; --text-2: #c9c7c1; --muted: #8d8b95; --hint: #7d7b85; --placeholder: #66646e;
  --hover: #1d1d23; --active: #24242b;
  --overlay: rgba(0, 0, 0, .6);
  --ink-solid: #f1f0ec; --on-ink: #111114;
  --e-1: 0 1px 2px rgb(0 0 0 / .4);
  --e-2: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -8px rgb(0 0 0 / .6);
  --e-3: 0 1px 2px rgb(0 0 0 / .45), 0 12px 32px -12px rgb(0 0 0 / .65);
  --e-4: 0 2px 6px rgb(0 0 0 / .5), 0 24px 48px -16px rgb(0 0 0 / .7);
}
/* ---- ร่วมกันทั้งสองโหมด: ตัวอักษร รัศมี แถบเมนู ---- */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) {
  --font-sans: "Google Sans", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --font-display: "Google Sans", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --lh-body: 1.75;
  --r-md: 14px; --r-lg: 20px; --r-xl: 20px;
  --topbar-h: 64px;
  --sb-bg: var(--surface); --sb-bg-2: var(--surface); --sb-line: var(--line);
  --sb-text: var(--text-2); --sb-text-strong: var(--text); --sb-icon: var(--muted); --sb-label: var(--muted);
  --sb-hover: var(--surface-2); --sb-active-bg: var(--pri-soft); --sb-active-text: var(--text);
  --sb-indicator: var(--pri); --sb-scroll: var(--line-strong);
}
@media (max-width: 640px) { :root:is([data-theme="studio"], [data-theme="studio-dark"]) { --topbar-h: 56px; } }

/* Scrollbar — แท่งหมึกจาง ชี้แล้วเป็นสีเน้น */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) ::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--text) 16%, transparent); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) ::-webkit-scrollbar-thumb:hover { border-width: 2px; background-color: color-mix(in srgb, var(--pri-bright) 75%, transparent); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) ::selection { background: var(--pri-soft); }

/* App shell — topbar โปร่งเบลอ มีเส้นล่างตลอด · แถบเมนูพื้นการ์ด · โลโก้ไล่เฉดสีเน้น */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .topbar {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sidebar { background: var(--surface); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sb-mark {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pri-bright) 82%, #fff), color-mix(in srgb, var(--pri-solid) 86%, #000));
  color: var(--on-ink); box-shadow: none;   /* ตามต้นฉบับ (--primary-ink): สว่าง = ไอคอนขาว · มืด = ไอคอนเข้ม */
}
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sidebar-link { border-radius: var(--r-full); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sidebar-link.active { font-weight: 600; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sidebar-link.active::before { display: none; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sb-label { font-weight: 600; }

/* Cards — มุม 20px เงาบาง · การ์ดย่อย/กล่องไอคอนมุม 14px */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.card, .card-m, .stat-card) { border-radius: var(--r-lg); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .card-foot { border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); background: linear-gradient(to bottom, var(--surface-2), var(--surface)); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) a.stat-card { transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) a.stat-card:hover { box-shadow: var(--e-2); transform: translateY(-2px); }

/* Buttons — แคปซูล · ปุ่มหลักเป็นหมึกดำ (โหมดมืด = หมึกสว่าง) โฮเวอร์ผสมสีเน้น */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn, .btn-m) { border-radius: var(--r-full); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-lg, .btn-m.lg) { --btn-h: 50px; font-weight: 600; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-primary, .btn-m.primary) { background: var(--ink-solid); color: var(--on-ink); box-shadow: none; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-primary, .btn-m.primary):hover { background: color-mix(in srgb, var(--ink-solid) 86%, var(--pri-solid)); color: var(--on-ink); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-secondary, .btn-m.outline) { box-shadow: none; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-secondary, .btn-m.outline):hover { background: var(--surface); border-color: var(--text-2); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-ghost, .btn-m.ghost) { color: var(--text-2); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-ghost, .btn-m.ghost):hover { background: var(--surface-3); color: var(--text); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-danger, .btn-m.danger, .btn.btn-success, .btn-m.success, .btn.btn-rss, .btn-m.rss) { box-shadow: none; }

/* Badges — แคปซูลไม่มีเส้นขอบ (แบบ .pill ของ Prompt Studio) · segmented มุมโค้งนุ่ม */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.badge, .pill) { min-height: 24px; padding: 0 10px; border-radius: var(--r-full); box-shadow: none; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .segmented { border-radius: 12px; border-color: transparent; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.segmented > button, .segmented > a, .segmented > .seg) { border-radius: 9px; }

/* Inputs — พื้นเทาอ่อน ไม่มีเงา · โฟกัสขอบสีเน้น + วงแหวน 4px */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.input, .select, .textarea, .inp) {
  min-height: 42px; background-color: var(--surface-2); border-color: var(--line); box-shadow: none;
}
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.input, .select, .textarea, .inp):hover { border-color: var(--line-strong); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.input, .select, .textarea, .inp):is(:focus, :focus-visible) {
  background-color: var(--surface); border-color: var(--pri-solid); box-shadow: 0 0 0 4px var(--pri-ring);
}
:root:is([data-theme="studio"], [data-theme="studio-dark"]) input[type="file"]::file-selector-button { border-radius: var(--r-full); }

/* Progress — แถบไล่เฉดสีเน้น + ประกายวิ่ง (บอกว่ายังทำงานอยู่ ไม่ได้ค้าง) */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .progress { height: 8px; background: var(--surface-3); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .progress-fill {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pri-solid) 70%, #000), var(--pri-solid), color-mix(in srgb, var(--pri-bright) 55%, #fff));
}
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .progress:not(.is-success):not(.is-error) .progress-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent) no-repeat;
  background-size: 50% 100%; animation: ui-sheen 1.8s ease-in-out infinite;
}
@keyframes ui-sheen { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* Dialogs (SweetAlert2) — มุม 20px ปุ่มแคปซูล ปุ่มยืนยันเป็นหมึก */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .swal2-popup:not(.swal2-toast) { border-radius: var(--r-xl); border: 1px solid var(--line); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .swal2-popup .swal2-styled { border-radius: var(--r-full); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .swal2-popup .swal2-styled.swal2-confirm { background-color: var(--ink-solid); color: var(--on-ink); }

/* ---- Motion — ชุดการเคลื่อนไหวของ Studio ----
   เข้าหน้า: ชิ้นงานลอยขึ้นทีละชิ้น (.st-in + --st-d) · ใต้จอ: รอจนเลื่อนถึง (.st-wait) · ตัวเลขนับขึ้น
   (คลาส st-* ใส่โดย ui.js เฉพาะธีม Studio และเมื่อผู้ใช้ไม่ได้ตั้ง "ลดการเคลื่อนไหว" — ไม่มี JS ก็แสดงครบปกติ)
   เปลี่ยนหน้า: cross-document View Transitions (header.php เปิดให้เฉพาะธีม Studio) — แถบเมนู/แถบบนอยู่นิ่ง */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) {
  --st-ease: cubic-bezier(.2, .8, .2, 1);
  --st-spring: cubic-bezier(.34, 1.4, .64, 1);
}
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .st-wait { opacity: 0; transform: translateY(28px) scale(.97); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .st-in { animation: st-rise .8s var(--st-ease) var(--st-d, 0ms) both; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) tr.st-in { animation-name: st-row; animation-duration: .55s; }
@keyframes st-rise { from { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(8px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
@keyframes st-row { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes st-pop { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes st-pill { from { opacity: 0; transform: scaleX(.92); } to { opacity: 1; transform: none; } }

/* แถบเมนู: เมนูที่เลือกขยายเข้ามา · ไอคอนขยับตอนชี้ · โลโก้มีประกายวิ่งตอนชี้ */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sidebar-link.active { animation: st-pill .4s var(--st-ease) both; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sidebar-link .material-symbols-outlined { transition: color var(--dur-1) var(--ease), transform .25s var(--st-spring); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sidebar-link:hover .material-symbols-outlined { transform: translateX(2px) scale(1.08); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sb-mark { position: relative; overflow: hidden; transition: transform .3s var(--st-spring); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sb-mark::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%);
}
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sb-brand:hover .sb-mark { transform: rotate(-6deg) scale(1.06); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sb-brand:hover .sb-mark::after { transform: translateX(120%); transition: transform .7s var(--st-ease); }

/* การ์ด: การ์ดสถิติลอย + ไอคอนเด้ง · ไอคอนหัวหน้าเด้งเข้า · แถวตารางเปลี่ยนสีนุ่ม */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .stat-card { transition: border-color var(--dur-1) var(--ease), box-shadow .25s var(--ease), transform .25s var(--st-ease); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .stat-card:hover { border-color: var(--line-strong); box-shadow: var(--e-2); transform: translateY(-3px); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.stat-icon, .card-icon, .icon-chip) { transition: transform .35s var(--st-spring); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .stat-card:hover .stat-icon { transform: scale(1.1) rotate(-6deg); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .card:hover > .card-head .card-icon { transform: scale(1.08); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .page-icon { animation: st-pop .5s var(--st-spring) .05s both; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .tbl tbody td { transition: background-color .18s var(--ease); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .option-card { transition: border-color var(--dur-1) var(--ease), box-shadow .2s var(--ease), transform .2s var(--st-ease); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .option-card:hover { transform: translateY(-2px); }

/* ปุ่ม: ลอยนิดตอนชี้ ยุบตอนกด (เหมือน .btn:active ของ Prompt Studio) */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn, .btn-m) { transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s, transform .18s var(--st-ease), opacity .15s; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-primary, .btn-m.primary, .btn.btn-secondary, .btn-m.outline):hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); box-shadow: var(--e-2); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn, .btn-m):active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px) scale(.98); box-shadow: none; transition-duration: .08s; }

/* เมนู/หน้าต่าง/dialog: เด้งเข้าแบบสปริง */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .menu-panel { animation: st-pop .28s var(--st-spring) both; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .modal-panel { animation: st-pop .38s var(--st-spring) both; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .swal2-popup.swal2-show:not(.swal2-toast) { animation: st-pop .38s var(--st-spring) both; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .swal2-popup.swal2-hide:not(.swal2-toast) { animation: st-pop .16s var(--ease) reverse both; }

/* เปลี่ยนหน้า (View Transitions): เนื้อหาเฟดข้าม แถบเมนูและแถบบนไม่ขยับ */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .sidebar { view-transition-name: st-sidebar; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .topbar { view-transition-name: st-topbar; }
::view-transition-old(root) { animation: st-vt-out .2s var(--ease) both; }
::view-transition-new(root) { animation: st-vt-in .3s var(--ease) both; }
::view-transition-group(st-main) { animation: none; }
::view-transition-old(st-main) { animation: st-vt-up .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(st-main) { animation: st-vt-in .35s var(--ease) .1s both; }
@keyframes st-vt-up { to { opacity: 0; transform: translateY(-24px) scale(.985); filter: blur(4px); } }
::view-transition-group(st-sidebar), ::view-transition-group(st-topbar) { animation: none; }
::view-transition-old(st-sidebar), ::view-transition-old(st-topbar) { display: none; }
::view-transition-new(st-sidebar), ::view-transition-new(st-topbar) { animation: none; }
/* สลับธีมในหน้าตั้งค่า (html.st-theming): ทุกส่วนรวมแถบเมนูเฟดสีพร้อมกัน */
:root.st-theming::view-transition-old(st-sidebar), :root.st-theming::view-transition-old(st-topbar) { display: block; animation: st-vt-out .3s var(--ease) both; }
:root.st-theming::view-transition-new(st-sidebar), :root.st-theming::view-transition-new(st-topbar) { animation: st-vt-in .3s var(--ease) both; }
:root.st-theming::view-transition-old(root) { animation-duration: .3s; }
@keyframes st-vt-out { to { opacity: 0; } }
@keyframes st-vt-in { from { opacity: 0; } }
/* แสงทองเคลื่อนไหวช้า ๆ ด้านบนของพื้นหลัง (อยู่หลังทุกอย่าง — body ไม่ตั้ง stacking context) */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  top: -260px; right: -180px; width: 760px; height: 560px; border-radius: 50%;
  background:
    radial-gradient(closest-side at 38% 50%, color-mix(in srgb, var(--pri-bright) 30%, transparent), transparent),
    radial-gradient(closest-side at 72% 46%, color-mix(in srgb, var(--pri-solid) 18%, transparent), transparent);
  filter: blur(30px);
  animation: st-aurora 16s ease-in-out infinite alternate;
}
:root[data-theme="studio-dark"] body::before { opacity: .55; }
@keyframes st-aurora {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-140px, 60px) scale(1.15) rotate(8deg); }
  100% { transform: translate(-40px, 120px) scale(.95) rotate(-6deg); }
}

/* แถวตาราง: แถบทองวิ่งเข้ามาทางซ้ายตอนชี้ */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .tbl tbody td:first-child { box-shadow: inset 0 0 0 var(--pri-solid); transition: background-color .18s var(--ease), box-shadow .25s var(--st-ease); }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) .tbl tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--pri-solid); }

/* ปุ่มหลัก: ประกายวิ่งผ่านตอนชี้ */
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-primary, .btn-m.primary) { overflow: hidden; isolation: isolate; }
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-primary, .btn-m.primary)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--pri-bright) 45%, transparent) 50%, transparent 65%);
}
:root:is([data-theme="studio"], [data-theme="studio-dark"]) :is(.btn.btn-primary, .btn-m.primary):hover:not(:disabled)::after { transform: translateX(120%); transition: transform .75s var(--st-ease); }

@media (prefers-reduced-motion: reduce) {
  :root:is([data-theme="studio"], [data-theme="studio-dark"]) body::before { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  :root:is([data-theme="studio"], [data-theme="studio-dark"]) .st-wait { opacity: 1; transform: none; }
}

/* ==========================================================================
   9. MOTION, REDUCED MOTION, PRINT
   ========================================================================== */
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ui-pop { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ui-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(270%); } }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes ui-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Entrance (legacy .anim + .d1–.d4) — short and quiet */
.anim { animation: ui-rise var(--dur-3) var(--ease) both; }
.d1 { animation-delay: 30ms; } .d2 { animation-delay: 60ms; } .d3 { animation-delay: 90ms; } .d4 { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .spinner, .swal2-loader { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
  .progress.is-indeterminate .progress-fill { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
  .skeleton { animation: none !important; }
}

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sidebar, .sidebar-overlay, .topbar, .skip-link, .ui-routebar, .ui-routechip, .ui-toasts, .ui-pmodal, .no-print, .page-actions, .pagination { display: none !important; }
  html body { background: #fff !important; color: #000 !important; }
  .main-wrap { margin: 0 !important; }
  .page { max-width: none; padding: 0; }
  .card, .card-m, .stat-card, .stat-pill { box-shadow: none !important; break-inside: avoid; }
  .tbl th { background: #f3f4f6 !important; }
  .app-footer-inner { border-top: 1px solid #ccc; }
}