:root {
  --warm-glow: rgba(255, 247, 237, 0.6);
}

body {
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
}

.vault-gradient {
  background: radial-gradient(
      circle at 20% 30%,
      var(--warm-glow) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(19, 91, 236, 0.03) 0%,
      transparent 50%
    );
}

.login-gate {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
}

.input-focus-effect:focus {
  border-color: #0f172a;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.03);
}


.nav-item-active {
  position: relative;
  color: #0f172a;
  font-weight: 700;
}

.nav-item-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #0f172a;
  border-radius: 999px;
}
/* ===============================
   GLASS UI – FIXED (CROSS-BROWSER)
   =============================== */

.glass-ui {
  background: rgba(255, 255, 255, 0.65);

  /* IMPORTANT */
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08);

  border-radius: 1.5rem;
}
/* ===============================
   MOBILE RESPONSIVE PATCH
   =============================== */

@media (max-width: 1024px) {

  /* Page padding */
  main,
  footer,
  header > div {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Header */
  header {
    position: sticky;
  }


  /* KPI cards */
  .kpi-value,
  h2.text-6xl {
    font-size: 2.5rem !important;
  }

  section.grid {
    gap: 1.25rem !important;
  }

  /* Audience Intelligence */
  h3.text-3xl {
    font-size: 1.5rem !important;
  }

  /* Charts */
  svg {
    max-width: 100%;
  }

  /* Core Contributors card */
  .h-\[480px\] {
    height: 360px !important;
  }

  .glass-ui {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }

  /* Floating labels reposition */
  .glass-ui.absolute {
    transform: scale(0.85);
  }

  /* Activity Feed */
  .lg\:col-span-4 {
    margin-top: 2rem;
  }

  /* Fan list */
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Broadcast */
  textarea {
    font-size: 1rem !important;
    padding: 1.25rem !important;
  }

  .send-btn,
  button.bg-primary {
    width: 100%;
    justify-content: center;
  }

  .flex.justify-between {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ===============================
   SMALL MOBILE (PHONES)
   =============================== */

@media (max-width: 640px) {

  /* Header compact */
  header h1 {
    font-size: 0.95rem;
  }

  header .size-10 {
    width: 36px;
    height: 36px;
  }

  /* KPI cards */
  .min-h-\[220px\] {
    min-height: auto !important;
  }

  /* Core Contributors blobs */
  .abstract-blob,
  .blur-\[60px\] {
    filter: blur(40px) !important;
    opacity: 0.4 !important;
  }

  /* Hide floating labels on very small screens */
  .glass-ui.absolute {
    display: none !important;
  }

  /* Fans list text */
  .text-\[13px\] {
    font-size: 0.8rem !important;
  }

  .text-\[10px\] {
    font-size: 0.65rem !important;
  }

  /* Footer */
  footer {
    text-align: center;
  }

  footer > div {
    justify-content: center;
  }

  footer .flex.gap-10 {
    flex-wrap: wrap;
    gap: 1rem;
  }
}