header {align-items: center; flex-wrap: wrap;}
main {max-width: 920px;}
.login-dialog {width: min(440px,calc(100vw - 24px)); max-width: 440px; max-height: min(92dvh,620px); overflow: auto; margin: auto; padding: 18px; border: 1px solid #c5d3da; border-radius: 16px; background: #fff; color: #263e49; box-shadow: 0 18px 60px #102c3b38;}
.login-dialog::backdrop {background: #102c3b88; backdrop-filter: blur(2px);}
#login {padding: 0;}
#login h2 {margin: 0 0 5px; font-size: 21px;}
#login>p {margin: 5px 0 10px; font-size: 13px; line-height: 1.35;}
#login form {display: grid; gap: 7px; margin: 0;}
#login label {display: grid; gap: 4px; font-size: 13px;}
#email,#login-code {box-sizing: border-box; width: 100%; max-width: 100%; min-height: 42px;}
.guest-code-field {position: relative; display: block; width: 208px; max-width: 100%; height: 48px; margin-top: 4px;}
.guest-code-cells {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; height: 100%; pointer-events: none;}
.guest-code-cells span {display: grid; place-items: center; border: 1px solid #91a6b0; border-radius: 9px; background: #fff; color: #193d50; font: 600 23px ui-monospace,monospace;}
.guest-code-field:focus-within .guest-code-cells span[data-active=true] {outline: 2px solid #0877d9; outline-offset: 1px;}
#login-code {position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; min-height: 0; margin: 0; opacity: .01; color: transparent; caret-color: transparent; font-size: 22px; cursor: text;}
@media (forced-colors:active) {.guest-code-cells {visibility: hidden;}
#login-code {opacity: 1; color: CanvasText; caret-color: auto;}}
#login .muted {margin: 0; font-size: 12px; line-height: 1.35;}
.login-brand {display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 5px;}
.login-brand img {display: block; flex: none; width: 40px; height: 40px; border-radius: 9px;}
.login-brand h2 {margin: 0 !important; font-size: 19px !important; line-height: 1.1; letter-spacing: .045em;}
.login-brand small {display: block; margin-top: 2px; color: #586773; font-size: 11px; line-height: 1.2;}
.login-code-feedback {display: flex; align-items: center; gap: 7px; min-height: 26px; margin: 0; font-size: 12px; line-height: 1.3; color: #586773;}
.login-code-icon {display: none; flex: none; width: 16px; height: 16px; box-sizing: border-box;}
.login-code-feedback[data-state=checking] .login-code-icon {display: block; border: 2px solid #8fa7b4; border-top-color: #007aff; border-radius: 50%; animation: login-checking .7s linear infinite;}
.login-code-feedback[data-state=success] {color: #18713d; font-weight: 650;}
.login-code-feedback[data-state=success] .login-code-icon {display: grid; place-items: center; border-radius: 50%; background: #1b8749; color: #fff; font-size: 12px; line-height: 1;}
.login-code-feedback[data-state=success] .login-code-icon::before {content: '✓';}
.login-code-feedback[data-state=error] {color: #b42318;}
@keyframes login-checking {to {transform: rotate(360deg);} }
@media (prefers-reduced-motion:reduce) {.login-code-feedback[data-state=checking] .login-code-icon {animation: none; border-color: #007aff;}}
#verify-form {padding-top: 8px; border-top: 1px solid #d9e1e6;}
#verify-form button {margin: 0 6px 0 0; min-height: 42px;}
.booking-heading {display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;}
.booking-heading h2 {margin: 0;}
.badge {padding: 6px 10px; border-radius: 6px; background: #edf2f5; color: #334e5a; font-size: 14px;}
.booking-card[data-state=confirmed] {border-left: 4px solid #398364;}
.booking-card[data-state=selected],.booking-card[data-state=offered] {border-left: 4px solid #2e639a;}
.booking-card[data-state=cancelled],.booking-card[data-state=declined] {border-left: 4px solid #a36565;}
.booking-card p {margin: 10px 0; overflow-wrap: anywhere;}
.help {text-align: center; margin-top: 28px;}
#status:empty {min-height: 0; margin: 0;}
#email-help {margin-top: -2px; font-size: 12px;}
header.workspace-footer {justify-content: center; margin-top: 20px; padding: 12px 16px; background: #f3f6f8; color: #465e6c; font-size: 14px; gap: 8px 18px;}
header.workspace-footer strong {letter-spacing: .08em;}
@media (max-width:600px) {header {padding: 16px;}
.login-dialog {width: calc(100vw - 12px); max-height: calc(100dvh - 8px); padding: 14px; border-radius: 14px; transform: translateY(-2dvh);}
#email-form button,#verify-form button {min-height: 42px;}
.booking-card button {width: 100%;}}
@media (prefers-reduced-motion:no-preference) {.login-dialog[open] {animation: login-appear .14s ease-out;}
@keyframes login-appear {from {opacity: 0; transform: translateY(6px) scale(.99);} 
to {opacity: 1; transform: translateY(0) scale(1);} }}
.guest-profile {margin: 12px 0; padding: 12px; border: 1px solid #d2d2d7; border-radius: 14px; background: #fff;}
.guest-profile>summary {font-size: 17px; font-weight: 700; cursor: pointer;}
.guest-profile form {display: grid; gap: 14px; margin-top: 12px;}
.guest-profile-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px;}
.guest-profile-grid input {width: 100%;}
.optional {color: #6e6e73; font-size: 12px; font-weight: 400;}
.guest-profile-photo {display: flex; align-items: center; gap: 14px;}
.guest-profile-photo img {width: 78px; height: 78px; border-radius: 50%; object-fit: cover;}
.guest-email-history {padding: 12px; border-radius: 12px; background: #f5f5f7;}
.guest-email-history p {margin: 5px 0;}
.alternate-email {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;}
.alternate-email input {flex: 1; min-width: 180px;}
@media (max-width:600px) {.guest-profile-grid {grid-template-columns: 1fr;}
.guest-profile {border: 0; margin-inline: -4px; padding: 10px;}
.alternate-email {display: grid;}
.alternate-email input,.alternate-email button {width: 100%;}}
.client-status {margin: 16px 0; padding: 14px 16px; border: 1px solid color-mix(in srgb,currentColor 14%,transparent); border-radius: 16px; background: color-mix(in srgb,currentColor 4%,transparent);}
.client-status:empty {display: none;}
.client-status strong {display: block;}
.client-status small {display: block; margin-top: 4px; color: #8e8e93;}
.client-status button {margin-top: 10px;}
.client-status.update-required {border-color: #ff9f0a; background: #fff7e8;}
.client-status.update-required small {color: #8a4b00;}
.empty-cabinet {max-width: 680px; margin: 14px auto; padding: 14px; border: 1px solid #d2d2d7; border-radius: 18px; background: #f5f5f7;}
.empty-chat-message {max-width: 82%; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: 0 1px 4px #00000012;}
.empty-chat-message p {margin: 5px 0;}
.empty-cabinet form {margin-top: 16px; padding-top: 12px; border-top: 1px solid #d2d2d7;}
.empty-cabinet form>div {display: grid; grid-template-columns: 1fr 1fr 110px; gap: 8px;}
.empty-cabinet input {width: 100%;}
@media (max-width:600px) {.empty-cabinet form>div {grid-template-columns: 1fr 1fr;}
.empty-cabinet form>div label:last-child {grid-column: 1/-1;}
.empty-chat-message {max-width: 94%;}}
.empty-chat-message .chat-emojis>div {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px;}
.empty-chat-message .chat-emojis button {display: grid; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; place-items: center; border: 1px solid #d2d2d7; border-radius: 11px; background: #fff; color: #1d1d1f; font: 24px/1 "Apple Color Emoji","Segoe UI Emoji",sans-serif; box-shadow: 0 1px 2px #0000000f;}
.empty-chat-message #empty-chat-voice[aria-pressed=true] {background: #b42318; color: #fff; border-color: #b42318; animation: empty-voice-pulse 1.2s ease-in-out infinite;}
@keyframes empty-voice-pulse {50% {box-shadow: 0 0 0 6px #b4231822;} }
@media (prefers-reduced-motion:reduce) {.empty-chat-message #empty-chat-voice[aria-pressed=true] {animation: none;}}
.empty-catalog-button {display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; border-radius: 12px; background: #0a84ff; color: #fff; font-weight: 700; text-decoration: none;}
.empty-generic-request {margin-top: 10px;}
.empty-generic-request>summary {color: #526774;}
.offline-guides {display: grid; gap: 8px; margin: 0 0 12px;}
.offline-guides article {padding: 10px 12px; border: 1px solid var(--line,#cbd5dc); border-radius: 12px; background: var(--surface,#fff);}
.offline-guides strong,.offline-guides small {display: block;}
.offline-guides small {margin-top: 2px; color: var(--muted,#60717b); font-size: 11px;}
.offline-guides p {white-space: pre-wrap; margin: 7px 0 0; font-size: 13px; line-height: 1.4; max-height: 12em; overflow: auto;}
.empty-chat-message .chat-pinned {display: grid; gap: 7px; margin: 10px 0;}
.chat-pinned:empty {display: none;}
.chat-request {padding: 9px 11px; border: 1px solid #d9a441; border-left: 4px solid #ff9f0a; border-radius: 11px; background: #fff8e9; color: #242424;}
.chat-request strong {font-size: 13px;}
.chat-request p {margin: 4px 0 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;}
body[data-cabinet=guest] main {position: relative; font-size: var(--guest-font-size,16px);}
body[data-cabinet=guest] main>h1 {display: none;}
.guest-screen-header {display: grid; grid-template-columns: minmax(0,1fr) auto 42px; align-items: center; gap: 8px; min-height: 48px; padding: 2px 4px 6px; border-bottom: 1px solid var(--messenger-line,#d2d2d7);}
.guest-screen-header h2 {margin: 0; font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.guest-settings-open {display: grid; width: 42px; min-width: 42px; height: 42px; min-height: 42px; place-items: center; padding: 0; border: 0; background: transparent !important; color: var(--messenger-muted,#586773) !important; box-shadow: none !important; font-size: 22px;}
#account-email {margin: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw;}
.guest-profile[open] {margin: 0; padding: 8px 4px; border: 0; background: transparent !important;}
.guest-profile[open]>summary {display: none;}
.guest-profile form {gap: 7px; margin-top: 0;}
.guest-profile-grid {gap: 5px 7px;}
.guest-profile-grid label,.guest-profile-photo label {font-size: 11px;}
.guest-profile-grid input {min-height: 36px; padding: 6px 8px;}
.guest-profile-photo {gap: 8px;}
.guest-profile-photo img {width: 52px; height: 52px;}
.guest-email-history {padding: 8px; border-radius: 10px;}
.guest-email-history p {font-size: 12px; line-height: 1.35;}
.guest-profile-extra {border: 0; margin: 0; padding: 0;}
.guest-profile-extra>summary {padding: 8px 0; font-size: 12px; color: var(--messenger-muted,#6e6e73); cursor: pointer;}
.guest-settings {display: grid; gap: 10px; padding: 4px;}
.guest-settings h2 {margin: 0; font-size: 18px;}
.guest-settings>label {font-size: 13px; font-weight: 650;}
.guest-settings>input[type=range] {width: 100%; accent-color: var(--messenger-accent,#007aff);}
.guest-settings .theme-settings,.guest-settings .client-status {margin: 0; padding: 9px;}
.guest-settings>#logout {justify-self: start;}
body[data-cabinet=guest] .workspace-footer {display: none !important;}
.request-picker {display: grid; gap: 10px;}
.request-selected {margin: 0 !important; font-size: 13px; font-weight: 650; color: var(--messenger-accent,#007aff);}
.request-special-timing {border: 1px solid #cddce4; border-radius: 10px;}
.request-special-timing legend {font-weight: 700;}

.request-special-timing label[hidden] {display: none !important;}
.request-special-timing input[type=time] {border: 1px solid #a9bdc8; border-radius: 7px;}
.request-special-timing small {color: #526774;}
@media (max-width:520px) {}
.request-calendar {max-width: 390px; border: 1px solid var(--messenger-line,#d2d2d7); border-radius: 14px; padding: 7px;}
.request-calendar-head {display: grid !important; grid-template-columns: 44px 1fr 44px !important; align-items: center; gap: 2px !important;}
.request-calendar-head strong {text-align: center; text-transform: capitalize;}
.request-calendar-head button,.request-calendar-days button,.request-guest-choices button,.request-guest-stepper button {min-width: 40px; min-height: 40px; padding: 5px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: inherit;}
.request-calendar-days {display: grid !important; grid-template-columns: repeat(7,1fr) !important; gap: 2px !important;}
.request-calendar-days small {text-align: center; font-size: 10px; color: var(--messenger-muted,#6e6e73);}
.request-calendar-days button {min-width: 0;}
.request-calendar-days button.outside {opacity: .38;}
.request-calendar-days button.range {background: color-mix(in srgb,var(--messenger-accent,#007aff) 14%,transparent);}
.request-calendar-days button.edge {background: var(--messenger-accent,#007aff); color: #fff;}
.request-calendar-days button:disabled {opacity: .22;}
.request-guests {display: grid; gap: 5px;}
.request-guest-choices,.request-guest-stepper {display: flex !important; gap: 5px !important;}
.request-guest-choices button {flex: 1; border: 1px solid var(--messenger-line,#d2d2d7);}
.request-guest-choices button.selected {background: var(--messenger-accent,#007aff); color: #fff;}
.request-guest-stepper {align-items: center;}
.request-guest-stepper strong {min-width: 42px; text-align: center; font-size: 18px;}
.request-guest-stepper button {border: 1px solid var(--messenger-line,#d2d2d7); font-size: 21px;}
.request-optional-name {display: grid; gap: 4px; font-size: 12px; color: var(--messenger-muted,#6e6e73);}
.request-optional-name input {width: 100%; box-sizing: border-box;}
.request-name-review {margin: 6px 10px; color: var(--messenger-muted,#6e6e73); font-size: 13px;}
.request-name-review-actions {display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 10px;}
.request-name-review-actions button {min-height: 36px; font-size: 12px;}
@media (max-width:700px) {body[data-cabinet=guest] {padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;}
.guest-screen-header {position: sticky; top: 0; z-index: 20; background: var(--messenger-bg,#fff);}
body[data-cabinet=guest] .guest-bottom-nav {height: calc(48px + env(safe-area-inset-bottom)); box-sizing: border-box; padding: 2px 2px env(safe-area-inset-bottom);}
body[data-cabinet=guest] .guest-bottom-nav :is(a,button) {min-height: 44px; padding: 2px; font-size: 10px; line-height: 1.1;}
body[data-cabinet=guest] .empty-chat-message>.chat-messages {min-height: calc(100dvh - 260px); max-height: calc(100dvh - 230px);}
body[data-cabinet=guest] .guest-profile-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
body[data-cabinet=guest] .guest-profile {margin: 0; padding: 4px 0;}
body[data-cabinet=guest] .guest-profile form {gap: 6px;}
body[data-cabinet=guest] .alternate-email {display: grid; grid-template-columns: 1fr auto;}
body[data-cabinet=guest] .alternate-email input,body[data-cabinet=guest] .alternate-email button {width: auto; min-width: 0;}}
#login [hidden] {display: none !important;}
#login-status {font-size: 12px; line-height: 1.35; margin: 6px 0 0;}
#login-status:empty {display: none;}
#login .guest-code-field {display: block; height: 48px;}
#login .guest-code-cells {display: grid; grid-template-columns: repeat(4,1fr); height: 48px;}
#login .guest-code-cells>span {min-height: 46px;}
.request-received,.app-install-invite {margin: 4px 0; padding: 7px 8px; background: #f1f6f5; border: 1px solid #d5e1df; border-radius: 7px; font-size: 12px; line-height: 1.35;}
.app-install-invite {display: flex; align-items: center; gap: 8px;}
.app-install-invite a {flex: none; font-size: 12px; padding: 5px;}
.request-received[hidden],.app-install-invite[hidden] {display: none !important;}
.request-waiting-note {display: block; font-size: 11px; line-height: 1.35; color: #53696a; margin-top: 3px; white-space: normal;}
button[aria-disabled=true] {opacity: .4; cursor: default;}