.app-web-editor-toolbar {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    border: 5px solid rgb(55 60 63 / 90%);
    border-radius: 100px;
    background: rgb(40 40 40);
    box-shadow: 0 8px 20px 5px rgb(6 14 45 / 38%);
    color: #fff;
    backdrop-filter: blur(10px);
}
.app-web-editor-status {
    min-width: 190px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
}

.app-web-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-web-editor-btn {
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}

.app-web-editor-btn:hover {
    transform: translateY(-1px);
}

.app-web-editor-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.app-web-editor-btn-edit {
    background: #54afff;
    color: #08163f;
}

.app-web-editor-btn-save {
    background: #ffffff;
    color: #0d1d57;
}

.app-web-editor-btn-cancel {
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.app-web-editor-payload {
    position: fixed;
    right: 24px;
    bottom: 100px;
    z-index: 9998;
    width: min(520px, calc(100vw - 32px));
    max-height: 44vh;
    overflow: auto;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(7, 14, 42, .96);
    border: 1px solid rgba(84, 175, 255, .18);
    box-shadow: 0 18px 45px rgba(6, 14, 45, .24);
    color: #dce8ff;
}

.app-web-editor-payload-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
}

.app-web-editor-payload pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.55;
    color: #dce8ff;
}

.app-web-editor-hint {
    position: fixed;
    right: 24px;
    bottom: 96px;
    z-index: 9997;
    width: fit-content;
    max-width: min(460px, calc(100vw - 48px));
    padding: 5px 16px;
    border-radius: 100px;
    background: rgb(60 101 137 / 56%);
    border: 1px solid rgb(0 102 191 / 42%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.app-web-editor-edit-mode .app-web-editor-hint {
    opacity: 1;
    transform: translateY(-4px);
}

.app-web-editor-enabled [data-content-rel="true"] {
    transition: outline-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-rel="true"] {
    position: relative;
    cursor: pointer;
    outline: 1px solid transparent;
    outline-offset: 3px;
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-rel="true"]:hover {
    outline: 2px solid  rgba(50, 162, 253, 0.98);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(64, 170, 255, .18);
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="image"]:hover,
.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="bg-image"]:hover {
    outline: 2px solid rgba(42, 153, 255, 1);
    box-shadow: none;
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="image"]:hover,
.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="image"].is-editing {
    outline-color: transparent;
    box-shadow: none;
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="image"] {
    display: inline-block;
    box-shadow: inset 0 0 0 0 rgba(84, 175, 255, 0);
    transition: box-shadow .18s ease, filter .18s ease;
}


.app-web-editor-enabled.app-web-editor-edit-mode [data-content-rel="true"].is-editing {
    outline: 2px solid rgba(42, 153, 255, 1);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(42, 153, 255, .24);
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="text"].is-editing {
    background: rgba(64, 170, 255, .1);
    box-shadow: 0 0 0 4px rgba(64, 170, 255, .24);
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="text"][contenteditable="true"] {
    cursor: text;
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="text"]:hover {
    outline: 2px solid rgba(50, 162, 253, 0.98);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(64, 170, 255, .2);
}


.app-web-editor-enabled.app-web-editor-edit-mode .app-web-editor-image-outline-target {
    position: relative;
    transition: outline-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    outline: 1px solid transparent;
    outline-offset: 2px;
}

.app-web-editor-enabled.app-web-editor-edit-mode .app-web-editor-image-outline-target.is-outline-hover,
.app-web-editor-enabled.app-web-editor-edit-mode .app-web-editor-image-outline-target.is-outline-editing {
    outline: 2px solid rgba(50, 162, 253, 0.98);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(64, 170, 255, .18);
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="bg-image"] {
    overflow: hidden;
    min-height: 240px;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 0 rgba(84, 175, 255, 0);
    transition: box-shadow .18s ease, filter .18s ease;
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="bg-image"]:hover,
.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="bg-image"].is-editing {
    box-shadow: inset 0 0 0 2px rgba(64, 170, 255, 1), inset 0 0 0 8px rgba(64, 170, 255, .22);
    filter: brightness(1.03);
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="bg-image"]:hover::before,
.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="bg-image"].is-editing::before {
    opacity: 1;
    background: linear-gradient(180deg, rgba(19, 78, 138, .08) 0%, rgba(19, 78, 138, .18) 100%);
}

.app-web-editor-enabled [data-content-type="image"].is-uploading,
.app-web-editor-enabled [data-content-type="bg-image"].is-uploading {
    position: relative;
    overflow: hidden;
    filter: saturate(.75);
}

.app-web-editor-enabled [data-content-type="image"].is-uploading::before,
.app-web-editor-enabled [data-content-type="bg-image"].is-uploading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(7, 15, 48, .42);
    opacity: 1;
    pointer-events: none;
    z-index: 9;
}

.app-web-editor-enabled [data-content-type="image"].is-uploading::after,
.app-web-editor-enabled [data-content-type="bg-image"].is-uploading::after {
    content: "Uploading...";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(11, 27, 87, .96);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    opacity: 1;
    box-shadow: 0 10px 24px rgba(5, 13, 41, .24);
    white-space: nowrap;
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="bg-image"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(7, 15, 48, 0) 45%, rgba(7, 15, 48, .28) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="bg-image"]:hover::before,
.app-web-editor-enabled.app-web-editor-edit-mode [data-content-type="bg-image"].is-editing::before {
    opacity: 1;
}

.app-web-editor-enabled [data-content-rel="true"][contenteditable="true"]:focus {
    outline-color: rgba(84, 175, 255, 1);
}

@media (max-width: 767.98px) {
    .app-web-editor-toolbar {
        left: 12px;
        right: 12px;
        bottom: 12px;
        flex-direction: column;
        align-items: stretch;
    }

    .app-web-editor-status {
        min-width: 0;
    }

    .app-web-editor-actions {
        width: 100%;
    }

    .app-web-editor-btn {
        flex: 1 1 auto;
    }

    .app-web-editor-payload {
        left: 12px;
        right: 12px;
        width: auto;
        bottom: 140px;
    }

    .app-web-editor-hint {
        left: 12px;
        right: 12px;
        bottom: 132px;
        width: auto;
        max-width: none;
        border-radius: 14px;
        text-align: center;
    }

    .app-web-editor-edit-mode .app-web-editor-hint {
        transform: translateY(-4px);
    }
}