:root{
  /* BigBlueButton-inspired blue (brighter, cleaner dark-blue UI) */
  --bg0:#071426;
  --bg1:#0A1E35;

  --card: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.14);

  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);

  --blue:#1BA9FF;
  --blue2:#5BD3FF;
  --blueGlow: rgba(27,169,255,.28);
}

* { font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; }

body{
  background:
    radial-gradient(900px 540px at 15% 5%, rgba(27,169,255,.30), transparent 55%),
    radial-gradient(900px 540px at 85% 10%, rgba(91,211,255,.18), transparent 55%),
    radial-gradient(900px 540px at 50% 110%, rgba(56,189,248,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

a { text-decoration: none; }
.text-muted-soft { color: var(--muted) !important; }

/* Topbar */
.topbar{
  background: rgba(4, 12, 24, .55);
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
}

.brand-mark{
  width: 34px; height: 34px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius: 12px;
  background: rgba(27,169,255,.14);
  border: 1px solid rgba(91,211,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.20), 0 0 0 6px rgba(27,169,255,.06);
  color: #EAF7FF;
}

/* Glass cards */
.glass{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  box-shadow:
    0 18px 46px rgba(0,0,0,.26),
    0 0 0 1px rgba(27,169,255,.05) inset;
}

.badge-soft{
  background: rgba(27,169,255,.12);
  border: 1px solid rgba(91,211,255,.22);
  color: rgba(255,255,255,.92);
}

/* Landing hero */
.hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--stroke);
}
.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(120deg, rgba(27,169,255,.28), rgba(91,211,255,.12), rgba(2,132,199,.10)),
    url("/assets/img/hero-bbb.svg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.04);
  opacity: .34;
}
.hero .container{ position: relative; z-index: 2; }

/* Sidebar */
.sidebar{ position: sticky; top: 84px; }

.nav-pills .nav-link{
  color: rgba(255,255,255,.82);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 10px 12px;
}
.nav-pills .nav-link:hover{
  background: rgba(27,169,255,.08);
  border-color: rgba(91,211,255,.14);
}
.nav-pills .nav-link.active{
  background: rgba(27,169,255,.14);
  border-color: rgba(91,211,255,.22);
  box-shadow: 0 0 0 6px rgba(27,169,255,.06);
}

/* KPI cards */
.kpi{
  border: 1px solid rgba(91,211,255,.18);
  border-radius: 20px;
  padding: 14px 16px;
  background: rgba(255,255,255,.07);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.kpi .label{ color: rgba(255,255,255,.72); font-size: 12px; }
.kpi .value{ font-size: 24px; font-weight: 800; letter-spacing: .2px; }

/* Tables */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  color: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(91,211,255,.16) !important;
}
.table td, .table th{
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92);
}
.table tbody tr:hover{
  background: rgba(27,169,255,.06);
}

/* Forms */
.form-control, .form-select, .input-group-text{
  background: rgba(3, 10, 20, .35) !important;
  border: 1px solid rgba(91,211,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}
.form-control::placeholder{ color: rgba(255,255,255,.52); }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(27,169,255,.18) !important;
  border-color: rgba(27,169,255,.45) !important;
}

/* Buttons */
.btn-light{
  background: linear-gradient(180deg, #E9F7FF, #CFEFFF) !important;
  border: 1px solid rgba(27,169,255,.25) !important;
  color: #042033 !important;
}
.btn-light:hover{
  filter: brightness(1.02);
}
.btn-outline-light{
  border-color: rgba(91,211,255,.28) !important;
}
.btn-outline-light:hover{
  background: rgba(27,169,255,.10) !important;
  border-color: rgba(91,211,255,.40) !important;
}

/* Alerts (glass) */
.alert{
  border-radius: 18px;
}

/* Footer */
.footer{
  border-top: 1px solid rgba(91,211,255,.14);
}