/* ============================================================
   TRACEHOLD — Design System (2026)
   Tokens · Components · Shell · Legacy compat
   ============================================================ */

/* ====================== TOKENS ====================== */
:root {
  /* navy */
  --navy-950:#070d1a; --navy-900:#0a1326; --navy-850:#0d1830;
  --navy-800:#101f3f; --navy-700:#192847; --navy-600:#243861;
  --navy-500:#37507f; --navy-400:#5a72a0; --navy-300:#8ea0c2;

  /* teal */
  --teal-800:#0b5f60; --teal-700:#0e7e80; --teal-600:#10999a;
  --teal-500:#12b1b0; --teal-450:#19abad; --teal-400:#34c6c5;
  --teal-300:#6fdcdb; --teal-200:#a9ecec; --teal-100:#d7f6f6; --teal-50:#eefbfb;

  /* status */
  --coral-700:#a3271a; --coral-600:#c8392a; --coral-500:#e85544;
  --coral-200:#f8c0b8; --coral-100:#fde6e2;
  --amber-700:#9a5d05; --amber-600:#bd7708; --amber-500:#e8a020; --amber-100:#fcefd4;
  --green-700:#0c6e44; --green-600:#0f9259; --green-500:#1bb56f; --green-100:#d6f4e4;
  --blue-600:#2563d6; --blue-500:#3b82f6; --blue-100:#dbe8fe;
  --violet-600:#6d3fe0; --violet-500:#8456f0; --violet-100:#ece4fd;
  --pink-500:#e4519b; --orange-500:#f3743a;

  /* neutral */
  --gray-50:#f6f7f9; --gray-100:#eef0f4; --gray-200:#e4e7ee; --gray-300:#d3d8e2;
  --gray-400:#a6adbd; --gray-500:#717a8c; --gray-600:#515a6e;
  --gray-700:#39414f; --gray-800:#222936; --gray-900:#10141d;

  /* semantic · light */
  --bg:#f4f6f9; --bg-grid:rgba(16,31,63,0.025);
  --surface:#ffffff; --surface-2:#f9fafc;
  --surface-sunken:#eef1f5; --surface-hover:#f3f5f9;
  --border:#e6e9ef; --border-strong:#d3d8e2; --divider:#eef1f5;
  --text:#131826; --text-strong:#0a1326; --text-muted:#626c80;
  --text-subtle:#97a0b2; --text-inverse:#ffffff;

  --accent:#7B36FF; --accent-hover:#6a2de0; --accent-strong:#5521b8;
  --accent-soft:var(--violet-100); --accent-softer:#f0eaff;
  --accent-fg:#ffffff; --accent-rgb:123,54,255;

  --brand:var(--navy-800); --brand-soft:#eaeef6;

  --danger:var(--coral-500); --danger-soft:var(--coral-100); --danger-fg:var(--coral-700);
  --warn:var(--amber-500);   --warn-soft:var(--amber-100);   --warn-fg:var(--amber-700);
  --ok:var(--green-500);     --ok-soft:var(--green-100);     --ok-fg:var(--green-700);
  --info:var(--blue-500);    --info-soft:var(--blue-100);    --info-fg:var(--blue-600);
  --violet:var(--violet-500);--violet-soft:var(--violet-100);

  /* rail always dark */
  --rail-bg:#0b1326; --rail-bg-2:#0d1830;
  --rail-border:rgba(255,255,255,0.07);
  --rail-text:#aeb9cf; --rail-text-dim:#6f7c97; --rail-text-hi:#ffffff;
  --rail-hover:rgba(255,255,255,0.055);
  --rail-active:rgba(123,54,255,0.15);
  --rail-section:#67738f;

  /* type */
  --font-sans:'Geist','Geist Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --fs-2xs:10.5px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:13.5px; --fs-md:14.5px;
  --fs-lg:16px; --fs-xl:19px; --fs-2xl:23px; --fs-3xl:29px; --fs-4xl:38px; --fs-5xl:52px;

  /* shape */
  --r-xs:5px; --r-sm:7px; --r:10px; --r-lg:14px; --r-xl:18px; --r-2xl:24px; --r-pill:999px;

  /* spacing */
  --sp-1:4px; --sp-2:6px; --sp-3:10px; --sp-4:14px; --sp-5:18px;
  --sp-6:24px; --sp-7:32px; --sp-8:44px;
  --pad-card:16px; --row-h:36px;

  /* shadows */
  --sh-xs:0 1px 2px rgba(13,22,46,.05);
  --sh-sm:0 1px 3px rgba(13,22,46,.07),0 1px 2px rgba(13,22,46,.04);
  --sh:0 4px 14px rgba(13,22,46,.08),0 2px 4px rgba(13,22,46,.04);
  --sh-lg:0 16px 40px rgba(13,22,46,.12),0 4px 10px rgba(13,22,46,.06);
  --sh-xl:0 36px 70px rgba(13,22,46,.22),0 10px 22px rgba(13,22,46,.10);
  --sh-glow:0 0 0 4px rgba(var(--accent-rgb),.16);
  --focus:0 0 0 3px rgba(var(--accent-rgb),.30);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ====================== DARK ====================== */
[data-theme="dark"] {
  --bg:#070d1a; --bg-grid:rgba(255,255,255,0.022);
  --surface:#0f1830; --surface-2:#0c1426;
  --surface-sunken:#0a1122; --surface-hover:#15203c;
  --border:#1d2944; --border-strong:#2a3a5c; --divider:#18233c;
  --text:#e6ebf4; --text-strong:#ffffff; --text-muted:#94a1bd;
  --text-subtle:#5c6a88; --text-inverse:#0a1326;
  --accent:#9a72f2; --accent-hover:#8b63ef;
  --accent-strong:#7a45e6; --accent-soft:#221a3e;
  --accent-softer:#1a1432; --accent-fg:#ffffff; --accent-rgb:154,114,242;
  --brand:#9a72f2; --brand-soft:#1a1432;
  --danger-soft:#3a1916; --danger-fg:#fca99e;
  --warn-soft:#2f2410;   --warn-fg:#f5cb7a;
  --ok-soft:#0d2c20;     --ok-fg:#74e0a8;
  --info-soft:#13243f;   --info-fg:#9cc2fb;
  --violet-soft:#211a3e;
  --rail-bg:#060b16; --rail-bg-2:#0a1122; --rail-border:rgba(255,255,255,0.06);
  --sh-xs:0 1px 2px rgba(0,0,0,.5);
  --sh-sm:0 1px 3px rgba(0,0,0,.55);
  --sh:0 4px 14px rgba(0,0,0,.5);
  --sh-lg:0 16px 40px rgba(0,0,0,.6);
  --sh-xl:0 36px 70px rgba(0,0,0,.7);
}

/* ====================== DENSITY ====================== */
[data-density="comfortable"] {
  --pad-card:20px; --row-h:46px;
  --sp-4:16px; --sp-5:22px; --sp-6:30px;
  --fs-base:14px;
}

/* ====================== TEMA VISUAL "CLÁSICO" (data-skin) ======================
   "moderno" (por defecto) = este design system tal cual. "clasico" = consola
   sobria/corporativa: esquinas casi rectas, sombras planas, grises fríos, rojo
   ladrillo y tipografía Manrope. Es un override de TOKENS, así que todo lo que
   usa las clases del design system (.card .tbl .kpi .exec-kpi .badge .input…) y
   var(--token) se adapta solo, sin tocar el markup. Va DESPUÉS de :root, [dark]
   y [density] para ganar los empates de especificidad en los tokens compartidos.
   NOTA: --accent* y --focus los fija app.jsx inline según el acento elegido; no
   se tocan aquí (el inline ganaría igualmente). Espejo del artefacto de diseño. */
[data-skin="clasico"] {
  /* tipografía sobria */
  --font-sans:'Manrope','Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'Consolas','Liberation Mono',Menlo,'DejaVu Sans Mono','Courier New',monospace;
  /* esquinas casi rectas (los alias --radius-* heredan estos vía var(--r-*)) */
  --r-xs:2px; --r-sm:3px; --r:3px; --r-lg:4px; --r-xl:5px; --r-2xl:6px; --r-pill:3px;
  /* sombras mínimas y planas: el borde hace el trabajo */
  --sh-xs:0 1px 1px rgba(18,28,42,.05);
  --sh-sm:0 1px 2px rgba(18,28,42,.07);
  --sh:0 1px 3px rgba(18,28,42,.10);
  --sh-lg:0 4px 10px rgba(18,28,42,.14);
  --sh-xl:0 10px 26px rgba(18,28,42,.22);
  /* sin rejilla decorativa de fondo */
  --bg-grid:transparent;
}

/* Paleta clásica — CLARO: grises fríos del manual (Cloud→Steel) + rojo ladrillo */
[data-skin="clasico"][data-theme="light"] {
  --bg:#F4F4F4; --surface:#ffffff; --surface-2:#EDEFF7;
  --surface-sunken:#e6e9f4; --surface-hover:#f1f2f9;
  --border:#D3D6E0; --border-strong:#BCBFCC; --divider:#e3e6ef;
  --text:#1E1E24; --text-strong:#020E2D; --text-muted:#6E7180; --text-subtle:#9DA2B3;
  --brand:#020E2D; --brand-soft:#e7eaf3;
  --coral-700:#8c241b; --coral-600:#a53227; --coral-500:#bf3a2c; --coral-200:#edc5c0; --coral-100:#f6e0dc;
  /* rail navy de marca, plano */
  --rail-bg:#020E2D; --rail-bg-2:#061539;
}

/* Paleta clásica — OSCURO: navy frío del manual */
[data-skin="clasico"][data-theme="dark"] {
  --bg:#02081c; --surface:#061026; --surface-2:#040c1f;
  --surface-sunken:#030a1a; --surface-hover:#0c1733;
  --border:#1b274a; --border-strong:#2a3866; --divider:#16224a;
  --text:#e6e8f3; --text-strong:#ffffff; --text-muted:#9099b8; --text-subtle:#5e6789;
  --rail-bg:#020A22; --rail-bg-2:#04102e;
}

/* — Tablas clásicas: cabecera hundida con borde fuerte, rayado cebra, más densas — */
[data-skin="clasico"] .tbl thead th,
[data-skin="clasico"] .data-table thead th{
  background:var(--surface-sunken);
  color:var(--text-muted);
  border-top:1px solid var(--border-strong);
  border-bottom:1px solid var(--border-strong);
  letter-spacing:.04em;
}
[data-skin="clasico"] .tbl tbody td,
[data-skin="clasico"] .data-table tbody td{ padding:8px 14px; }
[data-skin="clasico"] .tbl tbody tr:nth-child(even) td,
[data-skin="clasico"] .data-table tbody tr:nth-child(even) td{ background:var(--surface-2); }
[data-skin="clasico"] .tbl tbody tr.clickable:hover td,
[data-skin="clasico"] .tbl tbody tr.row-selectable:hover td,
[data-skin="clasico"] .data-table tbody tr:hover{ background:var(--accent-softer); }

/* — Tarjetas de datos clásicas: planas (sin elevación al hover), chips cuadrados — */
[data-skin="clasico"] .kpi:hover{ transform:none; box-shadow:none; }
[data-skin="clasico"] .kpi .k-ico{ border-radius:var(--r-sm); }
[data-skin="clasico"] .exec-kpi .ek-ico{ border-radius:var(--r-lg); }   /* literal 13px en exec.css que el token no alcanza */
[data-skin="clasico"] .exec-kpi:hover{ box-shadow:none; }
[data-skin="clasico"] .legend .li .sw{ border-radius:2px; }              /* literal 4px en exec.css */
/* Tendencia de fondo en clásico: más sobria y sin animación de barrido (look plano). */
[data-skin="clasico"] .kpi .k-spark,
[data-skin="clasico"] .exec-kpi .ek-spark{ opacity:.34; }
[data-skin="clasico"] .spark-draw{ animation:none; stroke-dashoffset:0; }

/* — Editor de patrón custom (estilos embebidos oscuros) → superficie fría en claro — */
[data-skin="clasico"][data-theme="light"] .type-card,
[data-skin="clasico"][data-theme="light"] .example-row,
[data-skin="clasico"][data-theme="light"] .add-example-row input,
[data-skin="clasico"][data-theme="light"] .inferred-regex,
[data-skin="clasico"][data-theme="light"] .tag-wrap{
  background:var(--surface-2); border-color:var(--border);
}
[data-skin="clasico"][data-theme="light"] .inferred-panel,
[data-skin="clasico"][data-theme="light"] .dict-overflow-list{
  background:var(--bg); border-color:var(--border);
}
[data-skin="clasico"][data-theme="light"] .type-card-label{ color:var(--text-muted); }
[data-skin="clasico"][data-theme="light"] .type-card.selected .type-card-label,
[data-skin="clasico"][data-theme="light"] .tag-input-el,
[data-skin="clasico"][data-theme="light"] .add-example-row input{ color:var(--text); }
[data-skin="clasico"][data-theme="light"] .inferred-regex,
[data-skin="clasico"][data-theme="light"] .inferred-regex input{ color:var(--accent-strong); }
[data-skin="clasico"] .type-card,
[data-skin="clasico"] .example-row,
[data-skin="clasico"] .inferred-panel,
[data-skin="clasico"] .inferred-regex,
[data-skin="clasico"] .tag-wrap,
[data-skin="clasico"] .tag-item,
[data-skin="clasico"] .add-example-row input{ border-radius:var(--r); }

/* ====================== BACKWARD COMPAT ALIASES ====================== */
:root {
  --text-xs:var(--fs-xs); --text-sm:var(--fs-sm); --text-base:var(--fs-base);
  --text-md:var(--fs-md); --text-lg:var(--fs-lg); --text-xl:var(--fs-xl);
  --text-2xl:var(--fs-2xl); --text-3xl:var(--fs-3xl); --text-4xl:var(--fs-4xl);
  --radius-xs:var(--r-xs); --radius-sm:var(--r-sm); --radius:var(--r);
  --radius-lg:var(--r-lg); --radius-xl:var(--r-xl); --radius-2xl:var(--r-2xl);
  --shadow-xs:var(--sh-xs); --shadow-sm:var(--sh-sm); --shadow:var(--sh);
  --shadow-lg:var(--sh-lg); --shadow-xl:var(--sh-xl);
  --surface-alt:var(--surface-2); --text-inverted:var(--text-inverse);
  --gap:var(--sp-4); --gap-xs:var(--sp-2); --gap-sm:var(--sp-3);
  --gap-lg:var(--sp-6); --gap-xl:var(--sp-7);
}

/* ====================== BASE ====================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans); font-size:var(--fs-base); line-height:1.5;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','cv01','tnum' 0;
}
button,input,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.02em;color:var(--text-strong);}
::selection{background:var(--accent-soft);color:var(--accent-strong);}
:focus-visible{outline:none;box-shadow:var(--focus);}
.tnum{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--font-mono);}

/* ====================== SCROLLBAR ====================== */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--gray-400);background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}

/* ====================== ANIMATIONS ====================== */
@keyframes kl-fade-up{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes kl-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes kl-scale-in{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
@keyframes kl-pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45);}70%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),0);}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);}}
@keyframes kl-pulse-live{0%{box-shadow:0 0 0 0 rgba(27,181,111,.5);}70%{box-shadow:0 0 0 6px rgba(27,181,111,0);}100%{box-shadow:0 0 0 0 rgba(27,181,111,0);}}
@keyframes kl-spin{to{transform:rotate(360deg);}}
@keyframes kl-shimmer{0%{background-position:-180% 0;}100%{background-position:180% 0;}}
@keyframes kl-sweep{from{stroke-dashoffset:var(--dash);}to{stroke-dashoffset:0;}}
@keyframes kl-bar-rise{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes kl-flash{0%{background:var(--accent-softer);}100%{background:transparent;}}
@keyframes vfsp{to{transform:rotate(360deg)}}
@keyframes vfboot{to{transform:rotate(360deg);}}
@keyframes kl-pop{from{opacity:0;transform:scale(.96) translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes kl-cell-pop{from{opacity:0;transform:scale(0);}to{opacity:1;transform:scale(1);}}
@keyframes kl-dot-pop{from{opacity:0;transform:scale(0);}to{opacity:1;transform:scale(1);}}
@keyframes loginOrbA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(80px,60px) scale(1.15);}}
@keyframes loginOrbB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-90px,-50px) scale(1.1);}}
@keyframes loginOrbC{0%,100%{transform:translate(0,0) scale(1);opacity:.45;}50%{transform:translate(-60px,70px) scale(1.2);opacity:.7;}}
@keyframes loginGridDrift{from{background-position:0 0,0 0;}to{background-position:48px 48px,48px 48px;}}

.kl-anim-up{animation:kl-fade-up .5s var(--ease-out) both;}
.kl-anim-in{animation:kl-fade-in .4s var(--ease) both;}
.kl-anim-scale{animation:kl-scale-in .4s var(--ease-out) both;}

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

/* ====================== APP LAYOUT ====================== */
.kl-app{
  display:grid; grid-template-columns:var(--rail-w,248px) 1fr;
  min-height:100vh; background:var(--bg);
  background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
  background-size:32px 32px;
}
.kl-app[data-rail="collapsed"]{--rail-w:72px;}

/* legacy .app alias for viewing-tenant class checks */
.kl-app.viewing-tenant .tenant-rw{display:none !important;}

/* ====================== UTILS ====================== */
.row{display:flex;align-items:center;gap:var(--sp-3);}
.col{display:flex;flex-direction:column;gap:var(--sp-3);}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);}
.grow{flex:1;min-width:0;}
.wrap{flex-wrap:wrap;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.muted{color:var(--text-muted);}
.subtle{color:var(--text-subtle);}
.strong{color:var(--text-strong);font-weight:600;}
.center{display:grid;place-items:center;}
.hide{display:none !important;}
.upper{text-transform:uppercase;letter-spacing:.08em;}
.divider-h{height:1px;background:var(--divider);margin:8px 0;}

/* ====================== RAIL / SIDEBAR ====================== */
.kl-rail{
  position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,var(--rail-bg-2),var(--rail-bg) 60%);
  border-right:1px solid var(--rail-border);
  display:flex;flex-direction:column;
  z-index:40;color:var(--rail-text);overflow:hidden;
}
.kl-app[data-rail="collapsed"] .kl-rail{overflow:visible;}
.kl-rail::before{
  content:'';position:absolute;top:-120px;left:-40px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(123,54,255,.22),transparent 70%);
  pointer-events:none;
}
.kl-app[data-rail="collapsed"] .kl-rail::before{display:none;}
.kl-rail-brand{
  display:flex;align-items:center;gap:10px;
  padding:18px 12px 14px;position:relative;
}
.kl-rail-brand img.logo-full{height:40px;width:auto;display:block;}
.kl-rail-brand img.logo-mark{height:32px;width:auto;display:none;}
.kl-app[data-rail="collapsed"] .kl-rail-brand img.logo-full{display:none;}
.kl-app[data-rail="collapsed"] .kl-rail-brand img.logo-mark{display:block;}
.kl-app[data-rail="collapsed"] .kl-rail-brand{justify-content:center;padding:18px 8px 14px;}
.kl-rail-collapse{
  margin-left:auto;width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;color:var(--rail-text-dim);
  transition:background .15s,color .15s;
}
.kl-rail-collapse:hover{background:var(--rail-hover);color:var(--rail-text-hi);}
.kl-app[data-rail="collapsed"] .kl-rail-collapse{display:none;}

.kl-rail-tenant{
  margin:2px 12px 8px;padding:9px 11px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--rail-border);border-radius:var(--r);
  display:flex;align-items:center;gap:9px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.kl-rail-tenant:hover{border-color:rgba(123,54,255,.4);background:rgba(255,255,255,0.06);}
.kl-rail-tenant .tn-ico{color:var(--accent);flex-shrink:0;}
.kl-rail-tenant .tn-name{font-size:12.5px;font-weight:600;color:var(--rail-text-hi);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kl-rail-tenant .tn-meta{font-size:10px;color:var(--rail-text-dim);}
/* wrapper for multi-tenant switcher */
.kl-rail-tenant-wrap{position:relative;margin:2px 12px 8px;}
.kl-rail-tenant-wrap .kl-rail-tenant{margin:0;}
.kl-app[data-rail="collapsed"] .kl-rail-tenant-wrap{margin:0;}
.kl-app[data-rail="collapsed"] .kl-rail-tenant-wrap .tenant-switch-pop{left:calc(100% + 8px);top:0;right:auto;width:260px;}
/* collapsed state */
.kl-app[data-rail="collapsed"] .kl-rail-tenant{justify-content:center;padding:10px 0;margin:0;border-color:transparent;background:transparent;border-radius:var(--r);}
.kl-app[data-rail="collapsed"] .kl-rail-tenant:hover{border-color:transparent;background:rgba(255,255,255,0.08);}
.kl-app[data-rail="collapsed"] .kl-rail-tenant .tn-ico{color:var(--rail-text);opacity:.9;}
.kl-app[data-rail="collapsed"] .kl-rail-tenant .tn-name,
.kl-app[data-rail="collapsed"] .kl-rail-tenant .tn-meta,
.kl-app[data-rail="collapsed"] .kl-rail-tenant .tn-chev{display:none;}

.kl-rail-search{margin:2px 12px 8px;position:relative;}
.kl-rail-search input{
  width:100%;height:34px;padding:0 30px 0 32px;
  background:rgba(255,255,255,0.045);border:1px solid var(--rail-border);
  border-radius:var(--r);color:var(--rail-text-hi);font-size:12.5px;outline:none;
  transition:border-color .15s,background .15s;
}
.kl-rail-search input::placeholder{color:var(--rail-text-dim);}
.kl-rail-search input:focus{border-color:var(--accent);background:rgba(123,54,255,.08);}
.kl-rail-search .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--rail-text-dim);pointer-events:none;}
.kl-rail-search .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:10px;color:var(--rail-text-dim);border:1px solid var(--rail-border);padding:1px 5px;border-radius:5px;}
.kl-app[data-rail="collapsed"] .kl-rail-search{display:none;}

.kl-rail-nav{flex:1;overflow-y:auto;padding:4px 8px 16px;display:flex;flex-direction:column;gap:1px;}
.kl-rail-nav::-webkit-scrollbar{width:6px;}
.kl-rail-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);}

.kl-nav-section{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rail-section);padding:15px 12px 6px;display:flex;align-items:center;gap:7px;
}
.kl-nav-section .ln{flex:1;height:1px;background:var(--rail-border);}
.kl-app[data-rail="collapsed"] .kl-nav-section{justify-content:center;padding:14px 0 5px;}
.kl-app[data-rail="collapsed"] .kl-nav-section span,.kl-app[data-rail="collapsed"] .kl-nav-section .ln{display:none;}
.kl-nav-section.exec-sec{color:var(--accent);}

.kl-nav-item{
  display:flex;align-items:center;gap:11px;
  padding:8px 11px;margin:0 2px;border-radius:var(--r-sm);
  color:var(--rail-text);font-size:13px;font-weight:500;cursor:pointer;
  position:relative;transition:color .14s,background .14s;white-space:nowrap;
}
.kl-nav-item:hover{color:var(--rail-text-hi);background:var(--rail-hover);}
.kl-nav-item .ico{flex-shrink:0;opacity:.85;transition:opacity .14s,color .14s;}
.kl-nav-item:hover .ico{opacity:1;}
.kl-nav-item .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;}
.kl-nav-item.active{color:var(--rail-text-hi);background:var(--rail-active);}
.kl-nav-item.active .ico{color:var(--accent);opacity:1;}
.kl-nav-item.active::before{
  content:'';position:absolute;left:-2px;top:7px;bottom:7px;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0;box-shadow:0 0 8px rgba(var(--accent-rgb),.7);
}
.kl-nav-item .badge-n{
  margin-left:auto;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  padding:1px 6px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);color:var(--rail-text);
  min-width:20px;text-align:center;
}
.kl-nav-item .badge-n.danger{background:var(--coral-500);color:#fff;}
.kl-nav-item .badge-n.live{background:rgba(27,181,111,.2);color:#5fdca0;}
/* "Nuevo" / "Actualizado": marcadores de sección de fase de desarrollo */
.kl-nav-item .kl-nav-tag{
  margin-left:auto;flex-shrink:0;
  font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 6px;border-radius:var(--r-pill);line-height:1.6;
}
.kl-nav-item .kl-nav-tag.new{
  background:rgba(var(--accent-rgb),.22);
  color:color-mix(in srgb,var(--accent) 45%,var(--rail-text-hi));
}
.kl-nav-item .kl-nav-tag.updated{background:rgba(27,181,111,.2);color:#5fdca0;}
.kl-app[data-rail="collapsed"] .kl-nav-item{justify-content:center;padding:9px;}
.kl-app[data-rail="collapsed"] .kl-nav-item .lbl,.kl-app[data-rail="collapsed"] .kl-nav-item .badge-n,.kl-app[data-rail="collapsed"] .kl-nav-item .kl-nav-tag{display:none;}
.kl-app[data-rail="collapsed"] .kl-nav-item.active::before{left:-8px;}

/* accordion groups */
.kl-nav-grp-wrap{display:flex;flex-direction:column;}
.kl-nav-group{
  display:flex;align-items:center;gap:11px;
  padding:8px 11px;margin:0 2px;border-radius:var(--r-sm);
  color:var(--rail-text);font-size:13px;font-weight:600;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:color .14s,background .14s;
}
.kl-nav-group:hover{color:var(--rail-text-hi);background:var(--rail-hover);}
.kl-nav-group .ico{flex-shrink:0;opacity:.85;transition:opacity .14s,color .14s;}
.kl-nav-group:hover .ico{opacity:1;}
.kl-nav-group .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;}
.kl-nav-group.has-active{color:var(--rail-text-hi);}
.kl-nav-group.has-active .ico{color:var(--accent);opacity:1;}
.kl-nav-group .chev{flex-shrink:0;color:var(--rail-text-dim);transition:transform .22s var(--ease-out);}
.kl-nav-grp-wrap.open>.kl-nav-group .chev{transform:rotate(-180deg);}
.kl-nav-group .badge-n{
  margin-left:auto;margin-right:6px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  padding:1px 6px;border-radius:var(--r-pill);min-width:20px;text-align:center;
  background:rgba(255,255,255,.08);color:var(--rail-text);
}
.kl-nav-group .badge-n.danger{background:var(--coral-500);color:#fff;}
/* Punto en cabecera de grupo colapsado cuando un hijo está marcado (Nuevo/Actualizado) */
.kl-nav-group .kl-nav-grp-dot{
  margin-left:auto;margin-right:6px;flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 6px rgba(var(--accent-rgb),.6);
}
.kl-nav-group .badge-n + .kl-nav-grp-dot{margin-left:0;}
.kl-app[data-rail="collapsed"] .kl-nav-group .kl-nav-grp-dot{display:none;}

.kl-nav-sub{
  overflow:hidden;transition:max-height .26s var(--ease-out);
  display:flex;flex-direction:column;gap:1px;
  margin:1px 0 3px 22px;padding-left:11px;
  border-left:1px solid var(--rail-border);
}
.kl-nav-sub .kl-nav-item{padding:7px 10px;font-size:12.5px;}
.kl-nav-sub .kl-nav-item .ico{opacity:.65;}
.kl-nav-sub .kl-nav-item:hover .ico,.kl-nav-sub .kl-nav-item.active .ico{opacity:1;}
.kl-nav-sub .kl-nav-item.active::before{left:-12px;top:6px;bottom:6px;}
.kl-app[data-rail="collapsed"] .kl-nav-group{justify-content:center;padding:9px;}
.kl-app[data-rail="collapsed"] .kl-nav-group .lbl,.kl-app[data-rail="collapsed"] .kl-nav-group .chev,.kl-app[data-rail="collapsed"] .kl-nav-group .badge-n{display:none;}
.kl-app[data-rail="collapsed"] .kl-nav-sub{display:none;}

/* superadmin group */
.kl-nav-grp-wrap.superadmin{margin-top:10px;padding-top:8px;border-top:1px dashed var(--rail-border);}
.kl-nav-sa-eyebrow{
  display:flex;align-items:center;gap:5px;padding:1px 12px 5px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-500);opacity:.9;
}
.kl-nav-grp-wrap.superadmin .kl-nav-group .ico{color:color-mix(in srgb,var(--amber-500) 60%,var(--rail-text));}
.kl-nav-grp-wrap.superadmin .kl-nav-group:hover .ico,
.kl-nav-grp-wrap.superadmin .kl-nav-group.has-active .ico{color:var(--amber-500);opacity:1;}
.kl-nav-grp-wrap.superadmin .kl-nav-sub{border-left-color:color-mix(in srgb,var(--amber-500) 40%,var(--rail-border));}
.kl-app[data-rail="collapsed"] .kl-nav-sa-eyebrow{display:none;}
/* amber icon for staff-only leaf nav items */
.kl-nav-grp-wrap.superadmin .kl-nav-item .ico{color:color-mix(in srgb,var(--amber-500) 60%,var(--rail-text));}
.kl-nav-grp-wrap.superadmin .kl-nav-item:hover .ico{color:var(--amber-500);opacity:1;}
/* topbar staff button */
.kl-topbar-staff-btn{color:var(--amber-500);}
.kl-topbar-staff-btn:hover{background:var(--warn-soft);color:var(--amber-600);}

.kl-rail-foot{border-top:1px solid var(--rail-border);padding:7px 10px;}
.kl-rail-toggle{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:6px 9px;border-radius:7px;
  background:transparent;border:1px solid transparent;
  color:var(--rail-text-dim);font-size:11.5px;font-weight:500;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.kl-rail-toggle:hover{background:var(--rail-hover);color:var(--rail-text);border-color:var(--rail-border);}
.kl-rail-toggle .ico{flex-shrink:0;opacity:.7;}
.kl-rail-toggle:hover .ico{opacity:1;}
.kl-app[data-rail="collapsed"] .kl-rail-toggle{justify-content:center;padding:6px;}
.kl-app[data-rail="collapsed"] .kl-rail-toggle .lbl{display:none;}

.kl-avatar{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--navy-700));
  color:#fff;font-size:12px;font-weight:600;flex-shrink:0;letter-spacing:.02em;
}
.kl-avatar.sm{width:24px;height:24px;font-size:10px;border-radius:7px;}
.kl-avatar.lg{width:40px;height:40px;font-size:14px;border-radius:11px;}

/* ====================== MAIN + TOPBAR ====================== */
.kl-main{min-width:0;display:flex;flex-direction:column;}
.kl-topbar{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 26px;height:56px;display:flex;align-items:center;gap:14px;
}
.kl-crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-muted);flex-shrink:0;white-space:nowrap;}
.kl-crumbs .sep{color:var(--text-subtle);}
.kl-crumbs .now{color:var(--text-strong);font-weight:600;}
.kl-topbar-actions{margin-left:0;display:flex;align-items:center;gap:7px;flex-shrink:0;}
.kl-topbar-searchwrap{flex:1;display:flex;justify-content:center;padding:0 16px;min-width:0;}
.kl-topbar-search{
  position:relative;width:100%;max-width:520px;height:38px;
  display:flex;align-items:center;gap:0;
  padding:0 60px 0 36px;
  border-radius:10px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text-muted);font-size:13px;
  cursor:text;text-align:left;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.kl-topbar-search:hover{border-color:var(--border-strong);background:var(--surface);}
.kl-topbar-search:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);}
.kl-topbar-search .ph{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-subtle);}
.kl-topbar-search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.kl-topbar-search .kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:10px;color:var(--text-subtle);border:1px solid var(--border-strong);border-radius:5px;padding:2px 6px;pointer-events:none;}

/* ── Search Palette ── */
.sp-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:80px;}
.sp-modal{width:100%;max-width:580px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.22),0 4px 16px rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 160px);}
.sp-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--divider);}
.sp-ico{flex-shrink:0;color:var(--text-muted);}
.sp-input{flex:1;background:transparent;border:none;outline:none;font-size:15px;color:var(--text);font-family:inherit;}
.sp-input::placeholder{color:var(--text-subtle);}
.sp-spin{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:sp-rotate .6s linear infinite;flex-shrink:0;}
@keyframes sp-rotate{to{transform:rotate(360deg)}}
.sp-results{overflow-y:auto;padding:8px 0;}
.sp-group{padding:0 8px 4px;}
.sp-group-label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px 4px;}
.sp-item{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:none;border:none;cursor:pointer;color:var(--text);font-size:13px;text-align:left;transition:background .1s;}
.sp-item:hover,.sp-item.active{background:var(--surface-hover);}
.sp-item-ico{flex-shrink:0;color:var(--text-muted);}
.sp-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sp-badge{font-size:10px;padding:1px 6px;border-radius:5px;background:var(--surface-2);color:var(--text-muted);white-space:nowrap;flex-shrink:0;}
.sp-badge.danger{background:var(--danger-soft,#fde8e8);color:var(--danger,#d0021b);}
.sp-badge.muted{opacity:.7;}
.sp-hint{padding:28px 16px;text-align:center;color:var(--text-muted);font-size:13px;}
.sp-footer{display:flex;align-items:center;gap:16px;padding:10px 16px;border-top:1px solid var(--divider);font-size:11px;color:var(--text-muted);}
.sp-footer kbd{display:inline-block;padding:1px 5px;border:1px solid var(--border);border-radius:4px;font-size:10.5px;font-family:var(--font-mono);background:var(--surface-2);margin-right:3px;}
.kl-topbar-divider{width:1px;height:26px;background:var(--border);margin:0 5px;}

/* lang */
.kl-lang{position:relative;}
.kl-lang-btn{
  display:flex;align-items:center;gap:6px;height:34px;padding:0 9px;
  border-radius:9px;border:1px solid transparent;background:transparent;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.kl-lang-btn:hover,.kl-lang-btn.open{background:var(--surface-hover);border-color:var(--border);}
.kl-lang-btn .flag{font-size:15px;line-height:1;}
.kl-lang-btn .code{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--text-strong);}
.kl-lang-btn .chev{color:var(--text-subtle);transition:transform .2s;}
.kl-lang-btn.open .chev{transform:rotate(180deg);}
.kl-lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;width:188px;z-index:60;
  background:var(--surface);border:1px solid var(--border);border-radius:13px;
  box-shadow:0 14px 40px -8px rgba(16,31,63,.28),0 2px 8px rgba(16,31,63,.08);
  padding:6px;animation:kl-pop .14s ease-out;
}
.kl-lang-item{
  width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  border:none;background:transparent;font-size:13px;color:var(--text);cursor:pointer;text-align:left;
  transition:background .12s;
}
.kl-lang-item .flag{font-size:16px;}
.kl-lang-item .lbl{flex:1;}
.kl-lang-item .tick{color:var(--accent);}
.kl-lang-item:hover{background:var(--surface-hover);}
.kl-lang-item.on{color:var(--text-strong);font-weight:600;}

/* profile */
.kl-profile{position:relative;}
.kl-profile-btn{
  display:flex;align-items:center;gap:9px;max-width:200px;
  padding:4px 9px 4px 5px;border-radius:11px;
  background:transparent;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.kl-profile-btn:hover,.kl-profile-btn.open{background:var(--surface-hover);border-color:var(--border);}
.kl-profile-btn .who{line-height:1.2;min-width:0;text-align:left;}
.kl-profile-btn .who .n{font-size:12.5px;font-weight:600;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;}
.kl-profile-btn .who .m{font-size:10.5px;color:var(--text-muted);}
.kl-profile-btn .chev{color:var(--text-subtle);transition:transform .2s;flex-shrink:0;}
.kl-profile-btn.open .chev{transform:rotate(180deg);}
@media(max-width:1100px){.kl-profile-btn .who{display:none;}}
.kl-profile-menu{
  position:absolute;top:calc(100% + 8px);right:0;width:248px;z-index:60;
  background:var(--surface);border:1px solid var(--border);border-radius:13px;
  box-shadow:0 14px 40px -8px rgba(16,31,63,.28),0 2px 8px rgba(16,31,63,.08);
  padding:7px;animation:kl-pop .14s ease-out;
}
.kl-profile-card{display:flex;align-items:center;gap:11px;padding:8px 9px 10px;}
.kl-profile-card .pm-n{font-size:13.5px;font-weight:650;color:var(--text-strong);}
.kl-profile-card .pm-e{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;}
.kl-profile-sep{height:1px;background:var(--divider);margin:4px 2px;}
.kl-profile-item{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;border:none;background:transparent;
  font-size:12.5px;font-weight:550;color:var(--text);cursor:pointer;text-align:left;
  transition:background .12s,color .12s;
}
.kl-profile-item:hover{background:var(--surface-hover);color:var(--text-strong);}
.kl-profile-item svg{color:var(--text-muted);flex-shrink:0;}
.kl-profile-item:hover svg{color:var(--accent);}
.kl-profile-item.danger{color:var(--coral-600,#d6453a);}
.kl-profile-item.danger svg{color:var(--coral-600,#d6453a);}
.kl-profile-item.danger:hover{background:color-mix(in srgb,var(--coral-500,#e85544) 12%,transparent);color:var(--coral-600,#d6453a);}
.kl-profile-item.danger:hover svg{color:var(--coral-600,#d6453a);}

.kl-content{flex:1;min-width:0;padding:24px 26px 64px;}

/* page header */
.kl-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;}
.kl-page-head h1{font-size:var(--fs-2xl);}
.kl-page-head .lede{margin-top:5px;font-size:var(--fs-md);color:var(--text-muted);max-width:62ch;}
.kl-page-head .actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ====================== BUTTONS ====================== */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:550;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s,transform .06s,box-shadow .14s;
}
.btn:hover{background:var(--surface-hover);border-color:var(--gray-400);}
.btn:active{transform:translateY(.5px);}
.btn.accent{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);box-shadow:0 1px 0 rgba(0,0,0,.04);}
.btn.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 4px 14px rgba(var(--accent-rgb),.34);}
.btn.brand,.btn.primary{background:var(--navy-800);color:#fff;border-color:var(--navy-800);}
[data-theme="dark"] .btn.brand,[data-theme="dark"] .btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);}
.btn.brand:hover,.btn.primary:hover{background:var(--navy-700);border-color:var(--navy-700);}
.btn.ghost{background:transparent;border-color:transparent;}
.btn.ghost:hover{background:var(--surface-sunken);}
.btn.danger{color:var(--coral-600);background:var(--coral-100);border-color:transparent;}
.btn.danger:hover{background:var(--coral-200);}
.btn.sm{padding:5px 10px;font-size:var(--fs-xs);}
.btn.lg{padding:11px 18px;font-size:var(--fs-md);}
.btn.block{width:100%;justify-content:center;}

.iconbtn{
  width:32px;height:32px;display:inline-grid;place-items:center;border-radius:var(--r-sm);
  color:var(--text-muted);cursor:pointer;transition:background .14s,color .14s;
}
.iconbtn:hover{background:var(--surface-sunken);color:var(--text-strong);}
.iconbtn.active{background:var(--accent-soft);color:var(--accent-strong);}

.seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-sunken);border-radius:var(--r-sm);}
.seg button{padding:5px 12px;border-radius:var(--r-xs);font-size:12px;font-weight:550;color:var(--text-muted);transition:all .14s;}
.seg button:hover{color:var(--text-strong);}
.seg button.on{background:var(--surface);color:var(--text-strong);box-shadow:var(--sh-xs);}
[data-theme="dark"] .seg button.on{background:var(--surface-hover);}

/* ====================== CARD ====================== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--pad-card);position:relative;}
.card.flat{box-shadow:none;}
.card.raised{box-shadow:var(--sh-sm);}
.card.pad-lg{padding:calc(var(--pad-card) + 6px);}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.card-head h3{font-size:var(--fs-md);font-weight:600;display:flex;align-items:center;gap:8px;}
.card-head .sub{font-size:var(--fs-xs);color:var(--text-muted);}
.card-title-ico{color:var(--text-subtle);display:inline-grid;place-items:center;}

/* ====================== BADGES ====================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  font-size:var(--fs-xs);font-weight:600;border-radius:var(--r-xs);line-height:1.5;
  background:var(--surface-sunken);color:var(--text-muted);border:1px solid transparent;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge.accent{background:var(--accent-soft);color:var(--accent-strong);}
.badge.brand{background:var(--brand-soft);color:var(--navy-700);}
[data-theme="dark"] .badge.brand{color:var(--navy-300);}
.badge.danger{background:var(--danger-soft);color:var(--danger-fg);}
.badge.warn{background:var(--warn-soft);color:var(--warn-fg);}
.badge.ok{background:var(--ok-soft);color:var(--ok-fg);}
.badge.info{background:var(--info-soft);color:var(--info-fg);}
.badge.violet{background:var(--violet-soft);color:var(--violet);}
.badge.outline{background:transparent;border-color:var(--border-strong);color:var(--text-muted);}

.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green-500);animation:kl-pulse-live 2s infinite;flex-shrink:0;}
.live-tag{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 9px;border-radius:var(--r-pill);background:var(--ok-soft);color:var(--ok-fg);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;}

/* severity chip (new design) */
.sev{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-family:var(--font-mono);font-size:11px;font-weight:600;border-radius:var(--r-xs);text-transform:uppercase;letter-spacing:.05em;}
.sev-critical{background:var(--coral-100);color:var(--coral-700);}
.sev-high{background:var(--amber-100);color:var(--amber-700);}
.sev-medium{background:var(--blue-100);color:var(--blue-600);}
.sev-low{background:var(--ok-soft);color:var(--ok-fg);}
[data-theme="dark"] .sev-critical{background:#3a1916;color:#fca99e;}
[data-theme="dark"] .sev-high{background:#2f2410;color:#f5cb7a;}
[data-theme="dark"] .sev-medium{background:#13243f;color:#9cc2fb;}

/* action pill (new design) */
.act{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;font-size:11px;font-weight:600;border-radius:var(--r-pill);}
.act-block{background:var(--coral-100);color:var(--coral-600);}
.act-warn{background:var(--amber-100);color:var(--amber-700);}
.act-redact{background:var(--violet-100);color:var(--violet-600);}
.act-allow,.act-log{background:var(--ok-soft);color:var(--ok-fg);}
.act-confirm{background:var(--info-soft);color:var(--info-fg);}
[data-theme="dark"] .act-block{background:#3a1916;color:#fca99e;}
[data-theme="dark"] .act-warn{background:#2f2410;color:#f5cb7a;}
[data-theme="dark"] .act-redact{background:#211a3e;color:#c4aef7;}

.ai-mark{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;flex-shrink:0;color:#fff;font-family:var(--font-mono);font-weight:700;font-size:10px;}
.ai-mark.sm{width:20px;height:20px;font-size:9px;border-radius:6px;}

/* ====================== TABLE ====================== */
.tablewrap{overflow-x:auto;margin:0 calc(-1 * var(--pad-card)) calc(-1 * var(--pad-card));}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-base);}
.tbl thead th{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-subtle);text-align:left;padding:9px 14px;white-space:nowrap;
  background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  position:sticky;top:0;
}
.tbl thead th.right{text-align:right;}
.tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--divider);vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr{transition:background .1s;}
.tbl tbody tr.clickable,.tbl tbody tr.row-selectable{cursor:pointer;}
.tbl tbody tr.clickable:hover,.tbl tbody tr.row-selectable:hover{background:var(--surface-hover);}
.tbl tbody tr.clickable:hover td:first-child,.tbl tbody tr.row-selectable:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent);}
.tbl td.right{text-align:right;}
.tbl td.mono,.tbl .mono{font-family:var(--font-mono);font-size:12.5px;}
.tbl .t-strong{color:var(--text-strong);font-weight:600;}
.tbl .muted{color:var(--text-muted);}
.tbl .nowrap{white-space:nowrap;}
.tbl .truncate{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
tfoot td{padding:10px 14px;color:var(--text-muted);font-size:var(--fs-sm);border-top:1px solid var(--border);}
.row-new{animation:kl-fade-up .45s var(--ease-out) both;}
.row-flash{animation:kl-flash 1.2s var(--ease) both;}

/* ====================== FILTER BAR ====================== */
.filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.filter{
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:12.5px;cursor:pointer;transition:all .14s;user-select:none;
}
.filter:hover{border-color:var(--gray-400);background:var(--surface-hover);}
.filter.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);}
.filter .lbl{color:var(--text-muted);}
.filter.active .lbl{color:var(--accent-strong);}
.filter .val{font-weight:600;color:var(--text-strong);}
.filter.active .val{color:var(--accent-strong);}

.searchbox{
  display:flex;align-items:center;gap:8px;flex:1;min-width:200px;max-width:360px;
  padding:7px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  transition:border-color .14s,box-shadow .14s;
}
.searchbox:focus-within{border-color:var(--accent);box-shadow:var(--focus);}
.searchbox input{border:0;outline:0;flex:1;background:transparent;font-size:12.5px;}
.searchbox .ico{color:var(--text-subtle);flex-shrink:0;}

.select,.kl-select{
  appearance:none;padding:7px 30px 7px 11px;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);background:var(--surface);font-size:12.5px;color:var(--text);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397a0b2' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
  transition:border-color .14s;
}
.select:focus,.kl-select:focus{border-color:var(--accent);box-shadow:var(--focus);outline:none;}

/* ====================== OPERATION BANNER ====================== */
.op-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-left:3px solid var(--amber-400,#fbbf24);background:var(--amber-50,#fffbeb);}
[data-theme="dark"] .op-banner{background:#2a1f08;border-left-color:var(--amber-500,#f59e0b);}

/* ====================== KPI ====================== */
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:15px 16px 22px;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.kpi:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--sh-sm);}
.kpi .k-top{display:flex;align-items:center;gap:8px;}
.kpi .k-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong);flex-shrink:0;}
.kpi .k-label{font-size:var(--fs-sm);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);line-height:1.25;}
.kpi .k-value{font-size:var(--fs-4xl);font-weight:650;color:var(--text-strong)!important;font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.03em;}
.kpi .k-foot{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);}
.kpi .delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;font-variant-numeric:tabular-nums;}
.kpi .delta.up{color:var(--green-600);}
.kpi .delta.down{color:var(--coral-600);}
.kpi .delta.flat{color:var(--text-muted);}
/* Tendencia como gráfico de FONDO: ocupa la mitad inferior de la tarjeta y
   queda DETRÁS del contenido (z-index). El degradado se desvanece hacia abajo,
   así el valor (parte superior) permanece legible. */
.kpi .k-spark{position:absolute;left:0;right:0;bottom:0;height:62px;opacity:.5;pointer-events:none;z-index:0;}
.kpi .k-top,.kpi .k-value,.kpi .k-foot{position:relative;z-index:1;}
.kpi .k-rail{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.85;z-index:1;}
.kpi.crit .k-rail{background:var(--coral-500);}
.kpi.crit .k-ico{background:var(--coral-100);color:var(--coral-600);}
[data-theme="dark"] .kpi.crit .k-ico{background:#3a1916;color:#fca99e;}
[data-theme="dark"] .kpi .k-spark{opacity:.62;}

/* progress bar (new .bar + compat .progress) */
.bar{height:7px;background:var(--surface-sunken);border-radius:var(--r-pill);overflow:hidden;}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width 1s var(--ease-out);}
.bar.brand>span{background:var(--navy-700);}
.bar.danger>span{background:var(--coral-500);}
.bar.warn>span{background:var(--amber-500);}
.bar.ok>span{background:var(--green-500);}

/* ====================== DRAWER (new kl-drawer) ====================== */
.kl-backdrop{position:fixed;inset:0;background:rgba(7,13,26,.5);backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s;}
.kl-backdrop.open{opacity:1;pointer-events:auto;}
.kl-drawer{
  position:fixed;top:0;right:0;height:100vh;width:560px;max-width:100vw;
  background:var(--surface);border-left:1px solid var(--border);z-index:70;
  transform:translateX(100%);transition:transform .3s var(--ease-out);
  display:flex;flex-direction:column;box-shadow:var(--sh-xl);
}
.kl-drawer.open{transform:none;}
.kl-drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px;}
.kl-drawer-body{padding:20px 22px;overflow-y:auto;flex:1;}
.kl-drawer-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;}

/* ====================== KPI MODAL (centrado) ====================== */
.kl-kpi-modal-bd{position:fixed;inset:0;background:rgba(7,13,26,.55);backdrop-filter:blur(5px);z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;}
.kl-kpi-modal{background:var(--surface);border-radius:18px;border:1px solid var(--border);box-shadow:0 24px 64px rgba(7,13,26,.32),0 0 0 1px rgba(123,54,255,.08);width:100%;max-width:600px;max-height:88vh;display:flex;flex-direction:column;animation:kl-modal-in .22s var(--ease-out) both;}
@keyframes kl-modal-in{from{opacity:0;transform:scale(.96) translateY(10px);}to{opacity:1;transform:none;}}
.kl-kpi-modal-head{padding:22px 26px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px;}
.kl-kpi-modal-head .k-ico-lg{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex-shrink:0;}
.kl-kpi-modal-body{padding:22px 26px;overflow-y:auto;flex:1;}
.kl-kpi-modal-val{font-size:var(--fs-5xl);font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1;}
.kl-kpi-modal-foot{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:var(--fs-sm);}

/* ====================== EMPTY / LOADING ====================== */
.empty{text-align:center;padding:40px 20px;color:var(--text-muted);}
.empty .ico{color:var(--text-subtle);margin-bottom:12px;}
.skel{background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--surface-hover) 50%,var(--surface-sunken) 75%);background-size:200% 100%;animation:kl-shimmer 1.4s infinite;border-radius:var(--r-sm);}
.spinner{width:18px;height:18px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:kl-spin .7s linear infinite;}
.kbd{font-family:var(--font-mono);font-size:11px;padding:1px 6px;background:var(--surface-sunken);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;color:var(--text-muted);}
.metaline{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-muted);}
.metaline .dotsep{width:3px;height:3px;border-radius:50%;background:var(--text-subtle);}
.sdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.sdot.on{background:var(--green-500);box-shadow:0 0 0 3px rgba(27,181,111,.18);}
.sdot.idle{background:var(--amber-500);}
.sdot.off{background:var(--gray-400);}
.sdot.crit{background:var(--coral-500);box-shadow:0 0 0 3px rgba(232,85,68,.18);}
.sec-lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:9px;}

/* ============================================================
   LEGACY PAGE COMPONENTS (used by existing pages-*.jsx)
   ============================================================ */

/* Stats card */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;}
.stat .label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:6px;}
.stat .value{font-size:26px;font-weight:600;letter-spacing:-0.01em;color:var(--text-strong);font-variant-numeric:tabular-nums;}
.stat .delta{font-size:var(--text-xs);display:flex;align-items:center;gap:4px;}
.stat .delta.up{color:var(--green-600);}
.stat .delta.down{color:var(--coral-600);}
.stat .delta.neutral{color:var(--text-muted);}
.stat .spark{position:absolute;right:12px;bottom:10px;opacity:.9;pointer-events:none;}

/* Severity chip (old) */
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 6px 1px 5px;font-size:10.5px;font-weight:600;border-radius:3px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--font-mono);}
.chip-critical{background:#fee2dd;color:#b53324;}
.chip-high{background:#fde4cb;color:#a05a0e;}
.chip-medium{background:#e0eafe;color:#1d4ed8;}
.chip-low{background:#d8efe0;color:#126b41;}
[data-theme="dark"] .chip-critical{background:#391a18;color:#fca5a5;}
[data-theme="dark"] .chip-high{background:#3a2812;color:#fcd34d;}
[data-theme="dark"] .chip-medium{background:#142142;color:#93c5fd;}
[data-theme="dark"] .chip-low{background:#112f23;color:#6ee7b7;}

/* Action pill (old) */
.action-pill{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;font-size:11px;font-weight:600;border-radius:999px;}
.action-block{background:var(--coral-100);color:var(--coral-600);}
.action-warn{background:var(--amber-100);color:var(--amber-600);}
.action-log{background:var(--ok-soft);color:var(--green-600);}
.action-allow{background:var(--ok-soft);color:var(--green-600);}
.action-confirm{background:#ece7fb;color:#6d4bd0;}
.action-continue{background:#dbeafe;color:#1d4ed8;}
.action-redact{background:#e6e3fb;color:#5b4bc4;}
[data-theme="dark"] .action-block{background:#3b1a1d;color:#fca5a5;}
[data-theme="dark"] .action-warn{background:#2f2515;color:#fcd34d;}
[data-theme="dark"] .action-log,[data-theme="dark"] .action-allow{background:#102f23;color:#6ee7b7;}
[data-theme="dark"] .action-confirm{background:#241c44;color:#c9b6f7;}
[data-theme="dark"] .action-continue{background:#14223f;color:#93c5fd;}
[data-theme="dark"] .action-redact{background:#211d3f;color:#c4b5fd;}

/* Op chips */
.op-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;font-size:11px;font-weight:700;border-radius:999px;letter-spacing:.02em;}
.op-chip-coverage{background:#fde4cb;color:#a05a0e;border:1px solid #f0c896;}
.op-chip-shadow{background:#fdd9d3;color:#b53324;border:1px solid #f4b3a8;}
.op-chip-lifecycle{background:#d9e8fd;color:#1d4ed8;border:1px solid #b3cdf4;}
[data-theme="dark"] .op-chip-coverage{background:#3a2812;color:#fcd34d;border-color:#5c4318;}
[data-theme="dark"] .op-chip-shadow{background:#391a18;color:#fca5a5;border-color:#5e2723;}
[data-theme="dark"] .op-chip-lifecycle{background:#18233e;color:#93c5fd;border-color:#27395e;}
.op-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:var(--text-sm);}
.op-banner-coverage{background:#fef6ec;border:1px solid #f0c896;color:#8a4d0c;}
.op-banner-shadow{background:#fdf0ee;border:1px solid #f4b3a8;color:#93291d;}
.op-banner-lifecycle{background:#eef4fe;border:1px solid #b3cdf4;color:#1e40af;}
[data-theme="dark"] .op-banner-coverage{background:#271c0e;border-color:#5c4318;color:#fcd34d;}
[data-theme="dark"] .op-banner-shadow{background:#2a1513;border-color:#5e2723;color:#fca5a5;}
[data-theme="dark"] .op-banner-lifecycle{background:#131d33;border-color:#27395e;color:#93c5fd;}
.op-banner-icon{flex-shrink:0;display:grid;place-items:center;}
.op-banner-body{flex:1;line-height:1.45;}
.op-banner-body strong{font-weight:700;}

/* Drawer (old .drawer for ui.jsx Drawer component) */
.drawer-backdrop{position:fixed;inset:0;background:rgba(8,12,24,0.45);backdrop-filter:blur(2px);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s;}
.drawer-backdrop.open{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100vh;width:520px;max-width:100vw;background:var(--surface);border-left:1px solid var(--border);z-index:60;transform:translateX(100%);transition:transform .25s cubic-bezier(.5,0,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow-xl);}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
.drawer-head h2{margin:0;font-size:var(--text-lg);font-weight:600;color:var(--text-strong);flex:1;}
.drawer-body{padding:18px 22px;overflow-y:auto;flex:1;}
.drawer-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}

/* Misc */
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dot-status{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.dot-status.active{background:var(--green-500);box-shadow:0 0 0 3px rgba(22,165,101,0.18);}
.dot-status.idle{background:var(--amber-500);}
.dot-status.offline{background:var(--gray-400);}
.dot-status.outdated{background:var(--violet-500);}

/* Charts */
.barchart{display:flex;align-items:stretch;gap:2px;height:130px;}
.barchart .bar{flex:1;min-width:0;height:100%;border-radius:2px 2px 0 0;transition:opacity .15s;position:relative;}
.barchart .bar:hover{opacity:0.8;}
.heat{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;}
.heat .cell{aspect-ratio:1.4;border-radius:2px;background:var(--surface-sunken);}
.progress{height:6px;background:var(--surface-sunken);border-radius:999px;overflow:hidden;}
.progress>span{display:block;height:100%;background:var(--accent);border-radius:999px;}
.progress.brand>span{background:var(--brand);}
.progress.danger>span{background:var(--coral-500);}
.progress.warn>span{background:var(--amber-500);}
.progress.ok>span{background:var(--green-500);}

/* Input/field */
.field{display:flex;flex-direction:column;gap:4px;}
.field-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.input{padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:var(--text-base);background:var(--surface-alt);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;width:100%;}
.input:focus{border-color:var(--accent);box-shadow:var(--focus);}
.input--error{border-color:var(--coral-500) !important;}
.switch{display:inline-block;vertical-align:middle;position:relative;width:36px;height:20px;cursor:pointer;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch-track{position:absolute;inset:0;border-radius:999px;background:var(--border-strong);transition:background .2s;}
.switch input:checked+.switch-track{background:var(--accent);}
.switch-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.switch input:checked~.switch-knob{left:18px;}

/* Threat hunting v2 */
.th-win{display:inline-flex;gap:2px;background:var(--surface-sunken);padding:2px;border-radius:var(--radius-sm);}
.th-win .btn{border:0;padding:4px 10px;font-size:12px;font-weight:500;box-shadow:none;}
.th-win .btn.primary{background:var(--surface);color:var(--text-strong);border:1px solid var(--border-strong);}
.th-win .btn.ghost{background:transparent;color:var(--text-muted);}
.th-win .btn.ghost:hover{background:var(--surface);color:var(--text-strong);}
.th-ioc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;text-align:left;cursor:pointer;transition:border-color .12s,transform .05s,box-shadow .12s;display:flex;flex-direction:column;gap:4px;}
.th-ioc:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow);}
.th-ioc.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.th-ioc-l{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.th-ioc-v{font-size:26px;font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1;margin:2px 0;}
.th-ioc-s{font-size:11px;color:var(--text-subtle);}
.th-ioc-crit{border-top:2px solid var(--coral-500);}
.th-ioc-crit .th-ioc-v{color:var(--coral-600);}
.th-ioc-high{border-top:2px solid var(--amber-500);}
.th-ioc-high .th-ioc-v{color:var(--amber-600);}
[data-theme="dark"] .th-ioc-crit .th-ioc-v{color:#fca5a5;}
[data-theme="dark"] .th-ioc-high .th-ioc-v{color:#fcd34d;}
.th-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-size:12.5px;color:var(--text);font-weight:500;cursor:pointer;transition:all .12s;}
.th-chip:hover{background:var(--surface-sunken);border-color:var(--border-strong);}
.th-chip.active{background:var(--brand);border-color:var(--brand);color:white;}
.th-chip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.th-chip-count{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--surface-sunken);color:var(--text-muted);}
.th-chip.active .th-chip-count{background:rgba(255,255,255,.18);color:white;}
.th-chip.th-zero{opacity:.45;}
.th-chip-zero{opacity:.55;}
.th-bars2 .th-bar2{background:var(--accent);}

/* ── Threat Hunting redesign ─────────────────────────────── */
/* KPI cards: se renderizan con exec-kpis sm + window.StatCard (sin CSS custom) */
/* SIEM query console */
.hunt-console{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:20px;box-shadow:var(--sh-sm);}
.hunt-qrow{display:flex;align-items:stretch;gap:8px;}
.hunt-prompt{display:flex;align-items:center;padding:0 12px;border-radius:8px;background:var(--navy-800);color:var(--teal-300);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;flex-shrink:0;white-space:nowrap;}
[data-theme="dark"] .hunt-prompt{background:#0b1426;}
.hunt-input{flex:1;min-width:0;height:40px;padding:0 13px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface-sunken);color:var(--text-strong);font-family:var(--font-mono);font-size:12.5px;transition:border-color .15s,box-shadow .15s;}
.hunt-input::placeholder{color:var(--text-subtle);}
.hunt-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);background:var(--surface);}
.hunt-qrow .select,.hunt-qrow .kl-select{height:40px;}
.hunt-qrow .btn{height:40px;white-space:nowrap;padding-left:15px;padding-right:15px;}
.hunt-fields{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:11px;}
.hunt-fields .hf-lbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-subtle);margin-right:4px;flex-shrink:0;}
.hunt-fields .hf{font-family:var(--font-mono);font-size:10.5px;padding:3px 9px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);cursor:pointer;transition:all .12s;}
.hunt-fields .hf:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);}
/* two-column main layout */
.hunt-main{display:grid;grid-template-columns:256px 1fr;gap:18px;align-items:start;}
@media(max-width:900px){.hunt-main{grid-template-columns:1fr;}}
/* saved hunts sidebar */
.hunt-saved{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-sm);position:sticky;top:68px;max-height:calc(100vh - 180px);overflow-y:auto;}
.hunt-saved-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border-radius:9px;border:1px solid transparent;background:transparent;cursor:pointer;transition:background .12s,border-color .12s;margin-bottom:2px;}
.hunt-saved-item:hover{background:var(--surface-hover);}
.hunt-saved-item.on{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
.hunt-saved-item.th-zero{opacity:.5;}
.hunt-saved-item .st{color:var(--accent);flex-shrink:0;opacity:.65;}
.hunt-saved-item .hits{font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface-sunken);padding:2px 7px;border-radius:999px;flex-shrink:0;}
/* IOC compact pills */
.th-ioc-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;background:var(--surface);border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:border-color .12s,box-shadow .12s;white-space:nowrap;}
.th-ioc-pill:hover{border-color:var(--accent);}
.th-ioc-pill.active{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);}
.th-ioc-pill-v{font-size:14px;font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums;}
.th-ioc-pill-l{font-size:11.5px;color:var(--text-muted);font-weight:500;}
.th-ioc-pill-crit{border-color:color-mix(in srgb,var(--coral-500) 55%,transparent);}
.th-ioc-pill-crit .th-ioc-pill-v{color:var(--coral-600);}
.th-ioc-pill-high{border-color:color-mix(in srgb,var(--amber-500) 55%,transparent);}
.th-ioc-pill-high .th-ioc-pill-v{color:var(--amber-600);}
[data-theme="dark"] .th-ioc-pill-crit .th-ioc-pill-v{color:#fca5a5;}
[data-theme="dark"] .th-ioc-pill-high .th-ioc-pill-v{color:#fcd34d;}
@media(max-width:760px){.hunt-qrow{flex-wrap:wrap;} .hunt-input{flex-basis:100%;order:-1;}}

/* Tenant banner */
.tenant-banner{display:flex;align-items:center;gap:10px;padding:9px 16px;background:var(--info-soft);color:var(--info);border-bottom:1px solid rgba(44,108,239,0.25);font-size:var(--text-sm);font-weight:500;}
.tenant-banner .lab{background:var(--info);color:white;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.05em;}
[data-theme="dark"] .tenant-banner{background:#15233e;color:#93c5fd;}

/* Tenant switcher */
.tenant-switch{position:relative;margin:8px 12px 4px;}
.tenant-switch-btn{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;color:var(--text-strong);cursor:pointer;transition:border-color .12s,background .12s;}
.tenant-switch-btn:hover{border-color:var(--accent);}
.tenant-switch.open .tenant-switch-btn{border-color:var(--accent);background:var(--surface);}
.tenant-switch-btn .ico-lead{color:var(--accent);flex:0 0 auto;}
.tenant-switch-btn .ts-current{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tenant-switch-btn .ico-caret{color:var(--text-subtle);flex:0 0 auto;transition:transform .15s;}
.tenant-switch.open .tenant-switch-btn .ico-caret{transform:rotate(180deg);}
.tenant-switch-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 28px rgba(0,0,0,.16);overflow:hidden;}
.ts-pop-head{padding:8px 10px 6px;}
.ts-pop-title{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-subtle);}
.ts-pop-search{display:flex;align-items:center;gap:6px;margin:0 8px 6px;padding:5px 8px;background:var(--surface-sunken);border-radius:var(--radius-sm);}
.ts-pop-search .ico{color:var(--text-subtle);}
.ts-pop-search input{flex:1;border:0;background:transparent;outline:none;font-size:12px;color:var(--text-strong);}
.ts-pop-list{max-height:320px;overflow-y:auto;padding:4px;}
.ts-empty{padding:12px;text-align:center;font-size:12px;color:var(--text-subtle);}
.ts-item{width:100%;display:flex;align-items:center;gap:7px;padding:7px 10px;border:0;background:transparent;border-radius:6px;font-size:12.5px;color:var(--text-strong);cursor:pointer;text-align:left;}
.ts-item:hover{background:var(--surface-sunken);}
.ts-item.active{background:var(--accent-soft);}
.ts-guide{color:var(--text-subtle);font-size:11px;flex:0 0 auto;opacity:.6;margin-right:-2px;}
.ts-ico{color:var(--text-muted);flex:0 0 auto;}
.ts-ico.root{color:var(--accent);}
.ts-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ts-tag{font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:1px 6px;border-radius:999px;flex:0 0 auto;}
.ts-tag.own{background:var(--accent-soft);color:var(--accent-strong);}
.ts-tag.off{background:var(--danger-soft);color:var(--coral-600);}
.ts-check{color:var(--accent);flex:0 0 auto;}

/* DLP filterbar */
.dlp-filterbar select.select{padding:6px 26px 6px 10px;font-size:var(--text-sm);}
.group-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 6px;font-size:11px;font-weight:600;border-radius:4px;letter-spacing:.02em;color:white;}
.group-chip .gc-dot{width:6px;height:6px;border-radius:50%;background:white;opacity:.85;}
.org-inactive td{color:var(--text-subtle);}

/* Demo banner */
.demo-banner{display:flex;align-items:center;gap:10px;background:var(--info-soft);color:var(--info);border:1px solid color-mix(in srgb,var(--info) 18%,transparent);padding:10px 14px;border-radius:var(--radius);font-size:12.5px;margin-bottom:14px;}
.demo-banner svg{flex:none;}
.demo-banner strong{color:var(--info);margin-right:4px;}
.api-loading,.api-empty,.api-error{padding:32px 18px;text-align:center;color:var(--text-muted);font-size:13px;}
.api-error{color:var(--coral-600);}
.api-spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:vfboot .7s linear infinite;margin-right:8px;vertical-align:-4px;}
.data-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);white-space:nowrap;}
.data-pill.ok{color:var(--green-600);border-color:color-mix(in srgb,var(--green-500) 25%,transparent);background:var(--ok-soft);}
.data-pill.warn{color:var(--amber-600);border-color:color-mix(in srgb,var(--amber-500) 25%,transparent);background:var(--warn-soft);}

/* ====================== LOGIN + BOOT ====================== */
.login-shell{position:fixed;inset:0;overflow:hidden;background:linear-gradient(135deg,#0c1426 0%,#192847 55%,#1f3a5e 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;z-index:1000;font-family:var(--font-sans);}
.login-card{position:relative;z-index:2;width:100%;max-width:380px;background:var(--surface);border-radius:var(--radius-xl);padding:32px 32px 28px;box-shadow:0 30px 80px rgba(0,0,0,0.35);display:flex;flex-direction:column;gap:12px;}
.login-card .login-logo{display:block;max-width:200px;height:auto;margin:0 auto 14px;}
.login-card .login-logo-default{max-width:240px;}
.login-card .login-brand{display:flex;align-items:center;justify-content:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--divider);margin-bottom:6px;}
.login-brand-name{font-size:18px;font-weight:700;letter-spacing:.06em;color:var(--text-strong);}
.login-brand-sub{font-size:11.5px;color:var(--text-muted);}
.login-title{font-size:18px;font-weight:600;color:var(--text-strong);margin:6px 0 2px;}
.login-lede{font-size:12.5px;color:var(--text-muted);margin:0 0 8px;}
.login-error{background:var(--danger-soft);color:var(--coral-600);border-radius:var(--radius-sm);padding:8px 12px;font-size:12.5px;margin-bottom:2px;}
.login-card .field{display:flex;flex-direction:column;gap:4px;}
.login-card .field-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.login-card .input{padding:9px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:13.5px;background:var(--surface-alt);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;}
.login-card .input:focus{border-color:var(--accent);box-shadow:var(--focus);}
.login-submit{width:100%;justify-content:center;margin-top:6px;padding:10px;font-weight:600;}
.login-server-toggle{background:none;border:none;cursor:pointer;font-size:11.5px;color:var(--text-muted);align-self:flex-end;padding:4px 0;}
.login-server-toggle:hover{color:var(--accent);}
.login-foot{position:relative;z-index:2;margin-top:22px;font-size:11.5px;color:rgba(255,255,255,0.55);}
.login-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.login-patt{position:absolute;inset:-20%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 258'%3E%3Cpolygon fill='%237b36ff' fill-opacity='0.09' points='203.54 51.82 104.79 108.71 104.79 257.61 0 197.11 0 65.71 113.8 0 123.23 5.46 27.1 60.84 24.31 62.46 24.31 111.98 39.72 121.01 40.24 72.03 139.49 14.85 150 20.9 50.38 78.31 50.38 196.01 66.64 205.5 66.64 87.7 166.25 30.29 176.76 36.36 77.58 93.49 77.58 211.23 93.84 220.68 93.84 102.88 193.04 45.75 203.54 51.82'/%3E%3Cpolygon fill='%237b36ff' fill-opacity='0.09' points='160.76 97.75 160.76 109.96 132.27 126.37 132.27 163.09 121.33 169.8 121.33 120.47 160.76 97.75'/%3E%3C/svg%3E");background-size:110px 139px;background-repeat:repeat;will-change:transform;animation:vfPatt 25s linear infinite;}
.login-mask{position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at 50% 50%,rgba(12,20,38,0.92) 0%,rgba(12,20,38,0.45) 55%,transparent 100%);}
.login-orb{position:absolute;border-radius:50%;pointer-events:none;}
.login-orb.orb-a{width:640px;height:640px;top:-160px;right:-140px;background:radial-gradient(circle,rgba(123,54,255,0.22) 0%,transparent 68%);animation:vfOrbA 9s ease-in-out infinite;}
.login-orb.orb-b{width:520px;height:520px;bottom:-120px;left:-100px;background:radial-gradient(circle,rgba(123,54,255,0.15) 0%,transparent 68%);animation:vfOrbB 11s ease-in-out infinite;}
.login-lang{position:absolute;top:20px;right:24px;z-index:3;}
.login-lang .lang-switcher{font-size:13px;}
@media(prefers-reduced-motion:reduce){.login-patt,.login-orb{animation:none !important;}}

.boot-shell{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);font-family:var(--font-sans);z-index:999;}
.boot-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:vfboot .7s linear infinite;}
.boot-text{font-size:13px;color:var(--text-muted);}

/* Brand logo helpers */
.brand-logo-img{max-width:130px;max-height:36px;object-fit:contain;display:block;}

/* ====================== ONBOARDING WIZARD ====================== */
.register-shell{display:flex;width:100%;max-width:860px;min-height:520px;background:var(--surface);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.35);margin:auto;position:relative;z-index:2;}
.register-sidebar{width:240px;flex-shrink:0;background:var(--surface-alt);border-right:1px solid var(--divider);padding:28px 20px;display:flex;flex-direction:column;gap:28px;}
.register-sidebar .login-brand{margin:0;padding:0;border:none;justify-content:flex-start;}
.register-sidebar .login-logo,.register-sidebar .login-logo-default{max-width:150px;margin:0;}
.register-content .login-logo,.register-content .login-logo-default{max-width:180px;}
.register-nav{display:flex;flex-direction:column;gap:4px;}
.register-nav-step{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-size:13.5px;font-family:inherit;cursor:default;transition:background .15s,color .15s;}
.register-nav-step--completed{color:var(--text);}
.register-nav-step--completed:not(.register-nav-step--active){cursor:pointer;}
.register-nav-step--completed:not(.register-nav-step--active):hover{background:var(--surface-sunken);}
.register-nav-step--active{background:var(--accent-soft);color:var(--accent-strong);font-weight:600;}
.register-nav-step-num{width:22px;height:22px;border-radius:50%;background:var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;transition:background .15s,color .15s;}
.register-nav-step--active .register-nav-step-num{background:var(--accent);color:var(--accent-fg);}
.register-nav-step--completed .register-nav-step-num{background:var(--teal-500);color:#fff;}
.register-content{flex:1;padding:32px 36px;overflow-y:auto;display:flex;flex-direction:column;}
.register-step{display:flex;flex-direction:column;gap:12px;}
.register-step-title{font-size:20px;font-weight:700;color:var(--text-strong);margin:0 0 2px;}
.register-step-lede{color:var(--text-muted);font-size:13px;margin:0 0 8px;}
@media(max-width:700px){
  .register-shell{flex-direction:column;border-radius:0;min-height:100dvh;}
  .register-sidebar{width:100%;padding:16px;gap:16px;border-right:none;border-bottom:1px solid var(--divider);}
  .register-sidebar .login-logo,.register-sidebar .login-logo-default{max-width:120px;}
  .register-nav{flex-direction:row;gap:4px;overflow-x:auto;}
  .register-nav-step>span:last-child{display:none;}
  .register-content{padding:20px 16px;}
}

/* Tweaks panel compat */
[data-tweaks-panel]{font-family:var(--font-sans);}

/* kl-toggle (screens.css shared toggle) */
.kl-toggle{width:38px;height:21px;border-radius:999px;background:var(--border-strong);position:relative;transition:background .18s;flex-shrink:0;cursor:pointer;border:none;}
.kl-toggle.on{background:var(--accent);}
.kl-toggle .knob{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.kl-toggle.on .knob{left:19.5px;}

/* Placeholder page */
.kl-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;gap:16px;color:var(--text-muted);text-align:center;}
.kl-placeholder .ph-icon{width:56px;height:56px;border-radius:16px;background:var(--surface-sunken);display:grid;place-items:center;color:var(--text-subtle);margin-bottom:4px;}
.kl-placeholder h2{font-size:var(--fs-xl);color:var(--text-strong);margin:0;}
.kl-placeholder p{font-size:var(--fs-md);max-width:40ch;margin:0;}
.kl-placeholder .badge{font-size:var(--fs-xs);}

/* ============================================================
   PRODUCTION COMPAT (ported from TraceHold production)
   Legacy .app/.sidebar class-based layout used by existing JSX.
   ============================================================ */

hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* ---- APP SHELL (legacy class names used by app.jsx) ---- */
.app {
  display: grid;
  grid-template-columns: var(--rail-w, 248px) 1fr;
  min-height: 100vh;
  background: var(--bg);
  background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

.sidebar {
  position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, var(--rail-bg-2), var(--rail-bg) 60%);
  border-right: 1px solid var(--rail-border);
  display: flex; flex-direction: column;
  z-index: 40; color: var(--rail-text); overflow: hidden;
}
.sidebar::before {
  content: ''; position: absolute; top: -120px; left: -40px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(18,177,176,.22), transparent 70%);
  pointer-events: none;
}

.main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 26px; height: 56px;
  display: flex; align-items: center; gap: 14px;
}

.content { flex: 1; overflow-y: auto; }

/* ---- SIDEBAR BRAND ---- */
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px; position: relative;
}
.badge-org {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: rgba(18,177,176,.15); color: var(--accent);
  border: 1px solid rgba(18,177,176,.25); max-width: 84px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- SIDEBAR SEARCH ---- */
.sidebar-search { margin: 2px 12px 8px; position: relative; }
.sidebar-search input {
  width: 100%; height: 34px; padding: 0 30px 0 32px;
  background: rgba(255,255,255,0.045); border: 1px solid var(--rail-border);
  border-radius: var(--r); color: var(--rail-text-hi); font-size: 12.5px; outline: none;
  transition: border-color .15s, background .15s;
}
.sidebar-search input::placeholder { color: var(--rail-text-dim); }
.sidebar-search input:focus { border-color: var(--accent); background: rgba(18,177,176,.08); }
.sidebar-search .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--rail-text-dim); pointer-events: none; }
.sidebar-search .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--rail-text-dim); border: 1px solid var(--rail-border); padding: 1px 5px; border-radius: 5px; }

/* ---- SIDEBAR NAV ---- */
.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 8px 16px; display: flex; flex-direction: column; gap: 1px; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

.nav-section {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rail-section); padding: 15px 12px 6px; display: flex; align-items: center; gap: 7px;
}
.nav-section::after { content: ''; flex: 1; height: 1px; background: var(--rail-border); }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; margin: 0 2px; border-radius: var(--r-sm);
  color: var(--rail-text); font-size: 13px; font-weight: 500; cursor: pointer;
  position: relative; transition: color .14s, background .14s; white-space: nowrap;
}
.nav-item:hover { color: var(--rail-text-hi); background: var(--rail-hover); }
.nav-item .ico { flex-shrink: 0; opacity: .85; transition: opacity .14s, color .14s; }
.nav-item:hover .ico { opacity: 1; }
.nav-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-item.active { color: var(--rail-text-hi); background: var(--rail-active); }
.nav-item.active .ico { color: var(--accent); opacity: 1; }
.nav-item.active::before {
  content: ''; position: absolute; left: -2px; top: 7px; bottom: 7px; width: 3px;
  background: var(--accent); border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(var(--accent-rgb), .7);
}
.nav-item .count {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); color: var(--rail-text);
  min-width: 20px; text-align: center;
}
.nav-item .count.danger { background: var(--coral-500); color: #fff; }

/* ---- SIDEBAR FOOTER ---- */
.sidebar-footer {
  border-top: 1px solid var(--rail-border); padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
}
.who-trigger {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: 9px;
  background: rgba(255,255,255,.03); border: 1px solid var(--rail-border);
  cursor: pointer; transition: background .15s, border-color .15s;
  min-width: 0;
}
.who-trigger:hover { background: var(--rail-hover); border-color: rgba(18,177,176,.4); }
.who { min-width: 0; }
.who .name { font-size: 12.5px; font-weight: 600; color: var(--rail-text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .meta { font-size: 10px; color: var(--rail-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- TOPBAR INTERNALS ---- */
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.crumbs .sep { color: var(--text-subtle); }
.crumbs .now { color: var(--text-strong); font-weight: 600; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

/* Sidebar toggle button in topbar */
.sidebar-toggle-btn { flex-shrink: 0; color: var(--text-muted); }
.sidebar-toggle-btn:hover { color: var(--text-strong); }

/* Default/mark logo swap rules for old .sidebar-brand */
.sidebar-brand .brand-logo-default { max-height: 30px; max-width: 150px; margin-right: auto; }
.sidebar-brand .brand-logo-mark { display: none; align-items: center; }

/* Old page header (distinct from .kl-page-head) */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; color: var(--text-strong); }
.page-head .lede { margin-top: 4px; font-size: var(--text-md); color: var(--text-muted); }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Legacy .app sidebar-collapsed (JS-toggled, persisted in localStorage) */
.app.sidebar-collapsed { grid-template-columns: 64px 1fr; }
.app.sidebar-collapsed .sidebar-brand span:not(.logomark),
.app.sidebar-collapsed .sidebar-brand .badge-org,
.app.sidebar-collapsed .sidebar-search,
.app.sidebar-collapsed .sidebar-section-label,
.app.sidebar-collapsed .nav-item span.label,
.app.sidebar-collapsed .nav-item .count,
.app.sidebar-collapsed .sidebar-footer .who { display: none; }
.app.sidebar-collapsed .sidebar-brand .brand-logo-default { display: none; }
.app.sidebar-collapsed .sidebar-brand .brand-logo-mark { display: inline-flex; }
.app.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 18px 8px; }
.app.sidebar-collapsed .nav-item { justify-content: center; padding: 9px; }
.app.sidebar-collapsed .nav-item.active::before { left: -10px; }
.app.sidebar-collapsed .sidebar-footer { justify-content: center; }

/* Responsive auto-collapse for old .app layout */
@media (max-width: 1100px) {
  .app { grid-template-columns: 64px 1fr; }
  .sidebar-brand span:not(.logomark), .sidebar-brand .badge-org, .sidebar-search, .sidebar-section-label, .nav-item span.label, .nav-item .count, .sidebar-footer .who { display: none; }
  .sidebar-brand .brand-logo-default { display: none; }
  .sidebar-brand .brand-logo-mark { display: inline-flex; }
  .sidebar-brand { justify-content: center; padding: 18px 8px; }
  .nav-item { justify-content: center; padding: 9px; }
  .nav-item.active::before { left: -10px; }
  .sidebar-footer { justify-content: center; }
}

/* Multi-tenant: hide write actions when viewing another tenant (old .app) */
.app.viewing-tenant .tenant-rw { display: none !important; }

/* Data pill loading state */
.data-pill.loading { color: var(--text-muted); }

/* ====================== UTILITY ADDITIONS ====================== */

/* stat-grid: 4-column responsive KPI grid */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.stat-grid{grid-template-columns:1fr;}}

/* card-body: standard content padding inside .card when card-head is present */
.card-body{padding:16px 20px;}

/* empty-state: legacy alias for .api-empty */
.empty-state{padding:40px 24px;text-align:center;color:var(--text-muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.empty-state p{margin:0;}

/* ============================================================
   USERS — Rediseño 2026
   ============================================================ */
.usr-cell{display:flex;align-items:center;gap:10px;min-width:0;}
.usr-id{min-width:0;}
.usr-name{font-size:13px;font-weight:600;color:var(--text-strong);display:flex;align-items:center;gap:7px;}
.usr-mail{font-size:11px;color:var(--text-muted);}

.usr-risk{display:flex;align-items:center;gap:9px;min-width:128px;}
.usr-risk .bar{flex:1;max-width:70px;}
.usr-risk-v{font-family:var(--font-mono);font-size:12.5px;font-weight:700;width:24px;text-align:right;}
.usr-risk-band{font-size:10px;font-weight:650;letter-spacing:.02em;}

.usr-ai{display:flex;align-items:center;gap:9px;}
.usr-ai-n{font-family:var(--font-mono);font-size:12.5px;font-weight:650;color:var(--text-strong);}
.usr-provstack{display:flex;align-items:center;}
.usr-provstack .ai-mark{margin-left:-5px;box-shadow:0 0 0 2px var(--surface);}
.usr-provstack .ai-mark:first-child{margin-left:0;}
.usr-provmore{font-size:10px;font-weight:600;color:var(--text-muted);margin-left:5px;}

.usr-agent{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:var(--r-pill);font-size:11px;font-weight:600;}
.usr-agent .adot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

.usr-status-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);}
.usr-status-dot .sdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

.usr-shadow-flag{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:var(--r-pill);font-size:10px;font-weight:650;background:var(--amber-100);color:var(--amber-700);}
[data-theme="dark"] .usr-shadow-flag{background:#2f2410;color:#f5cb7a;}

.usr-th-sort{cursor:pointer;user-select:none;white-space:nowrap;}
.usr-th-sort:hover{color:var(--text-strong);}
.usr-th-sort .caret{display:inline-flex;vertical-align:-2px;margin-left:3px;opacity:0;transition:opacity .12s;}
.usr-th-sort.on .caret{opacity:1;color:var(--accent-strong);}

/* Drawer de perfil */
.sec-lbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;}
.usr-d-band{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.usr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:6px;}
.usr-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:10px 12px 11px;}
.usr-stat .l{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-subtle);}
.usr-stat .v{font-size:20px;font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1.1;margin-top:5px;}
.usr-sec{margin-top:20px;}
.usr-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.usr-risktrend{display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.usr-risktrend .big{font-family:var(--font-mono);font-size:30px;font-weight:700;line-height:1;}
.usr-risktrend .meta{flex:1;min-width:0;}
.usr-risktrend .meta .b{font-size:12px;font-weight:650;}
.usr-risktrend .meta .s{font-size:11px;color:var(--text-muted);margin-top:3px;}
.usr-risktrend .spark{flex-shrink:0;}
.usr-ai-list{display:flex;flex-direction:column;gap:9px;}
.usr-ai-row{display:flex;align-items:center;gap:10px;}
.usr-ai-row .nm{font-size:12.5px;font-weight:600;color:var(--text-strong);width:84px;flex-shrink:0;}
.usr-ai-row .bar{flex:1;}
.usr-ai-row .ct{font-family:var(--font-mono);font-size:11.5px;font-weight:650;color:var(--text-muted);width:58px;text-align:right;}
.usr-ai-row .cov{width:15px;display:grid;place-items:center;flex-shrink:0;}
.usr-chips{display:flex;flex-wrap:wrap;gap:7px;}
.usr-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:9px;font-size:12px;font-weight:550;background:var(--surface-sunken);border:1px solid var(--border);color:var(--text);}
.usr-chip svg{color:var(--text-subtle);}
.usr-dev{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--border);border-radius:11px;}
.usr-dev+.usr-dev{margin-top:8px;}
.usr-dev .dico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surface-sunken);color:var(--text-muted);flex-shrink:0;}
.usr-dev .grow{flex:1;min-width:0;}
.usr-dev .dname{font-size:12.5px;font-weight:650;color:var(--text-strong);font-family:var(--font-mono);}
.usr-dev .dmeta{font-size:11px;color:var(--text-muted);margin-top:2px;}
.usr-act{display:flex;align-items:center;gap:10px;padding:8px 2px;}
.usr-act+.usr-act{border-top:1px solid var(--divider);}
.usr-act .grow{flex:1;min-width:0;}
.usr-act .at{font-size:12.5px;font-weight:600;color:var(--text-strong);}
.usr-act .am{font-family:var(--font-mono);font-size:10.5px;color:var(--text-subtle);margin-top:2px;}
.usr-kvs{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;}
.usr-kv{display:flex;flex-direction:column;gap:2px;}
.usr-kv .k{font-size:10.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text-subtle);}
.usr-kv .v{font-size:12.5px;color:var(--text);font-weight:550;}
.usr-note{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-left:2.5px solid var(--amber-500);border-radius:9px;padding:10px 12px;line-height:1.55;margin-bottom:16px;}
.usr-note svg{color:var(--amber-600);flex-shrink:0;margin-top:1px;}
.usr-note b{color:var(--text);font-weight:650;}
/* identidades relacionadas en el drawer */
.usr-identities{display:flex;flex-direction:column;gap:0;}
.usr-identity-row{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:9px;}
.usr-identity-row:hover{background:var(--surface-hover);}
.usr-identity-row .dico{display:grid;place-items:center;flex-shrink:0;width:22px;}
.usr-identity-row .grow{flex:1;min-width:0;}

@media(max-width:900px){.usr-stats{grid-template-columns:repeat(2,1fr);}.usr-kvs{grid-template-columns:1fr;}}

/* data-table: legacy alias — same as .tbl */
table.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-base);}
.data-table thead th{padding:9px 14px;font-size:11.5px;font-weight:600;color:var(--text-muted);text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;letter-spacing:.02em;}
.data-table tbody td{padding:10px 14px;border-bottom:1px solid var(--divider);vertical-align:middle;}
.data-table tbody tr:last-child td{border-bottom:0;}
.data-table tbody tr:hover{background:var(--surface-hover);}

/* ====================== ENDPOINTS (Flota · rediseño) ======================
   Master/detail de la sección Endpoints. Portado del artefacto de diseño
   (autorado en el look Clásico) y TOKENIZADO para que se adapte solo a los
   dos skins (Moderno por defecto / Clásico via [data-skin]): radios literales
   → var(--r-*), gradientes/hex → var(--surface*), pulso → keyframe compartido.
   Solo geometría no tematizada (anchos, gaps, tamaños de icono) queda en px. */

/* — celda de equipo en la tabla — */
.ep-cell { display:flex; align-items:center; gap:11px; }
.ep-cell-ico { position:relative; width:32px; height:32px; border-radius:var(--r-lg); display:grid; place-items:center; background:var(--surface-sunken); color:var(--text-muted); flex-shrink:0; }
.ep-cell-dot { position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background:var(--text-subtle); border:2px solid var(--surface); }
.ep-cell-dot.on { background:var(--green-500); }
.ep-id { min-width:0; }
.ep-host { font-family:var(--font-mono); font-size:12.5px; font-weight:650; color:var(--text-strong); letter-spacing:.01em; }
.ep-tag { font-family:var(--font-mono); font-size:10.5px; color:var(--text-subtle); margin-top:1px; }

/* — badge de sistema operativo — */
.ep-os { display:inline-flex; align-items:center; gap:7px; }
.ep-os-sq { width:9px; height:9px; border-radius:var(--r-xs); flex-shrink:0; }
.ep-os-lbl { font-size:12px; color:var(--text-muted); white-space:nowrap; }

/* — versión + estado del agente — */
.ep-agent { display:flex; align-items:center; gap:9px; }
.ep-ver { font-size:11.5px; font-weight:600; color:var(--text-muted); }

/* — pastilla de estado del agente (color va inline desde el catálogo) — */
.ep-status { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-sm); font-size:11px; font-weight:650; letter-spacing:.01em; white-space:nowrap; }

/* — punto en línea / offline — */
.ep-online { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--text-subtle); }
.ep-online.on { color:var(--green-600); }
.ep-online .d { width:7px; height:7px; border-radius:50%; background:currentColor; }
.ep-online.on .d { box-shadow:0 0 0 0 color-mix(in srgb, var(--green-500) 50%, transparent); animation:kl-pulse-live 2.4s infinite; }

/* — cobertura de canal (icono de estado en la ficha) — */
.ep-cov { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; color:var(--text-muted); }

/* ====================== FICHA A PÁGINA ENTERA ====================== */
/* — migas + volver — */
.ep-detail-bar { display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.ep-back { display:inline-flex; align-items:center; gap:4px; padding:5px 11px 5px 7px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:linear-gradient(180deg,var(--surface),var(--surface-2)); font-size:12.5px; font-weight:600; color:var(--text); cursor:pointer; }
.ep-back:hover { background:linear-gradient(180deg,var(--surface-hover),var(--surface-sunken)); border-color:var(--gray-400); }
.ep-crumb-sep { color:var(--text-subtle); }
.ep-crumb-now { font-size:12.5px; font-weight:650; color:var(--text-muted); }

/* — cabecera de la ficha — */
.ep-detail-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.ep-detail-head h1 { margin:0; }
.ep-detail-head .actions { margin-left:auto; }
.ep-headico { width:44px; height:44px; border-radius:var(--r-xl); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-strong); flex-shrink:0; }
.ep-headico.lg { width:56px; height:56px; border-radius:var(--r-2xl); }

/* — cuerpo en dos columnas — */
.ep-detail-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start; }
.ep-col { display:flex; flex-direction:column; gap:16px; min-width:0; }

/* — panel (card especializada de la ficha) — */
.ep-panel { padding:16px 18px; }
.ep-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }

/* — enforcement por canal — */
.ep-enf { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* — acciones del equipo — */
.ep-actions { display:flex; flex-direction:column; gap:8px; }
.ep-action { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2); cursor:pointer; transition:background .12s, border-color .12s; }
.ep-action:hover { background:var(--surface-hover); border-color:var(--gray-400); }
.ep-action:disabled { opacity:.55; cursor:default; }
.ep-action .ep-action-ico { width:32px; height:32px; border-radius:var(--r-lg); display:grid; place-items:center; background:var(--surface-sunken); color:var(--text-muted); flex-shrink:0; }
.ep-action .grow { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ep-action .l { font-size:12.5px; font-weight:650; color:var(--text-strong); }
.ep-action .d { font-size:10.5px; color:var(--text-muted); }
.ep-action .chev { color:var(--text-subtle); flex-shrink:0; }
.ep-action.accent .ep-action-ico { background:var(--accent-soft); color:var(--accent-strong); }
.ep-action.accent { border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ep-action.warn .ep-action-ico { background:var(--warn-soft); color:var(--warn-fg); }
.ep-action.danger .ep-action-ico { background:var(--danger-soft); color:var(--danger-fg); }
.ep-action.danger:hover { border-color:var(--coral-500); }
.ep-action.danger .l { color:var(--coral-600); }

/* — identificadores con copiar — */
.ep-ids { display:flex; flex-direction:column; }
.ep-idrow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--divider); }
.ep-idrow:last-child { border-bottom:0; }
.ep-idrow .k { font-size:10.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--text-subtle); width:118px; flex-shrink:0; }
.ep-idval { flex:1; min-width:0; font-family:var(--font-mono); font-size:11.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep-copy { width:24px; height:24px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--text-subtle); border:1px solid transparent; flex-shrink:0; cursor:pointer; background:none; }
.ep-copy:hover { background:var(--surface-sunken); color:var(--accent-strong); border-color:var(--border); }

@media (max-width:1040px) { .ep-detail-grid { grid-template-columns:1fr; } }

/* ====================== AUXILIARES usr-* que faltaban ====================== */
/* — enlace de texto (acento) — */
.usr-link { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:600; color:var(--accent-strong); background:none; border:0; cursor:pointer; padding:0; }
.usr-link:hover { text-decoration:underline; }

/* — listas aplicadas (canales / módulos / política) — */
.usr-applied { display:flex; flex-direction:column; gap:7px; }
.usr-applied-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); }
.usr-applied-row .ico { display:grid; place-items:center; flex-shrink:0; }
.usr-applied-row .grow { flex:1; min-width:0; font-size:12.5px; font-weight:550; color:var(--text); }

/* — Correlación controles ↔ motores de detección (Reporting → Compliance) — */
.cec-wrap { overflow-x:auto; }
.cec-table { width:100%; border-collapse:collapse; font-size:13px; }
.cec-table th, .cec-table td { padding:8px 10px; text-align:center; }
.cec-table thead th { font-size:11px; font-weight:700; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); }
.cec-table th.cec-ctrl-h { text-align:left; }
.cec-table th.cec-tot-h { text-align:right; }
.cec-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:650; padding:2px 8px; border-radius:999px; border:1px solid transparent; }
.cec-fw td { text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--text-subtle); padding-top:14px; padding-bottom:4px; }
.cec-row { cursor:pointer; border-bottom:1px solid var(--border-subtle, var(--border)); transition:background .12s; }
.cec-row:hover { background:var(--surface-2); }
.cec-ctrl { text-align:left; }
.cec-ctrl .cec-code { font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--text-strong); margin-right:8px; }
.cec-ctrl .cec-name { font-size:12.5px; color:var(--text); }
.cec-cell { font-variant-numeric:tabular-nums; border-radius:6px; min-width:54px; }
.cec-cell.cec-na { color:var(--text-muted); opacity:.55; }
.cec-cell.cec-zero { color:var(--text-muted); }
.cec-cell.cec-hit { cursor:pointer; }
.cec-cell .cec-cnt { font-weight:700; color:var(--text-strong); }
.cec-tot { text-align:right; font-variant-numeric:tabular-nums; font-weight:650; color:var(--text); }
.cec-foot td { border-top:1px solid var(--border); font-size:11.5px; font-weight:650; color:var(--text-subtle); padding-top:10px; }
.cec-foot td:first-child { text-align:left; }
.cec-unmapped { margin-top:12px; font-size:12px; color:var(--text-muted); }
.cec-unmapped-i { display:inline-block; margin:0 8px 4px 0; padding:2px 8px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); }
/* drawer drill-down */
.cec-drawer-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.cec-stat { border:1px solid var(--border); border-radius:var(--r-lg, 10px); padding:12px; background:var(--surface-2); display:flex; flex-direction:column; gap:6px; }
.cec-stat.cec-stat-na { opacity:.6; }
.cec-stat-v { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.cec-stat-sub { font-size:11px; color:var(--text-muted); }
.cec-stat-na-t { font-size:11px; color:var(--text-muted); }
.cec-sub { font-size:11.5px; font-weight:700; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }

/* — Badge de ruptura de cumplimiento (marcado en cada detección/incidente) — */
.badge.cmp-breach {
  display:inline-flex; align-items:center;
  color:var(--amber-700, #9a6a00);
  background:color-mix(in srgb, var(--amber-500) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--amber-500) 34%, transparent);
}

/* — Tarjetas de marco normativo (Reporting → Compliance) — */
.fw-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.fw-card { border:1px solid var(--border); border-radius:var(--r-lg, 12px); background:var(--surface-2); padding:14px; display:flex; flex-direction:column; gap:10px; }
.fw-card.open { grid-column:1 / -1; }
.fw-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; background:none; border:0; padding:0; cursor:pointer; width:100%; }
.fw-card-head .fw-name { font-size:14.5px; font-weight:700; color:var(--text-strong); }
.fw-stats { display:flex; gap:18px; }
.fw-stat { display:flex; flex-direction:column; gap:1px; }
.fw-stat-v { font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text-strong); }
.fw-stat-l { font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.fw-expand { align-self:flex-start; background:none; border:0; color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; padding:2px 0; }
.fw-controls { margin-top:4px; border-top:1px solid var(--border); padding-top:8px; overflow-x:auto; }