/* IIO Portal CSS — auto-extracted 2026-05-10 */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root{
  --bg:#ffffff;--surface:#f7f7f8;--surface-2:#ededef;
  --border:#e8e8eb;--border-hover:#c0c0c8;
  --text:#0d0d10;--text-2:#6b6b78;--text-3:#a8a8b3;
  --accent:#2563eb;--accent-fg:#ffffff;
  --tenant-accent:var(--accent);
  --green:#16a34a;--amber:#b45309;--red:#dc2626;
  --sidebar-w:220px;
  --header-h:48px;
  --r:12px;
  --sh:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.04);
  --sh-lift:0 8px 24px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d0e11;--surface:#13141a;--surface-2:#1c1d24;
  --border:#252630;--border-hover:#363742;
  --text:#f0f0f4;--text-2:#8b8b9a;--text-3:#50505e;
  --green:#22c55e;--amber:#f59e0b;--red:#f87171;color-scheme:dark;
}}
[data-theme="dark"]{
  --bg:#0d0e11;--surface:#13141a;--surface-2:#1c1d24;
  --border:#252630;--border-hover:#363742;
  --text:#f0f0f4;--text-2:#8b8b9a;--text-3:#50505e;
  --green:#22c55e;--amber:#f59e0b;--red:#f87171;color-scheme:dark;
}
[data-accent="purple"]{--accent:#7c3aed}
[data-accent="green"]{--accent:#16a34a}
[data-accent="amber"]{--accent:#b45309}
[data-accent="slate"]{--accent:#475569}

/* ── Base ───────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}

/* ── Focus visible — keyboard navigation ─────────────────────────────────── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#shell{opacity:0;transition:opacity 200ms var(--ease);height:100%;display:flex;flex-direction:column}
#shell.ready{opacity:1}

/* ════════════════════════════════════════════════════════════════════════
   UNIFIED SHELL LAYOUT
   Header (48px) + Body (sidebar + main)
════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────── */
#app-header{
  height:var(--header-h);flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 0 0;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  z-index:30;
}
.hdr-left{display:flex;align-items:center;height:100%}
.hdr-logo{
  display:flex;align-items:center;justify-content:center;
  width:var(--sidebar-w);height:100%;
  border-right:1px solid var(--border);
  gap:8px;text-decoration:none;
  transition:background 120ms;flex-shrink:0;
}
.hdr-logo:hover{background:var(--surface)}
.iio-wordmark{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--text)}
.hdr-breadcrumb{
  display:flex;align-items:center;gap:6px;
  padding:0 16px;font-size:12px;color:var(--text-3);
}
.hdr-bc-sep{color:var(--border)}
.hdr-bc-cur{font-weight:600;color:var(--text)}
.hdr-right{display:flex;align-items:center;gap:5px}
.btn-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer;flex-shrink:0;transition:background 120ms,color 120ms}
.btn-icon:hover{background:var(--surface);color:var(--text)}
/* ── Avatar Dropdown — Linear/Vercel pattern ─────────────────────────── */
 #av-wrap{position:relative;z-index:300}

#av-btn{
  display:flex;align-items:center;gap:7px;
  padding:3px 8px 3px 3px;
  border-radius:999px;border:1px solid var(--border);
  background:var(--bg);cursor:pointer;font-family:inherit;
  transition:background 120ms,border-color 120ms;
}
#av-btn:hover{background:var(--surface);border-color:var(--border-hover)}
#av-btn .avatar{flex-shrink:0}
#av-name{font-size:11px;font-weight:500;color:var(--text-2);max-width:90px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#av-chevron{color:var(--text-3);transition:transform 180ms;flex-shrink:0}
#av-btn[aria-expanded="true"] #av-chevron{transform:rotate(180deg)}
/* Dropdown panel — position:fixed so nothing clips it */
#av-menu{
  display:none;
  position:fixed;top:52px;right:12px;
  min-width:240px;background:var(--bg);border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.10);
  z-index:9999;overflow:hidden;
}
@keyframes av-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
#av-menu.open{display:block;animation:av-in 140ms ease both}
.av-section{padding:6px}
.av-section+.av-section{border-top:1px solid var(--border)}
.av-label{font-size:9px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.07em;padding:4px 8px 2px}
/* Mode toggle — segmented */
.av-mode-row{display:flex;gap:3px;padding:3px}
.av-mode-btn{
  flex:1;padding:5px 4px;border-radius:6px;border:none;
  background:transparent;color:var(--text-3);font-size:10px;font-weight:600;
  cursor:pointer;font-family:inherit;display:flex;flex-direction:column;
  align-items:center;gap:2px;transition:all 100ms;
}
.av-mode-btn:hover{background:var(--surface-2);color:var(--text-2)}
.av-mode-btn.active{background:var(--accent);color:#fff}
.av-mode-btn svg{opacity:.7}
.av-mode-btn.active svg{opacity:1}
/* Theme quick-select */
.av-theme-row{display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px 8px}
.av-theme-dot{
  width:26px;height:18px;border-radius:5px;border:2px solid transparent;
  cursor:pointer;transition:transform 130ms,border-color 130ms;
  display:inline-block;flex-shrink:0;
}
.av-theme-dot:hover{transform:scale(1.12)}
.av-theme-dot.active{border-color:var(--text-1)}
.av-theme-name-label{font-size:9px;color:var(--text-3);padding:0 8px 4px;display:block}
/* Language row */
.av-lang-row{display:flex;gap:3px;padding:3px}
.av-lang-btn{
  flex:1;padding:5px 4px;border-radius:6px;border:none;
  background:transparent;color:var(--text-3);font-size:10px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all 100ms;text-align:center;
}
.av-lang-btn:hover{background:var(--surface-2);color:var(--text-2)}
.av-lang-btn.active{background:var(--surface-2);color:var(--text)}
/* Menu items */
.av-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;border-radius:7px;border:none;background:transparent;
  color:var(--text-2);font-size:11px;font-weight:500;cursor:pointer;
  font-family:inherit;text-decoration:none;transition:background 100ms,color 100ms;
}
.av-item:hover{background:var(--surface-2);color:var(--text)}
.av-item svg{color:var(--text-3);flex-shrink:0}
.av-item.danger{color:var(--red)}
.av-item.danger:hover{background:color-mix(in srgb,var(--red) 8%,transparent)}
/* User info header */
.av-user-info{padding:10px 12px 8px;border-bottom:1px solid var(--border)}
.av-user-name{font-size:12px;font-weight:600;color:var(--text)}
.av-user-meta{font-size:10px;color:var(--text-3);margin-top:1px}
/* Refresh dot — minimal, top-right of header */
#refresh-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--border);margin-right:2px;flex-shrink:0;
  transition:background 300ms;
}
#refresh-dot.active{background:var(--accent);animation:rd-pulse 1.2s ease infinite}
@keyframes rd-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.avatar{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.user-email{font-size:11px;color:var(--text-2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-logout{display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:7px;border:1px solid var(--border);background:var(--bg);font-size:11px;color:var(--text-2);cursor:pointer;text-decoration:none;transition:background 120ms,color 120ms}
.btn-logout:hover{background:var(--surface);color:var(--text)}
#pibBtn{display:none;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;border:1px solid var(--border);background:var(--bg);font-size:11px;color:var(--text-2);cursor:pointer;transition:background 120ms,color 120ms;white-space:nowrap}
#pibBtn.visible{display:flex}
#pibBtn:hover{background:var(--surface);color:var(--text)}

/* ── Body (sidebar + main) ──────────────────────────────────────────────── */
#app-body{flex:1;display:flex;overflow:hidden;min-height:0}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  border-right:1px solid var(--border);
  background:var(--surface);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  transition:transform 280ms cubic-bezier(.4,0,.2,1);
}
@media(max-width:600px){
  #sidebar{position:fixed;height:100%;left:0;top:0;z-index:100;transform:translateX(calc(-1 * var(--sidebar-w)))}
  #sidebar.mobile-open{transform:translateX(0)}
}

/* Nav sections */
.nav-section{padding:12px 8px 4px}
.nav-section-label{
  font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);padding:0 6px;margin-bottom:4px;
}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:6px 8px;border-radius:7px;
  font-size:12px;font-weight:500;color:var(--text-2);
  cursor:pointer;text-decoration:none;
  transition:background 120ms,color 120ms;
  user-select:none;position:relative;
}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-weight:600}
.nav-item.planned{opacity:.45;cursor:default;pointer-events:none}
.nav-item svg{flex-shrink:0;opacity:.7}
.nav-item.active svg{opacity:1}
.nav-badge{
  margin-left:auto;font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:4px;
  background:var(--surface-2);color:var(--text-3);
}
.nav-badge.alert{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.nav-badge.planned-tag{
  background:var(--surface-2);color:var(--text-3);
  font-size:8px;letter-spacing:.04em;text-transform:uppercase;
}
.nav-divider{height:1px;background:var(--border);margin:6px 8px}

/* Sidebar bottom: context info */
#sidebar-ctx{
  margin-top:auto;padding:10px 12px;
  border-top:1px solid var(--border);
  font-size:10px;color:var(--text-3);
  line-height:1.5;
}
#sidebar-lane{font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar-gate{opacity:.7}

/* ── Main content area ──────────────────────────────────────────────────── */
#main{flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0}

/* Context bar (operator, inside main) */
#ctx-bar{
  flex-shrink:0;border-bottom:1px solid var(--border);
  padding:6px 16px;display:none;
  align-items:center;gap:12px;flex-wrap:nowrap;overflow-x:auto;
  background:var(--surface);font-size:11px;
}
#ctx-bar.visible{display:flex}
.ctx-lane-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.ctx-item{display:flex;align-items:center;gap:4px;color:var(--text-2)}
.ctx-item strong{color:var(--text);font-weight:600}
.ctx-divider{width:1px;height:11px;background:var(--border);flex-shrink:0}
.ctx-badge{padding:1px 5px;border-radius:4px;font-size:10px;font-weight:700}
.ctx-badge-hitl{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.ctx-badge-active{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.ctx-badge-done{background:var(--surface-2);color:var(--text-3)}

/* View containers */
.view{display:none;flex:1;overflow:hidden;flex-direction:column}
.view.active{display:flex}

/* ── VIEW: PORTAL ────────────────────────────────────────────────────────── */
#view-portal{overflow-y:auto}
.portal-scroll{flex:1;overflow-y:auto}
.portal-body{
  display:flex;gap:14px;padding:14px 16px 32px;
  max-width:1400px;margin:0 auto;
  align-items:flex-start;
}
/* Two-column: left=panels, right=tenant grid */
#portal-left{
  width:290px;flex-shrink:0;
  display:flex;flex-direction:column;gap:10px;
  position:sticky;top:0;
  max-height:calc(100vh - var(--header-h) - 36px - 28px);
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
#portal-left::-webkit-scrollbar{width:3px}
#portal-left::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
#portal-right{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}

/* Level 1 tenant view (non-operator) */
#level1{display:none;flex:1;overflow-y:auto;padding:40px 20px}
#level1.visible{display:block}
.l1-greeting{text-align:center;margin-bottom:40px}
.l1-greeting h1{font-size:23px;font-weight:700;letter-spacing:-.025em;margin-bottom:5px}
.l1-greeting p{font-size:13px;color:var(--text-2)}

/* ── VIEW: MANUAL ────────────────────────────────────────────────────────── */
#view-manual{flex-direction:row}
#manual-nav{
  width:260px;flex-shrink:0;border-right:1px solid var(--border);
  background:var(--surface);display:flex;flex-direction:column;
  overflow:hidden;
}
.manual-search-wrap{
  display:flex;align-items:center;gap:7px;
  padding:10px 12px;border-bottom:1px solid var(--border);
}
.manual-search-wrap svg{color:var(--text-3);flex-shrink:0}
#manualSearch{
  flex:1;border:none;background:transparent;outline:none;
  font-size:12px;color:var(--text);font-family:inherit;
}
#manualSearch::placeholder{color:var(--text-3)}
.manual-dim-tabs{
  display:flex;gap:2px;padding:8px 10px;
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.manual-dim-tab{
  padding:2px 8px;border-radius:5px;font-size:10px;font-weight:600;
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-3);cursor:pointer;transition:all 100ms;white-space:nowrap;
}
.manual-dim-tab:hover{border-color:var(--border-hover);color:var(--text)}
.manual-dim-tab.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
#manual-list{flex:1;overflow-y:auto;padding:6px 8px}
.manual-page-item{
  display:flex;flex-direction:column;gap:2px;
  padding:7px 8px;border-radius:7px;cursor:pointer;
  transition:background 100ms;text-decoration:none;color:inherit;
  margin-bottom:1px;
}
.manual-page-item:hover{background:var(--surface-2)}
.manual-page-item.active{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.mpi-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpi-dim{font-size:9px;color:var(--text-3)}
.mpi-class{
  display:inline-block;font-size:8px;font-weight:700;
  padding:1px 4px;border-radius:3px;margin-right:3px;
}
.mpi-class-plugin{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.mpi-class-process{background:color-mix(in srgb,var(--green) 10%,transparent);color:var(--green)}
.mpi-class-reference{background:var(--surface-2);color:var(--text-3)}
#manual-empty{font-size:12px;color:var(--text-3);padding:16px 8px;display:none}
#manual-frame-wrap{flex:1;overflow:hidden;position:relative;background:var(--bg)}
#manual-iframe{width:100%;height:100%;border:none}
.manual-frame-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:12px;color:var(--text-3);
}
.manual-frame-placeholder svg{opacity:.3}
.manual-frame-placeholder p{font-size:13px}

/* ── VIEW: OPERATE ───────────────────────────────────────────────────────── */
#view-monitor{overflow-y:auto}
#operate-content{padding:20px;max-width:940px;margin:0 auto}

/* ── VIEW: AUDIT (placeholder) ───────────────────────────────────────────── */
#view-compliance,#view-settings,#view-federation,#view-usage,#view-marketplace,#view-people{overflow-y:auto}

/* ════════════════════════════════════════════════════════════════════════
   VIEW: FEDERATION
════════════════════════════════════════════════════════════════════════ */
#federation-content{padding:18px 20px 40px;max-width:1060px;margin:0 auto}
.fed-section{margin-bottom:28px}
.fed-section-head{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.fed-section-head svg{flex-shrink:0}
.fed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.fed-card{border:1px solid var(--border);border-radius:9px;background:var(--bg);padding:12px 14px;transition:border-color 140ms}
.fed-card:hover{border-color:var(--border-hover)}
.fed-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.fed-card-id{font-size:10px;font-weight:700;font-family:'SF Mono','Menlo',monospace;color:var(--text-2)}
.fed-card-title{font-size:11px;font-weight:600;margin-bottom:3px}
.fed-card-meta{font-size:9px;color:var(--text-3);line-height:1.4}
.fed-badge{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;white-space:nowrap}
.fed-badge-live{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.fed-badge-none{background:var(--surface-2);color:var(--text-3)}
.fed-badge-roadmap{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.fed-realm-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.fed-realm-row:last-child{border-bottom:none}
.fed-realm-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.fed-realm-name{font-size:11px;font-weight:600;min-width:80px}
.fed-realm-meta{font-size:9px;color:var(--text-3);flex:1}
.fed-realm-badges{display:flex;gap:4px;flex-shrink:0}
.fed-protocol-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid var(--border);border-radius:7px;background:var(--bg);margin-bottom:5px}
.fed-protocol-left{display:flex;align-items:center;gap:8px}
.fed-protocol-icon{font-size:14px;flex-shrink:0}
.fed-protocol-name{font-size:11px;font-weight:600}
.fed-protocol-desc{font-size:9px;color:var(--text-3);margin-top:1px}
.fed-shared-row{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);margin-bottom:6px}
.fed-shared-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.fed-shared-body{flex:1;min-width:0}
.fed-shared-name{font-size:11px;font-weight:600}
.fed-shared-meta{font-size:9px;color:var(--text-3);line-height:1.4;margin-top:2px}
.fed-stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.fed-stat{padding:12px 16px;border:1px solid var(--border);border-radius:9px;background:var(--bg);text-align:center;min-width:80px}
.fed-stat-n{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.fed-stat-l{font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-top:3px}

/* ════════════════════════════════════════════════════════════════════════
   VIEW: USAGE
════════════════════════════════════════════════════════════════════════ */
#usage-content{padding:18px 20px 40px;max-width:1060px;margin:0 auto}
.usg-section{margin-bottom:28px}
.usg-section-head{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.usg-stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.usg-stat{padding:12px 16px;border:1px solid var(--border);border-radius:9px;background:var(--bg);text-align:center;min-width:80px}
.usg-stat-n{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.usg-stat-l{font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.usg-stat.s-cells .usg-stat-n{color:var(--accent)}
.usg-stat.s-completed .usg-stat-n{color:var(--green)}
.usg-stat.s-rate .usg-stat-n{color:var(--green)}
.usg-cell-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);margin-bottom:5px;transition:border-color 120ms}
.usg-cell-row:hover{border-color:var(--border-hover)}
.usg-cell-id{font-size:10px;font-weight:700;font-family:'SF Mono','Menlo',monospace;min-width:70px}
.usg-cell-tenant{font-size:10px;font-weight:600;min-width:80px;color:var(--text-2)}
.usg-cell-models{font-size:9px;color:var(--text-3);flex:1}
.usg-cell-status{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:700}
.usg-future-box{border:1px dashed var(--border);border-radius:9px;padding:16px 18px;background:var(--surface)}
.usg-future-head{font-size:11px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.usg-future-item{display:flex;align-items:center;gap:7px;padding:5px 0;font-size:10px;color:var(--text-2)}
.usg-future-item svg{flex-shrink:0;color:var(--text-3)}
.usg-sprint-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:7px;background:var(--surface);border:1px solid var(--border);margin-bottom:5px}
.usg-sprint-name{font-size:11px;font-weight:600}
.usg-sprint-meta{font-size:9px;color:var(--text-3)}
.usg-sprint-count{font-size:11px;font-weight:700;color:var(--green)}
.usg-billing-card{border:1px solid var(--border);border-radius:9px;padding:14px;background:var(--bg)}
.usg-billing-head{font-size:11px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.usg-billing-row{display:flex;justify-content:space-between;padding:4px 0;font-size:10px;border-bottom:1px solid var(--border)}
.usg-billing-row:last-child{border-bottom:none}
.usg-billing-label{color:var(--text-2)}
.usg-billing-val{font-weight:600;color:var(--text)}

/* ════════════════════════════════════════════════════════════════════════
   VIEW: MARKETPLACE
════════════════════════════════════════════════════════════════════════ */
#marketplace-content{padding:18px 20px 40px;max-width:1100px;margin:0 auto}
.mkt-section{margin-bottom:28px}
.mkt-section-head{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.mkt-card{border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:14px;display:flex;flex-direction:column;gap:6px;transition:border-color 140ms,box-shadow 140ms}
.mkt-card:hover{border-color:var(--border-hover);box-shadow:var(--sh)}
.mkt-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.mkt-card-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.mkt-card-title{font-size:12px;font-weight:700;line-height:1.3;flex:1}
.mkt-card-tagline{font-size:10px;color:var(--text-2);line-height:1.5}
.mkt-card-footer{display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border);flex-wrap:wrap}
.mkt-badge{font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap}
.mkt-badge-installed{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.mkt-badge-available{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.mkt-badge-addon{background:color-mix(in srgb,var(--amber) 10%,transparent);color:var(--amber)}
.mkt-badge-pilot{background:var(--surface-2);color:var(--text-3)}
.mkt-install-btn{margin-left:auto;padding:3px 10px;border-radius:5px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:9px;font-weight:700;cursor:pointer;transition:all 100ms}
.mkt-install-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.mkt-installed-list{display:flex;flex-direction:column;gap:6px}
.mkt-installed-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.mkt-installed-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.mkt-installed-body{flex:1;min-width:0}
.mkt-installed-name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-installed-tenants{font-size:9px;color:var(--text-3);margin-top:1px}
.mkt-install-flow{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:16px}
.mkt-install-flow-title{font-size:12px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.mkt-flow-step{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.mkt-flow-step:last-child{border-bottom:none}
.mkt-flow-num{width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.mkt-flow-body{flex:1}
.mkt-flow-label{font-size:11px;font-weight:600}
.mkt-flow-desc{font-size:9px;color:var(--text-3);margin-top:2px;line-height:1.4}
.mkt-select{width:100%;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);font-family:inherit;font-size:11px;padding:7px 10px;outline:none;margin-bottom:8px;transition:border-color 120ms}
.mkt-select:focus{border-color:var(--accent)}
.mkt-request-btn{padding:7px 18px;border-radius:7px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);font-size:11px;font-weight:700;cursor:pointer;transition:opacity 120ms}
.mkt-request-btn:hover{opacity:.85}
.mkt-request-btn:disabled{opacity:.4;cursor:default}
.mkt-request-form{border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:16px;margin-top:10px}
.mkt-request-form-title{font-size:12px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.mkt-input{width:100%;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-family:inherit;font-size:11px;padding:6px 9px;outline:none;margin-bottom:8px;transition:border-color 120ms}
.mkt-input:focus{border-color:var(--accent)}
.mkt-textarea{width:100%;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-family:inherit;font-size:11px;padding:6px 9px;resize:vertical;min-height:52px;outline:none;margin-bottom:8px;transition:border-color 120ms}
.mkt-textarea:focus{border-color:var(--accent)}
.mkt-feedback{font-size:10px;margin-top:4px;display:none}
.mkt-feedback.ok{display:block;color:var(--green)}
.mkt-feedback.err{display:block;color:var(--red)}
.view-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:16px;color:var(--text-3);padding:40px;
}
.view-placeholder svg{opacity:.25;width:48px;height:48px}
.view-placeholder h2{font-size:18px;font-weight:700;color:var(--text-2)}
.view-placeholder p{font-size:13px;text-align:center;max-width:400px;line-height:1.6}
.view-placeholder .soon-badge{
  padding:4px 12px;border-radius:999px;
  background:var(--surface-2);color:var(--text-3);
  font-size:11px;font-weight:600;
}

/* ════════════════════════════════════════════════════════════════════════
   PANEL + CARD COMPONENTS (Portal view)
════════════════════════════════════════════════════════════════════════ */
.pnl{border:1px solid var(--border);border-radius:var(--r);background:var(--bg);overflow:hidden}
.pnl-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px 7px;border-bottom:1px solid var(--border);background:var(--surface)}
.pnl-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:5px}
.pnl-count{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--surface-2);color:var(--text-3)}
.pnl-body{padding:9px 11px;display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto}
.pnl-body.no-limit{max-height:none}
.pnl-empty{font-size:11px;color:var(--text-3);padding:6px 1px}

/* HITL */
.hitl-item{border:1px solid color-mix(in srgb,var(--amber) 25%,transparent);border-radius:8px;background:color-mix(in srgb,var(--amber) 5%,transparent);padding:9px 11px}
.hitl-item-head{display:flex;align-items:flex-start;gap:7px;margin-bottom:5px}
.hitl-item-id{font-size:9px;font-weight:700;color:var(--amber);font-family:'SF Mono','Menlo',monospace}
.hitl-item-title{font-size:11px;font-weight:600;line-height:1.35;flex:1}
.hitl-item-gate{font-size:10px;color:var(--text-3);margin-bottom:7px;line-height:1.4}
.hitl-actions{display:flex;gap:5px;flex-wrap:wrap}
.hitl-btn{padding:3px 10px;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:opacity 120ms}
.hitl-btn:disabled{opacity:.4;cursor:default}
.hitl-btn.approve{background:color-mix(in srgb,var(--green) 14%,transparent);border-color:color-mix(in srgb,var(--green) 28%,transparent);color:var(--green)}
.hitl-btn.reject{background:color-mix(in srgb,var(--red) 12%,transparent);border-color:color-mix(in srgb,var(--red) 24%,transparent);color:var(--red)}
.hitl-btn.defer{background:var(--surface-2);border-color:var(--border);color:var(--text-3)}
.hitl-feedback{font-size:9px;display:none}
.hitl-feedback.ok{display:block;color:var(--green)}
.hitl-feedback.err{display:block;color:var(--red)}

/* Activity */
.act-item{display:flex;align-items:flex-start;gap:7px;padding:5px 0;border-bottom:1px solid var(--border)}
.act-item:last-child{border-bottom:none}
.act-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:4px}
.act-dot.done{background:var(--green)}.act-dot.active{background:var(--accent)}.act-dot.planned{background:var(--text-3)}.act-dot.blocked{background:var(--red)}
.act-body{flex:1;min-width:0}
.act-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-meta{font-size:9px;color:var(--text-3);margin-top:1px}
.act-id{font-size:9px;font-family:'SF Mono','Menlo',monospace;color:var(--text-3);flex-shrink:0}

/* AI Hub mini */
.aihub-mini{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:9px 11px}
.aihub-cell-mini{padding:7px 9px;border-radius:7px;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:border-color 120ms}
.aihub-cell-mini:hover{border-color:var(--border-hover)}
.aihub-cell-mini-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.aihub-cell-mini-id{font-size:9px;font-weight:700;font-family:monospace}
.aihub-cell-mini-model{font-size:8px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-live{color:var(--green);font-size:9px;font-weight:700}
.cell-down{color:var(--red);font-size:9px;font-weight:700}
.cell-partial{color:var(--amber);font-size:9px;font-weight:700}
.aihub-stat-row{display:flex;gap:10px;padding:7px 11px;border-top:1px solid var(--border);background:var(--surface)}
.aihub-stat{text-align:center}
.aihub-stat-n{font-size:16px;font-weight:800;line-height:1;letter-spacing:-.02em}
.aihub-stat-l{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.aihub-stat.s-live .aihub-stat-n{color:var(--green)}
.aihub-stat.s-avail .aihub-stat-n{color:var(--text-2)}
.aihub-stat.s-down .aihub-stat-n{color:var(--red)}

/* Health */
.health-row{display:flex;align-items:center;justify-content:space-between;padding:4px 1px;border-bottom:1px solid var(--border)}
.health-row:last-child{border-bottom:none}
.health-name{font-size:11px;color:var(--text-2)}
.health-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.health-dot.ok{background:var(--green)}.health-dot.err{background:var(--red)}.health-dot.chk{background:var(--text-3)}
.health-status{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600}
.health-status.ok{color:var(--green)}.health-status.err{color:var(--red)}.health-status.chk{color:var(--text-3)}
.health-link{font-size:9px;color:var(--accent);text-decoration:none}
.health-link:hover{text-decoration:underline}

/* ════════════════════════════════════════════════════════════════════════
   FACE CARD SYSTEM (tenant cards in Portal view)
════════════════════════════════════════════════════════════════════════ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:11px;width:100%}
.grid.has-active .face-card:not(.active){opacity:.28;pointer-events:none}
.face-card{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--border);background:var(--bg);box-shadow:var(--sh);transition:box-shadow 160ms var(--ease),transform 160ms var(--ease),border-color 160ms var(--ease),opacity 200ms var(--ease)}
.face-card:hover{box-shadow:var(--sh-lift);transform:translateY(-2px);border-color:var(--border-hover)}
.face-card.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent),var(--sh);transform:none!important}
.face-track{display:flex;transition:transform 300ms var(--ease);will-change:transform}
.face-panel{flex-shrink:0;padding:14px;display:flex;flex-direction:column;min-height:115px}
.face-nav{display:flex;align-items:center;justify-content:space-between;padding:5px 9px 7px;border-top:1px solid var(--border);gap:4px}
.face-btn{display:flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--text-3);cursor:pointer;flex-shrink:0;transition:background 100ms,color 100ms;font-size:11px;line-height:1;user-select:none}
.face-btn:hover{background:var(--surface-2);color:var(--text)}
.face-btn:disabled{opacity:.2;cursor:default;pointer-events:none}
.face-dots{display:flex;align-items:center;gap:3px;flex:1;justify-content:center}
.face-dot{width:4px;height:4px;border-radius:50%;background:var(--border-hover);cursor:pointer;transition:background 160ms,transform 160ms;flex-shrink:0}
.face-dot.on{background:var(--accent);transform:scale(1.4)}
.face-label{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);flex-shrink:0}
.f-sum .tc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:9px}
.tc-letter{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:700}
.tc-name{font-size:12px;font-weight:700;margin-bottom:2px;letter-spacing:-.01em}
.tc-meta{font-size:9px;color:var(--text-3);line-height:1.4}
.tc-hint{margin-top:auto;padding-top:7px;font-size:9px;color:var(--text-3);display:flex;align-items:center;gap:3px}
.f-stories{gap:4px}
.f-story-pill{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:5px;border:1px solid var(--border);background:var(--surface);font-size:9px}
.f-story-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.f-story-title{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-story-badge{font-size:8px;font-weight:700;letter-spacing:.04em;padding:1px 3px;border-radius:3px;flex-shrink:0}
/* badge-p1/p2/p3 defined in stroke badge section above */
.f-hitl-badge{display:flex;align-items:center;gap:2px;font-size:7px;font-weight:600;color:var(--amber);padding:1px 3px;border-radius:3px;background:color-mix(in srgb,var(--amber) 10%,transparent);flex-shrink:0}
.f-status-rows{display:flex;flex-direction:column;gap:4px}
.f-status-row{display:flex;align-items:center;justify-content:space-between;padding:4px 7px;border-radius:5px;background:var(--surface);font-size:9px}
.f-status-name{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.status{display:flex;align-items:center;gap:3px;font-size:8px;font-weight:600}
.dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.status.live{color:var(--green)}.status.live .dot{background:var(--green)}
.status.soon{color:var(--amber)}.status.soon .dot{background:var(--amber)}
.status.off{color:var(--text-3)}.status.off .dot{background:var(--text-3)}
.aihub-face-cell{display:flex;flex-direction:column;gap:2px;padding:5px 7px;border-radius:6px;background:var(--surface);border:1px solid var(--border);text-decoration:none;color:inherit;transition:border-color 120ms;cursor:pointer}
.aihub-face-cell:hover{border-color:var(--border-hover)}
.live-badge{display:inline-flex;align-items:center;gap:2px;font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px}
.live-badge.live{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.live-badge.down{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.live-badge.partial{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}

/* ── Drawer ──────────────────────────────────────────────────────────────── */
#drawer{width:100%;overflow:hidden;height:0;transition:height 280ms var(--ease)}
.drawer-inner{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-top:9px;padding:14px;opacity:0;transform:translateY(-4px);transition:opacity 200ms var(--ease) 40ms,transform 220ms var(--ease) 40ms}
#drawer.open .drawer-inner{opacity:1;transform:translateY(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.drawer-head-left{display:flex;align-items:center;gap:7px}
.drawer-tenant-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.drawer-title{font-size:13px;font-weight:700;letter-spacing:-.01em}
.drawer-subtitle{font-size:10px;color:var(--text-3);margin-top:1px}
.drawer-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--text-3);cursor:pointer;transition:background 120ms,color 120ms}
.drawer-close:hover{background:var(--surface-2);color:var(--text)}
.drawer-portal-link{display:flex;align-items:center;gap:3px;padding:3px 7px;border-radius:5px;border:1px solid var(--border);background:var(--bg);font-size:9px;font-weight:600;color:var(--text-2);text-decoration:none;transition:border-color 120ms,color 120ms}
.drawer-portal-link:hover{border-color:var(--border-hover);color:var(--text)}
.story-list{display:flex;flex-direction:column;gap:6px}
.story-item{border:1px solid var(--border);border-radius:8px;background:var(--bg);overflow:hidden;transition:border-color 160ms}
.story-item.open{border-color:var(--border-hover)}
.story-row{display:flex;align-items:center;gap:7px;padding:8px 11px;cursor:pointer;transition:background 120ms}
.story-row:hover{background:var(--surface)}
.story-status-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.story-row-main{flex:1;min-width:0}
.story-row-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-row-meta{font-size:9px;color:var(--text-3);margin-top:1px}
.story-badges{display:flex;align-items:center;gap:3px;flex-shrink:0}
/* ── Stroke badges — drawn/outline style, consistent with nav icon aesthetic ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px;border-radius:999px;
  font-size:9px;font-weight:700;letter-spacing:.04em;
  border:1.5px solid currentColor;
  background:transparent;white-space:nowrap;
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
/* Status badges */
.badge-active{color:var(--green);border-color:color-mix(in srgb,var(--green) 60%,transparent)}
.badge-planned{color:var(--text-3);border-color:var(--border)}
.badge-planned::before{background:var(--border)}
.badge-blocked{color:var(--red);border-color:color-mix(in srgb,var(--red) 60%,transparent)}
.badge-done{color:var(--text-3);border-color:var(--border)}
.badge-done::before{background:var(--border)}
.badge-hitl{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 60%,transparent);display:inline-flex;align-items:center;gap:4px}
/* Severity badges */
.badge-p1{color:var(--red);border-color:color-mix(in srgb,var(--red) 60%,transparent)}
.badge-p2{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 60%,transparent)}
.badge-p3{color:var(--text-2);border-color:var(--border)}
.badge-p3::before{background:var(--border)}
.badge-p4{color:var(--text-3);border-color:var(--border)}
.badge-p4::before{background:var(--border)}
/* User status */
.badge-invited{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 60%,transparent)}
.badge-disabled{color:var(--text-3);border-color:var(--border)}
.badge-disabled::before{background:var(--border)}
/* Roles */
.badge-operator{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.badge-team{color:var(--text-2);border-color:var(--border)}
.badge-team::before{background:var(--border)}
/* Compliance */
.badge-pass{color:var(--green);border-color:color-mix(in srgb,var(--green) 60%,transparent)}
.badge-warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 60%,transparent)}
.badge-fail{color:var(--red);border-color:color-mix(in srgb,var(--red) 60%,transparent)}
/* ── Status dots — compact indicator for tight contexts ── */
.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block}
.status-dot.ok{background:var(--green);box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 20%,transparent)}
.status-dot.warn{background:var(--amber);box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 20%,transparent)}
.status-dot.bad{background:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 20%,transparent)}
.status-dot.neutral{background:var(--border-hover)}
.story-chevron{font-size:10px;color:var(--text-3);transition:transform 240ms var(--ease);flex-shrink:0}
.story-item.open .story-chevron{transform:rotate(90deg)}
.story-detail{overflow:hidden;max-height:0;opacity:0;pointer-events:none;transition:max-height 280ms var(--ease),opacity 160ms var(--ease)}
.story-item.open .story-detail{max-height:700px;opacity:1;pointer-events:auto}
.story-detail-inner{border-top:1px solid var(--border);padding:11px 11px 13px}
.story-desc{font-size:11px;color:var(--text-2);line-height:1.55;margin-bottom:9px}
.story-meta-row{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:var(--text-3);margin-bottom:9px}
.story-meta-row strong{color:var(--text-2);font-weight:600}
.story-hitl{display:flex;align-items:flex-start;gap:6px;padding:6px 8px;border-radius:6px;margin-bottom:9px;background:color-mix(in srgb,var(--amber) 8%,transparent);border:1px solid color-mix(in srgb,var(--amber) 20%,transparent);font-size:10px;color:var(--amber);line-height:1.45}
.story-services-label{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.story-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.svc-link{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:var(--surface);text-decoration:none;color:var(--text);font-size:10px;font-weight:500;transition:border-color 120ms,background 120ms}
.svc-link:hover{border-color:var(--border-hover);background:var(--surface-2)}
.svc-link.off{opacity:.4;pointer-events:none}
.svc-icon{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-arrow{font-size:9px;color:var(--text-3)}
.res-dim-group{margin-bottom:9px}
.res-dim-group:last-child{margin-bottom:0}
.res-dim-label{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;display:flex;align-items:center;gap:4px}
/* Directive form */
.directive-form{margin-top:9px;border-top:1px solid var(--border);padding-top:9px}
.directive-form-head{display:flex;align-items:center;gap:5px;margin-bottom:6px;font-size:10px;font-weight:700;color:var(--text-3)}
.directive-type-btns{display:flex;gap:3px;margin-bottom:6px}
.dtype-btn{padding:2px 6px;border-radius:4px;font-size:8px;font-weight:700;border:1px solid var(--border);background:var(--surface);color:var(--text-3);cursor:pointer;transition:all 100ms}
.dtype-btn:hover{border-color:var(--border-hover);color:var(--text)}
.dtype-btn.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.dtype-btn.on-block{border-color:var(--red);color:var(--red);background:color-mix(in srgb,var(--red) 8%,transparent)}
.directive-textarea{width:100%;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--text);font-family:inherit;font-size:10px;padding:6px 8px;resize:vertical;min-height:46px;outline:none;transition:border-color 120ms}
.directive-textarea:focus{border-color:var(--accent)}
.directive-send{margin-top:5px;padding:4px 10px;border-radius:5px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);font-size:9px;font-weight:700;cursor:pointer;transition:opacity 120ms;align-self:flex-start}
.directive-send:hover{opacity:.85}
.directive-send:disabled{opacity:.4;cursor:default}
.directive-feedback{font-size:9px;margin-top:3px;display:none}
.directive-feedback.ok{display:block;color:var(--green)}
.directive-feedback.err{display:block;color:var(--red)}
.directive-list{margin-top:7px;display:flex;flex-direction:column;gap:3px}
.directive-item{padding:5px 7px;border-radius:5px;background:color-mix(in srgb,var(--accent) 5%,transparent);border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);font-size:9px;line-height:1.4}
.directive-item.unread{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.directive-item-meta{font-size:8px;color:var(--text-3);margin-bottom:1px;display:flex;gap:7px}
.directive-item-text{color:var(--text)}
.directive-badge{font-size:7px;font-weight:700;padding:1px 3px;border-radius:3px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.directive-badge.block{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.directive-badge.question{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.directive-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
/* Drawer plugins */
#drawerPlugins{margin-top:12px}

/* ── Level 1 Tenant Enhancements ─────────────────────────────────────────── */
.l1-section{max-width:720px;margin:28px auto 0}
.l1-section-head{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.l1-section-head svg{flex-shrink:0}

/* Tenant story cards */
.tenant-story-list{display:flex;flex-direction:column;gap:7px}
.tenant-story-card{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:9px;border:1px solid var(--border);background:var(--bg);box-shadow:var(--sh);transition:border-color 140ms,box-shadow 140ms}
.tenant-story-card:hover{border-color:var(--border-hover);box-shadow:var(--sh-lift)}
.tenant-story-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.tenant-story-body{flex:1;min-width:0}
.tenant-story-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-story-horizon{font-size:9px;color:var(--text-3);margin-top:1px}
.tenant-story-badges{display:flex;align-items:center;gap:4px;flex-shrink:0}
.ts-badge{font-size:8px;font-weight:700;letter-spacing:.04em;padding:2px 5px;border-radius:3px;white-space:nowrap}
.ts-badge-active{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.ts-badge-planned{background:var(--surface-2);color:var(--text-3)}
.ts-badge-hitl{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);display:flex;align-items:center;gap:2px}

/* AI Hub widget */
.tenant-aihub-widget{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px}
.tenant-aihub-cell{padding:9px 11px;border-radius:8px;background:var(--surface);border:1px solid var(--border)}
.tenant-aihub-cell-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.tenant-aihub-cell-id{font-size:9px;font-weight:700;font-family:monospace;color:var(--text-2)}
.tenant-aihub-cell-model{font-size:9px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-aihub-uptime{font-size:8px;color:var(--text-3);margin-top:3px}
.tenant-aihub-empty{font-size:11px;color:var(--text-3);padding:4px 2px}

/* Compliance badge */
.tenant-compliance-row{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.tenant-compliance-badge{flex:1;min-width:140px;padding:10px 13px;border-radius:9px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.tcb-label{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.tcb-score{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1}
.tcb-score.high{color:var(--green)}
.tcb-score.mid{color:var(--amber)}
.tcb-sub{font-size:9px;color:var(--text-3)}
.tcb-link{font-size:9px;color:var(--accent);text-decoration:none;margin-top:2px;display:inline-flex;align-items:center;gap:2px}
.tcb-link:hover{text-decoration:underline}

/* ── L1 SLA section ─────────────────────────────────────────────────────── */
.l1-sla-card{padding:12px 14px;border-radius:9px;background:var(--surface);border:1px solid var(--border)}
.l1-sla-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.l1-sla-tier{font-size:8px;font-weight:800;letter-spacing:.07em;padding:2px 7px;border-radius:4px;text-transform:uppercase}
.l1-sla-tier.premium{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.l1-sla-tier.standard{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.l1-sla-tier.basic{background:var(--surface-2);color:var(--text-3)}
.l1-sla-status{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px}
.l1-sla-status.green{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.l1-sla-status.amber{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.l1-sla-status.red{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.l1-sla-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--text-2);padding:3px 0}
.l1-sla-label{color:var(--text-3)}
.l1-uptime-bar-wrap{margin-top:8px}
.l1-uptime-bar-label{font-size:9px;color:var(--text-3);margin-bottom:3px;display:flex;justify-content:space-between}
.l1-uptime-bar{height:5px;border-radius:3px;background:var(--border);overflow:hidden}
.l1-uptime-bar-fill{height:100%;border-radius:3px;transition:width 600ms var(--ease)}
.l1-uptime-bar-fill.green{background:var(--green)}
.l1-uptime-bar-fill.amber{background:var(--amber)}
.l1-uptime-bar-fill.red{background:var(--red)}

/* ── L1 Activity timeline ───────────────────────────────────────────────── */
.l1-activity-list{display:flex;flex-direction:column;gap:6px}
.l1-activity-item{display:flex;align-items:flex-start;gap:9px;padding:8px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg)}
.l1-activity-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:3px}
.l1-activity-body{flex:1;min-width:0}
.l1-activity-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l1-activity-time{font-size:9px;color:var(--text-3);margin-top:1px}
.l1-activity-status{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0}

/* ── L1 Training section ────────────────────────────────────────────────── */
.l1-training-list{display:flex;flex-direction:column;gap:6px}
.l1-training-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg)}
.l1-training-check{width:16px;height:16px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.l1-training-check.done{background:color-mix(in srgb,var(--green) 14%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)}
.l1-training-check.pending{background:var(--surface-2);border:1px solid var(--border)}
.l1-training-name{font-size:11px;font-weight:600;flex:1}
.l1-training-badge{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;white-space:nowrap}
.l1-training-badge.done{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.l1-training-badge.pending{background:var(--surface-2);color:var(--text-3)}
.l1-training-progress{font-size:9px;color:var(--text-3);margin-top:6px;text-align:right}

/* ── L1 AI Hub enhanced (open button, warning) ──────────────────────────── */
.tenant-aihub-cell-actions{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap}
.aihub-open-btn{font-size:8px;font-weight:700;padding:3px 7px;border-radius:4px;
  border:none;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:3px;transition:background 120ms}
.aihub-open-btn:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.aihub-warn-btn{font-size:8px;font-weight:700;padding:3px 7px;border-radius:4px;
  border:none;background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);
  cursor:pointer;transition:background 120ms}
.aihub-warn-btn:hover{background:color-mix(in srgb,var(--amber) 22%,transparent)}

/* ── Level 1 Service cards ───────────────────────────────────────────────── */
.card{display:flex;flex-direction:column;padding:17px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg);box-shadow:var(--sh);text-decoration:none;color:inherit;transition:box-shadow 160ms,transform 160ms,border-color 160ms,opacity 200ms;outline:none}
.card:not(.off):hover{box-shadow:var(--sh-lift);transform:translateY(-2px);border-color:var(--border-hover)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card.off{cursor:default;opacity:.5}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.icon{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hotkey{font-size:8px;font-weight:600;letter-spacing:.05em;font-family:'SF Mono','Menlo',monospace;padding:2px 4px;border-radius:3px;background:var(--surface);border:1px solid var(--border);color:var(--text-3);opacity:0;transition:opacity 120ms}
.card:hover .hotkey{opacity:1}
.card-title{font-size:12px;font-weight:600;margin-bottom:3px}
.card-desc{font-size:11px;color:var(--text-2);line-height:1.5;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:11px}
.arrow{font-size:12px;color:var(--text-3);transition:transform 120ms,color 120ms;line-height:1}
.card:not(.off):hover .arrow{transform:translateX(3px);color:var(--text)}
.btn-action{margin-top:11px;padding:5px 11px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);font-size:10px;font-weight:600;cursor:pointer;transition:opacity 120ms;align-self:flex-start}
.btn-action:hover{opacity:.85}

/* ════════════════════════════════════════════════════════════════════════
   TENANT ONBOARDING WIZARD
════════════════════════════════════════════════════════════════════════ */
#wizard-backdrop{display:none;position:fixed;inset:0;z-index:49;background:rgba(0,0,0,.32);backdrop-filter:blur(3px);cursor:pointer}
#wizard-backdrop.open{display:block}
#wizard-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 64px);background:var(--bg);border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.22);flex-direction:column;overflow:hidden}
#wizard-modal.open{display:flex}
.wizard-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.wizard-title{font-size:13px;font-weight:700;color:var(--text)}
.wizard-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--text-3);transition:background 100ms}
.wizard-close:hover{background:var(--surface-2);color:var(--text)}
.wizard-progress{display:flex;align-items:center;gap:0;padding:10px 18px;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}
.wizard-step{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:var(--text-3);flex-shrink:0;white-space:nowrap}
.wizard-step-num{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;transition:all 160ms;flex-shrink:0}
.wizard-step.step-done .wizard-step-num{background:var(--green);border-color:var(--green);color:#fff}
.wizard-step.step-active .wizard-step-num{background:var(--accent);border-color:var(--accent);color:#fff}
.wizard-step.step-active{color:var(--text)}
.wizard-step-sep{width:20px;height:1px;background:var(--border);flex-shrink:0;margin:0 3px}
.wizard-body{flex:1;overflow-y:auto;padding:18px}
.wizard-step-panel{display:none}
.wizard-step-panel.step-active{display:block}
.wiz-field{margin-bottom:14px}
.wiz-label{display:block;font-size:10px;font-weight:700;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px}
.wiz-input{width:100%;padding:8px 11px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color 120ms}
.wiz-input:focus{border-color:var(--accent)}
.wiz-input.err{border-color:var(--red)}
.wiz-hint{font-size:10px;color:var(--text-3);margin-top:3px}
.wiz-radio-group{display:flex;gap:8px;flex-wrap:wrap}
.wiz-radio{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:7px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:11px;font-weight:600;color:var(--text-2);transition:all 120ms;user-select:none}
.wiz-radio:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}
.wiz-radio input{display:none}
.wiz-checkbox-group{display:flex;flex-direction:column;gap:7px}
.wiz-checkbox{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:7px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:11px;font-weight:600;color:var(--text-2);transition:all 120ms;user-select:none}
.wiz-checkbox:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}
.wiz-checkbox input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.wiz-model-sub{display:none;margin-top:8px;padding-left:4px}
.wizard-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--border);flex-shrink:0}
.wiz-btn{padding:7px 16px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;transition:opacity 120ms}
.wiz-btn-back{border:1px solid var(--border);background:var(--surface-2);color:var(--text-2)}
.wiz-btn-next{border:none;background:var(--accent);color:#fff}
.wiz-btn:disabled{opacity:.5;cursor:not-allowed}
.wiz-btn-back:hover:not(:disabled){background:var(--surface)}
.wiz-btn-next:hover:not(:disabled){opacity:.88}
.wiz-summary-row{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:11px}
.wiz-summary-label{font-weight:700;color:var(--text-3);min-width:120px;flex-shrink:0}
.wiz-summary-val{color:var(--text);flex:1}
.wiz-confirm-box{background:color-mix(in srgb,var(--green) 8%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,transparent);border-radius:9px;padding:14px 16px;text-align:center;margin-bottom:14px}
.wiz-confirm-icon{font-size:28px;margin-bottom:6px}
.wiz-confirm-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:4px}
.wiz-confirm-sub{font-size:11px;color:var(--text-3);line-height:1.5}
.wiz-template-pre{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:10px 12px;font-family:monospace;font-size:9px;color:var(--text-2);overflow-x:auto;max-height:200px;overflow-y:auto;white-space:pre;line-height:1.5}
/* Policy Check section */
.policy-result-row{display:flex;align-items:flex-start;gap:9px;padding:7px 10px;border-radius:7px;border:1px solid var(--border);background:var(--surface);font-size:11px;transition:background 120ms}
.policy-result-row:hover{background:var(--surface-2)}
.policy-light{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:1px}
.policy-light-pass{background:var(--green)}
.policy-light-fail{background:var(--red)}
.policy-light-warn{background:var(--amber)}
.policy-light-skip{background:var(--text-3)}
.policy-result-name{font-weight:600;flex:1;color:var(--text)}
.policy-result-id{font-size:9px;font-family:monospace;color:var(--text-3);flex-shrink:0}
.policy-result-sev{font-size:8px;font-weight:800;letter-spacing:.06em;padding:1px 5px;border-radius:3px;flex-shrink:0}
.policy-sev-critical{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.policy-sev-high{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.policy-sev-medium{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.policy-sev-low{background:var(--surface-2);color:var(--text-3)}
.policy-result-detail{font-size:10px;color:var(--text-3);grid-column:2/-1;margin-top:2px;line-height:1.4}
/* Onboard button in operator toolbar */
#btn-onboard-tenant{display:none}

/* ════════════════════════════════════════════════════════════════════════
   EMBED PANEL (slide-in iframe)
════════════════════════════════════════════════════════════════════════ */
#embed-backdrop{display:none;position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.16);backdrop-filter:blur(1px);cursor:pointer}
#embed-backdrop.visible{display:block}
#embed-panel{display:none;position:fixed;top:var(--header-h);right:0;width:min(680px,calc(100vw - 20px));height:calc(100vh - var(--header-h));z-index:40;flex-direction:column;background:var(--bg);border-left:1px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,.12);transition:transform 280ms var(--ease),opacity 220ms var(--ease);transform:translateX(100%);opacity:0}
#embed-panel.open{display:flex;transform:translateX(0);opacity:1}
.ep-head{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;height:42px;gap:9px}
.ep-title{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.ep-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ep-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-url{font-size:9px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ep-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}
.ep-btn{display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:5px;border:1px solid var(--border);background:var(--bg);font-size:9px;font-weight:600;color:var(--text-2);cursor:pointer;text-decoration:none;transition:background 120ms,color 120ms;white-space:nowrap}
.ep-btn:hover{background:var(--surface-2);color:var(--text)}
.ep-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--text-3);cursor:pointer;transition:background 120ms,color 120ms}
.ep-close:hover{background:var(--surface-2);color:var(--text)}
.ep-loading{display:none;align-items:center;justify-content:center;position:absolute;inset:42px 0 0 0;background:var(--bg);z-index:1;font-size:12px;color:var(--text-3);gap:7px}
.ep-loading.visible{display:flex}
.ep-spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin 600ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#embed-iframe{flex:1;border:none;width:100%;background:var(--surface)}
.embed-trigger{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:4px;font-size:8px;font-weight:700;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);cursor:pointer;text-decoration:none;transition:background 120ms;margin-top:3px;white-space:nowrap}
.embed-trigger:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* ════════════════════════════════════════════════════════════════════════
   PAGE INDEX BROWSER (Cmd+K)
════════════════════════════════════════════════════════════════════════ */
#pib-overlay{position:fixed;inset:0;z-index:100;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease)}
#pib-overlay.open{opacity:1;pointer-events:auto}
.pib-head{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.pib-search-wrap{flex:1;display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0 11px;transition:border-color 120ms}
.pib-search-wrap:focus-within{border-color:var(--accent)}
.pib-search-wrap svg{flex-shrink:0;color:var(--text-3)}
#pibSearch{flex:1;border:none;background:transparent;outline:none;font-size:13px;color:var(--text);padding:8px 0;font-family:inherit}
#pibSearch::placeholder{color:var(--text-3)}
.pib-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;flex-shrink:0;border:1px solid var(--border);background:transparent;color:var(--text-3);cursor:pointer;transition:background 120ms,color 120ms}
.pib-close:hover{background:var(--surface-2);color:var(--text)}
.pib-class{display:inline-flex;align-items:center;gap:2px;font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:1px 4px;border-radius:3px;margin-right:3px}
.pib-class-plugin{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.pib-class-process{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.pib-class-reference{background:var(--surface-2);color:var(--text-3)}
.pib-roles{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:7px 18px 8px;border-bottom:1px solid var(--border);flex-shrink:0}
.pib-role{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:10px;font-weight:600;cursor:pointer;color:var(--text-2);transition:all 100ms;white-space:nowrap}
.pib-role:hover{border-color:var(--border-hover);color:var(--text)}
.pib-role.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.pib-role-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.pib-section-head{display:flex;align-items:center;gap:6px;padding:8px 18px 3px;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);flex-shrink:0}
.pib-filters{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 18px 8px;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}
.pib-tag{padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:9px;font-weight:600;cursor:pointer;color:var(--text-2);transition:all 100ms;white-space:nowrap}
.pib-tag:hover{border-color:var(--border-hover);color:var(--text)}
.pib-tag.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.pib-body{flex:1;overflow-y:auto;padding:12px 18px}
.pib-dim-section{margin-bottom:18px}
.pib-dim-head{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.pib-dim-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.pib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:6px}
.pib-card{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:7px;border:1px solid var(--border);background:var(--bg);text-decoration:none;color:var(--text);transition:border-color 120ms,box-shadow 120ms,transform 120ms}
.pib-card:hover{border-color:var(--border-hover);box-shadow:var(--sh-lift);transform:translateY(-1px)}
.pib-card-title{font-size:11px;font-weight:600;line-height:1.35}
.pib-card-desc{font-size:9px;color:var(--text-3);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pib-card-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.pib-card-tag{font-size:8px;font-weight:600;padding:1px 4px;border-radius:3px;background:var(--surface-2);color:var(--text-3)}
.pib-empty{text-align:center;padding:36px 0;font-size:12px;color:var(--text-3)}
.pib-count{font-size:9px;color:var(--text-3);margin-left:auto}

/* ── Toast (existing simple) ─────────────────────────────────────────── */
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(10px);padding:6px 15px;border-radius:999px;background:var(--text);color:var(--bg);font-size:11px;font-weight:500;opacity:0;pointer-events:none;transition:opacity 200ms,transform 200ms;z-index:99;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Error Toast System (bottom-right, amber) ────────────────────────── */
.toast-container{position:fixed;bottom:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:7px;pointer-events:none}

/* ── Ask IIO Chat Widget ──────────────────────────────────────────────── */
#ask-iio-btn{
  position:fixed;bottom:80px;right:18px;z-index:201;
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);color:var(--accent-fg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(37,99,235,.35),0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent);
  transition:transform 160ms var(--ease),box-shadow 160ms var(--ease);
  outline:none;
}
#ask-iio-btn:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 8px 24px rgba(37,99,235,.40),0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}
#ask-iio-btn:active{transform:scale(.96)}
#ask-iio-btn.open{background:var(--text-2)}
#ask-iio-panel{
  position:fixed;bottom:140px;right:18px;z-index:202;
  width:min(380px,calc(100vw - 36px));height:520px;max-height:calc(100vh - 160px);
  background:var(--bg);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);
  display:none;flex-direction:column;overflow:hidden;
  animation:ask-iio-in 220ms var(--ease) both;
  transform-origin:bottom right;
}
#ask-iio-panel.visible{display:flex}
@keyframes ask-iio-in{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.ask-iio-header{
  display:flex;align-items:center;gap:9px;padding:12px 14px 10px;
  border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface);
}
.ask-iio-header-title{font-size:13px;font-weight:700;color:var(--text);flex:1}
.ask-iio-badge{font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  letter-spacing:.04em;white-space:nowrap}
.ask-iio-close{width:24px;height:24px;border-radius:6px;border:none;background:transparent;
  color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background 120ms,color 120ms;flex-shrink:0}
.ask-iio-close:hover{background:var(--surface-2);color:var(--text)}
.ask-iio-messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.ask-iio-msg{display:flex;flex-direction:column;gap:3px;max-width:90%}
.ask-iio-msg.user{align-self:flex-end;align-items:flex-end}
.ask-iio-msg.assistant{align-self:flex-start;align-items:flex-start}
.ask-iio-bubble{padding:8px 11px;border-radius:10px;font-size:12px;line-height:1.5;word-break:break-word}
.ask-iio-msg.user .ask-iio-bubble{background:var(--accent);color:var(--accent-fg);border-radius:10px 10px 3px 10px}
.ask-iio-msg.assistant .ask-iio-bubble{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px 10px 10px 3px}
.ask-iio-meta{font-size:9px;color:var(--text-3);padding:0 2px}
.ask-iio-source-badge{font-size:8px;font-weight:600;padding:1px 5px;border-radius:3px;
  background:var(--surface-2);color:var(--text-3);margin-left:4px;vertical-align:middle}
.ask-iio-typing{display:flex;align-items:center;gap:4px;padding:8px 11px;background:var(--surface);border:1px solid var(--border);border-radius:10px 10px 10px 3px}
.ask-iio-typing span{width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:ask-iio-dot 1.2s infinite}
.ask-iio-typing span:nth-child(2){animation-delay:.2s}
.ask-iio-typing span:nth-child(3){animation-delay:.4s}
@keyframes ask-iio-dot{0%,60%,100%{opacity:.2;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.ask-iio-chips{display:flex;flex-wrap:wrap;gap:5px;padding:8px 14px 6px;border-top:1px solid var(--border);flex-shrink:0}
.ask-iio-chip{padding:4px 9px;border-radius:20px;border:1px solid var(--border);background:var(--surface);
  font-size:10px;color:var(--text-2);cursor:pointer;transition:all 120ms;white-space:nowrap}
.ask-iio-chip:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.ask-iio-input-row{display:flex;align-items:center;gap:8px;padding:9px 14px 12px;border-top:1px solid var(--border);flex-shrink:0}
.ask-iio-input{flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--text);font-size:12px;font-family:inherit;
  outline:none;transition:border-color 120ms;resize:none;height:34px;min-height:34px}
.ask-iio-input:focus{border-color:var(--accent)}
.ask-iio-send{width:30px;height:30px;border-radius:7px;border:none;background:var(--accent);color:var(--accent-fg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:opacity 120ms,transform 120ms}
.ask-iio-send:hover{opacity:.85;transform:scale(1.05)}
.ask-iio-send:disabled{opacity:.4;cursor:default;transform:none}
/* ── Emotion state badges (Build 3 — emotion-aware Ask IIO UI) ── */
.ask-iio-emotion-badge{font-size:9px;font-weight:600;padding:1px 5px;border-radius:4px;
  background:var(--surface-2);color:var(--text-3);margin-left:6px;vertical-align:middle;
  transition:opacity 200ms}
.ask-iio-emotion-badge.stressed{color:var(--amber,#f59e0b)}
.ask-iio-emotion-badge.frustrated{color:var(--amber,#f59e0b)}
.ask-iio-emotion-badge.positive{color:var(--green,#22c55e)}
.ask-iio-emotion-badge.curious{color:var(--accent)}
.ask-iio-emotion-badge.formal{color:var(--text-2)}
.ask-iio-emotion-badge.casual{color:var(--text-2)}
/* Temporal hint — subtle system message row */
.ask-iio-msg.temporal .ask-iio-bubble{background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px dashed var(--border);color:var(--text-2);font-style:italic;font-size:11px}
.toast{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;border-radius:9px;background:var(--bg);border:1px solid var(--border);box-shadow:var(--sh-lift);font-size:11px;pointer-events:auto;max-width:320px;min-width:200px;animation:toast-in 220ms var(--ease) both}
.toast.toast-error{border-color:color-mix(in srgb,var(--amber) 35%,transparent);background:color-mix(in srgb,var(--amber) 5%,transparent)}
.toast.toast-ok{border-color:color-mix(in srgb,var(--green) 35%,transparent);background:color-mix(in srgb,var(--green) 5%,transparent)}
.toast.toast-out{animation:toast-out 200ms var(--ease) both}
.toast-icon{font-size:13px;flex-shrink:0;margin-top:1px}
.toast-body{flex:1;min-width:0}
.toast-msg{font-weight:600;color:var(--text);line-height:1.35}
.toast-detail{font-size:10px;color:var(--text-2);margin-top:2px;line-height:1.4;word-break:break-word}
@keyframes toast-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(12px)}}

/* ── Skeleton loading rows ───────────────────────────────────────────── */
.skeleton-row{height:40px;border-radius:7px;background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;margin-bottom:6px}
.skeleton-row.sm{height:26px}
.skeleton-row.lg{height:56px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:10px;color:var(--text-3)}
.empty-state svg{opacity:.25}
.empty-state h3{font-size:14px;font-weight:600;color:var(--text-2)}
.empty-state p{font-size:12px;text-align:center;max-width:280px;line-height:1.55}

/* ── Data-refresh indicator ──────────────────────────────────────────── */
#refresh-indicator{font-size:9px;color:var(--text-3);display:flex;align-items:center;gap:4px;margin-right:4px;white-space:nowrap;transition:color 200ms}
#refresh-indicator.refreshing{color:var(--accent)}
#refresh-indicator .ri-dot{width:5px;height:5px;border-radius:50%;background:var(--text-3);flex-shrink:0;transition:background 200ms}
#refresh-indicator.refreshing .ri-dot{background:var(--accent);animation:ri-pulse 900ms ease-in-out infinite}
@keyframes ri-pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ════════════════════════════════════════════════════════════════════════
   VIEW: SETTINGS — Account, API Access, Notifications, Portal Info
════════════════════════════════════════════════════════════════════════ */
#settings-content{padding:18px 20px 40px;max-width:860px;margin:0 auto}
.stg-section{margin-bottom:26px}

/* ── Settings Tab Navigation (OVERHAUL 1) ───────────────────────────── */
.stg-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.stg-tabs::-webkit-scrollbar{display:none}
.stg-tab{padding:8px 14px;font-size:11px;font-weight:600;color:var(--text-3);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-family:inherit;transition:all 120ms;flex-shrink:0}
.stg-tab:hover{color:var(--text-2)}
.stg-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.stg-panel{display:none}
.stg-panel.active{display:block}

/* ── Settings Two-Column Row Layout (OVERHAUL 2) ────────────────────── */
.stg-row2{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:16px}
.stg-row2:last-child{border-bottom:none}
.stg-row2-label{flex:1}
.stg-row2-label strong{font-size:11px;color:var(--text);font-weight:600;display:block}
.stg-row2-label span{font-size:10px;color:var(--text-3)}
.stg-row2-ctrl{display:flex;gap:4px;flex-shrink:0}
.stg-seg-btn{padding:4px 10px;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--text-2);font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 100ms;white-space:nowrap}
.stg-seg-btn:hover{border-color:var(--border-hover);color:var(--text)}
.stg-seg-btn.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,transparent)!important;font-weight:700}
/* Language flag cards */
.stg-lang-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;border:1px solid var(--border);border-radius:8px;background:var(--bg);cursor:pointer;font-family:inherit;transition:all 120ms;min-height:64px;color:var(--text-2)}
.stg-lang-card:hover{border-color:var(--border-hover);background:var(--surface);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.stg-lang-card.active{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,transparent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}

/* ── Global Stats Bar (OVERHAUL 6) ──────────────────────────────────── */
.view-stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:8px;overflow:hidden;margin-bottom:16px;flex-shrink:0}
.view-stat{background:var(--bg);padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.view-stat-n{font-size:18px;font-weight:800;color:var(--text);line-height:1}
.view-stat-l{font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.view-stat.ok .view-stat-n{color:var(--green)}
.view-stat.warn .view-stat-n{color:var(--amber)}
.view-stat.bad .view-stat-n{color:var(--red)}
.stg-section-head{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.stg-card{border:1px solid var(--border);border-radius:var(--r);background:var(--bg);padding:16px 18px;margin-bottom:8px;box-shadow:var(--sh)}
.stg-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border)}
.stg-row:last-child{border-bottom:none}
.stg-row-label{font-size:11px;font-weight:600;color:var(--text-2)}
.stg-row-val{font-size:11px;color:var(--text-3)}
.stg-btn{padding:5px 13px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:10px;font-weight:600;cursor:pointer;transition:all 120ms;font-family:inherit}
.stg-btn:hover{border-color:var(--border-hover);color:var(--text);background:var(--surface-2)}
.stg-btn.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}
.stg-btn.primary:hover{opacity:.85}
.stg-role-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.stg-token-wrap{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);font-family:'SF Mono','Menlo',monospace;font-size:11px;color:var(--text-2)}
.stg-token-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.stg-toggle-row:last-child{border-bottom:none}
.stg-toggle-label{font-size:11px;color:var(--text)}
.stg-toggle-desc{font-size:10px;color:var(--text-3);margin-top:1px}
.stg-toggle{position:relative;width:32px;height:18px;flex-shrink:0}
.stg-toggle input{opacity:0;width:0;height:0;position:absolute}
.stg-toggle-track{position:absolute;inset:0;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;transition:all 200ms}
.stg-toggle input:checked+.stg-toggle-track{background:var(--accent);border-color:var(--accent)}
.stg-toggle-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform 200ms;cursor:pointer}
.stg-toggle input:checked~.stg-toggle-thumb{transform:translateX(14px)}
.stg-code-block{font-family:'SF Mono','Menlo','Courier New',monospace;font-size:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:10px 13px;color:var(--text-2);white-space:pre-wrap;word-break:break-all;line-height:1.65;margin-top:8px}
.stg-theme-btns{display:flex;gap:4px}
.stg-theme-btn{padding:4px 10px;border-radius:5px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:10px;font-weight:600;cursor:pointer;transition:all 100ms;font-family:inherit}
.stg-theme-btn:hover{border-color:var(--border-hover);color:var(--text)}
.stg-theme-btn.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.stg-info-link{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--accent);text-decoration:none;padding:5px 0}
.stg-info-link:hover{text-decoration:underline}
.stg-save-feedback{font-size:10px;margin-left:8px;color:var(--green);display:none}
.stg-save-feedback.show{display:inline}

/* ── Experience Level + Language switcher ───────────────────────────── */
.stg-level-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text-2);cursor:pointer;transition:all 120ms;text-align:left;flex:1;min-width:100px;font-family:inherit}
.stg-level-btn:hover{border-color:var(--border-hover);color:var(--text)}
.stg-level-btn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.stg-lang-btn{padding:5px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text-2);cursor:pointer;font-size:11px;transition:all 120ms;font-family:inherit}
.stg-lang-btn:hover{border-color:var(--border-hover);color:var(--text)}
.stg-lang-btn.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
#level-indicator{font-size:9px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all 120ms}
#level-indicator:hover{opacity:.8}
#level-indicator[data-level="einsteiger"]{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
#level-indicator[data-level="experte"]{background:color-mix(in srgb,var(--text-3) 15%,transparent);color:var(--text-3)}

/* ════════════════════════════════════════════════════════════════════════
   THEME SYSTEM — density · font-size · picker grid · accent · badge
════════════════════════════════════════════════════════════════════════ */
/* ── Density modes ───────────────────────────────────────────────────── */
[data-density="comfortable"]{--spacing-unit:1.25;font-size:13px}
[data-density="standard"]   {--spacing-unit:1.0; font-size:12px}
[data-density="compact"]    {--spacing-unit:0.8; font-size:11px}
[data-font-size="large"]    {font-size:14px!important}

/* ── Theme picker grid ───────────────────────────────────────────────── */
/* ─── Theme Picker — enterprise grade ─────────────────────────────────── */
/* ─── Theme Picker — Rich, Curated ──────────────────────────────────── */
.theme-picker-wrap{display:flex;flex-direction:column;gap:0}
.theme-family-section{margin-bottom:20px}
.theme-family-section:last-child{margin-bottom:0}
.theme-family-header{
  display:flex;align-items:center;gap:8px;
  font-size:9px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px;
}
.theme-family-header::after{content:'';flex:1;height:1px;background:var(--border)}
/* 3 columns on desktop, 2 on mobile */
.theme-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
@media(max-width:480px){.theme-grid{grid-template-columns:repeat(2,1fr)}}
/* Each tile */
.theme-tile{
  position:relative;border-radius:12px;overflow:hidden;
  border:2px solid var(--border);cursor:pointer;
  background:none;padding:0;text-align:left;font-family:inherit;
  transition:border-color 150ms,box-shadow 150ms,transform 150ms;
  outline:none;display:block;width:100%;
}
.theme-tile:hover:not(.disabled){
  border-color:var(--border-hover);
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.08);
}
.theme-tile.active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),
             0 8px 20px rgba(0,0,0,.10);
}
.theme-tile.disabled{opacity:.28;cursor:not-allowed;pointer-events:none}
/* Preview — taller, more character */
.theme-preview{height:72px;width:100%;display:block;position:relative;overflow:hidden}
/* Mini sidebar mock inside preview */
.tp-sidebar{
  position:absolute;left:0;top:0;bottom:0;width:22px;
  display:flex;flex-direction:column;gap:3px;padding:6px 4px;
}
.tp-sidebar-dot{width:10px;height:4px;border-radius:2px;opacity:.45}
/* Mini header mock */
.tp-header{
  position:absolute;top:0;left:22px;right:0;height:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Mini content area */
.tp-content{
  position:absolute;top:10px;left:22px;right:0;bottom:0;
  padding:6px 7px;display:flex;flex-direction:column;gap:3px;
}
.tp-line{height:4px;border-radius:2px;opacity:.35}
.tp-line.w-80{width:80%}.tp-line.w-60{width:60%}.tp-line.w-45{width:45%}
/* Accent glow dot */
.tp-accent-dot{
  position:absolute;bottom:7px;right:8px;
  width:10px;height:10px;border-radius:50%;
  box-shadow:0 0 8px currentColor;
}
/* Active check */
.tp-check{
  position:absolute;top:6px;right:6px;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
/* Name + desc strip */
.theme-tile-name{
  padding:6px 8px 7px;
  background:var(--surface);border-top:1px solid var(--border);
}
.theme-tile-name strong{
  display:block;font-size:11px;font-weight:700;
  color:var(--text-2);transition:color 140ms;
}
.theme-tile-name span{
  display:block;font-size:9px;color:var(--text-3);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.theme-tile:hover:not(.disabled) .theme-tile-name strong{color:var(--text)}
.theme-tile.active .theme-tile-name strong{color:var(--accent)}
/* Locked notice */
.theme-locked-notice{
  display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-3);
  font-style:italic;padding:8px 11px;background:var(--surface);
  border-radius:8px;margin-bottom:14px;border:1px solid var(--border);
}
.theme-card{display:none}

/* ── Accent swatches ─────────────────────────────────────────────────── */
.accent-swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform 120ms,border-color 120ms;flex-shrink:0}
.accent-swatch.active{border-color:var(--text-1);transform:scale(1.22)}
.accent-swatch:hover:not([disabled]){transform:scale(1.15)}
.accent-swatch[disabled]{opacity:0.3;cursor:not-allowed}
#accent-custom{width:36px;height:22px;border:none;border-radius:4px;cursor:pointer;padding:0;vertical-align:middle}

/* ── Density buttons ─────────────────────────────────────────────────── */
.density-btn{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text-2);font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 100ms}
.density-btn.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.density-btn:hover{border-color:var(--border-hover)}

/* ── Theme badge in header ───────────────────────────────────────────── */
#theme-badge{font-size:9px;color:var(--text-3);padding:1px 6px;border-radius:4px;border:1px solid var(--border);white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}

/* ════════════════════════════════════════════════════════════════════════
   VIEW: DOCS — Integrated documentation browser
════════════════════════════════════════════════════════════════════════ */
#view-docs{flex-direction:row}
#docs-nav{width:260px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
.docs-search-wrap{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid var(--border)}
.docs-search-wrap svg{color:var(--text-3);flex-shrink:0}
#docsSearch{flex:1;border:none;background:transparent;outline:none;font-size:12px;color:var(--text);font-family:inherit}
#docsSearch::placeholder{color:var(--text-3)}
.docs-cat-tabs{display:flex;gap:2px;padding:8px 8px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.docs-cat-tab{padding:2px 8px;border-radius:5px;font-size:10px;font-weight:600;border:1px solid var(--border);background:var(--surface-2);color:var(--text-3);cursor:pointer;transition:all 100ms;white-space:nowrap}
.docs-cat-tab:hover{border-color:var(--border-hover);color:var(--text)}
.docs-cat-tab.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.docs-type-colors{--c-runbook:var(--accent);--c-reference:var(--text-3);--c-architecture:var(--accent);--c-governance:var(--amber);--c-training:var(--green)}
#docs-list{flex:1;overflow-y:auto;padding:6px 8px}
.docs-item{display:flex;flex-direction:column;gap:2px;padding:7px 8px;border-radius:7px;cursor:pointer;transition:background 100ms;margin-bottom:1px}
.docs-item:hover{background:var(--surface-2)}
.docs-item.active{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.docs-item-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docs-item-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.docs-type-badge{font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px}
.docs-type-runbook{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.docs-type-reference{background:var(--surface-2);color:var(--text-3)}
.docs-type-architecture{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.docs-type-governance{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.docs-type-training{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.docs-item-tag{font-size:8px;color:var(--text-3);background:var(--surface-2);padding:1px 4px;border-radius:3px}
#docs-list-empty{font-size:12px;color:var(--text-3);padding:16px 8px;display:none}
#docs-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.docs-main-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;color:var(--text-3);padding:40px}
.docs-main-placeholder svg{opacity:.25}
.docs-main-placeholder h2{font-size:17px;font-weight:700;color:var(--text-2)}
.docs-main-placeholder p{font-size:12px;text-align:center;max-width:380px;line-height:1.6}
.docs-quicklinks{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;border-top:1px solid var(--border)}
.docs-ql-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:5px;font-size:10px;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text-2);text-decoration:none;transition:all 100ms;cursor:pointer}
.docs-ql-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
#docs-iframe-wrap{flex:1;overflow:hidden;position:relative}
#docs-iframe{width:100%;height:100%;border:none;display:none}
.docs-cat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:16px}
.docs-cat-card{border:1px solid var(--border);border-radius:9px;background:var(--bg);padding:13px 15px;cursor:pointer;transition:border-color 140ms,box-shadow 140ms,transform 80ms}
.docs-cat-card:hover{border-color:var(--border-hover);box-shadow:var(--sh-lift);transform:translateY(-1px)}
.docs-cat-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.docs-cat-card-name{font-size:12px;font-weight:700}
.docs-cat-card-count{font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--surface-2);color:var(--text-3)}
.docs-cat-card-desc{font-size:10px;color:var(--text-2);line-height:1.45}

/* ════════════════════════════════════════════════════════════════════════
   VIEW: WORKFLOWS — Flow Registry + Executions + HITL
════════════════════════════════════════════════════════════════════════ */
#view-workflows{overflow-y:auto}
#workflows-content{padding:18px 20px 40px;max-width:1060px;margin:0 auto}
.wf-section{margin-bottom:26px}
.wf-section-head{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.wf-section-head svg{flex-shrink:0}
.wf-cat-group{margin-bottom:18px}
.wf-cat-label{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding:0 2px;margin-bottom:7px;display:flex;align-items:center;gap:5px}
.wf-cat-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:7px}
.wf-card{border:1px solid var(--border);border-radius:9px;background:var(--bg);padding:11px 13px;transition:border-color 140ms,box-shadow 140ms;cursor:default}
.wf-card:hover{border-color:var(--border-hover);box-shadow:var(--sh)}
.wf-card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:5px;gap:6px}
.wf-card-id{font-size:9px;font-weight:700;font-family:'SF Mono','Menlo',monospace;color:var(--text-3);flex-shrink:0}
.wf-card-title{font-size:11px;font-weight:600;line-height:1.35;flex:1}
.wf-card-meta{font-size:9px;color:var(--text-3);line-height:1.4;margin-bottom:5px}
.wf-badge{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;white-space:nowrap}
.wf-badge-active{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.wf-badge-paused{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.wf-badge-idle{background:var(--surface-2);color:var(--text-3)}
.wf-card-footer{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.wf-exec-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--border);font-size:10px}
.wf-exec-id{font-family:'SF Mono','Menlo',monospace;font-size:9px;font-weight:700;color:var(--accent);flex-shrink:0}
.wf-exec-flow{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-exec-status{font-size:9px;font-weight:700;flex-shrink:0}
.wf-exec-meta{font-size:9px;color:var(--text-3);flex-shrink:0}
.wf-run-box{border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:14px 16px}
.wf-run-box-title{font-size:11px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.wf-run-select{width:100%;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-family:inherit;font-size:11px;padding:6px 9px;outline:none;margin-bottom:8px;transition:border-color 120ms}
.wf-run-select:focus{border-color:var(--accent)}
.wf-cli-box{font-family:'SF Mono','Menlo','Courier New',monospace;font-size:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--text-2);word-break:break-all;line-height:1.6;white-space:pre-wrap}
.wf-cli-label{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.wf-hitl-item{border:1px solid color-mix(in srgb,var(--amber) 25%,transparent);border-radius:8px;background:color-mix(in srgb,var(--amber) 4%,transparent);padding:10px 12px;display:flex;align-items:flex-start;gap:10px}
.wf-hitl-icon{flex-shrink:0;margin-top:1px;color:var(--amber)}
.wf-hitl-body{flex:1;min-width:0}
.wf-hitl-id{font-size:9px;font-weight:700;color:var(--amber);font-family:'SF Mono','Menlo',monospace;margin-bottom:2px}
.wf-hitl-title{font-size:11px;font-weight:600;line-height:1.35;margin-bottom:3px}
.wf-hitl-gate{font-size:10px;color:var(--text-2)}
.wf-hitl-flow{font-size:9px;color:var(--text-3);margin-top:2px;font-family:'SF Mono','Menlo',monospace}
.wf-stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.wf-stat{padding:12px 16px;border:1px solid var(--border);border-radius:9px;background:var(--bg);text-align:center;min-width:80px}
.wf-stat-n{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.wf-stat-l{font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.wf-stat.s-total .wf-stat-n{color:var(--text)}
.wf-stat.s-active .wf-stat-n{color:var(--green)}
.wf-stat.s-hitl .wf-stat-n{color:var(--amber)}
.wf-stat.s-cats .wf-stat-n{color:var(--accent)}

/* ════════════════════════════════════════════════════════════════════════
   VIEW: AGENTS — Active Agents + MCP Tools + Directives + MCP Server
════════════════════════════════════════════════════════════════════════ */
#view-agents{overflow-y:auto}
#agents-content{padding:18px 20px 40px;max-width:1060px;margin:0 auto}
.ag-section{margin-bottom:26px}
.ag-section-head{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.ag-agent-item{border:1px solid var(--border);border-radius:9px;background:var(--bg);padding:11px 13px;display:flex;align-items:flex-start;gap:11px;transition:border-color 140ms}
.ag-agent-item:hover{border-color:var(--border-hover)}
.ag-agent-avatar{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:#fff}
.ag-agent-body{flex:1;min-width:0}
.ag-agent-id{font-size:9px;font-weight:700;font-family:'SF Mono','Menlo',monospace;color:var(--text-3);margin-bottom:1px}
.ag-agent-task{font-size:11px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-agent-meta{font-size:9px;color:var(--text-3);margin-top:2px}
.ag-agent-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.ag-tool-cat-group{margin-bottom:14px}
.ag-tool-cat-label{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.ag-tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.ag-tool-card{border:1px solid var(--border);border-radius:7px;background:var(--surface);padding:8px 10px;transition:border-color 120ms}
.ag-tool-card:hover{border-color:var(--border-hover)}
.ag-tool-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.ag-tool-name{font-size:10px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ag-tool-badge{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;flex-shrink:0}
.ag-tool-badge-check{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.ag-tool-badge-execute{background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red)}
.ag-tool-badge-query{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.ag-tool-badge-monitor{background:color-mix(in srgb,var(--amber) 10%,transparent);color:var(--amber)}
.ag-tool-badge-governance{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.ag-tool-id{font-size:9px;font-family:'SF Mono','Menlo',monospace;color:var(--text-3)}
.ag-dir-item{border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:8px;background:color-mix(in srgb,var(--accent) 5%,transparent);padding:10px 12px;display:flex;align-items:flex-start;gap:9px}
.ag-dir-unread{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ag-dir-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:3px;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.ag-dir-body{flex:1;min-width:0}
.ag-dir-meta{font-size:9px;color:var(--text-3);margin-bottom:3px;display:flex;gap:8px;flex-wrap:wrap}
.ag-dir-text{font-size:11px;line-height:1.45;color:var(--text)}
.ag-mcp-box{border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:14px 16px}
.ag-mcp-status-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ag-mcp-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ag-mcp-status-label{font-size:12px;font-weight:600}
.ag-mcp-detail{font-size:10px;color:var(--text-2);line-height:1.6}
.ag-mcp-code{font-family:'SF Mono','Menlo','Courier New',monospace;font-size:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--text-2);white-space:pre-wrap;word-break:break-all;margin-top:8px;line-height:1.7}
.ag-stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.ag-stat{padding:12px 16px;border:1px solid var(--border);border-radius:9px;background:var(--bg);text-align:center;min-width:80px}
.ag-stat-n{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.ag-stat-l{font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.ag-stat.s-active .ag-stat-n{color:var(--green)}
.ag-stat.s-tools .ag-stat-n{color:var(--accent)}
.ag-stat.s-dirs .ag-stat-n{color:var(--amber)}
.ag-stat.s-hitl .ag-stat-n{color:var(--amber)}

/* ════════════════════════════════════════════════════════════════════════
   VIEW: GRAPH — Knowledge Graph Portal View
════════════════════════════════════════════════════════════════════════ */
#view-graph{overflow-y:auto}
#graph-content{padding:18px 20px 40px;max-width:1060px;margin:0 auto}
.gv-section{margin-bottom:26px}
.gv-section-head{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.gv-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
.gv-stat{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.gv-stat-n{font-size:22px;font-weight:800;line-height:1;color:var(--text)}
.gv-stat-l{font-size:10px;color:var(--text-3);margin-top:3px;font-weight:500}
.gv-stat.s-total .gv-stat-n{color:var(--accent)}
.gv-stat.s-active .gv-stat-n{color:var(--green)}
.gv-stat.s-domains .gv-stat-n{color:var(--amber)}
.gv-stat.s-conn .gv-stat-n{color:var(--text-2)}
/* Layer grid */
.gv-layer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:7px}
.gv-layer-card{padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--bg);cursor:pointer;transition:border-color 120ms,box-shadow 120ms,transform 80ms;position:relative}
.gv-layer-card:hover{border-color:var(--border-hover);box-shadow:var(--sh-lift);transform:translateY(-1px)}
.gv-layer-card.selected{border-color:var(--tenant-accent);background:color-mix(in srgb,var(--tenant-accent) 6%,transparent)}
.gv-layer-id{font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--text-3);margin-bottom:2px;font-family:monospace}
.gv-layer-name{font-size:11px;font-weight:600;color:var(--text);line-height:1.3;margin-bottom:5px}
.gv-layer-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.gv-layer-domain{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}
.gv-layer-status{font-size:8px;font-weight:600;padding:1px 5px;border-radius:3px}
.gv-layer-status.active{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.gv-layer-status.template{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.gv-layer-status.planned{background:var(--surface-2);color:var(--text-3)}
/* Query interface */
.gv-query-box{padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.gv-query-btns{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.gv-qbtn{padding:6px 13px;font-size:11px;font-weight:600;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text-2);cursor:pointer;transition:all 100ms}
.gv-qbtn:hover{border-color:var(--tenant-accent);color:var(--tenant-accent);background:color-mix(in srgb,var(--tenant-accent) 7%,transparent)}
.gv-qbtn.active{border-color:var(--tenant-accent);color:var(--tenant-accent);background:color-mix(in srgb,var(--tenant-accent) 12%,transparent)}
.gv-query-input-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.gv-query-input{padding:5px 10px;font-size:11px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);width:160px;outline:none;font-family:monospace}
.gv-query-input:focus{border-color:var(--tenant-accent)}
.gv-query-results{min-height:80px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg);margin-top:10px}
.gv-results-hdr{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.gv-results-body{font-size:11px;font-family:monospace;white-space:pre-wrap;line-height:1.6;max-height:280px;overflow-y:auto;color:var(--text)}
.gv-results-loading{text-align:center;padding:16px;font-size:11px;color:var(--text-3)}
/* Query history */
.gv-history{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.gv-history-head{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.gv-history-item{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--border);cursor:pointer}
.gv-history-item:last-child{border-bottom:none}
.gv-history-item:hover .gv-history-qt{color:var(--tenant-accent)}
.gv-history-qt{font-size:10px;font-weight:600;font-family:monospace;color:var(--text-2);min-width:80px}
.gv-history-lid{font-size:10px;color:var(--text-3);font-family:monospace;flex:1}
.gv-history-ts{font-size:9px;color:var(--text-3)}
/* Search */
.gv-search-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.gv-search-input{flex:1;padding:7px 12px;font-size:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);outline:none}
.gv-search-input:focus{border-color:var(--tenant-accent)}
.gv-search-sel{padding:6px 10px;font-size:11px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);cursor:pointer;outline:none}
/* Connections panel */
.gv-conn-panel{display:none;padding:12px 14px;border:1px solid var(--tenant-accent);border-radius:9px;background:color-mix(in srgb,var(--tenant-accent) 4%,transparent);margin-top:8px}
.gv-conn-panel.visible{display:block}
.gv-conn-title{font-size:11px;font-weight:700;margin-bottom:8px;color:var(--text)}
.gv-conn-list{display:flex;flex-wrap:wrap;gap:5px}
.gv-conn-tag{font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer}
.gv-conn-tag:hover{border-color:var(--tenant-accent);color:var(--tenant-accent)}
/* Tenant custom footer */
#tenant-custom-footer{display:none;padding:8px 20px;font-size:10px;color:var(--text-3);border-top:1px solid var(--border);text-align:center;background:var(--surface);flex-shrink:0}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:768px){
  :root{--sidebar-w:52px}
  .nav-item span,.nav-section-label,#sidebar-ctx{display:none}
  .nav-item{justify-content:center;padding:8px}
  .hdr-logo{justify-content:center}
  .iio-wordmark{display:none}
  #portal-left{width:260px}
  .pib-grid{grid-template-columns:1fr}
  .story-services{grid-template-columns:1fr}
}
@media(max-width:540px){
  .user-email{display:none}
  .accent-picker{display:none}
  #portal-left{display:none}
  .portal-body{padding:10px 12px 24px}
}

/* ── Large-screen improvements (≥1440px) ─────────────────────────────────── */
@media(min-width:1440px){
  :root{--sidebar-w:240px}
  .nav-item{font-size:12.5px}
}

/* ── Standardized content padding inside scrollable views ───────────────── */
/* Applied to inner content containers, not .view itself (which is overflow:hidden) */
#workflows-content,.fed-section-wrap,#agents-content,#federation-content,
#usage-content,#marketplace-content,#people-content{
  padding:clamp(12px,2vw,24px) clamp(12px,2vw,24px) 40px;
}

/* ── Content width cap for wide views ───────────────────────────────────── */
.view-content-wrap{max-width:1400px;margin:0 auto;padding:0 clamp(12px,2vw,24px)}

/* ── Stats bar max-cell-width on large monitors ──────────────────────────── */
.view-stats-bar{grid-template-columns:repeat(4,minmax(0,280px))}

/* ── Theme grid: fluid columns ───────────────────────────────────────────── */
.theme-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}

/* ── Settings max-width on desktop ─────────────────────────────────────── */
@media(min-width:900px){
  #view-settings #settings-content{max-width:680px}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — tablet 900px, mobile 600px
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #sidebar { width: 48px; }
  .nav-item span { display: none; }
  .nav-section-label { display: none; }
  #sidebar-ctx { display: none; }
  .iio-wordmark { display: none; }
  .nav-item { justify-content: center; padding: 8px; }
  .hdr-logo { justify-content: center; width: 48px; }
  #main { margin-left: 0; }
  .gv-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .portal-body { flex-direction: column; }
  #portal-left { width: 100%; max-height: none; position: static; }
}
@media (max-width: 600px) {
  /* sidebar position/transform handled by the sidebar rule above */
  #sidebar.mobile-open .nav-item span { display: inline; }
  #sidebar.mobile-open .nav-section-label { display: block; }
  #sidebar.mobile-open .nav-item { justify-content: flex-start; padding: 6px 8px; }
  #sidebar.mobile-open .iio-wordmark { display: inline; }
  #sidebar.mobile-open #sidebar-ctx { display: block; }
  #main { margin-left: 0; }
  #ham { display: flex !important; }
  .gv-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .hdr-breadcrumb { padding: 0 8px; }
  .portal-body { padding: 8px 10px 24px; }
  #portal-left { display: none; }
  .user-email { display: none; }
  .accent-picker { display: none; }
  .pib-grid { grid-template-columns: 1fr; }
}

/* Hamburger button (hidden on desktop, visible on mobile) */
#ham { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; color: var(--text); font-size: 18px; cursor: pointer; flex-shrink: 0; border-radius: 7px; transition: background 120ms; }
#ham:hover { background: var(--surface); }

/* ── Responsive: Settings + Stats (OVERHAUL 7) ───────────────────────── */
@media (max-width: 480px) {
  .stg-row2 { flex-direction: column; align-items: flex-start; gap: 8px; }
  .stg-row2-ctrl { flex-wrap: wrap; }
  .view-stats-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .theme-cards-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .theme-cards-row::-webkit-scrollbar { display: none; }
  .stg-tabs { padding-bottom: 2px; }
}

/* Skeleton type variants */
.skeleton-card { height: 200px; border-radius: var(--r); background: linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; margin-bottom: 10px; }
.skeleton-stat { height: 72px; border-radius: 9px; background: linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }

/* All-clear / no-incident green panels */
.all-clear-panel { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r); border: 1px solid color-mix(in srgb,var(--green) 25%,transparent); background: color-mix(in srgb,var(--green) 6%,transparent); color: var(--green); }
.all-clear-panel svg { flex-shrink: 0; opacity: .85; }
.all-clear-panel-body { flex: 1; }
.all-clear-panel-title { font-size: 13px; font-weight: 700; }
.all-clear-panel-sub { font-size: 11px; opacity: .75; margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   BUILD 1: AI HUB FLEET MANAGEMENT VIEW
════════════════════════════════════════════════════════════════════════ */
.fleet-header { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.fleet-stat { padding:12px 16px; border:1px solid var(--border); border-radius:10px; background:var(--bg); text-align:center; min-width:90px; flex:1; }
.fleet-stat-n { font-size:24px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.fleet-stat-l { font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); margin-top:3px; }
.fleet-stat.s-total .fleet-stat-n { color:var(--text); }
.fleet-stat.s-live .fleet-stat-n { color:var(--green); }
.fleet-stat.s-down .fleet-stat-n { color:var(--red); }
.fleet-stat.s-avail .fleet-stat-n { color:var(--accent); }
.fleet-stat.s-util .fleet-stat-n { color:var(--amber); }

/* Cell grid */
.cell-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-bottom:24px; }
.cell-card { border:1px solid var(--border); border-radius:10px; background:var(--bg); padding:14px; transition:border-color 140ms,box-shadow 140ms; position:relative; overflow:hidden; }
.cell-card:hover { border-color:var(--border-hover); box-shadow:var(--sh-lift); }
.cell-card-live { border-color:color-mix(in srgb,var(--green) 30%,transparent); background:color-mix(in srgb,var(--green) 3%,transparent); }
.cell-card-live:hover { border-color:color-mix(in srgb,var(--green) 50%,transparent); }
.cell-card-down { border-color:color-mix(in srgb,var(--red) 30%,transparent); background:color-mix(in srgb,var(--red) 3%,transparent); }
.cell-card-down:hover { border-color:color-mix(in srgb,var(--red) 50%,transparent); }
.cell-card-unassigned { opacity:.7; }
.cell-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cell-card-id { font-size:13px; font-weight:800; font-family:'SF Mono','Menlo',monospace; display:flex; align-items:center; gap:6px; }
.cell-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cell-status-dot.live { background:var(--green); box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 20%,transparent); }
.cell-status-dot.down { background:var(--red); box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 20%,transparent); }
.cell-status-dot.unassigned { background:var(--text-3); }
.cell-status-dot.offline { background:var(--amber); }
.cell-status-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px; }
.cell-status-badge.live { background:color-mix(in srgb,var(--green) 12%,transparent); color:var(--green); }
.cell-status-badge.down { background:color-mix(in srgb,var(--red) 12%,transparent); color:var(--red); }
.cell-status-badge.unassigned { background:var(--surface-2); color:var(--text-3); }
.cell-status-badge.offline { background:color-mix(in srgb,var(--amber) 12%,transparent); color:var(--amber); }
.cell-card-tenant { font-size:11px; font-weight:600; color:var(--text-2); margin-bottom:4px; }
.cell-card-meta { font-size:10px; color:var(--text-3); margin-bottom:8px; line-height:1.4; }
.cell-card-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.model-tag { font-size:8px; font-weight:700; padding:2px 6px; border-radius:4px; background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent); }
.model-tag.ollama { background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent); }
.model-tag.litellm { background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent); }
.model-tag.openwebui { background:color-mix(in srgb,var(--green) 10%,transparent); color:var(--green); }
.model-tag.qdrant { background:color-mix(in srgb,var(--amber) 10%,transparent); color:var(--amber); }
.model-tag.tika { background:var(--surface-2); color:var(--text-3); }
.cell-card-url { font-size:9px; color:var(--accent); text-decoration:none; display:flex; align-items:center; gap:3px; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell-card-url:hover { text-decoration:underline; }
.cell-card-actions { display:flex; gap:5px; flex-wrap:wrap; }
.cell-action-btn { font-size:9px; font-weight:700; padding:4px 10px; border-radius:5px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text-2); transition:all 100ms; white-space:nowrap; }
.cell-action-btn:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); }
.cell-action-btn.primary { border-color:var(--accent); background:var(--accent); color:var(--accent-fg); }
.cell-action-btn.primary:hover { opacity:.85; }
.cell-util-bar { height:3px; border-radius:2px; background:var(--surface-2); overflow:hidden; margin-top:8px; }
.cell-util-fill { height:100%; border-radius:2px; background:var(--green); transition:width 600ms ease; }

/* Fleet actions bar */
.fleet-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; padding:12px 14px; border:1px solid var(--border); border-radius:9px; background:var(--surface); align-items:center; }
.fleet-action-btn { padding:6px 14px; border-radius:7px; border:1px solid var(--border); background:var(--bg); color:var(--text-2); font-size:11px; font-weight:600; cursor:pointer; transition:all 100ms; display:flex; align-items:center; gap:5px; }
.fleet-action-btn:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); }
.fleet-action-btn.primary { border-color:var(--accent); background:var(--accent); color:var(--accent-fg); }
.fleet-action-btn.primary:hover { opacity:.85; }

/* Models registry */
.models-table { width:100%; border-collapse:collapse; }
.models-table th { font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding:5px 8px; text-align:left; border-bottom:1px solid var(--border); }
.models-table td { font-size:11px; padding:7px 8px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; }
.models-table tr:last-child td { border-bottom:none; }
.models-table tr:hover td { background:var(--surface); }
.model-cell-tags { display:flex; flex-wrap:wrap; gap:3px; }
.model-cell-tag { font-size:8px; font-weight:600; padding:1px 5px; border-radius:3px; background:var(--surface-2); color:var(--text-3); font-family:'SF Mono','Menlo',monospace; }

/* Cell assign modal */
.cell-modal-backdrop { display:none; position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.35); backdrop-filter:blur(3px); }
.cell-modal-backdrop.open { display:block; }
.cell-modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:61; width:min(480px,calc(100vw - 32px)); background:var(--bg); border:1px solid var(--border); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.22); flex-direction:column; overflow:hidden; }
.cell-modal.open { display:flex; }
.cell-modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cell-modal-title { font-size:13px; font-weight:700; }
.cell-modal-close { width:24px; height:24px; border-radius:5px; border:1px solid var(--border); background:transparent; cursor:pointer; color:var(--text-3); display:flex; align-items:center; justify-content:center; transition:background 100ms; }
.cell-modal-close:hover { background:var(--surface-2); color:var(--text); }
.cell-modal-body { padding:16px 18px; flex:1; overflow-y:auto; }
.cell-modal-field { margin-bottom:14px; }
.cell-modal-label { display:block; font-size:10px; font-weight:700; color:var(--text-3); letter-spacing:.05em; text-transform:uppercase; margin-bottom:5px; }
.cell-modal-select { width:100%; padding:8px 11px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:12px; font-family:inherit; outline:none; transition:border-color 120ms; }
.cell-modal-select:focus { border-color:var(--accent); }
.cell-modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); flex-shrink:0; }
.cell-modal-cancel { padding:7px 16px; border-radius:7px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); font-size:11px; font-weight:600; cursor:pointer; }
.cell-modal-submit { padding:7px 16px; border-radius:7px; border:none; background:var(--accent); color:var(--accent-fg); font-size:11px; font-weight:700; cursor:pointer; transition:opacity 120ms; }
.cell-modal-submit:hover { opacity:.85; }
.cell-modal-fb { font-size:10px; margin-top:6px; display:none; }
.cell-modal-fb.ok { display:block; color:var(--green); }
.cell-modal-fb.err { display:block; color:var(--red); }

/* Health check results */
.health-check-result { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.hcr-row { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; background:var(--surface); font-size:10px; }
.hcr-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* ════════════════════════════════════════════════════════════════════════
   BUILD 2: LIVE ALERTS PANEL
════════════════════════════════════════════════════════════════════════ */
.alerts-panel { margin-bottom:24px; }
.alerts-all-clear { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:10px; border:1px solid color-mix(in srgb,var(--green) 25%,transparent); background:color-mix(in srgb,var(--green) 5%,transparent); }
.alerts-all-clear-icon { font-size:20px; flex-shrink:0; }
.alerts-all-clear-text { flex:1; }
.alerts-all-clear-title { font-size:13px; font-weight:700; color:var(--green); }
.alerts-all-clear-sub { font-size:10px; color:var(--text-3); margin-top:2px; }
.alert-card { border:1px solid var(--border); border-radius:9px; background:var(--bg); padding:12px 14px; display:flex; align-items:flex-start; gap:11px; transition:border-color 140ms; margin-bottom:7px; }
.alert-card:hover { border-color:var(--border-hover); }
.alert-card.sev-critical { border-color:color-mix(in srgb,var(--red) 35%,transparent); background:color-mix(in srgb,var(--red) 3%,transparent); }
.alert-card.sev-high { border-color:color-mix(in srgb,var(--amber) 35%,transparent); background:color-mix(in srgb,var(--amber) 3%,transparent); }
.alert-card.sev-medium { border-color:color-mix(in srgb,var(--accent) 25%,transparent); background:color-mix(in srgb,var(--accent) 3%,transparent); }
.alert-sev-badge { font-size:8px; font-weight:800; padding:2px 6px; border-radius:4px; letter-spacing:.05em; flex-shrink:0; margin-top:2px; }
.alert-sev-badge.CRITICAL { background:color-mix(in srgb,var(--red) 15%,transparent); color:var(--red); }
.alert-sev-badge.HIGH { background:color-mix(in srgb,var(--amber) 15%,transparent); color:var(--amber); }
.alert-sev-badge.MEDIUM { background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent); }
.alert-sev-badge.LOW { background:var(--surface-2); color:var(--text-3); }
.alert-body { flex:1; min-width:0; }
.alert-name { font-size:12px; font-weight:700; line-height:1.35; margin-bottom:3px; }
.alert-msg { font-size:11px; color:var(--text-2); line-height:1.4; margin-bottom:5px; }
.alert-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:9px; color:var(--text-3); }
.alert-runbook-link { color:var(--accent); text-decoration:none; font-size:9px; }
.alert-runbook-link:hover { text-decoration:underline; }
.alert-ack-btn { padding:4px 11px; border-radius:5px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:9px; font-weight:700; cursor:pointer; transition:all 100ms; flex-shrink:0; margin-top:2px; }
.alert-ack-btn:hover { border-color:var(--green); color:var(--green); background:color-mix(in srgb,var(--green) 8%,transparent); }
.alert-ack-btn.acked { background:color-mix(in srgb,var(--green) 10%,transparent); border-color:color-mix(in srgb,var(--green) 30%,transparent); color:var(--green); cursor:default; }
.alert-art73-tag { font-size:7px; font-weight:700; padding:1px 5px; border-radius:3px; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); }
.nav-alert-badge { margin-left:auto; font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px; background:color-mix(in srgb,var(--red) 15%,transparent); color:var(--red); }
.alerts-refresh-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:10px; color:var(--text-3); }
.alerts-refresh-btn { padding:3px 10px; border-radius:5px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:9px; font-weight:600; cursor:pointer; transition:all 100ms; display:flex; align-items:center; gap:4px; }
.alerts-refresh-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ════════════════════════════════════════════════════════════════════════
   BUILD 3: COMPLIANCE GAP TRACKER
════════════════════════════════════════════════════════════════════════ */
.gap-section { margin-bottom:28px; }
.gap-section-head { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px; display:flex; align-items:center; gap:8px; }

/* Score progression */
.score-prog-card { border:1px solid var(--border); border-radius:10px; background:var(--bg); padding:14px 16px; margin-bottom:10px; }
.score-prog-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.score-prog-framework { font-size:12px; font-weight:700; }
.score-prog-numbers { display:flex; align-items:center; gap:10px; }
.score-prog-current { font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.score-prog-target { font-size:11px; color:var(--text-3); }
.score-prog-delta { font-size:10px; font-weight:700; padding:2px 8px; border-radius:5px; }
.score-prog-delta.needs { background:color-mix(in srgb,var(--amber) 12%,transparent); color:var(--amber); }
.score-prog-delta.close { background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); }
.score-prog-bar-wrap { margin-bottom:8px; }
.score-prog-bar { height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; position:relative; }
.score-prog-bar-fill { height:100%; border-radius:4px; transition:width 600ms ease; }
.score-prog-bar-target-line { position:absolute; top:-2px; bottom:-2px; width:2px; border-radius:1px; background:var(--text-3); opacity:.5; }
.score-prog-bar-labels { display:flex; justify-content:space-between; font-size:9px; color:var(--text-3); margin-top:3px; }
.score-prog-detail { font-size:10px; color:var(--text-2); line-height:1.5; margin-top:6px; }
.score-prog-milestone { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--text-3); margin-top:5px; }
.score-prog-milestone strong { color:var(--accent); }

/* Priority controls */
.priority-ctrl-row { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); margin-bottom:7px; transition:border-color 120ms; }
.priority-ctrl-row:hover { border-color:var(--border-hover); }
.priority-ctrl-rank { width:22px; height:22px; border-radius:50%; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.priority-ctrl-body { flex:1; min-width:0; }
.priority-ctrl-id { font-size:9px; font-weight:700; font-family:'SF Mono','Menlo',monospace; color:var(--text-3); }
.priority-ctrl-title { font-size:11px; font-weight:600; line-height:1.35; margin-bottom:3px; }
.priority-ctrl-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:9px; color:var(--text-3); }
.priority-ctrl-framework { padding:1px 5px; border-radius:3px; background:var(--surface-2); color:var(--text-3); font-size:8px; font-weight:700; }
.priority-ctrl-effort { color:var(--amber); }
.priority-ctrl-implement-btn { padding:4px 11px; border-radius:5px; border:1px solid var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); color:var(--accent); font-size:9px; font-weight:700; cursor:pointer; transition:all 100ms; flex-shrink:0; white-space:nowrap; }
.priority-ctrl-implement-btn:hover { background:var(--accent); color:var(--accent-fg); }
.priority-ctrl-implement-btn.done { border-color:var(--green); background:color-mix(in srgb,var(--green) 10%,transparent); color:var(--green); cursor:default; }

/* NIST function breakdown bars */
.nist-fn-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.nist-fn-label { font-size:11px; font-weight:600; min-width:80px; color:var(--text-2); }
.nist-fn-bar-wrap { flex:1; }
.nist-fn-bar { height:12px; border-radius:6px; background:var(--surface-2); overflow:hidden; }
.nist-fn-fill { height:100%; border-radius:6px; transition:width 700ms ease; }
.nist-fn-pct { font-size:11px; font-weight:700; min-width:38px; text-align:right; }
.nist-fn-tag { font-size:8px; font-weight:700; padding:2px 6px; border-radius:3px; flex-shrink:0; white-space:nowrap; }
.nist-fn-tag.strong { background:color-mix(in srgb,var(--green) 12%,transparent); color:var(--green); }
.nist-fn-tag.medium { background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); }
.nist-fn-tag.gap { background:color-mix(in srgb,var(--amber) 12%,transparent); color:var(--amber); }
.nist-fn-tag.critical { background:color-mix(in srgb,var(--red) 12%,transparent); color:var(--red); }

/* Target roadmap timeline */
.roadmap-timeline { position:relative; padding-left:28px; }
.roadmap-timeline::before { content:''; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:var(--border); border-radius:1px; }
.roadmap-item { position:relative; margin-bottom:18px; }
.roadmap-item:last-child { margin-bottom:0; }
.roadmap-dot { position:absolute; left:-22px; top:3px; width:14px; height:14px; border-radius:50%; border:2px solid var(--border); background:var(--bg); display:flex; align-items:center; justify-content:center; }
.roadmap-dot.done { border-color:var(--green); background:var(--green); }
.roadmap-dot.current { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.roadmap-dot.future { border-color:var(--border-hover); }
.roadmap-quarter { font-size:9px; font-weight:800; color:var(--text-3); letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px; }
.roadmap-targets { display:flex; flex-wrap:wrap; gap:5px; }
.roadmap-target { font-size:10px; font-weight:600; padding:3px 9px; border-radius:5px; background:var(--surface); border:1px solid var(--border); color:var(--text-2); }
.roadmap-target.achieved { background:color-mix(in srgb,var(--green) 8%,transparent); border-color:color-mix(in srgb,var(--green) 25%,transparent); color:var(--green); }
.roadmap-target.active { background:color-mix(in srgb,var(--accent) 8%,transparent); border-color:color-mix(in srgb,var(--accent) 25%,transparent); color:var(--accent); }
.roadmap-desc { font-size:10px; color:var(--text-3); margin-top:5px; line-height:1.4; }

/* ════════════════════════════════════════════════════════════════════════
   VIEW: PEOPLE — Team directory (operator-only)
════════════════════════════════════════════════════════════════════════ */
#view-people{overflow-y:auto}
#people-content{padding:18px 20px 40px;max-width:900px;margin:0 auto}
.people-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.people-head-title{font-size:18px;font-weight:700;letter-spacing:-.02em}
.people-head-sub{font-size:11px;color:var(--text-3);margin-top:2px}
.people-invite-btn{padding:6px 14px;border-radius:7px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;transition:opacity 120ms}
.people-invite-btn:hover{opacity:.85}
.people-table{width:100%;border-collapse:collapse}
.people-thead th{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);padding:5px 12px;text-align:left;border-bottom:1px solid var(--border)}
.people-tr{border-bottom:1px solid var(--border)}
.people-tr:last-child{border-bottom:none}
.people-tr:hover{background:var(--surface)}
.people-td{padding:10px 12px;font-size:11px;vertical-align:middle}
.people-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.people-name{font-size:11px;font-weight:600;color:var(--text)}
.people-email{font-size:10px;color:var(--text-3);margin-top:1px;font-family:'SF Mono','Menlo',monospace}
.people-status-active{color:var(--green);font-weight:600;font-size:11px}
.people-status-invited{color:var(--amber);font-weight:600;font-size:11px}
.people-status-disabled{color:var(--text-3);font-size:11px}
.people-group-badge{font-size:9px;padding:2px 6px;border-radius:4px;background:var(--surface-2);color:var(--text-3);margin-right:3px;white-space:nowrap}
.people-role-operator{color:var(--accent);font-weight:600;font-size:11px}
.people-role-team{color:var(--text-2);font-size:11px}
.people-role-tenantop{color:var(--accent);font-weight:600;font-size:11px}
.people-resend-btn{font-size:9px;padding:3px 8px;border-radius:5px;border:1px solid var(--border);background:var(--bg);color:var(--text-3);cursor:pointer;transition:all 100ms;white-space:nowrap}
.people-resend-btn:hover{border-color:var(--accent);color:var(--accent)}
.people-resend-btn:disabled{opacity:.4;cursor:default}
.people-table-wrap{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg)}
.people-stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.people-stat{padding:12px 16px;border:1px solid var(--border);border-radius:9px;background:var(--bg);text-align:center;min-width:80px}
.people-stat-n{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--text)}
.people-stat-l{font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.people-stat.s-total .people-stat-n{color:var(--accent)}
.people-stat.s-active .people-stat-n{color:var(--green)}
.people-stat.s-invited .people-stat-n{color:var(--amber)}