:root {
  --bg:#f7f6f2; --card:#fff; --ink:#1d1f21; --muted:#5f6670; --line:#e2e0d8;
  --accent:#a15c00; --accent-ink:#fff; --good:#1b7a4b; --good-bg:#e4f4ea;
  --warn:#8a5a00; --warn-bg:#fff3d6; --err:#b3261e;
  --dm:#1f7a5c; --bws:#b35c00; --ll:#4f55c2;
  --radius:10px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#16171a; --card:#202226; --ink:#ecebe6; --muted:#a3a8b0; --line:#32353b;
    --accent:#e0a040; --accent-ink:#1a1200; --good:#6fd39b; --good-bg:#16301f;
    --warn:#f0c870; --warn-bg:#33290f; --err:#ff8a80; --dm:#4cc9a0; --bws:#f0a050; --ll:#9ea4ff; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.wrap { max-width:1100px; margin:0 auto; padding:0 16px; }
.top { background:var(--card); border-bottom:1px solid var(--line); padding:20px 0 16px; }
h1 { margin:0; font-size:1.7rem; letter-spacing:-.02em; }
.tag { margin:.2rem 0 1rem; color:var(--muted); }
.postcode label { display:block; font-weight:600; margin-bottom:.3rem; }
.row { display:flex; gap:8px; }
input, select, button { font:inherit; color:inherit; }
input, select { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.55rem .7rem; min-height:44px; }
#state { min-width:16rem; max-width:100%; font-size:1.05rem; }
.small { font-size:.85rem; margin:.4rem 0 0; }
button { background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px; padding:.55rem 1.1rem; min-height:44px; font-weight:600; cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.error { color:var(--err); margin:.4rem 0 0; font-weight:600; }
.banner { border-radius:var(--radius); padding:.7rem .9rem; margin:14px 0 0; background:var(--warn-bg); color:var(--warn); }
.banner.demo { border:1px dashed var(--warn); }
.banner.notice { background:var(--card); border:1px solid var(--line); color:var(--ink); }
.stores { color:var(--muted); font-size:.92rem; margin:.8rem 0 0; }
.filters { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:end; margin:16px 0 6px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.f { display:flex; flex-direction:column; font-size:.85rem; color:var(--muted); gap:3px; }
.f.grow { flex:1 1 200px; } .f.small input { width:6rem; }
.chk { display:flex; align-items:center; gap:6px; font-size:.92rem; min-height:44px; }
.chk input { min-height:auto; width:18px; height:18px; }
.summary { color:var(--muted); margin:10px 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin:0 0 10px; display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:10px; align-items:stretch; cursor:pointer; }
.card:hover { border-color:var(--accent); }
.card h2 { font-size:1.02rem; margin:0 0 4px; }
.meta { color:var(--muted); font-size:.85rem; display:flex; flex-wrap:wrap; gap:4px 8px; }
.badge { display:inline-block; font-size:.75rem; padding:1px 7px; border-radius:99px; border:1px solid var(--line); }
.badge.warn { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
.cell { border:1px solid var(--line); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.cell.best { border-color:var(--good); background:var(--good-bg); }
.cell.empty { color:var(--muted); border-style:dashed; justify-content:center; text-align:center; font-size:.85rem; }
.rname { font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; display:flex; align-items:center; gap:5px; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.price { font-size:1.35rem; font-weight:700; }
.sub { font-size:.82rem; color:var(--muted); }
.val { font-weight:600; }
.tagbest { color:var(--good); font-weight:700; font-size:.78rem; }
.stale { color:var(--warn); font-size:.78rem; }
.pager { text-align:center; margin:14px 0 30px; }
.empty-state { text-align:center; color:var(--muted); padding:40px 10px; }
dialog { border:1px solid var(--line); border-radius:14px; padding:0; width:min(920px,96vw); max-height:92vh; background:var(--card); color:var(--ink); }
dialog::backdrop { background:rgba(0,0,0,.5); }
.dlg { padding:18px; position:relative; overflow:auto; max-height:90vh; }
.close { position:absolute; right:10px; top:10px; width:44px; padding:0; background:transparent; color:var(--ink); font-size:1.8rem; }
table { border-collapse:collapse; width:100%; font-size:.9rem; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; font-size:.8rem; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl { overflow-x:auto; }
.chart-wrap { margin:14px 0 6px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:.85rem; margin:6px 0; }
.signal { margin:6px 0; font-weight:600; }
.signal.good { color:var(--good); } .signal.bad { color:var(--warn); }
svg text { fill:var(--muted); font-size:11px; }
svg .grid { stroke:var(--line); }
.foot { margin:36px auto 40px; color:var(--muted); font-size:.88rem; }
.foot details { margin-bottom:10px; } .foot summary { cursor:pointer; font-weight:600; color:var(--ink); }
@media (max-width: 760px) {
  .card { grid-template-columns:1fr; }
  .cell { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
  .cell .rname { flex:1 0 100%; }
}
a { color: var(--accent); }