/* ============================================================
   Template Store — "Royal Porcelain" design system (v2)
   Palette: porcelain #E1DAA824 · ink #0A1830 · violet #1D6FF2
   fuchsia #00B4D8 · coral #F26076 · gold #C9A227
   Glass cards, gradient borders, canvas aurora background.
   ============================================================ */
:root{ --coral:#F26076; --gold:#C9A227; --gold2:#E7C65B;
  --grad-gold:linear-gradient(120deg,#A8841C,#C9A227 45%,#E7C65B);
  --glass:rgba(255,255,255,.82);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--violet);text-decoration:none;transition:color .18s}
a:hover{color:var(--fuchsia);text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{line-height:1.22;letter-spacing:-.015em;color:var(--ink)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* ---------- canvas background ---------- */
.canvas-bg,#bgCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

/* ---------- layout ---------- */
.wrap{margin:0 auto;padding:0 20px}
main.wrap{padding-top:30px;padding-bottom:64px;min-height:62vh;position:relative}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);transition:box-shadow .3s,border-color .3s}
.site-head.scrolled{border-bottom-color:var(--line2)}
.head-in{padding-top:12px;padding-bottom:12px}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.brand-mark{display:inline-flex;transition:transform .3s}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06)}
.brand-name{font-size:22px;}
.brand-name.light{background:none;}
.main-nav{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap}
.main-nav>a{color:var(--ink2);font-weight:500;font-size:15px;padding:8px 12px;position:relative;transition:color .2s,background .2s}
.main-nav>a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.6,0,.2,1)}
.main-nav>a:not(.btn):hover{color:var(--ink)}
.main-nav>a:not(.btn):hover::after{transform:scaleX(1)}
.main-nav>a.btn{color:#fff}
.nav-toggle{margin-left:auto;font-size:19px;line-height:1;color:var(--ink);transition:transform .2s}
.nav-toggle:active{transform:scale(.94)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background-position:0% 0;cursor:pointer;font-size:15px;}
.btn:hover{color:#fff;background-position:95% 0;}
.btn-danger:hover{color:#fff;box-shadow:0 16px 30px -10px rgba(220,38,38,.6)}
.btn[disabled]{opacity:.55;pointer-events:none}

/* Google button */
.btn-google{display:flex;align-items:center;justify-content:center;gap:11px;font-weight:500;transition:transform .18s,box-shadow .25s,border-color .2s;cursor:pointer}
.btn-google:hover{color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh);border-color:rgba(66,133,244,.4);text-decoration:none}
.btn-google:active{transform:scale(.99)}
.g-mark{font-weight:800;font-size:18px;font-family:Arial,sans-serif}
.or-divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;margin:2px 0}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line));display:block}
.or-divider::after{background:linear-gradient(90deg,var(--line),transparent)}

/* remember-me switch */
.remember-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;font-weight:500;color:var(--ink2);cursor:pointer;margin:2px 0 4px}
.switch{position:relative;display:inline-block;}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;cursor:pointer}
.switch .sl::before{content:"";position:absolute;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(10,24,48,.3);}
.switch input:focus-visible + .sl{box-shadow:var(--ring)}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;}
.hero::before{content:"";position:absolute;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;border-radius:15px;padding:1px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero h1{line-height:1.1;margin:0 0 16px;letter-spacing:-.025em}
.hero h1 em{font-style:normal;}
.hero p{max-width:660px;margin:0 auto 24px;font-size:18px}
.hero-search{display:flex;gap:9px;max-width:580px;margin:0 auto 20px;background:#fff;padding:6px;border-radius:999px;box-shadow:var(--sh);border:1px solid var(--line2);transition:box-shadow .25s}
.hero-search:focus-within{box-shadow:var(--sh),var(--ring)}
.hero-search input{flex:1;border:none;padding:10px 16px;font-size:16px;min-width:0;background:transparent;color:var(--ink);font-family:inherit}
.hero-search input:focus{outline:none}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- sections / categories ---------- */
.sec-title{font-size:27px;margin:40px 0 18px;letter-spacing:-.015em;position:relative;display:flex;align-items:center;gap:14px}
.cat-row{display:flex;gap:10px;flex-wrap:wrap}
.cat-chip{background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--line);padding:9px 19px;font-weight:500;color:var(--ink2);box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .25s,color .2s,border-color .2s}
.cat-chip:hover{transform:translateY(-2px);color:var(--violet);border-color:rgba(29,111,242,.5);box-shadow:var(--sh)}

/* ---------- cards / grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);overflow:hidden;position:relative;box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.3,.7,.3,1),box-shadow .35s}
.card::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none;z-index:2}
.card::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;z-index:2}
.card:hover::before{opacity:1}
.card:hover::after{left:140%}
.card-media{display:block;aspect-ratio:4/3;}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb-fallback{display:flex;align-items:center;justify-content:center;height:100%;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.badges{position:absolute;top:11px;left:11px;display:flex;gap:6px;flex-wrap:wrap;z-index:3}
.badge{font-size:10.5px;font-weight:500;padding:4px 10px;color:#fff;letter-spacing:.05em;box-shadow:0 4px 10px rgba(10,24,48,.25);backdrop-filter:blur(4px)}
.b-new{background:linear-gradient(120deg,#1D6FF2,#00B4D8)}
.b-sold{background:rgba(10,24,48,.88)}
.b-exc{background:var(--grad-gold);color:#2E2303;animation:excPulse 2.6s ease-in-out infinite}
@keyframes excPulse{0%,100%{box-shadow:0 4px 10px rgba(201,162,39,.35)}50%{box-shadow:0 4px 18px rgba(201,162,39,.75)}}
.card-body{padding:19px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-body h3{margin:0;}
.card-body h3 a{color:var(--ink);transition:color .2s}
.card-body h3 a:hover{color:var(--violet)}
.card-desc{color:var(--muted);margin:0;flex:1;font-size:14.5px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-weight:500;font-size:17px;}
.price s,.big-price s{color:#DC2626;font-weight:500;margin-right:7px;font-size:.72em}
.price:not(:has(s)){background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.big-price{font-size:32px;font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.big-price s{-webkit-text-fill-color:#DC2626;background:none}
.big-price small{font-size:14px;color:var(--muted);-webkit-text-fill-color:var(--muted);background:none;font-weight:500}

/* ---------- stats ---------- */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);margin:42px 0}
.stat{background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85);padding:22px 18px;text-align:center;box-shadow:var(--sh-sm);position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.stat b,.stat strong{display:block;font-size:27px;font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{color:var(--muted);font-size:13px;font-weight:500}
.stats-band .stat{border-color:rgba(255,255,255,.1);}
.stats-band .stat b,.stats-band .stat strong{background:linear-gradient(120deg,#E7C65B,#F6E27A 55%,#C9A227);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* testimonials */
.testi-grid{align-items:stretch}
.testi{text-align:left}
.testi .stars,.stars{color:var(--gold);font-size:17px;letter-spacing:2px;margin:0}
.testi p{color:var(--ink2)}
.testi strong{color:var(--ink)}

/* faq */
.faq-item{background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:10px;margin:10px 0;box-shadow:var(--sh-sm);transition:box-shadow .25s,border-color .25s}
.faq-item:hover{border-color:var(--line);box-shadow:var(--sh)}
.faq-item summary{font-weight:700;cursor:pointer;color:var(--ink)}
.faq-item p{color:var(--muted);margin:9px 0 3px}

/* newsletter */
.news-band{position:relative;text-align:center;margin-top:46px;overflow:hidden;}
.news-band::before{content:"";position:absolute;inset:0;pointer-events:none}
.news-band h2{margin:0 0 8px;position:relative}
.news-band p{color:rgba(255,255,255,.75);position:relative}
.news-band form{display:flex;justify-content:center;flex-wrap:wrap;position:relative;border-radius:999px;max-width:520px;margin:16px auto 0}
.news-band input{flex:1;padding:11px 18px;border-radius:999px;min-width:min(280px,72vw);font-size:15px;font-family:inherit}

/* ---------- pages / shop ---------- */
.page-title{font-size:34px;margin:8px 0 22px;letter-spacing:-.02em}
.shop-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85);box-shadow:var(--sh-sm);border-radius:11px;padding:12px}
.shop-tools input,.shop-tools select{padding:11px 15px;border:1.5px solid var(--line2);border-radius:11px;font-size:15px;background:#fff;color:var(--ink);font-family:inherit;transition:border-color .2s,box-shadow .2s}
.shop-tools input:focus,.shop-tools select:focus{outline:none;border-color:var(--violet);box-shadow:var(--ring)}

/* ---------- template detail / gallery ---------- */
.detail{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:start}
.gallery{top:96px}
.gal-main img{animation:galIn .45s ease}
@keyframes galIn{from{opacity:.35;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
.gal-nav{display:flex;justify-content:space-between;margin:12px 0}
.gal-thumbs img{width:78px;height:59px;object-fit:cover;cursor:pointer;border:2px solid transparent;opacity:.75;transition:opacity .2s,transform .2s,border-color .2s,box-shadow .2s}
.gal-thumbs img:hover{opacity:1;transform:translateY(-2px)}
.gal-thumbs img.on{border-color:var(--fuchsia);opacity:1;box-shadow:0 0 0 3px rgba(0,180,216,.22)}
.detail-info h1{margin:0 0 8px;font-size:32px}
.rating{color:var(--muted);font-size:14.5px}
.desc{color:var(--ink2)}
.feat-list{padding-left:4px;list-style:none}
.feat-list li{margin:6px 0;padding-left:26px;position:relative;color:var(--ink2)}
.feat-list li::before{content:"✦";position:absolute;left:2px;color:var(--fuchsia);font-size:13px;top:2px}
.detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;align-items:center}
.reviews{margin-top:38px}
.review{background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:10px;padding:16px 20px;margin:11px 0;box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .25s}
.review:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.review p{color:var(--ink2);margin:6px 0}

/* ---------- forms ---------- */
.form-card{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);padding:28px;max-width:520px;margin:20px auto;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh);position:relative}
.form-card::before{content:"";position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:0 0 4px 4px;background:var(--grad)}
.form-card.wide{max-width:780px}
.form-card label{display:flex;flex-direction:column;gap:6px;font-size:14px;}
.form-card input,.form-card textarea,.form-card select{padding:12px 15px;border:1.5px solid var(--line2);border-radius:12px;font-size:15px;font-family:inherit;width:100%;background:rgba(255,255,255,.92);color:var(--ink);transition:border-color .2s,box-shadow .2s,transform .15s}
.form-card input:hover,.form-card textarea:hover,.form-card select:hover{border-color:var(--line)}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{outline:none;border-color:var(--violet);box-shadow:var(--ring)}
.form-card textarea{min-height:100px;resize:vertical}
.form-card label.check{flex-direction:row;align-items:center;gap:9px}
.form-card label.check input{width:auto;accent-color:var(--violet)}
.form-card h3{margin:4px 0 0}
fieldset.gw-choice{border:1.5px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:9px;background:rgba(255,255,255,.55)}
fieldset.gw-choice legend{font-weight:500;padding:0 8px;color:var(--ink)}
.gw-opt{flex-direction:row!important;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line2);border-radius:9px;padding:12px 14px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.gw-opt:hover{border-color:var(--line)}
.gw-opt:has(input:checked){border-color:var(--fuchsia);box-shadow:0 0 0 3px rgba(0,180,216,.16)}
.gw-opt input{width:auto!important;accent-color:var(--violet)}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);overflow:hidden;margin:16px 0;box-shadow:var(--sh-sm)}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--line2);text-align:left;font-size:14px;vertical-align:top;color:var(--ink2)}
.tbl th{color:var(--ink);font-weight:500;letter-spacing:.01em}
.tbl tr{transition:background .18s}
.tbl tr:last-child td{border-bottom:none}

/* ---------- messages ---------- */
.flash{position:relative;display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid rgba(6,64,43,.10);border-radius:10px;padding:14px 46px 18px 15px;margin:0 0 18px;box-shadow:0 18px 38px -18px rgba(6,46,32,.28),0 3px 10px rgba(6,46,32,.06);color:#17352A;font-weight:500;font-size:14.5px;line-height:1.5;overflow:hidden;animation:flashIn .45s cubic-bezier(.21,.9,.3,1.15) both}
.flash-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(5,150,105,.13);color:#059669;margin-top:1px}
.flash.err .flash-ic{background:rgba(220,38,38,.11);color:#DC2626}
.flash.warn .flash-ic,.flash.info .flash-ic{background:rgba(217,119,6,.14);color:#B45309}
.flash-ic svg{width:17px;height:17px}
.flash-tx{flex:1 1 auto;min-width:0;padding-top:4px;overflow-wrap:break-word}
.flash-x{position:absolute;top:9px;right:9px;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:8px;color:#7A8B81;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
.flash-x:hover{background:rgba(6,64,43,.07);color:#17352A}
.flash-x svg{width:15px;height:15px}
.flash-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(6,64,43,.07);pointer-events:none}
.flash-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#047857,#10B981)}
.flash.err .flash-bar i{background:linear-gradient(90deg,#B91C1C,#EF4444)}
.flash.warn .flash-bar i,.flash.info .flash-bar i{background:linear-gradient(90deg,#B45309,#F59E0B)}
.flash.flash-out{opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease}
@keyframes flashIn{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes flashBye{to{opacity:0;visibility:hidden}}
@media (scripting:none){.flash{animation:flashIn .45s ease both,flashBye .5s ease 10s forwards}}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}
@media(max-width:640px){.flash{font-size:14px;padding:13px 42px 17px 13px;gap:10px}}
.notice{background:linear-gradient(120deg,rgba(201,162,39,.14),rgba(231,198,91,.07));border:1px solid rgba(201,162,39,.45);border-radius:10px;padding:19px;margin:18px 0;color:var(--ink2)}
.muted{color:var(--muted)}
small.muted{font-size:12px}

/* ---------- orders / account ---------- */
.order-card{background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:11px;padding:18px 22px;margin:13px 0;box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .25s}
.order-card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.status{font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;background:rgba(201,162,39,.18);color:#7A5C0A;border:1px solid rgba(201,162,39,.4);border-radius:999px;padding:4px 11px}
.st-delivered,.st-paid,.st-completed{background:rgba(16,185,129,.15);color:#065F46;border-color:rgba(16,185,129,.4)}
.st-refunded,.st-cancelled{background:rgba(220,38,38,.12);color:#7F1D1D;border-color:rgba(220,38,38,.35)}
.st-pending{background:rgba(201,162,39,.18);color:#7A5C0A}
.timeline{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.timeline span{background:var(--glass);border:1px solid var(--line2);border-radius:999px;padding:6px 15px;font-size:13px;font-weight:500;color:var(--muted)}
.timeline span.done{background:var(--grad);border-color:transparent;color:#fff;font-weight:500;box-shadow:0 6px 14px -6px rgba(150,50,200,.55)}

/* packages */
.pkg-grid .pkg{background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:13px;padding:28px 24px;box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .35s;position:relative}
.pkg-grid .pkg:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.pkg-grid .pkg h3{margin-top:0}
.pkg.featured{border:1.5px solid rgba(201,162,39,.65);box-shadow:var(--sh)}
.pkg.featured::before{content:"MOST POPULAR";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad-gold);color:#2E2303;font-size:10.5px;font-weight:500;letter-spacing:.07em;padding:4px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(201,162,39,.45);white-space:nowrap}

/* ---------- footer ---------- */
.site-foot{color:#CFC9E4;position:relative;overflow:hidden}
.site-foot::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.site-foot::after{content:"";position:absolute;inset:0;pointer-events:none}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;position:relative;z-index:1}
.foot-grid h4{color:#fff;margin:0 0 14px;position:relative;}
.foot-grid h4::after{content:"";position:absolute;left:0;bottom:0;border-radius:2px;}
.foot-grid a{display:block;color:#B9B2D6;transition:color .2s,transform .2s}
.foot-brand p{font-size:14px;max-width:330px;}
.foot-brand .brand-name{-webkit-text-fill-color:#fff;color:#fff;background:none;font-size:24px}
.foot-social a{display:inline-block;margin-right:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);padding:6px 13px;border-radius:999px}
.foot-social a:hover{transform:translateY(-2px);background:rgba(255,255,255,.13)}
.foot-bar{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;padding-bottom:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#9790BC;position:relative;z-index:1}

/* ---------- admin ---------- */
.admin-shell{display:grid;align-items:start}
.admin-side{display:flex;flex-direction:column;position:sticky;overflow:hidden}
.admin-side::before{content:"";position:absolute;top:0;}
.admin-side a{font-weight:500;transition:background .2s,color .2s,transform .2s;position:relative}
.admin-side a:hover{text-decoration:none;}
.admin-main h3{margin-top:26px}
.chart{width:100%;background:var(--glass);border:1px solid rgba(255,255,255,.9);border-radius:11px;margin:12px 0 22px;box-shadow:var(--sh-sm);padding:8px}
.img-admin{display:flex;gap:14px;flex-wrap:wrap}
.img-admin>div{background:rgba(255,255,255,.8);border:1px solid var(--line2);border-radius:9px;padding:9px;width:154px;box-shadow:var(--sh-sm)}
.img-admin img{width:100%;height:84px;object-fit:cover;border-radius:9px}
form.inline,.inline{display:inline}

/* ---------- responsive ---------- */
@media(max-width:1024px){
}
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr}
  .gallery{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static;flex-direction:row;flex-wrap:wrap}
  .stats-band{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .main-nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding:12px 0 4px;gap:4px}
  body.nav-open .main-nav{display:flex;animation:flashIn .3s ease}
  .main-nav>a{padding:11px 12px}
  .main-nav>a:not(.btn)::after{display:none}
  .head-in{flex-wrap:wrap;gap:10px}
  .brand-name{font-size:20px}
  .hero{padding:40px 20px;border-radius:22px}
  .hero-search{flex-direction:column;border-radius:20px}
  .hero-search .btn{width:100%}
  .news-band form{border-radius:20px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bar{flex-direction:column;gap:6px}
  .form-card{padding:22px 18px}
  .tbl{display:block;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* === v2.1: centered auth forms + hero showcase === */
.page-title.center{text-align:center}
.form-card label.remember-row{flex-direction:row;align-items:center;justify-content:flex-start;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);border:1px solid var(--line2);color:var(--ink2);font-weight:500;font-size:13px;padding:7px 14px;box-shadow:0 4px 14px rgba(10,24,48,.08);margin-bottom:20px}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.hero h1 em{background-size:200% 100%;animation:gradShift 6s ease-in-out infinite alternate}
@keyframes gradShift{from{background-position:0% 50%}to{background-position:100% 50%}}
.hero-chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.hero-chips span{background:rgba(255,255,255,.8);border:1px solid var(--line2);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:500;color:var(--ink2)}
.hero-show{display:flex;justify-content:center;align-items:flex-start;padding:0 8px}
.show-card{position:relative;display:block;width:31%;overflow:hidden;border:1px solid rgba(255,255,255,.95);transition:transform .35s cubic-bezier(.2,.8,.3,1.2),box-shadow .35s;background:#fff}
.show-card img{width:100%;object-fit:cover;object-position:top;display:block}
.show-card.sc-c{width:36%;z-index:2;transform:translateY(-8px);animation-delay:1.2s}
.show-card.sc-r{animation-delay:2.1s}
.show-card:hover{transform:rotate(0deg) translateY(-6px) scale(1.04);z-index:3;}
.show-tag{position:absolute;background:rgba(10,24,48,.82);backdrop-filter:blur(6px);color:#fff;font-weight:500;letter-spacing:.04em;}
.show-tag b{margin-left:4px}
@media (max-width:700px){
  .show-card.sc-l,.show-card.sc-r{display:none}
}
@media (prefers-reduced-motion: reduce){.show-card,.hero h1 em,.pulse-dot{animation:none}}

/* === v2.2: 100vh hero, no search, marquee + scroll cue === */
.hero{min-height:calc(100svh - 98px);display:flex;flex-direction:column;justify-content:center;margin-bottom:44px}
.scroll-cue{text-decoration:none;flex:none}
.mq-track{display:flex;gap:34px;width:max-content;align-items:center;white-space:nowrap;font-weight:500;letter-spacing:.14em;font-size:13px;color:var(--ink2);animation:mqMove 32s linear infinite}
.mq-track i{color:var(--gold);font-style:normal;font-size:11px}
@keyframes mqMove{to{transform:translateX(-50%)}}
@media (max-width:700px){
  .hero{min-height:calc(100svh - 92px);}
}
@media (prefers-reduced-motion: reduce){.mq-track,.scroll-cue span{animation:none}}

/* === v2.3: hero exact first-screen fit === */
.hero{padding-top:30px}
.hero h1{font-size:clamp(34px,5vw,52px)}
.hero p{margin-bottom:18px}
.show-card img{aspect-ratio:16/10.2}
@media (max-width:700px){
  .hero p{margin-bottom:16px}
  .scroll-cue{height:38px}
}

/* === v2.3b: mobile first-screen exact fit === */
@media (max-width:700px){
  .hero{padding-top:24px}
  .hero h1{font-size:29px}
  .hero p{margin-bottom:12px}
  .hero .btn{padding:11px 20px}
  .hero-show{margin-top:12px}
  .scroll-cue{display:none}
}

@media (max-width:700px){ .hero-badge{margin-bottom:10px} .hero-chips{margin-top:10px} }
.hero{align-items:center}
.hero-show,.hero-marquee{align-self:stretch}

/* === v2.4: hero WITHOUT panel card + mobile hero polish === */
.hero{-webkit-backdrop-filter:none;}
@media (max-width:700px){
  .hero{padding:22px 4px 0}
  .hero-badge{font-size:11.5px;padding:6px 12px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .hero h1{line-height:1.13;letter-spacing:-.02em;margin-bottom:12px}
  .hero p{font-size:15px;line-height:1.55;padding:0 8px}
  .hero-cta{flex-direction:row;flex-wrap:nowrap;gap:9px;width:100%}
  .hero-cta .btn{flex:1;padding:12px 6px;font-size:14px;white-space:nowrap}
  .hero-chips{flex-wrap:nowrap;justify-content:center}
  .show-card.sc-c{box-shadow:0 20px 44px rgba(10,24,48,.28)}
  .show-tag{padding:7px 12px;}
}
.hero::before{inset:-70px -30px;}
.admin-side a{color:var(--ink2);border-radius:8px;padding:8px 11px;font-size:14px}
.admin-side a:hover{background:#F1EDFA;color:var(--ink);transform:none}
.admin-side a:first-child{color:var(--ink)}
.admin-main .tbl,.admin-main .form-card,.admin-main .stat{box-shadow:none}
@media (max-width:900px){ .admin-shell{grid-template-columns:1fr} .admin-side{position:static;flex-direction:row;flex-wrap:wrap} .admin-main{padding:16px} }
a.btn.btn-ghost:hover{color:var(--fuchsia)}

/* === v2.5: hero polish — no overlaps, richer showcase === */
.hero-chips{position:relative;z-index:3}
.hero-show{position:relative;z-index:1;margin-top:34px}
.show-card{animation:none}
.show-card.sc-c{animation:floatY 6s ease-in-out infinite alternate}
@keyframes floatY{from{transform:translateY(-10px)}to{transform:translateY(0px)}}
.show-card.sc-l{transform:rotate(-5deg) translateY(18px) scale(.97)}
.show-card.sc-r{transform:rotate(5deg) translateY(18px) scale(.97)}
.show-card{box-shadow:0 22px 48px rgba(10,24,48,.20)}
.show-badge{position:absolute;top:12px;left:12px;z-index:2;color:#fff;font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;}
.show-tag{font-size:13.5px;padding:7px 13px;left:12px;bottom:12px}
.hero-show::before{content:"";position:absolute;left:50%;top:52%;width:72%;height:78%;transform:translate(-50%,-50%);filter:blur(28px);z-index:-1;pointer-events:none}
@media (max-width:700px){
  .hero{padding-top:22px}
  .hero h1{font-size:30px}
  .hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:430px;margin:16px auto 0}
  .hero-chips span{display:block;text-align:center;font-size:11px;letter-spacing:-.01em;font-weight:500;padding:8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(10,24,48,.07)}
  .hero-chips span:nth-child(n+3){display:block}
  .hero-show{margin-top:22px;padding:0}
  .show-card.sc-c{width:100%;animation:none;transform:none}
  .show-card.sc-c img{aspect-ratio:16/10}
  .show-badge{top:10px;left:10px;font-size:10.5px;padding:5px 10px}
  .show-tag{font-size:13px;left:10px;bottom:10px}
  .scroll-cue{margin:16px auto 10px}
}
@media (prefers-reduced-motion: reduce){.show-card.sc-c{animation:none}}

/* === v2.6: gallery lightbox (full-screen image viewer) === */
.gal-main{cursor:zoom-in}
.gal-zoom{position:absolute;right:12px;bottom:12px;background:rgba(10,24,48,.78);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:500;padding:6px 11px;pointer-events:none}
.lightbox{position:fixed;inset:0;z-index:999;background:rgba(12,7,26,.96);display:flex;align-items:center;justify-content:center;animation:lbIn .22s ease}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96vw;max-height:92svh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.55);animation:lbZoom .25s ease}
@keyframes lbIn{from{opacity:0}}
@keyframes lbZoom{from{transform:scale(.96);opacity:.6}}
.lb-close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.10);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;padding:0}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.10);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;padding:0}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:13px;font-weight:500;padding:6px 14px;}
@media (max-width:700px){.lb-nav{width:42px;height:42px;font-size:26px}.lb-prev{left:8px}.lb-next{right:8px}.lb-close{top:10px;right:10px;width:42px;height:42px}}

/* === v3.0: "Azure Trust" re-theme — royal blue/cyan/teal + gold, designed buttons, footer redesign === */
h1,h2,h3,.brand-name,.btn,.sec-title,.foot-grid h4{font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif}
.btn{font-weight:500;letter-spacing:.01em;}
.btn-amber:hover{background-position:95% 0;}
.btn-ghost{border:1.5px solid rgba(29,111,242,.38);backdrop-filter:none}
a.btn.btn-ghost{color:var(--ink)}
.btn-sm{font-size:13.5px}
.show-tag b{color:#FFC53D}
/* footer redesign */
.site-foot{background:linear-gradient(180deg,#0C1D3A,#0A1830 30%);margin-top:44px}
.foot-grid{gap:38px;padding-top:54px;}
.foot-grid h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.16em;padding-bottom:10px}
.foot-grid h4::after{width:30px;height:3px;background:linear-gradient(90deg,#F5A623,#F97316)}
.foot-grid a{position:relative;padding-left:17px;margin:9px 0;font-size:14.5px}
.foot-grid a::before{content:"›";position:absolute;left:0;top:50%;transform:translateY(-54%);color:#00B4D8;font-weight:500;font-size:16px;transition:transform .2s,color .2s}
.foot-grid a:hover{transform:translateX(3px);color:#fff}
.foot-grid a:hover::before{color:#F5A623;transform:translateY(-54%) translateX(2px)}
.foot-social a{padding-left:13px}
.foot-social a::before{display:none}
.foot-brand p{color:#9DB1D1}
.foot-pay-label{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#7E93B8;margin:20px 0 9px}
.foot-pay{display:flex;flex-wrap:wrap;gap:7px}
.foot-pay span{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#DCE6F5;font-size:11.5px;font-weight:500;letter-spacing:.06em;padding:5px 11px;}
.foot-bar{align-items:center}
.foot-bar-r{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot-status{display:inline-flex;align-items:center;gap:8px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.38);color:#6EE7B7;padding:5px 13px;font-weight:500;font-size:12.5px}
.foot-status i{width:8px;height:8px;border-radius:50%;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulseDot 2s infinite}
@media (max-width:700px){
  .hero{overflow:clip}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px 22px;padding-top:40px;padding-bottom:26px}
  .foot-brand{grid-column:1/-1}
  .foot-acc{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
  .foot-acc h4{grid-column:1/-1}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:10px}
}
.foot-social a{margin:0 8px 0 0}

/* === v3.1: squared-modern corners + solid block buttons === */
:root{--radius:10px;--radius-sm:7px}
.btn-ghost:hover{box-shadow:0 5px 0 rgba(10,60,140,.2);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(10,60,140,.16)}
.hero-badge{border-radius:8px}
.show-card{border-radius:12px}
.show-tag{border-radius:7px}
.show-badge{border-radius:7px}
.card{border-radius:12px}
.cat-chip{border-radius:8px}
.badge{border-radius:6px}
.main-nav>a{border-radius:8px}
.gal-thumbs img{border-radius:7px}
.gal-zoom{border-radius:7px}
.tbl{border-radius:10px}
.stat{border-radius:12px}
.news-band{border-radius:12px}
.form-card{border-radius:12px}
.pkg{border-radius:12px}
.foot-pay span{border-radius:6px}
.foot-status{border-radius:8px}
.lb-close,.lb-nav{border-radius:10px}
.lb-count{border-radius:8px}
.lightbox img{border-radius:8px}
input:not([type=checkbox]):not([type=radio]),select,textarea{border-radius:8px}
@media (max-width:700px){.show-card.sc-c{border-radius:12px}}

/* === v3.2: green buttons === */
.btn{background-size:160% 100%;}
.btn-amber{background-size:160% 100%;}
.btn-amber:hover{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 #022C22,0 20px 32px -12px rgba(4,120,87,.65)}
.btn-amber:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #022C22,0 8px 16px -8px rgba(4,120,87,.55)}
.show-badge{background:linear-gradient(120deg,#10B981,#047857);box-shadow:0 8px 20px rgba(16,185,129,.45)}

/* === v3.3: invoice === */
.invoice{background:#fff;border:1px solid #E2E8F0;max-width:820px;margin:0 auto}
.inv-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid #0A1830;padding-bottom:14px;margin-bottom:16px}
.inv-head h1{margin:0;font-size:30px;letter-spacing:2px}
.inv-meta{display:flex;flex-direction:column;text-align:right;gap:2px}
.inv-bill{display:flex;flex-direction:column;gap:1px;margin-bottom:16px}
.inv-totals{display:grid;grid-template-columns:1fr auto;gap:6px 18px;max-width:320px;margin:14px 0 14px auto;text-align:right}
.inv-grand{font-size:19px;border-top:2px solid #0A1830;padding-top:8px}
@media print{.site-head,.site-foot,.no-print,.flash{display:none!important}body{background:#fff}.invoice{border:none;box-shadow:none;max-width:none}}

/* === v3.4: premium header/drawer + diagonal fancy buttons === */
.site-head{box-shadow:0 10px 30px -18px rgba(10,24,48,.25)}
.head-in{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:#fff;border:1px solid rgba(10,24,48,.12);width:42px;height:42px;padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;box-shadow:0 4px 14px -6px rgba(10,24,48,.25)}
.nav-toggle span{display:block;height:2px;background:#0A1830;border-radius:2px}
.nav-toggle span:nth-child(2){width:70%}
.main-nav{gap:4px}
.nav-link{position:relative;padding:9px 12px;border-radius:10px;font-weight:500;color:var(--ink);text-decoration:none}
.nav-link:hover{background:rgba(16,185,129,.09);color:#065F46}
.cart-badge{display:inline-block;margin-left:2px;vertical-align:2px}
.user-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(10,24,48,.12);background:#fff;text-decoration:none;color:var(--ink);font-weight:500;box-shadow:0 4px 14px -8px rgba(10,24,48,.3)}
.uc-ava{width:30px;height:30px;background:linear-gradient(135deg,#10B981,#047857);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.drawer-head,.nav-shade,.drawer-sep{display:none}
.form-card .btn{align-self:flex-start;min-width:200px;justify-content:center}
.price{color:#047857}
.sec-title::after{content:"";flex:0 0 64px;height:3px;border-radius:3px;background:linear-gradient(90deg,#10B981,#00B4D8)}
@media (min-width:861px){.m-only{display:none}}
@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .main-nav{position:fixed;top:0;left:0;height:100dvh;width:min(320px,84vw);background:linear-gradient(180deg,#FFFFFF,#EFF8F3);z-index:200;transform:translateX(-106%);display:flex;flex-direction:column;align-items:stretch;padding:20px 16px;gap:4px;box-shadow:30px 0 60px rgba(10,24,48,.3);overflow-y:auto;margin-left:0}
  body.nav-open .main-nav{transform:none}
  .nav-shade{display:none}
  body.nav-open .nav-shade{display:block;position:fixed;inset:0;background:rgba(6,20,40,.45);z-index:190}
  .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
  .drawer-close{background:#fff;border:1px solid rgba(10,24,48,.12);border-radius:9px;width:36px;height:36px;font-size:20px;cursor:pointer;line-height:1}
  .drawer-sep{display:block;margin:16px 12px 4px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#64748B;font-weight:500}
  .main-nav .nav-link{display:flex;justify-content:space-between;align-items:center;padding:13px 12px;font-size:16px;border-radius:10px}
  .main-nav .nav-link::after{content:"›";color:#0E9F6E;font-weight:500}
  .main-nav .btn{align-self:flex-start;margin:8px 12px 2px}
  .main-nav .user-chip{margin:10px 12px 2px;align-self:flex-start}
  .nav-logout{color:#B91C1C;border-top:1px solid rgba(10,24,48,.09);margin-top:10px;padding-top:16px}
  .nav-logout::after{content:""!important}
}
/* v3.4.1 */
.form-card .btn-google{align-self:flex-start;min-width:220px;justify-content:center;width:auto}

/* === v3.5: chamfered "APEX-style" cut-corner buttons === */
.btn{z-index:0;}
.btn::before{content:"";position:absolute;}
.btn:hover{box-shadow:none;filter:brightness(1.06)}
.btn-sm{--cut:10px;}
.btn-ghost,.btn-google{position:relative;z-index:0;border:none;box-shadow:none;clip-path:none;color:#065F46}
.btn-ghost::before,.btn-google::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#34D399,#047857)}
.btn-ghost::after,.btn-google::after{content:"";position:absolute;background:rgba(255,255,255,.92)}
.btn-google::before{background:linear-gradient(120deg,#C7D2DE,#94A3B8)}
.btn-ghost:hover,.btn-google:hover{box-shadow:none;filter:brightness(1.03)}

/* === v3.6: cut-corner buttons — layered plates (edge + face) === */
.btn{--cut:14px;--clip:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));isolation:isolate}
.btn::before{inset:0;transform:translateY(4px);z-index:-2;clip-path:var(--clip)}
.btn::after{inset:0;}
.btn:hover::after{filter:brightness(1.08)}
.btn-danger::before{background:#7F1D1D}
.btn-danger::after{background:linear-gradient(120deg,#EF4444,#DC2626 60%,#B91C1C)}
.btn-ghost,.btn-google{isolation:isolate;background:transparent}
.btn-ghost::before,.btn-google::before{transform:none;z-index:-2;clip-path:var(--clip,polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)))}
.btn-ghost::after,.btn-google::after{left:0;width:auto;height:auto;transform:none;inset:2px;z-index:-1;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}

/* === v3.7: drawer click fix + icons + motion === */
html{overflow-x:clip}
body .nav-shade{z-index:55}
.ni{display:none;width:21px;height:21px;flex:0 0 auto;color:#0E9F6E}
.ni svg{width:100%;height:100%;display:block}
.nav-link{display:inline-flex;align-items:center;gap:7px}
.main-nav .nav-link.active{color:#065F46;background:rgba(16,185,129,.13)}
.main-nav .nav-link.active .ni{color:#047857}
@media (min-width:861px){
  .ctx-public .lnk-mem{display:none}
  .ctx-member .lnk-pub{display:none}
  .ctx-member .lnk-pub.keep{display:inline-flex}
  .ctx-member .lnk-chip{display:none}
  .lnk-out-m{display:none}
}
@media (max-width:860px){
  .main-nav{visibility:hidden;transition:transform .38s cubic-bezier(.22,.9,.3,1),visibility 0s linear .4s}
  body.nav-open .main-nav{visibility:visible;transition:transform .38s cubic-bezier(.22,.9,.3,1)}
  .ni{display:inline-flex}
  .main-nav .nav-link{gap:12px;transition:background .2s,color .2s,transform .2s}
  .main-nav .nav-link:hover{transform:translateX(4px)}
  .site-head .main-nav>a.nav-link::after{content:"›";position:static;width:auto;height:auto;margin-left:auto;background:none;transform:none;color:#0E9F6E;font-weight:500;font-size:19px}
  .site-head .main-nav>a.nav-logout::after{content:""!important}
  .lnk-chip,.lnk-out-d{display:none}
  body.nav-open .main-nav>*{animation:drIn .45s cubic-bezier(.2,.8,.3,1) backwards}
  body.nav-open .main-nav>*:nth-child(2){animation-delay:.04s}body.nav-open .main-nav>*:nth-child(3){animation-delay:.07s}body.nav-open .main-nav>*:nth-child(4){animation-delay:.10s}body.nav-open .main-nav>*:nth-child(5){animation-delay:.13s}body.nav-open .main-nav>*:nth-child(6){animation-delay:.16s}body.nav-open .main-nav>*:nth-child(7){animation-delay:.19s}body.nav-open .main-nav>*:nth-child(8){animation-delay:.22s}body.nav-open .main-nav>*:nth-child(9){animation-delay:.25s}body.nav-open .main-nav>*:nth-child(10){animation-delay:.28s}body.nav-open .main-nav>*:nth-child(11){animation-delay:.31s}body.nav-open .main-nav>*:nth-child(12){animation-delay:.34s}body.nav-open .main-nav>*:nth-child(13){animation-delay:.37s}body.nav-open .main-nav>*:nth-child(14){animation-delay:.40s}
}
@keyframes drIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

/* === v3.8: shade stacking fix + lime buttons (readable) === */
body.nav-open .nav-shade{z-index:55}
.btn{-webkit-tap-highlight-color:transparent}
/* v3.8.1: drawer must not wrap into columns */
@media (max-width:860px){
  .main-nav{flex-wrap:nowrap}
  .main-nav .nav-link{justify-content:flex-start}
}
/* ============ Store v3.9: centered mobile header + dropdown menu + X morph ============ */
@media (max-width:860px){
  /* header: hamburger LEFT, logo CENTER, spacer right */
  .head-in{display:grid;grid-template-columns:46px 1fr 46px;align-items:center;column-gap:8px}
  .nav-toggle{justify-self:start}
  .brand{justify-self:center}
  .nav-toggle span{transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .22s}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0;transform:scaleX(.25)}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* menu = dropdown panel UNDER the header (header stays in place) */
  .main-nav{position:absolute;top:100%;left:0;right:0;width:auto;height:auto;max-height:0;overflow:hidden;transform:none;visibility:hidden;opacity:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:0 16px;background:linear-gradient(180deg,#FFFFFF,#F1F7F3);border-radius:0 0 20px 20px;box-shadow:0 34px 44px -18px rgba(10,24,48,.4);z-index:200;transition:max-height .48s cubic-bezier(.22,.9,.3,1),opacity .3s,visibility 0s linear .48s}
  body.nav-open .main-nav{max-height:min(76vh,620px);overflow-y:auto;visibility:visible;opacity:1;padding:12px 16px 18px;transition:max-height .48s cubic-bezier(.22,.9,.3,1),opacity .3s,visibility 0s}
  .main-nav .drawer-head{display:none}
}
/* v3.9.1: compact dropdown card + clear row separators */
@media (max-width:860px){
  .main-nav{left:12px;right:auto;width:min(302px,74vw);top:calc(100% + 8px);border-radius:16px;border:1px solid rgba(10,24,48,.09)}
  .main-nav .nav-link{border-bottom:1px solid rgba(10,24,48,.1);border-radius:8px}
  .main-nav .nav-link:has(+ .btn),.main-nav .nav-link:last-child{border-bottom:none}
  body.nav-open .main-nav{padding:8px 10px 12px}
}
/* v3.9.2: panel flush full-width (left/top touch) + visible scroll indicator */
@media (max-width:860px){
  .main-nav{left:0;right:0;width:auto;top:100%;border:none;border-radius:0 0 18px 18px}
  body.nav-open .main-nav{padding:10px 14px 16px}
  .main-nav::-webkit-scrollbar{width:5px}
  .main-nav::-webkit-scrollbar-thumb{background:rgba(10,24,48,.3);border-radius:99px}
  .main-nav::-webkit-scrollbar-track{background:rgba(10,24,48,.06)}
}
.nav-ind{position:fixed;width:5px;border-radius:99px;background:rgba(10,24,48,.13);z-index:210;display:none}
body.nav-open .nav-ind.on{display:block}
.nav-ind-th{position:absolute;left:0;width:100%;border-radius:99px;background:linear-gradient(180deg,#0EA5C9,#10B981)}
/* ============ Store v4.0: final brand (Sora wordmark, emerald accent) ============ */
.brand-name{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:800;}
.brand-name{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:#0E1B30}
.brand-name .bn-a{color:#059669;-webkit-text-fill-color:#059669}
.brand-name.light{color:#fff;-webkit-text-fill-color:#fff}
.brand-name.light .bn-a{color:#34D399;-webkit-text-fill-color:#34D399}
/* v4.0.1: dropdown width = content-sized (not full width), flush left/top */
@media (max-width:860px){
  .main-nav{left:0;right:auto;width:max-content;min-width:248px;max-width:82vw}
}
/* ============ Store v4.1 — home richness + account compact ============ */
/* WHY band */
.why-band{border-radius:15px;margin-top:6px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 22px}
.why-item{display:flex;gap:13px;align-items:flex-start;}
.why-ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#10B981,#0D9488);box-shadow:0 10px 20px rgba(13,148,136,.28)}
.why-item h3{font-size:15.5px;margin:2px 0 4px;color:#0A1830}
.why-item p{font-size:13px;line-height:1.5;color:#5B6B82;margin:0}
@media(max-width:860px){.why-grid{grid-template-columns:1fr 1fr;gap:2px 16px}.why-band{padding:20px 18px 4px}}
@media(max-width:430px){.why-grid{grid-template-columns:1fr}}
/* Best Sellers — dark band with rank badges */
.sec-best{border-radius:15px;padding:32px 28px 36px;position:relative;overflow:hidden}
.sec-best::before{content:"";position:absolute;inset:0;pointer-events:none}
.sec-best .grid{counter-reset:rank;position:relative}

@media(max-width:860px){.sec-best{padding:24px 16px 28px;border-radius:22px}}
/* Newest — swipe rail on mobile */
@media(max-width:860px){
  .sec-new .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 2px 14px;scrollbar-width:thin}
  .sec-new .card{flex:0 0 78%;scroll-snap-align:start}
}
/* Category chips — gradient dots */
.cat-chip{display:inline-flex;align-items:center;gap:9px}
.cat-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#10B981,#0D9488);box-shadow:0 0 0 3px rgba(16,185,129,.16)}
.cat-row .cat-chip:nth-child(5n+2)::before{background:linear-gradient(135deg,#2563EB,#06B6D4);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.cat-row .cat-chip:nth-child(5n+3)::before{background:linear-gradient(135deg,#7C3AED,#C026D3);box-shadow:0 0 0 3px rgba(124,58,237,.14)}
.cat-row .cat-chip:nth-child(5n+4)::before{background:linear-gradient(135deg,#F59E0B,#F97316);box-shadow:0 0 0 3px rgba(245,158,11,.16)}
.cat-row .cat-chip:nth-child(5n)::before{background:linear-gradient(135deg,#E11D48,#F43F5E);box-shadow:0 0 0 3px rgba(225,29,72,.13)}
/* Testimonial avatars */
.testi-av{place-items:center;font-size:16px;}
.testi:nth-child(2) .testi-av{background:linear-gradient(135deg,#10B981,#0D9488);box-shadow:0 8px 16px rgba(13,148,136,.3)}
.testi:nth-child(3) .testi-av{background:linear-gradient(135deg,#7C3AED,#C026D3);box-shadow:0 8px 16px rgba(124,58,237,.28)}
/* Account dashboard — compact stat rows */
.stat-grid .stat{display:flex;align-items:center;gap:14px;text-align:left;padding:18px 20px}
.stat-ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#2563EB,#06B6D4);box-shadow:0 10px 20px rgba(6,182,212,.26)}
.stat-tx{display:flex;flex-direction:column;line-height:1.15}
.stat-tx b{font-size:25px;color:#0A1830}
.stat-tx span{font-size:13px;color:#64748B;font-weight:500}
@media(max-width:860px){.stat-grid{grid-template-columns:1fr}.stat-grid .stat{padding:15px 18px}}
.sec-best .card{position:relative}
/* ============ Store v4.2 — JS premium dashboard ============ */
.dash-hero{position:relative;border-radius:15px;overflow:hidden;background:linear-gradient(130deg,#081226 0%,#0B2247 52%,#06393B 100%);box-shadow:0 30px 60px rgba(4,18,44,.35);margin-bottom:22px}
.dash-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dash-av{flex:0 0 auto;width:74px;height:74px;border-radius:22px;display:grid;place-items:center;font:800 32px "Sora",sans-serif;color:#fff;background:linear-gradient(135deg,#10B981,#0D9488 55%,#2563EB);border:2px solid rgba(255,255,255,.35);box-shadow:0 16px 34px rgba(0,0,0,.4)}
.dash-eyebrow{margin:0 0 2px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#7EF0C9}
.dash-hi h1{margin:0;color:#fff;font-size:clamp(26px,4.5vw,38px);line-height:1.1}
.dash-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.dash-chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#DCE9FF;font-size:12.5px;font-weight:500;backdrop-filter:blur(6px)}
.dash-chip.gold{background:linear-gradient(135deg,rgba(245,197,66,.25),rgba(245,158,11,.18));border-color:rgba(245,197,66,.5);color:#FFE1A1}
.dash-cta{margin-left:auto;flex:0 0 auto}
@media(max-width:700px){.dash-av{width:60px;height:60px;border-radius:18px;font-size:26px}.dash-cta{margin-left:0}}
.dash-stats .dstat{position:relative;overflow:hidden;padding-bottom:38px}
.dstat-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:42px;display:block;pointer-events:none}
.dstat-link{margin-left:auto;align-self:flex-start;font-size:13px;font-weight:500;color:#0D9488;text-decoration:none;white-space:nowrap;position:relative;z-index:2}
.dstat-link:hover{text-decoration:underline}
.dash-recent{margin-top:26px}
.drow{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #E2EDF3;border-radius:11px;padding:15px 18px;margin-bottom:10px;text-decoration:none;color:#0A1830;box-shadow:0 8px 22px rgba(10,40,90,.05);transition:transform .25s,box-shadow .25s}
.drow:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(10,40,90,.12)}
.drow-no{font-weight:500}
.drow-date{color:#64748B;font-size:13.5px}
.drow-total{margin-left:auto;font-weight:500;color:#047857}
.st-pill{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:500}
.st-pill.ok{background:#DCFCE7;color:#15803D}
.st-pill.bad{background:#FEE2E2;color:#B91C1C}
.qtile{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E2EDF3;border-radius:12px;padding:16px;text-decoration:none;color:#0A1830;font-weight:500;box-shadow:0 10px 24px rgba(10,40,90,.06);transition:transform .25s,box-shadow .25s}
.qtile:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(10,40,90,.13)}
.qtile i{margin-left:auto;font-style:normal;color:#94A3B8}
@media(max-width:860px){}
@media(max-width:430px){.drow{flex-wrap:wrap}.drow-total{margin-left:0}}
.sec-best::before{background:radial-gradient(560px 240px at 85% -40px,rgba(16,185,129,.16),transparent 65%),radial-gradient(480px 220px at 8% 115%,rgba(37,99,235,.14),transparent 65%)}
.sec-best .sec-title{color:#0A1830}
.sec-best .card{box-shadow:0 16px 36px rgba(10,50,90,.12)}
.stats-band .stat{background:linear-gradient(180deg,#FFFFFF,#F5FAF8);border:1px solid #E2EDF3;box-shadow:0 14px 32px rgba(10,40,90,.08)}
.stats-band .stat span{color:#64748B}
.news-band input{background:#fff!important;border:1px solid #CFE0EC!important;color:#0A1830!important}
/* ============ Store v4.4 — shop Show More + peek fade ============ */
.shop-grid .card.more-hide{display:none}
.shop-grid .card.peek{max-height:188px;overflow:hidden;pointer-events:none;box-shadow:0 8px 20px rgba(10,40,90,.05);-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 97%);mask-image:linear-gradient(180deg,#000 50%,transparent 97%)}
.shop-grid .card.pop-in{animation:cardIn .55s cubic-bezier(.2,.7,.3,1) both}
.shop-grid .card.unpeek{transition:max-height .55s cubic-bezier(.2,.7,.3,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.more-wrap{margin:30px auto 6px;text-align:center;max-width:520px}
.more-text{font-size:15px;color:#5B6B82;margin:0 0 14px}
.more-text b{color:#0A1830}
.more-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;font-size:16.5px}
.more-chev{display:inline-grid;place-items:center;animation:chevBob 1.6s ease-in-out infinite}
@keyframes chevBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.more-wrap.done .more-text{font-weight:500;color:#047857}
/* ============ Store v4.5 — premium icons: light chip, dark glyph ============ */
.stat-ic,.why-ic{border:1.5px solid #BFD6FF;}
.stat-ic svg,.why-ic svg{width:24px;height:24px;stroke-width:2.35}
.stat-grid .stat:nth-child(2) .stat-ic{background:#DFF7EC;border-color:#A9E9CB;color:#047857;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,87,.14)}
.stat-grid .stat:nth-child(3) .stat-ic{background:#F0E8FF;border-color:#D9C6FF;color:#6D28D9;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(109,40,217,.14)}
.qtile:nth-child(2) .stat-ic{background:#DFF7EC;border-color:#A9E9CB;color:#047857}
.qtile:nth-child(3) .stat-ic{background:#F0E8FF;border-color:#D9C6FF;color:#6D28D9}
.qtile:nth-child(4) .stat-ic{background:#FFF3DA;border-color:#FFE0A3;color:#B45309}
.why-item:nth-child(1) .why-ic{background:#DFF7EC;border-color:#A9E9CB;color:#047857;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,87,.14)}
.why-item:nth-child(3) .why-ic{background:#F0E8FF;border-color:#D9C6FF;color:#6D28D9;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(109,40,217,.14)}
.why-item:nth-child(4) .why-ic{background:#FFF3DA;border-color:#FFE0A3;color:#B45309;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(180,83,9,.14)}
/* ============ Store v4.6 — codes, ribbons, watermarks, one background ============ */
/* uniform page background: sections sit on the single fixed site bg */
.why-band{background:transparent;border:0;box-shadow:none;padding:6px 2px 0}
.sec-best{background:transparent;border:0;box-shadow:none}
.ribbon{position:absolute;top:15px;z-index:5;width:128px;padding:5px 0;text-align:center;font:500 10.5px "Plus Jakarta Sans",sans-serif;letter-spacing:.14em;color:#fff;box-shadow:0 8px 18px rgba(4,20,40,.35)}
.ribbon-new{left:-36px;transform:rotate(-45deg);background:linear-gradient(90deg,#059669,#10B981)}
.ribbon-exc{right:-36px;transform:rotate(45deg);background:linear-gradient(90deg,#B45309,#F59E0B);color:#FFF7E0}
.tag-feat{position:absolute;left:10px;bottom:10px;z-index:5;padding:5px 11px;border-radius:999px;background:rgba(8,18,38,.86);color:#FFD970;font-size:10.5px;font-weight:500;letter-spacing:.12em;backdrop-filter:blur(4px)}
.wm-sold{position:absolute;top:50%;left:50%;z-index:6;transform:translate(-50%,-50%) rotate(-16deg);padding:7px 30px;border:3px solid rgba(255,255,255,.9);border-radius:10px;background:rgba(185,28,28,.85);color:#fff;font:800 30px "Sora",sans-serif;letter-spacing:.22em;box-shadow:0 18px 40px rgba(120,10,10,.45);pointer-events:none}
.card-media.sold img{filter:grayscale(.65) brightness(.72)}
.btn-sold{background:#E2E8F0!important;color:#94A3B8!important;box-shadow:none!important;cursor:not-allowed}
.btn-sold::before,.btn-sold::after{display:none!important}
.card-body h3{font-size:20px;letter-spacing:.01em}
.thumb-fallback{font-size:20px;letter-spacing:.04em}
/* detail gallery — uniform grid, no main card */
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gal-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;cursor:zoom-in;border:1px solid #E2EDF3;transition:transform .3s,box-shadow .3s;display:block}
.gal-grid img:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(10,40,90,.18)}
.gallery{position:relative}
.detail-wm{font-size:40px}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr}}
.sold-note{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:10px;padding:16px 18px;font-size:15px;margin:0}
/* admin template list */
.tpl-thumb{width:56px;height:38px;object-fit:cover;border-radius:8px;display:block}
.post-thumb{width:80px;height:45px;object-fit:cover;border-radius:8px;display:block}
.post-thumb-ph{display:flex;align-items:center;justify-content:center;background:rgba(5,150,105,.08);color:rgba(6,64,43,.45)}
.tpl-row{transition:background .2s}
.tpl-row.dragging{opacity:.45}
.tpl-row .drag-h{cursor:grab;color:#94A3B8;font-size:17px;text-align:center;user-select:none}
.tpl-code{font-weight:500;color:#047857;white-space:nowrap}
#saveOrder:disabled{opacity:.45;cursor:not-allowed}
/* ============ Store v4.7 — footer: one crypto mark, no status pill ============ */
.foot-crypto{margin-top:4px;line-height:0}
.foot-crypto svg{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
/* ============ Store v4.8 — warm pearl site + designed dark hero ============ */
:root{ --ink:#0C1F17; --ink2:#33463C; --muted:#6B7A6F;
  --violet:#047857; --fuchsia:#0D9488;
  --grad:linear-gradient(120deg,#059669 0%,#10B981 48%,#84CC16 115%);
  --grad-soft:linear-gradient(120deg,rgba(5,150,105,.13),rgba(16,185,129,.11),rgba(132,204,22,.09));
  --line:rgba(4,120,87,.16); --line2:rgba(12,31,23,.09);
  --sh-sm:0 4px 14px rgba(23,54,43,.08);
  --sh:0 14px 34px -12px rgba(23,54,43,.20),0 4px 12px rgba(23,54,43,.06);
  --sh-lg:0 30px 60px -18px rgba(23,54,43,.30),0 8px 22px rgba(23,54,43,.10);
  --ring:0 0 0 4px rgba(5,150,105,.20);
}
::selection{background:rgba(16,185,129,.30)}
.brand-mark{filter:drop-shadow(0 6px 14px rgba(4,120,87,.35))}
.card::before{background:linear-gradient(140deg,rgba(5,150,105,.45),rgba(13,148,136,.18) 40%,rgba(201,162,39,.30))}
.tbl th{background:linear-gradient(120deg,rgba(5,150,105,.10),rgba(13,148,136,.08))}
.tbl tbody tr:hover,.tbl tr:hover{background:rgba(5,150,105,.05)}
.site-foot::after{background:radial-gradient(500px 220px at 8% 0%,rgba(5,150,105,.26),transparent 60%),radial-gradient(460px 220px at 92% 100%,rgba(201,162,39,.14),transparent 60%)}
.stat-ic,.why-ic{background:#DFF3E7;border-color:#B7E3CC;color:#047857;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,87,.14)}
.stat-grid .stat:nth-child(1) .stat-ic{background:#DFF3E7;border-color:#B7E3CC;color:#047857;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,87,.14)}
.qtile:nth-child(1) .stat-ic{background:#DFF3E7;border-color:#B7E3CC;color:#047857}
.why-item:nth-child(2) .why-ic{background:#DFF3E7;border-color:#B7E3CC;color:#047857;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,87,.14)}
.hero::after{background:linear-gradient(120deg,#059669,#34D399 45%,#C9A227);opacity:.9}
.hero>#heroFx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* ============ Store v5.5 — hero: LIGHT, full-width section (no card) ============ */
.hero{
  width:100vw;margin-left:calc(50% - 50vw);margin-top:-30px;
  border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
  padding:58px 0 0;overflow:hidden;
}
.hero::after{display:none}
.hero>h1,.hero>p,.hero>.hero-cta,.hero>.hero-show,.hero>.scroll-cue{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.hero>.hero-show{width:100%}
.hero h1{color:var(--ink)}
.hero h1 em{background:linear-gradient(100deg,#059669,#65A30D 72%,#B45309);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:#5B6B60}
.scroll-cue{border-color:rgba(12,31,23,.35)}
.show-card.sc-c{box-shadow:0 30px 64px rgba(3,25,17,.22)}
.show-card:hover{box-shadow:0 26px 54px rgba(3,25,17,.28)}
@media(max-width:860px){.hero{padding-top:42px}}
/* ============ Store v5.6 — hero coverflow carousel (glassy, draggable) ============ */
.hero-carousel{position:relative;height:352px;margin:40px auto 0;padding:0 20px;perspective:1300px;touch-action:pan-y;cursor:grab}
.hero-carousel.dragging{cursor:grabbing}
.hc-track{position:absolute;inset:0;transform-style:preserve-3d}
.hc-slide{position:absolute;left:50%;top:50%;width:min(440px,74vw);aspect-ratio:16/10.4;transform:translate(-50%,-50%);border-radius:12px;overflow:hidden;display:block;background:#0B1526;border:1px solid rgba(255,255,255,.65);box-shadow:0 30px 60px -18px rgba(3,25,17,.45),0 10px 24px rgba(3,25,17,.18);will-change:transform,opacity;user-select:none;-webkit-user-select:none}
.hc-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.hc-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%);pointer-events:none;z-index:3}
.hc-slide .show-tag{z-index:4}
.hc-slide .show-badge{z-index:4}
.hc-wm{font-size:19px;padding:4px 16px;border-width:2px;letter-spacing:.18em}
.hc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:300;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#065F46;font-size:27px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px rgba(3,25,17,.18);transition:background .2s;padding:0 0 3px}
.hc-nav:hover{background:rgba(255,255,255,.88)}
.hc-prev{left:10px}
.hc-next{right:10px}
@media(max-width:700px){.hero-carousel{height:258px;margin-top:12px}.hc-slide{width:84vw}.hc-nav{width:40px;height:40px;font-size:23px}}
/* ============ Store v5.7 — admin drag handle, unmistakable ============ */
.tpl-admin .drag-h{color:#7C8DA6;padding:8px 10px!important}
.tpl-admin .drag-h svg{display:block;margin:0 auto}
.tpl-admin .tpl-row:hover .drag-h{color:#0F766E}
.tpl-admin .drag-h:active{cursor:grabbing}
.tpl-admin th.drag-th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#94A3B8;text-align:center}
/* ============ Store v5.8 — premium pass: aurora hero, visible scroll cue, bordered trust cards, designed cards, FAQ accordion, subscribe ============ */
/* Scroll cue — always visible, unmistakable */
.scroll-cue{z-index:6;}
/* Trust strip — soft bordered cards */
.why-item{background:rgba(255,255,255,.55);border:1px solid rgba(4,120,87,.14);border-radius:11px;padding:16px 18px;box-shadow:0 6px 18px rgba(3,25,17,.05);}
/* Cards — premium system */
.card{border-color:rgba(4,120,87,.13)}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 44px -14px rgba(3,25,17,.22)}
.card-media{position:relative;overflow:hidden}
.card-media img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-media img{transform:scale(1.055)}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.20) 48%,transparent 62%);transform:translateX(-130%);pointer-events:none;z-index:2}
.card:hover .card-media::after{transform:translateX(130%);transition:transform .9s ease}
.card:not(:has(.card-media))::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#059669,#84CC16,#D9A420);z-index:3}
.testi{overflow:hidden}
.testi .card-body{position:relative}
.testi .card-body::before{content:"\201C";position:absolute;right:16px;font-size:74px;line-height:1;font-family:Georgia,serif;color:rgba(4,120,87,.13);pointer-events:none}
.testi-av{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#059669,#0D9488);color:#fff;font-weight:800;vertical-align:middle;box-shadow:0 0 0 3px rgba(5,150,105,.18)}
/* Stats band */
.stats-band .stat strong{color:transparent;}
.stat:hover{transform:translateY(-4px);box-shadow:0 18px 34px -12px rgba(3,25,17,.18)}
/* Internal cards */
.qtile:hover,.order-card:hover,.review:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(3,25,17,.16);border-color:rgba(4,120,87,.28)}
/* FAQ accordion */
.faq-item{padding:0;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;background:none;border:none;font:inherit;font-weight:700;font-size:16px;color:var(--ink);text-align:left;padding:17px 20px;cursor:pointer}
.faq-ic{flex:none;width:30px;height:30px;border-radius:50%;background:#E7F6EE;border:1px solid #BFE6D2;color:#065F46;display:flex;align-items:center;justify-content:center;transition:transform .35s,background .3s,color .3s}
.faq-item.open .faq-ic{transform:rotate(45deg);background:#059669;color:#fff}
.faq-item.open{border-color:rgba(4,120,87,.35);box-shadow:var(--sh)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.3,.7,.3,1)}
.faq-a p{padding:0 20px 18px;margin:0;color:var(--muted)}
/* Subscribe band — deep emerald premium */
.news-band{padding:44px 34px 40px}
.nl-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.30);margin-bottom:12px;}
.nl-sub{max-width:560px;margin:0 auto}
.nl-ok{display:flex;gap:15px;align-items:flex-start;text-align:left;max-width:560px;margin:20px auto 0;border:1px solid rgba(167,243,208,.45);border-radius:11px;padding:17px 20px;position:relative}
.nl-ok strong{font-size:17px;}
.nl-ok p{margin:3px 0 0;font-size:14px}
.nl-check{flex:none;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#34D399,#059669);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(5,150,105,.45);animation:nlPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes nlPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.nl-err{max-width:520px;margin:16px auto 0;background:rgba(254,226,226,.95);color:#991B1B;border-radius:10px;padding:10px 14px;font-size:14px;font-weight:500;position:relative}
.news-band input:focus{outline-offset:1px}
/* Reveal on scroll (JS-driven; GSAP takes over when loaded) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.gsap-on .rv{transition:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}.nl-check{animation:none}.card-media::after{display:none}}
.btn::before{background:#052E22}
.btn-amber::before{background:#78350F}
.btn-amber::after{background:linear-gradient(135deg,#FBBF24,#F59E0B 55%,#D97706)}
.btn-ghost::before{background:rgba(6,40,28,.14)}
.btn-ghost::after{background:rgba(255,255,255,.65)}
.btn-sold::before{background:#64748B}
.btn-sold::after{background:linear-gradient(135deg,#CBD5E1,#94A3B8)}
/* Header — gradient hairline, scroll shadow, pill chip */
.site-head{border-bottom:1px solid rgba(4,120,87,.10)}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;pointer-events:none}
.site-head.scrolled{box-shadow:0 16px 36px -16px rgba(3,25,17,.30)}
.main-nav>a.nav-link{border-radius:10px}
.main-nav>a.nav-link:hover{background:rgba(5,150,105,.09)}
.user-chip{border-radius:999px;border-color:rgba(4,120,87,.22);padding:5px 15px 5px 5px;transition:transform .25s,box-shadow .25s}
.user-chip:hover{transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(3,25,17,.35)}
.uc-ava{border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(5,150,105,.40)}
.cart-badge{background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:500}
/* Subscribe — LIGHT band, ONE unified capsule */
.news-band{background:linear-gradient(150deg,#FFFFFF,#F1F8F3 55%,#E8F5EC);color:var(--ink);border:1px solid rgba(4,120,87,.16);box-shadow:0 24px 48px -22px rgba(3,25,17,.22)}
.news-band::before{background:radial-gradient(460px 220px at 10% 0%,rgba(16,185,129,.15),transparent 60%),radial-gradient(420px 220px at 90% 100%,rgba(217,164,32,.13),transparent 60%)}
.news-band h2{color:var(--ink)}
.news-band .nl-sub{color:var(--muted)}
.nl-ic{background:#E7F6EE;border-color:#BFE6D2;color:#047857;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(4,120,87,.14)}
.news-band form{background:#fff;border:1px solid rgba(4,120,87,.25);box-shadow:0 16px 32px -14px rgba(3,25,17,.25);padding:5px;gap:5px;align-items:stretch;transition:border-color .25s,box-shadow .25s}
.news-band form:focus-within{border-color:rgba(4,120,87,.55);box-shadow:0 16px 32px -12px rgba(3,25,17,.28),0 0 0 4px rgba(5,150,105,.14)}
.news-band input::placeholder{color:#8CA3B8}
.news-band input:focus{outline:none}
.news-band form .nl-go{border-radius:999px;margin:0}
.news-band form .nl-go::before,.news-band form .nl-go::after{border-radius:999px}
.nl-ok{background:#F0FAF3;border-color:rgba(4,120,87,.32)}
.nl-ok strong{color:var(--ink)}
.nl-ok p{color:var(--muted)}
.card-body h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:linear-gradient(135deg,#059669,#84CC16);margin-right:9px;vertical-align:2px}
.testi-head{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.testi-av{margin-right:0;flex:none}
.testi-who{display:flex;flex-direction:column;line-height:1.25}
.testi-who small{color:#8CA3B8;font-size:12px}
.testi-stars{margin-left:auto;color:#D9A420;letter-spacing:2px;font-size:14px;white-space:nowrap}
.testi .card-body::before{top:auto;bottom:-14px}
.testi-text{color:#33475E;margin:0}
.svc-ic{display:inline-flex;width:52px;height:52px;border-radius:16px;align-items:center;justify-content:center;margin-bottom:14px;background:#E7F6EE;border:1px solid #BFE6D2;color:#047857;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(4,120,87,.14)}
.grid>.svc-card:nth-child(2) .svc-ic{background:#FFF6E0;border-color:#F3DFA8;color:#B45309;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(180,83,9,.14)}
.grid>.svc-card:nth-child(3) .svc-ic{background:#E8F1FF;border-color:#C3D9FB;color:#1D4ED8;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(29,78,216,.14)}
.svc-card .card-body{display:flex;flex-direction:column;height:100%}
.svc-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px dashed rgba(4,120,87,.20)}
.price-chip small{display:block;font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:#8CA3B8;font-weight:500}
.price-chip b{font-size:19px;color:#B45309}
.stat-ic2{display:inline-flex;width:44px;height:44px;border-radius:13px;background:#E7F6EE;border:1px solid #BFE6D2;color:#047857;align-items:center;justify-content:center;margin-bottom:9px;box-shadow:inset 0 1px 0 #fff}
.stats-band .stat:nth-child(2) .stat-ic2{background:#FFF6E0;border-color:#F3DFA8;color:#B45309}
.stats-band .stat:nth-child(3) .stat-ic2{background:#E8F1FF;border-color:#C3D9FB;color:#1D4ED8}
.stats-band .stat:nth-child(4) .stat-ic2{background:#F0E8FF;border-color:#D9C6FF;color:#6D28D9}
.stats-band .stat strong{display:block}
.card-foot{border-top:1px solid rgba(4,120,87,.10);padding-top:12px;margin-top:10px}
.card-foot .price{font-size:19px;font-weight:500;color:#047857}
.card-foot .price s{color:#C0564F;font-size:13.5px;font-weight:500;margin-right:5px}
.save-chip{display:inline-block;margin-left:8px;background:#FEF3C7;border:1px solid #F3DFA8;color:#92400E;font-size:11px;font-weight:500;padding:2px 8px;border-radius:999px;vertical-align:3px;letter-spacing:.04em}
/* Detail gallery — big main + thumb row */
.gal-main{border-radius:12px;overflow:hidden;border:1px solid rgba(4,120,87,.15);box-shadow:0 22px 44px -18px rgba(3,25,17,.30);background:#0B1526}
.gal-main img{width:100%;aspect-ratio:16/10.2;object-fit:cover;display:block;cursor:zoom-in;transition:opacity .28s ease}
.gal-thumbs{display:flex;gap:10px;margin-top:11px;flex-wrap:wrap}
.gal-th{padding:0;width:98px;height:64px;border-radius:12px;overflow:hidden;border:2px solid rgba(4,120,87,.14);background:#fff;cursor:pointer;opacity:.72;transition:opacity .25s,transform .25s,border-color .25s,box-shadow .25s}
.gal-th img{width:100%;height:100%;object-fit:cover;display:block}
.gal-th:hover{opacity:1;transform:translateY(-2px)}
.gal-th.active{border-color:#059669;opacity:1;box-shadow:0 8px 18px -8px rgba(5,150,105,.55)}
@media(max-width:700px){.gal-th{width:76px;height:52px}}
.news-band form input{border:none!important;box-shadow:none!important;background:transparent!important;border-radius:0}
.news-band form .nl-go::before{display:none}
/* === v6.0: cart pill, scroll cue restore, marquee removed, softer background === */
.main-nav>a.cart-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px 7px 11px;border-radius:999px;background:#fff;border:1px solid rgba(4,120,87,.28);color:var(--ink);font-weight:500;box-shadow:0 8px 18px -10px rgba(3,25,17,.35);position:relative;transition:transform .2s,box-shadow .25s,border-color .2s}
.main-nav>a.cart-pill::after{display:none}
.main-nav>a.cart-pill:hover{transform:translateY(-1px);border-color:rgba(4,120,87,.55);box-shadow:0 12px 24px -10px rgba(3,25,17,.4);color:var(--ink)}
.cart-pill .ni{display:inline-flex;width:21px;height:21px;color:#059669}
.cart-pill .cp-label{display:none}
.cart-pill .cp-total{font-family:Sora,sans-serif;font-size:15px;letter-spacing:-.01em}
.cart-pill .cart-badge{position:absolute;top:-7px;right:-5px;margin:0;box-shadow:0 0 0 2px #fff}
.main-nav>a.cart-pill.active{background:linear-gradient(120deg,#10B981,#0D9488 60%,#0F766E);color:#fff;border-color:transparent}
.main-nav>a.cart-pill.active .ni{color:#fff}
@media(max-width:860px){
  .main-nav .cart-pill{margin:4px 0;padding:12px;border-radius:12px;align-self:stretch}
  .cart-pill .cp-label{display:inline;font-size:16px}
  .cart-pill .cp-total{margin-left:auto}
  .cart-pill .cart-badge{position:static;box-shadow:none}
}
/* scroll cue — restored mouse pill */
.hero>.scroll-cue{padding:0}
.scroll-cue{display:flex!important;justify-content:center;width:28px;height:47px;border:2px solid rgba(6,78,59,.6);border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 12px 24px -10px rgba(3,25,17,.35),inset 0 1px 0 #fff;margin:26px auto 30px;position:relative;animation:cueBob60 2.2s ease-in-out infinite}
.scroll-cue span{width:7px;height:12px;border-radius:4px;background:linear-gradient(180deg,#10B981,#047857);margin-top:8px;animation:cueDrop60 1.9s ease-in-out infinite}
.scroll-cue::after{content:"SCROLL";position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:500;letter-spacing:.32em;color:rgba(6,78,59,.75)}
@keyframes cueDrop60{0%{transform:translateY(0);opacity:1}55%{transform:translateY(13px);opacity:0}56%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes cueBob60{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion: reduce){.scroll-cue,.scroll-cue span{animation:none}}
.hero::before{opacity:.3}

/* ============ Store v6.1 — ADMIN PREMIUM (LinkDesk-style interior: grouped icon sidebar, designed stat cards, tables, forms, bulk bar) ============ */
body:has(.admin-shell) #bgCanvas{opacity:.12}
/* --- sidebar: light glass panel, gradient hairline, grouped nav --- */
.admin-side{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,253,247,.95));border:1px solid rgba(4,120,117,.16);border-radius:13px;box-shadow:0 24px 44px -20px rgba(23,54,53,.28),0 4px 14px rgba(23,54,53,.06);padding:18px 13px 15px;top:92px;gap:2px;backdrop-filter:blur(10px)}
.admin-side::before{display:block;left:18px;right:18px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#115B5E,#14B4B8 45%,#C9A227)}
.anav-group{display:block;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#8A9A98;margin:13px 10px 5px}
.anav-group:first-child{margin-top:2px}
.admin-side a.anav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;color:var(--ink2);font-weight:500;font-size:14px;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.admin-side a.anav::before{content:"";flex:0 0 auto;width:27px;height:27px;border-radius:9px;background-color:#DFF3F1;border:1px solid #B7E3DF;background-repeat:no-repeat;background-position:center;background-size:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:transform .2s,box-shadow .2s}
.admin-side a.anav:hover{background:linear-gradient(120deg,rgba(5,150,145,.10),rgba(13,144,148,.07));color:#134C4E;transform:translateX(3px);text-decoration:none}
.admin-side a.anav:hover::before{transform:scale(1.1) rotate(-4deg);box-shadow:0 6px 14px -6px rgba(4,120,117,.5)}
.admin-side a.anav[href="/admin"]{background:linear-gradient(120deg,#115B5E,#14B4B8 55%,#0D9094);color:#fff;font-weight:500;box-shadow:0 12px 22px -10px rgba(5,150,145,.55)}
.admin-side a.anav[href="/admin"]::before{background-color:rgba(255,255,255,.20);border-color:rgba(255,255,255,.4)}
.admin-side a.anav[href="/"]::before{background-color:#F7ECD0;border-color:#E3C566}
/* --- sidebar admin identity card --- */
.aside-card{display:flex;align-items:center;gap:11px;margin-top:16px;padding:13px 11px 3px;border-top:1px solid var(--line2)}
.ac-ava{flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#10B981,#0D9488);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px -6px rgba(4,120,87,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.ac-meta{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ac-meta b{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-meta small{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px;font-weight:500}
.ac-dot{width:7px;height:7px;border-radius:50%;background:#10B981;animation:acPulse61 2.2s infinite}
@keyframes acPulse61{0%{box-shadow:0 0 0 0 rgba(16,185,129,.35)}70%{box-shadow:0 0 0 6px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
@media (prefers-reduced-motion: reduce){.ac-dot{animation:none}}
/* --- main panel: designed sheet with corner glows --- */
.admin-main{position:relative;background:linear-gradient(180deg,#FFFDF7 0%,#FFFFFF 34%);border:1px solid rgba(4,120,117,.15);border-radius:13px;padding:26px 28px 30px;box-shadow:0 24px 48px -22px rgba(23,54,53,.25),0 4px 14px rgba(23,54,53,.05);overflow:hidden;min-width:0}
.admin-main::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 240px at 92% -4%,rgba(16,185,178,.10),transparent 60%),radial-gradient(480px 220px at -6% 108%,rgba(201,162,39,.08),transparent 60%);pointer-events:none}
.admin-main>*{position:relative}
.admin-main h1{font-family:Sora,"Plus Jakarta Sans",sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 20px}
.admin-main h1::after{content:"";display:block;width:56px;height:4px;border-radius:4px;margin-top:10px;background:linear-gradient(90deg,#115B5E,#14B4B8 55%,#C9A227)}
.admin-main h3{font-size:16.5px;font-weight:800;color:var(--ink)}
.admin-main h3 small{font-size:12px}
.admin-main h3 small a{background:#DFF3F1;border:1px solid #B7E3DF;color:#134C4E;border-radius:999px;padding:2.5px 10px;font-weight:500}
/* --- dashboard stat cards --- */
.admin-main .stat-grid{margin-bottom:10px}
.admin-main .stat{background:linear-gradient(160deg,#FFFFFF,#FBFAF4);border:1px solid rgba(4,120,117,.16);border-radius:12px;padding:20px 18px;text-align:left;box-shadow:0 14px 28px -16px rgba(23,54,53,.25)}
.admin-main .stat::before{height:4px;background:linear-gradient(90deg,#115B5E,#14B4B8 55%,#0D9094)}
.admin-main .stat::after{content:"";position:absolute;right:-26px;top:-26px;width:84px;height:84px;border-radius:50%;background:radial-gradient(closest-side,rgba(16,185,178,.16),transparent);pointer-events:none}
.admin-main .stat:hover{transform:translateY(-4px);box-shadow:0 22px 38px -18px rgba(23,54,53,.32)}
.admin-main .stat b{font-size:26px;text-align:left;background:linear-gradient(120deg,#115B5E,#0D9094);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.admin-main .stat span{display:block;margin-top:3px;font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.admin-main .tbl td a{color:#115B5E;}
.admin-main .tbl td:last-child>a{display:inline-block;padding:6px 13px;border-radius:999px;background:#DFF3F1;border:1px solid #B7E3DF;color:#134C4E;font-size:12.5px;transition:transform .18s,box-shadow .2s,background .2s}
.admin-main .tbl td:last-child>a:hover{transform:translateY(-1px);background:#CFF0EC;box-shadow:0 8px 16px -8px rgba(4,120,117,.5);text-decoration:none}
.admin-main .drag-h{color:#0D9094}
/* --- tag pill (orders) --- */
.tag-pill{display:inline-block;padding:2.5px 10px;border-radius:999px;background:linear-gradient(120deg,rgba(201,162,39,.16),rgba(231,198,91,.14));border:1px solid rgba(201,162,39,.5);color:#7A5C0A;font-size:11px;font-weight:500;letter-spacing:.02em;vertical-align:2px;white-space:nowrap}
/* --- orders bulk bar --- */
.bulk-bar{display:flex;align-items:center;flex-wrap:wrap;margin:4px 0 2px;}
.bulk-bar select,.bulk-bar input[type="text"]{padding:10px 12px;border:1.5px solid rgba(12,31,23,.14);border-radius:11px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.bulk-bar select:focus,.bulk-bar input[type="text"]:focus{outline:none;border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.18)}
.bulk-bar input[type="text"]{min-width:200px;flex:1 1 180px;max-width:320px}
.bulk-bar [hidden]{display:none!important}
.orders-tbl .cbx{width:36px;text-align:center}
.orders-tbl td:nth-child(6){overflow-wrap:anywhere}
.orders-tbl input[type="checkbox"]{width:17px;height:17px;accent-color:#059669;cursor:pointer;vertical-align:-3px}
.orders-tbl tr:has(.row-check:checked) td{background:rgba(5,150,105,.09)}
.admin-main .shop-tools select,.admin-main .shop-tools input{border:1.5px solid rgba(12,31,30,.13);border-radius:11px;padding:10px 12px;background:#fff;color:var(--ink);font-family:inherit;font-size:14.5px}
.admin-main .shop-tools select:focus,.admin-main .shop-tools input:focus{outline:none;border-color:#115B5E;box-shadow:0 0 0 4px rgba(5,150,145,.18)}
.admin-main .form-card.wide{max-width:840px}
.admin-main .form-card label{letter-spacing:.01em}
.admin-main .form-card .check input{accent-color:#115B5E;width:16px;height:16px}
.admin-main .gw-opt{border-color:rgba(4,120,117,.2)}
.admin-main .gw-opt:hover{border-color:rgba(4,120,117,.45)}
/* --- chart, images, misc panels --- */
.admin-main .chart{background:linear-gradient(180deg,#FFFFFF,#FCFBF6);border:1px solid rgba(4,120,117,.14);border-radius:11px;padding:16px 12px 8px;box-shadow:0 16px 32px -22px rgba(23,54,53,.3)}
.admin-main .img-admin>div{border-color:rgba(4,120,117,.16);}
.admin-main code{background:#EFF7F1;border:1px solid rgba(4,120,117,.18);border-radius:7px;padding:1.5px 7px;font-size:12.5px;color:#134C4E}
.admin-main .notice{border-radius:14px}
/* --- admin login card --- */
.form-card.admin-login{max-width:470px;margin:26px auto;padding:34px 32px;border:1px solid rgba(4,120,87,.2);border-radius:14px;background:linear-gradient(180deg,#FFFFFF,#FCFBF5);box-shadow:0 34px 64px -24px rgba(23,54,43,.4),0 6px 18px rgba(23,54,43,.08)}
.form-card.admin-login::before{left:26px;right:26px;height:4px;background:linear-gradient(90deg,#C9A227,#10B981 55%,#059669)}
.form-card.admin-login label{font-weight:500;font-size:13.5px}
.form-card.admin-login input:focus{border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.18)}
/* --- responsive --- */
@media (max-width:900px){
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static;flex-direction:row;flex-wrap:wrap;align-items:center}
  .anav-group{flex:1 1 100%;margin:8px 6px 2px}
  .admin-side a.anav{padding:7px 9px}
  .aside-card{flex:1 1 100%;margin-top:10px}
  .admin-main{padding:19px 16px 22px}
  .bulk-bar input[type="text"]{max-width:none}
}
.admin-side a.anav[href="/admin/templates"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'/%3E%3Cline%20x1='3'%20y1='9'%20x2='21'%20y2='9'/%3E%3Cline%20x1='9'%20y1='21'%20x2='9'%20y2='9'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/categories"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2019a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h5l2%203h9a2%202%200%200%201%202%202z'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/services"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='7'%20width='20'%20height='14'%20rx='2'/%3E%3Cpath%20d='M16%2021V5a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/service-orders"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2'/%3E%3Crect%20x='8'%20y='2'%20width='8'%20height='4'%20rx='1'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/orders"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4z'/%3E%3Cline%20x1='3'%20y1='6'%20x2='21'%20y2='6'/%3E%3Cpath%20d='M16%2010a4%204%200%200%201-8%200'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/coupons"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.59%2013.41%2011%203H4v7l9.59%209.59a2%202%200%200%200%202.82%200l4.18-4.18a2%202%200%200%200%200-2.83z'/%3E%3Ccircle%20cx='7.5'%20cy='7.5'%20r='1.2'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/users"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='4'/%3E%3Cpath%20d='M23%2021v-2a4%204%200%200%200-3-3.87'/%3E%3Cpath%20d='M16%203.13a4%204%200%200%201%200%207.75'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/reviews"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='12%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/contacts"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='22%2012%2016%2012%2014%2015%2010%2015%208%2012%202%2012'/%3E%3Cpath%20d='M5.45%205.11%202%2012v6a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-6l-3.45-6.89A2%202%200%200%200%2016.76%204H7.24a2%202%200%200%200-1.79%201.11z'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/payments"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='1'%20y='4'%20width='22'%20height='16'%20rx='2'/%3E%3Cline%20x1='1'%20y1='10'%20x2='23'%20y2='10'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/settings"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='4'%20y1='21'%20x2='4'%20y2='14'/%3E%3Cline%20x1='4'%20y1='10'%20x2='4'%20y2='3'/%3E%3Cline%20x1='12'%20y1='21'%20x2='12'%20y2='12'/%3E%3Cline%20x1='12'%20y1='8'%20x2='12'%20y2='3'/%3E%3Cline%20x1='20'%20y1='21'%20x2='20'%20y2='16'/%3E%3Cline%20x1='20'%20y1='12'%20x2='20'%20y2='3'/%3E%3Cline%20x1='1'%20y1='14'%20x2='7'%20y2='14'/%3E%3Cline%20x1='9'%20y1='8'%20x2='15'%20y2='8'/%3E%3Cline%20x1='17'%20y1='16'%20x2='23'%20y2='16'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/faqs"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'/%3E%3Cline%20x1='12'%20y1='17'%20x2='12.01'%20y2='17'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin/pages"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'/%3E%3Cpolyline%20points='14%202%2014%208%2020%208'/%3E%3Cline%20x1='16'%20y1='13'%20x2='8'%20y2='13'/%3E%3Cline%20x1='16'%20y1='17'%20x2='8'%20y2='17'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E")}
.admin-side a.anav[href="/admin"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='7'%20height='7'%20rx='1.5'/%3E%3Crect%20x='14'%20y='3'%20width='7'%20height='7'%20rx='1.5'/%3E%3Crect%20x='3'%20y='14'%20width='7'%20height='7'%20rx='1.5'/%3E%3Crect%20x='14'%20y='14'%20width='7'%20height='7'%20rx='1.5'/%3E%3C/svg%3E")}
/* === v6.2: cart = proper designed icon button (pill removed) === */
.main-nav>a.cart-btn{display:inline-flex;align-items:center;gap:10px;padding:0;background:none;border:none;border-radius:0;box-shadow:none;color:var(--ink);position:relative;font-weight:500}
.main-nav>a.cart-btn::after{display:none}
.main-nav>a.cart-btn:hover{color:var(--ink)}
.cart-btn .cb-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.cart-btn .cb-ico svg{display:block}
.main-nav>a.cart-btn.active .cb-ico{background:linear-gradient(135deg,#10B981,#0D9488 60%,#0F766E);color:#fff;border-color:transparent}
.cart-btn .cart-badge{position:absolute;margin:0;box-shadow:0 0 0 2px #fff;z-index:2}
.cart-btn .cb-meta{display:flex;flex-direction:column;line-height:1.08;text-align:left}
.cart-btn .cb-label{font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#6B7A70}
.cart-btn .cp-total{font-family:Sora,sans-serif;font-weight:500;font-size:15px;color:#0B3D2E;letter-spacing:-.01em}
@media(max-width:860px){
  .main-nav .cart-btn{margin:4px 0;padding:10px 12px;border-radius:12px;align-self:stretch;background:#fff;border:1px solid rgba(4,120,87,.25)}
  .main-nav .cart-btn .cb-meta{gap:8px;}
  .main-nav .cart-btn .cb-label{font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink)}
}
/* === v6.3: subscribe band — mobile fix (capsule ek unit, koi wrap/float nahi) === */
@media(max-width:860px){
  .news-band{padding:30px 20px 26px;border-radius:13px;margin-top:34px}
  .news-band .nl-ic{width:46px;height:46px;border-radius:14px;margin-bottom:10px}
  .news-band h2{font-size:27px;line-height:1.16;margin-bottom:6px}
  .news-band .nl-sub{font-size:15.5px;line-height:1.55}
  .news-band form{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:6px;border-radius:22px;max-width:100%;margin-top:18px}
  .news-band input{flex:none;width:100%;min-width:0;padding:13px 16px;font-size:16px;border-radius:16px;background:#F2F9F4;text-align:left}
  .news-band .nl-go{flex:none;width:100%;padding:14px 18px;font-size:16px;border-radius:16px;justify-content:center;text-align:center}
  .nl-ok{padding:14px 16px;gap:12px;margin-top:18px}
  .nl-err{margin-top:14px}
}
/* === v6.4: admin drawer menu + tools bar + whole-row drag === */
@media(min-width:861px){
  .main-nav .lnk-adm,.main-nav .adm-sep{display:none}
}
.tools-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 8px}
.tools-bar .btn{padding:11px 20px;font-size:15.5px}
.tools-hint{margin:0 0 14px;max-width:660px}
.tpl-admin .tpl-row{cursor:grab;-webkit-touch-callout:none}
.tpl-admin .tpl-row.dragging{cursor:grabbing;background:#E9F8F0;box-shadow:0 16px 32px -12px rgba(3,25,17,.35)}
.tpl-admin .tpl-row.dragging td{background:#E9F8F0}
body.row-dragging{user-select:none;-webkit-user-select:none}
@media(max-width:860px){
  .tools-bar .btn{flex:1 1 150px;justify-content:center;padding:12px 14px;font-size:15px}
}
/* === v6.5: admin drawer context rules + mobile par admin body sidebar off === */
@media(min-width:861px){
  .main-nav .lnk-admdash{display:none}
}
@media(max-width:860px){
  .main-nav.is-admin.ctx-member .lnk-pub,
  .main-nav.is-admin .cart-btn{display:none}
  .main-nav.is-admin.ctx-public .lnk-adm,
  .main-nav.is-admin.ctx-public .adm-sep{display:none}
  .main-nav.is-admin.ctx-member .lnk-admdash{display:none}
  .admin-side{display:none}
}
/* === v6.6: footer brand mark + crypto coins === */
.foot-brand .brand{display:flex;align-items:center;gap:12px}
.foot-mark{display:inline-grid;place-items:center;flex:0 0 auto;filter:drop-shadow(0 8px 18px rgba(16,185,129,.35))}
.foot-mark svg{display:block}
.foot-pay-note{margin:9px 0 0;color:#B9CBE2;font-size:14px}
.foot-coins{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px;}
.foot-coin{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);transition:transform .25s ease,background .25s ease,border-color .25s ease}
.foot-coin:hover{transform:translateY(-3px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}
.foot-coin svg{width:25px;height:25px;display:block}

/* === v6.6b: coin rows balanced 5+5 === */
.foot-coins{max-width:272px}
/* === v6.8: footer payment strip — full width, low height === */
.foot-pay-strip{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08)}
.foot-pay-strip .foot-pay-label{margin:0}
.foot-pay-strip .foot-pay-note{margin:3px 0 0}
.foot-pay-strip .foot-coins{margin-top:0;max-width:none;flex-wrap:nowrap}
@media(max-width:860px){
  .foot-pay-strip{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-pay-strip .foot-coins{flex-wrap:wrap;max-width:272px}
}
/* === v6.9: detail gallery offset fix + cart compact (badge overlay, no label) === */
.cart-btn .cb-meta .cb-label{display:none}
@media(max-width:860px){
  .gallery{position:static;top:auto}
  .main-nav .cart-btn{gap:11px}
  .main-nav .cart-btn .cb-meta{flex-direction:row;align-items:center;flex:0 0 auto}
  .main-nav .cart-btn .cp-total{margin-left:0}
  .main-nav .cart-btn .cart-badge{position:absolute;top:-7px;right:-7px;box-shadow:0 0 0 2px #fff}
}
/* === v7.0: footer links <-> payment strip gap tight === */
.foot-grid{padding-bottom:6px}
.foot-pay-strip{margin-top:10px;padding-top:14px}
/* ============ v72 · APP AREAS — full width + member premium ============ */
.wrap-wide{max-width:none;padding-left:clamp(16px,3vw,44px);padding-right:clamp(16px,3vw,44px)}
main.wrap-wide{padding-top:26px}
/* account tab bar */
.acc-tabs{display:flex;gap:6px;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);border:1px solid var(--line2);padding:6px;margin:0 0 28px;overflow-x:auto;scrollbar-width:none;box-shadow:var(--sh-sm)}
.acc-tabs::-webkit-scrollbar{display:none}
.acc-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;font-weight:500;font-size:14px;color:var(--mut);white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.acc-tab svg{width:17px;height:17px;flex:0 0 auto}
.acc-tab:hover{color:var(--ink);background:rgba(4,120,87,.07)}
.acc-tab.on{background:linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E);color:#fff;box-shadow:0 8px 18px -8px rgba(13,148,136,.55)}
/* app page head */
.app-head{margin:2px 0 18px}
.app-eyebrow{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#0D9488;margin:0 0 4px}
.app-title{margin:0 0 6px}
.app-sub{color:var(--mut);margin:0;max-width:760px}
/* member cards premium (app context) */
main.wrap-wide .order-card{border-radius:13px;padding:22px 24px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,253,247,.94));border:1px solid rgba(4,120,87,.14);box-shadow:0 16px 34px -18px rgba(23,54,43,.25)}
main.wrap-wide .order-card:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(23,54,43,.3)}
.order-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.order-head b{font-family:'Sora',sans-serif;font-size:17px}
.order-head>span:not(.status){font-family:'Sora',sans-serif;font-weight:500;font-size:17px}
.order-card ul{list-style:none;margin:12px 0 4px;padding:8px 0 0;border-top:1px dashed var(--line2)}
.order-card li{padding:7px 0}
.order-card li+li{border-top:1px solid #F0EBDC}
/* downloads */
.dl-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dl-main{flex:1 1 260px;display:flex;flex-direction:column;gap:3px}
.dl-main b{font-family:'Sora',sans-serif;font-size:16px}
.dl-meter{flex:0 1 150px;min-width:90px;height:8px;background:#E9E4D2;border-radius:99px;overflow:hidden}
.dl-meter i{display:block;height:100%;background:linear-gradient(90deg,#10B981,#0D9488);border-radius:99px}
/* empty states */
.empty-state{text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,253,247,.94));border:1px solid rgba(4,120,87,.14);border-radius:14px;padding:46px 24px 40px;box-shadow:var(--sh-sm)}
.es-ic{display:inline-flex;width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#10B981,#0F766E);color:#fff;align-items:center;justify-content:center;box-shadow:0 14px 26px -10px rgba(13,148,136,.5);margin-bottom:16px}
.es-ic svg{width:30px;height:30px}
.empty-state h3{font-family:'Sora',sans-serif;font-size:20px;margin:0 0 8px}
.empty-state p{color:var(--mut);max-width:460px;margin:0 auto 20px}
/* settings grid */
.set-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:18px;align-items:start}
.set-grid .form-card{margin-top:0!important}
@media(max-width:1080px){.set-grid{grid-template-columns:1fr}}
/* invoice sheet inside wide layout */
main.wrap-wide .invoice{max-width:940px;margin:6px auto 0}
@media(max-width:860px){
  .wrap-wide{padding-left:14px;padding-right:14px}
  main.wrap-wide{padding-top:18px}
  .acc-tabs{margin:0 -2px 22px;border-radius:18px}
  main.wrap-wide .order-card{padding:18px}
  .dl-card{gap:10px}
}
/* ============ v73 · settings grid fix ============ */
.set-grid .form-card{max-width:none;width:100%}
/* ============ v75 · invoice ribbon ============ */
.invoice{position:relative;overflow:hidden}
.inv-ribbon{position:absolute;transform:rotate(45deg);text-align:center;padding:7px 0;font-family:'Sora',sans-serif;font-weight:500;font-size:12px;letter-spacing:.24em;color:#fff;z-index:3;box-shadow:0 10px 20px -8px rgba(10,24,48,.45);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.inv-ribbon.paid{background:linear-gradient(135deg,#10B981,#0F766E)}
.inv-ribbon.unpaid{background:linear-gradient(135deg,#F59E0B,#DC2626)}
.inv-ribbon.void{background:linear-gradient(135deg,#64748B,#334155)}
@media(max-width:640px){.inv-ribbon{top:24px;right:-66px;width:200px;font-size:11px}}
/* ============ v75b · invoice design ============ */
.invoice{box-shadow:0 30px 60px -30px rgba(23,54,43,.35);border-radius:12px;padding:34px 36px}
.invoice::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#10B981,#0D9488,#D9A62E)}
.inv-brand{display:flex;align-items:center;gap:14px}
.inv-mark{flex:0 0 auto;filter:drop-shadow(0 8px 16px rgba(13,148,136,.35))}
.inv-pay{background:linear-gradient(180deg,rgba(234,244,240,.9),rgba(234,244,240,.55));border:1px solid rgba(4,120,87,.14);border-radius:9px;padding:12px 16px;color:#3D4B5C;font-size:13.5px}
.inv-thanks{text-align:center;color:var(--mut);font-family:'Sora',sans-serif;font-weight:500;margin:20px 0 4px}
@media(max-width:640px){.invoice{padding:26px 20px}}
/* ============ v77 · invoices pages ============ */
.inv-actions{display:flex;flex-wrap:wrap;margin:10px 0 2px}
.inv-stats{flex-wrap:wrap;margin:0 0 16px}
.inv-stat{background:#fff;border:1px solid rgba(4,120,87,.12);border-radius:10px;padding:12px 18px;min-width:138px;box-shadow:0 10px 24px -18px rgba(23,54,43,.25)}
.inv-stat b{display:block;font-family:'Sora',sans-serif;font-size:20px;color:#0A1830}
.inv-stat span{color:var(--mut);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.inv-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.inv-filters a{padding:7px 14px;border-radius:999px;border:1px solid rgba(4,120,87,.18);font-weight:500;font-size:13px;color:#3D4B5C;background:#fff}
.inv-filters a.on{background:linear-gradient(135deg,#10B981,#0F766E);color:#fff;border-color:transparent}
/* ============ v77b · invoice ribbon clearance ============ */
.inv-ribbon{top:28px;right:-58px;width:196px}
.inv-meta{margin-top:30px}
/* ============ v79 · invoices full-row ============ */
.inv-panel{background:#fff;border:1px solid rgba(4,120,87,.12);border-radius:12px;box-shadow:0 18px 40px -30px rgba(23,54,43,.35);overflow:hidden}
.inv-row{display:grid;grid-template-columns:52px minmax(180px,1.15fr) minmax(300px,1.6fr) auto;gap:18px;align-items:center;padding:18px 22px;position:relative;transition:background .25s}
.inv-row + .inv-row{border-top:1px solid #EDF1EE}
.inv-row:hover{background:#F7FAF8}
.inv-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#F59E0B,#EF4444)}
.inv-row.is-paid::before{background:linear-gradient(180deg,#10B981,#0F766E)}
.inv-row.is-void::before{background:#94A3B8}
.inv-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#FEF3C7;color:#B45309;flex:none}
.inv-row.is-paid .inv-ic{background:#D1FAE5;color:#047857}
.inv-row.is-void .inv-ic{background:#E2E8F0;color:#64748B}
.inv-ic svg{width:22px;height:22px}
.inv-id{min-width:0}
.inv-id b{font-family:'Sora',sans-serif;font-size:16.5px;color:#0A1830;display:block}
.inv-id small{color:var(--mut);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.inv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.inv-stats span{display:block;font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#8494AB;margin-bottom:2px}
.inv-stats b{font-size:13.5px;color:#22344F;white-space:nowrap}
.inv-side{text-align:right}
.inv-amt{font-family:'Sora',sans-serif;font-size:19px;color:#0A1830;display:flex;gap:10px;align-items:center;justify-content:flex-end}
.inv-side .inv-actions{justify-content:flex-end;margin:9px 0 0}
@media(max-width:900px){.inv-row{grid-template-columns:52px 1fr auto}.inv-stats{grid-column:1/-1;order:4;border-top:1px dashed #E5ECE8;padding-top:12px;margin-top:2px}}
@media(max-width:560px){.inv-row{grid-template-columns:44px 1fr;padding:16px}.inv-ic{width:40px;height:40px;border-radius:11px}.inv-side{grid-column:1/-1;order:5;text-align:left}.inv-amt{justify-content:flex-start}.inv-side .inv-actions{justify-content:flex-start}.inv-id small{max-width:210px}}
.auth-row>a{color:var(--ink2);font-weight:500;font-size:15px;padding:8px 12px;border-radius:999px;position:relative;transition:color .2s,background .2s}
.auth-row>a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.6,0,.2,1)}
.auth-row>a:not(.btn):hover{color:var(--ink)}
.auth-row>a:not(.btn):hover::after{transform:scaleX(1)}
.auth-row>a.btn{color:#fff}
@media(max-width:900px){
  .auth-row{width:100%;gap:10px;margin-top:8px}
  .auth-row .nav-link{flex:1;justify-content:center;border:1px solid rgba(13,148,136,.35);background:rgba(16,185,129,.07)}
  .auth-row .nav-link::after{display:none!important;content:""!important}
  .auth-row>a{border-radius:12px}
  .auth-row .btn{flex:1;margin:0;align-self:auto;justify-content:center;text-align:center;padding:12px}
}

/* ===== v81: premium info pages (About / Privacy / Terms / Refund / FAQ / Contact) ===== */
.pg-hero{position:relative;overflow:hidden;margin:26px 0 22px;}
.pg-hero::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.28),rgba(16,185,129,0) 65%)}
.pg-eyebrow{display:inline-block;font-size:11px;font-weight:500;letter-spacing:2.5px;color:#047857;background:rgba(16,185,129,.13);border:1px solid rgba(13,148,136,.3);padding:5px 12px;border-radius:999px;margin:0 0 14px}
.pg-hero h1{position:relative;z-index:1}
.pg-sub{font-size:16px;position:relative;z-index:1;line-height:1.6}
.pg-upd{margin:14px 0 0;position:relative;z-index:1}
.pg-prose{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:32px 34px;box-shadow:0 10px 30px rgba(10,24,48,.05)}
.pg-prose p{font-size:15.5px;line-height:1.78;color:#33455E;margin:0 0 14px}
.pg-prose strong{color:#0A1830}
.pg-prose h2{padding-left:14px;border-left:4px solid #10B981;}
.pg-prose h2:first-child{margin-top:0}
.pg-prose ul{list-style:none;margin:0 0 16px;padding:0}
.pg-prose li{position:relative;font-size:15.5px;line-height:1.7;color:#33455E;padding:5px 0 5px 30px}
.pg-prose li::before{content:"";position:absolute;left:2px;top:11px;width:15px;height:15px;border-radius:5px;background:linear-gradient(135deg,#10B981,#0F766E)}
.pg-prose li::after{content:"";position:absolute;left:6.5px;top:14.5px;width:6px;height:3.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.pg-rel-h{font-size:20px;color:#0A1830;margin:30px 0 14px}
.pg-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.pg-rel-card{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid #E2E8F0;border-radius:10px;padding:16px 18px;transition:transform .2s,box-shadow .2s,border-color .2s}
.pg-rel-card:hover{transform:translateY(-3px);border-color:rgba(13,148,136,.45);box-shadow:0 14px 28px rgba(10,24,48,.09)}
.pg-rel-card strong{color:#0A1830;font-size:15.5px}
.pg-rel-card span{color:#8494AB;font-size:13px}
.pg-cta{margin:26px 0 8px;border-radius:13px;padding:32px 34px;text-align:center;background:linear-gradient(120deg,#0D9488,#0F766E 60%,#115E59);color:#E7FBF3;position:relative;overflow:hidden}
.pg-cta::after{content:"";position:absolute;left:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 65%)}
.pg-cta h2{margin:0 0 8px;font-size:26px;color:#fff;position:relative;z-index:1}
.pg-cta p{margin:0 auto 18px;max-width:520px;font-size:15px;line-height:1.65;position:relative;z-index:1}
.pg-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.pg-cta .btn-light{background:#fff;border:0}
.pg-cta .btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65)}
@media(max-width:640px){.pg-hero{padding:26px 20px 22px}.pg-hero h1{font-size:29px}.pg-prose{padding:22px 18px}.pg-cta{padding:26px 20px}}

/* v81b: CTA light button = white face, dark text */
.pg-cta .btn-light::after{background:#fff}
.pg-cta .btn-light{color:#0F766E}

/* ===== v83: SEO phase — breadcrumbs + shop intro ===== */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:#8494AB;margin:20px 0 4px}
.crumbs a{color:#5B6B82;font-weight:500}
.crumbs a:hover{color:#0D9488}
.crumbs i{font-style:normal;color:#B7C3D2}
.crumbs b{color:#0A1830}
.shop-intro{font-size:15px;line-height:1.7;color:#5B6B82;max-width:820px;margin:2px 0 14px}
.shop-intro strong{color:#0A1830}
/* ===== v84: gallery page-label caption chip ===== */
.gal-main{position:relative}
.gal-cap{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:rgba(10,24,48,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.gal-cap:empty{display:none}
/* ===== v85: template screenshot thumbnails anchor to TOP of page =====
   Gallery images are full-page screenshots (very tall). With object-fit:cover
   the default center crop showed a middle slice on cards/thumbs — anchor the
   crop to the top so every thumbnail shows the page's top (hero/header). */
.card-media img{object-position:50% 0}
.hc-slide img{object-position:50% 0}
.gal-main img{object-position:50% 0}
.gal-th img,.gal-thumbs img{object-position:50% 0}
.gal-grid img{object-position:50% 0}
.tpl-thumb{object-position:50% 0}
.img-admin img{object-position:50% 0}
/* ===== v86: fan showcase cards (home/shop/related) =====
   Har card par template ke 5 page screenshots aik fan (pankha) ki tarah:
   Home front center, Dashboard/Deposit sides, Sign Up/Withdraw far sides.
   Hover par fan khulta hai. Images full-page hain — top-anchored crop. */
.card-media{background:radial-gradient(130% 145% at 50% -10%,#FFFFFF 0%,#EFF7F1 55%,#E1EFE4 100%)}
.fan{position:absolute;inset:0;z-index:1;perspective:900px}
.fan-sheet{position:absolute;left:50%;top:50%;display:block;overflow:hidden;transform-origin:50% 92%;transition:transform .55s cubic-bezier(.22,.9,.26,1),box-shadow .55s cubic-bezier(.22,.9,.26,1)}
.fan-sheet img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;transition:none}
.card:hover .card-media .fan-sheet img{transform:none}
.fs-front{z-index:5;}
.fs-ml{z-index:3;}
.fs-mr{z-index:3;}
.fs-fl{z-index:1;}
.fs-fr{z-index:1;}
@media (hover:hover) and (pointer:fine){
  .card:hover .fs-ml{box-shadow:0 22px 38px rgba(6,45,32,.32)}
  .card:hover .fs-mr{box-shadow:0 22px 38px rgba(6,45,32,.32)}
  .card:hover .fs-fl{box-shadow:0 14px 26px rgba(6,45,32,.26)}
  .card:hover .fs-fr{box-shadow:0 14px 26px rgba(6,45,32,.26)}
}
@media (prefers-reduced-motion:reduce){.fan-sheet{transition:none}}
/* ===== v87: fan polish — borders khatam, size ki wazeh tarteeb =====
   Sheets par koi border/white frame NAHI — sirf images. Size ki tarteeb
   ab saaf nazar ati hai: front sab se bara, mid us se chhota, far sab se
   chhota (top aur bottom dono taraf se seedhi/staircase). */
.fan-sheet{border:none;background:transparent;border-radius:9px}
.fs-front{box-shadow:0 26px 46px rgba(6,45,32,.38)}
.fs-ml{box-shadow:0 10px 20px rgba(6,45,32,.20)}
.fs-mr{box-shadow:0 10px 20px rgba(6,45,32,.20)}
.fs-fl{width:36%;height:66%;box-shadow:0 7px 14px rgba(6,45,32,.16)}
.fs-fr{width:36%;height:66%;box-shadow:0 7px 14px rgba(6,45,32,.16)}
@media (hover:hover) and (pointer:fine){
  .card:hover .fs-front{box-shadow:0 32px 56px rgba(6,45,32,.42)}
  .card:hover .fs-fl{transform:translate(-167%,-55%) rotate(-27deg)}
  .card:hover .fs-fr{transform:translate(67%,-55%) rotate(27deg)}
}
/* ===== v88: template cards WITHOUT card — borderless fan + glass band =====
   User ki hidayat: thumbnail kisi card ke andar NAHI hoga; fan bina crop
   ke khula show ho (animation mein bhi images crop NAHI hongi); neeche ki
   info (code/price/View) GLASS band par; card ya border bilkul NAHI. */
.tpl-card{background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
.tpl-card:hover{box-shadow:none;z-index:6}
.tpl-card .card-media{background:transparent;overflow:visible}
.tpl-card .card-media::after{display:none}
.mk-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:-2px}
.mk-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font:500 9.5px "Plus Jakarta Sans",sans-serif;letter-spacing:.12em;line-height:1.5}
.mk-new{background:linear-gradient(90deg,#059669,#10B981);color:#fff}
.mk-exc{background:linear-gradient(90deg,#D9A420,#F59E0B);color:#FFF7E0}
.mk-feat{background:rgba(8,18,38,.88);color:#FFD970}
/* ===== v90: resting fan aur compact — padosi fans apas mein NAHI takrate ===== */
.fs-fl{transform:translate(-133%,-53%) rotate(-16deg)}
.fs-fr{transform:translate(33%,-53%) rotate(16deg)}
@media (max-width:700px){}
/* ===== v91: EXACT video system — sirf 3 images, pehle bilkul seedhi =====
   Rest par teeno sheets seedhi (koi rotation NAHI): front (Home) sab se
   bari center mein, Dashboard/Deposit sides par halki si peeche. Sirf
   HOVER par side wali images thori tirchi (7deg) ho kar khulti hain. */
.fs-front{width:62%;}
@media (hover:hover) and (pointer:fine){
}
@media (max-width:700px){.fan{transform:none}}
/* ===== v92: site width 1450px — header + tamam sections =====
   User ki hidayat: page khula khula lage; thumbnails apas mein mix na hon.
   .wrap hi header/main/footer ka container hai — 1180 se 1450. Hero
   carousel bhi 1450. Template grids ka gap bhi barhaya (34 -> 44). */
.wrap{max-width:1450px}
.hero-carousel{max-width:1450px;width:min(1450px,100%)}
.grid:has(> .tpl-card){column-gap:44px}
/* ===== v93: thumbnails chhote + hover border line KHATAM =====
   (1) Fan stage ab column ka 84% — thumbnails overall chhote, darmiyan
   ka gap wazeh bara. (2) .card::before purana gradient border frame hai
   jo hover par opacity 1 ho jata tha, aur .card::after shine sweep —
   tpl cards par dono hamesha ke liye band (koi border line NAHI). */
.tpl-card .card-media{width:84%;margin-left:auto;margin-right:auto}
.tpl-card::before,.tpl-card::after{display:none}
/* ===== v94: side images aur chhoti + hover par front zoom OUT =====
   Side sheets front ki nisbat wazeh chhoti (48%x78%). Hover par front
   wali image zoom OUT (scale .93) hoti hai aur side waliyan halki tirchi
   (7deg) ho kar idher udher khul jati hain — exact video wala behavior. */
.fs-ml{width:48%;height:78%;}
.fs-mr{width:48%;height:78%;}
@media (hover:hover) and (pointer:fine){
}
.fs-front{transition:transform .55s cubic-bezier(.22,.9,.26,1),box-shadow .55s cubic-bezier(.22,.9,.26,1),width .55s cubic-bezier(.22,.9,.26,1),height .55s cubic-bezier(.22,.9,.26,1)}
.fs-front img{position:absolute;left:50%;top:0;width:100%;height:auto;min-height:100%;transform:translateX(-50%)}
.card:hover .card-media .fs-front img{transform:translateX(-50%)}
@media (hover:hover) and (pointer:fine){
}
@media (hover:hover) and (pointer:fine){
}
@media (hover:hover) and (pointer:fine){
}
.tpl-card .card-media{margin-top:0}
.tpl-card .card-body{margin-top:12px}
@media (hover:hover) and (pointer:fine){
}
/* ===== v100: sides aur ANDER + aur chhoti; rotate CENTER pivot =====
   (1) Peeche wali images aur ander (peek kam) aur size thora aur
   chhota: 52x82.5 -> 48x78. Front ka overhang tanasub barqarar:
   opar ~6%, neeche us ka double ~12%.
   (2) Rotate ab CENTER pivot (50% 50%) par hai — jitna opar se
   bahar ko ghumti hai, utna hi neeche se ander ko ghumti hai. */
.fs-ml,.fs-mr{width:48%;height:78%;transform-origin:50% 50%}
.fs-ml{transform:translate(-92%,-56%) rotate(0deg)}
.fs-mr{transform:translate(-8%,-56%) rotate(0deg)}
@media (hover:hover) and (pointer:fine){
  .card:hover .fs-ml{transform:translate(-92%,-56%) rotate(-12deg)}
  .card:hover .fs-mr{transform:translate(-8%,-56%) rotate(12deg)}
}
/* ===== v102: front neeche se aur lambi + zoom out thora zyada =====
   Front ki height 96% -> 99% (top apni jagah, izafa sirf neeche ki
   taraf). Hover zoom-out barha di: width 62->55, height 99->95 —
   page ka neeche wala hissa aur ziada appear hota hai. */
.fs-front{height:99%;transform:translate(-50%,-50.5%)}
@media (hover:hover) and (pointer:fine){
  .card:hover .fs-front{width:55%;height:95%;transform:translate(-50%,-50.5%)}
}
/* ===== v106: why-item hover — movement KHATAM, soft glow effect =====
   User ki hidayat: jagha change kar ke opar jane wala hover sahi
   NAHI — koi AUR effect lagao. Ab hover par item bilkul NAHI hilta
   (transform:none); sirf halki emerald glow ring, gehri border aur
   background ki mamuli roshni — paint-only asar, position fixed. */
.why-item{transition:transform .3s,box-shadow .3s,border-color .3s,background .3s}
/* ===== v107: side images ki opacity 85% =====
   User ki hidayat: peeche wali images ki opacity 75% se 85%. */
.fs-ml,.fs-mr{opacity:.85}
/* ===== v108: center (front) image ka zoom-out AUR zyada =====
   Hover par front ab 62->50 width aur 99->92 height tak sikurti
   hai — andar ke page ka neeche wala hissa aur ziada nazar ata hai. */
@media (hover:hover) and (pointer:fine){
  .card:hover .fs-front{width:50%;height:92%}
}
/* ===== v109: center image ka zoom-out MAZEED zyada =====
   Hover par front ab 62->46 width aur 99->89 height tak sikurti
   hai — page ka neeche wala hissa mazeed ziada nazar ata hai. */
@media (hover:hover) and (pointer:fine){
  .card:hover .fs-front{width:46%;height:89%}
}
/* ===== v110: why-item hover — halka sa place change (-2px) + glow =====
   Asal masla: reveal system (.rv / GSAP) why-items ko scroll par
   22px opar le jata tha — user ko hover ka jump lagta tha. Ab
   why-item revealFx se bahir hai (app.js v61); hover par sirf
   halki si -2px harkat + glow ring — user ki hidayat ke mutabiq. */
.why-item:hover{transform:translateY(-2px);border-color:rgba(4,120,87,.35);background:rgba(255,255,255,.82);box-shadow:0 6px 18px rgba(3,25,17,.05),0 0 0 4px rgba(16,185,129,.10)}
/* ===== v111: zoom-out par front opar/neeche se FIXED =====
   User ki hidayat: zoom out par center image apni jagha NA chore —
   opar aur neeche se fix rahe; sirf SIDES se chhoti ho (us ka issue
   NAHI). Ab hover par front ki height 99% hi rehti hai (vertical
   shrink khatam) — sirf width 62->46 hoti hai, jiss se andar ke
   page ka chhupa hua neeche wala hissa mazeed ziada show hota hai. */
@media (hover:hover) and (pointer:fine){
  .card:hover .fs-front{width:46%;height:99%}
}
/* ===== v112: zoom-out par front opar se thora neeche — sides ke top corners opar =====
   User ki hidayat: zoom out ke doran center image opar se thora sa
   neeche aye taake side wali images ke TOP CORNERS center image ke
   opar nazar ayen. Front ka bottom apni jagah fixed rehta hai
   (top ~7.5% neeche, height 92% — bottom wohi ~99%). */
@media (hover:hover) and (pointer:fine){
  .card:hover .fs-front{width:46%;height:92%;transform:translate(-50%,-46.2%)}
}
/* ===== v113: front ka neeche ana KAM — drop 7.5% -> 5% =====
   User: ziada neche kar di hai, thora kam karo. Ab hover par front
   ka top sirf ~5% neeche aata hai (bottom ~99% fixed, height 94%) —
   sides ke top corners phir bhi opar nazar ate hain (rotation lift
   ke sath), lekin front ziada dhasa hua NAHI lagta. */
@media (hover:hover) and (pointer:fine){
  .card:hover .fs-front{width:46%;height:94%;transform:translate(-50%,-47.9%)}
}
/* ===== v114: info band SMART compact glass — sirf Name + Price + View =====
   User ki hidayat: neeche wali cheez ko smart design karo, glass
   effect ke sath, THORI jagha mein, center wali image ke neeche.
   Sirf TPL name, price aur View button — pills aur -50% chip
   template_card() se bhi hata diye. Band ab EK row hai: code |
   price | View, front image ke neeche centered (width 68%). */
.tpl-card .card-body{margin:12px auto 0;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-radius:10px;}
.tpl-card .card-body h3{font-size:15.5px;white-space:nowrap}
.tpl-card .card-foot{border-top:none;padding-top:0;margin-top:0;gap:9px;flex:0 0 auto}
.tpl-card .price{font-size:16px;white-space:nowrap}
.tpl-card .price s{font-size:11.5px;margin-right:4px}
@media (max-width:1100px){.tpl-card .card-body{width:80%}}
@media (max-width:640px){.tpl-card .card-body{width:94%;padding:9px 10px 9px 12px}.tpl-card .card-body h3{font-size:14.5px}.tpl-card .price{font-size:15px}}
.fan-badges{position:absolute;top:-10px;right:calc(19% - 20px);z-index:8;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.fan-badge{font-family:var(--font);font-weight:500;font-size:9.5px;letter-spacing:.09em;color:#fff;padding:5px 10px;border-radius:999px;box-shadow:0 8px 16px rgba(3,25,17,.20);white-space:nowrap}
.fb-new{background:linear-gradient(135deg,#22C55E,#15803D);width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:10.5px;box-shadow:0 10px 20px rgba(21,128,61,.35)}
.fb-exc{background:linear-gradient(135deg,#E7C55B,#C9A227);color:#3A2C02}
.fb-feat{background:linear-gradient(135deg,#1F2937,#0B1220)}
@media (max-width:640px){.fan-badges{right:calc(19% - 12px)}.fb-new{width:38px;height:38px;font-size:9.5px}}
/* ===== v116: NEW badge ka font simple — bold NAHI =====
   User ki hidayat: NEW wale badge ka font simple (regular) karo. */
.fb-new{font-weight:400;letter-spacing:.03em}
/* ===== v117: rows ka gap MAZEED zyada — 52px -> 80px =====
   User ne live screenshot par dono rows ke darmiyan wala gap
   outline karke mazeed increase karne ko kaha. */
.grid:has(> .tpl-card){row-gap:80px}
/* ===== v118: FULL WHITE — green shade ke tamam sources khatam =====
   User: bg full white kaha tha lekin home + pages par green ka
   shade nazar ata hai. Wajuhat: (1) fixed #bgCanvas ke green
   aurora blobs + green dots — app.js v62 mein grey kar diye;
   (2) heroFx ke green blobs — grey kar diye; (3) CSS ke mint
   gradients neeche override:
   - .hero ka mint->pearl gradient ab safed
   - .hero::before ki green radial glow khatam (grey + halki gold)
   - .hero-show::before (carousel ke peeche ki green glow) neutral
   - .pg-hero ka #ECFDF5 mint start ab white
   - generic .card-body ka green-tint gradient ab neutral grey */
.hero{background:#FFFFFF}
.hero::before{background:radial-gradient(560px 260px at 12% -10%,rgba(148,163,184,.07),transparent 60%),radial-gradient(520px 260px at 88% -12%,rgba(201,162,39,.05),transparent 60%),radial-gradient(420px 300px at 50% 115%,rgba(148,163,184,.05),transparent 60%)}
.hero-show::before{background:radial-gradient(closest-side,rgba(148,163,184,.20),rgba(201,162,39,.10),transparent)}
.pg-hero{background:linear-gradient(120deg,#FFFFFF 0%,#FAFAFA 55%,#FBF7EA 100%)}
.card-body{background:linear-gradient(180deg,#FFFFFF,#F8F8F8)}
/* Logo wordmark: SARA CAPITAL (user ki hidayat) — naam dynamic
   rehta hai, sirf case badla hai; caps ke liye halki si tracking */
.brand-name{text-transform:uppercase;letter-spacing:.015em}
/* ===== v119: logo ke neeche chhota slogan (Digital Agency) =====
   User: logo ke neeche bilkul small font mein "Digital Agency"
   likh do; logo + slogan icon/lockup se bahar na jaye. Tagline
   wordmark ke neeche usi ki width ke andar rehti hai. */
.brand-lock{display:inline-flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-tag{font-size:9.5px;font-weight:500;text-transform:uppercase;color:#0D9488;margin-top:3px;white-space:nowrap}
.foot-brand .brand-tag{color:rgba(255,255,255,.55)}
@media(max-width:640px){.brand-tag{font-size:8.5px;letter-spacing:.34em}}
/* ===== v120: SUPPORT SYSTEM — nav count badge, ticket UI =====
   - .nav-badge: admin Support option par open tickets ki ginti
     ka tag (naya message/request aye to baghair page khole pata)
   - ticket list rows, status chips, thread bubbles, filters */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:7px;border-radius:99px;background:#E02424;color:#fff;font-size:11px;font-weight:500;line-height:1;vertical-align:2px}
.chip-st{display:inline-block;}
.chip-st.st-answered{background:#E7F6EF;color:#067647}
.tkt-list{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.tkt-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid #E6EBEF;border-radius:10px;text-decoration:none;color:inherit;box-shadow:0 4px 14px rgba(10,40,90,.04)}
.tkt-row:hover{border-color:#BFE6D6}
.tkt-no{font-weight:500;color:#0D9488;white-space:nowrap}
.tkt-sj{flex:1;min-width:0;}
.tkt-upd{font-size:12px;color:#8494AB;white-space:nowrap}
.tkt-msgs{display:flex;flex-direction:column;gap:12px;margin:16px 0 20px}
.tm{max-width:80%;padding:12px 15px;border-radius:10px;font-size:14.5px;line-height:1.6}
.tm-user{align-self:flex-start;background:#F4F6F8;border:1px solid #E6EBEF;border-bottom-left-radius:5px}
.tm-admin{align-self:flex-end;background:#E9F7F1;border:1px solid #C9E9DA;border-bottom-right-radius:5px}
.tm-meta{font-size:11.5px;color:#8494AB;margin-bottom:5px}
.tm-meta b{color:#43536A}
.tm-via{background:#FFF3D6;color:#92600A;border-radius:6px;padding:1px 6px;font-size:10.5px;font-weight:500}
.tkt-filters{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.tkt-filters .tf{padding:7px 14px;border-radius:99px;border:1px solid #DCE4EA;background:#fff;font-size:13px;font-weight:500;color:#43536A;text-decoration:none}
.tkt-filters .tf.on{background:#0D9488;border-color:#0D9488;color:#fff}
.tbl tr.row-open td{background:#FFF7F7}
.chk-row{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:#43536A}
.chk-row input{width:16px;height:16px}
.fc-h{margin:0 0 12px;font-size:16px}
/* ===== v121: ADMIN + ACCOUNT FULL PAGE (full width) =====
   User: admin aur user account full page hona chahiye — jitni
   bari screen, utni width; navbar/logo full left par. Storefront
   (public) ka 1450px design waisa hi rehta hai; sirf app pages
   (body.app-full) full width hoti hain. */
body.app-full .wrap{max-width:none;padding-left:26px;padding-right:26px}
@media(max-width:640px){body.app-full .wrap{padding-left:15px;padding-right:15px}}
/* bulk select bar spacing */
.bulk-form{margin:0 0 14px}
.bulk-form .bulk-bar{margin:0}
/* ===== v122: EXTERNAL pages par HEADER bhi full width =====
   User: home wagera external pages ke liye header ki width aur
   barha do — sirf header ki, sections ki nahi. Sections apni
   1450px width par rehti hain; sirf .site-head ke andar wala
   container full width (logo full left, actions full right). */
.site-head .wrap{max-width:none;padding-left:26px;padding-right:26px}
@media(max-width:640px){.site-head .wrap{padding-left:15px;padding-right:15px}}
/* ===== v123: external header FULL nahi — side par thora gap =====
   User: header bilkul full width na karo, thora kam rakho,
   sidon par thora khali gap do. Is liye external (non-app)
   pages par header container 1800px par capped hai — bari
   screen par dono taraf saaf gap rehta hai. Admin/account
   ka header full width hi rehta hai (body.app-full). */
body:not(.app-full) .site-head .wrap{max-width:1800px}
/* ===== v124: admin sidebar MERGED + JS hover pill + SOLD OUT badge =====
   User: sidebar ka alag floating card khatam — page mein merge/flush
   panel ho, apna proper scroll, hr row ke bad divider, tamam icons
   mukammal (Invoices ka icon missing tha), hover JS-based (sliding
   pill). Sold out par fan ke corner par SOLD OUT badge. */
/* (1) Merged flush sidebar — sirf bari screen par (mobile layout wesa hi) */
@media(min-width:1025px){
.admin-shell{gap:34px}
.admin-side{background:#fff;border:0;border-right:1px solid #E7EDEA;border-radius:0;box-shadow:none;margin:-30px 0 0 -26px;padding:36px 16px 18px 26px;top:64px;height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#C9D8D7 transparent}
.admin-side::-webkit-scrollbar{width:5px}
.admin-side::-webkit-scrollbar-thumb{background:#C9D8D7;border-radius:99px}
.admin-side::-webkit-scrollbar-track{background:transparent}
}
/* (2) Rows + hr row ke bad divider */
.admin-side .anav{border-bottom:1px solid #EDF2EF;padding-top:10px;padding-bottom:10px;position:relative;z-index:1}
.admin-side .anav[href="/"]{border-bottom:0}
.admin-side .anav-group{padding-left:2px}
/* (3) Active state route-based .on — purana permanent Dashboard gradient khatam */
.admin-side .anav[href="/admin"]:not(.on){background:transparent;box-shadow:none;color:var(--ink2);font-weight:500}
.admin-side .anav.on{background:linear-gradient(120deg,#115B5E,#14B4B8 55%,#0D9094);color:#fff;font-weight:500;box-shadow:0 12px 22px -10px rgba(5,150,145,.5);border-bottom-color:transparent}
.admin-side .anav.on::before{background-color:rgba(255,255,255,.94);border-color:rgba(255,255,255,.65)}
.admin-side .anav.on .nav-badge{background:#fff;color:#B91C1C}
/* hover ab JS pill se hai — CSS ka purana slide/translate khatam */
.admin-side .anav:hover{transform:none;background:transparent}
.admin-side .anav.on:hover{background:linear-gradient(120deg,#115B5E,#14B4B8 55%,#0D9094)}
.anav-pill{position:absolute;left:26px;right:16px;top:0;height:42px;border-radius:10px;background:linear-gradient(120deg,rgba(5,150,145,.13),rgba(13,144,148,.09));box-shadow:inset 0 0 0 1px rgba(5,150,145,.16);opacity:0;transition:transform .3s cubic-bezier(.22,.9,.28,1),height .3s cubic-bezier(.22,.9,.28,1),opacity .2s ease;pointer-events:none;z-index:0}
/* (4) Invoices icon — missing tha, baqi icons jesi style */
.anav[href="/admin/invoices"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202h12v20l-2-1.4L14%2022l-2-1.4L10%2022l-2-1.4L6%2022z'/%3E%3Cpath%20d='M9.5%207.5h5'/%3E%3Cpath%20d='M9.5%2011.5h5'/%3E%3C/svg%3E")}
/* (5) SOLD OUT badge — fan ke top-right corner par */
.fan-badge.fb-sold{background:linear-gradient(120deg,#DC2626,#B91C1C);color:#fff;letter-spacing:.07em;box-shadow:0 10px 20px -6px rgba(220,38,38,.55)}
/* ===== v125: header premium redesign =====
   User: header buht simple hai, behter design do. Cart sab se
   right par (Register/Logout ke bad bhi), cart ki pill/chip
   khatam, Login/Register proper buttons site ke button design
   mein. Nav links pill hover, brand hairline emerald→gold,
   logo ke peeche halki glow. */
/* hairline — brand rangon mein (purani blue wali override) */
.site-head::after{background:linear-gradient(90deg,transparent,#059669 16%,#0D9488 44%,#D97706 76%,#F59E0B 92%,transparent);height:2px;opacity:.6}
/* header surface — halki si tint ke sath glass */
.site-head{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(247,251,249,.92))}
/* logo icon ke peeche soft emerald glow */
.brand-mark{position:relative;z-index:0}
.brand-mark::after{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.40),rgba(16,185,129,0) 68%);filter:blur(6px);z-index:-1;pointer-events:none}
/* nav links — pill design (desktop) */
@media(min-width:1025px){
.main-nav{gap:9px}
.main-nav .nav-link.lnk-pub{border-radius:99px;padding:9px 15px}
.main-nav .nav-link.lnk-pub:hover{background:rgba(16,185,129,.10);color:#065F46;text-decoration:none}
.main-nav .nav-link.lnk-pub.active{background:linear-gradient(120deg,rgba(5,150,105,.17),rgba(13,148,136,.12));color:#065F46;box-shadow:inset 0 0 0 1px rgba(5,150,105,.28)}
}
/* auth buttons — proper buttons, ek jesi height */
.auth-row{display:inline-flex;align-items:center;}
.auth-row .btn{padding:10px 20px;border-radius:12px;font-size:14px}
.auth-row .btn-ghost:hover{border-color:#059669;color:#065F46;background:rgba(16,185,129,.08)}
/* cart — chip/pill KHATAM, sirf plain icon + amount + badge */
.cart-btn .cb-ico{width:auto;height:auto;padding:3px;background:none;border:none;box-shadow:none;border-radius:0;color:#047857;transition:transform .2s ease,color .2s ease}
.cart-btn .cb-ico svg{width:23px;height:23px}
.cart-btn:hover .cb-ico{transform:translateY(-1px)}
.cart-btn .cart-badge{top:-6px;right:-9px}
/* mobile dropdown mein auth buttons poori width ke sath saaf */
@media(max-width:1024px){
.main-nav .auth-row{margin-top:10px;display:flex}
.main-nav .auth-row .btn{flex:1;justify-content:center;text-align:center}
}
/* ===== v126: header ghost button fix =====
   .btn-ghost ki purani rules baad wali .btn redefinitions se
   dab gayi thin — header mein Login safed par safed aa raha
   tha. Ab header ke ghost button (Login/Logout) ki apni
   scoped styling hai jo hamesha jeetegi. */
.main-nav .auth-row .btn-ghost,.main-nav .btn-ghost.lnk-out-d{background:#fff;color:#0B3B2C;border:1.5px solid rgba(4,120,87,.5);box-shadow:0 6px 16px -10px rgba(6,60,40,.35)}
.main-nav .auth-row .btn-ghost:hover,.main-nav .btn-ghost.lnk-out-d:hover{background:rgba(16,185,129,.08);color:#065F46;border-color:#059669}
/* ===== v127: buttons CLEAN system =====
   User: buttons ajib se hain — side par pill/rectangle border
   aur kaale wedge nazar ate hain. Wajah purana cut-corner
   system tha: button ka face ::after par clipped shape mein,
   neeche ::before ki dark "edge" 4px shift hui hui, aur
   element ki apni border baghair clip ke poora rectangle
   bana deti thi — teeno layers apas mein misalign thay.
   Ab: koi clip NAHI, koi offset edge NAHI — saaf rounded
   buttons, gradient element par hi, hover par shine sweep. */
.btn{clip-path:none!important;overflow:hidden;background:linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E);border:1.5px solid transparent;color:#fff}
.btn::before{display:none!important}
.btn::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);}
.btn:hover::after{left:135%}
.btn:hover{transform:translateY(-1px)}
.btn-sm{border-radius:10px}
.btn-amber{background:linear-gradient(135deg,#FBBF24,#F59E0B 55%,#D97706);color:#fff}
.btn-danger{background:linear-gradient(135deg,#EF4444,#DC2626 60%,#B91C1C);box-shadow:0 12px 24px -12px rgba(220,38,38,.5),inset 0 1px 0 rgba(255,255,255,.25);color:#fff}
.btn-ghost{background:#fff;color:#0B3B2C;border-color:rgba(4,120,87,.5);box-shadow:0 6px 16px -10px rgba(6,60,40,.35)}
.btn-ghost:hover{background:rgba(16,185,129,.08);color:#065F46;border-color:#059669}
.btn-google{background:#fff;color:#1F2937;border-color:rgba(10,24,48,.18);box-shadow:0 6px 16px -10px rgba(10,24,48,.3)}
.btn-light{background:#fff;color:#065F46;box-shadow:0 12px 24px -12px rgba(3,40,28,.45)}
.btn-light:hover{background:#ECFDF5;color:#065F46}
.btn-outline{background:transparent;color:#065F46;border-color:rgba(4,120,87,.55);box-shadow:none}
.btn-outline:hover{background:rgba(16,185,129,.08);color:#065F46}
/* halki faces par shine emerald tint ki (safed shine nazar nahi ati) */
.btn-ghost::after,.btn-google::after,.btn-light::after,.btn-outline::after,.pg-cta .btn-light::after{background:linear-gradient(100deg,transparent,rgba(5,150,105,.14),transparent)}
/* ===== v128: footer payment strip spacing =====
   User: payment coins neeche wali border line se touch ho
   rahe hain (mobile + desktop dono). Strip mein bottom
   padding hi nahi thi — ab andar ki taraf saaf gap hai. */
.foot-pay-strip{padding-bottom:24px}
/* ===== v129: slogan full logo width + Google icon + auth buttons =====
   User: (1) logo ke neeche wala slogan POORE logo name ke
   neeche ana chahiye — characters ke darmiyan space usi
   hisab se (tagline ab flex se name ki full width par
   barabar phailti hai, har size par exact); (2) Login
   button center mein (auth forms ke submit ab full width);
   (3) Google button ka icon official multicolor G. */
.brand-tag{display:flex;justify-content:space-between;align-items:center;width:100%;letter-spacing:0}
.brand-tag .bt-sp{width:.85em}
.btn-google{width:100%;border:1.5px solid rgba(10,24,48,.18);clip-path:none}
.btn-google::before,.btn-google::after{display:none!important}
.g-mark{display:inline-flex;line-height:0;color:inherit}
.g-mark svg{width:20px;height:20px;display:block}
body:not(.app-full) .form-card > button.btn{width:100%}
/* ===== v130: EK hi button style poori site par =====
   User: kahin bhi button style main button style se alag
   na ho. Is liye tamam buttons ke parameters ek kar diye:
   radius 12px, padding rhythm ek, border 1.5px, shadow ki
   ek hi zubaan — sirf rang role ke hisab se (primary
   emerald, accent gold, white/google, outline, danger). */
.btn,.btn-sm{border-radius:12px}
.btn{padding:12px 24px}
.btn-sm{padding:9px 18px}
.btn-google{padding:12px 24px;font-size:15px;border-radius:12px}
/* account tab bar bhi usi family mein */
.acc-tabs{border-radius:16px}
.acc-tab{border-radius:12px}
/* header ke icon buttons bhi wohi radius */
.nav-toggle{border-radius:12px}
.drawer-close{border-radius:12px}
/* ===== v131: button uniformity — bachi hui mukhtalif jaghen =====
   Sweep mein 3 jagah main style se alag mili theen: (1)
   newsletter Subscribe pill (999px) tha — ab 12px; (2)
   header ka Logout button purani rule se radius 8px aur
   chhoti padding par tha — ab baqi header buttons jesa;
   (3) bari .btn ki oonchai jagah jagah 46/49/50 thi —
   min-height 50px (aur .btn-sm 42px) se har size class ki
   oonchai bhi ek ho gayi; login par Log In aur Google
   button ab bilkul barabar hein. */
.news-band form .btn.nl-go{border-radius:12px}
.news-band form .btn.nl-go::before,.news-band form .btn.nl-go::after{border-radius:12px}
.main-nav a.btn.lnk-out-d{border-radius:12px;padding:10px 20px}
.btn{min-height:50px}
.btn-sm{min-height:42px}
/* ===== v132: arrow button pilot (SIRF home) + toggle restyle =====
   (A) User ki circled reference wala button: dono taraf
   nok-daar (chevron) shape, right par gehra arrow cap
   jisme "»"; rang hamare template ke — primary emerald,
   accent gold. PEHLE SIRF HOME PAR (body.pg-home scope);
   baqi pages par purana style barqarar.
   (B) Toggle (on/off) switch reference jesa: bara pill
   track, ON par emerald gradient + glow, track par
   ON/OFF lafz, safed knob power nishan ke sath. */
body.pg-home .btn{isolation:isolate;border:none;}
body.pg-home .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E);background-size:160% 100%;transition:background-position .35s ease}
body.pg-home .btn:hover::before{background-position:100% 0}
body.pg-home .btn::after{align-items:center;justify-content:center;}
body.pg-home .btn-amber::before{background:linear-gradient(135deg,#FBBF24,#F59E0B 55%,#D97706);background-size:160% 100%}
body.pg-home .btn-amber::after{background:linear-gradient(135deg,#D97706,#92400E)}
body.pg-home .btn-ghost::before,body.pg-home .btn-light::before{background:#fff}
body.pg-home .btn-outline::before{background:rgba(255,255,255,.16)}
body.pg-home .btn-sold::before{background:#E7ECEA}
body.pg-home .btn-sold::after{display:none}
body.pg-home .btn-sold{padding-right:26px}
body.pg-home .news-band form .btn{margin-left:10px}
/* (B) Toggle switch — reference style */
.switch{width:58px;height:32px;flex:none}
.switch .sl{background:#E4EBE8;border-radius:999px;box-shadow:inset 0 2px 5px rgba(10,24,48,.14);transition:background .3s,box-shadow .3s}
.switch .sl::before{width:26px;height:26px;left:3px;top:3px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.3 6.5a8 8 0 1 0 11.4 0'/%3E%3C/svg%3E");background-size:13px;background-position:center;background-repeat:no-repeat;transition:transform .3s cubic-bezier(.4,1.4,.4,1)}
.switch .sl::after{content:"OFF";position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:8.5px;font-weight:500;letter-spacing:.06em;color:#8CA39B}
.switch input:checked + .sl{background:linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E);box-shadow:0 0 0 3px rgba(16,185,129,.16),0 8px 20px -4px rgba(13,148,136,.6)}
.switch input:checked + .sl::before{transform:translateX(26px)}
.switch input:checked + .sl::after{content:"ON";left:10px;right:auto;color:#fff}
body.pg-home .btn.btn-ghost,body.pg-home .btn.btn-light,body.pg-home .btn.btn-outline{background:transparent;border-color:transparent;box-shadow:none}
/* ===== v134: arrow pilot — mobile hero fix =====
   Mobile par hero ke dono arrow buttons ek hi line mein
   fit nahi ho rahe thay (purani nowrap rule) — ab wrap
   hokar ek ke neeche ek center mein ate hain, padding
   bhi mobile par thodi kam. */
@media(max-width:640px){
  body.pg-home .hero-cta{flex-wrap:wrap}
  body.pg-home .hero-cta .btn{padding:11px 54px 11px 26px}
}
body.pg-home .btn::before{height:100%;}
body.pg-home .btn-outline::before{background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 50%);background-color:rgba(255,255,255,.10)}
body.pg-home .btn:hover::after{filter:brightness(1.18)}
body.pg-home .hero-cta .btn,body.pg-home .pg-cta-btns .btn,body.pg-home .main-nav .auth-row .btn{filter:none}
body.pg-home .hero-cta .btn:first-child,body.pg-home .pg-cta-btns .btn:first-child,body.pg-home .main-nav .auth-row .btn:first-child{padding-right:34px}
body.pg-home .hero-cta .btn:first-child::after,body.pg-home .pg-cta-btns .btn:first-child::after,body.pg-home .main-nav .auth-row .btn:first-child::after{display:none}
body.pg-home .hero-cta .btn:nth-child(2),body.pg-home .pg-cta-btns .btn:nth-child(2),body.pg-home .main-nav .auth-row .btn:nth-child(2){padding-left:36px}
/* chhote (btn-sm) pairs — header/drawer Login+Register */
body.pg-home .main-nav .auth-row .btn:first-child{padding-right:28px}
body.pg-home .main-nav .auth-row .btn:nth-child(2){padding-left:30px}
/* ---- MERGED pairs (stacked, mobile hero/CTA) ---- */
@media(max-width:640px){
  body.pg-home .hero-cta .btn:first-child,body.pg-home .pg-cta-btns .btn:first-child{padding-right:54px;padding-bottom:20px}
  body.pg-home .hero-cta .btn:first-child::before,body.pg-home .pg-cta-btns .btn:first-child::before{clip-path:polygon(13px 0,100% 0,100% calc(100% - 12px),calc(50% + 16px) calc(100% - 12px),50% 100%,calc(50% - 16px) calc(100% - 12px),13px calc(100% - 12px),0 50%);-webkit-clip-path:polygon(13px 0,100% 0,100% calc(100% - 12px),calc(50% + 16px) calc(100% - 12px),50% 100%,calc(50% - 16px) calc(100% - 12px),13px calc(100% - 12px),0 50%)}
  body.pg-home .hero-cta .btn:nth-child(2),body.pg-home .pg-cta-btns .btn:nth-child(2){padding-left:26px;padding-top:20px}
  body.pg-home .hero-cta .btn:nth-child(2)::before,body.pg-home .pg-cta-btns .btn:nth-child(2)::before{clip-path:polygon(13px 12px,calc(50% - 16px) 12px,50% 0,calc(50% + 16px) 12px,100% 12px,100% 100%,13px 100%,0 50%);-webkit-clip-path:polygon(13px 12px,calc(50% - 16px) 12px,50% 0,calc(50% + 16px) 12px,100% 12px,100% 100%,13px 100%,0 50%)}
}
/* ===== v136: merged pairs — mobile par lazmi stack =====
   Mobile par hero ke dono buttons ek row mein fit ho
   kar seam kharab kar rahe thay — ab hero/CTA pairs
   mobile par lazmi ek ke neeche ek (column) honge,
   taake stacked wala interlock (neeche point + upar
   notch) sahi lage. */
@media(max-width:640px){
  body.pg-home .hero-cta,body.pg-home .pg-cta-btns{flex-direction:column;align-items:stretch}
}
/* ===== v137: andar GLOW + mobile pairs EK row mein =====
   (1) User: "button ke ander bhi glow ho, simple na
   hon" — har arrow button ke face mein ab andar ki
   roshni (upar se radial glow + gloss + neeche halki
   shade) aur bahar rang wali halo; cap ka "»" bhi
   halka chamakta hai, hover par glow barh jati hai.
   (2) Mobile par hero/CTA ke jore ab stack NAHI honge —
   mobile ke hisab se chhote karke EK hi row mein
   merged rahenge (desktop par bhi ek row hi hai). */
body.pg-home .btn::before{background-image:radial-gradient(120% 90% at 25% 0%,rgba(255,255,255,.38),rgba(255,255,255,0) 52%),linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(0,0,0,.13),rgba(0,0,0,0) 42%),linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E)}
body.pg-home .btn-amber::before{background-image:radial-gradient(120% 90% at 25% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(120,53,15,.16),rgba(0,0,0,0) 42%),linear-gradient(135deg,#FBBF24,#F59E0B 55%,#D97706)}
body.pg-home .btn-ghost::before,body.pg-home .btn-light::before{background-image:radial-gradient(120% 90% at 25% 0%,rgba(16,185,129,.16),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0) 50%);background-color:#fff}
body.pg-home .btn-amber{filter:drop-shadow(0 10px 16px rgba(146,64,14,.30)) drop-shadow(0 0 13px rgba(245,158,11,.48))}
body.pg-home .btn-ghost,body.pg-home .btn-light{filter:drop-shadow(0 10px 16px rgba(6,60,45,.20)) drop-shadow(0 0 12px rgba(16,185,129,.30))}
body.pg-home .btn-outline{filter:drop-shadow(0 10px 16px rgba(6,60,45,.25)) drop-shadow(0 0 12px rgba(45,212,191,.35))}
body.pg-home .btn::after{text-shadow:0 0 9px rgba(255,255,255,.85)}
body.pg-home .btn:hover{filter:drop-shadow(0 12px 20px rgba(6,60,45,.30)) drop-shadow(0 0 20px rgba(16,185,129,.55))}
body.pg-home .btn-amber:hover{filter:drop-shadow(0 12px 20px rgba(146,64,14,.32)) drop-shadow(0 0 20px rgba(245,158,11,.62))}
/* ---- mobile: pairs compact, EK row ---- */
@media(max-width:640px){
  body.pg-home .hero-cta,body.pg-home .pg-cta-btns{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center}
  body.pg-home .hero-cta .btn,body.pg-home .pg-cta-btns .btn{font-size:13px;min-height:44px;white-space:nowrap}
  body.pg-home .hero-cta .btn:first-child,body.pg-home .pg-cta-btns .btn:first-child{padding:10px 24px 10px 18px}
  body.pg-home .hero-cta .btn:first-child::before,body.pg-home .pg-cta-btns .btn:first-child::before{clip-path:polygon(13px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,13px 100%,0 50%);-webkit-clip-path:polygon(13px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,13px 100%,0 50%)}
  body.pg-home .hero-cta .btn:nth-child(2),body.pg-home .pg-cta-btns .btn:nth-child(2){padding:10px 44px 10px 26px}
  body.pg-home .hero-cta .btn:nth-child(2)::before,body.pg-home .pg-cta-btns .btn:nth-child(2)::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%)}
  body.pg-home .hero-cta .btn::after,body.pg-home .pg-cta-btns .btn::after{width:38px;font-size:16px}
}
@media(max-width:380px){
  body.pg-home .hero-cta .btn,body.pg-home .pg-cta-btns .btn{font-size:12px}
  body.pg-home .hero-cta .btn:first-child,body.pg-home .pg-cta-btns .btn:first-child{padding:9px 20px 9px 15px}
  body.pg-home .hero-cta .btn:nth-child(2),body.pg-home .pg-cta-btns .btn:nth-child(2){padding:9px 40px 9px 22px}
}
/* ===== v138: iOS purity — clip-paths % mein + press saaf =====
   (1) Register (signup) button iPhone par phir bhi
   kharab tha: iOS Safari clip-path ke polygon mein
   calc() support nahi karta — declaration invalid
   hone se cap/shape bigar jati thi. Ab TAMAM polygons
   sirf % par hain (har browser mein chalte hain) aur
   cap ki position inset-stretch par hai.
   (2) Press karne par rectangle/border nazar ati thi —
   iOS ki default tap-highlight aur focus ring hexagon
   ke gird chaukor shape bana dete thay; dono band. */
body.pg-home .btn::before{clip-path:polygon(9% 0,100% 0,100% 100%,9% 100%,0 50%);-webkit-clip-path:polygon(9% 0,100% 0,100% 100%,9% 100%,0 50%)}
body.pg-home .btn-sm::before{clip-path:polygon(11% 0,100% 0,100% 100%,11% 100%,0 50%);-webkit-clip-path:polygon(11% 0,100% 0,100% 100%,11% 100%,0 50%)}
body.pg-home .btn::after{bottom:0;}
body.pg-home .btn-sm::after{clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%,28% 50%);-webkit-clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%,28% 50%)}
/* merged pairs — % polygons */
body.pg-home .hero-cta .btn:first-child::before,body.pg-home .pg-cta-btns .btn:first-child::before,body.pg-home .main-nav .auth-row .btn:first-child::before{clip-path:polygon(9% 0,92% 0,100% 50%,92% 100%,9% 100%,0 50%);-webkit-clip-path:polygon(9% 0,92% 0,100% 50%,92% 100%,9% 100%,0 50%)}
body.pg-home .hero-cta .btn:nth-child(2)::before,body.pg-home .pg-cta-btns .btn:nth-child(2)::before,body.pg-home .main-nav .auth-row .btn:nth-child(2)::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9% 50%);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9% 50%)}
body.pg-home .main-nav .auth-row .btn:first-child::before{clip-path:polygon(11% 0,93% 0,100% 50%,93% 100%,11% 100%,0 50%);-webkit-clip-path:polygon(11% 0,93% 0,100% 50%,93% 100%,11% 100%,0 50%)}
body.pg-home .main-nav .auth-row .btn:nth-child(2)::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10% 50%);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10% 50%)}
@media(max-width:640px){
  body.pg-home .hero-cta .btn:first-child::before,body.pg-home .pg-cta-btns .btn:first-child::before{clip-path:polygon(9% 0,92% 0,100% 50%,92% 100%,9% 100%,0 50%);-webkit-clip-path:polygon(9% 0,92% 0,100% 50%,92% 100%,9% 100%,0 50%)}
  body.pg-home .hero-cta .btn:nth-child(2)::before,body.pg-home .pg-cta-btns .btn:nth-child(2)::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9% 50%);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9% 50%)}
}
/* press / tap — koi rectangle, border ya ring nahi */
a,button,.btn{-webkit-tap-highlight-color:transparent}
/* ===== v140: arrow SVG (crash fix: intrinsic size) =====
   iPhone par clip-path layers bar bar bigarte thay —
   ab poori shape (body + cap + gloss) ek hi SVG
   background hai jo button ke box mein stretch hoti
   hai: upar-neeche bilkul symmetric, arrow ke baad
   button ki koi shape nazar ana mumkin hi nahi.
   "»" sirf ek text nishan hai (koi layer/clip nahi). */
body.pg-home .btn{background-repeat:no-repeat;background-size:100% 100%;background-position:center;}
body.pg-home .btn::before{display:none!important}
body.pg-home .btn::after{left:auto;clip-path:none;-webkit-clip-path:none;}
body.pg-home .btn.btn-sold::after{display:none}
body.pg-home .btn.btn-amber,body.pg-home .btn.btn-ghost,body.pg-home .btn.btn-light,body.pg-home .btn.btn-outline,body.pg-home .btn.btn-sold{background-size:100% 100%;background-repeat:no-repeat;background-position:center}
/* ===== v141: CRASH FIX — drop-shadow filters khatam =====
   iPhone par burger/zoom se page crash ho rahi thi:
   arrow buttons par lage double drop-shadow filters
   (aur joron ke container filters) iOS ke renderer
   par itna bojh dal rahe thay ke zoom/drawer par
   page band ho jati thi. Ab pg-home scope mein tamam
   button filters band — andar wali glow/gloss SVG
   ke andar hi hai, wo barqarar hai. */
body.pg-home .btn,body.pg-home .btn:hover,body.pg-home .btn-amber,body.pg-home .btn-amber:hover,body.pg-home .btn-ghost,body.pg-home .btn-light,body.pg-home .btn-outline{filter:none!important}
body.pg-home .hero-cta:has(> .btn:nth-child(2)),body.pg-home .pg-cta-btns:has(> .btn:nth-child(2)),body.pg-home .main-nav .auth-row:has(> a.btn + a.btn){filter:none!important}
body.pg-home .btn.btn-amber{background-image:url("/assets/btn/single-am.svg?v=143")}
body.pg-home .btn.btn-ghost,body.pg-home .btn.btn-light{background-image:url("/assets/btn/single-wh.svg?v=143")}
body.pg-home .btn.btn-outline{background-image:url("/assets/btn/single-gl.svg?v=143")}
body.pg-home .btn.btn-sold{background-image:url("/assets/btn/sold.svg?v=143")}
body.pg-home .hero-cta .btn:first-child,body.pg-home .pg-cta-btns .btn:first-child,body.pg-home .main-nav .auth-row .btn:first-child{background-image:url("/assets/btn/first-em.svg?v=143")}
body.pg-home .hero-cta .btn.btn-amber:first-child,body.pg-home .pg-cta-btns .btn.btn-amber:first-child,body.pg-home .main-nav .auth-row .btn.btn-amber:first-child{background-image:url("/assets/btn/first-am.svg?v=143")}
body.pg-home .hero-cta .btn.btn-ghost:first-child,body.pg-home .pg-cta-btns .btn.btn-ghost:first-child,body.pg-home .main-nav .auth-row .btn.btn-ghost:first-child,body.pg-home .hero-cta .btn.btn-light:first-child,body.pg-home .pg-cta-btns .btn.btn-light:first-child,body.pg-home .main-nav .auth-row .btn.btn-light:first-child{background-image:url("/assets/btn/first-wh.svg?v=143")}
body.pg-home .hero-cta .btn.btn-outline:first-child,body.pg-home .pg-cta-btns .btn.btn-outline:first-child,body.pg-home .main-nav .auth-row .btn.btn-outline:first-child{background-image:url("/assets/btn/first-gl.svg?v=143")}
body.pg-home .hero-cta .btn:nth-child(2),body.pg-home .pg-cta-btns .btn:nth-child(2),body.pg-home .main-nav .auth-row .btn:nth-child(2){background-image:url("/assets/btn/second-em.svg?v=143")}
body.pg-home .hero-cta .btn.btn-amber:nth-child(2),body.pg-home .pg-cta-btns .btn.btn-amber:nth-child(2),body.pg-home .main-nav .auth-row .btn.btn-amber:nth-child(2){background-image:url("/assets/btn/second-am.svg?v=143")}
body.pg-home .hero-cta .btn.btn-ghost:nth-child(2),body.pg-home .pg-cta-btns .btn.btn-ghost:nth-child(2),body.pg-home .main-nav .auth-row .btn.btn-ghost:nth-child(2),body.pg-home .hero-cta .btn.btn-light:nth-child(2),body.pg-home .pg-cta-btns .btn.btn-light:nth-child(2),body.pg-home .main-nav .auth-row .btn.btn-light:nth-child(2){background-image:url("/assets/btn/second-wh.svg?v=143")}
body.pg-home .hero-cta .btn.btn-outline:nth-child(2),body.pg-home .pg-cta-btns .btn.btn-outline:nth-child(2),body.pg-home .main-nav .auth-row .btn.btn-outline:nth-child(2){background-image:url("/assets/btn/second-gl.svg?v=143")}
/* ===== v144: PILOT OFF — crash bisect step 1 =====
   Zoom par crash barqarar hai, is liye home ke arrow
   buttons ka poora pilot band karke buttons purane
   mehfooz rounded style par wapas hain. Agar crash
   band ho jaye to wajah buttons mein confirm hogi,
   aur arrow design mehfooz tareeqe se wapas ayega. */
body.pg-home .btn{background-color:transparent;overflow:visible!important;}
body.pg-home .hero-cta,body.pg-home .pg-cta-btns{gap:12px!important;filter:none!important}
/* ===== v145: BISECT STEP 2 — carousel reflection OFF =====
   Sirf tab deploy karna hai jab v144 (buttons pilot off)
   par bhi zoom crash aye. Hero carousel ki
   -webkit-box-reflect iOS par crash ki mashhoor wajah
   hai — ye band karke test hoga. */
.hc-slide.is-center{-webkit-box-reflect:none!important}
/* ===== v146: BISECT STEP 3 — canvas + glass band (sirf tayyar) =====
   Sirf tab deploy karna hai jab v145 (reflection off)
   par bhi zoom crash aye. Home par tamam canvas
   animations chhupa kar aur backdrop-filter (glass
   blur) band karke test hoga — ye dono iOS renderer
   par sab se bhaari bojh hain. */
body.pg-home canvas{display:none!important}
body.pg-home *,body.pg-home *::before,body.pg-home *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* ===== v153: TALPEXO-STYLE CUT-CORNER BUTTONS (home) =====
   User ki hidayat: talpexo walay old buttons wapas.
   Technique halki aur mehfooz hai — ek hi element par
   sirf % mein clip-path (iOS par calc mana hai), koi
   layer, filter, SVG ya shadow nahi; shade button se
   bahar ja hi nahi sakti. Rang store ke apne
   (emerald/gold/white). Canvas/blur/reflection band
   barqarar — crash-free halat par sirf button style
   badla hai. */
body.pg-home .btn{filter:none!important;padding:14px 30px}
body.pg-home .btn{background:linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E)}
body.pg-home .btn-amber{background:linear-gradient(135deg,#FBBF24,#F59E0B 55%,#D97706)}
body.pg-home .btn-ghost,body.pg-home .btn-light{background:#FFFFFF;border:1.5px solid #0D9488}
body.pg-home .btn-outline{background:rgba(16,185,129,.08);border:1.5px solid #10B981}
body.pg-home .btn-sold{background:#E7ECEA;border:none}
body.pg-home .btn::after{font-weight:500;}
body.pg-home .btn-sm{padding:11px 24px}
body.pg-home .btn:hover{transform:translateY(-2px)}
body.pg-home .btn-ghost,body.pg-home .btn-light,body.pg-home .btn-outline,body.pg-home .btn-sold{background-image:none!important}
body.pg-home .btn::after{margin-left:10px!important}
@media (max-width:640px){
}
/* ===== v157: buttons rich + ek row + hover/press =====
   (1) Jor walay buttons mobile par bhi EK row mein —
   compact size, stacking khatam. (2) Buttons ab saada
   nahi: andar hi upar ki chamak (gloss) aur neeche ki
   halki shade background ki layers mein hai — bahar
   kuch nahi jata. Safed (2nd) button bhi ab bhara hua
   mint rang hai, sirf outline nahi. (3) Hover par
   halka sa uthta + rang roshan + arrow aage sarakta
   hai; dabane par andar ko press effect; click/focus
   par koi extra border ya outline nahi banti. */
body.pg-home .btn{background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(0,40,25,.16),rgba(0,40,25,0) 42%),linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E)!important}
body.pg-home .btn-amber{background-image:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(80,40,0,.15),rgba(80,40,0,0) 42%),linear-gradient(135deg,#FBBF24,#F59E0B 55%,#D97706)!important}
body.pg-home .btn-ghost,body.pg-home .btn-light{background-image:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 50%),linear-gradient(180deg,#FFFFFF,#D8EDDF)!important}
body.pg-home .btn{transition:transform .18s ease,background-image .18s ease}
body.pg-home .btn::after{transition:transform .18s ease}
@media (hover:hover){
  body.pg-home .btn:hover{transform:translateY(-2px)}
  body.pg-home .btn-em-hover,body.pg-home .btn:hover{background-image:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(0,40,25,.16),rgba(0,40,25,0) 42%),linear-gradient(135deg,#34D399,#14B8A6 55%,#0D9488)!important}
  body.pg-home .btn-amber:hover{background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(80,40,0,.15),rgba(80,40,0,0) 42%),linear-gradient(135deg,#FCD34D,#FBBF24 55%,#F59E0B)!important}
  body.pg-home .btn-ghost:hover,body.pg-home .btn-light:hover{background-image:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 50%),linear-gradient(180deg,#FFFFFF,#C9E7D8)!important}
}
body.pg-home .btn:active{transform:translateY(0) scale(.99)!important}
body.pg-home .btn:focus,body.pg-home .btn:focus-visible,body.pg-home .btn:active{outline:none!important;box-shadow:none!important}
@media (max-width:640px){
  body.pg-home .hero-cta,body.pg-home .pg-cta-btns{flex-wrap:nowrap!important;justify-content:center!important;gap:10px!important}
  body.pg-home .hero-cta .btn,body.pg-home .pg-cta-btns .btn{white-space:nowrap}
}
@media (max-width:380px){
  body.pg-home .hero-cta .btn,body.pg-home .pg-cta-btns .btn{font-size:12px;padding:11px 11px}
}
@media (max-width:640px){
  body.pg-home .hero-cta .btn,body.pg-home .pg-cta-btns .btn{flex:1 1 0;min-width:0;padding:11px 8px;justify-content:center;text-align:center}
}
/* ===== v160: FRIENDLY ROUNDED BUTTONS (cut-corner khatam) =====
   User ka faisla: kata hua shape is site ke soft design
   se friendly nahi, aur iPhone par safed button ka frame
   jagah jagah se bahar nikalta hai. Buttons ab site ke
   apne rounded (12px) style mein hain — gloss/shade
   andar, hover/press effects, jor ek row mein; koi
   clip-path ya frame wali chaal nahi, is liye har
   browser mein saaf aur mehfooz. */
body.pg-home .btn{clip-path:none!important;-webkit-clip-path:none!important;}
body.pg-home .btn.btn-ghost,body.pg-home .btn.btn-light{border:1.5px solid rgba(13,148,136,.35)!important}
body.pg-home .btn.btn-outline{border:1.5px solid rgba(16,185,129,.55)!important}
/* ===== v162: BUTTON GAP RULE — har page, har jor =====
   User ka pakka usool: buttons kahin bhi aapas mein
   juray hue NAHI hon ge — har jor ke darmiyan gap
   lazmi hai. Purani merged-pair wali gap:0 rule
   khatam; tamam joron mein kam az kam 10-12px gap. */
body.pg-home .hero-cta:has(> .btn:nth-child(2)),body.pg-home .pg-cta-btns:has(> .btn:nth-child(2)),body.pg-home .main-nav .auth-row:has(> a.btn + a.btn){gap:12px!important}
.inv-actions{gap:10px!important}
/* ===== v163: PILL + BADGE (user ki reference) =====
   Round button rakhna hai to AISA: poori gol pill,
   gradient, aur right kinare par andar ek gol badge
   jiss mein arrow hai. Rang store ke apne (emerald /
   gold / mint) — style reference wala. Badge button ke
   andar hi rehta hai, text us ke neeche nahi jata. */
body.pg-home .btn{border-radius:999px!important;position:relative;}
body.pg-home .btn::after{right:6px;top:50%;border-radius:50%;place-items:center;margin:0;font-size:16px;line-height:1;color:#fff;background:rgba(0,0,0,.18);box-shadow:inset 0 1px 2px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.14)}
body.pg-home .btn-sm::after{font-size:14px;right:5px}
body.pg-home .btn.btn-ghost::after,body.pg-home .btn.btn-light::after,body.pg-home .btn.btn-outline::after{background:linear-gradient(135deg,#10B981,#0F766E);color:#fff!important}
body.pg-home .btn.btn-sold::after{background:rgba(0,0,0,.14)}
@media (hover:hover){
}
@media (max-width:640px){
  body.pg-home .btn::after{font-size:13px;right:5px}
  body.pg-home .hero-cta .btn,body.pg-home .pg-cta-btns .btn{font-size:12px}
}
@media (max-width:380px){
  body.pg-home .btn{padding-right:38px!important}
  body.pg-home .btn::after{width:25px;height:25px;font-size:12px}
}
/* ===== v164: har badge mein RELATED icon + soft shadow =====
   Reference ki tarah: badge ke andar har button se
   milta hua icon hai (Login = enter, Register = user+,
   Shop = bag, Services = briefcase, View = eye,
   Logout = power, Contact = mail) — jo button map na
   ho us par → rehta hai. Sath hi reference wala halka
   soft shadow button ke peeche (opar bhi nazar ata
   hai), hover par gehra, dabane par halka. */
body.pg-home .btn{box-shadow:0 6px 22px -6px rgba(6,60,45,.30)!important}
body.pg-home .btn-amber{box-shadow:0 6px 22px -6px rgba(146,64,14,.32)!important}
body.pg-home .btn-ghost,body.pg-home .btn-light,body.pg-home .btn-outline{box-shadow:0 6px 20px -7px rgba(6,60,45,.25)!important}
@media (hover:hover){
  body.pg-home .btn:hover{box-shadow:0 10px 26px -6px rgba(6,60,45,.36)!important}
}
body.pg-home .btn:active{box-shadow:0 3px 10px -4px rgba(6,60,45,.30)!important}
body.pg-home .btn::after{background-repeat:no-repeat;background-position:center;}
body.pg-home a.btn[href="/login"]::after{content:"";}
body.pg-home a.btn[href="/register"]::after{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E")}
body.pg-home a.btn[href="/logout"]::after,body.pg-home a.btn.lnk-out::after{content:"";}
body.pg-home a.btn[href="/shop"]::after{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")}
body.pg-home a.btn[href="/services"]::after,body.pg-home a.btn[href^="/service/"]::after{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E")}
body.pg-home a.btn[href^="/template/"]::after{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
body.pg-home a.btn[href="/contact"]::after{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
/* ===== v165: ghost badge fix — flat rang, icon size pakka =====
   Safed buttons ke badge mein gradient wali shorthand
   icon ki size/position ko reset kar deti thi — is
   liye wahan icon bara aur kata hua ata tha. Ab ghost
   badge ka rang flat gehra teal hai aur size/position
   mazbooti se lagi hui hai; icons ek hi layer mein. */
body.pg-home .btn.btn-ghost::after,body.pg-home .btn.btn-light::after,body.pg-home .btn.btn-outline::after{background-color:#0D9488;background-repeat:no-repeat;background-position:center;background-size:17px}
body.pg-home .btn.btn-sm.btn-ghost::after,body.pg-home .btn.btn-sm.btn-light::after,body.pg-home .btn.btn-sm.btn-outline::after{background-size:15px}
body.pg-home a.btn[href="/login"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E")}
body.pg-home a.btn[href="/logout"]::after,body.pg-home a.btn.lnk-out::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.36 6.64a9 9 0 1 1-12.73 0'/%3E%3Cline x1='12' y1='2' x2='12' y2='12'/%3E%3C/svg%3E")}
body.pg-home a.btn[href="/services"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E")}
/* ===== v166: drawer pair overflow fix + badge bara =====
   Drawer mein Register button panel se bahar ja raha
   tha (naap: 355 jabke panel 320) — flex mazbooti se
   barabar hisso mein bandha. Badge sample ke tanasub
   ke qareeb bara kiya (pill ki oonchai ka ~3/4), aur
   hero text ko left se saans di. */
.main-nav .auth-row .btn{flex:1 1 0!important;min-width:0!important}
body.pg-home .btn{padding-right:58px!important}
body.pg-home .btn::after{width:40px;height:40px;background-size:19px}
body.pg-home .btn.btn-ghost::after{background-size:19px}
body.pg-home .btn-sm{padding-right:50px!important}
body.pg-home .btn-sm::after{width:33px;height:33px;background-size:16px}
body.pg-home .btn.btn-sm.btn-ghost::after{background-size:16px}
@media (max-width:640px){
  body.pg-home .hero-cta .btn,body.pg-home .pg-cta-btns .btn{padding-left:12px}
  body.pg-home .btn{padding-right:44px!important}
  body.pg-home .btn::after{width:30px;height:30px}
}
/* ===== v167: badge position pakki (!important) =====
   Asal wajah mil gayi: talpexo walay purane block
   (v153) mein badge par position:static!important
   laga reh gaya tha — is liye badge button ke andar
   aam hisse ki tarah beh raha tha aur tang jagah par
   سکڑ kar lambotar (ellipse) ho jata tha. Ab position
   !important ke sath pakki hai: badge hamesha gol,
   hamesha right kinare par. */
body.pg-home .btn::after{position:absolute!important;display:grid!important;transform:translateY(-50%)!important}
@media (hover:hover){
  body.pg-home .btn:hover::after{transform:translate(2px,-50%)!important}
}
/* ===== v168: hero badge mobile par bhi gol =====
   Purani media rule hero badge ki width 38px kar
   deti thi jabke height 30px rehti thi — halki si
   lambotar shakal banti thi. Ab dono 30px. */
@media (max-width:640px){
  body.pg-home .hero-cta .btn::after,body.pg-home .pg-cta-btns .btn::after{width:30px;height:30px}
}
/* ===== v169: purana arrow text KHATAM — sirf icon =====
   Purane block ka content:"→"!important badge ke icon
   ke sath sath nazar aa raha tha. Ab har badge ka
   content khali hai aur sirf icon dikhta hai; jo
   button map na ho us ke badge mein saaf arrow-icon
   (line wala, text nahi) ata hai. Dashboard ke liye
   user icon bhi map kar diya. */
body.pg-home .btn::after{content:""!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")}
body.pg-home .btn.btn-ghost::after,body.pg-home .btn.btn-light::after,body.pg-home .btn.btn-outline::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")}
body.pg-home a.btn[href^="/account"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
/* ===== v170: Subscribe badge bhi gol =====
   Newsletter button ke badge par purani uniformity
   wali rule 12px radius laga rahi thi — is liye wo
   gol ke bajaye chaukor nazar ata tha. Ab 50%. */
body.pg-home .news-band form .btn.nl-go::after{border-radius:50%!important}
/* ===== v171: PILL + BADGE — POORI WEBSITE =====
   Home par pasand shuda style ab har page par hai:
   gol pill, andar gloss/shade, peeche soft shadow,
   right kinare gol badge mein har button ke maqsad
   se milta hua icon. Table ke andar ke chhote buttons
   aur Google button is se bahar hain (wahan badge
   munasib nahi). Purani shine-sweep wali ::after
   trick ab badge se badal gayi hai. */
.btn{border-radius:999px!important;position:relative;padding-right:54px!important}
.btn-sm{padding-right:46px!important}
.btn::after{content:""!important;position:absolute!important;display:grid!important;place-items:center;transform:translateY(-50%)!important;width:36px;height:36px;border-radius:50%;background-color:rgba(0,0,0,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:17px;box-shadow:inset 0 1px 2px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.14);color:#fff;pointer-events:none;z-index:2;clip-path:none!important;-webkit-clip-path:none!important}
.btn-sm::after{width:30px;height:30px;background-size:15px}
.btn{background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(0,40,25,.16),rgba(0,40,25,0) 42%),linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E)}
.btn-amber{background-image:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(80,40,0,.15),rgba(80,40,0,0) 42%),linear-gradient(135deg,#FBBF24,#F59E0B 55%,#D97706)}
.btn-ghost,.btn-light{background-image:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 50%),linear-gradient(180deg,#FFFFFF,#D8EDDF)}
.btn-ghost,.btn-light{border:1.5px solid rgba(13,148,136,.35)}
.btn-danger{background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 46%),linear-gradient(135deg,#F87171,#DC2626 55%,#B91C1C)}
.btn-sold{background-image:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 46%),linear-gradient(135deg,#9CA3AF,#6B7280)}
.btn-ghost::after,.btn-light::after,.btn-outline::after{background-color:#0D9488}
.btn-sold::after{background-color:rgba(0,0,0,.14)}
.btn{box-shadow:0 6px 22px -6px rgba(6,60,45,.30)}
.btn-amber{box-shadow:0 6px 22px -6px rgba(146,64,14,.32)}
.btn-ghost,.btn-light,.btn-outline{box-shadow:0 6px 20px -7px rgba(6,60,45,.25)}
.btn{transition:transform .18s ease,background-image .18s ease,box-shadow .18s ease}
.btn::after{transition:transform .18s ease}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -6px rgba(6,60,45,.36)}
  .btn:hover::after{transform:translate(2px,-50%)!important}
}
.btn:active{transform:translateY(0) scale(.99);box-shadow:0 3px 10px -4px rgba(6,60,45,.30)}
.btn:focus,.btn:focus-visible{outline:none!important}
.auth-row{gap:12px!important}
/* --- exceptions: table cells + Google --- */
td .btn{padding-right:12px!important;box-shadow:none}
td .btn::after{display:none!important}
td .btn:hover{transform:none}
.btn-google{padding-right:20px!important}
.btn-google::after{display:none!important}
/* --- icon map: links (maqsad ke hisaab se) --- */
a.btn[href="/login"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E")}
a.btn[href="/register"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E")}
a.btn[href="/logout"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.36 6.64a9 9 0 1 1-12.73 0'/%3E%3Cline x1='12' y1='2' x2='12' y2='12'/%3E%3C/svg%3E")}
a.btn[href="/shop"]::after,a.btn[href="/templates"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")}
a.btn[href="/services"]::after,a.btn[href^="/service/"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E")}
a.btn[href^="/template/"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
a.btn[href="/contact"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
a.btn[href="/faq"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E")}
a.btn[href="/account"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
a.btn[href^="/account/order/"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E")}
a.btn[href^="/account/invoice-pdf/"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E")}
a.btn[href^="/pay/order/"]::after,a.btn[href="/checkout"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
a.btn[href*="remove"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}
a.btn[href="/admin/template-new"]::after,a.btn[href="/admin/service-new"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='M12 18v-6'/%3E%3C/svg%3E")}
/* --- icon map: forms / buttons (maqsad ke hisaab se) --- */
form button.btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
form[action="/cart"] .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E")}
form.shop-tools .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E")}
form[action*="reorder"] .btn::after,button.btn[formaction*="-bulk"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.btn.nl-go::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E")}
.btn.more-b::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
form.admin-login .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E")}
form.form-card:has(textarea) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E")}
form.form-card:has(select[name="package"]) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E")}
body:not(.app-full) form.form-card:has(input[name="name"]):not(:has(textarea)) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E")}
body:not(.app-full) form.form-card:has(input[type="password"]):not(:has(input[name="name"])):not(:has(textarea)):not(:has(select)) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E")}
body:not(.app-full) form.form-card:has(input[type="email"]):not(:has(input[type="password"])):not(:has(textarea)):not(:has(select)):not(:has(input[name="name"])) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
form:has(input[name="action"][value^="2fa"]) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E")}
/* --- mobile: badge chhota, jor mein text clip nahi --- */
@media (max-width:640px){
  .btn{padding-right:44px!important}
  .btn::after{width:30px;height:30px;background-size:15px}
  .btn-sm{padding-right:40px!important}
  .btn-sm::after{width:26px;height:26px;background-size:13px}
  body.pg-home .hero-cta .btn,body.pg-home .pg-cta-btns .btn{font-size:11.5px}
}
/* ===== v172: rollout fixes (sweep se) =====
   (1) Form wale buttons par text badge ki taraf
   khisak raha tha — tamam buttons ka text ab center
   hai, badge apni jagah right par. (2) Cart ke Remove
   button par cart ke bajaye trash icon. (3) Checkout
   ke Place Order button par check ke bajaye lock
   (payment) icon. */
.btn{justify-content:center;text-align:center}
form:has(> input[name="action"][value="remove"]) .btn::after,form:has(input[name="action"][value="remove"]) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}
form:has(input[name="gateway"]) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
/* ===== v173: sweep round-2 fixes =====
   (1) Desktop header par Register ka text clip ho
   raha tha — auth buttons wahan natural width len ge
   (barabar taqseem sirf mobile drawer mein hai).
   (2) Home par teen buttons (Show More, Subscribe,
   All Questions) purani home-base specificity ki
   wajah se arrow par atak gaye thay — un ke asal
   icons wapas. (3) Admin ke textarea wale forms
   (Settings/Category/FAQ) par send ke bajaye check.
   (4) Form se bahar wale submit (Save Order) par
   check. (5) Print button par download icon.
   (6) Back to My Orders par left (wapas) arrow. */
@media (min-width:861px){
  .main-nav .auth-row .btn{flex:0 1 auto!important}
}
body.pg-home .btn.more-b::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
body.pg-home .btn.nl-go::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E")}
body.pg-home a.btn[href="/faq"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E")}
body:has(.admin-shell) form.form-card:has(textarea) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
button.btn[form]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
button.btn[onclick*="print"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E")}
a.btn[href="/account/orders"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E")}
/* ===== v174: asli class names ki correction =====
   Show More button ki class more-btn hai (more-b
   nahi) — us par plus icon. Save Order button
   id=saveOrder hai — us par check icon. */
.btn.more-btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
body.pg-home .btn.more-btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
#saveOrder::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
/* ===== v175: bulk Delete par trash icon =====
   Admin ki bulk bar mein Delete (btn-danger) button
   par check ke bajaye trash — maqsad ke mutabiq. */
button.btn.btn-danger[formaction]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}
/* ===== v176: CTA band text/badge takrao fix =====
   Mobile par "Browse Templates" ka akhri harf badge
   ke neeche ja raha tha — CTA jor ke liye font aur
   badge dono zara chhote, taake text ko saaf jagah
   mile. */
@media (max-width:640px){
  body.pg-home .pg-cta-btns .btn{font-size:11px;letter-spacing:-.2px;padding-right:38px!important}
  body.pg-home .pg-cta-btns .btn::after{width:28px;height:28px;background-size:14px}
}
/* ===== v177: CTA band clearance barhao =====
   "Browse Templates" ke text aur badge ke darmiyan
   saans ki jagah taqreeban sifar thi — font 10.5 aur
   badge 26 karke wazeh fasla kar diya. */
@media (max-width:640px){
  body.pg-home .pg-cta-btns .btn{font-size:10.5px}
  body.pg-home .pg-cta-btns .btn::after{width:26px;height:26px;background-size:13px}
}
/* ===== v178: press/hover par icon gayeb — FIX =====
   Asal wajah: purane shine-sweep system ki rule
   (.btn:hover::after{left:135%}) badge ko button se
   bahar dhakel deti thi aur overflow:hidden usay
   kaat deta tha. Phone par tap = hover, is liye har
   press par icon gayeb ho jata tha. Ab badge ki
   position !important se pakki hai — koi bhi purani
   state-rule usay hila nahi sakti. */
.btn::after{left:auto!important;right:6px!important;top:50%!important}
.btn-sm::after{right:5px!important}
/* ===== v179: Subscribe button overflow fix =====
   Mobile par capsule form stack hota hai aur button
   width:100% hai — desktop row ke liye lagi purani
   margin-left:10px usay capsule ke right kinare se
   bahar dhakel rahi thi. Stacked layout mein margin
   khatam. */
@media (max-width:860px){
  body.pg-home .news-band form .btn{margin-left:0}
}
/* ===== v180: fancy checkboxes + themed dropdowns =====
   Checkboxes: poori site par ek hi premium style —
   gol-kona box, checked par emerald gradient + safed
   check, darmiyani (indeterminate) halat par dash,
   press par halka sa dabna. Toggle switch (.switch)
   is se bahar hai. */
input[type="checkbox"]:not(.switch input){
  appearance:none!important;-webkit-appearance:none!important;
  width:21px!important;height:21px!important;flex:none;
  display:inline-block;vertical-align:-5px;margin:0;padding:0;
  border:2px solid rgba(12,31,23,.30);border-radius:7px;
  background-color:#fff;background-repeat:no-repeat;background-position:center;
  cursor:pointer;
  transition:border-color .18s,background-color .18s,box-shadow .18s,transform .1s;
}
input[type="checkbox"]:not(.switch input):hover{border-color:#0D9488}
input[type="checkbox"]:not(.switch input):checked{
  border-color:#0D9488;
  background-color:#0D9488;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E);
  background-size:12px,cover;
  box-shadow:0 5px 12px -4px rgba(13,148,136,.55);
}
input[type="checkbox"]:not(.switch input):indeterminate{
  border-color:#0D9488;
  background-color:#0D9488;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"),linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E);
  background-size:12px,cover;
  box-shadow:0 5px 12px -4px rgba(13,148,136,.55);
}
input[type="checkbox"]:not(.switch input):active{transform:scale(.86)}
input[type="checkbox"]:not(.switch input):focus-visible{outline:none;box-shadow:0 0 0 4px rgba(16,185,129,.28)}
input[type="checkbox"]:not(.switch input):disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
/* Dropdowns: native dohra arrow khatam — website ke
   rang ka ek saaf chevron, har select par. */
select{
  appearance:none;-webkit-appearance:none;
  padding-right:38px!important;cursor:pointer;
}
select:hover{border-color:rgba(13,148,136,.55)}
/* ===== v180.1 (v181): select chevron pakka karna =====
   .bulk-bar/.form-card jaisi purani rules background
   shorthand se chevron image ko reset kar deti thin —
   background ki tamam values ab !important ke sath. */
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D9488' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 13px center!important;
  background-size:14px!important;
}
/* ===== v182: JS checkbox + custom dropdown + bulk bar + pager + overflow ===== */
/* --- JS-enhanced checkbox (html.cb-js sirf tab jab JS chala) --- */
html.cb-js .cb-wrap{position:relative;display:inline-flex;flex:none;width:22px;height:22px;vertical-align:-6px}
html.cb-js .cb-wrap input[type="checkbox"]{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important;padding:0!important;opacity:0;cursor:pointer;z-index:2;appearance:none!important;-webkit-appearance:none!important}
html.cb-js .cb-ui{position:absolute;inset:0;display:block;border-radius:7px;border:2px solid rgba(12,31,23,.30);background:linear-gradient(180deg,#FFFFFF,#EFF9F2);box-shadow:inset 0 1px 3px rgba(12,31,23,.07);transition:border-color .18s,background-color .18s,box-shadow .18s}
html.cb-js .cb-ui svg{position:absolute;inset:0;width:100%;height:100%}
html.cb-js .cb-ui path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
html.cb-js .cb-ui .cb-check{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .26s ease .04s}
html.cb-js .cb-ui .cb-dash{stroke-dasharray:14;stroke-dashoffset:0;opacity:0;transition:opacity .15s}
html.cb-js .cb-wrap input:hover ~ .cb-ui{border-color:#0D9488}
html.cb-js .cb-wrap input:checked ~ .cb-ui,html.cb-js .cb-wrap input:indeterminate ~ .cb-ui{background:linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E);border-color:#0D9488;box-shadow:0 6px 14px -4px rgba(13,148,136,.55)}
html.cb-js .cb-wrap input:checked ~ .cb-ui{animation:cbPop .3s ease}
html.cb-js .cb-wrap input:checked ~ .cb-ui .cb-check{stroke-dashoffset:0}
html.cb-js .cb-wrap input:indeterminate ~ .cb-ui .cb-dash{opacity:1}
html.cb-js .cb-wrap input:focus-visible ~ .cb-ui{box-shadow:0 0 0 4px rgba(16,185,129,.30)}
html.cb-js .cb-wrap input:disabled ~ .cb-ui{opacity:.4}
@keyframes cbPop{0%{transform:scale(.8)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
/* --- Custom dropdown (JS) --- */
html.dd-js select.dd-native{display:none!important}
.dd{position:relative;display:block}
.dd-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:1.5px solid rgba(12,31,23,.16);border-radius:12px;background:#fff;color:var(--ink);font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;transition:border-color .2s,box-shadow .2s;text-align:left}
.dd-btn:hover{border-color:rgba(13,148,136,.55)}
.dd.open .dd-btn{border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.16)}
.dd-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-chev{flex:none;color:#0D9488;transition:transform .22s}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 7px);left:0;min-width:100%;width:max-content;max-width:min(78vw,340px);max-height:290px;overflow:auto;background:#fff;border:1px solid rgba(4,120,87,.20);border-radius:10px;box-shadow:0 24px 44px -16px rgba(3,25,17,.35);padding:6px;z-index:80;opacity:0;visibility:hidden;transform:translateY(-5px) scale(.985);transition:opacity .18s,transform .18s,visibility .18s}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-group{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#7A918A;padding:9px 10px 4px}
.dd-opt{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;background:transparent;border-radius:9px;font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left;transition:background .15s}
.dd-opt:hover{background:#EFFaf3}
.dd-opt.sel{background:#E7F6EE;color:#065F46;font-weight:500}
.dd-opt.sel::after{content:"\2713";margin-left:auto;color:#0D9488;font-weight:500}
.bulk-bar .dd{flex:1 1 200px;max-width:360px}
.shop-tools .dd{flex:0 1 230px;min-width:180px}
/* --- Bulk bar redesign --- */
.bulk-bar{gap:12px;padding:13px 15px;border-radius:11px;background:linear-gradient(120deg,#FFFFFF,#F3FAF5);border:1px solid rgba(4,120,87,.22);border-left:5px solid #10B981;box-shadow:0 16px 30px -18px rgba(23,54,43,.35)}
.bulk-count{display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;background:#EAF7EF;border:1px solid rgba(4,120,87,.20);font-weight:500;font-size:13.5px;color:#065F46;white-space:nowrap;transition:all .22s}
.bulk-bar.has-sel .bulk-count{background:linear-gradient(135deg,#10B981,#0D9488 60%,#0F766E);color:#fff;border-color:transparent;box-shadow:0 10px 18px -8px rgba(13,148,136,.6)}
/* --- Pager --- */
.pager{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:14px 0 4px;padding:11px 13px;background:linear-gradient(120deg,rgba(255,255,255,.96),rgba(244,251,246,.96));border:1px solid rgba(4,120,87,.16);border-radius:14px}
.pager-info{font-size:13.5px;color:#44615A}
.pager-pages{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;margin-left:auto}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;border:1.5px solid rgba(12,31,23,.14);background:#fff;color:#0B3B2E;font-size:13.5px;font-weight:500;text-decoration:none;transition:all .18s}
a.pg:hover{border-color:#0D9488;color:#0D9488}
.pg.on{background:linear-gradient(135deg,#10B981,#0D9488 60%,#0F766E);color:#fff;border-color:transparent;box-shadow:0 6px 14px -6px rgba(13,148,136,.55)}
.pg-gap{color:#7A918A;padding:0 2px}
.pager-per{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:#44615A}
.pager-per select{padding:8px 34px 8px 12px;font-size:13.5px;border-radius:10px;border:1.5px solid rgba(12,31,23,.14);background-color:#fff;font-family:inherit}
@media (max-width:640px){.pager-pages{margin-left:0}}
/* --- Lambi strings ka overflow fix (URLs, keys, emails) --- */
code{overflow-wrap:anywhere;word-break:break-word}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
/* ===== v183: table overflow ka durust tareeqa =====
   v182 ki overflow-wrap:anywhere table cells ko
   kuchal deti thi (har column 1 harf ka). Wo wapas —
   ab table apne area mein side-scroll hogi, columns
   parhne ke qabil rahengi, page overflow nahi hoga. */
.tbl td,.tbl th{overflow-wrap:normal}
.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ==== v188: Services hub (hero + category sections + premium cards) + header mega menu ====
   Services page ab 35 services ko 6 categories mein dikhati hai: gradient hero band, sticky
   category chips, har category ka apna accent rang, icon tiles aur designed cards. Header ke
   Services link par desktop par mega menu (categories + tamam naam), mobile drawer mein
   accordion. Home page (pg-home) par in rules ka koi asar nahi — mega sirf header mein hai. */
.head-in{position:relative}
.nav-item.has-mega{position:static;display:inline-flex;align-items:center}
.mega-toggle{display:none}
.mega{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%) translateY(12px);width:min(1220px,96vw);background:#FFFFFF;border:1px solid #E1EFE7;border-radius:13px;box-shadow:0 44px 74px -30px rgba(4,50,35,.38);padding:24px 28px 20px;opacity:0;visibility:hidden;transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s;z-index:90}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .24s ease,transform .24s ease}
.mega-in{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.mega-col{display:flex;flex-direction:column;align-items:flex-start}
.mega-cat{font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#047857;margin-bottom:9px}
.mega-cat:hover{text-decoration:underline}
.mega-link{font-size:13.5px;line-height:1.35;color:#3D4F60;padding:3.5px 0;transition:color .18s,transform .18s}
.mega-link:hover{color:#047857;transform:translateX(3px)}
@media (max-width:860px){
  .nav-item.has-mega{display:flex;flex-wrap:wrap;align-items:center;width:100%}
  .nav-item.has-mega .nav-link{flex:0 0 auto}
  .mega-toggle{display:inline-grid;place-items:center;margin-left:auto;width:38px;height:38px;border-radius:11px;border:1px solid #DCE9E2;background:#FFFFFF;color:#047857;cursor:pointer}
  .mega-toggle svg{width:18px;height:18px;transition:transform .3s}
  .has-mega.open .mega-toggle svg{transform:rotate(180deg)}
  .mega{position:static;transform:none;width:100%;opacity:1;visibility:visible;box-shadow:none;border:none;border-radius:0;padding:2px 0 10px 12px;display:none;background:transparent;transition:none}
  .mega::before{display:none}
  .has-mega.open .mega{display:block}
  .mega-in{display:flex;flex-direction:column;gap:12px}
  .mega-cat{margin-bottom:3px}
  .mega-link{padding:2.5px 0;font-size:14px}
}
.svc-hero-stats{gap:14px 38px;}
.svc-chips{position:sticky;top:78px;z-index:45;display:flex;gap:8px;flex-wrap:wrap;padding:14px 2px 10px;background:rgba(255,255,255,.94);border-bottom:1px solid #E4EFE9}
.svc-chips a{font-size:13.5px;font-weight:500;color:#29503F;border:1px solid #D8E8DE;background:#FFFFFF;padding:8px 15px;border-radius:999px;transition:border-color .2s,color .2s,background .2s}
.svc-chips a:hover{border-color:#10B981;color:#047857;background:#ECFDF5}
.svc-sec{scroll-margin-top:158px;margin-top:38px;--acc:#059669;--acc2:#10B981}
.svc-sec[data-cat="design"]{--acc:#7C3AED;--acc2:#A855F7}
.svc-sec[data-cat="development"]{--acc:#059669;--acc2:#10B981}
.svc-sec[data-cat="gc"]{--acc:#D97706;--acc2:#F59E0B}
.svc-sec[data-cat="apps"]{--acc:#0284C7;--acc2:#38BDF8}
.svc-sec[data-cat="hosting"]{--acc:#0D9488;--acc2:#14B8A6}
.svc-sec[data-cat="support"]{--acc:#E11D48;--acc2:#FB7185}
.svc-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.svc-sec-head h2{font-size:25px;margin:0}
.svc-sec-head::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--acc),rgba(0,0,0,0))}
.svc-count{font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);border:1.5px solid var(--acc);padding:4px 11px;border-radius:999px;white-space:nowrap}
.svc2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc2-card{position:relative;overflow:hidden;border-radius:13px;background:linear-gradient(180deg,#FFFFFF,#F3FAF6);border:1px solid #E0EEE6;box-shadow:0 12px 28px -20px rgba(4,60,40,.35);transition:transform .3s ease,box-shadow .3s ease}
.svc2-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3.5px;background:linear-gradient(90deg,var(--acc),var(--acc2));z-index:2}
.svc2-card::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;z-index:1}
.svc2-card:hover{transform:translateY(-5px);box-shadow:0 26px 40px -22px rgba(4,60,40,.4)}
.svc2-card:hover::after{left:130%}
.svc2-card .card-body{padding:24px 22px 20px;display:flex;flex-direction:column;height:100%;position:relative;z-index:2}
.svc2-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#FFFFFF;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 12px 20px -10px var(--acc);margin-bottom:15px}
.svc2-ic svg{width:26px;height:26px}
.svc2-card h3{font-size:18px;margin:0 0 8px;line-height:1.3}
.svc2-card h3 a{color:#12261C}
.svc2-card h3 a:hover{color:var(--acc)}
.svc2-card .card-desc{color:#5B6B62;font-size:14px;line-height:1.55;margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc2-card .svc-foot{margin-top:auto}
.svc-cta{margin:46px 0 6px;text-align:center;border-radius:15px;padding:36px 26px;background:linear-gradient(180deg,#FFFFFF,#EFF8F3);border:1px solid #DFEEE5;box-shadow:0 16px 34px -24px rgba(4,60,40,.35)}
.svc-cta h2{margin:0 0 8px;font-size:25px}
.svc-cta p{color:#5B6B62;margin:0 auto 20px;max-width:520px;line-height:1.55}
.svc-crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:#5B6B62;margin:18px 0 4px}
.svc-crumb a{color:#047857}
.svc-crumb a:hover{text-decoration:underline}
@media (max-width:1080px){.svc2-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .svc-hero-stats{gap:10px 26px}
  .svc-chips{top:66px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}
  .svc-chips a{white-space:nowrap}
  .svc-sec{scroll-margin-top:140px;margin-top:30px}
  .svc-sec-head h2{font-size:21px}
}
@media (max-width:640px){.svc2-grid{grid-template-columns:1fr}}

/* ==== v189: Shop search polish — empty state card (hero search pill ki CSS v2 se mojood thi,
   ab form dobara hero mein hai; .hero-search button pill ke andar set) ==== */
.shop-empty{grid-column:1/-1;text-align:center;border:1.5px dashed #CBDFD2;border-radius:13px;padding:38px 24px;background:#FBFDFC}
.shop-empty h3{margin:0 0 8px;font-size:21px}
.shop-empty p{color:#5B6B62;margin:0 auto 20px;max-width:440px;line-height:1.55}
.hero-search .btn{flex:0 0 auto}
@media (max-width:640px){.hero-search{gap:7px}.hero-search input{font-size:15px}}

/* ==== v190: Wishlist — card par top-left glass heart (fan ke badges top-right par hain,
   ye top-left par hai taake band wali locked layout ko hath na lage), detail page par
   ghost button, .on halat mein rose bhara dil. Home par backdrop-filter band hai is liye
   heart ka bg solid safed rakha hai, blur nahi. ==== */
.tpl-card{position:relative}
.wish-form{position:absolute;top:12px;left:12px;z-index:8;margin:0}
.wish-btn{width:37px;height:37px;border-radius:50%;border:1px solid rgba(6,60,40,.14);background:rgba(255,255,255,.94);color:#47604F;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px -8px rgba(4,50,35,.45);transition:transform .22s ease,color .22s,background .22s,border-color .22s;padding:0}
.wish-btn:hover{transform:scale(1.12);color:#E11D48}
.wish-btn:active{transform:scale(.96)}
.wish-btn.on{background:#FFF1F2;border-color:#FDA4AF;color:#E11D48}
.wish-btn.on svg{fill:#E11D48;stroke:#E11D48}
.wish-detail-form{display:inline-block;margin-left:10px;vertical-align:middle}
.wish-detail-btn{display:inline-flex;align-items:center;gap:8px}
.wish-detail-btn svg{flex:0 0 auto}
.wish-detail-btn.on{color:#E11D48;border-color:#FDA4AF;background:#FFF1F2}
.wish-detail-btn.on svg{fill:#E11D48;stroke:#E11D48}
@media (max-width:640px){.wish-form{top:9px;left:9px}.wish-btn{width:34px;height:34px}.wish-detail-form{margin-left:0;margin-top:10px}}
@media (max-width:1020px){}
@media (max-width:640px){}

/* ==== v191: Blog — list cards, article page, home strip. Cover full-page screenshots hain,
   is liye card media par TOP crop (object-position 50% 0) — store ke thumbnail rule ke mutabiq. ==== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.blog-card{border-radius:13px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.blog-media{display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#0F766E,#10B981)}
.blog-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;transition:transform .5s ease}
.blog-card:hover .blog-media img{transform:scale(1.04)}
.blog-ph{width:100%;height:100%;display:grid;place-items:center;font-size:56px;font-weight:800;color:rgba(255,255,255,.85);font-family:Sora,sans-serif}
.blog-card-body{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1}
.blog-date{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#0D9488}
.blog-card h3{font-size:18.5px;line-height:1.32;margin:8px 0 8px}
.blog-card h3 a{color:#12261C}
.blog-card h3 a:hover{color:#047857}
.blog-card-body p{color:#5B6B62;font-size:14px;line-height:1.55;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-more{margin-top:auto;font-weight:500;font-size:14px;color:#047857}
.blog-more:hover{text-decoration:underline}
.blog-title{max-width:820px}
.blog-cover{width:100%;max-height:420px;object-fit:cover;object-position:50% 0;border-radius:13px;margin:14px 0 22px;display:block;box-shadow:0 20px 38px -24px rgba(4,60,40,.45)}
.blog-back{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.sec-head .sec-title{margin:0}
@media (max-width:1020px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr}.blog-cover{max-height:260px}}

/* ==== v192: Bundle deals — shop section cards, cart/checkout saving note, admin member picker.
   Bundle ka discount cart/checkout mein automatically lagta hai (behtareen matching bundle),
   is liye cards par sirf package ki qeemat aur bachat dikhti hai. ==== */
.bundle-sec{margin:26px 0 6px}
.bundle-hint{color:#5B6B62;font-size:13.5px;font-weight:500}
.bundle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:16px}
.bundle-card{position:relative;border-radius:13px;padding:24px 24px 20px;background:linear-gradient(135deg,#ECFDF5,#FFFFFF 55%);border:1.5px solid #BFE8D2;box-shadow:0 16px 32px -24px rgba(4,60,40,.4);overflow:hidden}
.bundle-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3.5px;background:linear-gradient(90deg,#059669,#F5C542)}
.bundle-card h3{font-size:21px;margin:0 44px 8px 0}
.bundle-save{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#B45309,#F59E0B);color:#FFFFFF;font-size:12px;font-weight:500;letter-spacing:.05em;padding:5px 11px;border-radius:999px;box-shadow:0 8px 16px -8px rgba(180,83,9,.7)}
.bundle-members{font-size:15px;font-weight:500;color:#17382A;line-height:1.5}
.bundle-members a{color:#047857}
.bundle-plus{color:#F59E0B;font-weight:500;margin:0 2px}
.bundle-desc{color:#5B6B62;font-size:14px;line-height:1.55;margin:0 0 18px}
.bundle-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bundle-price{display:flex;align-items:baseline;gap:9px}
.bundle-price s{color:#94A89B;font-size:16px}
.bundle-price b{font-size:25px;color:#047857}
.bundle-note{margin:14px 0 0;padding:12px 16px;border-radius:10px;background:#ECFDF5;border:1px solid #BFE8D2;color:#065F46;font-size:14.5px}
.bundle-members{border:1px solid #D8E8DE;border-radius:10px;padding:12px 16px;margin:0 0 14px}
.bundle-members legend{font-weight:500;font-size:13.5px;color:#29503F;padding:0 6px}
.bundle-mem{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14.5px;cursor:pointer}
@media (max-width:760px){.bundle-grid{grid-template-columns:1fr}}

/* ==== v193: Services HERO redesign (user: pehla hero "basic/bekar" — title ka rang gradient par
   dab gaya tha aur panel bilkul saada tha). Ab: layered glows + grid pattern + sheen animation,
   safed title gradient <em> ke sath, glass stats bar, do CTA buttons, aur dayen taraf 6 floating
   glass category tiles (har category ka apna rang/icon). Chips par category rang ke dots bhi. ==== */
.svc-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.18fr .82fr;gap:38px;align-items:center;margin-top:20px;border-radius:15px;padding:48px 46px;color:#FFFFFF;box-shadow:0 34px 60px -30px rgba(3,45,32,.55);background:radial-gradient(560px 300px at 8% -10%,rgba(52,255,190,.32),rgba(52,255,190,0) 60%),radial-gradient(480px 320px at 100% 115%,rgba(245,197,66,.26),rgba(245,197,66,0) 62%),radial-gradient(700px 500px at 88% -20%,rgba(56,189,248,.15),rgba(56,189,248,0) 60%),linear-gradient(118deg,#04231B,#065F46 48%,#0B8A5F)}
.svc-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(640px 360px at 28% 0%,#000 25%,transparent 76%);mask-image:radial-gradient(640px 360px at 28% 0%,#000 25%,transparent 76%);pointer-events:none}
.svc-hero::after{content:"";position:absolute;top:-25%;bottom:-25%;left:-35%;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.09),rgba(255,255,255,0));transform:skewX(-16deg);animation:svcSheen 8.5s ease-in-out infinite;pointer-events:none}
@keyframes svcSheen{0%,52%{left:-35%}88%,100%{left:135%}}
.svc-hero-main{position:relative;z-index:2}
.svc-hero-kicker{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.24);padding:7px 15px 7px 11px;border-radius:999px}
.svc-hero-kicker i{width:8px;height:8px;border-radius:50%;background:#34F5A5;box-shadow:0 0 0 0 rgba(52,245,165,.55);animation:svcPulse 2.2s infinite}
@keyframes svcPulse{70%{box-shadow:0 0 0 8px rgba(52,245,165,0)}100%{box-shadow:0 0 0 0 rgba(52,245,165,0)}}
.svc-hero h1{color:#FFFFFF;font-size:42px;line-height:1.12;margin:18px 0 12px;max-width:600px}
.svc-hero h1 em{font-style:italic;background:linear-gradient(92deg,#F5C542,#7CF2C0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.svc-hero p{max-width:590px;color:rgba(255,255,255,.88);font-size:16.5px;line-height:1.58;margin:0}
.svc-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn-glass{background:rgba(255,255,255,.13)!important;color:#FFFFFF!important;border:1px solid rgba(255,255,255,.45)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-glass:hover{background:rgba(255,255,255,.22)!important}
.svc-hero-stats{display:flex;flex-wrap:wrap;margin-top:28px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:11px;padding:14px 4px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.svc-hero-stats span{display:flex;flex-direction:column;flex:1;min-width:96px;padding:2px 16px;border-left:1px solid rgba(255,255,255,.14)}
.svc-hero-stats span:first-child{border-left:none}
.svc-hero-stats strong{font-size:22px;line-height:1.15;color:#FFFFFF}
.svc-hero-stats small{color:rgba(255,255,255,.66);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.svc-hero-side{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc-tile{display:flex;align-items:center;gap:11px;padding:15px 15px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.17);color:#EAF7F0;font-weight:500;font-size:13.5px;line-height:1.28;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s,border-color .3s;animation:svcFloat 7s ease-in-out infinite}
.svc-tile:nth-child(2n){animation-delay:1.1s}
.svc-tile:nth-child(3n){animation-delay:2s}
.svc-tile:nth-child(4n){animation-delay:.6s}
@keyframes svcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.svc-tile:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
.svc-tile-ic{width:41px;height:41px;border-radius:12px;display:grid;place-items:center;color:#FFFFFF;flex:0 0 auto;box-shadow:0 10px 18px -8px rgba(0,0,0,.5)}
.svc-tile-ic svg{width:21px;height:21px}
.t-design .svc-tile-ic{background:linear-gradient(135deg,#7C3AED,#A855F7)}
.t-dev .svc-tile-ic{background:linear-gradient(135deg,#059669,#10B981)}
.t-gc .svc-tile-ic{background:linear-gradient(135deg,#D97706,#F59E0B)}
.t-apps .svc-tile-ic{background:linear-gradient(135deg,#0284C7,#38BDF8)}
.t-host .svc-tile-ic{background:linear-gradient(135deg,#0D9488,#14B8A6)}
.t-support .svc-tile-ic{background:linear-gradient(135deg,#E11D48,#FB7185)}
.svc-chips a{display:inline-flex;align-items:center;gap:8px}
.svc-chips a::before{content:"";width:8px;height:8px;border-radius:50%;background:#059669;flex:0 0 auto}
.svc-chips a[href="#cat-design"]::before{background:#7C3AED}
.svc-chips a[href="#cat-gc"]::before{background:#D97706}
.svc-chips a[href="#cat-apps"]::before{background:#0284C7}
.svc-chips a[href="#cat-hosting"]::before{background:#0D9488}
.svc-chips a[href="#cat-support"]::before{background:#E11D48}
@media (max-width:980px){
  .svc-hero{grid-template-columns:1fr;gap:26px;padding:38px 30px}
  .svc-hero-side{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .svc-hero{padding:30px 22px 26px;border-radius:15px;gap:22px}
  .svc-hero h1{font-size:29px}
  .svc-hero p{font-size:15px}
  .svc-hero-cta{flex-wrap:nowrap}
  .svc-hero-cta .btn{flex:1 1 0;min-width:0;padding-left:14px;padding-right:40px;white-space:nowrap}
  .svc-hero-side{grid-template-columns:repeat(2,1fr);gap:9px}
  .svc-tile{padding:11px 12px;font-size:12.5px;gap:9px}
  .svc-tile-ic{width:34px;height:34px;border-radius:10px}
  .svc-hero-stats{padding:10px 2px}
  .svc-hero-stats span{min-width:44%;border-left:none;padding:4px 12px}
}

/* ==== v194: Services hero mobile overflow fix — grid items ka min-width:auto CTA row ke
   min-content (370px) se column ko phula raha tha; main/side par min-width:0, mobile par
   hero padding 18px aur CTA buttons compact (13px, kam padding) taake jor EK row mein rahe. ==== */
.svc-hero-main,.svc-hero-side{min-width:0}
@media (max-width:700px){
  .svc-hero{padding-left:18px;padding-right:18px}
  .svc-hero-cta{gap:10px}
  .svc-hero-cta .btn{padding:11px 32px 11px 12px;font-size:13px}
}

/* ==== v195: Header search — right side par sirf icon; click par header ke neeche search bar
   slide-down khulta hai, bahar click/Esc par band. Hero wali search form user ko pasand nahi
   ayi (hero ki look kharab ho rahi thi) — wo hata di gayi, hero apni asal saaf halat mein hai. ==== */
.search-toggle{width:41px;height:41px;border-radius:12px;border:1px solid #DCE9E2;background:#FFFFFF;color:#29503F;display:inline-grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:color .2s,border-color .2s,background .2s}
.search-toggle:hover{color:#047857;border-color:#10B981}
body.search-open .search-toggle{background:#ECFDF5;color:#047857;border-color:#10B981}
body.search-open .head-search{opacity:1;}
.head-search form{display:flex;gap:10px;align-items:center}
.head-search .hs-ic{display:grid;place-items:center;color:#0D9488;padding-left:6px;flex:0 0 auto}
.head-search input{flex:1;min-width:0;border:1.5px solid #D8E8DE;border-radius:12px;padding:12px 14px;font-size:16px;font-family:inherit;color:#12261C;background:#FBFDFC}
.head-search input:focus{outline:none;border-color:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,.15);background:#FFFFFF}
.head-search .btn{flex:0 0 auto}
@media (max-width:640px){.head-search{right:8px;padding:10px}.head-search input{font-size:15px;padding:11px 12px}}

/* ==== v196: Search toggle ki durust jagah — toggle ab .main-nav ke ANDAR nahi, head-in ka
   direct child hai (</nav> ke baad). Mobile par nav drawer ke andar chhup gaya tha; ab grid
   ki teesri (right) column mein hamesha header mein nazar ayega. Panel absolute hai is liye
   grid flow se bahar hai. ==== */
@media (max-width:860px){
  .search-toggle{grid-column:3;grid-row:1;justify-self:end;position:relative;z-index:75}
}

/* ==== v197: Service packages asal tafseel ke sath — har tier ki features list, delivery chip,
   note band ("Good to know"), Coming Soon panel + list cards par soon chip. User ki di hui
   pricing (Oct 2026) pkg_json se render hoti hai; prices/tiers admin form se bhi badal sakte
   hain (Packages JSON field). ==== */
.pkg-grid{align-items:stretch}
.pkg-grid .pkg{text-align:left;display:flex;flex-direction:column}
.pkg .big-price{font-size:36px;font-weight:800;letter-spacing:-.02em;color:#0B3D2C;margin:2px 0 4px}
.pkg-days{display:inline-flex;align-self:flex-start;gap:6px;align-items:center;background:#ECFDF5;border:1px solid #BDEBD3;color:#047857;font-size:12.5px;font-weight:500;padding:4px 11px;border-radius:999px;margin:2px 0 4px}
.pkg-feats{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.pkg-feats li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:#3D574A;line-height:1.5}
.pkg-feats li svg{color:#0D9488;flex:0 0 auto;margin-top:2px}
.pkg-n1{max-width:600px;margin-inline:auto}
.pkg-n2{max-width:880px;margin-inline:auto}
.svc-note{margin-top:20px;background:#FFFBEB;border:1px solid #FDE8B0;border-radius:10px;padding:15px 19px;font-size:14.5px;color:#6B5510;line-height:1.65}
.soon-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;background:linear-gradient(90deg,#FEF3C7,#FDE68A);color:#8A6D00;font-weight:500;font-size:12.5px;letter-spacing:.03em}
.soon-panel{background:linear-gradient(135deg,#F0FDF7,#FFFBEA);border:1.5px dashed rgba(13,148,136,.45);border-radius:14px;padding:30px 28px;margin-top:10px;box-shadow:var(--sh-sm)}
.soon-badge{display:inline-block;background:var(--grad-gold);color:#2E2303;font-size:11px;font-weight:500;letter-spacing:.08em;padding:5px 13px;border-radius:999px;text-transform:uppercase}
.soon-panel h2{margin:14px 0 6px;font-size:26px;color:#0B3D2C}
.soon-panel p{color:#49655A;line-height:1.6;margin:0}
.soon-feats{max-width:600px;margin-top:16px}
.soon-note{margin-top:16px!important;max-width:640px}
.soon-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
@media (max-width:640px){.soon-panel{padding:22px 18px}.pkg .big-price{font-size:31px}}

/* ==== v198: Detail page par package grid se pehle saans ki jagah — featured card ka
   MOST POPULAR ribbon opar wali description se halka sa takra raha tha. ==== */
.pkg-grid{margin-top:16px}

/* ==== v199: Search bar ab FLOATING OVERLAY nahi — header ke ANDAR in-flow row hai.
   User ke iPhone screenshot mein khula hua panel hero heading ki pehli line ko dhak raha
   tha. Ab bar header ka hissa bankar khulta hai aur page content ko neeche dhakelta hai —
   overlap mumkin hi nahi. Band halat mein height 0. Blur bilkul istemal nahi (home crash
   rule). Band karne ke tareeqe: X button, Esc, bahar click, icon dobara click. ==== */
.head-search{position:static;width:auto;right:auto;top:auto;z-index:auto;background:#FFFFFF;border:none;border-top:1px solid transparent;border-radius:0;box-shadow:none;padding:0;max-height:0;overflow:hidden;opacity:1;visibility:hidden;transform:none;transition:max-height .32s ease,visibility 0s linear .32s,border-color .3s}
body.search-open .head-search{max-height:94px;border-top-color:#E1EFE7;visibility:visible;transform:none;transition:max-height .32s ease,border-color .3s}
.head-search form{max-width:1450px;margin:0 auto;padding:12px 20px}
.hs-close{width:40px;height:44px;border-radius:12px;border:1px solid #DCE9E2;background:#F4FAF7;color:#29503F;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.hs-close:hover{color:#B91C1C;border-color:#FCA5A5}
@media (max-width:640px){.head-search form{padding:10px 12px}}

/* ==== v200: Mobile drawer mein Services mega menu ka fix — asal bug: desktop wali
   .has-mega:focus-within .mega{transform:translateX(-50%)} rule mobile par bhi jeet rahi
   thi (specificity zyada), chevron tap karne par button focus mein rehta aur panel aadha
   left shift hokar drawer se bahar kat jata tha (user screenshot 25 Oct). Ab ≤860px par
   transform lazmi none hai aur links proper tappable rows hain. ==== */
@media (max-width:860px){
  .has-mega:hover .mega,.has-mega:focus-within .mega{transform:none}
  .mega{flex:1 1 100%;width:100%;padding:8px 0 12px 2px}
  .mega-in{gap:14px}
  .mega-col{gap:0}
  .mega-cat{font-size:11.5px;margin:4px 0 3px;padding:0 10px}
  .mega-link{display:block;width:100%;padding:7px 10px;border-radius:9px;font-size:14.5px;line-height:1.3}
  .mega-link:hover{transform:none;background:#F0FAF5}
}

/* ==== v201: Multi-buy promo strip (fixed bundle cards ki jagah) — halki emerald strip,
   save chip + text; koi form/button nahi (discount cart mein khud lagta hai). ==== */
.bundle-promo{display:flex;gap:16px;align-items:center;background:linear-gradient(120deg,#ECFDF5,#FFFBEB);border:1px solid #BDEBD3;border-radius:12px;padding:18px 22px;margin:6px 0 20px;box-shadow:var(--sh-sm)}
.bundle-promo .bp-txt h3{margin:0 0 3px;font-size:19px;color:#0B3D2C}
.bundle-promo .bp-txt p{margin:0;color:#49655A;font-size:14px;line-height:1.55}
@media (max-width:640px){.bundle-promo{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 18px}}

/* ==== v202: Mobile Services dropdown ki proper design (user ki hidayat 25 Oct):
   har service link ke aage gold dot, categories ke aage emerald marker, groups ke
   darmiyan separator line aur links ke darmiyan halki hairline — saaf list look. ==== */
@media (max-width:860px){
  .mega{padding:10px 0 14px 0}
  .mega-in{gap:0}
  .mega-col{padding:12px 2px 4px;border-top:1px solid #E2F0E8}
  .mega-col:first-child{border-top:none;padding-top:0}
  .mega-cat{display:flex;align-items:center;gap:8px;margin:0;padding:2px 10px 8px;font-size:12px}
  .mega-cat::before{content:"";width:8px;height:8px;border-radius:2.5px;background:linear-gradient(135deg,#10B981,#0F766E);flex:none}
  .mega-link{position:relative;padding:9px 10px 9px 30px;border-bottom:1px solid #EFF6F1;border-radius:0;font-size:14.5px}
  .mega-col .mega-link:last-child{border-bottom:none}
  .mega-link::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#D97706}
  .mega-link:hover{background:#F0FAF5}
}

/* ==== v203: Mobile Services dropdown — category accordion (user ki hidayat 25 Oct):
   sare categories ik sath khuli NAHI rehtin; sirf aik khuli, baqi band. Heading ke right
   par chevron (band = neeche, khuli = upar). Desktop mega menu is se bilkul mutasir nahi. ==== */
@media (max-width:860px){
  .mega-cat{cursor:pointer;padding-top:6px;padding-bottom:8px;min-height:30px}
  .mega-cat::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid #047857;border-bottom:2px solid #047857;transform:rotate(45deg);transition:transform .25s;flex:none}
  .mega-col.open .mega-cat::after{transform:rotate(225deg)}
  .mega-col .mega-link{display:none}
  .mega-col.open .mega-link{display:block;animation:megaFade .22s ease}
  .mega-col{padding-bottom:8px}
  @keyframes megaFade{from{opacity:0}to{opacity:1}}
}

/* ==== v204: Coupons page (premium ticket cards + countdown) + home ribbon + shop strip button ==== */
.coupon-ribbon{background:linear-gradient(90deg,#07332A,#0B3D2C 40%,#0F766E);color:#FFFFFF}
.cr-in{display:flex;align-items:center;gap:12px;padding-top:9px;padding-bottom:9px}
.cr-ic{color:#F5B301;display:grid;place-items:center;flex:none}
.coupon-ribbon p{margin:0;font-size:14px;color:#D9F2E4}
.coupon-ribbon p b{color:#FFFFFF}
.cr-btn{margin-left:auto;flex:none}
.cr-x{background:none;border:none;color:#9AD8BC;font-size:21px;line-height:1;cursor:pointer;padding:2px 4px;flex:none}
.cpn-hero{background:radial-gradient(720px 300px at 82% -60px,rgba(245,179,1,.20),transparent 62%),radial-gradient(660px 320px at 8% -40px,rgba(16,185,129,.28),transparent 60%),linear-gradient(135deg,#052E22,#0B3D2C 48%,#0F766E);color:#E7F6EE;text-align:center;padding:56px 0 48px;position:relative;overflow:hidden}
.cpn-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 72px);pointer-events:none}
.cpn-hero .wrap{position:relative}
.cpn-kicker{display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#F5B301;border:1px solid rgba(245,179,1,.45);padding:6px 13px;border-radius:999px;background:rgba(245,179,1,.08)}
.cpn-hero h1{color:#FFFFFF;font-size:clamp(32px,5vw,46px);margin:16px 0 10px}
.cpn-hero h1 em{font-style:italic;background:linear-gradient(92deg,#F5B301,#34D399);-webkit-background-clip:text;background-clip:text;color:transparent}
.cpn-hero p{max-width:620px;margin:0 auto;color:#BFE6D2;font-size:16px;line-height:1.65}
.cpn-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.cpn-stats span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 15px;font-size:13.5px;color:#CFEFE0}
.cpn-stats b{color:#FFFFFF}
.cpn-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:36px 0 56px}
.cpn-card{display:flex;background:#FFFFFF;border-radius:12px;box-shadow:0 18px 36px -18px rgba(4,50,35,.25);overflow:hidden;border:1px solid #E1EFE7}
.cpn-stub{color:#FFFFFF;flex-direction:column;}
.cpn-big{font-size:34px;font-weight:800;line-height:1}
.cpn-big small{font-size:19px;font-weight:500}
.cpn-off{font-size:11px;font-weight:500;letter-spacing:.22em;opacity:.85}
.cpn-perf{width:0;border-left:2px dashed #CBDFD3;position:relative;flex:none}
.cpn-perf::before,.cpn-perf::after{content:"";position:absolute;left:-12px;width:22px;height:22px;border-radius:50%;background:#F7F5ED}
.cpn-perf::before{top:-11px}.cpn-perf::after{bottom:-11px}
.cpn-main{flex:1;padding:18px 20px;min-width:0}
.cpn-main h3{margin:0 0 9px;font-size:16.5px;line-height:1.45;color:#12362A}
.cpn-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cpn-chip{font-size:11.5px;font-weight:500;color:#047857;background:#E9F9F0;border:1px solid #CDEEDB;border-radius:999px;padding:3px 10px}
.cpn-count{margin:0 0 12px;font-size:13px;color:#92600A}
.cpn-count b{font-variant-numeric:tabular-nums;color:#B45309}
.cpn-coderow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cpn-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:500;letter-spacing:.08em;color:#0B3D2C;background:#F6FBF8;border:1.6px dashed #8FD0AC;border-radius:10px;padding:7px 13px}
.cpn-copy.ok{background:#0F766E!important;color:#FFFFFF!important}
.cpn-shop{margin-left:auto;font-weight:500;font-size:13.5px;color:#047857}
.bundle-promo .bp-btn{margin-left:auto;flex:none}
@media (max-width:760px){.cpn-grid{grid-template-columns:1fr}.cpn-stub{width:104px}.cpn-big{font-size:28px}.coupon-ribbon p{font-size:13px}.cr-btn{padding:9px 14px;font-size:13px}}

/* ==== v205: Home coupon ribbon mobile layout — text puri line, button neeche apni line par ==== */
@media (max-width:760px){
  .cr-in{flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:10px}
  .cr-ic{display:none}
  .coupon-ribbon p{flex:1 1 100%;font-size:13.5px}
  .cr-btn{margin-left:0;order:2}
  .cr-x{order:2;margin-left:auto}
}

/* ==== v206: Header corner coupon tag (bookmark ribbon) — purani home ribbon hata kar
   header ke neeche right corner se latakta gold tag; drawer khulne par chhup jata hai. ==== */
.cpn-tag{position:absolute;top:100%;z-index:94;display:flex;align-items:center;gap:6px;background:linear-gradient(160deg,#FBBF24,#D97706);color:#3A2703;font-size:12px;font-weight:500;padding:7px 13px 13px;border-radius:0 0 8px 8px;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);box-shadow:0 10px 18px -8px rgba(146,96,10,.55);text-decoration:none}
.cpn-tag b{font-weight:500}
.cpn-tag:hover{color:#241A02}
body.nav-open .cpn-tag{display:none}
@media (max-width:860px){.cpn-tag{right:10px;font-size:11px;padding:6px 10px 11px}}

/* ==== v207: Coupons page — classic ticket design (user ki reference image jesa):
   safed stub mein vertical outlined %, rang-daar body, dashed perforation + notches,
   darmiyan scissors cut-line. Rang brand family ke andar rotate hote hain. ==== */
.cpn-list{margin:36px 0 58px;display:flex;flex-direction:column}
.cpn-ticket{--acc:#0E9F6E;--bg1:#0E9F6E;--bg2:#0B7A55;display:flex;position:relative;max-width:880px;width:100%;margin:0 auto;border-radius:11px;}
.cpn-ticket.tc2{--acc:#D97706;--bg1:#F59E0B;--bg2:#D97706}
.cpn-ticket.tc3{--acc:#0F766E;--bg1:#14B8A6;--bg2:#0D9488}
.cpn-ticket.tc4{--acc:#0B3D2C;--bg1:#11694A;--bg2:#052E22}
.cpn-ticket::before,.cpn-ticket::after{content:"";position:absolute;left:138px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#F7F5ED;z-index:3}
.cpn-ticket::before{top:-10px}.cpn-ticket::after{bottom:-10px}
.cpn-stub{width:138px;flex:none;border-radius:11px 0 0 11px;display:flex;align-items:center;justify-content:center;gap:9px;padding:16px 6px}
.cpn-vert{writing-mode:vertical-rl;font-size:10.5px;font-weight:500;letter-spacing:.18em;color:#5B7183;text-transform:uppercase;white-space:nowrap}
.cpn-pct{font-weight:800;color:transparent;-webkit-text-stroke:2.2px var(--acc)}
.cpn-pct small{font-size:31px;-webkit-text-stroke:2px var(--acc)}
.cpn-body{flex:1;min-width:0;background:linear-gradient(120deg,var(--bg1),var(--bg2));border-left:2px dashed rgba(255,255,255,.55);border-radius:0 11px 11px 0;padding:18px 22px 16px;color:#FFFFFF}
.cpn-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cpn-brand{font-size:11.5px;font-weight:500;letter-spacing:.16em;color:rgba(255,255,255,.88)}
.cpn-pill{font-size:12px;font-weight:500;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.28);padding:4px 11px;border-radius:999px;color:#FFFFFF;white-space:nowrap}
.cpn-pill b{font-variant-numeric:tabular-nums}
.cpn-word{font-weight:800;line-height:1.04;margin:9px 0 3px;text-transform:uppercase;letter-spacing:.01em}
.cpn-desc{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.93);max-width:580px}
.cpn-ticket .cpn-chips{margin-bottom:2px}
.cpn-ticket .cpn-chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#FFFFFF}
.cpn-bottom{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;border-top:1px solid rgba(255,255,255,.25);padding-top:12px}
.cpn-until{font-size:12.5px;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.cpn-until b{color:#FFFFFF;}
.cpn-codebox{margin-left:auto;display:flex;gap:8px;align-items:center}
.cpn-ticket .cpn-code{background:rgba(255,255,255,.14);border:1.6px dashed rgba(255,255,255,.65);color:#FFFFFF}
.cpn-ticket .cpn-copy{background:#FFFFFF;color:#0B3D2C}
.cpn-cut{display:flex;align-items:center;gap:12px;max-width:880px;width:100%;margin:15px auto;color:#7A8B99}
.cpn-cut i{flex:1;border-top:2px dotted #B7C9BC}
@media (max-width:640px){
  .cpn-stub{width:104px}
  .cpn-ticket::before,.cpn-ticket::after{left:104px}.cpn-pct small{font-size:24px}
  .cpn-body{padding:15px 16px 14px}
  .cpn-brand{font-size:10.5px}
}

/* ==== v208: Ticket fixes (user iPhone screenshot 25 Oct) — (1) code chip ka text vertical
   wrap hota tha (nowrap + mobile par codebox puri row), (2) countdown pill card se bahar
   nikal jati thi (mobile par top column layout), (3) safed stub page bg mein ghul jata tha
   (ticket par border + stub ko halka sa tint), (4) sides par sample jese scallop bites. ==== */
.cpn-ticket{border:1px solid rgba(4,50,35,.16);}
.cpn-stub{background:#EFFAF3}
.cpn-bite{position:absolute;border-radius:50%;background:#F7F5ED;z-index:4;pointer-events:none}
.cpn-code{white-space:nowrap}
.cpn-copy{white-space:nowrap;flex:none}
.cpn-top{flex-wrap:wrap}
@media (max-width:640px){
  .cpn-top{flex-direction:column;align-items:flex-start;gap:7px}
  .cpn-bottom{flex-direction:column;align-items:stretch;gap:10px}
  .cpn-codebox{margin-left:0;}
  .cpn-code{flex:1;text-align:center}
}

/* ==== v209: Mobile par code + Copy button ki row jagah se tang thi — button body se
   bahar nikal jata tha. Ab mobile par dono apni apni full-width line par ate hain. ==== */
@media (max-width:640px){
  .cpn-codebox{flex-direction:column;align-items:stretch;gap:8px}
  .cpn-code{text-align:center}
  .cpn-copy{align-self:center}
}

/* ==== v210: Side cuts zyada nazdeek (26px fasla, sample ki tarah ghane) aur stub ki
   tint geहरी — halki tint page bg mein ghul jati thi, ab stub ticket ka hissa saaf
   nazar ata hai aur us par cuts bhi dikhte hain (user screenshot 25 Oct). ==== */
.cpn-ticket .cpn-stub{background:#D9F2E2}
.cpn-ticket.tc2 .cpn-stub{background:#FDEBC8}
.cpn-ticket.tc3 .cpn-stub{background:#CCF2EC}
.cpn-ticket.tc4 .cpn-stub{background:#D7EBDF}
.cpn-bite{top:12px;width:13px;height:13px}
.cpn-bite.bl{left:-7px;box-shadow:0 26px #F7F5ED,0 52px #F7F5ED,0 78px #F7F5ED,0 104px #F7F5ED,0 130px #F7F5ED,0 156px #F7F5ED,0 182px #F7F5ED,0 208px #F7F5ED,0 234px #F7F5ED,0 260px #F7F5ED,0 286px #F7F5ED,0 312px #F7F5ED,0 338px #F7F5ED,0 364px #F7F5ED,0 390px #F7F5ED}
.cpn-bite.br{right:-7px;box-shadow:0 26px #F7F5ED,0 52px #F7F5ED,0 78px #F7F5ED,0 104px #F7F5ED,0 130px #F7F5ED,0 156px #F7F5ED,0 182px #F7F5ED,0 208px #F7F5ED,0 234px #F7F5ED,0 260px #F7F5ED,0 286px #F7F5ED,0 312px #F7F5ED,0 338px #F7F5ED,0 364px #F7F5ED,0 390px #F7F5ED}
.cpn-pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .cpn-pct{-webkit-text-stroke-width:2px}
  .cpn-pill{font-size:12px;padding:5px 11px}
}

/* ==== v212: Percent ki technique hi badal di — iOS WebKit vertical text mein outline
   wale digits bigad deta tha (user: "abhi sahi ni howa"). Ab percent aam horizontal
   text hai jo -90deg ghuma kar khada kiya gaya hai; har browser mein glyphs bilkul
   saaf aur alag alag render hote hain. Stub ke andar absolute jaga pakki hai. ==== */
.cpn-stub{position:relative}
.cpn-pct{writing-mode:horizontal-tb;position:absolute;left:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:center center;white-space:nowrap;line-height:1}
@media (max-width:640px){
}

/* ==== v213: Percent MAZEED bara (76px dono sizes) aur sath wala label 2 lines mein —
   label ab stub ke upar do columns mein hai ("SHOPPING" / "COUPON"), percent us ke
   neeche saaf khara hai, koi takrao nahi (naap kar verify, dono viewports). ==== */
.cpn-pct{font-size:76px;bottom:36px}
.cpn-vert{position:absolute;top:16px;left:50%;transform:translateX(-50%) rotate(180deg)}
@media (max-width:640px){
  .cpn-pct{font-size:76px;bottom:96px}
}

/* ==== v214: Real-time segmented TIMER (Days/Hrs/Min/Sec ke alag boxes, har second
   tick), VALID ki value apni line par, aur % nishan digits jitna bara. ==== */
.cpn-timer{display:inline-flex;}
.cpn-timer i{font-style:normal;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.28);text-align:center;display:flex;flex-direction:column;align-items:center}
.cpn-timer b{line-height:1.1;font-variant-numeric:tabular-nums;color:#fff}
.cpn-timer small{font-size:7.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.cpn-until b{display:block;font-size:15.5px;margin-top:2px}
.cpn-pct .cpn-pct-sign{font-size:1.15em;-webkit-text-stroke-width:2.4px}
@media (max-width:640px){
  .cpn-timer{width:100%}
  .cpn-timer i{flex:1}
}

/* ==== v215: (1) Copy ka alg button khatam — code wali chip khud button hai, us ke
   andar right par copy icon; copy par icon check ban jata hai. (2) Timer ke boxes
   iOS par tang thay — min-width khatam, number chhota, ab overflow nahi. (3) Timer ke
   digits ROLL hote hain: purana digit neeche girta hai, naya upar se ata hai. ==== */
.cpn-timer{gap:4px;max-width:100%}
.cpn-timer i{min-width:0;padding:4px 1px 3px;border-radius:8px}
.cpn-timer b{font-size:13.5px}
.cpn-roll{display:block;height:16px;overflow:hidden}
.cpn-roll-in{display:block;}
.cpn-roll-in.out{transform:translateY(112%);opacity:0}
.cpn-roll-in.pre{transition:none;transform:translateY(-112%);opacity:0}
.cpn-code{display:flex;align-items:center;gap:8px;width:100%;cursor:pointer;text-align:left}
.cpn-code-t{flex:1;text-align:center}
.cpn-copy-ic{flex:none;display:inline-flex;align-items:center;justify-content:center}
.cpn-copy-ic svg{width:15px;height:15px}
.cpn-code.ok{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.26)}
.cpn-codebox{width:250px}
@media (max-width:640px){
  .cpn-codebox{width:100%}
}

/* ==== v216: Code chip GLASS design (purani .cpn-copy ki safed rule chip ko safed kar
   deti thi — ab button.cpn-code ki zyada specific glass style): halka translucent,
   blur, safed kinara, andar ki chamak; text chhota saada 13px. Percent ka outline
   patla (1.4px) + andar halki bhari rangat — "2" ka kata hua joint ab nahi dikhta. ==== */
.cpn-ticket button.cpn-code{background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(9px) saturate(1.4);backdrop-filter:blur(9px) saturate(1.4);border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.08),0 12px 24px -12px rgba(0,0,0,.5);border-radius:12px;color:#fff;padding:7px 8px 7px 12px;font-family:inherit}
.cpn-ticket button.cpn-code .cpn-code-t{font-size:13px;font-weight:500;letter-spacing:.12em}
.cpn-copy-ic{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);border-radius:50%;width:28px;height:28px}
.cpn-ticket button.cpn-code.ok{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.9)}
.cpn-pct{-webkit-text-stroke-width:1.4px}
@supports (color:color-mix(in srgb,red 10%,blue)){
  .cpn-pct{color:color-mix(in srgb,var(--acc) 22%,transparent)}
}

/* ==== v217: Roll animation tez — digit zyada dair gayeb nahi rehta. ==== */
.cpn-roll-in{transition:transform .3s cubic-bezier(.25,.7,.3,1),opacity .3s}

/* ==== v218: Contact page — support email card (icon + label + copy button) aur
   hidayat wali line ke form se pehle email par bhi rabta ho sakta hai. ==== */
.ctc-note{font-size:14.5px;color:#43536B;margin:2px 0 12px;max-width:640px}
.ctc-mail{display:flex;align-items:center;gap:12px;border:1px solid #DCE7DF;border-radius:10px;padding:12px 14px;max-width:640px;box-shadow:0 10px 24px -18px rgba(7,40,28,.35);margin:0 0 22px}
.ctc-mail-ic{flex:none;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#10B981,#0F766E);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.ctc-mail-ic svg{width:21px;height:21px}
.ctc-mail-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ctc-mail-tx small{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#7A8AA0}
.ctc-mail-tx a{font-size:15.5px;font-weight:500;color:#0B3D2C;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctc-copy{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid #D5E4D9;background:#F2F8F4;color:#0F766E;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ctc-copy svg{width:17px;height:17px}
.ctc-copy.ok{background:#0F766E;color:#fff;border-color:#0F766E}

/* ==== v219: Coupons wala corner tag ab header ke CENTER mein latkega (user ki
   hidayat) — pehle right corner par tha. ==== */
.cpn-tag{right:auto;left:50%;transform:translateX(-50%)}

/* ==== v222: Header aur footer ka size HAR page par home jesa — app pages
   (account/admin) par .wrap ki full-width rule in ke caps utaar deti thi;
   ab head-in ka cap 1800px aur foot-in ka cap 1450px har jagah ek hai. ==== */
body.app-full .head-in{max-width:1800px}
body.app-full .foot-in{max-width:1450px}

/* ==== v223: (1) Card ki info pill (card-body) — bg ab zyada saaf/solid hai taake
   wazeh nazar aye, aur width fit-content hai taake View button hamesha pill ke
   ANDAR rahe, bahar overlay na kare. (2) Footer app pages par bhi home jesa
   1450px. (3) Coupons tag — center wala bookmark khatam, ab header ke top-right
   CORNER par diagonal RIBBON hai (stitched kinare ke sath). ==== */
.tpl-card .card-body{width:fit-content;max-width:100%;white-space:nowrap;background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,255,255,.93));border:1px solid rgba(9,45,32,.10);box-shadow:0 14px 30px -12px rgba(7,40,28,.35),inset 0 1px 0 #fff;padding:7px 7px 7px 14px}
.tpl-card .card-body>*{flex:none}
body.app-full .site-foot .wrap{max-width:1450px}
@media(max-width:860px){}

/* ==== v224: (1) Coupons wala hanging tag HAR JAGAH se khatam (user ki hidayat).
   (2) FORM BUTTONS CENTER RULE (user ki pakki hidayat): har form-card ka button
   ab neeche CENTER mein hoga — full-width/left wala style khatam.
   (3) UNIFIED PAGE HERO (final style — har page par ek hi): gehra emerald
   gradient + sunehri glow + halki grid + glass kicker (gold dot) + safed title
   jiss ka aakhri lafz gold→mint gradient italic mein + naram safed description.
   pg-hero / cpn-hero / svc-hero teeno par laagu.
   (4) Coupons desktop par ek row mein 2 tickets. ==== */
.cpn-tag,.cpn-corner{display:none!important}
body:not(.app-full) .form-card > button.btn,body:not(.app-full) .form-card > a.btn,body.app-full .form-card > button.btn,body.app-full .form-card > a.btn{width:fit-content;margin-left:auto;margin-right:auto}
.pg-hero,.cpn-hero,.svc-hero{background-size:auto,auto,44px 44px,44px 44px,auto}
.pg-hero{border:1px solid rgba(6,60,44,.55);border-radius:15px;padding:50px 34px 54px;text-align:center;color:#EAF7F0;box-shadow:0 24px 44px -22px rgba(3,35,26,.45)}
.pg-eyebrow,.cpn-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);color:#FDE9B8;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.pg-eyebrow::before,.cpn-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#F5C542;flex:none;animation:heroPulse 2.2s infinite}
@keyframes heroPulse{0%{box-shadow:0 0 0 0 rgba(245,197,66,.45)}70%{box-shadow:0 0 0 7px rgba(245,197,66,0)}100%{box-shadow:0 0 0 0 rgba(245,197,66,0)}}
.pg-hero h1{color:#FFFFFF;font-size:clamp(32px,4.4vw,48px);line-height:1.12;margin:18px 0 0}
.pg-hero h1 em,.cpn-hero h1 em{font-style:italic;background:linear-gradient(92deg,#F5C542,#7CF2C0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pg-sub{color:rgba(230,250,240,.82);max-width:640px;margin:14px auto 0}
.pg-upd{color:rgba(230,250,240,.55);font-size:12.5px;margin-top:12px}
.cpn-hero{border:1px solid rgba(6,60,44,.55);border-radius:15px;margin-top:26px;box-shadow:0 24px 44px -22px rgba(3,35,26,.45)}
.svc-hero-kicker{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:#FDE9B8}
@media(max-width:860px){.pg-hero{padding:38px 20px 42px}}
@media(min-width:1100px){
  .cpn-list{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1440px;margin-left:auto;margin-right:auto}
  .cpn-list .cpn-cut{display:none}
  .cpn-ticket{max-width:none;margin:0}
  .cpn-stub{width:112px}
  .cpn-ticket::before,.cpn-ticket::after{left:112px}
  .cpn-pct{font-size:58px}
}

/* ==== v225: Shop ke filter dropdowns ab template cards ke UPAR khulenge —
   .shop-tools ko apna stacking context diya (pehle cards panel ko dhak dete thay). ==== */
.shop-tools{position:relative;z-index:90}


/* ==== v226: (1) Bite/notch dots ka rang asal naapi hui page-bg se match
   (#F7F5ED) — ab ye dots nahi, asal cut nazar ayenge. (2) Ticket ka bara lafz
   ab har coupon ka apna NAAM hai (description ka pehla hissa) — size 2-lafz
   naamon ke hisab se adjust. ==== */
.cpn-word{font-size:clamp(29px,4.4vw,44px)}

/* ==== v227: Ticket ke kinare ab ASAL CUT hain — mask se scallops punch hote
   hain (paint kiye hue safed dots ka system khatam); saya ab drop-shadow filter
   se ata hai jo mask ki scalloped shakl ke peeche chalta hai. Notch (separator
   ke upar/neeche wala cut) bhi mask se banta hai — stub ki width ke hisab se
   jagah badalti hai (desktop 138 / grid 112 / mobile 104). ==== */
.cpn-bite{display:none}
.cpn-ticket::before,.cpn-ticket::after,.cpn-perf::before,.cpn-perf::after{display:none}
.cpn-ticket{box-shadow:none;filter:drop-shadow(0 16px 20px rgba(4,50,35,.30));
  -webkit-mask-image:radial-gradient(circle 8px at 0 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 8px at 100% 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 10px at 138px 0,transparent 9.4px,#000 10.6px),radial-gradient(circle 10px at 138px 100%,transparent 9.4px,#000 10.6px),linear-gradient(#000,#000);
  -webkit-mask-size:100% 26px,100% 26px,100% 100%,100% 100%,100% 100%;
  -webkit-mask-position:0 10.5px,0 10.5px,0 0,0 0,0 0;
  -webkit-mask-repeat:repeat-y,repeat-y,no-repeat,no-repeat,no-repeat;
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle 8px at 0 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 8px at 100% 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 10px at 138px 0,transparent 9.4px,#000 10.6px),radial-gradient(circle 10px at 138px 100%,transparent 9.4px,#000 10.6px),linear-gradient(#000,#000);
  mask-size:100% 26px,100% 26px,100% 100%,100% 100%,100% 100%;
  mask-position:0 10.5px,0 10.5px,0 0,0 0,0 0;
  mask-repeat:repeat-y,repeat-y,no-repeat,no-repeat,no-repeat;
  mask-composite:intersect}
@media(max-width:860px){.cpn-ticket{
  -webkit-mask-image:radial-gradient(circle 8px at 0 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 8px at 100% 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 10px at 104px 0,transparent 9.4px,#000 10.6px),radial-gradient(circle 10px at 104px 100%,transparent 9.4px,#000 10.6px),linear-gradient(#000,#000);
  mask-image:radial-gradient(circle 8px at 0 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 8px at 100% 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 10px at 104px 0,transparent 9.4px,#000 10.6px),radial-gradient(circle 10px at 104px 100%,transparent 9.4px,#000 10.6px),linear-gradient(#000,#000)}}
@media(min-width:1100px){.cpn-ticket{
  -webkit-mask-image:radial-gradient(circle 8px at 0 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 8px at 100% 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 10px at 112px 0,transparent 9.4px,#000 10.6px),radial-gradient(circle 10px at 112px 100%,transparent 9.4px,#000 10.6px),linear-gradient(#000,#000);
  mask-image:radial-gradient(circle 8px at 0 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 8px at 100% 50%,transparent 7.4px,#000 8.6px),radial-gradient(circle 10px at 112px 0,transparent 9.4px,#000 10.6px),radial-gradient(circle 10px at 112px 100%,transparent 9.4px,#000 10.6px),linear-gradient(#000,#000)}}

/* ==== v229: SHARED page-hero ki refinement — ye design SIRF title +
   description ke liye hai aur tamam inner pages par ek jesa laagu hota hai:
   gehra panel, bare saaf akshar, darmiyan mein halki roshni, kinare par
   naram sheen. Page-specific cheezein (cards, ticker waghera) hero ka
   hissa NAHI hain. ==== */
.pg-hero,.cpn-hero,.svc-hero{border-radius:15px;padding:60px 24px 56px}
.pg-hero h1,.cpn-hero h1,.svc-hero h1{margin-top:18px}
.pg-hero p,.cpn-hero p{font-size:16.5px;line-height:1.68;max-width:660px}
.pg-kicker,.cpn-kicker{padding:8px 16px 8px 13px;font-size:10.5px;letter-spacing:.24em;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -12px rgba(0,0,0,.55)}
@media(max-width:640px){.pg-hero,.cpn-hero,.svc-hero{padding:44px 18px 42px}}

/* ==== v230: SHARED page-hero — NAYA STYLE (title + description band).
   Pehchan: gehre emerald panel par halki dot-texture, teen taraf se naram
   aurora roshni, chaaron konon par sunehre frame-ticks, title ke neeche
   darmiyan mein halki c chamak, aur description ke neeche ghulti hui
   sunehri lakeer. Sirf band ka design hai — page ki koi cheez is mein
   shamil nahi. (Pasand na aye to v229 wali style ka backup mehfooz hai:
   store-backups/style.css.bak-v229-simple.) ==== */
.pg-hero,.cpn-hero,.svc-hero{
  background:
    linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) left 16px top 16px / 24px 2px no-repeat,
    linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) left 16px top 16px / 2px 24px no-repeat,
    linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) right 16px top 16px / 24px 2px no-repeat,
    linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) right 16px top 16px / 2px 24px no-repeat,
    linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) left 16px bottom 16px / 24px 2px no-repeat,
    linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) left 16px bottom 16px / 2px 24px no-repeat,
    linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) right 16px bottom 16px / 24px 2px no-repeat,
    linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) right 16px bottom 16px / 2px 24px no-repeat,
    radial-gradient(rgba(255,255,255,.05) 1px,rgba(255,255,255,0) 1.6px) 0 0 / 22px 22px,
    radial-gradient(560px 300px at 50% -60px,rgba(52,255,190,.20),rgba(52,255,190,0) 65%),
    radial-gradient(520px 300px at 96% -40px,rgba(245,197,66,.16),rgba(245,197,66,0) 60%),
    radial-gradient(480px 300px at 4% 115%,rgba(45,212,191,.14),rgba(45,212,191,0) 60%),
    linear-gradient(118deg,#03231A,#065F46 52%,#0A7A58);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 34px 64px -30px rgba(3,40,26,.5),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.03);
}
.pg-hero h1,.cpn-hero h1,.svc-hero h1{text-shadow:0 2px 34px rgba(52,255,190,.20)}
.pg-hero p::after,.cpn-hero p::after{content:"";display:block;width:64px;height:2px;margin:24px auto 0;border-radius:2px;background:linear-gradient(90deg,rgba(245,197,66,0),#F5C542,rgba(245,197,66,0))}

/* ==== v231: (1) Header ke neeche right corner par diagonal COUPON DEALS
   ribbon (user ki hidayat — corner ribbon; coupons page par hidden, drawer
   khulne par hidden). (2) pg-eyebrow ke andar v230 ki gold lakeer ka fix —
   divider sirf description ke neeche ayega. ==== */
.pg-hero .pg-eyebrow::after{content:none}

/* ==== v232: Title band ka background tamam pages par EK jesa — services
   aur coupons heroes ki purani line-grid (::before) band kar di; ab har
   page ke title design ka bg sirf v230 wala shared stack hai (dots +
   glows + corner ticks). ==== */
.svc-hero::before,.cpn-hero::before{background:none}

/* ==== v233: Grid lines tamam title bands mein EK jesi — user ki hidayat:
   jesi lines coupons wale band mein hain, wesi hi har page par hon. Teeno
   heroes (pg/cpn/svc) ki ::before ab bilkul ek hi 72px line-grid hai
   (svc ki purani masked 44px grid aur v232 ki bandish khatam). ==== */
.pg-hero::before,.cpn-hero::before,.svc-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 72px);-webkit-mask-image:none;mask-image:none;pointer-events:none}

/* ==== v234: Hero ke teen hisse — kicker, title, description — tamam pages
   par BILKUL ek jese (size/weight/color/spacing). Kicker user ki hidayat
   par UNBOLD (500) hai. (Pehle pg-eyebrow 16.5px ki bari thi, svc ki
   12px, cpn ki 10.5px — ab teeno 11px.) ==== */
.pg-hero .pg-eyebrow,.cpn-hero .cpn-kicker,.svc-hero .svc-hero-kicker{font-size:11px;font-weight:500;letter-spacing:.22em;line-height:1.5;text-transform:uppercase;color:#FDE9B8;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 15px}
.pg-hero h1,.cpn-hero h1,.svc-hero h1{font-size:clamp(36px,4.4vw,54px);font-weight:700;letter-spacing:-.022em;line-height:1.07}
.pg-hero .pg-sub,.cpn-hero p,.svc-hero .svc-hero-main>p{font-size:16.5px;font-weight:400;line-height:1.68;color:rgba(230,250,240,.85);max-width:660px;margin-top:14px}

/* ==== v235: Title ke aakhri gradient-italic lafz ka kata hua kinara fix —
   italic akshar apne box se bahar jhukte hain aur gradient paint wahan
   nahi pohanchta tha, is liye har page par aakhri harf kata lagta tha.
   em ko halki si right padding di hai taake gradient poora bane. ==== */
.pg-hero h1 em,.cpn-hero h1 em,.svc-hero h1 em{padding-right:.13em}

/* ==== v236: Cart par Continue Shopping — checkout ke sath ek hi row mein
   button jora (gap ke sath); cart templates ka hai, is liye ye button seedha
   shop/templates page par le jata hai jahan se kharidari ho rahi hai. ==== */
.cart-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* ==== v238: Cart icon ka hover fix — hover par chip poora hara bhara
   (solid gradient block) ho jata tha; user ko ye pasand nahi. Ab hover par
   chip apni halki safed-akhzari shakl mein rehta hai: sirf halka sa lift,
   gehri kinari aur naram saya. ==== */
.cart-btn:hover .cb-ico{background:linear-gradient(145deg,#FFFFFF,#E9F7EF);color:#047857;border-color:rgba(4,120,87,.6);box-shadow:0 14px 26px -12px rgba(3,25,17,.45),inset 0 1px 0 #fff}

/* ==== v239: Desktop mega menu ke links par bhi wahi sunehra dot jo mobile
   drawer mein hai (user ki hidayat — desktop par links khaali thay). Sirf
   desktop par laagu; mobile drawer ki apni dot wali shakl wesi hi hai. ==== */
@media(min-width:861px){
  .mega-link{position:relative;padding-left:17px}
  .mega-link::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#D97706;opacity:.85}
}

/* ==== v241: CONTRAST / DEFINITION system (user ki shikayat: page bg bhi
   halka, cards/forms/fields bhi safed — kuch saaf nazar nahi ata).
   Teen tabdeelian poori site par:
   (1) Page bg halka sa gehra sage-ivory — safed cards ab us par ubhar kar
       nazar ayenge.
   (2) Cards/forms/tables ki kinari (border) aur saya wazeh — safed kinari
       khatam, gehri sabz-gray border + gehra saya.
   (3) Tamam form fields ab halki sabz tint wali bhari hui shakl mein hain
       (safed par safed khatam), kinari saaf; focus par safed + emerald ring.
       Labels ka rang bhi gehra kar diya hai. ==== */
:root{--bg:#E9EEE1}
body{background:#E9EEE1}
.form-card,.card,.tbl,.shop-tools,.ctc-mail{border:1px solid rgba(6,64,43,.17);box-shadow:0 24px 44px -22px rgba(3,40,26,.30),0 2px 6px rgba(3,40,26,.05)}
.ctc-mail{background:linear-gradient(180deg,#FFFFFF,#F0F6F0)}
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),form textarea,form select{background:#F2F7F2;border:1.5px solid rgba(6,64,43,.28);color:var(--ink)}
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):hover,form textarea:hover,form select:hover{border-color:rgba(6,64,43,.48)}
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,form textarea:focus,form select:focus{background:#FFFFFF;border-color:#0D9488;box-shadow:0 0 0 4px rgba(13,148,136,.16);outline:none}
.form-card label{color:#22382E;font-weight:500}

/* ==== v242: Home hero — GLASS panel (user ki hidayat: hero ka bg glass/
   blur type ho taake us par ki chezen bilkul clear ayen). Headline wala
   hissa ab aik frosted glass panel mein hai: neeche v240 wala rangon ka
   wash beh raha hai aur panel ki safed translucent satah + safed kinari +
   andar ki roshni use dhundla sheesha banati hai — text/buttons us par
   bilkul saaf ubhar kar ate hain. (Home par asal backdrop-filter iPhone
   par crash karta hai, is liye waisa hi glass look baghair us ke banaya
   hai — mehfooz aur tez.) ==== */
body.pg-home .hero-glass{position:relative;z-index:1;max-width:900px;margin:0 auto;background:linear-gradient(165deg,rgba(255,255,255,.78),rgba(255,255,255,.48));border:1px solid rgba(255,255,255,.9);border-radius:15px;box-shadow:0 34px 64px -26px rgba(3,40,26,.28),inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(255,255,255,.45);padding:46px 42px 40px}
@media(max-width:640px){body.pg-home .hero-glass{padding:32px 20px 28px;border-radius:22px}}

/* ==== v243: v241 ka field system mukammal — textarea/select par purani
   class-rules specificity mein jeet rahi theen, is liye un ke liye alag
   mazboot rules: ab tamam fields (input/textarea/select) ek jese tint,
   border aur focus ring par hain. ==== */
form textarea,form select,.form-card textarea,.form-card select{background:#F2F7F2;border:1.5px solid rgba(6,64,43,.28);color:var(--ink)}
.form-card textarea:hover,.form-card select:hover{border-color:rgba(6,64,43,.48)}
.form-card textarea:focus,.form-card select:focus{background:#FFFFFF;border-color:#0D9488;box-shadow:0 0 0 4px rgba(13,148,136,.16);outline:none}

/* ==== v244: Cart table — full-width rows + har row mein mukammal detail
   (thumbnail, naam, H-TPL code, category, badges, asal qeemat kata kar
   bachti hui raqam ke sath). Purani .tbl aadhi width par simti hui thi. ==== */
.cart-tbl{display:table;width:100%;border-collapse:separate;border-spacing:0;background:#FFFFFF;border:1px solid rgba(6,64,43,.17);border-radius:11px;overflow:hidden;box-shadow:0 24px 44px -22px rgba(3,40,26,.30);margin:16px 0}
.cart-tbl th{background:#EFF6F0;text-align:left;padding:13px 16px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#33513F;border-bottom:1px solid rgba(6,64,43,.14)}
.cart-tbl td{padding:14px 16px;border-bottom:1px solid rgba(6,64,43,.09);vertical-align:middle}
.cart-tbl tr:last-child td{border-bottom:none}
.cart-item{display:flex;gap:14px;align-items:center}
.cart-thumb{width:104px;height:68px;object-fit:cover;object-position:50% 0;border-radius:10px;border:1px solid rgba(6,64,43,.16);flex:none;background:#0B2A20}
.ci-t{font-weight:500;font-size:15.5px;color:var(--ink);text-decoration:none}
.ci-t:hover{color:#047857}
.ci-m{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ci-chip{font-size:11px;font-weight:500;letter-spacing:.03em;padding:3px 9px;border-radius:999px;background:#EEF4EE;color:#3D5A48;border:1px solid rgba(6,64,43,.12)}
.ci-chip.ci-code{background:#FDF3DC;color:#8A5A00;border-color:rgba(180,120,10,.25)}
.ci-chip.ci-ex{background:#F5C542;color:#4A2E05;border-color:transparent}
.ci-chip.ci-ft{background:#123B2C;color:#D9F5E6;border-color:transparent}
.ci-chip.ci-new{background:#10B981;color:#FFFFFF;border-color:transparent}
.ci-price{white-space:nowrap}
.ci-price s{color:#8AA295;margin-right:8px;font-size:14px}
.ci-price b{font-size:17px;color:var(--ink)}
.ci-save{display:block;color:#047857;font-size:12.5px;font-weight:500;margin-top:3px}
@media(max-width:640px){
  .cart-thumb{width:74px;height:50px}
  .cart-tbl th,.cart-tbl td{padding:11px 12px}
  .ci-t{font-size:14px}
}
body.pg-home .hero-sheet{position:relative;z-index:1;width:100%;margin:8px 0 30px;background:linear-gradient(165deg,rgba(255,255,255,.34),rgba(255,255,255,.13) 55%,rgba(255,255,255,.20));border:1px solid rgba(255,255,255,.65);border-radius:15px;box-shadow:0 40px 80px -32px rgba(3,40,26,.35),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.35);padding:52px 38px 34px}
@media(max-width:640px){body.pg-home .hero-sheet{padding:34px 16px 24px;border-radius:22px}}

/* ==== v248: Hero — DARK frosted glass (user ki saaf hidayat: card NAHI,
   glass chahiye; aur hero ka bg color DARK ho, jese black). Poora hero
   ab gehre black-emerald par hai, us ke upar poori satah ki dhundli
   glass wali chamak hai — koi panel/card/border nahi. Peeche ke gehre
   rang (sunehra/emerald/teal) kam opacity par jhalakte hain. Gehre bg
   par chezen saaf nazar anay ke liye hero ka text halka kar diya hai
   (headline safed, sharah halki sabz-safed). ==== */
body.pg-home .hero{background:radial-gradient(1000px 520px at 92% -12%,rgba(217,164,32,.28),rgba(217,164,32,0) 60%),radial-gradient(900px 560px at 2% -10%,rgba(16,185,129,.30),rgba(16,185,129,0) 58%),radial-gradient(820px 520px at 50% 118%,rgba(13,148,136,.24),rgba(13,148,136,0) 60%),radial-gradient(900px 320px at 50% 88%,rgba(52,211,153,.12),rgba(52,211,153,0) 70%),linear-gradient(165deg,#0A2E22 0%,#051F16 52%,#03130C 100%)}
body.pg-home .hero::before{display:block;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 40%,rgba(255,255,255,.05)),radial-gradient(rgba(255,255,255,.13) 1px,rgba(255,255,255,0) 1.6px);background-size:auto,26px 26px;-webkit-mask-image:none;mask-image:none;opacity:1}
body.pg-home .hero h1{color:#F5FBF7}
body.pg-home .hero h1 em{background:linear-gradient(100deg,#34D399,#A3E635 70%,#E7C65B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
body.pg-home .hero p{color:rgba(219,240,228,.86)}
body.pg-home .hero .why-item h3{color:#F0FAF3}
body.pg-home .hero .why-item p{color:rgba(219,240,228,.75)}
body.pg-home .hero .scroll-cue{color:rgba(219,240,228,.8)}

/* ==== v249: Template card ke andar upar/neeche saans ki jagah (user:
   content card ke kinaron ko touch na kare). Card ke andar upar 20px aur
   neeche 22px khaali jagah — NEW badge ab card ke upari kinare se takra
   kar bahar nahi latakta, aur neeche wali info pill bhi kinare se chipki
   nahi rehti. Fan ki size/tarteeb waisi hi hai. ==== */
.tpl-card{padding-top:20px;padding-bottom:22px}

/* ==== v250: Contact page ki smart tarteeb — pehle email card upar-left
   aur form neeche akela latka tha; ab do-column tarteeb hai: left mein
   Get in Touch + support email card + teen info cards (fast reply /
   order help / tracked tickets), right mein poora form. Mobile par
   sab ek column mein aa jata hai. ==== */
.ctc-grid{display:grid;grid-template-columns:minmax(320px,450px) 1fr;gap:34px;align-items:start;margin-top:28px}
.ctc-h{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.ctc-side .ctc-note{margin:0 0 18px}
.ctc-side .ctc-mail{max-width:none;margin:0 0 16px}
.ctc-points{display:flex;flex-direction:column;gap:12px}
.ctc-point{display:flex;gap:13px;align-items:flex-start;background:#FFFFFF;border:1px solid rgba(6,64,43,.14);border-radius:10px;padding:14px 16px;box-shadow:0 16px 30px -22px rgba(3,40,26,.30)}
.ctc-point .cp-ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:#E4F3E9;color:#047857}
.ctc-point b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:2px}
.ctc-point span{font-size:13px;color:var(--ink2);line-height:1.55}
.ctc-form{margin:0;max-width:none;width:100%}
@media(max-width:900px){.ctc-grid{grid-template-columns:1fr}}

/* ==== v253: PREMIUM CARD system — service cards ke andar canvas aurora
   (app.js v79), upar chamak wali kinari, gehra saya, hover par lift.
   Blog cards ko bhi wahi premium zubaan (kinari + saya + media ke
   neeche gradient lakeer). Template fan cards is system se bahar hain
   (un ka design pehle se final hai). ==== */
.pfx-card{position:relative;overflow:hidden;border:1px solid rgba(6,64,43,.13);border-radius:13px;box-shadow:0 22px 40px -24px rgba(3,40,26,.28);transition:transform .35s cubic-bezier(.3,.7,.3,1),box-shadow .35s}
.pfx-card:hover{transform:translateY(-5px);box-shadow:0 34px 54px -24px rgba(3,40,26,.38)}
.pfx-card canvas.card-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.pfx-card .card-body{position:relative;z-index:1}
.pfx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,0) 42%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
.pfx-card .svc-ic{box-shadow:inset 0 1px 0 #FFFFFF,0 16px 26px -12px rgba(3,40,26,.40)}
.blog-card{border:1px solid rgba(6,64,43,.14);box-shadow:0 22px 40px -24px rgba(3,40,26,.30)}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 34px 54px -24px rgba(3,40,26,.40)}
.blog-card .blog-media{position:relative}
.blog-card .blog-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#059669,#84CC16,#D97706);z-index:2}

/* ==== v254: Card ki apni satah bhi DESIGNED hai (user: jo card white h
   us ko design kro) — ab har premium card ki satah us ke apne accent
   rang ki naram dhund + upar brand gradient lakeer ke sath aati hai;
   icon tile bhara hua gradient hai (app.js v81 har card ke icon ke asal
   rang se ye rang set karta hai). Safed saada card khatam. ==== */
.pfx-card{background:radial-gradient(430px 210px at 10% -6%,var(--acc-soft,rgba(4,120,87,.14)),rgba(255,255,255,0) 62%),radial-gradient(400px 230px at 96% 0%,var(--acc-soft2,rgba(217,164,32,.10)),rgba(255,255,255,0) 58%),linear-gradient(90deg,#059669,#84CC16 52%,#D97706) top/100% 4px no-repeat,linear-gradient(168deg,#FFFFFF 0%,var(--acc-bg,#F0F7F1) 60%,#E9F2EB 100%)}
.blog-card{background:linear-gradient(170deg,#FFFFFF 0%,#F1F8F2 62%,#EAF3EC 100%)}

/* ==== v256: Bina canvas wali satah (home) bhi wazeh rang-daar — pastel
   field ke qareeb: dhund aur tint mazeed gehray. ==== */
.pfx-card{--acc-soft:rgba(4,120,87,.26)}

/* ==== v257: ASAL ROK — aik purani global rule .card-body par SAFED
   gradient lagati thi jo canvas ke rang ko poora dhak deti thi; premium
   cards mein body shaffaf hai taake andar ka canvas design nazar aye. ==== */
.pfx-card .card-body{background:transparent}

/* ==== v258: Blog cards bhi usi canvas design system mein hain (user ka
   rule: jahan bhi aise cards hon, same design) — un ka body shaffaf aur
   canvas ke upar hai, media bhi canvas ke upar rehta hai. ==== */
.blog-card .blog-card-body{position:relative;z-index:1;background:transparent}
.blog-card .blog-media{z-index:1}

/* ==== v259: Premium card ke tamam andar wale hisse canvas ke upar —
   ye usool har pfx card par lagta hai (stat tiles samait). ==== */
.pfx-card>*:not(canvas){position:relative;z-index:1}

/* ==== v260: Shop pagination — Show More ki jagah 9 per page + pager
   (home ka Show More waisa hi hai). ==== */
.shop-pager{margin-top:30px;justify-content:space-between}
.shop-pager .pager-pages{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ==== v261: blog article meta row + related ==== */
.blog-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#57705F;font-size:13.5px;font-weight:500;margin:2px 0 18px}
.blog-meta i{font-style:normal;opacity:.55}
.blog-related{margin-top:46px}
.blog-related h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.5px;color:#0B3B2E;margin:0 0 18px}
.blog-related h2 em{font-style:italic;background:linear-gradient(92deg,#B8860B,#D97706 55%,#0D9488);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-prose h2{font-size:clamp(21px,2.6vw,26px);font-weight:800;color:#0B3B2E;letter-spacing:-.3px;margin:30px 0 10px;line-height:1.25}

/* ==== v262: article full-width layout — section ki poori width,
   prose card + sticky sidebar (TOC / CTA / help) ==== */
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px;align-items:start;margin-top:4px}
.blog-body{max-width:none}
.blog-body p{font-size:16.5px;line-height:1.8}
.art-side{position:sticky;top:104px;display:grid;gap:16px}
.art-card{background:linear-gradient(180deg,#FFFFFF,#F7FBF7);border:1px solid rgba(6,64,43,.15);border-radius:12px;padding:20px 22px;box-shadow:0 16px 30px -20px rgba(3,25,17,.28)}
.art-card h3{font-size:16px;font-weight:800;color:#0B3B2E;margin:0 0 10px;letter-spacing:-.2px}
.art-card p{font-size:14px;line-height:1.65;color:#47604F;margin:0 0 12px}
.art-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.art-toc a{display:block;padding:7px 10px;border-radius:10px;color:#24503C;font-size:13.5px;font-weight:500;text-decoration:none;transition:background .15s,color .15s}
.art-toc a:hover{background:rgba(16,185,129,.10);color:#065F46}
.art-cta{background:linear-gradient(150deg,#0C3A2B,#065F46 70%,#0B5563);border-color:transparent}
.art-cta h3{color:#FFFFFF}
.art-cta p{color:rgba(219,242,228,.85)}
.art-help-links{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.art-help-links a{color:#047857;font-weight:500;font-size:13.5px;text-decoration:none;border-bottom:2px solid rgba(4,120,87,.30)}
.art-help-links a:hover{border-color:#047857}
@media(max-width:1024px){.art-layout{grid-template-columns:1fr}.art-side{position:static}}

/* ==== v263: article author box (E-E-A-T — Who) ==== */
.art-author{display:flex;gap:16px;align-items:flex-start;margin-top:34px;background:linear-gradient(180deg,#FFFFFF,#F4FAF4);border:1px solid rgba(6,64,43,.15);border-radius:12px;padding:20px 22px;box-shadow:0 16px 30px -20px rgba(3,25,17,.25)}
.art-author-ic{flex:none;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;background:linear-gradient(135deg,#10B981,#0D9488 60%,#0F766E);box-shadow:0 10px 18px -8px rgba(13,148,136,.6)}
.art-author h3{font-size:15.5px;font-weight:800;color:#0B3B2E;margin:1px 0 5px}
.art-author p{font-size:13.5px;line-height:1.65;color:#47604F;margin:0}
.art-author a{color:#047857;font-weight:500;text-decoration:none;border-bottom:2px solid rgba(4,120,87,.28)}
.art-author a:hover{border-color:#047857}
@media(max-width:640px){.art-author{flex-direction:column;gap:10px}}

/* ==== v264: template detail — ID ke agay naam ==== */
.detail-info h1 .tpl-h-name{font-size:1em;font-weight:inherit;color:#0F766E;letter-spacing:inherit;vertical-align:baseline;white-space:normal}

/* ==== v266: home stats band — smart glass tiles ==== */
.stats-band .stat.pfx-card{background:linear-gradient(155deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.42) 52%,rgba(233,250,240,.5) 100%);border:1px solid rgba(255,255,255,.85);backdrop-filter:none;-webkit-backdrop-filter:none}
.stats-band .stat::before{background:linear-gradient(90deg,#059669,#84CC16 52%,#D97706)}
.stats-band .stat strong{letter-spacing:-.03em;background:linear-gradient(120deg,#065F46 10%,#0D9488 55%,#65A30D);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stats-band .stat>span:last-child{color:#55705F;font-size:12px;letter-spacing:.09em}
.stats-band .stat .stat-ic2{margin-bottom:6px}

/* ==== v267: stats band — slim smart glass strip (bare tiles khatam) ==== */
.stats-band{gap:0;position:relative}
.stats-band::before{content:"";position:absolute;top:0;left:2px;right:2px;height:3px;border-radius:3px;background:linear-gradient(90deg,#059669,#84CC16 52%,#D97706);z-index:3}
.stats-band .stat.pfx-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:center;text-align:left;padding:16px 20px;border-radius:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 34px -22px rgba(3,40,26,.30)}
.stats-band .stat.pfx-card:hover{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 26px 40px -22px rgba(3,40,26,.36)}
.stats-band .stat::before,.stats-band .stat::after{display:none}
.stats-band .stat .stat-ic2{grid-row:1/3;grid-column:1;margin:0;width:42px;height:42px;border-radius:13px}
.stats-band .stat strong{grid-column:2;grid-row:1;font-size:26px;line-height:1.05}
.stats-band .stat>span:last-child{grid-column:2;grid-row:2;margin-top:2px}
.stats-band .stat:nth-child(1){border-radius:22px 0 0 22px}
.stats-band .stat:nth-child(4){border-radius:0 22px 22px 0}
.stats-band .stat:nth-child(2),.stats-band .stat:nth-child(3),.stats-band .stat:nth-child(4){border-left:none;box-shadow:inset 1px 0 0 rgba(6,64,43,.09),inset 0 1px 0 rgba(255,255,255,.9),0 22px 34px -22px rgba(3,40,26,.30)}
.stats-band .stat canvas.card-fx{opacity:.4}
@media (max-width:860px){
 .stats-band .stat:nth-child(1){border-radius:22px 0 0 0}
 .stats-band .stat:nth-child(2){border-radius:0 22px 0 0}
 .stats-band .stat:nth-child(3){border-radius:0 0 0 14px;border-left:1px solid rgba(6,64,43,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 34px -22px rgba(3,40,26,.30)}
 .stats-band .stat:nth-child(4){border-radius:0 0 22px 0}
 .stats-band .stat.pfx-card{padding:14px 16px}
}

/* ============================================================
   ADMIN PREMIUM v2 (v290 / style ?v=268) — sirf .admin-shell scoped.
   Public/account pages par koi asar nahi. Functionality untouched.
   ============================================================ */
.admin-shell{--adm-line:rgba(6,64,61,.14);--adm-line2:rgba(6,64,61,.08);--adm-ink:#042F2E;--adm-mut:#5B7270;--adm-grad:linear-gradient(120deg,#14B4B8,#0D9094 55%,#115B5E);--adm-gold:linear-gradient(90deg,#D97706,#E7C65B);--adm-sh:0 20px 38px -24px rgba(3,40,38,.28);grid-template-columns:252px minmax(0,1fr);gap:22px}
/* ---------- Sidebar ---------- */
.admin-shell .admin-side{border:1px solid rgba(110,231,224,.16);padding:18px 13px;overflow:hidden}
.admin-shell .admin-side::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--adm-gold);display:block}
.admin-shell .admin-side::after{content:"";position:absolute;inset:0;pointer-events:none}
.admin-shell .admin-side a.anav{display:flex;align-items:center;gap:9px;border-radius:11px;padding:9px 12px;font-size:14px;font-weight:500;position:relative;z-index:1;transition:background .2s,color .2s,transform .2s}
.admin-shell .admin-side a.anav svg{flex:0 0 auto;transition:opacity .2s,transform .2s}
.admin-shell .anav-pill{border-radius:11px;z-index:0}
.admin-shell .anav-group{font-size:10.5px;letter-spacing:.15em;position:relative;z-index:1}
.admin-shell .aside-card{position:relative;z-index:1}
.admin-shell .aside-card .ac-ava{background:var(--adm-grad);color:#fff;box-shadow:0 8px 18px -6px rgba(16,185,178,.55)}
.admin-shell .ac-dot{background:#2DD1D4;box-shadow:0 0 0 3px rgba(52,211,203,.25)}
/* ---------- Main frame + topbar ---------- */
.admin-shell .admin-main{background:transparent;border:none;box-shadow:none;padding:2px 0 0;border-radius:0}
.adm-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.adm-top h1{font-family:'Sora',sans-serif;font-size:27px;margin:0;color:var(--adm-ink)}
.adm-sub{margin:3px 0 0;color:var(--adm-mut);font-size:13px;font-weight:500}
.adm-top-r{display:flex;gap:10px}
.adm-view{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;border:1px solid var(--adm-line);background:#fff;color:#134C4E;font-weight:500;font-size:13px;box-shadow:0 10px 22px -16px rgba(3,40,38,.35);transition:transform .2s,box-shadow .2s,background .2s}
.adm-view:hover{transform:translateY(-2px);background:#F2F7F2;color:#134C4E}
.adm-user{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--adm-line);border-radius:999px;padding:5px 14px 5px 5px;box-shadow:0 10px 22px -16px rgba(3,40,38,.35)}
.adm-user .ac-ava{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--adm-grad);color:#fff;font-size:13px}
.adm-user-n{font-weight:500;font-size:13.5px;color:var(--adm-ink)}
.admin-main>*{animation:admUp .5s cubic-bezier(.22,.9,.28,1) both}
.admin-main>*:nth-child(2){animation-delay:.05s}.admin-main>*:nth-child(3){animation-delay:.1s}.admin-main>*:nth-child(4){animation-delay:.15s}.admin-main>*:nth-child(5){animation-delay:.2s}.admin-main>*:nth-child(6){animation-delay:.25s}
@keyframes admUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* ---------- KPI cards ---------- */
.admin-main .stat-grid{grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:16px;margin:0 0 6px}
.admin-main .stat.adm-kpi{background:#fff;border:1px solid var(--adm-line);border-radius:12px;padding:18px;display:flex;align-items:center;gap:14px;text-align:left;box-shadow:var(--adm-sh);position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.admin-main .stat.adm-kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;}
.admin-main .stat.adm-kpi::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.admin-main .stat.adm-kpi:hover{transform:translateY(-4px);box-shadow:0 26px 44px -22px rgba(3,40,38,.38)}
.admin-main .stat.adm-kpi:hover::after{opacity:1}
.admin-main .adm-kpi .stat-ic{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#14B4B8,#115B5E);box-shadow:0 10px 20px -8px rgba(13,144,148,.55)}
.admin-main .adm-kpis .stat:nth-child(2) .stat-ic{background:linear-gradient(135deg,#0D9094,#155E5D)}
.admin-main .adm-kpis .stat:nth-child(3) .stat-ic{background:linear-gradient(135deg,#D97706,#B45309);box-shadow:0 10px 20px -8px rgba(217,119,6,.55)}
.admin-main .adm-kpis .stat:nth-child(4) .stat-ic{background:linear-gradient(135deg,#115B5E,#134C4E)}
.admin-main .adm-kpis .stat:nth-child(5) .stat-ic{background:linear-gradient(135deg,#0DA364,#126241);box-shadow:0 10px 20px -8px rgba(13,163,100,.5)}
.admin-main .adm-kpi .stat-tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.admin-main .adm-kpi .stat-tx b{font-family:'Sora',sans-serif;font-size:24.5px;letter-spacing:-.02em}
.admin-main .adm-kpi .stat-tx span{font-size:12.5px;color:var(--adm-mut);letter-spacing:.02em}
/* ---------- Panels + chart ---------- */
.adm-panel{background:#fff;border:1px solid var(--adm-line);border-radius:12px;box-shadow:var(--adm-sh);margin:18px 0;overflow:hidden}
.adm-panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 20px 4px}
.adm-panel-h h3{margin:0;font-family:'Sora',sans-serif;font-size:16.5px;color:var(--adm-ink)}
.adm-link{font-size:13px;font-weight:500;color:#115B5E}
.adm-link:hover{color:#134C4E;text-decoration:underline}
.adm-seg{display:inline-flex;background:#EDF4ED;border-radius:999px;padding:3px;gap:2px}
.adm-seg a{padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:500;color:#33504D;transition:background .2s,color .2s}
.adm-seg a:hover{color:#134C4E}
.adm-seg a.on{background:var(--adm-grad);color:#fff;box-shadow:0 6px 14px -6px rgba(13,144,148,.6)}
.adm-chart-stats{display:flex;gap:28px;flex-wrap:wrap;padding:8px 20px 2px}
.adm-chart-stats span{font-size:11px;color:var(--adm-mut);font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.adm-chart-stats b{display:block;font-family:'Sora',sans-serif;font-size:17px;color:var(--adm-ink);letter-spacing:-.01em;text-transform:none;margin-bottom:1px}
.adm-chart-box{position:relative;height:232px;padding:8px 12px 12px}
.adm-chart-box canvas{width:100%;height:100%;display:block}
.adm-tip{position:absolute;pointer-events:none;font-size:12px;font-weight:500;padding:6px 10px;border-radius:9px;transform:translate(-50%,-135%);opacity:0;transition:opacity .15s;white-space:nowrap;z-index:5}
.adm-tip small{display:block;color:#9FD8D4;font-weight:500;font-size:11px}
.adm-panel .tbl-scroll{margin:0;border-radius:0;box-shadow:none}
.adm-panel .tbl{border:none;box-shadow:none;border-radius:0;margin:4px 0 0;background:transparent}
/* ---------- Tables: full-width premium rows ---------- */
.admin-main .tbl-scroll{overflow-x:auto;border-radius:12px;margin:16px 0;box-shadow:var(--adm-sh);scrollbar-width:thin;scrollbar-color:rgba(13,144,148,.45) transparent}
.admin-main .tbl-scroll::-webkit-scrollbar{height:8px}
.admin-main .tbl-scroll::-webkit-scrollbar-thumb{background:rgba(13,144,148,.4);border-radius:99px}
.admin-main .tbl{background:#fff;border:1px solid var(--adm-line);border-radius:12px;box-shadow:var(--adm-sh);margin:16px 0;overflow:hidden}
.admin-main .tbl-scroll>.tbl{margin:0;min-width:660px;border:none;box-shadow:none;border-radius:0}
.admin-main .tbl th{background:linear-gradient(180deg,#F2F7F2,#E9F2EB);color:#33504D;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:13px 16px;border-bottom:1px solid var(--adm-line)}
.admin-main .tbl td{padding:13px 16px;font-size:14px;color:#2C3E57;border-bottom:1px solid var(--adm-line2);vertical-align:middle}
.admin-main .tbl tr{transition:background .18s}
.admin-main .tbl tr:hover td:first-child{box-shadow:inset 3px 0 0 #0D9094}
.admin-main .tbl tr:last-child td{border-bottom:none}
.admin-main .tbl td:last-child a:not(.btn){display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;border:1px solid rgba(6,64,61,.22);color:#134C4E;font-size:12.5px;background:#fff;transition:all .18s;margin:1px 0}
.admin-main .tbl td:last-child a:not(.btn):hover{background:var(--adm-grad);border-color:transparent;color:#fff;transform:translateY(-1px);box-shadow:0 8px 16px -8px rgba(13,144,148,.6)}
.admin-main .tpl-thumb{width:58px;height:40px;border-radius:10px;box-shadow:0 0 0 1px var(--adm-line),0 8px 16px -10px rgba(3,40,38,.4);transition:transform .25s}
.admin-main tr:hover .tpl-thumb{transform:scale(1.07)}
.admin-main .tpl-code{font-family:'Sora',sans-serif;color:#134C4E;letter-spacing:.02em;white-space:nowrap}
.admin-main .tag-pill{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(217,119,6,.14);border:1px solid rgba(217,119,6,.35);color:#92400E;font-size:11.5px;}
.admin-main .cbx input[type="checkbox"]{width:17px;height:17px;accent-color:#0D9094;cursor:pointer}
/* status pills (JS .stc -> .pill) */
.admin-main .pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;letter-spacing:.03em;text-transform:capitalize;border:1px solid transparent;white-space:nowrap}
/* ---------- Toolbars / bulk bars / pager ---------- */
.admin-main .bulk-bar,.admin-main .tools-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid var(--adm-line);border-radius:10px;padding:10px 12px;box-shadow:0 16px 30px -22px rgba(3,40,38,.35);margin:14px 0}
.admin-main .shop-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.9);border:1px solid var(--adm-line);border-radius:10px;padding:10px 12px;box-shadow:0 16px 30px -22px rgba(3,40,38,.35);margin:14px 0;position:relative;z-index:5}
@media(min-width:1025px){.admin-main .bulk-bar,.admin-main .tools-bar,.admin-main .shop-tools{position:sticky;z-index:35}}
.admin-main .bulk-count{font-size:12.5px;padding:5px 12px;border-radius:999px;background:#EDF4ED;color:#33504D;transition:background .2s,color .2s}
.admin-main .bulk-bar.has-sel .bulk-count{background:var(--adm-grad);color:#fff}
.admin-main .bulk-bar select,.admin-main .shop-tools select,.admin-main .bulk-bar input[type="text"]{padding:9px 12px;border-radius:10px;border:1.5px solid rgba(6,64,61,.18);background:#F2F7F2;font-weight:500;font-size:13.5px;color:var(--adm-ink)}
.admin-main .tools-hint{font-size:13px;color:var(--adm-mut)}
.admin-main .pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}
.admin-main .pager .pg{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;border:1px solid var(--adm-line);background:#fff;font-size:13px;color:#33504D;transition:all .18s}
.admin-main .pager a.pg:hover{transform:translateY(-1px);border-color:rgba(13,144,148,.5);color:#134C4E}
.admin-main .pager .pg.on{background:var(--adm-grad);color:#fff;border-color:transparent;box-shadow:0 8px 16px -8px rgba(13,144,148,.6)}
/* ---------- Forms ---------- */
.admin-main .form-card{background:#fff;border:1px solid var(--adm-line);border-radius:12px;box-shadow:var(--adm-sh);max-width:none;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:15px 22px;margin:16px 0;backdrop-filter:none}
.admin-main .form-card::before{left:24px;right:24px;background:linear-gradient(90deg,#115B5E,#2DD1D4 55%,#D97706)}
.admin-main .form-card>h3,.admin-main .form-card>p,.admin-main .form-card>fieldset,.admin-main .form-card>.img-admin,.admin-main .form-card>.fg-2,.admin-main .form-card>button,.admin-main .form-card>a.btn{grid-column:1/-1}
.admin-main .form-card>label:has(textarea){grid-column:1/-1}
.admin-main .form-card h3{font-family:'Sora',sans-serif;font-size:16px;color:var(--adm-ink);margin:8px 0 0;padding-left:12px;border-left:3px solid #D97706}
.admin-main .form-card label{color:#33504D;font-size:13.5px}
.admin-main .form-card input,.admin-main .form-card textarea,.admin-main .form-card select{background:#F2F7F2;border:1.5px solid rgba(6,64,61,.18);border-radius:12px;padding:11px 14px;transition:border-color .2s,box-shadow .2s,background .2s}
.admin-main .form-card input:hover,.admin-main .form-card textarea:hover,.admin-main .form-card select:hover{border-color:rgba(6,64,61,.32)}
.admin-main .form-card input:focus,.admin-main .form-card textarea:focus,.admin-main .form-card select:focus{background:#fff;border-color:#0D9094;box-shadow:0 0 0 4px rgba(13,144,148,.18);outline:none}
.admin-main .form-card>button,.admin-main .form-card>a.btn{justify-self:center;min-width:230px}
.admin-main .form-card label.check input{width:17px;height:17px;accent-color:#0D9094}
.admin-main fieldset.bundle-members{border:1px solid var(--adm-line);border-radius:10px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:9px;margin:0}
.admin-main fieldset.bundle-members legend{font-size:13.5px;color:#33504D;padding:0 6px}
.admin-main .bundle-mem{display:inline-flex;flex-direction:row;align-items:center;gap:7px;background:#F2F7F2;border:1px solid var(--adm-line);padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:500;cursor:pointer;transition:all .18s}
.admin-main .bundle-mem:hover{border-color:rgba(13,144,148,.5)}
.admin-main .bundle-mem:has(input:checked){background:linear-gradient(120deg,rgba(16,185,178,.16),rgba(217,119,6,.12));border-color:rgba(13,144,148,.5);color:#134C4E}
.admin-main .bundle-mem input{width:15px;height:15px;accent-color:#0D9094}
.admin-main .img-admin>div{background:#fff;border:1px solid var(--adm-line);border-radius:10px;box-shadow:0 12px 24px -18px rgba(3,40,38,.3);transition:transform .2s,box-shadow .2s}
.admin-main .img-admin>div:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(3,40,38,.38)}
.admin-main .desc{background:#F7FAF7;border:1px solid var(--adm-line2);border-radius:10px;padding:14px 16px}
/* ---------- Tickets / reviews / invoices ---------- */
.admin-main .tkt-filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.admin-main .tkt-filters .tf{padding:8px 15px;border-radius:999px;border:1px solid var(--adm-line);background:#fff;font-size:13px;color:#33504D;transition:all .18s}
.admin-main .tkt-filters .tf:hover{transform:translateY(-1px);border-color:rgba(13,144,148,.5)}
.admin-main .tkt-filters .tf.on{background:var(--adm-grad);color:#fff;border-color:transparent;box-shadow:0 8px 16px -8px rgba(13,144,148,.6)}
.admin-main .tkt-msgs{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.admin-main .tm{background:#fff;border:1px solid var(--adm-line);border-radius:10px;padding:14px 16px;box-shadow:0 12px 24px -20px rgba(3,40,38,.3)}
.admin-main .tm-admin{background:linear-gradient(140deg,rgba(16,185,178,.10),rgba(255,255,255,.65));border-color:rgba(13,144,148,.32)}
.admin-main .tm-meta{font-size:12.5px;color:var(--adm-mut)}
.admin-main .tm-body{margin-top:4px;color:#223836}
.admin-main .review{background:#fff;border:1px solid var(--adm-line);border-radius:10px;box-shadow:0 12px 24px -20px rgba(3,40,38,.3)}
.admin-main .inv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 16px}
.admin-main .inv-stat{background:#fff;border:1px solid var(--adm-line);border-radius:11px;padding:15px 18px;box-shadow:var(--adm-sh);min-width:0}
.admin-main .inv-stat b{font-family:'Sora',sans-serif;font-size:21px;color:var(--adm-ink)}
.admin-main .inv-stat span{color:var(--adm-mut);font-size:11px;letter-spacing:.07em}
.admin-main .inv-filters a{border-color:var(--adm-line);transition:all .18s}
.admin-main .inv-filters a:hover{transform:translateY(-1px)}
.admin-main .inv-filters a.on{background:var(--adm-grad);color:#fff;border-color:transparent}
/* ---------- Login ---------- */
.adm-login-wrap{max-width:520px;margin:30px auto 10px}
.adm-login-wrap .page-title{margin-bottom:16px}
.adm-login-wrap .form-card{max-width:none;margin:0 auto;border:1px solid var(--adm-line,rgba(6,64,61,.14));border-radius:13px;box-shadow:0 30px 50px -25px rgba(3,40,38,.4)}
.adm-login-wrap .form-card::before{background:linear-gradient(90deg,#115B5E,#2DD1D4 55%,#D97706)}
.adm-login-wrap .form-card .btn{align-self:center;min-width:230px}
/* ---------- Responsive / motion ---------- */
@media(max-width:900px){
 .admin-shell{grid-template-columns:1fr}
 .admin-shell .admin-side{position:static}
 .adm-chart-box{height:195px}
}
@media(max-width:820px){.admin-main .form-card{grid-template-columns:1fr}}
@media(max-width:560px){.adm-top h1{font-size:23px}.admin-main .stat-grid{grid-template-columns:1fr 1fr;gap:12px}.admin-main .adm-kpi .stat-tx b{font-size:20px}.admin-main .stat.adm-kpi{padding:14px}}
@media(max-width:400px){.admin-main .stat-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
 .admin-main>*{animation:none}
 .admin-main .stat.adm-kpi,.admin-main .tbl td:last-child a:not(.btn),.adm-view{transition:none}
}

/* ADMIN PREMIUM v2 — fix pack (single icon set, dark sidebar separators, gold tile) */
.admin-shell .admin-side a.anav::before{display:none}
.admin-shell .admin-side .anav{border-bottom:0}
.admin-main .stat.adm-kpi:nth-child(3) .stat-ic{background:linear-gradient(135deg,#F2C14E,#D9A406)}

/* ============================================================
   DROPDOWN STACKING FIX (style ?v=271) — PAKKA RULE: admin ho ya
   member/public area, koi bhi custom dropdown (.dd) menu kisi
   cheez ke peeche hide ya clip NAHI hoga — menu hamesha sab se
   upar, pura nazar ayega.
   ROOT CAUSE: v290 ki admUp entrance animation (fill-mode both)
   har .admin-main>* ko hamesha ke liye level-0 stacking context
   bana deti hai (finished animation identity-matrix transform
   apply karti rehti hai). Is liye .dd-panel ka z-index (80) aur
   sticky bulk-bar ka z-index (35) apne <form> ke level-0 unit ke
   andar phans jata tha, aur DOM mein baad ane wala .tbl-scroll /
   table subtree usi level par hone ki wajah se pure menu ke upar
   paint ho jata tha (orders page par form ke andar table hone se
   wahan desktop par theek tha, mobile par wahan bhi dabta tha).
   Dusri wajah: .admin-main{overflow:hidden} chhote pages par
   neeche ki taraf khulne wale menu ko kaat deta tha.
   FIX: jis container ke andar dropdown khula ho, usi container
   ko z-600 par lift karo (open state mein hi, resting design
   bilkul waisa hi) aur clip karne wale overflow ko sirf open
   state mein visible karo. Functionality bilkul nahi badli.
   ============================================================ */
.dd.open{z-index:600}
.dd.open .dd-panel{z-index:600}
.bulk-bar:has(.dd.open),.tools-bar:has(.dd.open),.shop-tools:has(.dd.open){z-index:600}
.admin-main>*:has(.dd.open){z-index:600}
.bulk-form:has(.dd.open){z-index:600}
.admin-main:has(.dd.open){overflow:visible}
.adm-panel:has(.dd.open),.form-card:has(.dd.open){overflow:visible}
@media (max-width:1024px){
  .bulk-bar:has(.dd.open),.tools-bar:has(.dd.open){position:relative}
}

/* ============================================================
   ADMIN CORRECTIONS v272 (user, 26 Oct 2026) — sirf .admin-shell /
   .admin-main scoped. Public/account par koi asar nahi.
   (1) Tamam admin tables FULL-WIDTH: base .tbl{display:block} ki
       wajah se cell-grid content par shrink-wrap hoti thi (Coupons
       par 912px vs container 1114px) — display:table wapas lagaya,
       aakhri (actions) cell aik hi line mein baithe gi.
   (2) Columns ke darmiyan bohat halki divider lines.
   (3) Sidebar HALKA (premium emerald family ki naram tone) +
       groups/items ke darmiyan separator lines.
   (4) Active item: solid emerald gradient + arrow (›).
   (5) Hover geometry fix: a.anav:hover ka translateX(3px) aur
       pill ka asymmetric inset (left:23px/right:11px) + JS ka
       +2/-1 size — teeno khatam; rest/hover/active mein tamam
       items ke edges aik hi line par.
   (6) Top flush: sidebar + sticky bars header (72px) se merge.
   (7) Admin footer: bara public footer hata kar slim rights line
       (.adm-foot, index.php foot() admin branch se ata hai).
   (8) Admin font weights naram: 800 wale key elements 700 par.
   ============================================================ */
/* (6) top flush */
body:has(.admin-shell) main.wrap,body:has(.admin-shell) main.wrap-wide{padding-top:0}
.admin-shell .admin-side{top:72px;height:calc(100vh - 72px);overflow-y:auto;overflow-x:hidden}
@media(min-width:1025px){.admin-main .bulk-bar,.admin-main .tools-bar,.admin-main .shop-tools{top:72px}}
/* (1) full-width tables */
.admin-main .tbl{display:table;width:100%}
.admin-main .tbl td:last-child{white-space:nowrap}
/* (2) halki column dividers */
.admin-main .tbl th+th,.admin-main .tbl td+td{border-left:1px solid rgba(6,64,61,.06)}
/* (3) sidebar halka + separators */
.admin-shell .admin-side{background:linear-gradient(168deg,#EDF7F5 0%,#E1F1EF 55%,#F6FAF3 100%);border-color:rgba(6,64,61,.12);}
.admin-shell .admin-side::after{background:radial-gradient(420px 200px at 85% -5%,rgba(217,164,6,.12),transparent 60%),radial-gradient(360px 260px at -10% 100%,rgba(16,185,178,.14),transparent 60%)}
.admin-shell .admin-side a.anav{color:#2E504D;padding-right:30px}
.admin-shell .admin-side a.anav svg{opacity:.85}
.admin-shell .admin-side a.anav:hover{background:rgba(13,144,148,.10);color:#064E4D;transform:none}
.admin-shell .admin-side a.anav:hover svg{opacity:1;transform:none}
.admin-shell .admin-side a.anav.on{background:linear-gradient(120deg,#14B4B8,#0D9094 60%,#115B5E);color:#fff;box-shadow:0 12px 22px -10px rgba(13,144,148,.55)}
.admin-shell .admin-side a.anav.on svg{opacity:1}
.admin-shell .admin-side a.anav[href="/admin"]:not(.on){color:#2E504D;background:transparent;box-shadow:none}
.admin-shell .anav-pill{left:13px;right:13px;background:linear-gradient(120deg,rgba(16,185,178,.16),rgba(217,164,6,.10));box-shadow:inset 0 0 0 1px rgba(13,144,148,.30)}
.admin-shell .anav-group{color:#96700F}
.admin-shell .admin-side a.anav + .anav-group{border-top:1px solid rgba(6,64,61,.13);margin-top:12px;padding-top:13px}
.admin-shell .aside-card{border-top:1px solid rgba(6,64,61,.13)}
.admin-shell .aside-card .ac-meta b{color:#042F2E}
.admin-shell .aside-card .ac-meta small{color:#52706D}
@media(min-width:901px){
  .admin-shell .admin-side a.anav{border-bottom:1px solid rgba(6,64,61,.05)}
  .admin-shell .admin-side a.anav.on{border-bottom-color:transparent}
}
/* (4) active arrow */
.admin-shell .admin-side a.anav.on::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-54%);font-size:19px;line-height:1;color:#fff}
/* (7) slim admin footer */
.adm-foot{border-top:1px solid rgba(6,64,61,.10);text-align:center;color:#7A9190;font-size:13px;font-weight:500;margin-top:34px}
/* (B) shell-header merge */
.admin-shell .admin-side{border-radius:0;border-top:none;box-shadow:12px 0 28px -22px rgba(3,40,38,.22)}

/* ============================================================
   BEGIN COORD-DESIGN :: DASHBOARD (adm2) — APPEND ONLY
   Scope: sirf .admin-main / .admin-shell ke andar. Public aur
   account pages par in classes ka koi istemal nahi (adm2-* naye
   hain), is liye regression mumkin nahi.
   Ye block style.css ke AAKHIR mein, design-round (v272) section
   ke BAAD append ho. Anchor-mুক্ত: koi purani rule edit nahi.
   ============================================================ */

/* --- KPI row 2 --- */
.admin-main .adm-kpis2{margin-top:16px}
.admin-main .adm-kpi .stat-tx .adm2-sub{font-size:11.5px;color:var(--adm-mut);font-weight:500;letter-spacing:.01em;margin-top:2px;text-transform:none}

/* --- 2-column panel grid (action lists) --- */
.admin-main .adm2-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.admin-main .adm2-grid>.adm-panel{margin:0}
@media(max-width:1024px){.admin-main .adm2-grid{grid-template-columns:1fr}}

/* --- action-list panels: tables hamesha full-width --- */
.admin-main .adm2-grid .tbl,.admin-main .adm2-status-panel .tbl{width:100%}
.admin-main .adm2-empty{padding:6px 20px 18px;color:var(--adm-mut);font-size:13.5px;font-weight:500;margin:0}

/* --- Top templates: columns poori chaurai mein taqseem --- */
.admin-main .adm2-toptbl{table-layout:fixed;width:100%}
.admin-main .adm2-toptbl th:nth-child(1),.admin-main .adm2-toptbl td:nth-child(1){width:52%}
.admin-main .adm2-toptbl th:nth-child(2),.admin-main .adm2-toptbl td:nth-child(2){width:14%}
.admin-main .adm2-toptbl th:nth-child(3),.admin-main .adm2-toptbl td:nth-child(3){width:16%}
.admin-main .adm2-toptbl th:nth-child(4),.admin-main .adm2-toptbl td:nth-child(4){width:18%}

/* --- Orders-by-status donut --- */
.admin-main .adm2-status-flex{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:10px 20px 20px}
.admin-main .adm2-donut-box{position:relative;width:178px;height:178px;flex:0 0 auto}
.admin-main .adm2-donut-box canvas{width:100%;height:100%;display:block}
.admin-main .adm2-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.admin-main .adm2-donut-c b{font-family:'Sora',sans-serif;font-size:27px;color:var(--adm-ink);line-height:1}
.admin-main .adm2-donut-c span{font-size:11.5px;color:var(--adm-mut);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.admin-main .adm2-legend{list-style:none;margin:0;padding:0;flex:1 1 260px;display:flex;flex-direction:column;}
.admin-main .adm2-legend li{display:flex;align-items:center;gap:10px;font-size:14px;color:#2C3E57}
.admin-main .adm2-legend .adm2-dot{width:11px;height:11px;border-radius:4px;background:#94A3B8;flex:0 0 auto}
.admin-main .adm2-legend .adm2-dot[data-st="pending"]{background:#D97706}
.admin-main .adm2-legend .adm2-dot[data-st="cancelled"]{background:#94A3B8}
.admin-main .adm2-legend li span{flex:1 1 auto}
.admin-main .adm2-legend li b{color:var(--adm-ink)}
.admin-main .adm2-legend li small{color:var(--adm-mut);font-weight:500;min-width:38px;text-align:right}

/* --- Quick actions --- */
.admin-main .adm2-qa-row{display:flex;flex-wrap:wrap;gap:10px;padding:8px 20px 20px}
.admin-main .adm2-qa-row .btn{justify-content:center}
.admin-main .adm2-qa-row .nav-badge{color:#fff;border-radius:999px;font-size:11px;font-weight:500;padding:1px 7px;margin-left:7px}

@media(prefers-reduced-motion:reduce){
  .admin-main .adm2-donut-box canvas{animation:none}
}

/* KPI row 2 (dashboard package) — wohi ek system, apni pehchan wale rang */
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic{color:#fff}

/* glyph size admin tiles mein markup ke 22px par hi rahe —
   generic .stat-ic svg{width:24px;stroke-width:2.35} ko admin scope mein
   override (bare glyph = saaf stroke, halka nahi) */
.admin-main .adm-kpi .stat-ic svg{width:22px;height:22px;stroke-width:2px}

/* --- chart tooltip ki behtari (sales chart RICH v2 ke sath) --- */
.admin-main .adm-tip{padding:8px 12px;border-radius:11px;font-size:13px;text-align:center}
.admin-main .adm-tip b{display:block;font-size:14px;font-weight:500}
.admin-main .adm-tip small{display:block;font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1px}

/* ============================================================
   END COORD-DESIGN :: ICONS + CHART EXTRAS
   ============================================================ */

/* ============================================================
   BEGIN COORD-DESIGN :: FONT WEIGHTS (admin diet) — APPEND ONLY
   User correction #3: admin fonts zyada bold NAHI — cap 700,
   working weights 500/600. Ye block style.css ke AAKHIR mein,
   design-round (v272) ki §8 ke BAAD append ho taake ye final
   lafz ho. Sirf .admin-main / .admin-shell / .adm-* scoped —
   public site ki .btn/.tbl/.status waghera waisi ki waisi.
   Snapshot mein font-weight:900 kahin NAHI mila; tamam
   offenders 800 thay (tafseel 05-font-offenders.md mein).
   ============================================================ */

/* headings — Sora headings 800 se 700 */
.admin-main h1,.admin-main h2,.admin-main h3{font-weight:700}
.adm-top h1{font-weight:700}

/* KPI / stat numbers — bara number 700, label 600 */
.admin-main .adm-kpi .stat-tx b{font-weight:700}
.admin-main .inv-stat b{font-weight:700}
.admin-main .adm-kpi .stat-tx span{font-weight:500}

/* pills / badges / chips — 800 se 700 (tag-pill 600, ye label hai) */
.admin-main .pill{font-weight:500}
.admin-main .st-pill{font-weight:500}
.admin-main .tag-pill{font-weight:500}
.admin-shell .nav-badge{font-weight:500}
.admin-main .tkt-no{font-weight:500}
.admin-main .adm-seg a{font-weight:500}
.admin-shell .aside-card .ac-meta b{font-weight:500}
.admin-shell .ac-ava{font-weight:700}
.adm-user .ac-ava{font-weight:700}
.admin-shell .admin-side a.anav.on::after{font-weight:500}

/* form labels — parhne mein saaf medium */
.admin-main .form-card label{font-weight:500}
.admin-main .adm-sub{font-weight:500}
.admin-main .dtl-totals b{font-weight:600}
.admin-main .dtl-totals .dtl-grand{font-weight:700}

/* ============================================================
   END COORD-DESIGN :: FONT WEIGHTS (admin diet)
   ============================================================ */

/* ============================================================
   BEGIN COORD-DESIGN :: DETAIL PAGES (.dtl) — APPEND ONLY
   Shared design: admin order detail AUR account invoice detail
   dono .dtl wrapper istemal karte hain, is liye classes wrapper
   par scoped hain (.dtl …) — kisi maujooda selector se takrao
   nahi, public pages par .dtl hai hi nahi. style.css ke AAKHIR
   mein append ho.
   FORM BUTTON CENTER rule: .dtl-actions ke forms/buttons
   center-aligned row mein hain (neeche dekho).
   ============================================================ */

.dtl{display:flex;flex-direction:column;gap:16px;max-width:940px;margin:0 auto}
.admin-main .dtl{max-width:none;margin:0}

/* --- header card --- */
.dtl-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid rgba(6,64,43,.14);border-radius:12px;padding:20px 22px;box-shadow:0 20px 38px -24px rgba(3,40,26,.28)}
.dtl-eyebrow{margin:0 0 3px;font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#96700F}
.dtl-head h2{margin:0;font-family:'Sora',sans-serif;font-size:26px;font-weight:700;color:#0A2E22;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dtl-head-r{display:flex;align-items:center;gap:14px}
.dtl-status{font-size:13px;padding:7px 16px}
.dtl-head-total{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;color:#0A2E22}

/* --- info cards grid: Customer | Payment | Invoice | Timeline --- */
.dtl-grid{display:grid;gap:14px}
@media(max-width:1024px){}
@media(max-width:560px){}
.dtl-card{background:#fff;border:1px solid rgba(6,64,43,.14);border-radius:11px;padding:16px 18px;box-shadow:0 14px 28px -22px rgba(3,40,26,.3);min-width:0}
.dtl-card h3{margin:0 0 9px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0F766E;padding-left:10px;border-left:3px solid #D97706}
.dtl-card p{margin:0 0 4px;font-size:14px;color:#22382E;word-break:break-word}
.dtl-card p b{font-weight:500}
.dtl-card .muted{color:#5B7267;font-size:13px}
.dtl-card a{font-weight:500}

/* --- items table FULL-WIDTH + totals --- */
.dtl-items{background:#fff;border:1px solid rgba(6,64,43,.14);border-radius:11px;overflow:hidden;box-shadow:0 14px 28px -22px rgba(3,40,26,.3)}
.dtl-items .tbl{width:100%;margin:0;border:none;box-shadow:none;border-radius:0;background:transparent}
.dtl-items .tbl th+th,.dtl-items .tbl td+td{border-left:1px solid rgba(6,64,43,.06)}
.dtl-totals{display:grid;grid-template-columns:1fr auto;gap:6px 18px;max-width:340px;margin:0 0 0 auto;padding:14px 18px 18px;text-align:right;font-size:14px;color:#22382E}
.dtl-totals b{font-weight:600}
.dtl-totals .dtl-grand{font-size:18px;font-weight:700;border-top:2px solid rgba(6,64,43,.35);padding-top:9px;color:#0A2E22}

/* --- action bar: maujooda actions hi, CENTER aligned --- */
.dtl-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(6,64,43,.14);border-radius:11px;padding:16px 18px;box-shadow:0 14px 28px -22px rgba(3,40,26,.3)}
.dtl-actions form{display:flex;margin:0}
.dtl-actions .btn{justify-content:center}
.dtl-thanks{text-align:center;color:#5B7267;font-size:13.5px;font-weight:500;margin:0}

/* --- admin ke andar chhoti adjustments (adm tokens se ham-ahang) --- */
.admin-main .dtl-head,.admin-main .dtl-card,.admin-main .dtl-items,.admin-main .dtl-actions{border-color:var(--adm-line);box-shadow:var(--adm-sh)}

/* --- print (account invoice) --- */
@media print{
  .dtl-actions{display:none!important}
  .dtl-head,.dtl-card,.dtl-items{box-shadow:none;border-color:#ccc}
  .dtl{max-width:none}
}
/* ============================================================
   END COORD-DESIGN :: DETAIL PAGES (.dtl)
   ============================================================ */

/* ============================================================
   BEGIN COORD-DESIGN :: GALLERY THUMB LABELS — APPEND ONLY
   Scope: sirf template DETAIL page ki gallery (.detail .gal-th).
   style.css ke AAKHIR mein append ho. Maujooda koi rule edit
   NAHI hoti. .gal-cap (bare viewer ki chip) is design ki maa
   hai — chip usi ki chhoti surat hai taake dono aik lagain.
   ============================================================ */

/* thumb container ko label ke liye anchor banao.
   .gal-th par pehle se overflow:hidden + border-radius hai;
   position:relative se layout mein koi shift NAHI ata. */
.detail .gal-th{position:relative}

/* thumbnail ke andar page-name chip — neeche-bayein kona,
   halki (translucent) gehari pill, safed text, tasveer ko
   dhake baghair: chhota size, aik line, pointer-events band
   taake click hamesha button ka hi rahe. */
.detail .gal-th-cap{position:absolute;z-index:2;border-radius:999px;background:rgba(10,24,48,.68);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.20);color:#fff;font-weight:500;text-transform:uppercase;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.detail .gal-th-cap:empty{display:none}

/* active thumb par chip thoda sa numayan — maujooda emerald kinare ke sath */
.detail .gal-th.active .gal-th-cap{background:rgba(4,120,87,.82)}

/* mobile thumbs chhote hain (76x52) — chip aur naram */
@media(max-width:700px){
  .detail .gal-th-cap{left:3px;bottom:4px;max-width:calc(100% - 6px);padding:2px 4px;font-size:7px;letter-spacing:.01em}
}

/* ============================================================
   END COORD-DESIGN :: GALLERY THUMB LABELS
   ============================================================ */

/* ============================================================
   BEGIN COORD-BACKEND :: EXPIRED STATUS PILL — APPEND ONLY
   ============================================================ */
.st-expired{background:rgba(124,58,237,.14);color:#5B21B6}
/* END COORD-BACKEND :: EXPIRED STATUS PILL */

/* ============================================================
   BEGIN COORD-FIX :: QA DELTA 1 (A1/A6/B3/H1/I2) — APPEND ONLY
   ============================================================ */
/* A1 — adm2 grid panels: tables panel ki full width par fit, koi column kata nahi */
@media(min-width:1025px){.admin-main .adm2-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.admin-main .adm2-grid>.adm-panel{min-width:0}
.admin-main .adm2-grid .tbl{table-layout:fixed}
.admin-main .adm2-grid .tbl th,.admin-main .adm2-grid .tbl td{overflow-wrap:anywhere}
/* A6 — slim admin footer: kul height 60px ke andar */
.adm-foot{padding:12px 16px 14px}
/* B3 — admin scope mein baqi font-weight:800 bhi diet par (600) */
.admin-main .btn,.admin-shell .btn,.adm-top .btn{font-weight:500}
.admin-main .adm-seg a,.admin-shell .adm-seg a{font-weight:500}
.admin-main .dd-group,.admin-shell .dd-group{font-weight:500}
.admin-main .tag-pill,.admin-shell .tag-pill{font-weight:500}
.admin-main .bulk-count{font-weight:500}
.admin-main .ac-ava,.admin-shell .ac-ava,.adm-top .ac-ava{font-weight:600}
.admin-main .tbl td:last-child>a{font-weight:500}
.admin-main .tbl tbody tr.row-open:nth-child(even):hover td{background:rgba(5,150,145,.07)}
/* I2 — gallery chip: 'Edit Account' jesa lamba label bhi pura fit ho */
.detail .gal-th-cap{font-size:8px;letter-spacing:0;padding:2px 5px;left:4px;bottom:4px;max-width:calc(100% - 8px)}
/* END COORD-FIX :: QA DELTA 1 */

/* ============================================================
   BEGIN COORD-ADJUST :: INVOICE ADJUSTMENT (.adj) — APPEND ONLY
   Admin order detail ke adjustment panel + history ke liye.
   style.css ke AAKHIR mein append ho (detail-pages .dtl block
   ke baad). Selectors .adj- par scoped hain — maujooda kisi
   selector se takrao nahi. Palette .dtl cards jesi hi hai:
   safed card, rgba(6,64,43,.14) border, radius 16, wahi saya.
   Dropdown rule: .adj-form ke andar koi overflow:hidden nahi
   hai aur select native hi rehta hai — menu clip nahi hoga.
   ============================================================ */

.adj-panel{background:#fff;border:1px solid rgba(6,64,43,.14);border-radius:11px;padding:18px 20px;box-shadow:0 14px 28px -22px rgba(3,40,26,.3);margin-top:16px;min-width:0}
.adj-panel h3{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0F766E;padding-left:10px;border-left:3px solid #D97706}
.adj-panel.adj-off{border-style:dashed;background:#FBFCF9}
.adj-panel.adj-off p{margin:0;font-size:14px;color:#5B7267}
.adj-panel.adj-off p b{color:#22382E}
.adj-step{background:#F2F7F2;border:1px solid rgba(6,64,43,.28);border-radius:9px;padding:11px 14px;font-size:13.5px;color:#22382E;margin:0 0 12px}
.adj-cur{margin:0 0 14px;font-size:14px;color:#22382E}
.adj-cur b{font-weight:500}
.adj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media(max-width:1024px){.adj-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.adj-grid{grid-template-columns:1fr}}
.adj-form{background:#F8FAF6;border:1px solid rgba(6,64,43,.12);border-radius:9px;padding:14px 16px;min-width:0}
.adj-form h4{margin:0 0 10px;font-size:13px;font-weight:700;color:#0A2E22}
.adj-form label{display:block;font-size:12.5px;font-weight:500;color:#22382E;margin:0 0 10px}
.adj-form input,.adj-form select{display:block;width:100%;margin-top:4px;background:#F2F7F2;border:1px solid rgba(6,64,43,.28);border-radius:9px;padding:8px 10px;font-size:14px;color:#22382E;box-sizing:border-box}
.adj-form input:focus,.adj-form select:focus{background:#fff;outline:2px solid rgba(15,118,110,.45);outline-offset:0}
.adj-form .btn{justify-content:center}
.adj-form p.muted{margin:10px 0 0;font-size:12.5px;color:#5B7267}
.adj-form form{display:flex;margin:0}

.adj-history{margin-top:16px;background:#fff;border:1px solid rgba(6,64,43,.14);border-radius:11px;padding:18px 20px;box-shadow:0 14px 28px -22px rgba(3,40,26,.3);min-width:0}
.adj-history h3{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0F766E;padding-left:10px;border-left:3px solid #D97706}
.adj-history .tbl{width:100%;margin:0}
.adj-tbl td{font-size:13.5px;vertical-align:top}

/* admin tokens ke sath ham-ahang */
.admin-main .adj-panel,.admin-main .adj-history{border-color:var(--adm-line);box-shadow:var(--adm-sh)}

@media print{.adj-panel,.adj-history{display:none!important}}
/* ============================================================
   END COORD-ADJUST :: INVOICE ADJUSTMENT (.adj)
   ============================================================ */

/* ============================================================
   BEGIN COORD-FIX :: ROUND 2 (A1/B3/I2 leftovers, dashboard row,
   topbar profile+gear, flash placement, zebra deepen) — APPEND ONLY
   ============================================================ */
/* A1 leftover — adm2 panels/row ke andar table floor khatam, fit lazmi */
.admin-main .adm2-grid .tbl-scroll{overflow-x:visible}
.admin-main .adm2-grid .tbl-scroll>.tbl{min-width:0}
.admin-main .adm2-row .tbl-scroll{overflow-x:visible}
.admin-main .adm2-row .tbl-scroll>.tbl{min-width:0}
.admin-main .adm2-row .tbl{table-layout:fixed}
.admin-main .adm2-row .tbl th,.admin-main .adm2-row .tbl td{overflow-wrap:anywhere}
/* B3 leftover — invoices stats labels bhi 600 */
.admin-main .inv-stats .inv-stat>span{font-weight:500}
/* I2 leftover — mobile thumbs par chip aur chhoti */
@media(max-width:700px){.detail .gal-th-cap{font-size:6.5px;padding:2px 3px;left:3px;bottom:3px;max-width:calc(100% - 4px);letter-spacing:0}}
/* Dashboard row — Top templates (2/3) + Orders by status (1/3), barabar height */
.admin-main .adm2-row{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin:18px 0;align-items:stretch}
.admin-main .adm2-row>.adm-panel{margin:0;height:100%}
.admin-main .adm2-row .adm2-status-flex{flex-direction:column;align-items:center;gap:14px;padding:12px 16px 18px}
.admin-main .adm2-row .adm2-legend{flex:0 1 auto;width:100%}
@media(max-width:1024px){.admin-main .adm2-row{grid-template-columns:1fr}}
/* Topbar profile block + gear menu */
.adm-top-r{align-items:center}
.adm-gear{position:relative;display:inline-flex;margin-left:10px}
.adm-gear-btn{width:38px;height:38px;border-radius:12px;border:1px solid rgba(6,64,61,.14);background:#fff;color:#33514D;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.adm-gear-btn:hover{background:#F2F7F2}
.adm-gear-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:216px;background:#fff;border:1px solid rgba(6,64,61,.14);border-radius:10px;box-shadow:0 24px 48px -16px rgba(6,40,38,.28);padding:6px;display:none}
.adm-gear.open .adm-gear-menu{display:block}
.adm-gear-menu a{display:block;padding:9px 11px;border-radius:9px;color:var(--ink);font-weight:500;font-size:13.5px;text-decoration:none}
.adm-gear-menu a:hover{background:#F2F7F2}
.adm-top .ac-meta b{color:var(--ink)}
.adm-top .ac-meta small{color:var(--muted)}
@media(max-width:700px){.adm-top .adm-user .ac-meta{display:none}}
/* Flash placement — admin section ke andar saaf fasla; public wrap mein */
.admin-main>.flash{margin:0 0 16px}
.flash-wrap{padding-top:14px}
.flash-wrap .flash{margin-bottom:6px}
/* Zebra deepen — pehli data row safed, dusri saaf mint tint #DAEDE7 (site-wide yaksan) */
.tbl tr:nth-child(even) td{background:transparent}
.admin-main .tbl tr:nth-child(even) td{background:transparent}
.tbl tr:nth-child(odd) td{background:#DAEDE7}
.admin-main .tbl tr:nth-child(odd) td{background:#DAEDE7}
.inv-panel .inv-row:nth-child(even){background:#DAEDE7}
/* Hover zebra (aur open-tint) se upar saaf rahe — zebra ke BAAD rakha hai */
.tbl tr:hover td{background:rgba(5,150,105,.10)}
.admin-main .tbl tr:hover td{background:rgba(5,150,145,.10)}
/* END COORD-FIX :: ROUND 2 */

/* ============================================================
   BEGIN COORD-FIX :: ROUND 3 — ADMIN FONT CAP 600 (user demand:
   admin bhar mein koi 700+ weight nahi; headings/numbers bhi 600)
   ============================================================ */
.admin-shell b,.admin-shell strong{font-weight:500}
.admin-shell h1,.admin-shell h2,.admin-shell h3{font-weight:600}
.admin-main .adm-kpi .stat-tx b,.admin-main .stat-tx b{font-weight:600}
.admin-main .adm-chart-stats b{font-weight:600}
.admin-main .inv-stat b,.admin-main .inv-stats .inv-stat b{font-weight:600}
.admin-main .tbl th{font-weight:500}
.admin-main .tpl-code{font-weight:500}
.admin-main .pill,.admin-main .st-pill{font-weight:500}
.admin-main .adm2-donut-c b{font-weight:600}
.admin-main .dtl-head-total{font-weight:600}
.admin-main .dtl-totals b,.admin-main .dtl-totals .dtl-grand{font-weight:600}
.admin-shell .anav.on{font-weight:500}
.admin-shell .anav-group{font-weight:500}
/* END COORD-FIX :: ROUND 3 */

/* ============================================================
   BEGIN COORD-FIX :: ROUND 4 — GEAR MENU STACKING (QA §2):
   .adm-top GSAP transform stacking context mein qaid tha; poori
   topbar ko content se upar uthaya — dropdown rule ki pabandi.
   ============================================================ */
.adm-top{position:relative;}
.adm-gear-menu{z-index:600}
/* END COORD-FIX :: ROUND 4 */

/* ============================================================
   BEGIN COORD-FIX :: ROUND 5 — FONT CAP 600, SPECIFICITY-MATCHED
   (delta-QA §2 offenders: links, panel h3, status, chips, legend)
   ============================================================ */
.admin-main .tbl td a{font-weight:500}
.admin-main .tbl td:last-child a:not(.btn){font-weight:500}
.admin-main .inv-filters a{font-weight:500}
.admin-main .adm-view{font-weight:500}
.admin-main .adm-link{font-weight:500}
.admin-main .adm2-legend li b{font-weight:500}
.admin-main .adm-panel-h h3{font-weight:600}
.admin-main .form-card h3{font-weight:600}
.admin-main .status{font-weight:500}
.admin-main .chip-st{font-weight:500}
.admin-main .dtl-head h2{font-weight:600}
.admin-main .pager .pg{font-weight:500}
.admin-main .tkt-filters .tf{font-weight:500}
.admin-main fieldset.bundle-members legend{font-weight:500}
.admin-main .adm-tip{font-weight:500}
/* END COORD-FIX :: ROUND 5 */

/* ============================================================
   BEGIN COORD-FIX :: ROUND 6 — FONT CAP 600, AKHRI OFFENDERS
   (dtl status pill, chart-stats labels, dd-opt.sel, optgroup,
   KPI wrappers — font-cap sweep ki nishandahi par)
   ============================================================ */
.admin-main .dtl .status{font-weight:500}
.admin-main .adm-chart-stats span{font-weight:500}
.admin-main .dd-opt.sel{font-weight:500}
.admin-main optgroup{font-weight:500}
.admin-main .adm-kpi *{font-weight:500}
/* END COORD-FIX :: ROUND 6 */

/* === 2026-10-26: mobile hero first-screen fit — chhote/short phone viewports par
   carousel ka neeche wala hissa (slide + price tag) fold ke neeche ja kar cut lagta tha.
   Sirf spacing/height trims (<=700px); slide ki size/position/geometry bilkul untouched.
   Tall viewports par justify-center ki wajah se look barqarar. === */
@media (max-width:700px){
  .hero{padding-top:10px}
  .hero h1{margin-bottom:8px}
  .hero p{margin-bottom:8px}
  .hero-carousel{margin-top:4px}
}
@media (max-width:400px){
}


/* ===== 2026-10-26 email-slice: dual-email settings board (Primary/Secondary) ===== */
.email-addr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-bottom:1px dashed rgba(6,64,43,.14)}
.email-addr-l{min-width:128px;color:#52705F;font-weight:500;font-size:13px}
.email-board{margin-top:14px;border:1px solid rgba(6,64,43,.18);background:#F2F7F2;border-radius:10px;padding:14px 16px}
.email-board h4{margin:0 0 8px}
.email-board p{margin:4px 0}
.ok-t{color:#0B8A5F}.warn-t{color:#B45309}
.st-pill.warn{background:#FEF3C7;color:#92400E}

/* === 2026-10-26 SLICE drawer+topbar: (1) drawer cart centered premium pill,
   (2) Services mega-toggle chevron drawer (<=860px) mein bilkul gayab,
   (3) adm-top stacking fix — teeno sirf is block mein, desktop untouched ===
   (1) Cart: purani <=860 rules (line ~1316 plain white row + v6.9 label-hide +
   line ~2005 plain cb-ico) cart ko plain icon+$total bana deti theen. Ye block
   header pill wali zabaan deta hai: emerald tint gradient bar, icon emerald
   gradient tile mein, "Cart" label + total, badge tile corner par (>0 par
   markup mein aata hai). Bar align-self:stretch (drawer padding dono taraf
   barabar) aur content justify-center — measured center. Poora bar wahi
   /cart anchor hai (tappable). Admin drawer: v6.5 rule
   .main-nav.is-admin .cart-btn{display:none} barqarar — ye block display
   set NAHI karta, is liye admin mein cart phir bhi nazar nahi ayega. */
@media (max-width:860px){
  .main-nav>a.cart-btn{align-self:stretch;justify-content:center;gap:12px;margin:10px 0 4px;padding:12px 16px;border-radius:16px;background:linear-gradient(120deg,rgba(16,185,129,.12),rgba(13,148,136,.16));border:1px solid rgba(4,120,87,.32);box-shadow:0 12px 24px -12px rgba(3,25,17,.35),inset 0 1px 0 rgba(255,255,255,.65)}
  .main-nav>a.cart-btn .cb-ico{width:38px;height:38px;flex:none;padding:0;border-radius:12px;background:linear-gradient(135deg,#10B981,#0D9488 60%,#0F766E);border:none;box-shadow:0 8px 16px -8px rgba(4,120,87,.55);color:#fff}
  .main-nav>a.cart-btn .cb-ico svg{width:20px;height:20px}
  .main-nav>a.cart-btn .cart-badge{position:absolute;top:-7px;right:-7px;margin:0;box-shadow:0 0 0 2px #fff}
  .main-nav>a.cart-btn .cb-meta{flex-direction:row;align-items:center;gap:9px;flex:0 0 auto}
  .main-nav>a.cart-btn .cb-label{display:inline;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:#0B3D2E}
  .main-nav>a.cart-btn .cp-total{margin-left:0;font-size:16px}
  .main-nav>a.cart-btn.active{background:linear-gradient(120deg,#10B981,#0D9488 60%,#0F766E);border-color:transparent}
  .main-nav>a.cart-btn.active .cb-label,.main-nav>a.cart-btn.active .cp-total{color:#fff}
  .main-nav>a.cart-btn.active .cb-ico{background:rgba(255,255,255,.18);box-shadow:none;color:#fff}
}
/* (2) Chevron: .mega-toggle button par koi context class (lnk-pub) NAHI hai,
   is liye ctx-member/is-admin ki hide-rules (jo .lnk-pub links par hain) us
   par kabhi lagu hi nahi huin, aur <=860 media use display:inline-grid de
   deta tha — admin/member drawer mein wo akela float hota tha, public
   drawer mein Services row split hoti thi. Drawer (<=860) mein toggle +
   mega panel dono gayab; Services wahan plain /services link hai.
   Desktop (>860) par toggle pehle hi display:none hai aur mega hover
   dropdown bilkul untouched hai. */
@media (max-width:860px){
  .main-nav .mega-toggle{display:none!important}
  .main-nav .mega{display:none!important}
}
/* (3) Topbar: .adm-top{position:relative;z-index:500} (COORD-FIX Round 4,
   gear menu ko GSAP content se upar rakhne ke liye) header ke stacking
   context (z-60) se bara tha — drawer z-200 bhi header ke andar 60 par
   capped hai, is liye View Store pill / avatar / gear drawer ke UPAR
   float karke us ke pehle item ko dhak dete thay. z-40: page content se
   upar (gear menu z-600 is ke andar, menu phir bhi khulta hai) lekin
   header/drawer (60) aur nav-shade (55) ke neeche — drawer khula ho to
   drawer sab se upar, sirf drawer ka apna X us ke andar hai. adm-top
   markup pehle se in-flow flex hai (margin 0 0 20px); float sirf
   stacking ki wajah se tha, height/layout untouched. */
.adm-top{z-index:40}
/* END SLICE drawer+topbar */

/* === F15 features slice (Oct 2026) === */
.announce-bar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;background:linear-gradient(90deg,#064E3B,#0D9488);color:#ECFDF5;font-size:13.5px;font-weight:500;padding:8px 16px;text-align:center}
.announce-bar a{color:#FDE68A;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.support-float{position:fixed;right:18px;bottom:18px;z-index:900;display:inline-flex;align-items:center;gap:8px;background:#059669;color:#fff;font-weight:500;font-size:14px;padding:11px 16px;border-radius:999px;box-shadow:0 10px 28px rgba(4,80,60,.35);text-decoration:none}
.support-float:hover{background:#047857;color:#fff}
.sale-badge{display:inline-block;background:#DC2626;color:#fff;font-size:11px;font-weight:500;letter-spacing:.4px;padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:6px}
@media (max-width:640px){.support-float{right:12px;bottom:12px;padding:10px 13px;font-size:13px}}
/* === /F15 === */


/* ============================================================
   MOB-TBL-FIX — admin + member tables ka mobile pattern
   (user ki hidayat, 26 Oct): har table card ke ANDAR horizontal
   scroll (table natural width par), cells NOWRAP (email/naam/
   amount/header kabhi na tote), rows SLIM, page-level overflow
   kabhi nahi. Wajah: .admin-main .tbl{overflow:hidden} aur
   display:table;width:100% mobile par columns kuchal dete thay,
   adm2 grid/row ke table-layout:fixed + overflow-wrap:anywhere
   ne harf-harf wrap kar diya tha. Desktop (861px+) waisa hi.
   ============================================================ */
@media (max-width:860px){
  .admin-main .tbl{display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;max-width:100%;scrollbar-width:thin;scrollbar-color:rgba(13,144,148,.45) transparent}
  .admin-main .tbl::-webkit-scrollbar{height:8px}
  .admin-main .tbl::-webkit-scrollbar-thumb{background:rgba(13,144,148,.4);border-radius:99px}
  .admin-main .adm2-grid .tbl,.admin-main .adm2-row .tbl{table-layout:auto}
  .tbl th,.tbl td{white-space:nowrap}
  .admin-main .tbl th{padding:9px 12px}
  .admin-main .tbl td{padding:9px 12px}
}

/* === 2026-10-26 SLICE drawer+topbar patch-2: Services link ka ::after "›" bhi
   wahi has-mega leak hai — baqi nav-links ka ::after direct-child rule se
   display:none hai, lekin Services link span.has-mega ke ANDAR hai is liye
   wo rule us tak nahi pohanchti aur akela › drawer mein reh jata tha.
   Drawer (<=860) mein Services ab bilkul plain link hai: koi › nahi, aur
   row baqi links ki tarah full-width (link flex:1). Desktop untouched. === */
@media (max-width:860px){
  .main-nav .has-mega .nav-link::after{display:none!important;content:""!important}
  .main-nav .nav-item.has-mega .nav-link{flex:1 1 auto}
}
/* END SLICE drawer+topbar patch-2 */

/* ===== SETTINGS-TABS-SLICE (26 Oct 2026): settings category tabs + admin switch reinforcement ===== */
.sett-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:6px;background:#fff;border:1.5px solid rgba(6,64,43,.14);border-radius:11px;box-shadow:0 6px 18px -12px rgba(6,64,43,.25)}
.sett-tab{padding:9px 16px;border-radius:11px;font-weight:500;font-size:14px;color:#33503F;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.sett-tab:hover{background:#EDF5EE;color:#0B3D2E}
.sett-tab.on{background:linear-gradient(135deg,#10B981,#0D9488 55%,#0F766E);color:#fff;box-shadow:0 6px 16px -6px rgba(13,148,136,.55)}
@media (max-width:640px){.sett-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.sett-tabs::-webkit-scrollbar{display:none}.sett-tab{flex:none}}
.admin-shell .switch input{width:0!important;height:0!important}
/* ===== /SETTINGS-TABS-SLICE ===== */

/* === Slice: Settings categories + admin toggle switches (v287) === */
.set-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 10px;margin-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.set-tab{flex:0 0 auto;padding:9px 16px;border-radius:999px;border:1px solid rgba(6,64,43,.18);background:#fff;color:#33513F;font-weight:500;font-size:13.5px;text-decoration:none;white-space:nowrap}
.set-tab:hover{background:#F2F7F2}
.set-tab.on{background:linear-gradient(135deg,#10B981,#0D9488);color:#fff;border-color:transparent;box-shadow:0 8px 18px -8px rgba(13,148,136,.55)}
.admin-main .switch{width:66px;height:36px;flex:none}
.admin-main .switch .sl{background:#E4EBE8;border-radius:999px;box-shadow:inset 0 2px 5px rgba(10,24,48,.14);transition:background .3s,box-shadow .3s}
.admin-main .switch .sl::before{width:30px;height:30px;left:3px;top:3px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.3 6.5a8 8 0 1 0 11.4 0'/%3E%3C/svg%3E");background-size:15px;background-position:center;background-repeat:no-repeat;transition:transform .3s cubic-bezier(.4,1.4,.4,1)}
.admin-main .switch .sl::after{content:"OFF";position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:9.5px;font-weight:500;letter-spacing:.06em;color:#8CA3A2}
.admin-main .switch input:checked + .sl{background:linear-gradient(135deg,#D4A017,#14B4B8 55%,#0D9094);box-shadow:0 0 0 3px rgba(16,185,178,.16),0 8px 20px -4px rgba(13,144,148,.6)}
.admin-main .switch input:checked + .sl::before{transform:translateX(30px)}
.admin-main .switch input:checked + .sl::after{content:"ON";left:12px;right:auto;color:#fff}
.admin-main .switch input:focus-visible + .sl{box-shadow:0 0 0 4px rgba(16,185,178,.35)}
.admin-main .form-card .check .switch input{position:absolute;opacity:0;width:0;height:0}
.admin-main .form-card label.check{display:flex;flex-direction:row;align-items:center;gap:12px;padding:7px 0;cursor:pointer;min-height:44px}

/* === 2026-10-26 (round 2): hero carousel mobile cut — asal wajah measured:
   hero stack (h1+p+cta+stage+cue) takreeban 665px lamba hai aur hero
   min-height:calc(100svh - 92px) + justify-content:center use svh-box mein
   center karta hai. Jab asal visible height svh se chhoti ho (in-app
   webview, browser chrome) ya phone short ho, to active slide ka neeche
   wala hissa + price tag fold ke neeche kat jata hai (measured 390px:
   slide bottom 715.9 vs visible 700, tag bottom 704.9). Pichli spacing
   trim (round 1) kafi nahi thi. Ye round sirf height/spacing trims hai
   (<=700px): hero min-height chhota, upar ki spacing kam, stage 8px
   chhota, slide 84vw->81vw (height ~8px kam). Slide ki transform
   geometry, fan-cards aur desktop (>=701px) bilkul untouched. === */
@media (max-width:700px){
  .hero{min-height:calc(100svh - 150px);padding-top:6px}
  .hero h1{margin-bottom:6px}
  .hero p{margin-bottom:6px}
  .hero-carousel{margin-top:0;height:250px}
  .hc-slide{width:81vw}
  .scroll-cue{margin-top:18px}
}
@media (max-width:400px){
}

/* === 2026-10-26 hero-fit-2: 375px-class phones par in-app browser ki chrome
   visible height ko layout viewport se ~170px kam kar deti hai — carousel
   slide ka bottom (page-coords ~667px, live par) visible kinare (~643px)
   se neeche ja kar price tag samet cut lagta tha. Mobile hero ka content ab
   upar se anchor hoga (flex-start) aur darmiyan ke spacing trims ke sath
   slide ~50px upar ajata hai. Sirf spacing/height (<=700px); slide ki
   size/geometry/design aur desktop bilkul untouched. === */
@media (max-width:700px){
  .hero{justify-content:flex-start;padding-top:4px}
  .hero h1{margin-bottom:2px}
  .hero p{margin-bottom:2px}
  .hero-carousel{margin-top:0;height:244px}
}
@media (max-width:400px){
  .hero-carousel{height:216px}
}

/* === 2026-10-26 hero-gap-3: user ki shikayat (mobile screenshot) — title
   header ke sath chipka hua tha (padding-top sirf 4px) aur carousel ki
   image CTA buttons ke sath lagi hui thi (carousel margin-top 0). Sirf
   spacing (<=700px): hero padding-top 4->16 (title ko upar saans) aur
   carousel margin-top 0->16 (buttons aur image ke darmiyan wazeh fasla).
   Slide kul +28px neeche jata hai — measured clearance phir bhi mehfooz:
   375x812 slide bottom 578.5->606.5 (in-app visible edge ~643 se ~36px
   upar), 390x844 par 582.5->610.5. Slide design/geometry, fan-cards aur
   desktop bilkul untouched. === */
@media (max-width:700px){
  .hero{padding-top:16px}
  .hero-carousel{margin-top:16px}
}

/* === 2026-10-26 hero-gap-4: user ki taza hidayat — "thora thora gap sb
   chezon me dal kr aur neche kr do, bs itna k neche jo image h wo nech
   end tk aa jaye, touch na ho." Mobile hero (<=700px) ke tamam gaps mein
   tawazun wala izafa: padding-top 16->23, h1/p margin-bottom 2->8,
   carousel margin-top 16->22 (kul +25 shift). Lambay phones
   (min-height:831px) par mazeed tawazun wala izafa (padding-top 31,
   margins 12, carousel margin-top 26) aur <=400px par stage 216->236,
   taake slide ka bottom in-app visible edge ke ~10-14px upar rahe —
   end ke qareeb, touch nahi. Measured target: 375x812 slide bottom
   606.5->~631 (edge ~643), 390x844 slide bottom 610.5->~665 (edge ~677).
   Slide design/geometry, fan-cards aur desktop bilkul untouched. === */
@media (max-width:700px){
  .hero{padding-top:23px}
  .hero h1{margin-bottom:8px}
  .hero p{margin-bottom:8px}
  .hero-carousel{margin-top:22px}
}
@media (max-width:700px) and (min-height:831px){
  .hero{padding-top:31px}
  .hero h1{margin-bottom:12px}
  .hero p{margin-bottom:12px}
  .hero-carousel{margin-top:26px}
}
@media (max-width:400px) and (min-height:831px){
  .hero-carousel{height:236px}
}

/* === 2026-10-26 hc-preinit: user ki shikayat — home reload par carousel
   ki images pehle bina sajawat ke "deck" ki tarah dikhti theen (tamam
   slides aik hi jagah stack, upar sab se aakhri slide H-TPL45), phir
   app.js ka render() chal kar fan ban jata tha. Wajah: fan positions
   sirf JS lagata hai (deferred), us se pehle slides CSS base halat
   (sirf translate(-50%,-50%)) mein stack rehte thay. Fix: PHP har
   slide par us ke initial offset ki class bhejta hai aur ye rules
   wohi halat CSS se pehle se bana dete hain jo render() pos=0 par
   lagata hai — pehli paint se hi durust fan. JS load hote hi inline
   styles in ko override kar dete hain: final state, behavior aur
   geometry bilkul waisi hi; JS ko hath nahi lagaya gaya. === */
.hc-slide.hc-p0{transform:translate(-50%,-50%) translateX(0%) rotateY(0deg) translateZ(0px) scale(1);z-index:100;opacity:1}
.hc-slide.hc-p1{transform:translate(-50%,-50%) translateX(58%) rotateY(-34deg) translateZ(-150px) scale(.94);z-index:90;opacity:1}
.hc-slide.hc-m1{transform:translate(-50%,-50%) translateX(-58%) rotateY(34deg) translateZ(-150px) scale(.94);z-index:90;opacity:1}
.hc-slide.hc-p2{transform:translate(-50%,-50%) translateX(116%) rotateY(-68deg) translateZ(-300px) scale(.88);z-index:80;opacity:1}
.hc-slide.hc-m2{transform:translate(-50%,-50%) translateX(-116%) rotateY(68deg) translateZ(-300px) scale(.88);z-index:80;opacity:1}
.hc-slide.hc-p3{transform:translate(-50%,-50%) translateX(174%) rotateY(-102deg) translateZ(-450px) scale(.82);z-index:70;opacity:.36;pointer-events:none}
.hc-slide.hc-m3{transform:translate(-50%,-50%) translateX(-174%) rotateY(102deg) translateZ(-450px) scale(.82);z-index:70;opacity:.36;pointer-events:none}
.hc-slide.hc-far{opacity:0;pointer-events:none}
@media (max-width:700px){
  .hc-slide.hc-p1{transform:translate(-50%,-50%) translateX(58%) rotateY(-34deg) translateZ(-150px) scale(.91);opacity:.85}
  .hc-slide.hc-m1{transform:translate(-50%,-50%) translateX(-58%) rotateY(34deg) translateZ(-150px) scale(.91);opacity:.85}
  .hc-slide.hc-p2{transform:translate(-50%,-50%) translateX(116%) rotateY(-68deg) translateZ(-300px) scale(.82);opacity:.85}
  .hc-slide.hc-m2{transform:translate(-50%,-50%) translateX(-116%) rotateY(68deg) translateZ(-300px) scale(.82);opacity:.85}
  .hc-slide.hc-p3{transform:translate(-50%,-50%) translateX(174%) rotateY(-102deg) translateZ(-450px) scale(.8);opacity:.306}
  .hc-slide.hc-m3{transform:translate(-50%,-50%) translateX(-174%) rotateY(102deg) translateZ(-450px) scale(.8);opacity:.306}
}

/* === v7.0: account left sidebar + header menu dedupe (member/admin) === */
.acc-shell{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start}
.acc-side{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,253,247,.95));border:1px solid rgba(4,120,87,.16);border-radius:13px;box-shadow:0 24px 44px -20px rgba(23,54,43,.28),0 4px 14px rgba(23,54,43,.06);padding:18px 13px 15px;position:sticky;top:92px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.acc-side::before{content:"";position:absolute;top:0;left:18px;right:18px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#059669,#10B981 45%,#C9A227)}
.acc-group{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#0D9488;padding:4px 10px 9px}
.acc-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;color:var(--ink2);font-weight:500;font-size:14px;position:relative;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.acc-link svg{width:27px;height:27px;flex:0 0 auto;padding:5px;border-radius:9px;background-color:#DFF3E7;border:1px solid #B7E3CC;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);color:#065F46;transition:transform .2s,box-shadow .2s}
.acc-link:hover{background:linear-gradient(120deg,rgba(5,150,105,.10),rgba(13,148,136,.07));color:#065F46;transform:translateX(3px);text-decoration:none}
.acc-link:hover svg{transform:scale(1.1) rotate(-4deg);box-shadow:0 6px 14px -6px rgba(4,120,87,.5)}
.acc-arrow{margin-left:auto;font-style:normal;font-weight:500;font-size:17px;line-height:1;color:#0E9F6E;opacity:0;transition:opacity .2s}
.acc-link:hover .acc-arrow{opacity:.65}
.acc-link.on{background:linear-gradient(120deg,#059669,#10B981 55%,#0D9488);color:#fff;font-weight:500;box-shadow:0 12px 22px -10px rgba(5,150,105,.55)}
.acc-link.on svg{background-color:rgba(255,255,255,.20);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:none}
.acc-link.on .acc-arrow{opacity:1;color:#fff}
.acc-sep{height:1px;background:rgba(4,120,87,.14);margin:9px 6px 7px}
.acc-logout svg{background-color:#F7ECD0;border-color:#E3C566;color:#8A6D1F}
.acc-main{min-width:0}
@media(max-width:900px){
  .acc-shell{grid-template-columns:1fr}
  .acc-side{position:static;flex-direction:row;flex-wrap:wrap;align-items:center}
  .acc-side .acc-group{width:100%;padding-bottom:2px}
  .acc-side .acc-sep{display:none}
  .acc-link .acc-arrow{display:none}
}
@media(max-width:860px){
  .acc-side{display:none}
}
@media(min-width:861px){
  body.pg-account .main-nav .lnk-pub{display:inline-flex}
  body.pg-account .main-nav .lnk-mem{display:none}
  body.pg-account .main-nav:not(.is-admin) .lnk-out-d{display:none}
}
/* Panel header: logo full start — header cap hatakar panel content ke edge (26px) ke sath align; public header is se bilkul mehfooz (sirf body.app-full) */
body.app-full .site-head .wrap{max-width:none}

/* === v7.1: panel shell — sidebar full-height rail (top se footer tak), logo sidebar ke andar sab se top par, header sirf content column mein. Sirf admin + account shells; public website bilkul mehfooz === */
.side-brand{display:none;align-items:center;gap:11px;padding:4px 10px 15px;margin-bottom:12px;border-bottom:1px solid rgba(6,64,43,.12);flex:none}
.side-brand:hover{text-decoration:none}
@media(min-width:1025px){
  body:has(.acc-shell) .acc-side{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:276px;border-radius:0;border-left:none;border-top:none;border-bottom:none;box-shadow:12px 0 28px -22px rgba(3,40,26,.22);z-index:70;overflow-y:auto}
  body:has(.acc-shell) .acc-main{grid-column:2}
  body:has(.acc-shell) .site-head{margin-left:276px}
  body:has(.acc-shell) .site-head .brand{display:none}
  body:has(.acc-shell) .site-foot{margin-left:276px}
  body:has(.acc-shell) .acc-foot{margin-left:276px}
  body:has(.admin-shell) .admin-side{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:278px;z-index:70;margin:0}
  body:has(.admin-shell) .admin-main{grid-column:2}
  body:has(.admin-shell) .site-head{margin-left:278px}
  body:has(.admin-shell) .site-head .brand{display:none}
  body:has(.admin-shell) .adm-foot{margin-left:278px}
  .acc-side .side-brand,.admin-side .side-brand{display:inline-flex}
  .acc-side .acc-logout{margin-top:auto}
  .admin-side a.anav[href="/"]{margin-top:auto}
}

/* === 2026-10-26 hc-intro-gate: hero entrance (gsap.from) pehle paint ke
   baad replay hota tha — hero pehle final halat mein dikhta, phir
   opacity 0 hokar dobara animate hota tha (har reload par blink, naap
   kar sabit: opacity 1 -> 0 -> 1). Ab home ka inline script <html> par
   hi-pending lagata hai aur ye rules entrance ki ibtedai halat
   (opacity 0 + translateY 36px) CSS se pehli paint se pehle bana dete
   hain; app.js ka heroIntro class hata kar usi task mein gsap.from
   chalata hai — animation bilkul waisi hi, lekin ab sirf aik dafa,
   shuru se. JS band/fail ho to 4s ka fallback timeout class khud
   hata deta hai; JS off ho to class lagti hi nahi. === */
html.hi-pending .hero h1,html.hi-pending .hero>p,html.hi-pending .hero-cta,html.hi-pending .hero-carousel{opacity:0;transform:translateY(36px)}
@media (prefers-reduced-motion: reduce){html.hi-pending .hero h1,html.hi-pending .hero>p,html.hi-pending .hero-cta,html.hi-pending .hero-carousel{opacity:1;transform:none}}
body.pg-account{--ink:#0C1F18;--ink2:#33463E;--muted:#6B7A73;--violet:#115E49;--fuchsia:#0D946D;--grad:linear-gradient(120deg,#115E49 0%,#14B888 48%,#2DD4A2 115%);--grad-soft:linear-gradient(120deg,rgba(5,150,99,.13),rgba(16,185,124,.11),rgba(22,204,127,.09));--line:rgba(4,120,80,.16);--line2:rgba(12,31,24,.09);--sh-sm:0 4px 14px rgba(23,54,43,.08);--sh:0 14px 34px -12px rgba(23,54,43,.20),0 4px 12px rgba(23,54,43,.06);--sh-lg:0 30px 60px -18px rgba(23,54,43,.30),0 8px 22px rgba(23,54,43,.10);--ring:0 0 0 4px rgba(5,150,99,.20)}
body.pg-account{--bg:#F2F8F3}
body.pg-account{background:#F2F8F3}
body.pg-account ::selection{background:rgba(16,185,124,.30)}
body.pg-account .site-head{border-bottom:1px solid rgba(4,120,80,.10)}
body.pg-account .site-head::after{background:linear-gradient(90deg,transparent,#115E49 16%,#0D946D 44%,#D97706 76%,#F59E0B 92%,transparent)}
body.pg-account .site-head.scrolled{box-shadow:0 16px 36px -16px rgba(3,25,17,.30)}
body.pg-account .brand-mark{filter:drop-shadow(0 6px 14px rgba(4,120,80,.35))}
body.pg-account .btn{color:#0C2319}
body.pg-account .btn{background:linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);}
body.pg-account .btn{background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(0,40,25,.16),rgba(0,40,25,0) 42%),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49)}
body.pg-account .btn{box-shadow:0 6px 22px -6px rgba(6,60,42,.30)}
body.pg-account .btn::after{background:linear-gradient(135deg,#14B888,#0D946D 55%,#115E49)}
body.pg-account .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 #134E3D,0 20px 32px -12px rgba(16,185,124,.6)}
body.pg-account .btn:active{box-shadow:0 3px 10px -4px rgba(6,60,42,.30)}
body.pg-account .btn-amber{background:linear-gradient(120deg,#115E49 0%,#115E49 55%,#134E3D 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 #022C1E,0 16px 28px -12px rgba(4,120,80,.6)}
body.pg-account .btn-amber:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 #022C1E,0 20px 32px -12px rgba(4,120,80,.65)}
body.pg-account .btn-ghost{color:#0B3B2A;border-color:rgba(4,120,80,.5);box-shadow:0 6px 16px -10px rgba(6,60,40,.35)}
body.pg-account .btn-ghost:hover{background:rgba(16,185,124,.08);color:#134E3D;border-color:#115E49}
body.pg-account .switch input:checked + .sl{background:linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);box-shadow:0 0 0 3px rgba(16,185,124,.16),0 8px 20px -4px rgba(13,148,109,.6)}
body.pg-account .hero{border:1px solid rgba(52,211,153,.30);box-shadow:0 34px 70px -22px rgba(3,25,17,.55)}
body.pg-account .hero{background:radial-gradient(900px 480px at 85% -10%,rgba(231,198,91,.05),transparent 60%),radial-gradient(760px 420px at 8% 0%,rgba(16,185,124,.04),transparent 55%),linear-gradient(180deg,#F8FCF8 0%,#FAFAF5 45%,#F2F8F3 100%)}
body.pg-account .hero::before{background:radial-gradient(560px 260px at 12% -10%,rgba(16,185,124,.14),transparent 60%),radial-gradient(520px 260px at 88% -12%,rgba(231,198,91,.14),transparent 60%),radial-gradient(420px 300px at 50% 115%,rgba(13,148,109,.10),transparent 60%)}
body.pg-account .hero::after{background:linear-gradient(120deg,#115E49,#2DD4A2 45%,#C9A227)}
body.pg-account .hero h1 em{background:linear-gradient(100deg,#115E49,#0DA364 72%,#B45309)}
body.pg-account .hero p{color:#5B6B64}
body.pg-account .sec-title::after{background:linear-gradient(90deg,#14B888,#00B4D8)}
body.pg-account .card{border-color:rgba(4,120,80,.13)}
body.pg-account .card::before{background:linear-gradient(140deg,rgba(5,150,99,.45),rgba(13,148,109,.18) 40%,rgba(201,162,39,.30))}
body.pg-account .card:hover{box-shadow:0 24px 44px -14px rgba(3,25,17,.22)}
body.pg-account .card-media{background:radial-gradient(130% 145% at 50% -10%,#FFFFFF 0%,#EFF7F1 55%,#E1EFE9 100%)}
body.pg-account .card-foot{border-top:1px solid rgba(4,120,80,.10)}
body.pg-account .price{color:#115E49}
body.pg-account .stat:hover{box-shadow:0 18px 34px -12px rgba(3,25,17,.18)}
body.pg-account .stats-band .stat{background:linear-gradient(140deg,#12294D,#062A20 60%)}
body.pg-account .news-band{color:#062A20}
body.pg-account .news-band{background:linear-gradient(150deg,#FFFFFF,#F1F8F3 55%,#E8F5EF);border:1px solid rgba(4,120,80,.16);box-shadow:0 24px 48px -22px rgba(3,25,17,.22)}
body.pg-account .news-band::before{background:radial-gradient(460px 220px at 10% 0%,rgba(16,185,124,.15),transparent 60%),radial-gradient(420px 220px at 90% 100%,rgba(217,164,32,.13),transparent 60%)}
body.pg-account .news-band h2{color:#062A20}
body.pg-account .news-band form{border:1px solid rgba(4,120,80,.25);box-shadow:0 16px 32px -14px rgba(3,25,17,.25)}
body.pg-account .news-band input{color:#062A20!important}
body.pg-account .news-band input:focus{outline:2px solid rgba(167,243,213,.7)}
body.pg-account .gal-main{border:1px solid rgba(4,120,80,.15);box-shadow:0 22px 44px -18px rgba(3,25,17,.30)}
body.pg-account .form-card label{color:#22382F}
body.pg-account .tbl th{background:linear-gradient(120deg,rgba(5,150,99,.10),rgba(13,148,109,.08))}
body.pg-account .tbl tbody tr:hover,body.pg-account .tbl tr:hover{background:rgba(5,150,99,.05)}
body.pg-account .st-delivered,body.pg-account .st-paid,body.pg-account .st-completed{background:rgba(16,185,124,.15);color:#134E3D;border-color:rgba(16,185,124,.4)}
body.pg-account .site-foot{background:linear-gradient(180deg,#0C1D3A,#062A20 30%)}
body.pg-account .site-foot::after{background:radial-gradient(500px 220px at 8% 0%,rgba(5,150,99,.26),transparent 60%),radial-gradient(460px 220px at 92% 100%,rgba(201,162,39,.14),transparent 60%)}
body.pg-account .admin-shell{--adm-line:rgba(6,64,43,.14);--adm-line2:rgba(6,64,43,.08);--adm-ink:#064E3B;--adm-mut:#5B7269;--adm-grad:linear-gradient(120deg,#14B888,#0D946D 55%,#115E49);--adm-sh:0 20px 38px -24px rgba(3,40,26,.28)}
body.pg-account .admin-side{background:linear-gradient(170deg,#12294D,#062A20 70%)}
body.pg-account .admin-side{border:1px solid rgba(4,120,80,.16);box-shadow:0 24px 44px -20px rgba(23,54,43,.28),0 4px 14px rgba(23,54,43,.06)}
body.pg-account .admin-side::before{background:linear-gradient(90deg,#115E49,#14B888 45%,#C9A227)}
body.pg-account .admin-main{border:1px solid rgba(4,120,80,.15);box-shadow:0 24px 48px -22px rgba(23,54,43,.25),0 4px 14px rgba(23,54,43,.05)}
body.pg-account .show-card.sc-c{box-shadow:0 30px 64px rgba(3,25,17,.22)}
body.pg-account .show-card:hover{box-shadow:0 26px 54px rgba(3,25,17,.28)}
body.pg-account .scroll-cue{border-color:rgba(12,31,24,.35)}
body.pg-account .scroll-cue{border:2px solid rgba(6,78,54,.6);box-shadow:0 12px 24px -10px rgba(3,25,17,.35),inset 0 1px 0 #fff}
body.pg-account .scroll-cue span{background:linear-gradient(180deg,#14B888,#115E49)}
body.pg-account .admin-main .form-card{border:1px solid rgba(4,120,80,.15);box-shadow:0 18px 36px -20px rgba(23,54,43,.3)}
body.pg-account .admin-main .stat{border:1px solid rgba(4,120,80,.16);box-shadow:0 14px 28px -16px rgba(23,54,43,.25)}
body.pg-account .admin-main .tbl th{background:linear-gradient(120deg,rgba(5,150,99,.12),rgba(13,148,109,.08));border-bottom:1.5px solid rgba(4,120,80,.16)}
body.pg-account .admin-main .tbl th{color:#335044}
body.pg-account .show-badge{background:linear-gradient(120deg,#14B888,#115E49);box-shadow:0 8px 20px rgba(16,185,124,.45)}
body.pg-account .hero-show::before{background:radial-gradient(closest-side,rgba(52,211,153,.30),rgba(201,162,39,.12),transparent)}
body.pg-account .foot-status{background:rgba(16,185,124,.12);border:1px solid rgba(16,185,124,.38);color:#5EEAC0}
body.pg-account .foot-status i{background:#14B888;box-shadow:0 0 0 0 rgba(16,185,124,.5)}
body.pg-account .btn-amber:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #022C1E,0 8px 16px -8px rgba(4,120,80,.55)}
body.pg-account .invoice{box-shadow:0 30px 60px -30px rgba(23,54,43,.35)}
body.pg-account .inv-head{border-bottom:2px solid #062A20}
body.pg-account .inv-grand{border-top:2px solid #062A20}
body.pg-account .nav-toggle span{background:#062A20}
body.pg-account .nav-link:hover{background:rgba(16,185,124,.09);color:#134E3D}
body.pg-account .cart-badge{background:linear-gradient(120deg,#14B888,#115E49)}
body.pg-account .user-chip{border-color:rgba(4,120,80,.22)}
body.pg-account .uc-ava{background:linear-gradient(135deg,#14B888,#115E49)}
body.pg-account .uc-ava{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(5,150,99,.40)}
body.pg-account .btn::before{background:#052E20}
body.pg-account .btn-amber::before{background:#022C1E}
body.pg-account .btn-ghost,body.pg-account .btn-google{color:#134E3D}
body.pg-account .btn-ghost::before,body.pg-account .btn-google::before{background:linear-gradient(120deg,#2DD4A2,#115E49)}
body.pg-account .btn-amber::after{background:linear-gradient(120deg,#14B888,#115E49 55%,#134E3D)}
body.pg-account .ni{color:#0E9F6B}
body.pg-account .main-nav .nav-link.active{color:#134E3D;background:rgba(16,185,124,.13)}
body.pg-account .main-nav .nav-link.active .ni{color:#115E49}
body.pg-account .nav-ind-th{background:linear-gradient(180deg,#0EA5C9,#14B888)}
body.pg-account .brand-name .bn-a{color:#115E49;-webkit-text-fill-color:#115E49}
body.pg-account .brand-name.light .bn-a{color:#2DD4A2;-webkit-text-fill-color:#2DD4A2}
body.pg-account .why-item{border:1px solid rgba(4,120,80,.14);box-shadow:0 6px 18px rgba(3,25,17,.05)}
body.pg-account .why-ic{background:linear-gradient(135deg,#14B888,#0D946D);box-shadow:0 10px 20px rgba(13,148,109,.28)}
body.pg-account .why-item:nth-child(2) .why-ic{background:#DFF3EB;border-color:#B7E3D1;color:#115E49;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,80,.14)}
body.pg-account .why-item h3{color:#062A20}
body.pg-account .sec-best{background:linear-gradient(140deg,#E9FBF3 0%,#EAF3FF 58%,#FBF0FF 100%);border:1px solid #D8EBE3;box-shadow:0 24px 48px rgba(10,60,44,.10)}
body.pg-account .sec-best::before{background:radial-gradient(560px 240px at 85% -40px,rgba(16,185,124,.16),transparent 65%),radial-gradient(480px 220px at 8% 115%,rgba(37,99,235,.14),transparent 65%)}
body.pg-account .sec-best .sec-title{color:#062A20}
body.pg-account .cat-chip::before{background:linear-gradient(135deg,#14B888,#0D946D);box-shadow:0 0 0 3px rgba(16,185,124,.16)}
body.pg-account .testi-av{background:linear-gradient(135deg,#115E49,#0D946D);box-shadow:0 0 0 3px rgba(5,150,99,.18)}
body.pg-account .testi:nth-child(2) .testi-av{background:linear-gradient(135deg,#14B888,#0D946D);box-shadow:0 8px 16px rgba(13,148,109,.3)}
body.pg-account .stat-grid .stat:nth-child(2) .stat-ic{background:#DFF7ED;border-color:#A9E9D0;color:#115E49;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,80,.14)}
body.pg-account .stat-tx b{color:#062A20}
body.pg-account .dash-av{background:linear-gradient(135deg,#14B888,#0D946D 55%,#2563EB)}
body.pg-account .dash-eyebrow{color:#7EF0C7}
body.pg-account .dstat-link{color:#0D946D}
body.pg-account .drow{color:#062A20}
body.pg-account .drow-total{color:#115E49}
body.pg-account .st-pill.ok{background:#DCFCEE;color:#158050}
body.pg-account .qtile{color:#062A20}
body.pg-account .qtile:nth-child(2) .stat-ic{background:#DFF7ED;border-color:#A9E9D0;color:#115E49}
body.pg-account .stats-band .stat strong{background:linear-gradient(120deg,#134E3D 10%,#0D946D 55%,#0DA364)}
body.pg-account .more-text b{color:#062A20}
body.pg-account .more-wrap.done .more-text{color:#115E49}
body.pg-account .stat-ic,body.pg-account .why-ic{background:#DFF3EB;border-color:#B7E3D1;color:#115E49;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,80,.14)}
body.pg-account .stat-grid .stat:nth-child(1) .stat-ic{background:#DFF3EB;border-color:#B7E3D1;color:#115E49;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,80,.14)}
body.pg-account .qtile:nth-child(1) .stat-ic{background:#DFF3EB;border-color:#B7E3D1;color:#115E49}
body.pg-account .why-item:nth-child(1) .why-ic{background:#DFF7ED;border-color:#A9E9D0;color:#115E49;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(4,120,80,.14)}
body.pg-account .ribbon-new{background:linear-gradient(90deg,#115E49,#14B888)}
body.pg-account .tpl-code{color:#115E49}
body.pg-account .hc-slide{box-shadow:0 30px 60px -18px rgba(3,25,17,.45),0 10px 24px rgba(3,25,17,.18)}
body.pg-account .hc-nav{color:#134E3D;box-shadow:0 10px 24px rgba(3,25,17,.18)}
body.pg-account .tpl-admin .tpl-row:hover .drag-h{color:#115E49}
body.pg-account .scroll-cue::after{color:rgba(6,78,54,.75)}
body.pg-account .why-item:hover{border-color:rgba(4,120,80,.35);box-shadow:0 6px 18px rgba(3,25,17,.05),0 0 0 4px rgba(16,185,124,.10)}
body.pg-account .card:not(:has(.card-media))::before{background:linear-gradient(90deg,#115E49,#2DD4A2,#D9A420)}
body.pg-account .testi .card-body::before{color:rgba(4,120,80,.13)}
body.pg-account .qtile:hover,body.pg-account .order-card:hover,body.pg-account .review:hover{box-shadow:0 16px 30px -12px rgba(3,25,17,.16);border-color:rgba(4,120,80,.28)}
body.pg-account .faq-ic{background:#E7F6EF;border:1px solid #BFE6D6;color:#134E3D}
body.pg-account .faq-item.open .faq-ic{background:#115E49}
body.pg-account .faq-item.open{border-color:rgba(4,120,80,.35)}
body.pg-account .nl-ic{background:#E7F6EF;border-color:#BFE6D6;color:#115E49;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(4,120,80,.14)}
body.pg-account .nl-ok{border:1px solid rgba(167,243,213,.45)}
body.pg-account .nl-ok{border-color:rgba(4,120,80,.32)}
body.pg-account .nl-ok strong{color:#ECFDF5}
body.pg-account .nl-ok p{color:rgba(236,253,247,.85)}
body.pg-account .nl-check{background:linear-gradient(135deg,#2DD4A2,#115E49);box-shadow:0 10px 22px rgba(5,150,99,.45)}
body.pg-account .btn-ghost::before{background:rgba(6,40,27,.14)}
body.pg-account .main-nav>a.nav-link:hover{background:rgba(5,150,99,.09)}
body.pg-account .user-chip:hover{box-shadow:0 10px 20px -10px rgba(3,25,17,.35)}
body.pg-account .news-band form:focus-within{border-color:rgba(4,120,80,.55);box-shadow:0 16px 32px -12px rgba(3,25,17,.28),0 0 0 4px rgba(5,150,99,.14)}
body.pg-account .card-body h3::before{background:linear-gradient(135deg,#115E49,#2DD4A2)}
body.pg-account .svc-ic{background:#E7F6EF;border:1px solid #BFE6D6;color:#115E49;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(4,120,80,.14)}
body.pg-account .svc-foot{border-top:1px dashed rgba(4,120,80,.20)}
body.pg-account .stat-ic2{background:#E7F6EF;border:1px solid #BFE6D6;color:#115E49}
body.pg-account .card-foot .price{color:#115E49}
body.pg-account .gal-th{border:2px solid rgba(4,120,80,.14)}
body.pg-account .gal-th.active{border-color:#115E49;box-shadow:0 8px 18px -8px rgba(5,150,99,.55)}
body.pg-account .main-nav>a.cart-pill{border:1px solid rgba(4,120,80,.28);box-shadow:0 8px 18px -10px rgba(3,25,17,.35)}
body.pg-account .main-nav>a.cart-pill:hover{border-color:rgba(4,120,80,.55);box-shadow:0 12px 24px -10px rgba(3,25,17,.4)}
body.pg-account .cart-pill .ni{color:#115E49}
body.pg-account .main-nav>a.cart-pill.active{background:linear-gradient(120deg,#14B888,#0D946D 60%,#115E49)}
body.pg-account .anav-group{color:#8A9A93}
body.pg-account .admin-side a.anav::before{background-color:#DFF3EB;border:1px solid #B7E3D1}
body.pg-account .admin-side a.anav:hover{background:linear-gradient(120deg,rgba(5,150,99,.10),rgba(13,148,109,.07));color:#134E3D}
body.pg-account .admin-side a.anav:hover::before{box-shadow:0 6px 14px -6px rgba(4,120,80,.5)}
body.pg-account .admin-side a.anav[href="/admin"]{background:linear-gradient(120deg,#115E49,#14B888 55%,#0D946D);box-shadow:0 12px 22px -10px rgba(5,150,99,.55)}
body.pg-account .ac-ava{background:linear-gradient(135deg,#14B888,#0D946D);box-shadow:0 8px 16px -6px rgba(4,120,80,.55),inset 0 1px 0 rgba(255,255,255,.35)}
body.pg-account .ac-dot{background:#14B888}
body.pg-account .admin-main::before{background:radial-gradient(560px 240px at 92% -4%,rgba(16,185,124,.10),transparent 60%),radial-gradient(480px 220px at -6% 108%,rgba(201,162,39,.08),transparent 60%)}
body.pg-account .admin-main h1::after{background:linear-gradient(90deg,#115E49,#14B888 55%,#C9A227)}
body.pg-account .admin-main h3 small a{background:#DFF3EB;border:1px solid #B7E3D1;color:#134E3D}
body.pg-account .admin-main .stat::before{background:linear-gradient(90deg,#115E49,#14B888 55%,#0D946D)}
body.pg-account .admin-main .stat::after{background:radial-gradient(closest-side,rgba(16,185,124,.16),transparent)}
body.pg-account .admin-main .stat:hover{box-shadow:0 22px 38px -18px rgba(23,54,43,.32)}
body.pg-account .admin-main .stat b{background:linear-gradient(120deg,#115E49,#0D946D)}
body.pg-account .admin-main .tbl{border:1px solid rgba(4,120,80,.14);box-shadow:0 16px 32px -20px rgba(23,54,43,.28)}
body.pg-account .admin-main .tbl td{border-bottom:1px solid rgba(12,31,24,.06)}
body.pg-account .admin-main .tbl tr:hover td{background:rgba(5,150,99,.10)}
body.pg-account .admin-main .tbl td a{color:#115E49}
body.pg-account .admin-main .tbl td:last-child>a{background:#DFF3EB;border:1px solid #B7E3D1;color:#134E3D}
body.pg-account .admin-main .tbl td:last-child>a:hover{background:#CFF0E2;box-shadow:0 8px 16px -8px rgba(4,120,80,.5)}
body.pg-account .admin-main .tpl-thumb{box-shadow:0 0 0 1px var(--adm-line),0 8px 16px -10px rgba(3,40,26,.4)}
body.pg-account .admin-main .drag-h{color:#0D946D}
body.pg-account .bulk-bar{border:1px solid rgba(4,120,80,.22);border-left:5px solid #14B888;box-shadow:0 16px 30px -18px rgba(23,54,43,.35)}
body.pg-account .bulk-count{background:#EAF7F1;border:1px solid rgba(4,120,80,.20);color:#134E3D}
body.pg-account .bulk-bar select,body.pg-account .bulk-bar input[type="text"]{border:1.5px solid rgba(12,31,24,.14)}
body.pg-account .bulk-bar select:focus,body.pg-account .bulk-bar input[type="text"]:focus{border-color:#115E49;box-shadow:0 0 0 4px rgba(5,150,99,.18)}
body.pg-account .orders-tbl input[type="checkbox"]{accent-color:#115E49}
body.pg-account .orders-tbl tr:has(.row-check:checked) td{background:rgba(5,150,99,.09)}
body.pg-account .admin-main .shop-tools{border:1px solid rgba(4,120,80,.15);}
body.pg-account .admin-main .shop-tools{box-shadow:0 16px 30px -22px rgba(3,40,26,.35)}
body.pg-account .admin-main .shop-tools select,body.pg-account .admin-main .shop-tools input{border:1.5px solid rgba(12,31,24,.13)}
body.pg-account .admin-main .shop-tools select:focus,body.pg-account .admin-main .shop-tools input:focus{border-color:#115E49;box-shadow:0 0 0 4px rgba(5,150,99,.18)}
body.pg-account .admin-main .form-card::before{background:linear-gradient(90deg,#115E49,#2DD4A2 55%,#D97706)}
body.pg-account .admin-main .form-card label{color:#335044}
body.pg-account .admin-main .form-card input,body.pg-account .admin-main .form-card textarea,body.pg-account .admin-main .form-card select{border:1.5px solid rgba(6,64,43,.18)}
body.pg-account .admin-main .form-card input:focus,body.pg-account .admin-main .form-card textarea:focus,body.pg-account .admin-main .form-card select:focus{border-color:#0D946D;box-shadow:0 0 0 4px rgba(13,148,109,.18)}
body.pg-account .admin-main .form-card h3{border-left:4px solid #14B888}
body.pg-account .admin-main .form-card .check input{accent-color:#115E49}
body.pg-account .admin-main .gw-opt{border-color:rgba(4,120,80,.2)}
body.pg-account .admin-main .gw-opt:hover{border-color:rgba(4,120,80,.45)}
body.pg-account .admin-main .chart{border:1px solid rgba(4,120,80,.14);box-shadow:0 16px 32px -22px rgba(23,54,43,.3)}
body.pg-account .admin-main .img-admin>div{border-color:rgba(4,120,80,.16);}
body.pg-account .admin-main .img-admin>div{box-shadow:0 12px 24px -18px rgba(3,40,26,.3)}
body.pg-account .admin-main .img-admin>div:hover{box-shadow:0 18px 30px -18px rgba(3,40,26,.38)}
body.pg-account .admin-main .desc{border:1px solid rgba(12,31,24,.08)}
body.pg-account .admin-main code{border:1px solid rgba(4,120,80,.18);color:#134E3D}
body.pg-account .form-card.admin-login{border:1px solid rgba(4,120,80,.2);box-shadow:0 34px 64px -24px rgba(23,54,43,.4),0 6px 18px rgba(23,54,43,.08)}
body.pg-account .form-card.admin-login::before{background:linear-gradient(90deg,#C9A227,#14B888 55%,#115E49)}
body.pg-account .form-card.admin-login input:focus{border-color:#115E49;box-shadow:0 0 0 4px rgba(5,150,99,.18)}
body.pg-account .cart-btn .cb-ico{background:linear-gradient(145deg,#FFFFFF,#E9F7F1);border:1.5px solid rgba(4,120,80,.35);box-shadow:0 10px 20px -10px rgba(3,25,17,.35),inset 0 1px 0 #fff}
body.pg-account .cart-btn .cb-ico{color:#115E49}
body.pg-account .cart-btn:hover .cb-ico{background:linear-gradient(145deg,#FFFFFF,#E9F7F1);color:#115E49;border-color:rgba(4,120,80,.6);box-shadow:0 14px 26px -12px rgba(3,25,17,.45),inset 0 1px 0 #fff}
body.pg-account .main-nav>a.cart-btn.active .cb-ico{background:linear-gradient(135deg,#14B888,#0D946D 60%,#115E49)}
body.pg-account .cart-btn .cb-label{color:#6B7A73}
body.pg-account .cart-btn .cp-total{color:#0B3D2B}
body.pg-account .tpl-admin .tpl-row.dragging{background:#E9F8F1;box-shadow:0 16px 32px -12px rgba(3,25,17,.35)}
body.pg-account .tpl-admin .tpl-row.dragging td{background:#E9F8F1}
body.pg-account .foot-mark{filter:drop-shadow(0 8px 18px rgba(16,185,124,.35))}
body.pg-account .acc-tab:hover{background:rgba(4,120,80,.07)}
body.pg-account .acc-tab.on{background:linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);box-shadow:0 8px 18px -8px rgba(13,148,109,.55)}
body.pg-account .app-eyebrow{color:#0D946D}
body.pg-account main.wrap-wide .order-card{border:1px solid rgba(4,120,80,.14);box-shadow:0 16px 34px -18px rgba(23,54,43,.25)}
body.pg-account main.wrap-wide .order-card:hover{box-shadow:0 22px 40px -18px rgba(23,54,43,.3)}
body.pg-account .dl-meter i{background:linear-gradient(90deg,#14B888,#0D946D)}
body.pg-account .empty-state{border:1px solid rgba(4,120,80,.14)}
body.pg-account .es-ic{background:linear-gradient(135deg,#14B888,#115E49);box-shadow:0 14px 26px -10px rgba(13,148,109,.5)}
body.pg-account .inv-ribbon.paid{background:linear-gradient(135deg,#14B888,#115E49)}
body.pg-account .invoice::before{background:linear-gradient(90deg,#14B888,#0D946D,#D9A62E)}
body.pg-account .inv-mark{filter:drop-shadow(0 8px 16px rgba(13,148,109,.35))}
body.pg-account .inv-pay{background:linear-gradient(180deg,rgba(234,244,240,.9),rgba(234,244,240,.55));border:1px solid rgba(4,120,80,.14)}
body.pg-account .inv-stat{border:1px solid rgba(4,120,80,.12);box-shadow:0 10px 24px -18px rgba(23,54,43,.25)}
body.pg-account .inv-stat b{color:#062A20}
body.pg-account .inv-filters a{border:1px solid rgba(4,120,80,.18)}
body.pg-account .inv-filters a.on{background:linear-gradient(135deg,#14B888,#115E49)}
body.pg-account .inv-panel{border:1px solid rgba(4,120,80,.12);box-shadow:0 18px 40px -30px rgba(23,54,43,.35)}
body.pg-account .inv-row.is-paid::before{background:linear-gradient(180deg,#14B888,#115E49)}
body.pg-account .inv-row.is-paid .inv-ic{background:#CCFBEC;color:#115E49}
body.pg-account .inv-id b{color:#062A20}
body.pg-account .inv-amt{color:#062A20}
body.pg-account .pg-hero{background:linear-gradient(120deg,#ECFDF5 0%,#F2F8F3 55%,#FEF6E0 130%);}
body.pg-account .pg-hero{border:1px solid rgba(6,60,41,.55);color:#EAF7F2;box-shadow:0 24px 44px -22px rgba(3,35,24,.45)}
body.pg-account .pg-hero::after{background:radial-gradient(circle,rgba(16,185,124,.28),rgba(16,185,124,0) 65%)}
body.pg-account .pg-eyebrow{color:#115E49;background:rgba(16,185,124,.13);border:1px solid rgba(13,148,109,.3)}
body.pg-account .pg-hero h1{color:#062A20}
body.pg-account .pg-sub{color:rgba(230,250,242,.82)}
body.pg-account .pg-upd{color:rgba(230,250,242,.55)}
body.pg-account .pg-prose strong{color:#062A20}
body.pg-account .pg-prose h2{border-left:4px solid #14B888}
body.pg-account .pg-prose h2{color:#0B3B2B}
body.pg-account .pg-prose li::before{background:linear-gradient(135deg,#14B888,#115E49)}
body.pg-account .pg-rel-h{color:#062A20}
body.pg-account .pg-rel-card:hover{border-color:rgba(13,148,109,.45)}
body.pg-account .pg-rel-card strong{color:#062A20}
body.pg-account .pg-cta{background:linear-gradient(120deg,#0D946D,#115E49 60%,#115E49);color:#E7FBF4}
body.pg-account .pg-cta .btn-light{color:#115E49}
body.pg-account .crumbs a:hover{color:#0D946D}
body.pg-account .crumbs b{color:#062A20}
body.pg-account .shop-intro strong{color:#062A20}
body.pg-account .fan-sheet{border:1px solid rgba(10,35,25,.10)}
body.pg-account .fs-front{box-shadow:0 26px 46px rgba(6,45,31,.38)}
body.pg-account .fs-ml{box-shadow:0 10px 20px rgba(6,45,31,.20)}
body.pg-account .fs-mr{box-shadow:0 10px 20px rgba(6,45,31,.20)}
body.pg-account .fs-fl{box-shadow:0 7px 14px rgba(6,45,31,.16)}
body.pg-account .fs-fr{box-shadow:0 7px 14px rgba(6,45,31,.16)}
body.pg-account .tpl-card .card-body{border:1px solid rgba(9,45,32,.10);box-shadow:0 14px 30px -12px rgba(7,40,28,.35),inset 0 1px 0 #fff}
body.pg-account .mk-new{background:linear-gradient(90deg,#115E49,#14B888)}
body.pg-account .fan-badge{box-shadow:0 8px 16px rgba(3,25,17,.20)}
body.pg-account .fb-new{background:linear-gradient(135deg,#22C57C,#158050);box-shadow:0 10px 20px rgba(21,128,80,.35)}
body.pg-account .brand-tag{color:#0D946D}
body.pg-account .chip-st.st-answered{background:#E7F6F0;color:#06764B}
body.pg-account .tkt-row:hover{border-color:#BFE6D7}
body.pg-account .tkt-no{color:#0D946D}
body.pg-account .tm-admin{background:#E9F7F2;border:1px solid #C9E9DC}
body.pg-account .tkt-filters .tf.on{background:#0D946D;border-color:#0D946D}
body.pg-account .admin-side .anav.on{background:linear-gradient(120deg,#115E49,#14B888 55%,#0D946D);box-shadow:0 12px 22px -10px rgba(5,150,99,.5)}
body.pg-account .admin-side .anav.on:hover{background:linear-gradient(120deg,#115E49,#14B888 55%,#0D946D)}
body.pg-account .anav-pill{background:linear-gradient(120deg,rgba(5,150,99,.13),rgba(13,148,109,.09));box-shadow:inset 0 0 0 1px rgba(5,150,99,.16)}
body.pg-account .brand-mark::after{background:radial-gradient(circle,rgba(16,185,124,.40),rgba(16,185,124,0) 68%)}
body.pg-account .auth-row .btn-ghost:hover{border-color:#115E49;color:#134E3D;background:rgba(16,185,124,.08)}
body.pg-account .main-nav .auth-row .btn-ghost,body.pg-account .main-nav .btn-ghost.lnk-out-d{color:#0B3B2A;border:1.5px solid rgba(4,120,80,.5);box-shadow:0 6px 16px -10px rgba(6,60,40,.35)}
body.pg-account .main-nav .auth-row .btn-ghost:hover,body.pg-account .main-nav .btn-ghost.lnk-out-d:hover{background:rgba(16,185,124,.08);color:#134E3D;border-color:#115E49}
body.pg-account .btn-light{color:#134E3D;box-shadow:0 12px 24px -12px rgba(3,40,27,.45)}
body.pg-account .btn-light:hover{background:#ECFDF5;color:#134E3D}
body.pg-account .btn-outline{color:#134E3D;border-color:rgba(4,120,80,.55)}
body.pg-account .btn-outline:hover{background:rgba(16,185,124,.08);color:#134E3D}
body.pg-account .btn-ghost::after,body.pg-account .btn-google::after,body.pg-account .btn-light::after,body.pg-account .btn-outline::after,body.pg-account .pg-cta .btn-light::after{background:linear-gradient(100deg,transparent,rgba(5,150,99,.14),transparent)}
body.pg-account .switch .sl::after{color:#8CA39B}
body.pg-account .btn-ghost,body.pg-account .btn-light{background-image:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 50%),linear-gradient(180deg,#FFFFFF,#D8EDE3)}
body.pg-account .btn-ghost,body.pg-account .btn-light{border:1.5px solid rgba(13,148,109,.35)}
body.pg-account .btn-ghost::after,body.pg-account .btn-light::after,body.pg-account .btn-outline::after{background-color:#0D946D}
body.pg-account .btn-ghost,body.pg-account .btn-light,body.pg-account .btn-outline{box-shadow:0 6px 20px -7px rgba(6,60,42,.25)}
body.pg-account input[type="checkbox"]:not(.switch input){border:2px solid rgba(12,31,24,.30)}
body.pg-account input[type="checkbox"]:not(.switch input):hover{border-color:#0D946D}
body.pg-account input[type="checkbox"]:not(.switch input):checked{border-color:#0D946D;background-color:#0D946D;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);box-shadow:0 5px 12px -4px rgba(13,148,109,.55)}
body.pg-account input[type="checkbox"]:not(.switch input):indeterminate{border-color:#0D946D;background-color:#0D946D;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);box-shadow:0 5px 12px -4px rgba(13,148,109,.55)}
body.pg-account input[type="checkbox"]:not(.switch input):focus-visible{box-shadow:0 0 0 4px rgba(16,185,124,.28)}
body.pg-account select:hover{border-color:rgba(13,148,109,.55)}
html.cb-js body.pg-account .cb-ui{border:2px solid rgba(12,31,24,.30);background:linear-gradient(180deg,#FFFFFF,#EFF9F4);box-shadow:inset 0 1px 3px rgba(12,31,24,.07)}
html.cb-js body.pg-account .cb-wrap input:hover ~ .cb-ui{border-color:#0D946D}
html.cb-js body.pg-account .cb-wrap input:checked ~ .cb-ui,html.cb-js body.pg-account .cb-wrap input:indeterminate ~ .cb-ui{background:linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);border-color:#0D946D;box-shadow:0 6px 14px -4px rgba(13,148,109,.55)}
html.cb-js body.pg-account .cb-wrap input:focus-visible ~ .cb-ui{box-shadow:0 0 0 4px rgba(16,185,124,.30)}
body.pg-account .dd-btn{border:1.5px solid rgba(12,31,24,.16)}
body.pg-account .dd-btn:hover{border-color:rgba(13,148,109,.55)}
body.pg-account .dd.open .dd-btn{border-color:#115E49;box-shadow:0 0 0 4px rgba(5,150,99,.16)}
body.pg-account .dd-chev{color:#0D946D}
body.pg-account .dd-panel{border:1px solid rgba(4,120,80,.20);box-shadow:0 24px 44px -16px rgba(3,25,17,.35)}
body.pg-account .dd-group{color:#7A9189}
body.pg-account .dd-opt:hover{background:#EFFAF6}
body.pg-account .dd-opt.sel{background:#E7F6EF;color:#134E3D}
body.pg-account .dd-opt.sel::after{color:#0D946D}
body.pg-account .bulk-bar.has-sel .bulk-count{background:linear-gradient(135deg,#14B888,#0D946D 60%,#115E49);box-shadow:0 10px 18px -8px rgba(13,148,109,.6)}
body.pg-account .pager{border:1px solid rgba(4,120,80,.16)}
body.pg-account .pager-info{color:#446158}
body.pg-account .pg{border:1.5px solid rgba(12,31,24,.14);color:#0B3B2B}
body.pg-account a.pg:hover{border-color:#0D946D;color:#0D946D}
body.pg-account .pg.on{background:linear-gradient(135deg,#14B888,#0D946D 60%,#115E49);box-shadow:0 6px 14px -6px rgba(13,148,109,.55)}
body.pg-account .pg-gap{color:#7A9189}
body.pg-account .pager-per{color:#446158}
body.pg-account .pager-per select{border:1.5px solid rgba(12,31,24,.14)}
body.pg-account .mega{border:1px solid #E1EFE9;box-shadow:0 44px 74px -30px rgba(4,50,33,.38)}
body.pg-account .mega-cat{color:#115E49}
body.pg-account .mega-link:hover{color:#115E49}
body.pg-account .svc-hero{box-shadow:0 34px 60px -30px rgba(3,45,31,.55);background:radial-gradient(560px 300px at 8% -10%,rgba(52,255,183,.32),rgba(52,255,183,0) 60%),radial-gradient(480px 320px at 100% 115%,rgba(245,197,66,.26),rgba(245,197,66,0) 62%),radial-gradient(700px 500px at 88% -20%,rgba(56,189,248,.15),rgba(56,189,248,0) 60%),linear-gradient(118deg,#042318,#134E3D 48%,#0B8A5D)}
body.pg-account .svc-hero-kicker{border:1px solid rgba(167,243,213,.45)}
body.pg-account .svc-hero-kicker{color:#CFF7E6}
body.pg-account .svc-chips{border-bottom:1px solid #E4EFEB}
body.pg-account .svc-chips a{color:#295041;border:1px solid #D8E8E1}
body.pg-account .svc-chips a:hover{border-color:#14B888;color:#115E49;background:#ECFDF5}
body.pg-account .svc-sec{--acc:#115E49;--acc2:#14B888}
body.pg-account .svc-sec[data-cat="development"]{--acc:#115E49;--acc2:#14B888}
body.pg-account .svc-sec[data-cat="hosting"]{--acc:#0D946D;--acc2:#14B888}
body.pg-account .svc2-card{border:1px solid #E0EEE8;box-shadow:0 12px 28px -20px rgba(4,60,39,.35)}
body.pg-account .svc2-card:hover{box-shadow:0 26px 40px -22px rgba(4,60,39,.4)}
body.pg-account .svc2-card h3 a{color:#12261E}
body.pg-account .svc2-card .card-desc{color:#5B6B64}
body.pg-account .svc-cta{border:1px solid #DFEEE7;box-shadow:0 16px 34px -24px rgba(4,60,39,.35)}
body.pg-account .svc-cta p{color:#5B6B64}
body.pg-account .svc-crumb{color:#5B6B64}
body.pg-account .svc-crumb a{color:#115E49}
body.pg-account .shop-empty{border:1.5px dashed #CBDFD6}
body.pg-account .shop-empty p{color:#5B6B64}
body.pg-account .wish-btn{border:1px solid rgba(6,60,40,.14);color:#476054;box-shadow:0 8px 18px -8px rgba(4,50,33,.45)}
body.pg-account .blog-card{border:1px solid rgba(6,64,43,.14);box-shadow:0 22px 40px -24px rgba(3,40,26,.30)}
body.pg-account .blog-card:hover{box-shadow:0 34px 54px -24px rgba(3,40,26,.40)}
body.pg-account .blog-media{background:linear-gradient(135deg,#115E49,#14B888)}
body.pg-account .blog-date{color:#0D946D}
body.pg-account .blog-card h3 a{color:#12261E}
body.pg-account .blog-card h3 a:hover{color:#115E49}
body.pg-account .blog-card-body p{color:#5B6B64}
body.pg-account .blog-more{color:#115E49}
body.pg-account .blog-cover{box-shadow:0 20px 38px -24px rgba(4,60,39,.45)}
body.pg-account .bundle-hint{color:#5B6B64}
body.pg-account .bundle-card{background:linear-gradient(135deg,#ECFDF5,#FFFFFF 55%);border:1.5px solid #BFE8D7;box-shadow:0 16px 32px -24px rgba(4,60,39,.4)}
body.pg-account .bundle-card::before{background:linear-gradient(90deg,#115E49,#F5C542)}
body.pg-account .bundle-members{color:#17382C}
body.pg-account .bundle-members{border:1px solid #D8E8E1}
body.pg-account .bundle-members a{color:#115E49}
body.pg-account .bundle-desc{color:#5B6B64}
body.pg-account .bundle-price s{color:#94A89F}
body.pg-account .bundle-price b{color:#115E49}
body.pg-account .bundle-note{background:#ECFDF5;border:1px solid #BFE8D7;color:#134E3D}
body.pg-account .bundle-members legend{color:#295041}
body.pg-account .svc-hero-kicker i{background:#34F5AB;box-shadow:0 0 0 0 rgba(52,245,171,.55)}
body.pg-account .svc-hero h1 em{background:linear-gradient(92deg,#F5C542,#7CF2C5)}
body.pg-account .svc-tile{color:#EAF7F2}
body.pg-account .t-dev .svc-tile-ic{background:linear-gradient(135deg,#115E49,#14B888)}
body.pg-account .t-host .svc-tile-ic{background:linear-gradient(135deg,#0D946D,#14B888)}
body.pg-account .svc-chips a::before{background:#115E49}
body.pg-account .svc-chips a[href="#cat-hosting"]::before{background:#0D946D}
body.pg-account .search-toggle{border:1px solid #DCE9E4;color:#295041}
body.pg-account .search-toggle:hover{color:#115E49;border-color:#14B888}
body.search-open.pg-account .search-toggle{background:#ECFDF5;color:#115E49;border-color:#14B888}
body.pg-account .head-search{border:1px solid #E1EFE9;box-shadow:0 34px 54px -24px rgba(4,50,33,.38)}
body.search-open.pg-account .head-search{border-top-color:#E1EFE9}
body.pg-account .head-search .hs-ic{color:#0D946D}
body.pg-account .head-search input{border:1.5px solid #D8E8E1;color:#12261E}
body.pg-account .head-search input:focus{border-color:#14B888;box-shadow:0 0 0 4px rgba(16,185,124,.15)}
body.pg-account .pkg .big-price{color:#064E3B}
body.pg-account .pkg-days{background:#ECFDF5;border:1px solid #BDEBD7;color:#115E49}
body.pg-account .pkg-feats li{color:#3D574D}
body.pg-account .pkg-feats li svg{color:#0D946D}
body.pg-account .soon-panel{background:linear-gradient(135deg,#F0FDF8,#FFFBEA);border:1.5px dashed rgba(13,148,109,.45)}
body.pg-account .soon-panel h2{color:#064E3B}
body.pg-account .soon-panel p{color:#49655A}
body.pg-account .hs-close{border:1px solid #DCE9E4;color:#295041}
body.pg-account .bundle-promo{background:linear-gradient(120deg,#ECFDF5,#FFFBEB);border:1px solid #BDEBD7}
body.pg-account .bundle-promo .bp-txt h3{color:#064E3B}
body.pg-account .bundle-promo .bp-txt p{color:#49655A}
body.pg-account .coupon-ribbon{background:linear-gradient(90deg,#073325,#064E3B 40%,#115E49)}
body.pg-account .coupon-ribbon p{color:#D9F2E7}
body.pg-account .cr-x{color:#9AD8BF}
body.pg-account .cpn-hero{background:radial-gradient(720px 300px at 82% -60px,rgba(245,179,1,.20),transparent 62%),radial-gradient(660px 320px at 8% -40px,rgba(16,185,124,.28),transparent 60%),linear-gradient(135deg,#052E20,#064E3B 48%,#115E49);color:#E7F6EF}
body.pg-account .cpn-hero{border:1px solid rgba(6,60,41,.55);box-shadow:0 24px 44px -22px rgba(3,35,24,.45)}
body.pg-account .cpn-hero h1 em{background:linear-gradient(92deg,#F5B301,#2DD4A2)}
body.pg-account .cpn-hero p{color:#BFE6D6}
body.pg-account .cpn-stats span{color:#CFEFE2}
body.pg-account .cpn-card{box-shadow:0 18px 36px -18px rgba(4,50,33,.25);border:1px solid #E1EFE9}
body.pg-account .cpn-stub{background:#EFFAF6}
body.pg-account .cpn-perf{border-left:2px dashed #CBDFD7}
body.pg-account .cpn-main h3{color:#12362A}
body.pg-account .cpn-chip{color:#115E49;background:#E9F9F2;border:1px solid #CDEEE0}
body.pg-account .cpn-code{color:#064E3B;border:1.6px dashed #8FD0B4}
body.pg-account .cpn-copy.ok{background:#115E49!important}
body.pg-account .cpn-shop{color:#115E49}
body.pg-account .cpn-ticket{--acc:#0E9F6B;--bg1:#0E9F6B;--bg2:#0B7A52;}
body.pg-account .cpn-ticket{border:1px solid rgba(4,50,33,.16);box-shadow:0 24px 44px -18px rgba(4,50,33,.35)}
body.pg-account .cpn-ticket{filter:drop-shadow(0 16px 20px rgba(4,50,33,.30))}
body.pg-account .cpn-ticket.tc3{--acc:#115E49;--bg1:#14B888;--bg2:#0D946D}
body.pg-account .cpn-ticket.tc4{--acc:#064E3B;--bg1:#116949;--bg2:#052E20}
body.pg-account .cpn-ticket .cpn-copy{color:#064E3B}
body.pg-account .cpn-cut i{border-top:2px dotted #B7C9C0}
body.pg-account .cpn-ticket.tc3 .cpn-stub{background:#CCF2E6}
body.pg-account .cpn-ticket.tc4 .cpn-stub{background:#D7EBE3}
body.pg-account .cpn-ticket .cpn-stub{background:#D9F2E7}
body.pg-account .ctc-mail{border:1px solid #DCE7E2;box-shadow:0 10px 24px -18px rgba(7,40,28,.35)}
body.pg-account .ctc-mail-ic{background:linear-gradient(135deg,#14B888,#115E49)}
body.pg-account .ctc-mail-tx a{color:#064E3B}
body.pg-account .ctc-copy{border:1px solid #D5E4DD;color:#115E49}
body.pg-account .ctc-copy.ok{background:#115E49;border-color:#115E49}
body.pg-account .pg-hero,body.pg-account .cpn-hero,body.pg-account .svc-hero{background:linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) left 16px top 16px / 24px 2px no-repeat, linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) left 16px top 16px / 2px 24px no-repeat, linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) right 16px top 16px / 24px 2px no-repeat, linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) right 16px top 16px / 2px 24px no-repeat, linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) left 16px bottom 16px / 24px 2px no-repeat, linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) left 16px bottom 16px / 2px 24px no-repeat, linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) right 16px bottom 16px / 24px 2px no-repeat, linear-gradient(rgba(245,197,66,.55),rgba(245,197,66,.55)) right 16px bottom 16px / 2px 24px no-repeat, radial-gradient(rgba(255,255,255,.05) 1px,rgba(255,255,255,0) 1.6px) 0 0 / 22px 22px, radial-gradient(560px 300px at 50% -60px,rgba(52,255,183,.20),rgba(52,255,183,0) 65%), radial-gradient(520px 300px at 96% -40px,rgba(245,197,66,.16),rgba(245,197,66,0) 60%), radial-gradient(480px 300px at 4% 115%,rgba(45,212,162,.14),rgba(45,212,162,0) 60%), linear-gradient(118deg,#032318,#134E3D 52%,#0A7A53);box-shadow:0 34px 64px -30px rgba(3,40,26,.5),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.03)}
body.pg-account .pg-hero h1 em,body.pg-account .cpn-hero h1 em{background:linear-gradient(92deg,#F5C542,#7CF2C5)}
body.pg-account .pg-hero h1,body.pg-account .cpn-hero h1,body.pg-account .svc-hero h1{text-shadow:0 2px 34px rgba(52,255,183,.20)}
body.pg-account .pg-hero .pg-sub,body.pg-account .cpn-hero p,body.pg-account .svc-hero .svc-hero-main>p{color:rgba(230,250,242,.85)}
body.pg-account .form-card,body.pg-account .card,body.pg-account .tbl,body.pg-account .shop-tools,body.pg-account .ctc-mail{border:1px solid rgba(6,64,43,.17);box-shadow:0 24px 44px -22px rgba(3,40,26,.30),0 2px 6px rgba(3,40,26,.05)}
body.pg-account form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),body.pg-account form textarea,body.pg-account form select{border:1.5px solid rgba(6,64,43,.28)}
body.pg-account form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):hover,body.pg-account form textarea:hover,body.pg-account form select:hover{border-color:rgba(6,64,43,.48)}
body.pg-account form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,body.pg-account form textarea:focus,body.pg-account form select:focus{border-color:#0D946D;box-shadow:0 0 0 4px rgba(13,148,109,.16)}
body.pg-account form textarea,body.pg-account form select,body.pg-account .form-card textarea,body.pg-account .form-card select{border:1.5px solid rgba(6,64,43,.28)}
body.pg-account .form-card textarea:hover,body.pg-account .form-card select:hover{border-color:rgba(6,64,43,.48)}
body.pg-account .form-card textarea:focus,body.pg-account .form-card select:focus{border-color:#0D946D;box-shadow:0 0 0 4px rgba(13,148,109,.16)}
body.pg-account .cart-tbl{border:1px solid rgba(6,64,43,.17);box-shadow:0 24px 44px -22px rgba(3,40,26,.30)}
body.pg-account .cart-tbl th{color:#335143;border-bottom:1px solid rgba(6,64,43,.14)}
body.pg-account .cart-tbl td{border-bottom:1px solid rgba(6,64,43,.09)}
body.pg-account .cart-thumb{border:1px solid rgba(6,64,43,.16);background:#0B2A1F}
body.pg-account .ci-t:hover{color:#115E49}
body.pg-account .ci-chip{color:#3D5A4D;border:1px solid rgba(6,64,43,.12)}
body.pg-account .ci-chip.ci-ft{background:#123B2C;color:#D9F5E9}
body.pg-account .ci-chip.ci-new{background:#14B888}
body.pg-account .ci-price s{color:#8AA298}
body.pg-account .ci-save{color:#115E49}
body.pg-account .ctc-point{border:1px solid rgba(6,64,43,.14);box-shadow:0 16px 30px -22px rgba(3,40,26,.30)}
body.pg-account .ctc-point .cp-ic{background:#E4F3EC;color:#115E49}
body.pg-account .pfx-card{border:1px solid rgba(6,64,43,.13);box-shadow:0 22px 40px -24px rgba(3,40,26,.28)}
body.pg-account .pfx-card{background:radial-gradient(430px 210px at 10% -6%,var(--acc-soft,rgba(4,120,80,.14)),rgba(255,255,255,0) 62%),radial-gradient(400px 230px at 96% 0%,var(--acc-soft2,rgba(217,164,32,.10)),rgba(255,255,255,0) 58%),linear-gradient(90deg,#115E49,#2DD4A2 52%,#D97706) top/100% 4px no-repeat,linear-gradient(168deg,#FFFFFF 0%,var(--acc-bg,#F0F7F1) 60%,#E9F2EB 100%)}
body.pg-account .pfx-card{--acc-soft:rgba(4,120,80,.26)}
body.pg-account .pfx-card:hover{box-shadow:0 34px 54px -24px rgba(3,40,26,.38)}
body.pg-account .pfx-card .svc-ic{box-shadow:inset 0 1px 0 #FFFFFF,0 16px 26px -12px rgba(3,40,26,.40)}
body.pg-account .blog-card .blog-media::after{background:linear-gradient(90deg,#115E49,#2DD4A2,#D97706)}
body.pg-account .blog-meta{color:#577064}
body.pg-account .blog-related h2{color:#0B3B2B}
body.pg-account .blog-related h2 em{background:linear-gradient(92deg,#B8860B,#D97706 55%,#0D946D)}
body.pg-account .art-card{border:1px solid rgba(6,64,43,.15);box-shadow:0 16px 30px -20px rgba(3,25,17,.28)}
body.pg-account .art-card h3{color:#0B3B2B}
body.pg-account .art-card p{color:#476054}
body.pg-account .art-toc a{color:#24503F}
body.pg-account .art-toc a:hover{background:rgba(16,185,124,.10);color:#134E3D}
body.pg-account .art-cta{background:linear-gradient(150deg,#0C3A29,#134E3D 70%,#0B5563)}
body.pg-account .art-cta p{color:rgba(219,242,232,.85)}
body.pg-account .art-help-links a{color:#115E49;border-bottom:2px solid rgba(4,120,80,.30)}
body.pg-account .art-help-links a:hover{border-color:#115E49}
body.pg-account .art-author{border:1px solid rgba(6,64,43,.15);box-shadow:0 16px 30px -20px rgba(3,25,17,.25)}
body.pg-account .art-author-ic{background:linear-gradient(135deg,#14B888,#0D946D 60%,#115E49);box-shadow:0 10px 18px -8px rgba(13,148,109,.6)}
body.pg-account .art-author h3{color:#0B3B2B}
body.pg-account .art-author p{color:#476054}
body.pg-account .art-author a{color:#115E49;border-bottom:2px solid rgba(4,120,80,.28)}
body.pg-account .art-author a:hover{border-color:#115E49}
body.pg-account .detail-info h1 .tpl-h-name{color:#115E49}
body.pg-account .stats-band .stat.pfx-card{background:linear-gradient(155deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.42) 52%,rgba(233,250,243,.5) 100%);}
body.pg-account .stats-band .stat.pfx-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 34px -22px rgba(3,40,26,.30)}
body.pg-account .stats-band .stat.pfx-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 26px 40px -22px rgba(3,40,26,.36)}
body.pg-account .stats-band .stat::before{background:linear-gradient(90deg,#115E49,#2DD4A2 52%,#D97706)}
body.pg-account .stats-band .stat>span:last-child{color:#557063}
body.pg-account .stats-band::before{background:linear-gradient(90deg,#115E49,#2DD4A2 52%,#D97706)}
body.pg-account .stats-band .stat:nth-child(2),body.pg-account .stats-band .stat:nth-child(3),body.pg-account .stats-band .stat:nth-child(4){box-shadow:inset 1px 0 0 rgba(6,64,43,.09),inset 0 1px 0 rgba(255,255,255,.9),0 22px 34px -22px rgba(3,40,26,.30)}
body.pg-account .admin-shell .admin-side{border:1px solid rgba(110,231,186,.16);}
body.pg-account .admin-shell .admin-side{background:linear-gradient(168deg,#EDF7F2 0%,#E1F1EA 55%,#F6FAF3 100%);border-color:rgba(6,64,43,.12);}
body.pg-account .admin-shell .admin-side{box-shadow:12px 0 28px -22px rgba(3,40,26,.22)}
body.pg-account .admin-shell .admin-side::after{background:radial-gradient(420px 200px at 85% -5%,rgba(217,164,6,.12),transparent 60%),radial-gradient(360px 260px at -10% 100%,rgba(16,185,124,.14),transparent 60%)}
body.pg-account .admin-shell .admin-side a.anav{color:#2E5042}
body.pg-account .admin-shell .admin-side a.anav:hover{background:rgba(13,148,109,.10);color:#064E36}
body.pg-account .admin-shell .admin-side a.anav.on{background:linear-gradient(120deg,#14B888,#0D946D 60%,#115E49);box-shadow:0 12px 22px -10px rgba(13,148,109,.55)}
body.pg-account .admin-shell .anav-pill{background:linear-gradient(120deg,rgba(16,185,124,.16),rgba(217,164,6,.10));box-shadow:inset 0 0 0 1px rgba(13,148,109,.30)}
body.pg-account .admin-shell .aside-card{border-top:1px solid rgba(6,64,43,.13)}
body.pg-account .admin-shell .aside-card .ac-ava{box-shadow:0 8px 18px -6px rgba(16,185,124,.55)}
body.pg-account .admin-shell .aside-card .ac-meta b{color:#064E3B}
body.pg-account .admin-shell .aside-card .ac-meta small{color:#527064}
body.pg-account .admin-shell .ac-dot{background:#2DD4A2;box-shadow:0 0 0 3px rgba(52,211,153,.25)}
body.pg-account .adm-view{color:#134E3D;box-shadow:0 10px 22px -16px rgba(3,40,26,.35)}
body.pg-account .adm-view:hover{color:#134E3D}
body.pg-account .adm-user{box-shadow:0 10px 22px -16px rgba(3,40,26,.35)}
body.pg-account .admin-main .stat.adm-kpi::before{background:linear-gradient(90deg,#115E49,#2DD4A2 55%,#D97706)}
body.pg-account .admin-main .stat.adm-kpi::after{background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),rgba(16,185,124,.12),transparent 65%)}
body.pg-account .admin-main .stat.adm-kpi:hover{box-shadow:0 26px 44px -22px rgba(3,40,26,.38)}
body.pg-account .admin-main .adm-kpi .stat-ic{background:linear-gradient(135deg,#14B888,#115E49);box-shadow:0 10px 20px -8px rgba(13,148,109,.55)}
body.pg-account .admin-main .adm-kpis .stat:nth-child(2) .stat-ic{background:linear-gradient(135deg,#0D946D,#155E46)}
body.pg-account .admin-main .adm-kpis .stat:nth-child(4) .stat-ic{background:linear-gradient(135deg,#115E49,#134E3D)}
body.pg-account .admin-main .adm-kpis .stat:nth-child(5) .stat-ic{background:linear-gradient(135deg,#0DA364,#126241);box-shadow:0 10px 20px -8px rgba(13,163,100,.5)}
body.pg-account .adm-link{color:#115E49}
body.pg-account .adm-link:hover{color:#134E3D}
body.pg-account .adm-seg a{color:#335044}
body.pg-account .adm-seg a:hover{color:#134E3D}
body.pg-account .adm-seg a.on{box-shadow:0 6px 14px -6px rgba(13,148,109,.6)}
body.pg-account .adm-tip{background:#063927;color:#E9FBF3;box-shadow:0 12px 24px -10px rgba(3,40,26,.5)}
body.pg-account .adm-tip small{color:#9FD8C2}
body.pg-account .admin-main .tbl-scroll{scrollbar-color:rgba(13,148,109,.45) transparent}
body.pg-account .admin-main .tbl-scroll::-webkit-scrollbar-thumb{background:rgba(13,148,109,.4)}
body.pg-account .admin-main .tbl tr:hover td:first-child{box-shadow:inset 3px 0 0 #0D946D}
body.pg-account .admin-main .tbl td:last-child a:not(.btn){border:1px solid rgba(6,64,43,.22);color:#134E3D}
body.pg-account .admin-main .tbl td:last-child a:not(.btn):hover{box-shadow:0 8px 16px -8px rgba(13,148,109,.6)}
body.pg-account .admin-main .tpl-code{color:#134E3D}
body.pg-account .admin-main .cbx input[type="checkbox"]{accent-color:#0D946D}
body.pg-account .admin-main .pill.p-ok{background:rgba(16,185,124,.13);color:#134E3D;border-color:rgba(16,185,124,.35)}
body.pg-account .admin-main .pill.p-info{background:rgba(13,148,109,.12);color:#115E49;border-color:rgba(13,148,109,.35)}
body.pg-account .admin-main .bulk-bar,body.pg-account .admin-main .tools-bar{box-shadow:0 16px 30px -22px rgba(3,40,26,.35)}
body.pg-account .admin-main .bulk-count{color:#335044}
body.pg-account .admin-main .bulk-bar select,body.pg-account .admin-main .shop-tools select,body.pg-account .admin-main .bulk-bar input[type="text"]{border:1.5px solid rgba(6,64,43,.18)}
body.pg-account .admin-main .pager .pg{color:#335044}
body.pg-account .admin-main .pager a.pg:hover{border-color:rgba(13,148,109,.5);color:#134E3D}
body.pg-account .admin-main .pager .pg.on{box-shadow:0 8px 16px -8px rgba(13,148,109,.6)}
body.pg-account .admin-main .form-card input:hover,body.pg-account .admin-main .form-card textarea:hover,body.pg-account .admin-main .form-card select:hover{border-color:rgba(6,64,43,.32)}
body.pg-account .admin-main .form-card label.check input{accent-color:#0D946D}
body.pg-account .admin-main fieldset.bundle-members legend{color:#335044}
body.pg-account .admin-main .bundle-mem:hover{border-color:rgba(13,148,109,.5)}
body.pg-account .admin-main .bundle-mem:has(input:checked){background:linear-gradient(120deg,rgba(16,185,124,.16),rgba(217,119,6,.12));border-color:rgba(13,148,109,.5);color:#134E3D}
body.pg-account .admin-main .bundle-mem input{accent-color:#0D946D}
body.pg-account .admin-main .tkt-filters .tf{color:#335044}
body.pg-account .admin-main .tkt-filters .tf:hover{border-color:rgba(13,148,109,.5)}
body.pg-account .admin-main .tkt-filters .tf.on{box-shadow:0 8px 16px -8px rgba(13,148,109,.6)}
body.pg-account .admin-main .tm{box-shadow:0 12px 24px -20px rgba(3,40,26,.3)}
body.pg-account .admin-main .tm-admin{background:linear-gradient(140deg,rgba(16,185,124,.10),rgba(255,255,255,.65));border-color:rgba(13,148,109,.32)}
body.pg-account .admin-main .tm-body{color:#22382F}
body.pg-account .admin-main .review{box-shadow:0 12px 24px -20px rgba(3,40,26,.3)}
body.pg-account .adm-login-wrap .form-card{border:1px solid var(--adm-line,rgba(6,64,43,.14));box-shadow:0 30px 50px -25px rgba(3,40,26,.4)}
body.pg-account .adm-login-wrap .form-card::before{background:linear-gradient(90deg,#115E49,#2DD4A2 55%,#D97706)}
body.pg-account .admin-shell .admin-side a.anav[href="/admin"]:not(.on){color:#2E5042}
body.pg-account .admin-main .tbl th+th,body.pg-account .admin-main .tbl td+td{border-left:1px solid rgba(6,64,43,.06)}
body.pg-account .admin-shell .admin-side a.anav + .anav-group{border-top:1px solid rgba(6,64,43,.13)}
body.pg-account .adm-foot{border-top:1px solid rgba(6,64,43,.10);color:#7A9189}
body.pg-account .tbl tr:hover td{background:rgba(5,150,99,.10)}
body.pg-account .inv-panel .inv-row:nth-child(even){background:#DAEDE7}
body.pg-account .admin-main .adm2-legend .adm2-dot[data-st="paid"]{background:#0D946D}
body.pg-account .admin-main .adm2-legend .adm2-dot[data-st="delivered"]{background:#115E49}
body.pg-account .admin-main .adm-kpis .stat.adm-kpi:nth-child(1) .stat-ic{background:linear-gradient(135deg,#14B888,#115E49)}
body.pg-account .admin-main .adm-kpis .stat.adm-kpi:nth-child(2) .stat-ic{background:linear-gradient(135deg,#0D946D,#155E46)}
body.pg-account .admin-main .adm-kpis .stat.adm-kpi:nth-child(4) .stat-ic{background:linear-gradient(135deg,#115E49,#134E3D)}
body.pg-account .admin-main .adm-kpis .stat.adm-kpi:nth-child(5) .stat-ic{background:linear-gradient(135deg,#0DA364,#126241)}
body.pg-account .admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-inv{background:linear-gradient(135deg,#0D946D,#155E46)}
body.pg-account .admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-tkt{background:linear-gradient(135deg,#14B888,#115E49)}
body.pg-account .admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-usr{background:linear-gradient(135deg,#0DA364,#126241)}
body.pg-account .admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-tpl{background:linear-gradient(135deg,#115E49,#134E3D)}
body.pg-account .admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-svc{background:linear-gradient(135deg,#115E49,#134E3D)}
body.pg-account .admin-main .adm-tip small{color:#9FD8C2}
body.pg-account .dtl-head{border:1px solid rgba(6,64,43,.14);box-shadow:0 20px 38px -24px rgba(3,40,26,.28)}
body.pg-account .dtl-head h2{color:#064E3B}
body.pg-account .dtl-head-total{color:#064E3B}
body.pg-account .dtl-card{border:1px solid rgba(6,64,43,.14);box-shadow:0 14px 28px -22px rgba(3,40,26,.3)}
body.pg-account .dtl-card h3{color:#115E49}
body.pg-account .dtl-card p{color:#22382F}
body.pg-account .dtl-card .muted{color:#5B7269}
body.pg-account .dtl-items{border:1px solid rgba(6,64,43,.14);box-shadow:0 14px 28px -22px rgba(3,40,26,.3)}
body.pg-account .dtl-items .tbl th+th,body.pg-account .dtl-items .tbl td+td{border-left:1px solid rgba(6,64,43,.06)}
body.pg-account .dtl-totals{color:#22382F}
body.pg-account .dtl-totals .dtl-grand{border-top:2px solid rgba(6,64,43,.35);color:#064E3B}
body.pg-account .dtl-actions{border:1px solid rgba(6,64,43,.14);box-shadow:0 14px 28px -22px rgba(3,40,26,.3)}
body.pg-account .dtl-thanks{color:#5B7269}
body.pg-account .detail .gal-th.active .gal-th-cap{background:rgba(4,120,80,.82)}
body.pg-account .admin-main .tbl tbody tr.row-open:nth-child(even):hover td{background:rgba(5,150,99,.07)}
body.pg-account .adj-panel{border:1px solid rgba(6,64,43,.14);box-shadow:0 14px 28px -22px rgba(3,40,26,.3)}
body.pg-account .adj-panel h3{color:#115E49}
body.pg-account .adj-panel.adj-off p{color:#5B7269}
body.pg-account .adj-panel.adj-off p b{color:#22382F}
body.pg-account .adj-step{border:1px solid rgba(6,64,43,.28);color:#22382F}
body.pg-account .adj-cur{color:#22382F}
body.pg-account .adj-form{border:1px solid rgba(6,64,43,.12)}
body.pg-account .adj-form h4{color:#064E3B}
body.pg-account .adj-form label{color:#22382F}
body.pg-account .adj-form input,body.pg-account .adj-form select{border:1px solid rgba(6,64,43,.28);color:#22382F}
body.pg-account .adj-form input:focus,body.pg-account .adj-form select:focus{outline:2px solid rgba(15,118,89,.45)}
body.pg-account .adj-form p.muted{color:#5B7269}
body.pg-account .adj-history{border:1px solid rgba(6,64,43,.14);box-shadow:0 14px 28px -22px rgba(3,40,26,.3)}
body.pg-account .adj-history h3{color:#115E49}
body.pg-account .adm-gear-btn{border:1px solid rgba(6,64,43,.14);color:#335143}
body.pg-account .adm-gear-menu{border:1px solid rgba(6,64,43,.14);box-shadow:0 24px 48px -16px rgba(6,40,27,.28)}
body.pg-account .tbl tr:nth-child(odd) td{background:#DAEDE7}
body.pg-account .admin-main .tbl tr:nth-child(odd) td{background:#DAEDE7}
body.pg-account .email-addr-row{border-bottom:1px dashed rgba(6,64,43,.14)}
body.pg-account .email-addr-l{color:#527064}
body.pg-account .email-board{border:1px solid rgba(6,64,43,.18)}
body.pg-account .ok-t{color:#0B8A5D}
body.pg-account .announce-bar{background:linear-gradient(90deg,#064E36,#0D946D);color:#ECFDF5}
body.pg-account .support-float{background:#115E49;box-shadow:0 10px 28px rgba(4,80,54,.35)}
body.pg-account .support-float:hover{background:#115E49}
body.pg-account .sett-tabs{border:1.5px solid rgba(6,64,43,.14);box-shadow:0 6px 18px -12px rgba(6,64,43,.25)}
body.pg-account .sett-tab{color:#335044}
body.pg-account .sett-tab:hover{color:#0B3D2B}
body.pg-account .sett-tab.on{background:linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);box-shadow:0 6px 16px -6px rgba(13,148,109,.55)}
body.pg-account .set-tab{border:1px solid rgba(6,64,43,.18);color:#335143}
body.pg-account .set-tab.on{background:linear-gradient(135deg,#14B888,#0D946D);box-shadow:0 8px 18px -8px rgba(13,148,109,.55)}
body.pg-account .admin-main .switch .sl::after{color:#8CA39B}
body.pg-account .admin-main .switch input:checked + .sl{background:linear-gradient(135deg,#D4A017,#14B888 55%,#0D946D);box-shadow:0 0 0 3px rgba(16,185,124,.16),0 8px 20px -4px rgba(13,148,109,.6)}
body.pg-account .admin-main .switch input:focus-visible + .sl{box-shadow:0 0 0 4px rgba(16,185,124,.35)}
body.pg-account .acc-side{border:1px solid rgba(4,120,80,.16);box-shadow:0 24px 44px -20px rgba(23,54,43,.28),0 4px 14px rgba(23,54,43,.06)}
body.pg-account .acc-side::before{background:linear-gradient(90deg,#115E49,#14B888 45%,#C9A227)}
body.pg-account .acc-group{color:#0D946D}
body.pg-account .acc-link svg{background-color:#DFF3EB;border:1px solid #B7E3D1;color:#134E3D}
body.pg-account .acc-link:hover{background:linear-gradient(120deg,rgba(5,150,99,.10),rgba(13,148,109,.07));color:#134E3D}
body.pg-account .acc-link:hover svg{box-shadow:0 6px 14px -6px rgba(4,120,80,.5)}
body.pg-account .acc-arrow{color:#0E9F6B}
body.pg-account .acc-link.on{background:linear-gradient(120deg,#115E49,#14B888 55%,#0D946D);box-shadow:0 12px 22px -10px rgba(5,150,99,.55)}
body.pg-account .acc-sep{background:rgba(4,120,80,.14)}
body.pg-account .side-brand{border-bottom:1px solid rgba(6,64,43,.12)}
@media (max-width:860px){
  body.pg-account .main-nav .nav-link::after{color:#0E9F6B}
  body.pg-account .site-head .main-nav>a.nav-link::after{color:#0E9F6B}
  body.pg-account .mega-toggle{border:1px solid #DCE9E4;color:#115E49}
  body.pg-account .mega-col{border-top:1px solid #E2F0EA}
  body.pg-account .mega-cat::before{background:linear-gradient(135deg,#14B888,#115E49)}
  body.pg-account .mega-cat::after{border-right:2px solid #115E49;border-bottom:2px solid #115E49}
  body.pg-account .stats-band .stat:nth-child(3){border-left:1px solid rgba(6,64,43,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 34px -22px rgba(3,40,26,.30)}
  body.pg-account .main-nav>a.cart-btn{background:linear-gradient(120deg,rgba(16,185,124,.12),rgba(13,148,109,.16));border:1px solid rgba(4,120,80,.32);box-shadow:0 12px 24px -12px rgba(3,25,17,.35),inset 0 1px 0 rgba(255,255,255,.65)}
  body.pg-account .main-nav>a.cart-btn .cb-ico{background:linear-gradient(135deg,#14B888,#0D946D 60%,#115E49);box-shadow:0 8px 16px -8px rgba(4,120,80,.55)}
  body.pg-account .main-nav>a.cart-btn .cb-label{color:#0B3D2B}
  body.pg-account .main-nav>a.cart-btn.active{background:linear-gradient(120deg,#14B888,#0D946D 60%,#115E49)}
  body.pg-account .admin-main .tbl{scrollbar-color:rgba(13,148,109,.45) transparent}
  body.pg-account .admin-main .tbl::-webkit-scrollbar-thumb{background:rgba(13,148,109,.4)}
}
@media(max-width:860px){
  body.pg-account .main-nav .cart-btn{border:1px solid rgba(4,120,80,.25)}
}
@media(max-width:900px){
  body.pg-account .auth-row .nav-link{border:1px solid rgba(13,148,109,.35);background:rgba(16,185,124,.07)}
}
@media (hover:hover) and (pointer:fine){
  body.pg-account .card:hover .fs-front{box-shadow:0 32px 56px rgba(6,45,31,.42)}
  body.pg-account .card:hover .fs-ml{box-shadow:0 22px 38px rgba(6,45,31,.32)}
  body.pg-account .card:hover .fs-mr{box-shadow:0 22px 38px rgba(6,45,31,.32)}
  body.pg-account .card:hover .fs-fl{box-shadow:0 14px 26px rgba(6,45,31,.26)}
  body.pg-account .card:hover .fs-fr{box-shadow:0 14px 26px rgba(6,45,31,.26)}
}
@media(min-width:1025px){
  body.pg-account .admin-side{scrollbar-color:#C9D8D2 transparent}
  body.pg-account .admin-side::-webkit-scrollbar-thumb{background:#C9D8D2}
  body.pg-account .main-nav .nav-link.lnk-pub:hover{background:rgba(16,185,124,.10);color:#134E3D}
  body.pg-account .main-nav .nav-link.lnk-pub.active{background:linear-gradient(120deg,rgba(5,150,99,.17),rgba(13,148,109,.12));color:#134E3D;box-shadow:inset 0 0 0 1px rgba(5,150,99,.28)}
  body.pg-account:has(.acc-shell) .acc-side{box-shadow:12px 0 28px -22px rgba(3,40,26,.22)}
}
@media (hover:hover){
  body.pg-account .btn:hover{box-shadow:0 10px 26px -6px rgba(6,60,42,.36)}
}
@media(min-width:901px){
  body.pg-account .admin-shell .admin-side a.anav{border-bottom:1px solid rgba(6,64,43,.05)}
}
/* brand logo gradient stops (sidebar/header/footer marks) — member only */
body.pg-account .brand-mark stop:first-of-type{stop-color:#10B981}
body.pg-account .brand-mark stop:last-of-type{stop-color:#047857}
/* teal copies of pulse keyframes (global names untouched) */
@keyframes pulseDotT{0%{box-shadow:0 0 0 0 rgba(34,197,124,.45)}70%{box-shadow:0 0 0 8px rgba(34,197,124,0)}100%{box-shadow:0 0 0 0 rgba(34,197,124,0)}}
@keyframes acPulse61T{0%{box-shadow:0 0 0 0 rgba(16,185,124,.35)}70%{box-shadow:0 0 0 6px rgba(16,185,124,0)}100%{box-shadow:0 0 0 0 rgba(16,185,124,0)}}
body.pg-account .pulse-dot,body.pg-account .foot-status i{animation-name:pulseDotT}
body.pg-account .ac-dot{animation-name:acPulse61T}

/* ============================================================
   ADMIN TEAL CORPORATE — Scheme 3 (26 Oct 2026)
   Shared-component overrides: sirf .admin-shell / admin pages
   ke andar lagu. Public + member area bilkul untouched.
   ============================================================ */
body:has(.admin-shell){background:#F2F8F3}
.admin-shell .btn{background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 46%),linear-gradient(0deg,rgba(0,40,25,.16),rgba(0,40,25,0) 42%),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49)}
.admin-shell .btn-ghost,.admin-shell .btn-light{color:#134E3D;background-image:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 50%),linear-gradient(180deg,#FFFFFF,#D8EDE3);border-color:rgba(13,148,109,.35)}
.admin-shell .btn-ghost::after,.admin-shell .btn-light::after,.admin-shell .btn-outline::after{background-color:#0D946D}
.admin-shell .switch input:checked + .sl{background:linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);box-shadow:0 0 0 3px rgba(16,185,124,.16),0 8px 20px -4px rgba(13,148,109,.6)}
.admin-shell .pg.on{background:linear-gradient(135deg,#14B888,#0D946D 60%,#115E49)}
.admin-shell .st-delivered,.admin-shell .st-completed{background:rgba(16,185,124,.15);color:#134E3D;border-color:rgba(16,185,124,.4)}
.admin-shell .st-answered{background:#E7F6F0;color:#06764B}
.admin-shell form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),.admin-shell form textarea,.admin-shell form select{background:#F2F7F2;border-color:rgba(6,64,43,.28)}
.admin-shell form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):hover,.admin-shell form textarea:hover,.admin-shell form select:hover{border-color:rgba(6,64,43,.48)}
.admin-shell form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,.admin-shell form textarea:focus,.admin-shell form select:focus{background:#FFFFFF;border-color:#0D946D;box-shadow:0 0 0 4px rgba(13,148,109,.16)}
.admin-shell .form-card textarea,.admin-shell .form-card select{background:#F2F7F2;border-color:rgba(6,64,43,.28)}
.admin-shell .form-card textarea:focus,.admin-shell .form-card select:focus{background:#FFFFFF;border-color:#0D946D;box-shadow:0 0 0 4px rgba(13,148,109,.16)}
.admin-side .side-brand{border-bottom-color:rgba(6,64,43,.12)}
/* ================================================================
   ACCOUNT REDESIGN v298 — TEAL CORPORATE (READY — not deployed)
   User ka final rang: Scheme 3 "Teal Corporate" (26 Oct 2026).
   bg #F2F8F3 · surfaces #FFFFFF · accent #059669 · deep #064E3B
   Saari nayi rangat SIRF in tokens se aati hai — palette badalna
   ho to sirf ye values badlein (mapping: color-variants/swap.py).
   ================================================================ */
:root{
  --ac-brand:#059669; --ac-brand2:#10B981; --ac-teal:#059669;
  --ac-deep:#047857; --ac-deepest:#064E3B; --ac-dark:#064E3B;
  --ac-ink:#052E22; --ac-ink2:#22344F; --ac-mut:#64748B;
  --ac-mint:#34D399; --ac-mint2:#6EE7B7; --ac-tint:#D1FAE5; --ac-tint2:#ECFDF5;
  --ac-grad:linear-gradient(120deg,#10B981 0%,#059669 55%,#047857 100%);
  --ac-bg:#F2F8F3; --ac-card:#FFFFFF; --ac-card2:#F7FAFA;
  --ac-line:rgba(5,150,105,.16); --ac-line2:#E2ECE7;
  --ac-ok:#059669; --ac-ok-bg:#D1FAE5;
  --ac-warn:#B45309; --ac-warn-bg:#FEF3C7;
  --ac-bad:#B91C1C; --ac-bad-bg:#FDECEC;
  --ac-gold:#C9A227; --ac-gold-ink:#7A5C0A;
  --ac-r:12px; --ac-r-sm:12px;
  --ac-sh:0 16px 34px -18px rgba(6,78,59,.28);
  --ac-sh-sm:0 8px 22px rgba(5,46,34,.06);
  --ac-ease:cubic-bezier(.4,0,.2,1);
}
/* --- page head: title + summary chips --- */
.acc-main .app-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.acc-main .app-head-t{min-width:0}
.acc-main .app-title{color:var(--ac-ink)}
.acc-main .app-eyebrow{color:var(--ac-teal)}
.app-head-chips{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:4px}
.ah-chip{display:inline-flex;align-items:center;gap:6px;background:var(--ac-tint2);border:1px solid var(--ac-line);color:var(--ac-deepest);font-size:12.5px;font-weight:500;border-radius:999px;padding:6px 13px}
.ah-chip b{color:var(--ac-brand)}
/* --- buttons: aik hi pehchan (account scope) --- */
.acc-main .btn{background:var(--ac-grad);background-size:160% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 var(--ac-deepest),0 16px 28px -12px rgba(16,185,129,.5)}
.acc-main .btn:hover{background-position:90% 0;transform:translateY(-1px)}
.acc-main .btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 var(--ac-deepest)}
.acc-main .btn-ghost{background:#fff;color:var(--ac-deepest);border:1px solid var(--ac-line);box-shadow:none}
.acc-main .btn-ghost:hover{border-color:var(--ac-brand);color:var(--ac-brand)}
.acc-main .btn-amber{background:var(--ac-grad);background-size:160% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 var(--ac-deepest),0 16px 28px -12px rgba(16,185,129,.5)}
/* --- status pills: yak-san size, token rang --- */
.acc-main .status,.acc-main .st-pill{border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.acc-main .st-pending,.acc-main .status.st-pending{background:var(--ac-warn-bg);color:var(--ac-warn);border-color:rgba(217,119,6,.35)}
.acc-main .st-paid,.acc-main .st-delivered,.acc-main .st-pill.ok{background:var(--ac-ok-bg);color:var(--ac-deep);border-color:rgba(5,150,105,.3)}
.acc-main .st-expired,.acc-main .st-cancelled,.acc-main .st-refunded,.acc-main .st-pill.bad{background:var(--ac-bad-bg);color:var(--ac-bad);border-color:rgba(185,28,28,.25)}
.acc-main .st-pill.warn{background:var(--ac-warn-bg);color:var(--ac-warn);border-color:rgba(217,119,6,.35)}
/* --- pager: slim halat mein Rows selector gayab --- */
.acc-main .pager{border-color:var(--ac-line)}
.acc-main .pager-slim .pager-per{display:none}
.acc-main .pager .pg.on{background:var(--ac-grad);color:#fff}
/* --- forms (account scope): full-width cards, saaf rhythm --- */
.acc-main .form-card{max-width:none;margin-left:0;margin-right:0;background:var(--ac-card);border:1px solid var(--ac-line);box-shadow:var(--ac-sh-sm)}
.acc-main .fg-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.acc-main .fg-2{grid-template-columns:1fr}}
.acc-main .form-card input:focus,.acc-main .form-card select:focus,.acc-main .form-card textarea:focus{border-color:var(--ac-brand);box-shadow:0 0 0 3px var(--ac-tint);outline:none}
/* --- empty state base polish --- */
.acc-main .empty-state{border-color:var(--ac-line)}
.acc-main .empty-state .es-ic{background:var(--ac-tint2);color:var(--ac-brand);border:1px solid var(--ac-line)}
.es-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
/* --- unified list row (Orders / Invoices / Downloads / Tickets) --- */
.urow{gap:16px;background:var(--ac-card);border:1px solid var(--ac-line);border-radius:var(--ac-r);box-shadow:var(--ac-sh-sm);transition:transform .22s var(--ac-ease),box-shadow .25s var(--ac-ease),border-color .25s}
.urow:hover{transform:translateY(-2px);box-shadow:var(--ac-sh);border-color:rgba(5,150,105,.35)}
.urow-thumb{border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--ac-line2);background:var(--ac-card2)}
.urow-thumb-ic{width:52px;height:52px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--ac-tint2);color:var(--ac-brand);border:1px solid var(--ac-line)}
.urow-thumb-ic svg{width:24px;height:24px}
.urow-main{flex:1;}
.urow-title{font-weight:500;font-size:15.5px;color:var(--ac-ink);overflow:hidden;text-overflow:ellipsis}
.urow-title a{color:inherit;text-decoration:none}
.urow-title a:hover{color:var(--ac-brand)}
.urow-sub{color:var(--ac-mut);font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.urow-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.urow-side{text-align:right;flex-direction:column;gap:8px;flex:none}
.urow-amt{font-family:'Sora',sans-serif;font-size:18px;font-weight:500;color:var(--ac-ink)}
.urow-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:700px){
  .urow{flex-wrap:wrap;gap:12px}
  .urow-title,.urow-sub{white-space:normal}
}
/* --- filter bar (lists ke upar) --- */
.afilter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 14px}
.af-tab{appearance:none;border:1px solid var(--ac-line);background:#fff;color:var(--ac-ink2);font-weight:500;font-size:13px;border-radius:999px;padding:8px 15px;cursor:pointer;transition:all .2s var(--ac-ease)}
.af-tab:hover{border-color:var(--ac-brand);color:var(--ac-brand)}
.af-tab.on{background:var(--ac-grad);color:#fff;border-color:transparent;box-shadow:0 8px 18px -8px rgba(16,185,129,.6)}
.af-search{margin-left:auto;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--ac-line);border-radius:999px;padding:8px 14px;min-width:210px}
.af-search input{border:none;outline:none;background:none;font:inherit;font-size:13.5px;width:100%;color:var(--ac-ink)}
.af-search svg{width:16px;height:16px;color:var(--ac-mut);flex:none}
@media(max-width:700px){.af-search{margin-left:0;width:100%}}
/* --- sidebar active/hover token par --- */
.acc-side .acc-link.on{background:var(--ac-grad)}
.acc-side .acc-link:hover{color:var(--ac-brand)}
@media(min-width:1025px){.acc-main{min-height:calc(100vh - 190px)}}
/* --- SLICE 3: invoice / order detail --- */
.acc-main .dtl{max-width:none}
.acc-main .dtl-head{border-color:var(--ac-line);border-radius:var(--ac-r)}
.acc-main .dtl-eyebrow{color:var(--ac-teal)}
.acc-main .dtl-head h2{color:var(--ac-ink)}
.acc-main .dtl-head-total{color:var(--ac-ink)}
.dtl-more{font-size:13.5px;font-weight:500;color:var(--ac-brand);background:var(--ac-tint2);border:1px solid var(--ac-line);border-radius:999px;padding:3px 11px;vertical-align:middle;white-space:nowrap}
.dtl-from{display:flex;gap:6px 22px;flex-wrap:wrap;align-items:center;background:var(--ac-card2);border:1px solid var(--ac-line2);border-radius:9px;padding:10px 16px;font-size:13px;color:var(--ac-mut)}
.dtl-from b{color:var(--ac-ink)}
.acc-main .dtl-card{border-color:var(--ac-line)}
.acc-main .dtl-card h3{color:var(--ac-brand);border-left-color:var(--ac-brand2)}
.acc-main .dtl-items{border-color:var(--ac-line)}
.acc-main .dtl-totals{max-width:380px}
.acc-main .dtl-totals .dtl-grand{color:var(--ac-ink);font-size:16px}
.btn-ic{width:16px;height:16px;vertical-align:-3px}
.tl-steps{display:flex;flex-direction:column}
.tl-step{display:flex;gap:11px;position:relative;padding:0 0 13px}
.tl-step:last-child{padding-bottom:0}
.tl-step i{width:13px;height:13px;border-radius:50%;flex:none;margin-top:3px;background:#fff;border:3px solid #CBD5D1;position:relative;z-index:1;box-sizing:border-box}
.tl-step:not(:last-child)::before{content:"";position:absolute;left:6px;top:18px;bottom:-2px;width:2px;background:var(--ac-line2)}
.tl-step.done i{border-color:var(--ac-brand);background:var(--ac-brand)}
.tl-step b{display:block;font-size:13.5px;color:var(--ac-ink)}
.tl-step span{font-size:12.5px;color:var(--ac-mut)}
.tl-step.todo b{color:var(--ac-mut)}
.acc-main .dtl-thanks{text-align:center;color:var(--ac-mut)}
/* --- SLICE 4: dashboard --- */
.acc-main .dstat-wave{display:none}
.acc-main .dash-hero{background:linear-gradient(130deg,#064E3B 0%,#073A26 55%,#0A4F34 100%)}
.acc-main .stat-grid .stat:nth-child(1) .stat-ic{background:var(--ac-tint2);border-color:var(--ac-tint);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(5,150,105,.14)}
.acc-main .stat-grid .stat:nth-child(2) .stat-ic{background:linear-gradient(135deg,#10B981,#059669);box-shadow:0 10px 20px rgba(5,150,105,.26)}
.acc-main .stat-grid .stat:nth-child(3) .stat-ic{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 10px 20px rgba(5,150,105,.24)}
.dash-chip.alert{background:rgba(245,158,11,.22);border-color:rgba(245,158,11,.55);color:#FFE1A1;text-decoration:none}
.dash-chip.alert:hover{background:rgba(245,158,11,.34)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.sec-link{font-weight:500;font-size:13.5px;color:var(--ac-brand);text-decoration:none;white-space:nowrap}
.sec-link:hover{text-decoration:underline}
.acc-main .drow{border-color:var(--ac-line2)}
.acc-main .drow:hover{transform:translateY(-2px);box-shadow:var(--ac-sh-sm);border-color:rgba(5,150,105,.35)}
.drow-items{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ac-ink2);font-weight:500;font-size:14px}
.drow-chev{font-style:normal;color:var(--ac-mut);font-size:21px;line-height:1;transition:color .2s,transform .2s}
.drow:hover .drow-chev{color:var(--ac-brand);transform:translateX(2px)}
@media(max-width:700px){
  .drow{flex-wrap:wrap}
  .drow-items{order:6;flex-basis:100%;white-space:normal}
  .drow-chev{display:none}
}
@media(max-width:860px){}
.acc-main .qtile{border-color:var(--ac-line2)}
.acc-main .qtile:hover{transform:translateY(-2px);box-shadow:var(--ac-sh-sm);border-color:rgba(5,150,105,.35)}
.acc-main .stat-grid .stat:nth-child(1) .stat-ic{color:var(--ac-brand)}
.acc-main .stat-grid .stat:nth-child(2) .stat-ic,.acc-main .stat-grid .stat:nth-child(3) .stat-ic{color:#fff}
.acc-main .qtile:nth-child(3) .stat-ic{background:var(--ac-tint);border-color:var(--ac-tint);color:var(--ac-deep)}
/* --- SLICE 5: downloads rows, empty/data states, services --- */
.dl-urow .dl-meter{display:block;height:6px;border-radius:99px;background:var(--ac-line2);margin-top:10px;max-width:340px;overflow:hidden}
.dl-urow .dl-meter i{display:block;height:100%;border-radius:99px;background:var(--ac-grad)}
.dl-ring{--p:0;width:54px;height:54px;border-radius:50%;flex:none;background:conic-gradient(var(--ac-brand) calc(var(--p)*1%),var(--ac-line2) 0);display:flex;align-items:center;justify-content:center;position:relative}
.dl-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.dl-ring b{position:relative;font-size:12px;color:var(--ac-ink)}
.dl-urow .urow-side{flex-direction:row;align-items:center;gap:14px}
@media(max-width:700px){.dl-urow .urow-side{border-top:none;padding-top:0;width:auto}}
.recs-title{margin:28px 0 14px}
/* services: steps strip + stepper + brief + chat */
.steps-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.step-i{display:flex;gap:13px;background:var(--ac-card);border:1px solid var(--ac-line);border-radius:var(--ac-r);padding:16px 18px;box-shadow:var(--ac-sh-sm)}
.step-i b{width:30px;height:30px;flex:none;border-radius:50%;background:var(--ac-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.step-i strong{display:block;font-size:14.5px;color:var(--ac-ink)}
.step-i span{font-size:13px;color:var(--ac-mut)}
@media(max-width:700px){.steps-strip{grid-template-columns:1fr}}
.svc-steps{display:flex;gap:0;background:var(--ac-card);border:1px solid var(--ac-line);border-radius:var(--ac-r);padding:18px 20px;box-shadow:var(--ac-sh-sm);margin-bottom:16px;overflow-x:auto}
.svc-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-align:center;min-width:90px}
.svc-step i{width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid #CBD5D1;z-index:1;box-sizing:border-box}
.svc-step::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:2px;background:var(--ac-line2)}
.svc-step:first-child::before{display:none}
.svc-step.done i,.svc-step.on i{border-color:var(--ac-brand)}
.svc-step.done i{background:var(--ac-brand)}
.svc-step.on i{background:var(--ac-brand2);box-shadow:0 0 0 5px var(--ac-tint)}
.svc-step.done::before,.svc-step.on::before{background:var(--ac-brand)}
.svc-step span{font-size:12.5px;font-weight:500;color:var(--ac-mut)}
.svc-step.done span,.svc-step.on span{color:var(--ac-ink)}
.svc-brief{margin-bottom:18px}
.chat-list{display:flex;flex-direction:column;gap:12px;margin:6px 0 16px}
.chat-msg{display:flex}
.chat-msg.me{justify-content:flex-end}
.chat-bub{max-width:78%;background:var(--ac-card);border:1px solid var(--ac-line);border-radius:16px;border-bottom-left-radius:6px;padding:12px 15px;box-shadow:var(--ac-sh-sm)}
.chat-msg.me .chat-bub{background:var(--ac-tint2);border-color:var(--ac-tint);border-radius:16px;border-bottom-right-radius:6px}
.chat-bub strong{font-size:12.5px;color:var(--ac-brand)}
.chat-msg.me .chat-bub strong{color:var(--ac-deep)}
.chat-bub p{margin:3px 0 5px;font-size:14px;color:var(--ac-ink2)}
.chat-bub small{font-size:11.5px;color:var(--ac-mut)}
@media(max-width:700px){.chat-bub{max-width:90%}}
.acc-main .status.st-in-progress{background:var(--ac-tint);color:var(--ac-deep);border-color:rgba(5,150,105,.3)}
.acc-main .status.st-completed{background:var(--ac-ok-bg);color:var(--ac-deep);border-color:rgba(5,150,105,.3)}
/* --- SLICE 6: support --- */
.sup-grid{display:grid;grid-template-columns:minmax(340px,430px) 1fr;gap:20px;align-items:start}
@media(max-width:1024px){.sup-grid{grid-template-columns:1fr}}
.sup-grid .form-card{margin-top:0}
.sup-list .empty-state{margin-top:0}
.acc-main .tkt-list{display:flex;flex-direction:column;gap:10px}
.acc-main .tkt-row{display:flex;align-items:center;gap:13px;background:var(--ac-card);border:1px solid var(--ac-line);border-radius:10px;padding:14px 16px;text-decoration:none;box-shadow:var(--ac-sh-sm);transition:transform .2s var(--ac-ease),box-shadow .25s,border-color .25s}
.acc-main .tkt-row:hover{transform:translateY(-1px);box-shadow:var(--ac-sh);border-color:rgba(5,150,105,.35)}
.tkt-ic{width:42px;height:42px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--ac-tint2);color:var(--ac-brand);border:1px solid var(--ac-line)}
.tkt-ic svg{width:20px;height:20px}
.tkt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tkt-sj{font-weight:500;color:var(--ac-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.tkt-meta{display:flex;gap:6px;flex-wrap:wrap}
.acc-main .tkt-upd{color:var(--ac-mut);font-size:12.5px;white-space:nowrap}
.chip-st{border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.chip-st.st-open{background:var(--ac-tint);color:var(--ac-deep);border-color:rgba(5,150,105,.3)}
.chip-st.st-pending{background:var(--ac-warn-bg);color:var(--ac-warn);border-color:rgba(217,119,6,.35)}
.chip-st.st-closed{background:#EEF2F1;color:var(--ac-mut);border-color:var(--ac-line2)}
/* TK-TURN (20261027): admin ticket list — turn chips, priority pills, new-conversation marker */
/* FONT RULE + UNIFORM PILLS (20261027): pills kabhi bold nahi (weight 500, sentence case) aur har pill ka size bilkul aik jesa — fixed width/height, label ki lambai se farq nahi. Sab se lamba label "Customer reply" hai (widest fallback font par bhi ~88px @11.5px) — 118px width mein spare room ke sath fit hai. */
.chip-st.tk-open,.chip-st.tk-cust,.chip-st.tk-ans,.chip-st.tk-closed,.chip-pr{display:inline-flex;align-items:center;justify-content:center;width:118px;height:26px;padding:0 8px;box-sizing:border-box;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1;white-space:nowrap}
.chip-st.tk-open{background:var(--ac-tint);color:var(--ac-deep);border-color:rgba(5,150,105,.3)}
.chip-st.tk-cust{background:#FEF3C7;color:#92400E;border-color:rgba(217,119,6,.4)}
.chip-st.tk-ans{background:#E8EEF9;color:#31559F;border-color:rgba(49,85,159,.28)}
.chip-st.tk-closed{background:#EEF2F1;color:var(--ac-mut);border-color:var(--ac-line2)}
.chip-pr{border-radius:999px;border:1px solid transparent}
.chip-pr.pr-high{background:#FEE2E2;color:#B91C1C;border-color:rgba(185,28,28,.3)}
.chip-pr.pr-normal{background:#EDF1F4;color:#54626E;border-color:#D8E0E6}
.chip-pr.pr-low{background:#E4EBFA;color:#31559F;border-color:rgba(49,85,159,.25)}
/* FONT RULE (20261027) — ticket surfaces par chhoti UI text bold nahi: filter tabs, bulk count, member ticket chips */
.admin-main .tkt-filters .tf{font-weight:500}
#bulk-contacts .bulk-count{font-weight:500}
.acc-main .tk2-chip{font-weight:500}
/* New Ticket button ab bulk toolbar ke right end par hai (.bulk-bar flex-wrap pehle se hai — narrow width par apni row mein right-aligned wrap ho jata hai, overflow nahi) */
.bulk-bar .btn-newtkt{margin-left:auto}
.tk-new{display:inline-flex;align-items:center;gap:5px;background:rgba(224,36,36,.12);color:#C02626;border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;vertical-align:2px;margin-left:2px}
.tk-new i{width:6px;height:6px;border-radius:50%;background:#E02424;flex:none}
@media(max-width:700px){.acc-main .tkt-upd{display:none}.tkt-sj{white-space:normal}}
.acc-main .tm-user{align-self:flex-end;background:var(--ac-tint2);border-color:var(--ac-tint);border-bottom-right-radius:5px;border-bottom-left-radius:15px}
.acc-main .tm-admin{align-self:flex-start;background:var(--ac-card2);border-color:var(--ac-line2);border-bottom-left-radius:5px;border-bottom-right-radius:15px}
.acc-main .tm-meta b{color:var(--ac-deep)}
.tkt-back{margin-top:14px}
/* --- SLICE 7: settings --- */
.set-nav{position:sticky;top:84px;z-index:30;display:flex;gap:6px;flex-wrap:wrap;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid var(--ac-line);border-radius:999px;padding:6px;margin:0 0 16px;box-shadow:var(--ac-sh-sm)}
.set-nav a{padding:7px 14px;border-radius:999px;font-weight:500;font-size:13px;color:var(--ac-ink2);text-decoration:none;transition:all .2s}
.set-nav a:hover{background:var(--ac-tint2);color:var(--ac-brand)}
.set-card{scroll-margin-top:150px}
.acc-main .set-grid > #set-emails{grid-row:span 2}
.set-hint{margin-top:-6px}
.set-hint a{color:var(--ac-brand);font-weight:500}
#set-emails form:not([style*="inline"]){border-top:1px dashed var(--ac-line2);padding-top:14px}
#set-emails h4{margin:0 0 8px;font-size:14.5px;color:var(--ac-ink)}
.acc-main .email-board{background:var(--ac-warn-bg);border-color:rgba(217,119,6,.32)}
.acc-main .email-addr-row{border-bottom-color:var(--ac-line2)}
.set-danger{border-color:rgba(185,28,28,.32)!important;background:#FFFBFB}
.set-danger h3{color:var(--ac-bad)}
@media(max-width:700px){.set-nav{top:70px;border-radius:16px}}
/* --- SLICE 8: motion, focus, final polish --- */
.acc-main a:focus-visible,.acc-main button:focus-visible,.acc-main .btn:focus-visible{outline:2px solid var(--ac-brand2);outline-offset:2px}
.acc-main input:focus-visible,.acc-main select:focus-visible,.acc-main textarea:focus-visible{outline:2px solid var(--ac-brand2);outline-offset:1px}
.af-tab:active{transform:scale(.96)}
.urow:focus-within{border-color:rgba(5,150,105,.45);box-shadow:var(--ac-sh-sm)}
.acc-main .pager.pager-slim .pager-per{display:none}
.dash-recent .drow:last-child{margin-bottom:0}
.acc-main .sec-title{color:var(--ac-ink)}
.acc-main .stat{border-color:var(--ac-line2)}
.acc-main .stat:hover{border-color:rgba(5,150,105,.35)}
@media (prefers-reduced-motion:reduce){
  .urow,.qtile,.drow,.tkt-row,.af-tab,.acc-main .btn,.drow-chev{transition:none!important}
  .urow:hover,.qtile:hover,.drow:hover,.tkt-row:hover{transform:none!important}
}

/* --- ROW SMART: list rows ki labeled-column tarteeb (Orders / Invoices / Downloads / Services) --- */
.urow{display:grid;grid-template-columns:auto minmax(170px,.8fr) 1fr auto;align-items:center;column-gap:20px;row-gap:8px;padding:13px 18px;margin:10px 0}
.urow-thumb{width:76px;height:52px}
.urow-main{min-width:0}
.urow-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.urow-sub{white-space:normal}
.urow-cols{display:flex;justify-content:space-between;gap:16px 30px;min-width:0;align-items:center}
.ucol{display:flex;flex-direction:column;gap:1px;min-width:0;flex:none}
.ucol i{font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ac-mut);white-space:nowrap}
.ucol b{font-size:12.5px;font-weight:500;color:var(--ac-ink);white-space:nowrap}
.ucol.warn b{color:var(--ac-warn)}
.urow-side{display:grid;grid-template-columns:auto auto;align-items:center;justify-items:end;column-gap:10px;row-gap:7px;margin-left:0}
.urow-amt{line-height:1.3}
.urow-actions{grid-column:1/-1}
@media(max-width:1500px){
  .urow{grid-template-columns:auto 1fr auto}
  .urow-cols{grid-column:1/-1;grid-row:2;border-top:1px dashed var(--ac-line2);padding-top:9px}
}
@media(max-width:700px){
  .urow{grid-template-columns:auto 1fr;column-gap:14px}
  .urow-thumb{width:72px;height:48px}
  .urow-cols{grid-column:1/-1;grid-row:auto;flex-wrap:wrap;row-gap:10px}
  .urow-cols .ucol{flex:1 1 40%}
  .urow-side{grid-column:1/-1;display:flex;margin-left:0;width:100%;flex-direction:row;align-items:center;justify-content:space-between;border-top:1px dashed var(--ac-line2);padding-top:11px}
  .dl-urow .urow-side{justify-content:flex-end;gap:14px}
}

/* ============ SUPPORT TICKETS v2 (TK2) — reference rebuild, Teal Corporate ============ */
.acc-main .tk2-headbtn{display:inline-flex;align-items:center;gap:8px}
.acc-main .tk2-hb-ic{display:inline-flex;color:var(--ac-bad)}
.acc-main .tk2-hb-ic svg{width:17px;height:17px}
.acc-main .tk2-back{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:500;color:var(--ac-mut);text-decoration:none;margin:2px 0 14px}
.acc-main .tk2-back:hover{color:var(--ac-brand)}
/* stat cards */
.acc-main .tk2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 18px}
.acc-main .tk2-stat{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:var(--ac-r);padding:20px 22px;box-shadow:var(--ac-sh-sm)}
.acc-main .tk2-stat-tx{display:flex;flex-direction:column;gap:8px}
.acc-main .tk2-stat-lb{font-size:14px;font-weight:500;color:var(--ac-mut)}
.acc-main .tk2-stat-n{font-size:34px;font-weight:800;line-height:1;color:var(--ac-ink);letter-spacing:-.01em}
.acc-main .tk2-stat-ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.acc-main .tk2-stat-ic svg{width:21px;height:21px}
.acc-main .tk2-stat-ic.ic-open{background:#EFE9FD;color:#6D28D9}
.acc-main .tk2-stat-ic.ic-prog{background:#FDEEDC;color:#B45309}
.acc-main .tk2-stat-ic.ic-res{background:#DFF5EC;color:#067647}
/* list card + toolbar */
.acc-main .tk2-card{background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:var(--ac-r);box-shadow:var(--ac-sh-sm);overflow:hidden}
.acc-main .tk2-tools{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--ac-line2);flex-wrap:wrap}
.acc-main .tk2-search{display:flex;align-items:center;gap:9px;border:1px solid #DFE5EA;border-radius:10px;padding:0 13px;height:44px;width:min(340px,100%);background:#fff;color:#8494AB}
.acc-main .tk2-search svg{width:18px;height:18px;flex:none}
.acc-main .tk2-search input{border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--ac-ink);width:100%}
.acc-main .tk2-total{font-size:13.5px;color:var(--ac-mut);font-weight:500}
.acc-main .tk2-tools-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.acc-main .tk2-ibtn{width:42px;height:42px;border:1px solid #DFE5EA;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ac-mut);background:#fff;text-decoration:none;transition:all .18s var(--ac-ease)}
.acc-main .tk2-ibtn svg{width:18px;height:18px}
.acc-main .tk2-ibtn:hover{color:var(--ac-brand);border-color:var(--ac-brand)}
.acc-main .tk2-fbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid #DFE5EA;border-radius:10px;background:#fff;font:inherit;font-size:14px;font-weight:500;color:var(--ac-ink);cursor:pointer;transition:all .18s var(--ac-ease)}
.acc-main .tk2-fbtn svg{width:17px;height:17px}
.acc-main .tk2-fbtn:hover,.acc-main .tk2-fbtn.on{color:var(--ac-brand);border-color:var(--ac-brand)}
.acc-main .tk2-fbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 22px;border-bottom:1px solid var(--ac-line2);background:var(--ac-card2)}
.acc-main .tk2-fbar[hidden]{display:none}
.acc-main .tk2-fbar-lb{font-size:12.5px;font-weight:500;color:var(--ac-mut);text-transform:uppercase;letter-spacing:.05em}
.acc-main .tk2-fchips{display:inline-flex;gap:7px;flex-wrap:wrap}
.acc-main .tk2-fchip{border:1px solid var(--ac-line);background:#fff;border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:500;color:var(--ac-deepest);cursor:pointer;transition:all .16s var(--ac-ease)}
.acc-main .tk2-fchip:hover{border-color:var(--ac-brand);color:var(--ac-brand)}
.acc-main .tk2-fchip.on{background:var(--ac-grad);border-color:transparent;color:#fff}
.acc-main .tk2-fsel{border:1px solid #DFE5EA;border-radius:9px;padding:8px 10px;font:inherit;font-size:13.5px;color:var(--ac-ink);background:#fff}
/* table head + rows */
.acc-main .tk2-thead,.acc-main .tk2-row{display:grid;grid-template-columns:minmax(0,1fr) 168px 118px 104px 84px 24px;align-items:center;gap:14px;padding:13px 22px}
.acc-main .tk2-thead{border-bottom:1px solid var(--ac-line2)}
.acc-main .tk2-th{border:0;background:none;font:inherit;font-size:13.5px;font-weight:500;color:#7A8799;text-align:left;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.acc-main .tk2-th.on{color:var(--ac-ink)}
.acc-main .tk2-sarr{font-size:13px;font-weight:500;color:#A6B2C0}
.acc-main .tk2-th.on .tk2-sarr{color:var(--ac-brand)}
.acc-main span.tk2-th{cursor:default}
.acc-main .tk2-row{text-decoration:none;color:inherit;border-bottom:1px solid var(--ac-line2);transition:background .15s var(--ac-ease)}
.acc-main .tk2-row:last-child{border-bottom:0}
.acc-main .tk2-row:hover{background:var(--ac-tint2)}
.acc-main .tk2-row-ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--ac-tint2);border:1px solid var(--ac-line);color:var(--ac-brand);display:flex;align-items:center;justify-content:center}
.acc-main .tk2-row-ic svg{width:19px;height:19px}
.acc-main .tk2-row-main{display:flex;min-width:0;align-items:center;gap:13px}
.acc-main .tk2-row-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.acc-main .tk2-row-sj{font-size:15px;font-weight:500;color:var(--ac-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-main .tk2-row-no{font-size:13px;color:var(--ac-mut)}
.acc-main .tk2-dept{display:inline-flex;align-items:center;background:#EEF1F4;color:#43536A;font-size:12.5px;font-weight:500;border-radius:8px;padding:5px 10px;white-space:nowrap;justify-self:start}
.acc-main .tk2-chip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:500;border-radius:8px;padding:5px 11px;white-space:nowrap;justify-self:start}
.acc-main .tk2-chip-open{background:#E6F7EF;color:var(--ac-deep)}
.acc-main .tk2-chip-progress{background:var(--ac-warn-bg);color:var(--ac-warn)}
.acc-main .tk2-chip-resolved{background:#E7F6EF;color:#067647}
.acc-main .tk2-row-upd{font-size:13.5px;color:var(--ac-mut);white-space:nowrap}
.acc-main .tk2-row-rep{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ac-mut)}
.acc-main .tk2-row-rep svg{width:16px;height:16px}
.acc-main .tk2-row-chev{color:#B3BEC9;display:flex}
.acc-main .tk2-row-chev svg{width:17px;height:17px}
.acc-main .tk2-nomatch{padding:26px 22px;text-align:center;font-size:14px;color:var(--ac-mut)}
.acc-main .tk2-tfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--ac-line2);font-size:13.5px;color:var(--ac-mut);flex-wrap:wrap}
.acc-main .tk2-lock{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ac-mut);margin:16px 2px 0}
.acc-main .tk2-lock svg{width:15px;height:15px;flex:none}
.acc-main .tk2-empty{padding:52px 24px;text-align:center}
.acc-main .tk2-empty-ic{display:inline-flex;width:62px;height:62px;border-radius:18px;background:var(--ac-tint2);border:1px solid var(--ac-line);color:var(--ac-brand);align-items:center;justify-content:center;margin-bottom:14px}
.acc-main .tk2-empty-ic svg{width:28px;height:28px}
.acc-main .tk2-empty h3{margin:0 0 7px;font-size:19px;color:var(--ac-ink)}
.acc-main .tk2-empty p{margin:0 auto 18px;max-width:420px;font-size:14px;color:var(--ac-mut);line-height:1.55}
/* ticket view */
.acc-main .tk2-vhead{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.acc-main .tk2-vhead h1{margin:0;font-size:27px;font-weight:800;color:var(--ac-ink);letter-spacing:-.01em}
.acc-main .tk2-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:18px;align-items:start}
.acc-main .tk2-banner{display:flex;gap:13px;background:#E9F6EF;border:1px solid var(--ac-line);border-radius:10px;padding:16px 18px;margin-bottom:18px}
.acc-main .tk2-banner-ic{flex:none;color:var(--ac-brand);display:flex}
.acc-main .tk2-banner-ic svg{width:21px;height:21px}
.acc-main .tk2-banner b{display:block;font-size:15px;color:var(--ac-ink);margin-bottom:2px}
.acc-main .tk2-banner span{font-size:13.5px;color:var(--ac-mut)}
.acc-main .tk2-rcard{background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:var(--ac-r);box-shadow:var(--ac-sh-sm);padding:20px 22px;margin-bottom:22px}
.acc-main .tk2-rcard-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.acc-main .tk2-rcard-h h3{margin:0;font-size:16.5px;color:var(--ac-ink)}
.acc-main .tk2-priv{font-size:12.5px;color:var(--ac-mut)}
.acc-main .tk2-rfoot{display:flex;align-items:center;gap:14px;margin-top:13px;flex-wrap:wrap}
.acc-main .tk2-attach{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--ac-ink);cursor:pointer}
.acc-main .tk2-attach svg{width:17px;height:17px;color:var(--ac-mut)}
.acc-main .tk2-attach:hover{color:var(--ac-brand)}
.acc-main .tk2-rfoot .btn{margin-left:auto}
.acc-main .tk2-attlist{display:inline-flex;gap:7px;flex-wrap:wrap}
.acc-main .tk2-closed-t{font-size:14.5px;color:var(--ac-mut);margin:0 0 13px}
.acc-main .tk2-conv-h{display:flex;align-items:center;gap:11px;margin:4px 0 14px}
.acc-main .tk2-conv-h h3{margin:0;font-size:17px;color:var(--ac-ink)}
.acc-main .tk2-count{background:#EEF1F4;color:#43536A;font-size:12.5px;font-weight:500;border-radius:999px;padding:3px 10px}
.acc-main .tk2-newest{margin-left:auto;font-size:13px;color:var(--ac-mut)}
.acc-main .tk2-conv{display:flex;flex-direction:column;gap:13px}
.acc-main .tk2-msg{background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:10px;padding:17px 19px;box-shadow:var(--ac-sh-sm)}
.acc-main .tk2-msg-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acc-main .tk2-ava{flex:none;width:38px;height:38px;border-radius:50%;background:var(--ac-tint);color:var(--ac-deep);font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.acc-main .tk2-ava-adm{background:var(--ac-dark);color:#fff}
.acc-main .tk2-msg-name{font-size:14.5px;font-weight:500;color:var(--ac-ink)}
.acc-main .tk2-you{background:#EEF1F4;color:#43536A;font-size:11.5px;font-weight:500;border-radius:6px;padding:2px 8px}
.acc-main .tk2-via{background:var(--ac-warn-bg);color:var(--ac-warn);font-size:11.5px;font-weight:500;border-radius:6px;padding:2px 8px}
.acc-main .tk2-msg-h time{margin-left:auto;font-size:13px;color:var(--ac-mut)}
.acc-main .tk2-msg-body{margin-top:11px;font-size:14.5px;line-height:1.65;color:#22344F}
.acc-main .tk2-msg-body p{margin:0 0 9px}
.acc-main .tk2-msg-body p:last-child{margin-bottom:0}
.acc-main .tk2-msg-body ul,.acc-main .tk2-msg-body ol{margin:0 0 9px;padding-left:21px}
.acc-main .tk2-msg-body blockquote{margin:0 0 9px;padding:9px 14px;border-left:3px solid var(--ac-brand);background:var(--ac-tint2);border-radius:0 9px 9px 0;color:var(--ac-deepest)}
.acc-main .tk2-msg-body code{background:#EEF4F3;border:1px solid var(--ac-line2);border-radius:6px;padding:1px 6px;font-size:13px}
.acc-main .tk2-msg-body a{color:var(--ac-brand);font-weight:500}
.acc-main .tk2-msg-body hr{border:0;border-top:1px solid var(--ac-line2);margin:11px 0}
.acc-main .tk2-msg-files{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.acc-main .tk2-file-chip{display:inline-flex;align-items:center;gap:7px;background:var(--ac-tint2);border:1px solid var(--ac-line);color:var(--ac-deepest);font-size:13px;font-weight:500;border-radius:9px;padding:6px 11px;text-decoration:none}
.acc-main .tk2-file-chip svg{width:15px;height:15px;color:var(--ac-brand)}
.acc-main .tk2-file-sz{color:var(--ac-mut);font-weight:500}
/* details sidebar */
.acc-main .tk2-dcard{background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:var(--ac-r);box-shadow:var(--ac-sh-sm);padding:21px 22px}
.acc-main .tk2-dcard h3{margin:0 0 16px;font-size:16.5px;color:var(--ac-ink)}
.acc-main .tk2-drow{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.acc-main .tk2-dlb{font-size:13px;color:var(--ac-mut)}
.acc-main .tk2-dlb-up{text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:500}
.acc-main .tk2-dv{font-size:14.5px;font-weight:500;color:var(--ac-ink)}
.acc-main .tk2-did{display:inline-flex;align-items:center;gap:8px}
.acc-main .tk2-copy{border:0;background:none;padding:3px;color:#A6B2C0;cursor:pointer;display:inline-flex;border-radius:6px}
.acc-main .tk2-copy svg{width:16px;height:16px}
.acc-main .tk2-copy:hover{color:var(--ac-brand)}
.acc-main .tk2-copy.ok{color:var(--ac-brand)}
.acc-main .tk2-norel{display:block;background:var(--ac-card2);border:1px solid var(--ac-line2);border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--ac-mut)}
.acc-main .tk2-dperson{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--ac-ink)}
.acc-main .tk2-dperson .tk2-ava{width:34px;height:34px;font-size:12px}
.acc-main .tk2-dsep{border-top:1px solid var(--ac-line2);margin:10px 0}
.acc-main .tk2-dact{margin-top:14px}
.acc-main .tk2-dact .btn{width:100%;justify-content:center}
/* editor */
.acc-main .tk2-editor{border:1px solid #DFE5EA;border-radius:9px;background:#fff;overflow:hidden}
.acc-main .tk2-editor:focus-within{border-color:var(--ac-brand);box-shadow:0 0 0 3px rgba(5,150,105,.13)}
.acc-main .tk2-tb{display:flex;align-items:center;gap:2px;background:var(--ac-card2);border-bottom:1px solid var(--ac-line2);padding:6px 9px;flex-wrap:wrap}
.acc-main .tk2-tbb{border:0;background:transparent;min-width:31px;height:31px;padding:0 6px;border-radius:7px;color:#5B6B82;font:inherit;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.acc-main .tk2-tbb:hover{background:#E7EFEB;color:var(--ac-deep)}
.acc-main .tk2-tbb svg{width:17px;height:17px}
.acc-main .tk2-tbb-b{font-weight:500;font-family:Georgia,serif}
.acc-main .tk2-tbb-i{font-style:italic;font-family:Georgia,serif}
.acc-main .tk2-tb-sep{width:1px;height:19px;background:#DFE5EA;margin:0 6px}
.acc-main .tk2-tb-right{margin-left:auto;display:inline-flex;gap:2px}
.acc-main .tk2-editor textarea{display:block;width:100%;border:0;outline:0;background:transparent;resize:vertical;min-height:112px;padding:14px 15px;font:inherit;font-size:14.5px;line-height:1.6;color:var(--ac-ink)}
/* create page */
.acc-main .tk2-chead{margin-bottom:18px}
.acc-main .tk2-chead h1{margin:0 0 6px;font-size:27px;font-weight:800;color:var(--ac-ink);letter-spacing:-.01em}
.acc-main .tk2-crumb{margin:0;font-size:13.5px;color:var(--ac-mut)}
.acc-main .tk2-crumb a{color:var(--ac-mut);text-decoration:none}
.acc-main .tk2-crumb a:hover{color:var(--ac-brand)}
.acc-main .tk2-crumb b{color:var(--ac-brand);font-weight:500}
.acc-main .tk2-form{max-width:720px;margin:0 auto;background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:var(--ac-r);box-shadow:var(--ac-sh-sm);padding:24px 26px}
.acc-main .tk2-lb{display:block;font-size:13.5px;font-weight:500;color:var(--ac-ink);margin:0 0 15px}
.acc-main span.tk2-lb{margin-bottom:8px}
.acc-main .tk2-lb select,.acc-main .tk2-lb input{display:block;width:100%;margin-top:7px;border:1px solid #DFE5EA;border-radius:10px;padding:11px 13px;font:inherit;font-size:14.5px;font-weight:400;color:var(--ac-ink);background:#fff;outline:0}
.acc-main .tk2-lb select:focus,.acc-main .tk2-lb input:focus{border-color:var(--ac-brand);box-shadow:0 0 0 3px rgba(5,150,105,.13)}
.acc-main .tk2-form .tk2-editor{margin-bottom:15px}
.acc-main .tk2-drop{display:flex;flex-direction:column;align-items:center;gap:5px;background:#F4F7F7;border:1px solid var(--ac-line2);border-radius:10px;padding:27px 18px;text-align:center;cursor:pointer;transition:all .16s var(--ac-ease)}
.acc-main .tk2-drop:hover,.acc-main .tk2-drop.drag{border-color:var(--ac-brand);background:var(--ac-tint2)}
.acc-main .tk2-drop-ic{display:inline-flex;width:42px;height:42px;border-radius:11px;background:#fff;box-shadow:var(--ac-sh-sm);color:var(--ac-mut);align-items:center;justify-content:center;margin-bottom:3px}
.acc-main .tk2-drop-ic svg{width:20px;height:20px}
.acc-main .tk2-drop-t{font-size:14px;font-weight:500;color:var(--ac-ink)}
.acc-main .tk2-drop-s{font-size:12.5px;color:var(--ac-mut)}
.acc-main .tk2-form .tk2-attlist{margin-top:10px}
.acc-main .tk2-attlist .tk2-file-chip{cursor:default}
.acc-main .tk2-submit{display:flex;justify-content:flex-end;margin-top:19px}
.acc-main .tk2-submit .btn{display:inline-flex;align-items:center;gap:8px}
.acc-main .tk2-send-ic{display:inline-flex}
.acc-main .tk2-send-ic svg{width:16px;height:16px}
/* responsive */
@media (max-width:1100px){
  .acc-main .tk2-grid{grid-template-columns:1fr}
  .acc-main .tk2-side{order:2}
}
@media (max-width:760px){
  .acc-main .tk2-stats{grid-template-columns:1fr}
  .acc-main .tk2-thead{display:none}
  .acc-main .tk2-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main chev" "main upd";row-gap:7px}
  .acc-main .tk2-row-main{grid-area:main}
  .acc-main .tk2-row-chev{grid-area:chev}
  .acc-main .tk2-row-upd{grid-area:upd;justify-self:end}
  .acc-main .tk2-dept,.acc-main .tk2-row .tk2-chip,.acc-main .tk2-row-rep{display:none}
  .acc-main .tk2-row-tx .tk2-row-sj{white-space:normal}
  .acc-main .tk2-tools{padding:15px 16px}
  .acc-main .tk2-tfoot{padding:13px 16px}
  .acc-main .tk2-rcard{padding:17px 16px}
  .acc-main .tk2-form{padding:19px 16px}
  .acc-main .tk2-msg-h time{margin-left:0;width:100%}
  .acc-main .tk2-rfoot .btn{margin-left:0;width:100%;justify-content:center}
}

/* ================================================================
   SETTINGS TARTEEB + BTN ORB ICON FIX (26 Oct 2026)
   1) Orb icons: member-teal ki shorthand background rule ne
      .btn::after ka SVG icon wipe kar diya tha — layered
      background (safed icon + teal disc) se restore kiya.
   2) Settings: sticky pill-nav khatam; sections .set-col flex
      columns mein — grid row-span wali khali void khatam.
   3) Email sub-forms ke buttons ko fields se proper fasla.
   ================================================================ */
body.pg-account .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:17px,100% 100%}
body.pg-account form button.btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:17px,100% 100%}
body.pg-account form.form-card:has(textarea) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:17px,100% 100%}
body.pg-account form:has(input[name="action"][value^="2fa"]) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:17px,100% 100%}
body.pg-account form:has(input[name="action"][value="remove"]) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:17px,100% 100%}
body.pg-account form:has(input[name="gateway"]) .btn::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"),linear-gradient(135deg,#14B888,#0D946D 55%,#115E49);background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:17px,100% 100%}
.set-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.set-col>.form-card{margin:0}
.acc-main #set-emails form .btn{margin-top:14px}
@media(max-width:1080px){
  .acc-main .set-grid{display:flex;flex-direction:column}
  .acc-main .set-col{display:contents}
  .acc-main #set-profile{order:1}
  .acc-main #set-emails{order:2}
  .acc-main #set-security{order:3}
  .acc-main #set-danger{order:4}
}

/* ================================================================
   MEMBER DASHBOARD v2 (26 Oct 2026) — full-page premium layout.
   Sirf .db scope; canvas/animation NAHI — static professional design.
   Rang sirf --ac-* tokens se (Teal Corporate).
   ================================================================ */
.db{display:flex;flex-direction:column;gap:20px}
.db h1,.db h2{margin:0}
/* Header — halki tarteeb: page ke apne background par, koi rang-dar band/card NAHI.
   Tarteeb baqi account pages ke app-head jesi: eyebrow + h1 + date + halki chips, right par mamool ke buttons. */
.db-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 26px;flex-wrap:wrap}
.db-head-t{min-width:0}
.db-eyebrow{margin:0 0 3px;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ac-brand)}
.db-head h1{font-size:29px;line-height:1.14;color:var(--ac-ink)}
.db-date{margin:4px 0 0;font-size:13.5px;color:var(--ac-mut)}
.db-chips{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0 0}
.db-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--ac-card);border:1px solid var(--ac-line2);font-size:12px;font-weight:500;color:var(--ac-ink2);box-shadow:var(--ac-sh-sm)}
.db-chip svg{width:13px;height:13px;color:var(--ac-brand)}
.db-chip.ok{background:var(--ac-tint2);border-color:var(--ac-tint);color:var(--ac-brand)}
.db-head-r{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-top:8px}
/* Pending alert */
.db-alert{display:flex;align-items:center;gap:14px;background:var(--ac-warn-bg);border:1px solid #F2DFA7;border-radius:11px;padding:13px 18px;color:#7A4A06}
.db-alert:hover{text-decoration:none}
.db-alert-ic{width:38px;height:38px;flex:none;border-radius:11px;background:#FDE9BE;color:#B45309;display:flex;align-items:center;justify-content:center}
.db-alert-ic svg{width:20px;height:20px}
.db-alert-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.db-alert-tx b{font-size:14.5px;color:#7A4A06}
.db-alert-tx span{font-size:12.5px;color:#9A6A14}
.db-alert-go{font-weight:500;font-size:13.5px;color:#B45309;white-space:nowrap}
/* KPI cards */
.db-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.db-kpi{background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:12px;box-shadow:var(--ac-sh-sm);padding:18px;display:flex;gap:14px;align-items:flex-start}
.db-kpi-ic{width:47px;height:47px;flex:none;border-radius:13px;background:var(--ac-tint2);border:1px solid var(--ac-tint);color:var(--ac-brand);display:flex;align-items:center;justify-content:center}
.db-kpi-ic svg{width:23px;height:23px}
.db-kpi-ic.gold{background:#FBF3D3;border-color:#EFDF9F;color:#A07D10}
.db-kpi-tx{display:flex;flex-direction:column;min-width:0}
.db-kpi-tx b{font-family:Sora,sans-serif;font-size:24px;line-height:1.1;color:var(--ac-ink)}
.db-kpi-lb{font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ac-mut);margin-top:3px}
.db-kpi-sub{font-size:12.5px;color:var(--ac-mut);margin-top:2px}
/* Grid + cards */
.db-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;align-items:start}
.db-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.db-rail{display:flex;flex-direction:column;gap:20px;min-width:0}
.db-card{background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:12px;box-shadow:var(--ac-sh-sm);padding:20px 22px}
.db-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.db-card-h h2{font-size:16.5px;color:var(--ac-ink)}
.db-card-h p{margin:2px 0 0;font-size:12.5px;color:var(--ac-mut)}
.db-link{font-size:13px;font-weight:500;color:var(--ac-brand);white-space:nowrap}
.db-card-tag{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ac-brand);background:var(--ac-tint2);border:1px solid var(--ac-tint);padding:4px 10px;border-radius:999px;white-space:nowrap}
.db-charts{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:20px}
.db-chart-svg{width:100%;height:auto;display:block}
.db-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.db-donut-svg{width:150px;height:150px;flex:none}
.db-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1;min-width:130px}
.db-legend li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ac-ink2)}
.db-legend i{width:10px;height:10px;border-radius:3.5px;flex:none}
.db-legend b{margin-left:auto;font-weight:500;color:var(--ac-ink)}
.db-legend em{font-style:normal;color:var(--ac-mut);font-size:12px;min-width:34px;text-align:right}
.db-empty p{margin:0 0 10px;font-size:13.5px;color:var(--ac-mut);line-height:1.55}
.db-empty.sm p{margin:0}
/* Recent orders — smart rows inside the card, flat with dividers */
.db-recent .urow{margin:0;background:transparent;border:none;border-top:1px solid var(--ac-line2);border-radius:0;box-shadow:none;padding:13px 2px}
.db-recent .db-card-h{margin-bottom:4px}
/* Rail: summary */
.db-sum{list-style:none;margin:0;padding:0}
.db-sum li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--ac-line2)}
.db-sum li:first-child{border-top:none;padding-top:2px}
.db-sum li span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ac-mut);font-weight:500}
.db-sum li span svg{width:16px;height:16px;color:var(--ac-brand)}
.db-sum li b{font-size:13.5px;color:var(--ac-ink);text-align:right;overflow-wrap:anywhere}
.db-sum li b a{color:var(--ac-brand);font-weight:500}
.db-on{font-style:normal;color:var(--ac-brand);font-weight:500}
.db-off{font-style:normal;color:var(--ac-warn);font-weight:500}
/* Rail: downloads */
.db .dl-meter{display:block;height:6px;border-radius:99px;background:var(--ac-line2);overflow:hidden}
.db .dl-meter i{display:block;height:100%;border-radius:99px;background:var(--ac-grad)}
.db-dl{padding:11px 0;border-top:1px solid var(--ac-line2)}
.db-dl:first-of-type{border-top:none;padding-top:2px}
.db-dl-t{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.db-dl-t b{font-size:13.5px;color:var(--ac-ink);min-width:0}
.db-dl-t span{font-size:12.5px;font-weight:500;color:var(--ac-brand);white-space:nowrap}
.db-dl .dl-meter{margin:7px 0 6px}
.db-dl-m{margin:0;font-size:12px;color:var(--ac-mut)}
.db-dl-m em{font-style:normal;font-weight:500;color:var(--ac-ink2)}
.db-dl-m em.warn{color:var(--ac-warn)}
/* Rail: services */
.db-svc{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--ac-line2)}
.db-svc:first-of-type{border-top:none;padding-top:2px}
.db-svc:hover{text-decoration:none}
.db-svc-m{display:flex;flex-direction:column;min-width:0}
.db-svc-m b{font-size:13.5px;color:var(--ac-ink)}
.db-svc-m i{font-style:normal;font-size:12px;color:var(--ac-mut)}
.db-svc-s{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.db-svc-s b{font-size:14px;color:var(--ac-ink)}
/* Rail: support */
.db-open-chip{font-size:12px;font-weight:500;color:var(--ac-warn);background:var(--ac-warn-bg);border:1px solid #F2DFA7;padding:4px 10px;border-radius:999px;white-space:nowrap}
.db-open-chip.none{color:var(--ac-brand);background:var(--ac-tint2);border-color:var(--ac-tint)}
.db-tkt{display:block;padding:11px 13px;border:1px solid var(--ac-line2);border-radius:9px;background:var(--ac-card2);margin-bottom:12px}
.db-tkt:hover{text-decoration:none;border-color:var(--ac-line)}
.db-tkt b{display:block;font-size:13.5px;color:var(--ac-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-tkt span{font-size:12px;color:var(--ac-mut)}
.db-tkt-btn{width:100%;justify-content:center}
/* Rail: quick actions */
.db-qa{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.db-qa a{display:flex;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--ac-line2);border-radius:9px;background:var(--ac-card2);font-size:13.5px;font-weight:500;color:var(--ac-ink);transition:border-color .18s var(--ac-ease),transform .18s var(--ac-ease)}
.db-qa a:hover{text-decoration:none;border-color:var(--ac-brand);transform:translateY(-1px)}
.db-qa svg{width:19px;height:19px;color:var(--ac-brand);flex:none}
/* Responsive */
@media(max-width:1280px){
  .db-charts{grid-template-columns:1fr}
  .db-donut-wrap{justify-content:flex-start}
}
@media(max-width:1080px){
  .db-grid{grid-template-columns:1fr}
  .db-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .db-head h1{font-size:24px}
  .db-head-r{width:100%;padding-top:0}
  .db-head-r .btn{flex:1;justify-content:center}
  .db-kpis{grid-template-columns:1fr 1fr;gap:11px}
  .db-kpi{padding:14px;gap:10px}
  .db-kpi-ic{width:40px;height:40px;border-radius:11px}
  .db-kpi-tx b{font-size:20px}
  .db-card{padding:16px}
  .db-donut-svg{width:132px;height:132px}
  .db-alert-go{display:none}
}

@media print{.acc-foot{display:none!important}}

/* ============================================================
   BTN-TXT-WHITE (27 Oct 2026) — User ki hidayat: kisi bhi page
   par colored (filled/gradient) button ke andar kala/gehra text
   NAHI hoga — font color safed hoga.
   Wajah: member-teal block ki "body.pg-account .btn{color:#0C2319}"
   rule tamam member-area buttons par gehra text de rahi thi.
   Ghost / Google / Light / Outline (halke face wale buttons) is
   se bahar hain — un ka gehra text un ke design ka hissa hai.
   Sold (disabled grey) bhi bahar hai — us par safed text ka
   contrast kharab hota hai.
   ============================================================ */
.btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold),
.btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold):hover,
.btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold):active,
.btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold):focus-visible{color:#fff}
body.pg-account .btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold),
body.pg-account .btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold):hover,
body.pg-account .btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold):active{color:#fff}
.admin-shell .btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold),
.admin-shell .btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold):hover,
.admin-shell .btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold):active,
.admin-main .btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold),
.admin-main .btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold):hover,
.admin-main .btn:not(.btn-ghost):not(.btn-google):not(.btn-light):not(.btn-outline):not(.btn-sold):active{color:#fff}
/* ============================================================
   ICON-COLORS (27 Oct 2026) — support page (tk2-stat) wala andaaz:
   halki tint tile + gehra glyph, poori site ke chhote card-icons par.
   Palette (tk2 family): green #DFF5EC/#067647 · amber #FDEEDC/#B45309 ·
   purple #EFE9FD/#6D28D9 · blue #E4EEFF/#1D4ED8 ·
   rose #FDE8EC/#BE123C · teal #E2F5EA/#059669.
   SIRF rang ki properties — koi size/layout tabdeeli nahi.
   ============================================================ */

/* Member dashboard — KPI tiles: 1 teal, 2 gold (pehle se .gold), 3 blue, 4 purple */
.db-kpis .db-kpi:nth-child(1) .db-kpi-ic{background-color:#E2F5EA;border-color:#BFE3D0;color:#059669}
.db-kpis .db-kpi:nth-child(3) .db-kpi-ic{background-color:#E4EEFF;border-color:#BFD6FF;color:#1D4ED8}
.db-kpis .db-kpi:nth-child(4) .db-kpi-ic{background-color:#EFE9FD;border-color:#D9C6FF;color:#6D28D9}

/* Member dashboard — Quick Actions ke glyphs, har aik ka apna rang */
.db-qa a:nth-child(1) svg{color:#1D4ED8}
.db-qa a:nth-child(2) svg{color:#6D28D9}
.db-qa a:nth-child(3) svg{color:#B45309}
.db-qa a:nth-child(4) svg{color:#BE123C}
.db-qa a:nth-child(5) svg{color:#067647}
.db-qa a:nth-child(6) svg{color:#059669}

/* Member dashboard — Account Summary ke glyphs */
.db-sum li:nth-child(1) span svg{color:#1D4ED8}
.db-sum li:nth-child(2) span svg{color:#B45309}
.db-sum li:nth-child(3) span svg{color:#067647}
.db-sum li:nth-child(4) span svg{color:#BE123C}

/* Member list rows (Orders / Invoices / Downloads / My Services + dashboard Recent):
   thumb tiles ki 6-rangi rotation — green, blue, purple, amber, rose, teal */
.acc-main>.urow:nth-child(6n+1)>.urow-thumb-ic,.db-recent .urow:nth-child(6n+1) .urow-thumb-ic{background-color:#DFF5EC;border-color:#B7E3CC;color:#067647}
.acc-main>.urow:nth-child(6n+2)>.urow-thumb-ic,.db-recent .urow:nth-child(6n+2) .urow-thumb-ic{background-color:#E4EEFF;border-color:#BFD6FF;color:#1D4ED8}
.acc-main>.urow:nth-child(6n+3)>.urow-thumb-ic,.db-recent .urow:nth-child(6n+3) .urow-thumb-ic{background-color:#EFE9FD;border-color:#D9C6FF;color:#6D28D9}
.acc-main>.urow:nth-child(6n+4)>.urow-thumb-ic,.db-recent .urow:nth-child(6n+4) .urow-thumb-ic{background-color:#FDEEDC;border-color:#F3DFA8;color:#B45309}
.acc-main>.urow:nth-child(6n+5)>.urow-thumb-ic,.db-recent .urow:nth-child(6n+5) .urow-thumb-ic{background-color:#FDE8EC;border-color:#F5C2CC;color:#BE123C}
.acc-main>.urow:nth-child(6n+6)>.urow-thumb-ic,.db-recent .urow:nth-child(6n+6) .urow-thumb-ic{background-color:#E2F5EA;border-color:#BFE3D0;color:#059669}

/* Public services page — svc2 tiles ki rotation, tk2 wala tint andaaz
   (gradient ki jagah halki tint + gehra glyph; border nahi, tk2 ki tarah) */
.svc2-grid>.svc-card:nth-child(6n+1) .svc2-ic{background-color:#DFF5EC;background-image:none;color:#067647;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(6,118,71,.14)}
.svc2-grid>.svc-card:nth-child(6n+2) .svc2-ic{background-color:#FDEEDC;background-image:none;color:#B45309;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(180,83,9,.14)}
.svc2-grid>.svc-card:nth-child(6n+3) .svc2-ic{background-color:#EFE9FD;background-image:none;color:#6D28D9;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(109,40,217,.14)}
.svc2-grid>.svc-card:nth-child(6n+4) .svc2-ic{background-color:#E4EEFF;background-image:none;color:#1D4ED8;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(29,78,216,.14)}
.svc2-grid>.svc-card:nth-child(6n+5) .svc2-ic{background-color:#FDE8EC;background-image:none;color:#BE123C;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(190,18,60,.14)}
.svc2-grid>.svc-card:nth-child(6n+6) .svc2-ic{background-color:#E2F5EA;background-image:none;color:#059669;box-shadow:inset 0 1px 0 #fff,0 10px 20px rgba(5,150,105,.14)}

/* Home why-band — dusri tile blue (teal flatten se variety wapas):
   green, blue, purple, amber ki asal tarteeb */
.why-band .why-item:nth-child(2) .why-ic{background-color:#E4EEFF;background-image:none;border-color:#BFD6FF;color:#1D4ED8;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(37,99,235,.14)}

/* Contact page — points ke icons ki rotation */
.ctc-point:nth-child(1) .cp-ic{background-color:#DFF5EC;color:#067647}
.ctc-point:nth-child(2) .cp-ic{background-color:#E4EEFF;color:#1D4ED8}
.ctc-point:nth-child(3) .cp-ic{background-color:#FDEEDC;color:#B45309}

/* Admin dashboard — KPI tiles mein hue variety (gradient + safed glyph wala
   mojooda system barqarar; sirf background-image badli hai):
   row1: teal, blue, amber, purple, green · row2: amber, blue, teal, green, purple, rose */
.admin-main .adm-kpis .stat.adm-kpi:nth-child(2) .stat-ic,body.pg-account .admin-main .adm-kpis .stat.adm-kpi:nth-child(2) .stat-ic{background-image:linear-gradient(135deg,#2563EB,#1D4ED8)}
.admin-main .adm-kpis .stat.adm-kpi:nth-child(4) .stat-ic,body.pg-account .admin-main .adm-kpis .stat.adm-kpi:nth-child(4) .stat-ic{background-image:linear-gradient(135deg,#7C3AED,#6D28D9)}
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-inv,body.pg-account .admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-inv{background-image:linear-gradient(135deg,#2563EB,#1D4ED8)}
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-tpl,body.pg-account .admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-tpl{background-image:linear-gradient(135deg,#7C3AED,#6D28D9)}
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-svc,body.pg-account .admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-svc{background-image:linear-gradient(135deg,#E11D48,#BE123C)}
/* ==== END ICON-COLORS ==== */

/* ============================================================
   TIMELINE-WIDE (27 Oct 2026) — Order/Invoice detail pages:
   Timeline grid wali row se nikal kar neeche full-width
   horizontal strip mein hai; upar sirf 3 cards reh gaye
   (Customer · Payment & Gateway · Invoice), is liye un ki
   height ab apne asal content jitni hai — khali jagah khatam.
   Steps: Ordered > Invoice issued > Paid > Processing >
   Delivered. .now = current step (Processing, jab order Paid
   ho lekin Delivered na ho). Rang .dtl/.tl-step wali family
   se hi hain; admin context ke liye fallback rang bhi diye
   hain taake wahan bhi dots/line durust nazar ayen.
   ============================================================ */
.dtl-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.dtl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dtl-grid{grid-template-columns:1fr}}
.dtl-tl-wide h3{margin-bottom:14px}
.tl-steps.tl-h{flex-direction:row;align-items:flex-start}
.tl-h .tl-step{flex:1 1 0;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:0 8px;min-width:0}
.tl-h .tl-step i{margin-top:0}
.tl-h .tl-step:not(:last-child)::before{bottom:auto;width:auto;background:var(--ac-line2,rgba(6,64,43,.14))}
.dtl-tl-wide .tl-step b{color:var(--ac-ink,#22382E)}
.dtl-tl-wide .tl-step span{color:var(--ac-mut,#5B7267)}
.dtl-tl-wide .tl-step.todo b{color:var(--ac-mut,#5B7267)}
.dtl-tl-wide .tl-step.done i{border-color:var(--ac-brand,#059669);background:var(--ac-brand,#059669)}
.tl-step.now i{border-color:var(--ac-brand,#059669);background:var(--ac-brand,#059669);box-shadow:0 0 0 5px rgba(5,150,105,.16);animation:tlPulse 1.8s ease-out infinite}
.tl-step.now b{color:var(--ac-brand,#059669)}
@keyframes tlPulse{0%{box-shadow:0 0 0 0 rgba(5,150,105,.35)}70%{box-shadow:0 0 0 8px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}
@media (prefers-reduced-motion:reduce){.tl-step.now i{animation:none}}
.tl-note{margin:13px 0 0;font-size:13px}
@media(max-width:560px){
  .tl-steps.tl-h{display:grid;grid-template-columns:1fr 1fr;gap:16px 8px}
  .tl-h .tl-step{padding:0 4px}
  .tl-h .tl-step:not(:last-child)::before{display:none}
  .tl-h .tl-step:last-child:nth-child(odd){grid-column:1/-1}
}

/* === 2026-10-27 MOB-DRAWER-ACCT: mobile (<=860px) par account pages
   (body.pg-account) ke header drawer se PUBLIC menu khatam: Home,
   Shop, Services (poora has-mega span), FAQ, Blog, Coupons, Contact.
   Drawer mein sirf My Account wala hissa rahega. Desktop (>=861px)
   bilkul barqarar: wahan pg-account par public links jaan boojh kar
   dikhte hain. Public pages aur admin (wahan pg-account class hi
   nahi banti) bilkul mehfooz. Cart button (.cart-btn, .nav-link
   nahi hai) is rule se mehfooz hai. */
@media (max-width:860px){
  body.pg-account .main-nav .nav-link.lnk-pub{display:none}
  body.pg-account .main-nav .nav-item.has-mega{display:none}
}

/* === 2026-10-27 SLICE drawer-cart-glass: mobile drawer (<=860) cart bar
   mazeed premium — icon tile ab SOLID nahi, glassy translucent colorful
   hai (emerald glass gradient, safed glyph drop-shadow ke sath, halki
   safed border + upar gloss shine taake transparent ho kar bhi wazeh
   rahe); bar ki satah naram glass tint, raqam (.cp-total) numaya plain text (user islah 27 Oct: pill khatam)
   mein. Sirf dikhai (CSS) — cart ka link/total/badge logic barqarar.
   Desktop header cart aur admin (cart display:none) bilkul untouched;
   is block mein display set NAHI hai. body.pg-account wali duplicate
   lines is liye hain ke Emerald zone ki pg-account cart rules (jo
   specificity mein aage hain) member drawer par bhi yehi design harayen
   nahi — public drawer par pehli lines hi kafi hain. === */
@media (max-width:860px){
  .main-nav>a.cart-btn{gap:13px;margin:12px 0 4px;padding:13px 18px;border-radius:18px;background:linear-gradient(120deg,rgba(16,185,129,.05),rgba(5,150,105,.07) 55%,rgba(4,120,87,.09));border:1px solid rgba(4,120,87,.20);box-shadow:0 14px 28px -14px rgba(3,25,17,.22),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -10px 18px -12px rgba(4,120,87,.10);-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);transition:transform .16s ease,box-shadow .2s ease}
  .main-nav>a.cart-btn:active{transform:scale(.98)}
  .main-nav>a.cart-btn .cb-ico{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,rgba(52,211,153,.78),rgba(16,185,129,.55) 45%,rgba(5,150,105,.66) 80%,rgba(4,120,87,.72));border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -9px 14px -6px rgba(3,60,40,.45),0 10px 18px -8px rgba(4,120,87,.55);color:#fff;-webkit-backdrop-filter:blur(4px) saturate(1.4);backdrop-filter:blur(4px) saturate(1.4)}
  .main-nav>a.cart-btn .cb-ico::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 52%,rgba(255,255,255,0) 70%);pointer-events:none}
  .main-nav>a.cart-btn .cb-ico svg{width:21px;height:21px;filter:drop-shadow(0 1px 2px rgba(3,50,34,.5))}
  .main-nav>a.cart-btn .cart-badge{top:-7px;right:-7px;box-shadow:0 0 0 2px #fff,0 4px 8px -2px rgba(3,25,17,.4)}
  .main-nav>a.cart-btn .cb-label{color:#064E3B}
  .main-nav>a.cart-btn .cp-total{font-size:15.5px;color:#047857;background:transparent;border:none;padding:0}
  .main-nav>a.cart-btn.active .cb-ico{background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.14) 60%,rgba(255,255,255,.22));border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 16px -8px rgba(3,40,28,.5)}
  .main-nav>a.cart-btn.active .cp-total{color:#fff;background:transparent;border:none}
  body.pg-account .main-nav>a.cart-btn{background:linear-gradient(120deg,rgba(16,185,129,.05),rgba(5,150,105,.07) 55%,rgba(4,120,87,.09));border:1px solid rgba(4,120,87,.20);box-shadow:0 14px 28px -14px rgba(3,25,17,.22),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -10px 18px -12px rgba(4,120,87,.10)}
  body.pg-account .main-nav>a.cart-btn .cb-ico{background:linear-gradient(135deg,rgba(52,211,153,.78),rgba(16,185,129,.55) 45%,rgba(5,150,105,.66) 80%,rgba(4,120,87,.72));border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -9px 14px -6px rgba(3,60,40,.45),0 10px 18px -8px rgba(4,120,87,.55)}
  body.pg-account .main-nav>a.cart-btn .cb-label{color:#064E3B}
  body.pg-account .main-nav>a.cart-btn .cp-total{color:#047857}
  body.pg-account .main-nav>a.cart-btn.active{background:linear-gradient(120deg,#10B981,#059669 55%,#047857);border-color:transparent}
  body.pg-account .main-nav>a.cart-btn.active .cb-ico{background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.14) 60%,rgba(255,255,255,.22));border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 16px -8px rgba(3,40,28,.5)}
  body.pg-account .main-nav>a.cart-btn.active .cp-total{color:#fff}
}
/* 2026-10-27 ISLAH (user): markup se "Cart" label khatam; .cp-total ki pill
   (bg/border/padding) khatam - raqam plain bold text; main bar mazeed
   transparent (gradient .10/.13/.17 -> .05/.07/.09, border .30 -> .20,
   shadow naram, blur 8px -> 12px). Icon tile ki glassy shakl barqarar. */
/* END SLICE drawer-cart-glass */
/* === 2026-10-27 DTL-ITEMS-WIDE: invoice/order detail ka items table
   ab poori row (full-width) hai. Global .tbl{display:block} is table
   ko content-width par simta deta tha — Price column Item ke sath
   aage atak jata tha aur row ka baqi hissa khali rehta tha. Ab ye
   table asal table layout mein hai: Item column baqi tamam jagah
   leta hai, Price bilkul end par right-aligned hai. Admin detail
   mein Downloads column bhi end par compact rehta hai. Mobile par
   bhi yehi tarteeb hai aur Item ka naam saaf wrap hota hai. === */
.dtl-items .tbl,.admin-main .dtl-items .tbl{display:table;width:100%;table-layout:fixed}
.dtl-items .tbl th:nth-child(2),.dtl-items .tbl td:nth-child(2){width:160px;text-align:right}
.admin-main .dtl-items .tbl th:nth-child(2),.admin-main .dtl-items .tbl td:nth-child(2){width:140px}
.admin-main .dtl-items .tbl th:nth-child(3),.admin-main .dtl-items .tbl td:nth-child(3){width:120px;text-align:right}
@media(max-width:860px){
.dtl-items .tbl th,.dtl-items .tbl td{white-space:normal}
}
@media(max-width:560px){
.dtl-items .tbl th:nth-child(2),.dtl-items .tbl td:nth-child(2){width:110px}
.admin-main .dtl-items .tbl th:nth-child(3),.admin-main .dtl-items .tbl td:nth-child(3){width:92px}
}

/* ============================================================
   TIMELINE-DOTS-LINES (27 Oct 2026) - wide timeline (member
   invoice detail + admin order detail) ke dots ab motay/wazeh
   (13px -> 20px, halki ring ke sath). Lines ka nizam: har
   segment us step ke ::before se banta hai jis se wo shuru
   hota hai - done step ke baad SOLID brand line (3px),
   now/todo step ke baad DOTTED halki line. Yani line wahan
   tak solid jahan tak status pohnch chuka hai, aage dotted.
   Sath hi dashboard Recent Orders ke liye compact .tl-mini
   timeline (har row ke andar usi order ki asal halat).
   ============================================================ */
.tl-h .tl-step i{width:20px;height:20px;border-width:3px;box-shadow:0 1px 4px rgba(6,64,43,.18)}
.tl-h .tl-step.done i{box-shadow:0 0 0 4px rgba(5,150,105,.13),0 1px 4px rgba(6,64,43,.18)}
.tl-h .tl-step.todo i{border-color:#A9BDB2;background:#fff}
.tl-h .tl-step:not(:last-child)::before{left:calc(50% + 16px);right:calc(-50% + 16px);top:10px;transform:translateY(-50%);height:3px;border-radius:2px}
.tl-h .tl-step.done:not(:last-child)::before{background:var(--ac-brand,#059669)}
.tl-h .tl-step.now:not(:last-child)::before,.tl-h .tl-step.todo:not(:last-child)::before{background-color:transparent;background-image:radial-gradient(circle,rgba(91,114,103,.65) 1.5px,transparent 1.7px);background-size:9px 3px;background-repeat:repeat-x;background-position:center}
/* --- Dashboard Recent Orders: compact timeline strip --- */
.db-urow .db-row-tl{grid-column:1/-1;border-top:1px dashed var(--ac-line2);padding-top:11px}
.tl-mini .tl-step{gap:5px;padding:0 3px}
.tl-mini .tl-step i{width:15px;height:15px;border-width:3px;box-shadow:none}
.tl-mini .tl-step.done i{box-shadow:0 0 0 3px rgba(5,150,105,.12)}
.tl-mini .tl-step b{font-size:11.5px;line-height:1.25}
.tl-mini .tl-step span{font-size:10.5px;line-height:1.3}
.tl-mini .tl-step:not(:last-child)::before{left:calc(50% + 11px);right:calc(-50% + 11px);top:8px;display:block}
@media(max-width:560px){
  .tl-steps.tl-h.tl-mini{display:flex;flex-direction:row;align-items:flex-start}
  .tl-mini .tl-step{padding:0 2px}
  .tl-mini .tl-step b{font-size:10.5px}
  .tl-mini .tl-step span{font-size:9.5px}
}
/* === END TIMELINE-DOTS-LINES === */

/* === 2026-10-27 SLICE drawer-cart-simple: drawer cart bar ki apni bg
   pill/rang mukammal khatam (user: "bg pill and bg color remove kr do
   card ka - simple he thik h"). Bar ab bilkul transparent hai - koi
   background, border, shadow ya backdrop blur nahi; drawer ki safed
   satah par sirf glassy icon tile + plain amount nazar ata hai.
   Active halat (cart page) par bhi bar wesa hi simple hai: wahan ke
   liye bani safed-glass tile aur safed amount wali shaklein (jo solid
   sabz bar ke liye theen) bhi aam halat par wapas kar di hain, warna
   transparent bar par icon/amount nazar hi nahi ate. Icon tile ki
   glassy shakl aur tamam cart logic bilkul barqarar. === */
@media (max-width:860px){
  .main-nav>a.cart-btn,
  body.pg-account .main-nav>a.cart-btn,
  .main-nav>a.cart-btn.active,
  body.pg-account .main-nav>a.cart-btn.active{
    background:none;border:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .main-nav>a.cart-btn.active .cb-ico,
  body.pg-account .main-nav>a.cart-btn.active .cb-ico{
    background:linear-gradient(135deg,rgba(52,211,153,.78),rgba(16,185,129,.55) 45%,rgba(5,150,105,.66) 80%,rgba(4,120,87,.72));
    border:1px solid rgba(255,255,255,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -9px 14px -6px rgba(3,60,40,.45),0 10px 18px -8px rgba(4,120,87,.55);
  }
  .main-nav>a.cart-btn.active .cp-total{color:#047857}
  body.pg-account .main-nav>a.cart-btn.active .cp-total{color:#047857}
}
/* END SLICE drawer-cart-simple */

/* === 2026-10-27 SVC-DISCUSS: service order discussion page v2 + secure attachments ===
   Support (TK2) wale standard par: summary card, brief card, chat cards,
   composer with attach. Rang: Emerald Signature + ICON-COLORS palette. */
.svd-top{background:var(--ac-card,#fff);border:1px solid var(--ac-line,#DCE8E2);border-radius:var(--ac-r,16px);box-shadow:var(--ac-sh-sm,0 1px 3px rgba(4,47,46,.06));padding:18px 20px 6px;margin-bottom:16px}
.svd-meta{display:flex;gap:12px 30px;flex-wrap:wrap;align-items:center}
.svd-mi{display:inline-flex;flex-direction:column;gap:1px}
.svd-mi i{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--ac-mut,#64748B)}
.svd-mi b{font-size:15px;color:var(--ac-ink,#0B2530)}
.svd-status{margin-left:auto;background:#FDEEDC;color:#B45309;font-size:12.5px;font-weight:500;border-radius:99px;padding:5px 13px}
.svd-top .svc-steps{border:0;box-shadow:none;background:transparent;border-radius:0;padding:16px 2px 12px;margin:6px 0 0;border-top:1px solid var(--ac-line,#DCE8E2)}
.svd-top .svc-step i{width:17px;height:17px;border-width:3px}
.svd-top .svc-step::before{top:8px}
.svd-adm-t{margin:0 0 10px;font-size:17px;color:var(--ac-ink,#0B2530)}
.svd-brief{background:var(--ac-card,#fff);border:1px solid var(--ac-line,#DCE8E2);border-radius:var(--ac-r,16px);box-shadow:var(--ac-sh-sm,0 1px 3px rgba(4,47,46,.06));padding:17px 20px;margin-bottom:18px}
.svd-brief-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.svd-brief-h svg{width:19px;height:19px;color:var(--ac-brand,#059669)}
.svd-brief-h h3{margin:0;font-size:15.5px;color:var(--ac-ink,#0B2530)}
.svd-brief .desc{font-size:14.5px;line-height:1.65;color:#22344F;white-space:normal}
.svd-dl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--ac-tint2,#EAF6F0);border:1px solid var(--ac-line,#DCE8E2);border-radius:var(--ac-r,16px);padding:14px 18px;margin-bottom:18px;font-weight:500;color:var(--ac-deepest,#064E3B)}
.svd-sec-h p{margin:4px 0 0;color:var(--ac-mut,#64748B);font-size:14px}
.svd-thread{display:flex;flex-direction:column;gap:12px;margin:14px 0 16px}
.svd-empty{border:1.5px dashed var(--ac-line2,#CBD5D1);border-radius:10px;padding:22px;text-align:center;color:var(--ac-mut,#64748B);font-size:14.5px;background:var(--ac-card,#fff)}
.svd-msg{background:var(--ac-card,#fff);border:1px solid var(--ac-line2,#DCE8E2);border-radius:10px;padding:16px 19px;box-shadow:var(--ac-sh-sm,0 1px 3px rgba(4,47,46,.06))}
.svd-msg.team{border-left:4px solid var(--ac-brand,#059669)}
.svd-msg.member{border-left:4px solid #1D4ED8}
.svd-msg-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.svd-ava{display:inline-flex;width:38px;height:38px;border-radius:11px;align-items:center;justify-content:center;flex:none}
.svd-ava svg{width:20px;height:20px}
.svd-ava.team{background:linear-gradient(135deg,#10B981,#047857);color:#fff;box-shadow:0 6px 12px -6px rgba(4,120,87,.55)}
.svd-ava.member{background:#E4EEFF;color:#1D4ED8}
.svd-msg-id{display:inline-flex;flex-direction:column;line-height:1.25}
.svd-msg-id b{font-size:14.5px;color:var(--ac-ink,#0B2530)}
.svd-msg-id small{font-size:12px;color:var(--ac-mut,#64748B);font-weight:500}
.svd-msg-h time{margin-left:auto;font-size:12.5px;color:var(--ac-mut,#64748B)}
.svd-msg-body{margin-top:11px;font-size:14.5px;line-height:1.65;color:#22344F;overflow-wrap:break-word}
.svd-files{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.svd-thumb{display:inline-flex;flex-direction:column;gap:5px;text-decoration:none;max-width:136px}
.svd-thumb img{width:136px;height:98px;object-fit:cover;border-radius:11px;border:1px solid var(--ac-line,#DCE8E2);display:block}
.svd-thumb span{font-size:11.5px;font-weight:500;color:var(--ac-mut,#64748B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:136px}
.svd-chip{display:inline-flex;align-items:center;gap:8px;background:var(--ac-tint2,#F2F8F3);border:1px solid var(--ac-line,#DCE8E2);color:var(--ac-deepest,#064E3B);font-size:13px;font-weight:500;border-radius:10px;padding:7px 12px;text-decoration:none;max-width:100%}
.svd-chip-ic{display:inline-flex;flex:none}
.svd-chip-ic svg{width:16px;height:16px;color:var(--ac-brand,#059669)}
.svd-chip-ic.x-pdf svg{color:#BE123C}
.svd-chip-ic.x-doc svg,.svd-chip-ic.x-docx svg{color:#1D4ED8}
.svd-chip-ic.x-xls svg,.svd-chip-ic.x-xlsx svg{color:#067647}
.svd-chip-ic.x-ppt svg,.svd-chip-ic.x-pptx svg{color:#B45309}
.svd-chip-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.svd-chip-s{color:var(--ac-mut,#64748B);font-size:12px;flex:none}
.svd-composer{background:var(--ac-card,#fff);border:1px solid var(--ac-line,#DCE8E2);border-radius:var(--ac-r,16px);box-shadow:var(--ac-sh-sm,0 1px 3px rgba(4,47,46,.06));padding:17px 19px;margin-bottom:20px}
.svd-comp-lb{display:block}
.svd-comp-lb>span{display:block;font-size:13px;font-weight:500;color:var(--ac-ink,#0B2530);margin-bottom:7px}
.svd-comp-lb textarea{width:100%;box-sizing:border-box;border:1px solid var(--ac-line2,#CBD5D1);border-radius:12px;padding:12px 14px;font:inherit;font-size:14.5px;line-height:1.55;background:#FBFDFB;resize:vertical;min-height:96px}
.svd-comp-lb textarea:focus{outline:2px solid rgba(5,150,105,.35);border-color:var(--ac-brand,#059669)}
.svd-comp-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:13px}
.svd-attach{display:inline-flex;align-items:center;gap:8px;background:var(--ac-tint2,#EAF6F0);border:1px solid var(--ac-line,#DCE8E2);color:var(--ac-deepest,#064E3B);font-size:13.5px;font-weight:500;border-radius:10px;padding:9px 15px;cursor:pointer;transition:all .15s ease}
.svd-attach:hover{border-color:var(--ac-brand,#059669);background:#DFF5EC}
.svd-attach svg{width:16px;height:16px;color:var(--ac-brand,#059669)}
.svd-comp-hint{font-size:12.5px;color:var(--ac-mut,#64748B)}
.svd-send{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.svd-send svg{width:16px;height:16px}
.svd-attlist{display:flex;gap:8px;flex-wrap:wrap}
.svd-attlist:not(:empty){margin-top:12px}
.svd-att-chip{display:inline-flex;align-items:center;gap:7px;background:#EFE9FD;color:#4C1D95;font-size:12.5px;font-weight:500;border-radius:9px;padding:5px 6px 5px 11px;max-width:100%}
.svd-att-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}
.svd-att-x{border:0;background:rgba(76,29,149,.12);color:#4C1D95;width:20px;height:20px;border-radius:6px;font-size:14px;line-height:1;cursor:pointer;flex:none}
.svd-att-x:hover{background:rgba(76,29,149,.25)}
@media (max-width:640px){
  .svd-top{padding:15px 15px 4px}
  .svd-status{margin-left:0}
  .svd-msg{padding:14px 14px}
  .svd-msg-h time{margin-left:0;width:100%;padding-left:49px;margin-top:-6px}
  .svd-composer{padding:14px 14px}
  .svd-send{margin-left:0;width:100%;justify-content:center}
  .svd-thumb img{width:104px;height:76px}
  .svd-thumb{max-width:104px}
  .svd-thumb span{max-width:104px}
  .svd-chip-n{max-width:170px}
  .svd-top .svc-steps{overflow-x:auto}
}
/* === END SVC-DISCUSS === */

/* --- ROW-WIDE-SPREAD: bari screens (>1500px) par list rows ki saaf taqseem — title wali jagah hadd band, labeled columns poori chaurai mein phaile hue, price cluster se wazeh fasla (Services/Orders/Invoices/Downloads) --- */
@media(min-width:1501px){
  .acc-main>.urow{grid-template-columns:auto minmax(190px,330px) 1fr auto;column-gap:26px}
  .acc-main>.urow .urow-cols{padding-right:10px}
}
/* === END ROW-WIDE-SPREAD === */

/* ============================================================
   CPN-TBL-FIX — Admin Coupons rows premium (27 Oct 2026)
   Asal kharabiyan jo live render par pakri gayin:
   (1) Edit button ghayb tha — .tbl td:last-child>a ka purana pill
       rule (halki mint satah) .btn ki safed tehreer ke sath mil
       kar safed-par-halka bana deta tha, Edit parha hi nahi jata tha.
   (2) Delete ka surkh rang admin .btn gloss (emerald background-
       image, zyada specificity) ke neeche dab gaya tha — khatarnak
       button bilkul aam sabz button jesa lagta tha.
   (3) Dono action controls ki unchai/alignment mukhtalif thi,
       is liye har data row 85px (mobile 77px) unchi thi.
   Ye block sirf .cpn-tbl (Coupons table) tak mehdood hai;
   koi data ya coupon logic tabdeel nahi — sirf presentation.
   ============================================================ */
.admin-main .tbl.cpn-tbl .cpn-code b{display:inline-block;padding:4px 11px;border-radius:8px;background:#E7F4EC;border:1px solid rgba(5,150,105,.30);color:#065F46;font-weight:500;letter-spacing:.03em;white-space:nowrap}
.admin-main .tbl.cpn-tbl .cpn-disc{font-weight:500;color:#047857;font-size:15px;white-space:nowrap}
.admin-main .tbl.cpn-tbl .cpn-cond{color:#5F7268}
.admin-main .tbl.cpn-tbl td.cpn-act{white-space:nowrap}
.admin-main .tbl.cpn-tbl .cpn-act form{display:inline-flex;vertical-align:middle}
.admin-main .tbl.cpn-tbl .cpn-act .btn{display:inline-flex;align-items:center;justify-content:center;height:32px;min-height:32px;padding:0 15px;font-size:13px;vertical-align:middle}
.admin-main .tbl.cpn-tbl td.cpn-act>a.btn{background:#fff;background-image:none;border:1.5px solid rgba(5,150,105,.45);color:#065F46!important;box-shadow:none}
.admin-main .tbl.cpn-tbl td.cpn-act>a.btn:hover{background:#EAF6F0;border-color:rgba(5,150,105,.7);color:#065F46!important}
.admin-main .tbl.cpn-tbl .cpn-act .btn-danger{background:linear-gradient(135deg,#EF4444,#DC2626 60%,#B91C1C);background-image:linear-gradient(135deg,#EF4444,#DC2626 60%,#B91C1C);border:1.5px solid transparent;color:#fff;box-shadow:0 8px 16px -8px rgba(220,38,38,.5)}
.admin-main .tbl.cpn-tbl .cpn-act .btn-danger:hover{filter:brightness(1.07);color:#fff}
@media (max-width:860px){
  .admin-main .tbl.cpn-tbl .cpn-act .btn{height:30px;min-height:30px;padding:0 12px;font-size:12.5px}
  .admin-main .tbl.cpn-tbl .cpn-code b{padding:3px 9px}
}
/* === END CPN-TBL-FIX === */

/* ============================================================
   ADM-TOKENS (27 Oct 2026): admin palette Emerald Signature par
   ikatha (audit A1-A6, K1, N1-N3, C5). Scope: sirf admin pages —
   body par pg-account NAHI hota sirf admin par (index.php body
   class: account routes = pg-account, admin routes = sirf
   app-full). Member/public pages is block se bilkul ghair-
   mutasir. Sirf rang/token tabdeeli — layout bilkul barqarar.
   Emerald Signature: bg #F2F8F3 - surface #fff - accent #059669
   - deep #064E3B - gradient #047857>#059669>#10B981 - zebra
   #DAEDE7 (zebra pehle se live hai, yahan nahi chhua gaya).
   ============================================================ */
body:not(.pg-account) .admin-shell{--adm-line:rgba(6,64,43,.14);--adm-line2:rgba(6,64,43,.08);--adm-ink:#064E3B;--adm-mut:#5B7269;--adm-grad:linear-gradient(120deg,#047857,#059669 55%,#10B981);--adm-gold:linear-gradient(90deg,#047857,#10B981);--adm-sh:0 20px 38px -24px rgba(3,40,26,.28)}
/* --- sidebar: bg member wali mint teh, glow emerald, active Emerald gradient (arrow ::after barqarar) --- */
body:not(.pg-account) .admin-shell .admin-side{background:linear-gradient(168deg,#EDF7F2 0%,#E1F1EA 55%,#F6FAF3 100%);border-color:rgba(6,64,43,.12);box-shadow:0 24px 40px -24px rgba(3,40,26,.28)}
body:not(.pg-account) .admin-shell .admin-side::after{background:radial-gradient(420px 200px at 85% -5%,rgba(16,185,129,.10),transparent 60%),radial-gradient(360px 260px at -10% 100%,rgba(5,150,105,.12),transparent 60%)}
body:not(.pg-account) .admin-shell .admin-side a.anav:hover{background:rgba(5,150,105,.10);color:#064E3B}
body:not(.pg-account) .admin-shell .admin-side a.anav.on{background:linear-gradient(120deg,#047857,#059669 55%,#10B981);color:#fff;box-shadow:0 12px 22px -10px rgba(4,120,87,.55)}
body:not(.pg-account) .admin-shell .anav-pill{background:linear-gradient(120deg,rgba(5,150,105,.14),rgba(16,185,129,.10));box-shadow:inset 0 0 0 1px rgba(5,150,105,.28)}
body:not(.pg-account) .admin-shell .anav-group{color:#8A9A93}
body:not(.pg-account) .admin-shell .admin-side a.anav + .anav-group{border-top:1px solid rgba(6,64,43,.13)}
body:not(.pg-account) .admin-shell .aside-card{border-top:1px solid rgba(6,64,43,.13)}
body:not(.pg-account) .admin-shell .aside-card .ac-meta b{color:#064E3B}
body:not(.pg-account) .admin-shell .aside-card .ac-meta small{color:#5B7269}
body:not(.pg-account) .admin-shell .aside-card .ac-ava{box-shadow:0 8px 18px -6px rgba(4,120,87,.5)}
body:not(.pg-account) .admin-side{scrollbar-color:#C9D8D2 transparent}
body:not(.pg-account) .admin-side::-webkit-scrollbar-thumb{background:#C9D8D2}
/* --- content sheet: gold glow khatam, sirf emerald teh (A3); title patti emerald (A4) --- */
body:not(.pg-account) .admin-main::before{background:radial-gradient(560px 240px at 92% -4%,rgba(16,185,129,.10),transparent 60%),radial-gradient(480px 220px at -6% 108%,rgba(5,150,105,.07),transparent 60%)}
body:not(.pg-account) .admin-main h1::after{background:linear-gradient(90deg,#064E3B,#059669 55%,#10B981)}
body:not(.pg-account) .admin-main h3 small a{background:#DFF5EC;border:1px solid #B7E3CC;color:#065F46}
/* --- header / links / accents --- */
body:not(.pg-account) .adm-view{color:#064E3B}
body:not(.pg-account) .adm-link{color:#047857}
body:not(.pg-account) .admin-main .tbl td a{color:#047857}
body:not(.pg-account) .admin-main .tbl td:last-child a:not(.btn){color:#064E3B;border:1px solid rgba(6,64,43,.22)}
/* --- bulk count + on-halton ke teal saaye emerald par (A6 + token saaye) --- */
body:not(.pg-account) .admin-main .bulk-bar.has-sel .bulk-count{box-shadow:0 10px 18px -8px rgba(4,120,87,.55)}
body:not(.pg-account) .admin-main .adm-seg a.on{box-shadow:0 6px 14px -6px rgba(4,120,87,.55)}
body:not(.pg-account) .admin-main .pager .pg.on{box-shadow:0 8px 16px -8px rgba(4,120,87,.55)}
body:not(.pg-account) .admin-main .tkt-filters .tf.on{box-shadow:0 8px 16px -8px rgba(4,120,87,.55)}
body:not(.pg-account) .admin-main .tbl td:last-child a:not(.btn):hover{box-shadow:0 8px 16px -8px rgba(4,120,87,.55)}
/* --- settings tabs ki active gradient (K1) — dono tab systems --- */
body:not(.pg-account) .sett-tab.on{background:linear-gradient(135deg,#047857,#059669 55%,#10B981);box-shadow:0 6px 16px -6px rgba(4,120,87,.55)}
body:not(.pg-account) .set-tab.on{background:linear-gradient(135deg,#047857,#059669 55%,#10B981);box-shadow:0 8px 18px -8px rgba(4,120,87,.55)}
/* --- form-card: upar ki patti + h3 kinara emerald (N2) --- */
body:not(.pg-account) .admin-main .form-card::before{background:linear-gradient(90deg,#047857,#10B981 55%,#059669)}
body:not(.pg-account) .admin-main .form-card h3{border-left-color:#059669}
body:not(.pg-account) .adm-login-wrap .form-card::before{background:linear-gradient(90deg,#047857,#10B981 55%,#059669)}
/* --- forms: safed inputs + aik hi Emerald focus har jagah (N1), checkbox accent (N3) --- */
body:not(.pg-account) .admin-shell form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),body:not(.pg-account) .admin-shell form textarea,body:not(.pg-account) .admin-shell form select{background:#fff}
body:not(.pg-account) .admin-shell form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,body:not(.pg-account) .admin-shell form textarea:focus,body:not(.pg-account) .admin-shell form select:focus{background:#fff;border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.20)}
body:not(.pg-account) .admin-main .form-card input:focus,body:not(.pg-account) .admin-main .form-card textarea:focus,body:not(.pg-account) .admin-main .form-card select:focus{border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.20)}
body:not(.pg-account) .admin-main .shop-tools select:focus,body:not(.pg-account) .admin-main .shop-tools input:focus{border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.20)}
body:not(.pg-account) .admin-main .bulk-bar select,body:not(.pg-account) .admin-main .shop-tools select,body:not(.pg-account) .admin-main .bulk-bar input[type="text"]{background:#fff;border:1.5px solid rgba(6,64,43,.18)}
body:not(.pg-account) .admin-main .form-card .check input{accent-color:#059669}
body:not(.pg-account) .admin-main .gw-opt{border-color:rgba(6,64,43,.2)}
body:not(.pg-account) .admin-main .gw-opt:hover{border-color:rgba(6,64,43,.45)}
/* --- tables: drag handle + row hover kinara + scrollbars emerald (C5) --- */
body:not(.pg-account) .admin-main .drag-h{color:#059669}
body:not(.pg-account) .admin-main .tbl tr:hover td:first-child{box-shadow:inset 3px 0 0 #059669}
body:not(.pg-account) .admin-main .tbl-scroll{scrollbar-color:rgba(5,150,105,.45) transparent}
body:not(.pg-account) .admin-main .tbl-scroll::-webkit-scrollbar-thumb{background:rgba(5,150,105,.4)}
@media (max-width:860px){
  body:not(.pg-account) .admin-main .tbl{scrollbar-color:rgba(5,150,105,.45) transparent}
  body:not(.pg-account) .admin-main .tbl::-webkit-scrollbar-thumb{background:rgba(5,150,105,.4)}
}
/* === END ADM-TOKENS === */

/* ============================================================
   ADM-DASH (27 Oct 2026) — Admin dashboard member premium
   standard par: KPI icon tiles ICON-COLORS pastel system
   (halki tint tile + rang-dar glyph), stat numbers saade ink,
   QA badge + chart seg toggle Emerald, tooltip/legend dots
   Emerald Signature se ham-ahang, KPI card ki upar wali
   patti + hover glow emerald. SIRF rang/roop — data aur
   layout bilkul barqarar.
   Palette: green #DFF5EC/#B7E3CC/#067647 · teal-tint
   #E2F5EA/#BFE3D0/#059669 · blue #E4EEFF/#BFD6FF/#1D4ED8 ·
   purple #EFE9FD/#D9C6FF/#6D28D9 · amber #FDEEDC/#F3DFA8/
   #B45309 · rose #FDE8EC/#F5C2CC/#BE123C.
   ============================================================ */
/* --- KPI tiles (row 1) --- */
.admin-main .adm-kpi .stat-ic{border-radius:13px}
.admin-main .adm-kpis .stat.adm-kpi:nth-child(1) .stat-ic{background:#E2F5EA;background-image:none;border:1.5px solid #BFE3D0;color:#059669;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(5,150,105,.14)}
.admin-main .adm-kpis .stat.adm-kpi:nth-child(2) .stat-ic{background:#E4EEFF;background-image:none;border:1.5px solid #BFD6FF;color:#1D4ED8;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(29,78,216,.14)}
.admin-main .adm-kpis .stat.adm-kpi:nth-child(3) .stat-ic{background:#DFF5EC;background-image:none;border:1.5px solid #B7E3CC;color:#067647;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(6,118,71,.14)}
.admin-main .adm-kpis .stat.adm-kpi:nth-child(4) .stat-ic{background:#FDEEDC;background-image:none;border:1.5px solid #F3DFA8;color:#B45309;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(180,83,9,.14)}
.admin-main .adm-kpis .stat.adm-kpi:nth-child(5) .stat-ic{background:#EFE9FD;background-image:none;border:1.5px solid #D9C6FF;color:#6D28D9;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(109,40,217,.14)}
/* --- KPI tiles (row 2) --- */
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-pend{background:#FDEEDC;background-image:none;border:1.5px solid #F3DFA8;color:#B45309;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(180,83,9,.14)}
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-inv{background:#FDE8EC;background-image:none;border:1.5px solid #F5C2CC;color:#BE123C;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(190,18,60,.14)}
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-tkt{background:#EFE9FD;background-image:none;border:1.5px solid #D9C6FF;color:#6D28D9;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(109,40,217,.14)}
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-usr{background:#E4EEFF;background-image:none;border:1.5px solid #BFD6FF;color:#1D4ED8;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(29,78,216,.14)}
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-tpl{background:#E2F5EA;background-image:none;border:1.5px solid #BFE3D0;color:#059669;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(5,150,105,.14)}
.admin-main .adm-kpis2 .stat.adm-kpi .stat-ic.ic-svc{background:#DFF5EC;background-image:none;border:1.5px solid #B7E3CC;color:#067647;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(6,118,71,.14)}
/* --- KPI card: upar wali patti + hover glow emerald --- */
.admin-main .stat.adm-kpi::before{background:linear-gradient(90deg,#047857,#10B981 60%,#6EE7B7)}
.admin-main .stat.adm-kpi::after{background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),rgba(16,185,129,.12),transparent 65%)}
/* --- Stat numbers: gradient-text khatam, saada deep ink (member jesa) --- */
.admin-main .adm-kpi .stat-tx b{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:#052E22}
/* --- KPI rows ki spacing saaf --- */
.admin-main .adm-kpis{margin:0 0 14px}
/* --- Chart range toggle: segmented pill, Emerald active --- */
.admin-main .adm-seg{background:#E9F5EE}
.admin-main .adm-seg a{color:#33544A}
.admin-main .adm-seg a:hover{color:#064E3B}
.admin-main .adm-seg a.on{background:linear-gradient(120deg,#047857,#10B981);color:#fff;box-shadow:0 6px 14px -6px rgba(4,120,87,.55)}
/* --- Chart tooltip: deep emerald --- */
.adm-tip{background:#064E3B;color:#ECFDF5;box-shadow:0 12px 24px -10px rgba(4,47,35,.5)}
.admin-main .adm-tip small{color:#A7E8C9}
/* --- Donut legend dots: canvas palette se bilkul ham-ahang --- */
.admin-main .adm2-legend .adm2-dot[data-st="paid"]{background:#10B981}
.admin-main .adm2-legend .adm2-dot[data-st="delivered"]{background:#047857}
.admin-main .adm2-legend .adm2-dot[data-st="refunded"]{background:#E11D48}
.admin-main .adm2-legend .adm2-dot[data-st="expired"]{background:#6D28D9}
.admin-main .adm2-legend{gap:9px}
/* --- Quick Actions badge: chillata laal -> deep emerald pill --- */
.admin-main .adm2-qa-row .nav-badge{background:#047857}
/* ==== END ADM-DASH ==== */

/* ============================================================
   ADM-TABLES (27 Oct 2026) — admin list tables ka AIK standard
   (audit C1/C2): har list ke row actions ab aik hi pattern par —
   safed pill, emerald kinara, 32px — bilkul Coupons ?v=324 ke tay
   pattern jesa; Delete jahan hai wo pehle se danger hai aur usi
   32px naap par unify hai. Status pills (.pill, JS .stc se bante
   hain) ke rang Emerald Signature palette par kar diye hain
   (purani p-ok teal teh khatam). Purani td:last-child wali teal
   chip aur teal-gradient hover is scope (.row-act) mein dabayi
   gayi hain — baqi jagah barqarar.
   ============================================================ */
.admin-main .pill.p-ok{background:#DCFCE7;color:#15803D;border-color:rgba(21,128,61,.30)}
.admin-main .pill.p-warn{background:#FEF3C7;color:#92400E;border-color:rgba(217,119,6,.35)}
.admin-main .pill.p-bad{background:#FEE2E2;color:#B91C1C;border-color:rgba(220,38,38,.28)}
.admin-main .pill.p-info{background:rgba(16,185,129,.14);color:#047857;border-color:rgba(16,185,129,.35)}
.admin-main .pill.p-mut{background:#EEF1F4;color:#5B6B82;border-color:rgba(91,107,130,.25)}
.admin-main .tbl td.row-act{white-space:nowrap}
.admin-main .tbl td.row-act>a.adm-view{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 15px;border-radius:999px;border:1.5px solid rgba(5,150,105,.45);background:#fff;background-image:none;color:#065F46;font-size:13px;font-weight:500;box-shadow:none;margin:0;vertical-align:middle;text-decoration:none}
.admin-main .tbl td.row-act>a.adm-view:hover{background:#EAF6F0;border-color:rgba(5,150,105,.7);color:#065F46;transform:none;box-shadow:none;text-decoration:none}
.admin-main .tbl td.row-act>a.adm-view+a.adm-view{margin-left:6px}
.admin-main .tbl td.row-act .btn{display:inline-flex;align-items:center;justify-content:center;height:32px;min-height:32px;padding:0 15px;font-size:13px;vertical-align:middle}
.admin-main .tbl td.row-act form{display:inline-flex;vertical-align:middle}
@media (max-width:860px){
  .admin-main .tbl td.row-act>a.adm-view{height:30px;padding:0 12px;font-size:12.5px}
  .admin-main .tbl td.row-act .btn{height:30px;min-height:30px;padding:0 12px;font-size:12.5px}
}
/* === END ADM-TABLES === */

/* ================================================================
   ADM-TICKETS (27 Oct 2026) — admin ticket view, member TK2 standard
   Chat cards + avatars + Ticket Details card + attachments UI +
   TK2 editor, tamam .admin-main scope mein (member .acc-main mirror).
   E2: khule tickets ki row-open amber teh -> halki emerald teh.
   ================================================================ */
/* --- E2: row-open emerald (purani amber rules se baad mein, equal/higher specificity) --- */
.admin-main .tbl tr.row-open td{background:rgba(5,150,105,.05)}
.admin-main .tbl tbody tr.row-open:nth-child(even) td{background:rgba(5,150,105,.07)}
.admin-main .tbl tbody tr.row-open:hover td,.admin-main .tbl tbody tr.row-open:nth-child(even):hover td{background:rgba(5,150,105,.10)}
.admin-main .tbl tr.row-open td:first-child{box-shadow:inset 3px 0 0 rgba(5,150,105,.55)}
/* --- header --- */
.admin-main .atk-back{margin:0 0 10px;font-size:13.5px}
.admin-main .atk-back a{color:var(--ac-mut);text-decoration:none;font-weight:500}
.admin-main .atk-back a:hover{color:var(--ac-brand)}
.admin-main .tk2-vhead{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.admin-main .atk-sj{font-size:27px;font-weight:500;color:var(--ac-ink);letter-spacing:-.01em;line-height:1.15;min-width:0;overflow-wrap:anywhere}
.admin-main .tk2-chip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:500;border-radius:8px;padding:5px 11px;white-space:nowrap}
.admin-main .tk2-chip-open{background:#E6F7EF;color:var(--ac-deep)}
.admin-main .tk2-chip-progress{background:var(--ac-warn-bg);color:var(--ac-warn)}
.admin-main .tk2-chip-resolved{background:#E7F6EF;color:#067647}
.admin-main .atk-cba{display:inline-flex;align-items:center;gap:6px}
.admin-main .atk-cba svg{width:14px;height:14px}
/* --- layout --- */
.admin-main .tk2-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:18px;align-items:start}
.admin-main .tk2-conv-h{display:flex;align-items:center;gap:11px;margin:4px 0 14px}
.admin-main .tk2-conv-h h3{margin:0;font-size:17px;color:var(--ac-ink)}
.admin-main .tk2-count{background:#EEF1F4;color:#43536A;font-size:12.5px;font-weight:500;border-radius:999px;padding:3px 10px}
.admin-main .tk2-newest{margin-left:auto;font-size:13px;color:var(--ac-mut)}
.admin-main .tk2-conv{display:flex;flex-direction:column;gap:13px}
/* --- message cards --- */
.admin-main .tk2-msg{background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:10px;padding:17px 19px;box-shadow:var(--ac-sh-sm)}
.admin-main .tk2-msg.is-adm{box-shadow:inset 3px 0 0 var(--ac-brand),var(--ac-sh-sm)}
.admin-main .tk2-msg.is-cust{box-shadow:inset 3px 0 0 #C9D6CF,var(--ac-sh-sm)}
.admin-main .tk2-msg-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-main .tk2-ava{flex:none;width:38px;height:38px;border-radius:50%;background:var(--ac-tint);color:var(--ac-deep);font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.admin-main .tk2-ava-adm{background:var(--ac-dark);color:#fff}
.admin-main .tk2-msg-name{font-size:14.5px;font-weight:500;color:var(--ac-ink)}
.admin-main .tk2-you{background:#EEF1F4;color:#43536A;font-size:11.5px;font-weight:500;border-radius:6px;padding:2px 8px}
.admin-main .tk2-team{background:var(--ac-tint);color:var(--ac-deepest);font-size:11.5px;font-weight:500;border-radius:6px;padding:2px 8px}
.admin-main .tk2-via{background:var(--ac-warn-bg);color:var(--ac-warn);font-size:11.5px;font-weight:500;border-radius:6px;padding:2px 8px}
.admin-main .tk2-msg-h time{margin-left:auto;font-size:13px;color:var(--ac-mut)}
.admin-main .tk2-msg-body{margin-top:11px;font-size:14.5px;line-height:1.65;color:#22344F;overflow-wrap:anywhere}
.admin-main .tk2-msg-body p{margin:0 0 9px}
.admin-main .tk2-msg-body p:last-child{margin-bottom:0}
.admin-main .tk2-msg-body ul,.admin-main .tk2-msg-body ol{margin:0 0 9px;padding-left:21px}
.admin-main .tk2-msg-body blockquote{margin:0 0 9px;padding:9px 14px;border-left:3px solid var(--ac-brand);background:var(--ac-tint2);border-radius:0 9px 9px 0;color:var(--ac-deepest)}
.admin-main .tk2-msg-body code{background:#EEF4F3;border:1px solid var(--ac-line2);border-radius:6px;padding:1px 6px;font-size:13px}
.admin-main .tk2-msg-body a{color:var(--ac-brand);font-weight:500}
.admin-main .tk2-msg-body hr{border:0;border-top:1px solid var(--ac-line2);margin:11px 0}
/* --- attachments --- */
.admin-main .tk2-msg-files{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.admin-main .tk2-file-chip{display:inline-flex;align-items:center;gap:7px;background:var(--ac-tint2);border:1px solid var(--ac-line);color:var(--ac-deepest);font-size:13px;font-weight:500;border-radius:9px;padding:6px 11px;text-decoration:none}
.admin-main .tk2-file-chip svg{width:15px;height:15px;color:var(--ac-brand);flex:none}
.admin-main .tk2-file-sz{color:var(--ac-mut);font-weight:500}
.admin-main .tk2-thumb{display:inline-flex;flex-direction:column;gap:5px;width:124px;text-decoration:none}
.admin-main .tk2-thumb img{width:124px;height:88px;object-fit:cover;border-radius:10px;border:1px solid var(--ac-line2);background:var(--ac-card2);display:block}
.admin-main .tk2-thumb:hover img{border-color:var(--ac-brand)}
.admin-main .tk2-thumb-nm{font-size:11px;color:var(--ac-mut);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-main .atk-orphan{border:1px dashed var(--ac-line);border-radius:9px;padding:11px 14px 13px;margin-bottom:13px;background:var(--ac-card2)}
.admin-main .atk-orphan-lb{display:block;font-size:12px;font-weight:500;color:var(--ac-mut);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.admin-main .atk-orphan .tk2-msg-files{margin-top:6px}
/* --- reply card + editor --- */
.admin-main .tk2-rcard{background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:var(--ac-r);box-shadow:var(--ac-sh-sm);padding:20px 22px;margin:20px 0 22px}
.admin-main .tk2-rcard-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.admin-main .tk2-rcard-h h3{margin:0;font-size:16.5px;color:var(--ac-ink)}
.admin-main .tk2-priv{font-size:12.5px;color:var(--ac-mut)}
.admin-main .tk2-rfoot{display:flex;align-items:center;gap:14px;margin-top:13px;flex-wrap:wrap}
.admin-main .atk-rfoot .btn{margin-left:auto}
.admin-main .tk2-send-ic{display:inline-flex}
.admin-main .tk2-send-ic svg{width:16px;height:16px}
.admin-main .tk2-editor{border:1px solid #DFE5EA;border-radius:9px;background:#fff;overflow:hidden}
.admin-main .tk2-editor:focus-within{border-color:var(--ac-brand);box-shadow:0 0 0 3px rgba(5,150,105,.13)}
.admin-main .tk2-tb{display:flex;align-items:center;gap:2px;background:var(--ac-card2);border-bottom:1px solid var(--ac-line2);padding:6px 9px;flex-wrap:wrap}
.admin-main .tk2-tbb{border:0;background:transparent;min-width:31px;height:31px;padding:0 6px;border-radius:7px;color:#5B6B82;font:inherit;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.admin-main .tk2-tbb:hover{background:#E7EFEB;color:var(--ac-deep)}
.admin-main .tk2-tbb svg{width:17px;height:17px}
.admin-main .tk2-tbb-b{font-weight:500;font-family:Georgia,serif}
.admin-main .tk2-tbb-i{font-style:italic;font-family:Georgia,serif}
.admin-main .tk2-tb-sep{width:1px;height:19px;background:#DFE5EA;margin:0 6px}
.admin-main .tk2-tb-right{margin-left:auto;display:inline-flex;gap:2px}
.admin-main .tk2-editor textarea{display:block;width:100%;border:0;outline:0;background:transparent;resize:vertical;min-height:112px;padding:14px 15px;font:inherit;font-size:14.5px;line-height:1.6;color:var(--ac-ink)}
/* --- details card --- */
.admin-main .tk2-dcard{background:var(--ac-card);border:1px solid var(--ac-line2);border-radius:var(--ac-r);box-shadow:var(--ac-sh-sm);padding:21px 22px}
.admin-main .tk2-dcard h3{margin:0 0 16px;font-size:16.5px;color:var(--ac-ink)}
.admin-main .tk2-drow{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.admin-main .tk2-dlb{font-size:13px;color:var(--ac-mut)}
.admin-main .tk2-dlb-up{text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:500}
.admin-main .tk2-dv{font-size:14.5px;font-weight:500;color:var(--ac-ink);overflow-wrap:anywhere}
.admin-main .tk2-did{display:inline-flex;align-items:center;gap:8px}
.admin-main .tk2-copy{border:0;background:none;padding:3px;color:#A6B2C0;cursor:pointer;display:inline-flex;border-radius:6px}
.admin-main .tk2-copy svg{width:16px;height:16px}
.admin-main .tk2-copy:hover{color:var(--ac-brand)}
.admin-main .tk2-copy.ok{color:var(--ac-brand)}
.admin-main .tk2-norel{display:block;background:var(--ac-card2);border:1px solid var(--ac-line2);border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--ac-mut)}
.admin-main .tk2-dept{display:inline-flex;align-items:center;background:#EEF1F4;color:#43536A;font-size:12.5px;font-weight:500;border-radius:8px;padding:5px 10px;white-space:nowrap;justify-self:start}
.admin-main .tk2-dperson{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--ac-ink);min-width:0}
.admin-main .tk2-dperson .tk2-ava{width:34px;height:34px;font-size:12px}
.admin-main .atk-cust{display:inline-flex;flex-direction:column;gap:1px;min-width:0}
.admin-main .atk-dem{font-size:12.5px;font-weight:500;color:var(--ac-mut);overflow-wrap:anywhere}
.admin-main .tk2-dsep{border-top:1px solid var(--ac-line2);margin:10px 0}
.admin-main .atk-status-form label{display:block;font-size:13px;color:var(--ac-mut);margin:0 0 11px}
.admin-main .atk-status-form select{display:block;width:100%;margin-top:6px;border:1px solid #DFE5EA;border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;font-weight:400;color:var(--ac-ink);background:#fff;outline:0}
.admin-main .atk-status-form select:focus{border-color:var(--ac-brand);box-shadow:0 0 0 3px rgba(5,150,105,.13)}
.admin-main .atk-status-form .btn{width:100%;justify-content:center}
.admin-main .tk2-dact{margin-top:11px}
.admin-main .tk2-dact .btn{width:100%;justify-content:center}
/* --- responsive --- */
@media (max-width:1100px){
  .admin-main .tk2-grid{grid-template-columns:1fr}
  .admin-main .tk2-side{order:2}
}
@media (max-width:760px){
  .admin-main .tk2-rcard{padding:17px 16px}
  .admin-main .tk2-dcard{padding:18px 16px}
  .admin-main .atk-sj{font-size:22px}
  .admin-main .tk2-msg{padding:15px 15px}
  .admin-main .tk2-msg-h time{margin-left:0;width:100%}
  .admin-main .atk-rfoot .btn{margin-left:0;width:100%;justify-content:center}
  .admin-main .tk2-thumb{width:104px}
  .admin-main .tk2-thumb img{width:104px;height:76px}
}

/* ============================================================
   CPN-STRUCT — Admin Coupons page ki tarteeb (27 Oct 2026)
   Fehrist pehle (apni heading ke sath), Add/Edit form neeche
   apne card mein wazeh heading ke sath ("Add Coupon" /
   "Edit Coupon — CODE"); Discount pill, Applies tag, Status
   pill (C2). CPN-TBL-FIX (v324) ke andarooni row rules is ke
   upar bilkul mehfooz hain — ye block sirf sakht + cell
   presentation hai, koi data/logic tabdeel nahi.
   ============================================================ */
.admin-main .cpn-list-head{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px}
.admin-main .cpn-list-head h2{margin:0;font-size:19px;font-weight:700;color:#064E3B;letter-spacing:-.01em}
.admin-main .cpn-list-head .cpn-count{font-size:13px;font-weight:500;color:#5F7268}
.admin-main .tbl.cpn-tbl .cpn-disc-pill{display:inline-block;padding:3px 11px;border-radius:999px;background:#E7F4EC;border:1px solid rgba(5,150,105,.32);color:#047857;font-weight:500;white-space:nowrap}
.admin-main .tbl.cpn-tbl .cpn-app{display:inline-block;padding:3px 10px;border-radius:999px;background:#F2F8F3;border:1px solid #D9E9DD;color:#40614F;font-size:12.5px;font-weight:500;white-space:nowrap}
.admin-main .tbl.cpn-tbl .cpn-cond{font-size:13px;line-height:1.5}
.admin-main .tbl.cpn-tbl .cpn-none{color:#8AA295;font-style:italic}
/* CPN-NAME + DASH-FIX (27 Oct 2026): base .cpn-code rule ka dashed border admin td par leak ho raha tha (lamba dashed box har row mein) — admin table mein reset; code ka asal pill (.cpn-code b) barqarar. Name column saada text. */
.admin-main .tbl.cpn-tbl td.cpn-code{border:0;border-bottom:1px solid var(--adm-line2);border-radius:0;background:transparent;padding:13px 16px}
.admin-main .tbl.cpn-tbl tr:last-child td.cpn-code{border-bottom:none}
.admin-main .tbl.cpn-tbl .cpn-name{font-weight:500;color:#22382E;white-space:nowrap}
.admin-main .tbl.cpn-tbl .pill.p-ok{background:rgba(5,150,105,.12);color:#065F46;border-color:rgba(5,150,105,.35)}
.admin-main .form-card.cpn-form{margin-top:22px}
.admin-main .cpn-form-h{margin:0 0 14px;font-size:19px;font-weight:700;color:#064E3B;letter-spacing:-.01em}
/* === END CPN-STRUCT === */

/* ===== ADM-DETAIL (27 Oct 2026) — admin detail pages premium: F1 headings emerald · F3 orders customer cell · H1 user summary card ===== */
.admin-main .dtl-card h3{color:#059669;border-left-color:#10B981}
.admin-main .adj-panel h3{color:#059669;border-left-color:#10B981}
.admin-main .adj-history h3{color:#059669;border-left-color:#10B981}
.cust-cell{display:flex;align-items:center;gap:9px;min-width:0}
.cust-ini{width:30px;height:30px;flex:none;border-radius:50%;background:rgba(5,150,105,.12);border:1px solid rgba(5,150,105,.30);color:#065F46;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.cust-tx{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cust-tx b{font-weight:500;color:#0A2E22;white-space:nowrap}
.cust-tx small{color:#5B7267;font-size:12px;white-space:nowrap}
.usr-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--adm-line);border-radius:11px;padding:18px 20px;box-shadow:var(--adm-sh);margin:0 0 16px}
.usr-ava{width:54px;height:54px;flex:none;border-radius:50%;background:linear-gradient(135deg,#047857,#10B981);color:#fff;font-family:'Sora',sans-serif;font-size:22px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -8px rgba(4,120,87,.45)}
.usr-head-tx{min-width:0}
.usr-head-tx h2{margin:0;font-family:'Sora',sans-serif;font-size:21px;font-weight:700;color:#0A2E22;letter-spacing:-.01em}
.usr-head-tx p{margin:2px 0 0;font-size:13.5px;color:#5B7267;word-break:break-all}
.usr-stats{display:flex;gap:10px 26px;flex-wrap:wrap;margin-left:auto}
.usr-stat{display:flex;flex-direction:column;gap:1px}
.usr-stat i{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#5B7267}
.usr-stat b{font-size:15px;font-weight:500;color:#0A2E22}
@media(max-width:640px){.usr-head{padding:16px}.usr-stats{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}}

/* ADM-MISC (27 Oct 2026): designed confirm modal + inline bulk notes, secret fields, activity pills, misc */
.bulk-note{margin:10px 0 4px;border-radius:9px;padding:11px 15px;background:linear-gradient(120deg,rgba(220,38,38,.10),rgba(242,96,118,.06));border:1px solid rgba(220,38,38,.35);color:#7F1D1D;font-weight:500;font-size:13.5px}
.adm-modal-ov{position:fixed;inset:0;background:rgba(6,40,32,.45);z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px}
.adm-modal-ov[hidden]{display:none}
.adm-modal{background:#fff;border-radius:12px;max-width:420px;width:100%;padding:24px 24px 20px;box-shadow:0 24px 60px -12px rgba(3,25,17,.35);border:1px solid rgba(4,120,87,.16)}
.adm-modal h3{margin:0 0 8px;font-size:17px}
.adm-modal p{margin:0 0 18px;color:#51665A;line-height:1.55;font-size:14.5px}
.adm-modal-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.act-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:500;letter-spacing:.02em;white-space:nowrap;text-transform:capitalize}
.act-pill.ap-orders{background:#DFF5EC;color:#067647}
.act-pill.ap-settings{background:#E4EEFF;color:#1D4ED8}
.act-pill.ap-security{background:#FDE8EC;color:#BE123C}
.act-pill.ap-tickets{background:#EFE9FD;color:#6D28D9}
.act-pill.ap-users{background:#FDEEDC;color:#B45309}
.act-pill.ap-other{background:#EEF2EF;color:#51665A}
.sec-wrap{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.sec-wrap input{flex:1 1 auto;min-width:0}
.sec-btn{flex:0 0 auto;border:1px solid rgba(4,120,87,.25);background:#F2F8F3;color:#065F46;border-radius:10px;padding:0 13px;font-weight:500;font-size:12.5px;cursor:pointer}
.sec-btn:hover{background:#E4F2E9}
.sec-hint{display:block;margin-top:6px;font-size:12.5px;color:#5B7270;font-weight:500}
.sec-hint b{color:#065F46}
.admin-main .empty-state.adm-empty{margin-top:6px;text-align:center}
.admin-main .empty-state .es-ic{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:18px;background:rgba(5,150,105,.10);color:#059669;border:1px solid rgba(5,150,105,.20);margin-bottom:14px}
.admin-main .form-card .sett-h{margin:24px 0 10px;padding-top:18px;border-top:1px solid rgba(4,120,87,.14)}
.faq-sort{color:#5B7270;font-weight:500;white-space:nowrap}

/* ============================================================
   ADM-FORMS (27 Oct 2026) — audit I1, I3, I6, G1:
   edit forms ki chaurai yaksan (wide ka 840px cap khatam —
   tamam admin form-cards ab aik hi full-width par), Packages
   structured editor, post cover upload + preview, bundle
   picker (category groups + search + selected count).
   Rang sirf Emerald Signature; layout ke baqi hisse barqarar.
   ============================================================ */
body:not(.pg-account) .admin-main .form-card.wide{max-width:none}
/* --- Packages structured editor (G1) --- */
.admin-main .pkged{grid-column:1/-1;border:1px solid var(--adm-line);border-radius:10px;padding:16px;background:#FBFDFB;display:flex;flex-direction:column;gap:12px;min-width:0}
.admin-main .pkged-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.admin-main .pkged-title{font-weight:700;font-size:14.5px;color:var(--adm-ink)}
.admin-main .pkged-rawbtn{background:#fff;border:1.5px solid rgba(5,150,105,.45);color:#065F46;border-radius:999px;padding:6px 14px;font-weight:500;font-size:12.5px;cursor:pointer;font-family:inherit}
.admin-main .pkged-rawbtn:hover{background:#EAF6F0}
.admin-main .pkged-tier{border:1px solid var(--adm-line);border-radius:9px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px;min-width:0}
.admin-main .pkged-th{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-main .pkged-th b{font-size:14px;color:var(--adm-ink)}
.admin-main .pkged-x{background:none;border:none;color:#B91C1C;font-weight:500;font-size:13px;cursor:pointer;padding:4px 6px;font-family:inherit}
.admin-main .pkged-x:hover{text-decoration:underline}
.admin-main .pkged-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 14px}
.admin-main .pkged-feats{display:flex;flex-direction:column;gap:7px}
.admin-main .pkged-fl{font-size:13px;font-weight:500;color:var(--ink2)}
.admin-main .pkged-feat{display:flex;gap:8px;align-items:center}
.admin-main .pkged-feat input{flex:1;min-width:0}
.admin-main .pkged-addfeat,.admin-main .pkged-addtier{align-self:flex-start;background:#EAF6F0;border:1.5px dashed rgba(5,150,105,.5);color:#065F46;border-radius:10px;padding:7px 14px;font-weight:500;font-size:13px;cursor:pointer;font-family:inherit}
.admin-main .pkged-addfeat:hover,.admin-main .pkged-addtier:hover{background:#DFF5EC}
.admin-main .pkged-l{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:13.5px;color:var(--ink2)}
.admin-main .pkged-err{color:#B91C1C;font-weight:500;font-size:13.5px;margin:0}
.admin-main .pkged-warn{color:#92400E;font-weight:500;margin:0}
@media(max-width:640px){.admin-main .pkged-grid{grid-template-columns:1fr}}
/* --- Post cover upload + preview (I3) --- */
.admin-main .cover-up{grid-column:1/-1;display:flex;flex-direction:column;gap:9px;min-width:0}
.admin-main .cover-prev{border:1px dashed rgba(6,64,43,.3);border-radius:9px;min-height:90px;display:flex;align-items:center;justify-content:center;background:#F7FAF7;color:var(--adm-mut);font-size:13px;overflow:hidden}
.admin-main .cover-prev img{width:100%;max-height:220px;object-fit:cover;display:block}
.admin-main .cover-file{max-width:360px}
/* --- Bundle picker: groups + search + count (I6) --- */
.admin-main fieldset.bmpick{display:block}
.admin-main .bmp-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.admin-main .bmp-tools input[type="search"]{flex:1;min-width:170px}
.admin-main .bmp-count{background:#DFF5EC;border:1px solid #B7E3CC;color:#065F46;font-weight:500;font-size:12.5px;border-radius:999px;padding:4px 12px;white-space:nowrap}
.admin-main .bmp-group{margin-bottom:14px}
.admin-main .bmp-group:last-child{margin-bottom:0}
.admin-main .bmp-gh{font-weight:500;font-size:13.5px;color:var(--adm-ink);margin-bottom:8px}
.admin-main .bmp-gh span{background:#EFF6F1;border:1px solid var(--adm-line);border-radius:999px;padding:1px 9px;font-size:12px;color:#33504D}
.admin-main .bmp-chips{display:flex;flex-wrap:wrap;gap:9px}
body:not(.pg-account) .admin-main .bundle-mem:hover{border-color:rgba(5,150,105,.5)}
body:not(.pg-account) .admin-main .bundle-mem:has(input:checked){background:linear-gradient(120deg,rgba(5,150,105,.15),rgba(16,185,129,.10));border-color:rgba(5,150,105,.55);color:#064E3B}
body:not(.pg-account) .admin-main .bundle-mem input{accent-color:#059669}
/* === END ADM-FORMS === */

/* ============================================================
   SETT-REDESIGN (27 Oct 2026) — Admin Site Settings:
   tab menu = barabar grid (5x2), har tab icon + label;
   form system = grouped single-column stack (CORRECTION
   27 Oct: layout meaning follow karta hai — har group ke
   linked fields aik hi column mein aik sath, kabhi split
   nahi), section headings, yaksan toggle rows, secret
   field aik unit, Save center.
   Sirf .admin-main .sett-* scope — member/public mehfooz.
   ============================================================ */
/* --- Tab bar: equal-width grid --- */
body:not(.pg-account) .admin-main .sett-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:12px;margin:0 0 20px;background:#fff;border:1.5px solid rgba(6,64,43,.14);border-radius:12px;box-shadow:0 10px 24px -16px rgba(6,64,43,.28)}
body:not(.pg-account) .admin-main .sett-tab{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:10px 12px;border-radius:12px;border:1px solid rgba(6,64,43,.13);background:#F7FAF7;color:#22452F;font-weight:500;font-size:14px;line-height:1.25;text-align:center;text-decoration:none;white-space:normal;transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s}
body:not(.pg-account) .admin-main .sett-tab .sett-ic{display:inline-flex;flex:none;color:#059669}
body:not(.pg-account) .admin-main .sett-tab .sett-ic svg{width:19px;height:19px;display:block}
body:not(.pg-account) .admin-main .sett-tab:hover{background:#EAF4EC;border-color:rgba(5,150,105,.45);color:#0B3D2E;transform:translateY(-1px)}
body:not(.pg-account) .admin-main .sett-tab.on{background:linear-gradient(135deg,#047857,#059669 55%,#10B981);border-color:transparent;color:#fff;box-shadow:0 10px 20px -8px rgba(4,120,87,.55)}
body:not(.pg-account) .admin-main .sett-tab.on .sett-ic{color:#fff}
body:not(.pg-account) .admin-main .sett-tab:focus-visible{outline:2px solid #059669;outline-offset:2px}
@media (max-width:1100px){
  body:not(.pg-account) .admin-main .sett-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  body:not(.pg-account) .admin-main .sett-tab:last-child{grid-column:1/-1}
}
@media (max-width:640px){
  body:not(.pg-account) .admin-main .sett-tabs{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:8px}
  body:not(.pg-account) .admin-main .sett-tab:last-child{grid-column:auto}
  body:not(.pg-account) .admin-main .sett-tab{min-height:50px;font-size:13.5px;padding:9px 10px}
}
@media (max-width:380px){
  body:not(.pg-account) .admin-main .sett-tabs{grid-template-columns:minmax(0,1fr)}
}
/* --- Form system: grouped single-column stack — har section/group ke fields
   apni logical tarteeb mein aik hi column mein aik sath rehte hain (masalan
   NOWPayments: Enable toggle, API Key, IPN Secret, Sandbox toggle, callback
   line) — koi group do columns mein split nahi hota --- */
body:not(.pg-account) .admin-main .sett-form{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch;padding:30px}
body:not(.pg-account) .admin-main .sett-form > h3{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:14px 0 -2px;padding-top:22px;border-top:1px solid rgba(4,120,87,.14);font-size:17px;font-weight:750;color:#0B3D2E;letter-spacing:.01em}
body:not(.pg-account) .admin-main .sett-form > h3::before{content:"";flex:none;width:4px;height:20px;border-radius:3px;background:linear-gradient(180deg,#10B981,#047857)}
body:not(.pg-account) .admin-main .sett-form > h3:first-of-type{margin-top:0;padding-top:0;border-top:0}
body:not(.pg-account) .admin-main .sett-form > label{min-width:0;max-width:780px;font-size:13.5px;font-weight:500;color:#2C4A3B}
body:not(.pg-account) .admin-main .sett-form > label:has(textarea){grid-column:1/-1;max-width:none}
body:not(.pg-account) .admin-main .sett-form > label > input,body:not(.pg-account) .admin-main .sett-form > label > select{height:48px}
body:not(.pg-account) .admin-main .sett-form > label > input:focus,body:not(.pg-account) .admin-main .sett-form > label > textarea:focus,body:not(.pg-account) .admin-main .sett-form > label > select:focus,body:not(.pg-account) .admin-main .sett-form .sec-wrap input:focus{border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.16);outline:none}
/* toggle rows: aik hi pattern har tab par */
body:not(.pg-account) .admin-main .sett-form > label.check{flex-direction:row;align-items:center;gap:12px;min-height:58px;padding:12px 16px;background:#F4F9F4;border:1px solid rgba(6,64,43,.13);border-radius:13px;font-size:14px;font-weight:500;color:#22382E;line-height:1.35;cursor:pointer;transition:border-color .18s,background .18s}
body:not(.pg-account) .admin-main .sett-form > label.check:hover{border-color:rgba(5,150,105,.45);background:#EFF7F0}
/* secret field: masked input + Show + Copy aik attached unit (markup barqarar) */
body:not(.pg-account) .admin-main .sett-form > label.sec-field{min-width:0}
body:not(.pg-account) .admin-main .sett-form .sec-wrap input{height:48px}
body:not(.pg-account) .admin-main .sett-form .sec-btn{border-radius:11px}
/* hints: apne section ke neeche, full width */
body:not(.pg-account) .admin-main .sett-form > p{grid-column:1/-1;margin:0;min-width:0}
/* Save button: center (form-button rule) */
body:not(.pg-account) .admin-main .sett-form > button.btn{grid-column:1/-1;justify-self:center;min-width:250px;margin-top:8px}
@media (max-width:820px){
  body:not(.pg-account) .admin-main .sett-form{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px 18px}
  body:not(.pg-account) .admin-main .sett-form > label,body:not(.pg-account) .admin-main .sett-form > label.check,body:not(.pg-account) .admin-main .sett-form > label.sec-field{grid-column:1/-1}
}
@media (max-width:400px){
  body:not(.pg-account) .admin-main .sett-form > button.btn{min-width:0;width:100%}
}
/* === END SETT-REDESIGN === */

/* === TK-CUST-SEARCH: admin New Ticket — live customer search + searchable dropdown + active services === */
.admin-main .form-card>.tk-svcbox{grid-column:1/-1}
.tk-find{position:relative;display:block}
.tk-sug{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;background:#fff;border:1px solid rgba(6,64,43,.18);border-radius:10px;box-shadow:0 24px 44px -18px rgba(4,47,35,.35);padding:6px;display:none;max-height:308px;overflow:auto}
.tk-sug.on{display:block}
.tk-sug-it,.tk-combo-it{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:9px;background:transparent;cursor:pointer;font:inherit;color:inherit}
.tk-sug-it:hover,.tk-sug-it.on,.tk-combo-it:hover{background:#EAF6EF}
.tk-sug-n{font-weight:500;font-size:14px;color:#0B3D2E}
.tk-sug-e{font-size:12.5px;color:#6B7A6F}
.tk-sug-none{padding:10px 12px;font-size:13px;color:#6B7A6F}
.tk-hidsel{display:none!important}
.tk-combo{position:relative;display:block}
.tk-combo-btn{display:flex;align-items:center;width:100%;padding:12px 38px 12px 15px;border:1.5px solid var(--line2);border-radius:12px;font-size:15px;font-family:inherit;background-color:rgba(255,255,255,.92);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D9488' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:14px;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s}
.tk-combo-btn:hover{border-color:rgba(13,148,136,.55)}
.tk-combo-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-combo.has-sel .tk-combo-btn{border-color:rgba(5,150,105,.55);background-color:#F2F8F3}
.tk-combo.has-sel .tk-combo-btn{padding-right:78px}
.tk-combo-x{position:absolute;top:50%;right:34px;transform:translateY(-50%);z-index:6;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:transparent;color:#6B7A6F;font-size:21px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,color .18s}
.tk-combo.has-sel .tk-combo-x{display:flex}
.tk-combo-x:hover{background:#D9EFE2;color:#065F46}
.tk-combo-x:focus-visible{outline:2px solid #059669;outline-offset:1px}
.tk-combo.err .tk-combo-btn{border-color:#D64545;box-shadow:0 0 0 4px rgba(214,69,69,.16)}
.tk-combo-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;background:#fff;border:1px solid rgba(6,64,43,.18);border-radius:10px;box-shadow:0 24px 44px -18px rgba(4,47,35,.35);padding:8px;display:none}
.tk-combo.open .tk-combo-pop{display:block}
.tk-combo-pop>input{margin:0 0 6px}
.tk-combo-list{display:block;max-height:264px;overflow:auto}
.tk-combo-it.sel{background:#E3F2E8}
.tk-combo-it.sel::after{content:"\2713";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#059669;font-weight:500}
.tk-combo-clr{color:#6B7A6F;font-size:13.5px;font-weight:500;border-bottom:1px solid rgba(6,64,43,.08);border-radius:9px 9px 4px 4px;margin-bottom:4px;padding-top:7px;padding-bottom:7px}
.tk-svcbox{display:none;background:#F2F8F3;border:1px solid rgba(6,64,43,.14);border-radius:10px;padding:14px 16px}
.tk-svcbox.on{display:block}
.tk-svcbox-h{font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#064E3B;margin-bottom:6px}
.tk-svcbox-c{color:#059669}
.tk-svcrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid rgba(6,64,43,.08)}
.tk-svcrow-t{font-weight:500;font-size:14px;color:#22382E}
.tk-svcrow-m{font-size:12.5px;color:#6B7A6F;margin-left:auto}
.tk-svcchip{font-size:11px;font-weight:500;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:#D9EFE2;color:#065F46;border:1px solid rgba(5,150,105,.35)}
.tk-svcnone{font-size:13.5px;color:#6B7A6F;padding:4px 0 2px}
@media(max-width:560px){.tk-svcrow-m{margin-left:0;width:100%}}
/* === END TK-CUST-SEARCH === */

/* SVC-INVOICE (service-order invoices panel — admin + member service pages) */
.svd-inv{background:#fff;border:1px solid var(--ac-line,#DCE8E2);border-radius:11px;box-shadow:0 1px 3px rgba(4,47,46,.06);padding:17px 20px;margin-bottom:18px}
.svd-inv-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.svd-inv-h h3{margin:0;font-size:15.5px;color:#0B2530}
.svd-inv-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.svd-inv-num{font-weight:500;font-size:19px;color:#064E3B}
.svd-inv-item{font-size:14.5px;color:#22344F}
.svd-inv-amt{margin-left:auto;font-weight:500;font-size:19px;color:#064E3B}
.svd-inv .muted{margin:6px 0 0;font-size:13px}
.svd-inv-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
.svd-inv-act form{margin:0}
.svd-inv-form{display:grid;grid-template-columns:170px 1fr auto;gap:12px;align-items:end;margin-top:12px}
.svd-inv-form label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:13px;color:#22382E}
.svd-inv-form input{border:1px solid rgba(6,64,43,.28);border-radius:10px;padding:10px 12px;background:#F2F7F2;font:inherit;color:#0B2530}
.svd-inv-form input:focus{background:#fff;border-color:#059669;outline:2px solid rgba(5,150,105,.25)}
@media(max-width:640px){.svd-inv-form{grid-template-columns:1fr}.svd-inv-amt{margin-left:0}}
.svd-gate-note{background:#F2F8F3;border:1px solid rgba(5,150,105,.28);color:#064E3B;border-radius:10px;padding:9px 12px;font-size:13px;margin:0 0 12px}

/* === SVD-SUM (27 Oct 2026): admin service-order summary card — full-width premium strip.
   Sirf admin variant (.svd-atop) par; member page ka .svd-top/.svd-meta bilkul untouched. === */
.svd-top.svd-atop{padding:20px 22px}
.svd-sum{display:grid;grid-template-columns:minmax(168px,1.4fr) minmax(96px,.55fr) minmax(130px,1fr) minmax(80px,.55fr) minmax(122px,.85fr) minmax(106px,.75fr);gap:12px 22px;align-items:center}
.svd-svc{display:flex;align-items:center;gap:13px;min-width:0}
.svd-svc-ic{width:46px;height:46px;flex:none;border-radius:13px;background:rgba(5,150,105,.10);border:1px solid rgba(5,150,105,.22);color:#047857;display:inline-flex;align-items:center;justify-content:center}
.svd-svc-ic svg{width:23px;height:23px}
.svd-svc-tx{min-width:0}
.svd-svc-tx h3{margin:0;font-size:17.5px;line-height:1.25;color:var(--ac-ink,#0B2530);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svd-svc-tx p{margin:3px 0 0;font-size:12.5px;font-weight:500;color:var(--ac-mut,#64748B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svd-cell{display:flex;flex-direction:column;gap:3px;min-width:0;border-left:1px solid var(--ac-line,#DCE8E2);padding-left:20px}
.svd-cell i{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--ac-mut,#64748B)}
.svd-cell b{font-size:15px;color:var(--ac-ink,#0B2530);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svd-cell small{font-size:12.5px;font-weight:500;color:var(--ac-mut,#64748B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svd-cell .svd-price{font-size:20px;font-weight:500;color:var(--ac-deepest,#064E3B)}
.svd-cell-pl b{white-space:normal;line-height:1.3}
.svd-cell .status{align-self:flex-start;white-space:nowrap}
.svd-sum .status.st-in-progress{background:var(--ac-tint,#E7F4EC);color:var(--ac-deep,#065F46);border-color:rgba(5,150,105,.3)}
@media (max-width:1199px){
  .svd-sum{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 22px}
  .svd-svc{grid-column:1/-1}
  .svd-cell{border-left:0;padding-left:0}
}
@media (max-width:640px){
  .svd-top.svd-atop{padding:16px 15px}
  .svd-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
  .svd-svc-tx h3{white-space:normal}
  .svd-svc-tx p{white-space:normal}
}
/* === END SVD-SUM === */

/* ============================================================
   BEGIN USRX :: ADMIN USER DETAIL (/admin/user/{id}) — APPEND ONLY
   Layout: profile header polish + 2fr/1fr grid (Orders panel |
   Status + Account actions rail). Sirf isi page ki classes;
   forms ke fields/actions bilkul purane hi hain.
   ============================================================ */
@media(min-width:641px){
  .usr-head .usr-stats{gap:0}
  .usr-head .usr-stat{padding:2px 22px;border-left:1px solid var(--adm-line)}
  .usr-head .usr-stat:first-child{padding-left:2px;border-left:none}
  .usr-head .usr-stat:last-child{padding-right:0}
}
.usrx-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;margin:0 0 18px}
@media(min-width:1100px){.usrx-grid{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}}
.usrx-main,.usrx-rail{min-width:0}
.usrx-rail{display:flex;flex-direction:column;gap:18px}
.usrx-panel{background:#fff;border:1px solid var(--adm-line);border-radius:12px;box-shadow:var(--adm-sh);overflow:hidden}
.usrx-panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px 13px}
.usrx-panel-h h3{margin:0;font-family:'Sora',sans-serif;font-size:16.5px;font-weight:600;color:var(--adm-ink)}
.usrx-count{font-size:12px;font-weight:500;color:#065F46;background:rgba(5,150,105,.10);border:1px solid rgba(5,150,105,.25);border-radius:999px;padding:4px 11px;white-space:nowrap}
.usrx-panel .tbl-scroll{margin:0;border-radius:0;box-shadow:none}
.usrx-panel .tbl{margin:0;border:none;box-shadow:none;border-radius:0}
.usrx-empty{margin:0;padding:8px 20px 22px;color:var(--adm-mut);font-size:14px;text-align:center}
.usrx-card{background:#fff;border:1px solid var(--adm-line);border-radius:12px;box-shadow:var(--adm-sh);padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;margin:0}
.usrx-card h3{margin:0;font-family:'Sora',sans-serif;font-size:16px;font-weight:600;color:var(--adm-ink)}
.usrx-card label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500;color:#33504D;letter-spacing:.01em}
.usrx-card select{width:100%;background:#F2F7F2;border:1.5px solid rgba(6,64,61,.18);border-radius:12px;padding:11px 14px;font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.usrx-card select:hover{border-color:rgba(6,64,43,.48)}
.usrx-card select:focus{background:#fff;border-color:#0D946D;box-shadow:0 0 0 4px rgba(13,148,109,.16);outline:none}
.usrx-status .btn{align-self:center;min-width:220px;justify-content:center}
.usrx-facts{display:flex;flex-direction:column;border:1px solid var(--adm-line);border-radius:9px;overflow:hidden}
.usrx-fact{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;font-size:13.5px;font-weight:500;color:#33504D}
.usrx-fact+.usrx-fact{border-top:1px solid var(--adm-line)}
.usrx-fact:nth-child(even){background:#F2F8F3}
.usrx-acts{display:flex;flex-direction:column;gap:10px}
.usrx-acts .btn{width:100%;justify-content:center}
@media(max-width:640px){.usrx-card{padding:18px}.usrx-status .btn{min-width:0;width:100%}}
/* === END USRX === */

/* === ADMACC + SETFIX (27 Oct 2026) ===
   1) Admin account area: account_sidebar() ab admin ke liye .acc-side.admin-side rail deta hai
      (markup index.php mein hai). Do dormant .admin-side rules is context mein zinda ho jati
      theen — line ~1621 ke negative margins (-26px/-30px) aur body.pg-account ki dark navy
      background — inhein .acc-adm-side par neutralize kiya gaya hai (margin 0, height auto,
      panel wali light gradient), taake rail member rail jaisi hi lage.
   2) SETFIX: #set-emails card ke andar wale bare <form> .form-card nahi hain — unhein card wali
      flex rhythm (gap 14) hi nahi milti thi: fields aapas mein chipke hue (0px) aur submit button
      .form-card .btn ke align-self:flex-start par left reh jata tha (baqi page par centred hai).
      Ab: nested forms flex column gap 14, h4/p ke UA margins khatam (rhythm sirf gap se),
      button centred + upar kul 20px hawa. Set-card forms ke direct <p> ka bottom margin bhi
      rhythm mein shamil kar liya; submit button ke upar 14+6=20px. */
.acc-side.acc-adm-side{margin:0;height:auto}
body.pg-account .acc-side.acc-adm-side{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,253,247,.95))}
.acc-main #set-emails>form:has(>h4){display:flex;flex-direction:column;gap:14px}
.acc-main #set-emails>form:has(>h4)>h4,.acc-main #set-emails>form:has(>h4)>p{margin:0}
.acc-main #set-emails>form:has(>h4)>.btn{align-self:center;margin-top:6px}
.acc-main .set-card>p{margin-bottom:0}
.acc-main form.set-card>button.btn{margin-top:6px}

/* === SETFONT (27 Oct 2026) — FONT RULE: bold sirf titles/headings ke liye ===
   Settings page (.set-card) ke tamam ghair-title surfaces unbold (500): buttons (pehle 800),
   form labels (700), Verified pill (800), Email Addresses ki row captions (700) aur hint link (700).
   Card titles (h3/h4) aur page title apni bold halat mein barqarar. */
.acc-main .set-card .btn{font-weight:500}
.acc-main .set-card label{font-weight:500}
.acc-main .set-card .st-pill{font-weight:500}
.acc-main .set-card .email-addr-l{font-weight:500}
.acc-main .set-card .set-hint a{font-weight:500}

/* ============================================================
   CPNTEXT (27 Oct 2026 — user correction; CPNCHIP ko supersede karta hai):
   Admin Coupons table mein CODE ab pill/chip NAHI — saada bara text hai.
   - .cpn-code b: koi background/border/box/height nahi; 15px monospace,
     UPPERCASE, letter-spacing .04em, deep emerald #065F46, weight 500
     (FONT RULE — bold nahi; presence size + caps + rang se).
   - ZEBRA REPAIR: DASH-FIX (line ~6249) ki td.cpn-code{background:transparent}
     apni zyada specificity se zebra ki odd rows (#DAEDE7) par bhi jeet rahi
     thi — code cell har row mein safed rehta tha, jabke baqi row mint thi;
     poori row ka rang dhula/bay-tarteeb lagta tha (user: "sb ko white kr dia").
     Ab code cell bhi wohi standard zebra follow karta hai jo /admin/orders
     par hai: even = transparent, odd = #DAEDE7, hover = standard tint.
   - NAME: purani rule (line ~6251) ka gehra #22382E hata kar standard table
     text var(--ink2), weight 500 — baqi columns jesa saada text.
   - Discount/Applies/Status pills CPNCHIP wali 26px/500 family par barqarar.
   Sirf .cpn-tbl (admin) scope; public /coupons bilkul untouched.
   ============================================================ */
.admin-main .tbl.cpn-tbl td.cpn-code{display:table-cell;width:auto;cursor:auto;font-family:inherit;font-size:14px;font-weight:400;letter-spacing:normal;color:#2C3E57;text-align:left;vertical-align:middle}
.admin-main .tbl.cpn-tbl tr:nth-child(even) td.cpn-code{background:transparent}
.admin-main .tbl.cpn-tbl tr:nth-child(odd) td.cpn-code{background:#DAEDE7}
.admin-main .tbl.cpn-tbl tr:hover td.cpn-code{background:rgba(5,150,145,.10)}
.admin-main .tbl.cpn-tbl td.cpn-code b{display:inline;padding:0;height:auto;background:transparent;border:0;border-radius:0;color:#065F46;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:500;letter-spacing:.04em;line-height:1.4;text-transform:uppercase;white-space:nowrap}
.admin-main .tbl.cpn-tbl .cpn-disc-pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;line-height:1;font-weight:500}
.admin-main .tbl.cpn-tbl .cpn-app{display:inline-flex;align-items:center;height:26px;padding:0 10px;line-height:1;font-weight:500}
.admin-main .tbl.cpn-tbl .pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;font-weight:500}
.admin-main .tbl.cpn-tbl td.cpn-name{font-weight:500;color:var(--ink2)}

/* === ADMINSEP (27 Oct 2026) — admin session ka chrome storefront se bilkul alag ===
   1) Panel routes (admin + account) par admin ke liye .site-head.adm-strip hai: desktop
      (≥861px) par display:none — panel ka apna band (.adm-top) aur rail hi header hai;
      mobile par sirf toggle + brand + admin drawer rehta hai (PHP public links, search
      aur cart emit hi nahi karta). Koi cart, koi public nav, kahin bhi nahi.
   2) Account shell ka admin rail (.acc-adm-side) rangon mein /admin ke ADM-TOKENS ke
      ain mutabiq: wahi rail gradient, wahi active gradient, wahi pill — aur legacy
      ::before chip icons band (admin shell ki tarah display:none), taake har menu item
      par sirf aik hi icon (inline SVG) bache. Body ka backdrop bhi /admin wala. */
@media(min-width:861px){.site-head.adm-strip{display:none}}
@media(min-width:1025px){body:has(.admin-shell) .admin-main .bulk-bar,body:has(.admin-shell) .admin-main .tools-bar,body:has(.admin-shell) .admin-main .shop-tools{top:12px}}
body.pg-account .acc-side.acc-adm-side{background:linear-gradient(168deg,#EDF7F2 0%,#E1F1EA 55%,#F6FAF3 100%);border-color:rgba(6,64,43,.12);box-shadow:0 24px 40px -24px rgba(3,40,26,.28);padding:18px 13px}
body.pg-account .acc-side.acc-adm-side::before{left:0;right:0;border-radius:0;background:linear-gradient(90deg,#047857,#10B981)}
@media(max-width:1024px){.acc-side.acc-adm-side{position:relative}}
body.pg-account .acc-side.acc-adm-side::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 200px at 85% -5%,rgba(16,185,129,.10),transparent 60%),radial-gradient(360px 260px at -10% 100%,rgba(5,150,105,.12),transparent 60%)}
body.pg-account .acc-side.acc-adm-side a.anav::before{display:none}
body.pg-account .acc-side.acc-adm-side a.anav{color:#2E504D;position:relative}
body.pg-account .acc-side.acc-adm-side a.anav svg{opacity:.85}
body.pg-account .acc-side.acc-adm-side a.anav:hover{background:rgba(5,150,105,.10);color:#064E3B}
body.pg-account .acc-side.acc-adm-side a.anav:hover svg{opacity:1}
body.pg-account .acc-side.acc-adm-side a.anav.on{background:linear-gradient(120deg,#047857,#059669 55%,#10B981);color:#fff;box-shadow:0 12px 22px -10px rgba(4,120,87,.55)}
body.pg-account .acc-side.acc-adm-side a.anav.on::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-54%);font-size:19px;font-weight:500;line-height:1;color:#fff}
body.pg-account .acc-side.acc-adm-side a.anav[href="/admin"]:not(.on){color:#2E504D;background:transparent;box-shadow:none}
body.pg-account .acc-side.acc-adm-side .anav-group{color:#8A9A93}
body.pg-account .acc-side.acc-adm-side a.anav + .anav-group{border-top:1px solid rgba(6,64,43,.13);margin-top:12px;padding-top:13px}
body.pg-account .acc-side.acc-adm-side .anav-pill{left:13px;right:13px;background:linear-gradient(120deg,rgba(5,150,105,.14),rgba(16,185,129,.10));box-shadow:inset 0 0 0 1px rgba(5,150,105,.28)}
body.pg-account:has(.acc-adm-side) .acc-main .adm-top{--adm-line:rgba(6,64,43,.14);--adm-line2:rgba(6,64,43,.08);--adm-ink:#064E3B;--adm-mut:#5B7269;--adm-grad:linear-gradient(120deg,#047857,#059669 55%,#10B981);--adm-gold:linear-gradient(90deg,#047857,#10B981);--adm-sh:0 20px 38px -24px rgba(3,40,26,.28)}

/* === PROFTAB (27 Oct 2026): admin ki Profile Settings ab Site Settings ka pehla (default) Profile tab hai.
   Cards member /account/settings wale hi hain (shared render) — yahan sirf admin panel ke context ki
   layout/spacing/font mirroring hai: single-column stack, .acc-main wali SETFIX rhythm aur SETFONT
   weights (.acc-main scope wali rules ka exact mirror, scope .admin-main .sett-profile ke sath),
   taake spacing aur centred buttons admin mein bhi bilkul wesy hi hon jesy fixed settings forms mein.
   Tabs: 11 tabs ke sath akhri (Security) tab desktop par full-width band mein ata hai (dangling tab khatam);
   <=1100px par akhri tab normal cell ban jata hai — rows 3/3/3/2. */
.admin-main .sett-profile{max-width:920px}
.admin-main .sett-profile .set-grid{display:flex;flex-direction:column;gap:18px}
.admin-main .sett-profile #set-emails form .btn{margin-top:14px}
.admin-main .sett-profile #set-emails>form:has(>h4){display:flex;flex-direction:column;gap:14px}
.admin-main .sett-profile #set-emails>form:has(>h4)>h4,.admin-main .sett-profile #set-emails>form:has(>h4)>p{margin:0}
.admin-main .sett-profile #set-emails>form:has(>h4)>.btn{align-self:center;margin-top:6px}
.admin-main .sett-profile .set-card>p{margin-bottom:0}
.admin-main .sett-profile form.set-card>button.btn{margin-top:6px}
.admin-main .sett-profile .set-card .btn{font-weight:500}
.admin-main .sett-profile .set-card label{font-weight:500}
.admin-main .sett-profile .set-card .st-pill{font-weight:500}
.admin-main .sett-profile .set-card .email-addr-l{font-weight:500}
.admin-main .sett-profile .set-card .set-hint a{font-weight:500}
@media (min-width:1101px){ body:not(.pg-account) .admin-main .sett-tabs .sett-tab:last-child{grid-column:1/-1} }
@media (max-width:1100px){ body:not(.pg-account) .admin-main .sett-tabs .sett-tab:last-child{grid-column:auto} }
/* === END PROFTAB === */

/* CATBTN 20261028: Categories add-form — default hidden, toolbar toggle se khulta hai */
#cat-add-form[hidden]{display:none}
#cat-add-form{animation:catfrm-in .28s ease}
@keyframes catfrm-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#cat-add-form{animation:none}}
/* FAQBTN 20261028: FAQ Editor add-form — Categories (CATBTN) wala hi toggle pattern */
#faq-add-form[hidden]{display:none}
#faq-add-form{animation:catfrm-in .28s ease}
@media (prefers-reduced-motion:reduce){#faq-add-form{animation:none}}

/* ============================================================
   BANDBAND 20261028 — Title band premium card: bare floating
   title ki jagah white surface card (panel ki apni zubaan:
   #fff + var(--adm-line) border + 12px radius + var(--adm-sh)),
   left par page ke apne icon ki pastel chip (KPI palette),
   right cluster: Admin chip · gear · Logout (12px gaps).
   ============================================================ */
.adm-top{background:#fff;border:1px solid var(--adm-line);border-radius:12px;box-shadow:var(--adm-sh);padding:18px 20px;align-items:center;margin:0 0 20px}
.adm-top-l{display:flex;align-items:center;gap:14px;min-width:0}
.adm-top-t{min-width:0}
.adm-top-ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1.5px solid}
.adm-top-ic.bic-em{background:#E2F5EA;border-color:#BFE3D0;color:#059669;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(5,150,105,.14)}
.adm-top-ic.bic-mn{background:#DFF5EC;border-color:#B7E3CC;color:#067647;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(6,118,71,.14)}
.adm-top-ic.bic-bl{background:#E4EEFF;border-color:#BFD6FF;color:#1D4ED8;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(29,78,216,.14)}
.adm-top-ic.bic-pu{background:#EFE9FD;border-color:#D9C6FF;color:#6D28D9;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(109,40,217,.14)}
.adm-top-ic.bic-am{background:#FDEEDC;border-color:#F3DFA8;color:#B45309;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(180,83,9,.14)}
.adm-top-ic.bic-ro{background:#FDE8EC;border-color:#F5C2CC;color:#BE123C;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(190,18,60,.14)}
.adm-top-r{gap:12px;margin-left:auto}
.adm-top-r .adm-gear{margin-left:0}
.adm-logout{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 13px;border-radius:999px;background:#fff;border:1px solid var(--adm-line);color:var(--adm-ink);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap;box-shadow:0 10px 22px -16px rgba(3,40,38,.35);transition:background .18s ease,transform .12s ease}
.adm-logout svg{flex:0 0 auto}
.adm-logout:hover{background:#F2F7F2}
.adm-logout:active{background:#E9F2EA;transform:translateY(1px)}
@media(max-width:700px){.adm-top{padding:14px 16px}.adm-top-l{gap:11px}.adm-top-ic{width:42px;height:42px}.adm-top-r{gap:10px}.adm-logout{width:40px;padding:0;justify-content:center;border-radius:12px}.adm-logout span{display:none}}
/* === /BANDBAND 20261028 === */

/* === ORDCARD-FIX 20261028 — member order cards (Dashboard Recent Orders + My Orders):
   (1) title aik line + ellipsis (title cell minmax(0) se saari squeeze soak karta hai),
   (2) View Invoice ka compact variant (.btn-vi — chhota padding/type, chhota arrow chip),
   (3) DATE collision khatam: cols ke fixed slots barqarar, side flex-none,
   (4) dashboard rows ke darmiyan separator mazeed wazeh (gehra emerald tint, line hi rehti hai). === */
.db-recent .urow-main,.acc-main>.urow.ord-urow .urow-main{min-width:0}
.db-recent .urow-title,.acc-main>.urow.ord-urow .urow-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-recent .urow,.acc-main>.urow.ord-urow{grid-template-columns:auto minmax(0,.8fr) 1fr auto}
.db-recent .urow-cols,.acc-main>.urow.ord-urow .urow-cols{min-width:0}
.db-recent .urow-side,.acc-main>.urow.ord-urow .urow-side{flex:none}
.db-recent .urow{border-top:2px solid rgba(6,95,70,.5)}
.urow-actions .btn-vi{font-size:12.5px;font-weight:500;min-height:34px;padding:6px 34px 6px 13px;border-radius:10px}
.urow-actions .btn-vi::after{width:24px;height:24px;background-size:12px}
.db-recent .urow-actions,.acc-main>.urow.ord-urow .urow-actions{align-items:flex-start}
@media(max-width:1500px){
  .db-recent .urow,.acc-main>.urow.ord-urow{grid-template-columns:auto minmax(0,1fr) auto}
}
@media(max-width:700px){
  .db-recent .urow,.acc-main>.urow.ord-urow{grid-template-columns:auto minmax(0,1fr)}
  .urow-actions .btn-vi{min-height:36px}
}
/* === END ORDCARD-FIX === */