/* HardCheats — «UNLOCKED» design system (mockup v1)
   Layers: tokens → base → layout → components → page helpers */

/* ---------- Fonts ---------- */
@font-face{font-family:"Inter";src:url("fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-600.woff2") format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Unbounded";src:url("fonts/unbounded-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Unbounded";src:url("fonts/unbounded-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Unbounded";src:url("fonts/unbounded-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Unbounded";src:url("fonts/unbounded-800.woff2") format("woff2");font-weight:800;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink-0:#09090B; --ink-1:#111114; --ink-2:#18181D; --ink-3:#222229; --ink-4:#2C2C35;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --text:#F4F4F6; --text-2:#A6A6B0; --text-3:#8C8C99;
  --lilac-100:#EEE8FF; --lilac-200:#D9CCFF; --lilac-300:#B9A5F5; --lilac-400:#A28BF2; --lilac-500:#8B73E6;
  --lilac-700:#4D3E79; --lilac-800:#2A2145; --lilac-900:#18132A;
  --paper:#F3F1F8; --paper-ink:#0B0A10; --paper-2:#E6E1F2;
  --ok:#2BE38F; --ok-bg:rgba(43,227,143,.10); --ok-line:rgba(43,227,143,.28);
  --warn:#F5B83D; --warn-bg:rgba(245,184,61,.10); --warn-line:rgba(245,184,61,.28);
  --risk:#FF7A45; --risk-bg:rgba(255,122,69,.10); --risk-line:rgba(255,122,69,.30);
  --bad:#FF4D5E; --bad-bg:rgba(255,77,94,.10); --bad-line:rgba(255,77,94,.30);
  --frozen:#6EA8FF; --frozen-bg:rgba(110,168,255,.10); --frozen-line:rgba(110,168,255,.30);
  --stale:#8C8C99; --stale-bg:rgba(140,140,153,.10); --stale-line:rgba(140,140,153,.28);
  --grad-primary:linear-gradient(180deg,#D3C5FF 0%,#B9A5F5 45%,#9E86EF 100%);
  --grad-lilac-panel:linear-gradient(135deg,#B9A5F5 0%,#8B73E6 55%,#4D3E79 100%);
  --grad-surface:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  --f-display:"Unbounded",system-ui,sans-serif; --f-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-chip:8px; --r-input:12px; --r-card:16px; --r-panel:24px; --r-poster:32px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --container:1280px; --gutter:24px; --hdr-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:150ms; --t:220ms;
  --glow:0 0 0 1px rgba(185,165,245,.35),0 10px 40px -10px rgba(139,115,230,.55);
}
@media (max-width:767px){:root{--gutter:16px;--hdr-h:58px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink-0);color:var(--text);font:400 16px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--lilac-300);outline-offset:2px;border-radius:6px}
::selection{background:var(--lilac-300);color:var(--paper-ink)}
.ico{width:20px;height:20px;flex:none}
.ico-sm{width:16px;height:16px;flex:none}
.ico-lg{width:24px;height:24px;flex:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Typography ---------- */
.display{font:800 72px/1 var(--f-display);letter-spacing:-.02em;text-transform:uppercase}
.h1{font:700 48px/1.08 var(--f-display);letter-spacing:-.015em;text-transform:uppercase}
.h2{font:700 32px/1.15 var(--f-display);letter-spacing:-.01em;text-transform:uppercase}
.h3{font:600 20px/1.3 var(--f-display);letter-spacing:-.005em}
.h4{font:600 16px/1.35 var(--f-ui)}
.eyebrow{font:600 12px/16px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--lilac-300)}
.lead{font-size:18px;line-height:28px;color:var(--text-2)}
.body-sm{font-size:14px;line-height:20px}
.caption{font-size:12px;line-height:16px;color:var(--text-3)}
.muted{color:var(--text-2)} .subtle{color:var(--text-3)}
.accent{color:var(--lilac-300)}
.price{font:700 28px/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.price small{font:500 14px/1 var(--f-ui);color:var(--text-2);letter-spacing:0}
@media (max-width:767px){
  .display{font-size:40px;line-height:1.02}
  .h1{font-size:32px}
  .h2{font-size:24px}
  .h3{font-size:18px}
  .lead{font-size:16px;line-height:24px}
}

/* ---------- Layout ---------- */
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.section{padding-top:var(--s-8);padding-bottom:var(--s-8)}
.section--tight{padding-top:var(--s-7);padding-bottom:var(--s-7)}
.split{display:grid;gap:var(--s-5);grid-template-columns:var(--split,1fr 1fr);align-items:var(--split-align,stretch)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-5)}
.section-head p{margin-top:var(--s-2)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:24px}.gap-6{gap:32px}
.grow{flex:1;min-width:0}
.between{justify-content:space-between}
.grid{display:grid;gap:var(--s-5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hide-m{} .show-m{display:none!important}
@media (max-width:1023px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .section{padding-top:40px;padding-bottom:40px}
  .section--tight{padding-top:32px;padding-bottom:32px}
  .split{grid-template-columns:minmax(0,1fr)}
  .section-head{align-items:flex-start;flex-direction:column;gap:var(--s-3)}
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
  .hide-m{display:none!important} .show-m{display:revert!important}
  .scroll-x-m{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 4px;scrollbar-width:none}
  .scroll-x-m::-webkit-scrollbar{display:none}
  .scroll-x-m>*{scroll-snap-align:start;flex:0 0 min(84%,340px);min-width:0!important}
}

/* ---------- Buttons ---------- */
.btn{--h:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 20px;border-radius:var(--r-pill);font:600 15px/1 var(--f-ui);white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t),transform var(--t-fast),color var(--t-fast);border:1px solid transparent;cursor:pointer;user-select:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--grad-primary);color:var(--paper-ink);font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(77,62,121,.25),0 8px 24px -10px rgba(139,115,230,.7)}
.btn--primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(77,62,121,.25),0 12px 34px -8px rgba(139,115,230,.85)}
.btn--secondary{background:var(--ink-2);border-color:var(--line-2);color:var(--text)}
.btn--secondary:hover{background:var(--ink-3);border-color:var(--line-3)}
.btn--ghost{color:var(--text);border-color:var(--line-2);background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.05)}
.btn--dark{background:var(--paper-ink);color:#fff}
.btn--paper{background:#fff;color:var(--paper-ink)}
.btn--tg{background:#2AABEE;color:#fff}
.btn--link{height:auto;padding:0;color:var(--lilac-300);border:0}
.btn--link:hover{color:var(--lilac-200)}
.btn--sm{--h:36px;padding:0 14px;font-size:14px}
.btn--lg{--h:56px;padding:0 28px;font-size:16px}
.btn--primary.btn--lg{font-size:15px}
.btn--block{width:100%}
.btn--icon{width:var(--h);padding:0}
.btn .ico{width:18px;height:18px}

/* ---------- Chips / tags / status ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--ink-1);color:var(--text);font:500 14px/1 var(--f-ui);white-space:nowrap;transition:all var(--t-fast)}
.chip:hover{border-color:var(--line-3);background:var(--ink-2)}
.chip.is-active{background:var(--lilac-300);color:var(--paper-ink);border-color:var(--lilac-300)}
.chip .count{color:var(--text-3);font-size:13px}
.chip.is-active .count{color:rgba(11,10,16,.6)}
.chip img{width:18px;height:18px;object-fit:contain}
.chip--sm{height:28px;padding:0 10px;font-size:13px;gap:6px}
.chip--paper{background:#fff;border-color:rgba(11,10,16,.12);color:var(--paper-ink)}
.chip--paper:hover{background:var(--paper-2);border-color:rgba(11,10,16,.2)}

.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;font:600 11px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tag .ico-sm{width:13px;height:13px}
.tag--hot{background:var(--lilac-300);color:var(--paper-ink)}
.tag--new{background:#fff;color:var(--paper-ink)}
.tag--sale{background:var(--warn);color:var(--paper-ink)}
.tag--label{background:var(--lc,var(--lilac-300));color:var(--paper-ink)}
.tag--label,.tag--hot,.tag--new,.tag--sale{position:relative;overflow:hidden;isolation:isolate;animation:tag-pulse 2.6s ease-in-out infinite}
.tag--label::after,.tag--hot::after,.tag--new::after,.tag--sale::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-120%);animation:tag-shine 2.6s ease-in-out infinite}
.tag--hot .ico-sm{animation:tag-flame 1.3s ease-in-out infinite;transform-origin:50% 90%}
@keyframes tag-shine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
@keyframes tag-pulse{0%,100%{box-shadow:0 0 0 0 rgba(185,165,245,0)}50%{box-shadow:0 0 14px 1px rgba(185,165,245,.45)}}
@keyframes tag-flame{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.12) rotate(-6deg)}60%{transform:scale(.95) rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.tag--label,.tag--label::after,.tag--hot,.tag--new,.tag--sale,.tag--hot::after,.tag--new::after,.tag--sale::after,.tag--hot .ico-sm{animation:none}}
.tag--type{background:rgba(185,165,245,.12);color:var(--lilac-200);border:1px solid rgba(185,165,245,.25)}
.tag--line{border:1px solid var(--line-2);color:var(--text-2)}
.tag--glass{background:rgba(9,9,11,.62);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}

.status{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px 0 10px;border-radius:var(--r-pill);font:600 13px/1 var(--f-ui);white-space:nowrap;border:1px solid}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.status--ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.status--ok::before{box-shadow:0 0 0 0 rgba(43,227,143,.6);animation:pulse 2.2s infinite}
.status--warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.status--risk{color:var(--risk);background:var(--risk-bg);border-color:var(--risk-line)}
.status--off{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.status--frozen{color:var(--frozen);background:var(--frozen-bg);border-color:var(--frozen-line)}
.status--stale{color:var(--stale);background:var(--stale-bg);border-color:var(--stale-line)}
.status--stale::before{background:transparent;border:1.5px dashed currentColor}
.delivery{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.2 var(--f-ui);color:var(--text-2)}
.delivery svg{width:15px;height:15px;color:var(--lilac-300)}
.delivery--support svg{color:var(--warn)}
.status--sm{height:24px;font-size:12px;padding:0 9px 0 8px;gap:6px}
.status--sm::before{width:7px;height:7px}
.status--glass{background:rgba(9,9,11,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(43,227,143,.55)}70%{box-shadow:0 0 0 7px rgba(43,227,143,0)}100%{box-shadow:0 0 0 0 rgba(43,227,143,0)}}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot--ok{background:var(--ok)} .dot--warn{background:var(--warn)} .dot--risk{background:var(--risk)} .dot--off{background:var(--bad)} .dot--frozen{background:var(--frozen)} .dot--stale{background:var(--stale)}

/* ---------- Cards / surfaces ---------- */
.card{background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-card);position:relative}
.card--pad{padding:var(--s-5)}
.card--panel{border-radius:var(--r-panel);padding:var(--s-6)}
.card--hover{transition:border-color var(--t),transform var(--t) var(--ease),background var(--t)}
.card--hover:hover{border-color:rgba(185,165,245,.35);transform:translateY(-2px)}
.card--inset{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-input)}
.card--lilac{background:var(--grad-lilac-panel);border:0;color:#fff;overflow:hidden}
.card--outline-lilac{border-color:rgba(185,165,245,.4);box-shadow:var(--glow)}
@media (max-width:767px){.card--panel{padding:20px;border-radius:20px}.card--pad{padding:16px}}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* Brand poster (white) — one per page max */
.poster{background:var(--paper);color:var(--paper-ink);border-radius:var(--r-poster);position:relative;overflow:hidden;isolation:isolate}
.poster h1,.poster h2,.poster h3{color:var(--paper-ink)}
.poster .muted{color:#4B4858}
.poster--wm::before{content:"";position:absolute;inset:0;background:url("img/graffiti.svg") right -40px center/auto 125% no-repeat;z-index:-1}
.splat{position:absolute;pointer-events:none;z-index:0}

/* Graffiti watermark for dark sections */
.wm{position:relative;isolation:isolate}
.wm::after{content:"";position:absolute;inset:0;background:url("img/graffiti-white.svg") center/contain no-repeat;opacity:.3;z-index:-1;pointer-events:none}

/* Sticker (brand inline accent) */
.sticker{display:inline-grid;place-items:center;background:var(--lilac-300);color:var(--paper-ink);border-radius:12px;vertical-align:middle;transform:rotate(-4deg)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr-h);background:rgba(9,9,11,.78);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.hdr__in{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav__link{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:10px;font:500 15px/1 var(--f-ui);color:var(--text-2);transition:color var(--t-fast),background var(--t-fast)}
.nav__link:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav__link.is-active{color:var(--text)}
.nav__link.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:6px;background:url("img/brush-underline.png") center/100% 100% no-repeat;filter:brightness(0) saturate(100%) invert(76%) sepia(18%) saturate(1500%) hue-rotate(205deg)}
.nav__link .ico-sm{opacity:.7}
.hdr__search{flex:1;max-width:340px;margin-left:auto;position:relative}
.hdr__search input{width:100%;height:40px;border-radius:var(--r-pill);background:var(--ink-2);border:1px solid var(--line);padding:0 64px 0 40px;font-size:14px;color:var(--text);outline:none;transition:border-color var(--t-fast)}
.hdr__search input::placeholder{color:var(--text-3)}
.hdr__search input:focus{border-color:var(--lilac-500)}
.hdr__search .ico{position:absolute;left:13px;top:10px;width:18px;height:18px;color:var(--text-3)}
.kbd{position:absolute;right:10px;top:9px;height:22px;padding:0 7px;border-radius:6px;border:1px solid var(--line-2);font:500 12px/20px var(--f-ui);color:var(--text-3)}
.hdr__actions{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--text-2);border:1px solid transparent;transition:all var(--t-fast)}
.icon-btn:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--line)}
.icon-btn .badge{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--lilac-300);color:var(--paper-ink);font:700 10px/17px var(--f-ui);text-align:center}
.lang{display:inline-flex;align-items:center;height:32px;padding:3px;border-radius:var(--r-pill);background:var(--ink-2);border:1px solid var(--line);font:600 12px/1 var(--f-ui)}
.lang span{display:grid;place-items:center;height:24px;padding:0 9px;border-radius:var(--r-pill);color:var(--text-3)}
.lang span.is-active{background:var(--ink-4);color:var(--text)}
.balance-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 14px;border-radius:var(--r-pill);background:var(--ink-2);border:1px solid var(--line);font:600 14px/1 var(--f-ui)}
.balance-pill .plus{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lilac-300);color:var(--paper-ink)}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--lilac-300);flex:none;background:var(--ink-3)}
.avatar--sm{width:32px;height:32px;border-width:1.5px}
.avatar--lg{width:64px;height:64px}
.hdr__burger,.hdr-m{display:none}
@media (max-width:1100px){.hdr__search{max-width:240px}.nav__link{padding:0 9px}}
@media (max-width:1023px){.nav,.hdr__search,.hdr .lang,.hdr .hdr-desk{display:none}.hdr__actions{margin-left:auto}.hdr__burger,.hdr-m{display:inline-grid}}
@media (max-width:767px){.logo img{height:28px}.hdr__in{gap:12px}}

/* Mega menu (catalog) */
.mega{position:absolute;left:0;right:0;top:var(--hdr-h);background:rgba(13,13,16,.98);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.mega__in{display:grid;grid-template-columns:1fr 1fr 280px;gap:32px;padding:28px 0 32px}

/* ---------- Mobile tab bar ---------- */
.tabbar{display:none}
@media (max-width:767px){
  body.has-tabbar{padding-bottom:76px}
  .tabbar{display:grid;padding-bottom:calc(10px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;height:68px;padding:6px 6px 10px;background:rgba(13,13,16,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:12px;color:var(--text-3);font:500 11px/1 var(--f-ui)}
  .tabbar a .ico{width:22px;height:22px}
  .tabbar a.is-active{color:var(--lilac-300)}
  .tabbar a.is-active .ico{filter:drop-shadow(0 0 8px rgba(185,165,245,.6))}
}

/* ---------- Footer ---------- */
.ftr{margin-top:var(--s-8);border-top:1px solid var(--line);background:linear-gradient(180deg,#0C0C0F, #09090B)}
.ftr__top{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:32px;padding:56px 0 40px}
.ftr__brand p{margin-top:16px;color:var(--text-2);font-size:14px;max-width:300px}
.ftr h4{font:600 12px/16px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.ftr li+li{margin-top:10px}
.ftr li a{color:var(--text-2);font-size:14px;transition:color var(--t-fast)}
.ftr li a:hover{color:var(--text)}
.socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.social{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r-pill);background:var(--ink-2);border:1px solid var(--line);color:var(--text-2);font:500 13px/1 var(--f-ui)}
.social svg{width:16px;height:16px}
.social:hover{color:var(--text);border-color:var(--line-2)}
.ftr__pay{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pay{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:8px;background:var(--ink-2);border:1px solid var(--line);font:600 12px/1 var(--f-ui);color:var(--text-2)}
.ftr__bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0 28px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}
@media (max-width:1023px){.ftr__top{grid-template-columns:repeat(2,1fr)}.ftr__brand{grid-column:1/-1}}
@media (max-width:767px){.ftr{margin-top:40px}.ftr__top{gap:28px 16px;padding:40px 0 28px}.ftr__bottom{flex-direction:column;align-items:flex-start;gap:12px}}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.label{font:500 14px/1 var(--f-ui);color:var(--text)}
.label .opt{color:var(--text-3);font-weight:400}
.input{position:relative}
.input input,.input select,.input textarea,.textarea{width:100%;height:48px;border-radius:var(--r-input);background:var(--ink-2);border:1px solid var(--line-2);padding:0 16px;color:var(--text);font-size:15px;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input textarea,.textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical;line-height:1.5}
.input input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input input:focus,.input select:focus,.textarea:focus{border-color:var(--lilac-400);box-shadow:0 0 0 3px rgba(185,165,245,.18)}
.input--icon input{padding-left:44px}
.input>.ico{position:absolute;left:14px;top:14px;color:var(--text-3)}
.input .trail{position:absolute;right:6px;top:6px;height:36px;display:flex;align-items:center}
.input .trail .icon-btn{width:36px;height:36px}
.input.is-error input{border-color:var(--bad)}
.hint{font-size:13px;color:var(--text-3)}
.error{font-size:13px;color:var(--bad);display:flex;gap:6px;align-items:center}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2);line-height:1.45;cursor:pointer}
.check .box{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-3);display:grid;place-items:center;margin-top:1px}
.check.is-on .box{background:var(--lilac-300);border-color:var(--lilac-300);color:var(--paper-ink)}
.check .box svg{width:14px;height:14px}
.check a{color:var(--lilac-300)}
.toggle{width:40px;height:24px;border-radius:12px;background:var(--ink-4);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--t)}
.toggle.is-on{background:var(--lilac-400)}
.toggle.is-on::after{transform:translateX(16px)}
.radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-3);flex:none;display:grid;place-items:center}
.is-selected .radio{border-color:var(--lilac-300)}
.is-selected .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--lilac-300)}
.seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--ink-2);border:1px solid var(--line);gap:2px}
.seg a,.seg button{height:34px;padding:0 14px;border-radius:var(--r-pill);font:500 14px/34px var(--f-ui);color:var(--text-2);white-space:nowrap}
.seg .is-active{background:var(--ink-4);color:var(--text)}

/* ---------- Tabs / anchors ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;height:48px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--f-ui);color:var(--text-2);white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--text)}
.tab.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--lilac-300)}
.tab .count{font-size:12px;color:var(--text-3);background:var(--ink-3);border-radius:10px;padding:2px 7px}

/* ---------- Breadcrumbs ---------- */
.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--text-3)}
.crumbs a{color:var(--text-2)} .crumbs a:hover{color:var(--text)}
.crumbs .ico-sm{width:14px;height:14px;opacity:.6}

/* ---------- Product card ---------- */
.pcard{display:flex;flex-direction:column;background:var(--ink-1);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color var(--t),transform var(--t) var(--ease),box-shadow var(--t)}
.pcard:hover{border-color:rgba(185,165,245,.4);transform:translateY(-3px);box-shadow:0 24px 48px -24px rgba(139,115,230,.45)}
.pcard__cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:#141218}
.pcard__cover>img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pcard:hover .pcard__cover>img{transform:scale(1.04)}
.pcard__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,11,0) 45%,rgba(17,17,20,.92) 100%)}
.pcard__tl{position:absolute;left:12px;top:12px;display:flex;gap:6px;z-index:2}
.pcard__tr{position:absolute;right:12px;top:12px;z-index:2}
.pcard__game{position:absolute;left:14px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px;font:600 13px/1 var(--f-ui);color:#fff}
.pcard__game img{width:22px;height:22px;border-radius:6px;object-fit:contain;background:rgba(255,255,255,.08);padding:3px}
.pcard__body{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;flex:1}
.pcard__title{display:flex;align-items:baseline;gap:10px;font:700 20px/1.2 var(--f-display);letter-spacing:-.01em}
.pcard__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text-3)}
.feat{display:flex;gap:6px;flex-wrap:wrap}
.feat span{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:7px;background:var(--ink-2);border:1px solid var(--line);font:500 12px/1 var(--f-ui);color:var(--text-2)}
.feat span svg{width:13px;height:13px;color:var(--lilac-300)}
.pcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px}
.pcard__price .caption{display:block;margin-bottom:6px}
.pcard__price .price{font-size:22px}
.updated{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-3)}
.updated svg{width:13px;height:13px}

/* Generated product covers (unified cover template) */
.cover-gen{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.cover-gen::before{content:"";position:absolute;inset:0;background:var(--cover-bg)}
.cover-gen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px);mix-blend-mode:overlay}
.cover-gen b{position:relative;z-index:1;font:800 var(--cg-size,40px)/.92 var(--f-display);text-transform:uppercase;letter-spacing:-.03em;color:rgba(255,255,255,.92);text-align:right;align-self:center;justify-self:end;padding-right:7%;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.cover-gen b i{display:block;font-size:.8em;font-style:normal;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.55)}
.cover-gen .cg-art{position:absolute;left:-4%;bottom:-6%;height:110%;width:auto;opacity:.95;z-index:1;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.cg-rust{--cover-bg:radial-gradient(120% 90% at 20% 80%,#5b1d16 0%,#2a0f0d 45%,#110a0a 100%)}
.cg-tarkov{--cover-bg:radial-gradient(120% 90% at 25% 70%,#3a3a24 0%,#1d1c13 50%,#0d0d0b 100%)}
.cg-pubg{--cover-bg:radial-gradient(120% 90% at 25% 70%,#5a3b12 0%,#2b1c0b 50%,#100c07 100%)}
.cg-delta{--cover-bg:radial-gradient(120% 90% at 25% 70%,#123a4a 0%,#0c2029 50%,#080d10 100%)}
.cg-cs{--cover-bg:radial-gradient(120% 90% at 25% 70%,#4a3a10 0%,#221b0c 50%,#0e0c07 100%)}
.cg-dayz{--cover-bg:radial-gradient(120% 90% at 25% 70%,#2b2b2b 0%,#151515 50%,#0a0a0a 100%)}
.cg-lilac{--cover-bg:radial-gradient(120% 90% at 25% 70%,#3c2f6b 0%,#1d1736 50%,#0c0a14 100%)}
.cg-arena{--cover-bg:radial-gradient(120% 90% at 25% 70%,#173b2c 0%,#0e2219 50%,#080e0b 100%)}

/* Game tile */
.game{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:3/4;padding:16px;border-radius:20px;overflow:hidden;border:1px solid var(--line);isolation:isolate;transition:transform var(--t) var(--ease),border-color var(--t)}
.game:hover{transform:translateY(-3px);border-color:rgba(185,165,245,.45)}
.game::before{content:"";position:absolute;inset:0;background:var(--cover-bg);z-index:-2}
.game::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,11,0) 30%,rgba(9,9,11,.9) 100%);z-index:-1}
.game__logo{position:absolute;top:16px;left:16px;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;backdrop-filter:blur(6px)}
.game__logo img{width:26px;height:26px;object-fit:contain}
.game__word{position:absolute;inset:0;display:grid;place-items:center;font:800 34px/1 var(--f-display);color:rgba(255,255,255,.08);letter-spacing:-.02em;text-transform:uppercase;z-index:-1;transform:rotate(-8deg)}
.game__name{font:700 17px/1.2 var(--f-display)}
.game__meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.game--soon{opacity:.6}

/* ---------- Plan selector / buy panel ---------- */
.plans{display:flex;flex-direction:column;gap:8px}
.plan{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line);cursor:pointer;transition:all var(--t-fast)}
.plan:hover{border-color:var(--line-3)}
.plan.is-selected{background:linear-gradient(180deg,rgba(185,165,245,.14),rgba(185,165,245,.06));border-color:var(--lilac-300);box-shadow:0 0 0 1px var(--lilac-300) inset}
.plan__name{font:600 15px/1.2 var(--f-ui)}
.plan__sub{font-size:13px;color:var(--text-3);margin-top:3px}
.plan__price{text-align:right;font:700 17px/1 var(--f-display);font-variant-numeric:tabular-nums}
.plan__price s{display:block;font:400 12px/1 var(--f-ui);color:var(--text-3);margin-top:5px;text-decoration:line-through}
.plan .save{display:inline-flex;margin-left:8px;height:20px;padding:0 7px;border-radius:6px;background:var(--ok-bg);color:var(--ok);font:600 11px/20px var(--f-ui);vertical-align:1px}
.plan .best{background:var(--lilac-300);color:var(--paper-ink)}
.perk{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ink-2);border:1px dashed rgba(185,165,245,.3);font-size:14px;color:var(--text-2)}
.perk img{width:40px;height:40px;object-fit:contain;flex:none}
.perk b{color:var(--text);font-weight:600}
.perk[hidden]{display:none}
.trust-list{display:grid;gap:10px}
.trust-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2)}
.trust-list li svg{width:18px;height:18px;color:var(--lilac-300);flex:none;margin-top:1px}

/* Sticky mobile buy bar */
.buybar{display:none}
@media (max-width:767px){
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;align-items:center;gap:12px;padding:10px 16px 14px;background:rgba(13,13,16,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .buybar .grow .caption{display:block}
  body.has-buybar{padding-bottom:84px}
}

/* ---------- Key card ---------- */
.keycard{position:relative;border-radius:20px;padding:20px;background:linear-gradient(135deg,rgba(185,165,245,.10),rgba(185,165,245,.02) 60%),var(--ink-1);border:1px solid rgba(185,165,245,.22);overflow:hidden}
.keycard__key{display:flex;align-items:center;gap:8px;height:48px;padding:0 6px 0 14px;border-radius:12px;background:var(--ink-0);border:1px solid var(--line-2);font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.keycard__key span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress{height:6px;border-radius:3px;background:var(--ink-3);overflow:hidden}
.progress i{display:block;height:100%;border-radius:3px;background:var(--grad-primary)}
.progress--ok i{background:var(--ok)}
.progress--warn i{background:var(--warn)}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font:600 12px/16px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:0 16px 12px;border-bottom:1px solid var(--line)}
.table td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:middle}
.table td.strong{color:var(--text);font-weight:600}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:rgba(255,255,255,.015)}

/* ---------- Accordion ---------- */
.acc{border-radius:var(--r-card);background:var(--ink-1);border:1px solid var(--line)}
.acc+.acc{margin-top:8px}
.acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;font:600 16px/1.35 var(--f-ui)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ico{transition:transform var(--t);color:var(--text-3)}
.acc[open] summary .ico{transform:rotate(45deg);color:var(--lilac-300)}
.acc .acc__body{padding:0 20px 18px;color:var(--text-2);font-size:15px;line-height:1.6}

/* ---------- Reviews ---------- */
.stars{display:inline-flex;gap:2px;color:var(--warn)}
.stars svg{width:15px;height:15px;fill:currentColor;stroke:none}
.stars .off{color:var(--ink-4)}
.review{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-card);background:var(--ink-1);border:1px solid var(--line)}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ok)}
.verified svg{width:13px;height:13px}

/* ---------- Article / prose ---------- */
.prose{font-size:17px;line-height:1.7;color:#D9D9DF}
.prose>*+*{margin-top:18px}
.prose h2{font:700 26px/1.25 var(--f-display);margin-top:44px;color:var(--text);letter-spacing:-.01em}
.prose h3{font:600 20px/1.3 var(--f-display);margin-top:32px;color:var(--text)}
.prose ul{padding-left:0}
.prose ul li{position:relative;padding-left:22px}
.prose ul li+li{margin-top:8px}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--lilac-300);transform:rotate(45deg)}
.prose a{color:var(--lilac-300);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(185,165,245,.4)}
.prose blockquote{margin:24px 0;padding:18px 20px;border-left:3px solid var(--lilac-300);background:var(--ink-1);border-radius:0 12px 12px 0;color:var(--text)}
.callout{display:flex;gap:12px;padding:16px 18px;border-radius:14px;background:rgba(185,165,245,.08);border:1px solid rgba(185,165,245,.22);font-size:15px;color:var(--text);line-height:1.55}
.callout svg{width:20px;height:20px;color:var(--lilac-300);flex:none;margin-top:2px}
.callout--warn{background:var(--warn-bg);border-color:var(--warn-line)} .callout--warn svg{color:var(--warn)}
.toc a{display:block;padding:8px 12px;border-left:2px solid var(--line);font-size:14px;color:var(--text-3);line-height:1.4}
.toc a:hover{color:var(--text)}
.toc a.is-active{border-left-color:var(--lilac-300);color:var(--text)}
@media (max-width:767px){.prose{font-size:16px}.prose h2{font-size:21px;margin-top:32px}}

/* ---------- Misc ---------- */
.kv{display:flex;flex-direction:column;gap:4px}
.kv dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.kv dd{margin:0;font-weight:600}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:40px 24px}
.empty img{width:160px;height:auto}
.toast{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--ink-3);border:1px solid var(--line-2);font-size:14px;box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}
.chain-sep{height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Crect x='1' y='3' width='16' height='8' rx='4' fill='none' stroke='%23B9A5F5' stroke-opacity='.45' stroke-width='2'/%3E%3Crect x='13' y='3' width='14' height='8' rx='4' fill='none' stroke='%23B9A5F5' stroke-opacity='.25' stroke-width='2'/%3E%3C/svg%3E") repeat-x center/28px 14px}
.notice{display:flex;align-items:center;justify-content:center;gap:10px;height:36px;background:linear-gradient(90deg,#2A2145,#3A2E66 50%,#2A2145);font:500 13px/1 var(--f-ui);color:var(--lilac-100)}
.notice b{font-weight:600;color:#fff}
.notice code{font:700 12px/1 var(--f-display);padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.12);letter-spacing:.04em}
.side-nav a{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:12px;font:500 15px/1 var(--f-ui);color:var(--text-2)}
.side-nav a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.side-nav a.is-active{background:var(--ink-3);color:var(--text)}
.side-nav a.is-active svg{color:var(--lilac-300)}
.side-nav a .count{margin-left:auto;font-size:12px;background:var(--lilac-300);color:var(--paper-ink);border-radius:10px;padding:2px 7px;font-weight:700}
.side-nav .sep{height:1px;background:var(--line);margin:8px 6px}
.pagination{display:flex;gap:6px;justify-content:center;align-items:center}
.pagination a{display:grid;place-items:center;min-width:40px;height:40px;padding:0 6px;border-radius:12px;border:1px solid var(--line);color:var(--text-2);font-weight:500}
.pagination a.is-active{background:var(--lilac-300);color:var(--paper-ink);border-color:var(--lilac-300)}
.skeleton{background:linear-gradient(90deg,var(--ink-2),var(--ink-3),var(--ink-2));background-size:200% 100%;animation:sk 1.4s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
.tooltip-note{font-size:12px;color:var(--text-3)}
.bg-glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(80px);opacity:.45;background:radial-gradient(circle,#8B73E6,transparent 70%)}
.nowrap{white-space:nowrap}

/* ---------- Profile shell ---------- */
.pshell{display:grid;grid-template-columns:288px minmax(0,1fr);gap:28px;align-items:start;padding-top:28px}
.pside{position:sticky;top:calc(var(--hdr-h) + 20px);display:flex;flex-direction:column;gap:12px}
.pside__card{padding:20px;display:flex;flex-direction:column;gap:16px}
.pside__bal{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pside__bal>div{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:var(--ink-2);border:1px solid var(--line)}
.pside__bal b{font:700 18px/1.1 var(--f-display)}
.pside__nav{padding:8px;border-radius:var(--r-card);background:var(--ink-1);border:1px solid var(--line)}
.pmain{display:flex;flex-direction:column;gap:20px;min-width:0}
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
@media (max-width:1023px){
  .pshell{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:16px}
  .pside{position:static}
  .pside__nav{display:flex;overflow-x:auto;gap:6px;padding:0;background:none;border:0;scrollbar-width:none}
  .pside__nav::-webkit-scrollbar{display:none}
  .pside__nav a{flex:none;height:38px;border:1px solid var(--line);background:var(--ink-1);border-radius:999px;padding:0 14px;font-size:14px}
  .pside__nav a .ico{width:16px;height:16px}
  .pside__nav .sep,.pside__nav a[href="home.html"]{display:none}
  .pside__card{flex-direction:row;flex-wrap:wrap;align-items:center}
  .pside__card>.row{flex:1 1 100%}
  .pside__bal{flex:1}
}
@media (max-width:767px){.phead{flex-direction:column;align-items:flex-start}.pside__card .btn{flex:1 1 100%}}
.check .box svg{opacity:0}
.check.is-on .box svg{opacity:1}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- Auth ---------- */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;margin-top:24px;min-height:640px}
.auth__form{padding:48px 56px;border-radius:32px;background:var(--ink-1);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.auth__form form{display:flex;flex-direction:column;gap:16px;max-width:440px;width:100%;margin:0 auto}
.auth__oauth{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth__oauth .btn{height:48px;border-radius:14px;font-family:var(--f-ui);font-weight:600}
.auth__oauth .btn svg{width:18px;height:18px}
.auth__or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-3)}
.auth__or::before,.auth__or::after{content:"";flex:1;height:1px;background:var(--line-2)}
.auth__ctx{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(185,165,245,.08);border:1px solid rgba(185,165,245,.22);font-size:14px;color:var(--text-2)}
.auth__ctx img{width:56px;height:38px;border-radius:8px;object-fit:cover}
.auth__ctx b{color:var(--text)}
.auth__poster{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:40px}
.auth__poster img.art{position:absolute;right:-44%;bottom:0;height:80%;width:auto;max-width:none;z-index:0;pointer-events:none}
.auth__poster h2{font-size:30px;max-width:300px!important}
.auth__poster>*:not(.art){position:relative;z-index:1}
.auth__perks{display:grid;gap:10px;max-width:290px}
.auth__perks li{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.75);backdrop-filter:blur(6px);border:1px solid rgba(11,10,16,.08);font:600 14px/1.3 var(--f-ui);color:var(--paper-ink)}
.auth__perks li span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--lilac-300);flex:none}
.auth__perks li svg{width:16px;height:16px}
.auth__m-art{display:none}
@media (max-width:1023px){.auth{grid-template-columns:minmax(0,1fr)}.auth__poster{display:none}.auth__m-art{display:block}}
@media (max-width:767px){
  .auth{margin-top:12px;min-height:0}
  .auth__form{padding:0 0 24px;background:none;border:0;border-radius:0}
  .auth__m-art{position:relative;height:150px;border-radius:24px;overflow:hidden;background:var(--paper);margin-bottom:22px}
  .auth__m-art{height:132px}
  .auth__m-art img{position:absolute;left:50%;transform:translateX(-50%);top:-8px;height:160px;width:auto;max-width:none}
  .auth__m-art b{display:none}
  .auth__form .h1{font-size:30px!important}
  .auth__oauth{grid-template-columns:1fr 1fr}
}

/* ---------- Blog cards (shared) ---------- */
.blogc{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--ink-1);border:1px solid var(--line);transition:border-color var(--t),transform var(--t) var(--ease)}
.blogc:hover{border-color:rgba(185,165,245,.35);transform:translateY(-2px)}
.blogc__img{aspect-ratio:16/9;background:#141218;overflow:hidden;position:relative}
.blogc__img img{width:100%;height:100%;object-fit:cover}
.blogc__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.blogc h3{font:600 18px/1.35 var(--f-display)}
.author{display:flex;align-items:center;gap:10px;font-size:14px}
.author img{width:32px;height:32px;border-radius:10px;object-fit:cover;background:#fff}
.author b{font-weight:600}

/* ---------- Mega menu / mobile sheet (open via :target) ---------- */
.nav__more{padding:0 6px;margin-left:-8px}
.mega{display:none;position:absolute;left:0;right:0;top:100%;z-index:49;background:#0D0D10;border-bottom:1px solid var(--line-2);box-shadow:0 30px 60px -10px rgba(0,0,0,.9)}
.mega::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(0,0,0,.55);pointer-events:none}
.mega:target{display:block}
.mega__in{display:grid;grid-template-columns:1.4fr 1fr 300px;gap:32px;padding:28px var(--gutter) 32px}
.mega__games{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega__games a,.mega__types a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid transparent}
.mega__games a:hover,.mega__types a:hover{background:var(--ink-2);border-color:var(--line)}
.mega__games .gi{width:40px;height:40px;border-radius:12px;background:var(--ink-3);display:grid;place-items:center;font:800 10px/1 var(--f-display);flex:none}
.mega__games .gi img{width:24px;height:24px}
.mega b{display:block;font:600 15px/1.2 var(--f-ui)}
.mega small{display:block;font-size:13px;color:var(--text-3);margin-top:3px}
.mega__types{display:grid;gap:6px}
.mega__types svg{color:var(--lilac-300);flex:none}
.mega__promo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:220px;padding:16px;border-radius:20px;overflow:hidden;border:1px solid var(--line);isolation:isolate}
.mega__promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.mega__promo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(9,9,11,.92));z-index:-1}
.mega__promo .status{position:absolute;top:12px;right:12px}
.mega__promo b{font:700 20px/1.1 var(--f-display)}
.msheet{display:none}
@media (max-width:1023px){
  .msheet:target{display:block;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
  .msheet__in{position:absolute;left:0;right:0;top:0;padding:14px 16px 20px;background:var(--ink-1);border-bottom:1px solid var(--line-2);border-radius:0 0 24px 24px;box-shadow:0 30px 60px -10px rgba(0,0,0,.8)}
  .msheet__nav{display:flex;flex-direction:column;margin-top:14px}
  .msheet__nav a{display:flex;align-items:center;gap:14px;height:52px;padding:0 4px;border-bottom:1px solid var(--line);font:500 16px/1 var(--f-ui)}
  .msheet__nav a svg.ico{color:var(--lilac-300)}
  .msheet__nav a .chev{margin-left:auto;color:var(--text-3)}
}

/* Profile shell — compact mobile header: content first */
@media (max-width:767px){
  .pside{gap:10px}
  .pside__card{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px}
  .pside__card>.row{display:contents}
  .pside__card .avatar--lg{width:44px;height:44px}
  .pside__card .caption,.pside__card .tag{display:none}
  .pside__bal{display:flex;gap:6px;justify-content:flex-end}
  .pside__bal>div{padding:6px 10px;border-radius:10px;gap:0}
  .pside__bal>div .caption{display:none}
  .pside__bal b{font-size:14px}
  .pside__bal>div:nth-child(2){display:none}
  .pside__card .btn{grid-column:1/-1;height:40px}
  .pside__nav{flex-wrap:nowrap!important;margin:0 -16px;padding:0 16px!important}
}
@media (max-width:767px){
  .pside__card{grid-template-columns:auto 1fr auto auto}
  .pside__card .btn{grid-column:auto;width:40px;height:40px;padding:0;font-size:0;gap:0;border-radius:50%}
  .pside__card .btn .ico{width:18px;height:18px}
}