:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#202124;background:#f5f6f8;font-synthesis:none;text-rendering:optimizeLegibility;--red:#8d0f1b;--red2:#b61b2c;--dark:#25262b;--muted:#72757d;--line:#e5e7eb;--card:#fff;--green:#137a4b;--amber:#a45a00;--blue:#1f5fbf}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;background:#f5f6f8}body{min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:.85rem}.mono{font-variant-numeric:tabular-nums}.nowrap{white-space:nowrap}.grow{flex:1}.row{display:flex;gap:.75rem;align-items:center}.row.wrap{flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:1rem}.center{text-align:center}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#fff 0,#f5f6f8 45%,#edeff2)}.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 18px 45px #23232d17}.brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}.brand-mark{width:52px;height:52px;border-radius:16px;background:var(--red);display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:.04em}.brand h1{font-size:1.25rem;margin:0}.brand p{margin:3px 0 0;color:var(--muted);font-size:.9rem}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:.88rem;font-weight:650}.field input,.field select,.field textarea{width:100%;border:1px solid #d6d9df;border-radius:12px;padding:11px 12px;background:#fff;outline:none;transition:.15s}.field textarea{min-height:92px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px #8d0f1b14}.btn{border:0;border-radius:12px;padding:10px 14px;font-weight:700;display:inline-flex;gap:8px;align-items:center;justify-content:center}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--red);color:#fff}.btn-primary:hover{background:#74101a}.btn-secondary{background:#eff1f4;color:#333}.btn-danger{background:#fce8ea;color:#9c1624}.btn-success{background:#e4f4ec;color:#0e6840}.btn-outline{background:#fff;border:1px solid var(--line);color:#333}.btn-block{width:100%}.btn-lg{padding:14px 18px;font-size:1rem}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}.sidebar{background:#24262b;color:#fff;min-height:100vh;position:sticky;top:0;height:100vh;padding:18px 14px;display:flex;flex-direction:column}.sidebar .brand{margin:0 6px 20px}.sidebar .brand-mark{width:42px;height:42px;border-radius:12px}.sidebar .brand p{color:#b5bac5}.nav{display:flex;flex-direction:column;gap:4px;overflow:auto}.nav button{border:0;background:transparent;color:#cfd3da;text-align:left;padding:10px 12px;border-radius:10px}.nav button:hover,.nav button.active{background:#34373e;color:#fff}.sidebar-footer{margin-top:auto;padding-top:12px;border-top:1px solid #3a3d44}.profile-mini{display:flex;gap:10px;align-items:center}.avatar{width:38px;height:38px;border-radius:50%;background:#eceff3;display:grid;place-items:center;color:#50545b;font-weight:800;flex:none}.sidebar .avatar{background:#3b3e45;color:#fff}.profile-mini strong{display:block;font-size:.9rem}.profile-mini span{display:block;font-size:.78rem;color:#aeb3bd;margin-top:2px}.main{min-width:0}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:10}.topbar h2{font-size:1.05rem;margin:0}.topbar .clock{margin-left:auto;text-align:right}.topbar .clock strong{display:block}.topbar .clock span{font-size:.78rem;color:var(--muted)}.mobile-menu{display:none;border:0;background:#f1f2f4;border-radius:10px;padding:9px 11px;margin-right:10px}.content{padding:24px;max-width:1450px;margin:auto}.page-title{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:18px}.page-title h1{font-size:1.55rem;margin:0}.page-title p{margin:5px 0 0;color:var(--muted)}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 3px 12px #1e233206}.card h3{margin:0 0 12px;font-size:1rem}.stat{display:flex;flex-direction:column;gap:5px}.stat .value{font-size:1.65rem;font-weight:800}.stat .label{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.hero-attendance{background:linear-gradient(135deg,#76111a,#a81928);color:#fff;border:none}.hero-attendance .muted{color:#f2cfd3}.hero-attendance .hero-time{font-size:2.1rem;font-weight:800;letter-spacing:.03em}.hero-attendance .hero-date{font-size:.9rem;opacity:.9}.attendance-state{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.hero-attendance .badge{background:#ffffff29;color:#fff}.hero-attendance .btn-secondary{background:#fff;color:var(--red)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{padding:11px 12px;border-bottom:1px solid #edf0f3;text-align:left;font-size:.88rem;vertical-align:middle}.table th{font-size:.76rem;color:#62666e;text-transform:uppercase;letter-spacing:.035em;background:#fafafa;position:sticky;top:0}.table tr:last-child td{border-bottom:0}.actions{display:flex;gap:6px;flex-wrap:wrap}.actions .btn{padding:7px 9px;font-size:.8rem}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:.73rem;font-weight:800;background:#eceef1;color:#555}.badge-hadir,.badge-disetujui,.badge-success{background:#e4f4ec;color:#146a45}.badge-terlambat,.badge-menunggu{background:#fff1dc;color:#8b5300}.badge-izin,.badge-sakit,.badge-cuti,.badge-dinas{background:#e8f0ff;color:#245fa8}.badge-alpha,.badge-ditolak,.badge-rejected{background:#fce7ea;color:#9a1d29}.badge-belum{background:#eceef1;color:#60646b}.notice{padding:12px 14px;border-radius:12px;border:1px solid #dce3ef;background:#f6f9ff;color:#2c4e7e}.notice.warn{border-color:#f3d5a5;background:#fff9ee;color:#795117}.notice.danger{border-color:#f3c8cf;background:#fff5f6;color:#8f1d2b}.notice.success{border-color:#bfe2d2;background:#f3fcf7;color:#176a47}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.filters .field{min-width:160px;flex:1}.filters .field.compact{max-width:220px}.separator{height:1px;background:var(--line);margin:18px 0}.empty{padding:32px;text-align:center;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;background:#0f12168c;z-index:50;display:grid;place-items:center;padding:18px}.modal{background:#fff;border-radius:18px;width:min(620px,100%);max-height:92vh;overflow:auto;box-shadow:0 25px 70px #00000040}.modal-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0}.modal-body{padding:18px}.modal-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}.icon-btn{border:0;background:#f1f2f4;border-radius:10px;width:36px;height:36px}.camera-box{aspect-ratio:4/3;background:#17181b;border-radius:14px;overflow:hidden;position:relative}.camera-box video,.camera-box img{width:100%;height:100%;object-fit:cover}.camera-hint{position:absolute;left:12px;right:12px;bottom:12px;background:#0000008c;color:#fff;padding:8px 10px;border-radius:9px;font-size:.82rem}.gps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.gps-grid div{background:#f6f7f9;border-radius:10px;padding:10px}.gps-grid span{display:block;font-size:.7rem;color:var(--muted)}.gps-grid strong{font-size:.88rem}.countdown{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}.quick-actions{display:flex;gap:10px;flex-wrap:wrap}.quick-actions .btn{min-width:150px}.toast-root{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:8px}.toast{opacity:0;transform:translateY(10px);transition:.2s;background:#282a2f;color:#fff;padding:11px 14px;border-radius:11px;box-shadow:0 12px 30px #0000002e;max-width:360px}.toast.show{opacity:1;transform:none}.toast.success{background:#176b48}.toast.error{background:#991f2c}.toast.warn{background:#875800}.install-banner{position:fixed;left:50%;bottom:16px;transform:translate(-50%);z-index:40;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:0 12px 30px #00000021;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px)}.offline-banner{background:#6c4712;color:#fff;text-align:center;padding:7px;font-size:.84rem}@media(max-width:1050px){.grid-6{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;z-index:30;width:250px;transition:.22s;box-shadow:12px 0 30px #0003}.sidebar.open{left:0}.mobile-menu{display:block}.content{padding:16px}.topbar{padding:0 14px}.grid-3,.grid-2{grid-template-columns:1fr}.page-title{flex-direction:column}.topbar .clock span{display:none}}@media(max-width:560px){.grid-6,.grid-4{grid-template-columns:repeat(2,1fr)}.login-card{padding:22px 18px;border-radius:18px}.card{padding:15px}.gps-grid{grid-template-columns:1fr}.quick-actions .btn{width:100%}.topbar .clock strong{font-size:.9rem}.content{padding:12px}.modal-backdrop{padding:8px}.modal{border-radius:15px}.page-title h1{font-size:1.35rem}}@media print{.sidebar,.topbar,.no-print,.btn,.filters{display:none!important}.app-shell{display:block}.content{padding:0}.card{box-shadow:none;border-color:#bbb}.table-wrap{overflow:visible}.table{min-width:0}.main{background:#fff}}