/* BuyTheme.online — clean store styles */
:root{--ink:#0f172a;--mut:#64748b;--acc:#4f46e5;--line:#e2e8f0;--bg:#f8fafc;--card:#fff;--r:14px}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Inter,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(1140px,92%);margin:0 auto}
.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hdr-in{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0}
.logo{font-size:1.35rem;font-weight:800}.logo span{color:var(--acc)}.logo i{font-style:normal;color:var(--mut);font-weight:500}
.hdr nav{display:flex;gap:1.2rem;font-weight:600;font-size:.92rem}.hdr nav a:hover{color:var(--acc)}
.hero{padding:4rem 0 3rem}.hero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.12;letter-spacing:-1px}.hero em{font-style:normal;color:var(--acc)}
.hero p{color:var(--mut);margin-top:.8rem;font-size:1.05rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;padding-bottom:4rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(15,23,42,.1)}
.shot{display:block;aspect-ratio:16/10;background:linear-gradient(135deg,#eef2ff,#f5f3ff);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot-ph{display:flex;align-items:center;justify-content:center;height:100%;font-size:3rem;font-weight:800;color:var(--acc)}
.shot.big{border:1px solid var(--line);border-radius:var(--r)}
.card-b{padding:1.2rem}
.card-b h3{font-size:1.05rem;margin-bottom:.3rem}.card-b p{color:var(--mut);font-size:.88rem;min-height:2.6em}
.row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:.8rem}
.price{font-size:1.25rem;font-weight:800}.price.big{font-size:2rem}
.lic{font-size:.72rem;background:#eef2ff;color:var(--acc);padding:.2rem .7rem;border-radius:999px;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.3rem;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;font-size:.9rem;border:0;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-2px)}.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn.pay{background:var(--acc);width:100%;margin-top:.6rem}.btn.pay:hover{background:#4338ca}
.inp{width:100%;padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:.9rem;margin-bottom:.8rem}
.inp:focus{outline:none;border-color:var(--acc)}
.detail{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;padding:3rem 0}
.desc{color:var(--mut);margin:.8rem 0 1.2rem}
.ticks li{padding-left:1.4rem;position:relative;margin-bottom:.4rem;font-size:.92rem}
.ticks li::before{content:'✓';position:absolute;left:0;color:#0e9f6e;font-weight:800}
.buybox{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:1.4rem;margin-top:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.lickey{display:inline-block;background:#0f172a;color:#5eead4;padding:.7rem 1.2rem;border-radius:10px;font-size:1.05rem;letter-spacing:1px;margin:.6rem 0}
.tbl{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);border-collapse:collapse;margin-top:1rem;overflow:hidden}
.tbl th{background:#f1f5f9;text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
.tbl th,.tbl td{padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.9rem}
.tbl a{color:var(--acc);font-weight:600}
.st-paid{color:#0e9f6e}.st-pending{color:#d97706}.st-failed{color:#e02424}
.login{max-width:380px;margin:2rem auto;padding:2rem}
label{display:block;font-size:.8rem;font-weight:700;color:var(--mut);margin-bottom:.3rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.flash{background:#fef3c7;border:1px solid #f59e0b;color:#92400e;padding:.7rem 1rem;border-radius:10px;margin-bottom:1rem}
.ftr{border-top:1px solid var(--line);padding:1.5rem 0;color:var(--mut);font-size:.85rem;text-align:center}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr}.detail{grid-template-columns:1fr}.two{grid-template-columns:1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}

/* ===== Premium landing + admin ===== */
.reveal{opacity:0;transform:translateY(26px);transition:.6s ease}
.reveal.in{opacity:1;transform:none}
.hero{padding:5rem 0 4rem;background:radial-gradient(600px 300px at 80% 0%,#eef2ff,transparent),radial-gradient(500px 300px at 10% 100%,#f0f9ff,transparent)}
.tag{display:inline-block;background:var(--ink);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:.3rem .9rem;border-radius:999px;margin-bottom:1.2rem}
.hero .btn{margin-right:.6rem}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;padding-bottom:3.5rem}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;transition:.25s}
.feat:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(15,23,42,.1);border-color:var(--acc)}
.feat b{display:block;margin-bottom:.3rem}.feat p{color:var(--mut);font-size:.85rem}
.sec-h{margin-bottom:2rem}.sec-h .k{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--acc);background:#eef2ff;padding:.25rem .8rem;border-radius:999px;margin-bottom:.6rem}
.sec-h h2{font-size:1.9rem;letter-spacing:-.5px}
.grid .card{animation:none}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;position:relative}
.step i{display:inline-flex;width:38px;height:38px;border-radius:50%;background:var(--acc);color:#fff;font-style:normal;font-weight:800;align-items:center;justify-content:center;margin-bottom:.8rem}
.step b{display:block}.step p{color:var(--mut);font-size:.88rem}
.cta{background:linear-gradient(120deg,#4f46e5,#7c3aed);margin-top:4rem;padding:3.5rem 0;text-align:center;color:#fff}
.cta h2{font-size:2rem}.cta p{opacity:.85;margin:.5rem 0 1.4rem}
.btn.light{background:#fff;color:#4f46e5}
.ftr{background:#0f172a;color:#94a3b8;padding-top:3rem;text-align:left}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2rem}
.ftr .logo{color:#fff}.ftr h4{color:#fff;font-size:.85rem;margin-bottom:.7rem;text-transform:uppercase;letter-spacing:1px}
.ftr a,.ftr span{display:block;font-size:.88rem;margin-bottom:.4rem;color:#94a3b8}.ftr a:hover{color:#fff}
.ftr-bot{border-top:1px solid rgba(255,255,255,.08);padding:1.1rem 0;font-size:.8rem;text-align:center}
/* admin */
body.adm{display:flex;min-height:100vh;background:#f1f5f9}
.aside{width:230px;background:#0f172a;color:#cbd5e1;padding:1.4rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex-shrink:0}
.aside .logo{color:#fff;margin-bottom:1.6rem;display:block}
.aside nav a{display:block;padding:.6rem .9rem;border-radius:9px;font-size:.9rem;font-weight:600;color:#cbd5e1}
.aside nav a:hover,.aside nav a.on{background:#1e293b;color:#fff}
.adm-main{flex:1;min-width:0}
.adm-top{background:#fff;border-bottom:1px solid var(--line);padding:1rem 1.8rem;display:flex;justify-content:space-between;align-items:center}
.adm-body{padding:1.8rem}
@media(max-width:860px){.feats{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}.ftr-grid{grid-template-columns:1fr 1fr}body.adm{flex-direction:column}.aside{width:100%;flex-direction:row;flex-wrap:wrap}.aside nav{display:flex;gap:.4rem;flex-wrap:wrap}}
@media(max-width:560px){.feats{grid-template-columns:1fr}}

/* ===== dark mode + polish ===== */
html[data-theme="dark"]{--ink:#e8ecf4;--mut:#9aa7bd;--line:#26314a;--bg:#0d1321;--card:#141c31}
html[data-theme="dark"] body{background:var(--bg)}
html[data-theme="dark"] .hdr,html[data-theme="dark"] .card,html[data-theme="dark"] .feat,html[data-theme="dark"] .step,html[data-theme="dark"] .buybox,html[data-theme="dark"] .tbl,html[data-theme="dark"] .adm-top{background:var(--card)}
html[data-theme="dark"] .hero{background:radial-gradient(600px 300px at 80% 0%,#1a2140,transparent),radial-gradient(500px 300px at 10% 100%,#0f2a3a,transparent)}
html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] .tbl th{background:var(--bg)}
html[data-theme="dark"] .inp{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .shot{background:#1a2340}
html[data-theme="dark"] .sec-h .k{background:#1a2140;color:#818cf8}
html[data-theme="dark"] .aside{background:#0a0f1c}body.adm{background:var(--bg)}
.tt{background:none;border:1.5px solid var(--line);color:var(--ink);width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:1rem}
.tt:hover{border-color:var(--acc);color:var(--acc)}
body{transition:background .3s,color .3s}
.card,.feat,.step{will-change:transform}

/* live demo preview iframe in cards */
.shot{position:relative}
.liveprev{width:1200px;height:750px;border:0;pointer-events:none;transform:scale(.34);transform-origin:top left}
.shot.big .liveprev{transform:scale(.42)}

.card-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* login modal */
.lmodal{display:none;position:fixed;inset:0;z-index:999;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1rem}
.lbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2rem;max-width:400px;width:100%;position:relative;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.lclose{position:absolute;top:.8rem;right:1rem;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--mut)}

/* category filter bar */
.catbar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.catbar a{padding:.45rem 1.15rem;border-radius:999px;border:1.5px solid var(--line);font-size:.85rem;font-weight:700;color:var(--mut);transition:.15s}
.catbar a:hover{border-color:var(--acc);color:var(--acc)}
.catbar a.on{background:var(--acc);border-color:var(--acc);color:#fff}