/* CMS */

.sup-panel {
    display: none;
    position: fixed;
    inset: auto auto;
    color: #1f1b2d;
    padding: 10px 14px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    z-index: 800;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-radius: 12px;
    border: 1px solid #b855ff;
    background: linear-gradient(180deg, #ffffff 0%, #fff6ff 100%);
    box-shadow: 0 10px 30px rgba(119, 26, 182, 0.15);
    width: 220px;
}

.edit-icon {
    cursor: pointer;
    margin-left: 10px;
}

[data-cmstarget].highlighted,
[data-cmstarget].highlighted-parent {
    background-color: rgba(147, 58, 255, 0.08) !important;
    outline: 2px solid rgba(124, 58, 237, 0.9);
    box-shadow:
        0 0 0 2px rgba(124, 58, 237, 0.4),
        0 10px 30px rgba(76, 29, 149, 0.15);
}

[data-cmstarget].highlighted-parent {
    outline-style: dashed;
    outline-color: rgba(124, 58, 237, 0.5);
    background-color: rgba(147, 58, 255, 0.04) !important;
}

[data-cmstarget].highlighted-child {
    position: relative;
    background-color: transparent !important;
    box-shadow: none;
}

[data-cmstarget].highlighted-child::before {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(192, 132, 252, 0.9) 0 2px, transparent 2px 8px) top,
        repeating-linear-gradient(90deg, rgba(192, 132, 252, 0.9) 0 2px, transparent 2px 8px) bottom,
        repeating-linear-gradient(0deg, rgba(192, 132, 252, 0.9) 0 2px, transparent 2px 8px) left,
        repeating-linear-gradient(0deg, rgba(192, 132, 252, 0.9) 0 2px, transparent 2px 8px) right;
    background-size:
        calc(100% - 12px) 1px,
        calc(100% - 12px) 1px,
        1px calc(100% - 12px),
        1px calc(100% - 12px);
    background-position:
        left 6px top 6px,
        left 6px calc(100% - 6px),
        left 6px top 6px,
        calc(100% - 6px) top 6px;
    background-repeat: no-repeat;
}

[data-cmstarget].highlighted-child [class*="sc-"] {
    outline: 1px dotted rgba(124, 58, 237, 0.5);
    outline-offset: 2px;
}

[data-cmstarget].highlighted [class*="sc-"] {
    outline: 1px solid rgba(124, 58, 237, 0.4);
}

[data-cmstarget].highlighted::after,
[data-cmstarget].highlighted-child::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}