:root{
  --sidebar-w: 260px;
  --brand:#6f42c1;
  --brand2:#20c997;
  --bg:#f6f7fb;
}
body{ background:var(--bg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.sidebar{
  width:var(--sidebar-w); min-height:100vh; position:fixed; left:0; top:0;
  background: linear-gradient(160deg, var(--brand) 0%, #0dcaf0 55%, var(--brand2) 100%);
  color:#fff;
}
.sidebar .logo{ font-weight:800; letter-spacing:.4px; }
.sidebar a{ color:rgba(255,255,255,.92); text-decoration:none; }
.sidebar .nav-link{ border-radius:14px; margin:6px 0; padding:10px 14px; }
.sidebar .nav-link:hover{ background:rgba(255,255,255,.12); }
.sidebar .nav-link.active{ background:rgba(255,255,255,.20); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.content{ margin-left:var(--sidebar-w); padding:24px; }
.topbar{
  position:sticky; top:0; z-index:10;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.card-soft{ border:0; border-radius:22px; box-shadow: 0 16px 35px rgba(0,0,0,.06); }
.stat{ overflow:hidden; position:relative; }
.stat::after{
  content:"";
  position:absolute; inset:-40px -60px auto auto;
  width:160px; height:160px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.50), rgba(255,255,255,.0) 60%);
  transform: rotate(18deg);
}
.badge-soft{ background: rgba(13,110,253,.10); color:#0d6efd; border-radius:999px; }
.table thead th{ border-bottom:0; color:#6c757d; font-weight:700; }
.table td{ vertical-align:middle; }
.btn{ border-radius:12px; }
.form-control, .form-select{ border-radius:14px; }
.dropzone-like{
  border:2px dashed rgba(0,0,0,.15);
  border-radius:18px;
  padding:14px;
  background:#fff;
}
.thumb{ width:54px; height:54px; object-fit:cover; border-radius:14px; border:1px solid rgba(0,0,0,.08); }

.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 15% 10%, rgba(111,66,193,.25), transparent 45%),
              radial-gradient(circle at 85% 20%, rgba(13,202,240,.18), transparent 40%),
              radial-gradient(circle at 50% 85%, rgba(32,201,151,.20), transparent 45%),
              var(--bg);
}
.login-card{
  max-width:980px;
  width:100%;
  border:0;
  border-radius:26px;
  overflow:hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.12);
}
.login-side{ color:#fff; background: linear-gradient(145deg, var(--brand), #0dcaf0, var(--brand2)); }
.pulse-dot{
  width:10px; height:10px; border-radius:999px; background:#20c997;
  box-shadow: 0 0 0 rgba(32,201,151,.55);
  animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(32,201,151,.55); }
  70%{ box-shadow: 0 0 0 14px rgba(32,201,151,0); }
  100%{ box-shadow: 0 0 0 0 rgba(32,201,151,0); }
}
@media (max-width: 992px){
  .sidebar{ position:static; width:100%; min-height:auto; border-radius:0 0 18px 18px; }
  .content{ margin-left:0; }
}