/* ===== TokVenta — v14 (Monochrome black/white) =====
   Правила акцентов:
   — мятный #00E5A0: только деньги, экономия, главное действие, «живые» индикаторы;
   — синий  #6E8BFF: ссылки, код, техника, подсветка заголовков;
   — фиолетовый #7C5CFC: только логотип и брендовые бейджи. */
:root {
  --bg: #05070C; --bg2: #090D16; --card: #0E1420; --card2: #141B2B; --border: #1C2436;
  --text: #EEF2FA; --muted: #8B95AC; --accent: #6E8BFF; --accent2: #00E5A0;
  --brand: #7C5CFC; --danger: #FF4D6A; --warn: #FFB020; --orange: #FF7B42;
  --grad1: linear-gradient(135deg, #00E5A0, #00C98D);        /* CTA — мятный */
  --grad2: linear-gradient(135deg, #00E5A0, #00C8FF);        /* цифры — мята/циан */
  --grad-logo: linear-gradient(135deg, #7C5CFC, #4D7CFE);    /* только лого */
  --grad3: linear-gradient(135deg, #FF4D6A, #FF7B42);
  --f-display: 'Unbounded', 'Inter', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: rgba(0,229,160,.32); color: #fff; }
body::before { content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 34% at 14% -6%, rgba(124,92,252,.16), transparent 62%),
    radial-gradient(ellipse 36% 30% at 88% 12%, rgba(110,139,255,.13), transparent 62%),
    radial-gradient(ellipse 44% 34% at 74% 62%, rgba(0,229,160,.075), transparent 64%),
    radial-gradient(ellipse 40% 32% at 18% 88%, rgba(0,200,255,.07), transparent 64%);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.8%, 0) scale(1.07); }
  100% { transform: translate3d(2%, -1.4%, 0) scale(1.03); }
}
body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 95% 70% at 50% 0%, #000 8%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.22) 100%);
  mask-image: radial-gradient(ellipse 95% 70% at 50% 0%, #000 8%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.22) 100%);
}
/* зерно поверх всего — убирает «плоскость» чёрного фона */
html::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
/* служебный режим ?shot=1: стоп-анимации для детерминированных скриншотов */
html.shot *, html.shot *::before, html.shot *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
a { color: var(--accent); text-decoration: none; transition: .2s; }
a:hover { color: var(--accent2); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.hidden { display: none !important; }
.mono { font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; font-size: 12px; color: var(--muted); }

/* --- header --- */
header { position: sticky; top: 0; z-index: 100; background: rgba(5,7,12,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: .3s; }
header.scrolled { border-bottom-color: var(--border); background: rgba(5,7,12,.94); }
header .container { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.logo { font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -.5px; display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.logo:hover { color: var(--text); }
.logo::before { content: ''; width: 27px; height: 27px; border-radius: 8px; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 44V20l24 24V20' stroke='white' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--grad-logo);
  background-size: 19px 19px, 100% 100%; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 2px 14px rgba(124,92,252,.45);
}
.logo .brand { background: var(--grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav { display: flex; gap: 26px; align-items: center; }
nav a { color: var(--muted); font-size: 14px; font-weight: 500; transition: .2s; position: relative; }
nav a:hover, nav a.active { color: var(--text); }
nav a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--accent); border-radius: 2px; transition: .3s; }
nav a:hover::after, nav a.active::after { width: 100%; }
.hdr-actions .btn-nav { padding: 9px 20px; border-radius: 10px; background: var(--grad1); color: #04121a; font-weight: 700; font-size: 13px; box-shadow: 0 3px 14px rgba(0,229,160,.3); text-decoration: none; }
.hdr-actions .btn-nav:hover { color: #04121a; box-shadow: 0 5px 22px rgba(0,229,160,.5); transform: translateY(-1px); }
.hdr-actions .btn-nav::after { display: none; }

/* --- buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; transition: all .25s; text-decoration: none; font-family: inherit; }
.btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(110,139,255,.16); color: var(--text); }
.btn.primary { background: var(--grad1); border: none; color: #04121a; font-weight: 700; box-shadow: 0 6px 24px rgba(0,229,160,.35); }
.btn.primary:hover { box-shadow: 0 10px 34px rgba(0,229,160,.5); transform: translateY(-2px); color: #04121a; }
.btn.green { background: var(--grad2); border: none; color: #04121a; font-weight: 700; }
.btn.green:hover { box-shadow: 0 8px 30px rgba(0,229,160,.35); color: #04121a; }
.btn.ghost { background: transparent; }
.btn.big { padding: 15px 30px; font-size: 16px; border-radius: 14px; }
.btn.small { padding: 6px 14px; font-size: 13px; border-radius: 8px; }
.btn.danger { border-color: rgba(255,77,106,.4); color: var(--danger); background: rgba(255,77,106,.08); }
.btn.danger:hover { border-color: var(--danger); box-shadow: 0 4px 16px rgba(255,77,106,.25); color: var(--danger); }
.btn + .btn { margin-left: 10px; }
/* --- hero --- */
.hero-sec { position: relative; z-index: 1; padding: clamp(64px, 8vw, 104px) 0 56px; overflow: hidden; }
.hero-sec::before { content: ''; position: absolute; top: -220px; left: 50%; transform: translateX(-50%); width: 900px; height: 620px; background: radial-gradient(ellipse, rgba(110,139,255,.1), transparent 65%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border-radius: 99px; background: rgba(110,139,255,.08); border: 1px solid rgba(110,139,255,.28); color: #A9BBFF; font-size: 13px; font-weight: 600; margin-bottom: 22px; }
.badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,229,160,.55); } 70% { box-shadow: 0 0 0 9px rgba(0,229,160,0); } 100% { box-shadow: 0 0 0 0 rgba(0,229,160,0); } }
.hero-grid h1 { font-family: var(--f-display); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.14; font-weight: 700; letter-spacing: -1px; margin-bottom: 18px; }
.grad-text { background: var(--grad2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--muted); font-size: 17px; max-width: 520px; margin-bottom: 30px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-row .btn + .btn { margin-left: 0; }
.hero-points { margin-top: 24px; color: var(--muted); font-size: 13.5px; display: flex; gap: 18px; flex-wrap: wrap; }
.hero-points span { display: inline-flex; align-items: center; gap: 7px; }
.hero-points span::before { content: ''; width: 15px; height: 15px; border-radius: 50%; flex: none; background-color: rgba(0,229,160,.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e5a0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: 9px; background-position: center; background-repeat: no-repeat; }

/* --- code window --- */
.codewin { position: relative; background: #070a12; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transform: rotate(.5deg);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(110,139,255,.07), 0 0 120px rgba(110,139,255,.09); }
.codewin-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); }
.codewin-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a3247; }
.codewin-bar i:nth-child(1) { background: #ff5f57; }
.codewin-bar i:nth-child(2) { background: #febc2e; }
.codewin-bar i:nth-child(3) { background: #28c840; }
.codewin-bar span { margin-left: 8px; font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', Consolas, monospace; }
.codewin pre { border: none; background: transparent; padding: 20px 22px; font-size: 13.5px; }
.c-kw { color: #b9a8ff; } .c-str { color: #4ade80; } .c-cmt { color: #566079; font-style: italic; } .c-num { color: #4dc3ff; }

/* --- stats --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; padding: 16px 0 40px; }
.stat { position: relative; overflow: hidden; background: rgba(13,19,34,.75); border: 1px solid var(--border); border-radius: 16px; padding: 20px 18px 18px; text-align: center; backdrop-filter: blur(10px); transition: .3s; }
.stat::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% -20%, rgba(110,139,255,.12), transparent 60%); pointer-events: none; }
.stat:hover { border-color: rgba(110,139,255,.45); transform: translateY(-2px); }
.stat .s-ico { position: relative; width: 34px; height: 34px; margin: 0 auto 10px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(110,139,255,.1); border: 1px solid rgba(110,139,255,.28); color: #9DB2FF; }
.stat .s-ico svg { width: 17px; height: 17px; }
.stat:nth-child(2) .s-ico { background: rgba(0,229,160,.09); border-color: rgba(0,229,160,.28); color: var(--accent2); }
.stat:nth-child(3) .s-ico { background: rgba(255,179,71,.09); border-color: rgba(255,179,71,.28); color: var(--warn); }
.stat:nth-child(4) .s-ico { background: rgba(124,92,252,.1); border-color: rgba(124,92,252,.3); color: #b9a8ff; }
.stat b { position: relative; display: block; font-family: var(--f-display); font-size: 26px; font-weight: 700; letter-spacing: -.5px; background: var(--grad2); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat span { position: relative; color: var(--muted); font-size: 12px; margin-top: 4px; display: block; }

/* --- sections --- */
section { padding: clamp(64px, 8vw, 112px) 0; position: relative; z-index: 1; }
section.sec-alt { background: var(--bg2); border-top: 1px solid rgba(255,255,255,.025); border-bottom: 1px solid rgba(255,255,255,.025); }
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head .sub { margin: 0 auto; max-width: 560px; }
.eyebrow { color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 10px; }
h1, h2 { font-family: var(--f-display); font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; font-weight: 700; letter-spacing: -.8px; line-height: 1.2; }
h1 span, h2 span { color: var(--accent); }
h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.sub { color: var(--muted); margin-bottom: 24px; font-size: 15px; }

/* --- features --- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.feat { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 26px 24px; transition: .3s; }
.feat:hover { border-color: rgba(110,139,255,.45); transform: translateY(-3px); box-shadow: 0 16px 44px rgba(0,0,0,.4); }
.feat .ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: rgba(110,139,255,.1); border: 1px solid rgba(110,139,255,.3); color: #9DB2FF; }
.feat .ico svg { width: 22px; height: 22px; }
.feat:nth-child(2) .ico { background: rgba(0,229,160,.09); border-color: rgba(0,229,160,.28); color: var(--accent2); }
.feat:nth-child(3) .ico { background: rgba(255,179,71,.09); border-color: rgba(255,179,71,.28); color: var(--warn); }
.feat:nth-child(4) .ico { background: rgba(77,124,254,.1); border-color: rgba(77,124,254,.3); color: #7fa2ff; }
.feat h3 { font-size: 16.5px; margin-bottom: 7px; }
.feat p { color: var(--muted); font-size: 14px; }

/* --- reveal --- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } }
/* --- models grid / cards --- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filters button { padding: 8px 18px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; transition: .2s; font-weight: 500; font-family: inherit; }
.filters button:hover { border-color: var(--accent); color: var(--text); }
.filters button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.search-box { margin-bottom: 20px; }
.search-box input { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 13px 18px; font-size: 14px; width: 100%; max-width: 420px; transition: .25s; }
.search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,252,.12); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: all .3s; position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(110,139,255,.05), transparent); opacity: 0; transition: .3s; }
.card:hover { border-color: rgba(110,139,255,.5); transform: translateY(-3px); box-shadow: 0 14px 44px rgba(0,0,0,.45); cursor: pointer; }
.card:hover::before { opacity: 1; }
.card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; position: relative; z-index: 1; }
.card h3 { font-size: 16px; font-weight: 700; }
.card .provider { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.tag { font-size: 11px; padding: 4px 12px; border-radius: 20px; font-weight: 600; white-space: nowrap; position: relative; z-index: 1; background: rgba(110,139,255,.12); color: var(--accent); }
.tag.trial, .tag.green { background: rgba(0,229,160,.12); color: var(--accent2); }
.tag.red { background: rgba(255,77,106,.12); color: var(--danger); }
.tag.orange { background: rgba(255,123,66,.12); color: var(--orange); }
.card .desc { color: var(--muted); font-size: 13px; flex: 1; position: relative; z-index: 1; }
.card .meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; position: relative; z-index: 1; }
.card .meta .price b { color: var(--accent2); }

/* --- steps (совместимость) --- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; transition: .3s; position: relative; color: var(--muted); font-size: 14px; }
.step:hover { border-color: var(--accent); }
.step h3 { color: var(--text); font-size: 16px; }
.step .num { width: 36px; height: 36px; border-radius: 50%; background: var(--grad1); color: #04121a; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 16px; }
.step .time { display: inline-block; margin-top: 12px; font-size: 11.5px; font-weight: 700; color: var(--accent2); background: rgba(0,229,160,.08); border: 1px solid rgba(0,229,160,.25); padding: 3px 10px; border-radius: 99px; }

/* --- code / tabs --- */
pre { background: #070a12; border: 1px solid var(--border); border-radius: 14px; padding: 18px; overflow-x: auto; font-size: 13px; font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; color: #c9d4e8; line-height: 1.7; }
.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tabs button { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 10px; padding: 8px 18px; cursor: pointer; font-size: 13px; font-weight: 500; transition: .2s; font-family: inherit; }
.tabs button.active { color: #fff; border-color: var(--accent); background: rgba(110,139,255,.15); }

/* --- forms --- */
input, select, textarea { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 12px 16px; font-size: 14px; width: 100%; transition: .25s; font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(110,139,255,.14); }
label { font-size: 13px; color: var(--muted); display: block; margin: 14px 0 6px; font-weight: 500; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
textarea { resize: vertical; min-height: 100px; }
.key-box { background: rgba(0,229,160,.06); border: 1px solid rgba(0,229,160,.3); border-radius: 14px; padding: 20px; margin-top: 18px; word-break: break-all; }
.key-box .warn { color: var(--warn); font-size: 13px; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.contact-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; max-width: 560px; margin: 0 auto; }
.contact-box h3 { margin-bottom: 8px; font-size: 18px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin-top: 6px; }
.checks label { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; color: var(--text); background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; transition: .2s; }
.checks label:hover { border-color: var(--accent); }
.checks input { width: auto; }
/* --- panel / tables --- */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; margin-bottom: 28px; overflow-x: auto; }
.panel h3 { margin-bottom: 16px; font-size: 17px; font-weight: 700; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
tr:hover td { background: rgba(255,255,255,.02); }
.pill { padding: 3px 12px; border-radius: 14px; font-size: 12px; font-weight: 600; }
.pill.on { background: rgba(0,229,160,.12); color: var(--accent2); }
.pill.off, .pill.err { background: rgba(255,77,106,.12); color: var(--danger); }
.compare-table { font-size: 14.5px; margin: 0; }
.compare-table th, .compare-table td { padding: 14px 16px; }
.compare-table th:nth-child(2) { color: var(--accent2); }
.compare-table td:nth-child(2) { background: rgba(0,229,160,.05); box-shadow: inset 1px 0 0 rgba(0,229,160,.18), inset -1px 0 0 rgba(0,229,160,.18); }
.compare-table th:nth-child(2) { background: rgba(0,229,160,.07); }
.compare-table .win { color: var(--accent2); font-weight: 700; }
.compare-table .lose { color: var(--danger); }
.compare-table .our { background: rgba(0,229,160,.045); }
.compare-table .our td:first-child { color: var(--accent2); font-weight: 600; }

/* --- dashboard extras --- */
.cards4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.bars .bar { flex: 1; background: var(--grad1); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; transition: .2s; }
.bars .bar:hover { filter: brightness(1.3); }
.bars .bar:hover::after { content: attr(data-tip); position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); background: var(--bg2); border: 1px solid var(--border); padding: 6px 10px; border-radius: 8px; font-size: 11px; white-space: nowrap; color: var(--text); }
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg2); border: 1px solid var(--accent2); color: var(--text); padding: 14px 20px; border-radius: 12px; z-index: 999; animation: slideUp .3s ease; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.toast.err { border-color: var(--danger); }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- model page --- */
.model-hero { text-align: center; padding: 56px 20px 30px; position: relative; z-index: 1; }
.model-hero h1 { font-family: var(--f-display); font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 10px; font-weight: 700; letter-spacing: -.8px; }
.model-hero .badge-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.model-detail { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-bottom: 24px; }
.model-detail .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.model-detail .row .item, .model-detail .item { padding: 14px; background: var(--bg2); border-radius: 10px; }
.model-detail .item { margin-bottom: 8px; }
.model-detail .item .label { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.model-detail .row .item .value { font-size: 18px; font-weight: 700; margin-top: 4px; }
.model-detail .item .value { font-size: 16px; font-weight: 600; margin-top: 4px; }

/* --- footer --- */
footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; position: relative; z-index: 1; margin-top: 40px; background: var(--bg2); }
footer .brand { color: var(--brand); font-weight: 700; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 52px 24px 34px; }
.footer-grid p { color: var(--muted); font-size: 14px; max-width: 320px; margin-top: 12px; }
.footer-grid h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text); margin-bottom: 14px; }
.footer-grid nav { display: block; }
.footer-grid nav a { display: block; color: var(--muted); font-size: 14px; margin-bottom: 9px; }
.footer-grid nav a:hover { color: var(--text); }
.footer-grid nav a::after { display: none; }
.footer-bottom { border-top: 1px solid var(--border); padding: 18px 24px 26px; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* --- scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* --- responsive --- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-sec { padding: 48px 0 40px; }
  .codewin { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  nav { gap: 14px; overflow-x: auto; }
  nav a { font-size: 12px; white-space: nowrap; }
  header .container { height: 58px; }
  .hero-grid h1 { font-size: 30px; }
  .grid { grid-template-columns: 1fr; }
  .model-detail .row { grid-template-columns: 1fr; }
  .compare-table { font-size: 11px; }
  .compare-table th, .compare-table td { padding: 8px 10px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* --- provider visuals --- */
.prov-strip { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; padding: 4px 0 6px; }
.prov-strip .lbl { color: var(--muted); font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; margin-right: 6px; }
.prov-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 99px; background: var(--card); border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; transition: .25s; }
.prov-chip:hover { border-color: rgba(110,139,255,.5); transform: translateY(-2px); }
.prov-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.prov-ico { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex: none; border: 1px solid; }
.card-id { display: flex; gap: 12px; align-items: center; min-width: 0; }
.skel { height: 160px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(100deg, var(--card) 40%, #141b2e 50%, var(--card) 60%); background-size: 200% 100%; animation: skel 1.3s linear infinite; }
@keyframes skel { from { background-position: 120% 0; } to { background-position: -80% 0; } }

/* --- cta banner --- */
.cta-banner { position: relative; overflow: hidden; border-radius: 22px; padding: 46px 44px; display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.34), transparent 42%),
    radial-gradient(circle at 8% 96%, rgba(4,18,26,.30), transparent 46%),
    radial-gradient(circle at 55% 55%, rgba(0,200,255,.5), transparent 62%),
    linear-gradient(135deg, #00E5A0, #00C8FF);
  box-shadow: 0 24px 60px rgba(0,229,160,.25); }
.cta-banner::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.1) 0 2px, transparent 2px 16px);
  -webkit-mask-image: radial-gradient(ellipse 70% 110% at 92% 0%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 110% at 92% 0%, #000, transparent 72%); }
.cta-banner::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -90px; top: -160px; border: 1.5px solid rgba(255,255,255,.35); box-shadow: 0 0 0 26px rgba(255,255,255,.07), 0 0 0 54px rgba(255,255,255,.04); }
.cta-banner h2 { color: #04121a; margin-bottom: 6px; }
.cta-banner h2 span { color: #04121a; }
.cta-banner p { color: rgba(4,18,26,.78); font-size: 15px; max-width: 460px; }
.cta-banner .btn { position: relative; z-index: 1; }
.btn.cta-white { background: #04121a; color: #5CF2C4; border: none; font-weight: 700; }
.btn.cta-white:hover { color: #8DFFD8; box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* --- auth --- */
.auth-tabs { display: flex; gap: 4px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.auth-tabs button { flex: 1; padding: 10px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: .2s; font-family: inherit; }
.auth-tabs button.active { background: var(--grad1); color: #04121a; box-shadow: 0 3px 14px rgba(0,229,160,.3); }
.err-box { background: rgba(255,77,106,.08); border: 1px solid rgba(255,77,106,.35); color: #ff8fa3; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-top: 14px; }

/* --- misc --- */
code { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12.5px; color: var(--accent2); }
pre code { background: none; border: none; padding: 0; color: inherit; }
.save { display: inline-block; padding: 4px 12px; border-radius: 99px; background: rgba(0,229,160,.12); color: var(--accent2); font-weight: 700; font-size: 13px; }
.cmp-note { color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }

/* ===== v3: живое демо в hero ===== */
.demo { position: relative; background: #070a12; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transform: rotate(.5deg);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 120px rgba(0,229,160,.07); }
.demo-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); }
.demo-models { display: flex; gap: 6px; flex-wrap: wrap; }
.demo-models button { font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: .2s; display: inline-flex; gap: 7px; align-items: center; }
.demo-models button i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.demo-models button:hover { color: var(--text); border-color: rgba(110,139,255,.45); }
.demo-models button.active { border-color: rgba(0,229,160,.5); color: var(--text); background: rgba(0,229,160,.08); }
.demo-chat { padding: 18px; min-height: 240px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: rgba(110,139,255,.13); border: 1px solid rgba(110,139,255,.3); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg.bot .caret { display: inline-block; width: 7px; height: 14px; background: var(--accent2); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); margin-right: 4px; animation: typ .9s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typ { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.demo-foot { border-top: 1px solid var(--border); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.demo-foot .lat { color: var(--accent2); font-weight: 600; font-family: 'JetBrains Mono', Consolas, monospace; }

/* ===== v3: табы кода + копирование ===== */
.codetabs { display: flex; gap: 6px; margin-left: 10px; flex-wrap: wrap; }
.codetabs button { font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: .2s; }
.codetabs button:hover { color: var(--text); }
.codetabs button.active { color: var(--accent2); background: rgba(0,229,160,.08); border-color: rgba(0,229,160,.3); }
.copy-btn { margin-left: auto; font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; transition: .2s; flex: none; }
.copy-btn:hover { color: var(--text); border-color: rgba(110,139,255,.5); }
.copy-btn.ok { color: var(--accent2); border-color: rgba(0,229,160,.4); }
.code-note { display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; margin-top: 16px; color: var(--muted); font-size: 13.5px; }
.code-note b { color: var(--accent2); font-weight: 600; }

/* ===== v3: персоны «кому подходит» ===== */
.persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.persona { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 28px 24px; transition: .3s; display: flex; flex-direction: column; gap: 8px; }
.persona:hover { transform: translateY(-3px); border-color: rgba(110,139,255,.45); box-shadow: 0 16px 44px rgba(0,0,0,.4); }
.persona .ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; background: rgba(110,139,255,.1); border: 1px solid rgba(110,139,255,.3); color: #9DB2FF; }
.persona:nth-child(2) .ico { background: rgba(0,229,160,.09); border-color: rgba(0,229,160,.28); color: var(--accent2); }
.persona:nth-child(3) .ico { background: rgba(255,178,32,.09); border-color: rgba(255,178,32,.28); color: var(--warn); }
.persona .ico svg { width: 22px; height: 22px; }
.persona h3 { font-size: 17px; }
.persona p { color: var(--muted); font-size: 14px; flex: 1; }
.persona .p-link { font-size: 13.5px; font-weight: 600; color: var(--accent2); }
.persona .p-link:hover { color: #5CF2C4; }

/* ===== v3: FAQ ===== */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .25s; }
.faq details[open] { border-color: rgba(110,139,255,.4); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 20px; font-weight: 600; font-size: 15.5px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--accent2); transition: transform .25s; flex: none; font-weight: 400; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 20px 18px; color: var(--muted); font-size: 14px; }

/* ===== v3: статус API ===== */
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--border); font-size: 12px; color: var(--muted); background: rgba(255,255,255,.02); font-weight: 600; }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.status-pill.on { color: var(--accent2); border-color: rgba(0,229,160,.3); }
.status-pill.on .dot { background: var(--accent2); animation: pulse 2s infinite; }
.status-pill.off { color: var(--danger); border-color: rgba(255,77,106,.3); }
.status-pill.off .dot { background: var(--danger); }
/* v15 (аудит P0-3): degraded (янтарь) и unavailable/unverified (серый) */
.status-pill.warn { color: var(--warn, #F5A524); border-color: rgba(245,165,36,.35); }
.status-pill.warn .dot { background: var(--warn, #F5A524); }
.status-pill.na { color: var(--muted); border-color: var(--border); }
.status-pill.na .dot { background: var(--muted); }
@media print { .status-pill .dot { animation: none !important; } }


/* ===== v3: мобильные ===== */
@media (max-width: 900px) {
  .demo { transform: none; }
}
@media (max-width: 640px) {
  /* код: горизонтальный скролл внутри карточки, панель управления липнет слева */
  .codewin { overflow-x: auto; overflow-y: hidden; }
  .codewin-bar { position: sticky; left: 0; width: max-content; min-width: 100%; }
  .codewin pre { overflow: visible; white-space: pre; }
  .grid { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
  h1, h2 { font-size: 24px; letter-spacing: -.4px; }
  .hero-grid h1 { font-size: 30px; }
  .lead { font-size: 15.5px; }
  .msg { font-size: 12.5px; }
  .demo-chat { padding: 14px; }
  .cta-banner { padding: 26px 20px; }
  .cta-banner h2 { font-size: 22px; }
  /* таблица сравнения → карточки */
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody { display: block; }
  .compare-table tr { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; padding: 8px 0; }
  .compare-table td { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: none; padding: 7px 16px; text-align: right; font-size: 13.5px; }
  .compare-table td::before { content: attr(data-label); color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; text-align: left; flex: none; font-weight: 600; }
  .compare-table td:nth-child(2) { background: rgba(0,229,160,.06); box-shadow: none; border-radius: 8px; }
  .compare-table td .cmp-note { display: none; }
  /* кнопки на всю ширину */
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; }
  .cta-row .btn + .btn { margin-left: 0; }
  .cta-banner { padding: 32px 24px; }
  .cta-banner .btn { width: 100%; }
  .hero-points { gap: 10px 16px; font-size: 12.5px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .demo-models button { font-size: 11px; padding: 5px 10px; }
  .codewin-bar { flex-wrap: wrap; }
  .copy-btn { margin-left: 0; }
}

/* ===== v4: оплата / биллинг ===== */
.pay-panel { margin-bottom: 28px; }
.pay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.pay-sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; max-width: 460px; }
.pay-balance { text-align: right; }
.pay-balance span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
.pay-balance b { font-family: var(--f-display); font-size: 26px; font-weight: 700; color: var(--accent2); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pay-sums { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pay-sums button { font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--muted); cursor: pointer; transition: .2s; }
.pay-sums button:hover { color: var(--text); border-color: var(--accent); }
.pay-sums button.active { color: var(--accent2); border-color: rgba(0,229,160,.45); background: rgba(0,229,160,.08); box-shadow: 0 0 0 3px rgba(0,229,160,.08); }
.pay-methods { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pay-methods button { display: flex; align-items: center; gap: 12px; text-align: left; font-family: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); cursor: pointer; transition: .2s; }
.pay-methods button svg { width: 20px; height: 20px; flex: none; color: var(--muted); transition: .2s; }
.pay-methods button span { font-size: 14px; font-weight: 600; display: flex; flex-direction: column; line-height: 1.3; }
.pay-methods button span b { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.pay-methods button:hover { border-color: var(--accent); }
.pay-methods button.active { border-color: rgba(0,229,160,.5); background: rgba(0,229,160,.06); box-shadow: 0 0 0 3px rgba(0,229,160,.07); }
.pay-methods button.active svg { color: var(--accent2); }
.pay-note { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pay-hist-head { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.pay-table { font-size: 13.5px; }
.pay-table th, .pay-table td { padding: 10px 12px; }
#pay-btn { margin-top: 16px; }
#pay-custom { margin-top: 10px; }

/* модалка платёжного шлюза */
.pay-modal { position: fixed; inset: 0; z-index: 300; background: rgba(3,5,9,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pay-modal-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: pmIn .25s ease; }
@keyframes pmIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.pm-head { display: flex; align-items: center; gap: 9px; font-family: var(--f-display); font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.pm-logo { width: 24px; height: 24px; border-radius: 7px; flex: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 44V20l24 24V20' stroke='white' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--grad-logo); background-size: 15px 15px, 100% 100%; background-position: center; background-repeat: no-repeat; }
.pm-secure { margin-left: auto; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; color: var(--accent2); background: rgba(0,229,160,.08); border: 1px solid rgba(0,229,160,.25); padding: 3px 9px; border-radius: 99px; letter-spacing: .4px; }
.pm-sum { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 6px 14px; margin-bottom: 18px; }
.pm-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13.5px; color: var(--muted); border-bottom: 1px dashed var(--border); }
.pm-row:last-child { border-bottom: none; }
.pm-row b { color: var(--text); font-weight: 600; }

/* v8.5: модалка статистики ключа */
.key-modal-card { max-width: 720px; max-height: 88vh; overflow-y: auto; }
.key-link { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px dashed rgba(128,140,160,.4); }
.key-link:hover { color: var(--accent2); border-color: var(--accent2); }
.km-keybox { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; word-break: break-all; color: var(--accent2); }
.km-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.km-stat { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.km-stat b { display: block; font-size: 17px; }
.km-stat span { color: var(--muted); font-size: 11.5px; }
.km-bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; margin-top: 8px; }
.km-bars i { flex: 1; background: linear-gradient(180deg, var(--accent2), rgba(0,229,160,.25)); border-radius: 3px 3px 0 0; min-height: 2px; }
.km-mrow { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.km-h { margin: 18px 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
/* v8.5: сессии */
.sess-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sess-row:last-child { border-bottom: none; }
.sess-ico { font-size: 20px; flex: none; width: 28px; text-align: center; }
.sess-info { flex: 1; min-width: 0; }
.sess-info b { display: block; font-size: 14px; }
.sess-info span { color: var(--muted); font-size: 12px; }
.sess-cur { color: var(--accent2); font-size: 11px; border: 1px solid rgba(0,229,160,.3); border-radius: 99px; padding: 2px 8px; flex: none; }
.pm-spin-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 0 10px; }
.pm-spin { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(0,229,160,.15); border-top-color: var(--accent2); animation: pmSpin .9s linear infinite; }
@keyframes pmSpin { to { transform: rotate(360deg); } }
.pm-text { color: var(--muted); font-size: 13.5px; }
.pm-done { text-align: center; padding: 8px 0 4px; }
.pm-check { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,229,160,.12); border: 1.5px solid rgba(0,229,160,.5); color: var(--accent2); box-shadow: 0 0 0 10px rgba(0,229,160,.05); animation: pmPop .35s cubic-bezier(.2,1.4,.4,1); }
.pm-check svg { width: 26px; height: 26px; }
.pm-check.err { background: rgba(255,77,106,.1); border-color: rgba(255,77,106,.5); color: var(--danger); box-shadow: 0 0 0 10px rgba(255,77,106,.05); }
@keyframes pmPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pm-done-sum { color: var(--accent2); font-weight: 700; font-size: 15px; }
.pm-done-bal { color: var(--muted); font-size: 13px; margin-top: 6px; }
.pm-done-bal b { color: var(--text); }

/* полоса способов оплаты на лендинге */
/* v8.4: плашка «в одной лиге с топами» (LMArena-позиционирование на лендинге и ценах) */
.leader-strip { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 auto 30px; padding: 16px 22px; max-width: 880px; border-radius: 16px; background: linear-gradient(120deg, rgba(124,92,252,.14), rgba(0,229,160,.10)); border: 1px solid rgba(124,92,252,.35); text-align: center; }
.leader-strip .cup { font-size: 26px; flex: none; filter: drop-shadow(0 3px 10px rgba(255,195,0,.4)); }
.leader-strip .txt { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.leader-strip .txt b { color: var(--accent2); }
.leader-strip .src { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); letter-spacing: .4px; }
.pay-strip { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 22px; }
.pay-strip .lbl { color: var(--muted); font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; margin-right: 4px; font-weight: 600; }
.pay-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 99px; background: var(--card); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); transition: .25s; }
.pay-chip svg { width: 15px; height: 15px; color: var(--accent2); flex: none; }
.pay-chip:hover { border-color: rgba(0,229,160,.45); transform: translateY(-2px); }

/* ===== v4: страница 404 ===== */
.nf-wrap { min-height: calc(100vh - 66px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; position: relative; z-index: 1; }
.nf-code { font-family: var(--f-display); font-size: clamp(72px, 16vw, 150px); font-weight: 700; line-height: 1; letter-spacing: -4px; background: var(--grad2); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.nf-wrap h1, .nf-wrap h2 { margin: 10px 0 8px; }
.nf-wrap p { color: var(--muted); max-width: 420px; margin-bottom: 26px; }

/* ===== v4: микро-анимации ===== */
.btn:active { transform: translateY(0) scale(.97); }
.faq summary:hover { background: rgba(255,255,255,.02); }
.prov-chip:active, .pay-chip:active { transform: scale(.97); }

/* ===== v6: dogfooding — сайт, собранный своим же API ===== */
.dog-grid { display: flex; flex-direction: column; gap: 18px; }
.dog-win { transform: rotate(-.4deg); max-width: 780px; width: 100%; margin: 0 auto; }
.dog-log .ok { color: #28c840; font-weight: 700; }
@media (max-width: 900px) {
  .dog-win { transform: none; }
}

@media (max-width: 860px) {
  .pay-grid { grid-template-columns: 1fr; }
  .pay-head { flex-direction: column; }
  .pay-balance { text-align: left; }
}


/* ===== v5: разгрузка главной, подтверждение email, шаги оплаты ===== */
.hero-grid .badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-grid .badge-row .badge { margin-bottom: 0; }
.badge.gift { background: rgba(0,229,160,.1); border-color: rgba(0,229,160,.38); color: #7dffc9; text-decoration: none; transition: .25s; }
.badge.gift:hover { background: rgba(0,229,160,.18); transform: translateY(-1px); }

.btn.wide { width: 100%; }

/* меню кабинета */
.dash-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 22px; }
.dash-nav a { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: .2s; }
.dash-nav a:hover { color: var(--text); border-color: rgba(110,139,255,.45); }
.dash-nav a.active { background: var(--grad1); color: #04121a; border-color: transparent; }
[id^="sec-"] { scroll-margin-top: 86px; }

/* подтверждение email */
.confirm-ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: rgba(110,139,255,.12); border: 1px solid rgba(110,139,255,.32); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.devcode { background: rgba(255,179,71,.08); border: 1px dashed rgba(255,179,71,.5); color: #ffd9a0; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin: 14px 0; text-align: center; }
.devcode b { font-family: 'JetBrains Mono', monospace; font-size: 18px; letter-spacing: 4px; color: #ffb347; }

/* шаги способа оплаты в модалке */
.pm-stage-t { font-weight: 700; font-size: 15px; margin-bottom: 14px; text-align: center; }
.pm-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pm-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-fields input { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 11px 13px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .2s; }
.pm-fields input:focus { border-color: rgba(110,139,255,.55); }
.pm-qr { width: 168px; height: 168px; margin: 0 auto 14px; background: #fff; border-radius: 14px; padding: 10px; }
.pm-qr svg { width: 100%; height: 100%; display: block; }
.pm-usdt-addr { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; word-break: break-all; color: var(--accent2); margin-bottom: 10px; }
.pm-demo { margin-top: 12px; font-size: 11px; color: var(--muted); text-align: center; }


/* v7: тосты кабинета */
#dash-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 400; background: #14261f; border: 1px solid rgba(0,229,160,.45); color: #b8f5dc; padding: 12px 18px; border-radius: 12px; font-size: 14px; max-width: min(92vw, 460px); text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
#dash-toast.err { background: #2a1620; border-color: rgba(255,107,157,.5); color: #ffc2d9; }
#dash-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* v7: вкладки — hidden обязан побеждать display у панелей */
[data-tabsec][hidden] { display: none !important; }

/* v7.7: cookie-consent баннер */
#cookie-bar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);max-width:640px;width:calc(100% - 32px);background:rgba(16,21,32,.97);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:9000;box-shadow:0 12px 40px rgba(0,0,0,.5);transition:transform .4s ease}
#cookie-bar.show{transform:translate(-50%,0)}
#cookie-bar .cb-text{font-size:13px;color:var(--muted);line-height:1.5;flex:1;min-width:220px}
#cookie-bar .cb-text a{color:var(--accent2)}
#cookie-bar .cb-btns{display:flex;gap:8px;flex-shrink:0}
@media(max-width:520px){#cookie-bar{flex-direction:column;align-items:stretch}#cookie-bar .cb-btns{justify-content:flex-end}}

/* --- v7.11: веб-чат в кабинете --- */
.chat-win { display: flex; flex-direction: column; gap: 10px; min-height: 220px; max-height: 440px; overflow-y: auto; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg2); }
.chat-empty { color: var(--muted); font-size: 13.5px; text-align: center; margin: auto; max-width: 420px; }
.chat-msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.chat-msg.user { align-self: flex-end; background: rgba(110,139,255,.15); border: 1px solid rgba(110,139,255,.4); }
.chat-msg.assistant { align-self: flex-start; background: rgba(0,229,160,.07); border: 1px solid rgba(0,229,160,.22); }
.chat-msg.assistant.err { background: rgba(255,77,109,.08); border-color: rgba(255,77,109,.35); }
.chat-msg.pending { color: var(--muted); font-style: italic; }
.chat-input-row { display: flex; gap: 10px; margin-top: 12px; align-items: flex-end; }
.chat-input-row textarea { flex: 1; min-height: 46px; }
.chat-input-row .btn { flex-shrink: 0; }
.chat-meta { margin-top: 8px; font-size: 12.5px; color: var(--muted); min-height: 16px; }
@media (max-width: 640px) { .chat-msg { max-width: 94%; } .chat-input-row { flex-direction: column; align-items: stretch; } }



/* ===== v7.14: темы оформления (тёмная по умолчанию) + сайдбар кабинета в упор слева ===== */
/* багфикс: grid-контейнеры с data-tabsec (карточки статистики, графики) игнорировали
   атрибут hidden, т.к. display:grid из CSS перекрывал его → блоки «Обзора» торчали
   на всех вкладках. Явно возвращаем display:none. */
[data-tabsec][hidden] { display: none !important; }

/* --- светлая тема: переопределяем переменные + точечные фиксы захардкоженных цветов --- */
:root { color-scheme: dark; }
[data-theme="light"] {
  color-scheme: light;
  --bg: #EDF0F7; --bg2: #FFFFFF; --card: #FFFFFF; --card2: #E7EBF4; --border: #D3DAE9;
  --text: #141B2E; --muted: #57607A; --accent: #3F56C9; --accent2: #009668;
  --brand: #6A4BE0; --danger: #D6294C; --warn: #B07800; --orange: #E05A1D;
}
[data-theme="light"] body::before { opacity: .55; }
[data-theme="light"] body::after {
  background-image: linear-gradient(rgba(20,27,46,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,27,46,.05) 1px, transparent 1px);
}
[data-theme="light"] header { background: rgba(255,255,255,.78); }
[data-theme="light"] header.scrolled { background: rgba(255,255,255,.94); }
[data-theme="light"] .stat { background: rgba(255,255,255,.85); box-shadow: 0 8px 26px rgba(30,40,70,.07); }
[data-theme="light"] .stat .s-ico { color: var(--accent); }
[data-theme="light"] .stat b, [data-theme="light"] .grad-text { background: linear-gradient(135deg, #00A878, #0090D0); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .badge { color: #3F56C9; }
[data-theme="light"] .badge.gift { color: #00875C; }
[data-theme="light"] .skel { background: linear-gradient(100deg, var(--card) 40%, #E9EDF6 50%, var(--card) 60%); background-size: 200% 100%; }
[data-theme="light"] tr:hover td { background: rgba(20,27,46,.03); }
[data-theme="light"] .faq summary:hover { background: rgba(20,27,46,.03); }
[data-theme="light"] .devcode { color: #9A6A00; }
[data-theme="light"] .devcode b { color: #B07800; }
[data-theme="light"] #dash-toast { background: #E7F7F0; color: #0A5C42; }
[data-theme="light"] #dash-toast.err { background: #FBE9EE; color: #A31838; }
[data-theme="light"] #cookie-bar { background: rgba(255,255,255,.97); border-color: var(--border); }
[data-theme="light"] section.sec-alt { border-top-color: var(--border); border-bottom-color: var(--border); }
[data-theme="light"] .codewin { box-shadow: 0 24px 60px rgba(30,40,70,.25); }
[data-theme="light"] .dash-main .panel { box-shadow: 0 10px 30px rgba(30,40,70,.08); }

/* --- кнопка переключения темы (вставляется ui.js в шапку) --- */
.theme-btn { flex: none; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .2s; padding: 0; }
.theme-btn:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.theme-btn svg { width: 17px; height: 17px; }

/* --- кабинет: сайдбар в упор к левому краю экрана, на всю высоту --- */
.dash-shell { display: flex; align-items: stretch; position: relative; z-index: 1; min-height: calc(100vh - 66px); }
.dash-side { width: 258px; flex: none; position: sticky; top: 66px; height: calc(100vh - 66px); overflow-y: auto; background: var(--bg2); border-right: 1px solid var(--border); padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.dash-user { padding: 2px 8px 14px; border-bottom: 1px solid var(--border); }
.dash-hello { font-weight: 700; font-size: 15.5px; }
.dash-bal { margin-top: 10px; }
.dash-bal span { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; }
.dash-bal b { font-size: 27px; font-weight: 800; color: var(--accent2); font-variant-numeric: tabular-nums; }
.dash-side .dash-nav { flex-direction: column; gap: 5px; margin: 0; flex-wrap: nowrap; flex: 1; }
.dash-side .dash-nav a { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 11px 12px; white-space: nowrap; font-size: 14.5px; font-weight: 600; }
.dash-side .dash-nav a i { font-style: normal; width: 21px; text-align: center; flex: none; }
.dash-side .dash-nav a.active { box-shadow: 0 4px 16px rgba(0,229,160,.28); }
.dash-main { flex: 1; min-width: 0; width: 100%; max-width: 1280px; margin: 0 auto; padding: 26px 34px 60px; }
.dash-title { margin: 4px 0 22px; }
/* укрупнённая типографика кабинета + живые акценты */
.dash-main .panel { padding: 28px; margin-bottom: 24px; box-shadow: 0 14px 40px rgba(2,6,18,.35); }
.dash-main .panel h3 { font-size: 19px; margin-bottom: 18px; }
.dash-main .panel h3::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--grad1); margin-right: 10px; vertical-align: 2px; box-shadow: 0 0 10px rgba(0,229,160,.55); }
.dash-main table { font-size: 14px; }
.dash-main .stat { padding: 24px 20px 20px; }
.dash-main .stat b { font-size: 30px; }
.dash-main .stat span { font-size: 13px; }
.dash-grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; margin-bottom: 24px; }
.h-sub { color: var(--muted); font-size: 14px; font-weight: 400; }
.ch-svg { width: 100%; height: auto; display: block; }
.ch-axis { stroke: var(--border); stroke-width: 1; }
.ch-lbl { fill: var(--muted); font-size: 12px; font-family: inherit; }
.ov-chart rect { transition: opacity .15s; }
.ov-chart rect:hover { opacity: .72; }
.split-bar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--card2); margin-bottom: 16px; }
.split-bar span { display: block; height: 100%; }
.mrow { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.mrow:last-child { border-bottom: none; }
.mdot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13.5px; }
.mval { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text); }
.mpct { color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; }
/* укрупнённый чат */
.chat-win { min-height: 300px; max-height: 540px; padding: 20px; gap: 12px; }
.chat-empty { font-size: 14.5px; }
.chat-msg { font-size: 15.5px; padding: 12px 16px; }
.chat-input-row textarea { min-height: 54px; font-size: 15px; }
.chat-meta { font-size: 13.5px; }
@media (max-width: 920px) {
  .dash-shell { flex-direction: column; min-height: 0; }
  .dash-side { position: static; width: auto; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 14px 14px 12px; }
  .dash-user { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px 10px; }
  .dash-bal { margin-top: 0; text-align: right; }
  .dash-bal b { font-size: 22px; }
  .dash-side .dash-nav { flex-direction: row; overflow-x: auto; padding-bottom: 4px; flex: none; }
  .dash-side .dash-nav a { font-size: 14px; padding: 9px 12px; }
  .dash-grid2 { grid-template-columns: 1fr; }
  .dash-main { padding: 18px 16px 48px; }
}

/* ===== v11: верхняя плашка «Пригласи друга» ===== */
#topbar-ref { position: relative; z-index: 101; background: linear-gradient(90deg, rgba(124,92,252,.18), rgba(0,229,160,.13)); border-bottom: 1px solid rgba(0,229,160,.22); }
#topbar-ref .tb-inner { max-width: 1180px; margin: 0 auto; padding: 7px 46px 7px 24px; display: flex; align-items: center; gap: 10px; justify-content: center; position: relative; }
#topbar-ref .tb-text { font-size: 13.5px; color: var(--text); text-align: center; }
#topbar-ref .tb-text b { color: var(--accent2); }
#topbar-ref .tb-link { color: var(--accent); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
#topbar-ref .tb-link:hover { color: var(--accent2); }
#topbar-ref .tb-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 4px 6px; }
#topbar-ref .tb-close:hover { color: var(--text); }
@media (max-width: 700px) {
  #topbar-ref .tb-inner { padding: 6px 36px 6px 12px; gap: 6px; }
  #topbar-ref .tb-text { font-size: 12px; }
  #topbar-ref .tb-text .tb-hide-sm { display: none; }
  #topbar-ref .tb-link { font-size: 12px; }
}
[data-theme="light"] #topbar-ref { background: linear-gradient(90deg, rgba(124,92,252,.12), rgba(0,180,120,.1)); }

/* ===== v11: переключатель языка RU/EN в шапке ===== */
.lang-btn { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); flex: none; }
.lang-btn button { border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 12px; font-family: inherit; padding: 8px 9px; cursor: pointer; transition: .2s; }
.lang-btn button.active { background: var(--grad1); color: #04121a; }
.lang-btn button:hover:not(.active) { color: var(--text); }

/* ===== v11: страница /referral ===== */
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 8px 0; }
.stat .s-ico { font-style: normal; font-size: 17px; line-height: 1; }
.calc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px dashed var(--border); font-size: 14.5px; color: var(--muted); }
.calc-row:last-of-type { border-bottom: none; }
.calc-row b { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row b.mint { color: var(--accent2); }
.faq-col details { background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.faq-col summary { cursor: pointer; padding: 16px 44px 16px 20px; font-weight: 600; font-size: 15px; list-style: none; position: relative; }
.faq-col summary::-webkit-details-marker { display: none; }
.faq-col summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 20px; font-weight: 600; transition: .2s; }
.faq-col details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-col details p { padding: 0 20px 16px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.faq-col details p a { color: var(--accent); }

/* ===== v13: главная по ТЗ — шапка/бургер, доступность, размеры ===== */
/* видимый клавиатурный фокус на интерактивных элементах */
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 6px; }

/* =====================================================================
   TokVenta v14 — строгий чёрно-белый ребрендинг (tokventa.tech).
   Оверрайд поверх старых правил: всё цветное уходит в градации серого,
   фирменный знак — чёрный квадрат с белыми «TV» и точкой-квадратом.
   ===================================================================== */
:root {
  --bg: #000000; --bg2: #0A0A0A; --card: #0D0D0D; --card2: #141414; --border: #262626;
  --text: #F5F5F5; --muted: #9A9A9A; --accent: #FFFFFF; --accent2: #FFFFFF;
  --brand: #FFFFFF; --danger: #FF5566; --warn: #D9D9D9; --orange: #BFBFBF;
  --grad1: linear-gradient(135deg, #FFFFFF, #D6D6D6);
  --grad2: linear-gradient(135deg, #FFFFFF, #BDBDBD);
  --grad-logo: #FFFFFF;
  --grad3: linear-gradient(135deg, #FFFFFF, #CFCFCF);
}
::selection { background: #FFFFFF; color: #000000; }
body::before { background: none; animation: none; }
header, header.scrolled { background: rgba(0,0,0,.78); }
header.scrolled { background: rgba(0,0,0,.95); border-bottom-color: var(--border); }

/* логотип: чёрный квадрат «TV» + белое название без градиента */
.logo { gap: 11px; }
.logo::before { content: 'TV'; width: 27px; height: 27px; border-radius: 4px; flex: none;
  background: #000000; border: 1.5px solid #FFFFFF; box-shadow: none; background-image: none;
  color: #FFFFFF; font-family: 'Inter', Arial, sans-serif; font-weight: 800; font-size: 11px;
  letter-spacing: -.5px; display: inline-flex; align-items: center; justify-content: center;
  background-size: auto; background-position: center;
}
.logo .brand { background: none; -webkit-background-clip: initial; background-clip: initial;
  color: #FFFFFF; }
.logo .brand::after { content: ''; display: inline-block; width: 5px; height: 5px;
  background: #FFFFFF; margin-left: 3px; vertical-align: 2px; }

/* навигация и кнопки: инверсия ч/б */
nav a::after { background: #FFFFFF; }
.hdr-actions .btn-nav { background: #FFFFFF; color: #000000; border-radius: 4px; box-shadow: none; font-weight: 700; }
.hdr-actions .btn-nav:hover { color: #000000; box-shadow: 0 4px 18px rgba(255,255,255,.25); transform: translateY(-1px); }
.btn { border-radius: 4px; }
.btn:hover { border-color: #FFFFFF; box-shadow: 0 8px 24px rgba(255,255,255,.12); }
.btn.primary, .btn.green { background: #FFFFFF; color: #000000; border: none; border-radius: 4px; box-shadow: none; }
.btn.primary:hover, .btn.green:hover { color: #000000; box-shadow: 0 8px 28px rgba(255,255,255,.28); }
.btn.ghost:hover { border-color: #FFFFFF; }
.btn-nav { border-radius: 4px; }

/* бейджи, теги, статусы — серые */
.badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #EDEDED; }
.badge .pulse { background: #FFFFFF; }
.badge.gift { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #FFFFFF; }
.badge.gift:hover { background: rgba(255,255,255,.14); }
.tag { background: rgba(255,255,255,.08); color: #EDEDED; border-radius: 3px; }
.tag.trial, .tag.green { background: rgba(255,255,255,.12); color: #FFFFFF; border: 1px solid rgba(255,255,255,.35); }
.tag.red { background: rgba(255,85,102,.12); color: #FF8296; }
.tag.orange { background: rgba(255,255,255,.1); color: #D9D9D9; }
.step .time { color: #EDEDED; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.25); }
.step .num { background: #FFFFFF; color: #000000; }
.status-pill.on { color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.status-pill.on .dot { background: #FFFFFF; }
.status-pill.off { color: #FF8296; border-color: rgba(255,85,102,.35); }

/* градиентный текст и «цветные цифры» — просто белый */
.grad-text, .stat b { background: none; -webkit-background-clip: initial; background-clip: initial; color: #FFFFFF; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.bars .bar { background: linear-gradient(180deg, #FFFFFF, #8F8F8F); }
a { color: #EDEDED; } a:hover { color: #FFFFFF; }
:root:not([data-theme="light"]) .mono { color: #B5B5B5; } /* v15.3: только тёмная — в светлой #B5B5B5 нечитаем, там var(--muted) */
[data-theme="light"] .mono { color: #4E535C; }
:focus-visible { outline: 2px solid #FFFFFF; }
.demo-models i { background: #9D9D9D !important; }
.msg.bot { background: #101010; }
.prov-ico { background: rgba(255,255,255,.08) !important; color: #D9D9D9 !important; border-color: rgba(255,255,255,.3) !important; }
.stat .s-ico { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.25) !important; color: #FFFFFF !important; }

/* v14.1: графики кабинета — строго ч/б (SVG-заливки из JS не видят переменные) */
[data-theme="light"] .ch-svg rect { fill: #1A1A1A; }
[data-theme="light"] .ch-svg rect.e { fill: #DCDCDC; }
[data-theme="light"] .split-bar span, [data-theme="light"] .mdot { filter: invert(1); }

/* светлая тема — тоже строго ч/б */
[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF; --bg2: #F4F4F4; --card: #FFFFFF; --card2: #EDEDED; --border: #DCDCDC;
  --text: #0A0A0A; --muted: #6E6E6E; --accent: #000000; --accent2: #000000;
  --brand: #000000; --danger: #C4243B; --warn: #8A8A8A; --orange: #6E6E6E;
  --grad1: linear-gradient(135deg, #000000, #2E2E2E);
  --grad2: linear-gradient(135deg, #000000, #3A3A3A);
  --grad-logo: #000000;
  --grad3: linear-gradient(135deg, #000000, #333333);
}
[data-theme="light"] ::selection { background: #000000; color: #FFFFFF; }
[data-theme="light"] header { background: rgba(255,255,255,.82); }
[data-theme="light"] header.scrolled { background: rgba(255,255,255,.96); }
[data-theme="light"] .logo::before { background: #FFFFFF; border-color: #000000; color: #000000; }
[data-theme="light"] .logo .brand { color: #000000; }
[data-theme="light"] .logo .brand::after { background: #000000; }
[data-theme="light"] .hdr-actions .btn-nav { background: #000000; color: #FFFFFF; }
[data-theme="light"] .hdr-actions .btn-nav:hover { color: #FFFFFF; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
[data-theme="light"] .btn.primary, [data-theme="light"] .btn.green { background: #000000; color: #FFFFFF; }
[data-theme="light"] .btn.primary:hover, [data-theme="light"] .btn.green:hover { color: #FFFFFF; box-shadow: 0 8px 28px rgba(0,0,0,.28); }
[data-theme="light"] .tag, [data-theme="light"] .tag.trial, [data-theme="light"] .tag.green { background: rgba(0,0,0,.06); color: #141414; border: 1px solid rgba(0,0,0,.25); }
[data-theme="light"] .badge { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.22); color: #141414; }
[data-theme="light"] .badge .pulse { background: #000000; }
[data-theme="light"] .badge.gift { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.35); color: #000000; }
[data-theme="light"] .grad-text, [data-theme="light"] .stat b { color: #000000; }
[data-theme="light"] .status-pill.on { color: #000000; border-color: rgba(0,0,0,.35); }
[data-theme="light"] .status-pill.on .dot { background: #000000; }
[data-theme="light"] .step .num { background: #000000; color: #FFFFFF; }
[data-theme="light"] .stat .s-ico { background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.25) !important; color: #000000 !important; }
[data-theme="light"] .prov-ico { background: rgba(0,0,0,.05) !important; color: #2A2A2A !important; border-color: rgba(0,0,0,.3) !important; }
[data-theme="light"] .msg.bot { background: #F4F4F4; }
[data-theme="light"] .bars .bar { background: linear-gradient(180deg, #2A2A2A, #8A8A8A); }
[data-theme="light"] :focus-visible { outline: 2px solid #000000; }
[data-theme="light"] a { color: #141414; } [data-theme="light"] a:hover { color: #000000; }

.status-pill.off .dot { background: #FF5566; }

/* кнопки и интерактивные элементы — не ниже 44 px */
.btn, .faq summary, .codetabs button, .copy-btn, .demo-models button, .lang-btn button, #nav-burger { min-height: 44px; }
.btn.small { min-height: 38px; }
.theme-btn { width: 44px; height: 44px; }
.lang-btn button { min-width: 44px; }
.hdr-actions .btn-nav { min-height: 44px; display: inline-flex; align-items: center; }
/* H1: 48–56 px на компьютере, 32–36 px на телефоне */
.hero-grid h1 { font-size: clamp(36px, 4.4vw, 56px); }
/* вертикальные отступы секций 72/40 px (hero — свои) */
section { padding: 72px 0; }
/* длинные строки кода прокручиваются внутри примера */
.codewin pre { overflow-x: auto; }
/* шапка: логотип · меню · вход+бургер */
.hdr-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 66px; }
.hdr-nav { display: flex; gap: 26px; align-items: center; }
.hdr-actions { display: flex; align-items: center; gap: 12px; }
#nav-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; }
#nav-burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; }
body.nav-open #nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open #nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open #nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* карточки моделей на главной: строка цены + ссылка «Подробнее» */
.card .meta { flex-wrap: wrap; gap: 8px 14px; }
.card .more { color: var(--accent); font-weight: 600; font-size: 14px; margin-top: auto; }
.card .more:hover { color: var(--accent2); }
.contact-mail { margin-bottom: 16px; font-size: 15px; }
@media (max-width: 768px) {
  section { padding: 40px 0; }
  .hero-grid h1 { font-size: 34px; }
  #nav-burger { display: flex; }
  .hdr-row { height: 58px; }
  .hdr-nav { position: fixed; top: 58px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 8px 24px 18px; z-index: 99; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
  body.nav-open .hdr-nav { display: flex; }
  .hdr-nav a { padding: 14px 0; font-size: 15px; border-bottom: 1px solid var(--border); }
  .hdr-nav a:last-of-type { border-bottom: none; }
  .hdr-nav .lang-btn, .hdr-nav .theme-btn { margin-top: 12px; align-self: flex-start; }
  .hero-points { font-size: 13px; }
}


/* ===== v14: чистый сайдбар (без рамок-пилюль), SVG-иконки, прелоадер кабинета ===== */
.dash-side .dash-nav a { border: none; background: transparent; }
.dash-side .dash-nav a:hover { border: none; background: rgba(110,139,255,.08); }
.dash-side .dash-nav a.active { background: var(--grad1); }
.dash-side .dash-nav a i svg { width: 18px; height: 18px; display: block; }
.sess-ico { color: var(--muted); }
.sess-ico svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.confirm-ico { color: var(--accent); }
.confirm-ico svg { width: 26px; height: 26px; }
.leader-strip .cup { color: #FFC94D; }
.leader-strip .cup svg { width: 26px; height: 26px; display: block; }
.btn svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }
/* прелоадер кабинета — вместо пустой «сетки», пока проверяется сессия */
.dash-loading { text-align: center; padding: 110px 20px 130px; color: var(--muted); font-size: 15px; }
.dl-spin { width: 34px; height: 34px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent2); animation: dlspin .8s linear infinite; }
@keyframes dlspin { to { transform: rotate(360deg); } }

/* =====================================================================
   v15.1 — правки по аудиту (30.09.2026)
   1) якорные отступы: липкая шапка больше не перекрывает верх секции и
      кнопку «Копировать» после перехода по #code / #faq;
   2) светлая тема: читаемые активные пункты, темнее --muted (бледные
      подписи в таблицах), убраны цветные ореолы и свечение;
   3) кабинет: поиск и группировка списка моделей, инлайн-ошибка суммы;
   4) состояния кнопки «Копировать».
   ===================================================================== */

/* --- 1. переходы по якорям под фиксированной шапкой (66 px) --- */
html { scroll-padding-top: 86px; }
section[id] { scroll-margin-top: 86px; }
.codewin { scroll-margin-top: 96px; }

/* --- 2. кнопка «Копировать»: нормальные состояния --- */
.copy-btn { -webkit-user-select: none; user-select: none; }
.copy-btn.ok { color: var(--accent2); border-color: var(--accent); background: rgba(255,255,255,.10); }

/* --- 3. светлая тема: контраст текст/фон --- */
[data-theme="light"] { --muted: #4E535C; --warn: #666D78; }
/* активные элементы на чёрном градиенте (--grad1 в светлой теме) читаются белым.
   NB: .lang-btn button.active исключён в v15.2 — переключатель языка стал тихим
   служебным контролом без заливки (см. блок 4 ниже). */
[data-theme="light"] .dash-nav a.active,
[data-theme="light"] .dash-side .dash-nav a.active,
[data-theme="light"] .auth-tabs button.active,
[data-theme="light"] .step .num { color: #FFFFFF; }
[data-theme="light"] .filters button.active { background: #000000; color: #FFFFFF; border-color: #000000; }
[data-theme="light"] .tabs button.active { background: rgba(0,0,0,.07); color: #000000; border-color: rgba(0,0,0,.4); }
[data-theme="light"] .codetabs button.active { background: rgba(0,0,0,.06); color: #000000; border-color: rgba(0,0,0,.35); }
[data-theme="light"] .copy-btn { background: rgba(0,0,0,.05); color: #33383F; border-color: rgba(0,0,0,.22); }
[data-theme="light"] .copy-btn:hover { color: #000000; border-color: rgba(0,0,0,.45); }
[data-theme="light"] .copy-btn.ok { background: rgba(0,0,0,.09); color: #000000; }
[data-theme="light"] .theme-btn:hover { color: #000000; }
[data-theme="light"] th, [data-theme="light"] .cmp-note { color: var(--muted); }

/* --- 4. светлая тема: тише свечение и цветные ореолы (бренд — ч/б) --- */
[data-theme="light"] body::before { opacity: .3; }
[data-theme="light"] .hero-sec::before { opacity: .35; }
[data-theme="light"] .stat::before { opacity: .5; }
[data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: #000000; box-shadow: 0 0 0 3px rgba(0,0,0,.13); }
[data-theme="light"] .pill.on { background: rgba(0,0,0,.07); color: #000000; }
[data-theme="light"] .key-box { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.3); }
[data-theme="light"] .badge .pulse { box-shadow: none; }
[data-theme="light"] .btn.primary, [data-theme="light"] .btn.green { box-shadow: 0 6px 18px rgba(0,0,0,.14); }
[data-theme="light"] .btn.primary:hover, [data-theme="light"] .btn.green:hover { box-shadow: 0 10px 24px rgba(0,0,0,.18); }

/* --- 5. обе темы: нейтральные тени вместо зелёного/синего свечения --- */
.btn.primary { box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.btn.primary:hover { box-shadow: 0 10px 26px rgba(0,0,0,.55); }
.btn.green { box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.btn.green:hover { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.hdr-actions .btn-nav:hover { box-shadow: 0 5px 16px rgba(0,0,0,.45); }
.auth-tabs button.active { box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.dash-side .dash-nav a.active { box-shadow: none; }
.dash-main .panel h3::before { box-shadow: none; }

/* --- 6. кабинет: поиск + группировка моделей при создании ключа --- */
.checks-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.checks-meta #nk-search { flex: 1 1 220px; max-width: 340px; margin: 0; }
.nk-count { color: var(--muted); font-size: 13px; }
.nkgrp { margin: 0 0 14px; }
.nkg-h { display: flex; align-items: center; gap: 10px; padding: 4px 0 6px; border-bottom: 1px dashed var(--border); margin-bottom: 8px; }
.nkg-h .nkg-p { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.nkg-h em { font-style: normal; font-size: 12px; color: var(--muted); }
.nkg-all { margin-left: auto; font: inherit; font-size: 12px; padding: 3px 10px; min-height: 0; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: .2s; }
.nkg-all:hover { color: var(--text); border-color: var(--accent); }
.nkg-all.on { color: var(--accent2); border-color: var(--accent); }
.checks { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.checks label { transition: border-color .2s, background .2s; }
.checks label.on { border-color: var(--accent); background: rgba(255,255,255,.06); }
[data-theme="light"] .checks label.on { background: rgba(0,0,0,.05); }
.checks .nk-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checks .nk-p { flex: none; color: var(--muted); font-size: 12px; }
.nk-empty { color: var(--muted); font-size: 13.5px; padding: 6px 0; }

/* --- 7. явная ошибка поля суммы пополнения --- */
.field-err { margin-top: 8px; color: var(--danger); font-size: 13px; font-weight: 600; }
#pay-custom[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(196,36,59,.16); }
#pay-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.calc-cap { margin: 16px 0 0; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* =====================================================================
   v15.2 — дизайн-ревизия по фидбеку (30.09.2026)
   1) логотип: убран квадрат «TV» и точка — только название, спокойный
      Inter 600 вместо плотного Unbounded;
   2) заголовки секций — Inter (выразительный Unbounded остаётся только
      у hero h1);
   3) CTA-баннер — монохромная карточка в стиле остальных блоков вместо
      бирюзовой заливки с диагоналями и ореолами;
   4) шапка: язык/тема — тихие служебные контролы, «Кабинет» остаётся
      единственной заметной кнопкой;
   5) шаги и преимущества — без «коробок»: компактная последовательность;
   6) вторичный текст контрастнее, цена в карточках моделей — главная
      строка meta.
   ===================================================================== */

/* --- 1. логотип: только название --- */
.logo { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: 18.5px; letter-spacing: .15px; gap: 0; }
.logo::before { content: none; }
.logo .brand::after { content: none; }

/* --- 2. заголовки секций: спокойный Inter --- */
h2 { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-weight: 700; letter-spacing: -.4px; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; }

/* --- 3. CTA-баннер: монохромная карточка --- */
.cta-banner { background: var(--card); border: 1px solid var(--border); box-shadow: none; border-radius: 18px; padding: 34px 38px; }
.cta-banner::before, .cta-banner::after { content: none; }
.cta-banner h2 { color: var(--text); margin-bottom: 8px; }
.cta-banner h2 span { color: var(--text); }
.cta-banner p { color: var(--muted); font-size: 15px; max-width: 520px; }
.btn.cta-white { background: var(--grad1); color: var(--bg); border: none; font-weight: 700; }
.btn.cta-white:hover { color: var(--bg); box-shadow: 0 8px 26px rgba(0,0,0,.4); }

/* --- 4. шапка: тихие служебные контролы --- */
.lang-btn { border: none; background: transparent; }
.lang-btn button { padding: 6px 7px; min-width: 30px; min-height: 32px; border-radius: 7px; font-size: 11.5px; }
.lang-btn button.active { background: rgba(255,255,255,.1); color: var(--text); }
[data-theme="light"] .lang-btn button.active { background: rgba(0,0,0,.08); color: #0A0A0A; }
.theme-btn { width: 34px; height: 34px; border: none; background: transparent; border-radius: 8px; }
.theme-btn:hover { background: rgba(255,255,255,.07); transform: none; }
[data-theme="light"] .theme-btn:hover { background: rgba(0,0,0,.06); }

/* --- 5. шаги и преимущества: без «коробок» --- */
.step { background: none; border: none; border-radius: 0; padding: 0; }
.step:hover { border-color: transparent; }
.step .num { width: 30px; height: 30px; font-size: 13.5px; margin-bottom: 10px; border-radius: 9px; }
#code .steps { grid-template-columns: 1fr; gap: 22px; }
.feat-grid { gap: 28px 20px; }
.feat { background: none; border: none; border-radius: 0; padding: 2px 2px; }
.feat:hover { transform: none; box-shadow: none; border-color: transparent; }
.feat .ico { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 12px; }

/* --- 6. вторичный текст и цены: выше контраст (тёмная тема; светлая уже поднята в v15.1) --- */
:root:not([data-theme="light"]) { --muted: #ACACAC; }
.card .meta { font-size: 12.5px; align-items: baseline; }
.card .meta .price { font-size: 15px; font-weight: 600; color: var(--text); }
.card .meta .price b { color: var(--text); font-weight: 800; }
[data-theme="light"] .card .meta .price, [data-theme="light"] .card .meta .price b { color: #0A0A0A; }


/* ============================================================================
   v15.3 (i18n-ревизия 01.10.2026):
   1) hero h1 мягче — Unbounded 500 вместо 700 (повторное замечание ревью);
      касается главной и hero рефералки (обе .hero-sec);
   2) .pg-h1 на SSR-страницах (каталог/модель/docs) — тоже 500 (в EXTRA_CSS
      в seo.js поднят вес отдельно);
   ========================================================================== */
.hero-grid h1, .hero-sec h1 { font-weight: 500; letter-spacing: -.5px; }



/* ============================================================================
   v16 — UX-ревизия (01.10.2026)
   1) дизайн-токены: радиусы/отступы/состояния в одном месте; существующие
      цветовые токены (v14/v15) сохранены;
   2) фильтры каталога: активный чип читается (было: белый текст на белом фоне
      в тёмной теме), семантика aria-pressed, видимый фокус уже есть;
   3) убрано свечение codewin/demo (нейтральные тени), глобальный
      prefers-reduced-motion;
   4) новые компоненты каталога: фильтр по задачам, переключатель «пробный
      ключ», счётчик результатов, сброс, пустое состояние;
   5) карточки: перенос длинных названий/ID, нижняя строка прижата к низу;
   6) страница сценариев: структурированные строки моделей вместо плашек.
   ============================================================================ */

/* --- 1. токены --- */
:root {
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 18px;
  --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px;
}
/* границы полей чуть различимее на чёрном фоне */
:root:not([data-theme="light"]) { --border: #2C2C2C; }

/* --- 2. фильтры: читаемое активное состояние в обеих темах --- */
.filters { align-items: center; }
.filters button { min-height: 44px; }
.filters button.active,
.filters button[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.filters button:focus-visible { outline-offset: 2px; }
/* вторая строка фильтров (по задачам) — визуально тише */
.filters-tags { margin-top: -10px; }
.filters-tags button { font-size: 12.5px; padding: 6px 14px; min-height: 36px; }

/* --- 3. без свечения: спокойные нейтральные тени --- */
.codewin { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.demo { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
[data-theme="light"] .codewin, [data-theme="light"] .demo { box-shadow: 0 24px 60px rgba(30, 40, 70, .16); }
/* короткие спокойные переходы + уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- 4. панель фильтров каталога: триал-переключатель, счётчик, сброс --- */
.flt-bar { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin: 2px 0 20px; }
.trial-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--muted); min-height: 44px; -webkit-user-select: none; user-select: none; }
.trial-toggle:hover { color: var(--text); }
.trial-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trial-toggle .sw { display: inline-block; width: 40px; height: 22px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg2); position: relative; transition: background .2s, border-color .2s; flex: none; }
.trial-toggle .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: left .2s, background .2s; }
.trial-toggle input:checked + .sw { background: var(--text); border-color: var(--text); }
.trial-toggle input:checked + .sw::after { left: 20px; background: var(--bg); }
.trial-toggle input:focus-visible + .sw { outline: 2px solid var(--accent2); outline-offset: 3px; }
.flt-count { color: var(--muted); font-size: 13px; }
.flt-count b { color: var(--text); font-variant-numeric: tabular-nums; }
.flt-reset { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; min-height: 44px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: .2s; }
.flt-reset:hover { color: var(--text); border-color: var(--accent); }
.no-results { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 34px 22px !important; }
.no-results p { margin-bottom: 14px; }

/* --- 5. карточки моделей: переносы и выравнивание низа --- */
.card h3 { overflow-wrap: anywhere; }
.card .mono { word-break: break-all; }
.card .desc { flex: 1; }
.card .meta { margin-top: auto; }

/* --- 6. сценарии: структурированные строки моделей --- */
.uc-models { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.uc-m { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg2); text-decoration: none; transition: border-color .2s; }
.uc-m:hover { border-color: var(--accent); }
.uc-m .uc-name { font-weight: 600; font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.uc-m .uc-meta { color: var(--muted); font-size: 13px; text-align: right; }
@media (max-width: 640px) { .uc-m .uc-meta { text-align: left; } }

/* --- 6б. единые блоки кода документации (SSR /docs/* и статический /docs) --- */
.doc-code { transform: none; margin-bottom: 22px; }
.doc-code .codewin-bar span { letter-spacing: .02em; }

/* --- 7. hero-демо: строка запроса API + монохромное активное состояние --- */
.demo-req { padding: 10px 18px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); overflow-x: auto; white-space: nowrap; }
.demo-req .demo-req-label { color: var(--text); font-weight: 600; }
.demo-models button.active { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, .09); }
[data-theme="light"] .demo-models button.active { background: rgba(0, 0, 0, .07); }