:root{
  --bg1:#0b1020;
  --bg2:#0f1a3a;
  --glass: rgba(255,255,255,.10);
  --glass2: rgba(255,255,255,.14);
  --stroke: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);

  --p:#7c3aed;      /* purple */
  --b:#06b6d4;      /* cyan */
  --g:#22c55e;      /* green */
  --y:#f59e0b;      /* amber */
  --r:#ef4444;      /* red */
}

html,body{height:100%}
body{
  color: var(--text);
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(800px 520px at 90% 20%, rgba(6,182,212,.28), transparent 60%),
    radial-gradient(900px 600px at 60% 90%, rgba(34,197,94,.20), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
}

/* layout */
.app-wrap{min-height:100vh; display:flex;}
.sidebar{
  width:260px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
.main{
  flex:1;
  padding:18px;
}

/* topbar */
.topbar{
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:14px 16px;
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}

.glass{
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  border-radius:20px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}

.card.glass{ overflow:hidden; }

.badge-soft{
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: var(--text);
}

.btn{
  border-radius:14px!important;
  border: 1px solid rgba(255,255,255,.18)!important;
}
.btn-light{
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.70))!important;
  color:#0b1020!important;
  font-weight:700;
}
.btn-outline-light{
  background: rgba(255,255,255,.05)!important;
}

.table{
  border-radius:16px;
  overflow:hidden;
}
.table-dark{
  --bs-table-bg: rgba(0,0,0,.20);
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  --bs-table-border-color: rgba(255,255,255,.08);
}

.form-control, .form-select{
  border-radius:14px!important;
  background: rgba(255,255,255,.08)!important;
  border: 1px solid rgba(255,255,255,.16)!important;
  color: var(--text)!important;
}
.form-control::placeholder{ color: rgba(255,255,255,.55)!important; }

a{ color: rgba(255,255,255,.92); }
a:hover{ color: white; }

/* sidebar items */
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  color: var(--text);
  text-decoration:none;
  transition: .2s ease;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.nav-item:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
.nav-item.active{ background: rgba(124,58,237,.22); border-color: rgba(124,58,237,.35); }

/* subtle animations */
.floaty{ animation: floaty 4s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.fade-in{ animation: fadeIn .35s ease both; }
@keyframes fadeIn{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }