/* =====================================================
   GLOBAL BASE / BACKDROP — AURORA
   ===================================================== */

::-webkit-scrollbar { display: none; }

body {
  -ms-overflow-style: none;
  scrollbar-width: none;

  background-color: #060818 !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%,  rgba(99,  57, 200, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 15%,  rgba(20, 120, 200, 0.40) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 55% 85%,  rgba(14, 165, 140, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%,  rgba(168, 50, 180, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 50%,  rgba(6,   8,  24, 0.85) 0%, transparent 100%) !important;
}


/* =====================================================
   SERVICE CARDS — GLASS BASE
   ===================================================== */

.service-card {
  background: rgba(15, 23, 42, 0.45) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  position: relative !important;
  overflow: hidden !important;

  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Inner highlight rim */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  pointer-events: none;
  z-index: 2;
}

/* Keep all content above glow layers */
.service-card > * {
  position: relative;
  z-index: 1;
}


/* =====================================================
   GLOW LAYER
   ===================================================== */

.service-card::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  border-radius: 50%;
  opacity: 0.50;
  filter: blur(50px);
}


/* =====================================================
   PER-SERVICE GRADIENTS
   ===================================================== */

li.service[data-name="Request Movies & TV"] .service-card::before {
  background: radial-gradient(circle at center, #3b82f6, #06b6d4);
}

li.service[data-name="About Donations"] .service-card::before {
  background: radial-gradient(circle at center, #64748b, #1e293b);
}

li.service[data-name="Donate via Venmo"] .service-card::before {
  background: radial-gradient(circle at center, #22c55e, #4ade80);
}

li.service[data-name="Donate via PayPal"] .service-card::before {
  background: radial-gradient(circle at center, #2563eb, #60a5fa);
}

li.service[data-name="Current Plex Activity"] .service-card::before {
  background: radial-gradient(circle at center, #a855f7, #ec4899);
}

li.service[data-name="Plex"] .service-card::before {
  background: radial-gradient(circle at center, #f59e0b, #facc15);
}

li.service[data-name="Live TV"] .service-card::before {
  background: radial-gradient(circle at center, #ef4444, #f97316);
}


/* =====================================================
   HOVER
   ===================================================== */

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.service-card:hover::before {
  opacity: 0.72;
}


/* =====================================================
   TYPOGRAPHY
   ===================================================== */

.service-group-name {
  color: #64748b !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

.service-name {
  color: #f8fafc !important;
  font-weight: 600 !important;
}

.service-description {
  color: rgba(226, 232, 240, 0.60) !important;
}


/* =====================================================
   HEADER / WIDGET GLASS PILLS
   ===================================================== */

.widget-container,
.information-widget-logo {
  background: rgba(15, 23, 42, 0.60) !important;
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);

  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}


/* =====================================================
   INFORMATION WIDGET PROGRESS BARS — COLORED
   ===================================================== */

/* RAM — purple */
.widget-container:nth-child(1) div[style*="width"] {
  background: linear-gradient(90deg, #a855f7, #ec4899) !important;
  opacity: 1 !important;
  border-radius: 10px !important;
}

/* CPU — blue */
.widget-container:nth-child(2) div[style*="width"] {
  background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
  opacity: 1 !important;
  border-radius: 10px !important;
}

/* CPU Temp — orange/red */
.widget-container:nth-child(3) div[style*="width"] {
  background: linear-gradient(90deg, #f97316, #ef4444) !important;
  opacity: 1 !important;
  border-radius: 10px !important;
}


/* =====================================================
   INFORMATION WIDGET ICONS — COLORED
   (borrowed from reference CSS)
   ===================================================== */

.widget-container:nth-child(1) .information-widget-resource svg { color: #a855f7 !important; }
.widget-container:nth-child(2) .information-widget-resource svg { color: #3b82f6 !important; }
.widget-container:nth-child(3) .information-widget-resource svg { color: #ef4444 !important; }
.widget-container:nth-child(4) .information-widget-resource svg { color: #94a3b8 !important; }


/* =====================================================
   INFORMATION WIDGET TEXT — COLORED
   ===================================================== */

/* RAM — purple */
.widget-container:nth-child(1) .information-widget-resource .pl-0\.5 {
  color: #c084fc !important;
}
.widget-container:nth-child(1) .information-widget-resource .pr-1 {
  color: #a855f7 !important;
}

/* CPU — blue */
.widget-container:nth-child(2) .information-widget-resource .pl-0\.5 {
  color: #60a5fa !important;
}
.widget-container:nth-child(2) .information-widget-resource .pr-1 {
  color: #3b82f6 !important;
}

/* CPU Temp — orange/red */
.widget-container:nth-child(3) .information-widget-resource .pl-0\.5 {
  color: #fb923c !important;
}
.widget-container:nth-child(3) .information-widget-resource .pr-1 {
  color: #f97316 !important;
}

/* Uptime — slate */
.widget-container:nth-child(4) .information-widget-resource .pl-0\.5 {
  color: #cbd5e1 !important;
}
.widget-container:nth-child(4) .information-widget-resource .pr-1 {
  color: #94a3b8 !important;
}


/* =====================================================
   TAB NAVIGATION
   (borrowed from reference CSS)
   ===================================================== */

#tabs ul {
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 50px !important;
  padding: 4px !important;
  background-color: rgba(15, 23, 42, 0.50) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(16px) !important;
}

#tabs ul li {
  width: auto !important;
  flex: 0 0 auto !important;
}

#tabs ul li button {
  width: auto !important;
  border-radius: 50px !important;
  padding: 6px 20px !important;
  min-height: unset !important;
  color: rgba(255, 255, 255, 0.45) !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

#tabs ul li button[aria-selected="true"] {
  color: #93c5fd !important;
  background-color: rgba(59, 130, 246, 0.15) !important;
  font-weight: bold !important;
}

@media (max-width: 768px) {
  #tabs ul li button {
    padding: 5px 10px !important;
    font-size: 13px !important;
  }
  #tabs ul { max-width: 100% !important; }
}


/* =====================================================
   HIDE APPEARANCE BUTTON
   ===================================================== */

button[aria-label*="appearance"],
button[title*="appearance"] {
  display: none !important;
}