/* Syndrax app surface — onboarding wizard + simple dashboard.
   Reuses the global design tokens from style.css (--card, --border, --text,
   --cyan, --bg, --bg2, --nav-font, --gradient). Loaded only on /app + /onboarding. */

.app-shell {
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}
.app-shell .auth-grid-bg { position: fixed; }

/* Top bar */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: rgba(6,13,24,0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.app-topbar .app-brand { display: flex; align-items: center; gap: 10px; }
.app-topbar .app-brand img { height: 30px; width: auto; }
html.dark .app-topbar .app-brand img { mix-blend-mode: screen; }
.app-id {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-gray);
}
.app-id .app-plan-chip {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(0,207,255,0.35); background: rgba(0,207,255,0.08); color: #7fe3ff;
}
.app-plan-chip.plan-growth { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.1); color: #6ee7b7; }
.app-plan-chip.plan-enterprise { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); color: #fcd34d; }
.app-plan-chip.plan-none, .app-plan-chip.plan-trial { border-color: rgba(148,163,184,.4); background: rgba(148,163,184,.1); color: #cbd5e1; }
.app-signout { background: none; border: none; color: var(--cyan); font-weight: 600; cursor: pointer; font-size: 13px; }
.app-signout:hover { opacity: .8; }

/* Layout container */
.app-wrap {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto; padding: 30px 22px 80px;
}
.app-h1 {
  font-family: var(--nav-font); font-size: 26px; font-weight: 800;
  color: var(--text); letter-spacing: -.5px; margin: 4px 0 4px;
}
.app-sub { color: var(--text-gray); font-size: 14.5px; margin-bottom: 26px; }

/* Cards grid */
.app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.app-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 760px) { .app-grid { grid-template-columns: 1fr; } }

.app-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  position: relative;
}
.app-card h3 {
  font-family: var(--nav-font); font-size: 15px; font-weight: 700;
  color: var(--text); margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.app-card .card-kicker {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; margin-bottom: 10px;
}
.app-card p.muted { color: var(--text-gray); font-size: 13.5px; line-height: 1.6; margin: 0; }

/* Buttons (app-scoped, gradient + ghost) */
.app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 11px; cursor: pointer;
  font-weight: 700; font-size: 14px; font-family: var(--nav-font); border: none;
  background: linear-gradient(90deg,#00CFFF 0%,#0284c7 50%,#FF00D4 100%);
  background-size: 200% 100%; background-position: 0 0; color: #fff;
  transition: background-position .5s, transform .15s, box-shadow .2s, opacity .2s;
  box-shadow: 0 2px 14px rgba(0,207,255,.2);
}
.app-btn:hover { background-position: 100% 0; transform: translateY(-1px); }
.app-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.app-btn.ghost {
  background: rgba(255,255,255,.04); color: var(--text); border: 1px solid var(--border);
  box-shadow: none;
}
.app-btn.ghost:hover { border-color: rgba(0,207,255,.4); }
.app-btn.sm { height: 34px; padding: 0 13px; font-size: 12.5px; border-radius: 9px; }
.app-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Plan card */
.plan-name { font-size: 24px; font-weight: 800; color: #e6f3ff; font-family: var(--nav-font); }
.plan-meta { font-size: 13px; color: var(--text-gray); margin-top: 6px; }

/* Marketplace grid */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.mk-tile {
  border: 1px solid var(--border); border-radius: 13px; padding: 14px;
  background: rgba(255,255,255,.02); cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s, transform .15s; position: relative;
}
.mk-tile:hover { border-color: rgba(0,207,255,.4); transform: translateY(-2px); }
.mk-tile.selected { border-color: rgba(0,207,255,.65); background: rgba(0,207,255,.06); }
.mk-tile .mk-dot { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 13px; }
.mk-tile .mk-name { font-weight: 700; color: var(--text); font-size: 13.5px; margin-top: 10px; }
.mk-tile .mk-status { font-size: 11px; margin-top: 3px; color: var(--text-muted); }
.mk-badge {
  position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px;
}
.mk-badge.live { background: rgba(16,185,129,.14); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.mk-badge.soon { background: rgba(148,163,184,.12); color: #cbd5e1; border: 1px solid rgba(148,163,184,.25); }
.mk-badge.gated { background: rgba(251,191,36,.14); color: #fcd34d; border: 1px solid rgba(251,191,36,.3); }
.mk-badge.beta { background: rgba(168,85,247,.14); color: #d8b4fe; border: 1px solid rgba(168,85,247,.3); }
.mk-count { font-size: 11px; color: var(--cyan); margin-top: 4px; font-weight: 600; }

/* Marketplace decorative icon strip (Accounts page header) */
.mk-deco-strip { display: flex; gap: 10px; align-items: center; padding: 10px 0 4px; flex-wrap: wrap; }
.mk-deco-icon { width: 22px; height: 22px; object-fit: contain; filter: invert(1) opacity(0.18); animation: mkDrift 5s ease-in-out infinite; transition: filter .2s; }
.mk-deco-icon:hover { filter: invert(0.7) sepia(1) saturate(3) hue-rotate(175deg) opacity(0.7); }
@keyframes mkDrift { 0%,100% { transform: translateY(0); opacity: 0.18; } 50% { transform: translateY(-4px); opacity: 0.3; } }

/* Synball loading orb — reusable pending/loading indicator */
.synball-load { display: inline-block; width: 40px; height: 40px; }
.synball-load img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; animation: synballSpin 2s linear infinite, synballPulse 3s ease-in-out infinite; }
@keyframes synballSpin { to { transform: rotate(360deg); } }

/* Big visual marketplace picker (onboarding + dashboard) */
.mk-grid.big { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 14px; }
.mk-tile.big {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 14px 16px; text-align: center; min-height: 132px; justify-content: center;
}
.mk-tile.big .mk-chip {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); overflow: hidden;
}
.mk-tile.big .mk-chip svg { width: 30px; height: 30px; }
.mk-tile.big .mk-name { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; }
.mk-tile.big.selected { border-color: rgba(0,207,255,.7); background: rgba(0,207,255,.07); box-shadow: 0 8px 28px rgba(0,207,255,.14); }
.mk-check {
  position: absolute; top: 9px; left: 10px;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--cyan); color: #02121d; font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════
   Dashboard shell V3 — matches the theme's dark industrial aesthetic
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --sb-w: 252px;
  --tb-h: 70px;
  --surface-1: #0d141a;
  --surface-2: #111b22;
  --surface-3: #15212a;
  --line: #1c2a34;
  --line-strong: #2a3b47;
  --text-1: #f3f7f8;
  --text-2: #c4d0d5;
  --text-muted: #97a5af;
  --text-faint: #74838d;
  --mint: #4ce3bd;
  --mint-soft: rgba(76,227,189,.12);
  --blue: #55a7ff;
  --amber: #f1bd68;
  --coral: #ff7d72;
  --success: #53d99d;
}
.dash { display: grid; grid-template-columns: var(--sb-w) minmax(0,1fr); height: 100vh; width: 100vw; overflow: hidden; background: radial-gradient(circle at 82% -8%, rgba(85,167,255,.07), transparent 26%), radial-gradient(circle at 16% 108%, rgba(76,227,189,.055), transparent 30%), #070b0f; color: var(--text-1); font-size: 14px; }
.dash.sb-collapsed { grid-template-columns: 62px minmax(0,1fr); }

/* ── Sidebar ── */
.sidebar {
  position: relative; z-index: 20; display: flex; flex-direction: column;
  height: 100vh; padding: 18px 14px 14px;
  background: linear-gradient(180deg, rgba(9,16,22,.98), rgba(6,11,15,.98));
  border-right: 1px solid var(--line);
  transition: padding .22s ease;
  overflow: hidden;
}
.sb-brand-row { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 14px; }
.sb-logo { height: 30px; width: auto; display: block; transition: opacity .2s; }
.sb-collapse-btn { border: 1px solid var(--line); background: var(--surface-1); color: var(--text-muted); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; transition: background .18s, color .18s, transform .22s; flex-shrink: 0; }
.sb-collapse-btn:hover { color: var(--text-1); background: var(--surface-2); }
.sb-collapse-btn svg { width: 16px; height: 16px; transition: transform .22s; }
.dash.sb-collapsed .sb-collapse-btn svg { transform: rotate(180deg); }

.side-nav { flex: 1; overflow-y: auto; padding: 4px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.nav-group + .nav-group { margin-top: 20px; }
.nav-group-title { padding: 0 10px 6px; color: var(--text-faint); font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; transition: opacity .18s; }
.nav-item {
  width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px;
  padding: 0 12px; border: 0; border-radius: 11px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  text-align: left; font-weight: 600; font-size: 13.5px;
  transition: color .18s, background .18s; position: relative;
  white-space: nowrap; overflow: hidden;
}
.nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-item:hover { color: var(--text-2); background: rgba(255,255,255,.035); }
.nav-item.active { color: var(--text-1); background: var(--surface-3); }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 9px; background: var(--mint); box-shadow: 0 0 10px rgba(76,227,189,.4); }
.nav-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--mint-soft); color: var(--mint); font-size: 9.5px; font-weight: 800; }
.nav-badge.quiet { color: var(--text-muted); background: rgba(255,255,255,.06); }
.nav-badge-alert { background: var(--coral); color: #fff; box-shadow: 0 0 8px rgba(255,107,120,.5); animation: axis-blink 1.2s ease-in-out infinite; }
.nav-alert-critical { animation: axis-nav-flash 1s ease-in-out infinite; }
@keyframes axis-blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes axis-nav-flash { 0%,100% { background: transparent; } 50% { background: rgba(255,107,120,.12); } }

/* Accounts tab — calm yellow fade-wave when no stores are connected yet.
   Gentle breathing glow + a soft sweep, low-key so it nudges without nagging. */
.nav-pulse-empty { position: relative; animation: nav-empty-breathe 3.2s ease-in-out infinite; }
.nav-pulse-empty svg { color: #fcd34d; filter: drop-shadow(0 0 4px rgba(252,211,77,.5)); animation: nav-empty-icon 3.2s ease-in-out infinite; }
.nav-pulse-empty::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(252,211,77,.16) 50%, transparent 80%);
  background-size: 220% 100%; animation: nav-empty-wave 3.2s ease-in-out infinite; }
@keyframes nav-empty-breathe { 0%,100% { background: transparent; } 50% { background: rgba(252,211,77,.07); } }
@keyframes nav-empty-icon { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes nav-empty-wave { 0% { background-position: 180% 0; } 50% { background-position: -40% 0; } 100% { background-position: -40% 0; } }

/* ── AXIS Compliance Sentinel — Safety Audit tab ── */
.axis-page { max-width: 100%; box-sizing: border-box; }
.axis-hero { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 18px; margin-bottom: 18px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--surface-1), var(--surface-2)); position: relative; overflow: hidden; }
.axis-hero-ok { border-color: rgba(83,217,157,.25); box-shadow: 0 0 30px rgba(83,217,157,.08); }
.axis-hero-warn { border-color: rgba(241,189,104,.25); box-shadow: 0 0 30px rgba(241,189,104,.1); }
.axis-hero-critical { border-color: rgba(255,107,120,.3); box-shadow: 0 0 36px rgba(255,107,120,.18); }
.axis-robot { flex: none; filter: drop-shadow(0 0 12px rgba(34,211,238,.3)); }
.axis-robot-svg { animation: axis-float 3s ease-in-out infinite; }
@keyframes axis-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.axis-hero-body { flex: 1; min-width: 0; }
.axis-hero-title { font-size: 20px; font-weight: 800; color: var(--text-1); letter-spacing: -.01em; }
.axis-hero-title span { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.axis-hero-status { font-size: 13px; font-weight: 700; margin-top: 4px; }
.axis-hero-ok .axis-hero-status { color: var(--mint); }
.axis-hero-warn .axis-hero-status { color: var(--amber); }
.axis-hero-critical .axis-hero-status { color: var(--coral); }
.axis-hero-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.axis-score-ring { flex: none; width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.axis-score-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface-2); }
.axis-score-ring strong { position: relative; font-size: 24px; font-weight: 800; color: var(--text-1); }
.axis-score-ring small { position: relative; font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.axis-voice-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; margin-bottom: 18px; background: rgba(34,211,238,.06); border: 1px solid rgba(34,211,238,.2); }
.axis-voice-ic { color: var(--cyan, #22d3ee); }
.axis-voice-msg { font-size: 12px; color: var(--text-2); }
.axis-section-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 22px 0 12px; display: flex; align-items: center; gap: 6px; }
.axis-section-hd svg { width: 13px; height: 13px; opacity: .6; }
.axis-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.axis-cat { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-1); transition: border-color .15s; }
.axis-cat:hover { border-color: rgba(34,211,238,.3); }
.axis-cat-pending { opacity: .55; background: var(--surface-2); border-style: dashed; }
.axis-cat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.axis-cat-ic svg { width: 15px; height: 15px; }
.axis-cat-label { font-size: 12px; font-weight: 700; color: var(--text-1); flex: 1; }
.axis-cat-band { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; }
.axis-cat-score { height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; margin-bottom: 8px; }
.axis-cat-bar { height: 100%; border-radius: 2px; transition: width .4s; }
.axis-cat-summary { font-size: 11.5px; color: var(--text-1); font-weight: 600; margin-bottom: 3px; }
.axis-cat-detail { font-size: 10.5px; color: var(--text-muted); line-height: 1.5; }
.axis-cat-pending-note { font-size: 10.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
.axis-cat-pending-tag { font-size: 9.5px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.axis-cat-pending-tag svg { width: 11px; height: 11px; }
.axis-acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.axis-acct { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); }
.axis-acct-logo { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; background: var(--surface-2); }
.axis-acct-logo img { width: 18px; height: 18px; }
.axis-acct-name { font-size: 12px; font-weight: 700; color: var(--text-1); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axis-acct-ip { font-size: 10px; color: var(--text-muted); font-family: var(--mono, monospace); margin-bottom: 6px; }
.axis-acct-risk { font-size: 11px; font-weight: 800; }
.axis-acct-reasons { font-size: 9.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.axis-recs { display: grid; gap: 8px; }
.axis-rec { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-1); font-size: 12px; color: var(--text-2); line-height: 1.5; }
.axis-rec-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan, #22d3ee); margin-top: 5px; box-shadow: 0 0 6px rgba(34,211,238,.5); }
.nav-status { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; }
.nav-status.live { background: var(--success); box-shadow: 0 0 7px rgba(83,217,157,.6); }
.nav-status.warn { background: var(--amber); }
.nav-lock { margin-left: auto; color: var(--text-faint); opacity: .8; }
.nav-lock svg { width: 12px; height: 12px; }

/* Collapsed sidebar overrides */
.dash.sb-collapsed .sidebar { padding-left: 10px; padding-right: 10px; }
.dash.sb-collapsed .sb-logo, .dash.sb-collapsed .nav-group-title, .dash.sb-collapsed .nav-item span.nav-label, .dash.sb-collapsed .nav-badge, .dash.sb-collapsed .axis-copy, .dash.sb-collapsed .sb-user-copy { display: none; }
.dash.sb-collapsed .sb-brand-row { justify-content: center; }
.dash.sb-collapsed .nav-item { justify-content: center; padding: 0; }
.dash.sb-collapsed .nav-item.active::before { left: -2px; }
.dash.sb-collapsed .axis-card { justify-content: center; padding: 10px 0; }
.dash.sb-collapsed .sb-user { justify-content: center; padding-left: 0; padding-right: 0; }

/* AXIS status card */
.axis-card { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(76,227,189,.18); border-radius: 14px; background: rgba(76,227,189,.055); margin: 10px 0; cursor: default; }
.axis-orb { position: relative; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9fff4 0 4%, #66e9c8 25%, #1d6f78 70%, #0a2b35 100%); box-shadow: 0 0 0 5px rgba(76,227,189,.07), 0 0 20px rgba(76,227,189,.18); flex: 0 0 auto; }
.axis-orb::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(76,227,189,.25); border-radius: 50%; animation: axisOrbit 8s linear infinite; border-top-color: transparent; }
.axis-orb .axis-dot { position: absolute; right: 0; bottom: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--success); border: 2px solid #091016; }
.axis-copy { min-width: 0; flex: 1; }
.axis-copy strong { display: block; font-size: 11px; color: var(--text-1); }
.axis-copy span { display: block; color: var(--text-muted); font-size: 9.5px; margin-top: 1px; }

/* Sidebar user footer */
.sb-user { display: flex; align-items: center; gap: 10px; padding: 10px 4px 0; border-top: 1px solid var(--line); }
.sb-avatar { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #dce7eb; color: #101820; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.sb-user-copy { min-width: 0; flex: 1; }
.sb-user-copy strong { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
.sb-user-copy span { display: block; color: var(--text-muted); font-size: 9px; margin-top: 1px; }
.sfx-toggle-v2 { border: 1px solid var(--line); background: var(--surface-1); color: var(--text-muted); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; cursor: pointer; transition: color .15s, background .15s, border-color .15s, box-shadow .15s; flex-shrink: 0; }
.sfx-toggle-v2 svg { width: 14px; height: 14px; }
.sfx-toggle-v2:hover { color: var(--text-1); border-color: var(--line-strong); }
.sfx-toggle-v2.on { color: var(--mint); border-color: rgba(76,227,189,.4); background: rgba(76,227,189,.07); box-shadow: 0 0 10px rgba(76,227,189,.18); }
.sb-signout { border: 1px solid var(--line); background: transparent; color: var(--text-faint); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; cursor: pointer; transition: color .15s, background .15s, border-color .15s; flex-shrink: 0; }
.sb-signout svg { width: 13px; height: 13px; }
.sb-signout:hover { color: var(--coral); border-color: rgba(255,125,114,.35); background: rgba(255,125,114,.07); }
.axis-orb.axis-off { background: radial-gradient(circle at 35% 30%, #dce3e6 0 4%, #8fa3ae 25%, #2a3d47 70%, #0c1a22 100%); box-shadow: 0 0 0 5px rgba(143,163,174,.06), 0 0 16px rgba(143,163,174,.1); }
.axis-orb.axis-off .axis-dot { background: var(--coral); }
/* Synball orb image replaces the CSS gradient sphere */
.axis-orb-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; animation: synballPulse 3s ease-in-out infinite; filter: brightness(1.05) saturate(1.1); }
.axis-orb.axis-off .axis-orb-img { filter: brightness(0.55) saturate(0.3); animation: none; }
@keyframes synballPulse { 0%,100% { transform: scale(1); filter: brightness(1.05) saturate(1.1); } 50% { transform: scale(1.07); filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 8px rgba(76,227,189,.45)); } }

/* ── Main column ── */
.dash-body { min-width: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* Topbar */
.topbar {
  height: var(--tb-h); min-height: var(--tb-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 26px;
  background: rgba(7,11,15,.82); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px); flex-shrink: 0;
}
.page-identity { min-width: 0; }
.page-kicker { display: block; color: var(--text-muted); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page-identity h1 { margin: 3px 0 0; font-size: 19px; font-weight: 750; letter-spacing: -.025em; color: var(--text-1); line-height: 1.1; }
.page-identity .sub { color: var(--text-muted); font-size: 10.5px; margin-left: 6px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; position: relative; }
.profile-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 12px; display: none; z-index: 9999; }
.profile-menu.open { display: block; }
.pm-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.pm-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #dce7eb; color: #101820; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.pm-info strong { display: block; font-size: 12px; color: var(--text-1); font-weight: 700; line-height: 1.3; }
.pm-info span { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; word-break: break-all; }
.pm-signout { width: 100%; height: 32px; border: 1px solid rgba(255,125,114,.3); background: rgba(255,125,114,.05); color: var(--coral,#ff7d72); border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 700; transition: background .15s, border-color .15s; }
.pm-signout:hover { background: rgba(255,125,114,.12); border-color: rgba(255,125,114,.55); }
.cmd-search { height: 36px; padding: 0 10px 0 11px; display: flex; align-items: center; gap: 8px; background: var(--surface-1); color: var(--text-muted); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; min-width: 170px; transition: border-color .15s, background .15s; }
.cmd-search:hover { border-color: var(--line-strong); background: var(--surface-2); }
.cmd-search svg { width: 14px; height: 14px; }
.cmd-search span { flex: 1; font-size: 11px; text-align: left; white-space: nowrap; }
.cmd-search kbd { border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 5px; font-size: 9.5px; color: var(--text-muted); background: rgba(255,255,255,.04); }
/* Back button — appears in topbar when not on cockpit */
.topbar-back { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: color .15s, border-color .15s, background .15s; flex-shrink: 0; white-space: nowrap; }
.topbar-back:hover { color: var(--text-1); border-color: var(--mint); background: rgba(76,227,189,.06); }
.topbar-back svg { width: 14px; height: 14px; }

/* ── Cockpit view — command center landing ─────────────────────────────────── */
.cockpit-hero { margin-bottom: 20px; }
.cockpit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .cockpit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .cockpit-grid { grid-template-columns: 1fr; } }
.ck-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 14px;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
  cursor: pointer; transition: border-color .18s, background .18s, transform .14s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.ck-card:hover { border-color: rgba(76,227,189,.38); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(76,227,189,.12); }
.ck-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 80% 0%, rgba(76,227,189,.07), transparent 60%); pointer-events: none; }
.ck-card-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.ck-card-title { font-size: 15px; font-weight: 700; color: var(--text-1); letter-spacing: -.02em; }
.ck-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ck-card-arrow { position: absolute; top: 14px; right: 14px; font-size: 16px; color: var(--text-faint); transition: color .15s, transform .15s; }
.ck-card:hover .ck-card-arrow { color: var(--mint); transform: translateX(3px); }
.ck-stat { font-size: 11px; color: var(--text-muted); }
.ck-big-num { font: 800 28px var(--nav-font); color: var(--text-1); letter-spacing: -.04em; line-height: 1; }
.ck-score { font: 800 28px var(--nav-font); letter-spacing: -.04em; line-height: 1; }
.ck-logos-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ck-logo-chip { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.ck-logo-chip svg { width: 20px; height: 20px; }
.ck-logo-chip img { width: 20px; height: 20px; object-fit: contain; }
.ck-node-dots { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.ck-node-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); }
.ck-node-dot.on { background: var(--success); box-shadow: 0 0 7px rgba(83,217,157,.55); }
.ck-lc-mini { display: flex; gap: 5px; align-items: center; }
.ck-lc-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14); background: var(--surface-1); font-size: 8px; font-weight: 800; color: var(--text-faint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ck-lc-dot.done { border-color: rgba(83,217,157,.6); color: var(--success); background: rgba(83,217,157,.1); }
.ck-lc-dot.active { border-color: rgba(76,227,189,.8); background: rgba(76,227,189,.14); box-shadow: 0 0 10px rgba(76,227,189,.35); color: var(--mint); }
.ck-lc-dash { flex: 1; height: 1.5px; background: rgba(255,255,255,.1); max-width: 14px; }
.ck-activity-rows { display: flex; flex-direction: column; gap: 5px; }
.ck-activity-row { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--text-muted); }
.ck-activity-row strong { color: var(--text-2); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.conn-pill { height: 36px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(83,217,157,.18); border-radius: 11px; padding: 0 10px; background: rgba(83,217,157,.055); color: var(--text-2); font-size: 10.5px; white-space: nowrap; transition: border-color .2s; }
.conn-pill.off { border-color: rgba(148,163,184,.2); background: rgba(148,163,184,.04); }
.conn-pill small { color: var(--text-muted); font-size: 9.5px; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(83,217,157,.35); animation: livePulse 2s infinite; }
.conn-pill.off .pulse-dot { background: var(--text-faint); animation: none; box-shadow: none; }
.profile-btn { height: 36px; border: 1px solid var(--line); background: var(--surface-1); border-radius: 11px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 5px; cursor: pointer; transition: background .15s, border-color .15s; }
.profile-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.profile-btn .pb-av { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #dce7eb; color: #101820; font-size: 9px; font-weight: 800; }
.profile-btn svg { width: 12px; height: 12px; color: var(--text-muted); }

/* Admin bar (owner preview controls) */
.admin-bar { display: flex; align-items: center; gap: 10px; padding: 6px 26px; background: rgba(251,191,36,.04); border-bottom: 1px solid rgba(251,191,36,.15); font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.admin-seg { display: flex; gap: 4px; }
.admin-seg button { border: 1px solid var(--line); background: var(--surface-1); color: var(--text-muted); padding: 3px 9px; border-radius: 7px; cursor: pointer; font-size: 10px; font-weight: 700; transition: all .15s; }
.admin-seg button:hover { border-color: var(--line-strong); color: var(--text-1); }
.admin-seg button.on { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); color: #fcd34d; }
.ab-label { font-weight: 700; color: #fcd34d; }
.ab-note { font-size: 10px; color: var(--text-muted); }
.ab-reset { border: 1px solid rgba(255,107,120,.25); background: rgba(255,107,120,.07); color: #ff929c; padding: 3px 9px; border-radius: 7px; cursor: pointer; font-size: 10px; font-weight: 700; margin-left: 4px; transition: all .15s; }
.ab-reset:hover { background: rgba(255,107,120,.14); }

/* Page content area */
.page-view { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 26px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* Legacy compatibility aliases — keep working until all tab renders update */
.dash-rail { display: none; }
.dash-top { display: none; }
.dash-body-legacy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-content { flex: 1; overflow-y: auto; padding: 26px; }

/* Animations */
@keyframes axisOrbit { to { transform: rotate(360deg); } }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px rgba(83,217,157,0); } 100% { box-shadow: 0 0 0 0 rgba(83,217,157,0); } }

/* ════════════════════════════════════════════════════════════════════════
   V2 component library — buttons / cards / badges / tables / metrics
   ════════════════════════════════════════════════════════════════════════ */

/* Page wrapper + entrance animation */
.page { max-width: 1560px; margin: 0 auto; animation: page-in .32s ease both; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-head h2 { margin: 0; font-size: clamp(20px,2vw,28px); font-weight: 750; line-height: 1.1; letter-spacing: -.03em; color: var(--text-1); }
.page-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 12px; max-width: 600px; }
.page-actions { display: flex; align-items: center; gap: 9px; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Unified button system */
.btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 11px; padding: 0 15px; cursor: pointer; font-weight: 700; font-size: 12.5px; font-family: inherit; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.btn svg { width: 15px; height: 15px; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { color: #061316; background: linear-gradient(110deg, #6ee7c9, #59b7ff); box-shadow: 0 8px 24px rgba(76,227,189,.14); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 12px 30px rgba(76,227,189,.22); }
.btn.secondary { color: var(--text-1); background: var(--surface-2); border-color: var(--line-strong); }
.btn.secondary:hover:not(:disabled) { background: var(--surface-3); }
.btn.ghost { color: var(--text-2); border-color: var(--line); background: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-1); border-color: var(--line-strong); }
.btn.danger { color: #ffd7d9; background: rgba(255,107,120,.1); border-color: rgba(255,107,120,.2); }
.btn.danger:hover:not(:disabled) { background: rgba(255,107,120,.18); }
.btn.small { min-height: 32px; padding: 0 11px; font-size: 11px; border-radius: 9px; }
.btn.full { width: 100%; justify-content: center; }

/* Card system */
.card { background: linear-gradient(180deg, rgba(17,27,34,.98), rgba(12,19,25,.98)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.card-header { min-height: 52px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.card-header h3 { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text-1); }
.card-header p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.card-header svg { width: 16px; height: 16px; flex-shrink: 0; }
.card-body { padding: 16px; }

/* Badge system */
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; border-radius: 7px; padding: 0 8px; font-size: 9.5px; font-weight: 750; letter-spacing: .03em; border: 1px solid var(--line); color: var(--text-muted); background: rgba(255,255,255,.02); }
.badge.success { border-color: rgba(83,217,157,.2); background: rgba(83,217,157,.08); color: #79e4b2; }
.badge.warning { border-color: rgba(241,189,104,.2); background: rgba(241,189,104,.08); color: #f3c87e; }
.badge.info { border-color: rgba(85,167,255,.2); background: rgba(85,167,255,.08); color: #8cc3ff; }
.badge.danger { border-color: rgba(255,107,120,.2); background: rgba(255,107,120,.08); color: #ff929c; }

/* Metric grid (Home / Tracking / Inventory stats) */
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.metric-card { position: relative; overflow: hidden; min-height: 130px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-1); }
.metric-label { color: var(--text-muted); font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.metric-label svg { width: 13px; height: 13px; }
.metric-value { margin-top: 14px; font-size: 26px; font-weight: 750; letter-spacing: -.04em; color: var(--text-1); line-height: 1; }
.metric-sub { margin-top: 6px; font-size: 10.5px; color: var(--text-muted); }
.metric-sub.up { color: var(--success); }
.metric-sub.down { color: var(--coral); }

/* Dashboard two-column grid (chart + sidebar stack) */
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(310px,.55fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .dashboard-grid { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 16px; }

/* Summary strip (Accounts / Inventory header) */
.summary-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 14px; background: var(--line); overflow: hidden; margin-bottom: 16px; }
@media (max-width: 760px) { .summary-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.summary-cell { background: var(--surface-1); padding: 14px 16px; }
.summary-cell span { display: block; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; font-weight: 750; }
.summary-cell strong { display: block; margin-top: 6px; font-size: 20px; font-weight: 750; letter-spacing: -.03em; color: var(--text-1); }
.summary-cell small { color: var(--text-muted); font-size: 9px; }

/* Toolbar + filter controls */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-control { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); background: var(--surface-1); font-size: 11px; cursor: pointer; transition: border-color .15s; }
.filter-control:hover { border-color: var(--line-strong); }
.filter-control svg { width: 14px; height: 14px; color: var(--text-muted); }
.filter-control select, .filter-control input { border: 0; background: transparent; color: inherit; font: inherit; outline: 0; cursor: pointer; }

/* Data table */
.table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { height: 40px; padding: 0 14px; background: rgba(10,17,23,.85); border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 11px; vertical-align: middle; }
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: rgba(255,255,255,.018); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.cell-main { display: flex; align-items: center; gap: 10px; }
.logo-box { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; font-size: 10px; color: var(--text-1); flex: 0 0 auto; overflow: hidden; }
.logo-box img, .logo-box svg { width: 18px; height: 18px; }
.cell-title { font-weight: 700; font-size: 12px; color: var(--text-1); display: block; }
.cell-sub { margin-top: 2px; color: var(--text-muted); font-size: 9.5px; display: block; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* Empty state */
.empty-state { min-height: 260px; display: grid; place-items: center; padding: 32px; text-align: center; }
.empty-inner { max-width: 400px; }
.empty-icon { width: 46px; height: 46px; margin: 0 auto 14px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); color: var(--blue); }
.empty-icon svg { width: 20px; height: 20px; }
.empty-inner h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-1); }
.empty-inner p { margin: 8px auto 17px; color: var(--text-muted); font-size: 12px; line-height: 1.55; }

/* Activity list (Home / recent jobs) */
.activity-list { display: grid; }
.activity-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.activity-row:first-child { border-top: 0; }
.activity-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--blue); flex: 0 0 auto; }
.activity-icon svg { width: 16px; height: 16px; }
.activity-row strong { display: block; font-size: 11px; color: var(--text-1); }
.activity-row span { display: block; color: var(--text-muted); font-size: 9.5px; margin-top: 2px; }
.activity-time { color: var(--text-faint); font-size: 9px; white-space: nowrap; }

/* Score ring (Audit / Health) */
.score-ring { --score: 0; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--mint) calc(var(--score) * 1%), #1e2d35 0); position: relative; flex: 0 0 auto; }
.score-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface-1); }
.score-ring strong { position: relative; z-index: 1; font-size: 18px; font-weight: 750; color: var(--text-1); }

/* Usage / progress bar (Plan page) */
.usage-row { margin-bottom: 14px; }
.usage-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 11px; color: var(--text-2); }
.usage-head span { color: var(--text-muted); }
.usage-bar { width: 100%; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.usage-bar i { display: block; height: 100%; background: var(--mint); border-radius: inherit; transition: width .5s ease; }
.usage-bar i.amber { background: var(--amber); }
.usage-bar i.coral { background: var(--coral); }

/* Risk item list (Audit) */
.risk-list { display: grid; gap: 10px; }
.risk-item { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-1); display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; }
.risk-item.warn { border-color: rgba(241,189,104,.22); background: rgba(241,189,104,.03); }
.risk-item.high { border-color: rgba(255,107,120,.22); background: rgba(255,107,120,.03); }
.risk-item.ok { border-color: rgba(83,217,157,.2); background: rgba(83,217,157,.03); }
.risk-severity { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 11px; }
.risk-item.warn .risk-severity { background: rgba(241,189,104,.12); color: var(--amber); }
.risk-item.high .risk-severity { background: rgba(255,107,120,.12); color: var(--coral); }
.risk-item.ok .risk-severity { background: rgba(83,217,157,.12); color: var(--mint); }
.risk-item h4 { margin: 0 0 4px; font-size: 11.5px; color: var(--text-1); }
.risk-item p { margin: 0; color: var(--text-muted); font-size: 10.5px; line-height: 1.55; }
.risk-item .risk-action { margin-top: 10px; }

/* Split layout (Audit, Accounts secondary) */
.split-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 16px; }
@media (max-width: 960px) { .split-grid { grid-template-columns: 1fr; } }

/* Command palette */
.command-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding-top: 11vh; background: rgba(2,5,7,.72); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.command-overlay.open { opacity: 1; pointer-events: auto; }
.command-panel { width: min(600px,calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: #0b1217; box-shadow: 0 30px 100px rgba(0,0,0,.55); transform: translateY(-10px) scale(.985); transition: transform .2s ease; }
.command-overlay.open .command-panel { transform: translateY(0) scale(1); }
.command-input-row { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.command-input-row svg { color: var(--text-muted); flex: 0 0 auto; }
.command-input-row input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-1); font-size: 15px; }
.command-section-label { padding: 12px 16px 6px; color: var(--text-faint); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.command-results { padding: 0 8px 10px; max-height: 340px; overflow-y: auto; }
.command-result { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); padding: 0 10px; cursor: pointer; transition: background .12s; }
.command-result:hover, .command-result.selected { background: var(--surface-3); color: var(--text-1); }
.command-result svg { width: 17px; height: 17px; color: var(--text-muted); flex: 0 0 auto; }
.command-result span { flex: 1; text-align: left; font-size: 13px; }
.command-result small { color: var(--text-faint); font-size: 10px; }
.command-result:disabled { opacity: .4; cursor: not-allowed; }
.command-footer { display: flex; justify-content: space-between; padding: 9px 15px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 9px; }
.command-footer span { display: flex; align-items: center; gap: 4px; }

/* Feature list (Plan page) */
.feature-list { display: grid; gap: 7px; margin-top: 14px; }
.feature-item { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--text-2); }
.feature-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: 0 0 auto; }
.feature-dot.blue { background: var(--blue); }
.feature-dot.amber { background: var(--amber); }

/* App cards (updated for theme) */
.app-card {
  background: linear-gradient(180deg, rgba(17,27,34,.98), rgba(12,19,25,.98));
  border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  position: relative;
}
.app-card h3 {
  font-family: var(--nav-font); font-size: 14px; font-weight: 700;
  color: var(--text-1); margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.app-card .card-kicker {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 800; margin-bottom: 10px;
}

/* panels */
.panel {
  border: 1px solid var(--line); background: rgba(13,20,26,.7);
  border-radius: 14px; padding: 14px;
}
.panel-h { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }

/* Header sound toggle (game-menu sfx) */
.sfx-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: #64748b; cursor: pointer; transition: color .15s, border-color .15s, background .15s, box-shadow .2s; }
.sfx-toggle svg { width: 15px; height: 15px; }
.sfx-toggle:hover { color: #cbd5e1; border-color: rgba(34,211,238,.4); }
.sfx-toggle.on { color: #67e8f9; border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); box-shadow: 0 0 14px rgba(34,211,238,.18); }

.relay-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.relay-pill.on { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.1); color: #6ee7b7; }
.relay-pill.off { border-color: rgba(148,163,184,.35); background: rgba(148,163,184,.08); color: #94a3b8; }

/* Workspace layout */
.ws { display: flex; gap: 16px; height: 100%; }
.ws-left { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding-right: 2px; }
.ws-right { flex: 1; min-width: 0; overflow-y: auto; }
@media (max-width: 900px) { .ws { flex-direction: column; } .ws-left { width: 100%; } }

.panel { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); border-radius: 14px; padding: 14px; }
.panel-h { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #64748b; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.panel-h .link { color: #64748b; cursor: pointer; font-size: 10px; }
.panel-h .link:hover { color: #94a3b8; }

/* Device rows */
.dev-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); cursor: pointer; transition: background .15s, border-color .15s; }
.dev-row.sel { border-color: rgba(34,211,238,.55); background: rgba(34,211,238,.08); }
.dev-row + .dev-row { margin-top: 8px; }
.dev-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.dev-dot.on { background: #34d399; box-shadow: 0 0 8px #34d39988; }
.dev-dot.off { background: #475569; }
.dev-name { font-size: 13px; font-weight: 600; color: #e2e8f0; flex: 1; }
.dev-meta { font-size: 10px; color: #64748b; }

/* Script palette */
.script-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.script-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 13px; border-radius: 13px; border: 1px solid; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; }
.script-card.ready { border-color: rgba(34,211,238,.3); background: rgba(34,211,238,.06); }
.script-card.ready:hover:not(:disabled) { border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.12); transform: translateY(-1px); }
.script-card:disabled { cursor: not-allowed; opacity: .45; }
.script-card.soon { border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.02); cursor: not-allowed; opacity: .55; }
.script-card svg { width: 20px; height: 20px; color: #22d3ee; }
.script-card.soon svg { color: #475569; }
.script-card .sc-name { font-size: 12.5px; font-weight: 700; color: #e2e8f0; }
.script-card .sc-desc { font-size: 10px; line-height: 1.3; color: #64748b; }

/* Jobs */
.job-row { width: 100%; text-align: left; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); border-radius: 11px; padding: 10px; cursor: pointer; transition: background .15s, border-color .15s; }
.job-row + .job-row { margin-top: 8px; }
.job-row.sel { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.07); }
.job-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.job-title { font-size: 12.5px; font-weight: 700; color: #e2e8f0; display: flex; align-items: center; gap: 6px; }
.job-title .on { font-weight: 400; color: #64748b; }
.job-sub { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #64748b; margin-top: 5px; }
.job-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 7px; }
.job-bar > i { display: block; height: 100%; background: #22d3ee; border-radius: 999px; }
.jb { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; border: 1px solid; }
.jb.waking, .jb.stopped { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); color: #fcd34d; }
.jb.dispatched { border-color: rgba(148,163,184,.4); background: rgba(148,163,184,.1); color: #cbd5e1; }
.jb.accepted { border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.1); color: #67e8f9; }
.jb.running { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.1); color: #6ee7b7; }
.jb.complete { border-color: rgba(217,70,239,.4); background: rgba(217,70,239,.1); color: #f0abfc; }
.jb.error { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); color: #fca5a5; }
.jb.no-device { border-color: rgba(148,163,184,.35); background: rgba(148,163,184,.08); color: #94a3b8; }

.ws-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; color: #475569; border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; }
.job-log { border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.4); border-radius: 12px; padding: 12px; }
.job-log .ln { display: flex; gap: 8px; font: 11px/1.5 ui-monospace, monospace; color: #cbd5e1; }
.job-log .ln .t { color: #475569; flex-shrink: 0; }

/* ── Home / overview ─────────────────────────────────────────────────────── */
.home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 880px) { .home-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); border-radius: 15px; padding: 16px; }
.stat .s-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.stat .s-label svg { width: 13px; height: 13px; }
.stat .s-val { font: 800 25px var(--nav-font); color: #f1f5f9; margin-top: 8px; letter-spacing: -.5px; }
.stat .s-sub { font-size: 11px; margin-top: 4px; color: #64748b; }
.stat .s-sub.up { color: #6ee7b7; } .stat .s-sub.down { color: #fca5a5; }

.chart-card { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); border-radius: 16px; padding: 18px 18px 10px; margin-bottom: 18px; position: relative; }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.chart-head h3 { font: 700 14px var(--nav-font); color: #f1f5f9; margin: 0; }
.chart-legend { display: flex; gap: 16px; font-size: 11px; color: #94a3b8; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #8295a8; background: radial-gradient(120% 120% at 50% 40%, rgba(6,11,22,.92), rgba(4,7,16,.97)); border-radius: 16px; text-align: center; padding: 20px; }
.chart-empty svg { width: 42px; height: 42px; opacity: .45; margin-bottom: 2px; }
.chart-empty > div:nth-of-type(2) { max-width: 320px; line-height: 1.5; }

/* Minimal connected-accounts strip with pulsing states */
@keyframes sx-pulse-on { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); } 50% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } }
@keyframes sx-pulse-add { 0%,100% { box-shadow: 0 0 0 0 rgba(34,211,238,.5); } 50% { box-shadow: 0 0 0 8px rgba(34,211,238,0); } }
.acct-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.acct-chip { display: flex; align-items: center; gap: 11px; padding: 9px 16px 9px 9px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.acct-chip .ac-logo { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; }
.acct-chip .ac-logo svg { width: 24px; height: 24px; }
.acct-chip.active { border-color: rgba(16,185,129,.4); }
.acct-chip.active .ac-logo { animation: sx-pulse-on 2.4s ease-in-out infinite; }
.acct-chip.add { cursor: pointer; border-style: dashed; border-color: rgba(34,211,238,.35); }
.acct-chip.add .ac-logo { color: #67e8f9; animation: sx-pulse-add 2.4s ease-in-out infinite; }
.acct-chip.add:hover { border-color: rgba(34,211,238,.7); }
.ac-name { font-size: 13px; font-weight: 700; color: #e2e8f0; }
.ac-sub { font-size: 10px; color: #64748b; margin-top: 1px; }
.ac-sub.on { color: #6ee7b7; }

.setup-strip { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 14px; border: 1px solid rgba(34,211,238,.28); background: rgba(34,211,238,.05); margin-bottom: 18px; }
.setup-strip .ss-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: rgba(34,211,238,.12); color: #67e8f9; display: flex; align-items: center; justify-content: center; }
.setup-strip .ss-title { font-weight: 700; color: #e2e8f0; font-size: 14px; }
.setup-strip .ss-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }

/* Admin plan-preview bar */
.admin-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 22px; background: linear-gradient(90deg, rgba(217,70,239,.12), rgba(34,211,238,.08)); border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-bar .ab-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #f0abfc; }
.admin-seg { display: flex; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; overflow: hidden; }
.admin-seg button { background: none; border: none; color: #94a3b8; font: 700 12px var(--nav-font); padding: 6px 16px; cursor: pointer; transition: background .15s, color .15s; }
.admin-seg button + button { border-left: 1px solid rgba(255,255,255,.12); }
.admin-seg button.on { background: rgba(34,211,238,.18); color: #67e8f9; }
.admin-bar .ab-note { font-size: 11px; color: #64748b; }
.admin-bar .ab-reset { background: none; border: none; color: #f0abfc; font-size: 11px; cursor: pointer; }

/* ── Workspace workflow (Sync → Research → List → Manage → Repeat) ─────────── */
.wf-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.wf-target { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-weight: 700; }
.wf-accs { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-acc { display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: #cbd5e1; font: 600 12.5px var(--nav-font); cursor: pointer; }
.wf-acc.on { border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.1); color: #67e8f9; }
.wf-right { display: flex; align-items: center; gap: 12px; }
.wf-audit { font-size: 11.5px; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.wf-audit svg { width: 14px; height: 14px; color: #6ee7b7; } .wf-audit b { color: #6ee7b7; }

.wf-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 20px; }
.wf-step { font: 800 11px var(--nav-font); text-transform: uppercase; letter-spacing: .06em; color: #67e8f9; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(34,211,238,.3); background: rgba(34,211,238,.07); }
.wf-step.loop { color: #f0abfc; border-color: rgba(217,70,239,.3); background: rgba(217,70,239,.07); }
.wf-arrow { color: #475569; font-weight: 700; }
.wf-note { font-size: 12.5px; color: #fcd34d; background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.25); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; line-height: 1.5; }

.wf-stage { margin-bottom: 18px; }
.wf-stage-h { display: flex; align-items: center; gap: 8px; font: 700 13px var(--nav-font); color: #e2e8f0; margin-bottom: 10px; }
.wf-stage-h svg { width: 16px; height: 16px; color: #67e8f9; }
.script-card .sc-name { display: flex; align-items: center; gap: 7px; }
.sc-live { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 999px; background: rgba(16,185,129,.16); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }

.ws2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
@media (max-width: 820px) { .ws2-cols { grid-template-columns: 1fr; } }
.auto-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.auto-row:last-child { border-bottom: none; }
.auto-del { background: none; border: none; color: #64748b; cursor: pointer; font-size: 13px; }
.auto-del:hover { color: #fca5a5; }

/* Devices / node grid */
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.node-card { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); border-radius: 15px; padding: 16px; }
.node-top { display: flex; align-items: center; gap: 9px; }
.node-name { font: 700 14px var(--nav-font); color: #f1f5f9; }
.node-tag { margin-left: auto; font-size: 8px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(34,211,238,.12); color: #67e8f9; }
.node-role { font-size: 11px; color: #64748b; margin: 4px 0 12px; }
.node-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.node-metrics .nm { flex: 1; min-width: 56px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 9px; padding: 7px 8px; }
.node-metrics .nm span { display: block; font-size: 9px; text-transform: uppercase; color: #64748b; letter-spacing: .04em; }
.node-metrics .nm b { font: 800 14px var(--nav-font); color: #e2e8f0; }
.node-status { margin-top: 12px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.node-status.on { color: #6ee7b7; } .node-status.standby { color: #fcd34d; } .node-status.off { color: #64748b; }
.dev-dot.standby { background: #fbbf24; box-shadow: 0 0 8px #fbbf2488; }

/* Trust / warm-up journey (per connected account, marketplace-specific) */
.trust-card { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); border-radius: 15px; padding: 16px; margin-bottom: 14px; }
.trust-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.trust-est { margin-left: auto; font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.trust-est input { accent-color: #22d3ee; }
.trust-note { font-size: 12px; color: #94a3b8; line-height: 1.5; margin-bottom: 14px; }
.trust-track { display: flex; gap: 6px; flex-wrap: wrap; }
.trust-step { flex: 1; min-width: 92px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 11px 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.trust-step .ts-dot { width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; border: 2px solid rgba(255,255,255,.12); color: #64748b; }
.trust-step.done { border-color: rgba(16,185,129,.3); }
.trust-step.done .ts-dot { border-color: #34d399; color: #6ee7b7; background: rgba(16,185,129,.12); }
.trust-step.active { border-color: rgba(34,211,238,.5); }
.trust-step.active .ts-dot { border-color: #22d3ee; color: #67e8f9; background: rgba(34,211,238,.12); animation: sx-pulse-add 2.4s ease-in-out infinite; }
.trust-step.locked { opacity: .55; }
.trust-step .ts-label { font-size: 11.5px; font-weight: 700; color: #e2e8f0; }
.trust-step .ts-desc { font-size: 9.5px; color: #64748b; line-height: 1.25; }
.trust-gate { margin-top: 12px; padding: 10px 14px; border-radius: 11px; font-size: 12px; font-weight: 600; border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.06); color: #fcd34d; }
.trust-gate.open { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.07); color: #6ee7b7; }

/* Neutral logo chip (real brand SVGs carry their own color) */
.mk-tile .mk-chip.neutral { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08); }

/* Modal */
.modal-bg { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { width: 100%; max-width: 520px; background: #0a1424; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 22px; }
.modal h3 { font: 700 16px var(--nav-font); color: #f1f5f9; margin: 0 0 4px; }
.modal .modal-sub { font-size: 12.5px; color: #94a3b8; margin-bottom: 16px; }
.modal label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 700; margin: 12px 0 5px; }
.modal input, .modal textarea, .modal select {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; color: #e2e8f0; font-size: 13.5px; padding: 10px 12px; outline: none; font-family: inherit;
}
.modal input:focus, .modal textarea:focus, .modal select:focus { border-color: rgba(34,211,238,.5); }
.modal-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* Account-completion recommendation card */
.rec-card {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid rgba(0,207,255,.22); background: rgba(0,207,255,.04);
  border-radius: 14px; padding: 16px 18px;
}
.rec-card .rec-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  background: rgba(0,207,255,.12); color: #7fe3ff;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.rec-card .rec-title { font-weight: 700; color: var(--text); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.rec-pill { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: rgba(0,207,255,.14); color: #7fe3ff; }
.rec-card .rec-body { color: var(--text-gray); font-size: 12.5px; line-height: 1.55; margin-top: 4px; }
.rec-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (max-width: 560px) { .rec-fields { grid-template-columns: 1fr; } }

/* Risk audit */
.audit { border-radius: 13px; padding: 16px; border: 1px solid var(--border); }
.audit.ok   { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.28); }
.audit.warn { background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.3); }
.audit-head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; }
.audit.ok .audit-head { color: #6ee7b7; }
.audit.warn .audit-head { color: #fcd34d; }
.audit-finding { border-top: 1px dashed var(--border); padding: 12px 0 2px; margin-top: 12px; }
.audit-finding:first-of-type { border-top: none; }
.audit-finding .f-title { font-weight: 700; color: var(--text); font-size: 13.5px; }
.audit-finding .f-detail { color: var(--text-gray); font-size: 12.5px; line-height: 1.55; margin-top: 4px; }

/* Eligibility note */
.eligibility {
  margin-top: 10px; font-size: 12.5px; line-height: 1.55;
  padding: 11px 13px; border-radius: 10px;
  background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.25); color: #fcd34d;
}
.eligibility.eligible { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.3); color: #6ee7b7; }

/* ── Onboarding wizard ──────────────────────────────────────────────────── */
.wiz-shell { max-width: 720px; margin: 0 auto; padding: 30px 20px 80px; position: relative; z-index: 1; }
.wiz-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.wiz-logo img { height: 46px; }
html.dark .wiz-logo img { mix-blend-mode: screen; }

.wiz-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 26px; }
.wiz-dot { width: 30px; height: 4px; border-radius: 999px; background: var(--border); transition: background .3s; }
.wiz-dot.done { background: var(--cyan); }
.wiz-dot.active { background: linear-gradient(90deg,#00CFFF,#FF00D4); }

.wiz-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 34px 34px 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.wiz-step-num { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.wiz-h { font-family: var(--nav-font); font-size: 22px; font-weight: 800; color: var(--text); margin: 6px 0 6px; letter-spacing: -.4px; }
.wiz-p { color: var(--text-gray); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }

.wiz-choices { display: grid; gap: 10px; }
.wiz-choice {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px;
  background: rgba(255,255,255,.02); cursor: pointer; transition: border-color .2s, background .2s; width: 100%;
}
.wiz-choice:hover { border-color: rgba(0,207,255,.4); }
.wiz-choice.selected { border-color: rgba(0,207,255,.65); background: rgba(0,207,255,.06); }
.wiz-choice .c-title { font-weight: 700; color: var(--text); font-size: 14px; }
.wiz-choice .c-desc { color: var(--text-gray); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
.wiz-choice .c-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 1px;
}
.wiz-choice.selected .c-check { background: var(--cyan); border-color: var(--cyan); }

/* Plan tiles inside wizard */
.plan-tiles { display: grid; gap: 12px; }
.plan-tile {
  border: 1px solid var(--border); border-radius: 15px; padding: 18px; cursor: pointer;
  background: rgba(255,255,255,.02); transition: border-color .2s, background .2s; position: relative;
}
.plan-tile:hover { border-color: rgba(0,207,255,.45); }
.plan-tile.selected { border-color: rgba(0,207,255,.7); background: rgba(0,207,255,.06); }
.plan-tile .pt-top { display: flex; align-items: baseline; justify-content: space-between; }
.plan-tile .pt-name { font-family: var(--nav-font); font-weight: 800; font-size: 17px; color: var(--text); }
.plan-tile .pt-price { font-weight: 800; color: #7fe3ff; font-size: 15px; }
.plan-tile .pt-tag { color: var(--text-gray); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.plan-tile .pt-rec { position: absolute; top: -9px; left: 16px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: linear-gradient(90deg,#00CFFF,#FF00D4); color: #02121d; padding: 2px 9px; border-radius: 999px; }

.safety-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0 4px; padding: 13px 15px; border-radius: 12px;
  background: rgba(0,207,255,.05); border: 1px solid rgba(0,207,255,.2);
  color: var(--text-gray); font-size: 12.5px; line-height: 1.6;
}
.safety-note b { color: #9fe6ff; }

.wiz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.wiz-skip { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.wiz-skip:hover { color: var(--text-gray); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.device-status {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-radius: 13px; border: 1px solid var(--border); background: rgba(255,255,255,.02);
}
.device-status .ds-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.device-status.connected .ds-icon { background: rgba(16,185,129,.12); color: #6ee7b7; }
.device-status.missing .ds-icon { background: rgba(148,163,184,.12); color: #cbd5e1; }
.device-status .ds-title { font-weight: 700; color: var(--text); font-size: 14px; }
.device-status .ds-sub { color: var(--text-gray); font-size: 12.5px; margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM CYBER THEME (v2) — overrides for a high-end, futuristic feel
   ════════════════════════════════════════════════════════════════════════ */
.dash {
  background:
    radial-gradient(1200px 620px at 10% -12%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(1000px 600px at 102% -4%, rgba(217,70,239,.11), transparent 55%),
    radial-gradient(900px 800px at 50% 118%, rgba(99,102,241,.10), transparent 60%),
    #04060e;
}
.dash::before { /* fine grid, faded toward edges */
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 36%, #000 28%, transparent 86%);
  mask-image: radial-gradient(circle at 50% 36%, #000 28%, transparent 86%);
}
.dash::after { /* slow drifting aurora */
  content: ''; position: fixed; inset: -25%; z-index: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(34,211,238,.13), transparent 70%),
    radial-gradient(40% 40% at 80% 64%, rgba(217,70,239,.11), transparent 70%);
  animation: sx-aurora 20s ease-in-out infinite alternate;
}
@keyframes sx-aurora { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(0,-3%,0) scale(1.06); } }
.dash-rail, .dash-body { position: relative; z-index: 1; }

/* Sidebar — glass + neon active state */
.dash-rail { background: linear-gradient(180deg, rgba(10,16,28,.86), rgba(6,10,20,.82)); backdrop-filter: blur(18px); border-right: 1px solid rgba(255,255,255,.06); }
.dash-nav { position: relative; }
.dash-nav.active { background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(217,70,239,.06)); color: #a5f3ff; box-shadow: inset 0 0 0 1px rgba(34,211,238,.22), 0 0 20px rgba(34,211,238,.12); }
.dash-nav.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 999px; background: linear-gradient(#22d3ee,#d946ef); box-shadow: 0 0 12px rgba(34,211,238,.7); }

/* Topbar glass + gradient title */
.dash-top { background: rgba(8,12,22,.55); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.06); }
.dash-top h2 { background: linear-gradient(90deg,#eafcff,#bcd0e0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Glass surfaces with a gradient hairline + depth (neutral panels only) */
.panel, .app-card, .stat, .chart-card, .node-card, .trust-card, .mk-tile {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.013)) padding-box,
    linear-gradient(135deg, rgba(34,211,238,.28), rgba(217,70,239,.16) 55%, rgba(255,255,255,.05)) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.app-card:hover, .stat:hover, .node-card:hover, .mk-tile:hover, .script-card.ready:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(34,211,238,.32), 0 0 30px rgba(34,211,238,.16);
}

/* Neon numerics */
.stat .s-val, .plan-name {
  background: linear-gradient(135deg,#bdf6ff,#67e8f9 42%,#f5b8ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(34,211,238,.2);
}

/* Buttons — gradient + animated sheen + glow */
.app-btn { background: linear-gradient(120deg,#22d3ee,#3b82f6 46%,#d946ef); box-shadow: 0 8px 24px rgba(34,211,238,.3), inset 0 1px 0 rgba(255,255,255,.28); position: relative; overflow: hidden; }
.app-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 38%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.app-btn:hover::after { left: 135%; }
.app-btn.ghost { background: rgba(255,255,255,.045); box-shadow: none; backdrop-filter: blur(8px); }
.app-btn.ghost:hover { box-shadow: 0 0 0 1px rgba(34,211,238,.35), 0 0 18px rgba(34,211,238,.12); }

/* Tool cards — neon edge when live */
.script-card.ready {
  background:
    linear-gradient(180deg, rgba(34,211,238,.10), rgba(34,211,238,.02)) padding-box,
    linear-gradient(135deg, rgba(34,211,238,.5), rgba(217,70,239,.25)) border-box;
  border: 1px solid transparent;
}
.script-card.ready svg { filter: drop-shadow(0 0 6px rgba(34,211,238,.5)); }

/* Workflow flow steps glow */
.wf-step { box-shadow: 0 0 18px rgba(34,211,238,.14); }
.wf-acc.on { box-shadow: 0 0 16px rgba(34,211,238,.18); }

/* Plan chips glow */
.app-plan-chip { backdrop-filter: blur(6px); }
.app-plan-chip.plan-enterprise { box-shadow: 0 0 18px rgba(251,191,36,.28); }
.app-plan-chip.plan-growth { box-shadow: 0 0 16px rgba(16,185,129,.22); }

/* Admin sandbox bar — richer */
.admin-bar { background: linear-gradient(90deg, rgba(217,70,239,.16), rgba(34,211,238,.08)); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.admin-seg button.on { box-shadow: inset 0 0 0 1px rgba(34,211,238,.3), 0 0 14px rgba(34,211,238,.15); }

/* Scrollbar */
.dash-content::-webkit-scrollbar, .ws-left::-webkit-scrollbar { width: 9px; }
.dash-content::-webkit-scrollbar-thumb, .ws-left::-webkit-scrollbar-thumb { background: linear-gradient(#1e3a4a,#2a2150); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.dash-content::-webkit-scrollbar-track { background: transparent; }

/* ── Icon size safety (raw inline icons must NEVER balloon) ───────────────────
   Every inline icon lives in a small inline context; without an explicit size an
   un-styled <svg> renders at its intrinsic/viewport size (the giant briefcase &
   monitor bug). These cover every place icon() is dropped inline. Decorative
   full-bleed SVGs (node towers width="100%", area chart inline width) are untouched. */
.modal h3 svg { width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.app-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.modal h3 { display: flex; align-items: center; gap: 9px; }
.relay-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.job-title svg { width: 15px; height: 15px; flex-shrink: 0; color: #67e8f9; }
.setup-strip .ss-ico svg { width: 19px; height: 19px; }
.ac-sub svg { width: 12px; height: 12px; vertical-align: -2px; flex-shrink: 0; }
.audit-head svg { width: 17px; height: 17px; flex-shrink: 0; }
.wf-lbl + * svg, .link svg { width: 13px; height: 13px; }
/* Job title never wraps mid-phrase ("on / This / PC") — keep the device on one line. */
.job-title { min-width: 0; }
.job-title .on { white-space: nowrap; }
.job-row .job-top { align-items: flex-start; }

/* Add-remote-node modal */
.modal { max-height: 90vh; overflow: auto; }
.modal.wide { max-width: 720px; width: 100%; }
.add-dev { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: start; }
.add-dev > div { min-width: 0; }      /* let the right column shrink so code can scroll */
@media (max-width: 620px) { .add-dev { grid-template-columns: 1fr; } }
.add-visual { border: 1px solid rgba(34,211,238,.2); border-radius: 14px; background: radial-gradient(120% 80% at 50% 0%, #0a1626, #04070e); display: flex; align-items: center; justify-content: center; padding: 14px; position: relative; overflow: hidden; }
.add-visual .tower { cursor: default; }
.add-visual .scan { position: absolute; left: 0; right: 0; height: 32%; background: linear-gradient(180deg, rgba(34,211,238,.16), transparent); pointer-events: none; animation: sx-scan 2.8s ease-in-out infinite; }
@keyframes sx-scan { 0% { top: -32%; } 100% { top: 100%; } }
.method-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.method-tab { flex: 1 1 0; min-width: 0; padding: 9px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: #94a3b8; font: 700 12.5px var(--nav-font); cursor: pointer; white-space: nowrap; }
.method-tab.on { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.1); color: #67e8f9; }
.ps1-box { display: flex; gap: 8px; align-items: center; min-width: 0; background: #02060e; border: 1px solid rgba(34,211,238,.25); border-radius: 10px; padding: 10px 12px; font: 12px ui-monospace, monospace; color: #9fe6ff; margin-top: 6px; }
.ps1-box code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; }
.ps1-box .app-btn { flex-shrink: 0; }
.ip-row { display: flex; gap: 8px; align-items: stretch; }
.ip-row input { flex: 1; }
.ip-warn { margin-top: 8px; font-size: 12px; color: #fcd34d; background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.25); border-radius: 9px; padding: 8px 11px; line-height: 1.5; }
.sec-note { margin-top: 10px; font-size: 11.5px; color: #6ee7b7; background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.22); border-radius: 9px; padding: 9px 11px; line-height: 1.5; }

/* Node cluster towers (ported mini-PC chassis) */
.tower { position: relative; cursor: pointer; transition: transform .2s ease, filter .2s ease; filter: drop-shadow(0 16px 24px rgba(0,0,0,.5)); }
.tower:hover { transform: translateY(-6px); filter: drop-shadow(0 22px 30px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(24,228,255,.18)); }
.cluster-stats { backdrop-filter: blur(8px); }
@media (max-width: 720px) { .cluster-stats { grid-template-columns: repeat(3, 1fr) !important; } }

/* Headings use the display font tighter */
.app-h1, .wf-stage-h span, .dash-top h2 { letter-spacing: -0.4px; }

/* ── Toast notifications ──────────────────────────────────────────────────── */
#toastBox { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 380px;
  padding: 12px 16px; border-radius: 13px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.92); backdrop-filter: blur(14px);
  font-size: 13px; color: #e2e8f0; font-weight: 500;
  transform: translateX(120%); opacity: 0; transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .28s;
  pointer-events: auto; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.toast.in { transform: translateX(0); opacity: 1; }
.toast-ico { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.toast-success { border-color: rgba(16,185,129,.4); }
.toast-success .toast-ico { background: rgba(16,185,129,.2); color: #6ee7b7; }
.toast-error   { border-color: rgba(248,113,113,.4); }
.toast-error .toast-ico { background: rgba(248,113,113,.18); color: #fca5a5; }
.toast-info    { border-color: rgba(34,211,238,.3); }
.toast-info .toast-ico { background: rgba(34,211,238,.12); color: #67e8f9; }

/* ── Branded marketplace connect modal header ──────────────────────────────── */
.modal-mk-header { flex-shrink: 0; }
.modal.wide .modal-mk-header + div { padding: 20px 24px; }

/* Connect-modal mini trust stepper */
.ctrust { display: flex; align-items: flex-start; gap: 0; }
.ctrust-step { display: flex; flex-direction: column; align-items: center; flex: 1; }
.ctrust-dot {
  width: 26px; height: 26px; border-radius: 999px; border: 2px solid rgba(34,211,238,.3);
  background: rgba(34,211,238,.07); color: #67e8f9;
  font: 800 11px var(--nav-font); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1;
}
.ctrust-info { text-align: center; margin-top: 6px; padding: 0 2px; }
.ctrust-label { font-size: 10px; font-weight: 700; color: #cbd5e1; line-height: 1.2; }
.ctrust-desc  { font-size: 9px; color: #64748b; margin-top: 2px; line-height: 1.2; }
.ctrust-line  { height: 2px; flex: 1; background: rgba(34,211,238,.18); margin-top: 12px; }

/* ── Full Sync progress modal ─────────────────────────────────────────────── */
.sync-phases { display: flex; gap: 6px; }
.sync-phase {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px; border-radius: 11px; border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02); transition: border-color .3s, background .3s;
  text-align: center;
}
.sync-phase.active { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.08); }
.sync-phase.done   { border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.06); }
.sync-phase svg { width: 16px; height: 16px; color: #64748b; }
.sync-phase.active svg { color: #22d3ee; filter: drop-shadow(0 0 6px rgba(34,211,238,.5)); }
.sync-phase.done   svg { color: #34d399; }
.sp-lbl { font-size: 9.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.sync-phase.active .sp-lbl { color: #67e8f9; }
.sync-phase.done   .sp-lbl { color: #6ee7b7; }
.sp-done { font-size: 12px; color: #34d399; }
.sp-ico { display: flex; align-items: center; justify-content: center; }

.sync-bar-wrap { }
.sync-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.sync-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#22d3ee,#d946ef); transition: width .6s cubic-bezier(.25,1,.5,1); }

/* Panel-h with inline button */
.panel-h { align-items: center; gap: 8px; }
.panel-h .app-btn.sm { margin-left: auto; font-size: 11px; height: 28px; padding: 0 10px; }

/* ── Script card — clickable for all (not .soon disabled) in workspace ─────── */
.script-card.ready { cursor: pointer; opacity: 1; }
.script-card { cursor: pointer; opacity: 1; }
.script-card.soon { cursor: pointer; opacity: .7; }

/* mk-tile connected state glow */
.mk-tile.big.selected {
  box-shadow: 0 8px 28px rgba(0,207,255,.18), 0 0 0 1px rgba(34,211,238,.5) inset;
}

/* Home chart Sales/Inventory toggle */
.chart-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; overflow: hidden; }
.chart-toggle button { background: none; border: none; color: #94a3b8; font: 700 11.5px var(--nav-font); padding: 5px 13px; cursor: pointer; transition: background .15s, color .15s; }
.chart-toggle button + button { border-left: 1px solid rgba(255,255,255,.1); }
.chart-toggle button.on { background: rgba(34,211,238,.16); color: #67e8f9; box-shadow: inset 0 0 0 1px rgba(34,211,238,.25); }

/* Days-since-sync chips under the inventory chart */
.sync-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sync-chip { font-size: 11px; padding: 4px 11px; border-radius: 999px; border: 1px solid; background: rgba(255,255,255,.02); }
.sync-chip b { font-weight: 700; }

/* Inventory filter toolbar (CSV/sheet header) */
.inv-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.inv-tool-ico { color: #67e8f9; display: inline-flex; }
.inv-tool-ico svg { width: 15px; height: 15px; }
.inv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-chip { font: 700 11.5px var(--nav-font); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: #94a3b8; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.inv-chip:hover { color: #cbd5e1; border-color: rgba(34,211,238,.3); }
.inv-chip.on { border-color: rgba(34,211,238,.55); background: rgba(34,211,238,.12); color: #67e8f9; box-shadow: 0 0 14px rgba(34,211,238,.15); }
.inv-seg { display: inline-flex; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; overflow: hidden; }
.inv-seg button { background: none; border: none; color: #94a3b8; font: 700 11px var(--nav-font); padding: 5px 11px; cursor: pointer; }
.inv-seg button + button { border-left: 1px solid rgba(255,255,255,.1); }
.inv-seg button.on { background: rgba(34,211,238,.16); color: #67e8f9; }
.inv-search { flex: 1; min-width: 160px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #e2e8f0; font-size: 12.5px; padding: 7px 11px; outline: none; }
.inv-search:focus { border-color: rgba(34,211,238,.5); }
.inv-del { background: none; border: none; color: #64748b; cursor: pointer; padding: 4px; border-radius: 7px; display: inline-flex; }
.inv-del svg { width: 15px; height: 15px; }
.inv-del:hover { color: #fca5a5; background: rgba(248,113,113,.1); }

/* Inventory table */
.inv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.inv-table th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 800; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
.inv-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.05); color: #cbd5e1; }
.inv-table tbody tr:hover { background: rgba(255,255,255,.025); }
.inv-table tbody tr:last-child td { border-bottom: none; }

/* Accounts → sync row heading */
.acct-sync-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 26px 0 4px; }
.acct-sync-row h3 { margin: 0; font: 700 14px var(--nav-font); color: #f1f5f9; }

/* ════════════════════════════════════════════════════════════════════════
   v3 — professional empty states, global Focus bar, tracking top-up tiles
   ════════════════════════════════════════════════════════════════════════ */

/* HARD cap any inline icon dropped in an empty state — without this the raw <svg>
   balloons to fill the dashed box (the giant briefcase/truck/list bug). */
.ws-empty svg, .empty-pro .ep-ico svg { width: 26px !important; height: 26px !important; }
/* Marketplace brand logos inside focus-bar chips carry their own viewBox — pin them. */
.sb-chip svg { width: 14px !important; height: 14px !important; }

/* Polished empty state — small icon chip, title, one line, optional CTA. Replaces
   the full-height ghost-icon look. */
.empty-pro {
  max-width: 480px; margin: 46px auto; padding: 30px 26px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  border: 1px dashed rgba(255,255,255,.12); border-radius: 18px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(34,211,238,.05), transparent 70%);
}
.empty-pro .ep-ico {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  color: #67e8f9; background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(217,70,239,.10));
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.25), 0 8px 24px rgba(0,0,0,.35);
}
.empty-pro h3 { margin: 4px 0 0; font: 800 16px var(--nav-font); color: #e8f2f8; letter-spacing: -.2px; }
.empty-pro p { margin: 0; font-size: 13px; line-height: 1.6; color: #8295a8; max-width: 380px; }
.empty-pro .app-btn { margin-top: 6px; }

/* ── Global Focus bar (Node + Account context, shown on data tabs) ─────────── */
.scope-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 16px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  backdrop-filter: blur(10px);
}
.scope-bar .sb-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5b6b80; }
.scope-bar .sb-sep { width: 1px; height: 20px; background: rgba(255,255,255,.1); margin: 0 2px; }
.scope-bar .sb-spacer { flex: 1; }
.scope-bar .sb-hint { font-size: 11px; color: #5b6b80; display: flex; align-items: center; gap: 6px; }
.sb-pick {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  color: #cbd5e1; font: 600 12.5px var(--nav-font); cursor: pointer; position: relative;
  transition: border-color .15s, background .15s, color .15s;
}
.sb-pick:hover { border-color: rgba(34,211,238,.4); color: #e2e8f0; }
.sb-pick.node { color: #a5f3ff; }
.sb-pick .sb-dot { width: 7px; height: 7px; border-radius: 999px; background: #34d399; box-shadow: 0 0 8px #34d39988; }
.sb-pick .sb-dot.all { background: #94a3b8; box-shadow: none; }
.sb-pick svg.sb-ico { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.sb-pick svg.sb-caret { width: 13px; height: 13px; opacity: .6; }
.sb-pick .sb-chip { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.sb-pick .sb-val { font-weight: 700; color: #e8f2f8; }
.sb-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px;
  background: rgba(10,16,28,.97); backdrop-filter: blur(16px); box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.sb-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 9px; border: none; background: none; cursor: pointer;
  color: #cbd5e1; font: 600 12.5px var(--nav-font);
}
.sb-opt:hover { background: rgba(34,211,238,.1); color: #e2e8f0; }
.sb-opt.on { background: rgba(34,211,238,.14); color: #67e8f9; }
.sb-opt .sb-chip { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.sb-opt .sb-sub { margin-left: auto; font-size: 10px; color: #64748b; font-weight: 600; }

/* ── Tracking top-up — credit pack tiles (replaces the unlabeled buttons) ──── */
.topup { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px; margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(34,211,238,.05), rgba(255,255,255,.01)); }
.topup.urgent { border-color: rgba(248,113,113,.35); background: linear-gradient(180deg, rgba(248,113,113,.07), rgba(255,255,255,.01)); }
.topup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.topup-title { font: 800 15px var(--nav-font); color: #f1f5f9; }
.topup-sub { font-size: 12.5px; color: #94a3b8; margin-bottom: 14px; line-height: 1.5; }
.topup.urgent .topup-sub { color: #fca5a5; }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.seg button { background: none; border: none; color: #94a3b8; font: 700 12px var(--nav-font); padding: 7px 16px; cursor: pointer; transition: background .15s, color .15s; }
.seg button + button { border-left: 1px solid rgba(255,255,255,.12); }
.seg button.on { background: rgba(34,211,238,.18); color: #67e8f9; box-shadow: inset 0 0 0 1px rgba(34,211,238,.3); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 820px) { .pack-grid { grid-template-columns: repeat(2, 1fr); } }
.pack-tile {
  display: flex; flex-direction: column; gap: 3px; padding: 15px 14px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s; text-align: left; position: relative;
}
.pack-tile:hover:not(:disabled) { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.06); transform: translateY(-2px); }
.pack-tile:disabled { opacity: .4; cursor: not-allowed; }
.pack-tile.best { border-color: rgba(217,70,239,.4); }
.pack-name { font: 800 12px var(--nav-font); text-transform: uppercase; letter-spacing: .05em; color: #67e8f9; }
.pack-credits { font: 800 21px var(--nav-font); color: #f1f5f9; letter-spacing: -.5px; }
.pack-credits span { font-size: 12px; font-weight: 600; color: #64748b; letter-spacing: 0; }
.pack-price { font: 800 16px var(--nav-font); color: #e8f2f8; margin-top: 6px; }
.pack-price .per { display: block; font: 600 10.5px var(--nav-font); color: #64748b; margin-top: 2px; }
.pack-tag { position: absolute; top: -8px; right: 12px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: linear-gradient(90deg,#22d3ee,#d946ef); color: #04060e; }
.topup-foot { font-size: 11px; color: #64748b; margin-top: 12px; line-height: 1.5; }

/* ── Readability pass — the tool palette text was too dim to scan ───────────── */
.script-card .sc-name { color: #f1f5f9; font-size: 13px; }
.script-card .sc-desc { color: #9fb1c4; font-size: 10.5px; }
.script-card.soon { opacity: .82; }
.script-card.soon .sc-name { color: #cbd5e1; }
.wf-stage-h span { font-size: 13.5px; color: #f1f5f9; }
.wf-stage-h { margin-bottom: 12px; }
.job-sub { color: #94a3b8; }
.dash-sec-h { color: #6b7c93; }
.panel-h { color: #8295a8; }
/* "hub" badge — make it read as a clear secondary state, not noise */
.sc-name .sc-live[style] { opacity: .9; }

/* ── Workspace lifecycle hero (where am I → what's next → is it safe) ───────── */
.wf-plan {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 18px;
}
@media (max-width: 900px) { .wf-plan { grid-template-columns: 1fr; } }
.next-step {
  border-radius: 16px; padding: 18px 20px; position: relative; overflow: hidden;
  border: 1px solid rgba(34,211,238,.35);
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(217,70,239,.06));
}
.next-step.warn { border-color: rgba(251,191,36,.4); background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(217,70,239,.05)); }
.next-step .ns-kicker { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #67e8f9; display: flex; align-items: center; gap: 7px; }
.next-step.warn .ns-kicker { color: #fcd34d; }
.next-step .ns-title { font: 800 19px var(--nav-font); color: #f1f5f9; margin: 8px 0 4px; letter-spacing: -.3px; }
.next-step .ns-desc { font-size: 13px; color: #c2d2e0; line-height: 1.55; margin-bottom: 14px; max-width: 440px; }
.next-step .ns-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.next-step .ns-step-of { font-size: 11px; color: #8295a8; margin-top: 10px; }

.wf-side { display: flex; flex-direction: column; gap: 12px; }
.wf-card { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,.025); }
.wf-card .wc-h { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8295a8; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.wf-card .wc-h svg { width: 14px; height: 14px; }
.audit-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.45; }
.audit-row.ok { color: #6ee7b7; } .audit-row.warn { color: #fcd34d; }
.audit-row svg { width: 16px; height: 16px; flex-shrink: 0; }
.audit-more { font-size: 11px; color: #94a3b8; margin-top: 6px; }
.audit-more b { color: #fcd34d; }

/* Compact lifecycle stepper (horizontal) */
.lifecycle { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.lc-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 64px; text-align: center; position: relative; }
.lc-step .lc-dot { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font: 800 11px var(--nav-font); border: 2px solid rgba(255,255,255,.14); color: #64748b; background: rgba(255,255,255,.02); z-index: 1; }
.lc-step .lc-lbl { font-size: 10px; font-weight: 700; color: #64748b; line-height: 1.15; }
.lc-step.done .lc-dot { border-color: #34d399; color: #6ee7b7; background: rgba(16,185,129,.12); }
.lc-step.done .lc-lbl { color: #8fb9aa; }
.lc-step.active .lc-dot { border-color: #22d3ee; color: #67e8f9; background: rgba(34,211,238,.14); box-shadow: 0 0 14px rgba(34,211,238,.4); }
.lc-step.active .lc-lbl { color: #a5f3ff; }
.lc-step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: rgba(255,255,255,.1); z-index: 0; }
.lc-step.done:not(:last-child)::after { background: rgba(16,185,129,.4); }

.tools-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.tools-head h3 { margin: 0; font: 800 14px var(--nav-font); color: #f1f5f9; }
.tools-head .th-note { font-size: 11.5px; color: #8295a8; }
/* cap the small hero kicker/section icons so they never balloon */
.next-step .ns-kicker svg, .tools-head svg, .lc-step svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Next-step hero layout + the connecting ORB ────────────────────────────── */
.next-step { display: flex; align-items: center; gap: 18px; }
.next-step .ns-body { flex: 1; min-width: 0; }
.next-orb { position: relative; width: 150px; height: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .next-orb { display: none; } }
.orb-core {
  width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a5f3ff 0%, #22d3ee 38%, #6d28d9 78%, #0b1020 100%);
  box-shadow: 0 0 34px rgba(34,211,238,.7), 0 0 70px rgba(217,70,239,.4), inset 0 0 22px rgba(255,255,255,.35);
  animation: orbBreath 6s ease-in-out infinite; position: relative; z-index: 2;
}
.orb-core::after { /* glossy highlight */
  content: ''; position: absolute; top: 12%; left: 20%; width: 34%; height: 28%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), transparent 70%); filter: blur(2px);
}
@keyframes orbBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.orb-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(34,211,238,.25); animation: orbSpin 18s linear infinite; }
.orb-ring.r1 { width: 104px; height: 104px; border-color: rgba(34,211,238,.35); }
.orb-ring.r2 { width: 134px; height: 134px; border-color: rgba(217,70,239,.22); border-style: dashed; animation-duration: 28s; animation-direction: reverse; }
.orb-ring.r3 { width: 150px; height: 150px; border-color: rgba(34,211,238,.10); animation-duration: 40s; }
@keyframes orbSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* pending = expanding "connecting" pulse ring + amber tint */
.next-orb[data-state="pending"] .orb-core { background: radial-gradient(circle at 35% 30%, #fde68a 0%, #22d3ee 45%, #6d28d9 82%, #0b1020 100%); box-shadow: 0 0 34px rgba(34,211,238,.6), 0 0 60px rgba(251,191,36,.35), inset 0 0 22px rgba(255,255,255,.3); }
.next-orb[data-state="pending"]::before, .next-orb[data-state="pending"]::after {
  content: ''; position: absolute; width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid rgba(34,211,238,.5); animation: orbPulse 2.4s ease-out infinite;
}
.next-orb[data-state="pending"]::after { animation-delay: 1.2s; }
@keyframes orbPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.0); opacity: 0; } }
.orb-label {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 800 9px var(--nav-font); letter-spacing: .1em; text-transform: uppercase; color: #67e8f9;
  background: rgba(6,13,24,.7); padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(34,211,238,.3);
}
.next-orb[data-state="pending"] .orb-label { color: #fcd34d; border-color: rgba(251,191,36,.35); }

/* ── Tool cards: tiers (live / hub / todo) + sync-bot launcher ──────────────── */
.script-card { position: relative; }
.script-card.todo { opacity: .5; filter: grayscale(.5); border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.script-card.todo:hover { transform: none; border-color: rgba(255,255,255,.12); }
.script-card.todo .sc-name { color: #94a3b8; }
.sc-state { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 999px; }
.sc-state.live { background: rgba(16,185,129,.16); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.sc-state.hub { background: rgba(99,102,241,.16); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
.sc-state.todo { background: rgba(148,163,184,.12); color: #94a3b8; border: 1px solid rgba(148,163,184,.25); }
/* the sync-bot — opens the Automation Builder for this tool */
.sc-bot {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3;
  border: 1px solid rgba(34,211,238,.3); background: rgba(34,211,238,.07); color: #67e8f9;
  transition: background .15s, border-color .15s, box-shadow .2s, transform .15s;
}
.sc-bot svg { width: 16px; height: 16px; }
.sc-bot:hover { background: rgba(34,211,238,.16); border-color: rgba(34,211,238,.6); box-shadow: 0 0 14px rgba(34,211,238,.3); transform: translateY(-1px); }
.script-card .sc-name { padding-right: 34px; }

/* ── Automation Builder (chained steps with connector lines) ────────────────── */
.modal.builder { max-width: 640px; }
.wfb-canvas {
  display: flex; flex-direction: column; gap: 0; margin: 4px 0 6px;
  max-height: 46vh; overflow-y: auto; padding: 6px 2px;
}
.wfb-step { display: flex; align-items: center; gap: 12px; position: relative; }
.wfb-node {
  flex: 1; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 13px;
  border: 1px solid rgba(34,211,238,.3); background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(217,70,239,.04));
  transition: border-color .2s, box-shadow .2s;
}
.wfb-node.running { border-color: rgba(34,211,238,.8); box-shadow: 0 0 22px rgba(34,211,238,.35); }
.wfb-node.done { border-color: rgba(16,185,129,.5); background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(16,185,129,.02)); }
.wfb-num { width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 800 11px var(--nav-font); background: rgba(34,211,238,.15); color: #67e8f9; border: 1px solid rgba(34,211,238,.35); }
.wfb-node.done .wfb-num { background: rgba(16,185,129,.16); color: #6ee7b7; border-color: rgba(16,185,129,.4); }
.wfb-info { flex: 1; min-width: 0; }
.wfb-info .wfb-name { font: 700 13px var(--nav-font); color: #f1f5f9; }
.wfb-info .wfb-desc { font-size: 10.5px; color: #94a3b8; }
.wfb-del { background: none; border: none; color: #64748b; cursor: pointer; font-size: 15px; padding: 4px; }
.wfb-del:hover { color: #fca5a5; }
.wfb-spin { width: 16px; height: 16px; border: 2px solid rgba(34,211,238,.3); border-top-color: #22d3ee; border-radius: 50%; animation: wfbSpin .7s linear infinite; }
@keyframes wfbSpin { to { transform: rotate(360deg); } }
/* connector line between steps */
.wfb-connector { height: 22px; margin-left: 27px; width: 2px; background: linear-gradient(180deg, rgba(34,211,238,.5), rgba(217,70,239,.3)); position: relative; }
.wfb-connector::after { content: ''; position: absolute; left: -3px; bottom: -1px; width: 8px; height: 8px; border-right: 2px solid rgba(217,70,239,.5); border-bottom: 2px solid rgba(217,70,239,.5); transform: rotate(45deg); }
.wfb-connector.flow::before { content: ''; position: absolute; left: -1px; top: 0; width: 4px; height: 8px; border-radius: 999px; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; animation: wfbFlow 1s ease-in-out infinite; }
@keyframes wfbFlow { 0% { top: 0; opacity: 0; } 30% { opacity: 1; } 100% { top: 14px; opacity: 0; } }
.wfb-add { width: 100%; margin-top: 4px; padding: 11px; border-radius: 12px; border: 1px dashed rgba(34,211,238,.35); background: rgba(34,211,238,.03); color: #67e8f9; font: 700 12.5px var(--nav-font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.wfb-add:hover { border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.08); }
.wfb-add svg { width: 14px; height: 14px; }
/* mini workflow preview (in Automations list / Jobs) */
.wf-mini { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.wf-mini .wm-box { font: 700 10px var(--nav-font); color: #a5f3ff; padding: 3px 8px; border-radius: 7px; border: 1px solid rgba(34,211,238,.25); background: rgba(34,211,238,.06); }
.wf-mini .wm-box.done { color: #6ee7b7; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); }
.wf-mini .wm-box.running { border-color: rgba(34,211,238,.8); box-shadow: 0 0 12px rgba(34,211,238,.4); }
.wf-mini .wm-arrow { color: #475569; font-size: 11px; }

/* ── Jobs page: full workflow canvas ───────────────────────────────────────── */
.jobs-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 940px) { .jobs-grid { grid-template-columns: 1fr; } }
.canvas-panel .wfb-canvas { max-height: none; }
.canvas-panel .wfb-node { cursor: grab; padding: 14px 16px; }
.canvas-panel .wfb-node:active { cursor: grabbing; }
.canvas-panel .wfb-node.drag-over { border-color: rgba(34,211,238,.85); box-shadow: 0 0 0 2px rgba(34,211,238,.3); }
.canvas-panel .wfb-name { font-size: 14px; }
.wf-grip { color: #475569; font-size: 15px; line-height: 1; cursor: grab; user-select: none; }
.wf-add-sel { margin-top: 10px; }
.canvas-empty { text-align: center; color: #64748b; font-size: 13px; padding: 28px 16px; border: 1px dashed rgba(255,255,255,.12); border-radius: 13px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.canvas-empty b { color: #67e8f9; }
.canvas-empty p { margin: 0; }
.canvas-empty-robot { width: 80px; height: auto; filter: invert(1) opacity(0.18) sepia(1) saturate(4) hue-rotate(180deg); animation: robotBob 4s ease-in-out infinite; }
@keyframes robotBob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }

/* ── Stage cards (one primary tool + advanced sub-settings) ─────────────────── */
.stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .stage-grid { grid-template-columns: 1fr; } }
.stage-card {
  border-radius: 16px; padding: 16px 18px; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) padding-box,
              linear-gradient(135deg, rgba(34,211,238,.3), rgba(217,70,239,.16) 55%, rgba(255,255,255,.05)) border-box;
  border: 1px solid transparent; box-shadow: 0 12px 30px rgba(0,0,0,.4);
  transition: transform .14s, box-shadow .2s;
}
.stage-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 26px rgba(34,211,238,.12); }
.stage-top { display: flex; align-items: flex-start; gap: 13px; }
.stage-ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #67e8f9; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.25); }
.stage-ico svg { width: 20px; height: 20px; }
.stage-meta { flex: 1; min-width: 0; padding-right: 34px; }
.stage-name { font: 800 16px var(--nav-font); color: #f1f5f9; display: flex; align-items: center; gap: 8px; }
.stage-desc { font-size: 12px; color: #9fb1c4; line-height: 1.5; margin-top: 3px; }
.stage-adv { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 13px 0 14px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.1); }
.adv-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #5b6b80; display: flex; align-items: center; gap: 5px; }
.adv-lbl svg { width: 12px; height: 12px; }
.adv-chip { font: 700 11px var(--nav-font); padding: 4px 10px; border-radius: 999px; cursor: pointer; color: #a5b4cc; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); transition: border-color .15s, color .15s, background .15s; }
.adv-chip:hover { border-color: rgba(34,211,238,.5); color: #a5f3ff; background: rgba(34,211,238,.07); }
.stage-actions { display: flex; gap: 10px; }
.stage-actions .app-btn { flex: 1; }

/* ── Lister overlay (embeds the real BulkLister extension page) ─────────────── */
.lister-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(2,5,12,.82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 22px; }
.lister-frame { width: 94vw; height: 90vh; max-width: 1300px; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid rgba(34,211,238,.3); background: #04060e; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lister-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,13,24,.7); }
.lb-title { font: 800 13px var(--nav-font); color: #e8f2f8; display: flex; align-items: center; gap: 8px; }
.lb-title svg { width: 16px; height: 16px; color: #67e8f9; }
.lister-body { flex: 1; min-height: 0; background: #0a0f1c; }
.lister-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.lo-missing { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: #94a3b8; padding: 30px; }
.lo-missing svg { width: 40px; height: 40px; color: #64748b; }
.lo-missing h3 { margin: 0; font: 800 16px var(--nav-font); color: #e8f2f8; }
.lo-missing p { margin: 0; font-size: 13px; max-width: 360px; line-height: 1.55; }

/* ── Audit-agent toggle (always-on protector) ──────────────────────────────── */
.audit-toggle { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--nav-font); padding: 5px 11px; border-radius: 999px; cursor: pointer; border: 1px solid; transition: background .15s, border-color .15s, box-shadow .2s; }
.audit-toggle svg { width: 14px; height: 14px; }
.audit-toggle.on { border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.1); color: #6ee7b7; box-shadow: 0 0 14px rgba(16,185,129,.15); }
.audit-toggle.off { border-color: rgba(148,163,184,.35); background: rgba(148,163,184,.08); color: #94a3b8; }
.audit-toggle b { font-weight: 800; }

/* ── Physical Node Cluster (Devices page V4 — Premium) ───────────────────── */
.node-cluster-shell { display: grid; gap: 16px; }
.cluster-onboarding { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 15px 16px; border: 1px solid rgba(58,186,255,.28); border-radius: 16px; background: linear-gradient(120deg, rgba(16,35,48,.96), rgba(10,18,27,.96)); }
.cluster-onboarding .shield-orb { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(99,220,255,.24), rgba(18,45,62,.85)); border: 1px solid rgba(88,201,255,.35); color: #7fe7ff; }
.cluster-onboarding strong { display: block; font-size: 12px; color: #e2f0f8; }
.cluster-onboarding span { display: block; margin-top: 4px; color: #64748b; font-size: 10px; }
.cluster-stats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; background: rgba(10,16,22,.82); }
.cluster-stat { padding: 14px 15px; border-right: 1px solid rgba(255,255,255,.06); min-width: 0; }
.cluster-stat:last-child { border-right: 0; }
.cluster-stat label { display: block; color: #56656f; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.cluster-stat strong { display: block; margin-top: 6px; font-size: 19px; font-family: ui-monospace, monospace; color: #c4d0d5; }
.cluster-stat small { display: block; margin-top: 3px; color: #64748b; font-size: 8.5px; }
.cluster-stat .good { color: #4ce3bd; } .cluster-stat .bad { color: #ff7d72; }
.cluster-workspace { display: grid; grid-template-columns: minmax(0,1fr) 355px; gap: 16px; align-items: start; }

/* ── Clean node strip — bright, readable, always visible ── */
.node-strip { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.nstrip-card { width: 300px; background: #1a1f2b; border: 1px solid rgba(120,160,200,.25); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.nstrip-card:hover { border-color: #5b8cff; transform: translateY(-2px); }
.nstrip-card.on { border-left: 3px solid #4ade80; }
.nstrip-card.off { border-left: 3px solid #6b7280; opacity: .7; }
/* Ownership rule: MY machine (matched by IP) glows white. Remote/others stay teal. */
.nstrip-card.mine { border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 22px rgba(255,255,255,.14); }
.nstrip-card.mine:hover { border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 28px rgba(255,255,255,.22); }
.nstrip-you { display: inline-block; margin-left: 6px; padding: 1px 6px; font: 700 9px var(--nav-font); letter-spacing: .12em; color: #10131a; background: #fff; border-radius: 4px; vertical-align: middle; }
.nstrip-scr { position: relative; width: 100%; height: 168px; background: #0a0e14; display: flex; align-items: center; justify-content: center; }
.nstrip-scr canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.nstrip-live { position: absolute; top: 8px; right: 8px; background: rgba(239,68,68,.9); color: #fff; font: 700 9px var(--nav-font); letter-spacing: .1em; padding: 2px 7px; border-radius: 4px; }
.nstrip-noscr { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #8a93a3; font-size: 11px; }
.nstrip-noscr svg { width: 28px; height: 28px; opacity: .5; }
.nstrip-info { padding: 10px 12px; }
.nstrip-name { font: 700 14px var(--nav-font); color: #f4f6fa; letter-spacing: .04em; }
.nstrip-meta { font-size: 11px; color: #b4bcca; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.nstrip-dot { width: 7px; height: 7px; border-radius: 50%; }
.nstrip-dot.on { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.nstrip-dot.off { background: #6b7280; }

/* ── Node stage shell ── */
.node-stage { position: relative; padding: 24px 20px 0; border: 1px solid rgba(80,119,145,.22); border-radius: 18px; background: linear-gradient(180deg, rgba(8,14,20,.97), rgba(4,9,15,.99)); overflow: hidden; }
.node-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(78,116,145,.2) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 82%); pointer-events: none; }

/* ── Node row (horizontal scrolling flex) ── */
.node-row { position: relative; z-index: 1; display: flex; gap: 18px; align-items: flex-end; overflow-x: auto; padding-bottom: 0; scrollbar-width: none; }
.node-row::-webkit-scrollbar { display: none; }

/* ── Cluster connection rail ── */
.cluster-rail { position: relative; height: 52px; margin: 0 -20px; }
.cluster-rail-track { position: absolute; left: 4%; right: 4%; top: 18px; height: 2px; background: linear-gradient(90deg, transparent, #0d3650 6%, #1a8bff 25%, #0ccfff 50%, #1a8bff 75%, #0d3650 94%, transparent); box-shadow: 0 0 18px rgba(12,207,255,.38), 0 0 4px rgba(12,207,255,.6); border-radius: 2px; }
.cluster-rail-pulse { position: absolute; top: 15px; height: 8px; width: 36px; border-radius: 4px; background: linear-gradient(90deg, transparent, rgba(0,240,255,.8), transparent); animation: railTravel 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes railTravel { 0% { left: 2%; opacity: 0; } 8% { opacity: .7; } 92% { opacity: .7; } 100% { left: 94%; opacity: 0; } }
.cluster-rail-label { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 7px; letter-spacing: .22em; text-transform: uppercase; color: rgba(80,100,180,.5); white-space: nowrap; }

/* ══ NODE UNIT — premium chassis ══════════════════════════════════════════ */
.node-unit {
  --nu-accent: #18bfff; --nu-accent2: #0099e6; --nu-status: #47e6a2;
  --nu-glow: rgba(24,191,255,.32); --nu-dim: rgba(24,191,255,.1);
  --nu-border: rgba(60,120,160,.45);
  width: 210px; flex-shrink: 0; cursor: pointer; outline: none;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .25s cubic-bezier(.22,.68,0,1.2);
}
.node-unit:hover { transform: translateY(-5px); }
.node-unit:focus-visible .node-chassis { outline: 2px solid var(--nu-accent); outline-offset: 3px; }

/* State color vars */
.node-unit[data-state="online"]       { --nu-accent:#18bfff; --nu-accent2:#0099e6; --nu-status:#47e6a2; --nu-glow:rgba(24,191,255,.32); --nu-dim:rgba(24,191,255,.1); --nu-border:rgba(60,140,180,.45); }
.node-unit[data-state="offline"]      { --nu-accent:#ff4f68; --nu-accent2:#cc2640; --nu-status:#ff4f68; --nu-glow:rgba(255,79,104,.22); --nu-dim:rgba(255,79,104,.08); --nu-border:rgba(150,50,70,.4); }
.node-unit[data-state="disconnected"] { --nu-accent:#ff8c42; --nu-accent2:#d06020; --nu-status:#ffb14a; --nu-glow:rgba(255,140,66,.18); --nu-dim:rgba(255,140,66,.07); --nu-border:rgba(140,80,30,.35); }
.node-unit[data-state="connecting"]   { --nu-accent:#7b5cff; --nu-accent2:#5535e0; --nu-status:#9d80ff; --nu-glow:rgba(123,92,255,.28); --nu-dim:rgba(123,92,255,.1); --nu-border:rgba(100,70,200,.4); }
.node-unit[data-root="true"]          { --nu-accent:#18E4FF; --nu-accent2:#00b8d4; --nu-status:#4ce3bd; --nu-glow:rgba(24,228,255,.38); --nu-dim:rgba(24,228,255,.13); --nu-border:rgba(24,228,255,.35); }

/* Chassis outer body */
.node-chassis {
  position: relative; width: 210px;
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(158deg, #1c2c3a 0%, #0e1824 35%, #080f19 70%, #06101a 100%);
  border: 1px solid var(--nu-border);
  box-shadow: 0 26px 52px rgba(0,0,0,.62), 0 8px 20px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(180,220,255,.06), inset 0 -1px 0 rgba(0,0,0,.55),
    inset 9px 0 20px rgba(0,0,0,.3), inset -9px 0 20px rgba(0,0,0,.3);
  overflow: visible; transition: box-shadow .28s ease;
}
.node-unit:hover .node-chassis {
  box-shadow: 0 32px 60px rgba(0,0,0,.7), 0 8px 20px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(180,220,255,.1), inset 0 -1px 0 rgba(0,0,0,.55),
    inset 9px 0 20px rgba(0,0,0,.25), inset -9px 0 20px rgba(0,0,0,.25),
    0 0 0 1px var(--nu-accent), 0 0 30px var(--nu-glow);
}

/* Left/right edge bevel rails */
.node-chassis::before, .node-chassis::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 7px; border-radius: 4px; pointer-events: none; z-index: 1; }
.node-chassis::before { left: 0; background: linear-gradient(180deg, #3e5a70 0%, #1e3245 12%, #0d1e2e 50%, #1e3347 88%, #3c5568 100%); border-right: 1px solid rgba(80,120,150,.22); }
.node-chassis::after  { right: 0; background: linear-gradient(180deg, #2e4558 0%, #152331 12%, #09141f 50%, #152233 88%, #2b4254 100%); border-left: 1px solid rgba(60,100,130,.18); }

/* Top accent glow bar */
.node-top-bar { position: absolute; top: 0; left: 16%; right: 16%; height: 3px; background: var(--nu-accent); box-shadow: 0 0 20px var(--nu-accent), 0 0 8px var(--nu-accent); border-radius: 0 0 3px 3px; z-index: 3; pointer-events: none; }
.node-unit[data-state="offline"] .node-top-bar,
.node-unit[data-state="disconnected"] .node-top-bar { box-shadow: 0 0 10px var(--nu-accent); }

/* Inner screen cavity */
.node-inner {
  margin: 3px 7px 0; min-height: 480px; padding: 18px 14px 78px;
  background: linear-gradient(175deg, #091521 0%, #050c17 40%, #030a12 100%);
  border-left: 1px solid rgba(50,85,110,.14); border-right: 1px solid rgba(50,85,110,.14);
  border-radius: 0 0 10px 10px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
}
.node-inner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.055) 0px, rgba(0,0,0,.055) 1px, transparent 1px, transparent 4px); opacity: .55; }

/* Glass reflection */
.node-refl { position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(148deg, rgba(160,210,255,.015) 0%, transparent 60%); pointer-events: none; z-index: 0; transition: opacity .3s; }
.node-unit:hover .node-refl { animation: nodeSheen 1s ease-out both; }
@keyframes nodeSheen { from { transform: translateX(-120%) skewX(-8deg); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(140%) skewX(-8deg); opacity: 0; } }

/* ── Top section: emblem + energy line + status ── */
.nu-top { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; z-index: 1; }

/* Emblem ring */
.nu-emblem {
  width: 56px; height: 56px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 38% 30%, rgba(24,191,255,.14) 0%, rgba(6,14,24,.92) 65%);
  border: 1.5px solid rgba(var(--nu-border-rgb, 60,140,180),.35);
  display: grid; place-items: center; flex-shrink: 0;
}
.nu-emblem { border-color: var(--nu-border); }
.nu-emblem::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid var(--nu-accent); border-top-color: transparent; border-left-color: transparent; border-radius: 50%; opacity: .4; animation: emblSpin 8s linear infinite; }
@keyframes emblSpin { to { transform: rotate(360deg); } }
.node-unit[data-state="connecting"] .nu-emblem::after { animation-duration: 1.1s; opacity: .85; border-width: 2px; border-right-color: transparent; }
.nu-emblem-s { font-size: 20px; font-weight: 900; color: var(--nu-accent); text-shadow: 0 0 16px var(--nu-accent); font-family: ui-monospace, monospace; }

/* Vertical energy line */
.nu-eline { width: 2px; height: 16px; background: linear-gradient(to bottom, var(--nu-accent), transparent); opacity: .55; }
.node-unit[data-state="offline"] .nu-eline,
.node-unit[data-state="disconnected"] .nu-eline { opacity: .15; }

/* Status */
.nu-status-row { display: flex; align-items: center; gap: 5px; }
.nu-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nu-status); box-shadow: 0 0 8px var(--nu-status); flex-shrink: 0; }
.node-unit[data-state="online"] .nu-dot,
.node-unit[data-root="true"] .nu-dot { animation: dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 6px var(--nu-status); } 50% { box-shadow: 0 0 14px var(--nu-status), 0 0 24px var(--nu-status); } }
.node-unit[data-state="connecting"] .nu-dot { animation: dotBlink 0.9s step-end infinite; }
@keyframes dotBlink { 50% { opacity: 0; } }
.nu-status-text { font-size: 7.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--nu-status); font-family: ui-monospace, monospace; }

/* ── Identity ── */
.nu-id { text-align: center; position: relative; z-index: 1; }
.nu-name { margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .13em; color: #d8eef8; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nu-type { font-size: 7.5px; color: var(--nu-accent); letter-spacing: .16em; text-transform: uppercase; opacity: .75; margin-bottom: 5px; }
.nu-ip-row { display: inline-flex; align-items: center; gap: 4px; }
.nu-ip { font-size: 8.5px; color: #3d5c72; font-family: ui-monospace, monospace; }
.nu-copyip { background: none; border: none; color: #2e4a5e; cursor: pointer; font-size: 11px; line-height: 1; padding: 0 1px; transition: color .14s; }
.nu-copyip:hover { color: var(--nu-accent); }

/* ── Metrics ── */
.nu-metrics { display: flex; flex-direction: column; gap: 9px; position: relative; z-index: 1; flex: 1; }
.nu-metric-hd { display: flex; justify-content: space-between; align-items: center; }
.nu-metric-hd span { font-size: 8.5px; color: #3e5a6e; text-transform: uppercase; letter-spacing: .08em; }
.nu-metric-hd strong { font-size: 9px; color: #8ab8cc; }
.nu-leds { display: flex; gap: 2px; margin-top: 4px; }
.nu-led { width: 10px; height: 4px; border-radius: 1.5px; background: #0d1e2b; transition: background .35s, box-shadow .35s; }
.nu-led.on { background: var(--nu-accent); box-shadow: 0 0 7px var(--nu-accent); }
.node-unit[data-root="true"] .nu-led.on { background: #4ce3bd; box-shadow: 0 0 7px rgba(76,227,189,.7); }
.node-unit[data-state="connecting"] .nu-led { animation: connectLed 1.3s ease-in-out infinite; }
.node-unit[data-state="connecting"] .nu-led:nth-child(2) { animation-delay: .13s; }
.node-unit[data-state="connecting"] .nu-led:nth-child(3) { animation-delay: .26s; }
.node-unit[data-state="connecting"] .nu-led:nth-child(4) { animation-delay: .39s; }
.node-unit[data-state="connecting"] .nu-led:nth-child(5) { animation-delay: .52s; }
@keyframes connectLed { 0%,100% { opacity: .18; } 50% { opacity: 1; } }
.nu-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.nu-row:last-child { border-bottom: 0; }
.nu-row span { font-size: 9px; color: #3a5262; }
.nu-row strong { font-size: 9.5px; color: #8ab0c4; font-weight: 700; }

/* ── Action area ── */
.nu-action { position: absolute; left: 14px; right: 14px; bottom: 48px; z-index: 3; }
.nu-btn {
  width: 100%; padding: 8px 0; font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 9px; cursor: pointer;
  background: rgba(24,140,200,.11); color: var(--nu-accent);
  border: 1px solid rgba(24,140,200,.28); transition: background .18s, box-shadow .18s, transform .1s;
}
.nu-btn:hover { background: rgba(24,140,200,.2); box-shadow: 0 0 16px var(--nu-dim); }
.nu-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.node-unit[data-state="offline"] .nu-btn { color: #ff8090; border-color: rgba(255,79,104,.3); background: rgba(255,79,104,.08); }
.node-unit[data-state="offline"] .nu-btn:hover { background: rgba(255,79,104,.14); }
.node-unit[data-state="disconnected"] .nu-btn { color: #ffaa60; border-color: rgba(255,140,66,.3); background: rgba(255,140,66,.08); }

/* ── Hardware strip ── */
.nu-hw { position: absolute; left: 7px; right: 7px; bottom: 0; height: 48px; background: linear-gradient(180deg, rgba(5,10,18,.85), #040b14); border-top: 1px solid rgba(40,70,90,.35); border-radius: 0 0 10px 10px; display: flex; align-items: center; padding: 0 12px; gap: 8px; z-index: 2; }
.nu-hw-ring { width: 13px; height: 13px; border-radius: 50%; background: #07121e; border: 1.5px solid #1a3347; }
.nu-hw-sq { width: 11px; height: 9px; border-radius: 2px; background: #07121e; border: 1.5px solid #1a3347; }
.nu-hw-dots { margin-left: auto; display: flex; flex-direction: column; gap: 3px; }
.nu-hw-dots span { width: 3px; height: 3px; border-radius: 50%; background: #1f3448; display: block; }

/* ── Connector to rail ── */
.nu-sock { display: flex; flex-direction: column; align-items: center; width: 210px; height: 52px; flex-shrink: 0; }
.nu-sock-line { width: 2px; flex: 1; background: var(--nu-accent); box-shadow: 0 0 8px var(--nu-accent); opacity: .65; }
.nu-sock-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--nu-accent); border: 3px solid #06101a; box-shadow: 0 0 16px var(--nu-accent); position: relative; z-index: 2; }
.node-unit[data-state="offline"] .nu-sock-line { opacity: .25; box-shadow: none; }
.node-unit[data-state="offline"] .nu-sock-dot { background: var(--nu-accent); box-shadow: 0 0 8px rgba(255,79,104,.3); }
.node-unit[data-state="disconnected"] .nu-sock-line { background: repeating-linear-gradient(to bottom, var(--nu-accent) 0 4px, transparent 4px 8px); box-shadow: none; opacity: .4; }
.node-unit[data-state="disconnected"] .nu-sock-dot { background: #1a1208; border-color: rgba(255,140,66,.35); box-shadow: none; }
.node-unit[data-state="connecting"] .nu-sock-line { animation: sockPulse 1.1s ease-in-out infinite; }
@keyframes sockPulse { 0%,100% { opacity: .2; } 50% { opacity: .9; } }

/* ── Add Node slot ── */
.node-add-slot { width: 210px; flex-shrink: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.node-add-chassis {
  width: 210px; min-height: 480px; border: 1.5px dashed rgba(70,120,150,.22); border-radius: 18px 18px 14px 14px;
  background: linear-gradient(180deg, rgba(10,18,28,.35), rgba(5,10,17,.28));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: border-color .22s, background .22s, box-shadow .22s; position: relative; overflow: hidden;
}
.node-add-slot:hover .node-add-chassis { border-color: rgba(24,191,255,.45); background: rgba(10,28,44,.5); box-shadow: 0 0 32px rgba(24,191,255,.1); }
.nu-add-icon { width: 54px; height: 54px; border-radius: 50%; border: 1.5px dashed rgba(70,120,150,.3); display: grid; place-items: center; color: rgba(70,130,170,.45); font-size: 22px; transition: border-color .22s, color .22s, box-shadow .22s; }
.node-add-slot:hover .nu-add-icon { border-color: rgba(24,191,255,.5); color: #18bfff; box-shadow: 0 0 18px rgba(24,191,255,.18); }
.nu-add-label { font-size: 10.5px; font-weight: 800; letter-spacing: .15em; color: rgba(70,120,150,.5); text-transform: uppercase; transition: color .22s; }
.node-add-slot:hover .nu-add-label { color: #5ad0ee; }
.nu-add-sub { font-size: 8.5px; color: rgba(50,80,100,.55); text-align: center; line-height: 1.55; padding: 0 22px; transition: color .22s; }
.node-add-slot:hover .nu-add-sub { color: rgba(50,130,170,.65); }
.nu-add-sock-line { width: 2px; flex: 1; background: rgba(50,90,120,.18); }
.nu-add-sock-dot { width: 13px; height: 13px; border-radius: 50%; background: #0a1825; border: 2px solid rgba(50,90,120,.3); }
.node-add-slot:hover .nu-add-sock-line { background: rgba(24,191,255,.25); }
.node-add-slot:hover .nu-add-sock-dot { border-color: rgba(24,191,255,.4); box-shadow: 0 0 10px rgba(24,191,255,.2); }

/* ── Parametric chassis SVG overlay ── */
.nu-chassis-svg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden; border-radius: inherit;
  opacity: 0.22;
  transition: opacity .28s ease;
  isolation: isolate;
}
.nu-chassis-svg svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.node-unit:hover .nu-chassis-svg { opacity: 0.38; }
.node-unit[data-root="true"] .nu-chassis-svg { opacity: 0.28; }
.node-unit[data-state="offline"] .nu-chassis-svg,
.node-unit[data-state="disconnected"] .nu-chassis-svg { opacity: 0.12; }
.node-inner { position: relative; z-index: 1; }
.node-top-bar { z-index: 3; }

/* Stagger entrance */
@keyframes nuIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.node-unit, .node-add-slot { animation: nuIn .45s ease-out both; }
.node-unit:nth-child(1) { animation-delay: .04s; } .node-unit:nth-child(2) { animation-delay: .1s; }
.node-unit:nth-child(3) { animation-delay: .16s; } .node-unit:nth-child(4) { animation-delay: .22s; }
.node-add-slot { animation-delay: .28s; }

/* ── Side panel (setup + type override) ── */
.node-setup-panel { padding: 18px; border: 1px solid rgba(80,143,184,.28); border-radius: 18px; background: linear-gradient(160deg, rgba(15,29,42,.97), rgba(8,15,24,.98)); box-shadow: 0 22px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035); }
.node-setup-panel .panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.node-setup-panel h3 { margin: 0; font-size: 14px; color: #e2f0f8; display: flex; align-items: center; gap: 8px; }
.node-setup-panel h3 svg { width: 16px; height: 16px; flex-shrink: 0; }
.node-setup-panel > p { margin: 7px 0 0; color: #64748b; font-size: 9.5px; line-height: 1.55; }
.setup-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 17px; }
.setup-tab { min-height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(16,26,36,.8); color: #64748b; font-size: 9px; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.setup-tab.active { color: #72e4ff; border-color: rgba(56,205,255,.42); background: rgba(25,115,153,.14); }
.command-box { margin-top: 12px; padding: 12px; border: 1px solid rgba(47,180,223,.24); border-radius: 12px; background: rgba(5,11,16,.9); }
.command-box code { display: block; color: #a9e9ff; font-size: 8px; white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, monospace; line-height: 1.6; }
.command-box .copy-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.command-progress { height: 3px; flex: 1; border-radius: 9px; background: linear-gradient(90deg, #35d7ff, #5b7cff, #b256ff); animation: cmdPulse 2.5s ease-in-out infinite; }
.secure-note { margin-top: 12px; padding: 11px; border: 1px solid rgba(55,216,169,.2); border-radius: 11px; background: rgba(20,111,83,.10); color: #7ee8c4; font-size: 8.5px; line-height: 1.5; }
.setup-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.setup-benefit { padding: 9px 6px; text-align: center; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(11,20,28,.8); }
.setup-benefit strong { display: block; font-size: 8px; color: #c4d0d5; }
.setup-benefit span { display: block; margin-top: 3px; color: #64748b; font-size: 7.5px; }
.activity-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 14px; }
.activity-chip { padding: 11px; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: rgba(9,16,22,.8); }
.activity-chip strong { display: block; font-size: 9px; color: #c4d0d5; }
.activity-chip span { display: block; margin-top: 4px; color: #64748b; font-size: 8px; }
.activity-chip time { display: block; margin-top: 3px; color: #56656f; font-size: 7.5px; }

/* ── Node Detail Modal ── */
.ndm-bg { position: fixed; inset: 0; z-index: 200; background: rgba(4,8,14,.75); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ndmBgIn .18s ease-out both; }
@keyframes ndmBgIn { from { opacity: 0; } }
.ndm { background: linear-gradient(160deg, #0d1a24 0%, #070f1a 100%); border: 1px solid rgba(80,120,150,.3); border-radius: 12px; width: 100%; max-width: 700px; max-height: 88vh; overflow-y: auto; overflow-x: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.045); position: relative; animation: ndmIn .22s ease-out both; }
.ndm.ndm-screen { max-width: none; width: 96vw; height: 94vh; max-height: none; display: flex; flex-direction: column; border-radius: 0; overflow: hidden; }
@keyframes ndmIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.ndm-hdr { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.06); position: sticky; top: 0; z-index: 10; background: rgba(10,18,26,.96); backdrop-filter: blur(12px); flex-shrink: 0; }
.ndm-hdr-l { display: flex; align-items: center; gap: 14px; }
.ndm-emblem { width: 40px; height: 40px; border-radius: 11px; background: radial-gradient(circle at 38% 32%, rgba(24,191,255,.18), rgba(6,14,22,.9)); border: 1px solid rgba(24,191,255,.3); display: grid; place-items: center; color: #18bfff; font-size: 16px; font-weight: 900; font-family: ui-monospace, monospace; flex-shrink: 0; }
.ndm-title h2 { margin: 0 0 3px; font-size: 14px; font-weight: 800; letter-spacing: .1em; color: #e0f0fa; }
.ndm-meta { display: flex; align-items: center; gap: 8px; }
.ndm-sdot { width: 6px; height: 6px; border-radius: 50%; background: #47e6a2; box-shadow: 0 0 8px #47e6a2; flex-shrink: 0; }
.ndm-sdot.off { background: #ff4f68; box-shadow: 0 0 8px #ff4f68; }
.ndm-stext { font-size: 9.5px; color: #7ab8cc; font-family: ui-monospace, monospace; }
.ndm-ip { font-size: 9px; color: #3d5a6e; font-family: ui-monospace, monospace; }
.ndm-x { width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #5a7888; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; }
.ndm-x:hover { background: rgba(255,80,100,.12); color: #ff7080; border-color: rgba(255,80,100,.25); }
.ndm-x svg { width: 13px; height: 13px; }
.ndm-vp { margin: 0; aspect-ratio: 16/9; border-radius: 0; background: #030810; border: none; border-bottom: 1px solid rgba(255,255,255,.065); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 1; min-height: 0; position: relative; }
.ndm-screen .ndm-vp { aspect-ratio: unset; }
.ndm-vp:fullscreen, .ndm-vp:-webkit-full-screen { background: #000; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
.ndm-vp:fullscreen canvas, .ndm-vp:-webkit-full-screen canvas { width: 100%; height: 100%; object-fit: contain; }
.ndm-vp-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #243545; }
.ndm-vp-inner svg { width: 26px; height: 26px; }
.ndm-vp-inner span { font-size: 11px; letter-spacing: .08em; }
.ndm-ctrls { display: flex; gap: 7px; padding: 10px 16px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.04); flex-shrink: 0; }
.ndm-ctrl { padding: 7px 13px; font-size: 10px; font-weight: 700; letter-spacing: .06em; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04); color: #80a8bc; transition: background .15s, color .15s, box-shadow .15s; }
.ndm-ctrl:hover { background: rgba(24,191,255,.1); color: #18bfff; border-color: rgba(24,191,255,.28); }
.ndm-ctrl.pri { background: rgba(24,191,255,.13); color: #18bfff; border-color: rgba(24,191,255,.35); }
.ndm-ctrl.pri:hover { background: rgba(24,191,255,.22); box-shadow: 0 0 14px rgba(24,191,255,.2); }
.ndm-ctrl.dng { color: #ff7080; border-color: rgba(255,79,104,.22); }
.ndm-ctrl.dng:hover { background: rgba(255,79,104,.1); }
.ndm-tabs { display: flex; gap: 0; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ndm-tab { padding: 8px 14px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; background: none; border: none; color: #3a5568; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.ndm-tab.on { color: #18bfff; border-bottom-color: #18bfff; }
.ndm-body { padding: 18px 22px 22px; }
.ndm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 14px; }
.ndm-kv { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 8px; padding: 8px 12px; }
.ndm-kv label { display: block; font-size: 8px; color: #314454; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.ndm-kv span { font-size: 11px; color: #7aafc4; font-family: ui-monospace, monospace; word-break: break-all; }

/* Keyframes */
@keyframes cmdPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes emblSpin2 { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 1280px) { .cluster-workspace { grid-template-columns: 1fr; } .node-setup-panel { position: relative; } }
@media (max-width: 900px) { .activity-ribbon { grid-template-columns: repeat(2, 1fr); } .cluster-stats { grid-template-columns: repeat(3, 1fr); } .cluster-stat:nth-child(3) { border-right: 0; } }
@media (max-width: 640px) { .node-unit, .node-add-slot, .node-chassis, .node-add-chassis { width: 180px; } .nu-sock, .nu-add-sock { width: 180px; } .ndm { border-radius: 16px 16px 0 0; } .ndm-bg { align-items: flex-end; padding: 0; } .ndm-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .node-unit, .node-add-slot { animation: none !important; } .node-unit:hover { transform: none; } .node-unit:hover .node-refl { animation: none; } .nu-dot { animation: none !important; } .nu-emblem::after { animation: none !important; } .cluster-rail-pulse { animation: none; } .nu-led { animation: none !important; } .nu-sock-line { animation: none !important; } }

/* ═══════════════════════════════════════════════════════════════════
   AXIS ROBOT CHARACTER — animated AI agent mascot
   State classes: [data-state="ok"|"warn"|"critical"]
   ═══════════════════════════════════════════════════════════════════ */
.axis-char {
  --axis-eye: #22d3ee;
  position: relative;
  width: 108px;
  height: 148px;
  margin: 4px auto 6px;
  animation: axisFloat 3.4s ease-in-out infinite;
  cursor: default;
}
.axis-char[data-state="warn"]     { --axis-eye: #f59e0b; }
.axis-char[data-state="critical"] { --axis-eye: #ef4444; }
/* Ambient glow */
.axis-char::before {
  content: '';
  position: absolute;
  inset: -24px;
  background: radial-gradient(ellipse 70% 70%, var(--axis-eye) 0%, transparent 68%);
  opacity: 0.07;
  border-radius: 50%;
  animation: axisAmbient 3.4s ease-in-out infinite;
  pointer-events: none;
}
/* Pulse rings */
.axis-ring {
  position: absolute;
  top: 56px; left: 54px;
  border-radius: 50%;
  border: 1px solid var(--axis-eye);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.axis-ring.r1 { width: 100px; height: 100px; animation: axisRing 3.4s ease-out infinite; }
.axis-ring.r2 { width: 138px; height: 138px; animation: axisRing 3.4s ease-out 1.1s infinite; }

/* Ground shadow */
.axis-shadow {
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 68px; height: 10px;
  background: radial-gradient(ellipse, var(--axis-eye) 0%, transparent 70%);
  opacity: 0.14;
  border-radius: 50%;
  pointer-events: none;
  animation: axisShadow 3.4s ease-in-out infinite;
}
.axis-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
}
/* ── HEAD ── */
.axis-head {
  position: relative; flex-shrink: 0;
  width: 66px; height: 62px;
  background: linear-gradient(148deg, #1e3d64 0%, #0e2038 55%, #091628 100%);
  border-radius: 33px 33px 18px 18px;
  border: 1.5px solid rgba(148,210,237,0.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 18px rgba(34,211,238,0.07),
    0 5px 14px rgba(0,0,0,0.55);
}
/* Head highlight sheen */
.axis-head::before {
  content: '';
  position: absolute;
  top: 7px; left: 10px; right: 10px;
  height: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
}
/* Antenna stem */
.axis-antenna {
  position: absolute;
  top: -18px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 18px;
  background: linear-gradient(180deg, #4a9fd4 0%, #1f4d72 100%);
  border-radius: 2px 2px 0 0;
}
.axis-ant-dot {
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px;
  background: var(--axis-eye);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--axis-eye), 0 0 14px var(--axis-eye);
  animation: axisEyeGlow 1.8s ease-in-out infinite;
}
/* Visor / eye band */
.axis-visor {
  position: absolute;
  top: 19px; left: 6px; right: 6px;
  height: 22px;
  background: linear-gradient(180deg, #050f1c 0%, #071728 100%);
  border-radius: 8px;
  border: 1px solid rgba(34,211,238,0.1);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; gap: 11px;
}
.axis-eye {
  width: 14px; height: 7px;
  background: var(--axis-eye);
  border-radius: 3px;
  box-shadow: 0 0 6px var(--axis-eye), 0 0 14px var(--axis-eye), 0 0 26px var(--axis-eye);
  animation: axisEyeGlow 1.8s ease-in-out infinite;
}
/* Chin speaker grille */
.axis-chin {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 4px;
  background: repeating-linear-gradient(90deg,
    rgba(34,211,238,0.3) 0px, rgba(34,211,238,0.3) 2px,
    transparent 2px, transparent 5px);
  border-radius: 2px;
  opacity: 0.7;
}
/* ── NECK ── */
.axis-neck {
  flex-shrink: 0;
  width: 22px; height: 7px;
  background: linear-gradient(180deg, #162d45 0%, #0e1f33 100%);
  border-left: 1px solid rgba(148,210,237,0.1);
  border-right: 1px solid rgba(148,210,237,0.1);
}
/* ── TORSO ── */
.axis-torso {
  position: relative; flex-shrink: 0;
  width: 80px; height: 52px;
  background: linear-gradient(148deg, #1a3354 0%, #0e1f32 58%, #081624 100%);
  border-radius: 13px 13px 17px 17px;
  border: 1.5px solid rgba(148,210,237,0.16);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 7px 22px rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
/* Shoulder bumps */
.axis-shoulder {
  position: absolute; top: -5px;
  width: 13px; height: 13px;
  background: radial-gradient(circle at 40% 30%, #254e7a, #0f2038);
  border-radius: 50%;
  border: 1.5px solid rgba(148,210,237,0.2);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.axis-shoulder.left  { left: -5px; }
.axis-shoulder.right { right: -5px; }
/* Chest S logo */
.axis-chest-logo {
  font-family: var(--nav-font); font-size: 24px; font-weight: 900;
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(34,211,238,0.4));
  line-height: 1;
  position: relative; z-index: 1;
}
/* Chest vent strip */
.axis-chest-vent {
  position: absolute; bottom: 9px; left: 16px; right: 16px;
  height: 3px;
  background: repeating-linear-gradient(90deg,
    rgba(34,211,238,0.22) 0px, rgba(34,211,238,0.22) 3px,
    transparent 3px, transparent 7px);
  border-radius: 2px;
}
/* Torso highlight sheen */
.axis-torso::before {
  content: '';
  position: absolute;
  top: 5px; left: 10px; right: 10px; height: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
  border-radius: 50%; pointer-events: none;
}
/* ── ARMS ── */
.axis-arm {
  position: absolute;
  top: 77px;
  width: 12px; height: 36px;
  background: linear-gradient(180deg, #162d45 0%, #0a1b2c 100%);
  border-radius: 6px;
  border: 1px solid rgba(148,210,237,0.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.35);
}
.axis-arm.left  { left: 4px;  transform: rotate(-6deg); transform-origin: top center; }
.axis-arm.right { right: 4px; transform: rotate(6deg);  transform-origin: top center; }
/* ── LEGS ── */
.axis-legs {
  display: flex; gap: 9px;
  margin-top: 2px; flex-shrink: 0;
}
.axis-leg {
  width: 19px; height: 21px;
  background: linear-gradient(180deg, #132440 0%, #091929 100%);
  border-radius: 5px 5px 8px 8px;
  border: 1px solid rgba(148,210,237,0.09);
  box-shadow: 0 4px 8px rgba(0,0,0,0.35);
}
/* ── ANIMATIONS ── */
@keyframes axisFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}
@keyframes axisShadow {
  0%, 100% { opacity: 0.14; transform: translateX(-50%) scaleX(1); }
  50%       { opacity: 0.06; transform: translateX(-50%) scaleX(0.65); }
}
@keyframes axisEyeGlow {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; filter: brightness(1.5); }
}
@keyframes axisRing {
  0%   { transform: translate(-50%, -50%) scale(0.65); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}
@keyframes axisAmbient {
  0%, 100% { opacity: 0.07; transform: scale(1); }
  50%       { opacity: 0.13; transform: scale(1.06); }
}
@keyframes axisShake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-2px); }
  40%, 80%  { transform: translateX(2px); }
}
.axis-char[data-state="critical"] .axis-scene { animation: axisShake 0.45s ease-in-out 3 3s; }

/* ═══════════════════════════════════════════════════════════════════
   HOME BENTO GRID
   ═══════════════════════════════════════════════════════════════════ */
.home-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px 0 30px;
}
@media (max-width: 960px) { .home-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .home-bento { grid-template-columns: 1fr; } }

.hb-card {
  background: rgba(8, 16, 32, 0.88);
  border: 1px solid rgba(99,179,237,0.1);
  border-radius: 18px;
  padding: 18px 18px 14px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
}
/* Top-edge highlight */
.hb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  pointer-events: none;
}
[data-go].hb-card { cursor: pointer; }
[data-go].hb-card:hover {
  border-color: rgba(99,179,237,0.22);
  box-shadow: 0 0 0 1px rgba(99,179,237,0.06), 0 10px 32px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

/* AXIS card coloring */
.hb-axis { border-color: rgba(99,179,237,0.14); align-items: stretch; }
.hb-axis[data-state="warn"]     { border-color: rgba(245,158,11,0.22); box-shadow: 0 0 28px rgba(245,158,11,0.06) inset; }
.hb-axis[data-state="critical"] { border-color: rgba(239,68,68,0.28);  box-shadow: 0 0 28px rgba(239,68,68,0.07) inset; }

.hb-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.hb-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: #475569;
}
.hb-card-title {
  font-size: 16px; font-weight: 800; color: #e2e8f0;
  font-family: var(--nav-font); margin-bottom: 6px; line-height: 1.2;
}

/* State pill badges */
.hb-pill {
  font-size: 9.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; letter-spacing: 0.02em; flex-shrink: 0;
}
.hb-pill.ok       { background: rgba(34,211,238,0.1);  color: #22d3ee; border: 1px solid rgba(34,211,238,0.25); }
.hb-pill.warn     { background: rgba(245,158,11,0.1);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.hb-pill.critical { background: rgba(239,68,68,0.1);   color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.hb-pill.neutral  { background: rgba(148,163,184,0.08); color: #94a3b8; border: 1px solid rgba(148,163,184,0.18); }
.hb-pill.active   { background: rgba(74,222,128,0.1);  color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }

/* Alert list */
.hb-alert-list { margin: 4px 0 8px; flex: 1; }
.hb-alert-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; font-size: 12.5px; color: #94a3b8;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.hb-alert-row:last-child { border-bottom: none; }
.hb-alert-ico {
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; flex-shrink: 0;
}
.hb-a-ok   .hb-alert-ico { background: rgba(34,211,238,0.1); color: #22d3ee; }
.hb-a-warn .hb-alert-ico { background: rgba(245,158,11,0.1); color: #f59e0b; }
.hb-a-err  .hb-alert-ico { background: rgba(239,68,68,0.1);  color: #ef4444; }
.hb-a-ok   { color: #4ade80; }
.hb-a-warn { color: #94a3b8; }
.hb-a-err  { color: #f87171; }

/* Card footer link */
.hb-link {
  margin-top: 8px; background: none; border: none;
  color: #334155; font-size: 12px; cursor: pointer; padding: 0; text-align: left;
  display: flex; align-items: center; gap: 4px;
  transition: color 0.15s; align-self: flex-start;
}
.hb-link:hover { color: #22d3ee; }
.hb-link-sm {
  background: none; border: none; color: #475569; font-size: 10.5px;
  cursor: pointer; padding: 0; flex-shrink: 0; transition: color 0.15s;
}
.hb-link-sm:hover { color: #22d3ee; }

/* Task card */
.hb-prog-wrap {
  background: rgba(255,255,255,0.06); border-radius: 4px; height: 5px;
  overflow: hidden; margin: 10px 0 5px;
}
.hb-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #22d3ee 100%);
  border-radius: 4px; transition: width 0.6s ease;
  box-shadow: 0 0 6px rgba(34,211,238,0.4);
}
.hb-prog-note { font-size: 11.5px; color: #64748b; margin-bottom: 10px; }
.hb-prog-note.done { color: #4ade80; }
.hb-activity { margin-top: 8px; flex: 1; }
.hb-act-hdr {
  font-size: 10px; color: #475569; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; display: flex; justify-content: space-between; margin-bottom: 7px;
}
.hb-act-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px; color: #64748b; padding: 3px 0; line-height: 1.4;
}
.hb-act-dot {
  width: 5px; height: 5px; background: #22d3ee; border-radius: 50%;
  flex-shrink: 0; margin-top: 4px;
}
.hb-empty-note { font-size: 12.5px; color: #475569; margin-top: 10px; line-height: 1.6; flex: 1; }

/* Team card */
.hb-online-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: #94a3b8; margin: 6px 0 12px;
}
.hb-online-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; background: #64748b;
}
.hb-online-dot.on { background: #22d3ee; box-shadow: 0 0 6px #22d3ee; animation: hbDotPulse 2s infinite; }
@keyframes hbDotPulse { 0%,100%{opacity:.65} 50%{opacity:1} }
.hb-queue {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 12px; padding: 11px 6px; margin-top: auto;
}
.hb-q-cell { text-align: center; flex: 1; }
.hb-q-num {
  font-size: 20px; font-weight: 900; font-family: var(--nav-font); line-height: 1;
}
.hb-q-num.col-neutral { color: #64748b; }
.hb-q-num.col-active  { color: #22d3ee; }
.hb-q-num.col-done    { color: #4ade80; }
.hb-q-num.col-err     { color: #f87171; }
.hb-q-label { font-size: 10px; color: #475569; margin-top: 3px; }
.hb-q-sep { color: #2d3748; font-size: 14px; flex-shrink: 0; }

/* Inventory card */
.hb-big-num {
  font-size: 34px; font-weight: 900; font-family: var(--nav-font);
  color: #e2e8f0; letter-spacing: -1px; line-height: 1; margin: 4px 0 2px;
}
.hb-sub-lbl { font-size: 11.5px; color: #64748b; margin-bottom: 7px; }
.hb-badge {
  display: inline-flex; font-size: 10.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; margin-bottom: 10px;
}
.hb-badge.ok   { background: rgba(34,211,238,0.08); color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); }
.hb-badge.warn { background: rgba(245,158,11,0.08); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); }
.hb-badge.bad  { background: rgba(239,68,68,0.08);  color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.hb-mk-list { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hb-mk-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.05); border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.hb-mk-row:hover { background: rgba(34,211,238,0.04); border-color: rgba(34,211,238,0.14); }
.hb-mk-logo {
  width: 26px; height: 26px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.hb-mk-logo img, .hb-mk-logo svg { width: 22px; height: 22px; object-fit: contain; filter: invert(1) opacity(0.7); }
.hb-mk-info { flex: 1; min-width: 0; }
.hb-mk-name { font-size: 12.5px; font-weight: 600; color: #cbd5e1; }
.hb-mk-status {
  font-size: 10.5px; color: #475569; display: flex;
  align-items: center; gap: 5px; margin-top: 1px;
}
.hb-mk-status .hb-online-dot { width: 5px; height: 5px; }
.hb-mk-chev { color: #2d3748; font-size: 12px; flex-shrink: 0; }

/* Analytics sparkline */
.hb-spark { margin-bottom: 10px; }
.hb-spark-hdr {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: #64748b; margin-bottom: 6px;
}
.hb-spark-hdr span { color: #475569; font-size: 10.5px; }
.hb-spark-svg { width: 100%; height: 68px; display: block; overflow: visible; }
.hb-spark-empty {
  height: 68px; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; color: #334155; background: rgba(255,255,255,0.02);
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.04);
  text-align: center; padding: 8px; margin-bottom: 10px; line-height: 1.5;
}
.hb-sales-row { display: flex; gap: 10px; }
.hb-sales-cell { flex: 1; }
.hb-sales-lbl {
  font-size: 10px; color: #64748b; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px;
}
.hb-sales-num {
  font-size: 17px; font-weight: 900; color: #e2e8f0;
  font-family: var(--nav-font); letter-spacing: -0.5px; line-height: 1;
}
.hb-sales-delta { font-size: 10.5px; color: #475569; margin-top: 2px; }
.hb-sales-delta.up { color: #4ade80; }

/* Tracking card */
.hb-track-list { margin: 6px 0 8px; }
.hb-track-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; font-size: 12.5px; color: #94a3b8;
  border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer;
  transition: color 0.15s;
}
.hb-track-row:last-child { border-bottom: none; }
.hb-track-row:hover { color: #cbd5e1; }
.hb-track-row.warn { color: #f59e0b; }
.hb-track-ico { flex-shrink: 0; display: flex; align-items: center; color: #64748b; }
.hb-track-ico svg { width: 14px; height: 14px; }
.hb-track-ico.ok   { color: #22d3ee; }
.hb-track-ico.warn { color: #f59e0b; }
.hb-track-num { margin-left: auto; font-weight: 700; font-size: 13px; color: #e2e8f0; padding-right: 4px; }
.hb-track-num.ok   { color: #22d3ee; }
.hb-track-num.zero { color: #475569; }
/* Mini world-map dot animation */
.hb-map {
  position: relative; height: 56px; margin-top: 6px;
  background: linear-gradient(135deg, rgba(20,42,80,0.35) 0%, rgba(6,14,28,0.35) 100%);
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.04); overflow: hidden;
}
.hb-map-dot {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #1e4080; transform: translate(-50%,-50%); opacity: 0.55;
}
.hb-map-dot.on {
  background: #22d3ee; opacity: 1;
  box-shadow: 0 0 5px #22d3ee;
  animation: hbDotPulse 2.2s infinite;
}
/* Responsive tweaks */
@media (max-width: 960px) {
  .hb-axis { grid-column: 1 / -1; flex-direction: row; gap: 16px; align-items: flex-start; }
  .axis-char { margin: 0; flex-shrink: 0; }
}
@media (max-width: 580px) {
  .hb-axis { flex-direction: column; align-items: stretch; }
  .home-bento { gap: 10px; padding: 12px 0 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME V2 — rich cards, activity stream, strong interactions
   ═══════════════════════════════════════════════════════════════════ */

/* Card entrance stagger */
@keyframes cardRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-bento .hb-card { animation: cardRise 0.38s ease both; }
.home-bento .hb-card:nth-child(1) { animation-delay: 0ms; }
.home-bento .hb-card:nth-child(2) { animation-delay: 55ms; }
.home-bento .hb-card:nth-child(3) { animation-delay: 110ms; }
.home-bento .hb-card:nth-child(4) { animation-delay: 165ms; }
.home-bento .hb-card:nth-child(5) { animation-delay: 220ms; }
.home-bento .hb-card:nth-child(6) { animation-delay: 275ms; }

/* All cards clickable */
.hb-card { cursor: pointer; }
.hb-card:hover {
  border-color: rgba(99,179,237,0.26);
  box-shadow: 0 0 0 1px rgba(99,179,237,0.08), 0 16px 44px rgba(0,0,0,0.42);
  transform: translateY(-3px);
}
.hb-axis:hover { border-color: rgba(99,179,237,0.3); }
.hb-axis[data-state="warn"]:hover     { border-color: rgba(245,158,11,0.45); }
.hb-axis[data-state="critical"]:hover { border-color: rgba(239,68,68,0.5); }

/* Mini stat strip */
.hb-stat-row {
  display: flex; gap: 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 12px; padding: 10px 4px; margin: 8px 0;
}
.hb-mini-stat { flex: 1; text-align: center; }
.hb-mini-num {
  font-size: 19px; font-weight: 900; font-family: var(--nav-font);
  line-height: 1; color: #e2e8f0;
}
.hb-mini-num.c-cyan  { color: #22d3ee; }
.hb-mini-num.c-green { color: #4ade80; }
.hb-mini-num.c-amber { color: #f59e0b; }
.hb-mini-num.c-red   { color: #f87171; }
.hb-mini-num.c-muted { color: #64748b; }
.hb-mini-lbl { font-size: 9.5px; color: #475569; margin-top: 3px; letter-spacing: 0.04em; }
.hb-mini-sep { color: #1e2d40; align-self: stretch; width: 1px; background: rgba(255,255,255,0.05); flex-shrink: 0; margin: 4px 0; }

/* Action button row */
.hb-action-row { display: flex; gap: 7px; margin-top: auto; padding-top: 10px; }
.hb-btn {
  flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  letter-spacing: 0.02em; text-align: center; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-btn:active { transform: scale(0.96); }
.hb-btn.pri {
  background: rgba(34,211,238,0.1); color: #22d3ee;
  border-color: rgba(34,211,238,0.28);
}
.hb-btn.pri:hover { background: rgba(34,211,238,0.17); box-shadow: 0 0 14px rgba(34,211,238,0.2); }
.hb-btn.sec {
  background: rgba(255,255,255,0.04); color: #64748b;
  border-color: rgba(255,255,255,0.08);
}
.hb-btn.sec:hover { background: rgba(255,255,255,0.07); color: #94a3b8; }

/* Key-value info grid */
.hb-info-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: 3px 10px; margin: 6px 0 8px;
}
.hb-info-lbl { font-size: 10px; color: #475569; align-self: center; white-space: nowrap; }
.hb-info-val { font-size: 11.5px; color: #94a3b8; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-info-val.hi { color: #cbd5e1; }

/* Risk / alert highlight box */
.hb-risk-box {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.18); border-radius: 10px;
  padding: 9px 12px; margin: 6px 0;
}
.hb-risk-box.ok {
  background: rgba(34,211,238,0.04);
  border-color: rgba(34,211,238,0.12);
}
.hb-risk-title { font-size: 11.5px; font-weight: 700; color: #f59e0b; margin-bottom: 3px; }
.hb-risk-title.ok { color: #22d3ee; }
.hb-risk-detail { font-size: 11px; color: #64748b; line-height: 1.5; }
.hb-scan-row {
  font-size: 10px; color: #334155; margin: 4px 0 8px;
  display: flex; align-items: center; gap: 5px;
}
.hb-scan-dot { width: 5px; height: 5px; border-radius: 50%; background: #22d3ee; flex-shrink: 0; }

/* Period selector */
.hb-period-row { display: flex; gap: 4px; margin-bottom: 8px; }
.hb-period-btn {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.07);
  background: none; color: #475569; font-size: 10.5px; font-weight: 700; cursor: pointer;
  transition: all 0.15s;
}
.hb-period-btn.on, .hb-period-btn:hover {
  background: rgba(34,211,238,0.1); color: #22d3ee;
  border-color: rgba(34,211,238,0.22);
}

/* Carrier/source breakdown */
.hb-breakdown { margin: 4px 0 6px; }
.hb-bk-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 11px; color: #64748b;
}
.hb-bk-bar-wrap { flex: 1; background: rgba(255,255,255,0.06); border-radius: 2px; height: 3px; overflow: hidden; }
.hb-bk-bar { height: 100%; border-radius: 2px; background: #22d3ee; }
.hb-bk-num { font-size: 11px; font-weight: 700; color: #94a3b8; flex-shrink: 0; min-width: 22px; text-align: right; }

/* ─── Recent activity section ─── */
.home-activity { padding: 0 0 32px; }
.ha-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.ha-title { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #334155; }
.ha-see-all {
  background: none; border: 1px solid rgba(255,255,255,0.07);
  color: #475569; font-size: 10.5px; cursor: pointer;
  padding: 3px 10px; border-radius: 6px; transition: all 0.15s;
}
.ha-see-all:hover { color: #94a3b8; border-color: rgba(255,255,255,0.14); }
.ha-list {
  background: rgba(8,16,32,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; overflow: hidden;
}
.ha-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s; cursor: default;
}
.ha-row:last-child { border-bottom: none; }
.ha-row:hover { background: rgba(255,255,255,0.02); }
.ha-ico {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 12px; font-weight: 800;
}
.ha-ico.ok   { background: rgba(34,211,238,0.1);  color: #22d3ee; }
.ha-ico.done { background: rgba(74,222,128,0.1);  color: #4ade80; }
.ha-ico.err  { background: rgba(239,68,68,0.08);  color: #f87171; }
.ha-ico.warn { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.ha-ico.info { background: rgba(148,163,184,0.08); color: #94a3b8; }
.ha-body { flex: 1; min-width: 0; }
.ha-event { font-size: 12.5px; font-weight: 600; color: #cbd5e1; }
.ha-sub   { font-size: 11px; color: #475569; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-time  { font-size: 10.5px; color: #334155; flex-shrink: 0; }
.ha-empty { padding: 28px; text-align: center; font-size: 12.5px; color: #334155; }
.ha-tag {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; flex-shrink: 0;
  border: 1px solid; letter-spacing: 0.04em;
}
.ha-tag.run  { background: rgba(34,211,238,0.07); color: #22d3ee; border-color: rgba(34,211,238,0.2); }
.ha-tag.done { background: rgba(74,222,128,0.07); color: #4ade80; border-color: rgba(74,222,128,0.2); }
.ha-tag.err  { background: rgba(239,68,68,0.07);  color: #f87171; border-color: rgba(239,68,68,0.2); }
.ha-tag.warn { background: rgba(245,158,11,0.07); color: #f59e0b; border-color: rgba(245,158,11,0.2); }

/* Admin bar compact */
.admin-bar { padding: 4px 20px 5px; min-height: 0; font-size: 11px; gap: 8px; }
.admin-seg button { padding: 3px 10px; font-size: 10.5px; }
.ab-label { font-size: 10px; }
.ab-note  { font-size: 10.5px; }
.ab-reset { font-size: 10px; padding: 2px 8px; }

/* Sidebar nav tooltips (collapsed rail) */
.nav-item { position: relative; }
.dash.sb-collapsed .nav-item::after {
  content: attr(title);
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: rgba(6,14,28,0.96); color: #cbd5e1;
  border: 1px solid rgba(99,179,237,0.2); border-radius: 7px;
  padding: 5px 11px; font-size: 11px; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.14s 0.3s; z-index: 999;
}
.dash.sb-collapsed .nav-item:hover::after { opacity: 1; }
/* Active tab highlight in collapsed rail */
.nav-item.active { background: rgba(34,211,238,0.12) !important; border-radius: 10px; }
.nav-item.active svg { color: #22d3ee !important; }

/* ═══════════════════════════════════════════════════════════
   TEAM PAGE
   ═══════════════════════════════════════════════════════════ */
.team-page { padding: 24px 0; }
.team-layout { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
@media (max-width: 760px) { .team-layout { grid-template-columns: 1fr; } }

.team-loading { color: var(--text-muted); font-size: 13px; padding: 40px 0; text-align: center; }

/* Hierarchy tiers */
.tm-hierarchy { display: flex; flex-direction: column; gap: 0; padding-top: 4px; }
.tm-tier { }
.tm-tier-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted);
  text-transform: uppercase; margin-bottom: 8px; padding-left: 2px; }
.tm-tier-cards { display: flex; flex-direction: column; gap: 8px; }
.tm-connector { width: 2px; height: 20px; background: linear-gradient(rgba(34,211,238,.3), rgba(34,211,238,.1));
  margin: 0 auto; }
.tm-connector-dashed { background: repeating-linear-gradient(to bottom, rgba(34,211,238,.25) 0, rgba(34,211,238,.25) 4px, transparent 4px, transparent 8px); }

/* Member cards */
.tm-member-card { display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 10px 14px; transition: border-color .15s; }
.tm-member-card:hover { border-color: rgba(34,211,238,.25); }
.tm-invite-card { opacity: .65; border-style: dashed; }

.tm-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #0e2338, #1a3a58); border: 2px solid rgba(34,211,238,.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tm-avatar[data-role="owner"] { border-color: rgba(251,191,36,.4); background: linear-gradient(135deg, #1a1206, #2d1e06); }
.tm-avatar[data-role="admin"] { border-color: rgba(34,211,238,.45); }
.tm-avatar[data-role="pending"] { border-color: rgba(99,102,241,.3); background: rgba(99,102,241,.08); }
.tm-avatar span { font-size: 13px; font-weight: 700; color: #94b4cc; }
.tm-avatar[data-role="owner"] span { color: #fbbf24; }
.tm-dot { position: absolute; bottom: 1px; right: 1px; width: 9px; height: 9px;
  border-radius: 50%; background: #22c55e; border: 2px solid var(--bg-card, #08111c); }

.tm-member-info { flex: 1; min-width: 0; }
.tm-member-name { font-size: 13px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tm-member-email { font-size: 11px; color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-member-meta { font-size: 10.5px; color: #4a6070; margin-top: 2px; }

/* Role badges */
.tm-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px;
  border-radius: 20px; text-transform: uppercase; }
.tm-badge.owner { background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.tm-badge.admin  { background: rgba(34,211,238,.12); color: #22d3ee; border: 1px solid rgba(34,211,238,.25); }
.tm-badge.user   { background: rgba(148,163,184,.1); color: #94a3b8; border: 1px solid rgba(148,163,184,.2); }
.tm-badge.pending { background: rgba(99,102,241,.1); color: #818cf8; border: 1px solid rgba(99,102,241,.25); }

/* Remove / revoke button */
.tm-remove-btn { background: none; border: 1px solid transparent; color: #4a6070; border-radius: 6px;
  padding: 4px 8px; font-size: 12px; cursor: pointer; transition: all .15s; flex-shrink: 0; }
.tm-remove-btn:hover { border-color: rgba(239,68,68,.4); color: #ef4444; background: rgba(239,68,68,.08); }

/* Empty state */
.tm-empty { text-align: center; padding: 28px 0 8px; }
.tm-empty-icon { font-size: 36px; margin-bottom: 10px; opacity: .4; }
.tm-empty p { color: var(--text-muted); font-size: 13px; line-height: 1.6; }

/* Seat bar */
.tm-seat-bar { width: 120px; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.tm-seat-fill { height: 100%; background: linear-gradient(90deg, #22d3ee, #0ea5e9); border-radius: 3px; transition: width .4s; }

/* Invite form */
.tm-invite-card-form { margin-top: 0; }
.tm-invite-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tm-invite-input { flex: 1; min-width: 200px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: var(--text-1); font-size: 13.5px; outline: none; transition: border-color .15s; }
.tm-invite-input:focus { border-color: rgba(34,211,238,.5); }
.tm-invite-select { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: var(--text-1); font-size: 13px; outline: none; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMMAND CENTER V3 — premium asymmetric home (cc-*)
   Layered graphite surfaces, AXIS hero, live previews, interactive timeline.
   ═══════════════════════════════════════════════════════════════════════════ */
.cc-page { padding-top: 4px; }

/* ── Recommended actions strip ── */
.cc-rec { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.cc-rec-chip { display: flex; align-items: center; gap: 11px; flex: 1 1 220px; min-width: 200px;
  text-align: left; padding: 11px 13px; border-radius: 14px; cursor: pointer; text-decoration: none;
  background: linear-gradient(160deg, #111a2c, #0b1019); border: 1px solid rgba(120,150,200,.12);
  transition: transform .15s, border-color .15s, box-shadow .15s; }
button.cc-rec-chip { font-family: inherit; }
.cc-rec-chip:hover { transform: translateY(-2px); border-color: rgba(120,160,230,.3); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9); }
.cc-rec-chip.primary { border-color: rgba(59,130,246,.28); }
.cc-rec-chip.warn { border-color: rgba(251,191,36,.24); }
.cc-rec-chip.calm { cursor: default; }
.cc-rec-chip.calm:hover { transform: none; box-shadow: none; border-color: rgba(120,150,200,.12); }
.cc-rec-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.cc-rec-ico svg { width: 17px; height: 17px; }
.cc-rec-ico.default { background: rgba(34,211,238,.1); color: #22d3ee; }
.cc-rec-ico.primary { background: rgba(59,130,246,.14); color: #60a5fa; }
.cc-rec-ico.warn { background: rgba(251,191,36,.14); color: #fbbf24; }
.cc-rec-ico.ok { background: rgba(52,211,153,.14); color: #34d399; }
.cc-rec-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cc-rec-text strong { font-size: 12.5px; color: #e2e8f0; font-weight: 700; }
.cc-rec-text small { font-size: 10.5px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-rec-arrow { color: #475569; font-size: 16px; flex-shrink: 0; transition: transform .15s, color .15s; }
.cc-rec-chip:hover .cc-rec-arrow { color: #22d3ee; transform: translateX(3px); }

/* ── Asymmetric grid ── */
.cc-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 16px;
  grid-template-areas:
    "axis jobs      jobs"
    "axis fleet     fleet"
    "inv  analytics tracking";
}
.cc-axis { grid-area: axis; } .cc-jobs { grid-area: jobs; } .cc-fleet { grid-area: fleet; }
.cc-inv { grid-area: inv; } .cc-analytics { grid-area: analytics; } .cc-tracking { grid-area: tracking; }
@media (max-width: 1080px) {
  .cc-grid { grid-template-columns: 1fr 1fr; grid-template-areas:
    "axis axis" "jobs fleet" "inv analytics" "tracking tracking"; }
}
@media (max-width: 680px) {
  .cc-grid { grid-template-columns: 1fr; gap: 12px; grid-template-areas:
    "axis" "jobs" "fleet" "inv" "analytics" "tracking"; }
}

/* ── Premium card shell ── */
.cc-card {
  position: relative; display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 42%),
    linear-gradient(160deg, #111a2c 0%, #0b1019 72%);
  border: 1px solid rgba(120,150,200,.1); border-radius: 18px;
  padding: 16px 16px 14px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), border-color .18s, box-shadow .18s;
}
.cc-card::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,180,255,.25), transparent); pointer-events: none; }
.cc-card[data-go] { cursor: pointer; }
.cc-card[data-go]:hover { transform: translateY(-3px); border-color: rgba(120,160,230,.28);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 26px 52px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(80,130,230,.06); }
.cc-card[data-go]:active { transform: translateY(-1px) scale(.995); box-shadow: 0 10px 26px -20px rgba(0,0,0,.9); }
.cc-card[data-go]:focus-visible { outline: none; border-color: rgba(80,160,255,.6); box-shadow: 0 0 0 3px rgba(60,130,255,.25); }

/* Card head */
.cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cc-head-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5b6b82; }
.cc-title { font-size: 16px; font-weight: 800; color: #eef3fb; font-family: var(--nav-font); line-height: 1; letter-spacing: -.01em; }
.cc-title--xl { font-size: 24px; letter-spacing: -.02em; }
.cc-stat-row { margin: 8px 0; }

/* ── Button system ── */
.cc-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.cc-btn { flex: 1; padding: 9px 12px; border-radius: 10px; font: 700 12px var(--nav-font); cursor: pointer;
  border: 1px solid transparent; white-space: nowrap; text-align: center; line-height: 1; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .1s, box-shadow .15s, background .15s, border-color .15s, color .15s; }
.cc-btn:active { transform: translateY(1px) scale(.985); }
.cc-btn--primary { background: linear-gradient(180deg, #3b82f6, #2563eb); color: #eaf2ff;
  border-color: rgba(120,170,255,.5); box-shadow: 0 6px 16px -8px rgba(37,99,235,.9), 0 1px 0 rgba(255,255,255,.18) inset; }
.cc-btn--primary:hover { background: linear-gradient(180deg, #4f8dff, #2f6bff);
  box-shadow: 0 10px 22px -8px rgba(47,107,255,.9), 0 0 0 1px rgba(120,170,255,.3), 0 1px 0 rgba(255,255,255,.22) inset; }
.cc-btn--secondary { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: #aeb9c9; border-color: rgba(255,255,255,.1); }
.cc-btn--secondary:hover { color: #e2e8f0; border-color: rgba(140,180,255,.3);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
.cc-btn--ghost { background: transparent; color: #7c8aa0; border-color: transparent; flex: 0 0 auto; }
.cc-btn--ghost:hover { color: #22d3ee; background: rgba(34,211,238,.06); }
.cc-btn--sm { flex: 0 0 auto; padding: 7px 12px; font-size: 11px; margin-top: 8px; }
.cc-btn[disabled], .cc-btn.is-disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; }
.cc-btn[disabled]:hover { transform: none; }

/* ── AXIS hero ── */
.cc-axis { display: grid; grid-template-columns: minmax(180px, .9fr) 1.12fr; gap: 20px; padding: 18px; }
.cc-axis[data-state="ok"]       { border-color: rgba(52,211,153,.18); }
.cc-axis[data-state="warn"]     { border-color: rgba(251,191,36,.22); }
.cc-axis[data-state="critical"] { border-color: rgba(248,113,113,.28); }
.cc-axis::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 16% 26%, rgba(52,211,153,.08), transparent 60%); }
.cc-axis[data-state="warn"]::after { background: radial-gradient(120% 80% at 16% 26%, rgba(251,191,36,.09), transparent 60%); }
.cc-axis[data-state="critical"]::after { background: radial-gradient(120% 80% at 16% 26%, rgba(248,113,113,.1), transparent 60%); }
.cc-axis-left { display: flex; flex-direction: column; position: relative; z-index: 1; }
.cc-axis-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 218px; position: relative; }
.cc-axis-score { text-align: center; margin-top: 8px; }
.cc-score-num { font: 900 32px var(--nav-font); letter-spacing: -1px; display: block; line-height: 1; }
.cc-score-lbl { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #5b6b82; margin-top: 3px; display: block; }
.cc-axis-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; z-index: 1; }
.cc-scan-line { font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 7px; }
.cc-scan-pulse { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; animation: hbDotPulse 2s infinite; flex-shrink: 0; }
.cc-issue { border-radius: 12px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.cc-issue.ok { border-color: rgba(52,211,153,.2); background: rgba(52,211,153,.05); }
.cc-issue.warn { border-color: rgba(251,191,36,.22); background: rgba(251,191,36,.05); }
.cc-issue.critical { border-color: rgba(248,113,113,.26); background: rgba(248,113,113,.06); }
.cc-issue-head { display: flex; align-items: center; gap: 8px; }
.cc-issue-sev { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font: 800 11px var(--nav-font); flex-shrink: 0; }
.cc-issue.ok .cc-issue-sev { background: rgba(52,211,153,.16); color: #34d399; }
.cc-issue.warn .cc-issue-sev { background: rgba(251,191,36,.16); color: #fbbf24; }
.cc-issue.critical .cc-issue-sev { background: rgba(248,113,113,.16); color: #f87171; }
.cc-issue-title { font-size: 13px; font-weight: 700; color: #e6edf6; }
.cc-issue-body { font-size: 11.5px; color: #8595ab; line-height: 1.55; margin: 6px 0 0; }
.cc-axis-metrics { display: flex; gap: 8px; }
.cc-metric { flex: 1; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 9px 8px; text-align: center; }
.cc-metric-num { font: 900 18px var(--nav-font); color: #e2e8f0; display: block; line-height: 1; }
.cc-metric-lbl { font-size: 9px; color: #64748b; margin-top: 4px; display: block; letter-spacing: .02em; }
.cc-axis-rec { display: flex; gap: 9px; align-items: flex-start; font-size: 11.5px; color: #94a3b8; line-height: 1.5;
  background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.14); border-radius: 10px; padding: 9px 11px; }
.cc-axis-rec strong { color: #cbd5e1; font-weight: 700; }
.cc-rec-bot { color: #60a5fa; flex-shrink: 0; } .cc-rec-bot svg { width: 16px; height: 16px; }
@media (max-width: 680px) { .cc-axis { grid-template-columns: 1fr; } .cc-axis-stage { min-height: 180px; } }

/* ── Jobs ── */
.cc-job-now { display: flex; flex-direction: column; gap: 7px; margin: 2px 0; }
.cc-job-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-job-name { font-size: 13px; font-weight: 700; color: #e6edf6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-job-state { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.cc-job-state.complete { background: rgba(52,211,153,.12); color: #34d399; }
.cc-job-state.error { background: rgba(248,113,113,.12); color: #f87171; }
.cc-job-state.running, .cc-job-state.accepted, .cc-job-state.queued, .cc-job-state.dispatched { background: rgba(34,211,238,.12); color: #22d3ee; }
.cc-job-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; flex-wrap: wrap; }
.cc-job-meta i { color: #334155; font-style: normal; }
.cc-steps { display: flex; align-items: center; gap: 0; margin: 4px 0 2px; }
.cc-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
.cc-step-dot { width: 11px; height: 11px; border-radius: 50%; background: #1c2840; border: 1.5px solid #2a3a55; transition: all .2s; }
.cc-step-lbl { font-size: 8.5px; color: #475569; letter-spacing: .02em; }
.cc-step.done .cc-step-dot { background: #34d399; border-color: #34d399; box-shadow: 0 0 7px rgba(52,211,153,.5); }
.cc-step.done .cc-step-lbl { color: #64748b; }
.cc-step.active .cc-step-dot { background: #22d3ee; border-color: #22d3ee; animation: ccPulse 1.5s infinite; }
.cc-step.active .cc-step-lbl { color: #22d3ee; font-weight: 700; }
.cc-step-link { flex: 1; height: 2px; background: #1c2840; margin: 0 4px 14px; border-radius: 2px; }
@keyframes ccPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(34,211,238,.15), 0 0 10px rgba(34,211,238,.5); } 50% { box-shadow: 0 0 0 6px rgba(34,211,238,.05), 0 0 14px rgba(34,211,238,.8); } }
.cc-prog { height: 6px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.cc-prog-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #3b82f6, #22d3ee); transition: width .6s ease; }
.cc-prog-fill.err { background: linear-gradient(90deg, #ef4444, #f87171); }
.cc-prog-fill.live { background-image: linear-gradient(90deg, #2563eb, #22d3ee, #2563eb); background-size: 200% 100%; animation: ccProg 1.6s linear infinite; }
@keyframes ccProg { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.cc-job-note { font-size: 11px; color: #64748b; }
.cc-job-note.done { color: #34d399; }
.cc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 18px 10px; color: #64748b; flex: 1; }
.cc-empty-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); color: #475569; }
.cc-empty-ico svg { width: 16px; height: 16px; }
.cc-empty p { font-size: 12px; line-height: 1.5; margin: 0; max-width: 240px; }
.cc-empty.sm { padding: 12px 8px; } .cc-empty.sm p { font-size: 11.5px; }

/* ── Fleet ── */
.cc-alert { background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.2); border-radius: 12px; padding: 11px 13px; margin: 2px 0 4px; }
.cc-alert-t { font-size: 12.5px; font-weight: 700; color: #f87171; }
.cc-alert-d { font-size: 11px; color: #8595ab; line-height: 1.5; margin: 3px 0 9px; }
.cc-fleet-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.cc-fleet-big { display: flex; align-items: baseline; gap: 7px; }
.cc-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #475569; align-self: center; flex-shrink: 0; }
.cc-online-dot.on { background: #34d399; box-shadow: 0 0 8px #34d399; animation: hbDotPulse 2s infinite; }
.cc-fleet-num { font: 900 26px var(--nav-font); color: #e6edf6; line-height: 1; }
.cc-fleet-sub { font-size: 12px; color: #64748b; }
.cc-fleet-health { text-align: right; font-size: 10px; font-weight: 700; }
.cc-fleet-health-bar { width: 84px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; margin-bottom: 4px; }
.cc-fleet-health-bar div { height: 100%; border-radius: 3px; transition: width .6s; }
.cc-nodes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cc-node-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #94a3b8;
  padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cc-node-chip.root { border-color: rgba(34,211,238,.3); color: #bae6fd; }
.cc-node-chip.off { opacity: .6; }
.cc-node-dot { width: 6px; height: 6px; border-radius: 50%; background: #475569; }
.cc-node-chip.on .cc-node-dot { background: #34d399; box-shadow: 0 0 6px #34d399; }
.cc-fleet-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #475569; margin-top: 2px; }
.cc-fleet-foot code { font-family: ui-monospace, "SFMono-Regular", monospace; color: #7c8aa0; font-size: 10px; }

/* ── Tracking ── */
.cc-track-cred { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; }
.cc-track-num { font: 900 26px var(--nav-font); line-height: 1; }
.cc-track-lbl { font-size: 11.5px; color: #64748b; }
.cc-track-latest { display: flex; align-items: center; gap: 9px; position: relative; padding: 9px 11px 9px 14px; margin-top: 6px;
  border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); font-size: 12px; overflow: hidden; }
.cc-track-route { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #22d3ee, #3b82f6); }
.cc-track-ico { color: #22d3ee; display: flex; flex-shrink: 0; } .cc-track-ico svg { width: 15px; height: 15px; }
.cc-track-no { font-weight: 700; color: #e6edf6; }
.cc-track-carrier { margin-left: auto; font-size: 11px; color: #64748b; }
.cc-track-empty { color: #64748b; font-size: 11.5px; }
.cc-preview-note { font-size: 10px; color: #475569; margin-top: 4px; }
.cc-break { margin-top: 6px; }

/* ── Skeletons ── */
.cc-skel-wrap { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; flex: 1; }
.cc-skel { height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%); background-size: 400% 100%; animation: ccShimmer 1.4s ease infinite; }
.cc-skel.tall { height: 46px; } .cc-skel.chart { height: 90px; }
@keyframes ccShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Activity timeline ── */
.cc-timeline { margin: 22px 0 34px; }
.cc-tl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cc-tl-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7c8aa0; }
.cc-tl-filters { display: flex; gap: 5px; margin-left: 6px; }
.cc-tl-filter { font-size: 10.5px; font-weight: 700; color: #64748b; background: transparent; border: 1px solid rgba(255,255,255,.08);
  padding: 3px 11px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.cc-tl-filter:hover { color: #94a3b8; border-color: rgba(255,255,255,.16); }
.cc-tl-filter.on { color: #0a1220; background: #22d3ee; border-color: #22d3ee; }
.cc-tl-all { margin-left: auto; font-size: 11px; color: #64748b; background: transparent; border: none; cursor: pointer; transition: color .15s; }
.cc-tl-all:hover { color: #22d3ee; }
.cc-tl-list { background: linear-gradient(180deg, rgba(17,26,44,.6), rgba(11,16,25,.6)); border: 1px solid rgba(120,150,200,.1); border-radius: 16px; overflow: hidden; }
.cc-tl-row { display: flex; align-items: center; gap: 11px; padding: 11px 16px 11px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer; transition: background .12s; position: relative; }
.cc-tl-row:last-child { border-bottom: none; }
.cc-tl-row:hover { background: rgba(120,160,255,.04); }
.cc-tl-row:focus-visible { outline: none; background: rgba(120,160,255,.07); box-shadow: inset 3px 0 0 #3b82f6; }
.cc-tl-row.cc-hidden { display: none; }
.cc-tl-rail { width: 14px; display: flex; align-items: center; justify-content: center; position: relative; align-self: stretch; flex-shrink: 0; }
.cc-tl-rail::before { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.06); }
.cc-tl-row:first-child .cc-tl-rail::before { top: 50%; }
.cc-tl-row:last-child .cc-tl-rail::before { bottom: 50%; }
.cc-tl-node { width: 9px; height: 9px; border-radius: 50%; background: #475569; z-index: 1; }
.cc-tl-node.done { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.6); }
.cc-tl-node.ok { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,.6); }
.cc-tl-node.err { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,.6); }
.cc-tl-node.info { background: #64748b; }
.cc-tl-chev { color: #334155; font-size: 18px; flex-shrink: 0; transition: transform .15s, color .15s; }
.cc-tl-row:hover .cc-tl-chev { color: #22d3ee; transform: translateX(3px); }
.cc-tl-empty { padding: 28px; text-align: center; font-size: 12.5px; color: #475569; }

/* ── Entrance stagger ── */
@keyframes ccRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cc-grid > .cc-card { animation: ccRise .42s cubic-bezier(.2,.7,.3,1) both; }
.cc-axis { animation-delay: 0ms; } .cc-jobs { animation-delay: 60ms; } .cc-fleet { animation-delay: 110ms; }
.cc-inv { animation-delay: 160ms; } .cc-analytics { animation-delay: 210ms; } .cc-tracking { animation-delay: 260ms; }
.cc-rec { animation: ccRise .4s ease both; }
.cc-timeline { animation: ccRise .5s ease .28s both; }

/* ── AXIS robot upgrades ── */
/* Hero scale is baked into the float keyframe — a plain `transform: scale()`
   here would be overridden by the axisFloat animation's own transform. */
.axis-hero { margin: 18px 0 22px; animation: axisFloatHero 3.4s ease-in-out infinite; }
@keyframes axisFloatHero { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 480px) { .axis-hero { animation: axisFloatHeroSm 3.4s ease-in-out infinite; } }
@keyframes axisFloatHeroSm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.axis-char[data-state="ok"]       { --axis-eye: #22d3ee; }
.axis-char[data-state="success"]  { --axis-eye: #34d399; }
.axis-char[data-state="scanning"] { --axis-eye: #60a5fa; }
.axis-scan { position: absolute; top: 1px; bottom: 1px; left: 2px; width: 16px; border-radius: 8px;
  background: linear-gradient(90deg, transparent, var(--axis-eye), transparent); opacity: 0; filter: blur(1px); pointer-events: none; }
.axis-char[data-state="scanning"] .axis-scan { opacity: .55; animation: axisScanSweep 1s linear infinite; }
@keyframes axisScanSweep { 0% { left: 2px; opacity: 0; } 25% { opacity: .6; } 75% { opacity: .6; } 100% { left: calc(100% - 18px); opacity: 0; } }
.axis-char[data-state="scanning"] .axis-ring.r1, .axis-char[data-state="scanning"] .axis-ring.r2 { animation-duration: 1.4s; }
.axis-visor-gloss { position: absolute; top: 2px; left: 6px; right: 6px; height: 6px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.2), transparent); pointer-events: none; }
.axis-head-gloss { position: absolute; top: 6px; left: 12px; width: 14px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), transparent 70%); pointer-events: none; }
.axis-torso-gloss { position: absolute; top: 6px; left: 14px; right: 28px; height: 10px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.13), transparent); pointer-events: none; }
.axis-core { position: relative; width: 30px; height: 30px; display: grid; place-items: center; z-index: 1; }
.axis-core-ring { position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--axis-eye);
  opacity: .55; border-top-color: transparent; border-right-color: transparent; animation: axisCoreSpin 3s linear infinite; }
.axis-core-logo { font: 900 17px var(--nav-font); background: linear-gradient(135deg, var(--axis-eye), #3b82f6);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px var(--axis-eye)); }
@keyframes axisCoreSpin { to { transform: rotate(360deg); } }
.axis-char .axis-eye { animation: axisEyeGlow 1.8s ease-in-out infinite, axisBlink 5.4s ease-in-out infinite; }
@keyframes axisBlink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.axis-ring.r3 { width: 172px; height: 172px; animation: axisRing 3.4s ease-out 2.2s infinite; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cc-grid > .cc-card, .cc-rec, .cc-timeline, .axis-char, .axis-hero { animation: none !important; }
  .axis-char .axis-eye, .axis-core-ring, .axis-ring, .cc-prog-fill.live, .cc-step.active .cc-step-dot,
  .cc-online-dot.on, .cc-scan-pulse, .cc-skel, .axis-antenna .axis-ant-dot, .axis-shadow { animation: none !important; }
  .cc-card[data-go]:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSION CONTROL V4 — top rail · AXIS command surface · stacked panels ·
   lower ops strip · activity timeline · floating quick-action launcher (mc-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.mc-home { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }

/* shared tone chips */
.mc-rail-ic, .mc-panel-ic, .mc-seg-ic, .mc-fab-ic { display: grid; place-items: center; flex-shrink: 0; }
.mc-rail-ic.cyan,  .mc-panel-ic.cyan,  .mc-seg-ic.cyan,  .mc-fab-ic.cyan  { background: rgba(34,211,238,.12); color: #22d3ee; }
.mc-rail-ic.teal,  .mc-panel-ic.teal,  .mc-seg-ic.teal,  .mc-fab-ic.teal  { background: rgba(45,212,191,.13); color: #2dd4bf; }
.mc-rail-ic.green, .mc-panel-ic.green, .mc-seg-ic.green, .mc-fab-ic.green { background: rgba(52,211,153,.13); color: #34d399; }
.mc-rail-ic.amber, .mc-panel-ic.amber, .mc-seg-ic.amber, .mc-fab-ic.amber { background: rgba(251,191,36,.13); color: #fbbf24; }
.mc-rail-ic.violet,.mc-panel-ic.violet,.mc-seg-ic.violet,.mc-fab-ic.violet{ background: rgba(167,139,250,.14); color: #a78bfa; }
.mc-rail-ic.red,   .mc-panel-ic.red,   .mc-seg-ic.red,   .mc-fab-ic.red   { background: rgba(248,113,113,.13); color: #f87171; }
.mc-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5b6b82; display: block; }

/* ── Top operational rail ── */
.mc-rail { display: flex; align-items: stretch; gap: 0; padding: 6px; border-radius: 16px; overflow-x: auto;
  background: linear-gradient(180deg, rgba(20,30,48,.7), rgba(10,15,24,.7)); border: 1px solid rgba(120,150,200,.12);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); }
.mc-rail-cell { flex: 1; min-width: 138px; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: none; border: none; cursor: pointer; border-radius: 11px; text-align: left; transition: background .15s; }
.mc-rail-cell:hover { background: rgba(120,160,255,.05); }
.mc-rail-div { width: 1px; background: rgba(255,255,255,.06); margin: 8px 0; flex-shrink: 0; }
.mc-rail-ic { width: 34px; height: 34px; border-radius: 10px; }
.mc-rail-ic svg { width: 17px; height: 17px; }
.mc-rail-meta { display: flex; flex-direction: column; min-width: 0; }
.mc-rail-val { font: 900 18px var(--nav-font); color: #e6edf6; line-height: 1; }
.mc-rail-lbl { font-size: 10px; color: #64748b; margin-top: 3px; white-space: nowrap; }

/* ── Main: AXIS (left, tall) + Jobs/Fleet (right, stacked) ── */
.mc-main { display: grid; grid-template-columns: minmax(330px, 1.08fr) 1fr; grid-template-areas: "axis jobs" "axis fleet"; gap: 14px; }
.mc-axis { grid-area: axis; } .mc-jobs { grid-area: jobs; } .mc-fleet { grid-area: fleet; }
@media (max-width: 1080px) { .mc-main { grid-template-columns: 1fr; grid-template-areas: "axis" "jobs" "fleet"; } }

/* ── AXIS command surface ── */
.mc-axis { position: relative; display: flex; flex-direction: column; padding: 18px; border-radius: 20px; overflow: hidden; cursor: pointer;
  background: radial-gradient(130% 80% at 20% 0%, rgba(34,211,238,.06), transparent 55%), linear-gradient(165deg, #0f1a2c 0%, #090e18 78%);
  border: 1px solid rgba(120,160,230,.16); box-shadow: 0 24px 60px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02) inset;
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.mc-axis[data-state="warn"] { border-color: rgba(251,191,36,.24);
  background: radial-gradient(130% 80% at 20% 0%, rgba(251,191,36,.06), transparent 55%), linear-gradient(165deg, #181405, #090e18 78%); }
.mc-axis[data-state="critical"] { border-color: rgba(248,113,113,.3);
  background: radial-gradient(130% 80% at 20% 0%, rgba(248,113,113,.07), transparent 55%), linear-gradient(165deg, #1b0c0c, #090e18 78%); }
.mc-axis:hover { transform: translateY(-2px); border-color: rgba(120,180,255,.34); }
.mc-axis:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(60,130,255,.3); }
.mc-axis-grid { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(120,160,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,255,.045) 1px, transparent 1px);
  background-size: 26px 26px; -webkit-mask: radial-gradient(120% 90% at 28% 16%, #000 28%, transparent 74%); mask: radial-gradient(120% 90% at 28% 16%, #000 28%, transparent 74%); }
.mc-axis-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.mc-axis-name { font: 900 26px var(--nav-font); color: #eef3fb; letter-spacing: -.02em; line-height: 1; display: flex; align-items: baseline; gap: 7px; margin: 2px 0 0; }
.mc-axis-ver { font-size: 10px; font-weight: 800; color: #22d3ee; background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.25); padding: 1px 6px; border-radius: 999px; letter-spacing: .04em; }
.mc-state-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase; }
.mc-state-pill .mc-state-dot { width: 6px; height: 6px; border-radius: 50%; }
.mc-state-pill.ok { background: rgba(52,211,153,.12); color: #34d399; } .mc-state-pill.ok .mc-state-dot { background: #34d399; box-shadow: 0 0 7px #34d399; }
.mc-state-pill.warn { background: rgba(251,191,36,.12); color: #fbbf24; } .mc-state-pill.warn .mc-state-dot { background: #fbbf24; box-shadow: 0 0 7px #fbbf24; }
.mc-state-pill.critical { background: rgba(248,113,113,.12); color: #f87171; } .mc-state-pill.critical .mc-state-dot { background: #f87171; box-shadow: 0 0 7px #f87171; }
.mc-axis-stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 210px; margin: 6px 0 4px; }
.mc-orb { position: absolute; left: 50%; top: 48%; width: 156px; height: 156px; transform: translate(-50%,-50%); opacity: .16; filter: blur(2px) saturate(1.25); pointer-events: none; z-index: 0; animation: synballPulse 4.2s ease-in-out infinite; }
.mc-orb img { width: 100%; height: 100%; object-fit: contain; }
.mc-score-badge { position: absolute; top: 4px; right: 4px; width: 62px; height: 62px; border-radius: 50%; z-index: 2;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mc-score-badge::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #0b1220; }
.mc-score-badge span { position: relative; z-index: 1; font: 900 18px var(--nav-font); color: #e6edf6; line-height: 1; }
.mc-score-badge small { position: relative; z-index: 1; font-size: 7px; letter-spacing: .12em; color: #64748b; margin-top: 1px; }
.mc-axis-readout { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mc-scan { font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 7px; }
.mc-scan-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; animation: hbDotPulse 2s infinite; flex-shrink: 0; }
.mc-msg { display: flex; gap: 9px; border-radius: 12px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.mc-msg.ok { border-color: rgba(52,211,153,.2); background: rgba(52,211,153,.05); }
.mc-msg.warn { border-color: rgba(251,191,36,.22); background: rgba(251,191,36,.05); }
.mc-msg.critical { border-color: rgba(248,113,113,.26); background: rgba(248,113,113,.06); }
.mc-msg-sev { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font: 800 11px var(--nav-font); flex-shrink: 0; }
.mc-msg.ok .mc-msg-sev { background: rgba(52,211,153,.16); color: #34d399; }
.mc-msg.warn .mc-msg-sev { background: rgba(251,191,36,.16); color: #fbbf24; }
.mc-msg.critical .mc-msg-sev { background: rgba(248,113,113,.16); color: #f87171; }
.mc-msg-title { font-size: 13px; font-weight: 700; color: #e6edf6; }
.mc-msg-body { font-size: 11.5px; color: #8595ab; line-height: 1.55; margin: 5px 0 0; }
.mc-axis-stats { display: flex; gap: 8px; }
.mc-astat { flex: 1; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 9px 6px; text-align: center; }
.mc-astat b { font: 900 18px var(--nav-font); color: #e6edf6; display: block; line-height: 1; }
.mc-astat span { font-size: 9px; color: #64748b; margin-top: 4px; display: block; letter-spacing: .03em; }
.mc-axis-rec { display: flex; gap: 9px; align-items: flex-start; font-size: 11.5px; color: #94a3b8; line-height: 1.5;
  background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.14); border-radius: 10px; padding: 9px 11px; }
.mc-axis-rec strong { color: #cbd5e1; font-weight: 700; }
.mc-rec-bot { color: #60a5fa; flex-shrink: 0; } .mc-rec-bot svg { width: 16px; height: 16px; }

/* ── Button hierarchy (mc) ── */
.mc-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.mc-btn { flex: 1; padding: 9px 12px; border-radius: 10px; font: 700 12px var(--nav-font); cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none; line-height: 1;
  transition: transform .1s, box-shadow .15s, background .15s, border-color .15s, color .15s; }
.mc-btn:active { transform: translateY(1px) scale(.985); }
.mc-btn svg { width: 13px; height: 13px; }
.mc-btn--primary { background: linear-gradient(180deg, #3b82f6, #2563eb); color: #eaf2ff; border-color: rgba(120,170,255,.5);
  box-shadow: 0 6px 16px -8px rgba(37,99,235,.9), 0 1px 0 rgba(255,255,255,.18) inset; }
.mc-btn--primary:hover { background: linear-gradient(180deg, #4f8dff, #2f6bff); box-shadow: 0 10px 22px -8px rgba(47,107,255,.9), 0 0 0 1px rgba(120,170,255,.3); }
.mc-btn--secondary { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: #aeb9c9; border-color: rgba(255,255,255,.1); }
.mc-btn--secondary:hover { color: #e6edf6; border-color: rgba(140,180,255,.3); }
.mc-btn--ghost { background: transparent; color: #7c8aa0; border-color: transparent; flex: 0 0 auto; }
.mc-btn--ghost:hover { color: #22d3ee; background: rgba(34,211,238,.06); }
.mc-btn--ghost svg { width: 12px; height: 12px; }
.mc-btn--sm { padding: 7px 11px; font-size: 11px; }
.mc-btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; }
.mc-btn[disabled]:hover { transform: none; }

/* ── Right panels (Jobs / Fleet) with colored accent stripe ── */
.mc-panel { position: relative; display: flex; flex-direction: column; padding: 15px 15px 13px; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: linear-gradient(165deg, #0f1826, #0a0f19); border: 1px solid rgba(120,150,200,.1);
  box-shadow: 0 14px 34px -22px rgba(0,0,0,.9); transition: transform .18s, border-color .18s, box-shadow .18s; }
.mc-panel::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; }
.mc-panel[data-accent="cyan"]::before { background: linear-gradient(#22d3ee, #3b82f6); }
.mc-panel[data-accent="teal"]::before { background: linear-gradient(#2dd4bf, #22d3ee); }
.mc-panel:hover { transform: translateY(-3px); border-color: rgba(120,160,230,.28); box-shadow: 0 22px 46px -24px rgba(0,0,0,.95); }
.mc-panel:focus-visible { outline: none; border-color: rgba(80,160,255,.6); box-shadow: 0 0 0 3px rgba(60,130,255,.25); }
.mc-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0 0 10px 6px; }
.mc-panel-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc-panel-ic { width: 32px; height: 32px; border-radius: 9px; } .mc-panel-ic svg { width: 16px; height: 16px; }
.mc-panel-title { font: 800 16px var(--nav-font); color: #eef3fb; line-height: 1; margin-top: 2px; }

/* ── Lower operations strip (connected band) ── */
.mc-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 16px; overflow: hidden;
  background: linear-gradient(165deg, #0e1622, #0a0f18); border: 1px solid rgba(120,150,200,.1); box-shadow: 0 14px 34px -24px rgba(0,0,0,.9); }
.mc-seg { position: relative; display: flex; flex-direction: column; padding: 14px; border-right: 1px solid rgba(255,255,255,.05); cursor: pointer; transition: background .15s; }
.mc-seg:last-child { border-right: none; }
.mc-seg:hover { background: rgba(120,160,255,.04); }
.mc-seg:focus-visible { outline: none; background: rgba(120,160,255,.07); box-shadow: inset 0 2px 0 #3b82f6; }
.mc-seg::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .8; }
.mc-seg[data-accent="teal"]::before { background: linear-gradient(90deg, transparent, #2dd4bf, transparent); }
.mc-seg[data-accent="violet"]::before { background: linear-gradient(90deg, transparent, #a78bfa, transparent); }
.mc-seg[data-accent="amber"]::before { background: linear-gradient(90deg, transparent, #fbbf24, transparent); }
.mc-seg-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.mc-seg-ic { width: 28px; height: 28px; border-radius: 8px; } .mc-seg-ic svg { width: 15px; height: 15px; }
.mc-seg-head h4 { font: 800 13.5px var(--nav-font); color: #e6edf6; margin: 0; flex: 1; }
@media (max-width: 900px) { .mc-strip { grid-template-columns: 1fr 1fr; }
  .mc-seg:nth-child(2) { border-right: none; } .mc-seg:nth-child(1), .mc-seg:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.05); } }
@media (max-width: 620px) { .mc-strip { grid-template-columns: 1fr; }
  .mc-seg { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); } .mc-seg:last-child { border-bottom: none; } }

/* ── Floating quick-action launcher ── */
.mc-fab-wrap { position: fixed; right: 26px; bottom: 26px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mc-fab { width: 56px; height: 56px; border-radius: 18px; border: none; cursor: pointer; color: #04121f;
  background: linear-gradient(135deg, #3b82f6, #22d3ee); box-shadow: 0 12px 30px -8px rgba(34,211,238,.6), 0 4px 12px rgba(0,0,0,.5);
  display: grid; place-items: center; transition: transform .2s, box-shadow .2s; }
.mc-fab svg { width: 24px; height: 24px; transition: transform .25s; }
.mc-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px -8px rgba(34,211,238,.7); }
.mc-fab-wrap.open .mc-fab { transform: rotate(135deg); }
.mc-fab-menu { display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none;
  transform-origin: bottom right; transition: opacity .2s, transform .2s; }
.mc-fab-wrap.open .mc-fab-menu { opacity: 1; transform: none; pointer-events: auto; }
.mc-fab-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px; cursor: pointer;
  background: rgba(14,22,34,.96); border: 1px solid rgba(120,150,200,.16); color: #cbd5e1; font: 600 12.5px var(--nav-font); white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.8); transition: border-color .15s, transform .12s; }
.mc-fab-item:hover { border-color: rgba(120,160,230,.4); transform: translateX(-3px); }
.mc-fab-ic { width: 26px; height: 26px; border-radius: 8px; } .mc-fab-ic svg { width: 14px; height: 14px; }

/* ── AXIS robot: thinking state ── */
.axis-think { position: absolute; top: -4px; left: 60%; display: flex; gap: 3px; opacity: 0; pointer-events: none; z-index: 3; }
.axis-think i { width: 4px; height: 4px; border-radius: 50%; background: var(--axis-eye); }
.axis-char[data-state="thinking"] { --axis-eye: #a78bfa; }
.axis-char[data-state="thinking"] .axis-think { opacity: 1; }
.axis-char[data-state="thinking"] .axis-think i { animation: axisThink 1.2s ease-in-out infinite; }
.axis-char[data-state="thinking"] .axis-think i:nth-child(2) { animation-delay: .15s; }
.axis-char[data-state="thinking"] .axis-think i:nth-child(3) { animation-delay: .3s; }
@keyframes axisThink { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }

/* ── Entrance stagger ── */
.mc-rail { animation: ccRise .4s ease both; }
.mc-main > * { animation: ccRise .42s cubic-bezier(.2,.7,.3,1) both; }
.mc-axis { animation-delay: 40ms; } .mc-jobs { animation-delay: 100ms; } .mc-fleet { animation-delay: 150ms; }
.mc-strip { animation: ccRise .42s ease .2s both; }
.mc-home .mc-timeline { animation: ccRise .5s ease .28s both; }
.mc-fab-wrap { animation: ccRise .4s ease .35s both; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .mc-rail, .mc-main > *, .mc-strip, .mc-home .mc-timeline, .mc-fab-wrap, .mc-orb, .axis-think i, .mc-scan-dot { animation: none !important; }
  .mc-axis:hover, .mc-panel:hover, .mc-seg:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP SHELL V4 — labeled sidebar, brand, profile/status footer, collapse rail
   ═══════════════════════════════════════════════════════════════════════════ */
.sb-brand-row { padding: 0 4px 14px; }
.sb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-wordmark { font: 800 16px var(--nav-font); letter-spacing: .18em;
  background: linear-gradient(90deg, #e6f6ff, #8fb6d8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.sb-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); }
.sb-ext { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: var(--surface-1); border: 1px solid var(--line); }
.sb-ext-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-faint); }
.sb-ext.on .sb-ext-dot { background: var(--success); box-shadow: 0 0 8px rgba(83,217,157,.6); animation: hbDotPulse 2s infinite; }
.sb-ext.off .sb-ext-dot { background: var(--coral); }
.sb-ext .sb-user-copy strong { color: var(--text-2); font-size: 11px; font-weight: 700; }
.sb-ext .sb-user-copy span { color: var(--text-faint); font-size: 9.5px; }
.sb-user .sb-user-copy { flex: 1; min-width: 0; }
.sb-user .sb-user-copy strong { display: block; font-size: 11.5px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user .sb-user-copy span { display: block; font-size: 9.5px; color: var(--text-muted); margin-top: 1px; }

/* Collapsed rail behaviour */
.dash.sb-collapsed .sb-wordmark { display: none; }
.dash.sb-collapsed .sb-brand-row { flex-direction: column; gap: 8px; }
.dash.sb-collapsed .sb-brand { justify-content: center; }
.dash.sb-collapsed .sb-ext { justify-content: center; padding: 8px 0; }
.dash.sb-collapsed .sb-foot { gap: 6px; }
.dash:not(.sb-collapsed) .nav-item .nav-label { display: inline; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMMAND CENTER V5 — workflow-first: Automation Control Surface hero,
   compact AXIS assistant, operations queue, supporting previews (cc2-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.cc2-top { display: grid; grid-template-columns: minmax(0, 2.9fr) minmax(258px, 1fr); gap: 14px; animation: ccRise .42s cubic-bezier(.2,.7,.3,1) both; }
@media (max-width: 1080px) { .cc2-top { grid-template-columns: 1fr; } }

/* ── Automation Control Surface (hero) ── */
.cc2-acs { position: relative; display: flex; flex-direction: column; padding: 18px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 80% at 15% 0%, rgba(59,130,246,.08), transparent 55%), linear-gradient(165deg, #0f1a2c, #090e18 78%);
  border: 1px solid rgba(80,130,230,.18); box-shadow: 0 22px 56px -30px rgba(0,0,0,.95); }
.cc2-acs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cc2-acs-title { font: 800 19px var(--nav-font); color: #eef3fb; letter-spacing: -.01em; line-height: 1; margin-top: 3px; }
.cc2-acs-state { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px; }
.cc2-acs-state.active { background: rgba(34,211,238,.12); color: #22d3ee; }
.cc2-acs-state.failed { background: rgba(248,113,113,.12); color: #f87171; }
.cc2-acs-state.completed { background: rgba(52,211,153,.12); color: #34d399; }
.cc2-acs-state.queued { background: rgba(148,163,184,.12); color: #94a3b8; }
.cc2-acs-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #94a3b8; margin-bottom: 12px; flex-wrap: wrap; }
.cc2-acs-wf { font-weight: 700; color: #e6edf6; font-size: 13px; }
.cc2-acs-d { width: 3px; height: 3px; border-radius: 50%; background: #475569; }

/* execution path */
.cc2-path { display: flex; align-items: center; margin: 6px 0 16px; }
.cc2-path.is-empty { opacity: .6; }
.cc2-stage { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px; }
.cc2-stage-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; border: 1.5px solid #243349; background: #0d1726; color: #5b6b82; transition: all .25s; }
.cc2-stage-ic svg { width: 18px; height: 18px; }
.cc2-stage-l { font-size: 11px; font-weight: 700; color: #8595ab; }
.cc2-stage-s { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: #475569; }
.cc2-stage.done .cc2-stage-ic { border-color: #34d399; color: #34d399; background: rgba(52,211,153,.1); box-shadow: 0 0 14px rgba(52,211,153,.18); }
.cc2-stage.done .cc2-stage-l { color: #cbd5e1; } .cc2-stage.done .cc2-stage-s { color: #34d399; }
.cc2-stage.active .cc2-stage-ic { border-color: #22d3ee; color: #22d3ee; background: rgba(34,211,238,.12); box-shadow: 0 0 0 4px rgba(34,211,238,.12), 0 0 18px rgba(34,211,238,.4); animation: ccPulse 1.6s infinite; }
.cc2-stage.active .cc2-stage-l, .cc2-stage.active .cc2-stage-s { color: #22d3ee; }
.cc2-stage.failed .cc2-stage-ic { border-color: #f87171; color: #f87171; background: rgba(248,113,113,.12); box-shadow: 0 0 16px rgba(248,113,113,.3); }
.cc2-stage.failed .cc2-stage-l, .cc2-stage.failed .cc2-stage-s { color: #f87171; }
.cc2-link { flex: 1; height: 2px; background: #1c2840; border-radius: 2px; position: relative; overflow: hidden; min-width: 16px; }
.cc2-link.lit { background: linear-gradient(90deg, #34d399, #22d3ee); }
.cc2-link.lit::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: ccFlow 1.8s linear infinite; }
@keyframes ccFlow { 0% { transform: translateX(-120%); } 100% { transform: translateX(420%); } }

.cc2-acs-metrics { display: flex; gap: 8px; margin-bottom: 12px; }
.cc2-m { flex: 1; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 9px 8px; text-align: center; }
.cc2-m b { font: 900 17px var(--nav-font); color: #e6edf6; display: block; line-height: 1; }
.cc2-m b.c-green { color: #34d399; } .cc2-m b.c-cyan { color: #22d3ee; } .cc2-m b.c-muted { color: #64748b; }
.cc2-m span { font-size: 9px; color: #64748b; margin-top: 4px; display: block; letter-spacing: .03em; }
.cc2-acs-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; margin-bottom: 12px; }
.cc2-acs-bar-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #3b82f6, #22d3ee); transition: width .6s; }
.cc2-acs-bar-fill.err { background: linear-gradient(90deg, #ef4444, #f87171); }
.cc2-acs-bar-fill.live { background-image: linear-gradient(90deg, #2563eb, #22d3ee, #2563eb); background-size: 200% 100%; animation: ccProg 1.6s linear infinite; }
.cc2-acs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.cc2-acs-actions { display: flex; gap: 8px; }
.cc2-acs-actions .mc-btn { flex: 0 0 auto; min-width: 130px; }
.cc2-acs-ctrls { display: flex; gap: 6px; }
.cc2-ctrl { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; font: 700 11px var(--nav-font); cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #94a3b8; transition: color .15s, border-color .15s; }
.cc2-ctrl svg { width: 12px; height: 12px; }
.cc2-ctrl:not([disabled]):hover { color: #e6edf6; border-color: rgba(140,180,255,.3); }
.cc2-ctrl[disabled] { opacity: .4; cursor: not-allowed; }
.cc2-ctrl.retry { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.06); }
.cc2-acs-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); }
.cc2-acs-empty-t { font-size: 13.5px; font-weight: 700; color: #e6edf6; }
.cc2-acs-empty p { font-size: 11.5px; color: #8595ab; line-height: 1.5; margin: 4px 0 0; max-width: 380px; }

/* ── Compact AXIS assistant ── */
.cc2-axis { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 15px; border-radius: 18px; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 70% at 80% 0%, rgba(167,139,250,.1), transparent 55%), linear-gradient(165deg, #120f22, #0a0d18 80%);
  border: 1px solid rgba(167,139,250,.2); box-shadow: 0 22px 56px -30px rgba(0,0,0,.95); transition: transform .18s, border-color .18s; }
.cc2-axis:hover { transform: translateY(-2px); border-color: rgba(167,139,250,.38); }
.cc2-axis:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(167,139,250,.3); }
.cc2-axis-head { display: flex; align-items: center; gap: 12px; }
.cc2-axis-bot { width: 70px; height: 92px; position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cc2-axis-bot .axis-char { margin: 0; animation: axisFloatSm 3.4s ease-in-out infinite; }
/* Compact robot: hide the hero-scale rings, ambient glow, shadow + think dots
   (they're sized for the big hero and otherwise spill across the panel). */
.cc2-axis-bot .axis-ring, .cc2-axis-bot .axis-shadow, .cc2-axis-bot .axis-think { display: none; }
.cc2-axis-bot .axis-char::before { display: none; }
@keyframes axisFloatSm { 0%,100% { transform: translateY(0) scale(.58); } 50% { transform: translateY(-6px) scale(.58); } }
/* Compact AXIS face avatar (assistant panel) — visor + glowing eyes, no rings */
.axis-face { --eye: #22d3ee; position: relative; width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(148deg, #1e3d64, #0e2038 55%, #091628); border: 1.5px solid rgba(148,210,237,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.5); display: grid; place-items: center; }
.axis-face[data-state="warn"] { --eye: #fbbf24; }
.axis-face[data-state="critical"] { --eye: #f87171; }
.axis-face[data-state="success"] { --eye: #34d399; }
.axis-face[data-state="scanning"] { --eye: #60a5fa; }
.axis-face[data-state="thinking"] { --eye: #a78bfa; }
.axis-face-ant { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 3px; height: 7px; background: linear-gradient(#4a9fd4, #1f4d72); border-radius: 2px; }
.axis-face-ant::after { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--eye); box-shadow: 0 0 6px var(--eye); }
.axis-face-visor { width: 38px; height: 18px; border-radius: 7px; background: linear-gradient(180deg, #050f1c, #071728); border: 1px solid rgba(34,211,238,.12); box-shadow: inset 0 0 8px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; gap: 8px; }
.axis-face-eye { width: 9px; height: 6px; border-radius: 3px; background: var(--eye); box-shadow: 0 0 5px var(--eye), 0 0 11px var(--eye); animation: axisEyeGlow 1.8s ease-in-out infinite, axisBlink 5.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .axis-face-eye { animation: none; } }

/* ── AXIS mascot robot (self-contained, metallic, alive) ── */
.bot { --eye: #3ee0ff; position: relative; width: 60px; height: 76px; flex-shrink: 0; transform-origin: 50% 90%;
  animation: botFloat 3.6s ease-in-out infinite, botJiggle 9s ease-in-out infinite; }
.bot[data-state="warn"] { --eye: #fbbf24; }
.bot[data-state="critical"] { --eye: #f87171; }
.bot[data-state="success"] { --eye: #34d399; }
.bot[data-state="scanning"] { --eye: #60a5fa; }
.bot[data-state="thinking"] { --eye: #a78bfa; }
/* antenna */
.bot-ant { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 3px; height: 9px; border-radius: 2px; background: linear-gradient(#8294ac, #3a4658); z-index: 3; }
.bot-ant-dot { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--eye); animation: botAnt 1.8s ease-in-out infinite; }
/* head */
.bot-head { position: relative; width: 52px; height: 40px; margin: 7px auto 0; border-radius: 16px 16px 13px 13px;
  background: linear-gradient(140deg, #74859e 0%, #3c4a5e 26%, #4f5d74 46%, #262f40 70%, #5a6884 100%);
  border: 1px solid rgba(190,210,240,.28); box-shadow: inset 0 2px 3px rgba(255,255,255,.22), inset 0 -4px 6px rgba(0,0,0,.45), 0 5px 11px rgba(0,0,0,.5); }
.bot-ear { position: absolute; top: 13px; width: 5px; height: 15px; border-radius: 3px; background: linear-gradient(#566480, #232c3b); border: 1px solid rgba(190,210,240,.2); }
.bot-ear--l { left: -4px; } .bot-ear--r { right: -4px; }
.bot-shine { position: absolute; top: 4px; left: 9px; right: 17px; height: 9px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent); filter: blur(.5px); pointer-events: none; }
.bot-shine--sm { top: 3px; height: 6px; }
/* visor + eyes */
.bot-visor { position: absolute; top: 12px; left: 7px; right: 7px; height: 19px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 150% at 50% 25%, #0c1c2e, #02060c 75%); border: 1px solid rgba(60,110,150,.5);
  box-shadow: inset 0 0 10px rgba(0,0,0,.75), inset 0 1px 2px rgba(120,180,255,.18);
  display: flex; align-items: center; justify-content: center; gap: 9px; animation: botLook 7s ease-in-out infinite; }
.bot-eye { width: 10px; height: 10px; border-radius: 50%; background: var(--eye); box-shadow: 0 0 6px var(--eye), 0 0 13px var(--eye);
  animation: botGlow 2s ease-in-out infinite, botBlink 4.6s ease-in-out infinite; }
.bot-visor-glare { position: absolute; top: 2px; left: 4px; width: 18px; height: 6px; border-radius: 50%; background: linear-gradient(180deg, rgba(160,200,255,.35), transparent); transform: rotate(-8deg); pointer-events: none; }
/* body */
.bot-body { position: relative; width: 46px; height: 27px; margin: 3px auto 0; border-radius: 11px 11px 14px 14px;
  background: linear-gradient(140deg, #647288 0%, #2d3747 50%, #495774 100%);
  border: 1px solid rgba(190,210,240,.24); box-shadow: inset 0 2px 3px rgba(255,255,255,.16), inset 0 -3px 6px rgba(0,0,0,.42), 0 6px 13px rgba(0,0,0,.45); display: grid; place-items: center; }
.bot-core { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #d6f3ff, var(--eye) 58%, #0a3a5c); box-shadow: 0 0 9px var(--eye), inset 0 0 4px rgba(255,255,255,.5); animation: botGlow 2.4s ease-in-out infinite; }
/* life */
@keyframes botFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes botJiggle { 0%,86%,100% { transform: rotate(0deg); } 89% { transform: rotate(-5deg); } 92% { transform: rotate(4deg); } 95% { transform: rotate(-2deg); } 98% { transform: rotate(1deg); } }
@keyframes botBlink { 0%,93%,100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } 97.5% { transform: scaleY(1); } }
@keyframes botGlow { 0%,100% { opacity: .88; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.45); } }
@keyframes botLook { 0%,28%,100% { transform: translateX(0); } 42%,56% { transform: translateX(3px); } 70%,84% { transform: translateX(-3px); } }
@keyframes botAnt { 0%,100% { opacity: .6; box-shadow: 0 0 4px var(--eye); } 50% { opacity: 1; box-shadow: 0 0 11px var(--eye); } }
.bot[data-state="scanning"] .bot-visor { animation-duration: 2.2s; }
.bot[data-state="scanning"] .bot-eye, .bot[data-state="critical"] .bot-eye { animation-duration: 1s, 4.6s; }
@media (prefers-reduced-motion: reduce) { .bot, .bot-visor, .bot-eye, .bot-core, .bot-ant-dot { animation: none !important; } }

/* AXIS assistant insight checks */
.cc2-axis-checks { display: flex; flex-direction: column; gap: 6px; }
.cc2-chk { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); font-size: 11px; color: #94a3b8; }
.cc2-chk span:not(.cc2-chk-ic) { flex: 1; }
.cc2-chk-ic { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; }
.cc2-chk-ic svg { width: 12px; height: 12px; }
.cc2-chk.ok .cc2-chk-ic { background: rgba(52,211,153,.14); color: #34d399; }
.cc2-chk.warn .cc2-chk-ic { background: rgba(251,191,36,.14); color: #fbbf24; }
.cc2-chk b { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.cc2-chk.ok b { color: #34d399; }
.cc2-chk.warn b { color: #fbbf24; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANALYTICS OVERLAY (an-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.an-bg { display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1000; }
.an-modal { width: min(960px, 96vw); max-height: 90vh; overflow-y: auto; border-radius: 20px;
  background: linear-gradient(165deg, #0f1826, #0a0f18); border: 1px solid rgba(120,150,200,.16); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9);
  animation: ccRise .26s cubic-bezier(.2,.7,.3,1) both; }
.an-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(15,24,38,.98), rgba(15,24,38,.92)); z-index: 1; }
.an-head h2 { font: 800 19px var(--nav-font); color: #eef3fb; margin: 2px 0 0; }
.an-head-right { display: flex; align-items: center; gap: 10px; }
.an-close { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #94a3b8; transition: color .15s, border-color .15s, background .15s; }
.an-close:hover { color: #e6edf6; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); }
.an-close svg { width: 15px; height: 15px; }
.an-body { padding: 18px 22px 24px; }
.an-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.an-kpi { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px; }
.an-kpi span { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.an-kpi b { display: block; font: 900 22px var(--nav-font); color: #eef3fb; line-height: 1; margin: 6px 0 4px; letter-spacing: -.5px; }
.an-kpi i { font-size: 10px; color: #64748b; font-style: normal; }
.an-kpi i.up { color: #34d399; } .an-kpi i.down { color: #f87171; }
@media (max-width: 760px) { .an-kpis { grid-template-columns: repeat(3, 1fr); } }
.an-chart-wrap { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.an-chart-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.an-togs { display: flex; gap: 7px; flex-wrap: wrap; }
.an-tog { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; cursor: pointer; font: 700 11px var(--nav-font); color: #64748b; background: transparent; border: 1px solid rgba(255,255,255,.1); transition: color .15s, border-color .15s, background .15s; }
.an-tog-dot { width: 8px; height: 8px; border-radius: 50%; background: #3a4452; transition: background .15s; }
.an-tog.on { color: #e6edf6; border-color: rgba(140,180,255,.4); background: rgba(120,160,255,.08); }
.an-tog.on .an-tog-dot { background: var(--c); box-shadow: 0 0 8px var(--c); }
.an-periods { display: flex; gap: 5px; }
.an-period { font-size: 10.5px; font-weight: 700; color: #64748b; background: transparent; border: 1px solid rgba(255,255,255,.1); padding: 4px 11px; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.an-period.on { color: #04121f; background: #22d3ee; border-color: #22d3ee; }
.an-chart-svg { width: 100%; height: 270px; display: block; }
.an-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
@media (max-width: 760px) { .an-cols { grid-template-columns: 1fr; } }
.an-panel { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px; }
.an-panel h4 { font: 800 12px var(--nav-font); color: #cbd5e1; margin: 0 0 12px; }
.an-bk { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.an-bk-name { font-size: 11.5px; color: #94a3b8; min-width: 64px; }
.an-bk-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.an-bk-bar div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #22d3ee, #3b82f6); }
.an-bk-val { font-size: 11px; font-weight: 700; color: #cbd5e1; min-width: 92px; text-align: right; }
.an-prod-head, .an-prod { display: grid; grid-template-columns: minmax(0,2fr) 1fr .9fr .6fr; gap: 10px; align-items: center; }
.an-prod-head { padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 6px; }
.an-prod-head span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #56657a; }
.an-prod { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.035); font-size: 11.5px; }
.an-prod:last-child { border-bottom: none; }
.an-prod-name { color: #e6edf6; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-prod-mk { color: #94a3b8; } .an-prod-rev { color: #cbd5e1; font-weight: 700; }
.an-prod-mgn { color: #94a3b8; font-weight: 700; } .an-prod-mgn.good { color: #34d399; }
.an-empty { font-size: 11.5px; color: #64748b; }

/* ── Research / Inventory Manager windows (ov-/rs-/im-) ── */
.ov-modal { width: min(900px, 96vw); }
.ov-empty { display: flex; align-items: center; gap: 14px; padding: 30px 18px; }
.ov-empty p { font-size: 11.5px; color: #8595ab; line-height: 1.5; margin: 4px 0 0; max-width: 440px; }
.rs-bar, .im-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.rs-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 10px; background: #0e1a2a; border: 1px solid rgba(148,163,184,.16); color: #64748b; }
.rs-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.rs-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #e6edf6; font-size: 12.5px; }
.rs-sel { height: 38px; padding: 0 10px; border-radius: 10px; background: #0e1a2a; border: 1px solid rgba(148,163,184,.16); color: #c4d0d5; font-size: 12px; cursor: pointer; outline: none; }
.rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .rs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rs-grid { grid-template-columns: 1fr; } }
.rs-card { display: flex; flex-direction: column; padding: 14px; border-radius: 13px; background: #0e1a2a; border: 1px solid rgba(148,163,184,.12); transition: border-color .15s, transform .15s; }
.rs-card:hover { border-color: rgba(59,130,246,.3); transform: translateY(-2px); }
.rs-thumb { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; font-size: 24px; background: radial-gradient(120% 120% at 30% 20%, rgba(96,165,250,.18), rgba(148,163,184,.04)); border: 1px solid rgba(148,163,184,.14); margin-bottom: 10px; }
.rs-name { font-size: 13px; font-weight: 700; color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-cat { font-size: 11px; color: #718096; margin-top: 2px; }
.rs-stats { display: flex; gap: 8px; margin: 12px 0; }
.rs-stat { flex: 1; }
.rs-stat i { display: block; font-size: 9px; color: #718096; text-transform: uppercase; letter-spacing: .04em; font-style: normal; }
.rs-stat b { font-size: 12.5px; font-weight: 700; }
.rs-stat b.high { color: #34d399; } .rs-stat b.med { color: #fbbf24; } .rs-stat b.low { color: #60a5fa; } .rs-stat b.prof { color: #34d399; }
.rs-queue { margin-top: auto; }
.rs-queue.is-queued { background: rgba(52,211,153,.14); color: #34d399; border-color: rgba(52,211,153,.3); box-shadow: none; cursor: default; }

.im-filters { display: flex; gap: 6px; }
.im-filter { font-size: 11px; font-weight: 600; color: #94a3b8; background: #0e1a2a; border: 1px solid rgba(148,163,184,.16); padding: 7px 11px; border-radius: 9px; cursor: pointer; transition: all .15s; }
.im-filter b { color: #60a5fa; margin-left: 2px; }
.im-filter:hover { border-color: rgba(140,180,255,.3); color: #e6edf6; }
.im-filter.on { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.4); color: #e6edf6; }
.im-table { border: 1px solid rgba(148,163,184,.12); border-radius: 12px; overflow: hidden; }
.im-head, .im-row { display: grid; grid-template-columns: minmax(0,2.4fr) 1fr 1.2fr .7fr .9fr .8fr 36px; align-items: center; gap: 10px; padding: 0 14px; }
.im-head { height: 34px; background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(148,163,184,.12); }
.im-head span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #56657a; }
.im-row { min-height: 50px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; color: #a7b4c7; }
.im-row:last-child { border-bottom: none; }
.im-row:hover { background: rgba(120,160,255,.03); }
.im-cell { display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-prod { gap: 10px; }
.im-prod .af-thumb { width: 34px; height: 34px; font-size: 17px; }
.im-prod-t { display: flex; flex-direction: column; min-width: 0; }
.im-prod-t b { font-size: 12px; color: #f1f5f9; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-prod-t i { font-size: 10px; color: #718096; font-style: normal; font-family: ui-monospace, monospace; }
.im-qty { font-weight: 700; color: #e6edf6; }
.im-good { color: #34d399; font-weight: 700; }
.im-sync { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(148,163,184,.16); color: #94a3b8; cursor: pointer; transition: color .15s, border-color .15s; }
.im-sync svg { width: 13px; height: 13px; }
.im-sync:hover { color: #60a5fa; border-color: rgba(59,130,246,.4); }
.im-sync.spin svg { animation: imSpin .7s linear; }
@keyframes imSpin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .im-head, .im-row { grid-template-columns: minmax(0,2fr) 1fr .7fr 32px; }
  .im-head span:nth-child(2), .im-head span:nth-child(5), .im-head span:nth-child(6),
  .im-row .im-cell:nth-child(2), .im-row .im-cell:nth-child(5), .im-row .im-cell:nth-child(6) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOB DETAIL DRAWER (jd-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.jd-bg { display: flex; justify-content: flex-end; z-index: 1000; }
.jd-drawer { width: min(440px, 96vw); height: 100%; overflow-y: auto; transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.7,.3,1);
  background: linear-gradient(165deg, #0f1826, #0a0f18); border-left: 1px solid rgba(120,150,200,.16); box-shadow: -30px 0 80px -20px rgba(0,0,0,.7); }
.jd-bg.open .jd-drawer { transform: translateX(0); }
.jd-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(15,24,38,.98), rgba(15,24,38,.92)); z-index: 1; }
.jd-head h2 { font: 800 17px var(--nav-font); color: #eef3fb; margin: 2px 0 0; }
.jd-body { padding: 18px 20px 28px; }
.jd-meta { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 6px 12px; margin-bottom: 16px; }
.jd-meta-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; }
.jd-meta-row:last-child { border-bottom: none; }
.jd-meta-row span { color: #64748b; }
.jd-meta-row b { color: #e6edf6; font-weight: 600; }
.jd-status { text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.jd-status.active { background: rgba(34,211,238,.12); color: #22d3ee; }
.jd-status.queued { background: rgba(148,163,184,.1); color: #94a3b8; }
.jd-status.failed { background: rgba(248,113,113,.12); color: #f87171; }
.jd-status.completed { background: rgba(52,211,153,.12); color: #34d399; }
.jd-section-l { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #56657a; margin: 4px 0 10px; }
.jd-path { margin: 0 0 14px; flex-wrap: wrap; gap: 4px 0; }
.jd-path .cc2-stage { min-width: 62px; }
.jd-note { font-size: 11.5px; color: #64748b; margin: 8px 0 18px; }
.jd-note.done { color: #34d399; }
.jd-logs { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.jd-log { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.035); font-size: 11.5px; color: #94a3b8; line-height: 1.5; }
.jd-log:last-child { border-bottom: none; }
.jd-log-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: #64748b; }
.jd-log-dot.active { background: #22d3ee; box-shadow: 0 0 6px #22d3ee; }
.jd-log-dot.completed { background: #34d399; }
.jd-log-dot.failed { background: #f87171; }
.jd-actions { display: flex; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .jd-drawer { transition: none; } }

/* Inventory product detail (inside the jd drawer) */
.iv-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.iv-thumb { width: 76px; height: 76px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0;
  background: radial-gradient(120% 120% at 30% 20%, rgba(120,160,255,.12), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); }
.iv-thumb img, .iv-thumb svg { width: 40px; height: 40px; object-fit: contain; filter: invert(1) opacity(.85); }
.iv-hero-meta { min-width: 0; }
.iv-badge { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.iv-badge.ok { background: rgba(52,211,153,.13); color: #34d399; }
.iv-badge.warn { background: rgba(251,191,36,.13); color: #fbbf24; }
.iv-badge.bad { background: rgba(248,113,113,.13); color: #f87171; }
.iv-hero-mk { font-size: 13px; font-weight: 700; color: #e6edf6; margin-top: 7px; }
.iv-hero-sku { font-size: 11px; color: #64748b; margin-top: 2px; font-family: ui-monospace, monospace; }
.iv-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.iv-price { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; padding: 10px; }
.iv-price span { font-size: 9.5px; color: #64748b; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.iv-price b { display: block; font: 800 16px var(--nav-font); color: #e6edf6; margin-top: 4px; }
.iv-price b.pos { color: #34d399; } .iv-price b.neg { color: #f87171; }
.iv-health { border-radius: 11px; padding: 11px 13px; font-size: 12px; line-height: 1.55; margin-bottom: 18px; border: 1px solid; }
.iv-health.ok { background: rgba(52,211,153,.06); border-color: rgba(52,211,153,.2); color: #a7e9cf; }
.iv-health.warn { background: rgba(251,191,36,.06); border-color: rgba(251,191,36,.22); color: #f1d99a; }
.iv-health.bad { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.24); color: #f1b0b0; }
.iv-source { display: flex; align-items: center; gap: 10px; }
.iv-asin { font-family: ui-monospace, monospace; font-size: 12px; color: #cbd5e1; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.iv-asin.muted { color: #56657a; }

/* Plain-English automation summary */
.ac-plain { font-size: 11.5px; color: #94a3b8; line-height: 1.45; margin: 3px 0 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTOMATION FLOW (af-*) — premium 3-card workflow overview
   ═══════════════════════════════════════════════════════════════════════════ */
.af { margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.af-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.af-head-id { display: flex; gap: 14px; align-items: center; }
.af-head-ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.28); color: #60a5fa; flex-shrink: 0; }
.af-head-ic svg { width: 24px; height: 24px; }
.af-title { font: 800 clamp(22px, 2.4vw, 30px) var(--nav-font); color: #f8fafc; margin: 0; letter-spacing: -.02em; }
.af-sub { font-size: 13px; color: #a7b4c7; margin: 4px 0 0; }
.af-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #34d399; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.26); padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.af-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); animation: hbDotPulse 2s infinite; }
.af-status--warn { color: #fbbf24; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.26); }
.af-status--warn .af-status-dot { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.6); }
.af-status--off { color: #94a3b8; background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.22); }
.af-status--off .af-status-dot { background: #64748b; box-shadow: none; animation: none; }

.af-grid { display: grid; grid-template-columns: 1fr 36px 1fr 36px 1fr; align-items: stretch; }
@media (max-width: 1100px) { .af-grid { grid-template-columns: 1fr; gap: 14px; } }

.af-card { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 30%), #0c1726; border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.9); transition: transform .18s, border-color .18s, box-shadow .18s; }
.af-card::before { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
.af-card:hover { transform: translateY(-2px); border-color: rgba(59,130,246,.3); }
.af-card--listing { border-color: rgba(59,130,246,.42); box-shadow: 0 0 0 1px rgba(59,130,246,.12), 0 22px 48px -26px rgba(37,99,235,.5); }
.af-card--listing::after { content: ''; position: absolute; top: -40%; left: 10%; right: 10%; height: 160px; background: radial-gradient(60% 100% at 50% 0%, rgba(59,130,246,.16), transparent 70%); pointer-events: none; }

.af-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.af-card-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.af-card-ic svg { width: 22px; height: 22px; }
.af-card-ic.blue { background: rgba(59,130,246,.16); border: 1px solid rgba(59,130,246,.3); color: #60a5fa; }
.af-card-ic.green { background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.3); color: #34d399; }
.af-card-id { flex: 1; min-width: 0; }
.af-card-id h3 { font: 800 17px var(--nav-font); color: #f8fafc; margin: 2px 0 0; }
.af-card-id p { font-size: 12px; color: #a7b4c7; line-height: 1.5; margin: 6px 0 0; }
.af-step { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 800 12px var(--nav-font); color: #60a5fa; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.26); flex-shrink: 0; }
.af-card--inventory .af-step { color: #34d399; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.26); }

.af-metrics { display: grid; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(148,163,184,.12); }
.af-metrics--2 { grid-template-columns: repeat(2, 1fr); }
.af-metrics--3 { grid-template-columns: repeat(3, 1fr); }
.af-metrics--4 { grid-template-columns: repeat(4, 1fr); }
.af-metric-lbl { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #718096; }
.af-metric-val { display: flex; align-items: center; gap: 6px; font: 800 22px var(--nav-font); color: #f8fafc; margin-top: 6px; line-height: 1; }
.af-metric-val.blue { color: #60a5fa; } .af-metric-val.green { color: #34d399; } .af-metric-val.violet { color: #a78bfa; }
.af-metric-val.red { color: #f87171; } .af-metric-val.amber { color: #fbbf24; } .af-metric-val.muted { color: #718096; }
@media (max-width: 640px) { .af-metrics--3, .af-metrics--4 { grid-template-columns: repeat(2, 1fr); } .af-metric-val { font-size: 18px; } }

.af-live { width: 8px; height: 8px; border-radius: 50%; background: #475569; }
.af-live.on { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); animation: hbDotPulse 2s infinite; }

.af-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.af-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: #c4d0d5; background: #101d2e; border: 1px solid rgba(148,163,184,.16); padding: 6px 11px; border-radius: 9px; cursor: pointer; transition: border-color .15s, background .15s; }
.af-chip:hover { border-color: rgba(59,130,246,.4); background: #132235; }
.af-chip-ic { width: 16px; height: 16px; display: grid; place-items: center; }
.af-chip-ic img, .af-chip-ic svg { width: 14px; height: 14px; object-fit: contain; }
.af-chip-ic b { font-size: 11px; color: #60a5fa; }

.af-section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.af-section-t { font-size: 12px; font-weight: 700; color: #c4d0d5; }
.af-link { font-size: 11.5px; font-weight: 600; color: #60a5fa; background: none; border: none; cursor: pointer; padding: 0; transition: color .15s; }
.af-link:hover { color: #93c5fd; text-decoration: underline; }

.af-rows { display: flex; flex-direction: column; gap: 8px; }
.af-row, .af-inv-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 11px; background: #0e1a2a; border: 1px solid rgba(148,163,184,.1); transition: border-color .15s, background .15s; }
.af-row:hover, .af-inv-row:hover { border-color: rgba(59,130,246,.26); background: #101f31; }
.af-thumb { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: 19px; line-height: 1; background: radial-gradient(120% 120% at 30% 20%, rgba(96,165,250,.18), rgba(148,163,184,.04)); border: 1px solid rgba(148,163,184,.14); color: #93b4d8; }
.af-thumb svg { width: 18px; height: 18px; }
.af-row-main { flex: 1; min-width: 0; }
.af-row-name { font-size: 12.5px; font-weight: 600; color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-row-sub { font-size: 10.5px; color: #718096; margin-top: 1px; }
.af-row-stat { text-align: right; min-width: 54px; }
.af-stat-lbl { display: block; font-size: 9px; color: #718096; text-transform: uppercase; letter-spacing: .04em; }
.af-stat-val { font-size: 11.5px; font-weight: 700; }
.af-stat-val.high { color: #34d399; } .af-stat-val.med { color: #fbbf24; } .af-stat-val.low { color: #60a5fa; }
@media (max-width: 640px) { .af-row-stat:nth-child(4) { display: none; } }

.af-speed { background: #0e1a2a; border: 1px solid rgba(148,163,184,.1); border-radius: 12px; padding: 13px; margin-bottom: 14px; }
.af-speed-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #a7b4c7; margin-bottom: 9px; }
.af-speed-top b { font: 800 13px var(--nav-font); }
.blue { color: #60a5fa; }
.af-prog { height: 8px; border-radius: 5px; background: rgba(148,163,184,.14); overflow: hidden; }
.af-prog-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #3b82f6, #60a5fa); transition: width 1.1s cubic-bezier(.2,.7,.3,1); }
.af-prog-pct { text-align: right; font-size: 10.5px; font-weight: 700; color: #60a5fa; margin-top: 5px; }
.af-tasks { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.af-task { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px; background: #0e1a2a; border: 1px solid rgba(148,163,184,.1); }
.af-task-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(59,130,246,.12); color: #60a5fa; flex-shrink: 0; }
.af-task-ic svg { width: 14px; height: 14px; }
.af-task-main { flex: 1; min-width: 0; }
.af-task-lbl { font-size: 12px; font-weight: 600; color: #e2e8f0; }
.af-segs { display: flex; gap: 3px; margin-top: 6px; }
.af-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(148,163,184,.16); }
.af-seg.on { background: #3b82f6; }
.af-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex-shrink: 0; background: rgba(148,163,184,.1); color: #475569; }
.af-check.on { background: rgba(34,197,94,.16); color: #34d399; }
.af-cta { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 11px; font: 700 13px var(--nav-font); cursor: pointer; color: #eaf2ff; background: linear-gradient(180deg, #3b82f6, #2563eb); border: 1px solid rgba(120,170,255,.5); box-shadow: 0 8px 18px -8px rgba(37,99,235,.9); transition: filter .15s, transform .1s; }
.af-cta:hover { filter: brightness(1.08); } .af-cta:active { transform: translateY(1px); }
.af-cta svg { width: 14px; height: 14px; }
.af-cta--green { background: linear-gradient(180deg, #22c55e, #16a34a); border-color: rgba(74,222,128,.45); box-shadow: 0 8px 18px -8px rgba(22,163,74,.9); }
/* Balance: align all three card CTAs to the bottom edge */
.af-card--research .af-cta, .af-card--inventory .af-cta { margin-top: auto; }

.af-chips--status { gap: 10px; }
.af-schip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #a7b4c7; }
.af-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.af-dot.in { background: #22c55e; } .af-dot.out { background: #ef4444; } .af-dot.paused, .af-dot.low { background: #f59e0b; } .af-dot.synced { background: #38bdf8; }
.af-inv-status { display: flex; align-items: center; gap: 6px; min-width: 96px; }
.af-inv-status-t { font-size: 11.5px; font-weight: 600; }
.af-inv-status-t.in { color: #34d399; } .af-inv-status-t.out { color: #f87171; } .af-inv-status-t.low { color: #fbbf24; }
.af-inv-qty { font: 800 13px var(--nav-font); color: #f1f5f9; min-width: 36px; text-align: right; }
.af-kebab { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 16px; line-height: 1; color: #718096; background: transparent; border: 1px solid transparent; cursor: pointer; transition: color .15s, background .15s, border-color .15s; flex-shrink: 0; }
.af-kebab:hover, .af-kebab:focus-visible { color: #e6edf6; background: #132235; border-color: rgba(148,163,184,.2); outline: none; }
@media (max-width: 640px) { .af-inv-status-t { display: none; } .af-inv-status { min-width: 0; } }

.af-empty { font-size: 11.5px; color: #718096; padding: 14px; text-align: center; background: #0e1a2a; border: 1px dashed rgba(148,163,184,.16); border-radius: 11px; }

/* Connectors */
.af-conn { display: flex; align-items: center; justify-content: center; position: relative; }
.af-conn::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(59,130,246,.1), rgba(59,130,246,.45), rgba(59,130,246,.1)); }
.af-conn::after { content: ''; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); background: #60a5fa; box-shadow: 0 0 8px #60a5fa; animation: afFlow 3s linear infinite; }
@keyframes afFlow { 0% { left: -6px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.af-conn-node { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #0c1726; border: 1px solid rgba(59,130,246,.4); color: #60a5fa; }
.af-conn-node svg { width: 14px; height: 14px; transform: rotate(180deg); }
@media (max-width: 1100px) {
  .af-conn { height: 30px; }
  .af-conn::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: translateX(-50%); background: linear-gradient(180deg, rgba(59,130,246,.1), rgba(59,130,246,.45), rgba(59,130,246,.1)); }
  .af-conn::after { display: none; }
  .af-conn-node svg { transform: rotate(-90deg); }
}

/* Summary */
.af-summary { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; padding: 14px 20px; background: #0c1726; border: 1px solid rgba(148,163,184,.16); border-radius: 14px; }
.af-summary-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(34,197,94,.14); color: #34d399; }
.af-summary-ic svg { width: 16px; height: 16px; }
.af-summary b { font: 800 14px var(--nav-font); color: #f8fafc; }
.af-summary-div { width: 1px; height: 18px; background: rgba(148,163,184,.2); }
.af-summary-sub { font-size: 12.5px; color: #a7b4c7; }

/* Entrance + reduced motion */
@keyframes afRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.af-grid > .af-card { animation: afRise .42s ease both; }
.af-grid > .af-card:nth-child(3) { animation-delay: 90ms; }
.af-grid > .af-card:nth-child(5) { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .af-grid > .af-card, .af-prog-fill { animation: none !important; transition: none !important; }
  .af-conn::after, .af-status-dot, .af-live.on { animation: none !important; }
  .af-card:hover { transform: none; }
}
.cc2-axis-id { flex: 1; min-width: 0; }
.cc2-axis-id strong { display: block; font: 800 18px var(--nav-font); color: #eef3fb; line-height: 1; margin-top: 2px; }
/* position:relative (not static) keeps the ::before dark center scoped to the
   badge — with static it escapes to the panel and fills it as a big ellipse. */
.mc-score-badge.sm { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.mc-score-badge.sm span { font-size: 15px; }
.cc2-axis-msg { border-radius: 11px; padding: 10px 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); }
.cc2-axis-msg.warn { border-color: rgba(251,191,36,.22); background: rgba(251,191,36,.05); }
.cc2-axis-msg.critical { border-color: rgba(248,113,113,.24); background: rgba(248,113,113,.06); }
.cc2-axis-msg-t { font-size: 12.5px; font-weight: 700; color: #e6edf6; }
.cc2-axis-msg p { font-size: 11px; color: #8595ab; line-height: 1.5; margin: 5px 0 0; }
.cc2-axis-meta { display: flex; gap: 7px; font-size: 10.5px; color: #64748b; }
.cc2-axis-actions { display: flex; gap: 7px; }
.cc2-axis-open { width: 100%; justify-content: center; }

/* ── Operations queue ── */
.cc2-queue { border-radius: 16px; overflow: hidden; margin-top: 2px; background: linear-gradient(180deg, rgba(17,26,44,.6), rgba(11,16,25,.6)); border: 1px solid rgba(120,150,200,.1); animation: ccRise .42s ease .12s both; }
.cc2-queue-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.cc2-queue-title { font: 800 15px var(--nav-font); color: #eef3fb; margin-top: 2px; }
.cc2-qfilters { display: flex; gap: 5px; margin-left: 6px; flex-wrap: wrap; }
.cc2-qfilter { font-size: 10.5px; font-weight: 700; color: #64748b; background: transparent; border: 1px solid rgba(255,255,255,.08); padding: 3px 11px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.cc2-qfilter:hover { color: #94a3b8; border-color: rgba(255,255,255,.16); }
.cc2-qfilter.on { color: #04121f; background: #22d3ee; border-color: #22d3ee; }
.cc2-qhead-row, .cc2-qrow { display: grid; grid-template-columns: minmax(0,2.4fr) 1fr 1fr .9fr 1.3fr .9fr 24px; align-items: center; gap: 10px; padding: 0 16px; }
.cc2-qhead-row { height: 30px; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
.cc2-qhead-row span { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #56657a; }

/* ── Pending Orders / Fulfillment card (replaces Operations Queue) ──────────── */
.sx-orders-card { display: flex; flex-direction: column; }
.sx-orders-count { font: 700 13px ui-sans-serif,system-ui,sans-serif; color: #22d3ee; margin-left: 6px; }
.sx-orders-toolbar { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sx-sandbox-toggle { display: flex; align-items: center; gap: 6px; font: 700 11px ui-sans-serif,system-ui,sans-serif; color: #94a3b8; cursor: pointer; user-select: none; }
.sx-sandbox-toggle input { accent-color: #22d3ee; width: 14px; height: 14px; cursor: pointer; }
.sx-orders-refresh { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(120,150,200,.2); background: rgba(120,150,200,.08); color: #cbd5e1; cursor: pointer; transition: all .15s; }
.sx-orders-refresh:hover { background: rgba(34,211,238,.15); border-color: rgba(34,211,238,.4); color: #22d3ee; }
.sx-orders-refresh svg { width: 16px; height: 16px; }
.sx-orders-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; color: #64748b; }
.sx-orders-loading .cc-empty-ico { width: 40px; height: 40px; opacity: .5; }
.sx-orders-loading p { font-size: 13px; }

.sx-orders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 4px 16px 12px; }

/* The hover-grow order card */
.sx-order-card { position: relative; display: flex; gap: 12px; padding: 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(30,41,59,.5), rgba(15,23,42,.5)); border: 1px solid rgba(120,150,200,.12);
  cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s, background .2s; }
.sx-order-card:hover { transform: translateY(-3px) scale(1.015); border-color: rgba(34,211,238,.35);
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(34,211,238,.15); background: linear-gradient(180deg, rgba(34,211,238,.06), rgba(15,23,42,.6)); }
.sx-order-card.selected { border-color: rgba(34,211,238,.55); background: linear-gradient(180deg, rgba(34,211,238,.1), rgba(15,23,42,.5)); }

.sx-order-check { position: absolute; top: 10px; right: 10px; z-index: 2; }
.sx-order-check input { accent-color: #22d3ee; width: 16px; height: 16px; cursor: pointer; }

.sx-order-thumb { flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  background: rgba(15,23,42,.6); border: 1px solid rgba(120,150,200,.1); display: flex; align-items: center; justify-content: center; }
.sx-order-img { width: 100%; height: 100%; object-fit: cover; }
.sx-order-img-ph { width: 26px; height: 26px; opacity: .35; color: #64748b; }
.sx-order-img-ph svg { width: 100%; height: 100%; }

.sx-order-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-right: 28px; }
.sx-order-title { font: 700 13px ui-sans-serif,system-ui,sans-serif; color: #e2e8f0; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sx-order-qty { font-weight: 700; color: #22d3ee; }
.sx-order-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #64748b; }
.sx-order-buyer { color: #94a3b8; font-weight: 600; }
.sx-order-loc::before { content: '·'; margin-right: 6px; opacity: .5; }
.sx-order-time::before { content: '·'; margin-right: 6px; opacity: .5; }
.sx-order-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.sx-order-asin { font: 700 9.5px ui-monospace,monospace; color: #22d3ee; background: rgba(34,211,238,.1); padding: 2px 7px; border-radius: 4px; letter-spacing: .03em; }
.sx-order-tag { font: 700 9px ui-sans-serif,system-ui,sans-serif; color: #64748b; background: rgba(120,150,200,.1); padding: 2px 7px; border-radius: 4px; letter-spacing: .05em; text-transform: uppercase; }
.sx-order-tag.sandbox { color: #fbbf24; background: rgba(251,191,36,.12); }
.sx-order-tag.done { color: #34d399; background: rgba(52,211,153,.12); }

.sx-order-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; justify-content: center; }
.sx-order-amt { font: 800 16px ui-sans-serif,system-ui,sans-serif; color: #34d399; }

/* Bulk action bar */
.sx-orders-bulkbar { display: flex; align-items: center; gap: 14px; padding: 12px 16px 14px;
  border-top: 1px solid rgba(120,150,200,.1); background: rgba(11,16,25,.4); }
.sx-select-all { display: flex; align-items: center; gap: 6px; font: 700 12px ui-sans-serif,system-ui,sans-serif; color: #94a3b8; cursor: pointer; }
.sx-select-all input { accent-color: #22d3ee; width: 15px; height: 15px; cursor: pointer; }
.sx-bulk-count { font-size: 12px; color: #64748b; }
.sx-bulk-fulfill { margin-left: auto; }

/* Fulfillment overlay (large modal) */
.sx-order-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
  background: rgba(2,6,16,.7); backdrop-filter: blur(8px); animation: ccFade .2s ease; padding: 24px; }
.sx-order-modal { position: relative; width: 100%; max-width: 540px; max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(17,26,44,.97), rgba(11,16,25,.97)); border: 1px solid rgba(34,211,238,.25);
  border-radius: 18px; padding: 28px; box-shadow: 0 24px 64px rgba(0,0,0,.6); animation: ccRise .28s cubic-bezier(.2,.8,.2,1); }
.sx-overlay-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(120,150,200,.2); background: rgba(120,150,200,.08); color: #94a3b8; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sx-overlay-close:hover { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.4); color: #f87171; }
.sx-overlay-head { display: flex; gap: 16px; margin-bottom: 20px; padding-right: 40px; }
.sx-overlay-head .sx-order-thumb { width: 72px; height: 72px; }
.sx-overlay-head h2 { font: 800 17px ui-sans-serif,system-ui,sans-serif; color: #eef3fb; margin: 4px 0 8px; line-height: 1.3; }
.sx-overlay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-bottom: 18px; }
.sx-overlay-row { display: flex; flex-direction: column; gap: 3px; }
.sx-overlay-lbl { font: 800 9.5px ui-sans-serif,system-ui,sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #56657a; }
.sx-overlay-val { font-size: 13px; color: #cbd5e1; }
.sx-overlay-val.sx-amt { font-weight: 800; font-size: 16px; color: #34d399; }
.sx-overlay-source { font-size: 12px; color: #64748b; margin-bottom: 18px; }
.sx-overlay-source a { color: #22d3ee; text-decoration: none; }
.sx-overlay-source a:hover { text-decoration: underline; }
.sx-overlay-actions { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 640px) {
  .sx-orders-grid { grid-template-columns: 1fr; }
  .sx-overlay-grid { grid-template-columns: 1fr; }
}
.cc2-qrow { min-height: 46px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .12s; }
.cc2-qrow:last-child { border-bottom: none; }
.cc2-qrow:hover { background: rgba(120,160,255,.04); }
.cc2-qrow:focus-visible { outline: none; background: rgba(120,160,255,.07); box-shadow: inset 3px 0 0 #3b82f6; }
.cc2-qrow.cc-hidden { display: none; }
.cc2-qcell { font-size: 12px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc2-qname { display: flex; align-items: center; gap: 9px; font-weight: 600; color: #e6edf6; }
.cc2-qstatus { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #64748b; }
.cc2-qstatus.active { background: #22d3ee; box-shadow: 0 0 7px #22d3ee; animation: hbDotPulse 2s infinite; }
.cc2-qstatus.queued { background: #94a3b8; }
.cc2-qstatus.failed { background: #f87171; box-shadow: 0 0 7px rgba(248,113,113,.6); }
.cc2-qstatus.completed { background: #34d399; box-shadow: 0 0 7px rgba(52,211,153,.5); }
.cc2-qbadge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; }
.cc2-qbadge.active { background: rgba(34,211,238,.12); color: #22d3ee; }
.cc2-qbadge.queued { background: rgba(148,163,184,.1); color: #94a3b8; }
.cc2-qbadge.failed { background: rgba(248,113,113,.12); color: #f87171; }
.cc2-qbadge.completed { background: rgba(52,211,153,.12); color: #34d399; }
.cc2-qprog { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.cc2-qprog-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3b82f6, #22d3ee); }
.cc2-qprog-fill.err { background: linear-gradient(90deg, #ef4444, #f87171); }
.cc2-qprog-fill.done { background: #34d399; }
.cc2-qprog-fill.live { background-image: linear-gradient(90deg, #2563eb, #22d3ee, #2563eb); background-size: 200% 100%; animation: ccProg 1.6s linear infinite; }
.cc2-qtime { font-size: 10.5px; color: #64748b; }
.cc2-qchev { color: #334155; font-size: 18px; text-align: center; }
.cc2-qrow:hover .cc2-qchev { color: #22d3ee; }
.cc2-qempty { display: flex; align-items: center; gap: 14px; padding: 22px 18px; }
.cc2-qempty p { font-size: 11.5px; color: #8595ab; line-height: 1.5; margin: 4px 0 0; max-width: 420px; }

/* Supporting previews: 4-up strip on this page */
.cc2 .mc-strip { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .cc2 .mc-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cc2 .mc-strip { grid-template-columns: 1fr; } }

/* Queue: drop low-priority columns on narrow screens */
@media (max-width: 760px) {
  .cc2-qhead-row, .cc2-qrow { grid-template-columns: minmax(0,2fr) 1fr .9fr 24px; }
  .cc2-qhead-row span:nth-child(3), .cc2-qhead-row span:nth-child(5), .cc2-qhead-row span:nth-child(6),
  .cc2-qrow .cc2-qnode, .cc2-qrow .cc2-qprog, .cc2-qrow .cc2-qtime { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cc2-top, .cc2-queue, .cc2-axis-bot .axis-char, .cc2-stage.active .cc2-stage-ic, .cc2-link.lit::after,
  .cc2-acs-bar-fill.live, .cc2-qprog-fill.live, .cc2-qstatus.active { animation: none !important; }
  .cc2-axis:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKSPACE V2 — connected tool-launch pipeline (ws-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.ws-pipe { display: flex; align-items: stretch; gap: 0; margin: 4px 0 8px; overflow-x: auto; padding-bottom: 6px; }
.ws-stage { flex: 1 1 0; min-width: 210px; position: relative; display: flex; flex-direction: column; padding: 15px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(165deg, #0f1826, #0a0f19); border: 1px solid rgba(120,150,200,.1); box-shadow: 0 14px 34px -24px rgba(0,0,0,.9); transition: transform .18s, border-color .18s; }
.ws-stage::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; }
.ws-stage[data-accent="teal"]::before { background: linear-gradient(#2dd4bf, #22d3ee); }
.ws-stage[data-accent="violet"]::before { background: linear-gradient(#a78bfa, #7c5cff); }
.ws-stage[data-accent="blue"]::before { background: linear-gradient(#3b82f6, #22d3ee); }
.ws-stage[data-accent="amber"]::before { background: linear-gradient(#fbbf24, #f59e0b); }
.ws-stage:hover { transform: translateY(-3px); border-color: rgba(120,160,230,.26); }
.ws-stage-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ws-stage-step { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #56657a; }
.ws-bot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.22); color: #a78bfa; transition: background .15s; }
.ws-bot svg { width: 15px; height: 15px; }
.ws-bot:hover { background: rgba(167,139,250,.18); }
.ws-stage-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 10px; }
.ws-stage-ic svg { width: 20px; height: 20px; }
.ws-stage-ic.teal { background: rgba(45,212,191,.13); color: #2dd4bf; }
.ws-stage-ic.violet { background: rgba(167,139,250,.14); color: #a78bfa; }
.ws-stage-ic.blue { background: rgba(59,130,246,.14); color: #60a5fa; }
.ws-stage-ic.amber { background: rgba(251,191,36,.13); color: #fbbf24; }
.ws-stage-name { font: 800 15px var(--nav-font); color: #eef3fb; display: flex; align-items: center; gap: 8px; }
.ws-tier { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: rgba(148,163,184,.12); color: #94a3b8; }
.ws-tier.live { background: rgba(52,211,153,.14); color: #34d399; }
.ws-tier.hub { background: rgba(59,130,246,.14); color: #60a5fa; }
.ws-tier.todo { background: rgba(148,163,184,.1); color: #8595ab; }
/* Unfinished stages read clearly as not-ready */
.ws-stage.is-building { opacity: .72; }
.ws-stage.is-building .ws-stage-ic { filter: grayscale(.5); }
.ws-stage-desc { font-size: 11.5px; color: #8595ab; line-height: 1.5; margin: 5px 0 10px; min-height: 34px; }
.ws-stage-adv { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; flex: 1; align-content: flex-start; }
.ws-adv { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: #94a3b8; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); padding: 4px 9px; border-radius: 7px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.ws-adv:hover { color: #e6edf6; border-color: rgba(140,180,255,.3); background: rgba(120,160,255,.06); }
/* Working tools (live/hub) keep a faint green ready-dot; unfinished tools are
   greyed with a dashed border and a "soon" tag so they're obviously not done. */
.ws-adv.ready { color: #c4d0d5; border-color: rgba(52,211,153,.22); }
.ws-adv.ready::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #34d399; box-shadow: 0 0 5px rgba(52,211,153,.6); flex-shrink: 0; }
.ws-adv.building { color: #6b7a8c; border-style: dashed; border-color: rgba(148,163,184,.22); background: rgba(255,255,255,.015); }
.ws-adv.building:hover { color: #94a3b8; border-color: rgba(148,163,184,.4); background: rgba(255,255,255,.03); }
.ws-adv-tag { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #f59e0b; background: rgba(245,158,11,.12); padding: 1px 5px; border-radius: 999px; }
.ws-stage-run { margin-top: auto; }
.ws-pipe-link { flex: 0 0 28px; align-self: center; height: 2px; position: relative; margin: 0 2px;
  background: linear-gradient(90deg, rgba(120,160,255,.1), rgba(120,160,255,.35), rgba(120,160,255,.1)); }
.ws-pipe-flow { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; transform: translateY(-50%); animation: wsFlow 2.4s linear infinite; }
@keyframes wsFlow { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (max-width: 980px) {
  .ws-pipe { flex-direction: column; }
  .ws-pipe-link { width: 2px; height: 24px; flex: 0 0 24px; align-self: center;
    background: linear-gradient(180deg, rgba(120,160,255,.1), rgba(120,160,255,.35), rgba(120,160,255,.1)); }
  .ws-pipe-flow { left: 50%; top: 0; transform: translateX(-50%); animation: wsFlowV 2.4s linear infinite; }
}
@keyframes wsFlowV { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   JOBS V2 — status rail + canvas/automations surfaces + recent-jobs queue
   ═══════════════════════════════════════════════════════════════════════════ */
.jobs2 { display: flex; flex-direction: column; gap: 14px; }
.jobs2-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
@media (max-width: 980px) { .jobs2-grid { grid-template-columns: 1fr; } }
.jobs2-card { position: relative; display: flex; flex-direction: column; padding: 15px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(165deg, #0f1826, #0a0f19); border: 1px solid rgba(120,150,200,.1); box-shadow: 0 14px 34px -24px rgba(0,0,0,.9); }
.jobs2-card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; }
.jobs2-card[data-accent="cyan"]::before { background: linear-gradient(#22d3ee, #3b82f6); }
.jobs2-card[data-accent="violet"]::before { background: linear-gradient(#a78bfa, #7c5cff); }
.jobs2-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px 6px; }
.jobs2-list { padding: 6px 14px 14px; }
@media (prefers-reduced-motion: reduce) { .ws-pipe-flow { animation: none !important; } .ws-stage:hover { transform: none; } }


/* ── Owner Dev Studio quick-launch ─────────────────────────────────────────── */
.sb-dev-row { position: relative; margin-bottom: 2px; }

.sb-dev-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border-radius: 9px;
  border: 1px solid rgba(99,102,241,.2);
  background: rgba(99,102,241,.07);
  color: #a5b4fc; cursor: pointer; font-size: 11.5px; font-weight: 600;
  font-family: inherit; letter-spacing: .01em;
  transition: background .15s, border-color .15s, color .15s;
}
.sb-dev-btn:hover {
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.38);
  color: #c4b5fd;
}
.sb-dev-icon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.25);
  display: flex; align-items: center; justify-content: center;
}
.sb-dev-badge {
  margin-left: auto; font-size: 8px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 99px;
  background: rgba(99,102,241,.12); color: #818cf8;
  border: 1px solid rgba(99,102,241,.2);
}

.dash.sb-collapsed .sb-dev-badge,
.dash.sb-collapsed .sb-dev-btn span.nav-label { display: none; }
.dash.sb-collapsed .sb-dev-btn { justify-content: center; padding-left: 0; padding-right: 0; }
.dash.sb-collapsed .sb-dev-icon { margin: 0 auto; }

/* ── Launch popover ── */
@keyframes dlp-in {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}
.dev-launch-panel {
  display: none; position: absolute; bottom: calc(100% + 10px); left: 0;
  width: 226px;
  background: #0d1020;
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.08),
    0 12px 40px rgba(0,0,0,.55),
    0 0 60px rgba(99,102,241,.06);
  padding: 8px; z-index: 9999; flex-direction: column; gap: 3px;
}
.dev-launch-panel.open {
  display: flex;
  animation: dlp-in .15s cubic-bezier(.2,.8,.4,1) both;
}

.dlp-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #6366f1; padding: 5px 8px 9px;
  border-bottom: 1px solid rgba(99,102,241,.12);
  margin-bottom: 3px;
}
.dlp-head-pill {
  margin-left: auto; font-size: 8px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 99px;
  background: rgba(34,197,94,.1); color: #4ade80;
  border: 1px solid rgba(34,197,94,.2);
}

.dlp-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid transparent;
  background: transparent; color: #94a3b8; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  transition: background .1s, color .1s, border-color .1s;
  text-decoration: none;
}
.dlp-btn:hover {
  background: rgba(255,255,255,.04);
  color: #f1f5f9;
  border-color: rgba(255,255,255,.08);
}
.dlp-primary {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(124,58,237,.12));
  border-color: rgba(99,102,241,.35);
  color: #a5b4fc;
}
.dlp-primary:hover {
  background: linear-gradient(135deg, rgba(99,102,241,.28), rgba(124,58,237,.2));
  border-color: rgba(99,102,241,.55);
  color: #c4b5fd;
}
.dlp-msg {
  font-size: 10.5px; padding: 3px 8px; min-height: 0;
  color: #f87171; line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════════
   GLASS THEME — premium dark transparent panels (inventory + page-wide)
   Layering: page bg → glass card → glass row → expanded panel → subcards
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --glass-bg:        rgba(13, 20, 28, 0.55);
  --glass-bg-2:      rgba(18, 27, 36, 0.62);
  --glass-row:       rgba(22, 32, 42, 0.50);
  --glass-row-hover: rgba(30, 43, 55, 0.68);
  --glass-sub:       rgba(16, 25, 33, 0.45);
  --glass-border:    rgba(150, 200, 210, 0.10);
  --glass-border-hi: rgba(120, 220, 200, 0.22);
  --glass-glow:      rgba(76, 227, 189, 0.06);
}

/* Page-wide: lift existing cards into the glass aesthetic */
.glass-theme .card,
.card.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.glass-theme .summary-strip {
  background: var(--glass-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
}
.glass-theme .summary-cell { background: var(--glass-bg-2); }

/* ── Inventory glass card (the hero of this view) ── */
.inv-glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 20px 20px 14px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 60px var(--glass-glow);
  overflow: hidden;
}
.inv-glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 22px; padding: 1px;
  background: linear-gradient(135deg, rgba(120,220,200,.18), transparent 40%, transparent 60%, rgba(120,180,255,.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Header inside the inventory card */
.inv-glass-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-glass-title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text-1); }
.inv-glass-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.inv-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.inv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 650; padding: 4px 10px;
  border-radius: 999px; color: var(--text-2);
  background: var(--glass-row);
  border: 1px solid var(--glass-border);
}
.inv-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 7px rgba(76,227,189,.6); }
.inv-chip.muted .dot { background: var(--text-faint); box-shadow: none; }

/* Top-right mini stat strip */
.inv-stat-strip { display: flex; gap: 18px; margin-left: auto; padding: 10px 14px; border-radius: 14px; background: var(--glass-bg-2); border: 1px solid var(--glass-border); }
.inv-stat { text-align: right; }
.inv-stat span { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 750; color: var(--text-muted); }
.inv-stat strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: var(--text-1); }
.inv-stat strong.pos { color: var(--mint); }

/* Filter chip row */
.inv-filter-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.inv-fchip {
  font-size: 10.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: var(--glass-row); border: 1px solid var(--glass-border);
  color: var(--text-muted); cursor: pointer; transition: all .16s ease;
}
.inv-fchip:hover { color: var(--text-2); border-color: var(--glass-border-hi); }
.inv-fchip.active { color: var(--text-1); border-color: var(--mint); background: var(--mint-soft); }
.inv-search-glass {
  margin-left: auto; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--glass-border); border-radius: 999px;
  background: var(--glass-row); color: var(--text-1); font-size: 11px; width: 190px;
  transition: border-color .16s;
}
.inv-search-glass:focus { outline: none; border-color: var(--glass-border-hi); }

/* ── Inventory rows ── */
.inv-list { display: flex; flex-direction: column; gap: 9px; }
.inv-glass-row {
  background: var(--glass-row);
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.inv-glass-row:hover {
  background: var(--glass-row-hover);
  border-color: var(--glass-border-hi);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.inv-glass-row.open { border-color: var(--glass-border-hi); background: var(--glass-row-hover); }

.inv-row-main {
  display: grid;
  grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1.3fr) auto auto;
  align-items: center; gap: 16px; padding: 12px 14px; cursor: pointer;
}

/* Product thumbnail tile */
.inv-thumb {
  width: 56px; height: 56px; border-radius: 12px;
  background: #f5f7fa; display: grid; place-items: center;
  overflow: hidden; padding: 5px; box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.inv-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.inv-thumb .emoji { font-size: 26px; }

/* Product info */
.inv-info-name { font-size: 13px; font-weight: 700; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-info-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.inv-info-stock { font-size: 11px; margin-top: 4px; color: var(--text-2); }
.inv-info-stock b { color: var(--mint); font-weight: 700; }
.inv-info-stock .loc { color: var(--text-muted); }

/* Marketplace inline labels */
.inv-mkts { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.inv-mkt-tag {
  font-size: 9.5px; font-weight: 650; padding: 3px 8px; border-radius: 7px;
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text-2);
}

/* Status */
.inv-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.inv-status .sdot { width: 7px; height: 7px; border-radius: 50%; }
.inv-status.in    { color: var(--mint); }    .inv-status.in .sdot    { background: var(--mint); box-shadow: 0 0 7px rgba(76,227,189,.6); }
.inv-status.low   { color: var(--amber); }   .inv-status.low .sdot   { background: var(--amber); box-shadow: 0 0 7px rgba(241,189,104,.5); }
.inv-status.out   { color: var(--coral); }   .inv-status.out .sdot   { background: var(--coral); box-shadow: 0 0 7px rgba(255,125,114,.5); }

/* Chevron expand button */
.inv-chev {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--glass-row); border: 1px solid var(--glass-border);
  color: var(--text-muted); display: grid; place-items: center; cursor: pointer;
  transition: background .16s, color .16s, transform .22s ease;
}
.inv-chev:hover { background: var(--glass-row-hover); color: var(--text-1); border-color: var(--glass-border-hi); }
.inv-chev svg { width: 15px; height: 15px; transition: transform .26s cubic-bezier(.22,1,.36,1); }
.inv-glass-row.open .inv-chev svg { transform: rotate(180deg); }

/* Expanded detail panel — animates down */
.inv-expand { overflow: hidden; max-height: 0; transition: max-height .3s cubic-bezier(.22,1,.36,1); }
.inv-glass-row.open .inv-expand { max-height: 520px; }
.inv-expand-inner {
  margin: 2px 12px 12px; padding: 14px;
  background: var(--glass-sub); border: 1px solid var(--glass-border);
  border-radius: 13px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
}
.inv-subcard {
  background: rgba(255,255,255,.02); border: 1px solid var(--glass-border);
  border-radius: 11px; padding: 12px;
}
.inv-subcard h5 { margin: 0 0 9px; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--text-muted); }
.inv-subrow { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; padding: 3px 0; }
.inv-subrow span { color: var(--text-muted); }
.inv-subrow b { color: var(--text-2); font-weight: 650; }
.inv-subrow b.pos { color: var(--mint); }
.inv-subrow b.warn { color: var(--amber); }
.inv-subrow b.neg { color: var(--coral); }

/* Responsive: stack the row on narrow screens */
@media (max-width: 780px) {
  .inv-row-main { grid-template-columns: 48px 1fr auto; grid-template-areas: "thumb info chev" "thumb mkts mkts" "thumb status status"; gap: 8px 12px; }
  .inv-row-main .inv-thumb { grid-area: thumb; width: 48px; height: 48px; }
  .inv-row-main .inv-info  { grid-area: info; }
  .inv-row-main .inv-mkts  { grid-area: mkts; }
  .inv-row-main .inv-status-wrap { grid-area: status; }
  .inv-row-main .inv-chev  { grid-area: chev; }
  .inv-stat-strip { margin-left: 0; width: 100%; justify-content: space-between; }
  .inv-search-glass { margin-left: 0; width: 100%; }
}


/* ════════════════════════════════════════════════════════════════════════
   DE-SLOP SKIN v1  ·  scoped to .app-shell only (marketing site untouched)
   Direction: institutional commerce OS — Linear/Stripe/Ramp tier.
   Strategy: redefine dark-mode tokens + neutralize the 3 slop signatures
   (rainbow gradient, dark glows, emoji tiles). Components reference these
   tokens, so the fix cascades across every tab without per-component rewrites.
   Loaded last in app.css → wins by source order at equal specificity.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- 1. TOKENS: re-map the palette inside the app shell -------------- */
html.dark .app-shell,
.app-shell {
  /* Surfaces — lifted off pure black so panels read as distinct layers */
  --bg:        #10131a;
  --bg2:       #171b24;
  --card:      #191d27;
  --card-2:    #1f2430;
  --raised:    #262c3a;
  --border:    rgba(255,255,255,.10);
  --border-2:  rgba(255,255,255,.06);

  /* Text ramp — true neutral, AA+ on the lifted surfaces */
  --text:      #f4f6fa;
  --text-2:    #d4dae4;
  --text-gray: #b4bcca;
  --text-muted:#8a93a3;

  /* ONE disciplined signal accent (electric indigo). Replaces cyan+magenta. */
  --cyan:      #5b8cff;     /* alias kept so existing var(--cyan) refs reskin */
  --cyan-dark: #3b5bdb;
  --accent:    #5b8cff;
  --accent-2:  #6ee7d0;     /* secondary, positive deltas only */
  --mint:      #4ade80;
  --amber:     #f0b429;
  --coral:     #f4647a;

  /* glass tokens used by inventory rows */
  --glass:        #101217;
  --glass-sub:    #151821;
  --glass-border: rgba(255,255,255,.07);

  /* KILL the rainbow gradient → flat disciplined accent.
     Every var(--gradient) button/element now reads as a single indigo. */
  --gradient: linear-gradient(180deg, #5b8cff 0%, #3b5bdb 100%);

  /* KILL dark glows → crisp shadow only */
  --glow:      0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.25);
  --text-glow: none;

  /* Type: keep Space Grotesk for display, but tighten */
  --nav-font: 'Space Grotesk', 'Inter Tight', 'Inter', sans-serif;
}

/* ---- 2. GLOBAL POLISH inside the shell ------------------------------ */
.app-shell, .app-shell * {
  letter-spacing: -.011em;
}
.app-shell { background: var(--bg); }
/* tabular numerics anywhere numbers appear */
.app-shell .num,
.app-shell .an-kpi b, .app-shell .hb-mini-num, .app-shell .iv-price,
.app-shell .stat-num, .app-shell [data-num] {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

/* ---- 3. PRIMARY BUTTON: flat indigo, no rainbow, no heavy glow ------ */
.app-shell .app-btn,
.app-shell .mc-btn--primary,
.app-shell .btn-primary {
  background: var(--accent) !important;
  background-size: auto !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
  font-weight: 620;
  border-radius: 9px;
  transition: background .14s, transform .14s, box-shadow .14s !important;
}
.app-shell .app-btn:hover,
.app-shell .mc-btn--primary:hover,
.app-shell .btn-primary:hover {
  background: #6e9aff !important;
  background-position: 0 0 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(91,140,255,.25) !important;
}
.app-shell .app-btn.ghost,
.app-shell .mc-btn--ghost,
.app-shell .mc-btn--secondary {
  background: var(--card-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
}
.app-shell .app-btn.ghost:hover,
.app-shell .mc-btn--ghost:hover,
.app-shell .mc-btn--secondary:hover {
  border-color: var(--border) !important;
  background: var(--raised) !important;
  color: var(--text) !important;
}

/* ---- 4. CARDS: kill nested-card depth, single hairline border ------- */
.app-shell .card,
.app-shell .app-card,
.app-shell .modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* nested cards → flatten to a plain surface (impeccable: nested cards always wrong) */
.app-shell .card .card,
.app-shell .app-card .app-card,
.app-shell .card .app-card {
  background: var(--card-2);
  box-shadow: none;
  border-color: var(--border-2);
}

/* ---- 5. PILLS / CHIPS / BADGES: muted, no neon ---------------------- */
.app-shell .hb-pill,
.app-shell .badge,
.app-shell .app-plan-chip {
  border-radius: 7px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none;
  text-shadow: none;
}
.app-shell .app-plan-chip.plan-enterprise {
  border-color: rgba(240,180,41,.35);
  background: rgba(240,180,41,.10);
  color: #f0c674;
}
/* status dots / labels → semantic muted */
.app-shell .status.ok,   .app-shell .pos  { color: var(--mint) !important; }
.app-shell .status.warn, .app-shell .warn { color: var(--amber) !important; }
.app-shell .status.neg,  .app-shell .neg, .app-shell .status.out { color: var(--coral) !important; }

/* ---- 6. SIDEBAR NAV: active = left ticker, not glow ----------------- */
.app-shell .app-nav-item.active,
.app-shell .nav-item.active,
.app-shell [data-nav].active {
  background: var(--card-2);
  color: var(--text);
  box-shadow: none;
  position: relative;
}
.app-shell .app-nav-item.active::before,
.app-shell .nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--accent);
}

/* ---- 7. INVENTORY: photographic rows, kill emoji crutch ------------- */
.app-shell .inv-thumb {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--raised);
  overflow: hidden;
}
.app-shell .inv-thumb img { object-fit: cover; width: 100%; height: 100%; }
/* the emoji placeholder: shrink + desaturate so a real photo always wins,
   and a missing image reads as a quiet neutral icon, not a giant emoji */
.app-shell .inv-thumb .emoji {
  font-size: 18px; filter: grayscale(1) opacity(.45);
}
.app-shell .inv-glass-row {
  border-bottom: 1px solid var(--border-2);
  transition: background .1s;
}
.app-shell .inv-glass-row:hover { background: var(--card-2); }
.app-shell .inv-mkt-tag {
  border-radius: 4px; font-size: 10px; font-weight: 600;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-gray); box-shadow: none;
}
.app-shell .inv-status-chip { box-shadow: none; text-shadow: none; }

/* ---- 8. KILL leftover glows / text-shadows the slop relied on ------- */
.app-shell .app-h1, .app-shell .plan-name, .app-shell h1, .app-shell h2 {
  text-shadow: none !important;
}
.app-shell *:not(input):not(textarea) { text-shadow: none; }

/* ---- 9. SCROLLBAR: thin neutral, not default chunky ----------------- */
.app-shell ::-webkit-scrollbar { width: 10px; height: 10px; }
.app-shell ::-webkit-scrollbar-thumb { background: var(--raised); border-radius: 6px; border: 2px solid var(--bg); }
.app-shell ::-webkit-scrollbar-thumb:hover { background: #2a2f3b; }
.app-shell ::-webkit-scrollbar-track { background: transparent; }

/* ---- 10. FOCUS: visible, accent ring (a11y) ------------------------- */
.app-shell button:focus-visible,
.app-shell a:focus-visible,
.app-shell input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
/* ════════════════════════ END DE-SLOP SKIN v1 ════════════════════════ */