:root{--accent:#2563eb;--ink:#172b4d;--muted:#8190a6;--line:#e7edf6;--bs-primary:#2563eb}
body{background:#f4f6fa}.app-header{padding-bottom:16px;border-bottom:1px solid var(--line)}.mark{background:#2563eb;box-shadow:0 4px 12px #2563eb1c}.pill{background:#edf3ff;color:#5877a8}.card{border-radius:20px;border-color:#e7edf6;box-shadow:0 4px 18px #1a355507}nav{flex-wrap:nowrap;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none;gap:6px}nav::-webkit-scrollbar{display:none}nav a{flex-shrink:0;background:#edf1f8;color:#8190a8;font-size:12px;padding:10px 14px;border-radius:11px}nav a[aria-current=page]{background:#2563eb;color:white;box-shadow:0 4px 10px #2563eb16}.punch-card{background:linear-gradient(180deg,#fff,#fafcff);border-color:#e4ebf9}.date>strong{color:#1d3d73;font-weight:700}.action.primary{background:#2563eb;border-color:#2563eb;box-shadow:0 6px 16px #2563eb20}.action{background:#f0f5ff;border-color:#dce7ff;color:#2e62b3;border-radius:16px}.submit,.decision{background:#2563eb;min-height:48px;border-radius:12px}.submit:hover,.decision:hover{background:#1f54c7}.decision.reject{background:#f1f4f9;color:#7e8da3}.form-control,.form-select{font-size:16px;min-height:48px;border-radius:12px;background:#f8fafd;border-color:#dfe6f1}.form-control:focus,.form-select:focus{border-color:#779cf0;box-shadow:0 0 0 3px #2563eb10}.table-wrap{border-radius:12px}.panel-title h2{font-size:16px;color:#344e72}.status.APPROVED{background:#e6f5ef;color:#26886c}button:focus-visible,a:focus-visible{outline-color:#8aacf3}
@media(max-width:600px){.app-header{padding-bottom:12px}main{padding-top:16px}nav{margin-top:16px;margin-bottom:22px}.page-heading{margin-bottom:20px}.punch-card{padding:26px 20px}.date>strong{font-size:60px}.panel{padding:22px 18px}.actions{gap:10px}.action strong{font-size:16px}}