:root{
  --stsa-ink:#3b0270;
  --stsa-violet:#6f00ff;
  --stsa-lilac:#e9b3fb;
  --stsa-white:#fff1f1;

  --stsa-bg0:#0b0614;
  --stsa-bg1:#14072a;
  --stsa-card:rgba(20,7,42,0.72);
  --stsa-border:rgba(233,179,251,0.18);
  --stsa-muted:rgba(255,241,241,0.72);
}

body{
  color:var(--stsa-white);
  background:
    radial-gradient(circle at 20% 10%, rgba(111,0,255,0.35), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(233,179,251,0.18), transparent 50%),
    linear-gradient(135deg, var(--stsa-bg0) 0%, var(--stsa-bg1) 55%, var(--stsa-ink) 140%);
}

a{ color:var(--stsa-lilac); }
a:hover{ color:var(--stsa-white); }

.navbar{
  background: rgba(11,6,20,0.6) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stsa-border) !important;
}

.card, .border, .alert{
  border-color: var(--stsa-border) !important;
}

.stsa-card{
  background: var(--stsa-card);
  border: 1px solid var(--stsa-border);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}

.btn-stsa{
  color: var(--stsa-white) !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--stsa-violet), var(--stsa-ink));
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(111,0,255,0.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-stsa:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 38px rgba(111,0,255,0.28);
}
.btn-stsa:active{
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 10px 24px rgba(111,0,255,0.20);
}
.btn-stsa:focus{
  box-shadow: 0 0 0 .25rem rgba(233,179,251,.22) !important;
}

.btn-stsa-outline{
  color: var(--stsa-white) !important;
  background: transparent !important;
  border: 1px solid rgba(233,179,251,0.4) !important;
  border-radius: 14px;
  transition: background .15s ease, transform .15s ease;
}
.btn-stsa-outline:hover{
  background: rgba(111,0,255,0.18) !important;
  transform: translateY(-1px);
}

.form-control, .form-select, textarea{
  color: var(--stsa-white) !important;
  background: rgba(20,7,42,0.65) !important;
  border: 1px solid rgba(233,179,251,0.22) !important;
  border-radius: 14px !important;
}
.form-control::placeholder, textarea::placeholder{
  color: rgba(255,241,241,0.45) !important;
}
.form-control:focus, textarea:focus, .form-select:focus{
  border-color: rgba(111,0,255,0.7) !important;
  box-shadow: 0 0 0 .25rem rgba(111,0,255,.22) !important;
}

.table{
  color: var(--stsa-white) !important;
}
.table thead{
  color: rgba(255,241,241,0.75);
}
.table tbody tr:hover{
  background: rgba(111,0,255,0.08);
}

.badge.bg-primary{ background: rgba(111,0,255,0.9) !important; }