:root{
  --bg1:#f6f8ff;
  --bg2:#ffffff;
  --card:#ffffffcc;
  --line:#1b2a4a1a;
  --text:#101828;
  --muted:#475467;
  --grad: linear-gradient(135deg, #5b8cff, #8b5cff, #16c79a);
}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.app-bg{
  background: radial-gradient(1200px 600px at 20% 10%, #2a4bff1a, transparent 55%),
              radial-gradient(900px 500px at 80% 20%, #9b2aff14, transparent 55%),
              radial-gradient(900px 500px at 50% 90%, #00ffc312, transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--text);
  min-height: 100vh;
}
.app-shell{display:flex; min-height:100vh;}
.app-sidebar{
  width: 280px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(16,24,40,.08);
  padding: 14px 10px;
  position: sticky; top:0; height:100vh;
}
.brand{display:flex; gap:10px; padding:10px; border:1px solid var(--line); border-radius:18px; background: rgba(255,255,255,.70);}
.brand-logo{width:48px;height:48px;border-radius:14px; overflow:hidden; display:grid; place-items:center; background: #eef2ff;}
.brand-logo img{width:100%; height:100%; object-fit:cover;}
.logo-placeholder{color:#2d5bff; font-size:18px}
.brand-name{font-weight:800; letter-spacing:.3px; line-height:1.1}
.brand-sub{color:var(--muted); font-size:12px}
.nav-link{color:#344054; border-radius:14px; padding:10px 12px; margin:4px 6px; border:1px solid transparent;}
.nav-link:hover{background:#eef2ff; border-color:var(--line); color:#101828}
.nav-link.active{background:#e6edff; border-color:var(--line); color:#101828}
.nav-title{margin:12px 14px 6px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em;}
.app-main{flex:1; display:flex; flex-direction:column;}
.app-topbar{
  position: sticky; top:0; z-index:20;
  background: rgba(255,255,255,.70); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.top-title{font-weight:700}
.app-content{padding:18px; flex:1;}
.card-glass{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16,24,40,.10);
}
.btn-gradient{
  background: var(--grad);
  border: none;
  color: white;
  font-weight: 700;
  border-radius: 14px;
  padding: 10px 14px;
}
.btn-gradient:hover{filter: brightness(1.03);}
.form-control, .form-select{
  background:#ffffff;
  border:1px solid #d0d5dd;
  color:var(--text);
  border-radius:14px;
}
.form-control::placeholder{color:#98a2b3;}
.table{color:var(--text);}
.table thead th{color:#344054; border-bottom-color: var(--line); background: rgba(255,255,255,.6);}
.table td, .table th{border-color: var(--line);}
.badge-soft{background:#1018280a; border:1px solid var(--line); color: var(--text);}
.pill{border-radius:999px; padding:.35rem .6rem;}
.shadow-soft{box-shadow: 0 10px 25px rgba(16,24,40,.10);}
.video-box{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#ffffff;
}
.hint{color:var(--muted); font-size:13px;}
@media (max-width: 992px){
  .app-sidebar{position: fixed; left:-290px; top:0; transition:.2s; z-index:30;}
  body.sidebar-open .app-sidebar{left:0;}
}