*,*::before,*::after{margin:0;padding:0;box-sizing:border-box} /* Inventory $-value (BETA): default-hide every .inv-value-filter container. The block at the very end of flips this back on when window.INV_VALUE_ENABLED is true. Doing it CSS-first prevents the brief "flash" of the filters between markup parse and JS init. */ .inv-value-filter{display:none!important} body.inv-value-on .inv-value-filter{display:flex!important} :root{ --bg:#050505;--card:#0d0d0d;--el:#141414;--brd:rgba(255,255,255,.06); --t:#fff;--t2:rgba(255,255,255,.55);--t3:rgba(255,255,255,.28); --ac:#60a5fa;--ac2:#3b82f6;--ac3:#1e3a8a; --ac-soft:rgba(96,165,250,.12);--ac-glow:rgba(96,165,250,.25); --ok:#22c55e;--err:#ef4444;--warn:#fbbf24; --ease:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1); } *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent} *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px;transition:background .2s} *::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)} html{scroll-behavior:smooth;background:var(--bg)} body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--t);min-height:100vh;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow-x:hidden} body.bm-lock{overflow:hidden} button,a,.fb-chip,.game-card,.acc-card,.fb-mode-btn,.acc-buy-btn,.bm-btn,.fb-search,.fb-search-clear{ -webkit-tap-highlight-color:transparent; user-select:none; } .fb-search input{user-select:text} button{font-family:inherit} button:active:not(:disabled){transform:scale(.97)} .fb-chip:active:not(.on){transform:scale(.95)} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ── Header bar — frosted glass + subtle green seam tying to the user pod ── */ .hd{ position:fixed;top:0;left:0;right:0;height:72px;z-index:100; display:flex;align-items:center;justify-content:space-between;gap:14px; padding:0 clamp(14px,3vw,48px); background:linear-gradient(180deg,rgba(7,9,11,.92) 0%,rgba(4,6,7,.88) 100%); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid rgba(255,255,255,.05); box-shadow:0 1px 0 rgba(255,255,255,.025) inset, 0 6px 24px rgba(0,0,0,.4); } .hd::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent 0%,rgba(34,197,94,.18) 50%,transparent 100%); pointer-events:none; } /* Logo — wordmark + azure square (polish.css hardens the square globally) */ .lo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0; transition:transform .2s var(--ease-soft);} .lo:hover{transform:translateY(-.5px)} .lo-t{font-weight:800;font-size:16.5px;color:#fff;white-space:nowrap;letter-spacing:-.3px} .lo-t span,.lo-t .lo-sq{ color:#60a5fa;font-weight:inherit;-webkit-text-fill-color:#60a5fa; text-shadow:0 0 10px rgba(96,165,250,.55); } /* Nav — capsule pills, absolutely centered on the page so the bar reads cleanly regardless of logo/userpod widths */ .nv{display:flex;gap:2px;background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:4px; position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); pointer-events:auto} .nv a{ padding:8px 16px;border-radius:999px;color:var(--t3);text-decoration:none; font-size:13.5px;font-weight:600;letter-spacing:.1px;white-space:nowrap; transition:color .2s var(--ease-soft),background .2s var(--ease-soft); position:relative; } .nv a:hover{color:#fff;background:rgba(255,255,255,.04)} .nv a.act{ color:#0b1220;background:#fff;font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.04) inset; } .hd-r{display:flex;gap:10px;align-items:center;flex-shrink:0} .hd-test{padding:4px 10px;border-radius:6px;background:rgba(245,158,11,.12);color:#fbbf24;font-size:10px;font-weight:700;border:1px solid rgba(245,158,11,.25);letter-spacing:.5px} .lang{display:inline-flex;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:3px;gap:2px} .lang button{border:0;padding:6px 10px;font-size:11px;font-weight:700;font-family:inherit;background:transparent;color:var(--t3);border-radius:999px;cursor:pointer;letter-spacing:.5px;transition:color .15s,background .15s} .lang button.active{color:#0b1220;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)} .lang button:not(.active):hover{color:#fff;background:rgba(255,255,255,.04)} @media(max-width:480px){.lang button{padding:5px 8px;font-size:10.5px}} /* Mobile header — hide nav, shorten logo, prioritize user widget */ @media(max-width:760px){ .hd{height:64px;padding:0 12px;gap:8px} .nv{display:none} .lo-t{font-size:15px} .hd-test{display:none} } @media(max-width:360px){ .lo-t{font-size:13px} } /* ── Header: login button (signed-out) ── */ .hd-login{ display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px; background:linear-gradient(180deg,#1c1c1c,#0c0c0c); border:1px solid rgba(255,255,255,.1);color:#fff; font-family:inherit;font-size:13px;font-weight:700;cursor:pointer; letter-spacing:.2px; box-shadow:0 4px 14px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03) inset; transition:transform .15s var(--ease-soft),border-color .25s var(--ease-soft),box-shadow .25s var(--ease); } .hd-login svg{width:14px;height:14px;color:#60a5fa;flex-shrink:0} .hd-login:hover{transform:translateY(-1px);border-color:rgba(96,165,250,.4);box-shadow:0 8px 22px rgba(96,165,250,.18),0 0 0 1px rgba(96,165,250,.15) inset} .hd-login:active{transform:translateY(0) scale(.97)} /* ── Header: user pod (signed-in) — green-on-black premium wallet look ───── Layout: [💰 Balance · Пополнить] [│] [👤 Username · Profile] (avatar) Bigger & richer than before — shows username on desktop, two-line balance with a "Баланс" mini-label, and a deeper green glow. */ .hd-userpod{ display:inline-flex;align-items:stretch;height:50px; background: linear-gradient(180deg,rgba(34,197,94,.04) 0%,transparent 30%), linear-gradient(180deg,#0f1410 0%,#050706 100%); border:1px solid rgba(34,197,94,.28);border-radius:14px; box-shadow: 0 6px 20px rgba(0,0,0,.55), 0 0 22px rgba(34,197,94,.07), 0 0 0 1px rgba(34,197,94,.06) inset, 0 1px 0 rgba(255,255,255,.05) inset; overflow:hidden; transition:border-color .25s var(--ease-soft),box-shadow .3s var(--ease),transform .15s var(--ease-soft); } .hd-userpod:hover{ border-color:rgba(34,197,94,.5); transform:translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.7), 0 0 32px rgba(34,197,94,.22), 0 0 0 1px rgba(34,197,94,.12) inset, 0 1px 0 rgba(255,255,255,.07) inset; } /* ── Balance side (bigger, two-line: label + amount) ── */ .hd-userpod-bal{ display:inline-flex;align-items:center;gap:11px; padding:0 16px 0 14px; font-family:inherit;color:#fff;cursor:pointer;background:transparent;border:none; letter-spacing:-.2px;font-variant-numeric:tabular-nums; transition:background .2s var(--ease-soft); position:relative;overflow:hidden; } .hd-userpod-bal:hover{background:rgba(34,197,94,.06)} .hd-userpod-bal:active{background:rgba(34,197,94,.1)} .hd-userpod-bal::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 25% 30%,rgba(34,197,94,.12),transparent 65%); pointer-events:none;opacity:.9; } .hd-userpod-bal-ic{ width:32px;height:32px;border-radius:9px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background: radial-gradient(circle at 30% 25%,rgba(34,197,94,.18),transparent 60%), linear-gradient(180deg,#0e1a10,#050805); border:1px solid rgba(34,197,94,.35); box-shadow: 0 0 10px rgba(34,197,94,.18), 0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px rgba(34,197,94,.06) inset; } .hd-userpod-bal-ic svg{width:15px;height:15px;color:#4ade80;stroke-width:2.4; filter:drop-shadow(0 0 5px rgba(34,197,94,.5))} .hd-userpod-bal-r{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1;position:relative} .hd-userpod-bal-lbl{ font-size:9px;font-weight:700;color:rgba(134,239,172,.65); text-transform:uppercase;letter-spacing:1.2px;line-height:1; } .hd-userpod-bal-amt{display:inline-flex;align-items:baseline;gap:2px;line-height:1;font-size:14.5px;font-weight:800} .hd-userpod-bal-cur{color:#4ade80;font-weight:700;font-size:12.5px;margin-left:2px;letter-spacing:0; text-shadow:0 0 8px rgba(34,197,94,.5)} .hd-userpod-bal-plus{ width:22px;height:22px;border-radius:6px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.28);color:#86efac; font-size:14px;font-weight:900;line-height:1;margin-left:4px; transition:background .2s var(--ease-soft),color .2s var(--ease-soft),border-color .2s var(--ease-soft),transform .15s var(--ease-soft); } .hd-userpod-bal:hover .hd-userpod-bal-plus{ background:rgba(34,197,94,.22);color:#fff;border-color:rgba(34,197,94,.55); box-shadow:0 0 10px rgba(34,197,94,.35);transform:rotate(90deg); } /* Vertical divider */ .hd-userpod-sep{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(34,197,94,.22),transparent)} /* ── Profile side (now wider, shows username next to avatar on desktop) ── */ .hd-userpod-ava{ display:inline-flex;align-items:center;gap:10px; padding:0 14px 0 12px;height:100%;flex-shrink:0; background:transparent;border:none;cursor:pointer;color:#fff; font-family:inherit;text-align:left; position:relative;transition:background .2s var(--ease-soft); } .hd-userpod-ava:hover{background:rgba(34,197,94,.06)} .hd-userpod-ava:active{background:rgba(34,197,94,.1)} .hd-userpod-ava-img{ width:34px;height:34px;border-radius:9px;overflow:hidden;flex-shrink:0; background:linear-gradient(135deg,#22c55e,#0f4d29); display:flex;align-items:center;justify-content:center; font-size:13.5px;font-weight:900;color:#fff;letter-spacing:-.2px; box-shadow: 0 0 0 1px rgba(34,197,94,.4), 0 2px 8px rgba(0,0,0,.5), 0 0 0 2px rgba(0,0,0,.6), 0 0 0 3px rgba(34,197,94,.18); text-shadow:0 1px 2px rgba(0,0,0,.4); position:relative; } .hd-userpod-ava-img img{width:100%;height:100%;object-fit:cover;display:block} .hd-userpod-ava-r{display:flex;flex-direction:column;gap:3px;line-height:1;min-width:0;max-width:140px} .hd-userpod-ava-name{ font-size:13px;font-weight:700;color:#fff;letter-spacing:-.1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1; } .hd-userpod-ava-status{ display:inline-flex;align-items:center;gap:5px; font-size:9.5px;font-weight:600;color:#86efac; text-transform:uppercase;letter-spacing:.8px;line-height:1; } .hd-userpod-ava-status::before{ content:"";width:6px;height:6px;border-radius:50%;background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.8); animation:hdOnlinePulse 2.4s ease-in-out infinite; } @keyframes hdOnlinePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 50% {box-shadow:0 0 0 4px rgba(34,197,94,0)} } @media(max-width:680px){ .hd-userpod{height:44px;border-radius:12px} .hd-userpod-bal{padding:0 12px 0 10px;gap:8px} .hd-userpod-bal-ic{width:28px;height:28px;border-radius:8px} .hd-userpod-bal-ic svg{width:13px;height:13px} .hd-userpod-bal-amt{font-size:13.5px} .hd-userpod-bal-cur{font-size:11.5px} .hd-userpod-bal-lbl{font-size:8.5px;letter-spacing:1px} .hd-userpod-bal-plus{display:none} .hd-userpod-ava{padding:0 10px} .hd-userpod-ava-img{width:30px;height:30px;border-radius:8px;font-size:12.5px} .hd-userpod-ava-r{display:none} .hd-test{display:none} } @media(max-width:430px){ .hd-userpod-bal-r{gap:1px} .hd-userpod-bal-lbl{display:none} } .wrap{max-width:1280px;width:100%;margin:0 auto;padding:calc(72px + 24px) clamp(14px,3vw,48px) 60px;flex:1} @media(max-width:760px){.wrap{padding-top:calc(64px + 16px);padding-bottom:40px}} /* ── Section header ── */ .section-h{display:flex;align-items:center;gap:10px;margin-bottom:14px} .section-h-line{flex:1;height:1px;background:linear-gradient(90deg,var(--brd),transparent)} .section-h-t{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px} /* ── Game tiles (compact icon grid — balanced size) ── */ .games-grid{ display:grid;grid-template-columns:repeat(auto-fill,76px); gap:9px;margin-bottom:20px;justify-content:start; } .game-card{ position:relative;width:76px;height:76px; background:linear-gradient(180deg,#141414 0%,#0d0d0d 100%); border:1px solid rgba(255,255,255,.06);border-radius:13px; display:flex;align-items:center;justify-content:center; cursor:pointer;overflow:hidden; box-shadow:0 1px 5px rgba(0,0,0,.3); transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft); animation:gameCardIn .4s var(--ease) both; contain:layout paint; } @keyframes gameCardIn{from{opacity:0}to{opacity:1}} .game-card:hover{ background:linear-gradient(180deg,#1a1a1a 0%,#121212 100%); border-color:rgba(255,255,255,.12); } .game-card:active{transition-duration:.08s} /* Selected game — neutral state, no colored glow/tint */ .game-card.on{ background:linear-gradient(180deg,#1f1f1f 0%,#141414 100%); border-color:rgba(255,255,255,.22); box-shadow:0 0 0 1px rgba(255,255,255,.14); } /* Game logo image (Steam transparent PNG) */ .game-card-logo{ max-width:56px;max-height:46px;width:auto;height:auto; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); opacity:0; transition:opacity .35s var(--ease-soft); pointer-events:none; } .game-card-logo.loaded{opacity:1} /* Wordmarks that ship as black-on-transparent (EFT, BF6, CS2…) — flip to white */ .game-card-logo.inv{ filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.5)); } .game-card-logo.inv.loaded{opacity:.95} /* Letter fallback for games without a logo */ .game-card-letter{ font-family:'Inter',sans-serif;font-size:28px;font-weight:900; color:rgba(255,255,255,.85);letter-spacing:-.9px;line-height:1; } .game-card.on .game-card-letter{color:#fff} /* Count badge intentionally hidden — keep DOM stable for legacy code */ .game-card-count,.game-card-count *{display:none!important} /* ── Special "All games" tile — natural black Steam icon ── */ .game-card-all{ background:linear-gradient(180deg,#1a1a1a 0%,#0d0d0d 100%); border-color:rgba(255,255,255,.1); } .game-card-all .game-card-logo,.game-card-all .game-card-letter{display:none} .game-card-all-icon{ width:44px;height:44px;display:block; /* Render the black SVG glyph as soft white on dark tile (natural Steam icon look) */ filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.5)); opacity:.92; } .game-card-all:hover .game-card-all-icon{opacity:1} .game-card-all.on{ background:linear-gradient(180deg,#1f1f1f 0%,#0d0d0d 100%); border-color:rgba(255,255,255,.22); box-shadow:0 0 0 1px rgba(255,255,255,.14); } .game-card-all.on .game-card-all-icon{opacity:1} /* Hide all legacy classes from previous iterations */ .game-card-mono,.game-card-text,.game-card-check, .game-card-thumb,.game-card-thumb-fb,.game-card-body, .game-card-chip,.game-card-cnt,.game-card-name,.game-card-sub, .game-card-photo,.game-card-photo-fb,.game-card-info,.game-card-badge, .game-card-shine{display:none!important} /* ── Filter bar ── */ .filter-bar{position:relative;z-index:40;margin-bottom:18px;padding:12px 14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:visible;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} /* Strict two rows — never let chips sit beside the filter/search stack. Row 1: filter + search + count Row 2: sort chips + «Без VAC» (one wrapping pool via display:contents) */ .fb-row{ display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch; gap:10px;position:sticky;top:calc(72px + 8px);z-index:42; background:rgba(8,8,10,.96);margin:0 -2px;padding:4px 2px;border-radius:12px; overflow:visible;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } .fb-top{ display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center; gap:8px;min-width:0;width:100%; } .fb-chips-row{ display:flex;flex-direction:row;flex-wrap:wrap;align-items:center; gap:6px;min-width:0;width:100%; } .fb-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.72);font-size:13px;font-weight:600;cursor:pointer;transition:color .18s,border-color .18s,background .18s;user-select:none;font-family:inherit;line-height:1;flex-shrink:0} .fb-toggle:hover{color:#fff;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)} .fb-toggle.open,.fb-toggle.has-filters{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.35);color:#93c5fd} .fb-toggle svg{width:14px;height:14px;flex-shrink:0} .fb-toggle-chev{width:11px!important;height:11px!important;margin-left:1px;transition:transform .3s var(--ease);opacity:.7} .fb-toggle.open .fb-toggle-chev{transform:rotate(180deg)} .fb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#60a5fa;color:#061018;font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1} .fb-badge[hidden]{display:none!important} /* Search — fills space between filter and count; never drops under filter on desktop */ .fb-search{ position:relative;display:flex;align-items:center;gap:10px; height:40px;padding:0 14px;flex:1 1 auto;min-width:160px;max-width:none; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:11px; transition:border-color .2s,background .2s,box-shadow .2s;z-index:43; } .fb-search:hover:not(:focus-within){border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.055)} .fb-search:focus-within{border-color:rgba(96,165,250,.5);background:rgba(96,165,250,.06);box-shadow:0 0 0 3px rgba(96,165,250,.12)} .fb-search-ic{width:15px;height:15px;color:rgba(255,255,255,.35);flex-shrink:0;transition:color .2s} .fb-search:focus-within .fb-search-ic{color:#60a5fa} .fb-search input{ flex:1;min-width:0;background:transparent;border:none;outline:none; color:var(--t);font-family:inherit;font-size:13px;font-weight:500; height:20px;line-height:20px;caret-color:#60a5fa;margin:0;padding:0; text-overflow:ellipsis; } .fb-search input::placeholder{color:rgba(255,255,255,.38);font-weight:500} .fb-search:focus-within input::placeholder{opacity:.55} .fb-search-clear{ background:transparent;border:none;color:rgba(255,255,255,.35);cursor:pointer; width:18px;height:18px;border-radius:5px;display:none; align-items:center;justify-content:center;flex-shrink:0; font-family:inherit;font-size:13px;line-height:1;padding:0; } .fb-search.has-text .fb-search-clear{display:flex} .fb-search-clear:hover{color:#fff;background:rgba(255,255,255,.08)} .fb-search-kbd{ font-size:10px;color:rgba(255,255,255,.3);font-weight:600;letter-spacing:.4px; padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);font-family:inherit; flex-shrink:0;line-height:1; } .fb-search.has-text .fb-search-kbd,.fb-search:focus-within .fb-search-kbd{display:none} /* display:contents → sort buttons + «Без VAC» share one wrap pool (avoids «Без VAC» orphaning under «Новые» when .fb-sorts was a flex item). */ .fb-sorts{display:contents} .fb-sort{ display:inline-flex;align-items:center;justify-content:center; height:32px;min-height:32px;padding:0 12px;box-sizing:border-box; border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09); color:rgba(255,255,255,.72);font-family:inherit;font-size:12px;font-weight:600; line-height:1;cursor:pointer;transition:color .15s,border-color .15s,background .15s; white-space:nowrap;vertical-align:middle; } .fb-sort:hover:not(.on){color:#fff;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07)} .fb-sort.on{background:#fff;border-color:#fff;color:#0b1220} .fb-sort:active:not(.on){transform:scale(.97)} .fb-count{margin-left:auto;font-size:12px;color:rgba(255,255,255,.4);font-weight:500;white-space:nowrap;flex-shrink:0;line-height:1} .fb-count b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums} @media(max-width:760px){ .fb-row{top:calc(64px + 8px);gap:8px} .fb-top{flex-wrap:wrap;gap:8px} .fb-count{margin-left:0;width:100%;order:3} .fb-sort{height:30px;min-height:30px;padding:0 10px;font-size:11.5px} .fb-search{flex:1 1 100%;max-width:none;width:100%;min-width:0} .mt-novac-btn{height:30px;min-height:30px} } .fb-extra{display:flex;flex-direction:column;gap:14px;margin-top:0;padding:0 16px;max-height:0;opacity:0;overflow:hidden;background:transparent;border-radius:14px;border:1px solid transparent;transition:max-height .35s var(--ease),opacity .25s,padding .35s,margin-top .35s,border-color .25s} .fb-extra.show{max-height:2400px;opacity:1;padding:16px;margin-top:10px;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.015);overflow:visible} .fb-sec-h{display:flex;align-items:center;gap:10px;margin:0;color:rgba(255,255,255,.38);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .fb-sec-h::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06)} .fb-game-sec{display:flex;flex-direction:column;gap:10px} .fb-game-sec[hidden]{display:none!important} /* Connected filter sheet (not separate islands) */ .fb-grid{ display:grid;grid-template-columns:1fr 1fr;gap:0; border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden; background:rgba(255,255,255,.02); } .fb-field{ display:flex;flex-direction:column;gap:10px;min-width:0; padding:16px 18px 18px;background:transparent;border:0;border-radius:0; border-right:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); transition:background .15s; } .fb-field:nth-child(2n){border-right:0} .fb-field.fb-span2{grid-column:1 / -1;border-right:0} .fb-field:hover{background:rgba(255,255,255,.02)} .fb-field:focus-within{background:rgba(96,165,250,.04)} .fb-field-l{font-size:12px;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:.01em;display:flex;align-items:center;gap:7px;text-transform:none} .fb-field-l svg{width:13px;height:13px;color:rgba(96,165,250,.75);stroke-width:2.1;opacity:.95;flex-shrink:0} .fb-field-l .pill-game{margin-left:4px;padding:2px 7px;border-radius:5px;background:rgba(96,165,250,.12);color:#93c5fd;font-size:10px;font-weight:700} .fb-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .fb-chip{ display:inline-flex;align-items:center;justify-content:center; height:30px;min-height:30px;padding:0 11px;box-sizing:border-box; border-radius:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09); color:rgba(255,255,255,.72);font-family:inherit;font-size:11.5px;font-weight:600; line-height:1;cursor:pointer;transition:color .15s,border-color .15s,background .15s;white-space:nowrap; } .fb-chip:hover{color:#fff;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07)} .fb-chip.on{background:rgba(96,165,250,.18);border-color:rgba(96,165,250,.45);color:#dbeafe} .fb-range{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .fb-range-input{flex:1;padding:8px 11px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:12px;outline:none;text-align:center;min-width:0;transition:border-color .15s,background .15s;-moz-appearance:textfield} .fb-range-input::-webkit-outer-spin-button,.fb-range-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .fb-range-input:hover{border-color:rgba(255,255,255,.14)} .fb-range-input:focus{border-color:rgba(96,165,250,.45);background:rgba(96,165,250,.06)} .fb-range-input::placeholder{color:rgba(255,255,255,.3);font-size:11px} .fb-range-sep{color:rgba(255,255,255,.3);font-size:11px;font-weight:600;flex-shrink:0} select.fb-range-input{text-align:left;cursor:pointer} .fb-mode{display:flex;gap:0;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:2px;width:fit-content} .fb-mode-btn{ display:inline-flex;align-items:center;justify-content:center; height:26px;padding:0 10px;border-radius:6px;background:transparent;border:none; color:rgba(255,255,255,.45);font-family:inherit;font-size:10px;font-weight:700; line-height:1;cursor:pointer;transition:color .15s,background .15s;letter-spacing:.03em; } .fb-mode-btn:hover:not(.on){color:rgba(255,255,255,.7)} .fb-mode-btn.on{background:rgba(255,255,255,.1);color:#fff} /* Mode panes: display toggle only — no absolute inset (was clipping chips) */ .fb-mode-content{position:relative} .fb-mode-content > div{display:none} .fb-mode-content > div.show{display:block} .fb-game-extra{padding:0;background:transparent;border:0;border-radius:0;display:flex;flex-direction:column;gap:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s var(--ease),opacity .25s} .fb-game-extra.show{max-height:900px;opacity:1} .fb-game-extra-h{display:none} .fb-game-extra-grid{ display:grid;grid-template-columns:1fr 1fr;gap:0; border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden; background:rgba(255,255,255,.02); } .fb-game-extra-grid .fb-field{ border-right:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); } .fb-game-extra-grid .fb-field:nth-child(2n){border-right:0} .fb-game-extra-grid .fb-field:last-child:nth-child(odd){grid-column:1 / -1;border-right:0} .fb-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding-top:4px} .fb-search-btn{padding:10px 22px;border-radius:10px;background:#fff;border:none;color:#0b1220;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .12s,background .15s;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap} .fb-search-btn:hover{background:#e8eef7;transform:translateY(-1px)} .fb-search-btn:active{transform:none} .fb-search-btn svg{display:none} .fb-clear-btn{padding:10px 16px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.45);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:color .15s,border-color .15s,background .15s;white-space:nowrap} .fb-clear-btn:hover{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)} @media(max-width:720px){ .fb-grid,.fb-game-extra-grid{grid-template-columns:1fr} .fb-field,.fb-game-extra-grid .fb-field{border-right:0} .fb-field.fb-span2{grid-column:auto} } /* ══ Стена фильтров (26.08.2026) ══════════════════════════════════════ Плотная сетка в три колонки как у Lolz, но в чёрной палитре сайта и на реальных полях NFA. Группировка держится пространством и тонкими линиями между колонками, а не рамкой у каждого поля. */ .fb-extra.fw.show{padding:0;background:transparent;border-color:transparent;max-height:1600px} .fw-cols{display:grid;grid-template-columns:repeat(3,1fr); border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden; background:rgba(255,255,255,.015)} .fw-col{padding:18px;display:flex;flex-direction:column;gap:16px;min-width:0} .fw-col + .fw-col{border-left:1px solid rgba(255,255,255,.06)} .fw-grp{display:flex;flex-direction:column;gap:12px} .fw-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.32)} .fw-h svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;opacity:.7} /* Капсулы Steam вместо абстрактных SVG у игровых групп: тот же кадр, что в полоске библиотеки на карточке, поэтому Dota / Rust / CS2 узнаются сразу, а не после прочтения подписи. */ .fw-h.fw-game{color:rgba(255,255,255,.58);letter-spacing:.1em} .fw-cap{ width:64px;height:24px;object-fit:cover;border-radius:5px;flex-shrink:0; background:#0e0e10; outline:1px solid oklch(1 0 0 / .1);outline-offset:-1px; } .fw-body{display:flex;flex-direction:column;gap:12px} .fw-field{display:flex;flex-direction:column;min-width:0} .fw-l{font-size:12px;font-weight:500;color:rgba(255,255,255,.5);margin-bottom:7px} .fw-in{width:100%;height:38px;padding:0 12px;border-radius:10px; background:#141416;border:1px solid rgba(255,255,255,.06);color:#fff; font-family:inherit;font-size:13px;font-weight:500;outline:none; transition:border-color .18s var(--ease),background .18s var(--ease)} .fw-in::placeholder{color:rgba(255,255,255,.3);font-weight:500} .fw-in::-webkit-outer-spin-button,.fw-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .fw-in[type=number]{-moz-appearance:textfield} .fw-in:hover{border-color:rgba(255,255,255,.11)} .fw-in:focus{border-color:rgba(96,165,250,.5);background:rgba(96,165,250,.05)} .fw-range{display:grid;grid-template-columns:1fr 1fr;gap:8px} .fw-two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .fw-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} .fw-suf{position:relative;display:block} .fw-suf .fw-in{padding-right:24px} .fw-suf::after{content:attr(data-suf);position:absolute;right:11px;top:50%; transform:translateY(-50%);font-size:12px;color:rgba(255,255,255,.3);pointer-events:none} .fw-sel{position:relative} .fw-sel select{width:100%;height:38px;padding:0 34px 0 12px;border-radius:10px; background:#141416;border:1px solid rgba(255,255,255,.06);color:#fff; font-family:inherit;font-size:13px;font-weight:500;outline:none;cursor:pointer; appearance:none;-webkit-appearance:none;transition:border-color .18s var(--ease)} .fw-sel select:hover{border-color:rgba(255,255,255,.11)} .fw-sel select:focus{border-color:rgba(96,165,250,.5)} .fw-sel select option{background:#111} .fw-sel::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px; border-right:1.6px solid rgba(255,255,255,.35);border-bottom:1.6px solid rgba(255,255,255,.35); transform:translateY(-70%) rotate(45deg);pointer-events:none} .fw-seg{display:flex;background:#141416;border:1px solid rgba(255,255,255,.06); border-radius:10px;padding:3px;gap:2px} .fw-seg button{flex:1;border:none;background:transparent;color:rgba(255,255,255,.55);cursor:pointer; font-family:inherit;font-size:12px;font-weight:600;padding:7px 8px;border-radius:7px; transition:background .15s,color .15s;white-space:nowrap} .fw-seg button:hover{color:#fff} .fw-seg button.on{background:#60a5fa;color:#061018} /* Пояснение под полем — для шкал, которые иначе приходится угадывать (звания идут числом 1..18, а не названием). */ .fw-hint{display:block;margin-top:6px;font-size:11px;line-height:1.35; color:rgba(255,255,255,.32)} .fw-div{height:1px;background:rgba(255,255,255,.06);border:none;margin:2px 0} .fw-foot{display:flex;align-items:center;gap:14px;padding:14px 4px 2px} .fw-foot .fw-sp{flex:1} .f-count-w{font-size:13px;color:rgba(255,255,255,.55);font-weight:500} .f-count-w b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums} .btn-w{height:40px;padding:0 20px;border-radius:11px;border:none;cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:700; transition:transform .15s,background .2s,color .2s} .btn-w.primary{background:#fff;color:#08080a} .btn-w.primary:hover{background:#60a5fa;color:#061018;transform:translateY(-1px)} .btn-w.primary:active{transform:scale(.97)} .btn-w.ghost{background:transparent;color:rgba(255,255,255,.5);font-weight:600} .btn-w.ghost:hover{color:#fff} @media(max-width:900px){ .fw-cols{grid-template-columns:1fr} .fw-col + .fw-col{border-left:0;border-top:1px solid rgba(255,255,255,.06)} .fb-extra.fw.show{max-height:3200px} } /* ── Accounts toolbar (title + count + refresh, above the grid) ── Two-line title: "Аккаунты" (big) + small subtitle with the count. */ .acc-toolbar{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 18px;margin-bottom:14px; background:linear-gradient(180deg,rgba(255,255,255,.022) 0%,rgba(255,255,255,.005) 100%); border:1px solid rgba(255,255,255,.05);border-radius:14px; transition:border-color .25s var(--ease-soft); } .acc-toolbar:hover{border-color:rgba(255,255,255,.08)} .acc-toolbar-l{display:flex;align-items:center;gap:13px;min-width:0;flex:1} .acc-toolbar-ic{ width:34px;height:34px;border-radius:10px;flex-shrink:0; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); display:flex;align-items:center;justify-content:center; box-shadow:0 1px 0 rgba(255,255,255,.04) inset; } .acc-toolbar-ic svg{width:16px;height:16px;color:var(--t2);stroke-width:2.2} .acc-toolbar-tt{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1} .acc-toolbar-t{ font-size:15px;font-weight:700;color:#fff;letter-spacing:-.3px; display:inline-flex;align-items:baseline;gap:8px; } .acc-toolbar-c{ font-size:12.5px;font-weight:700;color:#86efac;letter-spacing:0; font-variant-numeric:tabular-nums; display:inline-flex;align-items:center;gap:5px; padding:2px 8px;border-radius:6px; background:rgba(134,239,172,.08);border:1px solid rgba(134,239,172,.16); line-height:1.3; } .acc-toolbar-c::before{ content:"";width:5px;height:5px;border-radius:50%;background:#86efac; box-shadow:0 0 6px rgba(134,239,172,.5); display:inline-block; } .acc-toolbar-s{font-size:11px;font-weight:500;color:var(--t3);letter-spacing:.1px} .acc-toolbar-refresh{ display:inline-flex;align-items:center;gap:8px; padding:9px 15px;border-radius:10px; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06); color:var(--t2);font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.1px; cursor:pointer; transition:color .2s var(--ease-soft),background .2s var(--ease-soft),border-color .2s var(--ease-soft),transform .15s var(--ease-soft); } .acc-toolbar-refresh:hover{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);transform:translateY(-1px)} .acc-toolbar-refresh:active{transform:scale(.97)} .acc-toolbar-refresh svg{width:14px;height:14px;stroke-width:2.2;transition:transform .3s var(--ease)} .acc-toolbar-refresh.spin svg{animation:spin .8s linear infinite} @media(max-width:560px){ .acc-toolbar{padding:12px 14px;margin-bottom:12px;border-radius:12px;gap:10px} .acc-toolbar-ic{width:30px;height:30px;border-radius:9px} .acc-toolbar-ic svg{width:14px;height:14px} .acc-toolbar-t{font-size:14px;gap:7px} .acc-toolbar-c{font-size:11.5px;padding:2px 7px} .acc-toolbar-s{font-size:10.5px} .acc-toolbar-refresh span{display:none} .acc-toolbar-refresh{padding:8px 10px} } .acc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;position:relative;transition:opacity .2s var(--ease-soft)} .acc-card{ position:relative;background:linear-gradient(180deg,var(--card) 0%,#070707 100%); border:1px solid var(--brd);border-radius:18px;padding:22px; display:flex;flex-direction:column;cursor:pointer;overflow:hidden; transition:border-color .25s var(--ease-soft),background .25s var(--ease-soft),transform .15s var(--ease-soft); animation:cardIn .35s var(--ease) both; contain:layout paint; /* Skip rendering off-screen cards entirely; 480px placeholder keeps the scrollbar stable until the real card is laid out. */ content-visibility:auto;contain-intrinsic-size:auto 480px; } .acc-card:hover{border-color:rgba(255,255,255,.14);background:linear-gradient(180deg,#101010 0%,#080808 100%)} .acc-card:active{transform:scale(.995);transition-duration:.08s} @keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* Header — game badge + price */ .acc-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;position:relative;z-index:1} .acc-game-badge-top{display:inline-flex;align-items:baseline;gap:10px;padding:0;background:transparent;border:none;color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;text-transform:uppercase;line-height:1;transition:opacity .25s var(--ease-soft)} .acc-card:hover .acc-game-badge-top{opacity:.95} .acc-game-badge-top b{font-size:16px;line-height:1;font-weight:800;letter-spacing:.6px;color:#fff} .acc-game-meta{display:inline-flex;align-items:baseline;font-size:14px;font-weight:700;color:rgba(255,255,255,.62);line-height:1;letter-spacing:.2px;text-transform:none} .acc-game-meta .u{font-size:11px;color:rgba(255,255,255,.4);font-weight:600;margin-left:1px} .acc-game-bonus{display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:#22c55e;line-height:1;letter-spacing:.3px;text-transform:none} .acc-game-sep{color:rgba(255,255,255,.2);font-weight:400;font-size:13px;line-height:1;text-transform:none} .acc-price{font-size:26px;font-weight:900;letter-spacing:-.8px;color:#fff;white-space:nowrap;background:linear-gradient(180deg,#fff,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1} .acc-price small{font-size:14px;color:var(--t3);font-weight:700;margin-left:3px;-webkit-text-fill-color:var(--t3)} /* ── Discount layout: badge + struck-through original + green final ── Only rendered when API returns discount_pct > 0. The header column becomes a vertical stack (original on top in muted, price below in green-on-green gradient), with the percent badge floating in line. */ .acc-price-stack{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1;white-space:nowrap} .acc-price-old{font-size:13px;font-weight:700;color:var(--t3);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(239,68,68,.65);opacity:.78;letter-spacing:-.2px;display:inline-flex;align-items:center;gap:5px} .acc-price-old small{font-size:11px;color:var(--t3);font-weight:600;margin-left:1px} .acc-price-new{font-size:26px;font-weight:900;letter-spacing:-.8px;white-space:nowrap;background:linear-gradient(180deg,#86efac,#22c55e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;text-shadow:0 0 24px rgba(34,197,94,.18)} .acc-price-new small{font-size:14px;color:#22c55e;font-weight:700;margin-left:3px;-webkit-text-fill-color:#22c55e;opacity:.85} /* ── Скидка: процент рядом с зачёркнутой ценой ───────────────────────── Бейдж живёт ВНУТРИ .acc-price-old, поэтому display:inline-flex обязателен: атомарный inline-бокс не наследует line-through родителя — иначе сам бейдж оказался бы перечёркнутым. -webkit-text-fill-color задан явно, потому что соседние ценники красятся градиентом через background-clip. */ .acc-disc-badge{ display:inline-flex;align-items:center; padding:3px 6px;border-radius:6px; font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.02em; font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none; color:#4ade80;-webkit-text-fill-color:#4ade80; background:rgba(34,197,94,.12); box-shadow:inset 0 0 0 1px rgba(34,197,94,.28); } .acc-discount-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:900;letter-spacing:.4px;color:#fff;padding:3px 7px;border-radius:6px;background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 10px rgba(239,68,68,.32),inset 0 1px 0 rgba(255,255,255,.18);text-transform:uppercase;line-height:1;animation:dscPulse 2.4s ease-in-out infinite} /* Compositor-only pulse (transform+opacity): animating box-shadow forced a repaint of the badge every frame. The shadow is now static (set above). */ @keyframes dscPulse{0%,100%{transform:translateZ(0) scale(1);opacity:.88}50%{transform:translateZ(0) scale(1.06);opacity:1}} /* Buy button: show the struck price next to the new one so the savings stay visible even when the user is hovering the CTA. Keeps the single-button visual but adds context. */ .acc-buy-btn .acc-buy-old{margin-left:6px;font-size:12px;font-weight:700;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(0,0,0,.45);opacity:.55} /* Profile row */ .acc-profile{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:14px;background:linear-gradient(135deg,rgba(96,165,250,.06),rgba(255,255,255,.02));border:1px solid var(--brd);border-radius:12px;position:relative;z-index:1} .acc-avatar{width:42px;height:42px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid rgba(96,165,250,.3);box-shadow:0 4px 14px rgba(96,165,250,.2);position:relative;background:#0a0a0a} .acc-avatar img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s var(--ease-soft)} .acc-avatar img.loaded{opacity:1} .acc-avatar-game{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--g-c1,var(--ac)) 0%,var(--g-c2,var(--ac2)) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);text-shadow:0 1px 2px rgba(0,0,0,.5);font-family:'Inter',sans-serif;letter-spacing:0;line-height:1;position:relative;overflow:hidden} .acc-avatar-game::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22) 0%,transparent 60%)} .acc-prof-r{flex:1;min-width:0} .acc-persona{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-bottom:3px} .acc-title-summary{font-size:12.5px;font-weight:800;color:#dbeafe;letter-spacing:-.1px;text-transform:lowercase;line-height:1.25;margin:0 0 10px;padding:7px 11px;border-radius:10px;background:linear-gradient(135deg,rgba(96,165,250,.10),rgba(96,165,250,.02));border:1px solid rgba(96,165,250,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acc-title-summary .plus{color:var(--ac);font-weight:600;margin:0 3px;opacity:.85} .acc-title-summary .frag-inv{color:#fbbf24} .acc-prof-meta{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--t3);font-family:'JetBrains Mono','Courier New',monospace;letter-spacing:.4px;flex-wrap:wrap} .acc-lvl{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 5px;border-radius:5px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;font-size:10px;font-weight:800;font-family:'Inter',sans-serif;letter-spacing:.3px} .acc-la{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600;font-family:'Inter',sans-serif;letter-spacing:.2px;line-height:1} .acc-la.online{background:rgba(102,187,106,.15);color:#66bb6a;border:1px solid rgba(102,187,106,.3)} .acc-la.ingame{background:rgba(102,187,106,.2);color:#4caf50;border:1px solid rgba(76,175,80,.4)} .acc-la.offline{background:rgba(148,163,184,.1);color:var(--t3);border:1px solid rgba(148,163,184,.2)} .acc-la::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor} .acc-validated{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;background:rgba(34,197,94,.14);color:#22c55e;border:1px solid rgba(34,197,94,.35);line-height:1} .acc-validated svg{width:10px;height:10px;stroke-width:3} /* Stats grid */ .acc-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;position:relative;z-index:1} .acc-stat{padding:9px 11px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:10px;display:flex;align-items:center;gap:9px} .acc-stat svg{width:15px;height:15px;flex-shrink:0;color:var(--ac);stroke-width:2} .acc-stat-r{flex:1;min-width:0} .acc-stat-l{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;font-weight:600;line-height:1} .acc-stat-v{font-size:13px;font-weight:800;color:#fff;line-height:1;margin-top:3px} .acc-stat-v small{font-size:10px;color:var(--t3);font-weight:600;margin-left:2px} .acc-stat.is-mmr .acc-stat-v{font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* Медаль ранга вместо значка-звёздочки: своя ширина, потому что общее правило .acc-stat svg сжимает иконку до 12–15px, а на медали в этом размере уже не разобрать ни крыльев, ни ступени. */ .acc-mmr-medal{ width:22px;height:22px;flex:0 0 auto;object-fit:contain; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); } /* Sections (App-DLC / Premium / Other Games) */ .acc-section{margin-bottom:13px;position:relative;z-index:1} .acc-section:last-of-type{flex:1} .acc-section-title{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:9px} .acc-section-title svg{width:11px;height:11px} .acc-section-title.app{color:var(--ac)} .acc-section-title.prem{color:rgba(255,255,255,.85)} .acc-chips{display:flex;flex-wrap:wrap;gap:6px} .acc-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border-radius:8px;font-size:11px;font-weight:600;background:rgba(255,255,255,.05);border:1px solid var(--brd);color:var(--t2);white-space:nowrap;transition:transform .15s var(--ease-soft),background .2s var(--ease-soft),border-color .2s var(--ease-soft)} .acc-chip:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);transform:translateY(-1px)} .acc-chip.app{background:var(--ac-soft);border-color:rgba(96,165,250,.35);color:#bfdbfe;font-weight:700;padding:5px 10px} .acc-chip.app:hover{background:rgba(96,165,250,.18)} .acc-chip.dlc{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.3);color:#bfdbfe;font-weight:700;padding:5px 10px;letter-spacing:.2px} .acc-chip.dlc:hover{background:rgba(96,165,250,.18);border-color:rgba(96,165,250,.45)} .acc-chip.prem{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff;font-weight:600;padding:5px 10px;letter-spacing:.2px} .acc-chip.prem:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)} .acc-chip .gi{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--g-c1,var(--ac)) 0%,var(--g-c2,var(--ac2)) 100%);box-shadow:0 2px 6px var(--g-glow,var(--ac-glow)),inset 0 1px 0 rgba(255,255,255,.15);text-shadow:0 1px 2px rgba(0,0,0,.5);font-family:'Inter',sans-serif;letter-spacing:0;line-height:1;position:relative;overflow:hidden} .acc-chip .gi::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18) 0%,transparent 60%)} .acc-chip .hrs{color:var(--t3);font-weight:500} .acc-chip-empty{font-size:11px;color:var(--t3);font-style:italic;opacity:.6} /* Buy button — calm premium look (no white "AI glow") */ .acc-buy-btn{ width:100%;padding:13px 16px; background:#f5f7fa;border:none;border-radius:11px; color:#0b1220;font-family:inherit;font-size:12.5px;font-weight:700; letter-spacing:.2px;cursor:pointer; margin-top:auto;flex-shrink:0;white-space:nowrap;position:relative;z-index:1; box-shadow:inset 0 0 0 1px rgba(15,23,42,.04),0 1px 0 rgba(15,23,42,.04); transition: background .35s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1); } .acc-buy-btn:hover:not(:disabled){ background:#0f172a;color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.35); transform:translateY(-1px); } .acc-buy-btn:active:not(:disabled){transform:translateY(0) scale(.985);transition-duration:.1s} .acc-buy-btn:disabled{opacity:.45;cursor:not-allowed} /* Buy + LiveCheck row — Buy fills the remaining space, LiveCheck is a compact icon-only square so it doesn't dominate. Blue translucent palette matches /id/ hero CTA. */ .acc-buy-row{display:flex;gap:8px;margin-top:auto;flex-shrink:0;position:relative;z-index:1} .acc-buy-row .acc-buy-btn{margin-top:0;flex:1} .acc-livecheck-btn{ flex-shrink:0;width:44px;height:44px;padding:0; background:rgba(96,165,250,.10);border:1px solid rgba(96,165,250,.30); color:#dbeafe;border-radius:11px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .25s,border-color .25s,color .25s,transform .15s; } .acc-livecheck-btn:hover{background:rgba(96,165,250,.22);border-color:rgba(96,165,250,.55);color:#fff;transform:translateY(-1px)} .acc-livecheck-btn:active{transform:translateY(0) scale(.94)} .acc-livecheck-btn svg{width:18px;height:18px} .acc-livecheck-btn.checking{pointer-events:none;opacity:.85} .acc-livecheck-btn.checking svg{animation:lc-spin .9s linear infinite} @keyframes lc-spin{to{transform:rotate(360deg)}} .acc-livecheck-out{margin-top:8px;padding:7px 10px;border-radius:9px;font-size:11px;font-weight:700;line-height:1.3;display:flex;flex-direction:column;gap:2px;position:relative;z-index:1} .acc-livecheck-out.ok{background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.35);color:#4ade80} .acc-livecheck-out.bad{background:rgba(239,68,68,.13);border:1px solid rgba(239,68,68,.35);color:#f87171} .acc-livecheck-out.warn{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.32);color:#fde68a} .acc-livecheck-out .sub{font-size:10px;opacity:.82;font-weight:600} /* ── Empty / Loading ── */ .empty{text-align:center;padding:80px 20px;color:var(--t3);animation:fadeIn .35s var(--ease) both}.empty h3{font-size:18px;color:var(--t2);margin-bottom:8px;font-weight:700} @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .loading{text-align:center;padding:50px;color:var(--t3);font-size:13px} /* Skeleton loaders */ .skel-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;animation:fadeIn .25s var(--ease) both} .skel-row{height:380px;border-radius:20px;background:linear-gradient(110deg,var(--card) 0%,#161616 50%,var(--card) 100%);animation:shimmer 1.4s ease-in-out infinite;border:1px solid var(--brd)} /* Opacity pulse instead of background-position sweep: compositor-only, no repaint of the whole skeleton row each frame. */ @keyframes shimmer{0%,100%{opacity:1}50%{opacity:.6}} /* List fade transitions */ .acc-list.loading-state{opacity:.4;pointer-events:none} .acc-list.loading-state::after{content:"";position:absolute;left:50%;top:80px;width:32px;height:32px;border:2px solid var(--brd);border-top-color:var(--ac);border-radius:50%;margin-left:-16px;animation:spinner .7s linear infinite;z-index:5} @keyframes spinner{to{transform:rotate(360deg)}} /* ── Pagination ── */ .pager{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:24px;animation:fadeIn .3s var(--ease) both;flex-wrap:wrap} .pager button{min-width:34px;height:34px;padding:0 10px;border-radius:8px;background:transparent;border:none;color:var(--t2);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s var(--ease-soft),background .15s var(--ease-soft);display:inline-flex;align-items:center;justify-content:center} .pager button:hover:not(.on):not(:disabled){color:#fff;background:rgba(255,255,255,.05)} .pager button.on{background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(34,197,94,.3)} .pager button:disabled{opacity:.25;cursor:not-allowed} .pager .last{color:var(--t3);font-weight:600} .pager .nav{font-size:18px;color:var(--t2);font-weight:400} .pager .ellip{color:var(--t3);font-size:13px;cursor:default;padding:0 4px} .pager .refresh{color:var(--t2);width:34px;height:34px;border-radius:8px;background:transparent;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .2s var(--ease-soft),background .2s var(--ease-soft);margin-left:6px} .pager .refresh:hover{color:#fff;background:rgba(255,255,255,.05)} .pager .refresh.spin svg{animation:spin .8s linear infinite} .pager .refresh svg{width:14px;height:14px} /* ── Modal — performant, smooth ── */ .bm{ /* z-index 500 (was 200): the userpod dropdown also sits at 200, so an opened modal could end up UNDER it. Toasts/overlays (site-ui, ~2.1e9) still stay above. */ position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden; transition:opacity .22s var(--ease-soft),visibility 0s linear .22s; padding:20px;contain:layout paint; } .bm.on{opacity:1;visibility:visible;transition:opacity .22s var(--ease-soft),visibility 0s} .bm-ov{position:absolute;inset:0;background:rgba(6,8,14,.84)} .bm-box{ position:relative;width:560px;max-width:100%; background: radial-gradient(1200px 200px at 50% -100px,rgba(255,255,255,.04),transparent 60%), linear-gradient(180deg,#0e0e0e,#070707); border:1px solid rgba(255,255,255,.08);border-radius:20px;z-index:1; max-height:92vh;overflow:hidden;display:flex;flex-direction:column; box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset, 0 1px 0 rgba(255,255,255,.06) inset; transform:translate3d(0,14px,0) scale(.985);opacity:0; transition:transform .32s var(--ease),opacity .22s var(--ease-soft); contain:layout paint style; } .bm.on .bm-box{transform:translate3d(0,0,0) scale(1);opacity:1;will-change:transform,opacity} .bm-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 22px 16px;border-bottom:1px solid var(--brd)} .bm-head-l{display:flex;align-items:center;gap:13px;min-width:0;flex:1} .bm-head-ic{ width:46px;height:46px;border-radius:11px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,#1c1c1c 0%,#0a0a0a 100%); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.9);font-weight:900;font-size:19px;letter-spacing:-.5px; box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset; position:relative;overflow:hidden; } .bm-head-ic img{max-width:34px;max-height:28px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));pointer-events:none} .bm-head-ic img.inv{filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.5));opacity:.95} .bm-head-ic svg{width:20px;height:20px;color:#fff;stroke-width:2.5;position:relative} .bm-head-tt{min-width:0;flex:1} .bm-head-t{font-size:16px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bm-head-s{font-size:10.5px;color:var(--t3);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:1.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px} .bm-head-s b{color:var(--t2);font-weight:700;font-family:'JetBrains Mono','Courier New',monospace;letter-spacing:.5px;font-size:10px} .bm-head-s .dot{width:3px;height:3px;border-radius:50%;background:var(--t3);flex-shrink:0} .bm-x{ background:transparent;border:1px solid var(--brd);color:var(--t2); width:32px;height:32px;border-radius:9px;cursor:pointer;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1; transition:color .2s var(--ease-soft),background .2s var(--ease-soft),border-color .2s var(--ease-soft); } .bm-x:hover{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .bm-x:active{transform:scale(.92);transition-duration:.1s} .bm-body{padding:20px 22px;overflow-y:auto;flex:1;contain:content} .bm-body::-webkit-scrollbar{width:5px} .bm-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:3px} .bm-foot{padding:14px 22px 18px;border-top:1px solid var(--brd);display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.25))} /* Buttons inside modal */ .bm-btn{ width:100%;padding:13px 16px;border:none;border-radius:11px; font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.2px; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px; /* Часть кнопок в окнах — ссылки (открыть бота, перейти к Discord), а общего сброса для на сайте нет: каждый блок гасит подчёркивание сам. Здесь его забыли, и главная кнопка входа стояла подчёркнутой. */ text-decoration:none; transition:background .3s var(--ease-soft),color .25s var(--ease-soft),box-shadow .35s var(--ease-soft),transform .2s var(--ease-soft),border-color .25s var(--ease-soft); position:relative;overflow:hidden; } .bm-btn.buy{ background:#f5f7fa;color:#0b1220; box-shadow:inset 0 0 0 1px rgba(15,23,42,.04),0 1px 0 rgba(15,23,42,.04); } .bm-btn.buy:hover:not(:disabled){ background:#0f172a;color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.35); transform:translateY(-1px); } .bm-btn.buy:active:not(:disabled){transform:translateY(0) scale(.985);transition-duration:.1s} .bm-btn.buy:disabled{opacity:.45;cursor:not-allowed} .bm-btn.ghost{background:transparent;border:1px solid var(--brd);color:var(--t2)} .bm-btn.ghost:hover{color:#fff;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03)} .bm-btn.ghost:active{transform:scale(.985);transition-duration:.1s} /* ── Окно входа ────────────────────────────────────────────────────── Разбор тот же, что у окна пополнения: крупный заголовок, подпись обычным регистром, круглый крестик. До этого окно входа осталось на прежнем оформлении — капсовая подпись вразрядку и угловатый крестик, — и два всплывающих окна на одной странице выглядели из разных эпох. */ .bm-tg{border-radius:22px;box-shadow:0 40px 100px rgba(0,0,0,.72)} .bm-tg .bm-head{padding:22px 26px 18px;border-bottom:1px solid rgba(255,255,255,.05)} .bm-tg .bm-head-ic{width:42px;height:42px;border-radius:13px} .bm-tg .bm-head-t{font-size:18px;font-weight:700;letter-spacing:-.03em} .bm-tg .bm-head-s{ text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500; color:rgba(255,255,255,.38);margin-top:5px; } .bm-tg .bm-x{ width:36px;height:36px;border-radius:999px; border:1px solid rgba(255,255,255,.08);background:transparent; color:rgba(255,255,255,.45); } .bm-tg .bm-x:hover{color:#fff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)} .bm-tg .bm-body{padding:22px 26px 4px} .bm-tg .bm-foot{padding:16px 26px 22px;border-top:none;gap:10px;background:transparent} /* Три кнопки внизу — три разных веса. Раньше «Войти через Discord» и «Отмена» были одинаковыми серыми рамками, хотя одна ведёт ко входу, а вторая закрывает окно. */ .bm-tg .bm-btn{border-radius:13px;padding:15px 18px;font-size:13.5px} .bm-tg .bm-btn.buy{background:#fff;color:#0a0a0a;box-shadow:none} .bm-tg .bm-btn.buy:hover:not(:disabled){ background:#fff;color:#0a0a0a;transform:translateY(-1px); box-shadow:0 14px 30px -16px rgba(255,255,255,.42); } /* Разбавленный фирменный цвет Discord: кнопку узнают мгновенно, но пятно остаётся тише белой кнопки Telegram — основной способ входа по-прежнему он. */ .bm-tg .bm-btn.ds{ background:rgba(88,101,242,.10); border:1px solid rgba(88,101,242,.32); color:#c3c9f7; } .bm-tg .bm-btn.ds:hover{ background:rgba(88,101,242,.18); border-color:rgba(88,101,242,.52); color:#fff;transform:translateY(-1px); } .bm-tg .bm-btn.ds:active{transform:translateY(0) scale(.985);transition-duration:.1s} /* Значок внутри кнопки окна входа. Без явного размера svg в флекс- кнопке растягивается на всю её высоту: «Открыть Discord» показывала бы огромный герб вместо иконки рядом с подписью. */ .bm-tg .bm-btn svg{width:17px;height:17px;flex:0 0 auto;display:block} .bm-tg .bm-btn.ghost{ border:none;background:transparent; color:rgba(255,255,255,.35);font-weight:600;font-size:13px;padding:8px; } .bm-tg .bm-btn.ghost:hover{color:rgba(255,255,255,.78);background:transparent} /* Тело окна */ .bm-tg-lead{margin:0;font-size:13.5px;line-height:1.55;color:var(--t2)} .bm-tg-lead b{color:#fff;font-weight:700} /* Оговорка мелким шрифтом — срок жизни ссылки. Тише основного текста: это не указание к действию, а предупреждение на всякий случай. */ .bm-tg-fine{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--t3)} .bm-tg-live{ display:flex;gap:13px;align-items:center;margin-top:16px; padding:14px 16px;border-radius:13px; background:var(--el);border:1px solid var(--brd); } .bm-tg-live-t{font-size:13px;font-weight:700;color:var(--t)} .bm-tg-live-s{font-size:12px;color:var(--t2);margin-top:3px;line-height:1.45} .bm-tg-alt{margin-top:16px;border-top:1px solid var(--brd);padding-top:14px} .bm-tg-alt>summary{ cursor:pointer;font-size:12.5px;font-weight:600; color:var(--t3);list-style:none;transition:color .18s ease; } .bm-tg-alt>summary:hover{color:var(--t2)} .bm-tg-alt>summary::-webkit-details-marker{display:none} .bm-tg-alt>summary:focus-visible{outline:2px solid rgba(96,165,250,.75);outline-offset:3px;border-radius:6px} .bm-tg-code{display:flex;gap:8px;align-items:center;margin-top:10px} .bm-tg-code code{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:var(--t); background:var(--el);border:1px solid var(--brd);border-radius:10px;padding:10px 12px; } .bm-tg-cp{ flex-shrink:0;height:38px;padding:0 14px;border-radius:10px; border:1px solid var(--brd);background:transparent;color:var(--t2); font-family:inherit;font-size:12px;font-weight:700;cursor:pointer; transition:color .18s ease,border-color .18s ease; } .bm-tg-cp:hover{color:#fff;border-color:rgba(255,255,255,.18)} .bm-tg-or{ display:flex;align-items:center;gap:12px;width:100%;margin:2px 0; font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:1px; } .bm-tg-or::before,.bm-tg-or::after{content:"";flex:1;height:1px;background:var(--brd)} /* ── Способы входа ─────────────────────────────────────────────────── Крупные кнопки провайдеров стоят первыми — приём с 21st.dev, где карточка входа начинается с выбора способа, а не с описания механики. Обе одного размера: разный размер читался бы как «второй способ хуже», хотя Discord вполне рабочий вход. Разница только в весе цвета. */ .bm-prov{display:flex;flex-direction:column;gap:10px} .bm-prov-btn{ position:relative;display:flex;align-items:center;gap:13px; width:100%;min-height:54px;padding:0 18px; border:1px solid transparent;border-radius:14px; font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.01em; text-decoration:none;cursor:pointer; transition:transform .16s var(--ease-soft),background .22s var(--ease-soft), border-color .22s var(--ease-soft),box-shadow .25s var(--ease-soft), color .2s var(--ease-soft); } .bm-prov-btn:active{transform:translateY(0) scale(.988);transition-duration:.1s} .bm-prov-btn:focus-visible{outline:2px solid rgba(96,165,250,.75);outline-offset:3px} .bm-prov-ic{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center} .bm-prov-ic svg{width:20px;height:20px;display:block} .bm-prov-t{flex:1;text-align:left;min-width:0} /* Стрелка — единственное движение на кнопке, поэтому читается как жест, а не как общее «тут что-то шевелится». */ .bm-prov-go{ width:16px;height:16px;flex:0 0 auto;opacity:.45; transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s ease; } .bm-prov-btn:hover .bm-prov-go{transform:translateX(3px);opacity:.9} .bm-prov-btn.tg{background:#fff;color:#0a0a0a} .bm-prov-btn.tg:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -16px rgba(255,255,255,.42); } /* Разбавленный фирменный цвет Discord: кнопку узнают мгновенно, но пятно остаётся тише белой — основной способ по-прежнему Telegram. */ .bm-prov-btn.ds{ background:rgba(88,101,242,.10); border-color:rgba(88,101,242,.32); color:#c3c9f7; } .bm-prov-btn.ds:hover{ background:rgba(88,101,242,.18); border-color:rgba(88,101,242,.52); color:#fff;transform:translateY(-1px); } /* Пометка у способа, которым входили в прошлый раз. */ .bm-prov-last{ flex:0 0 auto;padding:4px 8px;border-radius:7px; font-size:10.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap; background:rgba(255,255,255,.10);color:rgba(255,255,255,.60); } .bm-prov-btn.tg .bm-prov-last{background:rgba(10,10,10,.08);color:rgba(10,10,10,.52)} @media (prefers-reduced-motion:reduce){ .bm-prov-btn:hover{transform:none} .bm-prov-btn:hover .bm-prov-go{transform:none} } @media(max-width:560px){ .bm-prov-btn{min-height:50px;padding:0 15px;font-size:13.5px;gap:11px} .bm-prov-last{display:none} } /* Кто вошёл — для того, кто уже авторизован через Discord и открыл окно ради привязки Telegram. */ .bm-tg-who{ display:flex;gap:12px;align-items:flex-start; padding:13px 15px;border-radius:13px;margin-bottom:16px; background:var(--el);border:1px solid var(--brd); } .bm-tg-who-av{width:34px;height:34px;border-radius:50%;flex:0 0 auto} .bm-tg-who-t{font-size:13px;font-weight:700;color:var(--t);margin-bottom:3px} .bm-tg-who-s{font-size:12px;color:var(--t2);line-height:1.5} /* Spinner / state */ .bm-spinner{width:38px;height:38px;border:2.5px solid rgba(255,255,255,.06);border-top-color:var(--ac);border-radius:50%;margin:0 auto 14px;animation:spin .75s linear infinite} .bm-dot-loader{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px} .bm-dot-loader::before,.bm-dot-loader::after,.bm-dot-loader{} .bm-dot-loader::before{content:'\2022\2022\2022';letter-spacing:2px;color:#86efac;animation:dotPulse 1.4s ease-in-out infinite} @keyframes dotPulse{0%,100%{opacity:.3}50%{opacity:1}} @keyframes spin{to{transform:rotate(360deg)}} .bm-state{padding:26px 22px;text-align:center;animation:bmStateIn .25s var(--ease-soft) both} .bm-state-t{font-size:16px;font-weight:800;margin-bottom:6px} .bm-state-d{font-size:12.5px;color:var(--t2);line-height:1.55} /* Круглый знак над подписью состояния — тот же, что в общем окне входа на остальных страницах. */ .bm-state-ic{width:56px;height:56px;border-radius:50%;margin:0 auto 15px;display:flex;align-items:center;justify-content:center} .bm-state-ic svg{width:26px;height:26px} .bm-state-ic.err{background:rgba(239,68,68,.14);color:#f87171} .bm-state-ic.ok{background:rgba(34,197,94,.14);color:#4ade80} @keyframes bmStateIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* Body content */ .bm-profile{ display:flex;align-items:center;gap:14px; padding:14px 16px;margin-bottom:16px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08);border-radius:13px; } .bm-avatar{ width:54px;height:54px;border-radius:12px;flex-shrink:0;overflow:hidden; background:linear-gradient(180deg,#1c1c1c,#0a0a0a); border:1px solid rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center; font-size:20px;font-weight:900;color:rgba(255,255,255,.9); box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset; letter-spacing:-.6px;position:relative; } .bm-avatar img{width:100%;height:100%;object-fit:cover} .bm-prof-r{flex:1;min-width:0} .bm-persona{font-size:15px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bm-prof-meta{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11px;color:var(--t3);font-weight:500} .bm-prof-meta .lvl{ padding:2px 7px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.4px; background:rgba(96,165,250,.12);color:#bfdbfe;border:1px solid rgba(96,165,250,.28); } .bm-prof-meta .sep{color:var(--t3);opacity:.5} /* Stat tiles (Сводка) */ .bm-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px} .bm-di{ padding:14px 10px;text-align:center;min-width:0; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.005)); border:1px solid rgba(255,255,255,.07);border-radius:12px; transition:border-color .2s var(--ease-soft); } .bm-di:hover{border-color:rgba(255,255,255,.14)} .bm-di .l{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin-bottom:7px;line-height:1} .bm-di .v{font-size:18px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bm-di .v small{font-size:11px;color:var(--t3);font-weight:600;margin-left:2px} .bm-section-h{font-size:9.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.4px;margin:0 0 10px;display:flex;align-items:center;gap:10px} .bm-section-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--brd),transparent)} /* ── Modal: rich game cards (one per game on the account) ── */ .bm-games{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} .bm-game-card{ display:flex;align-items:center;gap:14px; padding:14px 14px 14px 16px;border-radius:13px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); border:1px solid rgba(255,255,255,.07); transition:background .2s var(--ease-soft),border-color .2s var(--ease-soft); position:relative;overflow:hidden; } .bm-game-card:hover{ background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); border-color:rgba(255,255,255,.12); } .bm-game-card.pri{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border-color:rgba(255,255,255,.16); } .bm-game-card.pri::before{ content:"";position:absolute;top:0;bottom:0;left:0;width:3px; background:linear-gradient(180deg,#fff,rgba(255,255,255,.3)); border-radius:3px 0 0 3px; } .bm-game-card-ic{ width:54px;height:54px;border-radius:11px;flex-shrink:0; display:flex;align-items:center;justify-content:center;overflow:hidden; background:linear-gradient(180deg,#181818 0%,#080808 100%); border:1px solid rgba(255,255,255,.07); box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.02) inset; } .bm-game-card-ic img{max-width:42px;max-height:34px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));pointer-events:none} .bm-game-card-ic img.inv{filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.5));opacity:.95} .bm-game-card-ic .l{font-size:22px;font-weight:900;color:rgba(255,255,255,.9);letter-spacing:-.7px;line-height:1} .bm-game-card-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;justify-content:center} .bm-game-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1} .bm-game-card-name{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.1px} .bm-game-card-pri{font-size:9px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:1.2px;padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)} .bm-game-card-hrs{font-size:14px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;margin-left:auto;letter-spacing:-.3px} .bm-game-card-hrs small{color:var(--t3);font-weight:600;margin-left:2px;font-size:11px} .bm-game-card-tags{display:flex;flex-wrap:wrap;gap:5px} .bm-tag{ display:inline-flex;align-items:center;gap:4px; padding:4px 9px;border-radius:6px; font-size:10.5px;font-weight:700;letter-spacing:.2px;line-height:1; background:rgba(255,255,255,.05);border:1px solid var(--brd);color:var(--t2); } .bm-tag b{font-weight:800;color:#fff} .bm-tag.dlc {background:rgba(96,165,250,.1); border-color:rgba(96,165,250,.32);color:#bfdbfe} .bm-tag.inv {background:rgba(34,197,94,.09); border-color:rgba(34,197,94,.3); color:#86efac} .bm-tag.prime{background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.32);color:#fde68a} .bm-tag.elo {background:rgba(168,85,247,.1); border-color:rgba(168,85,247,.32);color:#d8b4fe} .bm-tag.rank {background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#e5e7eb} /* Обёртка без собственного вида: внутри уже готовая плашка CS Rating, и вторая рамка вокруг неё только спорила бы с первой. */ .bm-tag.bm-tag-plain{background:none;border:0;padding:0} /* ── Плашка CS Rating ───────────────────────────────────────────────── Знак из CS2 как он есть: три косые черты, следом скошенная плашка своего цвета с рейтингом. Наклон здесь несущий — именно он делает элемент игровым знаком, а не ещё одним интерфейсным прямоугольником внутри плитки. Скошен весь блок целиком, поэтому и цифры наклонены вместе с ним: курсив шрифту не нужен. Цвета приходят переменными --v (черты), --t (цифры), --b (заливка). */ .cs-rating{ display:inline-flex;align-items:stretch;gap:3px; height:19px; transform:skewX(-12deg); vertical-align:middle; } /* Черты — повторяющийся градиент вертикальными полосами: наклон им даёт общий skew, и три полосы обходятся одним узлом вместо трёх. Ширина кратна шагу (3 × 4px), иначе третья полоса срезается краем и остаются две. Высоту не задаём — stretch держит их вровень с плашкой. */ .cs-rating-bars{ width:12.2px;flex:0 0 auto; background:repeating-linear-gradient( 90deg, var(--v) 0 2.6px, transparent 2.6px 4.8px); } .cs-rating b{ display:flex;align-items:center;padding:0 8px 0 7px; background:var(--b);color:var(--t); font-size:12.5px;font-weight:800;font-style:normal;letter-spacing:.01em; font-variant-numeric:tabular-nums;line-height:1; } .bm-tag.mmr {background:rgba(220,38,38,.1); border-color:rgba(220,38,38,.32); color:#fca5a5} .bm-tag.empty{opacity:.5;font-weight:600} .bm-valid{ display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px; background:rgba(34,197,94,.1);color:var(--ok);border:1px solid rgba(34,197,94,.28); font-size:11px;font-weight:700;margin-bottom:12px;letter-spacing:.2px; } .bm-valid svg{width:12px;height:12px;stroke-width:3} /* ── Profile modal styles ── */ .bm-prof-hero{ display:flex;align-items:center;gap:14px; padding:18px;margin-bottom:14px; background:radial-gradient(140% 200% at 0% 0%,rgba(96,165,250,.08),transparent 55%), linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008)); border:1px solid rgba(255,255,255,.08);border-radius:14px; } .bm-prof-hero-ava{ width:64px;height:64px;border-radius:14px;flex-shrink:0;overflow:hidden; background:linear-gradient(135deg,#3b82f6,#1e3a8a); display:flex;align-items:center;justify-content:center; font-size:24px;font-weight:900;color:#fff;letter-spacing:-.5px; box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1); } .bm-prof-hero-ava img{width:100%;height:100%;object-fit:cover} .bm-prof-hero-info{flex:1;min-width:0} .bm-prof-hero-name{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bm-prof-hero-id{font-size:11px;color:var(--t3);font-weight:600;margin-top:5px;font-family:'JetBrains Mono','Courier New',monospace;letter-spacing:.3px} .bm-prof-balance{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 16px;margin-bottom:14px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008)); border:1px solid rgba(255,255,255,.1);border-radius:13px; } .bm-prof-balance-l{display:flex;align-items:center;gap:11px} .bm-prof-balance-ic{ width:38px;height:38px;border-radius:10px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,#181818,#0a0a0a);border:1px solid rgba(255,255,255,.08); } .bm-prof-balance-ic svg{width:17px;height:17px;color:rgba(255,255,255,.85);stroke-width:2} .bm-prof-balance-r{display:flex;flex-direction:column;gap:3px;min-width:0} .bm-prof-balance-lbl{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:1.4px;font-weight:700} .bm-prof-balance-val{font-size:22px;font-weight:800;letter-spacing:-.7px;color:#fff;line-height:1;font-variant-numeric:tabular-nums} .bm-prof-balance-val small{font-size:14px;color:var(--t3);font-weight:600;margin-left:3px} .bm-prof-balance-btn{ padding:10px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.14);cursor:pointer; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));color:#fff; font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.3px; transition:transform .15s var(--ease-soft),background .25s var(--ease),border-color .25s var(--ease-soft); white-space:nowrap; } .bm-prof-balance-btn:hover{transform:translateY(-1px);background:#fff;color:#0b1220;border-color:#fff} .bm-prof-balance-btn:active{transform:translateY(0) scale(.97)} /* ── Deposit modal — airy wide card ── */ .bm-box.bm-dep{ width:min(820px,94vw); max-height:min(640px,92vh); background:#0a0a0a; border:1px solid rgba(255,255,255,.08); border-radius:22px; box-shadow:0 40px 100px rgba(0,0,0,.72); } .bm-dep .bm-head{ padding:22px 28px 18px; border-bottom:1px solid rgba(255,255,255,.05); align-items:center; } .bm-dep .bm-head-l{align-items:center;gap:12px} .bm-dep-brand{ width:7px;height:7px;border-radius:50%;flex-shrink:0;margin:0; background:#60a5fa;box-shadow:0 0 10px rgba(96,165,250,.5); } .bm-dep .bm-head-t{font-size:18px;font-weight:700;letter-spacing:-.03em;line-height:1.2} .bm-dep .bm-head-s{ text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500; color:rgba(255,255,255,.38);margin-top:4px;gap:8px; } .bm-dep .bm-head-s b{font-family:inherit;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:0} .bm-dep .bm-head-s .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25)} .bm-dep .bm-x{ border-radius:999px;width:36px;height:36px; border:1px solid rgba(255,255,255,.08);background:transparent; color:rgba(255,255,255,.45); } .bm-dep .bm-x:hover{color:#fff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)} .bm-dep .bm-body{padding:24px 28px 8px;overflow-y:auto} .bm-dep .bm-foot{ padding:16px 28px 24px;border-top:none; gap:12px;background:transparent; flex-direction:column;align-items:stretch; } .bm-dep .bm-btn.buy{ width:100%!important; border-radius:14px;padding:15px 20px;font-size:14.5px;font-weight:700; background:#fff;color:#0a0a0a; box-shadow:none; } .bm-dep .bm-btn.buy:hover:not(:disabled){ background:#60a5fa;color:#061018;transform:translateY(-1px); box-shadow:0 12px 28px -14px rgba(96,165,250,.45); } .bm-dep .bm-btn.ghost{ width:100%!important;border:none;background:transparent; color:rgba(255,255,255,.35);font-weight:600;padding:6px;font-size:13px; } .bm-dep .bm-btn.ghost:hover{color:rgba(255,255,255,.75);background:transparent} .bm-dep-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 36px; align-items:start; } .bm-dep-col{min-width:0;display:flex;flex-direction:column;gap:0} .bm-dep-col-label{ font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.34);margin-bottom:12px;padding:0; } .bm-dep-col-label .bm-dep-amt-hint{display:none} .bm-dep-amt-wrap{margin:0;display:flex;flex-direction:column;gap:14px} .bm-dep-amt-label{display:none} .bm-dep-amt-field{ display:flex;align-items:center;justify-content:center;gap:10px; width:100%; min-height:112px; padding:22px 24px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); border-radius:16px; transition:border-color .2s var(--ease-soft),background .2s var(--ease-soft),box-shadow .2s var(--ease-soft); } .bm-dep-amt-field:hover{border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.035)} .bm-dep-amt-field:focus-within{ border-color:rgba(96,165,250,.5); background:rgba(96,165,250,.05); box-shadow:0 0 0 4px rgba(96,165,250,.1); } .bm-dep-amt-input{ flex:1 1 auto;width:100%;min-width:0;max-width:none; font-family:'Inter',system-ui,sans-serif; font-size:clamp(36px,4.5vw,48px);font-weight:700;color:#fff;letter-spacing:-.045em; background:transparent;border:none;padding:0; outline:none;text-align:center;font-variant-numeric:tabular-nums; -moz-appearance:textfield;line-height:1.05; caret-color:#60a5fa; } .bm-dep-amt-input::-webkit-outer-spin-button,.bm-dep-amt-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .bm-dep-amt-input::placeholder{color:rgba(255,255,255,.14);font-weight:600} .bm-dep-amt-cur{ flex-shrink:0; font-size:20px;font-weight:650;color:#60a5fa;letter-spacing:-.02em; line-height:1;min-width:1.1em; } .bm-dep-presets{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; } .bm-dep-preset{ display:inline-flex;align-items:center;justify-content:center; padding:12px 8px;border-radius:11px; background:transparent;border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.62); font-family:inherit;font-size:13px;font-weight:650;cursor:pointer; line-height:1;transition:color .18s,background .18s,border-color .18s; font-variant-numeric:tabular-nums; } .bm-dep-preset:hover{color:#fff;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)} .bm-dep-preset.on{ background:#fff;color:#0a0a0a;border-color:#fff; box-shadow:none; } .bm-dep-methods{ display:flex;flex-direction:column;gap:8px; margin:0; } .bm-dep-method{ display:flex;align-items:center;gap:14px; padding:13px 14px;border-radius:14px;cursor:pointer; background:transparent; border:1px solid rgba(255,255,255,.07); transition:background .18s,border-color .18s; position:relative; } .bm-dep-method:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)} .bm-dep-method.on{ background:rgba(96,165,250,.07); border-color:rgba(96,165,250,.42); box-shadow:none; } .bm-dep-method.on::before{display:none} .bm-dep-method-ic{ width:36px;height:36px;border-radius:10px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06); overflow:hidden; } .bm-dep-method:hover .bm-dep-method-ic{transform:none} .bm-dep-method-ic img{ width:100%;height:100%;object-fit:contain;padding:6px; display:block;pointer-events:none; } .bm-dep-method-ic.ic-cbot img{padding:0} .bm-dep-method-ic.ic-cbot, .bm-dep-method-ic.ic-sbp, .bm-dep-method-ic.ic-card, .bm-dep-method-ic.ic-btc{border-color:rgba(255,255,255,.06)} /* ── Строка активных фильтров ────────────────────────────────────── Появилась вместе с расширенной панелью: включённых условий стало слишком много, чтобы держать их в голове. Каждый чип снимается крестиком, крайний справа сбрасывает всё. */ .fb-active{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px} .fb-active[hidden]{display:none} .fb-active-l{font-size:11px;font-weight:650;letter-spacing:.08em; text-transform:uppercase;color:rgba(255,255,255,.28);margin-right:2px} .fb-active-chip{ display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px; border-radius:999px;background:rgba(96,165,250,.1); border:1px solid rgba(96,165,250,.24); font-size:11.5px;font-weight:600;color:#bfdbfe;line-height:1.4; } .fb-active-chip b{color:#fff;font-weight:700} .fb-active-x{ width:15px;height:15px;border-radius:999px;border:none;cursor:pointer; background:rgba(255,255,255,.1);color:rgba(255,255,255,.62); font-family:inherit;font-size:12px;line-height:1;padding:0; display:flex;align-items:center;justify-content:center; transition-property:background,color;transition-duration:150ms; } .fb-active-x:hover{background:rgba(255,255,255,.22);color:#fff} .fb-active-clear{ background:transparent;border:none;cursor:pointer;padding:4px 6px; font-family:inherit;font-size:11.5px;font-weight:600; color:rgba(255,255,255,.38);text-decoration:underline; text-underline-offset:2px; transition-property:color;transition-duration:150ms; } .fb-active-clear:hover{color:#fff} /* Плитка Stripe: фирменный фиолетовый с белым знаком. Остальные способы несут логотип на прозрачной подложке, здесь же залитая плитка — знак Stripe узнаётся только в своём цвете, а на тёмном фоне белый контур читался бы как ещё одна безымянная карточка. */ .bm-dep-method-ic.ic-stripe{background:#635bff;border-color:rgba(99,91,255,.5)} .bm-dep-method-ic.ic-stripe svg{display:block;width:22px;height:22px} .bm-dep-method.on .bm-dep-method-ic{ box-shadow:none;transform:none;border-color:rgba(96,165,250,.28); } .bm-dep-method[data-id="card"].on .bm-dep-method-ic.ic-stripe{ border-color:rgba(99,91,255,.95); } .bm-dep-method[data-id="crypto"].on{border-color:rgba(96,165,250,.42)} .bm-dep-method[data-id="crypto"].on::before{display:none} .bm-dep-method-r{flex:1;min-width:0;line-height:1.2} .bm-dep-method-name{font-size:13.5px;font-weight:650;color:#fff;letter-spacing:-.015em} .bm-dep-method-sub{font-size:11.5px;color:rgba(255,255,255,.34);font-weight:500;margin-top:3px} .bm-dep-check{ width:18px;height:18px;border-radius:999px;flex-shrink:0; border:1.5px solid rgba(255,255,255,.16); display:flex;align-items:center;justify-content:center; transition:background .18s,border-color .18s; } .bm-dep-method.on .bm-dep-check{ background:#60a5fa;border-color:#60a5fa; box-shadow:none; } .bm-dep-method.on .bm-dep-check::after{ content:"";width:5px;height:5px;border-radius:50%;background:#061018; } .bm-dep-info{ grid-column:1 / -1; font-size:12px;color:rgba(255,255,255,.28);text-align:left; padding:8px 0 4px;border:none;background:transparent;margin:0;line-height:1.5; } .bm-dep-info b{color:rgba(255,255,255,.42);font-weight:600} .bm-dep-err{ grid-column:1 / -1; background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#fca5a5; padding:12px 14px;border-radius:12px;font-size:12.5px;font-weight:600;text-align:center; margin:0 0 8px; } .bm-dep .bm-section-h{display:none} @media (max-width:720px){ .bm-box.bm-dep{width:min(100%,96vw);max-height:92vh;border-radius:18px} .bm-dep .bm-head{padding:18px 18px 14px} .bm-dep .bm-body{padding:18px 18px 6px} .bm-dep .bm-foot{padding:12px 18px 18px} .bm-dep-grid{grid-template-columns:1fr;gap:22px} .bm-dep-amt-field{min-height:96px;padding:18px} .bm-dep-presets{grid-template-columns:repeat(3,1fr)} } /* Stats grid (reused for profile orders/spent stats) */ .bm-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px} .bm-stat-grid .bm-di .v{font-size:16px} /* ── Orders modal ("Мои покупки") — wide-cover layout ── */ .bm-orders{display:flex;flex-direction:column;gap:10px;margin-bottom:8px} .bm-order{ display:flex;flex-direction:column;gap:12px; padding:14px;border-radius:13px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); border:1px solid rgba(255,255,255,.07); transition:border-color .2s var(--ease-soft),background .2s var(--ease-soft); } .bm-order:hover{border-color:rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012))} .bm-order-top{display:flex;align-items:center;gap:13px} /* Wide game cover banner (Steam header.jpg) */ .bm-order-cover{ width:96px;height:46px;border-radius:9px;flex-shrink:0;overflow:hidden; background:linear-gradient(180deg,#181818,#080808); border:1px solid rgba(255,255,255,.07); display:flex;align-items:center;justify-content:center;position:relative; box-shadow:0 2px 8px rgba(0,0,0,.4); } .bm-order-cover img{width:100%;height:100%;object-fit:cover;display:block} .bm-order-cover::after{ /* dark vignette so the wordmark/badges read clearly on bright covers */ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.35)); pointer-events:none; } .bm-order-cover .l{font-size:20px;font-weight:900;color:rgba(255,255,255,.85);letter-spacing:-.6px;line-height:1} .bm-order-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;line-height:1.2} .bm-order-name{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bm-order-tags{display:flex;flex-wrap:wrap;gap:5px} .bm-order-tag{ padding:3px 8px;border-radius:5px;font-size:10px;font-weight:800; letter-spacing:.5px;text-transform:uppercase;line-height:1; background:rgba(255,255,255,.05);border:1px solid var(--brd);color:var(--t2); } .bm-order-tag.nfa{background:rgba(96,165,250,.14);color:#bfdbfe;border-color:rgba(96,165,250,.32)} .bm-order-tag.nobans{background:rgba(34,197,94,.1);color:#86efac;border-color:rgba(34,197,94,.28)} .bm-order-price{ font-size:16px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums; letter-spacing:-.3px;flex-shrink:0;margin-left:auto;line-height:1; } .bm-order-price small{color:var(--t3);font-weight:700;margin-left:2px;font-size:13px} .bm-order-meta{ display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:11.5px;color:var(--t3);font-weight:500;line-height:1; } .bm-order-date{display:inline-flex;align-items:center;gap:6px} .bm-order-date svg{width:13px;height:13px;stroke-width:2;opacity:.8} .bm-order-status{ display:inline-flex;align-items:center;gap:5px; padding:5px 10px;border-radius:6px; font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;line-height:1; } .bm-order-status.ok {background:rgba(34,197,94,.1); color:#86efac;border:1px solid rgba(34,197,94,.3)} .bm-order-status.pend{background:rgba(251,191,36,.08);color:#fde68a;border:1px solid rgba(251,191,36,.28)} .bm-order-status.fail{background:rgba(239,68,68,.08);color:#fca5a5;border:1px solid rgba(239,68,68,.3)} .bm-order-status svg{width:12px;height:12px;stroke-width:3} .bm-order-key{ display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:10px; background:rgba(255,255,255,.025);border:1px solid var(--brd); } .bm-order-key-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;line-height:1} .bm-order-key-label{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:1.4px;font-weight:700} .bm-order-key-val{ font-family:'JetBrains Mono','Courier New',monospace;font-size:12px;font-weight:700;color:#fff; letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; -webkit-user-select:all;user-select:all; } .bm-order-key-btn{ padding:9px 14px;border-radius:8px;border:none; background:linear-gradient(180deg,#3b82f6,#1e40af);color:#fff; font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.4px;cursor:pointer; text-transform:uppercase; box-shadow:0 3px 10px rgba(59,130,246,.3),0 0 0 1px rgba(255,255,255,.1) inset; transition:transform .15s var(--ease-soft),box-shadow .25s var(--ease),filter .2s var(--ease-soft); flex-shrink:0; } .bm-order-key-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(59,130,246,.45);filter:brightness(1.08)} .bm-order-key-btn:active{transform:translateY(0) scale(.97)} .bm-order-key-btn.copied{background:linear-gradient(180deg,#22c55e,#15803d);box-shadow:0 3px 10px rgba(34,197,94,.4)} .bm-order-actions{ display:flex;gap:8px;flex-wrap:wrap; border-top:1px dashed rgba(255,255,255,.06);padding-top:10px; } .bm-order-support-btn{ display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:8px; background:rgba(6,182,212,.10);border:1px solid rgba(6,182,212,.30); color:#67e8f9;font-size:12px;font-weight:700;letter-spacing:.1px; text-decoration:none;cursor:pointer; transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .04s; } .bm-order-support-btn:hover{ background:linear-gradient(135deg,#06B6D4,#0891B2); border-color:transparent;color:#fff; box-shadow:0 4px 12px rgba(6,182,212,.30); } .bm-order-support-btn:active{transform:translateY(1px)} .bm-order-support-btn svg{width:13px;height:13px;stroke-width:2.2} .bm-order-empty{ text-align:center;padding:48px 16px;color:var(--t3);font-size:13px;line-height:1.6; } .bm-order-empty svg{width:56px;height:56px;color:var(--t3);opacity:.3;margin:0 auto 14px;display:block;stroke-width:1.5} .bm-order-empty p{margin-bottom:14px;color:var(--t2)} /* ── Tab bar (Профиль | Покупки | Транзакции) ──────────────────────── */ .bm-tabs{ display:flex;gap:4px;padding:5px; background:rgba(255,255,255,.025);border:1px solid var(--brd); border-radius:11px;margin-bottom:16px; position:sticky;top:0;z-index:2; } .bm-tab{ flex:1;padding:9px 10px;border:none;background:transparent; color:var(--t3);font-family:inherit;font-size:12px;font-weight:700; letter-spacing:.3px;cursor:pointer;border-radius:8px; display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1; transition:background .18s var(--ease-soft),color .18s var(--ease-soft),transform .12s var(--ease-soft); white-space:nowrap; } .bm-tab:hover{color:#fff;background:rgba(255,255,255,.03)} .bm-tab.on{ background:#fff;color:#0b1220; box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 0 0 1px rgba(0,0,0,.04); } .bm-tab .bm-tab-cnt{ display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px; padding:0 5px;border-radius:5px;font-size:10px;font-weight:800; background:rgba(0,0,0,.08);color:inherit;font-variant-numeric:tabular-nums; } .bm-tab:not(.on) .bm-tab-cnt{background:rgba(255,255,255,.06);color:var(--t2)} /* ── Transactions list ─────────────────────────────────────────────── */ .bm-txs{display:flex;flex-direction:column;gap:8px;margin-bottom:8px} .bm-tx{ display:flex;align-items:center;gap:12px; padding:12px 14px;border-radius:11px; background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005)); border:1px solid rgba(255,255,255,.06); } .bm-tx-ic{ width:36px;height:36px;border-radius:9px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.05); } .bm-tx-ic svg{width:18px;height:18px;stroke-width:2;color:#fff} .bm-tx-ic.deposit {background:rgba(34,197,94,.12)} .bm-tx-ic.deposit svg{color:#86efac} .bm-tx-ic.purchase {background:rgba(96,165,250,.12)} .bm-tx-ic.purchase svg{color:#bfdbfe} .bm-tx-ic.refund {background:rgba(251,191,36,.12)} .bm-tx-ic.refund svg{color:#fde68a} .bm-tx-ic.admin {background:rgba(168,85,247,.12)} .bm-tx-ic.admin svg{color:#d8b4fe} .bm-tx-ic.referral {background:rgba(236,72,153,.12)} .bm-tx-ic.referral svg{color:#fbcfe8} .bm-tx-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.2} .bm-tx-title{ font-size:13px;font-weight:700;color:#fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .bm-tx-meta{font-size:11px;color:var(--t3);font-weight:500;letter-spacing:.2px} .bm-tx-amount{ font-size:14px;font-weight:800;font-variant-numeric:tabular-nums; letter-spacing:-.2px;flex-shrink:0;line-height:1; } .bm-tx-amount small{color:var(--t3);font-weight:700;margin-left:1px;font-size:11px} .bm-tx-amount.pos{color:#86efac} .bm-tx-amount.neg{color:#fca5a5} @media(max-width:760px){ .bm-tab{font-size:11px;padding:8px 6px;gap:5px} .bm-tab .bm-tab-cnt{font-size:9.5px;min-width:16px;height:14px;padding:0 4px} .bm-tx{padding:10px 12px;gap:10px} .bm-tx-ic{width:32px;height:32px} .bm-tx-title{font-size:12.5px} .bm-tx-amount{font-size:13px} } @media(max-width:760px){ .bm-order{padding:12px} .bm-order-cover{width:80px;height:40px;border-radius:8px} .bm-order-name{font-size:13.5px} .bm-order-price{font-size:14px} .bm-order-tag{font-size:9.5px;padding:2px 7px} .bm-order-key{padding:9px 10px;gap:8px} .bm-order-key-val{font-size:11px} .bm-order-key-btn{padding:8px 11px;font-size:10.5px} } @media(max-width:430px){ .bm-order-top{flex-wrap:wrap} .bm-order-price{margin-left:0;width:100%;text-align:right} } .bm-price-row{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:14px 18px;margin-bottom:4px; background: radial-gradient(120% 160% at 100% 50%,rgba(96,165,250,.08),transparent 60%), linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.005)); border:1px solid rgba(255,255,255,.08);border-radius:13px; } .bm-price-l{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:1.4px;font-weight:700} .bm-price-v{font-size:28px;font-weight:900;letter-spacing:-.8px;color:#fff;line-height:1; background:linear-gradient(180deg,#fff,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .bm-price-v small{font-size:14px;color:var(--t3);font-weight:700;margin-left:3px;-webkit-text-fill-color:var(--t3)} .ftr{max-width:1280px;width:100%;margin:0 auto;border-top:1px solid var(--brd);padding:20px clamp(16px,3vw,48px);display:flex;justify-content:space-between;font-size:10px;color:var(--t3)} .ftr a{color:var(--t3);text-decoration:none;margin-left:12px}.ftr a:hover{color:var(--t2)} @media(max-width:900px){ .acc-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .fb-search{max-width:none;flex:1 1 auto;min-width:140px} } @media(max-width:760px){ /* Single-column layout, smaller paddings, snappier touch targets */ .acc-list{grid-template-columns:1fr;gap:14px} .acc-card{padding:16px;border-radius:16px} .acc-price{font-size:22px;letter-spacing:-.6px;flex-shrink:0} .acc-card-head{gap:10px;align-items:baseline;flex-wrap:wrap} .acc-game-badge-top{font-size:13px;flex-wrap:wrap;flex:1 1 auto;min-width:0} .acc-game-badge-top b{font-size:14px} .acc-game-meta{font-size:13px} .acc-game-bonus{font-size:12px} .acc-buy-btn{padding:13px 14px;font-size:12.5px} .acc-stats{gap:6px} .acc-stat{padding:8px 10px;gap:7px} .acc-stat-l{font-size:8.5px} .acc-stat-v{font-size:12.5px} .acc-section-title{font-size:8.5px;letter-spacing:1.2px} .acc-chip{font-size:10.5px;padding:4px 9px} .games-grid{grid-template-columns:repeat(auto-fill,64px);gap:7px;margin-bottom:14px} .game-card{width:64px;height:64px;border-radius:12px} .game-card-logo{max-width:46px;max-height:36px} .game-card-letter{font-size:22px} .game-card-all-icon{width:36px;height:36px} .section-h{margin-bottom:10px} .filter-bar{padding:10px 12px;border-radius:12px;margin-bottom:14px} .fb-search{flex:1 1 100%;max-width:none;width:100%;height:44px} .fb-search-kbd{display:none} .fb-toggle{padding:0 12px;font-size:12px;height:40px} .ftr{font-size:9px;padding:14px clamp(14px,3vw,48px);flex-direction:column;gap:6px;text-align:center} .ftr a{margin-left:8px} /* Modal — full-width sheet on mobile (slides up from bottom) */ .bm{align-items:flex-end;padding:0} .bm-box{border-radius:16px 16px 0 0;max-height:92vh;width:100%;align-self:flex-end;transform:translate3d(0,40px,0) scale(1)} .bm.on .bm-box{transform:translate3d(0,0,0) scale(1)} /* Deposit stays a centered wide card even on phones */ .bm:has(.bm-dep){align-items:center;padding:12px} .bm-box.bm-dep{border-radius:16px;width:min(100%,96vw);align-self:center;max-height:92vh} .bm-head{padding:14px 16px 12px} .bm-head-ic{width:40px;height:40px;border-radius:10px} .bm-head-ic img{max-width:30px;max-height:24px} .bm-head-t{font-size:14.5px} .bm-head-s{font-size:10px;letter-spacing:.9px} .bm-x{width:30px;height:30px} .bm-body{padding:14px 16px} .bm-foot{padding:12px 16px 16px} .bm-profile{padding:12px 14px;gap:11px;margin-bottom:12px} .bm-avatar{width:46px;height:46px;border-radius:11px;font-size:17px} .bm-persona{font-size:14px} .bm-game-card{padding:11px 12px;gap:11px} .bm-game-card-ic{width:46px;height:46px;border-radius:10px} .bm-game-card-ic img{max-width:36px;max-height:28px} .bm-game-card-name{font-size:13px} .bm-game-card-hrs{font-size:13px} .bm-tag{font-size:10px;padding:3px 8px} .bm-detail{gap:7px} .bm-di{padding:11px 8px;border-radius:10px} .bm-di .l{font-size:8.5px} .bm-di .v{font-size:15px} .bm-price-row{padding:12px 14px;border-radius:11px} .bm-price-v{font-size:24px} .bm-price-v small{font-size:13px} /* Profile + deposit modal mobile */ .bm-prof-hero{padding:14px} .bm-prof-hero-ava{width:54px;height:54px;font-size:21px;border-radius:12px} .bm-prof-hero-name{font-size:15px} .bm-prof-balance{padding:12px 14px} .bm-prof-balance-val{font-size:20px} .bm-prof-balance-btn{padding:9px 14px;font-size:11.5px} .bm-dep-amt-input{font-size:36px;letter-spacing:-.04em} .bm-dep-amt-cur{font-size:18px} .bm-dep-preset{font-size:12.5px;padding:11px 6px} .bm-dep-method-name{font-size:12.5px} .bm-dep-method-sub{font-size:10px} /* Pager */ .pager{gap:3px;flex-wrap:wrap;justify-content:center;margin-top:18px} .pager button{min-width:36px;height:36px;font-size:12px} } @media(max-width:430px){ .acc-card{padding:14px} .acc-price{font-size:20px} .acc-game-badge-top{font-size:12.5px} .acc-game-badge-top b{font-size:13px} .games-grid{grid-template-columns:repeat(auto-fill,58px);gap:6px} .game-card{width:58px;height:58px;border-radius:11px} .game-card-logo{max-width:42px;max-height:32px} .game-card-letter{font-size:20px} .game-card-all-icon{width:32px;height:32px} .bm-prof-hero{flex-direction:column;text-align:center;gap:12px} .bm-prof-balance{flex-direction:column;align-items:stretch;gap:10px} .bm-prof-balance-l{justify-content:center} .bm-prof-balance-btn{width:100%} .bm-stat-grid.bm-detail{grid-template-columns:1fr 1fr} } /* Larger touch targets — only single-line chips get a fixed height. Multi-line controls (.bm-dep-preset / methods) keep natural padding. */ @media (hover:none) and (pointer:coarse){ .fb-sort,.fb-chip,.mt-novac-btn{min-height:36px;height:36px} .bm-btn,.bm-dep-method{min-height:36px} .game-card{min-height:36px} .acc-buy-btn,.bm-btn,.bm-prof-balance-btn{min-height:44px} } /* ══ Favorites + Cart UI (header icons, per-card controls, toast) ══════ Reuses existing tokens only: dark surfaces, --ok green accent (#22c55e / #4ade80), --err for error toasts, --ac for info. No new color tokens. Safe to remove this block + the matching markup/JS to fully revert. */ .hd-actions{display:inline-flex;align-items:center;gap:8px} .hd-iconlink{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;flex-shrink:0; background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06); border-radius:11px;color:var(--t2);text-decoration:none; transition:color .18s var(--ease-soft),background .18s var(--ease-soft),border-color .18s var(--ease-soft),transform .15s var(--ease-soft); } .hd-iconlink:hover{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);transform:translateY(-1px)} .hd-iconlink:active{transform:translateY(0) scale(.95)} .hd-iconlink svg{width:19px;height:19px;stroke-width:2} .hd-ic-badge{ position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px; display:inline-flex;align-items:center;justify-content:center; font-size:10.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; color:#04130a;background:linear-gradient(180deg,#4ade80,#22c55e); border:1.5px solid var(--bg);border-radius:999px; box-shadow:0 0 10px rgba(34,197,94,.45);pointer-events:none; } .hd-ic-badge[hidden]{display:none} @media(max-width:480px){.hd-iconlink{width:38px;height:38px}.hd-iconlink svg{width:18px;height:18px}} /* Per-card favorite (heart) — floats in the top-right corner of the card */ .acc-fav-btn{ position:absolute;top:14px;right:14px;z-index:3; width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center; background:rgba(8,8,8,.88);border:1px solid var(--brd);border-radius:10px; color:var(--t2);cursor:pointer; transition:color .18s var(--ease-soft),background .18s var(--ease-soft),border-color .18s var(--ease-soft),transform .15s var(--ease-soft); } .acc-fav-btn svg{width:18px;height:18px;stroke-width:2;fill:none;transition:fill .2s var(--ease-soft),transform .22s var(--ease)} .acc-fav-btn:hover{color:#fff;background:rgba(20,20,20,.85);border-color:rgba(255,255,255,.16);transform:translateY(-1px)} .acc-fav-btn:hover svg{transform:scale(1.1)} .acc-fav-btn:active{transform:scale(.9)} .acc-fav-btn:active svg{transform:scale(.82)} .acc-fav-btn.is-fav{color:#fb7185;border-color:rgba(244,63,94,.5);background:rgba(244,63,94,.14)} .acc-fav-btn.is-fav svg{fill:currentColor;filter:drop-shadow(0 0 7px rgba(244,63,94,.4))} .acc-fav-btn.busy{opacity:.55;pointer-events:none} /* keep the card-head text (game badge + price) clear of the floating heart */ .acc-card-head{padding-right:42px} /* Per-card cart toggle — square icon button beside the Buy CTA, matching the existing .acc-livecheck-btn footprint (44x44). */ .acc-cart-btn{ flex-shrink:0;width:44px;height:44px;padding:0; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.04);border:1px solid var(--brd); color:var(--t2);border-radius:11px;cursor:pointer; transition:background .22s var(--ease-soft),border-color .22s var(--ease-soft),color .22s var(--ease-soft),transform .15s var(--ease-soft); } .acc-cart-btn svg{width:18px;height:18px;stroke-width:2;transition:transform .22s var(--ease)} .acc-cart-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;transform:translateY(-1px)} .acc-cart-btn:hover svg{transform:scale(1.1)} .acc-cart-btn:active{transform:translateY(0) scale(.94)} .acc-cart-btn:active svg{transform:scale(.84)} .acc-cart-btn.in-cart{color:#4ade80;background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.5)} .acc-cart-btn.busy{opacity:.55;pointer-events:none} /* Две иконки в одной ячейке грида: «сумка с плюсом» и «сумка с галочкой». Меняются перетеканием — прозрачность, масштаб и лёгкое размытие, — поэтому состояние читается движением, а не только цветом. display:none тут не годится: подмена была бы мгновенной и дёрганой. */ .acc-cart-ic{display:grid;place-items:center;width:18px;height:18px} .acc-cart-ic svg{ grid-area:1/1;width:18px;height:18px; transition:opacity .2s cubic-bezier(.2,0,0,1), scale .2s cubic-bezier(.2,0,0,1), filter .2s cubic-bezier(.2,0,0,1); } .acc-cart-ic .ic-ok{opacity:0;scale:.25;filter:blur(4px)} .acc-cart-btn.in-cart .ic-add{opacity:0;scale:.25;filter:blur(4px)} .acc-cart-btn.in-cart .ic-ok{opacity:1;scale:1;filter:blur(0)} /* Наведение масштабирует значок целиком — правило выше метит svg, а он теперь вложен в обёртку. */ .acc-cart-btn:hover .acc-cart-ic{transform:scale(1.1)} .acc-cart-btn:active .acc-cart-ic{transform:scale(.84)} .acc-cart-btn .acc-cart-ic{transition:transform .22s var(--ease)} @media (prefers-reduced-motion: reduce){ .acc-cart-ic svg,.acc-cart-btn .acc-cart-ic{transition:none} .acc-cart-ic .ic-ok,.acc-cart-btn.in-cart .ic-add{filter:none} } /* Toast / snackbar — minimal, bottom-center, theme-matched */ .tm-toast-wrap{ position:fixed;left:50%;bottom:26px;transform:translateX(-50%); z-index:1000;display:flex;flex-direction:column;gap:8px;align-items:center; pointer-events:none;max-width:calc(100vw - 32px); } .tm-toast{ display:inline-flex;align-items:center;gap:9px;max-width:100%; padding:11px 16px;border-radius:12px; background:linear-gradient(180deg,#141414,#0b0b0b); border:1px solid var(--brd);color:var(--t); font-size:13px;font-weight:600;letter-spacing:.1px; box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset; opacity:0;transform:translateY(10px) scale(.98); transition:opacity .22s var(--ease-soft),transform .22s var(--ease-soft); } .tm-toast.show{opacity:1;transform:translateY(0) scale(1)} .tm-toast .tm-toast-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;flex-shrink:0;box-shadow:0 0 8px rgba(34,197,94,.6)} .tm-toast.err{border-color:rgba(239,68,68,.4)} .tm-toast.err .tm-toast-dot{background:var(--err);box-shadow:0 0 8px rgba(239,68,68,.6)} .tm-toast.info .tm-toast-dot{background:var(--ac);box-shadow:0 0 8px rgba(96,165,250,.6)} /* ── Native controls on the dark theme ────────────────────────────── color-scheme makes the UA render selects/inputs (dropdown arrows, pickers, scrollbars inside) dark; option list gets an explicit dark fill because Windows Chrome otherwise paints it white. The autofill rule kills Chrome's pale-yellow/white autofill background. */ select,input{color-scheme:dark} select option{background:#141414;color:#fff} input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #141414 inset;-webkit-text-fill-color:#fff} /* ── Moved from JS-injected