body.x9-admin-mode {
  --x9-void:        #0B0E14;
  --x9-carbon:      #121721;
  --x9-glass:       rgba(18, 23, 33, 0.75);
  --x9-gold:        #D4AF37;
  --x9-gold-glow:   #FFD700;
  --x9-cyan:        #00F2FE;
  --x9-cyan-deep:   #4FACFE;
  --x9-ok:          #00E676;
  --x9-bad:         #FF3B30;
  --x9-warn:        #FF9500;
  --x9-hair:        1px solid rgba(212, 175, 55, 0.18);
  --x9-shadow:      0 20px 50px rgba(0, 0, 0, 0.6);
  --x9-blur:        blur(20px) saturate(180%);
  --x9-font:        'Inter', 'Outfit', 'Cabinet Grotesk', system-ui, sans-serif;
  --x9-radius:      14px;
  --x9-radius-sm:   10px;
}

body.x9-admin-mode {
  background: var(--x9-void);
  font-family: var(--x9-font);
  color: #E6EAF2;
  -webkit-font-smoothing: antialiased;
}

body.x9-admin-mode .route-panel {
  background: var(--x9-glass);
  backdrop-filter: var(--x9-blur);
  -webkit-backdrop-filter: var(--x9-blur);
  border: var(--x9-hair);
  border-radius: var(--x9-radius);
  box-shadow: var(--x9-shadow);
  padding: 20px;
}

body.x9-admin-mode .route-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

body.x9-admin-mode .route-table th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: rgba(212, 175, 55, 0.7);
  background: var(--x9-carbon);
  border-bottom: var(--x9-hair);
  padding: 12px 14px;
  text-align: left;
}

body.x9-admin-mode .route-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

body.x9-admin-mode .route-table tr:hover td {
  background: rgba(212, 175, 55, 0.04);
}

body.x9-admin-mode .btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;
}

body.x9-admin-mode .btn:active {
  transform: scale(0.98);
}

body.x9-admin-mode .btn--cta {
  background: linear-gradient(135deg, var(--x9-gold) 0%, var(--x9-gold-glow) 45%, var(--x9-cyan) 100%);
  color: #0B0E14;
  border: none;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.25);
}

body.x9-admin-mode .btn--cta:hover {
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.4);
}

body.x9-admin-mode .btn--ghost {
  background: transparent;
  border: var(--x9-hair);
  color: var(--x9-gold);
}

body.x9-admin-mode .btn--ghost:hover {
  background: rgba(212, 175, 55, 0.08);
}

body.x9-admin-mode .route-tabs {
  gap: 8px;
}

body.x9-admin-mode .route-tab {
  border-radius: 999px;
  border: var(--x9-hair);
  padding: 8px 16px;
  min-height: 40px;
  color: rgba(230, 234, 242, 0.7);
  transition: all .15s ease;
}

body.x9-admin-mode .route-tab:hover {
  color: #fff;
  background: rgba(212, 175, 55, 0.06);
}

body.x9-admin-mode .route-tab--active {
  color: #0B0E14;
  background: linear-gradient(135deg, var(--x9-gold), var(--x9-cyan));
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.3);
}

body.x9-admin-mode .stat-card {
  background: var(--x9-glass);
  backdrop-filter: var(--x9-blur);
  border: var(--x9-hair);
  border-radius: var(--x9-radius);
  box-shadow: var(--x9-shadow);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

body.x9-admin-mode .stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--x9-gold), transparent);
  opacity: 0.6;
}

body.x9-admin-mode .stat-card h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: rgba(230, 234, 242, 0.6);
  margin: 0 0 8px;
}

body.x9-admin-mode .stat-card p {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

body.x9-admin-mode .field__input {
  background: rgba(11, 14, 20, 0.6);
  border: var(--x9-hair);
  border-radius: var(--x9-radius-sm);
  color: #E6EAF2;
  padding: 10px 14px;
  min-height: 44px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.x9-admin-mode .field__input:focus {
  outline: none;
  border-color: var(--x9-cyan);
  box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.12);
}

body.x9-admin-mode .field__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.75);
}

body.x9-admin-mode .route-up    { color: var(--x9-ok); }
body.x9-admin-mode .route-down  { color: var(--x9-bad); }
body.x9-admin-mode .route-warn  { color: var(--x9-warn); }
body.x9-admin-mode .route-muted { color: rgba(230, 234, 242, 0.55); }
body.x9-admin-mode .route-empty {
  color: rgba(255, 59, 48, 0.85);
  text-align: center;
  padding: 24px;
}

body.x9-admin-mode h1,
body.x9-admin-mode h2,
body.x9-admin-mode h3 {
  font-family: var(--x9-font);
  letter-spacing: -0.01em;
}

body.x9-admin-mode h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(212, 175, 55, 0.85);
  margin: 0 0 14px;
}

body.x9-admin-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
body.x9-admin-mode ::-webkit-scrollbar-track { background: var(--x9-void); }
body.x9-admin-mode ::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.25);
  border-radius: 10px;
}
body.x9-admin-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.4);
}

@media (max-width: 767px) {
  body.x9-admin-mode .route-tabs {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.x9-admin-mode .route-tabs::-webkit-scrollbar { display: none; }
  body.x9-admin-mode .btn { min-height: 44px; }
}

body.x9-admin-mode #x9Video {
  border: var(--x9-hair);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12), 0 12px 32px rgba(0, 0, 0, 0.5);
}

body.x9-admin-mode [data-x9-verif-thumb] {
  border: var(--x9-hair);
  border-radius: var(--x9-radius-sm);
}

body.x9-admin-mode .stats-grid {
  gap: 16px;
}