/* ============================================================
   RAX — Design System · "مِحطّة / Station" (2026)
   A dark operations console, not a decorated dashboard.
   Separation by 1px rules instead of elevation · one cool signal
   colour · severity rails on table rows · compact density ·
   tabular figures · squared chrome.
   OKLCH tokens · cascade layers · container queries ·
   cross-document view transitions · self-hosted fonts · RTL-aware
   Every original class name is preserved.

   Two axes still work: data-mode (dark default / light) ×
   data-theme (11 accents, cyan default). The identity lives in
   @layer station at the foot of this file — the structure applies
   to BOTH modes, so the toggle changes the ground, not the product.
   ============================================================ */

/* ── Self-hosted fonts (no third-party CDN) ──────────────────
   IBM Plex Sans Arabic covers BOTH Arabic and Latin — one family for the
   whole UI. Latin subset routes via unicode-range; Arabic via its own file. */
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibmplex-latin-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibmplex-latin-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibmplex-latin-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibmplex-latin-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibmplex-arabic-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibmplex-arabic-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibmplex-arabic-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibmplex-arabic-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF; }

@property --logo-angle { syntax: '<angle>'; inherits: false; initial-value: 210deg; }
@property --glow-a     { syntax: '<number>'; inherits: false; initial-value: 0.35; }

/* `station` is declared LAST so it wins over components without needing
   !important or inflated selectors — it carries the identity's structure
   (borders instead of elevation, severity rails, compact rows, squared chrome). */
@layer tokens, base, layout, components, utilities, responsive, station;

/* ============================================================
   TOKENS — light canvas, violet accent
   ============================================================ */
@layer tokens {
  /* Accent hue (--ph) + chroma (--pc). The [data-theme] blocks below override
     ONLY these two; every accent token derives from them in both modes. */
  /* Station's signal colour. Must match [data-theme="cyan"] below — that is the
     default pick, so the palette dropdown shows a matching active dot. */
  :root { --ph: 202; --pc: .15; }

  :root, :root[data-mode="light"] {
    color-scheme: light;

    /* Accent (switchable) — light-mode tones derived from --ph/--pc */
    --p:        oklch(51% var(--pc) var(--ph));
    --p-hover:  oklch(45% var(--pc) var(--ph));
    --p-soft:   oklch(93% .05 var(--ph));
    --p-strong: oklch(44% calc(var(--pc) - .02) var(--ph));
    --on-p:     #fff;
    --a:        oklch(62% calc(var(--pc) - .02) calc(var(--ph) + 18));

    /* Semantic hues. green/yellow are darkened from the previous theme because
       both are used as TEXT (badge label = its own --bc), where the old values
       measured 4.44 and 2.25 against a white card — the yellow was effectively
       unreadable. Measured by canvas rasterisation, not by parsing the computed
       string: OKLCH does not survive a naive rgb() regex. */
    --green:  oklch(52% .15 155);   /* 4.98 on white */
    --yellow: oklch(54% .13 85);    /* 5.07 on white — was 2.25 */
    --red:    oklch(55% .21 25);    /* 5.41 on white */
    --blue:   oklch(58% .13 230);
    --purple: oklch(55% .2 300);
    --orange: oklch(62% .19 45);

    /* Accent-derived */
    --p-glow: oklch(from var(--p) l c h / .3);
    --p-ring: color-mix(in srgb, var(--p) 30%, transparent);
    --a-soft: oklch(from var(--a) l c h / .14);
    --green-soft:  oklch(from var(--green)  l c h / .12);
    --red-soft:    oklch(from var(--red)    l c h / .12);
    --yellow-soft: oklch(from var(--yellow) l c h / .14);
    --blue-soft:   oklch(from var(--blue)   l c h / .12);
    --purple-soft: oklch(from var(--purple) l c h / .12);
    --orange-soft: oklch(from var(--orange) l c h / .12);

    /* Surfaces — Station's light counterpart. Same structure as dark (rules,
       not elevation); cooler and flatter than the previous light theme so the
       two modes read as one identity rather than two different products. */
    --bg-0: #F4F6F8;
    --bg-1: #FFFFFF;
    --bg-2: #FFFFFF;
    --bg-3: #EDF0F3;
    --bg-glass: color-mix(in srgb, #F4F6F8 84%, transparent);
    --border:   #DCE1E7;
    --border-2: #C2C9D2;
    --surface-1: oklch(24% .02 258 / .04);
    --surface-2: oklch(24% .02 258 / .07);
    --t1: #14171C;
    --t2: #4A515C;
    --t3: #6E7681;

    /* No bloom in either mode — Station separates with rules. */
    --aur-1: transparent;
    --aur-2: transparent;
    --aur-3: transparent;

    --sans: 'IBM Plex Sans Arabic', 'Cairo', system-ui, 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
    --disp: var(--sans);
    --util: var(--sans);

    /* Tight radii are a load-bearing part of the identity, not a detail. */
    --r: 6px; --r-sm: 4px; --r-xs: 3px;
    --sidebar-w: 236px;
    --tr: 140ms ease;

    --shadow-sm: none;                        /* cards use rules, not elevation */
    --shadow:    0 8px 24px rgb(15 23 42 / .12);
    --shadow-lg: 0 18px 44px rgb(15 23 42 / .16);
  }

  /* ── DARK MODE (light is default; users toggle to dark) ── */
  :root[data-mode="dark"] {
    color-scheme: dark;

    --p:        oklch(72% calc(var(--pc) - .05) var(--ph));
    --p-hover:  oklch(78% calc(var(--pc) - .07) var(--ph));
    --p-soft:   oklch(30% .07 var(--ph));
    --p-strong: oklch(81% calc(var(--pc) - .1) var(--ph));
    --on-p:     oklch(18% .05 var(--ph));
    --a:        oklch(74% calc(var(--pc) - .03) calc(var(--ph) + 18));

    /* Station semantics: readable on the near-black ground, and distinct from
       the cyan signal so state never reads as "interactive". */
    --green:  #4ED18A;
    --yellow: #E0B057;
    --red:    #F0687E;
    --blue:   #5EB3E8;
    --purple: #A78BF0;
    --orange: #E8A05A;

    /* Station surfaces — literal hex so the shipped colours are exactly the
       ones in the proposal. Relative-colour syntax and color-mix both accept
       hex, so every derived token below still works unchanged. */
    --bg-0: #0C0E12;    /* canvas   */
    --bg-1: #12161C;    /* cards    */
    --bg-2: #151A21;    /* raised: modals, dropdowns, table head */
    --bg-3: #151A21;
    --bg-glass: color-mix(in srgb, #0C0E12 84%, transparent);
    --border:   #242B36;
    --border-2: #333A47;
    --surface-1: oklch(100% 0 0 / .035);
    --surface-2: oklch(100% 0 0 / .06);
    --t1: #DDE3EC;
    --t2: #939DAD;
    /* Lifted from the proposal's #6B7484, which measured 3.85 on the card —
       under AA. #818A99 is 5.21 and reads identically as "tertiary". */
    --t3: #818A99;

    /* No atmospheric bloom: Station separates with rules, not glow. */
    --aur-1: transparent;
    --aur-2: transparent;
    --aur-3: transparent;

    /* Cards carry no elevation (see @layer station). These survive for things
       that genuinely float above content — modals, dropdowns, toasts — where
       a border alone would leave them ambiguous against the page behind. */
    --shadow-sm: none;
    --shadow:    0 8px 24px rgb(0 0 0 / .5);
    --shadow-lg: 0 18px 48px rgb(0 0 0 / .62);
  }

  /* ── 10 accent styles — each sets only the accent hue + chroma ── */
  [data-theme="indigo"]  { --ph: 277; --pc: .22; }
  [data-theme="violet"]  { --ph: 300; --pc: .20; }
  [data-theme="blue"]    { --ph: 255; --pc: .18; }
  [data-theme="cyan"]    { --ph: 202; --pc: .15; }   /* Station default signal */
  [data-theme="teal"]    { --ph: 185; --pc: .12; }
  [data-theme="emerald"] { --ph: 162; --pc: .15; }
  [data-theme="green"]   { --ph: 145; --pc: .16; }
  [data-theme="amber"]   { --ph: 75;  --pc: .15; }
  [data-theme="orange"]  { --ph: 50;  --pc: .18; }
  [data-theme="rose"]    { --ph: 5;   --pc: .20; }
  [data-theme="pink"]    { --ph: 350; --pc: .19; }
}

/* ============================================================
   BASE
   ============================================================ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg-0);
    color: var(--t1);
    font-family: var(--sans);
    font-size: 14px;
    min-block-size: 100dvh;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--p-soft); color: var(--p-hover); }

  * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; border: 2px solid var(--bg-0); }
  ::-webkit-scrollbar-thumb:hover { background: var(--t3); }

  :where(a, button, input, select, textarea, summary, [tabindex], [popovertarget]):focus-visible {
    outline: 2px solid var(--p);
    outline-offset: 2px;
    border-radius: inherit;
  }
  :where(a, button):focus:not(:focus-visible) { outline: none; }

  h1, h2, h3, .card-title, .page-heading h1 { text-wrap: balance; }
  p, .sub, .form-hint, .stat-label, .empty-state p { text-wrap: pretty; }

  /* Aurora — subtle painted wash on the light canvas (no per-frame blur) */
  .aurora {
    position: fixed; inset: 0; z-index: -2; overflow: hidden;
    background: var(--bg-0);
    background-image:
      radial-gradient(60vw 55vw at 85% -12%, var(--aur-1), transparent 60%),
      radial-gradient(50vw 50vw at 5% 108%, var(--aur-2), transparent 60%),
      radial-gradient(34vw 34vw at 50% 40%, var(--aur-3), transparent 66%);
  }
  .aurora::before, .aurora::after, .aurora .blob { display: none; }

  .grid-overlay {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
    background-image:
      linear-gradient(oklch(0.3 0.03 279 / .03) 1px, transparent 1px),
      linear-gradient(90deg, oklch(0.3 0.03 279 / .03) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 100%);
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 921px) and (update: fast) {
    .aurora { animation: drift 30s ease-in-out infinite alternate; }
  }
  @keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-3vw, 2vw) scale(1.05); }
    100% { transform: translate(2vw, -2vw) scale(.98); }
  }

  label { display: block; font-size: 11.5px; font-weight: 600; color: var(--t2); margin-bottom: 6px; letter-spacing: .2px; }
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=datetime-local], select, textarea {
    inline-size: 100%; background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 10px 13px; color: var(--t1);
    font-family: var(--sans); font-size: 13px; outline: none;
    transition: border-color var(--tr), box-shadow var(--tr);
  }
  textarea { resize: vertical; min-block-size: 76px; field-sizing: content; max-block-size: 40svh; }
  input::placeholder, textarea::placeholder { color: var(--t3); }
  input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--p); box-shadow: 0 0 0 3px var(--p-ring); outline: none;
  }
  input[type=color] { padding: 3px; height: 40px; cursor: pointer; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-sm); }
  select option { background: var(--bg-2); color: var(--t1); }
  input[type=checkbox], input[type=radio] { inline-size: 16px; block-size: 16px; cursor: pointer; accent-color: var(--p); }

  @media (prefers-contrast: more) { :focus-visible { outline-width: 3px; } }
}

/* ============================================================
   VIEW TRANSITIONS — cross-document, progressive
   ============================================================ */
@view-transition { navigation: auto; }
.sidebar   { view-transition-name: sidebar; }
.topbar    { view-transition-name: topbar; }
.page-body { view-transition-name: page; }
::view-transition-group(sidebar), ::view-transition-group(topbar) { animation: none; }
::view-transition-old(sidebar), ::view-transition-new(sidebar),
::view-transition-old(topbar),  ::view-transition-new(topbar) { animation: none; mix-blend-mode: normal; }
::view-transition-old(page) { animation: vt-out .16s ease both; }
::view-transition-new(page) { animation: vt-in .26s cubic-bezier(.2,.7,.3,1) both; }
@keyframes vt-out { to   { opacity: 0; translate: -12px 0; } }
@keyframes vt-in  { from { opacity: 0; translate:  12px 0; } }
:dir(rtl) ::view-transition-old(page) { animation-name: vt-out-rtl; }
:dir(rtl) ::view-transition-new(page) { animation-name: vt-in-rtl; }
@keyframes vt-out-rtl { to   { opacity: 0; translate: 12px 0; } }
@keyframes vt-in-rtl  { from { opacity: 0; translate: -12px 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 1ms !important; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
@layer layout {
  .layout { display: flex; min-block-size: 100dvh; }
  .main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; margin-inline-start: var(--sidebar-w); transition: margin var(--tr); }

  .sidebar {
    inline-size: var(--sidebar-w);
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 120;
    display: flex; flex-direction: column;
    background: var(--bg-1);
    border-inline-end: 1px solid var(--border);
    overflow-y: auto; overflow-x: hidden;
    transition: transform var(--tr);
  }
  .sidebar-logo { display: flex; align-items: center; gap: 12px; padding: 20px 18px 16px; text-decoration: none; border-bottom: 1px solid var(--border); }
  .logo-mark {
    inline-size: 40px; block-size: 40px; flex-shrink: 0; border-radius: 12px;
    display: grid; place-items: center; color: var(--on-p);
    font-family: var(--mono); font-weight: 700; font-size: 15px;
    background: linear-gradient(135deg, var(--p), var(--a));
    box-shadow: 0 4px 14px -2px var(--p-glow);
    position: relative;
  }
  .logo-mark span { position: relative; z-index: 1; color: var(--on-p); }
  .logo-text b { display: block; font-size: 15px; letter-spacing: -.1px; color: var(--t1); font-weight: 700; }
  .logo-text i { font-style: normal; font-size: 10px; color: var(--t3); font-family: var(--mono); letter-spacing: .5px; text-transform: uppercase; }
  .logo-text i.maint { color: var(--orange); animation: blink 1.6s infinite; }

  .nav-section { padding: 14px 12px 0; }
  .nav-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3); padding: 0 10px 6px; }
  .nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
  .nav-list a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: var(--r-sm);
    color: var(--t2); text-decoration: none; font-weight: 500; font-size: 13.5px;
    position: relative; transition: color var(--tr), background var(--tr);
  }
  .nav-list a .ico { flex-shrink: 0; opacity: .7; transition: transform var(--tr); }
  .nav-list a:hover { color: var(--t1); background: var(--surface-1); }
  .nav-list a:hover .ico { opacity: 1; transform: scale(1.08); }
  .nav-list a.active { color: var(--p); background: var(--p-soft); font-weight: 600; }
  .nav-list a.active .ico { color: var(--p); opacity: 1; }
  .nav-badge { margin-inline-start: auto; font-size: 9.5px; font-weight: 700; font-family: var(--mono); padding: 2px 7px; border-radius: 8px; background: var(--orange-soft); color: var(--orange); }
  .nav-count { margin-inline-start: auto; font-size: 10.5px; font-family: var(--mono); color: var(--t3); background: var(--surface-1); padding: 1px 8px; border-radius: 8px; }

  .sidebar-footer { margin-top: auto; padding: 14px 12px; border-top: 1px solid var(--border); }
  .user-card { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-sm); transition: border-color var(--tr); }
  .user-card:hover { border-color: var(--border-2); }
  .avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: 0 2px 6px -1px oklch(0.28 0.05 279 / .3); }
  .user-card .u-info { flex: 1; min-inline-size: 0; }
  .user-card .u-info b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t1); }
  .user-card .u-info span { font-size: 10.5px; color: var(--t3); text-transform: capitalize; }
  .user-card .logout-btn { color: var(--t3); padding: 5px; border-radius: 6px; display: grid; place-items: center; transition: color var(--tr), background var(--tr); }
  .user-card .logout-btn:hover { color: var(--red); background: var(--red-soft); }
  /* Logout controls are POST buttons (CSRF-safe) styled as their old links. */
  button.logout-btn, button.cmdk-item { background: none; border: 0; font: inherit; cursor: pointer; }
  button.cmdk-item { width: 100%; text-align: start; }

  .topbar {
    block-size: 62px; position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 12px; padding: 0 26px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border-bottom: 1px solid var(--border);
  }
  .topbar-title { font-size: 16px; font-weight: 700; flex: 1; display: flex; align-items: center; gap: 10px; color: var(--t1); }
  .topbar-title .crumb { color: var(--t3); font-weight: 400; font-size: 13px; }
  .topbar-actions { display: flex; align-items: center; gap: 8px; }

  .page-body { padding: 26px 28px 60px; flex: 1; }
  .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
  .page-heading h1 { font-size: 25px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; color: var(--t1); }
  .page-heading h1 .glow { background: linear-gradient(in oklab 120deg, var(--p), var(--a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .page-heading .sub { color: var(--t3); font-size: 12.5px; margin-top: 5px; }
  .heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {
  .tb-btn {
    block-size: 36px; min-inline-size: 36px; padding: 0 10px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-1);
    color: var(--t2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: var(--sans); font-size: 12px; font-weight: 600; text-decoration: none; transition: border-color var(--tr), color var(--tr), box-shadow var(--tr);
  }
  .tb-btn:hover { border-color: var(--p); color: var(--p); box-shadow: var(--shadow-sm); }
  .tb-btn kbd { font-family: var(--mono); font-size: 9.5px; background: var(--surface-1); padding: 2px 5px; border-radius: 4px; color: var(--t3); border: 1px solid var(--border); }

  /* Light/dark toggle — show the icon of the CURRENT mode */
  .mode-toggle .mode-ico-sun, .mode-toggle .mode-ico-moon { display: inline-flex; }
  .mode-toggle .mode-ico-moon { display: none; }
  :root[data-mode="dark"] .mode-toggle .mode-ico-sun { display: none; }
  :root[data-mode="dark"] .mode-toggle .mode-ico-moon { display: inline-flex; }
  @media (prefers-color-scheme: dark) {
    :root[data-mode="auto"] .mode-toggle .mode-ico-sun { display: none; }
    :root[data-mode="auto"] .mode-toggle .mode-ico-moon { display: inline-flex; }
  }
  .credits-chip { display: inline-flex; align-items: center; gap: 7px; block-size: 36px; padding: 0 14px; border-radius: 18px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: oklch(0.55 0.13 74); background: var(--yellow-soft); border: 1px solid oklch(from var(--yellow) l c h / .3); }
  .maint-chip { display: inline-flex; align-items: center; gap: 6px; block-size: 36px; padding: 0 13px; border-radius: 18px; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--orange); background: var(--orange-soft); text-decoration: none; border: 1px solid oklch(from var(--orange) l c h / .35); animation: maint-pulse 2s infinite; }
  @keyframes maint-pulse { 0%,100% { box-shadow: 0 0 0 0 oklch(from var(--orange) l c h / .3); } 55% { box-shadow: 0 0 0 6px transparent; } }

  .dropdown { position: relative; }
  .dropdown-menu {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-inline-size: 180px;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 6px; z-index: 300; box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .dropdown-menu.open { opacity: 1; transform: none; pointer-events: auto; }
  .dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; border-radius: 7px; border: 0; background: none; cursor: pointer; color: var(--t2); font-size: 12.5px; font-family: var(--sans); text-decoration: none; text-align: start; transition: background var(--tr), color var(--tr); }
  .dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-1); color: var(--t1); }
  .dropdown-menu .active { color: var(--p); }
  .theme-dot { inline-size: 14px; block-size: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px oklch(0.2 0 0 / .1); }

  .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr); }
  .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
  .card-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--t1); }
  .card-title .ico { color: var(--p); }
  .card-body { padding: 18px; }

  .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
  .stat-card { --sc: var(--p); --sc-soft: var(--p-soft); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr); animation: pageIn .4s both; animation-delay: calc(sibling-index() * .05s); }
  .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .stat-card::before { content: ''; position: absolute; top: 0; inset-inline: 0; block-size: 3px; background: var(--sc); opacity: 0; transition: opacity var(--tr); }
  .stat-card:hover::before { opacity: 1; }
  .stat-card.c-green  { --sc: var(--green);  --sc-soft: var(--green-soft); }
  .stat-card.c-yellow { --sc: var(--yellow); --sc-soft: var(--yellow-soft); }
  .stat-card.c-purple { --sc: var(--purple); --sc-soft: var(--purple-soft); }
  .stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .stat-icon { inline-size: 40px; block-size: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--sc-soft, var(--p-soft)); color: var(--sc, var(--p)); }
  .stat-icon.c-cyan   { --sc: var(--a);      --sc-soft: var(--a-soft); }
  .stat-icon.c-green  { --sc: var(--green);  --sc-soft: var(--green-soft); }
  .stat-icon.c-red    { --sc: var(--red);    --sc-soft: var(--red-soft); }
  .stat-icon.c-yellow { --sc: var(--yellow); --sc-soft: var(--yellow-soft); }
  .stat-icon.c-orange { --sc: var(--orange); --sc-soft: var(--orange-soft); }
  .stat-icon.c-blue   { --sc: var(--blue);   --sc-soft: var(--blue-soft); }
  .stat-icon.c-purple { --sc: var(--purple); --sc-soft: var(--purple-soft); }
  .stat-trend { font-size: 11px; font-family: var(--mono); color: var(--t3); display: flex; align-items: center; gap: 4px; }
  .stat-trend.up { color: var(--green); } .stat-trend.down { color: var(--red); }
  .stat-value { font-size: 28px; font-weight: 700; font-family: var(--mono); letter-spacing: -1px; line-height: 1; color: var(--t1); }
  .stat-label { color: var(--t3); font-size: 11.5px; margin-top: 6px; letter-spacing: .2px; }

  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; }
  thead th { padding: 11px 14px; text-align: start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--t3); border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-3); }
  thead th a { color: inherit; text-decoration: none; }
  thead th a:hover { color: var(--p); }
  tbody tr { border-bottom: 1px solid var(--border); transition: background var(--tr); content-visibility: auto; contain-intrinsic-size: auto 45px; }
  tbody tr:last-child { border-bottom: 0; }
  tbody tr:hover { background: var(--surface-1); }
  td { padding: 12px 14px; font-size: 13px; vertical-align: middle; color: var(--t1); }
  /* isolate (not text-align) so a neighbouring Arabic label cannot reorder a key
     string or an IP, while these stay aligned with the rest of an RTL table. */
  .key-mono { font-family: var(--mono); font-size: 11.5px; color: var(--p); letter-spacing: .2px; direction: ltr; unicode-bidi: isolate; }
  .mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
  .muted, .text-muted { color: var(--t3); } .dim { color: var(--t2); }
  .fs10 { font-size: 10px; } .fs11 { font-size: 11px; } .fs12 { font-size: 12px; } .fs13 { font-size: 13px; }

  .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; --bc: var(--a); background: oklch(from var(--bc) l c h / .12); color: var(--bc); border: 1px solid oklch(from var(--bc) l c h / .28); }
  .badge-dot { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; }
  .badge-active   { --bc: var(--green); }
  .badge-active .badge-dot { animation: blink 2s infinite; }
  .badge-pending  { --bc: oklch(0.58 0.13 74); }
  .badge-lifetime { --bc: var(--a); }
  .badge-expired  { --bc: oklch(0.58 0.13 74); }
  .badge-banned   { --bc: var(--red); }
  .badge-paused   { --bc: var(--purple); }
  .badge-inactive { --bc: var(--t3); }
  .badge-admin    { --bc: var(--orange); }
  .badge-reseller { --bc: var(--blue); }
  .badge-info     { --bc: var(--a); }

  .geo-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t2); white-space: nowrap; }
  .geo-pill .flag, .flag { font-size: 14px; line-height: 1; }
  img.flag-img { display: inline-block; vertical-align: -2px; inline-size: 20px; block-size: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); flex-shrink: 0; }
  .flag-emoji { display: inline-block; line-height: 1; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: 10px; font-size: 13px; font-weight: 600; font-family: var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; border: 1px solid transparent; position: relative; transition: background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr), transform var(--tr); }
  .btn:active { transform: scale(.97); }
  .btn-primary { color: var(--on-p); background: var(--p); box-shadow: 0 2px 8px -2px var(--p-glow); }
  .btn-primary:hover { background: var(--p-hover); box-shadow: 0 4px 14px -2px var(--p-glow); }
  .btn-ghost, .btn-secondary { color: var(--t1); border-color: var(--border); background: var(--bg-1); box-shadow: var(--shadow-sm); }
  .btn-ghost:hover, .btn-secondary:hover { border-color: var(--p); color: var(--p); }
  .btn-danger { color: var(--red); background: var(--red-soft); border-color: oklch(from var(--red) l c h / .28); }
  .btn-danger:hover { background: var(--red); color: #fff; box-shadow: 0 4px 14px -3px oklch(from var(--red) l c h / .5); }
  .btn-success { color: var(--green); background: var(--green-soft); border-color: oklch(from var(--green) l c h / .28); }
  .btn-success:hover { background: var(--green); color: #fff; }
  .btn-sm { padding: 6px 11px; font-size: 11.5px; border-radius: 8px; }
  .btn-icon { padding: 5px; inline-size: 30px; block-size: 30px; }
  .btn-group { display: flex; gap: 4px; flex-wrap: wrap; }
  /* License-keys row actions — always a 3-per-row grid of icon buttons that
     stacks downward. display:contents lets each inline <form> promote its
     button to a direct grid cell. */
  .key-actions { display: grid; grid-template-columns: repeat(3, auto); gap: 4px; inline-size: max-content; }
  .key-actions form { display: contents; }
  .btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }

  .copy-btn { cursor: pointer; color: var(--t3); background: none; border: 0; padding: 3px; border-radius: 5px; display: inline-grid; place-items: center; transition: color var(--tr), background var(--tr); }
  .copy-btn:hover { color: var(--p); background: var(--p-soft); }
  .copy-btn.copied { color: var(--green); }

  .form-group { margin-bottom: 15px; }
  .form-control { }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-hint { font-size: 11px; color: var(--t3); margin-top: 5px; line-height: 1.5; }
  .input-flex { display: flex; gap: 8px; }
  .input-flex > :first-child { flex: 1; }
  .checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 12.5px; color: var(--t2); cursor: pointer; }

  .segmented { display: inline-flex; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
  .segmented label { display: block; margin: 0; cursor: pointer; }
  .segmented input { display: none; }
  .segmented span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--t3); transition: background var(--tr), color var(--tr); }
  .segmented input:checked + span { background: var(--bg-1); color: var(--p); box-shadow: var(--shadow-sm); }

  .alert { padding: 12px 15px; border-radius: var(--r-sm); margin-bottom: 16px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid; animation: slideDown .28s ease both; --ac: var(--blue); background: oklch(from var(--ac) l c h / .1); border-color: oklch(from var(--ac) l c h / .28); color: oklch(from var(--ac) calc(l - .08) c h); }
  .alert .ico { flex-shrink: 0; margin-top: 1px; color: var(--ac); }
  .alert-success { --ac: var(--green); }
  .alert-error, .alert-danger { --ac: var(--red); }
  .alert-warning { --ac: oklch(0.58 0.13 74); }
  .alert-info    { --ac: var(--blue); }

  .modal-overlay { display: none; position: fixed; inset: 0; z-index: 400; background: oklch(0.3 0.03 279 / .32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 18px; overflow-y: auto; overscroll-behavior: contain; }
  .modal-overlay.open { display: flex; animation: fadeIn .18s ease; }
  .modal { margin: auto; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); inline-size: 100%; max-inline-size: 520px; max-block-size: 92svh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn .26s cubic-bezier(.2, .9, .3, 1.2) both; position: relative; z-index: 1; }
  .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-2); z-index: 2; }
  .modal-header h3 { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--t1); }
  .modal-header h3 .ico { color: var(--p); }
  .modal-close { background: none; border: 0; color: var(--t3); font-size: 17px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color var(--tr), background var(--tr); line-height: 1; }
  .modal-close:hover { color: var(--red); background: var(--red-soft); }
  .modal-body { padding: 18px; }
  .modal-footer { padding: 13px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; background: var(--bg-2); }
  body.modal-open { overflow: hidden; touch-action: none; }

  .pagination { display: flex; align-items: center; gap: 4px; justify-content: center; padding: 16px; flex-wrap: wrap; }
  .pagination a, .pagination span { display: grid; place-items: center; min-inline-size: 34px; block-size: 34px; padding: 0 6px; border-radius: 8px; font-size: 12px; font-weight: 600; font-family: var(--mono); text-decoration: none; border: 1px solid var(--border); color: var(--t2); background: var(--bg-1); transition: border-color var(--tr), color var(--tr), background var(--tr); }
  .pagination a:hover { border-color: var(--p); color: var(--p); }
  .pagination .current { background: var(--p); color: var(--on-p); border-color: var(--p); box-shadow: 0 2px 8px -2px var(--p-glow); }
  .pagination .gap { border: 0; background: none; }

  .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; padding: 12px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); }
  .filter-bar input, .filter-bar select { inline-size: auto; min-inline-size: 0; flex: 1 1 130px; }
  .filter-bar .results-count { color: var(--t3); font-size: 11.5px; font-family: var(--mono); padding: 0 4px; }

  .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .stat-chip { --cc: var(--p); display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid var(--border); color: var(--t2); transition: border-color var(--tr), color var(--tr), background var(--tr); background: var(--bg-1); }
  .stat-chip strong { font-family: var(--mono); font-size: 12.5px; }
  .stat-chip:hover, .stat-chip.active { border-color: var(--cc); color: var(--cc); background: color-mix(in oklab, var(--cc) 8%, var(--bg-1)); }
  .stat-chip.c-green  { --cc: var(--green); }
  .stat-chip.c-yellow { --cc: oklch(0.58 0.13 74); }
  .stat-chip.c-red    { --cc: var(--red); }
  .stat-chip.c-purple { --cc: var(--purple); }
  .stat-chip.c-blue   { --cc: var(--blue); }

  .empty-state { text-align: center; padding: 56px 20px; color: var(--t3); }
  .empty-state .ico { inline-size: 42px; block-size: 42px; margin-bottom: 14px; opacity: .5; }
  .empty-state p { font-size: 13.5px; }
  .empty-state a { color: var(--p); }

  #toast-container { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
  .toast { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 11px 15px; font-size: 12.5px; min-inline-size: 230px; max-inline-size: 340px; display: flex; align-items: center; gap: 9px; box-shadow: var(--shadow-lg); color: var(--t1); animation: toastIn .3s cubic-bezier(.2, .9, .3, 1.2) both; }
  :dir(rtl) .toast { animation-name: toastInRtl; }
  .toast.success .ico { color: var(--green); } .toast.error .ico { color: var(--red); } .toast.info .ico { color: var(--blue); }
  .toast.out { opacity: 0; transform: translateX(20px); transition: opacity .3s, transform .3s; }
  /* In RTL the container sits at the LEFT edge, so the shared +20px exit slid the
     toast INWARD across the page instead of off-screen. Mirrors :dir(rtl) .toast above. */
  :dir(rtl) .toast.out { transform: translateX(-20px); }

  #cmdk-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: oklch(0.3 0.03 279 / .35); backdrop-filter: blur(4px); padding: 12svh 18px 18px; justify-content: center; align-items: flex-start; }
  #cmdk-overlay.open { display: flex; animation: fadeIn .15s ease; }
  .cmdk { inline-size: 100%; max-inline-size: 560px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); animation: modalIn .22s cubic-bezier(.2, .9, .3, 1.15) both; }
  .cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--border); }
  .cmdk-input-row .ico { color: var(--p); flex-shrink: 0; }
  #cmdk-input { flex: 1; background: none; border: 0; outline: none; color: var(--t1); font-size: 15px; font-family: var(--sans); padding: 0; box-shadow: none; }
  .cmdk-list { max-block-size: 46svh; overflow-y: auto; padding: 7px; }
  .cmdk-group { font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3); padding: 9px 11px 4px; }
  .cmdk-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px; color: var(--t2); text-decoration: none; font-size: 13.5px; cursor: pointer; }
  .cmdk-item .ico { color: var(--t3); flex-shrink: 0; }
  .cmdk-item.sel { background: var(--p-soft); color: var(--p); }
  .cmdk-item.sel .ico { color: var(--p); }
  .cmdk-item kbd { margin-inline-start: auto; font-family: var(--mono); font-size: 10px; color: var(--t3); }
  .cmdk-empty { padding: 26px; text-align: center; color: var(--t3); font-size: 13px; }

  .progress { background: var(--surface-2); border-radius: 8px; block-size: 6px; overflow: hidden; }
  .progress-bar { block-size: 100%; border-radius: 8px; background: linear-gradient(in oklab 90deg, var(--p), var(--a)); transition: width .5s; }
  .countdown { font-family: var(--mono); font-size: 11px; }
  .countdown.warn { color: oklch(0.58 0.13 74); } .countdown.crit { color: var(--red); animation: blink 1.4s infinite; }

  .chart-canvas { inline-size: 100%; display: block; }
  .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .bar-row .bar-label { inline-size: 130px; font-size: 12px; color: var(--t2); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bar-row .bar-track { flex: 1; block-size: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
  .bar-row .bar-fill { block-size: 100%; border-radius: 6px; background: linear-gradient(in oklab 90deg, var(--p), var(--a)); inline-size: 0; transition: width .9s cubic-bezier(.2, .8, .3, 1); }
  .bar-row .bar-val { font-family: var(--mono); font-size: 11.5px; color: var(--t2); min-inline-size: 44px; text-align: end; }

  .gen-key-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--green-soft); border: 1px solid oklch(from var(--green) l c h / .3); border-radius: var(--r-sm); animation: pageIn .3s both; }
  .gen-key-row .key-mono { flex: 1; color: oklch(from var(--green) calc(l - .08) c h); font-size: 12.5px; }
  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
  .detail-cell { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 13px; }
  .detail-cell .dc-label { font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--t3); margin-bottom: 5px; font-weight: 700; }
  .detail-cell .dc-value { font-size: 13px; color: var(--t1); }
  .scope-card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 10px; text-align: center; cursor: pointer; font-size: 12.5px; color: var(--t2); transition: border-color var(--tr), background var(--tr), color var(--tr); background: var(--bg-1); }
  .scope-card .ico { color: var(--t3); margin-bottom: 6px; }
  .scope-card:hover { border-color: var(--border-2); }
  .scope-card.sel { border-color: var(--p); background: var(--p-soft); color: var(--p); }
  .scope-card.sel .ico { color: var(--p); }

  .pw-meter { display: flex; gap: 4px; margin-top: 7px; }
  .pw-meter i { flex: 1; block-size: 4px; border-radius: 3px; background: var(--surface-2); transition: background .3s; }
  .pw-meter.s1 i:nth-child(-n+1) { background: var(--red); }
  .pw-meter.s2 i:nth-child(-n+2) { background: var(--orange); }
  .pw-meter.s3 i:nth-child(-n+3) { background: oklch(0.58 0.13 74); }
  .pw-meter.s4 i:nth-child(-n+4) { background: var(--green); }

  .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .app-card { padding: 0; }
  .cred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  /* direction/text-align are load-bearing, not cosmetic: under an RTL paragraph
     direction every line of a JSON sample lays out right-to-left, so trailing
     commas and braces jump to the wrong end and an Arabic-speaking admin copying
     the integration snippet by hand gets malformed JSON. */
  .code-block { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--p); overflow-x: auto; white-space: pre; line-height: 1.6; direction: ltr; text-align: left; }

  .auth-wrap { min-block-size: 100svh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; z-index: 1; }
  .auth-box { inline-size: 100%; max-inline-size: 400px; }
  .auth-logo { text-align: center; margin-bottom: 26px; animation: pageIn .5s both; }
  .auth-logo .logo-mark { inline-size: 62px; block-size: 62px; margin: 0 auto 14px; font-size: 22px; border-radius: 18px; }
  .auth-logo h1 { font-size: 22px; font-weight: 700; color: var(--t1); }
  .auth-logo p { font-size: 12px; color: var(--t3); margin-top: 3px; }
  .auth-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 18px; padding: 30px; box-shadow: var(--shadow-lg); animation: pageIn .5s .08s both; position: relative; }
  .iw { position: relative; }
  .iw .ico { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--t3); pointer-events: none; }
  .iw input { padding-inline-start: 38px; }
  .lang-bar { display: flex; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; animation: pageIn .5s .15s both; }
  .lang-btn { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-1); color: var(--t3); font-size: 11px; font-weight: 600; text-decoration: none; transition: border-color var(--tr), color var(--tr); }
  .lang-btn:hover, .lang-btn.active { border-color: var(--p); color: var(--p); }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
  .flex { display: flex; } .aic { align-items: center; } .jcb { justify-content: space-between; }
  .justify-end { justify-content: flex-end; }
  .gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
  .mb8 { margin-bottom: 8px; } .mb10 { margin-bottom: 10px; } .mb12 { margin-bottom: 12px; } .mb14 { margin-bottom: 14px; }
  .mb16 { margin-bottom: 16px; } .mb20 { margin-bottom: 20px; } .mb24 { margin-bottom: 24px; }
  .mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt14 { margin-top: 14px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; }
  .w100 { inline-size: 100%; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .user-avatar { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex-shrink: 0; letter-spacing: .3px; }
  .text-green { color: var(--green); } .text-red { color: var(--red); } .text-yellow { color: oklch(0.58 0.13 74); }
  .text-orange { color: var(--orange); } .text-purple { color: var(--purple); } .text-blue { color: var(--blue); }
  .text-accent { color: var(--a); } .text-p { color: var(--p); }
  .text-end { text-align: end; }
  .nowrap { white-space: nowrap; }
  .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .font-mono { font-family: var(--mono); }

  .skeleton { background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
}

@keyframes blink { 50% { opacity: .35; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: scale(.95) translateY(12px); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px) scale(.95); } }
@keyframes toastInRtl { from { opacity: 0; transform: translateX(-24px) scale(.95); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@layer responsive {
  .sidebar-toggle { display: none; }

  /* A position:fixed element is NOT clipped by overflow on <body> — it is laid
     out against the viewport. So the CLOSED off-canvas sidebar (translated a
     full width past the edge) extended the scrollable canvas and the entire
     page could be dragged sideways on a phone: 69px in RTL, and the overflowing
     topbar added 106px in LTR. Clipping at the root is what actually contains a
     fixed element. This is a safety net — the real fits are below. */
  html { overflow-x: clip; }

  @media (max-width: 920px) {
    .main { margin-inline-start: 0; }
    /* Let the title yield space instead of shoving the actions off-screen.
       Without min-inline-size:0 a flex item refuses to shrink below its
       content, which is why the whole row overflowed instead of truncating. */
    .topbar-title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    :dir(rtl) .sidebar { transform: translateX(100%); }
    .sidebar.open { transform: none; }
    .sidebar-toggle { display: inline-flex; }
    .sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 110; background: oklch(0.3 0.03 279 / .4); }
    .sidebar-backdrop.open { display: block; }
    .grid-2 { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .page-body { padding: 18px 14px 50px; }
    .topbar { padding: 0 14px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    .stats-grid { grid-template-columns: 1fr; }
    .tb-btn kbd { display: none; }
    .table-wrap { -webkit-overflow-scrolling: touch; }

    /* The six topbar controls measured 325px against 347px of usable width —
       once the hamburger and the title were counted the row could not fit, so
       it spilled off-screen. These four lines bring it to 255px and it fits
       with room to spare, WITHOUT dropping the accent or language pickers.
       Button size is deliberately left alone: shrinking it would break the
       44px coarse-pointer touch target set below. */
    .topbar-title  { display: none; }        /* every page renders its own <h1> */
    .topbar-actions { gap: 5px; }
    .tb-cmdk       { display: none; }        /* keyboard-only affordance */
    .credits-chip  { padding-inline: 8px; font-size: 12px; }
  }

  @media (pointer: coarse) {
    .btn-icon { inline-size: 44px; block-size: 44px; }
    .btn-sm { padding: 11px 16px; font-size: 13px; }
    .copy-btn { padding: 12px; }
    input[type=checkbox], input[type=radio] { inline-size: 22px; block-size: 22px; }
    .modal-close, .logout-btn, .lang-btn { min-inline-size: 44px; min-block-size: 44px; }
    .nav-list a { padding-block: 13px; }
    .pagination a, .pagination span { min-inline-size: 44px; block-size: 44px; }
    .tb-btn { min-block-size: 40px; }
  }

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

  @media (forced-colors: active) {
    .btn, .tb-btn, .card, .stat-card, .badge, .modal, .dropdown-menu { border: 1px solid CanvasText; }
    .nav-list a.active { forced-color-adjust: none; }
  }

  @media print {
    .sidebar, .topbar, .aurora, .grid-overlay, .heading-actions, .filter-bar { display: none !important; }
    .main { margin: 0 !important; }
    body { background: #fff; color: #000; }
  }
}


/* ============================================================
   STATION — the identity layer.
   Declared LAST in the @layer list, so every rule here wins over
   `components` by layer order alone: no !important, no selector
   inflation. Nothing below touches HTML — the severity rails read
   the badge that is already inside each row via :has().
   ============================================================ */
@layer station {

  /* ── Elevation → rules ──────────────────────────────────────
     Station separates surfaces with a 1px line, never a shadow. The
     hover lift goes too: a console should sit still while you read it. */
  .card, .stat-card, .filter-bar, .table-wrap { box-shadow: none; }
  .stat-card:hover { transform: none; box-shadow: none; border-color: var(--border-2); }
  .card:hover { box-shadow: none; }
  /* The top accent bar on a stat card was hover-only and easy to miss.
     Make it permanent and thin — it is the card's category marker. */
  .stat-card::before { opacity: .9; block-size: 2px; }

  /* ── Severity rails ─────────────────────────────────────────
     The core of the direction: state is readable at the edge of the row
     before you read the word. Driven off the badge already rendered in
     the row, so no PHP or markup changes. Applied to the first cell
     rather than the <tr> because border-collapse makes row borders
     unreliable across engines. */
  tbody tr > td:first-child {
    border-inline-start: 2px solid transparent;
    transition: border-color var(--tr);
  }
  tbody tr:has(.badge-active)   > td:first-child { border-inline-start-color: var(--green); }
  tbody tr:has(.badge-lifetime) > td:first-child { border-inline-start-color: var(--a); }
  tbody tr:has(.badge-pending)  > td:first-child { border-inline-start-color: var(--yellow); }
  tbody tr:has(.badge-expired)  > td:first-child { border-inline-start-color: var(--yellow); }
  tbody tr:has(.badge-paused)   > td:first-child { border-inline-start-color: var(--purple); }
  tbody tr:has(.badge-banned)   > td:first-child { border-inline-start-color: var(--red); }
  tbody tr:has(.badge-inactive) > td:first-child { border-inline-start-color: var(--t3); }

  /* ── Compact density ────────────────────────────────────────
     Roughly a quarter more rows per screen without crowding them. */
  td { padding: 9px 12px; }
  thead th { padding: 8px 12px; letter-spacing: .4px; }
  .card-header { padding: 12px 15px; }
  .card-body   { padding: 15px; }
  .stat-card   { padding: 14px; }
  .stat-top    { margin-bottom: 10px; }

  /* ── Figures ────────────────────────────────────────────────
     Tabular figures so credit balances and device counts line up in a
     column. letter-spacing is reset from the old -1px: it tightened
     Latin digits but also reached Arabic labels sharing the element. */
  .stat-value { font-variant-numeric: tabular-nums; letter-spacing: 0; font-size: 26px; }
  .stat-trend, .mono, .key-mono, td .num, .pagination { font-variant-numeric: tabular-nums; }

  /* ── Squared chrome ─────────────────────────────────────────
     Pills read as consumer-app; Station wants instrument labels. */
  .badge { border-radius: var(--r-xs); text-transform: none; letter-spacing: 0; font-weight: 600; }
  .btn   { border-radius: var(--r-sm); }
  .stat-icon { border-radius: var(--r-sm); inline-size: 34px; block-size: 34px; }
  .logo-mark { border-radius: var(--r-sm); }

  /* Arabic must never be letter-spaced — it breaks the joins. The rule
     above already sets 0, this guards anything added later. */
  html[dir="rtl"] .badge,
  html[dir="rtl"] thead th { letter-spacing: normal; }

  /* ── Signal restraint ───────────────────────────────────────
     The accent marks what is interactive or current; state colour is
     carried by the rails and badges. So the active nav item gets a bar,
     not a filled block. */
  .nav-list a.active {
    background: var(--surface-1);
    border-inline-start: 2px solid var(--p);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }
  html[dir="rtl"] .nav-list a.active { border-radius: var(--r-sm) 0 0 var(--r-sm); }

  /* Atmosphere off — Station has no bloom and no grain. */
  .aurora, .grid-overlay { display: none; }
}