:root {
    color-scheme: light dark;
    --bg: #f6f6f4; --card: #fff; --ink: #14140f; --muted: #6b6b63;
    --line: #e3e3dd; --good: #0a7d43; --goodbg: #e8f5ed; --warn: #8a5a00; --accent: #14140f;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#141413; --card:#1c1c1a; --ink:#f2f2ee; --muted:#9a9a90;
            --line:#2e2e2b; --good:#57d68f; --goodbg:#12301f; --warn:#e0a83c; --accent:#f2f2ee; }
  }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }
  .wrap { max-width: 860px; margin: 0 auto; padding: 40px 20px 80px; }
  h1 { font-size: 28px; letter-spacing:-.02em; margin: 0 0 6px; }
  .sub { color: var(--muted); margin: 0 0 28px; }
  form { display: flex; gap: 8px; flex-wrap: wrap; }
  input[type=url], input[type=text] { flex: 1 1 320px; min-width: 0; padding: 13px 14px; font-size: 15px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
  input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  button { padding: 13px 20px; font-size: 15px; font-weight: 600; border: 0; border-radius: 10px;
    background: var(--accent); color: var(--bg); cursor: pointer; }
  button:disabled { opacity: .5; cursor: default; }
  .status { margin: 22px 0; color: var(--muted); }
  .step { display:flex; align-items:center; gap:8px; }
  .dot { width:8px; height:8px; border-radius:50%; background:var(--muted); animation: pulse 1.1s infinite; }
  @keyframes pulse { 0%,100%{opacity:.25} 50%{opacity:1} }
  .panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 20px 0; }
  .ref { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:baseline; }
  .ref h2 { font-size: 17px; margin: 0 0 2px; }
  .ref .price { font-size: 22px; font-weight: 700; white-space: nowrap; }
  .meta { color: var(--muted); font-size: 13px; }
  .card { display: flex; gap: 14px; align-items: flex-start; background: var(--card);
    border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
  .card img { width: 78px; height: 78px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
  .card .body { flex: 1 1 auto; min-width: 0; }
  .card .title { font-weight: 600; margin-bottom: 3px; }
  .card .why { color: var(--muted); font-size: 13px; }
  .card .right { text-align: right; flex: none; }
  .card .now { font-size: 20px; font-weight: 700; }
  .save { display:inline-block; margin-top:4px; background: var(--goodbg); color: var(--good);
    border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
  .card a.go { display:inline-block; margin-top:8px; font-size:13px; font-weight:600; color: var(--ink); }
  .caveat { color: var(--warn); font-size: 13px; margin-top: 4px; }
  .tag { font-size: 11px; text-transform: uppercase; letter-spacing:.04em; color: var(--muted); }
  details { margin-top: 18px; }
  summary { cursor: pointer; color: var(--muted); font-size: 14px; }
  .rej { font-size: 13px; color: var(--muted); padding: 7px 0; border-bottom: 1px solid var(--line); }
  .rej b { color: var(--ink); font-weight: 600; }
  .none { padding: 26px; text-align:center; color: var(--muted); }
  code { font-size: 12px; color: var(--muted); }
  a { color: inherit; }

  /* product page */
  .crumb { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
  .crumb a { text-decoration: none; }
  h1 { max-width: 22ch; }
  .lead { font-size: 18px; line-height: 1.55; margin: 0 0 24px; }
  .sec { font-size: 18px; margin: 34px 0 12px; }
  .body-copy { color: var(--muted); }
  .foot { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 14px; }
  .card .right .meta { font-size: 12px; margin-top: 3px; }
  details[open] summary { margin-bottom: 8px; }

  /* filters: one square per value, outlined when you can click it */
  #filters { margin: 0 0 8px; }
  .chiprow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px; }
  .chiprow-label { font-size:13px; color:var(--muted); width:74px; flex:none; }
  .size { font: inherit; font-size:13px; font-weight:600; line-height:1; height:38px; min-width:38px;
    padding:0 10px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--ink); border-radius:8px; background:none; color:var(--ink); }
  .size.wide { text-transform:capitalize; }
  button.size { cursor:pointer; }
  .size.out { opacity:.25; cursor:default; }
  /* inset shadow, not a thicker border, so selecting one does not nudge the row */
  .size.on { box-shadow: inset 0 0 0 1px var(--ink); }
  #maxprice { flex: 0 1 220px; accent-color: var(--ink); height:38px; }
  #maxprice-out { font-size:13px; font-weight:600; min-width:60px; }
  .size-note { margin: 0 0 16px; }
  .card[hidden] { display: none; }
  .pill.ok { color: var(--good); border-color: var(--good); }
  .pill { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em; vertical-align:2px;
    border:1px solid var(--line); border-radius:999px; padding:1px 8px; color:var(--muted); }

  /* nothing cheaper: your link wins */
  .cheapest { text-align:center; padding: 34px 24px; border-color: var(--good); }
  .cheapest .kicker { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color:var(--good); margin-bottom:10px; }
  .cheapest h2 { font-size:24px; line-height:1.25; letter-spacing:-.02em; margin:0 auto 10px; max-width:20ch; }
  .cheapest-copy { color:var(--muted); max-width:52ch; margin:0 auto 20px; }
  .cheapest .buy { display:inline-block; background:var(--good); color:#fff; text-decoration:none;
    font-size:16px; font-weight:700; padding:15px 26px; border-radius:12px; }
  .cheapest .buy:hover { filter: brightness(1.08); }
  .cheapest .meta { margin: 14px auto 0; max-width:52ch; }

  /* site chrome */
  header.site, footer.site { max-width: 860px; margin: 0 auto; padding: 0 20px;
    display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  header.site { padding-top: 22px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  header.site .brand { font-weight: 700; letter-spacing:-.01em; text-decoration: none; }
  header.site nav, footer.site nav { display:flex; gap:16px; flex-wrap:wrap; margin-left:auto; }
  header.site nav a, footer.site nav a { font-size: 14px; color: var(--muted); text-decoration: none; }
  header.site nav a:hover, footer.site nav a:hover { color: var(--ink); }
  header.site + .wrap { padding-top: 34px; }
  footer.site { display:block; border-top: 1px solid var(--line); margin-top: 10px;
    padding-top: 18px; padding-bottom: 50px; }
  footer.site nav { margin: 0 0 8px; }
  footer.site .meta { max-width: 62ch; }

  /* homepage */
  h1.hero { font-size: 32px; max-width: 18ch; margin-bottom: 10px; }
  .sub { max-width: 62ch; }
  .try { margin: 10px 0 0; }
  .recent { display:grid; gap:8px; margin-bottom: 10px; }
  .recent-item { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; text-decoration:none;
    background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
  .recent-item:hover { border-color: var(--ink); }
  .recent-item b { font-weight:600; }
  .recent-item .save { margin-left:auto; }
  .problem { font-size:16px; color:var(--ink); margin:0 0 14px; }
  .none button { font-size:14px; padding:10px 16px; }
  .none details { margin-top: 14px; }

  /* about and privacy */
  .prose h2.sec { font-size:17px; }
  .prose .body-copy { max-width: 68ch; color: var(--ink); }
  .prose .lead { max-width: 60ch; }

  /* alternatives: near misses, quieter than an exact match, and distinct from
     the used cards, which own the dashed border */
  .alt-note { margin: -4px 0 12px; max-width: 62ch; }
  .card.alt { background: none; border-left: 3px solid var(--line); }
  .card.alt .right .meta { font-size: 12px; max-width: 12ch; margin-left: auto; }

  /* new vs used sections */
  .sec { display: flex; align-items: baseline; gap: 10px; }
  .group-note { margin: -4px 0 12px; }
  .card.used { border-style: dashed; }
  .card.used .tag { color: var(--warn); font-weight: 700; }