/* =============================================================
   OnlyMine — Azuriom Theme v2.0
   © 2026 OnlyMine. All rights reserved.

   Table of contents
     §1  Design tokens
     §1b Light colour scheme (data-bs-theme="light")
     §2  Bootstrap 5 variable overrides
     §3  Base & reset
     §4  Typography
     §5  Utility classes
     §6  Component: Button (om-btn)
     §7  Component: Card (om-card)
     §8  Component: Badge (om-badge)
     §9  Component: Alert (om-alert)
     §10 Component: Callout (om-callout)
     §11 Component: Form overrides
     §12 Component: Table
     §13 Layout: Navbar (om-navbar)
     §14 Layout: Footer (om-footer)
     §15 Section: Hero (om-hero)
     §16 Section: Stats bar (om-statsbar)
     §17 Section: Launcher CTA (om-launcher-cta)
     §18 Section: Feature grid (om-features)
     §19 Section: Screenshot carousel (om-carousel)
     §20 Section: News grid (om-news)
     §21 Section: Community (om-community)
     §22 Inner pages
     §23 Responsive (≤ 900 px, ≤ 600 px)
   ============================================================= */

/* ── §1 Design tokens ──────────────────────────────────────────
   Значения ниже — тёмная схема (она же схема по умолчанию).
   Светлая описана в §1b и переопределяет ровно эти же переменные,
   поэтому ни одно правило дальше по файлу не должно содержать
   «сырых» цветов: каждый цвет обязан приходить из токена.
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Background scale */
  --om-bg-base:    #100f0d;
  --om-bg-1:       #171613;
  --om-bg-2:       #201e1a;
  --om-bg-3:       #2a2722;
  --om-bg-4:       #35322b;

  /* Borders */
  --om-border:     #37332b;
  --om-border-hi:  #4a4539;

  /* Text */
  --om-text:       #e8e4da;
  --om-text-2:     #a49c8d;
  --om-text-3:     #8f8779;

  /* Primary accent — moss green (natural, not neon) */
  --om-green:      #8fb85c;
  --om-green-hi:   #a8cf74;
  --om-green-lo:   #6f9642;
  --om-green-deep: #47632a;
  --om-green-sub:  rgba(143,184,92, .10);
  --om-green-sub2: rgba(143,184,92, .06);

  /* Secondary accents */
  --om-gold:      #d9a441;
  --om-gold-sub:  rgba(217,164,65,.12);
  --om-red:       #c4503a;
  --om-red-sub:   rgba(196,80,58,.12);
  --om-red-sub2:  rgba(196,80,58,.06);
  --om-red-hi:    #b4472f;   /* тёмный красный: под белым текстом */
  --om-red-lo:    #a33f2c;   /* кромка красной кнопки */
  --om-red-text:    #dfa295; /* «красный» текст на нейтральной подложке */
  --om-red-text-hi: #eec7bc;
  --om-blue:      #6b93b0;
  --om-blue-sub:  rgba(107,147,176,.12);

  /* Текст поверх заливки акцентом (контрастная пара) */
  --om-on-green: #131a09;
  --om-on-gold:  #241a06;
  --om-on-red:   #ffffff;
  --om-on-blue:  #0a1319;

  /* Волосяные кромки поверх тонированных подложек */
  --om-green-line:  rgba(143,184,92,.25);
  --om-green-line2: rgba(143,184,92,.14);
  --om-gold-line:   rgba(217,164,65,.25);
  --om-red-line:    rgba(196,80,58,.25);
  --om-red-line2:   rgba(196,80,58,.16);
  --om-blue-line:   rgba(107,147,176,.20);

  /* Хром интерфейса */
  --om-navbar-bg:  rgba(16,15,13,.88);
  --om-scrim:      rgba(16,15,13,.75);
  --om-dot-idle:   rgba(255,255,255,.30);
  --om-role-line:  rgba(255,255,255,.14);
  --om-btn-gloss:  rgba(255,255,255,.20);
  --om-focus-ring: rgba(143,184,92,.18);

  /* Фоновые свечения (hero, футер, шапка профиля) */
  --om-glow-1:      rgba(143,184,92,.07);
  --om-glow-2:      rgba(107,147,176,.04);
  --om-footer-glow: rgba(143,184,92,.045);
  --om-footer-line: rgba(143,184,92,.45);
  --om-banner-1:    rgba(143,184,92,.22);
  --om-banner-2:    rgba(107,147,176,.10);
  --om-banner-grid: rgba(143,184,92,.05);

  /* Инверсия монохромных SVG-иконок Bootstrap (крестик, шеврон) */
  --om-close-filter:   invert(1) grayscale(1) brightness(1.8);
  --om-chevron-filter: invert(1) brightness(1.2);

  /* Компоненты палитры для переменных Bootstrap (--bs-*-rgb) */
  --om-green-rgb:    143, 184, 92;
  --om-green-hi-rgb: 168, 207, 116;
  --om-gold-rgb:     217, 164, 65;
  --om-red-rgb:      196, 80, 58;
  --om-blue-rgb:     107, 147, 176;
  --om-text-2-rgb:   164, 156, 141;

  /* Shadows */
  --om-shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --om-shadow-md: 0 4px 16px rgba(0,0,0,.55);
  --om-shadow-lg: 0 8px 40px rgba(0,0,0,.65);
  --om-shadow-alert: 0 10px 28px rgba(0,0,0,.35);

  /* Radius */
  --om-r-sm: 6px;
  --om-r-md: 10px;
  --om-r-lg: 16px;

  /* Transition */
  --om-t: 160ms ease;
}

/* ── §1b Light colour scheme ────────────────────────────────────
   Включается атрибутом data-bs-theme="light" на <html>. Атрибут
   ставит инлайновый скрипт в <head> ещё до отрисовки: при первом
   визите — по системной теме (prefers-color-scheme), дальше — по
   выбору игрока из localStorage['om-theme'].

   Зелёный/золотой/синий здесь заметно темнее: на светлой подложке
   они работают как ЦВЕТ ТЕКСТА и обязаны давать ≥ 4.5:1 к белому.
   Поэтому же контрастные пары --om-on-* становятся белыми.
   ────────────────────────────────────────────────────────────── */
[data-bs-theme="light"] {
  color-scheme: light;

  --om-bg-base:    #f3f1ec;
  --om-bg-1:       #f8f7f3;
  --om-bg-2:       #ffffff;
  --om-bg-3:       #eeebe3;
  --om-bg-4:       #e2ded2;

  --om-border:     #ddd8cb;
  --om-border-hi:  #c1baa8;

  --om-text:       #1d1b16;
  --om-text-2:     #5c574c;
  --om-text-3:     #6f6858;

  /* Зелёный сажаем ещё глубже, чем «просто читаемый на белом»: он же
     служит текстом поверх собственной подложки --om-green-sub, а это
     ещё −1 к контрасту. На #527d23 бейдж «Сервер онлайн» давал 3.7:1. */
  --om-green:      #46701b;
  --om-green-hi:   #35550f;   /* hover темнее, а не светлее */
  --om-green-lo:   #3c6117;
  --om-green-deep: #27400c;
  --om-green-sub:  rgba(70,112,27,.10);
  --om-green-sub2: rgba(70,112,27,.06);

  --om-gold:      #8a6205;
  --om-gold-sub:  rgba(138,98,5,.12);
  --om-red:       #b03a25;
  --om-red-sub:   rgba(176,58,37,.10);
  --om-red-sub2:  rgba(176,58,37,.05);
  --om-red-hi:    #8f2c1a;
  --om-red-lo:    #8f2c1a;
  --om-red-text:    #96301c;
  --om-red-text-hi: #6f2213;
  --om-blue:      #2f6b8c;
  --om-blue-sub:  rgba(47,107,140,.10);

  --om-on-green: #ffffff;
  --om-on-gold:  #ffffff;
  --om-on-red:   #ffffff;
  --om-on-blue:  #ffffff;

  --om-green-line:  rgba(70,112,27,.32);
  --om-green-line2: rgba(70,112,27,.20);
  --om-gold-line:   rgba(138,98,5,.30);
  --om-red-line:    rgba(176,58,37,.30);
  --om-red-line2:   rgba(176,58,37,.20);
  --om-blue-line:   rgba(47,107,140,.26);

  --om-navbar-bg:  rgba(248,247,243,.90);
  --om-scrim:      rgba(255,255,255,.80);
  --om-dot-idle:   rgba(29,27,22,.25);
  --om-role-line:  rgba(29,27,22,.14);
  --om-btn-gloss:  rgba(255,255,255,.16);
  --om-focus-ring: rgba(70,112,27,.22);

  --om-glow-1:      rgba(70,112,27,.10);
  --om-glow-2:      rgba(47,107,140,.06);
  --om-footer-glow: rgba(70,112,27,.07);
  --om-footer-line: rgba(70,112,27,.35);
  --om-banner-1:    rgba(70,112,27,.16);
  --om-banner-2:    rgba(47,107,140,.10);
  --om-banner-grid: rgba(70,112,27,.07);

  /* Иконки Bootstrap на светлом уже тёмные — инвертировать нечего */
  --om-close-filter:   none;
  --om-chevron-filter: none;

  --om-shadow-sm: 0 1px 2px rgba(31,28,20,.10);
  --om-shadow-md: 0 4px 16px rgba(31,28,20,.12);
  --om-shadow-lg: 0 8px 32px rgba(31,28,20,.16);
  --om-shadow-alert: 0 10px 28px rgba(31,28,20,.12);

  --om-green-rgb:    70, 112, 27;
  --om-green-hi-rgb: 53, 85, 15;
  --om-gold-rgb:     138, 98, 5;
  --om-red-rgb:      176, 58, 37;
  --om-blue-rgb:     47, 107, 140;
  --om-text-2-rgb:   92, 87, 76;
}

/* Гасилка переходов на время смены схемы.

   Без неё Chrome оставляет СТАРЫЙ цвет на каждом элементе, у которого
   объявлен transition для свойства, взятого из var(): смена токена на
   <html> такой элемент не перерисовывает, и после переключения навбар,
   карточки и кнопки остаются тёмными до перезагрузки страницы.
   onlymine.js вешает класс, меняет data-bs-theme, дёргает reflow и
   снимает класс — заодно уходит и «радуга» из 160 ms-переходов. */
.om-no-transition,
.om-no-transition *,
.om-no-transition *::before,
.om-no-transition *::after {
  transition: none !important;
}

/* ── §2 Bootstrap 5 variable overrides ─────────────────────── */
/* Injected early so Bootstrap components inherit our palette  */
:root {
  --bs-body-bg:           var(--om-bg-1);
  --bs-body-color:        var(--om-text);
  --bs-border-color:      var(--om-border);
  --bs-card-bg:           var(--om-bg-2);
  --bs-link-color:        var(--om-green);
  --bs-link-hover-color:  var(--om-green-hi);
  --bs-primary:           var(--om-green);
  /* Bootstrap ждёт компоненты, а не цвет: держим их отдельными
     токенами (--om-*-rgb), чтобы светлая схема меняла и их тоже. */
  --bs-primary-rgb:       var(--om-green-rgb);
  --bs-secondary-rgb:     var(--om-text-2-rgb);
  --bs-danger-rgb:        var(--om-red-rgb);
  --bs-success-rgb:       var(--om-green-rgb);
  --bs-warning-rgb:       var(--om-gold-rgb);
  --bs-link-color-rgb:       var(--om-green-rgb);
  --bs-link-hover-color-rgb: var(--om-green-hi-rgb);
  --bs-border-radius:     var(--om-r-sm);
  --bs-border-radius-lg:  var(--om-r-md);
  --bs-font-sans-serif:   'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bs-font-monospace:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;
}

/* ── §3 Base & reset ────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--om-bg-base);
  color: var(--om-text);
  font-family: var(--bs-font-sans-serif);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--om-green);
  text-decoration: none;
  transition: color var(--om-t);
}
a:hover { color: var(--om-green-hi); }

img { max-width: 100%; display: block; }

::selection {
  background: var(--om-green);
  color: var(--om-bg-base);
}

/* ── §4 Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--om-text);
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

code, kbd, pre, .om-mono {
  font-family: var(--bs-font-monospace);
  font-size: .875em;
}

code {
  background: var(--om-bg-3);
  border: 1px solid var(--om-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--om-green);
}

pre {
  background: var(--om-bg-2);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-sm);
  padding: 16px;
  overflow-x: auto;
  color: var(--om-text);
  margin: 0 0 1em;
}

ul, ol { padding-left: 1.4em; margin: 0 0 1em; }
li { margin-bottom: .3em; }

blockquote {
  margin: 0 0 1em;
  padding: 12px 16px;
  border-left: 3px solid var(--om-green);
  background: var(--om-green-sub2);
  border-radius: 0 var(--om-r-sm) var(--om-r-sm) 0;
  color: var(--om-text-2);
}

hr {
  border: none;
  border-top: 1px solid var(--om-border);
  margin: 2em 0;
}

.om-section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--om-green);
  margin-bottom: 10px;
}

.om-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 6px;
}

.om-section-sub {
  color: var(--om-text-2);
  font-size: 1rem;
  max-width: 560px;
}

/* ── §5 Utility classes ─────────────────────────────────────── */
.om-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

.om-section {
  padding-block: 72px;
}

.om-section--sm {
  padding-block: 48px;
}

.om-text-muted  { color: var(--om-text-2) !important; }
.om-text-green  { color: var(--om-green) !important; }
.om-text-gold   { color: var(--om-gold) !important; }
.om-text-red    { color: var(--om-red) !important; }
.om-mono        { font-family: var(--bs-font-monospace); }

.om-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--om-border), transparent);
  margin-block: 48px;
}

/* ── §6 Component: Button ───────────────────────────────────── */
.om-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--om-r-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--om-t), color var(--om-t),
              border-color var(--om-t), transform 80ms ease,
              box-shadow var(--om-t);
  white-space: nowrap;
  user-select: none;
}
.om-btn:active { transform: translateY(1px); }
.om-btn:disabled,
.om-btn[disabled] { opacity: .45; pointer-events: none; }

/* Primary — green */
.om-btn--primary {
  background: var(--om-green);
  color: var(--om-on-green);
  border-color: var(--om-green-lo);
  box-shadow: 0 1px 0 var(--om-btn-gloss) inset,
              0 2px 0 var(--om-green-deep);
}
.om-btn--primary:hover {
  background: var(--om-green-hi);
  color: var(--om-on-green);
  border-color: var(--om-green);
}

/* Secondary — ghost */
.om-btn--secondary {
  background: transparent;
  color: var(--om-text);
  border-color: var(--om-border-hi);
}
.om-btn--secondary:hover {
  background: var(--om-bg-3);
  color: var(--om-text);
  border-color: var(--om-green);
}

/* Danger */
.om-btn--danger {
  background: var(--om-red);
  color: var(--om-on-red);
  border-color: var(--om-red-lo);
}
.om-btn--danger:hover { background: var(--om-red-hi); color: var(--om-on-red); }

/* Sizes */
.om-btn--sm { padding: 7px 14px; font-size: 13px; }
.om-btn--lg { padding: 14px 28px; font-size: 15px; }
.om-btn--xl { padding: 16px 32px; font-size: 16px; }

/* Icon-only */
.om-btn--icon { padding: 10px; }

/* ── §7 Component: Card ─────────────────────────────────────── */
.om-card {
  background: var(--om-bg-2);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-md);
  overflow: hidden;
}

.om-card--raised {
  box-shadow: var(--om-shadow-md);
}

.om-card__body { padding: 24px; }
.om-card__header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--om-border);
  font-weight: 600;
  font-size: .95rem;
}
.om-card__footer {
  padding: 14px 24px;
  border-top: 1px solid var(--om-border);
}

/* ── §8 Component: Badge ────────────────────────────────────── */
.om-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.om-badge--green {
  background: var(--om-green-sub);
  border-color: var(--om-green-line);
  color: var(--om-green);
}
.om-badge--gold {
  background: var(--om-gold-sub);
  border-color: var(--om-gold-line);
  color: var(--om-gold);
}
.om-badge--red {
  background: var(--om-red-sub);
  border-color: var(--om-red-line);
  color: var(--om-red);
}
.om-badge--neutral {
  background: var(--om-bg-3);
  border-color: var(--om-border);
  color: var(--om-text-2);
}

/* Status dot */
.om-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: om-pulse 2.4s infinite;
  flex-shrink: 0;
}
@keyframes om-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%       { box-shadow: 0 0 0 5px transparent; }
}

/* ── §9 Component: Alert ────────────────────────────────────── */
/* Solid card, not a colour wash: a tinted background reads as "barely
   there" against the dark theme, so these use the same opaque surface as
   every other card plus a coloured left rail + icon to signal severity. */
.om-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 40px 14px 16px;
  border-radius: var(--om-r-sm);
  border: 1px solid var(--om-border-hi);
  border-left: 3px solid transparent;
  background: var(--om-bg-3);
  box-shadow: var(--om-shadow-alert);
  color: var(--om-text);
  font-size: 14px;
  line-height: 1.5;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}
/* Starting state for the fade-in, toggled off one frame after insert by JS.
   A CSS animation would work too, but its fill-mode keeps "winning" over the
   transition used for fade-out, so the leave transition never plays until
   something else forces a style recalc (e.g. hovering). Plain transitions
   for both directions avoid that fight entirely. */
.om-alert.is-entering { opacity: 0; transform: translateY(-8px); }
.om-alert.is-leaving { opacity: 0; transform: translateY(-6px); }

.om-alert--success { border-left-color: var(--om-green); }
.om-alert--success i { color: var(--om-green); }
.om-alert--danger { border-left-color: var(--om-red); }
.om-alert--danger i { color: var(--om-red); }
.om-alert--warning { border-left-color: var(--om-gold); }
.om-alert--warning i { color: var(--om-gold); }
.om-alert--info { border-left-color: var(--om-blue); }
.om-alert--info i { color: var(--om-blue); }

.om-alert__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--om-r-sm);
  background: transparent;
  color: var(--om-text-3);
  font-size: 11px;
  cursor: pointer;
  transition: background var(--om-t), color var(--om-t);
}
.om-alert__close:hover { background: var(--om-bg-4); color: var(--om-text); }

.om-alerts {
  position: sticky;
  top: 60px;
  z-index: 400;
}
.om-alerts .om-container { padding-block: 8px; display: flex; flex-direction: column; gap: 8px; }

/* ── §10 Component: Callout ─────────────────────────────────── */
.om-callout {
  padding: 18px 20px;
  border-radius: var(--om-r-md);
  border-left: 4px solid;
  margin-bottom: 1.2em;
}
.om-callout--warning {
  background: var(--om-gold-sub);
  border-color: var(--om-gold);
}
.om-callout--danger {
  background: var(--om-red-sub);
  border-color: var(--om-red);
}
.om-callout--info {
  background: var(--om-blue-sub);
  border-color: var(--om-blue);
}
.om-callout__title {
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

/* ── §11 Component: Form overrides ─────────────────────────── */
.form-control,
.form-select {
  background-color: var(--om-bg-1);
  border-color: var(--om-border);
  color: var(--om-text);
  transition: border-color var(--om-t), box-shadow var(--om-t);
}
.form-control::placeholder { color: var(--om-text-3); }
.form-control:focus,
.form-select:focus {
  background-color: var(--om-bg-1);
  border-color: var(--om-green-lo);
  color: var(--om-text);
  box-shadow: 0 0 0 3px var(--om-focus-ring);
}
.form-control.is-invalid { border-color: var(--om-red); }
.form-control.is-valid   { border-color: var(--om-green-lo); }

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--om-text-2);
  margin-bottom: 6px;
}

/* Checkbox & radio */
.form-check-input {
  background-color: var(--om-bg-2);
  border-color: var(--om-border-hi);
}
.form-check-input:checked {
  background-color: var(--om-green-lo);
  border-color: var(--om-green-lo);
}

/* Bootstrap card/pagination/etc */
.card {
  background: var(--om-bg-2);
  border-color: var(--om-border);
  color: var(--om-text);
}
.card-header, .card-footer {
  border-color: var(--om-border);
  background: var(--om-bg-3);
}

.pagination .page-link {
  background: var(--om-bg-2);
  border-color: var(--om-border);
  color: var(--om-text-2);
}
.pagination .page-link:hover {
  background: var(--om-bg-3);
  color: var(--om-text);
}
.pagination .page-item.active .page-link {
  background: var(--om-green-lo);
  border-color: var(--om-green-lo);
  color: var(--om-on-green);
}

/* ── §12 Component: Table ───────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--om-bg-2);
  --bs-table-hover-bg: var(--om-bg-3);
  --bs-table-border-color: var(--om-border);
  color: var(--om-text);
}
.table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--om-text-2);
  border-bottom-color: var(--om-border-hi);
}
/* Plugins (e.g. support tickets) hardcode <thead class="table-dark">, which
   bakes in Bootstrap's stock #212529/#fff pair — always dark regardless of
   the active scheme. Repoint it at our tokens so it follows light/dark. */
.table-dark {
  --bs-table-color: var(--om-text);
  --bs-table-bg: var(--om-bg-3);
  --bs-table-border-color: var(--om-border-hi);
  --bs-table-striped-color: var(--om-text);
  --bs-table-striped-bg: var(--om-bg-2);
  --bs-table-active-color: var(--om-text);
  --bs-table-active-bg: var(--om-bg-3);
  --bs-table-hover-color: var(--om-text);
  --bs-table-hover-bg: var(--om-bg-3);
  color: var(--om-text);
  border-color: var(--om-border-hi);
}

/* ── §13 Layout: Navbar ─────────────────────────────────────── */
.om-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 60px;
  background: var(--om-navbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--om-border);
  display: flex;
  align-items: center;
}

.om-navbar__inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}

/* Logo */
.om-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 28px;
}
.om-logo__img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
}
.om-logo__text {
  font-size: 17px;
  font-weight: 800;
  color: var(--om-text);
  letter-spacing: -.02em;
}
.om-logo__text span { color: var(--om-green); }
.om-logo:hover .om-logo__text { color: var(--om-text); }

/* Nav links */
.om-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.om-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: var(--om-r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--om-text-2);
  text-decoration: none;
  transition: background var(--om-t), color var(--om-t);
  white-space: nowrap;
}
.om-nav__link:hover,
.om-nav__link--active {
  background: var(--om-green-sub2);
  color: var(--om-text);
}
.om-nav__link--active { color: var(--om-green); }

/* Группа «иконки + авторизация» — единый flex-блок, чтобы на мобильном
   переноситься на новую строку целиком (см. §23), а не рваться на
   непредсказуемой ширине экрана между отдельными кнопками. */
.om-navbar__utils {
  display: flex;
  align-items: center;
}

/* Online pill */
.om-online {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: var(--om-r-sm);
  background: var(--om-green-sub2);
  border: 1px solid var(--om-green-line2);
  font-size: 12px;
  color: var(--om-text-2);
  margin-right: 12px;
  white-space: nowrap;
}
.om-online__count { color: var(--om-green); font-weight: 600; }

/* Auth buttons */
.om-nav__auth {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  flex-shrink: 0;
}

/* Mobile toggle */
.om-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border: none;
  background: none;
  margin-left: auto;
}
.om-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--om-text-2);
  border-radius: 2px;
  transition: transform var(--om-t), opacity var(--om-t);
}

/* ── §14 Layout: Footer ─────────────────────────────────────── */
.om-footer {
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--om-footer-glow), transparent 60%),
    var(--om-bg-1);
  border-top: 1px solid var(--om-border);
  padding-top: 36px;
}
/* Волосяная линия с зелёным свечением по центру */
.om-footer::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--om-footer-line) 35%, var(--om-footer-line) 65%, transparent);
  pointer-events: none;
}

.om-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 24px 36px;
  padding-bottom: 28px;
}

.om-footer__brand { max-width: 320px; }
.om-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  margin-bottom: 10px;
}
.om-footer__logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}
.om-footer__logo-text {
  font-size: 15px;
  font-weight: 800;
  color: var(--om-text);
  letter-spacing: -.02em;
}
.om-footer__logo-text span { color: var(--om-green); }
.om-footer__tagline {
  color: var(--om-text-3);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.om-footer__socials {
  display: flex;
  gap: 7px;
}
.om-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--om-bg-2);
  border: 1px solid var(--om-border);
  color: var(--om-text-2);
  font-size: 14px;
  text-decoration: none;
  transition: background var(--om-t), color var(--om-t),
              border-color var(--om-t), transform var(--om-t);
}
.om-footer__social:hover {
  background: var(--om-green-sub);
  border-color: var(--om-green);
  color: var(--om-green);
  transform: translateY(-2px);
}

.om-footer__col h4 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--om-text-3);
  margin: 0 0 10px;
}
.om-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.om-footer__links a {
  display: inline-block;
  font-size: 13px;
  color: var(--om-text-2);
  text-decoration: none;
  transition: color var(--om-t), transform var(--om-t);
}
.om-footer__links a:hover {
  color: var(--om-text);
  transform: translateX(2px);
}

/* Компактное предупреждение о поддельных лаунчерах */
.om-footer__warning {
  display: flex;
  gap: 10px;
  align-items: baseline;
  background: var(--om-red-sub2);
  border: 1px solid var(--om-red-line2);
  border-radius: var(--om-r-sm);
  padding: 9px 14px;
  margin-bottom: 24px;
}
.om-footer__warning > i {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--om-red);
}
.om-footer__warning p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--om-text-2);
}
.om-footer__warning strong {
  color: var(--om-red-text);
  font-weight: 700;
  margin-right: 4px;
}

/* Нижняя строка */
.om-footer__bottom {
  border-top: 1px solid var(--om-border);
  font-size: 12px;
  color: var(--om-text-3);
}
.om-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  padding-block: 13px;
  flex-wrap: wrap;
}
.om-footer__bottom a {
  color: var(--om-text-3);
  text-decoration: none;
  transition: color var(--om-t);
}
.om-footer__bottom a:hover { color: var(--om-text-2); }
.om-footer__bottom-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.om-footer__engine { opacity: .5; }

/* ── §15 Section: Hero ──────────────────────────────────────── */
.om-hero {
  position: relative;
  padding-block: 80px 72px;
  overflow: hidden;
  border-bottom: 1px solid var(--om-border);
}

/* Ambient background gradients — скрываются, когда включена своя картинка фона */
.om-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at 15% -20%, var(--om-glow-1), transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 80%, var(--om-glow-2), transparent 60%);
  pointer-events: none;
}
.om-hero--bg::before { content: none; }

/* Своя картинка фона: настраивается в Темы → OnlyMine → Главная страница.
   transform: scale вместо отрицательного inset — компенсирует размытые
   края независимо от высоты секции (на телефонах она заметно ниже). */
.om-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  pointer-events: none;
}
.om-hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.om-hero--bg .om-hero__inner { z-index: 1; }

/* Локальный скрим за текстовой колонкой: общее затемнение фото задаётся
   в настройках и одинаково по всей картинке, а тут — сильнее у текста и
   прозрачно к скриншоту, чтобы буквы не терялись на светлых/пёстрых местах
   фото. --om-scrim сам переключается тёмный/светлый вместе со схемой сайта. */
.om-hero__text-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, var(--om-scrim) 0%, var(--om-scrim) 38%, transparent 68%);
  pointer-events: none;
}

.om-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
}

.om-hero__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.om-hero__h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 18px;
  letter-spacing: -.025em;
}
.om-hero__h1 em {
  font-style: normal;
  color: var(--om-green);
}

.om-hero__desc {
  font-size: 16px;
  color: var(--om-text-2);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 500px;
}

.om-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.om-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.om-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--om-bg-3);
  border: 1px solid var(--om-border);
  font-size: 12px;
  color: var(--om-text-2);
}
.om-hero__pill .om-dot { color: var(--om-green); }

/* ── §16 Section: Stats bar ─────────────────────────────────── */
.om-statsbar {
  background: var(--om-bg-2);
  border-bottom: 1px solid var(--om-border);
  padding-block: 0;
}

.om-statsbar__inner {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.om-statsbar__inner::-webkit-scrollbar { display: none; }

.om-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 18px 32px;
  border-right: 1px solid var(--om-border);
  flex: 1;
  min-width: 140px;
  white-space: nowrap;
}
.om-stat:last-child { border-right: none; }
.om-stat__value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--om-text);
  line-height: 1;
}
.om-stat__value--green { color: var(--om-green); }
.om-stat__value--gold  { color: var(--om-gold); }
/* Длинные значения (дата запуска карты) не должны спорить с цифрами рядом */
.om-stat__value--sm    { font-size: 1rem; }
.om-stat__label {
  font-size: 11px;
  color: var(--om-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── §17 Section: Launcher CTA ──────────────────────────────── */
.om-launcher-cta {
  background: linear-gradient(135deg, var(--om-bg-2) 0%, var(--om-bg-3) 100%);
  border-top: 1px solid var(--om-border);
  border-bottom: 1px solid var(--om-border);
  padding-block: 56px;
}

.om-launcher-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.om-launcher-cta__text .om-section-label { margin-bottom: 12px; }
.om-launcher-cta__text h2 { margin-bottom: 10px; }
.om-launcher-cta__text p {
  color: var(--om-text-2);
  margin-bottom: 28px;
  max-width: 440px;
}

.om-launcher-downloads {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.om-dl-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--om-bg-1);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-md);
  text-decoration: none;
  transition: border-color var(--om-t), background var(--om-t);
  gap: 16px;
}
.om-dl-card:hover {
  border-color: var(--om-green);
  background: var(--om-green-sub2);
  color: var(--om-text);
}
.om-dl-card__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.om-dl-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--om-r-sm);
  background: var(--om-bg-3);
  border: 1px solid var(--om-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.om-dl-card__os {
  font-weight: 600;
  font-size: 14px;
  color: var(--om-text);
  line-height: 1;
  margin-bottom: 3px;
}
.om-dl-card__meta {
  font-size: 11px;
  color: var(--om-text-3);
  font-family: var(--bs-font-monospace);
}
.om-dl-card__arrow {
  color: var(--om-text-3);
  font-size: 18px;
  transition: transform var(--om-t);
}
.om-dl-card:hover .om-dl-card__arrow {
  transform: translateX(3px);
  color: var(--om-green);
}

/* Security notice */
.om-security-notice {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--om-red-sub2);
  border: 1px solid var(--om-red-line2);
  border-radius: var(--om-r-sm);
  font-size: 12px;
  color: var(--om-text-2);
  line-height: 1.5;
}
.om-security-notice strong { color: var(--om-red-text); }

/* ── §18 Section: Feature grid ──────────────────────────────── */
.om-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.om-feat {
  padding: 24px;
  background: var(--om-bg-2);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-md);
  transition: border-color var(--om-t), background var(--om-t);
}
.om-feat:hover {
  border-color: var(--om-border-hi);
  background: var(--om-bg-3);
}

.om-feat__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--om-r-sm);
  background: var(--om-green-sub);
  border: 1px solid var(--om-green-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.om-feat__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--om-text);
}
.om-feat__body {
  font-size: 13px;
  color: var(--om-text-2);
  line-height: 1.6;
}

/* ── §19 Section: Screenshot carousel ──────────────────────── */
.om-carousel {
  position: relative;
  border-radius: var(--om-r-lg);
  overflow: hidden;
  border: 1px solid var(--om-border);
  background: var(--om-bg-2);
  aspect-ratio: 16/9;
}

.om-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 400ms ease;
}

.om-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
}

.om-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.om-carousel__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--om-text-3);
  font-size: 13px;
  font-family: var(--bs-font-monospace);
  background: repeating-linear-gradient(
    45deg,
    var(--om-bg-2) 0 8px,
    var(--om-bg-3) 8px 16px
  );
}

.om-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--om-scrim);
  border: 1px solid var(--om-border);
  color: var(--om-text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 10;
  transition: background var(--om-t), color var(--om-t);
  backdrop-filter: blur(4px);
}
.om-carousel__btn:hover { background: var(--om-bg-4); color: var(--om-text); }
.om-carousel__btn--prev { left: 10px; }
.om-carousel__btn--next { right: 10px; }

.om-carousel__dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.om-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--om-dot-idle);
  cursor: pointer;
  transition: background var(--om-t), transform var(--om-t);
}
.om-carousel__dot--active {
  background: var(--om-green);
  transform: scale(1.3);
}

/* ── §20 Section: News grid ─────────────────────────────────── */
.om-news__grid {
  display: grid;
  /* Верхняя граница колонки: одна новость не растягивается на всю ширину */
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  /* Карточки набираются слева направо, а не от центра */
  justify-content: start;
  gap: 16px;
  margin-top: 36px;
}

.om-post {
  display: flex;
  flex-direction: column;
  background: var(--om-bg-2);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-md);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--om-t), transform var(--om-t);
}
.om-post:hover {
  border-color: var(--om-border-hi);
  transform: translateY(-2px);
  color: var(--om-text);
}

.om-post__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--om-bg-3);
  border-bottom: 1px solid var(--om-border);
  position: relative;
}
.om-post__thumb img {
  width: 100%;
  height: 100%;
  /* cover: картинка заполняет блок целиком.
     При contain оставались полосы фона сверху/снизу («рамка»),
     которые пропадали только при hover-зуме */
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 400ms ease;
}
.om-post:hover .om-post__thumb img { transform: scale(1.04); }
.om-post__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--om-bg-3) 0 8px,
    var(--om-bg-4) 8px 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--om-text-3);
  font-size: 12px;
  font-family: var(--bs-font-monospace);
  letter-spacing: .05em;
}

.om-post__body { padding: 18px; flex: 1; }
.om-post__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.om-post__author { font-size: 12px; color: var(--om-text-3); }
.om-post__date {
  font-size: 11px;
  color: var(--om-text-3);
  font-family: var(--bs-font-monospace);
}
.om-post__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--om-text);
  margin-bottom: 8px;
  line-height: 1.3;
}
.om-post__excerpt {
  font-size: 13px;
  color: var(--om-text-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.om-news__footer {
  margin-top: 28px;
  text-align: center;
}

/* ── §21 Section: Community ─────────────────────────────────── */
.om-community {
  background: var(--om-bg-2);
  border-top: 1px solid var(--om-border);
  border-bottom: 1px solid var(--om-border);
}

.om-community__inner {
  text-align: center;
  max-width: 580px;
  margin-inline: auto;
}

.om-community__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.om-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--om-r-md);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter var(--om-t), transform 80ms ease;
}
.om-social-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.om-social-btn:active { transform: translateY(0); }

.om-social-btn--discord {
  background: #5865F2;
  color: #fff;
  border-color: #4752d8;
}
.om-social-btn--telegram {
  background: #229ED9;
  color: #fff;
  border-color: #1a85ba;
}
.om-social-btn i { font-size: 18px; }

/* ── §22 Inner pages ─────────────────────────────────────────── */
.om-page-main {
  padding-block: 48px 80px;
  min-height: 60vh;
}

.om-page-main .container { max-width: 1200px; }

/* Page title for inner pages */
.om-page-hero {
  padding-block: 40px 32px;
  border-bottom: 1px solid var(--om-border);
  margin-bottom: 40px;
}
.om-page-hero h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 6px;
}
.om-page-hero p {
  color: var(--om-text-2);
  font-size: 15px;
}

/* Bootstrap nav-tabs override */
.nav-tabs {
  border-color: var(--om-border);
}
.nav-tabs .nav-link {
  color: var(--om-text-2);
  border-color: transparent;
  border-radius: var(--om-r-sm) var(--om-r-sm) 0 0;
}
.nav-tabs .nav-link:hover { color: var(--om-text); }
.nav-tabs .nav-link.active {
  background: var(--om-bg-2);
  border-color: var(--om-border) var(--om-border) var(--om-bg-2);
  color: var(--om-text);
}
.tab-content { padding-top: 24px; }

/* Dropdown overrides */
.dropdown-menu {
  background: var(--om-bg-2);
  border-color: var(--om-border);
  box-shadow: var(--om-shadow-md);
}
.dropdown-item { color: var(--om-text-2); }
.dropdown-item:hover {
  background: var(--om-bg-3);
  color: var(--om-text);
}
.dropdown-divider { border-color: var(--om-border); }

/* ── §23 Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .om-features__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .om-navbar { height: auto; min-height: 60px; flex-direction: column; align-items: stretch; }
  .om-navbar__inner { flex-wrap: wrap; padding-block: 10px; position: relative; min-height: 60px; }
  .om-logo { margin-right: auto; }
  .om-nav__toggle { display: flex; }

  /* Гамбургер держится в первой строке рядом с логотипом всегда — и в
     закрытом, и в открытом состоянии меню, поэтому у него самый низкий
     order из троих (сам он не переносится, а лишь двигается margin-left:auto
     из базового правила). */
  .om-nav__toggle { order: 1; }

  .om-nav {
    order: 2;
    display: none;
    flex-direction: column;
    /* Сбрасывает десктопный `flex: 1` (flex-basis:0%) — иначе на мобильном
       меню растягивалось наравне с логотипом и гамбургером в первой строке
       вместо того, чтобы открываться на всю ширину отдельной строкой. */
    flex: 0 0 100%;
    width: 100%;
    padding: 8px 0 12px;
    gap: 2px;
  }
  .om-nav.is-open { display: flex; }
  .om-nav__auth {
    flex-shrink: 0;
  }

  /* Гамбургер остаётся в первой строке рядом с логотипом (margin-left:auto
     из базового правила уже это делает), а вся группа иконок и авторизации
     переносится под него единым блоком — flex-basis:100% гарантирует перенос
     независимо от того, сколько иконок реально выведено (онлайн и колокольчик
     условны) и на какой именно ширине экрана это происходит. Без этого
     перенос срабатывал произвольно на первом элементе, который не помещался,
     и переключатель темы «уезжал» то к логотипу, то повисал отдельно. */
  .om-navbar__utils {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
  }
  .om-online { margin-right: 8px; }
  .om-notif { margin-left: 0; }

  .om-hero__inner { grid-template-columns: 1fr; }
  .om-hero__visual { order: -1; }
  /* На мобильном визуал сверху, текст снизу — скрим разворачивается вертикально */
  .om-hero__text-scrim {
    background: linear-gradient(180deg, transparent 0%, transparent 38%, var(--om-scrim) 68%, var(--om-scrim) 100%);
  }

  .om-launcher-cta__inner { grid-template-columns: 1fr; }

  .om-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
  .om-footer__brand { grid-column: 1 / -1; max-width: 100%; }

  .om-statsbar__inner { justify-content: flex-start; }
  .om-stat { flex: 0 0 auto; }
}

@media (max-width: 600px) {
  .om-online { display: none; }
  .om-section { padding-block: 48px; }
  .om-hero { padding-block: 48px 40px; }
  .om-hero__h1 { font-size: 2rem; }
  .om-features__grid { grid-template-columns: 1fr; }
  .om-news__grid { grid-template-columns: minmax(0, 380px); }
  .om-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .om-community__actions { flex-direction: column; align-items: center; }
  .om-footer__bottom-inner { flex-direction: column; text-align: center; }
  .om-footer__bottom-links { flex-wrap: wrap; justify-content: center; gap: 12px; }
}

/* ── §24 Launcher page (om-lp-*) ────────────────────────────── */

/* Callout flex layout (used with icon + text) */
.om-callout.om-lp-hero__callout,
.om-callout.om-lp-av__callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
/* line-height = height of one text line, so the glyph centres on the first
   line instead of dropping below it (icons inherit the 1.6 body line-height) */
.om-callout.om-lp-hero__callout > i,
.om-callout.om-lp-av__callout > i {
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1.5rem;
}
.om-callout--warning.om-lp-hero__callout > i { color: var(--om-gold); }
.om-callout--info.om-lp-av__callout > i     { color: var(--om-green); }

/* Pre / code block */
.om-code {
  display: block;
  margin: 8px 0 0;
  padding: 10px 14px;
  background: var(--om-bg-base);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-sm);
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  color: var(--om-green-hi);
  white-space: pre;
  overflow-x: auto;
}

/* ─── Hero ───── */
.om-lp-hero {
  padding-block: 64px 56px;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, var(--om-glow-1) 0%, transparent 70%),
              var(--om-bg-base);
  text-align: center;
  border-bottom: 1px solid var(--om-border);
}
.om-lp-hero__badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.om-lp-hero__h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--om-text);
  margin-bottom: 14px;
}
.om-lp-hero__sub {
  font-size: 1.05rem;
  color: var(--om-text-2);
  max-width: 600px;
  margin: 0 auto 28px;
  line-height: 1.65;
}
.om-lp-hero__callout {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

/* ─── Download cards ───── */
.om-lp-dl__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.om-lp-dl__grid--single {
  grid-template-columns: 360px;
  justify-content: center;
}

.om-lp-dl-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--om-bg-2);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-lg);
  padding: 24px;
  transition: border-color var(--om-t), box-shadow var(--om-t);
}
.om-lp-dl-card:hover {
  border-color: var(--om-green);
  box-shadow: 0 0 0 1px var(--om-green), var(--om-shadow-md);
}

.om-lp-dl-card__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.om-lp-dl-card__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--om-r-md);
  background: var(--om-bg-4);
  border: 1px solid var(--om-border-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--om-text);
}
.om-lp-dl-card__icon--emoji {
  font-size: 28px;
  line-height: 1;
}
.om-lp-dl-card__info { flex: 1; }
.om-lp-dl-card__os {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--om-text);
  margin-bottom: 4px;
}
.om-lp-dl-card__req {
  font-size: 12px;
  color: var(--om-text-2);
}
.om-lp-dl-card__size {
  font-size: 11px;
  color: var(--om-text-2);
  font-family: var(--bs-font-monospace);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 4px;
}

.om-lp-dl-card__btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* ─── System requirements ───── */
.om-lp-sysreq__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.om-lp-sysreq__col {
  background: var(--om-bg-2);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-lg);
  padding: 24px;
  overflow: hidden;
}
.om-lp-sysreq__os {
  font-size: 1rem;
  font-weight: 700;
  color: var(--om-text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--om-border);
}
.om-lp-sysreq__table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--om-text);
  --bs-table-border-color: var(--om-border);
  margin: 0;
  font-size: 13px;
}
.om-lp-sysreq__table th {
  color: var(--om-text-3);
  font-weight: 500;
  width: 80px;
  white-space: nowrap;
}
.om-lp-sysreq__table td { color: var(--om-text); }

/* ─── Installation steps ───── */
.om-lp-steps__tabs {
  display: flex;
  gap: 6px;
  margin-top: 36px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--om-border);
  padding-bottom: 0;
}
.om-lp-steps__tab {
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--om-text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--om-t), border-color var(--om-t);
}
.om-lp-steps__tab:hover   { color: var(--om-text); }
.om-lp-steps__tab--active {
  color: var(--om-green);
  border-bottom-color: var(--om-green);
}

.om-lp-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 680px;
}
.om-lp-steps__list[hidden] { display: none; }

.om-lp-step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--om-border);
}
.om-lp-step:last-child { border-bottom: none; }

.om-lp-step__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--om-green-sub);
  border: 1px solid var(--om-green);
  color: var(--om-green);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.om-lp-step__body { flex: 1; }
.om-lp-step__body > strong {
  display: block;
  font-size: 15px;
  color: var(--om-text);
  margin-bottom: 6px;
}
.om-lp-step__body p {
  font-size: 14px;
  color: var(--om-text-2);
  margin: 0;
  line-height: 1.6;
}
.om-lp-step__body p + p { margin-top: 6px; }
.om-lp-step__body .om-code { margin-top: 10px; }

/* ─── Antivirus ───── */

.om-lp-av__text { max-width: 780px; margin-top: 40px; }
.om-lp-av__text p { color: var(--om-text-2); line-height: 1.7; margin-bottom: 18px; }
.om-lp-av__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.om-lp-av__list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--om-text-2);
  line-height: 1.5;
}
.om-lp-av__list li i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--om-blue);
  font-size: 15px;
}

/* ─── FAQ ───── */
.om-lp-faq__accordion { margin-top: 40px; max-width: 800px; }

.om-lp-faq__item {
  background: var(--om-bg-2);
  border: 1px solid var(--om-border) !important;
  border-radius: var(--om-r-md) !important;
  margin-bottom: 8px;
  overflow: hidden;
}
.om-lp-faq__btn {
  background: var(--om-bg-2) !important;
  color: var(--om-text) !important;
  font-weight: 600;
  font-size: 15px;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 18px 20px;
}
.om-lp-faq__btn::after {
  filter: var(--om-chevron-filter);
}
.om-lp-faq__btn:not(.collapsed) {
  color: var(--om-green) !important;
  background: var(--om-bg-3) !important;
}
.om-lp-faq__body {
  font-size: 14px;
  color: var(--om-text-2);
  line-height: 1.65;
  background: var(--om-bg-1);
  border-top: 1px solid var(--om-border);
  padding: 18px 20px;
}
.om-lp-faq__body ol,
.om-lp-faq__body ul { padding-left: 20px; margin: 0; }
.om-lp-faq__body li { margin-bottom: 6px; }
.om-lp-faq__body a { color: var(--om-green); }

/* ── §24 responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .om-lp-dl__grid        { grid-template-columns: repeat(2, 1fr); }
  .om-lp-sysreq__grid    { grid-template-columns: 1fr; gap: 14px; }
  .om-lp-av__inner       { grid-template-columns: 1fr; }
  .om-lp-av__cmds        { position: static; }
}

@media (max-width: 900px) {
  .om-lp-dl__grid        { grid-template-columns: 1fr; }
  .om-lp-faq__accordion  { max-width: 100%; }
  .om-lp-steps__list     { max-width: 100%; }
}

@media (max-width: 600px) {
  .om-lp-hero { padding-block: 40px; }
  .om-lp-hero__h1 { font-size: 1.7rem; }
  .om-lp-dl__grid--single { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   §24 Page: Profile
   ══════════════════════════════════════════════════════════════ */

.om-profile { padding-block: 40px 72px; }

/* ── Hero card ──────────────────────────────────────────────── */
.om-pf-hero {
  position: relative;
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-lg);
  background: var(--om-bg-2);
  overflow: hidden;
  margin-bottom: 24px;
}

/* Decorative banner strip */
.om-pf-hero__banner {
  height: 104px;
  background:
    radial-gradient(120% 180% at 12% 0%, var(--om-banner-1), transparent 60%),
    radial-gradient(90% 160% at 88% 10%, var(--om-banner-2), transparent 62%),
    linear-gradient(180deg, var(--om-bg-4), var(--om-bg-2));
  border-bottom: 1px solid var(--om-border);
}
.om-pf-hero__banner::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 104px;
  background-image:
    linear-gradient(var(--om-banner-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--om-banner-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.om-pf-hero__body {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 0 28px 24px;
  margin-top: -46px;
  position: relative;
  z-index: 1;
}

.om-pf-hero__avatar {
  width: 104px;
  height: 104px;
  border-radius: var(--om-r-md);
  object-fit: cover;
  image-rendering: pixelated;
  background: var(--om-bg-3);
  border: 3px solid var(--om-bg-2);
  box-shadow: 0 0 0 1px var(--om-border-hi), var(--om-shadow-md);
  flex-shrink: 0;
}

.om-pf-hero__ident { flex: 1; min-width: 0; padding-bottom: 4px; }

.om-pf-hero__name {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 8px;
  word-break: break-word;
}

.om-pf-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.om-pf-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid var(--om-role-line);
}

.om-pf-hero__since {
  font-size: 12.5px;
  color: var(--om-text-3);
}

/* Hero quick actions */
.om-pf-hero__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

/* ── Stat tiles ─────────────────────────────────────────────── */
.om-pf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--om-border);
  border-top: 1px solid var(--om-border);
}

.om-pf-stat {
  background: var(--om-bg-2);
  padding: 16px 20px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.om-pf-stat__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--om-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--om-green-sub);
  color: var(--om-green);
  border: 1px solid var(--om-green-line2);
}
.om-pf-stat__icon--gold {
  background: var(--om-gold-sub);
  color: var(--om-gold);
  border-color: var(--om-gold-line);
}
.om-pf-stat__icon--blue {
  background: var(--om-blue-sub);
  color: var(--om-blue);
  border-color: var(--om-blue-line);
}
.om-pf-stat__icon--muted {
  background: var(--om-bg-3);
  color: var(--om-text-3);
  border-color: var(--om-border);
}

.om-pf-stat__text { min-width: 0; }
.om-pf-stat__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--om-text-3);
  margin-bottom: 3px;
  white-space: nowrap;
}
.om-pf-stat__value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--om-text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.om-pf-stat__value--on  { color: var(--om-green); }
.om-pf-stat__value--off { color: var(--om-text-2); }

/* ── Tabs ───────────────────────────────────────────────────── */
.om-pf-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--om-border);
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.om-pf-tabs::-webkit-scrollbar { display: none; }

.om-pf-tab {
  appearance: none;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--om-text-2);
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--om-r-sm) var(--om-r-sm) 0 0;
  transition: color var(--om-t), background var(--om-t);
}
.om-pf-tab:hover { color: var(--om-text); background: var(--om-green-sub2); }
.om-pf-tab::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background var(--om-t);
}
.om-pf-tab.is-active { color: var(--om-green); }
.om-pf-tab.is-active::after { background: var(--om-green); }
.om-pf-tab i { font-size: 15px; }

.om-pf-panel { display: none; }
.om-pf-panel.is-active { display: block; animation: om-pf-fade 220ms ease; }
@keyframes om-pf-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Setting cards grid ─────────────────────────────────────── */
.om-pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}
.om-pf-grid--single { grid-template-columns: minmax(0, 620px); }

.om-fcard {
  background: var(--om-bg-2);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-md);
  overflow: hidden;
  transition: border-color var(--om-t);
}
.om-fcard:hover { border-color: var(--om-border-hi); }

.om-fcard__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--om-border);
  background: linear-gradient(180deg, var(--om-bg-3), var(--om-bg-2));
}
.om-fcard__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--om-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--om-green-sub);
  color: var(--om-green);
  border: 1px solid var(--om-green-line2);
}
.om-fcard__icon--danger {
  background: var(--om-red-sub);
  color: var(--om-red-text);
  border-color: var(--om-red-line2);
}
.om-fcard__titles { min-width: 0; }
.om-fcard__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--om-text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.om-fcard__sub {
  font-size: 12.5px;
  color: var(--om-text-3);
  line-height: 1.45;
  margin: 0;
}
.om-fcard__body { padding: 20px 22px 22px; }

/* Form field */
.om-field { margin-bottom: 16px; }
.om-field:last-of-type { margin-bottom: 20px; }
.om-field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--om-text-2);
  margin-bottom: 7px;
}
.om-field .form-control,
.om-field .form-select {
  background-color: var(--om-bg-1);
  border-color: var(--om-border);
  color: var(--om-text);
  border-radius: var(--om-r-sm);
  padding: 10px 13px;
  font-size: 14px;
}
.om-field .form-control:focus {
  border-color: var(--om-green-lo);
  box-shadow: 0 0 0 3px var(--om-green-line2);
}
.om-field__hint {
  display: block;
  font-size: 12px;
  color: var(--om-text-3);
  margin-top: 7px;
  line-height: 1.45;
}
.om-field .invalid-feedback { font-size: 12.5px; }

/* Card action row */
.om-fcard__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Security rows (2FA / delete) ───────────────────────────── */
.om-pf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--om-border);
}
.om-pf-row:last-child { border-bottom: 0; padding-bottom: 0; }
.om-pf-row:first-child { padding-top: 0; }
.om-pf-row__text { min-width: 0; flex: 1; }
.om-pf-row__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--om-text);
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.om-pf-row__desc {
  font-size: 12.5px;
  color: var(--om-text-3);
  line-height: 1.5;
  margin: 0;
  max-width: 62ch;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  .om-profile { padding-block: 28px 56px; }

  .om-pf-hero__banner,
  .om-pf-hero__banner::after { height: 84px; }

  .om-pf-hero__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0 20px 20px;
    margin-top: -40px;
  }
  .om-pf-hero__avatar { width: 84px; height: 84px; }
  .om-pf-hero__actions { width: 100%; }
  .om-pf-hero__actions .om-btn { flex: 1; min-width: 140px; }

  .om-pf-stats { grid-template-columns: 1fr 1fr; }
  .om-pf-stat { padding: 14px 16px; gap: 11px; }

  .om-pf-tab { padding: 11px 13px; font-size: 13.5px; }
  .om-pf-grid,
  .om-pf-grid--single { grid-template-columns: 1fr; gap: 16px; }

  .om-fcard__head { padding: 15px 18px; }
  .om-fcard__body { padding: 18px; }

  .om-pf-row { flex-direction: column; align-items: stretch; }
  .om-pf-row .om-btn,
  .om-pf-row form { width: 100%; }
  .om-pf-row .om-btn { width: 100%; }
}

@media (max-width: 420px) {
  .om-pf-stats { grid-template-columns: 1fr; }
}

/* ── §24.b Profile sub-pages (2FA, delete) ──────────────────── */
.om-pf-narrow { max-width: 660px; margin-inline: auto; }

.om-pf-head { margin-bottom: 22px; }
.om-pf-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--om-text-3);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color var(--om-t);
}
.om-pf-back:hover { color: var(--om-green); }
.om-pf-head__title {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}

.om-fcard--danger { border-color: var(--om-red-line); }
.om-fcard--danger .om-fcard__head {
  background: linear-gradient(180deg, var(--om-red-sub), var(--om-bg-2));
  border-bottom-color: var(--om-red-line2);
}

.om-fcard--locked { opacity: .8; }
.om-wd__locked-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--om-text-3);
}

.om-callout--danger {
  background: var(--om-red-sub);
  border-color: var(--om-red);
  color: var(--om-red-text);
}
.om-callout--danger strong { color: var(--om-red-text-hi); display: block; margin-bottom: 4px; }

/* Recovery codes */
.om-codes-wrap { margin-top: 16px; }
.om-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 14px;
  background: var(--om-bg-1);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-sm);
}
.om-codes__item samp {
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  color: var(--om-green);
  letter-spacing: .04em;
}

/* Steps */
.om-step {
  display: flex;
  gap: 14px;
  padding-bottom: 24px;
  position: relative;
}
.om-step::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 4px;
  width: 2px;
  background: var(--om-border);
}
.om-step--last::before,
.om-step:last-child::before { display: none; }

.om-step__num {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--om-green-sub);
  color: var(--om-green);
  border: 1px solid var(--om-green-line);
  position: relative;
  z-index: 1;
}
.om-step__body { flex: 1; min-width: 0; }
.om-step__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--om-text);
  margin: 4px 0 6px;
}
.om-step__text {
  font-size: 13px;
  color: var(--om-text-2);
  line-height: 1.6;
  margin: 0 0 10px;
}
.om-step__text a { color: var(--om-green); }

/* QR code — needs a light plate to stay scannable */
.om-2fa-qr {
  display: inline-block;
  background: #fff;
  padding: 12px;
  border-radius: var(--om-r-md);
  line-height: 0;
  box-shadow: var(--om-shadow-sm);
}
.om-2fa-qr svg { display: block; width: 168px; height: 168px; }

.om-secret {
  display: inline-block;
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--om-green);
  background: var(--om-bg-1);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-sm);
  padding: 8px 12px;
  word-break: break-all;
}

.om-code-input {
  font-family: var(--bs-font-monospace);
  font-size: 20px !important;
  letter-spacing: .3em;
  text-align: center;
}

.om-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--om-text-2);
  line-height: 1.55;
  cursor: pointer;
}
.om-check .form-check-input { margin-top: 2px; flex-shrink: 0; }

@media (max-width: 720px) {
  .om-2fa-qr svg { width: 140px; height: 140px; }
  .om-codes { grid-template-columns: 1fr 1fr; }
}

/* ── §25 Navbar: dropdowns, notifications, live status ──────── */
.om-nav__item { position: relative; list-style: none; }

/* User menu button with the player's face.
   Padding is trimmed on the left so the head sits closer to the edge than
   plain button text would, keeping the control the same height as its
   neighbours instead of growing around the image. */
.om-nav__user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Вертикальный отступ урезан под высоту головы: со штатными 7px кнопка
     вырастала до 40px и переставала совпадать по высоте с колокольчиком. */
  padding: 4px 12px 4px 6px;
}

/* 24px, не 22: лицо — сетка 8x8, и только кратный восьми размер даёт
   при pixelated ровные блоки по 3px. На дробном масштабе часть пикселей
   лица выпадает, и голова выглядит рваной. */
.om-nav__face {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  image-rendering: pixelated;
  background: var(--om-bg-3);
  flex-shrink: 0;
}

/* Dropdown toggle rendered as <button> — normalise it against the <a> links */
.om-nav__link--toggle {
  appearance: none;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.om-nav__link--toggle::after { display: none; } /* kill Bootstrap's caret */

.om-nav__caret {
  font-size: 10px;
  opacity: .55;
  transition: transform var(--om-t);
}
.om-nav__item.dropdown.show .om-nav__caret { transform: rotate(180deg); }

.om-nav__ext { font-size: 10px; opacity: .55; }

.om-nav__menu {
  --bs-dropdown-min-width: 190px;
  padding: 6px;
  border-radius: var(--om-r-md);
}
.om-nav__menu .dropdown-item {
  border-radius: var(--om-r-sm);
  padding: 8px 12px;
  font-size: 13.5px;
}
.om-nav__menu .dropdown-item.active {
  background: var(--om-green-sub);
  color: var(--om-green);
}

/* ── Notifications ──────────────────────────────────────────── */
.om-notif { flex-shrink: 0; margin-right: 4px; }

.om-notif__btn {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  color: var(--om-text-2);
  font-size: 17px;
  line-height: 1;
  padding: 7px 9px;
  border-radius: var(--om-r-sm);
  cursor: pointer;
  position: relative;
  transition: background var(--om-t), color var(--om-t);
}
.om-notif__btn:hover { background: var(--om-bg-3); color: var(--om-text); }

.om-notif__badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--om-red);
  color: var(--om-on-red);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--om-bg-base);
  box-sizing: content-box;
}

.om-notif__menu {
  --bs-dropdown-min-width: 320px;
  max-width: min(360px, calc(100vw - 24px));
  padding: 8px;
  border-radius: var(--om-r-md);
  max-height: min(420px, 70vh);
  overflow-y: auto;
}
.om-notif__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--om-text-3);
  padding: 6px 10px 10px;
  margin: 0;
}
.om-notif__item {
  display: flex;
  gap: 11px;
  padding: 10px;
  border-radius: var(--om-r-sm);
  text-decoration: none;
  color: var(--om-text-2);
  font-size: 13px;
  line-height: 1.45;
  transition: background var(--om-t);
}
.om-notif__item:hover { background: var(--om-bg-3); color: var(--om-text); }
.om-notif__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.om-notif__text { min-width: 0; }
.om-notif__date {
  display: block;
  font-size: 11px;
  color: var(--om-text-3);
  margin-bottom: 2px;
}
.om-notif__foot {
  display: block;
  text-align: center;
  padding: 9px;
  margin-top: 4px;
  border-top: 1px solid var(--om-border);
  border-radius: var(--om-r-sm);
  font-size: 12.5px;
  color: var(--om-text-2);
  text-decoration: none;
  transition: background var(--om-t), color var(--om-t);
}
.om-notif__foot:hover { background: var(--om-bg-3); color: var(--om-text); }
.om-notif__foot--empty { color: var(--om-green); border-top: 0; }

/* ── Переключатель темы оформления ──────────────────────────────
   Габариты повторяют колокольчик: кнопки стоят в одном ряду и обязаны
   совпадать по высоте. Иконка показывает ТЕКУЩИЙ режим (как в системе /
   светлая / тёмная), а не результат нажатия: три состояния иначе не
   различить. Глифы — заливные: контурный bi-sun на 17px рассыпается
   в паутинку и читается как посторонний значок.
   ────────────────────────────────────────────────────────────── */
.om-theme-toggle {
  appearance: none;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--om-text-2);
  font-size: 17px;   /* = колокольчик: иначе кнопки разной высоты в ряд */
  line-height: 1;
  padding: 7px 9px;
  margin-right: 4px;
  border-radius: var(--om-r-sm);
  cursor: pointer;
  transition: background var(--om-t), color var(--om-t);
}
.om-theme-toggle:hover {
  background: var(--om-bg-3);
  color: var(--om-green);
}
.om-theme-toggle:focus-visible {
  outline: none;
  border-color: var(--om-green-lo);
  box-shadow: 0 0 0 3px var(--om-focus-ring);
}
/* Режим живёт на <html> (data-om-mode), а не на кнопке: атрибут ставит
   скрипт из <head> до отрисовки, поэтому иконка не мигает чужим глифом. */
.om-theme-toggle i { display: none; }
[data-om-mode="auto"]  .om-theme-toggle__auto,
[data-om-mode="light"] .om-theme-toggle__light,
[data-om-mode="dark"]  .om-theme-toggle__dark { display: block; }

/* ── Mobile: dropdowns expand inline instead of floating ────── */
@media (max-width: 900px) {
  .om-nav__item { width: 100%; }

  .om-nav__link,
  .om-nav__link--toggle {
    width: 100%;
    justify-content: flex-start;
  }

  /* Bootstrap positions .dropdown-menu absolutely — inside the stacked
     mobile menu that would float over the page, so pin it back in flow. */
  .om-nav .dropdown-menu {
    position: static !important;
    transform: none !important;
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 14px;
    margin: 0;
    border-left: 2px solid var(--om-border);
  }
  .om-nav .dropdown-menu .dropdown-item { padding-inline: 11px; }

  .om-nav__caret { display: none; }

  .om-notif__menu {
    position: absolute !important;
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 600px) {
  .om-online__label { display: none; }
}

/* Индикатор онлайна рисуется только при живом сервере с игроками (elements/online) */
.om-online .om-dot { color: var(--om-green); }

/* ══════════════════════════════════════════════════════════════
   §26 Plugin compatibility layer

   The page runs with data-bs-theme="dark" or "light", so Bootstrap 5.3
   already paints every component from its own variable set for that
   scheme. These rules only re-point those variables at the OnlyMine
   palette, so components used by plugins we have never seen still land
   on-brand instead of Bootstrap's neutral grey-blue.

   Селектор намеренно один (:root): значения смотрят в --om-*, а те уже
   переопределены светлой схемой в §1b. Отдельная ветка под каждую тему
   здесь только рассинхронизировалась бы.
   ══════════════════════════════════════════════════════════════ */
:root {
  --bs-secondary-bg:       var(--om-bg-3);
  --bs-secondary-bg-subtle: var(--om-bg-2);
  --bs-tertiary-bg:        var(--om-bg-2);
  --bs-tertiary-bg-subtle: var(--om-bg-1);
  --bs-secondary-color:    var(--om-text-2);
  --bs-tertiary-color:     var(--om-text-3);
  --bs-emphasis-color:     var(--om-text);
  --bs-heading-color:      var(--om-text);
  --bs-body-secondary-color: var(--om-text-2);
  --bs-body-tertiary-color:  var(--om-text-3);
  --bs-body-tertiary-bg:   var(--om-bg-2);
  --bs-highlight-bg:       var(--om-gold-sub);
  --bs-code-color:         var(--om-green);
}

/* ── Surfaces: modal / offcanvas / toast / popover ───────────── */
.modal {
  --bs-modal-bg: var(--om-bg-2);
  --bs-modal-color: var(--om-text);
  --bs-modal-border-color: var(--om-border);
  --bs-modal-header-border-color: var(--om-border);
  --bs-modal-footer-border-color: var(--om-border);
  --bs-modal-border-radius: var(--om-r-md);
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-bg: var(--om-bg-2);
  --bs-offcanvas-color: var(--om-text);
  --bs-offcanvas-border-color: var(--om-border);
}
.toast {
  --bs-toast-bg: var(--om-bg-2);
  --bs-toast-color: var(--om-text);
  --bs-toast-border-color: var(--om-border);
  --bs-toast-header-bg: var(--om-bg-3);
  --bs-toast-header-color: var(--om-text-2);
}
.popover {
  --bs-popover-bg: var(--om-bg-2);
  --bs-popover-body-color: var(--om-text-2);
  --bs-popover-header-bg: var(--om-bg-3);
  --bs-popover-header-color: var(--om-text);
  --bs-popover-border-color: var(--om-border);
}
.tooltip {
  --bs-tooltip-bg: var(--om-bg-4);
  --bs-tooltip-color: var(--om-text);
  --bs-tooltip-opacity: 1;
}

/* ── Lists, groups, inputs ──────────────────────────────────── */
.list-group {
  --bs-list-group-bg: var(--om-bg-2);
  --bs-list-group-color: var(--om-text-2);
  --bs-list-group-border-color: var(--om-border);
  --bs-list-group-action-color: var(--om-text-2);
  --bs-list-group-action-hover-bg: var(--om-bg-3);
  --bs-list-group-action-hover-color: var(--om-text);
  --bs-list-group-active-bg: var(--om-green-lo);
  --bs-list-group-active-border-color: var(--om-green-lo);
  --bs-list-group-active-color: var(--om-on-green);
}
.input-group-text {
  background-color: var(--om-bg-3);
  border-color: var(--om-border);
  color: var(--om-text-2);
}
.progress, .progress-stacked {
  --bs-progress-bg: var(--om-bg-3);
  --bs-progress-bar-bg: var(--om-green-lo);
  --bs-progress-bar-color: var(--om-on-green);
}
.accordion {
  --bs-accordion-bg: var(--om-bg-2);
  --bs-accordion-color: var(--om-text);
  --bs-accordion-border-color: var(--om-border);
  --bs-accordion-btn-color: var(--om-text);
  --bs-accordion-btn-bg: var(--om-bg-2);
  --bs-accordion-active-bg: var(--om-green-sub);
  --bs-accordion-active-color: var(--om-green);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--om-focus-ring);
}
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--om-text-3);
  --bs-breadcrumb-item-active-color: var(--om-text-2);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--om-green-lo);
  --bs-nav-pills-link-active-color: var(--om-on-green);
}
.form-range::-webkit-slider-runnable-track { background: var(--om-bg-3); }
.form-range::-moz-range-track { background: var(--om-bg-3); }

/* ── Contrast fixes for .text-bg-* ───────────────────────────
   Bootstrap bakes the foreground of these helpers at build time against
   its stock palette. Our primary/success are light green, so the stock
   white text would be unreadable — restate the pairs we changed.
   Azuriom uses .text-bg-{level} for notification badges, so plugins hit
   this path directly.                                                  */
.text-bg-primary { color: var(--om-on-green) !important; background-color: var(--om-green) !important; }
.text-bg-success { color: var(--om-on-green) !important; background-color: var(--om-green) !important; }
.text-bg-warning { color: var(--om-on-gold) !important; background-color: var(--om-gold) !important; }
.text-bg-info    { color: var(--om-on-blue) !important; background-color: var(--om-blue) !important; }
.text-bg-danger  { color: var(--om-on-red) !important; background-color: var(--om-red) !important; }
.text-bg-light   { color: var(--om-bg-base) !important; background-color: var(--om-text-2) !important; }
.text-bg-dark    { color: var(--om-text) !important; background-color: var(--om-bg-3) !important; }
.text-bg-secondary { color: var(--om-text) !important; background-color: var(--om-bg-3) !important; }
/* Plain .bg-dark (no paired .text-*) is used by plugins as a raw panel/
   badge background. Bootstrap's version is a fixed near-black, which reads
   fine on our dark scheme but goes dark-on-dark once the surrounding text
   switches to the light scheme's near-black — repoint it too. */
.bg-dark { background-color: var(--om-bg-3) !important; }

/* Same problem on solid buttons built from the recoloured palette */
.btn-primary, .btn-success {
  --bs-btn-color: var(--om-on-green);
  --bs-btn-bg: var(--om-green);
  --bs-btn-border-color: var(--om-green-lo);
  --bs-btn-hover-color: var(--om-on-green);
  --bs-btn-hover-bg: var(--om-green-hi);
  --bs-btn-hover-border-color: var(--om-green);
  --bs-btn-active-color: var(--om-on-green);
  --bs-btn-active-bg: var(--om-green-hi);
  --bs-btn-disabled-color: var(--om-on-green);
  --bs-btn-disabled-bg: var(--om-green);
}
.btn-warning {
  --bs-btn-color: var(--om-on-gold);
  --bs-btn-hover-color: var(--om-on-gold);
  --bs-btn-active-color: var(--om-on-gold);
}
.btn-outline-primary, .btn-outline-success {
  --bs-btn-color: var(--om-green);
  --bs-btn-border-color: var(--om-green-lo);
  --bs-btn-hover-color: var(--om-on-green);
  --bs-btn-hover-bg: var(--om-green);
  --bs-btn-hover-border-color: var(--om-green);
  --bs-btn-active-color: var(--om-on-green);
  --bs-btn-active-bg: var(--om-green);
}

/* Bootstrap's own .alert-* (plugins use these, not .om-alert) */
.alert { --bs-alert-border-color: transparent; }

/* Close buttons need inverting on dark surfaces */
.btn-close { filter: var(--om-close-filter); }

/* Tables inside plugin cards */
.table { --bs-table-color: var(--om-text); }

/* Spinners inherit currentColor — make sure they are visible */
.spinner-border, .spinner-grow { color: var(--om-green); }

/* Azuriom base.css raises specificity with [data-bs-theme=dark] .accordion,
   so match it here or its #fff active colour wins over our palette. */
[data-bs-theme="dark"] .accordion,
[data-bs-theme="light"] .accordion {
  --bs-accordion-active-color: var(--om-green);
  --bs-accordion-active-bg: var(--om-green-sub);
  --bs-accordion-bg: var(--om-bg-2);
  --bs-accordion-btn-color: var(--om-text);
}

/* White on #c4503a lands at 3.8:1 — darken so badge text clears 4.5:1. */
.text-bg-danger { background-color: var(--om-red-hi) !important; }

/* Inline caveat under an install step */
.om-lp-step__note {
  margin-top: 10px;
  padding: 9px 12px;
  border-left: 3px solid var(--om-gold);
  background: var(--om-gold-sub);
  border-radius: 0 var(--om-r-sm) var(--om-r-sm) 0;
  font-size: 13px;
  color: var(--om-text-2);
  line-height: 1.5;
}
.om-lp-step__note code { color: var(--om-gold); }

/* A flex item defaults to min-width:auto, so a long command inside .om-code
   stretched the whole step and pushed the page sideways on phones. */
.om-lp-step__body { min-width: 0; }
.om-lp-step__body > * { max-width: 100%; }
.om-code { max-width: 100%; overflow-x: auto; }
.om-lp-faq__body pre, .om-lp-faq__body code { max-width: 100%; overflow-x: auto; }

/* Combined macOS + Linux download card icon */
/* Combined macOS + Linux icon: two glyphs share one pill, so the box
   widens instead of squeezing them into the square meant for one. */
.om-dl-card__icon--dual {
  width: auto;
  padding-inline: 9px;
  gap: 7px;
  font-size: 15px;
  line-height: 1;
}
.om-lp-dl-card__icon--dual {
  width: auto;
  padding-inline: 13px;
  gap: 10px;
  font-size: 22px;
  line-height: 1;
}

/* Version would wrap to its own line on phones — drop it there. */
@media (max-width: 480px) {
  .om-dl-card__ver { display: none; }
}

/* Bootstrap Icons sit on a text baseline; center them in the icon pills. */
.om-dl-card__icon .bi,
.om-lp-dl-card__icon .bi {
  display: block;
  line-height: 1;
}
.om-lp-sysreq__os .bi,
.om-lp-steps__tab .bi {
  vertical-align: -1px;
}

/* ══════════════════════════════════════════════════════════════
   §27 Profile: appearance tab — 3D viewer and skin wardrobe
   ══════════════════════════════════════════════════════════════ */
.om-wd {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 20px;
  /* Stretch so the stage matches the combined height of the two side
     cards (current skin + cape) instead of shrinking to its own content. */
  align-items: stretch;
}
@media (max-width: 780px) { .om-wd { grid-template-columns: 1fr; } }

.om-wd__stage {
  background: var(--om-bg-2);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-md);
  padding: 16px;
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 780px) { .om-wd__stage { position: static; height: auto; } }

.om-wd__viewer {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--om-bg-4), var(--om-bg-1));
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-sm);
  overflow: hidden;
  min-height: 240px;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
}
.om-wd__viewer canvas { display: block; max-width: 100%; cursor: grab; }
.om-wd__viewer canvas:active { cursor: grabbing; }

.om-wd__controls { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.om-wd__hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--om-text-3);
  line-height: 1.5;
}

.om-wd__side { display: grid; gap: 16px; }

.om-wd__count {
  margin-left: auto;
  align-self: center;
  font: 600 11px/1 var(--bs-font-monospace);
  letter-spacing: .04em;
  color: var(--om-text-2);
  background: var(--om-bg-1);
  border: 1px solid var(--om-border);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

.om-wd__empty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 22px;
  background: var(--om-bg-1);
  border: 1px dashed var(--om-border-hi);
  border-radius: var(--om-r-sm);
  color: var(--om-text-2);
  font-size: 14px;
}
.om-wd__empty i { font-size: 18px; color: var(--om-text-3); }

.om-wd__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.om-wd__item {
  background: var(--om-bg-1);
  border: 1px solid var(--om-border);
  border-radius: var(--om-r-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--om-t);
}
.om-wd__item:hover { border-color: var(--om-border-hi); }
.om-wd__item.is-worn { border-color: var(--om-green-lo); background: var(--om-green-sub2); }

/* The face is cropped straight out of the 64x64 skin texture:
   head starts at (8,8), hat overlay at (40,8), both 8x8. */
.om-wd__face {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  /* Percentage background-position aligns the P% point of the image with the
     P% point of the box, so the offset is P x (box - image), not a raw shift.
     Head starts at source px 8 of 64: P = 1/7. */
  background-size: 800% 800%;
  background-position: 14.2857% 14.2857%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border-radius: var(--om-r-sm);
  background-color: var(--om-bg-3);
}
.om-wd__hat {
  position: absolute;
  inset: 0;
  /* Hat overlay starts at source px 40 of 64: P = 5/7. */
  background-size: 800% 800%;
  background-position: 71.4286% 14.2857%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border-radius: var(--om-r-sm);
}
.om-wd__badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  font: 700 9px/1 var(--bs-font-monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--om-green);
  color: var(--om-on-green);
  padding: 4px 6px;
  border-radius: 3px;
}

.om-wd__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.om-wd__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--om-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.om-wd__tag {
  font: 600 9px/1 var(--bs-font-monospace);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--om-text-3);
  border: 1px solid var(--om-border);
  border-radius: 3px;
  padding: 3px 5px;
  flex-shrink: 0;
}

/* Two rows instead of one crowded one: the apply/worn button always gets
   the full card width, icon actions get their own row below it — a 132px
   card can't fit "Надеть" plus two labelled buttons side by side. */
.om-wd__acts { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.om-wd__acts-row { display: flex; gap: 6px; }
.om-wd__acts-row form { flex: 1; display: flex; }
.om-wd__btn { width: 100%; justify-content: center; }
.om-wd__acts-row--icons { flex-wrap: wrap; }
.om-wd__acts-row--icons .om-wd__icon-btn,
.om-wd__acts-row--icons form { flex: 1 1 30px; }
.om-wd__icon-btn { width: 100%; justify-content: center; }
.om-wd__acts [aria-disabled="true"] { opacity: .65; pointer-events: none; width: 100%; justify-content: center; }

.om-wd__tag--cape { color: var(--om-text-2); border-color: var(--om-border-hi); }

/* Stacked, not side by side — "Сохранить"/"Отмена" don't both fit on one
   line inside a 132px-wide card without overflowing it. */
.om-wd__rename-form { display: none; flex-direction: column; gap: 6px; }
.om-wd__rename-acts { display: flex; flex-direction: column; gap: 6px; }
.om-wd__rename-acts .om-btn { width: 100%; justify-content: center; }
.om-wd__item.is-renaming .om-wd__meta,
.om-wd__item.is-renaming .om-wd__acts { display: none; }
.om-wd__item.is-renaming .om-wd__rename-form { display: flex; }

.om-wd__upload {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--om-border);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 620px) { .om-wd__upload { grid-template-columns: 1fr; } }
.om-wd__upload .om-field { margin-bottom: 0; }