:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17263c;
  background: #f3f6fa;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --page: #f3f6fa;
  --panel: #fff;
  --border: #dce4ee;
  --muted: #66758a;
  --blue: #1759a6;
  --tile: 24px;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 0; min-height: 100vh; background: var(--page); }
button, input, select { font: inherit; }
button { color: inherit; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding: 12px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid #263951;
  background: #12233a;
  color: #f8fafc;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #d8e9ff; color: #154f8f; font-size: 21px; font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: .01em; }
.brand small { margin-top: 3px; color: #bac7d8; font-size: 11px; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.save-status { color: #cbd5e1; font-size: 12px; }
.save-status.status-dirty { color: #ffd480; }
.save-status.status-error { color: #fecaca; }
.app-shell { width: min(1600px, 100%); margin: 0 auto; padding: 22px clamp(14px, 3vw, 34px) 48px; }
.app-shell[hidden], .auth-gate[hidden] { display: none; }
.auth-gate { display: grid; min-height: calc(100vh - 76px); place-items: start center; padding: clamp(24px, 7vh, 72px) 16px; }
.auth-card { width: min(440px, 100%); padding: 26px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: 0 8px 28px rgb(25 45 73 / 8%); }
.auth-card h1 { margin: 0 0 8px; color: #172e4d; font-size: 23px; }
.auth-card > p, .account-identity { color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-form { display: grid; gap: 9px; margin-top: 16px; }
.auth-form label { color: #405873; font-size: 12px; font-weight: 700; }
.auth-form .button { justify-self: start; margin-top: 5px; }
.form-message { min-height: 16px; margin: 0; color: #35683f; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.form-message.status-error { color: #a33232; }
.account-dialog { width: min(560px, calc(100vw - 28px)); max-height: min(86dvh, 820px); padding: 0 18px 20px; overflow: auto; border: 1px solid #d6e0ec; border-radius: 14px; background: #fff; color: #17263c; box-shadow: 0 18px 60px rgb(12 29 50 / 30%); }
.account-dialog::backdrop { background: rgb(12 25 43 / 52%); backdrop-filter: blur(2px); }
.account-dialog .tile-action-heading { margin: 0 -18px; }
.account-dialog h3 { margin: 7px 0 0; color: #203955; font-size: 16px; }
.account-dialog h4 { margin: 12px 0 0; color: #405873; font-size: 13px; }
.account-form { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.user-management { padding-top: 8px; }
.user-management[hidden] { display: none; }
.user-management h2 { margin: 16px 0 0; color: #203955; font-size: 16px; }
.user-list { display: grid; gap: 5px; max-height: 120px; margin: 12px 0; padding: 0 0 0 20px; overflow: auto; color: #53647a; font-size: 12px; }
.user-management > .auth-form + .auth-form { margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--border); }
.header-actions [hidden] { display: none; }

.summary-strip { display: flex; align-items: center; gap: clamp(18px, 4vw, 54px); min-height: 83px; margin-bottom: 20px; padding: 14px 22px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); box-shadow: 0 4px 15px rgb(25 45 73 / 4%); }
.summary-item { display: grid; gap: 3px; min-width: 68px; }
.summary-item span:first-child { color: #172e4d; font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.summary-item span:last-child { color: var(--muted); font-size: 11px; }
.summary-note { margin-left: auto; color: var(--muted); font-size: 12px; }

.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.tab { position: relative; flex: 0 0 auto; padding: 13px 19px; border: 0; background: transparent; color: #64748b; font-size: 13px; font-weight: 650; cursor: pointer; }
.tab:hover { color: #1c4f87; }
.tab.is-active { color: #1759a6; }
.tab.is-active::after { position: absolute; right: 13px; bottom: -1px; left: 13px; height: 3px; border-radius: 3px 3px 0 0; background: #2672c5; content: ""; }
.screen { padding-top: 25px; }
.screen[hidden] { display: none; }
.screen-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.screen-heading h1 { margin: 3px 0 6px; color: #172e4d; font-size: clamp(21px, 3vw, 27px); letter-spacing: -.025em; }
.screen-heading p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.5; }
.eyebrow { color: #3271b3; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.zoom-control { display: flex; align-items: center; gap: 9px; color: #53647a; font-size: 11px; font-weight: 650; white-space: nowrap; }
.zoom-control input { width: clamp(105px, 15vw, 180px); accent-color: #2672c5; }
#zoom-value { width: 39px; color: #52637a; font-variant-numeric: tabular-nums; }
.zoom-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.fit-button { min-height: 32px; padding: 7px 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 17px; margin-bottom: 11px; color: #64748b; font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.swatch { display: inline-block; width: 13px; height: 13px; flex: 0 0 13px; border: 1px solid rgb(14 35 62 / 18%); border-radius: 3px; }
.swatch-empty { background: #fff; }
.swatch-chair { background: #234564; }
.swatch-reserved { background: #2875cd; }
.swatch-usher-chair { background: #d63384; }
.swatch-catcher-chair { background: #218838; }
.swatch-stage { background: #e6aa39; }
.board-frame { overflow: hidden; border: 1px solid #d6e0ec; border-radius: 12px; background: #fff; box-shadow: 0 3px 14px rgb(27 50 78 / 5%); }
.board-scroll { overflow: auto; max-height: min(68vh, 760px); padding: 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.view-board-frame { position: relative; height: min(calc(100dvh - 360px), 760px); min-height: 260px; }
.view-board-frame .board-scroll { width: 100%; height: 100%; max-height: none; }
.view-board-help { margin-bottom: 0; }
.fullscreen-seat-details { position: absolute; z-index: 22; inset: 0 0 auto; min-height: 58px; padding: calc(14px + env(safe-area-inset-top, 0px)) 68px 12px 14px; border-bottom: 1px solid #314864; background: #142740; color: #fff; font-size: 14px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; box-shadow: 0 2px 10px rgb(0 0 0 / 20%); }
.fullscreen-seat-details[hidden] { display: none; }
.fullscreen-close { position: absolute; z-index: 23; top: calc(8px + env(safe-area-inset-top, 0px)); right: 12px; display: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: #142740; font-size: 31px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / 25%); }
.fullscreen-close:not([hidden]) { display: grid; place-items: center; }
.view-board-frame:fullscreen, .view-board-frame.is-fullscreen-fallback { position: fixed; z-index: 1000; inset: 0; width: 100vw; height: 100dvh; max-width: none; min-height: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.view-board-frame:fullscreen .board-scroll, .view-board-frame.is-fullscreen-fallback .board-scroll { height: 100%; max-height: none; padding: calc(72px + env(safe-area-inset-top, 0px)) 0 14px; }
.board { display: grid; grid-template-columns: 30px repeat(40, var(--tile)) 30px; grid-template-rows: 24px repeat(60, var(--tile)) 24px; width: max-content; margin: 0 auto; user-select: none; touch-action: pan-x pan-y; }
.board.compact-coordinates .coordinate, .board.compact-coordinates .seat-coordinate { visibility: hidden; }
.coordinate { display: grid; place-items: center; color: #718096; font-size: 9px; font-variant-numeric: tabular-nums; }
.column-coordinate { font-size: 8px; }
.cell { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; padding: 0; border: 1px solid #d8e0e9; border-radius: 1px; background: #fbfdff; color: #fff; font-size: max(0px, calc(var(--tile) * .3)); line-height: 1; touch-action: pan-x pan-y; transition: filter .12s ease, transform .12s ease, box-shadow .12s ease; }
.cell.chair, .cell.reserved { position: relative; overflow: hidden; border-radius: 30% 30% 18% 18%; box-shadow: inset 0 1px 1px rgb(255 255 255 / 40%), 0 1px 2px rgb(0 0 0 / 22%); }
.cell.chair::before, .cell.reserved::before { position: absolute; top: 20%; left: 19%; width: 62%; height: 63%; border: 1px solid rgb(255 255 255 / 33%); border-radius: 30% 30% 24% 24%; box-shadow: inset 0 1px 2px rgb(255 255 255 / 18%), 0 1px 1px rgb(0 0 0 / 18%); content: ""; }
.cell.chair::after, .cell.reserved::after { position: absolute; top: 7%; left: 25%; width: 50%; height: 20%; border: 1px solid rgb(255 255 255 / 48%); border-radius: 5px 5px 2px 2px; background: rgb(255 255 255 / 17%); content: ""; }
.cell.chair { border-color: #365878; background: linear-gradient(145deg, #345b7c, #1d3d5b 72%); color: #c7e3ff; }
.cell.reserved { border-color: #1760ad; background: linear-gradient(145deg, #438ce0, #2164b0 72%); color: #fff; }
.cell.reserved-usher { border-color: #b42368; background: linear-gradient(145deg, #ee70a8, #c82f77 72%); color: #fff; }
.cell.reserved-catcher { border-color: #16783a; background: linear-gradient(145deg, #51bd72, #248646 72%); color: #fff; }
.cell.reserved-usher.reservation-match { border-color: #ffd4e5; background: linear-gradient(145deg, #f48cbb, #cb3c7e 72%); box-shadow: inset 0 0 0 1px #ffd4e5, 0 0 0 2px #df5b94, 0 0 9px 3px rgb(238 102 163 / 58%); }
.cell.reserved-catcher.reservation-match { border-color: #d0ffe0; background: linear-gradient(145deg, #69d98b, #288d4c 72%); box-shadow: inset 0 0 0 1px #d0ffe0, 0 0 0 2px #49ac69, 0 0 9px 3px rgb(73 199 112 / 55%); }
.seat-coordinate { position: relative; z-index: 1; text-shadow: 0 1px 2px rgb(0 0 0 / 80%); }
.cell.stage { border-color: #e0a033; border-radius: 2px; background: #f5bd55; }
.cell.selected { position: relative; z-index: 1; outline: 3px solid #e59b20; outline-offset: -3px; }
.cell.reservation-match { position: relative; z-index: 3; border-color: #fff2a6; outline: 2px solid #fff36a; outline-offset: -2px; background: linear-gradient(145deg, #f5d36b, #c68a08 72%); color: #211600; filter: saturate(1.2); box-shadow: inset 0 0 0 1px #ffed8a, 0 0 0 2px #e6aa16, 0 0 9px 3px rgb(255 207 42 / 72%); }
.cell.reservation-match::before { border-color: rgb(255 250 210 / 90%); box-shadow: inset 0 1px 2px rgb(255 255 255 / 45%), 0 1px 1px rgb(78 48 0 / 36%); }
.cell.reservation-match::after { border-color: #fff2b0; background: rgb(255 247 197 / 38%); }
.cell.reservation-match .seat-coordinate { text-shadow: 0 1px 2px rgb(255 242 188 / 80%); }
.cell:focus-visible { position: relative; z-index: 2; outline: 2px solid #d7850a; outline-offset: 1px; }
.cell.is-chair { font-weight: 700; }
.staff-markers { position: absolute; z-index: 4; inset: -1px; display: flex; pointer-events: auto; }
.staff-marker { display: grid; width: 100%; height: 100%; flex: 1 1 0; place-items: center; overflow: hidden; border: 1px solid rgb(255 255 255 / 86%); border-radius: 2px; background: #fff; box-shadow: 0 0 2px rgb(15 35 59 / 55%); transition: filter .12s ease, transform .12s ease; }
.staff-marker svg { width: 92%; height: 92%; fill: currentColor; }
.staff-marker.staff-usher { background: #d63384; color: #fff; }
.staff-marker.staff-catcher { background: #218838; color: #fff; }
.staff-marker.is-highlighted { position: relative; z-index: 5; outline: 2px solid #28b9ef; outline-offset: -2px; filter: drop-shadow(0 0 3px #36c9ff) brightness(1.18); }
.cell.has-staff .seat-coordinate { opacity: .65; }
.swatch-person { display: inline-grid; width: 14px; height: 14px; place-items: center; border-radius: 50%; background: #fff; }
.swatch-person::before { width: 10px; height: 10px; border-radius: 50%; background: currentColor; content: ""; clip-path: path("M5 0a2 2 0 1 1 0 4a2 2 0 0 1 0-4M1 10c.2-2.4 1.5-3.7 4-3.7s3.8 1.3 4 3.7H1z"); }
.swatch-usher { color: #d63384; }
.swatch-catcher { color: #218838; }
.board-help { margin: 10px 2px 0; color: #738197; font-size: 11px; line-height: 1.5; }

.tool-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.tool-button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 11px; border: 1px solid #d9e2ec; border-radius: 7px; background: #fff; color: #40516a; font-size: 11px; font-weight: 650; cursor: pointer; }
.tool-button:hover { background: #f3f7fb; }
.tool-button.is-active { border-color: #7eacd9; background: #eaf3fc; color: #1b5894; }
.staff-tool.is-active { border-color: #7eacd9; }
.tool-person-icon { width: 15px; height: 15px; flex: 0 0 15px; fill: currentColor; }
.usher-icon { color: #d63384; }
.catcher-icon { color: #218838; }
.staff-name-field { display: grid; flex: 1 1 205px; gap: 5px; min-width: min(100%, 205px); color: #4b5c71; font-size: 10px; font-weight: 650; }
.staff-name-field .text-input { min-height: 34px; }
.tool-instructions { color: #63748a; font-size: 11px; line-height: 1.5; }
.tool-bar .tool-instructions { margin-left: auto; }
.reservation-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 13px; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.reservation-field { display: grid; gap: 7px; min-width: 220px; color: #4b5c71; font-size: 11px; font-weight: 650; }
.text-input { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #cbd7e5; border-radius: 7px; outline: none; background: #fff; color: #24364d; font-size: 12px; }
.text-input:focus { border-color: #5493d1; box-shadow: 0 0 0 3px rgb(59 130 246 / 12%); }
.text-input::placeholder { color: #9aa7b7; }
.reservation-actions, .report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reserve-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); align-items: stretch; gap: 14px; }
.reserve-layout > .board-frame { min-width: 0; }
.reserve-layout .board-scroll { max-height: min(72vh, 820px); }
.button { min-height: 38px; padding: 9px 13px; border: 0; border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.button-primary { background: #1f67ad; color: #fff; }
.button-primary:hover:not(:disabled) { background: #175691; }
.button-secondary { border: 1px solid #cbd9e8; background: #f4f8fc; color: #31577e; }
.button-secondary:hover:not(:disabled) { background: #e8f1fa; }
.button:disabled { opacity: .48; cursor: not-allowed; }
.text-button { min-height: 34px; padding: 6px 8px; border: 0; background: transparent; color: #3973ad; font-size: 11px; cursor: pointer; }
.text-button:disabled { color: #a0acba; cursor: not-allowed; }
.roster-section { display: flex; min-width: 0; min-height: 0; max-height: min(72vh, 820px); flex-direction: column; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: #fff; }
.roster-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.roster-title { display: flex; align-items: center; gap: 12px; }
.roster-heading h2 { margin: 0; color: #203955; font-size: 15px; }
.roster-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.count-pill { display: inline-grid; min-width: 27px; height: 27px; place-items: center; padding: 0 7px; border-radius: 99px; background: #eaf3fc; color: #2566a7; font-size: 11px; font-weight: 750; }
.roster-list { display: grid; gap: 8px; margin: 0; padding: 0 4px 0 0; list-style: none; }
#roster-content { min-height: 0; overflow: auto; }
#roster-content[hidden] { display: none; }
.roster-item { padding: 11px; border: 1px solid #e0e8f0; border-radius: 8px; background: #f9fbfd; }
.roster-item { cursor: pointer; }
.roster-item:focus-visible { outline: 2px solid #2672c5; outline-offset: 2px; }
.roster-item.is-highlighted { border-color: #e2a628; background: #fff6df; box-shadow: 0 0 0 2px rgb(226 166 40 / 22%); }
.roster-item-heading { display: flex; justify-content: space-between; gap: 8px; color: #263d57; font-size: 12px; }
.roster-item-heading span { color: #3272ae; font-size: 10px; white-space: nowrap; }
.roster-item p { margin: 8px 0 0; color: #59718d; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.empty-state { color: var(--muted); font-size: 11px; }
.report-controls { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 15px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.report-preview { margin-top: 18px; padding: 22px; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: 0 3px 14px rgb(27 50 78 / 4%); }
.report-preview h2 { margin: 0; color: #203955; font-size: 19px; }
.report-date { margin: 6px 0 18px; color: #718096; font-size: 10px; }
.report-stats { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 10px; }
.report-stat { display: grid; gap: 5px; padding: 15px; border: 1px solid #e1eaf3; border-radius: 8px; background: #f7fafe; }
.report-stat strong { color: #1e5e9e; font-size: 23px; }
.report-stat span { color: #64748b; font-size: 11px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.report-table th, .report-table td { padding: 9px 11px; border-bottom: 1px solid #e4eaf1; text-align: left; }
.report-table th { background: #f3f7fb; color: #425770; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.report-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.report-plan-page { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid #dce4ee; }
.report-plan-page > h3 { margin: 0 0 8px; color: #203955; font-size: 14px; }
.report-plan-grid { display: grid; grid-template-columns: 20px repeat(40, minmax(0, 1fr)) 20px; grid-template-rows: 15px repeat(var(--report-row-count), 8px); width: 100%; min-width: 720px; overflow: auto; }
.report-plan-coordinate { display: grid; place-items: center; color: #68788d; font-size: 7px; }
.report-plan-cell { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border: 1px solid #d8e0e9; background: #fbfdff; color: #fff; font-size: 6px; line-height: 1; white-space: nowrap; }
.report-plan-cell.chair, .report-plan-cell.reserved { border-radius: 24% 24% 12% 12%; box-shadow: inset 0 1px 1px rgb(255 255 255 / 38%), 0 1px 1px rgb(0 0 0 / 22%); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report-plan-cell.chair::before, .report-plan-cell.reserved::before { position: absolute; top: 20%; left: 19%; width: 62%; height: 63%; border: 1px solid rgb(255 255 255 / 42%); border-radius: 28% 28% 22% 22%; content: ""; }
.report-plan-cell.chair::after, .report-plan-cell.reserved::after { position: absolute; top: 7%; left: 25%; width: 50%; height: 20%; border: 1px solid rgb(255 255 255 / 50%); border-radius: 3px 3px 1px 1px; background: rgb(255 255 255 / 18%); content: ""; }
.report-plan-cell.chair { border-color: #365878; background: linear-gradient(145deg, #345b7c, #1d3d5b 72%); color: #fff; }
.report-plan-cell.reserved { border-color: #1760ad; background: linear-gradient(145deg, #438ce0, #2164b0 72%); }
.report-plan-cell.reserved-usher { border-color: #b42368; background: linear-gradient(145deg, #ee70a8, #c82f77 72%); }
.report-plan-cell.reserved-catcher { border-color: #16783a; background: linear-gradient(145deg, #51bd72, #248646 72%); }
.report-plan-reservation-number { position: relative; z-index: 1; font-size: .8em; font-weight: 900; text-shadow: 0 1px 1px rgb(0 0 0 / 70%); }
.report-plan-cell.stage { border-color: #e0a033; border-radius: 2px; background: #f5bd55; }
.report-plan-cell.empty { border-color: #e5eaf0; background: #fbfdff; }
.report-plan-staff-markers { position: absolute; z-index: 2; inset: 0; display: flex; gap: 1px; }
.report-plan-staff { position: relative; display: inline-grid; min-width: 0; height: 100%; flex: 1 1 0; place-items: center; overflow: hidden; border: 1px solid #fff; border-radius: 2px; background: #fff; }
.report-plan-staff svg { width: 92%; height: 92%; fill: currentColor; }
.report-plan-staff.staff-usher { background: #d63384; color: #fff; }
.report-plan-staff.staff-catcher { background: #218838; color: #fff; }
.report-plan-staff small { position: absolute; top: 0; right: 0; padding: 1px; border-radius: 0 0 0 2px; background: #fff; color: #142740; font-size: 4px; font-weight: 800; }
.report-plan-references { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 7px; }
.report-plan-references h4 { margin: 5px 0 0; color: #203955; font-size: 10px; }
.report-reference-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 12px; margin: 0; padding-left: 0; list-style: none; color: #344b64; font-size: 9px; line-height: 1.3; }
.report-reference-list li { min-width: 0; overflow-wrap: anywhere; }
.report-reference-number { font-weight: 900; }
.seat-tooltip { position: fixed; z-index: 200; max-width: min(280px, calc(100vw - 16px)); padding: 8px 11px; border: 1px solid #324c6d; border-radius: 8px; background: #142740; box-shadow: 0 5px 16px rgb(15 35 59 / 26%); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; pointer-events: none; }
.seat-tooltip::after { position: absolute; left: 50%; width: 8px; height: 8px; border: inherit; background: #142740; content: ""; transform: translateX(-50%) rotate(45deg); }
.seat-tooltip.tooltip-above::after { bottom: -5px; border-top: 0; border-left: 0; }
.seat-tooltip.tooltip-below::after { top: -5px; border-right: 0; border-bottom: 0; }
.seat-tooltip[hidden] { display: none; }
.selection-actions { position: sticky; z-index: 5; bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid #c9d9ea; border-radius: 10px; background: rgb(255 255 255 / 96%); box-shadow: 0 4px 16px rgb(25 45 73 / 14%); }
.selection-actions[hidden] { display: none; }
.selection-actions .tool-instructions { flex: 1 1 180px; margin: 0; color: #405873; }
.tile-action-dialog { width: min(440px, calc(100vw - 28px)); max-height: min(80dvh, 680px); padding: 0; overflow: auto; border: 1px solid #d6e0ec; border-radius: 14px; background: #fff; color: #17263c; box-shadow: 0 18px 60px rgb(12 29 50 / 30%); }
.tile-action-dialog::backdrop { background: rgb(12 25 43 / 52%); backdrop-filter: blur(2px); }
.tile-action-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px 12px; border-bottom: 1px solid #e4eaf1; background: #fff; }
.tile-action-heading h2 { margin: 0; color: #203955; font-size: 17px; }
.dialog-close { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: #eff4f9; color: #344b64; font-size: 25px; line-height: 1; cursor: pointer; }
.tile-action-description { margin: 0; padding: 12px 18px 4px; color: #66758a; font-size: 12px; line-height: 1.45; }
.tile-action-options { display: grid; gap: 8px; padding: 12px 18px 18px; }
.tile-action-option { min-height: 46px; padding: 11px 13px; border: 1px solid #dce5ef; border-radius: 9px; background: #f8fbfe; color: #213c59; text-align: left; font-size: 14px; font-weight: 650; cursor: pointer; }
.tile-action-option:hover, .tile-action-option:focus-visible { border-color: #71a6db; background: #eef6ff; outline: none; }
.tile-action-option:disabled { opacity: .45; cursor: not-allowed; }
.tile-action-option.tile-action-more { border-color: #b8d4ed; background: #edf6ff; color: #1759a6; }
.tile-action-name-form { display: grid; gap: 10px; padding: 12px 18px 18px; }
.tile-action-name-form[hidden] { display: none; }
.tile-action-name-form label { color: #405873; font-size: 12px; font-weight: 700; }
.tile-action-name-form .text-input { width: 100%; min-height: 44px; }
.dialog-form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.tile-action-dialog[open] { animation: dialog-enter .14s ease-out; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 10px; padding: 13px 16px; }
  .header-actions { width: 100%; justify-content: space-between; }
  .summary-strip { flex-wrap: wrap; gap: 14px 23px; padding: 13px 15px; }
  .summary-note { flex-basis: 100%; margin: 0; }
  .screen-heading { align-items: flex-start; flex-direction: column; }
  .zoom-controls { width: 100%; justify-content: space-between; }
  .zoom-control { align-self: flex-start; }
  .zoom-control input { width: clamp(96px, 31vw, 160px); }
  .tool-bar .tool-instructions { flex-basis: 100%; margin-left: 0; }
  .reservation-tools { align-items: stretch; flex-direction: column; }
  .reservation-field { min-width: 100%; }
  .report-controls { align-items: stretch; flex-direction: column; }
  .report-stats { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
  .board-scroll { max-height: 65vh; padding: 8px; }
  .board { margin: 0; }
  .roster-heading { align-items: flex-start; }
  .roster-title { align-items: flex-start; }
  .reserve-layout { grid-template-columns: minmax(0, 1fr); }
  .reserve-layout .board-scroll { max-height: 58vh; }
  .roster-section { max-height: 40vh; }
  .report-preview { padding: 13px; }
  .report-plan-grid { grid-template-columns: 14px repeat(40, minmax(0, 1fr)) 14px; grid-template-rows: 12px repeat(var(--report-row-count), 6px); }
  .report-reference-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-name-field { flex-basis: 100%; }
  .view-board-frame { height: min(calc(100dvh - 450px), 760px); }
  .fullscreen-seat-details { min-height: 56px; padding-right: 64px; font-size: 13px; }
  .view-board-frame:fullscreen .fullscreen-seat-details,
  .view-board-frame.is-fullscreen-fallback .fullscreen-seat-details { top: calc(20px + env(safe-area-inset-top, 0px)); }
  .view-board-frame:fullscreen .fullscreen-close,
  .view-board-frame.is-fullscreen-fallback .fullscreen-close { top: calc(28px + env(safe-area-inset-top, 0px)); }
  .view-board-frame:fullscreen .board-scroll,
  .view-board-frame.is-fullscreen-fallback .board-scroll { padding-top: calc(92px + env(safe-area-inset-top, 0px)); }
  .selection-actions { bottom: 6px; padding: 10px; }
}

@media (max-width: 480px) {
  .topbar { padding-right: 12px; padding-left: 12px; }
  .app-shell { padding-right: 10px; padding-left: 10px; }
  .tab { padding-right: 12px; padding-left: 12px; }
  .summary-strip { gap: 11px 15px; }
  .summary-item { min-width: 57px; }
  .summary-item span:first-child { font-size: 19px; }
  .board-scroll { padding: 6px; }
  .report-preview { padding: 11px; }
  .report-table { font-size: 10px; }
  .report-table th, .report-table td { padding: 7px 6px; }
  .view-board-frame { height: min(calc(100dvh - 450px), 760px); }
  .tile-action-dialog { width: 100%; max-width: none; max-height: min(78dvh, 680px); margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 16px 16px 0 0; }
}

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  @page chapel-floorplan { size: A4 landscape; margin: 8mm; }
  body { min-width: 0; background: #fff; color: #111; }
  .topbar, .summary-strip, .tabs, .screen-heading, .legend, .board-help,
  .tool-bar, .reservation-tools, .roster-section, .report-controls, .seat-tooltip { display: none !important; }
  .app-shell { width: 100%; padding: 0; }
  .screen { padding: 0; }
  body.printing-report [data-screen-panel]:not([data-screen-panel="reports"]) { display: none !important; }
  body.printing-plan [data-screen-panel]:not([data-screen-panel="view"]) { display: none !important; }
  body.printing-report #report-preview { margin: 0; padding: 0; border: 0; box-shadow: none; }
  body.printing-floorplan-report #report-preview > h2,
  body.printing-floorplan-report #report-preview > .report-date { display: none; }
  body.printing-floorplan-report .report-plan-page { page: chapel-floorplan; margin: 0; padding: 0; border: 0; break-inside: auto; page-break-inside: auto; overflow: visible; }
  body.printing-floorplan-report .report-plan-front { break-after: page; page-break-after: always; }
  body.printing-floorplan-report .report-plan-rear { break-before: page; page-break-before: always; }
  body.printing-floorplan-report .report-plan-page > h3 { margin: 0 0 2mm; font-size: 9pt; }
  body.printing-floorplan-report .report-plan-grid { grid-template-columns: 7mm repeat(40, minmax(0, 1fr)) 7mm; grid-template-rows: 6mm repeat(var(--report-row-count), 3.8mm); min-width: 0; overflow: visible; }
  body.printing-floorplan-report .report-plan-coordinate { font-size: 7pt; }
  body.printing-floorplan-report .report-plan-cell { font-size: 4.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-floorplan-report .report-plan-reservation-number { font-size: 6pt; }
  body.printing-combined-floorplan .report-plan-reservation-number { z-index: 3; padding: .3mm .5mm; border-radius: .5mm; background: #142740; color: #fff; font-size: 8pt; font-weight: 900; line-height: 1; text-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-floorplan-report .report-plan-references { gap: 1mm; margin-top: 2mm; }
  body.printing-floorplan-report .report-plan-references h4 { margin-top: 1mm; font-size: 7pt; }
  body.printing-floorplan-report .report-reference-list { display: block; columns: 4; column-gap: 3mm; font-size: 7pt; line-height: 1.15; }
  body.printing-floorplan-report .report-reference-list li { break-inside: avoid; margin-bottom: .7mm; }
  body.printing-floorplan-report .report-plan-staff { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-floorplan-report .report-plan-staff svg { width: 90%; height: 90%; }
  body.printing-floorplan-report .report-plan-staff small { font-size: 4.5pt; }
  body.printing-plan #screen-view { display: block !important; }
  body.printing-plan #view-board-mount { display: block; }
  .board-frame { overflow: visible; border: 0; box-shadow: none; }
  .view-board-frame { height: auto; min-height: 0; }
  .board-scroll { max-height: none; overflow: visible; padding: 0; }
  .board { --tile: 12px; margin: 0; }
  .cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .board.compact-coordinates .coordinate, .board.compact-coordinates .seat-coordinate { visibility: visible; }
  .report-table { font-size: 10px; }
  .report-table tr { break-inside: avoid; }
}