/* ============================================================
   assets/site.css — storefront + client area
   Dark / Light via [data-theme], daily accent via --ac (inc/front.php)
============================================================ */
:root,[data-theme=dark]{
  --bg:#0f1218;--bg2:#141821;--card:#191e28;--card2:#202634;--in:#121620;--bd:#283042;--bd2:#222938;
  --tx:#e8ebf1;--tx2:#bfc5d2;--mut:#8a93a6;--hov:#1f2533;--shadow:0 8px 28px rgba(0,0,0,.35);
  --ok:#4ade80;--okbg:#0f2519;--okbd:#1f5136;--bad:#f87171;--badbg:#2a1517;--badbd:#5a2327;
  --info:#6cb4ff;--infobg:#14202e;--infobd:#1f3a55;--warn:#fbbf24;--warnbg:#2a2110;color-scheme:dark}
[data-theme=light]{
  --bg:#f4f6fa;--bg2:#ffffff;--card:#ffffff;--card2:#f2f4f8;--in:#ffffff;--bd:#e0e5ee;--bd2:#edf0f5;
  --tx:#161c28;--tx2:#3a4356;--mut:#6b7486;--hov:#f3f6fb;--shadow:0 8px 26px rgba(20,30,60,.08);
  --ok:#15803d;--okbg:#e8f7ee;--okbd:#b6e3c6;--bad:#c62828;--badbg:#fdecec;--badbd:#f4c2c2;
  --info:#1d5fb8;--infobg:#e8f1fc;--infobd:#bcd6f5;--warn:#a16207;--warnbg:#fdf6e3;color-scheme:light}
:root{--ac:#f05a28;--ac2:#d9481a;--ac3:#f59e0b;--acs:#f05a281f;--r:12px}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
     font-size:14.5px;line-height:1.6;transition:background .2s,color .2s}
a{color:var(--ac);text-decoration:none}
img{max-width:100%}
.wrap,.container{max-width:1280px;margin:0 auto;padding:0 18px}
.center{text-align:center;margin-top:24px}
.muted{color:var(--mut);font-size:13px}
.green{color:var(--ok)}.red{color:var(--bad)}.orange{color:var(--warn)}
[hidden]{display:none!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--ac);color:#fff;padding:10px 20px;border-radius:9px;
     font-weight:600;font-size:14px;border:0;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--ac2);transform:translateY(-1px)}
.btn-o{background:transparent;border:1px solid var(--bd);color:var(--tx2)}
.btn-o:hover{background:var(--card2);color:var(--tx);border-color:var(--ac)}
.btn-full{width:100%}.btn-sm{padding:7px 14px;font-size:13px}.btn-lg{padding:13px 22px;font-size:15.5px;margin-top:18px}

/* ---------- top strip ---------- */
.topstrip{background:var(--bg2);border-bottom:1px solid var(--bd2);font-size:12.5px;color:var(--mut)}
.topstrip .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px;flex-wrap:wrap}
.ts-left,.ts-right{display:flex;gap:16px;align-items:center}
.ts-left a,.ts-left span{color:var(--mut)}
.ts-soc{color:var(--mut);display:inline-flex}.ts-soc:hover{color:var(--ac)}
.dd{position:relative}
.dd-btn{background:none;border:0;color:var(--tx2);font:inherit;cursor:pointer;padding:4px 2px}
.dd-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:170px;background:var(--card);border:1px solid var(--bd);
         border-radius:10px;box-shadow:var(--shadow);padding:6px;display:none;z-index:80}
.dd.open .dd-menu{display:block}
.dd-menu a{display:block;padding:8px 12px;border-radius:7px;color:var(--tx2);font-size:13.5px}
.dd-menu a:hover,.dd-menu a.on{background:var(--acs);color:var(--ac)}
.dd-head{padding:8px 12px 10px;font-weight:700;border-bottom:1px solid var(--bd2);margin-bottom:4px}

/* ---------- main header ---------- */
.mainhead{background:var(--bg2);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:60;box-shadow:0 2px 14px rgba(0,0,0,.06)}
.mh-in{display:flex;align-items:center;gap:22px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;color:var(--tx);font-weight:800;font-size:19px;flex-shrink:0}
.logo img{max-height:44px;width:auto}
.logo-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--ac),var(--ac3));color:#fff;
           display:grid;place-items:center;font-size:19px;box-shadow:0 6px 16px var(--acs)}
.hsearch{flex:1;display:flex;max-width:720px;border:2px solid var(--ac);border-radius:11px;overflow:hidden;background:var(--in)}
.hsearch select{border:0;background:var(--card2);color:var(--tx2);padding:0 12px;font:inherit;font-size:13.5px;max-width:170px;outline:none;border-inline-end:1px solid var(--bd)}
.hsearch input{flex:1;border:0;background:transparent;color:var(--tx);padding:0 14px;height:44px;font:inherit;outline:none;min-width:0}
.hsearch button{border:0;background:var(--ac);color:#fff;padding:0 20px;cursor:pointer;display:grid;place-items:center}
.hsearch button:hover{background:var(--ac2)}
.mh-act{display:flex;gap:10px;align-items:center;margin-inline-start:auto}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--tx2);cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{border-color:var(--ac);color:var(--ac)}
[data-theme=dark] .i-moon,[data-theme=light] .i-sun{display:none}
.user-btn{padding:0;border-radius:50%}
.ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac3));color:#fff;display:grid;place-items:center;font-weight:700}
.bal-chip{background:var(--okbg);border:1px solid var(--okbd);color:var(--ok);padding:7px 13px;border-radius:20px;font-size:13px;font-weight:700;white-space:nowrap}
.burger{display:none;background:none;border:0;color:var(--tx);font-size:22px;cursor:pointer;padding:4px}
.show-sm{display:none!important}

/* ---------- category nav + mega menu ---------- */
.catnav{border-top:1px solid var(--bd2);background:var(--bg2)}
.cn-in{display:flex;align-items:center;gap:4px;min-height:48px;overflow-x:auto;scrollbar-width:none}
.cn-in>a,.cn-all{padding:13px 15px;color:var(--tx2);font-weight:600;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent}
.cn-in>a:hover,.cn-in>a.on{color:var(--ac);border-bottom-color:var(--ac)}
.cn-all{background:var(--ac);color:#fff!important;border-radius:9px;padding:9px 16px;margin-inline-end:8px;display:inline-block}
.mega-wrap{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--card);border-top:1px solid var(--bd);box-shadow:var(--shadow);
      display:none;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding:22px max(18px,calc((100vw - 1280px)/2 + 18px));z-index:70}
.mega-wrap:hover .mega{display:grid}
.mega-col a{display:flex;justify-content:space-between;gap:8px;padding:5px 0;color:var(--tx2);font-size:13.5px}
.mega-col a span{color:var(--mut);font-size:12px}
.mega-col a:hover{color:var(--ac)}
.mega-h{font-weight:700;color:var(--tx)!important;border-bottom:1px solid var(--bd2);margin-bottom:6px;padding-bottom:8px!important}

/* ---------- announcements ---------- */
.annc{background:var(--acs);border-bottom:1px solid var(--bd2)}
.annc-in{display:flex;align-items:center;gap:12px;min-height:40px;overflow:hidden}
.annc-lbl{background:var(--ac);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:6px;flex-shrink:0}
.annc-track{overflow:hidden;flex:1;white-space:nowrap}
.annc-run{display:inline-block;animation:marq 40s linear infinite}
.annc-run:hover{animation-play-state:paused}
.annc-run span{margin-inline-end:48px;color:var(--tx2);font-size:13.5px}
.annc-run a,.annc-run b{color:var(--tx);font-weight:700}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir=rtl] .annc-run{animation-name:marqr}
@keyframes marqr{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ---------- hero ---------- */
.hero2{padding:22px 0 10px}
.hero-grid{display:grid;grid-template-columns:1fr 330px;gap:16px}
.hero-grid.no-side{grid-template-columns:1fr}
.slider{position:relative;border-radius:16px;overflow:hidden;width:100%;aspect-ratio:1920/600;min-height:0;height:auto;background:var(--card2)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s;background-size:cover;background-position:center;display:flex;align-items:center;color:#fff}
.slide.on{opacity:1;z-index:1}
.slide.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 70%)}
.sl-0{background:linear-gradient(120deg,var(--ac2),var(--ac) 45%,var(--ac3))}
.sl-1{background:linear-gradient(120deg,#111827,#1f2937 40%,var(--ac))}
.sl-2{background:linear-gradient(120deg,var(--ac3),var(--ac2))}
.slide:not(.has-img)::after{content:"";position:absolute;right:-60px;top:-60px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
.sl-txt{position:relative;z-index:1;padding:40px 54px;max-width:640px}
.sl-txt h2{font-size:36px;line-height:1.15;margin:0 0 12px;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.sl-txt p{font-size:16px;opacity:.95;margin:0 0 20px}
.sl-txt .btn{background:#fff;color:#111}
.sl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;border:0;
        background:rgba(0,0,0,.35);color:#fff;font-size:24px;cursor:pointer;line-height:1}
.sl-nav:hover{background:rgba(0,0,0,.6)}
.sl-nav.prev{left:14px}.sl-nav.next{right:14px}
.sl-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:3}
.sl-dots i{width:9px;height:9px;border-radius:9px;background:rgba(255,255,255,.5);cursor:pointer;transition:.2s}
.sl-dots i.on{width:26px;background:#fff}
.side-bn{display:grid;grid-auto-rows:1fr;gap:16px}
.side-bn a{border-radius:14px;background-size:cover;background-position:center;min-height:100px;position:relative;overflow:hidden;
           display:flex;align-items:flex-end;background-color:var(--card2)}
.side-bn a.sb-plain{background:linear-gradient(135deg,var(--card2),var(--acs));border:1px solid var(--bd)}
.side-bn a span{position:relative;z-index:1;padding:12px 14px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.side-bn a.sb-plain span{color:var(--tx);text-shadow:none}
.side-bn a:not(.sb-plain)::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 65%)}
.side-bn b{display:block;font-size:15px}.side-bn small{font-size:12px;opacity:.9}
.side-bn a:hover{transform:translateY(-2px);transition:.2s}

.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.stats-strip div{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px;text-align:center}
.stats-strip b{display:block;font-size:24px;color:var(--ac);line-height:1.2}
.stats-strip span{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.6px}

/* ---------- sections ---------- */
.sec2{padding:30px 18px 6px}
.sec2-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sec2-head h2{margin:0;font-size:22px;position:relative;padding-inline-start:14px}
.sec2-head h2::before{content:"";position:absolute;inset-inline-start:0;top:4px;bottom:4px;width:4px;border-radius:4px;background:var(--ac)}
.type-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.type-card{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r);background:var(--card);border:1px solid var(--bd);color:var(--tx);transition:.2s}
.type-card:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:var(--shadow)}
.tc-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.tc-imei .tc-ic{background:linear-gradient(135deg,#14b8a6,#0f766e)}
.tc-server .tc-ic{background:linear-gradient(135deg,#f97316,#c2410c)}
.tc-remote .tc-ic{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.tc-file .tc-ic{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.tc-t{flex:1}.tc-t b{display:block;font-size:15.5px}.tc-t small{color:var(--mut)}
.tc-go{color:var(--mut);font-size:20px}.type-card:hover .tc-go{color:var(--ac)}
[dir=rtl] .tc-go{transform:scaleX(-1)}
.grp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:14px}
.grp-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;background:var(--card);border:1px solid var(--bd);color:var(--tx)}
.grp-card:hover{border-color:var(--ac)}
.grp-card img{width:44px;height:44px;border-radius:9px;object-fit:cover;flex-shrink:0}
.grp-card b{display:block;font-size:13px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.grp-card small{color:var(--mut);font-size:11.5px}

.ptabs{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.ptabs button{border:1px solid var(--bd);background:var(--card);color:var(--tx2);padding:7px 16px;border-radius:20px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600}
.ptabs button.on,.ptabs button:hover{background:var(--ac);border-color:var(--ac);color:#fff}
.vsw{display:inline-flex;border:1px solid var(--bd);border-radius:9px;overflow:hidden;background:var(--card)}
.vsw a{padding:6px 11px;color:var(--mut);font-size:16px;line-height:1.2}
.vsw a+a{border-inline-start:1px solid var(--bd)}
.vsw a.on{background:var(--ac);color:#fff}

/* ---------- product cards ----------
   Fixed column count (not auto-fill) — taaki last row ke thode cards bhi
   upar wali row jitne hi size ke rahein, bade stretch ho kar na dikhein. */
.plist.v-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1200px){.plist.v-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.plist.v-grid{grid-template-columns:repeat(3,1fr)}}
.pcard{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.pcard:hover{border-color:var(--ac);box-shadow:var(--shadow);transform:translateY(-3px)}
.pimg{position:relative;display:block;aspect-ratio:1/1;background:var(--card2);overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.pcard:hover .pimg img{transform:scale(1.05)}
.ptype{position:absolute;top:10px;inset-inline-start:10px;font-size:10px;font-weight:800;letter-spacing:.6px;padding:3px 8px;border-radius:6px;color:#fff}
.t-imei{background:#0f766e}.t-server{background:#c2410c}.t-remote{background:#6d28d9}.t-file{background:#1d4ed8}
.pfeat{position:absolute;top:10px;inset-inline-end:10px;background:#f59e0b;color:#fff;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px}
.pbody{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1}
.pgrp{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname{color:var(--tx);font-weight:600;font-size:13.8px;line-height:1.4;margin:3px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.pname:hover{color:var(--ac)}
.ptime{font-size:12px;color:var(--mut)}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px}
.pprice{color:var(--ac);font-size:17px;font-weight:800}
.pprice small{font-size:10px;font-weight:600}
.pbuy{display:inline-flex;align-items:center;gap:6px;background:var(--acs);color:var(--ac);border-radius:9px;padding:8px 11px;font-weight:700;font-size:13px}
.pbuy:hover{background:var(--ac);color:#fff}
.pbuy span{display:none}
/* list view */
.plist.v-list{display:grid;gap:12px}
.v-list .pcard{flex-direction:row;align-items:stretch}
.v-list .pimg{width:130px;flex-shrink:0;aspect-ratio:auto;min-height:110px}
.v-list .pbody{padding:14px 18px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"g f" "n f" "t f";align-items:center;column-gap:18px}
.v-list .pbody>.pgrp{display:block;grid-area:g}.v-list .pbody>.pname{display:-webkit-box;grid-area:n;min-height:0;font-size:15px}
.v-list .pbody>.ptime{display:block;grid-area:t}
.v-list .pfoot{grid-area:f;flex-direction:column;align-items:flex-end;padding:0;margin:0}
.v-list .pbuy span{display:inline}
/* compact table (search) */
.ctable{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.ct-h,.ct-r{display:grid;grid-template-columns:1fr 150px 130px 90px;gap:12px;align-items:center;padding:10px 16px}
.ct-h{background:var(--card2);color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.ct-r{border-top:1px solid var(--bd2);color:var(--tx)}
.ct-r:hover{background:var(--hov)}
.ct-n{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;min-width:0}
.ct-n img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex-shrink:0}
.ct-n small{display:block;color:var(--mut);font-weight:400;font-size:11.5px}
.ct-t{color:var(--mut);font-size:12.5px}
.ct-p{color:var(--ac);font-weight:800}
.ct-b{background:var(--acs);color:var(--ac);text-align:center;border-radius:8px;padding:6px;font-weight:700;font-size:12.5px}
.ct-r:hover .ct-b{background:var(--ac);color:#fff}
.v-compact.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.v-compact .pbody{padding:8px 10px}.v-compact .pname{font-size:12.5px}.v-compact .ptime,.v-compact .pgrp{display:none}
.v-compact .pprice{font-size:14px}

/* ---------- features ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.feat{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:22px;text-align:center}
.feat .ic{font-size:28px;width:58px;height:58px;border-radius:50%;background:var(--acs);display:grid;place-items:center;margin:0 auto 10px}
.feat h4{margin:0 0 6px;font-size:15px}.feat p{color:var(--mut);font-size:13px;margin:0}

/* ---------- shop (search) ---------- */
.page2{padding-top:18px;padding-bottom:10px}
.crumbs{font-size:13px;color:var(--mut);margin-bottom:14px}.crumbs a{color:var(--mut)}.crumbs a:hover{color:var(--ac)}
.shop{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.shop-side{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px;position:sticky;top:130px;max-height:calc(100vh - 150px);overflow:auto}
.side-tgl{display:none}
.shop-side h4{margin:4px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut)}
.shop-side h4:not(:first-child){margin-top:18px}
.side-in>a,.glink{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;color:var(--tx2);font-size:13.5px}
.side-in>a:hover,.glink:hover{background:var(--hov)}
.side-in>a.on,.glink.on{background:var(--acs);color:var(--ac);font-weight:700}
.glink span{color:var(--mut);font-size:12px}
.gfilter{margin-bottom:8px}
.shop-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.shop-bar h1{margin:0;font-size:22px;line-height:1.3}
.shop-tools{display:flex;gap:10px;align-items:center}
.shop-tools select{width:auto}

/* ---------- common ui ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:22px;margin-bottom:20px}
.card h3{margin:0 0 16px;font-size:16px}
label{display:block;color:var(--tx2);font-size:13px;margin:14px 0 6px;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{
  width:100%;background:var(--in);border:1px solid var(--bd);border-radius:9px;padding:11px 13px;color:var(--tx);font-size:14px;outline:none;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
input:disabled{opacity:.55}
small{color:var(--mut);font-size:12px;display:block;margin-top:4px}
.alert{padding:12px 16px;border-radius:9px;margin-bottom:18px;font-size:13.5px}
.alert.ok{background:var(--okbg);border:1px solid var(--okbd);color:var(--ok)}
.alert.bad{background:var(--badbg);border:1px solid var(--badbd);color:var(--bad)}
.alert.info{background:var(--infobg);border:1px solid var(--infobd);color:var(--info)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.stat-box{background:var(--card);border:1px solid var(--bd);border-inline-start:4px solid var(--bd);border-radius:var(--r);padding:18px 20px}
.stat-num{font-size:22px;font-weight:800}
.stat-lbl{color:var(--mut);font-size:11.5px;margin-top:5px;text-transform:uppercase;letter-spacing:.5px}
.accent-green{border-inline-start-color:#22c55e}.accent-blue{border-inline-start-color:#38bdf8}
.accent-orange{border-inline-start-color:var(--ac)}.accent-purple{border-inline-start-color:#a78bfa}
.table-scroll{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;min-width:580px}
.data-table th{text-align:start;padding:11px 14px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--bd);white-space:nowrap}
.data-table td{padding:12px 14px;border-bottom:1px solid var(--bd2);font-size:13px;color:var(--tx2);vertical-align:top}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr:hover td{background:var(--hov)}
.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700}
.badge.green{background:var(--okbg);color:var(--ok)}.badge.red{background:var(--badbg);color:var(--bad)}
.badge.orange{background:var(--warnbg);color:var(--warn)}.badge.grey{background:var(--card2);color:var(--mut)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pager{display:flex;gap:6px;justify-content:center;margin:28px 0;flex-wrap:wrap}
.pager a,.pager span{min-width:38px;text-align:center;padding:8px 12px;border-radius:9px;background:var(--card);border:1px solid var(--bd);color:var(--tx2);font-size:13px}
.pager a:hover{border-color:var(--ac);color:var(--ac)}
.pager .cur{background:var(--ac);border-color:var(--ac);color:#fff}
.empty{text-align:center;color:var(--mut);padding:60px 20px;background:var(--card);border:1px dashed var(--bd);border-radius:var(--r)}
.empty h3{color:var(--tx);margin:0 0 6px}
.ctabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:22px;border-bottom:1px solid var(--bd)}
.ctabs a{padding:11px 18px;color:var(--mut);font-size:13.5px;border-bottom:2px solid transparent;font-weight:600}
.ctabs a.on{color:var(--ac);border-bottom-color:var(--ac)}
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:70vh;padding:40px 18px}
.auth-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:34px;width:100%;max-width:430px;box-shadow:var(--shadow)}
.auth-card h1{font-size:23px;margin:0 0 6px}
.cms-page h1{margin-top:0}
.cms-body{color:var(--tx2);line-height:1.8}

/* ---------- order page ---------- */
.page{padding-top:24px;padding-bottom:10px}
.order-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:20px;align-items:start}
.order-img{width:120px;height:120px;border-radius:16px;overflow:hidden;margin-bottom:14px;background:var(--card2)}
.order-img img{width:100%;height:100%;object-fit:cover}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.6px;padding:3px 9px;border-radius:6px;color:#fff;background:var(--mut)}
.tag-imei{background:#0f766e}.tag-server{background:#c2410c}.tag-remote{background:#6d28d9}.tag-file{background:#1d4ed8}
.order-title{font-size:22px;margin:10px 0 4px;line-height:1.35}
.order-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:18px 0}
.order-stats div{background:var(--card2);border-radius:10px;padding:12px}
.order-stats b{display:block;font-size:16px}.order-stats b.price{color:var(--ac);font-size:19px}
.order-stats span{color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px}
.order-desc{color:var(--tx2);font-size:13.5px;border-top:1px solid var(--bd2);padding-top:14px;line-height:1.75;word-break:break-word}
.order-form h3{margin-bottom:4px}
.req{color:var(--bad)}
.imei-wrap{position:relative}
.imei-wrap input{padding-inline-end:60px;letter-spacing:1.5px;font-family:ui-monospace,Menlo,Consolas,monospace}
.imei-count{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--mut);font-weight:700}
.imei-count.ok{color:var(--ok)}
.total-row{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:14px 16px;background:var(--acs);border-radius:10px}
.total-row b{font-size:20px;color:var(--ac)}
.done-card{max-width:560px;margin:30px auto;text-align:center;background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:40px 28px;box-shadow:var(--shadow)}
.done-tick{width:74px;height:74px;border-radius:50%;background:var(--okbg);color:var(--ok);font-size:38px;display:grid;place-items:center;margin:0 auto 14px}
.done-card h2{margin:0 0 20px;font-size:20px}
.row-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.site-main{min-height:50vh}
.sitefoot{background:var(--bg2);border-top:1px solid var(--bd);margin-top:50px;color:var(--mut);font-size:13.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:28px;padding-top:40px;padding-bottom:26px}
.fcol h4{color:var(--tx);margin:4px 0 14px;font-size:15px}
.fcol a,.fcol span{display:block;color:var(--mut);padding:4px 0}
.fcol a:hover{color:var(--ac)}
.fabout p{margin:14px 0}
.fcol .logo{display:flex;padding:0}.fcol .logo span{display:grid;padding:0}.fcol .logo .logo-txt{display:block;color:var(--tx)}
.fsoc{display:flex;gap:9px;flex-wrap:wrap}
.fsoc a{width:38px;height:38px;border-radius:10px;display:grid!important;place-items:center;background:var(--card2);color:var(--tx2);padding:0!important;transition:.2s}
.fsoc a:hover{background:var(--c);color:#fff;transform:translateY(-2px)}
.fpay{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:22px}
.fpay-l{color:var(--tx2);font-weight:600;margin-inline-end:4px}
.paychip{background:var(--card2);border:1px solid var(--bd);color:var(--tx2);padding:5px 12px;border-radius:7px;font-size:12px;font-weight:700}
.fbottom{border-top:1px solid var(--bd2);padding:14px 0;font-size:12.5px}
.fbottom .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fb-links{display:flex;gap:16px}.fb-links a{color:var(--mut)}

.livechat{position:fixed;bottom:22px;inset-inline-end:22px;z-index:90;display:flex;align-items:center;gap:8px;background:var(--ac);color:#fff;
          padding:12px 18px;border-radius:30px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.25);animation:pulse 2.4s infinite}
.livechat:hover{background:var(--ac2)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--acs),0 10px 26px rgba(0,0,0,.25)}50%{box-shadow:0 0 0 12px transparent,0 10px 26px rgba(0,0,0,.25)}}

/* ---------- flash popup ---------- */
.fpop{position:fixed;inset:0;background:rgba(5,8,15,.65);z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .25s}
.fpop.in{opacity:1}
.fpop-box{position:relative;background:var(--card);border-radius:18px;max-width:460px;width:100%;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);transform:scale(.92);transition:transform .25s}
.fpop.in .fpop-box{transform:scale(1)}
.fpop-box img{width:100%;display:block;max-height:340px;object-fit:cover}
.fpop-b{padding:20px 24px 24px;text-align:center}
.fpop-b h3{margin:0 0 8px;font-size:21px}
.fpop-t{color:var(--tx2);margin-bottom:16px}
.fpop-x{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:22px;cursor:pointer;line-height:1;z-index:2}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .side-bn{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .shop{grid-template-columns:1fr}
  .shop-side{position:static;max-height:none}
  .side-tgl{display:block;width:100%;background:none;border:0;color:var(--tx);font:inherit;font-weight:700;text-align:start;cursor:pointer;padding:0}
  .shop-side .side-in{display:none;margin-top:12px}.shop-side.open .side-in{display:block}
  .order-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .mh-in{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .burger{display:block}
  .hsearch{order:5;flex-basis:100%;max-width:none}
  .hsearch select{display:none}
  .hide-sm{display:none!important}.show-sm{display:inline-block!important}
  .catnav{display:none}
  body.nav-open .catnav{display:block}
  body.nav-open .cn-in{flex-direction:column;align-items:stretch}
  .mega{display:none!important}
  .ts-left{display:none}.topstrip .wrap{justify-content:center}
  .slider{min-height:0;aspect-ratio:1920/600;height:auto;border-radius:12px}
  .slide{background-size:cover;background-position:center}
  .slide.has-img .sl-txt{display:none}.slide.has-img::before{display:none}
  .sl-txt p{display:none}
  .sl-nav{display:none}
  .grp-cards{grid-template-columns:1fr 1fr;gap:8px}
  .type-cards{grid-template-columns:1fr 1fr;gap:8px}.type-card{padding:12px;gap:10px}.tc-ic{width:42px;height:42px}.tc-go{display:none}.tc-t b{font-size:13.5px}
  .sl-txt{padding:14px 18px}.sl-txt h2{font-size:18px;margin:0 0 6px}.sl-txt p{font-size:12.5px;margin:0 0 10px}.sl-txt .btn{padding:7px 14px;font-size:12.5px}
  .side-bn{grid-template-columns:1fr 1fr}.side-bn a:nth-child(3){display:none}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .plist.v-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .v-list .pimg{width:90px;min-height:90px}
  .v-list .pbody{grid-template-columns:1fr;grid-template-areas:"g" "n" "t" "f";padding:10px 12px}
  .v-list .pfoot{flex-direction:row;align-items:center;margin-top:6px}
  .ct-h{display:none}
  .ct-r{grid-template-columns:1fr auto;grid-template-areas:"n n" "t p" "b b"}
  .ct-n{grid-area:n}.ct-t{grid-area:t}.ct-p{grid-area:p}.ct-b{grid-area:b}
  .two-col{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .livechat span{display:none}.livechat{padding:14px}
  .bal-chip{font-size:12px;padding:6px 10px}
}

/* ---------- auth split (login / register) ---------- */
.auth-split{display:grid;grid-template-columns:1fr 1fr;max-width:920px;width:100%;background:var(--card);border:1px solid var(--bd);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.auth-split .auth-card{border:0;box-shadow:none;border-radius:0;max-width:none;padding:38px 36px}
.auth-promo{position:relative;padding:38px 34px;color:#fff;background:radial-gradient(700px 360px at 0% 0%,var(--ac3),transparent 60%),linear-gradient(150deg,var(--ac2),#1e1b4b 80%);overflow:hidden}
.auth-promo::after{content:"";position:absolute;right:-90px;bottom:-90px;width:280px;height:280px;border-radius:50%;border:44px solid rgba(255,255,255,.07)}
.ap-logo{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:34px}
.ap-logo .sb-logo{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.ap-logo .sb-logo img{width:100%;height:100%;object-fit:contain;border-radius:11px}
.auth-promo h2{font-size:26px;line-height:1.2;margin:0 0 22px;position:relative;z-index:1}
.auth-promo ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;position:relative;z-index:1}
.auth-promo li{background:rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font-size:14px}
.auth-card label{margin-top:12px}
@media (max-width:760px){.auth-split{grid-template-columns:1fr}.auth-promo{display:none}.auth-split .auth-card{padding:28px 20px}}

/* ============================================================
   v1.6.19 — homepage additions
============================================================ */
.logo template{display:none}
.p-ask{font-size:12.5px!important;color:var(--mut)!important;font-weight:700}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:none}
.how-steps li{position:relative;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:20px 18px}
.how-steps li:not(:last-child)::after{content:"";position:absolute;top:38px;inset-inline-end:-14px;width:14px;height:2px;background:var(--bd)}
.how-steps .hs-n{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--ac),var(--ac3));margin-bottom:12px;font-variant-numeric:tabular-nums}
.how-steps h4{margin:0 0 4px;font-size:15px}.how-steps p{margin:0;color:var(--mut);font-size:13px}
.faq{display:grid;gap:10px;max-width:860px}
.faq details{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:0 18px}
.faq details[open]{border-color:var(--ac)}
.faq summary{cursor:pointer;padding:15px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ac);font-size:20px;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:4px}
.faq details p{margin:0 0 16px;color:var(--tx2)}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 30px;border-radius:16px;color:#fff;
  background:linear-gradient(120deg,var(--ac2),var(--ac) 55%,var(--ac3))}
.cta-band h3{margin:0 0 4px;font-size:22px;color:#fff}.cta-band p{margin:0;opacity:.92}
.cta-act{display:flex;gap:10px;flex-wrap:wrap}
.cta-band .btn{background:#fff;color:var(--ac2)}.cta-band .btn:hover{background:#fff;opacity:.92}
.cta-band .btn-ghost-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.totop{position:fixed;bottom:84px;inset-inline-end:26px;z-index:89;width:42px;height:42px;border-radius:50%;border:1px solid var(--bd);
  background:var(--card);color:var(--tx);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.totop:hover{color:var(--ac);border-color:var(--ac)}
.livechat{color:#fff!important}
@media(max-width:900px){.how-steps{grid-template-columns:1fr 1fr}.how-steps li::after{display:none}}
@media(max-width:560px){.how-steps{grid-template-columns:1fr}.cta-band{padding:22px 18px}.stats-strip{grid-template-columns:1fr 1fr!important}
  .totop{bottom:78px;inset-inline-end:18px}}
@media(prefers-reduced-motion:reduce){.livechat{animation:none}}

/* ============================================================
   v1.6.22 — Add Funds + Payment pages (naya design)
============================================================ */
.pf{max-width:1120px;margin:0 auto;padding:26px 18px 60px}
.pf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pf-head h1{margin:0;font-size:26px;letter-spacing:-.01em}
.pf-head p{margin:4px 0 0;color:var(--mut)}
.pf-bal{display:flex;gap:10px;flex-wrap:wrap}
.pf-bal div{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:9px 14px;min-width:140px}
.pf-bal small{display:block;color:var(--mut);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pf-bal b{font-size:18px;font-variant-numeric:tabular-nums}
.pf-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.pf-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:20px}
.pf-card+.pf-card{margin-top:16px}
.pf-step{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:16px}
.pf-step i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0}
.pf-group{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:14px 0 8px}
.pf-group:first-of-type{margin-top:0}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pm{position:relative;display:flex;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--bd);border-radius:14px;background:var(--card2);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;margin:0}
.pm:hover{border-color:var(--ac);transform:translateY(-1px)}
.pm input{position:absolute;opacity:0;pointer-events:none}
.pm:has(input:checked){border-color:var(--ac);box-shadow:0 0 0 3px var(--acs);background:var(--card)}
.pm:has(input:checked)::after{content:"✓";position:absolute;top:8px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--ac);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.pm img{width:52px;height:36px;object-fit:contain;border-radius:8px;background:#fff;flex-shrink:0}
.pm b{display:block;font-size:14px;line-height:1.25;padding-right:20px;color:var(--tx)}
.pm small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.pm-tag{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:20px;margin-top:5px}
.pm-tag.auto{background:var(--okbg);color:var(--ok)}.pm-tag.man{background:var(--warnbg);color:var(--warn)}
.amt-box{display:flex;align-items:center;border:2px solid var(--bd);border-radius:14px;background:var(--in);padding:0 16px;max-width:380px;transition:border-color .15s}
.amt-box:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
.amt-box span{font-size:24px;font-weight:800;color:var(--mut)}
.amt-box input{border:0!important;box-shadow:none!important;background:transparent!important;font-size:28px;font-weight:800;padding:12px 10px;width:100%;color:var(--tx);font-variant-numeric:tabular-nums}
.amt-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.amt-chips button{border:1.5px solid var(--bd);background:var(--card2);color:var(--tx);border-radius:20px;padding:7px 15px;cursor:pointer;font:inherit;font-weight:700;font-size:13.5px}
.amt-chips button:hover,.amt-chips button.on{border-color:var(--ac);color:var(--ac)}
.amt-hint{font-size:12.5px;color:var(--mut);margin-top:8px}
.pf-sum{position:sticky;top:130px}
.pf-sum h3{margin:0 0 12px;font-size:16px}
.sum-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:14px;color:var(--tx2)}
.sum-row b{color:var(--tx);font-variant-numeric:tabular-nums}
.sum-tot{border-top:1.5px dashed var(--bd);margin-top:6px;padding-top:12px;font-size:15px}
.sum-tot b{font-size:24px;color:var(--ac)}
.sum-note{display:flex;gap:8px;align-items:flex-start;background:var(--okbg);color:var(--ok);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;margin-top:12px}
.sum-note.man{background:var(--warnbg);color:var(--warn)}
.pf-cta{width:100%;margin-top:14px;padding:15px 18px;font-size:16px;border-radius:12px}
.trust{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--mut);font-weight:600}
.hist{display:grid;gap:0}
.hist a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 4px;border-bottom:1px solid var(--bd2);color:var(--tx)}
.hist a:last-child{border-bottom:0}
.hist a:hover{background:var(--hov)}
.hist .h-m{font-weight:700;font-size:14px}.hist .h-s{font-size:12px;color:var(--mut)}
.hist .h-a{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:2px 9px;border-radius:20px}
.pill.paid{background:var(--okbg);color:var(--ok)}.pill.pending,.pill.review{background:var(--warnbg);color:var(--warn)}.pill.failed,.pill.cancelled{background:var(--badbg);color:var(--bad)}

/* payment page */
.pp{max-width:1000px;margin:0 auto;padding:22px 18px 60px}
.pp-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pp-top a{color:var(--tx2);font-weight:600;font-size:14px}
.stepper{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;flex:1;max-width:520px}
.stepper li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--mut);flex:1}
.stepper li i{font-style:normal;width:26px;height:26px;border-radius:50%;border:2px solid var(--bd);display:grid;place-items:center;font-size:12px;flex-shrink:0;background:var(--card)}
.stepper li:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--bd);margin:0 8px;min-width:12px}
.stepper li.done{color:var(--ok)}.stepper li.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.stepper li.done:not(:last-child)::after{background:var(--ok)}
.stepper li.cur{color:var(--tx)}.stepper li.cur i{border-color:var(--ac);color:var(--ac);box-shadow:0 0 0 4px var(--acs)}
.pp-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.pp-main{background:var(--card);border:1px solid var(--bd);border-radius:18px;overflow:hidden}
.pp-hero{padding:20px 22px;background:linear-gradient(135deg,var(--acs),transparent 70%);border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.pp-hero small{display:block;color:var(--mut);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.pp-amt{font-size:36px;font-weight:800;line-height:1.15;color:var(--tx);font-variant-numeric:tabular-nums}
.pp-via{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--tx2);font-size:14px;font-weight:600}
.pp-via img{width:40px;height:26px;object-fit:contain;background:#fff;border-radius:6px}
.pp-timer{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:6px 12px;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.pp-timer.low{color:var(--bad);border-color:var(--badbd)}
.pp-body{padding:20px 22px}
.live{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;font-weight:700;margin-bottom:16px}
.live.pending,.live.review{background:var(--warnbg);color:var(--warn)}
.live.failed,.live.cancelled{background:var(--badbg);color:var(--bad)}
.live small{display:block;font-weight:500;opacity:.85;font-size:12.5px}
.dot{width:12px;height:12px;border-radius:50%;background:currentColor;flex-shrink:0;position:relative}
.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;opacity:.5;animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.pay-qr-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:4px 0 14px}
.pay-qr{background:#fff;padding:12px;border-radius:16px;width:220px;box-shadow:0 6px 22px rgba(0,0,0,.12)}
.pay-qr svg{display:block;width:100%;height:auto}
.pay-qr-wrap>div:last-child{flex:1;min-width:220px}
.pay-amt{font-size:28px;font-weight:800;color:var(--ac);margin:0 0 6px}
.pay-kv{width:100%;border-collapse:collapse;margin:8px 0 14px}.pay-kv td{padding:9px 4px;border-bottom:1px solid var(--bd2)}.pay-kv td:first-child{color:var(--mut);width:42%}
.copyable{cursor:copy;border-bottom:1px dashed var(--mut)}
.pay-apps{font-size:12px;color:var(--mut);margin-top:8px}
.pay-utr{background:var(--card2);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;margin-top:10px}
.pay-utr label{margin-top:10px}.pay-utr label:first-of-type{margin-top:0}
.done-box{text-align:center;padding:30px 10px 10px}
.done-ic{width:84px;height:84px;border-radius:50%;background:var(--okbg);color:var(--ok);display:grid;place-items:center;margin:0 auto 14px;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.done-ic svg{width:44px;height:44px;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .25s forwards}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.done-box h2{margin:0 0 6px;font-size:24px}
.done-box p{margin:0;color:var(--tx2)}
.done-bal{display:inline-block;margin:14px 0 4px;padding:8px 16px;border-radius:20px;background:var(--okbg);color:var(--ok);font-weight:800}
.done-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.done-act .btn{margin:0}
.fail-ic{background:var(--badbg);color:var(--bad)}
.pp-side .pf-card{padding:16px}
.pp-side h4{margin:0 0 10px;font-size:14px}
.how{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13px;color:var(--tx2)}
.how li{display:flex;gap:10px}.how b{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--card2);border:1px solid var(--bd);display:grid;place-items:center;font-size:11px}
.pp-ref{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--bd2)}
.pp-ref:last-child{border-bottom:0}
.pp-ref span{color:var(--mut)}
.pp-cancel{background:none;border:0;color:var(--mut);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;margin-top:12px}
@media(max-width:900px){.pf-grid,.pp-grid{grid-template-columns:1fr}.pf-sum{position:static}.pp-side{order:2}}
@media(max-width:560px){.pf-head h1{font-size:22px}.pp-amt{font-size:30px}.stepper li span{display:none}.pay-qr{width:200px;margin:0 auto}.pay-qr-wrap{justify-content:center}.pm-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dot::after,.done-ic,.done-ic svg{animation:none;stroke-dashoffset:0}}
.pay-utr .btn{white-space:normal;line-height:1.3}

/* v1.6.25 — service variants */
.var-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:4px 0 6px}
.var-opt{position:relative;display:flex;flex-direction:column;gap:3px;padding:11px 12px;border:1.5px solid var(--bd);border-radius:12px;cursor:pointer;
  background:var(--card2);transition:border-color .15s,box-shadow .15s;margin:0!important;font-weight:600}
.var-opt input{position:absolute;opacity:0;pointer-events:none}
.var-opt .vo-l{font-size:13.5px;line-height:1.25}
.var-opt .vo-p{font-size:15px;color:var(--ac)}
.var-opt:hover{border-color:var(--ac)}
.var-opt.on{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
.var-opt.on::after{content:"✓";position:absolute;top:7px;right:9px;font-size:12px;font-weight:800;color:var(--ac)}
.pprice .pfrom{font-size:.72em;font-weight:600;opacity:.7}

/* ============================================================
   PREMIUM DARK  (v1.6.27) — glassy cards, gradient glow, depth
   Sab CSS variables ke upar; light mode safe.
   ============================================================ */
:root{--r:14px;--glow:0 0 0 1px rgba(255,255,255,.04), 0 10px 30px -8px rgba(0,0,0,.5)}
[data-theme=dark]{
  --bg:#0a0c12;--bg2:#0e1119;--card:#141824;--card2:#1a1f2e;--in:#0e1119;
  --bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.05);
  --tx:#eef1f7;--tx2:#c2c9d6;--mut:#7e879b;--hov:#1b2130;
  --shadow:0 18px 50px -12px rgba(0,0,0,.6);
}
/* page-wide premium background: deep base + accent glows */
[data-theme=dark] body{
  background:
    radial-gradient(1200px 600px at 12% -8%, color-mix(in srgb,var(--ac) 16%,transparent), transparent 60%),
    radial-gradient(1000px 560px at 100% 0%, color-mix(in srgb,var(--ac3) 12%,transparent), transparent 55%),
    linear-gradient(180deg,#0b0e15 0%, #0a0c12 100%);
  background-attachment:fixed;
}
[data-theme=dark] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 500px at 50% 120%, color-mix(in srgb,var(--ac) 10%,transparent), transparent 60%);}
.wrap,.mainhead,.catnav,.topstrip,.sitefoot,.container{position:relative;z-index:1}

/* glassy cards */
[data-theme=dark] .card,[data-theme=dark] .pcard,[data-theme=dark] .mega,[data-theme=dark] .dd-menu,
[data-theme=dark] .slider,[data-theme=dark] .done-card,[data-theme=dark] .order-info,[data-theme=dark] .order-form{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--bd);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.card,.pcard{border-radius:var(--r);transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s}

/* gradient accent buttons with glow */
.btn{background:linear-gradient(135deg,var(--ac),var(--ac2));border:0;color:#fff;
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--ac) 70%,transparent);transition:transform .16s, box-shadow .22s, filter .16s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px color-mix(in srgb,var(--ac) 75%,transparent);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-130%);transition:transform .5s}
.btn:hover::after{transform:translateX(130%)}
.btn-o{backdrop-filter:blur(6px)}
[data-theme=dark] .btn-o:hover{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 18%,transparent)}

/* premium product cards */
.pcard:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac) 45%,var(--bd));
  box-shadow:0 24px 50px -16px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb,var(--ac) 30%,transparent)}
.pimg{overflow:hidden}
.pimg img{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pimg img{transform:scale(1.08)}
.pprice{background:linear-gradient(90deg,var(--ac),var(--ac3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.pbuy{background:linear-gradient(135deg,var(--ac),var(--ac2));border:0;color:#fff;transition:transform .16s,box-shadow .2s}
.pbuy:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 8px 18px -6px color-mix(in srgb,var(--ac) 70%,transparent)}
.ptype{backdrop-filter:blur(6px);background:color-mix(in srgb,var(--ac) 22%,rgba(0,0,0,.4));border:1px solid color-mix(in srgb,var(--ac) 35%,transparent)}

/* headings with subtle gradient */
[data-theme=dark] .sec-head h2,[data-theme=dark] .sec-head h1,[data-theme=dark] .order-title{
  background:linear-gradient(92deg,#fff, #c9d2e6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* inputs premium */
input,select,textarea{transition:border-color .18s, box-shadow .18s, background .18s}
[data-theme=dark] input:focus,[data-theme=dark] select:focus,[data-theme=dark] textarea:focus,
[data-theme=dark] .hsearch:focus-within{border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent);outline:none}
[data-theme=dark] .hsearch{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--bd);border-radius:12px}

/* header glass */
[data-theme=dark] .mainhead{background:color-mix(in srgb,var(--bg2) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--bd)}
[data-theme=dark] .icon-btn{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--bd)}
[data-theme=dark] .icon-btn:hover{border-color:var(--ac);color:var(--tx);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 15%,transparent)}

/* stat tiles / chips glow */
[data-theme=dark] .stat{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--bd);border-radius:var(--r)}
.tag,.badge{backdrop-filter:blur(4px)}

/* slider premium */
[data-theme=dark] .slider{box-shadow:var(--shadow)}
.slider .s-btn,.slider button{backdrop-filter:blur(6px)}

/* smooth global */
*{scrollbar-width:thin}
[data-theme=dark] ::-webkit-scrollbar{width:10px;height:10px}
[data-theme=dark] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);background-clip:padding-box}
a,button,.pcard,.card{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}