/* ===================================================================
   Carambola AI — дизайн-система
   Палитра: жёлтый #FFD700, салатовый #7CFC00, светло-оранжевый #FFA500
   Тёмный фон #1a1a2e с яркими акцентами. Шрифт Inter.
   =================================================================== */
:root {
    /* Бренд */
    --c-yellow: #FFD700;
    --c-green: #C8F238;          /* акцент-лайм; алиас для обратной совместимости */
    --c-orange: #FFA500;
    /* Семантические токены (тёмная тема — графит) */
    --accent: #C8F238;
    --accent-hover: #D6F85C;
    --on-accent: #18211C;        /* тёмный текст на акцентном фоне */
    --link: #B7E84B;

    --bg-dark: #11151B;          /* фон страницы */
    --bg-dark-2: #1A2028;        /* панели */
    --bg-card: #1A2028;          /* карточки/поверхности */
    --bg-card-2: #232B35;        /* поля ввода / приподнятые поверхности */
    --surface-elevated: #232B35;
    --border-soft: #343E48;

    --text-main: #F3F5F4;
    --text-muted: #AAB5B0;

    --success: #35C759;
    --warning: #E6A100;
    --error: #FF6B6B;

    --grad-brand: linear-gradient(135deg, #FFD700 0%, #C8F238 55%, #FFA500 100%);
    --grad-brand-soft: rgba(200, 242, 56, 0.12);   /* мягкий акцентный тон (не градиент) */
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.30);
    --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.22);
    --focus-ring: 0 0 0 3px rgba(200, 242, 56, 0.45);
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

/* ---------- Светлая тема (палитра #dde5b6) ----------
   Белые фоны заменены на светло-зеленоватый #dde5b6, серые — оттенки той же
   гаммы (страница светлее карточек, поля чуть темнее). Текст — тёмный. */
html[data-theme="light"] {
    --bg-dark: #F6F7F8;      /* фон страницы — нейтральный светло-серый */
    --bg-dark-2: #FFFFFF;    /* панели */
    --bg-card: #FFFFFF;      /* карточки */
    --bg-card-2: #F2F4F2;    /* поля ввода */
    --surface-elevated: #FFFFFF;
    --border-soft: #DDE3DE;
    --text-main: #18211C;    /* графитовый текст */
    --text-muted: #5D6861;
    --link: #356B20;
    --accent: #C8F238;
    --accent-hover: #BCE82C;
    --on-accent: #18211C;
    --grad-brand-soft: rgba(53, 107, 32, 0.10);
    --shadow-card: 0 6px 20px rgba(20, 30, 20, 0.08);
    --shadow-soft: 0 2px 10px rgba(20, 30, 20, 0.06);
    --focus-ring: 0 0 0 3px rgba(53, 107, 32, 0.35);
}
html[data-theme="light"] .carambola-navbar {
    background: rgba(255, 255, 255, 0.90) !important;
}
html[data-theme="light"] .btn-brand-outline,
html[data-theme="light"] .btn-outline-light {
    color: var(--text-main);
}
html[data-theme="light"] .btn-brand-outline {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}
html[data-theme="light"] .navbar-toggler { filter: invert(1); }

/* ---------- Светлая тема: читаемость логотипа и цифр ----------
   В тёмной теме название «Carambola» и все цифры (цены, баланс, статистика)
   красятся ярким градиентом с прозрачной заливкой. На салатовом фоне светлой
   темы это плохо читается, поэтому здесь заменяем градиент на сплошной тёмный
   цвет (цифры) и тёмно-зелёный + тень (логотип). */
html[data-theme="light"] .brand-text {
    background: none;
    -webkit-text-fill-color: #16351a;
    color: #16351a;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
html[data-theme="light"] .price-value,
html[data-theme="light"] .balance-value,
html[data-theme="light"] .video-price-value,
html[data-theme="light"] .model-card .price-value,
html[data-theme="light"] .stat-square .stat-num,
html[data-theme="light"] .service-price {
    background: none;
    -webkit-text-fill-color: #1a1a2e;
    color: #1a1a2e;
}
html[data-theme="light"] .price-value.free {
    -webkit-text-fill-color: #1f6b00;
    color: #1f6b00;
}
/* Доход/списание в таблицах и баланс в шапке — тоже тёмные оттенки. */
html[data-theme="light"] .amount-plus { color: #1f6b00; }
html[data-theme="light"] .nav-balance { color: #1a1a2e; }

* { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-dark);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

main { flex: 1 0 auto; }

::selection { background: rgba(124, 252, 0, .3); }

a { color: var(--c-green); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-yellow); }

/* ---------- Фоновые «сияния» ---------- */
/* overflow:clip не даёт декоративным «свечениям» (::before/::after со
   смещением right/left: -120px) создавать горизонтальную прокрутку —
   критично для мобильных и масштаба 200% (ГОСТ Р 52872-2019). */
.glow-bg { position: relative; overflow: clip; }
.glow-bg::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .10;               /* мягкое фирменное свечение, без «пятен» */
    z-index: 0;
    pointer-events: none;
    width: 420px; height: 420px; background: var(--accent); top: -180px; left: -140px;
}
.glow-bg::after { content: none; }   /* убрали второе (оранжевое) свечение */
/* В светлой теме рабочие разделы — без свечения (чистый фон). */
html[data-theme="light"] .glow-bg::before { display: none; }

/* ---------- Navbar ---------- */
.carambola-navbar {
    background: rgba(17, 21, 27, 0.85) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-soft);
    padding-top: .55rem;
    padding-bottom: .55rem;
}
.brand-text {
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: -.02em;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-star { display: inline-flex; filter: drop-shadow(0 0 4px rgba(255, 215, 0, .35)); }
.carambola-navbar .nav-link {
    color: var(--text-muted);
    font-weight: 500;
    padding: .4rem .85rem;
    border-radius: 10px;
    transition: color .2s, background .2s;
}
.carambola-navbar .nav-link:hover { color: var(--text-main); background: rgba(255,255,255,.05); }

/* ---------- Кнопки: 3 уровня действий ----------
   Primary — сплошной акцент (основное действие: «Сгенерировать», «Отправить»).
   Secondary (.btn-brand-outline) — поверхность + граница (загрузка, Telegram).
   Tertiary — текстовые/иконочные (служебные). Без ярких градиентных заливок. */
.btn-brand {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    border-radius: 999px;
    padding: .6rem 1.5rem;
    box-shadow: var(--shadow-soft);
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn-brand:hover { color: var(--on-accent); background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn-brand:active { transform: translateY(0); }
.btn-brand-outline {
    border: 1px solid var(--border-soft);
    background: var(--bg-card);
    color: var(--text-main);
    font-weight: 600;
    border-radius: 999px;
    padding: .6rem 1.5rem;
    transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.btn-brand-outline:hover { color: var(--text-main); border-color: var(--accent); background: var(--grad-brand-soft); transform: translateY(-1px); }
.btn-lg-brand { font-size: 1.05rem; padding: .8rem 2rem; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    padding: 4rem 0;
    overflow: hidden;
}
.hero-title {
    font-weight: 800;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin-bottom: 1.2rem;
}
.hero-title .accent {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Светлая тема: градиент на тексте плохо читается — сплошной тёмно-зелёный. */
html[data-theme="light"] .hero-title .accent {
    background: none;
    -webkit-text-fill-color: #2E5F1B;
    color: #2E5F1B;
}
.hero-sub {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: var(--text-muted);
    max-width: 620px;
    margin-bottom: 2.2rem;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: var(--grad-brand-soft);
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    font-weight: 500;
    font-size: .9rem;
    margin-bottom: 1.6rem;
}
.hero-orb {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 340px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--grad-brand);
    filter: blur(1px);
    animation: float 6s ease-in-out infinite;
    box-shadow: 0 0 60px rgba(200, 242, 56, .22);
}
.hero-orb::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: var(--bg-dark);
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

/* ---------- Секции ---------- */
.section { padding: 5rem 0; position: relative; }
.section-title {
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -.02em;
    text-align: center;
    margin-bottom: .8rem;
}
.section-sub { color: var(--text-muted); text-align: center; max-width: 640px; margin: 0 auto 3rem; }

/* ---------- Карточки ---------- */
.feature-card, .price-card, .glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
    height: 100%;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.feature-card:hover, .price-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card);
    border-color: rgba(124, 252, 0, .35);
}
.feature-icon {
    width: 58px; height: 58px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 1.1rem;
    background: var(--grad-brand-soft);
    border: 1px solid var(--border-soft);
}
.feature-card h5 { font-weight: 700; margin-bottom: .5rem; overflow-wrap: break-word; }
.feature-card p { color: var(--text-muted); margin-bottom: 0; font-size: .96rem;
    overflow-wrap: break-word; word-break: normal; hyphens: none; text-wrap: pretty; }

/* Мобильная версия блока «Наши преимущества»: 1 колонка, аккуратные переносы */
@media (max-width: 768px) {
    #advantages .feature-card {
        display: flex; align-items: flex-start; gap: 1rem;
        padding: 1.2rem 1.3rem; text-align: left;
    }
    #advantages .feature-icon { margin-bottom: 0; flex: 0 0 auto; }
    #advantages .feature-card h5 { font-size: 1.05rem; }
    #advantages .feature-card p { font-size: .92rem; }
}

/* ---------- Прайс-карточки ---------- */
.price-card { display: flex; flex-direction: column; }
.price-card .price-badge {
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-green);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}
.price-card h5 { font-weight: 700; font-size: 1.15rem; margin-bottom: .3rem; }
.price-card .price-desc { color: var(--text-muted); font-size: .9rem; flex: 1; margin-bottom: 1rem; }
.price-value {
    font-weight: 800; font-size: 1.5rem;
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.price-value.free { color: var(--c-green); -webkit-text-fill-color: var(--c-green); background: none; }
.cat-pill {
    display: inline-block; font-size: .72rem; font-weight: 600;
    padding: .18rem .6rem; border-radius: 999px;
    background: rgba(255,255,255,.06); color: var(--text-muted);
    margin-bottom: .8rem;
}

/* ---------- Glass / общие ---------- */
.glass-card {
    background: rgba(35, 35, 63, 0.72);
    backdrop-filter: blur(10px);
}
.bg-panel { background: var(--bg-dark-2); }

/* ---------- Формы ---------- */
.form-control, .form-select {
    background: var(--bg-card-2);
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    border-radius: 12px;
    padding: .7rem 1rem;
}
.form-control:focus, .form-select:focus {
    background: var(--bg-card-2);
    color: var(--text-main);
    border-color: var(--c-green);
    box-shadow: 0 0 0 .2rem rgba(124, 252, 0, .18);
}
.form-control::placeholder { color: #6c6c8f; }
.form-label { color: var(--text-muted); font-weight: 500; font-size: .92rem; }

.auth-wrap { min-height: calc(100vh - 68px); display: flex; align-items: center; padding: 3rem 0; }
.auth-card { max-width: 440px; margin: 0 auto; }

/* ---------- Таблицы ---------- */
/* Bootstrap по умолчанию задаёт белый фон ячеек (--bs-table-bg: #fff), из-за
   чего в тёмной теме светлый текст оказывался на белом (низкий контраст).
   Делаем фон прозрачным — под ним читаемый фон карточки в обеих темах. */
.table-carambola {
    color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-main);
}
.table-carambola > :not(caption) > * > * { background-color: transparent; color: var(--text-main); }
.table-carambola thead th { color: var(--text-muted); border-color: var(--border-soft); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.table-carambola td, .table-carambola th { border-color: var(--border-soft); vertical-align: middle; }
.amount-plus { color: var(--c-green); font-weight: 600; }
.amount-minus { color: #ff6b81; font-weight: 600; }

/* ---------- Баланс ---------- */
.balance-hero {
    background: var(--grad-brand-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 2rem;
}
.balance-value {
    font-weight: 900;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    line-height: 1;
}

/* ===================================================================
   Чат
   =================================================================== */
.chat-shell { display: grid; grid-template-columns: 300px 1fr; gap: 1.25rem; padding: 1.5rem 0; }
.model-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 1rem;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    position: sticky; top: 90px;
}
.model-panel h6 { color: var(--text-muted); text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; margin-bottom: .8rem; }
.model-item {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: .7rem .85rem;
    margin-bottom: .55rem;
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .12s;
}
.model-item:hover { border-color: rgba(124,252,0,.4); transform: translateX(2px); }
.model-item.active { border-color: var(--c-green); background: var(--grad-brand-soft); }
.model-item .m-title { font-weight: 600; font-size: .95rem; }
.model-item .m-price { color: var(--text-muted); font-size: .8rem; margin-top: .15rem; }
.model-item .m-desc { color: var(--text-muted); font-size: .8rem; margin-top: .35rem; display: none; }
.model-item.active .m-desc { display: block; }

.chat-main {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    display: flex; flex-direction: column;
    height: calc(100vh - 130px);
    overflow: hidden;
}
.chat-head {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.chat-head .balance-chip {
    background: var(--grad-brand-soft);
    border: 1px solid var(--border-soft);
    border-radius: 999px; padding: .3rem .9rem; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.chat-messages { flex: 1; overflow-y: auto; padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.msg { max-width: 78%; padding: .8rem 1.1rem; border-radius: 18px; font-size: .97rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; animation: msgIn .25s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.msg.user { align-self: flex-end; background: #14663a; color: #ffffff; border-bottom-right-radius: 6px; font-weight: 500; }
.msg.user ::selection { background: rgba(255,255,255,.45); color: #14663a; }
.msg.user::selection { background: rgba(255,255,255,.45); color: #14663a; }
.msg.assistant { align-self: flex-start; background: var(--bg-card-2); border: 1px solid var(--border-soft); border-bottom-left-radius: 6px; }
.msg .msg-note { display: block; margin-top: .5rem; font-size: .78rem; color: var(--text-muted); border-top: 1px dashed var(--border-soft); padding-top: .4rem; }
.msg .tts-btn { margin-top: .5rem; font-size: .8rem; background: rgba(255,255,255,.06); border: 1px solid var(--border-soft); color: var(--text-muted); border-radius: 8px; padding: .2rem .6rem; cursor: pointer; }
.msg .tts-btn:hover { color: var(--text-main); border-color: var(--c-green); }
.chat-empty { margin: auto; text-align: center; color: var(--text-muted); }

.chat-input-bar { border-top: 1px solid var(--border-soft); padding: .8rem; display: flex; gap: .5rem; align-items: flex-end; }
.chat-input-bar textarea {
    flex: 1; resize: none; min-height: 90px; max-height: 180px;
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    color: var(--text-main); border-radius: 14px; padding: .7rem 1rem;
}
.chat-input-bar textarea:focus { outline: none; border-color: var(--c-green); }
.icon-btn {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    color: var(--text-main); font-size: 1.15rem; cursor: pointer; transition: all .18s;
}
.icon-btn:hover { border-color: var(--c-green); transform: translateY(-1px); }
.icon-btn.recording { background: #ff6b81; border-color: #ff6b81; color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,107,129,.5); } 50% { box-shadow: 0 0 0 8px rgba(255,107,129,0); } }
.send-btn {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; border: none;
    background: var(--grad-brand); color: #1a1a2e; font-size: 1.2rem; cursor: pointer; transition: transform .15s, filter .15s;
}
.send-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.send-btn:disabled, .icon-btn:disabled { opacity: .5; cursor: not-allowed; }

.typing-dots span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--c-green); animation: blink 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- Toast / уведомления ---------- */
.toast-box { position: fixed; bottom: 20px; right: 20px; z-index: 1080; max-width: 340px; }

/* ---------- Cookie-баннер ---------- */
.cookie-banner {
    position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%);
    z-index: 1090; width: min(920px, calc(100% - 24px));
    background: var(--bg-card); border: 1px solid var(--border-soft);
    border-radius: var(--radius-md); box-shadow: var(--shadow-card);
    padding: 1rem 1.2rem; transition: transform .4s cubic-bezier(.2,.8,.25,1); opacity: 0;
}
.cookie-banner.show { transform: translate(-50%, 0); opacity: 1; }
.cookie-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cookie-banner .cookie-text { color: var(--text-muted); font-size: .92rem; flex: 1 1 340px; }
.cookie-banner .cookie-actions { display: flex; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 575px) {
    .cookie-banner-inner { justify-content: center; text-align: center; }
    .cookie-banner .cookie-actions { width: 100%; justify-content: center; }
}

/* ---------- Навбар: меню «Аккаунт» ---------- */
.account-dd { position: relative; }
.account-dd-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    background: transparent; border: none; cursor: pointer; color: var(--text-muted);
    font-weight: 500; padding: .4rem .85rem; border-radius: 10px;
}
.account-dd-toggle:hover { color: var(--text-main); background: rgba(255,255,255,.05); }
.account-dd-toggle[aria-expanded="true"] .acct-caret { transform: rotate(180deg); }
.nav-avatar-sm { width: 26px; height: 26px; flex: 0 0 auto; }
.nav-avatar-sm .nav-avatar-ini { font-size: .72rem; }
.account-dd-menu {
    position: absolute; top: calc(100% + .3rem); right: 0; z-index: 1090;
    min-width: 230px; background: var(--bg-card); border: 1px solid var(--border-soft);
    border-radius: 14px; box-shadow: var(--shadow-card); padding: .4rem;
    display: flex; flex-direction: column; gap: .1rem;
}
.account-dd-menu a {
    display: block; padding: .55rem .8rem; border-radius: 10px;
    color: var(--text-main); font-size: .93rem; text-decoration: none;
}
.account-dd-menu a:hover { background: rgba(124, 252, 0, .1); color: var(--text-main); }
.account-dd-menu .account-dd-logout { border-top: 1px solid var(--border-soft); margin-top: .2rem; }
/* На мобильных (collapsed nav) — меню в потоке, не абсолютное. */
@media (max-width: 991px) {
    .account-dd-menu { position: static; box-shadow: none; min-width: 0; margin-top: .3rem; }
}

/* ---------- Личный кабинет: шапка с аватаром и выдвижным меню ---------- */
.acct-header { position: relative; z-index: 50; }
.acct-avatar-btn {
    display: flex; align-items: center; gap: .8rem; width: 100%;
    background: transparent; border: none; cursor: pointer; text-align: left;
    color: var(--text-main); padding: .2rem;
}
.acct-avatar-btn .avatar-wrap { flex: 0 0 auto; }
.acct-header-name { flex: 1 1 auto; min-width: 0; }
.acct-caret { flex: 0 0 auto; color: var(--text-muted); transition: transform .2s; }
.acct-avatar-btn[aria-expanded="true"] .acct-caret { transform: rotate(180deg); }
.acct-menu {
    position: absolute; top: calc(100% - .4rem); left: .8rem; right: .8rem; z-index: 30;
    background: var(--bg-card); border: 1px solid var(--border-soft);
    border-radius: 14px; box-shadow: var(--shadow-card); padding: .4rem;
    display: flex; flex-direction: column; gap: .1rem;
}
.acct-menu-item {
    background: transparent; border: none; text-align: left; cursor: pointer;
    color: var(--text-main); padding: .6rem .8rem; border-radius: 10px; font-size: .95rem;
}
.acct-menu-item:hover { background: rgba(124, 252, 0, .1); }
.acct-menu-item.active { background: var(--grad-brand-soft); font-weight: 600; }

/* ---------- Уведомления (колокольчик + панель) ---------- */
.nav-bell {
    position: relative; background: transparent; border: none; cursor: pointer;
    font-size: 1.15rem; line-height: 1; padding: .35rem .45rem; border-radius: 10px;
    color: var(--text-main);
}
.nav-bell:hover { background: rgba(124, 252, 0, .12); }
.nav-bell-badge {
    position: absolute; top: -2px; right: -2px;
    background: #ff4d5e; color: #fff; font-size: .62rem; font-weight: 800;
    min-width: 16px; height: 16px; border-radius: 999px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
}
.notif-panel {
    position: fixed; top: 64px; right: 16px; width: min(360px, 92vw);
    max-height: 70vh; overflow: hidden; display: flex; flex-direction: column;
    background: var(--bg-card); border: 1px solid var(--border-soft);
    border-radius: 14px; box-shadow: var(--shadow-card); z-index: 1080;
}
.notif-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: .8rem 1rem; border-bottom: 1px solid var(--border-soft); font-weight: 700;
}
.notif-readall { background: none; border: none; color: var(--c-green); cursor: pointer; font-size: .82rem; }
.notif-list { overflow-y: auto; }
.notif-item { padding: .7rem 1rem; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.notif-item:hover { background: rgba(124, 252, 0, .06); }
.notif-item.unread { background: rgba(124, 252, 0, .10); }
.notif-item.unread .notif-title::before { content: "● "; color: var(--c-green); }
.notif-title { font-weight: 700; font-size: .92rem; }
.notif-text { color: var(--text-muted); font-size: .85rem; margin-top: .2rem; white-space: pre-wrap; }
.notif-date { color: var(--text-muted); font-size: .72rem; margin-top: .3rem; }
.notif-empty { padding: 1.2rem; text-align: center; color: var(--text-muted); font-size: .88rem; }

/* ---------- Админ: управление галереей ---------- */
.admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; max-height: 460px; overflow: auto; }
.admin-gi { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-soft); background: var(--bg-card-2); }
.admin-gi img, .admin-gi video { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-gi-id { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,.6); color:#fff; font-size:.68rem; padding:0 .35rem; border-radius:6px; }
.admin-gi-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border:none; border-radius:50%; background: rgba(220,50,60,.9); color:#fff; cursor:pointer; font-size:.8rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.admin-gi-del:hover { background: #dc323c; }

/* ---------- Превью референс-изображений (мультизагрузка) ---------- */
.ref-preview { display: flex; flex-wrap: wrap; gap: .5rem; }
.ref-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-soft); }
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-remove {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
    border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
    font-size: .7rem; line-height: 1; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}

/* ---------- Промо-баннер акции (+10% к первому пополнению) ---------- */
.promo-banner {
    display: inline-block;
    background: var(--grad-brand-soft);
    border: 1px solid rgba(124, 252, 0, .45);
    border-radius: 12px;
    padding: .6rem 1rem;
    color: var(--text-main);
    font-size: .95rem;
}
html[data-theme="light"] .promo-banner { color: #1a1a2e; }

/* ---------- Cookie: равнозначные кнопки и панель настроек ----------
   Все три варианта выглядят одинаково — «Принять все» не доминирует. */
.btn-cookie {
    background: transparent;
    border: 1px solid var(--c-green);
    color: var(--text-main);
    font-weight: 600;
    border-radius: 10px;
    padding: .35rem .9rem;
    transition: background .18s, color .18s;
}
.btn-cookie:hover { background: rgba(124, 252, 0, .14); color: var(--text-main); }
.cookie-prefs {
    margin-top: .8rem; padding-top: .8rem;
    border-top: 1px solid var(--border-soft);
    display: flex; flex-direction: column; gap: .5rem;
}
.cookie-pref { display: flex; align-items: flex-start; gap: .5rem;
    font-size: .88rem; color: var(--text-muted); cursor: pointer; }
.cookie-pref input { margin-top: .2rem; }

/* Ссылки внутри текстовых блоков подчёркиваем — чтобы отличались не только
   цветом (WCAG 1.4.1 «Использование цвета», axe link-in-text-block). */
a[href^="mailto:"],
.cookie-text a,
.legal-doc a,
.footer-note a,
.section-sub a,
p a:not([class]) { text-decoration: underline; }

/* ---------- Юридические документы ---------- */
.legal-doc h4 { color: var(--text-main); }
.legal-doc p { color: var(--text-muted); line-height: 1.7; margin-bottom: .6rem; }

/* ---------- Калькулятор цены видео (компактная одна строка) ---------- */
.video-price-box {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .35rem .2rem;
}
.video-price-value {
    font-weight: 800; font-size: 1.1rem; line-height: 1.2;
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Результаты генерации ---------- */
.result-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; }
.result-card img, .result-card video { width: 100%; display: block; }
.result-card .rc-body { padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.spinner-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem; color: var(--text-muted); }
.brand-spinner { width: 54px; height: 54px; border-radius: 50%; border: 4px solid rgba(255,255,255,.1); border-top-color: var(--c-green); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Услуги ---------- */
.service-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 2rem; height: 100%; transition: transform .22s, box-shadow .22s, border-color .22s; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: rgba(255,165,0,.4); }
.service-price { font-weight: 800; font-size: 1.4rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Footer ---------- */
.carambola-footer { background: var(--bg-dark-2); border-top: 1px solid var(--border-soft); padding: 3rem 0 1.5rem; margin-top: auto; }
.footer-head { font-weight: 700; font-size: .95rem; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: var(--text-muted); font-size: .92rem; }
.footer-links a:hover { color: var(--c-green); }
.footer-inline-link { color: var(--text-muted); }
.footer-hr { border-color: var(--border-soft); margin: 2rem 0 1.2rem; }
.age-badge { display:inline-block; background:var(--grad-brand-soft); border:1px solid var(--border-soft);
    border-radius:6px; padding:0 .4rem; font-weight:800; color:var(--text-main); margin-right:.2rem; }

/* ---------- Навбар: баланс + кнопка темы ---------- */
.nav-balance {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--grad-brand-soft);
    border: 1px solid var(--border-soft);
    border-radius: 999px; padding: .35rem .9rem;
    font-weight: 700; color: var(--text-main); white-space: nowrap;
}
.nav-balance:hover { color: var(--text-main); border-color: var(--c-green); }
/* Баланс в шапке на мобильных — компактнее, рядом с логотипом */
.nav-balance-mobile { padding: .3rem .7rem; font-size: .9rem; }

/* Кнопка «Пополнить» рядом с балансом. Тёмная тема — фирменный жёлто-салатовый
   градиент; светлая тема — мягкий зелёный градиент (задан ниже). */
.btn-topup {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
    background: var(--grad-brand); color: #1a1a2e !important;
    border: none; border-radius: 10px; padding: .38rem .8rem;
    font-weight: 700; font-size: .86rem; white-space: nowrap; cursor: pointer;
    text-decoration: none; line-height: 1;
    box-shadow: 0 4px 14px rgba(124, 252, 0, .28);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-topup:hover {
    color: #1a1a2e !important; transform: translateY(-1px);
    filter: brightness(1.07); box-shadow: 0 8px 22px rgba(124, 252, 0, .4);
}
.btn-topup:active { transform: translateY(0); }
.btn-topup:focus-visible { outline: 3px solid #ffb000; outline-offset: 2px; }
/* Мобильная версия — компактный кружок «+» */
.btn-topup-mobile {
    width: 38px; height: 38px; border-radius: 10px; padding: 0;
    font-size: 1.25rem; font-weight: 800;
}
/* Светлая тема: мягкий зелёный градиент, тёмный текст остаётся читаемым. */
html[data-theme="light"] .btn-topup {
    background: linear-gradient(135deg, #8bd15a 0%, #5bb349 100%);
    color: #14320a !important; box-shadow: 0 4px 14px rgba(91, 179, 73, .35);
}
html[data-theme="light"] .btn-topup:hover {
    color: #14320a !important; box-shadow: 0 8px 22px rgba(91, 179, 73, .45);
}

/* Аватар в навбаре (ведёт в профиль) */
.nav-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box, var(--grad-brand) border-box;
    overflow: hidden; flex: 0 0 auto; text-decoration: none;
}
.nav-avatar:hover { filter: brightness(1.08); }
.nav-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.nav-avatar-ini { font-weight: 800; font-size: .85rem; color: var(--text-main); }
html[data-theme="light"] .nav-avatar {
    background: var(--bg-card) padding-box, var(--grad-brand) border-box;
}

/* Модальное окно входа — тёмная карточка в стиле сайта */
.login-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    color: var(--text-main);
    box-shadow: var(--shadow-card);
}
.login-modal-content .modal-title { color: var(--text-main); }
html[data-theme="light"] .login-modal-content .btn-close { filter: none; }

/* Кнопка «Выйти» в стилистике «Войти»: аккуратный фон, скругление,
   hover-эффект, без белой прямоугольной рамки. */
.btn-logout {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    font-weight: 600;
    border-radius: 999px;
    padding: .4rem 1.2rem;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-logout:hover {
    background: rgba(255, 107, 129, .15);
    border-color: #ff6b81;
    color: #ff6b81;
    transform: translateY(-1px);
}
html[data-theme="light"] .btn-logout { background: rgba(20, 20, 50, .05); color: var(--text-main); }
.btn-theme {
    background: transparent; border: 1px solid var(--border-soft);
    border-radius: 999px; width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; line-height: 1; transition: transform .2s ease, border-color .2s ease;
}
.btn-theme:hover { transform: scale(1.12); border-color: var(--c-green); }

/* ---------- Заголовки категорий на главной ---------- */
.cat-head { font-weight: 700; color: var(--text-muted); margin-bottom: 1rem; font-size: 1.05rem; }

/* ---------- Карточка модели (кнопка Попробовать/Войти) ---------- */
.model-card { display: flex; flex-direction: column; overflow: hidden; }
.model-card h5 { font-weight: 700; font-size: 1.08rem; margin-bottom: .3rem;
    overflow-wrap: anywhere; word-break: break-word; }
.model-card .price-desc { flex: 1; overflow-wrap: anywhere; }
.model-card .price-value { overflow-wrap: anywhere; word-break: break-word; font-size: 1.15rem; }
/* Кнопки внутри карточки не должны выходить за её границы */
.model-card .btn { max-width: 100%; white-space: normal; }

/* На мобильных карточки моделей компактнее, текст и кнопки корректно переносятся */
@media (max-width: 575px) {
    #models .row { --bs-gutter-x: .6rem; }
    .price-card, .model-card { padding: .8rem; }
    .model-card h5 { font-size: .92rem; margin-bottom: .25rem; }
    .model-card .price-value { font-size: .9rem; margin-bottom: .6rem !important; }
    .model-card .price-desc { font-size: .8rem; margin-bottom: .6rem; }
    /* Кнопка внутри карточки: во всю ширину блока, компактные отступы,
       не выходит за границы (box-sizing + max-width) */
    .model-card .btn {
        width: 100%;
        box-sizing: border-box;
        font-size: .82rem;
        padding: .45rem .5rem;
        white-space: normal;
    }
    .cat-head { font-size: .95rem; }
}

/* ---------- Разделитель «или» в формах входа ---------- */
.auth-divider { display: flex; align-items: center; text-align: center; color: var(--text-muted); font-size: .85rem; margin: 1rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border-soft); }
.auth-divider span { padding: 0 .8rem; }
/* Telegram Login Widget: голубая кнопка с фирменными скруглениями, без рамок.
   Внутреннюю кнопку скругляем через data-radius на самом виджете (см. шаблоны). */
.tg-login-wrap { display: flex; justify-content: center; }
.tg-login-wrap iframe {
    margin: 0 auto !important;
    border: none !important;
    outline: none !important;
    border-radius: 999px !important;
    overflow: hidden;
}
/* Наша собственная голубая кнопка-обёртка «Войти через Telegram» (когда виджет
   ещё не загрузился или используется как визуальная замена). */
.btn-telegram {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%;
    background: #29a9eb;
    color: #fff !important;
    border: none;
    border-radius: 999px;
    padding: .6rem 1.4rem;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(41, 169, 235, .35);
    transition: transform .18s ease, filter .18s ease;
    cursor: pointer;
}
.btn-telegram:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }

/* OAuth-кнопки провайдеров (Яндекс / Mail.ru / VK) */
.oauth-row { display: flex; flex-direction: column; gap: .5rem; }
.btn-oauth {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; border: none; border-radius: 999px; padding: .55rem 1.2rem;
    font-weight: 600; color: #fff !important; cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}
.btn-oauth:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }
.btn-oauth.ya { background: #ff0000; }
.btn-oauth.mail { background: #005ff9; }
.btn-oauth.vk { background: #0077ff; }
.btn-oauth .ob-badge { font-weight: 800; }

/* ===================================================================
   Чат — новый макет: выбор модели сверху, список чатов слева
   =================================================================== */
/* На странице чата убираем скролл всей страницы — экран занимает чат целиком. */
.chat-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 66px);   /* 66px ≈ высота навбара */
    padding-top: .8rem;
    padding-bottom: .8rem;
    overflow: hidden;
}
.chat-topbar {
    flex: 0 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: .8rem 1rem;
    margin-bottom: .6rem;   /* минимальный зазор до окна чата (~10px) */
}
/* Шапка одной строкой: [чаты] [бренд-колонки …скролл] [озвучка+баланс]. */
.chat-topbar-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem;
}
.chat-topbar-row .brand-bar {
    flex: 1 1 auto; min-width: 0; margin-bottom: 0;
    flex-wrap: nowrap; overflow: visible;   /* visible: чтобы меню не обрезалось */
}
.chat-topbar-row .brand-selected { margin-left: .4rem; }
/* Мобильные: колонки горизонтально скроллятся (меню — position:fixed, не режется). */
@media (max-width: 767px) {
    .chat-topbar-row .brand-bar {
        overflow-x: auto; overflow-y: visible;
        -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    }
}
/* Фирменные логотипы на кнопках бренд-колонок. */
.brand-col-ico { width: 18px; height: 18px; flex: 0 0 auto; }
img.brand-col-ico { object-fit: contain; }
.brand-col-emoji { font-size: 1rem; line-height: 1; }
.chat-topbar-right {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .55rem; margin-left: auto;
}
.chat-topbar .model-select { max-width: 340px; }
.chat-topbar .balance-chip {
    background: var(--grad-brand-soft);
    border: 1px solid var(--border-soft);
    border-radius: 999px; padding: .3rem .9rem; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.model-info { margin-top: .6rem; font-size: .86rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.model-info .mi-price { color: var(--c-green); font-weight: 600; }

.chat-shell {
    flex: 1 1 auto;
    min-height: 0;                /* критично: чтобы дочерние элементы могли скроллиться */
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.25rem;
    position: relative;
}
.chat-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 1rem;
    height: 100%;
    overflow-y: auto;
}
.chat-list-item {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    cursor: pointer;
    font-size: .9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: border-color .18s, background .18s;
}
.chat-list-item:hover { border-color: rgba(124,252,0,.4); }
.chat-list-item.active { border-color: var(--c-green); background: var(--grad-brand-soft); }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1040; }
.sidebar-backdrop.show { display: block; }

.chat-main {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    display: flex; flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.chat-messages { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.msg { max-width: 88%; flex: 0 0 auto; min-width: 0; padding: .8rem 1.1rem; border-radius: 18px;
    font-size: .97rem; line-height: 1.5;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; animation: msgIn .25s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.msg.user { align-self: flex-end; background: #14663a; color: #ffffff; border-bottom-right-radius: 6px; font-weight: 500; }
.msg.user ::selection { background: rgba(255,255,255,.45); color: #14663a; }
.msg.user::selection { background: rgba(255,255,255,.45); color: #14663a; }
.msg.assistant { align-self: flex-start; background: var(--bg-card-2); border: 1px solid var(--border-soft); border-bottom-left-radius: 6px; }
.msg .msg-note { display: block; margin-top: .5rem; font-size: .78rem; color: var(--text-muted); border-top: 1px dashed var(--border-soft); padding-top: .4rem; }
.msg .tts-btn { margin-top: .5rem; font-size: .8rem; background: rgba(255,255,255,.06); border: 1px solid var(--border-soft); color: var(--text-muted); border-radius: 8px; padding: .2rem .6rem; cursor: pointer; }
.msg .tts-btn:hover { color: var(--text-main); border-color: var(--c-green); }
.chat-empty { margin: auto; text-align: center; color: var(--text-muted); }
.chat-input-bar { flex: 0 0 auto; border-top: 1px solid var(--border-soft); padding: .8rem; display: flex; gap: .5rem; align-items: flex-end; }
.chat-input-bar textarea {
    flex: 1 1 auto; resize: none; min-height: 90px; max-height: 180px;
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    color: var(--text-main); border-radius: 14px; padding: .7rem 1rem;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; overflow-x: hidden;
}
.chat-input-bar textarea:focus { outline: none; border-color: var(--c-green); }

/* Центрированная колонка сообщений (десктоп ~940px). Боковые отступы растут
   при широком экране; на узком экране отступы минимальны (окно шире на ~20px). */
.chat-messages {
    padding-left: max(.8rem, calc((100% - 940px) / 2));
    padding-right: max(.8rem, calc((100% - 940px) / 2));
}
.chat-input-bar {
    padding-left: max(.5rem, calc((100% - 940px) / 2));
    padding-right: max(.5rem, calc((100% - 940px) / 2));
}
@media (max-width: 767px) {
    .chat-messages { padding-left: 1rem; padding-right: 1rem; }
    .chat-input-bar { padding-left: .55rem; padding-right: .55rem; }
}

/* Нижняя панель действий ответа ассистента (компактные иконки). */
.msg-actions-bottom {
    display: flex; gap: .35rem; margin-top: .6rem;
    padding-top: .5rem; border-top: 1px dashed var(--border-soft);
}
.msg-actions .ma-btn {
    background: rgba(255,255,255,.06); border: 1px solid var(--border-soft);
    color: var(--text-muted); border-radius: 8px; width: 30px; height: 28px;
    cursor: pointer; font-size: .9rem; line-height: 1; transition: border-color .15s, color .15s, background .15s;
}
.msg-actions .ma-btn:hover { color: var(--text-main); border-color: var(--c-green); background: rgba(124,252,0,.1); }

/* ---------- Бренд-селектор моделей (шапка чата) ---------- */
.brand-bar {
    display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
    margin-bottom: .9rem;
}
.brand-col { position: relative; }
.brand-col-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--bg-card); border: 1px solid var(--border-soft);
    color: var(--text-main); font-weight: 600; font-size: .9rem;
    padding: .5rem .9rem; border-radius: 12px; cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}
.brand-col-btn:hover { border-color: var(--c-green); transform: translateY(-1px); }
.brand-col.active .brand-col-btn { border-color: var(--c-green); background: var(--grad-brand-soft); }
.brand-col-btn[aria-expanded="true"] .brand-col-caret { transform: rotate(180deg); }
.brand-col-caret { transition: transform .15s; color: var(--text-muted); }
.brand-menu {
    position: absolute; top: calc(100% + .35rem); left: 0; z-index: 60;
    min-width: 240px; max-height: 60vh; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--border-soft);
    border-radius: 14px; box-shadow: var(--shadow-card); padding: .4rem;
    display: flex; flex-direction: column; gap: .25rem;
}
.brand-menu .assistant-opt {
    padding: .5rem .6rem; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.brand-menu .assistant-opt:hover { background: rgba(124,252,0,.08); }
.brand-menu .assistant-opt.active { background: var(--grad-brand-soft); border-color: var(--c-green); }
.brand-menu .ao-title-row { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; }
.brand-menu .ao-price { color: var(--text-muted); font-size: .76rem; margin-top: .2rem; }
.brand-menu .ao-price.free { color: var(--c-green); }
.brand-selected {
    margin-left: auto; color: var(--text-muted); font-size: .88rem;
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
}
/* Мобильные: бренд-бар горизонтальный скролл */
@media (max-width: 767px) {
    .brand-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .3rem; }
    .brand-col-btn { white-space: nowrap; }
    .brand-selected { display: none; }
    .brand-menu { position: fixed; left: 8px; right: 8px; top: auto; min-width: 0; }
}

/* ---------- Тултипы моделей (название, описание, особенности) ---------- */
.brand-menu { overflow: visible; }          /* чтобы тултип не обрезался */
.brand-menu .assistant-opt { position: relative; }
.assistant-opt .ao-title-row { position: relative; }
.assistant-opt .ao-title { flex: 1 1 auto; }
.ao-info {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
    display: none; align-items: center; justify-content: center;
    background: rgba(124,252,0,.12); border: 1px solid var(--border-soft);
    color: var(--text-muted); font-size: .74rem; cursor: pointer; line-height: 1;
}
.ao-info:hover { color: var(--c-green); border-color: var(--c-green); }
.model-tip {
    position: absolute; z-index: 90; top: calc(100% - .2rem); left: .3rem; right: .3rem;
    background: #14181f; color: #e9eef5;
    border: 1px solid var(--c-green);
    border-radius: 12px; padding: .6rem .7rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    font-size: .8rem; line-height: 1.4;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .14s, transform .14s, visibility .14s;
    pointer-events: none;
}
.model-tip .mt-head { display: flex; align-items: center; gap: .4rem; font-weight: 700; margin-bottom: .3rem; }
.model-tip .mt-head .model-ico { width: 18px; height: 18px; }
.model-tip .mt-title { font-size: .86rem; }
.model-tip .mt-desc { color: #c4cdd8; margin-bottom: .4rem; }
.model-tip .mt-feats { display: flex; flex-wrap: wrap; gap: .3rem; }
.model-tip .mt-feat {
    background: rgba(124,252,0,.12); border: 1px solid rgba(124,252,0,.35);
    color: #d7ffb0; border-radius: 8px; padding: .12rem .45rem; font-size: .72rem;
}
.model-tip .mt-feat.mt-price { background: rgba(255,255,255,.06); border-color: var(--border-soft); color: #cfd6df; }
.model-tip .mt-feat.mt-free { background: rgba(124,252,0,.2); color: #eaffce; }
/* Форсированный показ (например, тап ⓘ) — на любой ширине. */
.assistant-opt.tip-open .model-tip { opacity: 1; visibility: visible; transform: translateY(0); }
/* Десктоп: тултип по наведению на пункт. */
@media (min-width: 768px) and (hover: hover) {
    .assistant-opt:hover .model-tip { opacity: 1; visibility: visible; transform: translateY(0); }
}
/* Мобайл: ⓘ виден, тап открывает тултип (класс tip-open ставит JS). */
@media (max-width: 767px) {
    .ao-info { display: inline-flex; }
    .assistant-opt.tip-open .model-tip { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ---------- Компактные чипы моделей (image/video) ---------- */
.model-cards-compact { display: flex; flex-wrap: wrap; gap: .5rem; }
.model-chip {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: .5rem .8rem;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    flex: 1 1 auto; min-width: 130px;
}
.model-chip:hover { border-color: rgba(124,252,0,.4); }
.model-chip.active { border-color: var(--c-green); background: var(--grad-brand-soft); }
.model-chip .mc-title { font-weight: 600; font-size: .9rem; }
.model-chip .mc-price { color: var(--text-muted); font-size: .78rem; margin-top: .15rem; }
.model-chip .mc-price.free { color: var(--c-green); }

/* ---------- 3D-карточки выбора модели (image/video) ---------- */
.model-cards-3d {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .6rem;
    /* Каталог не должен занимать весь первый экран — ограничиваем высоту,
       чтобы промпт и параметры были доступны без долгой прокрутки. */
    max-height: 274px;
    overflow-y: auto;
    padding: .1rem .2rem;
    scrollbar-width: thin;
}
.model-chip-3d {
    background: var(--bg-card-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: .75rem .9rem;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.model-chip-3d:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
}
.model-chip-3d.active {
    border-color: var(--accent);
    background: var(--grad-brand-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.model-chip-3d .mc-title { font-weight: 700; font-size: .94rem; }
.model-chip-3d .mc-price { color: var(--text-muted); font-weight: 600; font-size: .82rem; margin-top: .2rem; }
.model-chip-3d .mc-price.free { color: var(--accent); }
.model-chip-3d .mc-desc { color: var(--text-muted); font-size: .78rem; margin-top: .4rem; line-height: 1.35; }
.model-chip-3d:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Полоса карточек выбора модели в чате (горизонтальная прокрутка) ---------- */
.model-cards-strip {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: .7rem;
    overflow-x: auto;
    padding: .35rem .2rem .6rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.model-cards-strip .model-chip-3d {
    flex: 0 0 auto;
    width: 210px;
    min-width: 190px;
}
.model-cards-strip::-webkit-scrollbar { height: 7px; }
.model-cards-strip::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; }

.rc-actions { flex-wrap: wrap; }

/* ---------- Красивая кнопка загрузки изображения ---------- */
.upload-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .25rem; width: 100%;
    background: var(--bg-card-2);
    border: 1.5px dashed var(--border-soft);
    border-radius: 14px;
    padding: 1.1rem 1rem;
    color: var(--text-main);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    transition: transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s ease, border-color .2s, background .2s;
}
.upload-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: var(--c-green);
    background: var(--grad-brand-soft);
    box-shadow: 0 16px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(124,252,0,.25);
}
.upload-card.has-file { border-style: solid; border-color: var(--c-green); }
.upload-card .uc-icon { font-size: 1.7rem; line-height: 1; }
.upload-card .uc-text { font-weight: 700; font-size: .98rem; }
.upload-card .uc-hint { color: var(--text-muted); font-size: .78rem; }

/* ---------- Красивая 3D-кнопка «Добавить изображение» (страница /image) ---------- */
.upload-btn-3d {
    position: relative;
    -webkit-appearance: none; appearance: none;   /* сброс дефолтного вида кнопки на мобильных */
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: .9rem 1.2rem;
    font-weight: 700; font-size: 1rem;
    color: #1a1a2e !important;
    background: var(--grad-brand) !important;
    background-size: 200% 200%;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(255,165,0,.28), 0 2px 0 rgba(0,0,0,.25);
    transform: translateY(0);
    transition: transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s ease, filter .18s ease;
    animation: uploadGrad 6s ease infinite;
    -webkit-tap-highlight-color: transparent;
}
.upload-btn-3d .ub-icon, .upload-btn-3d .ub-text { color: #1a1a2e; }
@keyframes uploadGrad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.upload-btn-3d:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 34px rgba(124,252,0,.4), 0 2px 0 rgba(0,0,0,.25);
    filter: brightness(1.05);
}
.upload-btn-3d:active { transform: translateY(-1px) scale(.99); box-shadow: 0 6px 16px rgba(255,165,0,.3); }
.upload-btn-3d .ub-icon { font-size: 1.35rem; line-height: 1; }
.upload-btn-3d .ub-text { position: relative; z-index: 1; }
/* Блик, пробегающий по кнопке */
.upload-btn-3d .ub-glow {
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg);
    animation: ubGlow 3.2s ease-in-out infinite;
}
@keyframes ubGlow { 0% { left: -60%; } 55%,100% { left: 130%; } }
.upload-btn-3d.has-file { background: linear-gradient(135deg, #7CFC00, #37c400) !important; }

/* Превью прикреплённого/референс-изображения (image + chat) */
.attach-preview { display: none; align-items: center; gap: .6rem;
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    border-radius: 12px; padding: .5rem .7rem; }
.attach-preview.show { display: flex; }
.attach-preview img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }
.attach-preview .ap-name { flex: 1; font-size: .82rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-preview .ap-remove { background: none; border: none; color: #ff6b81;
    cursor: pointer; font-size: 1.1rem; line-height: 1; }

/* ---------- Галерея ---------- */
/* Десктоп: 6 изображений в ряд; планшет: 3–4; мобильные: 2 (см. медиазапросы). */
/* Сетка галереи в стиле utopy.ai: адаптивное число колонок (auto-fill),
   строки заполняются автоматически, квадратные карточки. */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .9rem;
}
.gallery-item {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    position: relative;
    aspect-ratio: 1;          /* квадратная карточка 1:1 */
    cursor: pointer;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
/* Медиа заполняет карточку и кадрируется по центру (object-fit: cover). */
.gallery-item img,
.gallery-item video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    opacity: 0; transition: opacity .35s ease;   /* плавная загрузка, как на utopy */
}
.gallery-item img.loaded,
.gallery-item video.loaded { opacity: 1; }
/* Битое/недоступное изображение — показываем нейтральный плейсхолдер вместо
   тёмного «чёрного квадрата». */
.gallery-item img.gi-broken {
    opacity: 1;
    object-fit: contain;
    background: repeating-linear-gradient(45deg, #2a2a4a, #2a2a4a 10px, #23233f 10px, #23233f 20px);
}
/* Оверлей с подписью и автором — проявляется при наведении/фокусе. */
.gi-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: .15rem; padding: .55rem .65rem;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 58%);
    opacity: 0; transition: opacity .2s ease;
    pointer-events: none;
}
.gallery-item:hover .gi-overlay,
.gallery-item:focus-visible .gi-overlay { opacity: 1; }
.gi-caption { font-size: .8rem; color: #fff; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
/* Значок типа медиа (видео) в углу карточки. */
.gi-badge {
    position: absolute; top: .5rem; right: .5rem; z-index: 2;
    background: rgba(0,0,0,.6); color: #fff; border-radius: 999px;
    padding: .08rem .5rem; font-size: .72rem; pointer-events: none;
}
@media (max-width: 575px) {
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
}

/* ---------- Таблица цен на AI-модели (в подвале каждой страницы) ---------- */
.price-table-section { background: var(--bg-dark-2); border-top: 1px solid var(--border-soft); padding: 2.5rem 0; }
.price-table-title { font-weight: 800; text-align: center; margin-bottom: 1.4rem; }
/* Обёртка таблицы: тёмный градиент + жёлтый акцент, скруглённые углы */
.price-table-section .table-responsive {
    max-width: 820px;
    margin: 0 auto;
    background: linear-gradient(160deg, rgba(26,26,46,.96) 0%, rgba(35,35,63,.9) 100%);
    border: 1px solid rgba(255, 215, 0, .28);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.02);
    overflow: hidden;
}
/* Переопределяем переменные Bootstrap-таблицы: иначе текст рендерится тёмным
   (--bs-table-color по умолчанию ≈ #212529) и не читается на тёмном фоне. */
.price-table {
    max-width: 100%; margin: 0; background: transparent;
    --bs-table-color: #e0e0e0;
    --bs-table-bg: transparent;
    color: #e0e0e0;
}
.price-table td, .price-table th { padding: .7rem 1rem; background: transparent; color: #e0e0e0; }
.price-table tbody td { color: #e0e0e0; }
/* Светлая тема: тёмный текст на светлом фоне */
html[data-theme="light"] .price-table { --bs-table-color: #1a1a2e; color: #1a1a2e; }
html[data-theme="light"] .price-table td,
html[data-theme="light"] .price-table th,
html[data-theme="light"] .price-table tbody td { color: #1a1a2e; }
/* Шапка с акцентной подложкой */
.price-table thead th {
    background: rgba(255, 215, 0, .10);
    color: var(--c-yellow);
    border-bottom: 1px solid rgba(255, 215, 0, .25);
}
.price-table tbody tr { transition: background .18s ease; }
.price-table tbody tr:hover { background: rgba(255, 215, 0, .06); }
.price-table tbody td { border-color: rgba(255,255,255,.06); }
/* Светлая тема — читаемый вариант */
html[data-theme="light"] .price-table-section .table-responsive {
    background: var(--bg-card);
    border-color: rgba(255, 165, 0, .35);
}
html[data-theme="light"] .price-table thead th { color: #b8860b; background: rgba(255, 215, 0, .14); }

/* Мобильная аккуратность таблицы цен */
@media (max-width: 575px) {
    .price-table-section { padding: 1.8rem 0; }
    /* Не запрещаем перенос — иначе широкая таблица обрезается и углы выглядят
       прямыми; при overflow:hidden скруглённая обёртка сохраняет форму. */
    .price-table td, .price-table th { padding: .45rem .5rem; font-size: .74rem; }
    .price-table .cat-pill { font-size: .64rem; padding: .12rem .4rem; margin-bottom: 0; }
    .price-table-section .table-responsive {
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    .price-table { border-radius: 12px; overflow: hidden; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 991px) {
    /* На мобильных sidebar скрыт в бургер-меню, центр+ввод занимают весь экран. */
    .chat-shell { grid-template-columns: 1fr; }
    .chat-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 1050;
        height: 100%; max-height: none; border-radius: 0;
        transform: translateX(-105%); transition: transform .25s ease;
    }
    .chat-sidebar.open { transform: translateX(0); }
    .chat-main { height: 100%; }
    .model-cards-strip .model-chip-3d { width: 170px; min-width: 160px; }
    .hero { min-height: auto; }
}
@media (min-width: 992px) {
    #sidebar-toggle { display: none; }
}
@media (max-width: 575px) {
    .section { padding: 3.2rem 0; }
    .msg { max-width: 88%; }
}

/* ===================================================================
   Подзаголовки страниц (яркость зависит от темы)
   =================================================================== */
.page-subtitle { color: #e0e0e0; margin-bottom: 0; }
html[data-theme="light"] .page-subtitle { color: #1a1a2e; }

/* ===================================================================
   Личный кабинет: аватар и квадраты статистики
   =================================================================== */
.avatar-wrap { flex: 0 0 auto; }
.avatar-img, .avatar-initials {
    width: 76px; height: 76px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, var(--grad-brand) border-box;
}
.avatar-initials {
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.7rem; color: var(--text-main);
    background: var(--grad-brand-soft);
}
.stat-square {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 1.1rem .7rem;
    text-align: center;
    height: 100%;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.stat-square:hover { transform: translateY(-4px); border-color: rgba(124,252,0,.4); box-shadow: var(--shadow-card); }
.stat-square .stat-num {
    font-weight: 900; font-size: 1.8rem; line-height: 1.1;
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-square .stat-label { color: var(--text-muted); font-size: .82rem; margin-top: .3rem; }

/* Личный кабинет: одна колонка, компактно */
.account-col { max-width: 720px; }
.min-w-0 { min-width: 0; }
/* Якоря (#profile/#topup) не должны прятаться под липкий навбар */
#profile, #topup { scroll-margin-top: 84px; }

/* ===================================================================
   Галерея: подпись автора + lightbox
   =================================================================== */
.gi-author { font-size: .72rem; color: var(--c-green); }

.lightbox {
    position: fixed; inset: 0; z-index: 1100; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(6,6,16,.86); backdrop-filter: blur(6px);
}
.lightbox.show { display: flex; }
.lb-content {
    display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.9fr);
    gap: 0; max-width: 1000px; width: 100%; max-height: 90vh;
    background: var(--bg-card); border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
}
.lb-imgwrap { background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-imgwrap img { width: 100%; height: 100%; max-height: 90vh; object-fit: contain; display: block; }
.lb-info { padding: 1.5rem; overflow-y: auto; }
.lb-info h5 { font-weight: 700; margin-bottom: 1rem; }
.lb-row { margin-bottom: .9rem; }
.lb-row .lb-k { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.lb-row .lb-v { color: var(--text-main); font-size: .95rem; word-break: break-word; }
.lb-close {
    position: absolute; top: 16px; right: 20px; z-index: 1101;
    background: rgba(255,255,255,.1); border: 1px solid var(--border-soft); color: #fff;
    width: 42px; height: 42px; border-radius: 50%; font-size: 1.3rem; cursor: pointer;
}
.lb-close:hover { background: rgba(255,107,129,.3); }
@media (max-width: 767px) {
    .lb-content { grid-template-columns: 1fr; max-height: 92vh; }
    .lb-imgwrap img { max-height: 45vh; }
}

/* ===================================================================
   Чат: выбор ассистента, список чатов, кнопки копирования/сохранения
   =================================================================== */
.assistant-picker { position: relative; }
.assistant-picker-btn {
    width: 100%; text-align: left;
    background: var(--grad-brand-soft); border: 1px solid var(--border-soft);
    border-radius: 12px; padding: .6rem .8rem; color: var(--text-main);
    font-weight: 700; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; gap: .5rem; transition: border-color .18s;
}
.assistant-picker-btn:hover { border-color: var(--c-green); }
.assistant-picker-btn .ap-caret { transition: transform .2s; }
.assistant-picker.open .assistant-picker-btn .ap-caret { transform: rotate(180deg); }
.assistant-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    border-radius: 12px; box-shadow: var(--shadow-card); max-height: 340px; overflow-y: auto; padding: .35rem;
}
.assistant-picker.open .assistant-menu { display: block; }
.assistant-opt {
    padding: .5rem .6rem; border-radius: 9px; cursor: pointer; transition: background .15s;
}
.assistant-opt:hover, .assistant-opt.active { background: var(--grad-brand-soft); }
.assistant-opt .ao-title { font-weight: 600; font-size: .9rem; }
.assistant-opt .ao-price { color: var(--text-muted); font-size: .76rem; }
.assistant-opt .ao-price.free { color: var(--c-green); }

.chat-list-head {
    color: var(--text-muted); text-transform: uppercase; font-size: .72rem;
    letter-spacing: .08em; font-weight: 600; margin: 1rem 0 .5rem;
}
.chat-list { display: flex; flex-direction: column; gap: .4rem; }
.chat-list-row {
    display: flex; align-items: center; gap: .3rem;
    border: 1px solid var(--border-soft); border-radius: 10px; padding: .45rem .6rem;
    cursor: pointer; transition: border-color .18s, background .18s;
}
.chat-list-row:hover { border-color: rgba(124,252,0,.4); }
.chat-list-row.active { border-color: var(--c-green); background: var(--grad-brand-soft); }
.chat-list-row .cl-title {
    flex: 1; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: none; border: none; color: var(--text-main); padding: 0; cursor: pointer;
}
.chat-list-row .cl-title:focus { outline: 1px solid var(--c-green); border-radius: 4px; }
.chat-list-row .cl-edit, .chat-list-row .cl-del {
    background: none; border: none; cursor: pointer;
    font-size: .82rem; opacity: .7; padding: 0 .15rem; line-height: 1;
}
.chat-list-row .cl-edit:hover { opacity: 1; }
.chat-list-row .cl-del:hover { opacity: 1; }

/* Иконки действий в ШАПКЕ ответа ассистента (сверху справа) */
.msg-actions { display: flex; gap: .3rem; }
.msg-actions-top {
    justify-content: flex-end;
    margin: -.2rem -.2rem .35rem 0;   /* прижать к верхнему краю, не наезжая на текст */
}
.msg-actions .ma-btn {
    background: rgba(255,255,255,.06); border: 1px solid var(--border-soft);
    color: var(--text-muted); border-radius: 7px;
    width: 26px; height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 15px; line-height: 1; transition: all .15s;
}
.msg-actions .ma-btn:hover { color: var(--text-main); border-color: var(--c-green); background: rgba(124,252,0,.12); }
.msg .msg-body { display: block; }

/* Селектор голоса озвучки в шапке чата */
.tts-voice-wrap { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }
.tts-voice-ico { font-size: 1rem; }
.tts-voice-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    color: var(--text-main); font-size: .8rem; font-weight: 600; cursor: pointer;
    max-width: 140px;
    /* Градиентный фон + мягкая тень + кастомная стрелка (SVG background). */
    background-color: var(--bg-card-2);
    background-image:
        linear-gradient(135deg, rgba(124,252,0,.16), rgba(80,200,120,.05)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237CFC00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right .7rem center;
    background-size: cover, 11px 8px;
    border: 1px solid var(--border-soft); border-radius: 999px;
    padding: .32rem 1.8rem .32rem .8rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.tts-voice-select:hover { border-color: var(--c-green); transform: translateY(-1px); }
.tts-voice-select:focus { outline: none; border-color: var(--c-green);
    box-shadow: 0 0 0 3px rgba(124,252,0,.18); }
.tts-voice-select option { background: var(--bg-card); color: var(--text-main); font-weight: 500; }
/* Светлая тема: тот же вид, чуть плотнее фон и тень. */
html[data-theme="light"] .tts-voice-select {
    background-color: #ffffff;
    background-image:
        linear-gradient(135deg, rgba(20,150,60,.14), rgba(20,150,60,.03)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314963c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    box-shadow: 0 2px 8px rgba(20,80,40,.12), inset 0 1px 0 rgba(255,255,255,.7);
}
@media (max-width: 480px) {
    .tts-voice-ico { display: none; }
    .tts-voice-select { max-width: 104px; font-size: .74rem; padding: .22rem 1.3rem .22rem .45rem; }
}

/* ---------- Кастомный селектор озвучки (фирменный вид, обе темы) ---------- */
.voice-dd { position: relative; }
.voice-dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.voice-dd-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--text-main); font-weight: 600; font-size: .82rem; cursor: pointer;
    background-color: var(--bg-card-2);
    background-image: linear-gradient(135deg, rgba(124,252,0,.16), rgba(80,200,120,.05));
    border: 1px solid var(--border-soft); border-radius: 999px;
    padding: .34rem .75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.voice-dd-btn:hover { border-color: var(--c-green); transform: translateY(-1px); }
.voice-dd-btn:focus-visible { outline: none; border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(124,252,0,.18); }
.voice-dd-btn[aria-expanded="true"] .voice-dd-caret { transform: rotate(180deg); }
.voice-dd-caret { color: var(--c-green); transition: transform .15s; font-size: .72rem; }
.voice-dd-label { white-space: nowrap; }
.voice-dd-menu {
    position: absolute; top: calc(100% + .35rem); right: 0; z-index: 80;
    min-width: 168px; background: var(--bg-card); border: 1px solid var(--border-soft);
    border-radius: 14px; box-shadow: var(--shadow-card); padding: .35rem;
    display: flex; flex-direction: column; gap: .15rem;
}
.voice-opt {
    padding: .42rem .6rem; border-radius: 9px; cursor: pointer; font-size: .85rem;
    border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.voice-opt:hover { background: rgba(124,252,0,.1); }
.voice-opt.active { background: var(--grad-brand-soft); border-color: var(--c-green); }
html[data-theme="light"] .voice-dd-btn {
    background-color: #ffffff;
    background-image: linear-gradient(135deg, rgba(20,150,60,.14), rgba(20,150,60,.03));
    box-shadow: 0 2px 8px rgba(20,80,40,.12), inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-theme="light"] .voice-dd-caret { color: #14963c; }
@media (max-width: 480px) { .voice-dd-label { max-width: 84px; overflow: hidden; text-overflow: ellipsis; } }

/* ===================================================================
   Ширина сайта: контейнеры шире (до 1560px), чат/изображения/видео —
   на всю ширину экрана.
   =================================================================== */
@media (min-width: 1400px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1560px;
    }
}
.container.chat-page { max-width: 100%; }
body.page-wide .container { max-width: 100%; padding-left: 1.4rem; padding-right: 1.4rem; }

/* ===================================================================
   Блоки кода в ответах ассистента (тёмный фон + кнопка «Копировать код»)
   =================================================================== */
.code-block {
    position: relative;
    background: #0d1117;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    margin: .6rem 0;
    overflow: hidden;
}
.code-block .code-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .3rem .6rem; background: rgba(255,255,255,.05);
    font-size: .72rem; color: #b6c2cf; border-bottom: 1px solid rgba(255,255,255,.08);
}
.code-block .code-lang { text-transform: uppercase; letter-spacing: .05em; }
.code-block .code-copy {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    color: #e6edf3; border-radius: 6px; padding: .12rem .5rem; font-size: .72rem; cursor: pointer;
}
.code-block .code-copy:hover { background: rgba(124,252,0,.18); border-color: var(--c-green); }
.code-block pre {
    margin: 0; padding: .7rem .8rem; overflow-x: auto;
    color: #e6edf3; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .84rem; line-height: 1.45;
}
.code-block pre code { white-space: pre; }
.msg .msg-inline-code {
    background: rgba(255,255,255,.10); border-radius: 4px; padding: .05rem .3rem;
    font-family: Consolas, monospace; font-size: .88em;
}

/* ===================================================================
   Мобильный чат: шире контент, сообщения почти во всю ширину
   =================================================================== */
@media (max-width: 767px) {
    .chat-page { padding-left: .3rem; padding-right: .3rem; }
    .chat-messages { padding: .7rem .5rem; gap: .7rem; }
    .msg { max-width: 96%; font-size: .95rem; }
    .chat-topbar { padding: .55rem .6rem; }
}
@media (max-width: 575px) {
    .chat-messages { padding: .6rem .35rem; }
    .msg { max-width: 98%; padding: .7rem .85rem; }
}

/* Плавное появление контента (ощущение «приложения», принципы utopy.ai) */
@media (prefers-reduced-motion: no-preference) {
    main { animation: pageFade .28s ease-out; }
}
@keyframes pageFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Переключатель темы: две иконки-кружочка ---------- */
.theme-switch { display: inline-flex; gap: .35rem; align-items: center; }
.theme-dot {
    width: 34px; height: 34px; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); border: 1px solid var(--border-soft);
    font-size: 1rem; line-height: 1; cursor: pointer; opacity: .55;
    transition: transform .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.theme-dot:hover { transform: scale(1.1); opacity: .9; }
.theme-dot.active {
    opacity: 1; border-color: var(--c-green);
    box-shadow: 0 0 0 2px rgba(124,252,0,.35);
    background: var(--grad-brand-soft);
}
html[data-theme="light"] .theme-dot { background: rgba(40,60,20,.06); }

/* ============================================================= *
 *  Дополнения: раздел «Звук», OAuth-ссылки, доступность (ГОСТ)  *
 * ============================================================= */

/* OAuth-кнопки теперь ссылки (<a>) — убираем подчёркивание. */
.btn-oauth { text-decoration: none; }
.btn-oauth:hover { text-decoration: none; }

/* Бейдж «Скоро» в разделе «Звук». */
.badge-soon {
    display: inline-block; font-size: .72rem; font-weight: 700;
    padding: .18rem .6rem; border-radius: 999px;
    background: var(--grad-brand-soft, rgba(255,215,0,.18));
    color: var(--text-main); border: 1px solid var(--border-soft);
    white-space: nowrap;
}

/* Аудио-превью (наложение звука на видео) — как attach-preview, но без картинки. */
#audio-preview.show { display: flex; }

/* ---------- Доступность: ссылка «Перейти к содержимому» ---------- */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--c-green, #7CFC00); color: #1a1a2e;
    padding: .6rem 1rem; border-radius: 0 0 8px 0; font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Доступность: видимый фокус для клавиатурной навигации ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-oauth:focus-visible,
.model-chip:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.theme-dot:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffb000 !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] .btn:focus-visible,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] select:focus-visible,
html[data-theme="light"] textarea:focus-visible {
    outline-color: #b34700 !important;
}

/* ---------- Доступность: контраст bootstrap-класса .text-secondary ----------
   По умолчанию Bootstrap даёт #6c757d (~3.2–3.6:1 — ниже нормы 4.5:1).
   Привязываем к теме: --text-muted даёт 5.6:1 (светлая) и 6.6:1 (тёмная). */
.text-secondary { color: var(--text-muted) !important; }

/* ---------- Светлая тема: не допускаем тёмно-серых кнопок с нечитаемым текстом ---------- */
/* Bootstrap-кнопки и любые hover/active, где фон уходил в тёмный, оставляем
   тёмный текст на светлом фоне. */
html[data-theme="light"] .btn-brand:hover,
html[data-theme="light"] .btn-brand:active,
html[data-theme="light"] .btn-brand-outline:hover,
html[data-theme="light"] .btn-brand-outline:active {
    color: #1a1a2e !important;
}
html[data-theme="light"] .btn-logout:hover {
    background: rgba(20,20,50,.12);
    color: var(--text-main) !important;
}
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link:focus {
    color: #1a1a2e !important;
    background: rgba(40,60,20,.10);
}
/* Выпадающие списки: тёмный текст на светлом фоне в светлой теме. */
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select option {
    color: var(--text-main);
    background-color: var(--bg-card-2);
}

/* ============================================================= *
 *  Светлая тема: читаемость карточек и «стеклянных» панелей      *
 *  (исправляет тёмные glass-card и нечитаемый зелёный текст)     *
 * ============================================================= */

/* Главная причина «тёмно-серых» блоков в светлой теме: .glass-card
   был жёстко тёмным (rgba(35,35,63,.72)). В светлой теме делаем его
   светлым, чтобы тёмный текст оставался читаемым. */
html[data-theme="light"] .glass-card {
    background: var(--bg-card);
    border-color: var(--border-soft);
}
html[data-theme="light"] .bg-panel { background: var(--bg-dark-2); }

/* Зелёный «Бесплатно»/цена на светло-зелёном фоне почти не виден —
   берём насыщенный тёмно-зелёный (контраст ≥5:1). */
html[data-theme="light"] .price-value.free,
html[data-theme="light"] .mc-price.free,
html[data-theme="light"] .ao-price.free,
html[data-theme="light"] .price-card .price-badge,
html[data-theme="light"] .price-value {
    color: #1f5c00 !important;
    -webkit-text-fill-color: #1f5c00 !important;
    background: none !important;
}

/* Полупрозрачные «пилюли»/чипы на светлом фоне — тёмная подложка вместо
   белой (которая исчезала). */
html[data-theme="light"] .cat-pill,
html[data-theme="light"] .balance-chip,
html[data-theme="light"] .model-item .m-price,
html[data-theme="light"] .msg .tts-btn {
    background: rgba(40, 60, 20, .10);
    color: var(--text-main);
}
html[data-theme="light"] .model-chip .mc-price.free { color: #1f5c00; }
/* Оранжевая цена на 3D-чипах (#FFA500) на светлом фоне нечитаема — тёмно-оранжевый. */
html[data-theme="light"] .model-chip-3d .mc-price { color: #7a4300; }
html[data-theme="light"] .model-chip-3d .mc-price.free { color: #1f5c00; }

/* Таблица цен: границы строк видимее на светлом фоне. */
html[data-theme="light"] .price-table tbody td { border-color: rgba(40,60,20,.14); }

/* Ссылки и зелёные подписи в СВЕТЛОЙ теме: ярко-зелёный #7CFC00 на светлом
   фоне нечитаем (~1:1). Берём насыщенный тёмно-зелёный (≥5:1). Кнопки со
   своими классами (.btn*, .btn-oauth) не затрагиваются — у них свой цвет. */
html[data-theme="light"] a { color: #1f5c00; }
html[data-theme="light"] a:hover { color: #b34700; }
/* Автор в галерее всегда на тёмном оверлее — держим яркий салатовый в обеих темах. */
html[data-theme="light"] .gi-author { color: var(--c-green); }
html[data-theme="light"] .footer-links a:hover { color: #b34700; }

/* ============================================================= *
 *  Иконки нейросетей (логотипы провайдеров) на карточках моделей *
 * ============================================================= */
.model-ico {
    display: inline-block; vertical-align: middle; flex: 0 0 auto;
    object-fit: contain;
}
/* Монохромные логотипы: красим маской в цвет текста (контраст в обеих темах). */
.model-ico-mono {
    background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
}
/* Ряд «иконка + заголовок» в карточках моделей. */
.mc-title-row, .ao-title-row { display: flex; align-items: center; gap: .5rem; }
.mc-title-row .model-ico, .ao-title-row .model-ico { width: 20px; height: 20px; }

/* ============================================================= *
 *  Страница «Цены» (/pricing)                                    *
 * ============================================================= */
.pricing-block { margin-bottom: 2.6rem; }
.pricing-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pricing-card {
    background: var(--bg-card); border: 1px solid var(--border-soft);
    border-radius: var(--radius-md); padding: 1.2rem 1.3rem;
    display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pricing-card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-card);
    border-color: rgba(124, 252, 0, .35);
}
html[data-theme="light"] .pricing-card { background: var(--bg-card); }
.pc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.pc-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
    background: var(--grad-brand-soft); border: 1px solid var(--border-soft); }
.pc-ico .model-ico { width: 24px; height: 24px; }
.pc-title { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.pc-desc { color: var(--text-muted); font-size: .9rem; flex: 1; margin-bottom: .9rem; }
.pc-foot { margin-top: auto; }
.pc-price-io { display: flex; flex-direction: column; gap: .25rem; }
.pc-io { font-weight: 700; font-size: .92rem; color: var(--text-main); }
.pc-io-k {
    display: inline-block; min-width: 52px; font-weight: 600; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.pc-ctx { margin-top: .35rem; font-size: .78rem; color: var(--text-muted); }
.pc-price { font-weight: 800; font-size: 1.15rem;
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; }
.pc-price.free { color: var(--c-green); -webkit-text-fill-color: var(--c-green); background: none; }
html[data-theme="light"] .pc-price { color: #1f5c00 !important; -webkit-text-fill-color: #1f5c00 !important; background: none !important; }
html[data-theme="light"] .pc-price.free { color: #1f5c00 !important; -webkit-text-fill-color: #1f5c00 !important; }
@media (max-width: 480px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   Доступность: единый keyboard-focus и prefers-reduced-motion
   =================================================================== */
:focus-visible {
    outline: 2px solid transparent;   /* видимый через box-shadow-кольцо ниже */
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}
/* Выбор/ошибки — не только цветом (ГОСТ/WCAG 1.4.1). */
.is-invalid, .field-error { outline: 2px solid var(--error); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .hero-orb { animation: none; }
}

/* ---------- Markdown в ответах ассистента ---------- */
.msg .md { display: block; }
.msg .md > :first-child { margin-top: 0; }
.msg .md > :last-child { margin-bottom: 0; }
.msg .md p { margin: 0 0 .6rem; }
.msg .md h1, .msg .md h2, .msg .md h3, .msg .md h4 {
    margin: .9rem 0 .5rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em;
}
.msg .md h1 { font-size: 1.3rem; }
.msg .md h2 { font-size: 1.16rem; }
.msg .md h3 { font-size: 1.05rem; }
.msg .md h4 { font-size: .98rem; }
.msg .md ul, .msg .md ol { margin: .3rem 0 .7rem; padding-left: 1.35rem; }
.msg .md li { margin: .2rem 0; }
.msg .md a { color: var(--link); text-decoration: underline; }
.msg .md blockquote {
    margin: .5rem 0; padding: .3rem .8rem; border-left: 3px solid var(--accent);
    color: var(--text-muted); background: var(--grad-brand-soft); border-radius: 6px;
}
.msg .md hr { border: none; border-top: 1px solid var(--border-soft); margin: .8rem 0; }
.msg .md table {
    border-collapse: collapse; width: 100%; margin: .5rem 0; font-size: .9rem; display: block; overflow-x: auto;
}
.msg .md th, .msg .md td { border: 1px solid var(--border-soft); padding: .35rem .55rem; text-align: left; }
.msg .md th { background: var(--bg-card-2); font-weight: 600; }
.msg .md code:not(pre code) {
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    border-radius: 6px; padding: .05rem .35rem; font-size: .88em;
}

/* Промо-бонус на главной — второстепенно (тише основного CTA). */
.promo-note { font-size: .85rem; color: var(--text-muted); }
.promo-note strong { color: var(--accent); }
html[data-theme="light"] .promo-note strong { color: #2E5F1B; }