:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#152238;background:#edf3f9;--navy:#0e355b;--blue:#1769e8;--green:#067647;--red:#b42318;--amber:#b54708}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#0e355b 0 165px,#edf3f9 165px)}.shell{width:min(560px,100%);margin:0 auto;padding:22px 16px 34px}.brand{height:112px;color:#fff;display:flex;align-items:center;gap:14px;padding:4px 8px 18px}.brand img{width:126px;height:auto}.brand strong{font-size:22px;display:block}.brand span{font-size:13px;opacity:.8}.card{background:#fff;border:1px solid #dbe4ee;border-radius:18px;padding:22px;margin-bottom:14px;box-shadow:0 8px 28px rgba(16,42,67,.08)}h1{font-size:27px;margin:7px 0 7px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;color:#667085}.muted{color:#667085}.card p{line-height:1.45}label{display:block;font-size:13px;font-weight:700;margin:17px 0 0}input{display:block;width:100%;margin-top:6px;border:1px solid #b8c5d4;border-radius:12px;padding:14px;font-size:18px;background:#fbfcfe;outline:none}input:focus{border-color:#1769e8;box-shadow:0 0 0 3px rgba(23,105,232,.12)}button{font:inherit}.primary{width:100%;margin-top:20px;background:#1769e8;color:#fff;border:0;border-radius:12px;padding:14px 18px;font-weight:800;font-size:16px;cursor:pointer}.primary:disabled{opacity:.5}.message{min-height:22px;margin-top:12px;font-size:13px;font-weight:700}.message.error{color:#b42318}.message.ok{color:#067647}.lan-note{margin-top:16px;padding:10px 12px;border-radius:10px;background:#f4f3ff;color:#5925dc;font-size:12px}.hidden{display:none!important}.employee-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.employee-name{font-size:23px;font-weight:800}.link-button{border:0;background:transparent;color:#1769e8;font-weight:700;padding:4px;cursor:pointer}.clock{text-align:center;font-size:48px;font-weight:800;letter-spacing:.02em;color:#0e355b;margin-top:20px}.date{text-align:center;color:#667085;margin-top:2px}.state-row{margin-top:20px;padding-top:16px;border-top:1px solid #e5eaf0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.state-badge{display:inline-block;border-radius:999px;padding:8px 13px;background:#ecfdf3;color:#067647;font-weight:800}.state-detail{font-size:13px;color:#667085}.actions{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}.punch-button{border:1px solid #cfd8e4;border-radius:15px;min-height:105px;padding:13px 8px;background:#f9fbfd;color:#172033;font-weight:800;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.punch-button .icon{font-size:28px}.punch-button:not(:disabled):active{transform:scale(.98)}.punch-button:disabled{opacity:.34;filter:grayscale(1);cursor:not-allowed}.punch-button.entry:not(:disabled){border-color:#84caff;background:#eff8ff;color:#175cd3}.punch-button.break-out:not(:disabled){border-color:#fedf89;background:#fffaeb;color:#b54708}.punch-button.break-in:not(:disabled){border-color:#c3b5fd;background:#f4f3ff;color:#5925dc}.punch-button.exit:not(:disabled){border-color:#fda29b;background:#fff1f0;color:#b42318}.last-card #lastPunch{margin-top:8px;font-weight:700}.install{position:sticky;bottom:12px;width:100%;border:1px solid #1769e8;background:#fff;color:#1769e8;border-radius:12px;padding:12px;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.12)}footer{text-align:center;color:#667085;font-size:11px;padding:12px 8px}.overlay{position:fixed;inset:0;background:rgba(8,19,35,.56);display:flex;align-items:center;justify-content:center;padding:18px;z-index:10}.confirm-card{width:min(390px,100%);background:#fff;border-radius:20px;padding:28px;text-align:center;box-shadow:0 18px 55px rgba(0,0,0,.25)}.confirm-icon{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#dcfae6;color:#067647;font-size:37px;font-weight:900;margin:0 auto 14px}.confirm-card h2{margin:0 0 9px}.confirm-time{font-size:29px;font-weight:800;color:#0e355b;margin-top:9px}@media(max-width:390px){.actions{grid-template-columns:1fr}.punch-button{min-height:78px;flex-direction:row}.clock{font-size:42px}.brand img{width:112px}}.device-info{margin-top:6px;color:#5925dc;font-size:.86rem;font-weight:600}.ios-hint{max-width:560px;margin:12px auto 0;padding:12px 14px;background:#f4f3ff;border:1px solid #d9d6fe;border-radius:12px;color:#42307d;font-size:.9rem}.hidden{display:none!important}
.invite-banner{margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:#ecfdf3;border:1px solid #abefc6;color:#067647;display:flex;flex-direction:column;gap:4px;font-size:13px}.invite-banner strong{font-size:15px}.invite-banner span{color:#475467}