/* ============================================================================
   AegisVPN — Центр помощи / FAQ (help), redesign. Светлая тема, Golos Text.
   Порт дизайна из Claude Design (Help.html / help-page.jsx). Без Bootstrap/jQuery.
   Классы под .help-root ; логика (аккордеон/поиск/фильтр) — help.js.
   Контент FAQ статичный ({% trans %}); бэкенд-вызовов нет (действия — в кабинете/
   возврате/поддержке). Легаси sendKey/cancelSubscription/support() НЕ переносятся.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap");

.help-root {
  --page-bg:#F5F5F7; --card:#FFFFFF; --card-2:#F4F4F6; --card-3:#ECECEF;
  --fg-1:#1A1A1A; --fg-2:#6E6E73; --fg-3:#8E8E93; --fg-4:#B0B0B5;
  --border-1:rgba(0,0,0,0.06); --border-2:rgba(0,0,0,0.10); --border-input:#D5D5DA;
  --brand-yellow:#FFB71D; --brand-yellow-hover:#FFC845; --brand-yellow-press:#E5A41A;
  --brand-orange:#FF6400; --tg-blue:#0E80D7; --danger:#E5320F; --success:#0BBB59; --warning:#EA9924;
  --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:120ms; --dur-med:220ms;
  --font-display:"Golos Text","Inter",system-ui,-apple-system,sans-serif;
  --font-body:"Golos Text","Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  background:var(--page-bg); color:var(--fg-1); min-height:100vh; overflow-x:hidden;
  font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.help-root *, .help-root *::before, .help-root *::after { box-sizing:border-box; }
.help-root [hidden] { display:none !important; }
.help-root button:hover:not(:disabled) { filter:brightness(0.985); }
.help-root button:active:not(:disabled) { transform:scale(0.99); }
/* оранжевые — ТОЛЬКО ссылки внутри текста ответов/пустого состояния,
   не трогаем кнопки навигации и CTA (иначе перебьёт их цвета) */
.help-a-text a, .help-empty-text a { color:var(--brand-orange); }

/* ───────── Header (общий с кабинетом) ───────── */
.cab-header { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 48px 12px 72px; background:rgba(255,255,255,0.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border-1); position:sticky; top:0; z-index:10; }
.cab-header-left { display:inline-flex; align-items:center; gap:14px; flex-shrink:0; min-width:0; }
.cab-logo { cursor:pointer; display:inline-flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; }
.cab-logo img { width:38px; height:38px; display:block; flex-shrink:0; border-radius:8px; }
.cab-logo-word { font:600 18px/1 var(--font-display); letter-spacing:-0.025em; color:var(--fg-1); }
.cab-header-right { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; justify-content:flex-end; }
.cab-divider { width:1px; height:22px; background:var(--border-2); margin:0 4px; flex-shrink:0; }
.cab-nav-btn { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border:none; border-radius:999px; background:var(--card-2); color:var(--fg-1); font:600 13px/1 var(--font-display); letter-spacing:-0.005em; cursor:pointer; white-space:nowrap; box-sizing:border-box; text-decoration:none; transition:background var(--dur-fast) var(--ease-out); }
.cab-nav-btn--outline { background:transparent; border:1px solid var(--border-2); }
.cab-nav-btn--active { background:#1A1A1A; color:#fff; cursor:default; }
.cab-nav-btn:hover { background:var(--card-3); }
.cab-nav-btn--outline:hover { background:var(--card-2); }
.cab-nav-btn--active:hover { background:#1A1A1A; }
.cab-nav-btn svg { display:block; flex-shrink:0; }
.cab-langwrap { position:relative; }
.cab-lang-switch { height:36px; padding:0 10px 0 12px; border-radius:12px; border:1px solid var(--border-2); background:var(--card); display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--fg-1); font:600 13px/1 var(--font-display); letter-spacing:0.02em; transition:background var(--dur-fast) var(--ease-out); }
.cab-lang-switch:hover { background:var(--card-2); }
.cab-lang-switch .code { text-transform:uppercase; }
.cab-lang-switch .chev { color:var(--fg-3); transition:transform var(--dur-fast) var(--ease-out); }
.cab-langwrap.open .cab-lang-switch .chev { transform:rotate(180deg); }
.cab-lang-bridge { position:absolute; top:100%; left:0; right:0; height:8px; }
.cab-lang-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:160px; padding:6px; background:var(--card); border-radius:12px; border:1px solid var(--border-1); box-shadow:0 12px 32px rgba(0,0,0,0.14); display:flex; flex-direction:column; gap:2px; z-index:30; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.cab-langwrap.open .cab-lang-menu { opacity:1; transform:translateY(0); pointer-events:auto; }
.cab-lang-menu button { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:8px; background:transparent; border:none; cursor:pointer; text-align:left; font:500 13px/1 var(--font-body); color:var(--fg-1); width:100%; }
.cab-lang-menu button:hover, .cab-lang-menu button[aria-current="true"] { background:var(--card-2); }
.cab-lang-menu button .c { font:700 11px/1 var(--font-display); letter-spacing:0.06em; color:var(--fg-3); text-transform:uppercase; min-width:18px; }
.cab-lang-menu button .l { display:inline-flex; align-items:center; gap:8px; }
.cab-lang-menu button .ck { color:var(--fg-1); display:none; }
.cab-lang-menu button[aria-current="true"] .ck { display:block; }
.cab-header-mobile { display:none; position:relative; }
.cab-burger { height:44px; border-radius:14px; padding:0 14px 0 12px; border:1px solid var(--border-2); background:var(--card); display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--fg-1); font:600 14px/1 var(--font-display); letter-spacing:-0.01em; }
.cab-mobile-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:240px; padding:8px; background:var(--card); border-radius:16px; border:1px solid var(--border-1); box-shadow:0 12px 32px rgba(0,0,0,0.14); display:flex; flex-direction:column; gap:4px; z-index:30; }
.cab-mm-item { display:flex; align-items:center; gap:12px; padding:12px; border:none; background:transparent; border-radius:10px; font:500 15px/1 var(--font-body); color:var(--fg-1); cursor:pointer; text-align:left; text-decoration:none; }
.cab-mm-item:hover, .cab-mm-item[aria-current="true"] { background:var(--card-2); }
.cab-mm-divider { height:1px; background:var(--border-1); margin:4px; }
.cab-mm-lang { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; gap:12px; }
.cab-mm-lang .lbl { font:500 14px/1 var(--font-display); color:var(--fg-2); }
.cab-mm-lang .seg { display:inline-flex; background:var(--card-2); border-radius:999px; padding:3px; }
.cab-mm-lang .seg button { border:none; cursor:pointer; padding:6px 14px; border-radius:999px; font:600 12px/1 var(--font-display); background:transparent; color:var(--fg-2); }
.cab-mm-lang .seg button[aria-current="true"] { background:#1A1A1A; color:#fff; }

/* ───────── Buttons ───────── */
.cab-btn { border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:999px; font-family:var(--font-display); font-weight:600; text-decoration:none; transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); white-space:nowrap; }
.cab-btn--md { padding:12px 20px; font-size:15px; }
.cab-btn--tgblue { background:var(--tg-blue); color:#fff; }
.cab-btn--tgblue:hover { background:#0B6AB3; filter:none; }
.cab-btn--tgblue:active { background:#0A5E9E; transform:translateY(1px); }
.cab-btn svg { display:block; flex-shrink:0; }

/* ───────── Back to cabinet (в шапке) ───────── */
.help-back { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; height:36px; padding:0 16px 0 12px; border-radius:999px; font:600 14px/1 var(--font-display); letter-spacing:-0.01em; text-decoration:none; border:1.5px solid transparent; transition:background var(--dur-fast) var(--ease-out); }
.help-back--yellow { background:var(--brand-yellow); color:#1A1A1A; }
.help-back--yellow:hover { background:var(--brand-yellow-press); }
.help-back svg { transition:transform var(--dur-fast) var(--ease-out); }
.help-back:hover svg { transform:translateX(-2px); }

/* ───────── Container ───────── */
.help-container { max-width:880px; margin:0 auto; padding:32px 32px 40px; }

/* ───────── Hero ───────── */
.help-hero { margin-bottom:36px; }
.help-eyebrow { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font:700 12.5px/1 var(--font-display); letter-spacing:0.08em; text-transform:uppercase; color:#1A1A1A; position:relative; padding:2px 4px; isolation:isolate; }
.help-eyebrow .help-eyebrow-ic { display:none; }
.help-eyebrow::before { content:""; position:absolute; left:0; right:0; bottom:2px; height:9px; transform:rotate(-1.2deg); background:var(--brand-yellow); border-radius:2px; z-index:-1; }
.help-hero h1 { margin:14px 0 0; font:700 42px/1.04 var(--font-display); letter-spacing:-1.6px; color:var(--fg-1); }
.help-hero p { margin:14px 0 0; font:400 18px/1.55 var(--font-body); color:var(--fg-2); max-width:600px; }

/* ───────── Search ───────── */
.help-search { margin-top:28px; height:58px; display:flex; align-items:center; gap:12px; padding:0 16px 0 18px; border-radius:16px; background:var(--card); border:1.5px solid var(--border-2); transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.help-search:focus-within { border-color:var(--brand-yellow); box-shadow:0 0 0 4px rgba(255,183,29,0.16); }
.help-search-ic { color:var(--fg-3); display:inline-flex; flex-shrink:0; }
.help-search:focus-within .help-search-ic { color:var(--brand-yellow-press); }
.help-search input { flex:1; min-width:0; border:none; outline:none; background:transparent; font:400 16.5px/1 var(--font-body); color:var(--fg-1); letter-spacing:-0.01em; }
.help-search input::placeholder { color:var(--fg-4); }
.help-search-clear { flex-shrink:0; width:32px; height:32px; border:none; border-radius:999px; cursor:pointer; background:var(--card-2); color:var(--fg-3); display:inline-flex; align-items:center; justify-content:center; }
.help-search-clear:hover { background:var(--card-3); color:var(--fg-1); }

/* ───────── Category chips ───────── */
.help-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.help-chip { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; cursor:pointer; border:1.5px solid var(--border-2); background:var(--card); font:600 14px/1 var(--font-display); letter-spacing:-0.01em; color:var(--fg-2); white-space:nowrap; transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.help-chip:hover { border-color:var(--brand-yellow); color:var(--fg-1); }
.help-chip.on { background:#1A1A1A; border-color:#1A1A1A; color:#fff; }
.help-chip svg { display:block; flex-shrink:0; }

/* ───────── FAQ accordion ───────── */
.help-faq { display:flex; flex-direction:column; gap:12px; }
.help-item { background:var(--card); border:1px solid var(--border-1); border-radius:18px; overflow:hidden; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.help-item:hover { border-color:var(--border-2); }
.help-item.open { border-color:rgba(255,183,29,0.55); box-shadow:0 8px 26px rgba(20,20,40,0.06); }
.help-open-accent { display:none; width:100%; height:3px; background:var(--brand-yellow); }
.help-item.open .help-open-accent { display:block; }
.help-q { width:100%; display:flex; align-items:center; gap:15px; padding:19px 22px; background:transparent; border:none; cursor:pointer; text-align:left; }
.help-q-ic { width:38px; height:38px; flex-shrink:0; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:var(--card-2); color:var(--brand-yellow-press); transition:background var(--dur-fast) var(--ease-out); }
.help-item.open .help-q-ic { background:rgba(255,183,29,0.18); }
.help-q-ic svg { display:block; }
.help-q-text { flex:1; min-width:0; font:600 17px/1.35 var(--font-display); letter-spacing:-0.015em; color:var(--fg-1); }
.help-chev { flex-shrink:0; display:inline-flex; color:var(--fg-3); transition:transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.help-item.open .help-chev { transform:rotate(180deg); color:var(--brand-yellow-press); }
.help-a { display:none; overflow:hidden; }
.help-item.open .help-a { display:block; }
.help-a-text { margin:0; padding:0 24px 22px 75px; font:400 15.5px/1.7 var(--font-body); color:var(--fg-2); text-wrap:pretty; }

/* ───────── Empty state ───────── */
.help-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:52px 24px; background:var(--card); border:1px solid var(--border-1); border-radius:20px; }
.help-empty-ic { width:56px; height:56px; border-radius:16px; background:var(--card-2); color:var(--fg-3); display:inline-flex; align-items:center; justify-content:center; margin-bottom:4px; }
.help-empty-title { font:700 18px/1.2 var(--font-display); letter-spacing:-0.02em; color:var(--fg-1); }
.help-empty-text { font:400 14.5px/1.55 var(--font-body); color:var(--fg-3); max-width:360px; }
.help-empty-text b { color:var(--fg-2); }

/* ───────── Support card ───────── */
.help-support { margin-top:30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:var(--card); border:1px solid var(--border-1); border-left:4px solid var(--brand-yellow); border-radius:22px; padding:26px 28px; }
.help-support-ic { width:56px; height:56px; flex-shrink:0; border-radius:16px; background:rgba(255,183,29,0.20); color:var(--brand-yellow-press); display:inline-flex; align-items:center; justify-content:center; }
.help-support-main { flex:1; min-width:220px; }
.help-support-main h3 { margin:0; font:700 19px/1.2 var(--font-display); letter-spacing:-0.02em; color:var(--fg-1); }
.help-support-main p { margin:7px 0 0; font:400 14.5px/1.5 var(--font-body); color:var(--fg-2); }
.help-support-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ───────── Footer ───────── */
.help-footer { max-width:880px; margin:8px auto 0; padding:28px 32px 40px; border-top:1px solid var(--border-1); text-align:center; font:500 13px/1.5 var(--font-display); color:var(--fg-3); letter-spacing:-0.01em; }

/* ───────── Responsive ───────── */
@media (max-width:760px) {
  .cab-header { padding:10px 16px; gap:8px; }
  .cab-header-right { display:none; }
  .cab-header-mobile { display:block; flex-shrink:0; }
  .cab-logo-word { display:none; }
}
.help-container { /* base padding set above */ }
@media (max-width:720px) {
  .help-container { padding:22px 16px 28px; }
  .help-footer { padding:24px 16px 32px; }
}
@media (max-width:620px) {
  .help-hero h1 { font-size:31px; letter-spacing:-1px; }
  .help-hero p { font-size:16px; }
  .help-q { padding:16px 16px; gap:12px; }
  .help-q-text { font-size:15.5px; }
  .help-a-text { padding:0 18px 18px 18px; }
}
@media (max-width:560px) {
  /* иконка + «Не нашли ответ?» с текстом — в одну строку (иконка слева),
     кнопка — во всю ширину снизу. min-width:0 чтобы текст не переносился под иконку. */
  .help-support { gap:14px 16px; padding:22px 20px; align-items:flex-start; }
  .help-support-ic { width:48px; height:48px; align-self:flex-start; }
  .help-support-main { min-width:0; flex:1 1 0; }
  .help-support-actions { width:100%; }
  .help-support-actions > * { flex:1; }
}