/* ==========================================================================
   1PLATFORM REDESIGN v2.0 — Professional Fintech Style
   Loaded AFTER style.css to override visual styles.
   Does NOT change layout, functionality, or class names.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN SYSTEM — New Color Palette
   ========================================================================== */

:root {
  --bg-primary: #0B1426;
  --bg-secondary: #101E38;
  --bg-card: #142244;
  --bg-card-hover: #1A2D55;
  --border-color: rgba(148, 163, 184, 0.1);
  --border-active: rgba(37, 99, 235, 0.5);

  --accent-blue: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-glow: rgba(37, 99, 235, 0.2);

  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;

  --color-green: #059669;
  --color-yellow: #D97706;
  --color-red: #DC2626;

  --gradient-mesh-1: rgba(37, 99, 235, 0.06);
  --gradient-mesh-2: rgba(5, 150, 105, 0.04);
  --gradient-mesh-3: rgba(217, 119, 6, 0.03);
}

body.light-theme, [data-theme="light"] {
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --border-color: #E2E8F0;
  --border-active: #2563EB;

  --accent-blue: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-glow: rgba(37, 99, 235, 0.1);

  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;

  --color-green: #059669;
  --color-yellow: #D97706;
  --color-red: #DC2626;

  --gradient-mesh-1: rgba(37, 99, 235, 0.04);
  --gradient-mesh-2: rgba(5, 150, 105, 0.03);
  --gradient-mesh-3: rgba(217, 119, 6, 0.02);
}

/* ==========================================================================
   2. GLOBAL BACKGROUND PATTERNS & TEXTURES
   ========================================================================== */

/* Subtle dot-grid across all landing sections */
.landing-section,
.landing-section-alt {
  position: relative;
}

.landing-section::before,
.landing-section-alt::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 0;
}

body.light-theme .landing-section::before,
body.light-theme .landing-section-alt::before {
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

.landing-section > *,
.landing-section-alt > * {
  position: relative;
  z-index: 1;
}

/* Gradient mesh blobs between sections */
.landing-section-alt {
  background: rgba(16, 30, 56, 0.5);
  border-top: 1px solid rgba(148, 163, 184, 0.06);
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

body.light-theme .landing-section-alt {
  background: #F1F5F9;
  border-color: #E2E8F0;
}

/* ==========================================================================
   3. HEADER — Refined
   ========================================================================== */

.landing-header {
  background: rgba(11, 20, 38, 0.92);
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

body.light-theme .landing-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   4. HERO SECTION — Professional Gradient Mesh
   ========================================================================== */

.landing-hero-section {
  background: linear-gradient(175deg, #0B1426 0%, #101E38 40%, #0E1B33 100%);
  padding: 6rem 1.5rem 5rem;
}

body.light-theme .landing-hero-section {
  background: linear-gradient(175deg, #FFFFFF 0%, #F8FAFC 50%, #EFF6FF 100%);
}

/* Replace harsh aurora glows with soft gradient mesh */
.hero-aurora-glow-1 {
  position: absolute;
  width: 600px;
  height: 600px;
  top: -100px;
  left: -150px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: meshDrift1 20s ease-in-out infinite;
}

.hero-aurora-glow-2 {
  position: absolute;
  width: 500px;
  height: 500px;
  bottom: -80px;
  right: -100px;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: meshDrift2 25s ease-in-out infinite;
}

body.light-theme .hero-aurora-glow-1 {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
}

body.light-theme .hero-aurora-glow-2 {
  background: radial-gradient(circle, rgba(5, 150, 105, 0.04) 0%, transparent 70%);
}

@keyframes meshDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, 30px) scale(1.05); }
  66% { transform: translate(-20px, -20px) scale(0.95); }
}

@keyframes meshDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.08); }
  66% { transform: translate(20px, -30px) scale(0.92); }
}

/* Softer dot grid in hero */
.hero-bg-grid {
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.7;
}

body.light-theme .hero-bg-grid {
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  opacity: 0.9;
}

/* 3D Parallax floating elements — keep full visibility */

/* Hero title — slightly refined */
.hero-title {
  font-size: 3.1rem;
  letter-spacing: -1px;
  color: #F1F5F9;
}

body.light-theme .hero-title {
  color: #0F172A;
}

.text-brand-gradient {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.light-theme .text-brand-gradient {
  background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero trust badges — cleaner */
.hero-tag-badge {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: #60A5FA;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.hero-tag-badge.badge-premium-glow {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: none;
  animation: none;
}

body.light-theme .hero-tag-badge {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.2);
  color: #2563EB;
}

/* CTA Buttons — refined, no neon shimmer */
.btn-primary {
  background: #2563EB;
  border: none;
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
  background: #1D4ED8;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
}

.btn-shimmer {
  animation: none !important;
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: softShimmer 3s ease-in-out infinite;
}

@keyframes softShimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.btn-outline {
  border: 1.5px solid rgba(148, 163, 184, 0.25);
  color: var(--text-secondary);
  background: transparent;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  border-color: #2563EB;
  color: #2563EB;
  background: rgba(37, 99, 235, 0.05);
}

body.light-theme .btn-outline {
  border-color: #CBD5E1;
  color: #334155;
}

body.light-theme .btn-outline:hover {
  border-color: #2563EB;
  color: #2563EB;
  background: rgba(37, 99, 235, 0.04);
}

/* ==========================================================================
   5. PIPELINE STEPS — Clean connectors
   ========================================================================== */

.pipeline-steps-grid {
  position: relative;
}

.pipeline-step-item {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.8rem 1.6rem;
  transition: all 0.25s ease;
}

.pipeline-step-item:hover {
  transform: translateY(-3px);
  border-color: var(--border-active);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
}

.pipeline-step-item.step-highlight {
  border-color: rgba(5, 150, 105, 0.4);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(5, 150, 105, 0.03) 100%);
}

body.light-theme .pipeline-step-item {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

body.light-theme .pipeline-step-item:hover {
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.06);
}

.pipe-step-num {
  font-weight: 800;
  font-size: 0.82rem;
  color: #3B82F6;
  letter-spacing: 0.5px;
}

.pipe-step-num.text-yellow { color: #D97706; }
.pipe-step-num.text-green { color: #059669; }

/* ==========================================================================
   6. COCKPIT PREVIEW LABEL — "This is what the report looks like"
   ========================================================================== */

.cockpit-preview-label {
  text-align: center;
  margin: 3.5rem 0 2rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.preview-label-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.2);
  padding: 0.4rem 1.1rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

body.light-theme .preview-label-badge {
  color: #059669;
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.15);
}

.preview-label-title {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 0.8rem;
  letter-spacing: -0.5px;
}

.preview-label-desc {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
}

/* ==========================================================================
   6b. COCKPIT TERMINAL — Clean Dashboard Style
   ========================================================================== */

.cockpit-terminal-wrapper {
  background: var(--bg-card);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cockpit-terminal-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

body.light-theme .cockpit-terminal-wrapper {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

body.light-theme .cockpit-terminal-wrapper:hover {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

/* Cockpit top bar — clean, not terminal */
.cockpit-top-bar {
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  padding: 0.75rem 1.4rem;
}

body.light-theme .cockpit-top-bar {
  background: #F8FAFC;
  border-bottom-color: #E2E8F0;
}

/* Filter tabs — cleaner active state */
.c-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.c-tab:hover {
  color: var(--text-primary);
  background: rgba(37, 99, 235, 0.05);
}

.c-tab.active {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.c-tab.tab-risk-btn.active {
  background: #DC2626;
  border-color: #DC2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

/* KPI score box — donut-style refinement */
.kpi-score-badge-box {
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 14px;
  padding: 1rem 1.4rem;
}

body.light-theme .kpi-score-badge-box {
  background: rgba(37, 99, 235, 0.04);
  border-color: rgba(37, 99, 235, 0.12);
}

.kpi-score-val-large {
  font-size: 2.4rem;
  font-weight: 900;
  color: #2563EB;
  letter-spacing: -1px;
}

/* KPI Score Fill Bar — refined gradient */
.kpi-score-fill {
  background: linear-gradient(90deg, #2563EB 0%, #3B82F6 50%, #059669 100%);
  border-radius: 4px;
  transition: width 1.2s ease-out;
}

/* KPI Cards */
.c-kpi-card {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  transition: border-color 0.2s ease;
}

.c-kpi-card:hover {
  border-color: rgba(37, 99, 235, 0.25);
}

body.light-theme .c-kpi-card {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

/* Audit Rows in cockpit — cleaner separators */
.c-row {
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  padding: 0.85rem 1.4rem;
  transition: background 0.15s ease;
}

.c-row:hover {
  background: rgba(37, 99, 235, 0.03);
}

.c-row:last-child {
  border-bottom: none;
}

body.light-theme .c-row {
  border-bottom-color: #F1F5F9;
}

body.light-theme .c-row:hover {
  background: #F8FAFC;
}

/* Status pills — refined */
.c-pill {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.pill-ok {
  background: rgba(5, 150, 105, 0.12);
  color: #34D399;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.pill-warn {
  background: rgba(217, 119, 6, 0.12);
  color: #FBBF24;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.pill-error {
  background: rgba(220, 38, 38, 0.12);
  color: #F87171;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

body.light-theme .pill-ok { color: #059669; border-color: rgba(5, 150, 105, 0.25); }
body.light-theme .pill-warn { color: #D97706; border-color: rgba(217, 119, 6, 0.25); }
body.light-theme .pill-error { color: #DC2626; border-color: rgba(220, 38, 38, 0.25); }

/* Cockpit footer bar */
.cockpit-footer-bar {
  background: rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(148, 163, 184, 0.06);
}

body.light-theme .cockpit-footer-bar {
  background: #F8FAFC;
  border-top-color: #E2E8F0;
}

/* ==========================================================================
   7. CYBER TICKER — Muted Professional
   ========================================================================== */

.cyber-ticker-strip {
  background: var(--bg-secondary);
  border-top: 1px solid rgba(148, 163, 184, 0.06);
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  padding: 0.7rem 0;
}

body.light-theme .cyber-ticker-strip {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

.c-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 5px;
  letter-spacing: 0.4px;
}

.badge-blue { background: rgba(37, 99, 235, 0.12); color: #60A5FA; }
.badge-green { background: rgba(5, 150, 105, 0.12); color: #34D399; }
.badge-yellow { background: rgba(217, 119, 6, 0.12); color: #FBBF24; }
.badge-purple { background: rgba(139, 92, 246, 0.12); color: #A78BFA; }
.badge-cyan { background: rgba(14, 165, 233, 0.12); color: #38BDF8; }

body.light-theme .badge-blue { color: #2563EB; }
body.light-theme .badge-green { color: #059669; }
body.light-theme .badge-yellow { color: #D97706; }
body.light-theme .badge-purple { color: #7C3AED; }
body.light-theme .badge-cyan { color: #0284C7; }

.c-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  opacity: 0.7;
}

.tag-cyan { color: #67E8F9; }
.tag-purple { color: #C4B5FD; }
.tag-green { color: #6EE7B7; }
.tag-blue { color: #93C5FD; }
.tag-emerald { color: #6EE7B7; }
.tag-amber { color: #FCD34D; }
.tag-red { color: #FCA5A5; }

body.light-theme .tag-cyan { color: #0891B2; }
body.light-theme .tag-purple { color: #7C3AED; }
body.light-theme .tag-green { color: #059669; }
body.light-theme .tag-blue { color: #2563EB; }
body.light-theme .tag-emerald { color: #059669; }
body.light-theme .tag-amber { color: #D97706; }
body.light-theme .tag-red { color: #DC2626; }

/* ==========================================================================
   8. SERVICES CARDS — Accent border-top + refined hover
   ========================================================================== */

.services-row-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

@media (max-width: 992px) {
  .services-row-grid {
    grid-template-columns: 1fr;
  }
}

.service-feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 3px solid #2563EB;
  border-radius: 16px;
  padding: 2.4rem 2rem;
  transition: all 0.3s ease;
}

.service-feature-card:nth-child(2) {
  border-top-color: #059669;
}

.service-feature-card:nth-child(3) {
  border-top-color: #7C3AED;
}

.service-feature-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-active);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

body.light-theme .service-feature-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

body.light-theme .service-feature-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  border-color: #2563EB;
}

/* Service card icon — circle bg instead of glow */
.service-visual-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-visual-icon.icon-blue {
  background: rgba(37, 99, 235, 0.1);
}

.service-visual-icon.icon-green {
  background: rgba(5, 150, 105, 0.1);
}

.service-visual-icon.icon-purple {
  background: rgba(124, 58, 237, 0.1);
}

body.light-theme .service-visual-icon.icon-blue { background: rgba(37, 99, 235, 0.08); }
body.light-theme .service-visual-icon.icon-green { background: rgba(5, 150, 105, 0.08); }
body.light-theme .service-visual-icon.icon-purple { background: rgba(124, 58, 237, 0.08); }

/* Service chip badges */
.service-chip-badge {
  background: rgba(37, 99, 235, 0.08);
  color: #60A5FA;
  border: 1px solid rgba(37, 99, 235, 0.15);
}

.service-chip-badge.badge-green {
  background: rgba(5, 150, 105, 0.08);
  color: #34D399;
  border-color: rgba(5, 150, 105, 0.15);
}

.service-chip-badge.badge-purple {
  background: rgba(124, 58, 237, 0.08);
  color: #A78BFA;
  border-color: rgba(124, 58, 237, 0.15);
}

body.light-theme .service-chip-badge { color: #2563EB; }
body.light-theme .service-chip-badge.badge-green { color: #059669; }
body.light-theme .service-chip-badge.badge-purple { color: #7C3AED; }

/* Mini radar / compression / roles inside cards */
.card-mini-radar,
.card-compression-box,
.card-roles-preview {
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.06);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.2rem;
}

body.light-theme .card-mini-radar,
body.light-theme .card-compression-box,
body.light-theme .card-roles-preview {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

.radar-chip {
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  margin-bottom: 0.35rem;
}

.radar-chip.chip-ok { background: rgba(5, 150, 105, 0.08); color: #34D399; }
.radar-chip.chip-warn { background: rgba(217, 119, 6, 0.08); color: #FBBF24; }
.radar-chip.chip-error { background: rgba(220, 38, 38, 0.08); color: #F87171; }

body.light-theme .radar-chip.chip-ok { color: #059669; }
body.light-theme .radar-chip.chip-warn { color: #D97706; }
body.light-theme .radar-chip.chip-error { color: #DC2626; }

/* Service list items — check mark style */
.service-card-list li::before {
  content: "—";
  color: #2563EB;
}

/* ==========================================================================
   9. SECTION BADGES & TITLES — Refined
   ========================================================================== */

.section-badge {
  color: #60A5FA;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.18);
  font-size: 0.72rem;
  letter-spacing: 1.2px;
}

body.light-theme .section-badge {
  color: #2563EB;
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.15);
}

/* ==========================================================================
   10. AUDIT BLOCKS 4x2 — Refined Cards
   ========================================================================== */

.audit-block-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.8rem 1.5rem;
  transition: all 0.3s ease;
}

.audit-block-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

body.light-theme .audit-block-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

body.light-theme .audit-block-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  border-color: #2563EB;
}

.audit-block-card.card-highlight {
  border-color: rgba(220, 38, 38, 0.25);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(220, 38, 38, 0.02) 100%);
}

body.light-theme .audit-block-card.card-highlight {
  border-color: rgba(220, 38, 38, 0.2);
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(220, 38, 38, 0.02) 100%);
}

/* Audit block code number — circle style */
.audit-block-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 900;
}

body.light-theme .audit-block-code {
  background: rgba(37, 99, 235, 0.08);
}

/* Category badges — refined */
.audit-category-badge {
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
}

.audit-points-list li::before {
  color: #2563EB;
}

.audit-legal-impact {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(148, 163, 184, 0.08);
  border-radius: 8px;
}

body.light-theme .audit-legal-impact {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

.audit-legal-impact.warning-impact {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.04);
}

/* ==========================================================================
   11. COMPARISON TABLE — Clean zebra striping
   ========================================================================== */

.comparison-table-wrapper {
  background: var(--bg-card);
  border-color: var(--border-color);
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

body.light-theme .comparison-table-wrapper {
  background: #FFFFFF;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.comparison-table th {
  background: rgba(37, 99, 235, 0.05);
  border-bottom: 2px solid var(--border-color);
}

body.light-theme .comparison-table th {
  background: #F1F5F9;
}

.comparison-table tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.04);
}

body.light-theme .comparison-table tr:nth-child(even) td {
  background: #FAFBFC;
}

.comparison-table .col-highlight {
  background: rgba(37, 99, 235, 0.04);
  color: #60A5FA;
}

body.light-theme .comparison-table .col-highlight {
  background: rgba(37, 99, 235, 0.03);
  color: #2563EB;
}

.comparison-table tr:nth-child(even) .col-highlight {
  background: rgba(37, 99, 235, 0.06);
}

body.light-theme .comparison-table tr:nth-child(even) .col-highlight {
  background: rgba(37, 99, 235, 0.05);
}

/* ==========================================================================
   12. CALCULATOR — Refined pills and results
   ========================================================================== */

.calc-box {
  background: var(--bg-card);
  border-color: var(--border-color);
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

body.light-theme .calc-box {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.calc-pill {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 10px;
  transition: all 0.2s ease;
}

body.light-theme .calc-pill {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

.calc-pill.active {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

body.light-theme .calc-pill.active {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.calc-metric-card {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(148, 163, 184, 0.08);
  border-radius: 14px;
}

body.light-theme .calc-metric-card {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

/* ==========================================================================
   13. SECURITY SECTION — Accent line cards
   ========================================================================== */

.security-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid #2563EB;
  border-radius: 14px;
  transition: all 0.3s ease;
}

.security-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.security-card:nth-child(2) {
  border-left-color: #059669;
}

.security-card:nth-child(3) {
  border-left-color: #D97706;
}

body.light-theme .security-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

body.light-theme .security-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

/* Security number badge — circle */
.sec-badge-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  border-radius: 12px;
  font-size: 1.15rem;
}

.security-card:nth-child(2) .sec-badge-num {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}

.security-card:nth-child(3) .sec-badge-num {
  background: rgba(217, 119, 6, 0.1);
  color: #D97706;
}

/* ==========================================================================
   14. STEPS SECTION — Timeline connector
   ========================================================================== */

.steps-grid {
  position: relative;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  transition: all 0.3s ease;
  position: relative;
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-active);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

body.light-theme .step-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

body.light-theme .step-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

.step-badge {
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  border-radius: 8px;
  font-weight: 800;
}

/* ==========================================================================
   15. FOOTER — Clean minimal
   ========================================================================== */

.landing-footer {
  background: var(--bg-secondary);
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

body.light-theme .landing-footer {
  background: #FFFFFF;
  border-top-color: #E2E8F0;
}

.footer-bottom {
  border-top-color: rgba(148, 163, 184, 0.08);
}

body.light-theme .footer-bottom {
  border-top-color: #E2E8F0;
}

.footer-links a:hover {
  color: #2563EB;
}

/* ==========================================================================
   16. SCROLL REVEAL ANIMATIONS
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger items */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   17. FLOATING DECORATIVE SHAPES (Background fill)
   ========================================================================== */

.deco-shapes-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.deco-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: decoFloat 30s ease-in-out infinite;
}

.deco-shape-1 {
  width: 600px;
  height: 600px;
  top: 5%;
  left: -8%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
  animation-delay: 0s;
  opacity: 1;
}

.deco-shape-2 {
  width: 500px;
  height: 500px;
  top: 35%;
  right: -6%;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.05) 0%, transparent 70%);
  animation-delay: -10s;
  opacity: 1;
}

.deco-shape-3 {
  width: 450px;
  height: 450px;
  bottom: 15%;
  left: 5%;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.04) 0%, transparent 70%);
  animation-delay: -20s;
  opacity: 1;
}

/* Light theme: MUCH stronger gradient orbs with color */
body.light-theme .deco-shape-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0.03) 40%, transparent 70%);
}
body.light-theme .deco-shape-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.08) 0%, rgba(5, 150, 105, 0.02) 40%, transparent 70%);
}
body.light-theme .deco-shape-3 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0.02) 40%, transparent 70%);
}

@keyframes decoFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.1); }
  50% { transform: translate(-20px, 30px) scale(0.9); }
  75% { transform: translate(40px, 20px) scale(1.05); }
}

/* ==========================================================================
   18. WAVE SECTION DIVIDERS
   ========================================================================== */

.section-wave-divider {
  width: 100%;
  height: 60px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.section-wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

.section-wave-divider.wave-top {
  margin-bottom: -1px;
}

.section-wave-divider.wave-bottom {
  margin-top: -1px;
}

/* ==========================================================================
   19. MISC REFINEMENTS
   ========================================================================== */

/* Pulse animation — refined */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.live-pulse-dot {
  width: 6px;
  height: 6px;
  background: #059669;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

/* Text color utilities — aligned with new palette */
.text-blue { color: #3B82F6; }
.text-green { color: #059669; }
.text-yellow { color: #D97706; }
.text-red { color: #DC2626; }

body.light-theme .text-blue { color: #2563EB; }
body.light-theme .text-green { color: #059669; }
body.light-theme .text-yellow { color: #D97706; }
body.light-theme .text-red { color: #DC2626; }

/* Compression bar fill */
.comp-bar-fill {
  background: linear-gradient(90deg, #059669 0%, #34D399 100%);
}

/* Role badges */
.r-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.r-badge.badge-dir {
  background: rgba(37, 99, 235, 0.12);
  color: #60A5FA;
}

.r-badge.badge-gb {
  background: rgba(5, 150, 105, 0.12);
  color: #34D399;
}

.r-badge.badge-buh {
  background: rgba(217, 119, 6, 0.12);
  color: #FBBF24;
}

body.light-theme .r-badge.badge-dir { color: #2563EB; }
body.light-theme .r-badge.badge-gb { color: #059669; }
body.light-theme .r-badge.badge-buh { color: #D97706; }

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: rgba(37, 99, 235, 0.25);
  color: inherit;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}


/* ==========================================================================
   20. LIGHT THEME - Complete Visual Overhaul
   Use REAL COLORS, not just white/near-white.
   ========================================================================== */

/* ---------- Section Backgrounds ---------- */
body.light-theme .landing-section {
  background: #FFFFFF;
  border-bottom: 2px solid #CBD5E1;
}

body.light-theme .landing-section-alt {
  background: #EFF6FF;
  border-top: 2px solid #BFDBFE;
  border-bottom: 2px solid #BFDBFE;
}

body.light-theme .landing-hero-section {
  border-bottom: 3px solid #2563EB;
}

/* ---------- Section Badges & Titles ---------- */
body.light-theme .section-badge {
  background: #DBEAFE;
  color: #1D4ED8;
  border: 2px solid #93C5FD;
  font-weight: 900;
  padding: 0.5rem 1.2rem;
}

body.light-theme .section-title-wrap {
  padding-bottom: 2rem;
  margin-bottom: 1.5rem;
}

body.light-theme .section-title-wrap h2 {
  color: #0F172A;
}

body.light-theme .section-title-wrap p {
  color: #475569;
}

/* ---------- Pipeline Section ---------- */
body.light-theme .audit-pipeline-wrap {
  background: #F0F4FF;
  border: 2px solid #BFDBFE;
  border-radius: 18px;
  padding: 2.5rem 2rem;
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.06);
}

body.light-theme .pipeline-step-item {
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

body.light-theme .pipeline-step-item:hover {
  border-color: #93C5FD;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.1);
  transform: translateY(-3px);
}

body.light-theme .pipeline-step-item.step-highlight {
  border-color: #34D399;
  background: linear-gradient(180deg, #FFFFFF 0%, #ECFDF5 100%);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.08);
}

/* ---------- Cockpit Preview Label ---------- */
body.light-theme .cockpit-preview-label {
  background: linear-gradient(135deg, #DBEAFE 0%, #D1FAE5 100%);
  border: 2px solid #93C5FD;
  border-radius: 18px;
  padding: 2.5rem 2rem;
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.08);
}

.cockpit-preview-label {
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 18px;
  padding: 2.5rem 2rem;
}

body.light-theme .preview-label-badge {
  background: #059669;
  color: #FFFFFF;
  border: none;
  font-weight: 900;
  padding: 0.5rem 1.3rem;
}

/* ---------- Cockpit Terminal ---------- */
body.light-theme .cockpit-terminal-wrapper {
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
  border: 2px solid #94A3B8;
  border-radius: 14px;
}

body.light-theme .cockpit-terminal-wrapper:hover {
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.16);
}

/* ---------- Ticker ---------- */
.ticker-flow {
  gap: 1rem !important;
  padding-right: 1rem !important;
}

.c-sep {
  margin: 0 0.2rem;
}

body.light-theme .cyber-ticker-strip {
  background: #0F172A;
  border-top: 3px solid #2563EB;
  border-bottom: 2px solid #1E293B;
}

body.light-theme .c-text {
  color: #F8FAFC;
}

body.light-theme .c-sep {
  color: #3B82F6;
}

/* ---------- Service Cards ---------- */
body.light-theme .service-feature-card {
  background: #FFFFFF;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
  border: 2px solid #CBD5E1;
}

body.light-theme .service-feature-card:hover {
  box-shadow: 0 16px 48px rgba(37, 99, 235, 0.1);
  border-color: #93C5FD;
  transform: translateY(-4px);
}

/* ---------- Audit Block Cards ---------- */
body.light-theme .audit-block-card {
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

body.light-theme .audit-block-card:hover {
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.08);
  border-color: #93C5FD;
}

body.light-theme .audit-block-code {
  background: #DBEAFE;
  color: #1D4ED8;
  border: 2px solid #93C5FD;
  font-weight: 900;
}

/* Audit Result/Shield boxes - PROMINENT accent backgrounds */
body.light-theme .audit-legal-impact {
  background: #EFF6FF;
  border: 2px solid #93C5FD;
  border-left: 4px solid #2563EB;
  color: #1E40AF;
  font-weight: 600;
}

body.light-theme .audit-legal-impact.warning-impact {
  background: #FEF2F2;
  border: 2px solid #FCA5A5;
  border-left: 4px solid #EF4444;
  color: #991B1B;
}

body.light-theme .audit-category-badge {
  font-weight: 800;
  border: 2px solid currentColor;
}

/* ---------- Comparison Table - Strong Visual Pop ---------- */
body.light-theme .comparison-table-wrapper {
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);
  border: 2px solid #94A3B8;
  overflow: hidden;
}

body.light-theme .comparison-table th {
  background: #1E293B;
  color: #F1F5F9;
  border-bottom: 2px solid #334155;
  padding: 1.2rem 1.4rem;
}

body.light-theme .comparison-table th:last-child {
  background: #1D4ED8;
  color: #FFFFFF;
}

body.light-theme .comparison-table td {
  border-bottom: 1px solid #CBD5E1;
  color: #334155;
}

body.light-theme .comparison-table tr:nth-child(even) td {
  background: #F1F5F9;
}

body.light-theme .comparison-table tr:hover td {
  background: #EFF6FF;
}

body.light-theme .comparison-table .col-highlight {
  background: #EFF6FF;
  color: #1D4ED8;
  font-weight: 700;
  border-left: 2px solid #BFDBFE;
}

body.light-theme .comparison-table tr:nth-child(even) .col-highlight {
  background: #DBEAFE;
}

/* ---------- Calculator ---------- */
body.light-theme .calc-box {
  background: #FFFFFF;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
  border: 2px solid #CBD5E1;
}

body.light-theme .calc-metric-card {
  background: #F0F4FF;
  border: 2px solid #BFDBFE;
  border-radius: 14px;
}

/* ---------- Security Cards ---------- */
body.light-theme .security-card {
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

body.light-theme .security-card:hover {
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.08);
  border-color: #93C5FD;
}

/* ---------- Step Cards ---------- */
body.light-theme .step-card {
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

body.light-theme .step-card:hover {
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.08);
  border-color: #93C5FD;
  transform: translateY(-3px);
}

/* ---------- Footer ---------- */
body.light-theme .landing-footer {
  background: #F0F4FF;
  border-top: 3px solid #BFDBFE;
}

/* ---------- Dot-grid more visible ---------- */
body.light-theme .landing-section::before,
body.light-theme .landing-section-alt::before {
  background-image: radial-gradient(circle, rgba(37, 99, 235, 0.06) 1px, transparent 1px) !important;
}
/* ==========================================================================
   23. NOISE TEXTURE OVERLAY (Subtle grain for depth)
   ========================================================================== */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

body.light-theme::after {
  opacity: 0.035;
  mix-blend-mode: multiply;
}

/* ==========================================================================
   24. GRID LINE PATTERN (replaces dot-grid on light theme)
   ========================================================================== */

body.light-theme .landing-section::before,
body.light-theme .landing-section-alt::before {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

/* ==========================================================================
   25. ADDITIONAL GRADIENT ORBS (per-section embedded orbs)
   ========================================================================== */

/* Hero section orb: Large blue glow top-right */
body.light-theme .landing-hero-section::after {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.02) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Services section orb: green glow bottom-left */
body.light-theme #services::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.06) 0%, rgba(5, 150, 105, 0.02) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Audit section orb: purple glow top-right */
body.light-theme #audit::after {
  content: '';
  position: absolute;
  top: -5%;
  right: -8%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Calculator section orb: blue glow center-left */
body.light-theme #calculator::after {
  content: '';
  position: absolute;
  top: 20%;
  left: -12%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Ensure sections have relative positioning for orbs */
body.light-theme .landing-hero-section,
body.light-theme #services,
body.light-theme #audit,
body.light-theme #calculator {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   26. SVG WAVE DIVIDER STYLES (enhanced)
   ========================================================================== */

.section-wave-top,
.section-wave-bottom {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 3;
}

.section-wave-top {
  margin-bottom: -2px;
}

.section-wave-bottom {
  margin-top: -2px;
}

.section-wave-top svg,
.section-wave-bottom svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Wave fills for light theme */
body.light-theme .wave-fill-white { fill: #FFFFFF; }
body.light-theme .wave-fill-blue { fill: #EFF6FF; }
body.light-theme .wave-fill-accent { fill: #DBEAFE; }

/* Wave fills for dark theme */
.wave-fill-white { fill: #0B1426; }
.wave-fill-blue { fill: #101E38; }
.wave-fill-accent { fill: rgba(37, 99, 235, 0.08); }

/* ==========================================================================
   ==========================================================================
   1PLATFORM  ·  LANDING v3  "LIVE PRODUCT DEMO"
   Appended last — wins over style.css and redesign.css.
   All classes are namespaced with .nx-  (no legacy class is touched).
   ========================================================================== */

.nx-root {
  --nx-bg:        #05070F;
  --nx-bg-2:      #080C18;
  --nx-surface:   rgba(255, 255, 255, 0.035);
  --nx-surface-2: rgba(255, 255, 255, 0.055);
  --nx-line:      rgba(255, 255, 255, 0.09);
  --nx-line-2:    rgba(255, 255, 255, 0.16);

  --nx-txt:       #EEF2FB;
  --nx-txt-2:     #9BA9C4;
  --nx-txt-3:     #67748F;

  /* Палитра приглушена: было кислотно (бирюза #22D3EE, мята #10D9A0,
     фиолет #8B5CF6) — читалось как игра, а не как деловой сервис.
     Светлоту сохранили, убрали насыщенность. */
  --nx-blue:      #2F62D6;
  --nx-blue-2:    #6E92D8;
  --nx-cyan:      #6FA3C0;
  --nx-violet:    #7C86C4;
  --nx-green:     #4E9E82;
  --nx-amber:     #D99B3E;
  --nx-red:       #D96A7C;

  --nx-r-sm: 10px;
  --nx-r:    16px;
  --nx-r-lg: 24px;
  --nx-r-xl: 32px;

  --nx-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --nx-disp: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  --nx-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);

  position: relative;
  background: var(--nx-bg);
  color: var(--nx-txt);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: clip;
}

.nx-root *, .nx-root *::before, .nx-root *::after { box-sizing: border-box; }

.nx-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   COSMIC BACKGROUND
   -------------------------------------------------------------------------- */
.nx-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.nx-bg-grid {
  position: absolute;
  inset: -10% -10% 0 -10%;
  height: 190vh;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 12%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 12%, #000 25%, transparent 78%);
}

.nx-orb {
  position: absolute;
  border-radius: 50%;
  /* Шары остаются и по-прежнему дрейфуют — они просто перестали светиться */
  filter: blur(90px);
  opacity: 0.16;
  animation: nxOrbDrift 26s ease-in-out infinite alternate;
}
.nx-orb-1 { width: 720px; height: 720px; top: -240px; left: -180px; background: radial-gradient(circle, rgba(46,107,255,0.42) 0%, transparent 68%); }
.nx-orb-2 { width: 640px; height: 640px; top: 6%; right: -220px; background: radial-gradient(circle, rgba(90,110,170,0.30) 0%, transparent 68%); animation-delay: -9s; }
.nx-orb-3 { width: 820px; height: 820px; top: 62%; left: 45%; background: radial-gradient(circle, rgba(100,130,180,0.14) 0%, transparent 70%); animation-delay: -16s; }

@keyframes nxOrbDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(60px,50px,0) scale(1.14); }
}

/* Floating 1C account numbers */
.nx-accounts-field { position: absolute; inset: 0; }
.nx-acc-particle {
  position: absolute;
  font-family: var(--nx-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(155, 169, 196, 0.20);
  white-space: nowrap;
  animation: nxFloatUp linear infinite;
  text-shadow: 0 0 18px rgba(46,107,255,0.35);
}
@keyframes nxFloatUp {
  0%   { transform: translateY(30px); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-190px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.nx-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(5, 7, 15, 0.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nx-header.is-stuck {
  background: rgba(5, 7, 15, 0.92);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow: 0 12px 40px -20px rgba(0,0,0,0.9);
}

.nx-nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.nx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.nx-brand-mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(46,107,255,0.22), rgba(139,92,246,0.10));
  border: 1px solid rgba(46,107,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 24px -12px rgba(6,12,26,0.7);
}
.nx-brand-bar { fill: #EEF2FB; }
.nx-brand-name {
  font-family: var(--nx-disp);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
  color: var(--nx-txt);
}
.nx-brand-tag {
  font-family: var(--nx-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--nx-blue-2);
  background: rgba(46,107,255,0.14);
  border: 1px solid rgba(46,107,255,0.28);
  margin-top: -10px;
}

.nx-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nx-nav-link {
  position: relative;
  font-size: 0.855rem;
  font-weight: 600;
  color: var(--nx-txt-2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 9px;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.nx-nav-link:hover { color: var(--nx-txt); background: rgba(255,255,255,0.05); }
.nx-nav-link-hot { color: #FFD9E1; }
.nx-nav-link-hot::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--nx-red);
  box-shadow: 0 0 10px var(--nx-red);
  animation: nxPulse 1.8s ease-in-out infinite;
}
.nx-nav-link-hot { padding-left: 18px; }
.nx-nav-link-hot:hover { color: #fff; background: rgba(255,77,109,0.10); }

@keyframes nxPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.55); opacity: 0.45; }
}

.nx-root .nx-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nx-scroll-progress {
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--nx-cyan), var(--nx-blue), var(--nx-violet));
  box-shadow: 0 0 6px rgba(46,107,255,0.35);
  transition: width 0.1s linear;
}

.nx-burger {
  display: none;
  width: 42px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--nx-line);
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
}
.nx-burger span { display: block; height: 2px; border-radius: 2px; background: var(--nx-txt); transition: 0.2s; }

.nx-mobile-menu {
  display: none;
  position: fixed;
  inset: 72px 0 auto 0;
  z-index: 899;
  background: rgba(5,7,15,0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--nx-line);
  padding: 18px 24px 26px;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.nx-mobile-menu.is-open { display: flex; }
.nx-mobile-menu a {
  color: var(--nx-txt);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 13px 12px;
  border-radius: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nx-mobile-menu a:active { background: rgba(255,255,255,0.06); }
.nx-mobile-cta { display: flex; gap: 10px; margin-top: 14px; }
.nx-mobile-cta .btn { flex: 1; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--nx-disp);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 15px 26px;
  border-radius: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.24s ease, background 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.nx-btn:hover { transform: translateY(-2px); }
.nx-btn:active { transform: translateY(0); }

.nx-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #3B78FF 0%, #2E6BFF 45%, #6D4BFF 100%);
  box-shadow: 0 14px 34px -14px rgba(6,12,26,0.75), inset 0 1px 0 rgba(255,255,255,0.18);
}
.nx-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -140%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  animation: nxShimmer 4.2s ease-in-out infinite;
}
@keyframes nxShimmer {
  0%, 62% { left: -140%; }
  100%    { left: 160%; }
}
.nx-btn-primary:hover { box-shadow: 0 20px 46px -14px rgba(6,12,26,0.85), inset 0 1px 0 rgba(255,255,255,0.22); }

.nx-btn-ghost {
  color: var(--nx-txt);
  background: rgba(255,255,255,0.045);
  border-color: var(--nx-line-2);
  backdrop-filter: blur(10px);
}
.nx-btn-ghost:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.28); }

.nx-btn-lg { padding: 17px 32px; font-size: 1rem; }
.nx-btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.nx-hero {
  position: relative;
  padding: 76px 0 68px;
  overflow: hidden;
}
.nx-hero-glow {
  position: absolute;
  width: 1100px; height: 520px;
  left: 50%; top: -180px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(46,107,255,0.07) 0%, transparent 66%);
  filter: blur(40px);
  pointer-events: none;
}

.nx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 54px;
  align-items: center;
}

/* kicker */
.nx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--nx-line);
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--nx-txt-2);
  backdrop-filter: blur(10px);
  margin-bottom: 26px;
}
.nx-kicker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nx-green);
  box-shadow: 0 0 12px var(--nx-green);
  animation: nxPulse 2s ease-in-out infinite;
}
.nx-kicker-sep { color: var(--nx-txt-3); }
.nx-kicker-mono {
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--nx-cyan);
}

/* headline */
.nx-h1 {
  font-family: var(--nx-disp);
  font-weight: 800;
  font-size: clamp(2.3rem, 4.1vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  color: #fff;
}
.nx-h1-line { display: block; }
.nx-h1-dim {
  font-size: clamp(1.05rem, 1.35vw, 1.32rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--nx-txt-2);
  margin-top: 20px;
  max-width: 30em;
}
.nx-h1-rotor {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: 1.14em;
}
.nx-rot {
  display: inline-block;
  /* Было три цвета с переливом — синий, бирюза, фиолетовый. Слово
     по-прежнему меняется, но не переливается. */
  color: #8FB3E8;
  filter: drop-shadow(0 6px 30px rgba(46,107,255,0.45));
}
.nx-rot.is-out { animation: nxRotOut 0.34s cubic-bezier(.4,0,.6,1) forwards; }
.nx-rot.is-in  { animation: nxRotIn  0.44s cubic-bezier(.16,.84,.34,1) forwards; }
@keyframes nxRotOut {
  to { opacity: 0; transform: translateY(-16px) skewY(-3deg); filter: blur(7px); }
}
@keyframes nxRotIn {
  from { opacity: 0; transform: translateY(18px) skewY(3deg); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.nx-rot-cursor {
  width: 3px;
  height: 0.86em;
  background: var(--nx-cyan);
  border-radius: 2px;
  box-shadow: 0 0 14px var(--nx-cyan);
  animation: nxBlink 1.05s steps(2, start) infinite;
  flex-shrink: 0;
}
@keyframes nxBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.nx-hero-sub {
  font-size: 1.015rem;
  line-height: 1.68;
  color: var(--nx-txt-2);
  max-width: 33em;
  margin: 0 0 32px;
}

.nx-hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 38px; }

/* stats */
.nx-hero-stats {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
  border-radius: var(--nx-r);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--nx-line);
  backdrop-filter: blur(12px);
  width: fit-content;
  max-width: 100%;
}
.nx-stat { min-width: 0; }
.nx-stat-num {
  font-family: var(--nx-disp);
  font-weight: 800;
  font-size: 1.72rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #E9EFF9;
}
.nx-stat-unit { font-size: 0.85rem; margin-left: 3px; }
.nx-stat-lbl { font-size: 0.755rem; color: var(--nx-txt-3); margin-top: 6px; font-weight: 500; }
.nx-stat-div { width: 1px; height: 38px; background: var(--nx-line-2); flex-shrink: 0; }

.nx-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.nx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.775rem; font-weight: 600; color: var(--nx-txt-2);
  padding: 7px 13px; border-radius: 100px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--nx-line);
}
.nx-chip-i { width: 14px; height: 14px; flex-shrink: 0; border-radius: 4px; }
.nx-i-lock { background: linear-gradient(135deg, var(--nx-green), #0A9E75); box-shadow: 0 0 12px rgba(16,217,160,0.4); }
.nx-i-bolt { background: var(--nx-amber); }

/* scroll hint */
.nx-scroll-hint {
  display: none;
  align-items: center; gap: 8px;
  margin: 46px auto 0;
  width: fit-content;
  font-family: var(--nx-mono);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--nx-txt-3); text-decoration: none;
}
.nx-scroll-arrow {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--nx-cyan), transparent);
  animation: nxDrop 1.9s ease-in-out infinite;
}
@keyframes nxDrop { 0%,100% { opacity: 0.3; transform: translateY(-4px); } 50% { opacity: 1; transform: translateY(4px); } }

/* --------------------------------------------------------------------------
   LIVE SCANNER
   -------------------------------------------------------------------------- */
.nx-scanner {
  position: relative;
  border-radius: var(--nx-r-lg);
  /* Уголь: почти чёрный, без цветного оттенка. Выбран из четырёх
     вариантов — синева прежнего фона тянула страницу в киберпанк. */
  background:
    linear-gradient(168deg, #26262A 0%, #161619 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--nx-shadow), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
  backdrop-filter: blur(18px);
}
.nx-scan-halo {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1px;
  /* Ободок больше не светится бирюзой и фиолетом — просто светлая кромка */
  background: linear-gradient(130deg, rgba(255,255,255,0.16), transparent 32%, transparent 68%, rgba(255,255,255,0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

.nx-scan-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
}
.nx-scan-head-l { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nx-scan-dot-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nx-green);
  animation: nxPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.nx-scan-conn {
  font-family: var(--nx-mono);
  font-size: 0.715rem;
  color: var(--nx-txt-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-scan-badge-ro {
  font-family: var(--nx-mono);
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em;
  padding: 4px 9px; border-radius: 6px;
  color: #93C4B1;
  background: rgba(78,158,130,0.13);
  border: 1px solid rgba(78,158,130,0.34);
}

.nx-scan-body {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 20px 16px;
  align-items: center;
}

/* gauge */
.nx-gauge-wrap { position: relative; width: 186px; height: 186px; }
.nx-gauge { width: 100%; height: 100%; transform: rotate(-90deg); }
.nx-gauge-track { fill: none; stroke: rgba(255,255,255,0.11); stroke-width: 11; }
.nx-gauge-bar {
  fill: none;
  stroke: url(#nxGaugeGrad);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 515.22;
  stroke-dashoffset: 515.22;
  /* Кольцо больше не светится: было drop-shadow с синим ореолом */
  transition: stroke-dashoffset 0.35s linear;
}
.nx-gauge-tick { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 1; stroke-dasharray: 2 8; }
.nx-gauge-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.nx-gauge-val {
  font-family: var(--nx-disp);
  font-weight: 800; font-size: 2.05rem; line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.nx-gauge-val span { font-size: 1rem; color: var(--nx-txt-2); margin-left: 2px; }
.nx-gauge-lbl {
  margin-top: 8px;
  font-family: var(--nx-mono);
  font-size: 0.635rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--nx-txt-3);
  max-width: 128px;
}
.nx-gauge-sweep {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(110,146,216,0.16) 40deg, transparent 70deg);
  animation: nxSweep 2.6s linear infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.nx-scanner.is-scanning .nx-gauge-sweep { opacity: 1; }
@keyframes nxSweep { to { transform: rotate(360deg); } }

/* checklist */
.nx-scan-list { display: flex; flex-direction: column; gap: 2px; }
.nx-scan-item {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) 20px;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  opacity: 0.34;
  transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.nx-scan-item.is-active {
  opacity: 1;
  background: rgba(46,107,255,0.11);
  border-color: rgba(46,107,255,0.32);
  transform: translateX(3px);
}
.nx-scan-item.is-done { opacity: 1; }
.nx-si-num { font-family: var(--nx-mono); font-size: 0.66rem; color: var(--nx-txt-3); }
.nx-si-name {
  font-size: 0.775rem; font-weight: 600; color: var(--nx-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-si-state { width: 18px; height: 18px; position: relative; }
.nx-si-state::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  transition: all 0.25s ease;
}
.nx-scan-item.is-active .nx-si-state::after {
  border: 2px solid rgba(46,107,255,0.35);
  border-top-color: var(--nx-blue-2);
  animation: nxSpin 0.7s linear infinite;
}
@keyframes nxSpin { to { transform: rotate(360deg); } }
.nx-scan-item.st-ok .nx-si-state::after {
  background: rgba(78,158,130,0.18);
  border: 1px solid rgba(78,158,130,0.55);
}
.nx-scan-item.st-ok .nx-si-state::before {
  content: '';
  /* Было «left: 5px; top: 7px» — подбор на глаз, и в кружке 18×18 перекос
     видно сразу. Теперь центр считается, а поворот идёт от центра галочки. */
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 8px;
  border-right: 2px solid var(--nx-green);
  border-bottom: 2px solid var(--nx-green);
  transform: translate(-50%, -60%) rotate(45deg);
  z-index: 1;
}
.nx-scan-item.st-warn .nx-si-state::after {
  background: rgba(201,150,63,0.20);
  border: 1px solid rgba(201,150,63,0.6);
}
.nx-scan-item.st-warn .nx-si-state::before {
  content: '!';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 800; color: var(--nx-amber);
  z-index: 1;
}
.nx-scan-item.st-err .nx-si-state::after {
  background: rgba(192,82,106,0.20);
  border: 1px solid rgba(192,82,106,0.65);
}
.nx-scan-item.st-err .nx-si-state::before {
  content: '!';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 800; color: var(--nx-red);
  z-index: 1;
}
.nx-scan-item.st-warn { background: rgba(201,150,63,0.07); }
.nx-scan-item.st-err  { background: rgba(192,82,106,0.08); }

/* console */
.nx-scan-console {
  margin: 0 20px;
  padding: 12px 14px;
  height: 92px;
  overflow: hidden;
  border-radius: var(--nx-r-sm);
  /* Окно лога — утопленная панель: чуть темнее угля вокруг */
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.07);
  font-family: var(--nx-mono);
  font-size: 0.695rem;
  line-height: 1.62;
  color: var(--nx-txt-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.nx-log-line {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: nxLogIn 0.28s ease;
}
@keyframes nxLogIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nx-log-line b { font-weight: 700; }
.nx-log-ok   { color: #93C4B1; }
.nx-log-warn { color: #D9B36A; }
.nx-log-err  { color: #E39AA6; }
.nx-log-sys  { color: var(--nx-txt-3); }

/* verdict */
.nx-scan-verdict {
  margin: 14px 20px 0;
  padding: 0 16px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-radius: var(--nx-r-sm);
  background: linear-gradient(120deg, rgba(192,82,106,0.16), rgba(201,150,63,0.10));
  border: 1px solid rgba(192,82,106,0.32);
  transition: height 0.4s cubic-bezier(.2,.9,.3,1), opacity 0.35s ease, padding 0.4s ease;
}
.nx-scanner.is-done .nx-scan-verdict { height: 66px; opacity: 1; padding: 0 16px; }
.nx-verdict-lbl { font-size: 0.7rem; color: var(--nx-txt-2); font-weight: 600; }
.nx-verdict-sum {
  font-family: var(--nx-disp); font-weight: 800; font-size: 1.32rem;
  letter-spacing: -0.03em; color: #E9A0AC; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.nx-verdict-btn {
  flex-shrink: 0;
  font-family: var(--nx-disp); font-weight: 700; font-size: 0.8rem;
  padding: 10px 16px; border-radius: 10px; cursor: pointer;
  color: #fff; border: 1px solid rgba(255,255,255,0.2);
  background: #C0526A;
  box-shadow: 0 10px 26px -12px rgba(6,12,26,0.7);
  transition: transform 0.15s ease;
}
.nx-verdict-btn:hover { transform: translateY(-2px); }

.nx-scan-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 20px 15px;
  font-family: var(--nx-mono);
  font-size: 0.665rem;
  color: var(--nx-txt-3);
  border-top: 1px solid rgba(255,255,255,0.055);
  margin-top: 14px;
}
.nx-scan-foot-i { color: var(--nx-cyan); }
.nx-scan-replay {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--nx-mono); font-size: 0.65rem;
  color: var(--nx-txt-2);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--nx-line);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
  transition: all 0.18s ease;
}
.nx-scan-replay:hover { color: #fff; border-color: var(--nx-line-2); background: rgba(255,255,255,0.1); }

/* --------------------------------------------------------------------------
   TICKER
   -------------------------------------------------------------------------- */
.nx-ticker {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--nx-line);
  border-bottom: 1px solid var(--nx-line);
  background: linear-gradient(90deg, rgba(46,107,255,0.06), rgba(139,92,246,0.05));
  overflow: hidden;
  padding: 13px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nx-ticker-row { display: flex; width: max-content; }
.nx-ticker-left .nx-ticker-flow { animation: nxTickL 46s linear infinite; }
.nx-ticker-flow { display: flex; align-items: center; gap: 16px; padding-right: 16px; flex-shrink: 0; }
@keyframes nxTickL { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.nx-tb {
  font-family: var(--nx-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.09em;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}
.nx-tb-blue   { color: #8FB2FF; background: rgba(46,107,255,0.14);  border: 1px solid rgba(46,107,255,0.3); }
.nx-tb-green  { color: #93C4B1; background: rgba(16,217,160,0.12);  border: 1px solid rgba(16,217,160,0.3); }
.nx-tb-amber  { color: #FFCE72; background: rgba(255,176,32,0.12);  border: 1px solid rgba(255,176,32,0.3); }
.nx-tb-violet { color: #C4B0FF; background: rgba(139,92,246,0.14);  border: 1px solid rgba(139,92,246,0.3); }
.nx-tb-cyan   { color: #8DE9F7; background: rgba(34,211,238,0.12);  border: 1px solid rgba(34,211,238,0.3); }
.nx-tt { font-size: 0.79rem; font-weight: 500; color: var(--nx-txt-2); white-space: nowrap; }
.nx-ts { color: rgba(255,255,255,0.14); font-weight: 700; }

/* --------------------------------------------------------------------------
   SECTION SHELL
   -------------------------------------------------------------------------- */
.nx-sec {
  position: relative;
  padding: 100px 0;
  z-index: 2;
}
.nx-sec-alt {
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.005));
  border-top: 1px solid rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.045);
}
.nx-sec-dark { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(46,107,255,0.09), transparent 70%); }

.nx-sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.nx-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--nx-mono);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 100px;
  color: #FFFFFF;
  background: #2F62D6;
  border: 0;
  box-shadow: 0 12px 26px -14px rgba(47, 98, 214, 0.75);
  margin-bottom: 22px;
}
/* Точка светлая: на заливке она читается, а цвет раздела несёт сама плашка */
.nx-badge::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
.nx-badge-red   { background: #B2384F; box-shadow: 0 12px 26px -14px rgba(178, 56, 79, 0.75); }
.nx-badge-green { background: #3F8A70; box-shadow: 0 12px 26px -14px rgba(63, 138, 112, 0.75); }
.nx-badge-cyan  { background: #4E7E96; box-shadow: 0 12px 26px -14px rgba(78, 126, 150, 0.75); }

.nx-h2 {
  font-family: var(--nx-disp);
  font-weight: 800;
  font-size: clamp(1.85rem, 3.1vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
  color: #fff;
}
.nx-lead {
  font-size: 1.005rem;
  line-height: 1.66;
  color: var(--nx-txt-2);
  margin: 0;
}

.nx-t-blue  { color: #8FB2FF !important; }
.nx-t-green { color: #93C4B1 !important; }
.nx-t-amber { color: #FFCE72 !important; }
.nx-t-red   { color: #FF8FA3 !important; }

/* --------------------------------------------------------------------------
   RISK CALCULATOR
   -------------------------------------------------------------------------- */
.nx-sec-calc { padding-top: 92px; }
.nx-sec-calc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 22% 40%, rgba(255,77,109,0.07), transparent 65%);
  pointer-events: none;
}

.nx-calc {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 26px;
  align-items: start;
}

.nx-calc-inputs {
  padding: 32px 30px;
  border-radius: var(--nx-r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--nx-line);
  backdrop-filter: blur(14px);
}

.nx-slider-block { margin-bottom: 30px; }
.nx-slider-block:last-of-type { margin-bottom: 24px; }
.nx-slider-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.nx-slider-label { font-size: 0.9rem; font-weight: 600; color: var(--nx-txt); line-height: 1.4; }
.nx-slider-out {
  font-family: var(--nx-mono);
  font-size: 1.02rem; font-weight: 700;
  color: #fff;
  background: rgba(46,107,255,0.16);
  border: 1px solid rgba(46,107,255,0.34);
  border-radius: 9px;
  padding: 5px 11px;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.nx-slider-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 11px; }
.nx-slider-hint { font-size: 0.755rem; color: var(--nx-txt-3); line-height: 1.4; }
.nx-slider-scale { font-family: var(--nx-mono); font-size: 0.66rem; color: rgba(255,255,255,0.2); white-space: nowrap; }

.nx-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: 100px;
  background: rgba(255,255,255,0.09);
  outline: none;
  cursor: pointer;
}
.nx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(140deg, #fff, #C9D9FF);
  border: 3px solid var(--nx-blue);
  box-shadow: 0 0 0 5px rgba(46,107,255,0.16), 0 6px 18px -6px rgba(0,0,0,0.9);
  cursor: grab;
  transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.nx-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 9px rgba(46,107,255,0.2), 0 6px 18px -6px rgba(0,0,0,0.9); }
.nx-range:active::-webkit-slider-thumb { transform: scale(1.08); cursor: grabbing; }
.nx-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--nx-blue);
  box-shadow: 0 0 0 5px rgba(46,107,255,0.16);
  cursor: grab;
}
.nx-range::-moz-range-track { height: 6px; border-radius: 100px; background: rgba(255,255,255,0.09); }

.nx-calc-scale { padding-top: 24px; border-top: 1px solid var(--nx-line); }
.nx-calc-scale-lbl { display: block; font-size: 0.85rem; font-weight: 600; color: var(--nx-txt-2); margin-bottom: 13px; }
.nx-pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
.nx-pill {
  font-family: var(--nx-disp);
  font-size: 0.82rem; font-weight: 700;
  padding: 9px 17px; border-radius: 10px;
  color: var(--nx-txt-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--nx-line);
  cursor: pointer;
  transition: all 0.18s ease;
}
.nx-pill:hover { color: #fff; border-color: var(--nx-line-2); }
.nx-pill.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(46,107,255,0.9), rgba(109,75,255,0.85));
  border-color: rgba(46,107,255,0.6);
  box-shadow: 0 10px 24px -12px rgba(6,12,26,0.7);
}

/* output panel */
.nx-calc-out {
  position: relative;
  padding: 32px 28px 26px;
  border-radius: var(--nx-r-lg);
  /* Тот же уголь, что у окна отчёта: две тёмные панели на странице
     должны быть одного цвета, иначе выглядят как из разных мест.
     Тревогу несут сумма и полосы разбивки, фону кричать незачем. */
  background: linear-gradient(165deg, #26262A, #161619);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--nx-shadow);
  overflow: hidden;
}
.nx-calc-out-glow {
  position: absolute;
  width: 420px; height: 420px;
  top: -220px; right: -140px;
  background: radial-gradient(circle, rgba(192,82,106,0.10), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
}
.nx-calc-total-lbl {
  font-family: var(--nx-mono);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #E39AA6;
  margin-bottom: 12px;
  position: relative;
}
.nx-calc-total {
  font-family: var(--nx-disp);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.4vw, 3.05rem);
  line-height: 1;
  letter-spacing: -0.045em;
  /* Сумма белая, а не красная. На угле приглушённый красный выглядел
     блёкло, а яркий вернул бы неон. Белым цифра держит максимальный
     контраст, тревогу несёт подпись сверху и красная черта под суммой —
     та же, что и у полосы «Штрафы по ЭСФ» ниже. */
  color: #F2F4F8;
  font-variant-numeric: tabular-nums;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}
.nx-calc-total::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px; border-radius: 100px;
  background: linear-gradient(90deg, #C0526A 0%, rgba(192,82,106,0.15) 100%);
}
.nx-calc-total-note {
  font-family: var(--nx-mono);
  font-size: 0.68rem; color: var(--nx-txt-3);
  margin-top: 10px; position: relative;
}

.nx-calc-bars { margin: 26px 0 22px; display: flex; flex-direction: column; gap: 15px; position: relative; }
.nx-cb-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.78rem; color: var(--nx-txt-2); margin-bottom: 7px; }
.nx-cb-top b { font-family: var(--nx-mono); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-cb-track { height: 7px; border-radius: 100px; background: rgba(255,255,255,0.07); overflow: hidden; }
.nx-cb-fill { height: 100%; width: 0%; border-radius: 100px; transition: width 0.55s cubic-bezier(.2,.9,.3,1); }
.nx-cb-red    { background: #C0526A; }
.nx-cb-amber  { background: #C9963F; }
.nx-cb-violet { background: linear-gradient(90deg, #8B5CF6, #C4B0FF); box-shadow: 0 0 14px rgba(139,92,246,0.5); }

.nx-calc-time {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 17px; border-radius: var(--nx-r-sm);
  background: rgba(16,217,160,0.07);
  border: 1px solid rgba(16,217,160,0.22);
  margin-bottom: 20px;
  position: relative;
}
.nx-calc-time-lbl { font-size: 0.74rem; color: var(--nx-txt-2); }
.nx-calc-time-val { font-family: var(--nx-disp); font-weight: 800; font-size: 1.06rem; color: #93C4B1; margin-top: 4px; letter-spacing: -0.02em; }
.nx-calc-time-ico { color: rgba(126,232,198,0.5); flex-shrink: 0; }

.nx-calc-disclaimer { font-size: 0.7rem; color: var(--nx-txt-3); line-height: 1.5; margin-top: 14px; text-align: center; position: relative; }

/* --------------------------------------------------------------------------
   8-BLOCK INTERACTIVE MATRIX
   -------------------------------------------------------------------------- */
.nx-matrix {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: start;
}
.nx-matrix-list { display: flex; flex-direction: column; gap: 7px; }
.nx-mx-item {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 18px;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--nx-r);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--nx-line);
  cursor: pointer;
  transition: all 0.2s ease;
}
.nx-mx-item:hover { background: rgba(255,255,255,0.06); border-color: var(--nx-line-2); transform: translateX(3px); }
.nx-mx-item.is-active {
  background: linear-gradient(100deg, rgba(46,107,255,0.16), rgba(139,92,246,0.07));
  border-color: rgba(46,107,255,0.45);
  box-shadow: 0 12px 32px -18px rgba(6,12,26,0.7), inset 0 1px 0 rgba(255,255,255,0.07);
}
.nx-mx-code {
  font-family: var(--nx-mono); font-size: 0.85rem; font-weight: 700;
  color: rgba(255,255,255,0.24);
  transition: color 0.2s ease;
}
.nx-mx-item.is-active .nx-mx-code { color: var(--nx-blue-2); }
.nx-mx-txt { min-width: 0; }
.nx-mx-cat {
  display: inline-block;
  font-family: var(--nx-mono);
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #A9B4C9;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  padding: 3px 7px;
  margin-bottom: 7px;
}
/* Налоговый риск — красным: среди восьми строк эти две должны бросаться
   в глаза, разговор идёт про штрафы, а не про порядок в справочниках. */
.nx-mx-item.nx-mx-hot .nx-mx-cat {
  color: #E39AA6;
  background: rgba(192, 82, 106, 0.16);
  border-color: rgba(192, 82, 106, 0.34);
}
.nx-mx-name {
  display: block;
  font-size: 0.855rem; font-weight: 600; color: var(--nx-txt);
  line-height: 1.35;
}
.nx-mx-arrow {
  width: 7px; height: 7px;
  border-right: 2px solid rgba(255,255,255,0.22);
  border-bottom: 2px solid rgba(255,255,255,0.22);
  transform: rotate(-45deg);
  transition: all 0.2s ease;
}
.nx-mx-item.is-active .nx-mx-arrow { border-color: var(--nx-blue-2); transform: rotate(-45deg) translate(2px,2px); }

.nx-matrix-panel {
  position: sticky;
  top: 96px;
  padding: 32px 30px;
  border-radius: var(--nx-r-lg);
  /* Тот же уголь, что у окна отчёта и панели риска */
  background: linear-gradient(165deg, #26262A, #161619);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--nx-shadow);
  overflow: hidden;
  min-height: 380px;
}
.nx-mp-glow {
  position: absolute;
  width: 380px; height: 380px; top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(47,98,214,0.10), transparent 66%);
  filter: blur(20px); pointer-events: none;
  transition: background 0.4s ease;
}
.nx-matrix-panel.is-hot .nx-mp-glow { background: radial-gradient(circle, rgba(192,82,106,0.11), transparent 66%); }
.nx-mp-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; position: relative; }
.nx-mp-code {
  font-family: var(--nx-disp); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -0.04em;
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(140deg, rgba(46,107,255,0.85), rgba(109,75,255,0.7));
  box-shadow: 0 10px 26px -12px rgba(6,12,26,0.7), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background 0.35s ease;
}
.nx-matrix-panel.is-hot .nx-mp-code { background: #C0526A; box-shadow: 0 10px 26px -12px rgba(6,12,26,0.7); }
.nx-mp-cat {
  font-family: var(--nx-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nx-txt-2);
  padding: 6px 11px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--nx-line);
}
.nx-mp-title {
  font-family: var(--nx-disp); font-weight: 800;
  font-size: 1.4rem; line-height: 1.24; letter-spacing: -0.03em;
  color: #fff; margin: 0 0 20px; position: relative;
}
.nx-mp-list { list-style: none; margin: 0 0 22px; padding: 0; position: relative; }
.nx-mp-list li {
  position: relative;
  padding: 11px 0 11px 30px;
  font-size: 0.885rem;
  line-height: 1.55;
  color: var(--nx-txt-2);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  animation: nxFadeUp 0.4s ease backwards;
}
.nx-mp-list li:nth-child(1) { animation-delay: 0.03s; }
.nx-mp-list li:nth-child(2) { animation-delay: 0.09s; }
.nx-mp-list li:nth-child(3) { animation-delay: 0.15s; }
.nx-mp-list li:last-child { border-bottom: none; }
.nx-mp-list li::before {
  content: '';
  position: absolute; left: 4px; top: 18px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--nx-blue-2);
  border-bottom: 2px solid var(--nx-blue-2);
  transform: rotate(-45deg);
  opacity: 0.9;
}
@keyframes nxFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.nx-mp-res {
  position: relative;
  padding: 15px 17px;
  border-radius: var(--nx-r-sm);
  font-size: 0.835rem;
  line-height: 1.55;
  font-weight: 600;
  color: #B9E9D8;
  background: rgba(16,217,160,0.08);
  border: 1px solid rgba(16,217,160,0.24);
  border-left: 3px solid var(--nx-green);
}
.nx-matrix-panel.is-hot .nx-mp-res {
  color: #FFC9D3;
  background: rgba(255,77,109,0.09);
  border-color: rgba(255,77,109,0.26);
  border-left-color: var(--nx-red);
}
.nx-mp-accounts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; position: relative; }
.nx-mp-acc {
  font-family: var(--nx-mono); font-size: 0.68rem; font-weight: 600;
  color: var(--nx-txt-2);
  padding: 5px 10px; border-radius: 7px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--nx-line);
}

/* --------------------------------------------------------------------------
   COCKPIT (LIVE REPORT)
   -------------------------------------------------------------------------- */
.nx-cockpit {
  border-radius: var(--nx-r-lg);
  /* Тот же уголь, что у остальных тёмных панелей */
  background: linear-gradient(168deg, #26262A, #161619);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--nx-shadow);
  overflow: hidden;
}
.nx-ck-top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.022);
}
.nx-ck-top-l { display: flex; align-items: center; gap: 9px; }
.nx-ck-live { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-green); box-shadow: 0 0 12px var(--nx-green); animation: nxPulse 1.7s ease-in-out infinite; }
.nx-ck-conn { font-family: var(--nx-mono); font-size: 0.7rem; color: var(--nx-txt-2); }
.nx-ck-ping { font-family: var(--nx-mono); font-size: 0.65rem; color: var(--nx-green); background: rgba(16,217,160,0.1); border: 1px solid rgba(16,217,160,0.24); padding: 3px 7px; border-radius: 5px; }
.nx-ck-tabs { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.nx-ck-tab {
  font-size: 0.755rem; font-weight: 700;
  padding: 8px 13px; border-radius: 9px;
  color: var(--nx-txt-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--nx-line);
  cursor: pointer; white-space: nowrap;
  transition: all 0.18s ease;
}
.nx-ck-tab:hover { color: #fff; border-color: var(--nx-line-2); }
.nx-ck-tab.is-active { color: #fff; background: rgba(46,107,255,0.85); border-color: rgba(46,107,255,0.6); box-shadow: 0 8px 20px -10px rgba(46,107,255,0.9); }
.nx-ck-tab-risk.is-active { background: rgba(255,77,109,0.85); border-color: rgba(255,77,109,0.6); box-shadow: 0 8px 20px -10px rgba(255,77,109,0.9); }
.nx-ck-export {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.755rem; font-weight: 700;
  padding: 8px 13px; border-radius: 9px;
  color: #93C4B1;
  background: rgba(16,217,160,0.09);
  border: 1px solid rgba(16,217,160,0.28);
  cursor: pointer; white-space: nowrap;
  transition: all 0.18s ease;
}
.nx-ck-export:hover { background: rgba(16,217,160,0.16); color: #fff; }

.nx-ck-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.2);
}
.nx-ck-meta-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nx-ck-org { font-size: 0.8rem; font-weight: 700; color: #8FB2FF; }
.nx-ck-mp {
  font-family: var(--nx-mono); font-size: 0.65rem; color: var(--nx-txt-2);
  padding: 4px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--nx-line);
}
.nx-ck-mp-green { color: #93C4B1; border-color: rgba(16,217,160,0.24); background: rgba(16,217,160,0.08); }
.nx-ck-std { font-family: var(--nx-mono); font-size: 0.65rem; color: var(--nx-txt-3); }

.nx-ck-kpi {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr);
  gap: 20px;
  padding: 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: center;
}
.nx-ck-score { padding-right: 20px; border-right: 1px solid rgba(255,255,255,0.07); }
.nx-ck-score-val {
  font-family: var(--nx-disp); font-weight: 800; font-size: 2.7rem; line-height: 1;
  letter-spacing: -0.045em;
  color: #A9CFC0;
}
.nx-ck-score-val span { font-size: 1.1rem; }
.nx-ck-score-bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,0.08); margin: 12px 0 10px; overflow: hidden; }
.nx-ck-score-fill { height: 100%; width: 94.8%; border-radius: 100px; background: linear-gradient(90deg, var(--nx-green), var(--nx-cyan)); box-shadow: 0 0 14px rgba(16,217,160,0.6); }
.nx-ck-score-lbl { font-size: 0.73rem; color: var(--nx-txt-3); }
.nx-ck-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; }
.nx-ck-kpi-card {
  padding: 13px 14px; border-radius: var(--nx-r-sm);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--nx-line);
  display: flex; flex-direction: column; gap: 7px;
  transition: all 0.2s ease;
}
.nx-ck-kpi-card:hover { background: rgba(255,255,255,0.06); border-color: var(--nx-line-2); transform: translateY(-2px); }
.nx-ck-kpi-l { font-size: 0.68rem; color: var(--nx-txt-3); }
.nx-ck-kpi-v { font-family: var(--nx-disp); font-weight: 800; font-size: 1.06rem; letter-spacing: -0.02em; color: #fff; }

.nx-ck-rows { padding: 6px 10px 10px; }
.nx-ck-row {
  display: grid;
  grid-template-columns: 250px minmax(0,1fr) 132px 116px;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: var(--nx-r-sm);
  border-bottom: 1px solid rgba(255,255,255,0.045);
  transition: background 0.18s ease;
}
.nx-ck-row:hover { background: rgba(255,255,255,0.035); }
.nx-ck-row:last-child { border-bottom: none; }
.nx-ck-row.is-risk { background: linear-gradient(90deg, rgba(255,77,109,0.07), transparent 55%); }
.nx-ck-c1 { display: flex; align-items: center; gap: 11px; min-width: 0; }
.nx-ck-n {
  font-family: var(--nx-mono); font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.22);
  width: 24px; flex-shrink: 0;
}
.nx-ck-t { font-size: 0.845rem; font-weight: 700; color: var(--nx-txt); line-height: 1.3; }
.nx-ck-s { font-family: var(--nx-mono); font-size: 0.655rem; color: var(--nx-txt-3); margin-top: 4px; }
.nx-ck-c2 { font-size: 0.795rem; line-height: 1.5; color: var(--nx-txt-2); }
.nx-ck-c4 { font-family: var(--nx-mono); font-size: 0.885rem; font-weight: 700; text-align: right; color: var(--nx-txt-3); font-variant-numeric: tabular-nums; }
.nx-ck-pill {
  display: inline-block;
  font-family: var(--nx-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
}
.nx-pill-ok   { color: #93C4B1; background: rgba(16,217,160,0.1);  border: 1px solid rgba(16,217,160,0.3); }
.nx-pill-warn { color: #FFCE72; background: rgba(255,176,32,0.1);  border: 1px solid rgba(255,176,32,0.32); }
.nx-pill-err  { color: #FF8FA3; background: rgba(255,77,109,0.12); border: 1px solid rgba(255,77,109,0.36); box-shadow: 0 0 14px -4px rgba(255,77,109,0.6); }

.nx-ck-foot {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  padding: 15px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.22);
}
.nx-ck-foot-i { display: flex; align-items: center; gap: 9px; font-size: 0.755rem; color: var(--nx-txt-2); }
.nx-ck-foot-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--nx-blue-2); box-shadow: 0 0 9px var(--nx-blue-2); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   MODULES
   -------------------------------------------------------------------------- */
.nx-modules { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.nx-mod {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: var(--nx-r-lg);
  background: linear-gradient(165deg, rgba(255,255,255,0.052), rgba(255,255,255,0.012));
  border: 1px solid var(--nx-line);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(.2,.9,.3,1), border-color 0.28s ease, box-shadow 0.28s ease;
  backdrop-filter: blur(12px);
}
.nx-mod:hover { transform: translateY(-6px); border-color: var(--nx-line-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9); }
.nx-mod-primary { border-color: rgba(46,107,255,0.3); }
.nx-mod-glow {
  position: absolute; width: 300px; height: 300px; top: -170px; right: -110px;
  background: radial-gradient(circle, rgba(46,107,255,0.09), transparent 65%);
  filter: blur(18px); pointer-events: none;
}
.nx-glow-green  { background: radial-gradient(circle, rgba(78,158,130,0.09), transparent 65%); }
.nx-glow-violet { background: radial-gradient(circle, rgba(110,120,170,0.09), transparent 65%); }
.nx-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; position: relative; }
.nx-mod-ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  border: 1px solid;
}
.nx-ico-blue   { color: #8FB2FF; background: rgba(46,107,255,0.14);  border-color: rgba(46,107,255,0.3); }
.nx-ico-green  { color: #93C4B1; background: rgba(16,217,160,0.13);  border-color: rgba(16,217,160,0.3); }
.nx-ico-violet { color: #C4B0FF; background: rgba(139,92,246,0.14);  border-color: rgba(139,92,246,0.3); }
.nx-mod-chip {
  font-family: var(--nx-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 7px;
  color: #8FB2FF; background: rgba(46,107,255,0.1); border: 1px solid rgba(46,107,255,0.26);
  text-align: center; line-height: 1.3;
}
.nx-chip-green  { color: #93C4B1; background: rgba(16,217,160,0.1); border-color: rgba(16,217,160,0.26); }
.nx-chip-violet { color: #C4B0FF; background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.26); }
.nx-mod-title {
  font-family: var(--nx-disp); font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.03em; color: #fff; margin: 0 0 12px; position: relative;
}
.nx-mod-desc { font-size: 0.86rem; line-height: 1.62; color: var(--nx-txt-2); margin: 0 0 20px; position: relative; }
.nx-mod-visual {
  position: relative;
  padding: 14px;
  border-radius: var(--nx-r-sm);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 20px;
}
.nx-radar { display: flex; flex-direction: column; gap: 7px; }
.nx-radar-chip {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.72rem;
  padding: 7px 10px; border-radius: 7px;
  border: 1px solid;
}
.nx-radar-chip b { font-family: var(--nx-mono); font-size: 0.68rem; }
.nx-rc-ok   { color: #A9D3C1; background: rgba(78,158,130,0.12);  border-color: rgba(78,158,130,0.34); }
.nx-rc-warn { color: #E5C185; background: rgba(201,150,63,0.12);  border-color: rgba(201,150,63,0.34); }
.nx-rc-err  { color: #EFA8B3; background: rgba(192,82,106,0.13);  border-color: rgba(192,82,106,0.36); }
.nx-comp-top { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--nx-txt-2); margin-bottom: 9px; }
.nx-comp-ratio { font-family: var(--nx-mono); color: #93C4B1; font-weight: 700; }
.nx-comp-track { height: 8px; border-radius: 100px; background: rgba(255,255,255,0.08); overflow: hidden; }
.nx-comp-fill {
  height: 100%; width: 81%; border-radius: 100px;
  background: linear-gradient(90deg, var(--nx-green), var(--nx-cyan));
  box-shadow: 0 0 14px rgba(16,217,160,0.6);
  animation: nxCompPulse 3.4s ease-in-out infinite;
}
@keyframes nxCompPulse { 0%,100% { width: 81%; } 50% { width: 74%; } }
.nx-comp-meta { display: flex; justify-content: space-between; font-family: var(--nx-mono); font-size: 0.65rem; color: var(--nx-txt-3); margin-top: 9px; }
.nx-roles { display: flex; flex-direction: column; gap: 7px; }
.nx-role { display: flex; align-items: center; gap: 9px; font-size: 0.72rem; color: var(--nx-txt-2); }
.nx-role-b {
  font-family: var(--nx-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: 6px; flex-shrink: 0; min-width: 84px; text-align: center;
}
.nx-rb-dir { color: #E5C185; background: rgba(201,150,63,0.13);  border: 1px solid rgba(201,150,63,0.34); }
.nx-rb-gb  { color: #A8C0EC; background: rgba(47,98,214,0.14); border: 1px solid rgba(47,98,214,0.34); }
.nx-rb-buh { color: #B4B6DC; background: rgba(124,134,196,0.16); border: 1px solid rgba(124,134,196,0.36); }
.nx-mod-list { list-style: none; margin: 0; padding: 0; position: relative; }
.nx-mod-list li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 0.79rem; line-height: 1.5; color: var(--nx-txt-2);
}
.nx-mod-list li::before {
  content: '';
  position: absolute; left: 0; top: 15px;
  width: 9px; height: 1px; background: var(--nx-blue-2); opacity: 0.7;
}

/* --------------------------------------------------------------------------
   COMPARISON TABLE
   -------------------------------------------------------------------------- */
.nx-table-wrap {
  border-radius: var(--nx-r-lg);
  border: 1px solid var(--nx-line);
  background: rgba(255,255,255,0.025);
  overflow: hidden;
  overflow-x: auto;
  backdrop-filter: blur(12px);
}
.nx-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.nx-table th {
  text-align: left;
  padding: 17px 18px;
  font-size: 0.755rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--nx-txt-3);
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--nx-line-2);
  white-space: nowrap;
}
.nx-table th:first-child { width: 36%; white-space: normal; }
.nx-th-hot { background: rgba(46,107,255,0.14) !important; color: #fff !important; position: relative; }
.nx-th-hot::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--nx-cyan), var(--nx-violet)); }
.nx-table td {
  padding: 16px 18px;
  font-size: 0.83rem;
  color: var(--nx-txt-2);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.nx-table tr:last-child td { border-bottom: none; }
.nx-table tbody tr { transition: background 0.16s ease; }
.nx-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.nx-td-f { color: var(--nx-txt) !important; font-weight: 600; }
.nx-td-hot {
  background: rgba(46,107,255,0.075);
  color: #fff !important;
  font-weight: 700;
  position: relative;
  padding-left: 34px !important;
}
.nx-td-hot::before {
  content: '';
  position: absolute; left: 16px; top: 50%; margin-top: -4px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--nx-green);
  border-bottom: 2px solid var(--nx-green);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   SECURITY FLOW
   -------------------------------------------------------------------------- */
.nx-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 8px;
  padding: 34px 28px 54px;
  border-radius: var(--nx-r-lg);
  background: linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid var(--nx-line);
  margin-bottom: 40px;
  backdrop-filter: blur(12px);
}
.nx-flow-node { text-align: center; }
.nx-flow-ico {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 16px;
  border: 1px solid var(--nx-line-2);
  background: rgba(255,255,255,0.05);
  position: relative;
}
.nx-flow-ico::after {
  content: '';
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.nx-fi-db::after   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB2FF' stroke-width='2'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E"); }
.nx-fi-scan::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='2'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3C/svg%3E"); }
.nx-fi-cpu::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4B0FF' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3'/%3E%3C/svg%3E"); }
.nx-fi-doc::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237EE8C6' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); }
.nx-flow-node-out .nx-flow-ico { border-color: rgba(16,217,160,0.4); background: rgba(16,217,160,0.08); }
.nx-flow-t { font-family: var(--nx-disp); font-weight: 700; font-size: 0.92rem; color: #fff; letter-spacing: -0.02em; }
.nx-flow-s { font-size: 0.74rem; color: var(--nx-txt-3); margin-top: 6px; line-height: 1.45; }
.nx-flow-line {
  position: relative;
  height: 54px;
  min-width: 60px;
  display: flex; align-items: center; justify-content: center;
}
.nx-flow-line::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 27px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}
.nx-flow-line em {
  position: absolute; top: 34px;
  font-family: var(--nx-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  color: var(--nx-txt-3); font-style: normal;
}
.nx-flow-pulse {
  position: absolute; top: 24px; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--nx-cyan);
  box-shadow: 0 0 12px var(--nx-cyan);
  animation: nxFlowMove 2.6s ease-in-out infinite;
}
@keyframes nxFlowMove {
  0%   { left: 0%;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 6px); opacity: 0; }
}
.nx-flow-back {
  position: absolute;
  left: 28px; right: 28px; bottom: 16px;
  text-align: center;
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  color: #93C4B1;
  padding: 8px;
  border-radius: 8px;
  background: rgba(16,217,160,0.06);
  border: 1px dashed rgba(16,217,160,0.3);
}

.nx-sec-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.nx-sec-card {
  padding: 26px 24px;
  border-radius: var(--nx-r);
  background: rgba(255,255,255,0.032);
  border: 1px solid var(--nx-line);
  transition: all 0.24s ease;
}
.nx-sec-card:hover { background: rgba(255,255,255,0.055); border-color: var(--nx-line-2); transform: translateY(-4px); }
.nx-sc-num {
  font-family: var(--nx-disp); font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.04em;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  color: #8FB2FF;
  background: rgba(46,107,255,0.12);
  border: 1px solid rgba(46,107,255,0.28);
  margin-bottom: 16px;
}
.nx-sc-title { font-family: var(--nx-disp); font-weight: 700; font-size: 1.045rem; color: #fff; margin: 0 0 11px; letter-spacing: -0.02em; line-height: 1.3; }
.nx-sc-desc { font-size: 0.83rem; line-height: 1.62; color: var(--nx-txt-2); margin: 0; }

/* --------------------------------------------------------------------------
   STEPS + FINAL CTA
   -------------------------------------------------------------------------- */
.nx-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-bottom: 54px; }
.nx-step {
  position: relative;
  padding: 30px 26px 28px;
  border-radius: var(--nx-r);
  background: rgba(255,255,255,0.032);
  border: 1px solid var(--nx-line);
  overflow: hidden;
  transition: all 0.24s ease;
}
.nx-step:hover { background: rgba(255,255,255,0.055); border-color: var(--nx-line-2); }
.nx-step-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--nx-blue), transparent); }
.nx-step-dot {
  position: absolute; left: -3px; top: 30px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--nx-cyan); box-shadow: 0 0 14px var(--nx-cyan);
}
.nx-step-badge {
  font-family: var(--nx-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--nx-blue-2); margin-bottom: 14px;
}
.nx-step-title { font-family: var(--nx-disp); font-weight: 700; font-size: 1.1rem; color: #fff; margin: 0 0 10px; letter-spacing: -0.02em; }
.nx-step-desc { font-size: 0.845rem; line-height: 1.6; color: var(--nx-txt-2); margin: 0; }

.nx-final {
  position: relative;
  padding: 44px 42px;
  border-radius: var(--nx-r-xl);
  background: linear-gradient(120deg, rgba(47,98,214,0.16), rgba(47,98,214,0.07) 70%, rgba(255,255,255,0.03));
  border: 1px solid rgba(47,98,214,0.30);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(6,12,26,0.75);
}
.nx-final-glow {
  position: absolute; width: 700px; height: 400px; left: -120px; top: -200px;
  background: radial-gradient(ellipse, rgba(47,98,214,0.12), transparent 66%);
  filter: blur(30px); pointer-events: none;
}
.nx-final-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: 34px; align-items: center; }
.nx-final-title {
  font-family: var(--nx-disp); font-weight: 800;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1.2; letter-spacing: -0.035em;
  color: #fff; margin: 0 0 14px;
}
.nx-final-desc { font-size: 0.95rem; line-height: 1.62; color: rgba(255,255,255,0.78); margin: 0; }
.nx-final-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.nx-final-note { font-family: var(--nx-mono); font-size: 0.66rem; color: rgba(255,255,255,0.5); text-align: center; margin-top: 2px; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.nx-footer {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.55));
  border-top: 1px solid var(--nx-line);
}
.nx-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  padding-bottom: 46px;
}
.nx-footer-tag { font-size: 0.845rem; line-height: 1.68; color: var(--nx-txt-2); margin: 18px 0 16px; max-width: 42em; }
.nx-footer-loc { display: inline-flex; align-items: center; gap: 8px; font-size: 0.79rem; color: var(--nx-txt-3); }
.nx-footer-loc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nx-blue-2); box-shadow: 0 0 10px var(--nx-blue-2); }
.nx-footer-h {
  font-family: var(--nx-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--nx-txt-3); margin: 0 0 18px;
}
.nx-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.nx-footer-col a {
  font-size: 0.855rem; color: var(--nx-txt-2); text-decoration: none;
  transition: color 0.16s ease, padding-left 0.16s ease;
}
.nx-footer-col a:hover { color: #fff; padding-left: 4px; }
.nx-footer-bottom { border-top: 1px solid var(--nx-line); padding: 20px 0; }
.nx-footer-bottom-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.775rem; color: var(--nx-txt-3);
}
.nx-footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.nx-footer-legal a { color: inherit; text-decoration: none; transition: color 0.16s ease; }
.nx-footer-legal a:hover { color: #fff; }
body.light-theme .nx-footer-legal a:hover { color: #0B1220; }
.nx-footer-seller:empty { display: none; }

/* --------------------------------------------------------------------------
   LIGHT THEME  (hero / report / final stay cinematic dark)
   -------------------------------------------------------------------------- */
body.light-theme .nx-root {
  --nx-bg: #F5F7FC;
  --nx-txt:   #0B1220;
  --nx-txt-2: #4A5872;
  --nx-txt-3: #7C8AA3;
  --nx-line:   rgba(11,18,32,0.10);
  --nx-line-2: rgba(11,18,32,0.18);
  --nx-shadow: 0 30px 70px -34px rgba(23,42,86,0.30);
  background: var(--nx-bg);
  color: var(--nx-txt);
}
body.light-theme .nx-bg-grid {
  background-image:
    linear-gradient(to right, rgba(11,18,32,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,18,32,0.05) 1px, transparent 1px);
}
body.light-theme .nx-orb { opacity: 0.32; }
body.light-theme .nx-acc-particle { color: rgba(74,88,114,0.18); text-shadow: none; }

body.light-theme .nx-header { background: rgba(255,255,255,0.82); border-bottom-color: rgba(11,18,32,0.08); }
body.light-theme .nx-header.is-stuck { background: rgba(255,255,255,0.95); box-shadow: 0 10px 30px -18px rgba(23,42,86,0.35); }
body.light-theme .nx-brand-bar { fill: #0B1220; }
body.light-theme .nx-brand-name { color: #0B1220; }
body.light-theme .nx-nav-link:hover { background: rgba(11,18,32,0.05); color: #0B1220; }
body.light-theme .nx-nav-link-hot { color: #C81E45; }
body.light-theme .nx-mobile-menu { background: rgba(255,255,255,0.98); }
body.light-theme .nx-mobile-menu a { color: #0B1220; border-bottom-color: rgba(11,18,32,0.07); }
body.light-theme .nx-burger { background: rgba(11,18,32,0.04); }
body.light-theme .nx-burger span { background: #0B1220; }

/* hero stays dark */
body.light-theme .nx-hero {
  background: linear-gradient(172deg, #070B16 0%, #0B1226 55%, #0A1020 100%);
  border-radius: 0 0 34px 34px;
  margin-bottom: 6px;
}
body.light-theme .nx-hero .nx-h1, body.light-theme .nx-hero .nx-hero-sub,
body.light-theme .nx-hero .nx-stat-lbl, body.light-theme .nx-hero .nx-chip,
body.light-theme .nx-hero .nx-kicker { color: #9BA9C4; }
body.light-theme .nx-hero .nx-h1 { color: #fff; }
body.light-theme .nx-hero .nx-h1-dim { color: #9BA9C4; }
body.light-theme .nx-hero .nx-btn-ghost { color: #fff; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); }
body.light-theme .nx-hero .nx-hero-stats { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
body.light-theme .nx-hero .nx-stat-num { color: #E9EFF9; }
body.light-theme .nx-hero .nx-chip { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

body.light-theme .nx-sec-alt { background: #EDF1F8; border-color: rgba(11,18,32,0.07); }
body.light-theme .nx-h2 { color: #0B1220; }
/* Плашка раздела залита цветом и в светлой теме выглядит так же —
   отдельных правил ей больше не нужно. */

body.light-theme .nx-calc-inputs,
body.light-theme .nx-mod,
body.light-theme .nx-sec-card,
body.light-theme .nx-step,
body.light-theme .nx-flow,
body.light-theme .nx-table-wrap,
body.light-theme .nx-mx-item {
  background: #fff;
  border-color: rgba(11,18,32,0.09);
  box-shadow: 0 12px 34px -22px rgba(23,42,86,0.35);
}
body.light-theme .nx-mod-title, body.light-theme .nx-sc-title,
body.light-theme .nx-step-title, body.light-theme .nx-flow-t,
body.light-theme .nx-mx-name, body.light-theme .nx-slider-label { color: #0B1220; }
body.light-theme .nx-mx-item:hover { background: #F7F9FD; }
body.light-theme .nx-mx-item.is-active { background: linear-gradient(100deg, rgba(46,107,255,0.10), rgba(139,92,246,0.05)); border-color: rgba(46,107,255,0.4); }
body.light-theme .nx-mx-code { color: rgba(11,18,32,0.24); }
body.light-theme .nx-mx-cat {
  color: #4C5876;
  background: rgba(23, 42, 86, 0.06);
  border-color: rgba(23, 42, 86, 0.12);
}
body.light-theme .nx-mx-item.nx-mx-hot .nx-mx-cat {
  color: #A63A52;
  background: rgba(192, 82, 106, 0.10);
  border-color: rgba(192, 82, 106, 0.26);
}
body.light-theme .nx-mod-visual { background: #F4F7FC; border-color: rgba(11,18,32,0.07); }
body.light-theme .nx-range { background: rgba(11,18,32,0.10); }
body.light-theme .nx-range::-moz-range-track { background: rgba(11,18,32,0.10); }
body.light-theme .nx-pill { background: #F4F7FC; border-color: rgba(11,18,32,0.10); color: #4A5872; }
body.light-theme .nx-pill:hover { color: #0B1220; }
body.light-theme .nx-pill.is-active { color: #fff; }
body.light-theme .nx-slider-out { color: #1D4ED8; background: rgba(46,107,255,0.08); border-color: rgba(46,107,255,0.24); }
body.light-theme .nx-cb-track { background: rgba(255,255,255,0.12); }
body.light-theme .nx-table th { background: #F4F7FC; color: #7C8AA3; border-bottom-color: rgba(11,18,32,0.12); }
body.light-theme .nx-table td { border-bottom-color: rgba(11,18,32,0.06); }
body.light-theme .nx-table tbody tr:hover { background: #F7F9FD; }
body.light-theme .nx-td-f { color: #0B1220 !important; }
body.light-theme .nx-td-hot { background: rgba(46,107,255,0.06); color: #0B1220 !important; }
body.light-theme .nx-th-hot { background: rgba(46,107,255,0.12) !important; color: #0B1220 !important; }
body.light-theme .nx-flow-line::before { background: linear-gradient(90deg, transparent, rgba(11,18,32,0.18), transparent); }
body.light-theme .nx-flow-ico { background: #F4F7FC; border-color: rgba(11,18,32,0.12); }
body.light-theme .nx-flow-back { color: #06805E; background: rgba(16,217,160,0.07); border-color: rgba(16,217,160,0.32); }
body.light-theme .nx-footer { background: #E9EEF7; border-top-color: rgba(11,18,32,0.08); }
body.light-theme .nx-footer-col a:hover, body.light-theme .nx-footer .nx-brand-name { color: #0B1220; }
body.light-theme .nx-ticker { background: linear-gradient(90deg, rgba(46,107,255,0.05), rgba(139,92,246,0.04)); border-color: rgba(11,18,32,0.08); }
body.light-theme .nx-ts { color: rgba(11,18,32,0.14); }
body.light-theme .nx-scroll-hint { color: #7C8AA3; }

/* dark islands inside light theme */
body.light-theme .nx-sec-dark { background: linear-gradient(180deg, #EDF1F8, #EDF1F8); }
body.light-theme .nx-sec-dark .nx-h2 { color: #0B1220; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nx-nav-links { gap: 0; }
  .nx-nav-link { padding: 8px 9px; font-size: 0.8rem; }
  .nx-brand-tag { display: none; }
  .nx-ck-row { grid-template-columns: 210px minmax(0,1fr) 120px 100px; }
}

@media (max-width: 1024px) {
  .nx-nav-links { display: none; }
  .nx-burger { display: flex; }
  .nx-root .nx-nav-actions .btn { display: none; }
  .nx-root .nx-nav-actions { margin-left: auto; }
  .nx-hero-grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .nx-hero { padding-top: 54px; }
  .nx-calc { grid-template-columns: minmax(0,1fr); }
  .nx-matrix { grid-template-columns: minmax(0,1fr); }
  .nx-matrix-panel { position: relative; top: 0; }
  .nx-modules, .nx-sec-cards, .nx-steps { grid-template-columns: minmax(0,1fr); }
  .nx-flow { grid-template-columns: repeat(2, 1fr); gap: 26px 10px; padding-bottom: 74px; }
  .nx-flow-line { display: none; }
  .nx-ck-kpi { grid-template-columns: minmax(0,1fr); }
  .nx-ck-score { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 0 0 18px; }
  .nx-ck-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .nx-final-grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .nx-footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; }
  .nx-footer-brand { grid-column: 1 / -1; }
  .nx-scroll-hint { display: flex; }
}

@media (max-width: 720px) {
  .nx-wrap, .nx-nav { padding: 0 18px; }
  .nx-sec { padding: 68px 0; }
  .nx-sec-head { margin-bottom: 38px; }
  .nx-hero-stats { flex-wrap: wrap; gap: 16px 18px; padding: 18px; width: 100%; }
  .nx-stat-div { display: none; }
  .nx-stat { flex: 1 1 40%; }
  .nx-hero-cta { flex-direction: column; align-items: stretch; }
  .nx-btn { width: 100%; }
  .nx-scan-body { grid-template-columns: minmax(0,1fr); justify-items: center; }
  .nx-scan-list { width: 100%; }
  .nx-calc-inputs, .nx-calc-out { padding: 24px 20px; }
  .nx-slider-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nx-ck-top { flex-direction: column; align-items: stretch; }
  .nx-ck-tabs { margin-left: 0; }
  .nx-ck-export { width: 100%; justify-content: center; }
  .nx-ck-row {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "c1 c3" "c2 c2" "c4 c4";
    gap: 9px;
  }
  .nx-ck-c1 { grid-area: c1; } .nx-ck-c2 { grid-area: c2; } .nx-ck-c3 { grid-area: c3; }
  .nx-ck-c4 { grid-area: c4; text-align: left; }
  .nx-ck-kpis { grid-template-columns: minmax(0,1fr); }
  .nx-flow { grid-template-columns: minmax(0,1fr); }
  .nx-final { padding: 30px 22px; }
  .nx-footer-grid { grid-template-columns: minmax(0,1fr); }
  .nx-mp-title { font-size: 1.2rem; }
  .nx-matrix-panel { padding: 24px 20px; }
  .nx-footer-bottom-in { flex-direction: column; align-items: flex-start; }
}

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

/* anchor offset for the sticky header */
.nx-hero, .nx-sec, .nx-ticker { scroll-margin-top: 86px; }
.nx-root .reveal { will-change: opacity, transform; }

/* ---- landing v3: fit & polish overrides ---------------------------------- */
.nx-nav { gap: 14px; }
.nx-nav-links { gap: 2px; min-width: 0; }
.nx-nav-link { padding: 8px 10px; font-size: 0.825rem; }
.nx-h1 { font-size: clamp(2.15rem, 3.45vw, 3.35rem); }
.nx-table th:first-child { width: 32%; }
.nx-table th:last-child, .nx-table td:last-child { min-width: 208px; }
.nx-modules { align-items: stretch; }
.nx-mod { display: flex; flex-direction: column; }
.nx-mod-list { margin-top: auto; }


/* ---- landing v3: nav fit, dark islands in light theme, mobile switches ---- */
.nx-nav { max-width: 1440px; }  /* 24.09.2026: 1360 не хватало на все шесть пунктов и переключатели */
/* Меню главной, которому не хватает места, подгоняет fitLandingNav в app.js: прячет пункты по очереди по факту
   ширины (правила по ширине экрана не знали, что кнопки справа шире у вошедшего и на казахском, — 24.09.2026
   «Безопасность» обрезалась). Все пункты остаются в меню телефона и в подвале. */

/* dark "islands" keep their own text scale even in light theme */
body.light-theme .nx-hero,
body.light-theme .nx-scanner,
body.light-theme .nx-cockpit,
body.light-theme .nx-calc-out,
body.light-theme .nx-matrix-panel,
body.light-theme .nx-final {
  --nx-txt:   #EEF2FB;
  --nx-txt-2: #A7B4CD;
  --nx-txt-3: #7F8CA6;
  --nx-line:   rgba(255,255,255,0.10);
  --nx-line-2: rgba(255,255,255,0.18);
}
body.light-theme .nx-scanner .nx-si-name,
body.light-theme .nx-cockpit .nx-ck-t,
body.light-theme .nx-cockpit .nx-ck-kpi-v,
body.light-theme .nx-matrix-panel .nx-mp-title { color: #fff; }
body.light-theme .nx-matrix-panel .nx-mp-list li { border-bottom-color: rgba(255,255,255,0.07); }
body.light-theme .nx-slider-scale { color: rgba(11,18,32,0.30); }
body.light-theme .nx-cockpit .nx-ck-mp,
body.light-theme .nx-matrix-panel .nx-mp-acc,
body.light-theme .nx-matrix-panel .nx-mp-cat { background: rgba(255,255,255,0.06); }

/* mobile: switchers live in the drawer, header keeps brand + burger only */
.nx-mobile-switches { display: none; gap: 10px; margin-top: 16px; }
@media (max-width: 760px) {
  .nx-root .nx-nav-actions { display: none; }
  .nx-mobile-switches { display: flex; }
  .nx-nav { justify-content: space-between; }
  .nx-burger { margin-left: auto; }
}


/* ==========================================================================
   LANDING v3 — patch 1: real logo, стабильный заголовок, светлая тема, точка в меню
   ========================================================================== */

/* ---------- 1. Логотип: настоящий знак 1Platform + вордмарк ---------------- */
.nx-brand { gap: 11px; }
.nx-brand-mark {
  display: block;
  width: 27px;
  height: 31px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACgCAYAAADTsPQ0AAAFGklEQVR42u3czYtVdRjA8e9z7hnRDDQ3gZsiQShqZaAuYiDEGXU9/gG1l6RM01QmSaIgWrZwE2Jks4nImBlfaoJaSEURtLQXaKFJCUYvc8+5T4t71Lk56CxMHc/3A7OeM+d8/T3n/O7xBveCg1kAMB49tuUDVLxKwTP06JDEbT6aiiGW0OUNpmM3w1kyE9ViP8Xl4j78DIbpMN5ciJHcTs0hStZy5dLE7T8ogrgjv/l/VCzaIx/LDkQyExWj+Rhb8kNKjhOspUuN2r6iZMEYwUTUbMhlrGQXsJuC+5pAgqDjpW3zijKcJUSPiagZyW2s5Cwl42QTSdAhFvEqaSi3YswAM1Exkg8zmsfo8BEFj9Olau4LXEXaO3oyGKNgImrGssNldhC8TIdVzNJrblZLL2ObV5T+mEkmomY0h7nM55S8SbKKWWqCwjHT5lAOZgEZzETF0/kgo/k2wacUrKdLRTpmWj56/rMnMprPErxCh9V0ySYQx0yrV5S5eyKbcx1b8hQlR0hWNzer4Zhp84pybeu9ZlOuoGQf8BwFQ1fvQ3AVaXEo82y9Fxymwxq6cHVPRC0ePXPHzKZ8lNH8gJLjwBr3RFxRGNh6H86lLOUFCvZQsHzO1rtjptUrytyt99HcyjLOMsQhek0kbr23PJSx7FzdE9maD7Elj1JwgoInHDOOnmujZiJqyIItuYPkgFvvhnL9Uw3RYySfouB1OmygguaR1xXE0TPnqWYkd1DyGcEGZqndejeUQReaVwCTJwmg4p8mkPB0G8p8/vRm1VBurv+46ypiKDIUyVBkKDIUGYoMRYZyd0mgguYDRxnKPInUBMEQJYUrpKFcH0iPpMcSOsAfdNlHzQnKJh61PpT+mCkpKCmoeY9gHVNxGPi++WaS9NLeWuUiS6SmoENJSc23JHuZjI+B/uuWyTIvaZtDyeYmdQkdKi5R8RrwFpPxT/NNBx0mYpbN6c1sS0NJoKZsjrPiXbrs53ScA/ovSfXf6vdT6taGMnfMVHxDj5eYjsmrY2aGuv9Ortp5Mzv4NHOJLi/yM+uZjsnmrf6i/y2L4Q1rS1eUwTFTc4ya/ZyMHwbGjFocyuDTzNf02MtUTDlmHD3zjZnfqdjFBTYwFVOOGVeU+Z5mjpIcYCp+dMwYynxPM181TzMnHTOOnuvHTPAbXZ7nVzYyHScdM64o/USSmrL5/z017/A3B/kkfnLMGMq1MQMlSwgqvgT2MBmnr42ZqIzE0UPzNHORip38xUYm4/TAV2HIFYWkYJYJuuzkTPzimDGUQVdWiop9TMd5x4yj58bOxPnmW6gLx4wryo1mTzAevh/iinIz7ocYigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZim6X8p76a5IeUDU/d0o151gM5a4U3M8QJUlJ3LFYS4aALssN5W4z0/zrTY7Q5QtqevTu0Fgt6NGloOa7gWOT2iAyM+6VP2b7BMW5U3fHDfojm+i9P+ZqohauKCs8DVpIKBc9DVpIKOlp0EIejw1FCwolPA26GT/rkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQt1L9f+cWm5Eo2zQAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  box-shadow: none;
  border-radius: 0;
  flex-shrink: 0;
}
body.light-theme .nx-brand-mark {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACgCAYAAADTsPQ0AAAFJklEQVR42u3cz4sWdRzA8fdnZlY0A80OgZdCQSjqZNB6iIUQd1fP6x9Qd0nKNE1lkyQKomMHLyFGtpeIjN01rQ3qIBVF0C37AR20KMGw3Gdmvh2ecXefXNwO6v6Y9wv2vLMzb7+fme8zPsFKcDRlAIxGza50HyWvkPE0NTmJuMtHU9LHKjq8zmTsZyAVTEW53E9xsbwPPwUD5Iw2F2Iw7abiGAVbuHFp4u4fFEEsym++g7Jle+QjKYdITEXJUHqE4fQBBacJttChQm1fUVLGCMFYVPSnNaxnH7CfjHuaQIIg99K2eUUZSAVEzVhUDKZdrOcCBaOkJpIgJ5bxKmkot2PMAFNRMpgeYiidIudDMh6lQ9ncF7iKtHf0pGCEjLGoGEk5V9lD8BI5G5imbm5WCy9jm1eU7phJjEXFUBrgKp9T8AaJDUxTEWSOmTaHcjRlkIKpKHkqPcBQeovgUzKeoENJcsy0fPT8Z09kKD1D8DI5G+mQmkAcM61eUebuiexIWxlOH1NwgsTG5mY1HDNtXlFmt94rtqd1FBwCniWjb+Y+BFeRFocyz9Z7xnFyNtOBmT0RtXj0zB0z29PDDKX3KTgNbHZPxBWFnq33gbSa1TxPxgEy1s7ZenfMtHpFmbv1PpR2soYL9HGMuonErfeWhzKS8pk9kZ3pQYbTSTLOkPGYY8bRMztqxqKClDGc9pA44ta7odz8VEPUDKYnyXiNnH5KaB55XUEcPXOeagbTHgo+I+hnmsqtd0Ppdbl5BTDxOAGUXG8CCU+3ocznmjerhrKw7uOuq4ihyFAkQ5GhyFBkKDIUGcrSkoASmg8cZSjzJFIRBH0UZK6QhnJzIDWJmlXkwF90OETFGYomHrU+lO6YKcgoyKh4l2ArE3Ec+L75ZpLkpb29imWWSEVGTkFBxbckDjIeHwHd1y0Ta7ykbQ4lNTepq8gpuULJq8CbjMf15psOcsZimh3Jm9mWhpKAiqI5zpJ36HCYc3ER6L4k1X2r30+pWxvK3DFT8g01LzIZ4zNjZoqq+06u2nkz2/s0c4UOL/ALTzAZ481b/Vn3WxbDG9aWrii9Y6biFBWHORs/9owZtTiU3qeZr6k5yERMOGYcPfONmT8p2cdl+pmICceMK8p8TzMnSRxhIn5yzBjKfE8zXzVPM2cdM46em8dM8AcdnuM3tjEZZx0zrijdRBIVRfP/eyre5h+O8kn87JgxlNkxAwWrCEq+BA4wHudmx0yURuLooXma+Z2SvfzNNsbjXM9XYcgVhUTGNGN02Mv5+NUxYyi9bqwUJYeYjEuOGUfPrZ2PS823UGeOGVeUW82eYDR8P8QVZSHuhxiKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmK7pZiRf01iRoom5/FUs45FkNZkoJ76aMgURCLFmtBH9BhraEsNVPNv97ECTp8QUVNvUhjNaOmQ0bFdz3HJrVBND8rw8h7GRc3LY0b9E0Xa8Z2u5qoZSvKpq3b13katODNbFVf+8HToAVDiSzu9zRowVBSSsnToAVDWVFPPbpj/KxHhiJDkaHIUGQoMhTJUGQoMhQZigxFhiJDkQxFhiJDkaHIUGQoMhTJUPR//QtYKL9Ia1kTIgAAAABJRU5ErkJggg==");
}
/* в шапке при светлой теме фон белый -> знак с тёмной планкой */
body.light-theme .nx-header .nx-brand-mark,
body.light-theme .nx-footer .nx-brand-mark,
body.light-theme .nx-mobile-menu .nx-brand-mark {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACgCAYAAADTsPQ0AAAFJklEQVR42u3cz4sWdRzA8fdnZlY0A80OgZdCQSjqZNB6iIUQd1fP6x9Qd0nKNE1lkyQKomMHLyFGtpeIjN01rQ3qIBVF0C37AR20KMGw3Gdmvh2ecXefXNwO6v6Y9wv2vLMzb7+fme8zPsFKcDRlAIxGza50HyWvkPE0NTmJuMtHU9LHKjq8zmTsZyAVTEW53E9xsbwPPwUD5Iw2F2Iw7abiGAVbuHFp4u4fFEEsym++g7Jle+QjKYdITEXJUHqE4fQBBacJttChQm1fUVLGCMFYVPSnNaxnH7CfjHuaQIIg99K2eUUZSAVEzVhUDKZdrOcCBaOkJpIgJ5bxKmkot2PMAFNRMpgeYiidIudDMh6lQ9ncF7iKtHf0pGCEjLGoGEk5V9lD8BI5G5imbm5WCy9jm1eU7phJjEXFUBrgKp9T8AaJDUxTEWSOmTaHcjRlkIKpKHkqPcBQeovgUzKeoENJcsy0fPT8Z09kKD1D8DI5G+mQmkAcM61eUebuiexIWxlOH1NwgsTG5mY1HDNtXlFmt94rtqd1FBwCniWjb+Y+BFeRFocyz9Z7xnFyNtOBmT0RtXj0zB0z29PDDKX3KTgNbHZPxBWFnq33gbSa1TxPxgEy1s7ZenfMtHpFmbv1PpR2soYL9HGMuonErfeWhzKS8pk9kZ3pQYbTSTLOkPGYY8bRMztqxqKClDGc9pA44ta7odz8VEPUDKYnyXiNnH5KaB55XUEcPXOeagbTHgo+I+hnmsqtd0Ppdbl5BTDxOAGUXG8CCU+3ocznmjerhrKw7uOuq4ihyFAkQ5GhyFBkKDIUGcrSkoASmg8cZSjzJFIRBH0UZK6QhnJzIDWJmlXkwF90OETFGYomHrU+lO6YKcgoyKh4l2ArE3Ec+L75ZpLkpb29imWWSEVGTkFBxbckDjIeHwHd1y0Ta7ykbQ4lNTepq8gpuULJq8CbjMf15psOcsZimh3Jm9mWhpKAiqI5zpJ36HCYc3ER6L4k1X2r30+pWxvK3DFT8g01LzIZ4zNjZoqq+06u2nkz2/s0c4UOL/ALTzAZ481b/Vn3WxbDG9aWrii9Y6biFBWHORs/9owZtTiU3qeZr6k5yERMOGYcPfONmT8p2cdl+pmICceMK8p8TzMnSRxhIn5yzBjKfE8zXzVPM2cdM46em8dM8AcdnuM3tjEZZx0zrijdRBIVRfP/eyre5h+O8kn87JgxlNkxAwWrCEq+BA4wHudmx0yURuLooXma+Z2SvfzNNsbjXM9XYcgVhUTGNGN02Mv5+NUxYyi9bqwUJYeYjEuOGUfPrZ2PS823UGeOGVeUW82eYDR8P8QVZSHuhxiKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmKDEWGIkORochQJEORochQZCgyFBmKDEUyFBmK7pZiRf01iRoom5/FUs45FkNZkoJ76aMgURCLFmtBH9BhraEsNVPNv97ECTp8QUVNvUhjNaOmQ0bFdz3HJrVBND8rw8h7GRc3LY0b9E0Xa8Z2u5qoZSvKpq3b13katODNbFVf+8HToAVDiSzu9zRowVBSSsnToAVDWVFPPbpj/KxHhiJDkaHIUGQoMhTJUGQoMhQZigxFhiJDkQxFhiJDkaHIUGQoMhTJUPR//QtYKL9Ia1kTIgAAAABJRU5ErkJggg==");
}
/* герой всегда тёмный -> знак с белой планкой */
body.light-theme .nx-hero .nx-brand-mark {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACgCAYAAADTsPQ0AAAFGklEQVR42u3czYtVdRjA8e9z7hnRDDQ3gZsiQShqZaAuYiDEGXU9/gG1l6RM01QmSaIgWrZwE2Jks4nImBlfaoJaSEURtLQXaKFJCUYvc8+5T4t71Lk56CxMHc/3A7OeM+d8/T3n/O7xBveCg1kAMB49tuUDVLxKwTP06JDEbT6aiiGW0OUNpmM3w1kyE9ViP8Xl4j78DIbpMN5ciJHcTs0hStZy5dLE7T8ogrgjv/l/VCzaIx/LDkQyExWj+Rhb8kNKjhOspUuN2r6iZMEYwUTUbMhlrGQXsJuC+5pAgqDjpW3zijKcJUSPiagZyW2s5Cwl42QTSdAhFvEqaSi3YswAM1Exkg8zmsfo8BEFj9Olau4LXEXaO3oyGKNgImrGssNldhC8TIdVzNJrblZLL2ObV5T+mEkmomY0h7nM55S8SbKKWWqCwjHT5lAOZgEZzETF0/kgo/k2wacUrKdLRTpmWj56/rMnMprPErxCh9V0ySYQx0yrV5S5eyKbcx1b8hQlR0hWNzer4Zhp84pybeu9ZlOuoGQf8BwFQ1fvQ3AVaXEo82y9Fxymwxq6cHVPRC0ePXPHzKZ8lNH8gJLjwBr3RFxRGNh6H86lLOUFCvZQsHzO1rtjptUrytyt99HcyjLOMsQhek0kbr23PJSx7FzdE9maD7Elj1JwgoInHDOOnmujZiJqyIItuYPkgFvvhnL9Uw3RYySfouB1OmygguaR1xXE0TPnqWYkd1DyGcEGZqndejeUQReaVwCTJwmg4p8mkPB0G8p8/vRm1VBurv+46ypiKDIUyVBkKDIUGYoMRYZyd0mgguYDRxnKPInUBMEQJYUrpKFcH0iPpMcSOsAfdNlHzQnKJh61PpT+mCkpKCmoeY9gHVNxGPi++WaS9NLeWuUiS6SmoENJSc23JHuZjI+B/uuWyTIvaZtDyeYmdQkdKi5R8RrwFpPxT/NNBx0mYpbN6c1sS0NJoKZsjrPiXbrs53ScA/ovSfXf6vdT6taGMnfMVHxDj5eYjsmrY2aGuv9Ortp5Mzv4NHOJLi/yM+uZjsnmrf6i/y2L4Q1rS1eUwTFTc4ya/ZyMHwbGjFocyuDTzNf02MtUTDlmHD3zjZnfqdjFBTYwFVOOGVeU+Z5mjpIcYCp+dMwYynxPM181TzMnHTOOnuvHTPAbXZ7nVzYyHScdM64o/USSmrL5/z017/A3B/kkfnLMGMq1MQMlSwgqvgT2MBmnr42ZqIzE0UPzNHORip38xUYm4/TAV2HIFYWkYJYJuuzkTPzimDGUQVdWiop9TMd5x4yj58bOxPnmW6gLx4wryo1mTzAevh/iinIz7ocYigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQZim6X8p76a5IeUDU/d0o151gM5a4U3M8QJUlJ3LFYS4aALssN5W4z0/zrTY7Q5QtqevTu0Fgt6NGloOa7gWOT2iAyM+6VP2b7BMW5U3fHDfojm+i9P+ZqohauKCs8DVpIKBc9DVpIKOlp0EIejw1FCwolPA26GT/rkaHIUGQoMhQZigxFMhQZigxFhiJDkaHIUCRDkaHIUGQoMhQZigxFMhQt1L9f+cWm5Eo2zQAAAABJRU5ErkJggg==");
}
.nx-brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.28rem;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #FFFFFF;
}
body.light-theme .nx-header .nx-brand-name,
body.light-theme .nx-footer .nx-brand-name { color: #1F323A; }
.nx-brand-tag { margin-top: -12px; }
.nx-footer .nx-brand-mark { width: 25px; height: 29px; }

/* ---------- 2. Заголовок: место под фразу зарезервировано ------------------ */
/* Точную высоту (по самой высокой из фраз для текущей ширины и языка)
   ставит JS в index.html как inline min-height. Значение ниже — страховка
   на случай, если JS не отработал: 2 строки при line-height 1.06 — это
   максимум, который занимает любая из пяти фраз на любой ширине,
   и в ru, и в kz. Инлайновый min-height от JS всегда его перебивает. */
.nx-h1-rotor {
  position: relative;
  align-items: flex-start;
  min-height: 2.12em;
}
.nx-rot-cursor { align-self: flex-start; margin-top: 0.16em; }
.nx-rot-probe { position: absolute !important; }

/* ---------- 3. Светлая тема: активная «пилюля» количества баз -------------- */
body.light-theme .nx-pill.is-active {
  color: #FFFFFF;
  background: linear-gradient(135deg, #2E6BFF 0%, #5340E8 100%);
  border-color: rgba(46, 107, 255, 0.55);
  box-shadow: 0 10px 22px -12px rgba(46, 107, 255, 0.85);
}
body.light-theme .nx-pill.is-active:hover { color: #FFFFFF; }

/* ---------- 4. Точка у «Калькулятор риска»: пульсирует свечение, не размер -- */
.nx-nav-link-hot { padding-left: 23px; }
.nx-nav-link-hot::before {
  left: 6px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  animation: nxDotGlow 2.1s ease-in-out infinite;
}
@keyframes nxDotGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.50), 0 0 7px rgba(255, 77, 109, 0.85);
    opacity: 1;
  }
  55% {
    box-shadow: 0 0 0 6px rgba(255, 77, 109, 0), 0 0 13px rgba(255, 77, 109, 1);
    opacity: 0.9;
  }
}

/* logo proportions matched to the auth-page badge (mark ≈ 1.15× cap height) */
.nx-brand-mark { width: 23px; height: 26.5px; }
.nx-footer .nx-brand-mark { width: 22px; height: 25px; }
.nx-brand-tag { margin-top: -10px; }

/* каретка едет вместе с последней строкой фразы, а не висит справа сверху */
.nx-h1-rotor { display: block; }
.nx-rot-cursor { display: none !important; }
.nx-caret {
  display: inline-block;
  width: 3px;
  height: 0.78em;
  margin-left: 7px;
  vertical-align: -0.02em;
  border-radius: 2px;
  /* Курсор моргает по-прежнему, но не светится */
  background: #6FA3C0;
  animation: nxBlink 1.05s steps(2, start) infinite;
  -webkit-text-fill-color: initial;
}

/* ==========================================================================
   КАБИНЕТ КЛИЕНТА v2 (добавлено 21.08.2026)
   Стили для переписанного кабинета: модальные окна, карточки баз, панель
   агента, карточка отчёта. Префикс .pf- и локальные классы; старые правила
   лендинга и авторизации не затрагиваются.
   ========================================================================== */

/* ---------------------------------------------------------- модальные окна */
.pf-modal-back {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  /* Без backdrop-filter. Размытие подложки заставляет браузер держать
     отдельный слой и пересчитывать его на каждый кадр всего, что под ним
     (анимированные шары лендинга). Когда сверху проезжает анимация
     скачивания файла, слой не успевает перерисоваться — и на странице
     остаётся тёмный след. Плотная подложка выглядит так же, а следов нет. */
  background: rgba(4, 8, 16, 0.86);
  isolation: isolate;
  will-change: opacity;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
/* Окно, которое открывается поверх другого окна (заявка на помощь из мастера).
   Без своего уровня оно тонет под тем, из которого его вызвали. */
.pf-modal-back.is-top { z-index: 500; }
/* Третий уровень: реквизиты компании поверх окна заказа (согласие с ценой без реквизитов). Окно заказа само
   на уровне is-top и стоит в конце страницы — при равном уровне оно закрывало бы форму. */
.pf-modal-back.is-over-top { z-index: 510; }

/* Ссылка «Не получается?» в подвале мастера: прижата влево, кнопки справа */
.wiz-help {
  margin-right: auto;
  align-self: center;
  font-size: .9rem;
  color: var(--text-secondary, #64748b);
  text-decoration: underline;
  white-space: nowrap;
}
.wiz-help:hover { color: var(--brand, #2563eb); }

/* ---------------------------------------------------------------- статусы баз
   Одинаковые серые плашки приходилось вычитывать глазами. Теперь у состояния
   есть знак, цвет и кромка карточки: список баз читается взглядом. */
.db-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 7px;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600; line-height: 1.2;
  border: 1px solid transparent;
  /* Раньше строка не переносилась и вылезала за карточку: в мастере оплаты
     «Проверка не прошла — аудит не запустится» уходило за край формы. */
  white-space: normal; text-align: left;
}
.db-status-mark {
  flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: .72rem; font-weight: 700;
  background: currentColor;
}
.db-status-mark::before { content: attr(data-m); }
.db-status .db-status-mark { color: inherit; }
.db-status-mark { color: #fff !important; }

/* «Всё в порядке» — спокойное. Цвет на карточке значит «посмотри сюда», а
   смотреть тут не на что: зелёным остаётся оплаченная подписка, и зелёное
   пятно на карточке одно, а не три. Галочка при этом зелёная — знак остался. */
.db-status.is-ok    { color: #475569; background: rgba(100,116,139,.10); border-color: rgba(100,116,139,.22); }
.db-status.is-warn  { color: #B45309; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }
.db-status.is-bad   { color: #B91C1C; background: rgba(220,38,38,.12);  border-color: rgba(220,38,38,.32); }
.db-status.is-none  { color: #64748B; background: rgba(100,116,139,.12); border-color: rgba(100,116,139,.28); }
.db-status.is-run   { color: #1D4ED8; background: rgba(37,99,235,.12);  border-color: rgba(37,99,235,.32); }

.db-status.is-ok   .db-status-mark { background: #059669; }
.db-status.is-warn .db-status-mark { background: #B45309; }
.db-status.is-bad  .db-status-mark { background: #B91C1C; }
.db-status.is-none .db-status-mark { background: #64748B; }

/* Бегущая точка: видно, что работа идёт прямо сейчас */
.db-status-dot {
  width: 10px; height: 10px; margin-left: 4px; border-radius: 50%;
  background: currentColor; position: relative;
}
.db-status-dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid currentColor;
  opacity: .55; animation: dbPulse 1.4s ease-out infinite;
}
@keyframes dbPulse {
  from { transform: scale(.6); opacity: .55; }
  to   { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .db-status-dot::after { animation: none; }
}

/* Кромка карточки в цвет состояния — по ней база находится в списке сразу */
.db-card { position: relative; overflow: hidden; }
.db-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: transparent;
}
.db-card[data-state="ok"]::before   { background: rgba(100,116,139,.28); }
.db-card[data-state="warn"]::before { background: linear-gradient(#FBBF24, #B45309); }
.db-card[data-state="bad"]::before  { background: linear-gradient(#F87171, #B91C1C); }
.db-card[data-state="run"]::before  { background: linear-gradient(#60A5FA, #1D4ED8); }
.db-card[data-state="none"]::before { background: rgba(100,116,139,.45); }

/* Тёмная тема: те же цвета, но светлее — на тёмном фоне тёмный текст не виден */
body:not(.light-theme) .db-status.is-ok   { color: #CBD5E1; }
body:not(.light-theme) .db-status.is-warn { color: #FCD34D; }
body:not(.light-theme) .db-status.is-bad  { color: #FCA5A5; }
body:not(.light-theme) .db-status.is-none { color: #94A3B8; }
body:not(.light-theme) .db-status.is-run  { color: #93C5FD; }
body:not(.light-theme) .db-status.is-ok   .db-status-mark { background: #059669; }
body:not(.light-theme) .db-status.is-warn .db-status-mark { background: #B45309; }
body:not(.light-theme) .db-status.is-bad  .db-status-mark { background: #B91C1C; }
body:not(.light-theme) .db-status.is-none .db-status-mark { background: #475569; }

/* Деньги на карточке: подписка, ожидание оплаты, отсутствие подписки.
   Отличаются только цветом — рядом уже стоит статус проверки со своим
   значком, и второй набор значков рябил бы в глазах. */
.db-money {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600; line-height: 1.35;
  border: 1px solid transparent;
  /* Раньше строка не переносилась и на узкой карточке уезжала за край:
     «осталось 181 дн.» просто обрезалось. */
  white-space: normal;
}
/* Оплачено — зелёный, ожидание — синий (ждём не мы, а деньги; тревоги тут
   нет), без подписки — малиновый: заметно, но не путается с красным
   «проверка не прошла» рядом. */
.db-money.is-paid { color: #027A48; background: #ECFDF3; border-color: #ABEFC6; }
.db-money.is-wait { color: #B54708; background: #FFFAEB; border-color: #FEDF89; }
.db-money.is-none { color: #B42318; background: #FEF3F2; border-color: #FECDCA; }

/* Тёмная тема: светлый фон тут не годится — берём тот же цвет полупрозрачно */
body:not(.light-theme) .db-money.is-paid { color: #6CE9A6; background: rgba(2,122,72,.20);  border-color: rgba(108,233,166,.32); }
body:not(.light-theme) .db-money.is-wait { color: #FEC84B; background: rgba(181,71,8,.22);  border-color: rgba(254,200,75,.30); }
body:not(.light-theme) .db-money.is-none { color: #FDA29B; background: rgba(180,35,24,.20); border-color: rgba(253,162,155,.30); }

/* Пометка «на сервере версия новее» в карточке компьютера */
.ver-new {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: .72rem; font-weight: 600;
  color: #B54708; background: #FFFAEB; border: 1px solid #FEDF89;
}
body:not(.light-theme) .ver-new {
  color: #FEC84B; background: rgba(181,71,8,.22); border-color: rgba(254,200,75,.30);
}

/* Релиз конфигурации рядом с названием */
.db-release {
  display: inline-block; margin-left: 6px;
  padding: 1px 7px; border-radius: 6px;
  font-size: .72rem; font-weight: 600;
  background: rgba(100,116,139,.16); color: var(--text-secondary, #64748b);
}

/* «ИЛИ» между ником и телефоном в заявке: два поля — один контакт */
.req-or {
  margin: -4px 0 10px;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--text-muted, #64748b);
}

/* Распорка в подвале мастера: слева выход из окна, справа движение по шагам */
.wiz-foot-gap { flex: 1 1 auto; }

/* Переключатель вместо галки: галка в ряду полей теряется, а переключатель
   сразу читается как «включено / выключено». */
.pf-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.pf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pf-switch .track {
  flex: none;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: var(--border-color, #cbd5e1);
  position: relative;
  transition: background .15s ease;
}
.pf-switch .track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.pf-switch input:checked + .track { background: var(--brand, #2563eb); }
.pf-switch input:checked + .track::after { transform: translateX(18px); }
.pf-switch input:focus-visible + .track { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }

.pf-modal {
  width: 100%;
  max-width: 460px;
  background: var(--bg-card, #141C2E);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  animation: pfModalIn 0.22s cubic-bezier(.16, .84, .34, 1);
}
.pf-modal-wide { max-width: 620px; }
@keyframes pfModalIn { from { opacity: 0; transform: translateY(14px); } }
.pf-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pf-modal-head h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.06rem; font-weight: 800; letter-spacing: -0.02em; margin: 0;
}
.pf-modal-x {
  margin-left: auto; width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px; cursor: pointer; font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: inherit;
}
.pf-modal-x:hover { background: rgba(255, 255, 255, 0.12); }
.pf-modal-body { padding: 18px 20px; }
.pf-modal-foot {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Подвал мастера баз — две строки. Сверху то, что уводит из мастера,
   снизу движение по шагам: «Отмена» влево, остальное вправо. */
.wiz-foot { flex-direction: column; align-items: stretch; gap: 12px; }
.wiz-foot-aux { display: flex; align-items: center; gap: 12px; }
.wiz-foot-nav { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.wiz-foot-nav .btn { white-space: nowrap; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-hint { font-size: 0.76rem; line-height: 1.5; color: var(--text-muted, #64748B); margin: 6px 0 0; }
.check-group { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
.copy-row { display: flex; gap: 8px; }
.copy-row .form-input { flex: 1 1 auto; }

body.light-theme .pf-modal { background: #fff; border-color: rgba(11, 18, 32, 0.12); }
body.light-theme .pf-modal-head, body.light-theme .pf-modal-foot { border-color: rgba(11, 18, 32, 0.09); }
body.light-theme .pf-modal-x { background: rgba(11, 18, 32, 0.05); border-color: rgba(11, 18, 32, 0.12); }

/* --------------------------------------------------------------- пилюли */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: 20px; border: 1px solid transparent;
}
.pill-green  { color: #6EE7C0; background: rgba(16, 217, 160, 0.12); border-color: rgba(16, 217, 160, 0.3); }
.pill-amber  { color: #FFD08A; background: rgba(255, 176, 32, 0.12); border-color: rgba(255, 176, 32, 0.32); }
.pill-red    { color: #FF9DAF; background: rgba(255, 77, 109, 0.12); border-color: rgba(255, 77, 109, 0.32); }
.pill-blue   { color: #A9C6FF; background: rgba(46, 107, 255, 0.14); border-color: rgba(46, 107, 255, 0.34); }
body.light-theme .pill-green { color: #07775A; }
body.light-theme .pill-amber { color: #9A6206; }
body.light-theme .pill-red   { color: #C42248; }
body.light-theme .pill-blue  { color: #2049D6; }

.pill-spin {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: pfSpin 0.8s linear infinite;
}
@keyframes pfSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pill-spin { animation: none; } }

.tag {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  padding: 2px 8px; border-radius: 6px; margin: 0 4px 4px 0;
  border: 1px solid transparent;
}
.tag-violet { color: #C7B4FF; background: rgba(167, 139, 250, 0.13); border-color: rgba(167, 139, 250, 0.3); }
.tag-cyan   { color: #8FE6F5; background: rgba(34, 211, 238, 0.12); border-color: rgba(34, 211, 238, 0.3); }
.tag-amber  { color: #FFD08A; background: rgba(255, 176, 32, 0.12); border-color: rgba(255, 176, 32, 0.3); }

/* --------------------------------------------------------- карточки баз */
.db-cards-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.db-card-header { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.db-path { font-size: 0.76rem; margin: 6px 0 10px; color: var(--text-muted, #64748B); }
.db-path code { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: #A9C6FF; word-break: break-all; }
.db-tags { margin: 10px 0 0; }
.db-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
/* «Скачать отчёт Excel» длиннее прежнего «Отчёт Excel» и уводило ряд
   кнопок на вторую строку. Ужимаем поля кнопок, а не название. */
.db-actions .btn-sm { padding: 0.4rem 0.58rem; }
.empty-card { grid-column: 1 / -1; text-align: center; padding: 2.4rem 1.4rem; }
.empty-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.empty-card p { max-width: 46ch; margin: 0 auto 1rem; }

/* --------------------------------------------------------- сводка рисков */
.risk-banner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 12px; margin-bottom: 16px;
  border: 1px solid rgba(255, 77, 109, 0.28); background: rgba(255, 77, 109, 0.08);
}
.risk-banner.is-clean { border-color: rgba(16, 217, 160, 0.28); background: rgba(16, 217, 160, 0.08); }
.risk-banner-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.risk-banner-value {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.risk-banner-note { margin-left: auto; font-size: 0.8rem; opacity: 0.8; }
.table-scroll { overflow-x: auto; }
.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.small { font-size: 0.75rem; }

/* ------------------------------------------------------------ уведомления */
.notice {
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid rgba(46, 107, 255, 0.3); background: rgba(46, 107, 255, 0.08);
}
.notice.notice-amber { border-color: rgba(255, 176, 32, 0.32); background: rgba(255, 176, 32, 0.08); }
.notice.notice-red   { border-color: rgba(255, 77, 109, 0.32); background: rgba(255, 77, 109, 0.08); }
.notice.notice-green { border-color: rgba(16, 217, 160, 0.34); background: rgba(16, 217, 160, 0.08); }
.notice .btn + .btn { margin-left: 8px; }
/* Заголовок уведомления — только прямой <b>. Иначе <b> внутри абзаца
   становится блоком и разрывает фразу пополам. */
.notice > b { display: block; font-size: 0.92rem; margin-bottom: 4px; }
.notice p b { font-weight: 700; }
.notice p { font-size: 0.83rem; line-height: 1.55; margin: 0 0 8px; opacity: 0.88; }
.notice p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- аудит */
.audit-run-row { margin-bottom: 4px; }
.audit-run-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.audit-run-controls .form-input { max-width: 340px; }

/* -------------------------------------------------------- агент на ПК */
.agent-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.agent-card {
  background: var(--bg-card, #141C2E);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px; padding: 18px;
}
.agent-card-primary { border-color: rgba(46, 107, 255, 0.34); background: rgba(46, 107, 255, 0.07); }
.agent-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.agent-card-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.agent-card-rows { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; }
.agent-card-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.agent-card-rows span { color: var(--text-muted, #64748B); }
.agent-card-rows code { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; }
.agent-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
body.light-theme .agent-card { background: #fff; border-color: rgba(11, 18, 32, 0.1); }

.code-box {
  text-align: center; padding: 18px; border-radius: 12px; margin-bottom: 16px;
  border: 1px dashed rgba(46, 107, 255, 0.45); background: rgba(46, 107, 255, 0.08);
}
.code-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.code-value {
  font-family: 'JetBrains Mono', monospace; font-size: 1.9rem; font-weight: 700;
  letter-spacing: 0.14em; margin: 8px 0 4px;
}
.code-note { font-size: 0.75rem; opacity: 0.7; margin-bottom: 10px; }
.steps-list { padding-left: 1.2rem; font-size: 0.85rem; line-height: 1.65; }
.steps-list li { margin-bottom: 6px; }

.check-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.check-row {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
}
.check-row.check-blocker { border-color: rgba(255, 77, 109, 0.34); background: rgba(255, 77, 109, 0.07); }
.check-row.check-warning { border-color: rgba(255, 176, 32, 0.3); background: rgba(255, 176, 32, 0.06); }
.check-icon { font-size: 0.95rem; line-height: 1.4; }
.check-fix { font-size: 0.76rem; margin-top: 5px; color: #FFD08A; }
body.light-theme .check-row { background: #F5F7FB; border-color: rgba(11, 18, 32, 0.1); }
body.light-theme .check-fix { color: #9A6206; }

/* ---------------------------------------------------- карточка отчёта */
.pf-drawer-back {
  position: fixed; inset: 0; z-index: 390;
  background: rgba(3, 6, 12, 0.84);
  isolation: isolate; will-change: opacity;
  opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.pf-drawer-back.is-open { opacity: 1; pointer-events: auto; }
.pf-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 391;
  width: min(540px, 100%);
  background: var(--bg-secondary, #0F1623);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  /* Тень — только у открытой панели: у закрытой, стоящей сразу за краем окна, она ложилась тёмной полосой
     на правый край любого экрана (найдено 25.09.2026 на новом экране входа). */
  box-shadow: none;
  transform: translateX(102%);
  transition: transform 0.28s cubic-bezier(.16, .84, .34, 1), box-shadow 0.28s;
  display: flex; flex-direction: column;
}
.pf-drawer.is-open { transform: none; box-shadow: -30px 0 80px -20px rgba(0, 0, 0, 0.9); }
/* Отчёт шире прочих панелей: в 540 пикселей таблица разделов не влезает.
   Только ширина: остальное берётся из общего правила выше, иначе
   селектор по идентификатору перебьёт открытое состояние и панель
   останется за краем экрана. */
#reportDrawer { width: min(1000px, 100%); }
.pf-drawer-head {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px 20px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pf-drawer-title { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.05rem; font-weight: 800; }
.pf-drawer-sub { font-size: 0.78rem; opacity: 0.7; margin-top: 3px; }
.pf-drawer-body { padding: 18px 20px 32px; overflow-y: auto; }
body.light-theme .pf-drawer { background: #fff; border-color: rgba(11, 18, 32, 0.12); }

.rep-block {
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 9px; background: rgba(255, 255, 255, 0.02);
}
.rep-block.is-warn { border-color: rgba(255, 176, 32, 0.3); background: rgba(255, 176, 32, 0.06); }
.rep-block.is-err  { border-color: rgba(255, 77, 109, 0.32); background: rgba(255, 77, 109, 0.07); }
.rep-block-head { display: flex; justify-content: space-between; align-items: baseline;
                  gap: 12px; font-size: 0.88rem; font-weight: 700; }
.rep-block-head > b { white-space: nowrap; flex: 0 0 auto; }
.rep-block-body { font-size: 0.79rem; line-height: 1.55; margin-top: 6px; }
body.light-theme .rep-block { background: #F7F9FC; border-color: rgba(11, 18, 32, 0.1); }

.text-red { color: #FF9DAF; }
.text-green { color: #6EE7C0; }
body.light-theme .text-red { color: #C42248; }
body.light-theme .text-green { color: #07775A; }

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .pf-modal-back { padding: 3vh 10px; }
  .risk-banner-note { margin-left: 0; }
  .code-value { font-size: 1.5rem; letter-spacing: 0.1em; }
}

/* ------------------------------------------------- кабинет на телефоне -----
   Шапка кабинета и полоса вкладок были свёрстаны под ширину ноутбука: на
   телефоне страница уезжала по горизонтали примерно на 500 px. Бухгалтеры
   заходят с телефона, поэтому правим здесь, в файле, который деплоится. */
@media (max-width: 720px) {
  .dash-navbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }
  .dash-nav-left,
  .dash-nav-right {
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }
  .dash-nav-right { justify-content: flex-start; }
  .company-dropdown-wrapper { flex: 1 1 100%; min-width: 0; }
  .company-select { width: 100%; max-width: 100%; }
  .brand-badge-dash .brand-badge-title { font-size: 1rem; }

  .dash-tabs-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 12px;
    padding-right: 12px;
  }
  .dash-tabs-bar::-webkit-scrollbar { display: none; }
  .dash-tabs-bar .dash-tab { white-space: nowrap; flex: 0 0 auto; }

  .dash-main { padding: 14px 12px 40px; }
  .section-header { flex-wrap: wrap; gap: 10px; }
  .metrics-row-cards { grid-template-columns: 1fr 1fr; }
  .db-cards-grid { grid-template-columns: 1fr; }
  .data-table { min-width: 560px; }
  .card { overflow-x: auto; }
}

/* ==========================================================================
   ОБОЛОЧКА КАБИНЕТА v3
   Разметка кабинета v3 использует классы .dash-navbar / .dash-main /
   .db-card / .metrics-row-cards / .text-muted, которых нет ни в style.css
   (там остались .dash-nav и .dash-container от предыдущей версии), ни здесь.
   Из-за этого кабинет открывался вообще без вёрстки. Ниже — недостающие
   правила в той же визуальной системе, что и остальной продукт.
   ========================================================================== */

.dashboard-screen { min-height: 100vh; background: var(--bg-primary); }

.dash-navbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 1.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; z-index: 60;
}
.dash-nav-left { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.dash-nav-right { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.company-dropdown-wrapper { min-width: 0; }
/* Бейдж в шапке кабинета маленький: значок 22px и текст 1rem. Общий
   зазор 12-22px от большого логотипа делал между ними дыру шире самого
   значка — читалось как два отдельных элемента. */
.brand-badge-dash { padding: 2px 6px; box-shadow: none; animation: none; margin: 0; gap: 5px; }
.brand-badge-dash .brand-badge-icon { height: 22px; width: auto; }
.brand-badge-dash .brand-badge-title { font-size: 1.06rem; }

.dash-main { max-width: 1320px; margin: 0 auto; padding: 1.4rem 1.5rem 3rem; width: 100%; }
.dash-tab-content { animation: pfFade 0.18s ease; }
@keyframes pfFade { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .dash-tab-content { animation: none; } }

.metrics-row-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.metric-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.metric-val {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em;
  margin-top: 6px; font-variant-numeric: tabular-nums;
}
.text-yellow { color: var(--color-yellow); }

/* --- карточка базы 1С --- */
.db-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 18px 18px;
  transition: border-color 0.16s, transform 0.16s;
}
.db-card:hover { border-color: rgba(46, 107, 255, 0.34); transform: translateY(-1px); }
body.light-theme .db-card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
body.light-theme .db-card:hover { box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 10px 26px rgba(46, 107, 255, 0.10); }

/* Подписка на карточке базы: «Тариф: …» своим цветом, под ним блоки, срок, остаток.
   Цвет тарифа: «Исправление» — фиолетовый, «Диагностика» — синий, пробный день — бирюзовый. */
.db-plan {
  --plan-accent: #475569; --plan-bg: rgba(100, 116, 139, 0.07); --plan-border: rgba(100, 116, 139, 0.2);
  margin-top: 12px; padding: 9px 12px 10px;
  border-radius: 12px; border: 1px solid var(--plan-border); background: var(--plan-bg);
}
.db-plan.is-fix     { --plan-accent: #6d28d9; --plan-bg: rgba(124, 58, 237, 0.07); --plan-border: rgba(124, 58, 237, 0.24); }
.db-plan.is-control { --plan-accent: #1d4ed8; --plan-bg: rgba(37, 99, 235, 0.06); --plan-border: rgba(37, 99, 235, 0.22); }
.db-plan.is-trial   { --plan-accent: #0f766e; --plan-bg: rgba(13, 148, 136, 0.07); --plan-border: rgba(13, 148, 136, 0.24); }
.db-plan.is-none    { --plan-accent: #b42318; --plan-bg: rgba(220, 38, 38, 0.05); --plan-border: rgba(220, 38, 38, 0.2); }
body:not(.light-theme) .db-plan.is-fix     { --plan-accent: #c4b5fd; --plan-bg: rgba(139, 92, 246, 0.12); --plan-border: rgba(139, 92, 246, 0.34); }
body:not(.light-theme) .db-plan.is-control { --plan-accent: #93c5fd; --plan-bg: rgba(59, 130, 246, 0.12); --plan-border: rgba(59, 130, 246, 0.32); }
body:not(.light-theme) .db-plan.is-trial   { --plan-accent: #5eead4; --plan-bg: rgba(20, 184, 166, 0.12); --plan-border: rgba(20, 184, 166, 0.32); }
body:not(.light-theme) .db-plan.is-none    { --plan-accent: #fca5a5; --plan-bg: rgba(248, 113, 113, 0.10); --plan-border: rgba(248, 113, 113, 0.3); }
.db-plan-top { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.db-plan-label { color: var(--text-muted); }
.db-plan-name {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--plan-accent);
}
.db-plan-name::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--plan-accent); box-shadow: 0 0 0 3px var(--plan-border);
}
.db-plan-meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 5px; font-size: 0.76rem; color: var(--text-secondary); }
.db-plan-meta > span { white-space: nowrap; }
/* Разделитель — в конце кусочка, а не в начале следующего: при переносе строка начинается чисто. */
.db-plan-meta > span:not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--text-muted); }
.db-plan-meta .is-part { color: #b45309; font-weight: 600; }
body:not(.light-theme) .db-plan-meta .is-part { color: #fbbf24; }
.db-plan-left { font-weight: 600; color: var(--text-primary); }
.db-plan-left.is-soon { color: #b91c1c; }

/* Оплата: выбор базы — в том же стиле, что карточки баз; выбранная — с отметкой в углу. */
.wiz-db { position: relative; gap: .55rem; padding: 1rem 1.05rem 1.05rem; border-radius: 14px;
          transition: border-color .16s, box-shadow .16s, transform .16s; }
.wiz-db:hover { transform: translateY(-1px); }
.wiz-db > b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1rem; font-weight: 800;
              letter-spacing: -0.015em; padding-right: 30px; }
.wiz-db .db-plan, .bill-base > .db-plan { width: 100%; box-sizing: border-box; }
.wiz-db .db-plan { margin-top: 0; }
.bill-base > .db-plan { margin: 10px 0 4px; }
.wiz-db::after {
  content: ""; position: absolute; top: 13px; right: 13px; width: 20px; height: 20px; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--border-color); background: var(--bg-card);
}
.wiz-db.is-on::after {
  content: "✓"; display: flex; align-items: center; justify-content: center;
  border-color: var(--accent-blue); background: var(--accent-blue); color: #fff; font-size: .7rem; font-weight: 800;
}
body.light-theme .wiz-db { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
body.light-theme .wiz-db.is-on { box-shadow: 0 0 0 3px var(--accent-glow), 0 6px 18px rgba(46, 107, 255, 0.10); }
body:not(.light-theme) .db-plan-left.is-soon { color: #fca5a5; }
.db-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.02rem; font-weight: 800; letter-spacing: -0.015em;
}
.db-config { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }
.db-prof-note { font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary); margin: 14px 22px 0; }
@media (max-width: 560px) { .db-prof-note { margin: 12px 14px 0; } }
.db-meta-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.79rem; padding: 5px 0;
  border-bottom: 1px dashed var(--border-color);
}
.db-meta-row:last-of-type { border-bottom: none; }
.db-meta-row span { color: var(--text-muted); }

/* --- Кружок с вопросом и пояснение по наведению (qHint в app.js) ---
   Карточка базы с overflow: hidden, поэтому подсказка всплывает вверх и влево
   от значка, внутрь карточки. На телефоне открывается по нажатию: значок в фокусе. */
.db-meta-row .qhint {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; border-radius: 50%;
  border: 1px solid var(--text-muted); color: var(--text-muted);
  font-size: 10px; font-weight: 700; line-height: 1; cursor: help; vertical-align: 1px;
}
.db-meta-row .qhint:hover, .db-meta-row .qhint:focus { color: var(--text-primary); border-color: currentColor; outline: none; }
.db-meta-row .qhint .qhint-tip {
  position: absolute; right: -6px; bottom: calc(100% + 8px); z-index: 20;
  width: max-content; max-width: 240px; padding: 8px 10px; border-radius: 8px;
  background: #1E293B; color: #F1F5F9; border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 0.74rem; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
}
.db-meta-row .qhint:hover .qhint-tip,
.db-meta-row .qhint:focus .qhint-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* --- мелочи, которых не хватало --- */
.text-muted { color: var(--text-muted); }
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.79rem; font-weight: 600;
  color: var(--accent-blue); text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }
body.light-theme .btn-link { color: #1D4ED8; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.78rem; }

.dash-tabs-bar { flex-wrap: wrap; }
.dash-tab[disabled] { opacity: 0.5; cursor: default; }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* Плитки метрик в обзоре руководителя: в style.css у .metric-card нет фона,
   поэтому четыре цифры висели в воздухе. */
.metrics-row-cards .metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 15px 16px;
}

/* ------------------------------------------- выбор базы из найденных ------
   Клиент не вводит путь руками: агент читает список баз, который ведёт сама
   1С, и клиент выбирает привычное название базы. */
.pick-base { margin-bottom: 16px; }
.pick-base-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.pick-base-head b { font-size: 0.9rem; }
.pick-list {
  display: flex; flex-direction: column; gap: 6px;
  /* Список прокручиваемый. Высота с запасом, чтобы обрез приходился на середину
     строки — так видно, что список продолжается, а не обрублен вёрсткой. */
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--border-color); border-radius: 10px; padding: 8px;
}
.pick-list::-webkit-scrollbar { width: 9px; }
.pick-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18); border-radius: 9px;
}
.pick-item {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; text-align: left; width: 100%;
  background: rgba(255,255,255,0.02); font-family: inherit; color: inherit;
}
.pick-item:hover { background: rgba(46,107,255,0.09); border-color: rgba(46,107,255,0.3); }
.pick-item.is-picked { background: rgba(46,107,255,0.14); border-color: rgba(46,107,255,0.5); }
.pick-item[disabled] { opacity: 0.55; cursor: not-allowed; }
.pick-item .mark { font-size: 0.9rem; line-height: 1.3; }
.pick-item .nm { font-size: 0.88rem; font-weight: 700; }
.pick-item .meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; word-break: break-all; }
.pick-item .warn { font-size: 0.73rem; color: #FFD08A; margin-top: 3px; }
body.light-theme .pick-item { background: #F7F9FC; }
body.light-theme .pick-item .warn { color: #9A6206; }

/* --- отступы в форме добавления базы: чекбокс и заголовок услуг прилипали --- */
#modalAddDb .checkbox-label { display: flex; gap: 9px; margin: 4px 0 14px; }
/* Внутри .form-row поля стоят парой в одну строку — вертикальный отступ
   добавляем только между самостоятельными группами, иначе «Пароль 1С»
   съезжает ниже «Пользователя 1С». */
#modalAddDb .pf-modal-body > .form-group + .form-group { margin-top: 14px; }

/* ------------------------------------- пошаговая форма подключения базы --- */
.wiz-steps {
  display: flex; gap: 8px; padding: 14px 22px 0;
  border-bottom: 1px solid var(--border-color);
}
.wiz-step {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 6px 12px; font-family: inherit; font-size: 0.86rem;
  color: var(--text-secondary); transition: color .15s, border-color .15s;
}
.wiz-step:hover { color: var(--text-primary); }
.wiz-step.is-active { color: var(--text-primary); border-bottom-color: #2E6BFF; }
.wiz-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 0.76rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.08); color: var(--text-secondary);
}
.wiz-step.is-active .wiz-num { background: #2E6BFF; color: #fff; }
.wiz-step.is-done .wiz-num { background: rgba(16, 217, 160, 0.22); color: #6EE7C0; }
.wiz-step.is-done .wiz-num::after { content: '✓'; }
.wiz-step.is-done .wiz-num { font-size: 0; }
.wiz-step.is-done .wiz-num::after { font-size: 0.8rem; }
.wiz-pane { display: none; }
.wiz-pane.is-active { display: block; }
@media (max-width: 560px) {
  .wiz-steps { padding: 12px 14px 0; gap: 2px; }
  .wiz-name { display: none; }
}

/* услуги, промокод и итог */
.svc-list { display: flex; flex-direction: column; gap: 4px; }
.svc-item { display: flex; align-items: center; gap: 10px; }
.svc-name { flex: 1; }
.svc-price { color: var(--text-secondary); font-size: 0.83rem; white-space: nowrap; }
.promo-row { display: flex; gap: 8px; }
.promo-row .form-input { flex: 1; text-transform: uppercase; }
.hint-error { color: #FF9DAF; }
.hint-ok { color: #6EE7C0; }
.quote-box {
  margin-top: 6px; border: 1px solid var(--border-color); border-radius: 12px;
  padding: 12px 14px; background: rgba(255, 255, 255, 0.02);
}
.quote-line {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.86rem; padding: 4px 0; color: var(--text-secondary);
}
.quote-discount { color: #6EE7C0; }
.quote-total {
  border-top: 1px solid var(--border-color); margin-top: 6px; padding-top: 9px;
  color: var(--text-primary); font-size: 0.95rem;
}
.quote-total b { font-size: 1.05rem; }
.quote-total s { color: var(--text-secondary); font-size: 0.82rem; font-weight: 400; }
.db-discount { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }

/* ===================================================================
   ШАПКА КАБИНЕТА В СВЕТЛОЙ ТЕМЕ
   Полоса вкладок имела жёстко заданный тёмный фон rgba(15,22,35,.8),
   а подписи брали --text-muted, который в светлой теме светло-серый.
   Получался серый текст на тёмной полосе — читать почти невозможно.
   =================================================================== */
body.light-theme .dash-tabs-bar {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
body.light-theme .dash-tab {
  color: #475569;          /* тёмно-серый, а не светлый --text-muted */
  font-weight: 650;
}
body.light-theme .dash-tab:hover { color: #0F172A; }
body.light-theme .dash-tab.active {
  color: #0049FF;
  border-bottom-color: #0049FF;
}
body.light-theme .dash-navbar {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
}
body.light-theme .user-greeting { color: #334155; }
body.light-theme .company-select {
  background: #FFFFFF; color: #0F172A; border-color: #CBD5E1;
}
body.light-theme .role-badge {
  background: rgba(0, 73, 255, 0.08); color: #0B3FBF;
  border: 1px solid rgba(0, 73, 255, 0.22);
}
body.light-theme .section-desc,
body.light-theme .text-muted { color: #5A6B85; }

/* кнопки-иконки в шапке (подсказки, реквизиты) */
.nav-icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-color);
  color: var(--text-secondary); border-radius: 9px; padding: 5px 10px;
  font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.nav-icon-btn:hover { color: var(--text-primary); border-color: var(--border-active); }
.nav-icon-btn.is-off { opacity: 0.6; }
body.light-theme .nav-icon-btn {
  background: #FFFFFF; color: #334155; border-color: #CBD5E1;
}
body.light-theme .nav-icon-btn:hover { color: #0F172A; border-color: #94A3B8; }
.role-badge { cursor: pointer; }
@media (max-width: 900px) {
  .nav-icon-btn span { display: none; }
}

/* инструкция установки внутри мастера */
.steps-install { padding-left: 1.35rem; font-size: 0.87rem; line-height: 1.65; }
.steps-install li { margin-bottom: 12px; }
.steps-install b { font-weight: 700; }
.notice.notice-green { border-color: rgba(16, 217, 160, 0.34); background: rgba(16, 217, 160, 0.08); }

/* ===================================================================
   ЭКСКУРСИЯ ПО КАБИНЕТУ (новая — 26.09.2026)
   Приветствие по центру → шаги по четырём главам: подсветка места + карточка с картинкой, что это и зачем →
   итог «с чего начать». Затемнение вокруг места даёт огромная тень у «окошка» .tour-hole; у приветствия и итога —
   свой фон .tour-stage. Настройка «больше не показывать» — на пользователя, поэтому живёт на сервере.
   =================================================================== */
.tour-back { position: fixed; inset: 0; z-index: 9000; }
.tour-open .fx-confetti { z-index: 9600; }     /* салют итога — поверх экскурсии */

.tour-hole {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .95), 0 0 0 8px rgba(59, 130, 246, .2), 0 0 0 9999px rgba(15, 23, 42, .6);
  transition: left .38s cubic-bezier(.2, .8, .2, 1), top .38s cubic-bezier(.2, .8, .2, 1),
              width .38s cubic-bezier(.2, .8, .2, 1), height .38s cubic-bezier(.2, .8, .2, 1);
}
.tour-hole::after {                            /* «дышащее» кольцо вокруг места */
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  animation: tourPulse 1.9s ease-out infinite;
}
@keyframes tourPulse {
  0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, .55); }
  100% { box-shadow: 0 0 0 16px rgba(96, 165, 250, 0); }
}

/* ---- карточка шага */
.tour-card {
  position: fixed; width: min(392px, calc(100vw - 32px)); background: #FFFFFF; color: #0F172A;
  border-radius: 20px; text-align: left;
  box-shadow: 0 34px 80px -24px rgba(2, 6, 23, .6), 0 0 0 1px rgba(15, 23, 42, .06);
  transition: left .38s cubic-bezier(.2, .8, .2, 1), top .38s cubic-bezier(.2, .8, .2, 1);
}
.tour-card.is-in .tour-in { animation: tourIn .42s cubic-bezier(.2, .9, .25, 1.08) both; }
@keyframes tourIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tour-art {
  position: relative; height: 128px; border-radius: 20px 20px 0 0; overflow: hidden; background: #0B1426;
}
.tour-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 52%; display: block;
  animation: tourDrift 9s ease-in-out infinite alternate;
}
@keyframes tourDrift { from { transform: scale(1.06) translateX(-1.5%); } to { transform: scale(1.12) translateX(1.5%); } }
.tour-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 20, 38, .45) 0%, rgba(11, 20, 38, 0) 42%, rgba(11, 20, 38, .35) 100%);
}
.tour-art-top { position: absolute; z-index: 1; top: 12px; left: 14px; right: 12px; display: flex; align-items: center; gap: 8px; }
.tour-chapter, .tour-count {
  padding: 5px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #DBEAFE; background: rgba(15, 23, 42, .6); border: 1px solid rgba(147, 197, 253, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap;
}
.tour-count { margin-left: auto; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tour-x {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(15, 23, 42, .6); border: 1px solid rgba(255, 255, 255, .22); font-size: .8rem; line-height: 1;
}
.tour-x:hover { background: rgba(15, 23, 42, .85); }
.tour-body { padding: 16px 18px 14px; }
.tour-card h4 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; color: #0F172A; line-height: 1.3; }
.tour-card p { margin: 0 0 10px; font-size: .9rem; line-height: 1.6; color: #334155; }
.tour-tip {
  display: flex; gap: 9px; align-items: flex-start; margin: 0 0 12px; padding: 9px 11px; border-radius: 12px;
  background: #EFF6FF; border: 1px solid #DBEAFE; color: #1E3A8A; font-size: .82rem; line-height: 1.5;
}
.tour-tip[hidden] { display: none; }
.tour-tip svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #2563EB; }
.tour-progress { display: flex; gap: 5px; margin: 2px 0 12px; }
.tour-seg {
  flex: var(--n, 1) 1 0; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #E2E8F0;
  overflow: hidden; cursor: pointer;
}
.tour-seg > i {
  display: block; height: 100%; width: var(--p, 0%); border-radius: inherit;
  background: linear-gradient(90deg, #2563EB, #7C3AED); transition: width .4s ease;
}
.tour-seg.is-now { box-shadow: 0 0 0 2px rgba(37, 99, 235, .18); }
.tour-foot { display: flex; align-items: center; gap: 10px; }
.tour-never {
  display: flex; align-items: center; gap: 7px; margin-right: auto; cursor: pointer;
  font-size: .76rem; line-height: 1.3; color: #64748B;
}
.tour-btns { display: flex; gap: 8px; flex: none; }
.tour-next, .tour-go {
  color: #fff; border: 0; background: linear-gradient(135deg, #2563EB 0%, #4F46E5 55%, #7C3AED 100%);
  box-shadow: 0 10px 22px -10px rgba(79, 70, 229, .85);
}
.tour-next:hover, .tour-go:hover { filter: brightness(1.07); }
.tour-arrow {
  position: absolute; width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg); display: none;
  pointer-events: none;
}
.tour-card[data-side="below"] .tour-arrow { display: block; top: -7px; background: #13203B; border-radius: 3px 0 0 0; }
.tour-card[data-side="above"] .tour-arrow { display: block; bottom: -7px; background: #FFFFFF; border-radius: 0 0 3px 0; }

/* ---- приветствие и итог: по центру экрана */
.tour-stage {   /* flex + margin: auto у карточки: выше экрана — листается целиком, верх не обрезается */
  position: fixed; inset: 0; z-index: 1; display: flex; padding: 16px; overflow-y: auto;
  background: rgba(15, 23, 42, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: tourFade .3s ease both;
}
.tour-stage[hidden] { display: none; }
@keyframes tourFade { from { opacity: 0; } to { opacity: 1; } }
.tour-hero-card {
  position: relative; flex: none; margin: auto; width: min(600px, 100%); background: #FFFFFF; color: #0F172A; border-radius: 26px;
  overflow: hidden; text-align: left; box-shadow: 0 40px 120px -30px rgba(2, 6, 23, .85);
  animation: tourPop .55s cubic-bezier(.2, .9, .25, 1.12) both;
}
@keyframes tourPop { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
.tour-hero-art { position: relative; height: 236px; overflow: hidden; background: #0B1426; }
.tour-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block;
  animation: tourDrift 10s ease-in-out infinite alternate; }
.tour-hero-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .92) 96%, #FFFFFF 100%);
}
.tour-hero-art.is-short { height: 190px; }
.tour-hero-art.is-top img { object-position: center 18%; }   /* у приветствия главное — вверху картинки */
.tour-hero-x { position: absolute; z-index: 2; top: 14px; right: 14px; }
/* Осьминог-ведущий (08.10.2026): выглядывает из-за белой части карточки на фоне картинки — справа или слева
   внизу картинки; размер и высоту ставит экскурсия (tourHeroHost, tourHostPlace), рисует fx.js. Клики не ловит. */
.tour-host { position: absolute; z-index: 2; right: 16px; width: 70px; pointer-events: none; }
.tour-host.is-left { right: auto; left: 16px; }
.tour-host[hidden] { display: none; }
.tour-host-hero { right: 56px; }
.tour-hero-body { position: relative; padding: 0 30px 26px; margin-top: -18px; }
.tour-kicker {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #1D4ED8; background: #EFF6FF; border: 1px solid #DBEAFE;
}
.tour-kicker svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tour-hero-card h3 {
  margin: 12px 0 8px; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; color: #0F172A;
}
.tour-hero-card p { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: #334155; }
.tour-chapters { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tour-chapters li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: #F8FAFC; border: 1px solid #E2E8F0;
  animation: tourRise .5s cubic-bezier(.2, .9, .25, 1.1) both; animation-delay: calc(var(--i, 0) * 80ms + 260ms);
}
@keyframes tourRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tour-chapters img { flex: none; width: 38px; height: 38px; border-radius: 11px; }
.tour-chapters b { display: block; font-size: .88rem; color: #0F172A; line-height: 1.25; }
.tour-chapters small { display: block; margin-top: 2px; font-size: .76rem; color: #64748B; line-height: 1.3; }
.tour-chapters .tour-n {
  flex: none; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; display: grid; place-items: center;
  font-size: .7rem; font-weight: 800; color: #2563EB; background: #EFF6FF;
}
.tour-hero-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.tour-hero-foot .btn { padding: 11px 20px; font-size: .92rem; }
.tour-hero-note { margin-right: auto; font-size: .8rem; line-height: 1.4; color: #64748B; }

/* итог: «с чего начать» */
.tour-todo { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.tour-todo li {
  display: grid; grid-template-columns: auto 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E2E8F0;
  animation: tourRise .45s cubic-bezier(.2, .9, .25, 1.1) both; animation-delay: calc(var(--i, 0) * 90ms + 220ms);
}
.tour-todo li.is-done { background: #F0FDF4; border-color: #BBF7D0; }
.tour-todo-n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; color: #2563EB; background: #EFF6FF;
}
.tour-todo li.is-done .tour-todo-n { color: #fff; background: #16A34A; }
.tour-todo-n svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tour-todo img { width: 40px; height: 40px; border-radius: 12px; }
.tour-todo-txt b { display: block; font-size: .92rem; color: #0F172A; line-height: 1.3; }
.tour-todo-txt small { display: block; margin-top: 2px; font-size: .8rem; color: #64748B; line-height: 1.35; }
.tour-todo-ok { font-size: .8rem; font-weight: 700; color: #15803D; white-space: nowrap; }
.tour-todo .btn { white-space: nowrap; }

/* место, к которому привела кнопка итога, — коротко подсвечиваем */
.tour-flash { animation: tourFlash 1.2s ease-out 2; border-radius: 16px; }
@keyframes tourFlash {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .55); }
  100% { box-shadow: 0 0 0 18px rgba(37, 99, 235, 0); }
}

@media (max-width: 639px) {
  .tour-card { border-radius: 18px; }
  .tour-art { height: 92px; border-radius: 18px 18px 0 0; }
  .tour-body { padding: 13px 15px 12px; }
  .tour-card h4 { font-size: 1rem; }
  .tour-card p { font-size: .86rem; line-height: 1.55; }
  .tour-foot { flex-wrap: wrap; row-gap: 8px; }
  .tour-never { flex-basis: 100%; }
  .tour-btns { margin-left: auto; }
  .tour-hero-card { border-radius: 22px; }
  .tour-hero-art { height: 150px; }
  .tour-hero-art.is-short { height: 130px; }
  .tour-hero-body { padding: 0 18px 18px; }
  .tour-hero-card p { font-size: .9rem; }
  .tour-chapters { gap: 8px; }
  .tour-chapters li { padding: 9px 10px; gap: 8px; }
  .tour-chapters img { width: 32px; height: 32px; border-radius: 9px; }
  .tour-chapters .tour-n { display: none; }
  .tour-todo li { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 9px 10px; }
  .tour-todo img { display: none; }
  .tour-hero-foot .btn { flex: 1 1 auto; }
  .tour-hero-note { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .tour-chapters img { display: none; }
  .tour-chapters li { padding: 8px 10px; }
}
@media (max-height: 720px) {
  .tour-hero-art, .tour-hero-art.is-short { height: 118px; }
  .tour-hero-card h3 { margin-top: 8px; }
  .tour-hero-card p { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-hole, .tour-card { transition: none; }
  .tour-hole::after, .tour-art img, .tour-hero-art img, .tour-card.is-in .tour-in, .tour-stage, .tour-hero-card,
  .tour-chapters li, .tour-todo li, .tour-flash { animation: none; }
}

/* роли: справка и выбор в таблице сотрудников */
.role-card {
  border: 1px solid var(--border-color); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 10px;
}
.role-card.is-mine { border-color: rgba(46, 107, 255, 0.5); background: rgba(46, 107, 255, 0.05); }
.role-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.role-card-head b { font-size: 0.95rem; }
.role-two { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .role-two { grid-template-columns: 1fr; } }
.role-sub { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.role-can { color: #6EE7C0; }
.role-cant { color: #FF9DAF; }
.role-two ul { margin: 0; padding-left: 1.1rem; font-size: 0.83rem; line-height: 1.55; color: var(--text-secondary); }
.role-select {
  font-family: inherit; font-size: 0.8rem; padding: 5px 8px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary);
}
body.light-theme .role-can { color: #067A5B; }
body.light-theme .role-cant { color: #B4233A; }

/* Ссылка, оформленная кнопкой, не должна быть подчёркнутой */
a.btn, a.btn:hover { text-decoration: none; }
/* Названия шагов не переносим: строка при нехватке места прокручивается */
.wiz-steps { overflow-x: auto; scrollbar-width: none; }
.wiz-steps::-webkit-scrollbar { display: none; }
.wiz-name { white-space: nowrap; }
.wiz-step { flex: 0 0 auto; }

/* ------------------------------------------------- услуги и цены (кабинет) --- */
.price-grid {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.price-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 16px 18px;
}
.price-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.price-name { font-size: 0.98rem; font-weight: 700; }
.price-sum { font-size: 1.35rem; font-weight: 800; white-space: nowrap; }
.price-sum span { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.price-desc { font-size: 0.83rem; line-height: 1.55; color: var(--text-secondary); margin: 9px 0 8px; }
.price-count { font-size: 0.76rem; color: var(--text-muted); }
.price-facts { margin: 0; padding-left: 1.15rem; font-size: 0.86rem; line-height: 1.7; color: var(--text-secondary); }
.price-facts li { margin-bottom: 5px; }
.table-scroll { overflow-x: auto; }
.data-table tfoot td { border-top: 1px solid var(--border-active); padding-top: 10px; }

/* ===================================================================
   БЛОК ПРЕДЛОЖЕНИЯ НА ГЛАВНОЙ
   Первое, что видит посетитель: цена подписки и главный аргумент —
   проверок сколько угодно за те же деньги. Цену подставляет app.js
   из каталога услуг, чтобы лендинг не расходился с админкой.
   =================================================================== */
/* Блок живёт внутри тёмного hero: в светлой теме hero тоже остаётся тёмным
   (так задумано в дизайне), поэтому карточку не перекрашиваем — иначе
   получалась белая плашка над тёмным экраном. */
.offer-band {
  position: relative; z-index: 2;
  margin: 0 auto 30px; max-width: 1240px; padding: 0 24px; width: 100%;
}
.offer-inner {
  display: grid; gap: 28px; grid-template-columns: 1.35fr 1fr; align-items: center;
  padding: 30px 34px;
  border-radius: 22px;
  border: 1px solid rgba(46, 107, 255, 0.34);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(46, 107, 255, 0.20) 0%, rgba(46, 107, 255, 0) 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(16, 217, 160, 0.16) 0%, rgba(16, 217, 160, 0) 55%),
    rgba(10, 16, 30, 0.72);
  box-shadow: 0 24px 70px rgba(4, 10, 24, 0.5);
  overflow: hidden;
}
.offer-inner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
}
.offer-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: #8FB4FF; background: rgba(46, 107, 255, 0.13);
  border: 1px solid rgba(46, 107, 255, 0.3);
  border-radius: 999px; padding: 6px 12px; margin-bottom: 14px;
}
.offer-pulse {
  /* Точка по-прежнему пульсирует — просто не светится кислотным */
  width: 7px; height: 7px; border-radius: 50%; background: #4E9E82;
  box-shadow: 0 0 0 0 rgba(78, 158, 130, 0.5); animation: offerPulse 2s infinite;
}
@keyframes offerPulse {
  70% { box-shadow: 0 0 0 8px rgba(78, 158, 130, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 158, 130, 0); }
}
@media (prefers-reduced-motion: reduce) { .offer-pulse { animation: none; } }

.offer-h {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 800; line-height: 1.2;
  letter-spacing: -0.02em; margin: 0 0 12px;
}
.offer-price { display: inline-flex; align-items: baseline; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
/* Обычная цена рядом со скидочной: зачёркнута, мельче и приглушена —
   видно, что было и что стало, но спорить с главной цифрой она не должна. */
.offer-old {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-muted, #64748B);
  text-decoration-thickness: 2px;
  margin-right: 2px;
}
.offer-price #offerPrice {
  /* Цена и так самая крупная надпись на странице — перелив ей не нужен */
  font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 900; letter-spacing: -0.03em;
  color: #EAF1FB;
}
.offer-cur {
  font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; color: #9FB6DC;
  margin-left: 2px;
}
.offer-per { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
.offer-sub {
  font-size: 0.95rem; line-height: 1.65; color: var(--text-secondary);
  max-width: 46ch; margin: 0 0 18px;
}
.offer-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.offer-first {
  margin-top: 14px; font-size: 0.87rem; font-weight: 650; color: #9CC9B7;
  background: rgba(78, 158, 130, 0.11); border: 1px solid rgba(78, 158, 130, 0.3);
  border-radius: 11px; padding: 9px 13px;
}

.offer-facts { display: flex; flex-direction: column; gap: 12px; }
.offer-fact {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px; padding: 13px 15px;
}
.offer-fact-num {
  font-size: 1.7rem; font-weight: 900; line-height: 1; min-width: 62px; text-align: center;
  color: #DCE6F7;
}
.offer-fact-num span { font-size: 0.72rem; font-weight: 700; display: block; margin-top: 2px; }
.offer-fact-txt b { display: block; font-size: 0.9rem; margin-bottom: 2px; }
.offer-fact-txt span { font-size: 0.79rem; line-height: 1.5; color: var(--text-muted); }

/* Светлая тема: hero остаётся тёмным, поэтому меняем только текст,
   который брал переменные светлой темы и стал бы нечитаемым. */
body.light-theme .offer-h { color: #FFFFFF; }
body.light-theme .offer-sub { color: #A9B6CE; }
body.light-theme .offer-per,
body.light-theme .offer-fact-txt span { color: #8C9BB5; }
body.light-theme .offer-fact-txt b { color: #FFFFFF; }
body.light-theme .offer-band .nx-btn-ghost {
  color: #fff; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2);
}

/* ---- Два тарифа карточками под предложением (решение 18.09.2026) ---- */
.offer-plans { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.offer-plans[hidden] { display: none; }
/* Полоса акции не видна, пока каталог не ответил, но место держит (02.10.2026): главная видна до загрузки скриптов,
   и появление полосы через 1–3 с сдвигало кнопку на 264 px. Акция выключена или каталог не ответил — app.js убирает
   полосу совсем (display:none). */
.promo-strip[hidden] { visibility: hidden; }
.offer-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.offer-tier {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 18px 20px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.11);
}
.offer-tier.is-top { border-color: rgba(78, 158, 130, 0.55); background: rgba(78, 158, 130, 0.08); }
.offer-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.offer-tier-name { font-size: 1.12rem; font-weight: 800; color: #EAF1FB; }
.offer-tier-tag {
  font-size: 0.7rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; color: #08241D; background: #4E9E82;
}
.offer-tier-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.offer-tier-price s {
  font-size: 1rem; font-weight: 700; color: var(--text-muted, #64748B);
  text-decoration-thickness: 2px; margin-right: 4px;
}
.offer-tier-price strong {
  font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -0.03em;
  color: #EAF1FB; line-height: 1;
}
.offer-tier-cur { font-size: 1.2rem; font-weight: 800; color: #9FB6DC; }
.offer-tier-per { font-size: 0.84rem; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
.offer-tier-after { font-size: 0.8rem; font-weight: 650; color: #9CC9B7; }
.offer-tier-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.offer-tier-list li { position: relative; padding-left: 22px; font-size: 0.85rem; line-height: 1.45; color: #CFE0FF; }
/* Галочка и крестик нарисованы, а не символами — как в списке выше */
.offer-tier-list li.is-yes::before {
  content: ""; position: absolute; left: 5px; top: 3px; width: 5px; height: 9px;
  border: solid #4E9E82; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.offer-tier-list li.is-no { color: var(--text-muted, #8C9BB5); }
.offer-tier-list li.is-no::before, .offer-tier-list li.is-no::after {
  content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 2px;
  border-radius: 2px; background: #C0605B; transform: rotate(45deg);
}
.offer-tier-list li.is-no::after { transform: rotate(-45deg); }
.offer-plans .offer-first { margin-top: 0; }

@media (max-width: 900px) {
  /* Шапка в потоке страницы (sticky), отступ под неё не нужен: было 82px — на телефоне первым экраном шло
     ~135px пустого фона (02.10.2026, проверка перед рекламой). */
  .offer-band { margin-top: 12px; padding: 0 14px; }
  .offer-inner { grid-template-columns: 1fr; padding: 22px 18px; gap: 20px; }
  .offer-facts { gap: 9px; }
  .offer-fact-num { font-size: 1.4rem; min-width: 50px; }
}


/* Пока открыто модальное окно, фон лендинга не анимируем: под полупрозрачной
   подложкой каждый движущийся слой — это лишние перерисовки и повод для
   артефактов вроде тёмного следа при скачивании файла. Плюс меньше нагрузки
   на слабых машинах бухгалтеров. */
body.modal-open .nx-orb,
body.modal-open .nx-bg-grid,
body.modal-open .nx-accounts-field,
body.modal-open .nx-hero-glow {
  animation-play-state: paused !important;
  transition: none !important;
}
body.modal-open .nx-accounts-field { opacity: 0.25; }

/* --------------------------------------- предупреждение SmartScreen ---
   Единственная кнопка, которую Windows показывает сразу, — «Не выполнять».
   Кнопка запуска появляется только после нажатия маленькой ссылки
   «Подробнее», и без явной инструкции человек в этом месте застревает. */
.smartscreen {
  margin: 10px 0 4px; border-radius: 12px; padding: 12px 14px;
  border: 1px solid rgba(46, 107, 255, 0.34);
  background: linear-gradient(180deg, rgba(0, 84, 227, 0.16), rgba(0, 84, 227, 0.06));
}
.ss-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.ss-badge {
  font-size: 0.68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #CFE0FF; background: #0054E3; border-radius: 5px; padding: 3px 7px;
}
.ss-head b { font-size: 0.89rem; }
.smartscreen p { font-size: 0.84rem; line-height: 1.6; margin: 0 0 8px; color: var(--text-secondary); }
.ss-steps { display: flex; flex-direction: column; gap: 6px; }
.ss-step {
  background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 7px 10px;
  color: var(--text-primary); font-size: 0.85rem;
}
body.light-theme .smartscreen {
  border-color: rgba(0, 84, 227, 0.28);
  background: linear-gradient(180deg, rgba(0, 84, 227, 0.09), rgba(0, 84, 227, 0.03));
}
body.light-theme .ss-step { background: #FFFFFF; border: 1px solid #DCE6F6; }

/* проверка файла по контрольной сумме */
.file-check { margin-top: 10px; }
.file-check summary {
  cursor: pointer; font-size: 0.83rem; color: var(--text-secondary);
  padding: 6px 0; user-select: none;
}
.file-check summary:hover { color: var(--text-primary); }
.sha-line {
  display: block; word-break: break-all; font-size: 0.76rem; line-height: 1.5;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 8px 10px; margin: 4px 0 8px;
}
body.light-theme .sha-line { background: #F7F9FC; }

/* путь установки для системного администратора */
.admin-way { margin-top: 10px; }
.admin-way summary {
  cursor: pointer; font-size: 0.82rem; color: var(--text-secondary);
  padding: 5px 0; user-select: none;
}
.admin-way summary:hover { color: var(--text-primary); }
.cmd-block {
  display: block; white-space: pre-wrap; word-break: break-word;
  font-size: 0.74rem; line-height: 1.55; margin: 6px 0 8px;
  background: rgba(0, 0, 0, 0.32); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 10px 11px; color: #C8D6F0;
}
body.light-theme .cmd-block { background: #0E1626; color: #D6E2F7; border-color: #23324C; }

/* ------------------------------------- заявка на подключение (шаг 1) --- */
.ch-list { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-item {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 10px;
  padding: 8px 12px; font-size: 0.86rem;
  background: rgba(255, 255, 255, 0.03);
}
.ch-item:hover { border-color: var(--border-active); }
.ch-item:has(input:checked) {
  border-color: rgba(46, 107, 255, 0.6); background: rgba(46, 107, 255, 0.10);
}
.own-contacts {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color);
  display: flex; flex-direction: column; gap: 5px;
}
.own-contacts-t { font-size: 0.8rem; font-weight: 650; color: var(--text-secondary); }
.own-contact { font-size: 0.85rem; }
.own-contact b { color: var(--text-secondary); font-weight: 600; margin-right: 6px; }
body.light-theme .ch-item { background: #FFFFFF; }
body.light-theme .ch-item:has(input:checked) { background: rgba(0, 73, 255, 0.06); }

/* --- выбор способа подключения: две равные карточки -------------------
   Раньше самостоятельный путь был свёрнутой сноской под баннером «ставим
   мы». Получалось противоречие: сверху сказано «вам ничего не нужно»,
   снизу — «а можете сами». Теперь либо честный выбор, либо один путь. */
.way-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px;
}
@media (max-width: 640px) { .way-grid { grid-template-columns: 1fr; } }
.way-card {
  position: relative; text-align: left; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 14px;
  padding: 18px 16px 14px; background: rgba(255, 255, 255, 0.03);
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color .15s, transform .15s, background .15s;
  font: inherit; color: inherit;
}
.way-card:hover {
  border-color: rgba(46, 107, 255, 0.55); transform: translateY(-2px);
  background: rgba(46, 107, 255, 0.06);
}
.way-card.is-reco { border-color: rgba(46, 107, 255, 0.45); }
.way-card b { font-size: 1.02rem; }
.way-card p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.way-badge {
  position: absolute; top: -9px; left: 14px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 999px; background: #2E6BFF; color: #fff;
}
.way-go { margin-top: auto; font-size: 0.85rem; font-weight: 650; color: #6E9BFF; }
.way-back {
  background: none; border: 0; padding: 0 0 10px; cursor: pointer;
  font: inherit; font-size: 0.83rem; color: var(--text-secondary);
}
.way-back:hover { color: var(--text-primary); }
body.light-theme .way-card { background: #FFFFFF; }
body.light-theme .way-card:hover { background: rgba(0, 73, 255, 0.04); }
body.light-theme .way-go { color: #0049FF; }

/* --- «что дальше»: почему следующие шаги пока закрыты ----------------- */
.wait-next {
  margin-top: 14px; padding: 13px 15px; border-radius: 12px;
  border: 1px dashed var(--border-color); background: rgba(255, 255, 255, 0.02);
}
.wait-next b { display: block; margin-bottom: 5px; font-size: 0.92rem; }
.wait-next p { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 6px; line-height: 1.5; }
.wait-next p:last-child { margin-bottom: 0; }
body.light-theme .wait-next { background: #F7F9FD; }

/* --- полоса со ссылкой на PDF-инструкцию ------------------------------ */
.guide-band {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 4px 0 16px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(46, 107, 255, 0.35);
  background: linear-gradient(135deg, rgba(46, 107, 255, 0.12), rgba(46, 107, 255, 0.03));
}
.guide-band b { display: block; margin-bottom: 4px; }
.guide-band p { margin: 0; max-width: 46ch; }

/* Номер базы — кружком в углу карточки. Раньше он был приставкой «#1» к
   названию: длинное имя переносилось, и шапки соседних карточек не совпадали
   по высоте. */
.db-num {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; line-height: 1;
  color: var(--text-secondary, #64748b);
  background: rgba(100,116,139,.12);
  border: 1px solid rgba(100,116,139,.22);
}
body:not(.light-theme) .db-num {
  color: #CBD5E1; background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.26);
}

/* Название — своя строка, статус — своя. Кружок с номером не наезжает. */
.db-card-header { padding-right: 34px; }
.db-status-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 10px;
}

/* «Что не так» — не кнопка-плашка, а ссылка рядом со статусом */
.db-what {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--accent, #2563eb); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.db-what:hover { opacity: .8; }

/* Разбор проверки в окне: одна помеха — один блок */
.chk-item {
  border: 1px solid rgba(100,116,139,.22);
  border-left-width: 3px;
  border-radius: 10px;
  padding: 11px 13px;
  margin: 10px 0;
}
.chk-item.is-bad  { border-left-color: #B91C1C; }
.chk-item.is-warn { border-left-color: #B45309; }
.chk-item-head { display: flex; align-items: center; gap: 8px; }
.chk-item-mark {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: .7rem; font-weight: 700; color: #fff;
}
.chk-item.is-bad  .chk-item-mark { background: #B91C1C; }
.chk-item.is-warn .chk-item-mark { background: #B45309; }
.chk-item-text {
  margin: 7px 0 0; font-size: .84rem; line-height: 1.45;
  color: var(--text-secondary, #64748b); word-break: break-word;
}
.chk-item-fix { margin: 8px 0 0; font-size: .86rem; line-height: 1.5; }
.chk-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* Пояснение под ссылкой на акт: документ появлялся молча, и клиент не
   понимал ни что это, ни зачем оно ему. */
.bill-doc-hint {
  margin: 8px 0 0; font-size: .82rem; line-height: 1.5;
  color: var(--text-secondary, #64748b);
}

/* Кнопка «Очистить» в колокольчике — рядом с заголовком, не кричит */
.bell-clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-decoration: underline; text-underline-offset: 2px;
}
.bell-clear:hover { color: var(--accent, #2563eb); }

/* Какой Telegram привязан */
.tg-who { margin: 6px 0 0; font-size: .84rem; }

/* Что делать после исправления — в окне разбора проверки */
.chk-next {
  margin: 14px 0 0; font-size: .86rem; line-height: 1.5;
  color: var(--text-secondary, #64748b);
}

/* Две ссылки в строке отчёта («Посмотреть» и «Скачать Excel») слипались */
.data-table .btn-link + .btn-link { margin-left: 12px; }

/* ---- Акция первого дня: первое, что видит посетитель ---- */
.promo-strip {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 14px 20px;
  border-radius: 18px;
  border: 1px solid rgba(78, 158, 130, 0.45);
  background:
    radial-gradient(120% 200% at 0% 50%, rgba(78, 158, 130, 0.14) 0%, rgba(78, 158, 130, 0) 60%),
    rgba(14, 30, 27, 0.86);
  box-shadow: 0 14px 44px rgba(4, 10, 24, 0.38);
}
.promo-gift {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px;
  color: #93C4B1;
  background: rgba(78, 158, 130, 0.14);
  border: 1px solid rgba(78, 158, 130, 0.34);
}
.promo-text { flex: 1 1 320px; min-width: 0; }
.promo-title {
  display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em;
  color: #A6D2C1; margin-bottom: 3px;
}
.promo-note { display: block; font-size: 0.84rem; line-height: 1.5; color: #A9C6BE; }
.promo-cta {
  flex: none; cursor: pointer;
  font: inherit; font-size: 0.86rem; font-weight: 750;
  padding: 10px 18px; border-radius: 11px;
  color: #08241D; border: 0;
  background: #4E9E82;
}
.promo-cta:hover { filter: brightness(1.06); }

/* ---- Что входит в подписку: список под кнопками ---- */
.offer-perks {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.offer-perks li {
  font-size: 0.79rem; font-weight: 650; line-height: 1;
  padding: 7px 11px 7px 24px; border-radius: 999px;
  color: #CFE0FF;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  position: relative;
}
/* Галочка рисуется, а не ставится символом: символы в списке он просил убрать */
.offer-perks li::before {
  content: ""; position: absolute; left: 10px; top: 50%;
  width: 5px; height: 9px; margin-top: -6px;
  border: solid #4E9E82; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  .promo-strip { padding: 12px 14px; gap: 12px; }
  .promo-gift { width: 40px; height: 40px; }
  .promo-cta { width: 100%; }
}

/* ==========================================================================
   НАЧАЛО: СВЕТЛАЯ ТЕМА: ШАПКА ГЛАВНОЙ
   Правила ниже перекрывают более ранние (та же вескость, но позже в файле).
   Чтобы вернуть тёмную шапку в светлой теме — удалить всё до метки КОНЕЦ.
   ========================================================================== */

/* Фон: не белый лист, а мягкая подложка с двумя подсветками — синей слева
   сверху и зелёной справа. Дрейфующие шары остаются: движение мы не трогаем. */
body.light-theme .nx-hero {
  background:
    radial-gradient(118% 88% at 14% 0%, rgba(47, 98, 214, 0.11) 0%, transparent 56%),
    radial-gradient(100% 80% at 96% 18%, rgba(78, 158, 130, 0.09) 0%, transparent 56%),
    linear-gradient(178deg, #E6EDFA 0%, #F0F4FC 58%, #F5F7FC 100%);
  border-radius: 0 0 34px 34px;
  margin-bottom: 6px;
}
body.light-theme .nx-hero-glow { display: none; }

/* Текст шапки */
body.light-theme .nx-hero .nx-h1 { color: #101A31; }
body.light-theme .nx-hero .nx-h1-line { color: #101A31; }
body.light-theme .nx-hero .nx-h1-dim,
body.light-theme .nx-hero .nx-hero-sub,
body.light-theme .nx-hero .nx-stat-lbl,
body.light-theme .nx-hero .nx-kicker { color: #4C5876; }
body.light-theme .nx-hero .nx-kicker-mono { color: #6B7893; }
body.light-theme .nx-hero .nx-rot { color: #2A56BE; }
body.light-theme .nx-hero .nx-caret { background: #2A56BE; }

/* Плашки и кнопки шапки */
body.light-theme .nx-hero .nx-chip {
  background: #FFFFFF; border-color: #DDE4F0; color: #4C5876;
}
body.light-theme .nx-hero .nx-chip-i { color: #3F8A70; }
body.light-theme .nx-hero .nx-btn-ghost {
  color: #17203A; background: #FFFFFF; border-color: #DDE4F0;
}
body.light-theme .nx-hero .nx-btn-ghost:hover { background: #F1F5FC; }

/* Полоса с цифрами: белая карточка над подложкой */
body.light-theme .nx-hero .nx-hero-stats {
  background: rgba(255, 255, 255, 0.92);
  border-color: #DDE4F0;
  box-shadow: 0 12px 34px -24px rgba(23, 42, 86, 0.45);
}
body.light-theme .nx-hero .nx-stat-num { color: #16203A; }
body.light-theme .nx-hero .nx-stat-div { background: #E1E8F4; }

/* ---------------------- Блок предложения ---------------------- */
body.light-theme .offer-inner {
  border-color: #D6E0F4;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(47, 98, 214, 0.07) 0%, transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(78, 158, 130, 0.06) 0%, transparent 55%),
    #FFFFFF;
  box-shadow: 0 22px 60px -34px rgba(23, 42, 86, 0.42);
}
body.light-theme .offer-inner::before { display: none; }
body.light-theme .offer-badge {
  color: #2A56BE; background: rgba(47, 98, 214, 0.08);
  border-color: rgba(47, 98, 214, 0.22);
}
body.light-theme .offer-h { color: #101A31; }
body.light-theme .offer-price #offerPrice { color: #16203A; }
body.light-theme .offer-cur { color: #2A56BE; }
body.light-theme .offer-per { color: #6B7893; }
body.light-theme .offer-sub { color: #4C5876; }
body.light-theme .offer-sub b { color: #17203A; }
body.light-theme .offer-band .nx-btn-ghost {
  color: #17203A; background: #FFFFFF; border-color: #DDE4F0;
}
body.light-theme .offer-first {
  color: #2E6B57; background: rgba(78, 158, 130, 0.10);
  border-color: rgba(78, 158, 130, 0.28);
}
body.light-theme .offer-first b { color: #23644F; }
body.light-theme .offer-perks li {
  color: #3D4A66; background: #F6F8FD; border-color: #E1E8F4;
}
body.light-theme .offer-perks li::before { border-color: #3F8A70; }
body.light-theme .offer-fact {
  background: #F6F8FD; border-color: #E1E8F4;
}
body.light-theme .offer-fact-num { color: #26324F; }
body.light-theme .offer-fact-txt b { color: #17203A; }
body.light-theme .offer-fact-txt span { color: #6B7893; }

body.light-theme .offer-old { color: #7C889F; }
body.light-theme .offer-tier { background: #F6F8FD; border-color: #E1E8F4; }
body.light-theme .offer-tier.is-top { background: rgba(78, 158, 130, 0.07); border-color: rgba(63, 138, 112, 0.45); }
body.light-theme .offer-tier-name,
body.light-theme .offer-tier-price strong { color: #16203A; }
body.light-theme .offer-tier-cur { color: #2A56BE; }
body.light-theme .offer-tier-per,
body.light-theme .offer-tier-price s { color: #6B7893; }
body.light-theme .offer-tier-after { color: #2E6B57; }
body.light-theme .offer-tier-list li { color: #3D4A66; }
body.light-theme .offer-tier-list li.is-no { color: #7C889F; }

/* ---------------------- Полоса акции ---------------------- */
body.light-theme .promo-strip {
  border-color: rgba(63, 138, 112, 0.34);
  background:
    radial-gradient(120% 200% at 0% 50%, rgba(78, 158, 130, 0.14) 0%, transparent 60%),
    #F1F8F5;
  box-shadow: 0 14px 40px -28px rgba(23, 42, 86, 0.4);
}
body.light-theme .promo-title { color: #23644F; }
body.light-theme .promo-note { color: #4E6A61; }
body.light-theme .promo-gift {
  color: #3F8A70; background: rgba(78, 158, 130, 0.12);
  border-color: rgba(78, 158, 130, 0.3);
}
body.light-theme .promo-cta { color: #FFFFFF; background: #3F8A70; }
body.light-theme .promo-cta:hover { background: #35745F; }

/* Окно живого отчёта остаётся тёмным намеренно: это экран, и на светлой
   странице он даёт ту самую точку контраста, без которой всё сливается. */
body.light-theme .nx-scan-console { color: #EEF2FB; }

/* ---------------------- Мелкие плашки ----------------------
   Их цвета подбирались под тёмный фон: светлый текст на светлой заливке.
   На белой странице оставляем ту же заливку, но текст делаем тёмным. */
body.light-theme .nx-tb-blue   { color: #1D4ED8; }
body.light-theme .nx-tb-cyan   { color: #0E6E85; }
body.light-theme .nx-tb-green  { color: #2E6B57; }
body.light-theme .nx-tb-amber  { color: #96631E; }
body.light-theme .nx-tb-violet { color: #4E4C8A; }

body.light-theme .nx-ck-pill.nx-pill-ok   { color: #2E6B57; }
body.light-theme .nx-ck-pill.nx-pill-warn { color: #96631E; }
body.light-theme .nx-ck-pill.nx-pill-err  { color: #A63A52; }

body.light-theme .nx-mod-chip { color: #1D4ED8; }
body.light-theme .nx-mod-chip.nx-chip-green  { color: #2E6B57; }
body.light-theme .nx-mod-chip.nx-chip-violet { color: #4E4C8A; }

body.light-theme .nx-brand-tag { color: #2A56BE; }
body.light-theme .nx-pill { color: #4C5876; }
body.light-theme .nx-t-green { color: #2E6B57 !important; }

/* Значок на сплошной заливке: буква должна быть белой, а не зелёной */
.nx-chip-i.nx-i-bolt { color: #FFFFFF; }

/* ---------------------- Последний призыв ----------------------
   Был светло-сиреневой заливкой с белым текстом — читалась одна кнопка.
   Делаем глубокую синюю плашку: белый текст на ней виден, а страница
   получает вторую точку контраста в конце, как окно отчёта в начале. */
body.light-theme .nx-final {
  background: linear-gradient(120deg, #1B356F 0%, #24427F 55%, #1E3B72 100%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 34px 80px -44px rgba(23, 42, 86, 0.65);
}
body.light-theme .nx-final-glow {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.10), transparent 66%);
}
body.light-theme .nx-final-title { color: #FFFFFF; }
body.light-theme .nx-final-desc { color: rgba(255, 255, 255, 0.82); }
body.light-theme .nx-final-note { color: rgba(255, 255, 255, 0.68); }
body.light-theme .nx-final .nx-btn-ghost {
  color: #FFFFFF; background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.34);
}
body.light-theme .nx-final .nx-btn-ghost:hover { background: rgba(255, 255, 255, 0.17); }

/* ---------------------- Цветные строки в карточках ----------------------
   На светлом фоне текст и заливка были почти одного цвета. Заливку
   оставляем прежней, текст делаем тёмным и читаемым. */
body.light-theme .nx-rc-ok   { color: #2E6B57; }
body.light-theme .nx-rc-warn { color: #8A5A16; }
body.light-theme .nx-rc-err  { color: #A63A52; }
body.light-theme .nx-radar-chip b { color: #4C5876; }

body.light-theme .nx-rb-dir { color: #8A5A16; }
body.light-theme .nx-rb-gb  { color: #1D4ED8; }
body.light-theme .nx-rb-buh { color: #4E4C8A; }
body.light-theme .nx-role span:last-child { color: #3D4A66; }

/* Окно живого отчёта остаётся тёмным и в светлой теме — это экран.
   Значит текст и рамки внутри него светлые, как в тёмной. */
body.light-theme .nx-scanner .nx-si-name,
body.light-theme .nx-scanner .nx-gauge-val,
body.light-theme .nx-scanner .nx-scan-conn { color: #EEF2FB; }
body.light-theme .nx-scanner .nx-si-num,
body.light-theme .nx-scanner .nx-gauge-lbl,
body.light-theme .nx-scanner .nx-scan-foot { color: #96A1B8; }
body.light-theme .nx-scanner .nx-verdict-lbl { color: #B6C0D2; }
body.light-theme .nx-scan-replay {
  color: #C7D0E2; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16);
}

/* ==========================================================================
   КОНЕЦ: СВЕТЛАЯ ТЕМА: ШАПКА ГЛАВНОЙ
   ========================================================================== */

/* ==========================================================================
   ОТЧЁТ АУДИТА В КАБИНЕТЕ
   Цвета — переменными кабинета, поэтому светлая и тёмная темы работают
   сами. Никаких собственных тёмных подложек: отчёт читают, а не любуются.
   ========================================================================== */

.rp-top {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px;
  align-items: center; margin-bottom: 18px;
}
.rp-index {
  padding: 16px 18px; border-radius: 14px;
  background: var(--bg-card-hover, #F1F5F9);
  border: 1px solid var(--border-color, #E2E8F0);
}
.rp-index-val {
  font-size: 2.1rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: var(--text-primary, #0F172A);
}
.rp-index-bar {
  height: 6px; border-radius: 100px; margin: 10px 0 8px;
  background: rgba(100, 116, 139, 0.20); overflow: hidden;
}
.rp-index-bar i { display: block; height: 100%; border-radius: 100px; background: #059669; }
.rp-index-lbl { font-size: 0.76rem; color: var(--text-secondary, #64748B); }

.rp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rp-tile {
  padding: 13px 14px; border-radius: 12px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-color, #E2E8F0);
  display: flex; flex-direction: column; gap: 6px;
}
.rp-tile span { font-size: 0.72rem; line-height: 1.3; color: var(--text-secondary, #64748B); }
.rp-tile b {
  font-size: 1.02rem; font-weight: 750; line-height: 1.15;
  color: var(--text-primary, #0F172A); word-break: break-word;
}
/* Цветом отмечаем только то, что требует внимания: если всё чисто,
   плитки остаются спокойными и не пугают зря. */
.rp-tile.is-red b   { color: #B42318; }
.rp-tile.is-amber b { color: #B54708; }

.rp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-f {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 999px;
  color: var(--text-secondary, #64748B);
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-color, #E2E8F0);
}
.rp-f:hover { color: var(--text-primary, #0F172A); }
.rp-f.is-on {
  color: #FFFFFF; background: var(--accent-blue, #2563EB); border-color: transparent;
}

.rp-rows { display: flex; flex-direction: column; gap: 8px; }
.rp-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px;
  align-items: start;
  padding: 13px 15px; border-radius: 12px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-color, #E2E8F0);
  border-left: 3px solid rgba(100, 116, 139, 0.35);
}
/* Своё display: grid перебивает встроенное скрытие браузера, поэтому
   прячем строку явно — иначе фильтр отмечался, но ничего не менял. */
.rp-row[hidden] { display: none; }
.rp-row.is-ok   { border-left-color: #059669; }
.rp-row.is-warn { border-left-color: #B54708; }
.rp-row.is-err  { border-left-color: #B42318; }
.rp-row-no {
  font-size: 0.8rem; font-weight: 700; line-height: 1.5;
  color: var(--text-muted, #94A3B8); font-variant-numeric: tabular-nums;
}
.rp-row-name { font-size: 0.9rem; font-weight: 700; color: var(--text-primary, #0F172A); }
.rp-row-note {
  font-size: 0.82rem; line-height: 1.5; margin-top: 3px;
  color: var(--text-secondary, #64748B);
}
.rp-row-cnt { font-size: 0.76rem; margin-top: 4px; color: var(--text-muted, #94A3B8); }
.rp-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rp-row-sum {
  font-size: 0.88rem; font-weight: 700; white-space: nowrap;
  color: var(--text-muted, #94A3B8); font-variant-numeric: tabular-nums;
}
.rp-row-sum.is-hot { color: #B42318; }
.rp-chip {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.rp-chip.is-ok   { color: #027A48; background: #ECFDF3; border-color: #ABEFC6; }
.rp-chip.is-warn { color: #B54708; background: #FFFAEB; border-color: #FEDF89; }
.rp-chip.is-err  { color: #B42318; background: #FEF3F2; border-color: #FECDCA; }
.rp-chip.is-none { color: #475569; background: rgba(100,116,139,.10); border-color: rgba(100,116,139,.22); }

.rp-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.rp-foot-note { font-size: 0.79rem; color: var(--text-secondary, #64748B); }

/* Тёмная тема кабинета: плашки статусов на светлой заливке нечитаемы */
body:not(.light-theme) .rp-chip.is-ok   { color: #6CE9A6; background: rgba(2,122,72,.20);  border-color: rgba(108,233,166,.32); }
body:not(.light-theme) .rp-chip.is-warn { color: #FEC84B; background: rgba(181,71,8,.22);  border-color: rgba(254,200,75,.30); }
body:not(.light-theme) .rp-chip.is-err  { color: #FDA29B; background: rgba(180,35,24,.20); border-color: rgba(253,162,155,.30); }
body:not(.light-theme) .rp-tile.is-red b   { color: #FDA29B; }
body:not(.light-theme) .rp-tile.is-amber b { color: #FEC84B; }
body:not(.light-theme) .rp-row-sum.is-hot  { color: #FDA29B; }

@media (max-width: 860px) {
  .rp-top { grid-template-columns: 1fr; }
  .rp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-row { grid-template-columns: 28px minmax(0, 1fr); }
  .rp-row-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Зелёная галочка рядом с номером базы. Раньше на её месте висела плашка
   «База проверена и готова» — целая строка ради одного слова «готова».
   Теперь состояние видно с одного взгляда, а место осталось содержанию. */
.db-num .db-ok {
  position: absolute; right: -5px; bottom: -5px;
  width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; font-style: normal; line-height: 1;
  color: #fff; background: #16a34a;
  border: 2px solid var(--card-bg, #fff);
}
body:not(.light-theme) .db-num .db-ok { border-color: #0f172a; background: #22c55e; }

/* Подписка: три коротких значка вместо строки в половину карточки.
   «8/8 блоков · до 09.03.2027 · 177 дн.» читается за один взгляд, а
   «Оплачено до 2027-03-09 · 8 из 8 блоков · осталось 177 дн.» — нет. */
.db-tags .chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; margin: 0 6px 4px 0;
  border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1.35;
  white-space: nowrap;
}
.db-tags .chip-ok { color: #15803d; background: rgba(22,163,74,.12); }
.db-tags .chip-part { color: #b45309; background: rgba(217,119,6,.14); }
.db-tags .chip-quiet { color: var(--text-secondary, #64748b); background: rgba(100,116,139,.12); }
.db-tags .chip-warn { color: #b91c1c; background: rgba(220,38,38,.13); }
body:not(.light-theme) .db-tags .chip-ok { color: #4ade80; background: rgba(34,197,94,.16); }
body:not(.light-theme) .db-tags .chip-part { color: #fbbf24; background: rgba(245,158,11,.16); }
body:not(.light-theme) .db-tags .chip-quiet { color: #CBD5E1; background: rgba(148,163,184,.14); }
body:not(.light-theme) .db-tags .chip-warn { color: #fca5a5; background: rgba(248,113,113,.16); }

/* Кнопка «Улучшить подписку» — золотом, и всегда последняя в ряду, прижата
   к правому краю. Показываем только тем, у кого оплачены не все восемь
   разделов проверки: остальным предлагать нечего. */
.btn-upgrade, .btn-gold {
  /* Тёмно-коричневый по золоту: белый на светлом металле тонул, а этот цвет
     читается уверенно и выглядит как тиснение, а не как наклейка. */
  color: #4a3406;
  border: none;
  /* Круговой блик слева сверху: кнопка выглядит объёмной, а не залитой
     плоским цветом. Тёмный край по кругу держит белый текст читаемым. */
  /* Глянцевое жёлтое золото: светлый блик сверху, к низу насыщеннее, по
     нижнему краю тёмный ободок — от него кнопка выглядит объёмной, а не
     наклейкой. */
  background: linear-gradient(180deg,
                              #f8e074 0%, #f5d445 38%, #efc62f 68%, #e0b224 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55),
              inset 0 -2px 0 rgba(166,124,26,.55),
              0 2px 8px rgba(201,154,40,.32);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  font-weight: 600;
}
.btn-upgrade { margin-left: auto; }
.btn-upgrade:hover, .btn-gold:hover {
  color: #4a3406;
  background: linear-gradient(180deg,
                              #fae884 0%, #f8dc55 38%, #f4cf3c 68%, #e9bd2c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6),
              inset 0 -2px 0 rgba(166,124,26,.5),
              0 4px 13px rgba(201,154,40,.42);
}
.btn-upgrade:active, .btn-gold:active { box-shadow: inset 0 2px 4px rgba(140,102,18,.35), 0 1px 3px rgba(201,154,40,.3); }
body:not(.light-theme) .btn-upgrade,
body:not(.light-theme) .btn-gold { box-shadow: 0 2px 11px rgba(221,196,94,.22); }

/* Стрелка вверх у «Улучшить подписку»: отличает улучшение от покупки,
   когда обе кнопки золотые. */
.btn-upgrade .up-arrow {
  display: inline-block; margin-right: 5px; font-weight: 700;
  transform: translateY(-1px);
}

/* Вторая половина строки счёта: продление под доплатой за новые блоки. */
.bill-subline { grid-column: 1; color: var(--text-secondary, #64748b); font-size: .88em; }

/* Улучшение подписки: новые блоки и продление — двумя строками, у каждой
   своя сумма. Одной строкой они сливались и читались как одна покупка. */
.bill-parts { display: block; }
.bill-parts .bill-part {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 1px 0;
}
.bill-parts .bill-part b { font-weight: 600; white-space: nowrap; }

/* Строки улучшения подписки — с воздухом между ними: слипшиеся читались
   как одна фраза. */
.bill-parts .bill-part { padding: 4px 0; }
.bill-parts .bill-part + .bill-part {
  border-top: 1px dashed rgba(100,116,139,.22); margin-top: 2px;
}

/* Отклик на выбор блока: плитка коротко «дышит», и видно, что нажатие
   принято — без этого при медленном пересчёте кажется, что ничего не
   произошло. */
@keyframes tile-pick {
  0% { transform: scale(1); }
  45% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes tile-drop {
  0% { transform: scale(1); }
  45% { transform: scale(.985); }
  100% { transform: scale(1); }
}
.tariff-block.just-picked { animation: tile-pick .28s ease-out; }
.tariff-block.just-dropped { animation: tile-drop .24s ease-out; }

/* «Итого к оплате»: сумма коротко подпрыгивает, а рядом всплывает, на
   сколько она изменилась. */
@keyframes total-bump {
  0% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.total-bump { animation: total-bump .3s ease-out; }
@keyframes delta-float {
  0%   { opacity: 0; transform: translateY(6px); }
  18%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-14px); }
}
.total-delta {
  position: absolute; left: 0; top: -6px;
  font-size: .9rem; font-weight: 700; white-space: nowrap;
  pointer-events: none; animation: delta-float 1.4s ease-out forwards;
}
.total-delta.is-up { color: #dc2626; }
.total-delta.is-down { color: #16a34a; }
body:not(.light-theme) .total-delta.is-up { color: #f87171; }
body:not(.light-theme) .total-delta.is-down { color: #4ade80; }

/* Чтобы всплывающее «+9 000 ₸» держалось у суммы, а не улетало в угол. */
.bill-total { position: relative; }

/* --------------------------------------------- переключатель «Продлить» */
/* Галочка терялась среди восьми других галочек на блоках. Переключатель
   читается как «включено/выключено», а не как ещё один пункт списка. */
.bill-renew.switch {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; padding: 4px 0;
}
.bill-renew.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; flex: none;
  width: 42px; height: 24px; border-radius: 999px;
  background: rgba(100,116,139,.28);
  transition: background .22s ease;
}
.switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.bill-renew.switch input:checked + .switch-track { background: #2563eb; }
.bill-renew.switch input:checked + .switch-track .switch-knob { transform: translateX(18px); }
.bill-renew.switch input:focus-visible + .switch-track {
  outline: 2px solid rgba(37,99,235,.55); outline-offset: 2px;
}
.switch-label { font-weight: 500; }

/* Секция «На какой срок» появляется не рывком: она возникает по включению
   переключателя, и резкий скачок сбивает — непонятно, что изменилось. */
@keyframes period-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.period-reveal { animation: period-reveal .26s ease-out; }

/* Итог всегда на виду: раньше он прилипал только внутри своего блока и
   уезжал вверх, когда открывался выбор срока. Теперь держится у нижнего
   края экрана, сколько ни листай. */
.pay-bar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 14px;
  width: min(1180px, calc(100vw - 34px));
  z-index: 40;
  box-shadow: 0 8px 30px rgba(15,23,42,.18);
}
/* Чтобы последний блок страницы не прятался под закреплённой панелью. */
#pricingPanel { padding-bottom: 108px; }
@media (max-width: 640px) {
  .pay-bar { bottom: 8px; width: calc(100vw - 18px); }
  #pricingPanel { padding-bottom: 128px; }
}

/* Всплывающая разница — сразу справа от суммы, там пусто. Над суммой она
   налезала на подпись «Итого к оплате». */
.bill-total-value { position: relative; display: inline-block; }
.total-delta {
  position: absolute; left: 100%; top: 50%;
  margin-left: 10px; transform: translateY(-50%);
}
@keyframes delta-float {
  0%   { opacity: 0; transform: translateY(-50%) translateX(-6px); }
  20%  { opacity: 1; transform: translateY(-50%) translateX(0); }
  72%  { opacity: 1; transform: translateY(-50%) translateX(0); }
  100% { opacity: 0; transform: translateY(-50%) translateX(8px); }
}

/* Пока счёт уходит на сервер, по закреплённой панели нельзя ударить второй
   раз: иначе с ней, всегда висящей на экране, легко наделать дублей. */
.pay-bar.is-sending { pointer-events: none; opacity: .6; }

/* Поиск баз: без движения на экране непонятно, идёт он или завис. Текста
   мало — нужен именно живой элемент. */
.search-head { display: flex; align-items: center; gap: 10px; }
.search-spin {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(37,99,235,.25); border-top-color: #2563eb;
  animation: search-spin .8s linear infinite;
}
@keyframes search-spin { to { transform: rotate(360deg); } }
.search-bar {
  margin-top: 10px; height: 3px; border-radius: 999px;
  background: rgba(37,99,235,.16); overflow: hidden;
}
.search-bar > span {
  display: block; width: 38%; height: 100%; border-radius: 999px;
  background: #2563eb; animation: search-run 1.25s ease-in-out infinite;
}
@keyframes search-run {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
body:not(.light-theme) .search-spin { border-color: rgba(96,165,250,.25); border-top-color: #60a5fa; }
body:not(.light-theme) .search-bar { background: rgba(96,165,250,.18); }
body:not(.light-theme) .search-bar > span { background: #60a5fa; }

/* ==========================================================================
   Живой отчёт по базе — вкладка «Аудит»
   Проблема → где именно → решение. Цветом отмечается только то, что требует
   внимания: полоса слева у карточки и числа в шапке.
   ========================================================================== */
.lv-wrap { display: flex; flex-direction: column; gap: 14px; }
.lv-body { display: flex; flex-direction: column; gap: 16px; }
.notice.notice-blue { border-color: rgba(37, 99, 235, 0.32); background: rgba(37, 99, 235, 0.07); }

.lv-bases { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-base {
  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  color: var(--text-secondary, #334155); background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-color, #E2E8F0);
}
.lv-base:hover { border-color: var(--border-active, #2563EB); color: var(--text-primary, #0F172A); }
.lv-base.is-on { color: #FFFFFF; background: var(--accent-blue, #2563EB); border-color: transparent; }
.lv-base-name { font-weight: 650; font-size: 0.86rem; }
.lv-base-idx {
  font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(100, 116, 139, 0.14);
}
.lv-base.is-on .lv-base-idx { background: rgba(255, 255, 255, 0.22); }

.lv-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start;
  padding: 18px 20px;
}
.lv-db { font-size: 1.15rem; font-weight: 750; margin: 0; color: var(--text-primary, #0F172A); }
.lv-when { font-size: 0.8rem; margin: 4px 0 14px; }
.lv-head-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 190px; }
.lv-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.lv-stat {
  min-width: 118px; padding: 10px 13px; border-radius: 12px;
  background: var(--bg-card-hover, #F1F5F9); border: 1px solid var(--border-color, #E2E8F0);
  display: flex; flex-direction: column; gap: 4px;
}
.lv-stat b { font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--text-primary, #0F172A); }
.lv-stat span { font-size: 0.72rem; color: var(--text-secondary, #64748B); }
.lv-stat.is-amber b { color: #B54708; }
.lv-stat.is-green b { color: #047857; }
.lv-stat.is-blue b  { color: var(--accent-blue, #2563EB); }
.lv-bar { height: 5px; border-radius: 100px; background: rgba(100, 116, 139, 0.2); overflow: hidden; margin-top: 4px; }
.lv-bar i { display: block; height: 100%; background: #059669; border-radius: 100px; }
.lv-spark {
  display: flex; align-items: flex-end; gap: 3px; height: 54px; padding: 8px 10px;
  border-radius: 12px; border: 1px solid var(--border-color, #E2E8F0);
}
.lv-spark i { width: 6px; border-radius: 2px; background: rgba(37, 99, 235, 0.55); }

.lv-sec { display: flex; flex-direction: column; gap: 10px; }
.lv-sec-title {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 0;
  font-size: 0.95rem; font-weight: 750; color: var(--text-primary, #0F172A);
}
.lv-sec-cnt {
  font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(100, 116, 139, 0.14); color: var(--text-secondary, #64748B);
}
.lv-sec-hint { margin: 0; font-size: 0.82rem; color: var(--text-secondary, #64748B); }

.lv-card {
  padding: 15px 17px; border-radius: 14px;
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--border-color, #E2E8F0);
  border-left: 4px solid rgba(100, 116, 139, 0.4);
  display: flex; flex-direction: column; gap: 10px;
}
.lv-card.is-err  { border-left-color: #DC2626; }
.lv-card.is-warn { border-left-color: #D97706; }
.lv-card.is-info { border-left-color: #2563EB; }
.lv-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lv-card-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lv-card-title h5 { margin: 0; font-size: 1rem; font-weight: 750; color: var(--text-primary, #0F172A); }
.lv-tag {
  align-self: flex-start; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #B42318;
}
.lv-card.is-warn .lv-tag { color: #B54708; }
.lv-card.is-info .lv-tag { color: var(--accent-blue, #2563EB); }
.lv-card-cnt {
  flex: none; text-align: right; font-size: 0.8rem; font-weight: 650;
  color: var(--text-secondary, #64748B); display: flex; flex-direction: column; gap: 3px;
}
.lv-card-fixed { color: #047857; font-weight: 600; }
.lv-why { margin: 0; font-size: 0.86rem; color: var(--text-secondary, #334155); }

.lv-sol-title {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted, #64748B); margin-bottom: 6px;
}
.lv-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lv-item {
  padding: 8px 11px; border-radius: 10px;
  background: var(--bg-card-hover, #F1F5F9); border: 1px solid var(--border-color, #E2E8F0);
}
.lv-item-head { font-size: 0.86rem; font-weight: 650; color: var(--text-primary, #0F172A); word-break: break-word; }
.lv-item-fact { font-size: 0.8rem; color: var(--text-secondary, #334155); margin-top: 3px; word-break: break-word; }
.lv-item-note { font-size: 0.78rem; color: var(--text-muted, #64748B); margin-top: 4px; word-break: break-word; }
.lv-new {
  font-size: 0.66rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-left: 4px;
  color: #FFFFFF; background: var(--accent-blue, #2563EB); vertical-align: 1px;
}
.lv-more summary, .lv-fixed summary, .lv-refusals summary {
  cursor: pointer; font-size: 0.82rem; font-weight: 650; color: var(--accent-blue, #2563EB); margin-top: 6px;
}
.lv-more .lv-items { margin-top: 6px; }

.lv-sol {
  padding: 12px 14px; border-radius: 12px;
  background: rgba(5, 150, 105, 0.07); border: 1px solid rgba(5, 150, 105, 0.25);
}
.lv-sol .lv-sol-title { color: #047857; }
.lv-sol-rows { font-size: 0.84rem; color: var(--text-secondary, #334155); }
.lv-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.lv-steps[hidden] { display: none; }
.lv-steps-common { margin-bottom: 4px; }
.lv-sol-next { margin-top: 10px; }
.lv-steps li { font-size: 0.86rem; color: var(--text-primary, #0F172A); }
.lv-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lv-choice {
  font: inherit; font-size: 0.82rem; font-weight: 650; cursor: pointer;
  padding: 7px 12px; border-radius: 999px;
  color: #047857; background: var(--bg-card, #FFFFFF); border: 1px solid rgba(5, 150, 105, 0.45);
}
.lv-choice:hover { background: rgba(5, 150, 105, 0.08); }
.lv-choice.is-on { color: #FFFFFF; background: #059669; border-color: transparent; }

.lv-fixed, .lv-refusals {
  padding: 12px 16px; border-radius: 12px;
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--border-color, #E2E8F0);
}
.lv-fixed-grp { margin-top: 10px; font-size: 0.84rem; color: var(--text-primary, #0F172A); }
.lv-fixed-grp ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-secondary, #334155); }
.lv-refusals p { font-size: 0.84rem; color: var(--text-secondary, #334155); margin: 10px 0 0; }

@media (max-width: 720px) {
  .lv-head { grid-template-columns: 1fr; }
  .lv-head-act { min-width: 0; }
  .lv-card-head { flex-direction: column; }
  .lv-card-cnt { text-align: left; }
  .lv-stat { min-width: 0; flex: 1 1 40%; }
}

/* ------------------------------------------------ тариф: Диагностика / Исправление
   Две одинаковые белые карточки (Вениамин 24.09.2026: «2 тарифа, одинаковые, чисто белые»). Значок и цвет —
   как у плашки «Тариф: …» на карточке базы: «Диагностика» синяя, «Исправление» фиолетовая. Выбранная —
   с рамкой своего цвета и точкой в кружке справа. */
.bill-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 14px 0 16px; }
.bill-level {
  --lv-accent: #1d4ed8; --lv-soft: rgba(37, 99, 235, 0.09); --lv-ring: rgba(37, 99, 235, 0.16);
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 15px;
  text-align: left; font: inherit; color: var(--text-primary); cursor: pointer;
  border-radius: 16px; border: 1.5px solid var(--border-color); background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.bill-level.is-fix { --lv-accent: #6d28d9; --lv-soft: rgba(124, 58, 237, 0.09); --lv-ring: rgba(124, 58, 237, 0.16); }
body:not(.light-theme) .bill-level {
  --lv-accent: #93c5fd; --lv-soft: rgba(59, 130, 246, 0.14); --lv-ring: rgba(59, 130, 246, 0.22);
  background: var(--bg-card); box-shadow: none;
}
body:not(.light-theme) .bill-level.is-fix { --lv-accent: #c4b5fd; --lv-soft: rgba(139, 92, 246, 0.16); --lv-ring: rgba(139, 92, 246, 0.24); }
.bill-level:hover { border-color: var(--lv-accent); transform: translateY(-1px); }
.bill-level.is-on { border-color: var(--lv-accent); box-shadow: 0 0 0 3px var(--lv-ring), 0 10px 26px rgba(15, 23, 42, 0.08); }
body:not(.light-theme) .bill-level.is-on { box-shadow: 0 0 0 3px var(--lv-ring); }
.bill-level:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 2px; }
.bill-level-top { display: flex; align-items: center; gap: 11px; }
.bill-level-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--lv-accent); background: var(--lv-soft);
}
.bill-level-ico svg { width: 20px; height: 20px; }
.bill-level-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bill-level-title b {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.06rem; font-weight: 800; letter-spacing: -0.015em;
}
.bill-level-tag {
  font-size: 0.68rem; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--lv-accent); background: var(--lv-soft);
}
.bill-level-tag.is-now { color: #047857; background: rgba(16, 185, 129, 0.12); }
body:not(.light-theme) .bill-level-tag.is-now { color: #6EE7C0; background: rgba(16, 217, 160, 0.14); }
.bill-level-radio {
  flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--border-color); transition: border .16s;
}
.bill-level.is-on .bill-level-radio { border: 6px solid var(--lv-accent); }
.bill-level-desc { font-size: 0.86rem; line-height: 1.45; color: var(--text-secondary); }
.bill-level-list {
  display: flex; flex-direction: column; gap: 7px; margin-top: 2px; padding-top: 12px;
  border-top: 1px dashed var(--border-color);
}
.bill-level-list > span { position: relative; display: block; padding-left: 25px; font-size: 0.82rem; line-height: 1.4; }
/* Галочка в цветном кружке — входит; серый крестик — не входит. Нарисованы, а не символами. */
.bill-level-list > .is-yes::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--lv-soft);
}
.bill-level-list > .is-yes::after {
  content: ""; position: absolute; left: 6px; top: 4.5px; width: 3.5px; height: 7px;
  border: solid var(--lv-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.bill-level-list > .is-no { color: var(--text-muted); }
.bill-level-list > .is-no::before, .bill-level-list > .is-no::after {
  content: ""; position: absolute; left: 3px; top: 8.5px; width: 10px; height: 1.8px; border-radius: 2px;
  background: var(--text-muted); transform: rotate(45deg);
}
.bill-level-list > .is-no::after { transform: rotate(-45deg); }

/* История счетов: каждый счёт — своей карточкой (Вениамин 24.09.2026). Слева значок цветом статуса,
   рядом номер, дата и база, справа сумма и статус. Открытый счёт отделён пунктиром. */
.bill-invoices { display: flex; flex-direction: column; gap: 10px; }
.bill-inv {
  --inv-accent: #64748b; --inv-soft: rgba(100, 116, 139, 0.1);
  padding: 0; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card);
  transition: border-color .16s, box-shadow .16s;
}
.bill-inv:first-of-type { border-top: 1px solid var(--border-color); }
.bill-inv:hover, .bill-inv[open] { border-color: rgba(46, 107, 255, 0.3); }
body.light-theme .bill-inv { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
.bill-inv.is-issued  { --inv-accent: #b45309; --inv-soft: rgba(245, 158, 11, 0.13); }
.bill-inv.is-claimed { --inv-accent: #1d4ed8; --inv-soft: rgba(37, 99, 235, 0.1); }
.bill-inv.is-paid    { --inv-accent: #047857; --inv-soft: rgba(16, 185, 129, 0.12); }
.bill-inv.is-expired { --inv-accent: #b91c1c; --inv-soft: rgba(220, 38, 38, 0.1); }
body:not(.light-theme) .bill-inv            { --inv-accent: #94a3b8; --inv-soft: rgba(148, 163, 184, 0.14); }
body:not(.light-theme) .bill-inv.is-issued  { --inv-accent: #FFD08A; --inv-soft: rgba(255, 176, 32, 0.14); }
body:not(.light-theme) .bill-inv.is-claimed { --inv-accent: #A9C6FF; --inv-soft: rgba(46, 107, 255, 0.16); }
body:not(.light-theme) .bill-inv.is-paid    { --inv-accent: #6EE7C0; --inv-soft: rgba(16, 217, 160, 0.14); }
body:not(.light-theme) .bill-inv.is-expired { --inv-accent: #FF9DAF; --inv-soft: rgba(255, 77, 109, 0.14); }
.bill-inv-head { gap: 12px; padding: 12px 14px; flex-wrap: nowrap; align-items: center; }
.bill-inv-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--inv-accent); background: var(--inv-soft);
}
.bill-inv-ico svg { width: 20px; height: 20px; }
.bill-inv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bill-inv-no {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em;
}
.bill-inv-sub { font-size: 0.78rem; color: var(--text-muted); overflow-wrap: anywhere; }
.bill-inv-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.bill-inv-sum { margin-left: 0; font-size: 1.02rem; font-weight: 800; white-space: nowrap; }
.bill-inv-side .pill { font-size: 0.72rem; white-space: nowrap; }
.bill-inv-body { padding: 12px 16px 14px; border-top: 1px dashed var(--border-color); }
.bill-inv-body .bill-req-doc { margin-top: 10px; }
@media (max-width: 560px) {
  .bill-inv-head { gap: 10px; padding: 11px 12px; }
  .bill-inv-ico { width: 34px; height: 34px; border-radius: 10px; }
  .bill-inv-side .pill { white-space: normal; text-align: right; }
}

/* Промокод (Вениамин 24.09.2026: «сделай красивее»): значок-ярлык, поле и кнопка одной рамкой; введённый
   код — заглавными с разрядкой, подсказка в поле — обычными буквами; принятый код — зелёной плашкой. */
.bill-promo { max-width: 30rem; padding: 14px 16px 15px; }
.bill-promo-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.bill-promo-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--accent-blue); background: var(--accent-glow);
}
.bill-promo-ico svg { width: 16px; height: 16px; }
.bill-promo label { display: inline; margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.bill-promo-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px;
  border: 1.5px solid var(--border-color); border-radius: 12px; background: var(--bg-primary);
  transition: border-color .15s, box-shadow .15s;
}
.bill-promo-row:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 0 3px var(--accent-glow); }
.bill-promo-row .input {
  flex: 1; min-width: 0; padding: 7px 0; border: 0; outline: none; background: transparent; box-shadow: none;
  color: var(--text-primary); font: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bill-promo-row .input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); }
.bill-promo-btn {
  flex: none; border: 0; border-radius: 9px; padding: 8px 14px; font: inherit; font-size: 0.85rem; font-weight: 700;
  color: #fff; background: var(--accent-blue); cursor: pointer; transition: filter .15s;
}
.bill-promo-btn:hover { filter: brightness(1.08); }
.bill-promo-note { margin-top: 9px; font-size: 0.84rem; min-height: 0; }
.bill-promo-note:empty { display: none; }
.bill-promo-note.is-ok {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  color: #047857; background: rgba(16, 185, 129, 0.12); font-weight: 600;
}
.bill-promo-note.is-ok::before { content: "✓"; font-weight: 800; }
body:not(.light-theme) .bill-promo-note.is-ok { color: #6EE7C0; background: rgba(16, 217, 160, 0.14); }
.bill-promo-note.is-bad { color: #DC2626; }
body:not(.light-theme) .bill-promo-note.is-bad { color: #FF9DAF; }
/* Закрытое решение: серые размытые полосы вместо шагов, замок поверх и
   кнопка к оплате. Настоящих шагов в разметке нет — сервер их не присылает. */
.lv-locked { border-style: dashed; background: rgba(100, 116, 139, 0.06); border-color: rgba(100, 116, 139, 0.4); }
.lv-lock-ghost { position: relative; margin-bottom: 10px; }
.lv-lock-lines { display: flex; flex-direction: column; gap: 7px; filter: blur(2.5px); opacity: .7;
  user-select: none; pointer-events: none; }
.lv-lock-lines i { display: block; height: 9px; border-radius: 6px; background: var(--text-muted, #94A3B8); opacity: .45; }
.lv-lock-lines i:nth-child(1) { width: 88%; }
.lv-lock-lines i:nth-child(2) { width: 72%; }
.lv-lock-lines i:nth-child(3) { width: 80%; }
.lv-lock-ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-card, #fff); color: var(--text-primary, #0F172A);
  border: 1px solid var(--border-color, #E2E8F0); box-shadow: 0 4px 14px rgba(15, 23, 42, .18); }
.lv-lock-title { font-weight: 700; margin-bottom: 4px; }
.lv-locked .btn { margin-top: 8px; }
.lv-sample-tag { display: inline-block; align-self: flex-start; width: fit-content; margin-left: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; background: rgba(16, 185, 129, .15); color: #047857; vertical-align: middle; }

/* Плитки оплаты: в style.css у них жёстко светлый фон, и в тёмной теме —
   основной — названия блоков выходили белыми на белом. Берём цвета темы. */
.tariff-preset, .tariff-period { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
.tariff-preset:hover { background: rgba(37, 99, 235, 0.08); }
.tariff-block { border-color: var(--border-color); color: var(--text-primary); }
.tariff-block.is-on { background: rgba(37, 99, 235, 0.12); }
.tariff-period.is-on { background: rgba(37, 99, 235, 0.16); }

/* ================================================================ Работы по 1С — заказ работ (24.09.2026)
   Вкладка кабинета «Работы по 1С»: сверху — что делаем и как проходит заказ, опыт в цифрах, мои заказы и
   каталог работ. У вида работы свой цвет — на значке, полоске и выбранной плитке: обновление синее,
   исправление зелёное, доработка фиолетовая, отчёт янтарный, интеграция бирюзовая, прочее серое. */
.ord-wrap { display: flex; flex-direction: column; gap: 18px; }
.tone-blue   { --tone: #2563eb; --tone-soft: rgba(37, 99, 235, 0.10); }
.tone-green  { --tone: #059669; --tone-soft: rgba(5, 150, 105, 0.11); }
.tone-violet { --tone: #7c3aed; --tone-soft: rgba(124, 58, 237, 0.10); }
.tone-amber  { --tone: #c26a04; --tone-soft: rgba(217, 119, 6, 0.12); }
.tone-cyan   { --tone: #0e7490; --tone-soft: rgba(8, 145, 178, 0.11); }
.tone-slate  { --tone: #475569; --tone-soft: rgba(71, 85, 105, 0.10); }
body:not(.light-theme) .tone-blue   { --tone: #8FB2FF; --tone-soft: rgba(46, 107, 255, 0.16); }
body:not(.light-theme) .tone-green  { --tone: #6EE7C0; --tone-soft: rgba(16, 217, 160, 0.14); }
body:not(.light-theme) .tone-violet { --tone: #C4B0FF; --tone-soft: rgba(139, 92, 246, 0.17); }
body:not(.light-theme) .tone-amber  { --tone: #FFD08A; --tone-soft: rgba(255, 176, 32, 0.15); }
body:not(.light-theme) .tone-cyan   { --tone: #7DD3E8; --tone-soft: rgba(34, 184, 214, 0.15); }
body:not(.light-theme) .tone-slate  { --tone: #B6C2D6; --tone-soft: rgba(148, 163, 184, 0.15); }

/* ---------- шапка: что делаем и 4 шага заказа */
.ord-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 26px; align-items: center; padding: 26px 28px; border-radius: 20px;
  border: 1px solid rgba(46, 107, 255, 0.28);
  background: radial-gradient(120% 140% at 0% 0%, rgba(46, 107, 255, 0.18), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(139, 92, 246, 0.16), transparent 60%), var(--bg-card);
}
body.light-theme .ord-hero {
  background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.10), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(124, 58, 237, 0.09), transparent 60%), #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(37, 99, 235, 0.08);
}
.ord-hero-kicker {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-blue); margin-bottom: 8px;
}
body:not(.light-theme) .ord-hero-kicker { color: #8FB2FF; }
.ord-hero-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 10px;
}
.ord-hero-lead { font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); margin: 0 0 18px; max-width: 34rem; }
.ord-hero-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 12px; font-weight: 700; }
.ord-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ord-hero-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.ord-hero-steps li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color);
}
body.light-theme .ord-hero-steps li { background: rgba(255, 255, 255, 0.75); }
.ord-hero-no {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 0.85rem; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed);
}
.ord-hero-steps b { display: block; font-size: 0.88rem; }
.ord-hero-steps i { display: block; font-style: normal; font-size: 0.76rem; color: var(--text-muted); }
.ord-hero.is-compact { padding: 20px 24px; }
.ord-hero.is-compact .ord-hero-lead { margin-bottom: 14px; }

/* ---------- опыт в цифрах */
.ord-exp { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border-color); background: var(--bg-card); }
body.light-theme .ord-exp { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
.ord-exp-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.ord-exp-head svg { color: #d97706; }
.ord-exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ord-exp-item {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; background: rgba(46, 107, 255, 0.06); border: 1px solid rgba(46, 107, 255, 0.14);
}
.ord-exp-ico {
  grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: var(--accent-blue); background: rgba(46, 107, 255, 0.12);
}
body:not(.light-theme) .ord-exp-ico { color: #8FB2FF; }
.ord-exp-num {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ord-exp-num::after { content: "+"; font-size: 1rem; margin-left: 2px; color: var(--text-muted); }
.ord-exp-title { font-size: 0.78rem; line-height: 1.35; color: var(--text-secondary); }

/* ---------- заголовки разделов вкладки */
.ord-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ord-h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.ord-sec-note { font-size: 0.8rem; color: var(--text-muted); }
.ord-filter { display: inline-flex; padding: 3px; border-radius: 11px; border: 1px solid var(--border-color); background: var(--bg-card); }
.ord-filter button {
  font: inherit; font-size: 0.82rem; border: 0; background: none; color: var(--text-secondary); cursor: pointer;
  padding: 6px 12px; border-radius: 8px;
}
.ord-filter button b { margin-left: 4px; font-weight: 800; }
.ord-filter button.is-on { background: var(--accent-blue); color: #fff; }

/* ---------- каталог работ: карточки разной величины с живыми картинками (24.09.2026, «креативнее намного»)
   «Исправление учёта» — большая, на две колонки: с аудитом связана напрямую, и если он уже что-то нашёл, в ней
   число «осталось исправить» по базам клиента. «Другая работа» — полосой во всю ширину. Картинки оживают при
   наведении и один раз, когда каталог показался на экране; в покое показан готовый результат. */
.ord-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ord-kc {
  --kc-paper: #fff;
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left;
  font: inherit; color: var(--text-primary); cursor: pointer; border-radius: 22px;
  border: 1px solid var(--border-color); background: var(--bg-card);
  transition: transform .22s cubic-bezier(.2, .9, .3, 1), border-color .22s ease, box-shadow .22s ease;
}
body:not(.light-theme) .ord-kc { --kc-paper: rgba(255, 255, 255, 0.07); }
body.light-theme .ord-kc { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); }
.ord-kc:hover { transform: translateY(-4px); border-color: var(--tone); box-shadow: 0 26px 50px -28px var(--tone); }
.ord-kc:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; }
.ord-kc.is-wide { grid-column: span 2; flex-direction: row-reverse; }
.ord-kc-art {
  position: relative; display: grid; place-items: center; min-height: 196px; padding: 22px 20px; overflow: hidden;
  border-bottom: 1px solid var(--border-color);
  background:
    radial-gradient(rgba(100, 116, 139, 0.22) 1px, transparent 1.3px) 0 0 / 14px 14px,
    radial-gradient(120% 90% at 0% 0%, var(--tone-soft), transparent 65%),
    linear-gradient(160deg, var(--tone-soft), transparent 78%);
}
.ord-kc-art::after {
  content: ""; position: absolute; width: 200px; height: 200px; right: -70px; bottom: -90px; border-radius: 50%;
  background: radial-gradient(circle, var(--tone-soft), transparent 70%); pointer-events: none;
}
.ord-kc.is-wide .ord-kc-art { flex: 0 0 46%; min-height: 250px; border-bottom: 0; border-left: 1px solid var(--border-color); }
.ord-kc-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.ord-kc.is-wide .ord-kc-body { justify-content: center; padding: 26px 28px; }
.ord-kc.is-wide .ord-kc-go { margin-top: 10px; }
.ord-kc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ord-kc-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--tone); background: var(--tone-soft);
}
.ord-kc-tag {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; padding: 5px 11px; border-radius: 999px;
  color: var(--tone); background: var(--tone-soft);
}
.ord-kc-name { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; }
.ord-kc.is-wide .ord-kc-name { font-size: 1.4rem; }
.ord-kc-desc { font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); }
.ord-kc-ex { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ord-kc-ex i {
  font-style: normal; font-size: 0.72rem; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px;
  color: var(--text-secondary); background: rgba(100, 116, 139, 0.09);
}
.ord-kc-ex i::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: var(--tone);
}
.ord-kc-go {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 999px; font-size: 0.86rem; font-weight: 800; color: var(--tone); background: var(--tone-soft);
  transition: background .2s ease, color .2s ease;
}
.ord-kc-go svg { transition: transform .2s ease; }
.ord-kc:hover .ord-kc-go { background: var(--tone); color: #fff; }
body:not(.light-theme) .ord-kc:hover .ord-kc-go { color: #0B1426; }
.ord-kc:hover .ord-kc-go svg { transform: translateX(3px); }

/* «Не нашли свою задачу?» — полоса во всю ширину */
.ord-other {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 22px;
  cursor: pointer; font: inherit; text-align: left; color: var(--text-primary);
  border: 1.5px dashed rgba(100, 116, 139, 0.45); background: linear-gradient(100deg, rgba(100, 116, 139, 0.07), transparent 70%);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ord-other:hover { border-style: solid; border-color: var(--accent-blue); transform: translateY(-2px);
  background: linear-gradient(100deg, var(--accent-glow), transparent 70%); }
.ord-other-ico {
  flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: var(--accent-blue); background: var(--accent-glow);
}
body:not(.light-theme) .ord-other-ico { color: #8FB2FF; }
.ord-other-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ord-other-text b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.ord-other-text span { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); }
.ord-other-go {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 800; color: #fff; background: var(--accent-blue);
}

/* ---- картинки карточек */
.kc-scene { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kc-cap { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); }

/* обновление: версия меняется, полоска бежит до конца */
.kc-upd-row { display: flex; align-items: center; gap: 10px; }
.kc-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 11px;
  font: 700 0.86rem 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  background: var(--kc-paper); border: 1px solid var(--border-color); box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.35);
}
.kc-chip.is-old { color: var(--text-muted); text-decoration: line-through; opacity: .85; }
.kc-chip.is-new { color: var(--tone); border-color: var(--tone); box-shadow: 0 0 0 4px var(--tone-soft), 0 10px 22px -12px var(--tone); }
.kc-upd-arrow { display: grid; color: var(--tone); }
.kc-progress { width: 180px; height: 7px; border-radius: 99px; background: rgba(100, 116, 139, 0.18); overflow: hidden; }
.kc-progress i { display: block; height: 100%; border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, var(--tone), #10b981); }
.ord-kc:hover .kc-progress i, .ord-kc.is-play .kc-progress i { animation: kcFill 1.5s cubic-bezier(.3, .8, .3, 1) both; }
.ord-kc:hover .kc-chip.is-new, .ord-kc.is-play .kc-chip.is-new { animation: kcPop .5s 1.35s cubic-bezier(.2, 1.4, .4, 1) both; }

/* исправление учёта: ошибки закрываются по одной */
.kc-fix { gap: 8px; }
.kc-task {
  display: flex; align-items: center; gap: 9px; width: 220px; padding: 8px 11px; border-radius: 11px;
  font-size: 0.8rem; font-weight: 600; background: var(--kc-paper); border: 1px solid var(--border-color);
  box-shadow: 0 6px 16px -12px rgba(15, 23, 42, 0.35);
}
.kc-task i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #10b981; }
.kc-task span { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(16, 185, 129, 0.75); }
.ord-kc:hover .kc-task i, .ord-kc.is-play .kc-task i { animation: kcCheck .42s cubic-bezier(.2, 1.4, .4, 1) both; }
.ord-kc:hover .kc-task span, .ord-kc.is-play .kc-task span { animation: kcStrike .42s ease both; }
.ord-kc:hover .kc-task.t2 i, .ord-kc.is-play .kc-task.t2 i,
.ord-kc:hover .kc-task.t2 span, .ord-kc.is-play .kc-task.t2 span { animation-delay: .45s; }
.ord-kc:hover .kc-task.t3 i, .ord-kc.is-play .kc-task.t3 i,
.ord-kc:hover .kc-task.t3 span, .ord-kc.is-play .kc-task.t3 span { animation-delay: .9s; }
.kc-fix-cap { font-size: 0.74rem; font-weight: 700; color: #059669; }
body:not(.light-theme) .kc-fix-cap { color: #6EE7C0; }

/* исправление учёта, когда аудит уже что-то нашёл: живое число по базам клиента */
.kc-live { gap: 6px; text-align: center; }
.kc-big {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 3.6rem; font-weight: 800; letter-spacing: -0.045em;
  line-height: 1; color: var(--tone); font-variant-numeric: tabular-nums;
}
.kc-big-cap { font-size: 0.8rem; line-height: 1.4; color: var(--text-secondary); max-width: 15rem; }
.kc-bases { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.kc-bases span {
  font-size: 0.74rem; padding: 4px 10px; border-radius: 999px; color: var(--text-secondary);
  background: var(--kc-paper); border: 1px solid var(--border-color);
}
.kc-bases b { color: var(--text-primary); margin-right: 5px; }

/* доработка: в документе появляется новое поле */
.kc-paper {
  width: 212px; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-radius: 12px;
  background: var(--kc-paper); border: 1px solid var(--border-color);
  box-shadow: 0 16px 30px -18px rgba(15, 23, 42, 0.45); transform: rotate(-2.5deg);
}
.kc-paper b { font-size: 0.78rem; font-weight: 800; }
.kc-line { display: flex; align-items: center; gap: 8px; font-size: 0.68rem; color: var(--text-muted); }
.kc-line i { font-style: normal; white-space: nowrap; }
.kc-line u { flex: 1; height: 6px; border-radius: 4px; background: rgba(100, 116, 139, 0.2); text-decoration: none; }
.kc-line u.is-short { flex: 0 0 40%; }
.kc-line.is-new {
  padding: 5px 8px; border-radius: 8px; border: 1.5px dashed var(--tone); background: var(--tone-soft);
  color: var(--tone); font-weight: 800;
}
.ord-kc:hover .kc-paper, .ord-kc.is-play .kc-paper { animation: kcTilt .6s ease both; }
.ord-kc:hover .kc-line.is-new, .ord-kc.is-play .kc-line.is-new { animation: kcSlide .55s .2s cubic-bezier(.2, 1.2, .4, 1) both; }

/* отчёт: растут столбики */
.kc-bars { display: flex; align-items: flex-end; gap: 9px; height: 96px; padding: 0 6px; border-bottom: 2px solid rgba(100, 116, 139, 0.3); }
.kc-bars i {
  width: 18px; height: var(--h); border-radius: 6px 6px 2px 2px; transform-origin: bottom; opacity: .72;
  background: linear-gradient(180deg, var(--tone), var(--tone-soft));
}
.kc-bars i:last-child { opacity: 1; box-shadow: 0 0 0 3px var(--tone-soft); }
.ord-kc:hover .kc-bars i, .ord-kc.is-play .kc-bars i { animation: kcGrow .7s var(--d) cubic-bezier(.2, 1, .3, 1) both; }

/* интеграция: по линии 1С ⇄ Банк бегут данные */
.kc-link { flex-direction: row; gap: 0; }
.kc-node {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  font: 800 0.92rem 'Plus Jakarta Sans', 'Inter', sans-serif; color: var(--tone);
  background: var(--kc-paper); border: 1.5px solid var(--tone); box-shadow: 0 0 0 5px var(--tone-soft);
}
.kc-node.is-b { font-size: 0.8rem; }
.kc-wire {
  position: relative; width: 96px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--tone) 0 6px, transparent 6px 11px);
}
.kc-wire i {
  position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--tone); box-shadow: 0 0 10px var(--tone); animation: kcFlow 2.6s linear infinite;
}
.kc-wire i:nth-child(2) { animation-delay: .87s; }
.kc-wire i:nth-child(3) { animation-delay: 1.74s; animation-direction: reverse; background: #10b981; box-shadow: 0 0 10px #10b981; }

@keyframes kcFill  { from { transform: scaleX(0); } }
@keyframes kcPop   { from { transform: scale(.7); opacity: 0; } }
@keyframes kcCheck { from { transform: scale(0); } }
@keyframes kcStrike { from { text-decoration-color: transparent; color: var(--text-primary); } }
@keyframes kcTilt  { from { transform: rotate(0deg); } }
@keyframes kcSlide { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@keyframes kcGrow  { from { transform: scaleY(.08); } }
@keyframes kcFlow  { from { left: -5px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: calc(100% - 5px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ord-kc, .ord-kc * { animation: none !important; transition: none !important; }
}
@media (max-width: 980px) {
  .ord-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ord-kc.is-wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ord-bento { grid-template-columns: 1fr; }
  .ord-kc.is-wide { flex-direction: column; }
  .ord-kc.is-wide .ord-kc-art { flex: none; min-height: 196px; border-left: 0; border-bottom: 1px solid var(--border-color); }
  .ord-kc.is-wide .ord-kc-body { padding: 18px 20px 20px; }
  .ord-kc.is-wide .ord-kc-name { font-size: 1.15rem; }
  .ord-other { flex-wrap: wrap; }
  .ord-other-go { width: 100%; justify-content: center; }
}

/* ---------- мои заказы */
.ord-list { display: flex; flex-direction: column; gap: 10px; }
.ord-empty { padding: 18px; border-radius: 14px; border: 1px dashed var(--border-color); color: var(--text-muted); font-size: 0.88rem; }
.ord-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%;
  text-align: left; font: inherit; color: var(--text-primary); cursor: pointer; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--border-color); background: var(--bg-card); transition: border-color .16s, box-shadow .16s, transform .16s;
}
body.light-theme .ord-card { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
.ord-card:hover { border-color: var(--tone); transform: translateY(-1px); }
.ord-card.is-attn { border-color: rgba(217, 119, 6, 0.55); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12); }
.ord-card-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--tone); background: var(--tone-soft);
}
.ord-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ord-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ord-card-no { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); }
.ord-card-title { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ord-card-meta { font-size: 0.78rem; color: var(--text-muted); }
.ord-card-hint { font-size: 0.82rem; color: var(--text-secondary); }
.ord-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ord-card-price { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; }
.ord-card-price b { color: var(--text-primary); font-size: 0.95rem; }
.ord-unread {
  font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #fff; background: #dc2626;
}
.ord-pill { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ord-pill.is-blue   { color: #1d4ed8; background: rgba(37, 99, 235, 0.11); }
.ord-pill.is-amber  { color: #9a5b04; background: rgba(245, 158, 11, 0.16); }
.ord-pill.is-violet { color: #6d28d9; background: rgba(124, 58, 237, 0.11); }
.ord-pill.is-green  { color: #047857; background: rgba(16, 185, 129, 0.13); }
.ord-pill.is-grey   { color: #475569; background: rgba(100, 116, 139, 0.13); }
body:not(.light-theme) .ord-pill.is-blue   { color: #A9C6FF; background: rgba(46, 107, 255, 0.18); }
body:not(.light-theme) .ord-pill.is-amber  { color: #FFD08A; background: rgba(255, 176, 32, 0.16); }
body:not(.light-theme) .ord-pill.is-violet { color: #C4B0FF; background: rgba(139, 92, 246, 0.18); }
body:not(.light-theme) .ord-pill.is-green  { color: #6EE7C0; background: rgba(16, 217, 160, 0.15); }
body:not(.light-theme) .ord-pill.is-grey   { color: #B6C2D6; background: rgba(148, 163, 184, 0.16); }

/* ---------- шаги заказа */
.ord-steps { display: flex; align-items: center; gap: 0; }
.ord-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.ord-step-dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  border: 2px solid var(--border-color); background: var(--bg-card); color: #fff;
}
.ord-step-name { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ord-step-line { flex: 1 1 auto; height: 2px; min-width: 10px; background: var(--border-color); margin: 0 4px 22px; }
.ord-step.is-done .ord-step-dot { border-color: #10b981; background: #10b981; }
.ord-step.is-now .ord-step-dot { border-color: var(--accent-blue); background: var(--accent-blue); box-shadow: 0 0 0 4px var(--accent-glow); }
.ord-step.is-now .ord-step-name { color: var(--text-primary); font-weight: 800; }
.ord-step.is-done .ord-step-name { color: var(--text-secondary); }
.ord-steps.is-compact .ord-step-dot { width: 12px; height: 12px; border-width: 2px; }
.ord-steps.is-compact .ord-step-dot svg { display: none; }
.ord-steps.is-compact .ord-step-line { margin: 0 2px; min-width: 8px; width: 10px; flex: none; }
.ord-steps.is-off { opacity: .45; }

/* ---------- окна заказа */
.pf-modal.ord-modal.is-wide { max-width: 760px; }
.ord-field-label { font-size: 0.84rem; font-weight: 700; margin: 16px 0 8px; }
.ord-field-label:first-child { margin-top: 0; }
.ord-opt { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; margin-left: 4px; }
.ord-kind-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; outline: none; }
.ord-kp {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 12px; cursor: pointer; text-align: left;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--text-primary);
  border: 1.5px solid var(--border-color); background: var(--bg-card); transition: border-color .15s, box-shadow .15s;
}
.ord-kp:hover { border-color: var(--tone); }
.ord-kp.is-on { border-color: var(--tone); box-shadow: 0 0 0 3px var(--tone-soft); }
.ord-kp-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--tone); background: var(--tone-soft); }
.ord-textarea { resize: vertical; min-height: 92px; line-height: 1.5; font: inherit; font-size: 0.9rem; }
.ord-row2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.ord-seg { display: inline-flex; width: 100%; padding: 3px; border-radius: 11px; border: 1px solid var(--border-color); background: var(--bg-primary); }
.ord-seg button { flex: 1; font: inherit; font-size: 0.86rem; border: 0; background: none; color: var(--text-secondary); padding: 8px; border-radius: 8px; cursor: pointer; }
.ord-seg button.is-on { background: var(--bg-card); color: var(--text-primary); font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18); }
.ord-row2.is-upd { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); align-items: start; }
.ord-conf-other { margin-top: 8px; }
/* Срочность: у каждого варианта — как берём в работу; у срочного — надбавка и свой цвет. */
.ord-seg.is-urgency button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 8px; }
.ord-seg.is-urgency button b { font-size: 0.86rem; }
.ord-seg.is-urgency button i { font-style: normal; font-size: 0.7rem; font-weight: 500; color: var(--text-muted); }
.ord-seg.is-urgency button.is-urgent { color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706); }
.ord-seg.is-urgency button.is-urgent i { color: rgba(255, 255, 255, 0.88); }
.ord-urg-note {
  display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); background: rgba(100, 116, 139, 0.08);
}
.ord-urg-note svg { flex: none; margin-top: 1px; color: var(--text-muted); }
.ord-urg-note.is-urgent { color: #92400e; background: rgba(245, 158, 11, 0.11); }
.ord-urg-note.is-urgent svg { color: #d97706; }
body:not(.light-theme) .ord-urg-note.is-urgent { color: #FFD08A; }
/* Раскрывающиеся списки в тёмной теме: пункты тёмные, иначе браузер рисует белый список с белым текстом. */
body:not(.light-theme) select { color-scheme: dark; }
body:not(.light-theme) select option { background: #101a2e; color: #e2e8f0; }
.ord-drop {
  display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed var(--border-color); color: var(--text-secondary); font-size: 0.86rem; transition: border-color .15s, background .15s;
}
.ord-drop input { display: none; }
.ord-drop:hover, .ord-drop.is-over { border-color: var(--accent-blue); background: var(--accent-glow); color: var(--text-primary); }
.ord-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ord-file {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; padding: 4px 6px 4px 9px; border-radius: 9px;
  background: var(--accent-glow); color: var(--text-primary);
}
.ord-file button { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 0 3px; }
.ord-new-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color);
}
.ord-new-foot p { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.8rem; color: var(--text-secondary); max-width: 30rem; }
.ord-new-foot p svg { flex: none; color: #10b981; margin-top: 1px; }

.ord-sent { text-align: center; padding: 10px 6px 4px; }
.ord-sent-mark {
  display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 14px 34px -12px rgba(16, 185, 129, 0.6);
  animation: ordPop .45s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes ordPop { from { transform: scale(.4); opacity: 0; } }
.ord-sent h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.25rem; font-weight: 800; margin: 14px 0 6px; }
.ord-sent p { color: var(--text-secondary); font-size: 0.9rem; margin: 0 auto 18px; max-width: 28rem; line-height: 1.55; }
.ord-sent .ord-steps { max-width: 520px; margin: 0 auto 20px; }
.ord-sent-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.ord-view { display: flex; flex-direction: column; gap: 16px; }
.ord-view-head { display: flex; align-items: center; gap: 12px; }
.ord-view-head > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ord-view-title { font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
.ord-act {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--ab, var(--border-color)); background: var(--as, transparent);
}
.ord-act > svg { flex: none; color: var(--ac, var(--text-secondary)); margin-top: 2px; }
/* Текст рядом со значком — на всю ширину плашки: иначе форма платёжки сжималась и подсказка в поле обрезалась. */
.ord-act > div { flex: 1; min-width: 0; }
.ord-act b { display: block; font-size: 0.95rem; margin-bottom: 3px; }
.ord-act p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); }
.ord-act.is-blue   { --ac: #2563eb; --as: rgba(37, 99, 235, 0.06); --ab: rgba(37, 99, 235, 0.22); }
.ord-act.is-amber  { --ac: #d97706; --as: rgba(245, 158, 11, 0.07); --ab: rgba(217, 119, 6, 0.28); }
.ord-act.is-violet { --ac: #7c3aed; --as: rgba(124, 58, 237, 0.06); --ab: rgba(124, 58, 237, 0.24); }
.ord-act.is-green  { --ac: #059669; --as: rgba(16, 185, 129, 0.07); --ab: rgba(16, 185, 129, 0.26); }
.ord-act.is-grey   { --ac: #64748b; --as: rgba(100, 116, 139, 0.07); --ab: rgba(100, 116, 139, 0.22); }
.ord-act-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ord-act-note { font-size: 0.8rem; color: var(--text-muted); margin: 8px 0 0; line-height: 1.5; }
/* Платёжка по счёту заказа — в самом заказе: файл, номер поручения, «Отправить». */
.ord-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 10px 12px;
           border-radius: 12px; background: var(--bg-card); border: 1px dashed var(--border-color); }
.ord-pay .ord-attach { max-width: 100%; color: var(--text-primary); font-weight: 600; }
.ord-pay .form-input { flex: 1 1 200px; min-width: 0; }
.ord-offer {
  padding: 16px 18px; border-radius: 18px; border: 1.5px solid rgba(217, 119, 6, 0.4);
  background: linear-gradient(160deg, rgba(245, 158, 11, 0.08), transparent 60%);
}
.ord-offer.is-review { border-color: rgba(16, 185, 129, 0.45); background: linear-gradient(160deg, rgba(16, 185, 129, 0.08), transparent 60%); }
.ord-offer-head { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #b45309; margin-bottom: 10px; }
.ord-offer.is-review .ord-offer-head { color: #047857; }
body:not(.light-theme) .ord-offer-head { color: #FFD08A; }
body:not(.light-theme) .ord-offer.is-review .ord-offer-head { color: #6EE7C0; }
.ord-offer-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ord-offer-nums > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); }
.ord-offer-nums span { display: block; font-size: 0.74rem; color: var(--text-muted); margin-bottom: 4px; }
.ord-offer-nums b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.ord-offer-nums i { display: block; font-style: normal; font-size: 0.74rem; color: var(--text-muted); }
.ord-offer-note { margin-top: 12px; font-size: 0.86rem; line-height: 1.55; white-space: pre-wrap; }
.ord-offer-note span { display: block; font-size: 0.74rem; color: var(--text-muted); margin-bottom: 3px; }
.ord-offer-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ord-ask { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ord-ask .btn { align-self: flex-start; }
.ord-task { border: 1px solid var(--border-color); border-radius: 14px; padding: 10px 14px; }
.ord-task summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; }
.ord-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin-top: 10px; }
.ord-facts span { display: block; font-size: 0.72rem; color: var(--text-muted); }
.ord-facts b { font-size: 0.86rem; font-weight: 600; }
.ord-task-text { margin-top: 10px; font-size: 0.88rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); }
.ord-chat-head { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: -6px; }
.ord-chat {
  display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding: 12px;
  border-radius: 16px; background: var(--bg-primary); border: 1px solid var(--border-color);
}
.ord-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 0.88rem; line-height: 1.5; }
.ord-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; font-size: 0.74rem; }
.ord-msg-head b { font-weight: 700; }
.ord-msg-head i { font-style: normal; color: var(--text-muted); margin-left: auto; }
.ord-msg-head em { font-style: normal; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: #9a5b04; background: rgba(245, 158, 11, 0.18); }
.ord-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ord-msg.is-them { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border-color); border-bottom-left-radius: 5px; }
.ord-msg.is-mine { align-self: flex-end; background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.2); border-bottom-right-radius: 5px; }
body:not(.light-theme) .ord-msg.is-mine { background: rgba(46, 107, 255, 0.18); border-color: rgba(46, 107, 255, 0.3); }
.ord-msg.is-system {
  align-self: center; max-width: 92%; display: flex; gap: 8px; align-items: baseline; padding: 4px 12px; border-radius: 999px;
  font-size: 0.76rem; color: var(--text-secondary); background: rgba(100, 116, 139, 0.1);
}
.ord-msg.is-system i { font-style: normal; color: var(--text-muted); font-size: 0.7rem; white-space: nowrap; }
/* Сообщение, пришедшее, пока окно открыто, — мягко проявляется, чтобы было видно, что оно новое. */
.ord-msg.is-fresh { animation: ordMsgFresh 0.45s ease-out both; }
@keyframes ordMsgFresh { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ord-msg.is-fresh { animation: none; } }
.ord-msg-file {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 9px; border-radius: 9px; font-size: 0.8rem;
  color: var(--text-primary); text-decoration: none; background: rgba(100, 116, 139, 0.1); border: 1px solid var(--border-color);
}
.ord-msg-file i { font-style: normal; color: var(--text-muted); font-size: 0.72rem; }
.ord-msg-file:hover { border-color: var(--accent-blue); }
.ord-compose { display: flex; flex-direction: column; gap: 8px; }
.ord-compose textarea { resize: vertical; min-height: 58px; font: inherit; font-size: 0.9rem; }
.ord-compose-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ord-compose-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.ord-attach { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.82rem; color: var(--text-secondary); max-width: 60%; }
.ord-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-attach input { display: none; }
.ord-attach:hover { color: var(--text-primary); }
.ord-cancel-row { border-top: 1px dashed var(--border-color); padding-top: 12px; }
.ord-link { border: 0; background: none; padding: 0; font: inherit; font-size: 0.82rem; color: #dc2626; cursor: pointer; text-decoration: underline; }
body:not(.light-theme) .ord-link { color: #FF9DAF; }

/* ---------- из живого отчёта аудита: «исправим за вас» */
.ord-audit-cta {
  display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid rgba(16, 185, 129, 0.3); background: linear-gradient(120deg, rgba(16, 185, 129, 0.08), transparent 70%);
}
.ord-audit-cta > div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; }
.ord-audit-cta > div span { color: var(--text-secondary); font-size: 0.82rem; }
.ord-audit-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #059669; background: rgba(16, 185, 129, 0.13); }
body:not(.light-theme) .ord-audit-ico { color: #6EE7C0; }

/* ---------- счётчик на вкладке */
.ord-tab-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; color: #fff; background: #d97706; vertical-align: 1px;
}
.ord-tab-badge[hidden] { display: none; }

@media (max-width: 760px) {
  .ord-hero { grid-template-columns: 1fr; padding: 20px 18px; }
  .ord-card { grid-template-columns: auto minmax(0, 1fr); }
  .ord-card-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .ord-kind-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ord-row2 { grid-template-columns: 1fr; }
  .ord-offer-nums { grid-template-columns: 1fr 1fr; }
  .ord-msg { max-width: 92%; }
  .ord-step-name { font-size: 0.62rem; }
  .ord-audit-cta { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .ord-steps:not(.is-compact) .ord-step-name { display: none; }
  .ord-steps:not(.is-compact) .ord-step-line { margin-bottom: 0; }
}

/* ================================================================ Главная: работы по 1С (24.09.2026)
   Шесть видов работ плитками, путь заказа в четыре шага линией, опыт в цифрах (только когда владелец
   завёл числа) и кнопка в кабинет. Цвета видов — те же, что во вкладке кабинета. */
/* Иллюстрация раздела (Vertex AI, Nano Banana, 24.09.2026): слева заголовок, справа картинка в скруглённой рамке.
   Картинка тёмная — «тёмный остров» и в светлой теме, как первый экран и живой отчёт. */
.nx-works-top {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 44px; align-items: center;
  margin-bottom: 52px;
}
.nx-works-top .nx-works-head { text-align: left; margin: 0; max-width: none; }
.nx-works-art {
  position: relative; margin: 0; overflow: hidden; border-radius: 26px; background: #0B1426;
  border: 1px solid rgba(143, 178, 255, 0.22);
  box-shadow: 0 40px 80px -40px rgba(47, 98, 214, 0.55);
}
.nx-works-art img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.nx-works-art:hover img { transform: scale(1.03); }
.nx-works-art::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(11, 20, 38, 0.55);
}
body.light-theme .nx-works-art { border-color: rgba(11, 18, 32, 0.1); box-shadow: 0 34px 70px -36px rgba(23, 42, 86, 0.45); }
@media (max-width: 900px) {
  .nx-works-top { grid-template-columns: 1fr; gap: 26px; margin-bottom: 36px; }
  .nx-works-top .nx-works-head { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .nx-works-art img { transition: none; } }

.nx-works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nx-work {
  position: relative; padding: 24px 22px 22px; border-radius: var(--nx-r-lg, 24px); overflow: hidden;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--nx-line); transition: transform .28s cubic-bezier(.2, .9, .3, 1), border-color .28s ease;
}
.nx-work::after {
  content: ""; position: absolute; width: 240px; height: 240px; top: -130px; right: -100px; pointer-events: none;
  background: radial-gradient(circle, var(--wc-glow), transparent 65%);
}
.nx-work:hover { transform: translateY(-5px); border-color: var(--wc-line); }
.nx-work-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
  color: var(--wc); background: var(--wc-soft); border: 1px solid var(--wc-line);
}
.nx-work h3 { font-family: var(--nx-disp); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 8px; }
.nx-work p { font-size: 0.9rem; line-height: 1.6; color: var(--nx-txt-2); margin: 0; position: relative; }
.nx-w-blue   { --wc: #8FB2FF; --wc-soft: rgba(46, 107, 255, 0.14); --wc-line: rgba(46, 107, 255, 0.34); --wc-glow: rgba(46, 107, 255, 0.14); }
.nx-w-green  { --wc: #93C4B1; --wc-soft: rgba(16, 217, 160, 0.13); --wc-line: rgba(16, 217, 160, 0.32); --wc-glow: rgba(16, 217, 160, 0.12); }
.nx-w-violet { --wc: #C4B0FF; --wc-soft: rgba(139, 92, 246, 0.15); --wc-line: rgba(139, 92, 246, 0.34); --wc-glow: rgba(139, 92, 246, 0.14); }
.nx-w-amber  { --wc: #FFCE72; --wc-soft: rgba(255, 176, 32, 0.13); --wc-line: rgba(255, 176, 32, 0.32); --wc-glow: rgba(255, 176, 32, 0.11); }
.nx-w-cyan   { --wc: #7DD3E8; --wc-soft: rgba(34, 184, 214, 0.13); --wc-line: rgba(34, 184, 214, 0.32); --wc-glow: rgba(34, 184, 214, 0.12); }
.nx-w-slate  { --wc: #B6C2D6; --wc-soft: rgba(148, 163, 184, 0.13); --wc-line: rgba(148, 163, 184, 0.3); --wc-glow: rgba(148, 163, 184, 0.10); }

.nx-works-flow-wrap { margin-top: 44px; }
.nx-works-flow-title, .nx-works-exp-title {
  text-align: center; font-family: var(--nx-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--nx-txt-2); margin-bottom: 22px;
}
.nx-works-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nx-works-flow::before {
  content: ""; position: absolute; top: 22px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, rgba(46, 107, 255, 0.6), rgba(139, 92, 246, 0.6), rgba(16, 217, 160, 0.6));
}
.nx-wf-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.nx-wf-no {
  position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--nx-disp); font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, #2F62D6, #7c3aed); box-shadow: 0 0 0 7px var(--nx-bg), 0 14px 30px -12px rgba(47, 98, 214, 0.8);
  margin-bottom: 8px;
}
.nx-wf-step b { font-family: var(--nx-disp); font-size: 1rem; font-weight: 800; color: #fff; }
.nx-wf-step span:last-child { font-size: 0.84rem; color: var(--nx-txt-2); }

.nx-works-exp { margin-top: 44px; }
.nx-works-exp-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.nx-we-item {
  min-width: 180px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 22px;
  border-radius: 18px; text-align: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--nx-line);
}
.nx-we-ico { color: #93C4B1; margin-bottom: 2px; }
.nx-we-num { font-family: var(--nx-disp); font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1.1; }
.nx-we-num.ord-exp-num::after { color: #93C4B1; font-size: 1.3rem; }
.nx-we-title { font-size: 0.84rem; color: var(--nx-txt-2); max-width: 14rem; }

.nx-works-cta { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 40px; }
.nx-works-cta .btn { padding: 14px 30px; font-size: 1rem; border-radius: 14px; }
/* «Написать менеджеру» рядом с заказом через кабинет (09.10.2026) */
.nx-works-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nx-works-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; padding: 0; }
.nx-works-trust li { position: relative; padding-left: 22px; font-size: 0.88rem; color: var(--nx-txt-2); }
.nx-works-trust li::before {
  content: ""; position: absolute; left: 5px; top: 3px; width: 5px; height: 10px;
  border: solid #4E9E82; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

body.light-theme .nx-work, body.light-theme .nx-we-item {
  background: #fff; border-color: rgba(11, 18, 32, 0.09); box-shadow: 0 12px 34px -22px rgba(23, 42, 86, 0.35);
}
body.light-theme .nx-work h3, body.light-theme .nx-wf-step b, body.light-theme .nx-we-num { color: #0B1220; }
body.light-theme .nx-w-blue   { --wc: #2049D6; }
body.light-theme .nx-w-green  { --wc: #07775A; }
body.light-theme .nx-w-violet { --wc: #6d28d9; }
body.light-theme .nx-w-amber  { --wc: #9A6206; }
body.light-theme .nx-w-cyan   { --wc: #0e7490; }
body.light-theme .nx-w-slate  { --wc: #475569; }
body.light-theme .nx-we-ico { color: #07775A; }
body.light-theme .nx-wf-no { box-shadow: 0 0 0 7px #EDF1F8, 0 14px 30px -12px rgba(47, 98, 214, 0.6); }

@media (max-width: 900px) {
  .nx-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-works-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .nx-works-flow::before { display: none; }
}
@media (max-width: 560px) {
  .nx-works-grid { grid-template-columns: 1fr; }
  .nx-we-item { min-width: 0; flex: 1 1 140px; }
}

/* ================================================================ Главная: «Свой программист-админ 1С» (13.10.2026)
   Тёмный остров с коралловым свечением (цвет осьминога-талисмана), слева условия и цена, справа осьминог из рекламы
   «Счётчик». Кнопка WhatsApp — зелёная, как в рекламе. В светлой теме остров остаётся тёмным, как первый экран. */
.nx-abon { padding-top: 56px; padding-bottom: 56px; }
.nx-abon-box {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; align-items: center;
  padding: 44px 44px 40px; border-radius: 30px; overflow: hidden;
  background: radial-gradient(620px 320px at 88% 0%, rgba(255, 107, 74, 0.20), transparent 62%),
              linear-gradient(165deg, #0E1424, #080C18);
  border: 1px solid rgba(255, 107, 74, 0.32); box-shadow: 0 44px 90px -44px rgba(255, 107, 74, 0.45);
}
.nx-badge-coral { background: #D9573A; box-shadow: 0 12px 26px -14px rgba(217, 87, 58, 0.8); }
.nx-abon .nx-abon-h { text-align: left; margin: 14px 0 10px; color: #fff; }
/* остров тёмный и в светлой теме: заголовок и вторая кнопка — светлые (иначе светлая тема красит их в тёмное) */
body.light-theme .nx-abon .nx-abon-h { color: #fff; }
body.light-theme .nx-abon .nx-abon-lead { color: #B7C2D8; }
.nx-abon .nx-abon-lead { text-align: left; margin: 0 0 20px; max-width: 38rem; color: #B7C2D8; }
.nx-abon-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.nx-abon-list li { position: relative; padding-left: 30px; color: #EEF2FB; font-size: 0.98rem; line-height: 1.45; }
.nx-abon-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(78, 158, 130, 0.22); border: 1px solid rgba(78, 158, 130, 0.6);
}
.nx-abon-list li::after {
  content: ""; position: absolute; left: 7px; top: 6px; width: 5px; height: 9px;
  border: solid #93C4B1; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.nx-abon-buy { display: grid; gap: 16px; }
.nx-abon-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.nx-abon-old { color: #8C97AE; font-size: 1.15rem; font-weight: 700; text-decoration-color: #F43F5E; text-decoration-thickness: 3px; }
.nx-abon-new { font-family: 'Inter', system-ui, sans-serif; font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em;
  color: #FF8A6E; text-shadow: 0 10px 30px rgba(255, 107, 74, 0.35); }
.nx-abon-per { flex-basis: 100%; color: #B7C2D8; font-size: 0.92rem; }
.nx-abon-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.nx-abon-btns .btn { padding: 14px 26px; font-size: 1rem; border-radius: 14px; }
.nx-abon .nx-abon-wa { color: #fff; background: #1FA855; border: 1px solid #1FA855; box-shadow: 0 18px 40px -16px rgba(31, 168, 85, 0.9); }
.nx-abon .nx-abon-wa:hover { background: #22B95E; border-color: #22B95E; transform: translateY(-1px); }
.nx-abon .btn-outline, body.light-theme .nx-abon .btn-outline { color: #EEF2FB; border-color: rgba(255, 255, 255, 0.28); background: transparent; box-shadow: none; }
.nx-abon .btn-outline:hover, body.light-theme .nx-abon .btn-outline:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); }
.nx-abon-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.nx-abon-terms li { position: relative; padding-left: 20px; color: #9BA9C4; font-size: 0.86rem; }
.nx-abon-terms li::before {
  content: ""; position: absolute; left: 4px; top: 3px; width: 5px; height: 10px;
  border: solid #4E9E82; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.nx-abon-art { margin: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.nx-abon-art img { display: block; width: 100%; height: auto; }
body.light-theme .nx-abon-box { box-shadow: 0 34px 70px -36px rgba(23, 42, 86, 0.45); }
@media (max-width: 900px) {
  .nx-abon-box { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px 26px; border-radius: 24px; }
  .nx-abon-art { order: -1; max-height: 300px; }
  .nx-abon-art img { height: 300px; object-fit: cover; object-position: 50% 30%; }
  .nx-abon-new { font-size: 2.2rem; }
  .nx-abon-btns .btn { flex: 1 1 100%; }
}

/* ================================================================ Эффекты (24.09.2026) — Portal/fx.js
   Украшения без смысловой нагрузки: свечение за курсором, наклон и блик на иллюстрациях, подсветка раздела в меню,
   прорисовка лент шагов, плавное появление вкладок кабинета, конфетти, бегущая рамка у главных карточек.
   Всё, что прячет или сдвигает элементы, — только под html.fx-on (его ставит fx.js), поэтому без файла эффектов
   ничего не пропадает. Системная настройка «уменьшить движение» выключает всё. */

/* ---- свечение за курсором */
.fx-spot {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(380px circle at var(--fx-x, 50%) var(--fx-y, 50%),
                              var(--fx-spot, rgba(46, 107, 255, 0.10)), transparent 62%);
}
*:hover > .fx-spot { opacity: 1; }
body:not(.light-theme) .fx-spot { mix-blend-mode: screen; }
.ord-kc { --fx-spot: var(--tone-soft); }
.nx-work { --fx-spot: var(--wc-soft); }
.ord-card, .ord-other { position: relative; }

/* ---- иллюстрации: наклон за курсором и редкий блик */
html.fx-on .nx-works-art img, html.fx-on .fx-tilt img {
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) scale(1.045);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
html.fx-on .nx-works-art::before, html.fx-on .fx-tilt::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.13) 50%, transparent 62%);
  transform: translateX(-130%); animation: fxShine 8s ease-in-out 1.5s infinite;
}
.fx-float { animation: fxFloat 7s ease-in-out infinite; }
@keyframes fxShine { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes fxFloat { 50% { transform: translateY(-7px); } }

/* ---- меню главной: раздел на экране */
.nx-nav-link.is-here { color: var(--nx-txt); }
body.light-theme .nx-nav-link.is-here { color: #0B1220; }
.nx-nav-link.is-here::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #2F62D6, #7C3AED); animation: fxUnder .35s cubic-bezier(.2, .8, .2, 1) both;
  transform-origin: left;
}
@keyframes fxUnder { from { transform: scaleX(0); } }

/* ---- «Как проходит заказ»: линия прорисовывается, номера загораются по очереди */
html.fx-on .nx-works-flow::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) .15s; }
html.fx-on .nx-works-flow.fx-in::before { transform: none; }
html.fx-on .nx-works-flow .nx-wf-no { transform: scale(.3); opacity: 0; transition: transform .55s cubic-bezier(.2, 1.4, .4, 1), opacity .35s ease; }
html.fx-on .nx-works-flow.fx-in .nx-wf-no { transform: none; opacity: 1; }
html.fx-on .nx-works-flow .nx-wf-step:nth-child(2) .nx-wf-no { transition-delay: .4s; }
html.fx-on .nx-works-flow .nx-wf-step:nth-child(3) .nx-wf-no { transition-delay: .8s; }
html.fx-on .nx-works-flow .nx-wf-step:nth-child(4) .nx-wf-no { transition-delay: 1.2s; }

/* ---- «Подключение за 3 шага»: полосы прорастают сверху, точки загораются */
html.fx-on .nx-steps .nx-step-rail { transform: scaleY(0); transform-origin: top; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
html.fx-on .nx-steps.fx-in .nx-step-rail { transform: none; }
html.fx-on .nx-steps .nx-step-dot { transform: scale(0); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1) .5s; }
html.fx-on .nx-steps.fx-in .nx-step-dot { transform: none; }
html.fx-on .nx-steps .nx-step:nth-child(2) .nx-step-rail { transition-delay: .3s; }
html.fx-on .nx-steps .nx-step:nth-child(3) .nx-step-rail { transition-delay: .6s; }
html.fx-on .nx-steps .nx-step:nth-child(2) .nx-step-dot { transition-delay: .8s; }
html.fx-on .nx-steps .nx-step:nth-child(3) .nx-step-dot { transition-delay: 1.1s; }

/* ---- кабинет: вкладка и карточки появляются плавно. Список баз сюда не входит: пока идёт аудит, он
   перерисовывается каждые 12 секунд, и карточки «всплывали» бы снова и снова. */
html.fx-on .dash-tab-content.active { animation: fxTabIn .38s cubic-bezier(.2, .8, .2, 1) backwards; }
html.fx-on .ord-bento > *, html.fx-on .ord-list > *, html.fx-on .bill-invoices > * {
  animation: fxRise .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
html.fx-on .ord-bento > :nth-child(2), html.fx-on .ord-list > :nth-child(2), html.fx-on .bill-invoices > :nth-child(2) { animation-delay: .05s; }
html.fx-on .ord-bento > :nth-child(3), html.fx-on .ord-list > :nth-child(3), html.fx-on .bill-invoices > :nth-child(3) { animation-delay: .1s; }
html.fx-on .ord-bento > :nth-child(4), html.fx-on .ord-list > :nth-child(4), html.fx-on .bill-invoices > :nth-child(4) { animation-delay: .15s; }
html.fx-on .ord-bento > :nth-child(5), html.fx-on .ord-list > :nth-child(5), html.fx-on .bill-invoices > :nth-child(5) { animation-delay: .2s; }
html.fx-on .ord-bento > :nth-child(n+6), html.fx-on .ord-list > :nth-child(n+6),
html.fx-on .bill-invoices > :nth-child(n+6) { animation-delay: .25s; }
@keyframes fxTabIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes fxRise { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* ---- шаги заказа: пройденный отрезок заливается зелёным */
html.fx-on .ord-step.is-done + .ord-step-line { background: #10b981; transform-origin: left; animation: fxLine .55s ease both; }
@keyframes fxLine { from { transform: scaleX(0); } }

/* ---- бегущая светящаяся рамка у главных карточек */
@property --fx-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
html.fx-on .ord-kc.is-wide::before, html.fx-on .offer-tier.is-top::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--fx-angle), transparent 0deg 240deg, var(--fx-beam, #7C3AED) 295deg,
                             #22D3EE 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxBeam 5s linear infinite;
}
.ord-kc.is-wide { --fx-beam: var(--tone); }
.offer-tier.is-top { --fx-beam: #10B981; }
@keyframes fxBeam { to { --fx-angle: 360deg; } }

/* ---- конфетти */
.fx-confetti { position: fixed; inset: 0; z-index: 2000; pointer-events: none; overflow: hidden; }
.fx-confetti i { position: absolute; display: block; }

/* ---- меню главной: лишние пункты прячутся по факту нехватки места (fitLandingNav в app.js) */
.nx-nav-links { overflow: hidden; }
.nx-nav-links a.nav-fold { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fx-float, .fx-spot, .nx-nav-link.is-here::after { animation: none !important; transition: none !important; }
}

/* ---- объёмные значки видов работ (Vertex AI, 24.09.2026): на главной и в кабинете */
.nx-work-ico.is-3d {
  width: 56px; height: 56px; border-radius: 16px; background: none; border: 0; overflow: visible;
  filter: drop-shadow(0 12px 18px var(--wc-glow)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}
.nx-work-ico.is-3d img, .ord-ico3d { display: block; width: 100%; height: 100%; border-radius: 26%; }
.nx-work-ico.is-3d img { transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.nx-work:hover .nx-work-ico.is-3d img { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
body.light-theme .nx-work-ico.is-3d { filter: drop-shadow(0 10px 16px rgba(23, 42, 86, 0.18)); }
.ord-kc-ico.has-3d, .ord-card-ico.has-3d, .ord-kp-ico.has-3d, .ord-other-ico.has-3d {
  background: none; border: 0; padding: 0; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.22));
}
.ord-kc-ico.has-3d { width: 46px; height: 46px; }
.ord-kc-ico.has-3d .ord-ico3d { transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.ord-kc:hover .ord-kc-ico.has-3d .ord-ico3d { transform: rotate(-6deg) scale(1.08); }
.ord-kc.is-wide .ord-kc-ico.has-3d { width: 54px; height: 54px; }
.ord-other-ico.has-3d { width: 56px; height: 56px; }
.ord-kp-ico.has-3d { width: 30px; height: 30px; filter: none; }

/* ---- «Безопасность» на главной: картинка слева, заголовок справа (разметка общая с «Работами по 1С») */
.nx-works-top.is-flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.nx-works-top.is-flip .nx-works-art { order: -1; }
#security .nx-works-top { margin-bottom: 44px; }
@media (max-width: 900px) {
  .nx-works-top.is-flip { grid-template-columns: 1fr; }
  .nx-works-top.is-flip .nx-works-art { order: 0; }
}

/* ---- кабинет, «Работы по 1С»: пока заказов нет — справа картинка, шаги лентой ниже */
.ord-hero.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); grid-template-areas: "main art" "steps steps"; }
.ord-hero.has-art .ord-hero-main { grid-area: main; }
.ord-hero.has-art .ord-hero-art { grid-area: art; }
.ord-hero.has-art .ord-hero-steps { grid-area: steps; flex-direction: row; }
.ord-hero.has-art .ord-hero-steps li { flex: 1 1 0; min-width: 0; }
.ord-hero-art {
  position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: #0B1426;
  border: 1px solid rgba(143, 178, 255, 0.2); box-shadow: 0 30px 60px -34px rgba(47, 98, 214, 0.6);
}
.ord-hero-art img { display: block; width: 100%; height: auto; }
body.light-theme .ord-hero-art { border-color: rgba(11, 18, 32, 0.08); box-shadow: 0 24px 50px -30px rgba(23, 42, 86, 0.45); }
@media (max-width: 1100px) {
  .ord-hero.has-art .ord-hero-steps { flex-wrap: wrap; }
  .ord-hero.has-art .ord-hero-steps li { flex: 1 1 calc(50% - 10px); }
}
@media (max-width: 760px) {
  .ord-hero.has-art { grid-template-columns: 1fr; grid-template-areas: "art" "main" "steps"; }
  .ord-hero.has-art .ord-hero-steps { flex-direction: column; }
}

/* ---- пустые экраны кабинета с картинкой: «Баз 1С пока нет», «Осталось создать организацию» */
.empty-art {
  display: block; width: min(300px, 70%); height: auto; margin: 0 auto 1.2rem; border-radius: 22px;
  box-shadow: 0 28px 56px -30px rgba(47, 98, 214, 0.65); border: 1px solid rgba(143, 178, 255, 0.18);
}
body.light-theme .empty-art { box-shadow: 0 22px 44px -26px rgba(23, 42, 86, 0.4); border-color: rgba(11, 18, 32, 0.06); }
/* Карточка первого входа брала белый фон из старых стилей и в тёмной теме была белой с белым заголовком. */
.empty-cabinet { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 18px; }
.empty-cabinet.has-art { max-width: 920px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.8rem; align-items: center; }
.empty-cabinet.has-art .empty-art { width: 100%; margin: 0; }
/* Осьминог на пустых экранах и в ошибках (08.10.2026, Вениамин): «Баз 1С пока нет» — выглядывает из коробки и смотрит
   по сторонам; пустой колокольчик — валяется в письмах; «не на связи» — играет с вилкой, бах, мордочка в саже.
   Живые сцены рисует fx.js (раздел «Осьминог: живые сцены»); до него и без него — прозрачная картинка
   (Deploy/art/octo_assets.py). Тени-фильтра нет: под анимацией он перерисовывался бы каждый кадр. */
.octo-scene > svg, .octo-scene > img { display: block; width: 100%; height: auto; overflow: visible; }
.empty-art.octo-art { width: min(200px, 58%); border: 0; border-radius: 0; box-shadow: none; }
body.light-theme .empty-art.octo-art { box-shadow: none; }
.bell-empty .bell-empty-octo { width: 210px; max-width: 100%; }
.bell-empty .bell-empty-octo > img { width: 78px; margin: 0 auto; }
.ag-wire.has-octo { height: 168px; }
.ag-wire-octo { position: absolute; left: 50%; top: 50%; width: 92px; margin-left: -46px; margin-top: -92px; z-index: 1; }
.notice.has-octo { display: flex; align-items: center; gap: 16px; }
.notice.has-octo .notice-octo { flex: none; width: 86px; }
.notice.has-octo > div > b { display: block; font-size: 0.92rem; margin-bottom: 4px; }
@media (max-width: 760px) {
  /* на телефоне линия вертикальная: осьминог на линии, подпись под ним поперёк линии на фоне карточки */
  .ag-wire.has-octo { height: 156px; }
  .ag-wire-octo { width: 78px; margin-left: -39px; margin-top: -64px; }
  .ag-wire.has-octo .ag-wire-lbl { left: 50%; top: 112px; transform: translateX(-50%); max-width: none; white-space: nowrap;
    padding: 2px 8px; background: var(--bg-card); }
  .notice.has-octo { flex-direction: column; text-align: center; }
}
@media (max-width: 820px) {
  .empty-cabinet.has-art { grid-template-columns: 1fr; }
  .empty-cabinet.has-art .empty-art { order: -1; width: min(260px, 80%); margin: 0 auto; }
}

/* ================================================================ Базы 1С: живые карточки (24.09.2026)
   Значок базы, кольцо индекса чистоты из 8 долей, свечение в углу по состоянию учёта, луч во время аудита,
   полоска остатка подписки, карточка «Добавить ещё базу», блик на золотых кнопках. Движение — только под
   html.fx-on (Portal/fx.js); без него карточки те же, только неподвижные. */
.db-card { isolation: isolate; --db-glow: rgba(47, 98, 214, 0.16); }
.db-card > .fx-spot { z-index: -1; }
.db-card[data-health="good"] { --db-glow: rgba(16, 185, 129, 0.22); }
.db-card[data-health="mid"]  { --db-glow: rgba(245, 158, 11, 0.22); }
.db-card[data-health="low"]  { --db-glow: rgba(239, 68, 68, 0.2); }
.db-card[data-health="run"]  { --db-glow: rgba(99, 102, 241, 0.3); }
.db-glow {
  position: absolute; top: -110px; right: -90px; width: 260px; height: 260px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--db-glow), transparent 66%);
}
body.light-theme .db-glow { opacity: 0.8; }

/* шапка: значок, название с конфигурацией, кольцо */
.db-card-header.has-ava { flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 12px; padding-right: 0; }
.db-head-text { flex: 1; min-width: 0; }
.db-head-text .db-title { display: block; line-height: 1.25; overflow-wrap: anywhere; }
.db-head-text .db-config { margin-top: 3px; }
.db-ava { position: relative; flex: none; width: 44px; height: 44px; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.22)); }
.db-ava img { display: block; width: 100%; height: 100%; border-radius: 26%; transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.db-card:hover .db-ava img { transform: rotate(-6deg) scale(1.07); }
.db-ava .db-ok {
  position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800;
  font-style: normal; line-height: 1; color: #fff; background: #16a34a; border: 2px solid var(--bg-card);
}
body:not(.light-theme) .db-ava .db-ok { background: #22c55e; }

/* кольцо индекса чистоты: 8 долей — 8 блоков аудита */
.db-ring { position: relative; flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.db-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.db-ring > svg circle { fill: none; stroke-width: 5; stroke: rgba(148, 163, 184, 0.24); }
.db-ring > b svg { display: block; }
.db-ring .s-ok { stroke: #10B981; }
.db-ring .s-warn { stroke: #F59E0B; }
.db-ring .s-err { stroke: #EF4444; }
.db-ring .s-unk { stroke: #94A3B8; opacity: 0.6; }
.db-ring .s-run { stroke: #6366F1; }
.db-ring .s-got { stroke: #6366F1; }
.db-ring.has-prog .s-run { stroke: #C7D2FE; }      /* ход проверки: ещё не пришедшие — бледные и мигают */
html.fx-on .db-ring.is-run > svg circle.s-got, html.fx-on .db-ring.is-run > svg circle.s-off { animation: none; }
/* Ход проверки на карточке базы (08.10.2026): ряд значков разделов и осьминог с лупой (рисует fx.js); без fx.js —
   просто значки: пришедшие яркие, остальные бледные. */
.db-prog { position: relative; z-index: 3; margin: 8px 0 6px; }   /* над лучом «аудит идёт» (dbScan) */
.db-prog-scene > svg { display: block; width: 100%; height: auto; overflow: visible; }
.db-prog-icons { display: flex; justify-content: space-between; padding: 26px 6px 6px; }
.db-prog-icons img { width: 28px; height: 28px; opacity: .4; filter: grayscale(1); }
.db-prog-icons img.is-got { opacity: 1; filter: none; }
.db-prog-text { margin-top: 2px; font-size: .78rem; line-height: 1.4; color: var(--text-muted); text-align: center; }
/* «Отчёт готов» поверх карточки базы (08.10.2026): осьминог в колпаке выныривает над окошком, конфетти, кнопка
   «Открыть отчёт». Закрывается крестиком, нажатием мимо или сам через 12 с. Осьминог — сцена party (fx.js),
   край окошка — линия, из-за которой он выглядывает (в его рисунке — 476 из 604 единиц по высоте). */
.db-finale {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(255, 255, 255, 0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: dbFinaleIn .35s ease both;
}
.db-finale.is-out { animation: dbFinaleOut .35s ease both; }
@keyframes dbFinaleIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dbFinaleOut { to { opacity: 0; } }
.db-finale-box {
  position: relative; width: min(270px, 92%); margin-top: 70px; padding: 26px 18px 16px; text-align: center;
  background: #FFFFFF; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px;
  box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.35); animation: dbFinalePop .5s cubic-bezier(.2, .9, .25, 1.15) both;
}
@keyframes dbFinalePop { from { transform: translateY(18px) scale(.94); } to { transform: none; } }
.db-finale-box b { display: block; font-size: 1.08rem; font-weight: 800; color: #0F172A; }
.db-finale-box span { display: block; margin: 4px 0 12px; font-size: .82rem; line-height: 1.45; color: #475569; }
.db-finale-octo { position: absolute; left: 50%; top: -93px; width: 110px; margin-left: -55px; z-index: 1; pointer-events: none; }
.db-finale-octo > svg { display: block; width: 100%; height: auto; overflow: visible; }
.db-finale-x {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: rgba(15, 23, 42, 0.06); color: #475569; font-size: .75rem; cursor: pointer;
}
.db-finale-x:hover { background: rgba(15, 23, 42, 0.12); }
/* Кнопка в сообщении («Аудит завершён, отчёт готов» → «Открыть отчёт») */
.toast .toast-act {
  margin-left: 12px; padding: 4px 10px; border-radius: 8px; border: 1px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-weight: 700; cursor: pointer;
}
.toast .toast-act:hover { background: rgba(255, 255, 255, 0.12); }
.db-ring > b {
  position: relative; display: grid; place-items: center; font-size: .72rem; font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.db-ring.is-good > b { color: #059669; }
.db-ring.is-mid > b { color: #B45309; }
.db-ring.is-low > b { color: #DC2626; }
body:not(.light-theme) .db-ring.is-good > b { color: #34D399; }
body:not(.light-theme) .db-ring.is-mid > b { color: #FBBF24; }
body:not(.light-theme) .db-ring.is-low > b { color: #F87171; }
.db-ring.is-new > b { color: #2F62D6; }
body:not(.light-theme) .db-ring.is-new > b { color: #8FB2FF; }
.db-ring-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: #6366F1; }
.db-ring-sweep { stroke: #2F62D6 !important; opacity: 0; }
body:not(.light-theme) .db-ring-sweep { stroke: #8FB2FF !important; }

/* движение: аудит идёт — доли загораются по кругу; аудита не было — по кольцу ходит луч-радар */
html.fx-on .db-ring.is-run > svg circle { animation: dbChase 1.2s linear infinite; animation-delay: calc(var(--i) * .15s); }
html.fx-on .db-ring-dot { animation: dbPulse 1.2s ease-in-out infinite; }
html.fx-on .db-ring-sweep { opacity: 0.9; transform-box: fill-box; transform-origin: center; animation: dbSweep 3s linear infinite; }
@keyframes dbChase { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes dbPulse { 50% { transform: scale(1.6); opacity: .45; } }
@keyframes dbSweep { to { transform: rotate(360deg); } }

/* аудит идёт: по карточке сверху вниз проходит луч, свечение дышит */
html.fx-on .db-card[data-health="run"] .db-glow { animation: dbGlow 2.2s ease-in-out infinite; }
html.fx-on .db-card[data-health="run"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: -80px; height: 80px; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.09) 70%, rgba(129, 140, 248, 0.5) 97%, transparent);
  animation: dbScan 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes dbGlow { 50% { transform: scale(1.2); opacity: .6; } }
@keyframes dbScan { from { top: -80px; } to { top: 100%; } }

/* первый показ списка: карточки выезжают по очереди, доли кольца дорисовываются, полоска срока растёт */
html.fx-on .db-enter > .db-card { animation: fxRise .55s cubic-bezier(.2, .8, .2, 1) backwards; }
html.fx-on .db-enter > .db-card:nth-child(2) { animation-delay: .06s; }
html.fx-on .db-enter > .db-card:nth-child(3) { animation-delay: .12s; }
html.fx-on .db-enter > .db-card:nth-child(4) { animation-delay: .18s; }
html.fx-on .db-enter > .db-card:nth-child(5) { animation-delay: .24s; }
html.fx-on .db-enter > .db-card:nth-child(n+6) { animation-delay: .3s; }
html.fx-on .db-enter .db-ring:not(.is-run) > svg circle:not(.db-ring-sweep) {
  animation: dbSeg .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 70ms + 300ms);
}
@keyframes dbSeg { from { stroke-dasharray: 0 144.51; } }
html.fx-on .db-enter .db-plan-bar > b { animation: dbBar 1.1s cubic-bezier(.2, .8, .2, 1) .4s backwards; }
@keyframes dbBar { from { transform: scaleX(0); } }

/* полоска: сколько оплаченного срока ещё впереди */
.db-plan-bar { display: block; height: 4px; margin-top: 8px; border-radius: 4px; overflow: hidden; background: var(--plan-border); }
.db-plan-bar > b { display: block; height: 100%; border-radius: inherit; background: var(--plan-accent); transform-origin: left; }
.db-plan-bar.is-soon > b { background: #dc2626; }
body:not(.light-theme) .db-plan-bar.is-soon > b { background: #f87171; }

/* карточка-приглашение «Добавить ещё базу» в конце списка */
.db-card.db-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 230px; width: 100%; cursor: pointer; font: inherit; color: var(--text-primary);
  background: transparent; border: 1.5px dashed var(--border-color);
}
body.light-theme .db-card.db-add, body.light-theme .db-card.db-add:hover { box-shadow: none; }
.db-card.db-add:hover { border-color: var(--accent-blue); background: var(--accent-glow); }
.db-add-art {
  width: 150px; height: auto; margin-bottom: 8px; border-radius: 16px;
  box-shadow: 0 18px 34px -20px rgba(47, 98, 214, 0.65); transition: transform .5s cubic-bezier(.2, 1.2, .4, 1);
}
.db-card.db-add:hover .db-add-art { transform: translateY(-5px) scale(1.04); }
.db-add b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; }
.db-add b::before { content: "+ "; color: var(--accent-blue); }
.db-add-note { max-width: 30ch; font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }

/* золотые кнопки «Купить подписку» и «Улучшить подписку»: изредка по ним пробегает блик */
.btn-upgrade, .btn-gold { position: relative; overflow: hidden; }
html.fx-on .btn-upgrade::after, html.fx-on .btn-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-18deg); animation: fxGold 5s ease-in-out 1.2s infinite;
}
@keyframes fxGold { 0%, 72% { left: -60%; } 100% { left: 130%; } }

/* ================================================================ Обзор руководителя (24.09.2026)
   Средний индекс чистоты — полукругом со стрелкой, итоги в деньгах, картинка; плитки с объёмными значками; базы
   от самой рискованной с полоской расхождений; круг долей. Движение — только под html.fx-on и при первом
   открытии вкладки за сессию (класс tab-enter ставит tabEnter в app.js). */
.dir-panel, .tm-panel { display: flex; flex-direction: column; gap: 16px; }
.dir-hero, .tm-hero {
  position: relative; overflow: hidden; display: grid; gap: 26px; align-items: center; padding: 22px 24px;
  border-radius: 20px; border: 1px solid rgba(46, 107, 255, 0.28);
  background: radial-gradient(120% 140% at 0% 0%, rgba(46, 107, 255, 0.16), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(139, 92, 246, 0.14), transparent 60%), var(--bg-card);
}
body.light-theme .dir-hero, body.light-theme .tm-hero {
  background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.09), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(124, 58, 237, 0.08), transparent 60%), #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(37, 99, 235, 0.08);
}
.dir-hero { grid-template-columns: 240px minmax(0, 1fr) minmax(0, 360px); }
.dir-hero-art, .tm-hero-art {
  position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #0B1426;
  border: 1px solid rgba(143, 178, 255, 0.2); box-shadow: 0 26px 50px -30px rgba(47, 98, 214, 0.6);
}
.dir-hero-art img, .tm-hero-art img { display: block; width: 100%; height: auto; }
body.light-theme .dir-hero-art, body.light-theme .tm-hero-art {
  border-color: rgba(11, 18, 32, 0.08); box-shadow: 0 22px 44px -28px rgba(23, 42, 86, 0.45);
}

/* спидометр индекса */
.dir-gauge { text-align: center; }
.dir-gauge svg { display: block; width: 100%; max-width: 230px; margin: 0 auto; overflow: visible; }
.dir-g-track { fill: none; stroke: rgba(148, 163, 184, 0.2); stroke-width: 14; stroke-linecap: round; }
.dir-g-val { fill: none; stroke: url(#dirGaugeGrad); stroke-width: 14; stroke-linecap: round; }
.dir-g-ticks line { stroke: rgba(148, 163, 184, 0.6); stroke-width: 1.6; stroke-linecap: round; }
.dir-g-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--deg)); }
.dir-g-needle path, .dir-g-needle circle { fill: var(--text-primary); }
.dir-g-needle .dir-g-hub { fill: var(--bg-card); }
body.light-theme .dir-g-needle .dir-g-hub { fill: #fff; }
.dir-gauge.is-empty .dir-g-val { display: none; }
.dir-gauge.is-empty .dir-g-needle path, .dir-gauge.is-empty .dir-g-needle circle:not(.dir-g-hub) { fill: var(--text-muted); }
.dir-g-num {
  margin-top: -4px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 2rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.dir-gauge.is-good .dir-g-num { color: #059669; }
.dir-gauge.is-mid .dir-g-num { color: #B45309; }
.dir-gauge.is-low .dir-g-num { color: #DC2626; }
body:not(.light-theme) .dir-gauge.is-good .dir-g-num { color: #34D399; }
body:not(.light-theme) .dir-gauge.is-mid .dir-g-num { color: #FBBF24; }
body:not(.light-theme) .dir-gauge.is-low .dir-g-num { color: #F87171; }
.dir-g-lbl { margin-top: 4px; font-size: .8rem; font-weight: 700; color: var(--text-secondary); }
.dir-g-sub { margin-top: 2px; font-size: .74rem; color: var(--text-muted); }

/* итоги в деньгах */
.dir-nums { display: grid; gap: 10px; }
.dir-num { padding: 12px 15px; border-radius: 14px; border: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.03); }
body.light-theme .dir-num { background: rgba(255, 255, 255, 0.85); }
.dir-num > span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.dir-num > b {
  display: block; margin-top: 4px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.45rem;
  font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.dir-num.is-risk { border-color: rgba(239, 68, 68, 0.26); background: rgba(239, 68, 68, 0.06); }
.dir-num.is-risk > b { color: #DC2626; }
.dir-num.is-clean > b { color: #059669; }
.dir-num.is-muted > b { font-size: 1.15rem; color: var(--text-secondary); }
body:not(.light-theme) .dir-num.is-risk > b { color: #F87171; }
body:not(.light-theme) .dir-num.is-clean > b { color: #34D399; }

/* плитки */
.dir-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dir-tile {
  --tile-glow: rgba(47, 98, 214, 0.16);
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px;
  border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-color);
  transition: transform .2s, border-color .2s;
}
.dir-tile::after {
  content: ""; position: absolute; z-index: -1; top: -80px; right: -70px; width: 190px; height: 190px; pointer-events: none;
  background: radial-gradient(circle, var(--tile-glow), transparent 65%);
}
.dir-tile:hover { transform: translateY(-2px); border-color: rgba(46, 107, 255, 0.34); }
body.light-theme .dir-tile { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
.dir-tile.is-crit.is-hot { --tile-glow: rgba(239, 68, 68, 0.2); }
.dir-tile.is-warn.is-hot { --tile-glow: rgba(245, 158, 11, 0.2); }
.dir-tile.is-pc.is-hot { --tile-glow: rgba(16, 185, 129, 0.2); }
.dir-tile:not(.is-hot):not(.is-bases) { --tile-glow: rgba(148, 163, 184, 0.1); }
.dir-tile-ico {
  flex: none; width: 46px; height: 46px; border-radius: 26%; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.22));
  transition: transform .45s cubic-bezier(.2, 1.3, .4, 1);
}
.dir-tile:hover .dir-tile-ico { transform: rotate(-6deg) scale(1.07); }
.dir-tile-body { min-width: 0; }
.dir-tile-body > span:first-child { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.dir-tile-body > b {
  display: block; margin-top: 2px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.6rem;
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.dir-tile.is-crit.is-hot .dir-tile-body > b { color: #DC2626; }
.dir-tile.is-warn.is-hot .dir-tile-body > b { color: #B45309; }
.dir-tile.is-pc.is-hot .dir-tile-body > b { color: #059669; }
body:not(.light-theme) .dir-tile.is-crit.is-hot .dir-tile-body > b { color: #F87171; }
body:not(.light-theme) .dir-tile.is-warn.is-hot .dir-tile-body > b { color: #FBBF24; }
body:not(.light-theme) .dir-tile.is-pc.is-hot .dir-tile-body > b { color: #34D399; }
.dir-tile-dbs { display: flex; margin-top: 6px; padding-left: 2px; }
.dir-tile-dbs img { width: 20px; height: 20px; margin-right: -6px; border-radius: 30%; border: 2px solid var(--bg-card); background: var(--bg-card); }
.dir-tile-pcs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.dir-tile-pcs i { width: 9px; height: 9px; border-radius: 50%; background: rgba(148, 163, 184, 0.55); }
.dir-tile-pcs i.is-on { background: #10B981; }
.dir-tile-note { display: block; margin-top: 3px; font-size: .74rem; color: var(--text-muted); }
html.fx-on .dir-tile-pcs i.is-on { animation: dirPing 2.2s ease-out infinite; }
html.fx-on .dir-tile.is-crit.is-hot .dir-tile-ico { animation: dirBob 3.2s ease-in-out infinite; }
@keyframes dirPing { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } }
@keyframes dirBob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) rotate(-4deg); } }

/* базы от самой рискованной */
.dir-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.dir-grid.has-donut { grid-template-columns: minmax(0, 1fr) 300px; }
.dir-h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.dir-list-card, .dir-donut-card, .tm-map { padding: 18px 18px 12px; }
.dir-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.6fr) 84px minmax(125px, 1.15fr) minmax(95px, .85fr) minmax(110px, 1fr) 90px 100px;
  gap: 12px; align-items: center; padding: 11px 8px; border-top: 1px solid var(--border-color);
}
.dir-row-pen { font-size: .86rem; font-variant-numeric: tabular-nums; }
.dir-list .dir-row { border-radius: 12px; transition: background .2s; }
.dir-list .dir-row:hover { background: rgba(46, 107, 255, 0.05); }
.dir-row-head {
  border-top: 0; padding-top: 0; padding-bottom: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.dir-row-base { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dir-row-ava { flex: none; width: 36px; height: 36px; border-radius: 26%; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.2)); }
.dir-row-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dir-row-name b { font-size: .92rem; overflow-wrap: anywhere; }
.dir-row-name > span { font-size: .74rem; color: var(--text-muted); }
.dir-row-name .pill { align-self: flex-start; margin-top: 3px; }
.dir-row-idx { display: flex; align-items: center; gap: 6px; }
.dir-row .db-ring { width: 46px; height: 46px; }
.dir-row .db-ring > b { font-size: .58rem; }
.dir-delta { font-size: .7rem; font-weight: 800; white-space: nowrap; }
.dir-delta.is-up { color: #059669; }
.dir-delta.is-down { color: #DC2626; }
body:not(.light-theme) .dir-delta.is-up { color: #34D399; }
body:not(.light-theme) .dir-delta.is-down { color: #F87171; }
.dir-row-risk > b { font-size: .9rem; font-variant-numeric: tabular-nums; }
.dir-bar { display: block; height: 6px; margin-top: 6px; border-radius: 6px; overflow: hidden; background: rgba(148, 163, 184, 0.18); }
.dir-bar > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F59E0B, #EF4444); transform-origin: left; }
.dir-row-blocks, .dir-row-date { font-size: .8rem; }
.dir-row-date { color: var(--text-secondary); }
.dir-row-go { text-align: right; }
.dir-row.is-new .dir-row-name b { color: var(--text-secondary); }
@media (max-width: 1200px) { .dir-grid.has-donut { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .dir-row-head { display: none; }
  .dir-list .dir-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "base idx" "risk pen" "blocks date" "go go";
    gap: 8px 12px; padding: 14px 6px;
  }
  .dir-row-base { grid-area: base; } .dir-row-idx { grid-area: idx; } .dir-row-risk { grid-area: risk; }
  .dir-row-pen { grid-area: pen; text-align: right; }
  .dir-row-blocks { grid-area: blocks; } .dir-row-date { grid-area: date; text-align: right; }
  .dir-row-go { grid-area: go; text-align: left; }
  .dir-row-go:empty { display: none; }
}

/* круг долей */
.dir-donut { position: relative; width: 190px; height: 190px; margin: 4px auto 16px; }
.dir-donut svg { width: 100%; height: 100%; overflow: visible; }
.dir-donut circle { fill: none; stroke-width: 16; }
.dir-donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dir-donut-mid b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; }
.dir-donut-mid span { font-size: .72rem; color: var(--text-muted); }
.dir-legend { list-style: none; margin: 0; padding: 0 0 6px; display: grid; gap: 8px; }
.dir-legend li { display: flex; align-items: center; gap: 9px; font-size: .82rem; }
.dir-legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.dir-legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-legend b { font-variant-numeric: tabular-nums; }

@media (max-width: 1150px) {
  .dir-hero { grid-template-columns: 220px minmax(0, 1fr); }
  .dir-hero-art { display: none; }
  .dir-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dir-hero { grid-template-columns: 1fr; }
  .dir-tiles { grid-template-columns: 1fr; }
}

/* ================================================================ Сотрудники и доступы (24.09.2026)
   Кто владелец и что дают роли — вверху с картинкой; три роли с числом людей (нажатие — фильтр); сотрудники
   карточками; карточка-приглашение; «кто какие базы видит». */
.tm-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.tm-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-blue); }
body:not(.light-theme) .tm-kicker { color: #8FB2FF; }
.tm-hero-title {
  margin: 8px 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.25;
}
.tm-hero-text p { margin: 0 0 16px; max-width: 40rem; font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }
.tm-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .tm-hero { grid-template-columns: 1fr; }
  .tm-hero-art { order: -1; max-width: 460px; }
}

/* цвета ролей: владелец — золото, полный доступ — фиолетовый, только свои базы — синий */
.tm-role[data-role="director"], .tm-card[data-role="director"] { --role-c: #D97706; --role-soft: rgba(245, 158, 11, 0.18); }
.tm-role[data-role="chief_accountant"], .tm-card[data-role="chief_accountant"] { --role-c: #7C3AED; --role-soft: rgba(124, 58, 237, 0.16); }
.tm-role[data-role="accountant"], .tm-card[data-role="accountant"] { --role-c: #2563EB; --role-soft: rgba(37, 99, 235, 0.15); }
body:not(.light-theme) .tm-role[data-role="director"], body:not(.light-theme) .tm-card[data-role="director"] { --role-c: #FBBF24; }
body:not(.light-theme) .tm-role[data-role="chief_accountant"], body:not(.light-theme) .tm-card[data-role="chief_accountant"] { --role-c: #A78BFA; }
body:not(.light-theme) .tm-role[data-role="accountant"], body:not(.light-theme) .tm-card[data-role="accountant"] { --role-c: #60A5FA; }

.tm-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tm-role {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left;
  border-radius: 16px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary);
  font: inherit; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s;
}
body.light-theme .tm-role { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
.tm-role:hover { transform: translateY(-2px); border-color: var(--role-c); }
.tm-role.is-on { border-color: var(--role-c); box-shadow: 0 0 0 3px var(--role-soft); }
.tm-role img {
  flex: none; width: 46px; height: 46px; border-radius: 26%; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.22));
  transition: transform .45s cubic-bezier(.2, 1.3, .4, 1);
}
.tm-role:hover img, .tm-role.is-on img { transform: rotate(-8deg) scale(1.08); }
.tm-role-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-role-text b { font-size: .95rem; font-weight: 800; }
.tm-role-text i { font-style: normal; font-size: .76rem; line-height: 1.4; color: var(--text-secondary); }
.tm-role-n { flex: none; min-width: 40px; text-align: center; }
.tm-role-n b { display: block; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.55rem; font-weight: 800; line-height: 1; color: var(--role-c); }
.tm-role-n i { font-style: normal; font-size: .7rem; color: var(--text-muted); }
@media (max-width: 900px) { .tm-roles { grid-template-columns: 1fr; } }

.tm-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.tm-card {
  --role-c: #64748B; --role-soft: rgba(100, 116, 139, 0.14);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border-color);
  transition: transform .25s, border-color .25s, opacity .3s, filter .3s;
}
.tm-card::before {
  content: ""; position: absolute; z-index: -1; top: -110px; right: -90px; width: 230px; height: 230px; pointer-events: none;
  background: radial-gradient(circle, var(--role-soft), transparent 66%);
}
.tm-card:hover { transform: translateY(-2px); border-color: var(--role-c); }
body.light-theme .tm-card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
.tm-card.is-me { border-color: rgba(46, 107, 255, 0.45); }
.tm-top { display: flex; align-items: center; gap: 12px; }
.tm-ava {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.02rem; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 10px 20px -10px var(--a1);
  transition: transform .45s cubic-bezier(.2, 1.3, .4, 1);
}
.tm-card:hover .tm-ava { transform: scale(1.06) rotate(-4deg); }
.tm-ava.is-sm { width: 28px; height: 28px; font-size: .64rem; box-shadow: none; }
.tm-ava-role {
  position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 30%;
  border: 2px solid var(--bg-card); background: var(--bg-card);
}
body.light-theme .tm-ava-role { border-color: #fff; background: #fff; }
.tm-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-name { font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.tm-me {
  display: inline-block; padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
  font-size: .66rem; font-weight: 700; color: var(--accent-blue); background: var(--accent-glow);
}
.tm-mail { font-size: .78rem; color: var(--text-muted); overflow-wrap: anywhere; }
.tm-rows { display: grid; gap: 2px; margin: 0; }
.tm-rows > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0;
  font-size: .8rem; border-bottom: 1px dashed var(--border-color);
}
.tm-rows dt { color: var(--text-muted); }
.tm-rows dd { margin: 0; min-width: 0; text-align: right; }
.tm-card .pos-cell { cursor: pointer; border-bottom: 1px dashed var(--text-muted); }
.tm-card .role-badge { cursor: default; }
.tm-dbs { display: flex; flex-wrap: wrap; gap: 6px; }
/* Галочки бухгалтера «Только свои базы»: деньги, все заказы, подключение баз (25.09.2026). */
.tm-rights { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bg-primary);
             border: 1px dashed var(--border-color); }
.tm-rights-h { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tm-right { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.tm-right input { margin-top: 3px; flex: none; accent-color: #2563eb; }
.tm-right span { display: grid; line-height: 1.3; }
.tm-right b { font-size: 0.84rem; font-weight: 700; }
.tm-right i { font-style: normal; font-size: 0.74rem; color: var(--text-muted); }
.tm-right.is-ro { cursor: default; opacity: 0.8; }
.tm-right-note { font-size: 0.74rem; color: var(--text-muted); }
#inviteRightsBox[hidden] { display: none; }
.tm-db {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 5px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; background: rgba(148, 163, 184, 0.12); border: 1px solid var(--border-color);
}
.tm-db img { flex: none; width: 18px; height: 18px; border-radius: 26%; }
.tm-db.is-none { padding: 4px 10px; font-weight: 500; color: var(--text-muted); }
.tm-db-stack { display: inline-flex; }
.tm-db-stack img { margin-right: -7px; border: 1.5px solid var(--bg-card); }
.tm-db-stack img:last-child { margin-right: 1px; }
.tm-foot {
  margin-top: auto; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .74rem; color: var(--text-muted);
}
/* владелец: по рамке его карточки бежит золотой свет */
html.fx-on .tm-card[data-role="director"]::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--fx-angle), transparent 0deg 250deg, #F59E0B 300deg, #FDE68A 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxBeam 6s linear infinite;
}
/* фильтр по роли */
#teamPanel[data-filter="director"] .tm-card[data-role]:not([data-role="director"]),
#teamPanel[data-filter="chief_accountant"] .tm-card[data-role]:not([data-role="chief_accountant"]),
#teamPanel[data-filter="accountant"] .tm-card[data-role]:not([data-role="accountant"]),
#teamPanel[data-filter="director"] .tm-map-t tbody tr:not([data-role="director"]),
#teamPanel[data-filter="chief_accountant"] .tm-map-t tbody tr:not([data-role="chief_accountant"]),
#teamPanel[data-filter="accountant"] .tm-map-t tbody tr:not([data-role="accountant"]) {
  opacity: .3; filter: grayscale(.8);
}

/* карточка-приглашение */
.tm-card.tm-invite {
  align-items: center; justify-content: center; gap: 6px; min-height: 250px; text-align: center; cursor: pointer;
  font: inherit; color: var(--text-primary); background: transparent; border: 1.5px dashed var(--border-color);
}
body.light-theme .tm-card.tm-invite { box-shadow: none; }
.tm-card.tm-invite::before { display: none; }
.tm-card.tm-invite:hover { border-color: var(--accent-blue); background: var(--accent-glow); }
.tm-invite-art {
  width: 160px; height: auto; margin-bottom: 8px; border-radius: 16px; box-shadow: 0 18px 34px -20px rgba(47, 98, 214, 0.65);
  transition: transform .5s cubic-bezier(.2, 1.2, .4, 1);
}
.tm-invite:hover .tm-invite-art { transform: translateY(-5px) scale(1.04) rotate(-2deg); }
.tm-invite b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; }
.tm-invite b::before { content: "+ "; color: var(--accent-blue); }
.tm-invite-note { max-width: 32ch; font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }

/* кто какие базы видит */
.tm-map-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.tm-map-t th, .tm-map-t td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--border-color); transition: opacity .3s, filter .3s; }
.tm-map-t tbody tr:last-child th, .tm-map-t tbody tr:last-child td { border-bottom: 0; }
.tm-map-t thead th { vertical-align: bottom; font-weight: 700; }
.tm-map-t tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.tm-map-t tbody tr { transition: opacity .3s, filter .3s; }
.tm-map-t tbody tr:hover > * { background: rgba(46, 107, 255, 0.05); }
.tm-map-db { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; max-width: 110px; }
.tm-map-db img { width: 26px; height: 26px; border-radius: 26%; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.2)); }
.tm-map-db span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 600; color: var(--text-secondary); }
.tm-map-who { display: inline-flex; align-items: center; gap: 8px; }
.tm-yes {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal;
  font-size: .74rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #10B981, #059669);
  box-shadow: 0 4px 10px -4px rgba(16, 185, 129, 0.7);
}
.tm-no { font-style: normal; color: var(--text-muted); opacity: .6; }

/* ---------------------------------------------------------------- первое открытие вкладки: всё по очереди */
html.fx-on .tab-enter .dir-hero, html.fx-on .tab-enter .dir-tile, html.fx-on .tab-enter .dir-list-card,
html.fx-on .tab-enter .dir-donut-card, html.fx-on .tab-enter .tm-hero, html.fx-on .tab-enter .tm-role,
html.fx-on .tab-enter .tm-card, html.fx-on .tab-enter .tm-map, html.fx-on .tab-enter .dir-list .dir-row {
  animation: fxRise .55s cubic-bezier(.2, .8, .2, 1) backwards;
}
html.fx-on .tab-enter .dir-tile:nth-child(1), html.fx-on .tab-enter .tm-role:nth-child(1) { animation-delay: .1s; }
html.fx-on .tab-enter .dir-tile:nth-child(2), html.fx-on .tab-enter .tm-role:nth-child(2) { animation-delay: .16s; }
html.fx-on .tab-enter .dir-tile:nth-child(3), html.fx-on .tab-enter .tm-role:nth-child(3) { animation-delay: .22s; }
html.fx-on .tab-enter .dir-tile:nth-child(4) { animation-delay: .28s; }
html.fx-on .tab-enter .dir-list-card, html.fx-on .tab-enter .tm-card:nth-child(1) { animation-delay: .3s; }
html.fx-on .tab-enter .dir-donut-card, html.fx-on .tab-enter .tm-card:nth-child(2) { animation-delay: .36s; }
html.fx-on .tab-enter .tm-card:nth-child(3) { animation-delay: .42s; }
html.fx-on .tab-enter .tm-card:nth-child(4) { animation-delay: .48s; }
html.fx-on .tab-enter .tm-card:nth-child(n+5) { animation-delay: .54s; }
html.fx-on .tab-enter .tm-map { animation-delay: .5s; }
html.fx-on .tab-enter .dir-list .dir-row:nth-child(1) { animation-delay: .4s; }
html.fx-on .tab-enter .dir-list .dir-row:nth-child(2) { animation-delay: .46s; }
html.fx-on .tab-enter .dir-list .dir-row:nth-child(3) { animation-delay: .52s; }
html.fx-on .tab-enter .dir-list .dir-row:nth-child(4) { animation-delay: .58s; }
html.fx-on .tab-enter .dir-list .dir-row:nth-child(n+5) { animation-delay: .64s; }
html.fx-on .tab-enter .dir-g-val { animation: dirArc 1.4s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
html.fx-on .tab-enter .dir-g-needle { animation: dirNeedle 1.7s cubic-bezier(.3, 1.35, .5, 1) .3s backwards; }
html.fx-on .tab-enter .dir-bar > b { animation: dbBar 1.1s cubic-bezier(.2, .8, .2, 1) .6s backwards; }
html.fx-on .tab-enter .dir-donut circle { animation: dirSlice 1s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--k) * 140ms + 500ms); }
html.fx-on .tab-enter .db-ring:not(.is-run) > svg circle:not(.db-ring-sweep) {
  animation: dbSeg .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 60ms + 500ms);
}
html.fx-on .tab-enter .tm-map-t i { animation: tmPop .4s cubic-bezier(.2, 1.5, .4, 1) backwards; animation-delay: calc(var(--k) * 30ms + 700ms); }
@keyframes dirArc { from { stroke-dasharray: 0 100; } }
@keyframes dirNeedle { from { transform: rotate(-90deg); } }
@keyframes dirSlice { from { stroke-dasharray: 0 263.89; } }
@keyframes tmPop { from { transform: scale(0); opacity: 0; } }

/* свечение за курсором (Portal/fx.js) — под текстом, а не поверх */
.tm-role { isolation: isolate; }
.dir-tile > .fx-spot, .tm-card > .fx-spot, .tm-role > .fx-spot { z-index: -1; }

/* ================================================================ Агент на ПК (24.09.2026)
   Что делает программа (с картинкой и правдивыми обещаниями), живая схема «компьютер → кабинет», подключение
   в три шага, Telegram с образцом сводки, карточки компьютеров, кольцо самопроверки. Движение — под html.fx-on. */
#agentPanel { display: flex; flex-direction: column; gap: 16px; }
#agentPanel > #selftestBox:empty { display: none; }
.ag-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 26px; align-items: center; padding: 22px 24px; border-radius: 20px; border: 1px solid rgba(46, 107, 255, 0.28);
  background: radial-gradient(120% 140% at 0% 0%, rgba(46, 107, 255, 0.16), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(16, 185, 129, 0.12), transparent 60%), var(--bg-card);
}
body.light-theme .ag-hero {
  background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.09), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(16, 185, 129, 0.08), transparent 60%), #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(37, 99, 235, 0.08);
}
.ag-hero-text p { margin: 0 0 14px; max-width: 42rem; font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }
.ag-hero-art {
  position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #0B1426;
  border: 1px solid rgba(143, 178, 255, 0.2); box-shadow: 0 26px 50px -30px rgba(47, 98, 214, 0.6);
}
.ag-hero-art img { display: block; width: 100%; height: auto; }
body.light-theme .ag-hero-art { border-color: rgba(11, 18, 32, 0.08); box-shadow: 0 22px 44px -28px rgba(23, 42, 86, 0.45); }
.ag-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 9px 22px; }
.ag-trust li { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; }
.ag-trust svg { flex: none; color: #059669; }
body:not(.light-theme) .ag-trust svg { color: #34D399; }
@media (max-width: 900px) {
  .ag-hero { grid-template-columns: 1fr; }
  .ag-hero-art { order: -1; max-width: 460px; }
  .ag-trust { grid-template-columns: 1fr; }
}

/* живая схема: компьютер → кабинет */
.ag-link {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) 230px; align-items: center; gap: 10px; padding: 20px 24px;
  border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border-color);
}
body.light-theme .ag-link { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
.ag-node { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ag-node-ico { position: relative; width: 56px; height: 56px; margin-bottom: 5px; }
.ag-node-ico img { position: relative; z-index: 1; display: block; width: 56px; height: 56px; border-radius: 26%; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.25)); }
.ag-node b { font-size: .9rem; }
.ag-node > span { max-width: 230px; font-size: .76rem; line-height: 1.4; color: var(--text-muted); }
.ag-link.is-on .ag-node:first-child > span { font-weight: 700; color: #059669; }
.ag-link.is-off .ag-node:first-child > span { color: #B45309; }
body:not(.light-theme) .ag-link.is-on .ag-node:first-child > span { color: #34D399; }
body:not(.light-theme) .ag-link.is-off .ag-node:first-child > span { color: #FBBF24; }
.ag-link.is-none .ag-node:first-child img, .ag-link.is-off .ag-node:first-child img { filter: grayscale(.85); opacity: .75; }
.ag-ping { position: absolute; inset: -6px; border-radius: 30%; border: 2px solid rgba(16, 185, 129, 0.55); opacity: 0; pointer-events: none; }
html.fx-on .ag-link.is-on .ag-ping, html.fx-on .ag-device.is-online .ag-ping { animation: agPing 2.2s ease-out infinite; }
@keyframes agPing { 0% { transform: scale(.88); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.ag-wire { position: relative; height: 60px; }
.ag-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.45) 0 8px, transparent 8px 14px);
}
.ag-link.is-on .ag-line { background: linear-gradient(90deg, rgba(16, 185, 129, 0.45), rgba(99, 102, 241, 0.45)); }
.ag-flow {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 22%, #34D399 34%, rgba(52, 211, 153, 0) 70%);
}
html.fx-on .ag-link.is-on .ag-flow { animation: agFlow 2.4s linear infinite; }
html.fx-on .ag-link.is-on .ag-flow.is-2 { animation-delay: .8s; }
html.fx-on .ag-link.is-on .ag-flow.is-3 { animation-delay: 1.6s; }
@keyframes agFlow { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 14px); opacity: 0; } }
.ag-wire-lbl {
  position: absolute; left: 50%; top: calc(50% + 12px); transform: translateX(-50%); display: inline-flex; align-items: center;
  gap: 6px; white-space: nowrap; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--text-muted);
}
.ag-link.is-on .ag-wire-lbl { color: #059669; }
body:not(.light-theme) .ag-link.is-on .ag-wire-lbl { color: #34D399; }
@media (max-width: 760px) {
  .ag-link { grid-template-columns: 1fr; }
  .ag-wire { height: 84px; }
  .ag-line { left: 50%; right: auto; top: 0; bottom: 0; width: 4px; height: auto; margin: 0 0 0 -2px;
             background: repeating-linear-gradient(180deg, rgba(148, 163, 184, 0.45) 0 8px, transparent 8px 14px); }
  .ag-link.is-on .ag-line { background: linear-gradient(180deg, rgba(16, 185, 129, 0.45), rgba(99, 102, 241, 0.45)); }
  .ag-flow { left: 50%; top: 0; margin: 0 0 0 -7px; }
  html.fx-on .ag-link.is-on .ag-flow { animation-name: agFlowV; }
  .ag-wire-lbl { left: calc(50% + 14px); top: 50%; transform: translateY(-50%); max-width: calc(50% - 18px); white-space: normal; }
}
@keyframes agFlowV { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 14px); opacity: 0; } }

/* подключение и Telegram */
.ag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .ag-grid { grid-template-columns: 1fr; } }
.ag-card, .ag-device {
  position: relative; isolation: isolate; overflow: hidden; padding: 18px 20px; border-radius: 18px;
  background: var(--bg-card); border: 1px solid var(--border-color); transition: transform .2s, border-color .2s;
}
body.light-theme .ag-card, body.light-theme .ag-device { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05); }
.ag-card > .fx-spot, .ag-device > .fx-spot { z-index: -1; }
.ag-card h3 { margin: 0 0 12px; font-size: 1.02rem; font-weight: 800; }
.ag-connect {
  border-color: rgba(46, 107, 255, 0.32);
  background: linear-gradient(160deg, rgba(46, 107, 255, 0.08), transparent 60%), var(--bg-card);
}
.ag-steps { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 14px; }
.ag-steps li { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.ag-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 32px; bottom: -14px; width: 2px; border-radius: 2px;
  background: linear-gradient(rgba(37, 99, 235, 0.5), rgba(124, 58, 237, 0.15));
}
.ag-step-no {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.7);
}
.ag-steps b { display: block; font-size: .9rem; }
.ag-steps i { display: block; font-style: normal; font-size: .78rem; color: var(--text-muted); }
.ag-connect.is-assisted .ag-steps { display: none; }
.ag-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ag-card-head h3 { margin: 0 0 3px; }
.ag-card-ico { flex: none; width: 44px; height: 44px; border-radius: 26%; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.22)); }

/* образец сводки в Telegram */
.ag-chat {
  margin: 12px 0 4px; padding: 12px 14px 16px; border-radius: 16px;
  background: radial-gradient(circle at 15% 10%, rgba(56, 189, 248, 0.18), transparent 55%), #0E1621;
}
body.light-theme .ag-chat { background: radial-gradient(circle at 15% 10%, rgba(56, 189, 248, 0.28), transparent 55%), #DCE6EF; }
.ag-chat-top { margin-bottom: 10px; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
body.light-theme .ag-chat-top { color: #52667A; }
.ag-bubble {
  position: relative; display: flex; flex-direction: column; gap: 2px; max-width: 94%; padding: 10px 12px 20px;
  border-radius: 14px 14px 14px 4px; font-size: .8rem; line-height: 1.45; color: #E6EDF3; background: #182533;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
body.light-theme .ag-bubble { color: #0F172A; background: #fff; box-shadow: 0 1px 1px rgba(15, 23, 42, 0.12); }
.ag-bubble b { font-weight: 700; }
.ag-gap { margin-top: 6px; }
.ag-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; color: #5EB5F7; }
body.light-theme .ag-file { color: #2481CC; }
.ag-time { position: absolute; right: 10px; bottom: 5px; font-style: normal; font-size: .64rem; color: rgba(255, 255, 255, 0.45); }
body.light-theme .ag-time { color: #8A9AAB; }
.ag-typing { display: none; }
html.fx-on .tab-enter .ag-typing {
  display: inline-flex; gap: 4px; padding: 10px 12px; margin-bottom: 6px; border-radius: 14px 14px 14px 4px; overflow: hidden;
  background: #182533; animation: agTypingOut .3s ease 1.3s forwards;
}
body.light-theme .ag-typing { background: #fff; }
.ag-typing i { width: 6px; height: 6px; border-radius: 50%; background: #5EB5F7; animation: agDot 1s ease-in-out infinite; }
.ag-typing i:nth-child(2) { animation-delay: .15s; }
.ag-typing i:nth-child(3) { animation-delay: .3s; }
html.fx-on .tab-enter .ag-bubble { animation: agBubble .45s cubic-bezier(.2, 1.2, .4, 1) 1.45s backwards; transform-origin: bottom left; }
@keyframes agDot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes agTypingOut { to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } }
@keyframes agBubble { from { opacity: 0; transform: translateY(8px) scale(.9); } }

/* карточки компьютеров */
.ag-h3 { margin: 6px 0 -4px; }
.ag-devices { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ag-device::before {
  content: ""; position: absolute; z-index: -1; top: -110px; right: -90px; width: 230px; height: 230px; pointer-events: none;
  background: radial-gradient(circle, rgba(148, 163, 184, 0.12), transparent 66%);
}
.ag-device.is-online { border-color: rgba(16, 185, 129, 0.38); }
.ag-device.is-online::before { background: radial-gradient(circle, rgba(16, 185, 129, 0.2), transparent 66%); }
.ag-device.is-revoked { opacity: .72; }
.ag-device:hover { transform: translateY(-2px); }
.ag-dev-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ag-dev-ico { position: relative; flex: none; width: 48px; height: 48px; }
.ag-dev-ico img { position: relative; z-index: 1; display: block; width: 48px; height: 48px; border-radius: 26%; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.22)); }
.ag-device:not(.is-online) .ag-dev-ico img { filter: grayscale(.85); opacity: .75; }
.ag-dev-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-dev-name b { font-size: .98rem; overflow-wrap: anywhere; }
.ag-dev-name span { font-size: .74rem; color: var(--text-muted); }
.ag-live, .ag-idle {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.ag-live { color: #047857; background: rgba(16, 185, 129, 0.14); }
body:not(.light-theme) .ag-live { color: #34D399; }
.ag-live i { width: 8px; height: 8px; border-radius: 50%; background: #10B981; }
html.fx-on .ag-live i { animation: dirPing 2s ease-out infinite; }
.ag-idle { font-weight: 700; color: var(--text-muted); background: rgba(148, 163, 184, 0.14); }
.ag-device .agent-card-rows > div { align-items: center; }

/* самопроверка компьютера: кольцо «сколько в порядке» и пункты по одному */
@property --agp { syntax: '<number>'; inherits: false; initial-value: 0; }
.ag-selftest { margin-top: 0; padding: 18px 20px; }
.ag-st-head { display: flex; align-items: center; gap: 16px; }
.ag-st-head h3 { margin: 0 0 4px; font-size: 1.02rem; }
.ag-st-ring {
  --agp: var(--p);
  flex: none; width: 78px; height: 78px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--bg-card) 76%, transparent 78% 100%),
              conic-gradient(#10B981 calc(var(--agp) * 1%), rgba(148, 163, 184, 0.22) 0);
}
body.light-theme .ag-st-ring {
  background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%),
              conic-gradient(#10B981 calc(var(--agp) * 1%), rgba(148, 163, 184, 0.22) 0);
}
.ag-st-ring b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.ag-st-ring span { font-size: .62rem; color: var(--text-muted); }
html.fx-on .ag-st-ring { animation: agRing 1.2s cubic-bezier(.2, .8, .2, 1); }
@keyframes agRing { from { --agp: 0; } }
.ag-selftest .check-icon {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #3B82F6;
}
.ag-selftest .check-ok .check-icon { background: #10B981; }
.ag-selftest .check-warning .check-icon { background: #F59E0B; }
.ag-selftest .check-blocker .check-icon { background: #EF4444; }
html.fx-on .ag-selftest .check-row { animation: fxRise .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 70ms + 200ms); }

/* первое открытие вкладки: всё по очереди */
html.fx-on .tab-enter .ag-hero, html.fx-on .tab-enter .ag-link, html.fx-on .tab-enter .ag-card,
html.fx-on .tab-enter .ag-device, html.fx-on .tab-enter .ag-trust li {
  animation: fxRise .55s cubic-bezier(.2, .8, .2, 1) backwards;
}
html.fx-on .tab-enter .ag-trust li:nth-child(1) { animation-delay: .2s; }
html.fx-on .tab-enter .ag-trust li:nth-child(2) { animation-delay: .28s; }
html.fx-on .tab-enter .ag-trust li:nth-child(3) { animation-delay: .36s; }
html.fx-on .tab-enter .ag-trust li:nth-child(4) { animation-delay: .44s; }
html.fx-on .tab-enter .ag-link { animation-delay: .14s; }
html.fx-on .tab-enter .ag-card:nth-child(1) { animation-delay: .24s; }
html.fx-on .tab-enter .ag-card:nth-child(2) { animation-delay: .32s; }
html.fx-on .tab-enter .ag-device { animation-delay: .42s; }

/* «Обзор руководителя»: компьютеры на связи — «1/1», вторая часть мельче */
.dir-tile-of { margin-left: 2px; font-size: .55em; font-weight: 700; color: var(--text-muted); }

/* ================================================================ Услуги и оплата (24.09.2026)
   Подписки компании с картинкой, лента подписок по датам, живой мастер (значки баз и тарифов, бегущая рамка у
   выбранного тарифа, новый шаг выезжает, итог катится), у счетов — шкала шагов и штамп «Оплачен».
   Движение — под html.fx-on (Portal/fx.js). */
.bl-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 26px; align-items: center; margin-bottom: 14px; padding: 22px 24px; border-radius: 20px;
  border: 1px solid rgba(46, 107, 255, 0.28);
  background: radial-gradient(120% 140% at 0% 0%, rgba(46, 107, 255, 0.16), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(16, 185, 129, 0.12), transparent 60%), var(--bg-card);
}
body.light-theme .bl-hero {
  background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.09), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(16, 185, 129, 0.08), transparent 60%), #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(37, 99, 235, 0.08);
}
.bl-hero-text p { margin: 0; max-width: 42rem; font-size: .92rem; line-height: 1.6; color: var(--text-secondary); }
.bl-hero-art {
  position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #0B1426;
  border: 1px solid rgba(143, 178, 255, 0.2); box-shadow: 0 26px 50px -30px rgba(47, 98, 214, 0.6);
}
.bl-hero-art img { display: block; width: 100%; height: auto; }
body.light-theme .bl-hero-art { border-color: rgba(11, 18, 32, 0.08); box-shadow: 0 22px 44px -28px rgba(23, 42, 86, 0.45); }
@media (max-width: 900px) {
  .bl-hero { grid-template-columns: 1fr; }
  .bl-hero-art { order: -1; max-width: 460px; }
}

/* лента подписок */
.bl-tl { margin-bottom: 16px; padding: 16px 18px 14px; }
.bl-tl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 6px; }
.bl-tl-head h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.bl-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .74rem; color: var(--text-muted); }
.bl-legend i { display: inline-block; width: 16px; height: 8px; margin-left: 6px; border-radius: 4px; }
.bl-legend i.is-fix, .bl-bar.is-fix { --c1: #7C3AED; --c2: #A78BFA; }
.bl-legend i.is-control, .bl-bar.is-control { --c1: #2563EB; --c2: #60A5FA; }
.bl-legend i.is-trial, .bl-bar.is-trial { --c1: #0D9488; --c2: #2DD4BF; }
.bl-legend i { background: linear-gradient(90deg, var(--c1), var(--c2)); }
.bl-grid { position: relative; display: grid; grid-template-columns: fit-content(clamp(190px, 30%, 320px)) minmax(0, 1fr); column-gap: 14px; }
.bl-ticks { position: relative; grid-column: 2; grid-row: 1; }
.bl-tick {
  position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; font-size: .68rem; font-weight: 600;
  color: var(--text-muted);
}
.bl-lines, .bl-now { position: relative; grid-column: 2; grid-row: 1 / -1; pointer-events: none; }
.bl-lines { z-index: 0; }
.bl-lines i { position: absolute; top: 20px; bottom: 0; width: 1px; background: var(--border-color); }
.bl-now { z-index: 3; }
.bl-now b { position: absolute; top: 18px; bottom: 2px; width: 2px; margin-left: -1px; border-radius: 2px; background: #EF4444; }
.bl-now b span {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px;
  font-size: .64rem; font-weight: 800; white-space: nowrap; color: #fff; background: #EF4444;
}
html.fx-on .bl-now b { animation: blNow 2.4s ease-in-out infinite; }
@keyframes blNow { 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); } }
.bl-name { grid-column: 1; display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .84rem; font-weight: 700; }
.bl-name img { flex: none; width: 26px; height: 26px; border-radius: 26%; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.2)); }
.bl-name span {
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  line-height: 1.2; overflow-wrap: anywhere;
}
.bl-lane { position: relative; z-index: 1; grid-column: 2; }
.bl-bar {
  position: absolute; top: 7px; bottom: 7px; display: flex; align-items: center; min-width: 6px; padding: 0 10px;
  overflow: hidden; border-radius: 8px; white-space: nowrap; font-size: .72rem; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 var(--used), transparent var(--used)),
              linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow: 0 6px 14px -8px var(--c1); transform-origin: left;
}
.bl-bar span { overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); }
.bl-left {
  position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: .72rem; font-weight: 800;
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.bl-left.is-soon { color: #DC2626; }
.bl-left.is-inside { z-index: 1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); pointer-events: none; }
body:not(.light-theme) .bl-left.is-soon { color: #F87171; }
.bl-none {
  position: absolute; left: 0; right: 0; top: 6px; bottom: 6px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 12px;
  border-radius: 8px; border: 1.5px dashed var(--border-color); font-size: .74rem; color: var(--text-muted);
}
.bl-go {
  margin-left: auto; padding: 4px 12px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: .72rem;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.8);
  transition: transform .2s;
}
.bl-go:hover { transform: translateY(-1px); }
html.fx-on .tab-enter .bl-bar { animation: dbBar 1s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--r) * 90ms + 300ms); }
html.fx-on .tab-enter .bl-hero, html.fx-on .tab-enter .bl-tl { animation: fxRise .55s cubic-bezier(.2, .8, .2, 1) backwards; }
html.fx-on .tab-enter .bl-tl { animation-delay: .12s; }
@media (max-width: 700px) {
  .bl-grid { grid-template-columns: fit-content(40%) minmax(0, 1fr); column-gap: 8px; }
  .bl-name img { display: none; }
  button.bl-name { font-size: .74rem; padding: 0 6px 0 2px; }
  .bl-bar span { display: none; }
  .bl-tick { font-size: .6rem; }
  .bl-tick:nth-child(even) { display: none; }
}

/* мастер: значки баз, объёмные значки тарифов и промокода */
.bl-db-name { display: flex; align-items: center; gap: 9px; }
.bl-db-ava { flex: none; width: 28px; height: 28px; border-radius: 26%; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.2)); }
.bill-level-ico.has-3d { width: 44px; height: 44px; background: none; }
.bill-level-ico.has-3d img {
  display: block; width: 44px; height: 44px; border-radius: 26%; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.22));
  transition: transform .45s cubic-bezier(.2, 1.3, .4, 1);
}
.bill-level:hover .bill-level-ico.has-3d img, .bill-level.is-on .bill-level-ico.has-3d img { transform: rotate(-6deg) scale(1.07); }
.bill-promo-ico.has-3d { width: 30px; height: 30px; background: none; }
.bill-promo-ico.has-3d img { display: block; width: 30px; height: 30px; border-radius: 26%; filter: drop-shadow(0 4px 8px rgba(190, 24, 93, 0.3)); }
.bill-level { isolation: isolate; }
.bill-level > .fx-spot, .wiz-db > .fx-spot { z-index: -1; }
.wiz-db { isolation: isolate; overflow: hidden; }
/* у выбранного тарифа по рамке бежит свет */
html.fx-on .bill-level.is-on::after {
  content: ""; position: absolute; inset: -1.5px; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--fx-angle), transparent 0deg 250deg, var(--lv-accent) 300deg, #22D3EE 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxBeam 5s linear infinite;
}
/* текущий шаг в полоске шагов мягко светится; новый шаг мастера выезжает, сводка «печатается» */
html.fx-on .wiz-point.is-now { animation: blStep 2.6s ease-in-out infinite; }
@keyframes blStep { 50% { box-shadow: 0 0 0 5px var(--accent-glow); } }
html.fx-on .bl-step-in > * { animation: fxRise .45s cubic-bezier(.2, .8, .2, 1) backwards; }
html.fx-on .bl-step-in > :nth-child(2) { animation-delay: .05s; }
html.fx-on .bl-step-in > :nth-child(3) { animation-delay: .1s; }
html.fx-on .bl-step-in > :nth-child(4) { animation-delay: .15s; }
html.fx-on .bl-step-in > :nth-child(n+5) { animation-delay: .2s; }
html.fx-on .bl-step-in .wiz-sum { animation: blPrint .7s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
@keyframes blPrint { from { clip-path: inset(0 0 100% 0); transform: translateY(-8px); } }
.bill-total-num { font-variant-numeric: tabular-nums; }

/* история счетов: шкала шагов, штамп «Оплачен», мигающая точка у ждущих */
.bl-steps { display: flex; align-items: flex-start; margin: 2px 0 14px; }
.bl-st { flex: none; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.bl-st-dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  color: var(--text-muted); background: rgba(148, 163, 184, 0.16); border: 2px solid transparent;
}
.bl-st.is-done .bl-st-dot { color: #fff; background: #10B981; }
.bl-st.is-now .bl-st-dot { color: var(--inv-accent); background: var(--inv-soft); border-color: var(--inv-accent); }
html.fx-on .bl-st.is-now .bl-st-dot { animation: blDot 2s ease-in-out infinite; }
@keyframes blDot { 50% { box-shadow: 0 0 0 5px var(--inv-soft); } }
.bl-st b { font-size: .74rem; font-weight: 700; }
.bl-st i { font-style: normal; font-size: .68rem; color: var(--text-muted); }
.bl-st-line { flex: 1; min-width: 16px; height: 2px; margin-top: 12px; border-radius: 2px; background: rgba(148, 163, 184, 0.3); }
.bl-st.is-done + .bl-st-line { background: #10B981; }
.bill-inv-body { position: relative; }
.bill-inv.is-paid .bill-inv-body { padding-right: 170px; }
.bl-stamp {
  position: absolute; top: 12px; right: 18px; display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 14px 5px; border: 3px double #059669; border-radius: 10px; color: #059669; pointer-events: none;
  font-size: .92rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-9deg); opacity: .88;
}
.bl-stamp i { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .04em; }
body:not(.light-theme) .bl-stamp { color: #34D399; border-color: #34D399; }
html.fx-on .bill-inv[open] .bl-stamp { animation: blStamp .5s cubic-bezier(.2, 1.4, .4, 1) .15s backwards; }
@keyframes blStamp { from { transform: rotate(-9deg) scale(1.9); opacity: 0; } }
@media (max-width: 640px) {
  .bill-inv.is-paid .bill-inv-body { padding-right: 16px; }
  .bl-stamp { position: relative; top: 0; right: 0; margin: 0 0 10px 6px; }
  .bl-st { width: 84px; }
}
.bill-inv.is-issued .bill-inv-side .pill::before, .bill-inv.is-claimed .bill-inv-side .pill::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;
  background: currentColor;
}
html.fx-on .bill-inv.is-issued .bill-inv-side .pill::before, html.fx-on .bill-inv.is-claimed .bill-inv-side .pill::before {
  animation: blBlink 1.6s ease-in-out infinite;
}
@keyframes blBlink { 50% { opacity: .25; } }
.bl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px; text-align: center; }
.bl-empty-art { width: min(320px, 80%); height: auto; margin-bottom: 8px; border-radius: 16px; box-shadow: 0 22px 44px -26px rgba(47, 98, 214, 0.6); }
.bl-empty b { font-size: 1rem; }
.bl-empty span { font-size: .84rem; color: var(--text-secondary); }

/* лента подписок: строка нажимается — открывает мастер на этой базе (24.09.2026) */
.bl-tl-head h3 small { display: block; margin-top: 3px; font-size: .74rem; font-weight: 500; color: var(--text-muted); }
button.bl-name {
  font: inherit; font-size: .84rem; font-weight: 700; color: var(--text-primary); text-align: left; cursor: pointer;
  margin: 4px 0; padding: 0 8px 0 4px; border: 0; border-radius: 10px; background: transparent; transition: background .2s;
}
button.bl-name:hover, button.bl-name.is-picked { background: rgba(46, 107, 255, 0.08); }
button.bl-name:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.bl-lane[data-go] { cursor: pointer; border-radius: 10px; transition: background .2s; }
.bl-lane[data-go]:hover, .bl-lane.is-picked { background: rgba(46, 107, 255, 0.06); }
.bl-lane[data-go]:hover .bl-bar { filter: brightness(1.07) saturate(1.1); }
.bl-lane.is-picked .bl-bar { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--c1); }
.bl-act {
  position: absolute; right: 6px; top: 50%; z-index: 2; transform: translate(6px, -50%); opacity: 0; pointer-events: none;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-size: .72rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.8);
  transition: opacity .2s, transform .2s;
}
.bl-lane[data-go]:hover .bl-act, .bl-lane.is-picked .bl-act { opacity: 1; transform: translate(0, -50%); }
@media (hover: none) { .bl-act { display: none; } }
.wiz-bar, .bill-tabs { scroll-margin-top: 96px; }
/* Сводка шага дорисовывается после ответа сервера. Браузер «держал» то, что под глазами, и сам утаскивал
   страницу вниз — полоска шагов уезжала за край. Во вкладке оплаты это удержание выключено. */
#pricingPanel { overflow-anchor: none; }

/* ================================================================ Экспресс-Аудит: живой отчёт (24.09.2026)
   Спокойная сводка с кольцом индекса и прогрессом, три шага «как работать», карта восьми разделов, план
   исправления свёрнутыми строками с плавным раскрытием. Цвета мягкие: красный — только у пометки «Ошибка» и
   тонкой полосы слева, остальное — нейтральное. Движение — под html.fx-on (Portal/fx.js). */
#liveBody { display: flex; flex-direction: column; gap: 16px; }
#liveTop:empty { display: none; }
.lv-base { display: inline-flex; align-items: center; gap: 8px; }
.lv-base-ico { flex: none; width: 22px; height: 22px; border-radius: 26%; }

/* сводка */
.la-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 330px);
  gap: 24px; align-items: center; padding: 22px 24px; border-radius: 20px; border: 1px solid rgba(46, 107, 255, 0.28);
  background: radial-gradient(120% 140% at 0% 0%, rgba(46, 107, 255, 0.14), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(16, 185, 129, 0.12), transparent 60%), var(--bg-card);
}
body.light-theme .la-hero {
  background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, 0.08), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(16, 185, 129, 0.08), transparent 60%), #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(37, 99, 235, 0.08);
}
.la-hero.is-empty { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.la-hero.is-clean { border-color: rgba(16, 185, 129, 0.38); }
.la-art {
  position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #0B1426;
  border: 1px solid rgba(143, 178, 255, 0.2); box-shadow: 0 26px 50px -30px rgba(47, 98, 214, 0.6);
}
.la-art img { display: block; width: 100%; height: auto; }
body.light-theme .la-art { border-color: rgba(11, 18, 32, 0.08); box-shadow: 0 22px 44px -28px rgba(23, 42, 86, 0.45); }
.la-ring { --ring: #94A3B8; --ring-glow: rgba(148, 163, 184, 0.3); position: relative; width: 150px; height: 150px; display: grid; place-content: center; gap: 2px; text-align: center; }
.la-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.la-ring-track { fill: none; stroke: rgba(148, 163, 184, 0.2); stroke-width: 10; }
.la-ring-val { fill: none; stroke: var(--ring); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--ring-glow)); }
.la-ring.is-good { --ring: #10B981; --ring-glow: rgba(16, 185, 129, 0.4); }
.la-ring.is-mid { --ring: #F59E0B; --ring-glow: rgba(245, 158, 11, 0.4); }
.la-ring.is-low { --ring: #EF4444; --ring-glow: rgba(239, 68, 68, 0.35); }
.la-ring b {
  position: relative; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.6rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ring);
}
.la-ring span { position: relative; max-width: 96px; margin: 0 auto; font-size: .66rem; line-height: 1.3; color: var(--text-muted); }
.la-meta { margin: 4px 0 8px; font-size: .8rem; color: var(--text-muted); }
.la-lead { margin: 0 0 14px; max-width: 46rem; font-size: .92rem; line-height: 1.6; color: var(--text-secondary); }
.la-nums { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 12px; }
.la-num { min-width: 118px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.03); }
body.light-theme .la-num { background: rgba(255, 255, 255, 0.85); }
.la-num b { display: block; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.la-num span { font-size: .74rem; color: var(--text-muted); }
.la-num.is-amber b { color: #B45309; }
.la-num.is-green b { color: #059669; }
.la-num.is-blue b { color: #2563EB; }
body:not(.light-theme) .la-num.is-amber b { color: #FBBF24; }
body:not(.light-theme) .la-num.is-green b { color: #34D399; }
body:not(.light-theme) .la-num.is-blue b { color: #60A5FA; }
.la-spark { display: flex; align-items: flex-end; gap: 3px; height: 54px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--border-color); }
.la-spark i { width: 6px; border-radius: 3px 3px 1px 1px; background: linear-gradient(#60A5FA, #2563EB); transform-origin: bottom; }
.la-progress { max-width: 520px; height: 8px; border-radius: 8px; overflow: hidden; background: rgba(148, 163, 184, 0.2); }
.la-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #10B981, #34D399); transform-origin: left; }
.la-progress-lbl { margin-top: 6px; font-size: .78rem; font-weight: 700; color: var(--text-secondary); }
.la-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 1150px) {
  .la-hero { grid-template-columns: 130px minmax(0, 1fr); }
  .la-hero.is-empty { grid-template-columns: 1fr; }
  .la-art { display: none; }
  .la-hero.is-empty .la-art { display: block; order: -1; max-width: 420px; }
  .la-ring { width: 130px; height: 130px; }
}
@media (max-width: 640px) { .la-hero { grid-template-columns: 1fr; justify-items: start; } }

/* идёт проверка, ограничения тарифа */
.la-running { position: relative; overflow: hidden; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(46, 107, 255, 0.3); background: rgba(46, 107, 255, 0.07); }
.la-running b { display: block; }
.la-running p { margin: 4px 0 0; font-size: .86rem; color: var(--text-secondary); }
.la-running-scan { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), transparent); }
html.fx-on .la-running-scan { animation: laScan 2.2s linear infinite; }
@keyframes laScan { to { left: 100%; } }
.la-note { padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.07); }
.la-note p { margin: 4px 0 10px; font-size: .86rem; color: var(--text-secondary); }

/* как работать с отчётом */
.la-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.la-how li { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); }
body.light-theme .la-how li { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04); }
.la-how li:not(:last-child)::after {
  content: ""; position: absolute; right: -9px; top: 50%; z-index: 1; width: 8px; height: 8px; margin-top: -4px;
  border-top: 2px solid var(--text-muted); border-right: 2px solid var(--text-muted); transform: rotate(45deg);
}
.la-how-no {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.7);
}
.la-how b { display: block; font-size: .88rem; }
.la-how i { display: block; font-style: normal; font-size: .76rem; line-height: 1.4; color: var(--text-muted); }
@media (max-width: 800px) { .la-how { grid-template-columns: 1fr; } .la-how li::after { display: none; } }

/* заголовки */
.la-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.la-h h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.la-h small { font-size: .78rem; color: var(--text-muted); }

/* карта разделов */
.la-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.la-tile {
  --tile-c: var(--text-muted); --tile-soft: rgba(148, 163, 184, 0.14);
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  text-align: left; font: inherit; color: var(--text-primary); cursor: pointer; border-radius: 16px;
  border: 1px solid var(--border-color); background: var(--bg-card); transition: transform .2s, border-color .2s, box-shadow .2s;
}
body.light-theme .la-tile { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04); }
.la-tile > .fx-spot { z-index: -1; }
.la-tile:disabled { cursor: default; }
.la-tile:not(:disabled):hover { transform: translateY(-2px); border-color: var(--tile-c); }
.la-tile.is-on { border-color: var(--tile-c); box-shadow: 0 0 0 3px var(--tile-soft); }
.la-tile img { flex: none; width: 40px; height: 40px; border-radius: 26%; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.2)); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.la-tile:not(:disabled):hover img, .la-tile.is-on img { transform: rotate(-6deg) scale(1.07); }
.la-tile.is-off img, .la-tile.is-na img { filter: grayscale(.9); opacity: .55; }
.la-tile-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.la-tile-name { font-size: .84rem; font-weight: 700; line-height: 1.25; }
.la-tile-st { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--tile-c); }
.la-tile-st svg { width: 14px; height: 14px; }
.la-tile.is-err { --tile-c: #DC2626; --tile-soft: rgba(239, 68, 68, 0.14); }
.la-tile.is-warn { --tile-c: #B45309; --tile-soft: rgba(245, 158, 11, 0.16); }
.la-tile.is-ok { --tile-c: #059669; }
.la-tile.is-chk { --tile-c: #0F766E; }
.la-tile.is-xls { --tile-c: #92400E; }
.la-tile.is-off { border-style: dashed; background: transparent; box-shadow: none; }
body:not(.light-theme) .la-tile.is-err { --tile-c: #F87171; }
body:not(.light-theme) .la-tile.is-warn { --tile-c: #FBBF24; }
body:not(.light-theme) .la-tile.is-ok { --tile-c: #34D399; }
body:not(.light-theme) .la-tile.is-chk { --tile-c: #5EEAD4; }
body:not(.light-theme) .la-tile.is-xls { --tile-c: #FCD34D; }
@media (max-width: 1150px) { .la-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .la-tiles { grid-template-columns: 1fr; } }

/* план: фильтры и поиск */
.la-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.la-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.la-chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-secondary); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .2s;
}
.la-chip b { margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.la-chip:hover { border-color: var(--accent-blue); }
.la-chip.is-on { color: #fff; background: var(--accent-blue); border-color: var(--accent-blue); }
.la-chip.is-on b { color: #fff; }
.la-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 380px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); transition: border-color .2s, box-shadow .2s;
}
.la-search:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 0 3px var(--accent-glow); }
.la-search input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: .86rem; }
.la-filter-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; font-size: .86rem; font-weight: 700; }
.la-x { padding: 0; border: 0; background: none; color: var(--accent-blue); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.la-none { padding: 18px; text-align: center; color: var(--text-muted); }
.la-sec { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; }
.la-sec:first-child, .la-filter-note + .la-sec { margin-top: 0; }
.la-sec img { width: 28px; height: 28px; border-radius: 26%; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.2)); }
.la-sec b { font-size: .92rem; }
.la-sec span { padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--text-secondary); background: rgba(148, 163, 184, 0.16); }
.la-sec.is-first b { color: #C2410C; }
body:not(.light-theme) .la-sec.is-first b { color: #FDBA74; }
.la-sec-hint { margin: -2px 0 10px 38px; font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }

/* строка плана */
.la-row {
  --sev: #D97706; --sev-soft: rgba(245, 158, 11, 0.14);
  position: relative; margin-bottom: 8px; overflow: hidden; border-radius: 16px; border: 1px solid var(--border-color);
  background: var(--bg-card); transition: border-color .2s, box-shadow .2s;
}
body.light-theme .la-row { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04); }
.la-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sev); opacity: .75; }
.la-row.is-err { --sev: #DC2626; --sev-soft: rgba(239, 68, 68, 0.12); }
.la-row.is-info { --sev: #2563EB; --sev-soft: rgba(59, 130, 246, 0.12); }
body:not(.light-theme) .la-row { --sev: #FBBF24; }
body:not(.light-theme) .la-row.is-err { --sev: #F87171; }
body:not(.light-theme) .la-row.is-info { --sev: #60A5FA; }
.la-row:hover { border-color: rgba(46, 107, 255, 0.3); }
.la-row.is-open { border-color: rgba(46, 107, 255, 0.38); box-shadow: 0 14px 34px -22px rgba(15, 23, 42, 0.4); }
.la-row.is-first:not(.is-open) { border-color: rgba(99, 102, 241, 0.45); }
.la-row-head {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 18px; text-align: left; font: inherit;
  color: var(--text-primary); background: none; border: 0; cursor: pointer;
}
.la-row-head:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; border-radius: 16px; }
.la-sev { flex: none; padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; color: var(--sev); background: var(--sev-soft); }
.la-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.la-row-main b { font-size: .92rem; font-weight: 700; line-height: 1.35; }
.la-row-sub { font-size: .76rem; color: var(--text-muted); }
.la-row-sub em { font-style: normal; font-weight: 700; color: #059669; }
body:not(.light-theme) .la-row-sub em { color: #34D399; }
.la-row-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.la-first { padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); white-space: nowrap; }
html.fx-on .la-first { animation: laPulse 2.4s ease-in-out infinite; }
@keyframes laPulse { 50% { box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.18); } }
.la-new { padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; color: #1D4ED8; background: rgba(59, 130, 246, 0.14); }
body:not(.light-theme) .la-new { color: #93C5FD; }
.la-sample { padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; color: #6D28D9; background: rgba(124, 58, 237, 0.12); }
body:not(.light-theme) .la-sample { color: #C4B5FD; }
.la-chev { flex: none; display: grid; place-items: center; color: var(--text-muted); transition: transform .3s; }
.la-row.is-open .la-chev { transform: rotate(180deg); }
.la-row-bar { position: absolute; left: 18px; right: 16px; bottom: 0; height: 3px; border-radius: 3px; background: rgba(148, 163, 184, 0.16); }
.la-row-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: inherit; background: #10B981; }
.la-row-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .8, .2, 1); }
.la-row.is-open .la-row-body { grid-template-rows: 1fr; }
.la-row-in { min-height: 0; overflow: hidden; padding: 0 18px 0 22px; }
.la-row.is-open .la-row-in > :last-child { margin-bottom: 16px; }
.la-part { padding-top: 12px; border-top: 1px dashed var(--border-color); }
.la-part:first-child { padding-top: 4px; border-top: 0; }
.la-lbl { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.la-why { margin: 0 0 12px; font-size: .88rem; line-height: 1.6; color: var(--text-secondary); }
.la-items { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.la-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: rgba(148, 163, 184, 0.08); }
.la-item.is-new { border-color: rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.06); }
.la-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere; }
.la-item-main b { font-weight: 700; }
.la-item-main span { font-size: .8rem; color: var(--text-secondary); }
.la-item-note { margin-top: 6px; padding: 7px 10px; border-radius: 10px; border-left: 3px solid #F59E0B; background: rgba(245, 158, 11, 0.1); font-size: .8rem; color: var(--text-primary); }
.la-copy {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); transition: color .2s, border-color .2s, transform .2s;
}
.la-copy:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.la-copy.is-done { color: #10B981; border-color: #10B981; transform: scale(1.08); }
.la-more { margin: 0 0 12px; padding: 6px 12px; border-radius: 10px; border: 1px dashed var(--border-color); background: none; color: var(--accent-blue); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.la-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; counter-reset: la; }
.la-steps li { position: relative; padding: 3px 0 3px 38px; font-size: .88rem; line-height: 1.55; counter-increment: la; }
.la-steps li::before {
  content: counter(la); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .76rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #10B981, #059669);
}
.la-choose { margin: 4px 0 8px; font-size: .84rem; font-weight: 700; }
.la-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.la-choice {
  padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--border-color); background: var(--bg-card); cursor: pointer;
  color: var(--text-primary); font: inherit; font-size: .84rem; font-weight: 600; text-align: left; transition: border-color .2s, background .2s;
}
.la-choice:hover { border-color: var(--accent-blue); }
.la-choice.is-on { border-color: var(--accent-blue); background: var(--accent-glow); }
.la-sol-rows { margin: 0 0 12px; font-size: .86rem; color: var(--text-secondary); }
.la-lock-ghost { position: relative; height: 64px; margin-bottom: 10px; overflow: hidden; border-radius: 12px; background: rgba(148, 163, 184, 0.08); }
.la-lock-lines { display: grid; gap: 8px; padding: 12px 14px; filter: blur(3px); }
.la-lock-lines i { display: block; height: 8px; border-radius: 4px; background: rgba(148, 163, 184, 0.45); }
.la-lock-lines i:nth-child(2) { width: 80%; }
.la-lock-lines i:nth-child(3) { width: 60%; }
.la-lock-ico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-secondary); }
.la-lock-title { display: block; margin-bottom: 4px; }
.la-locked p { margin: 0 0 10px; font-size: .84rem; color: var(--text-secondary); }

/* всё чисто, исправлено, ответы 1С */
.la-clean { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; text-align: center; border-color: rgba(16, 185, 129, 0.35); }
.la-clean img { width: min(320px, 80%); height: auto; margin-bottom: 8px; border-radius: 18px; box-shadow: 0 22px 44px -26px rgba(16, 185, 129, 0.6); }
.la-clean b { font-size: 1.1rem; }
.la-clean span { font-size: .88rem; color: var(--text-secondary); }
.la-fixed, .la-refusals { border-radius: 16px; border: 1px solid rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.05); }
.la-refusals { border-color: var(--border-color); background: var(--bg-card); }
.la-fixed summary, .la-refusals summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 18px; cursor: pointer; list-style: none; }
.la-fixed summary::-webkit-details-marker, .la-refusals summary::-webkit-details-marker { display: none; }
.la-fixed-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #10B981; }
.la-fixed small { font-size: .78rem; color: var(--text-muted); }
.la-fixed-grp { padding: 0 18px 12px 56px; font-size: .84rem; }
.la-fixed-grp ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-secondary); }
.la-refusals summary { font-weight: 700; }
.la-refusals p { margin: 0; padding: 0 18px 10px; font-size: .84rem; color: var(--text-secondary); }

/* первое появление отчёта: всё по очереди, кольцо и столбики дорисовываются */
html.fx-on .tab-enter .la-hero, html.fx-on .tab-enter .la-how li, html.fx-on .tab-enter .la-map .la-h,
html.fx-on .tab-enter .la-plan .la-h, html.fx-on .tab-enter .la-tools {
  animation: fxRise .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
html.fx-on .tab-enter .la-how li:nth-child(1) { animation-delay: .12s; }
html.fx-on .tab-enter .la-how li:nth-child(2) { animation-delay: .2s; }
html.fx-on .tab-enter .la-how li:nth-child(3) { animation-delay: .28s; }
html.fx-on .tab-enter .la-tile { animation: fxRise .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 50ms + 250ms); }
html.fx-on .tab-enter .la-row { animation: fxRise .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--k) * 45ms + 450ms); }
html.fx-on .tab-enter .la-ring-val { animation: laRing 1.4s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
html.fx-on .tab-enter .la-progress i { animation: dbBar 1.2s cubic-bezier(.2, .8, .2, 1) .5s backwards; }
html.fx-on .tab-enter .la-spark i { animation: laSpark .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 50ms + 400ms); }
@keyframes laRing { from { stroke-dasharray: 0 289; } }
@keyframes laSpark { from { transform: scaleY(0); } }
/* телефон: пометки строки плана — отдельной строкой, заголовок — во всю ширину */
@media (max-width: 640px) {
  .la-row-head { flex-wrap: wrap; gap: 8px 10px; }
  .la-sev { order: 1; }
  .la-row-tags { order: 2; flex: 1; justify-content: flex-start; }
  .la-chev { order: 3; }
  .la-row-main { order: 4; flex: 1 1 100%; }
  .la-sec-hint { margin-left: 0; }
}

/* ======================================================================
   Колокольчик с отметками «прочитано», другая база по пути карточки, совет строки (24.09.2026)
   ====================================================================== */
.bell-panel { width: min(27rem, 92vw); max-height: min(36rem, 76vh); }
.bell-head { position: sticky; top: 0; z-index: 2; background: var(--bg-secondary); flex-wrap: wrap; }
.bell-head-acts { margin-left: auto; display: inline-flex; gap: 14px; }
.bell-unread { padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); }
.bell-unread[hidden], .bell-head-acts [hidden] { display: none; }
.bell-item { display: flex; gap: 12px; align-items: flex-start; position: relative; transition: background .45s ease, opacity .45s ease; }
.bell-item.is-new { background: rgba(37, 99, 235, 0.08); cursor: pointer; }
.bell-item.is-new:hover { background: rgba(37, 99, 235, 0.12); }
.bell-item.is-new::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #2563eb, #7c3aed); }
.bell-item.is-read .bell-item-title { color: var(--text-secondary); }
.bell-item.is-read .bell-item-body { opacity: .85; }
.bell-item.is-read .bell-ico { filter: saturate(.5); opacity: .75; }
.bell-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2); }
.bell-main { flex: 1; min-width: 0; }
.bell-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: .2rem; }
.bell-item-title { display: block; line-height: 1.35; }
.bell-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.bell-tag svg, .bell-mark svg { width: 12px; height: 12px; }
.bell-tag.is-new { color: #1D4ED8; background: rgba(59, 130, 246, 0.14); }
.bell-tag.is-new i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html.fx-on .bell-tag.is-new i { animation: bellDot 1.6s ease-in-out infinite; }
.bell-tag.is-read { color: #15803D; background: rgba(22, 163, 74, 0.1); }
body:not(.light-theme) .bell-tag.is-new { color: #93C5FD; }
body:not(.light-theme) .bell-tag.is-read { color: #4ADE80; }
.bell-item.is-just .bell-tag.is-read { animation: bellRead .55s cubic-bezier(.2, .9, .3, 1.35); }
@keyframes bellDot { 50% { opacity: .35; transform: scale(.65); } }
@keyframes bellRead { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.bell-time { font-size: .75rem; color: var(--text-secondary); }
.bell-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bell-mark { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.bell-mark:hover { color: #16A34A; border-color: rgba(22, 163, 74, 0.5); }
.bell-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; color: var(--text-secondary); font-size: .86rem; }
.bell-empty img { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22); }
html.fx-on .bell-count:not([hidden]) { animation: bellPop .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes bellPop { from { transform: scale(.3); } to { transform: scale(1); } }

/* Осьминог из колокольчика (08.10.2026) — fx.js window.fxOctoDrop. Падение на резинке, вытягивание и сплющивание,
   отставание щупалец и маятник считает fx.js (физика, Web Animations); здесь — то, что идёт само: щупальца
   покачиваются от шеи, осьминог «дышит», моргает дважды; колокольчик вздрагивает. Около 4 с. Висит ниже колонки
   всплывающих сообщений и поверх всего (z-index выше сообщений): Вениамин — «уведомления закрывают осьминожку». */
.fx-octo { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 10000; }
.fx-octo-swing { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* ниточка — как паутинка (08.10.2026, Вениамин: «цвета как паутинка и без этих линий»; коричневая витая — «слишком
   коричневая»): тонкая, серебристо-серая, с лёгким блеском посередине; привязана к макушке (fx.js OCTO_TIE) */
.fx-octo-thread { position: absolute; left: -1px; top: 0; width: 2px; height: 400px; border-radius: 1px;
  background: linear-gradient(90deg, #A3AEBB, #E6EBF1 50%, #A3AEBB); transform-origin: top center;
  transform: scale(1, 0); }
.fx-octo-body { position: absolute; left: -28px; top: 0; opacity: 0; transform-origin: 28px 0;
  filter: drop-shadow(0 4px 6px rgba(15, 23, 42, .16)); }
.fx-octo-body svg { display: block; transform-origin: 50% 0; animation: fxOctoBreath 1.3s ease-in-out infinite; }
.fx-octo-tent { transform-box: view-box; transform-origin: 210px 368px; animation: fxOctoWiggle .75s ease-in-out infinite alternate; }
.fx-octo-lag { transform-box: view-box; transform-origin: 210px 368px; }
.fx-octo-eyes { transform-box: fill-box; transform-origin: center; animation: fxOctoBlink 3.95s linear forwards; }
.fx-bell-shake { display: inline-block; animation: fxBellShake .55s ease-in-out; transform-origin: 50% 10%; }
@keyframes fxOctoBreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes fxOctoWiggle { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }
@keyframes fxOctoBlink { 0%, 65% { transform: scaleY(1); } 66.5% { transform: scaleY(.1); } 68%, 70% { transform: scaleY(1); }
  71.5% { transform: scaleY(.1); } 73%, 100% { transform: scaleY(1); } }
@keyframes fxBellShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }

/* Карточка базы: по пути другая база — коротко, с замком */
.db-other { display: flex; gap: 8px; align-items: flex-start; margin: -2px 0 10px; padding: 8px 11px; border-radius: 12px; border: 1px solid rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.07); font-size: .8rem; line-height: 1.45; color: var(--text-primary); }
.db-other svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #DC2626; }
.db-other span { min-width: 0; }
.db-other span b, .db-other span em { display: block; }
.db-other span b { font-weight: 700; }
.db-other span em { font-style: normal; color: var(--text-secondary); overflow-wrap: anywhere; }
.db-other-note p { overflow-wrap: anywhere; }
.la-other-main p { overflow-wrap: anywhere; }
body:not(.light-theme) .db-other svg { color: #F87171; }
/* Окно правки базы: та же пометка сверху */
.db-other-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.07); }
.db-other-note[hidden] { display: none; }
.db-other-note p { margin: 5px 0 0; font-size: .84rem; line-height: 1.5; color: var(--text-secondary); }
/* Вкладка аудита: та же пометка крупно */
.la-other { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(239, 68, 68, 0.38); background: linear-gradient(135deg, rgba(239, 68, 68, 0.09), rgba(245, 158, 11, 0.05)); }
.la-other > img { flex: none; width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 8px 18px rgba(220, 38, 38, 0.25); }
.la-other-main { flex: 1; min-width: 0; }
.la-other-main > b { font-size: 1rem; }
.la-other-main p { margin: 6px 0 0; font-size: .86rem; line-height: 1.55; color: var(--text-secondary); }
.la-other-lock { display: flex; gap: 6px; align-items: center; font-weight: 700; color: var(--text-primary) !important; }
.la-other-lock svg { width: 15px; height: 15px; color: #DC2626; }
body:not(.light-theme) .la-other-lock svg { color: #F87171; }
.la-other .la-acts { margin-top: 12px; }
@media (max-width: 560px) { .la-other { flex-direction: column; } }

/* Строка плана: замок у закрытого решения */
.la-lockmark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--text-secondary); background: rgba(148, 163, 184, 0.14); }
.la-lockmark svg { width: 13px; height: 13px; }
/* Совет строки — отдельно от факта */
.la-item-advice { margin-top: 6px; padding: 7px 10px; border-radius: 10px; border-left: 3px solid #10B981; background: rgba(16, 185, 129, 0.09); font-size: .8rem; color: var(--text-primary); }
.la-item-advice b { font-weight: 800; }

/* «Наш опыт в цифрах» и «Уже сделали» — объёмные значки, как у видов работ (24.09.2026) */
.ord-exp-ico.has-3d { width: 42px; height: 42px; background: none; filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.2)); }
.nx-we-ico.has-3d { width: 48px; height: 48px; margin-bottom: 6px; filter: drop-shadow(0 10px 16px rgba(10, 20, 40, 0.35)); }
.ord-exp-ico.has-3d .ord-ico3d, .nx-we-ico.has-3d .ord-ico3d { transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.ord-exp-item:hover .ord-ico3d, .nx-we-item:hover .ord-ico3d { transform: translateY(-2px) rotate(-6deg) scale(1.08); }

/* ======================================================================
   Вход, регистрация, приглашение, создание компании (25.09.2026, Вениамин: «навороти плз»).
   Слева — тёмная фирменная панель с иллюстрацией и тем, что даёт сервис; справа — светлая форма.
   Экран не зависит от темы кабинета: свои цвета, приставка .view-screen.a2 перебивает тёмную тему.
   ====================================================================== */
.view-screen.a2 {
  --a2-ink: #0F172A; --a2-muted: #64748B; --a2-soft: #94A3B8; --a2-line: #E2E8F0;
  --a2-blue: #2563EB; --a2-indigo: #4F46E5; --a2-violet: #7C3AED; --a2-green: #10B981;
  flex-direction: row; align-items: stretch; justify-content: stretch;
  min-height: 100vh; padding: 0; background: #F4F6FB; color: var(--a2-ink);
  font-family: 'Inter', system-ui, sans-serif; text-align: left;
}

/* --- фирменная панель --- */
.view-screen.a2 .a2-brand {
  position: relative; flex: 0 0 46%; max-width: 46%; min-height: 100vh; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 18px; padding: 34px 48px 28px; color: #CBD5E1;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(37, 99, 235, 0.55) 0%, rgba(37, 99, 235, 0) 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(124, 58, 237, 0.5) 0%, rgba(124, 58, 237, 0) 60%),
    linear-gradient(160deg, #0B1437 0%, #0A1030 55%, #120B2E 100%);
}
.view-screen.a2 .a2-brand::after {           /* тонкая сетка точек поверх градиента */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: radial-gradient(rgba(148, 163, 184, .35) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.view-screen.a2 .a2-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.view-screen.a2 .a2-glow-1 { width: 340px; height: 340px; left: -80px; top: 18%; background: #2563EB; animation: a2Drift 14s ease-in-out infinite alternate; }
.view-screen.a2 .a2-glow-2 { width: 300px; height: 300px; right: -90px; bottom: 8%; background: #7C3AED; animation: a2Drift 17s ease-in-out -6s infinite alternate-reverse; }
@keyframes a2Drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.15); } }

.view-screen.a2 .a2-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; width: max-content; }
.view-screen.a2 .a2-logo img { width: 30px; height: 30px; }
.view-screen.a2 .a2-logo span { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -.5px; }

.view-screen.a2 .a2-art { margin: 0 -24px; display: flex; justify-content: center; }
.view-screen.a2 .a2-art img {
  width: 100%; max-width: 560px; height: auto; display: block;
  /* края картинки растворяются в панели — не видно прямоугольника */
  mask-image: radial-gradient(ellipse 50% 49% at 50% 50%, #000 42%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 49% at 50% 50%, #000 42%, transparent 100%);
  animation: a2Float 7s ease-in-out infinite; filter: saturate(1.1);
  mix-blend-mode: screen;   /* тёмный фон картинки растворяется в панели — светятся только предметы */
}
.view-screen.a2 .a2-art-sm img { max-width: 420px; }
@keyframes a2Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.view-screen.a2 .a2-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #93C5FD; }
.view-screen.a2 .a2-title {
  margin: 0; color: #fff; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.05rem); font-weight: 800; line-height: 1.18;
  letter-spacing: -.02em; max-width: 520px; text-wrap: balance;
}
.view-screen.a2 .a2-title.a2-company { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }

.view-screen.a2 .a2-points, .view-screen.a2 .a2-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.view-screen.a2 .a2-points li, .view-screen.a2 .a2-steps li {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: a2Rise .6s cubic-bezier(.2, .8, .3, 1) both;
}
.view-screen.a2 .a2-points li:nth-child(2), .view-screen.a2 .a2-steps li:nth-child(2) { animation-delay: .08s; }
.view-screen.a2 .a2-points li:nth-child(3), .view-screen.a2 .a2-steps li:nth-child(3) { animation-delay: .16s; }
.view-screen.a2 .a2-points img { flex: none; width: 40px; height: 40px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.view-screen.a2 .a2-points b, .view-screen.a2 .a2-steps b { display: block; color: #fff; font-size: .95rem; font-weight: 700; }
.view-screen.a2 .a2-points span, .view-screen.a2 .a2-steps span { display: block; font-size: .82rem; color: #A5B4CF; line-height: 1.4; margin-top: 2px; }
.view-screen.a2 .a2-steps i {
  flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-style: normal;
  font-weight: 900; color: #fff; background: linear-gradient(135deg, #3B82F6, #7C3AED); box-shadow: 0 8px 18px -6px rgba(124, 58, 237, .7);
}

.view-screen.a2 .a2-role {
  width: max-content; max-width: 100%; padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 800;
  color: #A7F3D0; background: rgba(16, 185, 129, .14); border: 1px solid rgba(16, 185, 129, .35);
}
.view-screen.a2 .a2-invite { display: grid; gap: 8px; max-width: 520px; }
.view-screen.a2 .a2-inv-row { display: flex; gap: 10px; align-items: baseline; font-size: .88rem; }
.view-screen.a2 .a2-inv-row span { color: #94A3B8; min-width: 128px; }
.view-screen.a2 .a2-inv-row b { color: #E2E8F0; font-weight: 700; }
.view-screen.a2 .a2-inv-dbs { display: flex; flex-wrap: wrap; gap: 6px; }
.view-screen.a2 .a2-inv-dbs em {
  font-style: normal; font-size: .8rem; font-weight: 700; color: #DBEAFE; padding: 3px 10px; border-radius: 999px;
  background: rgba(59, 130, 246, .18); border: 1px solid rgba(96, 165, 250, .3);
}
.view-screen.a2 .a2-inv-err { color: #FCA5A5; font-weight: 700; }

.view-screen.a2 .a2-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .78rem; }
.view-screen.a2 .a2-foot a { color: #94A3B8; text-decoration: none; }
.view-screen.a2 .a2-foot a:hover { color: #fff; }

/* --- форма --- */
.view-screen.a2 .a2-main {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center;
  padding: 26px 32px 32px;
  background:
    radial-gradient(60% 45% at 85% 0%, rgba(99, 102, 241, .10), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(37, 99, 235, .08), transparent 70%),
    #F4F6FB;
}
.view-screen.a2 .a2-top { width: 100%; max-width: 560px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.view-screen.a2 .a2-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--a2-line); color: #334155; font: 600 .85rem 'Inter', sans-serif;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: transform .15s, box-shadow .15s;
}
.view-screen.a2 .a2-back:hover { transform: translateX(-2px); box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .25); }
.view-screen.a2 .a2-back svg, .view-screen.a2 .a2-secure svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.view-screen.a2 .a2-card {
  width: 100%; max-width: 460px; margin: auto 0; padding: 34px 36px 30px; border-radius: 26px; text-align: left;
  background: #fff; border: 1px solid #E8ECF4; color: var(--a2-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 30px 70px -32px rgba(30, 41, 90, .35);
  animation: a2Rise .55s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes a2Rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.view-screen.a2 .a2-head { margin-bottom: 20px; }
.view-screen.a2 .a2-hello { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--a2-ink); }
.view-screen.a2 .a2-sub { margin: 6px 0 0; font-size: .92rem; line-height: 1.5; color: var(--a2-muted); }

.view-screen.a2 .auth-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 5px; margin: 0 0 20px;
  border-radius: 14px; background: #F1F5F9; border: 1px solid #E8EDF4;
}
.view-screen.a2 .auth-tabs::before {          /* бегунок под активной вкладкой */
  content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 10px;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px -8px rgba(15, 23, 42, .25);
  transition: transform .3s cubic-bezier(.3, 1.2, .4, 1);
}
.view-screen.a2 .auth-tabs:has(.auth-tab:last-child.active)::before { transform: translateX(100%); }
.view-screen.a2 .auth-tab {
  position: relative; z-index: 1; background: transparent !important; border: 0; border-radius: 10px; padding: 10px 8px;
  color: #64748B; font: 700 .9rem 'Inter', sans-serif; cursor: pointer; transition: color .2s;
}
.view-screen.a2 .auth-tab.active { color: var(--a2-ink); }

.view-screen.a2 .form-group { margin-bottom: 16px; }
.view-screen.a2 .form-label { display: block; margin-bottom: 7px; font-size: .8rem; font-weight: 700; color: #334155; }
.view-screen.a2 .a2-field { position: relative; }
.view-screen.a2 .a2-field .a2-ico {
  position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none;
  fill: none; stroke: #94A3B8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s;
}
.view-screen.a2 .form-input {
  width: 100%; height: 50px; padding: 0 44px 0 44px; border-radius: 14px; font: 500 .95rem 'Inter', sans-serif;
  background: #F8FAFC; color: var(--a2-ink); border: 1.5px solid #E2E8F0; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.view-screen.a2 .form-input::placeholder { color: #A0AEC0; }
.view-screen.a2 .form-input:hover { border-color: #CBD5E1; }
.view-screen.a2 .form-input:focus { background: #fff; border-color: var(--a2-blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.view-screen.a2 .a2-field:focus-within .a2-ico { stroke: var(--a2-blue); }
.view-screen.a2 .a2-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; color: #94A3B8;
}
.view-screen.a2 .a2-eye:hover { background: #EEF2F7; color: #334155; }
.view-screen.a2 .a2-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.view-screen.a2 .a2-eye.is-on { color: var(--a2-blue); }

.view-screen.a2 .form-check-row { margin: 4px 0 18px; }
.view-screen.a2 .a2-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.view-screen.a2 .checkbox-label { display: inline-flex; align-items: flex-start; gap: 9px; font-size: .82rem; line-height: 1.45; color: #475569; cursor: pointer; }
.view-screen.a2 .checkbox-label input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--a2-blue); flex: none; }
.view-screen.a2 .checkbox-label a, .view-screen.a2 .a2-link { color: var(--a2-blue); font-weight: 600; text-decoration: none; }
.view-screen.a2 .checkbox-label a:hover, .view-screen.a2 .a2-link:hover { text-decoration: underline; }
.view-screen.a2 .a2-link { font-size: .82rem; }

.view-screen.a2 .a2-btn {
  position: relative; overflow: hidden; width: 100%; height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  font: 700 1rem 'Inter', sans-serif; color: #fff; letter-spacing: -.01em;
  background: linear-gradient(135deg, #2563EB 0%, #4F46E5 55%, #7C3AED 100%);
  box-shadow: 0 14px 30px -14px rgba(79, 70, 229, .75); transition: transform .15s, box-shadow .2s, filter .2s;
}
.view-screen.a2 .a2-btn::after {                /* блик пробегает по кнопке при наведении */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transition: left .6s;
}
.view-screen.a2 .a2-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(79, 70, 229, .85); filter: saturate(1.1); }
.view-screen.a2 .a2-btn:hover::after { left: 120%; }
.view-screen.a2 .a2-btn:active { transform: translateY(0); }
.view-screen.a2 .a2-btn:disabled { opacity: .7; cursor: default; transform: none; }

.view-screen.a2 .a2-me {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-radius: 16px;
  background: #F8FAFC; border: 1px solid #E2E8F0;
}
.view-screen.a2 .a2-me .a2-ico { position: static; transform: none; width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: #EEF2FF; stroke: var(--a2-indigo); flex: none; }
.view-screen.a2 .a2-me span { display: block; font-size: .78rem; color: var(--a2-muted); }
.view-screen.a2 .a2-me b { display: block; font-size: .95rem; color: var(--a2-ink); }

.view-screen.a2 .a2-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--a2-soft); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.view-screen.a2 .a2-or::before, .view-screen.a2 .a2-or::after { content: ""; flex: 1; height: 1px; background: var(--a2-line); }
.view-screen.a2 .a2-invite-code { padding: 16px; border-radius: 18px; background: #F8FAFC; border: 1px dashed #CBD5E1; }
.view-screen.a2 .a2-invite-code > b { display: block; font-size: .95rem; color: var(--a2-ink); }
.view-screen.a2 .a2-invite-code > span { display: block; margin: 4px 0 12px; font-size: .82rem; color: var(--a2-muted); }
.view-screen.a2 .a2-code-row { display: flex; gap: 8px; }
.view-screen.a2 .a2-code-row .a2-field { flex: 1; min-width: 0; }
.view-screen.a2 .a2-code-row .btn { height: 50px; border-radius: 14px; padding: 0 18px; background: #fff; color: var(--a2-ink); border: 1.5px solid #E2E8F0; font-weight: 800; }
.view-screen.a2 .a2-code-row .btn:hover { border-color: var(--a2-blue); color: var(--a2-blue); }

.view-screen.a2 .a2-secure { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: .8rem; color: #64748B; }
.view-screen.a2 .a2-secure svg { color: var(--a2-green); }

.view-screen.a2 #loginSessionHint { margin-bottom: 16px; }
.view-screen.a2 .auth-lockdown-banner { color: #B91C1C !important; }

/* --- телефон и узкие окна: панель — компактной шапкой сверху --- */
@media (max-width: 960px) {
  .view-screen.a2 { flex-direction: column; }
  .view-screen.a2 .a2-brand { flex: none; max-width: none; min-height: 0; padding: 20px 20px 22px; gap: 12px; }
  .view-screen.a2 .a2-art { margin: -6px 0 -10px; }
  .view-screen.a2 .a2-art img { max-width: 300px; }
  .view-screen.a2 .a2-points, .view-screen.a2 .a2-steps, .view-screen.a2 .a2-foot { display: none; }
  .view-screen.a2 .a2-title { font-size: 1.3rem; }
  .view-screen.a2 .a2-title.a2-company { font-size: 1.55rem; }
  .view-screen.a2 .a2-main { padding: 16px 16px 28px; }
  .view-screen.a2 .a2-card { margin: 16px 0 0; padding: 24px 20px 22px; border-radius: 22px; }
  .view-screen.a2 .a2-hello { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .view-screen.a2 .a2-glow, .view-screen.a2 .a2-art img, .view-screen.a2 .a2-card,
  .view-screen.a2 .a2-points li, .view-screen.a2 .a2-steps li { animation: none; }
  .view-screen.a2 .a2-btn::after { display: none; }
}

/* ---- Приглашение — «билет» по центру фирменной панели (Вениамин 25.09.2026: «приглашение маленькое слева
   в уголку, как нелюбимый родственник — человек должен видеть нормально, что его пригласили»). ---- */
.view-screen.a2.join-screen .a2-brand { flex-basis: 56%; max-width: 56%; }
.view-screen.a2 .a2-stage { flex: 1; display: grid; place-items: center; padding: 34px 0 18px; }
@property --a2-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.view-screen.a2 .a2-ticket {
  position: relative; width: min(100%, 560px); border-radius: 30px; color: #E2E8F0; text-align: left;
  background: linear-gradient(150deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 50%, rgba(124, 58, 237, .14) 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 50px 100px -40px rgba(2, 6, 23, .95), inset 0 1px 0 rgba(255, 255, 255, .28);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: a2TicketIn .9s cubic-bezier(.2, .9, .25, 1.12) both;
}
.view-screen.a2 .a2-ticket::before {          /* переливающаяся кайма */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--a2-ang), rgba(96, 165, 250, .95), rgba(167, 139, 250, .95), rgba(52, 211, 153, .85),
                             rgba(251, 191, 36, .7), rgba(96, 165, 250, .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .75; animation: a2Spin 7s linear infinite;
}
@keyframes a2Spin { to { --a2-ang: 360deg; } }
@keyframes a2TicketIn { from { opacity: 0; transform: translateY(28px) rotate(-2.5deg) scale(.95); } to { opacity: 1; transform: none; } }
.view-screen.a2 .a2-ticket-plane {
  position: absolute; right: -86px; top: -104px; width: 280px; height: auto; pointer-events: none; mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 50% 49% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 49% at 50% 50%, #000 40%, transparent 100%);
  animation: a2Float 6s ease-in-out infinite;
}
.view-screen.a2 .a2-ticket-head { padding: 28px 30px 24px; }
.view-screen.a2 .a2-ticket-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #BFDBFE;
  background: rgba(59, 130, 246, .2); border: 1px solid rgba(147, 197, 253, .32);
}
.view-screen.a2 .a2-ticket-kicker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.view-screen.a2 .a2-ticket-co { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.view-screen.a2 .a2-co-ava {
  flex: none; width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center;
  font: 800 1.45rem 'Inter', sans-serif; color: #fff; letter-spacing: -.02em;
  background: linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #A855F7 100%);
  box-shadow: 0 16px 34px -12px rgba(124, 58, 237, .9), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.view-screen.a2 .a2-ticket-name {
  margin: 0; color: #fff; font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.35rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; overflow-wrap: anywhere;
}
.view-screen.a2 .a2-ticket-from { display: block; margin-top: 7px; font-size: .9rem; color: #A5B4CF; }
.view-screen.a2 .a2-ticket-from b { color: #F1F5F9; font-weight: 700; }
.view-screen.a2 .a2-ticket-cut { position: relative; margin: 0 26px; border-top: 2px dashed rgba(255, 255, 255, .2); }
.view-screen.a2 .a2-ticket-cut::before, .view-screen.a2 .a2-ticket-cut::after {   /* вырезы, как у билета */
  content: ""; position: absolute; top: -16px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(8, 12, 36, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.view-screen.a2 .a2-ticket-cut::before { left: -42px; }
.view-screen.a2 .a2-ticket-cut::after { right: -42px; }
.view-screen.a2 .a2-ticket-body { display: grid; gap: 13px; padding: 22px 30px 28px; }
.view-screen.a2 .a2-ticket .a2-invite { display: grid; gap: 13px; }
.view-screen.a2 .a2-tk-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; font-size: .92rem; }
.view-screen.a2 .a2-tk-row > span { color: #94A3B8; }
.view-screen.a2 .a2-tk-row > b { color: #F8FAFC; font-weight: 700; }
.view-screen.a2 .a2-ticket .a2-role { margin: 0; }
.view-screen.a2 .a2-ticket.is-bad .a2-co-ava { background: linear-gradient(135deg, #64748B, #334155); box-shadow: none; }
.view-screen.a2 .a2-ticket.is-bad::before { opacity: .25; animation: none; }

/* искры вокруг билета */
.view-screen.a2 .a2-spark {
  position: absolute; z-index: -1; width: 5px; height: 5px; border-radius: 50%; background: #fff; pointer-events: none;
  box-shadow: 0 0 12px 3px rgba(147, 197, 253, .8); animation: a2Twinkle 3.2s ease-in-out infinite;
}
.view-screen.a2 .a2-spark:nth-of-type(3) { left: 14%; top: 24%; animation-delay: -.4s; }
.view-screen.a2 .a2-spark:nth-of-type(4) { left: 84%; top: 18%; animation-delay: -1.3s; }
.view-screen.a2 .a2-spark:nth-of-type(5) { left: 9%; top: 68%; animation-delay: -2.1s; width: 3px; height: 3px; }
.view-screen.a2 .a2-spark:nth-of-type(6) { left: 90%; top: 62%; animation-delay: -.9s; }
.view-screen.a2 .a2-spark:nth-of-type(7) { left: 50%; top: 11%; animation-delay: -2.6s; width: 3px; height: 3px; }
.view-screen.a2 .a2-spark:nth-of-type(8) { left: 72%; top: 84%; animation-delay: -1.8s; }
@keyframes a2Twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }

@media (max-width: 960px) {
  .view-screen.a2.join-screen .a2-brand { max-width: none; }
  .view-screen.a2 .a2-stage { padding: 26px 0 4px; }
  .view-screen.a2 .a2-ticket-plane { right: -26px; top: -58px; width: 160px; }
  .view-screen.a2 .a2-ticket-head { padding: 22px 20px 18px; }
  .view-screen.a2 .a2-ticket-body { padding: 18px 20px 22px; }
  .view-screen.a2 .a2-ticket-cut { margin: 0 18px; }
  .view-screen.a2 .a2-ticket-cut::before { left: -34px; }
  .view-screen.a2 .a2-ticket-cut::after { right: -34px; }
  .view-screen.a2 .a2-co-ava { width: 54px; height: 54px; border-radius: 18px; font-size: 1.15rem; }
  .view-screen.a2 .a2-tk-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .view-screen.a2 .a2-ticket, .view-screen.a2 .a2-ticket::before, .view-screen.a2 .a2-ticket-plane,
  .view-screen.a2 .a2-spark { animation: none; }
}

/* ==========================================================================
   Шапка кабинета на телефоне — компактная (26.09.2026). Вениамин: «шапку компактной делай да на телефоне».
   Была приклеенной и в пять строк — около четверти экрана. Теперь одна строка: логотип, компания,
   колокольчик и «☰»; уровень доступа, реквизиты, подсказки, настройки, язык и выход — в меню той же шапки
   (вторая строка по кнопке). Вкладки — одной строкой с прокруткой вбок (раньше общее правило
   .dash-tabs-bar { flex-wrap: wrap } перебивало телефонное, и вкладки шли в четыре строки).
   ========================================================================== */
.nav-menu-btn, .nav-menu-sep { display: none; }
@media (max-width: 720px) {
  .dash-navbar { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 12px; }
  .dash-navbar .dash-nav-left, .dash-navbar .dash-nav-right { display: contents; }
  .dash-navbar .brand-badge-dash { order: 1; flex: none; padding: 2px; }
  .dash-navbar .brand-badge-dash .brand-badge-title { display: none; }
  .dash-navbar .company-dropdown-wrapper { order: 2; flex: 1 1 0; min-width: 0; }
  .dash-navbar .company-select { width: 100%; max-width: 100%; height: 40px; }
  .dash-navbar .bell-wrap { order: 3; }
  .dash-navbar .bell-btn { min-width: 40px; height: 40px; }
  .dash-navbar .nav-menu-btn {
    display: inline-flex; order: 4; flex: none; justify-content: center; width: 40px; height: 40px; padding: 0;
  }
  /* меню: второй строкой той же шапки */
  .dash-navbar .nav-menu-sep { order: 5; flex: 1 1 100%; height: 0; }
  .dash-navbar .user-greeting { order: 6; flex: 1 1 100%; font-size: .8rem; }
  .dash-navbar #myRoleBadge { order: 7; }
  .dash-navbar #btnCompanySettings { order: 8; }
  .dash-navbar #btnHintsToggle { order: 9; }
  .dash-navbar .nav-settings-btn { order: 10; }
  .dash-navbar .lang-switch-wrapper { order: 11; }
  .dash-navbar .nav-logout-btn { order: 12; margin-left: auto; }
  .dash-navbar:not(.nav-open) .user-greeting,
  .dash-navbar:not(.nav-open) #myRoleBadge,
  .dash-navbar:not(.nav-open) #btnCompanySettings,
  .dash-navbar:not(.nav-open) #btnHintsToggle,
  .dash-navbar:not(.nav-open) .nav-settings-btn,
  .dash-navbar:not(.nav-open) .lang-switch-wrapper,
  .dash-navbar:not(.nav-open) .nav-logout-btn { display: none !important; }
  .dash-navbar.nav-open .nav-menu-sep { display: block; border-top: 1px solid #E2E8F0; }
  .dash-navbar.nav-open .nav-icon-btn:not(.nav-menu-btn) span { display: inline; }   /* в меню — с подписями */
  .dash-navbar.nav-open .nav-menu-btn { background: #EFF6FF; border-color: #93C5FD; color: #1D4ED8; }
  /* уведомления — во всю ширину под шапкой, а не окном, уехавшим за левый край */
  .dash-navbar .bell-panel {
    position: fixed; left: 8px; right: 8px; top: 62px; width: auto; max-height: calc(100vh - 78px);
  }
  /* вкладки — одной строкой, листаются вбок */
  .dash-tabs-bar { flex-wrap: nowrap; overflow-x: auto; }
}

/* Экскурсия: лист на телефоне и боковая панель на низком экране не выше экрана — текст листается внутри;
   на низких экранах картинка в шапке карточки — тонкой полосой (по находкам проверки, 26.09.2026). */
.tour-card[data-side="sheet"], .tour-card[data-side="side"] {
  max-height: calc(100vh - 16px); display: flex; flex-direction: column; overflow: hidden;
}
/* листается только текст: картинка с главой сверху и кнопки снизу всегда на месте */
.tour-card[data-side="sheet"] .tour-art, .tour-card[data-side="side"] .tour-art { flex: none; }
.tour-card[data-side="sheet"] .tour-body, .tour-card[data-side="side"] .tour-body {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.tour-card[data-side="sheet"] .tour-scroll, .tour-card[data-side="side"] .tour-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.tour-scroll.is-more {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}
/* Лист на телефоне — не выше 60 % экрана: на маленьком экране (казахский текст длиннее) иначе под листом не
   остаётся места для того, о чём он рассказывает. Длинный текст листается внутри. */
.tour-card[data-side="sheet"] { max-height: min(calc(100vh - 16px), max(300px, 60vh)); }
@media (max-width: 639px) and (max-height: 700px), (max-height: 559px) {
  .tour-art { height: 56px; }
}
@media (max-height: 559px) {
  .tour-body { padding: 12px 15px 12px; }
  .tour-card h4 { font-size: 1rem; }
  .tour-card p { font-size: .86rem; line-height: 1.5; }
  .tour-foot { flex-wrap: wrap; row-gap: 8px; }
  .tour-never { flex-basis: 100%; }
  .tour-btns { margin-left: auto; }
}

/* Экран «Создайте компанию» (26.09.2026): форма — переключателем, БИН и адрес — «можно позже». */
.view-screen.a2 .a2-seg {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 14px;
  background: #F1F5F9; border: 1px solid #E8EDF4;
}
.view-screen.a2 .a2-seg label { position: relative; cursor: pointer; }
.view-screen.a2 .a2-seg input { position: absolute; opacity: 0; pointer-events: none; }
.view-screen.a2 .a2-seg span {
  display: block; padding: 10px 6px; border-radius: 10px; text-align: center; font: 700 .9rem 'Inter', sans-serif;
  color: #64748B; transition: background .2s, color .2s, box-shadow .2s;
}
.view-screen.a2 .a2-seg label:hover span { color: #0F172A; }
.view-screen.a2 .a2-seg input:checked + span {
  background: #fff; color: var(--a2-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px -8px rgba(15, 23, 42, .25);
}
.view-screen.a2 .a2-seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.view-screen.a2 .a2-opt {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: .7rem; font-weight: 700;
  color: #64748B; background: #F1F5F9; vertical-align: 1px;
}
.view-screen.a2 .a2-note { margin: -4px 0 16px; font-size: .8rem; line-height: 1.5; color: #64748B; }
.view-screen.a2 #obCompanyBin, .view-screen.a2 #obCompanyAddress { padding-right: 16px; }

/* Экскурсия: место, где сейчас нарисован пример (выдуманная компания), — пунктирная рамка и плашка «Пример». */
.is-tour-demo { position: relative; }
.tour-demo-badge {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 14px;
  border-radius: 12px; font-size: .84rem; line-height: 1.4; color: #6D28D9;
  background: linear-gradient(90deg, #F5F3FF, #EEF2FF); border: 1px dashed #A78BFA;
}
.tour-demo-badge b {
  flex: none; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #7C3AED, #4F46E5);
}
.is-tour-demo .db-card:not(.db-add), .is-tour-demo .la-hero, .is-tour-demo .dir-hero,
.is-tour-demo .ord-card { position: relative; }
.is-tour-demo .db-card:not(.db-add)::after, .is-tour-demo .la-hero::after, .is-tour-demo .dir-hero::after,
.is-tour-demo .ord-card::after {
  content: var(--tour-demo-label, "ПРИМЕР"); position: absolute; z-index: 3; top: 10px; right: 10px; pointer-events: none;
  padding: 3px 10px; border-radius: 999px; font: 800 .66rem/1.4 'Inter', sans-serif; letter-spacing: .08em; color: #fff;
  background: linear-gradient(135deg, #7C3AED, #4F46E5); box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .8);
}
.is-tour-demo .db-card:not(.db-add)::after { top: auto; bottom: 10px; }   /* вверху карточки — кольцо индекса */
.is-tour-demo .ord-card::after { top: auto; bottom: 8px; right: 12px; }   /* вверху справа — шаги и сумма */
.view-screen.a2 .a2-invite-hint {
  display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px;
  font-size: .82rem; line-height: 1.5; color: #475569; background: #F8FAFC; border: 1px dashed #CBD5E1;
}
.view-screen.a2 .a2-invite-hint svg {
  flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: #64748B; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Экскурсия: курсор, который «нажимает» вкладку, и уход карточки на время перехода (26.09.2026). */
.tour-cursor {
  position: fixed; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; opacity: 0;
  transform: translate(-200px, -200px); transition: transform .45s cubic-bezier(.3, .75, .25, 1), opacity .2s ease;
}
.tour-cursor.is-on { opacity: 1; }
.tour-cursor svg {
  position: absolute; left: -5px; top: -3px; width: 30px; height: 30px; overflow: visible;
  filter: drop-shadow(0 6px 12px rgba(2, 6, 23, .45)); transition: transform .14s ease;
}
.tour-cursor svg path { fill: #fff; stroke: #0F172A; stroke-width: 1.6; stroke-linejoin: round; }
.tour-cursor.is-click svg { transform: scale(.82); }
.tour-cursor .tour-ripple {
  position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; opacity: 0;
  border: 2px solid rgba(96, 165, 250, .95); background: rgba(96, 165, 250, .18);
}
.tour-cursor.is-click .tour-ripple { animation: tourRipple .55s ease-out; }
@keyframes tourRipple { from { opacity: 1; transform: scale(.25); } to { opacity: 0; transform: scale(1.7); } }
.tour-card { transition: left .38s cubic-bezier(.2, .8, .2, 1), top .38s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, transform .25s ease; }
.tour-card.is-away { opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; }
.tour-ex {
  padding: 5px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, #7C3AED, #4F46E5); box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .9);
}
.tour-ex[hidden] { display: none; }
.is-tour-demo .tm-card:not(.tm-invite), .is-tour-demo .ag-device { position: relative; }
.is-tour-demo .tm-card:not(.tm-invite)::after, .is-tour-demo .ag-device::after {
  content: var(--tour-demo-label, "ПРИМЕР"); position: absolute; z-index: 3; bottom: 10px; right: 10px; pointer-events: none;
  padding: 3px 10px; border-radius: 999px; font: 800 .66rem/1.4 'Inter', sans-serif; letter-spacing: .08em; color: #fff;
  background: linear-gradient(135deg, #7C3AED, #4F46E5); box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .8);
}
@media (prefers-reduced-motion: reduce) {
  .tour-cursor, .tour-card { transition: none; }
  .tour-cursor.is-click .tour-ripple { animation: none; }
}

/* Карточка заказа на узком телефоне (26.09.2026): шкала шагов и «45 000 ₸ · 3 раб. дн.» не влезали в одну строку на
   320 точках, страница становилась шире экрана и ездила вбок. Цена переносится под шкалу. */
@media (max-width: 420px) {
  .ord-card-side { flex-wrap: wrap; row-gap: 6px; }
  .ord-card-price { white-space: normal; }
}

/* ============================================================================
   Окно «Новая база 1С» (27.09.2026, Вениамин: «будет круто, если наворотишь добавление базы 1С»).
   Слева — тёмная колонка: картинка шага, шаги с подписями, что важно знать. Справа — сам шаг. Шаги сменяются с
   лёгким сдвигом; найденный компьютер, выбранная база и итог — с анимацией. На телефоне левая колонка становится
   полосой шагов под заголовком. Логика шагов прежняя (dbWizGo, dbWizProblem) — меняется только вид.
   ============================================================================ */
.pf-modal.dbw {
  max-width: 980px; padding: 0; color: #0F172A; background: #FFFFFF; border: 0; border-radius: 20px;
  display: grid; grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "rail head" "rail main";
  box-shadow: 0 40px 100px -30px rgba(2, 6, 23, .75), 0 0 0 1px rgba(15, 23, 42, .06);
}
.dbw > .pf-modal-head { grid-area: head; position: relative; padding: 18px 26px 14px; border-bottom: 1px solid #E2E8F0; }
.dbw > .pf-modal-head h3 { font-size: 1.18rem; color: #0F172A; }
#modalAddDb .pf-modal-x { background: #F1F5F9; border-color: #E2E8F0; color: #475569; }
#modalAddDb .pf-modal-x:hover { background: #E2E8F0; color: #0F172A; }
/* Полоса прогресса под заголовком: сколько пути пройдено */
.dbw-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; }
.dbw-prog > i {
  display: block; height: 100%; width: var(--p, 25%); border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #2563EB, #7C3AED); transition: width .45s cubic-bezier(.2, .8, .2, 1);
}
.dbw-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
#modalAddDb .pf-modal-body { padding: 20px 26px 10px; flex: 1 0 auto; }
#modalAddDb .wiz-foot { padding: 14px 26px 18px; border-top: 1px solid #E2E8F0; }

/* --- левая колонка --- */
.dbw-rail {
  grid-area: rail; position: relative; border-radius: 20px 0 0 20px; color: #DBEAFE;
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(47, 98, 214, .35), transparent 62%),
    radial-gradient(90% 45% at 100% 100%, rgba(124, 58, 237, .28), transparent 65%),
    linear-gradient(180deg, #0B1426 0%, #0F1B36 60%, #16143A 100%);
}
.dbw-rail-in { position: sticky; top: 12px; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.dbw-art {
  position: relative; height: 148px; border-radius: 14px; overflow: hidden; background: #0B1426;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(147, 197, 253, .14);
}
.dbw-art img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s ease;
  animation: tourDrift 9s ease-in-out infinite alternate;
}
.dbw-art img.is-swap { opacity: 0; }
#modalAddDb .dbw-rail .wiz-steps { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; overflow: visible; }
#modalAddDb .dbw-rail .wiz-step {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start;
  width: 100%; padding: 8px 10px 12px 8px; border: 0; border-radius: 12px; text-align: left;
  font-size: .9rem; color: #93A4C3; background: none; transition: background .2s ease, color .2s ease;
}
#modalAddDb .dbw-rail .wiz-step:hover { background: rgba(255, 255, 255, .04); color: #DBEAFE; }
#modalAddDb .dbw-rail .wiz-step::before {
  content: ""; position: absolute; left: 22px; top: 41px; bottom: -5px; width: 2px; border-radius: 2px;
  background: rgba(147, 197, 253, .16);
}
#modalAddDb .dbw-rail .wiz-step:last-child::before { display: none; }
#modalAddDb .dbw-rail .wiz-step.is-done::before { background: linear-gradient(180deg, #10B981, rgba(16, 185, 129, .3)); }
#modalAddDb .dbw-rail .wiz-num {
  width: 30px; height: 30px; font-size: .82rem; color: #93A4C3; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .24); transition: background .25s ease, box-shadow .25s ease;
}
#modalAddDb .dbw-rail .wiz-step.is-active { color: #FFFFFF; background: rgba(47, 98, 214, .18); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .3); }
#modalAddDb .dbw-rail .wiz-step.is-active .wiz-num {
  color: #fff; background: linear-gradient(135deg, #2563EB, #7C3AED);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .25), 0 8px 18px -8px rgba(99, 102, 241, .9);
}
#modalAddDb .dbw-rail .wiz-step.is-done .wiz-num { font-size: 0; color: #fff; background: #10B981; box-shadow: none; animation: dbwPop .38s cubic-bezier(.2, .9, .25, 1.3); }
#modalAddDb .dbw-rail .wiz-step.is-done .wiz-num::after { font-size: .8rem; color: #fff; }
.wiz-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 5px; }
#modalAddDb .dbw-rail .wiz-name { font-weight: 700; white-space: normal; }
.wiz-sub { font-size: .76rem; line-height: 1.35; color: #7F90B0; }
#modalAddDb .dbw-rail .wiz-step.is-active .wiz-sub { color: #BFD3F5; }
.dbw-trust {
  list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(147, 197, 253, .14);
  display: flex; flex-direction: column; gap: 9px;
}
.dbw-trust li { display: flex; gap: 9px; align-items: flex-start; font-size: .78rem; line-height: 1.45; color: #9FB0CF; }
.dbw-trust svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #60A5FA; }
@keyframes dbwPop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes dbwRise { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes dbwSpin { to { transform: rotate(360deg); } }

/* --- «нужна ПРОФ или КОРП» — компактной строкой, только на первых двух шагах --- */
#modalAddDb .db-prof-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 16px 26px 0; padding: 10px 12px; border-radius: 12px;
  background: #F8FAFC; border: 1px solid #E2E8F0; color: #475569;
}
#modalAddDb .db-prof-note[hidden] { display: none; }
#modalAddDb .db-prof-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #2563EB; }
#modalAddDb .db-prof-note p { margin: 0; font-size: .8rem; line-height: 1.5; }

/* --- смена шага: лёгкий сдвиг в сторону движения --- */
#modalAddDb .wiz-pane.is-fwd { animation: dbwFwd .36s cubic-bezier(.2, .8, .2, 1) both; }
#modalAddDb .wiz-pane.is-back { animation: dbwBack .36s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dbwFwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes dbwBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

/* --- шаг 1: выбор способа --- */
.dbw-lead h4 { margin: 0 0 6px; font-size: 1.14rem; font-weight: 800; letter-spacing: -.01em; color: #0F172A; }
.dbw-lead p { margin: 0; font-size: .9rem; line-height: 1.6; color: #475569; }
#modalAddDb .way-grid { gap: 14px; margin-top: 18px; }
#modalAddDb .way-card {
  padding: 20px 18px 16px; border-radius: 16px; border: 1px solid #E2E8F0; background: #FFFFFF; gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#modalAddDb .way-card:hover { transform: translateY(-3px); border-color: #93C5FD; background: #FFFFFF; box-shadow: 0 18px 36px -20px rgba(37, 99, 235, .45); }
#modalAddDb .way-card.is-reco { border-color: #BFDBFE; background: linear-gradient(180deg, #F5F9FF, #FFFFFF 62%); }
#modalAddDb .way-card:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.way-ico { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 12px 24px -12px rgba(30, 64, 175, .6); transition: transform .25s ease; }
.way-card:hover .way-ico { transform: rotate(-4deg) scale(1.06); }
#modalAddDb .way-card b { font-size: 1.06rem; color: #0F172A; }
#modalAddDb .way-card p { color: #475569; }
.way-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.way-facts i { font-style: normal; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #EFF6FF; color: #1D4ED8; }
.way-card:not(.is-reco) .way-facts i { background: #F5F3FF; color: #6D28D9; }
#modalAddDb .way-badge { top: -10px; background: linear-gradient(135deg, #2563EB, #7C3AED); box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .8); }
#modalAddDb .way-go { margin-top: 6px; color: #2563EB; }
#modalAddDb .way-back { color: #475569; }

/* --- заявка на установку (только она; заявки «Нужна помощь» — прежнего вида) --- */
.dbw-hero-card {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, #EFF6FF, #F5F3FF); border: 1px solid #DBEAFE;
}
.dbw-hero-card img { flex: none; width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 10px 22px -12px rgba(30, 64, 175, .6); }
.dbw-hero-card b { display: block; margin-bottom: 4px; font-size: 1rem; color: #0F172A; }
.dbw-hero-card p { margin: 0 0 4px; font-size: .86rem; line-height: 1.55; color: #334155; }
.dbw-hero-card .dbw-hero-note { margin: 0; font-size: .78rem; color: #64748B; }
.req-install .ch-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
#modalAddDb .req-install .ch-item {
  position: relative; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #E2E8F0; background: #FFFFFF;
  font-weight: 650; color: #0F172A; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#modalAddDb .req-install .ch-item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#modalAddDb .req-install .ch-item:hover { border-color: #93C5FD; }
#modalAddDb .req-install .ch-item:has(input:checked) { border-color: #2563EB; background: #F5F9FF; box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); }
#modalAddDb .req-install .ch-item:has(input:focus-visible) { outline: 2px solid #2563EB; outline-offset: 2px; }
#modalAddDb .req-install .ch-item:has(input:checked)::after {
  content: "✓"; position: absolute; top: 6px; right: 9px; font-size: .72rem; font-weight: 800; color: #2563EB;
}
.ch-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: #64748B; }
.ch-ico svg { width: 16px; height: 16px; }
.ch-ico.is-telegram { background: linear-gradient(135deg, #0EA5E9, #2563EB); }
.ch-ico.is-whatsapp { background: linear-gradient(135deg, #22C55E, #059669); }
.ch-ico.is-email { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.ch-ico.is-call { background: linear-gradient(135deg, #F59E0B, #D97706); }
.req-install textarea.form-input { min-height: 66px; resize: vertical; line-height: 1.5; }

/* --- заявка принята: что уже случилось и что будет дальше --- */
.dbw-req-ok {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, #ECFDF5, #F0FDFA); border: 1px solid #A7F3D0;
}
.dbw-okmark {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: #10B981; box-shadow: 0 0 0 6px rgba(16, 185, 129, .16); animation: dbwPop .5s cubic-bezier(.2, .9, .25, 1.3) both;
}
.dbw-okmark svg { width: 20px; height: 20px; }
.dbw-req-ok b { display: block; margin-bottom: 3px; font-size: 1rem; color: #065F46; }
.dbw-req-ok p { margin: 0; font-size: .86rem; line-height: 1.5; color: #065F46; }
.dbw-timeline { list-style: none; margin: 20px 0 10px; padding: 0 0 0 2px; }
.dbw-timeline li { position: relative; padding: 0 0 16px 34px; }
.dbw-timeline li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: #FFFFFF; box-shadow: inset 0 0 0 2px #CBD5E1;
}
.dbw-timeline li::after { content: ""; position: absolute; left: 9px; top: 24px; bottom: 2px; width: 2px; border-radius: 2px; background: #E2E8F0; }
.dbw-timeline li:last-child::after { display: none; }
.dbw-timeline li.is-done::before {
  content: "✓"; display: grid; place-items: center; color: #fff; font-size: .68rem; font-weight: 800;
  background: #10B981; box-shadow: none;
}
.dbw-timeline li.is-done::after { background: #10B981; }
.dbw-timeline li.is-now::before { background: #2563EB; box-shadow: 0 0 0 5px rgba(37, 99, 235, .18); animation: dbwPulse 1.8s ease-in-out infinite; }
.dbw-timeline b { display: block; font-size: .92rem; color: #0F172A; }
.dbw-timeline span { font-size: .8rem; color: #64748B; }
.dbw-timeline li:not(.is-done):not(.is-now) b { color: #64748B; font-weight: 600; }
@keyframes dbwPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .2); } 50% { box-shadow: 0 0 0 9px rgba(37, 99, 235, .05); } }
.dbw-req-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* --- компьютер на связи --- */
.dbw-pc-ok {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, #ECFDF5, #F0FDFA); border: 1px solid #A7F3D0;
  animation: dbwRise .45s cubic-bezier(.2, .9, .25, 1.1) both;
}
.dbw-pc-ico img { display: block; width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 10px 22px -12px rgba(4, 120, 87, .7); }
.dbw-pc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dbw-pc-txt b { font-size: 1rem; color: #065F46; }
.dbw-pc-txt span { font-size: .86rem; line-height: 1.5; color: #047857; }
.dbw-live {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 800; color: #047857; background: #FFFFFF; box-shadow: inset 0 0 0 1px #A7F3D0;
}
.dbw-live i { width: 8px; height: 8px; border-radius: 50%; background: #10B981; animation: dbwBlink 1.6s ease-in-out infinite; }
@keyframes dbwBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } }
@media (max-width: 520px) { .dbw-pc-ok { flex-wrap: wrap; } }

/* --- самостоятельная установка: три шага, окно Windows, связь с компьютером --- */
.dbw-flow { list-style: none; margin: 0; padding: 0; }
.dbw-flow-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.dbw-flow-step::before {
  content: ""; position: absolute; left: 16px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #C7D2FE, #E2E8F0);
}
.dbw-flow-step:last-child::before { display: none; }
.dbw-flow-num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2563EB, #7C3AED); box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .8);
}
.dbw-flow-body { min-width: 0; padding-top: 5px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dbw-flow-body > b { font-size: .96rem; color: #0F172A; }
.dbw-flow-note { font-size: .86rem; line-height: 1.55; color: #475569; }
.dbw-dl {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 14px;
  color: #fff; text-decoration: none; background: linear-gradient(135deg, #2563EB 0%, #4F46E5 55%, #7C3AED 100%);
  box-shadow: 0 14px 28px -14px rgba(79, 70, 229, .9); transition: transform .15s ease, filter .15s ease;
}
.dbw-dl:hover { color: #fff; text-decoration: none; transform: translateY(-1px); filter: brightness(1.06); }
.dbw-dl-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.dbw-dl-ico svg { width: 18px; height: 18px; animation: dbwNudge 1.8s ease-in-out infinite; }
.dbw-dl-txt { display: flex; flex-direction: column; line-height: 1.25; }
.dbw-dl-txt b { font-size: .95rem; }
.dbw-dl-txt small { font-size: .74rem; opacity: .85; }
@keyframes dbwNudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.dbw-ss {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%;
  padding: 12px; border-radius: 14px; background: #F8FAFC; border: 1px solid #E2E8F0;
}
.dbw-ss-win {
  display: flex; flex-direction: column; gap: 6px; min-height: 116px; padding: 11px 12px; border-radius: 8px;
  color: #fff; background: #0B5CAD; font-size: .7rem; line-height: 1.35; box-shadow: 0 10px 22px -12px rgba(11, 92, 173, .8);
}
.dbw-ss-title { font-weight: 700; font-size: .76rem; }
.dbw-ss-lines i { display: block; height: 4px; margin: 3px 0; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.dbw-ss-lines i:nth-child(2) { width: 78%; }
.dbw-ss-more { align-self: flex-start; padding: 1px 4px; border-radius: 4px; font-weight: 700; text-decoration: underline; animation: dbwSsA 4.4s ease-in-out infinite; }
.dbw-ss-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: auto; }
.dbw-ss-btns span { padding: 3px 6px; border: 1px solid rgba(255, 255, 255, .7); font-size: .6rem; white-space: nowrap; }
.dbw-ss-run { animation: dbwSsB 4.4s ease-in-out infinite; }
@keyframes dbwSsA {
  0%, 44% { color: #1F2937; background: #FBBF24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .4); }
  50%, 100% { color: #fff; background: transparent; box-shadow: none; }
}
@keyframes dbwSsB {
  0%, 50% { color: #fff; background: transparent; box-shadow: none; }
  56%, 94% { color: #1F2937; background: #FBBF24; border-color: #FBBF24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .4); }
  100% { color: #fff; background: transparent; box-shadow: none; }
}
.dbw-ss-tip b { display: block; margin-bottom: 4px; font-size: .86rem; color: #0F172A; }
.dbw-ss-tip p { margin: 0; font-size: .82rem; line-height: 1.5; color: #475569; }
@media (max-width: 560px) { .dbw-ss { grid-template-columns: minmax(0, 1fr); } }
.dbw-link {
  display: flex; align-items: center; gap: 18px; margin: 4px 0 12px; padding: 16px; border-radius: 16px;
  border: 1px dashed #BFDBFE; background: linear-gradient(180deg, #F8FBFF, #FFFFFF);
}
.dbw-link-row { flex: none; display: flex; align-items: center; gap: 8px; }
.dbw-node { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dbw-node img { display: block; width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .5); }
.dbw-node small { font-size: .68rem; font-weight: 700; color: #64748B; white-space: nowrap; }
.dbw-wire {
  position: relative; width: 74px; height: 2px; margin-bottom: 18px;
  background: repeating-linear-gradient(90deg, #C7D2FE 0 6px, transparent 6px 10px);
}
.dbw-wire i {
  position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #2563EB;
  box-shadow: 0 0 10px rgba(37, 99, 235, .8); animation: dbwFlow 1.8s linear infinite;
}
.dbw-wire i:nth-child(2) { animation-delay: .6s; }
.dbw-wire i:nth-child(3) { animation-delay: 1.2s; }
@keyframes dbwFlow { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.dbw-link-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dbw-link-txt b { font-size: .94rem; color: #0F172A; }
.dbw-link-txt span { font-size: .84rem; line-height: 1.5; color: #475569; }
@media (max-width: 560px) { .dbw-link { flex-direction: column; align-items: flex-start; } }

/* --- шаг 2: поиск баз, найденные базы, выбранная база --- */
.dbw-search {
  display: flex; align-items: center; gap: 20px; padding: 18px; border-radius: 16px;
  background: linear-gradient(135deg, #EFF6FF, #F5F3FF); border: 1px solid #DBEAFE;
}
.dbw-radar {
  position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: radial-gradient(circle, rgba(37, 99, 235, .1), rgba(37, 99, 235, .02) 70%);
}
.dbw-radar > i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(37, 99, 235, .35); animation: dbwRing 2.4s ease-out infinite; }
.dbw-radar > i:nth-child(2) { animation-delay: .8s; }
.dbw-radar > i:nth-child(3) { animation-delay: 1.6s; }
.dbw-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(37, 99, 235, .45), rgba(37, 99, 235, 0) 70deg, transparent 360deg);
  animation: dbwSpin 1.8s linear infinite;
}
.dbw-radar img { position: relative; width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 8px 18px -8px rgba(30, 64, 175, .7); }
@keyframes dbwRing { from { transform: scale(.3); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.dbw-search-txt { flex: 1; min-width: 0; }
.dbw-search-txt b { display: block; margin-bottom: 4px; font-size: .98rem; color: #0F172A; }
.dbw-search-txt p { margin: 0 0 10px; font-size: .86rem; line-height: 1.5; color: #475569; }
.dbw-empty {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 16px;
  border: 1px dashed #CBD5E1; background: #F8FAFC;
}
.dbw-empty > img { flex: none; width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 10px 22px -12px rgba(30, 64, 175, .6); }
.dbw-empty b { display: block; margin-bottom: 4px; font-size: .98rem; color: #0F172A; }
.dbw-empty p { margin: 0 0 10px; font-size: .86rem; line-height: 1.5; color: #475569; }
.dbw-empty .text-muted { margin: 10px 0 0; font-size: .78rem; }
@media (max-width: 520px) { .dbw-search, .dbw-empty { flex-direction: column; align-items: flex-start; } }
#modalAddDb .pick-list { gap: 8px; padding: 2px; border: 0; max-height: 344px; }
#modalAddDb .pick-item {
  position: relative; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px; border: 1px solid #E2E8F0; background: #FFFFFF;
  animation: dbwRise .4s cubic-bezier(.2, .9, .25, 1.1) both; animation-delay: var(--d, 0ms);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#modalAddDb .pick-item:hover { border-color: #93C5FD; background: #FFFFFF; box-shadow: 0 12px 26px -18px rgba(37, 99, 235, .6); }
#modalAddDb .pick-item.is-picked { border-color: #2563EB; background: #F5F9FF; box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); }
.pick-ico { display: block; width: 42px; height: 42px; border-radius: 12px; }
.pick-txt { min-width: 0; }
#modalAddDb .pick-item .nm { display: block; font-size: .94rem; color: #0F172A; }
#modalAddDb .pick-item .meta { display: block; font-size: .76rem; color: #64748B; }
.pick-tags { display: flex; gap: 5px; align-items: center; }
.pick-tags i { font-style: normal; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #F1F5F9; color: #475569; white-space: nowrap; }
.pick-check {
  position: absolute; left: 42px; top: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: .68rem; font-weight: 800; color: #fff; background: #2563EB; box-shadow: 0 0 0 2px #FFFFFF;
  transform: scale(0); transition: transform .25s cubic-bezier(.2, .9, .25, 1.4);
}
#modalAddDb .pick-item.is-picked .pick-check { transform: scale(1); }
@media (max-width: 560px) {
  #modalAddDb .pick-item { grid-template-columns: 38px minmax(0, 1fr); }
  .pick-tags { grid-column: 2; }
  .pick-ico { width: 38px; height: 38px; }
  .pick-check { left: 38px; }
}
.dbw-picked {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #ECFDF5, #F0FDFA); border: 1px solid #A7F3D0; animation: dbwRise .4s ease both;
}
.dbw-picked-ico { position: relative; flex: none; }
.dbw-picked-ico img { display: block; width: 44px; height: 44px; border-radius: 12px; }
.dbw-picked-ico i {
  position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: .68rem; font-weight: 800; color: #fff; background: #10B981; box-shadow: 0 0 0 3px #FFFFFF;
  animation: dbwPop .45s cubic-bezier(.2, .9, .25, 1.3) both .1s;
}
.dbw-picked-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dbw-picked-txt b { font-size: .92rem; color: #065F46; word-break: break-all; }
.dbw-picked-txt span { font-size: .8rem; color: #047857; }
@media (max-width: 520px) { .dbw-picked { flex-wrap: wrap; } }

/* --- шаг 3: вход в 1С --- */
.dbw-shield {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, #EFF6FF, #F5F3FF); border: 1px solid #DBEAFE;
}
.dbw-shield-ico {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2563EB, #7C3AED); box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .8);
}
.dbw-shield-ico svg { width: 22px; height: 22px; }
.dbw-shield b { display: block; margin-bottom: 4px; font-size: .98rem; color: #0F172A; }
.dbw-shield p { margin: 0 0 10px; font-size: .86rem; line-height: 1.55; color: #334155; }
#modalAddDb .dbw-win { display: inline-flex; margin: 0 0 16px; font-size: .9rem; color: #0F172A; }
.dbw-input { position: relative; }
.dbw-input .form-input { padding-left: 38px; }
.dbw-input.has-eye .form-input { padding-right: 44px; }
.dbw-input-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: grid; color: #94A3B8; pointer-events: none; }
.dbw-input-ico svg { width: 16px; height: 16px; }
.dbw-input:focus-within .dbw-input-ico { color: #2563EB; }
.dbw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0;
  border-radius: 9px; display: grid; place-items: center; color: #64748B; background: transparent; cursor: pointer;
}
.dbw-eye:hover { color: #0F172A; background: #F1F5F9; }
.dbw-eye:disabled { opacity: .4; cursor: default; }
.dbw-eye svg { width: 18px; height: 18px; }
.dbw-eye .eye-off, .dbw-eye.is-on .eye-on { display: none; }
.dbw-eye.is-on .eye-off { display: block; }
.dbw-lockhint { display: flex; gap: 8px; align-items: flex-start; }
.dbw-lockhint svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: #10B981; }

/* --- шаг 4: кому сообщать, пример сообщения бота --- */
.dbw-watch { margin-bottom: 18px; }
.dbw-watch .watchers-title { margin-bottom: 10px; font-size: .94rem; font-weight: 700; color: #0F172A; }
.dbw-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; margin-bottom: 8px; }
.dbw-person {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px;
  border: 1px solid #E2E8F0; background: #FFFFFF; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dbw-person input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dbw-ava {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 220) 72% 55%), hsl(calc(var(--h, 220) + 40) 68% 48%));
}
.dbw-person-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dbw-person-txt b { font-size: .88rem; line-height: 1.3; color: #0F172A; overflow-wrap: anywhere; }
.dbw-person-txt small { font-size: .74rem; color: #64748B; }
.dbw-person-txt small.is-warn { color: #B45309; }
.dbw-tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: transparent; box-shadow: inset 0 0 0 2px #CBD5E1; transition: all .15s ease;
}
.dbw-person:has(input:checked) { border-color: #2563EB; background: #F5F9FF; }
.dbw-person:has(input:checked) .dbw-tick { color: #fff; background: #2563EB; box-shadow: none; }
.dbw-person:has(input:focus-visible) { outline: 2px solid #2563EB; outline-offset: 2px; }
.dbw-tg-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: center; padding: 18px;
  border-radius: 16px; background: linear-gradient(135deg, #F0F9FF, #F5F3FF); border: 1px solid #DBEAFE;
}
.dbw-tg-side b { display: block; margin-bottom: 4px; font-size: .98rem; color: #0F172A; }
.dbw-tg-side p { margin: 0 0 12px; font-size: .86rem; line-height: 1.55; color: #334155; }
.dbw-tg-side .text-muted { margin: 10px 0 0; font-size: .78rem; }
.dbw-tg-ok { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dbw-tg-ok span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #10B981; }
.dbw-tg-ok span svg { width: 13px; height: 13px; }
.dbw-tg-ok b { margin: 0; color: #065F46; }
.dbw-tg {
  position: relative; padding: 10px; border-radius: 18px; background: linear-gradient(160deg, #CFE3F2, #E3EEDC);
  box-shadow: 0 18px 36px -20px rgba(15, 23, 42, .45);
}
.dbw-tg-bar { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; }
.dbw-tg-bar img { width: 28px; height: 28px; border-radius: 50%; }
.dbw-tg-bar b { display: block; font-size: .78rem; color: #0F172A; }
.dbw-tg-bar small { font-size: .66rem; color: #64748B; }
.dbw-tg-msg {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 18px; border-radius: 4px 14px 14px 14px;
  font-size: .74rem; line-height: 1.4; color: #0F172A; background: #FFFFFF; box-shadow: 0 1px 1px rgba(15, 23, 42, .08);
  animation: dbwRise .5s ease both .15s; overflow-wrap: anywhere;
}
.dbw-tg-msg time { position: absolute; right: 9px; bottom: 4px; font-size: .62rem; color: #94A3B8; }
.dbw-tg-file { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-weight: 700; color: #0369A1; }
.dbw-tg-file i { font-style: normal; font-size: .58rem; font-weight: 800; padding: 3px 4px; border-radius: 5px; color: #fff; background: #16A34A; }
.dbw-tg-ex {
  position: absolute; top: -9px; right: 12px; padding: 2px 9px; border-radius: 999px; font-size: .62rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #7C3AED, #4F46E5);
}
@media (max-width: 640px) { .dbw-tg-wrap { grid-template-columns: minmax(0, 1fr); } }

/* --- итог: база сохранена, программа проверяет вход --- */
#modalAddDb.is-finish .wiz-pane, #modalAddDb.is-finish .db-prof-note,
#modalAddDb.is-finish #dbOtherNote, #modalAddDb.is-finish .wiz-foot { display: none !important; }
.dbw-finish { padding: 14px 4px 24px; text-align: center; }
.dbw-finish[hidden] { display: none; }
.dbw-fin-check {
  width: 76px; height: 76px; margin: 6px auto 16px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #10B981, #059669);
  box-shadow: 0 0 0 10px rgba(16, 185, 129, .14), 0 18px 36px -14px rgba(5, 150, 105, .8);
  animation: dbwPop .6s cubic-bezier(.2, .9, .25, 1.3) both;
}
.dbw-fin-check svg { width: 36px; height: 36px; }
.dbw-finish h4 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: #0F172A; overflow-wrap: anywhere; }
.dbw-fin-head p { max-width: 460px; margin: 0 auto; font-size: .92rem; color: #475569; }
.dbw-fin-live {
  display: flex; gap: 12px; align-items: flex-start; max-width: 520px; margin: 20px auto 0; padding: 14px 16px;
  border-radius: 14px; text-align: left; background: #F8FAFC; border: 1px solid #E2E8F0; animation: dbwRise .35s ease both;
}
.dbw-fin-live.is-ok { background: #ECFDF5; border-color: #A7F3D0; }
.dbw-fin-live.is-warn { background: #FFFBEB; border-color: #FDE68A; }
.dbw-fin-live.is-bad { background: #FEF2F2; border-color: #FECACA; }
.dbw-fin-live b { display: block; margin-bottom: 3px; font-size: .94rem; color: #0F172A; }
.dbw-fin-live p { margin: 0; font-size: .84rem; line-height: 1.5; color: #475569; }
.dbw-fin-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: #94A3B8; }
.dbw-fin-ico svg { width: 15px; height: 15px; }
.dbw-fin-live.is-ok .dbw-fin-ico { background: #10B981; }
.dbw-fin-live.is-warn .dbw-fin-ico { background: #F59E0B; }
.dbw-fin-live.is-bad .dbw-fin-ico { background: #EF4444; }
.dbw-spin { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #DBEAFE; border-top-color: #2563EB; animation: dbwSpin .9s linear infinite; }
.dbw-fin-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
#modalAddDb.is-finish .pf-modal-body { display: flex; flex-direction: column; justify-content: center; }

/* --- телефон: колонка слева становится полосой шагов --- */
@media (max-width: 859px) {
  .pf-modal.dbw {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "head" "rail" "main";
  }
  .dbw > .pf-modal-head { padding: 16px 16px 12px; }
  .dbw-rail { border-radius: 0; color: #0F172A; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; }
  .dbw-rail-in { position: static; padding: 0; gap: 0; }
  .dbw-art, .dbw-trust { display: none; }
  #modalAddDb .dbw-rail .wiz-steps { flex-direction: row; gap: 4px; padding: 10px 14px; overflow-x: auto; }
  #modalAddDb .dbw-rail .wiz-step {
    display: flex; align-items: center; gap: 8px; width: auto; flex: 0 0 auto; padding: 5px 12px 5px 6px;
    border-radius: 999px; color: #64748B;
  }
  #modalAddDb .dbw-rail .wiz-step::before { display: none; }
  #modalAddDb .dbw-rail .wiz-step:hover { background: #EEF2F7; color: #0F172A; }
  #modalAddDb .dbw-rail .wiz-num { width: 24px; height: 24px; font-size: .74rem; color: #475569; background: #E2E8F0; box-shadow: none; }
  #modalAddDb .dbw-rail .wiz-step.is-active { color: #0F172A; background: #EFF6FF; box-shadow: inset 0 0 0 1px #BFDBFE; }
  #modalAddDb .dbw-rail .wiz-step.is-active .wiz-num { box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
  #modalAddDb .dbw-rail .wiz-txt { padding-top: 0; }
  #modalAddDb .dbw-rail .wiz-name { white-space: nowrap; }
  .wiz-sub { display: none; }
  #modalAddDb .db-prof-note { margin: 12px 16px 0; }
  #modalAddDb .pf-modal-body { padding: 16px 16px 8px; }
  #modalAddDb .wiz-foot { padding: 12px 16px 16px; }
}
@media (max-width: 560px) {
  #modalAddDb .dbw-rail .wiz-step.is-active .wiz-name { display: block; }
  #modalAddDb .dbw-rail .wiz-step:not(.is-active) { padding-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .dbw *, .dbw *::before, .dbw *::after { animation: none !important; transition: none !important; }
}

/* Итог: шаги слева — только отметки, не кнопки (иначе можно вернуться и сохранить базу второй раз). */
#modalAddDb.is-finish .wiz-step { pointer-events: none; cursor: default; }
/* Подвал на телефоне: главная кнопка — во всю ширину сверху, «Отмена» и «Назад» — под ней (на 320–390 точках
   «Подключить базу» вылезала за окно). */
@media (max-width: 560px) {
  #modalAddDb .wiz-foot-nav { flex-wrap: wrap; gap: 8px; }
  #modalAddDb .wiz-foot-gap { display: none; }
  #modalAddDb .wiz-foot-nav .btn { flex: 1 1 0; justify-content: center; }
  #modalAddDb #btnDbWizNext, #modalAddDb #btnDbWizSave { flex: 1 1 100%; order: -1; }
}

/* «Прочитано» в чате заказа, как в WhatsApp (27.09.2026) */
.ord-msg-ticks { display: inline-flex; align-items: center; margin-left: 4px; color: #94A3B8; }
.ord-msg-ticks.is-read { color: #2563EB; }
.ord-msg-read { margin-top: 4px; font-size: 0.7rem; color: var(--text-muted, #64748B); text-align: right; }


/* ================================================================ Всё о платформе (28.09.2026)
   Вкладка-справочник, прижата вправо. Вверху — какие базы 1С проверяем и на каких релизах, дальше — как устроено,
   восемь разделов, тарифы, данные, словарик, документы. */
.dash-tab.dash-tab-about { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.dash-tab-about svg { flex: none; opacity: 0.85; }
.ab-panel { display: flex; flex-direction: column; gap: 18px; }
.ab-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.ab-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-toc button { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.06); color: #1D4ED8; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: background .15s; }
.ab-toc button:hover { background: rgba(37, 99, 235, 0.13); }
.ab-sec { padding: 22px 24px; border-radius: 20px; border: 1px solid rgba(15, 23, 42, 0.08); background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); scroll-margin-top: 96px; }
.ab-sec-head { margin-bottom: 16px; }
.ab-sec-head h4 { margin: 0; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-main, #0F172A); }
.ab-sec-head p { margin: 6px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted, #64748B); }
.ab-cfgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ab-cfg { padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(16, 185, 129, 0.32);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.07), rgba(16, 185, 129, 0.01)); }
.ab-cfg.is-beta { border-color: rgba(245, 158, 11, 0.36); background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.01)); }
.ab-cfg-top { display: flex; align-items: center; gap: 12px; }
.ab-cfg-top img { flex: none; border-radius: 12px; }
.ab-cfg-top b { display: block; font-size: 1rem; line-height: 1.3; color: var(--text-main, #0F172A); }
.ab-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 2px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; }
.ab-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ab-badge.is-on { color: #047857; background: rgba(16, 185, 129, 0.13); }
.ab-badge.is-beta { color: #B45309; background: rgba(245, 158, 11, 0.15); }
.ab-badge.is-off { margin-top: 0; color: #475569; background: rgba(148, 163, 184, 0.2); }
.ab-cfg-rel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 14px; }
.ab-cfg-rel span { font-size: 0.82rem; color: var(--text-muted, #64748B); }
.ab-cfg-rel b { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; color: var(--text-main, #0F172A); }
.ab-cfg-notes { margin: 10px 0 0; padding-left: 18px; font-size: 0.84rem; line-height: 1.55; color: var(--text-muted, #64748B); }
.ab-cfg-notes li + li { margin-top: 4px; }
.ab-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.ab-soon-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-soon-item { padding: 5px 11px; border-radius: 10px; background: rgba(148, 163, 184, 0.13); font-size: 0.82rem; color: #475569; cursor: default; }
.ab-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ab-step { position: relative; padding: 16px; border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.06); background: #F8FAFC; }
.ab-step img { display: block; margin-bottom: 10px; border-radius: 12px; }
.ab-step-no { position: absolute; top: 12px; right: 14px; font-size: 0.8rem; font-weight: 800; color: #94A3B8; }
.ab-step b { display: block; font-size: 0.92rem; color: var(--text-main, #0F172A); }
.ab-step p { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted, #64748B); }
.ab-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.ab-blk { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; }
.ab-blk img { flex: none; border-radius: 11px; }
.ab-blk b { display: block; font-size: 0.92rem; color: var(--text-main, #0F172A); }
.ab-blk span { display: block; margin-top: 3px; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted, #64748B); }
.ab-tariffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.ab-tariff { display: flex; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.08); background: #fff; }
.ab-tariff.is-trial { border-color: rgba(245, 158, 11, 0.32); background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), #fff); }
.ab-tariff img { flex: none; border-radius: 12px; }
.ab-tariff b { font-size: 0.98rem; color: var(--text-main, #0F172A); }
.ab-tariff p { margin: 5px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-muted, #64748B); }
.ab-price { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 8px; font-size: 0.86rem; font-weight: 700; color: #1D4ED8; }
.ab-price span { font-weight: 600; color: #047857; }
.ab-sec-btn { margin-top: 16px; }
.ab-data { display: flex; align-items: flex-start; gap: 18px; }
.ab-data img { flex: none; border-radius: 14px; }
.ab-data ul { margin: 0; padding-left: 18px; font-size: 0.9rem; line-height: 1.75; color: var(--text-main, #0F172A); }
.ab-data a { display: inline-block; margin-top: 8px; font-size: 0.86rem; }
.ab-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.ab-word { padding: 12px 14px; border-radius: 14px; background: #F8FAFC; }
.ab-word dt { font-size: 0.9rem; font-weight: 800; color: var(--text-main, #0F172A); }
.ab-word dd { margin: 4px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-muted, #64748B); }
.ab-docs { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-doc { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08); background: #fff; font-size: 0.88rem; font-weight: 600;
  color: var(--text-main, #0F172A); text-decoration: none; transition: border-color .15s; }
.ab-doc:hover { border-color: rgba(37, 99, 235, 0.35); text-decoration: none; }
.ab-doc img { border-radius: 9px; }
@media (max-width: 1100px) { .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ab-hero { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ab-steps, .ab-blocks, .ab-words, .ab-cfgs { grid-template-columns: 1fr; }
  .ab-sec { padding: 18px 16px; }
  .ab-data { flex-direction: column; gap: 12px; }
}

/* Релиз базы раньше проверенных — подсказка на карточке и окно заказа обновления (28.09.2026) */
.db-rel { margin: 8px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(245, 158, 11, 0.4);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.03)); }
.db-rel-head { display: flex; align-items: center; gap: 8px; }
.db-rel-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: #F59E0B; color: #fff; font-size: 0.76rem; font-weight: 800; }
.db-rel-head b { font-size: 0.88rem; color: #92400E; }
.db-rel p { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.45; color: #78350F; }
.db-rel-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.rel-upd-lead { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.5; color: var(--text-main, #0F172A); }
.rel-upd-list { margin: 0 0 14px; padding-left: 18px; font-size: 0.86rem; line-height: 1.7; color: var(--text-muted, #64748B); }
.rel-upd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.2); background: rgba(37, 99, 235, 0.06); transition: opacity .15s; }
.rel-upd-price b { font-size: 1.3rem; font-weight: 800; color: #1D4ED8; }
.rel-upd-price span { font-size: 0.82rem; color: var(--text-muted, #64748B); }
.rel-upd-price.is-off { opacity: 0.45; }
.rel-upd-price.is-off b { text-decoration: line-through; }
.rel-upd-check { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: 0.88rem; cursor: pointer; }
.rel-upd-note { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.5; color: #92400E; }
.rel-upd-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.db-rel-taken { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 9px; font-size: 0.8rem;
  font-weight: 600; color: #92400E; background: rgba(245, 158, 11, 0.14); }
.rel-upd-check-note { margin: 10px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted, #64748B); }
/* Как проверить конфигурацию — подключиться или прислать файл ссылкой (29.09.2026) */
.rel-upd-access { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color, #E2E8F0); }
.rel-upd-access > p { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.5; color: var(--text-main, #0F172A); }
.rel-upd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rel-upd-fields[hidden] { display: none; }
.rel-upd-fields label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rel-upd-fields label span { font-size: 0.78rem; font-weight: 600; color: var(--text-muted, #64748B); }
.rel-upd-access .rel-upd-check { margin-top: 10px; }
.rel-upd-access > p.rel-upd-hint { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted, #64748B); }
.rel-upd-access > p[hidden] { display: none; }
@media (max-width: 560px) { .rel-upd-fields { grid-template-columns: 1fr; } }
.ord-act p.ord-act-path { margin-top: 6px; font-weight: 600; color: var(--text-main, #0F172A); }

/* Окно «Обновление конфигурации» (29.09.2026): сначала сверка релиза, потом путь обновления, цена и как передать
   конфигурацию. Кабинет всегда светлый — цвета светлые. */
.pf-modal.ord-modal.rel-modal { max-width: 640px; }

.rel-chk { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 4px 6px; }
.rel-chk-orb { position: relative; width: 88px; height: 88px; display: grid; place-items: center; margin-bottom: 14px; }
.rel-chk-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(37, 99, 235, 0) 0deg, rgba(37, 99, 235, 0.95) 300deg, rgba(37, 99, 235, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: relSpin 1.1s linear infinite; transition: opacity .3s; }
.rel-chk-core { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  color: #1D4ED8; background: radial-gradient(circle at 30% 25%, #EFF6FF, #DBEAFE);
  box-shadow: 0 10px 26px -12px rgba(37, 99, 235, 0.6); transition: color .3s, background .3s, box-shadow .3s; }
.rel-chk-core > span { display: grid; place-items: center; }
.rel-ico-ok { display: none !important; }
.rel-chk.is-done .rel-chk-ring { opacity: 0; animation: none; }
.rel-chk.is-done .rel-chk-core { color: #047857; background: radial-gradient(circle at 30% 25%, #ECFDF5, #D1FAE5);
  box-shadow: 0 10px 26px -12px rgba(5, 150, 105, 0.6); animation: relPop .35s ease; }
.rel-chk.is-done .rel-ico-run { display: none; }
.rel-chk.is-done .rel-ico-ok { display: grid !important; }
.rel-chk-title { font-size: 1.05rem; font-weight: 700; color: var(--text-main, #0F172A); }
.rel-chk-sub { margin-top: 4px; font-size: .84rem; color: var(--text-muted, #64748B); }
.rel-chk-steps { list-style: none; margin: 18px 0 4px; padding: 0; width: 100%; max-width: 440px; display: grid; gap: 8px;
  text-align: left; }
.rel-chk-steps li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid #E2E8F0; background: #fff; color: #94A3B8; font-size: .88rem;
  transition: border-color .25s, background .25s, color .25s; }
.rel-chk-steps li i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #CBD5E1; color: transparent; transition: background .25s, border-color .25s, color .25s; }
.rel-chk-steps li span { flex: 1; min-width: 0; }
.rel-chk-steps li em { font-style: normal; font-weight: 700; color: var(--text-main, #0F172A); white-space: nowrap;
  font-family: var(--nx-mono, ui-monospace, Consolas, monospace); font-size: .86rem;
  opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; }
.rel-chk-steps li.is-run { color: var(--text-main, #0F172A); border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.04); }
.rel-chk-steps li.is-run i { border-color: rgba(37, 99, 235, 0.2); border-top-color: #2563EB; animation: relSpin .8s linear infinite; }
.rel-chk-steps li.is-done { color: var(--text-main, #0F172A); }
.rel-chk-steps li.is-done i { border-color: #059669; background: #059669; color: #fff; }
.rel-chk-steps li.is-done em { opacity: 1; transform: none; }
.rel-chk.is-fail { padding-bottom: 0; }
.rel-chk-orb.is-fail .rel-chk-core { color: #B45309; background: #FEF3C7; font-size: 1.7rem; font-weight: 800; box-shadow: none; }
@keyframes relSpin { to { transform: rotate(360deg); } }
@keyframes relPop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes relIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.rel-res { animation: relIn .35s ease both; }

/* Путь обновления: ваш релиз → N релизов → нужен аудитору */
.rel-path { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px;
  border-radius: 16px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(79, 70, 229, 0.05));
  border: 1px solid rgba(37, 99, 235, 0.16); }
.rel-node { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rel-node.is-to { text-align: right; align-items: flex-end; }
.rel-node span { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748B; }
.rel-node b { font-family: var(--nx-mono, ui-monospace, Consolas, monospace); font-size: 1.2rem; font-weight: 700;
  color: var(--text-main, #0F172A); }
.rel-node small { font-size: .72rem; color: #94A3B8; }
.rel-track { position: relative; display: flex; justify-content: center; align-items: center; height: 34px; }
.rel-track-line { position: absolute; left: 0; right: 10px; top: 50%; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #2563EB 0 8px, transparent 8px 14px); background-size: 28px 2px;
  animation: relFlow 1.4s linear infinite; }
.rel-track-line::after { content: ''; position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left: 10px solid #2563EB; }
.rel-track-label { position: relative; max-width: 100%; padding: 5px 12px; border-radius: 999px; background: #fff; text-align: center;
  border: 1px solid rgba(37, 99, 235, 0.25); font-size: .8rem; font-weight: 700; color: #1D4ED8;
  box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.5); }
.rel-path.is-warn { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
  border-color: rgba(217, 119, 6, 0.28); }
.rel-path.is-warn .rel-track-line { background-image: repeating-linear-gradient(90deg, #D97706 0 8px, transparent 8px 14px); }
.rel-path.is-warn .rel-track-line::after { border-left-color: #D97706; }
.rel-path.is-warn .rel-track-label { color: #B45309; border-color: rgba(217, 119, 6, 0.35); }
@keyframes relFlow { to { background-position: 28px 0; } }

.rel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 2px 0; }
.rel-chip { padding: 3px 8px; border-radius: 8px; font-family: var(--nx-mono, ui-monospace, Consolas, monospace);
  font-size: .74rem; color: #1E40AF; background: rgba(37, 99, 235, 0.07); border: 1px solid rgba(37, 99, 235, 0.14); }
.rel-chip.is-more { font-family: inherit; color: #64748B; background: transparent; border-style: dashed; }

/* Цена */
.rel-price { margin-top: 14px; padding: 14px 18px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 55%, #4F46E5 100%);
  box-shadow: 0 16px 32px -20px rgba(37, 99, 235, 0.95); transition: opacity .2s, filter .2s; }
.rel-price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rel-price-main b { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rel-price-main span { font-size: .92rem; opacity: .92; }
.rel-price p { margin: 5px 0 0; font-size: .82rem; opacity: .88; }
.rel-price.is-off { opacity: .45; filter: grayscale(.7); }
.rel-price.is-off b { text-decoration: line-through; }

/* Редакция 2.0 — на анализ; релиз подходит */
.rel-old, .rel-ok { display: flex; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; }
.rel-old { color: #B45309; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(217, 119, 6, 0.28); }
.rel-ok { margin-top: 0; color: #047857; background: rgba(5, 150, 105, 0.07); border: 1px solid rgba(5, 150, 105, 0.25); }
.rel-old > svg, .rel-ok > svg { flex: none; margin-top: 1px; }
.rel-old b { display: block; font-size: .95rem; color: #78350F; }
.rel-ok b { display: block; font-size: .95rem; color: #065F46; }
.rel-old p, .rel-ok p { margin: 4px 0 0; font-size: .84rem; line-height: 1.5; }

/* «Конфигурация доработана» — переключатель */
.rel-switch { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: .88rem; cursor: pointer;
  color: var(--text-main, #0F172A); position: relative; }
.rel-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rel-switch-ui { flex: none; position: relative; width: 36px; height: 20px; border-radius: 999px; background: #CBD5E1;
  transition: background .2s; }
.rel-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3); transition: transform .2s; }
.rel-switch input:checked + .rel-switch-ui { background: #D97706; }
.rel-switch input:checked + .rel-switch-ui::after { transform: translateX(16px); }
.rel-switch input:focus-visible + .rel-switch-ui { outline: 2px solid #2563EB; outline-offset: 2px; }

/* Как передадите конфигурацию */
.rel-how { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E2E8F0; }
.rel-how-t { margin-bottom: 10px; font-size: .92rem; font-weight: 700; color: var(--text-main, #0F172A); }
.rel-how-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rel-how-opts.is-3 { grid-template-columns: repeat(3, 1fr); }
.rel-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px;
  border-radius: 14px; border: 1.5px solid #E2E8F0; background: #fff; text-align: left; cursor: pointer; font: inherit;
  color: var(--text-main, #0F172A); transition: border-color .2s, box-shadow .2s, transform .15s, background .2s; }
.rel-opt:hover { border-color: rgba(37, 99, 235, 0.45); transform: translateY(-1px);
  box-shadow: 0 12px 24px -18px rgba(37, 99, 235, 0.8); }
.rel-opt:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.rel-opt-ico { width: 38px; height: 38px; margin-bottom: 6px; border-radius: 11px; display: grid; place-items: center;
  color: #2563EB; background: rgba(37, 99, 235, 0.08); transition: color .2s, background .2s; }
.rel-opt b { font-size: .88rem; font-weight: 700; }
.rel-opt > span:not(.rel-opt-ico) { font-size: .76rem; line-height: 1.35; color: #64748B; }
.rel-opt-mark { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid;
  place-items: center; color: #fff; background: #2563EB; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.rel-opt.is-on { border-color: #2563EB; background: rgba(37, 99, 235, 0.05); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.rel-opt.is-on .rel-opt-mark { opacity: 1; transform: none; }
.rel-opt.is-on .rel-opt-ico { color: #fff; background: #2563EB; }
.rel-how-panel { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #F8FAFC; border: 1px solid #E2E8F0;
  animation: relIn .25s ease both; }
.rel-how-panel[hidden] { display: none; }
.rel-how-panel > p { margin: 0; font-size: .82rem; line-height: 1.5; color: #64748B; }
.rel-how-panel .rel-upd-fields { margin: 0; }
.rel-msgr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rel-msgr-btn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; min-width: 0;
  padding: 8px 13px; border-radius: 10px; color: #fff; font-size: .84rem; text-decoration: none;
  transition: transform .15s, filter .15s; }
.rel-msgr-btn span { min-width: 0; overflow-wrap: anywhere; }
.rel-msgr-btn:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; }
.rel-msgr-btn span { font-size: .78rem; opacity: .88; }
.rel-msgr-btn.is-telegram { background: #229ED9; }
.rel-msgr-btn.is-whatsapp { background: #1FAF55; }
.ord-act .rel-msgr { margin-top: 10px; }
.rel-upd-btns.is-center { justify-content: center; }

@media (max-width: 560px) {
  /* Узкий экран: два релиза сверху, стрелка с подписью — отдельной строкой во всю ширину. */
  .rel-path { gap: 10px 8px; padding: 12px; grid-template-columns: 1fr 1fr;
    grid-template-areas: "from to" "track track"; }
  .rel-path > .rel-node:first-child { grid-area: from; }
  .rel-path > .rel-node.is-to { grid-area: to; }
  .rel-path > .rel-track { grid-area: track; }
  .rel-node b { font-size: 1rem; }
  .rel-track-label { padding: 3px 10px; font-size: .74rem; }
  .rel-how-opts, .rel-how-opts.is-3 { grid-template-columns: 1fr; }
  .rel-opt { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; }
  .rel-opt-ico { grid-row: span 2; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rel-chk-ring, .rel-chk-steps li.is-run i, .rel-track-line { animation: none; }
  .rel-res, .rel-how-panel, .rel-chk.is-done .rel-chk-core { animation: none; }
}

/* ==========================================================================
   Полоса «Первый день — бесплатно» — живая (Вениамин 04.10.2026: «навороти плюшку»): переливающаяся рамка,
   блик раз в несколько секунд, подарок покачивается с искрами, значок «0 ₸», стрелка на кнопке и пульс вокруг неё.
   На телефоне подарок и текст — в одну строку, кнопка — во всю ширину. Кто отключил анимацию в системе — без движения.
   ========================================================================== */
@property --promo-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.promo-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.promo-head .promo-title { margin-bottom: 0; }
.promo-zero {
  flex: none; font: 800 .74rem/1 var(--nx-disp, 'Plus Jakarta Sans'), 'Inter', sans-serif; letter-spacing: .02em;
  color: #FFFFFF; padding: 4px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #3F8A70, #57B08F);
  box-shadow: 0 6px 14px -8px rgba(47, 122, 95, .8);
}
body.light-theme .promo-strip {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 220% at 0% 50%, rgba(78, 158, 130, .18) 0%, transparent 62%) padding-box,
    linear-gradient(180deg, #F3FAF7, #EAF6F1) padding-box,
    conic-gradient(from var(--promo-angle), #3F8A70, #9BDDC3, #3F8A70 40%, #CFEFE2, #3F8A70) border-box;
  box-shadow: 0 18px 46px -30px rgba(23, 90, 66, .55), 0 1px 0 rgba(255, 255, 255, .7) inset;
  animation: promoBorder 6s linear infinite;
}
@keyframes promoBorder { to { --promo-angle: 360deg; } }
body.light-theme .promo-strip::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: promoShine 7s ease-in-out 1.5s infinite;
}
@keyframes promoShine { 0%, 72% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
body.light-theme .promo-gift {
  position: relative; color: #2F7A5F;
  background: linear-gradient(160deg, #FFFFFF, #DDF2E9);
  border-color: rgba(63, 138, 112, .35);
  box-shadow: 0 8px 18px -10px rgba(47, 122, 95, .6);
}
.promo-gift svg { animation: promoGift 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes promoGift {
  0%, 62%, 100% { transform: rotate(0) translateY(0); }
  68% { transform: rotate(-8deg) translateY(-2px); }
  74% { transform: rotate(7deg) translateY(-3px); }
  80% { transform: rotate(-4deg) translateY(-1px); }
  86% { transform: rotate(0) translateY(0); }
}
.promo-gift::before, .promo-gift::after {
  content: ""; position: absolute; width: 9px; height: 9px; background: #F2C14E; opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: promoSpark 3.2s ease-in-out infinite;
}
.promo-gift::before { top: -4px; right: -3px; }
.promo-gift::after { bottom: 3px; left: -5px; width: 6px; height: 6px; animation-delay: .45s; }
@keyframes promoSpark {
  0%, 60%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
  72% { opacity: 1; transform: scale(1) rotate(45deg); }
  86% { opacity: 0; transform: scale(.6) rotate(90deg); }
}
body.light-theme .promo-cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #3F8A70, #2F7A5F);
  box-shadow: 0 10px 22px -12px rgba(31, 95, 72, .9);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
body.light-theme .promo-cta:hover {
  transform: translateY(-1px); background: linear-gradient(135deg, #43957A, #337F63);
  box-shadow: 0 14px 26px -12px rgba(31, 95, 72, .95);
}
.promo-arrow { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.promo-cta:hover .promo-arrow { transform: translateX(3px); }
.promo-cta::before {
  content: ""; position: absolute; inset: -4px; border-radius: 14px; pointer-events: none;
  border: 2px solid rgba(63, 138, 112, .45); opacity: 0;
  animation: promoPulse 2.6s ease-out infinite;
}
@keyframes promoPulse { 0% { opacity: .9; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.06); } }
@media (max-width: 600px) {
  body.light-theme .promo-strip { padding: 14px; gap: 10px 12px; border-radius: 16px; }
  .promo-text { flex: 1 1 0; }
  .promo-title { font-size: .98rem; }
  .promo-note { font-size: .8rem; }
  .promo-cta { width: 100%; padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body.light-theme .promo-strip, body.light-theme .promo-strip::after, .promo-gift svg,
  .promo-gift::before, .promo-gift::after, .promo-cta::before { animation: none !important; }
}

/* ==========================================================================
   Кнопка «Связаться с нами» (порция 103, 07.10.2026): справа внизу на всех вкладках кабинета, над модалками не
   лезет (z-index ниже .pf-modal-back 400), над панелью «Итого к оплате» поднимается.
   ========================================================================== */
.contact-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-blue, #2563EB); color: #fff;
  font: 650 0.95rem/1 inherit; letter-spacing: .01em;
  box-shadow: 0 10px 28px rgba(37, 99, 235, .35), 0 2px 6px rgba(15, 23, 42, .18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-fab[hidden] { display: none; }
.contact-fab:hover { background: var(--accent-hover, #1D4ED8); transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .42), 0 2px 6px rgba(15, 23, 42, .2); }
.contact-fab:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 3px; }
.contact-fab svg { width: 22px; height: 22px; flex: none; }
.contact-fab.open { background: var(--accent-hover, #1D4ED8); }

.contact-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 46;
  width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto;
  padding: 18px; border-radius: 18px;
  background: var(--bg-card, #fff); color: var(--text-primary, #0F172A);
  border: 1px solid var(--border-color, #E2E8F0);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  animation: cp-in .16s ease-out;
}
.contact-panel[hidden] { display: none; }
@keyframes cp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cp-title { font-weight: 750; font-size: 1.05rem; }
.cp-sub { margin-top: 3px; font-size: .82rem; color: var(--text-muted, #64748B); line-height: 1.35; }
.cp-x { border: 0; background: transparent; color: var(--text-muted, #64748B); font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: 0 2px; border-radius: 8px; }
.cp-x:hover { color: var(--text-primary, #0F172A); }
.cp-ways { display: grid; gap: 8px; }
.cp-way {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
  color: inherit; border: 1px solid var(--border-color, #E2E8F0); background: var(--bg-secondary, #fff);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cp-way:hover { border-color: var(--accent-blue, #2563EB); background: var(--bg-card-hover, #F1F5F9); transform: translateX(2px); }
.cp-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.cp-ic svg { width: 20px; height: 20px; }
.cp-telegram .cp-ic { background: #26A5E4; }
.cp-whatsapp .cp-ic { background: #25D366; }
.cp-call .cp-ic { background: var(--accent-blue, #2563EB); }
.cp-email .cp-ic { background: #64748B; }
.cp-txt { display: grid; gap: 2px; min-width: 0; }
.cp-txt b { font-size: .92rem; font-weight: 650; }
.cp-txt small { font-size: .82rem; color: var(--text-muted, #64748B); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-hours { margin-top: 10px; font-size: .8rem; color: var(--text-muted, #64748B); }
.cp-soc-t { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color, #E2E8F0);
  font-size: .78rem; font-weight: 650; color: var(--text-secondary, #334155); }
.cp-soc { display: flex; gap: 10px; margin-top: 10px; }
.cp-s { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  transition: transform .15s ease, filter .15s ease; }
.cp-s:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cp-s svg { width: 21px; height: 21px; }
.cp-s-instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.cp-s-tiktok, .cp-s-threads { background: #111827; }
.cp-s-channel { background: #26A5E4; }

/* Над панелью «Итого к оплате» (она прикреплена к низу экрана во вкладке оплаты) */
body:has(.dash-tab-content.active .pay-bar) .contact-fab { bottom: 112px; }
body:has(.dash-tab-content.active .pay-bar) .contact-panel { bottom: 176px; }

@media (max-width: 640px) {
  /* Телефон: круглая кнопка без подписи, панель — во всю ширину снизу */
  .contact-fab { right: 14px; bottom: 14px; padding: 15px; }
  .contact-fab span { display: none; }
  .contact-panel { right: 8px; left: 8px; bottom: 80px; width: auto; }
  /* панель оплаты на телефоне в две строки, ~150 px от низа — кнопку выше неё */
  body:has(.dash-tab-content.active .pay-bar) .contact-fab { bottom: 172px; }
  body:has(.dash-tab-content.active .pay-bar) .contact-panel { bottom: 238px; }
}
@media print { .contact-fab, .contact-panel { display: none !important; } }

/* ==========================================================================
   Быстрый доступ (10.10.2026, Вениамин: «быстрый доступ справа… подталкивать клиента на правильный путь, если
   застрял»). На широком экране — колонка справа на всех вкладках кабинета; на телефоне и в свёрнутом виде —
   кнопка с осьминогом справа внизу, панель выезжает снизу. «Связаться с нами» в кабинете заменяет «Написать
   менеджеру» в панели, на главной кнопка остаётся. Рисует Portal/quick.js.
   ========================================================================== */
body.qa-on .contact-fab { display: none; }
.qa-panel {
  position: fixed; z-index: 44; right: 16px; top: var(--qa-top, 88px);
  max-height: calc(100vh - var(--qa-top, 88px) - 16px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 0;
  background: #FFFFFF; color: #0F172A; border: 1px solid #E2E8F0; border-radius: 22px;
  box-shadow: 0 24px 60px -28px rgba(15, 23, 42, .38); scrollbar-width: thin;
}
.qa-panel[hidden] { display: none; }
.qa-head { display: flex; align-items: center; gap: 10px; }
/* осьминог шапки — помощник в гарнитуре (octo-head.webp, Nano Banana) */
.qa-octo-img { flex: none; display: block; width: 68px; height: 60px; object-fit: contain; object-position: center bottom;
  margin: -8px -2px -4px -6px; pointer-events: none; }
.qa-head-t { min-width: 0; }
.qa-head-t b { display: block; font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
.qa-head-t span { display: block; font-size: .74rem; line-height: 1.3; color: #64748B; }
.qa-min {
  flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #E2E8F0; background: #F8FAFC; color: #475569; cursor: pointer; padding: 0;
}
.qa-min:hover { background: #EEF2FF; color: #1D4ED8; border-color: #C7D2FE; }
.qa-min svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qa-sec { margin: 2px 2px -4px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #94A3B8; }
.qa-list { display: grid; gap: 8px; }
.qa-card {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 3px 10px; align-items: start;
  padding: 12px; border-radius: 16px; background: #F8FAFC; border: 1px solid #E2E8F0;
}
.qa-card > img { grid-row: span 3; width: 34px; height: 34px; border-radius: 10px; }
.qa-card b { font-size: .86rem; line-height: 1.3; color: #0F172A; }
.qa-card.has-x b { padding-right: 18px; }
.qa-card p { margin: 0; font-size: .78rem; line-height: 1.45; color: #475569; }
.qa-go {
  justify-self: start; margin-top: 6px; padding: 7px 12px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 700; background: #2563EB; color: #FFFFFF;
}
.qa-go:hover { background: #1D4ED8; }
.qa-go.is-soft { background: #FFFFFF; color: #1D4ED8; box-shadow: inset 0 0 0 1px #BFDBFE; }
.qa-go.is-soft:hover { background: #EFF6FF; }
.qa-card.is-big { grid-template-columns: 1fr; gap: 6px; padding: 16px; background: linear-gradient(140deg, #EEF4FF 0%, #FFF4F1 100%); border-color: #D6E2FF; }
.qa-card.is-big > img { grid-row: auto; width: 46px; height: 46px; border-radius: 12px; }
.qa-card.is-big b { font-size: 1rem; }
.qa-card.is-big .qa-go { justify-self: stretch; padding: 11px 14px; font-size: .88rem; text-align: center; }
.qa-card.is-warn { background: #FFF7ED; border-color: #FED7AA; }
.qa-card.is-ok { background: #F0FDF4; border-color: #BBF7D0; }
.qa-card.is-new {
  background: #FFFFFF; border-color: rgba(255, 107, 74, .5); box-shadow: 0 12px 26px -18px rgba(255, 107, 74, .8);
  animation: qaIn .55s cubic-bezier(.2, .9, .25, 1.12) both;
}
@keyframes qaIn { from { opacity: 0; transform: translateX(26px) scale(.97); } to { opacity: 1; transform: none; } }
.qa-x {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #94A3B8; cursor: pointer; font-size: .8rem; line-height: 1;
}
.qa-x:hover { background: #E2E8F0; color: #334155; }
/* Постоянные кнопки прилипают к низу панели: подсказок много — их всё равно видно */
.qa-acts {
  position: sticky; bottom: 0; z-index: 1; display: grid; gap: 6px; margin: 0 -14px; padding: 8px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #FFFFFF 10px);
}
.qa-act {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 14px;
  border: 1px solid #E2E8F0; background: #FFFFFF; color: #0F172A; cursor: pointer; text-align: left;
  font: inherit; font-size: .86rem; font-weight: 700; transition: border-color .15s, background .15s, transform .15s;
}
.qa-act img { width: 30px; height: 30px; flex: none; border-radius: 9px; }
.qa-act::after { content: "›"; margin-left: auto; padding-left: 6px; font-size: 1.15rem; line-height: 1; color: #94A3B8; }
.qa-act:hover { border-color: #BFDBFE; background: #F5F8FF; transform: translateX(-2px); }
.qa-act.is-done { cursor: default; background: #F0FDF4; border-color: #BBF7D0; transform: none; }
.qa-act.is-done::after { content: "✓"; color: #16A34A; font-size: .95rem; }
.qa-act span { min-width: 0; }
.qa-act small { display: block; margin-top: 1px; font-size: .72rem; font-weight: 500; color: #64748B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Подарок за подписки (11.10.2026): тёплая карточка, осьминог с подарком в углу слегка покачивается, кнопки соцсетей
   в их цветах, «Я подписался — получить» — тёмная, заметная. */
.qa-card.qa-gift {
  grid-template-columns: 1fr; gap: 6px; padding: 14px 16px 12px; overflow: hidden; border-color: #FBCFE8;
  background: radial-gradient(120% 90% at 100% 0%, #FFE4E6 0%, rgba(255, 228, 230, 0) 55%),
              linear-gradient(150deg, #FFF7ED 0%, #FDF2F8 55%, #EEF2FF 100%);
  box-shadow: 0 14px 30px -22px rgba(219, 39, 119, .55);
}
/* «.qa-card > img» у обычных подсказок — значок 34 px; у подарка картинка своя, крупная */
.qa-card > img.qa-gift-art {
  position: absolute; right: -4px; top: 6px; width: 88px; height: 91px; border-radius: 0; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(255, 107, 74, .28)); animation: qaFloat 3.6s ease-in-out infinite;
}
@keyframes qaFloat { 0%, 100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
.qa-gift-tag {
  justify-self: start; padding: 3px 9px; border-radius: 999px; background: #FF6B4A; color: #FFFFFF;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
/* место под осьминога справа (сильнее «.qa-card.has-x b», где отступ под крестик) */
.qa-card.qa-gift b { font-size: 1rem; line-height: 1.25; padding-right: 80px; }
.qa-card.qa-gift p { padding-right: 64px; }
.qa-soc { display: flex; gap: 8px; margin-top: 4px; position: relative; }
.qa-soc a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px;
  border-radius: 12px; color: #FFFFFF; font-size: .8rem; font-weight: 700; text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.qa-soc a:hover { transform: translateY(-1px); filter: brightness(1.05); }
.qa-soc a svg { width: 16px; height: 16px; flex: none; }
.qa-soc-ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.qa-soc-tg { background: #26A5E4; }
.qa-go.is-gift { justify-self: stretch; margin-top: 4px; padding: 10px 14px; text-align: center; background: #0F172A; }
.qa-go.is-gift:hover { background: #1E293B; }
.qa-go.is-gift[disabled] { opacity: .6; cursor: default; }
.qa-bonus-form { display: grid; gap: 6px; margin-top: 4px; }
.qa-in {
  width: 100%; padding: 8px 10px; border: 1px solid #E2E8F0; border-radius: 10px; background: #FFFFFF;
  font: inherit; font-size: .82rem; color: #0F172A;
}
.qa-in:focus { outline: none; border-color: #93C5FD; box-shadow: 0 0 0 3px rgba(59, 130, 246, .15); }
.qa-gift small { justify-self: center; font-size: .7rem; color: #94A3B8; }

/* Абонемент «Свой программист-админ 1С» (12.10.2026): значок в шапке и карточка вверху «Быстрого доступа» */
.abon-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #0F172A, #1E293B); color: #FFFFFF; font-size: .74rem; font-weight: 800;
  letter-spacing: .02em; white-space: nowrap; box-shadow: 0 0 0 2px #FF6B4A inset; }
.abon-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF6B4A; }
.abon-badge[hidden] { display: none; }
.qa-abon { display: grid; gap: 10px; margin: 2px 0 10px; padding: 14px 14px 12px; border-radius: 18px; color: #FFFFFF;
  background: radial-gradient(circle at 100% 0%, rgba(255, 107, 74, .35), transparent 55%), linear-gradient(150deg, #0F172A, #1E293B);
  box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .9); }
.qa-abon-t { display: grid; gap: 2px; }
.qa-abon-t b { font-size: .98rem; line-height: 1.2; }
.qa-abon-t span { font-size: .74rem; color: #CBD5E1; }
.qa-abon-chat { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px;
  border-radius: 12px; background: #26A5E4; color: #FFFFFF; font-size: .82rem; font-weight: 800; text-decoration: none;
  transition: transform .15s ease, filter .15s ease; }
.qa-abon-chat.is-wa { background: #22C55E; }
.qa-abon-chat:hover { transform: translateY(-1px); filter: brightness(1.06); }
.qa-abon-chat svg { width: 16px; height: 16px; flex: none; }
/* «Доработки с 09.10 по 08.11» сверху, «7 ч 20 мин из 20 ч» под ней — в одну строку не помещалось (12.10.2026) */
.qa-abon-h { display: grid; grid-template-columns: 1fr; gap: 3px; width: 100%; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.qa-abon-hl { font-size: .76rem; color: #CBD5E1; }
.qa-abon-hv { font-size: 1rem; font-weight: 800; }
.qa-abon-h .qa-abon-bar { margin-top: 4px; }
.qa-abon-bar { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.qa-abon-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FF8A6E, #FF6B4A); }
.qa-abon.is-over .qa-abon-bar i { background: #F59E0B; }
.qa-abon-over { grid-column: 1 / -1; font-size: .74rem; font-weight: 700; color: #FBBF24; }
.qa-abon-list { display: grid; gap: 6px; margin: 0; padding: 8px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.qa-abon-list li { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: baseline; font-size: .76rem; }
.qa-abon-list span { color: #94A3B8; }
.qa-abon-list b { font-weight: 600; color: #F1F5F9; }
.qa-abon-list i { font-style: normal; font-weight: 800; color: #FFB4A2; }
.qa-abon-empty { margin: 0; font-size: .76rem; color: #94A3B8; }
.qa-abon-bk { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: #CBD5E1; }
.qa-abon-bk::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; }
.qa-abon-bk.is-ok::before { background: #22C55E; }
.qa-abon-bk.is-bad { color: #FBBF24; }
.qa-abon-bk.is-bad::before { background: #F59E0B; }
select.qa-in { appearance: auto; cursor: pointer; }
.qa-gift-base { font-size: .8rem; font-weight: 700; color: #334155; }
.qa-card.qa-gift p.qa-gift-note { padding: 6px 9px; border-radius: 10px; background: #FEF2F2; color: #B91C1C;
  font-size: .76rem; }
@media (prefers-reduced-motion: reduce) { .qa-gift-art { animation: none; } }

/* Кнопка с осьминогом: свёрнутая панель и узкий экран. Коралловое кольцо — чтобы её замечали (Вениамин
   11.10.2026: «чуть заметнее»), рядом подпись «Быстрый доступ»: на компьютере всегда, на телефоне — пока панель
   ни разу не открывали. Счётчик — новые уведомления и важные подсказки. */
.qa-fab {
  position: fixed; z-index: 45; right: 18px; bottom: 18px; height: 64px; min-width: 64px; padding: 0; border: 0;
  border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; background: #FFFFFF;
  box-shadow: 0 0 0 3px #FF6B4A, 0 0 0 9px rgba(255, 107, 74, .16), 0 18px 36px -12px rgba(15, 23, 42, .45);
  transition: transform .15s ease; animation: qaBob 6s ease-in-out 1.5s 3;
}
.qa-fab[hidden] { display: none; }
.qa-fab:hover { transform: translateY(-2px); }
/* осьминог выглядывает из круглого окошка: щупальца срезает край круга */
.qa-fab-in { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
/* осьминог кнопки — целиком в круге, машет (octo-fab.webp, Nano Banana) */
.qa-fab-in img { display: block; width: 50px; height: 54px; object-fit: contain; margin-top: 3px; pointer-events: none; }
.qa-fab-t { display: none; padding: 0 20px 0 0; font-weight: 800; font-size: .92rem; line-height: 1.1; color: #0F172A; white-space: nowrap; }
.qa-fab.is-wide .qa-fab-t { display: block; }
.qa-fab i {
  position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
  background: #FF6B4A; color: #FFFFFF; font: 800 .72rem/22px 'Inter', system-ui, sans-serif; font-style: normal;
  box-shadow: 0 0 0 2px #FFFFFF;
}
.qa-fab i:empty { display: none; }
.qa-fab.is-ping { animation: qaPing 1.1s ease 2; }
@keyframes qaPing { 0%, 100% { transform: none; } 30% { transform: translateY(-7px) rotate(-5deg); } 60% { transform: rotate(3deg); } }
@keyframes qaBob { 0%, 86%, 100% { transform: none; } 91% { transform: translateY(-6px); } 96% { transform: translateY(1px); } }
.qa-back { position: fixed; inset: 0; z-index: 46; background: rgba(15, 23, 42, .45); animation: tourFade .2s ease both; }
.qa-back[hidden] { display: none; }
/* «Аудит не прошёл»: причина бывает длинной (текст сервера) — не больше четырёх строк */
.qa-card.is-fail p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Открыта по умолчанию от 1024 px: колонка справа, место под неё освобождает содержимое (шапка и вкладки — во всю
   ширину), «Итого к оплате» — по центру оставшегося. До 1280 px колонка уже. */
:root { --qa-w: 304px; }
@media (max-width: 1279px) { :root { --qa-w: 272px; } }
.qa-panel { width: var(--qa-w); }
@media (min-width: 1024px) {
  body.qa-docked .dash-main {
    width: auto; margin-right: calc(var(--qa-w) + 32px);
    margin-left: max(0px, calc((100vw - var(--qa-w) - 32px - 1320px) / 2));
  }
  body.qa-docked .pay-bar { left: calc((100vw - var(--qa-w) - 32px) / 2); width: min(1180px, calc(100vw - var(--qa-w) - 66px)); }
  body.qa-docked .contact-panel { right: calc(var(--qa-w) + 32px); }
  body.qa-docked:has(.dash-tab-content.active .pay-bar) .qa-panel { max-height: calc(100vh - var(--qa-top, 88px) - 112px); }
}
/* Уже 1024 px — панель листом снизу поверх кабинета, открывается кнопкой */
@media (max-width: 1023px) {
  .qa-panel {
    z-index: 47; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 84vh;
    padding: 16px 16px 0; border-radius: 22px 22px 0 0;
    animation: qaUp .3s cubic-bezier(.2, .9, .25, 1) both;
  }
  .qa-acts { margin: 0 -16px; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); }
}
@keyframes qaUp { from { transform: translateY(100%); } to { transform: none; } }
body:has(.dash-tab-content.active .pay-bar) .qa-fab { bottom: 112px; }
@media (max-width: 640px) {
  .qa-fab { right: 14px; bottom: 14px; height: 58px; min-width: 58px; }
  .qa-fab-in { width: 58px; height: 58px; }
  .qa-fab-in img { width: 45px; height: 49px; }
  .qa-fab-t { font-size: .86rem; padding-right: 16px; }
  body:has(.dash-tab-content.active .pay-bar) .qa-fab { bottom: 172px; }
}
@media (prefers-reduced-motion: reduce) { .qa-card.is-new, .qa-fab, .qa-fab.is-ping, .qa-panel { animation: none !important; } }
@media print { .qa-panel, .qa-fab, .qa-back { display: none !important; } }


/* ============ Первый экран для пришедших с рекламы (08.10.2026) ============
   Одна мысль из ролика, одна кнопка и честно про компьютер с 1С. Остальная главная — ниже, как была. */
.adhero {
  position: relative; z-index: 2;
  width: calc(100% - 32px); max-width: 720px; margin: 0 auto 22px; padding: 26px 24px 22px;
  border-radius: 22px; border: 1px solid rgba(46, 107, 255, 0.34);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 107, 74, 0.16) 0%, rgba(255, 107, 74, 0) 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(46, 107, 255, 0.18) 0%, rgba(46, 107, 255, 0) 55%),
    rgba(10, 16, 30, 0.78);
  box-shadow: 0 24px 70px rgba(4, 10, 24, 0.5);
  color: #FFFFFF;
}
.adhero[hidden] { display: none; }
.adhero-kicker {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #FFB4A3; background: rgba(255, 107, 74, 0.14);
}
.adhero-h {
  margin: 14px 0 10px; font-size: clamp(1.65rem, 6vw, 2.5rem); font-weight: 800;
  line-height: 1.15; letter-spacing: -0.02em; color: inherit;
}
.adhero-sub { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.5; color: #C9D3EA; }
.adhero-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.adhero-list li { position: relative; padding-left: 30px; font-weight: 650; line-height: 1.35; }
.adhero-list li::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 7px;
  background: #FF6B4A;
}
.adhero-list li::after {
  content: ''; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px;
  border: solid #FFFFFF; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}
.adhero-cta { width: 100%; justify-content: center; font-size: 1.06rem; padding: 15px 18px; }
.adhero-free { margin: 12px 0 0; font-weight: 700; color: #6EE7B7; }
.adhero-read { margin: 4px 0 0; font-size: .9rem; color: #9AA7C2; }
.adhero-phone {
  display: none; margin: 14px 0 0; padding: 11px 13px; border-radius: 12px;
  font-size: .95rem; line-height: 1.45; color: #DCE6FF; background: rgba(46, 107, 255, 0.14);
}
.adhero-self { display: none; width: 100%; margin-top: 10px; justify-content: center; }
body.is-phone .adhero-phone { display: block; }
body.is-phone .adhero-self { display: inline-flex; }
.adhero-more {
  display: inline-block; margin-top: 12px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: #8FB4FF;
}
/* С рекламы бесплатный день уже назван на первом экране — вторую полосу не показываем. */
body.is-ad #promoStrip { display: none !important; }
body.light-theme .adhero {
  color: #101A31; border-color: rgba(47, 98, 214, 0.22);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 107, 74, 0.08) 0%, transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(47, 98, 214, 0.07) 0%, transparent 55%),
    #FFFFFF;
  box-shadow: 0 22px 60px -34px rgba(23, 42, 86, 0.42);
}
body.light-theme .adhero-kicker { color: #C2410C; background: rgba(255, 107, 74, 0.12); }
body.light-theme .adhero-sub { color: #4C5876; }
body.light-theme .adhero-free { color: #15803D; }
body.light-theme .adhero-read { color: #6B7893; }
body.light-theme .adhero-phone { color: #17203A; background: rgba(47, 98, 214, 0.07); }
body.light-theme .adhero-more { color: #2A56BE; }
@media (max-width: 560px) {
  .adhero { width: calc(100% - 24px); padding: 22px 18px 18px; }
}
/* Пустой кабинет на телефоне: дальше — на компьютере с 1С */
.phone-next { margin: 16px 0 6px; text-align: left; }
.phone-next p { margin: 6px 0 10px; }
.phone-next-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.phone-next-btns .btn { margin: 0; }


/* ============ Пример отчёта, настоящие находки, «Как это работает», доверие (08.10.2026) ============ */
.adhero-ex { margin: 0 0 8px; font-size: .9rem; font-weight: 700; color: #FFB4A3; }
.adhero-demo { width: 100%; margin-top: 10px; justify-content: center; }
.adhero-count { margin: 6px 0 0; font-weight: 800; color: #FFFFFF; }
body.light-theme .adhero-ex { color: #C2410C; }
body.light-theme .adhero-count { color: #101A31; }

.howstart {
  position: relative; z-index: 2;
  width: calc(100% - 32px); max-width: 1192px; margin: 0 auto 30px; padding: 26px 28px;
  border-radius: 22px; border: 1px solid rgba(46, 107, 255, 0.26);
  background: rgba(10, 16, 30, 0.66); color: #FFFFFF;
}
.howstart-h { margin: 0 0 16px; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; color: inherit; }
.howstart-steps { list-style: none; counter-reset: hs; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
.howstart-steps li { counter-increment: hs; position: relative; padding: 14px 14px 14px 52px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); }
.howstart-steps li::before { content: counter(hs); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px;
  border-radius: 50%; background: #0047FF; color: #FFFFFF; font-weight: 800; display: grid; place-items: center; }
.howstart-steps b { display: block; margin-bottom: 4px; }
.howstart-steps span { display: block; font-size: .93rem; line-height: 1.45; color: #C9D3EA; }
.howstart-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.howstart-act [hidden] { display: none; }
body.light-theme .howstart { background: #FFFFFF; color: #101A31; border-color: rgba(47, 98, 214, 0.18);
  box-shadow: 0 22px 60px -34px rgba(23, 42, 86, 0.32); }
body.light-theme .howstart-steps li { background: #F4F7FD; }
body.light-theme .howstart-steps span { color: #4C5876; }
@media (max-width: 900px) {
  .howstart-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .howstart { width: calc(100% - 24px); padding: 22px 16px; }
  .howstart-steps { grid-template-columns: minmax(0, 1fr); }
  .howstart-act .nx-btn { width: 100%; justify-content: center; }
}
/* Длинные подписи кнопок на телефоне переносим, а не обрезаем */
.adhero-demo, .adhero-self, .howstart-act .nx-btn { white-space: normal; text-align: center; line-height: 1.3; }

/* «Нам уже доверились N компаний» на первом экране — плашка рядом со значком раздела (08.10.2026) */
.adhero-top, .offer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Красная, той же высоты, что «Экспресс-Аудитор 1С»; отступ снизу — у общей строки, иначе плашка съезжала вниз
   (Вениамин 08.10.2026: «красным сделай… и сравняй с „ЭКСПРЕСС-АУДИТОР 1С“») */
.offer-badges { margin-bottom: 14px; }
.offer-badges .offer-badge { margin-bottom: 0; }
.trust-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700;
  color: #FCA5A5; background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.36);
}
.trust-pill[hidden] { display: none; }
.trust-pill svg { flex: none; width: 13px; height: 13px; }
body.light-theme .trust-pill { color: #DC2626; background: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.25); }
/* На рекламном экране вокруг и так много кораллового — там плашка «доверились» зелёная (Вениамин 08.10.2026) */
.adhero .trust-pill { color: #A7F3D0; background: rgba(16, 217, 160, 0.14); border-color: rgba(16, 217, 160, 0.34); }
body.light-theme .adhero .trust-pill { color: #15803D; background: rgba(21, 128, 61, 0.09); border-color: rgba(21, 128, 61, 0.25); }

/* Ход проверки во вкладке «Экспресс-Аудит» — тот же, что на карточке базы (порция 120, 09.10.2026) */
#liveTop .la-running { margin-bottom: 14px; }
.la-running .db-prog { max-width: 440px; margin: 16px auto 2px; }

/* С телефона вместо регистрации — контакт для связи (порция 122, 09.10.2026) */
.lead-modal .lead-lead { margin: 0 0 14px; color: var(--text-secondary); line-height: 1.45; }
.lead-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: .86rem; line-height: 1.4;
  color: var(--text-secondary); cursor: pointer; }
.lead-consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.lead-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(220, 38, 38, .1); color: #DC2626;
  font-size: .88rem; }
.lead-err[hidden], .lead-done[hidden], #leadForm[hidden] { display: none; }
.lead-btn { width: 100%; }
.lead-alt { display: block; margin: 14px auto 0; padding: 4px; background: none; border: 0; color: var(--text-secondary);
  text-decoration: underline; font-size: .86rem; cursor: pointer; }
.lead-done { text-align: center; }
.lead-done-ico { width: 56px; height: 56px; margin: 4px auto 12px; border-radius: 50%; display: grid; place-items: center;
  font-size: 28px; font-weight: 900; color: #fff; background: #16A34A; }
.lead-done b { display: block; font-size: 1.15rem; margin-bottom: 6px; }
.lead-done p { margin: 0 0 16px; color: var(--text-secondary); }
/* окно заявки — над шапкой сайта (у шапки 900): на главной оно открывается поверх неё */
#modalLead { z-index: 950; }
/* способ связи: WhatsApp, Telegram, почта, звонок — две колонки, выбранный обведён синим */
.lead-ch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 14px; }
.lead-chb { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 10px;
  border-radius: 12px; border: 1.5px solid rgba(148, 163, 184, .35); background: transparent; color: inherit;
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
body.light-theme .lead-chb { border-color: #CBD5E1; }
.lead-chb.is-on { border-color: #2563EB; background: rgba(37, 99, 235, .12); color: #93C5FD; }
body.light-theme .lead-chb.is-on { color: #1D4ED8; }
.lead-ic { display: inline-flex; width: 18px; height: 18px; flex: none; }
.lead-ic svg { width: 18px; height: 18px; }
.lead-chb[data-ch="whatsapp"] .lead-ic { color: #16A34A; }
.lead-chb[data-ch="telegram"] .lead-ic { color: #229ED9; }