:root{
  --sg-navy:#0b2545; --sg-navy-2:#13315c; --sg-navy-3:#1b3a6b;
  --sg-green:#2e9e5b; --sg-green-d:#247a47;
  --sg-ink:#1f2a37; --sg-muted:#6b7280; --sg-line:#e5e8ee; --sg-bg:#f4f6fa;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--sg-ink)}

.sg-auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sg-navy) 0%,var(--sg-navy-2) 100%);padding:20px}
.sg-auth-wrap{width:100%;max-width:420px}
.sg-auth-card{background:#fff;border-radius:16px;padding:32px 28px;box-shadow:0 20px 50px rgba(5,20,45,.35)}
.sg-auth-brand{text-align:center;margin-bottom:22px}
.sg-logo{width:60px;height:60px;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;
  justify-content:center;font-size:30px;color:#fff;background:linear-gradient(135deg,var(--sg-navy-2),var(--sg-green))}
.sg-auth-brand h1{font-size:20px;font-weight:800;letter-spacing:.5px;color:var(--sg-navy);margin:0}
.sg-auth-brand h1 span{color:var(--sg-green)}
.sg-tagline{font-size:12.5px;color:var(--sg-muted);margin-top:6px}
.sg-btn-primary{background:var(--sg-navy-2);color:#fff;font-weight:600;border:none;padding:10px}
.sg-btn-primary:hover{background:var(--sg-navy)}

.sg-app{background:var(--sg-bg)}
.sg-shell{display:flex;min-height:100vh}
.sg-sidebar{width:248px;background:var(--sg-navy);color:#c9d6ea;flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;transition:margin-left .2s}
.sg-sidebar-head{display:flex;align-items:center;gap:10px;padding:18px 20px;font-weight:800;
  letter-spacing:.6px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.sg-sidebar-head i{color:var(--sg-green);font-size:20px}
.sg-nav{padding:10px 8px}
.sg-nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:9px;
  color:#aebcd4;text-decoration:none;font-size:14px;margin-bottom:2px}
.sg-nav-item i{font-size:16px;width:20px;text-align:center}
.sg-nav-item:hover{background:var(--sg-navy-3);color:#fff}
.sg-nav-item.active{background:linear-gradient(90deg,var(--sg-green-d),var(--sg-navy-3));color:#fff;font-weight:600}

.sg-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sg-topbar{height:62px;background:#fff;border-bottom:1px solid var(--sg-line);
  display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:20}
.sg-topbar-title{font-weight:700;color:var(--sg-navy)}
.sg-burger{border:none;background:transparent;font-size:22px;color:var(--sg-navy);display:none}
.sg-user-btn{background:var(--sg-bg);border:1px solid var(--sg-line);color:var(--sg-navy);font-size:14px}
.sg-content{padding:22px}

.sg-card{border:1px solid var(--sg-line);border-radius:12px;box-shadow:0 1px 2px rgba(16,30,54,.04)}
.sg-card .card-header{background:#fff;border-bottom:1px solid var(--sg-line);font-weight:600;color:var(--sg-navy)}
.sg-stat{background:#fff;border:1px solid var(--sg-line);border-radius:12px;padding:16px;
  display:flex;align-items:center;gap:14px;height:100%}
.sg-stat-icon{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:22px;color:#fff}
.sg-stat-val{font-size:26px;font-weight:800;line-height:1;color:var(--sg-navy)}
.sg-stat-label{font-size:12.5px;color:var(--sg-muted)}
.sg-c-navy .sg-stat-icon{background:var(--sg-navy-2)}
.sg-c-slate .sg-stat-icon{background:#64748b}
.sg-c-green .sg-stat-icon{background:var(--sg-green)}
.sg-c-red .sg-stat-icon{background:#d9534f}

.sg-table th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--sg-muted)}
.sg-badge{background:var(--sg-navy-3);color:#fff;font-weight:500}
.sg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.sg-dot.ok{background:var(--sg-green)} .sg-dot.warn{background:#e0a800}

@media(max-width:991px){
  .sg-sidebar{position:fixed;z-index:40;margin-left:-248px;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .sg-sidebar.open{margin-left:0}
  .sg-burger{display:block}
}