/* tunbee — оформление.
Тем несколько, по умолчанию берётся системная (prefers-color-scheme).
Выбор пользователя пишется в data-theme на и переживает перезагрузку. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
/* ---------- тёмно-фиолетовая: база ---------- */
:root,
:root[data-theme="violet"]{
--bg:#0a0b12;
--bg-glow-1:rgba(139,92,246,.16);
--bg-glow-2:rgba(52,211,153,.09);
--panel:rgba(255,255,255,.045);
--panel-2:rgba(255,255,255,.075);
--panel-solid:#14161f;
--line:rgba(255,255,255,.10);
--line-2:rgba(255,255,255,.18);
--ink:#e8eaf2;
--ink-2:#a3a9bd;
--ink-3:#6e748a;
--acc:#a78bfa;
--acc-2:#8b5cf6;
--acc-ink:#0a0611;
--acc-soft:rgba(167,139,250,.14);
--acc2:#34d399;
--ok:#34d399;
--warn:#fbbf24;
--err:#f87171;
--glass-blur:16px;
}
/* ---------- тёмно-зелёная ---------- */
/* ---------- зелёная: изумруд и бирюза, спокойная ---------- */
:root[data-theme="green"]{
--bg:#06110e;
--bg-glow-1:rgba(94,234,212,.16);
--bg-glow-2:rgba(163,230,53,.10);
--panel:rgba(255,255,255,.045);
--panel-2:rgba(255,255,255,.075);
--panel-solid:#0d1f19;
--line:rgba(94,234,212,.14);
--line-2:rgba(94,234,212,.28);
--ink:#e3f4ee;
--ink-2:#9fbfb3;
--ink-3:#6e8f84;
--acc:#5eead4;
--acc-2:#2dd4bf;
--acc-ink:#04120e;
--acc-soft:rgba(94,234,212,.14);
--acc2:#a3e635;
--ok:#a3e635;
--warn:#fbbf24;
--err:#fb7185;
--glass-blur:16px;
}
/* ---------- терминал: чёрный экран, фосфор, развёртка ---------- */
:root[data-theme="term"]{
--bg:#000400;
--bg-glow-1:rgba(57,255,20,.10);
--bg-glow-2:rgba(125,251,255,.05);
--panel:rgba(57,255,20,.035);
--panel-2:rgba(57,255,20,.06);
--panel-solid:#030c06;
--line:rgba(57,255,20,.18);
--line-2:rgba(57,255,20,.34);
--ink:#9dffb0;
--ink-2:#6fd47f;
--ink-3:#4f9a62;
--acc:#39ff14;
--acc-2:#22c55e;
--acc-ink:#00160a;
--acc-soft:rgba(57,255,20,.12);
--acc2:#7dfbff;
--ok:#39ff14;
--warn:#ffd23f;
--err:#ff4d4d;
--glass-blur:6px;
--tex-hex:rgba(57,255,20,.07);
}
:root[data-theme="term"] body{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; font-size:15.5px}
:root[data-theme="term"] h1, :root[data-theme="term"] h2, :root[data-theme="term"] .pl-title, :root[data-theme="term"] .brand{text-shadow:0 0 10px rgba(57,255,20,.55)}
:root[data-theme="term"] .glass{border-radius:6px; box-shadow:inset 0 0 0 1px rgba(57,255,20,.12), 0 0 24px rgba(57,255,20,.08)}
:root[data-theme="term"] .btn-main, :root[data-theme="term"] .btn.primary{border-radius:4px; box-shadow:0 0 18px rgba(57,255,20,.45)}
:root[data-theme="term"] body::after{
opacity:.9; mix-blend-mode:normal;
background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
background-size:auto;
}
/* ---------- neon: чёрный бархат, циан и маджента, свечение ---------- */
:root[data-theme="neon"]{
--bg:#050409;
--bg-glow-1:rgba(34,211,238,.20);
--bg-glow-2:rgba(236,72,153,.16);
--panel:rgba(255,255,255,.04);
--panel-2:rgba(255,255,255,.07);
--panel-solid:#0d0b16;
--line:rgba(34,211,238,.18);
--line-2:rgba(236,72,153,.32);
--ink:#f1f5ff;
--ink-2:#aab4d6;
--ink-3:#6b7399;
--acc:#22d3ee;
--acc-2:#06b6d4;
--acc-ink:#03121a;
--acc-soft:rgba(34,211,238,.14);
--acc2:#ec4899;
--ok:#4ade80;
--warn:#fbbf24;
--err:#fb7185;
--glass-blur:18px;
}
:root[data-theme="neon"] .btn-main,
:root[data-theme="neon"] .btn.primary{box-shadow:0 0 22px rgba(34,211,238,.45), 0 0 44px rgba(236,72,153,.18)}
:root[data-theme="neon"] .glass{box-shadow:0 0 0 1px rgba(34,211,238,.10), 0 18px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(236,72,153,.04)}
:root[data-theme="neon"] .brand svg, :root[data-theme="neon"] .pl-logo svg{filter:drop-shadow(0 0 14px rgba(34,211,238,.7)) drop-shadow(0 0 30px rgba(236,72,153,.35))}
/* ---------- текстура фона: соты + зерно + живые свечения (tb-texture) ----------
Tunbee — пчела, логотип — шестигранник, поэтому вместо клетки — сотовая
сетка. Она медленно плывёт, а два размытых пятна цвета акцентов дрейфуют по
экрану, как свет сквозь соты. Всё на CSS, без JS; при prefers-reduced-motion
движение выключается. Интенсивность — через токены, у каждой темы своя. */
:root{ --tex-grain:.05; --tex-hex:rgba(255,255,255,.07); --tex-hex-size:64px; --tex-orb:.55; }
:root[data-theme="light"]{ --tex-grain:.08; --tex-hex:rgba(16,18,32,.10); --tex-orb:.5; }
:root[data-theme="neon"]{ --tex-grain:.06; --tex-hex:rgba(34,211,238,.12); --tex-hex-size:56px; --tex-orb:.75; }
:root[data-theme="green"], :root[data-theme="term"]{ --tex-hex:rgba(46,230,168,.09); }
@media (prefers-color-scheme: light){ :root:not([data-theme]){ --tex-grain:.08; --tex-hex:rgba(16,18,32,.10); } }
/* соты: SVG-шестигранник в паттерне; цвет линий подставляется через mask +
background-color, чтобы токен темы работал в data-URI */
body::before{
content:""; position:fixed; inset:-10% -10% -10% -10%; z-index:0; pointer-events:none;
background-color:var(--tex-hex);
-webkit-mask-image:url("data:image/svg+xml;utf8,"),
mask-image:url("data:image/svg+xml;utf8,"),
radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 100%);
-webkit-mask-size:var(--tex-hex-size) auto, 100% 100%;
mask-size:var(--tex-hex-size) auto, 100% 100%;
-webkit-mask-composite:source-in; mask-composite:intersect;
animation:tbHexDrift 80s linear infinite;
}
@keyframes tbHexDrift{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-56px,-97px,0)} }
/* зерно */
body::after{
content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--tex-grain);
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px; mix-blend-mode:overlay;
}
/* живые пятна света — два, ходят по разным орбитам */
html::before, html::after{
content:""; position:fixed; z-index:0; pointer-events:none; border-radius:50%;
filter:blur(70px); opacity:var(--tex-orb); will-change:transform;
}
html::before{ width:46vmax; height:46vmax; left:-12vmax; top:-14vmax; background:var(--bg-glow-1);
animation:tbOrbA 38s ease-in-out infinite alternate; }
html::after{ width:38vmax; height:38vmax; right:-10vmax; bottom:-12vmax; background:var(--bg-glow-2);
animation:tbOrbB 47s ease-in-out infinite alternate; }
@keyframes tbOrbA{ from{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(18vw,12vh,0) scale(1.15)} to{transform:translate3d(6vw,28vh,0) scale(.95)} }
@keyframes tbOrbB{ from{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-16vw,-10vh,0) scale(1.2)} to{transform:translate3d(-28vw,4vh,0) scale(.9)} }
@media (prefers-reduced-motion: reduce){ body::before, html::before, html::after{ animation:none } }
body > *{ position:relative; z-index:1; }
body{
background-image:
radial-gradient(58rem 38rem at 12% -8%, var(--bg-glow-1), transparent 62%),
radial-gradient(46rem 34rem at 96% 4%, var(--bg-glow-2), transparent 62%);
}
/* системная светлая, если пользователь ничего не выбирал */
@media (prefers-color-scheme: light){
:root:not([data-theme]){
--bg:#f6f6fb;
--bg-glow-1:rgba(139,92,246,.12);
--bg-glow-2:rgba(16,185,129,.08);
--panel:rgba(255,255,255,.72);
--panel-2:rgba(255,255,255,.9);
--panel-solid:#ffffff;
--line:rgba(16,18,32,.10);
--line-2:rgba(16,18,32,.20);
--ink:#14162a;
--ink-2:#4c5068;
--ink-3:#7b8098;
--acc:#6d28d9;
--acc-2:#5b21b6;
--acc-ink:#ffffff;
--acc-soft:rgba(109,40,217,.10);
--acc2:#059669;
--ok:#059669;
--warn:#b45309;
--err:#dc2626;
}
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased;
background-image:
radial-gradient(58rem 38rem at 12% -8%, var(--bg-glow-1), transparent 62%),
radial-gradient(46rem 34rem at 96% 4%, var(--bg-glow-2), transparent 62%);
background-attachment:fixed;
}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;}
/* Любое собственное правило с display перебивает браузерное [hidden] —
на этом уже дважды попались: заголовок пустого раздела оставался
висеть, а кнопка со ссылкой на группу не пряталась. Одно правило на
всю таблицу вместо заплатки на каждый случай. */
[hidden]{display:none !important;}
a{color:var(--acc); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:47rem; margin:0 auto; padding:0 1.4rem;}
.wide{max-width:68rem;}
/* ---------- стекло ---------- */
.glass{
background:
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%),
var(--panel);
border:1px solid var(--line);
border-radius:18px;
backdrop-filter:blur(var(--glass-blur)) saturate(150%);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
/* Глубина и стеклянная кромка: карточки перестают быть плоскими наклейками.
Тень мягкая и тёмная (работает на всех тёмных темах), сверху тонкий блик. */
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 20px 44px -30px rgba(0,0,0,.6);
}
/* На светлой теме верхний блик и тёмная тень выглядят грязно — смягчаем. */
:root[data-theme="light"] .glass{
background:var(--panel);
box-shadow:0 1px 2px rgba(16,20,40,.04), 0 18px 40px -32px rgba(16,20,40,.28);
}
/* ---------- шапка ---------- */
header{
position:sticky; top:0; z-index:60;
background:color-mix(in srgb, var(--bg) 84%, transparent);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
}
nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0;}
.brand{display:flex; align-items:center; gap:.62rem; color:var(--ink); font-weight:700; font-size:1.34rem; letter-spacing:-.01em;}
.brand:hover{text-decoration:none; opacity:.85;}
.brand svg{display:block; flex:none; width:34px; height:34px;}
.nav-right{display:flex; align-items:center; gap:.6rem;}
.themes{display:flex; gap:.15rem; padding:.2rem; border:1px solid var(--line); border-radius:10px;}
.themes button{
width:1.6rem; height:1.6rem; border-radius:7px; border:1px solid transparent;
cursor:pointer; padding:0; font-size:0; background:transparent;
}
.themes button i{display:block; width:100%; height:100%; border-radius:6px;}
.themes button[data-set="violet"] i{background:linear-gradient(135deg,#8b5cf6,#34d399);}
.themes button[data-set="green"] i{background:linear-gradient(135deg,#10b981,#065f46);}
.themes button[data-set="term"] i{background:linear-gradient(135deg,#00ff88,#001a0c);}
.themes button[data-set="light"] i{background:linear-gradient(135deg,#ffffff,#c7c9dd);}
.themes button.on{border-color:var(--acc);}
.themes button:hover{border-color:var(--line-2);}
.lang{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.lang button{
background:none; border:0; color:var(--ink-3); cursor:pointer;
padding:.42rem .6rem; font:600 .74rem/1 "JetBrains Mono",monospace;
}
.lang button.on{background:var(--panel-2); color:var(--acc);}
.lang button:hover{color:var(--ink);}
/* ---------- кнопки ---------- */
.btn{
display:inline-block; border:0; border-radius:11px; cursor:pointer;
padding:.78rem 1.5rem; font:600 .96rem/1.4 inherit; text-align:center;
}
.btn:hover{text-decoration:none;}
.btn-main{background:var(--acc); color:var(--acc-ink); box-shadow:0 3px 12px -8px var(--acc);}
.btn-main:hover{background:var(--acc-2);}
.btn-main:disabled{background:var(--line-2); color:var(--ink-3); cursor:not-allowed; box-shadow:none;}
.btn-ghost{background:transparent; border:1px solid var(--line-2); color:var(--ink);}
.btn-ghost:hover{border-color:var(--acc);}
.btn-lg{padding:1rem 2.1rem; font-size:1.02rem; border-radius:13px;}
.btn-wide{width:100%;}
/* ---------- текст ---------- */
h1{font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.16; letter-spacing:-.025em; margin:0 0 1.1rem; text-wrap:balance;}
h2{font-size:clamp(1.35rem,2.7vw,1.75rem); line-height:1.24; letter-spacing:-.018em; margin:0 0 .9rem; text-wrap:balance;}
h3{font-size:1.02rem; margin:0 0 .4rem;}
p{margin:0 0 1.15rem;}
.lead{font-size:1.09rem; color:var(--ink-2);}
.muted{color:var(--ink-3); font-size:.9rem;}
.big{font-size:1.16rem;}
.kicker{
font:600 .74rem/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase;
color:var(--acc2); margin:0 0 1rem;
}
.kicker::before{content:"> "; opacity:.7;}
section{padding:4.4rem 0;}
section + section{border-top:1px solid var(--line);}
.story p{color:var(--ink-2);}
.story p strong{color:var(--ink); font-weight:600;}
.story .first{font-size:1.16rem; color:var(--ink);}
/* врезка */
.note{
border-left:2px solid var(--acc); padding:1rem 1.2rem; margin:1.8rem 0;
background:var(--panel); border-radius:0 12px 12px 0; color:var(--ink-2); font-size:.97rem;
}
.note strong{color:var(--ink);}
/* карточки */
.cards{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); margin-top:2rem;}
@media (max-width:640px){ .cards{grid-template-columns:1fr;} }
.card{padding:1.3rem;}
.card h3{font-size:1rem;}
.card p{color:var(--ink-2); font-size:.92rem; margin:0;}
.card .ic{
width:2.1rem; height:2.1rem; border-radius:9px; margin-bottom:.9rem;
background:var(--acc-soft); color:var(--acc);
display:flex; align-items:center; justify-content:center;
font:600 .9rem/1 "JetBrains Mono",monospace;
}
/* призыв */
.final{text-align:center; padding:4.8rem 0 5.2rem;}
.final .glass{padding:2.6rem 1.8rem;}
.final h2{margin-bottom:.7rem;}
.final .lead{max-width:36rem; margin:0 auto 1.9rem;}
/* донаты */
.donate{margin-top:1.6rem;}
.wallets{display:grid; gap:.6rem; margin-top:1.2rem;}
/* Строка кошелька: сетка в три колонки, чтобы монеты и кнопки стояли
ровно друг под другом, а не гуляли по ширине адреса. */
.wallet{
display:grid; grid-template-columns:1fr auto; align-items:center;
column-gap:.9rem; row-gap:.55rem;
padding:.8rem .95rem; border:1px solid var(--line); border-radius:10px;
background:var(--panel);
}
/* Монета и сеть — двумя строками: сеть должна быть ВИДНА, а не прятаться
в подсказке. На телефоне подсказки нет вовсе, а ошибка в сети стоит денег. */
.wallet .coin{grid-area:1 / 1; display:flex; flex-direction:column; gap:.15rem; min-width:0;}
.wallet .tag{
color:var(--acc2); font-weight:700; font-size:.84rem; letter-spacing:.02em;
font-family:"JetBrains Mono",monospace;
}
.wallet .net{color:var(--ink-3); font-size:.72rem; line-height:1.2;}
/* Адрес — отдельной строкой во всю ширину и с переносом. Многоточие здесь
недопустимо: человек должен сверить адрес целиком, иначе деньги уходят
вслепую. Колонка под адрес ужимается на любом экране, строка — нет. */
.wallet .addr{
grid-area:2 / 1 / 3 / -1;
color:var(--ink); font-family:"JetBrains Mono",monospace;
font-size:.76rem; line-height:1.5; letter-spacing:.01em;
word-break:break-all; user-select:all;
/* Адрес всегда слева направо, даже на арабской странице: двунаправленный
текст переставил бы куски адреса местами, и человек скопировал бы
глазами не то. */
direction:ltr; text-align:left; unicode-bidi:isolate;
background:var(--bg); border:1px solid var(--line);
border-radius:8px; padding:.45rem .55rem;
}
.wallet button{
grid-area:1 / 2; justify-self:end; background:transparent; border:1px solid var(--line-2); color:var(--ink-2);
border-radius:7px; padding:.34rem .72rem; font:600 .72rem/1 inherit; cursor:pointer;
white-space:nowrap;
}
.wallet button:hover{border-color:var(--acc); color:var(--acc);}
.wallet button.ok{border-color:var(--acc); color:var(--acc);}
/* ---------- согласия ---------- */
.agreements{display:flex; flex-direction:column; gap:.4rem; margin:1.8rem 0 1.6rem;}
.agree{display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem; cursor:pointer;}
.agree:hover{border-color:var(--line-2);}
.agree input{margin:.2rem 0 0; width:1.05rem; height:1.05rem; accent-color:var(--acc); flex:none; cursor:pointer;}
.agree span{font-size:.94rem; color:var(--ink-2); line-height:1.55;}
.agree.checked span{color:var(--ink);}
.field{margin-bottom:1rem; text-align:left;}
.field label{display:block; font:600 .82rem/1 inherit; color:var(--ink-2); margin-bottom:.45rem;}
.field input{
width:100%; background:var(--bg); color:var(--ink);
border:1px solid var(--line-2); border-radius:10px;
padding:.75rem .9rem; font:400 .97rem/1.4 inherit;
}
.field input:focus{outline:none; border-color:var(--acc);}
.field input:disabled{opacity:.45; cursor:not-allowed;}
.field .err{color:var(--err); font-size:.83rem; margin-top:.4rem; display:none;}
.field .err.on{display:block;}
/* ---------- модалка ---------- */
.overlay{
position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
padding:1.2rem; background:rgba(3,4,8,.74); backdrop-filter:blur(4px);
opacity:0; pointer-events:none; transition:opacity .17s ease;
}
.overlay.open{opacity:1; pointer-events:auto;}
.modal{
background:var(--panel-solid); border:1px solid var(--line-2); border-radius:18px;
width:100%; max-width:27rem; padding:1.9rem 1.7rem 1.5rem; position:relative;
max-height:92vh; overflow-y:auto; transform:translateY(.5rem); transition:transform .17s ease;
}
.overlay.open .modal{transform:none;}
.modal h3{font-size:1.28rem; margin-bottom:.5rem;}
.modal .sub{color:var(--ink-2); font-size:.93rem; margin-bottom:1.4rem;}
.x{position:absolute; top:.7rem; right:.9rem; background:none; border:0; color:var(--ink-3); font-size:1.5rem; line-height:1; cursor:pointer; padding:.2rem .5rem;}
.x:hover{color:var(--ink);}
.done{text-align:center; padding:.5rem 0 .2rem;}
.done .tick{
width:3.2rem; height:3.2rem; border-radius:50%; margin:0 auto 1rem;
background:var(--acc-soft); color:var(--ok);
display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}
footer{border-top:1px solid var(--line); padding:2.4rem 0 3.4rem; color:var(--ink-3); font-size:.86rem;}
.foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;}
.foot a{color:var(--ink-3);}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto;}}
@media (max-width:640px){
section{padding:3.2rem 0;}
.nav-right{gap:.4rem;}
}
/* ---------- первый экран: слоган вперёд ---------- */
.hero{padding:4rem 0 3.4rem; text-align:center;}
.tagline{
font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.2; letter-spacing:-.025em;
font-weight:700; margin:.4rem 0 1.15rem; color:var(--ink); text-wrap:balance;
}
.tagline .saas{
background:linear-gradient(100deg,var(--acc),var(--acc2));
-webkit-background-clip:text; background-clip:text; color:transparent;
font-weight:700;
}
.tagline .quiet{display:block; margin-top:.5rem; font-size:.62em; font-weight:400; color:var(--ink-2); letter-spacing:-.01em;}
/* Заголовок в две строки: англ. определение вверху, русский слоган под ним —
тот же кегль/шрифт/левый край, слоган подсвечен фирменным градиентом, как SaaS. */
.tagline .tag-line1{display:block;}
.tagline .tag-line2{
display:block; font-weight:700; letter-spacing:-.02em;
background:linear-gradient(100deg,var(--acc),var(--acc2));
-webkit-background-clip:text; background-clip:text; color:transparent;
width:fit-content; margin:0 auto;
}
.prompt{
font-family:"JetBrains Mono",monospace; font-size:.9rem; font-weight:500;
color:var(--acc2); margin:0 0 .9rem; letter-spacing:.02em;
}
.prompt .cur{
display:inline-block; width:.55em; height:1.05em; margin-left:.12em;
background:var(--acc); vertical-align:-.18em; animation:blink 1.15s step-end infinite;
}
@keyframes blink{0%,49%{opacity:1} 50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.prompt .cur{animation:none}}
.hero h1{font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--ink-2); font-weight:500;
letter-spacing:-.01em; line-height:1.55; margin:0 auto; max-width:36rem;}
.hero h1 b{color:var(--ink); font-weight:700;}
/* ---------- одна кнопка тем, как в 3x-ui ---------- */
.theme-btn{
width:2.1rem; height:2.1rem; border-radius:10px; cursor:pointer;
border:1px solid var(--line); background:var(--panel); color:var(--acc);
display:flex; align-items:center; justify-content:center; padding:0;
}
.theme-btn:hover{border-color:var(--acc);}
.theme-btn svg{width:1.05rem; height:1.05rem; display:block;}
/* ---------- язык выпадающим списком ---------- */
.lang-sel{
appearance:none; -webkit-appearance:none;
border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
border-radius:10px; padding:.42rem 1.7rem .42rem .6rem; cursor:pointer;
font:600 .74rem/1.3 "JetBrains Mono",monospace;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 12px) 52%, calc(100% - 8px) 52%;
background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}
.lang-sel:hover{border-color:var(--acc); color:var(--ink);}
.lang-sel:focus{outline:none; border-color:var(--acc);}
.lang-sel option{background:var(--panel-solid); color:var(--ink);}
/* ---------- донаты внизу, в подвале ---------- */
.support{border-top:1px solid var(--line); padding:3.4rem 0 1.4rem;}
.support-card{max-width:34rem; margin:0 auto; text-align:center;
padding:2.1rem 1.9rem 2.3rem;}
.support-card h3{font-size:1.18rem; margin:.7rem 0 .55rem;}
.support-card .muted{max-width:44ch; margin:0 auto 1.5rem;}
.support-ico{display:inline-flex; width:2.6rem; height:2.6rem; border-radius:50%;
align-items:center; justify-content:center; color:var(--acc2);
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);}
.support-ico svg{width:1.35rem; height:1.35rem;}
/* ---- правовые страницы: условия и конфиденциальность ---- */
.doc section{padding:3.2rem 0 4rem;}
.doc .doc-date{color:var(--ink-3); font-size:.86rem; margin:-.5rem 0 1.6rem;
font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;}
.doc h2{display:flex; align-items:baseline; gap:.7rem; font-size:1.18rem;
margin:2.6rem 0 .8rem; scroll-margin-top:5rem;}
.doc h2 .num{color:var(--acc2); font-size:.82rem; font-weight:700; flex:none;
font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;}
.doc p{color:var(--ink-2); font-size:.96rem; line-height:1.72;}
.doc p strong{color:var(--ink); font-weight:600;}
.doc .lead{color:var(--ink-2); font-size:1.05rem;}
.doc-list{margin:0 0 1.15rem; padding-left:1.15rem; color:var(--ink-2);
font-size:.96rem; line-height:1.72;}
.doc-list li{margin-bottom:.6rem;}
.doc-list li strong{color:var(--ink); font-weight:600;}
.doc-tldr{margin:1.8rem 0 .6rem;}
.doc-foot{margin-top:2.8rem;}
/* ссылка на документ рядом с галочкой согласия */
.agree-doc{font-size:.88rem; white-space:nowrap;}
/* ---- личный кабинет ---- */
.narrow{max-width:34rem;}
.center{text-align:center;}
.mid{display:flex; align-items:center; min-height:82vh;}
.pad-lg{padding:1.9rem 1.7rem;}
.h-sm{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:.7rem;}
.h-xs{font-size:1.05rem; margin:0 0 .7rem;}
.block{margin-top:1rem;}
.btn-sm{padding:.45rem 1rem; font-size:.86rem; border-radius:9px;}
.btnrow{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.1rem;}
.eyebrow{color:var(--acc2); font-size:.8rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; margin:0 0 .5rem;
font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;}
/* плитки со статусом */
.tiles{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); margin:1.4rem 0 .4rem;}
.tile{padding:1.05rem 1.2rem; display:flex; flex-direction:column; gap:.3rem;}
.tile-k{color:var(--ink-3); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;}
.tile-v{color:var(--ink); font-size:1.12rem; font-weight:600;}
/* Значения плиток — цветом по смыслу, а не одинаково серым: активный статус
и бессрочный доступ отдаём в фирменный зелёно-бирюзовый (как на логотипе),
счётчик устройств — по заполненности (зелёный → жёлтый → красный). */
.tile-v.ok { color: var(--ok); }
.tile-v.warn { color: var(--warn); }
.tile-v.err { color: var(--err); }
.dev-full { margin:.5rem 0 0; font-size:.82rem; color:var(--err); }
.dev-full a { color:var(--acc); font-weight:600; }
/* QR реферальной ссылки — на белой подложке: на тёмном камеры читают хуже. */
.ref-qr { margin:.6rem 0; }
.ref-qr svg { width:172px; height:auto; display:block; background:#fff;
padding:8px; border-radius:10px; }
/* Обучалка первого запуска — заметная карточка с действиями по шагам. */
.firstrun { border-left:3px solid var(--acc); }
.fr-steps { list-style:none; margin:1rem 0 0; padding:0; display:flex;
flex-direction:column; gap:1.1rem; }
.fr-step { display:flex; gap:.8rem; align-items:flex-start; }
.fr-num { flex:0 0 auto; width:1.7rem; height:1.7rem; border-radius:50%;
background:var(--acc); color:var(--acc-ink); font-weight:700; font-size:.9rem;
line-height:1; display:flex; align-items:center; justify-content:center; }
.fr-step.done .fr-num { background:var(--ok); }
.fr-body { flex:1; min-width:0; }
.fr-body b { font-size:1.02rem; }
.fr-body .devadd { margin:.5rem 0; }
.fr-body .devadd input { width:100%; max-width:22rem; }
.fr-skip { margin-top:1rem; }
/* Метка «no calls» в имени канала — выделяем и вешаем подсказку: Naive по
TCP, звонки (они по UDP) через него не идут. */
.chan-nocalls {
margin-left:.4rem; padding:.05rem .4rem; border-radius:6px;
font-size:.72rem; font-weight:600; cursor:help; white-space:nowrap;
color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent);
}
/* Web-ScreenRec — отдельной карточкой, а то тонул в сплошном тексте. */
.help-rec {
margin:1.4rem auto 0; max-width:44rem; text-align:left;
padding:.9rem 1.1rem; border:1px solid var(--line-2); border-radius:12px;
background:var(--acc-soft); display:flex; gap:.7rem; align-items:flex-start;
}
.help-rec::before { content:"🎬"; font-size:1.2rem; line-height:1.2; flex:0 0 auto; }
/* Выпадающие списки: неактивные пункты сливались с фоном (одинаковый цвет).
Явно задаём фон и цвет пунктам во ВСЕХ select — читаются без прокрутки. */
select { color:var(--ink); }
select option { background:var(--panel-solid); color:var(--ink); }
select option:checked { background:var(--acc-soft); }
/* Кнопки по смыслу, а не «всё фиолетовое и режет глаз». В покое ничего не
пестрит: призрак — тонкая рамка на прозрачном фоне, осмысленные действия
помечены цветом рамки/текста, а заливка появляется только при наведении. */
/* Все кнопки — с заливкой, единым набором: сразу видно, что это кнопка.
Вторичная (ghost) — спокойная подложка, не прозрачная; осмысленные
действия — цветом: переименование жёлтым, отвязка красной. */
.btn-ghost { background:color-mix(in srgb, var(--ink) 10%, transparent);
border:1px solid var(--line-2); color:var(--ink); }
.btn-ghost:hover { background:color-mix(in srgb, var(--ink) 18%, transparent);
border-color:var(--acc); }
.btn-warn { background:var(--warn); color:#241c00; border:1px solid transparent;
box-shadow:0 3px 12px -8px var(--warn); }
.btn-warn:hover { filter:brightness(1.08); }
.btn-danger { background:var(--err); color:#fff; border:1px solid transparent;
box-shadow:0 3px 12px -8px var(--err); }
.btn-danger:hover { filter:brightness(1.08); background:var(--err); color:#fff; }
/* шаги знакомства */
.guide-step p{color:var(--ink-2);}
.guide-step p strong{color:var(--ink); font-weight:600;}
.guide-nav{display:flex; align-items:center; justify-content:space-between;
gap:1rem; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line);}
.guide-nav .btn-ghost{order:0;}
.dots{display:flex; gap:.4rem; flex:1; justify-content:center;}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--line-2); display:block;
transition:background .2s, transform .2s;}
.dots i.on{background:var(--acc); transform:scale(1.25);}
/* строка со ссылкой на подписку */
.copyrow{display:flex; gap:.6rem; align-items:center; margin-top:.9rem;
background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:.6rem .75rem;}
.copyval{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
color:var(--ink-2); font-size:.86rem;
font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;}
/* ── кабинет: номер клиента, инструкция, передача ─────────────────── */
.idline{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 .5rem;}
.cid{font-family:var(--mono,monospace); font-size:1.02rem; letter-spacing:.06em;
padding:.28rem .6rem; border-radius:.5rem; background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);}
.idnote{margin:0 0 1.6rem; max-width:52ch;}
.howto{margin:.4rem 0 1rem; padding-left:1.15rem; line-height:1.65;}
.howto li{margin:.5rem 0;}
.hocount{margin:1.2rem 0 .5rem;}
.horow{display:flex; gap:.5rem; flex-wrap:wrap;}
.horow input{flex:1 1 12rem; min-width:0; padding:.6rem .8rem; border-radius:.6rem;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
color:inherit; font-family:var(--mono,monospace); letter-spacing:.05em;}
.horow input:focus{outline:none; border-color:rgba(255,255,255,.28);}
.hoerr{display:none; margin:.5rem 0 0; font-size:.86rem; color:var(--err);}
.hoerr.on{display:block;}
.hoerr.ok{color:var(--ok,#5fd39a);}
.tg-soon{opacity:.55; cursor:default;}
/* ── обещание передать лично ──────────────────────────────────────── */
.warnbox{border-left:3px solid var(--acc2); padding:.7rem 0 .7rem .9rem;
margin:1rem 0; color:var(--ink-2); line-height:1.6;}
.banner{margin:1rem 0 0; padding:.85rem 1rem; border-radius:.7rem;
background:rgba(95,211,154,.10); border:1px solid rgba(95,211,154,.28);
line-height:1.55;}
/* поля контактов в кабинете */
.idfields{display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.2rem;
margin:0 0 2rem; font-size:.94rem; max-width:34rem;}
.idfields dt{color:var(--ink-2);}
.idfields dd{margin:0;}
.small-note{font-size:.87rem; margin:.7rem 0 0; max-width:52ch;}
/* ── частые вопросы ───────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line); padding:.15rem 0;}
.faq:first-of-type{border-top:none;}
.faq summary{cursor:pointer; padding:.85rem 0; font-weight:600; list-style:none;
display:flex; align-items:center; gap:.6rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+"; color:var(--acc2); font-weight:700; flex:none;
width:1rem; text-align:center;}
.faq[open] summary::before{content:"−";}
.faq summary:hover{color:var(--acc);}
.faq p{color:var(--ink-2); line-height:1.7; margin:0 0 .95rem 1.6rem; font-size:.94rem;}
.copyval{word-break:break-all;}
/* ── устройства ───────────────────────────────────────────────────── */
.dev-off{opacity:.75;}
.dev-off:hover{opacity:1;}
/* скачать и установить */
.dlrow{display:flex; gap:1rem; flex-wrap:wrap; margin:1rem 0 1.1rem;}
.dlrow label{display:flex; flex-direction:column; gap:.35rem; font-size:.85rem;
color:var(--ink-2); flex:1 1 12rem;}
.dlrow select{padding:.55rem .7rem; border-radius:.6rem; font-size:.95rem;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
color:var(--ink);}
.dlrow select:focus{outline:none; border-color:var(--acc);}
/* AmneziaWG-ключи */
.awglist{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.8rem;}
.awgpeer{border:1px solid var(--line); border-radius:.75rem; padding:.9rem 1rem;
background:rgba(255,255,255,.02);}
.awgcfg{margin-top:.7rem;}
.awgconf{width:100%; margin:.4rem 0; font-family:var(--mono,monospace); font-size:.78rem;
background:rgba(0,0,0,.25); color:var(--ink-2); border:1px solid var(--line);
border-radius:.5rem; padding:.5rem; resize:vertical;}
/* ── кабинет: боковая навигация ──────────────────────────────
Разделов стало много, и одной длинной лентой они не читались:
человек искал «где сменить пароль», прокручивая мимо устройств.
На узких экранах колонка превращается в ленту вкладок — сбоку
на телефоне она съела бы половину ширины. */
.cab { display: grid; grid-template-columns: 190px 1fr; gap: 1.2rem; align-items: start; }
.cabnav { display: flex; flex-direction: column; gap: .25rem; position: sticky; top: 5rem; }
.cabtab {
text-align: left; padding: .5rem .7rem; border: 1px solid transparent;
background: transparent; color: var(--muted); cursor: pointer;
font: inherit; font-size: .95rem; border-radius: 8px;
}
.cabtab:hover { color: var(--fg); background: rgba(127,127,127,.08); }
.cabtab.on {
color: var(--fg); background: rgba(127,127,127,.10);
border-color: var(--line); font-weight: 600;
}
.cabmain > .block:first-child { margin-top: 0; }
.emailrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .4rem 0 0; }
.emailrow input { flex: 1; min-width: 12rem; }
.h-xxs { font-size: .95rem; margin: 1.2rem 0 .3rem; }
/* Заголовок «Расширение для браузера» тонул внутри блока «Скачать и
установить» — обычный мелкий h3 не читался как отдельная тема. Даём ему
верхнюю линию-разделитель и акцентную метку слева, чтобы взгляд цеплялся. */
.h-xxs.ext-head {
margin-top: 2rem;
padding-top: 1.2rem;
border-top: 1px solid var(--line);
font-size: 1.05rem;
display: flex;
align-items: center;
gap: .5rem;
}
.h-xxs.ext-head::before {
content: "";
width: .55rem; height: 1.1rem; border-radius: 3px;
background: var(--accent, #8b7bff);
flex: 0 0 auto;
}
/* Секция поддержки — информационная, без форм и списков: центрируем текст
и ряды кнопок, чтобы читалась как обращение, а не как левый столбец. */
#s-support { text-align: center; }
#s-support .btnrow { justify-content: center; }
#s-support p { margin-left: auto; margin-right: auto; max-width: 44rem; }
@media (max-width: 820px) {
.cab { grid-template-columns: 1fr; }
.cabnav {
position: static; flex-direction: row; overflow-x: auto;
gap: .35rem; padding-bottom: .5rem; margin-bottom: .3rem;
}
.cabtab { white-space: nowrap; }
}
/* Вход в шапке. Раньше попасть в кабинет можно было только зная адрес
/login: со страницы входа ссылка на заявку была, обратной не было нигде.
Держим неяркой — главное действие на сайте всё-таки «получить доступ». */
.nav-login{
padding:6px 14px; border:1px solid var(--line); border-radius:8px;
color:var(--fg); text-decoration:none; font-size:.9rem; white-space:nowrap;
}
.nav-login:hover{border-color:var(--acc); color:var(--acc)}
/* Имя устройства при добавлении. Без него все устройства одной системы
выглядят одинаково («Windows», «Windows»), и человек не знает, какое
отвязывает. */
.devadd{margin:14px 0 6px}
.devadd label{display:block; margin-bottom:6px; font-size:.9rem}
.devadd input{
width:100%; max-width:420px; box-sizing:border-box; padding:9px 12px;
border:1px solid var(--line); border-radius:8px;
background:var(--bg2); color:var(--fg); font:inherit; font-size:.95rem;
}
.devadd input:focus{outline:none; border-color:var(--acc)}
.dev-rename{margin-left:8px}
/* Ссылки на подписки по кольцам. Видны только тем, у кого колец больше
одного: у обычного человека оно одно, и блок ему ни к чему. */
.ringLinks{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0}
.ringLinks .small-note{flex-basis:100%; margin:0 0 2px}
/* ---------- кабинет: вид «новичок» / «профи» ---------- */
/* Переключатель стоит над навигацией: он меняет саму навигацию, и прятать
его внутрь одного из разделов значило бы прятать от того, кому он нужен. */
.modebar{
display:flex; align-items:center; gap:.7rem;
margin:0 0 .9rem; flex-wrap:wrap;
}
.modesw{
display:inline-flex; border:1px solid var(--line-2); border-radius:9px;
overflow:hidden;
}
.modebtn{
background:transparent; border:0; color:var(--ink-2); cursor:pointer;
font:600 .8rem/1 inherit; padding:.45rem .8rem;
}
.modebtn:hover{color:var(--ink);}
.modebtn.on{background:rgba(127,127,127,.14); color:var(--ink);}
/* Устройство в левой колонке — подпункт «Устройств», а не равный им пункт. */
.cabsub{
padding-left:1.5rem; font-size:.88rem;
border-left:2px solid var(--line); border-radius:0 8px 8px 0;
}
.cabsub.dev-here::after{content:" ·"; color:var(--acc);}
.proring{margin-top:1.4rem;}
.proring:first-of-type{margin-top:.6rem;}
.prolist{display:flex; flex-direction:column; gap:.5rem;}
.prorow{
border:1px solid var(--line); border-radius:9px;
padding:.55rem .7rem; background:var(--panel);
display:flex; flex-direction:column; gap:.35rem;
}
.prohead{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
.prohead b{font-size:.9rem;}
.prohead .btn{margin-left:auto;}
/* Предупреждение про звонки: оно важнее названия узла, потому и цветом. */
.pronote{
color:var(--err); font-size:.72rem; border:1px solid var(--err);
border-radius:6px; padding:.1rem .4rem; white-space:nowrap;
}
.prorow .copyval{
font-family:"JetBrains Mono",monospace; font-size:.72rem; line-height:1.45;
color:var(--ink-2); word-break:break-all; user-select:all;
direction:ltr; text-align:left; unicode-bidi:isolate;
}
/* Удаление аккаунта. Красным — не для красоты: это единственное действие в
кабинете, которое нельзя отменить. */
h3.danger{color:var(--err);}
.btn-danger{background:var(--err); color:#fff; border-color:transparent;}
.btn-danger:hover{filter:brightness(1.08); background:var(--err); color:#fff; border-color:transparent;}
#delBlock{margin-top:1.6rem; border-top:1px solid var(--line); padding-top:1.2rem;}
/* ---------- кабинет: своя ширина ---------- */
/* Обычные страницы — это текст, и узкая колонка там правильная: длинную
строку тяжело читать. Кабинет устроен иначе: слева навигация, справа
таблицы, ссылки на подписку и конфиги. В колонке от главной левое меню
начиналось с середины экрана, а справа оставалась пустота. */
.cabwrap{max-width:min(90rem, 100% - 3rem); padding-inline:1.5rem;}
/* Текстовые пояснения внутри всё равно держим читаемой длины: во всю
ширину монитора абзац превращается в полосу, которую глазом не собрать. */
.cabwrap .cabmain p:not(.devcount):not(.prohead p),
.cabwrap .cabmain .muted{max-width:46rem;}
/* Без этого длинная ссылка внутри распирает колонку и уводит всю страницу
вбок — появляется горизонтальная прокрутка на пустом месте. */
.cab{min-width:0;}
.cabmain{min-width:0;}
.cabmain .copyval, .cabmain code{min-width:0; overflow-wrap:anywhere;}
@media (max-width:900px){
.cabwrap{max-width:100%; padding-inline:1.1rem;}
}
/* ---------- кабинет: первый экран ---------- */
/* Человек открывает кабинет с одним вопросом — работает или нет. Поэтому
ответ стоит выше всего остального и читается, не приближаясь.
Цвет здесь несёт смысл, а не украшает, и значений ровно три:
--ok «всё в порядке» (бирюзовый из знака)
--warn «обрати внимание» (янтарный: работает, но не так, как надо)
--err «не работает» (красный)
Раньше «в порядке» красилось в --acc, а он в тёмной теме сиреневый —
и цвет не значил ничего. */
.hero{
display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
flex-wrap:wrap; margin:0 0 1rem;
padding:1rem 1.2rem; border:1px solid var(--line); border-radius:12px;
background:var(--panel); border-left:3px solid var(--ink-3);
}
.hero.st-ok{border-left-color:var(--ok);}
.hero.st-warn{border-left-color:var(--warn);}
.hero.st-err{border-left-color:var(--err);}
.hero-main{display:flex; align-items:center; gap:.9rem; min-width:0;}
.hero-dot{
width:.7rem; height:.7rem; border-radius:50%; flex:none;
background:var(--ink-3);
}
.hero-dot.ok{background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent);}
.hero-dot.warn{background:var(--warn); box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent);}
.hero-dot.err{background:var(--err); box-shadow:0 0 0 4px color-mix(in srgb, var(--err) 22%, transparent);}
.hero-title{font:700 1.15rem/1.2 inherit; color:var(--ink);}
.hero-note{font-size:.82rem; margin-top:.15rem;}
/* Цифры рядом с ответом: сколько каналов ответило, за сколько миллисекунд
и сколько устройств занято. Всё это измерено, а не нарисовано. */
.hero-stats{display:flex; gap:.5rem; flex-wrap:wrap;}
.stat{
display:flex; flex-direction:column; align-items:flex-end; gap:.12rem;
background:transparent; border:1px solid var(--line-2); border-radius:10px;
padding:.5rem .8rem; color:inherit; font:inherit; text-align:right;
}
button.stat{cursor:pointer;}
button.stat:hover{border-color:var(--ok);}
.stat-n{font:700 1.05rem/1 "JetBrains Mono",monospace; color:var(--ink);}
.stat-n.ok{color:var(--ok);}
.stat-n.warn{color:var(--warn);}
.stat-n.err{color:var(--err);}
.stat-l{font-size:.72rem; color:var(--ink-3);}
.chanlist{
margin:0 0 1rem; padding:.8rem 1rem;
border:1px solid var(--line); border-radius:12px; background:var(--panel);
}
.chan{display:flex; align-items:center; gap:.6rem; padding:.32rem 0;}
.chan-dot{width:.5rem; height:.5rem; border-radius:50%; flex:none; background:var(--ink-3);}
.chan-dot.ok{background:var(--ok);}
.chan-dot.warn{background:var(--warn);}
.chan-dot.err{background:var(--err);}
.chan-name{font-size:.88rem; color:var(--ink-2);}
.chan-st{margin-left:auto; font-size:.75rem; display:flex; gap:.5rem; align-items:baseline;}
.chan-rtt{font:600 .75rem/1 "JetBrains Mono",monospace; color:var(--ink-3);}
.chan-rtt.warn{color:var(--warn);}
.chan-grp{
margin:.7rem 0 .2rem; font-size:.74rem; letter-spacing:.08em;
text-transform:uppercase; color:var(--ink-3);
}
.chan-grp:first-of-type{margin-top:.2rem;}
/* ---------- кабинет: значки состояния ---------- */
/* Один и тот же значок в списке устройств, в карточке устройства и в
списке каналов — чтобы цвет читался одинаково везде. */
.badge{
display:inline-flex; align-items:center; gap:.35rem; flex:none;
border-radius:999px; padding:.16rem .6rem;
font:600 .72rem/1.35 inherit; white-space:nowrap;
border:1px solid transparent;
}
.badge::before{content:""; width:.42rem; height:.42rem; border-radius:50%; background:currentColor;}
.badge.ok{color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent);
border-color:color-mix(in srgb, var(--ok) 30%, transparent);}
.badge.warn{color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, transparent);
border-color:color-mix(in srgb, var(--warn) 30%, transparent);}
.badge.err{color:var(--err); background:color-mix(in srgb, var(--err) 12%, transparent);
border-color:color-mix(in srgb, var(--err) 30%, transparent);}
.badge.mute{color:var(--ink-3); background:rgba(127,127,127,.1);
border-color:var(--line-2);}
/* «в сети» — живой сигнал, а не статус. Отличаем его от «активно»
пульсирующей точкой: рядом две зелёные метки не путаются. */
.badge.dev-online{background:transparent; border-color:transparent; padding-left:.1rem;}
.badge.dev-online::before{animation:tb-pulse 1.6s ease-in-out infinite;}
@keyframes tb-pulse{0%,100%{opacity:1; transform:scale(1);}
50%{opacity:.35; transform:scale(.72);}}
@media (prefers-reduced-motion: reduce){.badge.dev-online::before{animation:none;}}
/* ---------- кабинет: мои устройства ---------- */
/* Раньше это был один длинный список одинаковых карточек: чтобы понять,
куда ставить Amnezia, приходилось вчитываться. Теперь устройства
сгруппированы по системе — человек ищет глазами «Windows», а не имя,
которое сам когда-то придумал. */
.devgrp{margin:1.3rem 0 0;}
.devgrp-h{
display:flex; align-items:center; gap:.6rem; margin:0 0 .55rem;
font:700 .74rem/1 inherit; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-3);
}
.devgrp-h::after{content:""; flex:1; height:1px; background:var(--line);}
.devgrp-os{display:inline-flex; align-items:center; gap:.4rem; color:var(--ink-2);}
.devlist{list-style:none; margin:0; padding:0; display:grid; gap:.6rem;}
.dev{
border:1px solid var(--line); border-radius:.75rem; padding:.85rem 1rem;
background:var(--panel); border-left:3px solid var(--ink-3);
}
.dev.st-ok{border-left-color:var(--ok);}
.dev.st-warn{border-left-color:var(--warn);}
.dev.st-err{border-left-color:var(--err);}
.dev-this{box-shadow:0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent);}
.dev-head{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .7rem;}
.dev-head b{font-size:.98rem;}
.dev-head .muted{font-size:.83rem;}
.dev-acts{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem;}
.dev-here-tag{
font:600 .7rem/1 inherit; color:var(--ok);
border:1px solid color-mix(in srgb, var(--ok) 35%, transparent);
border-radius:999px; padding:.2rem .5rem;
}
/* Карточка одного устройства: «что я хочу тут сделать» плитками, а не
простынёй ссылок. */
.doact{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.7rem; margin:1rem 0 0;}
.doact-i{
border:1px solid var(--line); border-radius:.75rem; padding:.9rem 1rem;
background:var(--panel); display:flex; flex-direction:column; gap:.4rem;
}
.doact-i h4{margin:0; font:700 .95rem/1.3 inherit; color:var(--ink);}
.doact-i p{margin:0; font-size:.82rem; color:var(--ink-2);}
.doact-i .btnrow{margin-top:auto; padding-top:.5rem;}
.doact-i.soft{border-style:dashed;}
/* ---------- вопросы: поиск и разделы ---------- */
/* Человек приходит с вопросом своими словами — «амнезия», «пароль», —
а не листает список сверху вниз. Поэтому строка поиска стоит первой,
а разделы нужны тому, кто как раз листает. */
.faqsearch{display:flex; align-items:center; gap:.7rem; margin:0 0 1rem;}
.faqsearch-i{
flex:1; min-width:0; padding:.6rem .85rem;
border:1px solid var(--line-2); border-radius:10px;
background:var(--bg); color:var(--ink); font:inherit;
}
.faqsearch-i:focus{outline:none; border-color:var(--ok);}
.faqsearch-i::placeholder{color:var(--ink-3);}
.faqsearch-n{font-size:.78rem; white-space:nowrap;}
.faqcat{
margin:1.4rem 0 .5rem; font:700 .74rem/1 inherit;
letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
display:flex; align-items:center; gap:.6rem;
}
.faqcat::after{content:""; flex:1; height:1px; background:var(--line);}
.faqcat:first-child{margin-top:0;}
/* Выбор версии AmneziaVPN перед генерацией ключа */
.awgver-pick{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
margin:.2rem 0 .8rem; font-size:.86rem; color:var(--ink-2);}
.awgver-pick select{
padding:.35rem .5rem; border-radius:8px; border:1px solid var(--line-2);
background:var(--panel); color:var(--ink); font:inherit;}
/* ЛК: витрина отбитых атак — три ячейки: сутки / неделя / месяц */
.sec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:.9rem 0 .5rem;}
.sec-cell{border:1px solid var(--line); border-radius:12px; padding:.8rem .95rem; background:var(--panel);}
.sec-cell b{display:block; font-size:1.35rem; letter-spacing:-.02em; line-height:1.15;}
.sec-cell small{color:var(--ink-2); font-size:.82rem;}
@media (max-width:640px){ .sec-grid{grid-template-columns:1fr;} }
/* ---------- левая колонка рубрик (классика) ----------
Публичные страницы получают вертикальный список разделов слева.
Логические свойства (inset-inline/padding-inline) сами разворачивают
колонку вправо на арабском и фарси (dir=rtl). --hdr-h выставляет nav.js
по реальной высоте шапки, чтобы рейка начиналась ровно под ней. */
:root{ --hdr-h:3.4rem; --sidenav-w:15rem; }
.nav-burger{
display:none; align-items:center; justify-content:center;
width:2.2rem; height:2.2rem; margin-inline-end:.2rem; padding:0;
border:1px solid var(--line); border-radius:10px; cursor:pointer;
background:transparent; color:var(--ink);
}
.nav-burger:hover{ background:var(--panel); }
.nav-burger svg{ width:1.15rem; height:1.15rem; display:block; }
.sidenav{
position:fixed; inset-block:var(--hdr-h) 0; inset-inline-start:0;
width:var(--sidenav-w); z-index:50; overflow-y:auto;
padding:1.3rem .8rem; box-sizing:border-box;
border-inline-end:1px solid var(--line);
background:color-mix(in srgb, var(--bg) 90%, transparent);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sidenav-in{ display:flex; flex-direction:column; gap:.14rem; }
.sidenav-in a{
display:block; padding:.62rem .8rem; border-radius:10px;
color:var(--ink-2); font-weight:500; font-size:.97rem; letter-spacing:-.01em;
border:1px solid transparent;
transition:background .15s, color .15s, box-shadow .15s;
}
.sidenav-in a:hover{ background:var(--panel); color:var(--ink); text-decoration:none; }
.sidenav-in a.active{
background:var(--acc-soft); color:var(--ink);
box-shadow:inset 3px 0 0 var(--acc);
}
[dir="rtl"] .sidenav-in a.active{ box-shadow:inset -3px 0 0 var(--acc); }
/* Контент и подвал сдвигаются вправо на ширину рейки (логически). */
body.has-sidenav main,
body.has-sidenav footer{ padding-inline-start:var(--sidenav-w); }
.sidenav-backdrop{
position:fixed; inset:0; z-index:110; border:0;
background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
}
/* Узкий экран: рейка превращается в выезжающий ящик по кнопке-бургеру. */
@media (max-width:900px){
.nav-burger{ display:inline-flex; }
body.has-sidenav main,
body.has-sidenav footer{ padding-inline-start:0; }
.sidenav{
inset-block:0 0; width:16rem; z-index:120;
padding-block-start:calc(var(--hdr-h) + .9rem);
background:var(--panel-solid);
transform:translateX(-100%); transition:transform .22s ease;
}
[dir="rtl"] .sidenav{ transform:translateX(100%); }
body.nav-open .sidenav{ transform:none; }
}
@media (prefers-reduced-motion:reduce){ .sidenav{ transition:none; } }
/* Новая редакция документов в ЛК */
.agr-box{border:1px solid rgba(255,190,80,.45)}
.agr-list{margin:.6rem 0 .9rem;padding-left:1.1rem}
.agr-list li{margin:.35rem 0}
/* ---------- кабинет: плашка «Белые списки» (23.09.2026) ----------
Карточка кабинета широкая (до 90rem), а текст в ней был зажат в 52ch —
справа оставалась пустая половина. На широком экране делаем две колонки:
слева заголовок и статус, справа пояснение на всю ширину. Текст светлее
обычного muted — серый на тёмном читался с трудом. На телефоне — столбиком.
:not([hidden]) обязателен: без него display:grid показал бы плашку, даже
когда данных нет и она должна быть скрыта. */
.wl-box .small-note{max-width:none; color:var(--ink-2); line-height:1.6;}
.wl-box .wl-region{color:var(--ink-3);}
.wl-box .wl-body > p:first-child{margin-top:0;}
.wl-box .wl-head #wlState{margin:0;}
@media (min-width:900px){
.wl-box:not([hidden]){
display:grid; grid-template-columns:minmax(15rem,19rem) 1fr;
column-gap:2.6rem; align-items:start;
}
.wl-box .wl-head{padding-right:2.6rem; border-right:1px solid var(--line);}
.wl-box .wl-head h2{margin-bottom:.8rem;}
}
/* ---------- кабинет: строка ссылок внизу (23.09.2026) ----------
По центру; разделитель — перед каждой ссылкой, кроме первой, так что
скрытая ссылка не оставляет висящую точку в конце. */
.cabwrap .cab-links, .cab-links{
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
max-width:none; margin:2.2rem auto 0; text-align:center; row-gap:.35rem;
}
.cab-links a[hidden]{display:none;}
.cab-links a:not(:first-child)::before{
content:"·"; display:inline-block; margin:0 .65em; color:var(--ink-3);
}
/* На телефоне колонки складываются — между статусом и пояснением нужен воздух. */
@media (max-width:899px){ .wl-box .wl-body{margin-top:1rem;} }
/* Выбор региона в плашке «Белые списки» (23.09.2026): человеку в Москве не
нужен Челябинск, и наоборот. Список под заголовком, на всю ширину колонки. */
.wl-box .wl-reg{display:flex; flex-direction:column; gap:.3rem; margin:0 0 .8rem;}
.wl-box .wl-reg select{
width:100%; max-width:19rem; padding:.5rem .7rem; border-radius:.6rem;
border:1px solid var(--line-2); background:var(--panel); color:var(--ink);
font:inherit; font-size:.95rem; cursor:pointer;
}
.wl-box .wl-nodata{color:var(--ink-2);}