.ui .hall-shell { display: grid; gap: 1rem; min-width: 0; }
.ui .hall-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.ui .hall-intro-copy { min-width: 0; }
.ui .hall-status { width: fit-content; min-height: 2rem; margin: 0; padding: .35rem .7rem; border: 1px solid var(--ui-line); border-radius: 999px; color: var(--ui-muted); font-weight: 800; }
.ui .hall-card { min-width: 0; padding: clamp(1rem, 3vw, 1.4rem); }
.ui .hall-card > :first-child { margin-top: 0; }
.ui .hall-card > :last-child { margin-bottom: 0; }
.ui .hall-stack { display: grid; gap: 1rem; }
.ui .hall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ui .hall-toolbar, .ui .hall-actions, .ui .tw-toolbar, .ui .tw-actions, .ui .tw-sessions,
.ui .absence-thresholds { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.ui .hall-note, .ui .absence-notice { margin: 0; padding: .85rem 1rem; border-left: 4px solid var(--ui-accent); border-radius: 0 var(--ui-radius-small) var(--ui-radius-small) 0; background: color-mix(in srgb, var(--ui-accent) 13%, var(--ui-surface)); }
.ui .checkin-preview { border-color: var(--ui-line); background: var(--ui-bg); }
.ui .hall-muted, .ui .tw-hint, .ui .absence-hint, .ui .absence-note, .ui .absence-courses { color: var(--ui-muted); }
.ui .hall-error, .ui .tw-error, .ui .absence-error { color: var(--ui-danger); font-weight: 800; }
.ui .hall-error:empty, .ui .status-message:empty { display: none; }
.ui .hall-skip { position: fixed; top: -6rem; left: 1rem; z-index: 20; padding: .7rem 1rem; border-radius: var(--ui-radius-small); background: var(--ui-action); color: var(--ui-on-action); font-weight: 800; }
.ui .hall-skip:focus { top: 1rem; }
.ui .hall-table-wrap { max-width: 100%; overflow-x: auto; }
.ui .hall-empty { text-align: center; color: var(--ui-muted); }
.ui .hall-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ui .hall-list > li { padding: .75rem; border-radius: var(--ui-radius-small); background: var(--ui-bg); overflow-wrap: anywhere; }
.ui .hall-badge, .ui .tw-badge, .ui .absence-badge, .ui .tw-summary span { display: inline-flex; width: fit-content; min-height: 2rem; align-items: center; padding: .3rem .7rem; border-radius: 999px; background: var(--status-background); color: var(--status-text); font-weight: 800; }
.ui button, .ui a, .ui input, .ui select { min-height: 48px; }
.ui input[type="checkbox"] { width: 1.25rem; min-height: 1.25rem; accent-color: var(--ui-primary); }
.ui label > span:has(> input[type="checkbox"]) { display: inline-flex; min-height: 48px; align-items: center; gap: .55rem; }
.ui[data-halle-title="office.pageTitle"] :is(button, a, input:not([type="checkbox"]), select),
.ui[data-halle-title="office.pageTitle"] label > span:has(> input[type="checkbox"]) { min-height: 72px; }
.ui .hall-card > form { display: grid; gap: .8rem; }
.ui fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ui legend { margin-bottom: .5rem; font-weight: 800; }
.ui hr { width: 100%; border: 0; border-top: 1px solid var(--ui-line); }
.ui [hidden] { display: none !important; }
.ui .checkin-browser { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.ui .checkin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; }
.ui .checkin-browser .checkin-grid { flex: 1 1 auto; min-width: 0; }
.ui .checkin-tile { min-height: 8.25rem; border: 2px solid var(--tile-color, var(--ui-line)); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-ink); display: grid; place-items: center; align-content: center; gap: .5rem; padding: 1rem; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.ui .checkin-tile:hover { border-color: var(--ui-primary); box-shadow: var(--ui-shadow); }
.ui .checkin-tile[aria-pressed="true"] { border-color: var(--ui-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 28%, transparent), var(--ui-shadow); transform: translateY(-2px); }
.ui .checkin-tile-highlight { border-color: var(--ui-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-accent) 38%, transparent); }
.ui .checkin-tile img { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; }
.ui .checkin-symbol { display: grid; width: 4.2rem; height: 4.2rem; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--tile-color, var(--ui-primary)) 16%, var(--ui-surface)); font-size: 1.2rem; font-weight: 900; }
.ui .checkin-tile strong { font-size: 1.15rem; }
.ui .checkin-alphabet { position: sticky; top: 1rem; display: grid; flex: 0 0 3.5rem; gap: .3rem; max-height: calc(100vh - 2rem); overflow-y: auto; scrollbar-width: thin; }
.ui .checkin-alphabet button { min-width: 3.5rem; min-height: 3.5rem; padding: .25rem; border-radius: .8rem; font-size: 1rem; font-weight: 900; }
.ui .checkin-selection { text-align: center; border-color: var(--ui-primary); }
.ui .checkin-selection h2 { margin: .2rem 0; font-size: clamp(2rem, 6vw, 3.4rem); overflow-wrap: anywhere; }
.ui .checkin-selection-actions { justify-content: center; margin-top: 1rem; }
.ui .checkin-selection-actions button { min-height: 3.5rem; min-width: min(100%, 11rem); }
.ui .checkin-session, .ui .checkin-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.ui .checkin-result { min-height: 16rem; flex-direction: column; justify-content: center; text-align: center; }
.ui .checkin-result-text { font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 900; }
.ui .attendance-filters, .ui .absence-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; align-items: end; }
.ui .attendance-session + .attendance-session { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ui-line); }
.ui .tw-sessions button[aria-pressed="true"], .ui .tw-toolbar button[aria-pressed="true"], .ui .absence-thresholds button[aria-pressed="true"] { background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); }
:root[data-brand="hayo"] .ui .tw-sessions button[aria-pressed="true"], :root[data-brand="hayo"] .ui .tw-toolbar button[aria-pressed="true"], :root[data-brand="hayo"] .ui .absence-thresholds button[aria-pressed="true"] { color: #17243b; }
.ui .tw-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.ui .tw-members, .ui .absence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ui .tw-member, .ui .absence-person { min-width: 0; padding: 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); overflow-wrap: anywhere; }
.ui .tw-member-head, .ui .absence-person > header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.ui .tw-form, .ui .absence-follow-up-form, .ui .absence-erasure-form { display: grid; gap: .7rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ui-line); }
.ui .tw-observations { display: grid; gap: .7rem; margin: .7rem 0; padding: 0; list-style: none; }
.ui .tw-observation { padding: .8rem; border-left: 4px solid var(--ui-accent); background: var(--ui-bg); }
.ui .absence-summary-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ui .absence-summary-values p { display: grid; margin: 0; padding: .7rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); }
.ui .absence-summary-values strong { font-size: 1.35rem; }
.ui .absence-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ui .absence-facts dt { color: var(--ui-muted); font-size: .85rem; }
.ui .absence-facts dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .ui .hall-intro, .ui .tw-member-head, .ui .absence-person > header { display: grid; }
  .ui .hall-grid, .ui .tw-members, .ui .absence-list, .ui .attendance-filters, .ui .absence-filters { grid-template-columns: 1fr; }
  .ui .checkin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui .tw-toolbar button, .ui .tw-sessions button { flex: 1 1 100%; }
  .ui .absence-summary-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui .absence-facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ui .checkin-tile { transition: none; }
  .ui .checkin-tile[aria-pressed="true"] { transform: none; }
}