/* akso-ds.css — единая дизайн-система AKSO (akso.online, shop, ERP, Utility). v1 · 2026-11-04
   Один файл с одинаковым содержимым лежит в каждом сайте. Меняете здесь — копируйте во все четыре репозитория
   (страница-образец: https://akso.online/design.html).

   1. Токены --ak-*: цвета, радиусы, тени, шрифты, отступы, движение.
   2. База: выделение, фокус с клавиатуры, полосы прокрутки, «меньше движения».
   3. Компоненты .ak-*: кнопки, поля, карточка, чип, переключатель, подсказка, пустое состояние, скелетон.
   Стили страниц сайтов ссылаются на токены (например --bg: var(--ak-bg)), поэтому палитра везде одна. */

:root {
    /* поверхности — от фона к самым светлым слоям */
    --ak-bg: #0f0a1a;
    --ak-s1: #171026;
    --ak-s2: #1f1633;
    --ak-s3: #2a1e42;
    --ak-line: #2b1f42;
    --ak-line-2: #3d2c5c;
    /* текст */
    --ak-text: #efe9f7;
    --ak-muted: #a596bd;
    --ak-dim: #7a6b93;
    /* бренд */
    --ak-violet: #b84fd6;
    --ak-violet-deep: #7c3aed;
    --ak-violet-soft: rgba(184, 79, 214, .16);
    --ak-grad: linear-gradient(135deg, var(--ak-violet), var(--ak-violet-deep));
    /* состояния */
    --ak-ok: #4ade80;
    --ak-warn: #fbbf24;
    --ak-danger: #f87171;
    --ak-info: #60a5fa;
    --ak-instant: #5eead4;
    --ak-ok-soft: rgba(74, 222, 128, .12);
    --ak-warn-soft: rgba(251, 191, 36, .12);
    --ak-danger-soft: rgba(248, 113, 113, .12);
    --ak-info-soft: rgba(96, 165, 250, .12);
    /* площадки и сервисы */
    --ak-playerok: #3b82f6;
    --ak-funpay: #f97316;
    --ak-ggsel: #22c55e;
    --ak-discord: #5865f2;
    /* форма */
    --ak-r-xl: 22px;
    --ak-r-lg: 18px;
    --ak-r-md: 14px;
    --ak-r-sm: 10px;
    --ak-r-xs: 8px;
    --ak-r-pill: 999px;
    --ak-shadow-1: 0 2px 10px rgba(0, 0, 0, .25);
    --ak-shadow-2: 0 12px 40px rgba(0, 0, 0, .45);
    --ak-glow: 0 0 0 1px rgba(184, 79, 214, .35), 0 8px 30px rgba(124, 58, 237, .25);
    /* шрифты */
    --ak-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
    --ak-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ak-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ak-fs-xs: 12px; --ak-fs-sm: 13px; --ak-fs-md: 15px; --ak-fs-lg: 18px; --ak-fs-xl: 24px;
    /* отступы — шаг 4px */
    --ak-1: 4px; --ak-2: 8px; --ak-3: 12px; --ak-4: 16px; --ak-5: 20px; --ak-6: 24px; --ak-8: 32px;
    /* движение */
    --ak-ease: cubic-bezier(.2, .7, .2, 1);
    --ak-fast: .15s;
    --ak-mid: .25s;
    /* фокус */
    --ak-focus: 0 0 0 2px var(--ak-bg), 0 0 0 4px var(--ak-violet);
    color-scheme: dark;
}

/* ---------- база ---------- */
::selection { background: rgba(184, 79, 214, .45); color: #fff; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--ak-focus); border-radius: var(--ak-r-xs); }
* { scrollbar-color: var(--ak-line-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ak-line-2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- компоненты ---------- */
.ak-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ak-2); height: 40px; padding: 0 var(--ak-4);
    border-radius: var(--ak-r-sm); border: 1px solid transparent; font: 700 var(--ak-fs-md)/1 var(--ak-body); color: #fff; cursor: pointer;
    text-decoration: none; background: var(--ak-s2); transition: transform var(--ak-fast) var(--ak-ease), background var(--ak-fast), border-color var(--ak-fast); }
.ak-btn:hover { background: var(--ak-s3); }
.ak-btn:active { transform: translateY(1px); }
.ak-btn[disabled], .ak-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.ak-btn--primary { background: var(--ak-grad); box-shadow: 0 6px 20px rgba(124, 58, 237, .3); }
.ak-btn--primary:hover { background: var(--ak-grad); filter: brightness(1.08); }
.ak-btn--ghost { background: transparent; border-color: var(--ak-line-2); }
.ak-btn--ghost:hover { background: rgba(255, 255, 255, .04); }
.ak-btn--danger { background: var(--ak-danger-soft); border-color: rgba(248, 113, 113, .35); color: #fecaca; }
.ak-btn--sm { height: 32px; padding: 0 var(--ak-3); font-size: var(--ak-fs-sm); border-radius: var(--ak-r-xs); }
.ak-btn--block { width: 100%; }

.ak-input { width: 100%; padding: 10px 12px; border-radius: var(--ak-r-sm); border: 1px solid var(--ak-line-2); background: rgba(0, 0, 0, .25);
    color: var(--ak-text); font: 400 var(--ak-fs-md)/1.4 var(--ak-body); transition: border-color var(--ak-fast); }
.ak-input:hover { border-color: #4b3870; }
.ak-input:focus { outline: none; border-color: var(--ak-violet); box-shadow: 0 0 0 3px var(--ak-violet-soft); }
.ak-input::placeholder { color: var(--ak-dim); }
.ak-field { display: flex; flex-direction: column; gap: 6px; }
.ak-field > span { font-size: var(--ak-fs-xs); font-weight: 700; color: var(--ak-muted); }
.ak-field > small { font-size: var(--ak-fs-xs); color: var(--ak-dim); }

.ak-card { background: var(--ak-s1); border: 1px solid var(--ak-line); border-radius: var(--ak-r-lg); padding: var(--ak-5); }
.ak-card--glow { box-shadow: var(--ak-glow); }

.ak-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--ak-r-pill);
    font: 800 11px/1 var(--ak-body); background: rgba(255, 255, 255, .07); color: var(--ak-muted); white-space: nowrap; }
.ak-chip--ok { background: var(--ak-ok-soft); color: var(--ak-ok); }
.ak-chip--warn { background: var(--ak-warn-soft); color: var(--ak-warn); }
.ak-chip--danger { background: var(--ak-danger-soft); color: var(--ak-danger); }
.ak-chip--info { background: var(--ak-info-soft); color: var(--ak-info); }
.ak-chip--brand { background: var(--ak-violet-soft); color: #e3b3f3; }

.ak-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.ak-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ak-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--ak-s3); transition: background var(--ak-fast); pointer-events: none; }
.ak-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--ak-mid) var(--ak-ease); }
.ak-switch input:checked + span { background: var(--ak-violet); }
.ak-switch input:checked + span::after { transform: translateX(18px); }
.ak-switch input:focus-visible + span { box-shadow: var(--ak-focus); }

.ak-hint { color: var(--ak-muted); font-size: var(--ak-fs-sm); line-height: 1.5; }
.ak-banner { display: flex; gap: var(--ak-3); align-items: center; padding: var(--ak-3) var(--ak-4); border-radius: var(--ak-r-md);
    background: var(--ak-warn-soft); border: 1px solid rgba(251, 191, 36, .3); }
.ak-banner--info { background: var(--ak-violet-soft); border-color: rgba(184, 79, 214, .35); }
.ak-empty { text-align: center; padding: var(--ak-8) var(--ak-4); color: var(--ak-muted); }
.ak-empty h3 { color: var(--ak-text); font: 700 var(--ak-fs-lg) var(--ak-display); margin: 0 0 var(--ak-2); }
.ak-skeleton { border-radius: var(--ak-r-md); background: linear-gradient(90deg, var(--ak-s1) 25%, var(--ak-s2) 50%, var(--ak-s1) 75%); background-size: 200% 100%; animation: ak-shimmer 1.4s infinite; }
@keyframes ak-shimmer { to { background-position: -200% 0; } }
.ak-num { font-variant-numeric: tabular-nums; }
.ak-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }