/* ==========================================================================
   Anivan — design preview
   Signature motif: the "route" — a dashed path between waypoint nodes,
   standing in for what the product actually does (route your connection
   through a private node). Used sparingly: hero, one dashboard card,
   list dividers. Everything else stays quiet.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root,
:root[data-theme="light"] {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --surface-2: #efece3;
  --ink: #1b1d24;
  --ink-soft: #4b4e58;
  --muted: #5c5f6b;
  --border: #e3e0d6;
  --route: #33417a;
  --route-soft: rgba(51, 65, 122, 0.1);
  --waypoint: #dd7638;
  --waypoint-soft: rgba(221, 118, 56, 0.14);
  --success: #3e8e5d;
  --success-soft: rgba(62, 142, 93, 0.13);
  --danger: #c1483c;
  --danger-soft: rgba(193, 72, 60, 0.12);
  --shadow: rgba(28, 26, 20, 0.08);
  --shadow-lg: rgba(28, 26, 20, 0.14);
  --blob-1: #5b6fd6;
  --blob-2: #8b5cf6;
  --blob-3: #ff9d5c;
  --grad-brand: linear-gradient(135deg, var(--route), var(--blob-2), var(--waypoint));
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #12131a;
  --surface: #191b24;
  --surface-2: #20222d;
  --ink: #edEDf0;
  --ink-soft: #c7c8d1;
  --muted: #8b8e9c;
  --border: #2b2d39;
  --route: #8ca0ff;
  --route-soft: rgba(140, 160, 255, 0.13);
  --waypoint: #f4a94c;
  --waypoint-soft: rgba(244, 169, 76, 0.15);
  --success: #5cb584;
  --success-soft: rgba(92, 181, 132, 0.14);
  --danger: #e1665a;
  --danger-soft: rgba(225, 102, 90, 0.14);
  --shadow: rgba(0, 0, 0, 0.35);
  --shadow-lg: rgba(0, 0, 0, 0.5);
  --blob-1: #8ca0ff;
  --blob-2: #c084fc;
  --blob-3: #f4a94c;
  --grad-brand: linear-gradient(135deg, var(--route), var(--blob-2), var(--waypoint));
  color-scheme: dark;
}

:root[data-theme="dusk"] {
  --bg: #241b2e;
  --surface: #2e2238;
  --surface-2: #382a43;
  --ink: #f3ecf6;
  --ink-soft: #d8c9de;
  --muted: #a697b0;
  --border: #3d2e48;
  --route: #c98bd9;
  --route-soft: rgba(201, 139, 217, 0.15);
  --waypoint: #f2915b;
  --waypoint-soft: rgba(242, 145, 91, 0.17);
  --success: #7fbf8e;
  --success-soft: rgba(127, 191, 142, 0.16);
  --danger: #e5786c;
  --danger-soft: rgba(229, 120, 108, 0.16);
  --shadow: rgba(15, 8, 20, 0.4);
  --shadow-lg: rgba(15, 8, 20, 0.55);
  --blob-1: #c98bd9;
  --blob-2: #5eead4;
  --blob-3: #f2915b;
  --grad-brand: linear-gradient(135deg, var(--route), var(--blob-2), var(--waypoint));
  color-scheme: dark;
}

:root {
  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-hero: clamp(2.9rem, 6vw, 5.1rem);
  --fs-h1: clamp(2.1rem, 4vw, 2.9rem);
  --fs-h2: clamp(1.65rem, 2.9vw, 2.15rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.15rem;
  --fs-small: 1rem;
  --fs-tiny: 0.86rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 80px;
  --sp-9: 128px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --container: 1200px;
  --dur: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
}

/* full-bleed: break a section out of .container to the full viewport width */
.bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.section-tinted {
  background: linear-gradient(180deg, transparent, var(--surface-2) 18%, var(--surface-2) 82%, transparent);
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--route); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--font-mono); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }

/* ---------- nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: var(--sp-5); }
.brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--waypoint); box-shadow: 0 0 0 4px var(--waypoint-soft); }
.brand-icon { width: 24px; height: 24px; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: var(--sp-6); }
.nav-links a { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); transition: color 0.15s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links .theme-switch { margin-left: var(--sp-4); }
.nav-right { display: flex; align-items: center; gap: var(--sp-3); }
.nav-toggle { display: none; }

/* theme switcher */
.theme-switch { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.theme-switch button {
  width: 30px; height: 30px; border-radius: 999px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  background: transparent; transition: background 0.15s ease, color 0.15s ease;
}
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px var(--shadow); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-5); border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: 700; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--route); color: #fff; box-shadow: 0 6px 18px -8px var(--route); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn.secondary:hover { border-color: var(--route); }
.btn.ghost { background: transparent; color: var(--ink-soft); }
.btn.ghost:hover { color: var(--ink); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger-soft); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.small { height: 36px; padding: 0 var(--sp-4); }
.btn.block { width: 100%; }
.btn svg { width: 17px; height: 17px; }

/* ---------- surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: 0 1px 2px var(--shadow);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--route);
}
.eyebrow::before { content: ''; width: 14px; height: 2px; background: var(--waypoint); border-radius: 2px; }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-tiny); font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.warn { background: var(--waypoint-soft); color: var(--waypoint); }
.badge.off { background: var(--surface-2); color: var(--muted); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- route motif (signature element) ---------- */
.route-diagram { position: relative; }
.route-diagram svg { width: 100%; height: auto; overflow: visible; }
.route-path {
  fill: none; stroke: var(--route); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 7 9;
  stroke-dashoffset: 400;
  animation: route-draw 1.6s ease-out forwards;
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }
.route-node-ring { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.route-node-dot { fill: var(--route); }
.route-node-dot.waypoint { fill: var(--waypoint); }
.route-pulse {
  fill: var(--waypoint);
  animation: route-travel 3.2s cubic-bezier(.45,.05,.55,.95) infinite;
  offset-rotate: 0deg;
}
@keyframes route-travel {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.route-label { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.route-label-bg { fill: var(--surface); opacity: 0.82; }

.route-hub-glow {
  fill: var(--route); opacity: 0.14; transform-box: fill-box; transform-origin: 50% 50%;
  animation: hub-breathe 3.6s ease-in-out infinite;
}
@keyframes hub-breathe {
  0%, 100% { transform: scale(1); opacity: 0.12; }
  50% { transform: scale(1.16); opacity: 0.24; }
}
/* Вращающееся орбитальное кольцо вокруг узла — чисто декоративное, не
   завязано на существующие hero-node/tooltip элементы, поэтому безопасно
   добавлять в любую диаграмму без риска для интерактивности. */
.route-orbit { fill: none; stroke: var(--route); stroke-width: 1.25; stroke-dasharray: 2 11; opacity: 0.35; transform-box: fill-box; transform-origin: 50% 50%; animation: orbit-spin 22s linear infinite; }
.route-orbit.reverse { animation-direction: reverse; opacity: 0.22; stroke-dasharray: 1 8; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.route-stub {
  fill: none; stroke: var(--border); stroke-width: 1.75; stroke-linecap: round;
  stroke-dasharray: 4 7; stroke-dashoffset: 160; opacity: 0.8;
  animation: route-draw 1.2s ease-out 0.5s forwards;
}
.route-mesh {
  fill: none; stroke: var(--border); stroke-width: 1.25; stroke-linecap: round;
  stroke-dasharray: 2 8; opacity: 0.45;
}
.route-ghost-dot {
  fill: var(--muted); opacity: 0.4; transform-box: fill-box; transform-origin: 50% 50%;
}
.route-ghost-dot.f1 { animation: dot-float 4.2s ease-in-out infinite; }
.route-ghost-dot.f2 { animation: dot-float 5.1s ease-in-out infinite 0.6s; }
.route-ghost-dot.f3 { animation: dot-float 3.6s ease-in-out infinite 1.1s; }
@keyframes dot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* small inline dash used as a list/divider marker echoing the route motif */
.route-mark { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: var(--waypoint); margin-right: var(--sp-2); vertical-align: middle; }

/* interactive "play connection" sequence on the hero diagram — "-m" ids
   are the mobile-layout twin of the same diagram (see .hero-visual--mobile) */
#hero-node-a, #hero-node-b, #hero-node-c, #hero-check,
#hero-node-a-m, #hero-node-b-m, #hero-node-c-m, #hero-check-m { transform-box: fill-box; transform-origin: 50% 50%; }
.route-diagram.playing #hero-node-a, .route-diagram.playing #hero-node-a-m { animation: node-pop 0.55s ease; }
.route-diagram.playing #hero-node-b, .route-diagram.playing #hero-node-b-m { animation: node-pop 0.55s ease 0.28s backwards; }
.route-diagram.playing #hero-node-c, .route-diagram.playing #hero-node-c-m { animation: node-pop 0.55s ease 0.56s backwards; }
.route-diagram.playing #hero-check, .route-diagram.playing #hero-check-m { animation: check-pop 0.4s cubic-bezier(.16,1,.3,1) 0.85s forwards; }
@keyframes node-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.24); filter: drop-shadow(0 0 10px var(--route)); }
  100% { transform: scale(1); }
}
@keyframes check-pop {
  0% { opacity: 0; transform: scale(0.3); }
  100% { opacity: 1; transform: scale(1); }
}
.hero-visual-hint { text-align: center; font-size: var(--fs-tiny); margin-top: var(--sp-4); opacity: 0.75; transition: opacity 0.3s ease; }
.hero-visual-wrap:hover .hero-visual-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .route-diagram.playing #hero-node-a, .route-diagram.playing #hero-node-b, .route-diagram.playing #hero-node-c, .route-diagram.playing #hero-check,
  .route-diagram.playing #hero-node-a-m, .route-diagram.playing #hero-node-b-m, .route-diagram.playing #hero-node-c-m, .route-diagram.playing #hero-check-m { animation: none; }
  .route-diagram.playing #hero-check, .route-diagram.playing #hero-check-m { opacity: 1; }
}

/* per-node hover/focus interaction on the hero diagram */
.hero-node { cursor: pointer; outline: none; }
.hero-node .route-node-ring { transition: stroke 0.2s ease, transform 0.2s ease; }
.hero-node:hover, .hero-node:focus-visible, .hero-node.tip-open { transform: scale(1.06); }
.hero-node:hover .route-node-ring, .hero-node:focus-visible .route-node-ring, .hero-node.tip-open .route-node-ring { stroke: var(--route); stroke-width: 2; }
.hero-node:focus-visible .route-node-ring { filter: drop-shadow(0 0 0 2px var(--route-soft)); }

.node-tip { opacity: 0; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; }
.node-tip rect { fill: var(--ink); }
.node-tip text { fill: var(--surface); font-family: var(--font-body); font-size: 11.5px; }
#hero-node-a:hover ~ #tip-a, #hero-node-a:focus-visible ~ #tip-a, #hero-node-a.tip-open ~ #tip-a,
#hero-node-b:hover ~ #tip-b, #hero-node-b:focus-visible ~ #tip-b, #hero-node-b.tip-open ~ #tip-b,
#hero-node-c:hover ~ #tip-c, #hero-node-c:focus-visible ~ #tip-c, #hero-node-c.tip-open ~ #tip-c,
#hero-node-a-m:hover ~ #tip-a-m, #hero-node-a-m:focus-visible ~ #tip-a-m, #hero-node-a-m.tip-open ~ #tip-a-m,
#hero-node-b-m:hover ~ #tip-b-m, #hero-node-b-m:focus-visible ~ #tip-b-m, #hero-node-b-m.tip-open ~ #tip-b-m,
#hero-node-c-m:hover ~ #tip-c-m, #hero-node-c-m:focus-visible ~ #tip-c-m, #hero-node-c-m.tip-open ~ #tip-c-m { opacity: 1; transform: translateY(0); }

/* ---------- hero ---------- */
.hero { padding: var(--sp-8) 0; }
.hero-inner { display: flex; align-items: center; gap: var(--sp-6); min-height: 680px; }
.hero-text { flex: 0 0 auto; width: clamp(280px, 25vw, 460px); padding-left: max(var(--sp-5), calc((100vw - var(--container)) / 2)); box-sizing: content-box; }
.hero-visual-wrap { flex: 1 1 auto; min-width: 0; padding-right: var(--sp-5); position: relative; }
.hero-visual--mobile { display: none; }
.hero h1 { font-size: clamp(2.4rem, 3vw + 1.2rem, 4rem); line-height: 1.05; }
.hero h1 em { font-style: normal; color: var(--route); }
.hero .lede { margin-top: var(--sp-4); font-size: 1.2rem; color: var(--ink-soft); }
.hero-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.hero-meta { display: flex; gap: var(--sp-5); margin-top: var(--sp-7); flex-wrap: wrap; }
.hero-meta div b { display: block; font-family: var(--font-display); font-size: 1.4rem; }
.hero-meta div span { font-size: var(--fs-tiny); color: var(--muted); }

/* ---------- generic sections ---------- */
.section { padding: var(--sp-8) 0; }
.section-head { max-width: 60ch; margin-bottom: var(--sp-6); }
.section-head h2 { margin-top: var(--sp-2); }
.section-head p { margin-top: var(--sp-3); color: var(--muted); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

.feature-card { padding: var(--sp-5); }
.feature-visual { margin-bottom: var(--sp-4); }
.feature-visual svg { width: 100%; height: auto; overflow: visible; }
.feature-card .icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--route-soft); color: var(--route); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); transition: transform 0.25s ease; }
.feature-card:hover .icon { transform: scale(1.15); }
.feature-card .icon svg { width: 20px; height: 20px; }
.feature-card h3 { margin-bottom: var(--sp-2); }
.feature-card p { color: var(--muted); font-size: var(--fs-small); }

.steps-route svg { width: 100%; height: 44px; overflow: visible; display: block; }
.steps-route { margin-bottom: var(--sp-4); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); counter-reset: step; }
.step { position: relative; padding: var(--sp-5); }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step .icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--route-soft); color: var(--route); display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease; }
.step .icon svg { width: 18px; height: 18px; }
.step:hover .icon { transform: scale(1.15); }
.step .num { font-family: var(--font-mono); font-size: var(--fs-tiny); color: var(--waypoint); font-weight: 600; }
.step h3 { margin: var(--sp-3) 0 var(--sp-2); }
.step p { color: var(--muted); font-size: var(--fs-small); }

/* pricing */
.plan { display: flex; flex-direction: column; position: relative; }
.plan .plan-name { font-size: var(--fs-small); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.plan .plan-price { font-family: var(--font-display); font-size: 2.1rem; margin: var(--sp-3) 0 var(--sp-1); }
.plan .plan-price span { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.plan ul { margin: var(--sp-5) 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.plan li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--ink-soft); }
.plan li svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; }

.compare-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.compare-card .icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--route-soft); color: var(--route); display: flex; align-items: center; justify-content: center; }
.compare-card .icon svg { width: 20px; height: 20px; }
.compare-card h3 { margin-bottom: var(--sp-4); }
.compare-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.compare-list li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--ink-soft); }
.compare-list li svg { width: 18px; height: 18px; flex-shrink: 0; }
.compare-list li.yes svg { color: var(--success); }
.compare-list li.no { color: var(--muted); }
.compare-list li.no svg { color: var(--muted); }
.plan.featured {
  border-color: var(--route); position: relative;
  box-shadow: 0 24px 50px -20px var(--blob-2), 0 1px 2px var(--shadow);
}
.plan.featured::before { content: 'популярный'; position: absolute; top: -12px; left: var(--sp-5); background: var(--grad-brand); color: #fff; font-size: var(--fs-tiny); font-weight: 700; padding: 3px 10px; border-radius: 999px; z-index: 1; }
.plan-footer { margin-top: auto; }

/* footer */
.site-footer {
  border-top: 1px solid var(--border); padding: var(--sp-7) 0; margin-top: var(--sp-8);
  background: linear-gradient(180deg, transparent, var(--route-soft) 140%);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-6); }
.footer-grid h4 { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: var(--sp-3); }
.footer-grid ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-grid a { font-size: var(--fs-small); color: var(--ink-soft); }
.footer-grid a:hover { color: var(--route); }
.footer-bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-tiny); color: var(--muted); flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- auth pages ---------- */
/* Раньше форма была одиноко по центру голого фона — вся свободная площадь
   с одной стороны не использовалась. Теперь разделение экрана пополам:
   слева маршрутная диаграмма (тот же визуальный язык, что в .hero),
   справа форма. На узких экранах .auth-visual прячется, но blob-mesh на
   .auth-shell остаётся — так что мобильный фон не регрессирует. */
/* Три колонки: слева и справа — разные визуалы под каждое состояние
   страницы (вход/регистрация/восстановление — у каждого свой смысл,
   поэтому свои диаграммы, не один переиспользованный визуал), в центре —
   сама форма. Оба .auth-side для лево/право держим в разметке для КАЖДОГО
   состояния сразу и переключаем через [hidden] синхронно с карточкой формы
   (см. скрипты в login.html) — так при переходе вход↔восстановление
   визуал вокруг тоже меняется, а не просто исчезает/появляется одинаковым. */
.auth-shell { min-height: calc(100dvh - 68px); display: flex; align-items: stretch; position: relative; overflow: hidden; }
.auth-side {
  flex: 1 1 0; min-width: 0; position: relative; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); padding: var(--sp-7) var(--sp-5); text-align: center;
}
.auth-side-left { border-right: 1px solid var(--border); }
.auth-side-right { border-left: 1px solid var(--border); }
.auth-side-diagram { width: min(300px, 88%); }
.auth-side-diagram svg { width: 100%; height: auto; overflow: visible; }
.auth-side-text { max-width: 30ch; }
.auth-side-text .eyebrow { justify-content: center; margin-bottom: var(--sp-2); }
.auth-side-text p { color: var(--muted); font-size: var(--fs-tiny); line-height: 1.6; }

.auth-mockup { width: min(280px, 92%); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 24px 56px -26px var(--shadow-lg); overflow: hidden; text-align: left; }
.auth-mockup-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.auth-mockup-bar .dot-btn { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.auth-mockup-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-mockup-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-tiny); }
.auth-mockup-row span:first-child { color: var(--muted); }
.auth-mockup-divider { height: 1px; background: var(--border); margin: 2px 0; }
.auth-mockup-plan { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3); display: flex; flex-direction: column; gap: 6px; }
.auth-mockup-plan.is-active { border-color: var(--route); background: var(--route-soft); }
.auth-mockup-plan-top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-tiny); font-weight: 700; }

.auth-form-center { flex: 0 0 auto; width: min(420px, 92vw); display: flex; align-items: center; justify-content: center; padding: var(--sp-7) var(--sp-5); position: relative; z-index: 1; }
.auth-card { width: 100%; position: relative; z-index: 1; }
@media (max-width: 1180px) {
  .auth-side { display: none; }
  .auth-form-center { width: 100%; padding: var(--sp-5) var(--sp-4); padding-top: var(--sp-7); }
}
.auth-card .eyebrow { margin-bottom: var(--sp-3); }
.auth-card h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-2); }
.auth-card .sub { color: var(--muted); font-size: var(--fs-small); margin-bottom: var(--sp-6); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field input {
  height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); padding: 0 var(--sp-4); font-size: var(--fs-body); font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field input:focus { outline: none; border-color: var(--route); background: var(--surface); }
.field textarea {
  min-height: 96px; resize: vertical; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field textarea:focus { outline: none; border-color: var(--route); background: var(--surface); }
.field .hint { font-size: var(--fs-tiny); color: var(--muted); }
.form-foot { margin-top: var(--sp-5); display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-small); }
.form-foot a { color: var(--route); font-weight: 600; }
.divider-or { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--muted); font-size: var(--fs-tiny); }
.divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------- dashboard ---------- */
.dash-shell { padding: var(--sp-7) 0 var(--sp-8); }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-6); gap: var(--sp-4); flex-wrap: wrap; }
.dash-head > div { min-width: 0; }
.dash-head h1 { font-size: var(--fs-h1); overflow-wrap: break-word; word-break: break-all; }
.dash-head p { color: var(--muted); margin-top: var(--sp-2); }
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-5); }
/* .card-ы кабинета (тариф/подключение/обращения) — обычные соседи в потоке,
   без обёртки-грида и её gap, поэтому без явного отступа они соприкасались
   впритык друг с другом. */
.dash-shell > .card { margin-bottom: var(--sp-5); }
.status-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.status-card .status-top { display: flex; align-items: center; justify-content: space-between; }
.status-card .status-top .label { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; }
.status-card .status-top .label .icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--route); transition: transform 0.25s ease; }
.status-card:hover .status-top .label .icon { transform: scale(1.15); }
.status-card .status-top .label .icon svg { width: 18px; height: 18px; }
.status-rows { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.status-row { display: flex; justify-content: space-between; font-size: var(--fs-small); }
.status-row span:first-child { color: var(--muted); }
.status-row span:last-child { font-family: var(--font-mono); font-size: 0.85rem; }
.status-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); flex-wrap: wrap; }

.mini-route { height: 46px; margin: var(--sp-1) 0; }

.tickets-card { grid-column: 1 / -1; }
.tickets-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; gap: var(--sp-3); }
/* "Как подключиться" в кабинете — сворачиваемая карточка (много места
   занимает, когда всегда открыта, см. .setup-guide-toggle в dashboard.html).
   Кнопка выглядит как обычный заголовок tickets-head, но это реальный
   <button>, поэтому сбрасываем браузерные стили кнопки. */
.setup-guide-toggle {
  width: 100%; background: none; border: none; padding: 0; margin-bottom: var(--sp-4);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  /* Базовый .tickets-head — flex-wrap:wrap (нужен для других шапок с
     кнопками) — здесь всего 2 элемента (заголовок + шеврон), и на узком
     экране, где "Как подключиться" переносится на 2 строки, wrap уводил
     шеврон отдельной строкой вниз-влево — совсем не там, где его ждут
     нажать. Прижимаем оба элемента в одну строку с выравниванием по
     верху, чтобы шеврон всегда был у первой строки заголовка. */
  flex-wrap: nowrap; align-items: flex-start;
}
.setup-guide-toggle h2 { margin: 0; min-width: 0; }
.setup-guide-toggle .chevron-icon { flex-shrink: 0; margin-top: 4px; color: var(--muted); transition: transform 0.2s ease; }
.setup-guide-toggle[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }
.ticket-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--border); font-size: var(--fs-small); }
.ticket-row:first-of-type { border-top: none; }
.ticket-row .cat { color: var(--muted); }
.ticket-row time { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-tiny); }

/* ticket chat */
.chat-card { display: flex; flex-direction: column; height: 460px; }
.chat-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); flex-wrap: wrap; gap: var(--sp-2); }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding-right: var(--sp-2); }
.msg { max-width: 78%; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); font-size: var(--fs-small); }
.msg.in { background: var(--surface-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.out { background: var(--route); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg time { display: block; margin-top: var(--sp-1); font-size: 10px; opacity: 0.6; font-family: var(--font-mono); }
.chat-form { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.chat-form input { flex: 1; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.category-btn {
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
  text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.category-btn:hover { border-color: var(--route); }
.category-btn .icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--route); margin-bottom: var(--sp-3); transition: transform 0.25s ease; }
.category-btn:hover .icon { transform: scale(1.15); }
.category-btn .icon svg { width: 16px; height: 16px; }
.category-btn b { display: block; font-size: var(--fs-small); }

/* ---------- forum / news lists ---------- */
.list-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-4); align-items: center; padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.list-row:first-of-type { border-top: none; }
.list-row h3 { font-size: 1.02rem; margin-bottom: var(--sp-1); }
.list-row .excerpt { color: var(--muted); font-size: var(--fs-small); }
.list-row .meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-tiny); color: var(--muted); margin-top: var(--sp-2); }
.list-row .stat { text-align: center; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted); }
.list-row .stat b { display: block; color: var(--ink); font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; }
.pill { font-size: var(--fs-tiny); font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--route-soft); color: var(--route); }

.thread-post { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.thread-post:first-of-type { border-top: none; padding-top: 0; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--route-soft); color: var(--route); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); }
.thread-post .who { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.thread-post .who b { font-size: var(--fs-small); }
.thread-post .who span { font-size: var(--fs-tiny); color: var(--muted); font-family: var(--font-mono); }
.thread-post p { font-size: var(--fs-small); color: var(--ink-soft); }

.article-hero { padding: var(--sp-7) 0 var(--sp-5); }
.article-hero .eyebrow { margin-bottom: var(--sp-4); }
.article-body { max-width: 68ch; font-size: 1.03rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: var(--sp-5); }
.article-body h2 { color: var(--ink); font-size: var(--fs-h2); margin-top: var(--sp-3); }

/* rules / ToS */
.rules-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-7); align-items: start; }
.rules-toc { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--sp-2); }
.rules-toc a { font-size: var(--fs-small); color: var(--muted); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); }
.rules-toc a:hover { color: var(--ink); background: var(--surface-2); }
.rules-body section { margin-bottom: var(--sp-7); }
.rules-body h2 { margin-bottom: var(--sp-3); }
.rules-body p, .rules-body li { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.rules-body li { display: flex; gap: var(--sp-2); }
.rules-body li::before { content: ''; flex-shrink: 0; margin-top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--waypoint); }

/* ---------- utility ---------- */
.text-muted { color: var(--muted); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; align-items: stretch; gap: var(--sp-6); min-height: 0; }
  .hero-text { width: auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .hero-visual-wrap { padding-right: var(--sp-5); padding-left: var(--sp-5); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .steps-route { display: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .rules-layout { grid-template-columns: 1fr; }
  .rules-toc { position: static; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .container { padding: 0 var(--sp-4); }
  .hero { padding: var(--sp-7) 0 var(--sp-6); }
  .hero-actions .btn { flex: 1; }
  .hero-meta { gap: var(--sp-5); flex-wrap: wrap; }
  .scene { padding: var(--sp-8) 0; }
  .scene-title { max-width: 100%; }
  .scene-lede { max-width: 100%; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .dash-grid { grid-template-columns: 1fr; }
  .ticket-row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .ticket-row time { order: -1; }
  .category-grid { grid-template-columns: 1fr; }
  .list-row { grid-template-columns: 1fr; }
  .list-row .stat { display: none; }
  .chat-card { height: 420px; }
  .msg { max-width: 88%; }
  .theme-switch { gap: 1px; padding: 2px; }
  .theme-switch button { width: 27px; height: 27px; }
  .theme-switch button svg { width: 14px; height: 14px; }
  .nav-links.open .theme-switch { margin: var(--sp-2) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
}

@media (max-width: 480px) {
  .site-nav .container { flex-wrap: wrap; height: auto; min-height: 68px; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .nav-right .avatar { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .scene-stats { gap: var(--sp-5); }
  .dash-head { flex-direction: column; align-items: flex-start; }
  .admin-section-head { flex-direction: column; align-items: flex-start; }
  .tickets-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .tickets-head .btn { align-self: stretch; }
  /* .setup-guide-toggle тоже .tickets-head (переиспользует стили шапки),
     но это кнопка-раскрывашка из 2 частей (заголовок + шеврон) — column
     на мобильном роняет шеврон под заголовок, в свободный угол слева,
     а не туда, где на него естественно нажать. Возвращаем строку. */
  .setup-guide-toggle { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: var(--sp-3); }
}

/* ==========================================================================
   Admin panel
   ========================================================================== */
.admin-layout { display: flex; align-items: flex-start; }
.admin-sidebar { width: 240px; flex-shrink: 0; padding: var(--sp-5) var(--sp-3); position: sticky; top: 68px; height: calc(100dvh - 68px); overflow-y: auto; border-right: 1px solid var(--border); }
.admin-sidebar-group-label { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; padding: var(--sp-4) var(--sp-3) var(--sp-2); }
.admin-sidebar-group-label:first-child { padding-top: var(--sp-2); }
.tab-nav-btn { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 10px var(--sp-3); border-radius: var(--radius-sm); border: none; background: transparent; color: var(--ink-soft); font-size: var(--fs-small); font-weight: 600; cursor: pointer; text-align: left; font-family: inherit; }
.tab-nav-btn:hover { background: var(--surface-2); color: var(--ink); }
.tab-nav-btn.active { background: var(--route-soft); color: var(--route); }
.tab-nav-btn .nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.tab-nav-btn .badge--unread { margin-left: auto; background: var(--waypoint); color: #fff; border-radius: 999px; font-size: 10px; padding: 1px 7px; }

.admin-main { flex: 1; min-width: 0; padding: var(--sp-6) var(--sp-6) var(--sp-8); }
.admin-section[hidden] { display: none; }
.admin-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.admin-section-head h2 { font-size: var(--fs-h1); }
.admin-section-head p { color: var(--muted); margin-top: var(--sp-2); font-size: var(--fs-small); }

.admin-toolbar { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.admin-toolbar input[type="search"], .admin-toolbar input[type="text"] { height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); padding: 0 var(--sp-3); font-family: inherit; font-size: var(--fs-small); flex: 1; min-width: 180px; }
.admin-toolbar input:focus { outline: none; border-color: var(--route); background: var(--surface); }

table.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
table.admin-table th { text-align: left; color: var(--muted); font-weight: 700; font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--sp-3); border-bottom: 1px solid var(--border); }
table.admin-table td { padding: var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
table.admin-table tbody tr:last-child td { border-bottom: none; }
table.admin-table tbody tr { cursor: pointer; }
table.admin-table tbody tr:hover { background: var(--surface-2); }
.row-user { display: flex; align-items: center; gap: var(--sp-3); }
.row-user .avatar { width: 32px; height: 32px; font-size: 0.8rem; }

.sub-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sub-actions { display: flex; gap: 6px; margin-top: 2px; }
.icon-btn {
  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn:hover { color: var(--route); border-color: var(--route); }
.icon-btn[data-sub-action="renew"]:hover { color: var(--success); border-color: var(--success); }
.icon-btn.done { color: var(--success); border-color: var(--success); background: var(--success-soft); }

.admin-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4); box-shadow: 0 1px 2px var(--shadow); }
.stat-tile .stat-value { font-family: var(--font-display); font-size: 1.5rem; }
.stat-tile .stat-label { font-size: var(--fs-tiny); color: var(--muted); margin-top: 4px; }

.server-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.server-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); background: var(--surface); box-shadow: 0 1px 2px var(--shadow); }
.server-card.warn { border-color: var(--waypoint); }
.server-card .server-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
.server-card .server-head b { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.server-meters { display: flex; flex-direction: column; gap: var(--sp-3); }
.meter-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); }
.meter-row .meter-icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.meter-row .meter-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter-row .meter-fill { height: 100%; background: var(--route); border-radius: 999px; }
.meter-row .meter-value { font-family: var(--font-mono); font-size: var(--fs-tiny); color: var(--muted); width: 56px; text-align: right; }

.ticket-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.ticket-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4); background: var(--surface); cursor: pointer; transition: border-color 0.15s ease; }
.ticket-card:hover { border-color: var(--route); }
.ticket-card .tc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); }
.ticket-card h4 { font-size: var(--fs-small); margin: var(--sp-2) 0; font-weight: 700; }
.ticket-card .tc-meta { display: flex; justify-content: space-between; font-size: var(--fs-tiny); color: var(--muted); }
.badge.admin-tag { background: var(--success-soft); color: var(--success); }

.admin-section-switch { display: none; }

@media (max-width: 900px) {
  .admin-sidebar { display: none; }
  .admin-section-switch { display: block; margin: 0 0 var(--sp-5); position: relative; }
  .admin-main { padding: var(--sp-5) var(--sp-4); width: 100%; }
  .admin-layout { flex-direction: column; }
}
.admin-section-switch-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 12px var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: var(--fs-small); color: var(--ink); cursor: pointer; font-family: inherit; }
.admin-section-switch-btn svg { width: 16px; height: 16px; color: var(--muted); transition: transform 0.15s ease; }
.admin-section-switch-btn.open svg { transform: rotate(180deg); }
.admin-section-switch-list { display: none; margin-top: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: 0 8px 24px -8px var(--shadow-lg); }
.admin-section-switch-list.open { display: block; }
.admin-section-switch-list .tab-nav-btn { border-radius: 0; padding: 12px var(--sp-4); }

@media (max-width: 640px) {
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .server-cards { grid-template-columns: 1fr; }
  .ticket-cards-grid { grid-template-columns: 1fr; }
  .desktop-only-hint { display: none; }

  /* Компактный список вместо разворачивания каждого пользователя в
     карточку со всеми полями (было — грид 2 в ряд из 7+ подписанных
     полей, читалось как бесконечная лестница). На телефоне в строке
     видны только логин, дата и цветная полоска активен/неактивен —
     за остальным (роль/тариф/прокси/VPN/…) админ проваливается тапом
     по строке в карточку пользователя (см. renderUserRows в admin.js). */
  table.admin-table thead { display: none; }
  table.admin-table, table.admin-table tbody { display: block; width: 100%; }
  table.admin-table tr {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 40px 13px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  table.admin-table tr[data-active="false"] { border-left-color: var(--danger); opacity: 0.75; }
  table.admin-table td { display: none; width: auto; padding: 0; border: none; min-width: 0; }
  table.admin-table td[data-label]::before { content: none; }

  table.admin-table td[data-col="username"] {
    display: block; flex: 1; min-width: 0;
    font-weight: 700; font-size: var(--fs-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  table.admin-table td[data-col="created"] {
    display: block; flex-shrink: 0;
    font-size: var(--fs-tiny); font-family: var(--font-mono);
  }

  /* Чекбокс выбора — в угол строки, а не отдельным полем. */
  table.admin-table td[data-col="select"] { display: block; position: absolute; top: 12px; right: 12px; }
}

/* ==========================================================================
   Visual richness pass: background texture, product preview frame,
   testimonials, hover lift, scroll reveal
   ========================================================================== */
/* Тонкая точечная сетка на фоне — заполняет пустое пространство текстурой,
   а не добавляет ещё объектов ("минимализм, но не пусто"): едва заметная,
   не соперничает с блобами/диаграммой, но убирает ощущение голого фона. */
.hero { position: relative; overflow: hidden; background-image: radial-gradient(circle, var(--border) 1.3px, transparent 1.3px); background-size: 28px 28px; }
.hero-inner { position: relative; z-index: 1; }
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  height: clamp(56px, 15vw, 220px);
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--bg) 100%, transparent) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 12%,
    color-mix(in srgb, var(--bg) 60%, transparent) 28%,
    color-mix(in srgb, var(--bg) 32%, transparent) 48%,
    color-mix(in srgb, var(--bg) 12%, transparent) 70%,
    color-mix(in srgb, var(--bg) 0%, transparent) 100%);
}

.hero-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); }
.blob-1 { width: clamp(200px, 44vw, 760px); height: clamp(200px, 44vw, 760px); background: var(--blob-1); opacity: 0.26; top: -10%; left: 2%; animation: blob-drift-1 22s ease-in-out infinite; }
.blob-2 { width: clamp(180px, 40vw, 700px); height: clamp(180px, 40vw, 700px); background: var(--blob-2); opacity: 0.22; top: 4%; right: 0%; animation: blob-drift-2 26s ease-in-out infinite; }
.blob-3 { width: clamp(160px, 36vw, 640px); height: clamp(160px, 36vw, 640px); background: var(--blob-3); opacity: 0.2; bottom: -18%; left: 34%; animation: blob-drift-3 19s ease-in-out infinite; }
@media (min-width: 641px) { .blob { filter: blur(85px); } }
@keyframes blob-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, 5%) scale(1.08); } }
@keyframes blob-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5%, 4%) scale(0.94); } }
@keyframes blob-drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -6%) scale(1.1); } }

/* ---------- big scene: standalone full-bleed visual chapter ---------- */
.scene {
  position: relative; overflow: hidden; padding: var(--sp-8) 0; color: #f4f2ff;
  background:
    radial-gradient(circle, rgba(244,242,255,0.07) 1px, transparent 1px) 0 0/26px 26px,
    radial-gradient(ellipse 120% 90% at 15% -10%, #2a2560 0%, #171335 42%, #0d0e1c 100%);
}
.scene::before, .scene::after {
  content: ''; position: absolute; left: 0; right: 0; height: clamp(56px, 15vw, 220px);
  z-index: 2; pointer-events: none;
}
.scene::before {
  top: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 100%, transparent) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 12%,
    color-mix(in srgb, var(--bg) 60%, transparent) 28%,
    color-mix(in srgb, var(--bg) 32%, transparent) 48%,
    color-mix(in srgb, var(--bg) 12%, transparent) 70%,
    color-mix(in srgb, var(--bg) 0%, transparent) 100%);
}
.scene::after {
  bottom: 0;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--bg) 100%, transparent) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 12%,
    color-mix(in srgb, var(--bg) 60%, transparent) 28%,
    color-mix(in srgb, var(--bg) 32%, transparent) 48%,
    color-mix(in srgb, var(--bg) 12%, transparent) 70%,
    color-mix(in srgb, var(--bg) 0%, transparent) 100%);
}
.scene-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene-mesh .blob { filter: blur(110px); opacity: 0.36; }
.scene-inner { position: relative; z-index: 1; text-align: center; }
.scene-eyebrow { color: var(--blob-2); }
.scene-eyebrow::before { background: var(--blob-3); }
.scene-title { font-size: var(--fs-hero); margin-top: var(--sp-3); color: #fff; max-width: 20ch; margin-left: auto; margin-right: auto; }
.scene-lede { margin-top: var(--sp-4); font-size: 1.1rem; color: rgba(244, 242, 255, 0.72); max-width: 52ch; margin-left: auto; margin-right: auto; }

.scene-stats { display: flex; justify-content: center; gap: var(--sp-8); margin-top: var(--sp-7); flex-wrap: wrap; }
.scene-stat { text-align: center; }
.scene-stat b { display: block; font-family: var(--font-display); font-size: 2.6rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.scene-stat span { display: block; font-size: var(--fs-small); color: rgba(244, 242, 255, 0.6); margin-top: 4px; }

.scene-graphic { margin-top: var(--sp-6); }
.scene-graphic--mobile { display: none; }
.scene-graphic svg { width: 100%; height: auto; overflow: visible; }
/* Диаграмма занимала лишь часть выделенной под неё высоты — визуально
   увеличиваем рендер, не трогая координаты путей/анимации offset-path. */
.scene-graphic:not(.scene-graphic--mobile) svg { transform: scale(1.18); transform-origin: center top; }
.scene-line { fill: none; stroke: rgba(244, 242, 255, 0.22); stroke-width: 1.75; stroke-dasharray: 5 8; }
.scene-ring { fill: rgba(244, 242, 255, 0.06); stroke: rgba(244, 242, 255, 0.3); stroke-width: 1.5; }
.scene-node-hub .scene-ring { fill: rgba(244, 242, 255, 0.1); stroke: var(--blob-2); stroke-width: 2; }
.scene-node-label { font-family: var(--font-mono); font-size: 13px; fill: rgba(244, 242, 255, 0.7); }
.scene-dot.c1 { fill: var(--blob-1); }
.scene-dot.c2 { fill: var(--blob-2); }
.scene-dot.c3 { fill: var(--blob-3); }
.scene-pulse.p1 { fill: var(--blob-2); animation: scene-travel-1 6s cubic-bezier(.45,.05,.55,.95) infinite; }
.scene-pulse.p2 { fill: var(--blob-3); animation: scene-travel-2 8s cubic-bezier(.45,.05,.55,.95) infinite 1.5s; }
@keyframes scene-travel-1 {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes scene-travel-2 {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (max-width: 640px) {
  .scene-stats { gap: var(--sp-6); }
  .scene-stat b { font-size: 2rem; }
}

/* Обе диаграммы (маршрут в hero и карта узла в scene) — горизонтальные
   композиции в оригинале: viewBox сильно шире, чем высота. Простое
   масштабирование по ширине контейнера на узком экране сжимает весь
   текст/подписи внутри SVG пропорционально (это векторный текст, у
   него нет отдельного "минимального размера шрифта") — а горизонтальный
   скролл на фиксированной ширине лишь прячет проблему, а не решает её.
   Вместо этого показываем отдельную вертикальную раскладку той же схемы
   (.hero-visual--mobile/.scene-graphic--mobile выше в разметке) — свой
   viewBox под портретный экран, а не растянутая копия. Порог — 900px, а
   не 640px: именно на 900px .hero-inner переходит в колонку (см. выше),
   и широкую горизонтальную диаграмму уже сжимает в узкую стопку раньше,
   чем включалась портретная раскладка — было заметно "сжато" на планшетах. */
@media (max-width: 900px) {
  .hero-visual:not(.hero-visual--mobile) { display: none; }
  .hero-visual--mobile { display: block; }
  .scene-graphic:not(.scene-graphic--mobile) { display: none; }
  .scene-graphic--mobile { display: block; }
}

.preview-frame-stage { position: relative; padding: 34px 4%; }
.preview-glow {
  position: absolute; inset: -22% -14%; z-index: 0; pointer-events: none; filter: blur(18px);
  background: radial-gradient(ellipse 60% 55% at 22% 15%, var(--blob-1), transparent 68%),
              radial-gradient(ellipse 50% 46% at 85% 88%, var(--blob-3), transparent 68%),
              radial-gradient(ellipse 40% 40% at 90% 10%, var(--blob-2), transparent 70%);
  opacity: 0.36;
}
@media (max-width: 640px) {
  /* На десктопе glow нарочно вылезает на 14% за рамку превью для мягкого
     свечения — на телефоне контейнер почти во всю ширину экрана, и тот
     же отступ вылезает уже за пределы viewport, создавая горизонтальный
     скролл страницы. Сокращаем вылет, чтобы он оставался внутри экрана. */
  .preview-glow { inset: -14% -3%; }
}
.preview-frame { position: relative; z-index: 1; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 30px 70px -30px var(--shadow-lg); overflow: hidden; }
.floating-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4); box-shadow: 0 18px 34px -18px var(--shadow-lg);
}
.floating-chip .chip-text b { display: block; font-size: var(--fs-small); }
.floating-chip .chip-text span { display: block; font-size: var(--fs-tiny); color: var(--muted); font-family: var(--font-mono); }
.floating-chip .chip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px var(--success-soft); flex-shrink: 0; }
.floating-chip .chip-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--waypoint-soft); color: var(--waypoint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.floating-chip .chip-icon svg { width: 17px; height: 17px; }
.chip-a { top: 0; right: 4%; animation: chip-float 4.6s ease-in-out infinite; }
.chip-b { bottom: 0; left: 6%; animation: chip-float 5.4s ease-in-out infinite 0.6s; }
.chip-c { bottom: 0; right: 6%; animation: chip-float 5s ease-in-out infinite 1.2s; }
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.preview-frame-bar { display: flex; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.preview-frame-bar .dot-btn { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.preview-frame-bar .url { margin-left: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-tiny); color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; }
.preview-frame-body { padding: var(--sp-6); }
.preview-mini-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-4); }
.preview-mini-grid .status-card { padding: var(--sp-4); gap: var(--sp-3); }
.preview-mini-grid .status-top .label { font-size: var(--fs-small); }

.feature-card, .plan, .preview-frame { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.feature-card:hover, .plan:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px var(--shadow-lg); }
.plan.featured:hover { box-shadow: 0 28px 56px -20px var(--blob-2), 0 20px 40px -20px var(--shadow-lg); }

/* реальный main.js добавляет класс .visible (не .in-view) и не выставляет
   body.js-reveal-ready — правило подстроено под то, что он реально делает */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(1) { transition-delay: 0ms; }
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }

@media (max-width: 900px) {
  .preview-mini-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .preview-frame-body { padding: var(--sp-4); }
  .preview-frame-stage { padding: 0; }
  .floating-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   Прод-only дополнения: элементы, которых нет в бета-версии (font-scale,
   реальная одно-кнопочная тема, реальный гамбургер main.js, cookie-banner,
   форма заявки) — сам визуальный язык не меняется, только новые компоненты
   в том же стиле.
   ========================================================================== */

/* [hidden] переопределяется многими компонентами через display — без этого
   JS-скрытие (например, формы "забыли пароль") не будет работать. */
[hidden] { display: none !important; }

/* ---- группа справа: масштаб текста + тема (у .nav-controls не было
   display:flex вообще — из-за этого кнопки не выравнивались в ряд и
   съезжали) ---- */
.nav-controls { display: flex; align-items: center; gap: var(--sp-2); }

/* ---- font-scale (A-/A+) ---- */
.font-scale-toggle { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.font-scale-btn {
  width: 28px; height: 28px; border-radius: 999px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  background: transparent; font-size: 0.72rem; font-weight: 700; font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.font-scale-btn:hover { background: var(--surface); color: var(--ink); }

/* ---- реальный переключатель темы (одна кнопка, светлая/тёмная) ---- */
.theme-toggle-btn {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-toggle-btn:hover { background: var(--surface); color: var(--ink); }
.theme-icon { width: 16px; height: 16px; }
.theme-icon--moon { display: block; }
.theme-icon--sun { display: none; }
[data-theme="light"] .theme-icon--moon { display: none; }
[data-theme="light"] .theme-icon--sun { display: block; }

html.font-scale-0 { zoom: .9; }
html.font-scale-2 { zoom: 1.15; }
html.font-scale-3 { zoom: 1.3; }

/* ---- реальный гамбургер (main.js: #nav-toggle, .nav-links.open) ---- */
.nav-toggle-btn {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 38px; height: 38px; padding: 0; border: none; border-radius: 10px; background: transparent;
  cursor: pointer; flex-shrink: 0;
}
.nav-toggle-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-toggle-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-btn.open span:nth-child(2) { opacity: 0; }
.nav-toggle-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
  .font-scale-toggle { gap: 1px; padding: 2px; }
  .font-scale-btn { width: 27px; height: 27px; }
}

/* Порог поднят с 760px до 900px: полный набор ссылок + font-scale +
   3-кнопочный переключатель темы в одну строку не помещались уже на
   планшетных 640-900px, шапка вылезала за ширину экрана (проверено и на
   этой, и на других страницах с тем же .theme-switch). Теперь бургер
   появляется раньше, до того как контент перестаёт помещаться. */
@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-5); box-shadow: 0 16px 32px -16px var(--shadow-lg);
    z-index: 39;
  }
  .nav-links.open { display: flex; }
  .nav-toggle-btn { display: flex; }
}

/* ---- cookie-banner (динамически создаётся cookie-consent.js) ---- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; max-width: 620px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(16px); box-shadow: 0 20px 50px -20px var(--shadow-lg);
  color: var(--ink); font-size: var(--fs-small); line-height: 1.5;
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookie-banner.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-banner p { margin: 0; flex: 1 1 260px; color: var(--muted); }
.cookie-banner a { color: var(--route); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; margin-left: auto; }
.cookie-banner-actions button {
  white-space: nowrap; padding: 9px 16px; border-radius: 999px; font-size: var(--fs-small); font-weight: 700;
  border: 1px solid var(--border); background: transparent; color: var(--ink); cursor: pointer;
  font-family: inherit; transition: background 0.2s ease, opacity 0.2s ease;
}
.cookie-banner-actions button.primary { background: var(--route); color: #fff; border-color: transparent; }
.cookie-banner-actions button:hover { opacity: .85; }
@media (max-width: 480px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: var(--sp-4); }
  .cookie-banner-actions { margin-left: 0; width: 100%; }
  .cookie-banner-actions button { flex: 1; }
}

/* ---- форма заявки без аккаунта (agree-checkbox, ошибки) ---- */
.agree-checkbox { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-tiny); color: var(--muted); line-height: 1.5; cursor: pointer; margin-top: var(--sp-1); }
.agree-checkbox input { margin-top: 3px; flex-shrink: 0; }
.agree-checkbox a { color: var(--route); font-weight: 600; }
.required-mark { color: var(--danger); }
.auth-error { font-size: var(--fs-small); background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); padding: 10px 14px; margin-top: var(--sp-2); }
.auth-error.success-box { background: var(--success-soft); color: var(--success); }

/* ==========================================================================
   Личный кабинет (dashboard.html) — прокси/VPN-конфиг, QR, тикет-чат.
   Классы генерируются в основном из dashboard.js — имена не менять,
   только визуальный язык (переезд с glass/blue-accent на дизайн-токены).
   ========================================================================== */

.warning-banner {
  display: flex; gap: var(--sp-3); align-items: flex-start; max-width: 760px; margin: 0 auto var(--sp-6);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg);
  background: var(--waypoint-soft); border: 1px solid var(--waypoint); color: var(--ink);
  font-size: var(--fs-small); line-height: 1.55;
}
.warning-banner strong { display: block; color: var(--ink); margin-bottom: 4px; }

.proxy-loading { text-align: center; color: var(--muted); padding: var(--sp-7) 0; }

/* ---- главный QR (прокси/VPN) ---- */
.primary-connect { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.primary-card {
  width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6);
  padding: var(--sp-7) var(--sp-6); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--route); box-shadow: 0 0 0 1px var(--route), 0 20px 50px -24px var(--route);
}
.primary-qr-box {
  border: none; cursor: pointer; background: #ffffff; border-radius: var(--radius-md); padding: var(--sp-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); transition: transform .25s; width: 100%;
}
.primary-qr-box:hover { transform: scale(1.02); }
.primary-qr { width: 100%; max-width: 280px; aspect-ratio: 1/1; }
.primary-qr img, .primary-qr canvas { width: 100% !important; height: 100% !important; display: block; }
.primary-qr-hint { color: #666; font-size: var(--fs-small); font-weight: 600; }
.primary-url-display {
  width: 100%; text-align: center; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: var(--fs-small); word-break: break-all;
}
.primary-buttons { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.primary-buttons .open-btn { height: 56px; font-size: 1.02rem; border-radius: var(--radius-sm); }
.copy-btn.copy-btn--wide { width: 100%; height: 50px; gap: 10px; font-size: var(--fs-small); font-weight: 700; }

/* ---- "другие варианты подключения" ---- */
.more-toggle-wrap { display: flex; justify-content: center; }
.more-toggle {
  display: flex; align-items: center; gap: var(--sp-2); padding: 13px 24px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  font-size: var(--fs-small); cursor: pointer; transition: .2s; font-family: inherit;
}
.more-toggle:hover { background: var(--surface-2); color: var(--ink); }
.more-toggle svg { transition: transform .25s; }
.more-toggle.open svg { transform: rotate(180deg); }
.proxy-grid { display: none; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
.proxy-grid.open { display: grid; }
@media (max-width: 800px) { .proxy-grid { grid-template-columns: 1fr; } }

/* ---- QR-модалка ---- */
.qr-modal {
  position: fixed; inset: 0; background: rgba(20,18,14,.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5); z-index: 3000;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.qr-modal.open { opacity: 1; pointer-events: auto; }
.qr-modal-box {
  position: relative; background: #ffffff; border-radius: var(--radius-lg); padding: var(--sp-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); max-width: min(92vw, 520px);
}
.qr-modal-qr { width: min(80vw, 420px); height: min(80vw, 420px); }
.qr-modal-qr img, .qr-modal-qr canvas { width: 100% !important; height: 100% !important; display: block; }
.qr-modal-url { color: #333; font-family: var(--font-mono); font-size: var(--fs-small); text-align: center; word-break: break-all; }
.qr-modal-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.06); color: #222; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.qr-modal-close:hover { background: rgba(0,0,0,.12); }

/* ---- доп. карточки подключения ---- */
.proxy-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  transition: transform .25s ease, border-color .25s ease;
}
.proxy-card:hover { transform: translateY(-4px); border-color: var(--route); }
.proxy-card--primary { border-color: var(--route); box-shadow: 0 0 0 1px var(--route); }
.proxy-badge {
  display: inline-flex; align-items: center; align-self: flex-start; padding: 6px 12px; border-radius: 999px;
  background: var(--success-soft); border: 1px solid var(--success); color: var(--success);
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .04em;
}
.proxy-top { display: flex; gap: var(--sp-5); align-items: flex-start; justify-content: space-between; }
.proxy-info { flex: 1; min-width: 0; }
.proxy-card h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); line-height: 1.3; font-family: var(--font-display); font-weight: 600; }
.proxy-card p { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.qr-box {
  flex-shrink: 0; width: 150px; height: 150px; border-radius: var(--radius-md); background: #fff; padding: var(--sp-3);
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform .2s;
}
.qr-box:hover { transform: scale(1.04); }
.qr-box img, .qr-box canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.proxy-link-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.proxy-url-display {
  flex: 1; min-width: 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--border); color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-tiny);
  overflow-x: auto; white-space: nowrap;
}
.copy-btn {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: .2s;
}
.copy-btn:hover { background: var(--surface-2); }
.copy-btn.copied { background: var(--success-soft); border-color: var(--success); color: var(--success); animation: copy-pop .3s ease; }
.open-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 700; color: #fff; background: var(--route); transition: transform .2s, box-shadow .2s, background .2s;
}
.open-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.open-btn.copied { background: var(--success); color: #fff; animation: copy-pop .3s ease; }
@keyframes copy-pop { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ---- VPN: нет доступа ---- */
.vpn-noaccess { max-width: 640px; margin: 0 auto; padding: var(--sp-6) var(--sp-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); text-align: center; }
.vpn-noaccess p { color: var(--muted); line-height: 1.65; margin: 0 0 var(--sp-4); }
.vpn-noaccess p:last-child { margin-bottom: 0; }
.vpn-noaccess .vpn-price { color: var(--ink); font-weight: 700; }
.vpn-noaccess #vpn-request-btn { margin-top: 4px; }

/* ---- разделение трафика ---- */
.split-tunnel-toggle { max-width: 520px; width: 100%; padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.split-tunnel-toggle .checkbox-row { margin-bottom: var(--sp-2); }
.split-tunnel-toggle #vpn-split-hint { margin: 0; }
.checkbox-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--ink); }
.checkbox-row input { width: auto; }

/* ---- проверка VPN ---- */
.vpn-test-panel { max-width: 480px; width: 100%; margin: var(--sp-6) auto 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.vpn-test-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.vpn-test-label { font-size: var(--fs-small); color: var(--ink-soft); }
#vpn-test-results { display: flex; flex-direction: column; gap: var(--sp-3); }
#vpn-test-ru-iframe { width: 100%; height: 220px; border: 1px solid var(--border); border-radius: var(--radius-md); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-tiny); font-weight: 700; background: var(--surface-2); color: var(--muted); }
.badge--admin { background: var(--route-soft); color: var(--route); }
.badge--ok { background: var(--success-soft); color: var(--success); }
.badge--off { background: var(--danger-soft); color: var(--danger); }
.badge--warn { background: var(--waypoint-soft); color: var(--waypoint); }
.badge--unread { background: var(--route); color: #fff; font-weight: 700; }
.category-tag { background: var(--route-soft); color: var(--route); margin: 2px 0 4px; }
.category-tag--admin { background: var(--success-soft); color: var(--success); }
button.badge { border: none; cursor: pointer; font-family: inherit; transition: opacity .15s ease; }
button.badge:hover { opacity: .8; }
button.badge:disabled { opacity: .4; cursor: not-allowed; }

/* ---- чат / обращения ---- */
.chat-box { max-width: 760px; margin: 0 auto; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.chat-messages { max-height: 420px; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.chat-empty { color: var(--muted); text-align: center; padding: var(--sp-5) 0; }
.chat-msg { max-width: 80%; padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--fs-small); }
.chat-msg--mine { align-self: flex-end; background: var(--route); color: #fff; }
.chat-msg--admin { align-self: flex-start; }
.chat-msg-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.chat-msg--mine .chat-msg-meta { color: rgba(255,255,255,.75); }
.chat-msg-text { font-size: var(--fs-small); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.chat-form { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-top: 1px solid var(--border); }
.chat-form textarea {
  flex: 1; resize: none; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink); font-family: inherit; font-size: var(--fs-small); outline: none;
}
.chat-form textarea:focus { border-color: var(--route); }
.chat-form .btn { align-self: flex-end; }

.ticket-category-step { padding: var(--sp-5) var(--sp-4); }
.ticket-step-label { margin: 0 0 var(--sp-4); font-weight: 700; text-align: center; }
.ticket-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.ticket-category-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--sp-4);
  border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border);
  color: inherit; text-align: left; cursor: pointer; transition: .2s; font-family: inherit;
}
.ticket-category-btn:hover { background: var(--surface); border-color: var(--route); transform: translateY(-2px); }
.ticket-category-btn.selected { background: var(--route-soft); border-color: var(--route); }
.ticket-category-title { font-weight: 700; font-size: var(--fs-small); }
.ticket-category-desc { font-size: var(--fs-tiny); color: var(--muted); }

.ticket-compose-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-small); color: var(--muted); }

#ticket-list-step { padding: var(--sp-5) var(--sp-4); }
.ticket-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 640px) {
  .ticket-list-toolbar { flex-direction: column; align-items: stretch; }
  .ticket-list-toolbar .btn { width: 100%; }
}
.ticket-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ticket-list-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: var(--sp-4);
  border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border);
  color: inherit; text-align: left; cursor: pointer; transition: .2s; font-family: inherit;
}
.ticket-list-item:hover { background: var(--surface); border-color: var(--route); }
.ticket-list-item-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--sp-3); }
.ticket-list-item-preview { font-size: var(--fs-small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ticket-list-item-date { font-size: var(--fs-tiny); color: var(--muted); }

.ticket-chat-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) 0; }

.link-btn {
  background: none; border: none; padding: 10px 4px; margin: -10px -4px; color: var(--muted);
  font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: inherit;
}
.link-btn:hover { color: var(--ink); }

/* ---- модалки (принудительная смена пароля, VPN-промо) ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,18,14,.55); display: none; align-items: center; justify-content: center; z-index: 2000; padding: var(--sp-5); }
.modal-overlay.open { display: flex; }
.modal-card {
  width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 70px -30px var(--shadow-lg);
}
.modal-card h3 { margin-bottom: var(--sp-2); font-size: 1.15rem; font-family: var(--font-display); font-weight: 600; }
.modal-card label { font-size: var(--fs-tiny); color: var(--muted); margin-top: var(--sp-2); font-weight: 600; }
.modal-card input, .modal-card select, .modal-card textarea {
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink); font-size: var(--fs-small); font-family: inherit; outline: none;
}
.modal-card input:focus, .modal-card textarea:focus { border-color: var(--route); }
.modal-card textarea { resize: vertical; }
.modal-error { color: var(--danger); font-size: var(--fs-small); background: var(--danger-soft); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.modal-actions-utility { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.password-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.password-row input { min-width: 0; }
.password-row .btn { flex-shrink: 0; }

.vpn-promo-actions { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.vpn-promo-actions .btn { width: 100%; text-align: center; }

.access-group { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); margin: 6px 0; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); }
.access-group .checkbox-row { margin: 0; }

.required-mark { color: var(--danger); }
.btn.small { padding: 8px 16px; font-size: var(--fs-tiny); border-radius: var(--radius-sm); height: auto; }
.btn.danger { color: var(--danger); border-color: var(--danger-soft); background: transparent; }
.btn.danger:hover { background: var(--danger-soft); }

/* ---- компактный hero (страницы кабинета/форума/инструкции — без blob-подложки) ---- */
.hero--compact { min-height: auto; padding-top: 130px; padding-bottom: var(--sp-6); text-align: center; }
.hero--compact::after { display: none; }
.hero-content { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--route); font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--sp-5);
}
.hero--compact h1 { font-size: var(--fs-h1); }
.hero--compact .hero-content > p { color: var(--muted); margin-top: var(--sp-3); font-size: 1.05rem; }

/* ---- простой футер (страницы без footer-grid: dashboard/forum/instructions) ---- */
body > footer { text-align: center; padding: var(--sp-7) var(--sp-5) 60px; color: var(--muted); font-size: var(--fs-small); }
body > footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
body > footer a:hover { color: var(--ink); }

.hint-text { max-width: 600px; margin: 14px auto 0; font-size: var(--fs-small); color: var(--muted); opacity: .85; text-align: center; }

/* ---- .section-header (реальные страницы кабинета — без .eyebrow, центрировано) ---- */
.section-header { text-align: center; margin-bottom: var(--sp-6); }
.section-header h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.section-header p { color: var(--muted); font-size: 1.02rem; max-width: 60ch; margin: 0 auto; }

/* ==========================================================================
   Форум (forum.html) — лента, сайдбар (правила/новости), упоминания.
   ========================================================================== */

.forum-banner { max-width: 760px; margin: 0 auto var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md); background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); font-size: var(--fs-small); text-align: center; }

.forum-layout { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-6); align-items: start; }
.forum-main { min-width: 0; }
.forum-sidebar { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: 100px; }
.sidebar-card { padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.sidebar-card h3 { font-size: var(--fs-tiny); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-4); font-family: var(--font-body); font-weight: 700; }
.sidebar-card-body { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; }
.sidebar-news-item { padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.sidebar-news-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.sidebar-news-title { font-weight: 700; color: var(--ink); font-size: var(--fs-small); margin-bottom: 4px; }
.sidebar-news-date { font-size: var(--fs-tiny); color: var(--muted); margin-bottom: var(--sp-2); }
.sidebar-news-text { font-size: var(--fs-tiny); line-height: 1.55; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 900px) { .forum-layout { grid-template-columns: 1fr; } .forum-sidebar { position: static; order: -1; } }

.forum-box { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.forum-main .forum-box { max-width: none; margin: 0; }

.forum-search-wrap { margin: -6px 0 2px; }
.forum-search-input {
  width: 100%; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink); font-family: inherit; font-size: var(--fs-small);
  outline: none; transition: border-color .2s ease, background .2s ease;
}
.forum-search-input:focus { border-color: var(--route); background: var(--surface); }

.forum-form { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.forum-form-row { display: flex; gap: var(--sp-3); align-items: center; }
.forum-input-wrap { position: relative; flex: 1; }
.forum-form textarea {
  width: 100%; resize: none; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink); font-family: inherit; font-size: var(--fs-small); outline: none; box-sizing: border-box;
}
.forum-form textarea:focus { border-color: var(--route); }
.forum-form textarea:disabled { opacity: .5; cursor: not-allowed; }
.forum-form .btn:disabled { opacity: .5; cursor: not-allowed; }

.forum-reply-preview {
  display: flex; align-items: center; gap: var(--sp-3); padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--route-soft); border: 1px solid var(--route); border-left: 3px solid var(--route);
}
.forum-reply-preview-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-tiny); }
.forum-reply-preview-label { color: var(--route); font-weight: 700; }
.forum-reply-preview-text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-reply-preview-cancel { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-small); padding: 4px 6px; border-radius: 8px; flex-shrink: 0; }
.forum-reply-preview-cancel:hover { background: var(--danger-soft); color: var(--danger); }

.forum-mention-list {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; max-height: 220px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -16px var(--shadow-lg); z-index: 20; padding: 6px;
}
.forum-mention-item { padding: 8px 10px; border-radius: 9px; font-size: var(--fs-small); color: var(--ink); cursor: pointer; }
.forum-mention-item.active, .forum-mention-item:hover { background: var(--route-soft); }
.forum-mention-item span { color: var(--muted); font-size: var(--fs-tiny); margin-left: 6px; }

.forum-feed, .forum-pinned { display: flex; flex-direction: column; gap: var(--sp-4); }
.forum-pinned { padding-bottom: var(--sp-4); margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.forum-post--pinned { background: var(--waypoint-soft); border-color: var(--waypoint); }
.forum-post-pin-badge { color: var(--waypoint); font-weight: 700; }
.forum-post-pin-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-small); line-height: 1; padding: 4px; border-radius: 8px; transition: .15s; }
.forum-post-pin-btn:hover { background: var(--waypoint-soft); color: var(--waypoint); }
.forum-post-pin-btn.active { color: var(--waypoint); }

.forum-post { padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.forum-post-meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-tiny); color: var(--muted); flex-wrap: wrap; }
.forum-post-author { font-weight: 700; color: var(--ink); }
.forum-post-time { flex: 1; }
.forum-post-delete { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-small); line-height: 1; padding: 4px; border-radius: 8px; transition: .15s; }
.forum-post-delete:hover { opacity: .8; background: var(--danger-soft); }
.forum-post-text { font-size: var(--fs-small); line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.forum-post-mention { color: var(--route); background: var(--route-soft); border-radius: 5px; padding: 0 3px; font-weight: 700; }
.forum-post-quote { display: block; margin-bottom: var(--sp-3); padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--route); cursor: pointer; font-size: var(--fs-tiny); }
.forum-post-quote-author { color: var(--route); font-weight: 700; margin-right: 6px; }
.forum-post-quote-text { color: var(--muted); display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.forum-post-quote-deleted { color: var(--muted); font-style: italic; }
.forum-post.forum-post--flash { animation: forumFlash 1.4s ease; }
@keyframes forumFlash { 0% { background: var(--route-soft); } 100% { background: var(--surface); } }
.forum-post-reply-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-tiny); padding: 2px 6px; border-radius: 8px; }
.forum-post-reply-btn:hover { background: var(--route-soft); color: var(--route); }
.forum-feed--admin .forum-post { max-width: none; }
.forum-post-edit-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-tiny); padding: 2px 6px; border-radius: 8px; opacity: .7; }
.forum-post-edit-btn:hover { opacity: 1; background: var(--route-soft); }
.forum-post-edit-input { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); font-family: inherit; font-size: var(--fs-small); resize: vertical; }
.forum-post-edit-actions { display: flex; gap: 8px; margin-top: var(--sp-2); }
.forum-post-edit-actions .btn { padding: 8px 16px; font-size: var(--fs-tiny); height: auto; }

/* ==========================================================================
   instructions.html — доки/инструкция (не .container, своя узкая колонка)
   ========================================================================== */
/* Раньше страница начиналась 150px пустоты, затем узкая колонка текста —
   заголовок/лид теперь в full-bleed шапке с тем же blob-mesh, что и hero
   на главной (см. .docs-hero в instructions.html), а не в пустом верху. */
.docs-hero { position: relative; overflow: hidden; padding: var(--sp-8) 0 var(--sp-8); }
.docs-hero-inner { position: relative; z-index: 1; width: min(1100px, 94%); margin: 0 auto; display: flex; align-items: center; gap: var(--sp-7); }
.docs-hero-text { flex: 0 0 auto; width: min(460px, 100%); }
.docs-hero h1 { font-size: clamp(2rem, 4.6vw, 2.8rem); letter-spacing: -.02em; margin-top: var(--sp-3); }
.docs-hero .lead { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.7; margin-top: var(--sp-4); }
.docs-hero-diagram { flex: 1; min-width: 0; }
.docs-hero-diagram svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 860px) {
  .docs-hero-inner { flex-direction: column; align-items: flex-start; }
  .docs-hero-diagram { display: none; }
}

.docs-page { width: min(820px, 94%); margin: var(--sp-8) auto var(--sp-8); }
.docs-page h2 { font-size: 1.4rem; }
/* .docs-hero .lead красит только вводный абзац наверху — секция VPN
   ниже (id="vpn") использует тот же класс на своём собственном лиде,
   ему тоже нужна не-дефолтная стилизация. */
.docs-page .lead { color: var(--muted); font-size: 1.02rem; line-height: 1.7; max-width: 64ch; }
.docs-page code { background: var(--surface-2); padding: 2px 8px; border-radius: 6px; font-family: var(--font-mono); font-size: .88em; }
.docs-page .link-strong { color: var(--route); font-weight: 700; }

/* карточка шага (номер + заголовок/текст) — своя раскладка, отличная от
   .step в блоке "как это работает" на главной (там просто num+h3+p столбиком) */
.docs-page .step {
  display: flex; gap: var(--sp-5); padding: var(--sp-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); margin-bottom: var(--sp-4);
}
.docs-page .step-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--route-soft);
  color: var(--route); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem;
  font-family: var(--font-display);
}
.docs-page .step-body h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); }
.docs-page .step-body p { color: var(--muted); line-height: 1.65; font-size: var(--fs-small); }

.faq-item { padding: var(--sp-5) 0; border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1.02rem; margin-bottom: var(--sp-2); }
.faq-item p { color: var(--muted); line-height: 1.65; font-size: var(--fs-small); }

@media (max-width: 640px) {
  .docs-page .step { flex-direction: column; gap: var(--sp-3); }
}

/* ==========================================================================
   Админ-панель (admin.html) — самая большая страница: таблица пользователей,
   тикеты, статистика серверов, модалки. Структура/JS-хуки не менялись.
   ========================================================================== */

.admin-wrap { width: min(1200px, 94%); margin: 40px auto; padding-top: 0; }
.admin-wrap .section-header { text-align: left; margin-bottom: var(--sp-5); }
.admin-wrap .section-header h2 { font-size: 1.5rem; margin-bottom: 6px; }
.admin-wrap .section-header p { margin: 0; max-width: none; font-size: var(--fs-small); text-align: left; }

.tab-panel { display: none; flex-direction: column; gap: var(--sp-3); }
.tab-panel.active { display: flex; }

/* тонкая горизонтальная вкладочная навигация (используется ВНУТРИ модалки
   пользователя — #user-modal-tabs — отдельно от бокового меню админки) */
.tab-nav { display: flex; gap: 6px; margin: 4px 0 var(--sp-4); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tab-nav-btn { padding: 10px 4px; margin-bottom: -1px; border: none; background: none; color: var(--muted); font-size: var(--fs-small); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
.tab-nav-btn.active { color: var(--ink); border-bottom-color: var(--route); }

/* ---- боковое меню админки (fixed rail на ПК, сворачиваемая шторка на телефоне) ---- */
.admin-sidebar-header { display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--ink); font-weight: 700; }
.admin-sidebar-header .logo-icon { width: 22px; height: 22px; flex-shrink: 0; }
.admin-sidebar-mobile-toggle { display: none; }
.admin-sidebar-group-label { padding: 14px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.admin-sidebar-group-label:first-child { padding-top: 2px; }
.admin-sidebar-divider { height: 1px; margin: 10px 6px; background: var(--border); }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); transition: color .2s ease; }

@media (min-width: 641px) {
  .admin-layout-wrap { width: min(1280px, 94%); margin: 150px auto 60px; display: block; padding-left: 284px; }
  .admin-layout-wrap .admin-wrap { width: auto; margin: 0; }
  #admin-sidebar {
    position: fixed; left: calc(50% - min(1280px, 94vw) / 2); top: 118px; width: 260px;
    min-height: calc(100vh - 118px - 24px); max-height: calc(100vh - 118px - 24px); overflow-y: auto;
    padding: 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 20px 50px -20px var(--shadow-lg); z-index: 30;
  }
  #admin-sidebar .tab-nav { flex-direction: column; border-bottom: none; gap: 2px; margin: 0; }
  #admin-sidebar .tab-nav-btn { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 14px; border-radius: var(--radius-sm); border-bottom: none; margin-bottom: 0; position: relative; color: var(--muted); transition: background .2s ease, color .2s ease; }
  #admin-sidebar .tab-nav-btn:hover { background: var(--surface-2); color: var(--ink); }
  #admin-sidebar .tab-nav-btn:hover .nav-icon { color: var(--ink); }
  #admin-sidebar .tab-nav-btn .badge { margin-left: auto; }
  #admin-sidebar .tab-nav-btn.active { background: var(--route-soft); color: var(--ink); }
  #admin-sidebar .tab-nav-btn.active::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--route); }
  #admin-sidebar .tab-nav-btn.active .nav-icon { color: var(--route); }
  .admin-content { width: auto; }
}

@media (max-width: 640px) {
  .admin-layout-wrap { display: block; width: auto; margin: 120px 12px 60px; }
  /* Базовое .admin-wrap{width:min(1200px,94%);margin:40px auto} рассчитано
     на десктоп без сайдбара — на мобильном сайдбар прячется, но 94%-ная
     ширина без auto-центрирования (margin:0 ниже сбрасывал только его)
     оставляла контент прижатым к левому краю с пустой полосой справа —
     "неровно". Сбрасываем и width тоже, чтобы контент занимал всю ширину. */
  .admin-layout-wrap .admin-wrap { width: auto; margin: 0; }
  #admin-sidebar { padding: 10px; }
  .admin-sidebar-mobile-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 13px 16px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border);
    color: var(--ink); font-weight: 700; font-size: .95rem; cursor: pointer; font-family: inherit;
  }
  .admin-sidebar-mobile-toggle .chevron-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); transition: transform .2s ease; }
  .admin-sidebar-mobile-toggle[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }
  #admin-tabs { display: none; flex-direction: column; gap: 2px; margin: 10px 0 0; }
  #admin-tabs.mobile-open { display: flex; }
  #admin-sidebar .tab-nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; font-size: .95rem; border-radius: var(--radius-sm); background: none; border: none; }
  #admin-sidebar .tab-nav-btn.active { background: var(--route-soft); color: var(--ink); }
  #admin-sidebar .tab-nav-btn .badge { margin-left: auto; }
  #admin-sidebar .nav-icon { width: 19px; height: 19px; }
  .admin-sidebar-group-label { display: block; padding: 12px 14px 4px; }
  .admin-sidebar-divider { display: block; }
  .admin-sidebar-header { display: none; }
  .admin-content { width: auto; }
}

/* ---- статистика ---- */
.admin-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 16px; padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.admin-stat { display: flex; flex-direction: column; gap: 4px; }
.admin-stat-value { font-size: 1.7rem; font-weight: 700; font-family: var(--font-display); }
.admin-stat-label { font-size: var(--fs-tiny); color: var(--muted); }
@media (max-width: 700px) { .admin-stats-bar { grid-template-columns: repeat(2, 1fr); } }

.server-stats-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); }
.server-stats-card { flex: 1; min-width: 280px; padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px var(--shadow); transition: border-color .3s ease; }
.server-stats-card.warn { border-color: var(--waypoint); }
.server-stats-card.bad { border-color: var(--danger); }
.server-stats-card h4 { font-size: var(--fs-small); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 6px; font-family: var(--font-body); font-weight: 700; }
.server-stats-card h4 .muted-hint { font-size: var(--fs-tiny); margin: 0; }
.server-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.server-stat { display: flex; flex-direction: column; gap: 2px; }
.server-stat-label { display: flex; align-items: center; gap: 5px; font-size: var(--fs-tiny); color: var(--muted); }
.server-stat-label .server-stat-icon { width: 13px; height: 13px; flex-shrink: 0; opacity: .75; }
.server-stat-value { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.server-stat-value.warn { color: var(--waypoint); }
.server-stat-value.bad { color: var(--danger); }
.server-status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--muted); vertical-align: middle; box-shadow: 0 0 0 3px var(--surface-2); transition: background-color .3s ease; }
.server-status-dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.server-status-dot.warn { background: var(--waypoint); box-shadow: 0 0 0 3px var(--waypoint-soft); }
.server-status-dot.bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.server-meter { margin-bottom: var(--sp-4); }
.server-meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.server-meter-track { height: 7px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.server-meter-fill { height: 100%; width: 0%; border-radius: 7px; background: var(--success); transition: width .4s ease, background-color .4s ease; }
.server-meter-fill.warn { background: var(--waypoint); }
.server-meter-fill.bad { background: var(--danger); }
.server-meter-detail { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; font-size: var(--fs-tiny); }

.vpn-ip-card { margin-top: var(--sp-4); padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px var(--shadow); }
.vpn-ip-card h4 { font-size: var(--fs-small); margin-bottom: 6px; }
.vpn-ip-card #vpn-ip-summary { margin-bottom: var(--sp-3); }
.vpn-ip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; max-height: 260px; overflow-y: auto; }
.vpn-ip-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-tiny); }
.vpn-ip-addr { font-family: var(--font-mono); color: var(--muted); font-size: var(--fs-tiny); }
.vpn-ip-user { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- таблица пользователей ---- */
.admin-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: var(--fs-small); }
.admin-table th, .admin-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--fs-small); }
.admin-table th { color: var(--muted); font-weight: 700; font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .06em; }
.admin-table tr:last-child td { border-bottom: none; }
/* "Замороженные" крайние колонки при горизонтальной прокрутке — только
   для десктопной табличной раскладки. На мобильной (max-width:640px,
   строки/ячейки превращаются в блоки-карточки — см. выше) position:sticky
   на первой/последней ячейке каждой карточки не имеет смысла и ломает
   вид (двигается вместе с чужим содержимым, тень наезжает на текст). */
@media (min-width: 641px) {
  .admin-table th:first-child, .admin-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 2px 0 6px var(--shadow); }
  .admin-table th:last-child, .admin-table td:last-child { position: sticky; right: 0; z-index: 2; background: var(--surface); box-shadow: -2px 0 6px var(--shadow); }
  .admin-table th:first-child, .admin-table th:last-child { z-index: 3; }
}
#users-table th { cursor: grab; user-select: none; white-space: nowrap; }
#users-table th.th-sortable { cursor: pointer; }
#users-table th.dragging { opacity: .4; }
.th-checkbox { width: 36px; text-align: center; }

.users-toolbar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 6px; }
.users-search-input { display: block; width: 100%; max-width: 420px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font-size: var(--fs-small); font-family: inherit; }
.users-search-input::placeholder { color: var(--muted); }
.users-toolbar .users-search-input { margin-bottom: 0; flex: 1 1 260px; }

.bulk-actions-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: var(--sp-4); border-radius: var(--radius-md); background: var(--route-soft); border: 1px solid var(--route); font-size: var(--fs-small); flex-wrap: wrap; }

.users-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; margin-top: var(--sp-4); }
#users-page-prev, #users-page-next { flex-shrink: 0; }
.users-pagination-size { display: flex; align-items: center; gap: 8px; font-size: var(--fs-tiny); color: var(--muted); }
.users-pagination-size select { padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font-size: var(--fs-tiny); font-family: inherit; }
.users-pagination-mid { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; justify-content: center; flex: 1 1 auto; min-width: 0; }
#users-page-prev:disabled, #users-page-next:disabled { opacity: .4; cursor: default; }

.columns-picker { position: relative; flex-shrink: 0; }
.columns-picker-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 220px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 20px 40px -16px var(--shadow-lg); display: flex; flex-direction: column; gap: 8px; }
.columns-picker-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink); cursor: pointer; }
.columns-picker-item input { accent-color: var(--route); }

/* ---- вкладки в модалке пользователя ---- */
.user-modal-card { max-width: 520px; }
.activity-section { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.activity-section:first-of-type { border-top: none; padding-top: 0; }
.activity-block-title { font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.activity-section p { margin: 0 0 8px; font-size: var(--fs-small); line-height: 1.6; }
.activity-log-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--fs-tiny); }
.activity-log-row:first-child { border-top: none; }

/* ---- заявки / сбросы пароля ---- */
.applications-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.application-card { padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.application-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.application-about { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; }
.application-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ---- обращения (тикеты) ---- */
.ticket-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ticket-status-filter { display: flex; gap: 8px; }
.ticket-cards-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); align-items: start; }
.ticket-card { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); color: inherit; cursor: pointer; transition: background .2s ease, border-color .2s ease; font-family: inherit; }
.ticket-card:hover { background: var(--surface-2); border-color: var(--route); }
.chat-thread-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; font-size: var(--fs-small); }
.chat-thread-preview { font-size: var(--fs-tiny); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .ticket-cards-list { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ticket-card { padding: var(--sp-3); gap: 4px; border-radius: var(--radius-md); }
  .ticket-card .chat-thread-top { font-size: var(--fs-tiny); }
  .ticket-card .category-tag { font-size: 11px; padding: 2px 8px; margin: 0; }
}

.admin-ticket-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 var(--sp-4); flex-wrap: wrap; }
.admin-chat-view { display: flex; flex-direction: column; min-height: 480px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.admin-chat-view-header { padding: var(--sp-5); border-bottom: 1px solid var(--border); font-weight: 700; }
.admin-chat-view .chat-messages { flex: 1; min-height: 0; max-height: none; }
.admin-chat-view .chat-form { border-top: 1px solid var(--border); }

/* ---- мануалы (аккордеон) ---- */
.manuals-list { display: flex; flex-direction: column; gap: 10px; }
.manual-item { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.manual-item summary { cursor: pointer; font-weight: 700; font-size: var(--fs-small); list-style: none; }
.manual-item summary::-webkit-details-marker { display: none; }
.manual-item summary::before { content: '▸ '; color: var(--muted); }
.manual-item[open] summary::before { content: '▾ '; }
.manual-item-body { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.manual-item-body p { margin: 0 0 8px; }
.manual-item-body p:last-child { margin-bottom: 0; }
.manual-item-body code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; font-family: var(--font-mono); font-size: .85em; }