.portfolio-editor-toolbar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #ddd1fa;
    border-radius: 14px;
    background: linear-gradient(110deg, #f7f2ff, #fff);
    color: #25153e;
    box-shadow: 0 3px 12px rgb(74 37 130 / 7%);
}
.portfolio-editor-toolbar__message,
.portfolio-editor-toolbar__actions { display: flex; align-items: center; gap: 10px; }
.portfolio-editor-toolbar__message > div { display: grid; gap: 2px; }
.portfolio-editor-toolbar__message strong { font-size: 13px; }
.portfolio-editor-toolbar__message span:not(.portfolio-editor-toolbar__icon) { color: #6c607d; font-size: 11px; }
.portfolio-editor-toolbar__icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: #eee5ff;
    color: #6828d9;
}
.portfolio-editor-toolbar__actions { flex-wrap: wrap; justify-content: flex-end; }
.portfolio-editor-toolbar__actions form { margin: 0; }
.portfolio-sections-manager { position: relative; }
.portfolio-sections-manager summary { list-style: none; }
.portfolio-sections-manager summary::-webkit-details-marker { display: none; }
.portfolio-sections-manager__options {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    min-width: 180px;
    gap: 8px;
    padding: 12px;
    border: 1px solid #e5deef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(24 12 42 / 14%);
}
.portfolio-sections-manager__options label { display: flex; align-items: center; gap: 8px; text-transform: capitalize; font-size: 12px; }
.portfolio-editor-toolbar__actions [data-editor-status] { color: #675b78; font-size: 11px; }
.portfolio-editor-toolbar__actions [data-error="true"] { color: #b42318; }
.portfolio-editor-button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 11px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.portfolio-editor-button--light { border-color: #e5deef; background: #fff; color: #4c287e; }
.portfolio-editor-button--primary { background: #6424d8; color: #fff; }
.portfolio-editor-button:disabled { opacity: .6; cursor: wait; }
.portfolio-editor-dialog {
    position: fixed;
    inset: 0;
    width: min(92vw, 540px);
    max-width: 540px;
    max-height: 85vh;
    margin: auto;
    overflow: auto;
    border: 1px solid #e6dff0;
    border-radius: 18px;
    padding: 24px;
    background: #fff;
    color: #271d35;
    box-shadow: 0 22px 70px rgb(24 12 42 / 24%);
}
.portfolio-editor-dialog::backdrop { background: rgb(24 16 38 / 52%); }
.portfolio-editor-dialog [hidden] { display: none !important; }
.portfolio-editor-dialog h2 { margin: 0 36px 8px 0; font-size: 20px; font-weight: 800; }
.portfolio-editor-dialog label { display: block; margin: 18px 0 6px; font-size: 13px; font-weight: 700; }
.portfolio-editor-dialog textarea,
.portfolio-editor-dialog [data-editor-fields] input,
.portfolio-editor-dialog [data-editor-fields] select,
.portfolio-editor-search input,
.portfolio-editor-search select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #ded6e8;
    border-radius: 9px;
    padding: 10px 12px;
    background: #fff;
    color: #241b30;
    font: inherit;
    font-size: 14px;
}
.portfolio-editor-dialog textarea { min-height: 140px; resize: vertical; }
.portfolio-field-rows { display: grid; gap: 10px; margin: 16px 0 12px; }
.portfolio-field-row { display: flex; align-items: center; gap: 8px; }
.portfolio-field-row input { min-width: 0; flex: 1; }
.portfolio-field-row button { flex-shrink: 0; }
.portfolio-field-row--employment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.portfolio-field-row--employment label { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.portfolio-field-row--employment input { width: 100%; }
@media (max-width: 480px) {
    .portfolio-field-row--employment { grid-template-columns: minmax(0, 1fr); }
}
.portfolio-healthcare-fields__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 16px; }
.portfolio-healthcare-fields__button { display: grid; gap: 6px; padding: 14px; border: 1px solid #e5deef; border-radius: 10px; background: #faf8ff; color: #38234f; text-align: left; font-size: 14px; font-weight: 700; cursor: pointer; }
.portfolio-healthcare-fields__button .portfolio-editor-help { margin: 0; font-weight: 400; }
.portfolio-healthcare-fields__button:hover { border-color: #a983e1; }
.portfolio-editor-dialog__close { position: absolute; top: 12px; right: 12px; }
.portfolio-editor-dialog__close button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f5f2f8; color: #574a66; cursor: pointer; }
.portfolio-editor-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.portfolio-editor-dialog [role="alert"] { min-height: 18px; margin: 7px 0 0; color: #b42318; font-size: 12px; }
.portfolio-editor-help { margin: 6px 0 12px; color: #6c607d; font-size: 12px; line-height: 1.5; }
.portfolio-editor-search { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 8px; margin: 14px 0; }
.portfolio-editor-listings { max-height: 46vh; min-height: 80px; overflow: auto; padding: 4px 2px; }
.portfolio-image-crop { width: min(100%, 460px); aspect-ratio: 1 / 1; margin: 16px auto 10px; overflow: hidden; border: 1px solid #e5deef; border-radius: 10px; background: #f7f5fa; }
.portfolio-image-crop img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-editor-dialog.portfolio-photo-dialog { width: min(94vw, 720px); max-width: 720px; max-height: min(90vh, 740px); max-height: min(90dvh, 740px); padding: 0; overflow: hidden; border-radius: 22px; }
.portfolio-photo-dialog[open] { display: flex; flex-direction: column; }
.portfolio-photo-header { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid #eee7f5; }
.portfolio-photo-header__icon,
.portfolio-photo-picker__icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 12px; background: #eee7ff; color: #6424d8; font-size: 19px; }
.portfolio-photo-dialog .portfolio-photo-header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800 !important; line-height: 1.3; }
.portfolio-photo-header .portfolio-editor-help { margin: 0; }
.portfolio-photo-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
.portfolio-photo-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.portfolio-photo-preview { min-width: 0; }
.portfolio-photo-dialog .portfolio-image-crop { position: relative; width: min(100%, 300px); margin: 0 auto 12px; border-radius: 16px; background: #f3f1f7; box-shadow: 0 4px 16px rgb(24 12 42 / 6%); }
.portfolio-photo-empty { display: flex; height: 100%; min-height: 120px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; color: #78678b; text-align: center; }
.portfolio-photo-empty i { font-size: 36px; color: #a486ca; }
.portfolio-photo-empty span { font-size: 14px; font-weight: 700; }
.portfolio-photo-empty small { font-size: 12px; }
.portfolio-photo-settings h3 { margin: 0 0 12px; color: #38234f; font-size: 14px; font-weight: 700 !important; }
.portfolio-photo-dialog .portfolio-photo-picker { position: relative; display: grid; justify-items: center; gap: 12px; margin: 0; padding: 26px 16px; border: 1px dashed #ac8bd7; border-radius: 16px; background: #faf7ff; text-align: center; cursor: pointer; }
.portfolio-photo-picker:hover,
.portfolio-photo-picker:focus-within { border-color: #6424d8; background: #f1eaff; outline: 2px solid #dfd0f4; outline-offset: 2px; }
.portfolio-photo-picker__title { color: #5d25bd; font-size: 13px; font-weight: 700; }
.portfolio-photo-picker > span:last-of-type { color: #78678b; font-size: 11px; font-weight: 400; }
.portfolio-photo-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.portfolio-photo-picker:has(input:disabled) { opacity: .6; cursor: wait; }
.portfolio-photo-file-status { overflow-wrap: anywhere; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f5f6fa; color: #596173; }
.portfolio-image-crop[data-ready="true"] { cursor: grab; touch-action: none; user-select: none; }
.portfolio-image-crop[data-dragging="true"] { cursor: grabbing; }
.portfolio-image-crop:focus-visible { outline: 3px solid #a486ca; outline-offset: 3px; }
.portfolio-image-crop img { pointer-events: none; user-select: none; }
.portfolio-photo-dialog .portfolio-photo-actions { margin: 14px 0 0; padding: 0; }
.portfolio-photo-dialog .portfolio-editor-button { min-height: 42px; font-size: 13px; }
@media (max-width: 600px) {
    .portfolio-photo-header { padding: 16px; gap: 10px; }
    .portfolio-photo-body { padding: 16px; }
    .portfolio-photo-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .portfolio-photo-dialog .portfolio-image-crop { width: min(100%, 220px); margin-inline: auto; }
    .portfolio-photo-preview > p { text-align: center; }
    .portfolio-photo-actions button { flex: 1; }
}
.portfolio-inline-edit,
.bp-inline-edit {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    border: 1px solid #e9e0f5;
    border-radius: 8px;
    padding: 5px 9px;
    background: #fff;
    color: #5d25bd;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.portfolio-section-edit {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid #e7def2;
    border-radius: 7px;
    background: #fff;
    color: #6424d8;
    box-shadow: 0 1px 4px rgb(25 17 37 / 10%);
    font-size: 10px;
    cursor: pointer;
    transition: opacity .15s ease, border-color .15s ease, background-color .15s ease;
}
.portfolio-section-edit:hover { border-color: #b99be8; background: #f8f4ff; }
.portfolio-add-listing,
.portfolio-add-gallery,
.portfolio-add-video { margin-right: 34px; }
.portfolio-inline-edit:hover,
.bp-inline-edit:hover { border-color: #b99be8; background: #f8f4ff; }
.bp-section,
.professional-portfolio__section,
.professional-portfolio [data-portfolio-section] { position: relative; }
.portfolio-editable-field { position: relative; min-width: 0; padding-right: 32px; }
.portfolio-editable-field > .portfolio-section-edit { top: 1px; right: 0; }
.portfolio-editable-field > .portfolio-inline-field-edit { top: 30px; }
.portfolio-editable-field--identity { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 5px; padding-right: 0; }
.portfolio-editable-field--identity > .portfolio-section-edit { position: relative; top: auto; right: auto; flex: 0 0 24px; }
.portfolio-editable-control { position: relative; padding-top: 10px; }
.portfolio-editable-control > .portfolio-section-edit { top: 0; right: 2px; }
.portfolio-editable-control--icon { width: 32px; min-height: 34px; padding-top: 0; }
.portfolio-editable-control--icon > .portfolio-section-edit { top: 5px; right: 4px; }
.portfolio-followup-edit { top: 42px; }
.portfolio-listing-item { position: relative; min-width: 0; padding-top: 28px; }
.portfolio-listing-edit { top: 0; right: 0; }
.bp-listing-item { position: relative; min-width: 0; padding-top: 28px; }
.bp-listing-item .bp-listing-edit { top: 0; right: 0; }
.business-profile .bp-inline-edit,
.professional-portfolio .portfolio-inline-edit { margin-top: 5px; }
.business-profile .bp-image-edit,
.portfolio-image-edit {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid #e7def2;
    border-radius: 7px;
    padding: 0;
    background: #fff;
    color: #6424d8;
    font-size: 10px;
    box-shadow: 0 1px 4px rgb(25 17 37 / 12%);
    cursor: pointer;
}
.business-profile .bp-cover { position: relative; }
.business-profile .bp-heading { display: grid; gap: 3px; }
@media (max-width: 767px) {
    .business-profile .bp-heading { display: contents; }
}
.business-profile .bp-logo,
.professional-portfolio__avatar { position: relative; }
.business-profile .bp-section-heading { position: relative; padding-right: 36px; }
.business-profile[data-business-editing="false"] .bp-section-heading { padding-right: 0; }
.business-profile[data-business-editing="false"] .bp-listing-item { padding-top: 0; }
.business-profile .bp-section-heading [data-add-listings]:not(.portfolio-section-edit) { margin-right: 34px; }
.business-profile .bp-listing-item .bp-listing { height: 100%; }
.business-profile .portfolio-edit-title { padding-right: 34px; }
.business-profile .bp-listing-edit { top: 0; right: 0; }
.business-profile .bp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.business-profile .bp-gallery-grid img { width: 100%; height: 150px; border-radius: 10px; object-fit: cover; }
[data-portfolio-draggable] { cursor: grab; }
.portfolio-editor-dragging { opacity: .45; outline: 2px dashed #7c3aed; }
[data-portfolio-editor] ~ .portfolio-editor-dialog { z-index: 1000; }
.portfolio-editor-toolbar :focus-visible,
.portfolio-editor-dialog :focus-visible,
.business-profile .bp-image-edit:focus-visible,
.professional-portfolio .portfolio-image-edit:focus-visible,
.portfolio-section-edit:focus-visible,
.portfolio-inline-edit:focus-visible,
.bp-inline-edit:focus-visible,
.portfolio-image-edit:focus-visible { outline: 3px solid #8b5cf6; outline-offset: 2px; }
.portfolio-contact-visibility,
.bp-contact-visibility { display: inline-flex; align-items: center; gap: 4px; color: #5e526b; font-size: 10px; }

@media (max-width: 700px) {
    .portfolio-editor-toolbar { align-items: stretch; flex-direction: column; gap: 10px; padding: 11px; }
    .portfolio-editor-toolbar__actions { justify-content: flex-start; }
    .portfolio-editor-toolbar__actions [data-editor-status] { width: 100%; }
    .portfolio-editor-search { grid-template-columns: minmax(0, 1fr); }
    .portfolio-editor-dialog { padding: 20px 16px 16px; }
    .business-profile .bp-inline-edit { opacity: 1; }
    .portfolio-section-edit { opacity: 1; }
    .business-profile .bp-section-heading { padding-right: 36px; }
    .portfolio-editable-field { padding-right: 28px; }
    .portfolio-section-edit,
    .business-profile .bp-image-edit,
    .professional-portfolio .portfolio-image-edit { width: 24px; height: 24px; font-size: 10px; }
    .portfolio-editable-field--identity > .portfolio-section-edit { flex-basis: 24px; }
    .portfolio-listing-item,
    .bp-listing-item { padding-top: 34px; }
}

@media (hover: hover) and (pointer: fine) {
    .portfolio-inline-edit,
    .business-profile .bp-inline-edit { opacity: .38; transition: opacity .15s ease; }
    .portfolio-inline-edit:hover,
    .business-profile .bp-inline-edit:hover,
    .portfolio-inline-edit:focus-visible,
    .business-profile .bp-inline-edit:focus-visible { opacity: 1; }
}
