@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.18);
  --shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.28);
}

:root,
:root[data-theme="dark"] {
  --color-bg: #071326;
  --color-bg-2: #091a33;
  --color-surface: #11203d;
  --color-surface-2: #0d1a34;
  --color-surface-alt: #0b1730;
  --color-text: #eef4ff;
  --color-muted: #94a8cf;
  --color-muted-2: #6f83a9;
  --color-border: rgba(96, 126, 184, 0.28);
  --color-border-soft: rgba(96, 126, 184, 0.18);

  --color-primary: #2f6bff;
  --color-primary-2: #1f57e3;
  --color-secondary: #627bff;
  --color-accent: #13e6c2;
  --color-cyan: #12c2e9;
  --color-pink: #f44db0;
  --color-gold: #f0ab24;
  --color-amber: #f2b14f;
  --color-success: #26c281;
  --color-danger: #ff4b5f;

  --color-danger-bg: rgba(255, 75, 95, 0.12);
  --color-danger-line: rgba(255, 75, 95, 0.3);
  --color-danger-text: #ffd8dd;

  --color-success-bg: rgba(26, 180, 118, 0.14);
  --color-success-line: rgba(26, 180, 118, 0.34);
  --color-success-text: #b9f2dc;

  --color-warning-bg: rgba(240, 171, 36, 0.1);
  --color-warning-line: rgba(240, 171, 36, 0.3);
  --color-warning-text: #ffe2ad;

  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-surface-elevated: rgba(17, 32, 61, 0.98);
  --color-surface-elevated-2: rgba(12, 24, 46, 0.98);
  --color-surface-ghost: rgba(10, 22, 43, 0.82);
  --color-input-bg: rgba(11, 23, 48, 0.92);
  --color-input-border-strong: rgba(96, 126, 184, 0.35);
  --color-focus-ring: rgba(95, 176, 255, 0.24);
  --color-table-row: rgba(255, 255, 255, 0.03);
  --color-table-row-alt: rgba(255, 255, 255, 0.015);
  --color-chart-line: #6b83ff;
  --color-chart-dot: #eef4ff;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --color-bg: #f2f7fd;
  --color-bg-2: #eaf2fb;
  --color-surface: #ffffff;
  --color-surface-2: #f8fbff;
  --color-surface-alt: #f4f8ff;
  --color-text: #0f233d;
  --color-muted: #4e6079;
  --color-muted-2: #6f8098;
  --color-border: #d7e3f2;
  --color-border-soft: #e7eef7;

  --color-primary: #0d66d0;
  --color-primary-2: #0a4da0;
  --color-secondary: #2c5fff;
  --color-accent: #00a58f;
  --color-cyan: #1a9bcf;
  --color-pink: #c43d94;
  --color-gold: #d18e24;
  --color-amber: #d38f33;
  --color-success: #0f684d;
  --color-danger: #c8324a;

  --color-danger-bg: #fff0f2;
  --color-danger-line: #f3c4cc;
  --color-danger-text: #8f1d2f;

  --color-success-bg: #e9fbf5;
  --color-success-line: #bee9d8;
  --color-success-text: #0f684d;

  --color-warning-bg: #fff6e7;
  --color-warning-line: #f0d09d;
  --color-warning-text: #7d5a19;

  --color-overlay: rgba(15, 35, 61, 0.24);
  --color-surface-elevated: rgba(255, 255, 255, 0.98);
  --color-surface-elevated-2: rgba(248, 251, 255, 0.98);
  --color-surface-ghost: rgba(255, 255, 255, 0.86);
  --color-input-bg: #ffffff;
  --color-input-border-strong: #b8cbe2;
  --color-focus-ring: rgba(13, 102, 208, 0.16);
  --color-table-row: rgba(15, 35, 61, 0.03);
  --color-table-row-alt: rgba(15, 35, 61, 0.015);
  --color-chart-line: #2c5fff;
  --color-chart-dot: #ffffff;

  --shadow-soft: 0 12px 28px rgba(15, 35, 61, 0.12);
  --shadow-strong: 0 18px 42px rgba(15, 35, 61, 0.08);

  color-scheme: light;
}

:root {
  --ui-space-1: var(--space-1);
  --ui-space-2: var(--space-2);
  --ui-space-3: var(--space-3);
  --ui-space-4: var(--space-4);
  --ui-space-5: var(--space-5);
  --ui-space-6: var(--space-6);

  --ui-radius-sm: var(--radius-sm);
  --ui-radius-md: var(--radius-md);
  --ui-radius-lg: var(--radius-lg);

  --ui-text-main: var(--color-text);
  --ui-text-muted: var(--color-muted);
  --ui-line: var(--color-border);
  --ui-line-soft: var(--color-border-soft);
  --ui-primary: var(--color-primary);
  --ui-primary-2: var(--color-primary-2);
  --ui-secondary: var(--color-secondary);

  --ui-error-bg: var(--color-danger-bg);
  --ui-error-line: var(--color-danger-line);
  --ui-error-text: var(--color-danger-text);
  --ui-success-bg: var(--color-success-bg);
  --ui-success-line: var(--color-success-line);
  --ui-success-text: var(--color-success-text);
  --ui-warning-bg: var(--color-warning-bg);
  --ui-warning-line: var(--color-warning-line);
  --ui-warning-text: var(--color-warning-text);
  --ui-overlay: var(--color-overlay);
  --ui-surface-elevated: var(--color-surface-elevated);
  --ui-surface-elevated-2: var(--color-surface-elevated-2);
  --ui-surface-ghost: var(--color-surface-ghost);
  --ui-input-bg: var(--color-input-bg);
  --ui-input-line: var(--color-input-border-strong);
  --ui-focus-ring: var(--color-focus-ring);
  --ui-table-row: var(--color-table-row);
  --ui-table-row-alt: var(--color-table-row-alt);
  --ui-chart-line: var(--color-chart-line);
  --ui-chart-dot: var(--color-chart-dot);
  --ui-bg-glow: color-mix(in srgb, var(--ui-primary) 18%, transparent);
  --ui-bg-gradient-start: var(--color-bg);
  --ui-bg-gradient-end: var(--color-bg-2);

  --bg: var(--color-bg);
  --bg1: var(--color-bg);
  --bg2: var(--color-bg-2);
  --bg-soft: var(--color-bg-2);
  --panel: var(--color-surface);
  --panel-2: var(--color-surface-2);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --card: color-mix(in srgb, var(--color-surface) 92%, transparent);
  --line: var(--color-border);
  --line-2: var(--color-border-soft);
  --stroke: var(--color-border-soft);
  --stroke-strong: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --muted-2: var(--color-muted-2);
  --blue: var(--color-primary);
  --blue-2: var(--color-primary-2);
  --blue2: var(--color-secondary);
  --cyan: var(--color-cyan);
  --accent: var(--color-accent);
  --pink: var(--color-pink);
  --green: var(--color-success);
  --gold: var(--color-gold);
  --amber: var(--color-amber);
  --red: var(--color-danger);
  --green-bg: color-mix(in srgb, var(--color-success) 24%, transparent);
  --green-line: color-mix(in srgb, var(--color-success) 42%, transparent);

  --danger-bg: var(--color-danger-bg);
  --danger-line: var(--color-danger-line);
  --danger-text: var(--color-danger-text);
  --ok-bg: var(--color-success-bg);
  --ok-line: var(--color-success-line);
  --ok-text: var(--color-success-text);

  --shadow: var(--shadow-strong);
  --radius-xl: var(--radius-lg);
  --radius-md: var(--radius-sm);
  --radius: var(--radius-md);
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

html,
body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
  line-height: 1.45;
  color: var(--ui-text-main);
}

h1,
h2,
h3,
.section-title,
.step2-top-title,
.product-title,
.hero h1,
.title h1,
.entry-title,
.scenario-title {
  font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.container {
  padding-top: 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 26px;
}

.brand {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.title {
  min-width: 0;
}

.title h1 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.04;
}

.title p {
  margin: 10px 0 0;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.topbar,
.section-head,
.hero,
.header {
  margin-bottom: var(--ui-space-4);
}

.section-title,
.step2-top-title,
.title h1,
.hero h1,
.entry-title {
  margin: 0;
  font-weight: 800;
}

.section-subtitle,
.step2-top-subtitle,
.title p,
.hero p,
.entry-subtitle,
.revenue-hint,
.supplier-note {
  color: var(--ui-text-muted) !important;
  line-height: 1.5;
}

.panel,
.card,
.summary-box,
.overview-box,
.field-card,
.config-card,
.sub-card,
.product-card,
.supplier-form-card,
.chart-card,
.trend-card-shell,
.analysis-prompt-box,
.analysis-report,
.input-box,
.results-card,
.entry-card,
.scenario-box {
  border-radius: var(--ui-radius-md) !important;
  border-color: var(--ui-line) !important;
  box-shadow: var(--shadow-soft);
}

.section,
.big-panel,
.overview,
.summary,
.table-panel,
.panel,
.results-card,
.surface {
  padding: var(--ui-space-4) !important;
}

.action-row,
.footer-actions,
.supplier-modal-actions,
.step2-toolbar-actions {
  gap: var(--ui-space-2) !important;
}

.section + .section,
.panel + .panel,
.card + .card,
.insight-card + .insight-card {
  margin-top: var(--ui-space-4) !important;
}

.section-label,
.meta-label,
.detail-label,
.field-box label,
.field-card label,
.config-card label,
.sub-card label {
  color: var(--ui-text-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.ui-code,
.item-sub,
.supplier-card-context {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.01em;
}

.ui-number,
.meta-value,
.result-value,
.result-chip strong,
.supplier-exec-chip strong,
.progress-meta strong {
  font-variant-numeric: tabular-nums;
}

.primary-btn,
.continue-btn,
.btn,
.back,
.search-btn {
  border-radius: var(--ui-radius-sm) !important;
  font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, var(--ui-primary), var(--ui-primary-2)) !important;
}

.primary-btn:hover,
.continue-btn:hover,
.btn:hover,
.search-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.primary-btn:disabled,
.continue-btn:disabled,
.btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

.secondary-btn,
.ghost-btn,
.pill-btn,
.tab-btn,
.icon-btn,
.mode-button {
  border-radius: var(--ui-radius-sm) !important;
}

.secondary-btn,
.ghost-btn,
.pill-btn,
.tab-btn,
.mode-button {
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-text-main) !important;
  background: color-mix(in srgb, var(--color-surface-alt) 72%, transparent) !important;
}

.secondary-btn:hover,
.ghost-btn:hover,
.pill-btn:hover,
.tab-btn:hover,
.mode-button:hover,
.icon-btn:hover {
  border-color: color-mix(in srgb, var(--ui-primary) 55%, transparent) !important;
}

.mode-button.active,
.pill-btn.active,
.tab-btn.active {
  background: linear-gradient(180deg, var(--ui-primary), var(--ui-primary-2)) !important;
  color: #fff !important;
}

.sub-card input:not([type="file"]),
#modalCodigoInput,
#modalCnaeInput {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

:root[data-theme="light"] .has-step1-sticky-action .footer-actions {
  border-color: rgba(120, 150, 195, 0.38) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.96)) !important;
  box-shadow: 0 18px 45px rgba(28, 56, 96, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

:root[data-theme="light"] .continue-feedback {
  color: #51647f !important;
}

:root[data-theme="light"] .continue-feedback.is-blocked,
:root[data-theme="light"] .continue-feedback.has-participation-error {
  border-color: rgba(176, 95, 0, 0.24) !important;
  background: rgba(255, 176, 111, 0.17) !important;
  color: #8a4b00 !important;
}

:root[data-theme="light"] .continue-feedback.is-ready {
  color: #0f766e !important;
}

:root[data-theme="light"] .smart-loader-title {
  color: var(--ui-text-main) !important;
}

:root[data-theme="light"] .smart-loader-copy,
:root[data-theme="light"] .smart-loader-status {
  color: #4f627d !important;
}

:root[data-theme="light"] .smart-loader-status.is-delayed {
  color: #8a4b00 !important;
}

:root[data-theme="light"] .smart-loader-ring {
  background:
    radial-gradient(circle, #ffffff 0 49%, transparent 50%),
    conic-gradient(from 90deg, #8ee8d8, #4da1ff, rgba(77, 161, 255, 0.22), #8ee8d8) !important;
  box-shadow: 0 0 0 1px rgba(0, 165, 143, 0.18), 0 14px 34px rgba(77, 161, 255, 0.16) !important;
}

:root[data-theme="light"] .smart-step {
  border-color: #d5e2f1 !important;
  background: #ffffff !important;
  color: #4f627d !important;
}

:root[data-theme="light"] .smart-step span {
  color: #6f8098 !important;
}

:root[data-theme="light"] .smart-step.is-active {
  border-color: rgba(47, 107, 255, 0.42) !important;
  background: #eaf1ff !important;
  color: #173764 !important;
}

:root[data-theme="light"] .smart-step.is-done {
  border-color: #95d8bb !important;
  background: #e9fbf3 !important;
  color: #0f684d !important;
}

:root[data-theme="light"] .smart-step.is-active span,
:root[data-theme="light"] .smart-step.is-done span {
  color: #526986 !important;
}

:root[data-theme="light"] .smart-preview-card {
  border-color: #d5e2f1 !important;
  background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

:root[data-theme="light"] .smart-preview-label {
  color: #4f627d !important;
}

:root[data-theme="light"] .smart-preview-value {
  color: #132c4a !important;
}

:root[data-theme="light"] .smart-preview-card.is-pending .smart-preview-value,
:root[data-theme="light"] .smart-preview-note {
  color: #6f8098 !important;
}

:root[data-theme="light"] .step-transition-overlay {
  background: linear-gradient(180deg, rgba(242, 247, 253, 0.82), rgba(232, 240, 251, 0.76)) !important;
}

:root[data-theme="light"] .step-transition-card {
  border-color: #cbdcf1 !important;
  background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
  box-shadow: 0 24px 70px rgba(28, 56, 96, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

:root[data-theme="light"] .step-transition-loader::before {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px #cbdcf1 !important;
}

:root[data-theme="light"] .step-transition-eyebrow {
  color: #0f684d !important;
}

:root[data-theme="light"] .step-transition-title {
  color: #132c4a !important;
}

:root[data-theme="light"] .step-transition-copy,
:root[data-theme="light"] .step-transition-status {
  color: #4f627d !important;
}

:root[data-theme="light"] .step-transition-step {
  border-color: #d5e2f1 !important;
  background: #ffffff !important;
  color: #29486d !important;
}

:root[data-theme="light"] .step-transition-step.is-current {
  border-color: rgba(47, 107, 255, 0.42) !important;
  background: #eaf1ff !important;
  color: #173764 !important;
}

:root[data-theme="light"] .step-transition-dot {
  border-color: #95d8bb !important;
  color: #0f684d !important;
  background: #c9f3e8 !important;
}

:root[data-theme="light"] .step-transition-step.is-current .step-transition-dot {
  color: #ffffff !important;
  background: linear-gradient(180deg, var(--ui-primary), var(--ui-primary-2)) !important;
}

:root[data-theme="light"] .step-transition-connector {
  background: #cbdcf1 !important;
}

.theme-toggle {
  touch-action: manipulation;
}

.badge,
.status-badge,
.sector-tag,
.legend-pill,
.chip {
  border-radius: 999px !important;
}

.status-badge,
.legend-pill,
.chip,
.result-chip {
  font-size: 12px !important;
  font-weight: 700;
}

table {
  border-collapse: collapse;
}

thead th {
  color: var(--ui-text-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

tbody td {
  border-bottom: 1px solid var(--ui-line-soft) !important;
}

.error,
.step1-error,
.error-message {
  background: var(--ui-error-bg) !important;
  border: 1px solid var(--ui-error-line) !important;
  color: var(--ui-error-text) !important;
  border-radius: var(--ui-radius-sm) !important;
}

.state-message,
.state-empty,
.state-success,
.state-loading,
.state-error {
  border-radius: var(--ui-radius-sm) !important;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.state-error {
  background: var(--ui-error-bg);
  border: 1px solid var(--ui-error-line);
  color: var(--ui-error-text);
}

.state-empty,
.regime-empty,
.empty-insight {
  border-radius: var(--ui-radius-sm) !important;
  border: 1px dashed var(--ui-line) !important;
  color: var(--ui-text-muted) !important;
}

.state-success {
  background: var(--ui-success-bg) !important;
  border: 1px solid var(--ui-success-line) !important;
  color: var(--ui-success-text) !important;
  border-radius: var(--ui-radius-sm) !important;
}

.state-loading {
  border: 1px dashed color-mix(in srgb, var(--ui-primary) 64%, transparent);
  background: color-mix(in srgb, var(--ui-primary) 14%, transparent);
}

.state-loading::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--ui-text-main) 24%, transparent);
  border-top-color: color-mix(in srgb, var(--ui-primary) 70%, white);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -1px;
  animation: ui-spin 0.8s linear infinite;
}

.table-panel,
.tabs-panel,
.analysis-report,
.chart-area {
  overflow-x: auto;
}

table {
  min-width: 720px;
}

.empty-insight,
.state-empty {
  padding: 14px 16px !important;
}

input,
select,
textarea,
.small-input,
.revenue-input,
.cnpj-input {
  min-height: 42px;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 88%, transparent);
  opacity: 0.9;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ui-primary) 75%, white);
  outline-offset: 2px;
}

button,
.icon-btn,
.primary-btn,
.secondary-btn,
.ghost-btn,
.tab-btn,
.mode-button,
.search-btn,
.continue-btn,
.back,
a {
  transition-property: background-color, border-color, color, box-shadow, filter, transform, opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

html,
body {
  background:
    radial-gradient(circle at top, var(--ui-bg-glow), transparent 30%),
    linear-gradient(180deg, var(--ui-bg-gradient-start), var(--ui-bg-gradient-end)) !important;
  color: var(--ui-text-main) !important;
}

.icon-btn,
.theme-toggle {
  background: var(--ui-surface-ghost) !important;
  color: var(--ui-text-muted) !important;
  border-color: var(--ui-line) !important;
}

.panel,
.big-panel,
.overview-box,
.summary-box,
.meta-box,
.input-box,
.results-card,
.entry-card,
.table-panel,
.tabs-panel,
.mini-panel,
.trend-card-shell,
.analysis-report,
.analysis-prompt-box,
.supplier-form-card,
.chart-card,
.mini-card,
.field-card,
.sub-card,
.surface {
  background: linear-gradient(180deg, var(--ui-surface-elevated), var(--ui-surface-elevated-2)) !important;
  border-color: var(--ui-line) !important;
}

.card.current,
.card.future,
.delta-box {
  border: 1px solid var(--ui-line) !important;
}

.card.current {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ui-surface-elevated) 96%, var(--ui-primary) 8%),
    var(--ui-surface-elevated-2)
  ) !important;
}

.card.future,
.delta-box {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ui-secondary) 80%, var(--ui-surface-elevated)),
    color-mix(in srgb, var(--ui-primary) 70%, var(--ui-surface-elevated-2))
  ) !important;
}

.title h1,
.hero h1,
.header h1,
.step2-top-title,
.section-title,
.entry-title,
.panel-title {
  color: var(--ui-text-main) !important;
}

.title p,
.header p,
.sub,
.entry-subtitle,
.step2-top-subtitle,
.analysis-sub,
.card-title,
.card-subline,
.row .name,
.trend-title,
.analysis-line,
.analysis-line strong,
.bar-label,
.legend-item {
  color: var(--ui-text-muted) !important;
}

input,
select,
textarea,
.small-input,
.revenue-input,
.cnpj-input {
  background: var(--ui-input-bg) !important;
  border: 1px solid var(--ui-input-line) !important;
  color: var(--ui-text-main) !important;
}

input:focus,
select:focus,
textarea:focus,
.small-input:focus,
.revenue-input:focus,
.cnpj-input:focus {
  border-color: color-mix(in srgb, var(--ui-primary) 65%, var(--ui-line)) !important;
  box-shadow: 0 0 0 3px var(--ui-focus-ring) !important;
}

:root[data-theme="light"] .code-type-switch {
  background: #eef5ff !important;
  border-color: #c7d8ec !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

:root[data-theme="light"] .code-type-btn {
  background: transparent !important;
  color: #526986 !important;
  border-color: transparent !important;
}

:root[data-theme="light"] .code-type-btn:hover {
  background: #e3eefb !important;
  color: #1f5da5 !important;
}

:root[data-theme="light"] .code-type-btn.active {
  background: linear-gradient(180deg, #2c7be5, #1765c2) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 5px 14px rgba(23,101,194,0.22);
}

tbody tr:nth-child(odd) td {
  background: var(--ui-table-row);
}

tbody tr:nth-child(even) td {
  background: var(--ui-table-row-alt);
}

.trend-line,
.spark-line {
  stroke: var(--ui-chart-line) !important;
}

.trend-dot,
.spark-point {
  fill: var(--ui-chart-dot) !important;
  stroke: var(--ui-chart-line) !important;
}

.impact-warning,
.warning-inline {
  background: var(--ui-warning-bg) !important;
  border: 1px solid var(--ui-warning-line) !important;
  color: var(--ui-warning-text) !important;
}

.status-ok {
  color: var(--ui-success-text) !important;
}

.status-warn {
  color: var(--ui-warning-text) !important;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--ui-overlay);
}

.modal-card {
  width: 100%;
  max-width: 520px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid var(--ui-line);
  box-shadow: var(--shadow-strong);
  background: linear-gradient(180deg, var(--ui-surface-elevated), var(--ui-surface-elevated-2));
}

.modal-kicker {
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ui-primary);
}

.modal-title {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 800;
  color: var(--ui-text-main);
}

.modal-copy {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-text-muted);
}

.flow-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.flow-stepper-item {
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.flow-stepper-item::before {
  content: attr(data-step);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.flow-stepper-item.is-done {
  color: var(--ok-text);
  border-color: var(--ok-line);
  background: var(--ok-bg);
}

.flow-stepper-item.is-done::before {
  content: "✓";
  border-color: var(--ok-line);
}

.flow-stepper-item.is-current {
  color: var(--text);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-2));
}

.partial-preview {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  overflow: hidden;
}

.partial-preview.is-hidden {
  display: none;
}

.partial-preview-head {
  padding: 16px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.partial-preview-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}

.partial-preview-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.partial-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px;
}

.partial-preview-card {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
}

.partial-preview.is-loading .partial-preview-card {
  position: relative;
}

.partial-preview.is-loading.has-preview .partial-preview-card strong,
.partial-preview.is-loading.has-preview .partial-preview-card > span {
  opacity: 0.65;
}

.partial-preview.is-loading:not(.has-preview) .partial-preview-card strong,
.partial-preview.is-loading:not(.has-preview) .partial-preview-card > span {
  width: min(190px, 72%);
  color: transparent;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--muted) 14%, transparent),
      color-mix(in srgb, var(--muted) 30%, transparent),
      color-mix(in srgb, var(--muted) 14%, transparent)
    );
  background-size: 220% 100%;
  animation: partial-preview-skeleton 1.1s ease-in-out infinite;
}

.partial-preview.is-loading:not(.has-preview) .partial-preview-card strong {
  height: 34px;
}

.partial-preview.is-loading:not(.has-preview) .partial-preview-card > span {
  width: min(170px, 64%);
  height: 21px;
}

@keyframes partial-preview-skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .partial-preview.is-loading:not(.has-preview) .partial-preview-card strong,
  .partial-preview.is-loading:not(.has-preview) .partial-preview-card > span {
    animation: none;
  }
}

.partial-preview-card.current {
  background: #eaf2ff;
  border-color: #d9e5f7;
}

.partial-preview-card.current strong,
.partial-preview-card.current span {
  color: #2f6bcb;
}

.partial-preview-card.future {
  background: #eaf8f1;
  border-color: #d6eadd;
}

.partial-preview-card.future strong,
.partial-preview-card.future span {
  color: #2f8b5f;
}

.partial-preview-card.diff {
  background: #fff8e8;
  border-color: #f2e2bb;
}

.partial-preview-card.diff strong,
.partial-preview-card.diff span {
  color: #d4881c;
}

.partial-preview-btn {
  min-width: 220px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, var(--blue), var(--blue-2));
  color: #fff;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 3px;
  box-shadow: 0 10px 22px rgba(13, 102, 208, 0.22);
}

.partial-preview-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

.partial-preview-btn-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.partial-preview-btn-subtitle {
  font-size: 12px;
  opacity: 0.9;
}

.partial-preview-status {
  min-height: 20px;
  margin: 4px 16px 0;
  color: var(--muted);
  font-size: 13px;
}

.partial-preview-card h4 {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.partial-preview-card strong {
  display: block;
  margin-top: 8px;
  font-size: 34px;
  line-height: 1;
}

.partial-preview-card span {
  display: block;
  margin-top: 6px;
  font-size: 21px;
  font-weight: 700;
}

.partial-preview-note {
  margin: 0 16px 16px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
}

:root[data-theme="light"] .export-menu {
  border-color: #cbdcf1 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(28, 56, 96, 0.16) !important;
}

:root[data-theme="light"] .export-menu-label {
  color: #4f627d !important;
}

:root[data-theme="light"] .export-option {
  border-color: #d5e2f1 !important;
  background: #f7fbff !important;
  color: #132c4a !important;
}

:root[data-theme="light"] .export-option span {
  color: #5a6f8a !important;
}

:root[data-theme="light"] .export-option:hover {
  border-color: #9eb9dc !important;
  background: #edf5ff !important;
}

:root[data-theme="light"] .export-status-hint {
  border-color: #e9cc9b !important;
  background: #fff6e9 !important;
  color: #7d5a19 !important;
}

:root[data-theme="light"] .loading-toast {
  border-color: #cbdcf1 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 16px 34px rgba(28, 56, 96, 0.18) !important;
  color: #132c4a !important;
}

:root[data-theme="light"] .loading-toast .loading-spinner {
  border-color: rgba(19, 44, 74, 0.2) !important;
  border-top-color: var(--ui-primary) !important;
}

:root[data-theme="light"] .supplier-empty-state {
  border-color: #cbdcf1 !important;
  background:
    radial-gradient(circle at top right, rgba(47, 107, 255, 0.09), transparent 34%),
    linear-gradient(180deg, #ffffff, #f7fbff) !important;
}

:root[data-theme="light"] .supplier-empty-state h3,
:root[data-theme="light"] .supplier-solo-card h3,
:root[data-theme="light"] .supplier-mini-card h3,
:root[data-theme="light"] .supplier-solo-name,
:root[data-theme="light"] .supplier-mini-name,
:root[data-theme="light"] .supplier-rank-main strong,
:root[data-theme="light"] .supplier-metric strong,
:root[data-theme="light"] .supplier-mini-stat strong {
  color: #132c4a !important;
}

:root[data-theme="light"] .supplier-empty-state p,
:root[data-theme="light"] .supplier-solo-card p,
:root[data-theme="light"] .supplier-mini-card p,
:root[data-theme="light"] .supplier-rank-main span,
:root[data-theme="light"] .supplier-rank-metrics span,
:root[data-theme="light"] .supplier-ranking-heading {
  color: #4f627d !important;
}

:root[data-theme="light"] .supplier-empty-icon {
  color: #315da8 !important;
  background: #eaf1ff !important;
  border-color: #b8cdea !important;
}

:root[data-theme="light"] .supplier-highlight,
:root[data-theme="light"] .supplier-solo-card,
:root[data-theme="light"] .supplier-mini-card,
:root[data-theme="light"] .supplier-rank-row,
:root[data-theme="light"] .supplier-metric,
:root[data-theme="light"] .supplier-mini-stat,
:root[data-theme="light"] .supplier-diagnosis,
:root[data-theme="light"] .empty-insight {
  border-color: #d5e2f1 !important;
  background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
  color: #2c4261 !important;
}

:root[data-theme="light"] .supplier-rank-row.top {
  border-color: #b8cdea !important;
  background: #eaf1ff !important;
}

:root[data-theme="light"] .supplier-rank-pos,
:root[data-theme="light"] .supplier-card-pos {
  background: #eaf1ff !important;
  border-color: #b8cdea !important;
  color: #173764 !important;
}

:root[data-theme="light"] .supplier-risk-badge {
  color: #315da8 !important;
  background: #edf3ff !important;
  border-color: #bfd2ea !important;
}

:root[data-theme="light"] .supplier-risk-badge.hot,
:root[data-theme="light"] .supplier-priority-label {
  color: #0f684d !important;
  background: #e9fbf3 !important;
  border-color: #95d8bb !important;
}

@media (max-width: 820px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .brand {
    width: 100%;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .flow-stepper {
    grid-template-columns: 1fr 1fr;
  }

  .partial-preview-grid {
    grid-template-columns: 1fr;
  }

  .partial-preview-head {
    flex-direction: column;
    align-items: stretch;
  }

  .partial-preview-btn {
    min-width: 100%;
  }
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 18px;
}

.legend-swatch.direct {
  background: linear-gradient(180deg, var(--blue2), var(--blue));
}

.legend-swatch.r1 {
  background: linear-gradient(180deg, var(--pink), color-mix(in srgb, var(--pink) 72%, black));
}

.legend-swatch.r2 {
  background: linear-gradient(180deg, var(--cyan), color-mix(in srgb, var(--cyan) 72%, black));
}

.legend-swatch.fin {
  background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 72%, black));
}

.delta-label {
  color: color-mix(in srgb, var(--ui-text-main) 72%, transparent) !important;
}

.mini-card-warning {
  border-color: color-mix(in srgb, var(--ui-warning-line) 90%, transparent) !important;
  background: color-mix(in srgb, var(--ui-warning-bg) 88%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 960px) {
  .hero-actions,
  .action-row,
  .supplier-modal-actions,
  .footer-actions {
    width: 100%;
  }

  .hero-actions .primary-btn,
  .hero-actions .secondary-btn,
  .hero-actions .ghost-btn,
  .hero-actions .continue-btn,
  .action-row .primary-btn,
  .action-row .secondary-btn,
  .action-row .ghost-btn,
  .action-row .continue-btn {
    width: 100%;
    justify-content: center;
  }
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .container {
    padding-top: 18px;
  }

  .section,
  .big-panel,
  .overview,
  .summary,
  .table-panel,
  .panel,
  .results-card,
  .surface {
    padding: var(--ui-space-3) !important;
  }
}