/* ===================================================================== STUDIO THEME — "Console" skin, dark (default) + light Loaded LAST. Re-skins the whole app by (a) redefining the shared design tokens per theme and (b) overriding key shared components. Toggle via . ===================================================================== */ /* ---------- semantic theme tokens ---------- */ html[data-theme="dark"] { --app-bg: #0d1017; --app-bg-2: #12161f; --panel: #161b26; --panel-2: #1b212d; --panel-3: #0f1420; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.15); --txt: #eef1f6; --muted: #9aa4b2; --faint: #6b7686; --accent: #34e1c4; --accent-2: #19b9a3; --accent-ink: #06231f; --accent-tint: rgba(52,225,196,.10); --amber: #f5b53d; --danger: #ff6b6b; --ok: #34e1c4; --glow1: rgba(52,225,196,.10); --glow2: rgba(52,225,196,.05); --shadow: 0 18px 40px -22px rgba(0,0,0,.8); color-scheme: dark; } html[data-theme="light"] { --app-bg: #f4f5f7; --app-bg-2: #eef0f3; --panel: #ffffff; --panel-2: #f7f8fa; --panel-3: #0f1420; /* keep nav/footer dark in light mode for contrast */ --line: rgba(16,20,28,.12); --line-2: rgba(16,20,28,.20); --txt: #10141c; --muted: #5b6675; --faint: #8b95a3; --accent: #0fb5a1; --accent-2: #0a8f80; --accent-ink: #ffffff; --accent-tint: rgba(15,181,161,.10); --amber: #c98a16; --danger: #e5484d; --ok: #0a8f80; --glow1: rgba(15,181,161,.06); --glow2: rgba(15,181,161,.03); --shadow: 0 14px 34px -20px rgba(16,20,28,.30); color-scheme: light; } /* ---------- bridge OLD token names -> new theme (re-skins existing components) ---------- */ html[data-theme] { --font-display: 'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono: 'JetBrains Mono',ui-monospace,Consolas,monospace; --blue: var(--accent); --blue-dk: var(--panel-3); --blue-lt: var(--accent-tint); --sky: var(--accent-2); --navy: var(--panel-3); --white: var(--panel); --off-white: var(--app-bg-2); --cream: var(--panel); --gray-lt: var(--panel-2); --gray-dk: var(--muted); --text: var(--txt); --text-lt: var(--muted); --border: var(--line); --gold: #c9a227; /* brand mark only (logo keeps gold on both themes) */ --gold-light: #e8c547; } /* ---------- base ---------- */ html[data-theme] body.studio-shell-body { background: radial-gradient(1100px 520px at 80% -8%, var(--glow1), transparent 60%), radial-gradient(900px 480px at 6% 2%, var(--glow2), transparent 55%), var(--app-bg); color: var(--txt); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } html[data-theme] .studio-shell-container { max-width: 1240px; margin-inline: auto; } /* ---------- top strip + header ---------- */ html[data-theme] #studio-site-header { background: transparent; border: 0; } html[data-theme] .studio-topbar { background: var(--panel-3); border-bottom: 1px solid var(--line); color: var(--muted); } html[data-theme] .studio-topbar-left { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); } html[data-theme] .studio-topbar-divider { background: var(--line-2); } html[data-theme] .studio-main-nav { background: color-mix(in srgb, var(--app-bg) 72%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } html[data-theme] .studio-brand-text { font-family: var(--font-display); font-weight: 600; color: var(--txt); letter-spacing: -.2px; } html[data-theme] .studio-brand-subtext { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); } html[data-theme] .studio-brand-mark { background: transparent; border: 0; box-shadow: none; } html[data-theme] .studio-nav-link { color: var(--muted); font-weight: 500; border-radius: 8px; } html[data-theme] .studio-nav-link:hover { color: var(--txt); background: var(--panel-2); } html[data-theme] .studio-nav-link.active, html[data-theme] .studio-nav-link[aria-current="page"] { color: var(--txt); } html[data-theme] .studio-user-pill { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 9px; padding: 7px 13px; font-size: 13px; } html[data-theme] .studio-signout-btn { background: transparent; border: 0; color: var(--muted); } html[data-theme] .studio-signout-btn:hover { color: var(--accent); } /* theme toggle */ .studio-theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); cursor: pointer; transition: .16s; } .studio-theme-toggle:hover { color: var(--accent); border-color: var(--line-2); } html[data-theme="dark"] .studio-theme-toggle .ic-sun { display: block; } html[data-theme="dark"] .studio-theme-toggle .ic-moon { display: none; } html[data-theme="light"] .studio-theme-toggle .ic-sun { display: none; } html[data-theme="light"] .studio-theme-toggle .ic-moon { display: block; } /* ---------- footer ---------- */ html[data-theme] .studio-footer { background: var(--panel-3); border-top: 1px solid var(--line); } html[data-theme] .studio-footer-title { font-family: var(--font-display); color: var(--txt); } html[data-theme] .studio-footer-inner, html[data-theme] .studio-footer-meta, html[data-theme] .studio-footer-env { color: var(--muted); } html[data-theme] .studio-footer-env { font-family: var(--font-mono); font-size: 11px; } /* ---------- page header ---------- */ html[data-theme] .studio-page-header { border-bottom: 1px solid var(--line); } html[data-theme] .studio-page-header-eyebrow, html[data-theme] .studio-detail-section-eyebrow, html[data-theme] .studio-form-info-label, html[data-theme] .studio-section-label, html[data-theme] .studio-quick-title .studio-quick-eyebrow { font-family: var(--font-mono); letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-size: 11px; } html[data-theme] .studio-page-header-title, html[data-theme] .studio-detail-title, html[data-theme] h1, html[data-theme] h2.studio-detail-section-title { font-family: var(--font-display); color: var(--txt); letter-spacing: -.5px; } html[data-theme] .studio-page-header-subtitle, html[data-theme] .studio-page-lead { color: var(--muted); } /* ---------- sections / cards / panels ---------- */ html[data-theme] .studio-section, html[data-theme] .studio-card, html[data-theme] .studio-form-card, html[data-theme] .studio-form-info-card, html[data-theme] .studio-detail-card, html[data-theme] .studio-detail-summary-card, html[data-theme] .studio-plan-step-card, html[data-theme] .studio-quick-tile, html[data-theme] .studio-hero-stat, html[data-theme] .studio-empty-state, html[data-theme] .accordion-item, html[data-theme] .studio-detail-accordion .accordion-item { background: linear-gradient(180deg,var(--panel),var(--app-bg-2)); border: 1px solid var(--line); border-radius: 14px; color: var(--txt); box-shadow: none; } html[data-theme] .studio-section-label { display: block; margin-bottom: 12px; } html[data-theme] .studio-form-info-title { font-family: var(--font-display); color: var(--txt); } html[data-theme] .studio-form-info-text, html[data-theme] .studio-detail-summary-label, html[data-theme] .studio-quick-text { color: var(--muted); } html[data-theme] .studio-detail-summary-value { color: var(--txt); font-family: var(--font-mono); } /* hero block (home) -> graphite console panel */ html[data-theme] .studio-hero, html[data-theme] .studio-home-hero, html[data-theme] .studio-hero-panel { background: linear-gradient(180deg,var(--panel),var(--panel-3)); border: 1px solid var(--line); border-radius: 18px; color: var(--txt); } html[data-theme] .studio-hero-eyebrow { font-family: var(--font-mono); color: var(--accent); letter-spacing: 3px; } html[data-theme] .studio-hero-title, html[data-theme] .studio-hero h1 { font-family: var(--font-display); color: var(--txt); } /* ---------- buttons ---------- */ html[data-theme] .studio-btn { font-family: var(--font-display); font-weight: 600; border-radius: 10px; } html[data-theme] .studio-btn-primary, html[data-theme] .studio-btn-white { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: var(--accent-ink); border: 1px solid transparent; box-shadow: 0 8px 24px -10px color-mix(in srgb,var(--accent) 60%,transparent); } html[data-theme] .studio-btn-ghost, html[data-theme] .studio-btn-outline-white { background: var(--panel); border: 1px solid var(--line-2); color: var(--txt); } html[data-theme] .studio-btn-ghost:hover, html[data-theme] .studio-btn-outline-white:hover { border-color: var(--accent); color: var(--accent); } html[data-theme] .studio-btn-success { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: var(--accent-ink); border: 0; } html[data-theme] .studio-btn-danger, html[data-theme] .studio-btn-danger-soft { background: transparent; border: 1px solid color-mix(in srgb,var(--danger) 45%,transparent); color: var(--danger); } /* ---------- forms ---------- */ html[data-theme] .studio-form-label, html[data-theme] .form-check-label { color: var(--txt); font-weight: 500; } html[data-theme] .studio-form-input, html[data-theme] .studio-form-textarea, html[data-theme] .studio-form-select, html[data-theme] input.form-control, html[data-theme] textarea.form-control, html[data-theme] select.form-select { background: var(--app-bg-2); border: 1px solid var(--line-2); color: var(--txt); border-radius: 9px; } html[data-theme] .studio-form-input::placeholder, html[data-theme] .studio-form-textarea::placeholder { color: var(--faint); } html[data-theme] .studio-form-input:focus, html[data-theme] .studio-form-textarea:focus, html[data-theme] input.form-control:focus, html[data-theme] textarea.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } html[data-theme] .form-check-input { background: var(--app-bg-2); border: 1px solid var(--line-2); } html[data-theme] .form-check-input:checked { background: var(--accent); border-color: var(--accent); } /* ---------- chat ---------- */ html[data-theme] .studio-chat-thread { border: 1px solid var(--line); border-radius: 14px; background: var(--app-bg-2); padding: 14px; } html[data-theme] .studio-chat-message.is-user .studio-chat-bubble { background: var(--accent-tint); border: 1px solid color-mix(in srgb,var(--accent) 35%,transparent); color: var(--txt); border-radius: 12px; } html[data-theme] .studio-chat-pre { background: var(--panel-3); border: 1px solid var(--line); color: var(--txt); border-radius: 12px; font-family: var(--font-mono); white-space: pre-wrap; } html[data-theme] .studio-chat-message-role .badge { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .6px; } html[data-theme] .badge.bg-primary { background: var(--accent-tint) !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb,var(--accent) 35%,transparent); } html[data-theme] .badge.bg-secondary { background: var(--panel-2) !important; color: var(--muted) !important; border: 1px solid var(--line); } html[data-theme] .badge.bg-success { background: var(--accent-tint) !important; color: var(--ok) !important; } html[data-theme] .badge.bg-danger { background: color-mix(in srgb,var(--danger) 14%,transparent) !important; color: var(--danger) !important; } /* ---------- plan steps / parameters ---------- */ html[data-theme] .studio-step-order-pill { background: var(--accent-tint); color: var(--accent); border: 1px solid color-mix(in srgb,var(--accent) 35%,transparent); font-family: var(--font-mono); } html[data-theme] .studio-plan-step-title { font-family: var(--font-display); color: var(--txt); } html[data-theme] .studio-plan-parameter-row { border-top: 1px solid var(--line); } html[data-theme] .studio-plan-parameter-name { color: var(--muted); font-family: var(--font-mono); } html[data-theme] .studio-plan-parameter-value { color: var(--txt); } html[data-theme] .studio-plan-parameter-source { color: var(--accent); font-family: var(--font-mono); } /* ---------- empty states ---------- */ html[data-theme] .studio-empty-inline, html[data-theme] .studio-empty-state-title { color: var(--muted); } /* ---------- tables / runs ---------- */ html[data-theme] .studio-table, html[data-theme] table.table { color: var(--txt); } html[data-theme] .studio-table th, html[data-theme] table thead th { color: var(--faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; border-color: var(--line); } html[data-theme] .studio-table td, html[data-theme] table td { border-color: var(--line); } html[data-theme] .studio-table tr:hover, html[data-theme] table tbody tr:hover { background: var(--panel-2); } /* ---------- accordion (details) ---------- */ html[data-theme] .accordion-button { background: var(--panel) !important; color: var(--txt) !important; font-family: var(--font-display); box-shadow: none !important; } html[data-theme] .accordion-button:not(.collapsed) { background: var(--panel-2) !important; color: var(--accent) !important; } html[data-theme] .accordion-body { background: var(--app-bg-2); color: var(--txt); } /* ===================================================================== NEW CONSOLE COMPONENTS (used by the redesigned Console / Integrate) ===================================================================== */ /* eyebrow helper */ .studio-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 10px; } .studio-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); opacity: .7; } /* stat bar */ .studio-statbar { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg,var(--panel),var(--app-bg-2)); width: fit-content; overflow: hidden; } .studio-stat { padding: 14px 24px; border-right: 1px solid var(--line); } .studio-stat:last-child { border-right: 0; } .studio-stat .v { font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -.5px; display: flex; align-items: center; gap: 8px; color: var(--txt); } .studio-stat .l { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 1.4px; margin-top: 3px; } .studio-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .studio-livedot.amber { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb,var(--amber) 18%,transparent); } /* endpoint / agent card */ .studio-endpoint-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; } .studio-endpoint-card { position: relative; background: linear-gradient(180deg,var(--panel),var(--app-bg-2)); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 16px; overflow: hidden; transition: .18s; } .studio-endpoint-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--accent),var(--accent-2)); opacity: .9; } .studio-endpoint-card:hover { transform: translateY(-2px); border-color: var(--line-2); } .studio-endpoint-top { display: flex; align-items: center; gap: 11px; } .studio-endpoint-status { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; color: var(--accent); text-transform: uppercase; } .studio-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); } .studio-chip.async { color: var(--amber); border-color: color-mix(in srgb,var(--amber) 35%,transparent); background: color-mix(in srgb,var(--amber) 8%,transparent); } .studio-chip.sync { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 35%,transparent); background: var(--accent-tint); } .studio-endpoint-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 14px 0 8px; letter-spacing: -.3px; color: var(--txt); } .studio-route { font-family: var(--font-mono); font-size: 12px; color: var(--muted); background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; display: flex; align-items: center; gap: 9px; overflow: auto; } .studio-route .m { color: var(--accent); font-weight: 600; } .studio-route .dim { color: var(--faint); } .studio-tags { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; } .studio-tags .t { font-size: 11px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; } .studio-endpoint-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--faint); } .studio-endpoint-foot a { color: var(--accent); text-decoration: none; } .studio-endpoint-card.create { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border-style: dashed; border-color: var(--line-2); } .studio-endpoint-card.create::before { opacity: 0; } .studio-endpoint-card.create .plus { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-tint); border: 1px solid color-mix(in srgb,var(--accent) 30%,transparent); display: grid; place-items: center; color: var(--accent); font-size: 22px; margin-bottom: 12px; } /* console tiles */ .studio-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .studio-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 20px; } .studio-tile .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 18px; color: var(--accent); margin-bottom: 14px; } .studio-tile .lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; } .studio-tile h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 8px 0 6px; color: var(--txt); } .studio-tile p { color: var(--muted); font-size: 13px; margin: 0; } /* activity log */ .studio-log { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; } .studio-log-row { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; } .studio-log-row:last-child { border-bottom: 0; } .studio-log-row .t { color: var(--faint); width: 84px; } .studio-log-row .s { width: 54px; font-size: 10px; letter-spacing: .8px; } .studio-log-row .s.ok { color: var(--ok); } .studio-log-row .s.err { color: var(--danger); } .studio-log-row .a { color: var(--txt); } .studio-log-row .meta { margin-left: auto; color: var(--faint); } /* Integrate panel */ .studio-integrate { background: linear-gradient(180deg,var(--panel),var(--app-bg-2)); border: 1px solid var(--line); border-radius: 14px; padding: 20px; } .studio-integrate .row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .studio-integrate label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); min-width: 96px; } .studio-codeblock { position: relative; background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--txt); white-space: pre; overflow: auto; } .studio-codeblock .k { color: var(--accent); } .studio-codeblock .s { color: var(--amber); } .studio-copy { position: absolute; top: 10px; right: 10px; background: var(--panel); border: 1px solid var(--line-2); color: var(--muted); font-family: var(--font-mono); font-size: 10px; border-radius: 6px; padding: 4px 9px; cursor: pointer; } @media (max-width:860px) { .studio-endpoint-grid, .studio-tiles { grid-template-columns: 1fr; } .studio-statbar { width: 100%; } } /* ---------- fixes: footer is dark in BOTH themes -> always-light text ---------- */ html[data-theme] .studio-footer-title { color: #eef1f6 !important; } html[data-theme] .studio-footer-inner, html[data-theme] .studio-footer-meta, html[data-theme] .studio-footer-env, html[data-theme] .studio-footer a { color: #aab3c0 !important; } html[data-theme] .studio-topbar-left, html[data-theme] .studio-topbar-left * { color: var(--accent) !important; } /* ---------- fixes: agent reply must not be a white card in dark mode ---------- */ html[data-theme] .studio-chat-message-body, html[data-theme] .studio-chat-message.is-assistant, html[data-theme] .studio-chat-message.is-assistant .studio-chat-message-body { background: transparent !important; border: 0 !important; box-shadow: none !important; } html[data-theme] .studio-chat-pre { background: var(--panel-3) !important; color: var(--txt) !important; border: 1px solid var(--line) !important; border-radius: 12px; } /* ============================================================ DARK-MODE SURFACE FIXES (auto-generated) Re-skins selectors that hardcoded light backgrounds / dark text so they follow the theme instead of rendering white in dark mode. ============================================================ */ html[data-theme] .assistant-card { background: var(--panel) !important; } html[data-theme] .ai-home { background: var(--app-bg-2) !important; } html[data-theme] .studio-designer-card { background: var(--panel) !important; } html[data-theme] .studio-chat-bubble { background: var(--app-bg-2) !important; } html[data-theme] .studio-chat-message.is-assistant .studio-chat-bubble, .studio-chat-message.is-assistant .studio-chat-pre, .studio-chat-rendered-output { background: var(--panel) !important; } html[data-theme] .studio-plan-parameter-row { background: var(--panel) !important; } html[data-theme] .studio-detail-section { background: var(--panel) !important; } html[data-theme] .studio-run-modal .modal-footer { background: var(--panel) !important; } html[data-theme] .studio-step-card { background: var(--panel) !important; } html[data-theme] .studio-parameter-row { background: var(--app-bg-2) !important; } html[data-theme] .studio-parameter-source-workflow { background: color-mix(in srgb, var(--amber) 12%, var(--panel)) !important; } html[data-theme] .studio-run-modal-body { background: var(--app-bg-2) !important; } html[data-theme] .studio-run-section { background: var(--panel) !important; } html[data-theme] .studio-run-input-card { background: var(--app-bg-2) !important; } html[data-theme] .studio-run-input { background: var(--panel) !important; } html[data-theme] .studio-run-summary-card { background: var(--app-bg-2) !important; } html[data-theme] .studio-run-results .run-steps-accordion .accordion-item { background: var(--panel) !important; } html[data-theme] .studio-run-results .run-steps-accordion .accordion-button { background: var(--panel) !important; } html[data-theme] .studio-run-results .run-steps-accordion .accordion-button:not(.collapsed) { background: var(--app-bg-2) !important; } html[data-theme] .studio-run-modal-footer { background: var(--panel) !important; } html[data-theme] .studio-run-modal-footer .studio-btn-ghost { background: var(--panel) !important; } html[data-theme] .studio-run-modal-footer .studio-btn-ghost:hover { background: var(--app-bg-2) !important; } html[data-theme] .studio-assistant-card { background: var(--panel) !important; } html[data-theme] .studio-btn-white { background: var(--panel) !important; } html[data-theme] .studio-empty-state { background: var(--panel) !important; } html[data-theme] .studio-form-card { background: var(--panel) !important; } html[data-theme] .studio-form-input { background: var(--panel) !important; } html[data-theme] .studio-form-input:focus { background: var(--panel) !important; } html[data-theme] .studio-card { background: var(--panel) !important; } html[data-theme] .studio-run-detail-card { background: var(--panel) !important; } html[data-theme] .studio-run-codeblock { background: var(--app-bg-2) !important; } html[data-theme] .studio-run-step-card { background: var(--panel) !important; } html[data-theme] .studio-run-step-time-item { background: var(--app-bg-2) !important; } html[data-theme] .studio-json-tabs .nav-link.active { background: var(--panel) !important; } html[data-theme] .studio-json-tab-content { background: var(--panel) !important; } html[data-theme] .studio-scrollbox { background: var(--panel) !important; } html[data-theme] .studio-json-item-card { background: var(--panel) !important; } html[data-theme] .studio-filter-card, .studio-runs-summary-card, .studio-runs-results-card { background: var(--panel) !important; } html[data-theme] .studio-sort-chip { background: var(--panel) !important; } html[data-theme] .studio-run-time-item { background: var(--app-bg-2) !important; } html[data-theme] .studio-user-pill { background: var(--panel) !important; } html[data-theme] .studio-main-nav .navbar-collapse { background: var(--panel) !important; } /* keep text readable on the now-dark surfaces */ html[data-theme] :is(.studio-brand-subtext) { color: var(--txt) !important; } /* ============================================================ MODERN NAV ============================================================ */ html[data-theme] .studio-main-nav { background: color-mix(in srgb, var(--app-bg) 80%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .studio-nav-inner { display: flex; align-items: center; gap: 26px; width: 100%; padding-top: 12px; padding-bottom: 12px; } html[data-theme] .studio-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } html[data-theme] .studio-brand:hover { text-decoration: none; } .studio-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .studio-nav-links li { list-style: none; } html[data-theme] .studio-nav-link { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 10px; font-family: var(--font-display); font-weight: 500; font-size: 14.5px; letter-spacing: .1px; color: var(--muted); text-decoration: none; transition: background .15s, color .15s; border: 0; } html[data-theme] .studio-nav-link:hover { color: var(--txt); background: var(--panel-2); text-decoration: none; } html[data-theme] .studio-nav-link.active { color: var(--accent); background: var(--accent-tint); } html[data-theme] .studio-nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } html[data-theme] .studio-user-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 10px; padding: 7px 13px; font-size: 13px; } html[data-theme] .studio-signout-btn { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 8px; border-radius: 9px; } html[data-theme] .studio-signout-btn:hover { color: var(--accent); background: var(--panel-2); } /* kill the old bootstrap hamburger box on all sizes (custom nav handles layout) */ .studio-nav-toggle, .navbar-toggler { display: none !important; } @media (max-width:820px) { .studio-nav-inner { flex-wrap: wrap; gap: 12px; } .studio-nav-links { order: 3; width: 100%; overflow-x: auto; } .studio-nav-right { order: 2; } } /* ============================================================ BOOTSTRAP COMPATIBILITY LAYER Bootstrap CSS isn't bundled (404), so pages using Bootstrap classes render unstyled. These rules theme the Bootstrap classes still in use with the studio tokens, so every page inherits the look without a per-page rewrite. Scoped to html[data-theme] so they follow dark/light. ============================================================ */ /* layout helpers */ html[data-theme] .container, html[data-theme] .container-fluid { width: 100%; margin-inline: auto; padding-inline: 0; } html[data-theme] .row { display: flex; flex-wrap: wrap; margin-inline: -12px; } html[data-theme] [class^="col-"], html[data-theme] [class*=" col-"], html[data-theme] .col { padding-inline: 12px; box-sizing: border-box; flex: 1 1 0; } html[data-theme] .col-12 { flex: 0 0 100%; max-width: 100%; } html[data-theme] .col-sm-6, html[data-theme] .col-md-6 { flex: 0 0 50%; max-width: 50%; } html[data-theme] .col-sm-4, html[data-theme] .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; } html[data-theme] .col-sm-8, html[data-theme] .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; } html[data-theme] .col-sm-3, html[data-theme] .col-md-3 { flex: 0 0 25%; max-width: 25%; } html[data-theme] .d-flex { display: flex; } html[data-theme] .d-inline { display: inline; } html[data-theme] .d-none { display: none; } html[data-theme] .gap-2 { gap: .5rem; } html[data-theme] .gap-3 { gap: 1rem; } html[data-theme] .mb-1 { margin-bottom: .25rem; } html[data-theme] .mb-2 { margin-bottom: .5rem; } html[data-theme] .mb-3 { margin-bottom: 1rem; } html[data-theme] .mt-1 { margin-top: .25rem; } html[data-theme] .mt-3 { margin-top: 1rem; } html[data-theme] .mt-4 { margin-top: 1.5rem; } html[data-theme] .text-muted { color: var(--muted) !important; } html[data-theme] .small { font-size: .86em; } /* cards */ html[data-theme] .card { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 14px; color: var(--txt); box-shadow: none; overflow: hidden; } html[data-theme] .card-body { padding: 20px; } html[data-theme] .card-header, html[data-theme] .card-footer { background: var(--app-bg-2) !important; border-color: var(--line) !important; padding: 14px 20px; } html[data-theme] .card-title { color: var(--txt); font-family: var(--font-display); font-weight: 600; } html[data-theme] .card-text { color: var(--muted); } /* alerts */ html[data-theme] .alert { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } html[data-theme] .alert-warning { background: color-mix(in srgb, var(--amber) 12%, var(--panel)); border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--txt); } html[data-theme] .alert-danger { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--txt); } html[data-theme] .alert-success { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--txt); } html[data-theme] .alert-info { background: var(--app-bg-2); border-color: var(--line); color: var(--txt); } /* buttons */ html[data-theme] .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-family: var(--font-display); font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: .15s; } html[data-theme] .btn:hover { text-decoration: none; filter: brightness(1.05); } html[data-theme] .btn-primary { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: var(--accent-ink); } html[data-theme] .btn-secondary { background: var(--panel-2); color: var(--txt); border-color: var(--line-2); } html[data-theme] .btn-danger { background: var(--danger); color: #fff; } html[data-theme] .btn-success { background: var(--accent); color: var(--accent-ink); } html[data-theme] .btn-outline-secondary { background: transparent; color: var(--muted); border-color: var(--line-2); } html[data-theme] .btn-outline-secondary:hover { color: var(--accent); border-color: var(--accent); } html[data-theme] .btn-outline-primary { background: transparent; color: var(--accent); border-color: var(--accent); } html[data-theme] .btn-outline-danger { background: transparent; color: var(--danger); border-color: var(--danger); } html[data-theme] .btn-sm { padding: 6px 12px; font-size: 13px; } html[data-theme] .btn-lg { padding: 12px 22px; font-size: 15px; } /* surfaces / forms */ html[data-theme] .bg-light { background: var(--app-bg-2) !important; color: var(--txt); } html[data-theme] .border { border: 1px solid var(--line) !important; } html[data-theme] .rounded { border-radius: 10px; } html[data-theme] .form-control, html[data-theme] .form-select { background: var(--app-bg-2) !important; border: 1px solid var(--line-2) !important; color: var(--txt) !important; border-radius: 9px; padding: 9px 12px; } html[data-theme] .form-control:focus, html[data-theme] .form-select:focus { border-color: var(--accent) !important; outline: none; box-shadow: 0 0 0 3px var(--accent-tint); } html[data-theme] .form-control::placeholder { color: var(--faint); } html[data-theme] .form-label { color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 6px; } html[data-theme] .form-text { color: var(--faint); font-size: 12px; } html[data-theme] .form-check-input { accent-color: var(--accent); } /* tables */ html[data-theme] .table { width: 100%; border-collapse: collapse; color: var(--txt); } html[data-theme] .table th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: 10px 12px; border-bottom: 1px solid var(--line); } html[data-theme] .table td { padding: 11px 12px; border-bottom: 1px solid var(--line); } /* modals — themed + made to work without the Bootstrap JS bundle */ html[data-theme] .modal { display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,.55); } html[data-theme] .modal.show { display: flex; align-items: center; justify-content: center; padding: 24px; } html[data-theme] .modal-dialog { width: 100%; max-width: 620px; margin: 0; } html[data-theme] .modal-content { background: var(--panel) !important; border: 1px solid var(--line-2) !important; border-radius: 16px; color: var(--txt); box-shadow: var(--shadow); overflow: hidden; } html[data-theme] .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; } html[data-theme] .modal-body { padding: 22px; } html[data-theme] .modal-footer { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; } html[data-theme] .modal-title { color: var(--txt); font-family: var(--font-display); } html[data-theme] .btn-close { background: transparent; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; } html[data-theme] .btn-close::before { content: "\00d7"; }