:root{--primary:#3b82f6;--primary2:#2563eb;--bg:#f5f7fb;--text:#172033;--muted:#718096;--border:#e8edf5}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;background:#fff;border-right:1px solid var(--border);padding:22px 15px;z-index:1000;display:flex;flex-direction:column}
.brand{display:flex;gap:12px;align-items:center;padding:4px 8px 25px}.brand-mark,.login-logo{width:42px;height:42px;border-radius:12px;background:#eaf2ff;color:var(--primary);display:grid;place-items:center;font-size:22px}.brand strong{display:block;font-size:19px}.brand small,.user-mini small{display:block;color:#8792a6;font-size:11px;margin-top:2px}
.user-mini{display:flex;gap:10px;align-items:center;padding:12px;background:#f7f9fd;border:1px solid var(--border);border-radius:14px;margin-bottom:18px}.avatar{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700}.user-mini b{font-size:13px}
.menu{display:flex;flex-direction:column;gap:5px}.menu a,.sidebar-bottom a{color:#637087;text-decoration:none;padding:11px 12px;border-radius:10px;font-size:14px;display:flex;align-items:center;gap:10px}.menu a:hover,.menu a.active{background:#edf4ff;color:var(--primary);font-weight:600}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--border);padding-top:12px}
.main{margin-left:250px;min-height:100vh}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:900}.top-title{font-weight:700;font-size:18px}.top-sub{font-size:12px;color:#8a94a6}.top-actions{display:flex;gap:10px;align-items:center}.content{padding:25px 28px}.footer{padding:20px 28px;color:#8b96a8;font-size:12px}
.cardx{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 5px 18px rgba(27,52,85,.04)}.stat{display:flex;justify-content:space-between;align-items:center}.stat h3{font-size:27px;margin:0}.stat p{margin:5px 0 0;color:var(--muted);font-size:13px}.stat-icon{width:48px;height:48px;border-radius:14px;background:#edf4ff;color:var(--primary);display:grid;place-items:center;font-size:21px}
.table-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}.table-card .table{margin:0}.table-card th{font-size:12px;color:#6d7890;background:#fafbfe;white-space:nowrap}.table-card td{font-size:13px;vertical-align:middle}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.page-head h4{margin:0;font-weight:700}.muted{color:var(--muted)}.form-control,.form-select{border-color:#dfe5ef;border-radius:10px;padding:.62rem .8rem}.form-control:focus,.form-select:focus{border-color:#93b9ff;box-shadow:0 0 0 .2rem rgba(59,130,246,.1)}.btn{border-radius:10px}.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover{background:var(--primary2);border-color:var(--primary2)}
.login-body{min-height:100vh;background:linear-gradient(135deg,#eef5ff,#f7f9fc);display:grid;place-items:center;padding:25px}.login-wrap{width:min(980px,100%);background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 25px 70px rgba(37,69,112,.12);display:grid;grid-template-columns:42% 58%}.login-brand-panel{padding:55px;background:linear-gradient(150deg,#eaf3ff,#f7fbff);display:flex;flex-direction:column;justify-content:center}.login-brand-panel h1{font-size:34px;margin:18px 0 5px}.login-brand-panel p{color:#6d7890}.login-points{display:grid;gap:13px;margin-top:30px;color:#536177;font-size:13px}.login-points i{color:var(--primary);margin-right:8px}.login-card{padding:55px}.login-card h3{font-weight:750}.demo-box{background:#f7f9fd;border:1px dashed #cfd8e8;padding:12px;border-radius:12px;color:#69758b;font-size:11px;line-height:1.8}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.quick{padding:18px;background:#fff;border:1px solid var(--border);border-radius:14px;text-decoration:none;color:var(--text)}.quick i{font-size:22px;color:var(--primary)}.quick b{display:block;margin-top:8px}.quick span{font-size:12px;color:var(--muted)}
.badge-soft{background:#edf4ff;color:var(--primary);padding:6px 9px;border-radius:8px;font-size:11px}.status-present{color:#0f9d58;background:#eaf8f0}.status-absent{color:#d64545;background:#fff0f0}.status-leave{color:#b7791f;background:#fff8e7}
.attendance-box{background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px}.gps-status{background:#f7f9fd;border-radius:12px;padding:13px}.camera-box{border:2px dashed #cfd8e8;border-radius:15px;min-height:190px;display:grid;place-items:center;background:#fafcff}.camera-box video{width:100%;max-height:260px;border-radius:12px;display:none}.preview-img{max-width:100%;max-height:260px;border-radius:12px;display:none}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.login-wrap{grid-template-columns:1fr}.login-brand-panel{display:none}}
@media(max-width:991px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.topbar{padding:0 16px}.content{padding:18px 15px}.quick-grid{grid-template-columns:1fr}}
@media(max-width:575px){.kpi-grid{grid-template-columns:1fr}.login-card{padding:28px}.top-actions .badge{display:none}}