/* GPTSubs — общие стили сайта (навигация, футер, чат, страницы) */
:root {
  --bg:#0A0B0D; --panel:#121318; --panel-2:#16171C; --panel-3:#1c1e24;
  --line:rgba(255,255,255,.07); --line-soft:rgba(255,255,255,.045);
  --ink:#ECEEF1; --muted:#7C808A; --muted-2:#5C606A;
  --brand:#4C9DF0; --brand-dim:#2f6dbf; --brand-btn:#3D8BFD; --brand-btn-h:#5AA7FF;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }

.site-wrap { max-width:1120px; margin:0 auto; padding:0 20px; }

/* header / nav */
.site-header { position:sticky; top:0; z-index:60; backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--bg) 84%, transparent); border-bottom:1px solid var(--line-soft); }
.site-nav { display:flex; align-items:center; height:58px; gap:12px; }
.site-links { margin-left:auto; }
.site-logo { font-size:20px; font-weight:800; letter-spacing:-.03em; color:var(--ink); flex:none; }
.site-logo .s { color:var(--brand); }
.site-links { display:flex; gap:6px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.site-links::-webkit-scrollbar { display:none; }
.site-links a { font-size:13.5px; color:var(--muted); padding:7px 11px; border-radius:8px; white-space:nowrap; transition:color .15s,background .15s; }
.site-links a:hover { color:var(--ink); background:var(--panel-2); }
.site-links a.active { color:var(--brand); }
.site-nav-brand { display:flex; align-items:center; flex:1; min-width:0; max-width:62%; gap:0; }
.trust-nav { flex:1; text-align:center; font-size:12.5px; color:var(--muted); white-space:nowrap;
  padding:0 14px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.trust-nav b { color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600; }
.site-magazin { flex:none; font-size:13.5px; color:var(--muted); padding:7px 11px; border-radius:8px;
  white-space:nowrap; transition:color .15s,background .15s; }
.site-magazin:hover { color:var(--ink); background:var(--panel-2); }
.site-magazin.active { color:var(--brand); }

/* мобильное меню «три точки» (кнопка в шапке и в чате видна только на телефонах) */
.site-menu-btn { display:none; background:none; border:none; color:var(--ink); cursor:pointer;
  width:38px; height:38px; border-radius:9px; flex:none; place-items:center; padding:0; }
.site-menu-btn svg { width:20px; height:20px; fill:currentColor; }
.site-menu { position:fixed; top:60px; right:12px; z-index:80; min-width:230px; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px;
  box-shadow:0 16px 48px rgba(0,0,0,.5); flex-direction:column; }
.site-menu.open { display:flex; }
.site-menu .m-trust { padding:10px 12px 10px; font-size:12.5px; color:var(--muted);
  border-bottom:1px solid var(--line-soft); margin-bottom:6px; }
.site-menu .m-trust b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.site-menu a { padding:11px 12px; border-radius:9px; font-size:14.5px; color:var(--ink); }
.site-menu a:hover, .site-menu a:active { background:var(--panel-2); }
.site-menu a.active { color:var(--brand); }

/* footer */
.site-footer { border-top:1px solid var(--line-soft); padding:24px 0 40px; margin-top:56px; }
.site-foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.site-foot .fl { display:flex; gap:18px; flex-wrap:wrap; }
.site-foot a { color:var(--muted); font-size:13.5px; }
.site-foot a:hover { color:var(--brand); }
.site-foot .copy { color:var(--muted-2); font-size:13px; }

/* generic page content */
.page { padding:34px 0 8px; }
.page h1 { font-size:clamp(24px,4.4vw,36px); letter-spacing:-.025em; font-weight:700; margin:0 0 10px; text-wrap:balance; }
.page .sub { color:var(--muted); margin:0 0 28px; max-width:none; font-size:15px; line-height:1.55; }
.page h2 { font-size:20px; letter-spacing:-.015em; margin:32px 0 12px; }
.page h2.instr-head { display:flex; align-items:center; gap:10px; }
.instr-ic { width:24px; height:24px; border-radius:6px; object-fit:cover; flex:none; }
.instr-brand { display:inline-flex; align-items:center; gap:8px; font-size:20px; font-weight:640; letter-spacing:-.015em; color:var(--ink); }
.instr-card-col { display:flex; flex-direction:column; gap:12px; height:100%; }
.cards.cards-branded { margin-top:32px; align-items:stretch; }
.cards.cards-branded .card2 { flex:1; }

/* cards grid */
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.cards.cards-1 { grid-template-columns:1fr; }
.card2 { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.card2 h3 { margin:0 0 8px; font-size:16px; font-weight:640; display:flex; align-items:center; gap:9px; }
.card2 .ic { width:26px; height:26px; border-radius:7px; object-fit:cover; flex:none; }
.card2 ol, .card2 ul { margin:0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.65; }
.card2 li { margin:3px 0; }
.card2 a { color:var(--brand); }
.card2 p { color:var(--muted); font-size:14px; margin:0 0 8px; line-height:1.6; }
.instr-video { width:100%; border-radius:10px; margin:0 0 12px; background:#000; display:block; aspect-ratio:16/9; object-fit:contain; }
.note { border-left:2px solid var(--brand-dim); padding:10px 14px; background:var(--panel-2); border-radius:0 10px 10px 0;
  color:var(--muted); font-size:13.5px; margin:14px 0; }
.note b { color:var(--ink); }

.btn-link { display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:11px;
  background:var(--brand-btn); color:#fff; font-weight:600; font-size:15px; transition:background .15s,transform .15s; }
.btn-link:hover { background:var(--brand-btn-h); transform:translateY(-1px); }

/* referral steps */
.steps { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.step { display:flex; gap:14px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px 17px; }
.step .n { font-family:var(--mono); color:var(--brand); font-size:14px; font-weight:600; flex:none; width:24px; }
.step .t { font-size:14.5px; }
.step .t b { color:var(--ink); }
.step .t span { color:var(--muted); }

/* support chat */
.chat-fab { position:fixed; right:18px; bottom:18px; z-index:70; width:56px; height:56px; border-radius:50%;
  background:var(--brand-btn); border:none; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.4); display:grid; place-items:center;
  transition:transform .16s,background .16s; }
.chat-fab:hover { background:var(--brand-btn-h); transform:translateY(-2px); }
.chat-fab svg { width:26px; height:26px; fill:#fff; }
.chat-fab .badge { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; border-radius:9px; background:#e0574f;
  color:#fff; font-size:11px; font-weight:700; display:none; align-items:center; justify-content:center; padding:0 5px; }

.chat-panel { position:fixed; right:18px; bottom:18px; z-index:71; width:360px; max-width:calc(100vw - 36px); height:580px;
  max-height:calc(100vh - 80px); background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:none; flex-direction:column; box-shadow:0 16px 48px rgba(0,0,0,.5); }
.chat-new-msgs { position:absolute; bottom:68px; left:50%; transform:translateX(-50%); z-index:3;
  background:var(--brand-btn); color:#fff; border:none; border-radius:20px; padding:8px 16px;
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.35);
  white-space:nowrap; transition:background .15s,transform .15s; }
.chat-new-msgs:hover { background:var(--brand-btn-h); transform:translateX(-50%) translateY(-1px); }
.chat-new-msgs[hidden] { display:none !important; }
.chat-panel.open { display:flex; }
.chat-head { padding:14px 16px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; }
.chat-head .av { width:34px; height:34px; border-radius:50%; background:var(--brand-btn); display:grid; place-items:center; font-weight:700; color:#fff; flex:none; }
.chat-head .ti { flex:1; }
.chat-head .ti b { font-size:14px; display:block; }
.chat-head .ti span { font-size:12px; color:#5fbf7f; }
.chat-head .x { background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; }
.chat-head .chat-menu-btn { display:none; background:none; border:none; color:var(--muted); cursor:pointer;
  width:34px; height:34px; place-items:center; padding:0; flex:none; }
.chat-head .chat-menu-btn svg { width:20px; height:20px; fill:currentColor; }
.chat-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
.chat-msg { max-width:82%; padding:9px 12px; border-radius:13px; font-size:13.5px; line-height:1.45; word-wrap:break-word;
  display:flex; flex-direction:column; gap:6px; }
.chat-msg.user { align-self:flex-end; background:var(--brand-btn); color:#fff; border-bottom-right-radius:4px; }
.chat-msg.admin { align-self:flex-start; background:var(--panel-3); color:var(--ink); border-bottom-left-radius:4px; }
.chat-msg.sys { align-self:center; color:var(--muted-2); font-size:12px; background:none; text-align:center; }
.chat-img-wrap { position:relative; display:inline-block; max-width:100%; cursor:zoom-in; line-height:0; }
.chat-img-wrap .chat-img { max-width:100%; border-radius:8px; display:block; }
.chat-img-lens { position:absolute; inset:0; display:grid; place-items:center; border-radius:8px;
  background:rgba(0,0,0,.38); opacity:0; transition:opacity .15s; pointer-events:none; }
.chat-img-wrap:hover .chat-img-lens { opacity:1; }
.chat-img-lens svg { width:30px; height:30px; fill:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.chat-img-wrap.zoomed { position:fixed; inset:0; z-index:90; max-width:none; width:100%; height:100%;
  display:grid; place-items:center; background:rgba(0,0,0,.82); padding:24px; cursor:zoom-out; border-radius:0; }
.chat-img-wrap.zoomed .chat-img { max-width:min(94vw,720px); max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:10px; }
.chat-img-wrap.zoomed .chat-img-lens { display:none; }
.chat-msg .chat-file { color:inherit; text-decoration:underline; font-size:13px; word-break:break-all; }
.chat-msg.user .chat-file { color:#fff; }
.chat-msg .chat-cap { font-size:12.5px; opacity:.92; }
.chat-foot { border-top:1px solid var(--line-soft); padding:10px; display:flex; gap:8px; align-items:center; }
.chat-foot input[type="text"], .chat-foot #chatInput { flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; color:var(--ink);
  font:inherit; font-size:14px; padding:10px 12px; outline:none; min-width:0; }
.chat-foot #chatInput:focus { border-color:var(--brand-dim); }
.chat-foot .chat-attach { background:var(--panel-2); border:1px solid var(--line); border-radius:10px; width:38px; height:38px;
  cursor:pointer; display:grid; place-items:center; flex:none; }
.chat-foot .chat-attach:hover { border-color:var(--brand-dim); }
.chat-foot .chat-attach svg { width:17px; height:17px; fill:var(--muted); }
.chat-foot button#chatSend { background:var(--brand-btn); border:none; border-radius:10px; width:42px; height:38px; cursor:pointer; display:grid; place-items:center; flex:none; }
.chat-foot button#chatSend svg { width:18px; height:18px; fill:#fff; }

.chat-preview { display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--line-soft);
  background:var(--panel-2); font-size:12.5px; color:var(--muted); }
.chat-preview[hidden] { display:none !important; }
.chat-preview img { width:36px; height:36px; border-radius:6px; object-fit:cover; flex:none; }
.chat-preview span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-preview button { background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1; padding:0 4px; }

/* уведомление «поддержка ответила» (над кнопкой чата) */
.chat-toast { position:fixed; right:14px; bottom:86px; z-index:69; max-width:min(330px, calc(100vw - 28px));
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px;
  box-shadow:0 12px 40px rgba(0,0,0,.5); cursor:pointer; display:flex; gap:11px; align-items:center;
  transform:translateY(14px); opacity:0; transition:transform .28s ease,opacity .28s ease; }
.chat-toast.show { transform:translateY(0); opacity:1; }
.chat-toast .av { width:32px; height:32px; border-radius:50%; background:var(--brand-btn); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px; flex:none; }
.chat-toast .tx { min-width:0; }
.chat-toast .tx b { display:block; font-size:13.5px; color:var(--ink); }
.chat-toast .tx span { display:block; font-size:12.5px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:250px; }

/* bookmark hint — уведомление справа сверху */
.bm-hint { position:fixed; top:18px; right:18px; z-index:65; width:min(340px, calc(100vw - 36px));
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 52px 16px 18px;
  font-size:13.5px; color:var(--muted); box-shadow:0 12px 40px rgba(0,0,0,.45); line-height:1.55;
  transform:translateX(calc(100% + 28px)); opacity:0; transition:transform .34s ease,opacity .34s ease; text-align:left; }
.bm-hint.show { transform:translateX(0); opacity:1; }
.bm-hint b { color:var(--ink); }
.bm-hint a { color:var(--brand); font-weight:600; }
.bm-hint .x { position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink); cursor:pointer; font-size:24px;
  font-weight:400; line-height:1; display:grid; place-items:center; padding:0; transition:background .15s,color .15s; }
.bm-hint .x:hover { background:var(--panel-3); color:#e0574f; }

a:focus-visible, button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

@media (max-width:820px) {
  .trust-nav { display:none; }
  .site-nav-brand { max-width:none; flex:none; }
}
@media (max-width:640px) {
  /* Шапка на телефоне: логотип + счётчик пользователей, разделы — в меню «⋮» */
  .site-wrap { padding:0 16px; }
  .site-nav { gap:8px; height:54px; }
  .site-magazin { display:none; }
  .site-links { display:none; }
  .site-menu-btn { display:grid; margin-left:auto; }
  .site-menu { top:56px; }
  .page { padding:24px 0 6px; }
  .page h2 { margin:26px 0 10px; }
  .card2 { padding:16px 16px; }
  .instr-brand { font-size:18px; }
  .cards.cards-branded .instr-card-col { gap:10px; }
  .site-footer { margin-top:40px; padding:22px 0 34px; }
  .site-foot { flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width:600px) {
  .cards { grid-template-columns:1fr; }
  /* Чат на телефоне — во весь экран, с «⋮» и крестиком в шапке */
  .chat-panel { inset:0; width:100%; max-width:none; height:100dvh; max-height:none; border-radius:0; border:none; }
  .chat-head { padding-top:calc(14px + env(safe-area-inset-top)); }
  .chat-head .chat-menu-btn { display:grid; }
  .chat-foot { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  /* 16px — iOS не приближает экран при фокусе на поле ввода */
  .chat-foot #chatInput { font-size:16px; }
  html.chat-lock, html.chat-lock body { overflow:hidden; }
  .chat-fab { right:14px; bottom:14px; }
  .chat-msg { max-width:88%; }
  .bm-hint { top:12px; right:12px; width:min(320px, calc(100vw - 24px)); padding:14px 48px 14px 14px; font-size:13px; }
  .bm-hint .x { width:32px; height:32px; font-size:22px; }
}
@media (max-width:380px) {
  .site-logo { font-size:18px; }
  .site-links a { font-size:12.5px; padding:6px 8px; }
  .page h1 { font-size:22px; }
}