:root { --primary:#24493F; --secondary:#A9592A; --sand:#F7E8D0; --ink:#1d2b26; }
* { box-sizing:border-box }
body { margin:0; font-family:"Avenir Next",system-ui,sans-serif; color:var(--ink); background:#fbf6ec }
header { background:var(--primary); color:#fff; padding:12px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap }
header a, header button.link { color:#fff; text-decoration:none; background:none; padding:0 }
#auth { display:flex; gap:16px }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:20px; margin-right:auto }
.brand img { width:36px; height:36px }
main { max-width:960px; margin:0 auto; padding:24px 16px }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px }
.card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 1px 3px #0002; display:flex; flex-direction:column; gap:8px }
.emoji { font-size:48px; background:var(--sand); border-radius:8px; text-align:center; padding:16px }
.price { font-weight:600; color:var(--primary) }
p { margin:0 0 12px }
button, .button { background:var(--secondary); color:#fff; border:0; border-radius:8px; padding:10px 14px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block }
.primary { background:var(--primary) }
.actions { display:flex; gap:8px; margin-top:16px }
table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden }
td, th { padding:10px 12px; text-align:left; border-bottom:1px solid #eee; vertical-align:top }
code { word-break:break-all }
.meta { color:#5b6b64; font-size:14px }