:root{
  --bg: #0b1220;
  --bg2: #070b14;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --accent: rgba(110,168,254,.18);
  --accentBorder: rgba(110,168,254,.32);
}

html[data-theme="light"]{
  --bg: #f6f7fb;
  --bg2: #eef1f7;
  --card: rgba(0,0,0,.03);
  --border: rgba(0,0,0,.10);
  --text: rgba(0,0,0,.90);
  --muted: rgba(0,0,0,.60);
  --accent: rgba(13,110,253,.12);
  --accentBorder: rgba(13,110,253,.28);
}

body{
  background: radial-gradient(900px 600px at 20% 10%, rgba(110,168,254,.18), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(45,212,191,.14), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2) 70%);
  color: var(--text);
  min-height: 100vh;
}

html[data-theme="light"] body{
  background: radial-gradient(900px 600px at 20% 10%, rgba(13,110,253,.12), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(25,135,84,.10), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2) 70%);
}

.glass{
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  border-radius: 18px;
}

.sidebar{
  overflow: auto;
  border-radius: 18px;
}

/* Sticky sidebar only on large screens for best mobile UX */
@media (min-width: 992px){
  .sidebar{
    position: sticky;
    top: 18px;
    height: calc(100vh - 36px);
  }
}

.brand-badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.55rem .75rem;
  border-radius: 14px;
  background: rgba(110,168,254,.12);
  border: 1px solid rgba(110,168,254,.25);
  box-shadow: 0 0 0 6px rgba(110,168,254,.06);
}

html[data-theme="light"] .brand-badge{
  background: rgba(13,110,253,.10);
  border: 1px solid rgba(13,110,253,.22);
  box-shadow: 0 0 0 6px rgba(13,110,253,.05);
}

.nav-pills .nav-link{
  border-radius: 14px;
  color: var(--muted);
  border: 1px solid transparent;
  text-align: left;
}
.nav-pills .nav-link.active{
  background: var(--accent);
  border-color: var(--accentBorder);
  color: var(--text);
  box-shadow: 0 0 0 6px rgba(110,168,254,.06);
}

.form-control, .form-select{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 14px;
}
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select{
  background: rgba(0,0,0,.03) !important;
}

.form-control::placeholder{ color: rgba(127,127,127,.65); }

.btn{ border-radius: 14px; }
.btn-soft{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--text);
}
html[data-theme="light"] .btn-soft{ background: rgba(0,0,0,.03); }
.btn-soft:hover{ filter: brightness(1.05); }

.stat{
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
}
html[data-theme="light"] .stat{ background: rgba(0,0,0,.02); }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.small-muted{ color: var(--muted); font-size: .92rem; }
.divider{ height:1px; background: var(--border); margin: 14px 0; }
.toast-container{ z-index: 9999; }

.table td, .table th{ color: var(--text); border-color: var(--border); }
.table{ --bs-table-bg: transparent; }