:root{--bg:#f4f6f8;--fg:#18212b;--muted:#5b6672;--card:#fff;--line:#dde3e9;--accent:#0f8b8d;--accent-fg:#fff;
 --ok:#2f9e5b;--bad:#d33a3a;--bad-bg:#ffe3e3;--perk-bg:#e8f6f0}
@media (prefers-color-scheme:dark){:root{--bg:#0f1418;--fg:#e8edf2;--muted:#9aa6b2;--card:#182027;--line:#2a343d;--accent:#3cc4c6;--accent-fg:#0c1316;
 --bad-bg:#40191b;--perk-bg:#17302a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.top{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--card);border-bottom:1px solid var(--line)}
.brand{font-weight:800;text-decoration:none;color:var(--fg);font-size:1.15rem;letter-spacing:.2px}
nav{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;align-items:center}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover,nav a[aria-current=page]{color:var(--fg)}
nav a[aria-current=page]{font-weight:600}
main{max-width:960px;margin:0 auto;padding:1rem}
h1{margin:.4rem 0 .4rem;line-height:1.2}h2{margin:.2rem 0 .6rem}h3{margin:0 0 .3rem}
.lead{color:var(--muted);font-size:1.1rem;margin:.2rem 0 1.2rem}
.small{font-size:.85rem;color:var(--muted)}
.text{white-space:pre-line;margin:.2rem 0 .6rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:1rem 0}
.pad{padding:1rem 1.25rem}
.narrow{max-width:460px;margin:2rem auto}
.narrow.wide{max-width:640px}
.flash{padding:.7rem 1rem;border-radius:8px;margin:.5rem 0;background:var(--card);border:1px solid var(--line)}
.flash.ok{border-color:var(--ok)}.flash.error{border-color:var(--bad);background:var(--bad-bg)}
label{display:block;margin:.7rem 0;font-weight:600}
label.check{font-weight:400}
input,select,textarea{display:block;width:100%;padding:.55rem .65rem;margin-top:.25rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:inherit;font:inherit}
input[type=checkbox]{display:inline;width:auto;margin-right:.4rem}
label .small{display:block;font-weight:400;margin-top:.2rem}
button,.btn{font:inherit;cursor:pointer;padding:.5rem .9rem;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);text-decoration:none;display:inline-block}
button:disabled{opacity:.4;cursor:default}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}
button.ghost,.btn.ghost{background:transparent}
button.link{border:0;background:none;padding:0;color:var(--muted);text-decoration:underline}
.danger{color:var(--bad)}
form.inline{display:inline}
form.stack{margin-top:1rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem}

.hero{padding:2rem 0 .5rem}
.hero h1{font-size:2.3rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin:1rem 0}
.tile{display:block;padding:1.1rem 1.25rem;background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--fg);text-decoration:none;transition:transform .12s,border-color .12s}
.tile:hover{transform:translateY(-2px);border-color:var(--accent)}
.tile h2{margin:.3rem 0}.tile p{margin:0;color:var(--muted)}
.tile .emoji{font-size:1.7rem}

.group{margin-top:1.8rem;color:var(--muted);font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}
.cards{display:grid;gap:1rem}
.item{display:flex;gap:1rem;padding:1rem;margin:0}
.item .body{flex:1;min-width:0}
.thumb{width:96px;height:96px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid var(--line);flex:none}
.thumb.mini{width:40px;height:40px}
.thumb.preview{width:120px;height:120px;margin:.3rem 0}
.perks{background:var(--perk-bg);border-radius:10px;padding:.6rem .8rem;margin:.5rem 0}
.perks p{margin:.1rem 0 0}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.5rem}
.code{display:inline-flex;gap:.5rem;align-items:center}
code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.15rem .45rem}
.badge{font-size:.7rem;font-weight:600;padding:.1rem .5rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);vertical-align:middle}
.status-active{color:var(--ok);border-color:var(--ok)}

.links{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.link-row{display:flex;justify-content:space-between;align-items:center;margin:0;padding:.9rem 1.1rem;text-decoration:none;color:var(--fg)}
.link-row:hover{border-color:var(--accent)}

.admin-list{list-style:none;padding:0;margin:.5rem 0 0}
.admin-list li{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.5rem 0;border-top:1px solid var(--line)}
.admin-list .grow{flex:1;min-width:8rem}

@media (max-width:560px){
 .item{flex-direction:column}.thumb{width:72px;height:72px}.two{grid-template-columns:1fr}
 .hero h1{font-size:1.8rem}
}