:root{
  --purple:#9146ff; --purple-dark:#772ce8; --ink:#1f2430; --ink-soft:#333a47;
  --muted:#5b6472;
  --line:#e3e6ec; --bg:#f7f7fa; --card:#ffffff; --input-bg:#ffffff;
  --gold:#f5b301;
  --font-head:"Helvetica Neue",Helvetica,Inter,"Segoe UI",Arial,sans-serif;
  --hover-wash:#ece4ff; --card-hover-line:#cfc4f5; --card-shadow:rgba(31,36,48,.10);
  --chk-a:#f0f0f3; --chk-b:#e2e2e8;
  --chip-bg:#f4f1ff;
  --btn-active-bg:#1f2430; --btn-active-fg:#ffffff;
  --selbar-bg:#1f2430;
  --radius:12px;
  color-scheme:light;
}
/* Dark theme (Twitch-family palette). Activated by data-theme="dark" on
   <html>, set before first paint by the inline script in the page head
   (stored fe-theme choice, else the OS prefers-color-scheme). The light
   values above are the original design verbatim; every themed component
   reads the variables, so light stays pixel-identical. The purple header
   gradient band is theme-independent and intentionally untouched. The
   checkerboard tiles become mid-grays so both dark and light artwork
   stay visible against them. Admin pages never get data-theme, so they
   always render with the light values. */
:root[data-theme="dark"]{
  --purple-dark:#a970ff; --ink:#efeff1; --ink-soft:#d6d6da; --muted:#adadb8;
  --line:#2f2f35; --bg:#0e0e10; --card:#18181b; --input-bg:#1f1f23;
  --hover-wash:#2f2545; --card-hover-line:#6441a5; --card-shadow:rgba(0,0,0,.5);
  --chk-a:#4b4b53; --chk-b:#34343b;
  --chip-bg:#26262c;
  --btn-active-bg:#efeff1; --btn-active-fg:#0e0e10;
  --selbar-bg:#26262c;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.45}
h1,h2,h3{font-family:var(--font-head);font-weight:900;letter-spacing:-.02em;text-transform:lowercase}
#modalname,.emote-name{text-transform:none}
a{color:var(--purple-dark);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}

/* header */
.site-header{background:linear-gradient(135deg,#2b1055 0%,#6441a5 55%,#9146ff 100%);color:#fff}
.site-header .wrap{padding-top:22px;padding-bottom:18px;display:flex;align-items:center;gap:24px}
.head-main{flex:1 1 auto;min-width:0}
.head-logo{flex:none;display:block;line-height:0}
.head-logo img{display:block;height:72px;width:auto}
.head-logo:hover{opacity:.92;text-decoration:none}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand h1{margin:0;font-size:34px;letter-spacing:-.02em}
.brand h1 a{color:#fff}
.brand .count{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600}
.tagline{margin:6px 0 0;max-width:720px;color:#e6dcff;font-size:15px}
.topnav{margin-top:12px;display:flex;gap:16px;font-size:14px;align-items:center;flex-wrap:wrap}
.topnav a{color:#fff;opacity:.92;font-weight:600}
.topnav a:hover{opacity:1}
.topnav button.navsel{appearance:none;background:transparent;border:0;padding:0;
  font:inherit;color:#fff;opacity:.92;font-weight:600;cursor:pointer}
.topnav button.navsel:hover{opacity:1;text-decoration:underline}
.topnav button.navsel.active{opacity:1;text-decoration:underline}
#selnavcount{font-weight:700}

/* search + filters */
.toolbar{position:sticky;top:0;z-index:30;background:var(--bg);padding:14px 0 10px;
  border-bottom:1px solid var(--line)}
.searchrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.searchbox{flex:1 1 320px;display:flex;gap:8px}
.searchbox input{flex:1;padding:11px 14px;font-size:16px;border:1px solid var(--line);
  border-radius:10px;background:var(--input-bg)}
.searchbox input:focus{outline:2px solid var(--purple);outline-offset:0;border-color:transparent}
.btn{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{border-color:var(--purple);color:var(--purple-dark)}
.btn.primary{background:var(--purple);border-color:var(--purple);color:#fff}
.btn.primary:hover{background:var(--purple-dark);color:#fff}
.btn.active{background:var(--btn-active-bg);color:var(--btn-active-fg);border-color:var(--btn-active-bg)}
.btn:disabled{opacity:.5;cursor:default}
.cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cats .btn{padding:6px 12px;font-size:13px;border-radius:999px}
.cats .btn.active{background:var(--purple);border-color:var(--purple);color:#fff}
.cats .n{opacity:.65;font-weight:400;font-size:12px}
.letters{display:flex;flex-wrap:wrap;gap:2px;margin-top:10px}
.letters button{appearance:none;border:0;background:transparent;padding:4px 7px;font-size:13px;
  font-weight:700;color:var(--muted);cursor:pointer;border-radius:6px}
.letters button:hover{color:var(--purple-dark);background:var(--hover-wash)}
.letters button.active{background:var(--purple);color:#fff}
.subs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.subs .btn{padding:4px 10px;font-size:12px;border-radius:999px}
/* While a search is active the browse filters are out of scope (search is
   global) — dim them and drop their "active" emphasis so nothing implies
   the results are limited to the selected category/letter. */
body.searching .cats,body.searching .letters,body.searching .subs{opacity:.45}
body.searching .cats .btn.active{background:var(--card);color:var(--ink);border-color:var(--line)}
body.searching .letters button.active{background:transparent;color:var(--muted)}
.gridbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 4px}
.gridbar .btn.small{flex:none}
.btn.small{padding:6px 12px;font-size:13px}
.resultline{margin:0;color:var(--muted);font-size:14px}
.gridctl{display:flex;align-items:center;gap:8px;flex:none}
.sortlbl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.gridbar select{padding:6px 8px;font-size:13px;font-weight:600;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;background:var(--input-bg);cursor:pointer}
/* Theme segmented control (Light | Dark), beside the Size toggle in the
   grid bar; the active side uses the standard .btn.active treatment. */
.segctl{display:inline-flex}
.segctl .btn{border-radius:0}
.segctl .btn:first-child{border-radius:8px 0 0 8px}
.segctl .btn:last-child{border-radius:0 8px 8px 0;margin-left:-1px}

/* homepage "Most downloaded" strip — its cards live in the catalog .grid
   container itself (class "grid topgrid"), so the strip inherits the grid's
   columns, gaps, density rules (body.compact) and mobile breakpoints
   verbatim. There is deliberately no strip-specific layout: with its own
   flex row the strip once degraded to full-width card rows whenever those
   rules didn't reach the browser, while .grid kept working. Only the
   grid's tall bottom padding is trimmed for strip duty. */
.topstrip{margin:18px 0 2px}
.topstrip h2{font-size:18px;margin:0 0 8px}
.topstrip .grid{padding-bottom:2px}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:8px 0 30px}
/* Compact ("Small") density: artwork is a fixed 56x56 box — Twitch's 2x
   emote size — centered in the card; name/meta sit under it as usual. */
body.compact .grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
body.compact .card{padding:8px 6px 6px}
body.compact .card img{width:56px;height:56px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 8px 8px;text-align:center;cursor:pointer;position:relative;
  transition:transform .06s ease, box-shadow .06s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px var(--card-shadow);border-color:var(--card-hover-line)}
.card .imgbox{height:104px;display:flex;align-items:center;justify-content:center;border-radius:8px;
  background:repeating-conic-gradient(var(--chk-a) 0% 25%, var(--chk-b) 0% 50%) 0 0/16px 16px}
body.compact .card .imgbox{width:56px;height:56px;margin:0 auto}
.card img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto}
.card .name{margin-top:8px;font-size:13px;font-weight:600;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em}
.card .meta{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:1px}
.card .dl{font-size:11px;color:var(--muted)}
.card.selected{outline:3px solid var(--purple);outline-offset:-1px}
.card a.cardlink{display:block;color:inherit;text-decoration:none}
.newday{margin:22px 0 2px;font-size:17px}
.newintro{color:var(--muted);margin:4px 0 6px}
.card .check{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:6px;
  border:2px solid var(--purple);background:var(--card);display:none;align-items:center;justify-content:center;
  color:#fff;font-size:14px;line-height:1}
body.selecting .card .check{display:flex}
.card.selected .check{background:var(--purple)}
.loadmore{display:block;margin:4px auto 40px}
.sentinel{height:4px}

/* selection bar */
.selbar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:50;
  background:var(--selbar-bg);color:#fff;border-radius:999px;padding:10px 14px;display:none;
  align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:94vw}
.selbar.show{display:flex}
.selbar .btn{border-color:#4a5160;background:#2c313c;color:#fff}
.selbar .btn.primary{background:var(--purple);border-color:var(--purple)}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(15,12,30,.62);z-index:60;display:none;
  align-items:center;justify-content:center;padding:16px}
.modal-back.show{display:flex}
.modal{background:var(--card);border-radius:16px;max-width:520px;width:100%;padding:22px;position:relative}
.modal .close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:24px;cursor:pointer;color:var(--muted)}
.modal .bigimg{display:flex;align-items:center;justify-content:center;min-height:220px;border-radius:10px;
  background:repeating-conic-gradient(var(--chk-a) 0% 25%, var(--chk-b) 0% 50%) 0 0/20px 20px;padding:16px}
.modal .bigimg img{max-width:100%;max-height:320px;object-fit:contain}
.modal h2{margin:14px 0 4px;font-size:22px}
.modal .meta{color:var(--muted);font-size:14px}
.tagchips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.tagchips button{border:1px solid var(--line);background:var(--chip-bg);border-radius:999px;
  padding:3px 10px;font-size:12px;cursor:pointer;color:var(--purple-dark)}
.modal .actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* content pages */
.page{padding:26px 0 50px;max-width:820px}
.page h2{font-size:26px;margin:0 0 14px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px}
.faq-item h3{margin:0 0 6px;font-size:16px}
.faq-item p{margin:0;color:var(--ink-soft);white-space:pre-wrap}
.policy-body{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.policy-body p{white-space:pre-wrap}

/* footer */
.site-footer{border-top:1px solid var(--line);margin-top:10px;background:var(--card)}
.site-footer .wrap{padding:18px 16px 26px;color:var(--muted);font-size:13px}
.site-footer nav{display:flex;gap:16px;margin-bottom:8px;font-weight:600}

/* admin */
.adminbar{background:var(--ink);color:#fff}
.adminbar .wrap{display:flex;gap:18px;align-items:center;padding:10px 16px;font-size:14px}
.adminbar a{color:#fff;font-weight:600}
.adminbar .spacer{flex:1}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:18px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat .v{font-size:26px;font-weight:800}
.stat .k{color:var(--muted);font-size:13px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 16px}
.panel h3{margin:0 0 10px;font-size:16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:600}
.bar-row{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:13px}
.bar-row .lbl{width:150px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .bar{height:12px;background:var(--purple);border-radius:3px;min-width:2px}
.bar-row .num{color:var(--muted)}
form .field{margin-bottom:12px}
form label{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
form input[type=text],form input[type=password],form select,form textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
form input[type=file]{font-size:14px}
.warn{background:#fff4d6;border:1px solid #ecc94b;border-radius:10px;padding:12px 14px;margin-bottom:14px}
.error{background:#fde8e8;border:1px solid #f0b4b4;border-radius:10px;padding:12px 14px;margin-bottom:14px}
.ok{background:#e3f7e3;border:1px solid #9ed69e;border-radius:10px;padding:12px 14px;margin-bottom:14px}
.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.block-head h3{margin:0}
.block-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.ok ul,.error ul{margin:6px 0 0;padding-left:20px}
.thumb{width:44px;height:44px;object-fit:contain;border-radius:6px;
  background:repeating-conic-gradient(#f0f0f3 0% 25%, #e2e2e8 0% 50%) 0 0/10px 10px}
.loginbox{max-width:380px;margin:60px auto}
@media (max-width:640px){
  .brand h1{font-size:26px}
  .site-header .wrap{gap:14px}
  .head-logo img{height:54px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}