/* ============================================================================
   Photobooth Platform — operator/client console  ·  Slice 2 runnable mockup
   ----------------------------------------------------------------------------
   PRODUCT-TOOL register: calm three-region workspace (rail / canvas / inspector).
   Design SERVES the task — restrained single accent, quiet reading surfaces, one
   signature moment (the publish → propagate → apply status journey).

   Fully tokenised light + dark. Arabic-first RTL by default; English is a runtime
   toggle. Every box-model direction uses LOGICAL properties so one rule mirrors
   correctly in both writing directions. Western digits (0-9), tabular, committed.
   ========================================================================== */

@font-face { font-family:"PlexAr"; font-weight:300; font-display:swap; src:url("fonts/PlexAr-Light.ttf") format("truetype"); }
@font-face { font-family:"PlexAr"; font-weight:400; font-display:swap; src:url("fonts/PlexAr-Regular.ttf") format("truetype"); }
@font-face { font-family:"PlexAr"; font-weight:600; font-display:swap; src:url("fonts/PlexAr-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Syne";  font-weight:600 800; font-display:swap; src:url("fonts/Syne.ttf") format("truetype"); }

/* ── Tokens ───────────────────────────────────────────────────────────────
   Two layers: a fixed RAMP (raw ramps) and SEMANTIC roles that theme flips.  */
:root{
  /* neutral ramp — cool, barely-tinted (OKLCH) */
  --n-0:  oklch(0.995 0.002 250);
  --n-25: oklch(0.985 0.003 250);
  --n-50: oklch(0.972 0.004 250);
  --n-100:oklch(0.945 0.005 250);
  --n-200:oklch(0.905 0.006 250);
  --n-300:oklch(0.855 0.008 250);
  --n-400:oklch(0.705 0.010 250);
  --n-500:oklch(0.585 0.012 250);
  --n-600:oklch(0.492 0.014 252);
  --n-700:oklch(0.392 0.016 254);
  --n-800:oklch(0.272 0.016 256);
  --n-900:oklch(0.205 0.014 258);
  --n-950:oklch(0.155 0.012 260);
  --n-990:oklch(0.125 0.010 260);

  /* brand accent = "in-sync / live" (teal). One saturated hue, real ramp. */
  --t-50: oklch(0.965 0.020 195);
  --t-100:oklch(0.925 0.040 195);
  --t-200:oklch(0.860 0.065 195);
  --t-300:oklch(0.780 0.090 195);
  --t-400:oklch(0.700 0.108 197);
  --t-500:oklch(0.620 0.112 198);
  --t-600:oklch(0.545 0.105 200);
  --t-700:oklch(0.470 0.090 202);
  --t-800:oklch(0.390 0.072 204);

  /* status hues (distinct from brand) */
  --amber-500:oklch(0.760 0.140 75);
  --amber-600:oklch(0.660 0.130 66);
  --amber-050:oklch(0.960 0.045 85);
  --rose-500: oklch(0.600 0.190 22);
  --rose-600: oklch(0.520 0.185 22);
  --rose-050: oklch(0.955 0.030 20);
  --violet-500:oklch(0.590 0.150 285);
  --violet-050:oklch(0.955 0.030 288);

  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* elevation — 2-part shadow (sharp + airy), 5 fixed levels */
  --e-1:0 1px 1.5px rgba(16,22,34,.05), 0 1px 2px rgba(16,22,34,.05);
  --e-2:0 1px 2px rgba(16,22,34,.06), 0 4px 10px rgba(16,22,34,.06);
  --e-3:0 2px 4px rgba(16,22,34,.07), 0 10px 24px rgba(16,22,34,.09);
  --e-4:0 4px 8px rgba(16,22,34,.09), 0 20px 44px rgba(16,22,34,.13);
  --e-pop:0 6px 14px rgba(16,22,34,.12), 0 24px 60px rgba(16,22,34,.18);

  --sp:4px;
  --rail-w:74px; --nav-w:236px; --insp-w:328px; --topbar-h:60px;

  /* motion — product cadence (state, not choreography) */
  --dur-1:120ms; --dur-2:190ms; --dur-3:260ms;
  --ease:cubic-bezier(.22,.61,.36,1);        /* ease-out-quart-ish */

  --z-base:0; --z-sticky:100; --z-rail:200; --z-dropdown:300;
  --z-backdrop:400; --z-modal:500; --z-toast:600; --z-tooltip:700;
}

/* Light (default) semantic roles */
:root{
  color-scheme: light;
  --bg:        var(--n-50);
  --canvas:    var(--n-25);
  --surface:   var(--n-0);
  --surface-2: var(--n-50);      /* rail / inspector — slightly recessed */
  --raised:    #ffffff;
  --ink:       var(--n-900);
  --ink-2:     var(--n-700);
  --ink-3:     var(--n-600);
  --ink-inv:   var(--n-0);
  --line:      var(--n-200);
  --line-2:    var(--n-100);
  --line-strong:var(--n-300);

  --accent:      var(--t-600);
  --accent-hover:var(--t-700);
  --accent-ink:  #ffffff;
  --accent-weak: var(--t-50);
  --accent-line: var(--t-200);

  /* status TEXT tokens = darker readable shades (verified ≥4.5:1 on their -weak tints);
     brand --accent stays --t-600 for interactive fills/links. */
  --ok:oklch(0.500 0.100 200);   --ok-weak:var(--t-50);   --ok-line:var(--t-200);
  --warn:oklch(0.505 0.120 62); --warn-weak:var(--amber-050); --warn-line:oklch(0.86 0.09 80);
  --danger:var(--rose-600);--danger-weak:var(--rose-050);--danger-line:oklch(0.86 0.10 22);
  --info:oklch(0.485 0.155 285);--info-weak:var(--violet-050);--info-line:oklch(0.86 0.07 288);
  --neutral-pill-bg:var(--n-100); --neutral-pill-ink:var(--n-700);

  --focus:var(--t-500);
  --overlay:rgba(18,24,36,.44);
  --thermal-perf:var(--n-300);
}

/* Dark */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:        var(--n-990);
  --canvas:    var(--n-950);
  --surface:   var(--n-900);
  --surface-2: oklch(0.185 0.013 260);
  --raised:    oklch(0.235 0.014 258);
  --ink:       oklch(0.965 0.006 250);
  --ink-2:     oklch(0.800 0.010 250);
  --ink-3:     oklch(0.660 0.012 250);
  --ink-inv:   var(--n-950);
  --line:      oklch(0.315 0.012 258);
  --line-2:    oklch(0.255 0.012 258);
  --line-strong:oklch(0.380 0.014 256);

  --accent:      var(--t-400);
  --accent-hover:var(--t-300);
  --accent-ink:  oklch(0.16 0.02 250);
  --accent-weak: oklch(0.30 0.045 200);
  --accent-line: oklch(0.42 0.060 200);

  --ok:var(--t-400);   --ok-weak:oklch(0.30 0.045 200); --ok-line:oklch(0.42 0.06 200);
  --warn:var(--amber-500); --warn-weak:oklch(0.33 0.06 72); --warn-line:oklch(0.45 0.08 72);
  --danger:oklch(0.740 0.150 22);--danger-weak:oklch(0.32 0.07 22);--danger-line:oklch(0.45 0.10 22);
  --info:oklch(0.700 0.130 288);--info-weak:oklch(0.32 0.06 288);--info-line:oklch(0.45 0.08 288);
  --neutral-pill-bg:oklch(0.30 0.012 258); --neutral-pill-ink:oklch(0.82 0.01 250);

  --focus:var(--t-300);
  --overlay:rgba(6,9,14,.62);
  --thermal-perf:var(--n-700);

  --e-1:0 1px 2px rgba(0,0,0,.30);
  --e-2:0 2px 6px rgba(0,0,0,.36);
  --e-3:0 6px 18px rgba(0,0,0,.44);
  --e-4:0 12px 34px rgba(0,0,0,.52);
  --e-pop:0 18px 50px rgba(0,0,0,.62);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"PlexAr",system-ui,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums lining-nums;
}
:where(input,button,select,textarea){font:inherit; color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
/* safe default size for any icon not otherwise sized (0-specificity, class rules win) */
:where(svg){inline-size:20px;block-size:20px;flex:0 0 auto}
/* forward chevrons/arrows mirror in RTL */
.rtl-flip{display:inline-flex}
:root[dir="rtl"] .rtl-flip,:root[dir="rtl"] .rtl-flip svg{transform:scaleX(-1)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs)}
::selection{background:color-mix(in oklch, var(--accent) 26%, transparent)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--n-400)}

.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.num{font-variant-numeric:tabular-nums lining-nums}
.en{font-family:"PlexAr",system-ui,sans-serif}
.vh{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-inline-start:12px;inset-block-start:-60px;z-index:var(--z-tooltip);
  background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:var(--r-sm);
  transition:inset-block-start var(--dur-2) var(--ease)}
.skip-link:focus{inset-block-start:12px}

/* ============================================================================
   App shell — three regions
   ========================================================================== */
.app{
  display:grid;
  grid-template-columns:var(--rail-w) var(--nav-w) 1fr;
  grid-template-rows:100vh;
  overflow:hidden;
}
.app.has-inspector{ grid-template-columns:var(--rail-w) var(--nav-w) 1fr var(--insp-w); }

/* ── Icon rail ── */
.rail{
  grid-column:1; background:var(--surface-2);
  border-inline-end:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
  padding-block:14px; gap:6px; z-index:var(--z-rail);
}
.rail__brand{
  inline-size:42px; block-size:42px; border-radius:12px;
  display:grid; place-items:center; margin-block-end:10px;
  background:linear-gradient(150deg, var(--t-500), var(--t-700));
  color:#fff; box-shadow:var(--e-2); font-family:"Syne";font-weight:800;font-size:20px;
}
.rail__spring{margin-block:auto}
.rail__btn{
  position:relative; inline-size:48px; block-size:44px; border-radius:11px;
  display:grid; place-items:center; color:var(--ink-3);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.rail__btn svg{inline-size:22px;block-size:22px;stroke-width:1.7}
.rail__btn:hover{background:var(--n-100);color:var(--ink)}
:root[data-theme="dark"] .rail__btn:hover{background:var(--line-2)}
.rail__btn[aria-current="page"]{color:var(--accent);background:var(--accent-weak)}
.rail__btn[aria-current="page"]::before{
  content:""; position:absolute; inset-inline-start:-14px; inset-block:10px;
  inline-size:3px; border-radius:99px; background:var(--accent);
}

/* ── Nav column ── */
.nav{
  grid-column:2; background:var(--surface-2);
  border-inline-end:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.nav__scope{
  padding:16px 16px 12px; border-block-end:1px solid var(--line-2);
  display:flex; align-items:center; gap:10px;
}
.nav__scope .scope-switch{flex:1;min-inline-size:0}
/* explicit close control — only meaningful when the nav is an overlay drawer */
.nav__close{display:none;flex:0 0 auto;inline-size:44px;block-size:44px;border-radius:var(--r-sm);
  place-items:center;color:var(--ink-2);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.nav__close svg{inline-size:20px;block-size:20px}
.nav__close:hover{background:var(--n-100);color:var(--ink)}
:root[data-theme="dark"] .nav__close:hover{background:var(--line-2)}
@media (max-width:1024px){ .nav__close{display:grid} }
.scope-switch{
  inline-size:100%; display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-md); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--e-1);
  transition:border-color var(--dur-1) var(--ease);
}
.scope-switch:hover{border-color:var(--line-strong)}
.scope-switch__avatar{
  inline-size:32px;block-size:32px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;font-weight:600;font-size:13px;color:#fff;
}
.scope-switch__meta{min-inline-size:0;text-align:start;flex:1}
.scope-switch__meta b{display:block;font-weight:600;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scope-switch__meta span{display:block;font-size:11.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scope-switch__chev{color:var(--ink-3);flex:0 0 auto;inline-size:16px;block-size:16px}
.nav__list{padding:10px 12px; overflow-y:auto; flex:1}
.nav__section{padding:14px 8px 6px;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--ink-3);text-transform:uppercase}
.nav__item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:14px;font-weight:500;position:relative;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.nav__item svg{inline-size:19px;block-size:19px;stroke-width:1.7;color:var(--ink-3);flex:0 0 auto;transition:color var(--dur-1) var(--ease)}
.nav__item:hover{background:var(--n-100);color:var(--ink)}
:root[data-theme="dark"] .nav__item:hover{background:var(--line-2)}
.nav__item:hover svg{color:var(--ink-2)}
.nav__item[aria-current="page"]{background:var(--accent-weak);color:var(--accent);font-weight:600}
.nav__item[aria-current="page"] svg{color:var(--accent)}
.nav__item .count{margin-inline-start:auto;font-size:12px;color:var(--ink-3);
  background:var(--neutral-pill-bg);padding:1px 8px;border-radius:99px}
.nav__item[aria-current="page"] .count{background:color-mix(in oklch,var(--accent) 18%,transparent);color:var(--accent)}
.nav__foot{padding:12px;border-block-start:1px solid var(--line-2)}

/* ── Main canvas ── */
.main{grid-column:3; display:flex; flex-direction:column; overflow:hidden; background:var(--bg)}
.topbar{
  block-size:var(--topbar-h); flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding-inline:24px; border-block-end:1px solid var(--line); background:var(--surface);
  z-index:var(--z-sticky);
}
.crumbs{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-3);min-inline-size:0}
.crumbs a:hover{color:var(--ink-2)}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs svg{inline-size:15px;block-size:15px;color:var(--ink-3);flex:0 0 auto}
.crumbs .rtl-flip{transform:scaleX(-1)}
.topbar__spring{margin-inline-start:auto}
.searchbox{
  display:flex;align-items:center;gap:9px;inline-size:min(300px,30vw);
  padding:8px 12px;border-radius:var(--r-md);background:var(--canvas);
  border:1px solid var(--line);color:var(--ink-3);
}
.searchbox:focus-within{border-color:var(--accent-line);background:var(--surface)}
.searchbox svg{inline-size:17px;block-size:17px;flex:0 0 auto}
.searchbox input{border:none;background:none;inline-size:100%;outline:none;color:var(--ink);font-size:14px}
.searchbox kbd{font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;background:var(--surface)}

.iconbtn{
  inline-size:38px;block-size:38px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--ink-2);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);position:relative;
}
.iconbtn svg{inline-size:20px;block-size:20px;stroke-width:1.7}
.iconbtn:hover{background:var(--n-100);color:var(--ink)}
:root[data-theme="dark"] .iconbtn:hover{background:var(--line-2)}
.iconbtn .dot{position:absolute;inset-block-start:8px;inset-inline-end:9px;inline-size:7px;block-size:7px;
  border-radius:99px;background:var(--danger);border:2px solid var(--surface)}

.scroll{overflow-y:auto; overflow-x:hidden; flex:1; scroll-behavior:smooth}
/* scroll lock while a drawer overlay is open */
:root.drawer-open,:root.drawer-open body{overflow:hidden}
.page{max-inline-size:1160px;margin-inline:auto;padding:26px 24px 72px}
.page--wide{max-inline-size:none}

/* ── Inspector ── */
.inspector{
  grid-column:4; background:var(--surface-2); border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}
.inspector__head{padding:18px 18px 14px;border-block-end:1px solid var(--line-2);display:flex;align-items:flex-start;gap:10px}
.inspector__head h3{font-size:15.5px;font-weight:600}
.inspector__head p{font-size:12.5px;color:var(--ink-3);margin-block-start:2px}
.inspector__body{overflow-y:auto;padding:16px 18px;flex:1;display:flex;flex-direction:column;gap:18px}
.inspector__foot{padding:14px 18px;border-block-start:1px solid var(--line-2);display:flex;gap:10px}

/* ============================================================================
   Page primitives
   ========================================================================== */
.page-head{display:flex;align-items:flex-end;gap:18px;margin-block-end:22px;flex-wrap:wrap}
.page-head__t{flex:1;min-inline-size:0}
.page-head h1{font-size:24px;font-weight:600;letter-spacing:-0.01em;line-height:1.2}
.page-head .sub{color:var(--ink-3);font-size:14px;margin-block-start:5px}
.page-head__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.section-title{display:flex;align-items:center;gap:10px;margin-block:26px 14px}
.section-title h2{font-size:16px;font-weight:600}
.section-title .hint{font-size:12.5px;color:var(--ink-3)}
.section-title .spring{margin-inline-start:auto}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border-radius:var(--r-sm);font-size:14px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.btn svg{inline-size:17px;block-size:17px;stroke-width:1.9}
.btn:active{transform:translateY(.5px)}
.btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--e-1)}
.btn--primary:hover{background:var(--accent-hover);box-shadow:var(--e-2)}
.btn--default{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--e-1)}
.btn--default:hover{background:var(--n-50);border-color:var(--n-400)}
:root[data-theme="dark"] .btn--default:hover{background:var(--raised)}
.btn--ghost{color:var(--ink-2)}
.btn--ghost:hover{background:var(--n-100);color:var(--ink)}
:root[data-theme="dark"] .btn--ghost:hover{background:var(--line-2)}
.btn--danger{background:var(--danger);color:#fff;box-shadow:var(--e-1)}
.btn--danger:hover{filter:brightness(.94)}
.btn--danger-ghost{color:var(--danger);border-color:var(--danger-line);background:var(--danger-weak)}
.btn--danger-ghost:hover{background:color-mix(in oklch,var(--danger) 14%,var(--surface))}
.btn--sm{padding:6px 11px;font-size:13px;border-radius:var(--r-xs)}
.btn--sm svg{inline-size:15px;block-size:15px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn--block{inline-size:100%}

.chip-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.chip-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.chip-btn[aria-pressed="true"]{background:var(--accent-weak);border-color:var(--accent-line);color:var(--accent)}
.chip-btn svg{inline-size:15px;block-size:15px}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;line-height:1.35;border:1px solid transparent;white-space:nowrap}
.pill .led{inline-size:7px;block-size:7px;border-radius:99px;background:currentColor;flex:0 0 auto}
.pill--ok{color:var(--ok);background:var(--ok-weak);border-color:var(--ok-line)}
.pill--warn{color:var(--warn);background:var(--warn-weak);border-color:var(--warn-line)}
.pill--danger{color:var(--danger);background:var(--danger-weak);border-color:var(--danger-line)}
.pill--info{color:var(--info);background:var(--info-weak);border-color:var(--info-line)}
.pill--neutral{color:var(--neutral-pill-ink);background:var(--neutral-pill-bg);border-color:transparent}
.pill--live .led{animation:pulse-led 1.8s var(--ease) infinite}
@keyframes pulse-led{0%,100%{box-shadow:0 0 0 0 color-mix(in oklch,currentColor 55%,transparent)}
  60%{box-shadow:0 0 0 5px transparent}}

/* cards / panels (used sparingly) */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-1)}
.panel__head{padding:16px 18px;border-block-end:1px solid var(--line-2);display:flex;align-items:center;gap:12px}
.panel__head h2,.panel__head h3{font-size:15px;font-weight:600}
.panel__head .spring{margin-inline-start:auto}
.panel__body{padding:18px}

/* stat tiles — reading surface: quiet */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 17px;box-shadow:var(--e-1)}
.stat__label{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.stat__label svg{inline-size:15px;block-size:15px}
.stat__val{font-size:32px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;margin-block-start:9px}
.stat__val small{font-size:15px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.stat__delta{font-size:12.5px;margin-block-start:6px;display:flex;align-items:center;gap:5px}
.stat__delta.up{color:var(--ok)} .stat__delta.down{color:var(--danger)} .stat__delta.flat{color:var(--ink-3)}
.stat__delta svg{inline-size:14px;block-size:14px}

/* tables — dense, quiet reading surface */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e-1)}
table.grid{inline-size:100%;border-collapse:collapse;font-size:14px}
table.grid thead th{
  text-align:start;font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;
  padding:11px 16px;border-block-end:1px solid var(--line);background:var(--surface-2);white-space:nowrap;position:sticky;inset-block-start:0}
table.grid tbody td{padding:12px 16px;border-block-end:1px solid var(--line-2);vertical-align:middle}
table.grid tbody tr:last-child td{border-block-end:none}
table.grid tbody tr{transition:background var(--dur-1) var(--ease)}
table.grid tbody tr:hover{background:var(--n-50)}
:root[data-theme="dark"] table.grid tbody tr:hover{background:var(--line-2)}
table.grid tbody tr[aria-selected="true"]{background:var(--accent-weak)}
.cell-main{font-weight:600;color:var(--ink)}
.cell-sub{font-size:12.5px;color:var(--ink-3);margin-block-start:1px}
.cell-id{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.t-actions{display:flex;gap:4px;justify-content:flex-end}
/* keep the row-actions (⋮) column visible on narrow horizontal-scroll tables, so its
   menu always opens next to a visible trigger (never lost in the overflow) */
table.grid thead th:last-child{position:sticky;inset-inline-end:0;background:var(--surface-2);z-index:3}
table.grid td:has(.t-actions){position:sticky;inset-inline-end:0;background:var(--surface);
  border-inline-start:1px solid var(--line-2);z-index:1}
table.grid tbody tr:hover td:has(.t-actions){background:var(--n-50)}
:root[data-theme="dark"] table.grid tbody tr:hover td:has(.t-actions){background:var(--line-2)}
.num-cell{font-variant-numeric:tabular-nums;text-align:end}

/* entity row identity block */
.ent{display:flex;align-items:center;gap:11px;min-inline-size:0}
.ent__avatar{inline-size:36px;block-size:36px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:600;font-size:14px;color:#fff;overflow:hidden}
.ent__avatar img{inline-size:100%;block-size:100%;object-fit:cover}
.ent__meta{min-inline-size:0}
.ent__meta b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:34ch}
.ent__meta span{display:block;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* forms — single column, labels persist above */
.field{display:flex;flex-direction:column;gap:7px;margin-block-end:16px}
.field > label{font-size:13.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.field .req{color:var(--danger);font-weight:700}
.field .opt{color:var(--ink-3);font-weight:500;font-size:12px}
.field .help{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.field .err{font-size:12.5px;color:var(--danger);display:flex;align-items:center;gap:6px}
.field .err svg{inline-size:14px;block-size:14px;flex:0 0 auto}
.input,.select,.textarea{
  inline-size:100%;padding:10px 13px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font-size:14px;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--n-400)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 22%,transparent)}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--danger)}
.field.has-error .input:focus{box-shadow:0 0 0 3px color-mix(in oklch,var(--danger) 22%,transparent)}
.textarea{resize:vertical;min-block-size:88px;line-height:1.55}
.input-affix{position:relative;display:flex;align-items:center}
.input-affix .suffix{position:absolute;inset-inline-end:12px;color:var(--ink-3);font-size:13px;pointer-events:none}
.input-affix .input{padding-inline-end:52px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

/* segmented control / toggle */
.segmented{display:inline-flex;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-md);padding:3px;gap:3px}
.segmented button{padding:6px 13px;border-radius:var(--r-xs);font-size:13px;font-weight:600;color:var(--ink-3);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.segmented button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--e-1)}
.switch{inline-size:40px;block-size:24px;border-radius:99px;background:var(--line-strong);position:relative;
  transition:background var(--dur-2) var(--ease);flex:0 0 auto}
.switch::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:18px;block-size:18px;
  border-radius:99px;background:#fff;box-shadow:var(--e-1);transition:inset-inline-start var(--dur-2) var(--ease)}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"]::after{inset-inline-start:19px}

/* tabs */
.tabs{display:flex;gap:2px;border-block-end:1px solid var(--line);margin-block-end:20px}
.tabs button{padding:11px 15px;font-size:14px;font-weight:600;color:var(--ink-3);position:relative;
  transition:color var(--dur-1) var(--ease)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;
  block-size:2px;background:var(--accent);border-radius:2px}

/* toolbar (filters/search over a table) */
.toolbar{display:flex;align-items:center;gap:10px;margin-block-end:14px;flex-wrap:wrap}
.toolbar .spring{margin-inline-start:auto}
.filter-input{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);color:var(--ink-3);inline-size:min(260px,40vw)}
.filter-input svg{inline-size:16px;block-size:16px;flex:0 0 auto}
.filter-input input{border:none;background:none;outline:none;color:var(--ink);inline-size:100%;font-size:14px}

/* empty / skeleton / error states */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:56px 28px;color:var(--ink-3)}
.state__icon{inline-size:52px;block-size:52px;border-radius:15px;display:grid;place-items:center;
  background:var(--canvas);border:1px solid var(--line);color:var(--ink-3);margin-block-end:2px}
.state__icon svg{inline-size:26px;block-size:26px;stroke-width:1.6}
.state h3{font-size:16px;font-weight:600;color:var(--ink)}
.state p{font-size:14px;max-inline-size:44ch;line-height:1.5}
.state--error .state__icon{color:var(--danger);background:var(--danger-weak);border-color:var(--danger-line)}
.state--offline .state__icon{color:var(--warn);background:var(--warn-weak);border-color:var(--warn-line)}
.skel{background:linear-gradient(100deg,var(--n-100) 30%,var(--n-50) 50%,var(--n-100) 70%);
  background-size:200% 100%;border-radius:6px;animation:shimmer 1.3s linear infinite}
:root[data-theme="dark"] .skel{background:linear-gradient(100deg,var(--line-2) 30%,var(--line) 50%,var(--line-2) 70%);background-size:200% 100%}
@keyframes shimmer{to{background-position:-200% 0}}

/* banners (inline, not modal) */
.banner{display:flex;gap:12px;padding:13px 16px;border-radius:var(--r-md);border:1px solid;align-items:flex-start;font-size:13.5px}
.banner svg{inline-size:18px;block-size:18px;flex:0 0 auto;margin-block-start:1px}
.banner b{font-weight:600}
.banner p{color:var(--ink-2);margin-block-start:2px;line-height:1.5}
.banner .spring{margin-inline-start:auto}
.banner--warn{background:var(--warn-weak);border-color:var(--warn-line);color:var(--warn)}
.banner--danger{background:var(--danger-weak);border-color:var(--danger-line);color:var(--danger)}
.banner--info{background:var(--info-weak);border-color:var(--info-line);color:var(--info)}
.banner--ok{background:var(--ok-weak);border-color:var(--ok-line);color:var(--ok)}
.banner--perm{background:var(--canvas);border-color:var(--line);color:var(--ink-2)}

/* meta list (inspector) */
.meta-list{display:flex;flex-direction:column;gap:0}
.meta-list > div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-block-end:1px solid var(--line-2);font-size:13.5px}
.meta-list > div:last-child{border-block-end:none}
.meta-list dt{color:var(--ink-3)}
.meta-list dd{color:var(--ink);font-weight:500;text-align:end;min-inline-size:0}
.insp-group h4{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin-block-end:8px}

/* dialog / modal (last-resort; used only for destructive confirms + focused create) */
dialog.modal{border:none;padding:0;background:transparent;color:var(--ink);max-inline-size:none;max-block-size:none}
dialog.modal[open]{display:flex;align-items:center;justify-content:center;
  inset:0;inline-size:100vw;block-size:100dvh}
dialog.modal::backdrop{background:var(--overlay);backdrop-filter:blur(2px)}
.modal__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--e-pop);inline-size:min(520px,92vw);max-block-size:88vh;overflow:auto;
  animation:modal-in var(--dur-3) var(--ease)}
.modal__card--wide{inline-size:min(680px,94vw)}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal__head{padding:20px 22px 6px;display:flex;gap:14px;align-items:flex-start}
.modal__ico{inline-size:42px;block-size:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.modal__ico svg{inline-size:22px;block-size:22px}
.modal__ico--danger{background:var(--danger-weak);color:var(--danger);border:1px solid var(--danger-line)}
.modal__ico--accent{background:var(--accent-weak);color:var(--accent);border:1px solid var(--accent-line)}
.modal__head h2{font-size:18px;font-weight:600}
.modal__head p{font-size:13.5px;color:var(--ink-3);margin-block-start:3px;line-height:1.5}
.modal__body{padding:14px 22px}
.modal__foot{padding:16px 22px 20px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.confirm-echo{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;font-size:13.5px;display:flex;gap:10px;align-items:center;margin-block:4px 8px}
.confirm-echo .ent__avatar{inline-size:30px;block-size:30px;font-size:12px}

/* toast */
.toast-wrap{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:10px;max-inline-size:360px}
.toast{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-md);
  background:var(--raised);border:1px solid var(--line);box-shadow:var(--e-4);font-size:13.5px;
  animation:toast-in var(--dur-3) var(--ease)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast svg{inline-size:19px;block-size:19px;flex:0 0 auto;margin-block-start:1px}
.toast.ok svg{color:var(--ok)} .toast.warn svg{color:var(--warn)} .toast.danger svg{color:var(--danger)}
.toast b{font-weight:600} .toast p{color:var(--ink-3);margin-block-start:2px}

/* dropdown menu */
.menu{position:fixed;z-index:var(--z-dropdown);min-inline-size:210px;background:var(--raised);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-pop);padding:6px;
  animation:modal-in var(--dur-2) var(--ease)}
.menu button,.menu a{display:flex;align-items:center;gap:10px;inline-size:100%;padding:9px 11px;border-radius:var(--r-xs);
  font-size:13.5px;color:var(--ink-2);text-align:start;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.menu button:hover,.menu a:hover{background:var(--n-100);color:var(--ink)}
:root[data-theme="dark"] .menu button:hover{background:var(--line-2)}
.menu svg{inline-size:17px;block-size:17px;color:var(--ink-3)}
.menu .danger{color:var(--danger)} .menu .danger svg{color:var(--danger)}
.menu hr{border:none;border-block-start:1px solid var(--line-2);margin:6px 4px}

/* utility */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}
.wrap{flex-wrap:wrap}.spring{margin-inline-start:auto}
.muted{color:var(--ink-3)} .strong{color:var(--ink);font-weight:600}
.tnum{font-variant-numeric:tabular-nums}
.divider{block-size:1px;background:var(--line-2);margin-block:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-2-3{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
@media (max-width:900px){.grid-2,.grid-2-3{grid-template-columns:1fr}}

/* ============================================================================
   Responsive — structural (tablet collapses inspector, then nav→rail-only)
   ========================================================================== */
@media (max-width:1180px){
  :root{--insp-w:290px;--nav-w:210px}
}
@media (max-width:1024px){
  .app,.app.has-inspector{grid-template-columns:var(--rail-w) 1fr}
  .nav{position:fixed;inset-block:0;inset-inline-start:var(--rail-w);inline-size:var(--nav-w);
    transform:translateX(var(--nav-off,-120%));transition:transform var(--dur-3) var(--ease);
    z-index:var(--z-dropdown);box-shadow:var(--e-4)}
  :root:dir(rtl) .nav{--nav-off:120%}
  .app[data-nav="open"] .nav{transform:translateX(0)}
  .inspector{position:fixed;inset-block:0;inset-inline-end:0;inline-size:min(360px,86vw);
    transform:translateX(var(--insp-off,120%));transition:transform var(--dur-3) var(--ease);
    z-index:var(--z-modal);box-shadow:var(--e-pop)}
  :root:dir(rtl) .inspector{--insp-off:-120%}
  .app[data-inspector="open"] .inspector{transform:translateX(0)}
  .nav-scrim{position:fixed;inset:0;background:var(--overlay);z-index:var(--z-backdrop);opacity:0;
    pointer-events:none;transition:opacity var(--dur-2) var(--ease)}
  .app[data-nav="open"] .nav-scrim,.app[data-inspector="open"] .nav-scrim{opacity:1;pointer-events:auto}
}
@media (min-width:1025px){ .menu-toggle,.nav-scrim{display:none} }

/* ── Phone: collapse the whole shell to one column; rail + nav slide in
      together as a single off-canvas drawer (keeps lang/theme reachable). ── */
@media (max-width:680px){
  .app,.app.has-inspector{display:block;grid-template-columns:none}
  .main{block-size:100dvh;min-block-size:100dvh}
  .rail{position:fixed;inset-block:0;inset-inline-start:0;inline-size:60px;padding-block:12px;gap:4px;
    transform:translateX(var(--rail-off,-135%));transition:transform var(--dur-3) var(--ease);
    z-index:var(--z-dropdown);box-shadow:var(--e-4)}
  :root:dir(rtl) .rail{--rail-off:135%}
  .rail__btn{inline-size:44px;block-size:44px}
  .rail__brand{inline-size:40px;block-size:40px;font-size:18px}
  .nav{inset-inline-start:60px;inline-size:min(240px,calc(92vw - 60px))}
  .app[data-nav="open"] .rail{transform:translateX(0)}
  /* page + chrome tighten for the phone viewport */
  .page{padding:16px 13px 60px}
  .searchbox{display:none}
  .page-head h1{font-size:20px}
  /* hero stacks in reading order: title + copy full-width, then actions — no
     squeezed vertical text column, no word-by-word subtitle break */
  .page-head{flex-direction:column;align-items:stretch;gap:14px;margin-block-end:16px}
  .page-head__t{min-inline-size:0}
  .page-head__actions{inline-size:100%;flex-wrap:wrap}
  .topbar{padding-inline:13px;gap:6px}
  .topbar .iconbtn{flex:0 0 auto}
  .crumbs{overflow:hidden;min-inline-size:0}
  .crumbs a,.crumbs .rtl-flip{display:none}   /* collapse to the current page on phone */
  .topbar .pill{display:none}                 /* declutter status pills; state stays in-page */
  .field-row{grid-template-columns:1fr}
  /* adequate touch targets on phone */
  .iconbtn{inline-size:44px;block-size:44px;flex:0 0 auto}
  .btn{min-block-size:44px}
  .nav__item{min-block-size:44px}
  .chip-btn{min-block-size:44px;min-inline-size:44px}
  .seg-card{min-block-size:44px}
  .t-actions .iconbtn{inline-size:44px;block-size:44px}
  /* long identifiers must wrap, never force page width */
  .mono,.break-any,.cell-id{overflow-wrap:anywhere;word-break:break-word}

  /* Tables → stacked cards (each row a card, each cell a Label: value line). */
  .table-wrap{overflow:visible;border:none;background:none;box-shadow:none;border-radius:0}
  table.grid{font-size:14px}
  table.grid,table.grid tbody,table.grid tr,table.grid td{display:block;inline-size:auto}
  table.grid thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}                       /* a11y: header text still present */
  table.grid tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--e-1);padding:2px 4px;margin-block-end:12px}
  table.grid tbody tr:hover,:root[data-theme="dark"] table.grid tbody tr:hover{background:var(--surface)}
  table.grid td{border-block-end:1px solid var(--line-2);padding:10px 12px;display:flex;gap:10px;
    align-items:center;min-block-size:0}
  table.grid tbody tr td:last-child{border-block-end:none}
  table.grid td::before{content:attr(data-label);flex:0 0 auto;text-align:start;margin-inline-end:auto;
    font-size:12px;font-weight:600;color:var(--ink-3)}
  table.grid td:empty{display:none}
  /* value side aligns end and may wrap */
  table.grid td>*{text-align:end}
  .cell-main,.cell-sub,.cell-id{text-align:end}
  .num-cell{text-align:end}
  /* row-actions become a full-width footer row, no sticky, no label */
  table.grid td:has(.t-actions){position:static;border-inline-start:none;justify-content:flex-end;
    background:transparent;padding-block:8px}
  table.grid td:has(.t-actions)::before{display:none}
  .t-actions{inline-size:100%;justify-content:flex-end}
}

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

/* print-none for the mockup badge */
.mock-badge{position:fixed;inset-block-end:14px;inset-inline-start:50%;transform:translateX(-50%);z-index:var(--z-tooltip);
  font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink-3);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 12px;
  box-shadow:var(--e-2);display:flex;align-items:center;gap:7px;opacity:.9}
.mock-badge .led{inline-size:6px;block-size:6px;border-radius:99px;background:var(--warn)}

/* ── color control: native picker + hex input + presets (design editor) ── */
.color-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.color-ctl input[type=color]{inline-size:40px;block-size:36px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);padding:3px;cursor:pointer;flex:0 0 auto}
.color-ctl input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-ctl input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}
.color-ctl input[type=color]::-moz-color-swatch{border:none;border-radius:5px}
.color-ctl .hex{inline-size:104px;text-transform:uppercase;font-variant-numeric:tabular-nums;padding-inline:11px}
.color-presets{display:flex;gap:7px;flex-wrap:wrap}
.color-presets .swatch{inline-size:28px;block-size:28px;border-radius:8px}

/* ── uploaded-file chip: local demo preview + replace/remove ── */
.up-file{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);margin-block-start:8px}
.up-file__thumb{inline-size:44px;block-size:44px;border-radius:9px;flex:0 0 auto;background:var(--canvas);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;color:var(--ink-3)}
.up-file__thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.up-file__meta{flex:1;min-inline-size:0}
.up-file__meta b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-file__meta span{display:block;font-size:11.5px;color:var(--ink-3)}
.up-file__acts{display:flex;gap:4px;flex:0 0 auto}
.demo-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--warn);
  background:var(--warn-weak);border:1px solid var(--warn-line);border-radius:99px;padding:1px 8px;white-space:nowrap}
.dropzone.is-drag{border-color:var(--accent);background:var(--accent-weak)}