[hidden] { display: none !important; }
:root {
  --ink: #182230;
  --muted: #667085;
  --line: #e2e7ec;
  --paper: #ffffff;
  --canvas: #f4f6f8;
  --navy: #101828;
  --coral: #0f766e;
  --coral-soft: #e8f3f1;
  --blue: #5367a6;
  --blue-soft: #eef1f8;
  --green: #18805f;
  --green-soft: #eaf5f1;
  --shadow: 0 14px 34px rgba(24, 34, 48, .08);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0, 1fr); }
.sidebar { background: var(--navy); color: white; padding: 30px 20px 22px; display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 11px; color: white; text-decoration: none; font-size: 23px; font-weight: 760; letter-spacing: -.7px; padding: 0 10px 36px; }
.brand-mark { display: inline-flex; width: 30px; height: 30px; background: var(--coral); border-radius: 9px; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 7px; }
.brand-mark span { width: 5px; height: 12px; border-radius: 4px; background: white; }
.brand-mark span:last-child { height: 8px; }
.primary-nav { display: grid; gap: 8px; }
.nav-item { border: 0; background: transparent; color: #aeb8cb; display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 12px; text-align: left; font-size: 14px; font-weight: 650; transition: .2s ease; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: white; background: rgba(255,255,255,.11); box-shadow: inset 3px 0 var(--coral); }
.sidebar-bottom { margin-top: auto; }
.mini-profile { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #34435f; font-size: 12px; font-weight: 750; }
.mini-profile strong, .mini-profile small { display: block; }
.mini-profile strong { font-size: 13px; }.mini-profile small { color: #8f9bb0; font-size: 11px; margin-top: 2px; }
.icon-only { background: none; border: 0; color: #8f9bb0; }

.main-content { min-width: 0; padding: 32px 40px 42px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.eyebrow { color: var(--coral); text-transform: uppercase; letter-spacing: 1.35px; font-size: 10px; font-weight: 800; margin: 0 0 6px; }
h1 { font-size: clamp(25px, 3vw, 34px); line-height: 1.15; letter-spacing: -1.2px; margin: 0; }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
.today-chip { border: 1px solid var(--line); color: #58667b; background: white; border-radius: 12px; padding: 11px 14px; font-size: 13px; }
.status-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--green); }
.primary-button, .secondary-button { border: 0; border-radius: 12px; padding: 12px 17px; font-weight: 730; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary-button { color: white; background: var(--coral); box-shadow: 0 7px 18px rgba(15,118,110,.18); }
.primary-button:hover { background: #0b625c; transform: translateY(-1px); }
.primary-button svg { width: 17px; height: 17px; }
.secondary-button { background: white; color: var(--ink); border: 1px solid var(--line); }

.view { display: none; animation: enter .25s ease; }
.view.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.calendar-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 14px rgba(23,34,56,.035); }
.calendar-booking-hint { color: var(--muted); font-size: 11px; }.calendar-reserve { min-height: 38px; padding: 8px 13px; font-size: 12px; margin-left: auto; }
.day-agenda { padding: 26px; }.agenda-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 23px; }.agenda-heading h2 { margin: 0 0 6px; font-size: 22px; }.agenda-heading p { margin: 0; font-size: 13px; color: var(--muted); }.agenda-list { display: grid; gap: 12px; margin-bottom: 24px; }.agenda-meeting { display: grid; grid-template-columns: 75px 98px minmax(0,1fr) 14px; gap: 18px; align-items: center; width: 100%; padding: 15px; text-align: left; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }.agenda-meeting:hover { border-color: #a4c8c1; background: #fbfdfc; }.agenda-meeting time { display: grid; gap: 5px; }.agenda-meeting time strong { font-size: 19px; }.agenda-meeting time span { font-size: 12px; color: var(--muted); }.agenda-meeting img { width: 98px; height: 72px; border-radius: 9px; object-fit: cover; }.agenda-meeting-copy { display: grid; gap: 7px; min-width: 0; }.agenda-meeting-copy > strong { font-size: 16px; }.agenda-meeting-copy > span { font-size: 12px; color: var(--muted); }.agenda-meeting-copy small { font-size: 11px; color: #0b625c; }.agenda-empty { display: grid; justify-items: center; gap: 10px; padding: 45px 16px; border: 1px dashed var(--line); border-radius: 12px; }.agenda-empty span { color: var(--muted); font-size: 12px; }.more-events { border: 0; padding: 4px 5px; background: transparent; color: #0b625c; text-align: left; cursor: pointer; }.more-events:hover { text-decoration: underline; }
.selected-room-card { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 12px; border: 1px solid #bad8d1; border-radius: 12px; background: #f7fbf9; }.selected-room-card > img { width: 100px; height: 82px; object-fit: cover; border-radius: 8px; }.selected-room-card > div { display: grid; align-content: center; gap: 6px; }.selected-room-card > div small { color: #0b625c; font-size: 10px; }.selected-room-card > div strong { font-size: 16px; }.selected-room-card > div span { font-size: 11px !important; color: var(--muted); }.selected-room-card > button { grid-column: 1/-1; border: 1px solid #bfd5cf; border-radius: 7px; background: white; color: #0b625c; padding: 8px; font-size: 12px; cursor: pointer; }.selected-room-card details { grid-column: 1/-1; font-size: 11px; color: var(--muted); }.selected-room-card summary { cursor: pointer; color: #0b625c; padding: 3px 0; }.selected-room-card details p { line-height: 1.7; margin: 7px 0; }.booking-room-picker { display: grid; gap: 8px; margin-top: 8px; }.room-picker-option { display: grid; grid-template-columns: 86px minmax(0,1fr); align-items: center; gap: 11px; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px; background: #fff; text-align: left; cursor: pointer; }.room-picker-option:hover,.room-picker-option.selected { border-color: #76afa3; background: #f6fbf8; }.room-picker-option img { width: 86px; height: 78px; border-radius: 7px; object-fit: cover; }.room-picker-option > span { display: grid; gap: 4px; }.room-picker-option strong { font-size: 13px; }.room-picker-option small { color: var(--muted); font-size: 10px; line-height: 1.5; }.room-picker-option b { font-size: 10px; line-height: 1.5; }.slot-available { color: #187052; }.slot-unavailable { color: #976221; }.room-picker-prompt { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
@media(max-width:680px) { .day-agenda { padding: 16px; }.agenda-heading { align-items: flex-start; }.agenda-heading h2 { font-size: 18px; }.agenda-meeting { grid-template-columns: 60px minmax(0,1fr) 10px; gap: 12px; padding: 12px; }.agenda-meeting img { display: none; }.agenda-meeting time strong { font-size: 16px; }.agenda-meeting-copy > strong { font-size: 14px; }.agenda-empty { text-align: center; }.calendar-reserve { width: 100%; } }
.calendar-surface-toggle { display: flex; gap: 3px; padding: 3px; border: 1px solid #dfe3ea; border-radius: 10px; background: #f4f6f7; }.calendar-surface-toggle button { border: 0; border-radius: 7px; padding: 7px 11px; color: #657286; background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }.calendar-surface-toggle button.active { color: #0b625c; background: #fff; box-shadow: 0 1px 4px rgba(23,34,56,.1); }
.week-switcher { display: flex; align-items: center; gap: 7px; min-width: 220px; }
.week-switcher strong { font-size: 18px; margin: 0 5px; letter-spacing: -.2px; }
.icon-button { width: 31px; height: 31px; border-radius: 9px; border: 1px solid var(--line); background: white; color: #6c7a90; font-size: 23px; line-height: 1; }
.room-filters { display: flex; align-items: center; gap: 7px; }
.filter-chip { border: 1px solid var(--line); background: white; color: #66758a; border-radius: 100px; padding: 8px 12px; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.filter-chip.active { color: var(--ink); background: #e9edf4; border-color: #e9edf4; font-weight: 700; }
.room-color { width: 7px; height: 7px; border-radius: 50%; }.room-color.coral { background: var(--coral); }.room-color.blue { background: var(--blue); }.room-color.green { background: var(--green); }
.view-toggle { margin-left: auto; display: flex; background: #e9edf2; padding: 3px; border-radius: 9px; }
.view-toggle button { min-width: 40px; border: 0; background: none; color: #718096; padding: 7px 12px; border-radius: 7px; font-size: 14px; }
.view-toggle button.active { background: white; color: var(--ink); box-shadow: 0 1px 4px rgba(23,34,56,.09); font-weight: 700; }

.calendar-card { --calendar-days: 5; background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 26px rgba(23,34,56,.045); }
#calendar-head[hidden], .calendar-scroll[hidden], .month-view[hidden], .room-schedule-view[hidden], .calendar-toolbar [hidden] { display: none !important; }
.calendar-head { height: 76px; display: grid; grid-template-columns: 72px repeat(5, minmax(130px, 1fr)); border-bottom: 1px solid var(--line); }
.timezone { display: grid; place-items: center; color: #a1aabb; font-size: 9px; border-right: 1px solid var(--line); }
.day { display: flex; justify-content: center; align-items: center; gap: 9px; color: #8b97a8; border-right: 1px solid var(--line); }
.day span { font-size: 13px; }.day strong { display: grid; place-items: center; width: 36px; height: 36px; font-size: 18px; }
.day.current { color: var(--coral); font-weight: 700; }.day.current strong { background: var(--coral); color: white; border-radius: 10px; box-shadow: 0 5px 12px rgba(15,118,110,.2); }
.calendar-scroll { height: min(630px, calc(100vh - 235px)); min-height: 450px; overflow: auto; display: grid; grid-template-columns: 72px minmax(650px,1fr); position: relative; }
.time-labels { position: relative; height: 648px; border-right: 1px solid var(--line); background: #fbfbfc; }
.time-labels span { position: absolute; top: calc(var(--row) * 72px + 10px); right: 16px; font-size: 10px; color: #9aa5b5; }
.calendar-grid { height: 648px; position: relative; cursor: crosshair; background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px), linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: 100% 72px, calc(100% / var(--calendar-days)) 100%; }
.calendar-grid .event { cursor: pointer; }
.event { position: absolute; width: calc(100% / var(--calendar-days) / var(--lanes, 1) - 8px); left: calc(var(--day) * 100% / var(--calendar-days) + var(--lane, 0) * 100% / var(--calendar-days) / var(--lanes, 1) + 4px); top: calc(var(--start) * 72px + 5px); height: calc(var(--duration) * 72px - 9px); min-height: 36px; border: 0; border-radius: 9px; padding: 8px 9px; text-align: left; overflow: hidden; transition: .18s ease; }
.event:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 8px 18px rgba(23,34,56,.12); z-index: 3; }
.event strong, .event small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event strong { font-size: 11px; color: var(--ink); }.event small { font-size: 9px; margin-top: 4px; opacity: .68; }
.event.room531 { background: var(--coral-soft); border-left: 3px solid var(--coral); }.event.room532 { background: var(--blue-soft); border-left: 3px solid var(--blue); }.event.room541 { background: var(--green-soft); border-left: 3px solid var(--green); }
.event.mine strong::after { content: " · 我"; color: var(--muted); font-weight: 600; }.event.past { opacity: 1; }.event.just-saved { animation: just-saved 1.6s ease 2; }
@keyframes just-saved { 40% { box-shadow: 0 0 0 4px rgba(15,118,110,.28); } }
.month-view { padding: 12px; }.month-view[hidden] { display: none; }.month-instruction { margin: 0 0 12px; color: var(--muted); font-size: 11px; }.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }.month-weekdays { color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; padding-bottom: 8px; }.month-cell { min-height: 112px; padding: 8px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: #fff; cursor: pointer; }.month-cell:hover { background: #f8fbfa; }.month-cell:nth-child(7n) { border-right: 0; }.month-cell.outside-month { background: #fafbfc; }.month-cell.outside-month .month-date { color: #b7bfca; }.month-cell.today { background: #fbfdfc; }.month-date { display: inline-grid; place-items: center; width: 27px; height: 27px; border: 0; border-radius: 50%; color: #59677a; background: transparent; font-size: 12px; font-weight: 650; cursor: pointer; }.month-date:hover { background: #eef3f2; }.month-date:focus-visible { outline: 2px solid #8ebdb7; }.month-cell.today .month-date { color: white; background: var(--coral); }.month-events { display: grid; gap: 4px; margin-top: 4px; }.month-event { overflow: hidden; border: 0; border-left: 2px solid; border-radius: 5px; padding: 4px 5px; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; cursor: pointer; }.month-event time { font-size: 9px; font-weight: 750; }.month-event.past { opacity: 1; }.month-event.room531 { color: #75453e; background: var(--coral-soft); border-color: var(--coral); }.month-event.room532 { color: #3d5e83; background: var(--blue-soft); border-color: var(--blue); }.month-event.room541 { color: #326e61; background: var(--green-soft); border-color: var(--green); }.more-events { color: var(--muted); font-size: 9px; padding-left: 5px; }
.room-schedule-view { overflow-x: auto; padding: 10px 12px 12px; }.room-schedule-view[hidden] { display: none; }.resource-schedule { min-width: 980px; }.resource-row { display: grid; grid-template-columns: 116px minmax(860px,1fr); min-height: 72px; border-top: 1px solid var(--line); }.resource-row-label { display: grid; align-content: center; gap: 4px; padding: 9px 12px; border-right: 1px solid var(--line); background: #fbfcfc; }.resource-row-label strong { color: var(--ink); font-size: 13px; }.resource-row-label small { color: var(--muted); font-size: 10px; }.resource-time-track,.resource-track { display: grid; grid-template-columns: repeat(36,minmax(20px,1fr)); position: relative; }.resource-time-track { min-height: 38px; align-items: center; }.resource-time-track span { height: 100%; display: flex; align-items: center; padding-left: 7px; border-left: 1px solid var(--line); color: #6b7789; font-size: 10px; font-weight: 700; }.resource-track { min-height: 72px; align-items: stretch; background-image: linear-gradient(to right,transparent calc(100% - 1px),var(--line) calc(100% - 1px)); background-size: calc(100% / 9) 100%; }.resource-free,.resource-event { grid-row: 1; align-self: stretch; min-width: 0; overflow: hidden; margin: 7px 1px; border-radius: 7px; text-align: left; }.resource-free { display: grid; place-items: center; position: relative; z-index: 1; margin: 0; padding: 0 2px; border: 0; border-right: 1px solid #edf0f2; border-radius: 0; color: #0b625c; background: white; cursor: pointer; }.resource-free:hover, .resource-free:focus-visible { background: #f0f5f4; box-shadow: inset 0 0 0 1px #9abcb4; outline: 0; }.resource-free span { opacity: 0; white-space: nowrap; font-size: 10px; }.resource-free:hover span,.resource-free:focus-visible span { opacity: 1; }.resource-free strong { font-size: 11px; }.resource-free small { font-size: 9px; white-space: nowrap; }.resource-event { position: relative; z-index: 2; display: grid; align-content: center; gap: 3px; padding: 5px 8px; border: 0; border-left: 3px solid; cursor: pointer; }.resource-event strong,.resource-event small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.resource-event strong { font-size: 11px; }.resource-event small { font-size: 9px; opacity: .75; }.resource-event.room531 { color: #75453e; background: var(--coral-soft); border-color: var(--coral); }.resource-event.room532 { color: #3d5e83; background: var(--blue-soft); border-color: var(--blue); }.resource-event.room541 { color: #326e61; background: var(--green-soft); border-color: var(--green); }.resource-event.past { opacity: 1; }.resource-closed { grid-template-columns: 1fr; align-items: center; padding-left: 12px; color: var(--muted); background: repeating-linear-gradient(135deg,#f3f4f6 0 5px,#e9edf0 5px 6px); font-size: 11px; }.resource-schedule-note { display: flex; align-items: center; gap: 7px; margin: 12px 4px 0; color: var(--muted); font-size: 11px; }.resource-schedule-note span { width: 9px; height: 9px; border-radius: 3px; background: #d9eee0; border: 1px solid #cde5da; }
.resource-unavailable { grid-row: 1; z-index: 0; min-height: 72px; background: repeating-linear-gradient(135deg,#f3f4f6 0 5px,#e9edf0 5px 6px); pointer-events: none; }.resource-time-track span { position: relative; }.resource-time-track span small { position: absolute; left: 50%; color: #9ba5b2; font-size: 9px; font-weight: 500; }

.section-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: 24px 26px; border: 1px solid #e4e9eb; border-radius: 17px; background: linear-gradient(112deg,#f5faf8 0%,#fff 72%); }
.section-intro h2 { margin: 4px 0 7px; font-size: 25px; letter-spacing: -.45px; }.section-intro p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }.rooms-eyebrow { color: #0b625c; font-size: 11px; font-weight: 800; letter-spacing: .6px; }.rooms-start-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }.rooms-start-actions .primary-button { min-height: 46px; padding: 0 20px; border-radius: 11px; }.rooms-start-actions .primary-button span { font-size: 18px; }.text-action { border: 0; padding: 8px 2px; color: #0b625c; background: transparent; font-size: 13px; font-weight: 700; white-space: nowrap; }.text-action:hover { color: var(--coral); }
.search-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 14px; }.search-panel-heading strong,.search-panel-heading > div > span:not(.step-label) { display: block; }.search-panel-heading strong { color: var(--ink); font-size: 15px; }.search-panel-heading > div > span:not(.step-label) { margin-top: 4px; color: var(--muted); font-size: 12px; }.step-label { display: inline-flex; align-items: center; margin-bottom: 6px; color: #0b625c; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.search-box { width: min(280px, 100%); background: white; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; }
.search-box svg { width: 17px; color: #9ba6b7; }.search-box input { border: 0; outline: 0; width: 100%; color: var(--ink); }
.overview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 13px 0 14px; }
.overview-toolbar .result-count { margin: 0; }
.overview-toolbar .result-count { color: #3f4d63; font-size: 13px; font-weight: 700; }
.result-heading .step-label { margin: 0 0 3px; }.result-heading > strong { color: var(--ink); font-size: 16px; }.result-heading .result-count { margin: 7px 0 0; color: #425366; font-size: 15px; font-weight: 650; }
.search-prompt { display: grid; justify-items: center; gap: 8px; margin-top: 18px; padding: 40px 18px; border: 1px dashed #cfd9d8; border-radius: 14px; color: var(--muted); background: #fbfdfc; text-align: center; }.search-prompt[hidden], #room-results[hidden] { display: none; }.search-prompt strong { color: var(--ink); font-size: 15px; }.search-prompt > span:last-child { font-size: 12px; line-height: 1.6; }.prompt-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #0b625c; background: var(--coral-soft); font-size: 28px; }
.view-mode-group { display: flex; align-items: center; gap: 9px; }.view-mode-group > span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.display-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #dfe3ea; border-radius: 12px; background: white; box-shadow: 0 4px 14px rgba(23,34,56,.06); }
.display-switch button { border: 0; background: transparent; color: var(--muted); border-radius: 8px; padding: 9px 13px; font-size: 11px; }
.display-switch button b { margin-right: 4px; font-size: 13px; }
.display-switch button.active { color: white; background: var(--navy); box-shadow: 0 4px 10px rgba(23,35,60,.2); font-weight: 750; }
.filter-panel { display: grid; grid-template-columns: minmax(190px,1.4fr) minmax(185px,1.1fr) minmax(125px,.75fr) minmax(145px,.85fr) auto; gap: 10px; align-items: end; background: white; border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 13px; }
.filter-panel .search-box { width: 100%; height: 43px; }
.compact-field { display: grid; gap: 5px; }
.compact-field span { color: var(--muted); font-size: 9px; font-weight: 750; }
.compact-field input, .compact-field select { min-width: 0; width: 100%; height: 43px; color: var(--ink); background: #f8f9fb; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font-size: 11px; }
.clear-filter { height: 43px; border: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; }
.result-count { color: var(--muted); font-size: 11px; margin: 0 0 12px; }
.calendar-checkin { display: grid; grid-template-columns: 64px 1fr minmax(220px,1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 16px; color: var(--ink); background: white; border: 1px solid var(--line); border-left: 3px solid #d39b35; border-radius: 12px; box-shadow: 0 5px 16px rgba(24,34,48,.04); }
.checkin-time { display: grid; text-align: center; border-right: 1px solid var(--line); }.checkin-time b { font-size: 18px; }.checkin-time span { color: var(--muted); font-size: 8px; }
.checkin-copy small, .checkin-copy strong, .checkin-copy span { display: block; }.checkin-copy small { color: #a36b18; font-size: 8px; font-weight: 750; margin-bottom: 4px; }.checkin-copy strong { font-size: 13px; }.checkin-copy span { color: var(--muted); font-size: 9px; margin-top: 4px; }
.arrival-guidance { padding-left: 16px; border-left: 1px solid var(--line); }.arrival-guidance b, .arrival-guidance span { display: block; }.arrival-guidance b { font-size: 10px; }.arrival-guidance span { color: var(--muted); font-size: 8px; margin-top: 4px; line-height: 1.5; }.arrival-preview-button { font-size: 9px; padding: 10px 12px; }
.calendar-checkin.checked-in { border-left-color: var(--green); background: #f7fbf9; }
.room-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 18px; }
.room-card { background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: .2s ease; }
.room-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.room-visual { height: 156px; position: relative; overflow: hidden; background: var(--visual); }
.room-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.room-card:hover .room-visual img { transform: scale(1.035); }
.room-visual::before, .room-visual::after { display: none; }
.room-visual::before { width: 150px; height: 150px; right: -42px; top: -65px; }.room-visual::after { width: 100px; height: 100px; left: -30px; bottom: -55px; }
.room-visual svg { display: none; }
.available-badge { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.9); color: var(--green); border-radius: 100px; padding: 6px 9px; font-size: 9px; font-weight: 800; z-index: 1; }
.available-badge.busy { color: #9b2c2c; }
.room-body { padding: 17px; }.room-title-row { display: flex; justify-content: space-between; gap: 10px; }.room-title-row h3 { margin: 0; font-size: 16px; }.capacity { color: var(--muted); font-size: 11px; }
.amenities { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 16px; }.amenities span { background: #f4f6f8; color: #66758a; border-radius: 7px; padding: 6px 8px; font-size: 9px; }
.room-card-footer { border-top: 1px solid var(--line); padding-top: 13px; display: flex; align-items: center; justify-content: space-between; }.room-card-footer small { color: var(--muted); }.room-card-footer button { border: 0; background: none; color: var(--coral); font-weight: 750; font-size: 11px; }
.room-card-actions { display: flex; gap: 4px; }.room-card-actions button:first-child { color: var(--muted); }

.floor-map { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 18px; }
.floor-map[hidden] { display: none; }
.map-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.map-topbar strong, .map-topbar span { display: block; }.map-topbar strong { font-size: 13px; }.map-topbar > div:first-child span { color: var(--muted); font-size: 9px; margin-top: 3px; }
.map-legend { display: flex; gap: 14px; }.map-legend span { color: var(--muted); font-size: 9px; }.map-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }.map-legend .available { background: var(--green); }.map-legend .busy { background: #7d8794; }
.map-canvas { min-height: 515px; position: relative; overflow: hidden; background-color: #f6f8fa; background-image: linear-gradient(rgba(66,75,88,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(66,75,88,.05) 1px, transparent 1px); background-size: 24px 24px; }
.map-canvas::before { content: ""; position: absolute; inset: 55px 65px 45px; border: 5px solid #d3d0c8; border-radius: 4px; }
.map-room.filtered-out { filter: grayscale(1); opacity: .18; pointer-events: none; }
.map-room { position: absolute; z-index: 2; display: grid; place-content: center; border: 2px solid white; border-radius: 12px; color: white; box-shadow: 0 8px 20px rgba(23,34,56,.1); transition: .18s ease; }.map-room:hover { transform: translateY(-3px); }.map-room b { font-size: 14px; }.map-room small { font-size: 9px; margin-top: 5px; opacity: .83; }.map-room.room531 { left: 9%; top: 17%; width: 24%; height: 27%; background: #28785f; }.map-room.room532 { left: 9%; top: 51%; width: 24%; height: 28%; background: #28785f; }.map-room.room541 { right: 9%; top: 17%; width: 27%; height: 31%; background: #7d8794; }
.map-label { position: absolute; z-index: 2; display: grid; place-items: center; border: 2px solid #d3d0c8; color: #8d918f; background: rgba(255,255,255,.72); border-radius: 8px; font-size: 10px; }.map-label.reception { right: 9%; bottom: 12%; width: 27%; height: 24%; }.map-label.pantry { left: 39%; bottom: 12%; width: 18%; height: 22%; }
.desk-zone { position: absolute; z-index: 2; color: #9da29f; font-size: 9px; text-align: center; }.zone-a { left: 39%; top: 18%; width: 18%; }.zone-b { left: 61%; top: 57%; width: 14%; }.desk-dots { height: 87px; margin-top: 7px; border-radius: 8px; background: repeating-linear-gradient(90deg,#d9d6cd 0 18px,transparent 18px 27px), repeating-linear-gradient(#d9d6cd 0 18px,transparent 18px 27px); opacity: .8; }.corridor { position: absolute; left: 34%; top: 49%; width: 29%; border-top: 1px dashed #c4c4bd; color: #aaa; font-size: 8px; text-align: center; padding-top: 5px; transform: rotate(-5deg); }

.dashboard-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }.dashboard-head h2 { font-size: 19px; margin: 0 0 5px; }.dashboard-head p { color: var(--muted); font-size: 11px; margin: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 14px; }.metric-card { padding: 17px; background: white; border: 1px solid var(--line); border-radius: 15px; }.metric-card > span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }.metric-card > strong { display: block; font-size: 28px; margin: 8px 0 5px; letter-spacing: -1px; }.metric-card > strong em { font-size: 10px; font-style: normal; margin-left: 3px; letter-spacing: 0; }.metric-card > small { color: var(--muted); font-size: 9px; }.metric-card .up { color: var(--green); }.metric-card.warning { background: #fffaf3; border-color: #f2dfbe; }.metric-card.warning > strong, .metric-card .down { color: #b97622; }
.dashboard-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 14px; }.chart-card { min-height: 260px; background: white; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }.no-show-card { grid-column: 1 / -1; min-height: 230px; }.card-heading { display: flex; justify-content: space-between; align-items: flex-start; }.card-heading h3 { margin: 0 0 4px; font-size: 14px; }.card-heading p { margin: 0; color: var(--muted); font-size: 9px; }.chart-total { font-size: 20px; font-weight: 800; color: var(--coral); }.bar-chart { height: 175px; display: flex; align-items: flex-end; justify-content: space-around; gap: 16px; padding: 20px 12px 0; border-bottom: 1px solid var(--line); background-image: linear-gradient(to bottom,var(--line) 1px,transparent 1px); background-size: 100% 25%; }.bar-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }.bar-chart span { width: min(34px,75%); height: var(--h); min-height: 15px; border-radius: 7px 7px 2px 2px; background: linear-gradient(to top,#0f766e,#79aaa5); }.bar-chart small { color: var(--muted); font-size: 8px; }
.ranking { margin-top: 24px; display: grid; gap: 20px; }.ranking > div { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; }.ranking > div > b { display: grid; place-items: center; width: 22px; height: 22px; color: var(--coral); background: var(--coral-soft); border-radius: 7px; font-size: 9px; }.ranking span strong { display: block; font-size: 10px; margin-bottom: 7px; }.ranking i { display: block; height: 5px; background: #eef0f3; border-radius: 10px; overflow: hidden; }.ranking i em { display: block; height: 100%; background: var(--coral); border-radius: inherit; }.ranking small { color: var(--muted); font-size: 9px; }
.alert-pill { padding: 5px 8px; border-radius: 100px; color: #b97622; background: #fff2d9; font-size: 8px; font-weight: 750; }.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 55px; margin-top: 14px; }.donut { width: 135px; height: 135px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--coral) 0 40deg,#e9edf2 40deg 360deg); position: relative; }.donut::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: white; }.donut span { z-index: 1; text-align: center; }.donut b, .donut small { display: block; }.donut b { font-size: 25px; }.donut small { color: var(--muted); font-size: 8px; }.donut-legend { min-width: 220px; }.donut-legend p { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; margin: 0 0 10px; font-size: 10px; }.donut-legend p i { width: 7px; height: 7px; border-radius: 50%; }.donut-legend .used { background: #e0e5ec; }.donut-legend .missed { background: var(--coral); }.donut-legend > small { display: block; color: #96651d; background: #fff7e7; border-radius: 8px; padding: 8px; margin-top: 14px; font-size: 8px; }

.panel-controls { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 18px; }
.control-label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; margin-bottom: 7px; }
.panel-controls select { min-width: 200px; border: 1px solid var(--line); background: white; border-radius: 10px; padding: 10px 34px 10px 12px; color: var(--ink); }
.segmented { display: flex; background: #e7ebf0; border-radius: 10px; padding: 3px; }.segmented button { border: 0; background: transparent; padding: 8px 12px; color: var(--muted); border-radius: 8px; font-size: 11px; }.segmented button.active { background: white; color: var(--ink); font-weight: 750; }
.panel-controls .secondary-button { margin-left: auto; }
.door-panel { min-height: min(620px, calc(100vh - 230px)); border-radius: 20px; padding: clamp(28px, 4vw, 55px); color: white; display: flex; flex-direction: column; box-shadow: 0 22px 48px rgba(24,34,48,.16); transition: background .3s ease; }
.door-panel.available { background: linear-gradient(135deg, #166b50, #238466); }.door-panel.waiting { background: linear-gradient(135deg, #94631d, #bd8430); }.door-panel.busy { background: linear-gradient(135deg, #922d2d, #b93b3b); }
.panel-topline { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 750; }.panel-logo { letter-spacing: -.5px; }
.panel-main { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.panel-status { display: flex; align-items: center; gap: 9px; font-size: clamp(14px,2vw,20px); margin: 0 0 14px; }.panel-status span { width: 10px; height: 10px; border-radius: 50%; background: white; box-shadow: 0 0 0 6px rgba(255,255,255,.14); }.panel-status b { font-weight: 650; }
.panel-main h2 { font-size: clamp(38px, 6.3vw, 74px); letter-spacing: -3px; margin: 0; }.panel-until { font-size: clamp(17px, 2vw, 24px); opacity: .78; }
.panel-action-area { display: flex; align-items: center; gap: 14px; }
.panel-book-button { flex: 0 0 auto; min-width: 124px; height: 48px; padding: 0 18px; border: 1px solid rgba(255,255,255,.5); background: white; color: #14674f; border-radius: 11px; font-size: 13px; font-weight: 800; box-shadow: 0 12px 30px rgba(45,37,20,.16); }
.waiting .panel-book-button { color: #835514; }.busy .panel-book-button { color: #922d2d; }
.panel-qr { display: none; width: 128px; padding: 10px; border: 1px solid rgba(255,255,255,.45); border-radius: 12px; color: var(--ink); background: white; box-shadow: 0 12px 30px rgba(45,37,20,.16); }.panel-qr svg { width: 82px; height: 82px; margin: auto; fill: currentColor; stroke: none; }.panel-qr span { display: block; margin-top: 5px; font-size: 9px; font-weight: 800; }.waiting .panel-qr { display: block; }
.panel-schedule { border-top: 1px solid rgba(255,255,255,.3); padding-top: 22px; display: grid; grid-template-columns: 100px 1fr 1fr; gap: 24px; align-items: start; }.panel-schedule > span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .7; }.panel-schedule div { display: grid; gap: 6px; }.panel-schedule time { font-size: 11px; opacity: .7; }.panel-schedule strong { font-size: 14px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(14,24,42,.55); backdrop-filter: blur(7px); display: grid; place-items: center; padding: 18px; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 36px); overflow: auto; background: white; border-radius: 22px; padding: 26px; box-shadow: 0 30px 80px rgba(11,20,35,.3); animation: modal-in .25s ease; }
@keyframes modal-in { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 23px; }.modal-header h2 { margin: 0; font-size: 24px; }.modal-close { border: 0; background: #f2f4f7; color: #6e7a8d; border-radius: 10px; width: 36px; height: 36px; font-size: 23px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.field { display: grid; gap: 7px; margin-bottom: 15px; }.field span { color: #536177; font-size: 11px; font-weight: 750; }.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; color: var(--ink); outline: none; background: white; }.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.availability-note { display: flex; gap: 11px; align-items: center; background: var(--green-soft); border-radius: 11px; padding: 11px 13px; margin: 1px 0 15px; color: #157a5b; }.availability-note > span { display: grid; place-items: center; width: 23px; height: 23px; background: var(--green); color: white; border-radius: 50%; font-size: 12px; }.availability-note strong, .availability-note small { display: block; }.availability-note strong { font-size: 11px; }.availability-note small { font-size: 9px; margin-top: 2px; opacity: .75; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 5px; }.text-button { border: 0; background: none; color: var(--muted); padding: 10px 15px; }
.booking-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin: -3px 0 20px; }.booking-steps span { color: #a0a9b6; font-size: 8px; font-weight: 750; white-space: nowrap; }.booking-steps span.done { color: var(--green); }.booking-steps span.active { color: var(--coral); }.booking-steps i { height: 1px; background: var(--line); }
.toast { position: fixed; right: 28px; bottom: 28px; z-index: 70; display: flex; align-items: center; gap: 11px; min-width: 245px; padding: 14px 16px; color: white; background: var(--navy); border-radius: 14px; box-shadow: var(--shadow); transform: translateY(130%); opacity: 0; transition: .3s ease; }.toast.show { transform: translateY(0); opacity: 1; }
/* A hidden toast must not sit invisibly over the mobile bottom navigation and swallow taps. */
.toast:not(.show) { visibility: hidden; pointer-events: none; transition: .3s ease, visibility 0s linear .3s; }.toast > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); }.toast strong, .toast small { display: block; }.toast strong { font-size: 12px; }.toast small { margin-top: 3px; color: #aeb8cb; font-size: 10px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(14,24,42,.47); backdrop-filter: blur(4px); }.drawer-backdrop[hidden] { display: none; }.room-drawer { position: absolute; top: 0; right: 0; width: min(510px,100%); height: 100%; overflow-y: auto; background: white; box-shadow: -25px 0 60px rgba(14,24,42,.18); animation: drawer-in .25s ease; }.drawer-close { position: absolute; z-index: 2; top: 16px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 50%; color: white; background: rgba(22,32,49,.6); backdrop-filter: blur(5px); font-size: 22px; }.room-drawer #detail-photo { width: 100%; height: 275px; object-fit: cover; display: block; }.drawer-content { padding: 27px; }.availability-line { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 10px; font-weight: 750; margin: 0 0 9px; }.availability-line span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }.drawer-content h2 { font-size: 27px; margin: 0 0 12px; }.detail-facts { display: flex; flex-wrap: wrap; gap: 6px; }.detail-facts span { color: #5f6d82; background: #f2f4f7; border-radius: 7px; padding: 7px 9px; font-size: 9px; }.today-slots { margin-top: 28px; }.drawer-section-title { display: flex; align-items: baseline; justify-content: space-between; }.drawer-section-title h3 { font-size: 13px; margin: 0; }.drawer-section-title span { color: var(--muted); font-size: 9px; }.timeline-slots { display: grid; gap: 8px; margin-top: 12px; }.slot-row { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; }.slot-row time { font-size: 9px; color: var(--muted); }.slot-row strong { font-size: 10px; }.slot-row button { border: 0; background: var(--green-soft); color: var(--green); border-radius: 7px; padding: 6px 8px; font-size: 8px; font-weight: 750; }.slot-row.busy { background: #f8f9fb; }.slot-row.busy button { color: var(--muted); background: #e9edf2; pointer-events: none; }.drawer-book { width: 100%; margin-top: 22px; }.drawer-book::after { content: " →"; }@keyframes drawer-in { from { transform: translateX(100%); } }
.room-drawer #drawer-detail-view[hidden], .drawer-booking-view[hidden] { display: none; }.drawer-booking-view { padding: 28px 30px 32px; }.drawer-booking-header { margin: 2px 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.back-to-detail { display: block; margin: 0 0 24px; border: 0; padding: 0; color: #0b625c; background: none; font-size: 12px; font-weight: 700; }.back-to-detail:hover { color: var(--coral); }.drawer-booking-header .eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 11px; font-weight: 750; }.drawer-booking-header h2 { margin: 0; font-size: 25px; letter-spacing: -.4px; }.drawer-booking-header > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; }.drawer-booking-view .field { margin-bottom: 12px; }.drawer-booking-view .field span { font-size: 12px; }.drawer-booking-view .field input, .drawer-booking-view .field select, .drawer-booking-view .field textarea { padding: 10px 11px; border-radius: 9px; font-size: 13px; }.room-choice-field > span { display: flex; align-items: center; gap: 7px; }.room-choice-field > span i { color: #9a5b16; background: #fff4df; border-radius: 5px; padding: 2px 5px; font-size: 9px; font-style: normal; }.room-choice-field > small { color: var(--muted); font-size: 10px; line-height: 1.5; }.room-choice-field select { border-color: #b9d6d2 !important; background-color: #fbfdfc !important; }.room-choice-field select:focus { outline: 0; border-color: #65a79b !important; box-shadow: 0 0 0 3px var(--coral-soft); }.drawer-booking-view .modal-actions { position: sticky; bottom: -32px; margin: 20px -30px -32px; padding: 14px 30px; border-top: 1px solid var(--line); background: #fff; }

.arrival-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(16,24,40,.58); backdrop-filter: blur(7px); }.arrival-backdrop[hidden] { display: none; }
.arrival-dialog { position: relative; width: min(840px,100%); max-height: calc(100vh - 40px); overflow: auto; display: grid; grid-template-columns: 1fr 330px; gap: 44px; align-items: center; padding: 38px 42px; background: #f7f9fa; border-radius: 18px; box-shadow: 0 30px 80px rgba(16,24,40,.3); }.arrival-close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.arrival-explainer h2 { margin: 0 0 12px; font-size: 28px; letter-spacing: -.8px; }.arrival-explainer > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }.arrival-explainer ol { list-style: none; padding: 0; margin: 26px 0 0; counter-reset: arrival; }.arrival-explainer li { position: relative; padding: 0 0 22px 42px; counter-increment: arrival; }.arrival-explainer li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 27px; bottom: 2px; border-left: 1px solid #ccd5dd; }.arrival-explainer li::before { content: counter(arrival); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--coral); background: var(--coral-soft); border-radius: 50%; font-size: 10px; font-weight: 800; }.arrival-explainer li b, .arrival-explainer li span { display: block; }.arrival-explainer li b { font-size: 11px; }.arrival-explainer li span { color: var(--muted); font-size: 9px; margin-top: 4px; line-height: 1.55; }
.phone-preview { width: 292px; min-height: 500px; justify-self: center; padding: 14px 20px 22px; color: var(--ink); background: white; border: 7px solid #1b2431; border-radius: 36px; box-shadow: 0 20px 42px rgba(16,24,40,.18); text-align: center; }.phone-bar { display: flex; justify-content: space-between; font-size: 8px; font-weight: 750; }.phone-bar i { width: 52px; height: 14px; background: #1b2431; border-radius: 0 0 10px 10px; transform: translateY(-14px); }.phone-brand { display: flex; align-items: center; gap: 7px; margin: 8px 0 30px; font-size: 12px; }.phone-brand .brand-mark { width: 24px; height: 24px; border-radius: 8px; padding-bottom: 5px; }.phone-brand .brand-mark span { width: 4px; }.arrival-pin { width: 48px; height: 48px; display: grid; place-items: center; margin: auto auto 11px; color: var(--coral); background: var(--coral-soft); border-radius: 50%; font-size: 20px; }.phone-preview > small { color: var(--muted); font-size: 8px; }.phone-preview h3 { margin: 5px 0 20px; font-size: 20px; }.phone-meeting { padding: 14px; text-align: left; background: #f5f7f8; border: 1px solid var(--line); border-radius: 11px; }.phone-meeting span, .phone-meeting strong, .phone-meeting small { display: block; }.phone-meeting span, .phone-meeting small { color: var(--muted); font-size: 8px; }.phone-meeting strong { font-size: 12px; margin: 5px 0; }.arrival-window { display: flex; align-items: center; justify-content: center; gap: 6px; color: #956217; font-size: 8px; margin: 15px 0; }.arrival-window i { width: 6px; height: 6px; border-radius: 50%; background: #d39b35; }.phone-preview #confirm-arrival { width: 100%; border: 0; border-radius: 10px; padding: 12px; color: white; background: var(--coral); font-size: 10px; font-weight: 800; }.phone-preview #confirm-arrival:disabled { background: var(--green); }.booking-code-link { border: 0; background: transparent; color: var(--muted); font-size: 8px; margin-top: 10px; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 78px minmax(0, 1fr); }.sidebar { padding-inline: 12px; }.brand { justify-content: center; padding-inline: 0; }.brand > span:last-child, .nav-item span, .mini-profile div, .icon-only { display: none; }.nav-item { justify-content: center; padding: 14px; }.mini-profile { grid-template-columns: 1fr; }.avatar { margin: auto; }.main-content { padding-inline: 24px; }.room-grid { grid-template-columns: repeat(2, minmax(220px,1fr)); }.room-filters { overflow-x: auto; }.calendar-toolbar { flex-wrap: wrap; }.view-toggle { margin-left: 0; }.filter-panel { grid-template-columns: 1fr 1fr; }.filter-panel .search-box { grid-column: 1 / -1; }.metric-grid { grid-template-columns: repeat(2,1fr); }.today-checkin { grid-template-columns: 58px 1fr auto; }.checkin-hint { display: none; }
}

@media (max-width: 680px) {
  .app-shell { display: block; }.sidebar { min-height: auto; height: 68px; width: 100%; padding: 8px 8px; position: fixed; inset: auto 0 0; z-index: 30; flex-direction: row; align-items: center; box-shadow: 0 -8px 25px rgba(23,34,56,.15); }.brand, .sidebar-bottom { display: none; }.primary-nav { width: 100%; grid-template-columns: repeat(5,1fr); gap: 2px; }.nav-item { flex-direction: column; gap: 3px; padding: 7px 3px; font-size: 8px; }.nav-item span { display: block; }.nav-item.active { box-shadow: inset 0 3px var(--coral); }.nav-item svg { width: 17px; height: 17px; }.main-content { padding: 22px 15px 92px; }.topbar { align-items: flex-start; }.today-chip { display: none; }.primary-button { padding: 11px 13px; }.primary-button svg { margin: 0; }.calendar-toolbar { gap: 9px; padding: 10px; }.week-switcher { min-width: 100%; justify-content: space-between; }.room-filters { width: 100%; overflow-x: auto; }.view-toggle { display: flex; margin-left: auto; }.calendar-head { grid-template-columns: 58px repeat(5, 120px); width: 658px; }.calendar-card { overflow-x: auto; }.calendar-scroll { grid-template-columns: 58px 600px; width: 658px; overflow-y: auto; overflow-x: hidden; }.month-view { min-width: 660px; }.month-cell { min-height: 82px; padding: 5px; }.month-event { font-size: 9px; }.room-grid { grid-template-columns: 1fr; }.section-intro { align-items: stretch; flex-direction: column; }.search-box { width: 100%; }.filter-panel { grid-template-columns: 1fr; }.filter-panel .search-box { grid-column: auto; }.overview-toolbar { align-items: flex-start; flex-direction: column; }.view-mode-group { width: 100%; justify-content: space-between; }.display-switch { align-self: flex-start; }.today-checkin { grid-template-columns: 50px 1fr; }.today-checkin .checkin-button { grid-column: 1 / -1; width: 100%; }.calendar-checkin { grid-template-columns: 52px 1fr; }.calendar-checkin .checkin-window { display: none; }.calendar-checkin .checkin-button { grid-column: 1 / -1; width: 100%; }.map-canvas { min-width: 660px; }.floor-map { overflow-x: auto; }.metric-grid { grid-template-columns: 1fr 1fr; }.dashboard-grid { grid-template-columns: 1fr; }.no-show-card { grid-column: auto; }.donut-wrap { gap: 20px; }.panel-controls { align-items: stretch; flex-direction: column; }.panel-controls .secondary-button { margin-left: 0; }.door-panel { min-height: 560px; }.panel-main { align-items: flex-start; flex-direction: column; justify-content: center; }.panel-main h2 { font-size: 44px; letter-spacing: -2px; }.panel-book-button { width: 112px; height: 112px; }.panel-schedule { grid-template-columns: 1fr; gap: 12px; }.form-row { grid-template-columns: 1fr; gap: 0; }.toast { left: 15px; right: 15px; bottom: 82px; }.room-drawer #detail-photo { height: 220px; }
}

@media (max-width: 980px) {
  .calendar-checkin { grid-template-columns: 64px 1fr auto; }
  .arrival-guidance { display: none; }
}

@media (max-width: 680px) {
  .calendar-checkin { grid-template-columns: 52px 1fr; }
  .arrival-preview-button { grid-column: 1 / -1; width: 100%; }
  .panel-action-area { align-items: flex-start; flex-direction: column; }
  .panel-book-button { width: 128px; height: 44px; }
  .arrival-dialog { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px 24px; }
  .arrival-explainer h2 { font-size: 22px; }
  .phone-preview { width: min(292px,100%); min-height: 470px; }
}

/* ---- 搜尋區 ---- */
.room-search-panel { padding: 16px; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 18px rgba(24,34,48,.04); }
.search-fields { display: grid; grid-template-columns: minmax(155px,1.15fr) minmax(110px,.8fr) minmax(170px,1.1fr) auto; gap: 12px; align-items: end; }.search-fields .search-submit { min-height: 40px; height: 40px; padding: 0 18px; }.more-filter-button b { font: inherit; }.search-feedback { margin: 12px 0 0; font-size: 12px; color: #8a611f; }.search-feedback:empty { display: none; }
.search-field { display: grid; gap: 6px; min-width: 0; }
.search-field > span, .search-field > label { color: var(--muted); font-size: 11px; font-weight: 700; }
.search-field > select, .field-box { width: 100%; height: 40px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background-color: #f8f9fa; font-size: 13px; font-weight: 650; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.search-field > select, .duration-field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
.search-field > select { padding: 0 30px 0 12px; background-position: right 12px center; }
.search-field > select:hover, .field-box:hover { border-color: #cfd6de; }
.search-field > select:focus, .field-box:focus-within { outline: 0; border-color: #8ebdb7; background-color: white; box-shadow: 0 0 0 3px var(--coral-soft); }
.field-box { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.field-box select, .field-box input { min-width: 0; border: 0; outline: 0; color: inherit; background-color: transparent; font: inherit; }
.duration-field select { flex: 1; padding-right: 16px; background-position: right 2px center; }
.field-box small { flex: 0 0 auto; color: var(--coral); font-size: 12px; font-weight: 700; }
.field-box input[type="time"] { flex: 1; min-width: 0; color: var(--coral); font-weight: 700; }.field-box input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
.duration-field.is-custom select { flex: 0 0 auto; width: 52px; }
.field-box input[hidden] { display: none; }
.name-field svg { flex: 0 0 16px; width: 16px; color: #9ba6b7; }
.name-field input { flex: 1; width: 100%; font-weight: 500; }
.name-field input::placeholder { color: #9ba6b7; }
.search-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.chip-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.chip-group > span { margin-right: 2px; color: var(--muted); font-size: 11px; font-weight: 700; }
.chip { height: 30px; border: 1px solid var(--line); border-radius: 100px; padding: 0 12px; color: #536173; background: white; font-size: 12px; transition: .15s ease; }
.chip:hover { border-color: #c9d1da; background: #f8f9fa; }
.chip.active { border-color: #9ac1bc; color: #0b625c; background: var(--coral-soft); font-weight: 700; }
.chip-divider { width: 1px; height: 18px; background: var(--line); }
.search-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.search-submit-row { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }.search-submit-row > span { margin-right: auto; color: var(--muted); font-size: 12px; }.search-submit { min-height: 44px; padding: 0 19px; border-radius: 10px; font-size: 14px; white-space: nowrap; }.search-submit span { margin-left: 5px; font-size: 18px; }
.room-search-panel .advanced-filters { display: block; padding: 16px; background: #f7f9fa; }.optional-search-fields { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }.advanced-filters .search-field { display: grid; gap: 6px; }.optional-search-fields .name-field { grid-column: auto; }.optional-equipment { margin: 16px 0; }.optional-checks { display: flex; flex-wrap: wrap; gap: 14px; }.optional-checks label { font-size: 12px; }.room-search-panel .search-chips { border-top: 0; padding-top: 0; }.search-prompt { display: block; padding: 20px 16px; border-style: solid; border-color: #e8ecee; background: #fafbfc; }.search-prompt strong { color: var(--muted); font-size: 13px; font-weight: 500; }
@media(max-width:680px) { .optional-search-fields { grid-template-columns: 1fr; }.search-tools .more-filter-button { font-size: 11px; }.result-heading .result-count { font-size: 13px; line-height: 1.6; } }
.more-filter-button { height: 30px; border: 1px solid var(--line); border-radius: 100px; padding: 0 12px; color: #526071; background: white; font-size: 12px; white-space: nowrap; }.more-filter-button span { margin-left: 3px; color: var(--coral); }.more-filter-button.active { color: var(--coral); border-color: #b9d6d2; background: var(--coral-soft); }
.clear-filter { height: 30px; border: 0; padding: 0 10px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; white-space: nowrap; }.clear-filter:hover { color: var(--ink); }
.advanced-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #f6f8f9; }.advanced-filters[hidden] { display: none; }.advanced-filters label { display: flex; align-items: center; gap: 6px; color: #526071; font-size: 12px; }.advanced-filters input { accent-color: var(--coral); }.advanced-filters > span { margin-left: auto; color: var(--muted); font-size: 11px; }
.result-count { font-size: 12px; }
.slot-ok { color: var(--green) !important; font-size: 11px; font-weight: 700; }
.empty-state { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 42px 20px; text-align: center; background: white; border: 1px dashed #d4dbe2; border-radius: 14px; }.empty-state strong { font-size: 14px; }.empty-state span { color: var(--muted); font-size: 12px; }.empty-state button { margin-top: 10px; font-size: 12px; padding: 9px 14px; }

/* ---- 狀態與預約流程 ---- */
.map-room.is-busy { background: #7d8794; }
.availability-line.busy { color: #9b2c2c; }.availability-line.busy span { background: #c24141; }
.slot-row.past { opacity: .5; }
.availability-note.error { color: #9b2c2c; background: #fdeeee; }.availability-note.error > span { background: #c24141; }
.booking-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 15px; }.booking-suggestions[hidden] { display: none; }.booking-suggestions > span { color: var(--muted); font-size: 11px; font-weight: 700; margin-right: 2px; }.booking-suggestions button { border: 1px solid #b9d6d2; border-radius: 100px; padding: 6px 11px; color: #0b625c; background: var(--coral-soft); font-size: 12px; font-weight: 650; }.booking-suggestions button:hover { background: #d9ece9; }
.primary-button:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }
.danger-button { border: 0; border-radius: 12px; padding: 11px 16px; color: white; background: #c24141; font-weight: 730; }.danger-button:hover { background: #a83434; }
.danger-text { color: #b83a3a !important; }
.status-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 100px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.status-pill.upcoming { color: #3f4d63; background: #eef1f5; }.status-pill.waiting { color: #94631d; background: #fff2d9; }.status-pill.checked, .status-pill.ongoing { color: var(--green); background: var(--green-soft); }.status-pill.past { color: var(--muted); background: #f2f4f6; }
.event-modal { width: min(460px, 100%); }
.event-facts { display: grid; gap: 0; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; }.event-facts > div { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; padding: 11px 14px; }.event-facts > div + div { border-top: 1px solid var(--line); }.event-facts dt { color: var(--muted); font-size: 12px; }.event-facts dd { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 600; }
.event-confirm { display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: #fdeeee; }.event-confirm[hidden] { display: none; }.event-confirm strong { color: #9b2c2c; font-size: 13px; }.event-confirm small { color: #8a4a4a; font-size: 12px; }.event-confirm > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.event-hint { color: var(--muted); font-size: 12px; padding: 10px 0; }
#event-actions[hidden] { display: none; }

/* ---- 我的預約 ---- */
.mine-list { display: grid; gap: 10px; max-width: 860px; }
.mine-group-title { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; }.mine-group-title:first-child { margin-top: 0; }.mine-group-title h2 { margin: 0; font-size: 16px; }.mine-group-title span { color: var(--muted); font-size: 12px; }
.mine-row { display: grid; grid-template-columns: 76px 1fr auto auto; align-items: center; gap: 16px; padding: 12px 16px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.mine-row.is-past { background: #fafbfc; }.mine-row.is-past .mine-copy strong { color: var(--muted); }
.mine-date { display: grid; justify-items: center; padding-right: 14px; border-right: 1px solid var(--line); }.mine-date b { font-size: 22px; line-height: 1.1; }.mine-date span { color: var(--muted); font-size: 11px; }
.mine-copy { display: grid; gap: 4px; min-width: 0; border: 0; padding: 0; text-align: left; color: inherit; background: none; }.mine-copy strong { font-size: 14px; }.mine-copy span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }.mine-copy:hover strong { color: var(--coral); }
.mine-actions { display: flex; gap: 2px; }.mine-actions button { border: 0; border-radius: 8px; padding: 7px 10px; color: #526071; background: transparent; font-size: 12px; font-weight: 700; }.mine-actions button:hover { background: #f2f4f6; }

@media (max-width: 980px) {
  .search-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }.search-fields .search-submit { grid-column: 1/-1; }
  .name-field { grid-column: span 2; }
}

@media (max-width: 680px) {
  .section-intro { padding: 20px 17px; gap: 16px; }
  .section-intro h2 { font-size: 22px; }
  .rooms-start-actions { width: 100%; align-items: stretch; flex-direction: column; gap: 7px; }
  .rooms-start-actions .primary-button { width: 100%; }
  .rooms-start-actions .text-action { align-self: center; }
  .search-panel-heading { align-items: flex-start; }
  .search-panel-heading span { max-width: 240px; line-height: 1.5; }
  .search-submit-row { align-items: stretch; flex-direction: column; gap: 9px; }
  .search-submit-row > span { margin: 0; }
  .search-submit { width: 100%; }
  .room-search-panel { padding: 13px; }
  .search-fields { grid-template-columns: 1fr 1fr; }.search-fields .search-submit { grid-column: 1/-1; }
  .date-field { grid-column: 1 / -1; }
  .name-field { grid-column: auto; }
  .chip-divider { display: none; }
  .search-tools { width: 100%; justify-content: space-between; margin-left: 0; }
  .advanced-filters { align-items: flex-start; flex-direction: column; gap: 10px; }
  .advanced-filters > span { margin-left: 0; }
  .mine-row { grid-template-columns: 58px 1fr; gap: 10px 12px; }
  .mine-row .status-pill { justify-self: start; grid-column: 2; }
  .mine-actions { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 8px; }
}

/* ---- 週期預約 ---- */
.recur-field select:disabled { color: var(--muted); background: #f6f7f9; }
.recur-hint { color: #9a5b16; font-size: 11px; }
.recur-hint:not(:empty)::before { content: "⚠ "; }
.series-preview { margin: -4px 0 15px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.series-preview[hidden] { display: none; }
.series-preview header { padding: 11px 13px; background: #f6f8fa; border-bottom: 1px solid var(--line); }
.series-preview header strong, .series-preview header small { display: block; }
.series-preview header strong { font-size: 12px; }
.series-preview header small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.series-preview ol { list-style: none; margin: 0; padding: 0; max-height: 236px; overflow-y: auto; }
.series-preview li { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 10px; padding: 8px 13px; font-size: 12px; }
.series-preview li + li { border-top: 1px solid var(--line); }
.series-preview time { color: #536177; font-variant-numeric: tabular-nums; }
.series-preview li.ok .series-status { color: #157a5b; }
.series-preview li.blocked { background: #fffafa; }
.series-preview li.blocked .series-status { color: #9b2c2c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-preview select { border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 11px; background: #fff; color: var(--ink); }
.series-note { display: block; padding: 9px 13px; color: #9a5b16; font-size: 11px; border-top: 1px solid var(--line); }
.series-scope { display: grid; gap: 7px; margin: 0 0 15px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; font-size: 12px; }
.series-scope[hidden] { display: none; }
.series-scope legend { padding: 0 5px; color: #536177; font-size: 11px; font-weight: 750; }
.series-scope label { display: flex; align-items: center; gap: 8px; }
.series-scope small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.event-confirm .series-scope { margin: 10px 0 0; background: #fff; border-color: #f2d4d4; color: var(--ink); }
.series-mark { color: var(--coral); font-style: normal; font-size: .9em; }
.recur-backdrop { z-index: 60; }
.recur-modal { width: min(420px, 100%); padding: 28px; border-radius: 20px; }
.recur-header { align-items: flex-start; margin-bottom: 26px; }
.recur-header .eyebrow { margin-bottom: 6px; }
.recur-header h2 { font-size: 22px; letter-spacing: -.3px; }
.recur-section + .recur-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.recur-label { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .2px; }
.recur-frequency { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; }
.recur-frequency input, .recur-frequency select, .recur-option input[type=date], .recur-count input { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; }
.recur-frequency input { width: 72px; text-align: center; }
.recur-frequency select { min-width: 96px; }
.recur-frequency input:focus, .recur-frequency select:focus, .recur-option input[type=date]:focus, .recur-count input:focus { outline: 0; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-soft); }
.recur-weekdays { margin-top: 20px; }
.recur-weekdays[hidden], .recur-monthly[hidden] { display: none; }
#recur-day-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#recur-day-buttons button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
#recur-day-buttons button:hover { border-color: var(--brand-border); color: var(--brand-text); }
#recur-day-buttons button[aria-pressed="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on); }
.recur-monthly { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--canvas); color: var(--muted); font-size: 12px; }
.recur-options { display: grid; gap: 8px; }
.recur-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.recur-option:hover { border-color: var(--brand-border); }
.recur-option:has(input[type=radio]:checked) { border-color: var(--brand-primary); background: var(--brand-soft); }
.recur-option input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-primary); }
.recur-option-text strong, .recur-option-text small { display: block; }
.recur-option-text strong { color: var(--ink); font-size: 14px; font-weight: 650; }
.recur-option-text small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.recur-option input[type=date] { width: 152px; }
.recur-option:not(:has(input[type=radio]:checked)) input[type=date], .recur-option:not(:has(input[type=radio]:checked)) .recur-count { opacity: .5; }
.recur-count { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.recur-count input { width: 72px; text-align: center; }
.recur-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.recur-error { margin: 18px 0 0; }
.recur-actions { margin: 28px -28px -28px; padding: 16px 28px; border-top: 1px solid var(--line); }
@media (max-width: 480px) {
  .recur-modal { padding: 22px; }
  .recur-actions { margin: 24px -22px -22px; padding: 14px 22px; }
  .recur-option { grid-template-columns: auto 1fr; }
  .recur-option > input[type=date], .recur-option > .recur-count { grid-column: 2; width: 100%; }
  .recur-option > input[type=date] { width: 100%; }
}
@media (max-width: 760px) { .series-preview li { grid-template-columns: 72px 1fr; } .series-preview li select { grid-column: 1 / -1; } }

/* 時段方塊格（time-picker.js） */
.tp-field { position: relative; }
.tp-native { display: none !important; }
.tp-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; color: var(--ink); background: white; font: inherit; font-size: 13px; text-align: left; font-variant-numeric: tabular-nums; }
.tp-trigger b { font-weight: 650; }
.tp-trigger svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.tp-trigger:hover { border-color: #cfd6de; }
.tp-trigger:focus-visible, .tp-trigger[aria-expanded="true"] { outline: 0; border-color: var(--brand-primary, var(--coral)); box-shadow: 0 0 0 3px var(--brand-soft, var(--coral-soft)); }
.tp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 296px; max-width: calc(100vw - 32px); max-height: 320px; overflow-y: auto; box-sizing: border-box; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 14px 36px #39335c26; }
.tp-pop.tp-align-right { left: auto; right: 0; }
.tp-pop[hidden] { display: none; }
.tp-group { position: sticky; top: -12px; margin: 0 -12px; padding: 6px 12px 4px; color: var(--muted); background: white; font-size: 11px; font-weight: 750; letter-spacing: .6px; }
.tp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tp-grid button { border: 1px solid var(--line); border-radius: 8px; padding: 7px 0; color: var(--ink); background: white; font: inherit; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.tp-grid button:hover:not(:disabled) { border-color: var(--brand-border, var(--line)); background: var(--brand-soft, var(--coral-soft)); }
.tp-grid button:focus-visible { outline: 2px solid var(--brand-primary, var(--coral)); outline-offset: 1px; }
.tp-grid button.tp-on { border-color: var(--brand-primary, var(--coral)); color: var(--brand-on, #fff); background: var(--brand-primary, var(--coral)); }
.tp-grid button:disabled { border-color: transparent; color: #b3b2c2; background: #f6f6f9; cursor: not-allowed; }
.tp-grid button.tp-busy { color: #a9a8b8; background: repeating-linear-gradient(135deg, #f1f0f6 0 6px, #e9e8f0 6px 7px); text-decoration: line-through; }
.tp-grid button.tp-blank { visibility: hidden; }
.tp-legend { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; color: var(--muted); font-size: 11px; }
.tp-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 3px; vertical-align: -1px; }
.tp-key-on { background: var(--brand-primary, var(--coral)); }
.tp-key-busy { background: repeating-linear-gradient(135deg, #f1f0f6 0 3px, #d9d8e3 3px 4px); }
.tp-key-off { background: #f6f6f9; border: 1px solid var(--line); box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { .tp-grid button { transition: background-color .12s ease, border-color .12s ease; } }
.field .tp-legend span { color: var(--muted); font-size: 11px; font-weight: 500; }