/* ──────────────────────────────────────────────────────────────────
 * Ironclad command-center — Modern SaaS theme
 * Inspired by Linear / Vercel / shadcn — neutral grays, single accent,
 * Inter font, 8px radii, flat surfaces, no glows. Day / dark via
 * html[data-theme="day"|"dark"]. Wins over each page's :root by virtue
 * of higher specificity (html selector + attribute).
 * ────────────────────────────────────────────────────────────────── */

@import url('https://rsms.me/inter/inter.css');

/* ── Dark (default) ──────────────────────────────────────────────── */
html,
html[data-theme="dark"] {
  /* Neutral zinc palette */
  --bg:           #09090B;
  --bg2:          #18181B;
  --surface:      #18181B;
  --surface2:     #27272A;
  --panel:        #18181B;
  --panel2:       #27272A;

  --border:       #27272A;
  --border2:      #3F3F46;

  --text:         #FAFAFA;
  --text-b:       #FFFFFF;
  --text-d:       #A1A1AA;
  --muted:        #71717A;

  /* Primary accent — modern SaaS blue */
  --cyan:         #3B82F6;
  --cyan-g:       rgba(59,130,246,0.55);
  --cyan-d:       rgba(59,130,246,0.14);
  --cyan-dd:      rgba(59,130,246,0.06);

  /* Status accents — Tailwind 500s, low-saturation */
  --green:        #10B981;
  --green-d:      rgba(16,185,129,0.12);
  --red:          #EF4444;
  --red-d:        rgba(239,68,68,0.12);
  --yellow:       #F59E0B;
  --yellow-d:     rgba(245,158,11,0.12);
  --orange:       #F97316;
  --orange-d:     rgba(249,115,22,0.12);
  --violet:       #8B5CF6;
  --violet-g:     rgba(139,92,246,0.45);
  --violet-d:     rgba(139,92,246,0.12);

  /* Topology lane accents */
  --edge-accent:  #3B82F6;
  --app-accent:   #10B981;
  --data-accent:  #F59E0B;
  --ext-accent:   #8B5CF6;
  --ai-accent:    #A78BFA;
}

/* ── Day ─────────────────────────────────────────────────────────── */
html[data-theme="day"] {
  --bg:           #FFFFFF;
  --bg2:          #FAFAFA;
  --surface:      #FAFAFA;
  --surface2:     #F4F4F5;
  --panel:        #FFFFFF;
  --panel2:       #F4F4F5;

  --border:       #E4E4E7;
  --border2:      #D4D4D8;

  --text:         #18181B;
  --text-b:       #09090B;
  --text-d:       #52525B;
  --muted:        #71717A;

  --cyan:         #2563EB;
  --cyan-g:       rgba(37,99,235,0.5);
  --cyan-d:       rgba(37,99,235,0.10);
  --cyan-dd:      rgba(37,99,235,0.05);

  --green:        #059669;
  --green-d:      rgba(5,150,105,0.10);
  --red:          #DC2626;
  --red-d:        rgba(220,38,38,0.10);
  --yellow:       #D97706;
  --yellow-d:     rgba(217,119,6,0.10);
  --orange:       #EA580C;
  --orange-d:     rgba(234,88,12,0.10);
  --violet:       #7C3AED;
  --violet-g:     rgba(124,58,237,0.4);
  --violet-d:     rgba(124,58,237,0.10);

  --edge-accent:  #2563EB;
  --app-accent:   #059669;
  --data-accent:  #D97706;
  --ext-accent:   #7C3AED;
  --ai-accent:    #9333EA;
}

/* ── Typography reset: Inter everywhere ──────────────────────────── */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable',
               'Segoe UI', system-ui, sans-serif !important;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
body { font-size: 14px !important; line-height: 1.5 !important; }

/* Headers / brand text — Inter at proper weight, no tracking, no glow */
.brand,
.topbar-logo,
.topbar-brand .topbar-logo,
#sb-brand .logo,
.cell-title,
.sec-title,
.p-title,
.clock,
.tab.active,
.metric-val {
  font-family: 'Inter', system-ui, sans-serif !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  font-weight: 600 !important;
}
.brand, .topbar-logo, #sb-brand .logo { font-size: 14px !important; }
.cell-title, .sec-title              { font-size: 12px !important; color: var(--text-d) !important; }
.p-title                             { font-size: 18px !important; font-weight: 700 !important; color: var(--text-b) !important; }
.clock                               { font-size: 12px !important; color: var(--text-d) !important; font-variant-numeric: tabular-nums; }
.metric-val                          { font-size: 22px !important; }

/* Nav / tabs — sentence case, mid-weight */
.tab, .nav a, .topbar-sub, .sb-item, .app-tab {
  font-family: 'Inter', system-ui, sans-serif !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}
.tab, .nav a { font-size: 13px !important; }
.sb-item     { font-size: 13px !important; }

/* ── Strip cyberpunk decorations ─────────────────────────────────── */
/* Kill the grid pseudo-elements and scanline overlays everywhere */
body::before, body::after, #gbg, #scl,
.cell::after { background: none !important; background-image: none !important; }

/* Strip text-shadow glows on every emphasis class */
* { text-shadow: none !important; }

/* Strip box-shadow halos on non-essential elements (keep functional shadows
   like the floating toggle / hamburger / modals) */
.topo-node-v2, .topo-node-v2:hover,
.app-tab, .app-tab.active,
.tab, .tab.active,
.agent-tile, .agent-tile:hover,
.bar-blue, .bar-green, .bar-yellow, .bar-red,
.dot-ok, .dot-warn, .dot-err, .tn-dot, .svc-dot,
.day-traffic .dt-dot,
.agent-tile .dot {
  box-shadow: none !important;
}

/* Flat dot indicators — keep the color, drop the glow */
.svc-dot.up, .dot-ok, .tn-dot.d-ok, .day-traffic .dt-dot.fresh   { background: var(--green) !important; }
.svc-dot.down, .dot-err, .tn-dot.d-off, .day-traffic .dt-dot.dead{ background: var(--red)   !important; }
.dot-warn, .tn-dot.d-warn, .day-traffic .dt-dot.stale            { background: var(--yellow)!important; }

/* ── Modern radii — 8px on containers, 6px on controls ──────────── */
.lane, .ng, .node, .topo-node-v2, .stat, .card, .cell, .day-traffic,
.day-traffic .dt-tile, .metric-box, .agent-tile,
.b-blue, .b-green, .b-orange, .b-red, .b-yellow,
.stage-intake, .stage-build, .stage-qa, .stage-shipped, .stage-review,
.status-online, .status-degraded, .status-offline,
.proj-stage, .svc-tier,
#ic-theme-toggle, #mobile-nav-toggle {
  border-radius: 8px !important;
}
.tab, .nav a, .sb-item, .app-tab, button {
  border-radius: 6px !important;
}

/* Body + surface backgrounds — flat, no transparency */
body                       { background: var(--bg) !important; color: var(--text) !important; }

/* ── Canonical topbar layout (every dashboard page that uses .topbar or .ic-nav)
   The historical per-page CSS let the nav strip overflow into the brand and
   clock on desktop. This forces a single horizontal-scroll strip so all
   links stay reachable and nothing visually overlaps. Variants .ic-nav
   (pipeline / agent-activity) get the same treatment so menu bars look the
   same across every page. */
.topbar, .ic-nav           {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  height: 48px !important;
  padding: 0 16px !important;
  overflow: hidden !important;
}
.topbar > *, .ic-nav > *   { flex-shrink: 0 !important; }
.topbar .brand,
.topbar .clock,
.ic-nav .ic-brand          { flex-shrink: 0 !important; }
.topbar > div:first-child  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .brand-sub         { font-size: 11px !important; color: var(--text-d) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; }
.topbar .nav,
.topbar .topbar-nav,
.ic-nav .ic-links          {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  gap: 2px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--border2) transparent !important;
  -webkit-overflow-scrolling: touch;
}
.topbar .nav::-webkit-scrollbar,
.topbar .topbar-nav::-webkit-scrollbar,
.ic-nav .ic-links::-webkit-scrollbar           { height: 4px; }
.topbar .nav::-webkit-scrollbar-track,
.topbar .topbar-nav::-webkit-scrollbar-track,
.ic-nav .ic-links::-webkit-scrollbar-track     { background: transparent; }
.topbar .nav::-webkit-scrollbar-thumb,
.topbar .topbar-nav::-webkit-scrollbar-thumb,
.ic-nav .ic-links::-webkit-scrollbar-thumb     { background: var(--border2); border-radius: 2px; }
.topbar .nav a,
.topbar .topbar-nav a,
.ic-nav .ic-links a        { flex-shrink: 0 !important; white-space: nowrap !important; }

/* Apply the modern-SaaS link styling to variant class names so every menu
   bar matches (no orange/violet glow holdovers from old per-page CSS). */
.topbar-nav a, .ic-links a {
  color: var(--text-d) !important;
  padding: 6px 12px !important;
  border: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  text-shadow: none !important;
}
.topbar-nav a:hover, .ic-links a:hover { color: var(--text) !important; background: var(--surface2) !important; }
.topbar-nav a.active, .ic-links a.active { color: var(--cyan) !important; background: var(--cyan-d) !important; }

.cell, .stat, .card, .panel,
.metric-box, .agent-tile,
.day-traffic, .topo-node-v2 { background: var(--surface) !important; border: 1px solid var(--border) !important; }
.cell-header               { background: var(--surface2) !important; border-bottom: 1px solid var(--border) !important; }
#sidebar                   { background: var(--surface) !important; border-right: 1px solid var(--border) !important; }
#sb-toggle                 { background: var(--surface) !important; border: 1px solid var(--border) !important; }

/* ──────────────────────────────────────────────────────────────────
 * Universal containment + word-wrap.
 * (1) Kill page-level horizontal scroll. The page should never side-scroll.
 * (2) Give every flex/grid child min-width:0 — Linear's "shrink to fit"
 *     trick so a long string inside a flex item can't push its container.
 * (3) Make content text classes wrap instead of truncate/overflow. Long
 *     URLs, file paths, JSON blobs, model names all break across lines.
 * Nav links / tabs / badges / clock keep nowrap (handled elsewhere).
 * ────────────────────────────────────────────────────────────────── */
html, body { overflow-x: hidden !important; max-width: 100% !important; }

/* Min-width:0 lets flex/grid children shrink below their content size,
   which is what stops a long string from forcing a horizontal scrollbar
   on the parent. Targets every common content-row pattern in the dashboard. */
.cell, .stat, .card, .panel, .agent-tile, .metric-box,
.day-traffic, .topo-node-v2, .lane, .ng, .node,
.feed-item, .log-item, .proj-row, .svc-row, .agent-grid,
.feed-item > *, .log-item > *, .proj-row > *, .svc-row > *,
.topbar > * > *,
.kanban-col, .kanban-card,
.transcript-row, .decision-row, .version-row,
.cell-body, .cell-body > *,
.day-traffic .dt-tile {
  min-width: 0 !important;
}

/* Content boxes should never overflow their parent horizontally. */
.cell, .cell-body, .stat, .card, .panel, .agent-tile, .metric-box,
.day-traffic, .topo-node-v2, .lane, .ng,
.main, .container, .view, .grid, .layout, #content,
.kanban-col, .kanban-card { max-width: 100% !important; }

/* Wrap content text in every panel.
   Targets the named content classes across mission-control / dashboard /
   agents / war-room / kanban / profiles / decisions / transcripts /
   terminal / topology / changelog / versions. */
.feed-text, .log-text, .proj-name, .svc-name,
.agent-tile .task, .agent-tile .nm,
.cell-body p, .cell-body li, .cell-body span,
.stat .sub, .stat .lbl, .stat .val,
.p-meta, .topo-note, .topo-app-content,
.kanban-card-title, .kanban-card-body,
.transcript-text, .decision-text, .version-text,
.changelog-title, .changelog-desc,
.profile-bio, .profile-task,
.term-line, .term-output,
[class*="-desc"], [class*="-body"], [class*="-summary"], [class*="-note"] {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Inline code / preformatted: wrap rather than overflow horizontally. */
code, pre, kbd, samp, .mono, .code, .term-line, .term-output {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Tables on desktop: fixed layout so cells wrap content instead of forcing
   the row to max-content. (Mobile @media still gets the horizontal-scroll
   wrapper for genuinely too-wide tables.) Also kills inline white-space:nowrap
   on dynamically-generated cells (index.html tasks/audit tables). */
@media (min-width: 901px) {
  table { table-layout: fixed !important; width: 100% !important; max-width: 100% !important; }
  td, th {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: top;
  }
}

/* Intentional horizontal-scroll containers — opt OUT of the universal
   max-width:100% rule so kanban boards / war-room seat strips can keep
   their native left-right scrolling pattern. */
.board, .strip, .scroll-x { max-width: none !important; }

/* Images / iframes / videos: never wider than their container. */
img, iframe, video, canvas, svg:not(.topo-svg):not(.topo-app-svg) {
  max-width: 100% !important;
  height: auto !important;
}

/* Sidebar items — modern hover/active */
.sb-item                       { color: var(--text-d) !important; border-left: 2px solid transparent !important; padding: 8px 14px !important; }
.sb-item:hover                 { background: var(--surface2) !important; color: var(--text) !important; border-left-color: transparent !important; }
.sb-item.active                { background: var(--cyan-d) !important; color: var(--cyan) !important; border-left-color: var(--cyan) !important; }

/* Nav links — pill on hover */
.nav a { color: var(--text-d) !important; padding: 6px 12px !important; border: none !important; }
.nav a:hover { color: var(--text) !important; background: var(--surface2) !important; }
.nav a.active { color: var(--cyan) !important; background: var(--cyan-d) !important; }

/* Tab bar — flat with bottom underline on active (Linear pattern) */
.tab        { color: var(--text-d) !important; padding: 8px 14px !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; }
.tab:hover  { color: var(--text) !important; background: transparent !important; }
.tab.active { color: var(--text-b) !important; border-bottom-color: var(--cyan) !important; background: transparent !important; }

/* Topology lanes — flat tinted backgrounds */
.lane-edge, .lane-app, .lane-data, .lane-ext {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
}
.ng, .ng-edge, .ng-app, .ng-data, .ng-ext, .ng-ai, .ng-red {
  background: var(--surface2) !important; border: 1px solid var(--border) !important;
}

/* Today's traffic card — modern stat strip */
.day-traffic { background: var(--surface) !important; border: 1px solid var(--border) !important; padding: 14px 16px !important; }
.day-traffic .dt-label { color: var(--text-d) !important; border-right: 1px solid var(--border) !important; text-transform: none !important; font-weight: 600 !important; }
.day-traffic .dt-k     { color: var(--muted) !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
.day-traffic .dt-v     { color: var(--text-b) !important; font-family: 'Inter', system-ui, sans-serif !important; font-feature-settings: 'tnum'; }

/* Scrollbars — minimal, neutral */
::-webkit-scrollbar           { width: 8px; height: 8px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: var(--border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
html[data-theme="day"] ::-webkit-scrollbar-thumb { background: #D4D4D8; }
html[data-theme="day"] ::-webkit-scrollbar-thumb:hover { background: #A1A1AA; }

/* Theme toggle button — square radius, no halo */
#ic-theme-toggle {
  position: fixed; top: 8px; right: 12px; z-index: 9999;
  width: 36px; height: 36px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  transition: background .15s ease, border-color .15s ease;
  box-shadow: none !important;
}
#ic-theme-toggle:hover  { background: var(--surface2) !important; border-color: var(--border2) !important; transform: none !important; }
#ic-theme-toggle:focus  { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Mobile hamburger — neutralize old palette */
#mobile-nav-toggle {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
#mobile-nav-toggle:active { background: var(--surface2) !important; }
html[data-theme="day"] #mobile-nav-toggle { box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }
html[data-theme="day"] #mobile-nav-backdrop { background: rgba(0,0,0,0.32); }

/* ──────────────────────────────────────────────────────────────────
 * Universal mobile responsive layer.
 * Loaded on every command-center page (via theme.css). Covers every
 * unmobile pattern the audit found: locked body scroll, fixed content
 * areas that don't reflow, multi-column grids that don't stack, tables
 * that blow out the layout, oversized padding, etc.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Unlock pages that lock body scroll (mission-control, kanban, terminal, index) */
  html, body {
    overflow: auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  /* Reserve bottom-nav clearance (60px bar + iOS safe-area) */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Unfix content areas so they scroll vertically. Topbar stays fixed. */
  .main, .view, .grid, .layout,
  #content, #main, #shell, #app {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: auto !important;
    width: auto !important;
  }

  /* Legacy sidebar shell — hide on mobile because bottom-nav owns navigation.
     Restore by removing body.ic-has-bottom-nav from the page. */
  body.ic-has-bottom-nav #sidebar,
  body.ic-has-bottom-nav #sb-toggle { display: none !important; }
  body.ic-has-bottom-nav #app,
  body.ic-has-bottom-nav #shell { flex-direction: column !important; display: block !important; }
  /* Push content below the fixed topbar (48px is the universal height) */
  .topbar ~ .main,
  .topbar ~ .grid,
  .topbar ~ .view,
  .topbar ~ .layout,
  .topbar ~ #content,
  .topbar ~ #main { margin-top: 48px !important; }

  /* Topbar: tighten padding, allow brand to shrink, hide ornamental sub-labels.
     The bottom-nav already hides .topbar .nav on body.ic-has-bottom-nav, so we
     keep .topbar usable for pages that don't load bottom-nav.js. */
  .topbar {
    padding: 0 8px !important;
    gap: 8px !important;
  }
  .topbar .brand,
  .topbar .topbar-logo,
  .topbar .topbar-brand { font-size: 13px !important; flex-shrink: 0; }
  .topbar .topbar-sub,
  .topbar .header-sub,
  .topbar .last-scan,
  .topbar > .clock,
  .topbar .refresh-info { display: none !important; }
  /* Fallback: if .nav is visible (no bottom-nav active), make it horizontally scrollable */
  body:not(.ic-has-bottom-nav) .topbar .nav,
  body:not(.ic-has-bottom-nav) .topbar .tab-bar {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  body:not(.ic-has-bottom-nav) .topbar .nav a,
  body:not(.ic-has-bottom-nav) .topbar .tab { flex-shrink: 0 !important; white-space: nowrap; }

  /* Stack every multi-column grid to a single column on mobile.
     Covers inline-styled grids and every named pattern across the dashboard. */
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  .grid, .agent-grid, .trading-grid, .stats-row, .stats-grid,
  .proj-grid, .agents-grid-3, .agents-grid-5,
  .grid-2, .grid-3, .grid-4,
  .kpi-row, .kpi-grid, .mcp-matrix, .launcher-grid,
  #app-launcher-grid, #positionsGrid, #tasksGrid,
  .voice-layout, .role-grid, .nav-grid,
  .feature-grid, .resource-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }
  /* Mission-control 3×2 grid: each cell needs min-height after stacking */
  .grid > .cell { min-height: 300px; }

  /* Tables — horizontal scroll wrapper so wide tables don't blow out the layout */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table thead, table tbody, table tr { display: table; width: max-content; min-width: 100%; }

  /* Cards / cells / stat boxes: tighter padding so content fits */
  .card, .cell, .stat, .panel, .panel2, .agent-tile, .metric-box,
  .topo-node-v2, .day-traffic { padding: 12px !important; }
  .cell-header { padding: 10px 12px !important; }
  .cell-body   { padding: 10px 12px !important; }
  .main, .container, .content-area, #content { padding: 12px !important; }

  /* Modals — fill the screen on phones */
  .modal, .dialog, #ic-kickoff-modal, #ic-palette,
  .ic-modal, #pdt-modal, #task-modal { width: 95vw !important; max-width: 95vw !important; }

  /* Today's-traffic card: stack the stat tiles vertically below the label */
  .day-traffic { flex-wrap: wrap !important; }
  .day-traffic .dt-label { width: 100%; border-right: none !important; border-bottom: 1px solid var(--border); padding: 6px 0 8px !important; margin-bottom: 4px; }
  .day-traffic .dt-tile { min-width: 100px; }
  .day-traffic .dt-tile + .dt-tile { border-left: none !important; }
}

@media (max-width: 480px) {
  body { font-size: 13px !important; }
  .brand, .topbar-logo, #sb-brand .logo { font-size: 12px !important; }
  .topbar .nav a, .topbar .tab { font-size: 11px !important; padding: 6px 10px !important; }
  .agent-tile .av { width: 32px !important; height: 32px !important; font-size: 12px !important; }
  .stat .val, .metric-val, .p-title { font-size: 17px !important; }

  /* Tap targets — Apple/Material 40–44px */
  a, button, .btn, .nav a, .tab, .sb-item { min-height: 40px; }

  /* Even tighter cards */
  .card, .cell, .stat, .panel, .agent-tile, .metric-box,
  .topo-node-v2, .day-traffic { padding: 10px !important; }

  /* Auto-fit grids → single column on phones */
  [style*="repeat(auto-fill"],
  [style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * ironclad-global.js injected UI — re-themed to match modern SaaS.
 * The script writes its own <style> at runtime with the legacy cyberpunk
 * colors; we override with !important so the new tokens win.
 * ────────────────────────────────────────────────────────────────── */

/* Friday floating button + chat panel — fully hidden per user request */
#ic-friday-btn,
#ic-friday-panel,
#ic-friday-panel-header,
#ic-friday-log,
#ic-friday-form { display: none !important; }

/* Toast notifications (top-right) */
.ic-toast {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
  letter-spacing: 0 !important;
}
.ic-toast.info    { color: var(--cyan) !important;   border-color: var(--cyan-d) !important; }
.ic-toast.success { color: var(--green) !important;  border-color: var(--green-d) !important; }
.ic-toast.warn    { color: var(--yellow) !important; border-color: var(--yellow-d) !important; }
.ic-toast.error   { color: var(--red) !important;    border-color: var(--red-d) !important; }

/* Command palette (Ctrl+K) */
#ic-palette-overlay { background: rgba(0,0,0,0.55) !important; backdrop-filter: blur(6px) !important; }
#ic-palette {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  box-shadow: 0 16px 64px rgba(0,0,0,0.5) !important;
}
#ic-palette-input {
  color: var(--text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  border-bottom: 1px solid var(--border) !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
}
#ic-palette-input::placeholder { color: var(--muted) !important; }
.ic-cmd { padding: 10px 18px !important; }
.ic-cmd:hover, .ic-cmd.active {
  background: var(--cyan-d) !important;
  border-left: 2px solid var(--cyan) !important;
}
.ic-cmd-label   { color: var(--text) !important; font-size: 14px !important; letter-spacing: 0 !important; }
.ic-cmd-sub     { color: var(--muted) !important; font-size: 12px !important; }
.ic-cmd-kbd     { color: var(--muted) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; font-size: 11px !important; }
.ic-palette-section { color: var(--muted) !important; font-family: 'Inter', system-ui, sans-serif !important; letter-spacing: .06em !important; font-size: 11px !important; }
#ic-palette-empty   { color: var(--muted) !important; font-size: 13px !important; letter-spacing: 0 !important; }

/* Kickoff modal */
#ic-kickoff-overlay { background: rgba(0,0,0,0.55) !important; backdrop-filter: blur(6px) !important; }
#ic-kickoff-modal {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  box-shadow: 0 16px 64px rgba(0,0,0,0.5) !important;
}
#ic-kickoff-modal h2 {
  color: var(--text-b) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
#ic-kickoff-modal p { color: var(--text-d) !important; font-size: 14px !important; letter-spacing: 0 !important; }
#ic-kickoff-textarea {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}
#ic-kickoff-textarea:focus { border-color: var(--cyan) !important; outline: 2px solid var(--cyan-d) !important; outline-offset: 0; }
.ic-kickoff-btns button {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
#ic-kickoff-cancel { background: var(--surface2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
#ic-kickoff-go     { background: var(--cyan) !important; color: #FFFFFF !important; border: none !important; }
#ic-kickoff-go:hover { filter: brightness(1.08); }