.shop-hero{padding-top:calc(var(--hdr-h,72px) + 36px);padding-bottom:36px}
.shop-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.shop-hero .ts-lead{max-width:560px}
.shop-hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.shop-hero-pills span{padding:7px 12px;border-radius:999px;border:1px solid var(--border-strong);font-size:12.5px;color:#c9c9d0;background:rgba(255,255,255,.02)}
.shop-hero-pills span b{color:var(--accent-2);font-weight:600}
.shop-hero-art{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:440px;margin-left:auto}
.shop-hero-art .shop-art-tile{border-radius:18px;border:1px solid var(--border);background:var(--card);padding:16px;display:flex;flex-direction:column;gap:8px;min-height:120px;position:relative;overflow:hidden}
.shop-hero-art .shop-art-tile::after{content:"";position:absolute;inset:auto -30% -40% auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--tile-glow,rgba(139,92,246,.22)),transparent 70%)}
.shop-art-tile .shop-art-ico{display:inline-flex;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.shop-art-tile.tg .shop-art-ico{color:#7dd3fc}.shop-art-tile.ai .shop-art-ico{color:#c4b5fd}.shop-art-tile.steam .shop-art-ico{color:#93c5fd}.shop-art-tile.gift .shop-art-ico{color:#fcd34d}
.shop-art-tile b{font-size:15px;color:#fff}
.shop-art-tile span{font-size:12.5px;color:var(--text-muted)}
.shop-art-tile.tg{--tile-glow:rgba(56,189,248,.28)}
.shop-art-tile.ai{--tile-glow:rgba(167,139,250,.28)}
.shop-art-tile.steam{--tile-glow:rgba(96,165,250,.25)}
.shop-art-tile.gift{--tile-glow:rgba(251,191,36,.25)}

.shop-toolbar{position:sticky;top:calc(var(--hdr-h,72px) + 8px);z-index:20;display:flex;gap:12px;align-items:center;padding:10px 12px;margin:0 0 28px;border-radius:16px;border:1px solid var(--border);background:rgba(24,24,27,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.shop-search{flex:1 1 220px;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:11px;padding:10px 14px;font-size:14px;color:var(--text)}
.shop-search:focus{outline:none;border-color:rgba(124,58,237,.5)}
.shop-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shop-cats::-webkit-scrollbar{display:none}
.shop-cat{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s}
.shop-cat:hover{color:var(--text);border-color:var(--border-strong)}
.shop-cat svg{width:16px;height:16px}
.shop-cat.active{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.45);color:var(--accent-2)}

.shop-section{padding:0 0 56px}
.shop-section-head{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;flex-wrap:wrap}
.shop-section-head h2{margin:0;font-size:24px;font-weight:700}
.shop-section-head h2{display:flex;align-items:center;gap:10px}
.shop-section-head h2 .shop-ico{display:inline-flex;width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;color:#a78bfa;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.28)}
.shop-section-head h2 .shop-ico svg{width:20px;height:20px}
.shop-section-head .shop-count{color:var(--text-muted);font-size:14px}
.shop-section-head .shop-note{color:var(--text-muted);font-size:13.5px;flex-basis:100%}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shop-card{display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--border);background:var(--card);overflow:hidden;text-align:left;cursor:pointer;color:inherit;transition:transform .18s,border-color .18s,background .18s;padding:0}
.shop-card:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.45);background:var(--card-hover)}
.shop-card-pic{aspect-ratio:16/10;background:#0f0f11;position:relative;overflow:hidden}
.shop-card-pic img{width:100%;height:100%;object-fit:cover;display:block}
.shop-card-badge{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;background:rgba(18,18,20,.82);border:1px solid var(--border-strong);color:#e4e4e7;backdrop-filter:blur(4px)}
.shop-card-badge.auto{color:var(--accent-2);border-color:rgba(139,92,246,.4)}
.shop-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.shop-card h3{margin:0;font-size:16px;font-weight:600;line-height:1.3}
.shop-card p{margin:0;font-size:13px;color:var(--text-muted);line-height:1.45;flex:1}
.shop-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.shop-price{font-size:17px;font-weight:700;color:#fff}
.shop-price small{font-size:12px;font-weight:500;color:var(--text-muted);margin-right:4px}
.shop-card-plans{font-size:12px;color:var(--text-muted)}
.shop-empty{padding:40px;text-align:center;color:var(--text-muted);border:1px dashed var(--border-strong);border-radius:16px}
.shop-skel{height:260px;border-radius:18px;background:linear-gradient(90deg,var(--card),rgba(255,255,255,.08),var(--card));background-size:200% 100%;animation:shopShimmer 1.4s infinite}
@keyframes shopShimmer{to{background-position:-200% 0}}


.shop-promo-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.shop-promo{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:26px 28px;border-radius:20px;border:1px solid rgba(167,139,250,.35);background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(24,24,27,.92) 60%);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.shop-promo:hover{transform:translateY(-1px);border-color:rgba(167,139,250,.65)}
.shop-promo.inv{border-color:rgba(139,92,246,.35);background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(24,24,27,.9) 55%)}
.shop-promo.inv:hover{border-color:rgba(139,92,246,.65)}
.shop-promo-pic img{width:150px;height:auto;display:block;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.45);transform:rotate(-6deg)}
.shop-promo>span:last-child{display:block;min-width:0}
.shop-promo-eyebrow{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:6px;color:#c4b5fd}
.shop-promo.inv .shop-promo-eyebrow{color:#a78bfa}
.shop-promo-title{display:block;font-size:21px;font-weight:600;color:#fff;line-height:1.25}
.shop-promo-title b{color:#e9d5ff}
.shop-promo-text{display:block;margin:8px 0 12px;color:#9a9aa3;font-size:14px;line-height:1.5}
.shop-promo-perks{display:flex;flex-wrap:wrap;gap:8px}
.shop-promo-perks span{padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#c9c9d0}
.shop-promo .btn{display:inline-flex;margin-top:14px}
.shop-promo-ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;color:#a78bfa;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3)}


html.shop-modal-open,html.shop-modal-open body{overflow:hidden!important;overscroll-behavior:none}
html.shop-modal-open #saikyo-pwa-toast,html.shop-modal-open .cookie-banner,html.shop-modal-open #cookie-banner{display:none!important}
.shop-modal>.modal-bg{max-height:none!important;overflow:visible!important;background:rgba(0,0,0,.82);backdrop-filter:none;-webkit-backdrop-filter:none}
.shop-modal>.modal-card{animation:none}
.shop-modal-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.shop-modal .modal-card{max-width:820px;padding:0;overflow:hidden}
.shop-modal-scroll{overflow-y:auto;overflow-x:hidden;max-height:88vh;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.shop-modal-scroll::-webkit-scrollbar{width:6px}
.shop-modal-scroll::-webkit-scrollbar-track{background:transparent}
.shop-modal-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.shop-modal-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}
.shop-modal-head{display:grid;grid-template-columns:120px 1fr auto;gap:16px;align-items:start;padding:20px 20px 0}
.shop-modal-head img{width:120px;height:80px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.shop-modal-head h3{margin:0 0 4px;font-size:20px}
.shop-modal-head p{margin:0;color:var(--text-muted);font-size:13.5px}
.shop-modal-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding:20px}
.shop-modal-desc{font-size:14px;line-height:1.6;color:#c9c9d0;white-space:pre-line;overflow-wrap:anywhere;min-width:0}
.shop-modal-desc h4{margin:16px 0 6px;font-size:14px;color:#fff}
.shop-modal-desc details{border:1px solid var(--border);border-radius:12px;padding:0 14px;margin-top:14px}
.shop-modal-desc summary{cursor:pointer;padding:11px 0;color:var(--text-muted);font-size:13.5px;list-style:none}
.shop-modal-desc summary::before{content:"+ ";color:var(--accent-2)}
.shop-modal-desc details[open] summary::before{content:"– "}
.shop-buy{border:1px solid var(--border);border-radius:16px;padding:16px;background:rgba(255,255,255,.02);align-self:start;position:sticky;top:0;min-width:0}
.shop-buy .cf-turnstile-guest{margin:8px 0 10px!important}
.shop-buy .cf-turnstile-guest iframe{max-width:100%}
.shop-buy .cf-turnstile-guest{max-width:100%;overflow:hidden}
.shop-buy form,.shop-buy .field{min-width:0}
.shop-buy input,.shop-buy select,.shop-buy textarea{max-width:100%;box-sizing:border-box}
.shop-promo-field .shop-promo-row{display:flex;gap:8px;align-items:stretch}
.shop-promo-field .shop-promo-row input{flex:1 1 auto;min-width:0;width:auto}
.shop-promo-field .shop-promo-row .btn{flex:none;white-space:nowrap;padding-left:14px;padding-right:14px}
.shop-buy .field{margin-bottom:12px}
.shop-plan-list{display:grid;gap:6px;margin-bottom:12px}
.shop-plan{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:13.5px;text-align:left}
.shop-plan.active{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.1)}
.shop-plan b{white-space:nowrap}
.shop-qty{display:flex;align-items:stretch;height:48px;max-width:230px;border:1px solid var(--border-strong);border-radius:14px;background:rgba(255,255,255,.03);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.shop-qty:focus-within{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.shop-qty button{flex:0 0 48px;min-height:0!important;border:0;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}
.shop-qty button:hover{background:rgba(255,255,255,.06);color:#a78bfa}
.shop-qty button:active{background:rgba(139,92,246,.16)}
.shop-qty button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.shop-qty input{flex:1 1 auto;min-width:0;width:auto;height:auto;margin:0;padding:0 6px;border:0!important;border-left:1px solid var(--border)!important;border-right:1px solid var(--border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none;text-align:center;font-size:18px!important;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.shop-qty input::-webkit-outer-spin-button,.shop-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.shop-qty-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.shop-qty-presets button{min-height:0!important;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:12.5px;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.shop-qty-presets button:hover,.shop-qty-presets button.active{border-color:rgba(139,92,246,.55);color:#fff;background:rgba(139,92,246,.1)}
.sk-gi{display:inline-block;width:1.05em;height:1.05em;margin-right:.2em;vertical-align:-.17em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:#a78bfa}
.sk-gi-warn,.sk-gi-alert{color:#f87171}
.sk-gi-clock,.sk-gi-card{color:#a1a1aa}
.shop-card-badge .sk-gi,.shop-note .sk-gi{width:1em;height:1em;margin-right:.3em}
.shop-total{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 12px;font-size:14px;color:var(--text-muted)}
.shop-total b{font-size:22px;color:#fff}
.shop-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--text-muted);margin-top:10px}
.shop-meta span::before{content:"•";margin-right:6px;color:var(--accent-2)}
.shop-error{color:#fca5a5;font-size:13px;margin:6px 0 0}
.shop-done{padding:18px;border-radius:14px;border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.08);font-size:14px;line-height:1.55}
.shop-done code{font-family:'JetBrains Mono',monospace;color:#fff;font-size:15px}


.shop-order{max-width:640px;margin:0 auto}
.shop-order-card{border:1px solid var(--border);border-radius:20px;background:var(--bg-3);padding:24px}
.shop-order-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.shop-order-row:last-child{border-bottom:0}
.shop-order-row span:first-child{color:var(--text-muted)}
.shop-order-codes{margin-top:16px;padding:14px;border-radius:12px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.35)}
.shop-order-codes code{display:block;font-family:'JetBrains Mono',monospace;font-size:15px;color:#fff;padding:6px 0;user-select:all}
.shop-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid}
.shop-status.awaiting_payment{color:#fbbf24;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.shop-status.paid,.shop-status.processing{color:#93c5fd;border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.1)}
.shop-status.done{color:var(--accent-2);border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.1)}
.shop-status.cancelled,.shop-status.failed,.shop-status.refunded{color:#fca5a5;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1)}

@media(max-width:1024px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .shop-hero-grid{grid-template-columns:1fr}
  .shop-hero-art{margin:24px 0 0;max-width:none}
  .shop-promo-grid{grid-template-columns:1fr}
  .shop-modal-body{grid-template-columns:1fr}
  .shop-buy{position:static}
}
@media(max-width:720px){
  .shop-hero{padding-top:calc(var(--hdr-h,64px) + 24px);padding-bottom:24px}
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .shop-card-body{padding:10px 12px 12px}
  .shop-card h3{font-size:14px}
  .shop-card p{font-size:12px}
  .shop-price{font-size:15px}
  .shop-toolbar{flex-direction:column;align-items:stretch;gap:6px;padding:6px 8px 8px;margin-bottom:18px;border-radius:14px;top:calc(var(--hdr-h,64px) + 4px)}
  .shop-search{flex:0 0 auto;height:38px;padding:0 12px;font-size:13.5px;border-radius:10px}
  .shop-cats{margin:0 -8px;padding:0 8px}
  .shop-cat{padding:6px 11px;font-size:12.5px}
  .shop-cat svg{width:14px;height:14px}
  .shop-promo{grid-template-columns:1fr;padding:20px}
  .shop-promo-pic img{width:120px;transform:none}
  .shop-modal{padding:0;align-items:stretch;overflow:hidden}
  .shop-modal .modal-card{border-radius:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;display:flex;flex-direction:column}
  .shop-modal-scroll{flex:1 1 auto;min-height:0;height:100%;max-height:none;scrollbar-width:none}
  .shop-modal-scroll::-webkit-scrollbar{display:none}
  .shop-modal-body{display:flex;flex-direction:column}
  .shop-buy{order:-1;position:static;padding:14px;align-self:stretch;width:auto;max-width:100%;box-sizing:border-box}
  .shop-modal-body>*{min-width:0;max-width:100%}
  .shop-plan span{min-width:0;overflow-wrap:anywhere}
  .shop-login .btn{white-space:normal;min-width:0}
  .shop-modal-desc{order:1}
  .shop-modal-head{position:sticky;top:0;z-index:2;background:var(--bg-3);padding:14px 16px 12px;border-bottom:1px solid var(--border)}
  .shop-modal-body{padding:14px 16px calc(32px + env(safe-area-inset-bottom))}
  .shop-modal-head{grid-template-columns:64px 1fr auto}
  .shop-modal-head img{width:64px;height:46px}
  .shop-modal-head h3{font-size:17px}
  .shop-section-head h2{font-size:20px}
}
@media(max-width:380px){.shop-grid{grid-template-columns:1fr 1fr;gap:8px}.shop-card-foot{flex-direction:column;align-items:flex-start}}

@media(max-width:720px){.shop-modal>.modal-card{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;overflow:hidden!important;border:0!important}}