:root {
  --bg: #f4f6f8;
  --text: #17202a;
  --muted: #667085;
  --line: #d8dee6;
  --panel: #ffffff;
  --accent: #0f766e;
  --accent-dark: #0b5f59;
  --header: #16212f;
  --link: #0b63b6;
  --input-bg: #ffffff;
  --input-border: #c7d0dc;
  --label: #344054;
  --table-head-bg: #e9eef5;
  --table-head-text: #243447;
  --disabled: #98a2b3;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1720;
  --text: #e6edf3;
  --muted: #9aa8b6;
  --line: #2b3948;
  --panel: #151f2b;
  --accent: #2dd4bf;
  --accent-dark: #14b8a6;
  --header: #0a111b;
  --link: #7cc7ff;
  --input-bg: #101822;
  --input-border: #344557;
  --label: #c9d4df;
  --table-head-bg: #1b2836;
  --table-head-text: #d7e2ed;
  --disabled: #526274;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

button, .button {
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  font-weight: 700;
}

button:hover, .button:hover { background: var(--accent-dark); text-decoration: none; }
button:disabled {
  background: var(--disabled);
  cursor: not-allowed;
}
.button.secondary { background: #1f6feb; }
.button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }

.topbar {
  background: var(--header);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 24px;
}

.brand { color: #fff; font-size: 18px; font-weight: 700; }
.topnav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: flex-end; }
.topnav a { color: #d9e7ff; }
.topnav form { margin: 0; }
.topnav button { min-height: 32px; background: #334155; }
.topnav .theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
}

.theme-toggle {
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
}
.theme-toggle:hover { background: #475569; }
.theme-toggle-icon {
  display: inline-flex;
  font-size: 13px;
  line-height: 1;
  width: 14px;
}
.login-theme-action {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.theme-toggle-panel {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.theme-toggle-panel:hover {
  background: var(--table-head-bg);
  color: var(--text);
}

.page { padding: 22px 24px 36px; }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 24px; margin-bottom: 4px; }
h2 { font-size: 18px; margin-bottom: 14px; }
h3 { font-size: 15px; margin: 18px 0 10px; }
.toolbar p, .detail-head p { color: var(--muted); margin-bottom: 0; }
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.enrichment-panel {
  align-items: end;
  background: var(--panel);
  border: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 250px;
  margin-bottom: 16px;
  padding: 16px;
}

.enrichment-panel h2 { margin-bottom: 10px; }
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stats span {
  background: #eef4ff;
  border: 1px solid #d6e4ff;
  border-radius: 6px;
  color: #243447;
  padding: 7px 9px;
}
.stats strong { color: #0b63b6; }
.enrichment-shortcuts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.api-keys-status {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.api-provider {
  display: grid;
  gap: 6px;
}
.api-provider strong {
  color: #344054;
  font-size: 13px;
}
.api-key-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.api-key-pill {
  background: #f2f4f7;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #344054;
  font-size: 12px;
  padding: 5px 7px;
}
.api-key-pill.running {
  background: #ecfdf3;
  border-color: #75e0a7;
  color: #067647;
  font-weight: 700;
}
.api-key-pill.failed {
  background: #fff4f3;
  border-color: #fecdca;
  color: #b42318;
  font-weight: 700;
}
.api-key-pill.missing {
  background: #fff8e6;
  border-color: #ffd98a;
  color: #8a5a00;
}
.notice {
  border-radius: 6px;
  margin: 12px 0 0;
  padding: 9px 10px;
}
.notice.success {
  background: #ecfdf3;
  border: 1px solid #abefc6;
  color: #067647;
}
.notice.warning {
  background: #fff8e6;
  border: 1px solid #ffd98a;
  color: #8a5a00;
}
.job-progress {
  background: #f6fef9;
  border: 1px solid #75e0a7;
  border-radius: 6px;
  margin-top: 12px;
  padding: 12px;
}
.job-progress.paused {
  background: #fff8e6;
  border-color: #ffd98a;
}
.job-progress.failed,
.job-progress.stopped {
  background: #fff4f3;
  border-color: #fecdca;
}
.job-progress-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 9px;
}
.job-progress-head span {
  color: #067647;
  font-weight: 700;
}
.job-progress-head a {
  font-size: 12px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}
.stop-job-button {
  background: #b42318;
  min-height: 30px;
  padding: 0 10px;
}
.stop-job-button:hover { background: #912018; }
.job-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.job-counters span {
  background: #ffffff;
  border: 1px solid #abefc6;
  border-radius: 6px;
  color: #344054;
  padding: 6px 8px;
}
.job-counters strong { color: #067647; }
.google-search-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.google-search-status span {
  background: #eef4ff;
  border: 1px solid #d6e4ff;
  border-radius: 6px;
  color: #344054;
  padding: 6px 8px;
}
.google-search-status strong { color: #0b63b6; }
.google-provider-badge {
  font-weight: 700;
}
.google-provider-badge.apify {
  background: #fff8e6;
  border-color: #ffd98a;
  color: #8a5a00;
}
.google-provider-badge.serpapi {
  background: #ecfdf3;
  border-color: #75e0a7;
  color: #067647;
}
.google-provider-badge.scrapingbee {
  background: #eaf5ff;
  border-color: #84caff;
  color: #175cd3;
}
.google-provider-badge.tavily {
  background: #f4f3ff;
  border-color: #bdb4fe;
  color: #5925dc;
}
.google-search-message {
  color: var(--muted);
  font-size: 13px;
  margin: -2px 0 10px;
}
.progress-track {
  background: #d1fadf;
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}
.progress-bar {
  background: #12b76a;
  border-radius: 999px;
  height: 100%;
  min-width: 2%;
  transition: width 280ms ease;
}
.progress-text {
  color: #067647;
  font-size: 13px;
  margin: 8px 0 0;
}
.job-progress.paused .job-progress-head span,
.job-progress.paused .progress-text,
.job-progress.paused .job-counters strong {
  color: #8a5a00;
}
.job-progress.paused .progress-track { background: #ffe7b3; }
.job-progress.paused .progress-bar { background: #f79009; }
.job-progress.paused .job-counters span { border-color: #ffd98a; }
.job-progress.failed .job-progress-head span,
.job-progress.failed .progress-text,
.job-progress.failed .job-counters strong,
.job-progress.stopped .job-progress-head span,
.job-progress.stopped .progress-text,
.job-progress.stopped .job-counters strong {
  color: #b42318;
}
.job-progress.failed .progress-track,
.job-progress.stopped .progress-track { background: #fee4e2; }
.job-progress.failed .progress-bar,
.job-progress.stopped .progress-bar { background: #f04438; }
.job-progress.failed .job-counters span,
.job-progress.stopped .job-counters span { border-color: #fecdca; }
.enrichment-form {
  display: grid;
  gap: 10px;
}
.api-settings-form {
  display: grid;
  gap: 16px;
}
.settings-section {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 16px;
}
.settings-section-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.settings-section-head h2 { margin: 0; }
.settings-section-head span {
  color: var(--muted);
  font-size: 13px;
}
.add-api-key {
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  min-height: 34px;
  padding: 0;
  width: 38px;
}
.api-settings-grid {
  display: grid;
  gap: 10px;
}
.api-empty-state {
  border: 1px dashed var(--line);
  border-radius: 6px;
  margin: 0;
  padding: 12px;
}
.api-settings-row {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, calc(50% - 10px)) minmax(0, calc(40% - 10px)) minmax(0, 10%);
}
.api-key-actions {
  align-items: center;
  display: grid;
  gap: 6px;
  justify-items: stretch;
  min-height: 58px;
}
.api-key-actions .api-key-pill {
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  width: 100%;
}
.remove-key {
  align-items: center;
  justify-content: center;
  display: flex;
  gap: 6px;
  font-size: 11px;
  min-height: 0;
  white-space: nowrap;
}
.remove-key input {
  min-height: 0;
  width: auto;
}
.remove-new-key {
  background: #667085;
  min-height: 36px;
}
.remove-new-key:hover { background: #475467; }
.settings-actions {
  display: flex;
  justify-content: flex-end;
}

.filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) 110px minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 14px;
  margin-bottom: 16px;
}

label {
  color: var(--label);
  display: grid;
  gap: 6px;
  font-weight: 700;
}

input, select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--text);
  min-height: 36px;
  padding: 0 10px;
  width: 100%;
}
input::placeholder { color: var(--muted); }

.filter-actions { display: flex; gap: 8px; }

.table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  min-width: 1320px;
  width: 100%;
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px 9px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-size: 12px;
  text-transform: uppercase;
}
.sort-links {
  display: inline-flex;
  gap: 4px;
  margin-left: 4px;
}
.sort-links a {
  color: var(--link);
  font-size: 14px;
  line-height: 1;
}
.sort-links a.active {
  color: #0f766e;
  font-weight: 700;
}

td.wide { max-width: 270px; }
.status {
  background: #e8f5f3;
  color: #0f766e;
  border-radius: 999px;
  display: inline-block;
  padding: 3px 8px;
  white-space: nowrap;
}
.status.muted { background: #eef1f5; color: var(--muted); }
.empty { color: var(--muted); text-align: center; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.pagination a, .pagination span, .pagination strong {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
}
.pagination span { color: #98a2b3; }

.detail-head { margin-bottom: 20px; }
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  width: 100%;
}
.detail-grid > div {
  background: var(--panel);
  border: 1px solid var(--line);
  min-width: 0;
  overflow: hidden;
  padding: 18px;
}

dl {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 10px 14px;
  margin: 0;
}
dt { color: var(--muted); font-weight: 700; }
dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre {
  background: #101828;
  color: #eef4ff;
  max-height: 360px;
  max-width: 100%;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.login-page {
  background: var(--table-head-bg);
  min-height: 100vh;
}
.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}
.login-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  max-width: 420px;
  padding: 28px;
  width: 100%;
}
.login-panel p { color: var(--muted); }
.login-form { display: grid; gap: 14px; }
.login-form button { width: 100%; }
.alert {
  background: #fff2f0;
  border: 1px solid #ffccc7;
  color: #a8071a;
  margin-bottom: 14px;
  padding: 10px 12px;
}

[data-theme="dark"] .button.secondary { background: #2563eb; }
[data-theme="dark"] .button.secondary:hover { background: #1d4ed8; }
[data-theme="dark"] .button.ghost { color: #5eead4; }
[data-theme="dark"] .stats span {
  background: #16243a;
  border-color: #264466;
  color: #d7e2ed;
}
[data-theme="dark"] .stats strong,
[data-theme="dark"] .sort-links a.active {
  color: #5eead4;
}
[data-theme="dark"] .api-provider strong,
[data-theme="dark"] .api-key-pill,
[data-theme="dark"] .job-counters span {
  color: #d7e2ed;
}
[data-theme="dark"] .api-key-pill {
  background: #202c3a;
  border-color: #344557;
}
[data-theme="dark"] .api-key-pill.running {
  background: #073b32;
  border-color: #0f766e;
  color: #7df4df;
}
[data-theme="dark"] .api-key-pill.failed {
  background: #3a1010;
  border-color: #a83a32;
  color: #ffb4ad;
}
[data-theme="dark"] .api-key-pill.missing {
  background: #3a2a08;
  border-color: #9a6a12;
  color: #ffd98a;
}
[data-theme="dark"] .notice.success {
  background: #073b32;
  border-color: #0f766e;
  color: #7df4df;
}
[data-theme="dark"] .notice.warning {
  background: #3a2a08;
  border-color: #9a6a12;
  color: #ffd98a;
}
[data-theme="dark"] .job-progress {
  background: #082f28;
  border-color: #0f766e;
}
[data-theme="dark"] .job-progress.paused {
  background: #3a2a08;
  border-color: #9a6a12;
}
[data-theme="dark"] .job-progress.failed,
[data-theme="dark"] .job-progress.stopped {
  background: #3a1010;
  border-color: #a83a32;
}
[data-theme="dark"] .job-progress-head span,
[data-theme="dark"] .job-counters strong,
[data-theme="dark"] .progress-text {
  color: #7df4df;
}
[data-theme="dark"] .job-counters span {
  background: #101822;
  border-color: #0f766e;
}
[data-theme="dark"] .google-search-status span {
  background: #16243a;
  border-color: #264466;
  color: #d7e2ed;
}
[data-theme="dark"] .google-search-status strong { color: #7cc7ff; }
[data-theme="dark"] .google-provider-badge.apify {
  background: #3a2a08;
  border-color: #9a6a12;
  color: #ffd98a;
}
[data-theme="dark"] .google-provider-badge.serpapi {
  background: #073b32;
  border-color: #0f766e;
  color: #7df4df;
}
[data-theme="dark"] .google-provider-badge.scrapingbee {
  background: #102a56;
  border-color: #2e90fa;
  color: #b2ddff;
}
[data-theme="dark"] .google-provider-badge.tavily {
  background: #27164f;
  border-color: #6938ef;
  color: #c7b9ff;
}
[data-theme="dark"] .progress-track { background: #0f4a3f; }
[data-theme="dark"] .status {
  background: #073b32;
  color: #7df4df;
}
[data-theme="dark"] .status.muted {
  background: #202c3a;
  color: var(--muted);
}
[data-theme="dark"] .pagination span { color: #718095; }
[data-theme="dark"] pre {
  background: #0b1119;
  color: #d7e2ed;
}
[data-theme="dark"] .alert {
  background: #3a1010;
  border-color: #a83a32;
  color: #ffb4ad;
}

@media (max-width: 900px) {
  .toolbar { align-items: flex-start; flex-direction: column; }
  .enrichment-panel { grid-template-columns: 1fr; }
  .api-settings-row { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  .filter-actions { flex-wrap: wrap; }
  .detail-grid { grid-template-columns: 1fr; }
  dl { grid-template-columns: 1fr; }
  .page { padding: 16px; }
  .topbar { gap: 12px; padding: 10px 16px; }
  .topnav { gap: 8px; }
}