:root {
  --sky: #7ec6f2;
  --ink: #1c2d4a;
  --muted: #5c6e8a;
  --paper: #f4f8fd;
  --paper2: #e7f0fb;
  --line: #c5d6ee;
  --frame: #2c62b4;
  --frame-dark: #163e7c;
  --gold: #e8b23c;
  --gold-ink: #4a3208;
  --good: #178a45;
  --mild: #3f8f28;
  --warm: #d16a12;
  --bad: #d23b3b;
  --old: #6b7c93;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 14px/1.45 "Trebuchet MS", "Segoe UI", sans-serif;
  background: var(--sky) url("/art/market.jpg") right bottom / cover no-repeat fixed;
}
[hidden] { display: none !important; }
a { color: #1d5cb5; }
code { background: #e7f0fb; padding: 1px 5px; border-radius: 4px; color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--bad); min-height: 1.2em; margin: 0; }
.hint { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
img.px { image-rendering: pixelated; height: 28px; width: auto; vertical-align: middle; }
img.inline { height: 22px; margin-right: 6px; }
img.leaf { height: 22px; }

input, select, button {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 2px solid #8eaddb;
  border-radius: 6px;
  padding: 9px 12px;
}
input:focus, select:focus { outline: 2px solid #f0c14b88; border-color: var(--gold); }
button, .button {
  background: linear-gradient(#ffe7a0, #e7a31a);
  border: 2px solid #b8860b;
  color: var(--gold-ink);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  border-radius: 6px;
  padding: 9px 14px;
  box-shadow: inset 0 1px 0 #fff6d0;
}
button:hover, .button:hover { filter: brightness(1.06); }
button.link { background: none; border: none; box-shadow: none; color: #d7e6ff; padding: 0; font-weight: 400; text-decoration: underline; }
button.ghost { background: linear-gradient(#f7fbff, #d5e4f7); border-color: #6e97d2; color: #1d4e8f; box-shadow: inset 0 1px 0 #fff; }
button.ghost:hover { filter: none; border-color: var(--frame); }
button.small { padding: 4px 9px; font-size: 12px; white-space: nowrap; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card {
  background: linear-gradient(#fbfdff, var(--paper2));
  border: 3px solid var(--frame);
  border-radius: 12px;
  padding: 0 18px 18px;
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 0 0 1px var(--frame-dark), 0 14px 30px #0b2a5540;
}
.card.wide { width: auto; max-width: 860px; }
.card.intro { margin-bottom: 14px; }
.card h2 { margin: 4px 0 0; display: flex; align-items: center; }
.card p { margin: 0; }
.titlebar {
  margin: 0 -18px 4px;
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(#7eb2f0, #3d74c4 55%, #2b5eae);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 0 #163e78;
  box-shadow: inset 0 1px 0 #d5e7ff;
}
.parade { display: flex; justify-content: center; gap: 14px; padding: 6px 0 2px; }
.parade img { height: 46px; }
.steps { margin: 4px 0; padding-left: 20px; display: grid; gap: 6px; }

.top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 12px 12px 0;
  padding: 8px 14px;
  border: 3px solid #1d4e96;
  border-radius: 12px;
  background: linear-gradient(#6ea4ec, #3a6ec0 58%, #2759a4);
  color: #fff;
  position: sticky;
  top: 8px;
  z-index: 5;
  box-shadow: inset 0 1px 0 #cfe4ff, 0 4px 0 #163e78aa;
}
.logo { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; letter-spacing: .01em; text-shadow: 0 1px 0 #163e78; }
nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
nav button {
  background: linear-gradient(#e7f1fc, #c5daf3);
  border: 2px solid #2a5eae;
  color: #1c3f73;
  box-shadow: inset 0 1px 0 #fff;
  border-radius: 8px 8px 3px 3px;
}
nav button:hover { filter: none; color: #12325e; }
nav button.active {
  background: linear-gradient(#fff4cc, #f0c14b);
  border-color: #a67c12;
  color: var(--gold-ink);
}
.who { color: #e7f1ff; white-space: nowrap; }
main { padding: 14px 16px 28px; max-width: 1300px; margin: 0 auto; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile {
  background: linear-gradient(#fff, var(--paper2));
  border: 3px solid var(--frame);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 0 #163e7844;
}
.tile b { font-size: 22px; font-variant-numeric: tabular-nums; color: #1d4e96; }
.tile span { color: var(--muted); font-size: 12px; }

.bar { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.bar input:not([type]) { flex: 1; min-width: 260px; }
.bar label { color: var(--ink); display: flex; align-items: center; gap: 6px; background: #ffffffcc; border-radius: 8px; padding: 2px 6px; }
.check input { width: 16px; height: 16px; accent-color: #e7a31a; }

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 3px solid var(--frame);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 0 #163e7844;
}
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: #f3f8fe; }
th {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: linear-gradient(#5b90d6, #2f66b0);
}
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.shop { font-weight: 800; font-size: 15px; color: #1d4e96; }
td.usual { color: var(--muted); }
tr.click { cursor: pointer; }
tr.click:hover td { background: #ffe7a3; }
tr.is-gone td { opacity: .55; }
.item-name { font-weight: 700; }
.who-cell { display: flex; flex-direction: column; }
.shop-title { color: var(--muted); font-size: 12px; font-style: italic; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #eef3f8; color: var(--old); }
.pill.good { color: #052e14; background: #3dce6e; }
.pill.mild { color: #14532d; background: #d9f5df; }
.pill.warm { color: #7c2d12; background: #ffedd5; }
.pill.bad { color: #fff; background: var(--bad); }
.pill.none { color: var(--old); }
.pill.big { font-size: 14px; padding: 3px 10px; }
.age.fresh { color: var(--good); font-weight: 700; }
.age.today { color: #b45309; font-weight: 700; }
.age.old { color: var(--old); }
.gone { color: var(--muted); font-size: 12px; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
button.link.gone, .gone button.link { color: #1d5cb5; }

.empty {
  background: #ffffffee;
  border: 3px dashed #8eaddb;
  border-radius: 12px;
  padding: 26px;
  text-align: center;
  color: var(--muted);
}

.shop-card {
  background: linear-gradient(#fff, #f4f8fd);
  border: 3px solid var(--frame);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 3px 0 #163e7844;
}
.shop-card.is-gone { opacity: .6; }
.shop-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.shop-head .who-cell b { font-size: 15px; }
.shop-head .place { color: var(--ink); }
.spacer { flex: 1; }
.shop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 18px; }
.shop-items div { display: flex; gap: 10px; align-items: center; }
.shop-items .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.deal {
  background: linear-gradient(#fff, #f4f8fd);
  border: 3px solid var(--frame);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 3px 0 #163e7844;
}
.deal:hover { border-color: #1f9d55; }
.deal-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.deal-price b { font-size: 20px; font-variant-numeric: tabular-nums; color: #1d4e96; }
.deal-where { font-weight: 700; }
.deal-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; }

#history { margin-top: 18px; }
#history h3 { margin: 0 0 8px; }
.code-box {
  font: 600 16px/1.4 Consolas, monospace;
  background: #fff8e4;
  border: 2px dashed #b8860b;
  border-radius: 8px;
  padding: 10px 12px;
  user-select: all;
  color: var(--gold-ink);
}
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(#fff, #e7f0fb);
  border: 3px solid var(--frame);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 10px 30px #0b2a5555;
  z-index: 10;
}