:root{
  --ff-bg: #0B1020;
  --ff-surface: #121A33;
  --ff-border: #2B3A7A;

  --ff-text: #EAF0FF;
  --ff-muted: #A9B4D0;

  --ff-primary: #7C3AED;
  --ff-secondary: #06B6D4;
  --ff-accent: #A3E635;
  --ff-warn: #F59E0B;
  --ff-danger: #FB7185;
}

body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(6,182,212,.20), transparent 55%),
              var(--ff-bg);
  color: var(--ff-text);
}

.navbar.bg-dark{ background-color: rgba(11,16,32,.90) !important; border-bottom: 1px solid rgba(43,58,122,.6); }
.card{ background: rgba(18,26,51,.92); border: 1px solid rgba(43,58,122,.7); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.text-muted{ color: var(--ff-muted) !important; }

.btn-primary{ background-color: var(--ff-primary); border-color: var(--ff-primary); }
.btn-success{ background-color: var(--ff-accent); border-color: var(--ff-accent); color: #09110a; }
.btn-outline-light{ border-color: rgba(234,240,255,.35); }

a{ color: var(--ff-secondary); }
a:hover{ color: #67E8F9; }

.form-control, .form-select{
  background-color: rgba(11,16,32,.55);
  border: 1px solid rgba(43,58,122,.75);
  color: var(--ff-text);
}
.form-control:focus, .form-select:focus{
  border-color: var(--ff-secondary);
  box-shadow: 0 0 0 .2rem rgba(6,182,212,.25);
}