@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ==========================================================================
   LCN HUB — ULTRA-PREMIUM CYBER GRAPHICS & VISUAL ENGINE
   100% Non-destructive: zero logic / functional changes
   ========================================================================== */

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --neon-indigo: #6366f1;
  --neon-cyan: #06b6d4;
  --neon-emerald: #10b981;
  --neon-violet: #8b5cf6;
}

body {
  font-family: var(--font-sans) !important;
  background-color: #04060a !important;
  color: #f1f5f9 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, .font-mono, input.font-mono, span.font-mono, div.font-mono, select.font-mono {
  font-family: var(--font-mono) !important;
}

/* 1. Dynamic Ambient Aurora Mesh */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99, 102, 241, 0.16) 0%, transparent 70%),
    radial-gradient(circle 600px at 15% 35%, rgba(6, 182, 212, 0.08) 0%, transparent 60%),
    radial-gradient(circle 700px at 85% 65%, rgba(139, 92, 246, 0.09) 0%, transparent 60%);
  pointer-events: none !important;
  z-index: 0;
}

/* Cyber Grid */
.lcn-grid {
  background-image: 
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* 2. Glassmorphism Card Architecture */
.lcn-card,
.bg-zinc-950\/90,
.bg-zinc-950\/80,
.bg-zinc-950\/70,
.bg-zinc-950 {
  background: linear-gradient(165deg, rgba(14, 20, 34, 0.88) 0%, rgba(8, 12, 20, 0.94) 100%) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

/* Card Hover Elevation with Glowing Neon Borders */
.lcn-card-hover {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
}

.lcn-card-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.7), rgba(6, 182, 212, 0.45), transparent 65%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none !important;
}

.lcn-card-hover:hover {
  background: linear-gradient(165deg, rgba(22, 30, 52, 0.95) 0%, rgba(13, 18, 30, 0.98) 100%) !important;
  border-color: rgba(99, 102, 241, 0.55) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 28px 56px -12px rgba(0, 0, 0, 0.85), 0 0 30px -4px rgba(99, 102, 241, 0.35) !important;
}

.lcn-card-hover:hover::after {
  opacity: 1;
}

/* 3. Header & Brand Navigation */
header {
  background: rgba(6, 8, 14, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6) !important;
}

header a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

/* Currency toggle active state */
header button.bg-zinc-800 {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.2) !important;
}

/* 4. Hero Section — Cinematic Lighting & Typography */
h1 {
  letter-spacing: -0.015em !important;
  word-spacing: 0.04em !important;
  font-weight: 800 !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}

h2, h3, h4, .tracking-tight {
  letter-spacing: -0.01em !important;
  word-spacing: 0.04em !important;
}

h1 span {
  background: linear-gradient(135deg, #ffffff 15%, #c7d2fe 50%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 24px rgba(99, 102, 241, 0.35));
}

/* Glowing breathing nebula in hero */
@keyframes nebulaGlow {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, 0) scale(1);
    filter: blur(120px) hue-rotate(0deg);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -6%) scale(1.2);
    filter: blur(150px) hue-rotate(25deg);
  }
}

.animate-glow {
  animation: nebulaGlow 8s ease-in-out infinite !important;
}

/* Subtitle contrast boost over 3D canvas */
p.max-w-xl {
  background: rgba(6, 8, 14, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 1.25rem !important;
  padding: 0.85rem 1.4rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* 5. Modern Futuristic Buttons */
button.bg-white,
a.bg-white {
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) !important;
  color: #020617 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 22px rgba(255, 255, 255, 0.22), 0 0 16px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

button.bg-white:hover,
a.bg-white:hover {
  background: #ffffff !important;
  transform: translateY(-2px) scale(1.025) !important;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.4), 0 0 28px rgba(99, 102, 241, 0.55) !important;
}

/* Dark cyber buttons */
button.bg-zinc-900,
a.bg-zinc-900 {
  background: rgba(16, 22, 38, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.25s ease !important;
}

button.bg-zinc-900:hover,
a.bg-zinc-900:hover {
  background: rgba(26, 36, 60, 0.95) !important;
  border-color: rgba(99, 102, 241, 0.55) !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.35) !important;
}

/* 6. Glowing Status Badges */
.text-emerald-400 {
  color: #34d399 !important;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}

.bg-emerald-400 {
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.75);
}

.text-indigo-400 {
  color: #818cf8 !important;
  text-shadow: 0 0 10px rgba(129, 140, 248, 0.45);
}

.text-cyan-400 {
  color: #38bdf8 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* Stock status tags */
span[class*="text-emerald-400"][class*="border"] {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2) !important;
}

/* 7. VPS Configurator Section Polish */
#vps {
  position: relative;
}

#vps .bg-zinc-950 {
  background: rgba(10, 14, 24, 0.92) !important;
}

/* Category Tab pill */
#vps .bg-zinc-950.border-zinc-800 {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Country active pill */
#vps button.bg-zinc-850.border-white {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.4) !important;
}

/* 8. AI Gateway Section Model Cards */
#ai .lcn-card-hover {
  background: linear-gradient(165deg, rgba(16, 22, 38, 0.88) 0%, rgba(9, 13, 24, 0.94) 100%) !important;
}

#ai .lcn-card-hover:hover {
  border-color: rgba(6, 182, 212, 0.55) !important;
  box-shadow: 0 28px 56px -12px rgba(0, 0, 0, 0.85), 0 0 30px -4px rgba(6, 182, 212, 0.35) !important;
}

/* 9. Data Centers */
#infrastructure .lcn-card-hover:hover {
  border-color: rgba(99, 102, 241, 0.55) !important;
}

/* 10. FAQ Section Accordion Glow */
#faq .bg-zinc-900\/80 {
  background: rgba(22, 28, 48, 0.92) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(99, 102, 241, 0.25) !important;
}

/* 11. Floating AI Consultant Widget */
button[class*="fixed bottom-"] {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #06b6d4 100%) !important;
  box-shadow: 0 12px 38px -5px rgba(79, 70, 229, 0.65), 0 0 22px rgba(6, 182, 212, 0.45) !important;
}

button[class*="fixed bottom-"]:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 16px 48px -5px rgba(79, 70, 229, 0.8), 0 0 32px rgba(6, 182, 212, 0.6) !important;
}

/* 12. Modals & Dialog Windows */
.fixed.inset-0.bg-black\/85 {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  background: rgba(2, 4, 8, 0.88) !important;
}

.relative.w-full.bg-zinc-950 {
  background: linear-gradient(165deg, rgba(16, 22, 38, 0.98) 0%, rgba(9, 12, 20, 0.99) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 35px 85px -20px rgba(0, 0, 0, 0.95), 0 0 45px -5px rgba(99, 102, 241, 0.28) !important;
}

/* 13. Input & Select Focus Glow */
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(99, 102, 241, 0.65) !important;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.3) !important;
}

/* 14. High-End Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #04060a;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.65);
}

/* Selection Highlight */
::selection {
  background: rgba(99, 102, 241, 0.45) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   15. USER DASHBOARD & CLIENT PANEL HIGH-TECH POLISH
   ========================================================================== */

/* Main User Profile Header Card */
div:has(> div > div > div:contains("Баланс аккаунта")),
div:has(> div > div:contains("ADMIN")),
div.p-5.sm\:p-6.rounded-2xl.bg-zinc-950.border.border-zinc-850.space-y-3,
div.p-5.sm\:p-6.rounded-2xl.bg-zinc-950.border.border-zinc-850.flex {
  background: linear-gradient(155deg, rgba(16, 23, 40, 0.94) 0%, rgba(9, 13, 23, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  border-radius: 1.25rem !important;
}

/* User Avatar Ring Glow */
div.w-12.h-12.rounded-xl,
div.w-12.h-12.rounded-2xl {
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.35), 0 0 10px rgba(99, 102, 241, 0.25) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Balance Box in Header */
div:has(> div:contains("Баланс аккаунта")),
div.bg-zinc-900\/60.p-3.rounded-xl.border.border-zinc-800\/80 {
  background: linear-gradient(135deg, rgba(22, 30, 52, 0.95) 0%, rgba(13, 18, 32, 0.98) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.5), 0 0 20px -5px rgba(99, 102, 241, 0.25) !important;
  border-radius: 1rem !important;
}

/* Subtabs Navigation Bar */
div.border-b.border-zinc-850.pb-2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Active Subtab Pill */
div.flex.items-center.gap-2.text-xs.font-medium button.bg-zinc-800,
div.flex.items-center.gap-2 button.bg-zinc-800 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(6, 182, 212, 0.25) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

div.flex.items-center.gap-2.text-xs.font-medium button:not(.bg-zinc-800):hover,
div.flex.items-center.gap-2 button:not(.bg-zinc-800):hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

/* Active Instances List: Server Rows */
div.p-4.sm\:p-5.rounded-2xl.bg-zinc-950.border.border-zinc-850 {
  background: linear-gradient(165deg, rgba(14, 20, 36, 0.9) 0%, rgba(8, 12, 22, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px -5px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: all 0.25s ease !important;
}

div.p-4.sm\:p-5.rounded-2xl.bg-zinc-950.border.border-zinc-850:hover {
  border-color: rgba(99, 102, 241, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.8), 0 0 20px -5px rgba(99, 102, 241, 0.25) !important;
}

/* Server Management Button */
button:has(> span:contains("Управление")),
button.px-4.py-2.rounded-xl.bg-zinc-900.border.border-zinc-800 {
  background: linear-gradient(180deg, rgba(28, 38, 64, 0.9) 0%, rgba(18, 24, 40, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.25s ease !important;
}

button:has(> span:contains("Управление")):hover,
button.px-4.py-2.rounded-xl.bg-zinc-900.border.border-zinc-800:hover {
  background: linear-gradient(180deg, rgba(38, 50, 84, 0.95) 0%, rgba(24, 32, 54, 0.98) 100%) !important;
  border-color: rgba(99, 102, 241, 0.6) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* AI Keys Quota Summary Cards (4 Telemetry Boxes) */
div.p-3.rounded-xl.bg-zinc-900\/40.border.border-zinc-850,
div.p-3.rounded-xl.bg-zinc-900\/60.border.border-zinc-850 {
  background: linear-gradient(145deg, rgba(16, 22, 38, 0.85) 0%, rgba(10, 14, 24, 0.92) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 2px solid rgba(99, 102, 241, 0.6) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

/* Telemetry progress bar */
div.h-1\.5.bg-zinc-900.rounded-full {
  height: 8px !important;
  background: rgba(8, 12, 20, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

div.h-1\.5.bg-zinc-900.rounded-full > div.bg-cyan-400,
div.h-full.bg-cyan-400.rounded-full {
  background: linear-gradient(90deg, #6366f1 0%, #06b6d4 50%, #10b981 100%) !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.7) !important;
}

/* Playground / Console Screen */
div.bg-black\/90,
div.bg-black\/80,
div.bg-black {
  background: #040710 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

/* Docs Code Block */
div:has(> pre) {
  border-radius: 1rem !important;
}

pre {
  line-height: 1.6 !important;
}