/* ============================================================================
   megaapi.ru — Deep Space Navy theme
   Премиальный SaaS-стиль: глубокий тёмный фон, glassmorphism, неоновые
   синие акценты, мягкие свечения. Адаптивно (включая Telegram Mini App).
   ============================================================================ */

/* ----- Дисплейный шрифт (self-hosted, premium-гротеск для заголовков) -----
   Onest Variable, latin + cyrillic. Подгружается посабсетно через unicode-range:
   на RU-страницах тянется только cyrillic+latin (~46KB). */
@font-face {
    font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('/static/fonts/onest-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('/static/fonts/onest-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('/static/fonts/onest-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('/static/fonts/onest-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg-0:        #03060d;
    --bg-1:        #050810;
    --bg-2:        #0a1428;
    --panel:       rgba(255, 255, 255, 0.04);
    --panel-border:rgba(120, 180, 255, 0.18);
    --panel-hover: rgba(120, 180, 255, 0.32);
    --text:        #e6f0ff;
    --text-muted:  rgba(230, 240, 255, 0.62);
    --text-faint:  rgba(230, 240, 255, 0.42);
    --neon:        #6aa5ff;
    --neon-2:      #3a6cff;
    --neon-glow:   rgba(64, 128, 255, 0.35);
    --neon-soft:   rgba(106, 165, 255, 0.12);
    --green:       #4ade80;
    --accent:      var(--neon);

    /* Шрифты */
    --font:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --display: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* Радиусы */
    --radius-lg:   24px;
    --radius-md:   16px;
    --radius-sm:   10px;
    --radius-xs:   6px;
    --radius-pill: 999px;

    /* Модульная шкала отступов (база 4px) */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px;

    /* Глубина — мягкие тени глубокого синего (без жёсткого чёрного) */
    --shadow-sm:   0 1px 2px rgba(2,6,20,.35), 0 1px 3px rgba(2,6,20,.22);
    --shadow-md:   0 6px 22px rgba(2,6,20,.40);
    --shadow-lg:   0 16px 48px rgba(2,6,20,.50);
    --shadow-xl:   0 32px 90px rgba(2,6,20,.60);
    --shadow-glow: 0 12px 40px rgba(58,108,255,.28);

    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-1);
    color: var(--text);
    font-family: var(--font);
    font-feature-settings: 'cv11', 'ss03';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.55;
}

a { color: var(--neon); text-decoration: none; transition: opacity .2s, color .2s; }
a:hover { opacity: .85; }

/* ----- Типографика: дисплейный шрифт + строгая иерархия заголовков -------- */
h1, h2, h3,
.hero__wordmark, .brand__name, .section__head h2,
.docs-content h1, .docs-content h2, .docs-content h3 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.12;
    text-wrap: balance;
}
h1 { letter-spacing: -0.032em; line-height: 1.05; }
/* Длина строки основного текста — читаемая (≈68 знаков).
   Только для левоflush-абзацев; центрированные блоки задают ширину сами
   с margin:auto, иначе бокс прижимается влево и текст «съезжает». */
.hero p.lead { max-width: 62ch; }

/* ----- Космический фон ---------------------------------------------------- */
body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%,  rgba(58, 108, 255, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(120, 80, 255, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 100% 60% at 50% 100%, rgba(58, 108, 255, 0.12) 0%, transparent 65%),
        var(--bg-1);
    pointer-events: none;
    z-index: -2;
}

/* Тонкая «звёздная» сетка */
body::after {
    content: '';
    position: fixed; inset: 0;
    background-image:
        radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,0.5), transparent 50%),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.35), transparent 50%),
        radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.45), transparent 50%),
        radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.30), transparent 50%),
        radial-gradient(1px 1px at 15% 70%, rgba(255,255,255,0.40), transparent 50%);
    background-size: 600px 600px;
    pointer-events: none;
    opacity: .35;
    z-index: -1;
}

/* ----- Контейнер ---------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ----- Header ------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(18px);
    background: rgba(5, 8, 16, 0.55);
    border-bottom: 1px solid rgba(120,180,255, 0.08);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 12px var(--neon-glow)); }
.brand__name {
    font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
    background: linear-gradient(120deg, #fff 0%, #9ec3ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand__sub { font-size: 11px; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; }

.nav { display: flex; gap: 28px; }
.nav a { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.nav a:hover { color: var(--text); }

.hdr-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.ma-bell__badge[hidden] {
    display: none !important;
}
.btn-header-auth {
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-pill);
    box-sizing: border-box;
    line-height: 1;
}

/* ----- Кнопки ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: 14px; font-weight: 600; line-height: 1.2;
    transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease,
                background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
    cursor: pointer; border: 1px solid transparent; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(106,165,255,0.45); }
.btn:active { transform: translateY(0) scale(.975); }
.btn-primary {
    background: linear-gradient(135deg, var(--neon-2) 0%, #7ab4ff 100%);
    color: #0b1126;
    box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.32);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(58,108,255,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    opacity: 1;
}
.btn-primary:active { transform: translateY(0) scale(.975); box-shadow: var(--shadow-glow); }
.btn-ghost {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--panel-border);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--panel-hover); background: rgba(120,180,255,0.08); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0) scale(.975); }
.btn-lg { padding: 16px 28px; font-size: 15px; }

/* ----- Hero --------------------------------------------------------------- */
.hero { padding: clamp(64px, 9vh, 116px) 0 clamp(56px, 8vh, 88px); }
.hero__grid {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 5vw, 64px);
    align-items: center;
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(120,180,255,0.08);
    border: 1px solid var(--panel-border);
    font-size: 12px; color: var(--neon); letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 24px;
}
.hero__eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 10px var(--green);
}
.hero h1 {
    font-size: clamp(36px, 5.4vw, 64px);
    line-height: 1.05; letter-spacing: -0.025em;
    margin: 0 0 24px;
    background: linear-gradient(120deg, #ffffff 0%, #aac5ff 70%, #6a8fff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead {
    font-size: 18px; color: var(--text-muted); margin: 0 0 36px;
    max-width: 540px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* Доверительная строка под CTA — три тихих маркера, премиально-минималистично */
.hero__trust {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    margin-top: 26px;
    font-size: 13px; color: var(--text-muted);
}
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }

/* Code snippet (правая колонка Hero) */
.code-card {
    background: rgba(8, 14, 28, 0.7);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 80px rgba(0,0,0,0.5), 0 0 60px rgba(58,108,255,0.1);
}
.code-card__bar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(120,180,255,0.08);
    font-size: 12px; color: var(--text-faint);
}
.code-card__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.code-card__title { margin-left: auto; font-family: ui-monospace, 'JetBrains Mono', monospace; }
.code-card pre {
    margin: 0; padding: 20px 22px;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, monospace;
    font-size: 13.5px; line-height: 1.65;
    color: #cfd9ff;
    overflow-x: auto;
}
.code-card .tok-kw  { color: #c79cff; }
.code-card .tok-str { color: #a3e8a0; }
.code-card .tok-fn  { color: #7ab4ff; }
.code-card .tok-com { color: rgba(230,240,255,0.35); font-style: italic; }

/* ----- Sections common --------------------------------------------------- */
section { padding: clamp(58px, 8vh, 100px) 0; }
.section__head { text-align: center; margin-bottom: clamp(40px, 5vw, 60px); }
.section__head h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    background: linear-gradient(120deg, #fff 0%, #b2cdff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section__head p { color: var(--text-muted); margin: 0; max-width: 600px; margin: 0 auto; }

/* ----- Features (карточки 3х2) ------------------------------------------ */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.feature {
    padding: 28px;
    border-radius: var(--radius-md);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(18px);
    transition: all .25s ease;
    position: relative; overflow: hidden;
}
.feature::after {
    content: ''; position: absolute; inset: -1px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--neon-glow), transparent 60%);
    opacity: 0; transition: opacity .25s ease;
    pointer-events: none;
}
.feature:hover { transform: translateY(-3px); border-color: var(--panel-hover); }
.feature:hover::after { opacity: 1; }
.feature__icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(120,180,255,0.18), rgba(58,108,255,0.08));
    margin-bottom: 18px; color: var(--neon);
    border: 1px solid var(--panel-border);
}
.feature h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; }
.feature p { color: var(--text-muted); font-size: 14px; margin: 0; }

/* ----- Models table-like ------------------------------------------------- */
.models {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.model {
    padding: 20px 22px;
    border-radius: var(--radius-md);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(16px);
    display: flex; align-items: center; gap: 16px;
    transition: border-color .2s;
}
.model:hover { border-color: var(--panel-hover); }
.model__logo {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--panel-border);
    padding: 4px;
    box-sizing: border-box;
}
.model__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root.light .model__logo { background: rgba(0,0,0,0.04); }
.model__name { font-weight: 600; font-size: 15px; }
.model__provider { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.model__price { margin-left: auto; text-align: right; font-family: ui-monospace, monospace; font-size: 13px; }
.model__price span { display: block; color: var(--text-faint); font-size: 11px; }

/* ----- Steps ------------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.step {
    padding: 28px;
    border-radius: var(--radius-md);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    position: relative;
}
.step__num {
    position: absolute; top: -16px; left: 28px;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--neon-2), #7ab4ff);
    color: #0b1126; font-weight: 700; font-size: 14px;
    box-shadow: 0 6px 20px rgba(58,108,255,0.5);
}
.step h3 { margin: 14px 0 8px; font-size: 17px; }
.step p { color: var(--text-muted); font-size: 14px; margin: 0; }

/* ----- CTA bottom -------------------------------------------------------- */
.cta-block {
    padding: 56px 40px;
    text-align: center;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(58,108,255,0.18), transparent 70%),
        rgba(8, 14, 28, 0.6);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(20px);
}
.cta-block h2 {
    font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 14px;
    letter-spacing: -0.02em;
}
/* Центрированные абзацы CTA: бокс центрируем (margin:auto), ширину ограничиваем */
.cta-block p,
.cta-block__lead {
    color: var(--text);
    margin: 0 auto 24px;
    max-width: 46ch;
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
}
/* Перки — аккуратные стеклянные пилюли с SVG-иконками (центрированы) */
.cta-block__perks {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; margin: 0 auto 30px; max-width: 620px;
}
.cta-perk {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: var(--radius-pill);
    background: var(--neon-soft);
    border: 1px solid var(--panel-border);
    font-size: 13.5px; font-weight: 500; color: var(--text);
}
.cta-perk svg { width: 16px; height: 16px; color: var(--neon); flex-shrink: 0; }
:root.light .cta-perk { background: rgba(26,92,200,0.06); }

/* ----- Footer ------------------------------------------------------------ */
.footer {
    padding: 40px 0;
    border-top: 1px solid rgba(120,180,255,0.08);
    color: var(--text-faint);
    font-size: 13px;
}
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer__links { display: flex; gap: 22px; }
.footer__links a { color: var(--text-muted); }

/* ----- Адаптив ----------------------------------------------------------- */
@media (max-width: 920px) {
    .hero { padding: 50px 0 40px; }
    .hero__grid { grid-template-columns: 1fr; gap: 36px; }
    .feature-grid { grid-template-columns: 1fr; }
    .models { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .nav { display: none; }
    section { padding: 50px 0; }
}

@media (max-width: 480px) {
    .container { padding: 0 18px; }
    .hero h1 { font-size: 36px; }
    .hero p.lead { font-size: 16px; }
    .btn { padding: 11px 18px; font-size: 13px; }
    .code-card pre { font-size: 12px; padding: 16px 18px; }
}

/* ----- Mini App (страница /app) ----------------------------------------- */
.app-wrap {
    max-width: 520px;
    margin: 0 auto;
    padding: 32px 20px 80px;
}
.app-card {
    padding: 26px;
    border-radius: var(--radius-md);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(18px);
    margin-bottom: 16px;
}
.app-balance__label { font-size: 12px; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; }
.app-balance__value { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.app-balance__value span { font-size: 18px; color: var(--text-muted); font-weight: 500; }

.key-row {
    display: flex; gap: 8px; align-items: center;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(120,180,255,0.1);
    border-radius: 10px; padding: 10px 12px;
    font-family: ui-monospace, monospace; font-size: 12.5px;
    margin-top: 10px;
    overflow-x: auto;
}
.key-row code { color: var(--neon); white-space: nowrap; }
.copy-btn {
    margin-left: auto; padding: 6px 10px; font-size: 12px;
    background: rgba(120,180,255,0.12);
    border: 1px solid var(--panel-border); border-radius: 8px;
    color: var(--text); cursor: pointer;
}
.copy-btn:hover { background: rgba(120,180,255,0.2); }

/* ── Mini App: статистика (сетка 2x2) ── */
.app-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.app-stats-grid--2col {
    margin-bottom: 0;
}
.app-stat-card {
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    backdrop-filter: blur(18px);
}
.app-stat-card__label {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.app-stat-card__value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
}
.app-stat-card__value--sm {
    font-size: 15px;
    font-weight: 600;
    word-break: break-all;
}
.app-stat-card__hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.app-stat-card__hint code {
    font-size: 11px;
    color: var(--neon);
}

/* ── Mini App: реферальные stat-блоки ── */
.app-ref-stat {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(120,180,255,0.10);
    border-radius: 12px;
    padding: 12px 14px;
}

/* ── Mini App: журнал запросов (карточки) ── */
.app-usage-item {
    padding: 10px 0;
    border-top: 1px solid rgba(120,180,255,0.06);
}
.app-usage-item:first-child { border-top: 0; }
.app-usage-item__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.app-usage-item__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-faint);
}

/* ── Mini App: история пополнений (карточки) ── */
.app-tx-item {
    padding: 10px 0;
    border-top: 1px solid rgba(120,180,255,0.06);
}
.app-tx-item:first-child { border-top: 0; }
.app-tx-item__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
}
.app-tx-item__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-faint);
}

/* ── Mini App: пресеты пополнения ── */
.app-topup-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Mini App: модалка (bottom sheet) ── */
.app-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.app-modal[hidden] { display: none; }
.app-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 10, 0.78);
    backdrop-filter: blur(10px);
}
.app-modal__sheet {
    position: relative;
    background: linear-gradient(180deg, #0a1428 0%, #050810 100%);
    border: 1px solid var(--panel-border);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    padding: 20px 22px 32px;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    animation: app-sheet-up 0.25s ease-out;
}
@keyframes app-sheet-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.app-modal__handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
    margin: 0 auto 16px;
}

/* ============================================================================
   ДОКУМЕНТАЦИЯ (/docs)
   ============================================================================ */

.docs-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 36px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 28px 80px;
    align-items: start;
}

.docs-sidebar {
    position: sticky;
    top: 84px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 6px;
    font-size: 14px;
}
.docs-sidebar::-webkit-scrollbar { width: 6px; }
.docs-sidebar::-webkit-scrollbar-thumb {
    background: rgba(120,180,255,0.18); border-radius: 6px;
}
.docs-sidebar h4 {
    margin: 22px 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    font-weight: 600;
}
.docs-sidebar h4:first-child { margin-top: 0; }
.docs-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.docs-sidebar nav a {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13.5px;
    transition: background .15s, color .15s;
    line-height: 1.35;
}
.docs-sidebar nav a:hover {
    background: rgba(120,180,255,0.05);
    color: var(--text);
}
.docs-sidebar nav a.active {
    background: rgba(106,165,255,0.12);
    color: var(--neon);
    font-weight: 500;
}

.docs-content {
    min-width: 0;
    max-width: 880px;
    line-height: 1.65;
    font-size: 15.5px;
}
.docs-content h1 {
    font-size: 34px;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.docs-content h2 {
    font-size: 24px;
    margin-top: 44px;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
    padding-top: 12px;
    border-top: 1px solid rgba(120,180,255,0.07);
}
.docs-content h2:first-of-type {
    border-top: 0;
    margin-top: 28px;
    padding-top: 0;
}
.docs-content h3 {
    font-size: 18px;
    margin: 28px 0 10px;
}
.docs-content p {
    margin: 12px 0;
    color: var(--text);
}
.docs-content p.muted, .docs-content .muted {
    color: var(--text-muted);
    font-size: 14px;
}
.docs-content ul,
.docs-content ol {
    padding-left: 24px;
    margin: 12px 0;
}
.docs-content li { margin: 6px 0; }
.docs-content code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    background: rgba(120,180,255,0.10);
    padding: 2px 7px;
    border-radius: 6px;
    color: var(--neon);
    white-space: nowrap;
}
.docs-content pre {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(120,180,255,0.10);
    border-radius: 12px;
    padding: 16px 20px;
    overflow-x: auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.6;
    margin: 16px 0;
}
.docs-content pre code {
    background: transparent;
    padding: 0;
    color: var(--text);
    white-space: pre;
}
.docs-content a {
    color: var(--neon);
    border-bottom: 1px dashed rgba(106,165,255,0.4);
}
.docs-content a:hover {
    border-bottom-style: solid;
    opacity: 1;
}
.docs-content blockquote {
    border-left: 3px solid var(--neon-2);
    background: rgba(58,108,255,0.06);
    margin: 16px 0;
    padding: 12px 18px;
    border-radius: 0 10px 10px 0;
    color: var(--text-muted);
}

/* ── Таблицы документации ── */
.doc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 18px 0;
    font-size: 13.5px;
}
.doc-table th,
.doc-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(120,180,255,0.07);
    vertical-align: top;
}
.doc-table th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    font-weight: 600;
    background: rgba(255,255,255,0.02);
}
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table tr:hover td { background: rgba(120,180,255,0.025); }
.doc-table .price-cell {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    text-align: right;
}
.doc-table code {
    white-space: nowrap;
    background: rgba(120,180,255,0.10);
}

/* ── Badges / callout ── */
.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(120,180,255,0.12);
    border: 1px solid rgba(120,180,255,0.22);
    color: var(--text);
    line-height: 1.6;
}
.badge-new   { background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.35); color: #95efb0; }
.badge-warn  { background: rgba(255,180,80,0.15); border-color: rgba(255,180,80,0.35); color: #ffd591; }
.badge-pro   { background: rgba(255,107,196,0.15); border-color: rgba(255,107,196,0.35); color: #ff96d4; }

.callout {
    margin: 18px 0;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(106,165,255,0.06);
    border: 1px solid rgba(106,165,255,0.18);
    border-left: 4px solid var(--neon);
}
.callout--tip   { background: rgba(74,222,128,0.05); border-color: rgba(74,222,128,0.22); border-left-color: var(--green); }
.callout--warn  { background: rgba(255,180,80,0.05); border-color: rgba(255,180,80,0.25); border-left-color: #ffb450; }
.callout strong { font-weight: 600; }

/* ── Сетка карточек документации ── */
.doc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.doc-card {
    display: block;
    padding: 20px 22px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    margin: 0;
    transition: border-color .2s, background .2s;
    color: var(--text);
}
.doc-card:hover {
    border-color: var(--panel-hover);
    background: rgba(255,255,255,0.06);
    opacity: 1;
}
.doc-card h3 {
    margin: 10px 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.doc-card p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.5;
}
.doc-card__tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--neon);
    background: rgba(106,165,255,0.12);
    border: 1px solid rgba(106,165,255,0.22);
    padding: 2px 9px;
    border-radius: 999px;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .docs-shell { grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 18px 60px; }
    .docs-sidebar { font-size: 13.5px; }
}
@media (max-width: 760px) {
    .docs-shell {
        grid-template-columns: 1fr;
        padding: 18px 14px 50px;
    }
    .docs-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 14px 16px;
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--panel-border);
        border-radius: 14px;
        margin-bottom: 24px;
    }
    .docs-content h1 { font-size: 26px; }
    .docs-content h2 { font-size: 20px; }
    .doc-table { font-size: 12.5px; }
    .doc-table th, .doc-table td { padding: 8px 10px; }
}

/* ============================================================================
   ЛИЧНЫЙ КАБИНЕТ (/account)
   ============================================================================ */

.account {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.account__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    padding: 22px 24px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(18px);
    transition: border-color .2s;
}
.stat-card:hover { border-color: var(--panel-hover); }
.stat-card__label {
    font-size: 12px;
    color: var(--text-faint);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.stat-card__value {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
}
.stat-card__hint {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.stat-card__value code {
    font-size: 14px;
    color: var(--neon);
    font-weight: 500;
    letter-spacing: 0;
}

.account__section {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(18px);
    padding: 24px 28px;
    margin-bottom: 24px;
}
.account__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.account__split .account__section { margin-bottom: 0; }

/* ── Referral section layout ── */
.ref-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
.ref-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ref-stat {
    background: rgba(27,92,200,0.07);
    border: 1px solid rgba(120,180,255,0.14);
    border-radius: 12px;
    padding: 16px 18px;
}
.ref-stat__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-faint);
    margin-bottom: 6px;
}
.ref-stat__value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.1;
}
.ref-stat__hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
}
.ref-how {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ref-how__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.ref-how__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(27,92,200,0.15);
    color: var(--neon);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .ref-body { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
    .account__split { grid-template-columns: 1fr; }
}
.account__section h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.account__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.account__section-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.api-key-box {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(120,180,255,0.15);
    border-radius: 10px;
    padding: 14px 18px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    color: var(--neon);
    word-break: break-all;
    overflow-x: auto;
}
.api-key-box--locked {
    opacity: .55;
    filter: grayscale(.4);
}
.activate-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255,176,32,0.08);
    border: 1px solid rgba(255,176,32,0.35);
    color: #ffce7a;
    font-size: 13.5px;
}
/* Без этого авторский display:flex перебивает атрибут [hidden] (UA display:none),
   и баннер показывался бы даже при banner.hidden = true (есть баланс). */
.activate-banner[hidden] { display: none !important; }
.activate-banner .btn { flex-shrink: 0; }
:root.light .activate-banner { background: rgba(200,120,0,0.08); color: #9a5b00; border-color: rgba(200,120,0,0.3); }

.account__table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(120,180,255,0.08);
}
.account__table { margin: 0; }
.account__table th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
    padding: 12px 14px;
    border-bottom: 1px solid rgba(120,180,255,0.08);
    background: rgba(255,255,255,0.015);
    text-align: left;
}
.account__table td {
    padding: 12px 14px;
    font-size: 13.5px;
    border-bottom: 1px solid rgba(120,180,255,0.05);
    vertical-align: middle;
}
.account__table tr:last-child td { border-bottom: 0; }
.account__table code {
    font-size: 12px;
    background: rgba(120,180,255,0.08);
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--neon);
}
.account__table .price-cell {
    text-align: right;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.account__pager {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ── шапка ЛК с фото юзера ── */
.account-user {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    border-radius: 30px;
    padding: 4px 14px 4px 4px;
    font-size: 13.5px;
}
.account-user img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-2);
}
.account-user .btn { padding: 6px 12px; font-size: 12px; }

/* ============================================================================
   ФОРМЫ И КНОПКИ (расширение)
   ============================================================================ */

.btn-sm   { padding: 7px 14px; font-size: 12.5px; }
.btn-block{ width: 100%; justify-content: center; margin-top: 14px; }

.form-label {
    display: block;
    font-size: 12px;
    color: var(--text-faint);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 16px 0 6px;
}
.form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.form-input {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(120,180,255,0.18);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    flex: 1 1 140px;
    min-width: 0;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
    outline: none;
    border-color: var(--neon);
    box-shadow: 0 0 0 3px rgba(106,165,255,0.15);
}
.form-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.preset-btn {
    background: rgba(120,180,255,0.08);
    border: 1px solid rgba(120,180,255,0.18);
    color: var(--text);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.preset-btn:hover {
    background: rgba(120,180,255,0.16);
    border-color: var(--neon);
}

.topup-summary {
    margin: 18px 0;
    padding: 12px 16px;
    background: rgba(120,180,255,0.06);
    border: 1px solid rgba(120,180,255,0.12);
    border-radius: 10px;
    font-size: 14px;
}
.topup-summary > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}
.topup-summary > div:not(:last-child) {
    border-bottom: 1px dashed rgba(120,180,255,0.1);
}
.topup-summary strong { color: var(--neon); font-weight: 600; }

.topup-tiers {
    margin: 8px 0 2px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 10px 14px;
    background: var(--panel);
}
.topup-tiers summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    outline: none;
    user-select: none;
}
.topup-tiers summary span {
    font-weight: 400;
    color: var(--text-muted);
}
.topup-tiers__grid {
    margin-top: 10px;
    font-size: 13px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 14px;
}
.topup-tiers__grid span {
    color: var(--text-muted);
}
.topup-tiers__grid b {
    text-align: right;
    color: var(--green);
}
.topup-tiers__info {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 10px 0 0;
    line-height: 1.4;
}

/* ============================================================================
   МОДАЛКИ
   ============================================================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 10, 0.78);
    backdrop-filter: blur(10px);
    cursor: pointer;
}
.modal__dialog {
    position: relative;
    background: linear-gradient(180deg, #0a1428 0%, #050810 100%);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    padding: 32px 28px 28px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 60px rgba(58,108,255,0.08);
    max-height: 92vh;
    overflow-y: auto;
}
.modal__dialog--narrow { max-width: 380px; }
.modal__close {
    position: absolute;
    top: 12px; right: 16px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: color .15s;
}
.modal__close:hover { color: var(--text); }
.modal__dialog h2 { margin: 0 0 8px; font-size: 22px; }

/* ============================================================================
   HEADER auth-блок
   ============================================================================ */

.header-auth {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================================
   Adaptive
   ============================================================================ */

@media (max-width: 768px) {
    .account { padding: 16px 14px 40px; }
    .account__section { padding: 18px 18px; }
    .account__section-head { flex-direction: column; align-items: flex-start; }
    .stat-card { padding: 18px 18px; }
    .stat-card__value { font-size: 24px; }
    .nav { display: none; }
    .modal__dialog { padding: 26px 20px; border-radius: 18px; }
    .account-user span:first-of-type { display: none; }
}

/* ============================================================================
   СВЕТЛАЯ ТЕМА  (light / day mode)
   Включается классом .light на <html>. Все компоненты используют CSS-
   переменные, поэтому большинство правок — просто переопределение :root.light.
   ============================================================================ */

:root.light {
    --bg-0:          #ecf1ff;
    --bg-1:          #f5f8ff;
    --bg-2:          #dde8ff;
    --panel:         rgba(255, 255, 255, 0.92);
    --panel-border:  rgba(26, 92, 200, 0.14);
    --panel-hover:   rgba(26, 92, 200, 0.28);
    --text:          #0a1833;
    --text-muted:    rgba(10, 24, 51, 0.62);
    --text-faint:    rgba(10, 24, 51, 0.40);
    --neon:          #1a5cc8;
    --neon-2:        #1451b3;
    --neon-glow:     rgba(26, 92, 200, 0.18);
    --green:         #159a4b;
    color-scheme: light;
}

/* Фон страницы */
:root.light body { background: var(--bg-1); }

:root.light body::before {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%,  rgba(26,92,200,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(100,140,255,0.04) 0%, transparent 65%),
        radial-gradient(ellipse 100% 60% at 50% 100%, rgba(26,92,200,0.05) 0%, transparent 65%),
        var(--bg-1);
}

/* Звёздная сетка — убираем в светлой теме */
:root.light body::after { opacity: 0; }

/* Шапка */
:root.light .site-header {
    background: rgba(245, 248, 255, 0.94);
    border-bottom-color: rgba(26, 92, 200, 0.10);
}

/* Логотип-текст */
:root.light .brand__name {
    background: linear-gradient(120deg, #0a1833 0%, #1a5cc8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root.light .brand__sub { color: rgba(10, 24, 51, 0.46); }

/* Навигация */
:root.light .nav a       { color: rgba(10, 24, 51, 0.60); }
:root.light .nav a:hover { color: var(--text); }

/* Ghost-кнопка */
:root.light .btn-ghost {
    background: rgba(26, 92, 200, 0.06);
    border-color: rgba(26, 92, 200, 0.18);
    color: var(--text);
}
:root.light .btn-ghost:hover {
    background: rgba(26, 92, 200, 0.11);
    border-color: rgba(26, 92, 200, 0.30);
}

/* Hero — градиент заголовка */
:root.light .hero h1 {
    background: linear-gradient(120deg, #0a1833 0%, #1a5cc8 65%, #2979d4 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root.light .hero__eyebrow {
    background: rgba(26, 92, 200, 0.08);
    border-color: rgba(26, 92, 200, 0.18);
}

/* Заголовки секций */
:root.light .section__head h2 {
    background: linear-gradient(120deg, #0a1833 0%, #1a5cc8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Карточка кода в Hero */
:root.light .code-card {
    background: rgba(220, 232, 255, 0.85);
    border-color: rgba(26, 92, 200, 0.16);
    box-shadow: 0 20px 60px rgba(26,92,200,0.08), 0 0 30px rgba(26,92,200,0.04);
}
:root.light .code-card__bar {
    background: rgba(26, 92, 200, 0.05);
    border-bottom-color: rgba(26, 92, 200, 0.10);
}
:root.light .code-card pre         { color: #1a2450; }
:root.light .code-card .tok-kw     { color: #6e28d0; }
:root.light .code-card .tok-str    { color: #1a7a1e; }
:root.light .code-card .tok-fn     { color: #1a5cc8; }
:root.light .code-card .tok-com    { color: rgba(10, 24, 51, 0.38); font-style: italic; }
:root.light .code-card__dot        { background: rgba(26,92,200,0.18); }

/* CTA-блок */
:root.light .cta-block {
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(26,92,200,0.08), transparent 70%),
        rgba(220, 233, 255, 0.65);
}

/* Футер */
:root.light .footer { border-top-color: rgba(26, 92, 200, 0.10); }

/* Mini App */
:root.light .key-row {
    background: rgba(26, 92, 200, 0.06);
    border-color: rgba(26, 92, 200, 0.14);
}
:root.light .copy-btn {
    background: rgba(26, 92, 200, 0.08);
    border-color: rgba(26, 92, 200, 0.18);
    color: var(--text);
}
:root.light .copy-btn:hover { background: rgba(26,92,200,0.14); }
/* Поля ввода в светлой теме — иначе тёмный бокс rgba(0,0,0,.4) на светлом фоне
   (топап, промокод, заявка в партнёрку, вывод — все модалки Mini App и ЛК). */
:root.light .form-input {
    background: #ffffff;
    border-color: rgba(26, 92, 200, 0.20);
    color: var(--text);
}
:root.light .form-input:focus {
    border-color: var(--neon);
    box-shadow: 0 0 0 3px rgba(26, 92, 200, 0.14);
}
:root.light .form-input::placeholder { color: rgba(10, 24, 51, 0.42); }
:root.light .preset-btn { background: rgba(26, 92, 200, 0.06); border-color: rgba(26, 92, 200, 0.16); }
:root.light .preset-btn:hover { background: rgba(26, 92, 200, 0.12); border-color: var(--neon); }
:root.light .topup-summary { background: rgba(26, 92, 200, 0.05); border-color: rgba(26, 92, 200, 0.12); }
:root.light .app-ref-stat {
    background: rgba(26, 92, 200, 0.05);
    border-color: rgba(26, 92, 200, 0.12);
}
:root.light .ref-stat {
    background: rgba(26, 92, 200, 0.05);
    border-color: rgba(26, 92, 200, 0.14);
}
:root.light .ref-how__num {
    background: rgba(26, 92, 200, 0.12);
}
:root.light .app-modal__backdrop { background: rgba(10, 24, 51, 0.48); }
:root.light .app-modal__sheet {
    background: linear-gradient(180deg, #e6eeff 0%, #f5f8ff 100%);
}
:root.light .app-modal__handle { background: rgba(10, 24, 51, 0.15); }

/* Документация */
:root.light .docs-content h2 { border-top-color: rgba(26, 92, 200, 0.10); }
:root.light .docs-content code {
    background: rgba(26, 92, 200, 0.08);
    color: var(--neon);
}
:root.light .docs-content pre {
    background: rgba(26, 92, 200, 0.06);
    border-color: rgba(26, 92, 200, 0.14);
}
:root.light .docs-content blockquote {
    background: rgba(26, 92, 200, 0.05);
    border-left-color: var(--neon-2);
}
:root.light .docs-sidebar nav a:hover     { background: rgba(26, 92, 200, 0.06); }
:root.light .docs-sidebar nav a.active    { background: rgba(26, 92, 200, 0.10); color: var(--neon); }
:root.light .docs-sidebar::-webkit-scrollbar-thumb { background: rgba(26,92,200,0.20); }
:root.light .docs-sidebar { background: transparent; }
:root.light .doc-card:hover { background: rgba(26,92,200,0.04); }
:root.light .doc-table th   { background: rgba(26,92,200,0.03); }
:root.light .doc-table tr:hover td { background: rgba(26,92,200,0.03); }
:root.light .doc-table td, :root.light .doc-table th { border-bottom-color: rgba(26,92,200,0.08); }

/* Бейджи в светлой теме */
:root.light .badge      { background: rgba(26,92,200,0.10); border-color: rgba(26,92,200,0.22); color: #1a5cc8; }
:root.light .badge-new  { color: #197a1c; }
:root.light .badge-warn { color: #a85f00; }
:root.light .badge-pro  { color: #8b1a7a; }

/* Callout в светлой теме */
:root.light .callout      { background: rgba(26,92,200,0.05); border-color: rgba(26,92,200,0.20); }
:root.light .callout--tip { background: rgba(74,222,128,0.06); }
:root.light .callout--warn{ background: rgba(255,180,80,0.06); }

/* Личный кабинет — модалка */
:root.light .modal__dialog {
    background: #f5f8ff;
    border-color: rgba(26,92,200,0.18);
}
:root.light .modal__overlay { background: rgba(10,24,51,0.45); }

/* ── Переключатель день/ночь ── */
.theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color .2s, border-color .2s, background .2s;
    flex-shrink: 0;
    padding: 0;
    outline: none;
}
.theme-toggle:hover {
    color: var(--neon);
    border-color: var(--neon);
    background: rgba(106,165,255,0.08);
}
:root.light .theme-toggle:hover { background: rgba(26,92,200,0.08); }

/* В тёмной теме — показываем иконку «солнца»; в светлой — «луны» */
.theme-toggle .t-sun  { display: block; }
.theme-toggle .t-moon { display: none;  }
:root.light .theme-toggle .t-sun  { display: none;  }
:root.light .theme-toggle .t-moon { display: block; }

/* ════════════════════════════════════════════════════
   Браузер моделей — account.html
   ════════════════════════════════════════════════════ */
.models-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 260px;
}
.search-wrapper svg {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    color: var(--text-faint);
    pointer-events: none;
    transition: color .2s;
}
.search-pill {
    width: 100%;
    padding: 8px 14px 8px 36px;
    font-size: 13px;
    background: rgba(120,180,255,0.06);
    border: 1px solid rgba(120,180,255,0.14);
    border-radius: 999px; /* Pill shape */
    color: var(--text);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.search-pill::placeholder { color: var(--text-faint); }
.search-pill:focus {
    border-color: var(--neon);
    background: rgba(120,180,255,0.08);
    box-shadow: 0 0 0 3px rgba(106,165,255,0.15);
}
.search-pill:focus + svg,
.search-wrapper:focus-within svg {
    color: var(--neon);
}
:root.light .search-pill {
    background: rgba(26,92,200,0.04);
    border-color: rgba(26,92,200,0.14);
}
:root.light .search-pill:focus {
    background: rgba(26,92,200,0.06);
    box-shadow: 0 0 0 3px rgba(26,92,200,0.1);
}
:root.light .search-wrapper svg {
    color: rgba(10, 24, 51, 0.42);
}
.models-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.models-filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-faint);
    margin: 2px 0 -4px;
}
.models-list {
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120,180,255,0.18) transparent;
}
.models-empty {
    padding: 32px 0;
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
}
.model-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid rgba(120,180,255,0.07);
    border-radius: 4px;
    transition: background .15s;
}
.model-row:last-child { border-bottom: none; }
.model-row:hover { background: rgba(120,180,255,0.04); }
.model-row__name {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.model-row__badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(120,180,255,0.18);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.model-row__badge--mod {
    border-color: rgba(120,180,255,0.10);
    color: var(--text-faint);
}
@media (max-width: 560px) {
    .model-row__badge--mod { display: none; }
}
.model-row__billing {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(100,160,255,0.10);
    border: 1px solid rgba(100,160,255,0.18);
    color: rgba(130,180,255,0.85);
    white-space: nowrap;
    flex-shrink: 0;
}
.model-row__billing--req {
    background: rgba(160,100,255,0.10);
    border-color: rgba(160,100,255,0.18);
    color: rgba(190,140,255,0.85);
}
.model-row__price {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    text-align: right;
}
.model-row__copy {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 11px;
    background: rgba(120,180,255,0.08);
    border: 1px solid rgba(120,180,255,0.16);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s, border-color .15s;
}
.model-row__copy:hover {
    background: rgba(106,165,255,0.18);
    border-color: var(--neon);
    color: var(--neon);
}
.model-row__copy.copied {
    color: #4ade80;
    border-color: rgba(74,222,128,.4);
}
:root.light .model-row:hover { background: rgba(26,92,200,0.04); }
:root.light .model-row__badge { border-color: rgba(26,92,200,0.18); }
:root.light .model-row__copy { background: rgba(26,92,200,0.06); border-color: rgba(26,92,200,0.18); }

/* ─── Каталог моделей в /docs (фильтруемые таблицы) ─── */
.catalog-toolbar { display:flex; flex-direction:column; gap:10px; margin:18px 0 14px; }
.catalog-search {
    width:100%; max-width:440px; padding:10px 14px; font-size:14px;
    background:rgba(120,180,255,0.06); border:1px solid rgba(120,180,255,0.16);
    border-radius:10px; color:var(--text); outline:none;
}
.catalog-search:focus { border-color:rgba(120,180,255,0.4); }
.catalog-filter-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.6; margin-bottom:-4px; }
.catalog-chips { display:flex; flex-wrap:wrap; gap:6px; }
.catalog-chip {
    font-size:12.5px; padding:5px 11px; border-radius:999px; cursor:pointer;
    background:rgba(120,180,255,0.06); border:1px solid rgba(120,180,255,0.14);
    color:var(--text-muted); transition:all .15s; font-family:inherit;
}
.catalog-chip:hover { border-color:rgba(120,180,255,0.35); }
.catalog-chip.active { background:rgba(106,165,255,0.18); border-color:rgba(106,165,255,0.5); color:#cfe0ff; }
.catalog-table code { font-size:12.5px; }
.billing-pill {
    font-size:11px; padding:2px 8px; border-radius:999px; white-space:nowrap;
    background:rgba(100,160,255,0.10); border:1px solid rgba(100,160,255,0.20); color:rgba(140,185,255,0.9);
}
.billing-pill--req { background:rgba(160,100,255,0.10); border-color:rgba(160,100,255,0.20); color:rgba(195,150,255,0.9); }
:root.light .catalog-chip.active { color:#1a5cc8; }

/* ─── Brand logos (company tiles) ─── */
.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    background: transparent;
    overflow: hidden;
}
/* Логотип — самодостаточная плитка фирменного цвета: заполняем контейнер
   целиком, скругление даёт сам контейнер (overflow:hidden). */
.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.brand-logo--sm {
    width: 15px;
    height: 15px;
    border-radius: 4px;
}
.brand-logo--lg {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.company-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.catalog-chip,
.preset-btn[data-cat],
.preset-btn[data-mod],
.preset-chip[data-gcf],
.preset-chip[data-ccf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.model-row__badge--company {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ─── Model type pills (modality colors) ─── */
.type-pill {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.type-pill--text {
    background: rgba(79,140,255,0.12);
    border-color: rgba(79,140,255,0.28);
    color: #7eb0ff;
}
.type-pill--image {
    background: rgba(181,123,255,0.12);
    border-color: rgba(181,123,255,0.28);
    color: #c9a0ff;
}
.type-pill--video {
    background: rgba(255,111,145,0.12);
    border-color: rgba(255,111,145,0.28);
    color: #ff9bb5;
}
.type-pill--audio {
    background: rgba(45,212,167,0.12);
    border-color: rgba(45,212,167,0.28);
    color: #5eecc4;
}
.type-pill--embedding {
    background: rgba(245,179,1,0.12);
    border-color: rgba(245,179,1,0.28);
    color: #f5c842;
}
.type-pill--moderation {
    background: rgba(255,107,107,0.12);
    border-color: rgba(255,107,107,0.28);
    color: #ff9494;
}
:root.light .type-pill--text { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.25); color: #2563eb; }
:root.light .type-pill--image { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.25); color: #7c3aed; }
:root.light .type-pill--video { background: rgba(219,39,119,0.10); border-color: rgba(219,39,119,0.25); color: #db2777; }
:root.light .type-pill--audio { background: rgba(13,148,136,0.10); border-color: rgba(13,148,136,0.25); color: #0d9488; }
:root.light .type-pill--embedding { background: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.25); color: #d97706; }
:root.light .type-pill--moderation { background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.25); color: #dc2626; }

/* Type filter chip color dots */
.type-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.type-dot--text { background: #4f8cff; }
.type-dot--image { background: #b57bff; }
.type-dot--video { background: #ff6f91; }
.type-dot--audio { background: #2dd4a7; }
.type-dot--embedding { background: #f5b301; }
.type-dot--moderation { background: #ff6b6b; }
:root.light .model-row__copy:hover { background: rgba(26,92,200,0.14); border-color: var(--neon); }

/* ════════════════════════════════════════════════════
   Браузер моделей — app.html (Telegram Mini App)
   ════════════════════════════════════════════════════ */
.app-cats-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    margin-bottom: 12px;
}
.app-cats-scroll::-webkit-scrollbar { display: none; }
.app-cat-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: 12px;
    background: rgba(120,180,255,0.08);
    border: 1px solid rgba(120,180,255,0.14);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.app-cat-btn.active,
.app-cat-btn:hover {
    background: rgba(106,165,255,0.18);
    border-color: var(--neon);
    color: var(--text);
}
.app-models-list {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120,180,255,0.18) transparent;
}
.app-model-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px solid rgba(120,180,255,0.06);
}
.app-model-item:first-child { border-top: none; }
.app-model-item__info {
    flex: 1;
    min-width: 0;
}
.app-model-item__name {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-model-item__price {
    font-size: 10.5px;
    color: var(--text-faint);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.app-model-billing {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(100,160,255,0.10);
    border: 1px solid rgba(100,160,255,0.18);
    color: rgba(130,180,255,0.8);
    white-space: nowrap;
}
.app-model-billing--req {
    background: rgba(160,100,255,0.10);
    border-color: rgba(160,100,255,0.18);
    color: rgba(190,140,255,0.8);
}
.app-model-item__copy {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 10px;
    background: rgba(120,180,255,0.08);
    border: 1px solid rgba(120,180,255,0.14);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}
.app-model-item__copy:hover { color: var(--neon); border-color: var(--neon); }
.app-model-item__copy.copied { color: #4ade80; border-color: rgba(74,222,128,.4); }
:root.light .app-cat-btn { background: rgba(26,92,200,0.05); border-color: rgba(26,92,200,0.14); }
:root.light .app-cat-btn.active, :root.light .app-cat-btn:hover { background: rgba(26,92,200,0.12); }

/* ════════════════════════════════════════════════════
   Лендинг — секция сравнения (comparison)
   ════════════════════════════════════════════════════ */
.comparison-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0 32px;
}
.comparison-card {
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg); padding: 28px;
}
.comparison-card--bad  { border-color: rgba(255,80,80,0.22); }
.comparison-card--good { border-color: rgba(74,222,128,0.28); background: rgba(74,222,128,0.03); }
.comparison-card__title { font-weight: 700; font-size: 17px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.comparison-card__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.comparison-card__ic svg { width: 17px; height: 17px; }
.comparison-card__ic--bad  { background: rgba(255,80,80,0.12);  color: #ff6b6b; border: 1px solid rgba(255,80,80,0.28); }
.comparison-card__ic--good { background: rgba(74,222,128,0.14); color: var(--green); border: 1px solid rgba(74,222,128,0.34); }
.comparison-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.comparison-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.comparison-list li::before { flex-shrink: 0; font-weight: 700; }
.comparison-list li.bad::before  { content: '✗'; color: #ff5555; }
.comparison-list li.good::before { content: '✓'; color: var(--green); }
.comparison-card__total {
    margin-top: 20px; font-weight: 700; font-size: 15px;
    padding: 10px 14px; border-radius: 10px; text-align: center;
}
.comparison-card__total.bad  { background: rgba(255,80,80,0.1);  color: #ff6b6b; }
.comparison-card__total.good { background: rgba(74,222,128,0.12); color: var(--green); }

/* Price compare table */
.price-compare-table {
    border: 1px solid var(--panel-border); border-radius: var(--radius-md); overflow: hidden;
}
.price-compare__header,
.price-compare__row {
    display: grid; grid-template-columns: 2fr 2fr 1.5fr 1.5fr;
    padding: 12px 20px; gap: 12px; align-items: center;
}
.price-compare__header {
    background: rgba(120,180,255,0.06); font-size: 11.5px;
    color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em;
}
.price-compare__row { border-top: 1px solid rgba(120,180,255,0.07); font-size: 13.5px; }
.price-compare__row:hover { background: rgba(120,180,255,0.03); }
.price-green  { color: var(--green); font-weight: 600; }
.badge-yes {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(74,222,128,0.12); color: var(--green);
    padding: 3px 11px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge-yes svg { width: 13px; height: 13px; flex-shrink: 0; }
/* Ячейка «недоступно напрямую» — приглушённый красный с иконкой замка */
.cell-locked {
    display: inline-flex; align-items: center; gap: 6px;
    color: rgba(255,120,120,0.85); font-size: 13px;
}
.cell-locked svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .85; }
:root.light .cell-locked { color: #c0392b; }

/* Model savings badge */
.model__savings { font-size: 11px; color: var(--green); display: block; margin-top: 4px; letter-spacing: .02em; }
.model__savings.badge-exclusive { color: #ffd58a; }

/* ════════════════════════════════════════════════════
   Лендинг — Telegram community
   ════════════════════════════════════════════════════ */
.tg-community-block {
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg); padding: 48px;
}
.tg-community-block h2 { margin-top: 0; }
.tg-channels { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.tg-channel {
    display: flex; align-items: center; gap: 16px; padding: 18px 24px;
    background: rgba(106,165,255,0.07); border: 1px solid rgba(120,180,255,0.18);
    border-radius: var(--radius-md); text-decoration: none; color: var(--text);
    flex: 1; min-width: 280px; transition: border-color .2s, background .2s;
}
.tg-channel:hover { border-color: var(--neon); background: rgba(106,165,255,0.13); opacity: 1; }
.tg-channel__icon { width: 40px; height: 40px; border-radius: 50%;
                     background: rgba(106,165,255,0.15); display: grid; place-items: center;
                     color: var(--neon); flex-shrink: 0; }
.tg-channel__name { font-weight: 700; font-size: 15px; color: var(--neon); }
.tg-channel__desc { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.tg-channel__cta { margin-left: auto; font-size: 13px; color: var(--text-faint); white-space: nowrap; padding-left: 16px; }
:root.light .tg-community-block { background: rgba(26,92,200,0.04); }
:root.light .tg-channel { background: rgba(26,92,200,0.05); }
:root.light .tg-channel:hover { background: rgba(26,92,200,0.1); }

@media (max-width: 768px) {
    .comparison-grid { grid-template-columns: 1fr; }
    .price-compare__header,
    .price-compare__row { grid-template-columns: 2fr 1.5fr 1fr; padding: 10px 12px; gap: 8px; font-size: 12px; }
    .price-compare__header span:nth-child(2),
    .price-compare__row span:nth-child(2) { display: none; }
    .tg-channels { flex-direction: column; }
}

/* ════════════════════════════════════════════════════
   ИИ-Студия: студийные классы
   ════════════════════════════════════════════════════ */
.studio-wrap { padding: 32px 0 64px; min-height: calc(100vh - 80px); }
.studio-header { margin-bottom: 28px; }
.studio-header h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; }
.studio-header p { margin: 0; color: var(--text-muted); font-size: 14px; }

/* Tab navigation */
.studio-tabs { display: flex; gap: 4px; margin-bottom: 28px; background: var(--panel);
               border-radius: var(--radius-md); padding: 4px;
               border: 1px solid var(--panel-border); width: fit-content; }
.studio-tab { padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 500;
               background: transparent; border: none; color: var(--text-muted); cursor: pointer;
               transition: all .2s; white-space: nowrap; }
.studio-tab.active { background: rgba(106,165,255,0.18); color: var(--text);
                      box-shadow: 0 1px 6px rgba(106,165,255,0.15); }
.studio-tab:hover:not(.active) { background: rgba(120,180,255,0.06); color: var(--text); }
.studio-panel { display: none; }
.studio-panel.active { display: block; }

/* Two-column layout: form + canvas */
.studio-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.studio-form-col { background: var(--panel); border: 1px solid var(--panel-border);
                   border-radius: var(--radius-lg); padding: 22px; position: sticky; top: 80px; }
.studio-form-col .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted);
                                 text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px; margin-top: 16px; }
.studio-form-col .form-label:first-child { margin-top: 0; }
.studio-form-col select { width: 100%; background: rgba(120,180,255,0.07); border: 1px solid rgba(120,180,255,0.18);
                            border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text); font-size: 14px;
                            outline: none; cursor: pointer; color-scheme: dark; }
.studio-form-col select option,
.studio-form-col select optgroup { background: #0a1428; color: #e6f0ff; }
.studio-form-col textarea,
.studio-form-col .studio-model-input { width: 100%; min-height: 90px; resize: vertical; background: rgba(120,180,255,0.07);
                              border: 1px solid rgba(120,180,255,0.18); border-radius: var(--radius-sm);
                              padding: 10px 12px; color: var(--text); font-size: 14px; outline: none;
                              font-family: inherit; box-sizing: border-box; }
.studio-form-col .studio-model-input { min-height: 0; font-family: var(--mono); }
.studio-form-col textarea:focus, .studio-form-col select:focus,
.studio-form-col .studio-model-input:focus { border-color: rgba(106,165,255,0.5); }
.studio-generate-btn { width: 100%; margin-top: 20px; padding: 13px; font-size: 15px; }

/* Canvas */
.studio-canvas { background: var(--panel); border: 1px solid var(--panel-border);
                  border-radius: var(--radius-lg); padding: 24px; min-height: 420px;
                  display: flex; align-items: center; justify-content: center; }
.studio-canvas-placeholder { color: var(--text-faint); text-align: center; }
.studio-canvas-placeholder svg { opacity: .3; margin-bottom: 12px; }
.studio-canvas--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
                         gap: 16px; align-items: start; width: 100%; }

/* Ratio buttons */
.ratio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ratio-btn { background: rgba(120,180,255,0.07); border: 1px solid rgba(120,180,255,0.18);
              border-radius: 8px; padding: 7px 4px; font-size: 11px; color: var(--text-muted);
              cursor: pointer; text-align: center; transition: all .15s; }
.ratio-btn.active { border-color: var(--neon); color: var(--text); background: rgba(106,165,255,0.13); }
.ratio-btn:hover:not(.active) { border-color: rgba(120,180,255,0.4); color: var(--text); }
.ratio-btn span { display: block; font-size: 9px; opacity: .6; margin-top: 2px; }

/* Count buttons */
.count-row { display: flex; gap: 6px; }
.count-btn { flex: 1; background: rgba(120,180,255,0.07); border: 1px solid rgba(120,180,255,0.18);
              border-radius: 8px; padding: 7px; font-size: 13px; cursor: pointer; color: var(--text-muted);
              text-align: center; transition: all .15s; }
.count-btn.active { border-color: var(--neon); color: var(--text); background: rgba(106,165,255,0.13); }

/* Result image card */
.studio-result { border-radius: var(--radius-md); overflow: hidden; position: relative;
                  border: 1px solid var(--panel-border); background: rgba(120,180,255,0.03); }
.studio-result img { width: 100%; height: auto; display: block; cursor: zoom-in; transition: opacity .2s; }
.studio-result__meta { padding: 9px 12px; font-size: 11.5px; color: var(--text-muted);
                        display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.studio-result__actions { display: flex; gap: 5px; position: absolute; top: 8px; right: 8px;
                            opacity: 0; transition: opacity .2s; }
.studio-result:hover .studio-result__actions { opacity: 1; }
.icon-btn { padding: 5px 8px; font-size: 12px; border-radius: 8px; background: rgba(5,8,16,0.7);
             border: 1px solid rgba(120,180,255,0.3); color: #fff; cursor: pointer; backdrop-filter: blur(4px); }
.icon-btn:hover { background: rgba(106,165,255,0.25); }
.icon-btn--danger:hover { background: rgba(255,80,80,0.28); border-color: rgba(255,120,120,0.6); }

/* Compare panel */
.compare-model-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.compare-model-item { display: flex; align-items: center; gap: 10px; cursor: pointer;
                       padding: 8px 10px; border-radius: var(--radius-sm);
                       border: 1px solid var(--panel-border); transition: border-color .15s; }
.compare-model-item input[type=checkbox] { accent-color: var(--neon); width: 16px; height: 16px; }
.compare-model-item:has(input:checked) { border-color: rgba(106,165,255,0.4); background: rgba(106,165,255,0.05); }
.compare-model-item span { font-size: 13px; }
.compare-model-item small { font-size: 11px; color: var(--text-faint); margin-left: auto; }
.compare-grid { display: grid; gap: 16px; width: 100%; }
.compare-item__label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px;
                         font-family: var(--mono); text-align: center; }

/* History */
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; width: 100%; }
.history-thumb { position: relative; border-radius: var(--radius-md); overflow: hidden;
                  cursor: pointer; aspect-ratio: 1; border: 1px solid var(--panel-border); }
.history-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.history-thumb:hover img { transform: scale(1.04); }
.history-thumb__overlay { position: absolute; inset: 0; background: rgba(3,6,13,0.72);
                            opacity: 0; transition: opacity .2s; display: flex; flex-direction: column;
                            justify-content: flex-end; padding: 10px; gap: 6px; }
.history-thumb:hover .history-thumb__overlay { opacity: 1; }
.history-thumb__prompt { font-size: 11px; color: rgba(255,255,255,0.9);
                           display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
                           -webkit-box-orient: vertical; overflow: hidden; }
.history-thumb__model { font-size: 10px; color: var(--neon); font-family: var(--mono); }
.history-thumb__btns { display: flex; gap: 4px; }
.history-empty { color: var(--text-faint); text-align: center; width: 100%; padding: 60px 0; }

/* Analyze */
.upload-zone { border: 2px dashed rgba(120,180,255,0.25); border-radius: var(--radius-md);
                padding: 36px 20px; text-align: center; cursor: pointer; transition: all .2s;
                color: var(--text-muted); }
.upload-zone.dragover { border-color: var(--neon); background: rgba(106,165,255,0.06); color: var(--text); }
.upload-zone img { max-height: 220px; max-width: 100%; border-radius: 8px; display: block; margin: 0 auto; }
.analyze-result { background: rgba(120,180,255,0.04); border: 1px solid var(--panel-border);
                   border-radius: var(--radius-md); padding: 18px; white-space: pre-wrap;
                   font-size: 14px; line-height: 1.65; min-height: 120px; }
.preset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.preset-chip { background: rgba(120,180,255,0.07); border: 1px solid rgba(120,180,255,0.18);
                border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer;
                color: var(--text-muted); transition: all .15s; }
.preset-chip:hover, .preset-chip.active { border-color: var(--neon); color: var(--text); background: rgba(106,165,255,0.12); }

/* Spinner */
.studio-spinner { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-muted); }
.spinner { width: 36px; height: 36px; border: 3px solid rgba(106,165,255,0.2);
            border-top-color: var(--neon); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Auth overlay */
.studio-auth-wall { display: flex; flex-direction: column; align-items: center; gap: 20px;
                     padding: 80px 24px; text-align: center; }
.studio-auth-wall[hidden] { display: none !important; } /* fix: display:flex overrides [hidden] UA rule */
.studio-auth-wall p { color: var(--text-muted); font-size: 16px; }

/* Image modal */
.img-modal-content { max-width: 90vw; max-height: 90vh; border-radius: var(--radius-md);
                       object-fit: contain; }

/* Light theme overrides */
:root.light .studio-form-col select,
:root.light .studio-form-col textarea { background: rgba(26,92,200,0.04); border-color: rgba(26,92,200,0.2);
                                          color: #0a1833; color-scheme: light; }
:root.light .studio-form-col select option,
:root.light .studio-form-col select optgroup { background: #ffffff; color: #0a1833; }
:root.light .ratio-btn, :root.light .count-btn { background: rgba(26,92,200,0.05); border-color: rgba(26,92,200,0.18); }
:root.light .compare-model-item { border-color: rgba(26,92,200,0.18); }

@media (max-width: 900px) {
    .studio-layout { grid-template-columns: 1fr; }
    .studio-form-col { position: static; }
    .studio-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .studio-tabs::-webkit-scrollbar { display: none; }
}

/* ── Баннер ИИ-Студии в кабинете ── */
.studio-promo-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 16px 20px;
    background: rgba(106,165,255,0.07);
    border: 1px solid rgba(120,180,255,0.2);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}
.studio-promo-banner strong { display: block; margin-bottom: 3px; font-size: 15px; }
.studio-promo-banner .muted { font-size: 13px; }
:root.light .studio-promo-banner { background: rgba(26,92,200,0.05); border-color: rgba(26,92,200,0.2); }
@media (max-width: 600px) {
    .studio-promo-banner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Studio compare result column (fix 3-column grid bug) ── */
.studio-result-col { display: flex; flex-direction: column; gap: 0; min-width: 0; overflow: hidden; }
.studio-result-col .studio-canvas { flex: 1; min-height: 360px; }

/* ═══ Studio: вкладка «Чат» ═══ */
.chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; height: calc(100vh - 270px); min-height: 460px; }
.chat-sidebar { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); padding: 12px; overflow: hidden; }
.chat-new-btn { width: 100%; justify-content: center; }
.chat-conv-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; }
.chat-conv-empty { font-size: 12.5px; text-align: center; padding: 20px 6px; line-height: 1.5; }
.chat-conv-item { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.chat-conv-item:hover { background: rgba(120,180,255,0.06); }
.chat-conv-item.active { background: rgba(106,165,255,0.16); }
.chat-conv-title { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-del { opacity: 0; background: none; border: none; cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 6px; flex-shrink: 0; }
.chat-conv-item:hover .chat-conv-del { opacity: .7; }
.chat-conv-del:hover { opacity: 1; background: rgba(255,80,80,0.18); }

.chat-main { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.chat-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--panel-border); flex-wrap: wrap; }
.chat-model-input { flex: 1; min-width: 220px; background: rgba(120,180,255,0.07); border: 1px solid rgba(120,180,255,0.18); border-radius: 8px; padding: 8px 11px; color: var(--text); font-family: var(--mono); font-size: 13px; outline: none; }
.chat-model-input:focus { border-color: rgba(106,165,255,0.5); }
.chat-model-hint { font-size: 11.5px; white-space: nowrap; }

.chat-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.chat-empty { margin: auto; text-align: center; color: var(--text-faint); max-width: 380px; }
.chat-msg { max-width: 80%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; position: relative; overflow-wrap: anywhere; }
.chat-msg--user { align-self: flex-end; background: rgba(106,165,255,0.16); border: 1px solid rgba(106,165,255,0.25); border-bottom-right-radius: 4px; }
.chat-msg--assistant { align-self: flex-start; background: rgba(120,180,255,0.05); border: 1px solid var(--panel-border); border-bottom-left-radius: 4px; }
.chat-msg-img { max-width: 240px; border-radius: 10px; margin-bottom: 8px; display: block; }
.chat-copy { position: absolute; top: 6px; right: 6px; opacity: 0; background: rgba(5,8,16,0.6); border: 1px solid var(--panel-border); border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 6px; transition: opacity .15s; }
.chat-msg:hover .chat-copy { opacity: .8; }
.chat-copy:hover { opacity: 1; color: var(--neon); }
.chat-cursor { animation: chatblink 1s steps(2) infinite; color: var(--neon); }
@keyframes chatblink { 50% { opacity: 0; } }

.chat-inline-code { background: rgba(120,180,255,0.12); padding: 1px 5px; border-radius: 5px; font-family: var(--mono); font-size: 12.5px; }
.chat-code { position: relative; margin: 8px 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--panel-border); }
.chat-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; background: rgba(0,0,0,0.35); }
.chat-code code { font-family: var(--mono); font-size: 12.5px; color: #e6f0ff; white-space: pre; }
.chat-code-copy { position: absolute; top: 6px; right: 6px; background: rgba(5,8,16,0.7); border: 1px solid var(--panel-border); border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 8px; }
.chat-code-copy:hover { color: var(--neon); }

.chat-composer { border-top: 1px solid var(--panel-border); padding: 12px 14px; }
.chat-attach-preview { position: relative; display: inline-block; margin-bottom: 8px; }
.chat-attach-preview img { max-height: 72px; border-radius: 8px; display: block; }
.chat-attach-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #222; color: #fff; border: 1px solid var(--panel-border); cursor: pointer; font-size: 13px; line-height: 1; }
.chat-input-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-attach-btn { background: rgba(120,180,255,0.08); border: 1px solid rgba(120,180,255,0.18); border-radius: 10px; cursor: pointer; font-size: 18px; padding: 7px 11px; color: var(--text-muted); }
.chat-attach-btn:hover { border-color: var(--neon); }
.chat-input-row textarea { flex: 1; resize: none; min-height: 42px; max-height: 200px; background: rgba(120,180,255,0.07); border: 1px solid rgba(120,180,255,0.18); border-radius: 10px; padding: 10px 12px; color: var(--text); font-size: 14px; font-family: inherit; outline: none; }
.chat-input-row textarea:focus { border-color: rgba(106,165,255,0.5); }
.chat-send-btn { flex-shrink: 0; }
.chat-send-btn--stop { background: #c0392b; border-color: #c0392b; }
.chat-error { color: #ff6b6b; font-size: 12.5px; margin-top: 8px; }
/* hidden-атрибут должен побеждать display из правил выше */
.chat-error[hidden], .chat-attach-preview[hidden] { display: none !important; }
:root.light .chat-msg--assistant { background: rgba(26,92,200,0.04); }
:root.light .chat-code pre { background: rgba(0,0,0,0.06); }
:root.light .chat-code code { color: #1a2b4a; }

@media (max-width: 760px) {
    .chat-layout { grid-template-columns: 1fr; height: auto; }
    .chat-sidebar { max-height: 180px; }
    .chat-messages { min-height: 340px; }
    .chat-msg { max-width: 92%; }
}

/* ═══ Студия в режиме встраивания (iframe / ?embed=1) — прячем шапку и футер ═══ */
html.studio-embed .site-header,
html.studio-embed .footer { display: none !important; }
html.studio-embed .studio-wrap { padding: 14px 0 28px; min-height: auto; }
html.studio-embed .studio-header { margin-bottom: 16px; }
html.studio-embed .studio-header h1 { font-size: 21px; }

/* ═══ Промо-баннер студии как кликабельная ссылка ═══ */
a.studio-promo-banner { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
a.studio-promo-banner:hover { border-color: var(--neon); background: rgba(106,165,255,0.12); }

/* подсветка активного пункта меню */
.nav a.nav-active { color: var(--text); }

/* ═══ Mini App: вкладки Профиль / Студия + нижняя навигация ═══ */
.mini-tab { display: none; }
.mini-tab--active { display: block; }
.mini-studio-frame {
    width: 100%;
    height: calc(100dvh - 150px);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--panel);
    display: block;
}
/* В режиме «Студия» прячем верхнюю шапку приложения и отдаём максимум места iframe */
body.mini-studio-open #miniTabProfile { display: none; }
body.mini-studio-open .app-wrap > header { display: none; }
body.mini-studio-open .app-wrap { padding-top: 10px; padding-bottom: 84px; }
body.mini-studio-open .mini-studio-frame { height: calc(100dvh - 104px); }

.mini-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; gap: 4px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(8,12,24,0.92); backdrop-filter: blur(10px);
    border-top: 1px solid var(--panel-border);
}
.mini-navbtn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; cursor: pointer;
    color: var(--text-faint); font-size: 11px; font-weight: 600; padding: 6px 0;
    border-radius: 10px; transition: color .15s, background .15s;
}
.mini-navbtn__ic { font-size: 19px; line-height: 1; }
.mini-navbtn--active { color: var(--neon); background: rgba(106,165,255,0.1); }
:root.light .mini-bottomnav { background: rgba(255,255,255,0.92); }

/* ═══ Studio: история видео / озвучки ═══ */
.media-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.media-item { position: relative; border-radius: var(--radius-md); overflow: hidden; background: rgba(120,180,255,0.05); border: 1px solid var(--panel-border); }
.media-item video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; background: #000; }
.media-pending { aspect-ratio: 1; display: grid; place-items: center; font-size: 12px; color: var(--text-faint); }
.media-item__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; }
.media-item__model { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item__bar .icon-btn { opacity: .7; }
.media-item__bar .icon-btn:hover { opacity: 1; }

.audio-history { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.audio-item { background: rgba(120,180,255,0.05); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 10px 12px; }
.audio-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.audio-item__model { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.audio-item__text { font-size: 12.5px; color: var(--text-faint); margin-top: 4px; max-height: 46px; overflow: hidden; }
.audio-item audio { height: 36px; }

/* ═══ Studio: подзаголовок истории внутри вкладки ═══ */
.studio-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 10px; }
.studio-subhead strong { font-size: 14px; }
.analyze-hist-img { max-width: 120px; border-radius: 8px; margin: 6px 0; display: block; cursor: zoom-in; }

/* ============================================================================
   PREMIUM ELEVATION PASS — глубина, тач-зоны, доступность, движение
   Глобальный слой поверх всех поверхностей. Имена классов НЕ меняем.
   ============================================================================ */

/* ── Мягкая глубина карточек (объём без жёстких теней) ── */
.feature, .model, .step, .stat-card, .app-card, .app-stat-card,
.account__section, .comparison-card, .doc-card, .code-card,
.tg-community-block, .studio-form-col, .studio-canvas,
.chat-sidebar, .chat-main {
    box-shadow: var(--shadow-md);
}
.cta-block { box-shadow: var(--shadow-lg); }
.modal__dialog, .app-modal__sheet { box-shadow: var(--shadow-xl); }

/* Плавный ховер-лифт без сдвига соседних элементов */
.feature, .model, .step, .stat-card, .doc-card, .app-stat-card {
    transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease,
                box-shadow .22s ease, background .22s ease;
}
.feature:hover, .model:hover, .step:hover, .stat-card:hover, .doc-card:hover {
    box-shadow: var(--shadow-lg);
}

/* ── Светлая тема: тени мягче и «синее», без грязного чёрного ── */
:root.light {
    --shadow-sm:   0 1px 2px rgba(26,92,200,.10);
    --shadow-md:   0 6px 22px rgba(26,92,200,.10);
    --shadow-lg:   0 16px 44px rgba(26,92,200,.14);
    --shadow-xl:   0 28px 70px rgba(26,92,200,.18);
    --shadow-glow: 0 12px 36px rgba(26,92,200,.22);
}

/* ── Доступная фокус-обводка (box-shadow повторяет радиус элемента) ── */
a:focus-visible, button:focus-visible, .preset-btn:focus-visible,
.copy-btn:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(106,165,255,0.40);
}

/* ── Мобайл: ≥16px в полях (без авто-zoom в iOS) + крупные тач-зоны ── */
@media (max-width: 768px) {
    input, textarea, select,
    .form-input, .catalog-search, .app-models-search,
    .studio-model-input, .chat-model-input, .models-search {
        font-size: 16px;
    }
    .btn { min-height: 44px; }
    .copy-btn, .preset-btn, .app-cat-btn {
        min-height: 40px; display: inline-flex; align-items: center;
    }
}

/* ── Уважение к prefers-reduced-motion на всём проекте ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   PHASE 3 — ЛИЧНЫЙ КАБИНЕТ + MINI APP: премиальная полировка (class-preserving)
   ============================================================================ */

/* Табличные цифры — ровные колонки балансов, цен и статистики */
.stat-card__value, .app-balance__value, .app-stat-card__value, .app-stat-card__value--sm,
.ref-stat__value, .app-ref-stat, .model__price, .price-cell, .account__table .price-cell,
.doc-table .price-cell, .topup-summary, .price-compare__row, .app-usage-item, .app-tx-item {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Баланс — крупный акцентный числовой блок */
.app-balance__value, .stat-card__value { letter-spacing: -0.03em; }

/* Таблицы кабинета: мягкий ховер строк */
.account__table tbody tr { transition: background .15s ease; }
.account__table tbody tr:hover td { background: rgba(120,180,255,0.035); }
:root.light .account__table tbody tr:hover td { background: rgba(26,92,200,0.035); }

/* Стат-карты ЛК — мягкий ховер-лифт (как карточки на лендинге) */
.stat-card:hover { transform: translateY(-2px); }
.app-stat-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }

/* ── Mini App: крупные тач-зоны и комфортный ритм (mobile-first) ── */
.app-card { padding: clamp(18px, 5vw, 26px); }
.copy-btn { min-height: 38px; padding: 8px 14px; }
.app-topup-presets .preset-btn,
.app-topup-presets .form-input { min-height: 44px; }
.mini-navbtn { min-height: 52px; }                 /* удобная нижняя навигация */
.app-modal__sheet .btn-block { min-height: 48px; } /* главная кнопка в bottom-sheet */
.app-cat-btn { min-height: 36px; }

/* Идентичный веб-стиль для balance/stat-блоков Mini App (синхрон с .stat-card) */
.app-stat-card, .app-card, .app-ref-stat {
    border-radius: var(--radius-md);
}
.app-stat-card__value { letter-spacing: -0.02em; }

/* ============================================================================
   MOTION SYSTEM 2026-06 — «вау»-эффекты: появление при загрузке + при скролле.
   Всё под защитой html.js (без JS — контент виден) и prefers-reduced-motion.
   ============================================================================ */

/* ── Появление Hero при загрузке (staggered) ── */
@keyframes ma-rise {
    from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
    to   { opacity: 1; transform: none;             filter: blur(0); }
}
html.js .hl {
    opacity: 0;
    animation: ma-rise .9s cubic-bezier(.16,.84,.3,1) forwards;
    animation-delay: var(--d, 0s);
}

/* ── Появление секций/карточек при скролле ── */
html.js .reveal,
html.js [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.16,.84,.3,1),
                transform .8s cubic-bezier(.16,.84,.3,1);
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
}
html.js .reveal.in,
html.js [data-reveal-group] > *.in {
    opacity: 1;
    transform: none;
}

/* ── Доступность: при reduce-motion или печати — всё сразу видно ── */
@media (prefers-reduced-motion: reduce) {
    html.js .hl,
    html.js .reveal,
    html.js [data-reveal-group] > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }
}
@media print {
    html.js .hl, html.js .reveal, html.js [data-reveal-group] > * {
        opacity: 1 !important; transform: none !important;
    }
}

/* ── Hero-сцена: вплывание логотипов и вордмарка ── */
@keyframes ma-chip-in {
    from { opacity: 0; transform: translateY(14px) scale(.86); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
html.js .hero__scene .logo-chip {
    opacity: 0;
    animation: ma-chip-in .8s cubic-bezier(.16,.84,.3,1) forwards;
    animation-delay: var(--cd, .5s);
}
html.js .hero__scene .logo-chip:nth-child(2) { --cd: .48s; }
html.js .hero__scene .logo-chip:nth-child(3) { --cd: .58s; }
html.js .hero__scene .logo-chip:nth-child(4) { --cd: .66s; }
html.js .hero__scene .logo-chip:nth-child(5) { --cd: .74s; }
html.js .hero__scene .logo-chip:nth-child(6) { --cd: .82s; }
html.js .hero__scene .logo-chip:nth-child(7) { --cd: .90s; }
html.js .hero__scene .logo-chip:nth-child(8) { --cd: .98s; }
html.js .hero__scene .logo-chip:nth-child(9) { --cd: 1.06s; }
@media (prefers-reduced-motion: reduce) {
    html.js .hero__scene .logo-chip { opacity: 1 !important; animation: none !important; }
}

/* ── «Живой» индикатор в eyebrow: пульс точки ── */
.hero__eyebrow::before { animation: ma-live-pulse 2.4s ease-in-out infinite; }
@keyframes ma-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.55), 0 0 10px var(--green); }
    50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0),  0 0 14px var(--green); }
}

/* ── Премиальный «блик» на главной кнопке при наведении ── */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .65s cubic-bezier(.2,.7,.3,1);
}
.btn-primary:hover::before { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .btn-primary::before { display: none; } }

/* ============================================================================
   СВЕТЛАЯ ТЕМА — дневная сцена Hero: солнце + орбиты с планетами.
   Зеркалит тёмный «космос»: тот же layout, но день. Только в :root.light.
   ============================================================================ */
.cosmos__day { position: absolute; inset: 0; display: none; pointer-events: none; }
:root.light .cosmos__day { display: block; }

/* В светлой теме гасим ночные слои (тёмная планета, синее свечение, звёзды) */
:root.light .cosmos__planet,
:root.light .cosmos__glow,
:root.light .cosmos__stars,
:root.light .cosmos__shoot { display: none; }

/* Тёплая дневная дымка вместо синей туманности */
:root.light .cosmos__nebula {
    background:
        radial-gradient(42% 52% at 76% 24%, rgba(255,197,92,.26), transparent 70%),
        radial-gradient(54% 62% at 16% 14%, rgba(120,170,255,.14), transparent 72%);
    filter: blur(10px);
}

/* Солнечная система: общий центр для солнца и орбит */
.cosmos__solar {
    position: absolute; top: 12%; right: 15%;
    width: clamp(120px, 15vw, 200px); aspect-ratio: 1;
}
.cosmos__sun {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 46%,
        #fffdf2 0%, #fff0c4 30%, #ffd166 58%, #ffb43c 80%, #ff9e2c 100%);
    box-shadow:
        0 0 50px 14px rgba(255,201,94,.55),
        0 0 130px 56px rgba(255,176,64,.34),
        inset 0 0 30px rgba(255,142,30,.30);
    animation: ma-sun 7s ease-in-out infinite;
}
/* Мягкая корона солнца */
.cosmos__sun::after {
    content: ''; position: absolute; inset: -34%; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,196,92,.30) 0%, transparent 62%);
    animation: ma-sun-corona 7s ease-in-out infinite;
}
@keyframes ma-sun {
    0%, 100% { filter: drop-shadow(0 0 18px rgba(255,184,66,.5)); }
    50%      { filter: drop-shadow(0 0 30px rgba(255,196,92,.7)); }
}
@keyframes ma-sun-corona {
    0%, 100% { transform: scale(1);    opacity: .8; }
    50%      { transform: scale(1.12); opacity: 1; }
}

/* Орбиты — концентрические эллипсы вокруг солнца, с планетой на краю */
.cosmos__orbit {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(26,92,200,.16);
    transform: translate(-50%, -50%);
    animation: ma-orbit var(--ot, 30s) linear infinite;
}
.cosmos__orbit i {
    position: absolute; top: -6px; left: 50%;
    width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
    background: var(--pc, #1a5cc8);
    box-shadow: 0 0 12px 1px var(--pg, rgba(26,92,200,.5));
}
.cosmos__orbit--a { width: 230%; height: 230%; --ot: 16s; }
.cosmos__orbit--a i { --pc: linear-gradient(135deg,#5b8cff,#1a5cc8); --pg: rgba(26,92,200,.55); }
.cosmos__orbit--b { width: 340%; height: 340%; --ot: 27s; animation-direction: reverse; }
.cosmos__orbit--b i { --pc: linear-gradient(135deg,#ffd07a,#ff9e2c); --pg: rgba(255,158,44,.5); width: 10px; height: 10px; margin-left: -5px; top: -5px; }
.cosmos__orbit--c { width: 470%; height: 470%; --ot: 44s; }
.cosmos__orbit--c i { --pc: linear-gradient(135deg,#7ee0c8,#16a085); --pg: rgba(22,160,133,.45); width: 8px; height: 8px; margin-left: -4px; top: -4px; }
@keyframes ma-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cosmos__sun, .cosmos__sun::after, .cosmos__orbit { animation: none !important; }
}
@media (max-width: 880px) {
    .cosmos__solar { top: 8%; right: 8%; }
    .cosmos__orbit--c { display: none; }     /* меньше шума на узких экранах */
}

/* Hero wordmark + плавающие чипы в светлой теме (день) */
:root.light .hero__wordmark {
    background: linear-gradient(120deg, #0a1833 0%, #1a5cc8 52%, #2f86d6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 22px rgba(26,92,200,.22));
}
:root.light .hero__core-sub { color: rgba(10,24,51,.55); }
:root.light .hero__core::before {
    background: radial-gradient(circle, rgba(255,196,92,.22), rgba(255,196,92,0) 68%);
}
:root.light .logo-chip__in {
    background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(236,243,255,.86));
    border: 1px solid rgba(26,92,200,.16);
    box-shadow: 0 12px 32px rgba(26,92,200,.14), inset 0 1px 0 rgba(255,255,255,.7);
    color: #16264a;
}

/* ============================================================================
   MINI APP — анимация запуска (splash). Орбитальный логомарк в стиле «космос».
   ============================================================================ */
#app-splash {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 38%, rgba(58,108,255,.20), transparent 60%),
        linear-gradient(180deg, #070b18 0%, #03060d 100%);
    transition: opacity .55s ease, visibility .55s ease;
}
#app-splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.splash-logo__core {
    width: 62px; height: 62px;
    filter: drop-shadow(0 6px 24px rgba(91,140,255,.55));
    animation: splash-pop .85s cubic-bezier(.16,.84,.3,1) both;
}
.splash-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px dashed rgba(120,180,255,.34);
    animation: splash-spin 4.2s linear infinite;
}
.splash-ring--2 { inset: -17px; border-color: rgba(120,180,255,.18); animation-duration: 7.5s; animation-direction: reverse; }
.splash-ring i {
    position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
    border-radius: 50%; background: #7aa2ff; box-shadow: 0 0 12px 2px rgba(122,162,255,.7);
}
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.splash-word {
    font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -.02em;
    background: linear-gradient(120deg, #e3ecff, #6f9bff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: 0; animation: splash-fade .7s ease .25s both;
}
.splash-sub {
    font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(180,200,245,.6); opacity: 0; animation: splash-fade .7s ease .4s both;
}
.splash-bar { width: 116px; height: 3px; border-radius: 3px; background: rgba(120,180,255,.14); overflow: hidden; opacity: 0; animation: splash-fade .7s ease .5s both; }
.splash-bar i { display: block; height: 100%; width: 38%; border-radius: 3px; background: linear-gradient(90deg, #3a6cff, #7ab4ff); animation: splash-load 1.15s ease-in-out infinite; }
@keyframes splash-fade { to { opacity: 1; } }
@keyframes splash-load { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }
:root.light #app-splash {
    background:
        radial-gradient(ellipse 80% 60% at 50% 38%, rgba(255,196,92,.18), transparent 60%),
        linear-gradient(180deg, #eef3ff 0%, #f5f8ff 100%);
}
:root.light .splash-word { background: linear-gradient(120deg, #0a1833, #1a5cc8); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root.light .splash-sub { color: rgba(10,24,51,.5); }
:root.light .splash-ring { border-color: rgba(26,92,200,.28); }
:root.light .splash-ring i { background: #1a5cc8; box-shadow: 0 0 12px 2px rgba(26,92,200,.5); }
@media (prefers-reduced-motion: reduce) {
    .splash-ring, .splash-logo__core, .splash-word, .splash-sub, .splash-bar, .splash-bar i { animation: none !important; opacity: 1 !important; }
}