/* Jarvis / Midnight — the only visual identity.
 * Legacy sheets retain their component geometry and visibility contracts.
 * This first named layer owns paint. Important declarations in a layer outrank
 * legacy unlayered !important rules, even late-injected ID selectors. :where()
 * keeps specificity flat; component/state order below is intentional.
 * Never put display/visibility or operational state overrides in this layer.
 */
@layer jarvis-theme {
  :root {
    color-scheme: dark;
    --j-bg: #090f1d; --j-surface: #111c2e; --j-raised: #19263b;
    --j-line: #334660; --j-text: #edf3ff; --j-muted: #b0bfd5;
    --j-cyan: #78ddf5; --j-violet: #b6a0ff;
    --j-success: #72deb0; --j-warning: #ffd089; --j-danger: #ff99aa;
    --j-shadow: 0 16px 40px #02061155, inset 0 1px 0 #ffffff08;
    --bg: var(--j-bg) !important; --bg-deep: var(--j-bg) !important;
    --card: var(--j-surface) !important; --bg-panel: var(--j-surface) !important;
    --bg-elevated: var(--j-raised) !important;
    --border: var(--j-line) !important; --border2: var(--j-line) !important;
    --text: var(--j-text) !important; --text-primary: var(--j-text) !important;
    --text2: var(--j-muted) !important; --text-secondary: var(--j-muted) !important;
    --dim: var(--j-muted) !important; --dimmer: #8fa2bd !important; --text-muted: var(--j-muted) !important;
    --cyan: var(--j-cyan) !important; --neon-cyan: var(--j-cyan) !important;
    --blue: var(--j-cyan) !important; --info: var(--j-cyan) !important;
    --purple: var(--j-violet) !important; --neon-purple: var(--j-violet) !important;
    --pink: var(--j-violet) !important; --neon-pink: var(--j-violet) !important;
    --green: var(--j-success) !important; --success: var(--j-success) !important;
    --orange: var(--j-warning) !important; --warning: var(--j-warning) !important;
    --red: var(--j-danger) !important; --danger: var(--j-danger) !important;
    --lime: var(--j-cyan) !important; --matrix-green: var(--j-cyan) !important;
    --border-glow: #78ddf540 !important;
    --glow-cyan: 0 0 24px #78ddf515 !important; --glow-purple: 0 0 24px #b6a0ff15 !important;
    --workspace-bg: var(--j-bg) !important; --workspace-panel: var(--j-surface) !important;
    --workspace-line: var(--j-line) !important; --workspace-text: var(--j-text) !important;
    --workspace-muted: var(--j-muted) !important; --workspace-accent: var(--j-cyan) !important;
    --jp-bg-0: var(--j-bg) !important; --jp-bg-1: var(--j-bg) !important;
    --jp-panel: var(--j-surface) !important; --jp-panel-strong: var(--j-raised) !important;
    --jp-line: var(--j-line) !important; --jp-ink: var(--j-text) !important;
    --jp-muted: var(--j-muted) !important; --jp-cyan: var(--j-cyan) !important;
    --jp-violet: var(--j-violet) !important;
  }
  :where(html, body) {
    background: radial-gradient(ellipse at 8% 0%, #15354b66, transparent 48%), radial-gradient(ellipse at 100% 90%, #35275840, transparent 50%), var(--j-bg) !important;
    color: var(--j-text) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
  }
  :where(button, input, select, textarea) { font-family: inherit !important; }
  :where(h1, h2, h3, .card-title, .config-title, .btn-name, .pf-name) { color: var(--j-text) !important; text-shadow: none !important; }
  :where(p, small, .muted, .btn-desc, .field-hint, .tool-modal-desc, .pf-count, .status-item, .info-label) { color: var(--j-muted) !important; }
  :where(a) { color: var(--j-cyan) !important; }
  :where(.header, .topbar, #softChrome, #tabBar, #tabsStripWrap, #softNav, .cockpit-header, .jp-palette-head) {
    background: #0e1729f5 !important; border-color: var(--j-line) !important;
    box-shadow: 0 4px 22px #02061140 !important; backdrop-filter: blur(18px) !important;
  }
  :where(.header-title, .hero-title, .hero-title span, .brand-name, #softTitle) {
    color: var(--j-text) !important; -webkit-text-fill-color: var(--j-text) !important;
    text-shadow: none !important; background-image: none !important;
  }
  :where(.tab-btn, #softNav button) {
    background: transparent !important; border: 1px solid transparent !important;
    color: var(--j-muted) !important; border-radius: 10px !important;
    text-shadow: none !important; box-shadow: none !important; min-height: 44px !important;
  }
  :where(.tab-btn:hover, #softNav button:hover) { background: var(--j-raised) !important; color: var(--j-text) !important; }
  :where(.tab-btn.active, .tab-btn[aria-current="page"], #softNav button.active) {
    background: linear-gradient(115deg, #173f59, #302b52) !important;
    color: #e5faff !important; border-color: #78ddf580 !important;
    box-shadow: inset 0 -3px var(--j-cyan) !important; font-weight: 700 !important;
  }
  :where(.card, .p-card, .mc-card, .oc-panel, .workspace-panel, .wb-panel, .config-section, .jp-panel) {
    background: linear-gradient(145deg, #17243a, var(--j-surface)) !important;
    border: 1px solid var(--j-line) !important; border-radius: 18px !important;
    box-shadow: var(--j-shadow) !important;
  }
  :where(.card-title, .pf-section-title, .oc-section-label, .oc-kicker, .tool-field label) {
    color: var(--j-cyan) !important; letter-spacing: .04em !important;
  }
  :where(.card-title::before, .card::before, .platform-card::before) { background: var(--j-cyan) !important; box-shadow: none !important; }
  :where(button, .btn, .btn-full, .platform-card, .wb-button) {
    color: var(--j-text) !important; background: var(--j-raised) !important;
    border: 1px solid var(--j-line) !important; border-radius: 11px !important;
    box-shadow: inset 0 1px #ffffff06 !important; text-shadow: none !important;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
  }
  :where(.btn) { min-height: 60px !important; padding: 16px !important; }
  :where(.btn-desc) { line-height: 1.5 !important; max-height: none !important; }
  :where(button:hover, .btn:hover, .platform-card:hover) {
    background: #21344e !important; border-color: #78ddf580 !important;
    box-shadow: 0 6px 20px #02061140 !important; filter: none !important;
  }
  /* Catalogue colours used to indicate tool families, not risk or permission.
     Unify those actions; preserve red/amber/green only for explicit state UI. */
  :where(.btn-icon, .pf-icon, .pf-name, .info-value) { color: var(--j-cyan) !important; text-shadow: none !important; }
  :where(.btn-launch, .btn-full.cyan, .btn-full.purple, .ux-ai-btn.primary, .do-bar-row > button, #wb-create button[type="submit"]) {
    color: #071322 !important; background: linear-gradient(115deg, #78ddf5, #b6a0ff) !important;
    border-color: #b3eaff !important; font-weight: 750 !important;
  }
  :where(.platform-card) { background: linear-gradient(145deg, #1b2942, #131e32) !important; border-radius: 16px !important; }
  :where(.platform-card .pf-name) { color: var(--j-text) !important; }
  :where(.platform-card:hover .pf-name) { color: var(--j-cyan) !important; }
  :where(#oc-shell) { --oc-line: var(--j-line) !important; --oc-muted: var(--j-muted) !important; color: var(--j-text) !important; }
  :where(.oc-hero) {
    background: radial-gradient(ellipse at 95% 0, #49387580, transparent 55%), linear-gradient(125deg, #19364d, #111c2e) !important;
    border-color: var(--j-line) !important; padding: 32px !important;
  }
  :where(#oc-shell h1) { font-size: clamp(30px, 3.5vw, 50px) !important; letter-spacing: -.045em !important; }
  :where(#oc-shell h1 em) { color: var(--j-cyan) !important; }
  :where(.oc-workspace, #oc-primary) { background: var(--j-surface) !important; border-color: var(--j-line) !important; }
  :where(.oc-context, .oc-research) { background: #18233a !important; border-color: var(--j-line) !important; }
  :where(.oc-panel > button, .oc-research button) { min-height: 48px !important; }
  :where(.oc-beacon) { background: var(--j-cyan) !important; }
  :where(input, select, textarea, #doBarInput) {
    background: #0b1425 !important; color: var(--j-text) !important;
    border: 1px solid #465c79 !important; border-radius: 9px !important;
    caret-color: var(--j-cyan) !important; box-shadow: inset 0 2px 4px #02061130 !important;
  }
  :where(input::placeholder, textarea::placeholder) { color: #9cacc4 !important; opacity: 1 !important; }
  :where(input:focus, textarea:focus, select:focus) { border-color: var(--j-cyan) !important; }
  :where(input[type="checkbox"], input[type="radio"], progress) { accent-color: var(--j-cyan) !important; }
  :where(:focus-visible) { outline: 3px solid var(--j-cyan) !important; outline-offset: 3px !important; }
  :where(#toolModal, .pf-drawer) { background: #040817bc !important; backdrop-filter: blur(8px) !important; }
  :where(.tool-modal-box, .pf-drawer-content, .modal-content, dialog, .jp-palette, #uxAiPanel, #cockpitOverlay) {
    background: var(--j-surface) !important; color: var(--j-text) !important;
    border: 1px solid #536786 !important; border-radius: 20px !important;
    box-shadow: 0 28px 100px #020611aa !important;
  }
  :where(.tool-modal-box) { width: min(640px, calc(100vw - 32px)) !important; max-height: calc(100dvh - 32px) !important; overflow: auto !important; }
  :where(.tool-modal-header, .tool-modal-actions, .pf-drawer-header, .ux-ai-head, .ux-ai-row) {
    background: var(--j-raised) !important; color: var(--j-text) !important; border-color: var(--j-line) !important;
  }
  :where(.tool-modal-header, .tool-modal-body, .tool-modal-actions) { padding: 20px !important; }
  :where(.tool-modal-close, .pf-drawer-close, .btn-cancel-modal, .btn-launch) { min-height: 44px !important; min-width: 44px !important; }
  :where(.pf-drawer-header h3 span, .tool-badge) { color: var(--j-violet) !important; }
  :where(.tool-badge, .tools-tag, .badge, .do-chip) { background: #b6a0ff15 !important; border-color: #b6a0ff40 !important; color: var(--j-violet) !important; }
  :where(#uxAssistStrip) { background: #142039f5 !important; border-color: #7165a8 !important; box-shadow: var(--j-shadow) !important; }
  :where(.ux-ai-hint, .ux-ai-title span, .ux-ai-msgs, .ux-ai-answer, .ux-ai-user-msg) { color: var(--j-text) !important; }
  :where(.ux-ai-answer, .ux-ai-user-msg, .ux-ai-compose-label) { background: #b6a0ff12 !important; border-color: #b6a0ff40 !important; }
  :where(.result, .result-content, .terminal, .terminal-output, .log-panel, pre, .code-editor) {
    background: #080f1c !important; color: #c5d8ef !important; border-color: var(--j-line) !important; text-shadow: none !important;
  }
  :where(#workspace-connection, .wb-feedback, .empty-state, .mc-empty, .wb-empty, .loading, .skeleton) {
    background: #17243a !important; color: var(--j-muted) !important; border-color: var(--j-line) !important;
  }
  :where(.skeleton) { background: linear-gradient(100deg, #17243a 30%, #2c3c56 50%, #17243a 70%) !important; background-size: 200% 100% !important; }
  :where(.spinner) { border-color: #334660 !important; border-top-color: var(--j-cyan) !important; }
  :where([aria-busy="true"]) { cursor: progress !important; }
  :where(.good, .status-ok, .success, [data-ui-state="success"], #workspace-connection[data-state="ok"]) { color: var(--j-success) !important; border-color: #72deb070 !important; }
  :where(.watch, .warning, .status-warning) { color: var(--j-warning) !important; border-color: #ffd08970 !important; }
  :where(.error, .danger-zone, [role="alert"], [data-ui-state="error"], #workspace-connection[data-state="error"], #interaction-error) {
    color: var(--j-danger) !important; border-color: #ff99aa80 !important; background: #2a1b30 !important;
  }
  :where([role="alert"] p, #interaction-error p) { color: var(--j-danger) !important; }
  :where(button:disabled, [aria-disabled="true"]) { opacity: .55 !important; cursor: not-allowed !important; transform: none !important; filter: none !important; }
  :where(::selection) { background: #78ddf54d !important; color: #fff !important; }
  @media (max-width: 700px) {
    :where(.oc-hero) { padding: 20px !important; }
    :where(input, select, textarea) { font-size: 16px !important; }
    :where(.tool-modal-box) { width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; }
    :where(.tool-modal-header, .tool-modal-body, .tool-modal-actions) { padding: 16px !important; }
    :where(.pf-drawer-content) { max-width: 100vw !important; max-height: 90dvh !important; padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  }
}
/* Vivid Electric Spectrum — supervised visual override */
:root {
  --premium-ink: #050816;
  --premium-navy: #080d24;
  --premium-panel: #0d1534;
  --premium-panel-2: #121d46;
  --premium-line: #243872;
  --premium-line-bright: #3d5eb0;
  --premium-text: #f5f7ff;
  --premium-muted: #a9b7dc;
  --premium-cyan: #00d9ff;
  --premium-violet: #8b5cf6;
  --premium-mint: #34f5c5;
  --premium-rose: #ff4fd8;
  --premium-amber: #ffc857;
}
html, body {
  background: #050816 !important;
  background-image: radial-gradient(ellipse 85% 48% at 50% -14%, rgba(0,217,255,.23), transparent 62%), radial-gradient(ellipse 60% 55% at 100% 100%, rgba(139,92,246,.22), transparent 68%), linear-gradient(135deg,#050816,#090d25 55%,#100923) !important;
}
.topbar,.header,.app-header,.sidebar,.tabs-strip,#tabBar,#tabsStripWrap { background: rgba(8,13,36,.94) !important; border-color: #243872 !important; }
#tabBar .tab-btn.active,#tabBar .tab-btn[aria-current="page"] { color:#ecfeff !important; background:linear-gradient(135deg,#006d9b,#5424b8) !important; border-color:#00d9ff !important; box-shadow:inset 0 -3px 0 #00d9ff,0 0 24px rgba(0,217,255,.28),0 0 36px rgba(139,92,246,.18) !important; }
.tab-btn:hover { color:#fff !important; background:rgba(0,217,255,.12) !important; }
.card,.p-card,.mc-card,.oc-panel,.workspace-panel,#oc-shell .card,#app .card,#app .p-card { background:linear-gradient(145deg,#121d46,#0a112c) !important; border-color:#243872 !important; box-shadow:0 16px 40px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04) !important; }
.card:hover,.p-card:hover,.mc-card:hover { border-color:#00d9ff !important; box-shadow:0 0 24px rgba(0,217,255,.13),0 16px 42px rgba(0,0,0,.4) !important; }
.card-title,.tool-title,.config-title,h1,h2,h3 { color:#f5f7ff !important; }
.card p,.p-card .meta,.btn-desc,.pf-count,small,.muted { color:#a9b7dc !important; }
.btn { background:linear-gradient(145deg,#121d46,#0b1330) !important; border-color:#2c4587 !important; color:#f5f7ff !important; }
.btn:hover,.btn:focus-visible { border-color:#00d9ff !important; background:linear-gradient(145deg,#182b62,#12184a) !important; box-shadow:0 0 18px rgba(0,217,255,.18) !important; }
.btn-cyan,.btn-blue { color:#00e5ff !important; border-color:#00bde6 !important; background:linear-gradient(135deg,rgba(0,217,255,.19),rgba(0,119,255,.10)) !important; }
.btn-purple { color:#b794ff !important; border-color:#8b5cf6 !important; background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(217,70,239,.10)) !important; }
.btn-pink { color:#ff72df !important; border-color:#ff4fd8 !important; background:rgba(255,79,216,.12) !important; }
.btn-green { color:#34f5c5 !important; border-color:#34f5c5 !important; background:rgba(52,245,197,.11) !important; }
.btn-red { color:#ff6b92 !important; border-color:#ff4f83 !important; background:rgba(255,79,131,.11) !important; }
.btn-full.cyan { background:linear-gradient(135deg,#006b9a,#0757b8) !important; color:#e8fcff !important; border-color:#00d9ff !important; box-shadow:0 0 20px rgba(0,217,255,.16) !important; }
.btn-full.purple { background:linear-gradient(135deg,#5c21b6,#9b2cc8) !important; color:#fff3ff !important; border-color:#c084fc !important; box-shadow:0 0 20px rgba(139,92,246,.2) !important; }
.platform-card,#app .platform-card,#oc-shell .platform-card { background:linear-gradient(145deg,#121d46,#090f29) !important; border-color:#29447f !important; }
.platform-card:hover { border-color:#00d9ff !important; box-shadow:0 0 22px rgba(0,217,255,.16) !important; }
.platform-card .pf-name { color:#00e5ff !important; }
#toolModal,.modal-content,dialog { background:linear-gradient(145deg,#121d46,#080e28) !important; color:#f5f7ff !important; border-color:#3d5eb0 !important; }
input,textarea,select { background:#070d22 !important; color:#f5f7ff !important; border-color:#2c4587 !important; }
input:focus,textarea:focus,select:focus { border-color:#00d9ff !important; box-shadow:0 0 0 3px rgba(0,217,255,.16),0 0 18px rgba(0,217,255,.12) !important; }
#workspace-connection { background:linear-gradient(90deg,rgba(0,217,255,.10),rgba(139,92,246,.12)) !important; border-color:#2c4587 !important; }