:root {
  color-scheme: light;
  --ink: #17232b;
  --ink-soft: #30404a;
  --muted: #70808a;
  --line: #dfe7e9;
  --line-strong: #cbd7da;
  --panel: #ffffff;
  --panel-alt: #f7faf9;
  --bg: #f1f5f6;
  --accent: #0b806b;
  --accent-deep: #075f51;
  --accent-soft: #e2f4ee;
  --warn: #fff5d9;
  --warn-ink: #89630e;
  --danger-soft: #fff0ed;
  --danger-ink: #a43d2d;
  --shadow: 0 16px 38px rgba(31, 55, 62, .07);
  --radius: 14px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 92% -8%, rgba(11, 128, 107, .08), transparent 31rem), var(--bg);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(11, 128, 107, .25); outline-offset: 2px; }
.shell { max-width: 1900px; margin: 0 auto; padding: 38px 32px 64px; }
.page-header { align-items: flex-end; display: flex; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.brand-block { align-items: flex-start; display: flex; gap: 14px; }
.brand-mark { align-items: center; background: var(--ink); border-radius: 12px; color: #fff; display: flex; flex: 0 0 auto; font-size: 20px; font-weight: 850; height: 42px; justify-content: center; letter-spacing: -.08em; width: 42px; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .16em; margin: 0 0 7px; }
h1, h2 { letter-spacing: -.045em; }
h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; margin: 0 0 8px; }
h2 { font-size: 20px; line-height: 1.1; margin: 0 0 5px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.header-actions, .scraper-actions { align-items: center; display: flex; gap: 10px; }
.header-note { align-items: center; color: var(--muted); display: flex; font-size: 12px; gap: 7px; white-space: nowrap; }
.pulse-dot { background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--accent-soft); display: inline-block; height: 7px; width: 7px; }

.button, .price-form button { align-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); color: var(--ink-soft); cursor: pointer; display: inline-flex; gap: 7px; justify-content: center; min-height: 38px; padding: 8px 13px; text-decoration: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease; }
.button:hover, .price-form button:hover { border-color: var(--accent); color: var(--accent-deep); }
.button:active, .price-form button:active { transform: translateY(1px); }
.button.primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 5px 13px rgba(11, 128, 107, .16); color: #fff; font-weight: 750; }
.button.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.button.quiet { background: transparent; border-color: transparent; }
button:disabled { cursor: wait; opacity: .62; }

.scraper-panel, .stats > div, .toolbar, .table-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.scraper-panel { border-left: 4px solid var(--accent); border-radius: var(--radius); margin-bottom: 22px; padding: 22px 22px 17px; }
.section-heading { align-items: flex-start; display: flex; justify-content: space-between; gap: 20px; }
.section-copy { max-width: 620px; }
.section-heading p { margin: 0; }
.scraper-options { align-items: stretch; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 20px 0 16px; padding: 14px 0; }
.option-group { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 18px; }
.option-limits { margin-left: auto; }
.check-label { align-items: center; color: var(--ink-soft); display: flex; flex-direction: row; font-size: 13px; font-weight: 650; gap: 8px; padding: 6px 0; }
.check-label input, .category-choice input { accent-color: var(--accent); min-height: auto; }
label { color: var(--muted); display: flex; flex-direction: column; font-size: 11px; font-weight: 800; gap: 6px; letter-spacing: .01em; }
.scraper-options input[type=number] { width: 112px; }
input, select { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); min-height: 38px; padding: 8px 10px; }
input::placeholder { color: #a1adb2; }
input:hover, select:hover { border-color: #aebfc2; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 128, 107, .1); outline: 0; }
.category-heading { align-items: baseline; display: flex; gap: 10px; margin-bottom: 8px; }
.category-heading strong { font-size: 12px; letter-spacing: .02em; }
.category-list { border: 1px solid var(--line); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px; max-height: 150px; overflow: auto; padding: 10px; }
.category-list.is-loading { color: var(--muted); }
.category-list.has-error { background: var(--danger-soft); border-color: #efc7c1; color: var(--danger-ink); }
.category-choice { align-items: center; background: var(--panel-alt); border: 1px solid transparent; border-radius: 7px; color: var(--ink-soft); display: flex; flex-direction: row; font-size: 12px; font-weight: 650; gap: 7px; padding: 7px 9px; transition: background .15s ease, border-color .15s ease; }
.category-choice:hover { background: var(--accent-soft); border-color: #b8e1d4; }
.scraper-status-line { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; min-height: 24px; }
.scraper-log { color: var(--muted); margin-top: 10px; }
.scraper-log summary { cursor: pointer; font-size: 12px; font-weight: 650; }
.log-content { background: #f7f9fa; border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; margin-top: 8px; max-height: 170px; overflow: auto; padding: 10px; white-space: pre-wrap; }

.notice { background: var(--warn); border: 1px solid #ecd38a; border-radius: 10px; color: var(--warn-ink); margin-bottom: 20px; padding: 12px 15px; }
.notice code { font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; max-width: 850px; }
.stats > div { align-items: center; border-radius: var(--radius); display: flex; gap: 13px; padding: 16px 18px; }
.stat-mark { align-items: center; background: #edf2f3; border-radius: 9px; color: var(--muted); display: flex; font-size: 10px; font-weight: 850; height: 30px; justify-content: center; letter-spacing: .06em; width: 30px; }
.stat-mark.is-fresh { background: var(--accent-soft); color: var(--accent-deep); }
.stat-mark.is-price { background: #fff4dc; color: #9a6b13; }
.stat-label { color: var(--muted); display: block; font-size: 11px; font-weight: 700; margin-bottom: 3px; }
.stats strong { font-size: 24px; letter-spacing: -.04em; line-height: 1; }

.toolbar { align-items: flex-end; border-radius: var(--radius) var(--radius) 0 0; display: flex; flex-wrap: wrap; gap: 14px; padding: 15px; }
.search-box { flex: 1 1 270px; }
.search-input { position: relative; }
.search-input > span { color: var(--muted); font-size: 23px; left: 10px; line-height: 1; position: absolute; top: 7px; transform: rotate(-20deg); }
.search-input input { padding-left: 34px; width: 100%; }
.filter-fields { align-items: flex-end; display: flex; flex: 3 1 680px; flex-wrap: wrap; gap: 10px; }
.filter-fields label { flex: 1 1 135px; }
.filter-fields select { width: 100%; }
.toolbar-actions { display: flex; gap: 5px; }

.table-card { border-radius: 0 0 var(--radius) var(--radius); border-top: 0; overflow: hidden; }
.table-card-header { align-items: center; display: flex; justify-content: space-between; padding: 18px 18px 14px; }
.table-card-header .eyebrow { margin-bottom: 4px; }
.table-card-header h2 { font-size: 18px; margin: 0; }
.table-hint { color: var(--muted); font-size: 11px; }
.table-scroll { overflow: auto; }
table { border-collapse: collapse; min-width: 1450px; width: 100%; }
th { background: #f7f9fa; border-bottom: 1px solid var(--line); color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 850; letter-spacing: .08em; padding: 12px 10px; position: sticky; text-align: left; text-transform: uppercase; top: 0; white-space: nowrap; z-index: 1; }
th:hover { background: var(--accent-soft); color: var(--accent-deep); }
th.sorted-asc::after { color: var(--accent); content: " ↑"; }
th.sorted-desc::after { color: var(--accent); content: " ↓"; }
td { border-top: 1px solid #edf1f2; padding: 12px 10px; vertical-align: middle; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #f7fbfa; }
a { color: var(--accent-deep); }
a:hover { color: var(--accent); }
.image-column, .image-cell { width: 110px; }
.image-cell img { background: #f7f9fa; border: 1px solid var(--line); border-radius: 8px; display: block; height: 60px; object-fit: contain; width: 78px; }
.image-name { color: var(--muted); display: block; font-size: 10px; margin-top: 5px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-image { align-items: center; background: #f0f3f4; border-radius: 8px; color: var(--muted); display: flex; height: 60px; justify-content: center; width: 78px; }
.category-pill, .status, .freshness { border-radius: 999px; display: inline-block; font-size: 10px; font-weight: 750; letter-spacing: .01em; padding: 5px 9px; white-space: nowrap; }
.category-pill { background: #edf2f3; color: var(--ink-soft); }
.status.available, .freshness.fresh { background: var(--accent-soft); color: var(--accent-deep); }
.status.unavailable, .freshness.stale { background: var(--danger-soft); color: var(--danger-ink); }
.status.unknown, .freshness.unknown { background: #edf2f3; color: var(--muted); }
.status[data-status="queued"], .status[data-status="running"] { background: #eaf2ff; color: #315b8f; }
.tip { background: #edf2f3; border-radius: 4px; color: var(--muted); font-size: 9px; padding: 2px 4px; text-transform: none; }
.price-form { align-items: center; display: flex; gap: 5px; min-width: 190px; }
.price-form input { min-width: 98px; width: 102px; }
.price-form button { font-size: 11px; min-height: 32px; padding: 5px 9px; }
.save-state { color: var(--accent); font-size: 10px; min-width: 34px; }
.save-state.is-saving { color: var(--muted); }
.save-state.is-success { color: var(--accent-deep); font-weight: 700; }
.save-state.is-error { color: var(--danger-ink); font-weight: 700; }
.empty { color: var(--muted); padding: 54px 20px; text-align: center; }
.empty > * { display: block; }
.empty strong { color: var(--ink-soft); font-size: 14px; margin-bottom: 3px; }
.empty-mark { color: var(--accent); font-size: 28px; line-height: 1; margin-bottom: 8px; transform: rotate(-20deg); }
.table-footer { align-items: center; color: var(--muted); display: flex; font-size: 11px; gap: 16px; justify-content: space-between; padding: 13px 16px; }
.pagination { align-items: center; display: flex; gap: 9px; white-space: nowrap; }
.pagination .button { min-height: 32px; padding: 5px 9px; }

@media (max-width: 900px) {
  .option-limits { margin-left: 0; }
  .filter-fields { flex-basis: 100%; }
  .toolbar-actions { margin-left: auto; }
}
@media (max-width: 700px) {
  .shell { padding: 22px 12px 42px; }
  .page-header, .section-heading { align-items: flex-start; flex-direction: column; }
  .header-actions, .scraper-actions { justify-content: space-between; width: 100%; }
  .header-note { display: none; }
  .scraper-panel { padding: 18px 15px 14px; }
  .scraper-options { gap: 12px; }
  .option-group { width: 100%; }
  .option-limits label { flex: 1 1 100px; }
  .stats { gap: 8px; grid-template-columns: 1fr; max-width: none; }
  .stats > div { padding: 12px 14px; }
  .filter-fields label { flex-basis: calc(50% - 5px); }
  .toolbar-actions { margin-left: 0; width: 100%; }
  .toolbar-actions .button { flex: 1; }
  .table-card-header { align-items: flex-start; flex-direction: column; gap: 6px; }
  .table-footer { align-items: flex-start; flex-direction: column; }
  .pagination { width: 100%; }
  .pagination .button { flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}