.services-page { background: #f8f9fc; }
.service-shell { min-height: 100vh; }
.service-shell.sidebar-collapsed { padding-left: var(--sidebar-collapsed); }
.service-shell.sidebar-collapsed .service-save-bar { left: var(--sidebar-collapsed); }
.service-admin { width: 100%; max-width: none; margin: 0; }
.service-shell .app-sidebar.collapsed ~ .sidebar-scrim + .service-admin { margin-left: 0; }
.service-page-header, #service-admin-status, .service-admin-grid { width: 100%; }
#services-plan-lock { width: 100%; margin: 0 0 18px; }
@media (max-width: 767px) { #services-plan-lock > .button-link { grid-column: 1 / -1; width: 100%; } }
.service-page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.service-page-heading { display: flex; align-items: center; gap: 10px; }
.service-page-header h1 { margin: 0; color: #0e1837; font-size: 30px; letter-spacing: -.04em; }
.service-page-header p { margin: 3px 0 0; color: #647391; font-size: 13px; }
#service-admin-status { margin: 0 auto 8px; color: #647391; font-size: 12px; }
#service-admin-status:empty { display: none; }
.service-admin-grid { display: grid; grid-template-columns: 265px minmax(0,1fr); gap: 12px; align-items: start; }
.service-editor-column, #service-form { min-width: 0; display: grid; gap: 12px; }
#service-form[hidden], .staff-admin[hidden], .service-save-bar[hidden] { display: none; }
.settings-card { min-width: 0; border: 1px solid #dfe5f0; border-radius: 11px; background: #fff; padding: 18px 20px; box-shadow: none; }
.settings-card h2 { margin: 0; color: #0f1a39; font-size: 17px; line-height: 1.25; letter-spacing: -.02em; }
.card-heading { margin-bottom: 16px; }
.card-heading p { margin: 4px 0 0; color: #657390; font-size: 12px; }
.card-heading-inline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.service-context { padding: 16px; min-height: 560px; }
.service-context h2 { margin: 0 0 14px; }
#new-service { width: 100%; margin-bottom: 12px; font-size: 12px; }
.service-search { position: relative; margin-bottom: 10px; }
.service-search-icon { position: absolute; top: 50%; left: 11px; width: 16px; height: 16px; transform: translateY(-50%); color: #8693ac; pointer-events: none; }
#service-search { padding-left: 36px; }
.service-context input, .service-context select { min-height: 34px; height: 34px; font-size: 12px; }
.service-list { display: grid; gap: 6px; margin: 14px 0; padding: 0; list-style: none; }
.service-list button { display: grid; width: 100%; gap: 5px; min-height: 60px; border: 1px solid #e1e6ef; border-radius: 7px; background: #fff; padding: 9px 10px; color: #0e1936; text-align: left; }
.service-list button:hover, .service-list button[aria-current="true"] { border-color: #665dff; background: #f5f4ff; }
.service-list-title { font-size: 12px; font-weight: 700; }
.service-list-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: #63708e; font-size: 11px; font-weight: 400; }
#catalogue-link { margin: 18px 0 0; }
#catalogue-link a { color: var(--accent); font-size: 12px; }
#embed-service-catalogue { width: 100%; margin-top: 10px; font-size: 12px; }
.service-skeleton { height: 61px; border-radius: 7px; background: linear-gradient(90deg,#f1f3f8,#f8f9fc,#f1f3f8); background-size: 200% 100%; animation: service-skeleton 1.2s linear infinite; }
.editor-skeleton { height: 135px; margin-bottom: 12px; background: linear-gradient(90deg,#f1f3f8,#fff,#f1f3f8); background-size: 200% 100%; animation: service-skeleton 1.2s linear infinite; }
@keyframes service-skeleton { to { background-position: -200% 0; } }
.badge-row { display: flex; gap: 5px; flex-wrap: wrap; }
.badge { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: 5px 11px; background: #e9ecf2; color: #46516a; font-size: 10px; font-weight: 650; line-height: 1.1; white-space: nowrap; }
.badge-active { background: #dcf8e9; color: #087a46; }.badge-paused { background: #fff0d8; color: #8b5700; }.badge-payment { background: #eeecff; color: #4739d4; }.badge-neutral { background: #edf0f5; color: #4c5972; }
.service-editor-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 68px; padding: 14px 16px; }
.service-heading-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.service-editor-header h2 { font-size: 19px; }
.service-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.service-header-actions > button { min-height: 34px; font-size: 12px; white-space: nowrap; }
.service-menu-wrap { position: relative; flex: 0 0 auto; }
.service-menu-wrap > button { font-size: 12px; }
.service-action-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 5; min-width: 190px; border: 1px solid #dfe5f0; border-radius: 9px; background: #fff; box-shadow: 0 12px 28px #1820341e; padding: 5px; }
.service-action-menu[hidden], [hidden] { display: none !important; }
.service-action-menu button, .service-action-menu a { display: block; width: 100%; min-height: 34px; border: 0; border-radius: 5px; background: none; padding: 8px 10px; color: #152241; font-size: 12px; text-align: left; text-decoration: none; }
.service-action-menu button:hover, .service-action-menu a:hover { background: #f3f4fc; }.service-action-menu .danger-text { color: #b42318; }
.service-admin label { display: grid; gap: 5px; color: #3c4c70; font-size: 12px; font-weight: 650; }
.service-admin input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]), .service-admin select, .service-admin textarea { width: 100%; min-width: 0; min-height: 34px; border: 1px solid #d8dfed; border-radius: 7px; padding: 7px 10px; color: #172443; font-size: 12px; }
.service-admin textarea { resize: vertical; }
.service-admin input:focus, .service-admin select:focus, .service-admin textarea:focus { outline: 2px solid #d8d4ff; border-color: var(--accent); }
.service-admin label small, .service-admin .image-uploader small, .toggle-field small, .field-hint { color: #73809d; font-size: 11px; font-weight: 400; line-height: 1.4; }
.field-label { color: #3c4c70; font-size: 12px; font-weight: 650; }
.required { color: #c03730; }.optional { color: #657390; font-weight: 400; }
.field-error { color: #b42318; font-size: 11px; }.field-error:empty { display: none; }
.service-staff-warning { margin: 9px 0 0; padding: 10px 12px; border: 1px solid #f4c7c3; border-radius: 8px; background: #fff4f2; color: #9f261d; font-size: 12px; line-height: 1.4; }
.service-admin [aria-invalid="true"] { border-color: #b42318 !important; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.details-layout { display: grid; grid-template-columns: minmax(0,2.1fr) minmax(210px,1fr); gap: 20px; }
.details-main, .stacked-fields { display: grid; gap: 12px; }
.details-main .field-grid label, .details-main > label { display: block; }
.details-main .field-grid label input, .details-main > label input, .details-main > label textarea { margin-top: 5px; }
.category-field { display: grid; gap: 8px; align-content: start; }
.category-field select, .category-field input { margin-top: 5px; }
.details-main > label small { display: block; margin-top: 5px; }
.details-main textarea { min-height: 84px; }
.image-uploader { min-width: 0; display: grid; align-content: start; gap: 8px; }
.image-uploader-row { display: flex; align-items: start; gap: 10px; }
.service-image-frame { width: 110px; height: 110px; flex: 0 0 110px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #f0f2f7; color: #9da8be; font-size: 36px; }
.service-image-frame img { width: 100%; height: 100%; object-fit: cover; }
.image-actions { display: grid; gap: 6px; }
.image-actions button { white-space: nowrap; font-size: 11px; }
.text-button { min-height: 26px; border: 0; background: none; padding: 0; color: var(--accent); font-size: 11px; text-align: left; text-decoration: underline; }
.text-button:hover:not(:disabled) { background: none; color: var(--accent-dark); }
.staff-assignment-grid { display: grid; grid-template-columns: 1fr 1.1fr 1.05fr; gap: 16px; align-items: start; }
.staff-assignment-label { min-height: 36px; display: flex; align-items: center; }
.staff-assignment-field { min-width: 0; display: grid; gap: 5px; align-content: start; }
.eligible-heading { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.eligible-heading > span:last-child { display: flex; gap: 12px; }
.eligible-staff { display: grid; gap: 7px; border: 1px solid #e3e8f0; border-radius: 7px; padding: 10px; }
.eligible-staff .check { display: flex; align-items: center; gap: 8px; font-weight: 500; }.eligible-staff input { width: auto; accent-color: var(--accent); }
.eligible-staff .badge { padding: 3px 7px; }
#service-impact { margin: 10px 0 0; }
.currency-label { display: flex; align-items: center; gap: 8px; color: #657390; font-size: 11px; }.currency-label strong { border: 1px solid #d8dfed; border-radius: 6px; padding: 8px; color: #152241; }
.variant-row { display: grid; grid-template-columns: minmax(180px,.95fr) minmax(110px,1.1fr) minmax(110px,1fr) minmax(120px,1fr) 36px; gap: 8px; align-items: end; margin-bottom: 8px; }
.variant-row label { min-width: 0; }.variant-row button { min-height: 34px; padding: 0; }
.duration-input { display: flex; gap: 6px; min-width: 0; }
#variant-list .duration-input input { flex: 0 0 60px; width: 60px; min-width: 0; }
#variant-list .duration-input select { flex: 0 0 110px; width: 110px; min-width: 110px; }
.currency-input, .unit-input { display: flex; align-items: center; overflow: hidden; border: 1px solid #d8dfed; border-radius: 7px; background: #fff; }
.currency-input > span, .unit-input > span { flex: 0 0 auto; padding: 8px 10px; background: #f5f6fa; color: #52607d; font-size: 11px; }
.currency-input input, .unit-input input { border: 0 !important; border-radius: 0 !important; outline: none !important; }
.unit-input > span { border-left: 1px solid #d8dfed; }
.booking-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; align-items: start; }
.toggle-field { display: grid; gap: 5px; padding-top: 19px; }.service-toggle { display: flex !important; align-items: center; gap: 9px !important; cursor: pointer; }.service-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }.toggle-track { width: 36px; height: 21px; flex: 0 0 36px; border-radius: 20px; background: #b7becd; padding: 3px; }.toggle-track::after { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: white; }.service-toggle input:checked + .toggle-track { background: var(--accent); }.service-toggle input:checked + .toggle-track::after { transform: translateX(15px); }.service-toggle input:focus-visible + .toggle-track { outline: 3px solid #c9c4ff; }
.reminder-field { padding: 14px 0; }.questions-section { border-top: 1px solid #e5e8f0; padding-top: 14px; }.questions-section h3 { margin: 0 0 8px; font-size: 13px; }.questions-section p { color: #73809d; font-size: 12px; }.service-question-row { grid-template-columns: 1.4fr 1fr 1fr auto 36px; }
.availability-card summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; }.availability-card summary::-webkit-details-marker { display: none; }.availability-card summary > span:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }.availability-card summary strong { font-size: 17px; }.availability-card summary small { flex-basis: 100%; color: #73809d; font-size: 12px; }.availability-fields { margin-top: 16px; }
.service-availability-content { display: grid; gap: 26px; margin-top: 22px; }
.service-availability-content section + section { border-top: 1px solid #e5e8f0; padding-top: 22px; }
.service-availability-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.service-availability-heading .eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.service-availability-heading h3 { margin: 0; color: #0f1a39; font-size: 17px; }
.service-availability-heading p:not(.eyebrow) { margin: 5px 0 0; color: #657390; font-size: 12px; line-height: 1.4; }
.service-availability-heading button { flex: 0 0 auto; min-width: 130px; }
.service-weekly-rules, .service-overrides-list { display: grid; gap: 9px; }
.service-weekly-rule { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) 40px; gap: 10px; align-items: end; }
.service-weekly-rule button { min-width: 40px; min-height: 40px; padding: 0; font-size: 20px; }
.service-override-entry { margin-bottom: 16px; }
.service-override-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #dfe5f0; border-radius: 9px; padding: 11px 13px; }
.service-override-row strong { color: #0f1a39; font-size: 13px; }
.service-override-row p { margin: 3px 0 0; color: #657390; font-size: 12px; }
.service-availability-empty, .service-availability-message, .service-availability-hint { display: block; margin: 8px 0 0; color: #657390; font-size: 12px; }
.service-availability-message:empty { display: none; }
.rules-grid { gap: 15px; }
.staff-admin .staff-row { border-top: 1px solid #e5e8f0; padding: 18px 0; }.staff-admin .staff-row:first-child { border-top: 0; padding-top: 0; }.staff-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }.staff-heading h3 { margin: 0 7px 0 0; font-size: 14px; }.staff-badge { border-radius: 20px; background: #fff0d8; color: #8b5700; padding: 4px 8px; font-size: 10px; }.staff-badge.approved { background: #dcf8e9; color: #087a46; }.staff-badge.visible { background: #eeecff; color: #4739d4; }
.staff-profile-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(220px,1fr); gap: 14px; }.staff-panel { display: grid; gap: 10px; align-content: start; border: 1px solid #e3e8f0; border-radius: 8px; padding: 15px; }.staff-panel h4 { margin: 0; font-size: 13px; }.staff-field { display: grid; gap: 5px; }.staff-field small, .staff-control small { color: #73809d; font-size: 11px; }.staff-limit-line { display: flex; align-items: center; gap: 8px; color: #73809d; font-size: 11px; }.staff-limit-line input { max-width: 100px; }.staff-photo-row { display: flex; gap: 12px; }.staff-avatar { width: 86px; height: 86px; flex: 0 0 86px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #e7e7fa; color: #596389; }.staff-avatar img { width: 100%; height: 100%; object-fit: cover; }.staff-photo-actions { display: grid; justify-items: start; gap: 5px; }.staff-photo-actions button { font-size: 11px; }.staff-link { min-height: 26px; border: 0; background: none; padding: 0; color: var(--accent); font-size: 11px; text-decoration: underline; }.staff-link:hover:not(:disabled) { background: none; }.staff-control { display: grid; gap: 7px; border-top: 1px solid #e5e8f0; padding-top: 12px; }.staff-control-title { font-size: 12px; font-weight: 700; }.staff-control .check { display: flex; align-items: center; gap: 6px; }.staff-control .check input { width: auto; }.staff-approval-row { display: flex; align-items: center; gap: 10px; }.staff-approval-row button { font-size: 11px; }.staff-approval-state { color: #73809d; font-size: 11px; }.staff-footer { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; }.staff-footer .staff-save { width: 160px; }.staff-save-feedback { color: #087a46; font-size: 11px; }.staff-save-feedback[data-error] { color: #b42318; }
.service-save-bar { position: fixed; z-index: 20; right: 0; bottom: 0; left: var(--sidebar-width); display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 61px; border-top: 1px solid #dfe5f0; background: #fff; padding: 9px var(--app-content-inset); box-shadow: 0 -4px 16px #1820340b; }.save-state { display: flex; align-items: center; gap: 8px; color: #465477; font-size: 11px; }.save-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff9818; }.save-state:not(.dirty) .save-dot { display: none; }.save-actions { display: flex; gap: 8px; }.save-actions button { min-width: 90px; font-size: 11px; }.save-actions #save-service { min-width: 144px; }
.service-dialog { width: min(420px,calc(100% - 32px)); border: 1px solid #dfe5f0; border-radius: 12px; padding: 24px; box-shadow: 0 16px 50px #18203438; }.service-dialog::backdrop { background: #17213a77; }.service-dialog h2 { margin: 0; font-size: 20px; }.service-dialog p { color: #657390; font-size: 13px; }.service-dialog > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.service-toast { position: fixed; z-index: 40; right: 20px; bottom: 76px; border-radius: 8px; background: #15254a; padding: 12px 16px; color: #fff; font-size: 12px; }
#current-service-button { display: none; }
.staff-admin .staff-footer { display: flex; }
.service-admin label, .service-admin .field-label { font-size: 13px; }
.service-admin .currency-label { display: flex; align-items: center; }
.service-admin .currency-label select { width: 130px; min-height: 34px; }
.service-toggle input:disabled + .toggle-track { opacity: .5; cursor: not-allowed; }
.service-admin input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]), .service-admin select, .service-admin textarea { min-height: 40px; font-size: 13px; }
.service-admin label small, .service-admin .image-uploader small, .toggle-field small, .field-hint { font-size: 12px; }
@media (max-width: 1279px) {
  .service-admin-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .details-layout { grid-template-columns: 1fr; }
  .staff-assignment-grid, .booking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-row label:nth-child(2) { grid-column: 1 / -1; }
  .variant-row button { grid-column: 2; justify-self: end; width: 36px; }
}

@media(max-width:1023px){.service-admin-grid{grid-template-columns:220px minmax(0,1fr)}.staff-assignment-grid,.booking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.details-layout{grid-template-columns:1fr}.service-save-bar{left:var(--sidebar-collapsed)}}
@media (max-width: 1023px) { .service-editor-header { flex-wrap: wrap; } }
@media(max-width:767px){.service-shell.sidebar-collapsed{padding-left:0}.service-shell.sidebar-collapsed .service-save-bar{left:0}.service-page-header{align-items:flex-start}.service-page-header h1{font-size:24px}.service-page-header p{font-size:11px}.service-page-header .button-link{font-size:10px}.service-admin-grid{display:block}.service-context{min-height:0;margin-bottom:12px}.service-context h2{display:none}#current-service-button{display:block;width:100%;text-align:left}#service-context-body{display:none;margin-top:12px}.service-context.open #service-context-body{display:block}.service-editor-column{gap:12px}.field-grid,.staff-assignment-grid,.booking-grid,.details-layout,.staff-profile-grid{grid-template-columns:1fr}.variant-row{grid-template-columns:repeat(2,minmax(0,1fr))}.variant-row label:nth-child(2){grid-column:1/-1}.variant-row button{align-self:end}.service-save-bar{left:0}.service-save-bar .save-state,.service-save-bar #duplicate-service{display:none}.service-save-bar .save-actions{width:100%;justify-content:space-between}.service-save-bar .save-actions button{flex:1}.service-editor-header{align-items:flex-start}.service-heading-line{display:grid}.mobile-menu-button{display:block}}
@media (max-width: 767px) {
  .service-page-header, .service-editor-header { flex-wrap: wrap; }
  .service-header-actions { width: 100%; justify-content: flex-end; }
  .service-heading-line { flex-basis: 100%; min-width: 0; }
  .variant-row { grid-template-columns: minmax(0, 1fr); }
  .variant-row label:nth-child(2), .variant-row button { grid-column: 1; }
  .service-availability-heading { align-items: flex-start; flex-wrap: wrap; }
  .service-weekly-rule { grid-template-columns: repeat(2, minmax(0, 1fr)) 40px; }
  .service-weekly-rule label:first-child { grid-column: 1 / -1; }
}

/* Service editing: clear actions, section navigation and independent profiles. */
.service-admin section[id], .service-admin details[id] { scroll-margin-top: 80px; }
.service-section-nav { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border: 1px solid #dfe5f0; border-radius: 9px; background: #fff; }
.service-section-nav a { padding: 9px 10px; color: #465477; font-size: 13px; text-decoration: none; border-radius: 6px; }
.service-section-nav a:hover, .service-section-nav a:focus-visible { background: #eeecff; color: #4739d4; }
.readiness-heading, .profile-dialog-heading, .preview-dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.service-readiness p, .profile-dialog-heading p { margin: 8px 0 0; color: #52607d; font-size: 13px; line-height: 1.5; }
.readiness-heading button { flex-shrink: 0; }
.service-readiness ul { margin: 12px 0 0; padding-left: 20px; }
.service-readiness li { margin: 4px 0; color: #8b5700; }
.service-readiness li button, .service-readiness li a { color: #8b5700; font-size: 13px; line-height: 1.5; white-space: normal; }
.service-readiness > a { display: inline-block; margin-top: 12px; font-size: 13px; }
.service-collapsible summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.service-collapsible summary::-webkit-details-marker { display: none; }
.service-collapsible summary strong { color: #0f1a39; font-size: 17px; }
.service-collapsible summary small { display: block; margin-top: 6px; color: #52607d; font-size: 13px; line-height: 1.5; }
.service-collapsible .section-content { padding-top: 20px; }
.service-collapsible[open] summary > span:last-child, .availability-card[open] summary > span:last-child { transform: rotate(180deg); }
.eligible-staff-entry { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; }
.eligible-staff-entry label { min-width: 0; overflow-wrap: anywhere; }
.eligible-staff-entry .text-button { font-size: 12px; }
#variant-list:not(.has-deposit) .variant-row { grid-template-columns: minmax(180px,1fr) minmax(110px,1.2fr) minmax(100px,1fr) 44px; }
.service-admin label small, .service-admin .image-uploader small, .toggle-field small, .field-hint, .service-list-title, .service-list-meta, #service-admin-status { font-size: 13px; }
.service-admin label small, .service-admin .image-uploader small, .toggle-field small, .field-hint { color: #52607d; }
.service-admin button, .service-save-bar button { min-height: 44px; }
.service-admin .text-button { min-height: 36px; }
.variant-row button { width: 44px; min-height: 44px; font-size: 22px; }
.currency-input:focus-within, .unit-input:focus-within { outline: 2px solid #665dff; outline-offset: 2px; }
.save-feedback { min-width: 0; }
#service-save-message { margin: 0 0 4px; color: #087a46; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
#service-save-message.save-error { color: #b42318; }
.service-save-bar { align-items: center; padding-bottom: max(9px, env(safe-area-inset-bottom)); }
.save-actions { flex-shrink: 0; }
.save-actions button { font-size: 13px; }
.save-state { font-size: 13px; }
.service-admin { padding-bottom: 160px; }
.service-profile-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow-y: auto; border: 1px solid #dfe5f0; border-radius: 12px; }
.service-profile-dialog::backdrop { background: #17213a77; }
.service-profile-dialog .staff-footer { flex-wrap: wrap; }
.service-profile-dialog .staff-save-feedback { flex-basis: 100%; }
.service-profile-dialog .profile-dialog-heading { margin-bottom: 20px; }
.service-profile-dialog .profile-dialog-heading button { flex-shrink: 0; min-width: 44px; }
.service-profile-dialog .staff-profile-grid { grid-template-columns: minmax(0,1.4fr) minmax(240px,1fr); }
.service-preview-dialog { width: min(620px,calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.service-preview-dialog .preview-dialog-heading { margin-top: 0; }
#service-preview-content { display: grid; gap: 12px; }
#service-preview-content h3 { margin: 8px 0; font-size: 24px; overflow-wrap: anywhere; }
#service-preview-content h4, #service-preview-content p { margin: 0; }
#service-preview-content p { white-space: pre-wrap; overflow-wrap: anywhere; }
#service-preview-content img { max-width: 100%; max-height: 240px; border-radius: 8px; object-fit: cover; }
#service-preview-content .preview-option { border: 1px solid #dfe5f0; border-radius: 8px; padding: 12px; color: #172443; }
#service-preview-content label { display: grid; gap: 8px; color: #172443; }
#service-preview-content input, #service-preview-content select, #service-preview-content textarea, #booking-link-value { max-width: 100%; padding: 10px; border: 1px solid #dfe5f0; border-radius: 7px; }
.service-header-actions { flex-wrap: wrap; }
@media (max-width: 1279px) {
  #variant-list:not(.has-deposit) .variant-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .service-save-bar { flex-wrap: wrap; padding: 10px var(--app-content-inset); }
  .service-save-bar .save-state { display: flex; }
  .save-feedback { flex-basis: 100%; }
  .service-save-bar .save-actions { flex-wrap: wrap; gap: 6px; }
  .service-save-bar .save-actions button { min-width: 0; }
  .service-save-bar .save-actions #save-service { min-width: 0; }
  .service-save-bar .save-actions #publish-service { flex: 1; }
  .readiness-heading { flex-wrap: wrap; }
  .service-section-nav { position: static; }
  .service-admin section[id], .service-admin details[id] { scroll-margin-top: 16px; }
  .service-profile-dialog { padding: 18px; }
  .service-profile-dialog .staff-profile-grid { grid-template-columns: 1fr; }
  #variant-list:not(.has-deposit) .variant-row { grid-template-columns: 1fr; }
  .service-header-actions { justify-content: flex-start; }
}