:root{
  --bg: #0e0e11;
  --card-bg: rgba(24,24,28,0.88);
  --muted: #bfc3ca;
  --text: #f2f3f5;
  --accent: #9ad1ff; /* subtle, not neon */
  --btn: rgba(42,42,48,0.92);
  --btn-hover: rgba(58,58,66,0.95);
  --border: rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text) !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('/static/websitebackground.png') center/cover no-repeat fixed,
    var(--bg) !important;
}

/* Layout */
.container{ max-width: 760px; margin: 6vh auto; padding: 0 16px; }
.card, .panel, .box{
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
  padding: 22px !important;
  backdrop-filter: blur(6px);
}
.panel-heading, .card-header{
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Type */
h1,h2,h3{margin: 0 0 12px !important; color: var(--text) !important;}
p, label, span, small{color: var(--text) !important;}
p.muted, small.muted{color: var(--muted) !important}

/* Inputs */
input, select, textarea{
  width:100% !important;
  height:44px !important;
  border-radius:12px !important;
  border:1px solid var(--border) !important;
  background:#111318 !important;
  color:var(--text) !important;
  padding:10px 14px !important;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid #3a78ff33 !important;
  outline-offset:1px !important;
  box-shadow:none !important;
}

/* Buttons (override any primary/blue classes) */
button, .btn, .button, input[type=submit]{
  background: var(--btn) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius:12px !important;
  height:44px !important;
  padding:10px 16px !important;
  font-weight:700 !important;
  cursor:pointer !important;
}
button:hover, .btn:hover, .button:hover, input[type=submit]:hover{
  background: var(--btn-hover) !important;
}

/* Kill common blue themes */
.btn-primary, .is-primary, .uk-button-primary, .button-primary, .pure-button-primary,
.bg-primary, .text-primary, .uk-text-primary, .primary, .btn-info {
  background: var(--btn) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Links */
a{ color: var(--accent) !important; text-decoration: none !important;}
a:hover{ text-decoration: underline !important; }

/* Helpers */
.actions{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}
.center{display:flex; justify-content:center; align-items:center}
.alert{ background: #2a1f1f !important; border:1px solid #5a2c2c !important; color:#f8d7da !important; padding:10px 12px !important; border-radius:10px !important; margin:10px 0 !important }
.success{ background: #1f2a22 !important; border:1px solid #2c5a3f !important; color:#d1f7e1 !important; padding:10px 12px !important; border-radius:10px !important; margin:10px 0 !important }
/* === Extra overrides to kill leftover blue === */
.bg-primary, .panel-primary, .card-primary, .box-primary,
.uk-background-primary, .has-background-primary,
.is-primary, .button-primary, .btn-primary, .btn-info {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.text-primary, .uk-text-primary, .has-text-primary {
  color: var(--accent) !important;
}

.border-primary { border-color: var(--border) !important; }

/* Catch-all for any class that contains 'primary' (also capital P) */
*[class*="primary"], *[class*="Primary"] {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
/* --- Deep sweep for leftover blue components --- */
.navbar, .navbar-default, .navbar-inverse, .header, .hero,
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover,
.navbar-brand, .navbar-nav > li > a,
.badge-primary, .label-primary, .tag.is-primary,
.progress-bar, .uk-badge.uk-badge-primary,
.alert-info, .panel-info, .card-info,
fieldset, legend,
.card-header, .panel-heading {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.badge, .label, .tag {
  background: var(--btn) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.progress, .progress-bar {
  background: var(--btn) !important;
  box-shadow: none !important;
}

input::-webkit-input-placeholder,
input::placeholder,
textarea::placeholder { color: #8d93a0 !important; }

/* Links inside headers/navs */
.navbar a, .header a, .hero a { color: var(--accent) !important; }
/* === Final sweep: neutralize any inner blue panels inside cards === */
.card *:not(input):not(select):not(textarea):not(button) {
  background-color: transparent !important;
}

/* Common body containers sometimes hold the blue */
.card .card-body,
.card .panel-body,
.card .content,
.card .section,
.card .box,
.card .well,
.card .hero,
.card .header {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* If a page wrapper (not inside .card) still shows blue bars */
.container > .panel, .container > .box, .container > .hero, .container > .header {
  background-color: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
/* === Final sweep: neutralize any inner blue panels inside cards === */
.card *:not(input):not(select):not(textarea):not(button) {
  background-color: transparent !important;
}

/* Common body containers sometimes hold the blue */
.card .card-body,
.card .panel-body,
.card .content,
.card .section,
.card .box,
.card .well,
.card .hero,
.card .header {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* If a page wrapper (not inside .card) still shows blue bars */
.container > .panel, .container > .box, .container > .hero, .container > .header {
  background-color: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
/* === Last resort: wipe common inline/framework blues === */
/* Common Bootstrap/Tailwind blues + rgb forms */
*[style*="#0d6efd"], *[style*="rgb(13,110,253)"],
*[style*="#2563eb"], *[style*="#1d4ed8"], *[style*="#3b82f6"],
*[style*="#0d47a1"], *[style*="#1e40af"], *[style*="#1b63e7"] {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Any element that still carries a 'primary' bg inline */
*[style*="background-color: var(--bs-primary)"],
*[style*="background: var(--bs-primary)"],
*[style*="--bs-primary"] {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}