@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --color-accent-500:     #e040fb;
  --color-accent-600:     #c026d3;
  --color-t-primary:      #f0eaf8;
  --color-t-accent:       #ffffff;
  --color-t-secondary:    #a998c4;
  --color-background:     #07040f;
  --color-card:           #0f0820;
}

/* ── BODY & BASE ── */
body {
  background: #07040f !important;
  color: #f0eaf8 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── BACKGROUND CONTAINERS ── */
.bg-background,
[class*="bg-background"] {
  background-color: #07040f !important;
}
.bg-card,
[class*="bg-card"] {
  background-color: #0f0820 !important;
}
.bg-background\/35,
.bg-background\/50 {
  background-color: rgba(7,4,15,.6) !important;
}

/* ── BORDERS ── */
.border-white\/5,
[class*="border-white/5"] {
  border-color: rgba(224,64,251,.12) !important;
}
[class*="border-white/"] {
  border-color: rgba(255,255,255,.06) !important;
}

/* ── ACCENT ── */
.bg-accent-500,
[class*="bg-accent-500"] {
  background: linear-gradient(135deg, #7c3aed, #e040fb) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  color: #fff !important;
}
.bg-accent-500\/10,
[class*="bg-accent-500/10"] {
  background-color: rgba(224,64,251,.1) !important;
}
.hover\:bg-accent-500\/10:hover {
  background-color: rgba(224,64,251,.1) !important;
}
.hover\:enabled\:bg-accent-500\/50:hover:enabled {
  background: linear-gradient(135deg, rgba(124,58,237,.7), rgba(224,64,251,.7)) !important;
}
.text-accent-500,
[class*="text-accent-500"] {
  color: #e040fb !important;
}
.border-accent-500,
[class*="border-accent-500"] {
  border-color: #e040fb !important;
}
.fill-accent-500,
[class*="fill-accent-500"] {
  fill: #e040fb !important;
}

/* ── TYPOGRAPHY ── */
p, span, div, a, button, input, textarea, select, label {
  font-family: 'DM Sans', sans-serif !important;
}
h1, h2, h3, h4, h5 {
  font-family: 'Syne', sans-serif !important;
}

/* ── NAVBAR ── */
header.component {
  background: transparent !important;
  box-shadow: none !important;
}
header.component > div:first-child {
  background: rgba(13,8,25,.85) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(224,64,251,.12) !important;
  border-radius: 14px !important;
}
header h1.text-2xl {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: #f0eaf8 !important;
  letter-spacing: -.02em !important;
}
nav a[class*="rounded-lg"],
nav button[class*="rounded-lg"] {
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all .2s !important;
}
nav a.bg-accent-500\/10,
nav button.bg-accent-500\/10 {
  background: rgba(224,64,251,.12) !important;
  color: #e040fb !important;
  border-color: rgba(224,64,251,.25) !important;
}

/* ── BUTTONS (global) ── */
button[class*="bg-accent-500"],
a[class*="bg-accent-500"] {
  background: linear-gradient(135deg, #7c3aed, #e040fb) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #fff !important;
}
button[class*="bg-accent-500"]:hover,
a[class*="bg-accent-500"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(224,64,251,.4) !important;
  opacity: .92 !important;
}
button[class*="border-accent-500"],
a[class*="border-accent-500"] {
  border-radius: 999px !important;
}

/* ── INPUTS & FORMS ── */
input[class*="bg-white/5"],
textarea[class*="bg-white/5"],
select[class*="bg-white/5"] {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(224,64,251,.15) !important;
  border-radius: 10px !important;
  color: #f0eaf8 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #e040fb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(224,64,251,.1) !important;
}

/* ── CARDS & GENERAL ── */
.bg-card.rounded-lg,
.bg-card.border {
  background: #0f0820 !important;
  border: 1px solid rgba(224,64,251,.12) !important;
  border-radius: 16px !important;
}

/* ── SIDEBAR ── */
aside {
  background: rgba(13,8,25,.9) !important;
  backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(224,64,251,.1) !important;
}

/* ── MODALS ── */
[class*="bg-background"].rounded-lg.border,
[class*="rounded-lg"][class*="border"][class*="bg-background"] {
  background: #0f0820 !important;
  border-color: rgba(224,64,251,.15) !important;
  border-radius: 20px !important;
}
.fixed.inset-0.bg-black\/75,
.fixed.inset-0.bg-black\/80 {
  background: rgba(0,0,0,.75) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── ANNOUNCEMENT BAR ── */
.announcement .bg-accent-500 {
  background: rgba(224,64,251,.1) !important;
  border-bottom: 1px solid rgba(224,64,251,.15) !important;
}

/* ── PAGINATION ── */
[class*="pagination"] a,
[class*="pagination"] button,
[class*="pagination"] span {
  border-radius: 8px !important;
  transition: all .2s !important;
}

/* ── LOADER ── */
.milr{position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent;animation:milSpin 1s linear infinite}
.milr1{border-top-color:#e040fb}
.milr2{inset:10px;border-top-color:rgba(124,58,237,.5);animation-duration:1.5s;animation-direction:reverse}
@keyframes milSpin{to{transform:rotate(360deg)}}