/* ============================================================
   Теос: Наследие Богини — общая дизайн-система
   Поддерживает две темы: stone (тёмный камень) и parchment (золотой пергамент)
   ============================================================ */

/* --- Theme tokens --- */
:root,
.theme-stone {
  --bg-deep:        #0b0d12;
  --bg-base:        #11141b;
  --bg-panel:       #161a23;
  --bg-panel-2:     #1c2230;
  --bg-elev:        #232a38;
  --bg-stripe:      #0e1118;

  --line-soft:      rgba(201, 164, 74, 0.18);
  --line:           rgba(201, 164, 74, 0.32);
  --line-strong:    rgba(201, 164, 74, 0.55);

  --gold:           #c9a44a;
  --gold-2:         #9a7a3a;
  --gold-bright:    #e7c878;
  --gold-dim:       #6f5a2c;
  --parch:          #e9dcb6;
  --parch-dim:      #c6b88d;

  --ink:            #e8e2cf;
  --ink-soft:       #b9b29a;
  --ink-mute:       #807a66;
  --ink-faint:      #5b5644;

  --light:          #6fa3c8;
  --light-2:        #a9cae3;
  --light-glow:     rgba(111, 163, 200, 0.5);
  --fury:           #a83040;
  --fury-2:         #d96274;
  --fury-glow:      rgba(168, 48, 64, 0.5);

  --shadow-1:       0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.5);
  --shadow-card:    0 1px 0 rgba(255,255,255,0.03), 0 12px 36px rgba(0,0,0,0.6), inset 0 0 0 1px var(--line-soft);
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.45);

  /* Calmer background (item #54): dropped the blue/red side blobs that
     read as random colour smudges; kept a soft gold top glow over a
     clean dark vertical gradient. */
  /* Richer, warmer dark backdrop (item #54) — was a flat blue-grey. Layers:
     a gold top glow, a faint warm glow rising from the footer, a soft
     edge vignette for depth, over a near-neutral (de-blued) vertical base. */
  --grad-page:
    radial-gradient(1250px 600px at 50% -12%, rgba(201,164,74,0.12), transparent 60%),
    radial-gradient(1000px 560px at 50% 116%, rgba(150,110,55,0.07), transparent 60%),
    radial-gradient(160% 130% at 50% 26%, transparent 52%, rgba(0,0,0,0.42) 100%),
    linear-gradient(180deg, #0b0b0f 0%, #131019 48%, #0a090d 100%);

  color-scheme: dark;
}

.theme-parchment {
  --bg-deep:        #1c1408;
  --bg-base:        #2a1f10;
  --bg-panel:       #f1e5c2;
  --bg-panel-2:     #ece1ba;
  --bg-elev:        #f7eecb;
  --bg-stripe:      #e8dcae;

  --line-soft:      rgba(122, 80, 30, 0.22);
  --line:           rgba(122, 80, 30, 0.42);
  --line-strong:    rgba(101, 65, 22, 0.72);

  --gold:           #a87a26;
  --gold-2:         #7a541a;
  --gold-bright:    #d8a84a;
  --gold-dim:       #5b3d10;
  --parch:          #2b1d08;
  --parch-dim:      #4a3416;

  --ink:            #2b1d08;
  --ink-soft:       #3f2b10;
  --ink-mute:       #5a3f18;
  --ink-faint:      #7a5a26;

  --light:          #2a5d8a;
  --light-2:        #3f7fb0;
  --light-glow:     rgba(42, 93, 138, 0.35);
  --fury:           #8c1f2c;
  --fury-2:         #b73a4d;
  --fury-glow:      rgba(140, 31, 44, 0.4);

  --shadow-1:       0 1px 0 rgba(255,255,255,0.5), 0 6px 18px rgba(60,40,15,0.18);
  --shadow-card:    0 1px 0 rgba(255,255,255,0.5), 0 8px 24px rgba(60,40,15,0.18), inset 0 0 0 1px var(--line-soft);
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(101,65,22,0.18);

  --grad-page:
    radial-gradient(1400px 700px at 50% -10%, rgba(216,168,74,0.18), transparent 62%),
    linear-gradient(180deg, #efe2b8 0%, #ead9a8 70%, #d8c48a 100%);

  color-scheme: light;
}

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Never scroll sideways: decorative hero glows/mist bleed past the
   viewport edge by design. `clip` (not `hidden`) contains the bleed
   without creating a scroll container, so position:sticky still works
   (item #30). */
html, body { overflow-x: clip; max-width: 100%; }

/* Themed cursors (item #53). 01 = default arrow, 02 = pointer/hand for
   interactive elements. The trailing fallback keeps a sane cursor if
   the .cur fails to load. */
html, body { cursor: url('/assets/cursors/01.cur'), auto; }
/* !important so the themed hand wins over the many element-specific
   `cursor: pointer` rules (nav links, .btn, toolbar buttons, etc.) that
   otherwise out-specify a bare `a`/`button` selector and fell back to the
   system pointer (item #53). Disabled controls use pointer-events:none, so
   they're unaffected and keep the default arrow. */
a, button, [role="button"], .btn, summary, label, select,
input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"],
.topic, .gal-tile, .news-row__more, .tabs__item, .member-card, .sup-card,
.lib-item, .race-card, .hero-card, .topic-card, .pvp-topic, .cta,
.post__action, .post__reaction, .thread-toolbar__btn, .acc-menu a, .pm-row {
    cursor: url('/assets/cursors/02.cur'), pointer !important;
}
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], textarea, [contenteditable="true"] {
    cursor: url('/assets/cursors/03.cur'), text !important;
}
body {
  font-family: var(--font-ui, 'Manrope'), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--grad-page);
  background-attachment: fixed;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* Spacing scale 8/16/24/32/48/64 */
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;

  /* Font-pair tokens — overridden by .fp-* body classes */
  --font-head: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-ui:   'Manrope', system-ui, sans-serif;
  --font-eyebrow: 'Manrope', system-ui, sans-serif;
  --eyebrow-weight: 600;
  --eyebrow-track: 0.18em;

  /* Sticky footer scaffold: body is a flex column so #main stretches
     to fill remaining viewport, pinning the footer to the bottom on
     short pages (item #3 of Wave 6). */
  display: flex;
  flex-direction: column;
}
body > #main { flex: 1 0 auto; }
body > footer { flex: 0 0 auto; }

/* Font-pair variants */
.fp-a { /* Cormorant + Manrope (default) */
  --font-head: 'Cormorant Garamond', serif;
  --font-ui:   'Manrope', sans-serif;
  --font-eyebrow: 'Marcellus SC', 'Manrope', sans-serif;
  --eyebrow-weight: 400;
  --eyebrow-track: 0.22em;
}
.fp-b { /* Spectral + Inter */
  --font-head: 'Spectral', 'Cormorant Garamond', serif;
  --font-ui:   'Inter', system-ui, sans-serif;
  --font-eyebrow: 'Inter', sans-serif;
  --eyebrow-weight: 600;
  --eyebrow-track: 0.20em;
}
.fp-c { /* EB Garamond + PT Sans */
  --font-head: 'EB Garamond', 'Cormorant Garamond', serif;
  --font-ui:   'PT Sans', 'Inter', sans-serif;
  --font-eyebrow: 'PT Sans', sans-serif;
  --eyebrow-weight: 700;
  --eyebrow-track: 0.18em;
}
.fp-d { /* Vollkorn + Inter */
  --font-head: 'Vollkorn', 'Cormorant Garamond', serif;
  --font-ui:   'Inter', system-ui, sans-serif;
  --font-eyebrow: 'Inter', sans-serif;
  --eyebrow-weight: 600;
  --eyebrow-track: 0.18em;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

::selection { background: var(--gold); color: #0b0d12; }

/* --- Type --- */
.serif { font-family: var(--font-head); font-weight: 500; }

/* Class badge (item #32) — colour set per-class via inline --cc var. */
.class-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cc, var(--gold));
  border: 1px solid color-mix(in srgb, var(--cc, var(--gold)) 50%, transparent);
  background: color-mix(in srgb, var(--cc, var(--gold)) 12%, transparent);
  vertical-align: middle;
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.005em;
  color: var(--ink);
}
h1 { font-size: 56px; line-height: 1.05; }
h2 { font-size: 28px; line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.25; }
h4 { font-size: 16px; line-height: 1.3; }

.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 10.5px;
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--gold);
}

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-mute); }

/* --- Section header system (unified) --- */
.sec-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 14px;
}
.sec-head__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sec-head__title {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.005em;
}
.sec-head__action {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  padding-bottom: 6px;
  transition: color 0.18s;
}
.sec-head__action:hover { color: var(--gold-bright); }
.theme-parchment .sec-head__action:hover { color: var(--gold-2); }

/* Unified rule under section header — thin gold line w/ centered diamond */
.sec-head__rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-4);
  height: 10px;
}
.sec-head__rule::before,
.sec-head__rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, var(--line-soft) 70%, transparent 100%);
}
.sec-head__rule::after {
  background: linear-gradient(90deg, transparent 0%, var(--line-soft) 30%, var(--line) 100%);
}
.sec-head__rule__mark {
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--gold);
  opacity: 0.7;
  flex: 0 0 auto;
}

/* Section header inside a panel (more compact) — keep the rule visible */
.panel .sec-head { margin-bottom: 12px; }
.panel .sec-head__title { font-size: 24px; }
.panel .sec-head__rule { margin-bottom: 16px; }
.panel {
  position: relative;
  background:
    linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 2px;
}
.theme-parchment .panel {
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-panel) 100%);
}

/* Padded panel — secondary blocks without ornaments */
.panel--padded {
  padding: 20px 24px 24px;
}
.panel--padded > .sec-head { margin-bottom: 10px; }

/* gold inner border line */
.panel--ornate {
  padding: 20px 24px 24px;
}
.panel--ornate::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
  border-radius: 1px;
}

/* corner ornaments — only on .panel--ornate */
.panel--ornate::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23c9a44a' stroke-width='1.2'><path d='M2 12 V2 H12'/><path d='M5 8 V5 H8'/><circle cx='2.5' cy='2.5' r='1' fill='%23c9a44a' stroke='none'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23c9a44a' stroke-width='1.2'><path d='M26 12 V2 H16'/><path d='M23 8 V5 H20'/><circle cx='25.5' cy='2.5' r='1' fill='%23c9a44a' stroke='none'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23c9a44a' stroke-width='1.2'><path d='M2 16 V26 H12'/><path d='M5 20 V23 H8'/><circle cx='2.5' cy='25.5' r='1' fill='%23c9a44a' stroke='none'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23c9a44a' stroke-width='1.2'><path d='M26 16 V26 H16'/><path d='M23 20 V23 H20'/><circle cx='25.5' cy='25.5' r='1' fill='%23c9a44a' stroke='none'/></g></svg>");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  opacity: 0.85;
}

.theme-parchment .panel--ornate::after {
  filter: hue-rotate(-10deg) brightness(0.55) saturate(1.2);
}

/* panel header bar */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(201,164,74,0.12), rgba(201,164,74,0.02));
  position: relative;
}
.panel-head::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}
.panel-head__title {
  font-family: var(--font-head);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.theme-parchment .panel-head__title { color: var(--gold-2); }
.panel-head__action {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.18s;
}
.panel-head__action:hover { color: var(--gold-bright); }

.panel-body { padding: 16px 18px; }

/* gold horizontal rule with diamond center */
.rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  margin: 18px 0;
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.rule__diamond {
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-panel));
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.2s;
  cursor: pointer;
  box-shadow: var(--shadow-inset);
}
.btn:hover {
  border-color: var(--line-strong);
  color: var(--gold-bright);
  box-shadow: var(--shadow-inset), 0 0 16px rgba(201,164,74,0.18);
}
.theme-parchment .btn:hover { color: var(--gold-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--gold {
  color: #0b0d12;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-2) 100%);
  border-color: var(--gold-dim);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.btn--gold:hover {
  color: #0b0d12;
  box-shadow: var(--shadow-inset), 0 0 24px rgba(231,200,120,0.4);
  filter: brightness(1.08);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-soft);
}

.btn--sm { padding: 7px 12px; font-size: 11px; }
.btn--lg { padding: 14px 24px; font-size: 13px; }

/* --- Hero CTA buttons (big stone/gold tiles) --- */
.cta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  text-decoration: none;
  color: var(--ink);
  background:
    linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-panel) 100%);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all 0.25s ease;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
  border-radius: 1px;
}
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 50% 100%, rgba(201,164,74,0.18), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.cta:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.cta:hover::after { opacity: 1; }

.cta__icon {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(201,164,74,0.35), rgba(201,164,74,0.05) 70%);
  border: 1px solid var(--line);
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.cta__icon svg { width: 28px; height: 28px; stroke: var(--gold-bright); fill: none; stroke-width: 1.4; }
.theme-parchment .cta__icon svg { stroke: var(--gold-2); }

.cta__text { position: relative; z-index: 1; }
.cta__label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  line-height: 1;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
}
.theme-parchment .cta__label { color: var(--gold-2); }
.cta__sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cta--primary {
  background: linear-gradient(180deg, #2a2412 0%, #1a1608 100%);
}
.theme-parchment .cta--primary {
  background: linear-gradient(180deg, #f8e8b8 0%, #e6cf80 100%);
}
.cta--primary .cta__icon {
  background:
    radial-gradient(circle at 50% 35%, rgba(231,200,120,0.6), rgba(231,200,120,0.1) 70%);
  border-color: var(--gold);
}

/* --- Top utility bar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, #07090d 0%, #0a0d13 100%);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font-size: 12px;
  backdrop-filter: blur(8px);
}
.theme-parchment .topbar {
  background: linear-gradient(180deg, #1a1208 0%, #251a0c 100%);
  color: #d8c48a;
  border-bottom-color: rgba(101, 65, 22, 0.4);
}
.topbar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar__group { display: flex; align-items: center; gap: 22px; }
.topbar a {
  letter-spacing: 0.04em;
  color: inherit;
  transition: color 0.18s;
  position: relative;
}
.topbar a:hover { color: var(--gold-bright); }
.theme-parchment .topbar a:hover { color: #ffd970; }
.topbar__sep {
  width: 1px; height: 12px;
  background: var(--line-soft);
}
/* --- Topbar socials (uniform fill icons) --- */
.topbar__icons { display: flex; align-items: center; gap: 8px; }
.topbar__icons a {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  transition: all 0.2s;
}
.topbar__icons a:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(201,164,74,0.08);
}
.theme-parchment .topbar__icons a:hover { color: var(--gold-2); }
.topbar__icons svg {
  width: 12px; height: 12px;
  fill: currentColor;
}
/* --- Topbar user chip (visible only when authenticated) --- */
.topbar__user {
  display: inline-flex; align-items: center; gap: 8px;
}
.topbar__avatar {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(231,200,120,0.18), rgba(231,200,120,0.04));
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: var(--font-ui);
  font-size: 9.5px; letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
}
.topbar__username {
  color: var(--gold-bright) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.topbar__username:hover { color: var(--ink) !important; }
/* Bell icon — wrapping div now hosts the dropdown panel + the polling
   target. Button styling kept identical to the previous <a class="topbar__bell">. */
.topbar__bell-wrap { position: relative; display: inline-block; }
.topbar__bell {
  position: relative;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  color: var(--ink-soft);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.topbar__bell:hover { color: var(--gold-bright) !important; }
.topbar__envelope { text-decoration: none; }
.topbar__bell svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.topbar__bell__dot {
  position: absolute; top: -4px; right: -7px;
  background: var(--fury); color: #fff;
  font-family: var(--font-ui); font-size: 9px; font-weight: 600;
  line-height: 1;
  min-width: 16px; height: 14px;
  padding: 0 4px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Notification dropdown (Wave 6 hover dropdown). Anchored to the bell. */
.topbar__notif {
  position: absolute; top: 28px; right: -6px; z-index: 200;
  width: 320px;
  background: linear-gradient(180deg, rgba(20,24,33,0.98), rgba(14,17,24,0.98));
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  color: var(--ink);
  animation: notifDropIn 0.16s ease-out;
}
.topbar__notif[hidden] { display: none; }
.topbar__notif__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); letter-spacing: 0.06em; font-size: 12px;
  color: var(--gold-bright);
}
.topbar__notif__head a { color: var(--gold); text-transform: uppercase; font-size: 10px; letter-spacing: 0.12em; }
.topbar__notif__list { max-height: 320px; overflow-y: auto; }
.topbar__notif__row {
  display: block; padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; font-size: 13px;
}
.topbar__notif__row:hover { background: rgba(231, 200, 120, 0.05); }
.topbar__notif__row strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.topbar__notif__row span { color: var(--ink-mute); font-size: 11px; }
.topbar__notif__row.is-unread { border-left: 2px solid var(--gold); padding-left: 12px; }
.topbar__notif__empty { padding: 16px; color: var(--ink-mute); font-size: 12px; text-align: center; }
@keyframes notifDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Toast container for live notifications (polled every 30s). */
#notif-toasts { position: fixed; right: 22px; top: 80px; z-index: 1200; display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
.notif-toast {
  pointer-events: auto; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  background: linear-gradient(135deg, rgba(42,48,62,0.99), rgba(15,18,26,0.99));
  border: 1px solid var(--gold-dim); border-left: 4px solid var(--gold-bright);
  border-radius: 13px; padding: 16px 20px 18px; min-width: 326px; max-width: 410px;
  box-shadow: 0 22px 54px rgba(0,0,0,0.62), 0 0 0 1px rgba(231,200,120,0.10), 0 0 34px rgba(231,200,120,0.18);
  position: relative; overflow: hidden;
  animation: toastIn 0.44s cubic-bezier(0.18, 0.9, 0.28, 1.32), toastGlow 1.7s ease-out;
}
/* gold sheen along the top edge */
.notif-toast::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,200,120,0.75), transparent); }
.notif-toast:hover { border-color: var(--gold); box-shadow: 0 24px 60px rgba(0,0,0,0.66), 0 0 40px rgba(231,200,120,0.30); }
.notif-toast__ic {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(231,200,120,0.32), rgba(231,200,120,0.04) 72%);
  border: 1px solid var(--gold); font-size: 20px; color: var(--gold-bright);
  position: relative; animation: toastBell 0.85s ease-out 0.2s; transform-origin: 50% 0;
}
/* expanding ring pulse around the icon when the toast appears */
.notif-toast__ic::after { content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--gold-bright); opacity: 0; animation: toastRing 1.15s ease-out 0.1s; }
.notif-toast__body { min-width: 0; }
.notif-toast__title { display: block; color: var(--gold-bright); font-family: var(--font-display); font-size: 15.5px; font-weight: 600; line-height: 1.25; margin-bottom: 3px; letter-spacing: 0.01em; }
.notif-toast__when { display: block; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.notif-toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold)); transform-origin: left;
  box-shadow: 0 0 8px rgba(231,200,120,0.55); animation: toastBar 6s linear forwards; }
.notif-toast.is-leaving { animation: toastOut 0.26s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(64px) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(64px) scale(0.95); } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toastBell { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-15deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-5deg); } }
@keyframes toastRing { 0% { opacity: 0.85; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes toastGlow {
  0%   { box-shadow: 0 22px 54px rgba(0,0,0,0.62), 0 0 0 4px rgba(231,200,120,0.55), 0 0 60px rgba(231,200,120,0.6); }
  100% { box-shadow: 0 22px 54px rgba(0,0,0,0.62), 0 0 0 1px rgba(231,200,120,0.10), 0 0 34px rgba(231,200,120,0.18); }
}

/* --- Header / nav --- */
.header {
  background:
    linear-gradient(180deg, rgba(11,13,18,0.95) 0%, rgba(11,13,18,0.85) 100%);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.theme-parchment .header {
  background: linear-gradient(180deg, rgba(26,18,8,0.95) 0%, rgba(37,26,12,0.92) 100%);
}
.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
/* --- Nav / Header --- */
.nav {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  height: 56px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 22px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.18s;
  cursor: pointer;
}
.nav__item:hover, .nav__item.is-active { color: var(--gold-bright); }
.theme-parchment .nav__item:hover, .theme-parchment .nav__item.is-active { color: #ffe39a; }
.nav__item.is-active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: 36px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 8px var(--gold);
}
.nav__item.has-drop > .nav__chev {
  display: inline-block;
  margin-left: 8px;
  font-size: 8px;
  color: var(--gold);
  transition: transform 0.2s;
}
.nav__item.has-drop:hover > .nav__chev { transform: translateY(1px); }
.nav__item.has-drop:hover .dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Anchor dropdown to LEFT edge of its parent item, opening downward */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translate(0, 6px);
  min-width: 200px;
  padding: 6px;
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6), inset 0 0 0 1px var(--line-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 50;
}
.nav__item.has-drop:hover .dropdown { transform: translate(0, 0); opacity: 1; pointer-events: auto; }
.nav__item.has-drop.is-kbd-open .dropdown { transform: translate(0, 0); opacity: 1; pointer-events: auto; }

/* Right-anchor for the rightmost items to avoid overflow */
.nav__item.has-drop.drop-right .dropdown { left: auto; right: 0; }

.dropdown__item {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-soft);
  transition: all 0.15s;
}
.dropdown__item:hover {
  color: var(--gold-bright);
  background: rgba(201,164,74,0.10);
}
.theme-parchment .dropdown__item:hover {
  color: var(--gold-2);
  background: rgba(122, 80, 30, 0.08);
}

/* --- Inputs --- */
.input, .select, .textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-stripe);
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  transition: all 0.18s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.theme-parchment .input,
.theme-parchment .select,
.theme-parchment .textarea {
  background: #fdf6dc;
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(101,65,22,0.12);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gold);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 0 0 3px rgba(201,164,74,0.18);
}
.field-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(201,164,74,0.12);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.badge--gold { color: var(--gold-bright); border-color: var(--gold); }
.theme-parchment .badge--gold { color: var(--gold-2); }
.badge--light { color: var(--light-2); border-color: var(--light); background: rgba(111,163,200,0.1); }
.badge--fury { color: var(--fury-2); border-color: var(--fury); background: rgba(168,48,64,0.1); }
/* Muted chip for secondary metadata (e.g. purchase source). */
.badge--soft { color: var(--ink-mute); background: transparent; border-color: var(--line); font-weight: 600; }
.badge--dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* --- Crumbs (breadcrumbs) --- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 24px 0 40px;
  padding: 0;
  min-height: 16px;
}
.crumbs a { color: inherit; transition: color 0.18s; }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs__sep { color: var(--gold); opacity: 0.6; }
.crumbs__current { color: var(--ink); }

/* --- Containers --- */
.container--lg { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.container--md { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.container--sm { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
/* Long-form prose stays readable inside the full-width container */
.container--md > .doc,
.container--md > .crumbs + .doc { max-width: 860px; }
/* Legal/long-form docs use their own 2-col layout — opt out of the narrow cap */
.container--md > .doc.doc--legal,
.container--md > .crumbs + .doc.doc--legal { max-width: none; }

/* --- Legal document layout (terms, rules, etc.) --- */
.doc--legal { font-family: var(--font-ui); }
.doc--legal .doc-meta { margin-bottom: 32px; }
.doc--legal .doc__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 40px;
  text-wrap: pretty;
}
.doc--legal .doc__split {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}
.doc--legal .toc {
  position: sticky;
  top: 96px;
  padding: 22px 24px;
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
}
.doc--legal .toc h3 {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.doc--legal .toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.doc--legal .toc li {
  counter-increment: toc;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.doc--legal .toc a {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s;
}
.doc--legal .toc li + li a { border-top: 1px solid var(--line-soft); }
/* Auto-number "01", "02"… with a clear gap before the heading text
   (the .toc a flex `gap` provides the space → "01 Какие данные"). The JS
   strips any number the heading already carries, so it shows once (item #24). */
.doc--legal .toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--gold);
  flex: 0 0 auto;
  padding-top: 2px;
}
.doc--legal .toc a:hover { color: var(--gold-bright); }
.doc--legal .doc__content { min-width: 0; }
.doc--legal section { margin-bottom: 36px; scroll-margin-top: 96px; }
.doc--legal section:last-child { margin-bottom: 0; }
.doc--legal h2 {
  font-family: var(--font-head);
  font-size: 26px;
  margin: 0 0 16px;
  color: var(--ink);
  position: relative;
  padding-bottom: 10px;
}
.doc--legal h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 1px;
  background: var(--gold);
}
.doc--legal h2 .num {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-right: 14px;
  vertical-align: 4px;
}
.doc--legal p,
.doc--legal li {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.doc--legal ul,
.doc--legal ol { padding-left: 22px; margin: 0 0 14px; }
.doc--legal li { margin-bottom: 8px; }
.doc--legal li strong { color: var(--ink); }
.doc--legal a { color: var(--gold-bright); border-bottom: 1px dotted var(--gold); }
.doc--legal a:hover { color: var(--gold); }
.doc--legal .doc__footnote {
  margin-top: 48px;
  padding: 18px 22px;
  border: 1px solid var(--line-soft);
  background: var(--bg-panel);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.6;
}
@media (max-width: 960px) {
  .doc--legal .doc__split { grid-template-columns: 1fr; gap: 32px; }
  .doc--legal .toc { position: static; }
}
.page-body { padding: 64px 0 64px; }

/* Normalize gap between crumbs and following content across all pages */
.page-body > .crumbs + *,
main > .crumbs + * {
  margin-top: 0 !important;
}

/* --- Alert / notice block --- */
.alert {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-color: var(--gold);
  background: linear-gradient(180deg, rgba(201,164,74,0.06), rgba(201,164,74,0.015));
  border-radius: 2px;
}
.alert__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(201,164,74,0.14);
  color: var(--gold);
  flex-shrink: 0;
}
.alert__icon svg { display: block; }
.alert__body {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.alert__body strong {
  display: block;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.alert__body a { color: var(--gold-bright); border-bottom: 1px dotted var(--gold); transition: color 0.18s; }
.alert__body a:hover { color: var(--gold); }
.alert--info { border-left-color: var(--gold); }
.alert--warn {
  border-left-color: #c08a3a;
  background: linear-gradient(180deg, rgba(192,138,58,0.08), rgba(192,138,58,0.02));
}
.alert--warn .alert__icon { background: rgba(192,138,58,0.16); color: #d4a35e; }
.alert--ok {
  border-left-color: #6a9b6a;
  background: linear-gradient(180deg, rgba(106,155,106,0.06), rgba(106,155,106,0.015));
}
.alert--ok .alert__icon { background: rgba(106,155,106,0.14); color: #8fbf8f; }

/* --- Item card (shop) --- */
.item-card {
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s;
}
.item-card:hover { border-color: var(--line-strong); }
.item-card__art {
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 40%, rgba(201,164,74,0.10), transparent 60%),
    var(--bg-stripe);
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  color: var(--gold);
  position: relative;
}
.item-card__art svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.1; opacity: 0.7; }
.item-card__rarity {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--ink-soft);
}
.item-card__rarity::before {
  content: '';
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: currentColor;
}
.item-card__rarity.r-common  { color: #8b8579; border-color: rgba(139,133,121,0.6); }
.item-card__rarity.r-rare    { color: #6fa3c8; border-color: rgba(111,163,200,0.6); }
.item-card__rarity.r-epic    { color: #c89cdf; border-color: rgba(200,156,223,0.6); }
.item-card__rarity.r-legend  { color: #e7c878; border-color: rgba(231,200,120,0.7); }
.item-card__rarity.r-light   { color: #a9cae3; border-color: rgba(169,202,227,0.6); }
.item-card__rarity.r-fury    { color: #d96274; border-color: rgba(217,98,116,0.6); }
.item-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.item-card__name {
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.2;
}
.item-card__desc { font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; flex: 1; }
.item-card__foot {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}
.item-card__foot .btn { font-size: 10px; letter-spacing: 0.08em; padding: 6px 10px; white-space: nowrap; }
.item-card__price {
  font-family: var(--font-head);
  color: var(--gold-bright);
  font-size: 17px;
  text-align: right;
}
.theme-parchment .item-card__price { color: var(--gold-2); }

/* --- Accordion (FAQ) --- */
.accordion details {
  border: 1px solid var(--line-soft);
  background: var(--bg-panel);
  margin-bottom: 8px;
}
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.18s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+';
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1;
  transition: transform 0.25s;
}
.accordion details[open] summary { color: var(--gold-bright); background: rgba(201,164,74,0.05); border-bottom: 1px solid var(--line-soft); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion__body {
  padding: 18px 22px 20px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.65;
}
/* --- Tabs --- */
.tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.tabs__item {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all 0.18s;
}
.tabs__item:hover { color: var(--ink); }
.tabs__item.is-active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}
.theme-parchment .tabs__item.is-active { color: var(--gold-2); }

/* --- News row (no category, date under title) --- */
.news-row {
  display: grid;
  grid-template-columns: 44px 1fr 110px;
  gap: 28px;
  align-items: start;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.news-row:last-child { border-bottom: none; }
.news-row:first-child { padding-top: 8px; }
.news-row__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-panel));
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  color: var(--gold);
}
.news-row__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.news-row__title {
  font-family: var(--font-head);
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.news-row__title a { color: inherit; transition: color 0.18s; }
.news-row__title a:hover { color: var(--gold-bright); }
.theme-parchment .news-row__title a:hover { color: var(--gold-2); }
.news-row__date {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 8px;
}
.theme-parchment .news-row__date { color: var(--gold-2); }
.news-row__body {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0;
}
/* News row "Подробнее" — align with title baseline */
.news-row__more {
  justify-self: end;
  align-self: start;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  transition: color 0.18s;
}
.news-row__more:hover { color: var(--gold-bright); }
.theme-parchment .news-row__more:hover { color: var(--gold-2); }
.news-row__more::after {
  content: ' →';
  color: var(--gold);
  margin-left: 4px;
}

/* --- Sidebar widget --- */
.widget + .widget { margin-top: 18px; }

/* --- Rating table --- */
.rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rank-table th {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.rank-table td {
  padding: 7px 8px;
  border-bottom: 1px dashed var(--line-soft);
  color: var(--ink-soft);
}
.rank-table tr:last-child td { border-bottom: none; }
.rank-table__rank {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--gold-bright);
  width: 28px;
}
.theme-parchment .rank-table__rank { color: var(--gold-2); }
.rank-table__rank.is-top { color: var(--gold-bright); text-shadow: 0 0 12px var(--gold); }
.rank-table tr:hover td { color: var(--ink); background: rgba(201,164,74,0.04); }
.theme-parchment .rank-table tr:hover td { background: rgba(122,80,30,0.05); }

/* --- Tabs --- */
.footer {
  margin-top: 56px;
  background: linear-gradient(180deg, #06080c 0%, #04060a 100%);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.theme-parchment .footer {
  background: linear-gradient(180deg, #1a1208 0%, #120c04 100%);
  color: #d8c48a;
}
.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 32px 20px;
}
.footer__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
  font-family: var(--font-ui);
}
.footer__nav a {
  padding: 0 14px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.18s;
  white-space: nowrap;
}
.footer__nav a:first-child { padding-left: 0; }
.footer__nav a:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1px; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line-soft);
}
.footer__nav a:hover { color: var(--gold-bright); }
.theme-parchment .footer__nav a:hover { color: var(--gold-bright); }

.footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 18px;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.footer__legal a {
  color: inherit;
  transition: color 0.18s;
}
.footer__legal a:hover { color: var(--ink-soft); }

.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.footer__disclaimer {
  font-size: 11px;
  color: var(--ink-mute);
  max-width: 720px;
  line-height: 1.55;
}
.footer__mark {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  color: var(--gold-bright);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
}
.theme-parchment .footer__mark { color: var(--gold-bright); }

/* --- Doc meta panel (legal documents) --- */
.doc-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 24px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  margin-bottom: 32px;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--ink-soft);
}
.doc-meta__label {
  display: block;
  color: var(--gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 2px;
}
.doc-meta__value { color: var(--ink); font-weight: 500; }
.doc-meta a { color: var(--gold-bright); border-bottom: 1px dotted var(--gold); }
.doc-meta a:hover { color: var(--gold); }

/* --- Utility --- */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}
.flex { display: flex; }
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.text-center { text-align: center; }


/* ============================================================
   A11Y — focus / skip-link / visually-hidden
   ============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 1px;
}
.btn:focus-visible {
  outline-offset: 3px;
  box-shadow: var(--shadow-inset), 0 0 0 3px rgba(201,164,74,0.25);
}
.nav__item:focus-visible,
.dropdown__item:focus-visible {
  outline-offset: -3px;
  color: var(--gold-bright);
}
.tabs__item:focus-visible {
  outline-offset: -3px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--gold);
  color: #0b0d12;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  transform: translateY(-150%);
  transition: transform 0.18s;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* ============================================================
   MOBILE HAMBURGER button (rendered only on small screens)
   ============================================================ */
.nav__toggle {
  display: none;
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  z-index: 60;
}
.nav__toggle__bar {
  display: block;
  width: 18px; height: 1.5px;
  margin: 0 auto;
  background: currentColor;
  transition: transform 0.22s, opacity 0.18s;
}
.nav__toggle__bar + .nav__toggle__bar { margin-top: 4px; }
.nav__toggle[aria-expanded="true"] .nav__toggle__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle__bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }


/* ============================================================
   RESPONSIVE — единый набор брейкпойнтов
   1200  → планшет
   880   → крупный мобильный
   560   → телефон
   ============================================================ */

/* ---- 1200px ---- */
@media (max-width: 1200px) {
  .topbar__inner,
  .nav,
  .footer__inner,
  .container,
  .container--lg,
  .container--md,
  .container--sm {
    padding-left: 24px;
    padding-right: 24px;
  }
  h1 { font-size: 44px; }
  h2 { font-size: 26px; }

  .page-hero__inner { padding: 60px 24px 32px; }
  .page-hero h1 { font-size: 38px; max-width: 88%; }
}

/* ---- 880px ---- */
@media (max-width: 880px) {
  body { font-size: 14px; }

  /* Topbar: one tidy right-aligned row instead of a 3-row wrap.
     Drop the left utility links (they duplicate the hamburger menu) and
     the secondary text links; keep the bell, avatar, logout and socials
     (item #30). */
  .topbar__inner { height: 42px; padding: 0 14px; flex-direction: row; align-items: center; justify-content: flex-end; gap: 14px; }
  .topbar__group { flex-wrap: nowrap; gap: 14px; min-width: 0; }
  .topbar__group:first-child { display: none; }
  .topbar__sep { display: none; }
  .topbar__username, .topbar__minor { display: none; }

  /* Header: гамбургер слева, центрированный лого по центру; меню скрыто */
  .header { position: relative; }
  .nav {
    padding-left: 64px;
    padding-right: 64px;
    height: 52px;
    justify-content: center;
    align-items: center;
  }
  .nav__toggle { display: grid; place-items: center; }

  .nav__item {
    display: none;
  }
  /* Когда меню «открыто», nav-items выпадают вертикально под шапкой */
  .header.is-open .nav {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0 16px;
    background: linear-gradient(180deg, rgba(11,13,18,0.98), rgba(11,13,18,0.96));
    border-top: 1px solid var(--line-soft);
  }
  .theme-parchment .header.is-open .nav {
    background: linear-gradient(180deg, rgba(26,18,8,0.98), rgba(37,26,12,0.98));
  }
  .header.is-open .nav__item {
    display: flex;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line-soft);
  }
  .header.is-open .nav__item.is-active::after { display: none; }
  .header.is-open .nav__item.has-drop > .nav__chev { margin-left: auto; }
  .header.is-open .dropdown {
    position: static;
    opacity: 1; pointer-events: auto;
    transform: none;
    border: none;
    box-shadow: none;
    background: rgba(0,0,0,0.25);
    margin-top: 8px;
    padding: 4px 0;
    width: 100%;
  }
  .theme-parchment .header.is-open .dropdown { background: rgba(101,65,22,0.06); }
  .header.is-open .nav__item.has-drop {
    flex-wrap: wrap;
  }

  /* Hero (главная) — высота меньше, лого читаемое */
  .hero { height: auto !important; min-height: 460px; }
  .hero__content { padding: 56px 20px 40px !important; }
  .logo__main { font-size: clamp(56px, 14vw, 92px) !important; letter-spacing: 0.08em !important; }
  .logo__sub { font-size: 16px !important; letter-spacing: 0.4em !important; }
  .logo__ornament-l, .logo__ornament-r { display: none; }
  .hero__slogan { font-size: 18px !important; }
  .hero__sub { font-size: 13px !important; }

  /* page-hero — компактнее */
  .page-hero { height: auto !important; min-height: 180px; }
  .page-hero__inner { padding: 48px 20px 24px; }
  .page-hero h1 { font-size: 30px; }
  .page-hero__art .motif { display: none; }

  /* CTA-band */
  .cta-band { margin-top: -32px !important; padding: 0 20px !important; }
  .cta-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .cta { padding: 14px 18px; }

  /* Two-column page grids → одна колонка */
  .page-grid,
  .fwrap,
  .acc-grid,
  .au-wrap .au-grid--3 {
    grid-template-columns: 1fr !important;
  }
  .side-col,
  .fside,
  .acc-side {
    position: static !important;
  }

  /* 4- и 3-колонные карточки сворачиваются попарно */
  .races,
  .shop-preview,
  .lib-list,
  .au-scores,
  .au-grid,
  .stat-strip,
  .au-check,
  .au-toc {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Stat-strip — внутренние левые границы убрать */
  .stat-strip .stat { border-left: none; border-top: 1px solid var(--line-soft); }
  .stat-strip .stat:first-child,
  .stat-strip .stat:nth-child(2) { border-top: none; }

  /* gallery → стек */
  .gallery {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }
  .gallery__cell:first-child { grid-row: auto !important; min-height: 240px; }
  .gallery__cell { min-height: 140px; }

  /* News rows — иконка наверху, "Подробнее" уезжает вниз */
  .news-row {
    grid-template-columns: 36px 1fr !important;
    gap: 14px !important;
  }
  .news-row__icon { width: 36px; height: 36px; }
  .news-row__icon svg { width: 18px; height: 18px; }
  .news-row__more {
    grid-column: 1 / -1;
    justify-self: start !important;
    margin-top: 6px !important;
  }
  .news-row__title { font-size: 18px; }

  /* About — фракции стэком */
  .about { grid-template-columns: 1fr !important; }
  .about__half--light { border-right: none; border-bottom: 1px solid var(--line-soft); }

  /* Footer */
  .footer__inner { padding: 24px 20px 16px; }
  .footer__nav { gap: 4px 0; }
  .footer__nav a { padding: 4px 10px; }
  .footer__nav a:first-child { padding-left: 0; }
  .footer__legal { gap: 4px 14px; }

  /* Cookie bar */
  .cookie-bar { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 12px 14px !important; }
}

/* ---- 560px ---- */
@media (max-width: 560px) {
  h1 { font-size: 32px; }
  h2 { font-size: 22px; }

  .races,
  .shop-preview,
  .lib-list,
  .au-scores,
  .au-grid,
  .stat-strip,
  .au-check,
  .au-toc,
  .gallery {
    grid-template-columns: 1fr !important;
  }
  .gallery__cell { min-height: 180px; }
  .stat-strip .stat { border-top: 1px solid var(--line-soft); }
  .stat-strip .stat:first-child { border-top: none; }

  .topbar__group { gap: 10px; font-size: 11px; }
  .topbar__icons { gap: 6px; }

  .page-hero h1 { font-size: 24px; }

  .crumbs { font-size: 10px; gap: 6px; margin: 16px 0 24px; flex-wrap: wrap; }

  .footer__nav a { font-size: 10px; padding: 4px 8px; }
  .footer__legal { font-size: 9.5px; }
}

/* Mobile нав. фон при открытом меню — закрыть тапом вне */
@media (max-width: 880px) {
  body.menu-open { overflow: hidden; }
}


/* ===========================================================
   PAGE HERO (per-page banner section)
   Originally in legacy layout.js, moved here so it's always
   loaded ahead of the page render (Blade @push from partials
   fires after @stack on the layout, losing the styles).
   =========================================================== */
.page-hero {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #050811 0%, #0a0d18 50%, #08070c 100%);
    isolation: isolate;
    /* Match the mockup: hero is clamped to the 1440px container. The
       legacy layout.js inserted it INSIDE `.container--lg page-body`,
       which gave the clamp; our Blade renders it as a body-level node,
       so apply the clamp directly here. */
    max-width: 1440px;
    margin: 0 auto;
}
.page-hero__art { position: absolute; inset: 0; pointer-events: none; }
.page-hero__art--image {
    transform-origin: 50% 55%;
    animation: pageHeroKenBurns 32s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes pageHeroKenBurns {
    0%   { transform: scale(1.04) translate(-0.6%, 0); }
    100% { transform: scale(1.10) translate(0.6%, -0.4%); }
}
.page-hero__sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.page-hero__sheen::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(255,250,240,0.06), transparent 70%);
    animation: pageHeroBreath 18s ease-in-out infinite alternate;
}
@keyframes pageHeroBreath {
    0%   { opacity: 0.55; transform: scale(1); }
    100% { opacity: 1;    transform: scale(1.04); }
}
.page-hero__mist {
    position: absolute;
    left: -10%; right: -10%; bottom: -10%;
    height: 55%;
    pointer-events: none;
    background:
      radial-gradient(ellipse 40% 70% at 25% 80%, rgba(231,200,120,0.10), transparent 60%),
      radial-gradient(ellipse 35% 60% at 75% 90%, rgba(180,160,200,0.08), transparent 60%);
    filter: blur(22px);
    animation: pageHeroMist 22s ease-in-out infinite alternate;
}
@keyframes pageHeroMist {
    0%   { transform: translateX(-3%); opacity: 0.7; }
    100% { transform: translateX(3%);  opacity: 1; }
}
@keyframes glowPulse   { 0%,100%{opacity:0.55}50%{opacity:0.95} }
@keyframes glowSheen   { 0%,100%{transform:translate(-50%,-50%) translateX(-6px)}50%{transform:translate(-50%,-50%) translateX(6px)} }
@keyframes glowTwinkle { 0%,100%{filter:blur(20px);opacity:0.7}50%{filter:blur(28px);opacity:1} }
@keyframes glowSpark   { 0%,100%{opacity:0.45;transform:translate(-50%,-50%) scale(1)}50%{opacity:0.85;transform:translate(-50%,-50%) scale(1.05)} }
@keyframes glowShimmer { 0%,100%{opacity:0.5}50%{opacity:0.85} }
@keyframes glowSparkle { 0%,100%{opacity:0.4}50%{opacity:0.9} }
@keyframes glowSplit   { 0%,100%{opacity:0.6}50%{opacity:0.95} }
@keyframes glowBeam    { 0%,100%{opacity:0.55}50%{opacity:0.85} }
.page-hero__glow.glow-pulse   { animation: glowPulse 6s ease-in-out infinite; }
.page-hero__glow.glow-sheen   { animation: glowSheen 8s ease-in-out infinite; }
.page-hero__glow.glow-twinkle { animation: glowTwinkle 5s ease-in-out infinite; }
.page-hero__glow.glow-spark   { animation: glowSpark 4s ease-in-out infinite; }
.page-hero__glow.glow-shimmer { animation: glowShimmer 7s ease-in-out infinite; }
.page-hero__glow.glow-sparkle { animation: glowSparkle 5s ease-in-out infinite; }
.page-hero__glow.glow-split   { animation: glowSplit 6s ease-in-out infinite; }
.page-hero__glow.glow-beam    { animation: glowBeam 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .page-hero__glow, .page-hero__art--image, .page-hero__sheen::before, .page-hero__mist { animation: none !important; }
}
.page-hero__inner {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 72px 32px 36px;
    height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.page-hero .eyebrow { margin-bottom: 8px; }
.page-hero h1 {
    font-size: 48px; line-height: 1.05;
    color: var(--ink); margin: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,0.7);
    max-width: min(70%, 900px);
    text-wrap: balance;
}
.page-hero::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.45;
    pointer-events: none;
}
/* Tight up the gap between a banner and the first content row.
   Default `.page-body` padding-top is 64px; with a banner sitting
   above, that doubles the gap. Drop it to 24px. */
.page-hero + main.page-body,
.page-hero + .page-body,
.page-hero + .container--lg.page-body,
.page-hero + .container--md.page-body {
    padding-top: 24px;
}
/* Headline of a banner can wrap onto a second line — the original cap
   of 70% / 900px chopped Russian titles like "Дневник разработки:
   наследие старого Теоса". */
.page-hero h1 {
    max-width: min(92%, 1100px);
}

/* ===== Chip — small tag/pill, used across news/forum/etc ===== */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: rgba(201,164,74,0.06);
    border: 1px solid var(--line-soft);
    border-radius: 2px;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chip:hover { color: var(--gold-bright); border-color: var(--gold); }
.chip + .chip { margin-left: 6px; }

/* ===== Pager — generic numbered pagination (shop/news) ===== */
.pager { display: flex; gap: 4px; align-items: center; }
.pager__btn {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line-soft);
    border-radius: 1px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: all 0.18s;
}
.pager__btn:hover { color: var(--gold-bright); border-color: var(--line-strong); background: rgba(201,164,74,0.06); }
.pager__btn.is-active { color: #0b0d12; background: var(--gold-bright); border-color: var(--gold); }
.pager__sep { color: var(--ink-faint); padding: 0 2px; font-size: 11px; }

/* ===== Form: .check (custom checkbox) — used on login/register/shop ===== */
.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-soft);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
    width: 16px; height: 16px;
    border: 1px solid var(--line);
    background: var(--bg-stripe);
    display: inline-grid; place-items: center;
    border-radius: 2px;
    transition: all 0.18s;
    flex-shrink: 0;
}
.check input:checked + .check__box {
    background: var(--gold);
    border-color: var(--gold);
}
.check input:checked + .check__box::after {
    content: '';
    width: 9px; height: 5px;
    border-left: 2px solid #0b0d12;
    border-bottom: 2px solid #0b0d12;
    transform: rotate(-45deg) translate(1px, -1px);
}
.check input[type="radio"]:checked + .check__box { border-radius: 50%; }
.check input[type="radio"] + .check__box { border-radius: 50%; }
.check input:focus + .check__box { outline: 2px solid rgba(201,164,74,0.25); outline-offset: 2px; }
.check:hover .check__box { border-color: var(--gold); }

/* ===== Textarea — was used in /gallery (banner-codes) but missing ===== */
.textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink);
    background: var(--bg-stripe);
    border: 1px solid var(--line);
    border-radius: 2px;
    outline: none;
    resize: vertical;
}
.textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,164,74,0.18); }

/* WYSIWYG composer (item #40) */
.wy { border: 1px solid var(--line); border-radius: 3px; background: rgba(0,0,0,0.12); overflow: hidden; }
.wy-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft); background: rgba(0,0,0,0.18); }
.wy-btn { min-width: 30px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center;
  justify-content: center; background: none; border: 1px solid transparent; border-radius: 2px;
  color: var(--ink-soft); cursor: pointer; font-size: 13px; transition: all .14s; }
.wy-btn:hover { color: var(--gold-bright); background: rgba(231,200,120,0.06); border-color: var(--line-soft); }
.wy-sep { width: 1px; height: 18px; background: var(--line-soft); margin: 0 4px; }
.wy-editable { min-height: 160px; padding: 14px 16px; outline: none; line-height: 1.65;
  color: var(--ink); font-size: 14px; }
.wy-editable:empty::before { content: attr(data-placeholder); color: var(--ink-faint); }
.wy-editable img { max-width: 100%; height: auto; border-radius: 3px; margin: 8px 0; }
.wy-editable blockquote { border-left: 3px solid var(--gold-dim); margin: 8px 0; padding: 4px 14px; color: var(--ink-mute); }
.wy-editable ul, .wy-editable ol { padding-left: 22px; margin: 8px 0; }
.wy-editable a { color: var(--gold-bright); text-decoration: underline; }

/* WYSIWYG preview + markdown mode (items #18/#20) */
.wy-spacer { flex: 1; }
.wy-btn--mode { font-size: 11px; padding: 0 10px; width: auto; letter-spacing: 0.06em; text-transform: uppercase; }
.wy-btn.is-active { color: var(--gold-bright); background: rgba(231,200,120,0.12); border-color: var(--gold-dim); }
.wy-preview { min-height: 160px; padding: 14px 16px; line-height: 1.65; color: var(--ink); border-top: 1px solid var(--line-soft); }
.wy-raw { width: 100%; min-height: 200px; padding: 14px 16px; background: rgba(0,0,0,0.22); border: 0; border-top: 1px solid var(--line-soft);
    color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.6; resize: vertical; outline: none; }

/* Rich markdown content — applies to rendered posts, the editor surface,
   the preview pane and signatures (item #20: headings, tables, fenced code,
   rules, strikethrough, task lists from the full GFM parser). */
.post__content h1, .post__content h2, .post__content h3, .post__content h4,
.wy-editable h1, .wy-editable h2, .wy-editable h3 {
  font-family: var(--font-display); color: var(--ink); line-height: 1.25; margin: 14px 0 8px; }
.post__content h1 { font-size: 24px; } .post__content h2 { font-size: 20px; }
.post__content h3 { font-size: 17px; } .post__content h4 { font-size: 15px; }
.post__content hr, .wy-editable hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.post__content del { opacity: 0.7; }
.post__content table, .wy-editable table { border-collapse: collapse; margin: 12px 0; width: 100%; font-size: 13px; }
.post__content th, .post__content td, .wy-editable th, .wy-editable td {
  border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.post__content thead th { background: rgba(201,164,74,0.08); color: var(--gold-bright); }
.post__content pre, .wy-editable pre {
  overflow-x: auto; padding: 12px 14px; background: rgba(0,0,0,0.32);
  border: 1px solid var(--line-soft); border-radius: 4px; margin: 10px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.5; }
.post__content pre code { background: none; padding: 0; font-size: inherit; }
.post__content input[type=checkbox] { margin-right: 6px; }

/* Editor image-layout bar (item #20) */
.wy-imgbar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); background: rgba(231,200,120,0.05); }
.wy-imgbar__lbl { font-size: 11px; color: var(--ink-mute); margin-right: 6px; letter-spacing: 0.04em; }
.wy-imgbar button { min-width: 30px; height: 26px; padding: 0 8px; background: none;
  border: 1px solid var(--line-soft); border-radius: 3px; color: var(--ink-soft);
  cursor: pointer; font-size: 12px; }
.wy-imgbar button:hover { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(231,200,120,0.08); }
.wy-editable img { cursor: pointer; }
.wy-editable img.is-selected { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The editor mirrors the post size/float classes so authors see the result. */
.wy-editable img.post__image--small  { width: 240px; max-width: 100%; }
.wy-editable img.post__image--medium { width: 440px; max-width: 100%; }
.wy-editable img.post__image--large  { width: 680px; max-width: 100%; }
.wy-editable img.post__image--full   { width: 100%; }
.wy-editable img.post__image--left   { float: left;  margin: 6px 18px 12px 0; }
.wy-editable img.post__image--right  { float: right; margin: 6px 0 12px 18px; }
.wy-editable img.post__image--center { display: block; margin-left: auto; margin-right: auto; }

/* Image cropper modal (item #17) */
.crop-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(6,7,11,0.78); backdrop-filter: blur(2px); padding: 20px; }
.crop-box { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 20px 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); max-width: 92vw; }
.crop-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-bottom: 14px; }
.crop-vp { position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.35); cursor: grab; touch-action: none; margin: 0 auto; }
.crop-vp:active { cursor: grabbing; }
.crop-img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.crop-ctl { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--ink-mute); }
.crop-ctl .crop-zoom { flex: 1; accent-color: var(--gold); }
.crop-hint { font-size: 11px; color: var(--ink-faint); margin-top: 8px; text-align: center; }
.crop-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.crop-actions button { padding: 8px 18px; border-radius: 3px; cursor: pointer; font: inherit; font-size: 13px; }
.crop-cancel { background: none; border: 1px solid var(--line); color: var(--ink-soft); }
.crop-apply { background: var(--gold); border: 1px solid var(--gold); color: #1a1206; font-weight: 600; }
.crop-apply:hover { background: var(--gold-bright); }

/* ===== Private messages — two-pane messenger (item #59) ===== */
.msgr { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: minmax(0, 1fr); height: 70vh; min-height: 460px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-panel); }
.msgr-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; min-height: 0; background: rgba(0,0,0,0.12); }
.msgr-side__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.msgr-side__title { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.msgr-newbtn { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1206; font-size: 18px; text-decoration: none; line-height: 1; }
.msgr-newbtn:hover { background: var(--gold-bright); }
.msgr-search { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.msgr-search input { width: 100%; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0,0,0,0.2); color: var(--ink); font-size: 13px; outline: none; }
.msgr-convs { flex: 1; overflow-y: auto; }
.msgr-conv { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-soft); position: relative; }
.msgr-conv:hover { background: rgba(231,200,120,0.05); }
.msgr-conv.is-active { background: rgba(231,200,120,0.10); }
.msgr-conv.is-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-bright); }
.msgr-conv__main { min-width: 0; }
.msgr-conv__top { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.msgr-conv__name { font-family: var(--font-display); font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msgr-conv.is-unread .msgr-conv__name { color: var(--gold-bright); }
.msgr-conv__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.msgr-conv__time { font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
/* Read receipt under the date in the conversation list (item #110). */
.msgr-conv__read { font-size: 9px; line-height: 1; color: var(--gold-dim); white-space: nowrap; letter-spacing: 0.02em; }
.msgr-conv__snippet { display: block; font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.msgr-conv__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 6px var(--gold-bright); }
.msgr-empty-list { padding: 24px 16px; text-align: center; color: var(--ink-mute); font-size: 13px; }
.msgr-empty-list a, .msgr-empty a { color: var(--gold-bright); }
.msgr-av { width: 40px; height: 40px; flex: none; border-radius: 50%; background-color: rgba(0,0,0,0.3); background-size: cover; background-position: center; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-display); font-size: 14px; color: var(--gold); }
.msgr-av--lg { width: 44px; height: 44px; font-size: 16px; }
.msgr-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.msgr-main--empty { align-items: center; justify-content: center; }
.msgr-empty { text-align: center; color: var(--ink-mute); }
.msgr-empty svg { color: var(--gold-dim); margin-bottom: 12px; }
.msgr-chat__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.14); }
.msgr-back { display: none; font-size: 24px; color: var(--ink-soft); text-decoration: none; line-height: 1; }
.msgr-chat__who { min-width: 0; }
.msgr-chat__name { font-family: var(--font-display); font-size: 15px; color: var(--ink); text-decoration: none; }
.msgr-chat__name:hover { color: var(--gold-bright); }
.msgr-chat__subj { display: block; font-size: 11px; color: var(--ink-mute); }
.msgr-chat__del { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 15px; }
.msgr-chat__del:hover { color: var(--fury-2); }
.msgr-feed { flex: 1; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 6px; }
.msgr-daysep { text-align: center; margin: 10px 0; }
.msgr-daysep span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); background: rgba(0,0,0,0.25); padding: 3px 12px; border-radius: 999px; }
.msgr-row { display: flex; }
.msgr-row.is-mine { justify-content: flex-end; }
.msgr-bubble { max-width: 72%; padding: 9px 13px 6px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,0.18); }
.msgr-row.is-mine .msgr-bubble { background: linear-gradient(135deg, rgba(231,200,120,0.16), rgba(201,164,74,0.08)); border-color: var(--gold-dim); border-bottom-right-radius: 4px; }
.msgr-row:not(.is-mine) .msgr-bubble { border-bottom-left-radius: 4px; }
.msgr-bubble__text { line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: 13.5px; }
.msgr-bubble__time { display: block; text-align: right; font-size: 9.5px; color: var(--ink-faint); margin-top: 3px; }
.msgr-composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(0,0,0,0.14); }
.msgr-composer textarea { flex: 1; resize: none; max-height: 140px; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(0,0,0,0.22); color: var(--ink); font: inherit; font-size: 13.5px; outline: none; }
.msgr-composer textarea:focus { border-color: var(--gold-dim); }
.msgr-composer > button[type="submit"] { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--gold); color: #1a1206; cursor: pointer; display: grid; place-items: center; }
.msgr-composer > button[type="submit"]:hover { background: var(--gold-bright); }

/* ----- Messenger expansion: menu, attachments, receipts, blocking ----- */
/* Header actions menu (⋯) */
.msgr-menu-wrap { position: relative; margin-left: auto; }
.msgr-chat__more { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 6px; }
.msgr-chat__more:hover { color: var(--gold-bright); background: rgba(231,200,120,0.08); }
.msgr-menu { position: absolute; top: 110%; right: 0; min-width: 200px; z-index: 30; background: var(--bg-panel-2, #15110a); border: 1px solid var(--line); border-radius: 8px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 2px; }
.msgr-menu[hidden] { display: none; }
.msgr-menu form { margin: 0; }
.msgr-menu__item { width: 100%; text-align: left; background: none; border: 0; color: var(--ink-soft); font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 5px; cursor: pointer; }
.msgr-menu__item:hover { background: rgba(231,200,120,0.08); color: var(--gold-bright); }
.msgr-menu__item--warn:hover { background: rgba(190,60,60,0.12); color: var(--fury-2); }

/* Attachments in bubbles */
.msgr-bubble__img { display: block; margin-bottom: 6px; }
.msgr-bubble__img img { display: block; max-width: 240px; max-height: 240px; border-radius: 8px; border: 1px solid var(--line); }
.msgr-bubble__file { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,0.2); color: var(--ink); text-decoration: none; max-width: 260px; }
.msgr-bubble__file:hover { border-color: var(--gold-dim); }
.msgr-bubble__file svg { color: var(--gold); flex: none; }
.msgr-bubble__file-meta { min-width: 0; display: flex; flex-direction: column; }
.msgr-bubble__file-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-bubble__file-meta small { color: var(--ink-faint); font-size: 10px; }

/* Delete-own-message control + read receipt */
.msgr-bubble__time { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.msgr-bubble__del { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 11px; padding: 0; opacity: 0; transition: opacity .15s, color .15s; }
.msgr-bubble:hover .msgr-bubble__del { opacity: 1; }
.msgr-bubble__del:hover { color: var(--fury-2); }
.msgr-bubble__del form { display: inline; margin: 0; }
.msgr-receipt { text-align: right; font-size: 10px; color: var(--gold-dim); padding: 2px 4px 0; }

/* Composer: paperclip + chosen-file name */
.msgr-attach { flex: none; width: 38px; height: 40px; display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; border-radius: 8px; }
.msgr-attach:hover { color: var(--gold-bright); background: rgba(231,200,120,0.08); }
.msgr-composer__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.msgr-composer__field textarea { width: 100%; }
.msgr-attach-name { font-size: 11px; color: var(--gold-dim); padding-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-composer--blocked { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-top: 1px solid var(--line); background: rgba(0,0,0,0.14); color: var(--ink-mute); font-size: 13px; }

@media (max-width: 760px) {
  .msgr { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; min-height: 0; }
  .msgr:has(.msgr-main--empty) .msgr-main { display: none; }
  .msgr:not(:has(.msgr-main--empty)) .msgr-side { display: none; }
  .msgr-feed { height: 60vh; }
  .msgr-back { display: inline-grid; }
}

/* ----- Group conversations (беседы) + new-conversation picker ----- */
.msgr-av--group { background-color: rgba(78,128,180,0.18); color: var(--gold-bright); }
.msgr-av--group svg { width: 55%; height: 55%; }
.msgr-bubble__author { display: block; font-size: 11px; font-family: var(--font-display); color: var(--gold-bright); text-decoration: none; margin-bottom: 3px; }
.msgr-bubble__author:hover { text-decoration: underline; }

.msgr-new { display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow-y: auto; }
.msgr-new__search { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.2); }
.msgr-new__search svg { color: var(--ink-faint); flex: none; }
.msgr-new__search input { flex: 1; background: none; border: 0; color: var(--ink); font: inherit; font-size: 13.5px; outline: none; }
.msgr-new__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.msgr-new__chips:empty { display: none; }
.msgr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; background: rgba(231,200,120,0.12); border: 1px solid var(--gold-dim); color: var(--ink); font-size: 12.5px; }
.msgr-chip button { background: none; border: 0; color: var(--ink-mute); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.msgr-chip button:hover { color: var(--fury-2); }
.msgr-new__results { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px; }
.msgr-new__hint { padding: 14px; text-align: center; color: var(--ink-mute); font-size: 12.5px; }
.msgr-new__user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: none; border: 0; border-radius: 6px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.msgr-new__user:hover { background: rgba(231,200,120,0.07); }
.msgr-new__user .msgr-av { width: 32px; height: 32px; font-size: 12px; }
.msgr-new__user-name { font-size: 13.5px; }
.msgr-new__group input { width: 100%; }
.msgr-new__compose { display: flex; align-items: flex-end; gap: 8px; }
.msgr-new__compose textarea { flex: 1; resize: vertical; min-height: 44px; max-height: 160px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,0.22); color: var(--ink); font: inherit; font-size: 13.5px; outline: none; }
.msgr-new__compose textarea:focus { border-color: var(--gold-dim); }
.msgr-new__actions { display: flex; gap: 10px; }

/* ----- Group management: members panel, system notes ----- */
.msgr-chat__members-btn { background: none; border: 0; padding: 0; color: var(--ink-mute); font: inherit; font-size: 11px; cursor: pointer; text-align: left; }
.msgr-chat__members-btn:hover { color: var(--gold-bright); text-decoration: underline; }
.msgr-av--sm { width: 30px; height: 30px; flex: none; font-size: 11px; }
.msgr-members { border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.18); padding: 14px 16px; max-height: 60%; overflow-y: auto; }
.msgr-members[hidden] { display: none; }
.msgr-members__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.msgr-members__head strong { font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.msgr-members__close { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 14px; }
.msgr-members__close:hover { color: var(--fury-2); }
.msgr-members__admin { display: flex; flex-direction: column; gap: 8px; padding: 10px; margin-bottom: 10px; border: 1px dashed var(--line-soft); border-radius: 8px; }
.msgr-members__row-form { display: flex; gap: 8px; margin: 0; }
.msgr-members__row-form .input, .msgr-members__row-form input[type="file"] { flex: 1; min-width: 0; }
.msgr-members__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.msgr-members__item { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.msgr-members__name { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
.msgr-members__name a { color: var(--ink); text-decoration: none; }
.msgr-members__name a:hover { color: var(--gold-bright); }
.msgr-members__badge { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #1a1206; background: var(--gold); padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.msgr-members__actions { display: flex; gap: 4px; flex: none; }
.msgr-members__actions form { margin: 0; }
.msgr-members__act { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,0.2); color: var(--ink-soft); cursor: pointer; font-size: 12px; }
.msgr-members__act:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.msgr-members__act--warn:hover { color: var(--fury-2); border-color: var(--fury-2); }
.msgr-sysnote { text-align: center; margin: 6px 0; }
.msgr-sysnote span { font-size: 11px; color: var(--ink-faint); background: rgba(0,0,0,0.22); padding: 4px 14px; border-radius: 999px; display: inline-block; }
/* Phones: stack the cramped admin forms + give the panel room. */
@media (max-width: 600px) {
  .msgr-members { max-height: 70%; }
  .msgr-members__row-form { flex-wrap: wrap; }
  .msgr-members__row-form .input,
  .msgr-members__row-form input[type="file"] { flex: 1 1 100%; }
  .msgr-members__row-form .btn { flex: 0 0 auto; }
  .msgr-new__compose { flex-wrap: wrap; }
  .msgr-new__compose textarea { flex: 1 1 100%; order: 2; }
}

/* ===== SVG image CAPTCHA (item #35) ===== */
.captcha { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.captcha__img { line-height: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #161009; flex: none; }
.captcha__img svg { display: block; width: 220px; height: 70px; max-width: 100%; user-select: none; -webkit-user-select: none; pointer-events: none; }
.captcha__refresh { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,0.2); color: var(--ink-soft); cursor: pointer; transition: color .15s, border-color .15s; }
.captcha__refresh:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.captcha__refresh:disabled { opacity: 0.5; cursor: default; }
.captcha__input { max-width: 280px; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-display, inherit); }
@media (max-width: 480px) {
  .captcha__img svg { width: 180px; height: 58px; }
}

/* ===== Mobile safety net (item #30) =====
   Long unbreakable strings (URLs, nicknames, codes) and wide media must
   never punch out of their box on phones. Images are already capped
   globally; this catches text and embeds. */
@media (max-width: 760px) {
  main p, main li, .panel, .post__content, .msgr-bubble__text,
  .uprof-head__bio, .topic__title, .crumbs { overflow-wrap: break-word; word-break: break-word; }
  main table { display: block; width: 100%; overflow-x: auto; }
  main video, main iframe, main embed { max-width: 100%; }
}

/* ===== Cookie consent bar =====
   Lives in shared.css (always in <head>) — it used to be pushed to the
   styles stack from a body-included partial, which rendered AFTER the head
   stack had already output, so the banner showed up completely unstyled. */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200;
  max-width: 780px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px 16px; align-items: center;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(22,26,36,0.97), rgba(13,16,23,0.98));
  border: 1px solid var(--gold-dim); border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink-soft); font-family: var(--font-ui); font-size: 12.5px; line-height: 1.6;
  animation: cookieBarIn .45s cubic-bezier(.2,.7,.3,1) both;
}
.cookie-bar::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .6;
}
.cookie-bar__ic {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: rgba(231,200,120,0.10); border: 1px solid var(--gold-dim); color: var(--gold-bright);
}
.cookie-bar__ic svg { width: 19px; height: 19px; }
.cookie-bar__text strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 13.5px; margin-bottom: 2px; }
.cookie-bar a { color: var(--gold-bright); border-bottom: 1px dotted var(--gold-dim); }
.cookie-bar a:hover { color: var(--gold); }
.cookie-bar__btn {
  appearance: none; padding: 10px 22px; font-family: var(--font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0b0d12;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-2));
  border: 1px solid var(--gold-dim); border-radius: 6px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(201,164,74,0.25); transition: filter 0.18s, transform 0.1s; white-space: nowrap;
}
.cookie-bar__btn:hover { filter: brightness(1.08); }
.cookie-bar__btn:active { transform: translateY(1px); }
@keyframes cookieBarIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .cookie-bar { grid-template-columns: auto 1fr; gap: 10px 12px; padding: 14px 16px; left: 10px; right: 10px; bottom: 10px; }
  .cookie-bar__btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}