/* ============================================================
   PROTOSS SKIN — Override layer for Settles Hub
   Loads AFTER the Hub's inline <style> to re-theme visually.
   Zero JS changes. Zero HTML changes. Pure CSS override.
   Toggle on/off by adding/removing the <link> tag.
   ============================================================ */


/* ------------------------------------------------------------
   0. IMPORT DESIGN TOKENS
   Pull in all --proto-* custom properties
   ------------------------------------------------------------ */

@import url('/mockup/chatgpt/protoss-theme.css');


/* ------------------------------------------------------------
   1. ROOT VARIABLE OVERRIDES
   Map the Hub's existing --var tokens to Protoss palette.
   This alone re-themes ~60% of the UI because the Hub
   already uses these vars everywhere.
   ------------------------------------------------------------ */

:root {
  /* Background scale */
  --bg:    var(--proto-bg-body);
  --s1:    var(--proto-bg-1);
  --s2:    var(--proto-bg-2);
  --s3:    #0d1626;
  --s4:    #14203a;

  /* Text */
  --text:  var(--proto-text);
  --t1:    #d4c9a8;
  --t2:    var(--proto-muted);
  --t3:    #4a5e78;

  /* Borders */
  --bdr:   var(--proto-border-dim);
  --bdr2:  var(--proto-border);

  /* Column accent colors — shifted to Protoss palette */
  --work:  var(--proto-blue);
  --wa:    rgba(103,168,255,0.10);
  --wb:    rgba(103,168,255,0.22);

  --pers:  var(--proto-green);
  --pa:    rgba(77,255,154,0.08);
  --pb:    rgba(77,255,154,0.18);

  --kasey: var(--proto-gold-2);
  --ka:    rgba(244,200,98,0.08);
  --kb:    rgba(244,200,98,0.18);

  --hh2:   var(--proto-orange);
  --hha:   rgba(255,154,70,0.08);
  --hhb:   rgba(255,154,70,0.18);

  --tasks: var(--proto-orange);
  --ta:    rgba(255,154,70,0.08);
  --tb:    rgba(255,154,70,0.18);

  --intel: var(--proto-teal-2);
  --ia:    rgba(74,239,255,0.08);
  --ib:    rgba(74,239,255,0.18);

  /* Semantic */
  --green: var(--proto-green);
  --red:   var(--proto-red);
  --gold:  var(--proto-gold-2);
  --blue:  var(--proto-blue);
  --orange:var(--proto-orange);
  --orange-a: rgba(255,154,70,0.06);
  --teal:  var(--proto-teal-2);

  /* Misc */
  --c2:    rgba(74,239,255,0.04);
}


/* ------------------------------------------------------------
   2. BODY & BACKGROUND
   Deep navy Protoss background with teal/gold grid
   ------------------------------------------------------------ */

body {
  background: var(--proto-bg-body) !important;
  color: var(--proto-text) !important;
}

body::before {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,157,60,0.08), transparent 24%),
    radial-gradient(circle at 80% 0%, rgba(69,239,255,0.06), transparent 24%),
    linear-gradient(180deg, rgba(255,188,76,0.06), transparent 90px),
    linear-gradient(90deg, rgba(46,122,162,0.08) 1px, transparent 1px),
    linear-gradient(rgba(46,122,162,0.06) 1px, transparent 1px),
    linear-gradient(180deg, var(--proto-bg-body), var(--proto-bg-0) 76%) !important;
  background-size:
    auto, auto, auto,
    44px 44px, 44px 44px, auto !important;
}

::-webkit-scrollbar-thumb {
  background: #14203a !important;
}


/* ------------------------------------------------------------
   3. HEADER (.hdr)
   Dark navy with gold chrome bottom line
   ------------------------------------------------------------ */

.hdr {
  background: rgba(4,7,13,0.97) !important;
  border-bottom: 1px solid var(--proto-border-dim) !important;
  box-shadow: 0 1px 0 rgba(244,200,98,0.10) !important;
}

.hdr::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(244,200,98,0.45),
    rgba(74,239,255,0.35),
    transparent
  ) !important;
  background-size: 200% 100% !important;
}

.brand-n {
  color: #ffb25c !important;
  text-shadow: 0 0 18px rgba(255,145,0,0.16) !important;
}

.brand-s {
  color: var(--proto-muted) !important;
}

.clk-t {
  color: var(--proto-text) !important;
}

.clk-d {
  color: var(--proto-muted) !important;
}

.online {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.odot {
  background: var(--proto-teal-2) !important;
  box-shadow: 0 0 8px var(--proto-teal-2) !important;
}

.otxt {
  color: var(--proto-muted) !important;
}

.sv {
  color: #ffb25c !important;
  text-shadow: 0 0 8px rgba(255,178,92,0.2) !important;
}

.sl {
  color: var(--proto-muted) !important;
}

.stats {
  border-left-color: var(--proto-border-dim) !important;
}

.stat:hover {
  background: rgba(74,239,255,0.06) !important;
  box-shadow: 0 0 12px rgba(74,239,255,0.10) !important;
}

.hbtn {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.hbtn:hover,
.hbtn.on {
  background: #14203a !important;
  border-color: var(--proto-border) !important;
}


/* ------------------------------------------------------------
   4. EDIT BAR
   ------------------------------------------------------------ */

.ebar {
  background: rgba(244,200,98,0.06) !important;
  border-bottom-color: rgba(244,200,98,0.14) !important;
}

.eb-t {
  color: #ffb25c !important;
}

.eb-btn {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
  border: none !important;
}


/* ------------------------------------------------------------
   5. COLUMNS
   ------------------------------------------------------------ */

.col {
  border-right-color: var(--proto-border-dim) !important;
}

/* Column header bottom accent lines — teal-shifted */
.col-hd {
  border-bottom-color: var(--proto-border-dim) !important;
}

.col-hd::after {
  opacity: 0.6 !important;
}

/* Column labels keep per-column colors via CSS vars (already overridden above) */

.col-body {
  scrollbar-color: #14203a transparent;
}

/* Column size picker */
.col-size-btn {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.col-size-btn:hover {
  background: #14203a !important;
  color: var(--proto-text) !important;
}

.col-size-btn.active {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  border-color: rgba(255,235,166,0.5) !important;
  color: #2b1800 !important;
}

/* Collapsed columns */
.col.collapsed {
  background: var(--proto-bg-1) !important;
}

/* Resize handle */
.col-resize-handle:hover,
.col-resize-handle.dragging {
  background: var(--proto-gold-2) !important;
}

.col-resize-handle::before {
  color: var(--proto-muted) !important;
}

.col-resize-handle:hover::before {
  color: var(--proto-gold-2) !important;
}

/* Section dividers */
.sdiv-t {
  color: #7feffc !important;
}

.sdiv-l {
  background: var(--proto-border-dim) !important;
}


/* ------------------------------------------------------------
   6. DASHBOARD CARDS (.dcard)
   Protoss panel treatment with gold border glow
   ------------------------------------------------------------ */

.dcard {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--proto-panel) !important;
  border-color: var(--proto-border-dim) !important;
  border-radius: 8px !important;
}

.dcard:hover {
  border-color: rgba(74,239,255,0.25) !important;
  box-shadow:
    0 0 16px rgba(74,239,255,0.08),
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
    var(--proto-panel-2) !important;
}

/* Left accent bar on hover — teal glow */
.dcard::before {
  background: linear-gradient(180deg, var(--proto-teal-1), var(--proto-teal-2) 50%, var(--proto-teal-3)) !important;
}

/* Override column-specific hover colors to Protoss teal */
.col.cw .dcard:hover,
.col.cp .dcard:hover,
.col.ck .dcard:hover,
.col.chh .dcard:hover,
.col.ct .dcard:hover {
  border-color: rgba(74,239,255,0.20) !important;
}

.d-ibox {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.d-name {
  color: var(--proto-text) !important;
}

.d-desc {
  color: var(--proto-muted) !important;
}

.d-arr {
  color: var(--proto-muted) !important;
}

.dcard:hover .d-arr {
  color: var(--proto-teal-2) !important;
}

/* Live dot */
.live-dot {
  background: var(--proto-green) !important;
  box-shadow: 0 0 6px var(--proto-green) !important;
}

/* Tags */
.tag {
  color: var(--proto-muted) !important;
  background: rgba(74,239,255,0.06) !important;
  border-color: rgba(74,239,255,0.12) !important;
}

/* Status badges */
.sbadge.live {
  background: rgba(77,255,154,0.08) !important;
  color: var(--proto-green) !important;
  border-color: rgba(77,255,154,0.20) !important;
}

.sbadge.pend {
  background: rgba(142,162,187,0.06) !important;
  color: var(--proto-muted) !important;
  border-color: rgba(142,162,187,0.14) !important;
}

.sbadge.tool {
  background: rgba(103,168,255,0.08) !important;
  color: var(--proto-blue) !important;
  border-color: rgba(103,168,255,0.20) !important;
}

.tag-tool {
  background: rgba(103,168,255,0.08) !important;
  color: var(--proto-blue) !important;
  border-color: rgba(103,168,255,0.20) !important;
}

/* Card cover overlay */
.d-cover {
  background: rgba(4,7,13,0.88) !important;
}

.d-cover-btn {
  background: #14203a !important;
  border-color: var(--proto-border) !important;
}

/* Add row */
.add-row {
  border-color: var(--proto-muted) !important;
  color: var(--proto-muted) !important;
}

.add-row:hover {
  border-color: var(--proto-teal-2) !important;
  color: var(--proto-teal-2) !important;
  background: rgba(74,239,255,0.04) !important;
}


/* ------------------------------------------------------------
   7. TASKS COLUMN
   ------------------------------------------------------------ */

/* Task input area */
.task-add {
  background: var(--proto-bg-1) !important;
  border-color: var(--proto-border-dim) !important;
}

.t-inp {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.t-sel {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.t-add {
  background: rgba(255,154,70,0.10) !important;
  border-color: rgba(255,154,70,0.25) !important;
  color: var(--proto-orange) !important;
}

/* Task items */
.titem {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0)),
    var(--proto-bg-1) !important;
  border-color: var(--proto-border-dim) !important;
}

.titem:hover {
  background: var(--proto-bg-2) !important;
}

/* Checkbox */
.t-chk {
  border-color: var(--proto-border) !important;
}

.t-chk:hover {
  border-color: var(--proto-teal-2) !important;
}

.t-chk.done {
  background: var(--proto-teal-3) !important;
  border-color: var(--proto-teal-2) !important;
}

/* Priority badges */
.t-pri.high {
  background: rgba(255,107,93,0.10) !important;
  color: var(--proto-red) !important;
  border-color: rgba(255,107,93,0.22) !important;
}

.t-pri.med {
  background: rgba(244,200,98,0.08) !important;
  color: var(--proto-gold-2) !important;
  border-color: rgba(244,200,98,0.18) !important;
}

.t-pri.low {
  background: rgba(142,162,187,0.06) !important;
  color: var(--proto-muted) !important;
  border-color: rgba(142,162,187,0.14) !important;
}

/* Status badges */
.t-status.in-progress {
  background: rgba(103,168,255,0.10) !important;
  color: var(--proto-blue) !important;
  border-color: rgba(103,168,255,0.22) !important;
}

.t-status.blocked {
  background: rgba(255,107,93,0.10) !important;
  color: var(--proto-red) !important;
  border-color: rgba(255,107,93,0.22) !important;
}

.t-status.not-started {
  background: rgba(142,162,187,0.06) !important;
  color: var(--proto-muted) !important;
  border-color: rgba(142,162,187,0.14) !important;
}

/* Task action buttons */
.task-act-btn {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.task-act-btn:hover {
  border-color: var(--proto-border) !important;
  color: var(--proto-text) !important;
}

.task-act-btn.accent {
  border-color: rgba(103,168,255,0.25) !important;
  color: var(--proto-blue) !important;
  background: rgba(103,168,255,0.06) !important;
}


/* ------------------------------------------------------------
   8. BOTTOM NAV (.nav)
   Deep navy with gold/teal accents
   ------------------------------------------------------------ */

.nav {
  background: var(--proto-bg-0) !important;
  border-top: 1px solid var(--proto-border-dim) !important;
  box-shadow: 0 -1px 0 rgba(244,200,98,0.06) !important;
}

.ntab {
  color: rgba(142,162,187,0.35) !important;
}

.ntab.on {
  color: var(--proto-text) !important;
}

.ntab.on.cw {
  color: var(--proto-blue) !important;
  background: rgba(103,168,255,0.08) !important;
}

.ntab.on.cp {
  color: var(--proto-green) !important;
  background: rgba(77,255,154,0.06) !important;
}

.ntab.on.ck {
  color: var(--proto-gold-2) !important;
  background: rgba(244,200,98,0.06) !important;
}

.ntab.on.chh {
  color: var(--proto-orange) !important;
  background: rgba(255,154,70,0.06) !important;
}

.ntab.on.ct {
  color: var(--proto-orange) !important;
  background: rgba(255,154,70,0.06) !important;
}

.ntab.on.cal-tab {
  color: var(--proto-blue) !important;
  background: rgba(103,168,255,0.06) !important;
}

.ntab.on.intel-tab {
  color: var(--proto-teal-2) !important;
  background: rgba(74,239,255,0.06) !important;
}

.ntab.on.agents-tab {
  color: #a48cff !important;
  background: rgba(164,140,255,0.08) !important;
}

.ntab.on.cbr-tab {
  color: #ffb25c !important;
  background: rgba(255,178,92,0.06) !important;
}

.ntab.on.ccap-tab {
  color: var(--proto-teal-2) !important;
  background: rgba(74,239,255,0.06) !important;
}


/* ------------------------------------------------------------
   9. OVERLAYS, SHEETS & MODALS
   ------------------------------------------------------------ */

.overlay,
.cq-overlay,
.sa-overlay,
.br-overlay,
.bug-overlay,
.sd-overlay,
.sc-overlay,
.intel-detail-ov {
  background: rgba(4,7,13,0.80) !important;
}

.sheet,
.cq-sheet,
.sa-box,
.br-box,
.bug-sheet,
.sd-sheet,
.sc-box,
.intel-detail-sheet {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--proto-panel-2) !important;
  border-color: var(--proto-border) !important;
}

.sheet::before,
.bug-sheet::before {
  background: linear-gradient(
    90deg, transparent,
    rgba(244,200,98,0.3),
    transparent
  ) !important;
}

/* Sheet header */
.sh-hd,
.bug-hd,
.sd-hd,
.sa-hdr,
.br-hdr,
.sc-hdr,
.id-hd {
  border-bottom-color: var(--proto-border-dim) !important;
}

.sh-title {
  color: var(--proto-text) !important;
}

/* Close buttons */
.sh-x,
.bug-x,
.sd-close,
.id-close {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

/* Form fields in sheets */
.fi,
.fta {
  background: linear-gradient(180deg, rgba(18,28,44,0.98), rgba(9,14,22,0.98)) !important;
  border-color: rgba(244,200,98,0.12) !important;
  color: var(--proto-text) !important;
}

.fi:focus,
.fta:focus {
  border-color: var(--proto-border) !important;
}

/* Status options in sheets */
.st-opt {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.st-opt.live {
  border-color: rgba(77,255,154,0.35) !important;
  color: var(--proto-green) !important;
  background: rgba(77,255,154,0.07) !important;
}

/* Save / cancel / delete buttons */
.btn-save {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
  border: none !important;
}

.btn-cancel {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.btn-del {
  background: rgba(255,107,93,0.05) !important;
  color: rgba(255,107,93,0.55) !important;
  border-color: rgba(255,107,93,0.14) !important;
}

/* Briefing stat boxes */
.br-stat {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}


/* ------------------------------------------------------------
   10. DASHBOARD DROPDOWN
   ------------------------------------------------------------ */

.dd-btn {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.dd-btn:hover {
  background: #14203a !important;
  border-color: var(--proto-border) !important;
  color: var(--proto-text) !important;
}

.dd-menu {
  background: var(--proto-panel-2) !important;
  border-color: var(--proto-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.dd-section {
  color: #7feffc !important;
}

.dd-item:hover {
  background: rgba(74,239,255,0.06) !important;
}

.dd-divider {
  background: var(--proto-border-dim) !important;
}


/* ------------------------------------------------------------
   11. CALENDAR COLUMN
   ------------------------------------------------------------ */

.cal-evt {
  background: var(--proto-bg-2) !important;
  border-left-color: var(--proto-blue) !important;
}

.cal-evt:hover {
  background: #14203a !important;
}

.cal-evt.allday {
  border-left-color: var(--proto-green) !important;
  background: rgba(77,255,154,0.05) !important;
}

.cal-day-hd {
  background: var(--proto-bg-1) !important;
}

.cal-day-hd.today {
  color: #ffb25c !important;
}

.cal-inp {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.cal-save-btn {
  background: rgba(103,168,255,0.08) !important;
  border-color: rgba(103,168,255,0.22) !important;
  color: var(--proto-blue) !important;
}

/* Calendar view toggle */
.cal-view-btn {
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.cal-view-btn.sel {
  border-color: rgba(103,168,255,0.35) !important;
  color: var(--proto-blue) !important;
  background: rgba(103,168,255,0.08) !important;
}

/* Weekly view */
.cal-week-col {
  border-right-color: var(--proto-border-dim) !important;
}

.cal-week-hd {
  border-bottom-color: var(--proto-border-dim) !important;
}

.cal-week-hour {
  border-bottom-color: var(--proto-border-dim) !important;
}

.cal-week-evt {
  background: rgba(103,168,255,0.10) !important;
  border-color: rgba(103,168,255,0.22) !important;
  border-left-color: var(--proto-blue) !important;
}

.cal-week-evt.task-evt {
  background: rgba(255,154,70,0.08) !important;
  border-color: rgba(255,154,70,0.22) !important;
  border-left-color: var(--proto-orange) !important;
}


/* ------------------------------------------------------------
   12. INTEL COLUMN
   ------------------------------------------------------------ */

.intel-search {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.intel-search:focus-within {
  border-color: rgba(74,239,255,0.25) !important;
}

.intel-stat {
  background: var(--proto-bg-1) !important;
  border-color: var(--proto-border-dim) !important;
}

.intel-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0)),
    var(--proto-bg-1) !important;
  border-color: var(--proto-border-dim) !important;
}

.intel-card:hover {
  background: var(--proto-bg-2) !important;
  border-color: rgba(74,239,255,0.18) !important;
}

.intel-tab-btn {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.intel-tab-btn:hover {
  background: #14203a !important;
}

.intel-tab-btn.active {
  background: rgba(74,239,255,0.08) !important;
  border-color: rgba(74,239,255,0.22) !important;
  color: var(--proto-teal-2) !important;
}

.intel-period-btn {
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.intel-period-btn:hover,
.intel-period-btn.active {
  border-color: rgba(74,239,255,0.22) !important;
  color: var(--proto-teal-2) !important;
  background: rgba(74,239,255,0.06) !important;
}


/* ------------------------------------------------------------
   13. CLAUDE PANEL (ONE BRAIN)
   ------------------------------------------------------------ */

.claude-panel {
  background: var(--proto-panel-2) !important;
  border-left-color: var(--proto-border) !important;
}

.claude-hd {
  background:
    linear-gradient(180deg, rgba(255,198,76,0.06), rgba(255,198,76,0) 90%) !important;
  border-bottom-color: var(--proto-border-dim) !important;
}

.claude-hd-dot {
  background: var(--proto-teal-2) !important;
  box-shadow: 0 0 8px var(--proto-teal-2) !important;
}

.claude-hd-title {
  color: var(--proto-muted) !important;
}

.claude-close,
.claude-clear {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.claude-msgs {
  background: transparent !important;
}

/* Chat messages */
.cmsg.user .cmsg-label {
  color: #ffb25c !important;
}

.cmsg.ai .cmsg-label {
  color: var(--proto-teal-2) !important;
}

.cmsg.user .cmsg-label .cmsg-dot {
  background: #ffb25c !important;
}

.cmsg.ai .cmsg-label .cmsg-dot {
  background: var(--proto-teal-2) !important;
}

.cmsg.user .cmsg-body {
  background: rgba(255,178,92,0.08) !important;
  border-color: rgba(244,200,98,0.16) !important;
  color: var(--proto-text) !important;
}

.cmsg.ai .cmsg-body {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    rgba(13,18,28,0.95) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.cmsg.ai .cmsg-body strong {
  color: var(--proto-teal-2) !important;
}

.cmsg.ai .cmsg-body code {
  background: rgba(74,239,255,0.08) !important;
}

.cmsg.thinking .cmsg-body {
  color: var(--proto-muted) !important;
}

/* Composer */
.claude-foot {
  background:
    linear-gradient(180deg, rgba(255,198,76,0.04), transparent) !important;
  border-top-color: var(--proto-border-dim) !important;
}

.claude-inp {
  background: linear-gradient(180deg, rgba(18,28,44,0.98), rgba(9,14,22,0.98)) !important;
  border-color: rgba(244,200,98,0.12) !important;
  color: var(--proto-text) !important;
}

.claude-inp:focus {
  border-color: var(--proto-gold-2) !important;
}

.claude-send {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
}

.claude-mode-badge {
  background: linear-gradient(180deg, var(--proto-teal-1), var(--proto-teal-2) 44%, var(--proto-teal-3)) !important;
  color: #06251f !important;
}

/* Claude action cards */
.claude-actions {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.claude-actions-label {
  color: #ffb25c !important;
}

.claude-action-btn.approve {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
}

.claude-action-btn.skip {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

/* Tool activity steps */
.tool-step {
  background: rgba(74,239,255,0.06) !important;
  color: var(--proto-muted) !important;
}

.tool-step.ok {
  background: rgba(77,255,154,0.08) !important;
  color: var(--proto-green) !important;
}

.tool-step.err {
  background: rgba(255,107,93,0.08) !important;
  color: var(--proto-red) !important;
}


/* ------------------------------------------------------------
   14. CLAUDE FAB (Livi bubble)
   Gold chrome border, teal glow
   ------------------------------------------------------------ */

.claude-fab {
  background: rgba(8,16,27,0.92) !important;
  border-color: rgba(244,200,98,0.30) !important;
  box-shadow:
    0 4px 20px rgba(244,200,98,0.15),
    0 0 0 4px rgba(244,200,98,0.06) !important;
}

.claude-fab:hover {
  box-shadow:
    0 8px 40px rgba(74,239,255,0.25),
    0 0 0 7px rgba(74,239,255,0.10) !important;
}

.claude-fab.open {
  box-shadow:
    0 0 0 5px rgba(74,239,255,0.20),
    0 6px 30px rgba(74,239,255,0.25) !important;
}

.claude-fab::after {
  color: rgba(244,200,98,0.5) !important;
}


/* ------------------------------------------------------------
   15. CODE QUEUE FAB + MODAL
   ------------------------------------------------------------ */

.cq-fab {
  background: linear-gradient(135deg, #14203a, #0d1626) !important;
  border: 1px solid var(--proto-border) !important;
  box-shadow:
    0 4px 16px rgba(244,200,98,0.12),
    0 0 0 2px rgba(244,200,98,0.06) !important;
}

.cq-fab .cq-badge {
  background: var(--proto-red) !important;
}

.cq-field input,
.cq-field textarea,
.cq-field select {
  background: linear-gradient(180deg, rgba(18,28,44,0.98), rgba(9,14,22,0.98)) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.cq-field input:focus,
.cq-field textarea:focus {
  border-color: var(--proto-teal-2) !important;
}

.cq-submit {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
}

/* Code queue list items */
.cq-item:hover {
  background: rgba(74,239,255,0.04) !important;
}

.cq-type.bug { background: rgba(255,107,93,0.12) !important; color: var(--proto-red) !important; }
.cq-type.feature { background: rgba(164,140,255,0.12) !important; color: #a48cff !important; }
.cq-type.idea { background: rgba(74,239,255,0.12) !important; color: var(--proto-teal-2) !important; }
.cq-type.task { background: rgba(255,154,70,0.12) !important; color: var(--proto-orange) !important; }


/* ------------------------------------------------------------
   16. AGENT DISPATCH
   ------------------------------------------------------------ */

.ad-dispatch-form {
  background: rgba(164,140,255,0.03) !important;
  border-bottom-color: var(--proto-border) !important;
}

.ad-dispatch-form input,
.ad-dispatch-form textarea,
.ad-dispatch-form select {
  background: var(--proto-bg-body) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.ad-dispatch-form input:focus,
.ad-dispatch-form textarea:focus {
  border-color: #a48cff !important;
}

.ad-dispatch-btn {
  background: linear-gradient(135deg, #5a4cc4, #4a6cff) !important;
}

.ad-live-bar {
  border-bottom-color: var(--proto-border-dim) !important;
}


/* ------------------------------------------------------------
   17. SLACK DRAFTER
   ------------------------------------------------------------ */

.sd-sheet {
  border-color: rgba(103,168,255,0.25) !important;
}

.sd-title {
  color: var(--proto-blue) !important;
}

.sd-msg-input {
  background: linear-gradient(180deg, rgba(18,28,44,0.98), rgba(9,14,22,0.98)) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.sd-msg-input:focus {
  border-color: rgba(103,168,255,0.35) !important;
}

.sd-generate {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
}

.sd-draft-box {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.sd-act-btn {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.sd-act-btn.copy {
  background: rgba(77,255,154,0.06) !important;
  border-color: rgba(77,255,154,0.20) !important;
  color: var(--proto-green) !important;
}


/* ------------------------------------------------------------
   18. DM CHAT PANEL
   ------------------------------------------------------------ */

.chat-panel {
  background: var(--proto-panel-2) !important;
  border-top-color: var(--proto-border-dim) !important;
}

.chat-hd {
  border-bottom-color: var(--proto-border-dim) !important;
}

.chat-bubble.mine.tanner {
  background: rgba(103,168,255,0.10) !important;
  border-color: rgba(103,168,255,0.20) !important;
}

.chat-bubble.mine.kasey {
  background: rgba(244,200,98,0.10) !important;
  border-color: rgba(244,200,98,0.18) !important;
}

.chat-bubble.theirs {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.chat-foot {
  border-top-color: var(--proto-border-dim) !important;
}

.chat-inp {
  background: linear-gradient(180deg, rgba(18,28,44,0.98), rgba(9,14,22,0.98)) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.chat-inp:focus {
  border-color: var(--proto-green) !important;
}

.chat-send {
  background: linear-gradient(180deg, #a1fff3, #37f0c7 44%, #0a987c) !important;
  color: #06251f !important;
}


/* ------------------------------------------------------------
   19. TOAST
   ------------------------------------------------------------ */

.toast {
  background: var(--proto-panel-2) !important;
  border-color: var(--proto-border) !important;
  color: var(--proto-text) !important;
}


/* ------------------------------------------------------------
   20. BUG REPORT SHEET
   ------------------------------------------------------------ */

.bug-sheet {
  border-top-color: var(--proto-red) !important;
}

.bug-title {
  color: var(--proto-red) !important;
}

.bug-who-opt {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.bug-who-opt.sel {
  border-color: rgba(255,107,93,0.4) !important;
  color: var(--proto-red) !important;
  background: rgba(255,107,93,0.06) !important;
}

.btn-bug-submit {
  background: linear-gradient(180deg, #ff9a8a, var(--proto-red) 45%, #992020) !important;
  color: #fff !important;
}


/* ------------------------------------------------------------
   21. GLOBAL FORM CONTROLS
   All inputs/textareas/selects across the hub
   ------------------------------------------------------------ */

select option {
  background: var(--proto-bg-2) !important;
}


/* ------------------------------------------------------------
   22. MOBILE BRIEFING & CAPTURE COLUMNS
   ------------------------------------------------------------ */

.mbr-ai {
  background: linear-gradient(
    135deg,
    rgba(255,178,92,0.06),
    rgba(74,239,255,0.04)
  ) !important;
  border-color: rgba(244,200,98,0.18) !important;
}

.mbr-ai-label {
  color: #ffb25c !important;
}

.mbr-accomplish {
  background: var(--proto-bg-1) !important;
  border-color: var(--proto-border) !important;
}

.mbr-accomplish h4 {
  color: #ffb25c !important;
}

.mbr-chip {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.mbr-chip.sel {
  border-color: rgba(103,168,255,0.30) !important;
  background: rgba(103,168,255,0.10) !important;
  color: var(--proto-blue) !important;
}

.mbr-goal-input {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.mbr-goal-input:focus {
  border-color: var(--proto-gold-2) !important;
}

.mbr-sched-btn {
  background: linear-gradient(135deg, var(--proto-blue), #4285F4) !important;
}

/* Feed cards */
.feed-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0)),
    var(--proto-bg-1) !important;
  border-color: var(--proto-border-dim) !important;
}

.feed-btn-pri {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
}

.feed-btn-sec {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

/* Capture types */
.mcap-type {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.mcap-input {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.mcap-input:focus {
  border-color: var(--proto-gold-2) !important;
}

.mcap-submit {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
}


/* ------------------------------------------------------------
   23. USER PILL (header)
   ------------------------------------------------------------ */

.user-pill {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
}

.user-pill:hover {
  background: #14203a !important;
  border-color: var(--proto-border) !important;
}

.user-drop {
  background: var(--proto-panel-2) !important;
  border-color: var(--proto-border) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5) !important;
}

.user-drop-item:hover {
  background: rgba(74,239,255,0.06) !important;
}


/* ------------------------------------------------------------
   24. PUSH NOTIFICATION GATE
   ------------------------------------------------------------ */

.push-gate-box {
  background: var(--proto-bg-body) !important;
  border-color: var(--proto-gold-2) !important;
  box-shadow:
    0 0 60px rgba(244,200,98,0.15),
    0 0 120px rgba(74,239,255,0.06) !important;
}

.push-gate-title {
  color: #ffb25c !important;
}

.push-gate-btn {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
  box-shadow: 0 4px 20px rgba(244,200,98,0.25) !important;
}


/* ------------------------------------------------------------
   25. ADMIN BAR
   ------------------------------------------------------------ */

.admin-bar {
  background: linear-gradient(90deg, var(--proto-gold-3), var(--proto-gold-2)) !important;
  color: #2b1800 !important;
}


/* ------------------------------------------------------------
   26. SLACK AUDIT + SLACK CLEAR OVERLAYS
   ------------------------------------------------------------ */

.sa-ta {
  background: linear-gradient(180deg, rgba(18,28,44,0.98), rgba(9,14,22,0.98)) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.sa-ta:focus {
  border-color: var(--proto-blue) !important;
}

.sa-btn.parse {
  background: #14203a !important;
  color: var(--proto-text) !important;
}

.sa-btn.create {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
}

.sc-msg {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-text) !important;
}

.sc-draft-ta {
  background: rgba(103,168,255,0.04) !important;
  border-color: rgba(103,168,255,0.16) !important;
  color: var(--proto-text) !important;
}

.sc-draft-ta:focus {
  border-color: var(--proto-blue) !important;
}


/* ------------------------------------------------------------
   27. KEYFRAME OVERRIDES
   Swap orange glow animations to gold/teal
   ------------------------------------------------------------ */

@keyframes dp {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes brand-glow {
  0% { text-shadow: 0 0 20px rgba(244,200,98,0.2); }
  100% { text-shadow: 0 0 40px rgba(244,200,98,0.4), 0 0 80px rgba(74,239,255,0.12); }
}

@keyframes claude-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 30px rgba(244,200,98,0.2), 0 0 0 5px rgba(244,200,98,0.08);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 8px 36px rgba(74,239,255,0.25), 0 0 0 7px rgba(74,239,255,0.12);
  }
}

@keyframes claude-breathe-wm {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 40px rgba(244,200,98,0.25), 0 0 0 6px rgba(244,200,98,0.10);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 10px 48px rgba(74,239,255,0.30), 0 0 0 8px rgba(74,239,255,0.15);
  }
}


/* ------------------------------------------------------------
   28. FILTER PILLS (task filters, context pills, etc.)
   ------------------------------------------------------------ */

.tf {
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.sd-ctx {
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.sd-ctx.sel {
  border-color: rgba(103,168,255,0.30) !important;
  color: var(--proto-blue) !important;
  background: rgba(103,168,255,0.08) !important;
}

.sd-len {
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}

.sd-len.sel {
  border-color: rgba(103,168,255,0.30) !important;
  color: var(--proto-blue) !important;
  background: rgba(103,168,255,0.08) !important;
}


/* ------------------------------------------------------------
   29. INTEL UPDATES (approve/reject cards)
   ------------------------------------------------------------ */

.intel-upd-card {
  background: var(--proto-bg-1) !important;
  border-color: var(--proto-border-dim) !important;
}

.intel-upd-card:hover {
  background: var(--proto-bg-2) !important;
}

.intel-upd-btn.approve {
  background: rgba(77,255,154,0.08) !important;
  border-color: rgba(77,255,154,0.25) !important;
  color: var(--proto-green) !important;
}

.intel-upd-btn.approve:hover {
  background: rgba(77,255,154,0.15) !important;
}

.intel-upd-btn.apply-now {
  background: rgba(74,239,255,0.08) !important;
  border-color: rgba(74,239,255,0.22) !important;
  color: var(--proto-teal-2) !important;
}


/* ------------------------------------------------------------
   30. SECTION HEADER (sec-h)
   ------------------------------------------------------------ */

.sec-h {
  color: #7feffc !important;
}

.sec-h::after {
  background: var(--proto-border-dim) !important;
}


/* ------------------------------------------------------------
   31. NOTIFICATION BELL / COMMAND BAR
   ------------------------------------------------------------ */

.notif-panel {
  background: var(--proto-panel-2) !important;
  border-color: var(--proto-border) !important;
}

.cmd-bar {
  background: var(--proto-panel-2) !important;
  border-color: var(--proto-border) !important;
}

.cmd-input {
  color: var(--proto-text) !important;
}

.cmd-item:hover,
.cmd-item.sel {
  background: rgba(74,239,255,0.06) !important;
}


/* ------------------------------------------------------------
   32. MOBILE MIC BUTTON
   ------------------------------------------------------------ */

.claude-mic {
  background: var(--proto-bg-2) !important;
  color: var(--proto-muted) !important;
}

.claude-mic:hover {
  background: linear-gradient(180deg, var(--proto-gold-1), var(--proto-gold-2) 42%, var(--proto-gold-3)) !important;
  color: #2b1800 !important;
}

.mbr-mic-btn {
  background: var(--proto-bg-2) !important;
  border-color: var(--proto-border-dim) !important;
  color: var(--proto-muted) !important;
}


/* ------------------------------------------------------------
   33. PROGRESS BARS (from tax-checklist mockup)
   Teal gradient fill on dark track
   ------------------------------------------------------------ */

progress,
.progress-bar,
[class*="progress"] > span,
[class*="bar"] > span {
  background: linear-gradient(90deg, #9efff2, #45efff 60%, #0ca9c9) !important;
  border-radius: 999px !important;
}

progress::-webkit-progress-bar,
[class*="progress"],
.progress-track {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

progress::-webkit-progress-value {
  background: linear-gradient(90deg, #9efff2, #45efff 60%, #0ca9c9) !important;
  border-radius: 999px !important;
}


/* ------------------------------------------------------------
   34. STATUS PILLS — extended variants (from checklist/strategy)
   ------------------------------------------------------------ */

[class*="status"].done,
[class*="status"].complete,
[class*="status"].filed {
  color: #06261f !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, #a1fff3, #37f0c7 44%, #0a987c) !important;
  border-color: rgba(174,252,255,0.45) !important;
}

[class*="status"].review,
[class*="status"].in-progress {
  color: #dce6ff !important;
  background: linear-gradient(180deg, rgba(103,168,255,0.28), rgba(103,168,255,0.10)) !important;
  border-color: rgba(103,168,255,0.35) !important;
}

[class*="status"].waiting,
[class*="status"].pending,
[class*="status"].stale {
  color: #ffe5c6 !important;
  background: linear-gradient(180deg, rgba(255,178,92,0.28), rgba(255,178,92,0.10)) !important;
  border-color: rgba(255,178,92,0.35) !important;
}


/* ------------------------------------------------------------
   35. DATA TABLES (from strategy/checklist mockups)
   Grid-based tables with teal headers
   ------------------------------------------------------------ */

table,
.data-table,
[class*="table"] {
  border-color: var(--proto-border-dim) !important;
}

th,
.cell.header,
[class*="table"] .header {
  color: #8ff6ff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: rgba(74,239,255,0.04) !important;
  font-size: 10px !important;
}

td,
.cell {
  border-color: rgba(244,200,98,0.08) !important;
  color: #dfe8f4 !important;
}

tr:hover td,
.row:hover .cell {
  background: rgba(74,239,255,0.03) !important;
}


/* ------------------------------------------------------------
   36. METRIC CARDS (from system-overview mockup)
   Stat counters with teal progress bars
   ------------------------------------------------------------ */

.stat-card,
.metric-card,
[class*="kpi"] {
  border: 1px solid var(--proto-border-dim) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), rgba(12,18,30,0.9) !important;
  border-radius: 12px !important;
}


/* ------------------------------------------------------------
   37. SECTION TITLES — teal accent (from all new mockups)
   ------------------------------------------------------------ */

.section-title,
.sidebar-title,
[class*="section"] > h4 {
  color: #7feffc !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}


/* ------------------------------------------------------------
   38. PURPLE ACCENT (from strategy/checklist panel-title)
   ------------------------------------------------------------ */

.panel-title,
[class*="panel"] > [class*="title"]:first-child {
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}