/* LexAtlas — общая оболочка сайта: токены главной страницы + шапка, подвал, секции, карточки, кнопки.
   Значения ВЗЯТЫ с главной (web/index.html), не придуманы. Подключают: главная, /pricing, кабинет /account/.
   Шапка и подвал не несут inline-стилей (CSP кабинета: style-src 'self'). */
:root{
  --bg:#05060a;
  --accent-1:#7c3aed;
  --accent-2:#a855f7;
  --glow:rgba(124,58,237,.35);
  --text:#e2e8f0;
  --muted:#94a3b8;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,Menlo,monospace;
  --lx-card1:#121a33;
  --lx-card2:#0e1533;
  --lx-border:rgba(255,255,255,.07);
  --lx-border-hi:rgba(168,85,247,.45);
  --lx-p3:#c084fc;
  --lx-ok:#22c55e;
  --lx-err:#fca5a5;
  --lx-warn-bg:rgba(251,191,36,.12);
  --lx-warn-ink:#fcd34d;
  --lx-ghost:rgba(148,163,184,.4);
}

/* ---------- страница-оболочка (не главная: у той свой фон со звёздами) ---------- */
body.lx{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 900px 520px at 50% 0, rgba(124,58,237,.16), transparent 65%),
    var(--bg);
  background-repeat:no-repeat;
  overflow-wrap:break-word;
}
body.lx *{ box-sizing:border-box; }
:where(.lx-main) a{ color:var(--lx-p3); }
.lx-main{ flex:1; padding-top:112px; }

/* ---------- шапка (как на главной) ---------- */
.lx-header, .mmenu{ line-height:normal; }
.lx-header{ position:absolute; top:26px; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between; padding:0 6vw; }
.topbar-nav{ display:flex; align-items:center; gap:32px; }
.topbar-nav a{ color:#c9d2e0; text-decoration:none; font-size:18px; font-weight:450; letter-spacing:-.01em; transition:color .18s; white-space:nowrap; }
.topbar-nav a:hover, .topbar-nav a.active{ color:#ffffff; }
.burger{ display:none; width:40px; height:40px; padding:9px 8px; flex-direction:column; justify-content:space-between; background:none; border:0; cursor:pointer; z-index:55; margin:0; }
.burger span{ display:block; height:2px; border-radius:2px; background:#e8ecf5; }
.mmenu{ display:none; position:fixed; inset:0 0 auto 0; z-index:45; padding:84px 6vw 30px; flex-direction:column; gap:20px; background:rgba(10,18,38,.97); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08); }
.mmenu.on{ display:flex; }
.mmenu a{ color:#e8ecf5; font-size:17px; text-decoration:none; }
.mmenu a.active{ color:var(--lx-p3); }
.lx-right{ display:flex; align-items:center; gap:18px; }
.signin{ color:#e8ecf5; text-decoration:none; font-size:18px; font-weight:450; letter-spacing:-.01em; white-space:nowrap; padding:6px 14px; border:1px solid rgba(201,210,224,.38); border-radius:8px; transition:border-color .18s,color .18s; }
.signin:hover, .signin.active{ color:#fff; border-color:#fff; }
.lx-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.lx-brand svg{ display:block; }
.lx-wm{ font-size:18px; letter-spacing:-.01em; color:#b9c3d6; font-weight:350; }
.lx-wm b{ color:#fff; font-weight:750; }
.lx-lang{ display:flex; align-items:center; gap:2px; font-size:14px; font-weight:500; letter-spacing:.04em; }
.lx-lang a{ color:#8f9bb3; text-decoration:none; padding:4px 6px; border-radius:6px; }
.lx-lang a:hover{ color:#fff; }
.lx-lang a.active{ color:#fff; background:rgba(201,210,224,.12); }
@media (max-width:640px){
  .topbar-nav{ display:none; }
  .burger{ display:flex; }
  .signin{ font-size:15px; padding:5px 11px; }
}

/* ---------- подвал (как мини-подвал главной) ---------- */
.lx-footer{
  margin:84px 6vw 0;
  padding:22px 0 28px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted);
}
.lx-footer .wm{ font-size:15px; color:#b9c3d6; font-weight:350; letter-spacing:-.01em; }
.lx-footer .wm b{ color:#fff; font-weight:750; }
@media (max-width:640px){ .lx-footer{ justify-content:center; text-align:center; } }

/* ---------- секции, заголовки ---------- */
.lx-section{ padding:0 6vw 24px; }
.lx-container{ max-width:1200px; margin:0 auto; }
.lx-container.narrow{ max-width:760px; }
.lx-kicker{ margin:0 0 18px; font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
body.lx h1{ margin:0 0 12px; font-size:clamp(1.7rem, 3.2vw, 2.6rem); font-weight:700; line-height:1.12; letter-spacing:-.01em; color:var(--text); }
body.lx h2{ margin:0 0 12px; font-size:clamp(1.25rem, 1.9vw, 1.6rem); font-weight:700; letter-spacing:-.01em; line-height:1.28; }
body.lx h3{ margin:18px 0 4px; font-size:1.02rem; font-weight:650; }
.lx-sub{ margin:0 0 32px; font-size:1.02rem; color:var(--muted); max-width:640px; }
body.lx p{ margin:0 0 12px; }
body.lx ul{ margin:8px 0 12px; padding-left:20px; }
body.lx code{ font-family:var(--mono); font-size:.92em; padding:2px 7px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--lx-border); word-break:break-word; }
.muted{ color:var(--muted); }
.lx-pre{ margin:0 0 14px; padding:14px 16px; overflow-x:auto; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--lx-border); font-family:var(--mono); font-size:13.5px; line-height:1.55; color:var(--text); }
body.lx .lx-pre code{ padding:0; border:0; background:none; word-break:normal; white-space:pre; font-size:inherit; }
body.lx ol{ margin:8px 0 12px; padding-left:22px; }

/* ---------- карточки ---------- */
.lx-card{
  background:linear-gradient(160deg,var(--lx-card1),var(--lx-card2));
  border:1px solid var(--lx-border); border-radius:16px;
  padding:24px 22px; margin:0 0 16px;
  color:inherit;
}
.lx-card > :last-child{ margin-bottom:0; }
.lx-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.lx-grid .lx-card{ margin:0; }

/* ---------- кнопки ---------- */
.lx-btn{
  display:inline-flex; align-items:center; padding:12px 22px; border:0; border-radius:10px;
  font:inherit; font-size:14.5px; font-weight:600; color:#fff; cursor:pointer; text-decoration:none; white-space:nowrap;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 4px 26px rgba(124,58,237,.42);
  transition:filter .18s ease;
}
.lx-btn:hover{ filter:brightness(1.12); }
.lx-btn-ghost{ background:none; box-shadow:none; color:#c9d2e0; border:1px solid var(--lx-ghost); padding:11px 20px; }
.lx-btn-ghost:hover{ color:#fff; border-color:rgba(232,236,245,.75); filter:none; }

/* ---------- таблицы и поля ---------- */
.lx-scroll{ overflow-x:auto; }
.lx-table{ width:100%; border-collapse:collapse; font-size:14px; }
.lx-table th, .lx-table td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--lx-border); vertical-align:top; }
.lx-table th{ color:var(--muted); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; }
.lx-input{
  width:100%; min-width:0; padding:12px 14px; border-radius:10px; font:inherit; font-size:14px;
  color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--lx-border); outline:none;
  transition:border-color .18s ease;
}
.lx-input::placeholder{ color:rgba(148,163,184,.75); }
.lx-input:focus{ border-color:rgba(168,85,247,.6); }