body[data-builder-kind="booking-experience"] { background: #f5f8fc; }

.experience-builder-app button:focus-visible,
.experience-builder-app a:focus-visible,
.experience-builder-app input[type="checkbox"]:focus-visible,
.experience-builder-app input[type="radio"]:focus-visible,
.experience-builder-app input[type="range"]:focus-visible {
  outline: 2px solid rgba(11,85,255,.42);
  outline-offset: 2px;
}

.experience-builder-app { grid-template-columns: 258px minmax(0,1fr); }
.experience-builder-app .builder-sidebar { max-height: 100vh; position: sticky; top: 0; overflow-y: auto; }
.experience-builder-app .builder-brand { margin-bottom: 22px; }
.experience-brand-mini-image { display: none !important; }
.experience-builder-app .builder-home-link { margin-bottom: 16px; }
.experience-builder-app .builder-sidebar-toggle { top: 66px; }
.experience-builder-title-icon { overflow: hidden; padding: 0; border-color: #d8e3f1; background: #fff; box-shadow: 0 5px 14px rgba(11,85,255,.10); }
.experience-builder-title-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.experience-builder-app .builder-save-draft { width: auto; min-width: 0; height: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(11,85,255,.20); border-radius: 10px; background: #fff; color: var(--blue); font: 850 12px/1 Inter,sans-serif; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 8px 18px rgba(11,85,255,.08); transition: background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.experience-builder-app .builder-save-draft:hover { transform: translateY(-1px); background: #f7faff; border-color: rgba(11,85,255,.34); box-shadow: 0 12px 24px rgba(11,85,255,.13); }
.experience-builder-app .builder-save-draft .builder-save-icon { width: 14px; height: 14px; flex: 0 0 14px; border-color: var(--blue); }
.experience-builder-app .builder-save-draft .builder-save-icon:after { border-color: var(--blue); }
.experience-builder-app .builder-save-draft .builder-save-icon:before { background: var(--blue); }
.experience-builder-app .builder-save-draft.saved { background: #edf4ff; }
.experience-builder-app .builder-save-status { display: none; }
.builder-publish-action { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: linear-gradient(180deg,var(--blue),#0746d8); color: #fff; font: 850 12px/1 Inter,sans-serif; box-shadow: 0 10px 22px rgba(11,85,255,.20); cursor: pointer; transition: transform .16s ease,box-shadow .16s ease; }
.builder-publish-action:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(11,85,255,.24); }
.builder-publish-action[hidden] { display: none !important; }
.experience-builder-app .builder-steps { gap: 3px; }
.experience-builder-app .builder-step { padding: 7px 9px; color: #111827; font-size: 11px; }
.experience-builder-app .builder-step:not(.active):hover { color: var(--blue); }
.experience-builder-app .builder-step-number { width: 25px; height: 25px; font-size: 10px; }
.experience-builder-app .builder-sidebar-actions { padding-top: 18px; }

.experience-workspace {
  display: grid;
  grid-template-columns: minmax(390px,430px) minmax(0,1fr);
  min-height: calc(100vh - 76px);
}

.experience-mobile-pane-nav { display: none; }

.experience-editor {
  min-height: 100%;
  padding: 24px 20px 40px;
  border-right: 1px solid #dce5f0;
  background: linear-gradient(180deg,#f8fbff,#f4f8fd);
}

.experience-editor-header { margin-bottom: 18px; }
.experience-editor-header .builder-eyebrow { margin-bottom: 9px; }
.experience-editor-header h1 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.045em; }
.experience-editor-header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 650; }
.experience-editor .builder-field input::placeholder,
.experience-editor .builder-field textarea::placeholder,
.experience-editor .builder-field input::-webkit-input-placeholder,
.experience-editor .builder-field textarea::-webkit-input-placeholder {
  color: #9ca3af !important;
  font-family: Inter, sans-serif !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.experience-panel[hidden],
.experience-editor [hidden] { display: none !important; }
.experience-panel.active { animation: experience-panel-in .22s ease; }
@keyframes experience-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.experience-editor .builder-card { margin: 0; padding: 18px 16px; border: 1px solid #dfe7f1; border-bottom: 0; border-radius: 0; background: #fff; box-shadow: none; }
.experience-editor .experience-editor-header + .builder-card { border-radius: 14px 14px 0 0; box-shadow: 0 12px 28px rgba(7,23,53,.045); }
.experience-editor .builder-card:last-of-type { margin-bottom: 18px; border-bottom: 1px solid #dfe7f1; border-radius: 0 0 14px 14px; box-shadow: 0 14px 30px rgba(7,23,53,.045); }
.experience-editor .experience-editor-header + .builder-card:last-of-type { border-radius: 14px; }
.experience-editor .builder-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 14px; }
.experience-editor .builder-card h2:before { content: attr(data-icon); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #edf4ff; color: var(--blue); font-size: 11px; }
.experience-editor .builder-card h2.experience-card-heading-plain:before { display: none; }

.experience-check-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.experience-check { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid #e2e9f2; border-radius: 9px; background: #f8faff; color: #304462; font-size: 10px; font-weight: 800; cursor: pointer; }
.experience-check input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--blue); }
.experience-check small { display: block; color: #7a8799; font-size: 8px; font-weight: 700; }
.experience-instrument-styles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.experience-instrument-style { min-width: 0; min-height: 104px; position: relative; display: grid; place-items: center; align-content: center; gap: 7px; padding: 10px 7px; border: 1px solid #dce5f0; border-radius: 11px; background: #fff; cursor: pointer; transition: border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.experience-instrument-style:hover { transform: translateY(-1px); border-color: #b9c9dc; box-shadow: 0 8px 18px rgba(7,23,53,.07); }
.experience-instrument-style.selected { border: 2px solid var(--blue); background: #f7faff; box-shadow: 0 8px 18px rgba(11,85,255,.11); }
.experience-instrument-style input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.experience-instrument-style.selected:after { content: "✓"; width: 18px; height: 18px; position: absolute; top: 7px; right: 7px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; font-weight: 900; }
.experience-instrument-style strong { color: #223550; font-size: 10px; }
.experience-style-art { width: 53px; height: 51px; display: grid; place-items: center; border-radius: 10px; font-size: 29px; }
.experience-style-art img { width: 46px; height: 46px; display: block; object-fit: contain; }
.experience-style-art.modern { background: linear-gradient(145deg,#f4f7fb,#e9eef5); }
.experience-style-art.fun { background: linear-gradient(145deg,#fff1d6,#ffe1ef); transform: rotate(-3deg); }
.experience-style-art.minimal { border: 1px solid #d8e0eb; background: #fff; color: #172944; font-size: 31px; }
.experience-instrument-background-setting { margin: 0; padding-top: 2px !important; border-top: 0; border-bottom: 0; }
.experience-instrument-help { margin: -5px 0 11px; color: #748197; font-size: 9px; font-weight: 700; }
.experience-instrument-list { display: grid; gap: 6px; }
.experience-instrument-list:not(.show-all) [data-library-extra="true"] { display: none; }
.experience-instrument-row { min-height: 55px; display: grid; grid-template-columns: 22px 40px minmax(0,1fr) 18px 38px; align-items: center; gap: 8px; padding: 7px 9px 7px 5px; border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; cursor: pointer; transition: opacity .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.experience-instrument-row.text-only { grid-template-columns: 22px minmax(0,1fr) 18px 38px; }
.experience-instrument-row.dragging { opacity: .45; transform: scale(.99); }
.experience-instrument-row.drag-over { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,85,255,.09); }
.experience-instrument-row.is-promoting { animation: experience-instrument-promote .34s ease both; }
.experience-instrument-row.selected { border-color: var(--blue); background: #f7faff; box-shadow: 0 0 0 3px rgba(11,85,255,.075); }
.experience-drag-handle { width: 22px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #8794a7; cursor: grab; font-size: 17px; }
.experience-drag-handle:active { cursor: grabbing; }
.experience-instrument-thumb { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: #f4f7fb; font-size: 21px; }
.experience-instrument-thumb[hidden] { display: none; }
.experience-instrument-thumb img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: contain; }
.experience-instrument-details-toggle { width: 18px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #78869a; cursor: pointer; font: 500 20px/1 Inter,sans-serif; transition: color .16s ease,transform .16s ease; }
.experience-instrument-details-toggle:hover { color: var(--blue); }
.experience-instrument-row.details-open .experience-instrument-details-toggle { color: var(--blue); transform: rotate(90deg); }
.experience-instrument-details { grid-column: 1/-1; display: none; gap: 11px; margin: 4px 3px 2px 27px; padding: 14px; border-top: 1px solid #e4eaf2; cursor: default; }
.experience-instrument-row.details-open .experience-instrument-details { display: grid; animation: experience-panel-in .18s ease both; }
@keyframes experience-instrument-promote {
  0% { transform: translateY(10px); box-shadow: 0 0 0 3px rgba(11,85,255,.05); }
  100% { transform: translateY(0); box-shadow: none; }
}
.experience-instrument-readonly-name { display: grid; gap: 5px; }
.experience-instrument-readonly-name span,.experience-instrument-details .builder-field > span { color: #52637a; font-size: 9px; font-weight: 800; }
.experience-instrument-readonly-name strong { color: #172944; font-size: 13px; }
.experience-instrument-details .builder-field { gap: 6px; }
.experience-instrument-details .builder-field input { height: 38px; font-size: 11px !important; }
.experience-instrument-image-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.experience-instrument-image-controls > span { min-width: 0; flex: 1 1 120px; color: #78879a; font-size: 9px; font-weight: 700; }
.experience-instrument-image-controls label,.experience-instrument-image-controls button,.experience-instrument-detail-actions button { min-height: 34px; padding: 0 10px; border: 1px solid #d5e0ed; border-radius: 8px; background: #fff; color: var(--blue); cursor: pointer; font: 800 9px/1 Inter,sans-serif; }
.experience-instrument-image-controls label { display: inline-flex; align-items: center; }
.experience-instrument-image-controls label:hover,.experience-instrument-image-controls button:hover { border-color: #aac3f5; background: #f2f7ff; }
.experience-instrument-image-controls input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.experience-instrument-detail-actions { display: flex; justify-content: flex-end; padding-top: 3px; }
.experience-instrument-detail-actions button { color: #53647b; }
.experience-instrument-detail-actions button.danger { border-color: #efc7cc; color: #c43d4c; }
.experience-instrument-detail-actions button.danger:hover { border-color: #df8e98; background: #fff3f4; }
.experience-instrument-detail-actions button.danger { width: 36px; padding: 0; display: grid; place-items: center; }
.experience-instrument-detail-actions button.danger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* BookMyLesson Fun artwork is a product asset, so keep it clean and straight. */
.experience-instrument-list[data-style="fun"] .experience-instrument-thumb { border-radius: 12px; background: rgba(255,255,255,.72); font-size: 24px; filter: saturate(1.15) drop-shadow(0 4px 4px rgba(28,47,92,.10)); transform: none; }
.experience-instrument-list[data-style="minimal"] .experience-instrument-row { border-color: #d9e0e9; border-radius: 8px; background: #fff; box-shadow: none; }
.experience-instrument-list[data-style="minimal"] .experience-instrument-thumb { border: 1px solid #dfe5ed; border-radius: 8px; background: transparent; color: #172944; filter: grayscale(1) contrast(1.1); font-size: 20px; }
.experience-instrument-list[data-style="minimal"] .experience-drag-handle { color: #8793a3; }
.experience-instrument-list.backgrounds-off .experience-instrument-row:not(:hover):not(.selected) { background: #fff !important; }
.experience-instrument-list.backgrounds-off .experience-instrument-thumb { background: transparent !important; }

.experience-instrument-row,.experience-instructor-row,.experience-offer-row,.experience-instructor-empty-state { border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; box-shadow: none; transition: border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease; }
.experience-instrument-row:hover,.experience-instructor-row:hover,.experience-offer-row:hover,.experience-instructor-empty-state:hover { border-color: var(--blue); background: #f7faff; box-shadow: 0 0 0 3px rgba(11,85,255,.075); }
.experience-instrument-row.selected,.experience-instructor-row.selected,.experience-offer-row.selected { border-color: var(--blue); background: #f7faff; box-shadow: 0 0 0 3px rgba(11,85,255,.075); }
.experience-instrument-list:not(.backgrounds-off) .experience-instrument-row.instrument-color-1 { --instrument-soft:#f3efff; --instrument-edge:#9b7ae8; }
.experience-instrument-list:not(.backgrounds-off) .experience-instrument-row.instrument-color-2 { --instrument-soft:#fff6d9; --instrument-edge:#d9a928; }
.experience-instrument-list:not(.backgrounds-off) .experience-instrument-row.instrument-color-3 { --instrument-soft:#eaf8ef; --instrument-edge:#48a66b; }
.experience-instrument-list:not(.backgrounds-off) .experience-instrument-row.instrument-color-4 { --instrument-soft:#eaf4ff; --instrument-edge:#4d91df; }
.experience-instrument-list:not(.backgrounds-off) .experience-instrument-row.instrument-color-5 { --instrument-soft:#fff0f3; --instrument-edge:#d96b83; }
.experience-instrument-list:not(.backgrounds-off) .experience-instrument-row.instrument-color-6 { --instrument-soft:#eaf9f7; --instrument-edge:#3d9f96; }
.experience-instrument-list:not(.backgrounds-off) .experience-instrument-row:hover,
.experience-instrument-list:not(.backgrounds-off) .experience-instrument-row.selected { border-color: var(--instrument-edge); background: var(--instrument-soft); box-shadow: 0 0 0 3px color-mix(in srgb,var(--instrument-edge) 14%,transparent); }

.experience-setting-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #e7ecf3; cursor: pointer; }
.experience-setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.experience-setting-row:first-of-type { padding-top: 2px; }
.experience-waitlist-card .experience-setting-row { border-bottom: 0; padding-bottom: 5px; }
.experience-waitlist-options { display: grid; gap: 0; }
.experience-waitlist-options[hidden] { display: none; }
.experience-setting-row > span:first-child { min-width: 0; display: grid; gap: 3px; }
.experience-setting-row strong { color: #1e3049; font-size: 12px; }
.experience-setting-row small { color: #7a8798; font-size: 9px; font-weight: 700; line-height: 1.45; }
.experience-setting-row.compact { margin-top: 4px; padding: 10px 0 0; }
.experience-instructor-list { display: grid; gap: 6px; }
.experience-instructor-row { min-height: 64px; display: grid; grid-template-columns: 22px 44px minmax(0,1fr) 18px; align-items: center; gap: 9px; padding: 8px 9px 8px 5px; border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease; }
.experience-instructor-row:hover { border-color: var(--blue); background: #f7faff; box-shadow: 0 0 0 3px rgba(11,85,255,.075); }
.experience-instructor-row.selected { border-color: var(--blue); background: #f7faff; box-shadow: 0 0 0 3px rgba(11,85,255,.075); }
.experience-instructor-row[data-enabled="false"] { opacity: .52; }
.experience-instructor-row.dragging { opacity: .4; transform: scale(.99); }
.experience-instructor-row.drag-over { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,85,255,.09); }
.experience-instructor-row .experience-instrument-copy { gap: 3px; }
.experience-instructor-row .experience-instrument-copy strong { font-size: 11px; }
.experience-instructor-tags { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; }
.experience-instructor-tag { min-height: 18px; display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid #cddcff; border-radius: 999px; background: #edf4ff; color: #174aaf; font-size: 7px; font-weight: 850; line-height: 1; }
.experience-instructor-tag.is-empty { border-color: #dfe6ef; background: #f8fafc; color: #8b98aa; }
.experience-instructor-bio { display: block; overflow: hidden; color: #8793a5; font-size: 8px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.experience-instructor-avatar,.experience-instructor-photo span { display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg,#dce8ff,#eef3fb); color: var(--blue); font-weight: 900; }
.experience-instructor-avatar { width: 40px; height: 40px; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(11,85,255,.08); }
.experience-instructor-avatar img,.experience-instructor-photo img { width: 100%; height: 100%; object-fit: cover; }
.experience-instructor-avatar.is-placeholder svg,.experience-instructor-photo span.is-placeholder svg,.experience-empty-instructor-avatar svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.experience-instructor-empty-state { width: 100%; min-height: 61px; display: grid; grid-template-columns: 22px 38px minmax(0,1fr) 18px; align-items: center; gap: 8px; padding: 8px 8px 8px 5px; border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; color: #243854; text-align: left; cursor: pointer; transition: border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease; }
.experience-instructor-empty-state:hover { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,85,255,.07); transform: translateY(-1px); }
.experience-starter-handle { color: #b4bfce; font-size: 14px; text-align: center; }
.experience-starter-instructor-copy { min-width: 0; display: grid; gap: 3px; }
.experience-starter-instructor-copy strong { color: #263a57; font-size: 11px; }
.experience-starter-instructor-copy small { overflow: hidden; color: #7b899c; font-size: 8px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.experience-empty-instructor-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #e8f0ff; color: var(--blue); }
.experience-skip-instructors { width: fit-content; margin-top: 12px; padding: 9px 13px; border: 1px solid rgba(37,99,235,.16); border-radius: 999px; background: rgba(239,246,255,.68); color: var(--blue); font: 750 12px/1 Inter,sans-serif; cursor: pointer; box-shadow: 0 8px 18px rgba(37,99,235,.08); transition: color .15s ease,background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease; }
.experience-skip-instructors:hover { background: #eff6ff; border-color: rgba(37,99,235,.32); color: #1d4ed8; box-shadow: 0 12px 26px rgba(37,99,235,.12); transform: translateY(-1px); }
.experience-skip-instructors[hidden] { display: none; }
.experience-row-arrow { width: 18px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #78869a; font: 500 20px/1 Inter,sans-serif; cursor: pointer; transition: color .16s ease,transform .16s ease; }
.experience-row-arrow:hover { color: var(--blue); transform: translateX(2px); }
.experience-details-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.experience-details-heading h2 { margin-bottom: 0 !important; }
.experience-details-heading button { padding: 5px 9px; border: 1px solid #dce4ee; border-radius: 8px; background: #fff; color: #d13d4b; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.experience-details-heading .experience-details-back { display: none; width: 30px; height: 30px; padding: 0; place-items: center; color: var(--blue); font-size: 21px; }
.experience-details-heading .experience-details-back:hover { border-color: rgba(11,85,255,.30); background: #edf4ff; color: var(--blue); transform: translateX(-2px); }
.experience-instructor-photo { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.experience-instructor-photo span { width: 58px; height: 58px; flex: 0 0 auto; font-size: 18px; }
.experience-instructor-photo label,.experience-instructor-photo button { padding: 7px 10px; border: 1px solid #dce4ee; border-radius: 8px; background: #fff; color: var(--blue); font: 800 9px/1 Inter,sans-serif; cursor: pointer; }
.experience-instructor-photo label:hover,.experience-instructor-photo button:hover { border-color: #b9cdf7; background: #f2f7ff; }
.experience-instructor-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.experience-show-bio { margin: -5px 0 10px; padding-bottom: 10px; }
.experience-character-count { display: block; margin-top: 5px; color: #8a96a8; font-size: 8px; font-weight: 750; text-align: right; }
.experience-instructor-instrument-field { position: relative; margin-top: 14px; padding-top: 5px; }
.experience-builder-app.instructor-photos-square .experience-instructor-avatar,
.experience-builder-app.instructor-photos-square .experience-instructor-photo span,
.experience-builder-app.instructor-photos-square .experience-empty-instructor-avatar { border-radius: 12px; }
.experience-instructor-instrument-picker { position: relative; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; cursor: text; transition: border-color .16s ease,box-shadow .16s ease; }
.experience-instructor-instrument-picker:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.experience-instructor-instrument-picker.is-invalid { border-color: #ef4444; background: #fffafa; box-shadow: 0 0 0 4px rgba(239,68,68,.11); animation: experienceInstrumentRequired .28s ease; }
.experience-instructor-instrument-error { display: block; margin: 7px 2px 0; color: #c24141; font-size: 9px; font-weight: 750; line-height: 1.4; }
@keyframes experienceInstrumentRequired { 0%,100% { transform: translateX(0); } 35% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
.experience-instructor-instrument-chips { display: contents; }
.experience-instructor-instrument-chip { min-height: 27px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px 5px 9px; border: 1px solid #cddcff; border-radius: 999px; background: #edf4ff; color: #174aaf; font: 750 9px/1 Inter,sans-serif; cursor: pointer; transition: border-color .15s ease,background .15s ease,transform .15s ease; }
.experience-instructor-instrument-chip:hover { border-color: #91b1ff; background: #e2edff; transform: translateY(-1px); }
.experience-instructor-instrument-chip small { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; color: #6684bd; font: 800 12px/1 Inter,sans-serif; }
.experience-instructor-instrument-chip.is-unavailable { border-style: dashed; border-color: #d6dbe4; background: #f4f5f7; color: #7a8391; }
.experience-instructor-instrument-chip.is-unavailable::after { content: "Unavailable"; color: #969eaa; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.experience-instructor-instrument-picker input[type="search"] { width: 120px; min-width: 90px; flex: 1 1 110px; height: 28px !important; padding: 0 3px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 10px !important; }
.experience-instructor-instrument-picker input[type="search"]::-webkit-search-cancel-button { display: none; }
.experience-instructor-instrument-options { position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; right: 0; max-height: 190px; overflow: auto; padding: 6px; border: 1px solid #dce5f1; border-radius: 11px; background: rgba(255,255,255,.98); box-shadow: 0 15px 36px rgba(7,23,53,.14); }
.experience-instructor-instrument-options[hidden] { display: none; }
.experience-instructor-instrument-option { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; color: #22344e; text-align: left; cursor: pointer; }
.experience-instructor-instrument-option:hover,.experience-instructor-instrument-option:focus-visible { outline: 0; background: #eff5ff; color: var(--blue); }
.experience-instructor-instrument-option span { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; background: #edf4ff; color: var(--blue); font-size: 13px; }
.experience-instructor-instrument-option strong { font-size: 10px; }
.experience-instructor-instrument-empty { display: block; padding: 10px; color: #7c899b; font-size: 9px; font-weight: 650; line-height: 1.45; }
.experience-instructor-instrument-help { color: #8490a1; font-size: 8px; font-weight: 650; line-height: 1.45; }
.experience-panel.instructors-disabled .builder-card:not(.experience-instructor-options) { opacity: .42; filter: grayscale(.35); pointer-events: none; }
.experience-panel.instructors-disabled .experience-instructor-options .experience-setting-row:nth-of-type(2) { opacity: .42; pointer-events: none; }
.experience-panel.instruments-disabled .builder-card:not(.experience-instrument-options) { opacity: .42; filter: grayscale(.35); pointer-events: none; }
.experience-instrument-options .experience-setting-row:last-child,.experience-instructor-options .experience-setting-row:last-child { border-bottom: 0; }
.experience-instructor-details { display: none; }
.experience-builder-app.instructor-details-open [data-experience-panel="4"] > :not(.experience-instructor-details) { display: none; }
.experience-builder-app.instructor-details-open .experience-instructor-details { display: block; margin: 0 !important; padding: 20px 16px !important; border: 1px solid #d9e3f0 !important; border-radius: 14px !important; background: #fff; box-shadow: 0 14px 30px rgba(7,23,53,.065); animation: experienceDetailsIn .2s ease both; }
.experience-builder-app.instructor-details-open .experience-step-actions { display: none; }
.experience-builder-app.instructor-details-open .experience-details-heading .experience-details-back { display: grid; }
@keyframes experienceDetailsIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.experience-builder-app .builder-help,.experience-builder-app .builder-help-icon,.experience-builder-app .builder-account { transition: color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.experience-builder-app .builder-help:hover { color: var(--blue); }
.experience-builder-app .builder-help:hover .builder-help-icon { background: #edf4ff; border-color: var(--blue); transform: translateY(-1px); }
.experience-builder-app .builder-account:hover { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 10px 22px rgba(11,85,255,.20); transform: translateY(-1px); }
.bml-undo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: #2563eb; font: 600 13px/1 Inter,sans-serif; cursor: pointer; transition: background 150ms ease,color 150ms ease; }
.bml-undo-btn:hover:not(:disabled) { background: #eff6ff; color: #1d4ed8; }
.bml-undo-btn:active:not(:disabled) { background: #dbeafe; }
.bml-undo-btn .bml-undo-icon { width: 14px; height: 14px; display: grid; place-items: center; flex: 0 0 14px; font-size: 15px; line-height: 1; }
.bml-undo-btn:disabled,.bml-undo-btn.is-disabled { opacity: .4; cursor: not-allowed; }
.bml-history-controls { height: 34px; display: inline-flex; overflow: hidden; border: 1px solid #dce5f0; border-radius: 9px; background: #fff; box-shadow: 0 4px 12px rgba(7,23,53,.045); }
.bml-history-controls .bml-undo-btn { width: 38px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: #fff; color: var(--blue); }
.bml-history-controls .bml-undo-btn + .bml-undo-btn { border-left: 1px solid #e3eaf3; }
.bml-history-controls .bml-undo-btn:hover:not(:disabled) { background: #eff6ff; color: #0647d7; }
.bml-history-controls .bml-undo-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.bml-history-controls .bml-undo-btn:disabled { background: #fafbfd; color: #9eabc0; opacity: .62; }
.experience-signed-in-publish { padding: 54px 42px 42px; display: flex; flex-direction: column; justify-content: center; }
.experience-account-form[hidden],.experience-publish-security[hidden] { display: none !important; }
.experience-signed-in-publish .builder-eyebrow { margin-bottom: 10px; }
.experience-signed-in-publish h2 { margin: 0 0 12px; color: #071735; font-size: 26px; line-height: 1.15; letter-spacing: -.04em; }
.experience-signed-in-publish p { margin: 0; color: #5a6a81; font-size: 13px; line-height: 1.65; }
.experience-publish-confirm-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; margin-top: 28px; }
.experience-publish-confirm-actions button { min-height: 44px; border-radius: 10px; font: 800 12px/1 Inter,sans-serif; cursor: pointer; }
.experience-publish-back { border: 1px solid #d7e0eb; background: #fff; color: #40516a; }
.experience-publish-continue { border: 0; background: linear-gradient(180deg,var(--blue),#0746d8); color: #fff; box-shadow: 0 10px 22px rgba(11,85,255,.2); }
.experience-publish-continue:disabled { opacity: .6; cursor: wait; }
.experience-offer-list { display: grid; gap: 7px; }
.experience-offer-row { min-height: 60px; display: grid; grid-template-columns: 22px 40px minmax(0,1fr) 34px 18px; align-items: center; gap: 8px; padding: 7px 8px 7px 5px; border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease; }
.experience-offer-row:hover { border-color: var(--blue); background: #f7faff; box-shadow: 0 0 0 3px rgba(11,85,255,.075); }
.experience-offer-row.selected { border-color: var(--blue); background: #f7faff; box-shadow: 0 0 0 3px rgba(11,85,255,.075); }
.experience-offer-row[data-enabled="false"] { opacity: .52; }
.experience-offer-row.dragging { opacity: .4; transform: scale(.99); }
.experience-offer-row.drag-over { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,85,255,.09); }
.experience-offer-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg,#e8f0ff,#f4f7fd); color: var(--blue); font-size: 11px; font-weight: 900; }
.experience-offer-details { display: none; }
.experience-builder-app.offer-details-open [data-experience-panel="5"] > :not(.experience-offer-details) { display: none; }
.experience-builder-app.offer-details-open .experience-offer-details { display: block; margin: 0 !important; padding: 20px 16px !important; border: 1px solid #d9e3f0 !important; border-radius: 14px !important; background: #fff; box-shadow: 0 14px 30px rgba(7,23,53,.065); animation: experienceDetailsIn .2s ease both; }
.experience-builder-app.offer-details-open .experience-offer-details .experience-details-back { display: grid; }
.experience-builder-app.offer-details-open .experience-step-actions { display: none; }
.experience-offer-group { display: grid; gap: 9px; margin: 13px 0; padding-top: 13px; border-top: 1px solid #e7ecf3; }
.experience-offer-group > strong { color: #263951; font-size: 10px; }
.experience-offer-instructors { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.experience-offer-instructors:empty:after { content: "Add instructors in Step 4 first."; grid-column: 1/-1; padding: 9px; border-radius: 8px; background: #f5f8fc; color: #7b8899; font-size: 8px; font-weight: 750; text-align: center; }
.experience-offer-field-pair { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: end; gap: 12px; }
.experience-offer-field-pair .builder-field { min-width: 0; margin-bottom: 0; }
.experience-offer-field-pair + .experience-offer-field-pair { margin-top: 14px; padding-top: 3px; }
.experience-offer-field-pair input,.experience-offer-field-pair select { width: 100%; }
.experience-offer-details .builder-field:has(#experienceOfferDescription) { margin-top: 14px; padding-top: 3px; }
.experience-offer-image-controls { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; padding-bottom: 14px; border-bottom: 1px solid #e7ecf3; }
.experience-offer-image-controls[hidden] { display: none; }
.experience-offer-image-controls > span { width: 64px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px dashed #cbd8e8; border-radius: 10px; background: #f5f8fc; color: var(--blue); font-size: 18px; }
.experience-offer-image-controls img { width: 100%; height: 100%; object-fit: contain; background: #f5f8fc; }
.experience-offer-image-controls label,.experience-offer-image-controls button { padding: 7px 10px; border: 1px solid #dce4ee; border-radius: 8px; background: #fff; color: var(--blue); font: 800 9px/1 Inter,sans-serif; cursor: pointer; }
.experience-offer-image-controls .experience-remove-offer-image { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border-color: #e0e7f0; border-radius: 50%; color: #77869a; font-size: 17px; line-height: 1; }
.experience-offer-image-controls .experience-remove-offer-image:hover { border-color: #f0b8b8; background: #fff5f5; color: #c24141; }
.experience-offer-image-controls input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.experience-offer-image-layout { margin: 12px 0 4px; padding: 13px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; border: 0; border-top: 1px solid #e6ecf3; border-bottom: 1px solid #e6ecf3; }
.experience-offer-image-layout[hidden] { display: none; }
.experience-offer-image-layout legend { grid-column: 1/-1; margin-bottom: 2px; color: #263951; font-size: 10px; font-weight: 850; }
.experience-offer-image-layout label { min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid #dbe4ef; border-radius: 11px; background: #fff; color: #5f6f85; font-size: 9px; font-weight: 850; cursor: pointer; }
.experience-offer-image-layout label:has(input:checked) { border-color: var(--blue); background: #f4f8ff; color: var(--blue); box-shadow: 0 0 0 3px rgba(11,85,255,.07); }
.experience-offer-image-layout input { position: absolute; opacity: 0; pointer-events: none; }
.experience-offer-image-layout label > span { width: 68px; height: 39px; display: grid; gap: 4px; padding: 5px; border: 1px solid currentColor; border-radius: 7px; background: #fff; }
.experience-offer-image-layout .experience-layout-left { grid-template-columns: 24px 1fr; }
.experience-offer-image-layout .experience-layout-top { grid-template-rows: 14px 1fr; }
.experience-offer-image-layout i { display: block; border-radius: 4px; background: #dbe8fb; }
.experience-offer-image-layout b { display: block; border-radius: 3px; background: repeating-linear-gradient(180deg,#b5c5dc 0 2px,transparent 2px 5px); }
.experience-field-help { display: block; margin-top: 6px; color: #7c899b; font-size: 8px; font-weight: 650; line-height: 1.45; }
.experience-collection-actions { display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 8px; margin-top: 10px; }
.experience-collection-actions .experience-add-instrument { margin-top: 0; }
.experience-collection-delete { min-height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid #f0cbd0; border-radius: 10px; background: #fff; color: #c94755; cursor: pointer; transition: color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
.experience-collection-delete[hidden] { display: none; }
.experience-collection-delete:disabled { border-color: #dfe5ed; background: #f7f8fa; color: #aab3c0; box-shadow: none; cursor: not-allowed; transform: none; }
.experience-collection-delete:disabled:hover { border-color: #dfe5ed; background: #f7f8fa; color: #aab3c0; box-shadow: none; transform: none; }
.experience-collection-delete svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.experience-collection-delete:hover { border-color: #e6929c; background: #fff4f5; color: #b82f3e; box-shadow: 0 7px 15px rgba(190,49,65,.10); transform: translateY(-1px); }
.experience-collection-delete.drop-ready { border-color: #e34d5d; background: #fff0f2; color: #c82739; box-shadow: 0 0 0 4px rgba(227,77,93,.12),0 10px 22px rgba(190,49,65,.14); transform: scale(1.06); }
.experience-calendar-note { display: grid; grid-template-columns: 28px minmax(0,1fr) 34px; align-items: center; gap: 10px; margin-bottom: 12px; padding: 13px; border: 1px solid #bed5ff; border-radius: 12px; background: linear-gradient(135deg,#f5f9ff,#edf4ff); color: #1d3658; }
.experience-calendar-note-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--blue); border-radius: 50%; color: var(--blue); font-size: 11px; font-weight: 900; }
.experience-calendar-note > span:nth-child(2) { display: grid; gap: 3px; }
.experience-calendar-note strong { font-size: 10px; }
.experience-calendar-note small { color: #64758b; font-size: 8px; font-weight: 700; line-height: 1.45; }
.experience-calendar-mini { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #fff; color: var(--blue); box-shadow: 0 6px 13px rgba(11,85,255,.11); font-size: 17px; }
.experience-availability-list { display: grid; gap: 6px; }
.experience-availability-row { min-height: 43px; display: grid; grid-template-columns: 34px 68px minmax(70px,1fr) 8px minmax(70px,1fr); align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid #e1e7ef; border-radius: 9px; background: #fff; transition: opacity .16s ease,background .16s ease; }
.experience-availability-row strong { color: #2a3c54; font-size: 9px; }
.experience-availability-row select { min-width: 0; height: 32px; padding: 0 6px; border: 1px solid #d7e0eb; border-radius: 7px; background: #fff; color: #263951; font: 750 10px/1 Inter,sans-serif; }
.experience-availability-row > span:not(.experience-unavailable) { color: #8190a3; font-size: 9px; text-align: center; }
.experience-availability-row.is-off { grid-template-columns: 34px 68px 1fr; background: #f8fafc; opacity: .72; }
.experience-unavailable { display: none; grid-column: 3/-1; padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 7px; color: #8a96a7; font-size: 8px; font-weight: 750; text-align: center; }
.experience-availability-row.is-off .experience-unavailable { display: block; }
.experience-availability-row.is-off select,
.experience-availability-row.is-off > span:not(.experience-unavailable) { display: none; }
.experience-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 10px; padding: 4px; border-radius: 9px; background: #edf2f7; }
.experience-segmented label { cursor: pointer; }
.experience-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.experience-segmented span { min-height: 31px; display: grid; place-items: center; border-radius: 7px; color: #64748a; font-size: 9px; font-weight: 800; }
.experience-segmented input:checked + span { background: #fff; color: var(--blue); box-shadow: 0 3px 8px rgba(7,23,53,.08); }
.experience-instructor-availability { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6ebf2; }
.experience-subsection-heading { display: grid; gap: 3px; margin-bottom: 9px; }
.experience-subsection-heading strong { color: #20324b; font-size: 11px; }
.experience-subsection-heading small { color: #7a8798; font-size: 8px; font-weight: 700; line-height: 1.45; }
.experience-instructor-calendar-note { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 9px; margin: 10px 0; padding: 10px; border: 1px solid #d6e5ff; border-radius: 9px; background: #f5f9ff; }
.experience-instructor-calendar-note > span:first-child { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: #fff; color: var(--blue); box-shadow: 0 4px 10px rgba(11,85,255,.09); }
.experience-instructor-calendar-note > span:last-child { display: grid; gap: 2px; }
.experience-instructor-calendar-note strong { color: #243750; font-size: 9px; }
.experience-instructor-calendar-note small { color: #748197; font-size: 7px; font-weight: 700; }
.experience-instructor-hours { display: grid; gap: 6px; transition: opacity .16s ease; }
.experience-instructor-hours.uses-studio-hours { opacity: .48; }
.experience-instructor-hour-row { padding: 7px; border: 1px solid #e0e7ef; border-radius: 9px; background: #fff; }
.experience-instructor-hour-row.is-off { background: #f8fafc; opacity: .7; }
.experience-instructor-day-head { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 7px; }
.experience-instructor-day-head strong { color: #2a3c54; font-size: 9px; }
.experience-instructor-day-head button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid #d4e1f3; border-radius: 7px; background: #f7faff; color: var(--blue); cursor: pointer; }
.experience-instructor-blocks { display: grid; gap: 5px; margin: 6px 0 0 41px; }
.experience-instructor-time-block { display: grid; grid-template-columns: 1fr 8px 1fr 25px; align-items: center; gap: 5px; color: #7c8999; font-size: 10px; }
.experience-instructor-time-block select { min-width: 0; height: 32px; padding: 0 6px; border: 1px solid #d7e0eb; border-radius: 7px; background: #fff; color: #263951; font: 750 10px/1 Inter,sans-serif; }
.experience-instructor-time-block select:focus { border-color: var(--blue) !important; outline: 0 !important; background: #f7faff !important; box-shadow: 0 0 0 3px rgba(11,85,255,.10) !important; }
.experience-instructor-time-block button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #b4616b; cursor: pointer; }
.experience-scheduling-meta { margin-top: 11px; }
.experience-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.experience-card-title-row h2 { margin-bottom: 3px !important; }
.experience-card-title-row p { margin: 0; color: #78869a; font-size: 8px; font-weight: 700; }
.experience-segmented.compact { width: 146px; flex: 0 0 auto; margin: 0; }
.experience-segmented.compact span { min-height: 28px; font-size: 8px; }
.experience-field-list { display: grid; gap: 5px; }
.experience-field-row { min-height: 55px; display: grid; grid-template-columns: 20px 32px minmax(0,1fr) 66px 34px; align-items: center; gap: 7px; padding: 6px 7px; border: 1px solid #e1e7ef; border-radius: 9px; background: #fff; }
.experience-field-row { cursor: pointer; transition: border-color .16s ease,background .16s ease,box-shadow .16s ease,opacity .16s ease; }
.experience-field-row:hover,.experience-field-row.selected { border-color: var(--blue); background: #f7faff; box-shadow: 0 0 0 3px rgba(11,85,255,.07); }
.experience-field-row.dragging { opacity: .45; }
.experience-field-row.drag-over { border-color: var(--blue); background: #f1f6ff; box-shadow: 0 0 0 3px rgba(11,85,255,.10); transform: translateY(2px); }
.experience-required-field-row { grid-template-columns: 20px 32px minmax(0,1fr); }
.experience-field-row[data-custom-customer-field] { grid-template-columns: 20px 32px minmax(0,1fr) 72px; }
.experience-field-handle { color: #8a96a7; font-size: 15px; cursor: grab; }
.experience-field-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #edf4ff; color: var(--blue); font-size: 13px; }
.experience-field-row > span:nth-child(3) { min-width: 0; display: grid; gap: 2px; }
.experience-field-row strong { overflow: hidden; color: #253750; font-size: 10px; font-weight: 820; text-overflow: ellipsis; white-space: nowrap; }
.experience-field-row small { overflow: hidden; color: #7a8798; font-size: 7px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.experience-field-row select { min-width: 0; height: 29px; padding: 0 5px; border: 1px solid #dbe3ec; border-radius: 7px; background: #fff; color: #506078; font: 750 7px/1 Inter,sans-serif; }
.experience-custom-field-copy { display: grid !important; gap: 5px !important; }
.experience-custom-field-display { display: block; font-size: 10px !important; }
.experience-custom-field-editor { display: none; align-items: center; gap: 6px; }
.experience-field-row.is-editing .experience-custom-field-display { display: none; }
.experience-field-row.is-editing .experience-custom-field-editor { display: flex; }
.experience-custom-field-copy input { width: 100%; min-width: 0; height: 28px !important; padding: 0 8px !important; border: 1px solid #dbe3ec !important; border-radius: 7px !important; background: #fff !important; color: #253750 !important; font: 700 9px/1 Inter,sans-serif !important; box-shadow: none !important; }
.experience-custom-field-copy input::placeholder { color: #9ca3af; }
.experience-custom-field-copy input:focus { border-color: var(--blue) !important; outline: 0 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(11,85,255,.11) !important; }
.experience-custom-field-editor button { min-height: 28px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--blue); border-radius: 7px; background: var(--blue); color: #fff; font: 850 8px/1 Inter,sans-serif; cursor: pointer; white-space: nowrap; }
.experience-custom-field-editor button > span { width: 13px; height: 13px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; font-size: 8px; }
.experience-custom-field-actions .experience-add-custom-field { width: auto; min-width: 145px; flex: 0 1 auto; padding: 0 16px; }
.builder-field:has(#experienceNotes) { margin-top: 8px; padding-top: 13px; }
.experience-policy-heading { display:grid; gap:4px; margin-top:15px; padding-top:15px; border-top:1px solid #e3eaf3; }
.experience-policy-heading strong { color:#20324c; font-size:11px; }
.experience-policy-heading small { color:#738197; font-size:9px; font-weight:650; line-height:1.5; }
#experienceNotes {
  min-height: 220px;
  padding: 13px 14px;
  resize: vertical;
  color: #24344d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
  white-space: pre-wrap;
}
#experienceNotes::placeholder,
#experienceNotes::-webkit-input-placeholder {
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.experience-secure-note { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; margin-bottom: 12px; padding: 13px; border: 1px solid #bed5ff; border-radius: 12px; background: linear-gradient(135deg,#f6f9ff,#edf4ff); }
.experience-secure-note > span:last-child { display: grid; gap: 3px; }
.experience-secure-note strong { color: #243750; font-size: 10px; }
.experience-secure-note small { color: #68788e; font-size: 8px; font-weight: 700; line-height: 1.45; }
.experience-secure-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #fff; color: var(--blue); box-shadow: 0 5px 12px rgba(11,85,255,.10); }
.builder-field:has(#experienceCheckoutButton) { margin-top: 10px; padding-top: 12px; }
.builder-field:has(#experienceConfirmationNextText),
.builder-field:has(#experienceNextStep) { margin-top: 10px; padding-top: 12px; }
.experience-confirmation-icons { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-top: 10px; }
.experience-confirmation-icons label { cursor: pointer; }
.experience-confirmation-icons input { position: absolute; opacity: 0; pointer-events: none; }
.experience-confirmation-icons span { min-height: 44px; display: grid; place-items: center; border: 1px solid #dce4ee; border-radius: 9px; background: #fff; color: #5a6b83; font-size: 20px; transition: .16s ease; }
.experience-confirmation-icons input:checked + span { border-color: var(--blue); background: #edf4ff; color: var(--blue); box-shadow: 0 0 0 3px rgba(11,85,255,.08); }
.experience-publish-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 28px; background: rgba(9,22,43,.58); backdrop-filter: blur(8px); animation: experience-crop-fade .2s ease; }
.experience-publish-modal[hidden] { display: none; }
.experience-publish-dialog { width: min(820px,100%); max-height: calc(100vh - 40px); position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 24px; background: #fff; box-shadow: 0 34px 100px rgba(4,15,34,.30); animation: experience-crop-rise .25s ease; }
.experience-publish-close { position: absolute; z-index: 2; top: 16px; right: 16px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #55647a; font-size: 24px; cursor: pointer; }
.experience-publish-close:hover { background: #edf4ff; color: var(--blue); }
.experience-publish-celebration { min-height: 520px; display: grid; place-items: center; align-content: center; gap: 13px; padding: 36px 34px 44px; border-right: 1px solid #e4eaf2; background: radial-gradient(circle at 50% 26%,rgba(11,85,255,.10),transparent 22%),linear-gradient(180deg,#fff,#f6f9ff); text-align: center; }
.experience-confetti { color: #6b8dff; font-size: 24px; letter-spacing: 12px; }
.experience-celebration-icon { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#edf4ff,#dbe8ff); color: var(--blue); font-size: 44px; font-weight: 900; }
.experience-publish-celebration h2 { margin: 0; color: #111d31; font-size: 38px; line-height: 1.05; letter-spacing: -.05em; }
.experience-publish-celebration h2 span { color: var(--blue); }
.experience-publish-celebration > p { max-width: 330px; margin: 0; color: #627087; font-size: 13px; line-height: 1.65; font-weight: 650; }
.experience-publish-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 10px; }
.experience-publish-benefits span { display: grid; place-items: center; gap: 6px; color: #43536a; font-size: 9px; font-weight: 800; }
.experience-publish-benefits strong { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #eaf2ff; color: var(--blue); font-size: 18px; }
.experience-account-form { display: grid; align-content: center; gap: 10px; padding: 38px 38px 42px; }
.experience-account-form h2 { margin: 0; color: #152139; font-size: 25px; letter-spacing: -.04em; }
.experience-account-form > p:not(.builder-eyebrow):not(.experience-account-login) { margin: -4px 0 5px; color: #6d7b8e; font-size: 11px; line-height: 1.5; }
.experience-account-form ul { display: grid; gap: 7px; margin: 2px 0; padding: 0; list-style: none; color: #3e4e64; font-size: 10px; font-weight: 750; }
.experience-account-form li:before { content: "✓"; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 7px; border-radius: 50%; background: #e8f9ef; color: #17a65a; }
.experience-account-form > button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 11px; background: linear-gradient(180deg,var(--blue),var(--blue-dark)); color: #fff; box-shadow: 0 12px 26px rgba(11,85,255,.22); font: 900 13px/1 Inter,sans-serif; cursor: pointer; }
.experience-account-login { margin: 4px 0 0; color: #64748a; font-size: 10px; text-align: center; }
.experience-account-login a { color: var(--blue); font-weight: 850; text-decoration: none; }
.experience-publish-security { display: none; }
@media (max-width: 760px) { .experience-publish-dialog { grid-template-columns: 1fr; } .experience-publish-celebration { display: none; } .experience-account-form { padding: 46px 28px; } }
.experience-instrument-copy { min-width: 0; display: grid; gap: 2px; }
.experience-instrument-copy strong { overflow: hidden; color: #20324c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.experience-instrument-copy small { overflow: hidden; color: #7a8798; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.experience-switch { width: 34px; height: 20px; position: relative; display: block; cursor: pointer; }
.experience-switch input { position: absolute; opacity: 0; pointer-events: none; }
.experience-switch span { position: absolute; inset: 0; border-radius: 999px; background: #cfd8e5; transition: background .16s ease; }
.experience-switch span:after { content: ""; width: 16px; height: 16px; position: absolute; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(7,23,53,.2); transition: transform .16s ease; }
.experience-switch input:checked + span { background: var(--blue); }
.experience-switch input:checked + span:after { transform: translateX(14px); }
.experience-add-instrument { width: 100%; min-height: 42px; margin-top: 9px; border: 1px dashed #9bbdff; border-radius: 10px; background: #fafdff; color: var(--blue); cursor: pointer; font: 850 10px/1 Inter,sans-serif; }
.experience-add-instrument:hover { background: #f0f6ff; }
.experience-see-all-instruments { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding: 0 12px; border: 1px solid #dce5f0; border-radius: 10px; background: #fff; color: #40536f; cursor: pointer; font: 800 10px/1 Inter,sans-serif; transition: color .16s ease,border-color .16s ease,background .16s ease; }
.experience-see-all-instruments:hover { border-color: #b9cdf7; background: #f6f9ff; color: var(--blue); }
.experience-see-all-instruments span:last-child { color: var(--blue); font-size: 16px; transition: transform .18s ease; }
.experience-see-all-instruments[aria-expanded="true"] span:last-child { transform: rotate(180deg); }
.experience-custom-instrument { margin-top: 9px; padding: 12px; border: 1px solid #dce5f0; border-radius: 11px; background: #f8faff; animation: experience-panel-in .2s ease both; }
.experience-custom-instrument[hidden] { display: none; }
.experience-custom-instrument-actions { display: flex; justify-content: flex-end; gap: 8px; }
.experience-custom-instrument-actions button { min-height: 35px; padding: 0 12px; border-radius: 8px; cursor: pointer; font: 850 9px/1 Inter,sans-serif; }
.experience-custom-instrument-actions button:first-child { border: 1px solid #d6e0ec; background: #fff; color: #53647b; }
.experience-custom-instrument-actions button:last-child { border: 1px solid var(--blue); background: var(--blue); color: #fff; }
.experience-optional-label { color: #8a97a8; font-size: 8px; font-weight: 700; }
.experience-custom-image-upload { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid #d9e3ef; border-radius: 10px; background: #fff; }
.experience-custom-image-upload > span { min-height: 42px; display: flex; align-items: center; gap: 9px; color: #8995a5; font-size: 9px; font-weight: 700; }
.experience-custom-image-upload > span img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; }
.experience-custom-image-upload label { padding: 8px 10px; border: 1px solid #cbd9eb; border-radius: 8px; color: var(--blue); cursor: pointer; font-size: 9px; font-weight: 850; }
.experience-custom-image-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.experience-inline-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 10px; }
[data-experience-panel="6"] .experience-inline-fields { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; }
[data-experience-panel="6"] .experience-inline-fields .builder-field { min-width: 0; margin-bottom: 0; grid-template-rows: 16px 44px; }
[data-experience-panel="6"] .experience-inline-fields .builder-field label { display: flex; align-items: center; min-height: 16px; }
[data-experience-panel="6"] .experience-inline-fields select { width: 100%; height: 44px; }
[data-experience-panel="6"] select:focus { border-color: var(--blue) !important; outline: 0; box-shadow: 0 0 0 4px rgba(59,130,246,.12) !important; }
.experience-availability-row select:focus { border-color: var(--blue) !important; background: #f7faff; box-shadow: 0 0 0 3px rgba(11,85,255,.10) !important; }
.experience-note { margin: 10px 0 0; color: #758399; font-size: 9px; line-height: 1.5; font-weight: 700; }
.experience-branding-option { min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #dce5f0; border-radius: 11px; background: #f8faff; cursor: pointer; }
.experience-branding-option input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--blue); }
.experience-branding-option > span { display: flex; align-items: center; gap: 7px; color: #52627a; font-size: 9px; font-weight: 800; }
.experience-branding-option img { width: 112px; height: auto; display: block; }
.experience-trial-message { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; margin-top: 10px; padding: 11px 12px; border: 1px solid #bfe7d8; border-radius: 10px; background: linear-gradient(145deg,#f0fff9,#f8fffc); color: #356859; font-size: 9px; line-height: 1.5; font-weight: 700; animation: experience-panel-in .2s ease both; }
.experience-trial-message[hidden] { display: none; }
.experience-trial-message strong { color: #087f5b; font-size: 10px; }

.experience-logo-upload { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 14px; align-items: center; padding: 13px; border: 1px solid #dbe5f1; border-radius: 12px; background: linear-gradient(145deg,#f9fbff,#f3f7ff); }
.experience-logo-preview { width: 88px; height: 68px; display: grid; place-items: center; overflow: hidden; padding: 10px; border: 1px solid #d7e2f0; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(7,23,53,.07); }
.experience-logo-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.experience-logo-copy { min-width: 0; }
.experience-logo-button { min-height: 38px; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid #bdd0ec; border-radius: 9px; background: #fff; color: #17477f !important; box-shadow: 0 5px 12px rgba(7,23,53,.055); cursor: pointer; font-size: 10px !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: none !important; transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.experience-logo-button:hover { transform: translateY(-1px); border-color: var(--blue); box-shadow: 0 8px 18px rgba(11,85,255,.12); }
.experience-logo-button[hidden] { display: none !important; }
.experience-logo-button span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; background: #eaf2ff; color: var(--blue); font-size: 13px; line-height: 1; }
.experience-logo-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.experience-logo-copy p { margin: 7px 0 0; color: #7a8799; font-size: 8px; line-height: 1.45; font-weight: 700; }
.experience-logo-actions { min-height: 38px; display: inline-flex; align-items: center; overflow: hidden; border: 1px solid #bdd0ec; border-radius: 9px; background: #fff; box-shadow: 0 5px 12px rgba(7,23,53,.055); }
.experience-logo-actions[hidden] { display: none; }
.experience-logo-actions label,
.experience-logo-actions button { min-height: 36px; display: inline-flex !important; align-items: center; padding: 0 12px; border: 0; background: transparent; color: #17477f !important; cursor: pointer; font: inherit; font-size: 10px !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: none !important; }
.experience-logo-actions label:hover,
.experience-logo-actions button:hover { background: #edf4ff; color: var(--blue) !important; }
.experience-logo-actions > span { width: 1px; height: 18px; background: #dbe5f1; }
.experience-logo-size { grid-column: 1 / -1; padding-top: 3px; }
.experience-logo-size[hidden] { display: none; }
.experience-logo-size > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.experience-logo-size label { color: #42536d !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: 0 !important; text-transform: none !important; }
.experience-logo-size output { color: var(--blue); font-size: 9px; font-weight: 900; }
.experience-logo-size input[type="range"] { width: 100%; height: 5px; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg,var(--blue),#90b3ff); accent-color: var(--blue); cursor: pointer; }
.experience-logo-alignment { display: grid; grid-template-columns: repeat(2,1fr); gap: 3px; margin-top: 10px; padding: 3px; border: 1px solid #dbe5f1; border-radius: 12px; background: linear-gradient(145deg,#f8fbff,#eef5ff); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.experience-logo-alignment label { position: relative; display: block !important; margin: 0 !important; }
.experience-logo-alignment input { position: absolute; opacity: 0; pointer-events: none; }
.experience-logo-alignment span { min-height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #64748b; font-size: 10px; font-weight: 900; cursor: pointer; transition: background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease; }
.experience-logo-alignment span:hover { background: rgba(255,255,255,.72); color: #1d4ed8; }
.experience-logo-alignment input:checked + span { background: #fff; color: var(--blue); box-shadow: 0 6px 16px rgba(11,85,255,.12),0 0 0 1px rgba(11,85,255,.12); }

.experience-color-control { overflow: hidden; border: 1px solid #dbe5f1; border-radius: 12px; background: linear-gradient(145deg,#fbfdff,#f3f7ff); }
.experience-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 13px; }
.experience-swatch,
.experience-custom-color { width: 34px; height: 34px; position: relative; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 3px solid #fff; border-radius: 11px; background: var(--swatch); box-shadow: 0 0 0 1px rgba(15,31,56,.13),0 5px 12px rgba(7,23,53,.09); cursor: pointer; transition: transform .16s ease,box-shadow .16s ease; }
.experience-swatch:hover,
.experience-custom-color:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(15,31,56,.18),0 9px 17px rgba(7,23,53,.13); }
.experience-swatch.active { box-shadow: 0 0 0 2px #132b4c,0 8px 17px rgba(7,23,53,.14); }
.experience-swatch.active:after { content: "✓"; color: #fff; font-size: 13px; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.experience-custom-color { overflow: hidden; border-radius: 11px; background: conic-gradient(from 45deg,#ff4d6d,#ffb703,#51cf66,#22b8cf,#4361ee,#9b5de5,#ff4d6d); color: #172944; }
.experience-custom-color:after { content: ""; position: absolute; inset: 5px; border-radius: 6px; background: rgba(255,255,255,.9); }
.experience-custom-color:after,
.experience-custom-color span { pointer-events: none; }
.experience-custom-color span { position: relative; z-index: 1; font-size: 17px; font-weight: 800; }
#experienceAccentColor { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.experience-color-value { min-height: 39px; display: grid; grid-template-columns: 13px 1fr auto; align-items: center; gap: 8px; padding: 0 13px; border-top: 1px solid #e2e9f2; background: rgba(255,255,255,.72); color: #6b7b91; font-size: 9px; font-weight: 800; }
.experience-color-dot { width: 11px; height: 11px; border-radius: 4px; background: #0b55ff; box-shadow: 0 0 0 1px rgba(7,23,53,.12); }
.experience-color-value strong { color: #172944; font-size: 10px; letter-spacing: .03em; }

.experience-stage {
  height: calc(100vh - 92px);
  min-height: 0;
  position: sticky;
  top: 84px;
  align-self: start;
  display: grid;
  place-items: center;
  padding: 20px 24px;
  overflow: hidden;
  background: radial-gradient(circle at 72% 4%,rgba(11,85,255,.075),transparent 27%),linear-gradient(180deg,#fbfdff,#f7faff);
}
.experience-preview-toolbar { position:absolute; z-index:3; top:12px; right:18px; display:inline-flex; padding:3px; border:1px solid #dce5f0; border-radius:10px; background:rgba(255,255,255,.94); box-shadow:0 7px 18px rgba(7,23,53,.07); }
.experience-preview-toolbar button { min-height:31px; padding:0 12px; border:0; border-radius:7px; background:transparent; color:#66758a; font:800 10px/1 Inter,sans-serif; cursor:pointer; }
.experience-preview-toolbar button.active { background:#edf4ff; color:var(--blue); box-shadow:0 2px 7px rgba(11,85,255,.10); }
.experience-stage.mobile-preview .experience-app-surface { width: min(100%,430px); height: 100%; display: grid; place-items: center; }
.experience-stage.mobile-preview .experience-app-stage { border: 1px solid rgba(15,23,42,.82); border-radius: 34px; background: linear-gradient(180deg,#172033,#050812); box-shadow: 0 20px 55px rgba(7,23,53,.22), inset 0 0 0 1px rgba(255,255,255,.08); }
.experience-stage.mobile-preview .experience-app-stage::before { content: ""; position: absolute; z-index: 2; top: 7px; left: 50%; width: 74px; height: 16px; border-radius: 0 0 12px 12px; background: #050812; transform: translateX(-50%); pointer-events: none; }
.experience-stage.mobile-preview .experience-app-canvas { transform-origin: top center; }
.experience-stage.mobile-preview .experience-app-canvas,
.experience-stage.mobile-preview .experience-app-frame { border-radius: 24px; }

.experience-app-surface { width: min(100%,1180px); display: grid; place-items: center; }
.experience-app-stage { width: 100%; position: relative; overflow: hidden; }
.experience-app-canvas { width: 1180px; height: 760px; transform-origin: top left; }
.experience-app-frame { width: 1180px; height: 760px; display: block; border: 0; background: #f7faff; }

.experience-publish-summary { display: grid; gap: 0; margin: 0; }
.experience-publish-summary div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.experience-publish-summary div:last-child { border-bottom: 0; }
.experience-publish-summary dt { color: #718096; font-size: 10px; font-weight: 800; }
.experience-publish-summary dd { margin: 0; color: #172944; font-size: 10px; font-weight: 850; text-align: right; }
.experience-create-account { width: 100%; display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; border-radius: 11px; background: linear-gradient(180deg,var(--blue),var(--blue-dark)); color: #fff; box-shadow: 0 12px 24px rgba(11,85,255,.2); text-decoration: none; font-size: 13px; font-weight: 900; }
.experience-step-actions { display: grid; grid-template-columns: minmax(112px,.42fr) minmax(160px,1fr); gap: 10px; margin-top: 18px; }
.experience-step-actions button { min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer; font: 900 12px/1 Inter,sans-serif; transition: transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease; }
.experience-step-actions button:hover { transform: translateY(-1px); }
.experience-step-back { border: 1px solid #ced9e7; background: #fff; color: #40526f; box-shadow: 0 6px 14px rgba(7,23,53,.045); }
.experience-step-back:hover { border-color: #9fb3cc; background: #f8faff; }
.experience-step-continue { border: 1px solid var(--blue); background: linear-gradient(180deg,var(--blue),var(--blue-dark)); color: #fff; box-shadow: 0 10px 20px rgba(11,85,255,.18); }
.experience-step-continue:hover { box-shadow: 0 13px 25px rgba(11,85,255,.24); }

body.experience-crop-open { overflow: hidden; }
.experience-crop-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(7,23,53,.48); backdrop-filter: blur(8px); animation: experience-crop-fade .18s ease both; }
.experience-crop-modal[hidden] { display: none; }
.experience-crop-dialog { width: min(620px,100%); padding: 22px; border: 1px solid rgba(255,255,255,.8); border-radius: 20px; background: #fff; box-shadow: 0 30px 90px rgba(7,23,53,.28); animation: experience-crop-rise .22s cubic-bezier(.2,.8,.2,1) both; }
.experience-crop-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.experience-crop-header p { margin: 0 0 4px; color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.experience-crop-header h2 { margin: 0; color: #10233f; font-size: 21px; letter-spacing: -.035em; }
.experience-crop-header button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid #dce5f0; border-radius: 9px; background: #f7f9fc; color: #53647c; cursor: pointer; font-size: 22px; line-height: 1; }
.experience-crop-header button:hover { border-color: #b9cbe2; background: #eef4fc; color: #10233f; }
.experience-crop-intro { margin: 9px 0 15px; color: #697890; font-size: 11px; line-height: 1.5; font-weight: 650; }
.experience-crop-stage { height: 330px; position: relative; overflow: hidden; touch-action: none; border: 1px solid #cfdbea; border-radius: 14px; background-color: #eef3f9; background-image: linear-gradient(45deg,#dfe7f1 25%,transparent 25%),linear-gradient(-45deg,#dfe7f1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe7f1 75%),linear-gradient(-45deg,transparent 75%,#dfe7f1 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; cursor: grab; }
.experience-crop-stage:active { cursor: grabbing; }
.experience-crop-stage > img { position: absolute; max-width: none; user-select: none; pointer-events: none; transform: translate(-50%,-50%); }
.experience-crop-shade { display: none; }
.experience-crop-frame { position: absolute; border: 2px solid #fff; border-radius: 3px; pointer-events: none; box-shadow: 0 0 0 1px var(--blue),0 0 0 999px rgba(7,23,53,.16); }
.experience-crop-frame:before,
.experience-crop-frame:after { content: ""; position: absolute; pointer-events: none; opacity: .42; }
.experience-crop-frame:before { left: 33.333%; top: 0; bottom: 0; width: 33.333%; border-left: 1px solid #fff; border-right: 1px solid #fff; }
.experience-crop-frame:after { left: 0; right: 0; top: 33.333%; height: 33.333%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
.experience-crop-frame button { width: 18px; height: 18px; position: absolute; z-index: 2; padding: 0; border: 3px solid #fff; border-radius: 6px; background: var(--blue); box-shadow: 0 3px 9px rgba(7,23,53,.25); pointer-events: auto; touch-action: none; }
.experience-crop-frame button[data-crop-handle="nw"] { left: -10px; top: -10px; cursor: nwse-resize; }
.experience-crop-frame button[data-crop-handle="ne"] { right: -10px; top: -10px; cursor: nesw-resize; }
.experience-crop-frame button[data-crop-handle="sw"] { left: -10px; bottom: -10px; cursor: nesw-resize; }
.experience-crop-frame button[data-crop-handle="se"] { right: -10px; bottom: -10px; cursor: nwse-resize; }
.experience-crop-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.experience-crop-footer button { min-height: 40px; padding: 0 16px; border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 900; }
.experience-crop-cancel { border: 1px solid #d7e1ed; background: #fff; color: #445670; }
.experience-crop-apply { border: 1px solid var(--blue); background: linear-gradient(180deg,var(--blue),var(--blue-dark)); color: #fff; box-shadow: 0 8px 18px rgba(11,85,255,.2); }
@keyframes experience-crop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes experience-crop-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.experience-builder-app.sidebar-collapsed { grid-template-columns: 74px minmax(0,1fr); }
.experience-builder-app.sidebar-collapsed .builder-sidebar { padding: 24px 12px 20px; align-items: center; }
.experience-builder-app.sidebar-collapsed .builder-brand { margin: 0 0 30px; }
.experience-builder-app.sidebar-collapsed .builder-brand img,
.experience-builder-app.sidebar-collapsed .builder-home-link span:last-child,
.experience-builder-app.sidebar-collapsed .builder-side-label,
.experience-builder-app.sidebar-collapsed .builder-step span:last-child,
.experience-builder-app.sidebar-collapsed .builder-side-link span:last-child,
.experience-builder-app.sidebar-collapsed .builder-trial { display: none; }
.experience-builder-app.sidebar-collapsed .builder-brand img.experience-brand-mini-image { width: 39px; height: 40px; display: block !important; object-fit: contain; }
.experience-builder-app.sidebar-collapsed .builder-brand-mini { display: block; }
.experience-builder-app.sidebar-collapsed .builder-home-link,
.experience-builder-app.sidebar-collapsed .builder-step,
.experience-builder-app.sidebar-collapsed .builder-side-link { justify-content: center; padding: 8px; }
.experience-builder-app.sidebar-collapsed .builder-sidebar-toggle { right: 25px; top: 66px; }
.experience-builder-app.sidebar-collapsed .builder-sidebar-toggle-arrow { transform: rotate(180deg); }

@media (min-width: 921px) {
  .experience-builder-app.sidebar-collapsed .experience-workspace { grid-template-columns: minmax(430px,460px) minmax(0,1fr); }
  .experience-builder-app.sidebar-collapsed .experience-stage { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 1120px) {
  .experience-workspace { grid-template-columns: 390px minmax(0,1fr); }
}

@media (max-width: 920px) {
  html:has(body[data-builder-kind="booking-experience"]),
  body[data-builder-kind="booking-experience"] { height: 100%; overflow: hidden; }
  .experience-builder-app,
  .experience-builder-app.sidebar-collapsed { height: 100dvh; min-height: 0; grid-template-columns: 1fr; overflow: hidden; }
  .experience-builder-app .builder-sidebar { display: none; }
  .experience-builder-app .builder-main { height: 100dvh; min-height: 0; overflow: hidden; }
  .experience-builder-app .builder-topbar { height: 68px; min-height: 68px; padding: 10px 14px; gap: 10px; }
  .experience-builder-app .builder-title { min-width: 0; gap: 8px; }
  .experience-builder-app .builder-title-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; }
  .experience-builder-app .builder-title strong { max-width: 132px; overflow: hidden; font-size: 14px; line-height: 1.05; text-overflow: ellipsis; }
  .experience-builder-app .builder-top-actions { min-width: 0; gap: 6px; }
  .experience-builder-app .builder-help,
  .experience-builder-app .builder-guest-divider,
  .experience-builder-app .bml-history-controls { display: none; }
  .experience-builder-app .builder-save-draft { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 10px; }
  .experience-builder-app .builder-save-draft > span:last-child { display: none; }
  .experience-builder-app .builder-publish-action { min-height: 40px; padding: 0 13px; }
  .experience-builder-app [data-account-menu-slot] { flex: 0 0 auto; }

  .experience-workspace {
    width: 100%;
    height: calc(100dvh - 68px);
    min-height: 0;
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .experience-workspace::-webkit-scrollbar { display: none; }
  .experience-editor,
  .experience-stage {
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .experience-editor {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 16px calc(104px + env(safe-area-inset-bottom));
    border-right: 0;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .experience-stage,
  .experience-stage.mobile-preview {
    height: 100% !important;
    min-height: 0;
    position: relative;
    top: auto;
    align-self: stretch;
    display: block;
    padding: 0;
    overflow: hidden !important;
    background: #f7faff;
  }
  .experience-preview-toolbar { display: none; }
  .experience-stage.mobile-preview .experience-app-surface,
  .experience-app-surface {
    width: 100%;
    height: 100%;
    display: block;
  }
  .experience-stage.mobile-preview .experience-app-stage,
  .experience-app-stage {
    width: 100%;
    height: 100% !important;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #f7faff;
    box-shadow: none;
  }
  .experience-stage.mobile-preview .experience-app-stage::before { display: none; }
  .experience-stage.mobile-preview .experience-app-canvas,
  .experience-app-canvas {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
  .experience-stage.mobile-preview .experience-app-frame,
  .experience-app-frame {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
  }

  .experience-mobile-pane-nav {
    position: fixed;
    z-index: 50;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(360px,calc(100vw - 28px));
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(92px,1fr) 52px minmax(92px,1fr);
    align-items: center;
    gap: 5px;
    padding: 7px;
    border: 1px solid rgba(203,215,230,.92);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 48px rgba(7,23,53,.20),0 3px 10px rgba(7,23,53,.08);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
  }
  .experience-mobile-pane-nav button {
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #66758a;
    font: 850 12px/1 Inter,sans-serif;
    cursor: pointer;
    transition: color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  .experience-mobile-pane-nav button.active {
    background: #edf4ff;
    color: var(--blue);
    box-shadow: inset 0 0 0 1px rgba(11,85,255,.10);
  }
  .experience-mobile-pane-nav button:active { transform: scale(.98); }
  .experience-mobile-pane-icon { font-size: 17px; line-height: 1; }
  .experience-mobile-pane-track {
    width: 44px;
    height: 7px;
    position: relative;
    display: block;
    border-radius: 999px;
    background: #dce7f5;
  }
  .experience-mobile-pane-track::before,
  .experience-mobile-pane-track::after {
    content: "";
    width: 3px;
    height: 3px;
    position: absolute;
    top: 2px;
    border-radius: 50%;
    background: #9cb1cb;
  }
  .experience-mobile-pane-track::before { left: 5px; }
  .experience-mobile-pane-track::after { right: 5px; }
  .experience-mobile-pane-track i {
    width: 19px;
    height: 7px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 3px 8px rgba(11,85,255,.28);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .experience-mobile-pane-nav.preview-active .experience-mobile-pane-track i { transform: translateX(25px); }
}

@media (max-width: 640px) {
  .experience-editor { padding: 18px 14px calc(104px + env(safe-area-inset-bottom)); }
  .experience-editor-header { margin-bottom: 15px; }
  .experience-editor-header h1 { font-size: 23px; }
  .experience-editor .builder-card { padding: 16px 14px; }
  .experience-inline-fields,
  .experience-offer-field-pair { grid-template-columns: 1fr; gap: 14px; }
  .experience-check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .experience-step-actions { grid-template-columns: minmax(96px,.42fr) minmax(142px,1fr); }
  .experience-setting-row { min-height: 62px; }
  .experience-photo-shape { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .experience-photo-shape legend { grid-column: 1 / -1; }
  .experience-confirm-overlay { padding: 16px; }
  .experience-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .experience-publish-modal { padding: 12px; overflow-y: auto; }
  .experience-publish-dialog { max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto; border-radius: 18px; }
  .experience-account-form,
  .experience-signed-in-publish { padding: 42px 20px 26px; }
  .experience-crop-modal { padding: 12px; overflow-y: auto; }
  .experience-crop-dialog { padding: 18px; border-radius: 17px; }
  .experience-crop-stage { height: min(280px,38dvh); }
}

@media (max-width: 360px) {
  .experience-builder-app .builder-topbar { padding-left: 10px; padding-right: 10px; }
  .experience-builder-app .builder-title strong { max-width: 102px; font-size: 13px; }
  .experience-builder-app .builder-publish-action { padding: 0 10px; font-size: 11px; }
  .experience-mobile-pane-nav { width: calc(100vw - 20px); }
  .experience-editor { padding-left: 10px; padding-right: 10px; }
  .experience-check-grid { grid-template-columns: 1fr; }
}

.experience-photo-shape { margin: 17px 0 0; padding: 15px 0 0; display: flex; gap: 10px; border: 0; border-top: 1px solid #e5ebf3; }
.experience-photo-shape legend { width: 100%; margin-bottom: 10px; color: #17243a; font-size: 12px; font-weight: 800; }
.experience-photo-shape label { flex: 1; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d7e1ed; border-radius: 10px; color: #53647c; font-size: 11px; font-weight: 800; cursor: pointer; }
.experience-photo-shape label:has(input:checked) { border-color: var(--blue); background: #eff6ff; color: var(--blue); box-shadow: 0 0 0 2px rgba(37,99,235,.08); }
.experience-photo-shape input { position: absolute; opacity: 0; pointer-events: none; }
.experience-photo-shape label span { width: 18px; height: 18px; border: 2px solid currentColor; background: #fff; }
.experience-photo-shape .is-circle { border-radius: 50%; }
.experience-photo-shape .is-square { border-radius: 5px; }
.experience-instructor-done { width: 100%; min-height: 44px; margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--blue); border-radius: 10px; background: linear-gradient(180deg,var(--blue),var(--blue-dark)); color: #fff; font-size: 12px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 22px rgba(11,85,255,.20); }
.experience-instructor-done span { width: 19px; height: 19px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.75); border-radius: 50%; }
.experience-instructor-done:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(11,85,255,.25); }
.experience-confirm-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: rgba(7,23,53,.48); backdrop-filter: blur(7px); }
.experience-confirm-dialog { width: min(420px,100%); padding: 22px; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(7,23,53,.26); }
.experience-confirm-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 50%; background: #fff7e6; color: #d97706; font-size: 22px; font-weight: 900; }
.experience-confirm-dialog h2 { margin: 0 0 7px; color: #10233f; font-size: 19px; letter-spacing: -.025em; }
.experience-confirm-dialog p { margin: 0; color: #66758b; font-size: 12px; line-height: 1.55; }
.experience-confirm-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.experience-confirm-actions button { min-height: 39px; padding: 0 15px; border-radius: 9px; font-size: 11px; font-weight: 850; cursor: pointer; }
.experience-confirm-cancel { border: 1px solid #d7e1ed; background: #fff; color: #445670; }
.experience-confirm-remove { border: 1px solid #dc2626; background: #dc2626; color: #fff; }
.experience-availability-conflict .experience-confirm-dialog ul { margin: 14px 0 0; padding: 11px 12px 11px 27px; border: 1px solid #dce7f5; border-radius: 10px; background: #f7faff; color: #40536d; font-size: 10px; font-weight: 700; line-height: 1.55; }
.experience-availability-conflict .experience-confirm-remove { border-color: var(--blue); background: var(--blue); }

.experience-payment-master { margin: 0 0 16px; padding: 14px 16px; border: 1px solid #dbe6f3; border-radius: 12px; background: #f7faff; box-shadow: 0 8px 20px rgba(15,35,65,.05); }
[data-experience-panel="8"].payments-disabled > :not(.experience-editor-header):not(.experience-payment-master):not(.builder-step-actions) { display: none !important; }
.builder-step.skipped:not(.active) { color: #9aa7b8; opacity: .72; }
.builder-step.skipped:not(.active) span:last-child { text-decoration: line-through; text-decoration-thickness: 1px; }
.experience-account-form .password-control { position: relative; display: block; width: 100%; }
.experience-account-form .password-control > input { width: 100%; padding-right: 46px !important; }
.experience-account-form .password-visibility { position: absolute; top: 50%; right: 9px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #6b7b91; cursor: pointer; transform: translateY(-50%); transition: background .16s ease, color .16s ease; }
.experience-account-form .password-visibility:hover,.experience-account-form .password-visibility:focus-visible { background: #eff6ff; color: var(--blue); outline: 0; }
.experience-account-form .password-visibility svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.experience-account-form .password-control.showing-password .password-visibility::after { content: ""; position: absolute; width: 20px; height: 1.5px; border-radius: 999px; background: currentColor; transform: rotate(-42deg); }
.experience-account-error { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #fecaca; border-radius: 9px; background: #fff7f7; color: #b91c1c; font-size: 11px; font-weight: 700; line-height: 1.45; }

.experience-account-form input,
.experience-account-form input::placeholder,
.experience-account-form input::-webkit-input-placeholder {
  font-family: Inter, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

.experience-account-form input::placeholder,
.experience-account-form input::-webkit-input-placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

.experience-account-login {
  line-height: 1.45;
}