:root {
  color: #1c1e21;
  background: #f0f2f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { border: 0; border-radius: 8px; background: #1877f2; color: #fff; cursor: pointer; font-weight: 700; min-height: 48px; padding: 12px 16px; }
button:hover { background: #166fe5; }
button:disabled { cursor: wait; opacity: .55; }
button.quiet { background: #e4e6eb; border: 0; color: #050505; min-height: 40px; padding: 8px 12px; }
button.quiet:hover { background: #d8dadf; }
button.leave-button { background: #d93025; }
button.leave-button:hover { background: #b3261e; }

.shell { margin: 0 auto; max-width: 540px; min-height: 100dvh; padding: 30px 16px calc(24px + env(safe-area-inset-bottom)); }
.masthead { color: #1877f2; margin: 0 0 18px; padding: 12px 4px; text-align: center; }
.masthead h1 { font-size: clamp(2rem, 8vw, 2.7rem); letter-spacing: -.045em; margin: 4px 0; }
.eyebrow { color: #65676b; font-size: .7rem; font-weight: 700; letter-spacing: .09em; margin: 0 0 7px; }
.masthead .eyebrow { color: #65676b; }
.clock { color: #65676b; font-size: .9rem; margin: 10px 0 0; }
.panel, .notice { background: #fff; border: 1px solid #dddfe2; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); margin: 14px 0; padding: 20px; }
.panel h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: 0 0 8px; }
.panel p { line-height: 1.45; margin: 7px 0; }
.login-panel { margin-top: 14px; }
form { display: grid; gap: 14px; margin-top: 18px; }
label { color: #606770; display: grid; font-size: .84rem; font-weight: 700; gap: 6px; }
input, select, textarea { background: #f5f6f7; border: 1px solid #dddfe2; border-radius: 6px; color: #1c1e21; min-height: 48px; padding: 10px 12px; width: 100%; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { background: #fff; border-color: #1877f2; box-shadow: 0 0 0 2px #e7f3ff; outline: none; }
.password-input { display: block; position: relative; }
.password-input input { padding-right: 48px; }
#togglePassword { align-items: center; background: transparent; color: #606770; display: flex; justify-content: center; min-height: 40px; padding: 8px; position: absolute; right: 4px; top: 4px; width: 40px; }
#togglePassword:hover { background: #e4e6eb; }
#togglePassword svg { fill: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 22px; }
.identity { align-items: start; display: flex; justify-content: space-between; gap: 12px; }
.identity h2 { margin-bottom: 2px; }
.notice { border-color: #f7c948; background: #fff9e6; color: #6a4b00; }
.rules { border-left: 5px solid #1877f2; }
.muted { color: #65676b; font-size: .88rem; }
.actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 17px; }
.message { font-size: .9rem; font-weight: 700; min-height: 1.2em; }
.message.error { color: #d93025; }
.message.success { color: #237a36; }
.history { display: grid; gap: 9px; }
.history-item { align-items: center; border-top: 1px solid #e4e6eb; display: grid; gap: 5px; grid-template-columns: 1fr auto; padding: 12px 0; }
.history-item:first-child { border-top: 0; padding-top: 0; }
.history-item strong { font-size: .95rem; }
.history-item span { color: #65676b; font-size: .8rem; }
.today-item { align-items: center; border-top: 1px solid #e4e6eb; display: flex; gap: 8px; padding: 9px 0; }
.today-item:first-child { border-top: 0; padding-top: 0; }
.today-item strong { font-size: .9rem; }
.today-item span { color: #65676b; font-size: .8rem; }
.tag { border-radius: 99px; font-size: .72rem; font-weight: 800; padding: 5px 9px; white-space: nowrap; }
.tag.ok { background: #e7f3ff; color: #1877f2; }
.tag.warn { background: #fff4ce; color: #8a5a00; }

dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog { border: 0; border-radius: 10px; max-width: min(520px, calc(100vw - 32px)); padding: 0; width: 100%; }
.capture, .leave-form { background: #fff; border-radius: 10px; display: grid; gap: 13px; margin: 0; padding: 16px; }
.capture-head { align-items: center; display: flex; justify-content: space-between; }
.close { border-radius: 50%; font-size: 1.5rem; line-height: 1; padding: 0; width: 40px; }
.calendar-head { align-items: center; display: grid; grid-template-columns: 40px 1fr 40px; text-align: center; }
.calendar-head button { font-size: 1.5rem; min-height: 40px; padding: 0; }
.calendar-weekdays, .calendar { display: grid; gap: 4px; grid-template-columns: repeat(7, 1fr); text-align: center; }
.calendar-weekdays { color: #65676b; font-size: .72rem; font-weight: 700; }
.calendar-day { background: #f5f6f7; color: #1c1e21; min-height: 40px; padding: 6px 0; }
.calendar-day:hover { background: #e7f3ff; }
.calendar-day.selected { background: #1877f2; color: #fff; }
.calendar-day:disabled { background: transparent; color: #bcc0c4; cursor: default; }
.leave-sessions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.session { background: #e4e6eb; color: #606770; }
.session:hover { background: #d8dadf; }
.session.active { background: #1877f2; color: #fff; }
.session.active:hover { background: #166fe5; }
video, #preview { background: #1c1e21; border-radius: 8px; max-height: 55dvh; min-height: 220px; object-fit: cover; width: 100%; }
.capture-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
#submitAttendance { grid-column: 1 / -1; }

@media (max-width: 400px) {
  .shell { padding-inline: 11px; }
  .panel, .notice { padding: 17px; }
  .actions { grid-template-columns: 1fr; }
}