:root{--navy: #1f3864;--navy-dark: #16294a;--green: #1e7a3c;--red: #a83232;--amber: #a3720a;--grey: #667;--bg: #f2f4f8;--line: #e5e8ee}*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}body{background:var(--bg);color:#222}#root{min-height:100vh;display:flex;flex-direction:column}.update-banner{background:var(--amber);color:#fff;text-align:center;padding:10px 14px;font-weight:700;cursor:pointer;font-size:.95rem}.slipOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a99;z-index:300;overflow:auto;padding:20px 0}.slipBar{text-align:center;margin-bottom:12px}.slipSheet{position:relative;background:#fff;width:1123px;min-height:794px;margin:0 auto;font-family:Arial,sans-serif;color:#000;display:flex;flex-direction:column}.slipHead{width:100%;display:block}.slipFoot{width:100%;display:block;margin-top:auto}.slipSplit{display:flex;flex:1;gap:34px;padding:16px 70px 8px}.slipLeft{width:300px;border-right:2px solid #D9E021;padding-right:30px}.slipLeft h1{text-align:left;font-size:22pt;font-weight:800;margin:0 0 18px}.slipKv{font-size:11pt;margin-bottom:10px}.slipKv b{display:block;color:#666;font-size:8.5pt;text-transform:uppercase;letter-spacing:1px}.slipNetBox{margin-top:26px;background:#d9e021;padding:14px 16px}.slipNetBox .nb1{font-size:9pt;font-weight:700;letter-spacing:1px}.slipNetBox .nb2{font-size:20pt;font-weight:800}.slipRight{flex:1}.slipTable{width:100%;border-collapse:collapse;font-size:12pt}.slipTable th,.slipTable td{border:1.2px solid #000;padding:7px 14px;text-align:left;font-weight:400}.slipTable tr:first-child th{background:#d9e021;font-weight:700}.slipTable .slipTotal td{font-weight:700}.slipSign{margin-top:24px;font-size:11.5pt}@media print{@page{size:A4 landscape;margin:0}body *{visibility:hidden}.slipOverlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;padding:0;overflow:visible}.slipSheet,.slipSheet *{visibility:visible}.slipSheet{width:100%;min-height:100vh;margin:0}.noprint{display:none!important}}.calWrap{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.calGrid{table-layout:fixed;min-width:640px}.calGrid th{text-align:center}.calCell{vertical-align:top;height:84px;cursor:pointer;border:1px solid var(--line);padding:4px}.calCell:hover{background:#f7f9fc}.cal-empty{background:#f6f7fa;cursor:default}.cal-off{background:#f9f7f2}.cal-selected{outline:2px solid var(--navy);outline-offset:-2px}.cal-today .calDay{background:var(--navy);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}.calDay{font-weight:700;font-size:.8rem;margin-bottom:3px}.calChip{font-size:.7rem;font-weight:600;color:#fff;border-radius:5px;padding:1px 5px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calDot{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:4px}.calEvent{border-bottom:1px solid var(--line);padding:10px 0;text-align:left}.e-holiday{background:var(--amber)}.e-office{background:var(--green)}.e-meeting{background:#6b4fd8}.e-deadline{background:var(--red)}.e-important{background:#c2366b}span.chip.e-holiday,span.chip.e-office,span.chip.e-meeting,span.chip.e-deadline,span.chip.e-important{color:#fff}.topbar{background:var(--navy);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.topbar .brand{font-weight:800;letter-spacing:.5px;font-size:1rem}.topbar .who{margin-left:auto;font-size:.85rem;opacity:.9}.topbar button{background:#ffffff26;color:#fff;border:none;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:.85rem}.tabs{display:flex;gap:4px;background:var(--navy-dark);padding:6px 12px 0;overflow-x:auto}.tabs button{background:transparent;color:#cdd6e6;border:none;padding:10px 14px;cursor:pointer;font-size:.9rem;font-weight:600;border-radius:8px 8px 0 0;white-space:nowrap}.tabs button.active{background:var(--bg);color:var(--navy)}.page{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:20px 14px 40px}.card{background:#fff;border-radius:14px;box-shadow:0 2px 10px #00000012;padding:20px 18px;margin-bottom:16px}.card h2{font-size:.85rem;color:var(--grey);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}.center{max-width:420px;margin:8vh auto 0}.center h1{color:var(--navy);font-size:1.3rem;text-align:center;margin-bottom:4px}.center .sub{text-align:center;color:var(--grey);font-size:.9rem;margin-bottom:20px}label{display:block;font-size:.82rem;font-weight:600;color:var(--grey);margin:12px 0 4px}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #c9d1de;border-radius:9px;font-size:1rem;background:#fff;font-family:inherit;resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);border-color:transparent}.btn{display:inline-block;border:none;border-radius:10px;padding:12px 18px;font-size:1rem;font-weight:700;cursor:pointer;color:#fff;background:var(--navy)}.btn.full{width:100%;margin-top:16px}.btn.green{background:var(--green)}.btn.red{background:var(--red)}.btn.grey{background:var(--grey)}.btn.small{padding:7px 12px;font-size:.85rem;border-radius:8px}.btn:disabled{opacity:.5;cursor:default}.linkbtn{background:none;border:none;color:var(--navy);cursor:pointer;font-size:.88rem;text-decoration:underline;padding:0}.greeting{font-size:1.05rem;line-height:1.55;color:#222;margin-bottom:18px}.greeting p{margin:0}.latebox{border:2px solid var(--red);background:#fdf3f3;border-radius:12px;padding:14px 16px;margin-top:14px;text-align:left;font-size:.95rem;line-height:1.5}.latebox p{margin:0}.latebox label{margin-top:0}.t-late{color:var(--red);font-weight:700}.policybox{background:#fff;border:1px solid #f0d5d5;border-radius:10px;padding:10px 12px;margin-top:10px;font-size:.9rem;line-height:1.55}.policybox p{margin:0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:#fff;border-radius:16px;max-width:440px;width:100%;padding:24px 22px;text-align:left;box-shadow:0 12px 40px #0000004d;font-size:.98rem;line-height:1.5}.modal p{margin:0}.modal-title{font-size:1.2rem;font-weight:800;color:var(--red)}.modal-btns{display:flex;gap:10px;margin-top:18px}.modal-btns .btn{flex:1;padding:12px 8px;font-size:.95rem}.bigbtns{display:flex;gap:12px}.bigbtns .btn{flex:1;padding:22px 8px;font-size:1.1rem}.msg{min-height:1.3em;font-weight:600;font-size:.92rem;margin-top:10px}.msg.ok{color:var(--green)}.msg.err{color:var(--red)}table{width:100%;border-collapse:collapse;font-size:.9rem}th{text-transform:uppercase;font-size:.7rem;letter-spacing:.5px;color:var(--grey);padding:8px 6px;border-bottom:2px solid var(--line);text-align:left}td{padding:8px 6px;border-bottom:1px solid #eef1f5}.tScroll{overflow-x:auto}.chip{display:inline-block;padding:2px 10px;border-radius:10px;font-size:.76rem;font-weight:700;color:#fff;white-space:nowrap}.c-working{background:var(--green)}.c-out{background:var(--navy)}.c-leave{background:var(--amber)}.c-none{background:#b6bcc9}.c-applied{background:#8892a8}.c-late{background:var(--red)}.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}.stat{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000f;padding:14px 18px;min-width:110px}.stat .n{font-size:1.5rem;font-weight:800;color:var(--navy)}.stat .l{font-size:.75rem;color:var(--grey);text-transform:uppercase;letter-spacing:.5px}.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.row>div{flex:1;min-width:130px}.muted{color:#99a;font-size:.85rem}.footnote{color:#99a;font-size:.78rem;text-align:center;margin-top:8px;line-height:1.5}.yaseen-banner{background:linear-gradient(90deg,#0b5c37,#14805a);color:#fff;padding:10px 14px;font-size:.95rem;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center}.yaseen-banner .yaseen-hadees{opacity:.9;font-size:.85rem;display:block;margin-top:2px}.yaseen-banner .yaseen-link{background:#fff;color:#0b5c37;font-weight:700;text-decoration:none;padding:6px 14px;border-radius:999px;white-space:nowrap;flex:0 0 auto}