.hr-clock-panel{border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:28px;background:var(--panel);color:var(--text)}
.hr-clock-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.hr-clock-heading h3,.hr-clock-heading h4{margin:4px 0 8px}.hr-clock-heading p{color:var(--muted);max-width:800px;margin:0}
.hr-clock-create{display:grid;grid-template-columns:minmax(140px,1fr) minmax(140px,1fr) auto;gap:14px;align-items:end;margin:18px 0}.hr-clock-panel label,.hr-clock-dialog label{display:grid;gap:8px;font-weight:600}.hr-clock-panel input,.hr-clock-dialog input:not([type=checkbox]){width:100%;min-width:0;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text)}
.hr-clock-code{background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:16px;margin-bottom:18px}.hr-clock-code code{display:block;font-size:clamp(16px,2.5vw,25px);font-weight:700;letter-spacing:1px;margin:10px 0;overflow-wrap:anywhere}.hr-clock-code p{margin:0;color:var(--text)}
.hr-clock-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}.hr-clock-card{min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.hr-clock-card h4,.hr-clock-card p{overflow-wrap:anywhere}.hr-clock-card small{color:var(--muted);display:block}.hr-clock-fingerprint{display:block;font-size:16px;font-weight:700;margin:10px 0;overflow-wrap:anywhere}.hr-clock-state{background:var(--panel-soft);color:var(--text);border:1px solid var(--line);padding:5px 9px;border-radius:16px;font-size:12px;font-weight:700}.hr-clock-state[data-state=active]{border-color:var(--accent)}
.hr-clock-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:16px}.hr-clock-audit{margin-top:18px}.hr-clock-audit li{margin-bottom:8px;overflow-wrap:anywhere}.hr-clock-audit summary{cursor:pointer;font-weight:600}.hr-clock-message{min-height:20px;color:var(--muted)}.hr-clock-message.is-error,.hr-clock-dialog [role=alert]{color:var(--red)}
.hr-clock-dialog{width:min(560px,calc(100vw - 28px));max-height:85dvh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:22px}.hr-clock-dialog::backdrop{background:rgba(0,0,0,.6)}.hr-clock-dialog .hr-clock-confirm{display:flex;align-items:flex-start;gap:12px;margin-top:18px}.hr-clock-confirm input[type=checkbox]{width:20px;min-width:20px;height:20px;margin:2px 0 0;flex:none}.hr-clock-panel button:disabled,.hr-clock-dialog button:disabled{opacity:.6;cursor:wait}
@media(max-width:620px){.hr-clock-create{grid-template-columns:1fr}.hr-clock-panel{padding:14px}.hr-clock-heading>button{width:100%}.hr-clock-actions>button{flex:1}.hr-clock-dialog{padding:16px}}
.hr-clock-fingerprint{white-space:pre-line;line-height:1.5}
.hr-clock-sync{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);font-size:1rem}.hr-clock-sync label{font-size:.875rem}.hr-clock-sync select{min-width:0;width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text)}.hr-clock-events{max-width:100%;overflow:auto}.hr-clock-events th,.hr-clock-events td{padding:10px;font-size:.875rem;text-align:left}.hr-clock-events td{overflow-wrap:anywhere}.hr-clock-sync [role=status]{color:var(--muted)}
.hr-clock-sync [data-sync-person]{grid-template-columns:minmax(140px,1fr) auto}
.hr-clock-qr-image{display:block;width:224px;height:auto;aspect-ratio:1;max-width:100%;margin:14px 0 10px;background:#fff;border-radius:4px;forced-color-adjust:none}
.hr-clock-code [data-clock-qr],.hr-clock-code [data-profile-qr]{margin-bottom:12px}
.hr-clock-code small{display:block;margin-top:12px;color:var(--muted)}
@media(max-width:620px){.hr-clock-sync [data-sync-person]{grid-template-columns:1fr}}

.hr-clock-attendance-filters{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin:18px 0}.hr-clock-attendance-filters label{flex:1;min-width:160px}.hr-clock-attendance-filters select{width:100%;min-width:0;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text)}
.hr-clock-attendance-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px}.hr-clock-attendance-times{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hr-clock-attendance-times dt{color:var(--muted);font-size:.875rem}.hr-clock-attendance-times dd{margin:4px 0 0;font-weight:600}.hr-clock-attendance-issues{padding-left:22px}.hr-clock-attendance-events{padding-left:22px}.hr-clock-attendance-events li{margin:14px 0;overflow-wrap:anywhere}.hr-clock-attendance-events p{white-space:pre-wrap}.hr-clock-attendance-rows summary{cursor:pointer;font-weight:600}.hr-clock-state[data-state=review],.hr-clock-state[data-state=open]{border-color:var(--accent)}