:root{
  --sb-w: 250px;
  --brand: #1769d6;
  --brand-d: #0f4fa3;
  --bg: #f4f6fa;
}
*{box-sizing:border-box}
body{background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sb-w);background:linear-gradient(180deg,var(--brand),var(--brand-d));
  color:#fff;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;z-index:1030;
  transition:transform .2s;
}
.sidebar .brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1rem;font-weight:700;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.15)}
.sidebar .brand img{height:34px;border-radius:6px;background:#fff;padding:2px}
.sidebar .nav-link{color:rgba(255,255,255,.85);padding:.6rem 1rem;border-left:3px solid transparent;display:flex;align-items:center;gap:.6rem}
.sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar .nav-link.active{background:rgba(255,255,255,.15);color:#fff;border-left-color:#fff;font-weight:600}
.sidebar .nav-sep{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6;padding:.9rem 1rem .3rem}
.main{flex:1;margin-left:var(--sb-w);display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid #e3e7ee;padding:.6rem 1.2rem;display:flex;align-items:center;gap:.8rem;position:sticky;top:0;z-index:1020}
.content{padding:1.5rem 1.2rem;flex:1}
.card-stat{border:none;border-radius:14px;box-shadow:0 2px 10px rgba(20,40,80,.06)}
.card-stat .num{font-size:1.9rem;font-weight:700}
.card-stat .ico{font-size:1.6rem;opacity:.35}
@media (max-width:767.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:translateX(0)}
  .main{margin-left:0}
}
.badge-canal{font-size:.72rem}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand),var(--brand-d))}
.login-card{width:100%;max-width:380px;border:none;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.qr-box{max-width:280px}