/* Dispensary Deals — beach theme matched to the APK (v81):
   SKY #87c9ee backdrop, SAND #eddbb3 chrome with SAND_DK #5c451f text,
   DAMP_SAND pressed state, PURPLE deal-of-the-day accent (#661d94). */
:root {
  --sky: #87c9ee; --sky-top: #9ed6f4;
  --sand: #eddbb3; --sand-dk: #5c451f; --damp: #dec487;
  --sheet: #f7ecd3; --sheet-2: #fdf6e4; --line: #d9c193;
  --tx: #3d2f10; --dim: #866f45;
  --green: #1d7a45; --purple: #661d94; --amber: #8a6108;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--sky); }
body {
  margin: 0; color: var(--tx);
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(var(--sky-top), var(--sky) 130px);
  background-repeat: no-repeat; background-color: var(--sky);
  min-height: 100dvh;
}
#hdr { position: sticky; top: 0; z-index: 5; padding: 10px 14px 8px;
  background: linear-gradient(var(--sky-top), var(--sky));
  border-bottom: 1px solid rgba(92,69,31,.25); }
#hdr h1 { margin: 0; font-size: 19px; color: var(--sand-dk); }
#stamp { color: var(--sand-dk); opacity: .75; font-size: 11px; margin-top: 2px; }

#filters { position: sticky; top: 51px; z-index: 4;
  background: linear-gradient(var(--sand), #e7d3a7);
  border-bottom: 1px solid rgba(92,69,31,.35);
  padding: 7px 10px; display: grid; gap: 6px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

select, input[type=search] {
  background: var(--sheet-2); color: var(--sand-dk);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 8px; font: inherit; font-size: 13px; max-width: 100%; }
select:focus, input:focus { outline: 2px solid var(--damp); }
#cat { flex: 1 1 110px; }
#q { flex: 1 1 100%; }

.switch { display: inline-flex; gap: 6px; align-items: center;
  color: var(--sand-dk); font-size: 13px; }
.switch input { appearance: none; width: 38px; height: 22px; border-radius: 11px;
  background: var(--damp); position: relative; transition: .15s; margin: 0; }
.switch input:checked { background: var(--green); }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: .15s; }
.switch input:checked::after { left: 18px; }

main { padding: 10px 10px calc(96px + env(safe-area-inset-bottom)); display: grid;
  gap: 8px; max-width: 760px; margin: 0 auto; }
.card { background: var(--sheet); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(92,69,31,.12); }
.card:active { background: var(--damp); }
.card.spot { border-color: var(--purple); border-width: 1.5px;
  background: linear-gradient(var(--sheet-2), var(--sheet)); }
.card .top { display: flex; gap: 8px; align-items: baseline;
  justify-content: space-between; }
.card .name { font-weight: 650; font-size: 15px; margin: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dotd { color: var(--purple); font-weight: 700; font-size: 13px;
  letter-spacing: .2px; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 8px; letter-spacing: .3px; flex: none; }
.b-Ind { background: #dbe9fb; color: #1d4ea8; }
.b-Sat { background: #f3e4bd; color: #8a6108; }
.b-Hyb { background: #e7d7f3; color: #661d94; }
.b-I-Hyb, .b-S-Hyb { background: #e0e8f2; color: #3d5a80; }
.b-UNK, .b-multi { background: #e5d9bd; color: var(--dim); }
.card .store { color: var(--dim); font-size: 12px; margin: 2px 0 6px; }
.card .metrics { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ppg { color: var(--green); font-weight: 800; font-size: 17px; }
.price { font-weight: 600; }
.price s { color: var(--dim); font-weight: 400; margin-left: 5px; }
.pill { color: var(--dim); font-size: 12px; }
.pill b { color: var(--tx); font-size: 13px; }
.tps { color: var(--dim); font-size: 12px; margin-top: 6px;
  border-top: 1px dashed var(--line); padding-top: 6px; }
.tps b { color: var(--green); font-weight: 600; }
.expand { margin-top: 8px; display: none; font-size: 12px; color: var(--dim);
  gap: 3px 10px; }
.card.open .expand { display: block; }
.expand .names b { color: var(--tx); }
.expand .names span { display: inline-block; margin: 2px 8px 2px 0; }
.expand a { color: var(--purple); font-weight: 600;
  display: inline-block; margin: 4px 10px 0 0; }
.dealnote { color: var(--amber); font-size: 12px; margin-top: 4px; }
.more { background: var(--sand); border: none; border-radius: 10px;
  color: var(--sand-dk); font: inherit; font-size: 13px;
  padding: 10px; }

#empty { color: var(--sand-dk); text-align: center; padding: 40px 14px;
  max-width: 760px; margin: 0 auto; }

#ftr { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6;
  background: linear-gradient(rgba(237,219,179,0), var(--sand) 26%);
  border-top: 1px solid rgba(92,69,31,.25);
  padding: 20px 10px calc(10px + env(safe-area-inset-bottom));
  max-width: none; }
#counts { color: var(--sand-dk); font-size: 12px; padding: 0 4px 6px; }
#counts b { color: var(--sand-dk); font-weight: 700; }
.btns { display: flex; gap: 8px; }
.btns button { flex: 1; background: var(--sand); border: 1px solid var(--sand-dk);
  color: var(--sand-dk); border-radius: 11px; padding: 11px 8px; font: inherit;
  font-size: 14px; font-weight: 650; }
.btns button:active { background: var(--damp); }
.btns button:disabled { opacity: .45; border-color: var(--line); color: var(--dim); }
#scrapemsg { color: var(--sand-dk); opacity: .8; font-size: 12px; padding-top: 6px;
  min-height: 16px; max-height: 72px; overflow: auto; }
#scrapemsg b { color: var(--amber); }

@media (min-width: 720px) {
  main { grid-template-columns: 1fr 1fr; align-items: start; }
  #filters, #empty { max-width: none; }
}