/* ═══════════════════════════════════════════════════════════════════════
   MegaAPI Studio — модалка «Настройки» (chat-first, стиль Claude-settings).
   Двухпанельное всплывающее окно поверх чата: слева рейл-навигация, справа
   контент выбранной вкладки. Заменяет старый громоздкий дашборд /account —
   весь функционал перенесён сюда, бэкенд тот же. Тёмно-неон MegaAPI + светлая.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Оверлей + диалог ─── */
.cs-set-overlay{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;
    padding:24px;background:rgba(4,6,14,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    opacity:0;transition:opacity .18s ease}
.cs-set-overlay.is-open{opacity:1}
.cs-set-overlay[hidden]{display:none}
.cs-set-modal{display:flex;width:min(1000px,95vw);height:min(86vh,760px);
    background:var(--bg-2);border:1px solid var(--panel-border);border-radius:var(--radius-md,16px);
    box-shadow:var(--shadow-xl,0 32px 90px rgba(2,6,20,.6));overflow:hidden;
    transform:translateY(10px) scale(.99);transition:transform .2s ease}
.cs-set-overlay.is-open .cs-set-modal{transform:none}
html.light .cs-set-modal{background:#f7f9ff;border-color:rgba(26,92,200,.16)}
html.light .cs-set-overlay{background:rgba(20,32,60,.34)}

/* ─── Левый рейл ─── */
.cs-set-nav{flex:0 0 234px;display:flex;flex-direction:column;gap:2px;padding:18px 12px;overflow-y:auto;
    border-right:1px solid var(--panel-border);background:rgba(255,255,255,.012)}
html.light .cs-set-nav{background:rgba(26,92,200,.025);border-right-color:rgba(26,92,200,.12)}
.cs-set-nav__title{font:700 11.5px/1 inherit;letter-spacing:.09em;text-transform:uppercase;
    color:var(--text-faint);padding:6px 12px 12px}
.cs-set-navitem{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;
    background:transparent;color:var(--text-muted);border-radius:10px;cursor:pointer;
    font:550 14px/1.15 inherit;text-align:left;transition:background .14s,color .14s}
.cs-set-navitem svg{width:18px;height:18px;flex:0 0 auto}
.cs-set-navitem:hover{background:var(--neon-soft);color:var(--text)}
.cs-set-navitem.is-active{background:var(--neon-soft);color:var(--text);font-weight:650}
.cs-set-navitem.is-active svg{color:var(--neon)}

/* ─── Правая часть ─── */
.cs-set-main{flex:1;min-width:0;display:flex;flex-direction:column}
.cs-set-head{display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--panel-border)}
html.light .cs-set-head{border-bottom-color:rgba(26,92,200,.12)}
.cs-set-head h2{margin:0;font:700 18px/1.2 var(--display,inherit);color:var(--text)}
.cs-set-head__sp{flex:1}
.cs-set-close{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;
    background:transparent;color:var(--text-muted);cursor:pointer;transition:background .14s,color .14s}
.cs-set-close:hover{background:var(--neon-soft);color:var(--text)}
.cs-set-close svg{width:20px;height:20px}
/* container-type: адаптив контента (таблица↔карточки, графики) считается по ШИРИНЕ
   самой модалки, а не вьюпорта — узкая модалка на десктопе тоже схлопывается в карточки */
.cs-set-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px 28px 40px;container:csbody / inline-size}
.cs-set-pane{display:none}
.cs-set-pane.is-active{display:block;animation:csSetFade .2s ease}
@keyframes csSetFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cs-set-section-title{font:700 12.5px/1 inherit;letter-spacing:.05em;text-transform:uppercase;
    color:var(--text-faint);margin:26px 0 12px}
.cs-set-hint{font-size:13px;color:var(--text-muted);line-height:1.55}
/* «Плоский» вид карточек внутри модалки — минимум рамок, больше воздуха (как у Claude) */
.cs-set-flat{background:transparent!important;border:0!important;padding:0!important;margin:0 0 4px!important;box-shadow:none!important}

/* ═══ Перенесённые из account.html инлайн-классы (нет в style.css) ═══ */
.account__profile-card{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px 18px;margin-bottom:12px;flex-wrap:wrap}
.account__profile-card--col{flex-direction:column;align-items:stretch;gap:14px}
.account__profile-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.account__avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;background:rgba(255,255,255,.06)}
.account__profile-name{font-size:20px;font-weight:700}
.account__profile-sub{font-size:13px;color:var(--text-muted,#9aa)}
.account__profile-since{font-size:12px;color:var(--text-faint,#778)}
.account__admin-circle{margin-left:auto;width:46px;height:46px;flex:none;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;text-decoration:none;
    color:#3a2c00;background:linear-gradient(135deg,#ffe08a,#f5b301);box-shadow:0 4px 16px rgba(245,179,1,.45);
    border:2px solid rgba(255,255,255,.5)}
.account__admin-circle[hidden]{display:none}
.account__admin-circle:hover{filter:brightness(1.08);transform:scale(1.04)}
.account__keybar{border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.account__keyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.account__keyrow code{flex:1;min-width:180px;font-family:'JetBrains Mono',monospace;font-size:13px;
    background:rgba(0,0,0,.25);border-radius:8px;padding:9px 12px;overflow:hidden;text-overflow:ellipsis}
.type-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* Промокоды */
.promo-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px}
.promo-card--entry{background:linear-gradient(135deg,rgba(91,140,255,.1),rgba(124,108,255,.08))}
.promo-grant{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(255,255,255,.08);
    border-radius:13px;background:rgba(255,255,255,.035);margin-bottom:9px}
.promo-grant__ic{font-size:22px;width:34px;text-align:center;flex:none}
.promo-grant__body{flex:1;min-width:0}
.promo-grant__title{font-weight:650;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.promo-grant__sub{font-size:12.5px;color:var(--text-muted,#9aa);margin-top:2px}
.promo-grant__badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;background:rgba(91,140,255,.16);color:#7aa2ff;flex:none}
.promo-grant__timer{font-size:12px;font-weight:600;color:#f5b301;flex:none;white-space:nowrap}
.promo-hist{width:100%;border-collapse:collapse;font-size:13px}
.promo-hist th,.promo-hist td{text-align:left;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.promo-hist th{font-size:11px;text-transform:uppercase;color:var(--text-faint,#778);font-weight:600}
.promo-hist__amt{color:#4ade80;font-weight:600;white-space:nowrap}

/* Кнопки оплаты */
.account__topup-btn{margin-top:4px;width:100%;justify-content:center;
    background:rgba(91,140,255,.14);color:var(--accent,#5b8cff);border:1px solid rgba(91,140,255,.3)}
.account__topup-btn:hover{background:rgba(91,140,255,.22)}
.pay-btn{background:rgba(91,140,255,.16);color:var(--accent,#5b8cff);border:1px solid rgba(91,140,255,.34);font-weight:600}
.pay-btn:hover{background:rgba(91,140,255,.24)}
.pay-btn--card{background:rgba(34,197,94,.14);color:#22c55e;border-color:rgba(34,197,94,.32)}
.pay-btn--card:hover{background:rgba(34,197,94,.22)}

/* Сводки и графики журналов */
.sum-cards{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.sum-card{flex:1;min-width:130px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    border-radius:12px;padding:12px 14px}
.sum-card b{display:block;font-size:20px;margin-top:3px}
.bar-row{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:12.5px}
.bar-row__name{width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.bar-row__track{flex:1;height:14px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden;min-width:60px}
.bar-row__fill{height:100%;background:linear-gradient(90deg,#5b8cff,#7aa2ff);border-radius:5px;transition:width .35s ease}
.bar-row__val{width:120px;text-align:right;color:var(--text-muted,#9aa);white-space:nowrap}
.bar-row__pct{display:inline-block;min-width:34px;color:var(--text-faint,#778);font-variant-numeric:tabular-nums}
.bar-row__name .cs-ic{margin-right:7px;color:var(--text-faint)}
.sum-card .sum-card__top{display:flex;align-items:center;gap:7px;color:var(--text-muted)}
.sum-card .sum-card__top .cs-ic{color:var(--text-faint)}
.promo-grant__ic svg{width:21px;height:21px}
.promo-grant__ic{color:var(--neon)}
.promo-grant__timer{display:inline-flex;align-items:center;gap:5px}
.cs-set-section-title .cs-ic{margin-right:6px;vertical-align:-3px}
.chart-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 14px 8px;margin-bottom:16px}
.chart-card__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.chart-card__title{font-size:13.5px;font-weight:600}
.chart-card__meta{font-size:12px;color:var(--text-muted,#9aa)}
.mini-chart{width:100%;height:auto;display:block;overflow:visible}
.mini-chart rect{transition:opacity .12s}
.mini-chart rect:hover{opacity:.78}

/* Стат-строка профиля (баланс/бонусы/потрачено) */
.account__pstats{display:flex;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.account__pstat{flex:1;text-align:center;padding:0 8px;border-right:1px solid rgba(255,255,255,.08)}
.account__pstat:last-child{border-right:none}
.account__pstat-label{display:block;font-size:10.5px;color:var(--text-muted,#9aa);text-transform:uppercase;letter-spacing:.04em}
.account__pstat-val{display:block;font-size:20px;font-weight:700;margin-top:3px}

/* Таблица истории бонусов (.table / .table-responsive отсутствуют в style.css) */
.table-responsive{width:100%;overflow-x:auto}
.cs-set-body table.table{width:100%;border-collapse:collapse}
.cs-set-body table.table th,.cs-set-body table.table td{text-align:left;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.cs-set-body table.table th{font-size:11px;text-transform:uppercase;color:var(--text-faint,#778);font-weight:600}

/* ─── Быстрые пилюли (профиль) ─── */
.cs-set-pills{display:flex;flex-wrap:wrap;gap:8px}
.cs-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
    border:1px solid var(--panel-border);background:rgba(255,255,255,.03);color:var(--text-muted);
    font:550 13px/1 inherit;cursor:pointer;transition:background .14s,color .14s,border-color .14s}
.cs-pill:hover{background:var(--neon-soft);color:var(--text);border-color:var(--panel-hover)}
.cs-pill .cs-ic{color:var(--text-faint)}
.cs-pill:hover .cs-ic{color:var(--neon)}
html.light .cs-pill{background:#fff}

/* ─── Контентные иконки (одноцветные, currentColor) ─── */
.cs-ic{display:inline-flex;align-items:center;justify-content:center;vertical-align:-2px;color:inherit;flex:none}
.cs-ic svg{width:15px;height:15px;display:block}
.cs-ic--lg svg{width:19px;height:19px}
.cs-ic--mut{color:var(--text-faint)}

/* ─── Donut-чарт (расходы по моделям) ─── */
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut-svg{width:140px;height:140px;flex:none}
.donut-empty{padding:26px;text-align:center;color:var(--text-faint);font-size:13px}
.donut-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
.donut-leg{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.donut-leg__dot{width:9px;height:9px;border-radius:3px;flex:none}
.donut-leg__lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.donut-leg__val{color:var(--text-muted);white-space:nowrap;display:flex;align-items:center;gap:6px}
.donut-leg__pct{display:inline-block;min-width:30px;text-align:right;color:var(--text-faint);font-variant-numeric:tabular-nums}

.charts-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@container csbody (max-width:640px){.charts-2col{grid-template-columns:1fr}}

/* ─── Адаптивный список (таблица ↔ карточки) ─── */
.dl{border:1px solid var(--panel-border);border-radius:12px;overflow:hidden}
.dl-head{display:grid;grid-template-columns:var(--dl-cols);gap:8px;padding:9px 12px;
    background:rgba(255,255,255,.018);border-bottom:1px solid var(--panel-border)}
.dl-hcell{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.dl-row{display:grid;grid-template-columns:var(--dl-cols);gap:8px;padding:10px 12px;align-items:center;
    border-bottom:1px solid rgba(120,180,255,.05);font-size:12.5px}
.dl-row:last-child{border-bottom:0}
.dl-row:hover{background:rgba(120,180,255,.03)}
.dl-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-cell code{font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(120,180,255,.08);
    padding:2px 6px;border-radius:5px;color:var(--neon)}
.dl-cell .cs-ic{color:var(--text-faint)}
.dl--r{text-align:right;justify-self:end}
.dl-cell--amount{font-weight:600;white-space:nowrap;color:var(--text)}
.dl-empty{padding:28px 16px;text-align:center;color:var(--text-muted);font-size:13px;
    border:1px dashed var(--panel-border);border-radius:12px}
.dl-cost-sub{font-size:10.5px;color:var(--text-faint);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ─── Пагинатор ─── */
.dl-pager{margin-top:12px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.dl-pager__info{font-size:12.5px;color:var(--text-faint);font-variant-numeric:tabular-nums}

html.light .dl-cell code{background:rgba(26,92,200,.08)}
html.light .dl-head{background:rgba(26,92,200,.03)}

/* ─── Светлая тема для перенесённых классов ─── */
html.light .account__profile-card{background:#fff;border-color:rgba(26,92,200,.14)}
html.light .account__avatar{background:rgba(26,92,200,.06);box-shadow:0 0 0 1px rgba(26,92,200,.12)}
html.light .account__keybar{border-top-color:rgba(26,92,200,.12)}
html.light .account__keyrow code{background:rgba(26,92,200,.06)}
html.light .promo-card{background:#fff;border-color:rgba(26,92,200,.14)}
html.light .promo-grant{background:#fff;border-color:rgba(26,92,200,.12)}
html.light .promo-hist th,html.light .promo-hist td{border-color:rgba(26,92,200,.1)}
html.light .sum-card{background:#fff;border-color:rgba(26,92,200,.14)}
html.light .chart-card{background:#fff;border-color:rgba(26,92,200,.12)}
html.light .bar-row__track{background:rgba(26,92,200,.1)}
html.light .account__pstats{border-top-color:rgba(26,92,200,.12)}
html.light .account__pstat{border-right-color:rgba(26,92,200,.12)}
html.light .account__pstat-label{color:rgba(10,24,51,.55)}
html.light .account__topup-btn{color:#2b62e0;background:rgba(43,98,224,.1);border-color:rgba(43,98,224,.25)}
html.light .pay-btn{color:#2b62e0;background:rgba(43,98,224,.1);border-color:rgba(43,98,224,.25)}
html.light .pay-btn--card{color:#159a4b;background:rgba(21,154,75,.1);border-color:rgba(21,154,75,.25)}
html.light .cs-set-body table.table th,html.light .cs-set-body table.table td{border-color:rgba(26,92,200,.1)}

/* ─── Балансовая строка в меню профиля (теперь кликабельна → Биллинг) ─── */
.cs-profmenu__bal{justify-content:flex-start!important}
.cs-profmenu__bal b{margin-left:auto;color:#95efb0;font-weight:700}

/* ─── Мобайл / Telegram Mini App: модалка на весь экран, рейл сверху (по ВЬЮПОРТУ) ─── */
@media(max-width:760px){
    .cs-set-overlay{padding:0}
    .cs-set-modal{width:100vw;height:100vh;height:100dvh;max-width:none;border-radius:0;border:0;flex-direction:column}
    .cs-set-nav{flex:0 0 auto;flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;padding:10px 12px;
        border-right:0;border-bottom:1px solid var(--panel-border);padding-top:calc(10px + env(safe-area-inset-top,0px))}
    .cs-set-nav__title{display:none}
    .cs-set-navitem{flex:0 0 auto;width:auto;white-space:nowrap;padding:8px 12px}
    .cs-set-head{padding-top:14px}
    .cs-set-body{padding:18px 14px 36px}
}
html.studio-embed .cs-set-nav{padding-top:calc(18px + env(safe-area-inset-top,0px))}

/* ─── Адаптив КОНТЕНТА по ширине модалки (container-query): плотные таблицы → карточки,
       графики в один столбец, KPI по 2 в ряд. Срабатывает и в узкой модалке на десктопе,
       поэтому горизонтального скролла не возникает ни на одной вкладке. ─── */
@container csbody (max-width:640px){
    .sum-card{min-width:calc(50% - 5px)}
    .donut-svg{margin:0 auto}
    .ref-stats-row{grid-template-columns:1fr!important}
    .dl{border:0;border-radius:0;overflow:visible}
    .dl-head{display:none}
    .dl-body{display:flex;flex-direction:column;gap:8px}
    .dl-row{grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px;
        border:1px solid var(--panel-border);border-radius:12px;background:rgba(255,255,255,.025)}
    .dl-row:hover{background:rgba(255,255,255,.025)}
    .dl-cell{white-space:normal;grid-column:1 / -1;display:flex;justify-content:space-between;gap:12px;
        font-size:12.5px;color:var(--text-muted);text-align:left}
    .dl-cell::before{content:attr(data-label);color:var(--text-faint);font-size:11px;flex:none}
    .dl-cell--title{grid-column:1;grid-row:1;display:block;font-size:14px;font-weight:650;color:var(--text);white-space:normal;word-break:break-word}
    .dl-cell--title::before{display:none}
    .dl-cell--amount{grid-column:2;grid-row:1;justify-content:flex-end;justify-self:end;font-weight:650;color:var(--text)}
    .dl-cell--amount::before{display:none}
    html.light .dl-row,html.light .dl-row:hover{background:#fff}
}

/* Фолбэк для движков без @container (старые WebView): на узком вьюпорте — карточки.
   minmax(0,…) в гриде и так не даёт горизонтального скролла, это лишь читабельность. */
@supports not (container-type:inline-size){
    @media(max-width:760px){
        .charts-2col{grid-template-columns:1fr}
        .dl{border:0;overflow:visible}.dl-head{display:none}
        .dl-body{display:flex;flex-direction:column;gap:8px}
        .dl-row{grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px;border:1px solid var(--panel-border);border-radius:12px}
        .dl-cell{white-space:normal;grid-column:1 / -1;display:flex;justify-content:space-between;gap:12px}
        .dl-cell::before{content:attr(data-label);color:var(--text-faint);font-size:11px}
        .dl-cell--title{grid-column:1;grid-row:1;display:block;font-weight:650}.dl-cell--title::before{display:none}
        .dl-cell--amount{grid-column:2;grid-row:1;justify-self:end}.dl-cell--amount::before{display:none}
    }
}