/* ============================================================
   Zynlume · Lux Premium Polish v1
   Подключается ПОСЛЕДНИМ. Только визуальные надстройки:
   никаких display:none, никаких изменений структуры/логики.
   ============================================================ */

/* --- Типографика: чёткость и дорогой ритм --- */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

h1, h2, h3 {
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

/* Цены и метрики — табличные цифры, как в финтехе */
.price, .metrics b, .run-stats b, .lic-key {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Выделение текста и скроллбар — фирменные --- */
::selection {
  background: color-mix(in srgb, var(--accent, #7c88f5) 30%, transparent);
}

@supports (scrollbar-width: thin) {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text, #fff) 22%, transparent) transparent;
  }
}

/* --- Кнопки: чуть более собранные и тактильные --- */
.btn, .button, .btn-grad, .btn-ghost, .dl-btn, .per-tab {
  letter-spacing: 0.01em;
}

.btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.18);
}

.btn-quiet, .btn-ghost, .icon-btn {
  backdrop-filter: blur(6px);
}

/* Единое премиальное состояние фокуса (доступность + аккуратность) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #7c88f5) 80%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* --- Карточки: тоньше границы, глубже посадка --- */
:root[data-theme="dark"] .command-card,
:root[data-theme="dark"] .studio-frame,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .plan,
:root[data-theme="dark"] .feature,
:root[data-theme="dark"] .process-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 16px 48px rgba(0, 0, 0, 0.30);
}

.plan:hover, .feature:hover, .process-card:hover {
  border-color: var(--line-strong, rgba(255, 255, 255, 0.16));
}

/* Плавное, единое скругление крупных поверхностей */
.command-card, .studio-frame, .final-cta .wrap {
  border-radius: clamp(14px, 2vw, 22px);
}

/* --- Шапка: более дорогое стекло --- */
.topnav.scrolled .nav-row {
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* --- Мелкие детали --- */
img, video {
  max-width: 100%;
}

img {
  -webkit-user-drag: none;
}

/* Не даём длинным строкам (ключи, email) ломать вёрстку */
.lic-key, .ch-info div, .dash-user small {
  overflow-wrap: anywhere;
}





/* Тап-таргеты на мобильных — без серой вспышки и случайного зума */
@media (max-width: 820px) {
  html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
  }

  input, select, textarea {
    font-size: 16px; /* предотвращает авто-зум iOS при фокусе */
  }
}

/* --- Принудительная анимация иконки Аккаунт / userNavPill --- */
/* lux-premium.css загружается последним — гарантированно перебиваем всё */
#userNavPill svg path,
#userNavPill svg polyline,
#userNavPill svg line,
.user-nav-btn svg path,
.user-nav-btn svg polyline,
.user-nav-btn svg line {
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 60 15 !important;
  stroke-dashoffset: 0 !important;
  animation: zmStrokeDraw 2.6s linear infinite !important;
  animation-play-state: running !important;
  will-change: stroke-dashoffset !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* circle (голова аватара) — небольшой радиус, dasharray должен быть меньше */
#userNavPill svg circle,
.user-nav-btn svg circle {
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2px !important;
  stroke-dasharray: 26 10 !important;
  stroke-dashoffset: 0 !important;
  animation: zmStrokeDraw 2.6s linear infinite !important;
  animation-play-state: running !important;
  will-change: stroke-dashoffset !important;
  opacity: 1 !important;
  visibility: visible !important;
}
