/* =========================================================
   SideRP / Cube web - shared styling
   Theme: dark + blue accent
   ========================================================= */

:root {
  --accent: #60a5fa; /* tailwind blue-400 */
  --accent-2: #93c5fd; /* blue-300 */
  --bg0: #06070b;
  --bg1: #0b1020;
}

html, body {
  background: var(--bg0);
  color: #e5e7eb;
}

/* Starfield background */
.starfield {
  position: relative;
  isolation: isolate;
}
.starfield::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(2px 2px at 55% 55%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  opacity: .9;
}
.starfield::after {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -1;
  background:
    radial-gradient(600px 300px at 30% 10%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(500px 300px at 80% 40%, rgba(96,165,250,.12), transparent 60%),
    radial-gradient(500px 400px at 20% 80%, rgba(147,197,253,.08), transparent 60%);
  filter: blur(18px);
}

/* Nice focus ring */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(96,165,250,.35);
}

/* Glass card */
.glass {
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

/* Primary button */
.btn-primary {
  background: linear-gradient(135deg, rgba(96,165,250,1), rgba(59,130,246,1));
  color: #06101f;
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline {
  border: 1px solid rgba(96,165,250,.65);
  color: #e5e7eb;
  background: rgba(0,0,0,.25);
}
.btn-outline:hover {
  background: rgba(96,165,250,.12);
}

/* Accent text */
.accent { color: var(--accent); }

/* Smooth header transition */
#site-header {
  transition: transform 220ms ease, background-color 220ms ease;
}