:root {
  --bg: #080706;
  --fg: #ffffff;
  --accent: #adff2f;
}

/* BASE */
body.dark {
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* LINKS */
a {
  color: var(--accent) !important;
  text-decoration: none;
  transition: 0.25s;
}
a:hover { opacity: 0.75; }

/* HEADER BASE */
.site-header,
.admin-topbar {
  background: #050404;
  border-bottom: 1px solid rgba(173,255,47,0.25);
}

/* MENU center */
.menu-center a {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.3px;
}

/* LOGO */
.logo-svg {
  height: 50px;
  display: block;
}

/* FADER SLOT + HANDLE */
.fader-slot {
  transition: opacity 0.25s ease;
}
.fader-handle {
  transition: opacity 0.25s ease;
}

/* LAYOUT */
.container {
  flex: 1 0 auto;
  padding: 24px;
}

/* FOOTER */
footer {
  flex-shrink: 0;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-text {
  color: #ffffff;
  opacity: 0.85;
  font-size: 16px;
}
.footer-text .brand-footer {
  color: #adff2f;
  font-weight: 700;
}

/* HEADER RIGHT (Admin + Lang) */
.header-right a {
  color: var(--accent) !important;
  font-size: 22px;
}

/* LANG DROPDOWN (header flags small) */
.lang-current img {
  width: 24px;
  height: 16px;
  border-radius: 2px;
}
.lang-list img {
  width: 22px;
  height: 16px;
  border-radius: 2px;
}

/* CENTER PAGE LANGUAGE FLAGS (start page) */
.lang-select-wrapper {
  text-align: center;
  margin-top: 150px;
}

.lang-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.16em;
  color: #adff2f;
}

.lang-flags {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 30px;
}

.flag-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.flag {
  width: 72px;
  height: 48px;
  display: block;
  transform-origin: left center;
  animation: windwave 1.8s ease-in-out infinite;
}

/* Delay per-flag */
.flag-wrapper:nth-child(1) .flag { animation-delay: 0.25s; }
.flag-wrapper:nth-child(2) .flag { animation-delay: 0.55s; }
.flag-wrapper:nth-child(3) .flag { animation-delay: 0.85s; }

/* WIND ANIMATION */
@keyframes windwave {
  0% {
    transform: perspective(500px) rotateY(0deg) skewY(0deg);
  }
  25% {
    transform: perspective(500px) rotateY(10deg) skewY(1deg);
  }
  50% {
    transform: perspective(500px) rotateY(0deg) skewY(-1deg);
  }
  75% {
    transform: perspective(500px) rotateY(-10deg) skewY(1deg);
  }
  100% {
    transform: perspective(500px) rotateY(0deg) skewY(0deg);
  }
}

/* flag label (start page only) */
.flag-label {
  margin-top: 10px;
  color: #fff;
  font-size: 18px;
  opacity: 0.9;
}

/* BUTTONS */
button, .btn {
  background: var(--accent);
  color: #000;
  border-radius: 6px;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}
button:hover, .btn:hover {
  opacity: 0.8;
}