:root { --green:#0d6248; --green-2:#137457; --ink:#17231f; --muted:#66736d; --line:#d9e2dd; --bg:#f5f7f5; --white:#fff; --red:#a83f43; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.portal-login { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg,#073f30,#0e6b50 58%,#dcece4 58%); }
.portal-login-card { width:min(430px,100%); display:grid; gap:14px; padding:30px; border-radius:18px; background:white; box-shadow:0 28px 80px rgba(4,31,23,.28); }
.portal-login-card > img { width:min(320px,100%); max-height:100px; object-fit:contain; object-position:left center; }
.portal-login-card .login-sector { margin-top:-5px; color:var(--green); font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.portal-login-card > span,.eyebrow,.section-title span { color:var(--green); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.portal-login-card h1 { margin:0; font-size:28px; }
.portal-login-card p,.portal-login-card small { margin:0; color:var(--muted); line-height:1.5; }
.remember { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
#roomPortalLoginButton { display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:10px; padding:13px; background:var(--green); color:white; font-weight:800; }
#roomPortalLoginButton b { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; background:white; color:#4285f4; }
#roomPortalApp { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding-bottom:36px; }
.portal-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; }
.portal-brand,.portal-user,.portal-header-actions { display:flex; align-items:center; gap:11px; }
.portal-header-actions { justify-content:flex-end; }
.portal-guest-actions { min-height:50px; display:flex; align-items:center; gap:10px; padding:5px 5px 5px 8px; border:1px solid #d5e2db; border-radius:14px; background:rgba(255,255,255,.86); box-shadow:0 6px 18px rgba(13,98,72,.08); }
.portal-guest-icon { width:32px; height:32px; display:grid; flex:0 0 32px; place-items:center; border-radius:10px; background:#e5f1eb; color:var(--green); }
.portal-guest-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.portal-guest-copy { display:grid; gap:2px; padding-right:2px; line-height:1.1; }
.portal-guest-copy strong { color:var(--ink); font-size:11.5px; }
.portal-guest-copy > span { color:var(--muted); font-size:10px; white-space:nowrap; }
.portal-guest-actions button { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:10px; padding:9px 13px; background:var(--green); color:white; font-size:11.5px; font-weight:900; box-shadow:0 5px 12px rgba(13,98,72,.18); transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.portal-guest-actions button:hover { transform:translateY(-1px); background:#0a5942; box-shadow:0 8px 16px rgba(13,98,72,.23); }
.portal-guest-actions button:focus-visible { outline:3px solid rgba(19,116,87,.18); outline-offset:2px; }
.portal-guest-actions button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.9; }
.occupancy-download { text-decoration:none; }
.portal-brand { align-items:flex-start; flex-direction:column; gap:2px; }
.portal-brand img { width:230px; height:58px; object-fit:contain; object-position:left center; }
.portal-brand .brand-sector { color:var(--green); font-size:9px; font-weight:900; letter-spacing:.055em; line-height:1.25; text-transform:uppercase; }
.portal-brand div,.portal-user div { display:grid; }
.portal-brand span,.portal-user span { color:var(--muted); font-size:12px; }
.portal-user > img { width:38px; height:38px; border-radius:50%; object-fit:cover; background:white; }
.portal-user button { border:0; border-radius:8px; padding:10px 13px; background:#e5eee9; color:var(--ink); font-weight:800; }
.home-shell { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 18px 50px rgba(19,50,39,.1); }
.home-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:32px 36px; border-bottom:1px solid var(--line); background:linear-gradient(120deg,#fbfdfb,#edf6f1); }
.home-heading h1 { margin:7px 0 7px; font-size:30px; letter-spacing:-.03em; }
.home-heading p { margin:0; color:var(--muted); }
.home-actions { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.home-action { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:12px; padding:10px 14px; color:var(--green); font-size:12.5px; font-weight:850; line-height:1; text-decoration:none; white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease; }
.home-action:hover { transform:translateY(-1px); }
.home-action:focus-visible { outline:3px solid rgba(19,116,87,.18); outline-offset:2px; }
.home-action-icon { width:26px; height:26px; display:grid; flex:0 0 26px; place-items:center; border-radius:8px; background:#e5f1eb; }
.home-action-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.home-action-secondary { border:1px solid #c6d8cf; background:rgba(255,255,255,.9); box-shadow:0 2px 7px rgba(13,98,72,.05); }
.home-action-secondary:hover { border-color:#9ebdaf; background:white; box-shadow:0 7px 18px rgba(13,98,72,.1); }
.home-action-primary { border:1px solid var(--green); background:var(--green); color:white; box-shadow:0 7px 16px rgba(13,98,72,.19); }
.home-action-primary:hover { border-color:#0a553e; background:#0a5942; box-shadow:0 10px 22px rgba(13,98,72,.24); }
.home-action-primary .home-action-icon { background:rgba(255,255,255,.15); }
.home-action-badge { min-width:22px; height:22px; display:inline-grid; place-items:center; border-radius:11px; background:#dceee5; color:var(--green); font-size:10px; font-weight:900; }
.primary-action { border:1px solid var(--green); background:var(--green); color:white; }
.secondary-action { border:1px solid #b9cec4; background:white; color:var(--green); }
.home-content { display:grid; grid-template-columns:420px minmax(0,1fr); min-height:520px; }
.home-calendar { padding:32px; border-right:1px solid var(--line); }
.home-calendar-days { gap:8px; }
.day-agenda { min-width:0; padding:32px; background:#fbfcfb; }
.agenda-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:20px; }
.agenda-heading span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.agenda-heading h2 { margin:5px 0 0; font-size:20px; text-transform:capitalize; }
.agenda-heading > strong { flex:0 0 auto; padding:7px 10px; border-radius:15px; background:#e4f1eb; color:var(--green); font-size:11px; }
.day-events { display:grid; gap:9px; max-height:400px; overflow:auto; padding-right:5px; }
.agenda-shift-group { display:grid; gap:9px; }
.agenda-shift-group + .agenda-shift-group { margin-top:13px; padding-top:18px; border-top:1px solid var(--line); }
.shift-group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 3px; }
.shift-group-heading h3 { margin:0; color:var(--green); font-size:15px; }
.shift-group-heading span { color:var(--muted); font-size:10px; font-weight:800; }
.shift-events { display:grid; gap:9px; }
.agenda-event { position:relative; display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:10px; overflow:hidden; padding:8px 12px; border:1px solid var(--line); border-radius:11px; background:white; }
.agenda-event::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#bd8122; }
.agenda-event.reserved::before { background:var(--green); }
.event-time { display:grid; padding-right:12px; border-right:1px solid var(--line); }
.event-time strong { font-size:14px; }
.event-time span,.event-content span { color:var(--muted); font-size:11px; }
.event-content small { color:var(--muted); font-size:11px; line-height:1.4; }
.agenda-event.public-event { grid-template-columns:58px minmax(0,1fr); padding:10px 15px; }
.event-content { min-width:0; display:grid; gap:2px; }
.event-content strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.event-content .event-organizer { color:#40534b; font-size:10px; font-weight:700; }
.event-type { padding:5px 8px; border-radius:10px; background:#f5eee1; color:#805a1d; font-size:10px; font-weight:900; }
.agenda-event.reserved .event-type { background:#e6f2ec; color:var(--green); }
.empty-day { display:grid; justify-items:center; gap:5px; padding:70px 20px; color:var(--muted); text-align:center; }
.empty-day > span { display:grid; width:46px; height:46px; margin-bottom:5px; place-items:center; border-radius:50%; background:#e4f1eb; color:var(--green); font-size:22px; }
.empty-day p { margin:0; font-size:12px; }
.appointment-shell { min-height:620px; display:grid; grid-template-columns:340px minmax(0,1fr); overflow:hidden; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 18px 50px rgba(19,50,39,.1); }
.appointment-info { padding:42px 36px; border-right:1px solid var(--line); background:linear-gradient(180deg,#fbfdfb,#f2f7f4); }
.back-link { display:block; margin:0 0 28px; border:0; padding:0; background:transparent; color:var(--green); font-size:12px; font-weight:900; }
.appointment-info h1 { margin:8px 0 12px; font-size:31px; letter-spacing:-.03em; }
.appointment-info > p { margin:0 0 30px; color:var(--muted); line-height:1.55; }
.booking-method-switch { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 0 24px; padding:4px; border-radius:11px; background:#e3ece7; }
.booking-method-switch button { border:0; border-radius:8px; padding:10px 8px; background:transparent; color:var(--muted); font-size:11px; font-weight:900; }
.booking-method-switch button.active { background:white; color:var(--green); box-shadow:0 2px 8px rgba(19,50,39,.1); }
.info-row { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.info-row div { display:grid; gap:3px; }
.info-row small,.period-note small { color:var(--muted); }
.field-label { display:grid; gap:7px; margin-top:17px; color:#3f4d47; font-size:12px; font-weight:800; }
.field-label small { color:var(--muted); font-weight:500; }
.field-label select,.field-label input,.field-label textarea { width:100%; border:1px solid #cdd9d2; border-radius:10px; padding:12px; outline:none; background:white; color:var(--ink); }
.field-label select:focus,.field-label input:focus,.field-label textarea:focus { border-color:var(--green-2); box-shadow:0 0 0 3px rgba(19,116,87,.1); }
.selected-room-issue { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; margin-top:14px; padding:12px; border:1px solid #e7bf63; border-left:4px solid #c37b08; border-radius:11px; background:linear-gradient(135deg,#fff9e9,#fff4d5); color:#593806; box-shadow:0 7px 18px rgba(145,91,9,.11); }
.selected-room-issue-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#f7df9d; color:#875407; }
.selected-room-issue-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.9; }
.selected-room-issue > div { min-width:0; }
.selected-room-issue strong { display:block; margin:1px 0 6px; color:#6b4104; font-size:11.5px; line-height:1.3; }
.selected-room-issue ul { display:grid; gap:4px; margin:0; padding-left:16px; font-size:11px; line-height:1.35; }
.selected-room-issue li::marker { color:#b16d06; }
.selected-room-issue p { margin:8px 0 0; padding-top:7px; border-top:1px solid rgba(159,84,5,.2); color:#8d2424; font-size:10.5px; font-weight:900; line-height:1.35; }
.selected-room-issue.blocked { border-color:#e4a9a9; border-left-color:var(--red); background:linear-gradient(135deg,#fff6f3,#ffe8e4); color:#712c2c; }
.selected-room-issue.blocked .selected-room-issue-icon { background:#f8d6d2; color:var(--red); }
.selected-room-issue.blocked strong { color:#7c2929; }
.period-note { display:grid; gap:3px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.appointment-picker { min-width:0; padding:40px; }
.picker-title { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px; }
.picker-title span { color:var(--muted); font-size:11px; font-weight:800; }
.picker-title h2 { margin:4px 0 0; font-size:22px; }
.picker-title button { border:0; border-radius:9px; padding:9px 12px; background:#edf3f0; color:var(--green); font-weight:800; }
.calendar-layout { display:grid; grid-template-columns:minmax(300px,1fr) 190px; gap:32px; }
.calendar-card { min-width:0; }
.calendar-head { display:grid; grid-template-columns:36px 1fr 36px; align-items:center; margin-bottom:14px; text-align:center; text-transform:capitalize; }
.calendar-head button { width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--green); font-size:25px; }
.calendar-head button:hover { background:#edf5f1; }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.calendar-weekdays span { padding:8px 0; color:var(--muted); font-size:11px; font-weight:800; text-align:center; }
.calendar-days button,.calendar-days > span { aspect-ratio:1; min-width:0; border:0; border-radius:50%; background:transparent; color:var(--ink); font-size:13px; }
.calendar-days button:hover { background:#e4f2eb; }
.calendar-days button.selected { background:var(--green); color:white; font-weight:900; }
.calendar-days button.today:not(.selected) { outline:1px solid var(--green); color:var(--green); font-weight:900; }
.home-calendar-days button.has-event::after { content:""; position:absolute; left:50%; bottom:7px; width:6px; height:6px; border-radius:50%; background:var(--green); transform:translateX(-50%); }
.home-calendar-days button.has-event.selected::after { background:#f1d85b; }
.calendar-days button { position:relative; }
.calendar-days button:disabled { color:#c7ceca; cursor:default; }
.slots-panel { min-width:0; padding-left:24px; border-left:1px solid var(--line); }
.slots-panel h3 { margin:7px 0 6px; font-size:15px; text-transform:capitalize; }
.slots-panel > p { margin:0 0 14px; color:var(--muted); font-size:12px; line-height:1.4; }
.time-slots { display:grid; gap:8px; max-height:380px; overflow:auto; padding-right:4px; }
.time-slots button { border:1px solid #91bbaa; border-radius:8px; padding:10px; background:white; color:var(--green); font-weight:900; }
.time-slots button:hover { background:var(--green); color:white; }
.time-slots button.selected, .available-room-times button.selected { border-color:var(--green); background:var(--green); color:white; box-shadow:0 0 0 3px rgba(19,115,82,.14); }
.portal-message { min-height:20px; margin:18px 0 0; color:var(--green); font-size:13px; }
.date-room-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.date-room-controls-expanded { grid-template-columns:1.1fr .9fr .9fr; }
.date-room-controls .field-label { margin-top:0; }
.date-room-help { margin:15px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.available-rooms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; max-height:410px; overflow:auto; padding-right:5px; }
.available-room-card { min-width:0; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fbfdfc; }
.available-room-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.available-room-head > div { min-width:0; display:grid; gap:2px; }
.available-room-head span { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.available-room-head strong { overflow:hidden; color:var(--green); font-size:15px; line-height:1.25; text-overflow:ellipsis; }
.available-room-head small,.available-room-card > p { color:var(--muted); font-size:10px; }
.available-room-times { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.available-room-times button { display:grid; gap:1px; border:1px solid #9bc4b3; border-radius:8px; padding:7px; background:white; color:var(--green); font-size:12px; font-weight:900; }
.available-room-times button small { font-size:9px; font-weight:500; }
.available-room-times button:hover { background:var(--green); color:white; }
.selected-slots-bar { display:grid; grid-template-columns:minmax(180px,auto) minmax(0,1fr) auto; align-items:center; gap:14px; margin:22px 0 0; padding:14px; border:1px solid #9bc4b3; border-radius:12px; background:#edf8f2; }
.selected-slots-bar > div:first-child { display:grid; gap:2px; }
.selected-slots-bar > div:first-child span { color:var(--muted); font-size:11px; }
.selected-slots-chips { display:flex; flex-wrap:wrap; gap:6px; max-height:120px; overflow:auto; padding:2px; }
.selected-slots-chips button { display:flex; align-items:center; gap:5px; flex:0 0 auto; border:1px solid #bdd9cd; border-radius:999px; padding:6px 9px; background:white; color:var(--ink); font:inherit; font-size:10px; cursor:pointer; }
.selected-slots-chips button span { color:var(--muted); }
.selected-slots-bar > button { border:0; border-radius:9px; padding:11px 18px; background:var(--green); color:white; font:inherit; font-weight:900; cursor:pointer; }
.available-room-card > p { margin:9px 0 0; }
.booking-details-step { max-width:540px; margin:0 auto; }
.selected-slot-summary { display:flex; gap:14px; padding:16px; border-radius:12px; background:#eaf5ef; }
.selected-slot-summary > span { display:grid; width:30px; height:30px; flex:0 0 auto; place-items:center; border-radius:50%; background:var(--green); color:white; }
.selected-slot-summary p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.5; text-transform:capitalize; }
.selected-slot-summary ul { display:grid; gap:7px; margin:10px 0 0; padding:0; list-style:none; }
.selected-slot-summary li { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #cfe2d9; padding-top:7px; }
.selected-slot-summary li small { color:var(--muted); text-align:right; text-transform:capitalize; }
.confirm-booking { width:100%; margin-top:20px; border:0; border-radius:10px; padding:13px; background:var(--green); color:white; font-weight:900; }
.confirm-booking:disabled { opacity:.55; cursor:wait; }
.booking-success-dialog { width:min(440px,calc(100% - 28px)); max-height:calc(100vh - 28px); overflow-y:auto; border:0; border-radius:18px; padding:30px; color:var(--ink); text-align:center; box-shadow:0 28px 90px rgba(4,31,23,.3); }
.booking-success-dialog::backdrop { background:rgba(7,35,27,.58); backdrop-filter:blur(3px); }
.booking-success-dialog .success-mark { display:grid; width:56px; height:56px; margin:0 auto 14px; place-items:center; border-radius:50%; background:#dff2e8; color:var(--green); font-size:29px; font-weight:900; }
.booking-success-dialog h2 { margin:8px 0 12px; font-size:24px; }
.booking-success-dialog > p { margin:0; color:var(--muted); line-height:1.55; text-transform:capitalize; }
.booking-calendar-status { display:grid; align-content:start; gap:9px; max-height:min(280px,35vh); overflow-y:auto; margin-top:18px; border-radius:10px; padding:12px; background:#e8f4ee; color:var(--green); font-size:12px; font-weight:800; line-height:1.45; }
.booking-calendar-status > span { display:block; }
.booking-calendar-status a { display:inline-flex; min-height:40px; align-items:center; justify-content:center; border:1px solid #9bc4b3; border-radius:9px; padding:9px 12px; background:white; color:var(--green); font-weight:900; text-decoration:none; }
.booking-success-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px; }
.booking-success-actions button { border-radius:9px; padding:11px 10px; font-weight:900; }
.my-bookings-page { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 18px 50px rgba(19,50,39,.1); }
.my-bookings-heading { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:22px; padding:32px 36px; border-bottom:1px solid var(--line); background:linear-gradient(120deg,#fbfdfb,#edf6f1); }
.my-bookings-heading .back-link { grid-column:1/-1; display:inline-flex; width:max-content; min-height:36px; align-items:center; justify-content:center; justify-self:start; margin:0; border:1px solid #b9cec4; border-radius:9px; padding:8px 12px; background:white; line-height:1.2; box-shadow:0 2px 7px rgba(19,50,39,.06); }
.my-bookings-heading .back-link:hover { background:#edf5f1; }
.my-bookings-heading .section-title { display:block; min-width:0; }
.my-bookings-title-row { display:flex; align-items:center; gap:12px; min-width:0; }
.my-bookings-heading .section-title h1 { margin:5px 0 6px; font-size:30px; letter-spacing:-.03em; }
.my-bookings-title-row > strong { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:50%; background:#e5f1eb; color:var(--green); }
.my-bookings-heading .section-title p { margin:0; color:var(--muted); }
.my-bookings-heading > .primary-action { border-radius:10px; padding:12px 16px; font-weight:900; }
.my-bookings-content { min-height:420px; padding:28px 36px; }
.section-title { display:flex; align-items:center; justify-content:space-between; }
.section-title h2 { margin:4px 0 0; font-size:20px; }
.section-title > strong { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:#e5f1eb; color:var(--green); }
#roomMyBookings { display:grid; gap:8px; margin-top:16px; }
.my-booking-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:15px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.booking-date { display:grid; place-items:center; padding:6px; border-radius:8px; background:#edf5f1; color:var(--green); }
.booking-date strong { font-size:19px; }
.booking-date span { font-size:10px; font-weight:900; text-transform:uppercase; }
.my-booking-card > div:nth-child(2) { display:grid; gap:3px; }
.my-booking-card span,.my-booking-card small,.empty-bookings { color:var(--muted); font-size:11px; }
.my-booking-card button { border:0; border-radius:7px; padding:9px 12px; background:#fff0f0; color:var(--red); font-weight:800; }
footer { display:grid; gap:4px; padding:22px 12px 0; color:var(--muted); font-size:11px; line-height:1.4; text-align:center; }
footer strong { color:#465750; font-size:11px; }
footer span { font-size:10px; }
@media(max-width:780px) {
  #roomPortalApp { width:min(100% - 20px,1120px); }
  .portal-user div { display:none; }
  .portal-header-actions { gap:7px; }
  .portal-guest-copy { display:none; }
  .portal-brand img { width:190px; height:48px; }
  .home-heading { align-items:stretch; flex-direction:column; padding:24px; }
  .home-heading h1 { font-size:26px; }
  .home-actions { display:grid; grid-template-columns:1fr 1fr; }
  .home-actions .home-action { min-width:0; padding:10px 11px; font-size:12px; }
  #startRoomBooking { grid-column:1 / -1; }
  .home-content { grid-template-columns:1fr; }
  .home-calendar { padding:24px; border-right:0; border-bottom:1px solid var(--line); }
  .day-agenda { padding:24px; }
  .day-events { max-height:none; }
  .appointment-shell { grid-template-columns:1fr; }
  .appointment-info { padding:25px; border-right:0; border-bottom:1px solid var(--line); }
  .appointment-info h1 { font-size:26px; }
  .appointment-info > p { margin-bottom:20px; }
  .info-row,.period-note { display:none; }
  .appointment-picker { padding:25px; }
  .calendar-layout { grid-template-columns:1fr; gap:25px; }
  .slots-panel { padding:20px 0 0; border-left:0; border-top:1px solid var(--line); }
  .time-slots { grid-template-columns:repeat(3,1fr); max-height:none; }
  .available-rooms { grid-template-columns:1fr; max-height:none; }
  .available-room-times { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .selected-slots-bar { grid-template-columns:1fr; align-items:stretch; }
  .selected-slots-bar > button { width:100%; }
  .my-bookings-heading { grid-template-columns:1fr; align-items:stretch; padding:24px; }
  .my-bookings-heading .section-title h1 { font-size:26px; }
  .my-bookings-heading > .primary-action { width:100%; }
  .my-bookings-content { min-height:360px; padding:22px 24px; }
  .my-booking-card { grid-template-columns:42px minmax(0,1fr); }
  .my-booking-card button { grid-column:2; justify-self:start; }
}
@media(max-width:420px) {
  .portal-header { padding:12px 0; }
  .portal-brand img { width:160px; }
  .portal-guest-actions { min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }
  .portal-guest-icon { display:none; }
  .portal-brand .brand-sector { max-width:160px; font-size:7.5px; }
  .appointment-info,.appointment-picker { padding:20px; }
  .home-heading,.home-calendar,.day-agenda { padding:20px; }
  .agenda-event { grid-template-columns:52px minmax(0,1fr); }
  .event-type { display:none; }
  .picker-title h2 { font-size:19px; }
  .calendar-weekdays,.calendar-days { gap:2px; }
  .time-slots { grid-template-columns:repeat(2,1fr); }
  .date-room-controls { grid-template-columns:1fr; }
  .selected-slot-summary li { align-items:flex-start; flex-direction:column; gap:2px; }
  .selected-slot-summary li small { text-align:left; }
  .available-room-times { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .booking-success-actions { grid-template-columns:1fr; }
}