:root{
  --bg:#f3efe6; --card:#fffdf8; --ink:#22201c; --muted:#6e675c; --line:#ddd5c4;
  --accent:#1f6f5c; --accent-ink:#fff; --gold:#b5832a; --danger:#b3382c;
  --serif:"Fraunces",Georgia,serif; --sans:"Instrument Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#171a18;--card:#1f2320;--ink:#ece8dd;--muted:#a09a8b;--line:#33392f;--accent:#5fc0a5;--accent-ink:#0f1a16;--gold:#e0b25a;--danger:#ef7d6f}
}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans)}
main{max-width:760px;margin:0 auto;padding:40px 20px 80px}
h1{font:600 clamp(2.2rem,7vw,3.4rem)/1.05 var(--serif);margin:0 0 8px;letter-spacing:-.02em}
.sub{color:var(--muted);margin:0 0 36px;max-width:52ch}
.item{display:grid;grid-template-columns:44px 120px 1fr;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.item:first-of-type{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.rank{font:600 1.8rem/1 var(--serif);color:var(--gold);text-align:center}
.thumb{width:120px;height:120px;border-radius:10px;object-fit:cover;background:var(--line);display:block}
.ph{display:grid;place-items:center;color:var(--muted);font-size:.8rem}
.info h2{font:600 1.1rem/1.3 var(--serif);margin:0 0 4px}
.price{color:var(--muted);margin:0 0 8px}
.note{color:var(--muted);font-size:.9rem;margin:0 0 10px}
a.btn,button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;text-decoration:none;display:inline-block}
a.btn.primary,button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button.danger{color:var(--danger)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.empty{color:var(--muted);padding:40px 0}
@media(max-width:560px){
  .item{grid-template-columns:30px 84px 1fr;gap:10px}
  .thumb{width:84px;height:84px}
  .rank{font-size:1.3rem}
}