/* ============================================================
   ACZEDA AI Operations — Design System (POC / DEMO)
   Estética: enterprise SaaS operativo (Linear / Stripe Dashboard)
   ============================================================ */

:root{
  --bg:               #f6f7fb;
  --bg-elev:          #ffffff;
  --bg-subtle:        #f9fafb;
  --bg-inset:         #f2f4f8;
  --bg-sidebar:       #0f1220;
  --bg-sidebar-2:     #171a2b;

  --border:           #e5e7ef;
  --border-strong:    #d3d7e3;

  --text:             #101323;
  --text-2:           #4b5163;
  --text-3:           #7c8296;
  --text-invert:      #ffffff;
  --sidebar-text:     #a9afc4;
  --sidebar-text-2:   #6f7691;

  --brand:            #4f46e5;
  --brand-600:        #4338ca;
  --brand-50:         #eef0ff;
  --brand-ring:       rgba(79,70,229,.30);

  --ai:               #7c3aed;
  --ai-50:            #f4f0ff;
  --ai-gradient:      linear-gradient(135deg,#5b4bff 0%,#8b3ff0 55%,#c026d3 100%);

  --ok:               #0f9d58;
  --ok-50:            #e8f8ef;
  --ok-border:        #b7e6cd;
  --warn:             #d97706;
  --warn-50:          #fff6e6;
  --warn-border:      #fadfa6;
  --danger:           #dc2626;
  --danger-50:        #fdecec;
  --danger-border:    #f6c9c9;
  --info:             #2563eb;
  --info-50:          #eaf1fe;
  --info-border:      #c3d8fb;

  --radius-sm:        6px;
  --radius:           10px;
  --radius-lg:        14px;
  --radius-xl:        20px;

  --shadow-xs:        0 1px 2px rgba(16,19,35,.05);
  --shadow-sm:        0 1px 3px rgba(16,19,35,.07), 0 1px 2px rgba(16,19,35,.04);
  --shadow:           0 4px 14px rgba(16,19,35,.07);
  --shadow-lg:        0 14px 40px rgba(16,19,35,.14);
  --shadow-xl:        0 26px 70px rgba(16,19,35,.22);

  --sidebar-w:        252px;
  --topbar-h:         60px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:13.5px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.015em; }
h1{ font-size:20px; }
h2{ font-size:16px; }
h3{ font-size:14px; }
h4{ font-size:13px; }
p{ margin:0 0 8px; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; padding:0; }
table{ border-collapse:collapse; width:100%; }
svg{ display:block; }

.mono{ font-family:var(--mono); font-size:12px; letter-spacing:-.02em; }
.muted{ color:var(--text-3); }
.small{ font-size:12px; }
.tiny{ font-size:11px; }
.strong{ font-weight:600; }
.nowrap{ white-space:nowrap; }
.right{ text-align:right; }
.center{ text-align:center; }
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.row{ display:flex; align-items:center; gap:10px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.row-wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.grow{ flex:1; min-width:0; }
.hidden{ display:none !important; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#c8ccd9; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#a9afc0; background-clip:content-box; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* ============================ LAYOUT ============================ */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--bg-sidebar);
  background-image:radial-gradient(900px 300px at 20% -10%, rgba(99,91,255,.20), transparent 70%);
  color:var(--sidebar-text);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  z-index:60;
}

.main-area{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* ---- sidebar brand ---- */
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:16px 16px 12px; }
.brand-logo{
  width:34px;height:34px;border-radius:10px;flex:0 0 34px;
  background:var(--ai-gradient); color:#fff;
  display:grid;place-items:center; font-weight:700; font-size:16px;
  box-shadow:0 6px 18px rgba(124,58,237,.45);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.brand-text strong{ color:#fff; font-size:14.5px; letter-spacing:.02em; }
.brand-ai{
  margin-left:5px; font-size:9.5px; font-weight:700; letter-spacing:.09em;
  background:var(--ai-gradient); padding:2px 5px; border-radius:5px; vertical-align:2px;
}
.brand-sub{ font-size:10.5px; color:var(--sidebar-text-2); letter-spacing:.04em; text-transform:uppercase; }

.demo-pill{
  margin:0 16px 14px; padding:6px 10px; border-radius:999px;
  background:rgba(250,204,21,.13); border:1px solid rgba(250,204,21,.32);
  color:#fcd34d; font-size:10px; font-weight:600; letter-spacing:.08em;
  display:flex; align-items:center; gap:6px;
}
.demo-pill .dot{ width:6px;height:6px;border-radius:50%;background:#facc15; animation:blink 2s infinite; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:0 10px 16px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:#2a2f45; background-clip:content-box; }
.nav-heading{
  font-size:10px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--sidebar-text-2); font-weight:600; margin:14px 8px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; margin-bottom:1px;
  font-size:13px; color:var(--sidebar-text); font-weight:500;
  transition:background .14s, color .14s;
}
.nav-item i{ width:16px; text-align:center; font-size:12.5px; opacity:.85; }
.nav-item span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:rgba(99,91,255,.22); color:#fff; }
.nav-item.active i{ opacity:1; color:#a5b4ff; }
.nav-kbd{
  font-size:9.5px; padding:1px 5px; border-radius:4px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:var(--sidebar-text-2);
}
.nav-count{
  font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px;
  background:rgba(255,255,255,.10); color:var(--sidebar-text);
}
.nav-count.danger{ background:rgba(220,38,38,.22); color:#fca5a5; }

.sidebar-footer{ padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.07); }
.engine-status{ display:flex; align-items:flex-start; gap:9px; }
.engine-status strong{ display:block; color:#e6e8f2; font-size:12px; }
.engine-status span{ font-size:10.5px; color:var(--sidebar-text-2); }
.pulse-dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e;margin-top:5px;flex:0 0 8px;
  box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow:0 0 0 9px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- topbar ---- */
.topbar{
  height:var(--topbar-h); flex:0 0 var(--topbar-h);
  background:var(--bg-elev); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; padding:0 18px;
  position:sticky; top:0; z-index:50;
}
.global-search{
  flex:1; max-width:520px; display:flex; align-items:center; gap:9px;
  background:var(--bg-inset); border:1px solid var(--border);
  border-radius:9px; padding:0 12px; height:36px;
  color:var(--text-3); font-size:13px; text-align:left;
  transition:border-color .15s, background .15s;
}
.global-search:hover{ border-color:var(--border-strong); background:#eef1f7; }
.global-search span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-search kbd{
  font-size:10px; padding:2px 6px; border-radius:5px;
  background:#fff; border:1px solid var(--border-strong); color:var(--text-3);
}
.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }

.icon-btn{
  width:36px;height:36px;border-radius:9px; display:grid;place-items:center;
  color:var(--text-2); border:1px solid transparent; position:relative;
  transition:background .15s;
}
.icon-btn:hover{ background:var(--bg-inset); color:var(--text); }
.notif-badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  background:var(--danger); color:#fff; font-size:9.5px; font-weight:700;
  border-radius:999px; display:grid; place-items:center; border:2px solid var(--bg-elev);
}

.user-chip{
  display:flex; align-items:center; gap:9px; padding:4px 9px 4px 4px;
  border:1px solid var(--border); border-radius:999px; transition:background .15s;
}
.user-chip:hover{ background:var(--bg-inset); }
.user-chip i{ font-size:10px; color:var(--text-3); }
.avatar{
  width:28px;height:28px;border-radius:50%; background:var(--ai-gradient); color:#fff;
  display:grid;place-items:center; font-size:11px; font-weight:600; flex:0 0 28px;
}
.user-meta{ display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.user-meta strong{ font-size:12.5px; }
.user-meta span{ font-size:10.5px; color:var(--text-3); }

/* ---- dropdowns ---- */
.dropdown{ position:relative; }
.dropdown-panel{
  position:absolute; right:0; top:calc(100% + 8px); width:340px;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); z-index:80; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s, transform .15s, visibility .15s; overflow:hidden;
}
.dropdown.open .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
.dropdown-head strong{ font-size:12.5px; }
.dropdown-sep{ height:1px; background:var(--border); margin:6px 0; }
.link-btn{ color:var(--brand); font-size:11.5px; font-weight:500; }
.link-btn:hover{ text-decoration:underline; }
.dropdown-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 14px; font-size:12.5px; color:var(--text-2); transition:background .12s;
}
.dropdown-item:hover{ background:var(--bg-inset); color:var(--text); }
.dropdown-item.danger{ color:var(--danger); }
.profile-panel{ width:300px; padding-bottom:8px; }
.profile-panel .muted{ padding:0 14px 4px; font-size:11px; line-height:1.45; }

.notif-panel{ width:380px; }
.notif-item{ display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; }
.notif-item:hover{ background:var(--bg-subtle); }
.notif-item.unread{ background:var(--brand-50); }
.notif-icon{
  width:28px;height:28px;border-radius:8px;flex:0 0 28px; display:grid;place-items:center; font-size:11.5px;
}
.notif-item p{ margin:0; font-size:12.5px; }
.notif-item time{ font-size:10.5px; color:var(--text-3); }

.role-switcher{ padding:6px 8px; }
.role-option{
  display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px;
  border-radius:8px; font-size:12.5px; color:var(--text-2); text-align:left;
}
.role-option:hover{ background:var(--bg-inset); }
.role-option.active{ background:var(--brand-50); color:var(--brand-600); font-weight:600; }
.role-option i{ width:14px; text-align:center; }
.role-option small{ color:var(--text-3); font-weight:400; }

.demo-banner{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(90deg,#fff8e6,#fffdf7);
  border-bottom:1px solid var(--warn-border);
  color:#8a5a04; font-size:11.5px; padding:7px 18px;
}
.demo-banner i{ color:var(--warn); }
.demo-banner strong{ color:#7c4f04; }

/* ---- view root ---- */
.view-root{ flex:1; padding:22px 24px 56px; max-width:1600px; width:100%; margin:0 auto; }
.loading-screen{ display:grid; place-items:center; gap:14px; padding:80px 0; color:var(--text-3); }
.loading-logo{
  width:52px;height:52px;border-radius:15px;background:var(--ai-gradient); color:#fff;
  display:grid;place-items:center;font-size:24px;font-weight:700; animation:blink 1.4s infinite;
}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 13px; border-radius:8px;
  font-size:12.5px; font-weight:500; white-space:nowrap;
  border:1px solid var(--border-strong); background:var(--bg-elev); color:var(--text);
  transition:background .14s, border-color .14s, box-shadow .14s, transform .06s;
}
.btn:hover{ background:var(--bg-inset); border-color:#c3c8d6; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn i{ font-size:11.5px; }

.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--shadow-xs); }
.btn-primary:hover{ background:var(--brand-600); border-color:var(--brand-600); }
.btn-ai{ background:var(--ai-gradient); border-color:transparent; color:#fff; box-shadow:0 4px 14px rgba(124,58,237,.32); }
.btn-ai:hover{ filter:brightness(1.07); }
.btn-success{ background:var(--ok); border-color:var(--ok); color:#fff; }
.btn-success:hover{ filter:brightness(1.06); }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover{ filter:brightness(1.06); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--text-2); }
.btn-ghost:hover{ background:var(--bg-inset); color:var(--text); }
.btn-outline-brand{ border-color:var(--brand); color:var(--brand-600); background:var(--brand-50); }
.btn-outline-brand:hover{ background:#e4e7ff; }
.btn-copilot{ border-color:var(--ai); color:var(--ai); background:var(--ai-50); font-weight:600; }
.btn-copilot:hover{ background:#ebe2ff; }
.btn-lg{ height:42px; padding:0 18px; font-size:13.5px; border-radius:10px; }
.btn-xl{ height:64px; padding:0 24px; font-size:16px; border-radius:14px; font-weight:600; }
.btn-block{ width:100%; }
.btn-soft-danger{ background:var(--danger-50); border-color:var(--danger-border); color:var(--danger); }
.btn-soft-danger:hover{ background:#fbdcdc; }

/* ============================ CARDS ============================ */
.card{
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.card-head h2, .card-head h3{ display:flex; align-items:center; gap:8px; }
.card-head i{ color:var(--text-3); font-size:12px; }
.card-body{ padding:16px; }
.card-body.tight{ padding:0; }

.grid{ display:grid; gap:14px; }
.grid-kpi{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.span-2{ grid-column:span 2; }

/* page header */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.page-head h1{ display:flex; align-items:center; gap:10px; }
.page-head .sub{ color:var(--text-3); font-size:12.5px; margin-top:3px; }
.breadcrumb{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-3); margin-bottom:6px; }
.breadcrumb a:hover{ color:var(--brand); }

/* ============================ KPI ============================ */
.kpi{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:15px 16px; box-shadow:var(--shadow-xs); position:relative; overflow:hidden;
}
.kpi::after{ content:""; position:absolute; inset:0 0 auto auto; width:80px;height:80px; border-radius:50%; background:var(--brand-50); transform:translate(26px,-30px); }
.kpi-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; position:relative; }
.kpi-icon{ width:28px;height:28px;border-radius:8px; display:grid;place-items:center; font-size:11.5px; background:var(--brand-50); color:var(--brand); flex:0 0 28px; }
.kpi-label{ font-size:11.5px; color:var(--text-3); font-weight:500; }
.kpi-value{ font-size:27px; font-weight:700; letter-spacing:-.03em; line-height:1.1; position:relative; }
.kpi-value .unit{ font-size:14px; font-weight:600; color:var(--text-3); margin-left:2px; }
.kpi-foot{ display:flex; align-items:center; gap:6px; margin-top:7px; font-size:11px; color:var(--text-3); position:relative; }
.trend{ display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:11px; padding:1px 6px; border-radius:5px; }
.trend.up{ background:var(--ok-50); color:var(--ok); }
.trend.down{ background:var(--danger-50); color:var(--danger); }
.trend.flat{ background:var(--bg-inset); color:var(--text-2); }
.kpi.danger .kpi-icon{ background:var(--danger-50); color:var(--danger); }
.kpi.danger::after{ background:var(--danger-50); }
.kpi.warn .kpi-icon{ background:var(--warn-50); color:var(--warn); }
.kpi.warn::after{ background:var(--warn-50); }
.kpi.ok .kpi-icon{ background:var(--ok-50); color:var(--ok); }
.kpi.ok::after{ background:var(--ok-50); }
.kpi.ai .kpi-icon{ background:var(--ai-50); color:var(--ai); }
.kpi.ai::after{ background:var(--ai-50); }

/* ============================ BADGES ============================ */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:600; letter-spacing:.01em; border:1px solid transparent; white-space:nowrap;
}
.badge i{ font-size:9px; }
.badge-neutral{ background:var(--bg-inset); color:var(--text-2); border-color:var(--border); }
.badge-brand{ background:var(--brand-50); color:var(--brand-600); border-color:#dfe3ff; }
.badge-ai{ background:var(--ai-50); color:var(--ai); border-color:#e3d7fd; }
.badge-ok{ background:var(--ok-50); color:var(--ok); border-color:var(--ok-border); }
.badge-warn{ background:var(--warn-50); color:var(--warn); border-color:var(--warn-border); }
.badge-danger{ background:var(--danger-50); color:var(--danger); border-color:var(--danger-border); }
.badge-info{ background:var(--info-50); color:var(--info); border-color:var(--info-border); }
.badge-dot::before{ content:""; width:6px;height:6px;border-radius:50%;background:currentColor; }

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:8px;
  background:var(--bg-inset); border:1px solid var(--border); font-size:11.5px; color:var(--text-2);
}
.chip strong{ color:var(--text); font-weight:600; }

/* SLA indicator */
.sla{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; font-family:var(--mono); }
.sla-ok{ color:var(--ok); }
.sla-warn{ color:var(--warn); }
.sla-danger{ color:var(--danger); }
.sla-done{ color:var(--text-3); }
.sla-bar{ height:4px; border-radius:99px; background:var(--bg-inset); overflow:hidden; margin-top:5px; }
.sla-bar span{ display:block; height:100%; border-radius:99px; }

/* ============================ TOOLBAR / FILTERS ============================ */
.toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg-subtle);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.search-input{
  display:flex; align-items:center; gap:8px; flex:1; min-width:200px;
  background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:8px;
  padding:0 11px; height:34px; color:var(--text-3);
}
.search-input input{ border:none; outline:none; background:transparent; flex:1; font-size:12.5px; color:var(--text); }
.search-input input::placeholder{ color:var(--text-3); }
select.input, input.input, textarea.input{
  height:34px; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg-elev);
  padding:0 10px; font-size:12.5px; color:var(--text); outline:none; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
textarea.input{ height:auto; padding:9px 11px; line-height:1.55; resize:vertical; }
select.input:focus, input.input:focus, textarea.input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237c8296' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:26px; }
.filter-select{ min-width:132px; width:auto; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field > label{ font-size:11.5px; font-weight:600; color:var(--text-2); }
.field .hint{ font-size:11px; color:var(--text-3); }

.segmented{ display:inline-flex; background:var(--bg-inset); border:1px solid var(--border); border-radius:8px; padding:2px; gap:2px; }
.segmented button{
  padding:5px 11px; border-radius:6px; font-size:11.5px; font-weight:500; color:var(--text-2);
}
.segmented button.active{ background:var(--bg-elev); color:var(--text); box-shadow:var(--shadow-xs); font-weight:600; }

/* ============================ TABLE ============================ */
.table-wrap{ overflow-x:auto; }
table.data{ font-size:12.5px; }
table.data thead th{
  text-align:left; padding:10px 14px; background:var(--bg-subtle);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3);
  font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0; z-index:1;
}
table.data thead th.sortable{ cursor:pointer; user-select:none; }
table.data thead th.sortable:hover{ color:var(--text); }
table.data tbody td{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data tbody tr{ transition:background .12s; cursor:pointer; }
table.data tbody tr:hover{ background:var(--brand-50); }
table.data tbody tr:last-child td{ border-bottom:none; }
table.data td .cell-main{ font-weight:600; color:var(--text); }
table.data td .cell-sub{ font-size:10.5px; color:var(--text-3); }
.empty-state{ padding:48px 20px; text-align:center; color:var(--text-3); }
.empty-state i{ font-size:26px; margin-bottom:10px; opacity:.5; display:block; }
.pagination{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; border-top:1px solid var(--border); font-size:12px; color:var(--text-3); }

/* ============================ QUEUE / LIST ============================ */
.queue-section{ padding:14px 16px; border-bottom:1px solid var(--border); }
.queue-section:last-child{ border-bottom:none; }
.queue-title{ display:flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--text-3); margin-bottom:10px; }
.queue-item{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px;
  border:1px solid transparent; transition:background .13s, border-color .13s; cursor:pointer; width:100%; text-align:left;
}
.queue-item:hover{ background:var(--bg-subtle); border-color:var(--border); }
.queue-count{
  min-width:38px; height:30px; padding:0 8px; border-radius:8px; display:grid; place-items:center;
  font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.queue-count.danger{ background:var(--danger-50); color:var(--danger); }
.queue-count.warn{ background:var(--warn-50); color:var(--warn); }
.queue-count.info{ background:var(--info-50); color:var(--info); }
.queue-count.ok{ background:var(--ok-50); color:var(--ok); }
.queue-count.ai{ background:var(--ai-50); color:var(--ai); }
.queue-item .qt{ flex:1; min-width:0; }
.queue-item .qt strong{ display:block; font-size:12.5px; font-weight:500; }
.queue-item .qt span{ font-size:11px; color:var(--text-3); }
.queue-item i.chev{ color:var(--text-3); font-size:10px; }

/* ============================ PROGRESS ============================ */
.progress{ height:7px; border-radius:99px; background:var(--bg-inset); overflow:hidden; }
.progress span{ display:block; height:100%; border-radius:99px; background:var(--brand); transition:width .5s cubic-bezier(.4,0,.2,1); }
.progress.ok span{ background:var(--ok); }
.progress.ai span{ background:var(--ai-gradient); }
.progress.warn span{ background:var(--warn); }

.legend{ display:flex; flex-direction:column; gap:9px; }
.legend-item{ display:flex; align-items:center; gap:9px; font-size:12px; }
.legend-swatch{ width:10px;height:10px;border-radius:3px;flex:0 0 10px; }
.legend-item .lv{ margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; }
.legend-item .lp{ color:var(--text-3); font-size:11px; min-width:34px; text-align:right; }

.chart-box{ position:relative; width:100%; }

/* ============================ TIMELINE ============================ */
.timeline{ position:relative; padding-left:24px; }
.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--border),var(--border-strong)); }
.tl-item{ position:relative; padding:0 0 16px 0; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; left:-24px; top:3px; width:16px;height:16px;border-radius:50%;
  background:var(--bg-elev); border:2px solid var(--border-strong); display:grid; place-items:center;
}
.tl-dot i{ font-size:7px; color:var(--text-3); }
.tl-dot.human{ border-color:var(--brand); } .tl-dot.human i{ color:var(--brand); }
.tl-dot.ai{ border-color:var(--ai); background:var(--ai-50); } .tl-dot.ai i{ color:var(--ai); }
.tl-dot.automation{ border-color:var(--info); } .tl-dot.automation i{ color:var(--info); }
.tl-dot.customer{ border-color:var(--ok); } .tl-dot.customer i{ color:var(--ok); }
.tl-dot.system{ border-color:var(--warn); } .tl-dot.system i{ color:var(--warn); }
.tl-head{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.tl-time{ font-family:var(--mono); font-size:11px; color:var(--text-3); font-weight:500; }
.tl-title{ font-size:12.5px; font-weight:500; }
.tl-body{ font-size:11.5px; color:var(--text-3); margin-top:2px; }
.actor{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:5px; }
.actor.human{ background:var(--brand-50); color:var(--brand-600); }
.actor.ai{ background:var(--ai-50); color:var(--ai); }
.actor.automation{ background:var(--info-50); color:var(--info); }
.actor.customer{ background:var(--ok-50); color:var(--ok); }
.actor.system{ background:var(--warn-50); color:var(--warn); }

/* ============================ WORKFLOW VISUAL ============================ */
.wf-flow{ display:flex; flex-direction:column; gap:0; }
.wf-step{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg-elev); position:relative;
}
.wf-step.done{ border-color:var(--ok-border); background:var(--ok-50); }
.wf-step.active{ border-color:var(--ai); background:var(--ai-50); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.wf-step.pending{ opacity:.62; }
.wf-icon{
  width:30px;height:30px;border-radius:9px;flex:0 0 30px; display:grid; place-items:center; font-size:11.5px;
  background:var(--bg-inset); color:var(--text-3); border:1px solid var(--border);
}
.wf-step.done .wf-icon{ background:var(--ok); color:#fff; border-color:var(--ok); }
.wf-step.active .wf-icon{ background:var(--ai); color:#fff; border-color:var(--ai); }
.wf-step .wf-t{ flex:1; min-width:0; }
.wf-step .wf-t strong{ display:block; font-size:12.5px; }
.wf-step .wf-t span{ font-size:11px; color:var(--text-3); }
.wf-connector{ width:2px; height:16px; background:var(--border-strong); margin-left:27px; }
.wf-connector.done{ background:var(--ok); }

.policy-row{ display:flex; align-items:center; gap:11px; padding:8px 0; border-bottom:1px dashed var(--border); font-size:12px; }
.policy-row:last-child{ border-bottom:none; }
.policy-when{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--brand-600); background:var(--brand-50); padding:2px 7px; border-radius:5px; min-width:62px; text-align:center; }

/* ============================ KANBAN ============================ */
.kanban{ display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; align-items:flex-start; }
.kanban-col{ flex:0 0 262px; width:262px; background:var(--bg-inset); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; max-height:calc(100vh - 300px); }
.kanban-col.drop-target{ border-color:var(--brand); background:var(--brand-50); }
.kanban-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); }
.kanban-head strong{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
.kanban-head .count{ font-size:10.5px; font-weight:700; background:var(--bg-elev); border:1px solid var(--border); padding:1px 7px; border-radius:999px; color:var(--text-2); }
.kanban-body{ padding:9px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; flex:1; min-height:70px; }
.kcard{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:9px; padding:10px 11px;
  cursor:grab; box-shadow:var(--shadow-xs); transition:box-shadow .15s, border-color .15s;
}
.kcard:hover{ box-shadow:var(--shadow); border-color:var(--border-strong); }
.kcard.dragging{ opacity:.45; }
.kcard-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.kcard-id{ font-family:var(--mono); font-size:10.5px; color:var(--text-3); font-weight:600; }
.kcard-title{ font-size:12.5px; font-weight:600; margin-bottom:3px; }
.kcard-sub{ font-size:11px; color:var(--text-3); margin-bottom:8px; }
.kcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* ============================ MODAL ============================ */
.modal-root:empty{ display:none; }
.modal-backdrop{
  position:fixed; inset:0; background:rgba(12,15,28,.55); backdrop-filter:blur(3px);
  z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:40px 18px;
  overflow-y:auto; animation:fade .16s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(12px) scale(.985)} to{opacity:1; transform:none} }
.modal{
  background:var(--bg-elev); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl);
  width:100%; max-width:660px; animation:pop .2s cubic-bezier(.2,.9,.3,1); margin:auto;
}
.modal.modal-lg{ max-width:940px; }
.modal.modal-xl{ max-width:1120px; }
.modal.modal-sm{ max-width:460px; }
.modal-head{ display:flex; align-items:flex-start; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--border); }
.modal-head .grow h2{ font-size:16px; }
.modal-head .sub{ font-size:12px; color:var(--text-3); margin-top:3px; }
.modal-close{ width:32px;height:32px;border-radius:8px; display:grid;place-items:center; color:var(--text-3); }
.modal-close:hover{ background:var(--bg-inset); color:var(--text); }
.modal-body{ padding:18px 20px; max-height:calc(100vh - 260px); overflow-y:auto; }
.modal-foot{ display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:14px 20px; border-top:1px solid var(--border); background:var(--bg-subtle); border-radius:0 0 var(--radius-xl) var(--radius-xl); flex-wrap:wrap; }
.modal-foot .grow{ justify-content:flex-start; }

/* ============================ TOASTS ============================ */
.toast-root{ position:fixed; right:18px; bottom:18px; z-index:400; display:flex; flex-direction:column; gap:9px; align-items:flex-end; }
.toast{
  display:flex; align-items:flex-start; gap:11px; min-width:290px; max-width:400px;
  background:#15182a; color:#f1f2f8; border-radius:11px; padding:12px 14px;
  box-shadow:var(--shadow-lg); animation:slideIn .22s cubic-bezier(.2,.9,.3,1);
  border-left:3px solid var(--brand);
}
@keyframes slideIn{ from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none} }
.toast.leaving{ animation:slideOut .2s forwards; }
@keyframes slideOut{ to{opacity:0; transform:translateX(24px)} }
.toast.success{ border-left-color:var(--ok); }
.toast.error{ border-left-color:var(--danger); }
.toast.warn{ border-left-color:var(--warn); }
.toast.ai{ border-left-color:var(--ai); }
.toast i.ti{ margin-top:2px; font-size:13px; }
.toast.success i.ti{ color:#4ade80; } .toast.error i.ti{ color:#f87171; }
.toast.warn i.ti{ color:#fbbf24; } .toast.ai i.ti{ color:#c4b5fd; }
.toast.info i.ti{ color:#93c5fd; }
.toast strong{ display:block; font-size:12.5px; margin-bottom:2px; }
.toast p{ margin:0; font-size:11.5px; color:#b6bacd; line-height:1.45; }

/* ============================ COMMAND PALETTE ============================ */
.palette-root:empty{ display:none; }
.palette-backdrop{ position:fixed; inset:0; background:rgba(12,15,28,.5); backdrop-filter:blur(3px); z-index:300; padding:12vh 18px; animation:fade .14s; }
.palette{
  max-width:620px; margin:0 auto; background:var(--bg-elev); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl); overflow:hidden; animation:pop .18s;
}
.palette-input{ display:flex; align-items:center; gap:11px; padding:15px 17px; border-bottom:1px solid var(--border); }
.palette-input i{ color:var(--text-3); }
.palette-input input{ flex:1; border:none; outline:none; font-size:15px; background:transparent; }
.palette-input kbd{ font-size:10px; padding:2px 6px; border:1px solid var(--border-strong); border-radius:5px; color:var(--text-3); background:var(--bg-inset); }
.palette-list{ max-height:52vh; overflow-y:auto; padding:7px; }
.palette-group{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); font-weight:700; padding:9px 10px 5px; }
.palette-item{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:8px; cursor:pointer; width:100%; text-align:left;
}
.palette-item:hover, .palette-item.sel{ background:var(--brand-50); }
.palette-item i{ width:16px; text-align:center; color:var(--text-3); font-size:12px; }
.palette-item.sel i{ color:var(--brand); }
.palette-item .pt{ flex:1; min-width:0; }
.palette-item strong{ display:block; font-size:12.5px; font-weight:500; }
.palette-item span{ font-size:11px; color:var(--text-3); }
.palette-empty{ padding:34px; text-align:center; color:var(--text-3); font-size:12.5px; }

/* ============================ COPILOT ============================ */
.copilot-root:empty{ display:none; }
.copilot-scrim{ position:fixed; inset:0; background:rgba(12,15,28,.35); z-index:290; animation:fade .15s; }
.copilot-panel{
  position:fixed; right:16px; bottom:16px; top:16px; width:432px; max-width:calc(100vw - 32px);
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl); z-index:295; display:flex; flex-direction:column;
  animation:slideUp .24s cubic-bezier(.2,.9,.3,1); overflow:hidden;
}
@keyframes slideUp{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
.copilot-head{ display:flex; align-items:center; gap:11px; padding:14px 15px; border-bottom:1px solid var(--border); background:var(--ai-50); }
.copilot-avatar{ width:34px;height:34px;border-radius:10px; background:var(--ai-gradient); color:#fff; display:grid;place-items:center; flex:0 0 34px; }
.copilot-head strong{ display:block; font-size:13px; }
.copilot-head span{ font-size:11px; color:var(--text-3); }
.copilot-body{ flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:12px; }
.copilot-msg{ max-width:88%; padding:10px 13px; border-radius:13px; font-size:12.5px; line-height:1.6; }
.copilot-msg.user{ align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:4px; }
.copilot-msg.bot{ align-self:flex-start; background:var(--bg-inset); border:1px solid var(--border); border-bottom-left-radius:4px; }
.copilot-msg.bot ul{ margin:7px 0 0; display:flex; flex-direction:column; gap:6px; }
.copilot-msg.bot li{ padding-left:14px; position:relative; }
.copilot-msg.bot li::before{ content:""; position:absolute; left:3px; top:7px; width:5px;height:5px;border-radius:50%;background:var(--ai); }
.copilot-msg.bot .msg-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.copilot-msg.bot .msg-actions button{ font-size:11px; padding:4px 9px; border-radius:7px; border:1px solid var(--border-strong); background:var(--bg-elev); }
.copilot-msg.bot .msg-actions button:hover{ background:var(--brand-50); border-color:var(--brand); color:var(--brand-600); }
.copilot-suggest{ padding:0 15px 13px; display:flex; flex-wrap:wrap; gap:6px; }
.copilot-suggest button{
  font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid var(--border-strong);
  background:var(--bg-subtle); color:var(--text-2); text-align:left;
}
.copilot-suggest button:hover{ border-color:var(--ai); color:var(--ai); background:var(--ai-50); }
.copilot-foot{ padding:12px 15px; border-top:1px solid var(--border); }
.copilot-foot .search-input{ height:38px; }
.typing{ display:inline-flex; gap:4px; align-items:center; }
.typing span{ width:6px;height:6px;border-radius:50%;background:var(--text-3); animation:tp 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.18s } .typing span:nth-child(3){ animation-delay:.36s }
@keyframes tp{ 0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

/* ============================ AI THINKING ============================ */
.ai-thinking{ display:flex; flex-direction:column; gap:9px; padding:16px; background:var(--ai-50); border:1px solid #e3d7fd; border-radius:var(--radius); }
.ai-thinking-row{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--text-2); opacity:0; animation:appear .3s forwards; }
@keyframes appear{ to{opacity:1} }
.ai-thinking-row i{ color:var(--ai); font-size:11px; }
.spinner{
  width:14px;height:14px;border-radius:50%; border:2px solid rgba(124,58,237,.25); border-top-color:var(--ai);
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.ai-result{
  border:1px solid #e3d7fd; background:linear-gradient(180deg,#faf8ff,#fff); border-radius:var(--radius);
  padding:16px; animation:pop .25s;
}
.ai-result-head{ display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.ai-result-head .tick{ width:26px;height:26px;border-radius:50%; background:var(--ai-gradient); color:#fff; display:grid;place-items:center; font-size:11px; }
.confidence{ display:flex; align-items:center; gap:9px; margin:10px 0; }
.confidence .progress{ flex:1; }
.confidence strong{ font-family:var(--mono); font-size:13px; color:var(--ai); }

/* ============================ VOICE ============================ */
.voice-panel{ background:linear-gradient(160deg,#0f1220,#1b1f38 60%,#241b45); color:#e8eaf6; border-radius:var(--radius-lg); padding:20px; }
.voice-status{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:#4ade80; }
.voice-status .rec{ width:8px;height:8px;border-radius:50%;background:#ef4444; animation:blink 1.1s infinite; }
.voice-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:15px 0; }
.voice-meta div{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:9px; padding:9px 11px; }
.voice-meta span{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#8f96b5; margin-bottom:3px; }
.voice-meta strong{ font-size:12.5px; color:#fff; }
.waveform{ display:flex; align-items:flex-end; gap:3px; height:34px; margin:14px 0; }
.waveform span{ flex:1; background:linear-gradient(180deg,#8b5cf6,#4f46e5); border-radius:2px; animation:wv 1.1s ease-in-out infinite; }
@keyframes wv{ 0%,100%{ height:16% } 50%{ height:100% } }
.transcript{ max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-right:4px; }
.tr-line{ display:flex; gap:10px; animation:appear .3s; }
.tr-who{ width:66px; flex:0 0 66px; font-size:10px; font-weight:700; letter-spacing:.04em; padding-top:3px; color:#8f96b5; text-transform:uppercase; }
.tr-line.agent .tr-who{ color:#a78bfa; }
.tr-line.customer .tr-who{ color:#4ade80; }
.tr-text{ font-size:12.5px; line-height:1.6; background:rgba(255,255,255,.05); border-radius:10px; padding:9px 12px; border:1px solid rgba(255,255,255,.06); }
.tr-line.customer .tr-text{ background:rgba(74,222,128,.09); border-color:rgba(74,222,128,.16); }

/* ============================ CHECKLIST ============================ */
.checklist{ display:flex; flex-direction:column; gap:8px; }
.check-item{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.check-box{ width:17px;height:17px;border-radius:5px; border:1.5px solid var(--border-strong); display:grid; place-items:center; font-size:9px; color:transparent; flex:0 0 17px; }
.check-item.done .check-box{ background:var(--ok); border-color:var(--ok); color:#fff; }
.check-item.pending .check-box{ border-color:var(--warn); background:var(--warn-50); }

/* ============================ WAREHOUSE MODE ============================ */
.warehouse{ max-width:900px; margin:0 auto; }
.wh-scan{
  background:var(--bg-sidebar); border:1px solid #2a2f45; border-radius:var(--radius-xl);
  padding:40px 24px; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.wh-scan::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 220px at 50% 0%, rgba(99,91,255,.28), transparent 70%); }
.wh-scan-icon{ width:74px;height:74px;border-radius:22px; background:var(--ai-gradient); display:grid;place-items:center; font-size:32px; margin:0 auto 16px; box-shadow:0 14px 40px rgba(124,58,237,.5); position:relative; }
.wh-scan h2{ color:#fff; font-size:20px; margin-bottom:6px; position:relative; }
.wh-scan p{ color:var(--sidebar-text); position:relative; margin-bottom:22px; }
.wh-scan .btn-xl{ position:relative; }
.scan-line{ height:3px; background:var(--ai-gradient); border-radius:99px; animation:scan 1.1s ease-in-out infinite alternate; margin-top:26px; position:relative; }
@keyframes scan{ from{ width:18%; margin-left:0 } to{ width:82%; margin-left:18% } }
.wh-result{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow); }
.wh-result-head{ display:flex; align-items:center; gap:14px; padding:20px; border-bottom:1px solid var(--border); background:var(--bg-subtle); }
.wh-device-icon{ width:52px;height:52px;border-radius:15px; background:var(--brand-50); color:var(--brand); display:grid; place-items:center; font-size:22px; flex:0 0 52px; }
.wh-inspect{ padding:22px; }
.wh-inspect h3{ font-size:15px; margin-bottom:16px; }
.wh-buttons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; }
.wh-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:22px 14px; border-radius:15px; border:1.5px solid var(--border-strong); background:var(--bg-elev);
  font-size:14.5px; font-weight:600; transition:transform .12s, border-color .15s, background .15s, box-shadow .15s;
}
.wh-btn i{ font-size:23px; }
.wh-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.wh-btn.ok i{ color:var(--ok); } .wh-btn.ok:hover{ border-color:var(--ok); background:var(--ok-50); }
.wh-btn.lock i{ color:var(--danger); } .wh-btn.lock:hover{ border-color:var(--danger); background:var(--danger-50); }
.wh-btn.dmg i{ color:var(--warn); } .wh-btn.dmg:hover{ border-color:var(--warn); background:var(--warn-50); }
.wh-btn.off i{ color:var(--text-3); } .wh-btn.off:hover{ border-color:var(--text-2); background:var(--bg-inset); }
.wh-btn.other i{ color:var(--info); } .wh-btn.other:hover{ border-color:var(--info); background:var(--info-50); }
.wh-recent{ display:flex; flex-direction:column; gap:8px; }
.wh-recent-item{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:var(--bg-elev); }

/* ============================ INCIDENT CATEGORIES ============================ */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:9px; }
.cat-card{
  display:flex; align-items:center; gap:11px; padding:12px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg-elev); text-align:left; transition:border-color .15s, background .15s;
}
.cat-card:hover{ border-color:var(--brand); background:var(--brand-50); }
.cat-card.selected{ border-color:var(--brand); background:var(--brand-50); box-shadow:0 0 0 3px var(--brand-ring); }
.cat-card i{ width:30px;height:30px;border-radius:9px; background:var(--bg-inset); display:grid; place-items:center; font-size:13px; color:var(--text-2); flex:0 0 30px; }
.cat-card.selected i{ background:var(--brand); color:#fff; }
.cat-card strong{ display:block; font-size:12.5px; }
.cat-card span{ font-size:10.5px; color:var(--text-3); }

/* ============================ DEVICE DETAIL ============================ */
.detail-hero{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.device-thumb{
  width:84px;height:84px;border-radius:20px; background:var(--bg-inset); border:1px solid var(--border);
  display:grid; place-items:center; font-size:34px; color:var(--text-2); flex:0 0 84px;
}
.meta-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.meta-item span{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:600; margin-bottom:4px; }
.meta-item strong{ font-size:13px; font-weight:600; }
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; }
.photo-ph{
  aspect-ratio:1; border-radius:10px; border:1.5px dashed var(--border-strong); background:var(--bg-subtle);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--text-3); font-size:10.5px; text-align:center; padding:8px;
}
.photo-ph i{ font-size:19px; opacity:.6; }
.photo-ph.uploaded{ border-style:solid; border-color:var(--ok-border); background:var(--ok-50); color:var(--ok); }

/* ============================ WORKFLOW BUILDER ============================ */
.wf-builder{ display:flex; flex-direction:column; gap:0; }
.wf-node{ border:1px solid var(--border); border-radius:11px; background:var(--bg-elev); padding:12px 13px; position:relative; }
.wf-node-tag{ font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:2px 7px; border-radius:5px; display:inline-block; margin-bottom:7px; }
.wf-node.trigger .wf-node-tag{ background:var(--brand-50); color:var(--brand-600); }
.wf-node.action .wf-node-tag{ background:var(--ai-50); color:var(--ai); }
.wf-node.wait .wf-node-tag{ background:var(--warn-50); color:var(--warn); }
.wf-node.condition .wf-node-tag{ background:var(--info-50); color:var(--info); }
.wf-node.escalate .wf-node-tag{ background:var(--danger-50); color:var(--danger); }
.wf-node strong{ font-size:12.5px; display:block; }
.wf-node p{ font-size:11.5px; color:var(--text-3); margin:4px 0 0; }
.wf-arrow{ display:grid; place-items:center; padding:5px 0; color:var(--border-strong); }

/* ============================ PRESENCE ============================ */
.presence{ display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--text-3); }
.presence .avs{ display:flex; }
.presence .avs span{
  width:20px;height:20px;border-radius:50%; background:var(--brand); color:#fff; font-size:8.5px; font-weight:600;
  display:grid; place-items:center; border:2px solid var(--bg-elev); margin-left:-7px;
}
.presence .avs span:first-child{ margin-left:0; }
.presence .avs span.ai{ background:var(--ai-gradient); }

.saved-indicator{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; }
.saved-indicator.ok{ color:var(--ok); }
.saved-indicator.syncing{ color:var(--warn); }

/* ============================ TABS ============================ */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto; }
.tab{
  padding:9px 13px; font-size:12.5px; font-weight:500; color:var(--text-3);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .14s, border-color .14s;
}
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--brand-600); border-bottom-color:var(--brand); font-weight:600; }
.tab .badge{ margin-left:6px; }

/* ============================ MISC ============================ */
.divider{ height:1px; background:var(--border); margin:16px 0; }
.notice{
  display:flex; gap:10px; padding:11px 13px; border-radius:10px; font-size:11.5px; line-height:1.55;
  border:1px solid var(--border); background:var(--bg-subtle); color:var(--text-2);
}
.notice i{ margin-top:1px; }
.notice.info{ background:var(--info-50); border-color:var(--info-border); color:#1e40af; }
.notice.warn{ background:var(--warn-50); border-color:var(--warn-border); color:#8a5a04; }
.notice.danger{ background:var(--danger-50); border-color:var(--danger-border); color:#991b1b; }
.notice.ai{ background:var(--ai-50); border-color:#e3d7df; color:#5b21b6; }
.notice.ok{ background:var(--ok-50); border-color:var(--ok-border); color:#065f46; }

.stat-list{ display:flex; flex-direction:column; gap:12px; }
.stat-row{ display:flex; align-items:center; gap:11px; }
.stat-row .sr-label{ font-size:12px; color:var(--text-2); flex:1; }
.stat-row .sr-value{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }

.switch{ position:relative; display:inline-block; width:38px; height:21px; flex:0 0 38px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:var(--border-strong); border-radius:99px; transition:.2s; cursor:pointer; }
.switch .slider::before{ content:""; position:absolute; width:15px;height:15px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:var(--shadow-xs); }
.switch input:checked + .slider{ background:var(--ok); }
.switch input:checked + .slider::before{ transform:translateX(17px); }

.table-toolbar-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.hscroll-hint{ display:none; }

/* ============================ RESPONSIVE ============================ */
.only-mobile{ display:none; }

@media (max-width:1180px){
  .span-2{ grid-column:span 1; }
}

@media (max-width:1024px){
  .sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.2,.9,.3,1); box-shadow:var(--shadow-xl);
  }
  .app-shell.sidebar-open .sidebar{ transform:none; }
  .sidebar-scrim{ position:fixed; inset:0; background:rgba(12,15,28,.45); z-index:55; }
  .only-mobile{ display:grid; }
  .view-root{ padding:16px 15px 60px; }
  .user-meta{ display:none; }
  .user-chip{ padding:3px; }
  .user-chip i{ display:none; }
  .btn-copilot span{ display:none; }
  .btn-copilot{ width:36px; padding:0; }
}

@media (max-width:768px){
  body{ font-size:13px; }
  .demo-banner{ align-items:flex-start; font-size:11px; }
  .global-search span{ font-size:12px; }
  .global-search kbd{ display:none; }
  .modal-backdrop{ padding:14px 10px 24px; }
  .modal-body{ max-height:none; }
  .kpi-value{ font-size:23px; }
  .copilot-panel{ right:0; left:0; bottom:0; top:auto; height:88vh; width:auto; max-width:none; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
  .toast-root{ left:12px; right:12px; bottom:12px; align-items:stretch; }
  .toast{ min-width:0; max-width:none; }
  .page-head{ flex-direction:column; align-items:stretch; }
  .page-head .row-wrap{ width:100%; }
  .wh-buttons{ grid-template-columns:repeat(2,1fr); }
  .card-head{ flex-direction:column; align-items:flex-start; }
  .kanban-col{ flex:0 0 232px; width:232px; }
  .hscroll-hint{ display:block; }
}