/* =========================================================
   ДЕТИ 90-ЫХ — v3 (раскладка и размеры по донору)
   Заголовки/цифры — Unbounded, текст — Inter
   ========================================================= */
:root {
  --card: #1a1a1a;
  --card-2: #202020;
  --card-3: #262626;
  --line: rgba(255,255,255,.06);
  --blue: #5a7dff;
  --blue-2: #6e8cff;
  --blue-soft: rgba(90,125,255,.14);
  --gold: #f2c752;
  --gold-bg: #2a2317;
  --muted: #8b8b8b;
  --p1: #e8b84a; --p2: #8ea2d6; --p3: #c98a6a;
  --r-card: 16px;
  --font-h: 'Unbounded', system-ui, sans-serif;
  --font-t: 'Inter', system-ui, sans-serif;
}
body { font-family: var(--font-t); background: #111; }
h1, h2, h3, .h1, .d-stat-val, .section-title, .hdr-logo, .ftr-logo { font-family: var(--font-h); }
.top-banner, .navbar, .footer { display: none !important; } /* старые шапка/подвал */

.muted { color: var(--muted); }
.gold { color: var(--gold); } .green { color: var(--green); } .red { color: var(--red); }
.ta-r { text-align: right; } .xs { font-size: 11px; } .nowrap { white-space: nowrap; }
.dim { opacity: .45; }
code { font-family: ui-monospace, Consolas, monospace; background: var(--card-3); padding: 2px 6px; border-radius: 6px; font-size: 12px; color: #cfd8ff; }
svg { fill: currentColor; }
[hidden] { display: none !important; }

/* ---------- кнопки ---------- */
.btn-blue, .btn-gold, .btn-dark, .btn-red, .btn-steam {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 10px; border: 0; font: 600 14px var(--font-t); cursor: pointer; transition: background .2s, transform .1s; color: #fff; white-space: nowrap;
}
.btn-blue { background: var(--blue); } .btn-blue:hover { background: var(--blue-2); color: #fff; }
.btn-gold { background: var(--gold-bg); color: var(--gold); } .btn-gold:hover { background: #3a3020; color: var(--gold); }
.btn-dark { background: var(--card-3); color: #e6e6e6; } .btn-dark:hover { background: #303030; color: #fff; }
.btn-red { background: rgba(255,77,79,.14); color: #ff6b6d; } .btn-red:hover { background: rgba(255,77,79,.24); color: #ff8a8c; }
.btn-steam { background: #1e2340; border: 1px solid #3a4585; } .btn-steam:hover { background: #262d52; color: #fff; }
.btn-blue:active, .btn-gold:active, .btn-dark:active { transform: scale(.97); }
button:disabled { opacity: .55; cursor: not-allowed; }
.sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.wide { width: 100%; }
.btn-blue svg, .btn-gold svg, .btn-dark svg, .btn-red svg, .btn-steam svg { width: 16px; height: 16px; }

/* ---------- шапка ---------- */
.hdr { position: sticky; top: 0; z-index: 900; background: rgba(17,17,17,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hdr-in { max-width: 1366px; margin: 0 auto; padding: 0 20px; height: 72px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.hdr-logo { font-size: 22px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; color: #fff; }
.hdr-logo span { color: var(--blue); }
.hdr-logo:hover { color: #fff; }
.hdr-social { display: flex; gap: 10px; }
.hdr-social a, .ftr-social a { width: 22px; height: 22px; color: #9a9a9a; display: grid; place-items: center; }
.hdr-social a:hover, .ftr-social a:hover { color: #fff; }
.hdr-social svg, .ftr-social svg { width: 20px; height: 20px; }
.hdr-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.hdr-link { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 9px; border-radius: 10px; font: 600 14.5px var(--font-t); color: #e8e8e8; background: none; border: 0; position: relative; }
.hdr-link svg { width: 18px; height: 18px; }
.hdr-link.gold { color: var(--gold); }
.hdr-link:hover { background: var(--card-2); color: #fff; }
.hdr-link.gold:hover { color: #ffd76a; }
.hdr-link.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -16px; height: 2px; border-radius: 2px; background: var(--blue); }
.hdr-more { position: relative; }
.hdr-drop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .15s; }
.hdr-more:hover .hdr-drop, .hdr-more:focus-within .hdr-drop { opacity: 1; visibility: visible; transform: none; }
.hdr-drop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-weight: 500; color: #ddd; }
.hdr-drop a:hover { background: var(--card-2); color: #fff; }
.hdr-drop svg { width: 16px; height: 16px; color: var(--muted); }
.hdr-right { display: flex; align-items: center; gap: 8px; }
.hdr-search { display: flex; align-items: center; height: 40px; width: 136px; background: var(--card-2); border-radius: 10px; padding: 0 6px 0 12px; }
.hdr-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 13px var(--font-t); }
.hdr-search input::placeholder { color: #777; }
.hdr-search button { background: none; border: 0; color: #777; width: 26px; height: 26px; display: grid; place-items: center; }
.hdr-search svg { width: 15px; height: 15px; }
.hdr-topup { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; background: var(--gold-bg); color: var(--gold); font-weight: 600; }
.hdr-topup:hover { background: #3a3020; color: #ffd76a; }
.hdr-topup svg { width: 18px; height: 18px; }
.hdr-login { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 600; }
.hdr-login:hover { background: var(--blue-2); color: #fff; }
.hdr-login svg { width: 18px; height: 18px; }
.hdr-user { position: relative; }
.hdr-avatar { width: 44px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: visible; background: none; position: relative; }
.hdr-avatar img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; display: block; }
.hdr-user.open .hdr-avatar { border-color: var(--blue); }
.hdr-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid #111; }
.hdr-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 250px; padding: 10px; border-radius: 16px; background: #161616; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.6); display: none; flex-direction: column; gap: 6px; }
.hdr-user.open .hdr-menu { display: flex; }
.hdr-menu-top { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; }
.hdr-menu-top:hover { background: var(--card-2); }
.hdr-menu-top img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.hdr-menu-name { font-weight: 700; color: #fff; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-menu-sub { font-size: 12px; color: var(--muted); }
.hdr-menu-balance { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--card-2); }
.hdr-menu-balance:hover { background: var(--card-3); }
.hdr-menu-money { font: 700 16px var(--font-h); color: var(--gold); }
.hdr-menu-balance svg { width: 26px; height: 26px; color: #ddd; border: 2px solid #ddd; border-radius: 50%; padding: 4px; }
.hdr-menu-item { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--card-2); font-weight: 500; color: #e6e6e6; }
.hdr-menu-item:hover { background: var(--card-3); color: #fff; }
.hdr-menu-item svg { width: 16px; height: 16px; }
.hdr-menu-item.red { background: none; color: #ff5a5f; }
.hdr-menu-item.red:hover { background: rgba(255,77,79,.1); color: #ff7a7e; }
.hdr-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; display: grid; place-items: center; }
.hdr-burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--card-2); flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.hdr-burger span { width: 18px; height: 2px; background: #ddd; border-radius: 2px; }

/* ---------- общие блоки ---------- */
.page { max-width: 1366px; margin: 0 auto; padding: 12px 20px 40px; flex: 1; width: 100%; }
.card-box { background: var(--card); border-radius: var(--r-card); padding: 18px; }
.page-head { margin: 18px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.page-head.row { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.h1 { font-size: 28px; font-weight: 700; }
.box-title { font: 600 16px var(--font-h); margin-bottom: 14px; }
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg button, .seg a { height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; background: var(--card-2); color: #ddd; font: 600 13px var(--font-t); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.seg button:hover, .seg a:hover { background: var(--card-3); color: #fff; }
.seg .on { background: var(--blue-soft); border-color: var(--blue); color: #fff; }
.seg.full { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; }
.seg.sm button { height: 32px; font-size: 12px; padding: 0 10px; }
.empty-big { text-align: center; padding: 50px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); }
.empty-big svg { width: 48px; height: 48px; opacity: .35; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--card-3); font-size: 11px; font-weight: 600; color: #cfcfcf; }
.tag.public { background: var(--blue-soft); color: #9fb3ff; } .tag.awp { background: rgba(242,199,82,.14); color: var(--gold); }
.st { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--card-3); }
.st-active { background: rgba(255,77,79,.14); color: #ff6b6d; }
.st-unbanned, .st-unmuted { background: rgba(79,208,141,.12); color: var(--green); }
.st-expired { color: var(--muted); }

/* таблицы */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(255,255,255,.015); }
.lb-pl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-pl img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }

/* поля */
.fld { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #cfcfcf; margin-bottom: 14px; }
.fld-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fld-row > * { flex: 1; min-width: 120px; }
.fld input, .fld select, .fld-row input, .fld-row select, .modal textarea, .adm-filter input, .adm-filter select, .search-big input {
  height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: #fff; font: 14px var(--font-t); outline: 0; width: 100%;
}
.fld input:focus, .modal textarea:focus, .fld-row input:focus { border-color: var(--blue); }
.fld input[type=range] { padding: 0; height: 24px; accent-color: var(--blue); background: none; border: 0; }
.chk { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-weight: 600; }
.chk input { width: 18px; height: 18px; accent-color: var(--blue); }

/* модалка */
.modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.modal-box { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto; background: #161616; border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.modal-title { font: 600 18px var(--font-h); margin-bottom: 16px; }
.modal-x { position: absolute; right: 14px; top: 12px; width: 32px; height: 32px; border-radius: 8px; border: 0; background: var(--card-2); color: #aaa; font-size: 22px; line-height: 1; }
.modal-x:hover { color: #fff; }
.modal textarea { height: 120px; padding: 12px 14px; resize: vertical; margin-bottom: 14px; }

/* toast */
.toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 1300; display: flex; flex-direction: column; gap: 8px; }
.toast { min-width: 240px; max-width: 340px; background: #1c1c1c; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: .3s; }
.toast.success { border-left-color: var(--green); } .toast.error { border-left-color: var(--red); }
.toast.out { opacity: 0; transform: translateX(30px); }
.toast-title { font-weight: 700; font-size: 14px; } .toast-msg { color: #bbb; font-size: 12px; margin-top: 2px; }

/* ---------- главная ---------- */
.d-hero { gap: 10px; }
.d-mod { height: 300px; }
.d-mod-title { font-size: 46px; padding-bottom: 26px; }
.d-row { grid-template-columns: 335px minmax(0,1fr); gap: 10px; margin-top: 10px; }
.d-top { height: 300px; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.top-head { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--card-2); font-weight: 600; font-size: 14px; }
.q-hint { width: 18px; height: 18px; border-radius: 50%; background: #d9d9d9; color: #111; font-size: 12px; font-weight: 800; display: grid; place-items: center; cursor: help; }
.d-top .seg { display: grid; grid-template-columns: repeat(3, 1fr); }
.d-top .seg button { height: 36px; font-size: 12px; padding: 0; }
.top-list { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.top-row { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px 0 6px; border-radius: 10px; background: var(--card-2); }
.top-row:hover { background: var(--card-3); color: inherit; }
.top-row img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.top-row-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.top-row-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-row-name span { font-size: 11px; color: var(--muted); }
.top-row-name .p1 { color: var(--p1); } .top-row-name .p2 { color: var(--p2); } .top-row-name .p3 { color: var(--p3); }
.top-row-place { font: 800 30px var(--font-h); line-height: 1; }
.top-row-place i { font-style: normal; font-size: 18px; color: #3a3a3a; margin-right: 4px; vertical-align: 5px; }
.top-row-place.p1 { color: var(--p1); } .top-row-place.p2 { color: var(--p2); } .top-row-place.p3 { color: var(--p3); }
.top-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.top-empty svg { width: 34px; height: 34px; opacity: .3; }
.top-empty a { color: var(--blue); font-weight: 600; }

.slider { position: relative; height: 300px; border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.slider-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.slide { flex: 0 0 100%; height: 100%; position: relative; color: #fff; display: flex; align-items: flex-end;
  background: var(--img) no-repeat right center / auto 100%, radial-gradient(120% 140% at 85% 50%, #1b2233 0%, var(--card) 60%); }
.slide:hover { color: #fff; }
.slide-text { position: relative; z-index: 1; padding: 0 22px 44px; max-width: 64%; }
.slide-text h3 { font-size: 27px; font-weight: 700; line-height: 1.2; margin-bottom: 10px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.slide-text p { font-size: 14px; color: #e0e0e0; margin-bottom: 18px; }
.slide-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.slider-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.slider-dots button { width: 6px; height: 6px; border-radius: 6px; border: 0; padding: 0; background: rgba(255,255,255,.45); transition: width .2s; }
.slider-dots button.on { width: 20px; background: #fff; }
.slider-arrows { position: absolute; right: 16px; bottom: 14px; z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 30px; background: rgba(20,20,20,.6); backdrop-filter: blur(16px); }
.slider-arrows button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; color: rgba(255,255,255,.6); display: grid; place-items: center; }
.slider-arrows button:hover { color: #fff; }
.slider-arrows svg { width: 16px; height: 16px; }

/* отзывы */
.rv-row { align-items: stretch; }
.rv-sum { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.rv-sum-title { font: 700 18px var(--font-h); }
.rv-sum-main { display: flex; align-items: center; gap: 22px; }
.rv-avg { font: 800 38px var(--font-h); color: var(--blue); line-height: 1; }
.rv-sum-word { font: 600 16px var(--font-h); }
.rv-sum-count { font-size: 11px; color: var(--muted); }
.stars { display: inline-flex; align-items: center; gap: 2px; color: #3b3b3b; font-size: 15px; }
.stars i { font-style: normal; } .stars i.on { color: #ffc107; }
.stars span { color: #fff; margin-left: 6px; font-size: 14px; }
.stars.big { font-size: 22px; gap: 4px; }
.stars.pick { font-size: 34px; gap: 6px; margin-bottom: 14px; cursor: pointer; }
.stars.pick i:hover { color: #ffd54f; }
.rv-sum .btn-dark { margin-top: auto; height: 44px; }
.rv-list-wrap { position: relative; min-width: 0; }
.rv-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; height: 100%; }
.rv-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.rv-head { display: flex; align-items: center; gap: 10px; }
.rv-head img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.rv-name { font-weight: 700; color: var(--blue); }
.rv-pop { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: var(--blue); font-size: 11px; font-weight: 600; white-space: nowrap; }
.rv-text { flex: 1; background: var(--card-2); border-radius: 10px; padding: 12px; font-size: 13px; color: #ddd; min-height: 80px; word-break: break-word; }
.rv-foot { display: flex; align-items: center; justify-content: center; position: relative; font-size: 11px; color: #777; }
.rv-like { position: absolute; right: 0; background: none; border: 0; color: #ddd; font-size: 12px; display: flex; gap: 4px; align-items: center; }
.rv-like.on { color: #ff5a7a; }
.rv-empty { grid-column: 1 / -1; display: grid; place-items: center; color: var(--muted); text-align: center; min-height: 160px; }
.rv-pager { position: absolute; top: 12px; right: 14px; display: flex; align-items: center; gap: 8px; }
.rv-pager button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--card-3); color: #ddd; font-size: 16px; }
.rv-pager span { font: 700 16px var(--font-h); color: var(--blue); }
.rv-list-wrap:has(.rv-pager) .rv-card:last-of-type .rv-head { padding-right: 130px; }

/* статистика */
.d-stats { grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; }
.d-stat { padding: 18px 20px; border-radius: var(--r-card); background: var(--card); color: var(--blue); border: 2px solid transparent; min-height: 80px; }
.d-stat-label { font-size: 13px; color: #e0e0e0; margin-bottom: 4px; }
.d-stat-val { font-size: 22px; font-weight: 700; color: var(--blue); }
.d-stat.gold { border-color: var(--gold); color: var(--gold); }
.d-stat.gold .d-stat-label, .d-stat.gold .d-stat-val { color: var(--gold); }

/* серверы */
.d-row-servers { margin-top: 26px; }
.d-drops { padding: 14px; }
.drops { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.drop { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--card-2); }
.drop img { width: 36px; height: 36px; border-radius: 8px; }
.drop-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drop-txt b { font-size: 13px; } .drop-txt span { font-size: 11px; color: var(--muted); }
.rar { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #b0c3d9; }
.rar-blue { background: #4b69ff; } .rar-purple { background: #8847ff; } .rar-pink { background: #d32ce6; } .rar-red { background: #eb4b4b; } .rar-gold { background: #e4ae39; } .rar-white { background: #b0c3d9; }
.servers-area .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.section-title { font-size: 20px; font-weight: 700; }
.section-subtitle { color: var(--muted); font-size: 13px; }
.d-servers { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.server-card { background: var(--card); border: 0; border-radius: var(--r-card); overflow: hidden; }
.server-card-img { height: 160px; position: relative; }
.server-card-mode-badge.awp { background: rgba(242,199,82,.9); color: #111; }
.srv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
.srv-bar i { display: block; height: 100%; background: var(--green); transition: width .4s; }
.server-card-desc { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.btn-copy, .btn-connect { border-radius: 10px; }

/* попап бонусов */
.bonus-pop { position: fixed; left: 12px; bottom: 12px; z-index: 1100; width: 236px; padding: 14px; border-radius: 14px; background: #161616; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.55); animation: popIn .35s ease; }
@keyframes popIn { from { opacity: 0; transform: translateY(16px); } }
.bonus-pop-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.bonus-pop-title svg { width: 18px; height: 18px; }
.bonus-pop-text { font-size: 12px; color: #cfcfcf; margin-bottom: 12px; line-height: 1.45; }
.bonus-pop-text b { color: #fff; }
.bonus-pop-actions { display: flex; gap: 6px; }
.bonus-pop-btn { flex: 1; height: 36px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.bonus-pop-btn:hover { background: var(--blue-2); color: #fff; }
.bonus-pop-mute { width: 36px; height: 36px; border-radius: 8px; border: 0; background: var(--card-3); color: #bbb; display: grid; place-items: center; }
.bonus-pop-mute svg { width: 15px; height: 15px; }

/* подвал */
.ftr { max-width: 1326px; width: calc(100% - 40px); margin: 30px auto 20px; background: var(--card); border-radius: var(--r-card); }
.ftr-in { padding: 20px 24px; }
.ftr-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ftr-logo { font-size: 17px; font-weight: 800; color: #5b5b5b; }
.ftr-links { display: flex; gap: 28px; margin: 0 auto; flex-wrap: wrap; }
.ftr-links a { font-size: 14px; color: #cfcfcf; }
.ftr-links a:hover { color: #fff; }
.ftr-social { display: flex; gap: 14px; }
.ftr-desc { padding-top: 14px; font-size: 11px; color: #a0a0a0; text-align: center; }

/* ---------- профиль ---------- */
.pf-cover { position: relative; margin-top: 8px; border-radius: var(--r-card); overflow: hidden; padding: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; min-height: 240px;
  background: linear-gradient(90deg, rgba(17,17,17,.96) 0%, rgba(17,17,17,.8) 45%, rgba(17,17,17,.35) 100%), var(--cover) center 25% / cover; }
.pf-main { display: flex; align-items: flex-end; gap: 22px; min-width: 0; }
.pf-avatar { width: 116px; height: 116px; border-radius: 20px; object-fit: cover; border: 3px solid rgba(255,255,255,.08); flex-shrink: 0; }
.pf-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-name { font-size: 30px; font-weight: 800; line-height: 1.1; word-break: break-word; }
.pf-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--card-3); color: #ddd; }
.pf-badge svg { width: 13px; height: 13px; }
.pf-badge.role-owner { background: rgba(255,77,79,.16); color: #ff6b6d; }
.pf-badge.role-admin { background: var(--blue-soft); color: #9fb3ff; }
.pf-badge.role-vip, .pf-badge.vip { background: rgba(242,199,82,.14); color: var(--gold); }
.pf-badge.rank { background: rgba(136,71,255,.16); color: #b996ff; }
.pf-online { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--green); font-weight: 600; }
.pf-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(79,208,141,.2); }
.pf-offline { font-size: 13px; color: var(--muted); }
.pf-ids { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 0; background: rgba(255,255,255,.07); color: #ddd; font: 500 12px var(--font-t); }
.pf-chip:hover { background: rgba(255,255,255,.12); color: #fff; }
.pf-chip svg { width: 13px; height: 13px; }
.pf-wallet { width: 290px; padding: 18px; border-radius: 14px; background: rgba(22,22,22,.85); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.pf-wallet-lbl { font-size: 12px; color: var(--muted); }
.pf-wallet-val { font: 800 30px var(--font-h); color: var(--gold); margin: 4px 0 14px; }
.pf-wallet-val small { font-size: 16px; }
.pf-wallet-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-tiles { margin-top: 10px; }
.pf-rank { margin-top: 10px; padding: 16px 20px; }
.pf-rank-row { display: flex; align-items: center; gap: 24px; }
.pf-rank-row > div:not(.pf-rank-mid) { display: flex; flex-direction: column; min-width: 140px; }
.pf-rank-row b { font: 600 15px var(--font-h); }
.pf-rank-mid { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.bar { height: 10px; border-radius: 10px; background: var(--card-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--blue), #9b7bff); }
.pf-tabs { display: flex; gap: 6px; margin: 22px 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pf-tabs a { padding: 12px 16px; font-weight: 600; color: #aaa; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pf-tabs a:hover { color: #fff; }
.pf-tabs a.on { color: #fff; border-color: var(--blue); }
.pf-tabs b { margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--card-3); font-size: 11px; }
.pf-tabs b.red { background: rgba(255,77,79,.2); color: #ff6b6d; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { font-weight: 600; text-align: right; }
.pf-cmds { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 16px; font-size: 12px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.inv-card { position: relative; padding: 14px; border-radius: 14px; background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border-bottom: 3px solid var(--rc, #b0c3d9); }
.inv-card img { width: 100%; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.inv-name { font-size: 12px; font-weight: 600; min-height: 32px; }
.inv-date { font-size: 11px; color: var(--muted); }
.inv-eq { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: rgba(79,208,141,.16); color: var(--green); }
.rar-bg-white { --rc: #b0c3d9; } .rar-bg-blue { --rc: #4b69ff; } .rar-bg-purple { --rc: #8847ff; } .rar-bg-pink { --rc: #d32ce6; } .rar-bg-red { --rc: #eb4b4b; } .rar-bg-gold { --rc: #e4ae39; }
.inv-card { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 10%, #1a1a1a) 0%, #1a1a1a 70%); }

/* бонусы */
.bn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.bn-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.bn-card p { font-size: 13px; flex: 1; }
.bn-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; }
.bn-ico.gold { background: rgba(242,199,82,.14); color: var(--gold); } .bn-ico.purple { background: rgba(136,71,255,.16); color: #b996ff; }
.bn-ico svg { width: 26px; height: 26px; }
.bn-title { font: 600 17px var(--font-h); }
.bn-amount { font: 800 26px var(--font-h); color: var(--gold); }
.bn-main { border: 2px solid rgba(242,199,82,.35); }

/* поиск / рейтинг */
.search-big { display: flex; gap: 10px; max-width: 560px; }
.search-big input { height: 48px; }
.search-big .btn-blue { height: 48px; }
.pl-list { display: flex; flex-direction: column; gap: 8px; }
.pl-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.pl-row:hover { background: var(--card-2); color: inherit; }
.pl-row img { width: 46px; height: 46px; border-radius: 10px; }
.pl-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pl-seen { font-size: 12px; }
.lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; align-items: end; }
.lb-pod { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; text-align: center; border-top: 3px solid transparent; }
.lb-pod:hover { color: inherit; background: var(--card-2); }
.lb-pod img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; }
.lb-pod b { font-size: 15px; max-width: 100%; }
.lb-pod span { color: var(--muted); font-size: 13px; }
.lb-pod-place { font: 800 24px var(--font-h); }
.lb-pod.p1 { border-color: var(--p1); padding-top: 34px; } .lb-pod.p1 .lb-pod-place { color: var(--p1); }
.lb-pod.p2 { border-color: var(--p2); } .lb-pod.p2 .lb-pod-place { color: var(--p2); }
.lb-pod.p3 { border-color: var(--p3); } .lb-pod.p3 .lb-pod-place { color: var(--p3); }
.lb-tbl tbody tr { cursor: pointer; }
.lb-n { font: 700 14px var(--font-h); color: #666; width: 48px; }
.lb-n.p1 { color: var(--p1); } .lb-n.p2 { color: var(--p2); } .lb-n.p3 { color: var(--p3); }

/* ---------- скинченджер ---------- */
.sc { display: grid; grid-template-columns: 384px minmax(0,1fr); gap: 10px; align-items: start; }
.sc-left { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 84px; }
.sc-warn { padding: 16px 20px; border-radius: var(--r-card); display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(100deg, rgba(40,52,120,.95), rgba(40,52,120,.55)), url('/img/skinchanger/scbg.png') right center / cover; border: 1px solid rgba(90,125,255,.35); }
.sc-warn b { font: 700 20px var(--font-h); color: #6f8dff; }
.sc-warn span { font-size: 14px; color: #dfe5ff; }
.sc-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.sc-hint { text-align: center; padding: 60px 20px; color: var(--muted); }
.sc-hint svg { width: 56px; height: 56px; opacity: .3; margin-bottom: 10px; }
#scList { display: flex; flex-direction: column; gap: 10px; }
.sc-back-all { height: 38px; border: 0; border-radius: 10px; background: var(--card-2); color: #ddd; font: 500 13px var(--font-t); display: flex; align-items: center; justify-content: center; gap: 6px; }
.sc-back-all svg, .sc-cur button svg { width: 12px; height: 12px; }
.sc-search { display: flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 10px; background: var(--card-2); }
.sc-search input { flex: 1; background: none; border: 0; outline: 0; color: #fff; font: 13px var(--font-t); }
.sc-search svg { width: 16px; height: 16px; color: #888; }
.sc-cur { display: flex; align-items: center; gap: 14px; }
.sc-cur button { height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--card-2); color: #ccc; font: 500 12px var(--font-t); display: flex; align-items: center; gap: 4px; }
.sc-cur b { font: 700 17px var(--font-h); }
.sc-rar { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-rar button { height: 34px; min-width: 52px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card-2); color: var(--c, #fff); font: 600 13px var(--font-t); display: grid; place-items: center; }
.sc-rar button svg { width: 14px; height: 14px; }
.sc-rar button.on { border-color: var(--blue); background: var(--blue-soft); color: var(--c, #fff); }
.sc-rar button[data-c=""].on { color: var(--blue-2); }
.sc-skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: calc(100vh - 380px); min-height: 300px; overflow-y: auto; padding-right: 4px; }
.sc-skin { position: relative; height: 84px; border-radius: 10px; border: 2px solid transparent; padding: 6px 6px 18px; cursor: pointer; overflow: hidden;
  background: radial-gradient(90% 90% at 50% 40%, color-mix(in srgb, var(--c) 30%, #1e1e1e) 0%, color-mix(in srgb, var(--c) 10%, #1a1a1a) 70%); }
.sc-skin:hover { border-color: rgba(255,255,255,.18); }
.sc-skin.on { border-color: var(--blue); }
.sc-skin img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.sc-skin i { position: absolute; left: 7px; bottom: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.sc-skin-name { position: absolute; left: 16px; right: 6px; bottom: 3px; font-size: 9.5px; color: #ddd; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-side { position: absolute; top: 4px; right: 4px; font-size: 9px; padding: 1px 5px; border-radius: 4px; z-index: 1; }
.sc-side.ct { background: #3f66c7; } .sc-side.t { background: #b48a2b; }
.sc-noimg { color: #666; }
.sc-loading { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--muted); }
.sc-right { padding: 16px; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sc-top h2 { font-size: 18px; font-weight: 700; }
.sc-actions { display: flex; gap: 10px; align-items: center; }
.sc-sides { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--card-2); }
.sc-sides button { width: 38px; height: 34px; border-radius: 8px; border: 0; background: none; display: grid; place-items: center; opacity: .5; }
.sc-sides button img { width: 22px; height: 22px; }
.sc-sides button.on { background: var(--card-3); opacity: 1; }
.sc-slots { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.sc-slot { position: relative; aspect-ratio: 190 / 205; border-radius: 12px; border: 1px solid #2a2a2a; background: #161616; color: #6d6d6d; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.sc-slot:hover { border-color: #3a3a3a; background: #1a1a1a; color: #9a9a9a; }
.sc-slot.active { border-color: var(--blue); }
.sc-slot-ico { width: 72%; height: 42%; color: #4a4a4a; }
.sc-slot:hover .sc-slot-ico { color: #5c5c5c; }
.sc-slot-add { font: 500 13px var(--font-t); text-align: center; line-height: 1.4; }
.sc-slot.set { background: radial-gradient(90% 80% at 50% 35%, #232323, #161616); color: #ddd; }
.sc-slot-img { width: 90%; height: 52%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.sc-slot-name { font-size: 11px; color: var(--muted); }
.sc-slot-skin { font-size: 12px; font-weight: 600; text-align: center; color: #fff; padding-bottom: 4px; border-bottom: 2px solid var(--c); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-modal { max-width: 520px; }
.sc-prev { height: 170px; border-radius: 14px; margin-bottom: 14px; display: grid; place-items: center; background: radial-gradient(80% 90% at 50% 50%, color-mix(in srgb, var(--c, #555) 35%, #1e1e1e), #161616); }
.sc-prev img { max-height: 150px; max-width: 90%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
.sc-wears { display: flex; gap: 4px; flex-wrap: wrap; margin: -6px 0 14px; }
.sc-wears button { flex: 1; min-width: 80px; height: 30px; border: 0; border-radius: 7px; background: var(--card-2); color: #bbb; font: 500 10.5px var(--font-t); }
.sc-wears button:hover { background: var(--card-3); color: #fff; }
.sc-lock { flex: 1; min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; background: linear-gradient(180deg, rgba(17,17,17,.55), #111 85%), var(--bg) center / cover; }
.sc-lock-in { max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sc-lock h1 { font-size: 42px; font-weight: 800; }
.sc-lock p { background: rgba(30,30,30,.8); padding: 16px 22px; border-radius: 12px; font-size: 14px; color: #ddd; }

/* ---------- админка ---------- */
.adm { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 16px; align-items: start; }
.adm-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r-card); background: var(--card); margin-top: 12px; }
.adm-me { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.adm-me img { width: 40px; height: 40px; border-radius: 10px; }
.adm-me b { display: block; font-size: 14px; } .adm-me span { font-size: 11px; color: var(--muted); }
.adm-side a { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 10px; color: #cfcfcf; font-weight: 500; }
.adm-side a:hover { background: var(--card-2); color: #fff; }
.adm-side a.on { background: var(--blue-soft); color: #fff; }
.adm-side a svg { width: 16px; height: 16px; }
.adm-back { margin-top: 8px; color: var(--muted) !important; }
.adm-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.adm-main .h1 { margin: 16px 0 6px; }
.adm-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 10px; }
.adm-srv { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.adm-srv:last-child { border-bottom: 0; }
.adm-srv-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.adm-srv-main span { font-size: 12px; }
.adm-online { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.adm-on { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: var(--card-2); font-size: 13px; }
.adm-on img { width: 28px; height: 28px; border-radius: 6px; }
.adm-on .tag { margin-left: auto; }
.adm-console-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-console-head .adm-srv { border: 0; padding: 0; }
.adm-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-out { background: #0c0c0c; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: 12px/1.5 ui-monospace, Consolas, monospace; color: #b8f7c8; max-height: 300px; overflow: auto; white-space: pre-wrap; margin-bottom: 10px; }
.adm-filter { display: flex; gap: 8px; }
.adm-filter input { width: 220px; } .adm-filter select { width: 140px; }

/* ---------- адаптив ---------- */
@media (max-width: 1240px) {
  .hdr-search { display: none; }
  .sc-slots { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .d-stats { grid-template-columns: repeat(3, 1fr); }
  .rv-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rv-card:nth-child(3n) { display: none; }
  .hdr-social { display: none; }
  .sc { grid-template-columns: 330px minmax(0,1fr); }
  .sc-slots { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .hdr-burger { display: flex; }
  .hdr-nav { position: fixed; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 10px 16px 16px; background: #141414; border-bottom: 1px solid var(--line); display: none; }
  body.nav-open .hdr-nav { display: flex; }
  .hdr-link.on::after { display: none; }
  .hdr-drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 0 16px; }
  .hdr-topup span { display: none; }
  .hdr-topup { padding: 0 12px; }
  .d-row, .adm { grid-template-columns: 1fr; }
  .d-top { height: auto; }
  .rv-pager { position: static; justify-content: flex-end; margin-top: 8px; }
  .sc { grid-template-columns: 1fr; }
  .sc-left { position: static; }
  .adm-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .adm-me { display: none; }
  .pf-wallet { width: 100%; }
}
@media (max-width: 640px) {
  .page { padding: 10px 16px 30px; }
  .hdr-in { padding: 0 16px; gap: 10px; height: 64px; }
  .hdr-nav { top: 64px; }
  .hdr-logo { font-size: 18px; }
  .d-hero { grid-template-columns: 1fr; }
  .d-mod { height: 190px; } .d-mod-title { font-size: 30px; }
  .slide { background-size: auto 70%, auto; background-position: right bottom, center; }
  .slide-text { max-width: 100%; padding: 0 16px 60px; }
  .slide-text h3 { font-size: 20px; }
  .d-stats { grid-template-columns: 1fr 1fr; }
  .d-stat { padding: 14px; } .d-stat .ico.xl { display: none; }
  .rv-list { grid-template-columns: 1fr; }
  .rv-card:nth-child(n) { display: flex; }
  .rv-card[hidden] { display: none !important; }
  .pf-cover { padding: 20px; }
  .pf-main { flex-direction: column; align-items: flex-start; }
  .pf-avatar { width: 88px; height: 88px; }
  .pf-name { font-size: 24px; }
  .pf-rank-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .lb-podium { grid-template-columns: 1fr; }
  .sc-slots { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sc-skins { max-height: 60vh; }
  .ftr { width: calc(100% - 32px); }
  .ftr-links { gap: 16px; margin: 0; }
  .tbl { font-size: 12px; } .tbl th, .tbl td { padding: 8px 6px; }
  section.card-box:has(.tbl) { overflow-x: auto; }
  .bonus-pop { right: 12px; width: auto; }
}

/* ---------- пополнение (как у донора) ---------- */
.pay-box { max-width: 900px; padding: 22px; }
.pay-head { display: flex; align-items: center; justify-content: space-between; font: 700 20px var(--font-h); margin-bottom: 18px; }
.pay-head .modal-x { position: static; }
.pay-cols { display: flex; gap: 15px; }
.pay-first { width: 26rem; display: flex; flex-direction: column; gap: 10px; }
.pay-second { width: 23rem; display: flex; flex-direction: column; gap: 10px; }
.pay-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #e6e6e6; }
.pay-lbl svg { width: 15px; height: 15px; color: var(--muted); }
.pay-info { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--orange); background: rgba(246,185,73,.1); padding: 8px 10px; border-radius: 12px; }
.pay-info svg { width: 12px; height: 12px; flex-shrink: 0; fill: var(--orange); }
.pay-gates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-gates input { display: none; }
.pay-gate { position: relative; height: 100px; border-radius: 12px; background: var(--card-2); outline: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .3s, background .3s; overflow: hidden; }
.pay-gate:hover { transform: scale(1.01); background: #2a2a2a; }
.pay-gate img { width: 80%; position: relative; z-index: 1; pointer-events: none; }
.pay-i { position: absolute; top: 8px; right: 8px; z-index: 2; width: 17px; height: 17px; border-radius: 50%; background: #3a3a3a; color: #ddd; font-style: normal; font-weight: 700; font-size: 11px; display: grid; place-items: center; cursor: help; opacity: .8; }
.pay-gates input:checked + .pay-gate::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(to top right, rgba(90,125,255,.25), transparent); outline: 1px solid rgba(90,125,255,.45); animation: popIn .3s; }
.pay-gates input:checked + .pay-gate::after { content: "\2713"; position: absolute; left: 8px; bottom: 8px; width: 15px; height: 15px; border-radius: 50%; outline: 2px solid var(--blue); background: rgba(90,125,255,.1); color: var(--blue); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.pay-first input#paySteam, .pay-num input, .pay-promo input { height: 44px; width: 100%; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: #fff; padding: 0 14px; font: 14px var(--font-t); outline: 0; }
.pay-first input#paySteam:focus, .pay-num input:focus, .pay-promo input:focus { border-color: var(--blue); }
.pay-me { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 8px; border-radius: 10px; background: var(--card-2); }
.pay-me img { width: 30px; height: 30px; border-radius: 7px; }
.pay-me b { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-link { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--card-3); color: #ccc; font: 600 12px var(--font-t); }
.pay-mid { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.pay-mid span { width: 1px; flex: 1; background: rgba(255,255,255,.08); }
.pay-mid i { width: 28px; height: 28px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; margin: 6px 0; color: var(--muted); }
.pay-mid svg { width: 12px; height: 12px; }
.pay-method { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-radius: 12px; background: rgba(255,255,255,.03); min-height: 64px; }
.pay-method::before { content: ""; position: absolute; top: -40%; left: 30%; width: 200px; height: 200px; background: url("/img/pay/wallet.png") no-repeat center / contain; opacity: .45; filter: blur(2px); pointer-events: none; }
.pay-method > div { display: flex; flex-direction: column; position: relative; z-index: 1; }
.pay-method .muted { font-size: 12px; }
.pay-method b { font: 600 16px var(--font-h); }
.pay-method img { width: 80px; position: relative; z-index: 1; }
.pay-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pay-presets button { height: 38px; border-radius: 10px; border: 1px solid transparent; background: var(--card-2); color: #ddd; font: 600 13px var(--font-t); }
.pay-presets button:hover { background: var(--card-3); }
.pay-presets button.on { border-color: var(--blue); background: var(--blue-soft); color: #fff; }
.pay-num { display: flex; gap: 6px; }
.pay-num button { width: 44px; flex-shrink: 0; border: 0; border-radius: 10px; background: var(--card-3); color: #ddd; font-size: 20px; }
.pay-num button:hover { background: #303030; }
.pay-num input { text-align: center; font: 700 16px var(--font-h); -moz-appearance: textfield; }
.pay-num input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pay-promo { position: relative; }
.pay-promo input { padding-right: 48px; text-transform: uppercase; }
.pay-promo input::placeholder { text-transform: none; }
.pay-promo button { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--card-3); color: #aaa; display: grid; place-items: center; }
.pay-promo svg { width: 14px; height: 14px; }
.pay-res { text-align: center; background: rgba(100,206,130,.1); color: var(--green); padding: 6px; border-radius: 8px; font-size: 12px; }
.pay-res.bad { background: rgba(255,77,79,.1); color: #ff6b6d; }
.pay-total { font-size: 13px; color: #ddd; }
.pay-total b { color: var(--gold); font: 700 16px var(--font-h); }
.pay-second hr { border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
.pay-second .chk { margin: 0; font-weight: 500; font-size: 13px; }
.pay-second .chk a { color: var(--blue); }
#payBtn { height: 46px; }
.pay-lbl .q-hint { display: inline-grid; width: 16px; height: 16px; font-size: 11px; }

/* доступ к скинченджеру */
.sc-access { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 12px; border-radius: 12px; background: linear-gradient(100deg, rgba(242,199,82,.12), rgba(242,199,82,.03)); border: 1px solid rgba(242,199,82,.35); }
.sc-access > svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }
.sc-access > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sc-access > div b { font: 600 15px var(--font-h); color: var(--gold); }
.sc-access > div span { font-size: 13px; color: #d8d8d8; }
.sc-access.ok { background: rgba(79,208,141,.08); border-color: rgba(79,208,141,.3); padding: 10px 14px; }
.sc-access.ok > svg { color: var(--green); width: 20px; height: 20px; }
.sc-access.ok > span { flex: 1; font-size: 13px; color: #cfe9da; font-weight: 600; }
.sc-access.flash { animation: scFlash .9s ease 2; }
@keyframes scFlash { 50% { box-shadow: 0 0 0 4px rgba(242,199,82,.35); } }

/* магазин */
.shop-bal { display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--card); }
.shop-bal > div { display: flex; flex-direction: column; }
.shop-bal .muted { font-size: 12px; }
.shop-bal b { font: 700 18px var(--font-h); color: var(--gold); }
.shop-v3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.shop-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.shop-card p { font-size: 13px; }
.shop-card.vip { border: 2px solid rgba(242,199,82,.4); }
.shop-ico { width: 52px; height: 52px; border-radius: 14px; background: rgba(242,199,82,.14); color: var(--gold); display: grid; place-items: center; }
.shop-ico.blue { background: var(--blue-soft); color: var(--blue); }
.shop-ico svg { width: 26px; height: 26px; }
.shop-name { font: 600 17px var(--font-h); }
.shop-perks { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; flex: 1; }
.shop-perks li::before { content: "\2713"; color: var(--green); font-weight: 700; margin-right: 8px; }
.shop-price { font: 800 26px var(--font-h); color: var(--gold); margin-top: auto; }
.shop-price small { font-size: 15px; }
.shop-price .muted { font: 500 13px var(--font-t); }
.legal h3 { font: 600 16px var(--font-h); margin: 18px 0 8px; }
.legal p { color: #d0d0d0; font-size: 14px; margin-bottom: 8px; line-height: 1.6; }

@media (max-width: 960px) {
  .pay-cols { flex-direction: column; }
  .pay-first, .pay-second { width: 100%; }
  .pay-mid { display: none; }
  .pay-presets { grid-template-columns: repeat(3, 1fr); }
  .sc-access { flex-wrap: wrap; }
}

/* ---------- кейсы ---------- */
.rar-gold { --rc: #e4ae39; } .rar-red { --rc: #eb4b4b; } .rar-pink { --rc: #d32ce6; }
.rar-purple { --rc: #8847ff; } .rar-blue { --rc: #4b69ff; } .rar-white { --rc: #b0c3d9; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.cs-card { display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: var(--card); color: #fff; transition: transform .2s, box-shadow .2s; }
.cs-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px color-mix(in srgb, var(--rc) 25%, transparent); color: #fff; }
.cs-cover { position: relative; height: 190px; overflow: hidden;
  background: radial-gradient(70% 90% at 50% 60%, color-mix(in srgb, var(--rc) 35%, #1a1a1a) 0%, #151515 75%); border-bottom: 3px solid var(--rc); }
.cs-cover img, .cd-cover img { position: absolute; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); transition: transform .3s; }
.cs-cov-0 { width: 64%; left: 18%; top: 22%; z-index: 3; }
.cs-cov-1 { width: 46%; left: 2%; top: 12%; z-index: 2; opacity: .75; transform: rotate(-12deg); }
.cs-cov-2 { width: 46%; right: 2%; top: 12%; z-index: 1; opacity: .75; transform: rotate(12deg); }
.cs-card:hover .cs-cov-0 { transform: scale(1.06); }
.cs-count { position: absolute; left: 10px; top: 10px; z-index: 4; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.55); }
.cs-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cs-name { font: 700 17px var(--font-h); }
.cs-desc { font-size: 13px; flex: 1; }
.cs-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cs-price { font: 800 22px var(--font-h); color: var(--gold); }
.cs-price small { font-size: 13px; }
.cs-price.big { font-size: 30px; }
.crumbs { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: 13px; color: var(--muted); }
.crumbs svg { width: 10px; height: 10px; }
.crumbs span { color: #fff; }
.cd-head { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: center; }
.cd-cover { position: relative; height: 230px; border-radius: 14px; overflow: hidden; background: radial-gradient(70% 90% at 50% 60%, #26294a 0%, #151515 75%); }
.cd-info { display: flex; flex-direction: column; gap: 10px; }
.cd-buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.cd-buy .btn-blue, .cd-buy .btn-gold, .cd-buy .btn-steam { height: 48px; padding: 0 24px; font-size: 15px; }
.cd-roll { position: relative; overflow: hidden; margin-top: 10px; padding: 18px 0; }
.cd-track { display: flex; gap: 8px; will-change: transform; padding: 0 8px; }
.cd-track .cd-item { flex: 0 0 150px; }
.cd-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--gold); z-index: 2; box-shadow: 0 0 12px var(--gold); }
.cd-win { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px;
  background: radial-gradient(60% 90% at 50% 40%, color-mix(in srgb, var(--rc, #8847ff) 25%, #1a1a1a), #1a1a1a); animation: popIn .4s; }
.cd-win img { max-width: 320px; width: 70%; filter: drop-shadow(0 14px 20px rgba(0,0,0,.6)); }
.cd-win-name { font: 700 22px var(--font-h); }
.cd-win-rar { color: var(--rc); font-weight: 700; }
.cd-items, .cd-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 20px; }
.cd-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 10px; border-radius: 12px; text-align: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 16%, #1a1a1a) 0%, #1a1a1a 80%); border-bottom: 3px solid var(--rc); }
.cd-item img { width: 100%; height: 86px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.cd-item-name { font-size: 12px; font-weight: 600; line-height: 1.3; min-height: 31px; }
.cd-item-rar { font-size: 11px; color: var(--rc); }
.cd-pct { position: absolute; top: 6px; right: 8px; font-size: 10px; font-weight: 700; color: #bbb; }
a.cd-item:hover { color: #fff; filter: brightness(1.12); }
@media (max-width: 900px) { .cd-head { grid-template-columns: 1fr; } }