/* =========================================================
   Neiron — «живая сеть»: узлы-нейроны на тёмно-фиолетовом,
   палитра модов Neiron, огненный акцент для раздела Rust.
   ========================================================= */
:root {
  --void: #0C0916;
  --ink: #141022;
  --ink-2: #1B1530;
  --ink-3: #241C3E;
  --seam: #2B2342;
  --seam-2: #3D3263;
  --amethyst: #5832AD;
  --amethyst-hi: #6B42CF;
  --amethyst-deep: #361C85;
  --pulse: #9272E6;
  --glow: #C9B8FF;
  --bone: #EEEAF6;
  --ash: #9C95B3;
  --ember: #E2672C;
  --ember-hi: #F07E46;
  --ember-soft: #F5A97C;
  --ok: #52C98E;
  --bad: #F06A7A;

  --accent: var(--amethyst);
  --accent-hi: var(--amethyst-hi);
  --accent-text: var(--glow);
  --accent-line: var(--pulse);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --display: "Dela Gothic One", "Onest", "Inter", system-ui, sans-serif;
  --body: "Onest", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
}
body.game-rust {
  --accent: #C9521D;
  --accent-hi: var(--ember);
  --accent-text: var(--ember-soft);
  --accent-line: var(--ember);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--void); color: var(--bone);
  font: 400 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
/* мягкое свечение за страницей */
body::before {
  content: ""; position: fixed; inset: -20vh -10vw auto auto; width: 70vw; height: 70vh; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(107, 66, 207, .22), transparent);
}
body.game-rust::before { background: radial-gradient(closest-side, rgba(226, 103, 44, .16), transparent); }

a { color: var(--accent-text); text-decoration: none; transition: color .2s; }
a:hover { color: var(--bone); }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -.005em; }
h2 { font-size: clamp(22px, 2.4vw, 28px); }
h3 { font-size: 18px; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-size: .9em; }
::selection { background: var(--amethyst); color: #fff; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }
.muted { color: var(--ash); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 14px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
main { flex: 1; padding: 32px 0 96px; }

/* ---------- переходы между страницами ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.top { view-transition-name: top; }

/* ---------- шапка ---------- */
.top { position: sticky; top: 0; z-index: 30; background: rgba(12, 9, 22, .72); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--seam); }
.top .wrap { display: flex; align-items: center; gap: 18px; height: 70px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--bone); font: 400 20px var(--display); letter-spacing: .02em; }
.logo:hover { color: var(--bone); }
.logo svg { width: 32px; height: 32px; transition: transform .5s var(--spring); }
.logo:hover svg { transform: rotate(-12deg) scale(1.06); }
.switch { position: relative; display: flex; padding: 4px; background: var(--ink); border: 1px solid var(--seam); border-radius: 999px; }
.switch a { position: relative; z-index: 1; padding: 7px 16px; border-radius: 999px; color: var(--ash); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; transition: color .25s; }
.switch a:hover { color: var(--bone); }
.switch a.on { color: #fff; }
.switch .thumb-bg { position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: 999px; background: var(--amethyst); transition: left .45s var(--spring), width .45s var(--spring), background .3s; }
.switch .thumb-bg.rust { background: #C9521D; }
.switch .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(226, 103, 44, .6); animation: beacon 2.4s infinite; }
@keyframes beacon { 70% { box-shadow: 0 0 0 7px rgba(226, 103, 44, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 103, 44, 0); } }
.nav { display: flex; gap: 2px; }
.nav a { position: relative; color: var(--ash); padding: 8px 12px; font-weight: 600; font-size: 15px; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent-text); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover, .nav a.on { color: var(--bone); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
.right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wallet { display: flex; align-items: center; border: 1px solid var(--seam-2); border-radius: 999px; overflow: hidden; background: var(--ink); }
.wallet .sum { padding: 8px 12px 8px 14px; color: var(--bone); font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wallet .topup { padding: 8px 15px; background: var(--amethyst); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; transition: background .2s; }
.wallet .topup:hover { background: var(--amethyst-hi); color: #fff; }
.wallet .topup svg { width: 16px; height: 16px; }
.icon-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--bone); border: 1px solid var(--seam); background: var(--ink); transition: border-color .2s, transform .2s var(--spring); }
.icon-btn:hover { border-color: var(--seam-2); color: var(--bone); transform: translateY(-1px); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn b { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--accent-hi); color: #fff; font-size: 11px; display: grid; place-items: center; animation: pop .5s var(--spring); }
@keyframes pop { from { transform: scale(0); } }

/* меню профиля */
.profile { position: relative; }
.profile > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 10px 3px 3px; border: 1px solid var(--seam); border-radius: 999px; background: var(--ink); transition: border-color .2s; }
.profile > summary::-webkit-details-marker { display: none; }
.profile > summary:hover, .profile[open] > summary { border-color: var(--seam-2); }
.profile .who { font-weight: 600; font-size: 14px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile .chev { display: grid; width: 14px; height: 14px; color: var(--ash); transition: transform .3s var(--ease); }
.profile[open] .chev { transform: rotate(180deg); }
.menu { position: absolute; right: 0; top: calc(100% + 10px); width: 270px; background: rgba(27, 21, 48, .96); backdrop-filter: blur(18px); border: 1px solid var(--seam-2); border-radius: var(--r); padding: 8px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); transform-origin: top right; }
.profile[open] .menu { animation: menu-in .28s var(--spring); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.menu .head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--seam); margin-bottom: 6px; }
.menu .head b { display: block; font-size: 15px; }
.menu .head span { color: var(--ash); font-size: 13px; }
.menu a, .menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: var(--r-sm); color: var(--bone); font: 500 15px var(--body); background: none; border: 0; cursor: pointer; text-align: left; transition: background .15s, padding-left .2s var(--ease); }
.menu a:hover, .menu button:hover { background: var(--ink-3); color: var(--bone); padding-left: 14px; }
.menu svg { width: 18px; height: 18px; color: var(--ash); flex: none; }
.menu .sep { height: 1px; background: var(--seam); margin: 6px 0; }
.menu .danger, .menu .danger svg { color: var(--bad); }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: linear-gradient(140deg, var(--amethyst), var(--amethyst-deep)); flex: none; }
.avatar.lg { width: 44px; height: 44px; }

@media (max-width: 1000px) {
  .top .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .nav { order: 4; flex-basis: 100%; overflow-x: auto; }
  .profile .who { display: none; }
}
@media (max-width: 560px) {
  .switch a { padding: 6px 11px; }
  .wallet .sum { display: none; }
  .logo span { display: none; }
}

/* ---------- кнопки и формы ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid transparent; background: var(--accent); color: #fff; font: 700 15px var(--body); cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; transition: background .2s, border-color .2s, transform .2s var(--spring), box-shadow .3s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn:hover { background: var(--accent-hi); color: #fff; box-shadow: 0 10px 30px -12px var(--accent-hi); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.ghost { background: transparent; border-color: var(--seam-2); color: var(--bone); }
.btn.ghost:hover { border-color: var(--accent-text); background: rgba(201, 184, 255, .06); box-shadow: none; }
.btn.danger { background: transparent; border-color: rgba(240, 106, 122, .4); color: var(--bad); }
.btn.danger:hover { background: rgba(240, 106, 122, .08); box-shadow: none; }
.btn.steam { background: #1B2838; border-color: #2A475E; }
.btn.steam:hover { background: #22364b; box-shadow: none; }
.btn.light { background: #fff; color: var(--amethyst-deep); }
.btn.light:hover { background: var(--bone); color: var(--amethyst-deep); }
.btn.sm { padding: 7px 14px; font-size: 14px; }
.btn.lg { padding: 14px 26px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
form.inline { display: inline; margin: 0; }
label { display: block; font-size: 14px; color: var(--ash); margin-bottom: 6px; font-weight: 500; }
input[type=text], input[type=number], input[type=url], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--seam-2);
  background: rgba(12, 9, 22, .7); color: var(--bone); font: 15px var(--body); transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 4px rgba(201, 184, 255, .14); }
textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
input[type=file] { color: var(--ash); font-size: 14px; max-width: 100%; }
input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--seam-2); background: var(--ink-3); color: var(--bone); font: 600 14px var(--body); cursor: pointer; }
.field { margin-bottom: 16px; }
.hint { color: var(--ash); font-size: 13px; margin-top: 6px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--bone); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }

/* ---------- общие блоки ---------- */
.panel { background: linear-gradient(180deg, var(--ink-2), var(--ink)); border: 1px solid var(--seam); border-radius: var(--r-lg); padding: 24px; }
.panel + .panel { margin-top: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }
.block { margin-top: 64px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.block-head h2 { margin: 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(201, 184, 255, .1); color: var(--glow); white-space: nowrap; }
.tag svg { width: 13px; height: 13px; flex: none; }
.tag.dayz { background: rgba(107, 66, 207, .22); color: var(--glow); }
.tag.rust { background: rgba(226, 103, 44, .16); color: var(--ember-soft); }
.tag.ok { background: rgba(82, 201, 142, .13); color: var(--ok); }
.tag.off { background: rgba(156, 149, 179, .13); color: var(--ash); }
.tag.bad { background: rgba(240, 106, 122, .13); color: var(--bad); }
.ver { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px; font: 600 12.5px var(--mono); color: var(--bone); background: rgba(12, 9, 22, .6); border: 1px solid var(--seam-2); white-space: nowrap; }
.ver.new { border-color: var(--accent-line); color: var(--accent-text); }
.empty { text-align: center; padding: 52px 20px; color: var(--ash); }
.empty h3 { color: var(--bone); }
.flashes { display: grid; gap: 8px; margin-bottom: 24px; }
.flash { padding: 13px 18px; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--seam-2); animation: flash-in .5s var(--spring); }
.flash.ok { border-color: rgba(82, 201, 142, .45); }
.flash.error { border-color: rgba(240, 106, 122, .55); color: #ffc6cc; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-10px); } }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease); }
.back:hover::before { transform: translateX(-3px) rotate(45deg); }

/* ---------- нейросеть ---------- */
.neural { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ---------- главная ---------- */
.hero { position: relative; min-height: min(620px, 82vh); margin: -32px 0 0; padding: 72px 0 40px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.hero .neural { z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 70%, transparent); }
.hero h1 { font-size: clamp(40px, 7vw, 88px); line-height: 1; max-width: 15ch; margin-bottom: 22px; }
.hero h1 .w { display: inline-block; }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ash); max-width: 540px; margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .w { animation: rise .9s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
  .hero .lead, .channels { animation: rise .9s var(--ease) both; }
  .hero .lead { animation-delay: .55s; }
  .channels { animation-delay: .7s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }

.channels { display: flex; gap: 16px; margin-top: 44px; }
.channel { position: relative; flex: 1; min-height: 230px; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); border: 1px solid var(--seam-2); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; color: var(--bone); transition: flex-grow .7s var(--ease), border-color .3s; }
.channel:hover { color: var(--bone); }
@media (min-width: 821px) { .channels:hover .channel { flex-grow: .75; } .channels .channel:hover { flex-grow: 1.4; } }
.channel.dayz { background: radial-gradient(120% 140% at 100% 0%, #43279A 0%, #1E1542 50%, var(--ink) 100%); }
.channel.rust { background: radial-gradient(120% 140% at 100% 0%, #7A3416 0%, #2C1730 50%, var(--ink) 100%); }
.channel.dayz:hover { border-color: var(--glow); }
.channel.rust:hover { border-color: var(--ember-soft); }
.channel .neural { z-index: -1; opacity: .55; transition: opacity .5s; }
.channel:hover .neural { opacity: 1; }
.channel .top-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.channel .name { font: 400 clamp(52px, 7vw, 92px)/.95 var(--display); margin: 18px 0 10px; transition: letter-spacing .7s var(--ease); }
.channel:hover .name { letter-spacing: .02em; }
.channel.dayz .name { color: #fff; text-shadow: 0 0 40px rgba(146, 114, 230, .55); }
.channel.rust .name { color: #FFE6D6; text-shadow: 0 0 40px rgba(226, 103, 44, .5); }
.channel p { color: rgba(238, 234, 246, .78); max-width: 420px; margin: 0; }
.channel .go { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-weight: 700; }
.channel .arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); transition: transform .5s var(--spring), background .3s; }
.channel .arrow svg { width: 20px; height: 20px; }
.channel:hover .arrow { transform: translateX(6px); background: rgba(255, 255, 255, .2); }
@media (max-width: 820px) { .channels { flex-direction: column; } }

/* лента обновлений: линия с узлами */
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 28px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--pulse), rgba(146, 114, 230, .08)); }
.timeline li { position: relative; padding: 0 0 22px; }
.timeline li::before { content: ""; position: absolute; left: -26px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--void); border: 2px solid var(--pulse); }
.timeline li.rust::before { border-color: var(--ember); }
.timeline li:first-child::before { background: var(--glow); box-shadow: 0 0 0 5px rgba(201, 184, 255, .14); }
.timeline .line1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timeline .line1 a { color: var(--bone); font-weight: 700; font-size: 17px; }
.timeline .line1 a:hover { color: var(--accent-text); }
.timeline .when { color: var(--ash); font-size: 13px; }
.timeline .note { color: var(--ash); font-size: 15px; margin: 4px 0 0; max-width: 64ch; }

/* ---------- шапка раздела ---------- */
.section-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); border: 1px solid var(--seam-2); padding: clamp(28px, 5vw, 56px); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
.section-hero.dayz { background: radial-gradient(110% 130% at 85% 0%, #43279A 0%, #1C1340 55%, var(--ink) 100%); }
.section-hero.rust { background: radial-gradient(110% 130% at 85% 0%, #7A3416 0%, #2C1730 55%, var(--ink) 100%); }
.section-hero .neural { z-index: -1; }
.section-hero h1 { font-size: clamp(54px, 10vw, 120px); line-height: .95; margin-bottom: 14px; }
.section-hero.dayz h1 { text-shadow: 0 0 50px rgba(146, 114, 230, .5); }
.section-hero.rust h1 { color: #FFE6D6; text-shadow: 0 0 50px rgba(226, 103, 44, .45); }
.section-hero p { color: rgba(238, 234, 246, .82); font-size: 18px; max-width: 560px; }
.section-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.preview-note { margin-bottom: 18px; }

/* панель поиска */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.toolbar .search { position: relative; flex: 1 1 260px; }
.toolbar .search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ash); }
.toolbar .search input { padding-left: 42px; border-radius: 999px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--seam-2); color: var(--ash); font-weight: 600; font-size: 14px; transition: all .2s; }
.chips a:hover { color: var(--bone); border-color: var(--accent-text); }
.chips a.on { color: #fff; background: var(--accent); border-color: transparent; }

/* ---------- карточки модов ---------- */
.mod-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--seam); background: var(--ink); transition: border-color .3s, transform .5s var(--ease), box-shadow .5s var(--ease); }
.mod-card:hover { border-color: var(--seam-2); transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(107, 66, 207, .55); }
.game-rust .mod-card:hover { box-shadow: 0 24px 50px -24px rgba(226, 103, 44, .45); }
.mod-card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 184, 255, .14), transparent 60%); opacity: 0; transition: opacity .3s; }
.mod-card:hover::before { opacity: 1; }
.cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(120% 120% at 80% 0%, var(--amethyst) 0%, var(--amethyst-deep) 45%, var(--ink) 100%); display: grid; place-items: center; }
.cover.rust { background: radial-gradient(120% 120% at 80% 0%, #C9521D 0%, #5A2410 45%, var(--ink) 100%); }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.mod-card:hover .cover img { transform: scale(1.06); }
.cover .letter { font: 400 64px var(--display); color: rgba(255, 255, 255, .85); }
.cover .badges { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; gap: 8px; }
.cover .badges .tag, .cover .badges .ver { background: rgba(12, 9, 22, .72); backdrop-filter: blur(8px); }
.mod-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.mod-body h3 { margin: 0; font-size: 19px; }
.mod-body h3 a { color: var(--bone); }
.mod-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mod-body p { flex: 1; margin: 0; color: var(--ash); font-size: 15px; }
.mod-body .updated { color: var(--ash); font-size: 13px; }
.mod-foot { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.price { font: 700 21px var(--body); color: var(--bone); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price.free { color: var(--ok); }

/* ---------- страница мода ---------- */
.mod-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); gap: 32px; align-items: start; }
@media (max-width: 920px) { .mod-layout { grid-template-columns: 1fr; } }
.stage { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--seam-2); background: #08060F; aspect-ratio: 16 / 9; display: grid; }
.stage > * { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; border: 0; }
.stage .fade-in { animation: stage-in .5s var(--ease); }
@keyframes stage-in { from { opacity: 0; transform: scale(1.02); } }
.thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding: 2px 2px 6px; }
.thumb { position: relative; flex: none; width: 116px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--ink-2); padding: 0; opacity: .6; transition: opacity .25s, border-color .25s, transform .3s var(--spring); }
.thumb:hover { opacity: 1; transform: translateY(-2px); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; }
.thumb.on { border-color: var(--accent-text); opacity: 1; }
.thumb .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 9, 22, .35); color: #fff; }
.thumb .play svg { width: 26px; height: 26px; }
.buy { position: sticky; top: 92px; }
.buy .price { font-size: 34px; margin: 8px 0 4px; }
.buy .short { color: var(--ash); margin-bottom: 18px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 20px 0 0; font-size: 14px; }
.facts dt { color: var(--ash); }
.facts dd { margin: 0; }
.tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--seam); margin: 40px 0 24px; }
.tabs button { padding: 12px 16px; background: none; border: 0; color: var(--ash); font: 700 16px var(--body); cursor: pointer; transition: color .2s; display: flex; align-items: center; gap: 8px; }
.tabs button:hover, .tabs button[aria-selected=true] { color: var(--bone); }
.tabs .count { padding: 1px 8px; border-radius: 999px; background: var(--ink-3); font-size: 12px; }
.tabs .ink { position: absolute; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent-text); transition: left .45s var(--spring), width .45s var(--spring); }
.tabpanel[hidden] { display: none; }
.tabpanel { animation: rise .45s var(--ease); }
.prose { font-size: 17px; max-width: 72ch; }
.prose h3 { font-size: 20px; margin: 1.6em 0 .5em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent-text); }
.releases { display: grid; gap: 14px; }
.release { border: 1px solid var(--seam); border-radius: var(--r-lg); background: var(--ink); padding: 18px 20px; }
.release.latest { border-color: var(--seam-2); background: linear-gradient(140deg, rgba(88, 50, 173, .22), var(--ink) 60%); }
.release .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.release .head .ver { font-size: 14px; }
.release .prose { font-size: 15px; color: var(--ash); }
.release .prose p:last-child, .release .prose ul:last-child { margin-bottom: 0; }

/* ---------- новости ---------- */
.news-list { display: grid; gap: 14px; }
.news-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--seam); background: var(--ink); color: var(--bone); transition: border-color .25s, transform .4s var(--ease); }
.news-card:hover { border-color: var(--seam-2); color: var(--bone); transform: translateX(4px); }
.news-card .pic { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: radial-gradient(120% 120% at 80% 0%, var(--amethyst) 0%, var(--amethyst-deep) 60%, var(--ink) 100%); display: grid; place-items: center; }
.news-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.news-card .pic svg { width: 38px; height: 38px; color: rgba(255, 255, 255, .7); }
.news-card h3 { margin: 6px 0; }
.news-card p { color: var(--ash); margin: 0; font-size: 15px; }
.news-card .when { display: flex; align-items: center; gap: 8px; color: var(--ash); font-size: 13px; }
@media (max-width: 560px) { .news-card { grid-template-columns: 1fr; } .news-card .pic.empty { display: none; } }
.article { max-width: 780px; }
.article .cover-img { border-radius: var(--r-lg); margin: 8px 0 28px; border: 1px solid var(--seam); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.filters a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--seam-2); color: var(--ash); font-weight: 600; font-size: 14px; transition: all .2s; }
.filters a.on { color: #fff; background: var(--amethyst); border-color: transparent; }
.filters a:hover { color: var(--bone); border-color: var(--accent-text); }

/* ---------- розыгрыши ---------- */
.ga-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r-lg); color: var(--bone); border: 1px solid var(--seam-2); background: linear-gradient(140deg, rgba(88, 50, 173, .38), var(--ink) 58%); overflow: hidden; transition: border-color .3s, transform .5s var(--ease); }
.ga-card.rust { background: linear-gradient(140deg, rgba(201, 82, 29, .32), var(--ink) 58%); }
.ga-card:hover { color: var(--bone); border-color: var(--accent-text); transform: translateY(-3px); }
.ga-card h3 { margin: 0; }
.ga-card .prize { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.ga-card .prize svg { width: 22px; height: 22px; color: var(--glow); flex: none; }
.ga-card.rust .prize svg { color: var(--ember-soft); }
.ga-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--ash); font-size: 14px; margin-top: auto; padding-top: 6px; }
.timer { font: 600 15px var(--mono); color: var(--bone); font-variant-numeric: tabular-nums; }
.timer-big { font: 600 clamp(24px, 4vw, 34px) var(--mono); color: var(--bone); font-variant-numeric: tabular-nums; margin: 4px 0 10px; }
.winner { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--bone); }

/* ---------- «в разработке» ---------- */
.soon { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); border: 1px solid var(--seam-2); padding: clamp(32px, 7vw, 84px); min-height: 520px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(110% 130% at 80% 0%, #7A3416 0%, #2C1730 55%, var(--ink) 100%); }
.soon .neural { z-index: -1; }
.soon h1 { font-size: clamp(64px, 13vw, 150px); line-height: .95; margin-bottom: 18px; color: #FFE6D6; text-shadow: 0 0 60px rgba(226, 103, 44, .5); }
.soon .lead { font-size: 20px; max-width: 560px; color: rgba(255, 236, 225, .88); }
.progress { width: min(420px, 100%); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 26px 0 10px; }
.progress span { display: block; height: 100%; width: 35%; border-radius: inherit; background: linear-gradient(90deg, #C9521D, var(--ember-soft)); }
@media (prefers-reduced-motion: no-preference) { .progress span { animation: work 3s ease-in-out infinite alternate; } }
@keyframes work { from { width: 22%; } to { width: 52%; } }

/* ---------- таблицы, ключи, кабинет ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; color: var(--ash); font-weight: 500; font-size: 13px; padding: 8px 12px; border-bottom: 1px solid var(--seam); }
.table td { padding: 13px 12px; border-bottom: 1px solid var(--seam); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr { transition: background .15s; }
.table tr:hover td { background: rgba(201, 184, 255, .025); }
.table .num { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.plus { color: var(--ok); }
.minus { color: var(--bad); }
.key-card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: 24px; border: 1px solid var(--seam-2); background: radial-gradient(120% 140% at 100% 0%, rgba(107, 66, 207, .45), var(--ink) 62%); }
.key-card.rust { background: radial-gradient(120% 140% at 100% 0%, rgba(201, 82, 29, .38), var(--ink) 62%); }
.key-card .neural { z-index: -1; opacity: .5; }
.key { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border-radius: var(--r); background: rgba(8, 6, 15, .7); border: 1px dashed var(--seam-2); }
.key code { flex: 1 1 260px; font: 600 clamp(15px, 1.8vw, 18px) var(--mono); color: var(--bone); letter-spacing: .03em; overflow-wrap: anywhere; }
.facts.inline { margin: 0 0 14px; }
.files { list-style: none; margin: 12px 0 0; padding: 0; }
.files li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--seam); font-size: 14px; }
.files li > span { min-width: 0; overflow-wrap: anywhere; }
.owned { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; border-radius: var(--r-lg); background: var(--ink); border: 1px solid var(--seam); }
.owned.updated { border-color: var(--accent-line); box-shadow: 0 0 0 4px rgba(146, 114, 230, .1); }
.owned .cover { border-radius: var(--r); aspect-ratio: 1; }
.owned .cover .letter { font-size: 32px; }
.owned .cover .badges { display: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat { padding: 18px; border-radius: var(--r-lg); background: var(--ink); border: 1px solid var(--seam); color: var(--bone); }
.stat:hover { color: var(--bone); }
.stat span { color: var(--ash); font-size: 13px; }
.stat b { display: block; margin-top: 4px; font: 700 26px var(--body); font-variant-numeric: tabular-nums; }
.wallet-hero { position: relative; overflow: hidden; isolation: isolate; padding: 28px; border-radius: var(--r-lg); background: linear-gradient(140deg, var(--amethyst) 0%, var(--amethyst-deep) 60%, #221450 100%); border: 1px solid rgba(201, 184, 255, .35); }
.wallet-hero .neural { z-index: -1; opacity: .5; }
.wallet-hero .big { font: 400 clamp(36px, 5vw, 50px) var(--display); margin: 2px 0 18px; }
.wallet-hero label { color: rgba(255, 255, 255, .82); }
.wallet-hero input { background: rgba(8, 6, 15, .45); border-color: rgba(255, 255, 255, .25); }
.presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.presets button { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; font: 600 14px var(--body); cursor: pointer; transition: background .2s, transform .2s var(--spring); }
.presets button:hover { background: rgba(255, 255, 255, .16); }
.presets button:active { transform: scale(.94); }

/* ---------- админка ---------- */
.admin { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.admin-nav { position: sticky; top: 92px; display: grid; gap: 2px; }
.admin-nav a { padding: 9px 12px; border-radius: var(--r-sm); color: var(--ash); font-weight: 600; transition: background .15s, color .15s; }
.admin-nav a:hover, .admin-nav a.on { color: var(--bone); background: var(--ink-2); }
@media (max-width: 820px) { .admin { grid-template-columns: 1fr; } .admin-nav { position: static; display: flex; overflow-x: auto; } }
.sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 24px; }
.sec { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--seam-2); }
.sec.dayz { background: linear-gradient(140deg, rgba(88, 50, 173, .35), var(--ink) 60%); }
.sec.rust { background: linear-gradient(140deg, rgba(201, 82, 29, .3), var(--ink) 60%); }
.sec h3 { margin-bottom: 6px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(8, 6, 15, .5); border: 1px solid var(--seam); margin-top: 10px; }
.seg button { padding: 6px 12px; border-radius: 999px; border: 0; background: none; color: var(--ash); font: 600 13px var(--body); cursor: pointer; transition: all .25s; }
.seg button.on { background: var(--bone); color: var(--void); }
.gallery-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.gal-item { border-radius: var(--r); overflow: hidden; border: 1px solid var(--seam); background: var(--ink); }
.gal-item .media { aspect-ratio: 16 / 9; background: #08060F; }
.gal-item .media img, .gal-item .media video { width: 100%; height: 100%; object-fit: cover; }
.gal-item .bar { display: flex; gap: 4px; padding: 6px; flex-wrap: wrap; }
.gal-item .bar .btn { padding: 4px 9px; font-size: 12px; }
.drop { border: 1.5px dashed var(--seam-2); border-radius: var(--r-lg); padding: 20px; background: rgba(8, 6, 15, .35); transition: border-color .2s, background .2s; }
.drop.over { border-color: var(--accent-text); background: rgba(201, 184, 255, .06); }

footer { border-top: 1px solid var(--seam); padding: 28px 0; color: var(--ash); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--ash); }
footer a:hover { color: var(--bone); }

/* ---------- плавность и доступность ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}