/* Основа: токены, шапка, подвал, кнопки, формы, окна. Общая для всех страниц. */
:root {
  --bg: #0a0808;
  --bg-2: #100b0b;
  --panel: #151010;
  --panel-2: #1c1414;
  --line: #2a1c1c;
  --line-2: #3d2828;
  --text: #e8dfd0;
  --text-2: #bcae9a;
  --muted: #8c7d6c;
  --blood: #a3121c;
  --blood-d: #6b0a12;
  --blood-l: #e0303a;
  --blood-glow: rgba(224, 48, 58, .35);
  --bone: #e2d6c0;
  --olive: #7d8250;
  --font-logo: "Rubik Wet Paint", "Oswald", Impact, sans-serif;
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --header-h: 72px;
  --wrap: 1200px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 70% -10%, rgba(120, 10, 18, .28), transparent 70%),
    radial-gradient(900px 700px at -10% 30%, rgba(80, 6, 12, .18), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blood-l); text-decoration: none; }
a:hover { color: #ff5a62; }
::selection { background: var(--blood); color: #fff; }
:focus-visible { outline: 2px solid var(--blood-l); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.1; margin: 0; text-transform: uppercase; letter-spacing: .02em; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }

/* полоса прокрутки */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c0909; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--blood-d), var(--blood)); border-radius: 0 0 6px 6px; }

/* ---------- шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(8, 6, 6, .94);
  backdrop-filter: blur(6px);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo {
  font: 400 30px/1 var(--font-logo);
  color: var(--blood-l);
  text-shadow: 0 2px 0 #2a0306, 0 0 18px rgba(224, 48, 58, .25);
  white-space: nowrap;
  letter-spacing: .01em;
}
.logo:hover { color: #ff4048; }
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a {
  position: relative;
  padding: 10px 14px;
  font: 500 15px/1 var(--font-head);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--blood-l); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: var(--blood-l);
  box-shadow: 0 0 10px var(--blood-glow);
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.account-btn { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.account-btn .icon { width: 16px; height: 16px; }
.wallet-bar { display: flex; gap: 6px; align-items: center; }
.wallet-chip {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(14, 10, 10, .7);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--bone);
  white-space: nowrap;
}
.wallet-chip b { color: var(--blood-l); font-weight: 600; margin-left: 4px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.auth-tabs .tab { flex: 1; }
.cart-btn { position: relative; }
.cart-count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--blood-l);
  color: #fff;
  font: 600 12px/20px var(--font-mono);
  text-align: center;
}
.cart-count[hidden] { display: none; }

/* ---------- кнопки ---------- */
.btn {
  --btn-bg: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: var(--btn-bg);
  color: var(--text);
  font: 600 15px/1 var(--font-head);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .15s;
}
.btn:hover { border-color: var(--blood-l); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 170%;
  z-index: -1;
  background: var(--blood-d);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V34C96 34 96 46 93 46S90 30 86 30 83 52 78 52 76 36 70 36 67 44 62 44 60 28 54 28 51 56 45 56 43 34 37 34 34 42 29 42 27 32 21 32 18 48 13 48 11 34 5 34 2 38 0 38Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V34C96 34 96 46 93 46S90 30 86 30 83 52 78 52 76 36 70 36 67 44 62 44 60 28 54 28 51 56 45 56 43 34 37 34 34 42 29 42 27 32 21 32 18 48 13 48 11 34 5 34 2 38 0 38Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
  transform: translateY(-102%);
  transition: transform .55s cubic-bezier(.6, 0, .2, 1);
}
.btn:hover:not(:disabled)::after { transform: translateY(0); }
.btn-blood { --btn-bg: var(--blood); border-color: var(--blood); color: #fff; box-shadow: 0 8px 30px -12px var(--blood-glow); }
.btn-blood::after { background: #4d060c; }
.btn-blood:hover { border-color: var(--blood-l); }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.icon-btn:hover { color: #fff; border-color: var(--blood-l); background: rgba(163, 18, 28, .15); }
.icon-btn .icon { width: 20px; height: 20px; }

/* ---------- метки и чипы ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blood-l);
}
.kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font: 600 11px/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.chip.is-red { border-color: rgba(224, 48, 58, .5); color: var(--blood-l); background: rgba(163, 18, 28, .12); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  color: var(--text-2);
  font: 500 14px/1 var(--font-head);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
}
.tab:hover { color: var(--text); border-color: var(--muted); }
.tab[aria-pressed="true"] { background: var(--blood); border-color: var(--blood); color: #fff; }
.tab .n { margin-left: 6px; font-family: var(--font-mono); font-size: 12px; opacity: .7; }

/* ---------- формы ---------- */
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > span, .label {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: #0c0909;
  color: var(--text);
  font: 400 15px/1.5 var(--font-body);
  transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blood-l); box-shadow: 0 0 0 3px rgba(224, 48, 58, .18); }
.input::placeholder, .textarea::placeholder { color: #5e5246; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error { min-height: 1.4em; margin: 4px 0 12px; color: #ff6a70; font-size: 14px; }
.hint { font-size: 13px; color: var(--muted); }

/* ---------- окна ---------- */
.modal {
  width: min(560px, 100% - 24px);
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 40px 120px -30px #000;
  overflow: visible;
}
.modal::backdrop { background: rgba(4, 2, 2, .78); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in .35s var(--ease-out); }
.modal-band { position: relative; height: 6px; background: var(--blood); border-radius: 6px 6px 0 0; }
.modal-band .curtain { position: absolute; top: 5px; left: 0; width: 100%; pointer-events: none; }
.modal-body { padding: 30px 30px 26px; max-height: calc(100vh - 60px); overflow: auto; }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.modal-head h3 { font-size: 26px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* ---------- уведомления ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 10px; width: min(380px, calc(100% - 32px)); }
.toast {
  display: flex;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--blood-l);
  border-radius: 3px;
  background: #140e0e;
  box-shadow: 0 20px 50px -20px #000;
  font-size: 15px;
  animation: toast-in .35s var(--ease-out);
}
.toast.is-ok { border-left-color: var(--olive); }
.toast.is-out { opacity: 0; transform: translateX(20px); transition: all .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- подвал ---------- */
.site-footer { position: relative; margin-top: 120px; padding: 90px 0 36px; background: #070505; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.site-footer h4 { margin-bottom: 14px; font-size: 14px; letter-spacing: .18em; color: var(--muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--text-2); }
.site-footer a:hover, .site-footer .logo { color: var(--blood-l); }
.footer-note { max-width: 380px; margin-top: 14px; color: var(--muted); font-size: 14px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font: 400 13px/1.4 var(--font-mono); }
.link-btn { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.link-btn:hover { color: var(--blood-l); }

/* значок демо-режима и админа */
.mode-badge {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 70;
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: rgba(14, 10, 10, .92);
  font: 600 11px/1.3 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mode-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blood-l); box-shadow: 0 0 8px var(--blood-l); }
body:not(.is-admin) .admin-only { display: none !important; }

@media (max-width: 860px) {
  :root { --header-h: 104px; }
  .site-header .wrap { flex-wrap: wrap; gap: 0 12px; padding-top: 10px; align-content: start; }
  .logo { font-size: 25px; }
  .header-actions { margin-left: auto; }
  .wallet-bar { display: none; }
  .nav { order: 3; width: 100%; margin: 8px 0 0; justify-content: space-between; }
  .nav a { padding: 10px 8px; font-size: 14px; letter-spacing: .1em; }
  .nav a[aria-current="page"]::after { left: 8px; right: 8px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .row-2 { grid-template-columns: 1fr; }
  .modal-body { padding: 24px 18px 20px; }
}