@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Nunito:wght@400;600;700&display=swap');

/* ── BODY ── */
body {
  background: #060810 !important;
  font-family: 'Nunito', sans-serif !important;
  position: relative !important;
  overflow-x: hidden !important;
}

/* ── MILKY WAY — barevný mlhový pruh ── */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    /* Mléčná dráha — šikmý barevný pruh */
    linear-gradient(
      125deg,
      transparent 0%,
      transparent 20%,
      rgba(80, 40, 180, 0.07) 28%,
      rgba(120, 60, 220, 0.13) 33%,
      rgba(160, 80, 255, 0.18) 37%,
      rgba(100, 140, 255, 0.14) 41%,
      rgba(60, 100, 200, 0.10) 45%,
      rgba(40, 60, 160, 0.06) 50%,
      transparent 58%,
      transparent 100%
    ),
    /* Druhý slabší pruh pro hloubku */
    linear-gradient(
      125deg,
      transparent 0%,
      transparent 25%,
      rgba(200, 100, 255, 0.04) 32%,
      rgba(255, 150, 200, 0.06) 36%,
      rgba(150, 100, 255, 0.08) 40%,
      rgba(80, 120, 255, 0.05) 44%,
      transparent 52%,
      transparent 100%
    ),
    /* Hvězdy — malé */
    radial-gradient(circle 1px at 5% 8%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 12% 22%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 18% 45%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 7% 67%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 23% 88%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 30% 5%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 38% 33%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 42% 72%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 35% 58%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 28% 15%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 50% 20%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 55% 48%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 48% 82%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 60% 12%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 65% 65%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 58% 92%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 70% 38%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 75% 75%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 68% 28%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 80% 5%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 85% 52%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 78% 85%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 90% 18%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 95% 60%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 92% 88%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 3% 35%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 14% 78%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 44% 12%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 72% 95%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 88% 42%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 33% 95%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 16% 55%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 52% 38%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 62% 78%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 82% 28%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 97% 72%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 25% 68%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 40% 48%, #c8b4ff 0%, transparent 100%),
    radial-gradient(circle 1px at 10% 92%, #fff 0%, transparent 100%),
    radial-gradient(circle 1px at 47% 58%, #fff 0%, transparent 100%) !important;
  animation: twinkle1 5s ease-in-out infinite alternate !important;
}

/* ── HVĚZDY VRSTVA 2 — větší ── */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle 2px at 8% 18%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 20% 72%, #e0d0ff 0%, transparent 100%),
    radial-gradient(circle 2px at 35% 40%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 52% 85%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 63% 22%, #e0d0ff 0%, transparent 100%),
    radial-gradient(circle 2px at 78% 60%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 88% 15%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 94% 78%, #e0d0ff 0%, transparent 100%),
    radial-gradient(circle 2px at 15% 50%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 45% 28%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 70% 90%, #e0d0ff 0%, transparent 100%),
    radial-gradient(circle 2px at 82% 42%, #fff 0%, transparent 100%),
    radial-gradient(circle 3px at 25% 12%, #fff 0%, transparent 100%),
    radial-gradient(circle 3px at 55% 65%, #e0d0ff 0%, transparent 100%),
    radial-gradient(circle 3px at 75% 30%, #fff 0%, transparent 100%),
    radial-gradient(circle 3px at 90% 50%, #fff 0%, transparent 100%),
    radial-gradient(circle 3px at 40% 95%, #e0d0ff 0%, transparent 100%),
    radial-gradient(circle 3px at 10% 80%, #fff 0%, transparent 100%),
    /* Hvězdy uvnitř mléčné dráhy — jasnější */
    radial-gradient(circle 2px at 32% 30%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 36% 36%, #e8d8ff 0%, transparent 100%),
    radial-gradient(circle 1px at 38% 28%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 42% 34%, #b4c8ff 0%, transparent 100%),
    radial-gradient(circle 1px at 44% 40%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 48% 32%, #e0d0ff 0%, transparent 100%),
    radial-gradient(circle 1px at 50% 38%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 54% 35%, #b4c8ff 0%, transparent 100%),
    radial-gradient(circle 1px at 56% 30%, #fff 0%, transparent 100%),
    /* Fialové hvězdy */
    radial-gradient(circle 2.5px at 60% 45%, #7c5cff 0%, transparent 100%),
    radial-gradient(circle 2.5px at 30% 80%, #7c5cff 0%, transparent 100%),
    radial-gradient(circle 2.5px at 85% 70%, #7c5cff 0%, transparent 100%),
    radial-gradient(circle 2px at 18% 30%, #a088ff 0%, transparent 100%),
    radial-gradient(circle 2px at 72% 20%, #a088ff 0%, transparent 100%) !important;
  animation: twinkle2 8s ease-in-out infinite alternate-reverse !important;
}

@keyframes twinkle1 {
  0%   { opacity: 0.55; }
  40%  { opacity: 1; }
  70%  { opacity: 0.75; }
  100% { opacity: 0.9; }
}
@keyframes twinkle2 {
  0%   { opacity: 0.45; }
  30%  { opacity: 0.95; }
  60%  { opacity: 0.65; }
  100% { opacity: 1; }
}

/* Content nad hvězdami */
#app { position: relative !important; z-index: 1 !important; }
#app > * { position: relative !important; z-index: 1 !important; }

/* ── UI STYLING ── */
.bg-cl-card, .bg-card { background: rgba(13,15,26,0.88) !important; border: 1px solid rgba(124,92,255,0.2) !important; backdrop-filter: blur(6px) !important; }
.bg-background { background: transparent !important; }

nav { background: rgba(13,15,26,0.92) !important; border-color: rgba(124,92,255,0.2) !important; backdrop-filter: blur(6px) !important; }
nav a { color: #8a8fb0 !important; font-weight: 600 !important; transition: color 0.2s !important; }
nav a:hover { color: #fff !important; }

.text-cl-accent, [class*="text-cl-accent"] { color: #a88bff !important; }
.text-cl-t-primary, [class*="text-cl-t-primary"] { color: #e0e2f0 !important; font-weight: 700 !important; }
.text-cl-t-secondary, [class*="text-cl-t-secondary"] { color: #8a8fb0 !important; }
.text-green-500, [class*="text-green"] { color: #5ec880 !important; }

.font-bold { font-family: 'Rajdhani', sans-serif !important; }
.line-through, del { color: #4a4f6a !important; }

a.rounded-lg, a.rounded-xl { transition: transform 0.22s ease, box-shadow 0.22s ease !important; }
a.rounded-lg:hover, a.rounded-xl:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 30px rgba(124,92,255,0.25) !important;
  border-color: rgba(124,92,255,0.6) !important;
}

input[type="text"], input[type="search"], input[placeholder*="Search"], input[placeholder*="search"] {
  background: rgba(13,15,26,0.9) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #e0e2f0 !important;
}
input:focus { border-color: #7c5cff !important; box-shadow: 0 0 0 3px rgba(124,92,255,0.15) !important; outline: none !important; }
input::placeholder { color: #4a4f6a !important; }

.bg-cl-accent, [class*="bg-cl-accent"] { background: #7c5cff !important; color: #fff !important; font-weight: 700 !important; }
.bg-cl-accent:hover { background: #9370ff !important; }

h1, h2, h3 { font-family: 'Rajdhani', sans-serif !important; color: #e0e2f0 !important; font-weight: 700 !important; }

footer { background: rgba(6,8,16,0.95) !important; border-color: rgba(255,255,255,0.06) !important; }
footer a { color: #a88bff !important; }
footer p, footer span { color: #6a6f90 !important; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #060810; }
::-webkit-scrollbar-thumb { background: rgba(124,92,255,0.5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7c5cff; }