.site-navbar,
.site-navbar * { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }

.site-navbar {
  position: relative;
  z-index: 100;
  width: 100%;
  min-height: 95px;
  padding: 20px 5%;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto auto auto;
  align-items: center;
  gap: 30px;
  color: #fff;
  background: rgba(5, 2, 14, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: Arial, sans-serif;
}

.site-navbar .site-brand { color: #fff; text-decoration: none; width: max-content; }
.site-navbar .site-brand strong { display: block; margin: 0; font-size: 25px; line-height: 1; letter-spacing: 6px; font-weight: 900; }
.site-navbar .site-brand span { display: block; margin-top: 7px; text-align: center; color: #ff2ebd; letter-spacing: 8px; font-size: 11px; font-weight: 900; }

.site-navbar .site-nav {
  width: auto;
  height: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 42px);
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.site-navbar .site-nav a {
  position: relative;
  padding: 8px 0;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .25s ease;
}
.site-navbar .site-nav a:hover,
.site-navbar .site-nav a.active { color: #ff2ebd; }
.site-navbar .site-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: #ff2ebd;
  border-radius: 3px;
  box-shadow: 0 0 16px #ff2ebd;
}

.site-navbar .site-socials { justify-self: end; display: flex; gap: 10px; }
.site-menu-toggle{display:none;width:42px;height:42px;padding:9px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.07);box-shadow:none}.site-menu-toggle span{display:block;width:100%;height:2px;margin:5px 0;border-radius:2px;background:currentColor;transition:transform .25s,opacity .25s}.site-menu-toggle:hover{transform:none;background:rgba(255,46,189,.18)}
.site-navbar .site-socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  text-decoration: none;
  font-size: 18px;
  transition: transform .25s, color .25s, border-color .25s, box-shadow .25s;
}
.site-navbar .site-socials a:hover { color: #ff2ebd; border-color: #ff2ebd; box-shadow: 0 0 18px rgba(255,46,189,.65); transform: translateY(-3px); }
.site-preferences{display:flex;gap:8px;justify-self:end}.site-preferences button{min-width:42px;height:42px;padding:0 10px;border:1px solid rgba(255,255,255,.25);border-radius:21px;background:rgba(255,255,255,.07);color:#fff;font-weight:800;cursor:pointer}.site-preferences button:hover{color:#ff2ebd;border-color:#ff2ebd}
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"] body{color:#24182c;background-color:#f6f1f8!important;background-image:radial-gradient(circle at 8% 8%,rgba(255,133,219,.28),transparent 28%),radial-gradient(circle at 92% 12%,rgba(126,163,255,.25),transparent 30%),linear-gradient(180deg,#fffafd,#f2edf6)!important}
html[data-theme="light"] body::before,html[data-theme="light"] body::after{opacity:0!important}
html[data-theme="light"] .site-navbar{color:#23172c;background:rgba(255,255,255,.82);border-color:rgba(40,15,50,.12)}
html[data-theme="light"] .site-navbar .site-brand,html[data-theme="light"] .site-navbar .site-nav a,html[data-theme="light"] .site-navbar .site-socials a,html[data-theme="light"] .site-preferences button{color:#23172c;border-color:rgba(40,15,50,.2)}

/* Events & City Sections - Light Theme */
html[data-theme="light"] .events-hero h1{color:#24182c!important}
html[data-theme="light"] .events-hero .subtitle{color:#5e5268!important}
html[data-theme="light"] .city-section{background:rgba(255,255,255,.78)!important;border-color:rgba(40,15,50,.12)!important;box-shadow:0 16px 45px rgba(67,37,78,.08)!important}
html[data-theme="light"] .city-header h2{color:#24182c!important}
html[data-theme="light"] .city-label{background:rgba(255,46,189,.12)!important;color:#d90f9b!important;border-color:rgba(217,15,155,.28)!important;font-weight:700!important}
html[data-theme="light"] .city-count{background:rgba(40,15,50,.08)!important;color:#24182c!important;border-color:rgba(40,15,50,.15)!important;font-weight:700!important}
html[data-theme="light"] .city-chip{background:rgba(255,255,255,.85)!important;color:#24182c!important;border-color:rgba(40,15,50,.18)!important}
html[data-theme="light"] .city-chip:hover,html[data-theme="light"] .city-chip.active{background:linear-gradient(135deg,#ff00c8,#ff4ea6)!important;color:#fff!important;border-color:transparent!important}

/* Cards & Buttons - Light Theme */
html[data-theme="light"] .events-btns a:first-child{background:linear-gradient(135deg,#ff00c8,#ff4ea6)!important;color:#fff!important;border:none!important;box-shadow:0 6px 20px rgba(255,0,200,.3)!important}
html[data-theme="light"] .events-btns a:last-child{background:rgba(0,0,0,.45)!important;border:2px solid #ff00c8!important;color:#fff!important;backdrop-filter:blur(8px)!important}
html[data-theme="light"] :is(.card,.about-box,.contact-card,.detail-card,.contestant,.couple-card,.modal-card,.admin-card,.lead-card,.staff-grid article){background:rgba(255,255,255,.88)!important;color:#21152a!important;border-color:rgba(73,36,85,.14)!important;box-shadow:0 18px 50px rgba(67,37,78,.12)!important}
html[data-theme="light"] :is(.back,.back-btn){color:#d90f9b!important;font-weight:800!important}
html[data-theme="light"] .section-title{color:#24182c!important}
html[data-theme="light"] .detail-card i{color:#d90f9b!important}
html[data-theme="light"] .detail-card h3{color:#24182c!important}
html[data-theme="light"] .detail-card p{color:#5e5268!important}
html[data-theme="light"] .quick-menu a{background:rgba(255,255,255,.88)!important;border-color:rgba(40,15,50,.14)!important;color:#24182c!important;box-shadow:0 12px 35px rgba(67,37,78,.08)!important}
html[data-theme="light"] .quick-menu a i{color:#d90f9b!important}
html[data-theme="light"] .quick-menu a h3{color:#24182c!important}
html[data-theme="light"] .quick-menu a p{color:#5e5268!important}
html[data-theme="light"] .sponsors-line{background:rgba(255,255,255,.86)!important;border-color:rgba(217,15,155,.3)!important;box-shadow:0 8px 30px rgba(67,37,78,.08)!important}
html[data-theme="light"] .sponsors-track span{color:#d90f9b!important}
html[data-theme="light"] :is(.top-bar,.vote-header,.staff-hero,.hero-content) h1{color:#24182c!important}
html[data-theme="light"] :is(.top-bar,.vote-header,.staff-hero) p{color:#5e5268!important}
html[data-theme="light"] .vote-timer{background:#fff!important;border-color:#dccfe2!important;box-shadow:0 12px 32px rgba(70,35,80,.1)!important}
html[data-theme="light"] #timerLabel{color:#5e5268!important}
html[data-theme="light"] #timerValue{color:#d90f9b!important}
html[data-theme="light"] .status{background:rgba(255,255,255,.9)!important;color:#24182c!important;border-color:rgba(40,15,50,.15)!important}
html[data-theme="light"] .person-choice{color:#24182c!important}
html[data-theme="light"] .person-choice .category{color:#d90f9b!important}
html[data-theme="light"] .person-choice h2{color:#24182c!important}
html[data-theme="light"] .contact-info h3,html[data-theme="light"] .info h2,html[data-theme="light"] .card-info h2{color:#24182c!important}
html[data-theme="light"] .contact-info p,html[data-theme="light"] .info p{color:#5e5268!important}
html[data-theme="light"] .contact-info .role{color:#d90f9b!important}
html[data-theme="light"] :is(.notice,.join){background:rgba(255,255,255,.88)!important;border-color:rgba(217,15,155,.3)!important;color:#24182c!important}
/* About Page Light Theme */
html[data-theme="light"] .about-hero h1{color:#24182c!important}
html[data-theme="light"] .about-hero .lead{color:#5e5268!important}
html[data-theme="light"] .manifesto{background:rgba(255,255,255,.88)!important;border-color:rgba(40,15,50,.14)!important;box-shadow:0 25px 70px rgba(67,37,78,.12)!important;color:#24182c!important}
html[data-theme="light"] .manifesto>span{color:rgba(217,15,155,.22)!important}
html[data-theme="light"] .manifesto h2{color:#24182c!important}
html[data-theme="light"] .manifesto p{color:#5e5268!important}
html[data-theme="light"] .values article{background:rgba(255,255,255,.88)!important;border-color:rgba(40,15,50,.14)!important;box-shadow:0 18px 50px rgba(67,37,78,.08)!important;color:#24182c!important}
html[data-theme="light"] .values h3{color:#24182c!important}
html[data-theme="light"] .values p{color:#5e5268!important}
html[data-theme="light"] .promise h2{color:#24182c!important}
html[data-theme="light"] .promise-copy{color:#5e5268!important}
html[data-theme="light"] .about-cta{background:linear-gradient(135deg,#ff00c8,#ff4ea6)!important;color:#fff!important;box-shadow:0 10px 30px rgba(255,0,200,.35)!important}

html[data-theme="light"] :is(.gallery-box,.tickets-box,.page .hero){color:#fff!important}
html[data-theme="light"] :is(.gallery-box,.tickets-box,.page .hero) p{color:rgba(255,255,255,.85)!important}
html[data-theme="light"] .page .hero :is(h1,h2,h3,h4),html[data-theme="light"] .gallery-box h2,html[data-theme="light"] .tickets-box h2{color:#fff!important}
html[data-theme="light"] :is(.gallery-box a,.tickets-box a){background:linear-gradient(135deg,#ff00c8,#ff4ea6)!important;color:#fff!important;border:none!important}
html[data-theme="light"] .features{background:rgba(255,255,255,.58);border-color:rgba(55,25,65,.1)}
html[data-theme="light"] .footer,html[data-theme="light"] footer{background:rgba(255,255,255,.58)!important;border-color:rgba(55,25,65,.1)!important}
html[data-theme="light"] :is(p,.subtitle,.intro,.desc,footer){color:#655a6e}
html[data-theme="light"] :is(h1,h2,h3,h4){color:#24182c}
html[data-theme="light"] .left h1{color:#24182c}html[data-theme="light"] .left h1 span{background:linear-gradient(90deg,#c91291,#7040c7,#302038);background-clip:text;-webkit-background-clip:text;color:transparent}
html[data-theme="light"] .modal{background:rgba(242,235,247,.82)}
html[data-theme="light"] :is(input,textarea){background:#fff!important;color:#24182c!important;border-color:#d9cddd!important}

@media (max-width: 900px) {
  .site-navbar { grid-template-columns: 1fr auto auto; gap: 18px; }
  .site-navbar .site-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .site-navbar { min-height: 0; padding: 14px 16px; grid-template-columns: 1fr auto auto; gap: 10px; text-align: left; }
  .site-navbar .site-brand { justify-self: start; }
  .site-navbar .site-brand strong { font-size: 19px; letter-spacing: 3px; }
  .site-navbar .site-brand span { margin-top: 5px; font-size: 9px; letter-spacing: 6px; }
  .site-navbar .site-socials { display: none; }
  .site-navbar .site-preferences { justify-self: end; }
  .site-menu-toggle{display:block;justify-self:end;color:inherit}
  .site-navbar .site-nav { display:none;grid-column:1/-1;grid-row:2;gap:0;overflow:visible;flex-direction:column;align-items:stretch;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(9,5,18,.96);box-shadow:0 18px 40px rgba(0,0,0,.35) }
  .site-navbar.menu-open .site-nav{display:flex}
  .site-navbar.menu-open .site-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-navbar.menu-open .site-menu-toggle span:nth-child(2){opacity:0}
  .site-navbar.menu-open .site-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-navbar .site-nav::-webkit-scrollbar { display: none; }
  .site-navbar .site-nav a { padding:13px 14px;font-size:14px;border-radius:10px; }
  .site-navbar .site-nav a:hover,.site-navbar .site-nav a.active{background:rgba(255,46,189,.12)}
  .site-navbar .site-nav a.active::after{display:none}
  .site-navbar .site-nav a.active::after { bottom: -3px; }
}
html[data-theme="light"] .site-navbar .site-nav{background:rgba(255,255,255,.98);border-color:rgba(40,15,50,.12)}

@media (max-width: 360px) {
  .site-navbar { padding-inline: 12px; }
  .site-navbar .site-nav { gap: 12px; }
  .site-navbar .site-nav a { font-size: 12px; }
  .site-preferences button { min-width: 38px; height: 38px; padding-inline: 8px; }
}

/* ─── MADE BY XPHOB BUTTON ─── */
.made-by-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 0, 200, 0.2), rgba(0, 0, 0, 0.6));
  border: 1px solid rgba(255, 0, 200, 0.5);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 0, 200, 0.2);
}

.made-by-btn:hover {
  background: linear-gradient(135deg, #ff00c8, #ff4ea6);
  border-color: transparent;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(255, 0, 200, 0.6);
  transform: translateY(-2px);
}