:root {
  --see-shell: #e6edf2;
  --see-shell-2: #d8e6ee;
  --see-shell-text: #24323c;
  --see-shell-muted: rgba(36, 50, 60, 0.68);
  --see-shell-border: rgba(36, 50, 60, 0.14);
  --see-shell-active: rgba(36, 50, 60, 0.10);
  --see-shell-card: rgba(255, 255, 255, 0.48);
  --see-shell-control: rgba(255, 255, 255, 0.66);
  --see-control-bg: #ffffff;
  --see-control-text: var(--see-text);
  --see-control-border: var(--see-line);
  --see-soft-soc: #fff2e8;
  --see-soft-env: #edf7ec;
  --see-soft-eco: #edf1ff;
  --see-soft-review: #edf4ff;
  --see-soft-draft: #fff8df;
  --see-soft-danger: #fff0ef;
  --see-ring-track: #dce3e7;
  --see-vivid-glow: 0 0 0 1px transparent;
  --see-vivid-glow-soft: 0 0 0 1px transparent;
}

:root[data-see-theme="dark"] {
  --see-blue-grey-900: #162631;
  --see-blue-grey-800: #203644;
  --see-blue-grey-700: #2d4859;
  --see-blue-grey-100: #587083;
  --see-shell: #17242e;
  --see-shell-2: #20333f;
  --see-shell-text: #ffffff;
  --see-shell-muted: rgba(255, 255, 255, 0.68);
  --see-shell-border: rgba(255, 255, 255, 0.10);
  --see-shell-active: rgba(255, 255, 255, 0.12);
  --see-shell-card: rgba(255, 255, 255, 0.08);
  --see-shell-control: rgba(255, 255, 255, 0.10);
  --see-bg: #101a24;
  --see-surface: #172635;
  --see-surface-alt: #203344;
  --see-control-bg: #223747;
  --see-control-text: #eef6ff;
  --see-control-border: #45647a;
  --see-line: #314a5d;
  --see-text: #eef6ff;
  --see-muted: #9fb3c6;
  --see-soft-soc: rgba(255, 138, 42, 0.16);
  --see-soft-env: rgba(85, 168, 77, 0.16);
  --see-soft-eco: rgba(52, 84, 209, 0.20);
  --see-soft-review: rgba(77, 134, 232, 0.18);
  --see-soft-draft: rgba(255, 202, 58, 0.16);
  --see-soft-danger: rgba(224, 82, 73, 0.18);
  --see-ring-track: #51606a;
  --see-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.22);
  --see-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.32);
}

:root[data-see-contrast="vivid"] {
  --see-shell: #eef0ff;
  --see-shell-2: #dff6ff;
  --see-shell-border: rgba(43, 82, 118, 0.18);
  --see-shell-active: rgba(24, 191, 255, 0.13);
  --see-shell-card: rgba(255, 255, 255, 0.58);
  --see-shell-control: rgba(255, 255, 255, 0.72);
  --see-bg: #f4f1ff;
  --see-surface-alt: #faf7ff;
  --see-soc: #ff9b21;
  --see-env: #20d968;
  --see-eco: #486fff;
  --see-review: #18bfff;
  --see-draft: #ffe052;
  --see-approved: #20d968;
  --see-danger: #ff4965;
  --see-soft-soc: #fff0dd;
  --see-soft-env: #e8fff0;
  --see-soft-eco: #edf1ff;
  --see-soft-review: #e9f8ff;
  --see-soft-draft: #fff8d3;
  --see-soft-danger: #ffe8ee;
  --see-vivid-glow: 0 0 0 1px rgba(24, 191, 255, 0.26), 0 0 14px rgba(24, 191, 255, 0.20);
  --see-vivid-glow-soft: 0 0 0 1px rgba(24, 191, 255, 0.18), 0 0 10px rgba(24, 191, 255, 0.14);
}

:root[data-see-theme="dark"][data-see-contrast="vivid"] {
  --see-blue-grey-900: #050b2f;
  --see-blue-grey-800: #0e1843;
  --see-blue-grey-700: #20275f;
  --see-blue-grey-100: #51588a;
  --see-shell: #050b2f;
  --see-shell-2: #0e1843;
  --see-shell-text: #ffffff;
  --see-shell-muted: rgba(255, 255, 255, 0.72);
  --see-shell-border: rgba(255, 255, 255, 0.12);
  --see-shell-active: rgba(54, 217, 255, 0.14);
  --see-shell-card: rgba(255, 255, 255, 0.08);
  --see-shell-control: rgba(255, 255, 255, 0.10);
  --see-bg: #0b1024;
  --see-surface: #141b34;
  --see-surface-alt: #1d2744;
  --see-control-bg: #1f2a46;
  --see-control-text: #f7f9ff;
  --see-control-border: #425178;
  --see-line: #344161;
  --see-text: #f7f9ff;
  --see-muted: #b4c1e3;
  --see-soc: #ffad33;
  --see-env: #39ff7e;
  --see-eco: #77a0ff;
  --see-review: #36d9ff;
  --see-draft: #ffe76d;
  --see-approved: #39ff7e;
  --see-danger: #ff5e78;
  --see-soft-soc: rgba(255, 173, 51, 0.18);
  --see-soft-env: rgba(57, 255, 126, 0.16);
  --see-soft-eco: rgba(119, 160, 255, 0.20);
  --see-soft-review: rgba(54, 217, 255, 0.17);
  --see-soft-draft: rgba(255, 231, 109, 0.18);
  --see-soft-danger: rgba(255, 94, 120, 0.18);
  --see-ring-track: #56606f;
  --see-vivid-glow: 0 0 0 1px rgba(54, 217, 255, 0.35), 0 0 18px rgba(54, 217, 255, 0.22);
  --see-vivid-glow-soft: 0 0 0 1px rgba(54, 217, 255, 0.24), 0 0 12px rgba(54, 217, 255, 0.16);
}

body {
  color-scheme: light;
}

:root[data-see-theme="dark"] body {
  color-scheme: dark;
}

:root[data-see-theme="dark"] :where(input, select, textarea) {
  color: var(--see-control-text);
  background-color: var(--see-control-bg);
  border-color: var(--see-control-border);
}

:root[data-see-theme="dark"] :where(option) {
  color: var(--see-control-text);
  background-color: var(--see-control-bg);
}

:root[data-see-theme="dark"] input::placeholder,
:root[data-see-theme="dark"] textarea::placeholder {
  color: color-mix(in srgb, var(--see-muted) 78%, transparent);
}

:root[data-see-contrast="vivid"] :where(input, select, textarea) {
  accent-color: var(--see-review);
}

:root[data-see-contrast="vivid"] :where(input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--see-review) 72%, transparent);
  outline-offset: 2px;
}

.see-appearance-controls {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--see-line);
  margin-bottom: 6px;
}

.see-appearance-label {
  color: var(--see-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.see-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--see-line);
  border-radius: 8px;
  background: var(--see-surface-alt);
}

.see-segmented button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  color: var(--see-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.see-segmented button.is-active {
  color: var(--see-shell-text);
  background: var(--see-shell);
}

:root[data-see-contrast="vivid"] .see-segmented button.is-active {
  background: var(--see-review);
  box-shadow: var(--see-vivid-glow-soft);
}

:root[data-see-theme="dark"] .see-shell-main {
  background:
    linear-gradient(180deg, rgba(48, 167, 255, 0.08), transparent 190px),
    var(--see-bg);
}

:root[data-see-theme="dark"] .see-user-menu,
:root[data-see-theme="dark"] .see-logout-card {
  background: var(--see-surface);
  border-color: var(--see-line);
}

:root[data-see-theme="dark"] .see-user-menu-link:hover {
  background: var(--see-surface-alt);
}

:root[data-see-contrast="vivid"] :where(
  .see-sidebar-nav button.is-active,
  .see-sidebar-nav button:hover,
  .see-primary-btn,
  .see-intelligence-primary,
  .see-intelligence-header button,
  .see-intelligence-pinned-note button,
  .see-intelligence-empty button,
  .risk-refresh-button,
  .wb-tool-btn,
  .wb-cloud-confirm-actions [data-wb-cloud-confirm="push"],
  .wb-cloud-upload-card > button
) {
  box-shadow: var(--see-vivid-glow);
}

:root[data-see-contrast="vivid"] :where(
  .wb-status-pill,
  .wb-follow-pill,
  .wb-iro-marker,
  .wb-cloud-upload-snackbar,
  .wb-cloud-snackbar-icon,
  .see-pill,
  .see-attention-status,
  .see-attention-chip,
  .see-exec-signal-pill,
  .risk-marker,
  .risk-tile-marker,
  .risk-bottomline-badge,
  .risk-module-status
) {
  box-shadow: var(--see-vivid-glow-soft);
}

:root[data-see-contrast="vivid"] :where(
  .wb-iro-marker,
  .risk-marker,
  .risk-tile-marker,
  .legend-marker
) {
  border: 1px solid color-mix(in srgb, #ffffff 38%, transparent);
  color: #ffffff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--see-danger) 86%, #ffffff), color-mix(in srgb, var(--see-danger) 88%, #7a0015));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--see-danger) 42%, transparent),
    0 0 12px color-mix(in srgb, var(--see-danger) 38%, transparent);
}