/* ds.css — дизайн-система McAWP (mcawp.ru). Версия 1.0, 2026-11-03.
   Подключается общей шапкой (header.php) ПОСЛЕ site.css / nav.css / pages.css и только дополняет/выравнивает их.
   Слои: 1 токены  2 каркас  3 типографика  4 компоненты (.ds-*)  5 мост для старых классов (.tab-content .btn/.card/…)  6 cookie  7 a11y/motion.
   Правило: в новых страницах только .ds-* и var(--ds-*); сырые hex/px в разметке и страницах запрещены. Документация: SITE_DESIGN_SYSTEM.md */

/* ===== 1. ТОКЕНЫ ===== */
:root {
  /* primitive */
  --ds-green-400: #00ff80;
  --ds-green-300: #33ffaa;
  --ds-cyan-400: #00ccff;
  --ds-cyan-300: #5fdcff;
  --ds-amber-400: #ffaa00;
  --ds-red-300: #ff8a8a;
  --ds-red-500: #ff5a5a;
  --ds-ok-400: #1ebe50;
  --ds-black: #000;
  --ds-white: #fff;

  /* semantic: цвет */
  --ds-accent: var(--ds-green-400);
  --ds-accent-hover: var(--ds-green-300);
  --ds-accent-2: var(--ds-cyan-400);
  --ds-on-accent: var(--ds-black);          /* текст на зелёном/голубом: 14:1 */
  --ds-text: #fff;
  --ds-text-2: #dfe6e2;                      /* основной вторичный, >= 9:1 на панели */
  --ds-muted: #c3ccc7;                       /* подписи, >= 7:1 на панели (4.5:1 даже на ярком фоне) */
  --ds-link: var(--ds-accent);
  --ds-danger: var(--ds-red-300);
  --ds-danger-bg: rgba(255, 90, 90, .12);
  --ds-success: var(--ds-green-400);
  --ds-success-bg: rgba(0, 255, 128, .1);
  --ds-warn: var(--ds-amber-400);
  --ds-warn-bg: rgba(255, 170, 0, .12);
  --ds-info: var(--ds-cyan-400);
  --ds-info-bg: rgba(0, 204, 255, .1);

  /* semantic: поверхности (стекло поверх фото + тёмный overlay) */
  --ds-bg: #0b0f0c;                          /* запасной цвет под фото */
  --ds-overlay: rgba(0, 0, 0, .62);
  --ds-surface: rgba(6, 10, 8, .62);         /* панель страницы */
  --ds-surface-2: rgba(255, 255, 255, .06);  /* карточка внутри панели */
  --ds-surface-3: rgba(255, 255, 255, .11);  /* hover/активная */
  --ds-surface-solid: rgba(8, 12, 10, .96);  /* меню, диалоги, выпадашки */
  --ds-border: rgba(255, 255, 255, .14);
  --ds-border-strong: rgba(255, 255, 255, .28);  /* границы полей: 3:1 к фону (WCAG 1.4.11) */
  --ds-border-accent: rgba(0, 255, 128, .3);

  /* отступы (шаг 4) */
  --ds-s-1: .25rem; --ds-s-2: .5rem; --ds-s-3: .75rem; --ds-s-4: 1rem;
  --ds-s-5: 1.5rem; --ds-s-6: 2rem; --ds-s-7: 3rem; --ds-s-8: 4rem;
  --ds-gutter: clamp(.75rem, 3vw, 1.25rem);

  /* радиусы */
  --ds-r-sm: 8px; --ds-r-md: 12px; --ds-r-lg: 18px; --ds-r-pill: 999px;

  /* тени */
  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --ds-glow: 0 0 18px rgba(0, 255, 128, .35);
  --ds-glow-text: 0 0 12px rgba(0, 255, 128, .45);

  /* theme-токены (тёмная тема = по умолчанию) */
  color-scheme: dark;
  --ds-code-bg: rgba(0, 255, 128, .14); --ds-code-fg: #e8fff3;
  --ds-fill: rgba(0, 0, 0, .18); --ds-input-bg: rgba(0, 0, 0, .45); --ds-ph: #9aa5a0;
  --ds-btn-hover: rgba(255, 255, 255, .2); --ds-btn-hover-b: rgba(255, 255, 255, .45);
  --ds-footer-bg: rgba(0, 0, 0, .55); --ds-primary-sh: rgba(0, 255, 128, .28); --ds-primary-sh2: rgba(0, 255, 128, .45);
  --ds-info-t: var(--ds-cyan-300); --ds-warn-t: var(--ds-amber-400); --ds-disabled-t: #b4beb9;
  --ds-nav-bg: rgba(0, 0, 0, .95); --ds-nav-bg2: rgba(0, 0, 0, .7); --ds-scrim: rgba(0, 0, 0, .55);
  --ds-hero-t: #fff; --ds-hero-sh: 0 1px 8px rgba(0, 0, 0, .7); --ds-title-sh: 3px 3px 0 rgba(0, 120, 60, .85), 0 0 22px rgba(0, 255, 128, .35);
  --ds-link-u: var(--ds-accent);

  /* типографика */
  --ds-font: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ds-mono: Consolas, 'SFMono-Regular', Menlo, monospace;
  --ds-fs-xs: .8125rem;
  --ds-fs-sm: .9375rem;
  --ds-fs-md: 1rem;
  --ds-fs-lg: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --ds-fs-h3: clamp(1.05rem, 1rem + .4vw, 1.2rem);
  --ds-fs-h2: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --ds-fs-h1: clamp(1.65rem, 1.2rem + 2.2vw, 2.5rem);
  --ds-fs-display: clamp(2.2rem, 1.4rem + 4vw, 3.5rem);
  --ds-lh: 1.65;
  --ds-lh-tight: 1.25;

  /* слои */
  --ds-z-content: 1; --ds-z-nav: 100; --ds-z-menu: 110; --ds-z-modal: 300; --ds-z-cookie: 400; --ds-z-skip: 500;

  /* размеры и движение */
  --ds-nav-h: 56px;
  --ds-tap: 48px;                            /* цель касания: крупнее нормы WCAG (44) для детей */
  --ds-container: 1100px;
  --ds-reading: 72ch;
  --ds-t-fast: .15s; --ds-t: .25s; --ds-ease: cubic-bezier(.2, .8, .2, 1);
  /* брейкпоинты (в @media переменные недоступны, значения для справки): sm 480, md 768, nav 1100 */
}

/* ===== 2. КАРКАС (одинаков на всех страницах) ===== */
html { scroll-padding-top: calc(var(--ds-nav-h) + 12px); }
body { font-family: var(--ds-font); line-height: var(--ds-lh); background-color: var(--ds-bg); -webkit-text-size-adjust: 100%; }
.overlay { background: var(--ds-overlay); pointer-events: none; }
img, svg, video { max-width: 100%; }
a { text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--ds-accent-2); outline-offset: 2px; border-radius: 2px; }
.skip-link { z-index: var(--ds-z-skip); background: var(--ds-accent); color: var(--ds-on-accent); }
.visually-hidden, .ds-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* шапка */
.site-nav { background: var(--ds-surface-solid); border-bottom-color: var(--ds-border-accent); z-index: var(--ds-z-nav); }
.site-nav { padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }
.nav-inner { height: var(--ds-nav-h); gap: var(--ds-s-3); max-width: 1280px; }
.nav-links { gap: 2px; }
@media (min-width: 1181px) { .nav-link { padding: 8px 8px; } .nav-logo { font-size: 1.1em; } .nav-online { margin-left: var(--ds-s-2); } }
.nav-logo { color: var(--ds-accent); }
.nav-link { color: var(--ds-text-2); font-size: var(--ds-fs-sm); transition: color var(--ds-t-fast), background var(--ds-t-fast); }
.nav-link:hover { color: var(--ds-text); background: var(--ds-surface-3); }
.nav-link.active { background: var(--ds-accent); color: var(--ds-on-accent); }
.nav-online { color: var(--ds-green-300); }
.nav-online .dot { background: var(--ds-green-300); }
.nav-dd-menu { background: var(--ds-surface-solid); border-color: var(--ds-border-accent); border-radius: var(--ds-r-md); box-shadow: var(--ds-shadow-md); z-index: var(--ds-z-menu); }
/* постоянный CTA в шапке: «Магазин» */
.nav-link.nav-cta { color: var(--ds-accent); border: 1px solid var(--ds-border-accent); background: var(--ds-success-bg); }
.nav-link.nav-cta:hover { background: rgba(0, 255, 128, .2); color: var(--ds-accent-hover); }
.nav-link.nav-cta.active { background: var(--ds-accent); color: var(--ds-on-accent); }

/* контейнер страницы */
.main-content { max-width: var(--ds-container); padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }
.sub-page { position: relative; z-index: var(--ds-z-content); display: block; }
.sub-page .main-content { padding-top: calc(var(--ds-nav-h) + var(--ds-s-5)); padding-bottom: var(--ds-s-6); }

/* подвал */
.site-footer { background: var(--ds-footer-bg); border-top: 1px solid var(--ds-border-accent); color: var(--ds-muted); padding: var(--ds-s-6) var(--ds-gutter) var(--ds-s-5); margin-top: var(--ds-s-5); font-size: var(--ds-fs-sm); }
.site-footer a { color: var(--ds-link); }
.site-footer a:hover { color: var(--ds-accent-hover); }
.site-footer .ft-cta { display: flex; flex-wrap: wrap; gap: var(--ds-s-3); align-items: center; justify-content: center; margin: 0 0 var(--ds-s-4); }
.site-footer .ft-ip { color: var(--ds-text); font-weight: 700; }
.site-footer .footer-nav { gap: var(--ds-s-1) var(--ds-s-4); max-width: var(--ds-container); margin: 0 auto var(--ds-s-3); }
.site-footer .footer-nav a, .site-footer .footer-social a { display: inline-block; padding: var(--ds-s-2) var(--ds-s-1); }
.site-footer .ft-legal { font-size: var(--ds-fs-xs); }

/* ===== 3. ТИПОГРАФИКА ===== */
.sub-page h1, .ds-h1 { font-size: var(--ds-fs-h1); line-height: var(--ds-lh-tight); color: var(--ds-accent); text-align: center; text-shadow: var(--ds-glow-text); margin: 0 0 var(--ds-s-3); letter-spacing: .01em; font-weight: 700; text-wrap: balance; }
.sub-page h2, .ds-h2 { font-size: var(--ds-fs-h2); line-height: var(--ds-lh-tight); color: var(--ds-accent); text-align: left; text-shadow: none; margin: 0 0 var(--ds-s-3); font-weight: 700; }
.sub-page h3, .ds-h3 { font-size: var(--ds-fs-h3); line-height: 1.3; color: var(--ds-accent-2); text-shadow: none; margin: var(--ds-s-5) 0 var(--ds-s-2); font-weight: 700; }
.sub-page p { font-size: var(--ds-fs-md); line-height: var(--ds-lh); }
.sub-page .tab-content p, .ds-prose p { max-width: var(--ds-reading); }
.ds-lead { text-align: center; color: var(--ds-text-2); font-size: var(--ds-fs-lg); max-width: 46rem; margin: 0 auto var(--ds-s-4); text-wrap: pretty; }
.ds-muted { color: var(--ds-muted); }
.ds-small { font-size: var(--ds-fs-sm); }
.ds-code, .tab-content code, .ds-prose code { background: var(--ds-code-bg); color: var(--ds-code-fg); padding: .1em .45em; border-radius: var(--ds-r-sm); font-family: var(--ds-mono); font-size: .92em; overflow-wrap: anywhere; }
.ds-prose a, .tab-content a { color: var(--ds-link); }

/* ===== 4. КОМПОНЕНТЫ ===== */
/* 4.1 панель страницы / секция / бокс / сетка */
.ds-panel, .tab-content { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: clamp(var(--ds-s-4), 3vw, var(--ds-s-6)); }
.sub-page .tab-content { display: block; margin-bottom: var(--ds-s-5); }
.ds-page-head { text-align: center; padding: 0 0 var(--ds-s-4); }
.ds-actions { display: flex; flex-wrap: wrap; gap: var(--ds-s-3); justify-content: center; margin: var(--ds-s-4) 0 var(--ds-s-2); }
.ds-section { padding: var(--ds-s-5) 0 var(--ds-s-2); border-top: 1px solid var(--ds-border-accent); }
.ds-page-head + .ds-section, .ds-section:first-child { border-top: 0; }
.ds-box, .ds-card { background: var(--ds-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: var(--ds-s-4); }
.ds-card > :first-child { margin-top: 0; } .ds-card > :last-child { margin-bottom: 0; }
.ds-card h3 { margin: 0 0 var(--ds-s-2); color: var(--ds-accent); }
.ds-card p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
a.ds-card { display: block; color: inherit; text-decoration: none; transition: border-color var(--ds-t), background var(--ds-t), transform var(--ds-t); }
a.ds-card:hover { border-color: var(--ds-border-accent); background: var(--ds-surface-3); transform: translateY(-2px); }
.ds-grid { display: grid; gap: var(--ds-s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: var(--ds-s-3) 0; }
.ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/* 4.2 кнопки: primary / secondary / ghost / danger; размеры sm, lg, block */
.ds-btn, .tab-content .btn, .sub-page .cta-row .btn, .ds-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-s-2); min-height: var(--ds-tap); padding: var(--ds-s-2) var(--ds-s-5); border-radius: var(--ds-r-md); border: 1px solid var(--ds-border-strong); background: var(--ds-surface-3); color: var(--ds-text) !important; font: 700 var(--ds-fs-md)/1.2 var(--ds-font); text-decoration: none !important; text-align: center; cursor: pointer; margin: 0; transition: background var(--ds-t-fast), border-color var(--ds-t-fast), transform var(--ds-t-fast), box-shadow var(--ds-t-fast); }
.ds-btn:hover, .tab-content .btn:hover { background: var(--ds-btn-hover); border-color: var(--ds-btn-hover-b); }
.ds-btn:active { transform: translateY(1px); }
.ds-btn--primary, .tab-content .btn.p { background: var(--ds-accent); color: var(--ds-on-accent) !important; border-color: var(--ds-accent); box-shadow: 0 4px 18px var(--ds-primary-sh); }
.ds-btn--primary:hover, .tab-content .btn.p:hover { background: var(--ds-accent-hover); border-color: var(--ds-accent-hover); filter: none; box-shadow: 0 6px 22px var(--ds-primary-sh2); transform: translateY(-1px); }
.ds-btn--ghost { background: transparent; }
.ds-btn--danger { background: var(--ds-danger-bg); border-color: var(--ds-danger); color: var(--ds-danger) !important; }
.ds-btn--sm { min-height: var(--ds-tap); padding: var(--ds-s-1) var(--ds-s-4); font-size: var(--ds-fs-sm); }
.ds-btn--lg { padding: var(--ds-s-3) var(--ds-s-6); font-size: var(--ds-fs-lg); }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* 4.3 бейджи / теги */
.ds-badge { display: inline-flex; align-items: center; gap: .35em; padding: .15em .7em; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: 700; line-height: 1.5; background: var(--ds-surface-3); border: 1px solid var(--ds-border-strong); color: var(--ds-text); white-space: nowrap; }
.ds-badge--accent { background: var(--ds-success-bg); border-color: var(--ds-border-accent); color: var(--ds-accent); }
.ds-badge--info { background: var(--ds-info-bg); border-color: rgba(0, 204, 255, .35); color: var(--ds-info-t); }
.ds-badge--warn { background: var(--ds-warn-bg); border-color: rgba(255, 170, 0, .4); color: var(--ds-warn-t); }
.ds-badge--danger { background: var(--ds-danger-bg); border-color: rgba(255, 138, 138, .4); color: var(--ds-danger); }

/* 4.4 таблицы: обёртка с прокруткой (по умолчанию) или «карточки» на узком экране (.ds-table--stack + data-label) */
.ds-table-wrap, .tab-content .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--ds-s-3) 0 var(--ds-s-4); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); background: var(--ds-fill); }
.ds-table, .tab-content .tw table, .tab-content .roles-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.tab-content .roles-table { display: block; max-width: 100%; overflow-x: auto; }
.ds-table caption, .tab-content .tw caption { text-align: left; color: var(--ds-muted); padding: var(--ds-s-3) var(--ds-s-4) var(--ds-s-2); caption-side: top; }
.ds-table th, .ds-table td, .tab-content .tw th, .tab-content .tw td, .tab-content .roles-th, .tab-content .roles-td { text-align: left; padding: var(--ds-s-3) var(--ds-s-4); border-bottom: 1px solid var(--ds-border); vertical-align: top; }
.ds-table thead th, .tab-content .tw thead th, .tab-content .roles-th { color: var(--ds-accent); border-bottom-color: var(--ds-border-accent); font-weight: 700; }
.ds-table thead th { white-space: nowrap; }
.ds-table tbody th { font-weight: 700; color: var(--ds-text); }
.ds-table tbody tr:last-child > * { border-bottom: 0; }
.ds-table tbody tr:hover { background: var(--ds-surface-2); }
.ds-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
  .ds-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ds-table--stack tr { display: block; padding: var(--ds-s-2) 0; border-bottom: 1px solid var(--ds-border-accent); }
  .ds-table--stack td, .ds-table--stack th { display: flex; gap: var(--ds-s-3); justify-content: space-between; border: 0; padding: var(--ds-s-1) var(--ds-s-4); text-align: right; }
  .ds-table--stack td::before { content: attr(data-label); color: var(--ds-muted); font-weight: 600; text-align: left; flex: 0 0 38%; }
}

/* 4.5 аккордеон / FAQ (details/summary, без JS) */
.ds-accordion { display: grid; gap: var(--ds-s-2); margin: var(--ds-s-3) 0; }
.ds-accordion details, .tab-content details { background: var(--ds-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); margin: 0; transition: border-color var(--ds-t); }
.tab-content details { margin: var(--ds-s-2) 0; }
.ds-accordion details[open], .tab-content details[open] { border-color: var(--ds-border-accent); }
.ds-accordion summary, .tab-content summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-3); min-height: var(--ds-tap); padding: var(--ds-s-3) var(--ds-s-4); font-weight: 700; cursor: pointer; list-style: none; float: none; }
.ds-accordion summary::-webkit-details-marker, .tab-content summary::-webkit-details-marker { display: none; }
.ds-accordion summary::after, .tab-content summary::after { content: "+"; float: none; flex: 0 0 auto; color: var(--ds-accent); font-size: 1.4em; line-height: 1; transition: transform var(--ds-t); }
.ds-accordion details[open] > summary::after, .tab-content details[open] > summary::after { content: "\2212"; }
.ds-accordion summary:hover, .tab-content summary:hover { background: var(--ds-surface-2); }
.ds-accordion .ds-a, .tab-content details .a { padding: 0 var(--ds-s-4) var(--ds-s-4); color: var(--ds-text-2); }
.ds-accordion .ds-a p, .tab-content details .a p { margin: 0 0 var(--ds-s-2); }

/* 4.6 формы */
.ds-field { display: grid; gap: var(--ds-s-1); margin: 0 0 var(--ds-s-4); }
.ds-label { font-weight: 600; color: var(--ds-text); font-size: var(--ds-fs-sm); }
.ds-input, .ds-select, .ds-textarea { width: 100%; min-height: var(--ds-tap); padding: var(--ds-s-2) var(--ds-s-3); background: var(--ds-input-bg); color: var(--ds-text); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-md); font: inherit; font-size: max(16px, 1rem); }
.ds-textarea { min-height: 6rem; resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-ph); }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--ds-btn-hover-b); }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible { outline: 3px solid var(--ds-accent-2); outline-offset: 1px; border-color: var(--ds-accent-2); }
.ds-input[aria-invalid="true"], .ds-select[aria-invalid="true"], .ds-textarea[aria-invalid="true"] { border-color: var(--ds-danger); background: var(--ds-danger-bg); }
.ds-hint { font-size: var(--ds-fs-xs); color: var(--ds-muted); }
.ds-error { font-size: var(--ds-fs-sm); color: var(--ds-danger); }
.ds-error::before { content: "! "; font-weight: 700; }
.ds-check { display: flex; align-items: flex-start; gap: var(--ds-s-3); min-height: var(--ds-tap); padding: var(--ds-s-2) 0; cursor: pointer; }
.ds-check input { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: var(--ds-accent); cursor: pointer; }

/* 4.7 вкладки (role=tablist) */
.ds-tabs { display: flex; gap: var(--ds-s-2); overflow-x: auto; padding-bottom: var(--ds-s-1); margin: 0 0 var(--ds-s-4); scrollbar-width: thin; }
.ds-tab { flex: 0 0 auto; min-height: var(--ds-tap); padding: var(--ds-s-2) var(--ds-s-5); border-radius: var(--ds-r-md); border: 1px solid var(--ds-border-strong); background: var(--ds-surface-2); color: var(--ds-text-2); font: 700 var(--ds-fs-sm)/1.2 var(--ds-font); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background var(--ds-t-fast), color var(--ds-t-fast); }
.ds-tab:hover { background: var(--ds-surface-3); color: var(--ds-text); }
.ds-tab[aria-selected="true"], .ds-tab.is-active { background: var(--ds-accent-2); border-color: var(--ds-accent-2); color: var(--ds-on-accent); }

/* 4.8 уведомления / заметки */
.ds-alert, .tab-content .note { display: block; border: 1px solid var(--ds-border-accent); border-left-width: 4px; border-radius: var(--ds-r-md); background: var(--ds-success-bg); padding: var(--ds-s-3) var(--ds-s-4); margin: var(--ds-s-4) 0; color: var(--ds-text); }
.ds-alert > :first-child { margin-top: 0; } .ds-alert > :last-child { margin-bottom: 0; }
.ds-alert--info { border-color: rgba(0, 204, 255, .4); background: var(--ds-info-bg); }
.ds-alert--warn { border-color: rgba(255, 170, 0, .45); background: var(--ds-warn-bg); }
.ds-alert--danger { border-color: rgba(255, 138, 138, .5); background: var(--ds-danger-bg); }
.ds-alert__title { display: block; font-weight: 700; margin: 0 0 var(--ds-s-1); }

/* 4.9 товар / цена (витрина и карточки ролей) */
.ds-product { display: flex; flex-direction: column; background: var(--ds-surface-solid); border: 1px solid var(--ds-border-accent); border-radius: var(--ds-r-lg); overflow: hidden; }
.ds-product__img { aspect-ratio: 4 / 3; background: rgba(255, 255, 255, .05); display: block; width: 100%; object-fit: cover; }
.ds-product__body { display: flex; flex-direction: column; gap: var(--ds-s-2); padding: var(--ds-s-4); flex: 1; }
.ds-product__title { margin: 0; font-size: var(--ds-fs-md); color: var(--ds-text); }
.ds-price { font-size: var(--ds-fs-lg); font-weight: 800; color: var(--ds-accent); font-variant-numeric: tabular-nums; }
.ds-price small { font-size: var(--ds-fs-xs); font-weight: 400; color: var(--ds-muted); }
.ds-price s { font-weight: 400; color: var(--ds-muted); font-size: var(--ds-fs-sm); margin-right: var(--ds-s-1); }

/* 4.10 плитки статистики (онлайн, версия, год) */
.ds-stats { display: flex; flex-wrap: wrap; gap: var(--ds-s-3); justify-content: center; margin: var(--ds-s-4) 0; }
.ds-stat { flex: 1 1 8rem; max-width: 14rem; text-align: center; padding: var(--ds-s-3) var(--ds-s-4); background: var(--ds-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); }
.ds-stat__value { display: block; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); font-weight: 800; color: var(--ds-accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
.ds-stat__label { display: block; font-size: var(--ds-fs-xs); color: var(--ds-muted); }

/* 4.11 блок «АВП»: компактное пояснение баланса + ссылка в магазин (layout.php: ds_avp()) */
.ds-avp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s-3) var(--ds-s-4); background: var(--ds-success-bg); border: 1px solid var(--ds-border-accent); border-radius: var(--ds-r-md); padding: var(--ds-s-3) var(--ds-s-4); margin: var(--ds-s-4) 0; }
.ds-avp__text { flex: 1 1 18rem; margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text); }
.ds-avp__text b { color: var(--ds-accent); }

/* 4.12 хлебные крошки (разметка page_open.php) */
.breadcrumbs { margin: 0 0 var(--ds-s-4); font-size: var(--ds-fs-sm); color: var(--ds-muted); }
.breadcrumbs a { color: var(--ds-link); display: inline-block; padding: var(--ds-s-1) 0; }
.breadcrumbs li + li::before { color: var(--ds-muted); }

/* 4.13 пустое состояние / 404 / ошибка */
.ds-empty { text-align: center; padding: var(--ds-s-7) var(--ds-s-4); max-width: 36rem; margin: 0 auto; }
.ds-empty__code { display: block; font-size: clamp(3.5rem, 2rem + 8vw, 6rem); font-weight: 900; line-height: 1; color: var(--ds-accent); text-shadow: var(--ds-glow-text); }
.ds-empty h1 { margin-top: var(--ds-s-3); }
.ds-empty p { margin-left: auto; margin-right: auto; color: var(--ds-text-2); }

/* 4.14 скелетон / загрузка */
.ds-skeleton { display: block; min-height: 1em; border-radius: var(--ds-r-sm); background: linear-gradient(100deg, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .06) 70%) 0 0 / 200% 100%; animation: ds-shimmer 1.4s linear infinite; }
@keyframes ds-shimmer { to { background-position: -200% 0; } }

/* ===== 5. МОСТ: старые страницы (pvp/vanilla/anarchy/donate/faq, about/guide/...) выглядят по системе без правки разметки ===== */
.sub-page .lead { text-align: center; color: var(--ds-text-2); font-size: var(--ds-fs-lg); max-width: 46rem; margin: 0 auto var(--ds-s-4); }
.sub-page .cta-row { display: flex; flex-wrap: wrap; gap: var(--ds-s-3); justify-content: center; margin: var(--ds-s-4) 0 var(--ds-s-2); }
.tab-content .sec { margin: 0; padding: var(--ds-s-5) 0 var(--ds-s-2); border-top: 1px solid var(--ds-border-accent); }
.tab-content .sec:first-of-type { border-top: 0; }
.tab-content .sec h2 { margin: 0 0 var(--ds-s-3); font-size: var(--ds-fs-h2); text-align: left; text-shadow: none; }
.tab-content .grid { display: grid; gap: var(--ds-s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: var(--ds-s-3) 0; }
.tab-content .card { background: var(--ds-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: var(--ds-s-4); }
.tab-content .card h3 { margin: 0 0 var(--ds-s-2); color: var(--ds-accent); font-size: var(--ds-fs-h3); }
.tab-content .card p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.tab-content .tw table { min-width: 32rem; }
.tab-content ul, .tab-content ol { margin: var(--ds-s-3) 0; padding-left: 1.4em; }
.tab-content li { margin: var(--ds-s-1) 0; line-height: 1.55; }
.tab-content hr { border: 0; border-top: 1px solid var(--ds-border-accent); margin: var(--ds-s-5) 0; }
.tab-content h2, .tab-content h3 { text-shadow: none; }
.tab-content > h1:first-child, .tab-content > h2:first-child { text-align: center; }
.sub-tab-btn { min-height: var(--ds-tap); }
.sub-tab-btn.active { background: var(--ds-accent-2); color: var(--ds-on-accent); }
/* герой главной: кнопки по тем же токенам */
.hero-btn { min-height: var(--ds-tap); border-radius: var(--ds-r-md); }
.hero-stat-label { color: var(--ds-text-2); }
.hero-subtitle { color: var(--ds-hero-t); text-shadow: var(--ds-hero-sh); }

/* ===== 6. COOKIE-БАННЕР (разметка cookie-banner.php, стили только здесь) ===== */
#cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ds-z-cookie); background: var(--ds-surface-solid); border-top: 1px solid var(--ds-border-accent); box-shadow: 0 -6px 30px rgba(0, 0, 0, .6); padding: var(--ds-s-4) var(--ds-gutter); padding-bottom: max(var(--ds-s-4), env(safe-area-inset-bottom)); animation: ds-slide-up .3s var(--ds-ease); }
@keyframes ds-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
#cookie-banner .cb-inner { max-width: var(--ds-container); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-s-3) var(--ds-s-5); }
#cookie-banner .cb-text { display: flex; gap: var(--ds-s-3); align-items: flex-start; flex: 1 1 22rem; min-width: 0; }
#cookie-banner .cb-icon { font-size: 1.5rem; line-height: 1; }
#cookie-banner .cb-text strong { display: block; color: var(--ds-text); margin-bottom: var(--ds-s-1); }
#cookie-banner .cb-text p { margin: 0; font-size: var(--ds-fs-sm); line-height: 1.5; color: var(--ds-text-2); overflow-wrap: anywhere; }
#cookie-banner .cb-text a { color: var(--ds-link); white-space: normal; overflow-wrap: anywhere; }
#cookie-banner .cb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s-3) var(--ds-s-4); flex: 0 1 auto; }
#cookie-banner .cb-checkbox-label { display: flex; align-items: center; gap: var(--ds-s-3); min-height: var(--ds-tap); cursor: pointer; color: var(--ds-text); font-size: var(--ds-fs-sm); }
#cookie-banner .cb-btn { min-height: var(--ds-tap); min-width: 6rem; padding: var(--ds-s-2) var(--ds-s-5); border-radius: var(--ds-r-md); border: 1px solid var(--ds-accent); background: var(--ds-accent); color: var(--ds-on-accent); font: 700 var(--ds-fs-md) var(--ds-font); cursor: pointer; }
#cookie-banner .cb-btn:disabled { background: var(--ds-surface-3); border-color: var(--ds-border-strong); color: var(--ds-disabled-t); cursor: not-allowed; }
@media (max-width: 600px) {
  #cookie-banner { padding-top: var(--ds-s-3); max-height: 70vh; overflow-y: auto; }
  #cookie-banner .cb-text p { font-size: var(--ds-fs-xs); }
  #cookie-banner .cb-icon { display: none; }
  #cookie-banner .cb-checkbox-label { flex: 1 1 100%; }
  #cookie-banner .cb-actions { width: 100%; }
  #cookie-banner .cb-btn { flex: 1; }
}

/* ===== 7. АДАПТИВ / ДОСТУПНОСТЬ / ДВИЖЕНИЕ ===== */
@media (max-width: 1380px) { .nav-online { display: none; } }
@media (max-width: 1180px) {
  .nav-links { background: var(--ds-surface-solid); }
  .nav-link { min-height: var(--ds-tap); display: flex; align-items: center; }
  .nav-link.nav-cta { margin: var(--ds-s-2) var(--ds-s-4); width: auto; justify-content: center; }
}
@media (max-width: 480px) {
  .ds-actions .ds-btn, .sub-page .cta-row .btn { width: 100%; }
  .site-footer .footer-nav { justify-content: flex-start; }
}
@media (hover: none) { a.ds-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ds-skeleton { animation: none; }
}
@media (forced-colors: active) { .ds-btn, .ds-tab, .ds-badge, .ds-card { border: 1px solid CanvasText; } }

/* cookie: нативный чекбокс вместо невидимого (виден focus-visible, 44px зона) */
#cookie-banner .cb-checkmark { display: none; }
#cookie-banner .cb-checkbox-label input[type="checkbox"] { position: static; opacity: 1; width: 1.35rem; height: 1.35rem; margin: 0; flex: 0 0 auto; accent-color: var(--ds-accent); }

/* ===== 8. ДЕТСКИЙ UX: правила, шаги, маскот, монета ===== */
.ds-center, .sub-page .ds-center { text-align: center; }
.ds-parent-note { margin: var(--ds-s-2) 0 0; font-size: var(--ds-fs-sm); color: var(--ds-text); }
.ds-parent-note b { color: var(--ds-warn); }
.ds-avp { align-items: center; }
.ds-avp__body { flex: 1 1 18rem; min-width: 0; }
.ds-avp .ds-coin { flex: 0 0 auto; }
.ds-steps { list-style: none; margin: var(--ds-s-4) 0; padding: 0; display: grid; gap: var(--ds-s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); counter-reset: none; }
.ds-step { position: relative; background: var(--ds-surface-2); border: 1px solid var(--ds-border-accent); border-radius: var(--ds-r-lg); padding: var(--ds-s-5) var(--ds-s-4) var(--ds-s-4); text-align: center; }
.ds-step__n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: -2.2rem auto var(--ds-s-2); border-radius: var(--ds-r-md); background: var(--ds-accent); color: var(--ds-on-accent); font-weight: 900; font-size: 1.4rem; box-shadow: 0 0 0 4px rgba(0, 255, 128, .2); }
.ds-step h3 { margin: 0 0 var(--ds-s-1); color: var(--ds-text); }
.ds-step p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ds-safe { background: var(--ds-info-bg); border: 1px solid rgba(0, 204, 255, .35); border-radius: var(--ds-r-lg); padding: var(--ds-s-4) var(--ds-s-5); margin: var(--ds-s-5) 0; }
.ds-safe__title { margin: 0 0 var(--ds-s-2); color: var(--ds-cyan-300); }
.ds-safe__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-s-2); }
.ds-safe__list li { margin: 0; }
.ds-creeper { display: block; image-rendering: pixelated; border-radius: var(--ds-r-sm); box-shadow: var(--ds-shadow-sm); }
.ds-mascot { display: flex; justify-content: center; margin: 0 0 var(--ds-s-2); }
.ds-coin { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; perspective: 300px; }
.ds-coin > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc400 55%, #c98a00); color: #5a3b00; font-weight: 900; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 2px 8px rgba(0, 0, 0, .5); }
.ds-confetti { position: fixed; left: 0; top: 0; width: 10px; height: 10px; border-radius: 2px; pointer-events: none; z-index: var(--ds-z-modal); will-change: transform, opacity; }

/* ===== 9. ДВИЖЕНИЕ (только transform/opacity; безопасно: без вспышек, период >= 1.5 c; всё выключается при reduced-motion) ===== */
.ds-decor { display: none; }
@media (prefers-reduced-motion: no-preference) {
  :root { --ds-bounce: cubic-bezier(.34, 1.56, .64, 1); }
  /* появление шапки страницы */
  .ds-page-head > * { animation: ds-up .5s var(--ds-ease) both; }
  .ds-page-head > :nth-child(2) { animation-delay: .08s; }
  .ds-page-head > :nth-child(3) { animation-delay: .16s; }
  @keyframes ds-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  /* появление при прокрутке: JS (ds.js) ставит .ds-reveal только ниже экрана, поэтому без мигания и без сдвигов */
  html.ds-js .ds-reveal { opacity: 0; transform: translateY(18px); }
  html.ds-js .ds-reveal.is-in { opacity: 1; transform: none; transition: opacity .5s var(--ds-ease), transform .5s var(--ds-ease); transition-delay: calc(var(--ds-i, 0) * 70ms); }
  /* кнопки: прыжок при наведении, «вдавливание» при нажатии */
  .ds-btn, .tab-content .btn, .hero-btn, .nav-link { transition-timing-function: var(--ds-bounce); }
  .ds-btn:hover, .tab-content .btn:hover { transform: translateY(-3px) scale(1.02); }
  .ds-btn:active, .tab-content .btn:active, .hero-btn:active { transform: translateY(1px) scale(.96); transition-duration: .08s; }
  /* карточки: подъём и лёгкий наклон */
  a.ds-card:hover, .tab-content .card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--ds-shadow-md); }
  .tab-content .card { transition: transform var(--ds-t) var(--ds-bounce), box-shadow var(--ds-t); }
  /* выпадающее меню */
  .nav-dd-menu { animation: ds-drop .2s var(--ds-ease); transform-origin: top; }
  @keyframes ds-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
  /* плавающие элементы, маскот, монета */
  .ds-float { animation: ds-float 4.5s ease-in-out infinite; }
  @keyframes ds-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
  .ds-bob { animation: ds-bob 3s ease-in-out infinite; }
  @keyframes ds-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  .ds-coin > span { animation: ds-flip 3.6s ease-in-out infinite; }
  @keyframes ds-flip { 0%, 60%, 100% { transform: rotateY(0); } 80% { transform: rotateY(180deg); } }
  /* «поп» (добавление в корзину, успех): класс ставит dsPop(el) */
  .ds-pop { animation: ds-pop .45s var(--ds-bounce); }
  @keyframes ds-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
  /* мягкие квадратики-«искры» на фоне: 8 штук, медленно вверх, прозрачные; пауза при скрытой вкладке (ds-paused) */
  .ds-decor { display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .ds-decor i { position: absolute; bottom: -24px; width: 12px; height: 12px; background: var(--ds-green-400); opacity: .22; border-radius: 2px; animation: ds-rise 26s linear infinite; will-change: transform; }
  .ds-decor i:nth-child(2n) { background: var(--ds-cyan-400); width: 9px; height: 9px; animation-duration: 32s; }
  .ds-decor i:nth-child(3n) { width: 16px; height: 16px; animation-duration: 38s; opacity: .15; }
  .ds-decor i:nth-child(1) { left: 6%; animation-delay: -4s; } .ds-decor i:nth-child(2) { left: 18%; animation-delay: -15s; }
  .ds-decor i:nth-child(3) { left: 31%; animation-delay: -9s; } .ds-decor i:nth-child(4) { left: 47%; animation-delay: -22s; }
  .ds-decor i:nth-child(5) { left: 62%; animation-delay: -2s; } .ds-decor i:nth-child(6) { left: 74%; animation-delay: -18s; }
  .ds-decor i:nth-child(7) { left: 86%; animation-delay: -11s; } .ds-decor i:nth-child(8) { left: 95%; animation-delay: -27s; }
  @keyframes ds-rise { from { transform: translate3d(0, 0, 0) rotate(0); } to { transform: translate3d(24px, -110vh, 0) rotate(180deg); } }
  html.ds-paused .ds-decor i, html.ds-paused .ds-float, html.ds-paused .ds-bob, html.ds-paused .ds-coin > span { animation-play-state: paused; }
  @media (max-width: 600px) { .ds-decor i:nth-child(n+5) { display: none; } }
  /* переход между страницами (Chrome/Edge; в остальных браузерах игнорируется) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .18s ease both ds-fade-out; }
  ::view-transition-new(root) { animation: .28s ease both ds-fade-in; }
  @keyframes ds-fade-out { to { opacity: 0; } }
  @keyframes ds-fade-in { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .ds-decor, .ds-confetti { display: none !important; }
  html.ds-js .ds-reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== 10. НЕТ ГОРИЗОНТАЛЬНОГО СДВИГА + МОБИЛЬНОЕ МЕНЮ ===== */
/* clip (не hidden): не создаёт контейнер прокрутки, fixed-шапка и sticky не ломаются. Подстраховка после устранения реальных причин. */
html, body { overflow-x: clip; max-width: 100%; }
img, video { max-width: 100%; height: auto; }
pre { max-width: 100%; overflow-x: auto; }
.main-content, .tab-content, .ds-card, .ds-grid > *, .ds-avp__body, .ds-step { min-width: 0; }
.tab-content, .ds-card, .ds-prose, .ds-alert { overflow-wrap: break-word; }
.nav-inner { min-width: 0; }
.nav-logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) {
  html.ds-menu-open { overflow: hidden; }
  .nav-links { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overscroll-behavior: contain; box-shadow: var(--ds-shadow-md); }
  .site-nav.menu-open::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: var(--ds-scrim); z-index: -1; }
  .burger-btn { min-width: var(--ds-tap); min-height: var(--ds-tap); }
}
/* страховка от «подтягивания» страницы вбок на телефонах: жест по горизонтали не двигает страницу; прокручиваемые блоки сохраняют свой pan-x */
html, body { touch-action: pan-y pinch-zoom; }
.ds-table-wrap, .tab-content .tw, .tab-content .roles-table, .ds-tabs, .nav-links, pre, #cookie-banner { touch-action: pan-x pan-y pinch-zoom; }

/* ===== 8. ТЕМЫ (THEME-BLOCK): тёмная = по умолчанию (токены в :root), светлая = :root[data-theme="light"] ===== */
:root[data-theme="light"] {
  color-scheme: light;
  --ds-accent: #06703a; --ds-accent-hover: #055a2e; --ds-accent-2: #08568f; --ds-on-accent: #fff;
  --ds-text: #10241a; --ds-text-2: #243a2e; --ds-muted: #435a4d;
  --ds-danger: #b3261e; --ds-danger-bg: rgba(179, 38, 30, .09);
  --ds-success: #06703a; --ds-success-bg: rgba(8, 122, 64, .1);
  --ds-warn: #8a4b00; --ds-warn-bg: rgba(255, 170, 0, .2);
  --ds-info: #08568f; --ds-info-bg: rgba(8, 86, 143, .09);
  --ds-bg: #cfe9ff; --ds-overlay: rgba(226, 243, 255, .9);
  --ds-surface: rgba(255, 255, 255, .86); --ds-surface-2: rgba(8, 122, 64, .06); --ds-surface-3: rgba(8, 122, 64, .13);
  --ds-surface-solid: rgba(255, 255, 255, .97);
  --ds-border: rgba(16, 60, 40, .18); --ds-border-strong: rgba(16, 60, 40, .55); --ds-border-accent: rgba(8, 122, 64, .4);
  --ds-shadow-sm: 0 2px 8px rgba(20, 70, 110, .14); --ds-shadow-md: 0 8px 24px rgba(20, 70, 110, .2);
  --ds-glow: 0 0 14px rgba(8, 122, 64, .2); --ds-glow-text: none;
  --ds-code-bg: rgba(8, 122, 64, .12); --ds-code-fg: #0b3d22;
  --ds-fill: rgba(255, 255, 255, .55); --ds-input-bg: #fff; --ds-ph: #5d6f65;
  --ds-btn-hover: rgba(8, 122, 64, .2); --ds-btn-hover-b: rgba(8, 122, 64, .6);
  --ds-footer-bg: rgba(255, 255, 255, .82); --ds-primary-sh: rgba(8, 122, 64, .3); --ds-primary-sh2: rgba(8, 122, 64, .45);
  --ds-info-t: #08568f; --ds-warn-t: #7a4200; --ds-disabled-t: #4a5c52;
  --ds-nav-bg: rgba(255, 255, 255, .98); --ds-nav-bg2: rgba(255, 255, 255, .8); --ds-scrim: rgba(20, 50, 80, .35);
  --ds-cyan-300: #08568f; --ds-green-300: #06703a; --ds-hero-title: #055a2e;
  --ds-hero-t: #10241a; --ds-hero-sh: 0 0 10px rgba(255, 255, 255, .9); --ds-title-sh: 3px 3px 0 rgba(255, 255, 255, .95), 0 0 22px rgba(255, 255, 255, .6);
}
body { color: var(--ds-text); }
html[data-theme="light"] .ds-stat { background: var(--ds-surface); }
html[data-theme="light"] .hero-title { color: var(--ds-hero-title); }
/* мелкая правка для обеих тем: контраст белого текста на синей кнопке и фокус в шапке */
.hero-btn-accent { background: linear-gradient(135deg, #1d6fd6, #5560d6); }
.nav-link:focus-visible, .burger-btn:focus-visible, .nav-logo:focus-visible { outline-color: var(--ds-accent-2); }
.site-nav.scrolled { background: var(--ds-nav-bg2); }
@media (max-width: 1180px) { .nav-links { background: var(--ds-nav-bg); } .burger-btn span { background: var(--ds-text); } }
.burger-btn span { background: var(--ds-text); }
.breadcrumbs { color: var(--ds-muted); } .breadcrumbs li + li::before { color: var(--ds-muted); } .breadcrumbs a, .footer-nav a { color: var(--ds-link); }
.hero-title { color: var(--ds-accent); } .hero-stat-value, .section-title, .vote-block h2, .graph-header h3, .tab-content h2, .tab-content h3, .roles-th { color: var(--ds-accent); }
.hero-subtitle { color: var(--ds-hero-t); }
.hero-stat-label, .vote-block > p, #server-status, #peak-online { color: var(--ds-muted); }
.players-graph-container, .vote-block { background: var(--ds-surface); border-color: var(--ds-border); }
.sub-tab-btn, .graph-tab { background: var(--ds-surface-2); border-color: var(--ds-border-strong); color: var(--ds-text-2); }
.sub-tab-btn:hover, .graph-tab:hover { background: var(--ds-surface-3); color: var(--ds-text); }
.sub-tab-btn.active { background: var(--ds-accent-2); color: #fff; box-shadow: none; }
.graph-tab.active { background: var(--ds-accent); color: var(--ds-on-accent); border-color: var(--ds-accent); }
.hero-btn-primary { background: var(--ds-accent); color: var(--ds-on-accent); }
.hero-btn-primary:hover { background: var(--ds-accent-hover); }
.hero-btn-secondary { background: var(--ds-surface-3); color: var(--ds-text); border-color: var(--ds-border-strong); }
.socials a { color: var(--ds-info); }
.socials a:hover { color: var(--ds-text); }

/* --- только светлая тема: то, что жёстко прошито в старых css --- */
html[data-theme="light"] .tab-content h2, html[data-theme="light"] .section-title, html[data-theme="light"] .vote-block h2,
html[data-theme="light"] .graph-header h3, html[data-theme="light"] .hero-stat-value, html[data-theme="light"] .hero-title,
html[data-theme="light"] .nav-logo, html[data-theme="light"] .sub-page h1, html[data-theme="light"] .ds-page-head h1 { text-shadow: none; }
html[data-theme="light"] .hero-title, html[data-theme="light"] .ds-page-head h1 { text-shadow: 2px 2px 0 rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .7); }
html[data-theme="light"] .nav-online { color: #0a6b35; } html[data-theme="light"] .nav-online .dot { background: #12a352; }
html[data-theme="light"] #server-status strong { color: #0a6b35; } html[data-theme="light"] #peak-online strong { color: #8a4b00; }
html[data-theme="light"] .site-nav { box-shadow: 0 1px 0 var(--ds-border); }
html[data-theme="light"] .site-nav.scrolled { box-shadow: 0 4px 18px rgba(20, 70, 110, .18); }
html[data-theme="light"] .nav-link.nav-cta:hover { background: rgba(8, 122, 64, .2); }
html[data-theme="light"] .nav-logo__mark { filter: drop-shadow(0 0 1px #0b3d22) drop-shadow(0 1px 2px rgba(20, 70, 110, .35)); }
html[data-theme="light"] #cookie-banner { box-shadow: 0 -6px 24px rgba(20, 70, 110, .22); }
html[data-theme="light"] .ds-decor i { opacity: .35; }
html[data-theme="light"] .tab-content hr { border-top-color: var(--ds-border-accent); }

/* --- кнопка темы в шапке --- */
.ds-theme-btn { position: relative; flex: 0 0 auto; width: 44px; height: 44px; margin-left: var(--ds-s-2); padding: 0; border: 2px solid var(--ds-border-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-3); cursor: pointer; overflow: hidden; transition: transform var(--ds-t-fast), background var(--ds-t-fast); }
.ds-theme-btn[hidden] { display: none; }
.ds-theme-btn:hover { background: var(--ds-btn-hover); } .ds-theme-btn:active { transform: scale(.92); }
.ds-theme-btn .ds-ic, .ds-sun .ds-ic { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transition: opacity .3s, transform .45s var(--ds-ease); }
.ds-ic--moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-theme="dark"] .ds-ic--moon, :root:not([data-theme]) .ds-ic--moon { opacity: 1; transform: none; }
html[data-theme="dark"] .ds-ic--sun, :root:not([data-theme]) .ds-ic--sun { opacity: 0; transform: rotate(90deg) scale(.5); }
@media (min-width: 1181px) and (max-width: 1439px) { .nav-link { padding: 8px 5px; } .nav-links { gap: 0; } }
@media (min-width: 1181px) and (max-width: 1759px) { .nav-logo__text, .nav-online { display: none; } }
.nav-inner { max-width: 1560px; }
@media (min-width: 1181px) { .ds-theme-btn { margin-left: 0; } }
@media (max-width: 1180px) { .ds-theme-btn { margin-left: auto; margin-right: var(--ds-s-2); order: 1; } .burger-btn { order: 2; } }
@media (prefers-reduced-motion: reduce) { .ds-theme-btn .ds-ic, .ds-sun .ds-ic { transition: none; } }

/* плавная смена цветов только в момент переключения (JS ставит класс на 320 мс) */
@media (prefers-reduced-motion: no-preference) {
  html.ds-theming *, html.ds-theming *::before, html.ds-theming *::after { transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease, stroke .25s ease, box-shadow .25s ease, text-shadow .25s ease !important; }
}
html[data-theme="light"] .breadcrumbs a { color: var(--ds-accent-hover); }
html[data-theme="light"] .ds-badge--accent { color: #055a2e; }
html[data-theme="light"] .svc-num { background: rgba(8, 122, 64, .14); color: #055a2e; }

/* читаемость текста прямо поверх арта: «таблетки» под хлебными крошками и адресом */
.breadcrumbs { width: fit-content; max-width: 100%; padding: 4px 14px; border-radius: var(--ds-r-pill); background: var(--ds-surface); }
.home-ip { display: inline-block; padding: 2px 14px; border-radius: var(--ds-r-md); background: var(--ds-surface); }
.svc-num { background: var(--ds-success-bg); }
.ds-alert--warn a { color: var(--ds-accent-hover); }
html[data-theme="light"] .ds-alert--warn a { color: #054d28; }
html[data-theme="light"] .svc-num { background: rgba(8, 122, 64, .14); }
html[data-theme="light"] .sub-page h1, html[data-theme="light"] .ds-page-head h1 { color: #055a2e; }
.ds-parent-note { display: inline-block; padding: 2px 14px; border-radius: var(--ds-r-md); background: var(--ds-surface); }
html[data-theme="light"] .hero-subtitle { background: rgba(255, 255, 255, .6); border-radius: var(--ds-r-md); padding: 2px 10px; }
html[data-theme="light"] .ds-badge--accent { background: #e3f4ea; color: #044a26; }

/* ===== 9. ФОН-АРТ (BGART-BLOCK): растр день/ночь + SVG-слои с параллаксом (/art/), оверлей для текста ===== */
:root { --ov-n: linear-gradient(180deg, rgba(6, 9, 22, .25) 0, rgba(6, 9, 22, .45) 35%, rgba(6, 9, 22, .72) 70%, rgba(6, 9, 22, .86) 100%); --ov-d: linear-gradient(180deg, rgba(235, 246, 255, 0) 0, rgba(235, 246, 255, .38) 35%, rgba(235, 246, 255, .72) 70%, rgba(235, 246, 255, .86) 100%); }
body:has(.sub-page) { --ov-n: linear-gradient(180deg, rgba(6, 9, 22, .5) 0, rgba(6, 9, 22, .62) 35%, rgba(6, 9, 22, .8) 70%, rgba(6, 9, 22, .9) 100%); --ov-d: linear-gradient(180deg, rgba(235, 246, 255, .55) 0, rgba(235, 246, 255, .72) 35%, rgba(235, 246, 255, .84) 70%, rgba(235, 246, 255, .92) 100%); }
body { background-image: none !important; background-color: var(--ds-bg); }
.bgart { position: fixed; inset: 0; z-index: 0; overflow: hidden; contain: paint; pointer-events: none; image-rendering: pixelated; }
.bgart::before, .bgart::after { content: ""; position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; transition: opacity .5s ease; }
.bgart::before { background-image: url(/art/ns-night-1920.webp); }
.bgart::after { background-image: url(/art/ns-day-1920.webp); opacity: 0; }
html[data-theme="light"] .bgart::before { opacity: 0; } html[data-theme="light"] .bgart::after { opacity: 1; }
.bgart.has-l::before, .bgart.has-l::after { visibility: hidden; transition: none; }
.bgart img { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 160px); max-width: none; max-height: none; object-fit: cover; opacity: 0; z-index: 1; transition: opacity .5s ease; transform: translate3d(calc(var(--mx, 0) * var(--m) * -1px), calc(var(--my, 0) * var(--m) * -.5px - var(--sy, 0) * var(--k) * 1px), 0); }
.bgart img.on { opacity: 1; } .bgart img.top { z-index: 2; will-change: transform; }
@media (max-width: 768px) { .bgart::before { background-image: url(/art/ns-night-m.webp); } .bgart::after { background-image: url(/art/ns-day-m.webp); } }
.overlay { background: none !important; }
.overlay::before, .overlay::after { content: ""; position: absolute; inset: 0; transition: opacity .5s ease; }
.overlay::before { background: var(--ov-n); } .overlay::after { background: var(--ov-d); opacity: 0; }
html[data-theme="light"] .overlay::before { opacity: 0; } html[data-theme="light"] .overlay::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.ds-theming .bgart::before, html.ds-theming .bgart::after, html.ds-theming .overlay::before, html.ds-theming .overlay::after, html.ds-theming .bgart img { transition: opacity .5s ease !important; }
}
@media (prefers-reduced-motion: reduce) { .bgart::before, .bgart::after, .overlay::before, .overlay::after, .bgart img { transition: none; } }
@media print { .bgart, .overlay { display: none; } }

/* site-qa 2026-11-03: цели касания >=44px (хлебные крошки, логотип, # у заголовков) */
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.nav-logo { min-height: 44px; }
.svc-doc h2 .svc-a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
/* polish2: стили главной перенесены из main.php (инлайн <style> в конце body парсился после первой отрисовки -> CLS 0.33) */
/* ===== home-*: стили главной (только своё; шапка/кнопки/карточки/цвета берутся из ds.css) ===== */
.hero.home { min-height: 0; padding: clamp(4.5rem, 10vw, 6rem) var(--ds-gutter) var(--ds-s-6); }
.home-wrap { width: 100%; max-width: var(--ds-container); margin: 0 auto; }
.home-title-row { display: flex; align-items: center; justify-content: center; gap: var(--ds-s-4); text-align: left; }
.home-title-text { min-width: 0; }
.home-creeper { flex: 0 0 auto; width: clamp(56px, 14vw, 88px); height: auto; border-radius: var(--ds-r-md); box-shadow: var(--ds-glow); }
.home .hero-title { font-size: var(--ds-fs-display); letter-spacing: 1px; line-height: 1.1; margin: 0 0 var(--ds-s-2); }
.home .hero-subtitle { font-size: var(--ds-fs-lg); font-weight: 400; max-width: 34rem; margin: 0; }
.home .ds-actions { margin-top: var(--ds-s-5); align-items: center; }
.home-ip { margin: var(--ds-s-2) 0 0; text-align: center; color: var(--ds-text-2); }
.home .ds-parent-note { text-align: center; }
.home-stats { margin-top: var(--ds-s-5); }
.home-sec { margin: var(--ds-s-5) 0 0; text-align: left; }
.home-sec > h2 { margin: 0 0 var(--ds-s-3); color: var(--ds-accent); font-size: var(--ds-fs-h2); text-align: center; }
.home-sec .ds-lead { margin-bottom: var(--ds-s-3); }
.home-h3 { margin: var(--ds-s-4) 0 var(--ds-s-2); text-align: center; color: var(--ds-text); }
.home-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.home-links .ds-btn { flex-wrap: wrap; }
.home .ds-safe a, .home .ds-parent-note a { color: var(--ds-cyan-300); text-decoration: underline; }
.home .ds-avp { margin: var(--ds-s-3) 0; text-align: left; }
.home .ds-grid .ds-card h3 { font-size: var(--ds-fs-lg); }
/* график: панель + скелетон, пока данные грузятся */
.home-graph-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-s-3); margin-bottom: var(--ds-s-3); }
.home-graph-head h2 { margin: 0; text-align: left; }
.home-graph-head .graph-tabs { display: flex; flex-wrap: wrap; gap: var(--ds-s-2); }
.home .graph-tab { min-height: var(--ds-tap); padding: var(--ds-s-2) var(--ds-s-4); border-radius: var(--ds-r-md); border: 1px solid var(--ds-border-strong); background: var(--ds-surface-2); color: var(--ds-text-2); font: 700 var(--ds-fs-sm)/1.2 var(--ds-font); cursor: pointer; }
.home .graph-tab:hover { background: var(--ds-surface-3); color: var(--ds-text); }
.home .graph-tab.active { background: var(--ds-accent-2); border-color: var(--ds-accent-2); color: var(--ds-on-accent); }
.home-chart { position: relative; min-height: 200px; }
.home-chart .graph-canvas { display: block; width: 100%; height: 200px; max-height: 200px; }
.home-chart__skel { position: absolute; inset: 0; min-height: 200px; border-radius: var(--ds-r-md); }
.home-chart.is-ready .home-chart__skel { display: none; }
#no-data-msg { color: var(--ds-muted); padding: var(--ds-s-4) 0; text-align: center; }
.home .graph-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-s-2) var(--ds-s-4); margin-top: var(--ds-s-3); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.home .graph-footer strong { color: var(--ds-accent); }
/* онлайн по режимам (live_modes.php) */
.home .awp-modes { margin: var(--ds-s-4) 0 0; }
@media (max-width: 600px) {
  .home-title-row { flex-direction: column; text-align: center; gap: var(--ds-s-2); }
  .home .hero-subtitle { margin: 0 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-in { animation: home-up .6s var(--ds-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
  @keyframes home-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .home .hero-title { animation-name: home-pop; animation-timing-function: var(--ds-bounce); }
  @keyframes home-pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
  .home .ds-stat:nth-child(2) .ds-stat__value { animation: ds-bob 3.4s ease-in-out infinite .4s; }
  .home .ds-stat:nth-child(1) .ds-stat__value { animation: ds-bob 3s ease-in-out infinite; }
  .home .ds-stat:nth-child(3) .ds-stat__value { animation: ds-bob 3.8s ease-in-out infinite .8s; }
}

/* polish2: цели касания >=44 px на телефоне (ссылки в плашках — padding у inline-ссылки не меняет высоту строки) */
.ds-alert a, .tab-content .note a { padding-block: 13px; }
.hero-title-link { display: inline-block; min-height: 44px; }
#calc-r { height: 44px; }
.awf-links a, .awf-legal a { min-width: 44px; justify-content: center; }
@media (pointer: coarse) { :is(p, li, dd) > a:not([class]) { padding-block: 13px; } }
/* polish2: контраст по пиксельному скану (мобильный растр светлее) */
html:not([data-theme="light"]) .ds-badge--warn { color: #ffd98a; }
html:not([data-theme="light"]) .home .ds-safe a, html:not([data-theme="light"]) .home .ds-parent-note a, html:not([data-theme="light"]) .ds-parent-note a { color: #b8f0ff; }
html[data-theme="light"] .home .ds-safe a, html[data-theme="light"] .home .ds-parent-note a, html[data-theme="light"] .ds-parent-note a { color: #064a7c; }