/* RUSTX — публичная часть сайта-магазина. Стиль по мотивам play.rustx.ru (тёмный фон, ржаво-оранжевый акцент). */
:root {
  --amber: 24 85% 53%;
  --amber-dim: 24 85% 38%;
  --yellow: 42 95% 55%;
  --green: 142 65% 45%;
  --red: 0 72% 55%;
  --bg: hsl(0 0% 4%);
  --fg: hsl(30 10% 95%);
  --muted: hsl(30 5% 60%);
  --soft: hsl(30 6% 75%);
  --line: hsl(0 0% 20%);
  --card: hsl(0 0% 7%);
  --radius: .75rem;
  --f-display: "Oswald", "Impact", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; background: var(--bg); color: var(--fg);
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 .75rem; }
code, .mono { font-family: var(--f-mono); }
[id] { scroll-margin-top: 90px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--muted); }
.accent { color: hsl(var(--amber)); }
.ok { color: hsl(var(--green)); }
.bad { color: hsl(var(--red)); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Заголовки ---------- */
.h-display {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; line-height: .98;
}
.h-display .accent { text-shadow: 0 0 40px hsl(var(--amber) / .5); }
.h1 { font-size: clamp(2.2rem, 6vw, 4.5rem); margin-bottom: 1.25rem; }
.h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); margin-bottom: 1.5rem; }
.h3 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; letter-spacing: .02em; line-height: 1.15; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
  font: 600 .75rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--amber));
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: hsl(var(--amber)); }
.lead { font-size: 1.12rem; color: hsl(30 6% 78%); max-width: 680px; line-height: 1.55; margin-bottom: 1.75rem; }
.lead strong { color: #fff; }

/* ---------- Шапка ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: hsl(0 0% 4% / .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(0 0% 20% / .6);
}
.header-in { display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.5rem var(--f-display); letter-spacing: .04em; flex-shrink: 0; }
.logo img { width: 32px; height: 32px; border-radius: 6px; box-shadow: 0 0 24px hsl(var(--amber) / .45); }
.logo .x { color: hsl(var(--amber)); }
.nav { display: flex; align-items: center; gap: 1.6rem; flex: 1; }
.nav a {
  font: 600 .9rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: hsl(30 8% 82%);
  padding: .3rem 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:hover, .nav a.active { color: #fff; border-bottom-color: hsl(var(--amber)); }
.userbar { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.userbar form { margin: 0; }
.user-chip { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; max-width: 220px; }
.user-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); background: hsl(0 0% 12%); display: inline-grid; place-items: center; font: 700 .95rem var(--f-display); color: hsl(var(--amber)); }
.avatar.lg { width: 72px; height: 72px; border-radius: 10px; font-size: 2rem; }
.balance-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px;
  background: hsl(var(--amber) / .12); border: 1px solid hsl(var(--amber) / .4); color: hsl(var(--amber));
  font: 700 .82rem var(--f-mono); white-space: nowrap;
}
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: .5rem; width: 42px; height: 42px; color: var(--fg); cursor: pointer; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: currentColor; margin: 0 auto; position: relative; transition: transform .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .header-in { flex-wrap: wrap; height: auto; min-height: 60px; gap: 0 1rem; padding: .6rem 0; }
  .nav, .userbar { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: .25rem; }
  .menu-open .nav, .menu-open .userbar { display: flex; }
  .nav { padding-top: .75rem; }
  .nav a { padding: .65rem 0; border-bottom: 1px solid hsl(0 0% 15%); }
  .userbar { margin: .5rem 0 .4rem; gap: .6rem; }
  .userbar .btn { width: 100%; }
  .user-chip { max-width: none; }
}

/* ---------- Flash ---------- */
.flash { border-bottom: 1px solid; font-size: .95rem; }
.flash .container { display: flex; align-items: center; gap: .75rem; padding-top: .75rem; padding-bottom: .75rem; }
.flash-ok { background: hsl(var(--green) / .1); border-color: hsl(var(--green) / .4); }
.flash-ok .flash-ico { color: hsl(var(--green)); }
.flash-error { background: hsl(var(--red) / .1); border-color: hsl(var(--red) / .45); }
.flash-error .flash-ico { color: hsl(var(--red)); }
.flash-ico { font: 700 1.1rem var(--f-display); }
.flash-text { flex: 1; }
.flash-close { background: none; border: 0; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: .5rem; border: 1px solid transparent; max-width: 100%;
  font: 700 .95rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; line-height: 1.2;
  cursor: pointer; transition: all .2s ease; text-align: center; color: var(--fg); background: none;
}
.btn svg { flex-shrink: 0; }
.btn-primary {
  background: linear-gradient(180deg, hsl(24 90% 58%) 0%, hsl(24 85% 48%) 100%); color: #fff;
  box-shadow: 0 0 0 1px hsl(24 95% 60% / .5) inset, 0 8px 24px -8px hsl(var(--amber) / .6), 0 0 32px -8px hsl(var(--amber) / .5);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px hsl(24 95% 65% / .7) inset, 0 12px 32px -8px hsl(var(--amber) / .7), 0 0 40px -4px hsl(var(--amber) / .6); }
.btn-ghost { background: hsl(0 0% 8% / .7); border-color: hsl(0 0% 25%); }
.btn-ghost:hover { background: hsl(0 0% 12% / .9); border-color: hsl(var(--amber) / .6); }
.btn-steam { background: linear-gradient(180deg, hsl(210 25% 22%) 0%, hsl(212 30% 15%) 100%); border-color: hsl(210 25% 32%); }
.btn-steam:hover { border-color: hsl(var(--amber) / .6); }
.btn-sm { padding: .5rem .85rem; font-size: .8rem; }
.btn-lg { padding: 1rem 1.75rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.link { color: hsl(var(--amber)); border-bottom: 1px dashed currentColor; }
.link:hover { color: hsl(24 95% 65%); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid hsl(0 0% 14%); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, hsl(0 0% 4% / .95) 0%, hsl(0 0% 4% / .8) 45%, hsl(0 0% 4% / .35) 100%),
              linear-gradient(0deg, hsl(0 0% 4%) 0%, transparent 35%),
              radial-gradient(ellipse at 75% 20%, hsl(24 85% 35% / .3), transparent 55%),
              url("/static/img/hero-bg.jpg") center 30% / cover no-repeat;
  background: linear-gradient(90deg, hsl(0 0% 4% / .95) 0%, hsl(0 0% 4% / .8) 45%, hsl(0 0% 4% / .35) 100%),
              linear-gradient(0deg, hsl(0 0% 4%) 0%, transparent 35%),
              radial-gradient(ellipse at 75% 20%, hsl(24 85% 35% / .3), transparent 55%),
              image-set(url("/static/img/hero-bg.webp") type("image/webp"), url("/static/img/hero-bg.jpg") type("image/jpeg")) center 30% / cover no-repeat;
}
.hero-lands::before {
  background: linear-gradient(90deg, hsl(0 0% 4% / .95) 0%, hsl(0 0% 4% / .75) 50%, hsl(0 0% 4% / .3) 100%),
              linear-gradient(0deg, hsl(0 0% 4%) 0%, transparent 35%),
              image-set(url("/static/img/bg-3.webp") type("image/webp"), url("/static/img/bg-3.jpg") type("image/jpeg")) center / cover no-repeat;
}
@media (max-width: 720px) { .hero::before { background-position: 70% 30%; } }
.usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin: 0 0 2rem; max-width: 860px; }
.usp div { background: hsl(0 0% 6% / .75); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; backdrop-filter: blur(4px); }
.usp b { display: block; font: 700 1.05rem var(--f-display); letter-spacing: .02em; color: var(--fg); margin-bottom: .15rem; }
.usp span { font-size: .85rem; color: var(--muted); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(hsl(0 0% 100% / .04) 1px, transparent 1px), linear-gradient(90deg, hsl(0 0% 100% / .04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}
.hero-in { padding: 4.5rem 0 3.5rem; max-width: 900px; }
.hero-sm .hero-in { padding: 2.75rem 0 2.25rem; }
.pills { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 999px;
  background: hsl(0 0% 8% / .8); border: 1px solid hsl(0 0% 22%); color: hsl(30 8% 75%);
  font: 600 .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
}
.pill-live { border-color: hsl(var(--green) / .5); color: hsl(var(--green)); }
.pill-amber { border-color: hsl(var(--amber) / .5); color: hsl(var(--amber)); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--green)); flex-shrink: 0; animation: pulse 1.6s infinite; }
.dot.off { background: hsl(0 0% 40%); animation: none; }
.dot.sm { width: 6px; height: 6px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 hsl(var(--green) / .6); } 70% { box-shadow: 0 0 0 8px hsl(var(--green) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--green) / 0); } }
.breadcrumbs { font: .75rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.breadcrumbs a:hover { color: hsl(var(--amber)); }

/* ---------- Секции ---------- */
.section { position: relative; padding: 4.5rem 0; }
.section-sm { padding: 2.5rem 0; }
.section-alt { background: hsl(0 0% 5%); border-top: 1px solid hsl(0 0% 12%); border-bottom: 1px solid hsl(0 0% 12%); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.section-head .h2 { margin-bottom: 0; }
.section-note { font: .8rem var(--f-mono); color: var(--muted); letter-spacing: .06em; text-align: right; }
.grid { display: grid; gap: 1.25rem; }
.grid > *, .layout-side > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.layout-side { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .layout-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .section { padding: 3rem 0; } .section-note { text-align: left; } }

/* ---------- Карточки ---------- */
.card { background: linear-gradient(180deg, hsl(0 0% 8%) 0%, hsl(0 0% 5.5%) 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.card + .card { margin-top: 1.25rem; }
.grid > .card + .card, .layout-side > .card + .card { margin-top: 0; }
.card-title { font: 700 1.1rem var(--f-display); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.card-accent { border-color: hsl(var(--amber) / .5); background: radial-gradient(ellipse at 100% 0%, hsl(24 85% 20% / .35), transparent 60%), linear-gradient(180deg, hsl(0 0% 8%) 0%, hsl(0 0% 5%) 100%); }
.sticky { position: sticky; top: 84px; }

/* Карточка сервера */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; }
.server-card {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: linear-gradient(180deg, hsl(0 0% 8%) 0%, hsl(0 0% 5%) 100%);
  border: 1px solid var(--line); border-radius: 1rem; transition: all .25s ease;
}
.server-card:hover { border-color: hsl(var(--amber) / .6); transform: translateY(-2px); box-shadow: 0 24px 48px -20px hsl(var(--amber) / .35); }
.server-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1.25rem;
  background: hsl(0 0% 0% / .4); border-bottom: 1px solid var(--line);
  font: .7rem var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.server-bar > span { display: inline-flex; align-items: center; gap: .5rem; }
.server-body { padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.server-desc { color: hsl(30 6% 72%); font-size: .92rem; margin: 0; }
.server-meta { display: grid; gap: .5rem; font-size: .85rem; }
.server-meta > div { display: flex; justify-content: space-between; gap: .75rem; }
.server-meta dt { color: var(--muted); font: .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding-top: .15rem; }
.server-meta dd { margin: 0; text-align: right; }
.server-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: auto; }
.online-bar { height: 4px; background: hsl(0 0% 14%); border-radius: 2px; overflow: hidden; }
.online-bar i { display: block; height: 100%; background: linear-gradient(90deg, hsl(var(--green)), hsl(var(--amber))); border-radius: 2px; }
.badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
  background: hsl(var(--amber) / .15); border: 1px solid hsl(var(--amber) / .45); color: hsl(var(--amber));
  font: 700 .68rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
}
.badge-green { background: hsl(var(--green) / .12); border-color: hsl(var(--green) / .45); color: hsl(var(--green)); }
.badge-gray { background: hsl(0 0% 14%); border-color: hsl(0 0% 26%); color: hsl(30 8% 78%); }
.badge-red { background: hsl(var(--red) / .12); border-color: hsl(var(--red) / .45); color: hsl(var(--red)); }
.badge-yellow { background: hsl(var(--yellow) / .12); border-color: hsl(var(--yellow) / .45); color: hsl(var(--yellow)); }

/* Адрес connect */
.ip-bar { display: flex; align-items: center; gap: .5rem; background: hsl(0 0% 0% / .6); border: 1px solid var(--line); border-radius: .5rem; padding: .4rem .4rem .4rem .75rem; min-width: 0; }
.ip-bar code { flex: 1; font-size: .82rem; color: hsl(30 8% 80%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.copy-btn {
  padding: .4rem .65rem; background: hsl(0 0% 12%); border: 1px solid hsl(0 0% 22%); border-radius: .35rem; color: hsl(30 8% 80%);
  font: .7rem var(--f-mono); cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; white-space: nowrap;
}
.copy-btn:hover { background: hsl(var(--amber) / .2); border-color: hsl(var(--amber) / .5); color: hsl(var(--amber)); }
.copy-btn.copied { background: hsl(var(--green) / .2); border-color: hsl(var(--green) / .6); color: hsl(var(--green)); }

/* PvE-баннер */
.pve-banner {
  position: relative; overflow: hidden; border-radius: 1rem; padding: 2.25rem; border: 1px solid hsl(var(--green) / .35);
  background: radial-gradient(ellipse at 85% 15%, hsl(142 50% 20% / .35), transparent 60%), radial-gradient(ellipse at 10% 90%, hsl(24 85% 18% / .3), transparent 55%), linear-gradient(180deg, hsl(0 0% 7%) 0%, hsl(0 0% 4%) 100%);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center;
}
.pve-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(-45deg, transparent 0 18px, hsl(var(--green) / .04) 18px 19px); }
.pve-banner > * { position: relative; min-width: 0; }
@media (max-width: 820px) { .pve-banner { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; gap: 1.25rem; } }

/* Списки преимуществ / шаги */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.ticks li { position: relative; padding-left: 1.6rem; color: hsl(30 6% 80%); font-size: .95rem; }
.ticks li::before { content: ""; position: absolute; left: .15rem; top: .45rem; width: .7rem; height: .4rem; border-left: 2px solid hsl(var(--amber)); border-bottom: 2px solid hsl(var(--amber)); transform: rotate(-45deg); }
.ticks.cross li::before { border: 0; width: auto; height: auto; transform: none; top: 0; content: "×"; color: hsl(var(--red)); font: 700 1.1rem var(--f-display); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; counter-reset: s; }
.steps li { min-width: 0; position: relative; padding: 1rem 1rem 1rem 3.6rem; background: hsl(0 0% 0% / .35); border: 1px solid hsl(0 0% 20%); border-radius: .6rem; counter-increment: s; }
.steps li::before {
  content: counter(s); position: absolute; left: 1rem; top: .95rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  background: hsl(var(--amber) / .15); border: 1px solid hsl(var(--amber) / .5); color: hsl(var(--amber)); border-radius: .4rem; font: 700 1rem var(--f-display);
}
.steps b { display: block; font: 600 .98rem var(--f-display); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
.steps span { color: hsl(30 5% 65%); font-size: .88rem; }
.steps .ip-bar { margin-top: .5rem; }

/* Текст из markdown-описаний */
.prose { color: hsl(30 6% 80%); font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.prose h3 { font: 700 1.3rem var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: var(--fg); margin: 1.6rem 0 .7rem; }
.prose h4 { font: 600 1.05rem var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--amber)); margin: 1.2rem 0 .5rem; }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; margin: 0 0 .9rem; }
.prose li { margin-bottom: .3rem; }
.prose li::marker { color: hsl(var(--amber)); }
.prose strong { color: #fff; }
.prose code { background: hsl(0 0% 12%); padding: .1rem .35rem; border-radius: .3rem; font-size: .88em; }

/* ---------- Магазин ---------- */
.tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tab {
  flex-shrink: 0; padding: .55rem 1rem; border-radius: .5rem; border: 1px solid hsl(0 0% 22%); background: hsl(0 0% 8%);
  font: 600 .88rem var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: hsl(30 8% 80%); transition: all .15s;
}
.tab:hover { border-color: hsl(var(--amber) / .55); color: #fff; }
.tab.active { background: hsl(var(--amber) / .16); border-color: hsl(var(--amber) / .7); color: hsl(var(--amber)); }
.tab-green.active, .tab-green:hover { border-color: hsl(var(--green) / .6); color: hsl(var(--green)); background: hsl(var(--green) / .1); }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
.chip { padding: .3rem .7rem; border-radius: 999px; background: hsl(0 0% 11%); border: 1px solid hsl(0 0% 22%); font-size: .8rem; color: hsl(30 8% 78%); }
.chip:hover { border-color: hsl(var(--amber) / .5); color: hsl(var(--amber)); }
.cat { margin-top: 2.5rem; }
.cat:first-child { margin-top: 0; }
.cat-title { display: flex; align-items: center; gap: .75rem; font: 700 1.4rem var(--f-display); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1.1rem; }
.cat-title small { font: .75rem var(--f-mono); color: var(--muted); letter-spacing: .08em; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.product {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: linear-gradient(180deg, hsl(0 0% 8.5%) 0%, hsl(0 0% 5.5%) 100%); border: 1px solid var(--line); border-radius: .85rem; transition: all .2s ease;
}
.product:hover { border-color: hsl(var(--amber) / .6); transform: translateY(-2px); box-shadow: 0 18px 40px -20px hsl(var(--amber) / .4); }
.product.soldout { opacity: .6; }
.product-img { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, hsl(24 40% 14%) 0%, hsl(0 0% 6%) 70%); border-bottom: 1px solid hsl(0 0% 15%); }
.product-img img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 10px 18px hsl(0 0% 0% / .6)); }
.product-img .badge { position: absolute; top: .6rem; }
.product-img .b-l { left: .6rem; } .product-img .b-r { right: .6rem; }
.ph { display: grid; place-items: center; width: 56%; aspect-ratio: 1 / 1; border-radius: 1rem; border: 1px dashed hsl(var(--amber) / .35); color: hsl(var(--amber) / .7); background: hsl(0 0% 0% / .25); }
.ph svg { width: 44%; height: 44%; }
.product-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product-title { font: 600 1rem var(--f-display); text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; }
.product-kind { font: .68rem var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.price b { font: 700 1.25rem var(--f-display); color: #fff; letter-spacing: .02em; }
.price s { color: var(--muted); font-size: .85rem; }
.price-lg b { font-size: 2.2rem; }
.price-lg s { font-size: 1.05rem; }
.empty { text-align: center; padding: 3rem 1.5rem; border: 1px dashed hsl(0 0% 24%); border-radius: 1rem; color: var(--muted); }
.empty .h3 { color: var(--fg); margin-bottom: .5rem; }
@media (max-width: 480px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .product-body { padding: .7rem .75rem .8rem; }
  .product-title { font-size: .9rem; }
  .price b { font-size: 1.05rem; }
}

/* Товар */
.product-hero { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 2rem; align-items: start; }
.product-hero .product-img { border: 1px solid var(--line); border-radius: 1rem; }
.kit { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; }
.kit li { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem .75rem; background: hsl(0 0% 0% / .35); border: 1px solid hsl(0 0% 18%); border-radius: .5rem; font: .82rem var(--f-mono); }
.kit li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit li b { color: hsl(var(--amber)); }
.facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
@media (max-width: 820px) { .product-hero { grid-template-columns: minmax(0, 1fr); } .product-hero .product-img { max-width: 360px; width: 100%; margin: 0 auto; } }

/* ---------- Формы ---------- */
label.field { display: block; margin-bottom: 1rem; }
label.field > span { display: block; font: .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .4rem; }
.input, select.input {
  width: 100%; padding: .75rem .9rem; border-radius: .5rem; border: 1px solid hsl(0 0% 24%); background: hsl(0 0% 3%); color: var(--fg);
  font: 1rem ui-sans-serif, system-ui, sans-serif; transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: hsl(var(--amber) / .8); box-shadow: 0 0 0 3px hsl(var(--amber) / .2); }
.input.mono { font-family: var(--f-mono); letter-spacing: .05em; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, hsl(var(--amber)) 50%), linear-gradient(135deg, hsl(var(--amber)) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.input-row { display: flex; gap: .5rem; }
.input-row .input { flex: 1; min-width: 0; }
.input-row .btn { flex-shrink: 0; }
.hint { font-size: .82rem; color: var(--muted); margin-top: .4rem; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .9rem; }
.quick button { padding: .55rem 0; border-radius: .45rem; border: 1px solid hsl(0 0% 24%); background: hsl(0 0% 10%); color: var(--fg); font: 700 .85rem var(--f-mono); cursor: pointer; }
.quick button:hover, .quick button.on { border-color: hsl(var(--amber) / .7); color: hsl(var(--amber)); background: hsl(var(--amber) / .1); }
.notice { padding: .8rem 1rem; border-radius: .6rem; border: 1px solid hsl(var(--yellow) / .4); background: hsl(var(--yellow) / .08); font-size: .9rem; color: hsl(42 60% 80%); margin-bottom: 1rem; }
.notice-green { border-color: hsl(var(--green) / .4); background: hsl(var(--green) / .08); color: hsl(142 40% 80%); }

/* ---------- Кабинет ---------- */
.profile { display: flex; align-items: center; gap: 1.1rem; }
.profile .h3 { font-size: 1.6rem; }
.balance-big { font: 700 clamp(2.2rem, 6vw, 3rem) var(--f-display); color: hsl(var(--amber)); line-height: 1; text-shadow: 0 0 30px hsl(var(--amber) / .35); margin: .4rem 0 .9rem; }
.hist { list-style: none; padding: 0; margin: 0; }
.hist li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid hsl(0 0% 14%); }
.hist li:last-child { border-bottom: 0; }
.hist .t { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.hist .m { font: .74rem var(--f-mono); color: var(--muted); margin-top: .15rem; letter-spacing: .03em; }
.hist .r { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.amount { font: 700 1rem var(--f-mono); white-space: nowrap; }
.amount.plus { color: hsl(var(--green)); }
.amount.minus { color: hsl(30 8% 85%); }
.htabs { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.htabs button { padding: .45rem .9rem; border-radius: .45rem; border: 1px solid hsl(0 0% 22%); background: hsl(0 0% 9%); color: hsl(30 8% 78%); font: 600 .82rem var(--f-display); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.htabs button.on { border-color: hsl(var(--amber) / .7); color: hsl(var(--amber)); background: hsl(var(--amber) / .12); }
.hpanel[hidden] { display: none; }
.cart-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: hsl(0 0% 6.5%); }
.cart-item + .cart-item { margin-top: .75rem; }
.cart-item .product-img { aspect-ratio: 1 / 1; border: 1px solid hsl(0 0% 16%); border-radius: .6rem; }
.cart-item .ph { width: 70%; border-radius: .5rem; }
.cart-item form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.cart-item select.input { padding-top: .5rem; padding-bottom: .5rem; font-size: .9rem; min-width: 170px; }
@media (max-width: 680px) {
  .cart-item { grid-template-columns: 56px minmax(0, 1fr); }
  .cart-item > :last-child { grid-column: 1 / -1; }
  .cart-item form { width: 100%; } .cart-item select.input { min-width: 0; flex: 1; }
}
.result { max-width: 560px; margin: 0 auto; text-align: center; }
.result-ico { width: 76px; height: 76px; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center; font: 700 2.2rem var(--f-display); }
.result-ico.ok { background: hsl(var(--green) / .12); border: 1px solid hsl(var(--green) / .5); box-shadow: 0 0 40px hsl(var(--green) / .25); }
.result-ico.bad { background: hsl(var(--red) / .12); border: 1px solid hsl(var(--red) / .5); }

/* ---------- Подвал ---------- */
.footer { border-top: 1px solid var(--line); background: hsl(0 0% 3%); padding: 2.75rem 0 1.75rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; }
.footer h5 { margin: 0 0 .75rem; font: 700 .85rem var(--f-display); text-transform: uppercase; letter-spacing: .1em; color: hsl(30 5% 75%); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: .9rem; }
.footer ul a { color: hsl(30 5% 68%); }
.footer ul a:hover { color: hsl(var(--amber)); }
.footer p { font-size: .85rem; color: var(--muted); line-height: 1.55; margin-top: .75rem; }
.footer-bottom { border-top: 1px solid hsl(0 0% 14%); padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font: .75rem var(--f-mono); color: hsl(30 5% 50%); letter-spacing: .04em; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* Тост «скопировано» */
.toast {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 100; max-width: calc(100% - 2rem); padding: .8rem 1.1rem;
  background: hsl(0 0% 8%); border: 1px solid hsl(var(--green) / .5); border-left: 3px solid hsl(var(--green)); border-radius: .5rem;
  font-size: .9rem; box-shadow: 0 16px 40px -12px hsl(0 0% 0% / .6); opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }

.prose .desc-img { max-width: min(100%, 360px); height: auto; border-radius: var(--radius); border: 1px solid var(--line); }