: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);
  
  /* Keep original variables for backward compatibility */
  --c-white: var(--stsa-white);
  --c-soft-pink: var(--stsa-lilac);
  --c-primary: var(--stsa-violet);
  --c-deep-purple: var(--stsa-ink);
  --c-ink: #0b0614;
  --c-ink-2: #14072a;
  --c-border: var(--stsa-border);
  --c-text: var(--stsa-white);
  --c-muted: var(--stsa-muted);
  --radius-card: 18px;
  --radius-control: 14px;
  --shadow-soft: 0 14px 40px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 0 1px rgba(233,179,251,0.10), 0 10px 30px rgba(111,0,255,0.18);
}

/* Background */
body.app-bg{
  min-height: 100vh;
  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%);
}

/* Bootstrap overrides */
a{ color:var(--stsa-lilac); }
a:hover{ color:var(--stsa-white); }

.text-muted{ color: var(--c-muted) !important; }
.border{ border-color: var(--c-border) !important; }
.navbar{
  background: rgba(11,6,20,0.6) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stsa-border) !important;
}
.navbar-brand, .nav-link{ color: var(--c-text) !important; }
.nav-link:hover{ color: var(--c-soft-pink) !important; }
.bg-white{ background: rgba(11,6,20,0.6) !important; backdrop-filter: blur(10px); }

/* Cards */
.stsa-card, .card, .card-soft, .hero, .rounded-4, .rounded-3{
  border-radius: var(--radius-card) !important;
}
.stsa-card, .card, .hero, .glass-card{
  background: var(--stsa-card) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

/* Buttons */
.btn{
  border-radius: var(--radius-control) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background 160ms ease;
}
.btn-stsa{
  color: var(--stsa-white) !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--stsa-violet), var(--stsa-ink)) !important;
  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(--c-text) !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);
}

/* Keep backward compatibility */
.btn-dark{
  color: var(--stsa-white) !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--stsa-violet), var(--stsa-ink)) !important;
  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-dark:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 38px rgba(111,0,255,0.28);
}
.btn-dark:active{
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 10px 24px rgba(111,0,255,0.20);
}
.btn-dark:focus{
  box-shadow: 0 0 0 .25rem rgba(233,179,251,.22) !important;
}
.btn-outline-dark{
  color: var(--c-text) !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-outline-dark:hover{
  background: rgba(111,0,255,0.18) !important;
  transform: translateY(-1px);
}

/* Inputs */
.form-control, .form-select, textarea{
  border-radius: var(--radius-control) !important;
  color: var(--c-text) !important;
  background: rgba(20,7,42,0.65) !important;
  border: 1px solid rgba(233,179,251,0.22) !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 0.25rem rgba(111,0,255,0.22) !important;
}

/* Tables */
.table{
  color: var(--c-text) !important;
}
.table thead th{
  color: rgba(255,241,241,0.75) !important;
}
.table tbody tr:hover{
  background: rgba(111,0,255,0.08) !important;
}

/* Badges */
.badge.bg-primary{ background: rgba(111,0,255,0.9) !important; }
.badge.bg-secondary{ background: rgba(233,179,251,0.18) !important; color: var(--c-text) !important; }

/* Alerts (keep readable) */
.alert{
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--c-border) !important;
  background: rgba(20,7,42,0.65) !important;
  color: var(--c-text) !important;
}
.alert-danger{ border-color: rgba(255,90,90,0.35) !important; }
.alert-success{ border-color: rgba(60,220,140,0.35) !important; }
.alert-info{ border-color: rgba(13,202,240,0.35) !important; }
.alert-warning{ border-color: rgba(255,193,7,0.35) !important; }

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

/* Utility Classes */
.text-gradient {
  background: linear-gradient(135deg, var(--stsa-violet), var(--stsa-lilac));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}

.max-w-700 {
  max-width: 700px;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--stsa-violet), var(--stsa-ink));
}

/* Animation delays */
.animate__delay-1s { animation-delay: 1s; }
.animate__delay-2s { animation-delay: 2s; }
.animate__delay-3s { animation-delay: 3s; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .display-5 {
    font-size: 2rem;
  }
  
  .fs-1 {
    font-size: 2rem;
  }
  
  .icon-circle {
    width: 60px;
    height: 60px;
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
}
.alert-info{ border-color: rgba(13,202,240,0.35) !important; }
.alert-warning{ border-color: rgba(255,193,7,0.35) !important; }

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

/* Utility Classes */
.text-gradient {
  background: linear-gradient(135deg, var(--stsa-violet), var(--stsa-lilac));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}

.max-w-700 {
  max-width: 700px;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--stsa-violet), var(--stsa-ink));
}

/* Animation delays */
.animate__delay-1s { animation-delay: 1s; }
.animate__delay-2s { animation-delay: 2s; }
.animate__delay-3s { animation-delay: 3s; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .display-5 {
    font-size: 2rem;
  }
  
  .fs-1 {
    font-size: 2rem;
  }
  
  .icon-circle {
    width: 60px;
    height: 60px;
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
}