:root {
    --sidebar-width: 260px; --navy-dark:#0f1b2d; --navy:#142943; --navy-light:#1c3a5e;
    --gold:#d4a017; --gold-light:#f0c14b; --gray-bg:#f4f6f9; --text-muted:#8a99ac;
    --danger:#e5484d; --success:#2e9e5b;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Segoe UI',Roboto,-apple-system,sans-serif; background:var(--gray-bg); color:#1f2937; }
.app-wrapper { display:flex; min-height:100vh; }
.app-sidebar {
    width:var(--sidebar-width); background:linear-gradient(180deg,var(--navy-dark) 0%,var(--navy) 100%);
    color:#cfd8e3; display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0;
    z-index:1000; transition:transform .25s ease;
}
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-brand img { height:34px; width:auto; }
.brand-text { font-weight:700; font-size:15px; color:#fff; line-height:1.2; }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 0; }
.nav-group-label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:14px 20px 6px; }
.sidebar-nav .nav-link { display:flex; align-items:center; gap:12px; padding:10px 20px; color:#cfd8e3; font-size:14px; border-left:3px solid transparent; text-decoration:none; }
.sidebar-nav .nav-link i { font-size:16px; width:18px; text-align:center; }
.sidebar-nav .nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav .nav-link.active { background:rgba(212,160,23,.15); border-left-color:var(--gold); color:var(--gold-light); font-weight:600; }
.sidebar-footer { padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); }
.user-mini { display:flex; align-items:center; gap:10px; }
.avatar { width:38px; height:38px; border-radius:50%; background:var(--gold); color:#1f2937; font-weight:700; display:flex; align-items:center; justify-content:center; }
.user-mini-name { font-size:13px; font-weight:600; color:#fff; }
.user-mini-role { font-size:11px; color:var(--text-muted); }
.app-main { margin-left:var(--sidebar-width); flex:1; display:flex; flex-direction:column; min-width:0; }
.app-topbar { height:62px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid #e5e9f0; position:sticky; top:0; z-index:900; }
.topbar-datetime { font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.topbar-actions { display:flex; align-items:center; gap:16px; }
.topbar-icon-btn { background:none; border:none; font-size:19px; color:#52606d; position:relative; cursor:pointer; text-decoration:none; }
.notif-badge { position:absolute; top:-6px; right:-8px; background:var(--danger); color:#fff; font-size:10px; border-radius:10px; padding:1px 5px; font-weight:700; }
.notif-dropdown { width:320px; padding:0; }
.notif-header { padding:12px 16px; font-weight:700; border-bottom:1px solid #eee; }
.notif-list { max-height:320px; overflow-y:auto; }
.notif-viewall { display:block; text-align:center; padding:10px; font-size:13px; border-top:1px solid #eee; }
.topbar-user { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.avatar-sm { width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.app-content { padding:24px; flex:1; }
.stat-card { background:#fff; border-radius:10px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,.06); border-left:4px solid var(--gold); }
.stat-card h3 { font-size:26px; margin:4px 0; font-weight:700; }
.stat-card .label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.stage-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:700; text-transform:uppercase; }
.stage-badge.success { background:#e6f6ec; color:var(--success); }
.stage-badge.danger { background:#fdeaea; color:var(--danger); }
.stage-badge.warning { background:#fff6e0; color:#a3730a; }
.stage-badge.info { background:#e7f0fb; color:#2563eb; }
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:''; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background:#e2e8f0; }
.timeline-item { position:relative; padding-bottom:20px; }
.timeline-item::before { content:''; position:absolute; left:-28px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--gold); border:3px solid #fff; box-shadow:0 0 0 2px #e2e8f0; }
.login-wrapper { min-height:100vh; display:flex; }
.login-brand-panel { flex:1; background:linear-gradient(135deg,var(--navy-dark),var(--navy-light)); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:60px; position:relative; overflow:hidden; }
.login-brand-panel::after { content:''; position:absolute; width:500px; height:500px; background:radial-gradient(circle,rgba(212,160,23,.25),transparent 70%); top:-100px; right:-150px; }
.login-form-panel { flex:1; display:flex; align-items:center; justify-content:center; background:#fff; padding:40px; }
.login-form-box { width:100%; max-width:380px; }
@media (max-width:900px) { .login-brand-panel { display:none; } }
@media (max-width:992px) { .app-sidebar { transform:translateX(-100%); } .app-sidebar.show { transform:translateX(0); } .app-main { margin-left:0; } }