:root{
  --fg-red:#E11B22; --fg-red-dark:#B4141A; --fg-black:#111214; --fg-ink:#1c1d20;
  --fg-line:#e6e6e8; --fg-muted:#6b6f76; --fg-bg:#f6f7f9;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fg-bg);color:var(--fg-ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
a{text-decoration:none}
.app-header{position:sticky;top:0;z-index:1030;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--fg-line);}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg-black)}
.brand-divider{width:1px;height:22px;background:var(--fg-line);display:inline-block}
.brand-title{font-weight:700;letter-spacing:.2px;font-size:15px;color:var(--fg-black)}
.app-body{display:flex;min-height:calc(100vh - 110px)}
.app-sidebar{width:238px;flex:0 0 238px;background:#fff;border-right:1px solid var(--fg-line);
  padding:14px 10px;flex-direction:column;justify-content:space-between;position:sticky;top:53px;height:calc(100vh - 53px)}
.nav-link{display:flex;align-items:center;gap:10px;color:var(--fg-ink);border-radius:8px;padding:9px 12px;font-size:14.5px;font-weight:500}
.nav-link:hover{background:#f2f3f5;color:var(--fg-black)}
.nav-link.active{background:var(--fg-red);color:#fff}
.nav-link.active i{color:#fff}
.nav-link i{color:var(--fg-red);font-size:16px}
.sidebar-foot{padding:10px 12px;border-top:1px solid var(--fg-line)}
.app-main{flex:1;padding:22px;min-width:0}
.page-title{font-size:21px;font-weight:700;color:var(--fg-black);margin:0 0 18px}
.card{border:1px solid var(--fg-line);border-radius:12px;box-shadow:0 1px 2px rgba(17,18,20,.04)}
.stat-value{font-size:26px;font-weight:700;color:var(--fg-black)}
.stat-label{font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--fg-muted)}
.accent-bar{height:3px;background:var(--fg-red);border-radius:3px;width:34px;margin-bottom:10px}
.app-footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 18px;
  background:#fff;border-top:1px solid var(--fg-line);font-size:13px}
.btn-brand{background:var(--fg-red);border-color:var(--fg-red);color:#fff;font-weight:600}
.btn-brand:hover{background:var(--fg-red-dark);border-color:var(--fg-red-dark);color:#fff}
/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(180deg,#fff 0%, #f2f3f5 100%)}
.login-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--fg-line);border-radius:14px;
  padding:30px 28px;box-shadow:0 8px 30px rgba(17,18,20,.08)}
.login-card .logo{display:block;margin:0 auto 14px;height:56px;width:auto}
.login-title{text-align:center;font-weight:700;color:var(--fg-black);font-size:19px;margin-bottom:2px}
.login-sub{text-align:center;color:var(--fg-muted);font-size:13.5px;margin-bottom:20px}
.form-control:focus{border-color:var(--fg-red);box-shadow:0 0 0 .18rem rgba(225,27,34,.15)}
@media (max-width:991.98px){ .app-main{padding:16px} }