:root{--green:#1769d2;--green-light:#eaf2ff;--border:#e6e9ed;--page:#f7f8fa;--text:#202a35}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;color:var(--text);font-size:14px}
.login-page{background:#f3f7fc}
.login-card{width:100%;max-width:360px;background:#fff;padding:28px;border:1px solid var(--border);border-radius:12px}
.brand-mark{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#fff;font-weight:700;border-radius:9px}
.form-control{font-size:14px;padding:10px 12px}
.btn-primary{background:var(--green);border-color:var(--green)}
.btn-primary:hover,.btn-primary:focus{background:#1255ad;border-color:#1255ad}
.app-page{background:var(--page);min-height:100vh}
.app-shell{min-height:100vh}
.sidebar{width:225px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--border);padding:18px 12px;display:flex;flex-direction:column;z-index:1040}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);padding:0 5px 25px}
.brand strong{display:block;font-size:15px}
.brand small{display:block;font-size:11px;color:#7b8490}
.nav-caption{font-size:10px;letter-spacing:1px;color:#89919b;padding:0 10px 8px;font-weight:bold}
.sidebar .nav{gap:3px}
.sidebar .nav-link{color:#5e6874;padding:10px;border-radius:7px;display:flex;gap:10px;align-items:center;font-size:13px}
.sidebar .nav-link:hover{background:#f5f7f5;color:var(--green)}
.sidebar .nav-link.active{background:var(--green-light);color:var(--green);font-weight:700}
.nav-icon{width:18px;text-align:center;font-size:16px}
.sidebar-footer{margin-top:auto;border-top:1px solid var(--border);padding:15px 5px 0}
.main-content{margin-left:225px;min-height:100vh}
.topbar{height:62px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:100}
.page-content{padding:24px;max-width:1300px;margin:0 auto}
.simple-card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.module-card{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:#fff;border:1px solid var(--border);border-radius:10px;padding:15px;color:var(--text);height:100%}
.module-card:hover{border-color:#b8cff5;background:#fbfdff}
.module-icon{width:35px;height:35px;border-radius:8px;background:var(--green-light);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.module-name{font-weight:600}
.module-description{font-size:12px;color:#7a8490;margin-top:3px}
.table{font-size:13px}
.table thead th{font-size:11px;text-transform:uppercase;color:#737d88;background:#fafbfc;white-space:nowrap;border-bottom:1px solid var(--border);padding-top:12px;padding-bottom:12px}
.table td{padding-top:12px;padding-bottom:12px}
.permission-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.permission-item{border:1px solid var(--border);border-radius:7px;padding:9px 10px}
.permission-item .form-check{margin:0}
.sidebar-backdrop{display:none}
@media(max-width:991.98px){
 .sidebar{transform:translateX(-100%);transition:transform .2s ease}
 body.sidebar-open .sidebar{transform:translateX(0);box-shadow:8px 0 24px #0001}
 .sidebar-backdrop{position:fixed;inset:0;background:#0005;z-index:1030}
 body.sidebar-open .sidebar-backdrop{display:block}
 .main-content{margin-left:0}
 .topbar{padding:0 14px;height:58px}
 .page-content{padding:18px 14px}
}
@media(max-width:575.98px){
 .login-card{padding:22px}
 .permission-list{grid-template-columns:1fr}
 .page-content{padding:16px 10px}
}