:root{--bg:#f5f8fc;--surface:#fff;--soft:#edf4ff;--text:#091432;--muted:#66718a;--line:#dfe7f1;--blue:#0877ff;--cyan:#24c8ff;--green:#16b96f;--shadow:0 18px 55px rgba(16,52,103,.12);--radius:24px;color-scheme:light}
[data-theme="dark"]{--bg:#070d1d;--surface:#10182b;--soft:#16243f;--text:#f2f7ff;--muted:#9daccc;--line:#253553;--shadow:0 22px 70px rgba(0,0,0,.4);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;transition:background .5s,color .5s;overflow-x:hidden}.ambient{position:fixed;inset:-30%;pointer-events:none;z-index:-1;background:radial-gradient(circle at var(--mx,80%) var(--my,5%),rgba(26,152,255,.12),transparent 26%)}button,input,textarea{font:inherit}button,a{cursor:pointer}img{display:block;max-width:100%}.shell{width:min(1180px,calc(100% - 36px));margin:auto}.site-head{height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{display:flex;align-items:center;gap:10px;color:var(--text);font-family:"Barlow Condensed";font-size:31px;font-weight:900;text-decoration:none;letter-spacing:-1px}.logo-mark{font-style:italic;font-size:52px;line-height:1;background:linear-gradient(160deg,#55d5ff,#0066ee 60%);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 8px 12px rgba(0,119,255,.22))}.head-actions{display:flex;align-items:center;gap:12px}.google-btn,.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:14px;padding:11px 15px;font-weight:700;box-shadow:0 7px 20px rgba(22,55,95,.06)}.google-dot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-right:8px;background:conic-gradient(#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);color:#fff;font-weight:900}.lamp{position:relative;width:54px;height:58px;border:0;background:none}.lamp:before{content:"";position:absolute;width:2px;height:24px;top:-12px;left:26px;background:var(--muted);transform-origin:top}.lamp-shade{position:absolute;left:13px;top:12px;width:30px;height:20px;background:var(--text);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%);transition:.4s}.lamp-glow{position:absolute;inset:26px 0 auto;height:34px;background:radial-gradient(ellipse,rgba(255,207,69,.7),transparent 70%);opacity:0;transition:.4s}.lamp.on .lamp-shade{background:#ffcd42;filter:drop-shadow(0 4px 8px #ffca37)}.lamp.on .lamp-glow{opacity:1}.lamp.swing:before,.lamp.swing .lamp-shade{animation:swing .7s ease}@keyframes swing{25%{transform:rotate(12deg)}55%{transform:rotate(-8deg)}80%{transform:rotate(3deg)}}
.hero{position:relative;min-height:360px;border-radius:30px;overflow:hidden;background:#061b4f url('assets/zstore-hero.png') center/cover;box-shadow:var(--shadow);isolation:isolate}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,14,48,.95) 0%,rgba(2,30,92,.65) 45%,transparent 74%);z-index:-1}.hero-copy{padding:58px;max-width:590px;color:#fff}.eyebrow{margin:0 0 8px;color:#5bd7ff;text-transform:uppercase;font-size:13px;font-weight:800;letter-spacing:2px}.hero h1,.page-hero h1{font:italic 900 clamp(44px,6vw,76px)/.9 "Barlow Condensed";text-transform:uppercase;margin:0 0 18px;letter-spacing:-1px}.hero h1 span{color:#1bc3ff}.hero p{max-width:460px;color:#c9ddff;line-height:1.7}.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.btn{border:0;border-radius:14px;padding:14px 20px;font-weight:800;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--blue),#0059e8);color:#fff;box-shadow:0 12px 28px rgba(0,111,255,.28)}.btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--text)}.btn-white{background:#fff;color:#075dda}.trust-row{display:flex;gap:25px;margin-top:32px;color:#ddecff;font-size:13px;font-weight:700}.trust-row b{color:#49d6ff}.section{padding:54px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}.section-head h2,.block-title{font:800 30px/1.1 "Barlow Condensed";text-transform:uppercase;margin:0}.section-head p{color:var(--muted);margin:6px 0 0}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.service-card{position:relative;min-height:205px;border-radius:22px;padding:28px;overflow:hidden;color:#fff;text-decoration:none;box-shadow:var(--shadow);transition:.35s}.service-card:hover{transform:translateY(-6px) rotateX(2deg)}.service-card h3{font:800 36px/1 "Barlow Condensed";margin:0 0 10px;text-transform:uppercase}.service-card p{max-width:55%;margin:0;line-height:1.55;color:#eef6ff}.service-icon{position:absolute;right:25px;bottom:18px;font-size:78px;filter:drop-shadow(0 12px 12px rgba(0,0,0,.25));transform:rotate(-6deg)}.purple{background:linear-gradient(135deg,#5a18ab,#a741e0)}.blue{background:linear-gradient(135deg,#026ddd,#08bff5)}.green{background:linear-gradient(135deg,#148b2c,#42c23d)}.orange{background:linear-gradient(135deg,#ef7800,#ffad19)}.red{background:linear-gradient(135deg,#b80f20,#ef4e3d)}.brown{background:linear-gradient(135deg,#5a3211,#a86b19)}.teal{background:linear-gradient(135deg,#006d74,#09a4a1)}.violet{background:linear-gradient(135deg,#32118d,#7750d5)}
.page-hero{padding:38px 44px;border-radius:26px;background:linear-gradient(120deg,#073b9c,#0785f5);color:#fff;margin-bottom:26px;box-shadow:var(--shadow)}.page-hero h1{font-size:48px;margin-bottom:8px}.filters{display:flex;gap:10px;overflow:auto;padding-bottom:8px;margin-bottom:24px}.chip{white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:12px 18px;border-radius:12px;font-weight:700}.chip.active{background:var(--blue);border-color:var(--blue);color:#fff}.account-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.account-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(19,55,102,.08);transition:.3s}.account-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.account-art{aspect-ratio:1/1;position:relative;overflow:hidden;background:linear-gradient(145deg,var(--c1,#061b45),var(--c2,#0877ff))}.account-art:before{content:"";position:absolute;width:65%;height:75%;right:-4%;bottom:-5%;background:radial-gradient(circle at 50% 25%,#e9f5ff 0 7%,#6999d0 8% 14%,#102b5d 15% 38%,transparent 39%);filter:drop-shadow(0 15px 10px rgba(0,0,0,.4));transform:rotate(-7deg)}.account-art:after{content:attr(data-game);position:absolute;top:18px;left:18px;color:#fff;font:800 28px "Barlow Condensed";text-transform:uppercase;text-shadow:0 3px 14px #000}.art-stats{position:absolute;left:18px;bottom:20px;color:#fff;font:700 13px/1.7 Manrope;text-transform:uppercase}.card-body{padding:17px}.card-body h3{margin:0 0 8px;font-size:16px}.card-meta{display:flex;justify-content:space-between;align-items:center}.price{font-size:18px;font-weight:900}.small-btn{padding:10px 16px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:800}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-weight:700;margin:8px 0 20px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.main-image,.thumb{aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:0;padding:0;background:linear-gradient(145deg,#061029,#0877ff);position:relative}.main-image:after,.thumb:after{content:"";position:absolute;width:65%;height:80%;left:19%;bottom:-10%;border-radius:45% 45% 20% 20%;background:linear-gradient(150deg,#e7f4ff 0 9%,#172e5c 10% 33%,#07132e 34%);filter:drop-shadow(0 12px 15px #000)}.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.thumb{border:2px solid transparent;cursor:pointer}.thumb.active{border-color:var(--cyan)}.thumb:nth-child(2n){background:linear-gradient(145deg,#1c073a,#903bff)}.thumb:nth-child(3n){background:linear-gradient(145deg,#05291e,#04a773)}.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;margin-top:22px;box-shadow:0 10px 35px rgba(16,52,103,.07)}.description{white-space:pre-line;line-height:1.8;color:var(--muted)}.purchase-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:16px;align-items:stretch}.money-box{background:var(--soft);padding:18px;border-radius:15px}.money-box span{display:block;color:var(--muted);font-size:12px;margin-bottom:10px}.money-box b{font-size:24px}.purchase-actions{display:grid;gap:10px}.secure{margin-top:18px;padding:13px 17px;border-radius:12px;background:rgba(22,185,111,.1);color:var(--green);font-weight:700}
.checkout-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:22px}.stepper{display:grid;grid-template-columns:repeat(4,1fr);margin:24px 0 34px}.step{text-align:center;color:var(--muted);font-size:12px;position:relative}.step:not(:last-child):after{content:"";height:2px;background:var(--line);position:absolute;top:17px;left:58%;right:-42%}.step-num{position:relative;z-index:1;margin:auto auto 9px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:800}.step.active{color:var(--blue)}.step.active .step-num{background:var(--blue);color:#fff}.summary-account{display:flex;gap:18px;align-items:center}.mini-art{width:120px;aspect-ratio:1;border-radius:16px;background:linear-gradient(145deg,#061029,#0877ff)}.pay-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--line)}.pay-row.total{font-size:20px;border:0}.payment-method{width:100%;display:flex;align-items:center;gap:16px;text-align:left;border:2px solid var(--blue);border-radius:15px;padding:18px;background:var(--surface);color:var(--text)}.qris-logo{font-size:24px;font-weight:900}.payment-method small{display:block;color:var(--muted)}.qris-box{text-align:center;animation:pop .35s ease}.qr-grid{display:grid;grid-template-columns:repeat(21,7px);width:max-content;margin:18px auto;box-shadow:0 0 0 14px white}.qr-dot{width:7px;height:7px;background:#fff}.qr-dot.on{background:#050505}.countdown{font-size:24px;font-weight:900;color:var(--blue)}.upload{border:2px dashed var(--line);border-radius:16px;padding:25px;text-align:center}.upload input{display:none}.upload-preview{max-height:160px;border-radius:12px;margin:12px auto}.notice{padding:15px;border-radius:13px;background:#fff8df;color:#7a5d00;font-size:13px}.sticky-card{position:sticky;top:20px;height:max-content}.wide{width:100%}.disabled,.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.demo-badge{display:inline-block;padding:5px 9px;border-radius:30px;background:#ffedaa;color:#705400;font-size:11px;font-weight:900}
.modal-backdrop{position:fixed;inset:0;background:rgba(1,7,20,.72);backdrop-filter:blur(8px);z-index:50;display:grid;place-items:center;padding:20px;animation:fade .2s}.modal{width:min(460px,100%);background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:30px;text-align:center;box-shadow:0 30px 100px #0008;animation:pop .35s}.modal h2{margin:12px 0 8px}.success-ring{margin:auto;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:rgba(22,185,111,.13);color:var(--green);font-size:44px;animation:pulse 1.4s infinite}.lock-anim{font-size:45px;animation:lock .6s ease}.toast{position:fixed;right:20px;bottom:20px;z-index:80;background:var(--text);color:var(--bg);padding:14px 20px;border-radius:13px;box-shadow:var(--shadow);animation:slide .3s}.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat{padding:24px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}.stat b{font-size:32px;display:block}.booking{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.chat-shell{display:grid;grid-template-columns:240px 1fr;min-height:500px}.chat-side{padding:20px;background:var(--soft);border-radius:16px}.chat-main{display:flex;flex-direction:column;padding:20px}.messages{flex:1;display:flex;flex-direction:column;gap:10px;overflow:auto}.message{max-width:75%;padding:11px 14px;border-radius:15px;background:var(--soft)}.message.me{align-self:flex-end;background:var(--blue);color:#fff}.chat-form{display:flex;gap:10px;margin-top:16px}.chat-form input{flex:1;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}.locked-chat{margin:auto;text-align:center}.footer{margin-top:60px;padding:28px 0 40px;color:var(--muted);text-align:center}.reveal{animation:rise .65s both}@keyframes rise{from{opacity:0;transform:translateY(24px)}}@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.9)}}@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(22,185,111,0)}}@keyframes lock{50%{transform:scale(1.2) rotate(-8deg)}}@keyframes slide{from{transform:translateX(120%)}}
@media(max-width:820px){.shell{width:min(100% - 24px,680px)}.site-head{height:72px}.google-btn{font-size:0;padding:9px}.google-dot{margin:0}.logo{font-size:26px}.logo-mark{font-size:43px}.hero{min-height:470px;background-position:67% center}.hero:after{background:linear-gradient(0deg,rgba(1,14,48,.98),rgba(2,20,65,.25))}.hero-copy{padding:245px 25px 28px}.hero h1{font-size:48px}.trust-row{gap:12px;flex-wrap:wrap}.service-grid,.account-grid,.detail-grid,.checkout-layout{grid-template-columns:1fr}.service-card{min-height:170px}.account-grid{grid-template-columns:repeat(2,1fr)}.purchase-grid{grid-template-columns:1fr 1fr}.purchase-actions{grid-column:1/-1}.sticky-card{position:static}.admin-grid{grid-template-columns:1fr}.chat-shell{grid-template-columns:1fr}.chat-side{display:flex;gap:8px}.page-hero{padding:28px}.step{font-size:10px}.section{padding:35px 0}}
@media(max-width:520px){.account-grid{grid-template-columns:1fr}.hero-copy{padding-top:225px}.hero h1{font-size:42px}.service-grid{grid-template-columns:1fr}.service-card p{max-width:65%}.section-head{align-items:start;flex-direction:column}.purchase-grid{grid-template-columns:1fr}.purchase-actions{grid-column:auto}.summary-account{align-items:flex-start}.mini-art{width:92px}.stepper{margin-inline:-5px}.page-hero h1{font-size:38px}.main-image{border-radius:11px}.panel{padding:18px}.modal{padding:24px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* SPA component layer */
#site-header{display:none}.topbar,.view,.bottom-nav{width:min(1180px,calc(100% - 36px));margin:auto}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between}.brand{border:0;background:none;color:var(--text);font:900 31px "Barlow Condensed"}.brand span{font-style:italic;font-size:52px;color:var(--blue);vertical-align:middle}.top-actions{display:flex;align-items:center;gap:12px}.google,.theme-toggle{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:14px;padding:11px 15px;font-weight:800}.theme-toggle{height:58px;display:flex;align-items:center;gap:5px;overflow:hidden}.theme-toggle i{display:block;width:2px;height:36px;background:var(--muted);position:relative;transform-origin:top;animation:swing 3s ease-in-out infinite}.theme-toggle i:after{content:"";position:absolute;width:22px;height:15px;left:-10px;top:24px;background:var(--text);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}[data-theme=dark] .theme-toggle i:after{background:#ffd65a;filter:drop-shadow(0 6px 8px #ffc400)}.view{min-height:calc(100vh - 170px)}.hero .primary,.primary,.outline{border:0;border-radius:13px;padding:14px 20px;font-weight:800}.primary{background:linear-gradient(135deg,var(--blue),#0057dd);color:#fff;box-shadow:0 10px 24px #0877ff44}.outline{background:transparent;color:var(--blue);border:1px solid var(--blue)}.hero em,.catalog-hero em{font-style:normal;color:#1bc3ff}.hero-z{position:absolute;right:8%;top:14%;font:italic 900 170px/1 "Barlow Condensed";color:#0ca8ff44}.hero-z span{display:block;font-size:34px}.hero-stats{position:absolute;left:58px;bottom:28px;display:flex;gap:28px;color:#ddecff;font-size:12px;font-weight:800}.section-head{margin-top:54px}.service-card{border:0;text-align:left}.service-card.s0{background:linear-gradient(135deg,#5a18ab,#a741e0)}.service-card.s1{background:linear-gradient(135deg,#026ddd,#08bff5)}.service-card.s2{background:linear-gradient(135deg,#148b2c,#42c23d)}.service-card.s3{background:linear-gradient(135deg,#ef7800,#ffad19)}.service-card.s4{background:linear-gradient(135deg,#b80f20,#ef4e3d)}.service-card.s5{background:linear-gradient(135deg,#5a3211,#a86b19)}.service-card.s6{background:linear-gradient(135deg,#006d74,#09a4a1)}.service-card.s7{background:linear-gradient(135deg,#32118d,#7750d5)}
.catalog-hero{min-height:260px;border-radius:28px;padding:42px;background:linear-gradient(120deg,#052a78,#0877ff);color:#fff;display:flex;justify-content:space-between;overflow:hidden}.catalog-hero h1,.admin-head h1,.checkout-title h1,.detail-head h1{font:900 48px/1 "Barlow Condensed";margin:5px 0}.catalog-avatar{font-size:120px;filter:drop-shadow(0 18px 18px #001c5d)}.catalog-title,.detail-head,.admin-head{display:flex;justify-content:space-between;align-items:center;margin:38px 0 22px}.catalog-title h2{margin:3px 0;font-size:30px}.search{padding:12px 15px;border:1px solid var(--line);background:var(--surface);border-radius:13px}.search input{border:0;outline:0;background:transparent;color:var(--text)}.filters button{white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:11px;padding:12px 18px;font-weight:800}.filters button.active{background:var(--blue);color:#fff}.card-art{display:block;width:100%;border:0;padding:0}.game-art{aspect-ratio:1;position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 68% 38%,color-mix(in srgb,var(--game),white 25%),transparent 18%),linear-gradient(145deg,#040a20,var(--game));text-align:left}.game-art:before{content:"";position:absolute;width:48%;height:65%;right:9%;bottom:-10%;border-radius:45% 45% 15% 15%;background:linear-gradient(145deg,#e5f1ff 0 10%,#14294f 11% 38%,#071126 39%);filter:drop-shadow(0 15px 12px #000)}.art-grid{position:absolute;inset:0;background:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:22px 22px}.art-emoji{position:absolute;right:20%;top:34%;font-size:45px;z-index:2}.game-art small,.game-art strong,.game-art i{position:absolute;left:18px;z-index:2}.game-art small{top:18px;font-weight:900}.game-art strong{bottom:42px;font:800 24px "Barlow Condensed";text-transform:uppercase}.game-art i{bottom:20px;font-size:11px}.card-info{padding:17px}.card-info h3{margin:7px 0}.status-dot{font-size:11px;color:var(--green);font-weight:800}.tags{display:flex;gap:7px}.tags span{padding:5px 8px;background:var(--soft);border-radius:7px;font-size:10px}.card-info footer{display:flex;justify-content:space-between;align-items:end;margin-top:16px}.card-info footer small,.card-info footer strong{display:block}.card-info footer button{border:0;background:var(--blue);color:#fff;padding:9px 14px;border-radius:9px;font-weight:800}
.verified{color:var(--green);font-weight:800}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:7px;background:var(--surface);padding:14px;border-radius:23px;box-shadow:var(--shadow)}.gallery-main,.gallery-thumbs button{border:0;padding:0;border-radius:12px;overflow:hidden}.gallery-main .game-art{width:100%}.gallery-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.gallery-thumbs .game-art small,.gallery-thumbs .game-art strong,.gallery-thumbs .game-art i{display:none}.gallery-thumbs button.active{outline:2px solid var(--cyan)}.detail-layout{display:grid;grid-template-columns:1.4fr .7fr;gap:20px}.description h2{margin:4px 0}.description li{list-style:none;padding:9px 0;border-bottom:1px solid var(--line);color:var(--muted)}.price-row{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px dashed var(--line)}.purchase .wide{margin-top:12px}.guarantee{color:var(--green);font-size:12px;background:#16b96f15;padding:12px;border-radius:10px}.modal-art .game-art{max-width:300px;margin:auto}.modal-x{position:absolute;right:18px;top:12px;border:0;background:none;color:var(--muted);font-size:26px}.modal{position:relative}.modal-icon{margin:auto;width:70px;height:70px;display:grid;place-items:center;border-radius:50%;background:#16b96f20;color:var(--green);font-size:35px;animation:pulse 1.5s infinite}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin:28px 0}.steps div{display:grid;justify-items:center;text-align:center;color:var(--muted);font-size:11px}.steps b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--soft);margin-bottom:8px}.steps .active b,.steps .done b{background:var(--blue);color:#fff}.checkout-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.order-account{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center}.summary p{display:flex;justify-content:space-between}.summary small{display:block;background:#0877ff12;color:var(--blue);padding:12px;border-radius:10px}.qris-method{width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:2px solid var(--blue);background:var(--surface);color:var(--text);padding:16px;border-radius:13px}.qris-method span{flex:1}.qris-method small{display:block;color:var(--muted)}.qr-wrap{text-align:center}.qr-grid{display:grid;grid-template-columns:repeat(21,7px);width:max-content;margin:24px auto;padding:12px;background:#fff}.qr-grid i{width:7px;height:7px}.qr-grid i.on{background:#000}.qr-grid.expired{opacity:.25}.qr-wrap small,.qr-wrap .text-btn{display:block;margin:8px auto}.dropzone{display:grid;justify-items:center;gap:5px;padding:22px;border:2px dashed var(--line);border-radius:13px}.dropzone input{display:none}.dropzone span{font-size:32px;color:var(--blue)}#proof-preview{display:flex;gap:10px;align-items:center;margin:12px 0}#proof-preview img{width:65px;height:65px;object-fit:cover;border-radius:9px}#proof-preview small{display:block;color:var(--muted)}
.bottom-nav{display:flex;justify-content:center;gap:6px;margin-top:60px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 0 0}.bottom-nav button{min-width:110px;border:0;background:none;color:var(--muted);padding:8px;border-radius:10px}.bottom-nav button b,.bottom-nav button span{display:block}.bottom-nav button.active{background:var(--soft);color:var(--blue)}.admin-head{padding:28px;background:linear-gradient(135deg,#061c4c,#0877ff);border-radius:22px;color:#fff}.live-pill{color:#7bffba}.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.admin-stats article{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:17px}.admin-stats b{font-size:32px;display:block}.admin-order>div,.admin-actions,.chat header{display:flex;align-items:center;justify-content:space-between;gap:12px}.order-state{background:var(--soft);padding:8px 12px;border-radius:30px}.admin-actions{justify-content:flex-start!important;margin-top:18px}.chat-locked{text-align:center;padding:70px}.chat-locked b{font-size:45px}.messages{min-height:260px;display:flex;flex-direction:column;gap:9px}.messages p{max-width:70%;padding:10px 13px;border-radius:12px;background:var(--soft);display:grid}.messages p.mine{align-self:flex-end;background:var(--blue);color:#fff}.messages small{opacity:.7}#chat-form{display:flex;gap:8px}#chat-form input,#chat-form select{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}#chat-form input{flex:1}.private-toggle{font-size:12px}.private-toggle input{margin-right:7px}
@media(max-width:820px){.topbar,.view,.bottom-nav{width:min(100% - 24px,680px)}.topbar{height:72px}.google span{display:none}.hero-z{font-size:110px;top:8%}.hero-stats{left:24px;bottom:18px}.catalog-hero{padding:26px}.catalog-avatar{font-size:80px}.catalog-title{align-items:flex-start;flex-direction:column;gap:14px}.gallery,.detail-layout,.checkout-grid{grid-template-columns:1fr}.order-account{grid-template-columns:120px 1fr}.admin-stats{grid-template-columns:1fr}.bottom-nav{position:sticky;bottom:0;z-index:20;overflow:auto;justify-content:flex-start}.bottom-nav button{min-width:83px}.chat header{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.brand{font-size:24px}.brand span{font-size:39px}.hero-z{font-size:85px}.hero-stats{display:none}.catalog-avatar{display:none}.catalog-hero h1,.admin-head h1,.checkout-title h1,.detail-head h1{font-size:38px}.detail-head{align-items:flex-start;flex-direction:column}.steps span{font-size:9px}.order-account{grid-template-columns:90px 1fr}.admin-order>div{align-items:flex-start;flex-direction:column}.admin-actions{align-items:stretch;flex-direction:column}.chat header{align-items:flex-start}.private-toggle{font-size:10px}#chat-form{display:grid;grid-template-columns:1fr auto}#chat-form select{grid-column:1/-1}}

.game-art.real-art:before{display:none}.real-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease,filter .35s}.real-art:hover img{transform:scale(1.045)}.art-shade{position:absolute;inset:0;background:linear-gradient(180deg,#02081918 22%,#020819e8 100%)}.real-art.variant-1 img{object-position:25% center}.real-art.variant-2 img{object-position:75% center}.real-art.variant-3 img{transform:scale(1.18)}.real-art.variant-4 img{filter:saturate(1.3) contrast(1.08)}.real-art.variant-5 img{object-position:center top}.real-art.variant-6 img{filter:hue-rotate(16deg)}.real-art.variant-7 img{transform:scale(1.12);object-position:left}.real-art.variant-8 img{filter:brightness(.82) saturate(1.35);object-position:right}.gallery-thumbs .real-art:hover img{transform:scale(1.1)}

/* Reference-layout refinements */
body{background:var(--surface)}
.topbar,.view,.bottom-nav{width:min(1120px,calc(100% - 32px))}
.topbar{height:92px}
.brand{letter-spacing:-1.3px}
.google,.theme-toggle{box-shadow:0 4px 18px rgba(10,37,76,.08)}
.hero{min-height:350px;border-radius:20px}
.hero-copy{padding:50px 54px}
.hero h1{font-size:clamp(48px,5vw,68px)}
.service-grid{gap:16px}
.service-card{min-height:190px;border-radius:16px;padding:26px}
.service-card h3{font-size:34px}
.catalog-hero{min-height:225px;border-radius:18px;padding:34px 40px}
.catalog-hero h1{font-size:46px}
.account-grid{gap:15px}
.account-card{border-radius:14px;box-shadow:0 5px 20px rgba(19,55,102,.08)}
.card-info{padding:13px}
.card-info footer{margin-top:12px}
.gallery,.gallery-main,.gallery-thumbs,.gallery-thumbs button,.game-art{min-width:0}
.gallery{border-radius:18px;padding:10px}
.gallery-main,.gallery-thumbs button{display:block;width:100%}
.gallery-main .game-art,.gallery-thumbs .game-art{width:100%;aspect-ratio:1}
.panel{border-radius:16px;padding:22px}
.bottom-nav{margin-top:35px;border-radius:16px;position:sticky;bottom:0;z-index:20;box-shadow:0 -8px 28px rgba(13,39,77,.08)}

@media(max-width:820px){
  .topbar,.view,.bottom-nav{width:min(100% - 24px,720px)}
  .topbar{height:78px}
  .hero{min-height:350px;background-position:62% center}
  .hero:after{background:linear-gradient(90deg,rgba(1,14,48,.94),rgba(2,30,92,.45) 58%,transparent)}
  .hero-copy{padding:38px 30px;max-width:62%}
  .hero h1{font-size:46px}
  .hero-copy p{font-size:14px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .service-card{min-height:154px;padding:20px}
  .service-card h3{font-size:27px}
  .service-card p{font-size:13px;max-width:67%}
  .service-icon{font-size:52px;right:16px;bottom:15px}
  .account-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gallery{grid-template-columns:minmax(0,1fr);gap:7px}
  .gallery-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail-layout{gap:0}
}

@media(max-width:520px){
  .topbar,.view,.bottom-nav{width:calc(100% - 20px)}
  .topbar{height:72px}
  .google{padding:9px 10px}
  .theme-toggle{height:48px;padding:7px 10px}
  .theme-toggle i{height:31px}
  .hero{min-height:315px;border-radius:15px;background-position:64% center}
  .hero:after{background:linear-gradient(90deg,rgba(1,14,48,.96),rgba(2,25,75,.55) 68%,transparent)}
  .hero-copy{max-width:76%;padding:30px 20px}
  .hero h1{font-size:38px;line-height:.92}
  .hero-copy p{font-size:12px;line-height:1.5}
  .hero-z{display:none}
  .section-head{margin-top:30px;margin-bottom:14px}
  .section-head h2{font-size:25px}
  .section-head>p{display:none}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .service-card{min-height:132px;border-radius:12px;padding:15px}
  .service-card h3{font-size:21px;max-width:78%;margin-bottom:6px}
  .service-card p{font-size:10px;line-height:1.4;max-width:72%}
  .service-icon{font-size:38px;right:10px;bottom:10px}
  .catalog-hero{min-height:185px;padding:24px 20px;border-radius:15px}
  .catalog-hero h1{font-size:35px}
  .catalog-title{margin:26px 0 16px}
  .search,.search input{width:100%}
  .filters{gap:7px;margin-bottom:16px}
  .filters button{padding:9px 12px;font-size:11px}
  .account-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .account-card{border-radius:11px}
  .card-info{padding:10px}
  .card-info h3{font-size:13px}
  .tags{gap:4px;flex-wrap:wrap}
  .tags span{font-size:8px;padding:4px 5px}
  .card-info footer{align-items:center;gap:4px}
  .card-info footer strong{font-size:11px}
  .card-info footer button{font-size:9px;padding:7px}
  .detail-head{margin:22px 0 15px}
  .detail-head h1{font-size:34px}
  .gallery{padding:7px;border-radius:14px;overflow:hidden}
  .panel{padding:16px;margin-top:14px}
  .description{font-size:13px}
  .bottom-nav{width:100%;border-width:1px 0 0;margin-top:25px;border-radius:16px 16px 0 0;padding:8px}
  .bottom-nav button{min-width:25%;font-size:11px;padding:7px 3px}
}

/* Detail account and checkout — screenshot-aligned responsive layouts */
.detail-page{max-width:960px;margin:0 auto;padding-bottom:12px}
.detail-banner{min-height:132px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:18px;padding:24px 30px 38px;border-radius:21px 21px 8px 8px;background:linear-gradient(120deg,#073894 0%,#075fd5 64%,#0877ff 100%);color:#fff;box-shadow:0 14px 34px rgba(7,74,177,.18)}
.detail-banner h1{font:800 25px/1.1 Manrope,sans-serif;letter-spacing:-.5px;margin:0 0 6px}
.detail-banner p{font-size:13px;margin:0;color:#dceaff}
.detail-back{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);line-height:1;transition:background .2s,transform .2s}
.detail-back svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.detail-back:hover{background:rgba(255,255,255,.14);transform:translateX(-3px)}
.detail-trust,.checkout-trust{display:flex;align-items:center;gap:9px;color:#fff;font-size:11px;font-weight:800;line-height:1.15}
.detail-trust b,.checkout-trust b{width:36px;height:40px;display:grid;place-items:center;font-size:35px;font-weight:400;line-height:1}
.detail-trust svg{width:29px;height:33px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.checkout-trust svg{width:29px;height:33px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.modal-art-clean{overflow:hidden;border-radius:10px;background:#061029}
.modal-art-clean img{display:block;width:100%;max-height:58vh;object-fit:contain}
.modal-clean .modal-body{margin:14px 0 18px}
.detail-page .detail-gallery{position:relative;z-index:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin:-22px 12px 0;padding:13px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 12px 32px rgba(12,44,91,.12)}
.detail-page .gallery-main,.detail-page .gallery-thumbs button{border-radius:9px;background:#061029;transition:transform .2s,outline-color .2s}
.detail-page .gallery-main:hover,.detail-page .gallery-thumbs button:hover{transform:translateY(-1px)}
.detail-page .gallery-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:5px}
.detail-page .gallery-thumbs button{height:100%}
.detail-page .gallery-thumbs button.active{outline:2px solid #1ba9ff;outline-offset:-2px}
.detail-page .panel{border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 8px 26px rgba(20,48,89,.08)}
.detail-description{margin-top:20px;padding:25px 28px;white-space:normal!important;color:var(--text)!important;line-height:1.55!important}
.detail-description h2,.detail-purchase h2,.panel-title{margin:0 0 17px;font:800 17px/1.25 Manrope,sans-serif;color:var(--text)}
.detail-copy{margin:0 0 8px;color:var(--muted);font-size:13px;white-space:pre-line}
.description-editor{display:grid;gap:9px;margin:0 0 17px;padding:14px;border-radius:12px;background:var(--soft)}
.description-editor label{font-size:12px;font-weight:800;color:var(--text)}
.description-editor textarea{width:100%;min-height:96px;resize:vertical;padding:12px;border:1px solid var(--line);border-radius:9px;outline:none;background:var(--surface);color:var(--text);font-size:12px;line-height:1.55}
.description-editor textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,119,255,.1)}
.description-editor>div{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px}
.description-editor>div span{white-space:nowrap}.description-editor button{justify-self:end;padding:9px 14px;border-radius:8px;font-size:11px}
.admin-description>h2{margin:0 0 4px}.admin-description>p{margin:0 0 14px;color:var(--muted);font-size:12px}.admin-description .description-editor{margin-bottom:0}
.account-features{padding:0;margin:0}
.detail-description .account-features li{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 0;border-bottom:1px solid var(--line);list-style:none;color:var(--text);font-size:13px}
.detail-description .account-features li:last-child{border-bottom:0}
.account-features li>span{flex:0 0 19px;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:900}
.detail-purchase{margin-top:20px;padding:25px 28px}
.purchase-grid-ref{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:14px;align-items:stretch}
.purchase-value{min-width:0;display:flex;flex-direction:column;justify-content:center;min-height:116px;padding:20px;border-radius:13px;background:color-mix(in srgb,var(--soft) 88%,#fff 12%)}
.purchase-value>span{margin-bottom:16px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.2px}
.purchase-value strong{display:flex;align-items:center;gap:8px;font-size:21px;white-space:nowrap}
.purchase-value i,.checkout-summary .total i{font-style:normal;font-size:22px}
.purchase-value i img{width:27px;height:27px;display:block;filter:drop-shadow(0 2px 2px rgba(125,89,0,.18))}.status-button{display:inline-flex;align-items:center;justify-content:center;gap:9px}.status-button img{width:21px;height:21px;display:block}
.checkout-summary .total i img{width:22px;height:22px;display:block}
.purchase-cta{display:grid;grid-template-rows:1fr 1fr;gap:10px}
.purchase-cta button{min-height:52px;border-radius:11px;font-size:14px;letter-spacing:.2px;box-shadow:none}
.purchase-cta button span{margin-right:7px;font-size:18px}
.detail-purchase .guarantee{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px 16px;border-radius:10px;background:rgba(22,185,111,.09);color:var(--green);font-size:12px;font-weight:700}
.detail-purchase .guarantee>span{font-size:21px}
.detail-purchase .guarantee>b{margin-left:auto;font-size:25px;font-weight:500}
.detail-purchase .guarantee img{width:21px;height:21px;display:block}.detail-purchase .guarantee>b img{width:18px;height:18px}

.checkout-page{max-width:760px;margin:0 auto;padding:4px 0 14px}
.checkout-back{display:inline-flex;align-items:center;gap:8px;margin:1px 0 18px;padding:7px 0;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:750}
.checkout-back span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;box-shadow:0 5px 13px rgba(8,119,255,.25);transition:transform .2s}
.checkout-back span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.checkout-back:hover span{transform:translateX(-3px)}
.checkout-heading{display:flex;align-items:center;justify-content:space-between;gap:22px}
.checkout-heading h1{font:900 35px/1 Manrope,sans-serif;letter-spacing:-1.5px;margin:0 0 11px;color:var(--text)}
.checkout-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.checkout-trust{color:var(--blue);font-size:11px}
.checkout-steps{position:relative;margin:34px 2px 30px}
.checkout-steps>div{position:relative;isolation:isolate;font-size:11px;line-height:1.45}
.checkout-steps>div:not(:last-child):after{content:"";position:absolute;z-index:-1;top:17px;left:calc(50% + 19px);width:calc(100% - 38px);height:0;border-top:2px dashed var(--line);background:none}
.checkout-steps b{width:36px;height:36px;margin-bottom:10px;border:1px solid var(--line);background:var(--surface);box-shadow:0 3px 9px rgba(17,45,84,.08);font-size:13px}
.checkout-steps .active,.checkout-steps .done{color:var(--blue);font-weight:700}
.checkout-steps .active b,.checkout-steps .done b{border-color:var(--blue);background:var(--blue);box-shadow:0 7px 16px rgba(8,119,255,.25);color:#fff}
.checkout-page>.panel{margin-top:16px;padding:22px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:0 7px 24px rgba(17,45,84,.07)}
.checkout-page .panel-title{font-size:13px;letter-spacing:.1px;margin-bottom:17px}
.checkout-page .order-account{grid-template-columns:182px 1fr;gap:20px;align-items:start}
.order-art{overflow:hidden;border-radius:13px;background:#061029}
.order-art .game-art{width:100%;aspect-ratio:1}
.order-info h2{margin:2px 0 10px;font-size:18px;line-height:1.2;text-transform:uppercase}
.order-info dl{margin:0}
.order-info dl>div{display:grid;grid-template-columns:94px 1fr;gap:10px;align-items:center;min-height:30px;font-size:12px}
.order-info dt{color:var(--muted)}
.order-info dd{margin:0;font-weight:750}
.rating{margin-left:5px;color:#ffbd21;letter-spacing:1px}
.text-btn{border:0;background:transparent;color:var(--blue);font-weight:800;padding:0}
.order-info .text-btn{margin-top:9px;font-size:12px}
.order-info .text-btn span{margin-left:10px;color:var(--text);font-size:21px;vertical-align:-2px}
.checkout-summary{margin-top:19px;padding:18px;border:1px solid var(--line);border-radius:11px}
.checkout-summary p{margin:0;padding:8px 0;font-size:12px}
.checkout-summary hr{height:1px;margin:7px 0;border:0;border-top:1px dashed var(--line)}
.checkout-summary .total{align-items:center;padding:10px 0 12px;font-weight:800}
.checkout-summary .total b{display:flex;align-items:center;gap:7px;color:var(--blue);font-size:22px}
.checkout-summary>small{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:9px;background:rgba(8,119,255,.08);color:var(--blue);font-size:11px;line-height:1.45}
.checkout-summary>small>b{font-size:17px;line-height:1}
.checkout-payment .qris-method{min-height:69px;padding:13px 17px;border-width:1.5px;border-radius:10px;transition:transform .2s,box-shadow .2s}
.checkout-payment .qris-method:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(8,119,255,.1)}
.checkout-payment .qris-method>i{font-style:normal;font-size:27px}
.qris-wordmark{flex:0 0 58px;width:58px;height:26px;display:flex;align-items:center}
.qris-wordmark img{display:block;width:100%;height:100%;object-fit:contain}
[data-theme="dark"] .qris-wordmark img{filter:invert(1) brightness(1.3)}
.qris-method span strong{font-size:13px}
.qris-method span small{margin-top:2px;font-size:10px}
.checkout-payment .qr-wrap{margin:20px auto 4px;padding-top:18px;border-top:1px solid var(--line);animation:pop .3s ease}
.checkout-payment .qr-grid{border:1px solid #d9e2ed;border-radius:5px;box-shadow:0 8px 28px rgba(7,25,57,.12)}
.qris-image{display:block;width:min(260px,80vw);height:auto;margin:20px auto 14px;padding:10px;border:1px solid #d9e2ed;border-radius:8px;background:#fff;box-shadow:0 8px 28px rgba(7,25,57,.12)}
.qris-image.expired{opacity:.22;filter:grayscale(1)}
.qr-loading{padding:24px;text-align:center;color:var(--blue);font-weight:800}
.checkout-upload{border-style:solid!important;text-align:left!important}
.checkout-upload .dropzone{display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:17px 18px;border-width:1.5px;border-radius:10px;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.checkout-upload .dropzone:hover{border-color:var(--blue);background:rgba(8,119,255,.035)}
.checkout-upload .upload-symbol{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--blue);border-radius:50%;color:var(--blue);font-size:25px;font-weight:900;line-height:1}
.checkout-upload .upload-symbol img{width:25px;height:25px;display:block}
.dropzone-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.dropzone-copy b{font-size:12px}
.dropzone-copy small{color:var(--muted);font-size:10px}
.file-pill{flex:0 0 auto;padding:10px 16px;border:1px solid var(--blue);border-radius:8px;color:var(--blue);font-size:11px}
.checkout-upload #proof-preview:empty{display:none}
.checkout-upload #proof-preview{padding:10px;border-radius:10px;background:var(--soft)}
.payment-notice{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border:1px solid rgba(228,181,41,.35);border-radius:10px;background:rgba(255,195,36,.08);color:var(--text);font-size:10px;line-height:1.55}
.payment-notice>span{color:#e7b315;font-size:22px}
.payment-notice p{flex:1;margin:0}
.payment-notice p strong{color:var(--blue)}
.payment-notice>i{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;font-style:normal}
.payment-notice>i img{width:100%;height:100%;display:block;object-fit:contain}
.payment-notice>.whatsapp-mark{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;text-decoration:none}.payment-notice>.whatsapp-mark img{width:100%;height:100%;display:block;object-fit:contain}.maintenance{max-width:700px;margin:80px auto!important;padding:60px 24px!important;text-align:center}.maintenance h1{margin:0 0 12px}.maintenance p{color:var(--muted)}
.checkout-submit{width:100%;min-height:58px;margin-top:18px;border-radius:10px;text-transform:uppercase;font-size:13px;letter-spacing:.25px}
.checkout-submit:before{content:"\1f512";margin-right:9px}
.checkout-submit:not(:disabled):before{content:"\2713"}
.checkout-submit:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}
.checkout-secure{margin:11px 0 0;text-align:center;color:var(--muted);font-size:10px}
.booking-lock{width:50px;height:50px;display:grid;place-items:center;margin:0 auto 10px;border-radius:50%;background:rgba(8,119,255,.1);font-size:27px;animation:lock .7s ease}

@media(max-width:680px){
  .detail-page{max-width:100%}
  .detail-banner{grid-template-columns:38px 1fr auto;gap:11px;min-height:113px;padding:19px 17px 32px;border-radius:16px 16px 6px 6px}
  .detail-banner h1{font-size:20px}
  .detail-banner p{font-size:11px}
  .detail-back{width:36px;height:36px}
  .detail-back svg{width:21px;height:21px}
  .detail-trust{gap:5px;font-size:8px}
  .detail-trust b{width:26px;height:30px;font-size:27px}
  .detail-trust svg{width:23px;height:27px}
  .detail-page .detail-gallery{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;margin:-17px 7px 0;padding:7px;border-radius:15px}
  .detail-page .gallery-thumbs{gap:3px}
  .detail-page .gallery-main,.detail-page .gallery-thumbs button{border-radius:6px}
  .detail-description,.detail-purchase{margin-top:14px;padding:19px 17px}
  .detail-description h2,.detail-purchase h2{font-size:14px;margin-bottom:13px}
  .detail-copy{font-size:11px}
  .description-editor{margin-bottom:13px;padding:11px}.description-editor textarea{min-height:88px;font-size:11px}.description-editor>div{font-size:8px}.description-editor button{width:100%;font-size:10px}
  .detail-description .account-features li{min-height:39px;gap:9px;padding:8px 0;font-size:11px}
  .account-features li>span{flex-basis:17px;width:17px;height:17px;font-size:10px}
  .purchase-grid-ref{grid-template-columns:1fr 1fr;gap:9px}
  .purchase-value{min-height:92px;padding:14px}
  .purchase-value>span{margin-bottom:11px;font-size:9px}
  .purchase-value strong{gap:5px;font-size:15px}
  .purchase-value i{font-size:16px}
  .purchase-cta{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:1fr}
  .purchase-cta button{min-height:47px;font-size:11px}
  .detail-purchase .guarantee{margin-top:11px;padding:10px 12px;font-size:9px}
  .checkout-page{max-width:100%;padding-top:0}
  .checkout-back{margin-bottom:10px}
  .checkout-heading h1{font-size:29px}
  .checkout-heading p{font-size:11px}
  .checkout-trust{gap:5px;font-size:8px}
  .checkout-trust b{width:29px;height:31px;font-size:28px}
  .checkout-steps{margin:27px -4px 24px}
  .checkout-steps>div{font-size:8px}
  .checkout-steps b{width:31px;height:31px;margin-bottom:7px;font-size:11px}
  .checkout-steps>div:not(:last-child):after{top:15px;left:calc(50% + 17px);width:calc(100% - 34px)}
  .checkout-page>.panel{margin-top:12px;padding:16px;border-radius:12px}
  .checkout-page .panel-title{font-size:11px;margin-bottom:13px}
  .checkout-page .order-account{grid-template-columns:112px 1fr;gap:13px}
  .order-info h2{font-size:14px;margin-top:0}
  .order-info dl>div{grid-template-columns:68px 1fr;gap:5px;min-height:23px;font-size:9px}
  .rating{margin-left:2px;letter-spacing:0}
  .order-info .text-btn{font-size:9px;margin-top:6px}
  .checkout-summary{margin-top:15px;padding:14px}
  .checkout-summary p{font-size:10px;padding:7px 0}
  .checkout-summary .total b{font-size:17px}
  .checkout-summary>small{font-size:9px;padding:10px}
  .checkout-payment .qris-method{min-height:62px;padding:11px 13px}
  .qris-wordmark{flex-basis:48px;width:48px;height:22px}
  .checkout-upload .dropzone{gap:9px;padding:13px}
  .checkout-upload .upload-symbol{flex-basis:32px;width:32px;height:32px;font-size:20px}
  .dropzone-copy b{font-size:10px}
  .dropzone-copy small{font-size:8px}
  .file-pill{padding:8px 10px;font-size:9px}
  .payment-notice{gap:8px;padding:11px;font-size:8px}
  .checkout-submit{min-height:51px;margin-top:13px;font-size:10px}
}

@media(max-width:380px){
  .detail-trust span,.checkout-trust span{display:none}
  .checkout-heading p br{display:none}
  .checkout-page .order-account{grid-template-columns:96px 1fr}
  .order-info dl>div{grid-template-columns:55px 1fr}
  .rating{font-size:8px}
  .checkout-upload .dropzone{display:grid;grid-template-columns:34px 1fr}
  .file-pill{grid-column:1/-1;text-align:center}
}

/* Polished Z Store header */
.topbar{
  position:relative;
  z-index:45;
  height:94px;
  gap:18px;
}
.brand{
  min-width:0;
  min-height:58px;
  padding:7px 3px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:0;
  background:transparent;
  color:var(--text);
  line-height:1;
  overflow:visible;
  transition:transform .22s ease,filter .22s ease;
}
.brand:hover{transform:translateY(-1px);filter:drop-shadow(0 7px 12px rgba(8,119,255,.18))}
.brand:active{transform:translateY(0) scale(.98)}
.brand .brand-mark{
  display:block;
  width:auto;
  height:auto;
  flex:0 0 auto;
  overflow:visible;
  color:transparent!important;
  background:linear-gradient(150deg,#55d9ff 3%,#078cff 46%,#0755e8 82%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font:900 50px/.9 "Arial Black",Manrope,sans-serif!important;
  letter-spacing:-2px!important;
  transform:skewX(-7deg);
  filter:drop-shadow(0 6px 9px rgba(4,116,255,.18));
}
.brand .brand-mark::after{display:none}
.brand .brand-word{
  display:block;
  color:var(--text);
  font:italic 900 42px/.95 "Barlow Condensed",Manrope,sans-serif;
  letter-spacing:-1.35px;
  white-space:nowrap;
}
.top-actions{display:flex;align-items:center;gap:10px;min-width:0}
.theme-toggle,.google{
  height:52px;
  margin:0;
  border:1px solid color-mix(in srgb,var(--line),var(--blue) 7%);
  border-radius:15px;
  background:color-mix(in srgb,var(--surface),var(--soft) 10%);
  color:var(--text);
  box-shadow:0 7px 24px rgba(14,46,94,.09),inset 0 1px 0 rgba(255,255,255,.62);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .35s ease;
}
[data-theme="dark"] .theme-toggle,[data-theme="dark"] .google{box-shadow:0 9px 28px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.05)}
.theme-toggle:hover,.google:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue),var(--line) 30%);box-shadow:0 12px 30px rgba(8,119,255,.14)}
.theme-toggle:active,.google:active{transform:translateY(0) scale(.98)}
.brand:focus-visible,.theme-toggle:focus-visible,.google:focus-visible,.google-menu button:focus-visible{outline:3px solid color-mix(in srgb,var(--blue),transparent 62%);outline-offset:3px}

.theme-toggle{
  position:relative;
  width:52px;
  min-width:52px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  overflow:hidden;
  isolation:isolate;
}
.theme-toggle::before{
  content:"";
  position:absolute;
  width:56px;
  height:56px;
  left:-11px;
  bottom:-37px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,207,72,.24),transparent 70%);
  opacity:0;
  transition:opacity .4s ease,transform .4s ease;
  z-index:-1;
}
.theme-toggle.is-dark::before{opacity:1;transform:scale(1.2)}
.theme-state{
  display:none;
}
.theme-toggle.is-dark .theme-state{color:#ffd767}
.lamp-mini{position:relative;display:block;width:31px;height:50px;flex:0 0 31px;margin-top:-2px}
.lamp-cord{position:absolute;left:15px;top:-7px;width:1.5px;height:19px;border-radius:2px;background:var(--muted);transform-origin:top}
.lamp-fixture{position:absolute;left:2px;top:10px;width:27px;height:24px;transform-origin:50% -10px}
.lamp-shade{position:absolute;left:1px;top:3px;width:25px;height:14px;border-radius:3px 3px 2px 2px;background:#26334b;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);transition:background .38s ease,filter .38s ease}
.lamp-bulb{position:absolute;left:10px;top:15px;width:7px;height:7px;border-radius:1px 1px 50% 50%;background:#aab5c8;transition:background .38s ease,box-shadow .38s ease}
.lamp-beam{position:absolute;left:0;top:28px;width:31px;height:19px;clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,218,105,.46),transparent 90%);opacity:.05;transition:opacity .4s ease,transform .4s ease;transform:scale(.72);transform-origin:top}
.theme-toggle.is-dark .lamp-shade{background:#ffd34f;filter:drop-shadow(0 3px 5px rgba(255,196,32,.72))}
.theme-toggle.is-dark .lamp-bulb{background:#fff3bd;box-shadow:0 2px 9px 4px rgba(255,210,65,.58)}
.theme-toggle.is-dark .lamp-beam{opacity:.85;transform:scale(1)}
.theme-toggle.is-switching .lamp-fixture{animation:lamp-switch .76s cubic-bezier(.3,.7,.2,1)}
.theme-toggle.is-switching .lamp-cord{animation:cord-pull .76s cubic-bezier(.3,.7,.2,1)}

.google-account{position:relative;flex:0 0 auto}
.google{
  min-width:166px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  white-space:nowrap;
}
.google-g{width:25px;height:25px;flex:0 0 25px;filter:drop-shadow(0 2px 4px rgba(16,34,71,.1))}
.google .google-label{
  display:inline-flex;
  align-items:center;
  flex:1;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  letter-spacing:-.15px;
}
.google .account-prefix{display:inline}
.google-chevron{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:transform .25s ease}
.google[aria-expanded="true"]{border-color:color-mix(in srgb,var(--blue),var(--line) 25%);box-shadow:0 12px 32px rgba(8,119,255,.16)}
.google[aria-expanded="true"] .google-chevron{transform:rotate(180deg)}
.google-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:80;
  width:min(304px,calc(100vw - 24px));
  padding:16px;
  border:1px solid var(--line);
  border-radius:17px;
  background:color-mix(in srgb,var(--surface),transparent 3%);
  color:var(--text);
  box-shadow:0 22px 60px rgba(6,25,59,.2),inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(18px);
  animation:google-menu-in .22s ease both;
}
.google-menu[hidden]{display:none!important}
.google-menu::before{content:"";position:absolute;right:25px;top:-6px;width:11px;height:11px;border-left:1px solid var(--line);border-top:1px solid var(--line);background:var(--surface);transform:rotate(45deg)}
.google-menu-head{display:flex;align-items:center;gap:11px}
.google-menu-head>span:last-child{display:grid;gap:1px}
.google-avatar{width:38px;height:38px;display:grid;place-items:center;border:1px solid #e3e8f1;border-radius:50%;background:#fff;box-shadow:0 5px 12px rgba(12,42,88,.12)}
.google-avatar .google-g{width:27px;height:27px;flex-basis:27px}
.google-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.checkout-button{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.checkout-button img{width:23px;height:23px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.google-menu small{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.google-menu strong{font-size:14px}
.google-menu p{margin:13px 0;color:var(--muted);font-size:12px;line-height:1.55}
.google-menu button{width:100%;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:11px;background:linear-gradient(135deg,var(--blue),#0560e6);color:#fff;font-size:12px;font-weight:800;box-shadow:0 8px 18px rgba(8,119,255,.2)}

@keyframes lamp-switch{0%,100%{transform:rotate(0) translateY(0)}24%{transform:rotate(10deg) translateY(3px)}58%{transform:rotate(-7deg) translateY(0)}80%{transform:rotate(3deg)}}
@keyframes cord-pull{0%,100%{transform:scaleY(1)}24%{transform:scaleY(1.16)}58%{transform:scaleY(.96)}}
@keyframes google-menu-in{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}

@media(max-width:820px){
  .topbar{height:80px}
  .google .google-label{display:inline-flex}
  .google .account-prefix{display:inline}
}
@media(max-width:520px){
  .topbar{height:74px;gap:7px}
  .brand{min-height:52px;gap:3px}
  .brand .brand-mark{width:auto;height:auto;flex-basis:auto;font-size:33px!important;letter-spacing:-1.5px!important}
  .brand .brand-word{font-size:28px;letter-spacing:-1.2px}
  .top-actions{gap:7px}
  .theme-toggle{width:47px;min-width:47px;height:48px;padding:0}
  .theme-state{display:none}
  .lamp-mini{margin:0}
  .google{height:48px;min-width:139px;padding:0 10px;gap:8px}
  .google-g{width:23px;height:23px;flex-basis:23px}
  .google .google-label{font-size:12px}
  .google-menu{top:calc(100% + 8px)}
}
@media(max-width:390px){
  .brand .brand-mark{width:auto;height:auto;flex-basis:auto;font-size:32px!important}
  .brand .brand-word{font-size:27px}
  .google{min-width:103px}
  .google .account-prefix{display:none}
}
@media(max-width:345px){
  .topbar{gap:4px}
  .brand{gap:3px}
  .brand .brand-mark{width:auto;height:auto;flex-basis:auto;font-size:29px!important}
  .brand .brand-word{font-size:25px}
  .top-actions{gap:5px}
  .theme-toggle{width:44px;min-width:44px}
  .google{min-width:96px;padding-inline:8px;gap:6px}
}

/* Illustrated service cards */
.service-card{isolation:isolate;padding:0!important;background:#07142f!important;text-align:left}
.service-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s}
.service-card:hover>img{transform:scale(1.045);filter:saturate(1.12)}
.service-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,8,29,.82) 0%,rgba(3,8,29,.48) 47%,rgba(3,8,29,.02) 80%)}
.service-copy{position:absolute;left:26px;top:50%;width:54%;transform:translateY(-50%);z-index:1}
.service-card h3{max-width:none!important;color:#fff;text-shadow:0 3px 15px rgba(0,0,0,.38)}
.service-card p{max-width:100%!important;color:rgba(255,255,255,.85)}
.support-strip{display:grid;grid-template-columns:repeat(7,1fr);margin-top:30px;padding:16px 8px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 8px 30px rgba(15,46,91,.06)}
.support-strip button{display:grid;place-items:center;gap:6px;padding:8px 4px;border:0;border-right:1px solid var(--line);background:none;color:var(--text);font-size:10px;font-weight:800;text-transform:uppercase}
.support-strip button:last-child{border-right:0}.support-strip b{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:var(--soft);color:var(--blue);font-size:19px;transition:.25s}.support-strip button:hover b{transform:translateY(-3px);background:var(--blue);color:#fff}
@media(max-width:820px){.service-copy{left:18px;width:58%}.support-strip{grid-template-columns:repeat(4,1fr)}.support-strip button{border-bottom:1px solid var(--line)}.support-strip button:nth-child(4n){border-right:0}}
@media(max-width:520px){.service-copy{left:13px;width:63%}.service-card h3{font-size:19px!important}.service-card p{font-size:9px!important;line-height:1.35!important}.support-strip{grid-template-columns:repeat(4,1fr);padding:8px 4px}.support-strip b{width:30px;height:30px;font-size:15px}.support-strip button{font-size:8px}}

/* Five-item mobile navigation */
.bottom-nav{overflow:hidden;justify-content:center}
.bottom-nav button{flex:1 1 0;min-width:0!important;max-width:150px}
.bottom-nav .nav-icon{display:grid;width:21px;height:21px;margin:auto;place-items:center;font-size:0}
.bottom-nav .nav-icon img{width:19px;height:19px;object-fit:contain;filter:brightness(0) saturate(100%) invert(16%) sepia(18%) saturate(1535%) hue-rotate(183deg) brightness(89%)}
.bottom-nav button.active .nav-icon img{filter:brightness(0) saturate(100%) invert(41%) sepia(98%) saturate(3101%) hue-rotate(199deg) brightness(101%) contrast(102%)}
[data-theme="dark"] .bottom-nav .nav-icon img{filter:brightness(0) invert(1) opacity(.78)}
[data-theme="dark"] .bottom-nav button.active .nav-icon img{filter:brightness(0) saturate(100%) invert(57%) sepia(89%) saturate(2295%) hue-rotate(176deg) brightness(103%)}
@media(max-width:520px){.bottom-nav button{width:20%;max-width:none;font-size:9px!important}.bottom-nav button b{font-size:15px}.bottom-nav button span{white-space:nowrap}}

/* Hero carousel controls */
.hero{background-color:#04163f;transition:background-image .45s ease}.hero.hero-slide-1,.hero.hero-slide-2{background-position:center}.hero.hero-slide-1:after,.hero.hero-slide-2:after{background:linear-gradient(90deg,rgba(2,8,30,.94),rgba(2,18,54,.56) 57%,rgba(1,8,25,.05))}.hero-control{position:absolute;z-index:3;top:50%;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#09204b;font-size:29px;line-height:1;box-shadow:0 8px 22px rgba(0,0,0,.2);opacity:0;transition:.25s}.hero:hover .hero-control,.hero-control:focus-visible{opacity:1}.hero-prev{left:14px}.hero-next{right:14px}.hero-dots{position:absolute;z-index:3;left:50%;bottom:15px;display:flex;gap:7px;transform:translateX(-50%)}.hero-dots button{width:7px;height:7px;padding:0;border:0;border-radius:20px;background:#ffffff66;transition:.25s}.hero-dots button.active{width:22px;background:#20c8ff}.hero-copy{animation:hero-copy-in .55s ease both}@keyframes hero-copy-in{from{opacity:0;transform:translateX(-18px)}}
@media(max-width:520px){.hero-control{width:30px;height:30px;font-size:21px;opacity:.9}.hero-prev{left:7px}.hero-next{right:7px}.hero-dots{bottom:10px}.hero-stats{display:none}.hero-copy{padding-left:28px!important}.hero.hero-slide-1,.hero.hero-slide-2{background-position:61% center}}

/* Reference-accurate homepage */
.home-bottom-nav{display:none!important}
.hero{
  min-height:0!important;
  aspect-ratio:2.035/1;
  overflow:visible;
  margin-bottom:64px;
  border-radius:17px;
  background-position:center!important;
  background-size:cover;
  box-shadow:0 12px 30px rgba(4,34,91,.12);
}
.hero-media{position:absolute;inset:0;z-index:-2;border-radius:inherit;background-position:center;background-size:cover;background-repeat:no-repeat;will-change:opacity,transform}
.hero::after{border-radius:inherit;background:linear-gradient(90deg,rgba(1,13,47,.52),rgba(1,19,61,.12) 57%,transparent 75%)!important}
.hero-copy{position:absolute;z-index:2;left:8%;top:15%;width:47%;max-width:none;padding:0!important;color:#fff}
.hero-kicker{margin:0 0 6px!important;color:#fff!important;font:italic 800 clamp(13px,2.7vw,30px)/1 "Barlow Condensed",sans-serif!important;text-transform:uppercase;letter-spacing:.2px}
.hero-kicker em{color:#18c5ff;font-style:normal}
.hero h1{margin:0!important;color:#fff;font:italic 900 clamp(23px,5vw,56px)/.92 "Barlow Condensed",sans-serif!important;letter-spacing:-.5px;text-transform:uppercase;text-shadow:0 4px 14px rgba(0,0,0,.22)}
.hero h1 em{color:#18c5ff;font-style:normal}
.hero-copy.slide-copy-in{animation:hero-slide-copy-in .72s cubic-bezier(.2,.75,.2,1) both}
@keyframes hero-slide-copy-in{from{opacity:0;transform:translateX(-18px) translateY(5px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.hero-banner-store{display:none}
.hero-slide-0 .hero-banner-store{position:absolute;right:14%;bottom:11%;z-index:2;display:block;color:#fff;font:italic 900 clamp(27px,5.8vw,66px)/.8 "Barlow Condensed",sans-serif;letter-spacing:-1px;text-shadow:0 5px 17px rgba(0,10,50,.75);pointer-events:none}
.hero-stats{left:3%;bottom:7%;width:48%;height:auto;display:flex!important;justify-content:space-around;gap:0;padding:12px 14px;border:1px solid rgba(97,190,255,.33);border-radius:15px;background:rgba(1,21,65,.48);backdrop-filter:blur(5px);color:#fff;font-size:clamp(6px,1vw,11px);line-height:1.45}
.hero-stats span{display:flex;align-items:center;gap:8px;text-align:left}.hero-stats b{color:#12c8ff;font-size:clamp(13px,2vw,23px)}
.hero-stats strong{color:#fff;font:800 inherit Manrope,sans-serif;line-height:1.35}
.hero-stats .stat-icon{width:clamp(15px,2.2vw,25px);height:clamp(15px,2.2vw,25px);flex:0 0 auto;overflow:visible}
.hero-stats .stat-icon path:first-child{fill:#13c8ff;stroke:#13c8ff;stroke-width:0}
.hero-stats .stat-tag circle{fill:#062257}
.hero-stats .stat-shield path{fill:none!important;stroke:#13c8ff!important;stroke-width:2.1!important;stroke-linecap:round;stroke-linejoin:round}
.hero-control{top:50%;width:44px;height:44px;opacity:1;background:#fff;color:#091c47;box-shadow:0 4px 13px rgba(0,0,0,.16);transform:translateY(-50%)}
.hero-control:hover{transform:translateY(-50%) scale(1.08)}.hero-prev{left:6px}.hero-next{right:6px}
.hero-dots{bottom:-36px}.hero-dots button{width:13px;height:13px;background:#dde1e7}.hero-dots button.active{width:13px;background:#0b88f7;box-shadow:0 0 0 3px rgba(11,136,247,.1)}
.home-service-grid{margin-top:0;gap:15px}
.home-service-grid .service-card{min-height:0!important;aspect-ratio:1.62/1;border-radius:14px!important;box-shadow:0 7px 20px rgba(7,31,72,.1);transform:translateZ(0);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.home-service-grid .service-card>img{object-position:center}
.home-service-grid .service-overlay{background:linear-gradient(90deg,rgba(0,5,20,.28),rgba(0,5,20,.08) 58%,transparent)}
.home-service-grid .service-copy{left:6%;top:50%;width:47%;transform:translateY(-50%)}
.home-service-grid .service-card.s0 .service-copy{left:27%;width:38%}
.home-service-grid .service-card h3{margin:0 0 9px!important;color:#fff;font:italic 900 clamp(17px,3.3vw,36px)/.92 "Barlow Condensed",sans-serif!important;letter-spacing:-.2px;text-transform:uppercase;text-shadow:0 3px 9px rgba(0,0,0,.32)}
.home-service-grid .service-card p{margin:0!important;color:rgba(255,255,255,.92)!important;font-size:clamp(9px,1.55vw,15px)!important;line-height:1.45!important;text-shadow:0 2px 7px rgba(0,0,0,.3)}
.home-service-grid .service-card:hover{transform:translateY(-5px);box-shadow:0 15px 34px rgba(7,31,72,.17)}
.home-service-grid .service-card:active{transform:scale(.97)}
.home-service-grid .service-card.touch-pop{animation:card-touch-pop .42s cubic-bezier(.2,.8,.2,1)}
.home-service-grid .service-card.touch-pop>img{animation:card-image-touch .42s cubic-bezier(.2,.8,.2,1)}
@keyframes card-touch-pop{0%{transform:scale(1)}35%{transform:scale(.965) rotate(-.35deg)}72%{transform:scale(1.012)}100%{transform:scale(1)}}
@keyframes card-image-touch{45%{transform:scale(1.075) translateX(4px)}100%{transform:scale(1)}}
.support-strip{grid-template-columns:repeat(7,minmax(0,1fr))!important;margin:25px 0 34px;padding:15px 4px;border-radius:14px;box-shadow:0 5px 18px rgba(15,46,91,.06)}
.support-strip button{min-width:0;border-right:1px solid var(--line)!important;border-bottom:0!important;font-size:clamp(8px,1.35vw,11px)}
.support-strip button:last-child{border-right:0!important}.support-strip b{width:43px;height:43px;border-radius:50%;background:transparent;color:var(--text);font-size:23px}
.support-strip .support-icon{position:relative;display:grid;place-items:center;border-radius:14px;background:#fff;box-shadow:0 7px 17px rgba(8,42,93,.18),inset 0 1px 0 rgba(255,255,255,.42);transition:transform .25s ease,box-shadow .25s ease}
.support-strip .support-icon img{width:22px;height:22px;object-fit:contain}
.support-strip .icon-cs{background:linear-gradient(145deg,#16b9ff,#0877ff)}
.support-strip .icon-ai{background:linear-gradient(145deg,#9b6cff,#6035e8)}
.support-strip .icon-faq{background:linear-gradient(145deg,#ffcb4d,#ff8a17)}
.support-strip .icon-cs img,.support-strip .icon-ai img,.support-strip .icon-faq img{filter:brightness(0) invert(1)}
.support-strip .icon-gmail{background:linear-gradient(145deg,#fff,#f7f9ff);border:1px solid #e6eaf2}
.support-strip .icon-instagram{background:radial-gradient(circle at 29% 105%,#ffd600 0 18%,#ff7a00 35%,#ff0169 59%,#d300c5 78%,#7638fa 100%)}
.support-strip .icon-tiktok{background:#101522;box-shadow:5px 0 0 -3px #ff2457,-5px 0 0 -3px #25f4ee,0 7px 17px rgba(8,42,93,.2)}
.support-strip .icon-facebook{background:linear-gradient(145deg,#1997f3,#0866ff)}
.support-strip button:hover .support-icon{transform:translateY(-4px) scale(1.06);box-shadow:0 11px 24px rgba(8,119,255,.25)}

@media(min-width:521px) and (max-width:820px){
  .topbar{height:106px}
  .hero-stats{width:56%;bottom:10%;padding:15px 17px;font-size:11px}
  .home-service-grid .service-card h3{font-size:29px!important}
  .home-service-grid .service-card p{font-size:12px!important}
  .support-strip{padding-block:20px}
}

@media(max-width:520px){
  .hero{aspect-ratio:2.035/1;min-height:0!important;margin-bottom:48px;border-radius:12px}
  .hero-copy{left:8%;top:15%;width:48%;max-width:none;padding:0!important}
  .hero-kicker{margin-bottom:4px!important;font-size:11px!important}
  .hero h1{font-size:22px!important;line-height:.9!important}
  .hero-slide-0 .hero-banner-store{right:10%;bottom:9%;font-size:30px}
  .hero-stats{left:4%;bottom:7%;width:49%;padding:5px 6px;border-radius:8px;font-size:5px}
  .hero-stats span{gap:3px}.hero-stats b{font-size:9px}
  .hero-stats .stat-icon{width:10px;height:10px}
  .hero-control{width:30px;height:30px;font-size:23px}.hero-prev{left:6px}.hero-next{right:6px}
  .hero.hero-slide-1 .hero-media,.hero.hero-slide-2 .hero-media{background-position:61% center}
  .hero-dots{bottom:-28px;gap:7px}.hero-dots button,.hero-dots button.active{width:8px;height:8px}
  .home-service-grid{gap:8px!important}
  .home-service-grid .service-card{aspect-ratio:1.62/1;border-radius:8px!important}
  .home-service-grid .service-copy{left:6%;width:50%}
  .home-service-grid .service-card.s0 .service-copy{left:27%;width:40%}
  .home-service-grid .service-card h3{margin-bottom:5px!important;font-size:15px!important}
  .home-service-grid .service-card p{font-size:7px!important;line-height:1.35!important}
  .support-strip{margin-top:18px;padding:10px 2px}
  .support-strip button{padding:7px 1px;font-size:6px!important}
  .support-strip b{width:28px;height:28px;font-size:15px}
  .support-strip .support-icon{border-radius:9px}
  .support-strip .support-icon img{width:16px;height:16px}
}
@media(prefers-reduced-motion:reduce){.hero-media,.hero-copy{animation:none!important;transition:none!important}}

/* Real brand artwork on service cards */
.wallet-logos,.premium-logos{position:absolute;z-index:2;right:4%;top:50%;transform:translateY(-50%)}
.wallet-logos{width:31%;display:grid;gap:5px;padding:8px;border-radius:11px;background:rgba(255,255,255,.96);box-shadow:0 9px 24px rgba(0,40,15,.28);transform:translateY(-50%) rotate(3deg)}
.wallet-logos i{height:25px;display:flex;align-items:center;justify-content:center;gap:1px;padding:3px 7px;border-bottom:1px solid #e8edf4;font-style:normal}
.wallet-logos i:last-child{border-bottom:0}.wallet-logos img{max-width:100%;max-height:18px;object-fit:contain}.wallet-logos em{color:#f4511e;font:800 9px Manrope,sans-serif}
.wallet-logos i:nth-child(3) img{filter:brightness(.65) sepia(1) saturate(7) hue-rotate(225deg)}
.premium-logos{width:32%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.premium-logos i{aspect-ratio:1;display:grid;place-items:center;padding:9px;border-radius:10px;background:#101626;box-shadow:0 7px 17px rgba(55,18,0,.28)}
.premium-logos img{width:100%;height:100%;object-fit:contain}
.premium-logos i:last-child img{filter:brightness(0) invert(1) drop-shadow(0 0 5px rgba(69,173,255,.75))}

/* Account catalog banner and three-column cards */
.catalog-hero{position:relative;isolation:isolate;min-height:0;aspect-ratio:3.2/1;align-items:center;background:#064ec7!important}
.catalog-hero::after{content:"";position:absolute;inset:0 0 60px;z-index:-1;background:linear-gradient(90deg,rgba(2,25,80,.9) 0%,rgba(3,48,130,.58) 48%,rgba(1,34,105,.08) 78%)}
.catalog-copy{position:relative;z-index:2}.catalog-avatar{display:none!important}
.catalog-slides,.catalog-slides span{position:absolute;inset:0 0 60px;border-radius:inherit}
.catalog-slides span{inset:0;border-radius:inherit inherit 0 0}
.catalog-slides{z-index:-2;overflow:hidden}.catalog-slides span{background-position:center;background-size:cover;opacity:0;animation:catalog-banner-loop 15s infinite both}
.catalog-slides span:nth-child(2){animation-delay:-10s}.catalog-slides span:nth-child(3){animation-delay:-5s}
@keyframes catalog-banner-loop{0%,28%{opacity:1;transform:scale(1)}33%,95%{opacity:0;transform:scale(1.035)}100%{opacity:1;transform:scale(1)}}
.hero,.catalog-hero{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.hero.is-dragging,.catalog-hero.is-dragging{cursor:grabbing}
.hero.is-dragging .hero-media{transform:translateX(var(--slide-drag,0)) scale(1.015)!important;transition:none}
.catalog-hero.is-dragging .catalog-slides{transform:translateX(var(--slide-drag,0));transition:none}

@media(max-width:820px){
  .account-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px}
}
@media(max-width:520px){
  .wallet-logos{width:33%;gap:2px;padding:4px;border-radius:7px}.wallet-logos i{height:16px;padding:2px 4px}.wallet-logos img{max-height:11px}.wallet-logos em{font-size:6px}
  .premium-logos{width:33%;gap:3px}.premium-logos i{padding:5px;border-radius:6px}
  .catalog-hero{min-height:175px!important;aspect-ratio:auto;padding:14px 13px;border-radius:12px}
  .catalog-hero::after,.catalog-slides{bottom:46px}
  .catalog-hero h1{margin:3px 0 7px;font-size:23px;line-height:.92}.catalog-hero p{margin:0;font-size:9px}.catalog-hero .eyebrow{font-size:8px;letter-spacing:1px}
  .catalog-title{margin:18px 0 11px}.catalog-title h2{font-size:23px}.catalog-title .eyebrow{font-size:9px}
  .search{padding:9px 11px}.search input{font-size:10px}
  .filters{gap:4px;margin-bottom:12px}.filters button{flex:1;padding:7px 3px;font-size:7px;border-radius:7px}
  .view{padding-bottom:96px}
  .bottom-nav{position:fixed!important;left:0;right:0;bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .account-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px}
  .account-card{border-radius:7px}.account-card .game-art{aspect-ratio:1/1.08}
  .account-card .game-art small{top:7px;left:7px;font-size:7px}.account-card .game-art strong{left:7px;bottom:20px;font-size:12px;line-height:.9}.account-card .game-art i{left:7px;bottom:7px;font-size:6px}
  .account-card .card-info{padding:5px}.account-card .card-info>.status-dot,.account-card .card-info>h3,.account-card .card-info>.tags{display:none}
  .account-card .card-info footer{margin:0;gap:2px}.account-card .card-info footer small{font-size:6px}.account-card .card-info footer strong{font-size:8px;white-space:nowrap}.account-card .card-info footer button{padding:5px 4px;border-radius:5px;font-size:6px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.catalog-slides span{animation:none}.catalog-slides span:first-child{opacity:1}}

/* Catalog details matched to the three-column reference */
.catalog-copy{padding-bottom:54px}
.catalog-ribbon{position:absolute;z-index:3;left:0;right:0;bottom:0;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 26px;background:rgba(2,23,72,.86);border:0;color:#dceaff;font-size:11px;font-weight:700;backdrop-filter:blur(5px)}
.catalog-ribbon>div{display:flex;align-items:center;gap:24px}.catalog-ribbon b{display:flex;align-items:center;gap:7px;color:#23c7ff}.catalog-ribbon b svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.catalog-ribbon b:nth-child(2) svg{fill:currentColor;stroke:none}.catalog-ribbon i{color:#fff;font:700 9px/1.3 Manrope,sans-serif}
.catalog-search-only{justify-content:flex-end;margin:20px 0 12px}.catalog-search-only .search{margin-left:auto}
.catalog-price-filters{scrollbar-width:none}.catalog-price-filters::-webkit-scrollbar{display:none}
.account-card .game-art strong{top:13px;bottom:auto;left:0;width:100%;padding:0 7px;text-align:center;font-size:22px;line-height:1;text-shadow:0 2px 8px #000}
.account-card .card-info>.status-dot,.account-card .card-info>h3,.account-card .card-info>.tags{display:none}
.account-card .card-info footer{margin-top:0}

/* Small photo labels that stay readable without covering the artwork */
.detail-page .gallery-main{position:relative}
.detail-page .gallery-main::after{content:"Klik untuk preview";position:absolute;z-index:4;right:8px;top:8px;padding:5px 8px;border:1px solid rgba(255,255,255,.4);border-radius:20px;background:rgba(2,12,34,.72);color:#fff;font:600 8px/1 Manrope,sans-serif;letter-spacing:.1px;box-shadow:0 3px 10px rgba(0,0,0,.2);pointer-events:none}
.detail-page .gallery-main .game-art strong,.order-art .game-art strong{left:10px;right:auto;bottom:29px;width:auto;max-width:calc(100% - 20px);padding:5px 8px;border:1px solid rgba(255,255,255,.22);border-radius:5px;background:rgba(2,12,34,.72);font:600 12px/1.15 Manrope,sans-serif;letter-spacing:0;text-transform:uppercase;text-shadow:none}
.detail-page .gallery-main .game-art i,.order-art .game-art i{left:12px;bottom:12px;font-size:8px;font-weight:500}
.detail-page .gallery-main .art-shade,.order-art .art-shade{background:linear-gradient(180deg,transparent 60%,rgba(2,8,24,.6) 100%)}
.account-card .game-art strong{top:9px;bottom:auto;left:50%;right:auto;width:max-content;max-width:calc(100% - 16px);padding:5px 9px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.24);border-radius:6px;background:rgba(2,12,34,.68);font:600 13px/1 Manrope,sans-serif;letter-spacing:0;text-shadow:none;white-space:nowrap}
.game-logo{position:absolute;z-index:3;left:50%;top:8px;width:min(76%,190px);height:38px;display:flex;align-items:center;justify-content:center;padding:0;transform:translateX(-50%);border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible}
.real-art .game-logo img{position:static;inset:auto;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;transform:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.95)) drop-shadow(0 0 5px rgba(0,0,0,.65))}
.real-art:hover .game-logo img{transform:none}
.logo-pubg-conqueror img,.logo-genshin-ar60 img,.logo-codm-legend img,.logo-valorant-immortal img,.logo-fifa-120 img{filter:invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.75));mix-blend-mode:screen}
.logo-ml-mythic img,.logo-codm-legend img{transform:scale(1.75)!important}.logo-pubg-conqueror img{transform:scale(1.45)!important}.logo-fifa-120 img{transform:scale(1.8)!important}.logo-efootball-3100 img{transform:scale(2.05)!important}.logo-coc-th15 img,.logo-hayday-70 img,.logo-dragon-70 img{transform:scale(1.55)!important}
.logo-codm-legend img,.logo-coc-th15 img,.logo-hayday-70 img,.logo-dragon-70 img{mix-blend-mode:multiply;filter:contrast(1.15) drop-shadow(0 0 2px rgba(255,255,255,.9))}
.gallery-thumbs .game-logo{display:none}.detail-page .gallery-main .game-logo,.order-art .game-logo{left:10px;top:auto;bottom:29px;width:min(55%,135px);height:30px;transform:none}.order-art .game-logo{height:25px}

@media(max-width:520px){
  .catalog-copy{padding-bottom:39px}
  .catalog-ribbon{min-height:46px;gap:8px;padding:7px 10px;font-size:8px}.catalog-ribbon>div{gap:10px}.catalog-ribbon b{gap:4px}.catalog-ribbon b svg{width:16px;height:16px}.catalog-ribbon i{font-size:7px;line-height:1.25}
  .catalog-search-only{margin:13px 0 8px}
  .catalog-price-filters{justify-content:flex-start;overflow-x:auto;padding-bottom:3px}
  .catalog-price-filters button{flex:0 0 64px!important;padding-inline:4px;font-size:6px}
  .catalog-price-filters button:first-child{flex-basis:70px!important}
  .account-card .game-art strong{top:5px;bottom:auto;left:50%;width:max-content;max-width:calc(100% - 8px);padding:3px 5px;transform:translateX(-50%);border-radius:4px;font:500 7px/1 Manrope,sans-serif;text-align:center}
  .account-card .game-logo{top:4px;width:min(86%,98px);height:27px;padding:0;border-radius:0}.detail-page .gallery-main .game-logo,.order-art .game-logo{left:6px;bottom:19px;width:min(76%,96px);height:27px}.order-art .game-logo{height:23px}
  .detail-page .gallery-main::after{content:"Ketuk untuk preview";right:5px;top:5px;padding:4px 6px;font-size:6px}
  .detail-page .gallery-main .game-art strong,.order-art .game-art strong{left:6px;bottom:19px;max-width:calc(100% - 12px);padding:3px 5px;border-radius:4px;font-size:7px;font-weight:500}
  .detail-page .gallery-main .game-art i,.order-art .game-art i{left:7px;bottom:7px;font-size:5px}
}
@media(min-width:346px) and (max-width:390px){
  .google{min-width:145px}
  .google .account-prefix{display:inline}
}
@media(hover:none){
  .home-service-grid .service-card:hover{transform:none;box-shadow:0 7px 20px rgba(7,31,72,.1)}
  .home-service-grid .service-card:hover>img{transform:none;filter:none}
}

/* Uploaded game logos stay in the same top position on cards and detail views. */
.detail-page .gallery-main .game-logo,.order-art .game-logo{left:50%;right:auto;top:10px;bottom:auto;width:min(76%,190px);height:38px;transform:translateX(-50%)}
@media(max-width:520px){.detail-page .gallery-main .game-logo,.order-art .game-logo{left:50%;top:6px;bottom:auto;width:min(82%,120px);height:30px;transform:translateX(-50%)}}

/* Pulsa to E-Wallet */
.header-notice{display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}.header-notice .notification-bell{display:block;width:24px;height:24px;flex-shrink:0}
/* Anchor the mobile notification panel to the header, not the bell. */
@media(max-width:820px){
  .topbar .notice-menu-wrap{position:static}
  .topbar .notice-dropdown{top:calc(100% + 4px);right:2px;left:auto;width:min(340px,calc(100% - 4px));max-height:min(420px,65dvh);box-sizing:border-box;color:var(--text);overflow-wrap:anywhere;overscroll-behavior:contain}
}
.pulse-page{max-width:1040px;margin:auto;padding:4px 0 36px}.pulse-hero{position:relative;min-height:320px;overflow:hidden;border-radius:24px;background:#031431;color:#fff}.pulse-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.pulse-hero>div{position:relative;z-index:1;width:52%;padding:38px}.pulse-hero span{display:inline-block;padding:7px 12px;border-radius:5px;background:#0877ff;font-size:15px;font-weight:900}.pulse-hero h1{margin:10px 0;font:italic 900 48px/.92 Manrope,sans-serif}.pulse-hero h1 em{color:#20d3ff;font-style:normal}.pulse-hero p{max-width:410px;font-size:16px}.pulse-hero footer{display:flex;gap:15px;margin-top:28px;font-size:11px}.pulse-hero footer b{padding-right:13px;border-right:1px solid #ffffff35}.pulse-section{margin-top:16px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 8px 25px rgba(10,35,75,.06)}.pulse-section header{display:flex;align-items:center;gap:13px;margin-bottom:17px}.pulse-section header>i{flex:0 0 43px;width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:20px;font-weight:900}.pulse-section h2{margin:0;color:var(--text);font-size:18px}.pulse-section header p{margin:2px 0 0;color:var(--muted);font-size:13px}.pulse-nominal-row{display:grid;grid-template-columns:2fr 1fr;gap:16px}.pulse-nominal-row>label{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:11px}.pulse-nominal-row input,.pulse-nominal-row select,.wallet-data input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-weight:800}.operator-select{position:relative;padding-top:23px!important}.operator-select small{position:absolute;top:-21px;left:0;color:var(--muted)}.quick-nominal{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:14px}.quick-nominal button{padding:13px 5px;border:0;border-radius:9px;background:var(--soft);color:var(--text);font-weight:800}.pulse-wallets{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.pulse-wallet{position:relative;display:grid;justify-items:center;gap:7px;min-height:125px;padding:16px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}.pulse-wallet.active{border:2px solid var(--blue);box-shadow:inset 0 3px 0 var(--blue)}.pulse-wallet.active:after{content:'✓';position:absolute;right:7px;top:7px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff}.pulse-wallet span{width:58px;height:58px;display:grid;place-items:center;color:#fff;border-radius:15px;background:#ed1b2f;font-size:13px;font-weight:900}.pulse-wallet img{width:100%;height:100%;object-fit:contain}.pulse-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pulse-summary>div{display:grid;gap:8px;padding:18px;border-radius:11px;background:var(--soft)}.pulse-summary small{color:var(--muted)}.pulse-summary strong{font-size:25px}.pulse-summary .green{color:var(--green)}.pulse-summary .blue{color:var(--blue)}.pulse-warning{margin-top:15px;padding:15px 20px;border:1px solid #f0ce62;border-radius:11px;background:#fff8df;color:#473b17;font-size:12px}.pulse-warning ul,.pulse-warning ol{margin:7px 0 0}.pulse-primary{width:100%;min-height:57px;margin-top:16px;border:0;border-radius:10px;background:linear-gradient(90deg,#0877ff,#078bf3);color:#fff;font-size:16px;font-weight:900}.pulse-step{padding:18px 0;border-top:1px solid var(--line)}.pulse-payment>header.main{padding-bottom:17px}.operator-target{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:18px;padding:15px;border:1px solid var(--line);border-radius:11px}.operator-target>div{display:grid}.operator-target strong{font-size:22px}.operator-target button{border:0;background:none;color:var(--blue);font-size:22px}.pulse-drop{display:grid;justify-items:center;padding:28px;border:2px dashed #8abdec;border-radius:12px;cursor:pointer}.pulse-drop>b{color:var(--blue);font-size:38px}.pulse-drop small{color:var(--muted)}.wallet-data{display:grid;grid-template-columns:1fr 1fr;gap:15px}.wallet-data input{padding:17px;border:1px solid var(--line);border-radius:10px}.pulse-modal-back{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(3,15,37,.86)}.pulse-modal{position:relative;width:min(720px,100%);max-height:94vh;overflow:auto;padding:32px;border-radius:25px;background:#fff;color:#091538;text-align:center}.pulse-modal>button:first-child{position:absolute;right:22px;top:14px;border:0;background:none;color:#68738d;font-size:38px}.pulse-modal>img{width:190px;margin:auto}.pulse-modal h2{margin:5px 0 10px;font-size:34px}.pulse-modal>p{max-width:580px;margin:auto;color:#566078}.pulse-modal>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px;padding:17px;border:1px solid #dce5f0;border-radius:12px}.pulse-modal span{display:flex;align-items:center;justify-content:center;gap:9px;color:#0877ff;text-align:left}
@media(max-width:700px){.pulse-page{padding-inline:12px}.pulse-hero{min-height:260px;border-radius:15px}.pulse-hero>img{object-position:62% center;opacity:.72}.pulse-hero>div{width:72%;padding:22px}.pulse-hero span{font-size:10px}.pulse-hero h1{font-size:32px}.pulse-hero p{font-size:11px}.pulse-hero footer{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}.pulse-section{padding:16px}.pulse-section h2{font-size:14px}.pulse-section header p{font-size:10px}.pulse-nominal-row,.pulse-summary,.wallet-data{grid-template-columns:1fr}.quick-nominal{grid-template-columns:repeat(3,1fr);gap:7px}.pulse-wallets{grid-template-columns:repeat(3,1fr);gap:7px}.pulse-wallet{min-height:96px;padding:10px 5px;font-size:10px}.pulse-wallet span{width:43px;height:43px}.operator-target{grid-template-columns:1fr auto}.operator-target>b{grid-column:1/-1}.pulse-modal{padding:25px 17px}.pulse-modal h2{font-size:25px}.pulse-modal>div{grid-template-columns:1fr}.pulse-modal>img{width:150px}}
.notice-menu-wrap{position:relative}.header-notice{position:relative;width:45px;height:45px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);font-size:24px}.header-notice i{position:absolute;right:8px;top:7px;width:8px;height:8px;border-radius:50%;background:#f33}.notice-dropdown{position:absolute;z-index:50;right:0;top:53px;width:min(340px,calc(100vw - 24px));max-height:420px;overflow:auto;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}.notice-dropdown h3{margin:0 0 10px}.notice-dropdown article{padding:10px;border-top:1px solid var(--line)}.notice-dropdown article.unread{border-left:3px solid var(--blue);background:var(--soft)}.notice-dropdown article p{margin:5px 0;font-size:11px}.notice-dropdown small{color:var(--muted);font-size:9px}