/* Approved ink/petrol glass system. Loaded last on application pages. */
:root {
  color-scheme: light;
  --color-bg: #f5f7fa;
  --color-surface: #fff;
  --color-surface-2: #edf2f6;
  --color-surface-raised: #e9f0f3;
  --color-surface-selected: #fff0e3;
  --color-line: #cdd8e1;
  --color-line-strong: #8596a6;
  --color-text: #202b38;
  --color-text-muted: #53677a;
  --color-text-subtle: #63768a;
  --color-accent: #ff7a1a;
  --color-accent-soft: #a44909;
  --color-accent-ink: #241507;
  --color-success: #18774f;
  --color-danger: #a12c43;
  --color-danger-bg: #fff0f3;
  --color-danger-line: #d69aa8;
  --color-warning: #775411;
  --color-warning-bg: #fff7e5;
  --radius: 14px;
  --radius-lg: 22px;
  --ink: var(--color-text);
  --paper: var(--color-bg);
  --surface: var(--color-surface);
  --muted: var(--color-text-muted);
  --line: var(--color-line);
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0b0e14;
  --color-surface: #141a23;
  --color-surface-2: #1a222d;
  --color-surface-raised: #172832;
  --color-surface-selected: #31241c;
  --color-line: #30404d;
  --color-line-strong: #697e91;
  --color-text: #f1f4f7;
  --color-text-muted: #a3afbd;
  --color-text-subtle: #94a5b6;
  --color-accent: #ff7a1a;
  --color-accent-soft: #ffb078;
  --color-accent-ink: #241507;
  --color-success: #79d5b4;
  --color-danger: #f3beca;
  --color-danger-bg: #2b1922;
  --color-danger-line: #694151;
  --color-warning: #e3cf9c;
  --color-warning-bg: #2a2414;
}
html,
body {
  background: var(--color-bg);
  color: var(--color-text);
}
body {
  isolation: isolate;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 88% 0%, #b7d8dc90, transparent 50%),
    radial-gradient(ellipse at 3% 55%, #c1d3e36a, transparent 47%);
}
[data-theme="dark"] body:before {
  background:
    radial-gradient(ellipse at 86% 0%, #24555d52, transparent 48%),
    radial-gradient(ellipse at 5% 56%, #26445430, transparent 48%);
}
.topbar,
.admin-top,
.workspace-header {
  background: #ffffffe0;
  border-color: #ffffffd9;
  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 28px #34566a0b;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.sidebar {
  background: #ffffff85;
  border-color: var(--color-line);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.scan-card,
.progress-panel,
.results-panel,
.settings-panel,
.flow-pane,
.tester-pane,
.quality-panel,
.agent-panel,
.connection-card,
.admin-card,
.auth-card,
.glass-card,
.project-row,
.approval-bar,
.subscription {
  background: linear-gradient(130deg, #ffffffe0, #ffffff9c 65%);
  border: 1px solid #ffffffed;
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 30px #34546b09,
    0 0 0 1px #24435508;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-theme="dark"] :is(.topbar, .admin-top, .workspace-header) {
  background: linear-gradient(120deg, #ffffff09, #ffffff02), #101820a6;
  border-color: #b5d4df25;
  box-shadow:
    inset 0 1px 0 #e5f7ff14,
    0 10px 32px #0002;
}
[data-theme="dark"] .sidebar {
  background: #101820b8;
}
[data-theme="dark"]
  :is(
    .scan-card,
    .progress-panel,
    .results-panel,
    .settings-panel,
    .flow-pane,
    .tester-pane,
    .quality-panel,
    .agent-panel,
    .connection-card,
    .admin-card,
    .auth-card,
    .glass-card,
    .project-row,
    .approval-bar,
    .subscription
  ) {
  background: linear-gradient(130deg, #d7edff0a, #ffffff02 60%), #111b25a8;
  border-color: #afcedb26;
  box-shadow:
    inset 0 1px 0 #d8efff12,
    0 12px 32px #00000016;
}
.theme-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 21px;
  cursor: pointer;
  flex-shrink: 0;
}
.auth-card > .theme-toggle {
  float: inline-end;
}
.primary-button,
.agent-panel .primary-button {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: 1px solid #ef7926;
  border-radius: 100px;
  box-shadow: 0 6px 18px #e9771915;
}
.primary-button:hover {
  background: #ffa45f;
  color: #241507;
}
.secondary-button,
.text-button,
.icon-button {
  color: var(--color-text);
  border-color: var(--color-line-strong);
  border-radius: 12px;
}
:is(
  input,
  textarea,
  select,
  .profile-input,
  .context-editor,
  .settings-grid input:not([type="checkbox"]),
  .settings-grid textarea,
  .settings-grid select,
  .chat-form input,
  #auth-form input,
  #owner-setup-form input,
  .editor-row input
) {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-line-strong);
  border-radius: 12px;
}
input::placeholder,
textarea::placeholder {
  color: var(--color-text-subtle);
}
option {
  background: var(--color-surface);
  color: var(--color-text);
}
.brand-img {
  filter: none;
}
.brand-image-box {
  background: transparent;
}
.workspace-label,
.account-label,
.nav-caption,
.eyebrow,
.field-label,
.section-kicker,
.page-footer,
.nav-number,
.source-refs,
.source-card small,
.profile-group h3,
.service-card label,
.connection-card p,
.admin-card p,
.auth-footnote,
.wizard-heading p,
.session-note,
.integration-status,
.stat-label {
  color: var(--color-text-muted);
}
.step-nav,
.step-nav small,
.topbar,
.topbar-right,
.result-tabs button,
.tab-panel,
.profile-input,
.settings-panel,
.source-card,
.service-card,
.chat-message,
.chat-messages,
.flow-node,
.graph-node,
.graph-node button,
.graph-node small,
.node-detail,
.voice-card,
.voice-label,
.tool-option,
.history-heading,
.project-info,
.project-info strong,
.project-status,
.context-toolbar,
.connection-card,
.opener,
.auth-card h2,
.auth-card label,
.auth-description {
  color: var(--color-text);
}
.step-nav.active,
.step-nav:hover,
.wizard-page.selected,
.result-tabs button[aria-selected="true"] {
  color: var(--color-accent-soft);
  background: var(--color-surface-selected);
  border-color: #e3a778;
}
.service-card,
.source-card,
.voice-card,
.tool-option,
.review-notice,
.agent-summary,
.missing-box,
.url-field,
.check-case,
.operation-row,
.admin-note,
.node-detail,
.flow-node,
.graph-node,
.agent-link,
.graph-canvas,
.chat-message,
.chat-message.assistant,
.chat-message.user {
  background: var(--color-surface);
  border-color: var(--color-line);
  color: var(--color-text);
}
.review-notice p,
.agent-panel p,
.agent-link,
.source-card a,
.source-refs a,
.add-field,
.section-kicker {
  color: var(--color-accent-soft);
}
.warning-note,
.missing-box {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.auth-story {
  background: transparent;
  color: var(--color-text);
}
.auth-story h1 {
  color: var(--color-text);
}
.auth-story h1 em {
  color: var(--color-accent-soft);
}
.auth-story p,
.auth-footer,
.auth-pills {
  color: var(--color-text-muted);
}
.tech-auth-symbol {
  opacity: 0.12;
}
.auth-screen {
  background: transparent;
}
.topbar {
  gap: 12px;
  flex-wrap: wrap;
  height: auto;
  min-height: 64px;
  padding-block: 10px;
}
.topbar-right {
  flex-wrap: wrap;
}
.wizard-heading {
  padding: 22px !important;
  margin-bottom: 18px !important;
}
.wizard-heading #wizard-title {
  font-size: 28px !important;
}
.wizard-track i.current,
.wizard-track i.visited,
.connection-dot.ready {
  background: var(--color-accent);
}
.shell-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
}
.shell-links a {
  color: var(--color-text);
  text-decoration: none;
}
.shell-links a:hover {
  color: var(--color-accent-soft);
}
.readiness-card {
  padding: 20px;
  margin-block: 18px;
}
.readiness-card h3 {
  font-size: 18px;
  margin: 0 0 10px;
}
.readiness-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.readiness-grid span {
  border: 1px solid var(--color-line);
  border-radius: 100px;
  padding: 6px 12px;
  font-size: 13px;
}
.readiness-card p {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 12px 0 0;
}
.preview-intro {
  padding: 14px 18px;
  background: var(--color-surface-2);
  border-radius: 12px;
  margin-top: 14px;
}
dialog {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-line);
  border-radius: 22px;
}
dialog::backdrop {
  background: #07101b80;
  backdrop-filter: blur(5px);
}
:focus-visible {
  outline: 3px solid var(--color-accent-soft) !important;
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .topbar {
    padding-inline: 16px;
  }
  .sidebar {
    backdrop-filter: none;
  }
  .wizard-heading #wizard-title {
    font-size: 24px !important;
  }
  .shell-links {
    gap: 10px;
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-card,
  .topbar,
  .sidebar,
  .auth-card,
  .connection-card,
  .admin-card,
  .settings-panel,
  .flow-pane,
  .tester-pane {
    background: var(--color-surface);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Legacy wizard controls share the same readable surface tokens. */
#wizard-heading h1,
.intro h1,
.results-heading h2,
.portal-heading h2,
.settings-panel h2,
.quality-panel h3,
.admin-shell h1,
.admin-card h2,
.connections-intro h1 {
  color: var(--color-text);
}
.wizard-page {
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.wizard-eyebrow > span,
.review-badge {
  color: var(--color-accent-soft);
  border-color: var(--color-line);
  background: var(--color-surface);
}
.step-nav.active small,
.step-nav.completed small,
.step-nav small {
  color: var(--color-text-muted);
}
.wizard-footer {
  background: var(--color-surface);
  box-shadow: 0 -8px 25px #142b3b08;
}
.agent-role-description,
.agent-tools,
.agent-tool-admin,
.tool-connection-grid select,
.settings-grid .agent-tool-option,
.tool-behavior-card,
.voice-options,
.quality-case blockquote,
.graph-node,
.flow-pane .node-details {
  background: var(--color-surface);
  border-color: var(--color-line);
  color: var(--color-text);
}
.agent-role-description :is(p, small),
.agent-tools > p,
.agent-tool-admin p,
.agent-tool-option small,
.settings-grid label,
.settings-grid label span,
.voice-help,
.voice-card small,
.source-refs,
.profile-group .group-num {
  color: var(--color-text-muted);
}
.agent-tools legend,
.agent-tool-admin summary,
.quality-case summary,
.graph-node strong,
.graph-node span,
.graph-node small {
  color: var(--color-text);
}
.settings-confirmations,
.voice-catalog,
.tool-behaviors,
.voice-chooser {
  border-color: var(--color-line);
  color: var(--color-text);
}
.brand-image-box {
  display: flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
  gap: 0;
  max-width: 100%;
}
.brand-image-box .brand-img {
  display: none;
}
.brand-image-box:before {
  content: "O2";
  font-size: 29px;
  font-weight: 850;
  color: #ff8a36;
  letter-spacing: -1px;
}
.brand-image-box:after {
  content: "Matix";
  font-size: 29px;
  font-weight: 850;
  color: var(--color-text);
  letter-spacing: -1px;
}
[data-theme="light"] .workspace-label,
[data-theme="light"] .workspace-name,
[data-theme="light"] .auth-card :is(h2, label),
[data-theme="light"] .auth-card p {
  color: var(--color-text);
}

.flow-toolbar{background:var(--color-surface-2);color:var(--color-text);border-color:var(--color-line)}
.flow-toolbar :is(span,small){color:var(--color-text-muted)}
.graph-edge-label{fill:var(--color-text-muted)}
#graph-canvas svg path{stroke:#537f8b}
[data-theme=dark] #graph-canvas svg path{stroke:#88aebb}
.settings-confirmations,.auth-switch{background:var(--color-surface-2);color:var(--color-text)}
.auth-switch button{color:var(--color-text-muted)}
.auth-switch .selected{background:var(--color-surface);color:var(--color-text)}

.flow-toolbar button{color:var(--color-text);border-color:var(--color-line-strong)}