/* ==========================================================================
   Gwarden AI — Studio Interface v2.6
   Palette: Obsidian #080809 · Machined Graphite #111114 · Electric Lime #d1fe17
   Brand Violet #7331db · Onest + Monospace Tabular
   ========================================================================== */

:root {
  color-scheme: dark;
  --bg: #08080a;
  --bg-elev: #0d0d10;
  --surface: #121216;
  --surface-2: #17171c;
  --surface-3: #1e1e25;
  --surface-glass: rgba(18, 18, 22, 0.82);
  --line: rgba(255, 255, 255, 0.13);
  --line-dim: rgba(255, 255, 255, 0.07);
  --line-bright: rgba(255, 255, 255, 0.22);
  --specular: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --txt: #f5f6f8;
  --muted: #a0a3ad;
  --dim: #686b75;

  --acc: #d1fe17;
  --acc-hover: #dcff42;
  --acc-soft: rgba(209, 254, 23, 0.11);
  --acc-soft-2: rgba(209, 254, 23, 0.05);
  --acc-line: rgba(209, 254, 23, 0.34);

  --brand: #7331db;
  --brand-light: #b692ff;
  --brand-soft: rgba(115, 49, 219, 0.16);
  --brand-line: rgba(115, 49, 219, 0.42);

  --indigo: #818cf8;
  --indigo-soft: rgba(99, 102, 241, 0.14);
  --indigo-line: rgba(99, 102, 241, 0.38);

  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.13);
  --danger-line: rgba(248, 113, 113, 0.36);

  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;

  --font: 'Onest', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --wrap: 1320px;
  /* Реальная высота шапки (обновляется из app.js) — для sticky-элементов */
  --hdr-h: 66px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  animation: pageFade 0.28s ease both;
}

@keyframes pageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

::selection {
  background: var(--acc);
  color: #08080a;
}

a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--acc-line);
  outline-offset: 2px;
}

[id] {
  scroll-margin-top: 96px;
}

/* ── Language blocks (RU/EN/ZH/HI) ───────────────────────────────────────
   Прячем только «чужие» языки — так сохраняется нативный display
   (inline-flex у кнопок, block у карточек). */
html[data-lang="ru"] .lang-en,
html[data-lang="ru"] .lang-zh,
html[data-lang="ru"] .lang-hi,
html[data-lang="en"] .lang-ru,
html[data-lang="en"] .lang-zh,
html[data-lang="en"] .lang-hi,
html[data-lang="zh"] .lang-ru,
html[data-lang="zh"] .lang-en,
html[data-lang="zh"] .lang-hi,
html[data-lang="hi"] .lang-ru,
html[data-lang="hi"] .lang-en,
html[data-lang="hi"] .lang-zh { display: none !important; }

html[data-lang="en"] .lang-en,
html[data-lang="zh"] .lang-zh,
html[data-lang="hi"] .lang-hi { display: revert !important; }

/* ── Ambient Machined Background (GPU-only, zero blur lag) ── */
.bgfx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bgfx i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.bgfx i:nth-child(1) {
  width: 1200px;
  height: 500px;
  top: -210px;
  left: -140px;
  background: radial-gradient(closest-side, rgba(209, 254, 23, 0.048), transparent 72%);
  animation: driftA 26s ease-in-out infinite alternate;
}

.bgfx i:nth-child(2) {
  width: 1050px;
  height: 520px;
  top: 26%;
  right: -280px;
  background: radial-gradient(closest-side, rgba(115, 49, 219, 0.045), transparent 72%);
  animation: driftB 32s ease-in-out infinite alternate;
}

.bgfx i:nth-child(3) {
  width: 1300px;
  height: 520px;
  bottom: -260px;
  left: 15%;
  background: radial-gradient(closest-side, rgba(209, 254, 23, 0.032), transparent 72%);
  animation: driftC 36s ease-in-out infinite alternate;
}

@keyframes driftA { to { transform: translate(180px, 50px) scale(1.06); } }
@keyframes driftB { to { transform: translate(-150px, -60px) scale(1.08); } }
@keyframes driftC { to { transform: translate(-120px, -40px) scale(0.94); } }

.bgfx::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(1000px 580px at 50% 0%, #000 0%, transparent 80%);
  mask-image: radial-gradient(1000px 580px at 50% 0%, #000 0%, transparent 80%);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .bgfx i { animation: none !important; }
}

/* ── Top Promo & Telemetry Ribbon ── */
.top-ribbon {
  background: linear-gradient(90deg, rgba(209, 254, 23, 0.11), rgba(209, 254, 23, 0.03) 50%, rgba(115, 49, 219, 0.10));
  border-bottom: 1px solid rgba(209, 254, 23, 0.22);
  font-size: 0.8rem;
}

.top-ribbon-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 7px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ribbon-promo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--txt);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}

.ribbon-promo:hover .ribbon-link {
  color: var(--acc);
  text-decoration: underline;
}

.ribbon-tag {
  background: var(--acc);
  color: #08080a;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

.ribbon-link {
  color: var(--acc);
  font-weight: 700;
}

.ribbon-telemetry {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  display: inline-block;
  margin-right: 5px;
}

/* ── Sticky Command Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-dim);
}

.header-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.025em;
  color: var(--txt);
  padding: 6px 14px 6px 8px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-dim);
  box-shadow: var(--specular);
  transition: border-color 0.18s;
  flex-shrink: 0;
}

.brand-logo:hover {
  border-color: var(--line);
}

.brand-logo img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: contain;
}

.brand-ver {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--acc);
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  padding: 1px 6px;
  border-radius: 6px;
}

/* Segmented Primary Navigation */
.app-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: 12px;
  padding: 4px;
  box-shadow: var(--specular);
  /* Никогда не растягиваем шапку за пределы экрана: в тесном месте табы скроллятся */
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-tabs::-webkit-scrollbar {
  display: none;
}

.app-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.app-tab svg {
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.app-tab:hover {
  color: var(--txt);
  background: rgba(255, 255, 255, 0.04);
}

.app-tab.active {
  background: var(--acc);
  color: #08080a;
  font-weight: 700;
}

.app-tab.active svg {
  opacity: 1;
}

.app-tab .tab-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.app-tab.active .tab-count {
  background: rgba(8, 8, 10, 0.16);
  color: #08080a;
}

/* Right Header Controls */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cmdk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: 10px;
  padding: 7px 12px;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  min-width: 0;
}

/* Длинная подпись поиска обрезается, а не растягивает страницу */
.cmdk-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmdk-btn:hover {
  border-color: var(--line);
  color: var(--txt);
}

.cmdk-btn svg {
  width: 14px;
  height: 14px;
  color: var(--dim);
}

.cmdk-kbd {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--dim);
  background: var(--surface-2);
  border: 1px solid var(--line-dim);
  padding: 1px 5px;
  border-radius: 5px;
}

.lang-switch {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.lang-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
}

.lang-btn:hover {
  color: var(--txt);
}

.lang-btn.active {
  background: var(--surface-3);
  color: var(--acc);
}

.hdr-cab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  color: var(--acc);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 7px 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  white-space: nowrap;
}

.hdr-cab-pill:hover {
  background: rgba(209, 254, 23, 0.18);
}

.hdr-cab-pill svg {
  width: 14px;
  height: 14px;
}

/* ── Шапка страницы (hero) ──────────────────────────────────────────── */
.doc-hero {
  padding: 46px 0 26px;
}

.doc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  color: var(--acc);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.doc-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(1.65rem, 4.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.doc-hero h1 .hl {
  color: var(--acc);
}

.doc-hero-lead {
  margin: 14px 0 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

.doc-hero-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── View Containers ── */
.view-pane {
  display: none;
}

.view-pane.active {
  display: block;
  animation: viewIn 0.22s ease;
}

@keyframes viewIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--acc);
  color: #08080a;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  transition: transform 0.12s, filter 0.18s, background 0.18s, border-color 0.18s;
}

.btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn.dark {
  background: var(--surface-2);
  color: var(--txt);
  border-color: var(--line);
  box-shadow: var(--specular);
}

.btn.dark:hover {
  background: var(--surface-3);
  border-color: var(--line-bright);
  filter: none;
}

.btn.ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--line-dim);
}

.btn.ghost:hover {
  color: var(--txt);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.03);
  filter: none;
}

.btn.accent-outline {
  background: var(--acc-soft);
  color: var(--acc);
  border-color: var(--acc-line);
}

.btn.accent-outline:hover {
  background: rgba(209, 254, 23, 0.18);
  filter: none;
}

.btn.violet {
  background: var(--brand-soft);
  color: var(--brand-light);
  border-color: var(--brand-line);
}

.btn.sm {
  padding: 7px 13px;
  font-size: 0.8rem;
  border-radius: 9px;
}

.btn.xs {
  padding: 5px 10px;
  font-size: 0.74rem;
  border-radius: 7px;
}

/* ==========================================================================
   VIEW 1: MAIN SCREEN (ГЛАВНЫЙ ЭКРАН)
   ========================================================================== */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr);
  gap: 32px;
  align-items: start;
  padding: 44px 0 28px;
}

.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-dim);
  font-size: 0.78rem;
  color: var(--muted);
  box-shadow: var(--specular);
}

.hero-status-pill b {
  color: var(--acc);
  font-family: var(--mono);
}

.hero-title {
  font-size: clamp(2.15rem, 4.4vw, 3.45rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-top: 18px;
  color: var(--txt);
}

.hero-title .hl {
  color: var(--acc);
}

.hero-lead {
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.6;
  margin-top: 16px;
  max-width: 54ch;
}

/* Key Mechanics Strip */
.hero-mechanics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  margin-top: 22px;
  overflow: hidden;
  box-shadow: var(--specular);
}

.mech-cell {
  padding: 14px 16px;
}

.mech-cell + .mech-cell {
  border-left: 1px solid var(--line-dim);
}

.mech-val {
  font-family: var(--mono);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--acc);
  letter-spacing: -0.02em;
}

.mech-lbl {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hero-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dim);
  font-size: 0.8rem;
  color: var(--dim);
}

.hero-quick-links a, .hero-quick-links button {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}

.hero-quick-links a:hover, .hero-quick-links button:hover {
  color: var(--acc);
}

/* ── Connection Studio (Right Hero Workbench) ── */
.studio-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 28px 80px -24px rgba(0, 0, 0, 0.85), var(--specular);
  transition: box-shadow 0.25s, border-color 0.25s;
}

.studio-card.flash {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px var(--acc), 0 28px 80px -24px rgba(0, 0, 0, 0.85);
}

.studio-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line-dim);
  flex-wrap: wrap;
}

.studio-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.win-dots {
  display: inline-flex;
  gap: 6px;
}

.win-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}

.studio-os-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line-dim);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.studio-os-toggle button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
}

.studio-os-toggle button.on {
  background: var(--surface-3);
  color: var(--acc);
}

/* Tool Tabs */
.studio-tools {
  display: flex;
  gap: 5px;
  padding: 12px 18px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.studio-tools::-webkit-scrollbar {
  display: none;
}

.studio-tool-btn {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line-dim);
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s;
}

.studio-tool-btn:hover {
  color: var(--txt);
  border-color: var(--line);
}

.studio-tool-btn.on {
  background: var(--acc);
  color: #08080a;
  border-color: var(--acc);
  font-weight: 700;
}

/* Studio Controls (Model + Key + Host) */
.studio-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 10px;
  padding: 12px 18px;
}

.field-lbl {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--dim);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inp, .sel {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 0.8rem;
  transition: border-color 0.15s;
}

.inp:focus, .sel:focus {
  border-color: var(--acc-line);
}

.sel {
  cursor: pointer;
}

/* Code Window */
.studio-code-wrap {
  margin: 0 18px;
  background: #09090c;
  border: 1px solid var(--line-dim);
  border-radius: 12px;
  overflow: hidden;
}

.studio-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 13px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--line-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
}

.studio-pre {
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.65;
  color: #e4e6ed;
  overflow-x: auto;
  white-space: pre;
  min-height: 168px;
  max-height: 250px;
}

.studio-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 15px;
  flex-wrap: wrap;
}

.studio-foot-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.studio-model-meta {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.studio-model-meta img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
}

/* ── Section Headers ── */
.sec {
  margin-top: 68px;
}

.sec-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sec-title {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.sec-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 5px;
  max-width: 65ch;
}

/* ── Spotlight Bento (6 Flagship & Product Highlights) ── */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.spot-card {
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--specular);
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}

.spot-card:hover {
  border-color: var(--line);
  transform: translateY(-2px);
}

.spot-card.free-spot {
  border-color: var(--acc-line);
  background: linear-gradient(155deg, rgba(209, 254, 23, 0.08), var(--surface) 60%);
}

.spot-card.vip-spot {
  border-color: var(--brand-line);
  background: linear-gradient(155deg, rgba(115, 49, 219, 0.12), var(--surface) 65%);
}

.spot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.spot-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.spot-brand img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-dim);
  padding: 5px;
  object-fit: contain;
  flex-shrink: 0;
}

.spot-brand h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spot-vendor {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--dim);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-dim);
  color: var(--muted);
  white-space: nowrap;
}

.chip.lime {
  background: var(--acc-soft);
  border-color: var(--acc-line);
  color: var(--acc);
}

.chip.lime-solid {
  background: var(--acc);
  border-color: var(--acc);
  color: #08080a;
  font-weight: 800;
}

.chip.violet {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand-light);
}

.spot-desc {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.spot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line-dim);
  flex-wrap: wrap;
}

.spot-specs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Model Explorer Controls ── */
.explorer-shell {
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--specular);
}

.explorer-toolbar {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-dim);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-elev);
}

.explorer-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cat-pill {
  background: var(--surface-2);
  border: 1px solid var(--line-dim);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.14s;
}

.cat-pill:hover {
  color: var(--txt);
  border-color: var(--line);
}

.cat-pill.on {
  background: var(--acc);
  color: #08080a;
  border-color: var(--acc);
  font-weight: 700;
}

.cat-pill small {
  font-family: var(--mono);
  font-size: 0.7rem;
  opacity: 0.75;
}

.explorer-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box svg {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--dim);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px 9px 36px;
  color: var(--txt);
  font-size: 0.86rem;
}

/* Vendor Quick Strip */
.vendor-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.vendor-strip::-webkit-scrollbar {
  display: none;
}

.ven-chip {
  background: transparent;
  border: 1px solid var(--line-dim);
  color: var(--dim);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s;
}

.ven-chip:hover {
  color: var(--txt);
  border-color: var(--line);
}

.ven-chip.on {
  background: var(--acc-soft);
  border-color: var(--acc-line);
  color: var(--acc);
}

/* Models Table */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.m-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

table.m-matrix th {
  text-align: left;
  padding: 10px 9px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dim);
  border-bottom: 1px solid var(--line-dim);
  background: var(--surface);
  white-space: nowrap;
}

table.m-matrix td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--line-dim);
  vertical-align: middle;
  white-space: nowrap;
}

table.m-matrix tbody tr:hover {
  background: var(--surface-2);
}

.m-cell-main {
  display: flex;
  align-items: center;
  gap: 11px;
}

.m-cell-main img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-dim);
  padding: 4px;
  object-fit: contain;
  flex-shrink: 0;
}

.m-cell-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--txt);
}

.m-cell-id {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.73rem;
  color: var(--dim);
  cursor: pointer;
  margin-top: 1px;
}

.m-cell-id:hover {
  color: var(--acc);
}

.iq-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}

.iq-bar {
  width: 54px;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.iq-bar i {
  display: block;
  height: 100%;
  background: var(--acc);
  border-radius: 3px;
}

/* Mini Uptime Bars */
.u-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 96px;
  max-width: 120px;
}

.u-ticks {
  display: flex;
  gap: 2px;
  height: 8px;
}

.u-ticks i {
  flex: 1;
  border-radius: 1.5px;
  background: #34d399;
}

.u-ticks i.y { background: #fbbf24; }
.u-ticks i.o { background: #fb923c; }
.u-ticks i.r { background: #f87171; }

.u-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.u-sub b {
  color: var(--muted);
}

.explorer-foot {
  padding: 13px 20px;
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ── Pricing & Fast Gateways ── */
.pricing-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seg-group {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
  max-width: 100%;
}

.seg-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
}

.seg-btn:hover {
  color: var(--txt);
}

.seg-btn.on {
  background: var(--acc);
  color: #08080a;
  font-weight: 700;
}

.plans-tier-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin: 22px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.plans-tier-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-dim);
}

.plans-grid {
  /* Flex, а не grid: в grid пустая колонка последнего ряда остаётся
     (auto-fit схлопывает только треки, пустые во всём гриде), и справа
     оставалась дыра. Flex растягивает карточки последнего ряда по всей
     ширине — блоки всегда доезжают до края. */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.plan-card {
  flex: 1 1 260px;
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--specular);
  transition: border-color 0.18s, transform 0.18s;
  position: relative;
}

.plan-card:hover {
  border-color: var(--line);
  transform: translateY(-2px);
}

.plan-card.highlight-general {
  border-color: var(--acc-line);
  background: linear-gradient(160deg, rgba(209, 254, 23, 0.08), var(--surface) 60%);
}

.plan-card.highlight-dev {
  border-color: var(--brand-line);
  background: linear-gradient(160deg, rgba(115, 49, 219, 0.12), var(--surface) 60%);
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--txt);
}

.plan-price-row {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.plan-price {
  font-family: var(--mono);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}

.plan-was {
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--dim);
  text-decoration: line-through;
}

.plan-per {
  font-size: 0.74rem;
  color: var(--dim);
}

.plan-refill-box {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line-dim);
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.plan-refill-box b {
  color: var(--acc);
  font-family: var(--mono);
}

/* Fast Gateways Rack */
.gw-rack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.gw-unit {
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--specular);
  transition: border-color 0.2s;
}

.gw-unit:hover {
  border-color: var(--line);
}

.gw-unit.gw-boost { border-top: 2px solid var(--acc); }
.gw-unit.gw-dev { border-top: 2px solid var(--indigo); }
.gw-unit.gw-emergency { border-top: 2px solid var(--danger); }
.gw-unit.gw-gwarden { border-top: 2px solid var(--brand-light); }

.gw-host-box {
  padding: 7px 10px;
  border-radius: 8px;
  background: #09090c;
  border: 1px solid var(--line-dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
}

/* ==========================================================================
   VIEW 2: DOCUMENTATION (ДОКУМЕНТАЦИЯ — 3-Column Interactive Studio)
   ========================================================================== */

.docs-context-bar {
  position: sticky;
  top: var(--hdr-h);
  z-index: 80;
  background: rgba(13, 13, 16, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.docs-ctx-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.docs-ctx-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 320px;
  min-width: 0;
}

.docs-ctx-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 0;
}

.docs-ctx-item .inp, .docs-ctx-item .sel {
  width: auto;
  min-width: 170px;
  padding: 6px 10px;
  font-size: 0.76rem;
}

.docs-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 270px;
  gap: 28px;
  padding: 28px 0 64px;
  align-items: start;
}

.docs-sidebar {
  position: sticky;
  top: calc(var(--hdr-h) + 62px);
  max-height: calc(100vh - 144px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

.docs-nav-group + .docs-nav-group {
  margin-top: 18px;
}

.docs-nav-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  padding: 0 10px;
  margin-bottom: 6px;
}

.docs-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.83rem;
  color: var(--muted);
  transition: all 0.14s;
}

.docs-nav-link:hover {
  color: var(--txt);
  background: var(--surface);
}

.docs-nav-link.active {
  color: var(--acc);
  background: var(--acc-soft);
  font-weight: 600;
}

.docs-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.doc-block {
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--specular);
  min-width: 0;
}

.doc-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.doc-block h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.doc-block p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 14px;
}

.endpoint-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  background: #09090c;
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--txt);
}

.endpoint-badge b {
  color: var(--acc);
}

.doc-code-box {
  background: #09090c;
  border: 1px solid var(--line-dim);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
}

.doc-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--line-dim);
  gap: 8px;
  flex-wrap: wrap;
}

.doc-code-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.doc-code-tabs button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.doc-code-tabs button.on {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--acc);
}

.doc-code-box pre {
  padding: 15px 16px;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.65;
  color: #e4e6ed;
  overflow-x: auto;
  white-space: pre;
}

.docs-aside {
  position: sticky;
  top: calc(var(--hdr-h) + 62px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aside-card {
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--specular);
}

.aside-card h4 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dim);
  margin-bottom: 10px;
}

.kv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8rem;
}

.kv-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-dim);
  min-width: 0;
}

.kv-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kv-row span { color: var(--muted); min-width: 0; }
.kv-row b { font-family: var(--mono); color: var(--txt); overflow-wrap: anywhere; }

/* ==========================================================================
   VIEW 3: PERSONAL CABINET (ЛИЧНЫЙ КАБИНЕТ — Tabbed Workspace)
   ========================================================================== */

.cab-top-hud {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--specular);
}

.cab-mode-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  color: var(--acc);
}

.mode-badge.live {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--ok);
}

.cab-key-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #09090c;
  border: 1px solid var(--line-dim);
  border-radius: 10px;
  padding: 6px 10px;
  flex-wrap: wrap;
}

.cab-key-bar code {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--acc);
}

.cab-workspace {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 22px;
  padding: 20px 0 64px;
  align-items: start;
}

/* Основная колонка кабинета: без min-width:0 широкие таблицы
   (min-width:680px) распирали грид и тянули страницу вбок */
.cab-main-area {
  min-width: 0;
}

.cab-rail {
  position: sticky;
  top: calc(var(--hdr-h) + 20px);
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--specular);
  min-width: 0;
}

.cab-user-box {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--line-dim);
}

.cab-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--acc);
  color: #08080a;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cab-user-meta {
  min-width: 0;
}

.cab-user-name {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cab-user-plan {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--acc);
}

.cab-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cab-tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.14s;
}

.cab-tab-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cab-tab-btn:hover {
  color: var(--txt);
  background: var(--surface-2);
}

.cab-tab-btn.active {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 700;
}

.cab-rail-foot {
  padding-top: 10px;
  border-top: 1px solid var(--line-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Cabinet Panels */
.cab-pane {
  display: none;
}

.cab-pane.active {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: viewIn 0.2s ease;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--specular);
}

.kpi-card.kpi-lime {
  background: linear-gradient(155deg, rgba(209, 254, 23, 0.12), var(--surface) 65%);
  border-color: var(--acc-line);
}

.kpi-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-val {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 6px;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}

.kpi-card.kpi-lime .kpi-val {
  color: var(--acc);
}

.kpi-sub {
  font-size: 0.75rem;
  color: var(--dim);
  margin-top: 6px;
}

.panel-card {
  background: var(--surface);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--specular);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.panel-head h3 {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.two-col-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

/* Sandbox Playground */
.sandbox-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 640px;
  box-shadow: var(--specular);
}

.sandbox-bar {
  padding: 12px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.sandbox-settings {
  padding: 10px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-dim);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.sandbox-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #0a0a0d;
}

.chat-msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-msg.user {
  align-self: flex-end;
  background: var(--acc);
  color: #08080a;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}

.chat-msg.assistant {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--txt);
  border-bottom-left-radius: 4px;
}

.chat-msg.sys {
  align-self: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--line-dim);
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  max-width: 92%;
}

.sandbox-composer {
  padding: 12px 18px;
  background: var(--bg-elev);
  border-top: 1px solid var(--line-dim);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sandbox-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.sandbox-input-row textarea {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 14px;
  color: var(--txt);
  font-size: 0.9rem;
  resize: none;
  min-height: 44px;
  max-height: 130px;
}

.sandbox-telemetry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
}

/* Pay Amount Chips */
.amount-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.amt-chip {
  background: var(--surface-2);
  border: 1px solid var(--line-dim);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.14s;
}

.amt-chip:hover, .amt-chip.on {
  background: var(--acc-soft);
  border-color: var(--acc-line);
  color: var(--acc);
}

.pay-logo {
  height: 17px;
  width: auto;
  border-radius: 4px;
  object-fit: contain;
}

/* ── Modals (Cmd+K Search, Model Inspector, Auth Modal) ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 72px 16px 24px;
  overflow-y: auto;
}

.modal-backdrop.open {
  display: flex;
}

/* Auth gate: вошедший пользователь никогда не видит демо-кабинет.
   Для неавторизованного кабинет открывается полноэкранной страницей входа. */
.modal-backdrop.auth-gate {
  padding: 0;
  align-items: stretch;
  overflow-y: auto;
}

.modal-backdrop.auth-gate .modal-card {
  max-width: none;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-backdrop.auth-gate .modal-body {
  max-height: none;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 18px 40px;
}

.modal-backdrop.auth-gate #globalModalCloseBtn {
  display: none;
}

.modal-card {
  width: 100%;
  max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.85), var(--specular);
  animation: modalPop 0.18s ease;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.modal-head {
  padding: 14px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-body {
  padding: 18px;
  max-height: 72vh;
  overflow-y: auto;
}

.cmdk-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.cmdk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
}

.cmdk-item:hover {
  background: var(--surface-2);
  color: var(--txt);
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--line-dim);
  margin-top: 72px;
  padding: 40px 0 32px;
  color: var(--dim);
  font-size: 0.84rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

.footer-col h5 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-bottom: 10px;
}

.footer-col a, .footer-col button {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.84rem;
  margin: 7px 0;
  cursor: pointer;
  text-align: left;
}

.footer-col a:hover, .footer-col button:hover {
  color: var(--acc);
}

.footer-bottom {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dim);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Toast Notification ── */
.gw-toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 300;
  background: var(--surface-3);
  border: 1px solid var(--acc-line);
  color: var(--txt);
  padding: 10px 16px;
  border-radius: 11px;
  font-size: 0.84rem;
  font-weight: 600;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  gap: 8px;
}

.gw-toast.show {
  display: inline-flex;
  animation: viewIn 0.18s ease;
}

/* ── Responsive Breakpoints ── */

/* Шапка: между 861 и ~1150px не помещались подписи — ужимаем,
   чтобы страница никогда не уезжала вбок (пустая полоса справа) */
@media (max-width: 1180px) {
  .cmdk-btn > span { display: none; }
  .cmdk-btn { padding: 7px 10px; }
}

@media (max-width: 1024px) {
  .brand-ver { display: none; }
  .app-tab { padding: 7px 12px; font-size: 0.82rem; }
}

@media (max-width: 980px) {
  .hdr-cab-pill > span { display: none; }
  .hdr-cab-pill { padding: 7px 10px; }
}

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .spotlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gw-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .docs-aside { display: none; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .header-in { height: auto; padding: 10px 16px; flex-wrap: wrap; }
  .app-tabs { order: 3; width: 100%; justify-content: space-between; overflow-x: auto; }
  .app-tab { flex: 1; justify-content: center; padding: 7px 10px; font-size: 0.8rem; }
  .cmdk-btn span, .cmdk-kbd { display: none; }
  .studio-controls { grid-template-columns: minmax(0, 1fr); }
  .explorer-filters { grid-template-columns: minmax(0, 1fr); }
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-sidebar { position: static; max-height: none; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
  .docs-nav-group { display: flex; gap: 6px; align-items: center; margin: 0 !important; }
  .docs-nav-title { display: none; }
  .docs-nav-link { white-space: nowrap; background: var(--surface); border: 1px solid var(--line-dim); }
  .cab-workspace { grid-template-columns: minmax(0, 1fr); }
  .cab-rail { position: static; }
  .cab-menu { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .cab-tab-btn { width: auto; white-space: nowrap; }
  .two-col-grid { grid-template-columns: minmax(0, 1fr); }
  .sandbox-settings { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Панель настроек документации: на телефоне каждый контрол — в свою строку,
     иначе три селекта по 170px растягивали страницу до 600px */
  .docs-ctx-in { flex-direction: column; align-items: stretch; gap: 8px; }
  .docs-ctx-controls { flex-direction: column; align-items: stretch; gap: 8px; flex: 1 1 auto; }
  .docs-ctx-item { width: 100%; }
  .docs-ctx-item .inp, .docs-ctx-item .sel { flex: 1 1 0; min-width: 0; width: 100%; }
  .doc-block { padding: 18px; }
  .doc-code-head { flex-direction: column; align-items: stretch; }
}

@media (max-width: 400px) {
  /* Совсем узкие экраны: подписи табов не должны обрезаться */
  .app-tab { padding: 6px 5px; gap: 4px; }
  .app-tab svg { width: 12px; height: 12px; }
}

@media (max-width: 860px) {
  .doc-hero { padding: 32px 0 18px; }
}

@media (max-width: 560px) {
  /* Песочница: на телефоне кнопка «Отправить» уходит под поле ввода,
     иначе при крупном системном шрифте она вылезает за край карточки */
  .sandbox-input-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .sandbox-input-row textarea { width: 100%; }
  .sandbox-input-row .btn { width: 100%; height: 42px; }
  .wrap { padding: 0 14px; }
  .top-ribbon-in { padding: 6px 14px; }
  .ribbon-telemetry { display: none; }
  /* Длинные подписи кнопок переносятся, а не выпирают за экран */
  .btn { white-space: normal; text-align: center; }
  .app-tab { padding: 6px 8px; font-size: 0.75rem; gap: 5px; }
  .app-tab .tab-count { display: none; }
  .app-tab svg { width: 13px; height: 13px; }
  .hero-mechanics { grid-template-columns: minmax(0, 1fr); }
  .mech-cell + .mech-cell { border-left: 0; border-top: 1px solid var(--line-dim); }
  .spotlight-grid { grid-template-columns: minmax(0, 1fr); }
  .gw-rack { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}