:root {
  --ea-surface: #fff7fa;
  --ea-surface-low: #ffeff9;
  --ea-surface-container: #fae9f5;
  --ea-surface-high: #f4e3ef;
  --ea-surface-variant: #efdee9;
  --ea-on-surface: #221921;
  --ea-on-surface-variant: #514250;
  --ea-outline: #837282;
  --ea-outline-variant: #d5c1d2;
  --ea-primary: #7b0091;
  --ea-primary-container: #9a24b0;
  --ea-electric-magenta: #b743cb;
  --ea-on-primary: #ffffff;
  --ea-secondary: #814a88;
  --ea-secondary-soft: #fbb9ff;
  --ea-tertiary: #626200;
  --ea-tertiary-soft: #b0b04e;
  --ea-sulfur-yellow: #b1b128;
  --ea-error: #ba1a1a;
  --ea-error-soft: #ffdad6;

  --ea-running-bg: #dbeafe;
  --ea-running-text: #1e3a8a;
  --ea-pass-bg: #dcfce7;
  --ea-pass-text: #14532d;
  --ea-fail-bg: #fee2e2;
  --ea-fail-text: #7f1d1d;
  --ea-error-bg: #ffedd5;
  --ea-error-text: #7c2d12;
  --ea-pending-bg: #e2e8f0;
  --ea-pending-text: #1e293b;

  --ea-radius-control: 0.5rem;
  --ea-radius-card: 1rem;
  --ea-shadow-1: 0 8px 24px rgba(34, 25, 33, 0.08);
  --ea-shadow-2: 0 16px 34px rgba(34, 25, 33, 0.12);

  --ea-fs-headline-xl: 40px;
  --ea-fs-headline-lg: 32px;
  --ea-fs-headline-md: 24px;
  --ea-fs-headline-sm: 20px;
  --ea-fs-body-lg: 16px;
  --ea-fs-body-md: 14px;
  --ea-fs-body-sm: 12px;
  --ea-lh-headline-xl: 48px;
  --ea-lh-headline-lg: 40px;
  --ea-lh-headline-md: 32px;
  --ea-lh-headline-sm: 28px;
  --ea-lh-body-lg: 24px;
  --ea-lh-body-md: 22px;
  --ea-lh-body-sm: 20px;
}

body {
  background: radial-gradient(circle at 8% 0%, #fff5ff 0%, var(--ea-surface) 48%, #f9eef6 100%) !important;
  color: var(--ea-on-surface) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: var(--ea-fs-body-md);
  line-height: var(--ea-lh-body-md);
}

h1 { font-size: var(--ea-fs-headline-lg); line-height: var(--ea-lh-headline-lg); }
h2 { font-size: var(--ea-fs-headline-md); line-height: var(--ea-lh-headline-md); }
h3 { font-size: var(--ea-fs-headline-sm); line-height: var(--ea-lh-headline-sm); }

h1,
h2,
h3,
.header h1,
.hdr h1,
.hero-inline h2,
.hero-info h2,
.top-domain-inline-title,
.title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ea-on-surface);
}

.header h1,
.hdr h1 {
  font-size: var(--ea-fs-headline-lg) !important;
  line-height: var(--ea-lh-headline-lg) !important;
}

.section-title,
.categories-title,
.filter-group-title,
.filter-type-wrap label,
.field-label,
.modal-label,
.di-lbl {
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
}

label,
.form-group label,
.section-title,
.field-label,
.modal-label,
.di-title,
.di-lbl,
.filter-type-wrap label,
.categories-title,
.filter-group-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
}

.app,
.wrap,
.card,
.form,
.section,
.domain-hero,
.row,
.categories-panel,
.modal-card,
.modal-box,
.guide-ai-box,
.snapshot-auth-card,
.snapshot-intro-card {
  border-color: var(--ea-outline-variant) !important;
  box-shadow: var(--ea-shadow-1) !important;
}

.card,
.form,
.section,
.domain-hero,
.row,
.modal-card,
.modal-box,
.guide-ai-box,
.wrap {
  border-radius: var(--ea-radius-card) !important;
  background: #fff !important;
}

input,
select,
textarea,
.input-row input,
.grid input,
.grid select,
.modal-textarea,
.tm-settings-input,
.tm-settings-select,
.tm-settings-textarea,
.di-val,
.notes-select,
.notes-textarea {
  border-radius: var(--ea-radius-control) !important;
  border-color: var(--ea-outline-variant) !important;
}

input:focus,
select:focus,
textarea:focus,
.input-row input:focus,
.tm-settings-input:focus,
.tm-settings-select:focus,
.tm-settings-textarea:focus,
.di-val:focus,
.di-val:hover,
.notes-select:focus,
.notes-textarea:focus {
  border-color: var(--ea-primary) !important;
  box-shadow: 0 0 0 3px rgba(154, 36, 176, 0.18) !important;
}

.btn,
.btn-sm,
.modal-ai-run-btn,
.tm-ai-btn,
.tm-note-add-btn,
.guide-ai-generate-btn,
.guide-ai-save-btn,
.guide-ai-cancel-btn,
.top-audit-cancel-btn,
.top-logout-btn,
.field-action-btn,
.cl-run-btn,
.cl-info-btn,
.modal-note-add-btn,
.kn-run-btn,
.snapshot-auth-link-btn,
.snapshot-create-btn {
  border-radius: var(--ea-radius-control) !important;
}

.btn-primary,
.modal-ai-run-btn,
.tm-ai-btn,
.tm-note-add-btn,
.guide-ai-generate-btn,
.guide-ai-save-btn,
.btn-ai-gen,
.snapshot-create-btn {
  background: linear-gradient(180deg, var(--ea-primary-container) 0%, var(--ea-primary) 100%) !important;
  border-color: var(--ea-primary) !important;
  color: var(--ea-on-primary) !important;
}

.btn-primary:hover,
.modal-ai-run-btn:hover,
.tm-ai-btn:hover,
.tm-note-add-btn:hover,
.guide-ai-generate-btn:hover,
.guide-ai-save-btn:hover,
.btn-ai-gen:hover,
.snapshot-create-btn:hover {
  filter: brightness(0.95);
}

.btn,
.btn-sm {
  min-height: 40px;
  font-size: var(--ea-fs-body-sm) !important;
  font-weight: 600 !important;
}

.btn-secondary,
.btn-export,
.back,
.field-action-btn,
.cl-run-btn,
.cl-info-btn,
.modal-note-add-btn,
.kn-run-btn,
.btn-detail {
  color: #5e2f66 !important;
  border-color: color-mix(in srgb, var(--ea-secondary) 58%, white) !important;
  background: color-mix(in srgb, var(--ea-secondary) 14%, white) !important;
}

.btn-reset,
.btn-cancel,
.badge-warn,
.cl-deleg,
.st-improve {
  background: #fff7de !important;
  border-color: #dfc56f !important;
  color: #8a6800 !important;
}

.btn-logout,
.btn-remove,
.top-logout-btn,
.top-audit-cancel-btn,
.notes-delete-btn,
.badge-fail,
.st-issue {
  background: #ffe9e9 !important;
  border-color: #efb9b9 !important;
  color: var(--ea-error) !important;
}

.badge-pass,
.st-correct,
.cl-done,
.cl-developed,
.cl-active {
  background: var(--ea-pass-bg) !important;
  color: var(--ea-pass-text) !important;
}

.badge-running,
.verdict-running,
.card-status.running,
.status-running .card-status,
.st-ready,
.cl-doing,
.cl-cat-chip,
.category-item.active,
.tm-nav-item.active {
  background: var(--ea-running-bg) !important;
  color: var(--ea-running-text) !important;
  border-color: #8ac8e9 !important;
}

.badge-pending,
.verdict-pending,
.card-status.pending,
.st-na,
.cl-na {
  background: var(--ea-pending-bg) !important;
  color: var(--ea-pending-text) !important;
}

.badge,
.pill,
.category-count,
.cl-chip,
.cl-st-inline,
.cl-auto-chip,
.modal-note-type,
.snapshot-auth-badge,
.verdict-badge {
  border-radius: 9999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.badge-fail,
.verdict-fail,
.card-status.fail,
.status-fail .card-status,
.status-error .card-status,
.verdict-error,
.badge-warn {
  color: var(--ea-fail-text) !important;
}

.badge-pass,
.st-correct,
.cl-done,
.cl-developed,
.cl-active,
.badge-running,
.verdict-running,
.card-status.running,
.status-running .card-status,
.st-ready,
.cl-doing,
.cl-cat-chip,
.category-item.active,
.tm-nav-item.active,
.badge-pending,
.verdict-pending,
.card-status.pending,
.st-na,
.cl-na,
.badge-fail,
.verdict-fail,
.card-status.fail,
.status-fail .card-status,
.status-error .card-status,
.verdict-error,
.card-status.error {
  border-color: color-mix(in srgb, currentColor 26%, white) !important;
}

.verdict-error,
.card-status.error,
.status-error .card-status {
  background: var(--ea-error-bg) !important;
  color: var(--ea-error-text) !important;
}

.domain-card,
.row,
.cl-cat,
.kn-card,
.modal-note-item,
.snapshot-details-panel,
.snapshot-modal-header,
.snapshot-modal-checks label {
  border-color: var(--ea-outline-variant) !important;
}

.domain-card,
.row,
.cl-cat,
.kn-card {
  background: #fff !important;
}

.domain-card.status-running,
.row,
.tm-nav-item.active,
.progress-step::before,
.cl-bar-fill {
  border-left-color: var(--ea-primary-container) !important;
}

.domain-card.status-pass,
.domain-hero.status-pass {
  border-left-color: #6f9920 !important;
}

.domain-card.status-fail,
.domain-hero.status-fail {
  border-left-color: var(--ea-error) !important;
}

.domain-card.status-error,
.domain-hero.status-error {
  border-left-color: #c26b14 !important;
}

.domain-card.status-pending,
.domain-hero.status-pending {
  border-left-color: #94a3b8 !important;
}

.hint,
.header p,
.hdr p,
.card-meta,
.card-url,
.hero-meta,
.hero-url,
.top-domain-inline-url,
.section-title,
.status-msg,
.intro,
.desc {
  color: var(--ea-on-surface-variant) !important;
}

.di-val {
  background: linear-gradient(180deg, #ffffff 0%, #fff5ff 100%) !important;
  border-color: color-mix(in srgb, var(--ea-outline) 45%, white) !important;
}

.row,
.domain-card,
.kn-card,
.cl-cat,
.card,
.form,
.section,
.modal-card,
.modal-box {
  border-width: 1px !important;
}

.grid input,
.grid select,
.modal-textarea,
.tm-settings-input,
.tm-settings-select,
.tm-settings-textarea,
.input-row input {
  min-height: 40px;
  font-size: var(--ea-fs-body-sm) !important;
  line-height: 20px !important;
}

/* Unified dropdown height across the app */
select,
select.modal-textarea,
.tm-settings-select,
.tm-status-sel,
.kn-st-sel,
.notes-select,
.filter-type-wrap select,
#ai-mode-select,
#filter-type-select,
#create-test-cat-select,
#create-test-auto,
#create-test-priority {
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.tm-header,
.modal-head,
.snapshot-modal-header,
.tm-nav,
.categories-panel {
  background: linear-gradient(180deg, #ffffff 0%, var(--ea-surface-container) 100%) !important;
  border-color: var(--ea-outline-variant) !important;
}

.tm-nav-item,
.category-item,
.cl-cat-hdr {
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.tm-nav-item:hover,
.category-item:hover,
.cl-cat-hdr:hover {
  background: color-mix(in srgb, var(--ea-primary) 8%, white) !important;
  border-color: color-mix(in srgb, var(--ea-primary) 35%, white) !important;
}

.tid,
.card-hostname,
.check-label,
.notes-card-test,
.tm-header-title h2,
.snapshot-intro-title {
  color: var(--ea-on-surface) !important;
  font-weight: 700 !important;
}

.check-detail,
.original,
.notes-card-text,
.modal-help,
.modal-note-text,
.tm-info-text {
  color: var(--ea-on-surface-variant) !important;
}

.row,
.domain-card,
.kn-card,
.tm-panel,
.modal-body,
.snapshot-details-panel {
  font-size: var(--ea-fs-body-sm);
  line-height: var(--ea-lh-body-sm);
}

.di-val.required.empty {
  background: #fff3f3 !important;
  border-color: #efb9b9 !important;
}

.di-val.required-ibe.empty {
  background: #fff9e8 !important;
  border-color: #ecd08d !important;
}

.di-val.di-approved {
  background: linear-gradient(180deg, #f7ffe8 0%, #e8f8c8 100%) !important;
  border-color: #b7d989 !important;
}

.di-val.di-needs-approval {
  background: linear-gradient(180deg, #fff8e6 0%, #ffefc0 100%) !important;
  border-color: #e8cc78 !important;
}

.landing .pill,
.pill {
  border-radius: 9999px !important;
}

.wrap a:hover,
a:hover {
  border-color: color-mix(in srgb, var(--ea-primary) 28%, white) !important;
}

/* Index page polish */
.header {
  margin-bottom: 28px !important;
}

.form {
  padding: 24px !important;
}

.domain-card {
  border-left-width: 5px !important;
}

.card-header {
  padding: 14px 16px !important;
}

.card-hostname {
  font-size: 14px !important;
  line-height: 22px !important;
}

.card-url,
.card-meta {
  font-size: 12px !important;
  line-height: 20px !important;
}

/* Domain page polish */
.top-links {
  margin-bottom: 18px !important;
}

.top-domain-inline-title {
  font-size: 24px !important;
  line-height: 32px !important;
}

.top-domain-inline .verdict-badge,
.verdict-badge {
  font-size: 11px !important;
  line-height: 16px !important;
}

.domain-hero {
  padding: 24px !important;
}

.section {
  padding: 20px !important;
}

.section-hdr-row,
.summary-row,
.detail-summary,
.cl-counts {
  gap: 10px !important;
}

.modal-box,
.guide-ai-box {
  border: 1px solid var(--ea-outline-variant) !important;
}

.modal-head,
.tm-header,
.guide-ai-hdr,
.modal-actions,
.tm-nav {
  border-color: var(--ea-outline-variant) !important;
}

.tm-nav-item {
  border-left-width: 2px !important;
}

/* Snapshot modal parity with detail modal spacing */
#snapshot-modal .snapshot-modal-box {
  width: 96vw !important;
  max-width: 1200px !important;
  height: 92vh !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
}

#snapshot-modal .snapshot-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#snapshot-modal .snapshot-shell-header {
  padding: 14px 20px !important;
}

#snapshot-modal .snapshot-shell-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

#snapshot-modal .snapshot-shell-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px 28px !important;
  display: flex;
  flex-direction: column;
}

#snapshot-modal .snapshot-status-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}

#snapshot-modal .snapshot-status-label {
  color: var(--ea-on-surface-variant) !important;
  font-weight: 600;
}

#snapshot-modal .snapshot-nav-card-title,
#snapshot-modal .snapshot-content-title,
#snapshot-modal .snapshot-modal-header-title {
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
}

#snapshot-modal .snapshot-nav-card-meta,
#snapshot-modal .snapshot-meta-value,
#snapshot-modal .snapshot-source-url,
#snapshot-modal .snapshot-collector-status,
#snapshot-modal .snapshot-content-empty {
  font-size: 12px !important;
  line-height: 20px !important;
}

#snapshot-modal .snapshot-auth-title,
#snapshot-modal .snapshot-section-title,
#snapshot-modal .snapshot-content-section-label,
#snapshot-modal .snapshot-meta-label,
#snapshot-modal .snapshot-collector-title {
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

#snapshot-modal .snapshot-tab-btn,
#snapshot-modal .snapshot-instance-tab,
#snapshot-modal .snapshot-content-chip,
#snapshot-modal .snapshot-content-json-btn,
#snapshot-modal .snapshot-json-btn {
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
}

#snapshot-modal .snapshot-intro-card,
#snapshot-modal .snapshot-auth-card {
  margin-bottom: 12px !important;
  padding: 14px 16px !important;
}

#snapshot-modal .snapshot-shell-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ea-on-surface-variant) !important;
  background: color-mix(in srgb, var(--ea-surface-container) 65%, white) !important;
  border: 1px solid var(--ea-outline-variant) !important;
}

#snapshot-modal .snapshot-modal-actions {
  margin-bottom: 16px !important;
}

#snapshot-modal .snapshot-instance-tabs {
  margin-bottom: 12px !important;
  gap: 10px !important;
}

#snapshot-modal .snapshot-details-panel {
  height: calc(92vh - 385px) !important;
  min-height: 280px !important;
  border-radius: 12px !important;
  background: #fff !important;
}

#snapshot-modal .snapshot-details-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 14px;
}

#snapshot-modal .snapshot-collector-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#snapshot-modal .snapshot-collector-accordion {
  border: 1px solid var(--ea-outline-variant) !important;
  border-radius: 10px !important;
  background: #fff !important;
  overflow: hidden;
}

#snapshot-modal .snapshot-collector-summary {
  padding: 12px 14px !important;
}

#snapshot-modal .snapshot-collector-body {
  padding: 12px 14px 14px !important;
  border-top: 1px solid var(--ea-outline-variant) !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#snapshot-modal .snapshot-partial-card {
  border: 1px solid var(--ea-outline-variant) !important;
  border-radius: 9px !important;
  background: #fff !important;
}

#snapshot-modal .snapshot-partial-summary {
  padding: 10px 12px !important;
}

#snapshot-modal .snapshot-partial-body {
  padding: 10px 12px 12px !important;
  border-top: 1px solid var(--ea-outline-variant) !important;
}

#snapshot-modal .snapshot-partial-preview {
  margin-top: 8px !important;
}

#snapshot-modal .snapshot-partial-actions {
  margin-top: 10px !important;
}

#snapshot-modal .snapshot-content-empty {
  padding: 24px !important;
}

#snapshot-modal .snapshot-nav-col {
  padding: 14px !important;
  gap: 10px !important;
}

#snapshot-modal .snapshot-content-col {
  padding: 14px 16px !important;
}

@media (max-width: 760px) {
  #snapshot-modal .snapshot-shell-content {
    padding: 16px !important;
  }
}

/* Tests page polish */
.categories-panel,
.row,
.modal-card,
.ai-settings-wrap,
.deps,
.ai-gen-block,
.automatability-row {
  border-color: var(--ea-outline-variant) !important;
}

.row {
  border-left-color: var(--ea-primary-container) !important;
}

.row-head {
  margin-bottom: 10px !important;
}

.tid {
  font-size: 14px !important;
  line-height: 22px !important;
}

.grid {
  gap: 12px !important;
}

.field-label {
  color: color-mix(in srgb, var(--ea-on-surface-variant) 80%, black) !important;
}

.pill.changed,
.ai-editable-badge,
.category-item.active .category-count {
  background: color-mix(in srgb, var(--ea-primary) 17%, white) !important;
  border-color: color-mix(in srgb, var(--ea-primary) 50%, white) !important;
  color: color-mix(in srgb, var(--ea-primary) 74%, black) !important;
}

.meta-grid textarea[data-meta-aiprompt] {
  background: color-mix(in srgb, var(--ea-surface-container) 45%, white) !important;
  color: var(--ea-on-surface-variant) !important;
}

.modal-title,
.snapshot-modal-header-title,
.tm-header-title h2 {
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: -0.01em !important;
}

.modal-help,
.intro,
.status-msg,
.original,
.ai-create-note,
.notes-compose-sub,
.snapshot-intro-subtitle,
.snapshot-auth-desc {
  font-size: 12px !important;
  line-height: 20px !important;
}

@media (max-width: 760px) {
  h1,
  .header h1,
  .hdr h1 {
    font-size: 28px !important;
    line-height: 36px !important;
    letter-spacing: -0.02em !important;
  }

  h2,
  .hero-inline h2,
  .hero-info h2,
  .top-domain-inline-title {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .btn,
  .btn-sm,
  .tm-ai-btn,
  .guide-ai-generate-btn,
  .guide-ai-save-btn,
  .snapshot-create-btn {
    min-height: 48px;
  }

  .app,
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .top-domain-inline-title {
    font-size: 20px !important;
    line-height: 28px !important;
    max-width: 60vw !important;
  }

  .grid,
  .meta-grid,
  .meta-grid-secondary,
  .ai-gen-actions {
    grid-template-columns: 1fr !important;
  }

  .categories-panel {
    position: static !important;
  }

  .modal-title,
  .snapshot-modal-header-title,
  .tm-header-title h2 {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .card,
  .form,
  .section,
  .domain-hero,
  .row,
  .modal-card,
  .modal-box,
  .guide-ai-box,
  .wrap {
    border-radius: 1rem !important;
  }
}