@font-face{font-family:Masala;font-weight:700;font-display:swap;src:url(/assets/MasalaOffc-Bold.ttf) format("truetype")}
@font-face{font-family:Masala;font-weight:900;font-display:swap;src:url(/assets/MasalaOffc-Black.ttf) format("truetype")}
@font-face{font-family:Myriad;font-weight:400;font-display:swap;src:url(/assets/MyriadPro-Regular.ttf) format("truetype")}
@font-face{font-family:Myriad;font-weight:700;font-display:swap;src:url(/assets/Myriad_Pro_Bold.ttf) format("truetype")}
:root{
  --smoke:rgba(52,58,66,.72);--smoke-strong:rgba(40,45,52,.86);--smoke-line:rgba(255,255,255,.14);
  --ink:#263238;--ink-soft:#5b6770;--white:#fff;
  --red:#ff001e;--red-dk:#cc0018;--green:#09c12d;--green-dk:#079021;--blue:#2c94b5;--blue-dk:#22728c;
  --fb:#3b5998;--cash:#0a9c47;--coins:#c88a00;--vip:#d6197a;
  --card-r:18px;--display:Masala,"Arial Rounded MT Bold",Arial,sans-serif;--body:Myriad,"Segoe UI",system-ui,sans-serif;
  color-scheme:light}
*{box-sizing:border-box}html,body{margin:0}
body{font:15px/1.4 var(--body);color:var(--white);background:#7cc4ee;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sky{position:fixed;inset:0;z-index:-1;background:#7cc4ee url(/assets/bg.webp) center bottom/cover no-repeat}
.sky:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(80,160,220,.05) 0%,rgba(30,40,55,.18) 70%,rgba(30,40,55,.35) 100%)}
@media (max-width:700px){.sky{background-image:url(/assets/bg-sm.webp)}}
a{color:#bfe3ff}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
[hidden]{display:none!important}

/* header */
.top{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(40,45,52,.82),rgba(40,45,52,.7));backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid var(--smoke-line);box-shadow:0 4px 18px rgba(0,0,0,.18)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand img{height:44px;width:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.brand-sub{font:900 17px/1 var(--display);color:#fff;text-transform:uppercase;letter-spacing:.02em;text-shadow:0 3px 2px rgba(0,0,0,.6);white-space:nowrap}
nav{display:flex;gap:6px}
nav a{font:700 14px/1 var(--display);color:#fff;text-decoration:none;padding:10px 16px;border-radius:40px;text-shadow:0 1px 1px rgba(0,0,0,.5);transition:background .15s}
nav a:hover{background:rgba(255,255,255,.14)}
nav a.on{background:linear-gradient(180deg,var(--red),var(--red-dk));box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.3)}

/* hero + filters */
main{padding:28px 16px 30px}
.hero-title{text-align:center;margin:6px 0 20px}
.hero-title h1{font:900 clamp(24px,4vw,38px)/1.05 var(--display);margin:0;text-transform:uppercase;text-shadow:0 3px 2px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.15)}
.hero-title p{margin:8px auto 0;max-width:560px;font-size:16px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.panel{background:var(--smoke);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--smoke-line);border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.search-panel{padding:18px;max-width:980px;margin:0 auto 18px}
.search-row{display:flex;gap:10px}
.pill-input{flex:1;height:52px;border:0;border-radius:40px;background:#f5f5f5;color:#414141;font:400 18px var(--body);padding:0 24px;text-align:center;box-shadow:inset 0 2px 4px rgba(0,0,0,.12);outline:none}
.pill-input::placeholder{color:#8b8b8b;text-transform:uppercase;letter-spacing:.02em}
.pill-input:focus{box-shadow:inset 0 2px 4px rgba(0,0,0,.12),0 0 0 3px rgba(255,255,255,.55)}
.selects{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:12px}
.select{appearance:none;-webkit-appearance:none;width:100%;height:40px;border-radius:40px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E") right 14px center no-repeat;color:#fff;font:700 13.5px var(--body);padding:0 30px 0 14px;cursor:pointer;text-overflow:ellipsis}
.select:hover{background-color:rgba(255,255,255,.2)}.select:focus{outline:2px solid #fff;outline-offset:1px}
.select.set{background-color:rgba(44,148,181,.85);border-color:transparent}
.select option,.select optgroup{color:#222;background:#fff}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;max-width:980px;margin:0 auto 18px;padding:0 6px}
.count{font:700 15px var(--display);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.chip{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--display);color:#fff;text-decoration:none;background:linear-gradient(180deg,var(--blue),var(--blue-dk));border-radius:40px;padding:6px 14px;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.3);text-shadow:0 1px 1px rgba(0,0,0,.4)}
.chip button{border:0;background:rgba(0,0,0,.25);color:#fff;border-radius:50%;width:18px;height:18px;line-height:18px;padding:0;cursor:pointer;font-size:13px}
a.chip:hover{filter:brightness(1.1)}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);text-decoration:none;border-radius:var(--card-r);overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.08),0 8px 22px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s;animation:pop .35s ease both}
.card:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 6px 0 rgba(0,0,0,.08),0 14px 30px rgba(0,0,0,.25)}
.card:focus-visible{outline:3px solid #fff;outline-offset:2px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.thumb{aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#ffffff 0%,#eaf5fd 55%,#cfe8f8 100%);border-bottom:1px solid #e4eef5}
.thumb img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;transition:transform .2s}
.card:hover .thumb img{transform:scale(1.06)}
.badges{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:4px;justify-content:space-between;pointer-events:none}
.badge{font:900 10.5px/1 var(--display);letter-spacing:.03em;color:#fff;padding:5px 9px;border-radius:40px;text-shadow:0 1px 1px rgba(0,0,0,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.25)}
.badge.vip{background:linear-gradient(180deg,#ff3d9a,#c0106a)}
.badge.store{background:linear-gradient(180deg,var(--green),var(--green-dk))}
.card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.name{font:700 14px/1.22 var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.44em}
.price{display:inline-flex;align-items:center;gap:6px;font:900 14px/1 var(--display);margin-top:auto}
.price img{width:18px;height:18px}
.price.cash{color:var(--cash)}.price.coins{color:var(--coins)}.price.none{color:var(--ink-soft);font:700 12.5px var(--body)}
.noimg{color:#8aa0ad;font:700 12px var(--body);text-transform:uppercase}
.skel .thumb,.skel .name{background:linear-gradient(90deg,#e8f1f7,#f7fbfe,#e8f1f7);background-size:200% 100%;animation:sk 1.1s infinite}
.skel .name{border-radius:6px;color:transparent}
@keyframes sk{to{background-position:-200% 0}}
.loader{display:flex;justify-content:center;padding:28px 0 8px;min-height:80px}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.end{font:700 14px var(--display);text-shadow:0 1px 3px rgba(0,0,0,.7);text-align:center}
.empty{padding:40px 20px;text-align:center}
.empty h2{font:900 24px var(--display);margin:0 0 8px;text-shadow:0 2px 2px rgba(0,0,0,.5)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 30px;border:0;border-radius:40px;font:700 16px var(--display);color:#fff;text-decoration:none;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.5);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.3),0 4px 10px rgba(0,0,0,.15);background:linear-gradient(180deg,var(--red),var(--red-dk));transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}
.btn.green{background:linear-gradient(180deg,var(--green),var(--green-dk))}.btn.blue{background:linear-gradient(180deg,var(--blue),var(--blue-dk))}

/* item page */
.crumbs{margin:0 0 14px;font:700 14px var(--body);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.crumbs a{color:#fff;text-decoration:none;opacity:.9}.crumbs a:hover{text-decoration:underline}
.detail{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:22px;align-items:start}
.showcase{background:#fff;border-radius:26px;padding:14px;box-shadow:0 6px 0 rgba(0,0,0,.08),0 14px 34px rgba(0,0,0,.25)}
.showcase .thumb{border-radius:18px;border:0}
.info{padding:22px 24px}
.info h1{font:900 clamp(22px,3vw,30px)/1.1 var(--display);margin:0 0 10px;text-shadow:0 2px 2px rgba(0,0,0,.45)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.tags .badge{font-size:11.5px;padding:6px 11px}
.price-big{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:40px;padding:8px 20px 8px 10px;margin-bottom:18px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.price-big img{width:30px;height:30px}.price-big span{font:900 22px var(--display)}
.price-big.cash span{color:var(--cash)}.price-big.coins span{color:var(--coins)}.price-big.none span{color:var(--ink-soft);font-size:16px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:0}
.facts div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 14px}
.facts dt{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.04em}.facts dd{margin:3px 0 0;font:700 16px var(--body)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.section-title{font:900 22px var(--display);margin:34px 0 14px;text-shadow:0 2px 2px rgba(0,0,0,.5)}

/* themes + tools */
.page-head{text-align:center;margin:6px 0 20px}
.page-head h1{font:900 clamp(24px,4vw,36px)/1.1 var(--display);margin:0;text-transform:uppercase;text-shadow:0 3px 2px rgba(0,0,0,.55)}
.page-head p{margin:8px 0 0;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.theme-grid a{display:flex;justify-content:space-between;align-items:center;background:#fff;color:var(--ink);text-decoration:none;border-radius:40px;padding:10px 16px;box-shadow:0 3px 0 rgba(0,0,0,.08),0 6px 14px rgba(0,0,0,.15);transition:transform .12s}
.theme-grid a:hover{transform:translateY(-2px)}
.theme-grid b{font:900 15px var(--display);color:var(--red-dk)}.theme-grid span{font:700 13px var(--body);color:var(--ink-soft)}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;max-width:900px;margin:0 auto}
.tools .panel{padding:22px 24px;text-align:center}
.tools h2{font:900 20px var(--display);margin:0 0 6px;text-shadow:0 2px 2px rgba(0,0,0,.4)}
.tools p{margin:0 0 14px;opacity:.9}
.tools label{display:block;font:700 12px var(--body);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;opacity:.85}
.out{margin-top:16px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--cash);border-radius:40px;padding:10px 20px;font:900 20px var(--display)}
.out img{width:24px;height:24px}.out small{font:700 13px var(--body);color:var(--ink-soft)}

/* footer + misc */
.foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;padding-top:10px;padding-bottom:30px;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.foot img{opacity:.85;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.foot-links a{color:#fff;font-weight:700}
.totop{position:fixed;right:18px;bottom:18px;z-index:30;width:48px;height:48px;border-radius:50%;border:0;color:#fff;font-size:18px;cursor:pointer;background:linear-gradient(180deg,var(--red),var(--red-dk));box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.3)}
:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:980px){.selects{grid-template-columns:repeat(3,minmax(0,1fr))}.detail{grid-template-columns:1fr}.showcase{max-width:420px;margin:0 auto;width:100%}}
@media (max-width:640px){
  .top-in{height:auto;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;justify-content:center;gap:6px}
  .brand img{height:34px}.brand-sub{font-size:14px}
  nav a{padding:8px 12px;font-size:13px}
  main{padding-top:18px}
  .search-panel{padding:12px;border-radius:18px}
  .pill-input{height:46px;font-size:16px}
  .selects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .name{font-size:13px}.info{padding:18px}
}

/* add-to-template button on cards */
.add{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;color:#fff;font:900 22px/1 var(--display);background:linear-gradient(180deg,var(--green),var(--green-dk));box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 2px 6px rgba(0,0,0,.25);opacity:.92;transition:transform .12s,opacity .12s}
.add:hover{transform:scale(1.12);opacity:1}.add.done{background:linear-gradient(180deg,var(--blue),var(--blue-dk))}
.card .card-body{padding-right:48px}
@media (hover:hover){.card .add{opacity:0}.card:hover .add,.card:focus-within .add{opacity:.95}}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);z-index:60;background:var(--smoke-strong);color:#fff;border:1px solid var(--smoke-line);border-radius:40px;padding:12px 22px;font:700 14px var(--body);box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:all .2s;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}.toast a{color:#9fe0ff}

/* templates page */
.kind-tabs{display:flex;justify-content:center;gap:8px;margin:0 0 16px}
.kind-tab{border:0;cursor:pointer;font:700 15px var(--display);color:#fff;padding:11px 22px;border-radius:40px;background:var(--smoke);border:1px solid var(--smoke-line);text-shadow:0 1px 1px rgba(0,0,0,.5)}
.kind-tab.on{background:linear-gradient(180deg,var(--red),var(--red-dk));border-color:transparent;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.3)}
.tpl-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:18px;align-items:start}
.tpl-edit{padding:16px}
.board-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.board-tab{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font:700 13px var(--body);padding:7px 14px;border-radius:40px;cursor:pointer}
.board-tab small{opacity:.7;margin-left:4px}.board-tab.on{background:#fff;color:var(--ink)}.board-tab.new{border-style:dashed}
.board-tab.drop{outline:3px solid #9fe0ff}
.tpl-toolbar{display:grid;grid-template-columns:1fr 170px;gap:8px}
.pill-input.sm{height:42px;font-size:15px;text-align:left;padding:0 18px}
.tpl-hint{font-size:13px;opacity:.9;margin:10px 4px}
.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;min-height:120px}
.slots.paint{grid-template-columns:repeat(4,minmax(0,1fr))}
.slot{position:relative;aspect-ratio:1/1.12;background:#fff;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 4px 6px;cursor:grab;box-shadow:0 3px 8px rgba(0,0,0,.2);transition:transform .1s}
.slot:hover{transform:translateY(-2px)}.slot.dragging{opacity:.4}.slot.drop{outline:3px solid #9fe0ff}
.slot img{width:100%;flex:1;min-height:0;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.slot-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 11px var(--display);color:#fff;background:linear-gradient(180deg,var(--red),var(--red-dk));border-radius:40px;padding:3px 8px}
.slots.paint .slot-tag{background:linear-gradient(180deg,var(--blue),var(--blue-dk))}
.slot-tag.empty{background:#e8eef2!important;color:#7a8a94;font-family:var(--body);font-weight:700}
.slot.ghost{cursor:default;background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.4);box-shadow:none;color:#fff;font:700 12px var(--body);text-align:center;justify-content:center;padding:8px;grid-column:span 2;aspect-ratio:auto}
.slot.ghost:hover{transform:none}
.tpl-add{margin-top:14px}
.tpl-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px;max-height:330px;overflow:auto;padding:2px}
.mini{border:0;background:#fff;border-radius:12px;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);font:700 11px/1.15 var(--body);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.mini:hover{outline:3px solid var(--green)}.mini img{width:70px;height:70px;object-fit:contain;mix-blend-mode:multiply}
.mini span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center}
.tpl-preview{position:sticky;top:84px}
.preview-frame{background:#fff;border-radius:22px;padding:10px;box-shadow:0 6px 0 rgba(0,0,0,.08),0 14px 34px rgba(0,0,0,.25)}
.preview-frame canvas{display:block;width:100%;height:auto;border-radius:14px}
.actions.center{justify-content:center}
.btn.sm{height:38px;padding:0 18px;font-size:14px}.btn:disabled{opacity:.45;cursor:default;filter:none}
/* dialog */
.dlg{border:0;border-radius:22px;padding:0;width:min(420px,92vw);background:var(--smoke-strong);color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.dlg::backdrop{background:rgba(10,20,30,.45);backdrop-filter:blur(2px)}
.dlg form{padding:20px 22px}
.dlg-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dlg-head img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:14px;padding:4px}
.dlg-head h3{font:900 17px/1.2 var(--display);margin:0}
.dlg label{display:block;font:700 12px var(--body);text-transform:uppercase;letter-spacing:.05em;opacity:.85;margin:12px 0 6px}
.dlg-row{display:flex;gap:8px;justify-content:space-between;margin-top:14px}
.dlg-row .btn{flex:1}
.link{background:none;border:0;color:#9fe0ff;font:700 13px var(--body);cursor:pointer;padding:6px 2px;text-decoration:underline}
.select.dark{background-color:rgba(255,255,255,.12)}
.dlg-foot{text-align:center;margin:14px 0 0;font-size:13px}.dlg-foot a{color:#9fe0ff}
@media (max-width:980px){.tpl-layout{grid-template-columns:1fr}.tpl-preview{position:static;max-width:520px;margin:0 auto;width:100%}}
@media (max-width:640px){.slots{grid-template-columns:repeat(4,minmax(0,1fr))}.slots.paint{grid-template-columns:repeat(2,minmax(0,1fr))}.tpl-toolbar{grid-template-columns:1fr}.kind-tab{padding:9px 14px;font-size:13px}}