:root{
  --bg1:#0b1020;
  --bg2:#1a1240;
  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.14);
  --txt: rgba(255,255,255,.95);
  --muted: rgba(255,255,255,.65);
}

body{
  min-height:100vh;
  margin:0;
  color:var(--txt);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(120,78,255,.35), transparent 60%),
    radial-gradient(1200px 700px at 85% 15%, rgba(0,240,255,.22), transparent 60%),
    radial-gradient(1200px 700px at 55% 90%, rgba(255,80,180,.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.glass{
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
}

.app-shell{
  display:grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  height:100vh;
  gap: 14px;
  padding: 14px;
}

.topbar{ grid-area: topbar; padding: 10px 12px; display:flex; justify-content:space-between; align-items:center; }
.sidebar{ grid-area: sidebar; padding: 12px; overflow:auto; }
.main{ grid-area: main; overflow:auto; border-radius: 18px; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand-dot{ width:14px; height:14px; border-radius:50%;
  background: linear-gradient(135deg, #8b5cf6, #22d3ee);
  box-shadow: 0 0 24px rgba(34,211,238,.35);
}
.brand-title{ font-weight: 800; letter-spacing:.2px; line-height:1.1; }
.brand-sub{ font-size:12px; color: var(--muted); }

.sidebar .nav-link{
  text-align:left;
  color: rgba(255,255,255,.85);
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid transparent;
}
.sidebar .nav-link:hover{
  background: var(--glass2);
  border-color: var(--stroke);
}
.sidebar .nav-link.active{
  background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(34,211,238,.25));
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

.sidebar-footer{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.stat .display-6{ font-weight: 800; }
.mini{ border-radius: 16px; border: 1px solid rgba(255,255,255,.12); }

.table{ border-color: rgba(255,255,255,.08) !important; }
.table-dark{
  --bs-table-bg: rgba(0,0,0,.18);
  --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;
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(34,211,238,.18);
  border-color: rgba(34,211,238,.35);
}
.btn{ border-radius: 14px; }
.btn-primary{
  border: 0;
  background: linear-gradient(135deg, #8b5cf6, #22d3ee);
}

.view[hidden]{ display:none !important; }

/* Mobile */
@media (max-width: 991.98px){
  .app-shell{
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .sidebar{
    position: fixed;
    left: 14px;
    top: 78px;
    bottom: 14px;
    width: 280px;
    transform: translateX(-110%);
    transition: transform .18s ease;
    z-index: 999;
  }
  .sidebar.open{ transform: translateX(0); }
}