/* ============================================================
   WOMARKT OS — Unified Design System
   Based on: womarkt-os-ide.html (Dark IDE Theme)
   ============================================================ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:13px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-ui);color:var(--text);background:var(--bg);line-height:1.5;overflow:hidden}
a{color:var(--blue);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ── Design Tokens (HUD ADMIN) ── */
:root{
  --bg:#000000;
  --surface:#0a0a0a;
  --card:rgba(10,10,10,.85);
  --text:#e8eaed;
  --text2:#8b929a;
  --text3:#525860;
  --blue:#00acac;
  --accent:#00acac;
  --accent-bright:#00d4aa;
  --green:#4ade80;
  --yellow:#fbbf24;
  --red:#f87171;
  --purple:#00b8a9;
  --cyan:#22d3ee;
  --border:rgba(0,172,172,.12);
  --font-ui:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a2d40;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#3a3d50}
*{scrollbar-width:thin;scrollbar-color:#2a2d40 transparent}

/* ============================================================
   APP SHELL LAYOUT
   ============================================================ */
.app-shell{
  display:flex;flex-direction:column;height:100vh;
  background:var(--bg);color:var(--text);
}
.app-shell > .main-row{
  display:flex;flex:1;overflow:hidden;
}

/* ── Activity Bar (44px left icon strip) ── */
.activity-bar{
  width:44px;min-width:44px;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;
  padding-top:8px;gap:2px;
  flex-shrink:0;z-index:20;
}
.ab-icon{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;border-radius:6px;
  color:var(--text2);cursor:pointer;
  position:relative;transition:background .15s,color .15s;
  text-decoration:none;
}
.ab-icon:hover{background:#1e2030;color:var(--text)}
.ab-icon.active{color:var(--blue)}
.ab-icon.active::after{
  content:'';position:absolute;left:0;top:6px;bottom:6px;
  width:2px;background:var(--blue);border-radius:0 2px 2px 0;
}
.ab-sep{width:20px;height:1px;background:var(--border);margin:4px 0}

/* ── Sidebar (210px nav) ── */
.sidebar{
  width:210px;min-width:210px;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:scroll;overflow-x:hidden;
  flex:1 1 0;min-height:0;flex-shrink:0;z-index:15;
  scrollbar-gutter:stable;
}
.sidebar::-webkit-scrollbar{width:6px;background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
.sidebar::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
.sidebar-brand{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.brand-mark{
  width:28px;height:28px;border-radius:6px;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;flex-shrink:0;
}
.brand-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.2}
.brand-sub{font-size:9px;color:var(--text2);letter-spacing:.3px}

.nav-section{padding:8px 0}
.nav-label{
  font-size:10px;font-weight:600;color:var(--text3);
  text-transform:uppercase;letter-spacing:.5px;
  padding:4px 14px 4px;margin-bottom:2px;
}
.nav-label--nested{margin-top:8px}
.nav-label--toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  border:none;background:none;cursor:pointer;text-align:left;
}
.nav-label--toggle:hover{color:var(--text2)}
.nav-group-chevron{font-size:8px;opacity:.7}
.nav-section--pinned{border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:4px}
.nav-item-row{
  display:flex;align-items:center;gap:2px;padding:0 4px 0 2px;
}
.nav-item-row .nav-item{flex:1;min-width:0}
.nav-item-content{flex:1;min-width:0}
.nav-drag-handle{
  font-size:9px;color:var(--text3);cursor:grab;padding:0 4px;
  user-select:none;letter-spacing:-1px;line-height:1;
}
.nav-drag-handle:active{cursor:grabbing}
.nav-pin-btn{
  width:22px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:var(--text3);border-radius:4px;
  opacity:0;transition:opacity .15s,color .15s,background .15s;
}
.nav-item-row:hover .nav-pin-btn{opacity:1}
.nav-pin-btn:hover{background:rgba(0,172,172,.1);color:var(--yellow)}
.nav-pin-btn--active{opacity:1;color:var(--yellow)}

.nav-item{
  display:flex;align-items:center;gap:6px;
  padding:5px 14px;font-size:11px;font-weight:500;
  color:var(--text2);cursor:pointer;
  border-left:2px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
  text-decoration:none;width:100%;
}
.nav-item:hover{background:rgba(0,172,172,.06);color:var(--text)}
.nav-item.active,.nav-item.nav-item--active{
  background:rgba(0,172,172,.1);color:var(--accent-bright,#00d4aa);
  border-left-color:var(--accent-bright,#00d4aa);
}
.nav-item .nav-icon{font-size:12px;min-width:16px;text-align:center}
.nav-button{border:none;background:none;font-family:inherit}

.nav-item--alpha{position:relative}
.nav-item--alpha::after{
  content:'α';position:absolute;right:10px;
  font-size:9px;font-weight:700;color:var(--accent-bright,#00d4aa);
  background:rgba(0,172,172,.15);padding:1px 5px;border-radius:0;
}

.badge{
  font-size:9px;font-weight:700;
  background:var(--red);color:#fff;
  padding:1px 5px;border-radius:8px;margin-left:auto;
}

.sidebar-footer{
  margin-top:auto;padding:10px 12px;
  border-top:1px solid var(--border);
}
.user-chip{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--text2);
}
.user-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
}

/* Mobile sidebar */
.sidebar-toggle-input{display:none}
.mobile-menu-toggle{display:none}
.sidebar-backdrop{display:none}

/* ── Header / Topbar ── */
.topbar{
  min-height:42px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;gap:16px;
  flex-shrink:0;z-index:30;
}
.topbar-leading{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.topbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

.page-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.2;white-space:nowrap}
.page-subtitle{font-size:10px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:500px}

.module-context-badge{
  font-size:9px;font-weight:600;
  background:rgba(91,138,245,.12);color:var(--blue);
  padding:2px 8px;border-radius:10px;
  margin-left:8px;vertical-align:middle;
  white-space:nowrap;
}

.sector-selector{display:flex;align-items:center;position:relative;overflow:visible;z-index:120}
.sector-select,.lang-select{
  background:var(--card);border:1px solid var(--border);
  color:var(--text);font-size:11px;padding:4px 10px;
  border-radius:6px;cursor:pointer;
}
.sector-select:focus,.lang-select:focus{border-color:var(--blue);outline:none}

/* Shell mode / Theme toggle (disabled — dark-only) */
.shell-mode-toggle{display:none}
.shell-mode-btn{display:none}

/* Ghost buttons */
.btn{font-size:11px;font-weight:600;padding:4px 8px;border-radius:4px;transition:background .15s,color .15s}
.btn-ghost{color:var(--text2);background:transparent}
.btn-ghost:hover{background:rgba(91,138,245,.1);color:var(--text)}
.btn-ghost.active{background:rgba(91,138,245,.15);color:var(--blue)}

/* Notification */
.notif-wrap{position:relative}
.notif-bell{font-size:14px;position:relative;padding:4px 6px}
.notif-badge{
  position:absolute;top:0;right:0;
  font-size:8px;font-weight:700;
  background:var(--red);color:#fff;
  min-width:14px;height:14px;padding:0 3px;
  border-radius:7px;display:flex;align-items:center;justify-content:center;
}
.notif-panel{
  position:absolute;top:100%;right:0;
  width:300px;max-height:360px;overflow-y:auto;
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  padding:6px 0;z-index:100;
}
.notif-empty{padding:20px;text-align:center;color:var(--text3);font-size:11px}
.notif-mark-all{
  display:block;width:100%;padding:6px 12px;
  font-size:10px;color:var(--blue);text-align:right;
  border-bottom:1px solid var(--border);
}
.notif-item{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 12px;width:100%;text-align:left;
  border-bottom:1px solid var(--border);
  transition:background .15s;
}
.notif-item:hover{background:rgba(91,138,245,.06)}
.notif-item.unread{background:rgba(91,138,245,.04)}
.notif-item strong{font-size:11px;color:var(--text)}
.notif-item span{font-size:10px;color:var(--text2)}
.notif-item small{font-size:9px;color:var(--text3)}

/* ── Main Panel ── */
.main-panel{
  flex:1;display:flex;flex-direction:column;
  min-width:0;overflow:hidden;
}

/* ── Right Panel ── */
.right-panel{
  width:340px;min-width:340px;
  background:#0a0b10;
  border-left:none;
  display:flex;flex-direction:column;
  position:relative;
  transition:width .25s ease,min-width .25s ease;
  overflow:hidden;flex-shrink:0;
}

.rp-header{
  display:flex;border-bottom:1px solid var(--border);
  padding-left:8px;flex-shrink:0;background:#0d0e15;
}
.rp-tab{
  flex:1;padding:8px 6px;
  background:none;border:none;
  border-bottom:2px solid transparent;
  color:var(--text2);font-size:11px;font-weight:600;
  cursor:pointer;transition:color .2s,border-color .2s;
  white-space:nowrap;
}
.rp-tab:hover{color:var(--text)}
.rp-tab--active{color:var(--cyan);border-bottom-color:var(--cyan)}

.rp-body{
  flex:1;overflow:hidden;display:flex;flex-direction:column;
  padding-left:28px;
}

/* Live Feed */
.rp-feed{
  flex:1;overflow-y:auto;padding:6px 8px;
  display:flex;flex-direction:column;gap:2px;
}
.feed-line{
  font-family:var(--font-mono);font-size:10.5px;line-height:1.55;
  padding:2px 4px;border-radius:3px;
  display:flex;gap:6px;transition:background .15s;
}
.feed-line:hover{background:rgba(91,138,245,.04)}
.feed-ts{color:var(--text3);flex-shrink:0;font-size:9.5px;min-width:52px}
.feed-msg{word-break:break-word}
.msg-green .feed-msg{color:var(--green)}
.msg-cyan .feed-msg{color:var(--cyan)}
.msg-yellow .feed-msg{color:var(--yellow)}
.msg-red .feed-msg{color:var(--red)}
.msg-blue .feed-msg{color:var(--blue)}

/* Query Logs */
.rp-logs{
  flex:1;overflow-y:auto;padding:8px;
  display:flex;flex-direction:column;gap:8px;
}
.log-entry{
  background:rgba(34,211,238,.03);
  border-left:2px solid var(--cyan);
  border-radius:4px;padding:6px 10px;
}
.log-query{font-size:11px;color:var(--text);font-weight:600;margin-bottom:6px}
.log-sources{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.log-src{
  font-size:9.5px;font-family:var(--font-mono);
  background:rgba(34,211,238,.1);color:rgba(34,211,238,.85);
  padding:2px 6px;border-radius:3px;
}
.log-src strong{color:var(--cyan);margin-left:3px}
.log-time{font-size:9px;color:var(--text3)}

/* ── Status Bar ── */
.status-bar{
  height:24px;
  background:#12141e;
  border-top:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 12px;
  font-size:10.5px;color:rgba(255,255,255,.85);
  font-weight:500;user-select:none;
  flex-shrink:0;z-index:50;
}
.sb-item{
  padding:0 8px;white-space:nowrap;
  transition:color .2s,text-shadow .2s;cursor:default;
}
.sb-item:hover{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.4)}
.sb-connection{font-family:var(--font-mono);font-weight:650}
.sb-connection--available{color:var(--green)}
.sb-connection--empty{color:#f4b860}
.sb-connection--error{color:var(--red)}
.sb-connection--loading{color:var(--text3)}
.sb-sep{color:rgba(255,255,255,.15);font-size:9px;padding:0 2px}
.sb-spacer{flex:1}
.sb-fx{color:var(--green)}
.sb-fx:hover{color:var(--green);text-shadow:0 0 8px rgba(74,222,128,.4)}
.sb-version{color:rgba(255,255,255,.4);font-size:9.5px;letter-spacing:.5px}
.sb-version:hover{color:rgba(255,255,255,.7);text-shadow:none}

/* ============================================================
   CONTENT AREA
   ============================================================ */

/* Terminal Layout wraps Body + AgentPanel + ChatBar */
.terminal-layout{
  display:flex;flex:1;overflow:hidden;
}
.terminal-main{
  flex:1;display:flex;flex-direction:column;
  min-width:0;overflow:hidden;
}
.main-scroll{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:12px;
}

/* ── Grid System ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
.g23{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.g32{display:grid;grid-template-columns:1fr 2fr;gap:12px}
.g-full{display:grid;grid-template-columns:1fr;gap:12px}

/* Legacy grid class support */
.kpi-grid,.metrics-row{display:flex;gap:12px;flex-wrap:wrap}
.dashboard-grid,.ceo-intel-grid,.recon-grid,.finding-grid,.portfolio-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ── Cards (.cd) ── */
.cd,.hud-card,.card,.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;padding:14px;
}
.cd-title,.hud-card-title,.card-title{
  font-size:11px;font-weight:600;color:var(--text2);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:8px;
}
.cd-value,.hud-card-value,.card-value{
  font-size:28px;font-weight:700;
  font-family:var(--font-mono);color:var(--text);
  line-height:1.1;
}
.cd-sub,.hud-card-sub,.card-sub{
  font-size:11px;color:var(--text2);margin-top:4px;
}
.up{color:var(--green)}
.down{color:var(--red)}

/* HUD corner brackets — see hud-theme.css */

/* ── Metrics (.metric) ── */
.metric,.kpi-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;padding:12px 16px;
  flex:1;min-width:140px;
}
.metric-label,.kpi-label{
  font-size:10px;font-weight:600;color:var(--text2);
  text-transform:uppercase;letter-spacing:.5px;
}
.metric-value,.kpi-value{
  font-size:22px;font-weight:700;
  font-family:var(--font-mono);color:var(--text);
  margin-top:2px;
}
.metric-sub,.kpi-sub{font-size:10px;color:var(--text2);margin-top:2px}

/* MetricHero */
.metric-hero{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:16px;text-align:center;
}
.metric-hero .hero-value{
  font-size:32px;font-weight:700;
  font-family:var(--font-mono);color:var(--text);
}
.metric-hero .hero-label{
  font-size:10px;color:var(--text2);
  text-transform:uppercase;letter-spacing:.5px;margin-top:4px;
}

/* ── Tables (.dt) ── */
.dt,table.data-table{width:100%;border-collapse:collapse;font-size:12px}
.dt thead th,table.data-table thead th{
  background:var(--surface);
  padding:8px 10px;font-size:10px;font-weight:600;
  color:var(--text2);text-transform:uppercase;letter-spacing:.5px;
  text-align:left;position:sticky;top:0;z-index:1;
  border-bottom:1px solid var(--border);
}
.dt tbody td,table.data-table tbody td{
  padding:7px 10px;
  border-bottom:1px solid var(--border);
  color:var(--text);white-space:nowrap;
}
.dt tbody tr:hover,table.data-table tbody tr:hover{
  background:rgba(91,138,245,.04);
}
.num{text-align:right;font-family:var(--font-mono)}

/* ── Tags / Badges ── */
.tag,.status-badge{
  display:inline-block;padding:1px 6px;
  border-radius:3px;font-size:10px;font-weight:600;
}
.tag-green{background:rgba(74,222,128,.15);color:var(--green)}
.tag-red{background:rgba(248,113,113,.15);color:var(--red)}
.tag-blue{background:rgba(91,138,245,.15);color:var(--blue)}
.tag-yellow{background:rgba(251,191,36,.15);color:var(--yellow)}
.tag-purple{background:rgba(167,139,250,.15);color:var(--purple)}
.tag-cyan{background:rgba(34,211,238,.15);color:var(--cyan)}

/* Pill variant */
.pill{border-radius:10px;padding:2px 8px}

/* ── Buttons ── */
.btn-primary{
  background:var(--blue);color:#fff;
  padding:6px 14px;border-radius:6px;
  font-size:12px;font-weight:600;
  transition:opacity .2s,transform .2s;
}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}

.btn-send{
  padding:8px 16px;
  background:linear-gradient(135deg,var(--accent),#008f8f);
  color:#fff;border-radius:6px;
  font-size:12px;font-weight:600;
  transition:opacity .2s,transform .2s;
}
.btn-send:hover{opacity:.9;transform:translateY(-1px)}

.btn-outline{
  padding:5px 12px;font-size:11px;border-radius:4px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text2);transition:all .15s;
}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);background:rgba(91,138,245,.1)}

.btn-success{
  padding:3px 10px;font-size:10px;font-weight:600;border-radius:4px;
  background:rgba(74,222,128,.15);color:var(--green);
  border:1px solid rgba(74,222,128,.3);
}
.btn-success:hover{background:rgba(74,222,128,.25)}

.hint-btn{
  font-size:10px;padding:4px 8px;border-radius:4px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text2);transition:all .15s;
}
.hint-btn:hover{border-color:var(--blue);color:var(--blue)}

/* Role switch (styled in topbar) */
.role-switch-btn{
  padding:3px 10px;font-size:11px;font-weight:600;
  border:1px solid var(--border);border-radius:4px;
  color:var(--text2);transition:all .15s;
}
.role-switch-btn:hover:not(.active){background:#1e2030}
.role-switch-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ── Inputs ── */
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="search"],textarea,.form-input{
  background:var(--card);border:1px solid var(--border);
  border-radius:6px;padding:8px 12px;font-size:12px;
  color:var(--text);width:100%;transition:border-color .2s;
}
input:focus,textarea:focus,.form-input:focus{
  border-color:var(--blue);outline:none;
}
input::placeholder,textarea::placeholder{color:var(--text3)}

/* ── Progress Bars ── */
.bar-h,.progress-bar{
  height:6px;border-radius:3px;
  background:var(--border);overflow:hidden;margin-top:4px;
}
.bar-h .fill,.progress-bar .fill,.bar-fill{
  height:100%;border-radius:3px;transition:width .4s;
}

/* ── Charts ── */
.cc,.chart-container{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:14px;position:relative;
}
.cc-title,.chart-title{
  font-size:11px;font-weight:600;color:var(--text2);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:8px;
}

/* ── Chat Messages ── */
.chat-msg{
  padding:10px 14px;border-radius:8px;
  font-size:12px;line-height:1.6;
  max-width:85%;white-space:pre-wrap;
}
.chat-msg.system{
  background:rgba(167,139,250,.1);
  border:1px solid rgba(167,139,250,.2);
  color:#c4b5fd;align-self:flex-start;
}
.chat-msg.user{
  background:rgba(91,138,245,.15);
  border:1px solid rgba(91,138,245,.25);
  color:#93b4f7;align-self:flex-end;
}
.chat-msg.ai{
  background:rgba(30,32,48,.9);
  border:1px solid rgba(167,139,250,.12);
  color:#e2e8f0;align-self:flex-start;
}

/* ── AI Response Panel ── */
.ai-response-panel{
  background:#1a1530;
  border-top:2px solid rgba(167,139,250,.3);
  max-height:65vh;overflow-y:auto;
}
.ai-response-header{
  background:rgba(167,139,250,.1);
  border-bottom:1px solid rgba(167,139,250,.15);
  padding:6px 14px;display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;color:var(--purple);
}
.ai-response-body{padding:10px 14px;font-size:12px;line-height:1.6;color:#e2e8f0}

/* ── Chat Bar (Bottom input) ── */
.chat-bar{
  border-top:1px solid var(--border);
  background:var(--surface);padding:8px 14px;
  flex-shrink:0;
}
.chat-bar-hints{
  display:flex;gap:4px;padding:6px 14px;
  flex-wrap:wrap;
}
.chat-bar-input{
  display:flex;align-items:center;gap:8px;
}
.chat-bar-input input{
  flex:1;background:var(--card);
  border:1px solid var(--border);border-radius:6px;
  padding:8px 12px;font-size:12px;color:var(--text);
}
.chat-bar-input input:focus{border-color:var(--blue);outline:none}

/* ── Agent Panel (side) ── */
.agent-panel{
  width:360px;min-width:360px;
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;flex-shrink:0;
}
.main-panel--with-agent .terminal-main{
  /* when agent panel is open, terminal adjusts naturally via flex */
}

/* ── Intent Chip Bar ── */
.intent-chip-bar{
  display:flex;gap:4px;padding:4px 14px;
  border-top:1px solid var(--border);
  background:var(--surface);flex-wrap:wrap;flex-shrink:0;
}
.intent-chip{
  font-size:10px;padding:3px 8px;border-radius:4px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;transition:all .15s;
}
.intent-chip:hover{border-color:var(--blue);color:var(--blue)}

/* ── Drill-Down Overlay ── */
.drill-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
}
.drill-content{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;width:90%;max-width:900px;
  max-height:85vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.drill-header{
  padding:16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.drill-header h3{font-size:14px;font-weight:700;color:var(--text)}
.drill-body{padding:16px}
.drill-stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:12px 16px;
}
.drill-stat .stat-value{
  font-size:20px;font-weight:700;font-family:var(--font-mono);color:var(--text);
}
.drill-stat .stat-label{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}

/* ── Trace Drawer ── */
.trace-drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;
}
.trace-drawer{
  position:fixed;right:0;top:0;bottom:0;width:480px;
  background:var(--surface);border-left:1px solid var(--border);
  z-index:301;display:flex;flex-direction:column;
  box-shadow:-4px 0 20px rgba(0,0,0,.4);
}
.trace-drawer-header{
  padding:12px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
}

/* ── Role Switcher Overlay ── */
.role-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
}
.role-panel{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:20px;width:360px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

/* ── Alert Boxes ── */
.alert-box{
  padding:12px;border-radius:8px;font-size:12px;
}
.alert-warning{
  background:rgba(251,191,36,.05);
  border:1px solid rgba(251,191,36,.3);
  color:var(--yellow);
}
.alert-danger{
  background:rgba(248,113,113,.05);
  border:1px solid rgba(248,113,113,.3);
  color:var(--red);
}
.alert-info{
  background:rgba(91,138,245,.05);
  border:1px solid rgba(91,138,245,.3);
  color:var(--blue);
}
.alert-ai{
  padding:12px;
  background:rgba(167,139,250,.1);
  border:1px solid rgba(167,139,250,.2);
  border-radius:12px;
}

/* ── Auth Layout (Login) ── */
.auth-layout{
  display:flex;align-items:center;justify-content:center;
  height:100vh;background:var(--bg);
}
.auth-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:32px;width:100%;max-width:380px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.auth-card h2{font-size:18px;font-weight:700;color:var(--text);margin-bottom:16px;text-align:center}

/* ── Blazor Error UI ── */
#blazor-error-ui{
  display:none;position:fixed;bottom:0;left:0;right:0;
  padding:12px 20px;background:rgba(10,10,10,0.95);
  border-top:1px solid rgba(0,172,172,0.35);
  color:#e8eaed;font-size:13px;z-index:99999;text-align:center;
  backdrop-filter:blur(8px);
}
#blazor-error-ui .reload{color:#00d4aa;text-decoration:underline;margin-left:8px}
#blazor-error-ui .dismiss{cursor:pointer;margin-left:16px;color:rgba(232,234,237,0.55)}

/* Blazor circuit reconnect — visible HUD banner during deploy / network blips */
#components-reconnect-modal{
  display:none;position:fixed;inset:0;z-index:10050;
  align-items:center;justify-content:center;
  background:rgba(8,10,16,.72);backdrop-filter:blur(6px);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected{
  display:flex;
}
#components-reconnect-modal h5{
  margin:0 0 8px;font-size:15px;font-weight:700;color:var(--text);
}
#components-reconnect-modal p{
  margin:0 0 14px;font-size:13px;color:var(--text2);line-height:1.45;
}
#components-reconnect-modal .reconnect-modal-content,
#components-reconnect-modal > div{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:20px 24px;max-width:360px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);text-align:center;
}
#components-reconnect-modal button{
  margin:4px;padding:8px 16px;border-radius:8px;border:1px solid var(--border);
  background:rgba(91,138,245,.15);color:var(--cyan);font-size:13px;font-weight:600;
  cursor:pointer;
}
#components-reconnect-modal button:hover{background:rgba(91,138,245,.28)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1200px){
  .sentra-seam-toggle{display:none}
}
@media(max-width:960px){
  .g2,.g3,.g4,.g23,.g32{grid-template-columns:1fr}
}
@media(max-width:560px){
  .activity-bar{width:36px;min-width:36px}
  .ab-icon{width:28px;height:28px;font-size:14px}
  .topbar{padding:0 8px;gap:6px}
  .main-scroll{padding:10px}
}

/* ============================================================
   MAIN CHAT BAR (Bottom Input)
   ============================================================ */
.mcb-container{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 16px 12px;
  background:rgba(15,17,23,.95);
  border-top:1px solid var(--border);
  backdrop-filter:blur(12px);
  flex-shrink:0;
}
.mcb-hints{
  display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;
}
.mcb-hints::-webkit-scrollbar{display:none}
.mcb-hints .hint-btn{
  flex-shrink:0;padding:5px 12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;color:var(--text2);
  font-size:11px;font-weight:500;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.mcb-hints .hint-btn:hover{
  background:rgba(91,138,245,.12);
  border-color:rgba(91,138,245,.3);
  color:var(--blue);transform:translateY(-1px);
}
.mcb-input-row{display:flex;gap:8px;align-items:center}
.mcb-input{
  flex:1;height:40px;padding:0 14px;
  background:var(--card);border:1px solid var(--border);
  border-radius:10px;color:var(--text);
  font-size:13px;font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.mcb-input::placeholder{color:var(--text3)}
.mcb-input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(91,138,245,.1)}
.mcb-send-btn{
  height:40px;padding:0 20px;
  background:linear-gradient(135deg,var(--accent),#008f8f);
  border:none;border-radius:10px;color:#fff;
  font-size:13px;font-weight:600;
  cursor:pointer;transition:opacity .2s,transform .15s;
  white-space:nowrap;flex-shrink:0;
}
.mcb-send-btn:hover:not(:disabled){opacity:.92;transform:translateY(-1px)}
.mcb-send-btn:disabled{opacity:.4;cursor:not-allowed}

/* ============================================================
   AGENT PANEL (SENTRA_CMD Side Panel)
   ============================================================ */
.agent-panel{
  width:360px;min-width:360px;
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;flex-shrink:0;
}
.agent-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--border);
  background:var(--card);flex-shrink:0;
}
.agent-panel-title{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;
  font-family:var(--font-mono);color:var(--cyan);
}
.agent-panel-icon{color:var(--cyan);font-size:13px}
.agent-panel-live{
  display:flex;align-items:center;gap:4px;
  font-size:9px;font-weight:600;color:var(--green);
  text-transform:uppercase;letter-spacing:.5px;
}
.agent-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
}

.agent-panel-section{
  padding:8px 12px;border-bottom:1px solid var(--border);
}
.agent-section-label{
  font-size:10px;font-weight:600;color:var(--text2);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:6px;
}
.agent-suggestion-list{display:flex;flex-direction:column;gap:3px}
.agent-suggestion-btn{
  display:block;width:100%;text-align:left;
  padding:4px 8px;font-size:11px;color:var(--text2);
  background:transparent;border:1px solid transparent;
  border-radius:4px;transition:all .15s;cursor:pointer;
}
.agent-suggestion-btn:hover{
  background:rgba(91,138,245,.08);border-color:var(--border);
  color:var(--text);
}

.agent-panel-log-strip{
  flex:1;display:flex;flex-direction:column;
  overflow:hidden;border-bottom:1px solid var(--border);
}
.agent-panel-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--border);
  padding:0 8px;flex-shrink:0;overflow-x:auto;
}
.agent-tab{
  padding:5px 8px;font-size:9.5px;font-weight:600;
  font-family:var(--font-mono);color:var(--text3);
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.agent-tab:hover{color:var(--text2)}
.agent-tab.active{color:var(--cyan);border-bottom-color:var(--cyan)}

.agent-log-feed{
  flex:1;overflow-y:auto;padding:6px 8px;
  font-family:var(--font-mono);font-size:10px;
}
.agent-log-line{
  display:flex;gap:6px;padding:2px 0;
  line-height:1.5;
}
.agent-log-ts{color:var(--text3);flex-shrink:0;min-width:52px}
.agent-log-level{font-weight:600;flex-shrink:0}
.agent-log-level--info{color:var(--blue)}
.agent-log-level--warn{color:var(--yellow)}
.agent-log-level--error{color:var(--red)}
.agent-log-level--debug{color:var(--text3)}
.agent-log-msg{color:var(--text2);word-break:break-word}
.agent-empty{color:var(--text3);font-size:11px;padding:8px 0}

.agent-action-list{display:flex;flex-direction:column;gap:4px}
.agent-action-item{
  display:flex;flex-direction:column;gap:1px;
  padding:4px 0;border-bottom:1px solid var(--border);
  font-size:10px;
}
.agent-action-item strong{color:var(--text);font-size:11px}
.agent-action-item span{color:var(--text2)}
.agent-action-item small{color:var(--text3);font-size:9px}

/* ============================================================
   SENTRA INSPECTOR & CHAT PANEL
   ============================================================ */
.sentra-inspector{
  padding:8px 12px;border-bottom:1px solid var(--border);
  max-height:200px;overflow-y:auto;
}
.sentra-inspector-title{
  font-size:10px;font-weight:700;color:var(--purple);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:4px;
}
.sentra-inspector-empty{font-size:11px;color:var(--text3)}
.sentra-inspector-section{margin-bottom:8px}
.sentra-inspector-label{
  font-size:9px;font-weight:600;color:var(--text3);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:2px;
}
.sentra-inspector-value{font-size:11px;color:var(--text);line-height:1.5}
.sentra-inspector-badge{
  display:inline-block;padding:1px 6px;border-radius:3px;
  font-size:9px;font-weight:600;
}

.sentra-chat{
  display:flex;flex-direction:column;
  border-bottom:1px solid var(--border);
  max-height:250px;
}
.sentra-chat-header{
  padding:6px 12px;border-bottom:1px solid var(--border);
  font-size:10px;font-weight:600;color:var(--purple);
  text-transform:uppercase;letter-spacing:.5px;
  flex-shrink:0;
}
.sentra-chat-messages{
  flex:1;overflow-y:auto;padding:8px 12px;
  display:flex;flex-direction:column;gap:6px;
}
.sentra-chat-input-row{
  display:flex;gap:6px;padding:6px 12px;
  border-top:1px solid var(--border);flex-shrink:0;
}
.sentra-chat-input{
  flex:1;padding:6px 10px;font-size:11px;
  background:var(--card);border:1px solid var(--border);
  border-radius:6px;color:var(--text);
}
.sentra-chat-input:focus{border-color:var(--blue);outline:none}
.sentra-chat-send{
  padding:6px 12px;font-size:10px;font-weight:600;
  background:linear-gradient(135deg,var(--accent),#008f8f);
  color:#fff;border-radius:6px;
}

/* ── Topbar Overflow Fixes ── */
.topbar-leading{min-width:0;overflow:visible}
.topbar-actions{flex-shrink:0}
.page-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:400px}
.lang-selector{flex-shrink:0}

/* ============================================================
   MISC COMPONENT FIXES
   ============================================================ */

/* Topbar AI link */
.topbar-ai-link{font-family:var(--font-mono);font-size:10px;font-weight:700}

/* DataAlpha scoped page overrides */
.data-alpha-page .cd{min-height:auto}

/* ============================================================
   DASHBOARD & PAGE CONTENT STYLES
   ============================================================ */

/* ── Dashboard Hero ── */
.dashboard-hero{
  display:flex;gap:12px;margin-bottom:8px;
}
.dashboard-hero .metric-hero{flex:1}

/* ── MetricHero ── */
.metric-hero{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:20px;text-align:center;
}
.metric-hero .hero-value{
  font-size:48px;font-weight:700;
  font-family:var(--font-mono);color:var(--text);line-height:1.1;
}
.metric-hero .hero-suffix{font-size:24px;color:var(--text2)}
.metric-hero .hero-badge{
  display:inline-block;margin-top:4px;
  font-size:10px;font-weight:600;
  background:rgba(251,191,36,.15);color:var(--yellow);
  padding:2px 8px;border-radius:10px;
}
.metric-hero .hero-label,.metric-hero .hero-progress-label{
  font-size:10px;color:var(--text2);
  text-transform:uppercase;letter-spacing:.5px;margin-top:6px;
}
.hero-stat{
  display:inline-block;font-size:12px;color:var(--text2);
  margin:4px 8px 0 0;
}
.metric-hero .hero-progress{
  height:6px;background:var(--border);border-radius:3px;
  margin-top:6px;overflow:hidden;
}
.metric-hero .hero-progress .progress-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  transition:width .4s;
}

/* ── FX Ticker Strip ── */
.ticker-strip{
  display:flex;gap:8px;align-items:center;
  font-size:11px;font-family:var(--font-mono);color:var(--text2);
}
.ticker-strip span{display:flex;gap:3px}
.ticker-strip strong{color:var(--green)}
.btn-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--yellow);margin-right:4px;
  box-shadow:0 0 6px var(--yellow);
}

/* ── CEO Intel Grid (3-column) ── */
.ceo-intel-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
}
.ceo-col{min-height:0}

/* ── Market Share Bars ── */
.ceo-share-row{
  display:flex;align-items:center;gap:6px;
  padding:4px 0;font-size:11px;color:var(--text2);
}
.ceo-share-row.ours{color:var(--blue);font-weight:600}
.ceo-share-row span{min-width:100px;flex-shrink:0;font-size:11px}
.ceo-share-track{
  flex:1;height:8px;background:var(--border);
  border-radius:4px;overflow:hidden;
}
.ceo-share-fill{
  height:100%;border-radius:4px;
  background:var(--blue);transition:width .3s;
}
.ceo-share-row.ours .ceo-share-fill{
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}
.ceo-share-row strong{
  min-width:70px;text-align:right;font-size:11px;
  font-family:var(--font-mono);
}

/* ── CEO Intel Items ── */
.ceo-intel-item{
  padding:8px;margin-bottom:6px;
  border-radius:6px;font-size:11px;line-height:1.5;
}
.ceo-intel-item strong{display:block;font-size:11px;color:var(--text);margin-bottom:2px}
.ceo-intel-item p{color:var(--text2);margin:0;font-size:11px}
.ceo-intel-item.threat{
  background:rgba(248,113,113,.06);
  border-left:2px solid var(--red);
}
.ceo-intel-item.opp{
  background:rgba(74,222,128,.06);
  border-left:2px solid var(--green);
}
.ceo-intel-item.action{
  background:rgba(91,138,245,.06);
  border-left:2px solid var(--blue);
}
.ceo-summary{margin-top:8px}
.ceo-summary p{font-size:12px;line-height:1.6;color:var(--text)}

/* ── Pulse Chart (Bar) ── */
.pulse-chart{
  display:flex;align-items:flex-end;gap:4px;
  height:160px;padding-top:8px;
}
.pulse-bar{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  height:100%;
}
.pulse-bar .bar-stack{
  width:100%;position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;
}
.pulse-bar .bar-fill{
  width:100%;border-radius:3px 3px 0 0;
  transition:height .3s;min-height:2px;
}
.pulse-bar .bar-market{
  background:linear-gradient(180deg,var(--blue),rgba(91,138,245,.3));
}
.pulse-bar .bar-brand{
  background:linear-gradient(180deg,var(--cyan),rgba(56,189,248,.5));
  position:absolute;bottom:0;left:0;width:100%;border-radius:3px 3px 0 0;
}
.pulse-bar span{
  font-size:8px;color:var(--text3);margin-top:4px;
  writing-mode:vertical-rl;text-orientation:mixed;
}
.pulse-val{
  font-size:8px;font-weight:600;color:var(--accent);
  margin-bottom:2px;white-space:nowrap;
}

/* ── Hero Market Overview ── */
.hero-market-overview{
  text-align:center;padding:24px 0 16px;
}
.hero-label{
  font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--accent);
}
.hero-value{
  font-size:48px;font-weight:800;font-family:var(--font-mono);
  color:var(--text);line-height:1.2;margin:8px 0;
}
.hero-period{
  font-size:12px;color:var(--text3);
}
.hero-brand-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-top:16px;padding:0 8px;
}
.hero-stat-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:12px;text-align:center;
}
.stat-label{
  display:block;font-size:10px;color:var(--text3);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:6px;
}
.stat-value{
  display:block;font-size:22px;font-weight:700;color:var(--text);
  font-family:var(--font-mono);
}
.stat-value.accent{color:var(--accent)}
.stat-change{
  display:block;font-size:10px;margin-top:4px;font-weight:600;
}
.stat-change.positive{color:var(--green)}
.stat-change.negative{color:var(--red)}

/* ── Panel Variants ── */
.panel-chart,.panel-table{min-height:180px}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.panel-head h2{font-size:13px;font-weight:700;color:var(--text);margin:0}
.panel-meta{font-size:10px;color:var(--text3)}

/* ── Table Styles ── */
.table-wrap,.hud-table-wrap,.hunting-table-wrap,.vault-table-wrap{
  overflow-x:auto;overflow-y:auto;max-height:300px;
}
.hud-table,.hunting-table{width:100%;border-collapse:collapse;font-size:12px}
.hud-table thead th,.hunting-table thead th{
  background:var(--surface);padding:7px 10px;
  font-size:10px;font-weight:600;color:var(--text2);
  text-transform:uppercase;letter-spacing:.5px;
  text-align:left;position:sticky;top:0;z-index:1;
  border-bottom:1px solid var(--border);
}
.hud-table tbody td,.hunting-table tbody td{
  padding:6px 10px;border-bottom:1px solid var(--border);
  color:var(--text);
}
.hud-table tbody tr:hover,.hunting-table tbody tr:hover{
  background:rgba(91,138,245,.04);
}
.mono{font-family:var(--font-mono)}

/* ── Hud Hint ── */
.hud-hint{font-size:10px;color:var(--text3);margin-top:6px;font-style:italic}

/* ── Metric Row ── */
.metric-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:3px 0;font-size:11px;color:var(--text2);
}
.metric-row strong{color:var(--text);font-family:var(--font-mono)}

/* ── Price Gap Chart (Competitors) ── */
.price-gap-chart{display:flex;flex-direction:column;gap:6px}
.price-gap-row{display:flex;align-items:center;gap:8px;font-size:11px}
.price-gap-label{min-width:90px;color:var(--text2);flex-shrink:0}
.price-gap-track{
  flex:1;height:10px;background:var(--border);
  border-radius:5px;overflow:hidden;
}
.price-gap-fill{
  height:100%;border-radius:5px;transition:width .3s;
}
.price-gap-fill.ours{background:var(--blue)}
.price-gap-fill.high{background:var(--red)}
.price-gap-fill.low{background:var(--green)}
.price-gap-value{
  min-width:60px;text-align:right;
  font-family:var(--font-mono);color:var(--text);
}

/* ── Competitor Chips ── */
.competitor-chip{
  display:inline-block;padding:2px 8px;
  border-radius:10px;font-size:10px;font-weight:600;
}
.competitor-chip.green{background:rgba(74,222,128,.15);color:var(--green)}
.competitor-chip.red{background:rgba(248,113,113,.15);color:var(--red)}
.competitor-chip.blue{background:rgba(91,138,245,.15);color:var(--blue)}

/* ── Status Badge ── */
.status-badge{
  display:inline-block;padding:1px 6px;
  border-radius:3px;font-size:10px;font-weight:600;
}
.status-badge.ok,.status-badge.success{background:rgba(74,222,128,.15);color:var(--green)}
.status-badge.warn{background:rgba(251,191,36,.15);color:var(--yellow)}
.status-badge.not,.status-badge.is{background:rgba(248,113,113,.15);color:var(--red)}

/* ── Placeholder ── */
.placeholder-panel{
  font-size:12px;color:var(--text3);
  text-align:center;padding:24px;
}
.loading-state,.loading-pulse{
  text-align:center;padding:24px;color:var(--text3);
  font-size:12px;
}

/* ── Progress Inline ── */
.progress-inline,.progress-track{
  display:flex;align-items:center;gap:6px;
}
.progress-inline .progress-track,.progress-track{
  flex:1;height:6px;background:var(--border);
  border-radius:3px;overflow:hidden;
}
.progress-fill{
  height:100%;border-radius:3px;
  background:var(--blue);transition:width .4s;
}

/* ── Timeline ── */
.hud-timeline{
  display:flex;flex-direction:column;gap:0;
  padding-left:12px;border-left:2px solid var(--border);
}
.timeline-step{
  position:relative;padding:8px 0 8px 16px;
}
.timeline-marker{
  position:absolute;left:-19px;top:12px;
  width:10px;height:10px;border-radius:50%;
  background:var(--card);border:2px solid var(--blue);
}
.timeline-content{font-size:11px;color:var(--text2)}
.timeline-panel{margin-top:2px}

/* ── Profile dropdown (header) ── */
.profile-dropdown{position:relative}
.profile-chip{
  display:flex;align-items:center;gap:8px;
  padding:4px 8px 4px 4px;
  background:var(--card);border:1px solid var(--border);
  cursor:pointer;transition:border-color .15s,background .15s;
  max-width:220px;
}
.profile-chip:hover,.profile-chip.open{border-color:var(--border-strong);background:rgba(0,172,172,.06)}
.profile-avatar,.profile-dropdown-avatar,.profile-settings-avatar{
  width:28px;height:28px;min-width:28px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,172,172,.15);color:var(--accent-bright);
  font-size:10px;font-weight:700;font-family:var(--font-mono);
}
.profile-chip-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.profile-chip-name{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.profile-chip-meta{font-size:9px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.profile-chip-caret{font-size:8px;color:var(--text3);margin-left:2px}
.profile-dropdown-backdrop{position:fixed;inset:0;z-index:90}
.profile-dropdown-panel{
  position:absolute;top:calc(100% + 6px);right:0;
  width:260px;background:var(--card);border:1px solid var(--border-strong);
  box-shadow:0 8px 24px rgba(0,0,0,.55);z-index:100;padding:6px 0;
}
.profile-dropdown-head{display:flex;gap:10px;padding:10px 12px;align-items:flex-start}
.profile-dropdown-name{display:block;font-size:12px;font-weight:700;color:var(--text)}
.profile-dropdown-role{display:block;font-size:10px;color:var(--text2);margin-top:2px}
.profile-dropdown-plan{
  display:inline-block;margin-top:4px;font-size:9px;font-weight:600;
  color:var(--accent-bright);background:rgba(0,172,172,.12);padding:2px 6px;
}
.profile-dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.profile-dropdown-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 12px;font-size:11px;color:var(--text2);
  text-decoration:none;transition:background .15s,color .15s;
}
.profile-dropdown-item:hover:not(.disabled){background:rgba(0,172,172,.08);color:var(--accent-bright)}
.profile-dropdown-item.active{background:rgba(0,172,172,.12);color:var(--accent-bright);font-weight:600}
.profile-dropdown-item.disabled{opacity:.55;cursor:not-allowed}
.profile-dropdown-item i{width:14px;text-align:center;font-size:12px;color:var(--accent)}
.profile-soon-badge{
  margin-left:auto;font-size:8px;font-weight:700;
  color:var(--text3);border:1px solid var(--border);padding:1px 5px;
}
.profile-dropdown-logout{border-top:0;margin:0}
.profile-dropdown-logout-btn{background:transparent;border:0;cursor:pointer}

/* ── Profile settings page ── */
.profile-settings{padding:16px}
.profile-settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.profile-settings-card,.profile-readonly-card{padding:16px}
.profile-settings-card-head h2{font-size:14px;font-weight:700;color:var(--text);margin:0}
.profile-settings-card-head p{font-size:10px;color:var(--text3);margin:4px 0 12px}
.profile-identity-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.profile-settings-avatar{width:48px;height:48px;min-width:48px;font-size:14px}
.profile-identity-badges{display:flex;flex-wrap:wrap;gap:6px}
.profile-badge{font-size:9px;font-weight:600;padding:3px 8px;border:1px solid var(--border)}
.profile-badge-role{color:var(--accent-bright);border-color:rgba(0,172,172,.35);background:rgba(0,172,172,.08)}
.profile-badge-tenant{color:var(--text2)}
.profile-badge-plan{color:var(--yellow);border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.profile-form{display:flex;flex-direction:column;gap:12px}
.profile-status{font-size:11px;padding:8px 10px;border:1px solid var(--border)}
.profile-status.success{color:var(--green);border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.06)}
.profile-status.error{color:var(--red);border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.06)}
.profile-summary-list{display:flex;flex-direction:column;gap:10px;margin:0}
.profile-summary-list dt{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.profile-summary-list dd{font-size:12px;color:var(--text);margin:2px 0 0}
.profile-summary-list code{font-size:10px;color:var(--text3);margin-left:6px}
.profile-perm-tags{display:flex;flex-wrap:wrap;gap:4px}
.profile-perm-tag{font-size:9px;padding:2px 6px;border:1px solid var(--border);color:var(--text2);font-family:var(--font-mono)}
.profile-page-loading{padding:24px;font-size:12px;color:var(--text3)}

@media (max-width:900px){
  .profile-settings-grid{grid-template-columns:1fr}
  .profile-chip-text{display:none}
  .profile-chip{padding:4px}
}

.form-group{display:flex;flex-direction:column;gap:4px}
.form-group label{font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.form-control,.form-input,.form-select{
  background:var(--card);border:1px solid var(--border);
  border-radius:6px;padding:8px 12px;font-size:12px;
  color:var(--text);width:100%;
}
.form-control:focus,.form-select:focus{border-color:var(--blue);outline:none}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* ── Button Variants ── */
.btn-secondary{
  padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;
  background:var(--card);border:1px solid var(--border);color:var(--text2);
}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{font-size:10px;padding:3px 8px}
.btn-block{width:100%}
.btn-link{color:var(--blue);font-size:11px;text-decoration:underline}
.text-danger{color:var(--red)}

/* ── Eligibility / GACC ── */
.eligibility-result{
  padding:16px;border-radius:8px;
  background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.2);
}
.checklist{display:flex;flex-direction:column;gap:4px}
.checklist-item{
  display:flex;align-items:center;gap:8px;
  padding:4px 0;font-size:11px;color:var(--text2);
}
.check-icon{font-size:14px}

/* ── AI Providers ── */
.ai-provider-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;
}
.ai-provider-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:14px;
}
.ai-provider-card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.ai-provider-type{font-size:10px;color:var(--text3);text-transform:uppercase}
.ai-insight-box,.ai-status-banner{
  padding:10px;border-radius:6px;
  background:rgba(167,139,250,.08);
  border:1px solid rgba(167,139,250,.15);
  font-size:11px;color:var(--purple);
  margin-bottom:8px;
}
.ais-preview{
  font-family:var(--font-mono);font-size:10px;
  color:var(--text3);background:var(--surface);
  padding:6px 8px;border-radius:4px;
  overflow-x:auto;white-space:pre;
}

/* ── JSON Preview ── */
.json-preview{
  font-family:var(--font-mono);font-size:10px;
  color:var(--cyan);background:var(--surface);
  padding:8px;border-radius:6px;
  overflow-x:auto;white-space:pre-wrap;
  max-height:200px;
}
.json-detail-row{
  display:flex;gap:8px;font-size:10px;padding:2px 0;
  color:var(--text2);
}
.code-block{
  font-family:var(--font-mono);font-size:10px;
  background:var(--surface);padding:8px;border-radius:4px;
  overflow-x:auto;color:var(--text);
}

/* ── Vault (DataAlpha) ── */
.vault-hero{
  background:linear-gradient(135deg, rgba(91,138,245,.08), rgba(74,222,128,.06));
  border:1px solid rgba(91,138,245,.25);
  border-radius:12px;padding:16px 20px;margin-bottom:12px;
  overflow:visible;
}
.vault-hero-meta{
  font-size:13px;color:var(--text);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  line-height:1.8;font-weight:500;
}
.vault-hero-meta .dot{color:var(--cyan);font-weight:700}
.vault-twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vault-method{font-size:11px;color:var(--text2);margin-top:8px}
.vault-findings{margin-top:12px}

/* ── Findings ── */
.finding-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;
}
.finding-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:14px;
}
.finding-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.finding-headline{font-size:13px;font-weight:600;color:var(--text);flex:1}
.finding-rank{
  font-size:9px;font-weight:700;color:var(--purple);
  background:rgba(167,139,250,.15);padding:2px 6px;border-radius:3px;
}
.finding-tag{
  display:inline-block;padding:1px 6px;border-radius:3px;
  font-size:9px;font-weight:600;
  background:rgba(91,138,245,.15);color:var(--blue);
  margin-right:4px;
}
.finding-detail{font-size:11px;color:var(--text2);margin-top:4px;line-height:1.5}
.finding-conf,.confidence{font-size:10px;color:var(--text3);margin-top:4px}
.finding-sowhat{
  margin-top:8px;padding:6px 8px;border-radius:4px;
  background:rgba(74,222,128,.06);font-size:11px;
  border-left:2px solid var(--green);
}
.sowhat-label{font-size:9px;font-weight:700;color:var(--green);text-transform:uppercase}

/* ── Concentration Bars ── */
.conc-split{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
.conc-bars{display:flex;flex-direction:column;gap:6px;min-width:0}
.conc-list{display:flex;flex-direction:column;gap:4px}
.conc-row{display:grid;grid-template-columns:110px 1fr 50px 90px;gap:6px;align-items:center;font-size:11px}
.conc-name{color:var(--text2);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.conc-track{height:10px;background:var(--border);border-radius:5px;overflow:hidden;min-width:0}
.conc-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--yellow),var(--orange,#f59e0b))}
.conc-pct{text-align:right;font-family:var(--font-mono);color:var(--text);font-size:10px;white-space:nowrap}
.conc-big{font-size:48px;font-weight:700;font-family:var(--font-mono);color:var(--text);line-height:1}
.conc-big span{display:block;font-size:14px;font-weight:600;color:var(--text3);margin-top:4px}
.conc-meta{font-size:9px;color:var(--text3);white-space:nowrap}
.conc-verdict{
  padding:8px;border-radius:6px;margin-top:8px;
  background:rgba(91,138,245,.06);font-size:11px;color:var(--blue);
  word-wrap:break-word;
}
.conc-rec,.cell-rec{font-size:10px;color:var(--green);font-weight:500;word-wrap:break-word}
.conc-stats{display:flex;flex-direction:column;gap:6px}

/* ── Premium Curve (Density Chart) ── */
.premium-curve{display:flex;gap:8px;margin-top:12px;justify-content:center;align-items:flex-end}
.curve-bars{display:flex;align-items:flex-end;gap:3px;height:140px}
.curve-bar{flex:1;border-radius:3px 3px 0 0;min-width:12px;transition:height .3s}
.curve-gmv{background:var(--yellow)}
.curve-vol{background:rgba(255,255,255,.15)}
.is-frontier .curve-gmv{background:var(--green)}
.curve-col{text-align:center;min-width:80px}
.curve-label{font-size:9px;color:var(--text3);margin-top:4px}
.curve-sub{font-size:9px;color:var(--text3)}
.curve-density{font-size:11px;font-weight:700;color:var(--yellow);margin-top:4px}
.is-frontier .curve-density{color:var(--green)}
.curve-legend{display:flex;gap:12px;margin-top:10px;font-size:10px;color:var(--text2)}
.lg,.lg-den,.lg-gmv,.lg-vol,.lg-peak{
  display:inline-block;width:8px;height:8px;border-radius:2px;
}
.lg-den{background:var(--blue)}
.lg-gmv{background:var(--yellow)}
.lg-vol{background:rgba(255,255,255,.15)}
.lg-peak{background:var(--yellow)}

/* ── Season Chart ── */
.season-chart{display:flex;align-items:flex-end;gap:4px;height:180px;padding:8px 0}
.season-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.season-bar{
  width:100%;border-radius:3px 3px 0 0;
  background:var(--blue);transition:height .3s;min-height:4px;
}
.season-label{font-size:9px;color:var(--text3);margin-top:4px}

/* ── Trend Score ── */
.trend-score-cell{display:flex;align-items:center;gap:4px}
.trend-score-track{
  width:40px;height:4px;background:var(--border);
  border-radius:2px;overflow:hidden;
}
.trend-score-fill{height:100%;border-radius:2px;background:var(--blue)}

/* ── Quota Cards ── */
.quota-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:14px;
}
.quota-meta{font-size:10px;color:var(--text3);margin-top:4px}
.quota-progress{margin-top:8px}

/* ── Portfolio Grid ── */
.portfolio-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;
}

/* ── License Module ── */
.license-module-grid{
  display:flex;flex-direction:column;gap:0;
  margin-top:12px;border:1px solid var(--border);
}
.license-module-chip{
  display:flex;align-items:center;gap:10px;
  padding:7px 12px;font-size:10px;font-weight:500;
  font-family:var(--font-mono);color:var(--text2);
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .12s,color .12s;
}
.license-module-chip:last-child{border-bottom:none}
.license-module-chip:hover{background:rgba(0,172,172,.05);color:var(--text)}
.license-module-chip.active{
  background:rgba(0,172,172,.1);color:var(--accent-bright,#00d4aa);
  box-shadow:inset 3px 0 0 var(--accent-bright,#00d4aa);
}

/* ── Shipment ── */
.shipment-create-panel{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:16px;margin-bottom:12px;
}
.claim-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 0;border-bottom:1px solid var(--border);
  font-size:11px;
}
.sku-code{
  font-family:var(--font-mono);font-size:10px;
  background:var(--surface);padding:1px 6px;border-radius:3px;
  color:var(--cyan);
}
.row-meta{font-size:10px;color:var(--text3)}

/* ── Champ Grid (Live Commerce) ── */
.champ-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;
}
.champ-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:12px;
}
.champ-name{font-size:12px;font-weight:600;color:var(--text)}
.champ-row{display:flex;justify-content:space-between;font-size:10px;color:var(--text2);margin-top:4px}
.champ-metric{font-family:var(--font-mono);color:var(--text)}

/* ── Payout (PnL) ── */
.payout-list{display:flex;flex-direction:column;gap:4px}
.payout-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 0;border-bottom:1px solid var(--border);
  font-size:11px;
}
.payout-bank{color:var(--text2)}
.payout-amount{font-family:var(--font-mono);color:var(--text)}
.pnl-deductions{margin-top:8px}

/* ── Opp Pill ── */
.opp-pill{
  display:inline-block;padding:2px 8px;border-radius:10px;
  font-size:10px;font-weight:600;
  background:rgba(74,222,128,.15);color:var(--green);
}

/* ── Recon ── */
.recon-dropzone{
  border:2px dashed var(--border);border-radius:8px;
  padding:24px;text-align:center;color:var(--text3);
  font-size:12px;cursor:pointer;transition:border-color .2s;
}
.recon-dropzone:hover{border-color:var(--blue)}
.recon-pipeline-steps{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.recon-upload-status{font-size:10px;color:var(--text2);margin-top:4px}

/* ── Canvas Hub (Dev) ── */
.canvas-hub{padding:16px}
.canvas-hub__header{margin-bottom:16px}
.canvas-hub__subtitle{font-size:12px;color:var(--text2)}
.canvas-hub__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;
}
.canvas-hub__card{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:14px;cursor:pointer;
  transition:border-color .2s;
}
.canvas-hub__card:hover{border-color:var(--blue)}
.canvas-hub__card-title{font-size:13px;font-weight:600;color:var(--text)}
.canvas-hub__card-role{font-size:10px;color:var(--purple);margin-top:2px}
.canvas-hub__card-route{font-size:10px;color:var(--text3);font-family:var(--font-mono);margin-top:4px}
.canvas-hub__card-count{font-size:10px;color:var(--text2);margin-top:2px}
.canvas-hub__badge{
  display:inline-block;padding:1px 6px;border-radius:3px;
  font-size:9px;font-weight:600;
  background:rgba(91,138,245,.15);color:var(--blue);
}
.canvas-hub__hint{font-size:11px;color:var(--text3);margin-top:4px}
.canvas-hub__routes{margin-top:6px}
.canvas-hub__preview{margin-top:12px}
.canvas-hub__preview-bar{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  background:var(--surface);border-radius:6px 6px 0 0;
  font-size:10px;color:var(--text2);
}
.canvas-hub__iframe{
  width:100%;height:400px;border:1px solid var(--border);
  border-radius:0 0 6px 6px;background:var(--bg);
}
.canvas-hub__open-tab{font-size:10px;color:var(--blue)}
.canvas-hub--denied{opacity:.5;pointer-events:none}

/* ── Hunting Thumb ── */
.hunting-thumb{
  width:48px;height:48px;border-radius:6px;
  background:var(--surface);object-fit:cover;
}

/* ── Frontier Key ── */
.frontier-key{
  font-family:var(--font-mono);font-size:10px;
  color:var(--cyan);background:rgba(34,211,238,.08);
  padding:1px 6px;border-radius:3px;
}

/* ── DS Label / Value ── */
.ds-label{font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase}
.ds-val{font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--text)}

/* ── Quad Badge ── */
.quad-badge{
  display:inline-block;padding:2px 8px;border-radius:10px;
  font-size:9px;font-weight:700;text-transform:uppercase;
}

/* ── Auth Layout ── */
.auth-header{text-align:center;margin-bottom:16px}
.auth-hint{font-size:11px;color:var(--text2);text-align:center;margin-top:8px}
.auth-error{color:var(--red);font-size:11px;margin-top:4px}

/* ── Dot Indicator ── */
.dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:4px;
}

/* ── SignalR Placeholder ── */
.signalr-placeholder{
  text-align:center;padding:24px;
  font-size:12px;color:var(--text3);
}

/* ── Recommendation List ── */
.recommendation-list{display:flex;flex-direction:column;gap:4px}

/* ── Trace Section ── */
.trace-section{
  padding:8px;margin-bottom:8px;
  border-radius:6px;background:rgba(91,138,245,.04);
  border:1px solid var(--border);
}

/* ── Drill Summary ── */
.drill-summary{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:8px}

/* ============================================================
   SENTIMENT PAGE STYLES
   ============================================================ */

/* ── Sentiment Bars ── */
.sentiment-bar-row{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;font-size:12px;
}
.sentiment-bar-row span{min-width:100px;color:var(--text2);flex-shrink:0}
.sentiment-bar-track{
  flex:1;height:10px;background:var(--border);
  border-radius:5px;overflow:hidden;
}
.sentiment-bar-fill{
  height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:width .4s ease;
}
.sentiment-bar-row strong{
  min-width:32px;text-align:right;
  font-family:var(--font-mono);font-size:12px;color:var(--text);
}

/* ── Sentiment Table ── */
.sentiment-table{display:flex;flex-direction:column;gap:0}
.sentiment-table-header{
  display:grid;grid-template-columns:2fr 1fr 80px;gap:8px;
  padding:6px 8px;font-size:10px;font-weight:600;
  color:var(--text3);text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid var(--border);
}
.sentiment-table-row{
  display:grid;grid-template-columns:2fr 1fr 80px;gap:8px;
  padding:6px 8px;font-size:11px;
  border-bottom:1px solid rgba(255,255,255,.03);
  transition:background .15s;
}
.sentiment-table-row:hover{background:rgba(91,138,245,.04)}
.sentiment-topic-name{color:var(--text);font-weight:500}
.sentiment-topic-type{
  color:var(--text3);font-size:10px;
  background:rgba(91,138,245,.08);padding:1px 6px;
  border-radius:3px;display:inline-block;
  max-width:fit-content;
}
.sentiment-topic-count{
  text-align:right;font-family:var(--font-mono);color:var(--cyan);
}

/* ── Keyword Cloud ── */
.keyword-cloud{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px 0;
}
.keyword-chip{
  display:inline-block;padding:4px 10px;
  background:rgba(91,138,245,.08);
  border:1px solid rgba(91,138,245,.15);
  border-radius:12px;font-size:11px;color:var(--text);
  transition:all .2s;cursor:default;
  max-width:200px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
.keyword-chip:hover{
  background:rgba(91,138,245,.15);
  border-color:rgba(91,138,245,.3);
  transform:translateY(-1px);
}

/* ── Review Cards ── */
.review-cards{display:flex;flex-direction:column;gap:8px}
.review-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;
}
.review-head{
  display:flex;align-items:center;gap:8px;
  margin-bottom:6px;font-size:11px;
}
.review-head strong{color:var(--text);font-size:12px}
.review-platform{
  background:rgba(167,139,250,.1);color:var(--purple);
  padding:1px 6px;border-radius:3px;font-size:9px;font-weight:600;
}
.review-rating{
  color:var(--yellow);font-size:11px;font-weight:600;
  margin-left:auto;
}
.review-text{
  font-size:11px;color:var(--text2);line-height:1.5;
  margin:0;
}

/* ============================================================
   STRATEGY / PLAYBOOK STYLES
   ============================================================ */
.playbook-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:12px;
}
.playbook-card{min-height:0}
.playbook-item{
  padding:10px;margin-bottom:8px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;
}
.playbook-item:last-child{margin-bottom:0}
.playbook-item-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
}
.playbook-item-title{
  font-size:12px;font-weight:600;color:var(--text);
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.playbook-item-conf{
  font-size:10px;font-weight:700;
  font-family:var(--font-mono);
  color:var(--green);
  background:rgba(74,222,128,.1);
  padding:2px 8px;border-radius:10px;
  flex-shrink:0;margin-left:8px;
}
.playbook-item-bar{
  height:4px;background:var(--border);border-radius:2px;
  overflow:hidden;margin-bottom:6px;
}
.playbook-item-bar-fill{
  height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  transition:width .4s;
}
.playbook-item-body{
  font-size:11px;color:var(--text2);line-height:1.5;
  margin:0 0 4px;word-break:break-word;
}
.playbook-item-cat{
  font-size:9px;font-weight:600;
  color:var(--text3);text-transform:uppercase;
  letter-spacing:.5px;
}

/* ── Responsive overrides for page content ── */
@media(max-width:960px){
  .ceo-intel-grid{grid-template-columns:1fr}
  .conc-split,.vault-twocol,.form-grid{grid-template-columns:1fr}
  .playbook-grid{grid-template-columns:1fr}
  .sentiment-table-header,.sentiment-table-row{grid-template-columns:2fr 1fr 60px}
}

/* ── Page Tab Bar ── */
.page-tab-bar{
  display:flex;gap:0;border-bottom:1px solid var(--border);
  background:rgba(10,11,16,.6);padding:0 16px;flex-shrink:0;
}
.page-tab{
  padding:10px 16px;background:none;border:none;
  border-bottom:2px solid transparent;
  color:var(--text2);font-size:12px;font-weight:600;
  cursor:pointer;transition:color .2s,border-color .2s,background .2s;
  white-space:nowrap;
}
.page-tab:hover{color:var(--text);background:rgba(91,138,245,.06)}
.page-tab--active{color:var(--cyan);border-bottom-color:var(--cyan)}
.page-tab-section{flex-shrink:0}
.page-tab-spacer{flex:1}
.page-tab-date-range{
  display:flex;align-items:center;gap:4px;padding:0 8px;
}
.page-tab-date-range .date-range-select{
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:4px;padding:3px 6px;font-size:11px;font-family:var(--font-mono);
  cursor:pointer;
}
.page-tab-date-range .date-range-select:focus{border-color:var(--cyan);outline:none}
.page-tab-date-range .date-range-sep{color:var(--text3);font-size:11px}
.date-apply-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 12px;border-radius:4px;border:none;
  background:var(--cyan);color:var(--bg);
  font-size:11px;font-weight:600;cursor:pointer;
  transition:background .2s,transform .1s;
  white-space:nowrap;
}
.date-apply-btn:hover{background:var(--blue);transform:scale(1.02)}
.date-apply-btn:active{transform:scale(0.97)}
.date-apply-icon{font-size:9px}

/* ── Date Range Selector ── */
.date-range-bar{
  display:flex;align-items:center;gap:12px;padding:8px 16px;
  background:rgba(10,11,16,.4);border-bottom:1px solid var(--border);flex-shrink:0;
  flex-wrap:wrap;
}
.date-range-selects{display:flex;align-items:center;gap:6px}
.date-range-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.date-range-select{
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:4px;padding:4px 8px;font-size:12px;font-family:var(--font-mono);
  cursor:pointer;
}
.date-range-select:focus{border-color:var(--cyan);outline:none}
.date-range-sep{color:var(--text3);font-size:12px}
.date-range-presets{display:flex;gap:4px;margin-left:auto}
.date-preset{
  background:rgba(91,138,245,.08);color:var(--text2);border:1px solid var(--border);
  border-radius:4px;padding:3px 10px;font-size:11px;cursor:pointer;
  transition:all .2s;
}
.date-preset:hover{background:rgba(91,138,245,.15);color:var(--text)}
.date-preset--active{background:rgba(34,211,238,.12);color:var(--cyan);border-color:var(--cyan)}

/* ── Sidebar Collapse (IDE hover expand) ── */
.sidebar-collapse-input{display:none}

.sidebar-wrapper{
  position:relative;display:flex;flex-direction:column;
  width:210px;min-width:210px;
  transition:width .22s ease,min-width .22s ease;
  overflow:hidden;min-height:0;flex-shrink:0;z-index:15;
}

.sidebar-wrapper--open{
  width:210px;min-width:210px;
}

.sidebar-wrapper--open .sidebar{
  width:210px;min-width:210px;
}

/* Sidebar seam toggle button — mirrors Sentra panel seam on the right */
.sidebar-seam-toggle{
  position:relative;
  width:18px;min-width:18px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;align-self:stretch;
  padding:0;margin:0;
  background:linear-gradient(180deg,#050707 0%,#0a0c0c 48%,#050707 100%);
  border:none;
  border-right:1px solid var(--border);
  color:var(--accent-bright,#5bf);
  font-size:9px;cursor:pointer;
  transition:background .2s,color .2s;
  user-select:none;z-index:20;
}
.sidebar-seam-toggle:hover{
  background:rgba(0,172,172,.12);
  color:var(--accent-bright,#5bf);
}

/* Legacy checkbox collapse (kept for mobile compat) */
.sidebar-collapse-input:checked ~ .sidebar-wrapper{
  width:0!important;min-width:0!important;overflow:hidden;
}
.sidebar-collapse-input:checked ~ .sidebar-wrapper .sidebar{
  opacity:0;pointer-events:none;
}
.sidebar-collapse-input:checked ~ .sidebar-collapse-btn::after{
  content:"▶";
}
.sidebar-collapse-input:checked ~ .sidebar-collapse-btn::before{
  content:none;
}

/* Sidebar collapse button — sits as a sibling between checkbox and wrapper */
.sidebar-collapse-btn{
  position:relative;
  width:22px;min-width:22px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface,#12131a);
  border-right:1px solid var(--border);
  color:var(--text3);font-size:10px;
  cursor:pointer;transition:background .2s,color .2s;
  user-select:none;z-index:20;
  flex-shrink:0;
}
.sidebar-collapse-btn:hover{background:rgba(91,138,245,.15);color:var(--cyan)}

/* ── Right Panel / Sentra Agent Panel Collapse (CSS checkbox toggle) ── */
.rp-collapse-input{display:none}

/* When checked → collapse sentra agent panel */
.rp-collapse-input:checked ~ .sentra-agent-panel,
.rp-collapse-input:checked ~ .right-panel{
  width:0!important;min-width:0!important;overflow:hidden;border-left:none;
}
.rp-collapse-btn:hover{background:rgba(91,138,245,.15);color:var(--cyan)}

/* Collapse internal elements */
.rp-collapse-input:checked ~ .sentra-agent-panel > *,
.rp-collapse-input:checked ~ .right-panel .rp-body,
.rp-collapse-input:checked ~ .right-panel .rp-header{
  display:none;
}

/* ── Customer onboarding wizard ── */
.onboarding-shell{
  min-height:100vh;background:#000;
  background-image:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(34,211,238,.12),transparent),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px;
  color:var(--text);overflow:auto;
}
.onboarding-page{max-width:1200px;margin:0 auto;padding:32px 24px 48px;min-height:100vh;display:flex;flex-direction:column;gap:28px}
.onboarding-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.onboarding-brand{display:flex;align-items:center;gap:14px}
.onboarding-brand-title{font-size:1.1rem;font-weight:700;letter-spacing:.02em}
.onboarding-brand-sub{font-size:.85rem;color:var(--text2)}
.onboarding-progress-wrap{min-width:240px;flex:1;max-width:420px}
.onboarding-progress-label{font-size:.75rem;color:var(--text2);margin-bottom:6px;text-align:right}
.onboarding-progress-track{height:4px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.onboarding-progress-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .35s ease;border-radius:99px}
.onboarding-stage{display:grid;grid-template-columns:1fr 260px;gap:24px;position:relative;flex:1}
@media(max-width:900px){.onboarding-stage{grid-template-columns:1fr}.onboarding-rail{order:-1;display:flex;overflow-x:auto;gap:8px;padding-bottom:8px}}
.onboarding-glow{position:absolute;inset:-40px -20px auto -20px;height:280px;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 65%);pointer-events:none;filter:blur(40px);opacity:.7}
.onboarding-card{
  position:relative;z-index:1;padding:36px 32px;border-radius:16px;
  background:rgba(22,24,34,.82);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.onboarding-step-icon{font-size:2.4rem;margin-bottom:12px;line-height:1}
.onboarding-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text2);margin-bottom:8px}
.onboarding-title{font-size:1.85rem;font-weight:800;line-height:1.15;margin-bottom:10px}
.onboarding-subtitle{font-size:1rem;color:var(--cyan);margin-bottom:16px;font-weight:500}
.onboarding-desc{font-size:.95rem;color:var(--text2);line-height:1.65;max-width:56ch;margin-bottom:22px}
.onboarding-highlights{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.onboarding-highlights li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--text)}
.onboarding-bullet{width:6px;height:6px;border-radius:50%;margin-top:.45em;flex-shrink:0;opacity:.9}
.onboarding-preview-hint{font-size:.78rem;color:var(--text3);padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.1)}
.onboarding-preview-hint code{font-family:var(--font-mono);color:var(--cyan);font-size:.76rem}
.onboarding-rail{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.onboarding-rail-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-align:left;
  border:1px solid transparent;background:rgba(255,255,255,.02);color:var(--text2);font-size:.82rem;
  transition:all .2s;
}
.onboarding-rail-item.active{border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.08);color:var(--text)}
.onboarding-rail-item.done{opacity:.85;color:var(--text)}
.onboarding-rail-item:disabled:not(.active){opacity:.45;cursor:default}
.rail-icon{font-size:1rem;width:1.4rem;text-align:center}
.rail-label{line-height:1.2}
.onboarding-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px}
.onboarding-footer-center{flex:1;display:flex;justify-content:center}
.onboarding-btn{padding:10px 20px;border-radius:10px;font-size:.88rem;font-weight:600;transition:all .2s}
.onboarding-btn.primary{background:linear-gradient(135deg,var(--blue),#3b6fd4);color:#fff;box-shadow:0 8px 24px rgba(91,138,245,.25)}
.onboarding-btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.onboarding-btn.primary.glow{box-shadow:0 0 24px rgba(74,222,128,.35),0 8px 24px rgba(91,138,245,.2)}
.onboarding-btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text2)}
.onboarding-btn.ghost:disabled{opacity:.35;cursor:not-allowed}
.onboarding-btn.skip{background:transparent;color:var(--text3);font-size:.8rem;text-decoration:underline;text-underline-offset:3px}
.onboarding-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text2)}
.onboarding-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--cyan);border-radius:50%;animation:onboarding-spin .8s linear infinite}
@keyframes onboarding-spin{to{transform:rotate(360deg)}}
