.attendance-detail { color: var(--text, #f4f7fb); background: var(--surface, var(--panel, #121722)); border: 1px solid var(--line, #273247); border-radius: 12px; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px; }
.attendance-detail::backdrop { background: #0009; }
.attendance-detail label { display: grid; gap: 6px; margin: 14px 0; }
.attendance-detail input, .attendance-detail textarea { box-sizing: border-box; width: 100%; font: inherit; padding: 8px; color: inherit; background: var(--surface, var(--bg, #0b0d12)); border: 1px solid var(--line, #273247); border-radius: 6px; }
.attendance-detail-actions, .attendance-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.attendance-detail button, .attendance-actions button { font: inherit; color: inherit; background: var(--surface, var(--panel, #121722)); border: 1px solid var(--line, #273247); border-radius: 6px; padding: 8px 12px; min-height: 44px; cursor: pointer; }
.attendance-summary dl { display: flex; flex-wrap: wrap; gap: 16px; }
.attendance-summary dt { font-size: .85em; }
.attendance-summary dd { margin: 4px 0; font-weight: 700; }
.attendance-count { font-size: .85em; }
.attendance-record-list { padding-left: 20px; }
.attendance-record-list > li { margin: 12px 0; }