.attendance-screen { max-width: 680px; margin: 0 auto; }
.attendance-screen [hidden] { display: none !important; }
.attendance-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.attendance-head .muted { margin: 2px 0 0; }
.employee-grid { display: grid; gap: 10px; }
.employee-card { position: relative; background: #fff; border: 1px solid #dce2dd; border-radius: 16px; overflow: hidden; }
.employee-card.has-status { border-color: #d7aaa6; background: #fffafa; }
.employee-select { width: 100%; min-height: 84px; border: 0; background: transparent; color: inherit; padding: 12px 56px 12px 12px; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.employee-select:active { background: #f3f6f3; }
.employee-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 48px; background: #e8efe9; color: #235b40; font-size: 1.2rem; font-weight: 900; }
.employee-main { min-width: 0; display: grid; gap: 2px; flex: 1; }
.employee-main strong { font-size: 1.05rem; line-height: 1.1; }
.employee-main small { color: #667168; font-size: .82rem; }
.attendance-status { min-width: 58px; display: grid; justify-items: center; gap: 2px; }
.attendance-status > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; font-weight: 900; }
.attendance-status small { font-size: .72rem; font-weight: 800; color: #5f6d64; }
.status-none > span { border: 1px dashed #aeb9b1; color: #667168; }
.status-absence > span { background: #f4dedc; color: #9c332f; }
.status-absence small { color: #9c332f; }
.employee-history-link { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; color: #667168; text-decoration: none; border-radius: 11px; background: #fff; }
.employee-history-link:active { background: #edf1ee; }
.employee-history-link svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.attendance-picker { background: #fff; border: 2px solid #9c332f; border-radius: 20px; padding: 16px; display: grid; gap: 16px; }
.attendance-selected { display: flex; align-items: center; gap: 12px; }
.attendance-selected-main { min-width: 0; display: grid; gap: 2px; flex: 1; }
.attendance-selected-main strong { font-size: 1.2rem; }
.attendance-selected-main small { color: #9c332f; font-weight: 850; }
.justification-field { display: grid; gap: 7px; font-weight: 800; }
.justification-field > span small { font-weight: 600; color: #667168; }
.justification-field textarea { min-height: 88px; }
.audio-justification { display: grid; gap: 8px; }
.audio-record-button { min-height: 58px; width: 100%; border: 1px solid #bfc9c1; border-radius: 14px; background: #f7f8f7; color: #235b40; display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 850; cursor: pointer; }
.audio-record-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.audio-record-button.recording { border-color: #9c332f; color: #9c332f; background: #fff3f2; }
.audio-preview { display: grid; gap: 6px; }
.audio-preview audio { width: 100%; }
.audio-clear { justify-self: start; border: 0; background: transparent; padding: 5px 0; color: #9c332f; font-weight: 750; cursor: pointer; }
.attendance-submit { min-height: 62px; background: #9c332f; }
.empty-attendance { background: #fff; border: 1px solid #dce2dd; border-radius: 16px; padding: 20px; display: grid; gap: 8px; }
.attendance-history { max-width: 680px; margin: 0 auto; }
.attendance-history-head > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.attendance-history-head h1 { grid-column: 2; }
.attendance-history-head p { grid-column: 2; margin: 0; }
.back-link { grid-row: 1 / span 2; font-size: 1.5rem; font-weight: 800; text-decoration: none; color: #235b40; }
.attendance-history-list { display: grid; gap: 9px; }
.attendance-history-row { background: #fff; border: 1px solid #dce2dd; border-radius: 14px; padding: 13px; display: grid; gap: 8px; }
.history-kind { display: flex; align-items: center; gap: 10px; }
.history-kind > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #f4dedc; color: #9c332f; font-size: 1.35rem; font-weight: 900; }
.attendance-history-row p { margin: 0; }
.attendance-history-row audio { width: 100%; max-width: 420px; }
@media (min-width: 560px) { .employee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }