/* Crimepolis Modern Theme */
:root {
  --cp-bg: #0d0f12;
  --cp-bg-2: #121418;
  --cp-panel: #16181d;
  --cp-panel-2: #1c1f26;
  --cp-border: #2a2d36;
  --cp-red: #dc2626;
  --cp-red-glow: #b91c1c;
  --cp-gold: #c9a84c;
  --cp-gold-bright: #fcd34d;
  --cp-text: #e8e8e8;
  --cp-text-dim: #94a3b8;
  --cp-text-sub: #475569;
}

html, body {
  background: radial-gradient(ellipse at top, #1a1d23 0%, var(--cp-bg) 60%) fixed !important;
  background-color: var(--cp-bg) !important;
  color: var(--cp-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(220,38,38,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

header#top {
  background: linear-gradient(180deg, rgba(22,24,29,0.98) 0%, rgba(13,15,18,0.95) 100%) !important;
  border-bottom: 1px solid var(--cp-border) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.6), 0 1px 0 rgba(220,38,38,0.2) !important;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 10;
}

header#top .logo {
  background: url('/web/public/images/favicon.svg') no-repeat center !important;
  background-size: contain !important;
  width: 70px !important;
  height: 70px !important;
}

header#top nav#menu > ul > li > a {
  color: var(--cp-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px !important;
  font-weight: 600;
  transition: all 0.2s ease !important;
}

header#top nav#menu > ul > li > a:hover {
  color: var(--cp-gold-bright) !important;
  text-shadow: 0 0 8px rgba(201,168,76,0.5);
}

#content {
  position: relative;
  z-index: 1;
}

#slider, #stats {
  background: linear-gradient(180deg, var(--cp-panel) 0%, var(--cp-bg-2) 100%) !important;
  border: 1px solid rgba(201,168,76,0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

#slider h2, #stats h2, h1 {
  color: var(--cp-text) !important;
  font-family: 'Playfair Display', 'Sirin Stencil', serif !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 20px rgba(220,38,38,0.3);
}

section#content input[type=email],
section#content input[type=password],
section#content input[type=text],
section#content select {
  background: var(--cp-panel) !important;
  border: 1px solid var(--cp-border) !important;
  color: var(--cp-text) !important;
  border-radius: 4px !important;
}

section#content .button,
section#content input[type=submit],
.execbutton {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important;
  border: 1px solid #dc2626 !important;
  box-shadow: 0 4px 15px rgba(220,38,38,0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  color: #fff !important;
  font-family: 'Sirin Stencil', serif !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease !important;
}

section#content .button:hover,
section#content input[type=submit]:hover,
.execbutton:hover {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 6px 25px rgba(220,38,38,0.6), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-2px);
}

section#content .button:active,
section#content input[type=submit]:active,
.execbutton:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(220,38,38,0.4) !important;
}

footer {
  background: linear-gradient(180deg, rgba(13,15,18,0.98) 0%, rgba(10,11,14,0.99) 100%) !important;
  border-top: 1px solid var(--cp-border) !important;
  color: var(--cp-text-dim) !important;
}

footer a {
  color: var(--cp-text-dim) !important;
  transition: color 0.2s ease;
}

footer a:hover {
  color: var(--cp-gold) !important;
}

.online-txt p {
  color: var(--cp-text) !important;
}

.online-txt span.online {
  color: #22c55e !important;
  text-shadow: 0 0 8px rgba(34,197,94,0.5);
}

#social > a {
  filter: grayscale(1) brightness(0.8);
  transition: all 0.2s ease;
}

#social > a:hover {
  filter: grayscale(0) brightness(1);
}

.alert-warning {
  background: linear-gradient(90deg, rgba(220,38,38,0.15) 0%, rgba(185,28,28,0.1) 100%) !important;
  border: 1px solid var(--cp-red) !important;
  color: var(--cp-text) !important;
  box-shadow: 0 4px 20px rgba(220,38,38,0.2);
}

@media (max-width: 991px) {
  header#top nav#menu {
    background: var(--cp-panel) !important;
  }
}