/* Alpha Geeks design language, taken from alphageeksllc.com itself: a white page with a
   pale-blue (#D6E6F6) chrome band, Poppins 700 headings on tight negative tracking, full
   pill buttons in the logo cyan, and soft rgba(28,36,75,.08) shadows on 10px cards.
   The site uses no dark chrome, so neither does this.

   Cyan is used two ways on purpose. --brand is the exact logo cyan and fills buttons,
   rails and progress just as the site does. --brand-ink is the same hue darkened to
   5.04:1 for small text on white (body links), where the logo cyan's 2.53:1 would be
   unreadable at 12-13px. Same brand, legible at UI sizes. */
:root {
  --bg: #FFFFFF;
  --panel: #ffffff;
  --panel-alt: #F3F7FD;
  --ink: #212121;
  --muted: #5F6570;
  --line: #DDE6EF;
  --brand: #00AEEF;
  --brand-dark: #0095CC;
  --brand-ink: #0077A3;
  --brand-accent: #00AEEF;
  --brand-navy: #1C244B;
  --brand-soft: #E6F7FE;
  --surface-blue: #D6E6F6;
  --ok: #1a7f37;
  --ok-soft: #e6f4ea;
  --warn: #9a6700;
  --warn-soft: #fff4d6;
  --bad: #b42318;
  --bad-soft: #fdecea;
  --review: #6941c6;
  --review-soft: #f0e9ff;
  --partial: #c4320a;
  --partial-soft: #ffefe6;
  --sidebar: #D6E6F6;
  --sidebar-ink: #3A4250;
  --radius: 10px;
  --radius-pill: 100px;
  --shadow: 0 8px 24px rgba(28, 36, 75, 0.08);
  --shadow-chrome: 0 2px 18px rgba(28, 36, 75, 0.12);
  --font: "Poppins", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
/* Body links use the darkened cyan: the logo cyan is unreadable at this size on white. */
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
/* The site sets headings in Poppins 700 on tight negative tracking (-1.4px at 40px). */
h1, h2, h3 { margin: 0 0 10px; font-weight: 700; letter-spacing: -0.035em; }
h1 { font-size: 28px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; letter-spacing: -0.02em; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
/* Pale-blue chrome band, matching the site header. The logo is dark-on-transparent and
   sits directly on it — no chip needed now that the panel is light. */
.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-ink);
  padding: 24px 18px;
  box-shadow: var(--shadow-chrome);
  position: relative;
  z-index: 1;
}
.brand { display: block; margin-bottom: 26px; text-decoration: none; }
.brand img { display: block; width: 100%; max-width: 150px; height: auto; }
.brand-text { color: var(--ink); font-weight: 700; font-size: 18px; letter-spacing: -0.035em; }
.nav a {
  display: block;
  color: var(--sidebar-ink);
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-decoration: none;
}
.nav a:hover { background: rgba(255,255,255,.7); color: var(--ink); text-decoration: none; }
/* Active item is a solid cyan pill, echoing the site's call-to-action buttons. */
.nav a.active {
  background: var(--brand);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.nav form { margin-top: 18px; }
.main { padding: 28px 32px 60px; width: 100%; max-width: 1240px; min-width: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0 22px; }
.card, .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.card { padding: 14px 16px; }
.panel { padding: 18px 20px; margin-bottom: 18px; }
.card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.card .value { font-size: 22px; font-weight: 650; margin-top: 6px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
/* Full pill in the logo cyan, as on the site's "Contact us" button. Weight 500 keeps the
   label legible at UI size, where the site can rely on 16px. */
.btn, button.btn, input[type=submit].btn {
  border: 0;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease;
}
.btn:hover, button.btn:hover { background: var(--brand-dark); }
.btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover { background: var(--panel-alt); border-color: var(--brand); }
/* Keyboard focus was relying on the browser default; give it the brand cyan, which is
   bright enough to read against both the light panels and the navy sidebar. */
:where(a, button, .btn, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn.danger { background: var(--bad); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  background: #fff;
}
label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.field { margin-bottom: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 12px; font-weight: 600; }
.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.badge.found { background: var(--ok-soft); color: var(--ok); }
.badge.partial { background: var(--partial-soft); color: var(--partial); }
.badge.not_found, .badge.queued { background: var(--surface-blue); color: var(--brand-navy); }
.badge.pending, .badge.duplicate, .badge.cancelled { background: var(--surface-blue); color: var(--brand-navy); }
.badge.manual_review, .badge.review { background: var(--review-soft); color: var(--review); }
.badge.failed, .badge.paused, .badge.cancel_requested { background: var(--bad-soft); color: var(--bad); }
.badge.running, .badge.retry_wait { background: var(--brand-soft); color: var(--brand-ink); }
.badge.draft, .badge.ready, .badge.complete { background: var(--surface-blue); color: var(--brand-navy); }
.alert { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.alert.error { background: var(--bad-soft); color: var(--bad); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
/* Progress fill carries no text, so it uses the true logo cyan. */
.progress { height: 10px; background: var(--surface-blue); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand-accent); }
.quota-progress { height: 6px; margin: 7px 0; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; }
.login { width: min(420px, 92vw); }
.sources a { display: block; margin-bottom: 4px; word-break: break-all; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.counts a { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: inherit; text-decoration: none; }
.small { font-size: 12px; color: var(--muted); }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.preview-table { width: max-content; min-width: 100%; }
.preview-table th { max-width: 220px; white-space: nowrap; }
.preview-table td { min-width: 120px; max-width: 220px; }
/* Prospect table is wide and data-dense. It scrolls inside .table-scroll instead of
   spilling past the panel; long URLs/emails wrap rather than forcing the width, and
   numeric and timestamp columns stay on one line so rows read as a grid. */
.prospect-table { min-width: 1080px; }
/* Website URLs are links, not reading material: cap and ellipsis them so they don't
   dominate the row. Full URL stays available via the title attribute. */
.prospect-table td:nth-child(2) { max-width: 150px; }
.prospect-table td:nth-child(2) a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prospect-table td:nth-child(5) { max-width: 200px; overflow-wrap: break-word; }
.prospect-table th:nth-child(7), .prospect-table td:nth-child(7),
.prospect-table th:nth-child(9), .prospect-table td:nth-child(9),
.prospect-table th:nth-child(10), .prospect-table td:nth-child(10),
.prospect-table th:nth-child(11), .prospect-table td:nth-child(11) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.prospect-table th:nth-child(12), .prospect-table td:nth-child(12) { white-space: nowrap; }
.preview-cell {
  display: -webkit-box;
  max-width: 220px;
  max-height: 5.8em;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.period-filter { display: grid; grid-template-columns: minmax(150px, 220px) repeat(2, minmax(150px, 190px)) auto; gap: 10px; align-items: end; margin: 16px 0; }
.period-filter .field { margin: 0; }
.inline-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.inline-field input { width: 90px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); }
.check-inline input { width: auto; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 4; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .main { padding: 18px 16px 48px; }
  .period-filter { grid-template-columns: 1fr; }
}