/* ═══════════════════════════════════════════════════════════════
   HALF LENS DESIGN SYSTEM v4 — TOKENS
   Single source of truth. Every component reads from these vars.
   Themes: [data-theme="dark"] (default) · [data-theme="light"]
   Direction: components use logical properties → works in RTL + LTR
═══════════════════════════════════════════════════════════════ */

/* ── Theme-independent tokens ── */
:root {
  /* Brand */
  --brand-navy:   #2a296d;   /* sampled from Logo_Blue.png */
  --brand-blue:   #2563eb;
  /* Brand panel (login, splash) · always dark in both themes */
  --bg-brand: #0a1740;
  --text-on-brand: #f0f4ff;
  --text-on-brand-muted: rgba(200,215,255,0.72);
  --accent-lighter-on-brand: #7cb2ff;

  /* Typography */
  --font-main: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Cairo', system-ui, sans-serif;               /* UI numerals — Cairo per 2026-03-28 decision */
  --font-code: 'JetBrains Mono', 'Cairo', ui-monospace, monospace; /* code blocks only */

  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base-sm: 13px;
  --text-base: 14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 44px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

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

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Glass · only for surfaces floating over moving content */
  --glass-blur: 14px;
  --scrim-blur: 3px;

  /* Control heights */
  --control-sm: 30px;
  --control-md: 38px;
  --control-lg: 46px;

  /* Motion */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-normal: 0.25s;
  --dur-slow: 0.4s;
  --transition-fast:   var(--dur-fast) var(--ease-standard);
  --transition-normal: var(--dur-normal) var(--ease-standard);

  /* Elevation layers */
  --z-base: 0;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-drawer: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* Breakpoints (reference — use in @media literally) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ── Dark (default) ── */
:root, [data-theme="dark"] {
  color-scheme: dark;

  --bg-base:        #050d1e;
  --bg-surface:     #071428;
  --bg-elevated:    #0a1a35;
  --bg-overlay:     #0d2040;
  --bg-card:        rgba(255,255,255,0.03);
  --bg-card-hover:  rgba(255,255,255,0.06);
  --bg-glass:       rgba(7,20,45,0.75);
  --bg-sidebar:     linear-gradient(160deg, #07112a 0%, #040c1c 100%);
  --bg-input:       rgba(255,255,255,0.03);
  --bg-input-hover: rgba(255,255,255,0.05);
  --bg-input-focus: rgba(37,99,235,0.05);
  --bg-scrim:       rgba(2,6,16,0.72);
  --glass-bg:       rgba(5,13,30,0.78);
  --glass-border:   rgba(255,255,255,0.08);
  --bg-skeleton:    rgba(255,255,255,0.05);
  --bg-skeleton-hi: rgba(255,255,255,0.10);

  --border-subtle:  rgba(255,255,255,0.05);
  --border-soft:    rgba(255,255,255,0.09);
  --border-medium:  rgba(255,255,255,0.14);
  --border-strong:  rgba(255,255,255,0.22);
  --border-accent:  rgba(37,99,235,0.4);

  --text-primary:   #f0f4ff;
  --text-secondary: rgba(200,215,255,0.68);
  --text-muted:     rgba(160,182,235,0.66);   /* v4: raised from .40 → 4.7:1 on bg-base (AA) */
  --text-disabled:  rgba(100,130,200,0.30);
  --text-inverse:   #050d1e;
  --text-on-accent: #ffffff;

  --accent:         #2563eb;
  --accent-light:   #3b82f6;
  --accent-lighter: #60a5fa;
  --accent-glow:    rgba(37,99,235,0.25);
  --accent-glow-md: rgba(37,99,235,0.15);
  --accent-text:    #60a5fa;

  --success:        #10b981;
  --success-bg:     rgba(16,185,129,0.1);
  --success-border: rgba(16,185,129,0.25);
  --success-text:   #34d399;
  --warning:        #f59e0b;
  --warning-bg:     rgba(245,158,11,0.1);
  --warning-border: rgba(245,158,11,0.25);
  --warning-text:   #fbbf24;
  --danger:         #ef4444;
  --danger-bg:      rgba(239,68,68,0.1);
  --danger-border:  rgba(239,68,68,0.25);
  --danger-text:    #f87171;
  --info:           #06b6d4;
  --info-bg:        rgba(6,182,212,0.1);
  --info-border:    rgba(6,182,212,0.25);
  --info-text:      #22d3ee;
  --purple:         #8b5cf6;
  --purple-bg:      rgba(139,92,246,0.1);
  --purple-border:  rgba(139,92,246,0.25);
  --purple-text:    #a78bfa;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 20px rgba(37,99,235,0.2), 0 0 60px rgba(37,99,235,0.07);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03);

  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px rgba(96,165,250,0.85);

  --mode-badge-bg:     rgba(255,255,255,0.06);
  --mode-badge-border: rgba(255,255,255,0.1);
  --mode-badge-text:   var(--text-secondary);

  /* Chart palette (categorical — ordered) */
  --chart-1: #3b82f6;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
  --chart-4: #8b5cf6;
  --chart-5: #06b6d4;
  --chart-6: #f43f5e;
  --chart-grid: rgba(255,255,255,0.06);
  --chart-axis: rgba(160,182,235,0.66);

  /* Stat card gradients */
  --sc-blue-grad:   linear-gradient(135deg, #0d2a5c 0%, #071428 60%, #050d1e 100%);
  --sc-blue-border: rgba(37,99,235,0.25);
  --sc-blue-glow:   #2563eb;
  --sc-blue-val:    #93c5fd;
  --sc-blue-label:  rgba(96,165,250,0.8);
  --sc-blue-icon-bg: rgba(37,99,235,0.18); --sc-blue-icon-b: rgba(37,99,235,0.3); --sc-blue-icon-c: #60a5fa;
  --sc-green-grad:   linear-gradient(135deg, #0a2e20 0%, #071428 60%, #050d1e 100%);
  --sc-green-border: rgba(16,185,129,0.2);
  --sc-green-glow:   #10b981;
  --sc-green-val:    #6ee7b7;
  --sc-green-label:  rgba(52,211,153,0.8);
  --sc-green-icon-bg: rgba(16,185,129,0.15); --sc-green-icon-b: rgba(16,185,129,0.3); --sc-green-icon-c: #34d399;
  --sc-amber-grad:   linear-gradient(135deg, #2a1f07 0%, #071428 60%, #050d1e 100%);
  --sc-amber-border: rgba(245,158,11,0.2);
  --sc-amber-glow:   #f59e0b;
  --sc-amber-val:    #fcd34d;
  --sc-amber-label:  rgba(251,191,36,0.8);
  --sc-amber-icon-bg: rgba(245,158,11,0.15); --sc-amber-icon-b: rgba(245,158,11,0.3); --sc-amber-icon-c: #fbbf24;
  --sc-purple-grad:   linear-gradient(135deg, #1e1040 0%, #071428 60%, #050d1e 100%);
  --sc-purple-border: rgba(139,92,246,0.2);
  --sc-purple-glow:   #8b5cf6;
  --sc-purple-val:    #c4b5fd;
  --sc-purple-label:  rgba(167,139,250,0.8);
  --sc-purple-icon-bg: rgba(139,92,246,0.15); --sc-purple-icon-b: rgba(139,92,246,0.3); --sc-purple-icon-c: #a78bfa;
}

/* ── Light ── */
[data-theme="light"] {
  color-scheme: light;

  --bg-base:        #f4f6fb;
  --bg-surface:     #ffffff;
  --bg-elevated:    #ffffff;
  --bg-overlay:     #eef1f8;
  --bg-card:        rgba(255,255,255,0.9);
  --bg-card-hover:  rgba(255,255,255,1);
  --bg-glass:       rgba(255,255,255,0.8);
  --bg-sidebar:     linear-gradient(160deg, #e8edf8 0%, #dde3f4 100%);
  --bg-input:       #ffffff;
  --bg-input-hover: #f8faff;
  --bg-input-focus: rgba(37,99,235,0.03);
  --bg-scrim:       rgba(15,23,42,0.45);
  --glass-bg:       rgba(255,255,255,0.80);
  --glass-border:   rgba(15,23,42,0.08);
  --bg-skeleton:    rgba(15,23,42,0.06);
  --bg-skeleton-hi: rgba(15,23,42,0.11);

  --border-subtle:  rgba(0,0,0,0.06);
  --border-soft:    rgba(0,0,0,0.1);
  --border-medium:  rgba(0,0,0,0.15);
  --border-strong:  rgba(0,0,0,0.22);
  --border-accent:  rgba(37,99,235,0.35);

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #5f6f86;   /* v4: was #94a3b8 (2.4:1) → 4.7:1 on bg-base (AA) */
  --text-disabled:  #cbd5e1;
  --text-inverse:   #ffffff;
  --text-on-accent: #ffffff;

  --accent:         #2563eb;
  --accent-light:   #3b82f6;
  --accent-lighter: #1d4ed8;
  --accent-glow:    rgba(37,99,235,0.15);
  --accent-glow-md: rgba(37,99,235,0.1);
  --accent-text:    #1d4ed8;

  --success:        #059669;
  --success-bg:     rgba(5,150,105,0.07);
  --success-border: rgba(5,150,105,0.2);
  --success-text:   #047857;
  --warning:        #d97706;
  --warning-bg:     rgba(217,119,6,0.07);
  --warning-border: rgba(217,119,6,0.2);
  --warning-text:   #92400e;
  --danger:         #dc2626;
  --danger-bg:      rgba(220,38,38,0.07);
  --danger-border:  rgba(220,38,38,0.2);
  --danger-text:    #b91c1c;
  --info:           #0891b2;
  --info-bg:        rgba(8,145,178,0.07);
  --info-border:    rgba(8,145,178,0.2);
  --info-text:      #0e7490;
  --purple:         #7c3aed;
  --purple-bg:      rgba(124,58,237,0.07);
  --purple-border:  rgba(124,58,237,0.2);
  --purple-text:    #6d28d9;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:   0 24px 64px rgba(15,23,42,0.18);
  --shadow-glow: 0 0 20px rgba(37,99,235,0.12), 0 0 60px rgba(37,99,235,0.05);
  --shadow-card: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);

  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px rgba(37,99,235,0.9);

  --mode-badge-bg:     rgba(0,0,0,0.04);
  --mode-badge-border: rgba(0,0,0,0.1);
  --mode-badge-text:   #475569;

  --chart-1: #2563eb;
  --chart-2: #059669;
  --chart-3: #d97706;
  --chart-4: #7c3aed;
  --chart-5: #0891b2;
  --chart-6: #e11d48;
  --chart-grid: rgba(15,23,42,0.07);
  --chart-axis: #5f6f86;

  --sc-blue-grad:   linear-gradient(135deg, #dbeafe 0%, #eff6ff 60%, #f8faff 100%);
  --sc-blue-border: rgba(37,99,235,0.2);
  --sc-blue-glow:   #93c5fd;
  --sc-blue-val:    #1d4ed8;
  --sc-blue-label:  #2563eb;
  --sc-blue-icon-bg: rgba(37,99,235,0.1); --sc-blue-icon-b: rgba(37,99,235,0.2); --sc-blue-icon-c: #2563eb;
  --sc-green-grad:   linear-gradient(135deg, #d1fae5 0%, #f0fdf4 60%, #f8faff 100%);
  --sc-green-border: rgba(5,150,105,0.2);
  --sc-green-glow:   #6ee7b7;
  --sc-green-val:    #065f46;
  --sc-green-label:  #047857;
  --sc-green-icon-bg: rgba(5,150,105,0.1); --sc-green-icon-b: rgba(5,150,105,0.2); --sc-green-icon-c: #059669;
  --sc-amber-grad:   linear-gradient(135deg, #fef3c7 0%, #fffbeb 60%, #fafaf8 100%);
  --sc-amber-border: rgba(217,119,6,0.2);
  --sc-amber-glow:   #fcd34d;
  --sc-amber-val:    #92400e;
  --sc-amber-label:  #b45309;
  --sc-amber-icon-bg: rgba(217,119,6,0.1); --sc-amber-icon-b: rgba(217,119,6,0.2); --sc-amber-icon-c: #d97706;
  --sc-purple-grad:   linear-gradient(135deg, #ede9fe 0%, #f5f3ff 60%, #faf9ff 100%);
  --sc-purple-border: rgba(124,58,237,0.2);
  --sc-purple-glow:   #c4b5fd;
  --sc-purple-val:    #4c1d95;
  --sc-purple-label:  #6d28d9;
  --sc-purple-icon-bg: rgba(124,58,237,0.1); --sc-purple-icon-b: rgba(124,58,237,0.2); --sc-purple-icon-c: #7c3aed;
}

/* ═══════════════════════════════════════════════════════════════
   HALF LENS DESIGN SYSTEM v4 — CORE
   Base · a11y · utilities · core components
   Rules:
   • Colors only via tokens (hl-tokens.css) — no hex in components.
   • Direction-aware: margin-inline / inset-inline / padding-inline.
   • Every interactive element gets :focus-visible (var(--focus-ring)).
═══════════════════════════════════════════════════════════════ */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-main);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background-color: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s ease, color .3s ease;
}
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; }
.num, .tabular { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
* { scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; }
::selection { background: var(--accent-glow); color: var(--text-primary); }

/* ── Accessibility ── */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
  z-index: var(--z-tooltip); padding: var(--space-2) var(--space-4);
  background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-md);
  font-weight: 700; text-decoration: none; transform: translateY(-200%);
  transition: transform var(--transition-fast);
}
.skip-link:focus-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* Mirror directional icons (arrows, chevrons) in RTL */
[dir="rtl"] .icon-flip, [dir="rtl"] [data-flip] { transform: scaleX(-1); }

/* ── Layout utilities ── */
.stack   { display: flex; flex-direction: column; gap: var(--gap, var(--space-3)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-2)); }
.spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr)); gap: var(--gap, var(--space-4)); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap, var(--space-4)); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap, var(--space-4)); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap, var(--space-4)); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }
.w-full { width: 100%; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary { color: var(--text-primary); }
.text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); }
.fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; }
.text-success { color: var(--success-text); } .text-danger { color: var(--danger-text); } .text-warning { color: var(--warning-text); } .text-accent { color: var(--accent-text); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.divider { height: 1px; background: var(--border-subtle); border: 0; margin-block: var(--space-4); }
.divider-v { width: 1px; align-self: stretch; background: var(--border-subtle); }

/* ── Icon sizing (Lucide) ── */
.ico { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.9; }
.ico-sm { width: 14px; height: 14px; }
.ico-lg { width: 20px; height: 20px; }

/* ── Keyboard key ── */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--font-code); font-size: 11px; font-weight: 500; line-height: 1;
  color: var(--text-secondary); background: var(--mode-badge-bg);
  border: 1px solid var(--border-soft); border-block-end-width: 2px; border-radius: var(--radius-xs);
}

/* ═══════════════════════════════════════════════════════════════
   BADGE
═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; white-space: nowrap;
  transition: var(--transition-fast);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-blue   { background: var(--accent-glow);  color: var(--accent-text);   border-color: var(--accent-glow-md); }
.badge-green  { background: var(--success-bg);   color: var(--success-text);  border-color: var(--success-border); }
.badge-amber  { background: var(--warning-bg);   color: var(--warning-text);  border-color: var(--warning-border); }
.badge-red    { background: var(--danger-bg);    color: var(--danger-text);   border-color: var(--danger-border); }
.badge-purple { background: var(--purple-bg);    color: var(--purple-text);   border-color: var(--purple-border); }
.badge-cyan   { background: var(--info-bg);      color: var(--info-text);     border-color: var(--info-border); }
.badge-gray   { background: var(--mode-badge-bg);color: var(--text-secondary);border-color: var(--border-soft); }
.badge-solid  { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }
.badge-sm { padding: 1px 7px; font-size: var(--text-2xs); }
.badge-lg { padding: 5px 12px; font-size: var(--text-base-sm); }
.badge-sq { border-radius: var(--radius-xs); }
.badge-outline { background: transparent; }
.badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.badge-count {
  display: inline-flex; align-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; justify-content: center;
  font-size: var(--text-2xs); font-weight: 700; line-height: 1; border-radius: var(--radius-full);
  background: var(--danger); color: var(--text-on-accent); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.badge-count.bc-blue { background: var(--accent); }
.badge-count.bc-gray { background: var(--mode-badge-bg); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-soft); }
/* Floating count on an icon button / avatar: parent needs position:relative (.btn and .avatar have it) */
.badge-float { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; box-shadow: 0 0 0 2px var(--bg-surface); pointer-events: none; }
.badge-float.badge-dot-only { min-width: 10px; width: 10px; height: 10px; padding: 0; inset-block-start: -2px; inset-inline-end: -2px; }

/* Status — dot + label, no pill background (tables, lists) */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

/* Chip — interactive/removable tag */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px;
  border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  background: var(--mode-badge-bg); color: var(--text-secondary);
  border: 1px solid var(--border-soft); transition: var(--transition-fast);
}
button.chip { cursor: pointer; }
.chip svg { width: 14px; height: 14px; flex-shrink: 0; }
button.chip:hover { color: var(--text-primary); border-color: var(--border-medium); }
.chip:focus-visible { border-radius: var(--radius-full); }
.chip[aria-pressed="true"], .chip.on { background: var(--accent-glow); color: var(--accent-text); border-color: var(--border-accent); }
.chip[aria-pressed="true"]::before { content: ''; width: 6px; height: 10px; margin-block-start: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chip .chip-n { font-size: var(--text-2xs); font-weight: 700; padding: 0 6px; border-radius: var(--radius-full); background: var(--mode-badge-bg); font-variant-numeric: tabular-nums; }
.chip:has(.chip-x) { padding-inline-end: 5px; }
.chip-x { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; color: inherit; opacity: .7; transition: var(--transition-fast); }
.chip-x:hover { opacity: 1; background: var(--border-soft); }
.chip-x:focus-visible { opacity: 1; border-radius: 50%; }
.chip-x svg { width: 12px; height: 12px; }
.chip.is-leaving { opacity: 0; transform: scale(.9); }

/* ═══════════════════════════════════════════════════════════════
   BUTTON
═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-md); padding-inline: 18px;
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: var(--font-main); font-size: var(--text-base); font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  position: relative;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-md); }

.btn-primary { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-light); }

.btn-secondary { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-medium); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-card-hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--mode-badge-bg); color: var(--text-primary); }

.btn-danger  { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-border); }
.btn-danger:hover:not(:disabled)  { box-shadow: 0 4px 14px rgba(239,68,68,0.15); }
.btn-danger-solid { background: var(--danger); color: var(--text-on-accent); }
.btn-danger-solid:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(239,68,68,0.3); }
.btn-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.btn-success:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(16,185,129,0.15); }
.btn-link { background: none; height: auto; padding: 0; color: var(--accent-text); border-radius: var(--radius-xs); }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.btn-sm { height: var(--control-sm); padding-inline: 12px; font-size: var(--text-sm); border-radius: var(--radius-sm); gap: 6px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { height: var(--control-lg); padding-inline: 26px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-icon { width: var(--control-md); padding: 0; }
.btn-icon.btn-sm { width: var(--control-sm); }
.btn-icon.btn-lg { width: var(--control-lg); }
.btn-block { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* Loading: add .is-loading + aria-busy="true" */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--text-on-accent) transparent var(--text-on-accent) transparent;
  animation: hl-spin .7s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { border-color: var(--text-primary) transparent var(--text-primary) transparent; }

/* Button group */
.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.btn-group > .btn:last-child  { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.btn-group > .btn + .btn { margin-inline-start: -1px; }

/* ── Spinner ── */
.spinner {
  width: 20px; height: 20px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--border-soft); border-block-start-color: var(--accent);
  animation: hl-spin .7s linear infinite;
}
.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.spinner-on-accent { border-color: rgba(255,255,255,0.3); border-block-start-color: var(--text-on-accent); }
@keyframes hl-spin { to { transform: rotate(360deg); } }
/* Inline loader — spinner + label */
.loader { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary); }
/* Busy region — blocks interaction, centres a spinner over the content */
.busy-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  background: var(--bg-elevated); border-radius: inherit; font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-label { font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary); }
.input-label .req { color: var(--danger-text); margin-inline-start: 3px; }
.input-label .opt { color: var(--text-muted); font-weight: 500; font-size: var(--text-sm); margin-inline-start: 4px; }

.input {
  width: 100%; height: var(--control-md); padding-inline: 14px;
  background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  color: var(--text-primary); font-family: var(--font-main); font-size: var(--text-base);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.input::placeholder { color: var(--text-muted); }
.input:hover:not(:disabled) { border-color: var(--border-medium); background: var(--bg-input-hover); }
.input:focus, .input:focus-visible { border-color: rgba(37,99,235,0.6); background: var(--bg-input-focus); box-shadow: 0 0 0 3px var(--accent-glow); border-radius: var(--radius-md); }
.input:disabled { opacity: .5; cursor: not-allowed; }
.input[readonly] { background: var(--mode-badge-bg); border-style: dashed; cursor: default; }
.input[readonly]:focus { box-shadow: var(--focus-ring); border-color: var(--border-soft); background: var(--mode-badge-bg); }
.input.input-error, .input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.input.input-error:focus, .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-border); }
.input.input-ok { border-color: var(--success); }
.input.input-ok:focus { box-shadow: 0 0 0 3px var(--success-bg); }
.input.input-sm { height: var(--control-sm); font-size: var(--text-base-sm); padding-inline: 10px; border-radius: var(--radius-sm); }
.input.input-lg { height: var(--control-lg); font-size: var(--text-md); padding-inline: 16px; border-radius: var(--radius-lg); }
.input.num, .input[type="number"], .input[inputmode="decimal"], .input[inputmode="numeric"] { font-variant-numeric: tabular-nums; }
.input[type="number"] { -moz-appearance: textfield; }
.input[type="number"]::-webkit-inner-spin-button, .input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.input-label-row .link { font-size: var(--text-sm); }

.input-hint { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: 5px; line-height: 1.45; }
.input-hint.error { color: var(--danger-text); }
.input-hint.ok    { color: var(--success-text); }
.input-hint[hidden] { display: none; }
.input-hint svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Leading icon: <span class="input-icon"> BEFORE the input · trailing: .input-end AFTER it */
.input-wrap { position: relative; display: block; }
.input-wrap > .input-icon ~ .input { padding-inline-start: 38px; }
.input-wrap > .input-icon {
  position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; display: flex; transition: color var(--transition-fast);
}
.input-wrap:focus-within > .input-icon { color: var(--accent-text); }
.input-wrap > .input-icon svg, .input-wrap > svg.input-icon { width: 16px; height: 16px; }
.input-wrap > .input-icon ~ .input-sm { padding-inline-start: 32px; }
.input-wrap > .input-icon:has(~ .input-sm) { inset-inline-start: 10px; }
.input-wrap > .input-icon:has(~ .input-sm) svg { width: 14px; height: 14px; }
.input-wrap > .input:has(~ .input-end) { padding-inline-end: 42px; }
.input-wrap.has-end > .input { padding-inline-end: 42px; }
.input-wrap > .input-end {
  position: absolute; inset-inline-end: 4px; inset-block-start: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 4px; color: var(--text-muted);
}
.input-wrap > .input-end .btn { height: 30px; width: 30px; }
.input-wrap > .input-end .kbd { margin-inline-end: 6px; }
[data-reveal][aria-pressed="true"] .when-off, [data-reveal]:not([aria-pressed="true"]) .when-on { display: none; }

/* Addon (prefix/suffix text, e.g. SAR, https://) */
.input-addon { display: flex; align-items: stretch; }
.input-addon > .input { flex: 1; min-width: 0; }
.input-addon > .input:focus { position: relative; z-index: 1; }
.input-addon > .addon {
  display: flex; align-items: center; gap: 6px; padding-inline: 12px; font-size: var(--text-base-sm); font-weight: 600; white-space: nowrap;
  color: var(--text-muted); background: var(--mode-badge-bg); border: 1px solid var(--border-soft);
}
.input-addon > .addon svg { width: 15px; height: 15px; }
.input-addon > select.input.addon-select { flex: 0 0 auto; width: auto; background-color: var(--mode-badge-bg); font-weight: 600; }
.input-addon > .addon:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); border-inline-end: 0; }
.input-addon > .addon:last-child  { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); border-inline-start: 0; }
.input-addon > .input:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
.input-addon > .input:not(:last-child)  { border-start-end-radius: 0; border-end-end-radius: 0; }

select.input, .select {
  appearance: none; cursor: pointer; padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238193b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 13px center;
}
[dir="ltr"] select.input, [dir="ltr"] .select { background-position: right 13px center; }
select.input.input-sm { padding-inline-end: 30px; background-position: left 9px center; }
[dir="ltr"] select.input.input-sm { background-position: right 9px center; }
select.input.input-lg { padding-inline-end: 40px; }
.input.input-auto { width: auto; }
select.input option { background: var(--bg-elevated); color: var(--text-primary); }

textarea.input { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; line-height: var(--leading-normal); }
.char-count { font-size: var(--text-xs); color: var(--text-muted); margin-inline-start: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.char-count.near { color: var(--warning-text); }
.char-count.over { color: var(--danger-text); font-weight: 700; }
.input-foot { display: flex; align-items: flex-start; gap: var(--space-3); }

/* Tag input */
.tag-wrap {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 5px 8px; min-height: var(--control-md); align-items: center;
  background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  transition: var(--transition-fast); cursor: text;
}
.tag-wrap:focus-within { border-color: rgba(37,99,235,0.6); box-shadow: 0 0 0 3px var(--accent-glow); }
.tag-wrap input { flex: 1; min-width: 90px; border: 0; background: none; outline: none; height: 26px; font-size: var(--text-base-sm); color: var(--text-primary); }
.tag-wrap input::placeholder { color: var(--text-muted); }
.tag-item {
  display: inline-flex; align-items: center; gap: 5px; padding-block: 3px; padding-inline: 10px 4px;
  background: var(--accent-glow); border: 1px solid var(--border-accent); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600; color: var(--accent-text);
}
.tag-item button { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; color: inherit; opacity: .7; }
.tag-item button:focus-visible { border-radius: 50%; opacity: 1; }
.tag-item button:hover { opacity: 1; background: var(--accent-glow-md); }
.tag-item svg { width: 10px; height: 10px; }

/* Switch — <button class="switch" role="switch" aria-checked="false"> */
.switch-row { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; user-select: none; }
.switch-row .switch-label { flex: 1; min-width: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.switch-row .switch-desc { display: block; font-size: var(--text-sm); color: var(--text-muted); font-weight: 400; margin-block-start: 2px; line-height: 1.5; }
.switch-row:has(.switch:disabled) { cursor: not-allowed; opacity: .6; }
.switch-list { display: flex; flex-direction: column; }
.switch-list > .switch-row { padding-block: 14px; border-block-end: 1px solid var(--border-subtle); }
.switch-list > .switch-row:first-child { padding-block-start: 0; }
.switch-list > .switch-row:last-child { border-block-end: 0; padding-block-end: 0; }
.switch {
  width: 42px; height: 24px; flex-shrink: 0; position: relative;
  background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius-full);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}
.switch::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  inset-block-start: 2px; inset-inline-start: 2px;
  background: var(--text-muted); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform var(--transition-normal), background-color var(--transition-normal);
}
.switch[aria-checked="true"] { background: var(--accent-glow); border-color: var(--border-accent); }
.switch[aria-checked="true"]::after { background: var(--accent); transform: translateX(18px); }
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-18px); }
.switch:disabled { opacity: .45; cursor: not-allowed; }
.switch:focus-visible { border-radius: var(--radius-full); }
.switch-sm { width: 34px; height: 20px; }
.switch-sm::after { width: 14px; height: 14px; }
.switch-sm[aria-checked="true"]::after { transform: translateX(14px); }
[dir="rtl"] .switch-sm[aria-checked="true"]::after { transform: translateX(-14px); }
.switch-green[aria-checked="true"] { background: var(--success-bg); border-color: var(--success-border); }
.switch-green[aria-checked="true"]::after { background: var(--success); box-shadow: 0 0 8px rgba(16,185,129,0.45); }

/* Legacy alias (admin panel): .toggle-wrap.on > .toggle-sw — prefer .switch[role=switch] */
.toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle-label { flex: 1; font-size: var(--text-base); color: var(--text-secondary); }
.toggle-sw { width: 42px; height: 24px; flex-shrink: 0; position: relative; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius-full); transition: var(--transition-normal); }
.toggle-sw::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; inset-block-start: 2px; inset-inline-start: 2px; background: var(--text-muted); transition: var(--transition-normal); }
.toggle-wrap.on .toggle-sw { background: var(--accent-glow); border-color: var(--border-accent); }
.toggle-wrap.on .toggle-sw::after { background: var(--accent); transform: translateX(18px); }
[dir="rtl"] .toggle-wrap.on .toggle-sw::after { transform: translateX(-18px); }

/* Checkbox & radio — native input, styled mark */
.hl-check-group { display: flex; flex-direction: column; gap: var(--space-3); }
.hl-check-group.horizontal { flex-direction: row; flex-wrap: wrap; gap: var(--space-6); }
.hl-checkbox, .hl-radio {
  display: inline-flex; align-items: center; gap: 10px; position: relative;
  font-size: var(--text-base); color: var(--text-primary); cursor: pointer; user-select: none;
}
.hl-checkbox input, .hl-radio input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: inherit; }
.hl-checkbox .checkmark, .hl-radio .radiomark {
  width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-medium); background: var(--bg-input); transition: var(--transition-fast);
}
.hl-checkbox .checkmark { border-radius: var(--radius-sm); }
.hl-radio .radiomark { border-radius: 50%; }
.hl-checkbox:hover .checkmark, .hl-radio:hover .radiomark { border-color: var(--border-strong); }
.hl-checkbox .checkmark::after {
  content: ''; width: 5px; height: 10px; margin-block-start: -2px;
  border: solid var(--text-on-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform .15s var(--ease-spring);
}
.hl-checkbox input:checked + .checkmark, .hl-checkbox input:indeterminate + .checkmark { background: var(--accent); border-color: var(--accent); }
.hl-checkbox input:checked + .checkmark::after { transform: rotate(45deg) scale(1); }
.hl-checkbox input:indeterminate + .checkmark::after { width: 10px; height: 0; margin: 0; border-width: 0 0 2px 0; transform: none; }
.hl-radio .radiomark::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .15s var(--ease-spring); }
.hl-radio input:checked + .radiomark { border-color: var(--accent); }
.hl-radio input:checked + .radiomark::after { transform: scale(1); }
.hl-checkbox input:focus-visible + .checkmark, .hl-radio input:focus-visible + .radiomark { box-shadow: var(--focus-ring); }
.hl-checkbox:has(input:disabled), .hl-radio:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.hl-checkbox.error .checkmark, .hl-radio.error .radiomark { border-color: var(--danger); }
.hl-check-desc { display: block; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
/* Label with description: align mark to the first line */
.hl-checkbox:has(.hl-check-desc), .hl-radio:has(.hl-check-desc) { align-items: flex-start; }
.hl-checkbox:has(.hl-check-desc) .checkmark, .hl-radio:has(.hl-check-desc) .radiomark { margin-block-start: 2px; }
.hl-checkbox .cb-text, .hl-radio .cb-text { display: flex; flex-direction: column; font-weight: 500; }
.hl-checkbox-only { gap: 0; }   /* table cells: mark only, label via .sr-only */
fieldset.hl-fieldset { border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
fieldset.hl-fieldset > legend { font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary); margin-block-end: var(--space-2); padding: 0; }

/* Choice card (radio as card) */
.choice-card {
  display: flex; gap: var(--space-3); padding: var(--space-4); cursor: pointer; position: relative;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg-card);
  transition: var(--transition-fast);
}
.choice-card:hover { border-color: var(--border-medium); }
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-glow-md); box-shadow: 0 0 0 1px var(--accent); }
.choice-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.choice-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.choice-card input { position: absolute; opacity: 0; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; }
.choice-card .cc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choice-card .cc-title { font-weight: 700; font-size: var(--text-base); color: var(--text-primary); }
.choice-card .cc-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.choice-card .cc-meta { font-size: var(--text-base-sm); font-weight: 700; color: var(--accent-text); margin-block-start: 6px; font-variant-numeric: tabular-nums; }
.choice-card .card-icon { width: 36px; height: 36px; }
/* Selection indicator (radio ring, top end) */
.choice-card::after {
  content: ''; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--border-medium); background: var(--bg-input); transition: var(--transition-fast);
}
.choice-card:has(input:checked)::after { border: 5px solid var(--accent); background: var(--text-on-accent); }
.choice-card:has(input[type="checkbox"])::after { border-radius: var(--radius-xs); }
.choice-card:has(input[type="checkbox"]:checked)::after { border: 0; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }

/* Segmented control — role="radiogroup" of buttons role="radio" */
.segmented {
  display: inline-flex; gap: 2px; padding: 3px; width: fit-content;
  background: var(--mode-badge-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.segmented > button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 14px;
  font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary);
  border-radius: var(--radius-sm); border: 1px solid transparent; transition: var(--transition-fast);
}
.segmented > button svg { width: 14px; height: 14px; }
.segmented > button:hover { color: var(--text-primary); }
.segmented > button[aria-checked="true"] { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-soft); box-shadow: var(--shadow-sm); }
.segmented > button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-light); }
.segmented-sm > button { height: 24px; padding-inline: 10px; font-size: var(--text-sm); }
.segmented-block { display: flex; width: 100%; }
.segmented-block > button { flex: 1; justify-content: center; }

/* ── Form layout ── */
.form-section { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-6); border-block-end: 1px solid var(--border-subtle); }
.form-section:first-child { padding-block-start: 0; }
.form-section:last-of-type { border-block-end: 0; }
.form-section-title { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.form-section-title svg { width: 16px; height: 16px; color: var(--accent-text); }
.form-section-desc { font-size: var(--text-sm); color: var(--text-muted); margin-block-start: 4px; line-height: 1.6; }
@media (max-width: 860px) { .form-section { grid-template-columns: 1fr; gap: var(--space-4); } }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 860px) { .form-grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .form-grid.cols-3 { grid-template-columns: 1fr; } }
.form-actions {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2);
  padding-block-start: var(--space-5); margin-block-start: var(--space-2); border-block-start: 1px solid var(--border-subtle);
}
.form-actions .form-actions-note { margin-inline-end: auto; font-size: var(--text-sm); color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.form-actions .form-actions-note svg { width: 14px; height: 14px; }
.form-actions.sticky { position: sticky; inset-block-end: 0; z-index: 2; background: var(--bg-surface); padding-block: var(--space-4); }

/* ═══════════════════════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════════════════════ */
.card {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-card);
  transition: background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}
a.card, button.card { display: block; width: 100%; text-align: start; color: inherit; text-decoration: none; cursor: pointer; font: inherit; }
.card-hover:hover, a.card:hover, button.card:hover, .card-clickable:hover {
  background: var(--bg-card-hover); border-color: var(--border-medium);
}
.card-clickable { cursor: pointer; }
a.card:focus-visible, button.card:focus-visible, .card-clickable:focus-within { box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }
/* Stretched link: the whole card is clickable via its title link (keeps one tab stop) */
.card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-link { color: inherit; text-decoration: none; }
.card-link:focus-visible { box-shadow: none; }
.card-sm { padding: var(--space-4); border-radius: var(--radius-md); }
.card-lg { padding: var(--space-6); }
.card-media { margin: calc(var(--space-5) * -1); margin-block-end: var(--space-4); aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-overlay); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media.is-product { background: var(--text-on-accent); }          /* catalogue shots on white */
.card-media.is-product img { object-fit: contain; padding: var(--space-4); }
.card-media-ph { display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: var(--bg-overlay); }
.card-media-ph svg { width: 32px; height: 32px; }
.card-media > .badge { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); }
.card-row { display: flex; align-items: center; gap: var(--space-3); }
.card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: var(--text-sm); color: var(--text-muted); }
.card-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.card-meta svg { width: 13px; height: 13px; }
.card-value { font-size: var(--text-2xl); font-weight: 800; color: var(--text-primary); line-height: 1.1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.card-flat { box-shadow: none; }
.card-glow { border-color: var(--border-accent); box-shadow: 0 0 0 1px var(--border-accent); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
.card-title    { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.card-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-block-start: 3px; line-height: 1.5; }
.card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.card-footer.between { justify-content: space-between; }
.card-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.card-icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--mode-badge-bg); color: var(--text-secondary); border: 1px solid var(--border-soft); }
.card-icon.ci-lg { width: 48px; height: 48px; border-radius: var(--radius-lg); }
.card-icon.ci-lg svg { width: 22px; height: 22px; }
.card-icon svg { width: 18px; height: 18px; }
.ci-blue   { background: var(--accent-glow); color: var(--accent-text);  border: 1px solid var(--accent-glow-md); }
.ci-green  { background: var(--success-bg);  color: var(--success-text); border: 1px solid var(--success-border); }
.ci-amber  { background: var(--warning-bg);  color: var(--warning-text); border: 1px solid var(--warning-border); }
.ci-red    { background: var(--danger-bg);   color: var(--danger-text);  border: 1px solid var(--danger-border); }
.ci-purple { background: var(--purple-bg);   color: var(--purple-text);  border: 1px solid var(--purple-border); }
.ci-cyan   { background: var(--info-bg);     color: var(--info-text);    border: 1px solid var(--info-border); }

/* ═══════════════════════════════════════════════════════════════
   STAT CARD
═══════════════════════════════════════════════════════════════ */
.stat-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 22px 20px; border: 1px solid; transition: var(--transition-normal); }
.stat-card.sc-blue   { background: var(--sc-blue-grad);   border-color: var(--sc-blue-border); }
.stat-card.sc-green  { background: var(--sc-green-grad);  border-color: var(--sc-green-border); }
.stat-card.sc-amber  { background: var(--sc-amber-grad);  border-color: var(--sc-amber-border); }
.stat-card.sc-purple { background: var(--sc-purple-grad); border-color: var(--sc-purple-border); }
.stat-card.sc-blue:hover   {  border-color: rgba(37,99,235,0.4); }
.stat-card.sc-green:hover  { border-color: rgba(16,185,129,0.35); }
.stat-card.sc-amber:hover  { border-color: rgba(245,158,11,0.35); }
.stat-card.sc-purple:hover { border-color: rgba(139,92,246,0.35); }
.stat-card > * { position: relative; z-index: 1; }
.stat-icon-box { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-block-end: var(--space-4); }
.stat-icon-box svg { width: 18px; height: 18px; }
.sc-blue   .stat-icon-box { background: var(--sc-blue-icon-bg);   border: 1px solid var(--sc-blue-icon-b);   color: var(--sc-blue-icon-c); }
.sc-green  .stat-icon-box { background: var(--sc-green-icon-bg);  border: 1px solid var(--sc-green-icon-b);  color: var(--sc-green-icon-c); }
.sc-amber  .stat-icon-box { background: var(--sc-amber-icon-bg);  border: 1px solid var(--sc-amber-icon-b);  color: var(--sc-amber-icon-c); }
.sc-purple .stat-icon-box { background: var(--sc-purple-icon-bg); border: 1px solid var(--sc-purple-icon-b); color: var(--sc-purple-icon-c); }
.stat-sub { font-size: var(--text-xs); font-weight: 700; letter-spacing: .5px; margin-block-end: 6px; }
.sc-blue .stat-sub { color: var(--sc-blue-label); } .sc-green .stat-sub { color: var(--sc-green-label); }
.sc-amber .stat-sub { color: var(--sc-amber-label); } .sc-purple .stat-sub { color: var(--sc-purple-label); }
.stat-val { font-size: 30px; font-weight: 800; line-height: 1; margin-block-end: 10px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.sc-blue .stat-val { color: var(--sc-blue-val); } .sc-green .stat-val { color: var(--sc-green-val); }
.sc-amber .stat-val { color: var(--sc-amber-val); } .sc-purple .stat-val { color: var(--sc-purple-val); }
.stat-chg { font-size: var(--text-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.stat-chg svg { width: 13px; height: 13px; }
.stat-chg.up   { color: var(--success-text); }
.stat-chg.down { color: var(--danger-text); }
.stat-chg.flat { color: var(--text-muted); }
.stat-chg .vs { color: var(--text-muted); font-weight: 500; }
.stat-card .stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.stat-card .stat-val small { font-size: .5em; font-weight: 700; letter-spacing: 0; opacity: .75; margin-inline-start: 4px; }
.stat-card.sc-compact { padding: 16px; }
.stat-card.sc-compact .stat-icon-box { width: 36px; height: 36px; margin-block-end: 0; }
.stat-card.sc-compact .stat-val { font-size: 24px; margin-block-end: 6px; }
.stat-card .progress { margin-block-start: var(--space-3); }

/* ═══════════════════════════════════════════════════════════════
   PROGRESS
═══════════════════════════════════════════════════════════════ */
.progress { height: 6px; background: var(--border-subtle); border-radius: var(--radius-full); overflow: hidden; position: relative; }
.progress-lg { height: 10px; }
.progress-fill { height: 100%; border-radius: var(--radius-full); position: relative; overflow: hidden; transition: width .8s var(--ease-standard); }
.progress-sm { height: 4px; }
[dir="rtl"] .progress-static /* Gradient runs from the start edge → end edge in both directions */
:root { --pf-dir: 90deg; }
[dir="rtl"] { --pf-dir: 270deg; }
[dir="ltr"] { --pf-dir: 90deg; }
.progress-fill, .pf-blue { background: var(--accent); }
.pf-green  { background: var(--success); }
.pf-amber  { background: var(--warning); }
.pf-purple { background: var(--purple); }
.pf-red    { background: var(--danger); }
.pf-cyan   { background: var(--info); }
.progress-indeterminate .progress-fill { width: 35% !important; animation: hl-indet 1.3s var(--ease-standard) infinite; }
@keyframes hl-indet { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
[dir="rtl"] .progress-indeterminate .progress-fill { animation-name: hl-indet-rtl; }
@keyframes hl-indet-rtl { from { transform: translateX(120%); } to { transform: translateX(-320%); } }
.progress-meta { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); margin-block-end: 6px; }
.progress-meta b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.progress-meta .over { color: var(--danger-text); }
.progress-hint { font-size: var(--text-xs); color: var(--text-muted); margin-block-start: 6px; }

/* Segmented progress (multi-part budget bar) */
.progress-stack { display: flex; height: 10px; border-radius: var(--radius-full); overflow: hidden; gap: 2px; background: var(--border-subtle); }
.progress-stack > span { height: 100%; flex-shrink: 0; transition: width .8s var(--ease-standard); }
.progress-stack > span:last-child { border-start-end-radius: var(--radius-full); border-end-end-radius: var(--radius-full); }
.progress-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-block-start: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.progress-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.progress-legend b { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 700; }
.progress-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.progress-legend i.rest { background: var(--border-soft); }

/* Steps progress (discrete segments, e.g. 3 of 5 deliverables) */
.progress-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.progress-steps > span { height: 6px; border-radius: var(--radius-full); background: var(--border-subtle); }
.progress-steps > span.done { background: var(--success); }
.progress-steps > span.current { background: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════════════════ */
.table-wrap { position: relative; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-card); overflow: hidden; }
.table-scroll { overflow: auto; max-height: var(--table-max-h, none); overscroll-behavior-x: contain; }
.table-scroll > .table { min-width: var(--table-min-w, 640px); }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: 14px 16px; border-block-end: 1px solid var(--border-subtle); }
.table-toolbar .toolbar-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.table-toolbar .toolbar-group { margin-inline-start: auto; }
.table-toolbar .input-wrap { width: 230px; max-width: 100%; }
@media (max-width: 640px) { .table-toolbar .toolbar-group, .table-toolbar .input-wrap { width: 100%; } .table-toolbar .input-wrap { flex: 1 1 100%; } }
.table-title { font-size: var(--text-md); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.table-title .badge { font-weight: 700; }
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  position: sticky; inset-block-start: 0; z-index: 1;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .4px; color: var(--text-muted);
  padding: 11px 16px; text-align: start; background: var(--bg-overlay);
  border-block-end: 1px solid var(--border-subtle); white-space: nowrap;
}
/* Sortable header — th[aria-sort="none|ascending|descending"]; indicator is CSS-only */
.table th[aria-sort] { cursor: pointer; user-select: none; transition: color var(--transition-fast); }
.table th[aria-sort]:hover { color: var(--text-primary); }
.table th[aria-sort]::after {
  content: ''; display: inline-block; width: 10px; height: 12px; margin-inline-start: 6px; vertical-align: -1px;
  background: currentColor; opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 0 9 4.5H1zM5 12 1 7.5h8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 0 9 4.5H1zM5 12 1 7.5h8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.table th[aria-sort="ascending"], .table th[aria-sort="descending"] { color: var(--accent-text); }
.table th[aria-sort="ascending"]::after, .table th[aria-sort="descending"]::after {
  opacity: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 2 9 7H1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 2 9 7H1z'/%3E%3C/svg%3E");
}
.table th[aria-sort="descending"]::after { transform: rotate(180deg); }
.table th[aria-sort]:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-light); border-radius: 0; }
.table th.num[aria-sort] { text-align: end; }
.table tbody tr { border-block-end: 1px solid var(--border-subtle); transition: background-color var(--transition-fast); }
.table tbody tr:last-child { border-block-end: 0; }
.table tbody tr:hover { background: var(--bg-input-hover); }
.table tbody tr[aria-selected="true"] { background: var(--accent-glow-md); }
.table td { padding: 12px 16px; font-size: var(--text-base-sm); color: var(--text-secondary); vertical-align: middle; }
.table td.td-primary, .table td .td-primary { color: var(--text-primary); font-weight: 600; }
.table td .td-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; margin-block-start: 1px; }
.table td.td-muted { color: var(--text-muted); font-size: var(--text-sm); }
.table td.nowrap, .table th.nowrap { white-space: nowrap; }
.table td.num, .table th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.num { color: var(--text-primary); font-weight: 600; }
.table .col-check { width: 44px; padding-inline-end: 0; }
.table .col-actions { width: 1%; white-space: nowrap; text-align: end; }
.table .hl-checkbox { vertical-align: middle; }
.table-compact td { padding-block: 8px; }
.table-compact thead th { padding-block: 9px; }
.table-striped tbody tr:nth-child(even) { background: var(--mode-badge-bg); }
.table-striped tbody tr:nth-child(even):hover { background: var(--bg-input-hover); }
.table-bordered td + td, .table-bordered th + th { border-inline-start: 1px solid var(--border-subtle); }
.table tfoot td { padding: 12px 16px; font-size: var(--text-base-sm); font-weight: 700; color: var(--text-primary); background: var(--bg-overlay); border-block-start: 1px solid var(--border-soft); }
.table tfoot td.num { color: var(--accent-text); }
.table-scroll .table tfoot td { position: sticky; inset-block-end: 0; z-index: 1; }
.table-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: 10px 16px; border-block-start: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); }
.table-foot b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Bulk action bar — appears when rows selected (table[data-selectable="barId"]) */
.bulk-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: 8px 16px; min-height: 52px;
  background: var(--accent-glow-md); border-block-end: 1px solid var(--border-accent);
  font-size: var(--text-base-sm); font-weight: 600; color: var(--accent-text);
  animation: hl-fade .2s ease;
}
.bulk-bar .bulk-count { margin-inline-end: auto; display: inline-flex; align-items: center; gap: 8px; }
.bulk-bar [data-count] { font-variant-numeric: tabular-nums; }
.bulk-bar[hidden] { display: none; }

/* Row actions */
.row-actions { display: inline-flex; gap: 2px; opacity: .6; transition: opacity var(--transition-fast); }
.table tbody tr:hover .row-actions, .row-actions:focus-within { opacity: 1; }
@media (hover: none) { .row-actions { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════
   AVATAR
═══════════════════════════════════════════════════════════════ */
.avatar {
  position: relative; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--text-on-accent); overflow: visible; line-height: 1; user-select: none;
  border: 1px solid var(--border-soft); background: var(--bg-overlay); color: var(--text-secondary);
}
a.avatar, button.avatar { cursor: pointer; text-decoration: none; }
.avatar:focus-visible { border-radius: 50%; }
.avatar.av-square:focus-visible { border-radius: var(--radius-md); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
img.avatar { object-fit: cover; background: var(--bg-overlay); }
.avatar svg { width: 45%; height: 45%; }
.av-xs { width: 22px; height: 22px; font-size: 9px; }
.av-sm { width: 28px; height: 28px; font-size: 10px; }
.av-md { width: 36px; height: 36px; font-size: 13px; }
.av-lg { width: 48px; height: 48px; font-size: 17px; }
.av-xl { width: 64px; height: 64px; font-size: 22px; }
.av-square { border-radius: var(--radius-md); }
.av-square img { border-radius: inherit; }
/* legacy colour classes → same neutral tint */
.av-blue, .av-green, .av-amber, .av-purple, .av-cyan, .av-rose { background: var(--bg-overlay); color: var(--text-secondary); }
.av-soft { background: var(--accent-glow); color: var(--accent-text); border-color: var(--border-accent); }
.av-status { position: absolute; inset-block-end: -1px; inset-inline-end: -1px; width: 30%; height: 30%; min-width: 8px; min-height: 8px; max-width: 14px; max-height: 14px; border-radius: 50%; border: 2px solid var(--av-ring, var(--bg-surface)); background: var(--text-muted); }
.av-status.online { background: var(--success); }
.av-status.busy { background: var(--danger); }
.av-status.away { background: var(--warning); }
.av-group { display: inline-flex; align-items: center; }
.av-group > .avatar { border: 2px solid var(--av-ring, var(--bg-surface)); transition: transform var(--transition-fast); }
.av-group > .avatar + .avatar { margin-inline-start: -8px; }
.av-group > .av-lg + .av-lg, .av-group > .av-xl + .av-xl { margin-inline-start: -12px; }
.av-more { background: var(--bg-overlay); color: var(--text-secondary); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.av-group > .av-sm.av-more, .av-group > .av-xs.av-more { font-size: 9px; }
.user-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-row > .u-meta, .user-row > div:not(.avatar) { min-width: 0; }
.u-name { font-size: var(--text-base-sm); font-weight: 600; color: var(--text-primary); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-role { font-size: var(--text-xs); color: var(--text-muted); margin-block-start: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   ALERT / BANNER (inline, persistent — vs toast which is transient)
═══════════════════════════════════════════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px 16px;
  border-radius: var(--radius-lg); border: 1px solid;
  font-size: var(--text-base-sm); line-height: 1.6;
}
.alert > svg, .alert-ico { width: 18px; height: 18px; flex-shrink: 0; margin-block-start: 1px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 700; font-size: var(--text-base); margin-block-end: 2px; color: inherit; }
.alert-msg { color: var(--text-secondary); }
.alert-msg b, .alert-msg strong { color: var(--text-primary); }
.alert-msg ul { padding-inline-start: 18px; margin-block-start: 4px; }
.alert-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }
.alert-sm { padding: 10px 12px; font-size: var(--text-sm); border-radius: var(--radius-md); align-items: center; }
.alert-sm > svg { width: 16px; height: 16px; margin: 0; }
.alert.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.alert-close { width: 26px; height: 26px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: .6; flex-shrink: 0; }
.alert-close:hover, .alert-close:focus-visible { opacity: 1; background: var(--mode-badge-bg); }
.alert-close svg { width: 14px; height: 14px; }
.alert-info    { background: var(--accent-glow-md); border-color: var(--border-accent); color: var(--accent-text); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }

.banner {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; position: relative;
  padding: 10px var(--space-10); font-size: var(--text-base-sm); font-weight: 600; text-align: center;
  background: var(--accent); color: var(--text-on-accent);
}
.banner > svg { width: 16px; height: 16px; flex-shrink: 0; }
.banner a { color: var(--text-on-accent); text-underline-offset: 3px; font-weight: 700; }
.banner .btn { height: 26px; padding-inline: 10px; font-size: var(--text-sm); background: rgba(255,255,255,0.16); color: var(--text-on-accent); border-color: rgba(255,255,255,0.3); }
.banner .btn:hover { background: rgba(255,255,255,0.26); }
.banner .alert-close { position: absolute; inset-inline-end: var(--space-2); inset-block-start: 50%; transform: translateY(-50%); color: var(--text-on-accent); }
.banner .alert-close:hover { background: rgba(255,255,255,0.16); }
.banner-warning { background: var(--warning-bg); color: var(--warning-text); border-block: 1px solid var(--warning-border); }
.banner-danger  { background: var(--danger-bg);  color: var(--danger-text);  border-block: 1px solid var(--danger-border); }
.banner-warning a, .banner-danger a, .banner-warning .alert-close, .banner-danger .alert-close { color: inherit; }
.banner-warning .alert-close:hover, .banner-danger .alert-close:hover { background: var(--mode-badge-bg); }
.banner-warning .btn, .banner-danger .btn { background: transparent; color: inherit; border-color: currentColor; }
.banner-warning .btn:hover, .banner-danger .btn:hover { background: var(--mode-badge-bg); }

/* ═══════════════════════════════════════════════════════════════
   TOAST — transient; mount in .toast-region (aria-live="polite")
═══════════════════════════════════════════════════════════════ */
.toast-region, .toast-container {
  position: fixed; z-index: var(--z-toast); inset-block-start: var(--space-4); inset-inline-end: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px 16px; pointer-events: auto;
  border-radius: var(--radius-lg); border: 1px solid; max-width: 400px;
  background-color: var(--bg-elevated); box-shadow: var(--shadow-lg);
  animation: hl-toast-in .35s var(--ease-emphasized);
  position: relative; overflow: hidden;
}
.toast.hiding { animation: hl-toast-out .25s var(--ease-standard) forwards; }
.toast-static { animation: none; max-width: none; }   /* docs / inline previews */
.toast-stack { display: flex; flex-direction: column; gap: var(--space-2); width: min(400px, 100%); }
@keyframes hl-toast-in  { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes hl-toast-out { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
.toast-ico, .toast-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-block-start: 1px; }
.toast-ico svg, .toast-icon svg { width: 12px; height: 12px; stroke-width: 3; }
.toast-action { display: inline-flex; margin-block-start: 6px; font-size: var(--text-sm); font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; border-radius: var(--radius-xs); }
.toast-body { flex: 1; min-width: 0; }
.toast-ttl { font-size: var(--text-base-sm); font-weight: 700; margin-block-end: 2px; }
.toast-msg { font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
.toast-x, .toast-close { width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-x:hover, .toast-close:hover { color: var(--text-primary); background: var(--mode-badge-bg); }
.toast-x svg, .toast-close svg { width: 14px; height: 14px; }
.toast-timer { position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 2px; width: 100%; background: currentColor; opacity: .5; transform-origin: left; animation: hl-timer var(--toast-dur, 5s) linear forwards; }
[dir="rtl"] .toast-timer { transform-origin: right; }
[dir="ltr"] .toast-timer { transform-origin: left; }
@keyframes hl-timer { to { transform: scaleX(0); } }
.t-ok, .toast-success { background-image: linear-gradient(var(--success-bg), var(--success-bg)); border-color: var(--success-border); color: var(--success-text); }
.t-err, .toast-error { background-image: linear-gradient(var(--danger-bg), var(--danger-bg));   border-color: var(--danger-border);  color: var(--danger-text); }
.t-warn, .toast-warning { background-image: linear-gradient(var(--warning-bg), var(--warning-bg)); border-color: var(--warning-border); color: var(--warning-text); }
.t-info, .toast-info { background-image: linear-gradient(var(--accent-glow-md), var(--accent-glow-md)); border-color: var(--border-accent); color: var(--accent-text); }
.toast .toast-ttl { color: inherit; }
.t-ok .toast-ico, .toast-success .toast-icon { background: var(--success); color: var(--text-on-accent); }
.t-err .toast-ico, .toast-error .toast-icon { background: var(--danger); color: var(--text-on-accent); }
.t-warn .toast-ico, .toast-warning .toast-icon { background: var(--warning); color: var(--text-on-accent); }
.t-info .toast-ico, .toast-info .toast-icon { background: var(--accent); color: var(--text-on-accent); }
@media (max-width: 480px) { .toast-region { inset-inline: var(--space-3); width: auto; } }

/* ═══════════════════════════════════════════════════════════════
   TABS — role="tablist" > button role="tab" aria-selected
═══════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: 2px; padding: 3px; width: fit-content; max-width: 100%; overflow-x: auto; background: var(--mode-badge-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary); white-space: nowrap;
  transition: var(--transition-fast);
}
.tab svg { width: 15px; height: 15px; }
.tab:hover { color: var(--text-primary); }
.tab:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-light); }
.tab .badge-count { font-size: var(--text-2xs); }
.tab.on, .tab[aria-selected="true"] { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-soft); box-shadow: var(--shadow-sm); }
.tab .badge-count { background: var(--mode-badge-bg); color: var(--text-secondary); }
.tab[aria-selected="true"] .badge-count, .tab.on .badge-count { background: var(--accent); color: var(--text-on-accent); box-shadow: none; }
.tabs-block { width: 100%; }
.tabs-block > .tab { flex: 1; justify-content: center; }

/* Underline tabs (inset shadow = baseline so the 2px indicator isn't clipped by overflow) */
.tabs-line { background: transparent; border: 0; box-shadow: inset 0 -1px 0 var(--border-soft); border-radius: 0; padding: 0; gap: var(--space-1); width: 100%; }
.tabs-line .tab { border-radius: 0; padding: 10px 14px; border: 0; border-block-end: 2px solid transparent; }
.tabs-line .tab:hover { border-block-end-color: var(--border-medium); }
.tabs-line .tab.on, .tabs-line .tab[aria-selected="true"] { background: transparent; box-shadow: none; color: var(--accent-text); border-block-end-color: var(--accent); }

/* Pill tabs */
.tabs-pill { background: transparent; border: 0; padding: 0; gap: 6px; }
.tabs-pill .tab { border-radius: var(--radius-full); }
.tabs-pill .tab:hover { background: var(--mode-badge-bg); }
.tabs-pill .tab.on, .tabs-pill .tab[aria-selected="true"] { background: var(--accent-glow); color: var(--accent-text); border-color: var(--border-accent); box-shadow: none; }

/* Colored semantic variants (line + pill) */
.tabs-line .tab[aria-selected="true"].tab-green, .tabs-line .tab.on.tab-green { color: var(--success-text); border-block-end-color: var(--success); }
.tabs-line .tab[aria-selected="true"].tab-amber, .tabs-line .tab.on.tab-amber { color: var(--warning-text); border-block-end-color: var(--warning); }
.tabs-line .tab[aria-selected="true"].tab-red,   .tabs-line .tab.on.tab-red   { color: var(--danger-text);  border-block-end-color: var(--danger); }
.tabs-line .tab[aria-selected="true"].tab-purple,.tabs-line .tab.on.tab-purple{ color: var(--purple-text);  border-block-end-color: var(--purple); }
.tabs-pill .tab[aria-selected="true"].tab-green, .tabs-pill .tab.on.tab-green { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.tabs-pill .tab[aria-selected="true"].tab-amber, .tabs-pill .tab.on.tab-amber { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.tabs-pill .tab[aria-selected="true"].tab-red,   .tabs-pill .tab.on.tab-red   { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-border); }
.tabs-pill .tab[aria-selected="true"].tab-purple,.tabs-pill .tab.on.tab-purple{ background: var(--purple-bg);  color: var(--purple-text);  border-color: var(--purple-border); }
.tab-panel { padding-block-start: var(--space-4); }
.tab-panel[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════
   OVERLAYS — modal (<dialog class="modal">) & drawer
═══════════════════════════════════════════════════════════════ */
.modal-bg {   /* static preview wrapper for docs */
  background: var(--bg-scrim); border-radius: var(--radius-xl);
  padding: 36px; display: flex; align-items: center; justify-content: center; min-height: 280px;
}
.modal {
  width: min(100% - 32px, var(--modal-w, 480px)); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-soft); border-radius: var(--radius-xl);
  padding: 26px; box-shadow: var(--shadow-xl); position: relative;
}
dialog.modal { margin: auto; inset: 0; position: fixed; }
dialog.modal[open] { animation: hl-modal-in .3s var(--ease-emphasized); }
dialog.modal::backdrop { background: var(--bg-scrim); animation: hl-fade .25s ease; }
@keyframes hl-modal-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes hl-fade { from { opacity: 0; } }
.modal { overscroll-behavior: contain; }
.modal-sm { --modal-w: 400px; } .modal-lg { --modal-w: 680px; } .modal-xl { --modal-w: 920px; }
.modal-body { font-size: var(--text-base-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.modal-body > p + p { margin-block-start: var(--space-2); }
.modal-hdr-main { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.modal-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-block-end: 18px; }
.modal-ttl { font-size: var(--text-lg); font-weight: 700; }
.modal-sub { font-size: var(--text-base-sm); color: var(--text-secondary); margin-block-start: 3px; }
.modal-close {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--mode-badge-bg); border: 1px solid var(--border-subtle);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
  transition: var(--transition-fast);
}
.modal-close:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-soft); }
.modal-close svg { width: 15px; height: 15px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); padding-block-start: 18px; border-block-start: 1px solid var(--border-subtle); }
.modal-foot .modal-foot-start { margin-inline-end: auto; }
.modal-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-block-end: var(--space-4); flex-shrink: 0; }
.modal-icon svg { width: 22px; height: 22px; }
.modal-icon.ci-red    { box-shadow: 0 0 0 6px var(--danger-bg); }
.modal-icon.ci-amber  { box-shadow: 0 0 0 6px var(--warning-bg); }
.modal-icon.ci-green  { box-shadow: 0 0 0 6px var(--success-bg); }
.modal-icon.ci-blue   { box-shadow: 0 0 0 6px var(--accent-glow-md); }
.modal-confirm { text-align: center; }
.modal-confirm .modal-icon { margin-inline: auto; }
.modal-confirm .modal-ttl { margin-block-end: 6px; }
.modal-confirm .modal-body { max-width: 34ch; margin-inline: auto; }
.modal-confirm .modal-foot { justify-content: center; border: 0; padding-block-start: 0; }
.modal-confirm .modal-foot > .btn { flex: 1; }
.modal-confirm > .modal-close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
@media (max-width: 480px) {
  .modal { padding: 20px; }
  .modal-foot > .btn { flex: 1; }
}

.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; margin: 0; padding: 0; z-index: var(--z-drawer);
  width: min(100vw, var(--drawer-w, 440px)); height: 100vh; height: 100dvh; max-height: none; max-width: none;
  display: flex; flex-direction: column;
  background: var(--bg-elevated); color: var(--text-primary);
  border: 0; border-inline-start: 1px solid var(--border-soft); box-shadow: var(--shadow-xl);
}
dialog.drawer:not([open]) { display: none; }
dialog.drawer[open] { animation: hl-drawer-in .35s var(--ease-emphasized); }
[dir="rtl"] dialog.drawer[open] { animation-name: hl-drawer-in-rtl; }
dialog.drawer::backdrop { background: var(--bg-scrim); animation: hl-fade .25s ease; }
@keyframes hl-drawer-in     { from { transform: translateX(100%); } }
@keyframes hl-drawer-in-rtl { from { transform: translateX(-100%); } }
.drawer-sm { --drawer-w: 360px; } .drawer-lg { --drawer-w: 620px; }
.drawer-hdr { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 16px 20px; border-block-end: 1px solid var(--border-subtle); flex-shrink: 0; }
.drawer-hdr .modal-ttl { font-size: var(--text-md); }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 20px; overscroll-behavior: contain; }
.drawer-foot { display: flex; gap: var(--space-2); justify-content: flex-end; padding: 14px 20px; border-block-start: 1px solid var(--border-subtle); background: var(--bg-overlay); flex-shrink: 0; }
.drawer-foot > .btn:first-child:not(:only-child) { margin-inline-end: auto; }
.drawer-section + .drawer-section { margin-block-start: var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border-subtle); }
.drawer-section-title { font-size: var(--text-xs); font-weight: 800;  color: var(--text-muted); margin-block-end: var(--space-3); }
/* Static preview (docs, onboarding illustrations) — .drawer.drawer-preview inside .modal-bg.drawer-stage */
.drawer.drawer-preview { position: relative; inset: auto; z-index: auto; height: 420px; width: 100%; max-width: 380px; animation: none; }
.modal-bg.drawer-stage { justify-content: flex-end; align-items: stretch; padding: 0; overflow: hidden; min-height: 420px; }

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP — [data-tip] + .tooltip wrapper. Position: tip-top|bottom|start|end
═══════════════════════════════════════════════════════════════ */
.tooltip { position: relative; display: inline-flex; }
.tooltip::before {
  content: attr(data-tip); position: absolute; z-index: var(--z-tooltip); pointer-events: none;
  padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600; line-height: 1.4; font-family: var(--font-main);
  color: var(--text-primary); background: var(--bg-elevated);
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translate(-50%, 4px);
}
[dir="rtl"] .tooltip::before { transform: translate(50%, 4px); }
.tooltip:hover::before, .tooltip:focus-within::before { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
[dir="rtl"] .tooltip:hover::before, [dir="rtl"] .tooltip:focus-within::before { transform: translate(50%, 0); }
.tooltip.tip-bottom::before { inset-block-end: auto; inset-block-start: calc(100% + 8px); transform: translate(-50%, -4px); }
[dir="rtl"] .tooltip.tip-bottom::before { transform: translate(50%, -4px); }
.tooltip.tip-start::before, .tooltip.tip-end::before { inset-block-end: auto; inset-block-start: 50%; transform: translateY(-50%); }
.tooltip.tip-start::before { inset-inline-start: auto; inset-inline-end: calc(100% + 8px); }
.tooltip.tip-end::before { inset-inline-start: calc(100% + 8px); }
[dir] .tooltip.tip-start:hover::before, [dir] .tooltip.tip-end:hover::before,
[dir] .tooltip.tip-start:focus-within::before, [dir] .tooltip.tip-end:focus-within::before { transform: translateY(-50%); }
.tooltip.tip-multiline::before { white-space: normal; width: max-content; max-width: 240px; text-align: start; font-weight: 500; }
.tooltip.tip-kbd::before { content: attr(data-tip) "  ·  " attr(data-kbd); }
/* Esc dismisses (WCAG 1.4.13) — hl.js adds .tip-off until pointer/focus leaves */
.tooltip.tip-off::before { opacity: 0 !important; visibility: hidden !important; }
.tooltip-text { text-decoration: underline dotted var(--text-muted); text-underline-offset: 4px; cursor: help; border-radius: var(--radius-xs); }

/* ═══════════════════════════════════════════════════════════════
   SKELETON — loading placeholders (aria-busy="true" on container)
═══════════════════════════════════════════════════════════════ */
.skel {
  display: block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-hi) 50%, var(--bg-skeleton) 75%);
  background-size: 200% 100%; animation: hl-skel 1.4s ease-in-out infinite;
}
@keyframes hl-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-text { height: 10px; margin-block: 6px; }
.skel-title { height: 16px; width: 55%; }
.skel-circle { border-radius: 50%; }
.skel-btn { height: var(--control-md); width: 110px; border-radius: var(--radius-md); }
.skel-card { height: 120px; border-radius: var(--radius-lg); }
.skel-badge { height: 20px; width: 64px; border-radius: var(--radius-full); }
.skel-input { height: var(--control-md); border-radius: var(--radius-md); }
.skel-img { aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.skel-text.w-90 { width: 90%; } .skel-text.w-75 { width: 75%; } .skel-text.w-60 { width: 60%; } .skel-text.w-40 { width: 40%; } .skel-text.w-25 { width: 25%; }
.skel-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
[aria-busy="true"] { cursor: progress; }

/* ═══════════════════════════════════════════════════════════════
   EMPTY / DESCRIPTION LIST / MISC
═══════════════════════════════════════════════════════════════ */
.dl { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 10px var(--space-6); font-size: var(--text-base-sm); }
.dl dt { color: var(--text-muted); font-weight: 600; }
.dl dd { color: var(--text-primary); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.dl-divided { gap: 0 var(--space-6); }
.dl-divided dt, .dl-divided dd { padding-block: 10px; border-block-end: 1px solid var(--border-subtle); }
.dl-divided dt:last-of-type, .dl-divided dd:last-of-type { border-block-end: 0; }
.dl-stacked { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
.dl-stacked > div { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 480px) { .dl:not(.dl-stacked) { grid-template-columns: 1fr; gap: 2px; } .dl:not(.dl-stacked) dd { margin-block-end: 8px; } .dl-divided dt { border: 0; padding-block-end: 0; } }
.kbd-combo { display: inline-flex; align-items: center; gap: 3px; direction: ltr; }
.kbd-sm { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }

.link { color: var(--accent-text); text-decoration: none; font-weight: 600; border-radius: var(--radius-xs); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green { background: var(--success); } .dot-amber { background: var(--warning); }
.dot-red { background: var(--danger); } .dot-blue { background: var(--accent); } .dot-gray { background: var(--text-muted); }
.dot-purple { background: var(--purple); } .dot-cyan { background: var(--info); }
.dot-sm { width: 6px; height: 6px; }
.dot-pulse { box-shadow: 0 0 0 0 currentColor; animation: hl-pulse 1.8s infinite; color: var(--accent-glow); }
.dot-green.dot-pulse { color: var(--success-border); }
.dot-red.dot-pulse { color: var(--danger-border); }
.dot-amber.dot-pulse { color: var(--warning-border); }
@keyframes hl-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Scroll reveal (opt-in, respects reduced motion via global rule) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Brand logo — SVG w/ currentColor, auto-themed */
.hl-logo { display: inline-block; height: var(--logo-h, 32px); aspect-ratio: 1122 / 747; background: currentColor; color: var(--text-primary);
  -webkit-mask: url('assets/hl-logo.svg') center / contain no-repeat; mask: url('assets/hl-logo.svg') center / contain no-repeat; }
[data-theme="light"] .hl-logo { color: var(--brand-navy); }
.hl-logo.on-accent { color: var(--text-on-accent); }
.ci-neutral { background: var(--bg-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle); }

/* ═══════════════════════════════════════════════════════════════
   GLASS — translucent surface for things that float over scrolling
   or varied content (sticky bars, overlays, labels on media).
   Never on static cards over a flat background. Falls back to solid.
═══════════════════════════════════════════════════════════════ */
.glass,
.app-layout.is-fixed .main-content > .header-bar,
.form-actions.sticky,
.table-scroll .table thead th,
.card-media > .badge {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(var(--glass-blur));
  backdrop-filter: saturate(1.4) blur(var(--glass-blur));
}
.glass { border: 1px solid var(--glass-border); }
dialog.modal::backdrop, dialog.drawer::backdrop, .modal-bg {
  -webkit-backdrop-filter: blur(var(--scrim-blur)); backdrop-filter: blur(var(--scrim-blur));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .app-layout.is-fixed .main-content > .header-bar, .form-actions.sticky, .table-scroll .table thead th, .card-media > .badge { background: var(--bg-elevated); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .app-layout.is-fixed .main-content > .header-bar, .form-actions.sticky, .table-scroll .table thead th, .card-media > .badge {
    background: var(--bg-elevated); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  dialog.modal::backdrop, dialog.drawer::backdrop, .modal-bg { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HALF LENS DESIGN SYSTEM v4 — PATTERNS
   Navigation + composite patterns:
   sidebar · header bar · breadcrumb · pagination · stepper ·
   menu/dropdown · accordion · popover · command palette · timeline ·
   empty state · notification center · slider · file upload · date picker
   Rules: tokens only · logical properties · :focus-visible · [hidden] respected.
   Legacy v3 / admin-panel class names are kept as aliases (marked "legacy").
═══════════════════════════════════════════════════════════════ */

/* Components below set `display`, which beats the UA [hidden] rule — restore it. */
.menu[hidden], .dropdown-menu[hidden], .actions-dropdown[hidden], .popover[hidden],
.acc-panel[hidden], .cmd-item[hidden], .cmd-group[hidden], .cmd-empty[hidden],
.notif-item[hidden], .notif-empty[hidden], .upload-file[hidden], .sb-sub[hidden],
[data-notif-count][hidden] { display: none !important; }

@keyframes hl-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes hl-pop-in-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes hl-slide-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes hl-ring { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — <aside class="sidebar"> · .sb-item[aria-current="page"]
   Legacy: .sb-wrap (preview card), .sb-item.on, .sb-hl-logo, .sb-logo*, .sb-user-profile
═══════════════════════════════════════════════════════════════ */
.sidebar, .sb-wrap {
  --sb-w: 248px; --sb-w-collapsed: 68px;
  position: relative; display: flex; flex-direction: column; gap: 2px;
  width: var(--sb-w); max-width: 100%; flex-shrink: 0;
  padding: var(--space-5) var(--space-3);
  background: var(--bg-sidebar); border-inline-end: 1px solid var(--border-subtle);
  overflow-x: hidden; overflow-y: auto;
  transition: width var(--dur-normal) var(--ease-standard), padding var(--dur-normal) var(--ease-standard);
}
/* Framed preview card (docs, settings pages, modals) */
.sb-wrap, .sidebar-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
/* App-shell: pin to the viewport edge (admin-panel behaviour) */
.sidebar-fixed { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-sticky); }

.sb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 2px 6px var(--space-5); }
.sb-head .hl-logo { --logo-h: 30px; }
.sb-hl-logo { padding: 8px 10px 18px; }                                   /* legacy */
.sb-logo-img { display: block; width: 120px; height: auto; }              /* legacy */
.sb-logo { display: flex; align-items: center; gap: 10px; padding-inline: 8px; margin-block-end: var(--space-6); }
.sb-logo-mark {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; color: var(--text-on-accent);
  background: var(--accent);
}
.sb-logo-mark svg { width: 18px; height: 18px; }
.sb-logo-text { font-size: var(--text-md); font-weight: 800; line-height: 1.2; color: var(--text-primary); }
.sb-logo-text small { display: block; font-size: var(--text-2xs); font-weight: 600;  color: var(--text-muted); }

.sb-collapse, .sb-collapse-btn {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); border: 1px solid var(--border-soft); background: var(--bg-input);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.sb-collapse:hover, .sb-collapse-btn:hover { color: var(--text-on-accent); background: var(--accent); border-color: var(--accent); }
.sb-collapse svg, .sb-collapse-btn svg { width: 15px; height: 15px; transition: transform var(--transition-normal); }

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-grp {
  font-size: var(--text-2xs); font-weight: 700; 
  color: var(--text-muted); padding-inline: 10px; margin-block: var(--space-4) 6px; white-space: nowrap;
}
.sb-grp:first-child { margin-block-start: 0; }

.sb-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px;
  padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary);
  text-decoration: none; text-align: start; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.sb-item:hover { background: var(--mode-badge-bg); color: var(--text-primary); }
.sb-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .75; stroke-width: 1.9; }
.sb-item:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.sb-item.on, .sb-item[aria-current="page"] { background: var(--accent-glow); color: var(--accent-text); border-color: var(--accent-glow-md); }
.sb-item.on svg, .sb-item[aria-current="page"] svg { opacity: 1; }
.sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-badge {
  margin-inline-start: auto; min-width: 20px; height: 18px; padding-inline: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--accent-text); background: var(--accent-glow); border-radius: var(--radius-full);
}
.sb-badge.warn   { color: var(--warning-text); background: var(--warning-bg); }
.sb-badge.danger { color: var(--text-on-accent); background: var(--danger); }
.sb-badge.muted  { color: var(--text-muted); background: var(--mode-badge-bg); }
.sb-chev { width: 14px !important; height: 14px !important; margin-inline-start: auto; opacity: .6; transition: transform var(--transition-normal); }
.sb-badge + .sb-chev { margin-inline-start: 0; }
.sb-item[aria-expanded="true"] .sb-chev { transform: rotate(180deg); }

/* nested group */
.sb-sub { display: flex; flex-direction: column; gap: 1px; margin-inline-start: 18px; padding-inline-start: 10px; border-inline-start: 1px solid var(--border-soft); margin-block: 2px 4px; }
.sb-sub .sb-item { min-height: 32px; padding-block: 6px; font-size: var(--text-sm); font-weight: 500; }
.sb-sub .sb-item.on, .sb-sub .sb-item[aria-current="page"] { background: transparent; border-color: transparent; }

.sb-spacer { flex: 1; min-height: var(--space-4); }
.sb-bottom { display: flex; flex-direction: column; gap: 4px; margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--border-subtle); }
.sb-spacer + .sb-bottom { margin-block-start: 0; }
.sb-user-profile, .sb-user {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-block-start: 4px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md); text-align: start; cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.sb-user-profile:hover, .sb-user:hover { background: var(--mode-badge-bg); border-color: var(--border-medium); }
.sb-user-meta { flex: 1; min-width: 0; line-height: 1.3; }
.sb-user-meta > * { display: block; }
.sb-user-meta .u-name, .sb-user-meta .u-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user > svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.sb-logout, .sb-item.sb-logout { color: var(--danger-text); }
.sb-logout:hover, .sb-item.sb-logout:hover { background: var(--danger-bg); color: var(--danger-text); }

/* Collapsed rail — .collapsed (legacy) or .is-collapsed */
.sidebar.collapsed, .sidebar.is-collapsed { width: var(--sb-w-collapsed); padding-inline: var(--space-2); overflow: visible; }
.sidebar.collapsed .sb-head, .sidebar.is-collapsed .sb-head { flex-direction: column; padding-inline: 0; gap: var(--space-3); }
.sidebar.collapsed .sb-head .hl-logo, .sidebar.is-collapsed .sb-head .hl-logo { --logo-h: 26px; }
.sidebar.collapsed .sb-collapse svg, .sidebar.is-collapsed .sb-collapse svg { transform: scaleX(-1); }
[dir="rtl"] .sidebar.collapsed .sb-collapse svg, [dir="rtl"] .sidebar.is-collapsed .sb-collapse svg { transform: none; }
.sidebar.collapsed .sb-item, .sidebar.is-collapsed .sb-item { justify-content: center; padding: 10px; gap: 0; font-size: 0; }
.sidebar.collapsed .sb-item svg, .sidebar.is-collapsed .sb-item svg { width: 18px; height: 18px; }
.sidebar.collapsed .sb-label, .sidebar.is-collapsed .sb-label,
.sidebar.collapsed .sb-chev, .sidebar.is-collapsed .sb-chev,
.sidebar.collapsed .sb-sub, .sidebar.is-collapsed .sb-sub,
.sidebar.collapsed .sb-user-meta, .sidebar.is-collapsed .sb-user-meta,
.sidebar.collapsed .sb-user > svg, .sidebar.is-collapsed .sb-user > svg,
.sidebar.collapsed .sb-user-profile > div:first-child { display: none; }
.sidebar.collapsed .sb-grp, .sidebar.is-collapsed .sb-grp { height: 1px; margin: var(--space-3) 10px; padding: 0; font-size: 0; background: var(--border-subtle); }
.sidebar.collapsed .sb-badge, .sidebar.is-collapsed .sb-badge {
  position: absolute; inset-block-start: 5px; inset-inline-end: 7px; min-width: 8px; width: 8px; height: 8px; padding: 0;
  font-size: 0; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-surface);
}
.sidebar.collapsed .sb-badge.warn, .sidebar.is-collapsed .sb-badge.warn { background: var(--warning); }
.sidebar.collapsed .sb-badge.danger, .sidebar.is-collapsed .sb-badge.danger { background: var(--danger); }
.sidebar.collapsed .sb-user, .sidebar.is-collapsed .sb-user,
.sidebar.collapsed .sb-user-profile, .sidebar.is-collapsed .sb-user-profile { justify-content: center; padding: 6px; border-color: transparent; }
/* Rail tooltip from data-tip */
.sidebar.collapsed .sb-item[data-tip]:hover::after, .sidebar.is-collapsed .sb-item[data-tip]:hover::after,
.sidebar.collapsed .sb-item[data-tip]:focus-visible::after, .sidebar.is-collapsed .sb-item[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; z-index: var(--z-tooltip); inset-inline-start: calc(100% + 10px); inset-block-start: 50%;
  transform: translateY(-50%); padding: 5px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600; color: var(--text-primary);
  background: var(--bg-elevated); border: 1px solid var(--border-soft); box-shadow: var(--shadow-md); pointer-events: none;
}

/* Secondary / settings nav (admin: .settings-nav) */
.settings-nav { display: flex; flex-direction: column; gap: 2px; width: 220px; flex-shrink: 0; }
.settings-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md);
  font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary); text-decoration: none;
  transition: var(--transition-fast); cursor: pointer;
}
.settings-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.settings-nav-item:hover { background: var(--mode-badge-bg); color: var(--text-primary); }
.settings-nav-item.on, .settings-nav-item[aria-current="page"] { background: var(--accent-glow-md); color: var(--accent-text); }
@media (max-width: 640px) {
  .settings-nav { width: 100%; flex-direction: row; overflow-x: auto; padding-block-end: 4px; }
  .settings-nav-item { white-space: nowrap;  border-radius: var(--radius-sm); }

}

/* ═══════════════════════════════════════════════════════════════
   HEADER BAR / TOP BAR — .header-bar (alias .topbar)
═══════════════════════════════════════════════════════════════ */
.header-bar, .topbar {
  display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding-inline: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
  position: relative; z-index: 2;
}
.header-bar-flush { border-radius: 0; border-width: 0 0 1px; box-shadow: none; position: sticky; inset-block-start: 0; z-index: var(--z-sticky); }
.hdr-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hdr-title b { font-size: var(--text-md); font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-title small { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.header-search {
  flex: 1; max-width: 360px; height: 38px; display: flex; align-items: center; gap: var(--space-2);
  margin-inline-start: auto; padding-inline: 12px; border-radius: var(--radius-md);
  background: var(--bg-input); border: 1px solid var(--border-soft);
  color: var(--text-muted); font-size: var(--text-base-sm); text-align: start; cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.header-search:hover { border-color: var(--border-medium); color: var(--text-secondary); background: var(--bg-input-hover); }
.header-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.header-search .hs-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-search .kbd, .header-search kbd { margin-inline-start: auto; }
.header-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.header-search + .header-actions { margin-inline-start: var(--space-2); }
.hdr-btn {
  position: relative; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border-soft); color: var(--text-secondary); cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.hdr-btn:hover, .hdr-btn[aria-expanded="true"] { background: var(--bg-card-hover); border-color: var(--border-medium); color: var(--text-primary); }
.hdr-btn:focus-visible { border-radius: var(--radius-md); }
.hdr-btn svg { width: 17px; height: 17px; }
.notif-dot {
  position: absolute; inset-block-start: 7px; inset-inline-end: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface);
}
.notif-dot.danger { background: var(--danger); }
.hdr-count { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; box-shadow: 0 0 0 2px var(--bg-surface); }
.hdr-user {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px; padding-inline-end: 10px;
  border-radius: var(--radius-full); border: 1px solid transparent; cursor: pointer; text-align: start;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.hdr-user:hover, .hdr-user[aria-expanded="true"] { background: var(--mode-badge-bg); border-color: var(--border-soft); }
.hdr-user:focus-visible { border-radius: var(--radius-full); }
.hdr-user-name { display: flex; flex-direction: column; line-height: 1.25; }
.hdr-user-name b { font-size: var(--text-base-sm); font-weight: 700; color: var(--text-primary); }
.hdr-user-name small { font-size: var(--text-xs); color: var(--text-muted); }
.hdr-user > svg { width: 14px; height: 14px; color: var(--text-muted); transition: transform var(--transition-fast); }
.hdr-user[aria-expanded="true"] > svg { transform: rotate(180deg); }
.hdr-sep { width: 1px; height: 24px; background: var(--border-soft); margin-inline: 4px; }
@media (max-width: 640px) {
  .header-bar, .topbar { gap: var(--space-2); padding-inline: var(--space-2); }
  .header-search { flex: 0 0 38px; width: 38px; padding: 0; justify-content: center; }
  .header-search .hs-text, .header-search .kbd, .header-search kbd, .hdr-user-name, .hdr-hide-sm, .hdr-sep { display: none; }
  .hdr-user { padding-inline-end: 3px; }
  .hdr-title small { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB — <nav class="breadcrumb" aria-label> <ol> <li> …
   Legacy flat markup with .breadcrumb-sep still supported.
═══════════════════════════════════════════════════════════════ */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--text-base-sm); min-width: 0; }
.breadcrumb > ol { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; min-width: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.breadcrumb li + li::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0; background: var(--text-muted); opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="rtl"] .breadcrumb li + li::before { transform: scaleX(-1); }
.breadcrumb-slash li + li::before { content: '/'; -webkit-mask: none; mask: none; background: none; width: auto; height: auto; color: var(--text-muted); transform: none !important; padding-inline: 2px; }
.breadcrumb-item {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 6px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.breadcrumb-item > span { overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
a.breadcrumb-item:hover { color: var(--text-primary); background: var(--mode-badge-bg); }
.breadcrumb-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.breadcrumb-item.current, .breadcrumb-item[aria-current="page"] { color: var(--accent-text); font-weight: 700; }
.breadcrumb-sep { display: inline-flex; align-items: center; color: var(--text-muted); }   /* legacy */
.breadcrumb-sep svg { width: 14px; height: 14px; }
[dir="rtl"] .breadcrumb-sep svg.lucide-chevron-right { transform: scaleX(-1); }
.breadcrumb-more {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px;
  border-radius: var(--radius-sm); color: var(--text-muted); border: 1px solid var(--border-soft); background: var(--bg-input);
}
.breadcrumb-more:hover, .breadcrumb-more[aria-expanded="true"] { color: var(--text-primary); border-color: var(--border-medium); }
.breadcrumb-more svg { width: 15px; height: 15px; }
.breadcrumb-lg { font-size: var(--text-base); }
.breadcrumb-back { display: none; }
@media (max-width: 640px) {
  .breadcrumb-collapse > ol { display: none; }
  .breadcrumb-collapse .breadcrumb-back { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION — <nav class="pagination"> .pag-info · .pag-controls · .pag-per-page
   Legacy v3: .page-item / .page-link / .page-ellipsis · admin: .pag-btn.active
═══════════════════════════════════════════════════════════════ */
.pagination { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.pagination:has(.pag-info), .pagination:has(.pag-per-page) { justify-content: space-between; }
.pag-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; }
.pag-btn, .page-link {
  min-width: 36px; height: 36px; padding-inline: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: var(--bg-input);
  color: var(--text-secondary); font-size: var(--text-base-sm); font-weight: 600; font-variant-numeric: tabular-nums;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.pag-btn:hover, .page-link:hover { background: var(--bg-card-hover); border-color: var(--border-medium); color: var(--text-primary); }
.pag-btn:focus-visible, .page-link:focus-visible { border-radius: var(--radius-md); }
.pag-btn svg, .page-link svg { width: 16px; height: 16px; }
.pag-btn[aria-current="page"], .pag-btn.active, .page-item.active .page-link {
  background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); box-shadow: 0 2px 10px var(--accent-glow);
}
.pag-btn:disabled, .pag-btn[aria-disabled="true"], .pag-btn.disabled, .page-item.disabled .page-link { opacity: .4; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.pag-ellipsis, .page-ellipsis { min-width: 24px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); letter-spacing: 1px; user-select: none; }
.pag-info, .pag-current { font-size: var(--text-base-sm); color: var(--text-muted); }
.pag-info b, .pag-info strong, .pag-current b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.pag-per-page { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-base-sm); color: var(--text-muted); white-space: nowrap; }
.pag-per-page select { width: auto; min-width: 72px; }
.pag-per-page select:not(.input) {                                        /* legacy bare <select> */
  height: 34px; padding-inline: 10px 30px; appearance: none; cursor: pointer;
  background-color: var(--bg-input); border: 1px solid var(--border-soft); border-radius: var(--radius-md); color: var(--text-primary);
}
.pagination-compact .pag-btn, .pagination-compact .page-link { min-width: 30px; height: 30px; padding-inline: 8px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.pagination-compact .pag-btn svg, .pagination-compact .page-link svg { width: 14px; height: 14px; }
.pagination-compact .pag-ellipsis, .pagination-compact .page-ellipsis { height: 30px; font-size: var(--text-sm); }
.pagination-plain .pag-btn:not([aria-current="page"]):not(.active) { background: transparent; border-color: transparent; }
.pagination-plain .pag-btn:not([aria-current="page"]):not(.active):hover { background: var(--mode-badge-bg); }
@media (max-width: 640px) {
  .pagination:has(.pag-info) { justify-content: center; }
  .pag-info { flex-basis: 100%; text-align: center; }
}
@media (max-width: 480px) {
  .pag-controls { gap: 2px; }
  .pag-btn, .page-link { min-width: 32px; height: 32px; padding-inline: 6px; }
  .pag-ellipsis, .page-ellipsis { min-width: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   STEPPER — <ol class="stepper"> <li class="step done|active|error"> (aria-current="step")
   Variants: .stepper (horizontal) · .stepper-v (vertical) · .stepper-pill · .progress-stepper (nodes)
═══════════════════════════════════════════════════════════════ */
.stepper { display: flex; align-items: flex-start; width: 100%; list-style: none; }
.step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.step + .step::before {
  content: ''; position: absolute; inset-block-start: 17px; height: 2px; border-radius: 2px;
  inset-inline-start: calc(-50% + 26px); inset-inline-end: calc(50% + 26px);
  background: var(--border-soft); transition: background-color var(--dur-slow) var(--ease-standard);
}
.step.done + .step::before { background: var(--success); }
.step-dot, .vstep-dot {
  position: relative; z-index: 1; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-soft); background: var(--bg-surface);
  font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-normal) var(--ease-standard), border-color var(--dur-normal) var(--ease-standard), color var(--dur-normal), box-shadow var(--dur-normal);
}
.step-dot svg, .vstep-dot svg { width: 15px; height: 15px; stroke-width: 2.6; }
.step.done .step-dot, .vstep.done .vstep-dot { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.step.active .step-dot, .vstep.active .vstep-dot {
  background: var(--accent); border-color: var(--accent); color: var(--text-on-accent);
  box-shadow: 0 0 0 4px var(--accent-glow-md);
}
.step.error .step-dot, .vstep.error .vstep-dot { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); }
.step-info { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; max-width: 100%; }
.step-lbl { font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); line-height: 1.35; }
.step-desc { font-size: var(--text-xs); color: var(--text-muted); opacity: .85; }
.step.done .step-lbl { color: var(--text-primary); }
.step.done .step-desc { color: var(--success-text); opacity: 1; }
.step.active .step-lbl, .step.active .step-desc { color: var(--accent-text); opacity: 1; }
.step.error .step-lbl, .step.error .step-desc { color: var(--danger-text); opacity: 1; }
.stepper-sm .step-dot { width: 28px; height: 28px; font-size: var(--text-xs); }
.stepper-sm .step + .step::before { inset-block-start: 13px; inset-inline-start: calc(-50% + 20px); inset-inline-end: calc(50% + 20px); }
@media (max-width: 640px) {
  .stepper .step-desc { display: none; }
  .stepper .step-lbl { font-size: var(--text-xs); }
  .stepper .step-dot { width: 30px; height: 30px; }
  .stepper .step + .step::before { inset-block-start: 14px; inset-inline-start: calc(-50% + 20px); inset-inline-end: calc(50% + 20px); }
}

/* Vertical */
.stepper-v { display: flex; flex-direction: column; width: 100%; list-style: none; }
.vstep { position: relative; display: flex; gap: var(--space-4); padding-block-end: var(--space-6); }
.vstep:last-child { padding-block-end: 0; }
.vstep-left { display: flex; flex-direction: column; align-items: center; width: 36px; flex-shrink: 0; }
.vstep-line { flex: 1; width: 2px; min-height: 16px; margin-block: 6px calc(-1 * var(--space-6) + 6px); border-radius: 2px; background: var(--border-soft); transition: background-color var(--dur-slow); }
.vstep.done .vstep-line { background: var(--success); }
.vstep:last-child .vstep-line { display: none; }
.vstep-body { flex: 1; min-width: 0; padding-block-start: 6px; }
.vstep-title { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin-block-end: 2px; }
.vstep-sub { font-size: var(--text-base-sm); color: var(--text-secondary); line-height: 1.55; }
.vstep.active .vstep-title { color: var(--accent-text); }
.vstep.error .vstep-title { color: var(--danger-text); }
.vstep:not(.done):not(.active):not(.error) .vstep-title { color: var(--text-secondary); }
.vstep-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-block-start: 8px; padding: 2px 9px;
  font-size: var(--text-2xs); font-weight: 700; border-radius: var(--radius-full); border: 1px solid;
}
.vstep-badge svg { width: 11px; height: 11px; }
.vstep-badge.current { background: var(--accent-glow); border-color: var(--accent-glow-md); color: var(--accent-text); }
.vstep-badge.done    { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.vstep-badge.pending { background: var(--mode-badge-bg); border-color: var(--border-subtle); color: var(--text-muted); }
.vstep-badge.error   { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.vstep-meta { font-size: var(--text-xs); color: var(--text-muted); margin-block-start: 4px; font-variant-numeric: tabular-nums; }

/* Compact pill */
.stepper-pill {
  display: flex; align-items: center; gap: 4px; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; list-style: none;
  background: var(--mode-badge-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
}
.pill-step {
  display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; padding-inline: 4px 12px; flex-shrink: 0;
  border-radius: var(--radius-full); border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap;
  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}
.p-num {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--border-soft); font-size: var(--text-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.p-num svg { width: 11px; height: 11px; stroke-width: 3; }
.pill-step.done { color: var(--success-text); }
.pill-step.done .p-num { background: var(--success-bg); color: var(--success-text); box-shadow: inset 0 0 0 1px var(--success-border); }
.pill-step.active { background: var(--accent-glow); border-color: var(--accent-glow-md); color: var(--accent-text); }
.pill-step.active .p-num { background: var(--accent); color: var(--text-on-accent); }
.pill-step.error { color: var(--danger-text); }
.pill-step.error .p-num { background: var(--danger); color: var(--text-on-accent); }
.pill-connector { width: 14px; height: 1px; flex-shrink: 0; background: var(--border-medium); }
@media (max-width: 640px) { .pill-step:not(.active) .pill-lbl { display: none; } .pill-step:not(.active) { padding-inline: 4px; } }

/* Progress / node stepper */
.progress-stepper { width: 100%; }
.progress-stepper-nodes { display: flex; align-items: flex-start; width: 100%; list-style: none; }
.ps-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; width: 40px; }
.ps-node:first-child { align-items: flex-start; }
.ps-node:last-child { align-items: flex-end; }
.ps-node-dot {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface); border: 2px solid var(--border-soft);
  font-size: var(--text-base-sm); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-normal), border-color var(--dur-normal), color var(--dur-normal), box-shadow var(--dur-normal);
}
.ps-node-dot svg { width: 17px; height: 17px; stroke-width: 2.6; }
.ps-node.done .ps-node-dot { background: var(--success); border-color: var(--success); color: var(--text-on-accent); box-shadow: 0 2px 10px var(--success-bg); }
.ps-node.active .ps-node-dot { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); box-shadow: 0 0 0 4px var(--accent-glow-md), 0 2px 14px var(--accent-glow); }
.ps-node.error .ps-node-dot { background: var(--danger); border-color: var(--danger); color: var(--text-on-accent); }
.ps-node-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); text-align: center; white-space: nowrap; }
.ps-node.done .ps-node-label { color: var(--text-primary); }
.ps-node.active .ps-node-label { color: var(--accent-text); font-weight: 700; }
.ps-node.error .ps-node-label { color: var(--danger-text); }
.ps-connector { position: relative; flex: 1; height: 4px; margin-block-start: 18px; margin-inline: 6px; border-radius: 2px; overflow: hidden; background: var(--border-subtle); }
.ps-connector-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 2px; transition: width var(--dur-slow) var(--ease-standard); }
.ps-connector-fill { background: var(--success); }
.ps-connector.done .ps-connector-fill { width: 100%; }
.ps-connector.half .ps-connector-fill { width: 50%; }
.ps-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-5);
  padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.ps-summary-text { font-size: var(--text-sm); color: var(--text-secondary); }
.ps-summary-pct { font-size: var(--text-base-sm); font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ps-node:not(.active) .ps-node-label { visibility: hidden; } .ps-node-dot { width: 34px; height: 34px; } .ps-node { width: 34px; } .ps-connector { margin-block-start: 15px; margin-inline: 3px; } }

/* Stepper controls row */
.stepper-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-5); }

/* ═══════════════════════════════════════════════════════════════
   MENU / DROPDOWN — [data-menu] trigger + .menu[role="menu"][hidden]
   Legacy: .dropdown-menu/.dropdown-item/.dropdown-divider (v3),
           .actions-dropdown/.dd-item/.dd-danger/.dd-sep/.actions-btn (admin)
═══════════════════════════════════════════════════════════════ */
.dropdown { position: relative; display: inline-flex; }
.menu, .dropdown-menu, .actions-dropdown {
  position: absolute; z-index: var(--z-dropdown); inset-block-start: calc(100% + 6px); inset-inline-start: 0;
  display: flex; flex-direction: column; gap: 1px; min-width: 220px; max-width: min(320px, calc(100vw - 32px));
  padding: 6px; text-align: start;
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: hl-pop-in var(--dur-fast) var(--ease-emphasized);
}
.menu-end, .actions-dropdown { inset-inline-start: auto; inset-inline-end: 0; }
.menu-up { inset-block-start: auto; inset-block-end: calc(100% + 6px); animation-name: hl-pop-in-up; }
.menu-static, .dropdown-menu.static-open { position: relative; inset: auto; animation: none; }
.menu-sm { min-width: 170px; }
/* legacy show/hide (class based) — hl.js also toggles .open */
.dropdown-menu { display: none; }
.dropdown-menu.open, .dropdown-menu.static-open, .dropdown.open > .dropdown-menu { display: flex; }
.actions-dropdown { display: none; min-width: 190px; }
.actions-dropdown.show, .actions-dropdown.open { display: flex; }

.menu-item, .dropdown-item, .dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 7px 10px;
  border: 0; border-radius: var(--radius-sm); background: none;
  font-family: var(--font-main); font-size: var(--text-base-sm); font-weight: 500; color: var(--text-secondary);
  text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.menu-item svg, .dropdown-item svg, .dd-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.menu-item:hover, .dropdown-item:hover, .dd-item:hover,
.menu-item:focus-visible, .dropdown-item:focus-visible, .dd-item:focus-visible { background: var(--mode-badge-bg); color: var(--text-primary); }
.menu-item:focus-visible, .dropdown-item:focus-visible, .dd-item:focus-visible { box-shadow: inset 0 0 0 1px var(--border-accent); border-radius: var(--radius-sm); }
.menu-item.active, .menu-item[aria-current="true"], .dropdown-item.active { background: var(--accent-glow); color: var(--accent-text); }
.menu-item.danger, .dropdown-item.danger, .dd-item.dd-danger { color: var(--danger-text); }
.menu-item.danger:hover, .menu-item.danger:focus-visible, .dropdown-item.danger:hover, .dd-item.dd-danger:hover { background: var(--danger-bg); color: var(--danger-text); }
.menu-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.menu-item[aria-disabled="true"]:hover { background: none; color: var(--text-secondary); }
.menu-kbd { margin-inline-start: auto; padding-inline-start: var(--space-4); font-family: var(--font-code); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: .5px; direction: ltr; }
.menu-item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; white-space: normal; }
.menu-item-text small { font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; }
.menu-item .badge { margin-inline-start: auto; }
.menu-sep, .dropdown-divider, .dd-sep { height: 1px; margin: 4px 6px; background: var(--border-subtle); flex-shrink: 0; }
.menu-label { padding: 8px 10px 4px; font-size: var(--text-2xs); font-weight: 700;  color: var(--text-muted); }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-block-end: 4px; border-block-end: 1px solid var(--border-subtle); }
.menu-head .u-role { overflow: hidden; text-overflow: ellipsis; }
/* checkbox items: role="menuitemcheckbox" aria-checked */
.menu-check {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: var(--radius-xs); border: 1.5px solid var(--border-medium);
  display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-fast);
}
.menu-check::after { content: ''; width: 4px; height: 8px; margin-block-start: -2px; border: solid var(--text-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-fast) var(--ease-spring); }
[aria-checked="true"] > .menu-check { background: var(--accent); border-color: var(--accent); }
[aria-checked="true"] > .menu-check::after { transform: rotate(45deg) scale(1); }
[role="menuitemcheckbox"] .dot { margin-inline-start: auto; }

.dropdown-trigger {                                                         /* legacy v3 trigger */
  display: inline-flex; align-items: center; gap: 8px; height: var(--control-md); padding-inline: 16px;
  border-radius: var(--radius-md); border: 1px solid var(--border-medium); background: var(--bg-card);
  font-size: var(--text-base); font-weight: 600; color: var(--text-primary); cursor: pointer; transition: var(--transition-fast);
}
.dropdown-trigger:hover { background: var(--bg-card-hover); box-shadow: var(--shadow-sm); }
.dropdown-trigger svg { width: 16px; height: 16px; }
.actions-btn {                                                              /* legacy admin row trigger */
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid transparent; color: var(--text-muted); cursor: pointer; transition: var(--transition-fast);
}
.actions-btn:hover, .actions-btn.open, .actions-btn[aria-expanded="true"] { background: var(--mode-badge-bg); color: var(--text-primary); border-color: var(--border-soft); }
.actions-btn svg { width: 16px; height: 16px; }
.actions-cell { position: relative; }
.dd-chev { transition: transform var(--transition-fast); }
[aria-expanded="true"] > .dd-chev { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════
   ACCORDION — .accordion > .acc-item > .acc-h > button.acc-trigger[data-disclosure] + .acc-panel
   Legacy v3: .accordion-item(.open) / .accordion-header / .accordion-body / .accordion-body-inner / .chevron-icon
═══════════════════════════════════════════════════════════════ */
.accordion { display: flex; flex-direction: column; gap: var(--space-2); }
.acc-item, .accordion-item {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.acc-item:hover, .accordion-item:hover { border-color: var(--border-soft); }
.acc-item.open, .accordion-item.open { border-color: var(--border-medium); }
.acc-h { margin: 0; font: inherit; }
.acc-trigger, .accordion-header {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 14px 18px;
  font-family: var(--font-main); font-size: var(--text-base); font-weight: 700; color: var(--text-primary);
  text-align: start; cursor: pointer; background: none; border: 0; transition: color var(--transition-fast);
}
.acc-trigger:hover, .accordion-header:hover { color: var(--accent-text); }
.acc-trigger:focus-visible, .accordion-header:focus-visible { box-shadow: none; outline: 2px solid var(--accent-light); outline-offset: -2px; border-radius: var(--radius-lg); }
.acc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.acc-title small { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.acc-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.acc-ico svg { width: 17px; height: 17px; }
.acc-trigger .badge { flex-shrink: 0; }
.acc-chev, .accordion-header .chevron-icon { width: 18px; height: 18px; flex-shrink: 0; margin-inline-start: auto; color: var(--text-muted); transition: transform var(--transition-normal); }
.acc-title + .acc-chev, .badge + .acc-chev { margin-inline-start: 0; }
[aria-expanded="true"] > .acc-chev, .accordion-item.open .chevron-icon { transform: rotate(180deg); }
.acc-body, .accordion-body-inner { padding: 0 18px 18px; font-size: var(--text-base-sm); line-height: 1.8; color: var(--text-secondary); }
.acc-panel:not([hidden]) > .acc-body { animation: hl-slide-in var(--dur-normal) var(--ease-emphasized); }
.acc-item.has-ico .acc-body { padding-inline-start: calc(18px + 34px + var(--space-3)); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-standard); }   /* legacy */
.accordion-item.open .accordion-body { max-height: 800px; }
/* Flush variant: hairline-separated list, no cards */
.accordion-flush { gap: 0; border-block: 1px solid var(--border-subtle); }
.accordion-flush .acc-item { background: none; border: 0; border-radius: 0; box-shadow: none; }
.accordion-flush .acc-item + .acc-item { border-block-start: 1px solid var(--border-subtle); }
.accordion-flush .acc-trigger { padding-inline: 4px; }
.accordion-flush .acc-body { padding-inline: 4px; }
.accordion-flush .acc-item.has-ico .acc-body { padding-inline-start: calc(4px + 34px + var(--space-3)); }
.acc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-3); }

/* ═══════════════════════════════════════════════════════════════
   POPOVER — .popover-wrap > button[data-popover] + .popover[data-popover-panel][hidden]
═══════════════════════════════════════════════════════════════ */
.popover-wrap { position: relative; display: inline-flex; }
.popover {
  --pop-arrow: 18px;
  min-width: 260px; max-width: min(340px, calc(100vw - 32px)); text-align: start; color: var(--text-primary);
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.popover-wrap > .popover { position: absolute; z-index: var(--z-popover); inset-block-start: calc(100% + 10px); inset-inline-start: 0; animation: hl-pop-in var(--dur-fast) var(--ease-emphasized); }
.popover-wrap > .popover.pop-end { inset-inline-start: auto; inset-inline-end: 0; }
.popover-wrap > .popover.pop-top { inset-block-start: auto; inset-block-end: calc(100% + 10px); animation-name: hl-pop-in-up; }
.popover-static { position: relative; }
.popover-wide { min-width: 300px; }
.popover-arrow {
  position: absolute; inset-block-start: -7px; inset-inline-start: var(--pop-arrow); width: 12px; height: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-color: var(--border-soft) transparent transparent var(--border-soft);
  transform: rotate(45deg); border-start-start-radius: 2px;
}
.pop-end > .popover-arrow { inset-inline-start: auto; inset-inline-end: var(--pop-arrow); }
.pop-top > .popover-arrow { inset-block-start: auto; inset-block-end: -7px; border-color: transparent var(--border-soft) var(--border-soft) transparent; }
.popover-head { display: flex; align-items: center; gap: var(--space-3); padding: 14px 16px; border-block-end: 1px solid var(--border-subtle); }
.popover-title { font-size: var(--text-base); font-weight: 700; }
.popover-body, .popover-content { padding: 14px 16px; position: relative; }
.popover-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: 10px 16px; border-block-start: 1px solid var(--border-subtle); background: var(--bg-overlay); border-end-start-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); }
.popover-foot .ms-auto + * { margin: 0; }
.pop-profile { display: flex; align-items: center; gap: var(--space-3); }
.pop-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: var(--accent-text); font-weight: 700; } /* legacy */
.pop-name { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); }
.pop-email { font-size: var(--text-sm); color: var(--text-muted); }
.pop-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-block-start: var(--space-3); }
.pop-stats > div { padding: 8px; border-radius: var(--radius-md); background: var(--mode-badge-bg); text-align: center; }
.pop-stats b { display: block; font-size: var(--text-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.pop-stats small { font-size: var(--text-2xs); color: var(--text-muted); }
.pop-action-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--text-base-sm); color: var(--text-secondary); cursor: pointer; transition: var(--transition-fast); }
.pop-action-item:hover { background: var(--mode-badge-bg); color: var(--text-primary); }
.pop-action-item svg { width: 16px; height: 16px; }
fieldset.pop-section { border: 0; min-width: 0; }
.pop-section + .pop-section { margin-block-start: var(--space-4); }
.pop-label { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); margin-block-end: var(--space-2); }
.popover-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-secondary); font-size: var(--text-base-sm); cursor: pointer; } /* legacy */

/* ═══════════════════════════════════════════════════════════════
   COMMAND PALETTE — .cmd-palette[data-cmd] · input[role=combobox] · [role=listbox] · .cmd-item[role=option]
═══════════════════════════════════════════════════════════════ */
.cmd-palette {
  width: 100%; max-width: 620px; margin-inline: auto; overflow: hidden;
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  transition: border-color var(--transition-fast);
}
.cmd-palette:focus-within { border-color: var(--border-accent); }
.cmd-input-wrap { display: flex; align-items: center; gap: var(--space-3); padding: 14px 18px; border-block-end: 1px solid var(--border-subtle); }
.cmd-input-wrap > svg { width: 19px; height: 19px; color: var(--text-muted); flex-shrink: 0; }
.cmd-input { flex: 1; min-width: 0; height: 28px; border: 0; outline: none; background: transparent; font-size: var(--text-md); color: var(--text-primary); }
.cmd-input::placeholder { color: var(--text-muted); }
.cmd-input:focus-visible { box-shadow: none; }
.cmd-input::-webkit-search-cancel-button { display: none; }
.cmd-body { max-height: 340px; overflow-y: auto; padding: 6px; scroll-padding-block: 30px 6px; }
.cmd-group + .cmd-group { margin-block-start: 4px; }
.cmd-group-title { padding: 8px 12px 4px; font-size: var(--text-2xs); font-weight: 700;  color: var(--text-muted); }
.cmd-item {
  position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 8px 12px; border-radius: var(--radius-md);
  color: var(--text-secondary); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast);
}
.cmd-item[aria-selected="true"], .cmd-item.active { background: var(--accent-glow-md); color: var(--text-primary); }
.cmd-item-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--mode-badge-bg); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.cmd-item-ico svg, .cmd-item > svg { width: 16px; height: 16px; flex-shrink: 0; }
.cmd-item[aria-selected="true"] .cmd-item-ico { color: var(--accent-text); border-color: var(--border-accent); background: var(--accent-glow); }
.cmd-item-label { flex: 1; min-width: 0; font-size: var(--text-base-sm); font-weight: 600; line-height: 1.35; }
.cmd-item-label small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-shortcut { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; direction: ltr; }
.cmd-palette .cmd-shortcut:not(:has(.kbd)) { padding: 2px 8px; font-family: var(--font-code); font-size: var(--text-2xs); color: var(--text-muted); background: var(--mode-badge-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.cmd-empty { padding: 36px 16px; text-align: center; color: var(--text-muted); font-size: var(--text-base-sm); }
.cmd-empty svg { width: 28px; height: 28px; margin: 0 auto 10px; opacity: .7; }
.cmd-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding: 10px 16px; border-block-start: 1px solid var(--border-subtle); background: var(--bg-overlay); font-size: var(--text-xs); color: var(--text-muted); }
.cmd-foot > span { display: inline-flex; align-items: center; gap: 5px; }
.cmd-foot .kbd { min-width: 20px; height: 20px; font-size: var(--text-2xs); }
@media (max-width: 480px) { .cmd-item .cmd-shortcut { display: none; } .cmd-foot > span:nth-child(n+3) { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   TIMELINE — <ol class="timeline"> <li class="timeline-item">
═══════════════════════════════════════════════════════════════ */
.timeline { position: relative; display: flex; flex-direction: column; list-style: none; }
.timeline::before { content: ''; position: absolute; inset-block: 8px; inset-inline-start: 15px; width: 2px; border-radius: 2px; background: var(--border-soft); }
.timeline-item { position: relative; display: flex; flex-direction: column; gap: 4px; padding-inline-start: 48px; padding-block-end: var(--space-6); }
.timeline-item:last-child { padding-block-end: 0; }
.timeline-dot {
  position: absolute; inset-inline-start: 8px; inset-block-start: 4px; z-index: 1; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted); border: 3px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--border-soft);
}
.timeline-dot.dot-success { background: var(--success); box-shadow: 0 0 0 1px var(--success-border), 0 0 10px var(--success-bg); }
.timeline-dot.dot-info    { background: var(--info);    box-shadow: 0 0 0 1px var(--info-border), 0 0 10px var(--info-bg); }
.timeline-dot.dot-warning { background: var(--warning); box-shadow: 0 0 0 1px var(--warning-border), 0 0 10px var(--warning-bg); }
.timeline-dot.dot-danger  { background: var(--danger);  box-shadow: 0 0 0 1px var(--danger-border), 0 0 10px var(--danger-bg); }
.timeline-dot.dot-accent  { background: var(--accent);  box-shadow: 0 0 0 1px var(--border-accent); }
.timeline-dot.dot-purple  { background: var(--purple);  box-shadow: 0 0 0 1px var(--purple-border); }
.timeline-dot.is-live { animation: hl-ring 2s var(--ease-standard) infinite; }
.timeline-ico {
  position: absolute; inset-inline-start: 0; inset-block-start: 0; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--bg-surface);
  background: var(--bg-overlay); color: var(--text-secondary); border: 1px solid var(--border-soft);
}
.timeline-ico svg { width: 15px; height: 15px; }
.timeline-ico.ci-green, .timeline-ico.ci-blue, .timeline-ico.ci-amber, .timeline-ico.ci-red, .timeline-ico.ci-purple, .timeline-ico.ci-cyan { background-color: var(--bg-elevated); background-image: linear-gradient(var(--tl-tint, transparent), var(--tl-tint, transparent)); }
.timeline-ico.ci-green { --tl-tint: var(--success-bg); } .timeline-ico.ci-blue { --tl-tint: var(--accent-glow); }
.timeline-ico.ci-amber { --tl-tint: var(--warning-bg); } .timeline-ico.ci-red { --tl-tint: var(--danger-bg); }
.timeline-ico.ci-purple { --tl-tint: var(--purple-bg); } .timeline-ico.ci-cyan { --tl-tint: var(--info-bg); }
.timeline-item:has(.timeline-ico) { padding-block-start: 5px; }
.timeline-time { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.timeline-content { padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.timeline-content:hover { border-color: var(--border-soft); background: var(--bg-card-hover); }
.tl-title { font-size: var(--text-base-sm); font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.tl-title .link { font-weight: 700; }
.tl-desc { font-size: var(--text-base-sm); color: var(--text-secondary); line-height: 1.65; margin-block-start: 2px; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.tl-quote { margin-block-start: var(--space-2); padding: 8px 12px; border: 1px solid var(--border-subtle); background: var(--mode-badge-bg); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-secondary); }
.tl-files { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: var(--space-2); }
.timeline-day { position: relative; padding-inline-start: 48px; margin-block: 0 var(--space-4); font-size: var(--text-2xs); font-weight: 800;  color: var(--text-muted); }
.timeline-item + .timeline-day { margin-block-start: var(--space-2); }
/* Compact: no cards, small dots — activity feeds / side panels */
.timeline-compact .timeline-item { padding-block-end: var(--space-4); gap: 0; }
.timeline-compact .timeline-dot { width: 10px; height: 10px; border-width: 2px; inset-inline-start: 11px; inset-block-start: 6px; }
.timeline-compact .timeline-content { padding: 0; background: none; border: 0; }
.timeline-compact .tl-title { font-weight: 500; color: var(--text-secondary); }
.timeline-compact .tl-title b { color: var(--text-primary); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE — .empty-state · .empty-state-icon.es-* · title · desc · actions
═══════════════════════════════════════════════════════════════ */
.empty-states-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); }
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.empty-state-dashed { border-style: dashed; border-color: var(--border-medium); background: transparent; }
.empty-state-plain { background: none; border: 0; }
.empty-state-icon {
  position: relative; width: 64px; height: 64px; margin-block-end: var(--space-5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mode-badge-bg); color: var(--text-secondary);
}
.empty-state-icon svg { width: 28px; height: 28px; }
.empty-state-icon.es-nodata   { background: var(--info-bg);    color: var(--info-text); }
.empty-state-icon.es-nosearch { background: var(--warning-bg); color: var(--warning-text); }
.empty-state-icon.es-error    { background: var(--danger-bg);  color: var(--danger-text); }
.empty-state-icon.es-first    { background: var(--accent-glow); color: var(--accent-text); }
.empty-state-icon.es-success  { background: var(--success-bg); color: var(--success-text); }
.empty-state-title { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); margin-block-end: 6px; }
.empty-state-desc { max-width: 340px; font-size: var(--text-base-sm); line-height: 1.7; color: var(--text-muted); margin-block-end: var(--space-5); }
.empty-state-desc:last-child { margin-block-end: 0; }
.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.empty-state-hint { margin-block-start: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
.empty-state-hint code { font-family: var(--font-code); }
.empty-state-sm { padding: 24px 16px; }
.empty-state-sm .empty-state-icon { width: 44px; height: 44px; margin-block-end: var(--space-3); }
.empty-state-sm .empty-state-icon::before, .empty-state-sm .empty-state-icon::after { display: none; }
.empty-state-sm .empty-state-icon svg { width: 20px; height: 20px; }
.empty-state-sm .empty-state-title { font-size: var(--text-base); }
.empty-state-sm .empty-state-desc { margin-block-end: var(--space-3); }
.empty-checklist { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 6px; margin-block-end: var(--space-5); list-style: none; text-align: start; }
.empty-checklist li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); background: var(--mode-badge-bg); border: 1px solid var(--border-subtle); font-size: var(--text-base-sm); color: var(--text-secondary); }
.empty-checklist li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.empty-checklist li.done { color: var(--text-muted); text-decoration: line-through; }
.empty-checklist li.done svg { color: var(--success-text); }
.table-empty td { padding: 0 !important; }
.table-empty .empty-state { border: 0; border-radius: 0; background: none; }

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION CENTER — .notif-panel[data-notif] · .notif-item.unread
═══════════════════════════════════════════════════════════════ */
.notif-panel {
  width: 100%; max-width: 420px; margin-inline: auto; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.notif-header { display: flex; align-items: center; gap: var(--space-2); padding: 14px 18px 10px; }
.notif-header-title { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); }
.notif-count { background: var(--accent); }
.notif-header-action { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); font-weight: 600; color: var(--accent-text); border-radius: var(--radius-xs); }
.notif-header-action svg { width: 14px; height: 14px; }
.notif-header-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.notif-header-action:disabled { color: var(--text-muted); text-decoration: none; cursor: default; opacity: .7; }
.notif-tabs { padding-inline: 12px; }
.notif-tabs .tab { padding-block: 8px; font-size: var(--text-sm); }
.notif-list { max-height: 380px; overflow-y: auto; list-style: none; }
.notif-item { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px 18px; border-block-end: 1px solid var(--border-subtle); transition: background-color var(--transition-fast); cursor: pointer; }
.notif-item:last-child { border-block-end: 0; }
.notif-item:hover { background: var(--bg-card-hover); }
.notif-item.unread { background: var(--accent-glow-md); }
.notif-item.unread::before { content: ''; position: absolute; inset-inline-start: 7px; inset-block-start: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.notif-main { display: flex; align-items: flex-start; gap: var(--space-3); flex: 1; min-width: 0; text-align: start; cursor: pointer; border-radius: var(--radius-sm); }
.notif-main:focus-visible { box-shadow: none; outline: 2px solid var(--accent-light); outline-offset: 6px; }
.notif-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.notif-icon svg { width: 17px; height: 17px; }
.notif-icon.ni-success { background: var(--success-bg); color: var(--success-text); }
.notif-icon.ni-warning { background: var(--warning-bg); color: var(--warning-text); }
.notif-icon.ni-info    { background: var(--info-bg);    color: var(--info-text); }
.notif-icon.ni-danger  { background: var(--danger-bg);  color: var(--danger-text); }
.notif-icon.ni-accent  { background: var(--accent-glow); color: var(--accent-text); }
.notif-body { flex: 1; min-width: 0; }
.notif-body > * { display: block; }
.notif-body-title { font-size: var(--text-base-sm); font-weight: 600; color: var(--text-primary); line-height: 1.45; }
.notif-item.unread .notif-body-title { font-weight: 700; }
.notif-body-msg { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; margin-block-start: 2px; }
.notif-body-time { font-size: var(--text-xs); color: var(--text-muted); margin-block-start: 4px; font-variant-numeric: tabular-nums; }
.notif-actions { display: flex; gap: 6px; margin-block-start: var(--space-2); }
.notif-footer { padding: 10px 18px; text-align: center; border-block-start: 1px solid var(--border-subtle); background: var(--bg-overlay); }
.notif-footer a { font-size: var(--text-base-sm); font-weight: 600; color: var(--accent-text); text-decoration: none; border-radius: var(--radius-xs); }
.notif-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.notif-empty { padding: 36px 20px; }

/* ═══════════════════════════════════════════════════════════════
   SLIDER / RANGE — native <input type="range" class="hl-range"> (fill via --fill, set by JS)
═══════════════════════════════════════════════════════════════ */
.hl-range-wrap { display: flex; flex-direction: column; gap: 10px; }
.hl-range-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hl-range-value {
  display: inline-flex; align-items: center; min-height: 24px; padding-inline: 9px; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent-text); background: var(--accent-glow-md); border: 1px solid var(--accent-glow-md); white-space: nowrap;
}
.hl-range-row { display: flex; align-items: center; gap: var(--space-3); }
.hl-range-row > svg { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }
.hl-range {
  --fill: 50%; --range-dir: to right; --range-fill: var(--accent); --range-track: var(--border-soft);
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
[dir="rtl"] .hl-range { --range-dir: to left; }
.hl-range:focus-visible { box-shadow: none; }
.hl-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-full);
  background: linear-gradient(var(--range-dir), var(--range-fill) var(--fill), var(--range-track) var(--fill));
}
.hl-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-block-start: -6px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--accent);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
}
.hl-range:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px var(--accent-glow-md); }
.hl-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.hl-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.hl-range::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--range-track); }
.hl-range::-moz-range-progress { height: 6px; border-radius: var(--radius-full); background: var(--range-fill); }
.hl-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--accent); }
.hl-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
.hl-range:disabled { cursor: not-allowed; opacity: .5; --range-fill: var(--text-muted); }
.hl-range:disabled::-webkit-slider-thumb { background: var(--text-muted); box-shadow: 0 0 0 1px var(--border-medium); transform: none; }
.hl-range.range-success { --range-fill: var(--success); }
.hl-range.range-success::-webkit-slider-thumb { background: var(--success); box-shadow: 0 0 0 1px var(--success); }
.hl-range.range-warning { --range-fill: var(--warning); }
.hl-range.range-warning::-webkit-slider-thumb { background: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
.hl-range-labels { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; padding-inline: 2px; }
.hl-range-ticks { display: flex; justify-content: space-between; padding-inline: 8px; margin-block-start: -6px; }
.hl-range-ticks > span { width: 2px; height: 6px; border-radius: 1px; background: var(--border-medium); }

/* ═══════════════════════════════════════════════════════════════
   FILE UPLOAD — label.upload-zone[data-upload] > input[type=file].sr-only · .upload-list · .upload-grid
═══════════════════════════════════════════════════════════════ */
.upload-zone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 32px 24px; text-align: center; cursor: pointer;
  background: var(--bg-card); border: 2px dashed var(--border-medium); border-radius: var(--radius-lg);
  transition: border-color var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);
}
.upload-zone:hover { border-color: var(--border-accent); background: var(--bg-input-focus); }
.upload-zone.dragover, .upload-zone.is-dragover { border-color: var(--accent); border-style: solid; background: var(--accent-glow-md); box-shadow: 0 0 0 4px var(--accent-glow-md); }
.upload-zone:focus-within { box-shadow: var(--focus-ring); border-color: var(--accent); }
.upload-zone.is-disabled { opacity: .5; cursor: not-allowed; }
.upload-icon { width: 52px; height: 52px; margin-block-end: var(--space-2); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: var(--accent-text); transition: transform var(--transition-normal); }
.upload-icon svg { width: 24px; height: 24px; }
.upload-zone.dragover .upload-icon, .upload-zone.is-dragover .upload-icon { color: var(--accent-text); }
.upload-text { font-size: var(--text-base); color: var(--text-secondary); }
.upload-text b { color: var(--accent-text); font-weight: 700; }
.upload-hint { font-size: var(--text-sm); color: var(--text-muted); }
.upload-zone-sm { flex-direction: row; gap: var(--space-3); padding: 14px 16px; text-align: start; }
.upload-zone-sm .upload-icon { width: 40px; height: 40px; margin: 0; flex-shrink: 0; }
.upload-zone-sm .upload-icon svg { width: 19px; height: 19px; }

.upload-list { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-3); list-style: none; }
.upload-list:empty { display: none; }
.upload-file {
  display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  animation: hl-slide-in var(--dur-normal) var(--ease-emphasized);
}
.upload-list .upload-file { margin: 0; }
.upload-file + .upload-file { margin-block-start: 0; }
.upload-file-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: var(--accent-text); overflow: hidden; }
.upload-file-ico svg { width: 18px; height: 18px; }
.upload-file-ico img { width: 100%; height: 100%; object-fit: cover; }
.upload-file-ico.is-video { background: var(--purple-bg); color: var(--purple-text); }
.upload-file-ico.is-doc { background: var(--danger-bg); color: var(--danger-text); }
.upload-file-ico.is-archive { background: var(--warning-bg); color: var(--warning-text); }
.upload-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.upload-file-info .file-name { font-size: var(--text-base-sm); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-info .file-meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.upload-file-info .file-meta svg { width: 12px; height: 12px; }
.file-progress { height: 4px; margin-block-start: 3px; border-radius: var(--radius-full); background: var(--border-subtle); overflow: hidden; }
.file-progress-fill { height: 100%; border-radius: var(--radius-full); background: var(--accent); transition: width .3s var(--ease-standard); }
.upload-file.is-done .file-meta { color: var(--success-text); }
.upload-file.is-done .file-progress { display: none; }
.upload-file.is-error { border-color: var(--danger-border); background: var(--danger-bg); }
.upload-file.is-error .file-meta { color: var(--danger-text); }
.upload-file.is-error .file-progress-fill { background: var(--danger); }
.upload-file-remove {
  width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--text-muted); transition: var(--transition-fast);
}
.upload-file-remove:hover { color: var(--danger-text); background: var(--danger-bg); }
.upload-file-remove svg { width: 16px; height: 16px; }

.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); list-style: none; }
.upload-tile { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-overlay); border: 1px solid var(--border-subtle); animation: hl-slide-in var(--dur-normal) var(--ease-emphasized); }
.upload-tile img { width: 100%; height: 100%; object-fit: cover; }
.upload-tile-name { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 18px 8px 6px; font-size: var(--text-2xs); font-weight: 600; color: var(--text-on-accent); background: linear-gradient(transparent, var(--bg-scrim)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-tile-remove {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-on-accent); background: var(--bg-scrim);
  opacity: 0; transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
.upload-tile:hover .upload-tile-remove, .upload-tile-remove:focus-visible { opacity: 1; }
@media (hover: none) { .upload-tile-remove { opacity: 1; } }
.upload-tile-remove:hover { background: var(--danger); }
.upload-tile-remove svg { width: 14px; height: 14px; }
.upload-tile-cover { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; }
.upload-tile .file-progress { position: absolute; inset-inline: 8px; inset-block-end: 8px; margin: 0; background: var(--bg-scrim); }
.upload-tile.is-uploading img { opacity: .55; }
.upload-tile-add {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  border: 2px dashed var(--border-medium); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--text-sm); font-weight: 600;
  transition: var(--transition-fast);
}
.upload-tile-add:hover, .upload-tile-add.dragover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-glow-md); }
.upload-tile-add:focus-within { box-shadow: var(--focus-ring); }
.upload-tile-add svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════════
   DATE PICKER — .date-picker[data-datepicker] (rendered by hl-patterns.js; role="grid")
═══════════════════════════════════════════════════════════════ */
.date-picker {
  width: 100%; max-width: 320px; padding: 16px; user-select: none;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.popover > .date-picker { border: 0; box-shadow: none; background: none; }
.dp-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-end: var(--space-3); }
.dp-title { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dp-nav, .dp-header > button {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  transition: var(--transition-fast);
}
.dp-nav:hover, .dp-header > button:hover { background: var(--bg-input-hover); border-color: var(--border-medium); color: var(--text-primary); }
.dp-nav svg, .dp-header > button svg { width: 16px; height: 16px; }
.dp-table { width: 100%; border-collapse: separate; border-spacing: 0 3px; table-layout: fixed; }
.dp-table th { padding-block: 4px 6px; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-align: center; }
.dp-day, .dp-grid .dp-day {
  position: relative; height: 36px; padding: 0; text-align: center; vertical-align: middle; cursor: pointer;
  font-size: var(--text-base-sm); font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm); transition: background-color var(--transition-fast), color var(--transition-fast);
}
.dp-day:hover { background: var(--bg-input-hover); color: var(--text-primary); }
.dp-day:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); z-index: 1; }
.dp-day.today { color: var(--accent-text); font-weight: 800; box-shadow: inset 0 0 0 1px var(--accent); }
.dp-day.today:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--focus-ring); }
.dp-day.selected, .dp-day[aria-selected="true"] { background: var(--accent); color: var(--text-on-accent); font-weight: 700; }
.dp-day.selected:hover, .dp-day[aria-selected="true"]:hover { background: var(--accent-light); }
.dp-day.in-range { background: var(--accent-glow-md); color: var(--accent-text); border-radius: 0; }
.dp-day.range-start { border-start-end-radius: 0; border-end-end-radius: 0; }
.dp-day.range-end { border-start-start-radius: 0; border-end-start-radius: 0; }
.dp-day.range-start.range-end { border-radius: var(--radius-sm); }
.dp-day.other-month { color: var(--text-disabled); pointer-events: none; }
.dp-day.is-disabled, .dp-day[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; text-decoration: line-through; }
.dp-day.is-disabled:hover { background: none; }
.dp-day.has-event::after { content: ''; position: absolute; inset-block-end: 4px; inset-inline-start: 50%; width: 4px; height: 4px; margin-inline-start: -2px; border-radius: 50%; background: var(--warning); }
.dp-day[aria-selected="true"].has-event::after { background: var(--text-on-accent); }
.dp-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--border-subtle); }
.dp-summary { font-size: var(--text-sm); color: var(--text-secondary); }
.dp-summary b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }   /* legacy */
.dp-dayname { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); padding: 6px 0; }
.dp-field { position: relative; width: 100%; max-width: 320px; }
.dp-field .input { cursor: pointer; }
.dp-field .popover { min-width: 0; width: 320px; }

/* ═══════════════════════════════════════════════════════════════
   HALF LENS DESIGN SYSTEM v4 — CHARTS & DATA VIZ
   Rendered by js/hl-charts.js from data-attributes (.hl-chart[data-chart]).
   Colours: --chart-1…6 (categorical, fixed order) · --chart-grid · --chart-axis.
   Mark specs: bars ≤24px, 4px rounded data-end, 2px lines, ≥8px end dots with
   2px surface ring, area wash ≈10%, hairline solid gridlines.
═══════════════════════════════════════════════════════════════ */

/* ── Series keys (legend swatches / tooltip keys / static colour hooks) ── */
.ck-1 { --key: var(--chart-1); } .ck-2 { --key: var(--chart-2); } .ck-3 { --key: var(--chart-3); }
.ck-4 { --key: var(--chart-4); } .ck-5 { --key: var(--chart-5); } .ck-6 { --key: var(--chart-6); }
.ck-muted, .ck-other { --key: var(--chart-axis); }
.ck-good { --key: var(--success); } .ck-warn { --key: var(--warning); } .ck-bad { --key: var(--danger); }
.ck-none { --key: transparent; }

.chart-key { display: inline-block; flex-shrink: 0; background: var(--key, var(--chart-1)); }
.chart-key.key-rect { width: 10px; height: 10px; border-radius: 3px; }
.chart-key.key-dot  { width: 8px; height: 8px; border-radius: 50%; }
.chart-key.key-line { width: 12px; height: 2px; border-radius: 2px; }

/* ── Chart host ── */
.hl-chart { position: relative; inline-size: 100%; min-inline-size: 0; color: var(--text-secondary); --chart-surface: var(--bg-surface); }
.hl-chart-plot { position: relative; border-radius: var(--radius-sm); outline: none; }
.hl-chart-plot:focus-visible { box-shadow: var(--focus-ring); }
.hl-chart-svg { display: block; max-inline-size: none; overflow: visible; direction: ltr; }
.hl-chart-svg text { font-family: var(--font-main); }
.hl-tick { font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.hl-val  { font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-donut-val { font-weight: 800; letter-spacing: -0.5px; }
.hl-donut-sub { font-size: var(--text-xs); font-weight: 600; }
.hl-gauge-val { font-weight: 800; letter-spacing: -0.5px; }

/* marks + hover lift */
.hl-mark { transition: opacity var(--transition-fast), filter var(--transition-fast); }
.hl-mark.is-muted { opacity: .38; }
.hl-chart-svg.has-active .hl-mark:not(.is-active) { opacity: .45; }
.hl-chart-svg.has-active .hl-mark.is-active { opacity: 1; filter: brightness(1.12); }
.hl-cross { opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); }
.hl-active-dots, .hl-end { pointer-events: none; }
.hl-hits rect { cursor: crosshair; }
.hl-chart-bar .hl-hits rect, .hl-chart-donut .hl-mark { cursor: pointer; }

/* first-render motion (reduced-motion neutralised globally) */
.hl-marks.is-anim .hl-mark { transform-box: fill-box; transform-origin: 50% 100%; animation: hl-chart-grow .7s var(--ease-emphasized) both; animation-delay: var(--d, 0s); }
.hl-chart-donut .hl-marks.is-anim .hl-mark { transform-origin: 50% 50%; animation: hl-chart-fade .6s var(--ease-standard) both; }
.hl-marks.is-anim .hl-line, .hl-line.is-anim { stroke-dasharray: 1; animation: hl-chart-draw 1.1s var(--ease-emphasized) both; }
.hl-marks.is-anim .hl-area, .hl-marks.is-anim .hl-end { animation: hl-chart-fade .8s .35s var(--ease-standard) both; }
@keyframes hl-chart-grow { from { transform: scaleY(0); } }
@keyframes hl-chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hl-chart-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hl-marks.is-anim .hl-mark, .hl-marks.is-anim .hl-line, .hl-line.is-anim, .hl-marks.is-anim .hl-area,
  .hl-marks.is-anim .hl-end, .chart-hbar-list.is-anim .chart-hbar-fill { animation: none; }
}

/* refetch keeps the frame */
.hl-chart[data-state="refreshing"] { opacity: .5; pointer-events: none; transition: opacity var(--transition-normal); }

/* ── Tooltip ── */
.hl-chart-tip {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: var(--z-tooltip);
  min-inline-size: 132px; max-inline-size: 240px; padding: 8px 10px; pointer-events: none;
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm); line-height: 1.45; color: var(--text-secondary);
  transition: transform 80ms linear;
}
.hl-chart-tip[hidden] { display: none; }
.hl-chart-tip-ttl { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); margin-block-end: 4px; }
.hl-chart-tip-row { display: flex; align-items: center; gap: 8px; }
.hl-chart-tip-row + .hl-chart-tip-row { margin-block-start: 2px; }
.hl-chart-tip-val { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-chart-tip-name { color: var(--text-muted); margin-inline-start: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Legend ── */
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-block-end: var(--space-3); }
.chart-legend-item {
  display: inline-flex; align-items: center; gap: 7px; min-block-size: 24px; padding-inline: 2px;
  font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); border-radius: var(--radius-xs);
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
button.chart-legend-item:hover { color: var(--text-primary); }
button.chart-legend-item[aria-pressed="false"] { opacity: .45; }
button.chart-legend-item[aria-pressed="false"] .chart-key { background: transparent; box-shadow: inset 0 0 0 1.5px var(--key); }
.chart-legend-val { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; margin-inline-start: auto; white-space: nowrap; }
.chart-legend-pct { min-inline-size: 3.2em; text-align: end; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart-legend-val + .chart-legend-pct { margin-inline-start: 0; }
.chart-legend-item > .chart-legend-pct:nth-child(3) { margin-inline-start: auto; }
.chart-legend.is-list { flex-direction: column; align-items: stretch; gap: 4px; margin: 0; min-inline-size: 0; }
.chart-legend.is-list .chart-legend-item { display: flex; padding-block: 6px; border-block-end: 1px solid var(--border-subtle); }
.chart-legend.is-list .chart-legend-item:last-child { border-block-end: 0; }
.chart-legend.is-list .chart-legend-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Hidden data table (becomes visible in "table view") ── */
.hl-chart:not(.is-table) .hl-chart-tablewrap {
  position: absolute !important; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hl-chart.is-table .hl-chart-plot, .hl-chart.is-table > .chart-legend, .hl-chart.is-table .chart-donut, .hl-chart.is-table .chart-hbar-list { display: none; }
.hl-chart.is-table .hl-chart-tablewrap { max-block-size: 360px; overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.hl-chart .hl-chart-table th { text-align: start; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); padding: 8px 12px; }
.hl-chart .hl-chart-table thead th { color: var(--text-muted); font-size: var(--text-xs); border-block-end: 1px solid var(--border-soft); }
.hl-chart .hl-chart-table th.num { text-align: end; }
.hl-chart .hl-chart-table td { padding-block: 8px; }

/* ── Horizontal bar / ranking ── */
.chart-hbar-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.chart-hbar-row { display: grid; grid-template-columns: minmax(84px, 32%) 1fr auto auto; align-items: center; gap: 12px; }
.chart-hbar-name { font-size: var(--text-base-sm); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-hbar-track { position: relative; block-size: 10px; border-start-end-radius: var(--radius-xs); border-end-end-radius: var(--radius-xs); background: var(--chart-grid); overflow: hidden; }
.chart-hbar-fill {
  display: block; block-size: 100%; background: var(--key, var(--chart-1));
  border-start-end-radius: var(--radius-xs); border-end-end-radius: var(--radius-xs);
  transition: inline-size var(--dur-slow) var(--ease-emphasized), opacity var(--transition-fast);
}
.chart-hbar-fill.is-muted { opacity: .4; }
.chart-hbar-list.is-anim .chart-hbar-fill { animation: hl-hbar-grow .9s var(--ease-emphasized) both; animation-delay: var(--d, 0s); }
@keyframes hl-hbar-grow { from { inline-size: 0; } }
.chart-hbar-val { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.chart-hbar-pct { font-weight: 600; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; min-inline-size: 2.6em; text-align: end; }
@media (max-width: 480px) {
  .chart-hbar-row { grid-template-columns: 1fr auto auto; row-gap: 6px; }
  .chart-hbar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Donut ── */
.chart-donut { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.chart-donut-plot { flex-shrink: 0; margin-inline: auto; }
.chart-donut > .chart-legend { flex: 1 1 180px; }

/* ── Gauge / progress ring ── */
.hl-chart-gauge { inline-size: auto; display: inline-flex; }
.chart-gauge-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.chart-gauge-label { font-size: var(--text-base-sm); font-weight: 600; color: var(--text-secondary); text-align: center; }
.chart-gauge-row { display: flex; flex-wrap: wrap; justify-content: space-around; gap: var(--space-6); }

/* ── Sparkline ── */
.hl-chart-spark { display: inline-block; inline-size: var(--spark-w, 96px); block-size: auto; vertical-align: middle; }
.hl-chart-spark.is-fluid { display: block; inline-size: 100%; }
.table .hl-chart-spark { --spark-w: 80px; }

/* ── KPI tile (neutral stat tile) ── */
.kpi {
  display: flex; flex-direction: column; gap: 6px; min-inline-size: 0;
  padding: var(--space-4) var(--space-5); background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.kpi-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.kpi-label svg { width: 14px; height: 14px; color: var(--text-muted); }
.kpi-value { font-size: var(--text-2xl); font-weight: 800; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.5px; }
.kpi-value small { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); letter-spacing: 0; margin-inline-start: 4px; }
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-block-start: 2px; }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-delta svg { width: 13px; height: 13px; }
.kpi-delta.is-good { color: var(--success-text); }
.kpi-delta.is-bad  { color: var(--danger-text); }
.kpi-delta.is-flat { color: var(--text-muted); }
.kpi-delta .vs { color: var(--text-muted); font-weight: 500; }
.kpi .hl-chart-spark { --spark-w: 88px; }
.stat-card .hl-chart-spark { margin-block-start: var(--space-3); --spark-w: 100%; display: block; }

/* ── Chart card container ── */
.chart-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0;
  padding: var(--space-5); background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.chart-card-head > div:first-child { min-inline-size: 0; }
.chart-card-title { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); line-height: 1.35; margin: 0; }
.chart-card-sub { font-size: var(--text-sm); color: var(--text-muted); margin-block-start: 2px; }
.chart-card-hero { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.chart-card-hero b { font-size: var(--text-3xl); font-weight: 800; color: var(--text-primary); letter-spacing: -1px; line-height: 1.1; }
.chart-card-hero b small { font-size: var(--text-base); font-weight: 600; color: var(--text-muted); letter-spacing: 0; margin-inline-start: 4px; }
.chart-card-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.chart-card-actions .segmented > button { height: 26px; padding-inline: 10px; font-size: var(--text-sm); }
.chart-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-block-start: var(--space-3); border-block-start: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); }
.chart-card-foot b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.chart-card-menu { position: relative; }
.chart-menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: var(--z-dropdown);
  min-inline-size: 184px; padding: 4px; display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.chart-menu[hidden] { display: none; }
.chart-menu > button {
  display: flex; align-items: center; gap: 8px; block-size: 34px; padding-inline: 10px; border-radius: var(--radius-sm);
  font-size: var(--text-base-sm); font-weight: 500; color: var(--text-secondary); text-align: start;
}
.chart-menu > button:hover, .chart-menu > button:focus-visible { background: var(--bg-card-hover); color: var(--text-primary); }
.chart-menu > button svg { width: 15px; height: 15px; }
.chart-menu > button[aria-checked="true"] { color: var(--accent-text); }
.chart-menu hr { border: 0; border-block-start: 1px solid var(--border-subtle); margin-block: 4px; }

/* ── States: skeleton + empty ── */
.chart-skel { display: flex; align-items: flex-end; gap: 10px; block-size: 220px; padding-block-end: 26px; padding-inline-start: 40px; border-block-end: 1px solid var(--chart-grid); }
.chart-skel .skel { flex: 1; max-inline-size: 24px; margin-inline: auto; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.chart-skel-bars .skel:nth-child(1) { block-size: 45%; } .chart-skel-bars .skel:nth-child(2) { block-size: 62%; }
.chart-skel-bars .skel:nth-child(3) { block-size: 38%; } .chart-skel-bars .skel:nth-child(4) { block-size: 74%; }
.chart-skel-bars .skel:nth-child(5) { block-size: 56%; } .chart-skel-bars .skel:nth-child(6) { block-size: 82%; }
.chart-skel-bars .skel:nth-child(7) { block-size: 64%; } .chart-skel-bars .skel:nth-child(8) { block-size: 88%; }
.chart-skel-bars .skel:nth-child(9) { block-size: 70%; } .chart-skel-bars .skel:nth-child(10) { block-size: 92%; }
.chart-skel-line { position: relative; align-items: stretch; }
.chart-skel-line .skel { display: none; }
.chart-skel-line .skel:first-child {
  display: block; flex: 1; max-inline-size: none; border-radius: 0; margin: 0;
  clip-path: polygon(0 72%, 12% 58%, 25% 64%, 38% 42%, 50% 50%, 63% 32%, 75% 40%, 88% 18%, 100% 26%, 100% 100%, 0 100%);
}
.chart-skel-rows { flex-direction: column; align-items: stretch; gap: 16px; block-size: auto; padding: 0; border: 0; }
.chart-skel-rows .skel { flex: none; max-inline-size: none; margin: 0; block-size: 10px; border-radius: var(--radius-xs); }
.chart-skel-rows .skel:nth-child(1) { inline-size: 92%; } .chart-skel-rows .skel:nth-child(2) { inline-size: 74%; }
.chart-skel-rows .skel:nth-child(3) { inline-size: 61%; } .chart-skel-rows .skel:nth-child(4) { inline-size: 45%; }
.chart-skel-rows .skel:nth-child(5) { inline-size: 30%; }
.chart-skel-ring { justify-content: center; align-items: center; block-size: auto; padding: 0; border: 0; }
.chart-skel-ring .skel {
  flex: none; max-inline-size: none; margin: 0; inline-size: 160px; block-size: 160px; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 54%, currentColor 55%); mask: radial-gradient(circle, transparent 54%, currentColor 55%);
}
.chart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  min-block-size: 200px; padding: var(--space-6); border: 1px dashed var(--border-soft); border-radius: var(--radius-md);
  color: var(--text-muted); font-size: var(--text-sm);
}
.chart-empty b { color: var(--text-primary); font-size: var(--text-base); font-weight: 700; }
.chart-empty-ico { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-md); background: var(--mode-badge-bg); border: 1px solid var(--border-subtle); color: var(--text-muted); margin-block-end: var(--space-2); }
.chart-empty-ico svg { width: 22px; height: 22px; }

/* ── Palette swatches (docs + product legends of the palette) ── */
.chart-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-3); }
.chart-swatch { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-card); text-align: start; cursor: pointer; transition: border-color var(--transition-fast); }
.chart-swatch:hover { border-color: var(--border-medium); }
.chart-swatch-chip { block-size: 44px; border-radius: var(--radius-sm); background: var(--key); }
.chart-swatch-chip.is-line { background: linear-gradient(var(--key), var(--key)) center / 100% 1px no-repeat, var(--bg-surface); border: 1px solid var(--border-subtle); }
.chart-swatch b { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.chart-swatch code { font-family: var(--font-code); font-size: var(--text-2xs); color: var(--text-muted); direction: ltr; text-align: start; }
.chart-swatch span { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.4; }

/* ── Mini usage table for "which chart" ── */
.chart-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.chart-pick-item { display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-card); }
.chart-pick-item .card-icon { width: 34px; height: 34px; }
.chart-pick-item b { display: block; font-size: var(--text-base-sm); color: var(--text-primary); }
.chart-pick-item p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; margin-block-start: 2px; }

/* ═══════════════════════════════════════════════════════════════
   COMPOSED: analytics dashboard + reports page
═══════════════════════════════════════════════════════════════ */
.chart-dash { display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }
.chart-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.chart-dash-head h3 { font-size: var(--text-xl); font-weight: 800; color: var(--text-primary); line-height: 1.3; }
.chart-dash-head p { font-size: var(--text-sm); color: var(--text-muted); }
.chart-dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.chart-dash-mid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-4); }
.chart-dash-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1180px) {
  .chart-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-dash-mid { grid-template-columns: minmax(0, 1fr); }
  .chart-dash-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-dash-bottom > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .chart-dash-kpis, .chart-dash-bottom { grid-template-columns: minmax(0, 1fr); }
}

/* Filter bar (one row above the content it scopes) */
.chart-filter-bar {
  display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.chart-filter-bar .input-group { gap: 4px; min-inline-size: 0; }
.chart-filter-bar .input-label { font-size: var(--text-xs); }
.chart-filter-bar .input { min-inline-size: 140px; }
.chart-filter-bar .chart-filter-end { margin-inline-start: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 640px) {
  .chart-filter-bar .input-group, .chart-filter-bar .input { inline-size: 100%; min-inline-size: 0; }
  .chart-filter-bar .input-group { flex: 1 1 100%; }
  .chart-filter-bar .chart-filter-end { margin-inline-start: 0; inline-size: 100%; }
  .chart-filter-bar .chart-filter-end .btn { flex: 1; }
}

.chart-reports-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.chart-reports-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
.chart-reports-side { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 1180px) {
  .chart-reports-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-reports-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .chart-reports-kpis { grid-template-columns: minmax(0, 1fr); } }

/* Report table extras */
.chart-report-table td .progress { inline-size: 88px; display: inline-block; vertical-align: middle; }
.chart-report-table td .pct { font-size: var(--text-xs); color: var(--text-muted); margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.chart-report-table tfoot td { font-variant-numeric: tabular-nums; }
.chart-report-table .over { color: var(--danger-text); font-weight: 700; }

/* Activity list (dashboard) */
.chart-activity-list { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.chart-activity-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 4px; border-block-end: 1px solid var(--border-subtle); }
.chart-activity-item:last-child { border-block-end: 0; }
.chart-activity-avatar { inline-size: 34px; block-size: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.chart-activity-avatar svg { width: 15px; height: 15px; }
.chart-activity-text { flex: 1; min-inline-size: 0; }
.chart-activity-text .act-title { font-size: var(--text-base-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-activity-text .act-time { font-size: var(--text-xs); color: var(--text-muted); }

/* forced-colors: keep marks visible */
@media (forced-colors: active) {
  .chart-key, .chart-hbar-fill { forced-color-adjust: none; }
  .hl-chart-tip { border: 1px solid CanvasText; }
}
.chart-report-table th, .chart-report-table td { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   HALF LENS DESIGN SYSTEM v4 — PAGE TEMPLATES
   App shell · dashboard · detail hero · list · settings · files ·
   auth · email preview · page states.
   Rules:
   • Page-level layout/composition ONLY. Primitives come from
     hl-core.css (btn, card, table, stat-card…), hl-patterns.css
     (.sb-item/.sb-grp/.sb-badge, .header-bar/.hdr-btn, .pagination…)
     and hl-charts.css (.hl-chart). Never redefine them here.
   • Tokens only, logical properties only → mirrors in RTL + LTR.
   • Responsive via container queries so templates behave the same
     inside a docs frame (.tpl-frame) and full-screen in product:
       container "app"  = .app-layout   (sidebar ⇄ drawer)
       container "page" = .page-content (content grids)
   • Legacy admin-panel names kept (.prof-hero, .prof-tab.active,
     .prof-tab-content.show, .set-group, .legal-*, .spec-*, .dash-*);
     ARIA state ([aria-selected], [aria-expanded], [hidden]) preferred.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TEMPLATE FRAME — contains a full page inside the docs
═══════════════════════════════════════════════════════════════ */
.tpl-frame {
  position: relative; isolation: isolate;
  height: var(--tpl-h, 680px); overflow: auto;
  background: var(--bg-base); color: var(--text-primary);
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.tpl-frame.is-auto { height: auto; }
.tpl-frame > .page-content { min-height: 100%; }

/* ═══════════════════════════════════════════════════════════════
   APP SHELL — .app-layout > .sidebar + .main-content
   Default: CSS-grid shell that fills its parent (frame or viewport).
   .app-layout.is-fixed → legacy product mode (fixed sidebar, body scroll).
═══════════════════════════════════════════════════════════════ */
.app-layout {
  container: app / inline-size;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "side main";
  height: 100%; min-height: 0;
  background: var(--bg-base);
}

/* .sidebar itself (+ .sb-* regions, .collapsed rail) is defined in hl-patterns.css.
   The shell only places it in the grid and turns it into a drawer on mobile. */
.app-layout > .sidebar { grid-area: side; height: 100%; min-height: 0; max-width: none; z-index: var(--z-sticky); }
.app-layout a.sb-user-profile { color: inherit; text-decoration: none; }
.app-layout > .sidebar.collapsed, .app-layout > .sidebar.is-collapsed { overflow-x: hidden; overflow-y: auto; }

.main-content {
  grid-area: main;
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; height: 100%;
  overflow-y: auto;
}

.sb-home { display: inline-flex; border-radius: var(--radius-sm); }

/* Page content — padding + container for responsive content grids */
.page-content {
  container: page / inline-size;
  flex: 1;
  padding: var(--space-6) var(--space-6) var(--space-10);
  display: flex; flex-direction: column; gap: var(--space-5);
  min-width: 0;
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.page-title { font-size: var(--text-2xl); font-weight: var(--weight-extrabold); line-height: var(--leading-tight); color: var(--text-primary); }
.page-sub { font-size: var(--text-base-sm); color: var(--text-secondary); margin-block-start: var(--space-1); }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.page-back { align-self: flex-start; }

/* Mobile scrim (drawer backdrop) */
.app-scrim {
  display: none; position: absolute; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: var(--bg-scrim);
  border: 0; padding: 0; cursor: pointer;
  animation: hl-fade var(--dur-normal) var(--ease-standard);
}

/* Header-bar (use .header-bar.header-bar-flush) sits at the top of the scrolling .main-content */
.main-content > .header-bar { flex-shrink: 0; }
.hdr-toggle svg { transition: transform var(--dur-normal) var(--ease-standard); }

/* ── Mobile: sidebar becomes an off-canvas drawer ──────────── */
@container app (max-width: 768px) {
  .app-layout > .sidebar, .app-layout > .sidebar.collapsed {
    --sb-mode: drawer;
    grid-area: auto;   /* abs-pos containing block = whole shell, not the empty side track */
    position: absolute; inset-block: 0; inset-inline-start: calc(-1 * var(--sb-w) - 24px);
    width: min(var(--sb-w), 82%); z-index: var(--z-drawer); padding-inline: var(--space-3);
    box-shadow: var(--shadow-xl); visibility: hidden;
    transition: inset-inline-start var(--dur-normal) var(--ease-emphasized), visibility 0s linear var(--dur-normal);
  }
  .app-layout > .sidebar.is-open {
    inset-inline-start: 0; visibility: visible;
    transition: inset-inline-start var(--dur-normal) var(--ease-emphasized), visibility 0s;
  }
  .app-layout > .sidebar.is-open ~ .app-scrim { display: block; }
  .page-content { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-4); }
  .main-content > .header-bar { padding-inline: var(--space-3); }
  .hdr-hide-sm { display: none !important; }
}

/* ── Product mode: fixed sidebar + document scroll ─────────── */
.app-layout.is-fixed { display: block; height: auto; min-height: 100vh; min-height: 100dvh; }
.app-layout.is-fixed > .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; height: auto; }
.app-layout.is-fixed .main-content { height: auto; min-height: 100vh; overflow: visible; margin-inline-start: var(--sb-w, 248px); transition: margin var(--dur-normal) var(--ease-standard); }
.app-layout.is-fixed .main-content > .header-bar { position: sticky; inset-block-start: 0; }
.app-layout.is-fixed .app-scrim { position: fixed; }
@container app (min-width: 769px) {
  .app-layout.is-fixed > .sidebar.collapsed ~ .main-content, .app-layout.is-fixed .main-content.collapsed { margin-inline-start: var(--sb-w-collapsed, 68px); }
}
@container app (max-width: 768px) {
  .app-layout.is-fixed .main-content { margin-inline-start: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED CONTENT GRIDS (respond to .page-content width)
═══════════════════════════════════════════════════════════════ */
.stats-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-4); }
.stats-grid.cols-3 { --cols: 3; }
.stats-grid.cols-5 { --cols: 5; }
.stat-card.sc-compact { padding: var(--space-4); }
.stat-card.sc-compact .stat-sub { margin-block-end: var(--space-2); }
.stat-card.sc-compact .stat-val { font-size: var(--text-xl); letter-spacing: -.3px; margin-block-end: var(--space-1); }
.stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.stat-card .stat-top .stat-sub { margin: 0; }
.stat-card .stat-top svg { width: 16px; height: 16px; }
.stat-note { font-size: var(--text-xs); color: var(--text-muted); }
.stat-note.is-danger { color: var(--danger-text); }
.stat-note.is-warn { color: var(--warning-text); }
.stat-val.is-danger { color: var(--danger-text); }
.stat-val .cur { font-size: .55em; font-weight: var(--weight-bold); opacity: .75; margin-inline-start: 4px; letter-spacing: 0; }

.content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.content-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@container page (max-width: 600px) {
  .stats-grid, .stats-grid.cols-5 { --cols: 2; }
}
@container page (max-width: 900px) {
  .stats-grid.cols-5 { --cols: 3; }
  .content-grid, .content-grid.even { grid-template-columns: minmax(0, 1fr); }
}
@container page (max-width: 560px) {
  .stats-grid.cols-3 { --cols: 1; }
  .page-title { font-size: var(--text-xl); }
}
@container page (max-width: 380px) {
  .stats-grid, .stats-grid.cols-5 { --cols: 1; }
}

/* Section header (legacy .dash-section-header) */
.dash-section { display: flex; flex-direction: column; gap: var(--space-3); }
.dash-section-header, .section-hdr { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dash-section-header strong, .section-hdr-title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-primary); }
.section-hdr-title svg { width: 18px; height: 18px; color: var(--accent-text); }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════════ */
.dash-welcome {
  position: relative; overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--space-6) var(--space-8);
}
.dash-welcome-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.dash-welcome-title { font-size: var(--text-xl); font-weight: var(--weight-extrabold); color: var(--text-primary); margin-block-end: var(--space-1); }
.dash-welcome-sub { font-size: var(--text-base); color: var(--text-secondary); }
.dash-welcome-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-3); }
.dash-welcome-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-glow); border: 1px solid var(--accent-glow-md); color: var(--accent-text);
}
.dash-welcome-icon svg { width: 24px; height: 24px; }

.dash-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.dash-qa-item {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 14px 16px; text-align: start; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  font-size: var(--text-base-sm); font-weight: var(--weight-semibold); color: var(--text-secondary);
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.dash-qa-item:hover { background: var(--bg-card-hover); border-color: var(--border-soft); color: var(--text-primary); }
.dash-qa-item:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }
.dash-qa-icon { position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.dash-qa-icon svg { width: 17px; height: 17px; }
.dash-qa-plus {
  position: absolute; inset-block-start: -4px; inset-inline-end: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--text-on-accent); border: 2px solid var(--bg-base);
  font-size: var(--text-2xs); font-weight: var(--weight-extrabold); line-height: 1;
}
.dash-qa-plus svg { width: 9px; height: 9px; stroke-width: 3.5; }
.dash-qa-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-alert {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card);
}
.dash-alert-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-3); }
.dash-alert-header .section-hdr-title svg { color: var(--warning-text); }
.dash-alert-list { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; }
.dash-alert-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg-overlay); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-base-sm);
}
.dash-alert-item.is-danger { --alert-c: var(--danger); }
.dash-alert-item.is-info { --alert-c: var(--accent); }
.dash-alert-item .ai-main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--text-primary); font-weight: var(--weight-semibold); }
.dash-alert-item .ai-main svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--alert-c, var(--warning)); }
.dash-alert-item .ai-sub { color: var(--text-muted); font-weight: var(--weight-medium); }

.dash-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.dash-bottom-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-card); min-height: 260px; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.dash-empty { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 160px; color: var(--text-muted); font-size: var(--text-base-sm); }
.dash-activity-list { display: flex; flex-direction: column; list-style: none; }
.dash-activity-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  border-block-end: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  font-size: var(--text-base-sm); color: var(--text-secondary);
  transition: background-color var(--transition-fast);
}
.dash-activity-item:last-child { border-block-end: 0; }
.dash-activity-item:hover { background: var(--mode-badge-bg); }
.dash-activity-item b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.dash-activity-item .act-body { flex: 1; min-width: 0; line-height: var(--leading-snug); }
.dash-activity-item time { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.act-ico { width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.act-ico svg { width: 15px; height: 15px; }

/* Project progress rows (dashboard) */
.proj-rows { display: flex; flex-direction: column; gap: var(--space-4); list-style: none; }
.proj-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-3); align-items: center; }
.proj-row .pr-name { font-size: var(--text-base-sm); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-row .pr-client { font-size: var(--text-xs); color: var(--text-muted); }
.proj-row .progress { grid-column: 1 / -1; }
.proj-row .pr-pct { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

@container page (max-width: 900px) {
  .dash-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-bottom-grid { grid-template-columns: minmax(0, 1fr); }
}
@container page (max-width: 560px) {
  .dash-welcome { padding: var(--space-5); }
  .dash-welcome-icon { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL PAGE — .prof-hero (project / client / vendor / profile)
═══════════════════════════════════════════════════════════════ */
.prof-hero {
  position: relative; overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-6) 0;
}
.prof-hero.no-tabs { padding-block-end: var(--space-6); }
.prof-hero > * { position: relative; z-index: 1; }
.prof-hero-top { display: flex; align-items: center; gap: var(--space-5); padding-block-end: var(--space-5); flex-wrap: wrap; }
.prof-avatar {
  position: relative; flex-shrink: 0;
  width: 80px; height: 80px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: var(--weight-extrabold);
  background: var(--accent-glow); color: var(--accent-text);
  border: 3px solid var(--accent-glow-md);
}
.prof-avatar svg { width: 34px; height: 34px; }
.prof-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-lg) - 3px); }
.prof-avatar.is-round, .prof-avatar.is-round img { border-radius: 50%; }
.prof-avatar-badge {
  position: absolute; inset-block-end: -4px; inset-inline-end: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--text-on-accent);
  border: 2px solid var(--bg-surface); box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.prof-avatar-badge svg { width: 12px; height: 12px; }
button.prof-avatar-badge:hover { background: var(--accent-light); transform: scale(1.1); }
button.prof-avatar-badge:focus-visible { border-radius: 50%; }
.prof-hero-info { flex: 1; min-width: min(240px, 100%); }
.prof-hero-title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.prof-hero-name { font-size: 22px; font-weight: var(--weight-extrabold); color: var(--text-primary); line-height: var(--leading-snug); }
.prof-hero-sub { font-size: var(--text-base-sm); color: var(--text-secondary); margin-block-start: 2px; }
.prof-hero-meta { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; margin-block-start: var(--space-2); font-size: var(--text-base-sm); color: var(--text-secondary); list-style: none; }
.prof-hero-meta > span, .prof-hero-meta > li { display: inline-flex; align-items: center; gap: 5px; }
.prof-hero-meta svg { width: 14px; height: 14px; color: var(--text-muted); }
.prof-hero-meta.is-pills > span, .prof-hero-meta.is-pills > li {
  padding: 4px 10px; background: var(--mode-badge-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
}
.prof-hero-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.prof-hero-stats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-3); padding-block-end: var(--space-5); }
.prof-hero-stats .stat-card { background: var(--bg-glass); }

/* Tabs — role="tablist" preferred; legacy .prof-tab.active + onclick still styled */
.prof-tabs {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--space-6)); padding-inline: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}
.prof-tabs::-webkit-scrollbar { display: none; }
.prof-tab {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 12px 16px; margin-block-end: -1px;
  font-size: var(--text-base-sm); font-weight: var(--weight-semibold); color: var(--text-muted); white-space: nowrap;
  border-block-end: 2px solid transparent; cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.prof-tab svg { width: 15px; height: 15px; }
.prof-tab:hover { color: var(--text-primary); }
.prof-tab.active, .prof-tab.on, .prof-tab[aria-selected="true"] { color: var(--accent-text); border-block-end-color: var(--accent); }
.prof-tab:focus-visible { box-shadow: inset var(--focus-ring); border-radius: var(--radius-sm); }
.prof-tab .badge-count { background: var(--mode-badge-bg); color: var(--text-secondary); }
.prof-tab[aria-selected="true"] .badge-count, .prof-tab.active .badge-count { background: var(--accent); color: var(--text-on-accent); }

.prof-tab-content { display: flex; flex-direction: column; gap: var(--space-4); }
.prof-tab-content[hidden] { display: none; }
.prof-tab-content:not([role="tabpanel"]):not(.show) { display: none; }   /* legacy: shown via .show */

.prof-form-section {
  position: relative; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-card);
}
.prof-form-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-extrabold); color: var(--text-primary); margin-block-end: var(--space-5); }
.prof-form-title svg { width: 18px; height: 18px; color: var(--accent-text); }
.prof-form-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-4); }
.prof-form-head .prof-form-title { margin: 0; }
.prof-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.prof-photo-card {
  position: relative; overflow: hidden; padding: var(--space-4); text-align: center;
  background: var(--bg-card); border: 1px dashed var(--border-medium); border-radius: var(--radius-lg);
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}
.prof-photo-card:hover { border-color: var(--border-accent); background: var(--bg-card-hover); }
.prof-notes-area { min-height: 80px; }

/* Table helpers used by detail/list templates */
.cell-progress { display: flex; align-items: center; gap: var(--space-2); min-width: 110px; }
.cell-progress .progress { flex: 1; }
.cell-progress b { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 3ch; }
.cell-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-medium); }
.amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt.is-pos, .table td.amt.is-pos { color: var(--success-text); font-weight: var(--weight-semibold); }
.amt.is-warn, .table td.amt.is-warn { color: var(--warning-text); font-weight: var(--weight-semibold); }
.amt.is-neg, .table td.amt.is-neg { color: var(--danger-text); font-weight: var(--weight-semibold); }

/* Total bar — blue summary footer under an items table */
.total-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  margin-block-start: var(--space-3); padding: 12px 16px;
  background: var(--accent); color: var(--text-on-accent);
  border-radius: var(--radius-md);
}
.total-bar-label { font-size: var(--text-base); font-weight: var(--weight-bold); }
.total-bar-val { font-size: var(--text-lg); font-weight: var(--weight-extrabold); font-variant-numeric: tabular-nums; }
.total-bar-parts { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); opacity: .9; }

@container page (max-width: 700px) {
  .prof-hero { padding: var(--space-5) var(--space-4) 0; }
  .prof-tabs { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-2); }
  .prof-hero-stats { --cols: 1; }
  .prof-avatar { width: 64px; height: 64px; font-size: 22px; }
  .prof-hero-actions { width: 100%; }
  .prof-form-section { padding: var(--space-4); }
  .prof-photos { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   LIST PAGE — filters toolbar + table + pagination
═══════════════════════════════════════════════════════════════ */
.list-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: 14px 20px; border-block-end: 1px solid var(--border-subtle);
}
.list-toolbar .input-wrap { flex: 1 1 220px; max-width: 320px; }
.list-toolbar .select { width: auto; min-width: 140px; }
.list-toolbar .lt-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.list-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: 10px 20px; border-block-end: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); }
.list-foot { padding: 14px 20px; border-block-start: 1px solid var(--border-subtle); }
.client-logo {
  width: 36px; height: 36px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); border: 1px solid var(--border-soft);
  font-weight: var(--weight-extrabold); font-size: var(--text-base-sm);
}
.client-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.table .user-row .u-name { white-space: nowrap; }
@container page (max-width: 640px) {
  .list-toolbar { padding: var(--space-3); }
  .list-toolbar .input-wrap { max-width: none; flex-basis: 100%; }
  .list-toolbar .select { flex: 1; min-width: 0; }
  .list-toolbar .lt-end { margin-inline-start: 0; width: 100%; justify-content: space-between; }
  .list-chips, .list-foot { padding-inline: var(--space-3); }
  .hide-sm { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS — accordion nav + panels
═══════════════════════════════════════════════════════════════ */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
/* .settings-nav / .settings-nav-item come from hl-patterns.css — layout only here */
.settings-layout > .settings-nav { position: sticky; inset-block-start: var(--space-4); width: auto; }
.settings-nav .settings-nav-item { width: 100%; text-align: start; }
.settings-nav:has(.set-group) { flex-direction: column; overflow: visible; }
.settings-content { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

.set-group + .set-group { margin-block-start: 2px; }
.set-group-hdr {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 10px; border-radius: var(--radius-md); text-align: start;
  font-size: var(--text-base-sm); font-weight: var(--weight-bold); color: var(--text-primary);
  transition: background-color var(--transition-fast);
}
.set-group-hdr:hover { background: var(--mode-badge-bg); }
.set-group-hdr > svg:first-child { width: 15px; height: 15px; color: var(--text-muted); }
.set-group-hdr .sg-label { flex: 1; }
.set-group-count { font-size: var(--text-2xs); font-weight: var(--weight-bold); padding: 1px 6px; border-radius: var(--radius-full); background: var(--mode-badge-bg); color: var(--text-muted); }
.set-group-hdr .sg-chev { width: 14px; height: 14px; color: var(--text-muted); transition: transform var(--transition-fast); }
.set-group-hdr[aria-expanded="true"] .sg-chev, .set-group.open .sg-chev { transform: rotate(180deg); }
.set-group-items { display: none; padding-inline-start: var(--space-2); }
.set-group-items.show, .set-group-hdr[aria-expanded="true"] + .set-group-items { display: block; }
.set-group-items[hidden] { display: none; }
.set-group-items .settings-nav-item { padding: 8px 10px; font-size: var(--text-sm); }

.set-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.set-panel[hidden] { display: none; }
.set-panel:not([role]):not(.show) { display: none; }   /* legacy .set-panel.show */

.settings-section {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-card);
}
.settings-section-title { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-primary); margin-block-end: var(--space-1); }
.settings-section-desc { font-size: var(--text-base-sm); color: var(--text-secondary); margin-block-end: var(--space-5); }
.settings-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px 0; border-block-end: 1px solid var(--border-subtle); }
.toggle-row:first-child { padding-block-start: 0; }
.toggle-row:last-child, .toggle-row:not(:has(+ .toggle-row)) { border-block-end: 0; padding-block-end: 0; }
.toggle-info { flex: 1; min-width: 0; }
.toggle-info .t-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); }
.toggle-info .t-desc { font-size: var(--text-sm); color: var(--text-muted); margin-block-start: 2px; }
.danger-zone { border-color: var(--danger-border); background: var(--danger-bg); }
.danger-zone .settings-section-title { color: var(--danger-text); }

/* Legal editor (Terms / Privacy) */
.legal-editor-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-5); }
.legal-editor-title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); font-weight: var(--weight-extrabold); color: var(--text-primary); }
.legal-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--accent-glow); border: 1px solid var(--accent-glow-md); color: var(--accent-text); }
.legal-icon svg { width: 22px; height: 22px; }
.legal-editor-ver { font-size: var(--text-base-sm); color: var(--text-muted); margin-block-start: var(--space-1); }
.legal-sections { display: flex; flex-direction: column; gap: var(--space-4); }
.legal-section-card {
  position: relative; overflow: hidden;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--sc-blue-grad); border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.legal-section-card:hover, .legal-section-card:focus-within { border-color: var(--accent-light); box-shadow: var(--shadow-md); }
.legal-section-card.legal-purple { background: var(--sc-purple-grad); border-color: var(--purple-border); }
.legal-section-card.legal-purple:hover, .legal-section-card.legal-purple:focus-within { border-color: var(--purple); }
.legal-section-head { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3); }
.legal-num { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: var(--accent-text); font-size: var(--text-sm); font-weight: var(--weight-extrabold); font-variant-numeric: tabular-nums; }
.legal-purple .legal-num { background: var(--purple-bg); color: var(--purple-text); }
.legal-section-inputs { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; min-width: 0; }
.legal-delete {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text);
  opacity: .75; transition: var(--transition-fast);
}
.legal-delete svg { width: 15px; height: 15px; }
.legal-delete:hover { opacity: 1; background: var(--danger); color: var(--text-on-accent); border-color: var(--danger); }
.legal-use-list { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.legal-use-list .hl-checkbox { font-size: var(--text-sm); }
.legal-textarea { min-height: 150px; line-height: 2; }
.legal-add-section {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: var(--space-5); border: 2px dashed var(--border-medium); border-radius: var(--radius-lg);
  font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-muted);
  transition: var(--transition-normal);
}
.legal-add-section svg { width: 18px; height: 18px; }
.legal-add-section:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-glow-md); }
.legal-divider { border: 0; height: 1px; margin-block: var(--space-8) var(--space-6); background: var(--border-soft); }
.legal-history-title { display: flex; align-items: center; gap: 10px; font-size: var(--text-lg); font-weight: var(--weight-extrabold); color: var(--text-primary); margin-block-end: var(--space-4); }
.legal-history-title svg { width: 20px; height: 20px; color: var(--accent-text); }
.legal-ver-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.legal-ver-item {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--sc-blue-grad); border: 1px solid var(--sc-blue-border); box-shadow: var(--shadow-card);
  transition: var(--transition-fast);
}
.legal-ver-item:hover { border-color: var(--border-medium); }
.legal-ver-item .ver-num { font-size: var(--text-md); font-weight: var(--weight-extrabold); color: var(--text-primary); white-space: nowrap; }
.legal-ver-item .ver-date { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.legal-ver-item .ver-status { margin-inline-start: auto; }
.legal-ver-item .ver-load {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text);
  transition: var(--transition-fast);
}
.legal-ver-item .ver-load svg { width: 13px; height: 13px; }
.legal-ver-item .ver-load:hover { background: var(--warning); color: var(--text-inverse); border-color: var(--warning); }

/* Vendor specialty tree */
.spec-tree { display: flex; flex-direction: column; gap: 10px; }
.spec-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: border-color var(--transition-normal), box-shadow var(--transition-normal); }
.spec-item:hover { border-color: var(--border-soft); }
.spec-item.open, .spec-item:has(> .spec-item-hdr[aria-expanded="true"]) { border-color: var(--border-accent); box-shadow: var(--shadow-card); }
.spec-item-hdr {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: 14px 18px; text-align: start;
  background: var(--bg-overlay);
  transition: background var(--transition-fast);
}
.spec-item-hdr:hover { background: var(--bg-card-hover); }
.spec-item-hdr:focus-visible { box-shadow: inset var(--focus-ring); border-radius: 0; }
.spec-item.open .spec-item-hdr, .spec-item-hdr[aria-expanded="true"] { background: var(--sc-blue-grad); }
.spec-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.spec-ico svg { width: 16px; height: 16px; }
.spec-item-hdr .spec-name { flex: 1; min-width: 0; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-primary); }
.spec-item-hdr .spec-count { font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 3px 10px; border-radius: var(--radius-full); background: var(--accent-glow); border: 1px solid var(--accent-glow-md); color: var(--accent-text); white-space: nowrap; }
.spec-item-hdr .spec-arrow { width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--dur-normal) var(--ease-standard); }
.spec-item.open .spec-arrow, .spec-item-hdr[aria-expanded="true"] .spec-arrow { transform: rotate(180deg); color: var(--accent-text); }
.spec-sub-list { display: none; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 12px 18px 16px; border-block-start: 1px solid var(--border-subtle); background: var(--bg-card); }
.spec-item.open .spec-sub-list, .spec-item-hdr[aria-expanded="true"] + .spec-sub-list { display: flex; }
.spec-sub-list[hidden] { display: none; }
.spec-sub-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding-block: 4px; padding-inline: 14px 6px;
  background: var(--bg-overlay); border: 1px solid var(--border-soft); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.spec-sub-chip:hover { border-color: var(--border-medium); color: var(--text-primary); }
.spec-sub-remove { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--transition-fast); }
.spec-sub-remove svg { width: 11px; height: 11px; }
.spec-sub-remove:hover { color: var(--text-on-accent); background: var(--danger); }
.spec-sub-remove:focus-visible { border-radius: 50%; }
.spec-add-sub {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: var(--radius-full);
  background: var(--accent-glow-md); border: 1px dashed var(--border-accent);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent-text);
  transition: var(--transition-normal);
}
.spec-add-sub svg { width: 13px; height: 13px; }
.spec-add-sub:hover { background: var(--accent-glow); border-color: var(--accent); }
.spec-add-input { height: 30px; width: 160px; padding-inline: 12px; border-radius: var(--radius-full); font-size: var(--text-sm); }

@container page (max-width: 760px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .settings-nav { position: static; }
  .settings-section { padding: var(--space-4); }
  .legal-section-inputs { grid-template-columns: minmax(0, 1fr) 64px; }
}

/* ═══════════════════════════════════════════════════════════════
   FILES — type-coloured file cards
═══════════════════════════════════════════════════════════════ */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--space-3); list-style: none; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: var(--space-3); list-style: none; }
.file-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  padding: 14px; text-align: start;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.file-card:hover { border-color: var(--border-soft); background: var(--bg-card-hover); box-shadow: var(--shadow-md); }
.file-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.file-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-link { position: static; flex: 1; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius-xs); }
.file-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); }   /* whole card clickable */
.file-link:focus-visible { box-shadow: none; }
.file-card:has(.file-link:focus-visible) { box-shadow: var(--focus-ring); }
.file-name { display: block; font-size: var(--text-base-sm); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.file-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.file-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.file-card .file-actions { position: relative; z-index: 1; }
.file-card .file-check { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 1; opacity: 0; transition: opacity var(--transition-fast); }
.file-card:hover .file-check, .file-card .file-check:focus-within, .file-card:has(.file-check input:checked) .file-check { opacity: 1; }

.file-icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; position: relative;
  background: var(--mode-badge-bg); color: var(--text-secondary); border: 1px solid var(--border-subtle);
}
.file-icon svg { width: 18px; height: 18px; }
.file-icon[data-ext]::after {
  content: attr(data-ext); position: absolute; inset-block-end: -5px; inset-inline-end: -6px;
  padding: 0 4px; border-radius: var(--radius-xs); font-size: 8px; font-weight: var(--weight-extrabold); letter-spacing: .3px; line-height: 13px;
  background: currentColor; box-shadow: 0 0 0 2px var(--bg-surface);
}
.file-icon[data-ext]::before {   /* label text drawn on top of the currentColor chip */
  content: attr(data-ext); position: absolute; inset-block-end: -5px; inset-inline-end: -6px; z-index: 1;
  padding: 0 4px; font-size: 8px; font-weight: var(--weight-extrabold); letter-spacing: .3px; line-height: 13px; color: var(--text-on-accent);
}
.ft-pdf   { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-border); }
.ft-xls   { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.ft-img   { background: var(--accent-glow); color: var(--accent-text); border-color: var(--accent-glow-md); }
.ft-ppt   { background: var(--purple-bg);  color: var(--purple-text);  border-color: var(--purple-border); }
.ft-video { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.ft-doc   { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-border); }
.ft-zip   { background: var(--mode-badge-bg); color: var(--text-secondary); border-color: var(--border-soft); }

/* Media thumbnail (image / video files) — gradient placeholder until a real <img> loads */
.file-thumb {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden;
  background: var(--thumb-a, var(--bg-overlay));
  display: flex; align-items: center; justify-content: center; color: var(--text-on-accent);
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb > svg { width: 26px; height: 26px; opacity: .85; }
.file-thumb .thumb-dur { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--bg-scrim); color: var(--text-on-accent); font-size: var(--text-2xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.file-thumb.t-amber  { --thumb-a: var(--warning); --thumb-b: var(--danger); }
.file-thumb.t-green  { --thumb-a: var(--info);    --thumb-b: var(--success); }
.file-thumb.t-purple { --thumb-a: var(--purple);  --thumb-b: var(--accent); }

/* Folder card */
.folder-card {
  position: relative; display: flex; align-items: center; gap: var(--space-3); min-width: 0;
  padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  text-align: start; color: inherit; text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.folder-card:hover { border-color: var(--border-soft); background: var(--bg-card-hover); }
.folder-card:focus-visible { border-radius: var(--radius-lg); }
.folder-card > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--folder-c, var(--warning)); fill: var(--folder-fill, var(--warning-bg)); }
.folder-card .file-name { flex: 1; }

/* Storage meter */
.storage-meter { display: flex; flex-direction: column; gap: var(--space-2); min-width: min(260px, 100%); }
.storage-meter .progress-stack > span:nth-child(1) { background: var(--danger); }
.storage-meter .progress-stack > span:nth-child(2) { background: var(--accent); }
.storage-meter .progress-stack > span:nth-child(3) { background: var(--warning); }
.storage-meter .progress-stack > span:nth-child(4) { background: var(--success); }
.storage-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--text-muted); list-style: none; }
.storage-legend li { display: inline-flex; align-items: center; gap: 5px; }

/* List view */
.file-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); }
.file-grid.is-list .file-card { flex-direction: row; align-items: center; border: 0; border-radius: 0; box-shadow: none; border-block-end: 1px solid var(--border-subtle); padding-block: 10px; }
.file-grid.is-list > li:last-child .file-card { border-block-end: 0; }
.file-grid.is-list .file-card:hover { transform: none; }
.file-grid.is-list .file-thumb { display: none; }
.file-grid.is-list .file-card-top { flex: 1; }
.file-grid.is-list .file-card-foot { gap: var(--space-4); }
.file-grid.is-list .file-check { position: static; opacity: 1; order: -1; }

/* ═══════════════════════════════════════════════════════════════
   AUTH — login, vendor OTP, split brand panel
═══════════════════════════════════════════════════════════════ */
.auth-page {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: var(--bg-base);
}

.auth-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  padding: var(--space-8) var(--space-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.auth-card.is-plain { background: transparent; border: 0; box-shadow: none; padding-inline: 0; }
.auth-logo { display: flex; justify-content: center; margin-block-end: var(--space-6); }
.auth-logo .hl-logo { --logo-h: 40px; }
.auth-icon-box {
  width: 56px; height: 56px; border-radius: var(--radius-lg); margin: 0 auto var(--space-4);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-glow); border: 1px solid var(--accent-glow-md); color: var(--accent-text);
}
.auth-icon-box svg { width: 26px; height: 26px; }
.auth-icon-box.otp-icon { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); box-shadow: none; }
.auth-title { text-align: center; font-size: var(--text-2xl); font-weight: 900; color: var(--text-primary); line-height: var(--leading-tight); margin-block-end: 6px; }
.auth-subtitle { text-align: center; font-size: var(--text-base-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-block-end: var(--space-5); }
.auth-card.is-start .auth-title, .auth-card.is-start .auth-subtitle { text-align: start; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-form fieldset { min-inline-size: 0; border: 0; padding: 0; margin: 0; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
/* LTR-only values (email) inside an RTL field: keep the gap on the icon side */
[dir="rtl"] .input-wrap > .input[dir="ltr"] { padding-inline: 14px 40px; text-align: left; }
[dir="rtl"] .input-wrap > .input[dir="ltr"]::placeholder { text-align: right; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-base-sm); }
.auth-test-hint {
  padding: 12px 14px; border-radius: var(--radius-md); margin-block-end: var(--space-4);
  background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text);
  font-size: var(--text-sm); line-height: 1.8;
}
.auth-test-hint code { padding: 1px 6px; border-radius: var(--radius-xs); background: var(--success-bg); font-family: var(--font-code); font-size: var(--text-xs); direction: ltr; unicode-bidi: isolate; }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.auth-footer { text-align: center; font-size: var(--text-base-sm); color: var(--text-muted); margin-block-start: var(--space-4); }
.auth-email-display { color: var(--accent-text); font-weight: var(--weight-semibold); direction: ltr; unicode-bidi: isolate; }
.auth-resend-timer { text-align: center; font-size: var(--text-base-sm); color: var(--text-muted); margin-block-end: var(--space-4); }
.auth-resend-timer b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.auth-legal { text-align: center; font-size: var(--text-xs); color: var(--text-muted); margin-block-start: var(--space-6); }
/* legacy buttons (v3) — new markup uses .btn .btn-primary .btn-lg .btn-block */
.auth-btn, .auth-btn-ghost { width: 100%; }
.auth-btn { height: var(--control-lg); border-radius: var(--radius-md); background: var(--accent); color: var(--text-on-accent); font-weight: var(--weight-bold); font-size: var(--text-md); transition: background-color var(--transition-fast); }
.auth-btn:hover { background: var(--accent-light); }
.auth-btn-ghost { height: var(--control-md); margin-block-start: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--border-soft); color: var(--text-secondary); font-weight: var(--weight-semibold); font-size: var(--text-base-sm); }
.auth-btn-ghost:hover { background: var(--mode-badge-bg); color: var(--text-primary); }

/* OTP boxes — digits always LTR */
.auth-otp-inputs { display: flex; justify-content: center; gap: var(--space-3); direction: ltr; margin-block: var(--space-5) var(--space-4); }
.auth-otp-inputs input {
  width: 60px; height: 68px; min-width: 0; flex: 0 1 60px; text-align: center;
  font-family: var(--font-main); font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
  color: var(--accent-text); caret-color: var(--accent);
  background: var(--bg-input); border: 1.5px solid var(--border-medium); border-radius: var(--radius-md);
  outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.auth-otp-inputs input:focus { border-color: var(--accent); background: var(--bg-input-focus); box-shadow: 0 0 0 3px var(--accent-glow); border-radius: var(--radius-md); }
.auth-otp-inputs input:not(:placeholder-shown), .auth-otp-inputs input.filled { border-color: var(--border-accent); }
.auth-otp-inputs[data-state="error"] input { border-color: var(--danger); animation: hl-shake .35s var(--ease-standard); }
.auth-otp-inputs[data-state="ok"] input { border-color: var(--success); color: var(--success-text); }
@keyframes hl-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Split layout · wide brand panel + narrow form column (brand sits on the inline-start side) */
.auth-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 26%);
  min-height: 100%; background: var(--bg-base); container: auth / inline-size;
}
.auth-brand {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: clamp(24px, 3vw, 40px);
  background: var(--bg-brand); color: var(--text-on-brand);
  border-inline-end: 1px solid var(--border-subtle);
}
.auth-brand .hl-logo { --logo-h: clamp(72px, 12cqi, 150px); color: var(--text-on-brand); align-self: flex-start; }
.auth-brand-body { margin-block: auto; max-width: 520px; }
.auth-brand-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; margin-block-end: var(--space-5);
  font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-full);
  color: var(--text-on-brand); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.auth-brand-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-lighter-on-brand); }
.auth-brand-title { font-size: clamp(28px, 4.2cqi, 48px); font-weight: 900; line-height: 1.2; }
.auth-brand-title span { display: block; }
.auth-brand-title span + span { color: var(--accent-lighter-on-brand); }
.auth-brand-sub { font-size: var(--text-md); color: var(--text-on-brand-muted); margin-block-start: var(--space-4); max-width: 44ch; line-height: var(--leading-relaxed); }
.auth-form-side { display: flex; flex-direction: column; justify-content: center; padding: var(--space-10) var(--space-6); background: var(--bg-base); }
.auth-form-side .auth-card { max-width: 400px; width: 100%; margin-inline: auto; }
.auth-form-side .auth-title { font-size: var(--text-2xl); }
.auth-form-side .auth-subtitle { margin-block-end: var(--space-8); }
.auth-copyright { margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border-subtle); text-align: center; font-size: var(--text-xs); color: var(--text-muted); }
@container auth (max-width: 760px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { gap: var(--space-4); border-inline-end: 0; border-block-end: 1px solid var(--border-subtle); }
  .auth-brand .hl-logo { --logo-h: 56px; }
  .auth-brand-pill, .auth-brand-sub { display: none; }
  .auth-brand-title { font-size: var(--text-xl); }
  .auth-form-side { padding: var(--space-8) var(--space-4); }
}
@media (max-width: 480px) {
  .auth-card { padding: var(--space-6) var(--space-4); }
  .auth-otp-inputs { gap: var(--space-2); }
}
.auth-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) { .auth-steps { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════════
   EMAIL PREVIEW — docs chrome around table-based emails.
   The email markup itself uses inline styles + hex (email clients
   ignore <style>/vars) — the ONE documented exception to tokens-only.
═══════════════════════════════════════════════════════════════ */
.email-preview { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); }
.email-preview-label { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 10px 16px; font-size: var(--text-base-sm); font-weight: var(--weight-bold); color: var(--text-secondary); background: var(--bg-overlay); border-block-end: 1px solid var(--border-subtle); }
.email-preview-label svg { width: 16px; height: 16px; }
.email-preview-label .email-subject { font-weight: var(--weight-medium); color: var(--text-muted); }
.email-frame { display: flex; justify-content: center; padding: var(--space-6) var(--space-4); background: var(--bg-overlay); overflow-x: auto; }
.email-frame > * { width: 100%; max-width: 600px; }
@media (max-width: 480px) { .email-frame { padding: var(--space-3) 0; } }

/* ═══════════════════════════════════════════════════════════════
   PAGE STATES — 404 · 500 · maintenance · loading
═══════════════════════════════════════════════════════════════ */
.state-page {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); padding: var(--space-10) var(--space-5); text-align: center;
  background: var(--bg-base);
}
.state-page .hl-logo { --logo-h: 30px; margin-block-end: var(--space-4); opacity: .9; }
.state-code {
  font-size: clamp(72px, 16cqi, 132px); font-weight: 900; line-height: 1; letter-spacing: -4px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.state-page.is-danger .state-code { color: var(--danger-text); }
.state-icon {
  width: 76px; height: 76px; border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-glow); border: 1px solid var(--border-accent); color: var(--accent-text);
}
.state-icon svg { width: 34px; height: 34px; }
.state-icon.is-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); box-shadow: none; }
.state-icon.is-warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); box-shadow: none; }
.state-title { font-size: var(--text-2xl); font-weight: var(--weight-extrabold); color: var(--text-primary); line-height: var(--leading-tight); }
.state-desc { font-size: var(--text-md); color: var(--text-secondary); max-width: 46ch; line-height: var(--leading-relaxed); }
.state-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); }
.state-search { width: min(380px, 100%); }
.state-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-size: var(--text-base-sm); list-style: none; }
.state-ref { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border-radius: var(--radius-full); background: var(--mode-badge-bg); border: 1px solid var(--border-soft); font-size: var(--text-sm); color: var(--text-muted); }
.state-ref code { font-family: var(--font-code); color: var(--text-secondary); direction: ltr; unicode-bidi: isolate; }
.state-eta { width: min(360px, 100%); text-align: start; }
.state-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.state-grid .tpl-frame { --tpl-h: 460px; container-type: inline-size; }
@media (max-width: 900px) { .state-grid { grid-template-columns: minmax(0, 1fr); } }

/* Loading page skeleton (compose with .skel from core) */
.skel-page { display: flex; flex-direction: column; gap: var(--space-4); }
.skel-row { display: flex; align-items: center; gap: var(--space-3); }
.skel-hero { height: 128px; border-radius: var(--radius-lg); }
.skel-stat { height: 96px; border-radius: var(--radius-lg); }
.skel-line { height: 12px; border-radius: var(--radius-full); }
.skel-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skel-block { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.skel-sidebar { display: flex; flex-direction: column; gap: var(--space-2); padding-block-start: var(--space-8); }
.skel-sidebar .skel { height: 34px; border-radius: var(--radius-md); }

/* ═══════════════════════════════════════════════════════════════
   HALF LENS DESIGN SYSTEM v4 — MOTION UTILITIES
   Opt-in hover + entrance effects. All neutralised by the global
   prefers-reduced-motion rule in hl-core.css.
═══════════════════════════════════════════════════════════════ */

/* Hover */
.hover-underline { position: relative; text-decoration: none; }
.hover-underline::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: -2px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: var(--hl-origin-end, left); transition: transform var(--transition-normal); }
[dir="rtl"] .hover-underline::after { transform-origin: right; }
.hover-underline:hover::after, .hover-underline:focus-visible::after { transform: scaleX(1); }

/* Entrance (play once) */
.anim-fade-in  { animation: hl-fade-in var(--dur-slow) var(--ease-standard) both; }
.anim-slide-up { animation: hl-slide-up var(--dur-slow) var(--ease-emphasized) both; }
.anim-pop      { animation: hl-pop .45s var(--ease-spring) both; }
@keyframes hl-fade-in  { from { opacity: 0; } }
@keyframes hl-slide-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes hl-pop      { from { opacity: 0; transform: scale(.85); } }
.stagger > * { animation: hl-slide-up var(--dur-slow) var(--ease-emphasized) both; }
.stagger > :nth-child(2) { animation-delay: 60ms; } .stagger > :nth-child(3) { animation-delay: 120ms; }
.stagger > :nth-child(4) { animation-delay: 180ms; } .stagger > :nth-child(5) { animation-delay: 240ms; }
.stagger > :nth-child(6) { animation-delay: 300ms; }

/* Loading text */
.anim-shimmer-text {
  background: linear-gradient(90deg, var(--text-muted) 25%, var(--text-primary) 50%, var(--text-muted) 75%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hl-shimmer-text 3s linear infinite;
}
@keyframes hl-shimmer-text { to { background-position: -200% center; } }