/* Cyrion Signal appearance stylesheet.
 * Imported from main.tsx AFTER index.css (NOT via an index.css @import),
 * and intentionally un-layered: loading it inside index.css before
 * @tailwind base corrupted Tailwind's @layer hoisting and dropped a sibling
 * brand's token block. As plain CSS loaded last, .brand-signal wins on its
 * own specificity and the other appearances are never touched. */

/* ==========================================================================
 * "Cyrion Signal" — the cyrion.ai marketing look, as a selectable appearance.
 *
 * Self-contained: one file, one class (`<html class="brand-signal">`, set by
 * ThemeContext). It only redefines brand variables, so every Tailwind utility
 * and `.cy-*` rule flips automatically — same contract as emerald / classic /
 * orbit. Nothing here touches another appearance.
 *
 * Wire-up (one line, before the @tailwind directives in src/index.css):
 *     @import './styles/brand-signal.css';
 *
 * Fonts (already loaded by index.html): Inter 400-700 · JetBrains Mono 400-700
 *
 * Reference values (sampled from cyrion.ai):
 *   canvas #050506 · panel #0a0b0c · cream ink #f2eee7 · grey #6e7481
 *   teal #00d7be · ok #6ee7a0 · warn #f5a24b · hairline rgba(255,255,255,.07)
 *   geometry 10px (6px for small chips) · JetBrains Mono UI, Inter display
 * ======================================================================== */
  /* `:root.brand-signal` (0,2,0) so these tokens beat index.css's `:root` (0,1,0)
     even though this static stylesheet loads BEFORE the Vite bundle. Without the
     bump the canvas fell back to emerald's grey --dark-900. */
  :root.brand-signal {
    /* teal scale — built around #00d7be */
    --cyrion-50: 230 255 251;
    --cyrion-100: 191 252 243;
    --cyrion-200: 128 247 231;
    --cyrion-300: 77 235 214;    /* hover / brightest */
    --cyrion-400: 26 224 201;
    --cyrion-500: 0 215 190;     /* PRIMARY */
    --cyrion-600: 0 176 156;
    --cyrion-700: 0 140 126;
    --cyrion-800: 5 110 100;
    --cyrion-900: 8 78 72;
    --cyrion-950: 2 44 42;

    /* surfaces — 900 chrome · 800 canvas · 700 panel · 600 elevated */
    --dark-900: 5 5 6;           /* #050506 sidebar / topbar */
    --dark-800: 5 5 6;           /* #050506 page canvas */
    --dark-700: 10 11 12;        /* #0a0b0c panel / card */
    --dark-600: 20 21 22;        /* #141516 elevated / active row */
    /* 500/400 are LINE values — borders and rules only. */
    --dark-500: 30 32 35;        /* #1e2023 hairline */
    --dark-400: 44 47 51;        /* #2c2f33 hairline-2 */
    --dark-300: 91 97 107;       /* #5b616b ink-dim */
    --dark-200: 154 161 172;     /* #9aa1ac ink-mute (also nav + lock grey) */
    --dark-100: 242 238 231;     /* #f2eee7 cream ink */

    --accent-cyan: 0 215 190;
    --accent-green: 110 231 160; /* #6ee7a0 "ok" — terminal success */
    --accent-blue: 138 160 196;  /* #8aa0c4 */
    --accent-purple: 169 155 216;
    --accent-pink: 244 114 182;
    --accent-orange: 240 138 90;
    --accent-yellow: 227 195 90;
    --accent-red: 242 109 109;   /* #f26d6d */
    --cy-amber: #f5a24b;
    --cy-amber-2: #f7b56f;
    --cy-amber-line: #f5a24b4d;

    --severity-critical: 242 109 109;
    --severity-high: 245 162 75;   /* #f5a24b — terminal "!" lines */
    --severity-medium: 227 195 90;
    --severity-low: 138 160 196;
    --severity-info: 110 116 129;

    /* 10px geometry; small chips stay a touch tighter, dots/avatars round. */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 10px;
    --radius-xl: 10px;
    --radius-2xl: 10px;
    --radius-3xl: 10px;
    --radius-full: 9999px;
    --radius-chip: 6px;

    /* teal bloom — the outer glow on primary CTAs */
    --shadow-glow: 0 0 0 3px rgb(var(--cyrion-500) / 0.08), 0 0 28px rgb(var(--cyrion-500) / 0.30);
    --shadow-glow-lg: 0 0 0 4px rgb(var(--cyrion-500) / 0.12), 0 0 44px rgb(var(--cyrion-500) / 0.45);

    /* Content is Inter — the reference's dominant content face (sd-186, and
       the Taskboard mock is 24× Inter vs 3× Inter Tight). The shell
       (sidebar/header) is Inter Tight, set explicitly below; numbers / chips /
       tracked-caps use --font-mono. Was 'JetBrains Mono' ("UI is mono, as in
       Classic"), but the reference never renders content in mono. */
    --font-sans: 'Inter';
    --font-mono: 'JetBrains Mono';
    --font-display: 'Inter';          /* hero / page headlines + marketing prose */

    --bg-base: #050506;
    --bg-primary: #050506;
    --bg-secondary: #050506;
    --bg-tertiary: #0a0b0c;
    --bg-elevated: #141516;
    --bg-lift: #0c0d0e;
    --border-primary: rgba(255, 255, 255, 0.07);
    --border-secondary: rgba(255, 255, 255, 0.12);
    --text-primary: #f2eee7;
    --text-secondary: #9aa1ac;
    --text-muted: #6e7481;
    --scrollbar-track: #050506;
    --scrollbar-thumb: #1e2023;
    --scrollbar-thumb-hover: #2c2f33;

    --rule: 30 32 35;
    --rule-2: 44 47 51;
    --canvas: #050506;
    --brand-fill-hover: var(--cyrion-300);
  }

  /* Indicators stay perfectly round; selection picks up the teal. */
  .brand-signal .cy-dot,
  .brand-signal .cy-eyebrow-live::before,
  .brand-signal .status-indicator,
  .brand-signal .bento-status-dot,
  .brand-signal .bento-titlebar-dot { border-radius: 9999px; }

  /* Headlines use the landing display face. */
  .brand-signal .cy-display, .brand-signal h1 { font-family: var(--font-display), system-ui, sans-serif; }

  .brand-signal ::selection { background: rgb(var(--cyrion-500) / 0.28); }

  /* Plan chip keeps its per-plan accent; just lift the surface. */
  .brand-signal .cy-plan-chip { background-color: #0a0b0c; }

  /* Nav locks are lock-only and neutral: white / grey, never a tier colour. */
  .brand-signal .cy-sidebar-lock { color: rgb(var(--dark-200)); }
  .brand-signal .cy-sidebar-lock[data-tier="lite"] { color: #5f656f; }
  .brand-signal .cy-sidebar-lock[data-tier="hacker"] { color: #9aa1ac; }
  .brand-signal .cy-sidebar-lock[data-tier="red-team"] { color: #f2eee7; }

  /* Page backdrop — ONE fixed, viewport-filling teal gradient, painted as the
   * content area's OWN background (no isolating z-index:-1 pseudo layers, no
   * grid). Two things this buys us:
   *   1. It fills the whole page, so there is no seam/line where the content
   *      used to end (the old absolute pseudos were only as tall as the content).
   *   2. Because it no longer uses `isolation`, cy-signal-backdrop stops forming
   *      a stacking context — so `fixed` modals/drawers inside the content
   *      (Target/Compliance/Integrations drawers, terminal fullscreen, …) rank
   *      in the ROOT context and paint OVER the app chrome instead of being
   *      trapped below it. */
  .brand-signal .cy-signal-backdrop {
    min-height: calc(100dvh - 4rem);
    background:
      radial-gradient(60% 55% at 22% 0%, rgb(var(--cyrion-500) / 0.16), transparent 70%),
      radial-gradient(60% 55% at 100% 100%, rgb(var(--cyrion-500) / 0.10), transparent 70%),
      #050506;
    /* Lock to the viewport so the gradient is one continuous field no matter how
     * tall the page is or how far it scrolls — this is what removes the seam.
     * (Painting is still clipped to this element, i.e. the content area; the
     * top-left bloom is pushed to 22% so its core clears the fixed sidebar.) */
    background-attachment: fixed;
  }

  /* Primary CTA with the dotted teal halo (cyrion.ai "Scope an engagement").
   *   <div class="cy-cta-glow"><button class="cy-cta-glow__btn">Upgrade Red Team
   *     <span class="cy-cta-glow__icon">↗</span></button></div>
   */
  .brand-signal .cy-cta-glow {
    display: inline-block;
    padding: 7px;
    border-radius: 10px;
    background-image: radial-gradient(rgb(var(--cyrion-500) / 0.75) 1px, transparent 1.5px);
    background-size: 4px 4px;
    box-shadow: 0 0 0 1px rgb(var(--cyrion-500) / 0.2), 0 0 34px rgb(var(--cyrion-500) / 0.34), 0 0 90px rgb(var(--cyrion-500) / 0.16);
    transition: box-shadow 0.5s cubic-bezier(0.32, 0.72, 0, 1), transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .brand-signal .cy-cta-glow:hover {
    box-shadow: 0 0 0 1px rgb(var(--cyrion-500) / 0.35), 0 0 44px rgb(var(--cyrion-500) / 0.5), 0 0 110px rgb(var(--cyrion-500) / 0.24);
  }
  .brand-signal .cy-cta-glow:active { transform: scale(0.985); }
  .brand-signal .cy-cta-glow__btn {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 56px;
    padding: 0 8px 0 24px;
    border-radius: 10px;
    border: 1.5px solid rgb(var(--dark-100) / 0.9);
    background: rgb(var(--dark-900));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }
  .brand-signal .cy-cta-glow__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #1b1c1e;
    color: rgb(var(--dark-100) / 0.85);
  }

/* ==========================================================================
 * Shell — sidebar + top bar. Navbar type stays Inter Tight (as on cyrion.ai);
 * data chips inside it stay mono.
 * ======================================================================== */
  .brand-signal .cy-sidebar,
  .brand-signal header.fixed { font-family: 'Inter Tight', system-ui, sans-serif; }
  .brand-signal .cy-sidebar .font-mono { font-family: inherit; }
  .brand-signal .cy-sidebar-wordmark {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    /* Reference wordmark (sd-3) is cream #f2eee7, not pure white; the slash
       (.cy-wm-slash) stays teal below. */
    background: none; -webkit-text-fill-color: #f2eee7; color: #f2eee7;
  }
  .brand-signal .sidebar-link-active { background-color: rgb(var(--dark-600)); }
  .brand-signal .cy-tag, .brand-signal .cy-who-l2, .brand-signal .cy-kbd { font-family: var(--font-mono), monospace; }
  .brand-signal .cy-tag-beta { background: rgb(var(--cyrion-500)); color: #04201c; font-weight: 700; border-radius: 6px; }

/* ==========================================================================
 * Dashboard / Projects — restyles the existing .cy-* surfaces (no markup change).
 * Mock: signal/pages/Dashboard.dc.html
 * ======================================================================== */
  .brand-signal .cy-card { background: rgb(var(--dark-700)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; }
  .brand-signal .cy-phead {
    min-height: 40px; border-bottom: 1px solid rgb(var(--dark-500));
    font-family: var(--font-mono), monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--dark-300));
  }
  .brand-signal .cy-phead::before { content: 'CYRION · MODULE /'; white-space: nowrap; flex: none; }
  .brand-signal .cy-phead-sq { display: none; }
  .brand-signal .cy-phead-t { color: rgb(var(--cyrion-500)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10.5px; }
  .brand-signal .cy-kpi-lbl { font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--dark-300)); }
  .brand-signal .cy-kpi-num { font-weight: 700; color: rgb(var(--dark-100)); }
  .brand-signal .cy-vt th { font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: rgb(var(--dark-300)); font-weight: 600; }
  .brand-signal .cy-vt tbody tr { transition: background 0.3s, box-shadow 0.3s; }
  .brand-signal .cy-vt tbody tr:hover {
    background: rgb(var(--accent-green) / 0.035);
    box-shadow: inset 0 0 0 1px rgb(var(--accent-green) / 0.3);
  }
  .brand-signal .cy-pname { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; color: rgb(var(--dark-100)); }
  .brand-signal .cy-mode-tabs, .brand-signal .cy-cve-search, .brand-signal .cy-tool-btn, .brand-signal .cy-who { border-radius: 10px; }
  .brand-signal .cy-mode-tabs { overflow: hidden; }
  .brand-signal .cy-mode-tabs > button.is-active { background-color: rgb(var(--dark-600)); color: rgb(var(--dark-100)); }
  .brand-signal .cy-cve-search, .brand-signal .cy-tool-btn { border-radius: 6px; }
  .brand-signal .cy-vc { color: #050506; border-radius: 6px; }
  .brand-signal .cy-chip-sq { border-radius: 6px; }
  .brand-signal .cy-pname:hover { color: rgb(var(--cyrion-500)); }
  /* cy-upd-* keep their shipped sizes (10px/21px/11px/10.5px); only the skin changes. */

/* ==========================================================================
 * Locked-feature prompt (FeatureGuard.signal.tsx)
 * Tier is the lock's grey level only: lite dim · pro mid · max/enterprise white.
 * Mock: signal/components/guards/FeatureGuard.dc.html
 * ======================================================================== */
  .brand-signal .cy-sg {
    --sg-lock: #9aa1ac;
    margin: auto; width: 100%; max-width: 620px; padding: 48px 24px 72px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .brand-signal .cy-sg[data-tier='lite'] { --sg-lock: #5f656f; }
  .brand-signal .cy-sg[data-tier='pro'] { --sg-lock: #9aa1ac; }
  .brand-signal .cy-sg[data-tier='max'], .brand-signal .cy-sg[data-tier='enterprise'] { --sg-lock: #f2eee7; }
  .brand-signal .cy-sg-lock {
    display: grid; place-items: center; width: 88px; height: 88px; border-radius: 10px;
    border: 1px solid rgb(var(--dark-100) / 0.12); background: rgb(var(--dark-700)); color: var(--sg-lock);
    box-shadow: 0 0 0 6px rgb(var(--dark-100) / 0.02), 0 0 60px rgb(var(--cyrion-500) / 0.1);
  }
  .brand-signal .cy-sg-title {
    margin: 28px 0 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; letter-spacing: -0.04em; line-height: 1.02;
    font-size: clamp(34px, 4.6vw, 52px); color: rgb(var(--dark-100)); text-wrap: balance;
  }
  .brand-signal .cy-sg-title span { color: #6e7481; }
  .brand-signal .cy-sg-desc { margin: 20px 0 0; max-width: 540px; font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: #9aa1ac; text-wrap: pretty; }
  .brand-signal .cy-sg-req { margin: 10px 0 0; font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: #6e7481; }
  .brand-signal .cy-sg-req b { font-weight: 400; color: rgb(var(--dark-100)); }
  .brand-signal .cy-sg-tier { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .brand-signal .cy-sg-cap { font-family: var(--font-mono), monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #4f545d; }
  .brand-signal .cy-sg-chip {
    display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; border-radius: 10px;
    border: 1px solid rgb(var(--dark-100) / 0.14); background: rgb(var(--dark-100) / 0.05); color: var(--sg-lock);
    font-family: var(--font-mono), monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  }
  .brand-signal .cy-sg-box {
    margin-top: 22px; width: 100%; max-width: 440px; padding: 18px 22px; text-align: left; border-radius: 10px;
    border: 1px solid rgb(var(--dark-100) / 0.1); background: rgb(var(--dark-700));
    font-family: var(--font-mono), monospace; font-size: 12.5px; line-height: 2;
  }
  .brand-signal .cy-sg-row { display: flex; gap: 12px; color: #d9d6cf; }
  .brand-signal .cy-sg-row > span { color: rgb(var(--accent-green)); }
  .brand-signal .cy-sg-cta { margin-top: 34px; }
  .brand-signal .cy-sg-benefits {
    margin-top: 44px; width: 100%; max-width: 440px; padding-top: 24px; border-top: 1px solid rgb(var(--dark-500));
    display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: 'Inter', system-ui, sans-serif;
  }
  .brand-signal .cy-sg-bh { font-size: 14px; font-weight: 500; color: rgb(var(--dark-100)); }
  .brand-signal .cy-sg-bs { font-size: 13.5px; color: #6e7481; margin-bottom: 6px; }
  .brand-signal .cy-sg-bi { font-size: 13.5px; line-height: 1.7; color: #9aa1ac; }
  .brand-signal .cy-sg-bi > span { color: #4f545d; }
  /* Coming-soon gate "Go back" (SurfaceGate ComingSoon under Signal). */
  .brand-signal .cy-sg-back {
    margin-top: 30px; display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: #6e7481;
    transition: color 0.3s;
  }
  .brand-signal .cy-sg-back:hover { color: rgb(var(--cyrion-500)); }

/* ==========================================================================
 * Compliance — framework catalogue (restyles .cy-fw-* / .cy-filter-pills / .cy-sect-*)
 * Separate cards instead of the 1px-gap table; locks are grey, tier = brightness.
 * Mock: signal/pages/Compliance.dc.html
 * ======================================================================== */
  .brand-signal .cy-fw-grid { gap: 12px; border: 0; background: transparent; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .brand-signal .cy-fw-card {
    border: 1px solid rgb(var(--dark-500)); border-radius: 10px; background: rgb(var(--dark-700)); padding: 16px; gap: 12px;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .brand-signal .cy-fw-card:hover:not(.is-soon) { background: rgb(var(--dark-700)); border-color: rgb(var(--dark-400)); box-shadow: inset 0 0 0 1px rgb(var(--accent-green) / 0.18); }
  .brand-signal .cy-fw-card.is-soon { cursor: not-allowed; opacity: 1; }
  .brand-signal .cy-fw-card.is-soon .cy-fw-icon, .brand-signal .cy-fw-card.is-soon .cy-fw-title,
  .brand-signal .cy-fw-card.is-soon .cy-fw-desc, .brand-signal .cy-fw-card.is-soon .cy-fw-controls { opacity: 0.5; }
  .brand-signal .cy-fw-icon { width: 36px; height: 36px; border-radius: 8px; background: rgb(var(--dark-600)); border-color: rgb(var(--dark-400)); color: rgb(var(--dark-200)); }
  .brand-signal .cy-fw-title-row { margin-bottom: 0; gap: 8px; }
  .brand-signal .cy-fw-title { font-size: 13.5px; font-weight: 600; color: rgb(var(--dark-100)); }
  .brand-signal .cy-fw-desc { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: rgb(var(--dark-300)); }
  .brand-signal .cy-fw-controls { margin-top: 8px; font-size: 11px; color: rgb(var(--dark-200)); font-variant-numeric: tabular-nums; }
  .brand-signal .cy-soon-chip { border-radius: 6px; border-color: rgb(var(--dark-400)); background: rgb(var(--dark-600)); color: rgb(var(--dark-300)); letter-spacing: 0.08em; }
  /* Lock badge: no tier colour, only grey level — lite dim · hacker mid · red team white. */
  .brand-signal .cy-lock-chip { border-radius: 6px; border-color: rgb(var(--dark-400)); background: transparent; letter-spacing: 0.08em; color: #9aa1ac; }
  .brand-signal .cy-lock-chip > svg { fill: currentColor; }
  .brand-signal .cy-lock-chip.is-lite { color: #5f656f; border-color: rgb(var(--dark-400)); background: transparent; }
  .brand-signal .cy-lock-chip.is-hacker { color: #9aa1ac; border-color: rgb(var(--dark-400)); background: transparent; }
  .brand-signal .cy-lock-chip.is-redteam, .brand-signal .cy-lock-chip.is-enterprise { color: #f2eee7; border-color: rgb(var(--dark-400)); background: transparent; }
  .brand-signal .cy-filter-pills { gap: 6px; border: 0; }
  .brand-signal .cy-filter-pills > button {
    border: 1px solid rgb(var(--dark-400)); border-radius: 8px; background: transparent; padding: 8px 12px; font-size: 12px;
    font-family: 'Inter', system-ui, sans-serif; color: rgb(var(--dark-200)); transition: all 0.3s;
  }
  .brand-signal .cy-filter-pills > button:last-child { border-right: 1px solid rgb(var(--dark-400)); }
  .brand-signal .cy-filter-pills > button:hover:not(.is-active) { color: rgb(var(--dark-100)); }
  .brand-signal .cy-filter-pills > button.is-active { border-color: rgb(var(--cyrion-500)); background: rgb(var(--cyrion-500) / 0.06); color: rgb(var(--cyrion-500)); font-weight: 400; }
  .brand-signal .cy-sect-head { gap: 10px; }
  .brand-signal .cy-sect-head > svg {
    box-sizing: content-box; width: 14px; height: 14px; padding: 5px; border: 1px solid rgb(var(--dark-400)); border-radius: 6px;
    background: rgb(var(--dark-700)); color: rgb(var(--cyrion-500));
  }
  .brand-signal .cy-sect-t { letter-spacing: 0.1em; color: rgb(var(--dark-200)); }
  .brand-signal .cy-sect-head-center { gap: 14px; }
  .brand-signal .cy-sect-head-center::before, .brand-signal .cy-sect-head-center::after { content: ''; flex: 1; border-top: 1px solid rgb(var(--dark-500)); }

/* ==========================================================================
 * Navbar — sidebar + top bar, matched to the reference mock. Deltas only
 * (radius + colour already flip through tokens): translucent-white hairlines,
 * NEUTRAL hover on the top-bar controls, a green "API connected" tag, the
 * account plates, and the CYRION/AI green-slash logo.
 * ======================================================================== */
  .brand-signal .cy-sidebar,
  .brand-signal .cy-sidebar-brand,
  .brand-signal .cy-sidebar-foot { border-color: rgba(255, 255, 255, 0.07); }
  .brand-signal .cy-sidebar-rule { background: rgba(255, 255, 255, 0.07); }
  .brand-signal .sidebar-link:hover,
  .brand-signal .cy-sidebar-child:hover { background-color: #0f1012; color: rgb(var(--dark-100)); }
  .brand-signal .cy-plan-chip { border-radius: var(--radius-md); overflow: hidden; }
  .brand-signal .cy-sidebar-demo { border-radius: var(--radius-md); }
  .brand-signal .cy-sidebar-avatar { background-color: rgb(var(--cyrion-500) / 0.1); border: 1px solid rgb(var(--cyrion-500) / 0.3); }
  .brand-signal .cy-sidebar-avatar span { color: rgb(var(--cyrion-500)); }

  .brand-signal header.fixed { border-color: rgba(255, 255, 255, 0.07); }
  .brand-signal .cy-search,
  .brand-signal .cy-tag,
  .brand-signal .cy-icon-sq,
  .brand-signal .cy-who,
  .brand-signal .cy-shell-btn { border-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.02); }
  .brand-signal .cy-search:hover { border-color: rgba(255, 255, 255, 0.2); }
  .brand-signal .cy-icon-sq { color: #8b919b; }
  .brand-signal .cy-icon-sq:hover,
  .brand-signal .cy-shell-btn:hover { color: rgb(var(--dark-100)); border-color: rgba(255, 255, 255, 0.22); }
  .brand-signal .cy-who:hover { border-color: rgba(255, 255, 255, 0.22); }
  .brand-signal .cy-icon-sq-ping { box-shadow: 0 0 0 2px #050506; }
  .brand-signal .cy-tag.cy-tag-ok { border-color: rgb(var(--accent-green) / 0.3); background-color: rgb(var(--accent-green) / 0.05); }
  .brand-signal .cy-who { height: 40px; padding: 0 12px 0 4px; gap: 11px; }
  .brand-signal .cy-who-av {
    height: 32px; width: 32px; border-radius: 7px;
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, #1c1e21, #101112);
    color: #9aa1ac;
  }
  .brand-signal .cy-who-l1 { color: rgb(var(--dark-100)); }
  .brand-signal .cy-shell-pop { border-color: rgba(255, 255, 255, 0.1); }

  /* Logo: CYRION/AI with a green slash; the mark reads a touch smaller.
     The slash/gap spans toggle per brand so the others keep "Cyrion AI". */
  .cy-wm-slash { display: none; }
  .brand-signal .cy-wm-slash { display: inline; color: rgb(var(--cyrion-500)); -webkit-text-fill-color: rgb(var(--cyrion-500)); }
  .brand-signal .cy-wm-gap { display: none; }
  .brand-signal .cy-sidebar-brand img { height: 2.5rem; width: 2.5rem; }

/* ── Signal Dashboard (SignalDashboard.tsx) — project-row hover ──
   The reference (sd-137:hover) lifts the row with a faint green glow + inset
   green ring; the project name goes teal. */
.brand-signal .cy-sg-prow:hover { background: rgba(110, 231, 160, 0.035); box-shadow: inset 0 0 0 1px rgba(110, 231, 160, 0.3); }
.brand-signal .cy-sg-prow a:hover { color: #00d7be; }

/* ── Sidebar nav rows — reference colours ──
   Idle is a MUTED grey (#9aa1ac / sub #7b818c), not bright cream; the active
   top-level row is cream on #141516; the active sub-item stays teal. */
.brand-signal .sidebar-link { color: #9aa1ac; font-size: 13px; }
.brand-signal .sidebar-link-active { color: #f2eee7; }
.brand-signal .cy-sidebar-child { font-size: 12.5px; }
.brand-signal .cy-sidebar-child:not(.is-active) { color: #7b818c; }

/* ==========================================================================
 * Shared controls — buttons + native date/time pickers (Taskboard et al.)
 * ======================================================================== */
  /* The app's .btn-primary ships as a full pill (`rounded-full`); Signal uses
     10px geometry, so square it (Taskboard "Save Changes", etc.). The mock's
     own button is 8px — 10px here is the house Signal radius (--radius-md). */
  .brand-signal .btn-primary { border-radius: var(--radius-md); }
  /* Native date/time inputs that aren't .cy-input (e.g. the Taskboard Start/Due
     fields) default to a LIGHT color-scheme, so the field + calendar popup draw
     white on this dark theme. Force dark chrome for every native date/time input
     under Signal. */
  .brand-signal input[type="date"],
  .brand-signal input[type="datetime-local"],
  .brand-signal input[type="time"],
  .brand-signal input[type="month"],
  .brand-signal input[type="week"] { color-scheme: dark; }

/* ==========================================================================
 * Taskboard + Targets — radius & control parity (reference)
 * ======================================================================== */
  /* EVERY text input, dropdown (<select>) and <textarea> → the 10px box radius.
     This catches the classed fields (cy-input, cy-select, cy-field, cy-treg-area)
     AND the unclassed FormField inputs in the target-detail panel. Checkboxes are
     excluded (handled below); the pill toggle is a <button>, so it is untouched. */
  .brand-signal input:not([type="checkbox"]):not([type="radio"]),
  .brand-signal select,
  .brand-signal textarea { border-radius: var(--radius-md); }
  /* Box / panel surfaces that ship with no radius. */
  .brand-signal .cy-task-card,
  .brand-signal .cy-side-card,
  .brand-signal .cy-tpanel { border-radius: var(--radius-md); }
  /* Buttons that ship with no radius: export (cy-btn-ghost), bulk actions,
     delete (cy-btn-danger). (btn-primary/new are already 10px.) */
  .brand-signal .cy-btn-ghost,
  .brand-signal .cy-btn-danger { border-radius: var(--radius-md); }
  /* Checkboxes: 4px rounded square — the reference is a 14px/4px box; a 10px
     radius on a 14px box clamps to a circle. */
  .brand-signal .cy-chk-box,
  .brand-signal .cy-chk { border-radius: 4px; }
  /* The Add-targets box spans the full row; cap it to ~half the width. */
  .brand-signal .cy-treg-area { max-width: 50%; }
  /* Target-detail "Edit" (.btn-secondary) rendered #141516 on the #0a0b0c panel
     and read as invisible — give it a clearly-lifted surface + a bright hairline
     border so it unmistakably reads as a button. */
  .brand-signal .btn-secondary {
    background: #1c1e21;
    border-color: rgba(255, 255, 255, 0.22);
    color: #f2eee7;
  }
  .brand-signal .btn-secondary:hover {
    background: #26282b;
    border-color: rgba(255, 255, 255, 0.3);
  }

/* ==========================================================================
 * Attack Chain — cards / boxes / buttons ship with no radius → 10px
 * ======================================================================== */
  .brand-signal .cy-ac-tile,
  .brand-signal .cy-ac-node,
  .brand-signal .cy-ac-find,
  .brand-signal .cy-ac-sum-box,
  .brand-signal .cy-ac-tl-card,
  .brand-signal .cy-ac-narr,
  .brand-signal .cy-ac-stats,
  .brand-signal .cy-ac-empty,
  .brand-signal .cy-ac-tech,
  .brand-signal .cy-ac-find-btn,
  .brand-signal .cy-ac-tl-btn,
  .brand-signal .cy-ac-copy { border-radius: var(--radius-md); }
  /* Kanban column: round + clip (the column's body scrolls on its own, cy-ac-col
     is just flex) so the column header doesn't poke past the rounded corners. */
  .brand-signal .cy-ac-col { border-radius: var(--radius-md); overflow: hidden; }
  /* (cy-list/cy-filterbar/cy-code-box/cy-exp-btn/cy-card are already 10px via
     tokenized rounded-* ; chips/badges/phase-pills keep their own small radii.) */

/* ==========================================================================
 * Terminal — status pill radius + fullscreen chrome hide
 * ======================================================================== */
  /* "Connected" / "Disconnected" / "Locked" status pill ships with no radius. */
  .brand-signal .cy-status-pill { border-radius: var(--radius-md); }
  /* While the terminal is fullscreen (Terminal.tsx toggles .cy-terminal-fs on
     <html>), hide the app chrome so fullscreen is genuinely full-screen. The
     overlay (fixed inset-0 z-50) now out-ranks the chrome on its own, but a
     true fullscreen still wants the rail and top bar gone, not merely covered. */
  html.brand-signal.cy-terminal-fs .cy-sidebar,
  html.brand-signal.cy-terminal-fs header.fixed { display: none !important; }

/* ==========================================================================
 * Vulnerabilities — stat cards, filters, list + detail boxes → 10px
 * ======================================================================== */
  .brand-signal .cy-dstat,
  .brand-signal .cy-stat5,
  .brand-signal .cy-field,
  .brand-signal .cy-vt-wrap,
  .brand-signal .cy-vcard,
  .brand-signal .cy-poc-box,
  .brand-signal .cy-dp-cve { border-radius: var(--radius-md); }
  /* Segmented filter group + the inline detail panel: round + clip so an inner
     active pill / the panel header can't poke past the corners (the pill group
     is a bordered segmented control; cy-dp's body scrolls on its own). */
  .brand-signal .cy-pillgroup,
  .brand-signal .cy-dp { border-radius: var(--radius-md); overflow: hidden; }
  /* (chart cards use .cy-card = already 10px; sev/jira/remed/poc chips keep 6px.) */

/* ==========================================================================
 * Integrations — service cards / panels / stat bars / buttons → 10px
 * ======================================================================== */
  .brand-signal .cy-int-card,
  .brand-signal .cy-int-panel,
  .brand-signal .cy-int-manage,
  .brand-signal .cy-int-connect { border-radius: var(--radius-md); }
  /* Bordered grids / stat bars / segmented control: round + clip inner cells. */
  .brand-signal .cy-int-grid,
  .brand-signal .cy-int-srv,
  .brand-signal .cy-int-stats,
  .brand-signal .cy-seg { border-radius: var(--radius-md); overflow: hidden; }

/* ==========================================================================
 * System Settings — AI model picker (ModelProviderPicker.css, .mpx-*). Its
 * native geometry is 3px (brand-independent Orbit look [[model-picker-rebrand]]);
 * bump containers/controls to the 10px Signal house radius + chips to 6px,
 * SIGNAL-ONLY so other appearances keep the picker's native 3px.
 * ======================================================================== */
  .brand-signal .mpx-shell,
  .brand-signal .mpx-filters { border-radius: var(--radius-md); overflow: hidden; }
  .brand-signal .mpx-list,
  .brand-signal .mpx-prov,
  .brand-signal .mpx-search,
  .brand-signal .mpx-select,
  .brand-signal .mpx-table,
  .brand-signal .mpx-active,
  .brand-signal .mpx-head-icon,
  .brand-signal .mpx-locknote,
  .brand-signal .mpx-test,
  .brand-signal .mpx-save,
  .brand-signal .mpx-discard,
  .brand-signal .mpx-upgrade { border-radius: var(--radius-md); }
  .brand-signal .mpx-tag,
  .brand-signal .mpx-recommended,
  .brand-signal .mpx-prov-badge,
  .brand-signal .mpx-detail-badge { border-radius: var(--radius-chip); }

/* ==========================================================================
 * Account Settings — selected nav tab uses the requested teal (#00d78e)
 * instead of the default accent-green; Signal-only so other brands keep green.
 * ======================================================================== */
  .brand-signal .cy-settings-tab.is-active {
    background: rgb(var(--cyrion-500) / 0.12);
    border-color: rgb(var(--cyrion-500) / 0.3);
    color: rgb(var(--cyrion-500));
  }

/* ==========================================================================
 * AI Red Team — the token system already carries Signal across these pages
 * (canvas, panels, teal, Inter, every tokenized rounded-*). The only gap is
 * the handful of rebrand classes drawn with a border but NO radius; round them
 * to the Signal 10px so the Red Team surface matches every other page.
 * (cy-card, cy-field, cy-stat5, cy-icon-sq, cy-code-box, cy-exp-btn,
 * cy-status-tab, cy-pager-btn, cy-btn-new, cy-drawer-link … are already 10px
 * via tokens above; the inline ad-hoc cards/modals/dropdowns in RedTeam*.tsx
 * got a tokenized `rounded-lg` instead.)
 * ======================================================================== */
  .brand-signal .cy-pd-box,
  .brand-signal .cy-run-card { border-radius: var(--radius-md); }
  /* Strategy × plugin heat matrix: round the outer panel and clip the corner
     cells to it. */
  .brand-signal .cy-heat { border-radius: var(--radius-md); overflow: hidden; }

  /* Playbooks + Target Intel (two-pane list/detail panels). The token system
     already themed their colour/ink; round the standalone surfaces and the
     filter/selector controls. (The outer page panels + the Intel table wrapper
     get a tokenized rounded-lg inline in the TSX; cy-field filter inputs are
     already 10px via the Vulnerabilities rule.) */
  .brand-signal .cy-pb-card,
  .brand-signal .cy-cond-box,
  .brand-signal .cy-banner { border-radius: var(--radius-md); }
  /* Filter chips + Intel stat chips → the 10px of the neighbouring filter
     fields, so the whole filter bar rounds uniformly. */
  .brand-signal .cy-pb-chip,
  .brand-signal .cy-stat-chip { border-radius: var(--radius-md); }
  /* The joined segmented "selector" (pillgroup): round the group and clip its
     joined button corners to it. */
  .brand-signal .cy-pillgroup { border-radius: var(--radius-md); overflow: hidden; }
  /* Micro tags keep the smaller chip radius. */
  .brand-signal .cy-mini-tag,
  .brand-signal .cy-tag-purple { border-radius: var(--radius-chip); }

/* ==========================================================================
 * System Settings — the audit-log panels (the SOC2 cy-aud-* rebrand) ship
 * squared; round them to the Signal 10px. The summary strip and the panel are
 * both 1px-gap/edge-to-edge compositions, so they clip their inner cells/rows
 * to the rounded corner with overflow:hidden. (The API Server Status cards use
 * rounded-xl = 10px already; the Settings left-menu container gets a tokenized
 * rounded-lg inline.)
 * ======================================================================== */
  .brand-signal .cy-aud-stats,
  .brand-signal .cy-aud-card { border-radius: var(--radius-md); overflow: hidden; }
  .brand-signal .cy-aud-note { border-radius: var(--radius-md); }