*{box-sizing:border-box}body{margin:0;background:#f4f6f9;color:#263238;font-family:Arial,"Tahoma",sans-serif;font-size:14px}.topbar{height:58px;background:#fff;border-bottom:1px solid #ddd;display:flex;align-items:center;padding:0 18px;position:fixed;left:230px;right:0;top:0;z-index:5}.spacer{flex:1}.logout{margin-left:14px;color:#d32f2f;text-decoration:none}.menu-toggle{display:none;border:0;background:none;font-size:22px;margin-right:8px}.sidebar{position:fixed;width:230px;top:0;bottom:0;background:#343a40;color:#fff;z-index:6}.brand{padding:20px 18px;background:#2d3339;font-size:17px}.sidebar a{display:block;color:#d3d7da;padding:14px 18px;text-decoration:none}.sidebar a:hover,.sidebar a.active{background:#1677df;color:#fff}.content{margin-left:230px;padding:82px 20px 55px;min-height:100vh}footer{position:fixed;left:230px;right:0;bottom:0;background:#fff;border-top:1px solid #ddd;padding:10px 20px;color:#777}.grid{display:grid;gap:15px}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.card{background:#fff;border:1px solid #ddd;border-radius:4px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}.stat{color:#fff;min-height:108px}.stat strong{display:block;font-size:32px}.blue{background:#17a2b8}.green{background:#28a745}.yellow{background:#ffc107;color:#222}.red{background:#dc3545}.purple{background:#6f42c1}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.btn{display:inline-block;border:0;border-radius:3px;color:#fff;background:#1677df;padding:9px 13px;text-decoration:none;cursor:pointer}.btn-success{background:#28a745}.btn-danger{background:#dc3545}.btn-warning{background:#d99b00}.btn-secondary{background:#6c757d}.btn-sm{padding:5px 8px;font-size:12px}input,select{padding:9px;border:1px solid #bbb;border-radius:3px;max-width:100%}label{display:block;margin:9px 0 4px;font-weight:bold}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:10px;border-bottom:1px solid #ddd;text-align:left;white-space:nowrap}th{background:#f1f3f5}.badge{padding:4px 7px;border-radius:10px;color:#fff;font-size:12px}.badge-present{background:#28a745}.badge-late{background:#dc3545}.badge-leave{background:#6f42c1}.badge-absent{background:#6c757d}.alert{padding:12px;margin-bottom:14px;border-radius:3px;background:#d9edf7}.alert.success{background:#d4edda}.alert.error{background:#f8d7da}.pagination a{display:inline-block;padding:7px 10px;margin:8px 2px;background:#fff;border:1px solid #ddd;text-decoration:none}.scan-shell{max-width:900px;margin:auto;text-align:center}.camera-box{background:#111;position:relative;border-radius:6px;overflow:hidden;min-height:300px}.camera-box video{width:100%;display:block}.camera-box canvas{position:absolute;inset:0;width:100%;height:100%}.scan-result{margin-top:14px;padding:15px;font-size:18px}.muted{color:#777}.photo{width:48px;height:48px;object-fit:cover;border-radius:50%}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 15px}.full{grid-column:1/-1}h1{margin-top:0}canvas.chart{max-height:280px}@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:.2s}.menu-open .sidebar{transform:none}.topbar,.content,footer{left:0;margin-left:0}.menu-toggle{display:block}.grid-4,.grid-2,.form-grid{grid-template-columns:1fr}.content{padding:75px 12px 55px}}