:root {
  --bg: #f6f7f5; --panel: #ffffff; --ink: #18201d; --muted: #5d6b66; --line: #dfe5e2;
  --accent: #0f766e; --accent-ink: #ffffff; --hl: #e8f4f1;
  --green: #15803d; --amber: #b45309; --red: #b91c1c; --na: #9aa5a1;
  --warn-bg: #fff7e6; --warn-line: #f2d49b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1412; --panel: #172019; --ink: #e6ece9; --muted: #9db0a8; --line: #2a3631;
    --accent: #2dd4bf; --accent-ink: #0b1310; --hl: #1d2f2a;
    --green: #4ade80; --amber: #fbbf24; --red: #f87171; --na: #6b7a74;
    --warn-bg: #2a2214; --warn-line: #5c4720;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1412; --panel: #172019; --ink: #e6ece9; --muted: #9db0a8; --line: #2a3631;
  --accent: #2dd4bf; --accent-ink: #0b1310; --hl: #1d2f2a;
  --green: #4ade80; --amber: #fbbf24; --red: #f87171; --na: #6b7a74;
  --warn-bg: #2a2214; --warn-line: #5c4720;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
a { color: var(--accent); }
h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 1.02rem; margin: 0 0 .6rem; display: inline; }
h3 { font-size: .92rem; margin: .4rem 0; }
.panel > h2 { display: block; }
.sub { font-weight: 400; color: var(--muted); font-size: .8rem; margin-left: .3rem; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.r { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; }
.tabs { display: flex; gap: .25rem; }
.tabs button { border: 0; background: none; color: var(--muted); padding: .4rem .55rem; border-radius: 8px; font: inherit; cursor: pointer; }
.tabs button.on { background: var(--hl); color: var(--ink); font-weight: 600; }

main { max-width: 860px; margin: 0 auto; padding: 12px 16px 48px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; overflow-x: auto; }
details.panel > summary { cursor: pointer; list-style: none; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before { content: '▸ '; color: var(--muted); }
details.panel[open] > summary::before { content: '▾ '; }
details.panel[open] > summary { margin-bottom: .6rem; }

.find .search { position: relative; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; max-width: 100%;
}
#q { width: 100%; font-size: 1rem; }
textarea { width: 100%; margin: .5rem 0; }
.suggest { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; z-index: 4; box-shadow: 0 6px 20px rgb(0 0 0 / .12); }
.suggest button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); padding: .55rem .7rem; font: inherit; cursor: pointer; }
.suggest button:hover, .suggest button:focus { background: var(--hl); }
.suggest p { margin: .5rem .7rem; }
#paste-box { margin-top: .6rem; }
#paste-box summary { cursor: pointer; color: var(--muted); }
.status { margin: .5rem 0 0; font-size: .88rem; color: var(--muted); }
.status.ok { color: var(--green); }
.status.bad { color: var(--red); }

.btn { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: .5rem .8rem; font: inherit; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.small { padding: .2rem .45rem; font-size: .8rem; }
.link { border: 0; background: none; color: var(--accent); font: inherit; padding: 0; cursor: pointer; text-align: left; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.field { display: block; margin: .4rem 0; color: var(--muted); font-size: .86rem; }
.field input { display: block; width: 100%; margin-top: .25rem; }
.field.inline { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.field.inline input, .field.inline select { display: inline-block; width: 7rem; margin: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: .38rem .35rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; color: var(--muted); font-weight: 600; text-align: left; }
th.r { text-align: right; }
tr.hl td { background: var(--hl); }
td input { width: 100%; padding: .3rem .4rem; }
td input[type="checkbox"] { width: auto; }
input.why { font-size: .8rem; min-width: 9rem; }

.head { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; align-items: start; }
.head .price { font-size: 1.35rem; font-weight: 700; text-align: right; }
.head .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.badge { display: inline-block; font-size: .78rem; padding: .15rem .5rem; border-radius: 999px; background: var(--hl); color: var(--ink); }
.badge.ok { color: var(--green); }
.badge.warn { background: var(--warn-bg); color: var(--amber); }
.badge.bad { color: var(--red); }

.warnings { background: var(--warn-bg); border-color: var(--warn-line); }
.warnings p { margin: .25rem 0; font-size: .88rem; }
.warnings p.i { color: var(--muted); }

.levels td.big { font-size: 1.1rem; font-weight: 700; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.checks { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.checks li { margin: .2rem 0; }

.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--na); margin-top: .3rem; }
.dot.green { background: var(--green); }
.dot.amber { background: var(--amber); }
.dot.red { background: var(--red); }
.dot.manual { background: transparent; border: 2px solid var(--muted); }
.dot.info { background: var(--accent); }
.watch td:first-child { width: 1.2rem; }
.src { margin-top: 1rem; }

/* 1-2-3 plan colours (Amol): now = light pink, L3 = dark green + white text, L2/L1 = light red */
:root { --now-bg: #fde4ec; --now-ink: #5b1730; --l3-bg: #166534; --l3-ink: #ffffff; --low-bg: #fde2e2; --low-ink: #6b1414; --near: #a16207; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --now-bg: #4a2232; --now-ink: #fde4ec; --l3-bg: #15803d; --l3-ink: #ffffff; --low-bg: #4a1c1c; --low-ink: #fecaca; --near: #facc15; }
}
:root[data-theme="dark"] { --now-bg: #4a2232; --now-ink: #fde4ec; --l3-bg: #15803d; --l3-ink: #ffffff; --low-bg: #4a1c1c; --low-ink: #fecaca; --near: #facc15; }
.levels tr.row-now td { background: var(--now-bg); color: var(--now-ink); }
.levels tr.row-l3 td { background: var(--l3-bg); color: var(--l3-ink); }
.levels tr.row-low td { background: var(--low-bg); color: var(--low-ink); }
.levels tr.row-now td .small, .levels tr.row-l3 td .small, .levels tr.row-low td .small { color: inherit; opacity: .85; }
.pb { display: inline-block; font-size: .78rem; font-weight: 600; padding: .12rem .45rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pb.buy { background: #ffffff; color: #166534; border-color: #ffffff; }
.pb.near { background: #fef3c7; color: #854d0e; border-color: #fef3c7; }
.pb.wait { opacity: .9; }
.pb.check { background: #ffffff; color: #b91c1c; border-color: #ffffff; }
.bt { list-style: none; padding: 0; margin: .6rem 0 .2rem; }
.bt li { margin: .25rem 0; display: flex; gap: .45rem; align-items: baseline; }
.sw { flex: none; width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; }
.sw.now { background: var(--now-bg); border: 1px solid var(--now-ink); }
.sw.l3 { background: var(--l3-bg); }
.sw.low { background: var(--low-bg); border: 1px solid var(--low-ink); }
.pw { border-radius: 6px; padding: .05rem .35rem; margin: .1rem 0; white-space: nowrap; }
.pw.l3 { background: var(--l3-bg); color: var(--l3-ink); }
.pw.low { background: var(--low-bg); color: var(--low-ink); }
.pw.wait { opacity: .55; }
@media print { .levels tr td, .pw, .sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

details.extra { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; }
details.extra > summary, details.rtext > summary { cursor: pointer; padding: .3rem 0; }
details.rtext { margin: .4rem 0 .6rem; padding: .5rem .6rem; border: 1px dashed var(--line); border-radius: 8px; }
.found { border: 1px solid var(--accent); border-radius: 8px; padding: .6rem; margin-top: .6rem; background: var(--hl); }
.found p { margin: .25rem 0; }
.bad { color: var(--red); }

@media (max-width: 560px) {
  .cols2 { grid-template-columns: 1fr; }
  .tabs button { padding: .35rem .4rem; font-size: .88rem; }
  .brand .sub { display: none; }
}
@media print {
  .bar, .find, .noprint, #view-watch, #view-settings, button, input[type="checkbox"] { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border-color: #ccc; break-inside: avoid; }
  details.panel > *:not(summary) { display: block; }
}