/* ════════════════════════════════════════════════════════════════════
   GridAPI Console — S1 «тихий премиум»
   Дизайн-токены + консольный layout (топбар / сайдбар / страницы).
   Грузится ПОСЛЕ bootstrap.min.css и переопределяет его контролы:
   существующий JS продолжает оперировать bootstrap-классами.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* поверхности */
  --bg:#0a0b10;
  --bg-raised:#0e1017;
  --bg-panel:#10131b;
  --bg-hover:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.13);

  /* текст */
  --text:#e7eaf1;
  --text-2:#9aa3b5;
  --text-3:#5f6778;
  --muted:#8a93a6;

  /* единственный акцент */
  --accent:#6366f1;
  --accent-hover:#767af4;
  --accent-soft:rgba(99,102,241,.13);
  --accent-line:rgba(99,102,241,.45);

  /* семантика — только для статусов */
  --ok:#34d399;
  --warn:#fbbf24;
  --err:#f87171;

  --radius:12px;
  --radius-sm:8px;
  --font-mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --topbar-h:56px;
  --sidenav-w:208px;
}

/* ── база ── */
html{ scrollbar-gutter:stable; }
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:14px;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:rgba(99,102,241,.32); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.18); }
.muted{ color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; }
code{ color:#a5b4fc; font-family:var(--font-mono); font-size:.92em; }
a{ color:#a5b4fc; }
a:hover{ color:#c7d2fe; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ── панели ── */
.glass{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.card-head{ display:flex; align-items:center; gap:.6rem; }
.card-head .ico{
  width:30px; height:30px; border-radius:var(--radius-sm); flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:#a5b4fc; font-size:.92rem;
}
.section-title{ font-weight:600; font-size:.95rem; margin:0; letter-spacing:.1px; }

/* ── топбар ── */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(10,11,16,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  height:var(--topbar-h);
  max-width:1240px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand-badge{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,#6366f1,#4f46e5);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
/* логотип-картинка в шапке/логине (заменяет иконку в .brand-badge) */
.brand-logo{
  width:34px; height:34px; border-radius:9px; flex:none;
  object-fit:contain; display:block;
  background:var(--bg-raised); border:1px solid var(--line);
  padding:3px;
}
.brand-name{ font-weight:650; font-size:.95rem; line-height:1.15; letter-spacing:.1px; }
.brand-sub{ font-size:.74rem; color:var(--muted); font-family:var(--font-mono); }

/* мини-баланс в топбаре — виден с любой вкладки */
.tb-balance{
  display:flex; align-items:center; gap:.55rem; cursor:pointer;
  padding:.34rem .7rem; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-raised);
  transition:border-color .12s;
}
.tb-balance:hover{ border-color:var(--line-strong); }
.tb-balance .v{ font-weight:650; font-size:.85rem; font-variant-numeric:tabular-nums; }
.tb-balance .bar{ width:54px; height:4px; border-radius:3px; background:rgba(255,255,255,.09); overflow:hidden; }
.tb-balance .bar > i{ display:block; height:100%; border-radius:3px; background:var(--accent); transition:width .3s; }
.tb-balance.low .bar > i{ background:var(--warn); }
.tb-balance.out .bar > i{ background:var(--err); }
@media (max-width:640px){ .tb-balance .bar{ display:none; } }

/* иконки-действия топбара */
.tb-act{
  width:34px; height:34px; border-radius:var(--radius-sm); flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--text-2);
  cursor:pointer; transition:all .12s; font-size:.95rem;
}
.tb-act:hover{ background:var(--bg-hover); color:var(--text); border-color:var(--line); }

/* переключатель языка — компактный сегмент */
.lang-switch .btn{
  font-size:.72rem; font-weight:650; padding:.22rem .5rem; line-height:1.2;
  border-color:var(--line) !important; color:var(--text-2);
}
.lang-switch .btn.btn-primary{ background:var(--accent-soft); border-color:var(--accent-line) !important; color:#c7d2fe; }
.lang-switch .btn.btn-outline-secondary:hover{ background:var(--bg-hover); color:var(--text); }

/* ── shell: сайдбар + контент ── */
.shell{
  max-width:1240px; margin:0 auto; padding:20px;
  display:grid; grid-template-columns:var(--sidenav-w) minmax(0,1fr); gap:22px;
  align-items:start;
}
.sidenav{
  position:sticky; top:calc(var(--topbar-h) + 20px);
  display:flex; flex-direction:column; gap:2px;
}
.nav-item{
  display:flex; align-items:center; gap:.65rem;
  padding:.52rem .75rem; border-radius:var(--radius-sm);
  color:var(--text-2); font-weight:520; font-size:.88rem;
  cursor:pointer; user-select:none; text-decoration:none;
  border:1px solid transparent;
  transition:background .12s, color .12s;
}
.nav-item i{ font-size:.95rem; width:18px; text-align:center; opacity:.85; }
.nav-item:hover{ background:var(--bg-hover); color:var(--text); }
.nav-item.active{
  background:var(--accent-soft); color:#c7d2fe; border-color:rgba(99,102,241,.22);
}
.nav-sep{ height:1px; background:var(--line); margin:.6rem .4rem; }
.content{ min-width:0; display:flex; flex-direction:column; gap:14px; }

/* страницы-разделы */
.page{ display:none; flex-direction:column; gap:14px; }
.page.active{ display:flex; }
.page-title{ font-size:1.05rem; font-weight:650; margin:0; letter-spacing:.1px; }
.page-sub{ font-size:.83rem; color:var(--muted); margin:.15rem 0 0; }

/* мобильная нижняя навигация */
.mobilenav{ display:none; }
@media (max-width:900px){
  .shell{ grid-template-columns:1fr; padding:14px 14px calc(64px + env(safe-area-inset-bottom)); }
  .sidenav{ display:none; }
  .mobilenav{
    position:fixed; left:0; right:0; bottom:0; z-index:30;
    display:flex; justify-content:space-around;
    background:rgba(10,11,16,.94); backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding:.3rem 0 calc(.3rem + env(safe-area-inset-bottom));
  }
  .mobilenav .nav-item{
    flex:1 1 0; min-width:0; justify-content:center;
    flex-direction:column; gap:.12rem; padding:.3rem .1rem;
    font-size:.58rem; border:0; text-align:center;
  }
  .mobilenav .nav-item span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobilenav .nav-item i{ font-size:1.05rem; width:auto; }
  .mobilenav .nav-item.active{ background:transparent; color:#c7d2fe; }
}

/* ── тонкая статус-строка (вместо кричащего баннера) ── */
.status-line{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.6rem .85rem; border-radius:var(--radius-sm);
  background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.18);
  font-size:.82rem; line-height:1.45; color:var(--text-2);
}
.status-line i{ color:var(--warn); flex:none; margin-top:.1rem; }
.status-line b{ color:var(--text); font-weight:600; }

/* ── карточка баланса (обзор) ── */
.balance-card{ padding:1.15rem 1.25rem; }
.balance-big{
  font-size:2rem; font-weight:700; letter-spacing:-.5px; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.balance-of{ font-size:.95rem; color:var(--muted); font-weight:450; }
.balance-meta{ font-size:.8rem; color:var(--muted); }
.balance-meta b{ color:var(--text-2); font-weight:600; font-variant-numeric:tabular-nums; }
.forecast-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:550; color:var(--text-2);
  padding:.28rem .65rem; border-radius:999px;
  background:var(--bg-raised); border:1px solid var(--line);
}
.forecast-chip.warn{ color:var(--warn); border-color:rgba(251,191,36,.3); }
.progress{ background:rgba(255,255,255,.07); border-radius:4px; }
.progress-bar{ background:var(--accent); border-radius:4px; }
.progress-bar.bg-success{ background:var(--accent) !important; }
.progress-bar.bg-warning{ background:var(--warn) !important; }
.progress-bar.bg-danger{ background:var(--err) !important; }

/* ── чипы моделей / провайдеров ── */
.model-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-mono); font-size:.8rem;
  padding:.32rem .68rem; border-radius:999px; cursor:pointer; line-height:1;
  background:var(--bg-raised); color:var(--text-2); border:1px solid var(--line);
  transition:all .12s;
}
.model-chip:hover{ color:var(--text); border-color:var(--line-strong); background:var(--bg-hover); }
.model-chip.active{
  background:var(--accent-soft); color:#c7d2fe; border-color:var(--accent-line);
}
.chip-copy{ opacity:.5; padding-left:.15rem; transition:opacity .12s; }
.chip-copy:hover{ opacity:1; }

/* панель теста выбранной модели (страница «Модели») */
.model-test-bar{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.55rem .8rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg-raised);
}
.model-test-bar .mt-left{ display:flex; align-items:center; gap:.45rem; min-width:0; }
.model-test-bar code{ font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw; }

/* ── кнопка-пикер модели (шаг 3 подключения) ── */
.model-picker-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--bg-raised);
  color:var(--text); cursor:pointer; transition:border-color .12s, background .12s;
  max-width:min(340px, 80vw);
}
.model-picker-btn:hover{ border-color:var(--accent-line); background:var(--bg-hover); }
.model-picker-btn code{ font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model-picker-btn .mp-chev{ font-size:.7rem; color:var(--muted); flex:none; }
.model-picker-btn .mp-logo{ display:inline-flex; flex:none; }

/* ── модалка выбора модели ── */
.mp-list{ max-height:56vh; overflow-y:auto; padding-right:2px; }
.mp-group{ margin-bottom:.6rem; }
.mp-group:last-child{ margin-bottom:0; }
.mp-group-head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .5rem; margin-bottom:.15rem;
  font-size:.78rem; font-weight:650; color:var(--text-2);
  background:var(--bg-panel);
  border-bottom:1px solid var(--line);
}
.mp-group-head .cnt{
  font-size:.68rem; font-weight:600; color:var(--muted);
  padding:.1rem .45rem; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.mp-row{
  display:flex; align-items:center; gap:.5rem;
  padding:.42rem .6rem; border-radius:var(--radius-sm);
  cursor:pointer; transition:background .1s;
}
.mp-row:hover{ background:var(--bg-hover); }
.mp-row.active{ background:var(--accent-soft); }
.mp-row .mp-name{ font-size:.84rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-row.active .mp-name{ color:#c7d2fe; }
.mp-row .mp-check{ margin-left:auto; color:#c7d2fe; font-size:.9rem; }

.prov-tab{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none;
  font-size:.78rem; font-weight:600; padding:.3rem .68rem; border-radius:999px; line-height:1;
  background:transparent; color:var(--text-2); border:1px solid var(--line);
  transition:all .12s;
}
.prov-tab:hover{ background:var(--bg-hover); color:var(--text); }
.prov-tab.active{ background:var(--accent-soft); color:#c7d2fe; border-color:var(--accent-line); }
.prov-tab .cnt{ font-size:.68rem; opacity:.65; font-weight:500; }
.prov-tab .prov-logo.sm{ margin:-2px 0; }

.prov-group{ width:100%; }
.prov-group-head{
  display:flex; align-items:center; gap:.45rem; margin:.7rem 0 .45rem;
  font-size:.7rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.prov-group-head:first-child{ margin-top:0; }
.prov-group-head .cnt{ font-weight:500; opacity:.6; }
.prov-group-head .line{ flex:1; height:1px; background:var(--line); }

/* ── логотипы провайдеров (инлайн-SVG) ── */
.prov-logo{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:22px; height:22px; border-radius:6px;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.prov-logo svg{ width:14px; height:14px; display:block; }
.prov-logo.sm{ width:17px; height:17px; border-radius:5px; background:transparent; border:0; }
.prov-logo.sm svg{ width:13px; height:13px; }

/* ── страница моделей: карточки-группы провайдеров ── */
.prov-card{
  width:100%; padding:.85rem .95rem; margin-bottom:.65rem;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg-raised);
}
.prov-card:last-child{ margin-bottom:0; }
.prov-card-head{
  display:flex; align-items:center; gap:.55rem; margin-bottom:.65rem;
}
.prov-card-head .prov-logo{ width:26px; height:26px; border-radius:7px; }
.prov-card-head .prov-logo svg{ width:16px; height:16px; }
.prov-card-name{ font-weight:650; font-size:.9rem; letter-spacing:.1px; }
.prov-card-cnt{
  font-size:.7rem; font-weight:600; color:var(--muted);
  padding:.12rem .5rem; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}

/* бейджи внутри чипа модели */
.mchip-badge{
  display:inline-flex; align-items:center; gap:.15rem;
  font-size:.6rem; font-weight:700; line-height:1;
  padding:.14rem .34rem; border-radius:5px;
}
.mchip-badge.top{ background:rgba(251,191,36,.15); color:var(--warn); }
.mchip-badge.top i{ font-size:.55rem; }
.mchip-badge.ctx{ background:rgba(34,211,238,.13); color:#22d3ee; letter-spacing:.02em; }

/* ── сниппеты ── */
.snippet-block{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:#0b0d13; }
.snippet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.42rem .55rem .42rem .8rem;
  background:var(--bg-raised); border-bottom:1px solid var(--line);
}
.snippet-head .lang{ font-size:.76rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.snippet-body{
  margin:0; padding:.85rem .95rem; white-space:pre-wrap; word-break:break-all;
  font-family:var(--font-mono); font-size:.8rem; line-height:1.55; color:#b9c2d8;
}
.btn-copy{
  font-size:.72rem; padding:.22rem .6rem; border-radius:6px;
  background:transparent; border:1px solid var(--line); color:var(--text-2);
  cursor:pointer; transition:all .12s;
}
.btn-copy:hover{ background:var(--accent-soft); color:#c7d2fe; border-color:var(--accent-line); }

/* ── таблицы ── */
.table{ --bs-table-bg:transparent; --bs-table-color:var(--text); }
.table > :not(caption) > * > *{ border-bottom-color:var(--line); padding:.5rem .6rem; }
.table thead th{
  color:var(--muted); font-weight:600; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.05em; border-bottom-color:var(--line-strong);
  white-space:nowrap;
}
.table tbody tr{ transition:background .12s; }
.table tbody tr:hover{ background:var(--bg-hover); }
.table .text-end{ font-variant-numeric:tabular-nums; }

/* ── bootstrap-контролы в стиль S1 ── */
.form-control, .form-select{
  background:var(--bg-raised); border-color:var(--line); color:var(--text);
  border-radius:var(--radius-sm); font-size:.88rem;
}
.form-control:hover, .form-select:hover{ border-color:var(--line-strong); }
.form-control:focus, .form-select:focus{
  background:var(--bg-raised); color:var(--text);
  border-color:var(--accent-line); box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.form-control::placeholder{ color:var(--text-2); opacity:.6; }
.form-check-input{ background-color:var(--bg-raised); border-color:var(--line-strong); }
.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(99,102,241,.15); border-color:var(--accent-line); }

.btn{ border-radius:var(--radius-sm); font-weight:550; font-size:.86rem; }
.btn-sm{ font-size:.78rem; }
.btn-primary{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.btn-primary:hover, .btn-primary:focus{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-primary:disabled{ background:var(--accent); border-color:var(--accent); opacity:.55; }
/* все outline-виды приводим к одному тихому виду */
.btn-outline-secondary, .btn-outline-light, .btn-outline-info, .btn-outline-primary{
  color:var(--text-2); border-color:var(--line-strong); background:transparent;
}
.btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-info:hover, .btn-outline-primary:hover{
  background:var(--bg-hover); color:var(--text); border-color:var(--line-strong);
}
/* активное состояние сегментов (периоды графика, пагинация) */
.btn-info{
  background:var(--accent-soft); border-color:var(--accent-line); color:#c7d2fe;
}
.btn-info:hover{ background:var(--accent-soft); border-color:var(--accent-line); color:#e0e7ff; }

.badge.text-bg-success{ background:rgba(52,211,153,.14) !important; color:var(--ok) !important; font-weight:600; }
.badge.text-bg-danger{ background:rgba(248,113,113,.14) !important; color:var(--err) !important; font-weight:600; }
.badge.text-bg-secondary{ background:var(--bg-raised) !important; color:var(--text-2) !important; border:1px solid var(--line); font-weight:550; }

.alert{ border-radius:var(--radius-sm); font-size:.85rem; }
.alert-warning{ background:rgba(251,191,36,.07); border-color:rgba(251,191,36,.22); color:#fde68a; }
.alert-danger{ background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.25); color:#fecaca; }
.alert-secondary{ background:var(--bg-raised); border-color:var(--line); color:var(--text-2); }

.text-info{ color:#a5b4fc !important; }
.text-success{ color:var(--ok) !important; }
.text-warning{ color:var(--warn) !important; }
.text-danger{ color:var(--err) !important; }

/* ── вход ── */
.login-wrap{ max-width:420px; margin:11vh auto 0; }
.login-tools{
  display:flex; justify-content:center; gap:1.1rem; flex-wrap:wrap;
  color:var(--text-2); font-size:.78rem;
}
.login-tools span{ display:inline-flex; align-items:center; gap:.35rem; }

/* ── how-it-works ── */
.hiw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
@media (max-width:720px){ .hiw-grid{ grid-template-columns:1fr; } }
.hiw-item{
  display:flex; gap:.6rem; align-items:flex-start; padding:.7rem .8rem;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-raised);
}
.hiw-item .hiw-ico{
  width:32px; height:32px; flex:none; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:#a5b4fc; font-size:1rem;
}
.hiw-item .hiw-t{ font-weight:600; font-size:.86rem; margin-bottom:.15rem; }
.hiw-item .hiw-d{ font-size:.79rem; color:var(--muted); line-height:1.45; }

/* ── collapsible ── */
.collapse-link{
  cursor:pointer; user-select:none; color:#a5b4fc; font-size:.82rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.35rem;
}
.collapse-link:hover{ color:#c7d2fe; }
.collapse-link .chev{ transition:transform .15s; }
.collapse-link.open .chev{ transform:rotate(90deg); }

/* ── карточки сценариев ── */
.scn-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
@media (max-width:900px){ .scn-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .scn-grid{ grid-template-columns:1fr; } }
.scn-card{
  text-align:left; cursor:pointer; padding:.85rem .9rem; height:100%;
  border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--bg-raised); color:var(--text);
  display:flex; flex-direction:column; gap:.4rem;
  transition:border-color .14s, background .14s;
}
.scn-card:hover{ background:var(--accent-soft); border-color:var(--accent-line); }
.scn-card .scn-ico{
  width:34px; height:34px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:#a5b4fc; font-size:1.05rem;
}
.scn-card .scn-t{ font-weight:600; font-size:.88rem; line-height:1.2; }
.scn-card .scn-d{ font-size:.77rem; color:var(--muted); line-height:1.4; }
.scn-card .scn-go{
  font-size:.74rem; color:#a5b4fc; font-weight:600; margin-top:auto;
  display:inline-flex; align-items:center; gap:.25rem;
}

/* ── шаги ── */
.step{ display:flex; gap:.85rem; align-items:flex-start; padding:.9rem 0; border-top:1px solid var(--line); }
.step:first-of-type{ border-top:0; padding-top:.2rem; }
.step-num{
  width:26px; height:26px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; color:#c7d2fe;
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.step-body{ flex:1; min-width:0; }
.step-title{
  font-weight:600; font-size:.92rem; margin-bottom:.5rem;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.step-title .step-hint{ font-weight:400; font-size:.79rem; color:var(--muted); }

/* ── реквизиты ── */
.creds{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-raised); }
.creds-row{
  display:grid; grid-template-columns:140px 1fr auto; align-items:center; gap:.6rem;
  padding:.55rem .8rem; border-top:1px solid var(--line);
}
.creds-row:first-child{ border-top:0; }
.creds-row .creds-k{ font-size:.78rem; color:var(--muted); font-weight:600; }
.creds-row .creds-v{ font-family:var(--font-mono); font-size:.82rem; color:#b9c2d8; word-break:break-all; }
@media (max-width:520px){ .creds-row{ grid-template-columns:1fr auto; } .creds-row .creds-k{ grid-column:1 / -1; } }

/* ── connect/os табы ── */
.conn-tab{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600;
  padding:.38rem .8rem; border-radius:var(--radius-sm); cursor:pointer; line-height:1;
  background:var(--bg-raised); color:var(--text-2); border:1px solid var(--line);
  transition:all .12s;
}
.conn-tab:hover{ background:var(--bg-hover); color:var(--text); }
.conn-tab.active{ background:var(--accent-soft); color:#c7d2fe; border-color:var(--accent-line); }
.os-tab{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:600;
  padding:.26rem .66rem; border-radius:999px; cursor:pointer; line-height:1;
  background:transparent; color:var(--muted); border:1px solid var(--line);
  transition:all .12s;
}
.os-tab:hover{ color:var(--text); border-color:var(--line-strong); }
.os-tab.active{ background:var(--accent-soft); color:#c7d2fe; border-color:var(--accent-line); }

/* ── cache mode ── */
.cache-mode-desc{
  padding:.55rem .7rem; border:1px solid transparent; border-radius:var(--radius-sm);
  opacity:.45; transition:opacity .15s, border-color .15s, background .15s;
}
.cache-mode-desc.active{ opacity:1; border-color:rgba(99,102,241,.28); background:rgba(99,102,241,.06); }

/* ── модалки ── */
.merge-overlay{
  position:fixed; inset:0; z-index:1080; background:rgba(5,6,12,.72); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 1rem 2rem; overflow-y:auto;
}
.merge-modal{ width:100%; max-width:540px; padding:1.25rem 1.35rem; box-shadow:0 24px 70px rgba(0,0,0,.55); }
.merge-info ul{ line-height:1.5; }
.merge-info code{ color:#a5b4fc; }

/* ── платёжные системы: карточки с логотипами методов ── */
.pay-card{
  position:relative; cursor:pointer; user-select:none; height:100%;
  padding:.8rem .85rem .75rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg-raised);
  transition:border-color .15s, background .15s;
  display:flex; flex-direction:column; gap:.55rem;
}
.pay-card:hover{ border-color:var(--line-strong); }
.pay-card.active{ border-color:var(--accent-line); background:var(--accent-soft); }
.pay-card .pay-head{ display:flex; align-items:center; gap:.55rem; }
.pay-card .pay-name{ font-weight:650; font-size:.88rem; line-height:1.15; }
.pay-card .pay-sub{ font-size:.72rem; color:var(--muted); line-height:1.3; }
.pay-card .pay-check{
  position:absolute; top:.6rem; right:.65rem; color:var(--accent);
  opacity:0; transition:opacity .15s; font-size:.95rem;
}
.pay-card.active .pay-check{ opacity:1; }
.pay-ico{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem;
}
/* ряд плашек-логотипов методов оплаты */
.pay-methods{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; }
.pay-chip{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  height:26px; padding:0 .5rem; border-radius:6px;
  background:#fff; border:1px solid rgba(255,255,255,.16);
}
.pay-chip svg{ display:block; height:14px; width:auto; }
.pay-chip.dark{ background:#12141c; }
.pay-chip .pay-chip-label{ font-size:.66rem; font-weight:700; color:#12141c; letter-spacing:.02em; }
.pay-chip.dark .pay-chip-label{ color:#e7eaf1; }
/* монеты крипты — цветные кружки с символом */
.coin{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.coin svg{ display:block; width:22px; height:22px; }
.pay-coins{ display:flex; align-items:center; margin-top:auto; }
.pay-coins .coin{ margin-right:-5px; border:2px solid var(--bg-raised); width:24px; height:24px; }
.pay-coins .coin svg{ width:20px; height:20px; }
.pay-card.active .pay-coins .coin{ border-color:#181a2b; }
.pay-coins .coin-more{
  margin-left:11px; font-size:.68rem; color:var(--muted); font-weight:600;
}

/* ── пакеты пополнения: сетка карточек ── */
.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
@media (max-width:520px){ .pkg-grid{ grid-template-columns:repeat(2,1fr); } }
.pkg-card{
  position:relative; text-align:center; cursor:pointer; user-select:none;
  padding:.85rem .5rem .7rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg-raised);
  transition:border-color .14s, background .14s, transform .14s;
  display:flex; flex-direction:column; gap:.15rem; align-items:center;
}
.pkg-card:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.pkg-card.active{ border-color:var(--accent-line); background:var(--accent-soft); }
.pkg-card.active::after{
  content:"✓"; position:absolute; top:.35rem; right:.5rem;
  font-size:.7rem; font-weight:700; color:#c7d2fe;
}
.pkg-tokens{ font-weight:700; font-size:1.02rem; letter-spacing:-.2px; font-variant-numeric:tabular-nums; }
.pkg-price{ font-size:.86rem; color:var(--text-2); font-weight:600; font-variant-numeric:tabular-nums; }
.pkg-rate{ font-size:.68rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.pkg-badge{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-size:.62rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:.14rem .5rem; border-radius:999px; white-space:nowrap;
  background:var(--accent); color:#fff;
}

/* ── итог пополнения ── */
.topup-summary{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem .85rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg-raised);
  font-size:.85rem;
}
.topup-summary.filled{ border-color:var(--accent-line); background:var(--accent-soft); }
.topup-summary .ts-tokens{ font-weight:700; font-variant-numeric:tabular-nums; }
.topup-summary .ts-sub{ font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.topup-summary .ts-price{ font-weight:700; font-size:1rem; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ── Chatwoot: на мобиле поднимаем пузырь виджета над нижней навигацией ── */
@media (max-width:900px){
  .woot-widget-bubble{ bottom:calc(64px + env(safe-area-inset-bottom)) !important; }
}

/* ── skeleton ── */
.skel{
  position:relative; overflow:hidden; border-radius:6px;
  background:rgba(255,255,255,.05); color:transparent !important; user-select:none;
}
.skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  animation:skel-slide 1.3s infinite;
}
@keyframes skel-slide{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }

/* ── пустые состояния ── */
.empty-state{
  text-align:center; padding:2.2rem 1rem; color:var(--muted); font-size:.85rem;
}
.empty-state i{ font-size:1.6rem; display:block; margin-bottom:.5rem; opacity:.5; }

/* ── история на мобилке: прячем второстепенные колонки ── */
@media (max-width:640px){
  .hide-sm{ display:none !important; }
}

/* фокус-состояния для клавиатуры */
.nav-item:focus-visible, .btn:focus-visible, .tb-act:focus-visible,
.model-chip:focus-visible, .conn-tab:focus-visible, .scn-card:focus-visible{
  outline:2px solid var(--accent-line); outline-offset:2px;
}