/* Dark theme — cool steel-blue / charcoal night surface */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090b;
  --bg-elevated: #141416;
  --sidebar: #0f0f11;
  --panel: #18181b;
  --ink: #fafafa;
  --muted: #a1a1aa;
  --line: #27272a;
  --line-subtle: #1c1c1f;

  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --accent-soft: rgba(129, 140, 248, 0.14);
  --accent-deep: #c7d2fe;
  --accent-glow: rgba(129, 140, 248, 0.18);

  --sage: #71717a;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --active: rgba(129, 140, 248, 0.1);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.1);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.1);

  --tool: #1c1c1f;
  --think: #1e1b4b;
  --think-ink: #c7d2fe;
  --tool-ink: #a5b4fc;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-tight: var(--shadow-xs);
  --shadow: var(--shadow-md);

  --glass: rgba(15, 15, 17, 0.88);
  --glass-border: rgba(255, 255, 255, 0.06);
  --surface-raised: #1f1f23;
  --surface-input: #141416;
  --surface-hover: #232326;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -15%, rgba(99, 102, 241, 0.08), transparent),
    radial-gradient(ellipse 50% 35% at 100% 0%, rgba(139, 92, 246, 0.05), transparent);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html[data-theme="dark"] #app-rail {
  background: var(--glass);
  border-color: var(--line);
}

html[data-theme="dark"] .page-chrome {
  background: var(--glass);
  border-color: var(--line-subtle);
}

html[data-theme="dark"] .rail-mobile-toggle {
  background: var(--glass);
  border-color: var(--line);
  color: var(--ink);
}

/* Raised surfaces that were hard-coded white in light mode */
html[data-theme="dark"] .nav-dropdown-panel {
  background-color: var(--surface-raised);
  background-image: none;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .settings-tab,
html[data-theme="dark"] .settings-subtab,
html[data-theme="dark"] .settings-toolbar input,
html[data-theme="dark"] .model-card,
html[data-theme="dark"] .key-card,
html[data-theme="dark"] .category-tab,
html[data-theme="dark"] .category-add,
html[data-theme="dark"] .agent-create-import,
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .agent-chip,
html[data-theme="dark"] .chat,
html[data-theme="dark"] .composer,
html[data-theme="dark"] .composer-shell,
html[data-theme="dark"] .run-queue-dropdown,
html[data-theme="dark"] .studio-tab.active,
html[data-theme="dark"] .memory-category textarea,
html[data-theme="dark"] #playground-search,
html[data-theme="dark"] .agent-editor,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .run-config-dialog,
html[data-theme="dark"] .run-config-field input,
html[data-theme="dark"] .run-config-field select,
html[data-theme="dark"] .run-config-select {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .run-queue-toggle {
  background: var(--surface-raised);
  color: var(--muted);
  border-color: var(--line);
}

html[data-theme="dark"] .run-queue-panel.has-active .run-queue-toggle,
html[data-theme="dark"] .home-actions .run-queue-panel.has-active .run-queue-toggle {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

html[data-theme="dark"] .run-queue-panel.has-active .run-queue-dot {
  background: var(--accent);
}

html[data-theme="dark"] .home-actions .run-queue-toggle:hover {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--panel));
  color: var(--ink);
}

html[data-theme="dark"] .home-actions,
html[data-theme="dark"] .header-actions,
html[data-theme="dark"] .category-tabs {
  background: var(--glass);
  border-color: color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
}

html[data-theme="dark"] .category-tab {
  background: var(--surface-raised);
}

html[data-theme="dark"] .category-tab.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent-deep);
}

html[data-theme="dark"] .category-tab .count {
  background: color-mix(in srgb, var(--sage) 18%, var(--panel));
  color: var(--muted);
}

html[data-theme="dark"] .category-tab.active .count {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
  color: var(--accent-deep);
}

html[data-theme="dark"] .category-tab-actions,
html[data-theme="dark"] .category-tab.active .category-tab-actions {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

html[data-theme="dark"] .category-tab-edit:hover,
html[data-theme="dark"] .agent-create-import,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .home-actions > .icon-button,
html[data-theme="dark"] .home-actions .nav-dropdown-toggle.icon-button {
  background: transparent;
  color: var(--muted);
}

html[data-theme="dark"] .category-tab-edit:hover {
  background: var(--surface-raised);
  color: var(--accent-deep);
}

html[data-theme="dark"] .agent-card,
html[data-theme="dark"] .settings-group,
html[data-theme="dark"] .auth-card {
  background: var(--surface-raised);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] .agent-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--accent-soft));
}

html[data-theme="dark"] .agent-card.active {
  outline-color: var(--accent);
}

html[data-theme="dark"] .agent-avatar {
  background: linear-gradient(145deg, #2a3a55 0%, #1a2740 100%);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

html[data-theme="dark"] .agent-avatar-layer {
  background: #243044;
  box-shadow: 0 0 0 2px var(--surface-raised);
}

html[data-theme="dark"] .agent-avatar-stack .agent-avatar {
  box-shadow:
    0 0 0 2px var(--surface-raised),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

html[data-theme="dark"] .agent-card .name {
  color: var(--ink);
}

html[data-theme="dark"] .agent-card .slug,
html[data-theme="dark"] .agent-card .desc {
  color: var(--muted);
}

html[data-theme="dark"] .agent-kv span,
html[data-theme="dark"] .agent-team {
  background: color-mix(in srgb, #000 28%, var(--panel));
  color: var(--muted);
}

html[data-theme="dark"] .agent-kv strong {
  color: var(--ink);
}

html[data-theme="dark"] .agent-chip {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] .agent-create-card {
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  border-color: color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
}

html[data-theme="dark"] .agent-create-card:hover {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

html[data-theme="dark"] .agent-create-icon {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

html[data-theme="dark"] .agent-create-new {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

html[data-theme="dark"] .agent-create-import {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .agent-card .icon-button {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] .agent-card .icon-button:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

html[data-theme="dark"] .agent-card .icon-button.is-danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  color: var(--danger);
}

html[data-theme="dark"] .session-item:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

html[data-theme="dark"] .session-item.active {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
}

html[data-theme="dark"] .session-row {
  border-bottom-color: transparent;
}

html[data-theme="dark"] .sidebar {
  --sidebar-surface: #141a22;
  background: var(--sidebar-surface);
  border-right-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .sidebar-home:hover,
html[data-theme="dark"] .sidebar-rail-btn:hover,
html[data-theme="dark"] .sidebar-new:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

html[data-theme="dark"] .bubble.user {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--ink);
}

html[data-theme="dark"] .bubble.user.is-injected {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

html[data-theme="dark"] .bubble-copy-btn {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--muted);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .bubble-copy-btn:hover,
html[data-theme="dark"] .bubble-copy-btn:focus-visible,
html[data-theme="dark"] .bubble-copy-btn.is-copied {
  background: var(--surface-raised);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

html[data-theme="dark"] .md pre,
html[data-theme="dark"] .output-code,
html[data-theme="dark"] .skills-editor-preview pre,
html[data-theme="dark"] .remixer-category-tabs {
  background: var(--surface-input);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .md code {
  background: color-mix(in srgb, var(--sage) 16%, var(--panel));
}

html[data-theme="dark"] .composer-shell {
  background: var(--surface-raised);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .composer textarea {
  color: var(--ink);
}

html[data-theme="dark"] .composer-disclaimer {
  color: var(--muted);
}

html[data-theme="dark"] .composer-model-name {
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
}

html[data-theme="dark"] .composer-model-meta {
  color: var(--muted);
}

html[data-theme="dark"] #attach:hover {
  background: var(--accent-soft);
  color: var(--ink);
}

html[data-theme="dark"] .usage-chip {
  background: var(--accent-soft);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .settings-tab.active,
html[data-theme="dark"] .settings-subtab.active,
html[data-theme="dark"] .insights-tab.active,
html[data-theme="dark"] .studio-tab.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  color: var(--accent-deep);
}

html[data-theme="dark"] .price-chip,
html[data-theme="dark"] .cap-chip {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .agent-card .actions .chat-button {
  color: #0a1018;
}

.brand-logo-dark {
  display: none !important;
}

html[data-theme="dark"] .brand-logo-light {
  display: none !important;
}

html[data-theme="dark"] .brand-logo-dark {
  display: block !important;
}

html[data-theme="dark"] .brand-logo {
  filter: none;
}

/* Theme toggle */
.theme-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-deep);
  outline: none;
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

.theme-toggle .theme-icon-sun {
  display: none;
}

.theme-toggle .theme-icon-moon {
  display: block;
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: block;
}

html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: none;
}

/* ── Settings screens (Tools / MCP / Skills / Models / Remixers / Configs) ── */

html[data-theme="dark"] .app-settings {
  color: var(--ink);
}

html[data-theme="dark"] .settings-group,
html[data-theme="dark"] .settings-mcp-layout,
html[data-theme="dark"] .mcp-layout,
html[data-theme="dark"] .mcp-layout.settings-mcp-layout,
html[data-theme="dark"] .mcp-layout.playground-layout {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .mcp-list-pane,
html[data-theme="dark"] .playground-list-pane {
  background: color-mix(in srgb, var(--sidebar) 88%, #000);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .mcp-form-pane,
html[data-theme="dark"] .playground-form-pane {
  background: var(--panel);
  color: var(--ink);
}

html[data-theme="dark"] .mcp-list-pane .section-heading .mcp-sidebar-action,
html[data-theme="dark"] .mcp-choice-row button,
html[data-theme="dark"] .mcp-template-card,
html[data-theme="dark"] .mcp-env-add button,
html[data-theme="dark"] .mcp-oauth-panel,
html[data-theme="dark"] .mcp-endpoint-value,
html[data-theme="dark"] .editor-fields input,
html[data-theme="dark"] .editor-fields textarea,
html[data-theme="dark"] .editor-fields select,
html[data-theme="dark"] .mcp-env-add input,
html[data-theme="dark"] .playground-field input,
html[data-theme="dark"] .playground-field textarea,
html[data-theme="dark"] .playground-field select,
html[data-theme="dark"] .settings-toolbar input,
html[data-theme="dark"] #skills-search,
html[data-theme="dark"] #agent-configs-search,
html[data-theme="dark"] #playground-search {
  background: var(--surface-input);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .editor-fields input::placeholder,
html[data-theme="dark"] .editor-fields textarea::placeholder,
html[data-theme="dark"] .playground-field input::placeholder,
html[data-theme="dark"] .playground-field textarea::placeholder,
html[data-theme="dark"] .settings-toolbar input::placeholder,
html[data-theme="dark"] #playground-search::placeholder {
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

html[data-theme="dark"] .playground-tool-card {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}

html[data-theme="dark"] .playground-tool-card:hover {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: var(--shadow-tight);
}

html[data-theme="dark"] .playground-tool-card.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    var(--shadow-tight);
}

html[data-theme="dark"] .playground-tool-card strong {
  color: var(--ink);
}

html[data-theme="dark"] .playground-tool-card span,
html[data-theme="dark"] .playground-tool-card.is-active span {
  color: var(--muted);
}

html[data-theme="dark"] .playground-head h3,
html[data-theme="dark"] .playground-result-tool,
html[data-theme="dark"] .mcp-server-card .name,
html[data-theme="dark"] .mcp-server-card strong,
html[data-theme="dark"] .mcp-locked,
html[data-theme="dark"] .mcp-connect-card h3 {
  color: var(--ink);
}

html[data-theme="dark"] .playground-type {
  background: color-mix(in srgb, var(--sage) 18%, var(--panel));
  color: var(--muted);
}

html[data-theme="dark"] .playground-status {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .playground-result {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .playground-result.is-error {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
}

html[data-theme="dark"] .playground-result-header,
html[data-theme="dark"] .playground-result-body,
html[data-theme="dark"] .playground-result pre {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .mcp-server-card:hover {
  background: color-mix(in srgb, var(--surface-raised) 80%, transparent);
}

html[data-theme="dark"] .mcp-server-card.active {
  background: var(--active);
}

html[data-theme="dark"] .mcp-status-ready,
html[data-theme="dark"] .mcp-ready,
html[data-theme="dark"] .mcp-oauth-status.is-connected {
  color: var(--accent-deep);
}

html[data-theme="dark"] .mcp-connect-card {
  background: var(--surface-raised);
  border-color: var(--line);
}

html[data-theme="dark"] .mcp-choice-row button.active,
html[data-theme="dark"] .mcp-template-card:hover,
html[data-theme="dark"] .mcp-template-card.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent-deep);
}

html[data-theme="dark"] .mcp-oauth-panel,
html[data-theme="dark"] .mcp-import-preview {
  background: var(--surface-input);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .mcp-oauth-status.is-error {
  color: var(--danger);
}

/* Skills */
html[data-theme="dark"] .skills-group,
html[data-theme="dark"] .skill-card,
html[data-theme="dark"] .skills-editor,
html[data-theme="dark"] .remixer-shell,
html[data-theme="dark"] .remixer-panel,
html[data-theme="dark"] .remixer-card,
html[data-theme="dark"] .remixer-group,
html[data-theme="dark"] .remixer-group-body,
html[data-theme="dark"] .remixer-category-toolbar,
html[data-theme="dark"] .remixer-empty {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .skills-group-head,
html[data-theme="dark"] .remixer-group-head,
html[data-theme="dark"] .remixer-category-tabs,
html[data-theme="dark"] .skills-editor-sidebar,
html[data-theme="dark"] .skills-editor-toolbar {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .skills-group-body {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme="dark"] .skill-card h3,
html[data-theme="dark"] .skills-editor-name,
html[data-theme="dark"] .remixer-group-toggle strong {
  color: var(--ink);
}

html[data-theme="dark"] .skill-card-slug,
html[data-theme="dark"] .skill-card .lede,
html[data-theme="dark"] .skills-group-count,
html[data-theme="dark"] .remixer-category-desc,
html[data-theme="dark"] .remixer-empty,
html[data-theme="dark"] .remixer-empty-inline {
  color: var(--muted);
}

html[data-theme="dark"] .skills-tree-file {
  color: var(--ink);
  background: transparent;
}

html[data-theme="dark"] .skills-tree-file:hover {
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
}

html[data-theme="dark"] .skills-tree-file.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

html[data-theme="dark"] .skills-editor-code,
html[data-theme="dark"] .skills-editor-preview,
html[data-theme="dark"] .skills-editor-preview pre {
  background: var(--surface-input);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .remixer-tab {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

html[data-theme="dark"] .remixer-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-raised) 80%, transparent);
}

html[data-theme="dark"] .remixer-tab.active {
  color: var(--accent-deep);
  background: var(--panel);
  border-bottom-color: var(--accent);
}

html[data-theme="dark"] .remixer-tab-add:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* Models / keys / configs */
html[data-theme="dark"] .model-card,
html[data-theme="dark"] .key-card,
html[data-theme="dark"] .key-status,
html[data-theme="dark"] .settings-group {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .settings-group-head {
  color: var(--ink);
}

html[data-theme="dark"] .model-card h3,
html[data-theme="dark"] .key-card h3 {
  color: var(--ink);
}

html[data-theme="dark"] .model-meta,
html[data-theme="dark"] .key-status.missing {
  color: var(--muted);
}

html[data-theme="dark"] .settings-tab,
html[data-theme="dark"] .settings-subtab {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .settings-tab.active,
html[data-theme="dark"] .settings-subtab.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

html[data-theme="dark"] .text-link,
html[data-theme="dark"] .settings-add,
html[data-theme="dark"] .skills-group-add,
html[data-theme="dark"] .mcp-oauth-link {
  color: var(--accent-deep);
}

html[data-theme="dark"] .ghost-button {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .ghost-button:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .skill-card-actions .primary-button,
html[data-theme="dark"] #save-mcp-server,
html[data-theme="dark"] #save-settings-dialog {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
  color: #0a1018;
  border-color: transparent;
}

/* Studio / agent editor leftovers used from settings flows */
html[data-theme="dark"] .studio-layout,
html[data-theme="dark"] .studio-panel,
html[data-theme="dark"] .studio-side,
html[data-theme="dark"] .studio-tool-group,
html[data-theme="dark"] .agent-editor,
html[data-theme="dark"] .studio-tab {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .studio-panels {
  background: color-mix(in srgb, var(--bg) 60%, var(--panel));
}

html[data-theme="dark"] .studio-panel-header {
  background: var(--panel);
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .studio-section-group {
  background: var(--surface-raised);
  border-color: var(--line);
}

html[data-theme="dark"] .studio-section-group-model {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-soft) 58%, var(--surface-raised)) 0%,
    var(--surface-raised) 100%
  );
}

html[data-theme="dark"] .studio-section-group-model .studio-section-group-head {
  border-bottom-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

html[data-theme="dark"] .studio-model-select {
  background: var(--surface-input);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 45%, transparent);
}

html[data-theme="dark"] .studio-section-group-prompt {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-soft) 50%, var(--surface-raised)) 0%,
    var(--surface-raised) 100%
  );
}

html[data-theme="dark"] .studio-section-group-head {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .studio-section-group-prompt .studio-section-group-head {
  border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}

html[data-theme="dark"] .studio-toggle {
  background: color-mix(in srgb, var(--bg) 50%, var(--surface-raised));
}

html[data-theme="dark"] .studio-toggle:hover {
  background: var(--panel);
}

html[data-theme="dark"] .studio-field input[readonly] {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface-raised));
}

html[data-theme="dark"] .editor-btn-accent {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface-raised));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

html[data-theme="dark"] .editor-btn-accent:hover {
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--accent) 40%);
}

html[data-theme="dark"] .studio-tab:hover {
  background: var(--surface-raised);
}

html[data-theme="dark"] .studio-tab.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

html[data-theme="dark"] .editor-btn-secondary {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .agent-creator-chip {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .agent-creator-ai-live,
html[data-theme="dark"] .agent-creator-ai-stream,
html[data-theme="dark"] .agent-creator-ai-activity {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .editor-btn-primary {
  color: #0a1018;
}

/* Insights */
html[data-theme="dark"] .insights-session,
html[data-theme="dark"] .insights-card,
html[data-theme="dark"] .insights-usage-panel,
html[data-theme="dark"] .insights-usage-table,
html[data-theme="dark"] .insights-usage-agent,
html[data-theme="dark"] .insights-usage-runs .insights-usage-row,
html[data-theme="dark"] .insights-step-content-block {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .insights-card.is-accent {
  background: color-mix(in srgb, var(--think) 70%, var(--panel));
}

html[data-theme="dark"] .insights-range input,
html[data-theme="dark"] .insights-tab,
html[data-theme="dark"] .insights-chip {
  background: var(--surface-input);
  color: var(--ink);
  border-color: var(--line);
  color-scheme: dark;
}

html[data-theme="dark"] .insights-tab.active,
html[data-theme="dark"] .insights-chip.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

html[data-theme="dark"] .insights-usage-agent > summary {
  background: var(--surface-raised);
  color: var(--ink);
}

html[data-theme="dark"] .insights-usage-agent[open] > summary {
  background: var(--accent-soft);
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .insights-usage-runs {
  background: var(--surface-input);
}

html[data-theme="dark"] .insights-usage-row,
html[data-theme="dark"] .insights-usage-metric,
html[data-theme="dark"] .insights-usage-agent strong,
html[data-theme="dark"] .insights-usage-agent span,
html[data-theme="dark"] .insights-usage-agent small {
  color: var(--ink);
}

html[data-theme="dark"] .insights-usage-row.is-head,
html[data-theme="dark"] .insights-usage-row.is-head span,
html[data-theme="dark"] .insights-usage-runs .insights-usage-row.is-head {
  color: var(--muted);
  background: transparent;
}

html[data-theme="dark"] .insights-badge {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

html[data-theme="dark"] .insights-badge.is-running {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
  color: var(--accent-deep);
}

html[data-theme="dark"] .insights-badge.is-failed {
  background: var(--danger-soft);
  color: var(--danger);
}

html[data-theme="dark"] .insights-badge.is-closed {
  background: var(--surface-raised);
  color: var(--muted);
}

html[data-theme="dark"] .insights-step,
html[data-theme="dark"] .insights-step pre,
html[data-theme="dark"] .insights-step-kind {
  color: var(--muted);
  border-color: var(--line);
}

html[data-theme="dark"] .insights-step-content-block {
  background: var(--surface-input);
  color: var(--ink);
}

html[data-theme="dark"] .home-top .brand small,
html[data-theme="dark"] .home-top .brand strong,
html[data-theme="dark"] #settings-title,
html[data-theme="dark"] #settings-subtitle {
  color: var(--ink);
}

html[data-theme="dark"] #settings-subtitle {
  color: var(--muted);
}

/* Soften leftover warm/cream chips inside settings */
html[data-theme="dark"] .cap-chip,
html[data-theme="dark"] .price-chip,
html[data-theme="dark"] .playground-type {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--accent-deep);
}

/* Chat event stream — labels lead, body stays quieter */
html[data-theme="dark"] .tool-block,
html[data-theme="dark"] .think-block {
  color: var(--muted);
}

html[data-theme="dark"] .think-label,
html[data-theme="dark"] .tool-label,
html[data-theme="dark"] .think-block.is-settled .think-label,
html[data-theme="dark"] .tool-block.is-settled .tool-label {
  color: var(--ink);
  font-weight: 650;
}

html[data-theme="dark"] .think-copy,
html[data-theme="dark"] .tool-block .result .pre,
html[data-theme="dark"] .delegate-thinking,
html[data-theme="dark"] .delegate-tool-result,
html[data-theme="dark"] .delegate-text {
  color: #8f9aab;
  border-left-color: color-mix(in srgb, var(--line) 70%, transparent);
}

html[data-theme="dark"] .think-block.is-settled .think-icon {
  color: var(--think-ink);
  background: var(--think);
  opacity: 1;
}

html[data-theme="dark"] .tool-block.is-settled .tool-icon {
  color: var(--tool-ink);
  background: color-mix(in srgb, var(--tool-ink) 18%, var(--panel));
  opacity: 1;
}

html[data-theme="dark"] .think-block.is-settled .trace-icon,
html[data-theme="dark"] .tool-block.is-settled .trace-icon {
  opacity: 1;
}

html[data-theme="dark"] .trace-done {
  color: var(--accent);
  opacity: 0.85;
}

html[data-theme="dark"] .think-block.is-live {
  color: var(--think-ink);
}

html[data-theme="dark"] .tool-block.is-live {
  color: var(--tool-ink);
}

html[data-theme="dark"] .think-block.is-live .think-label {
  background-image: linear-gradient(90deg, var(--think-ink) 0%, #e8eef8 45%, var(--think-ink) 90%);
}

html[data-theme="dark"] .tool-block.is-live .tool-label {
  background-image: linear-gradient(90deg, var(--tool-ink) 0%, #c5daf8 45%, var(--tool-ink) 90%);
}

html[data-theme="dark"] .think-block.is-live .think-copy {
  color: #a8b4c4;
  border-left-color: color-mix(in srgb, var(--think-ink) 40%, var(--line));
}

html[data-theme="dark"] .tool-block.is-live .think-copy,
html[data-theme="dark"] .tool-block.is-live .result .pre {
  color: #a8b4c4;
  border-left-color: color-mix(in srgb, var(--tool-ink) 40%, var(--line));
}

html[data-theme="dark"] .user-input-card header strong {
  color: var(--muted);
}

html[data-theme="dark"] .user-input-question {
  color: var(--ink);
}