/* ═══════════════════════════════════════════════
   BOSRAI  —  styles.css
   Premium Light SaaS Design System
═══════════════════════════════════════════════ */
:root {
  /* ── Type stack: matches Claude-design Dashboard.html ──
     IBM Plex Sans for UI, IBM Plex Mono for data/labels, Instrument Serif
     for editorial moments (greeting, big stats, tile h3s). */
  --font-sans:  "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, 'JetBrains Mono', monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;

  /* ── Core palette: warm cream (BOS_R_AI design) ── */
  --bg:       oklch(97.2% 0.012 85);
  --bg2:      oklch(98.6% 0.010 85);
  --bg3:      oklch(93% 0.013 85);
  --border:   oklch(89% 0.014 85);
  --border2:  oklch(85% 0.014 85);
  --text:     oklch(16% 0.010 260);
  --text2:    oklch(32% 0.012 260);
  --text3:    oklch(50% 0.012 80);
  --accent:   oklch(62% 0.20 145);
  --accent-hover: oklch(56% 0.22 145);
  --accent-ink:  oklch(38% 0.16 145);
  --accent-wash: oklch(95% 0.06 145);
  --green:    oklch(66% 0.13 150);
  --red:      oklch(62% 0.17 25);
  --agent-color: oklch(62% 0.20 145);
  --sidebar-w: 240px;
  --right-w:   280px;
  --header-h:  52px;

  /* ── Aliases matching Claude design naming convention.
     Lets future components use --hair / --ink / --muted / --panel
     without rewriting existing code that uses --border / --text / etc. */
  --panel:   var(--bg2);          /* lighter surface (cards, dropdowns) */
  --ink:     var(--text);         /* primary text */
  --ink-2:   var(--text2);        /* secondary text */
  --muted:   var(--text3);        /* tertiary / labels */
  --faint:   oklch(68% 0.015 80); /* labels / hint text */
  --hair:    var(--border);       /* primary divider */
  --hair-2:  oklch(93% 0.013 85); /* subtle divider / hover bg */

  /* ── Sidebar (light, warm cream — matches design) ── */
  --sidebar-bg:     oklch(97.2% 0.012 85);
  --sidebar-bg2:    oklch(95.5% 0.014 85);
  --sidebar-border: oklch(89% 0.014 85);
  --sidebar-text:   oklch(32% 0.012 260);
  --sidebar-text2:  oklch(50% 0.012 80);
  --sidebar-text3:  oklch(68% 0.015 80);

  /* ── BOS_R_AI brand: green + cyan + magenta ── */
  --brand-green:   oklch(78% 0.24 142);
  --brand-cyan:    oklch(78% 0.16 210);
  --brand-magenta: oklch(65% 0.28 355);
  --accent-2:      oklch(65% 0.28 355);
  --accent-3:      oklch(62% 0.15 210);

  /* ── Shadows (ultra-flat, Stripe-style) ── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:   0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:   0 4px 16px rgba(0,0,0,.06);
  --accent-dim:  oklch(95% 0.06 145);
  --accent-glow: none;

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
/* Editorial moments — oversized serif (greeting, big stat values, tile h3s).
   Apply via class to keep the surface clean while opting in selectively. */
.h-serif,
.greet h1, .timecard .big,
.stat-val,
.task h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* Data + labels — monospace cues that echo the bosr.ai terminal voice. */
.mono, .h-mono,
.nav-label, .section-sub, .crumbs, .kbd,
.stat-label, .task-head, .task-foot,
.dept-tag, .action-num, .progress, .eta {
  font-family: var(--font-mono);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════ */
#layout { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--sidebar-bg); border-right: none;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .25s ease;
  color: var(--sidebar-text);
}
.sidebar-header {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex; align-items: center; gap: 10px;
}
.logo-mark { font-size: 18px; color: var(--accent); }
.logo-text { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .04em; }
.logo-text span { color: var(--accent); }
.sidebar-actions {
  display: flex; gap: 6px; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
#agentList { flex: 1; overflow-y: auto; padding: 8px 8px; }

/* ── Agent Card ── */
.agent-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 8px; cursor: pointer;
  margin-bottom: 4px; transition: background .15s;
  border: 1px solid transparent;
}
.agent-card:hover { background: var(--bg3); }
.agent-card.active { background: var(--bg3); border-color: var(--border2); }
.agent-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; border: 1px solid;
}
.agent-info { flex: 1; min-width: 0; }
.agent-name { font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.agent-role { font-size: 10px; color: var(--text3); font-weight: 400; }
.agent-preview { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.agent-meta { font-size: 10px; color: var(--text3); margin-top: 1px; }
.agent-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background .3s; }
.sidebar-footer {
  padding: 10px 12px; border-top: 1px solid var(--border);
  display: flex; gap: 6px;
}

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

/* ── Header ── */
#header {
  height: var(--header-h); flex-shrink: 0;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
}
#sidebarToggle { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 18px; display: none; }
#hdrAvatar { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.hdr-agent-info { flex: 1; }
#hdrAgentName { font-weight: 600; font-size: 14px; }
#hdrAgentRole { font-size: 11px; color: var(--text2); }
.hdr-controls { display: flex; align-items: center; gap: 8px; }
.model-badge {
  font-size: 11px; color: var(--text2); background: var(--bg3);
  border: 1px solid var(--border2); border-radius: 20px;
  padding: 3px 10px; white-space: nowrap; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis;
}
.ekg-wrap { width: 100px; height: 32px; }
#ekg { width: 100%; height: 100%; border-radius: 6px; }

/* ── Chat ── */
#chatArea { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#chatMessages {
  flex: 1; overflow-y: auto; padding: 20px 20px 8px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Messages ── */
.message { display: flex; gap: 10px; max-width: 720px; }
.user-message { flex-direction: row-reverse; align-self: flex-end; }
.assistant-message { align-self: flex-start; }
.sub-agent-message { align-self: flex-start; opacity: .95; }
.system-message { align-self: center; }
.system-message .msg-bubble {
  background: var(--bg3); border: 1px solid var(--border2);
  font-size: 12px; color: var(--text2); padding: 6px 12px; border-radius: 8px;
}
.msg-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--bg3);
}
.msg-bubble {
  max-width: 560px; padding: 12px 14px; border-radius: 12px;
  position: relative;
}
.user-message .msg-bubble {
  background: var(--accent); color: #fff; border-radius: 12px 3px 12px 12px;
}
.assistant-message .msg-bubble {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 3px 12px 12px 12px;
}
.sub-agent-message .msg-bubble {
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 3px 12px 12px 12px;
}
.sub-agent-label { font-size: 10px; color: var(--text3); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.msg-bubble p { margin: 0 0 8px; } .msg-bubble p:last-of-type { margin-bottom: 0; }
.msg-bubble pre { background: #0a0a18; border: 1px solid var(--border); border-radius: 6px; padding: 10px; overflow-x: auto; margin: 8px 0; }
.msg-bubble code { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.msg-bubble :not(pre) > code { background: var(--border); padding: 1px 5px; border-radius: 3px; }
.msg-bubble ul, .msg-bubble ol { padding-left: 18px; margin: 6px 0; }
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3 { margin: 10px 0 6px; font-size: 1em; font-weight: 700; }
.msg-bubble table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12px; }
.msg-bubble th, .msg-bubble td { border: 1px solid var(--border2); padding: 5px 8px; }
.msg-bubble th { background: var(--bg2); }
.msg-actions { display: flex; justify-content: flex-end; margin-top: 6px; opacity: 0; transition: opacity .2s; }
.msg-bubble:hover .msg-actions { opacity: 1; }
.msg-action-btn { background: none; border: 1px solid var(--border2); color: var(--text2); padding: 2px 7px; border-radius: 4px; cursor: pointer; font-size: 11px; }
.msg-action-btn:hover { background: var(--border); color: var(--text); }
.thinking-dots { color: var(--text2); letter-spacing: 4px; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }
.error-text { color: var(--red); }

/* ── Empty state ── */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text3); padding: 60px 20px; text-align: center; }
.empty-state span { font-size: 48px; }
.empty-mini { color: var(--text3); font-size: 12px; text-align: center; padding: 12px; }

/* ── Chat Input ── */
.chat-input-area {
  padding: 12px 16px 14px; border-top: 1px solid var(--border);
  background: var(--bg2); position: relative;
}
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
#chatInput {
  flex: 1; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 10px; color: var(--text); padding: 10px 14px;
  font-size: 14px; font-family: inherit; resize: none;
  outline: none; max-height: 160px; line-height: 1.5;
  transition: border-color .15s;
}
#chatInput:focus { border-color: var(--accent); }
#sendBtn {
  background: var(--accent); border: none; color: #fff;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  font-size: 16px; flex-shrink: 0; transition: opacity .15s;
}
#sendBtn:hover { opacity: .85; }
#sendBtn:disabled { opacity: .4; }
.chat-input-hint { font-size: 11px; color: var(--text3); margin-top: 5px; }

/* ── Mention Menu ── */
.mention-menu {
  position: absolute; bottom: 100%; left: 16px; right: 60px;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px;
  overflow: hidden; display: none; z-index: 50; box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.mention-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; }
.mention-item:hover { background: var(--bg3); }
.mention-role { font-size: 11px; color: var(--text3); margin-left: auto; }
.mention-tag { color: var(--accent); font-weight: 600; }

/* ════════════════════════════════════════════
   RIGHT PANEL
════════════════════════════════════════════ */
#rightPanel {
  width: var(--right-w); flex-shrink: 0;
  background: var(--bg2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.right-tab-bar {
  display: flex; border-bottom: 1px solid var(--border);
  padding: 0 4px;
}
.right-tab-btn {
  flex: 1; background: none; border: none; color: var(--text2);
  padding: 11px 4px; font-size: 12px; cursor: pointer; font-weight: 500;
  border-bottom: 2px solid transparent; transition: all .15s;
}
.right-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.right-tab-pane { display: none; flex: 1; overflow-y: auto; padding: 14px; }
.right-tab-pane.active { display: block; }

/* ── Soul Tab ── */
.soul-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.soul-avatar { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.soul-name { font-weight: 700; font-size: 15px; }
.soul-role { font-size: 11px; color: var(--text2); }
.soul-fields { display: flex; flex-direction: column; gap: 10px; }
.soul-field label { font-size: 11px; color: var(--text2); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.soul-field textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text); padding: 7px 9px;
  font-size: 12px; font-family: inherit; resize: vertical; outline: none;
  transition: border-color .15s;
}
.soul-field textarea:focus { border-color: var(--accent); }
.soul-actions { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }

/* ── Memory Tab ── */
.memory-stats { display: flex; gap: 12px; margin-bottom: 10px; }
.memory-stats span { font-size: 11px; color: var(--text2); background: var(--bg3); padding: 4px 10px; border-radius: 20px; }
.memory-add { display: flex; gap: 6px; margin-bottom: 10px; }
.memory-add input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text); padding: 7px 9px; font-size: 12px; outline: none;
}
.memory-add input:focus { border-color: var(--accent); }
.memory-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.memory-item { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; background: var(--bg3); border-radius: 6px; border: 1px solid var(--border); }
.memory-dot { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.memory-text { flex: 1; font-size: 12px; outline: none; }
.memory-text:focus { color: var(--accent); }
.mem-del-btn { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
.mem-del-btn:hover { color: var(--red); }
.memory-actions { display: flex; gap: 6px; }
.search-results { margin-top: 10px; background: var(--bg3); border-radius: 8px; padding: 10px; border: 1px solid var(--border2); }
.search-header { font-size: 11px; color: var(--text2); display: flex; justify-content: space-between; margin-bottom: 8px; }
.search-header button { background: none; border: none; color: var(--text2); cursor: pointer; }
.search-item { font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.search-item:last-child { border-bottom: none; }

/* ── Skills Tab ── */
.skills-grid { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 0; }
.skill-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border2); color: var(--text2);
  font-size: 12px; transition: all .15s; background: var(--bg3);
}
.skill-chip:hover { border-color: var(--accent); color: var(--text); }
.skill-chip.active { background: var(--accent)20; border-color: var(--accent); color: var(--accent); }

/* ════════════════════════════════════════════
   OVERLAYS (Settings, Wizard, Management)
════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.3);
  backdrop-filter: blur(6px); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 4px 24px rgba(0,0,0,.08);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: 90vh; max-width: 90vw;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text2); font-size: 20px; cursor: pointer; }
.modal-close:hover { color: var(--text); }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }

/* ── Settings ── */
#settingsOverlay .modal { width: 520px; }
.provider-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px; margin-bottom: 12px;
}
.pc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pc-icon { font-size: 18px; }
.pc-name { font-weight: 600; }
.pc-status { margin-left: auto; font-size: 12px; }
.pc-key-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pc-input {
  flex: 1; background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text); padding: 7px 10px; font-size: 12px;
  outline: none; font-family: monospace;
}
.pc-input:focus { border-color: var(--accent); }
.pc-link { font-size: 11px; color: var(--accent); text-decoration: none; flex-shrink: 0; }
.pc-hint { font-size: 11px; color: var(--text2); margin-bottom: 8px; }

/* ── Wizard ── */
#wizardOverlay .modal { width: 540px; }
.wz-steps { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 20px; }
.wz-step {
  flex: 1; text-align: center; padding: 10px 4px;
  font-size: 11px; color: var(--text3); font-weight: 500;
  border-bottom: 2px solid transparent; position: relative;
}
.wz-step.active { color: var(--accent); border-bottom-color: var(--accent); }
.wz-step.done { color: var(--green); }
.wz-field { margin-bottom: 12px; }
.wz-field label { display: block; font-size: 11px; color: var(--text2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
.wz-field input, .wz-field textarea, .wz-field select {
  width: 100%; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text); padding: 8px 10px;
  font-size: 13px; font-family: inherit; outline: none;
}
.wz-field input:focus, .wz-field textarea:focus, .wz-field select:focus { border-color: var(--accent); }
.wz-field select { appearance: none; }
.wz-field input[type="range"] { padding: 6px 0; }
.wz-section { margin-bottom: 14px; }
.wz-section label { display: block; font-size: 11px; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.wz-hint { font-size: 12px; color: var(--text2); margin-bottom: 12px; }
.avatar-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-opt { font-size: 22px; cursor: pointer; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 2px solid transparent; transition: border-color .15s; }
.avatar-opt:hover { border-color: var(--border2); }
.avatar-opt.selected { border-color: var(--accent); background: var(--accent)20; }
.color-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.color-opt { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s, box-shadow .15s; }
.color-opt:hover { transform: scale(1.2); }
.color-opt.selected { box-shadow: 0 0 0 3px var(--bg3), 0 0 0 5px currentColor; transform: scale(1.1); }
.provider-radio-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.provider-radio { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border2); cursor: pointer; font-size: 12px; background: var(--bg3); }
.provider-radio input { display: none; }
.provider-radio.active { border-color: var(--accent); background: var(--accent)10; }
.wizard-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); }
.review-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg3); border-radius: 10px; border: 1px solid; margin-bottom: 14px; }
.review-avatar { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.review-name { font-size: 18px; font-weight: 700; }
.review-role { font-size: 12px; color: var(--text2); }
.review-desc { font-size: 12px; color: var(--text2); margin-top: 4px; }
.review-details { font-size: 12px; display: flex; flex-direction: column; gap: 5px; }
.review-details strong { color: var(--text2); }

/* ── Management ── */
#mgmtOverlay .modal { width: 740px; }
#mgmtGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mgmt-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; text-align: center; }
.mgmt-avatar { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 10px; border: 1px solid; }
.mgmt-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.mgmt-role { font-size: 11px; color: var(--text2); margin-bottom: 8px; }
.mgmt-stats { display: flex; justify-content: center; gap: 12px; font-size: 11px; color: var(--text3); margin-bottom: 10px; }
.mgmt-actions { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn { padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; transition: opacity .15s, background .15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: .85; }
.btn-ghost { background: var(--bg3); border: 1px solid var(--border2); color: var(--text2); }
.btn-ghost:hover { color: var(--text); border-color: var(--border2); background: var(--border); }
.btn-ghost.danger:hover { color: var(--red); border-color: var(--red)40; }
.btn-sm { padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg2); color: var(--text2); cursor: pointer; font-size: 11px; font-family: inherit; transition: all .15s; }
.btn-sm:hover { color: var(--text); background: var(--bg3); border-color: var(--border2); }
.btn-sm.danger:hover { color: var(--red); }
.btn-wide { width: 100%; }

/* ════════════════════════════════════════════
   TOAST
════════════════════════════════════════════ */
#toastContainer { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px; padding: 10px 16px; font-size: 13px; box-shadow: 0 4px 20px rgba(0,0,0,.4); opacity: 0; transform: translateY(8px); transition: all .25s; pointer-events: none; min-width: 200px; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-error { border-color: var(--red)50; color: var(--red); }
.toast-info { border-color: var(--accent)50; }

/* ════════════════════════════════════════════
   MOBILE
════════════════════════════════════════════ */
@media (max-width: 900px) {
  #rightPanel { display: none; }
  #rightPanel.panel-visible { display: flex; position: fixed; right: 0; top: 0; bottom: 0; z-index: 40; }
}
@media (max-width: 768px) {
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 40;
    transform: translateX(-100%);
  }
  #sidebar.open { transform: translateX(0); }
  #sidebarToggle { display: block; }
  .ekg-wrap { display: none; }
  #mgmtGrid { grid-template-columns: 1fr 1fr; }
  #wizardOverlay .modal, #settingsOverlay .modal { width: 95vw; }
  #mgmtOverlay .modal { width: 95vw; }
}
@media (max-width: 480px) {
  #chatMessages { padding: 12px 10px; }
  .msg-bubble { max-width: calc(100vw - 80px); }
  #mgmtGrid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   SKILLS LIBRARY TAB
════════════════════════════════════════════ */
.lib-header-row {
  display: flex; gap: 8px; margin-bottom: 14px; align-items: center; flex-wrap: wrap;
}
.lib-section-title {
  font-size: 10px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .8px;
  margin: 16px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.lib-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; margin-bottom: 8px;
  transition: border-color .15s;
}
.lib-card:hover { border-color: var(--border2); }
.lib-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lib-card-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
.lib-card-info { flex: 1; min-width: 0; }
.lib-card-name { font-size: 13px; font-weight: 600; }
.lib-card-meta { font-size: 10px; color: var(--text3); margin-top: 1px; }
.lib-card-desc {
  font-size: 11px; color: var(--text2); margin: 5px 0 8px;
  line-height: 1.4; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lib-card-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.active-skill-btn { color: var(--accent) !important; border-color: var(--accent) !important; background: var(--accent)15 !important; }

/* ── Skill Editor Modal ── */
#skillEditorOverlay .modal { width: 540px; }
.se-row { display: flex; gap: 10px; }
.se-row .wz-field { flex: 1; }
.se-row .wz-field.narrow { flex: 0 0 90px; }

/* ── Management modal header adjustment ── */
#mgmtOverlay .modal-header { gap: 12px; }
.mgmt-export-btn { margin-top: 4px; width: 100%; }


/* ════════════════════════════════════════════════════════════
   PHASE 1 — BUSINESS OS ADDITIONS
   All new styles are additive. Nothing above is modified.
════════════════════════════════════════════════════════════ */

/* ── Mode Toggle ─────────────────────────────────────────── */
.mode-toggle {
  display: flex;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px;
  gap: 0;
  margin: 8px 14px;
  flex-shrink: 0;
}
.mode-opt {
  flex: 1;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: var(--text3);
  text-align: center;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.mode-opt.active {
  background: var(--accent);
  color: #fff;
}
.mode-opt:hover:not(.active) { color: var(--text2); }

/* ── Sidebar Nav ─────────────────────────────────────────── */
.sidebar-nav {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 4px;
}
.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sidebar-text3);
  text-transform: uppercase;
  padding: 6px 6px 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--sidebar-text2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: background 0.12s, color 0.12s;
  user-select: none;
}
.nav-item:hover { background: var(--bg3); color: var(--sidebar-text); }
.nav-item.active { background: var(--text); color: var(--bg); }
.nav-item.active .nav-item-icon { color: var(--accent); }
.nav-item-icon { font-size: 14px; width: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--sidebar-text2); }
.nav-item-icon svg { display: block; }

/* Hide/show sidebar nav sections by mode (CSS-safe, not main views) */
body.mode-business .builder-only { display: none !important; }
body.mode-builder  .business-only { display: none !important; }
/* NOTE: #missionControlView, #chatArea, #rightPanel display is controlled
   exclusively by JS inline styles in initModeSystem()/switchView().
   Do NOT add display rules for those elements here — !important conflicts
   with inline style.display assignments. */

/* ── Mission Control View ────────────────────────────────── */
#missionControlView {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 24px;
  gap: 20px;
  background: var(--bg);
}
/* (display controlled by JS — see note above) */

/* ── Daily Brief Card ────────────────────────────────────── */
.brief-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
}
.brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}
.brief-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.brief-date { font-size: 11px; color: var(--text3); }
.brief-toggle-btn {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
}
.brief-toggle-btn:hover { color: var(--text2); background: var(--bg3); }
.brief-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.brief-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text2);
}
.brief-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.brief-stat-label { font-size: 11px; color: var(--text3); }
.brief-body {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.brief-section { margin-bottom: 10px; }
.brief-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 5px;
}
.brief-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.brief-item-icon { flex-shrink: 0; font-size: 13px; }
.brief-collapsed .brief-body { display: none; }

/* ── MC Grid (departments + tasks + actions) ─────────────── */
.mc-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .mc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .mc-grid { grid-template-columns: 1fr; }
}
.mc-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mc-panel-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
}
.mc-panel-action {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.mc-panel-action:hover { text-decoration: underline; }

/* ── Execution Graph (Phase 25) ────────────────────────── */
.exec-graph-root          { padding: 8px 0; }
.exec-graph-project-header{ margin-bottom: 8px; }
.exec-graph-dept          { margin-bottom: 10px; }
.exec-graph-dept-header   { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.exec-graph-pod           { margin-bottom: 6px; }
.exec-graph-pod-header    { display: flex; align-items: center; gap: 6px; }
.exec-graph-task          { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.exec-graph-line          { color: var(--text3); font-size: 11px; font-family: monospace; width: 18px; flex-shrink: 0; text-align: center; }

/* ── Department Cards ────────────────────────────────────── */
.dept-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  border: 1px solid transparent;
}
.dept-card:hover { background: var(--bg3); }
.dept-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.dept-info { flex: 1; min-width: 0; }
.dept-name { font-size: 13px; font-weight: 600; color: var(--text); }
.dept-meta { font-size: 11px; color: var(--text3); }
.dept-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  background: var(--bg3);
  border-radius: 20px;
  padding: 2px 7px;
}

/* ── Task Cards ──────────────────────────────────────────── */
.task-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg3);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  position: relative;
}
.task-card:hover { border-color: var(--accent)50; background: var(--bg2); }
.task-card-header { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.task-title { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; flex: 1; }
.task-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.task-status-dot.pending     { background: var(--text3); }
.task-status-dot.in_progress { background: #f59e0b; }
.task-status-dot.review      { background: #6366f1; }
.task-status-dot.done        { background: #22c55e; }
.task-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text3);
}
.task-priority-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}
.task-priority-badge.high   { background: #ef444420; color: #ef4444; }
.task-priority-badge.medium { background: #f59e0b20; color: #f59e0b; }
.task-priority-badge.low    { background: var(--bg3); color: var(--text3); }
.task-dispatch-btn {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--accent)40;
  background: var(--accent)15;
  color: var(--accent);
  cursor: pointer;
  margin-top: 4px;
  align-self: flex-start;
}
.task-dispatch-btn:hover { background: var(--accent)30; }
.task-empty { font-size: 12px; color: var(--text3); text-align: center; padding: 12px 0; }

/* ── Quick Action Buttons ────────────────────────────────── */
.quick-actions-grid { display: flex; flex-direction: column; gap: 7px; }
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  width: 100%;
}
.quick-action-btn:hover {
  border-color: var(--accent)50;
  color: var(--text);
  background: var(--accent)08;
}
.qa-icon { font-size: 14px; flex-shrink: 0; }
.qa-label { flex: 1; }
.qa-arrow { color: var(--text3); font-size: 12px; }

/* ── Recent Activity strip ───────────────────────────────── */
.mc-activity { display: flex; flex-direction: column; gap: 6px; }
.mc-act-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--text2);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.mc-act-item:last-child { border-bottom: none; }
.mc-act-avatar {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.mc-act-text { flex: 1; }
.mc-act-time { font-size: 10px; color: var(--text3); flex-shrink: 0; }
.mc-empty { font-size: 12px; color: var(--text3); text-align: center; padding: 16px 0; }

/* ══ Onboarding Wizard — Matrix/Terminal Aesthetic ══════════ */
#onboardingOverlay {
  position: fixed; inset: 0;
  background: #000000;
  display: flex; flex-direction: column;
  z-index: 2000;
  overflow: hidden;
  font-family: 'Share Tech Mono', monospace;
}
#onboardingOverlay.hidden { display: none; }

/* Scanline + vignette overlays */
#onboardingOverlay::before {
  content: '';
  position: absolute; inset: 0; z-index: 20;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.10) 2px, rgba(0,0,0,0.10) 4px);
  pointer-events: none;
}
#onboardingOverlay::after {
  content: '';
  position: absolute; inset: 0; z-index: 19;
  background: radial-gradient(ellipse at center,
    transparent 50%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

/* ── Title Bar ── */
.gow-title-bar {
  display: flex; align-items: center;
  padding: 10px 18px;
  background: #060900;
  border-bottom: 1px solid #152800;
  flex-shrink: 0;
  z-index: 21;
}
.gow-title-dots {
  display: flex; gap: 6px; margin-right: 14px;
}
.gow-title-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #1a1a1a;
}
.gow-title-logo {
  font-family: 'VT323', monospace;
  font-size: 18px; letter-spacing: 1px;
}
.gow-title-right {
  margin-left: auto;
  font-size: 10px; color: #203800;
  letter-spacing: 2px;
  font-family: 'Share Tech Mono', monospace;
}

/* ── Step Header ── */
.gow-step-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  flex-shrink: 0;
  z-index: 21;
}
.gow-step-label {
  font-size: 10px; color: #203800;
  letter-spacing: 2px;
  font-family: 'Share Tech Mono', monospace;
}
.gow-node-progress {
  display: flex; align-items: center; gap: 0;
}
.gow-node {
  width: 8px; height: 8px; border-radius: 50%;
  background: #0a1400; border: 1px solid #152800;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.gow-node.active {
  background: #4aff00;
  border-color: #4aff00;
  box-shadow: 0 0 7px #4aff0080;
}
.gow-node-line {
  width: 20px; height: 1px;
  background: #0a1400;
}

.gow-step-divider {
  border: none;
  border-top: 1px solid #0a1400;
  margin: 0;
}

/* ── Main Content Area ── */
.gow-container {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 28px 24px 24px;
  overflow-y: auto;
  z-index: 21;
  min-height: 0;
}
.gow-inner {
  width: 100%; max-width: 640px;
  padding-bottom: 20px;
}

/* Hero logo (Step 1 only) */
.gow-hero-logo {
  text-align: center;
  margin-bottom: 32px;
  padding: 24px 20px 20px;
  border: 1px solid #152800;
  border-radius: 4px;
  background: #010300;
}
.gow-hero-logo-text {
  font-family: 'VT323', monospace;
  font-size: 52px;
  letter-spacing: 3px;
  line-height: 1;
}
.gow-hero-tagline {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  margin-top: 10px;
  line-height: 1.4;
}

/* System label */
.gow-sys-label {
  font-size: 10px; color: #203800;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-family: 'Share Tech Mono', monospace;
}

/* Headlines */
.gow-title {
  font-family: 'VT323', monospace;
  font-size: 46px; color: #4aff00;
  text-shadow: 0 0 14px #4aff0050;
  margin: 0 0 4px 0; line-height: 1.1;
  display: inline;
}
.gow-cursor {
  display: inline-block;
  width: 11px; height: 20px;
  background: #4aff00;
  margin-left: 4px;
  vertical-align: middle;
  animation: gow-blink 1s step-end infinite;
}
@keyframes gow-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.gow-subtitle {
  font-size: 11px; color: #2a4a00;
  letter-spacing: 1px;
  margin: 10px 0 28px 0; line-height: 1.6;
  font-family: 'Share Tech Mono', monospace;
}

/* ── Status Bar (bottom) ── */
.gow-status-bar {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #010300;
  border-top: 1px solid #0a1400;
  flex-shrink: 0;
  z-index: 21;
}
.gow-status-text {
  font-size: 10px; color: #152800;
  letter-spacing: 1px;
  font-family: 'Share Tech Mono', monospace;
}
.gow-status-text .gow-val {
  color: #4aff00;
}
.gow-btn-continue {
  border: 1px solid #4aff00;
  color: #4aff00;
  background: transparent;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 7px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gow-btn-continue:hover {
  background: #4aff0010;
  box-shadow: 0 0 12px #4aff0020;
}
.gow-btn-continue:disabled {
  border-color: #4aff0030;
  color: #4aff0030;
  cursor: not-allowed;
}
.gow-btn-continue:disabled:hover {
  background: transparent;
  box-shadow: none;
}

/* ── Step wrapper + animations ── */
.gow-step-wrapper { overflow: hidden; flex: 1; }
.gow-step {
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.gow-slide-out-left { transform: translateX(-100%); opacity: 0; }
.gow-slide-out-right { transform: translateX(100%); opacity: 0; }
.gow-slide-in-right { transform: translateX(30px); opacity: 0; }
.gow-slide-in-left { transform: translateX(-30px); opacity: 0; }

/* ── Cards (Step 1, 3) ── */
.gow-card-grid {
  display: grid; gap: 16px; margin-bottom: 16px;
}
.gow-card-grid-2 { grid-template-columns: 1fr 1fr; }
.gow-card-grid-5 { grid-template-columns: repeat(5, 1fr); }

.gow-card {
  background: #020400;
  border: 1px solid #152800;
  border-radius: 4px;
  padding: 24px 22px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.gow-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: transparent;
  transition: background 0.25s ease;
}
.gow-card:hover {
  border-color: #4aff0040;
  background: #030600;
}
.gow-card.selected {
  border-color: #4aff0070;
  background: #030800;
  box-shadow: 0 0 20px #4aff0008;
}
.gow-card.selected::before {
  background: linear-gradient(90deg, #4aff00, transparent);
}
/* Corner brackets on selected */
.gow-card.selected::after {
  content: '';
  position: absolute; top: 4px; left: 4px;
  width: 12px; height: 12px;
  border-top: 2px solid #4aff00;
  border-left: 2px solid #4aff00;
  pointer-events: none;
}
.gow-card-corner-br {
  position: absolute; bottom: 4px; right: 4px;
  width: 12px; height: 12px;
  border-bottom: 2px solid #4aff00;
  border-right: 2px solid #4aff00;
  display: none;
}
.gow-card.selected .gow-card-corner-br { display: block; }

.gow-card-id {
  font-size: 9px; color: #152800;
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-family: 'Share Tech Mono', monospace;
  transition: color 0.25s ease;
}
.gow-card.selected .gow-card-id { color: #4aff0040; }

.gow-card-label {
  font-family: 'VT323', monospace;
  font-size: 28px; color: #1a3800;
  margin-bottom: 6px; line-height: 1.1;
  transition: all 0.25s ease;
}
.gow-card.selected .gow-card-label {
  color: #4aff00;
  text-shadow: 0 0 10px #4aff0040;
}

.gow-card-desc {
  font-size: 10px; color: #152800;
  line-height: 1.7; letter-spacing: 0.5px;
  font-family: 'Share Tech Mono', monospace;
  transition: color 0.25s ease;
}
.gow-card.selected .gow-card-desc { color: #2a5000; }

.gow-card-tag {
  margin-top: 14px;
  font-size: 9px; letter-spacing: 1px;
  border: 1px solid #152800;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  color: #152800;
  font-family: 'Share Tech Mono', monospace;
  transition: all 0.25s ease;
}
.gow-card.selected .gow-card-tag {
  border-color: #4aff00;
  color: #4aff00;
}
.gow-card-tag-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4aff00;
  box-shadow: 0 0 6px #4aff00;
  margin-right: 6px;
  vertical-align: middle;
}

/* Small cards (team size) */
.gow-card-sm {
  padding: 18px 10px;
  text-align: center;
}
.gow-card-sm .gow-card-label {
  font-size: 22px;
}
.gow-card-sm .gow-card-id {
  font-size: 8px;
  margin-bottom: 6px;
}

/* ── Form Fields (terminal style) ── */
.gow-form { display: flex; flex-direction: column; gap: 18px; }
.gow-form-group { display: flex; flex-direction: column; gap: 5px; }
.gow-form label {
  font-size: 9px; font-weight: 400; text-transform: uppercase;
  letter-spacing: 2px; color: #203800;
  font-family: 'Share Tech Mono', monospace;
}
.gow-optional { text-transform: none; font-weight: 400; color: #152800; }
.gow-form-hint {
  font-size: 9px; color: #152800;
  letter-spacing: 1px;
  font-family: 'Share Tech Mono', monospace;
  margin-top: 2px;
}
.gow-form input,
.gow-form select,
.gow-form textarea {
  background: #020400;
  border: 1px solid #152800;
  border-radius: 3px;
  color: #4aff00;
  font-size: 13px;
  padding: 10px 14px;
  font-family: 'Share Tech Mono', monospace;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  width: 100%;
}
.gow-form input::placeholder,
.gow-form textarea::placeholder {
  color: #152800;
}
.gow-form input:focus,
.gow-form select:focus,
.gow-form textarea:focus {
  outline: none;
  border-color: #4aff0060;
}
.gow-form select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%234aff00' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.gow-form select option {
  background: #020400; color: #4aff00;
}
.gow-form textarea { resize: vertical; min-height: 80px; }

/* ── Challenges (colored chips) ── */
.gow-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px;
}
.gow-chip {
  background: transparent;
  border: 1px solid #152800;
  border-radius: 3px;
  padding: 7px 16px;
  color: #2a4400;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Share Tech Mono', monospace;
}
.gow-chip:hover {
  border-color: #4aff0050;
  color: #4aff00;
}
/* Per-challenge colors */
.gow-chip[data-value="Marketing"].selected       { border-color: #ff00aa; color: #ff00aa; background: #ff00aa14; box-shadow: 0 0 8px #ff00aa33; }
.gow-chip[data-value="Sales"].selected            { border-color: #ff4444; color: #ff4444; background: #ff444414; box-shadow: 0 0 8px #ff444433; }
.gow-chip[data-value="Operations"].selected       { border-color: #ffaa00; color: #ffaa00; background: #ffaa0014; box-shadow: 0 0 8px #ffaa0033; }
.gow-chip[data-value="Finance"].selected          { border-color: #4aff00; color: #4aff00; background: #4aff0014; box-shadow: 0 0 8px #4aff0033; }
.gow-chip[data-value="Technology"].selected       { border-color: #00d4ff; color: #00d4ff; background: #00d4ff14; box-shadow: 0 0 8px #00d4ff33; }
.gow-chip[data-value="Customer Support"].selected { border-color: #00ffcc; color: #00ffcc; background: #00ffcc14; box-shadow: 0 0 8px #00ffcc33; }
.gow-chip[data-value="Strategy"].selected         { border-color: #aa88ff; color: #aa88ff; background: #aa88ff14; box-shadow: 0 0 8px #aa88ff33; }
.gow-chip[data-value="HR / Hiring"].selected      { border-color: #ff8844; color: #ff8844; background: #ff884414; box-shadow: 0 0 8px #ff884433; }
.gow-chip[data-value="Legal"].selected            { border-color: #ffdd00; color: #ffdd00; background: #ffdd0014; box-shadow: 0 0 8px #ffdd0033; }
.gow-chip[data-value="Product"].selected          { border-color: #44ffaa; color: #44ffaa; background: #44ffaa14; box-shadow: 0 0 8px #44ffaa33; }

.gow-chip-count {
  font-size: 10px; color: #4aff0060;
  margin-bottom: 12px;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 1px;
}

/* ── Textarea with counter ── */
.gow-textarea-wrap { position: relative; }
.gow-textarea-wrap textarea { padding-bottom: 28px; }
.gow-char-counter {
  position: absolute; bottom: 8px; right: 12px;
  font-size: 10px; color: #203800;
  font-family: 'Share Tech Mono', monospace;
}

/* ── Review summary ── */
.gow-review {
  background: #020400;
  border: 1px solid #152800;
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 20px;
}
.gow-review-row {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #0a1400;
}
.gow-review-row:last-child { border-bottom: none; }
.gow-review-label {
  font-size: 9px; text-transform: uppercase;
  letter-spacing: 2px; color: #203800;
  align-self: flex-start; padding-top: 2px;
  font-family: 'Share Tech Mono', monospace;
}
.gow-review-value {
  font-size: 11px; color: #4aff00;
  text-align: right; max-width: 60%;
  font-family: 'Share Tech Mono', monospace;
}
.gow-review-goals {
  white-space: pre-wrap; line-height: 1.6;
  font-size: 11px;
}

/* ── Launch button ── */
.gow-btn-launch {
  width: 100%;
  background: transparent;
  border: 1px solid #4aff00;
  color: #4aff00;
  font-family: 'VT323', monospace;
  font-size: 24px;
  letter-spacing: 4px;
  padding: 14px;
  border-radius: 3px;
  cursor: pointer;
  text-shadow: 0 0 8px #4aff0040;
  transition: all 0.25s ease;
}
.gow-btn-launch:hover {
  background: #4aff0010;
  box-shadow: 0 0 20px #4aff0020;
}

/* ── Back button ── */
.gow-back-btn {
  background: none;
  border: 1px solid #152800;
  color: #203800;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 3px;
  transition: all 0.15s ease;
  font-family: 'Share Tech Mono', monospace;
}
.gow-back-btn:hover {
  border-color: #4aff0060;
  color: #4aff00;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .gow-title { font-size: 32px; }
  .gow-card-grid-2 { grid-template-columns: 1fr; }
  .gow-card-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .gow-card { padding: 18px 14px; }
  .gow-card-label { font-size: 22px; }
  .gow-review-row { flex-direction: column; gap: 4px; }
  .gow-review-value { text-align: left; max-width: 100%; }
  .gow-title-bar { padding: 8px 12px; }
  .gow-step-header { padding: 10px 16px; }
  .gow-container { padding: 20px 16px 0; }
  .gow-btn-launch { font-size: 18px; letter-spacing: 2px; }
}

/* ── Onboarding Terminal Animation ─────────────────────────── */
/* ── Terminal Animation (Matrix Theme) ── */
.ob-terminal {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: #000000;
  opacity: 0; pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.ob-terminal.visible {
  opacity: 1; pointer-events: all;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s 0s;
}
/* Scanlines */
.ob-terminal::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.10) 2px, rgba(0,0,0,0.10) 4px);
  pointer-events: none; z-index: 1;
}
/* Vignette */
.ob-terminal::after {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.75) 100%);
  pointer-events: none; z-index: 1;
}

.ob-terminal-box {
  position: relative; z-index: 2;
  width: 580px; max-width: 90vw;
  background: #020400;
  border: 1px solid #152800;
  border-radius: 0;
  box-shadow: 0 0 60px rgba(74, 255, 0, 0.06), 0 20px 60px rgba(0,0,0,0.6);
  overflow: hidden;
  font-family: 'Share Tech Mono', monospace;
}
/* Corner brackets on terminal box */
.ob-terminal-box::before {
  content: '';
  position: absolute; top: 4px; left: 4px;
  width: 14px; height: 14px;
  border-top: 2px solid #4aff00;
  border-left: 2px solid #4aff00;
  pointer-events: none; z-index: 3;
}
.ob-terminal-corner-br {
  position: absolute; bottom: 4px; right: 4px;
  width: 14px; height: 14px;
  border-bottom: 2px solid #4aff00;
  border-right: 2px solid #4aff00;
  pointer-events: none; z-index: 3;
}

.ob-terminal-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: #010200;
  border-bottom: 1px solid #152800;
}
.ob-terminal-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.ob-terminal-dot.red    { background: #4aff00; opacity: 0.3; }
.ob-terminal-dot.yellow { background: #4aff00; opacity: 0.5; }
.ob-terminal-dot.green  { background: #4aff00; box-shadow: 0 0 6px #4aff00; }
.ob-terminal-title {
  margin-left: 8px;
  font-size: 11px;
  color: #203800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Share Tech Mono', monospace;
}

.ob-terminal-body {
  padding: 20px 20px 12px;
  min-height: 200px; max-height: 280px;
  overflow-y: auto;
}
.ob-terminal-body::-webkit-scrollbar { width: 3px; }
.ob-terminal-body::-webkit-scrollbar-track { background: transparent; }
.ob-terminal-body::-webkit-scrollbar-thumb { background: #152800; border-radius: 0; }

.ob-terminal-line {
  font-size: 13px; line-height: 2;
  color: #4aff00;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  text-shadow: 0 0 8px rgba(74, 255, 0, 0.25);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.5px;
}
.ob-terminal-line.visible {
  opacity: 1;
  transform: translateY(0);
}
.ob-terminal-line.success {
  color: #00d4ff;
  font-weight: 400;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.35);
}

.ob-terminal-status {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  background: #010200;
  border-top: 1px solid #152800;
  font-size: 11px; color: #203800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Share Tech Mono', monospace;
}

.ob-terminal-spinner {
  width: 12px; height: 12px;
  border: 2px solid #152800;
  border-top-color: #4aff00;
  border-radius: 50%;
  animation: ob-spin 0.8s linear infinite;
}

@keyframes ob-spin {
  to { transform: rotate(360deg); }
}

/* ── Dashboard Activity Strip ────────────────────────────── */
.hm-activity-strip {
  display: flex; gap: 16px; align-items: center;
  padding: 10px 16px; margin-bottom: 12px;
  background: #0a0e14; border-radius: 8px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px; color: #00ff88;
  overflow-x: auto;
}
.hm-activity-line {
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.25);
}

/* ── Dashboard Report Cards ──────────────────────────────── */
.hm-report-card { margin-bottom: 12px; }
.hm-report-header {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; padding: 12px 16px;
  user-select: none;
}
.hm-report-header:hover { background: var(--bg2, #f8f9fa); border-radius: 8px 8px 0 0; }
.hm-report-toggle {
  font-size: 11px; color: var(--text3, #999);
  transition: transform 0.2s ease;
}
.hm-report-body {
  padding: 0 16px 16px;
  max-height: 600px;
  overflow-y: auto;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}
.hm-report-collapsed {
  max-height: 0; padding-top: 0; padding-bottom: 0;
  overflow: hidden; opacity: 0;
}
.hm-report-content {
  font-size: 13px; line-height: 1.7;
  color: var(--text2, #555);
}
.hm-report-content h2, .hm-report-content h3, .hm-report-content h4 {
  color: var(--text1, #222); margin: 12px 0 6px; font-size: 14px;
}
.hm-report-bullet {
  padding-left: 12px; margin: 2px 0;
}
.hm-mission-editable {
  border: 1px dashed var(--border, #ddd);
  border-radius: 6px; padding: 12px;
  min-height: 60px; outline: none;
}
.hm-mission-editable:focus {
  border-color: var(--accent, #5b5fc7);
  box-shadow: 0 0 0 2px rgba(91, 95, 199, 0.15);
}
.hm-mission-hint {
  font-size: 11px; color: var(--text3, #999);
  margin-top: 6px; font-style: italic;
}

/* ── Suggested Task Cards ────────────────────────────────── */
.hm-suggested-tasks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; padding: 0 16px 16px;
}
.hm-task-card {
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 10px; padding: 14px;
  background: var(--bg1, #fff);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hm-task-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.hm-task-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.hm-task-dept-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--accent, #5b5fc7); color: #fff;
  padding: 2px 8px; border-radius: 4px;
}
.hm-task-complexity {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hm-complexity-simple  { color: #22c55e; }
.hm-complexity-moderate { color: #eab308; }
.hm-complexity-complex  { color: #ef4444; }
.hm-task-card-title {
  font-size: 14px; font-weight: 600; color: var(--text1, #222);
  margin-bottom: 6px; line-height: 1.3;
}
.hm-task-card-outcome {
  font-size: 12px; color: var(--text3, #888);
  margin-bottom: 10px; line-height: 1.4;
}
.hm-task-execute-btn { width: 100%; }

/* ── Plan Gate Upgrade Modal ─────────────────────────────── */
.pg-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
}
.pg-overlay.hidden { display: none; }
.pg-modal {
  background: var(--bg1, #fff); border-radius: 16px;
  padding: 32px; max-width: 720px; width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  position: relative;
}
.pg-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 24px;
  color: var(--text3, #999); cursor: pointer;
}
.pg-close:hover { color: var(--text1, #222); }
.pg-header { text-align: center; margin-bottom: 24px; }
.pg-icon { font-size: 40px; margin-bottom: 8px; }
.pg-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.pg-subtitle { font-size: 14px; color: var(--text3, #888); margin: 0 0 8px; }
.pg-reason { font-size: 13px; color: #ef4444; margin: 0; font-style: italic; }

.pg-plans {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 20px;
}
.pg-plan {
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 12px; padding: 20px; text-align: center;
  position: relative; transition: box-shadow 0.15s ease;
}
.pg-plan:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.pg-plan-popular {
  border-color: var(--accent, #5b5fc7);
  box-shadow: 0 0 0 2px rgba(91, 95, 199, 0.2);
}
.pg-plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent, #5b5fc7); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 10px;
  border-radius: 10px; white-space: nowrap;
}
.pg-plan-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.pg-plan-price { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.pg-plan-price span { font-size: 14px; font-weight: 400; color: var(--text3, #888); }
.pg-plan-features {
  list-style: none; padding: 0; margin: 0 0 16px;
  font-size: 12px; color: var(--text2, #666);
}
.pg-plan-features li { padding: 4px 0; }
.pg-plan-features li::before { content: '✓ '; color: #22c55e; font-weight: 700; }
.pg-plan-btn {
  width: 100%; padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--border, #ddd); background: var(--bg1, #fff);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.15s ease;
}
.pg-plan-btn:hover { background: var(--bg2, #f5f5f5); }
.pg-plan-btn-primary {
  background: var(--accent, #5b5fc7); color: #fff; border-color: var(--accent, #5b5fc7);
}
.pg-plan-btn-primary:hover { opacity: 0.9; }
.pg-footer {
  text-align: center; font-size: 12px; color: var(--text3, #999); margin: 0;
}

@media (max-width: 600px) {
  .pg-plans { grid-template-columns: 1fr; }
}

/* ── Task Create Modal ───────────────────────────────────── */
#taskCreateOverlay .modal { width: 500px; }
.tc-row { display: flex; gap: 10px; }
.tc-row .wz-field { flex: 1; }

/* ── View header in Mission Control ─────────────────────── */
#mcHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 4px;
}
.mc-greeting { font-size: 20px; font-weight: 700; color: var(--text); }
.mc-company  { font-size: 13px; color: var(--text3); margin-top: 2px; }
.mc-header-actions { display: flex; gap: 8px; }

/* ════════════════════════════════════════════
   PHASE 2 — REPORTS VIEW
════════════════════════════════════════════ */
#reportsView {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 32px;
  flex-direction: column;
  gap: 0;
}

/* Progress bar */
.rpt-bar-bg {
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
}
.rpt-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .4s ease;
  min-width: 2px;
}

/* Report row card (dept/agent with bar) */
.rpt-row {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 8px;
  cursor: default !important;
}
.rpt-row:hover { background: var(--bg2) !important; }

/* ════════════════════════════════════════════
   FEEDBACK VIEW — output review & outcome
════════════════════════════════════════════ */
#feedbackView {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.fb-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fb-filter-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.fb-filter-btn:hover { color: var(--text); background: var(--bg2); }
.fb-filter-btn.active {
  color: var(--accent);
  background: var(--accent)14;
  border-color: var(--accent)50;
}
.fb-card { margin-bottom: 12px; }
.fb-meta {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fb-skill {
  padding: 2px 6px;
  background: var(--bg3);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
}
.fb-preview {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-notes {
  font-size: 12px;
  color: var(--text2);
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: 6px;
  margin-bottom: 8px;
  border-left: 3px solid var(--accent);
}
.fb-score { font-size: 11px; color: var(--text3); margin-bottom: 8px; }
.fb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.fb-actions .btn-sm { padding: 4px 10px; font-size: 11px; }
.fb-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 4px;
  margin-right: 8px;
}
.fb-badge-pending { background: var(--bg3); color: var(--text3); }
.fb-badge-approved { background: #22c55e20; color: #22c55e; }
.fb-badge-rejected { background: #f59e0b20; color: #f59e0b; }
.fb-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text3);
}

/* ════════════════════════════════════════════
   PHASE 2 — DEPT DETAIL VIEW
════════════════════════════════════════════ */
.dept-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.dept-back-btn:hover { color: var(--text); background: var(--border); }

/* ════════════════════════════════════════════
   PHASE 3B — MESSAGE HIGHLIGHT (viewOutput scroll target)
════════════════════════════════════════════ */
@keyframes msgHighlight {
  0%   { box-shadow: 0 0 0 3px var(--accent); background: var(--accent)14; }
  70%  { box-shadow: 0 0 0 3px var(--accent); background: var(--accent)14; }
  100% { box-shadow: none; background: transparent; }
}
.message-highlight {
  border-radius: 10px;
  animation: msgHighlight 2s ease forwards;
}

/* ════════════════════════════════════════════
   PHASE 4 — AI BRIEF CONTROLS
════════════════════════════════════════════ */
.brief-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: var(--accent)18;
  border: 1px solid var(--accent)40;
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s;
}
.brief-ai-btn:hover   { background: var(--accent)30; }
.brief-ai-btn:disabled { opacity: .5; cursor: default; }

.brief-ai-generate-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent)14;
  border: 1px solid var(--accent)40;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s;
}
.brief-ai-generate-btn:hover { background: var(--accent)28; }

.brief-ai-loading {
  display: flex;
  align-items: center;
  padding: 10px 0 6px;
}

/* ════════════════════════════════════════════
   PHASE 4 — SUGGESTED ACTIONS PANEL
════════════════════════════════════════════ */
.suggestion-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.suggestion-card:last-child { border-bottom: none; }

.suggestion-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.suggestion-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  min-width: 0;
}

.suggestion-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.suggestion-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent)14;
  border: 1px solid var(--accent)40;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.suggestion-btn:hover { background: var(--accent)28; }

.suggestion-dismiss {
  padding: 3px 7px;
  font-size: 12px;
  color: var(--text3);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  transition: color .15s, border-color .15s;
}
.suggestion-dismiss:hover { color: var(--text); border-color: var(--text3); }

/* ════════════════════════════════════════════
   PHASE 4 — AGENT ACTIVITY STATUS DOT
════════════════════════════════════════════ */
.agent-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

/* ════════════════════════════════════════════
   PHASE 5 — COO BRIEF PANEL
════════════════════════════════════════════ */
.coo-brief-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color .2s;
}
.coo-brief-card:hover { border-color: var(--border2); }

.coo-brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}

.coo-brief-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .01em;
}

.coo-source-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg3);
  color: var(--text3);
  border: 1px solid var(--border);
}
.coo-source-ai {
  background: var(--accent)14;
  color: var(--accent);
  border-color: var(--accent)40;
}

.coo-refresh-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.coo-refresh-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border2); }
.coo-refresh-btn:disabled { opacity: .5; cursor: default; }

.coo-collapse-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  transition: color .15s;
}
.coo-collapse-btn:hover { color: var(--text2); }

/* Collapsed state — hide body */
.coo-brief-card.coo-collapsed .coo-brief-content { display: none; }

/* ── Standup chips row ───────────────────────────────────── */
.coo-standup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.standup-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--bg3);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.standup-chip:hover          { background: var(--bg2); border-color: var(--border2); }
.standup-chip-active         { border-color: #22c55e40; }
.standup-chip-blocked        { border-color: #ef444440; }
.standup-chip-idle           { opacity: .65; }

.standup-chip-name   { color: var(--text2); font-weight: 500; }
.standup-chip-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── COO Brief body ──────────────────────────────────────── */
#cooBriefBody {
  padding: 14px 18px 16px;
}

.coo-brief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}

.coo-brief-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coo-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 5px;
}

.coo-section-item {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  padding: 1px 0;
}

.coo-brief-ts {
  font-size: 11px;
  color: var(--text3);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.coo-loading {
  display: flex;
  align-items: center;
  padding: 14px 0 8px;
}

/* Mobile: collapse to single column */
@media (max-width: 600px) {
  .coo-brief-grid { grid-template-columns: 1fr; }
}

/* ── Utility ─────────────────────────────────────────────── */
.status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-badge.pending     { background: var(--bg3); color: var(--text3); }
.status-badge.in_progress { background: #f59e0b20; color: #f59e0b; }
.status-badge.review      { background: #6366f120; color: #6366f1; }
.status-badge.done        { background: #22c55e20; color: #22c55e; }

/* ════════════════════════════════════════════
   PHASE 6A — AUTONOMOUS ACTIONS PANEL
════════════════════════════════════════════ */
.auto-panel {
  grid-column: 1 / -1;
}

.auto-task-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auto-task-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.auto-task-card:last-child { border-bottom: none; }
.auto-task-card:hover      { background: var(--bg3); }

/* Why row — badge + reason */
.auto-task-why {
  display: flex;
  align-items: center;
  gap: 7px;
}

.auto-task-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f59e0b18;
  color: #f59e0b;
  border: 1px solid #f59e0b30;
  white-space: nowrap;
  flex-shrink: 0;
}

.auto-task-reason {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  line-height: 1.4;
}

/* Task title */
.auto-task-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

/* Meta row */
.auto-task-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text3);
}

.auto-task-age {
  margin-left: auto;
  font-size: 10px;
  color: var(--text3);
}

/* Action buttons row */
.auto-task-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.auto-task-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.auto-task-btn:hover { background: var(--bg2); color: var(--text); }

.auto-dispatch-btn {
  background: var(--accent)14;
  color: var(--accent);
  border-color: var(--accent)40;
}
.auto-dispatch-btn:hover { background: var(--accent)28; }

.auto-dismiss-btn { color: var(--text3); }
.auto-dismiss-btn:hover { color: var(--red); border-color: var(--red)40; }

/* Mode selector in panel header */
.auto-mode-select {
  font-size: 11px;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  cursor: pointer;
}
.auto-mode-select:focus { outline: none; border-color: var(--accent); }

/* Auto task count badge */
.auto-task-count-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f59e0b18;
  color: #f59e0b;
  border: 1px solid #f59e0b30;
}

/* ── Phase 6B: dispatch status badge variants ── */

/* Default: ⚡ Auto Created (amber, same as existing .auto-task-badge) */
.auto-task-badge.adp-created {
  background: #f59e0b18;
  color: #f59e0b;
  border-color: #f59e0b30;
}

/* 🚀 Auto Dispatched (green) */
.auto-task-badge.adp-dispatched {
  background: #22c55e18;
  color: #22c55e;
  border-color: #22c55e40;
}

/* ⏸ Held for Review (blue/info) */
.auto-task-badge.adp-held {
  background: #00c4b418;
  color: #00c4b4;
  border-color: #00c4b440;
}

/* Block reason line shown beneath the badge row */
.auto-task-block-reason {
  font-size: 11px;
  color: #00c4b4;
  margin-top: 2px;
  padding: 2px 0;
  opacity: .85;
}

/* Review button (neutral, existing auto-review-btn kept for compat) */
.auto-review-btn { color: var(--text2); }
.auto-review-btn:hover { color: var(--text); background: var(--bg2); }

/* ── Phase 6B: Pause / Resume button ── */
.auto-pause-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid #f59e0b50;
  background: #f59e0b14;
  color: #f59e0b;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.auto-pause-btn:hover {
  background: #f59e0b28;
}
/* When paused — resume button shows in green */
.auto-pause-btn.adp-resume {
  border-color: #22c55e50;
  background: #22c55e14;
  color: #22c55e;
}
.auto-pause-btn.adp-resume:hover {
  background: #22c55e28;
}

/* ══════════════════════════════════════════════════════
   Phase 6C: Autonomy Usability Layer
══════════════════════════════════════════════════════ */

/* ── Provenance line on auto-task cards ── */
.auto-task-provenance {
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
  letter-spacing: .02em;
  opacity: .9;
}

/* ── ⚙ Settings button in the autonomous panel header ── */
.auto-settings-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.auto-settings-btn:hover {
  background: var(--bg2);
  color: var(--text);
}

/* ── Auto-dispatch settings overlay form ── */

/* Each toggle / option row */
.ads-toggle-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.ads-toggle-row:last-of-type {
  border-bottom: none;
}

/* Row that contains checkbox + label text inline */
.ads-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

/* Small explanatory text under each toggle */
.ads-toggle-hint {
  font-size: 11px;
  color: var(--text3);
  margin: 0;
  padding-left: 22px; /* indent under checkbox */
  line-height: 1.5;
}

/* ── Trigger allowlist checkboxes ── */
.ads-trigger-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: 8px;
  border: 1px solid var(--border);
  max-height: 180px;
  overflow-y: auto;
}

/* Each trigger row */
.ads-trigger-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}
.ads-trigger-row input[type="checkbox"] {
  margin-top: 1px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* Trigger label text */
.ads-trigger-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ads-trigger-label small {
  font-size: 10px;
  color: var(--text3);
}

/* Dim unchecked triggers slightly */
.ads-trigger-row:has(input:not(:checked)) .ads-trigger-label {
  opacity: .65;
}

/* Fallback for browsers without :has() */
.ads-trigger-off {
  opacity: .65;
}

/* ═══════════════════════════════════════════════
   AUTH OVERLAY  —  Terminal Matrix Theme
═══════════════════════════════════════════════ */

#authOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000000;
  font-family: 'Share Tech Mono', monospace;
}
/* Scanlines */
#authOverlay::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.10) 2px, rgba(0,0,0,0.10) 4px);
  pointer-events: none;
}
/* Vignette */
#authOverlay::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at center,
    transparent 50%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
#authOverlay.hidden { display: none; }

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 40px 44px;
  background: #020400;
  border: 1px solid #152800;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 2;
}

/* Corner brackets */
.auth-corner {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
}
.auth-corner-tl { top: 4px; left: 4px; border-top: 2px solid #4aff00; border-left: 2px solid #4aff00; }
.auth-corner-bl { bottom: 4px; left: 4px; border-bottom: 2px solid #4aff00; border-left: 2px solid #4aff00; }
.auth-corner-tr { top: 4px; right: 4px; border-top: 2px solid #ff00aa; border-right: 2px solid #ff00aa; }
.auth-corner-br { bottom: 4px; right: 4px; border-bottom: 2px solid #ff00aa; border-right: 2px solid #ff00aa; }

/* Logo block */
.auth-logo-block {
  text-align: center;
  margin-bottom: 0;
}
.auth-logo-text {
  font-family: 'VT323', monospace;
  font-size: 48px;
  letter-spacing: 2px;
  line-height: 1;
}
.auth-tagline {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  margin-top: 8px;
  line-height: 1.4;
  color: #2a4400;
}
.auth-tag-bos { color: #4aff0060; }
.auth-tag-r   { color: #00d4ff60; }
.auth-tag-ai  { color: #ff00aa60; }
.auth-tag-sep { color: #1a3300; }

/* Divider */
.auth-divider {
  width: 100%;
  height: 1px;
  background: #0a1400;
  margin: 20px 0;
}

/* System label */
.auth-sys-label {
  font-size: 10px;
  color: #203800;
  letter-spacing: 2px;
  margin-bottom: 14px;
  align-self: flex-start;
}

/* Form */
#authLoginForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#authEmail {
  width: 100%;
  padding: 12px 16px;
  border-radius: 3px;
  border: 1px solid #152800;
  background: #010300;
  color: #4aff00;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
#authEmail::placeholder { color: #1a3300; }
#authEmail:focus { border-color: #4aff0050; }

#authSubmitBtn {
  width: 100%;
  padding: 12px;
  border-radius: 3px;
  background: transparent;
  border: 1px solid #4aff0050;
  color: #4aff00;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all .2s ease;
}
#authSubmitBtn:hover {
  border-color: #4aff00;
  text-shadow: 0 0 8px #4aff0040;
  background: #4aff0008;
}
#authSubmitBtn:disabled {
  opacity: .3;
  cursor: default;
}
#authSubmitBtn:disabled:hover {
  border-color: #4aff0050;
  text-shadow: none;
  background: transparent;
}

.auth-error {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #ff4444;
  text-align: left;
  width: 100%;
  margin-top: 6px;
  letter-spacing: 1px;
}
.auth-error.hidden { display: none; }

#authSent {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
#authSent.hidden { display: none; }

.auth-sent-icon {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #4aff00;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #4aff0040;
}

.auth-sent-msg {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #2a5000;
  line-height: 1.7;
}

.auth-sent-hint {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: #152800;
  letter-spacing: 1px;
}

#authResendBtn {
  background: transparent;
  border: 1px solid #152800;
  color: #203800;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .2s ease;
}
#authResendBtn:hover {
  border-color: #4aff0060;
  color: #4aff00;
}

/* Bottom line */
.auth-bottom-line {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: #152800;
  letter-spacing: 2px;
  margin-top: 20px;
  z-index: 2;
}

/* Logout button (in sidebar footer or header) */
#logoutBtn {
  font-size: 12px;
  color: var(--text3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
#logoutBtn:hover { color: var(--text); }

/* toggle form off when "sent" screen is showing */
#authLoginForm.hidden { display: none; }


/* ════════════════════════════════════════════════════════════
   UI REFINEMENT PASS — premium feel, zero breakage
   All rules here are additive overrides.
════════════════════════════════════════════════════════════ */

/* ── Extra design tokens (overridden by :root above) ─────── */
/* Kept for backward compat — values now come from :root */

/* ── Sidebar — dark premium ──────────────────────────────── */
#sidebar {
  background: var(--sidebar-bg);
}
.sidebar-header {
  padding: 18px 14px 14px;
}
.logo-mark {
  font-size: 22px;
}
.logo-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1px;
}
.logo-text span { color: var(--accent); }

/* ── Mode toggle — slightly more room ───────────────────── */
.mode-toggle { margin: 10px 12px; padding: 3px; }
.mode-opt    { padding: 5px 14px; font-size: 11.5px; }

/* ── Nav items — left accent bar on active ───────────────── */
.sidebar-nav { padding: 8px 10px 6px; }
.nav-item {
  padding: 8px 10px 8px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  margin: 1px 0 1px -10px;
  transition: background .12s, color .12s, border-color .12s;
}
.nav-item:hover:not(.active) {
  border-left-color: var(--sidebar-border);
  color: var(--sidebar-text);
  background: var(--bg3);
}
.nav-item.active {
  background: var(--text);
  border-left-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.nav-item.active .nav-item-icon { color: var(--accent); }

/* ── Sidebar footer ──────────────────────────────────────── */
.sidebar-footer { padding: 10px 12px; gap: 6px; }
#logoutBtn {
  padding: 5px 10px;
  border-radius: 6px;
  letter-spacing: .01em;
  transition: color .15s, background .15s;
}
#logoutBtn:hover { background: var(--bg3); color: var(--text2); }

/* ── Buttons — clean, flat ────────────────────────────────── */
.btn-primary {
  letter-spacing: .01em;
  transition: background .15s;
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-ghost {
  background: transparent;
  transition: all .15s;
}

/* ── Mission Control — header ────────────────────────────── */
#mcHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.mc-head-left { display: flex; flex-direction: column; gap: 4px; }
.mc-greeting {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.025em;
  line-height: 1.2;
}
.mc-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mc-company {
  font-size: 13px;
  color: var(--text3);
  font-weight: 400;
}
.mc-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(34,197,94,.6);
  animation: livePulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px rgba(34,197,94,.6); }
  50%       { opacity: .55; box-shadow: 0 0 2px rgba(34,197,94,.2); }
}
.mc-live-label {
  font-size: 11px;
  color: var(--green);
  font-weight: 500;
  letter-spacing: .01em;
}
.mc-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  flex-shrink: 0;
}

/* ── Cards — flat ─────────────────────────────────────── */
.mc-panel {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: border-color .15s;
}
.mc-panel:hover { border-color: var(--border2); }

.brief-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* ── Panel titles — readable, not shouted ────────────────── */
.mc-panel-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--text2);
  text-transform: uppercase;
}

/* ── Task cards — clean hover ─────────────────────────────── */
.task-card {
  transition: border-color .15s;
}
.task-card:hover {
  border-color: var(--border2);
}

/* ── Dept cards — show border on hover ───────────────────── */
.dept-card:hover { border-color: var(--border2); }

/* ── Empty states — human, not cold ──────────────────────── */
.mc-empty {
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  padding: 20px 12px;
  line-height: 1.7;
}
.mc-empty-hint {
  font-size: 11px;
  color: var(--text3);
  opacity: .7;
}
.task-empty {
  padding: 20px 8px;
  line-height: 1.7;
  font-size: 12px;
}
.empty-mini {
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  padding: 28px 14px;
  line-height: 1.7;
}
.empty-state span {
  opacity: .5;
}

/* ── Auth overrides removed — terminal theme in main block ── */

/* ── Right panel tabs ────────────────────────────────────── */
.right-tab-btn         { font-size: 12px; letter-spacing: .02em; }
.right-tab-btn.active  { color: var(--text); }

/* ── Stat numbers — tabular numerals ─────────────────────── */
.brief-stat-num {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

/* ── Brief card top accent ───────────────────────────────── */
#briefCard {
  border-top: 2px solid rgba(99,102,241,.4);
}


/* ════════════════════════════════════════════════════════════
   COO COMMAND CENTER
   The CEO-facing input where high-level requests become plans.
════════════════════════════════════════════════════════════ */

.coo-command-center {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-top: 2px solid rgba(99,102,241,.5);
  border-radius: 14px;
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coo-cmd-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.coo-cmd-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.coo-cmd-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.coo-cmd-subtitle {
  font-size: 12px;
  color: var(--text3);
  margin-top: 1px;
}

/* ── Command input row ───────────────────────────────────── */
.coo-input-row {
  display: flex;
  gap: 8px;
}
.coo-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.coo-input::placeholder { color: var(--text3); }
.coo-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.coo-input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Command Center status (Phase 26) ──────────────────── */
.cmd-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cmd-status-active {
  background: var(--accent);
  animation: cmd-pulse 1.2s infinite;
}
.cmd-status-done { background: #22c55e; }
.cmd-status-text {
  font-size: 12px;
  color: var(--text3);
}
@keyframes cmd-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
.coo-send-btn {
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s, box-shadow .2s, transform .1s;
  box-shadow: 0 2px 12px rgba(99,102,241,.28);
}
.coo-send-btn:hover:not(:disabled) {
  opacity: .9;
  box-shadow: 0 4px 20px rgba(99,102,241,.4);
  transform: translateY(-1px);
}
.coo-send-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Executive Command Console (Phase 32) ────────────────── */

.exc-console {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.exc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.exc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exc-logo {
  font-size: 24px;
  color: var(--accent);
  line-height: 1;
}

.exc-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}

.exc-subtitle {
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 1px;
}

.exc-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.exc-status-chip {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg3);
  color: var(--text3);
  white-space: nowrap;
}

.exc-chip-warn {
  background: rgba(234,179,8,.12);
  color: #eab308;
}

.exc-chip-crit {
  background: rgba(239,68,68,.12);
  color: #ef4444;
}

.exc-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.exc-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.exc-input::placeholder { color: var(--text3); }

.exc-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

.exc-input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.exc-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.exc-btn-primary {
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s, box-shadow .2s, transform .1s;
  box-shadow: 0 2px 16px rgba(99,102,241,.3);
}

.exc-btn-primary:hover:not(:disabled) {
  opacity: .92;
  box-shadow: 0 4px 24px rgba(99,102,241,.45);
  transform: translateY(-1px);
}

.exc-btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.exc-btn-secondary {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border2);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}

.exc-btn-secondary:hover:not(:disabled) {
  background: var(--bg2);
  border-color: var(--accent);
  color: var(--text);
}

.exc-btn-secondary:disabled { opacity: .45; cursor: not-allowed; }

.exc-history {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.exc-history-label {
  color: var(--text3);
}

.exc-history-chip {
  padding: 2px 8px;
  background: var(--bg3);
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  transition: background .15s;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exc-history-chip:hover {
  background: var(--bg2);
  color: var(--text);
}

/* ── Plan area (loading / plan / error) ──────────────────── */
#cooPlanArea {
  margin-top: 2px;
}

/* Loading state */
.coo-plan-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  color: var(--text3);
  font-size: 13px;
}
.coo-plan-thinking-label em {
  color: var(--text2);
  font-style: normal;
}

/* Plan card */
.coo-plan {
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg3);
}
.coo-plan-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--bg2);
}
.coo-plan-objective {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -.01em;
}
.coo-plan-depts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.plan-dept-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(99,102,241,.12);
  color: var(--accent);
  border: 1px solid rgba(99,102,241,.2);
}
.coo-plan-summary {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
}

/* COO rationale — why these departments/skills were chosen */
.coo-plan-rationale {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.55;
  padding: 8px 10px;
  background: rgba(99,102,241,.06);
  border-left: 2px solid rgba(99,102,241,.35);
  border-radius: 0 4px 4px 0;
  margin: 4px 0;
}

/* Approval reason — key risk/decision for CEO review */
.coo-plan-approval-reason {
  font-size: 11.5px;
  color: #f59e0b;
  line-height: 1.5;
  padding: 6px 10px;
  background: rgba(245,158,11,.08);
  border-left: 2px solid rgba(245,158,11,.5);
  border-radius: 0 4px 4px 0;
  margin: 4px 0;
}

/* Plan steps */
.coo-plan-steps {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-step {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  transition: border-color .15s;
}
.plan-step:hover { border-color: var(--border2); }
.plan-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.plan-step-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-step-task {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.plan-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.plan-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.plan-tag-dept  { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }
.plan-tag-skill { background: rgba(99,102,241,.1); color: var(--accent); border: 1px solid rgba(99,102,241,.2); }
.plan-tag-pri.plan-pri-high   { background: rgba(239,68,68,.12);   color: #ef4444; border: 1px solid rgba(239,68,68,.2); }
.plan-tag-pri.plan-pri-medium { background: rgba(245,158,11,.12);  color: #f59e0b; border: 1px solid rgba(245,158,11,.2); }
.plan-tag-pri.plan-pri-low    { background: var(--bg3);            color: var(--text3); border: 1px solid var(--border); }
.plan-step-desc {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
}
.plan-step-output {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  opacity: .8;
}

/* Plan action buttons */
.coo-plan-actions {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

/* Error state */
.coo-plan-error {
  padding: 12px 4px;
  font-size: 12px;
  color: var(--red);
}

/* ══════════════════════════════════════════════
   ACTIVE PODS PANEL  —  Phase 9
   Pod cards follow the same mc-panel pattern as
   task cards. No new layout primitives needed.
══════════════════════════════════════════════ */

/* Panel badge (pod count chip in header) */
.mc-panel-badge {
  font-size: 11px;
  font-weight: 600;
  background: rgba(99,102,241,.15);
  color: var(--accent);
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: 4px;
}

.pod-card {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.pod-card:last-child { border-bottom: none; }
.pod-card:hover      { background: rgba(99,102,241,.04); }

.pod-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.pod-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text1);
  line-height: 1.35;
}

.pod-status-chip {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}
.pod-status-active   { background: rgba(16,185,129,.15);  color: #10b981; }
.pod-status-complete { background: rgba(99,102,241,.15);  color: var(--accent); }
.pod-status-archived { background: rgba(100,100,120,.12); color: var(--text3); }

.pod-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pod-dept-chip {
  font-size: 11px;
  background: var(--surface2);
  padding: 2px 7px;
  border-radius: 20px;
  color: var(--text2);
}

.pod-exec-chip {
  font-size: 11px;
  background: rgba(99,102,241,.1);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 20px;
}

.pod-task-count {
  font-size: 11px;
  color: var(--text3);
  margin-left: auto;
}

.pod-objective {
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.45;
  margin-top: 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Pod card v2 layout ─────────────────────── */
.pod-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 5px;
}

.pod-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pod-dept-icon {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.pod-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pod-skill-chip {
  font-size: 11px;
  background: rgba(16,185,129,.1);
  color: #10b981;
  padding: 2px 7px;
  border-radius: 20px;
}

.pod-age {
  font-size: 11px;
  color: var(--text3);
  margin-left: auto;
}

.pod-output {
  font-size: 11.5px;
  color: var(--accent);
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.85;
}

.pod-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  animation: pod-pulse 2s ease-in-out infinite;
}

@keyframes pod-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.85); }
}

/* ═══════════════════════════════════════════════════════
   OUTCOME CONTROLS  (Phase 12)
   Inline review row shown on task cards that have outputs.
═══════════════════════════════════════════════════════ */

.outcome-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* Base outcome button — compact, pill-shaped */
.outcome-btn {
  padding: 2px 9px;
  border-radius: 20px;
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  line-height: 1.6;
}
.outcome-btn:hover { opacity: .8; }

/* Approve — green */
.outcome-approve {
  background: #16a34a22;
  color: #16a34a;
  border: 1px solid #16a34a44;
}
.outcome-approve:hover { background: #16a34a33; }

/* Reject — red */
.outcome-reject {
  background: #dc262622;
  color: #dc2626;
  border: 1px solid #dc262644;
}
.outcome-reject:hover { background: #dc262633; }

/* Score — accent */
.outcome-score {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
}
.outcome-score:hover { background: var(--bg2); }

/* Mark used */
.outcome-used-btn {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
}
.outcome-used-btn:hover { background: var(--bg2); }

/* Status badges — inline chips */
.outcome-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.outcome-pending  { background: #71717a22; color: #71717a; border: 1px solid #71717a44; }
.outcome-approved { background: #16a34a22; color: #16a34a; border: 1px solid #16a34a44; }
.outcome-rejected { background: #dc262622; color: #dc2626; border: 1px solid #dc262644; }
.outcome-used     { background: #7c3aed22; color: #7c3aed; border: 1px solid #7c3aed44; }

/* ═══════════════════════════════════════════════════════
   POD METRICS ROW  (Phase 12)
   Compact metrics bar at the bottom of each pod card.
═══════════════════════════════════════════════════════ */

.pod-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

.pod-metric {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
}

.pod-metric-approved {
  background: #16a34a22;
  color: #16a34a;
  border-color: #16a34a44;
}

.pod-metric-rejected {
  background: #dc262622;
  color: #dc2626;
  border-color: #dc262644;
}

/* ═══════════════════════════════════════════
   COMPANY EVOLUTION PANEL  (Phase 36)
═══════════════════════════════════════════ */

.evo-panel {
  border-top: 3px solid var(--accent);
}

/* Slider navigation row */
.evo-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.evo-nav-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  line-height: 1;
}
.evo-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.evo-nav-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.evo-slider {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
  cursor: pointer;
}
.evo-time-label {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  min-width: 120px;
  text-align: right;
}

/* Metrics grid */
.evo-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
.evo-metric-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.evo-metric-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.evo-metric-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Metric row (used in projection) */
.evo-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 11px;
  color: var(--text2);
}
.evo-metric-val {
  font-weight: 600;
  color: var(--text);
}
.evo-risk-low    { color: #22c55e; }
.evo-risk-medium { color: #eab308; }
.evo-risk-high   { color: #ef4444; }

/* Project chips */
.evo-proj-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.evo-proj-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
}
.evo-proj-name {
  color: var(--text);
  font-weight: 500;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evo-proj-pct {
  color: var(--accent);
  font-weight: 700;
  font-size: 10px;
}
.evo-proj-health {
  color: #ef4444;
  font-size: 10px;
}

/* Nearby events + projection sections */
.evo-events,
.evo-projection {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 4px;
}
.evo-events-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  margin-bottom: 6px;
}
.evo-event-row {
  font-size: 11px;
  color: var(--text2);
  padding: 2px 0;
}

/* ═══════════════════════════════════════════
   NOTIFICATIONS  (Phase 37)
═══════════════════════════════════════════ */

/* Bell button in MC header */
.notif-bell-btn {
  position: relative;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.notif-bell-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* Dropdown panel */
.notif-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  max-height: 480px;
  overflow-y: auto;
  margin-bottom: 8px;
  flex-shrink: 0;
  width: 100%;
  max-width: 520px;
}
.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.notif-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
}
.notif-panel-actions {
  display: flex;
  gap: 6px;
}
.notif-action-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 10px;
  cursor: pointer;
  padding: 2px 6px;
}
.notif-action-btn:hover {
  text-decoration: underline;
}

/* Notification list */
.notif-list {
  overflow-y: auto;
  max-height: 300px;
  padding: 4px 0;
}
.notif-item {
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.notif-item:hover {
  background: var(--bg3);
}
.notif-item:last-child {
  border-bottom: none;
}
.notif-item-read {
  opacity: 0.5;
}
.notif-item-icon {
  font-size: 14px;
  width: 22px;
  flex-shrink: 0;
  text-align: center;
  padding-top: 1px;
}
.notif-item-body {
  flex: 1;
  min-width: 0;
}
.notif-item-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.notif-item-detail {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.3;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-item-time {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}
.notif-empty {
  padding: 20px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text3);
}

/* ═══════════════════════════════════════════
   ACCESS CONTROL  (Phase 38)
═══════════════════════════════════════════ */

.ac-role-select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  min-width: 60px;
}
.ac-role-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}
}

/* ═══════════════════════════════════════════
   WORKSPACE SWITCHER  (Phase 39)
═══════════════════════════════════════════ */

.ws-switcher-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .15s, background .15s;
}
.ws-switcher-btn:hover {
  border-color: var(--accent);
  background: var(--bg2);
}

/* Popup menu */
.ws-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  min-width: 200px;
  max-width: 280px;
  padding: 6px 0;
  animation: ws-menu-in .12s ease-out;
}
@keyframes ws-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ws-menu-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 6px 14px 4px;
}
.ws-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text2);
  transition: background .1s;
}
.ws-menu-item:hover {
  background: var(--bg3);
  color: var(--text);
}
.ws-menu-item-active {
  color: var(--accent);
  font-weight: 600;
}
.ws-menu-item-active::before {
  content: '●';
  font-size: 7px;
  margin-right: 6px;
  color: var(--accent);
}
.ws-menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.ws-menu-del {
  font-size: 15px;
  color: var(--text3);
  padding: 0 2px;
  margin-left: 8px;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1;
}
.ws-menu-del:hover {
  color: var(--red);
  background: rgba(239,68,68,.12);
}
.ws-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 10px;
}
.ws-menu-create {
  color: var(--accent) !important;
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   DATA IMPORT  (Phase 40)
═══════════════════════════════════════════ */

.di-import-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.di-import-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.de-export-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.de-export-btn:hover {
  border-color: #22c55e;
  color: var(--text);
}

/* Phase 42 — Integrations */
.ig-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ig-btn:hover { border-color: var(--accent); color: var(--text); }
.ig-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.ig-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
}
.ig-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 16px;
  cursor: pointer;
}
.ig-close:hover { color: var(--text); }
.ig-list { display: flex; flex-direction: column; gap: 8px; }
.ig-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color .15s;
}
.ig-item.ig-connected { border-color: #22c55e44; }
.ig-icon { font-size: 22px; flex-shrink: 0; }
.ig-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ig-info strong { font-size: 13px; color: var(--text); }
.ig-info small { font-size: 11px; color: var(--text3); }
.ig-sync { color: var(--text3); opacity: .7; }
.ig-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ig-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ig-dot-on  { background: #22c55e; box-shadow: 0 0 4px #22c55e88; }
.ig-dot-off { background: var(--text3); opacity: .4; }
.ig-connect, .ig-disconnect {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ig-connect {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ig-connect:hover { opacity: .85; }
.ig-disconnect {
  background: var(--bg2);
  color: var(--text3);
}
.ig-disconnect:hover { border-color: #ef4444; color: #ef4444; }

/* Phase 59 — Enterprise Integrations enhancements */
.ig-item-row { display: flex; align-items: center; gap: 10px; cursor: pointer; width: 100%; }
.ig-cat-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--accent)18; padding: 2px 6px; border-radius: 4px; white-space: nowrap; font-weight: 600; }
.ig-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.ig-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ig-detail-section { margin-bottom: 12px; }
.ig-detail-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.ig-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.ig-cap { font-size: 10px; color: var(--text3); background: var(--bg2); padding: 2px 8px; border-radius: 4px; }
.ig-config-grid { display: flex; flex-direction: column; gap: 6px; }
.ig-cfg-row { display: flex; align-items: center; gap: 8px; }
.ig-cfg-row label { font-size: 11px; color: var(--text2); min-width: 100px; flex-shrink: 0; }
.ig-cfg-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; color: var(--text); font-size: 11px; }
.ig-cfg-input:focus { border-color: var(--accent); outline: none; }
.ig-cfg-save { background: var(--accent); border: none; color: #fff; font-size: 10px; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-weight: 600; margin-top: 4px; align-self: flex-start; }
.ig-cfg-save:hover { opacity: .85; }
.ig-action-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-run-action { font-size: 10px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); cursor: pointer; font-weight: 500; transition: all .15s; }
.ig-run-action:hover { border-color: var(--accent); color: var(--accent); }
.ig-run-action:disabled { opacity: .4; cursor: not-allowed; }
.ig-sync-list { display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
.ig-sync-entry { font-size: 10px; color: var(--text3); display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.ig-sync-entry:last-child { border-bottom: none; }
.ig-sync-action { font-weight: 600; color: var(--text2); }
.ig-sync-time { margin-left: auto; opacity: .6; }

/* Phase 44 — Template Library */
.tl-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tl-btn:hover { border-color: var(--accent); color: var(--text); }
.tl-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.tl-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
}
.tl-list { display: flex; flex-direction: column; gap: 8px; }
.tl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color .15s;
}
.tl-item:hover { border-color: var(--accent); }
.tl-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tl-title-row { display: flex; align-items: center; gap: 8px; }
.tl-title-row strong { font-size: 13px; color: var(--text); }
.tl-type {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg2);
  color: var(--text3);
  white-space: nowrap;
}
.tl-info small { font-size: 11px; color: var(--text3); }
.tl-meta { opacity: .6; }
.tl-use-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s;
}
.tl-use-btn:hover { opacity: .85; }

/* Phase 45 — Company Playbooks */
.pb-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.pb-btn:hover { border-color: var(--accent); color: var(--text); }
.pb-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.pb-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
}
.pb-list { display: flex; flex-direction: column; gap: 8px; }
.pb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color .15s;
}
.pb-item:hover { border-color: var(--accent); }
.pb-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pb-title-row strong { font-size: 13px; color: var(--text); }
.pb-info small { font-size: 11px; color: var(--text3); }
.pb-meta { opacity: .6; }
.pb-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pb-view-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text3);
  cursor: pointer;
}
.pb-view-btn:hover { border-color: var(--accent); color: var(--text); }
.pb-detail { font-size: 13px; }
.pb-stages { display: flex; flex-direction: column; gap: 6px; }
.pb-stage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  background: var(--bg3);
  border-radius: 6px;
}
.pb-stage-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pb-stage strong { font-size: 12px; color: var(--text); display: block; }
.pb-stage small { font-size: 11px; color: var(--text3); }
.pb-recs { margin-top: 12px; }
.pb-recs ul {
  margin: 6px 0 0 0;
  padding-left: 18px;
  font-size: 11px;
  color: var(--text3);
}
.pb-recs li { margin-bottom: 4px; }

/* Phase 47 — Event Replay */
.er-detail {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
}
.er-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 10px;
}
.er-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.er-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  background: var(--bg2);
  border-radius: 6px;
}
.er-num { font-size: 16px; font-weight: 700; color: var(--text); }
.er-label { font-size: 10px; color: var(--text3); }
.er-last {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text3);
}
.er-anchor {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text3);
  opacity: .7;
}

/* Phase 48 — Workflow Composer */
.wc-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.wc-btn:hover { border-color: var(--accent); color: var(--text); }

/* Phase 49 — Automation Engine */
.ae-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.ae-btn:hover { border-color: #f59e0b; color: var(--text); }
.ae-disabled { opacity: .5; }

/* Phase 50 — Skills Marketplace */
.sm-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.sm-btn:hover { border-color: #a855f7; color: var(--text); }

.wc-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.di-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  margin: 0 20px 16px;
  overflow: hidden;
  flex-shrink: 0;
  animation: di-slide .15s ease-out;
}
@keyframes di-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.di-panel-inner { padding: 16px; }
.di-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.di-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.di-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.di-close:hover { color: var(--text); }

.di-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.di-tab {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text3);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
}
.di-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.di-textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  padding: 10px;
  resize: vertical;
  min-height: 100px;
}
.di-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.di-textarea::placeholder { color: var(--text3); }

.di-field { margin-bottom: 8px; }
.di-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.di-select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
  width: 100%;
}

.di-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.di-file-zone { margin-bottom: 10px; }
.di-file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 2px dashed var(--border2);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text3);
  font-size: 13px;
  transition: border-color .15s;
}
.di-file-label:hover {
  border-color: var(--accent);
  color: var(--text2);
}

.di-error {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 6px;
  color: var(--red);
  font-size: 12px;
  line-height: 1.5;
}
.di-success {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 6px;
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
}
.di-preview {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 12px;
}
.di-info {
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: 6px;
  color: var(--text2);
  font-size: 12px;
  margin-bottom: 8px;
}

/* Phase 51 — Dashboard Analytics */
.da-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.da-btn:hover { border-color: #00c4b4; color: var(--text); }

.da-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  margin: 0 20px 16px;
  overflow: hidden;
  flex-shrink: 0;
  animation: da-slide .15s ease-out;
}
@keyframes da-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.da-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 8px 14px 14px;
}

.da-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color .15s;
}
.da-card:hover { border-color: var(--accent); }

.da-card-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.da-card-body {
  min-width: 0;
}

.da-card-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.da-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  margin-top: 2px;
}

.da-card-sub {
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
  line-height: 1.4;
}

.da-summary {
  padding: 8px 14px 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Phase 52 — Audit Trail */
.at-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.at-btn:hover { border-color: #22c55e; color: var(--text); }

.at-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  margin: 0 20px 16px;
  overflow: hidden;
  flex-shrink: 0;
  animation: da-slide .15s ease-out;
}

.at-filter-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text3);
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
  transition: all .12s;
}
.at-filter-btn:hover { border-color: var(--accent); color: var(--text2); }
.at-filter-btn.at-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.at-entry {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.at-entry:last-child { border-bottom: none; }

.at-entry-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.at-source { font-size: 12px; flex-shrink: 0; }
.at-action {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.at-entity {
  color: var(--accent);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-time {
  margin-left: auto;
  color: var(--text3);
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.at-summary {
  color: var(--text2);
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.at-meta {
  display: flex;
  gap: 8px;
  margin-top: 3px;
}
.at-role {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.at-hash {
  font-size: 9px;
  color: var(--text3);
  font-family: monospace;
}

/* Phase 53 — Agent Collaboration */
.ac-collab-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.ac-collab-btn:hover { border-color: #f59e0b; color: var(--text); }

.collab-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  margin: 0 20px 16px;
  overflow: hidden;
  flex-shrink: 0;
  animation: da-slide .15s ease-out;
}

.collab-thread {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.collab-thread:last-child { border-bottom: none; }
.collab-thread.collab-pending {
  border-left: 3px solid #f59e0b;
  padding-left: 8px;
  margin-left: -2px;
}

.collab-thread-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.collab-type {
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}
.collab-agents {
  color: var(--accent);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collab-status {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
}
.collab-st-pending  { background: #f59e0b20; color: #f59e0b; }
.collab-st-resolved { background: #22c55e20; color: #22c55e; }
.collab-st-rejected { background: #ef444420; color: #ef4444; }
.collab-st-accepted { background: #00c4b420; color: #00c4b4; }

.collab-time {
  margin-left: auto;
  color: var(--text3);
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.collab-payload {
  color: var(--text2);
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collab-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════
   Phase 54 — Custom Dashboards / Widgets
═══════════════════════════════════════════ */
.dw-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.dw-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.dw-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.dw-panel-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dw-panel-hdr strong { font-size: 15px; flex: 1; }
.dw-role-sel {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* Toggle chip bar */
.dw-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.dw-toggle-chip {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all .15s;
}
.dw-toggle-chip:hover { border-color: var(--accent); color: var(--text); }
.dw-chip-on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Widget grid */
.dw-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.dw-widget {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.dw-widget-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
}
.dw-widget-controls { display: flex; gap: 4px; }
.dw-move-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dw-move-btn:hover { border-color: var(--accent); color: var(--accent); }
.dw-widget-body { padding: 10px 12px; }

/* KPI mini-cards inside widget */
.dw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.dw-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--bg2);
  border-radius: 8px;
}
.dw-kpi-icon { font-size: 16px; }
.dw-kpi-val { font-size: 20px; font-weight: 700; color: var(--text); }
.dw-kpi-label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.dw-kpi-sub { font-size: 10px; color: var(--text3); }

/* Feed items (shared across feed widgets) */
.dw-feed { display: flex; flex-direction: column; gap: 6px; }
.dw-feed-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.dw-feed-item:last-child { border-bottom: none; }
.dw-feed-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.dw-feed-body { flex: 1; min-width: 0; }
.dw-feed-title { font-size: 12px; color: var(--text); line-height: 1.3; }
.dw-feed-detail { font-size: 11px; color: var(--text3); margin-top: 2px; }
.dw-feed-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }
.dw-unread .dw-feed-title { font-weight: 600; }

/* Snapshot widget */
.dw-snapshot { font-size: 12px; }
.dw-snap-time { font-size: 10px; color: var(--text3); margin-bottom: 6px; }
.dw-snap-grid { display: flex; flex-direction: column; gap: 4px; }
.dw-snap-row { display: flex; justify-content: space-between; padding: 2px 0; }
.dw-snap-label { color: var(--text2); }
.dw-snap-val { color: var(--text); font-weight: 600; }

/* Empty state */
.dw-empty { font-size: 12px; color: var(--text3); text-align: center; padding: 12px 0; }
.dw-empty-ok { color: #4ade80; }

/* ═══════════════════════════════════════════
   Phase 55 — CEO Notifications / Alerts
═══════════════════════════════════════════ */
.cn-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.cn-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

.cn-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.cn-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cn-hdr strong { font-size: 15px; flex: 1; }
.cn-count { font-size: 11px; color: var(--accent); font-weight: 600; }
.cn-actions { display: flex; gap: 6px; align-items: center; }
.cn-act-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.cn-act-btn:hover { border-color: var(--accent); color: var(--text); }

/* Digest */
.cn-digest {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.cn-digest-title { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.cn-digest-text {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  margin: 0;
  font-family: inherit;
}

/* Alert list */
.cn-list { display: flex; flex-direction: column; gap: 6px; }
.cn-alert {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
}
.cn-alert.cn-read {
  opacity: 0.6;
  border-left-color: var(--border);
}
.cn-alert-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.cn-alert-icon { font-size: 14px; }
.cn-alert-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
}
.cn-alert-time { font-size: 10px; color: var(--text3); margin-left: auto; }
.cn-mark-btn {
  background: none;
  border: 1px solid var(--border);
  color: #4ade80;
  font-size: 11px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cn-mark-btn:hover { background: #4ade80; color: #000; }
.cn-alert-title { font-size: 12px; color: var(--text); font-weight: 500; }
.cn-alert-detail { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ═══════════════════════════════════════════
   Phase 56 — Enterprise Controls
═══════════════════════════════════════════ */
.ec-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.ec-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.ec-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.ec-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ec-hdr strong { font-size: 15px; flex: 1; }
.ec-hdr-actions { display: flex; gap: 6px; align-items: center; }
.ec-act-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.ec-act-btn:hover { border-color: var(--accent); color: var(--text); }
.ec-save-btn { color: var(--accent); border-color: var(--accent); }

.ec-grid { display: flex; flex-direction: column; gap: 6px; }
.ec-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ec-row.ec-modified { border-left: 3px solid var(--accent); }
.ec-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.ec-check { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
.ec-num {
  width: 70px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: 12px;
  text-align: center;
}
.ec-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
}
.ec-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
}
.ec-status-ok { background: color-mix(in srgb, #4ade80 10%, var(--bg3)); color: #4ade80; }
.ec-status-warn { background: color-mix(in srgb, #facc15 10%, var(--bg3)); color: #facc15; }

/* ═══════════════════════════════════════════
   Phase 57 — Business Signals
═══════════════════════════════════════════ */
.bs-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.bs-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.bs-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.bs-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.bs-hdr strong { font-size: 15px; flex: 1; }
.bs-trend-sum { font-size: 11px; color: var(--text3); font-weight: 600; }

.bs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.bs-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.bs-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.bs-card-name { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .03em; }
.bs-remove-btn {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 12px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity .15s;
}
.bs-remove-btn:hover { opacity: 1; color: #f87171; }
.bs-card-val { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.bs-card-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.bs-up { color: #4ade80; }
.bs-down { color: #f87171; }
.bs-flat { color: var(--text3); }
.bs-pts { font-size: 10px; color: var(--text3); font-weight: 400; margin-left: auto; }

.bs-card-record {
  display: flex;
  gap: 6px;
}
.bs-val-input {
  flex: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: 12px;
}
.bs-rec-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.bs-rec-btn:hover { opacity: 0.85; }
.bs-empty { font-size: 12px; color: var(--text3); text-align: center; padding: 12px 0; }

/* ═══════════════════════════════════════════
   Phase 58 — CEO Experience View
═══════════════════════════════════════════ */
.cx-btn { background: var(--accent); border: none; color: #fff; font-size: 11px; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.cx-btn:hover { opacity: 0.9; }

.cx-panel {
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
}
.cx-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cx-hdr strong { font-size: 16px; flex: 1; }
.cx-refresh-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 12px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cx-refresh-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Health + Summary row */
.cx-top-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.cx-health {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.cx-health-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
}
.cx-health-val { font-size: 24px; font-weight: 800; }
.cx-health-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.cx-summary-block { flex: 1; }
.cx-summary-text {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  margin: 0;
  font-family: inherit;
}

/* Sections */
.cx-section { margin-bottom: 14px; }
.cx-section-title { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }

/* Priority Actions */
.cx-actions { display: flex; flex-direction: column; gap: 6px; }
.cx-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.cx-action-icon { font-size: 16px; flex-shrink: 0; }
.cx-action-body { flex: 1; min-width: 0; }
.cx-action-text { font-size: 12px; font-weight: 600; color: var(--text); }
.cx-action-detail { font-size: 11px; color: var(--text3); margin-top: 1px; }
.cx-action-cat { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); background: var(--bg2); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

/* Two-column risks + opportunities */
.cx-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 600px) { .cx-two-col { grid-template-columns: 1fr; } }

.cx-risk-item, .cx-opp-item {
  font-size: 12px;
  color: var(--text);
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.cx-risk-item:last-child, .cx-opp-item:last-child { border-bottom: none; }

/* Key Signals */
.cx-signals { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-signal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.cx-sig-name { color: var(--text2); font-weight: 500; }
.cx-sig-val { font-weight: 700; color: var(--text); }
.cx-sig-trend { font-weight: 600; }
.cx-sig-up .cx-sig-trend { color: #4ade80; }
.cx-sig-down .cx-sig-trend { color: #f87171; }
.cx-sig-flat .cx-sig-trend { color: var(--text3); }

/* ═══════════════════════════════════════════
   PHASE 60 — Guided Onboarding
═══════════════════════════════════════════ */

/* ── Welcome Banner ── */
.ob-banner {
  display: flex; align-items: center; gap: 16px;
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 14px; padding: 18px 22px; margin-bottom: 12px; flex-shrink: 0;
}
.ob-banner-icon { font-size: 28px; flex-shrink: 0; }
.ob-banner-body { flex: 1; min-width: 0; }
.ob-banner-title { font-size: 15px; color: var(--text); display: block; margin-bottom: 3px; }
.ob-banner-desc { font-size: 12px; color: var(--text2); margin: 0; line-height: 1.5; }
.ob-start-btn {
  background: var(--accent); border: none; color: #fff;
  font-size: 13px; font-weight: 700; padding: 8px 20px; border-radius: 8px; cursor: pointer;
  white-space: nowrap; transition: opacity .15s;
}
.ob-start-btn:hover { opacity: .88; }
.ob-skip-btn {
  background: none; border: 1px solid var(--border); color: var(--text3);
  font-size: 11px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.ob-skip-btn:hover { border-color: var(--text2); color: var(--text2); }

/* ── Wizard Container ── */
.ob-wizard {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 14px; flex-shrink: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.ob-wizard-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; background: rgba(99,102,241,.06);
  border-bottom: 1px solid var(--border);
}
.ob-wizard-title { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
.ob-wizard-progress { font-size: 11px; color: var(--accent); font-weight: 700; }
.ob-wizard-close {
  background: none; border: none; color: var(--text3); font-size: 14px;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.ob-wizard-close:hover { color: var(--text); background: var(--bg3); }

/* ── Progress Bar ── */
.ob-progress-bar {
  height: 3px; background: var(--bg3); width: 100%;
}
.ob-progress-fill {
  height: 100%; background: var(--accent);
  transition: width .4s ease; border-radius: 0 2px 2px 0;
}

/* ── Step Content ── */
.ob-step { padding: 24px 22px; }
.ob-step-icon { font-size: 36px; text-align: center; display: block; margin-bottom: 8px; }
.ob-step-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.ob-step-desc { font-size: 12px; color: var(--text2); margin: 0 0 16px; line-height: 1.5; }

.ob-field { margin-bottom: 14px; }
.ob-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.ob-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; color: var(--text); font-size: 13px; box-sizing: border-box;
}
.ob-input:focus { border-color: var(--accent); outline: none; }

/* ── Option Buttons ── */
.ob-options { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-option {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 14px; color: var(--text2); font-size: 12px; cursor: pointer;
  transition: all .15s; font-weight: 500;
}
.ob-option:hover { border-color: var(--accent); color: var(--text); }
.ob-option.ob-selected { border-color: var(--accent); color: var(--accent); background: rgba(99,102,241,.1); }
.ob-option-sm { padding: 4px 12px; font-size: 11px; }

/* ── Goal Grid ── */
.ob-goals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 500px) { .ob-goals-grid { grid-template-columns: 1fr; } }
.ob-goal-card { display: flex; flex-direction: column; align-items: center; padding: 14px 10px; gap: 4px; }
.ob-goal-icon { font-size: 22px; }
.ob-goal-label { font-size: 11px; text-align: center; }

/* ── Next Button ── */
.ob-next-btn {
  background: var(--accent); border: none; color: #fff;
  font-size: 13px; font-weight: 700; padding: 10px 24px; border-radius: 8px; cursor: pointer;
  margin-top: 8px; transition: opacity .15s; width: 100%;
}
.ob-next-btn:hover { opacity: .88; }

/* ── Recommendations ── */
.ob-rec-sections { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ob-rec-section { background: var(--bg3); border-radius: 8px; padding: 10px 14px; }
.ob-rec-label { font-size: 11px; font-weight: 700; color: var(--text2); display: block; margin-bottom: 6px; }
.ob-rec-items { display: flex; flex-wrap: wrap; gap: 4px; }
.ob-rec-tag {
  font-size: 11px; background: rgba(99,102,241,.1); color: var(--accent);
  padding: 3px 10px; border-radius: 6px; font-weight: 500;
}

/* ── Done State ── */
.ob-done { text-align: center; }
.ob-done-icon { font-size: 42px; margin-bottom: 8px; }

/* ═══════════════════════════════════════════
   PHASE 60 — Executive Visual Polish
═══════════════════════════════════════════ */

/* ── MC Header upgrade ── */
.mc-greeting {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  background: var(--text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mc-subhead { gap: 10px !important; }
.mc-company {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text2) !important;
  letter-spacing: .01em;
}

/* ── MC Panel premium surfaces ── */
.mc-panel {
  background: var(--bg2) !important;
  border-color: rgba(99,102,241,.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  transition: border-color .2s, box-shadow .2s;
}
.mc-panel:hover {
  border-color: rgba(99,102,241,.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.mc-panel h3, .mc-panel .mc-section-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
}

/* ── MC Grid spacing ── */
.mc-grid { gap: 14px !important; }

/* ── CEO View polish ── */
.cx-panel {
  background: var(--bg2) !important;
  border: 1px solid rgba(99,102,241,.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(99,102,241,.08) !important;
}
.cx-hdr {
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid rgba(99,102,241,.1);
}
.cx-hdr strong {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  background: var(--text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CEO Health Ring glow ── */
.cx-health-ring {
  box-shadow: 0 0 20px rgba(99,102,241,.2) !important;
}
.cx-health-val {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em;
}

/* ── CEO Sections ── */
.cx-section { margin-bottom: 16px !important; }
.cx-section-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  color: var(--text3) !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── CEO Action Items ── */
.cx-action {
  background: var(--bg3) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border);
  transition: border-color .15s;
}
.cx-action:hover { border-color: rgba(99,102,241,.2); }

/* ── CEO Signals ── */
.cx-signal {
  background: var(--bg3) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--border) !important;
}

/* ── CEO Alerts polish ── */
.cn-panel {
  background: var(--bg2) !important;
  border: 1px solid rgba(99,102,241,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.35) !important;
}
.cn-hdr {
  border-bottom: 1px solid rgba(99,102,241,.08) !important;
}
.cn-alert {
  border-radius: 10px !important;
  transition: border-color .15s;
}
.cn-alert:hover { border-color: rgba(99,102,241,.15) !important; }

/* ── Analytics / Signals panels ── */
.bs-panel, .da-panel {
  background: var(--bg2) !important;
  border: 1px solid rgba(99,102,241,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.35) !important;
}

/* ── Button consistency ── */
.cx-btn, .cn-btn, .bs-btn {
  background: var(--accent) !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(99,102,241,.25);
  transition: opacity .15s, box-shadow .15s;
}
.cx-btn:hover, .cn-btn:hover, .bs-btn:hover {
  opacity: .9;
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
}

/* ── Enterprise Controls polish ── */
.ec-panel {
  background: var(--bg2) !important;
  border: 1px solid rgba(99,102,241,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.35) !important;
}

/* ── Integration panel polish ── */
.ig-panel {
  background: var(--bg2) !important;
  border: 1px solid rgba(99,102,241,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.35) !important;
}

/* ═══════════════════════════════════════════
   PHASE 62 — Decision Engine Panel
═══════════════════════════════════════════ */

.de-btn {
  background: var(--accent) !important;
  border: none !important; color: #fff; font-size: 11px; padding: 4px 12px;
  border-radius: 8px; cursor: pointer; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(99,102,241,.25);
}
.de-btn:hover { opacity: .9; }

.de-panel {
  background: var(--bg2);
  border: 1px solid rgba(99,102,241,.15); border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(99,102,241,.08);
  max-width: 520px; margin-bottom: 14px; flex-shrink: 0;
  padding: 0; overflow: hidden;
}

.de-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid rgba(99,102,241,.1);
}
.de-hdr strong {
  font-size: 15px; font-weight: 800; flex: 1;
  background: var(--text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.de-count { font-size: 11px; color: var(--text3); }
.de-refresh {
  background: none; border: 1px solid var(--border); color: var(--text3);
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.de-refresh:hover { border-color: var(--accent); color: var(--accent); }
.de-close {
  background: none; border: none; color: var(--text3); font-size: 16px;
  cursor: pointer; padding: 2px 6px;
}
.de-close:hover { color: var(--text); }

.de-empty {
  padding: 24px 18px; text-align: center; color: var(--text3);
  font-size: 12px; line-height: 1.6;
}

.de-section { padding: 0 18px 14px; }
.de-section:first-of-type { padding-top: 14px; }
.de-section-title {
  font-size: 11px; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em;
  display: block; margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.de-card {
  background: var(--bg3);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  transition: border-color .15s;
}
.de-card:hover { border-color: rgba(99,102,241,.2); }
.de-card.de-approved { border-color: rgba(34,197,94,.3); }
.de-card.de-done { opacity: .6; }

.de-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.de-sev { font-size: 14px; flex-shrink: 0; }
.de-title { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; }
.de-cat {
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text3); background: var(--bg2); padding: 2px 6px;
  border-radius: 4px; white-space: nowrap; font-weight: 600;
}

.de-reason { font-size: 11px; color: var(--text2); margin-bottom: 6px; line-height: 1.4; }

.de-action-tag {
  font-size: 10px; color: var(--accent); background: rgba(99,102,241,.1);
  padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 8px;
  font-weight: 500;
}

.de-card-actions { display: flex; gap: 6px; }
.de-approve-btn, .de-exec-btn, .de-dismiss-btn {
  font-size: 10px; padding: 4px 10px; border-radius: 6px;
  cursor: pointer; font-weight: 600; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text2); transition: all .15s;
}
.de-approve-btn:hover { border-color: #22c55e; color: #22c55e; }
.de-exec-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.de-exec-btn:hover { opacity: .85; }
.de-dismiss-btn:hover { border-color: #ef4444; color: #ef4444; }

.de-dismissed-count {
  padding: 8px 18px 14px; font-size: 10px; color: var(--text3); opacity: .6;
}

/* ═══════════════════════════════════════════
   PHASE 62.5 — Executive Plans Panel
═══════════════════════════════════════════ */

.ep-btn {
  background: var(--accent) !important;
  border: none !important; color: #fff; font-size: 11px; padding: 4px 12px;
  border-radius: 8px; cursor: pointer; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.ep-btn:hover { opacity: .9; }

.ep-panel {
  background: var(--bg2);
  border: 1px solid rgba(14,165,233,.15); border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(14,165,233,.08);
  max-width: 560px; max-height: 70vh; margin-bottom: 14px; flex-shrink: 0;
  padding: 0; overflow-y: auto; overflow-x: hidden;
}

.ep-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid rgba(14,165,233,.1);
}
.ep-hdr strong {
  font-size: 15px; font-weight: 800; flex: 1;
  background: var(--text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ep-count { font-size: 11px; color: var(--text3); }
.ep-close {
  background: none; border: none; color: var(--text3); font-size: 16px;
  cursor: pointer; padding: 2px 6px;
}
.ep-close:hover { color: var(--text); }

.ep-create-row {
  display: flex; gap: 8px; padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.ep-input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; color: var(--text);
  font-size: 12px; outline: none;
}
.ep-input:focus { border-color: #0ea5e9; }
.ep-create-btn {
  background: var(--accent);
  border: none; color: #fff; padding: 8px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ep-create-btn:hover { opacity: .85; }

.ep-empty {
  padding: 24px 18px; text-align: center; color: var(--text3);
  font-size: 12px; line-height: 1.6;
}

.ep-card {
  background: var(--bg3);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin: 10px 18px;
  transition: border-color .15s;
}
.ep-card:hover { border-color: rgba(14,165,233,.2); }

.ep-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ep-status-icon { font-size: 16px; flex-shrink: 0; }
.ep-objective { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; }
.ep-status-badge {
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 4px; font-weight: 700; white-space: nowrap;
}
.ep-status-draft { background: rgba(148,163,184,.15); color: #94a3b8; }
.ep-status-planning { background: rgba(14,165,233,.15); color: #0ea5e9; }
.ep-status-pending_ceo { background: rgba(245,158,11,.15); color: #f59e0b; }
.ep-status-approved { background: rgba(34,197,94,.15); color: #22c55e; }
.ep-status-rejected { background: rgba(239,68,68,.15); color: #ef4444; }

.ep-meta {
  font-size: 11px; color: var(--text3); margin-bottom: 8px; line-height: 1.4;
}

.ep-dept-plans { margin-top: 8px; }
.ep-dept-plan {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--border);
}
.ep-dept-head {
  font-size: 10px; font-weight: 800; color: #0ea5e9;
  background: rgba(14,165,233,.1); padding: 2px 6px; border-radius: 4px;
}
.ep-dept-name { font-size: 11px; color: var(--text2); flex: 1; }
.ep-dept-stats { font-size: 10px; color: var(--text3); }

.ep-task-list {
  margin: 4px 0 8px 20px; padding: 0;
  list-style: disc; font-size: 11px; color: var(--text2); line-height: 1.5;
}
.ep-task-list li { margin-bottom: 2px; }

.ep-risks {
  font-size: 10px; color: #f59e0b; margin: 4px 0 4px 20px;
}
.ep-risk-summary {
  font-size: 10px; color: #f59e0b; margin-top: 6px; opacity: .8;
}

.ep-actions { display: flex; gap: 8px; margin-top: 10px; }
.ep-approve-btn, .ep-reject-btn {
  font-size: 11px; padding: 6px 14px; border-radius: 8px;
  cursor: pointer; font-weight: 700; border: none; transition: opacity .15s;
}
.ep-approve-btn {
  background: #22c55e;
  color: #fff;
}
.ep-approve-btn:hover { opacity: .85; }
.ep-reject-btn {
  background: var(--bg2); border: 1px solid var(--border) !important;
  color: var(--text2);
}
.ep-reject-btn:hover { border-color: #ef4444 !important; color: #ef4444; }

.ep-project-link {
  margin-top: 8px; font-size: 11px; color: #0ea5e9;
  cursor: pointer; font-weight: 600;
}
.ep-project-link:hover { text-decoration: underline;
}

/* ═══════════════════════════════════════════
   PHASE S1 — Screen Containers & Placeholders
═══════════════════════════════════════════ */

.screen-view {
  flex: 1;
  flex-direction: column;
  gap: 0;
  padding: 48px 48px 40px;
  overflow-y: auto;
  min-height: 0;
}

.screen-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 80px 24px; margin: auto;
  opacity: .5;
}
.screen-placeholder-icon {
  font-size: 48px; margin-bottom: 16px;
}
.screen-placeholder h2 {
  font-size: 20px; font-weight: 800; color: var(--text);
  margin: 0 0 8px;
}
.screen-placeholder p {
  font-size: 13px; color: var(--text3); margin: 0;
}

/* ═══════════════════════════════════════════
   PHASE S2 — Unified Alerts Badges
═══════════════════════════════════════════ */

.ua-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: .03em; vertical-align: middle;
}
.ua-pri-critical { background: rgba(239,68,68,.2); color: #f87171; }
.ua-pri-high     { background: rgba(249,115,22,.2); color: #fb923c; }
.ua-pri-medium   { background: rgba(234,179,8,.15); color: #facc15; }
.ua-pri-info     { background: rgba(0,196,180,.15); color: #60a5fa; }

.ua-src-tag {
  display: inline-block; font-size: 8px; font-weight: 700;
  padding: 1px 4px; border-radius: 3px; margin-left: 4px;
  background: rgba(139,92,246,.15); color: #a78bfa;
  text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}

.ua-digest {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: rgba(99,102,241,.03);
}
.ua-digest-title {
  font-size: 11px; font-weight: 700; color: var(--text2); margin-bottom: 6px;
}
.ua-digest-text {
  font-size: 11px; color: var(--text3); line-height: 1.6;
  margin: 0; white-space: pre-wrap; font-family: inherit;
}

/* ═══════════════════════════════════════════
   PHASE S3 — Analytics Screen
═══════════════════════════════════════════ */

.as-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 0; border-bottom: none;
  margin-bottom: 32px; flex-shrink: 0;
}
.as-title {
  margin: 0; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.as-tabs {
  display: flex; gap: 4px;
}
.as-tab {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 16px; font-size: 13px; font-weight: 500;
  color: var(--text2); cursor: pointer; transition: all .15s;
}
.as-tab:hover { background: var(--bg3); color: var(--text2); }
.as-tab-active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.as-body {
  flex: 1; overflow-y: auto; min-height: 0;
}
.as-section {
  margin-bottom: 24px;
}
.as-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.as-badge {
  font-size: 10px; font-weight: 600; color: var(--text3);
  background: var(--bg3); padding: 2px 8px; border-radius: 10px;
}
.as-empty {
  padding: 24px; text-align: center; color: var(--text3); font-size: 13px;
}

/* Executive overview */
.as-exec-row {
  display: flex; gap: 20px; align-items: flex-start;
}
.as-health-ring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 4px solid; display: flex; flex-direction: column;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.as-health-val { font-size: 22px; font-weight: 800; line-height: 1; }
.as-health-label { font-size: 9px; color: var(--text3); text-transform: uppercase; margin-top: 2px; }
.as-summary-block { flex: 1; }
.as-summary-text {
  margin: 0; white-space: pre-wrap; font-size: 12px;
  color: var(--text2); line-height: 1.6; font-family: inherit;
}

/* Priority Actions */
.as-actions { display: flex; flex-direction: column; gap: 6px; }
.as-action {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--bg2); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-xs);
}
.as-action-icon { font-size: 18px; flex-shrink: 0; }
.as-action-body { flex: 1; }
.as-action-text { font-size: 12px; font-weight: 600; color: var(--text); }
.as-action-detail { font-size: 11px; color: var(--text3); margin-top: 2px; }
.as-action-cat {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  color: var(--accent); background: var(--accent)15; padding: 2px 6px; border-radius: 4px;
}

/* Risks + Opportunities two-column */
.as-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.as-risk-item, .as-opp-item {
  font-size: 12px; color: var(--text2); padding: 4px 0; line-height: 1.5;
}

/* Key Signals row */
.as-signals-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.as-signal {
  background: var(--bg2); border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.as-sig-name { font-size: 11px; color: var(--text3); font-weight: 600; }
.as-sig-val { font-size: 16px; font-weight: 700; color: var(--text); }
.as-sig-trend { font-size: 11px; font-weight: 600; }
.as-sig-up .as-sig-trend { color: #4ade80; }
.as-sig-down .as-sig-trend { color: #f87171; }
.as-sig-flat .as-sig-trend { color: var(--text3); }

/* KPI mini cards (overview tab) */
.as-kpi-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.as-kpi-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border-radius: var(--radius-md); padding: 12px 14px;
  border: 1px solid var(--border); box-shadow: var(--shadow-xs);
}
.as-kpi-icon { font-size: 20px; flex-shrink: 0; }
.as-kpi-body { flex: 1; }
.as-kpi-val { font-size: 16px; font-weight: 700; color: var(--text); }
.as-kpi-label { font-size: 11px; color: var(--text3); }
.as-kpi-sub { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* Insights grid */
.as-insights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.as-insight-card {
  background: var(--bg2); border-radius: 8px; padding: 10px 14px;
}
.as-insight-header {
  display: flex; justify-content: space-between; align-items: center;
}
.as-insight-title { font-size: 12px; font-weight: 600; color: var(--text); }
.as-insight-sev { font-size: 12px; }
.as-insight-detail {
  font-size: 11px; color: var(--text3); margin-top: 6px; line-height: 1.4;
}
.as-insight-cta { margin-top: 8px; }
.as-insight-cta .btn { font-size: 10px; padding: 2px 8px; }

/* ═══════════════════════════════════════════
   PHASE S4 — Projects Screen
═══════════════════════════════════════════ */

.ps-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 0; border-bottom: none;
  margin-bottom: 32px; flex-shrink: 0;
}
.ps-title {
  margin: 0; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.ps-tabs { display: flex; gap: 4px; }
.ps-tab {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 16px; font-size: 13px; font-weight: 500;
  color: var(--text2); cursor: pointer; transition: all .15s;
}
.ps-tab:hover { background: var(--bg3); color: var(--text2); }
.ps-tab-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ps-body { flex: 1; overflow-y: auto; min-height: 0; }
.ps-section { margin-bottom: 24px; }
.ps-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.ps-badge {
  font-size: 10px; font-weight: 600; color: var(--text3);
  background: var(--bg3); padding: 2px 8px; border-radius: 10px;
}
.ps-badge-warn {
  background: #facc1525; color: #ca8a04;
}
.ps-empty {
  padding: 24px; text-align: center; color: var(--text3); font-size: 13px;
}

/* Project cards */
.ps-project-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px;
}
.ps-project-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; cursor: pointer; transition: border-color .15s;
}
.ps-project-card:hover { border-color: var(--accent); }
.ps-project-card-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.ps-project-icon { font-size: 18px; flex-shrink: 0; }
.ps-project-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.ps-health-chip {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
.ps-health-good { background: #22c55e20; color: #22c55e; }
.ps-health-warn { background: #eab30820; color: #ca8a04; }
.ps-health-low  { background: #ef444420; color: #ef4444; }
.ps-project-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ps-owner-chip {
  font-size: 9px; font-weight: 700; background: var(--accent)20; color: var(--accent);
  padding: 1px 6px; border-radius: 4px;
}
.ps-meta-item { font-size: 11px; color: var(--text3); }
.ps-meta-time { font-size: 10px; color: var(--text3); margin-left: auto; }
.ps-project-desc { font-size: 12px; color: var(--text3); margin-top: 6px; line-height: 1.4; }

/* Plan cards */
.ps-create-row { display: flex; gap: 8px; margin-bottom: 16px; }
.ps-input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg2); color: var(--text); font-size: 13px;
}
.ps-input::placeholder { color: var(--text3); }
.ps-create-btn {
  padding: 8px 16px; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ps-create-btn:hover { opacity: .9; }
.ps-plan-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 10px;
}
.ps-plan-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ps-plan-icon { font-size: 16px; flex-shrink: 0; }
.ps-plan-objective { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.ps-plan-status {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
.ps-status-draft { background: var(--bg3); color: var(--text3); }
.ps-status-planning { background: #00c4b420; color: #00c4b4; }
.ps-status-pending_ceo { background: #facc1525; color: #ca8a04; }
.ps-status-approved { background: #22c55e20; color: #22c55e; }
.ps-status-rejected { background: #ef444420; color: #ef4444; }
.ps-plan-meta { font-size: 11px; color: var(--text3); margin-bottom: 8px; }
.ps-dept-plans { margin: 8px 0; }
.ps-dept-plan {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.ps-dept-name { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; }
.ps-dept-stats { font-size: 11px; color: var(--text3); }
.ps-task-list {
  margin: 4px 0 4px 16px; padding: 0; list-style: disc;
  font-size: 11px; color: var(--text2);
}
.ps-task-list li { padding: 2px 0; }
.ps-risks { font-size: 11px; color: #ca8a04; margin: 4px 0; }
.ps-risk-summary { font-size: 11px; color: #ca8a04; margin: 6px 0; }
.ps-plan-actions { display: flex; gap: 8px; margin-top: 10px; }
.ps-approve-btn {
  padding: 6px 14px; background: #22c55e; color: #fff; border: none;
  border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ps-reject-btn {
  padding: 6px 14px; background: var(--bg3); color: var(--text3); border: none;
  border-radius: 6px; font-size: 12px; cursor: pointer;
}
.ps-project-link {
  font-size: 12px; color: var(--accent); cursor: pointer; margin-top: 8px;
  padding: 4px 0;
}
.ps-project-link:hover { text-decoration: underline; }

/* Stats row */
.ps-stats-row {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.ps-stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg2); border-radius: 8px; padding: 10px 16px; min-width: 70px;
}
.ps-stat-val { font-size: 18px; font-weight: 700; color: var(--text); }
.ps-stat-label { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* Department grid */
.ps-dept-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.ps-dept-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; cursor: pointer; transition: border-color .15s;
}
.ps-dept-card:hover { border-color: var(--accent); }
.ps-dept-icon { font-size: 22px; flex-shrink: 0; }
.ps-dept-info { flex: 1; }
.ps-dept-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ps-dept-count { font-size: 11px; color: var(--text3); }
.ps-dept-arrow { font-size: 14px; color: var(--text3); }

/* Task cards */
.ps-task-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-xs);
}
.ps-task-header { display: flex; align-items: center; gap: 8px; }
.ps-task-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.ps-task-status {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  text-transform: capitalize;
}
.ps-status-pending { background: var(--bg3); color: var(--text3); }
.ps-status-in_progress, .ps-status-in.progress { background: var(--accent)20; color: var(--accent); }
.ps-status-review { background: #eab30820; color: #ca8a04; }
.ps-status-done { background: #22c55e20; color: #22c55e; }
.ps-status-active { background: var(--accent)20; color: var(--accent); }
.ps-status-complete { background: #22c55e20; color: #22c55e; }
.ps-task-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 11px; color: var(--text3);
}
.ps-priority-high { color: #ef4444; font-weight: 700; }
.ps-priority-medium { color: #ca8a04; }
.ps-priority-low { color: var(--text3); }
.ps-dispatch-btn, .ps-view-btn {
  margin-top: 6px; padding: 4px 12px; border: none; border-radius: 6px;
  font-size: 11px; cursor: pointer;
}
.ps-dispatch-btn { background: var(--accent); color: #fff; }
.ps-view-btn { background: var(--bg3); color: var(--text2); }

/* Outcome controls */
.ps-outcome {
  display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap;
}
.ps-outcome-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
.ps-outcome-pending { background: #eab30815; color: #ca8a04; }
.ps-outcome-approved { background: #22c55e20; color: #22c55e; }
.ps-outcome-rejected { background: #ef444420; color: #ef4444; }
.ps-outcome-used { background: var(--accent)15; color: var(--accent); }
.ps-outcome-btn {
  font-size: 10px; padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--bg2); color: var(--text3); cursor: pointer;
}
.ps-approve { color: #22c55e; border-color: #22c55e40; }
.ps-reject { color: #ef4444; border-color: #ef444440; }

/* Detail view */
.ps-detail { padding: 0; }
.ps-back-btn {
  background: none; border: none; color: var(--accent); font-size: 12px;
  cursor: pointer; padding: 4px 0; margin-bottom: 12px;
}
.ps-back-btn:hover { text-decoration: underline; }
.ps-detail-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.ps-detail-icon { font-size: 28px; flex-shrink: 0; }
.ps-detail-info { flex: 1; }
.ps-detail-title { font-size: 18px; font-weight: 700; color: var(--text); }
.ps-detail-desc { font-size: 13px; color: var(--text3); margin-top: 2px; }
.ps-summary-text { font-size: 13px; color: var(--text2); line-height: 1.6; }

/* Progress bar */
.ps-progress { margin-bottom: 16px; }
.ps-progress-header {
  display: flex; justify-content: space-between; font-size: 11px;
  color: var(--text3); margin-bottom: 4px;
}
.ps-progress-bar {
  height: 6px; background: var(--bg3); border-radius: 3px;
  overflow: hidden; display: flex;
}
.ps-bar-done { background: #22c55e; }
.ps-bar-review { background: #eab308; }
.ps-bar-ip { background: var(--accent); }
.ps-progress-legend {
  display: flex; gap: 12px; font-size: 10px; color: var(--text3); margin-top: 4px;
}
.ps-legend-done { color: #22c55e; }
.ps-legend-review { color: #eab308; }
.ps-legend-ip { color: var(--accent); }

/* Teams (Pods) */
.ps-team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.ps-team-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px;
}
.ps-team-header { display: flex; align-items: center; gap: 8px; }
.ps-team-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.ps-team-objective { font-size: 11px; color: var(--text3); margin-top: 4px; line-height: 1.4; }
.ps-team-metrics {
  display: flex; gap: 8px; font-size: 11px; color: var(--text3); margin-top: 6px;
}
.ps-metric-good { color: #22c55e; }
.ps-metric-bad { color: #ef4444; }

/* Output cards */
.ps-output-card {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.ps-output-icon { flex-shrink: 0; }
.ps-output-title { flex: 1; color: var(--text); }
.ps-output-status { color: var(--text3); font-size: 11px; }

/* ═══════════════════════════════════════════
   PHASE S5 — Automations Screen
═══════════════════════════════════════════ */

.au-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 0; border-bottom: none;
  margin-bottom: 32px; flex-shrink: 0;
}
.au-title {
  margin: 0; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.au-tabs { display: flex; gap: 4px; }
.au-tab {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 16px; font-size: 13px; font-weight: 500;
  color: var(--text2); cursor: pointer; transition: all .15s;
}
.au-tab:hover { background: var(--bg3); color: var(--text2); }
.au-tab-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.au-body { flex: 1; overflow-y: auto; min-height: 0; }
.au-section { margin-bottom: 24px; }
.au-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.au-sub-title {
  font-size: 12px; font-weight: 600; color: var(--text3);
  margin: 16px 0 8px; display: flex; align-items: center; gap: 6px;
}
.au-badge {
  font-size: 10px; font-weight: 600; color: var(--text3);
  background: var(--bg3); padding: 2px 8px; border-radius: 10px;
}
.au-empty {
  padding: 24px; text-align: center; color: var(--text3); font-size: 13px;
}

/* Log button in section title */
.au-log-btn {
  margin-left: auto; font-size: 11px; padding: 3px 10px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text3); cursor: pointer;
}
.au-log-btn:hover { color: var(--text); }

/* Create button in section title */
.au-create-btn {
  margin-left: auto; font-size: 11px; padding: 3px 10px;
  background: var(--accent); border: none; border-radius: 6px;
  color: #fff; cursor: pointer; font-weight: 600;
}
.au-create-btn:hover { opacity: .9; }

/* ── Rule cards ─────────────────────────── */
.au-rule-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 20px; margin-bottom: 10px;
}
.au-rule-disabled { opacity: .6; }
.au-rule-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.au-rule-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.au-rule-controls { display: flex; gap: 6px; }
.au-toggle-btn {
  font-size: 10px; font-weight: 700; padding: 3px 10px; border: none;
  border-radius: 10px; cursor: pointer;
}
.au-toggle-on { background: #22c55e25; color: #22c55e; }
.au-toggle-off { background: var(--bg3); color: var(--text3); }
.au-test-btn {
  font-size: 10px; padding: 3px 10px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text3); cursor: pointer;
}
.au-test-btn:hover { color: var(--text); }
.au-rule-desc {
  font-size: 11px; color: var(--text3); margin-top: 6px; line-height: 1.4;
}
.au-rule-meta {
  display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--text3);
}
.au-rule-trigger { color: var(--accent); }
.au-rule-time { margin-left: auto; }

/* ── Card grid (workflows, playbooks) ──── */
.au-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}

/* ── Workflow cards ─────────────────────── */
.au-wf-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px;
}
.au-wf-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.au-wf-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.au-wf-desc { font-size: 11px; color: var(--text3); line-height: 1.4; margin-bottom: 8px; }
.au-wf-meta { font-size: 11px; color: var(--text3); display: flex; gap: 10px; margin-bottom: 10px; }
.au-wf-actions { display: flex; gap: 6px; }
.au-builtin-chip {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: var(--accent)15; color: var(--accent);
}

/* ── Playbook cards ────────────────────── */
.au-pb-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px;
}
.au-pb-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.au-pb-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.au-pb-type {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: var(--bg3); color: var(--text3); text-transform: uppercase;
}
.au-pb-desc { font-size: 11px; color: var(--text3); line-height: 1.4; margin-bottom: 8px; }
.au-pb-meta { font-size: 11px; color: var(--text3); display: flex; gap: 10px; margin-bottom: 10px; }
.au-pb-actions { display: flex; gap: 6px; }

/* ── Template / Quick-start cards ──────── */
.au-tpl-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; border-left: 3px solid var(--accent);
}
.au-tpl-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.au-tpl-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.au-tpl-type {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: var(--bg3); color: var(--text3); text-transform: uppercase;
}
.au-tpl-desc { font-size: 11px; color: var(--text3); line-height: 1.4; margin-bottom: 8px; }
.au-tpl-meta { font-size: 11px; color: var(--text3); display: flex; gap: 10px; margin-bottom: 10px; }
.au-tpl-actions { display: flex; gap: 6px; }
.au-quickstart-chip {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: #eab30815; color: #ca8a04;
}

/* ── Shared action buttons ─────────────── */
.au-run-btn {
  padding: 5px 14px; background: var(--accent); color: #fff; border: none;
  border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.au-run-btn:hover { opacity: .9; }
.au-view-btn {
  padding: 5px 14px; background: var(--bg3); color: var(--text2); border: none;
  border-radius: 6px; font-size: 11px; cursor: pointer;
}
.au-view-btn:hover { color: var(--text); }

/* ── Detail view ───────────────────────── */
.au-detail { padding: 0; }
.au-back-btn {
  background: none; border: none; color: var(--accent); font-size: 12px;
  cursor: pointer; padding: 4px 0; margin-bottom: 12px;
}
.au-back-btn:hover { text-decoration: underline; }
.au-detail-header {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px;
}
.au-detail-info { flex: 1; }
.au-detail-title { font-size: 18px; font-weight: 700; color: var(--text); }
.au-detail-desc { font-size: 13px; color: var(--text3); margin-top: 4px; line-height: 1.5; }
.au-detail-stats {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.au-stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg2); border-radius: 8px; padding: 10px 16px; min-width: 70px;
}
.au-stat-val { font-size: 16px; font-weight: 700; color: var(--text); }
.au-stat-label { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ── Step cards (workflow nodes, playbook stages) ── */
.au-step-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--bg2); border-radius: 8px; margin-bottom: 6px;
}
.au-step-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent)20;
  color: var(--accent); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.au-step-info { flex: 1; }
.au-step-label { font-size: 12px; font-weight: 600; color: var(--text); }
.au-step-type { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ── Variable list ─────────────────────── */
.au-var-list { background: var(--bg2); border-radius: 8px; padding: 8px 12px; }
.au-var-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.au-var-row:last-child { border-bottom: none; }
.au-var-key { color: var(--accent); font-weight: 600; }
.au-var-val { color: var(--text3); }

/* ── Recommendations list ──────────────── */
.au-rec-list {
  margin: 0 0 0 16px; padding: 0; list-style: disc;
  font-size: 12px; color: var(--text2); line-height: 1.6;
}

/* ── Linked template row ───────────────── */
.au-linked-tpl {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; background: var(--bg2); border-radius: 6px;
  margin-bottom: 4px; font-size: 12px; color: var(--text);
}

/* ── Log entries ───────────────────────── */
.au-log-list { margin-top: 8px; }
.au-log-entry {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.au-log-icon { flex-shrink: 0; font-size: 14px; }
.au-log-ok .au-log-icon { color: #22c55e; }
.au-log-err .au-log-icon { color: #ef4444; }
.au-log-text { flex: 1; color: var(--text); }
.au-log-time { color: var(--text3); font-size: 11px; }

/* ═══════════════════════════════════════════
   PHASE S6 — Integrations Screen
═══════════════════════════════════════════ */

.ig-scr-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 0; border-bottom: none;
  margin-bottom: 32px; flex-shrink: 0;
}
.ig-scr-header-left { display: flex; align-items: center; gap: 12px; }
.ig-scr-title {
  margin: 0; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.ig-scr-badge {
  font-size: 11px; font-weight: 600; color: var(--text3);
  background: var(--bg3); padding: 3px 10px; border-radius: 10px;
}
.ig-scr-body { flex: 1; overflow-y: auto; min-height: 0; }
.ig-scr-section { margin-bottom: 28px; }
.ig-scr-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.ig-scr-count {
  font-size: 10px; font-weight: 600; color: var(--text3);
  background: var(--bg3); padding: 1px 6px; border-radius: 8px;
}
.ig-scr-empty {
  padding: 32px; text-align: center; color: var(--text3); font-size: 13px;
}

/* ── Provider card grid ────────────────── */
.ig-scr-grid {
  display: flex; flex-direction: column; gap: 10px;
}
.ig-scr-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 0; overflow: hidden; transition: border-color .15s;
}
.ig-scr-connected { border-color: #22c55e40; }
.ig-scr-card-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer;
}
.ig-scr-card-row:hover { background: var(--bg3)40; }
.ig-scr-icon { font-size: 28px; flex-shrink: 0; }
.ig-scr-info { flex: 1; min-width: 0; }
.ig-scr-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ig-scr-desc { font-size: 12px; color: var(--text3); margin-top: 2px; }
.ig-scr-sync-time { font-size: 10px; color: var(--text3); opacity: .7; margin-top: 2px; }
.ig-scr-card-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ig-scr-cat {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  color: var(--accent); background: var(--accent)18; padding: 2px 6px; border-radius: 4px;
}
.ig-scr-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ig-scr-dot-on { background: #22c55e; }
.ig-scr-dot-off { background: var(--text3); opacity: .3; }
.ig-scr-connect-btn {
  padding: 5px 14px; background: var(--accent); color: #fff; border: none;
  border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.ig-scr-connect-btn:hover { opacity: .9; }
.ig-scr-disconnect-btn {
  padding: 5px 14px; background: var(--bg3); color: var(--text3); border: none;
  border-radius: 6px; font-size: 11px; cursor: pointer;
}
.ig-scr-disconnect-btn:hover { color: #ef4444; }

/* ── Expanded detail ───────────────────── */
.ig-scr-detail {
  padding: 0 18px 16px; border-top: 1px solid var(--border);
}
.ig-scr-detail-sec { margin-top: 14px; }
.ig-scr-detail-label {
  font-size: 11px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}

/* Capabilities */
.ig-scr-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.ig-scr-cap {
  font-size: 10px; padding: 2px 8px; background: var(--bg3);
  border-radius: 4px; color: var(--text2);
}

/* Config form */
.ig-scr-config { display: flex; flex-direction: column; gap: 6px; }
.ig-scr-cfg-row {
  display: flex; align-items: center; gap: 8px;
}
.ig-scr-cfg-label { font-size: 11px; color: var(--text3); min-width: 100px; }
.ig-scr-cfg-input {
  flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 11px;
}
.ig-scr-cfg-input::placeholder { color: var(--text3); }
.ig-scr-cfg-check { margin-right: 4px; }
.ig-scr-cfg-save {
  margin-top: 6px; padding: 5px 14px; background: var(--accent); color: #fff;
  border: none; border-radius: 6px; font-size: 10px; font-weight: 600;
  cursor: pointer; align-self: flex-start;
}
.ig-scr-cfg-save:hover { opacity: .9; }

/* Actions */
.ig-scr-action-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-scr-action-btn {
  padding: 4px 12px; font-size: 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg2); color: var(--text2);
  cursor: pointer; transition: all .15s;
}
.ig-scr-action-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Sync history */
.ig-scr-hist {
  max-height: 180px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.ig-scr-hist-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.ig-scr-hist-row:last-child { border-bottom: none; }
.ig-scr-hist-icon { flex-shrink: 0; }
.ig-scr-hist-action { font-weight: 600; color: var(--text); }
.ig-scr-hist-detail { flex: 1; color: var(--text3); }
.ig-scr-hist-time { color: var(--text3); font-size: 10px; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   SETTINGS SCREEN  (Phase S7)  st- prefix
═══════════════════════════════════════════ */
.st-header { display: flex; align-items: center; justify-content: space-between; padding: 0; margin-bottom: 24px; }
.st-header-left { display: flex; align-items: center; gap: 12px; }
.st-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -.01em; }

/* Tabs */
.st-tabs { display: flex; gap: 4px; padding: 12px 24px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.st-tab { background: none; border: none; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--text2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; border-radius: 6px 6px 0 0; transition: all .15s; }
.st-tab:hover { color: var(--text); background: var(--bg3); }
.st-tab-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Body */
.st-body { padding: 28px 0 24px; overflow-y: auto; flex: 1; }

/* Sections */
.st-section { margin-bottom: 36px; }
.st-section-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.st-section-desc { font-size: 13px; color: var(--text2); margin-bottom: 16px; line-height: 1.6; }
.st-count { font-size: 11px; color: var(--text3); font-weight: 400; margin-left: 6px; }

/* Empty states */
.st-empty { padding: 40px; text-align: center; color: var(--text3); font-size: 14px; }
.st-empty-sm { padding: 16px; text-align: center; color: var(--text3); font-size: 12px; }

/* Buttons */
.st-btn { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); cursor: pointer; transition: all .15s; }
.st-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.st-btn-primary:hover { opacity: .9; }
.st-btn-ghost { background: transparent; color: var(--text2); }
.st-btn-ghost:hover { background: var(--bg3); }
.st-btn-danger { background: transparent; color: #e74c3c; border-color: #e74c3c44; }
.st-btn-danger:hover { background: #e74c3c18; }
.st-btn-sm { padding: 4px 10px; font-size: 11px; }
.st-btn-icon { background: none; border: 1px solid var(--border); border-radius: 4px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text3); font-size: 10px; }
.st-btn-icon:hover { background: var(--bg3); color: var(--text); }
.st-btn-icon:disabled { opacity: .3; cursor: default; }

/* ── Policies tab ── */
.st-policy-grid { display: flex; flex-direction: column; gap: 8px; }
.st-policy-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg2); border-radius: var(--radius-md); cursor: pointer; border: 1px solid var(--border); }
.st-policy-num { cursor: default; }
.st-policy-check { accent-color: var(--accent); width: 14px; height: 14px; }
.st-policy-label { font-size: 13px; color: var(--text); flex: 1; }
.st-policy-input { width: 80px; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; }
.st-policy-actions { display: flex; gap: 10px; margin-top: 16px; }

/* ── Access tab ── */
.st-role-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.st-role-btn { padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--bg2); border: 1px solid var(--border); color: var(--text2); cursor: pointer; transition: all .15s; }
.st-role-btn:hover { background: var(--bg3); border-color: var(--accent); }
.st-role-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.st-perm-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.st-perm-row { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; }
.st-perm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.st-perm-on { background: #2ecc71; }
.st-perm-off { background: #e74c3c; }
.st-perm-label { color: var(--text2); text-transform: capitalize; }

/* ── Activity Log tab ── */
.st-audit-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.st-filter-btn { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; background: var(--bg2); border: 1px solid var(--border); color: var(--text3); cursor: pointer; transition: all .15s; text-transform: capitalize; }
.st-filter-btn:hover { color: var(--text); background: var(--bg3); }
.st-filter-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.st-audit-list { display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; }
.st-audit-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; }
.st-audit-type { font-weight: 600; color: var(--accent); min-width: 100px; text-transform: capitalize; flex-shrink: 0; }
.st-audit-summary { flex: 1; color: var(--text); }
.st-audit-role { color: var(--text3); font-size: 11px; min-width: 60px; text-transform: uppercase; flex-shrink: 0; }
.st-audit-time { color: var(--text3); font-size: 10px; flex-shrink: 0; min-width: 60px; text-align: right; }

/* ── Extensions tab ── */
.st-ext-group-title { font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 8px; }
.st-ext-grid { display: flex; flex-direction: column; gap: 8px; }
.st-ext-card { padding: 14px; background: var(--bg2); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.st-ext-installed { border-left: 3px solid var(--accent); }
.st-ext-header { display: flex; align-items: flex-start; gap: 10px; }
.st-ext-icon { font-size: 22px; flex-shrink: 0; }
.st-ext-info { flex: 1; }
.st-ext-name { font-size: 13px; font-weight: 600; color: var(--text); }
.st-ext-desc { font-size: 11px; color: var(--text3); margin-top: 2px; }
.st-ext-actions { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }

/* ── Dashboard tab ── */
.st-widget-list { display: flex; flex-direction: column; gap: 6px; }
.st-widget-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg2); border-radius: var(--radius-md); border: 1px solid var(--border); transition: border-color .15s; box-shadow: var(--shadow-xs); }
.st-widget-on { border-color: var(--accent); }
.st-widget-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; }
.st-widget-toggle input { accent-color: var(--accent); width: 14px; height: 14px; }
.st-widget-icon { font-size: 16px; }
.st-widget-name { font-size: 13px; font-weight: 600; color: var(--text); }
.st-widget-desc { flex: 1; font-size: 11px; color: var(--text3); }
.st-widget-order { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Data tab ── */
.st-import-zone { margin-bottom: 12px; }
.st-import-label { display: inline-block; padding: 10px 18px; background: var(--bg3); border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; transition: all .15s; }
.st-import-label:hover { border-color: var(--accent); background: var(--bg2); }
.st-import-file { display: none; }
.st-import-text { font-size: 12px; color: var(--text2); font-weight: 600; }
.st-import-preview { padding: 14px; background: var(--bg3); border-radius: 8px; border: 1px solid var(--border); margin-top: 12px; }
.st-import-summary { font-size: 13px; color: var(--text); margin-bottom: 10px; }
.st-import-actions { display: flex; gap: 8px; }

/* ═══════════════════════════════════════════
   HOME SCREEN  (Phase S8A)  hm- prefix
═══════════════════════════════════════════ */

/* ── Section 1: Greeting + COO Brief ── */
.hm-greeting-section { margin-bottom: 36px; }
.hm-greeting-row { display: flex; align-items: baseline; gap: 12px; }
.hm-greeting { font-size: 26px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -.02em; }
.hm-company { font-size: 14px; color: var(--text3); font-weight: 400; }
.hm-role-badge { font-size: 10px; font-weight: 600; letter-spacing: .05em; padding: 3px 10px; border-radius: 4px; background: var(--text); color: var(--bg2); }
.hm-coo-brief { font-size: 14px; color: var(--text2); margin-top: 10px; line-height: 1.6; }

/* ── Buttons ── */
.hm-btn { padding: 7px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; border: 1px solid var(--border); cursor: pointer; transition: all .15s; background: var(--bg2); }
.hm-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.hm-btn-primary:hover { background: var(--accent-hover); }
.hm-btn-ghost { background: transparent; color: var(--text2); }
.hm-btn-ghost:hover { background: var(--bg3); }
.hm-btn-sm { padding: 5px 12px; font-size: 12px; }

/* ── Badge ── */
.hm-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--bg3); color: var(--text3); }
.hm-badge-warn { background: #fef3c7; color: #92400e; }

/* ── Section 2: Executive Console (primary — visually dominant) ── */
.hm-cmd {
  margin: 0; padding: 32px 32px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.hm-cmd-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px;
}
.hm-cmd-brand { display: flex; align-items: center; gap: 12px; }
.hm-cmd-logo { font-size: 20px; color: var(--accent); }
.hm-cmd-title { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.015em; }
.hm-cmd-subtitle { font-size: 13px; color: var(--text3); margin-top: 2px; }
.hm-cmd-input-group { margin-bottom: 16px; }
.hm-cmd-input {
  width: 100%; padding: 16px 20px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 15px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.hm-cmd-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.08); }
.hm-cmd-input:disabled { opacity: .5; cursor: not-allowed; }
.hm-cmd-input::placeholder { color: var(--text3); }
.hm-cmd-actions-row { display: flex; gap: 10px; }
.hm-cmd-btn-primary {
  padding: 12px 28px; border-radius: var(--radius-md);
  background: var(--accent); color: #fff; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s;
  letter-spacing: .01em;
}
.hm-cmd-btn-primary:hover { background: var(--accent-hover); }
.hm-cmd-btn-primary:active { transform: scale(.98); }
.hm-cmd-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.hm-cmd-btn-secondary {
  padding: 12px 22px; border-radius: var(--radius-md);
  background: var(--bg2); color: var(--text2); border: 1px solid var(--border);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.hm-cmd-btn-secondary:hover { background: var(--bg3); border-color: var(--border2); color: var(--text); }
.hm-cmd-btn-secondary:disabled { opacity: .4; cursor: not-allowed; }
.hm-cmd-history {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--bg3);
  font-size: 12px; color: var(--text3);
  display: flex; align-items: center; gap: 8px;
}
.hm-cmd-history-label { font-weight: 500; color: var(--text3); }
.hm-cmd-history-chip {
  padding: 5px 14px; background: var(--bg3); border-radius: 20px;
  cursor: pointer; color: var(--text2); font-size: 12px;
  transition: background .15s;
}
.hm-cmd-history-chip:hover { background: var(--border); }

/* ── Suggested Directives ── */
.hm-suggestions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--bg3);
}
.hm-suggestion-chip {
  padding: 6px 14px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text2); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.hm-suggestion-chip:hover {
  background: var(--bg3); border-color: var(--accent);
  color: var(--accent);
}

/* ── COO Conversation Timeline ── */
.hm-timeline {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--bg3);
}
.hm-timeline-label {
  font-size: 11px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}
.hm-tl-entry {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0; font-size: 13px; line-height: 1.5;
}
.hm-tl-role {
  font-size: 11px; font-weight: 600; flex-shrink: 0;
  width: 32px; text-align: right;
}
.hm-tl-ceo .hm-tl-role { color: var(--text); }
.hm-tl-coo .hm-tl-role { color: var(--accent); }
.hm-tl-text { flex: 1; color: var(--text2); }
.hm-tl-ceo .hm-tl-text { color: var(--text); }
.hm-tl-time { font-size: 11px; color: var(--text3); flex-shrink: 0; }

/* ── Section 3: Company Status Strip ── */
.hm-status-section { margin: 28px 0; }
.hm-status-label-row { margin-bottom: 10px; }
.hm-status-section-label { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.hm-status-strip {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg2);
}
.hm-status-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 18px 12px; cursor: pointer; transition: background .15s;
}
.hm-status-item:hover { background: var(--bg3); }
.hm-status-item:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.hm-status-item:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.hm-status-val { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -.02em; }
.hm-status-val-warn { color: #f59e0b; }
.hm-status-label { font-size: 10px; font-weight: 600; color: var(--text3); margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; }
.hm-status-divider { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }

/* ── Plan Error State ── */
.hm-plan-error {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px; margin-top: 16px;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: var(--radius-md); color: #991b1b;
  font-size: 13px; line-height: 1.5;
}
.hm-plan-error-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.hm-plan-error-text { flex: 1; }

/* ── Status Dot (animated) ── */
.hm-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); display: inline-block;
  animation: hm-pulse 1.2s ease-in-out infinite;
}
@keyframes hm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ── Section 4: Sections / Approvals ── */
.hm-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hm-section-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.005em; }
.hm-section-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px 28px;
}
.hm-approvals-empty .hm-section-header { margin-bottom: 8px; }
.hm-empty-text { font-size: 13px; color: var(--text3); line-height: 1.5; }

/* ── Pending Approvals ── */
.hm-approval-list { display: flex; flex-direction: column; gap: 8px; }
.hm-approval-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; background: var(--bg);
  border-radius: var(--radius-md); border: 1px solid var(--border);
  transition: border-color .15s;
}
.hm-approval-card:hover { border-color: var(--border2); }
.hm-approval-info { flex: 1; }
.hm-approval-title { font-size: 14px; font-weight: 600; color: var(--text); }
.hm-approval-desc { font-size: 13px; color: var(--text2); margin-top: 3px; }
.hm-approval-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text3); margin-top: 6px; }
.hm-approval-risks { color: #92400e; font-weight: 500; }
.hm-approval-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Simulation Result ── */
.hm-sim-result { margin-top: 14px; padding: 16px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.hm-sim-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hm-sim-title { font-size: 14px; font-weight: 600; color: var(--text); }
.hm-sim-risk { font-size: 12px; font-weight: 600; }
.hm-sim-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 12px; }
.hm-sim-metric { background: var(--bg3); border-radius: var(--radius-sm); padding: 8px 10px; text-align: center; }
.hm-sim-metric-val { font-size: 16px; font-weight: 700; color: var(--text); }
.hm-sim-metric-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .03em; }
.hm-sim-impact { font-size: 13px; color: var(--text2); padding: 2px 0; }
.hm-sim-risks-label { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--text3); }
.hm-sim-risk-item { font-size: 12px; color: #92400e; padding: 2px 0; }
.hm-sim-rec { margin-top: 8px; padding: 8px 12px; background: var(--bg3); border-radius: var(--radius-sm); font-size: 12px; color: var(--text2); }
.hm-sim-actions { margin-top: 10px; display: flex; gap: 8px; }

/* ═══════════════════════════════════════════
   DEPARTMENT DASHBOARD + CHAT
═══════════════════════════════════════════ */

.ps-dept-dashboard { max-width: 900px; }

/* Stats Row */
.ps-dept-stats { display: flex; gap: 12px; margin: 16px 0; }
.ps-dept-stat { flex: 1; padding: 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-xs); }
.ps-dept-stat-val { font-size: 22px; font-weight: 700; color: var(--text); }
.ps-dept-stat-label { font-size: 11px; color: var(--text3); margin-top: 2px; }
.ps-stat-pending { color: var(--text2); }
.ps-stat-active { color: #00c4b4; }
.ps-stat-review { color: #f59e0b; }
.ps-stat-done { color: #22c55e; }

/* Progress Bar */
.ps-dept-progress { position: relative; height: 24px; background: var(--bg3); border-radius: 12px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--border); }
.ps-dept-progress-bar { height: 100%; background: var(--accent); border-radius: 12px; transition: width .3s; min-width: 2px; }
.ps-dept-progress-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 600; color: var(--text); }

/* Department Head */
.ps-dept-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 16px; }
.ps-dept-head-info { display: flex; align-items: center; gap: 12px; }
.ps-dept-head-avatar { font-size: 28px; }
.ps-dept-head-name { font-size: 14px; font-weight: 700; color: var(--text); }
.ps-dept-head-role { font-size: 11px; color: var(--text3); }

/* Worker Agents Grid */
.ps-dept-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ps-dept-agent-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.ps-dept-agent-card.ps-agent-working { border-color: #22c55e40; background: #22c55e08; }
.ps-dept-agent-avatar { font-size: 20px; flex-shrink: 0; }
.ps-dept-agent-info { flex: 1; }
.ps-dept-agent-name { font-size: 12px; font-weight: 600; color: var(--text); }
.ps-dept-agent-role { font-size: 10px; color: var(--text3); }
.ps-dept-agent-status { font-size: 10px; }

/* Department Head Chat */
.ps-dept-chat { margin-top: 16px; padding: 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; }
.ps-chat-messages { max-height: 300px; overflow-y: auto; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.ps-chat-hint { font-size: 12px; color: var(--text3); font-style: italic; padding: 16px; text-align: center; }
.ps-chat-msg-ceo { padding: 8px 12px; background: rgba(99,102,241,.1); border-radius: 8px; font-size: 13px; color: var(--text); align-self: flex-end; max-width: 80%; }
.ps-chat-msg-head { padding: 8px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); align-self: flex-start; max-width: 80%; }
.ps-chat-input-row { display: flex; gap: 8px; }
.ps-chat-input { flex: 1; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; outline: none; }
.ps-chat-input:focus { border-color: var(--accent); }
.ps-chat-send { padding: 8px 16px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ps-chat-send:hover { opacity: .9; }

/* ═══════════════════════════════════════════
   DEPARTMENTS SCREEN  (dp-*)
═══════════════════════════════════════════ */

.dp-header { padding: 0; margin-bottom: 32px; }
.dp-title  { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: -.01em; }

.dp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 0;
}

.dp-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  cursor: pointer;
  transition: border-color .15s;
}
.dp-card:hover { border-color: var(--accent); }

.dp-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dp-card-icon { font-size: 28px; line-height: 1; }
.dp-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.dp-card-head { font-size: 12px; color: var(--text3); margin-top: 2px; }

.dp-card-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.dp-card-stat  { font-size: 12px; color: var(--text3); }
.dp-card-stat-val { font-weight: 700; color: var(--text); margin-right: 3px; }

/* ── Settings: API Keys / Agents / Account ── */
.st-apikeys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.st-agents-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.st-account-actions { padding: 20px 0; }

/* ═══════════════════════════════════════════════
   BOOT SEQUENCE  —  .bs-* classes
   Full-screen terminal animation overlay
═══════════════════════════════════════════════ */

.bs-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  background: #000;
  font-family: 'VT323', 'Share Tech Mono', 'Courier New', monospace;
}

/* CRT scanlines */
.bs-scanlines {
  position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,255,0,.03) 0px,
    rgba(0,255,0,.03) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* CRT vignette */
.bs-vignette {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7) 100%);
  pointer-events: none;
}

.bs-container {
  position: relative; z-index: 3;
  width: 90%; max-width: 680px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}

/* Logo */
.bs-logo {
  font-size: 32px; font-weight: 700; letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(74,255,0,.5);
}
.bs-g { color: #4aff00; }
.bs-c { color: #00d4ff; }
.bs-p { color: #ff00aa; }
.bs-d { color: #1a3300; }

/* Terminal window */
.bs-terminal {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #1a3300;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(74,255,0,.1), inset 0 0 60px rgba(0,0,0,.5);
}
.bs-terminal-header {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #111; border-bottom: 1px solid #1a3300;
}
.bs-dot { width: 10px; height: 10px; border-radius: 50%; }
.bs-dot--red    { background: #ff5f57; }
.bs-dot--yellow { background: #febc2e; }
.bs-dot--green  { background: #28c840; }
.bs-terminal-title {
  margin-left: 8px; font-size: 11px; color: #4aff0080;
  letter-spacing: 2px;
}

.bs-terminal-body {
  padding: 16px 18px;
  min-height: 240px; max-height: 400px;
  overflow-y: auto;
}

/* Individual lines */
.bs-line {
  font-size: 13px; line-height: 1.8; letter-spacing: 1px;
  opacity: 0;
  animation: bsLineIn .3s ease-out forwards;
}
@keyframes bsLineIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

.bs-line--green  { color: #4aff00; }
.bs-line--pink   { color: #ff00aa; }
.bs-line--blue   { color: #00d4ff; }
.bs-line--amber  { color: #ffaa00; }
.bs-line--red    { color: #ff4444; }
.bs-line--teal   { color: #00ffcc; }
.bs-line--bright { color: #fff; text-shadow: 0 0 10px var(--border); }
.bs-line--muted  { color: #333; }

/* Status bar at bottom */
.bs-terminal-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid #1a3300;
  font-size: 11px; color: #4aff0080; letter-spacing: 1px;
}

/* Spinner */
.bs-spinner {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #4aff0040;
  border-top-color: #4aff00;
  animation: bsSpin .8s linear infinite;
}
@keyframes bsSpin { to { transform: rotate(360deg); } }

/* Fade out transition */
.bs-fade-out {
  animation: bsFadeOut .6s ease-in forwards;
}
@keyframes bsFadeOut { to { opacity: 0; } }


/* ═══════════════════════════════════════════════
   DASHBOARD SCREEN  —  .db-* classes
   Pixel-perfect match to bosrai-dashboard-v2 mockup
═══════════════════════════════════════════════ */

/* ── Dashboard root ──────────────────────── */
#dashboardView {
  background: var(--db-bg, #0c0f14);
  color: var(--db-text-secondary, #a0aec0);
  font-family: var(--db-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.6;
  overflow: hidden;
  padding: 0;
  position: relative;
}
/* Scanlines removed — professional look */
#dashboardView::before { display: none; }

.dashboard-mode #sidebar {
  display: none !important;
}

/* ── CSS Variables — BOS_R_AI design (warm cream light) ───── */
#dashboardView {
  --db-bg:           oklch(97.2% 0.012 85);
  --db-surface:      oklch(98.6% 0.010 85);
  --db-surface2:     oklch(95.5% 0.014 85);
  --db-border:       oklch(89% 0.014 85);
  --db-border2:      oklch(85% 0.014 85);
  --db-text-primary: oklch(16% 0.010 260);
  --db-text-secondary: oklch(32% 0.012 260);
  --db-text-muted:   oklch(50% 0.012 80);
  --db-text-hint:    oklch(68% 0.015 80);
  --db-accent:       oklch(62% 0.20 145);
  --db-accent-dim:   oklch(95% 0.06 145);
  --db-accent-border: oklch(78% 0.10 145);
  --db-green:        oklch(78% 0.24 142);
  --db-green-dim:    oklch(95% 0.06 145);
  --db-blue:         oklch(78% 0.16 210);
  --db-pink:         oklch(65% 0.28 355);
  --db-amber:        oklch(70% 0.15 70);
  --db-red:          oklch(62% 0.17 25);
  --db-teal:         oklch(62% 0.15 210);
  --db-purple:       oklch(42% 0.22 355);
  --db-font-body:   'IBM Plex Sans', 'DM Sans', system-ui, sans-serif;
  --db-font-mono:   'IBM Plex Mono', 'JetBrains Mono', monospace;
  --db-font-terminal: 'IBM Plex Mono', monospace;
  --db-font-serif:  'Instrument Serif', ui-serif, Georgia, serif;
  --db-radius: 10px;
  --db-radius-lg: 12px;
  /* Compat aliases for old var references */
  --db-green2: oklch(95% 0.06 145);
  --db-green3: oklch(50% 0.012 80);
  --db-green4: oklch(95.5% 0.014 85);
  --db-muted:  oklch(50% 0.012 80);
  --db-text:   oklch(32% 0.012 260);
  --db-dim:    oklch(93% 0.013 85);
}

/* ── Inline-hex override layer — retargets hardcoded dark colors to design palette ── */
/* These selectors catch common inline `style="background:#...;"` values used throughout
   dashboard-screen.js so the surface colors flip cream-light without touching the JS. */
#dashboardView [style*="background:var(--bg3)"],
#dashboardView [style*="background: var(--bg3)"] { background: var(--db-bg) !important; }
#dashboardView [style*="background:var(--bg2)"],
#dashboardView [style*="background: var(--bg2)"] { background: var(--db-surface) !important; }
#dashboardView [style*="background:#151a24"],
#dashboardView [style*="background: #151a24"] { background: var(--db-surface2) !important; }
#dashboardView [style*="background:#1a1f2e"],
#dashboardView [style*="background: #1a1f2e"] { background: var(--db-surface2) !important; }
#dashboardView [style*="background:#0c0f14"],
#dashboardView [style*="background: #0c0f14"] { background: var(--db-bg) !important; }

#dashboardView [style*="border:1px solid var(--border)"],
#dashboardView [style*="border: 1px solid var(--border)"] { border-color: var(--db-border) !important; }
#dashboardView [style*="border:1px solid #2a2f3e"],
#dashboardView [style*="border: 1px solid #2a2f3e"] { border-color: var(--db-border) !important; }
#dashboardView [style*="border:1px solid #2a3450"],
#dashboardView [style*="border: 1px solid #2a3450"] { border-color: var(--db-border2) !important; }

#dashboardView [style*="color:var(--text)"],
#dashboardView [style*="color: var(--text)"],
#dashboardView [style*="color:#e0e6f0"],
#dashboardView [style*="color: #e0e6f0"],
#dashboardView [style*="color:#e2e8f0"],
#dashboardView [style*="color: #e2e8f0"] { color: var(--db-text-primary) !important; }

#dashboardView [style*="color:var(--text2)"],
#dashboardView [style*="color: var(--text2)"],
#dashboardView [style*="color:#a0aec0"],
#dashboardView [style*="color: #a0aec0"] { color: var(--db-text-secondary) !important; }

#dashboardView [style*="color:var(--text3)"],
#dashboardView [style*="color: var(--text3)"],
#dashboardView [style*="color:#6b7794"],
#dashboardView [style*="color: #6b7794"],
#dashboardView [style*="color:#888"],
#dashboardView [style*="color: #888"] { color: var(--db-text-muted) !important; }

#dashboardView [style*="color:#666"],
#dashboardView [style*="color: #666"],
#dashboardView [style*="color:#3d4760"],
#dashboardView [style*="color: #3d4760"] { color: var(--db-text-hint) !important; }

/* Brand logo letters in topbar — copy design's BOS=green, R=cyan, AI=magenta */
.db-topbar-logo .db-logo-b   { color: var(--db-green) !important; }
.db-topbar-logo .db-logo-sep { color: var(--db-text-hint) !important; }
.db-topbar-logo .db-logo-r   { color: var(--db-blue) !important; }
.db-topbar-logo .db-logo-a   { color: var(--db-pink) !important; }

/* ── 3-column grid + topbar row ──────────── */
.db-layout {
  display: grid;
  grid-template-columns: 210px 1fr 290px;
  grid-template-rows: 40px 1fr;
  height: 100vh;
}
.db-layout--no-rpanel {
  grid-template-columns: 210px 1fr;
}

/* ═══════════════════════════════════════════
   TOPBAR — spans all 3 columns
═══════════════════════════════════════════ */
.db-topbar {
  grid-column: 1 / -1;
  background: var(--db-surface);
  border-bottom: 1px solid var(--db-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 0;
  flex-shrink: 0;
}
.db-topbar-logo {
  font-family: 'Share Tech Mono', monospace;
  font-size: 20px;
  letter-spacing: 3px;
  margin-right: 20px;
}
.db-topbar-logo .db-logo-b  { color: #4aff00; }
.db-topbar-logo .db-logo-sep { color: #1a3300; }
.db-topbar-logo .db-logo-r  { color: #00d4ff; }
.db-topbar-logo .db-logo-a  { color: #ff00aa; }

.db-topbar-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.db-pill {
  font-family: var(--db-font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border: 1px solid var(--db-border2);
  border-radius: 6px;
  color: var(--db-text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.db-pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--db-green);
  animation: dbPulse 1.5s infinite;
}
@keyframes dbPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
.db-pulse { animation: dbPulse 1.5s infinite; }
.db-pill--run   { border-color: var(--brand-magenta),0.2); color: var(--db-amber); }
.db-pill--brain { border-color: rgba(96,165,250,0.2); color: var(--db-blue); }

.db-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-credit-badge {
  font-family: var(--db-font-mono);
  font-size: 10px;
  color: #00d4c8;
  background: rgba(0,212,200,0.06);
  border: 1px solid rgba(0,212,200,0.15);
  border-radius: 6px;
  padding: 3px 10px;
}
.db-user-badge {
  font-size: 11px;
  color: var(--db-text-muted);
  border: 1px solid var(--db-border2);
  border-radius: 6px;
  padding: 3px 10px;
}

/* ═══════════════════════════════════════════
   LEFT SIDEBAR — Nav + Agent dots + Library
═══════════════════════════════════════════ */
.db-lpanel {
  background: var(--db-surface);
  border-right: 1px solid var(--db-border2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px 0;
}

/* Nav labels */
.db-nav-label {
  font-family: var(--db-font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--db-text-hint);
  padding: 12px 14px 4px;
}

/* Nav items */
.db-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: var(--db-font-body);
  font-size: 13px;
  color: var(--db-text-muted);
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: all 0.15s;
}
.db-nav-item:hover {
  background: var(--bg3);
  color: var(--db-text-secondary);
}
.db-nav-item.active {
  background: var(--bg3);
  color: var(--text);
  border-left-color: var(--accent);
}
.db-nav-item.active .db-nav-icon {
  color: var(--accent);
}
/* Nav icon — wraps an inline SVG. Fixed 16x16 box keeps alignment
   consistent across all rows; flex centering means the 14x14 SVG
   sits perfectly. Color is inherited via currentColor so the icon
   tints with the nav-item color. */
.db-nav-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text3);
}
.db-nav-item.active .db-nav-icon { color: var(--accent); }
.db-nav-icon svg { display: block; width: 14px; height: 14px; }

/* Agent dot rows */
.db-agent-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.db-agent-row:hover {
  background: var(--bg3);
}
.db-agent-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-agent-dot.db-dot-running {
  animation: dbPulse 1s infinite;
}
.db-agent-acronym {
  font-family: var(--db-font-mono);
  font-size: 11px;
  min-width: 30px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.db-agent-row-info {
  flex: 1;
  min-width: 0;
}
.db-agent-dept {
  font-size: 10px;
  letter-spacing: 1px;
  display: block;
}
.db-agent-status-tiny {
  font-family: var(--db-font-mono);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--db-text-hint);
  flex-shrink: 0;
}
.db-agent-task-preview {
  font-size: 9px;
  color: var(--db-green3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  display: block;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════
   CENTER MAIN — Greeting + Feed + Brain + Task bar
═══════════════════════════════════════════ */
.db-main {
  background: var(--db-bg);
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Greeting */
/* ═══════════════════════════════════════════════
   GREETING — Claude-design editorial moment
   Oversized Instrument Serif headline + IBM Plex Mono subline.
   "Good morning, Yunus" should feel like the cover of a book,
   not a SaaS heading.
═══════════════════════════════════════════════ */
.db-greeting { margin-bottom: 28px; padding-top: 4px; }
.db-greeting-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.db-greeting-text {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.012em;
  line-height: 1.02;
  margin: 0;
}
.db-greeting-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text3);
  letter-spacing: 0.02em;
  margin-top: 14px;
  line-height: 1.6;
  max-width: 540px;
}
@media (max-width: 900px) {
  .db-greeting-text { font-size: 36px; }
}

/* ═══════════════════════════════════════════
   ATTENTION FEED — items with ::before left bar
═══════════════════════════════════════════ */
.db-feed-label {
  font-family: var(--db-font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--db-text-muted);
  margin: 8px 0 6px;
}

.db-feed-item {
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: var(--db-radius);
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s;
}
.db-feed-item:hover { border-color: var(--db-border2); }

/* Colored left bar via ::before */
.db-feed-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
}
.db-feed-item--completed::before { background: var(--db-green); }
.db-feed-item--approval::before  { background: var(--db-amber); }
.db-feed-item--alert::before     { background: var(--db-red); }
.db-feed-item--running::before   { background: var(--db-blue); }
.db-feed-item--library::before   { background: var(--db-teal); }
.db-feed-item--pending::before   { background: #333; }

/* Feed top row */
.db-feed-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

/* Status badge */
.db-feed-badge {
  font-family: var(--db-font-mono);
  font-size: 9px;
  padding: 2px 8px;
  letter-spacing: 1px;
  border: 1px solid;
  border-radius: 4px;
  white-space: nowrap;
}
.db-feed-badge--green  { color: var(--db-green); border-color: rgba(74,222,128,0.2); background: var(--db-green-dim); }
.db-feed-badge--amber  { color: var(--db-amber); border-color: var(--brand-magenta),0.2); background: var(--brand-magenta),0.06); animation: dbPulse 1.5s infinite; }
.db-feed-badge--red    { color: var(--db-red);   border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.06); }
.db-feed-badge--blue   { color: var(--db-blue);  border-color: rgba(96,165,250,0.2); background: rgba(96,165,250,0.06); }
.db-feed-badge--dim    { color: var(--db-text-muted); border-color: var(--db-border); }

/* Agent badge in feed */
.db-feed-agent {
  font-family: var(--db-font-mono);
  font-size: 9px;
  padding: 2px 7px;
  border: 1px solid var(--db-border);
  border-radius: 4px;
}

/* Time label */
.db-feed-time {
  font-size: 9px;
  color: var(--db-muted);
  margin-left: auto;
}

/* Title + sub */
.db-feed-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--db-text-primary);
  margin-bottom: 3px;
}
.db-feed-sub {
  font-size: 12px;
  color: var(--db-text-muted);
  line-height: 1.5;
}

/* Actions row */
.db-feed-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* Feed empty */
.db-feed-empty {
  text-align: center; padding: 32px 16px;
  color: var(--db-text-hint); font-size: 13px;
}

/* Skeleton */
.db-feed-skeleton {
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 12px;
}

/* ═══════════════════════════════════════════
   BRAIN BRIEF — collapsed / expanded
═══════════════════════════════════════════ */
.db-brain-collapsed {
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  padding: 12px 14px;
  border-radius: var(--db-radius-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.db-brain-collapsed:hover { border-color: var(--db-border2); }
.db-brain-icon    { font-size: 16px; color: var(--db-blue); background: rgba(96,165,250,0.1); padding: 6px; border-radius: 8px; }
.db-brain-summary { flex: 1; font-size: 12px; color: var(--db-text-secondary); }
.db-brain-score   {
  font-family: var(--db-font-mono);
  font-size: 10px;
  color: var(--db-amber);
  border: 1px solid var(--brand-magenta),0.2);
  border-radius: 4px;
  padding: 2px 8px;
}
.db-brain-expand  { font-size: 10px; color: var(--db-text-hint); margin-left: 4px; }

/* Expanded panel */
.db-brain-expanded {
  border: 1px solid var(--db-border2);
  background: var(--db-surface);
  padding: 12px;
  position: relative;
  display: none;
}
.db-brain-expanded.db-brain-show { display: block; }
.db-brain-expanded::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 8px; height: 8px;
  border-top: 1px solid var(--db-green);
  border-left: 1px solid var(--db-green);
}
.db-brain-expanded::after {
  content: ''; position: absolute;
  bottom: 0; right: 0; width: 8px; height: 8px;
  border-bottom: 1px solid var(--db-pink);
  border-right: 1px solid var(--db-pink);
}
.db-brain-row {
  display: flex; gap: 8px;
  padding: 3px 0; font-size: 11px;
  line-height: 1.5;
}
.db-brain-lbl {
  color: var(--db-muted);
  min-width: 90px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   NEW TASK INPUT BAR
═══════════════════════════════════════════ */
.db-newtask {
  display: flex;
  align-items: center;
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  padding: 10px 14px;
  gap: 8px;
  margin-top: 4px;
  border-radius: var(--db-radius);
}
.db-newtask-prompt {
  font-family: var(--db-font-mono);
  font-size: 12px;
  color: var(--db-text-hint);
}
.db-newtask-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--db-text-primary);
  font-family: var(--db-font-body);
  font-size: 13px;
  caret-color: var(--db-accent);
}
.db-newtask-input::placeholder { color: var(--db-text-hint); }
.db-newtask-btn {
  font-family: var(--db-font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border: none;
  border-radius: var(--db-radius);
  color: #000;
  cursor: pointer;
  background: linear-gradient(135deg, #00c4b4, #00a89a);
  box-shadow: 0 0 20px rgba(0,196,180,0.15);
  transition: all 0.15s;
}
.db-newtask-btn:hover {
  background: linear-gradient(135deg, #00d4c4, #00b8aa);
  box-shadow: 0 0 24px rgba(0,196,180,0.25);
}

/* ═══════════════════════════════════════════
   RIGHT PANEL — COO Chat
═══════════════════════════════════════════ */
.db-rpanel {
  background: var(--db-surface);
  border-left: 1px solid var(--db-border2);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}
.db-rp-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--db-border2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.db-rp-title {
  font-family: var(--db-font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--db-text-hint);
}
.db-rp-status {
  font-family: var(--db-font-mono);
  font-size: 9px;
  color: var(--db-green);
  display: flex;
  align-items: center;
  gap: 4px;
}
.db-rp-body {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
}

/* Memory banner */
.db-memory-banner {
  border: 1px solid var(--db-dim);
  background: rgba(74,255,0,0.02);
  padding: 7px 9px;
  font-size: 10px;
  color: var(--db-green3);
  line-height: 1.7;
}
.db-memory-banner span { color: var(--db-muted); }

/* Chat messages */
.db-chat-msg {
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 12px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
}
.db-chat-msg--ai {
  color: var(--db-text-secondary);
  background: var(--db-surface2);
  border-color: var(--db-border);
}
.db-chat-msg--ai::before {
  content: 'COO ';
  font-family: var(--db-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--db-green);
}
.db-chat-msg--user {
  color: var(--db-text-primary);
  background: var(--db-accent-dim);
  border-color: var(--db-accent-border);
}
.db-chat-msg--user::before {
  content: '';
}
.db-chat-msg--error {
  color: var(--db-red);
  border-color: #330000;
}
.db-chat-msg--error::before {
  content: 'ERR_ ';
  color: var(--db-red);
}
.db-chat-msg--loading {
  color: var(--db-green3);
  border-color: var(--db-dim);
  opacity: 0.6;
}
.db-chat-msg--loading::before {
  content: 'COO_ ';
  color: var(--db-green3);
}
.db-chat-spacer { flex: 1; }

/* ── Plan approval card ─────────────────────────────────── */
.db-plan-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 14px 16px;
  margin: 8px 0;
  position: relative;
}
.db-plan-card::before {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 10px; height: 10px;
  border-top: 2px solid var(--db-green); border-left: 2px solid var(--db-green);
}
.db-plan-card::after {
  content: '';
  position: absolute; bottom: 3px; right: 3px;
  width: 10px; height: 10px;
  border-bottom: 2px solid var(--db-green); border-right: 2px solid var(--db-green);
}
.db-plan-header {
  font-size: 10px;
  color: var(--db-green);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.db-plan-title {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--db-green);
  margin-bottom: 4px;
}
.db-plan-summary {
  font-size: 10px;
  color: var(--db-muted);
  margin-bottom: 10px;
}
.db-plan-label {
  font-size: 9px;
  color: var(--db-green3);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.db-plan-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
}
.db-plan-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-plan-agent {
  min-width: 30px;
  font-size: 10px;
  flex-shrink: 0;
}
.db-plan-task-title {
  flex: 1;
  color: var(--db-green3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-plan-credits {
  font-size: 9px;
  color: var(--db-muted);
  flex-shrink: 0;
}
.db-plan-footer {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--db-muted);
  letter-spacing: 1px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #0a1400;
}
.db-plan-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.db-plan-approve {
  flex: 1;
  background: linear-gradient(135deg, #00c4b4, #00a89a);
  color: #000;
  border: none;
  border-radius: var(--db-radius);
  padding: 10px 16px;
  font-family: var(--db-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 20px rgba(0,196,180,0.15);
}
.db-plan-approve:hover {
  background: linear-gradient(135deg, #00d4c4, #00b8aa);
  box-shadow: 0 0 24px rgba(0,196,180,0.25);
}
.db-plan-cancel {
  background: transparent;
  color: var(--db-text-secondary);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 10px 16px;
  font-family: var(--db-font-body);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.db-plan-cancel:hover {
  border-color: var(--db-red);
  color: var(--db-red);
}
.db-plan-status {
  font-size: 11px;
  color: var(--db-green);
  padding: 8px 0;
}
.db-plan-dispatch-line {
  font-size: 10px;
  padding: 3px 0;
}
.db-plan-dispatch-note {
  font-size: 9px;
  color: var(--db-muted);
  margin-top: 8px;
  letter-spacing: 1px;
}
.db-plan-error {
  font-size: 10px;
  color: var(--db-red);
  padding: 4px 0;
}

/* ── Center column plan card ─────────────── */
.db-center-plan {
  margin-bottom: 12px;
  animation: dbPlanSlideIn 0.3s ease-out;
}
@keyframes dbPlanSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.db-feed-item--plan {
  border-color: #553300 !important;
  background: rgba(255, 170, 0, 0.04);
  position: relative;
}
.db-feed-item--plan::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, #ffaa00, transparent);
}
.db-center-plan-title {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: #ffaa00;
  margin: 8px 0 4px;
  letter-spacing: 1px;
}
.db-center-plan-summary {
  font-size: 10px;
  color: var(--db-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}
.db-center-plan-tasks {
  margin-bottom: 8px;
}

/* ── Task result content ─────────────────── */
.db-result-content {
  color: var(--db-text-secondary);
  font-family: var(--db-font-body);
  font-size: 13px;
  line-height: 1.8;
  padding: 20px;
  margin-top: 8px;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
  max-height: 60vh;
}
.db-result-content h1,
.db-result-content h2,
.db-result-content h3 {
  color: var(--db-text-primary);
  font-family: var(--db-font-body);
  font-weight: 600;
  font-size: 18px;
  margin: 16px 0 8px;
}
.db-result-content h1 { font-size: 22px; }
.db-result-content strong,
.db-result-content b {
  color: var(--db-text-primary);
  font-weight: 600;
}
.db-result-content ul,
.db-result-content ol {
  padding-left: 20px;
}
.db-result-content li {
  margin-bottom: 4px;
}
.db-result-content p {
  margin: 8px 0;
}
.db-result-content code {
  background: var(--db-bg);
  color: var(--db-blue);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--db-font-mono);
  font-size: 12px;
}
.db-result-content pre {
  background: var(--db-bg);
  border: 1px solid var(--db-border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
}
.db-result-content a {
  color: var(--db-blue);
}

/* Blinking cursor */
.db-cursor {
  display: inline-block;
  width: 7px; height: 12px;
  background: var(--db-green);
  margin-left: 2px;
  animation: dbBlink 1s infinite;
  vertical-align: middle;
}
@keyframes dbBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* Quick actions */
.db-quick-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.db-qa-btn {
  font-family: var(--db-font-body);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--db-border);
  border-radius: 6px;
  color: var(--db-text-muted);
  cursor: pointer;
  background: transparent;
  transition: all 0.15s;
}
.db-qa-btn:hover {
  border-color: var(--db-border2);
  color: var(--db-text-primary);
  background: var(--bg3);
}

/* ═══════════════════════════════════════════
   BACK BUTTON
═══════════════════════════════════════════ */
.db-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--db-font-body);
  font-size: 12px;
  color: var(--db-text-muted);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 6px 14px;
  cursor: pointer;
  background: transparent;
  margin-bottom: 14px;
  transition: all 0.15s;
}
.db-back-btn:hover {
  color: var(--db-text-primary);
  border-color: var(--db-border2);
}

/* ═══════════════════════════════════════════
   SECTION HEADER + FILTER ROW
═══════════════════════════════════════════ */
.db-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--db-border2);
}
.db-section-empty {
  padding: 32px 16px;
  color: var(--db-muted);
  font-size: 11px;
  line-height: 2;
  letter-spacing: 0.5px;
}
.db-filter-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   TASK LIST + TASK ROWS
═══════════════════════════════════════════ */
.db-task-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  border-radius: var(--db-radius);
  transition: border-color 0.15s;
}
.db-task-row:hover {
  border-color: var(--db-border2);
}
.db-task-title {
  flex: 1;
  font-size: 11px;
  color: var(--db-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-task-time {
  font-size: 9px;
  color: var(--db-muted);
  white-space: nowrap;
}
.db-task-actions {
  display: flex;
  gap: 4px;
}

/* ═══════════════════════════════════════════
   PROJECT CARDS
═══════════════════════════════════════════ */
.db-project-card {
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: var(--db-radius);
  transition: border-color 0.15s;
}
.db-project-card:hover {
  border-color: var(--db-border2);
}

/* ═══════════════════════════════════════════
   INTEGRATION CARDS
═══════════════════════════════════════════ */
.db-integration-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  border-radius: var(--db-radius);
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.db-integration-card:hover {
  border-color: var(--db-border2);
}

/* ═══════════════════════════════════════════
   SETTINGS FORM
═══════════════════════════════════════════ */
.db-settings-group {
  margin-bottom: 14px;
}
.db-settings-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--db-muted);
  margin-bottom: 6px;
}
.db-settings-input {
  background: var(--db-surface2);
  border: 1px solid var(--db-border);
  border-radius: 6px;
  color: var(--db-text-primary);
  font-family: var(--db-font-mono);
  font-size: 12px;
  padding: 6px 10px;
  width: 80px;
  outline: none;
  caret-color: var(--db-accent);
}
.db-settings-input:focus {
  border-color: var(--db-accent-border);
}

/* ═══════════════════════════════════════════
   AGENT VIEW HEADER
═══════════════════════════════════════════ */
.db-agent-header {
  border-bottom: 1px solid var(--db-border2);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

/* Chat input */
.db-chat-input-wrap {
  border-top: 1px solid var(--db-border);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-chat-prompt { font-family: var(--db-font-mono); font-size: 12px; color: var(--db-text-hint); }
.db-chat-input {
  flex: 1;
  background: var(--db-surface2);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  outline: none;
  color: var(--db-text-primary);
  font-family: var(--db-font-body);
  font-size: 13px;
  padding: 6px 10px;
  caret-color: var(--db-accent);
}
.db-chat-input::placeholder { color: var(--db-text-hint); }

/* ═══════════════════════════════════════════
   SHARED BUTTONS (mockup style)
═══════════════════════════════════════════ */
.db-btn {
  font-family: var(--db-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 6px 14px;
  border: 1px solid;
  border-radius: var(--db-radius);
  cursor: pointer;
  background: transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.db-btn--green {
  color: #000;
  font-weight: 600;
  background: linear-gradient(135deg, #00c4b4, #00a89a);
  border-color: transparent;
  box-shadow: 0 0 20px rgba(0,196,180,0.15);
}
.db-btn--green:hover {
  background: linear-gradient(135deg, #00d4c4, #00b8aa);
  box-shadow: 0 0 24px rgba(0,196,180,0.25);
}
.db-btn--amber {
  color: var(--db-amber);
  border-color: var(--brand-magenta),0.3);
  background: var(--brand-magenta),0.06);
}
.db-btn--amber:hover {
  background: var(--brand-magenta),0.12);
  border-color: var(--db-amber);
}
.db-btn--dim {
  color: var(--db-text-secondary);
  border-color: var(--db-border);
}
.db-btn--dim:hover {
  color: var(--db-text-primary);
  border-color: var(--db-border2);
  background: var(--border);
}
.db-btn:disabled { opacity: 0.3; cursor: default; }

/* ═══════════════════════════════════════════
   MODAL — Task Result Viewer
═══════════════════════════════════════════ */
.db-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.db-modal {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  width: 90%; max-width: 640px; max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.db-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--db-border);
  font-family: var(--db-font-body);
  font-size: 16px; font-weight: 600; color: var(--db-text-primary);
}
.db-modal-close {
  background: none; border: none; color: var(--db-text-muted);
  font-size: 18px; cursor: pointer;
}
.db-modal-close:hover { color: var(--db-red); }
.db-modal-body {
  padding: 20px;
  overflow-y: auto;
  font-size: 13px; color: var(--db-text-secondary); line-height: 1.7;
}
.db-modal-body pre {
  background: var(--db-bg); border: 1px solid var(--db-border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto; font-size: 12px; color: var(--db-text-secondary);
  white-space: pre-wrap;
}

/* ═══════════════════════════════════════════
   SKELETON / EMPTY
═══════════════════════════════════════════ */
.db-skeleton {
  background: linear-gradient(90deg, var(--db-surface) 25%, var(--db-surface2) 50%, var(--db-surface) 75%);
  background-size: 200% 100%;
  animation: dbShimmer 1.5s infinite;
  border-radius: var(--db-radius);
}
@keyframes dbShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */
#dashboardView ::-webkit-scrollbar { width: 3px; }
#dashboardView ::-webkit-scrollbar-track { background: var(--db-bg); }
#dashboardView ::-webkit-scrollbar-thumb { background: var(--db-border2); }

/* ═══════════════════════════════════════════
   BRAIN CARD (Sprint 5C)
═══════════════════════════════════════════ */
.db-brain-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}
.db-brain-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.db-brain-card-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(0,196,180,0.08);
  border: 1px solid rgba(0,196,180,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.db-brain-card-title {
  font-family: var(--db-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--db-text-primary);
}
.db-brain-card-subtitle {
  font-family: var(--db-font-mono);
  font-size: 10px;
  color: var(--db-text-hint);
}
.db-brain-card-toggle {
  margin-left: auto;
  font-family: var(--db-font-mono);
  font-size: 9px;
  color: var(--db-text-hint);
  cursor: pointer;
  background: none;
  border: 1px solid var(--db-border);
  border-radius: 5px;
  padding: 3px 8px;
}
.db-brain-card-toggle:hover {
  color: var(--db-text-secondary);
  border-color: var(--db-border2);
}
.db-brain-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.db-brain-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--db-bg);
  border: 1px solid var(--db-border);
}
.db-brain-badge {
  font-family: var(--db-font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.db-brain-badge.insight { background: rgba(0,196,180,0.1); color: #00d4c8; }
.db-brain-badge.opportunity { background: rgba(74,222,128,0.1); color: #4ade80; }
.db-brain-badge.alert { background: var(--brand-magenta),0.1); color: var(--brand-magenta); }
.db-brain-badge.priority { background: rgba(96,165,250,0.1); color: #60a5fa; }
.db-brain-badge.success { background: rgba(74,222,128,0.1); color: #4ade80; }
.db-brain-item-text {
  font-size: 12px;
  color: var(--db-text-secondary);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   TASK ROW — flat one-line rows (Sprint 5C)
═══════════════════════════════════════════ */
.db-task-agent-pill {
  font-family: var(--db-font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}
.db-task-agent-pill.CMO { background: rgba(244,114,182,0.08); color: #f472b6; }
.db-task-agent-pill.CTO { background: rgba(96,165,250,0.08); color: #60a5fa; }
.db-task-agent-pill.CFO { background: var(--brand-magenta),0.08); color: var(--brand-magenta); }
.db-task-agent-pill.CRO { background: rgba(248,113,113,0.08); color: #f87171; }
.db-task-agent-pill.CGO { background: rgba(45,212,191,0.08); color: #2dd4bf; }
.db-task-agent-pill.COO { background: rgba(74,222,128,0.08); color: #4ade80; }
.db-task-status-pill {
  font-family: var(--db-font-mono);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}
.db-task-status-pill.done { background: rgba(74,222,128,0.08); color: #4ade80; }
.db-task-status-pill.running { background: var(--brand-magenta),0.08); color: var(--brand-magenta); animation: pulse-glow 1.5s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.db-task-status-pill.failed { background: rgba(248,113,113,0.08); color: #f87171; }
.db-task-status-pill.pending { background: rgba(107,119,148,0.08); color: #6b7794; }
.db-task-view-btn {
  font-family: var(--db-font-mono);
  font-size: 9px;
  color: #00d4c8;
  background: rgba(0,196,180,0.08);
  border: 1px solid rgba(0,196,180,0.15);
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.db-task-view-btn:hover { background: rgba(0,196,180,0.15); }

/* ═══════════════════════════════════════════
   EXECUTE BAR (Sprint 5C)
═══════════════════════════════════════════ */
.db-execute-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 10px;
  margin-top: 16px;
}
.db-execute-prompt {
  font-family: var(--db-font-mono);
  font-size: 12px;
  color: var(--db-text-hint);
}
.db-execute-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--db-text-secondary);
  font-family: var(--db-font-body);
}
.db-execute-input::placeholder { color: var(--db-text-hint); }
.db-execute-btn {
  background: linear-gradient(135deg, #00c4b4, #00a89a);
  color: #000;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 20px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-family: var(--db-font-body);
  box-shadow: 0 0 20px rgba(0,196,180,0.15);
  transition: all 0.15s;
}
.db-execute-btn:hover {
  background: linear-gradient(135deg, #00d4c4, #00b8aa);
  box-shadow: 0 0 24px rgba(0,196,180,0.25);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .db-layout { grid-template-columns: 180px 1fr 250px; }
  .db-layout--no-rpanel { grid-template-columns: 180px 1fr; }
}
@media (max-width: 900px) {
  .db-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 40px auto 1fr auto;
  }
  .db-lpanel {
    border-right: none; border-bottom: 1px solid var(--db-border2);
    flex-direction: row; overflow-x: auto;
    padding: 6px 10px;
  }
  .db-nav-label { display: none; }
  .db-nav-item { padding: 4px 8px; font-size: 10px; border-left: none; }
  .db-agent-row { padding: 4px 8px; }
  .db-agent-status-tiny { display: none; }
  .db-rpanel {
    border-left: none; border-top: 1px solid var(--db-border2);
    max-height: 320px;
  }
}
@media (max-width: 600px) {
  .db-greeting-text { font-size: 20px; }
  .db-topbar { padding: 0 8px; }
  .db-topbar-logo { font-size: 16px; margin-right: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESULT RENDERER — Visual Output Templates
   Prefix: .rr-* to avoid conflicts
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
.rr-container {
  font-family: var(--db-font-body, 'DM Sans', system-ui, sans-serif);
  color: var(--db-text-secondary, #a0aec0);
  line-height: 1.7;
}

/* ── Header ── */
.rr-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--db-border, #1c2030);
}
.rr-agent-badge {
  display: inline-block;
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 4px;
  margin-bottom: 10px;
}
.rr-title {
  font-family: var(--db-font-body, 'DM Sans', sans-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--db-text-primary, #e2e8f0);
  margin: 0 0 6px;
  line-height: 1.3;
}
.rr-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.rr-meta-item {
  font-family: var(--db-font-mono, monospace);
  font-size: 11px;
  color: var(--db-text-hint, #3d4760);
}

/* ── Footer badge ── */
.rr-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #152800;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rr-footer-logo {
  font-family: 'VT323', monospace;
  font-size: 18px;
  letter-spacing: 2px;
}
.rr-footer-agent {
  font-size: 10px;
  color: #3a7700;
  letter-spacing: 1px;
}

/* ── Action buttons ── */
.rr-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #152800;
  flex-wrap: wrap;
}
.rr-btn {
  font-family: var(--db-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--db-border, #1c2030);
  border-radius: var(--db-radius, 8px);
  background: transparent;
  color: var(--db-text-secondary, #a0aec0);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rr-btn:hover {
  border-color: var(--db-border2, #2a3450);
  color: var(--db-text-primary, #e2e8f0);
}
.rr-btn--accent {
  background: rgba(0,212,200,0.1);
  color: #00d4c8;
  border-color: rgba(0,212,200,0.2);
}
.rr-btn--accent:hover {
  background: rgba(0,212,200,0.18);
  border-color: rgba(0,212,200,0.3);
}
.rr-btn--small {
  font-size: 9px;
  padding: 4px 10px;
}
.rr-btn-icon {
  font-size: 14px;
}

/* ── Toast ── */
.rr-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #4aff00;
  color: #000;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 10px 20px;
  z-index: 10000;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.rr-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Rating widget ── */
.rr-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 16px;
  background: var(--db-surface, var(--bg2));
  border: 1px solid var(--db-border, var(--border));
  border-radius: 8px;
}
.rr-rating--done {
  color: var(--db-text-muted, #6b7794);
  font-size: 13px;
}
.rr-rating-label {
  font-size: 13px;
  color: var(--db-text-secondary, #a0aec0);
}
.rr-rating-btn {
  background: none;
  border: 1px solid var(--db-border, var(--border));
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.rr-rating-btn:hover {
  border-color: var(--db-border2, #2a3450);
  background: var(--border);
  transform: scale(1.1);
}
.rr-rating-input {
  flex: 1;
  background: var(--db-bg, var(--bg3));
  border: 1px solid var(--db-border, var(--border));
  border-radius: 6px;
  color: var(--db-text-primary, #e2e8f0);
  font-family: var(--db-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
}
.rr-rating-input:focus {
  border-color: rgba(0,196,180,0.3);
}
.rr-rating-send {
  background: rgba(0,196,180,0.1);
  color: #00d4c8;
  border: 1px solid rgba(0,196,180,0.2);
  font-family: var(--db-font-mono, monospace);
  font-size: 11px;
}
.rr-rating-send:hover {
  background: rgba(0,196,180,0.2);
}

/* ── Execute button ── */
.rr-execute-bar {
  margin-top: 12px;
}
.rr-execute-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  border: 1px solid var(--exec-color, #00c4b4);
  border-radius: 8px;
  background: rgba(0,196,180,0.08);
  color: var(--exec-color, #00c4b4);
  cursor: pointer;
  transition: all 0.15s;
}
.rr-execute-btn:hover {
  background: rgba(0,196,180,0.15);
  box-shadow: 0 0 16px rgba(0,196,180,0.12);
}
.rr-execute-icon { font-size: 14px; }

/* ── Approval Modal ── */
.rr-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-modal-card {
  background: #13151d;
  border: 1px solid #1c1f2e;
  border-radius: 12px;
  width: 90%;
  max-width: 520px;
  padding: 24px;
  max-height: 80vh;
  overflow-y: auto;
}
.rr-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.rr-modal-title {
  flex: 1;
  font-family: var(--db-font-body, 'DM Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--db-text-primary, #e2e8f0);
}
.rr-modal-close {
  background: none;
  border: none;
  color: var(--db-text-muted, #6b7794);
  font-size: 18px;
  cursor: pointer;
}
.rr-modal-close:hover { color: var(--db-red, #f87171); }
.rr-modal-preview {
  background: var(--db-bg, var(--bg3));
  border: 1px solid var(--db-border, var(--border));
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  max-height: 150px;
  overflow-y: auto;
}
.rr-modal-preview pre {
  font-family: var(--db-font-mono, monospace);
  font-size: 11px;
  color: var(--db-text-secondary, #a0aec0);
  white-space: pre-wrap;
  margin: 0;
}
.rr-modal-fields { margin-bottom: 16px; }
.rr-modal-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--db-text-muted, #6b7794);
  margin-bottom: 4px;
  margin-top: 10px;
}
.rr-modal-input {
  width: 100%;
  background: var(--db-bg, var(--bg3));
  border: 1px solid var(--db-border, var(--border));
  border-radius: 6px;
  color: var(--db-text-primary, #e2e8f0);
  font-family: var(--db-font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  box-sizing: border-box;
}
.rr-modal-input:focus { border-color: rgba(0,196,180,0.3); }
.rr-modal-textarea { min-height: 80px; resize: vertical; }
.rr-modal-warning {
  font-size: 11px;
  color: var(--db-text-hint, #3d4760);
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--brand-magenta),0.04);
  border: 1px solid var(--brand-magenta),0.1);
  border-radius: 6px;
}
.rr-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.rr-modal-cancel {
  font-family: var(--db-font-body, sans-serif);
  font-size: 13px;
  padding: 8px 16px;
  border: 1px solid var(--db-border, var(--border));
  border-radius: 8px;
  background: transparent;
  color: var(--db-text-secondary, #a0aec0);
  cursor: pointer;
}
.rr-modal-cancel:hover { border-color: var(--db-border2, #2a3450); }
.rr-modal-confirm {
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: var(--exec-color, #00c4b4);
  color: #000;
  cursor: pointer;
  transition: all 0.15s;
}
.rr-modal-confirm:hover { filter: brightness(1.1); box-shadow: 0 0 12px rgba(0,196,180,0.2); }
.rr-modal-confirm:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Integrations Cards ── */
.int-section-header {
  font-family: var(--db-font-mono, monospace);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--db-text-hint, #3d4760);
  margin: 20px 0 10px;
}
.int-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.int-card:hover { border-color: rgba(0,196,180,0.2); }
.int-icon { font-size: 20px; flex-shrink: 0; }
.int-info { flex: 1; min-width: 0; }
.int-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--db-text-primary, #e2e8f0);
}
.int-desc {
  font-size: 11px;
  color: var(--db-text-muted, #6b7794);
  margin-top: 2px;
}
.int-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
}
.int-status.connected {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.4);
}
.int-badge-soon {
  background: var(--border);
  color: var(--border);
  font-size: 10px;
  border-radius: 4px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.int-expand {
  display: none;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.int-expand.open { display: block; }
.int-expand-label {
  font-size: 11px;
  color: var(--db-text-muted, #6b7794);
  margin-bottom: 4px;
  display: block;
}
.int-expand-input {
  width: 100%;
  background: var(--db-bg, var(--bg3));
  border: 1px solid var(--db-border, var(--border));
  border-radius: 6px;
  color: var(--db-text-primary, #e2e8f0);
  font-size: 12px;
  padding: 6px 10px;
  margin-bottom: 8px;
  outline: none;
  box-sizing: border-box;
}
.int-expand-input:focus { border-color: rgba(0,196,180,0.3); }
.int-btn-save {
  font-family: var(--db-font-mono, monospace);
  font-size: 11px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: rgba(0,196,180,0.15);
  color: #00d4c8;
  cursor: pointer;
  margin-right: 8px;
}
.int-btn-save:hover { background: rgba(0,196,180,0.25); }
.int-btn-disconnect {
  font-size: 11px;
  padding: 6px 14px;
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: 6px;
  background: transparent;
  color: var(--db-red, #f87171);
  cursor: pointer;
}
.int-btn-disconnect:hover { background: rgba(248,113,113,0.08); }
.int-configure-btn {
  font-size: 11px;
  color: var(--db-text-muted, #6b7794);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.int-configure-btn:hover { border-color: rgba(0,196,180,0.2); color: #00d4c8; }

/* ── Hidden utility ── */
.rr-hidden { display: none !important; }

/* ── Shared: parsed markdown styling ── */
.rr-container h1, .rr-container h2, .rr-container h3 {
  font-family: var(--db-font-body, 'DM Sans', sans-serif);
  font-weight: 600;
  color: var(--db-text-primary, #e2e8f0);
  margin: 20px 0 8px;
}
.rr-container h1 { font-size: 22px; }
.rr-container h2 { font-size: 18px; }
.rr-container h3 { font-size: 15px; }
.rr-container p { margin: 0 0 12px; }
.rr-container strong { color: var(--db-text-primary, #e2e8f0); font-weight: 600; }
.rr-container a { color: var(--db-blue, #60a5fa); }
.rr-container ul, .rr-container ol { padding-left: 20px; margin: 8px 0; }
.rr-container li { margin: 4px 0; }
.rr-container blockquote {
  border-left: 3px solid rgba(0,196,180,0.3);
  padding: 8px 16px;
  margin: 12px 0;
  color: var(--db-text-secondary, #a0aec0);
  background: rgba(0,196,180,0.04);
  border-radius: 0 6px 6px 0;
}
.rr-container code {
  background: var(--db-bg, #0c0f14);
  color: var(--db-blue, #60a5fa);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--db-font-mono, monospace);
  font-size: 12px;
}
.rr-container pre {
  background: var(--db-bg, #0c0f14);
  border: 1px solid var(--db-border, #1c2030);
  padding: 12px;
  overflow-x: auto;
  border-radius: 6px;
  margin: 12px 0;
}
.rr-container pre code {
  background: none;
  padding: 0;
}

/* ── Shared: table ── */
.rr-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 12px;
}
.rr-table th, .rr-table td {
  padding: 8px 12px;
  border: 1px solid #1a3300;
  text-align: left;
}
.rr-table th {
  background: var(--db-surface2, #151a24);
  color: var(--db-text-primary, #e2e8f0);
  font-family: var(--db-font-mono, monospace);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.rr-table tr:nth-child(even) td {
  background: var(--bg3);
}
.rr-pos { color: var(--db-green, #4ade80); }
.rr-neg { color: var(--db-red, #f87171); }

/* ═══════════════════════════════════════════════════════════════
   BLOG POST RENDERER
   ═══════════════════════════════════════════════════════════════ */
.rr-blog-hero {
  padding: 20px 24px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #060d00, #0a1200);
}
.rr-blog-category {
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.rr-blog-title {
  font-family: 'VT323', monospace;
  font-size: 32px;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}
.rr-blog-body {
  max-width: 680px;
  line-height: 1.85;
  font-size: 13px;
  color: #b0b0b0;
}
.rr-blog-body h2 { margin-top: 32px; }
.rr-blog-body p { margin: 0 0 16px; }

/* ═══════════════════════════════════════════════════════════════
   SOCIAL MEDIA RENDERER
   ═══════════════════════════════════════════════════════════════ */
.rr-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.rr-social-card {
  border: 1px solid #222;
  border-radius: 8px;
  padding: 20px;
  background: #0d0d0d;
}
.rr-social-card--linkedin {
  border-color: #0a66c230;
  background: linear-gradient(180deg, #0d1117, #0a0a0a);
}
.rr-social-card--twitter {
  border-color: #1d9bf020;
  background: #000;
}
.rr-social-card--instagram {
  border-color: #e4405f20;
  background: linear-gradient(180deg, #1a0a10, #0a0a0a);
}
.rr-social-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1a1a1a;
}
.rr-social-icon {
  font-size: 18px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1a1a1a;
  color: #888;
}
.rr-social-platform {
  font-size: 10px;
  letter-spacing: 2px;
  color: #666;
}
.rr-social-body {
  font-size: 13px;
  line-height: 1.7;
  color: #c0c0c0;
  margin-bottom: 16px;
}
.rr-social-body p { margin: 0 0 8px; }
.rr-social-engagement {
  display: flex;
  gap: 20px;
  font-size: 11px;
  color: #444;
  padding-top: 12px;
  border-top: 1px solid #1a1a1a;
  margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   EMAIL RENDERER
   ═══════════════════════════════════════════════════════════════ */
.rr-email-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
}
.rr-email-tab {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  padding: 8px 20px;
  border: 1px solid #1a3300;
  border-bottom: none;
  background: transparent;
  color: #3a7700;
  cursor: pointer;
  letter-spacing: 1px;
}
.rr-email-tab--active {
  background: #0a1200;
  color: #4aff00;
  border-color: #4aff00;
}
.rr-email-card {
  border: 1px solid #1a3300;
  background: #060d00;
  padding: 20px;
}
.rr-email-fields {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid #152800;
}
.rr-email-field {
  font-size: 12px;
  color: #888;
  margin: 4px 0;
}
.rr-email-label {
  color: #3a7700;
  font-size: 10px;
  letter-spacing: 1px;
  margin-right: 8px;
}
.rr-email-content {
  font-size: 13px;
  line-height: 1.8;
  color: #c0c0c0;
}

/* ═══════════════════════════════════════════════════════════════
   FINANCIAL RENDERER
   ═══════════════════════════════════════════════════════════════ */
.rr-fin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.rr-fin-card {
  background: #060d00;
  border: 1px solid #152800;
  padding: 14px 16px;
  text-align: center;
}
.rr-fin-card-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #3a7700;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.rr-fin-card-value {
  font-family: 'VT323', monospace;
  font-size: 24px;
}
.rr-fin-table-wrap {
  overflow-x: auto;
  margin: 16px 0;
}
.rr-fin-chart-wrap {
  max-width: 600px;
  margin: 20px auto;
  background: #060d00;
  border: 1px solid #152800;
  padding: 16px;
  border-radius: 4px;
}
.rr-fin-detail {
  font-size: 13px;
  color: #b0b0b0;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════
   ANALYSIS / SWOT RENDERER
   ═══════════════════════════════════════════════════════════════ */
.rr-swot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .rr-swot { grid-template-columns: 1fr; }
}
.rr-swot-quad {
  background: var(--db-surface, var(--bg2));
  border: 1px solid var(--db-border, #1a1f2e);
  border-radius: 10px;
  padding: 16px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--db-text-secondary, #a0aec0);
}
.rr-swot-label {
  font-family: var(--db-font-body, 'DM Sans', sans-serif);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
.rr-swot--strengths { border-top: 3px solid #4ade80; background: rgba(74,222,128,0.04); }
.rr-swot--strengths .rr-swot-label { color: #4ade80; }
.rr-swot--weaknesses { border-top: 3px solid #f87171; background: rgba(248,113,113,0.04); }
.rr-swot--weaknesses .rr-swot-label { color: #f87171; }
.rr-swot--opportunities { border-top: 3px solid #00d4c8; background: rgba(0,212,200,0.04); }
.rr-swot--opportunities .rr-swot-label { color: #00d4c8; }
.rr-swot--threats { border-top: 3px solid var(--brand-magenta); background: var(--brand-magenta),0.04); }
.rr-swot--threats .rr-swot-label { color: var(--brand-magenta); }

.rr-findings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.rr-finding-card {
  background: #060d00;
  border: 1px solid #152800;
  padding: 16px;
  display: flex;
  gap: 12px;
}
.rr-finding-num {
  font-family: 'VT323', monospace;
  font-size: 28px;
  flex-shrink: 0;
  opacity: 0.7;
}
.rr-finding-text {
  font-size: 12px;
  line-height: 1.7;
  color: #b0b0b0;
}
.rr-finding-text p { margin: 0; }

.rr-sources {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #152800;
}
.rr-sources-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #3a7700;
  margin-bottom: 8px;
}
.rr-source-link {
  display: block;
  font-size: 11px;
  color: #00d4ff;
  margin: 4px 0;
  word-break: break-all;
}
.rr-analysis-detail {
  font-size: 13px;
  color: #b0b0b0;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════
   CODE RENDERER
   ═══════════════════════════════════════════════════════════════ */
.rr-code-block {
  border: 1px solid #152800;
  border-radius: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}
.rr-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #060d00;
  border-bottom: 1px solid #152800;
}
.rr-code-lang {
  font-size: 10px;
  letter-spacing: 2px;
}
.rr-code-body {
  display: flex;
  overflow-x: auto;
  background: #030500;
}
.rr-code-lines {
  padding: 12px 8px;
  text-align: right;
  border-right: 1px solid #152800;
  user-select: none;
  flex-shrink: 0;
}
.rr-code-ln {
  display: block;
  font-size: 11px;
  color: #1a3300;
  line-height: 1.5;
}
.rr-code-pre {
  padding: 12px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #c0c0c0;
  background: transparent;
  border: none;
  flex: 1;
  min-width: 0;
}
.rr-code-pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* Syntax highlighting */
.rr-hl-kw { color: #ff00aa; }
.rr-hl-str { color: #4aff00; }
.rr-hl-cmt { color: #3a7700; font-style: italic; }
.rr-hl-num { color: #ffaa00; }
.rr-hl-tag { color: #00d4ff; }

.rr-code-explanation {
  padding: 16px;
  font-size: 13px;
  color: #b0b0b0;
  line-height: 1.8;
  border-top: 1px solid #152800;
}

/* ═══════════════════════════════════════════════════════════════
   STRATEGY / TIMELINE RENDERER
   ═══════════════════════════════════════════════════════════════ */
.rr-timeline {
  position: relative;
  margin-bottom: 24px;
}
.rr-timeline-item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
}
.rr-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  box-shadow: 0 0 8px currentColor;
}
.rr-timeline-line {
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: -20px;
  width: 2px;
  background: #152800;
}
.rr-timeline-item:last-child .rr-timeline-line {
  display: none;
}
.rr-timeline-content {
  flex: 1;
  min-width: 0;
}
.rr-timeline-phase {
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.rr-timeline-title {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 8px;
}
.rr-timeline-body {
  font-size: 12px;
  color: #b0b0b0;
  line-height: 1.7;
}
.rr-timeline-body p { margin: 0 0 6px; }

.rr-strategy-detail {
  font-size: 13px;
  color: #b0b0b0;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════
   DEFAULT / REPORT RENDERER
   ═══════════════════════════════════════════════════════════════ */
.rr-report-body {
  font-size: 13px;
  color: #b0b0b0;
  line-height: 1.8;
  max-width: 720px;
}

/* ═══════════════════════════════════════════════════════════════
   SKILL LIBRARY — Card Grid & Forms (Sprint 4)
   Prefix: .sk-*
   ═══════════════════════════════════════════════════════════════ */
.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.sk-card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--db-radius-lg, 12px);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
}
.sk-card:hover {
  background: var(--bg3);
  border-color: var(--border);
}
.sk-card--locked { opacity: 0.5; cursor: default; }
.sk-card--locked:hover { border-color: var(--db-border, #1a1a1a); box-shadow: none; }
.sk-locked-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
  font-family: 'VT323', monospace;
  font-size: 16px; color: #ffaa00; letter-spacing: 2px;
}
.sk-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sk-agent-badge {
  font-size: 9px; letter-spacing: 1.5px; padding: 2px 8px;
  border: 1px solid; font-family: var(--db-font-mono, monospace);
}
.sk-credits { font-size: 10px; color: var(--text3); }
.sk-card-name {
  font-family: var(--db-font-body, 'DM Sans', sans-serif); font-size: 14px; font-weight: 600;
  color: var(--db-text-primary, #e2e8f0); margin-bottom: 4px;
}
.sk-card-desc {
  font-size: 11px; color: var(--text3);
  line-height: 1.6; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sk-card-bottom { display: flex; gap: 6px; flex-wrap: wrap; }
.sk-badge {
  font-size: 8px; letter-spacing: 1px; padding: 2px 6px;
  font-family: var(--db-font-mono, monospace);
}
.sk-badge--premium { color: #00d4c8; border: 1px solid rgba(0,212,200,0.3); border-radius: 4px; background: rgba(0,212,200,0.06); }
.sk-badge--tier { color: #4ade80; border: 1px solid rgba(74,222,128,0.3); border-radius: 4px; background: rgba(74,222,128,0.06); }
.sk-badge--locked { color: var(--brand-magenta); border: 1px solid var(--brand-magenta),0.3); border-radius: 4px; background: var(--brand-magenta),0.06); }

/* ── Skill Form ── */
.sk-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.sk-form-group { display: flex; flex-direction: column; gap: 4px; }
.sk-form-label {
  font-size: 10px; letter-spacing: 1.5px;
  color: var(--db-muted, #666); text-transform: uppercase;
}
.sk-form-input {
  font-family: var(--db-font-body, 'DM Sans', sans-serif); font-size: 13px;
  background: var(--db-surface2, #151a24); border: 1px solid var(--db-border, #1c2030);
  border-radius: var(--db-radius, 8px);
  color: var(--db-text-primary, #e2e8f0); padding: 8px 12px; outline: none;
  transition: border-color 0.2s;
}
.sk-form-input:focus { border-color: var(--db-accent-border, rgba(0,196,180,0.3)); }
.sk-form-input option { background: var(--db-surface, #111620); color: var(--db-text-primary, #e2e8f0); }
textarea.sk-form-input { resize: vertical; min-height: 60px; }

/* ── Interactive Report Blocks ──────────────────────── */
.rr-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.rr-metric-card {
  background: linear-gradient(135deg, rgba(96,165,250,0.08), rgba(96,165,250,0.02));
  border: 1px solid rgba(96,165,250,0.15);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.rr-metric-value {
  font-size: 24px;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 4px;
}
.rr-metric-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rr-chart-block {
  background: rgba(15,23,42,0.5);
  border: 1px solid rgba(148,163,184,0.1);
  border-radius: 12px;
  padding: 14px;
  margin: 12px 0;
  max-height: 280px;
  overflow: hidden;
}
.rr-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 12px;
}
.rr-compare-block {
  margin: 16px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.1);
}
.rr-compare-title {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  padding: 12px 16px;
  background: rgba(15,23,42,0.7);
}
.rr-compare-scroll { overflow-x: auto; }
.rr-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rr-cmp-th {
  background: rgba(30,41,59,0.8);
  color: #94a3b8;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.rr-cmp-td {
  padding: 10px 14px;
  border-top: 1px solid rgba(148,163,184,0.08);
  color: #cbd5e1;
}
.rr-cmp-feature {
  font-weight: 600;
  color: #e2e8f0;
  position: sticky;
  left: 0;
  background: rgba(15,23,42,0.95);
}
.rr-compare-table tbody tr:hover .rr-cmp-td {
  background: rgba(96,165,250,0.05);
}
.rr-timeline {
  position: relative;
  padding-left: 24px;
  margin: 16px 0;
}
.rr-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: rgba(96,165,250,0.3);
}
.rr-tl-item {
  position: relative;
  padding: 8px 0 16px 20px;
}
.rr-tl-dot {
  position: absolute;
  left: -20px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #60a5fa;
  border: 2px solid #0f172a;
}
.rr-tl-period {
  font-size: 12px;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 2px;
}
.rr-tl-task {
  font-size: 13px;
  color: #cbd5e1;
}
.rr-tl-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
  margin-top: 4px;
}
.rr-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}
.rr-score-ring {
  transition: stroke-dashoffset 1.5s ease-out;
}
.rr-score-label {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 8px;
}

/* ── COO Review Action Blocks ─────────────────── */
.rr-action-block {
  background: rgba(0, 212, 200, 0.05);
  border: 1px solid rgba(0, 212, 200, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
}
.rr-action-block:hover {
  background: rgba(0, 212, 200, 0.1);
  border-color: rgba(0, 212, 200, 0.4);
  transform: translateY(-1px);
}
.rr-action-title { font-weight: 600; color: #e2e8f0; font-size: 14px; }
.rr-action-meta { font-size: 11px; color: #64748b; margin-top: 4px; }
.rr-action-priority { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.rr-action-priority-high { background: rgba(248,113,113,0.15); color: #f87171; }
.rr-action-priority-medium { background: var(--brand-magenta),0.15); color: var(--brand-magenta); }
.rr-action-priority-low { background: rgba(74,222,128,0.15); color: #4ade80; }
.rr-action-execute {
  background: rgba(0, 212, 200, 0.15);
  color: #00d4c8;
  border: 1px solid rgba(0, 212, 200, 0.3);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.rr-action-execute:hover { background: rgba(0, 212, 200, 0.3); }
.rr-action-credits { font-size: 10px; color: #4ade80; margin-top: 4px; font-weight: 600; }
.rr-review-badge {
  display: inline-block;
  background: rgba(0, 212, 200, 0.15);
  color: #00d4c8;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* ── Edit/Revision Button ──────────────────────── */
.rr-btn-edit {
  background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(96,165,250,0.05)) !important;
  border: 1px solid rgba(96,165,250,0.3) !important;
  color: #60a5fa !important;
}
.rr-btn-edit:hover {
  background: linear-gradient(135deg, rgba(96,165,250,0.25), rgba(96,165,250,0.1)) !important;
  border-color: #60a5fa !important;
}

/* ═══ Analytics Dashboard ═══ */
/* ═══════════════════════════════════════════════
   METRICS STRIP — hairline-bordered cream cards with serif numbers.
   Every card has an explicit border per design direction.
═══════════════════════════════════════════════ */
.db-metrics-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.db-metric-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: left;
}
.db-metric-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.db-metric-value {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.db-metric-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.db-metric-progress {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.db-metric-progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════
   UNIVERSAL CARD-BORDER RULE
   Every card-like surface must have a visible border. This catches
   surfaces that escaped the explicit `.db-metric-card`/`.rmt-*-card`
   rules. Uses :where() so specificity stays low and individual cards
   can still override.
═══════════════════════════════════════════════ */
:where(
  .db-feed-item,
  .db-agent-row,
  .rmt-featured-card,
  .rmt-action-card,
  .rmt-task-card,
  .rmt-cal-mini,
  .db-ai-team,
  .db-brain-card,
  .db-coo-card,
  .card,
  .section
) {
  background: var(--bg2);
  border: 1px solid var(--border);
}
/* Skeleton loading placeholders */
.db-skel {
  background: linear-gradient(90deg, var(--border) 25%, var(--border) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: db-skel-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
.db-skel-label { width: 60%; height: 10px; margin: 0 auto 8px; }
.db-skel-value { width: 40%; height: 24px; margin: 0 auto 6px; }
.db-skel-sub   { width: 50%; height: 10px; margin: 0 auto; }
@keyframes db-skel-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.db-metric-progress-bar {
  height: 100%;
  background: #4aff00;
  border-radius: 2px;
  transition: width 0.5s ease;
}
@keyframes pulse-red {
  0%, 100% { border-color: rgba(248,113,113,0.2); }
  50% { border-color: rgba(248,113,113,0.5); box-shadow: 0 0 8px rgba(248,113,113,0.15); }
}
.db-main-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
}
.db-main-left { min-width: 0; }
.db-main-right { min-width: 0; }
.db-team-list {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}
.db-team-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--bg3);
  font-size: 11px;
}
.db-team-row:last-child { border-bottom: none; }
.db-team-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-team-name {
  width: 32px;
  font-weight: 700;
  font-size: 11px;
}
.db-team-status {
  flex: 1;
  font-size: 10px;
}
.db-team-count {
  font-size: 9px;
  color: #555;
}
.db-chart-mini {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}
.db-chart-label {
  font-size: 10px;
  color: #888;
  margin-bottom: 8px;
}
.db-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 50px;
}
.db-chart-bar {
  flex: 1;
  background: #4aff00;
  border-radius: 2px 2px 0 0;
  min-height: 3px;
}
.db-chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #444;
  margin-top: 4px;
}
/* ═══ Org Chart ═══ */
.db-org-chart { margin-top: 8px; }
.db-org-coo {
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
  max-width: 180px;
  margin: 0 auto;
}
.db-org-coo:hover { background: rgba(74,222,128,0.12); }
.db-org-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 24px;
}
.db-org-vline {
  width: 1px;
  height: 12px;
  background: var(--bg3);
}
.db-org-hline {
  width: 80%;
  height: 1px;
  background: var(--bg3);
}
.db-org-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.db-org-full .db-org-coo { max-width: 240px; padding: 14px; }
.db-org-full .db-org-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.db-org-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}
.db-org-card:hover { background: var(--border); }
.db-org-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 auto 4px;
}
.db-org-name { font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.db-org-dept { font-size: 8px; color: #666; letter-spacing: 1px; margin-top: 2px; }
.db-org-tasks { font-size: 9px; color: #555; margin-top: 3px; }
.db-org-status { font-size: 8px; letter-spacing: 1px; margin-top: 2px; }
.db-dept-kpis { grid-template-columns: repeat(4, 1fr); margin: 12px 0; }
.db-dept-perf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.db-dept-perf-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.db-dept-perf-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  text-align: center;
}
@media (max-width: 768px) {
  .db-metrics-strip { grid-template-columns: repeat(3, 1fr); }
  .db-main-grid { grid-template-columns: 1fr; }
  .db-org-grid { grid-template-columns: repeat(2, 1fr); }
  .db-org-full .db-org-grid { grid-template-columns: repeat(3, 1fr); }
  .db-dept-perf-grid { grid-template-columns: 1fr; }
  .db-dept-kpis { grid-template-columns: repeat(2, 1fr); }
  .rmt-two-col { grid-template-columns: 1fr !important; }
  .rmt-tasks-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .rmt-actions-grid { grid-template-columns: 1fr !important; }
  .rmt-cal-full-cell { min-height: 60px !important; }
}

/* ═══════════════════════════════════════════════════
   PHASE 4 UI — Ready-Made Tasks, Actions, Calendar
═══════════════════════════════════════════════════ */

/* Section headers */
.rmt-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 8px;
}
.rmt-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  letter-spacing: 0.3px;
}
.rmt-section-link {
  font-size: 11px;
  color: #6366F1;
  cursor: pointer;
  transition: opacity 0.2s;
}
.rmt-section-link:hover { opacity: 0.8; text-decoration: underline; }

/* Horizontal scroll container */
.rmt-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  min-height: 150px;
  align-items: stretch;
}
.rmt-scroll::-webkit-scrollbar { height: 3px; }
.rmt-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Featured task cards (horizontal) */
.rmt-featured-card {
  min-width: 160px;
  max-width: 180px;
  flex-shrink: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.25s;
  scroll-snap-align: start;
}
.rmt-featured-card:hover {
  background: var(--bg3);
  border-color: var(--border);
  transform: translateY(-1px);
}
.rmt-fc-icon { font-size: 22px; margin-bottom: 6px; }
.rmt-fc-name { font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.rmt-fc-desc { font-size: 9px; color: var(--text3); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rmt-fc-meta { display: flex; align-items: center; gap: 8px; }
.rmt-fc-badge { font-size: 8px; padding: 2px 8px; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.rmt-fc-credits { font-size: 9px; color: var(--text3); }

/* Action cards (horizontal preview) */
.rmt-action-card {
  min-width: 200px;
  max-width: 240px;
  flex-shrink: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.25s;
  scroll-snap-align: start;
}
.rmt-action-card:hover {
  background: var(--bg3);
  border-color: var(--border);
}
.rmt-ac-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rmt-ac-icon { font-size: 20px; }
.rmt-ac-icon-lg { font-size: 32px; }
.rmt-ac-steps { font-size: 9px; color: var(--text3); background: var(--bg2); padding: 3px 8px; border-radius: 8px; }
.rmt-ac-name { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.rmt-ac-name-lg { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.rmt-ac-desc { font-size: 9px; color: var(--text3); line-height: 1.5; margin-bottom: 10px; }
.rmt-ac-desc-lg { font-size: 12px; color: #888; line-height: 1.6; margin-bottom: 14px; }
.rmt-ac-agents { display: flex; gap: 6px; flex-wrap: wrap; }
.rmt-ac-agent { font-size: 8px; padding: 2px 7px; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }

/* Actions grid (full section) */
.rmt-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.rmt-actions-intro {
  font-size: 12px;
  color: #888;
  line-height: 1.6;
  margin-bottom: 4px;
}
.rmt-action-card-full {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s;
}
.rmt-action-card-full:hover {
  background: var(--bg3);
  border-color: var(--border);
}
.rmt-ac-tasks-list { margin-top: 12px; }
.rmt-ac-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.rmt-ac-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--brand-cyan) 12%, transparent);
  color: var(--brand-cyan);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rmt-ac-step-name { font-size: 11px; color: #aaa; }
.rmt-ac-run-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px;
  background: color-mix(in oklch, var(--brand-cyan) 12%, transparent);
  color: var(--brand-cyan);
  border: 1px solid color-mix(in oklch, var(--brand-cyan) 25%, transparent);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.rmt-ac-run-btn:hover { background: color-mix(in oklch, var(--brand-cyan) 25%, transparent); }

/* Two-column layout (calendar + attention feed) */
.rmt-two-col {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  margin-top: 20px;
}
.rmt-feed-col { min-width: 0; }

/* Calendar mini widget (dashboard) */
.rmt-cal-mini {
  background: var(--db-surface, oklch(98.6% 0.010 85));
  border: 1px solid var(--db-border, oklch(89% 0.014 85));
  border-radius: 10px;
  padding: 12px;
  transition: border-color 0.2s;
  max-width: 280px;
}
.rmt-cal-mini:hover { border-color: var(--db-accent, oklch(62% 0.20 145)); }
.rmt-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rmt-cal-title { font-size: 13px; font-weight: 600; color: var(--db-text-primary, oklch(16% 0.010 260)); }
.rmt-cal-month { font-size: 11px; color: var(--db-accent, oklch(62% 0.20 145)); }
.rmt-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.rmt-cal-dlabel { font-size: 8px; color: var(--db-text-hint, oklch(68% 0.015 80)); text-transform: uppercase; padding: 4px 0; letter-spacing: 0.5px; }
.rmt-cal-day { font-size: 10px; padding: 3px 1px; border-radius: 6px; color: var(--db-text-muted, oklch(50% 0.012 80)); }
.rmt-cal-day.rmt-cal-today { color: var(--db-bg, oklch(97.2% 0.012 85)); font-weight: 700; background: var(--db-text-primary, oklch(16% 0.010 260)); }
.rmt-cal-day.rmt-cal-empty { visibility: hidden; }
.rmt-cal-hint { font-size: 9px; color: var(--db-text-hint, oklch(68% 0.015 80)); text-align: center; margin-top: 10px; letter-spacing: 0.5px; }

/* Full Calendar section */
.rmt-cal-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.rmt-cal-page-month { font-size: 20px; font-weight: 600; color: var(--text); }
.rmt-cal-legend { display: flex; gap: 14px; }
.rmt-cal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #888; }
.rmt-cal-legend-dot { width: 8px; height: 8px; border-radius: 50%; }

.rmt-tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  background: var(--border);
  border-radius: 8px;
  padding: 3px;
  max-width: 360px;
}
.rmt-tab-btn {
  flex: 1;
  text-align: center;
  padding: 7px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
  color: #888;
  transition: all 0.2s;
  border: none;
  background: none;
  font-family: inherit;
}
.rmt-tab-btn:hover { color: #ccc; }
.rmt-tab-btn.active { background: color-mix(in oklch, var(--brand-cyan) 12%, transparent); color: #fff; font-weight: 600; }

.rmt-cal-full-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--bg3);
  border-radius: 10px;
  overflow: hidden;
}
.rmt-cal-full-header {
  font-size: 9px;
  color: #666;
  text-transform: uppercase;
  text-align: center;
  padding: 10px;
  background: var(--bg3);
  font-weight: 600;
  letter-spacing: 1px;
}
.rmt-cal-full-cell {
  background: var(--db-bg, #0a0a14);
  min-height: 90px;
  padding: 6px;
}
.rmt-cal-cell-empty { opacity: 0.3; }
.rmt-cal-cell-today { background: rgba(99,102,241,0.05) !important; }
.rmt-cal-cell-day { font-size: 11px; color: #555; margin-bottom: 4px; font-weight: 500; }
.rmt-cal-cell-today .rmt-cal-cell-day { color: #6366F1; font-weight: 700; }

.rmt-cal-chip {
  font-size: 8px;
  padding: 3px 6px;
  border-radius: 5px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: filter 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rmt-cal-chip:hover { filter: brightness(1.3); }
.rmt-chip-time { font-size: 7px; opacity: 0.7; margin-left: auto; }

/* Calendar CTA */
.rmt-cal-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(99,102,241,0.06);
  border: 1px solid color-mix(in oklch, var(--brand-cyan) 12%, transparent);
  border-radius: 10px;
}
.rmt-cal-cta-text { display: flex; align-items: center; gap: 14px; }
.rmt-cal-cta-icon { font-size: 28px; }
.rmt-cal-cta-title { font-size: 13px; font-weight: 600; color: var(--text); }
.rmt-cal-cta-desc { font-size: 10px; color: #888; margin-top: 2px; line-height: 1.5; }
.rmt-cal-cta-btn {
  padding: 8px 20px;
  background: rgba(99,102,241,0.2);
  color: var(--brand-cyan);
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}
.rmt-cal-cta-btn:hover { background: rgba(99,102,241,0.3); }

/* Ready-Made Tasks grid (dashboard bottom) */
.rmt-tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.rmt-task-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.rmt-task-card:hover {
  background: var(--bg3);
  border-color: var(--border);
}
.rmt-tc-name { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.rmt-tc-desc { font-size: 10px; color: var(--text3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rmt-tc-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.rmt-tc-dept { font-size: 8px; padding: 2px 7px; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.rmt-tc-cost { font-size: 9px; color: var(--text3); }