.ui-editor-adjusted {
    translate: var(--ui-editor-x, 0px) calc(var(--ui-editor-y, 0px) + var(--ui-film-system-y, 0px));
    scale: var(--ui-editor-scale, 1);
}

.ui-editor-adjusted .ui-editor-adjusted { --ui-film-system-y: 0px; }

.ui-editor-active-target {
    outline: 1px dashed rgba(212, 175, 55, .8) !important;
    outline-offset: 6px;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, .28));
}

.ui-editor-launcher {
    position: fixed;
    z-index: 88;
    right: 16px;
    top: max(78px, calc(env(safe-area-inset-top) + 58px));
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(212, 175, 55, .68);
    background: rgba(5, 6, 4, .84);
    color: #d4af37;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255, 255, 255, .035);
    backdrop-filter: blur(16px);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
}

.ui-editor-launcher:hover,
.ui-editor-launcher[aria-expanded="true"] {
    border-color: #d4af37;
    background: #d4af37;
    color: #050505;
    transform: translateY(-2px);
}

.ui-editor-launcher svg { width: 20px; height: 20px; }

.ui-editor {
    position: fixed;
    z-index: 90;
    right: 16px;
    top: max(132px, calc(env(safe-area-inset-top) + 112px));
    width: min(350px, calc(100vw - 32px));
    max-height: calc(100vh - 150px);
    overflow: auto;
    border: 1px solid rgba(212, 175, 55, .42);
    background: linear-gradient(145deg, rgba(15, 17, 12, .97), rgba(4, 5, 4, .96));
    color: #f4f4ed;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 255, 255, .045);
    backdrop-filter: blur(24px);
    font-family: Manrope, sans-serif;
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: top right;
    transition: opacity .22s, transform .28s cubic-bezier(.2, .8, .2, 1), visibility .22s;
}

.ui-editor[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px) scale(.975);
}

.ui-editor__topline { height: 3px; background: linear-gradient(90deg, #d4af37, rgba(212, 175, 55, .08)); }
.ui-editor__inner { padding: 16px; }
.ui-editor__header { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.ui-editor__eyebrow { margin: 0 0 5px; color: #70736a; font: 500 7px DM Mono, monospace; letter-spacing: .17em; }
.ui-editor__header h2 { margin: 0; font: 400 22px/.92 Archivo Black, sans-serif; letter-spacing: -.035em; }
.ui-editor__header h2 span { color: #d4af37; }
.ui-editor__close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .035); color: #92958d; cursor: pointer; }
.ui-editor__close:hover { border-color: #d4af37; color: #d4af37; }
.ui-editor__close svg { width: 14px; height: 14px; }

.ui-editor__mode-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 13px; padding: 7px 8px 7px 10px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); }
.ui-editor__mode-row > span { color: #75786f; font: 500 7px DM Mono, monospace; letter-spacing: .13em; }
.ui-editor__mode-switch { display: flex; gap: 3px; padding: 2px; background: #060705; }
.ui-editor__mode-switch button { min-width: 67px; height: 27px; padding: 0 8px; border: 1px solid transparent; background: transparent; color: #62655d; cursor: pointer; font: 500 7px DM Mono, monospace; letter-spacing: .1em; transition: .2s; }
.ui-editor__mode-switch button:hover { color: #d7dad0; }
.ui-editor__mode-switch button.active { border-color: rgba(212, 175, 55, .55); background: rgba(212, 175, 55, .11); color: #d4af37; }
.ui-editor__mode-switch button:disabled { opacity: .25; cursor: not-allowed; }

.ui-editor__field-label { display: block; margin: 0 0 7px; color: #777a72; font: 500 7px DM Mono, monospace; letter-spacing: .14em; }
.ui-editor__select-wrap { position: relative; margin-bottom: 14px; }
.ui-editor__select-wrap::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; border-right: 1px solid #d4af37; border-bottom: 1px solid #d4af37; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ui-editor select { width: 100%; height: 42px; padding: 0 38px 0 12px; appearance: none; border: 1px solid rgba(212, 175, 55, .27); border-radius: 0; outline: 0; background: #0d0b08; color: #f4f4ed; font: 600 10px DM Mono, monospace; letter-spacing: .07em; cursor: pointer; }
.ui-editor select:focus { border-color: #d4af37; }

.ui-editor__controls { display: grid; gap: 9px; }
.ui-control { padding: 11px 11px 10px; border: 1px solid rgba(255, 255, 255, .075); background: rgba(255, 255, 255, .025); }
.ui-control__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ui-control__head label { color: #a6a9a0; font: 600 8px DM Mono, monospace; letter-spacing: .11em; }
.ui-control__value { display: flex; align-items: center; min-width: 69px; border-bottom: 1px solid rgba(212, 175, 55, .28); }
.ui-control__value input { width: 48px; height: 22px; padding: 0; border: 0; outline: 0; background: transparent; color: #d4af37; text-align: right; font: 500 10px DM Mono, monospace; -moz-appearance: textfield; }
.ui-control__value input::-webkit-inner-spin-button { appearance: none; }
.ui-control__value span { margin-left: 4px; color: #65685f; font: 500 7px DM Mono, monospace; }
.ui-control input[type="range"] { width: 100%; height: 14px; margin: 0; appearance: none; background: transparent; cursor: ew-resize; }
.ui-control input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, rgba(212, 175, 55, .65), rgba(255, 255, 255, .12)); }
.ui-control input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6px; appearance: none; border: 2px solid #0a0907; border-radius: 50%; background: #d4af37; box-shadow: 0 0 0 1px rgba(212, 175, 55, .65), 0 0 12px rgba(212, 175, 55, .28); }
.ui-control input[type="range"]::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .12); }
.ui-control input[type="range"]::-moz-range-progress { height: 2px; background: rgba(212, 175, 55, .65); }
.ui-control input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #0a0907; border-radius: 50%; background: #d4af37; }

.ui-editor__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.ui-editor__actions button { min-height: 38px; padding: 8px 9px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); color: #a2a59c; cursor: pointer; font: 600 7px DM Mono, monospace; letter-spacing: .1em; transition: .2s; }
.ui-editor__actions button:hover { border-color: rgba(212, 175, 55, .55); color: #d4af37; }
.ui-editor__actions .ui-editor__export { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; border-color: #d4af37; background: #d4af37; color: #080706; }
.ui-editor__actions .ui-editor__export:hover { background: #d1ff4c; color: #070807; }
.ui-editor__export svg { width: 13px; height: 13px; }

.ui-editor__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .07); color: #5f625a; font: 500 6px DM Mono, monospace; letter-spacing: .1em; }
.ui-editor__save-status { display: inline-flex; align-items: center; gap: 6px; color: #8b8e85; }
.ui-editor__save-status::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #d4af37; }

.ui-mobile-preview {
    position: fixed;
    z-index: 84;
    inset: 0 382px 0 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 45%, rgba(212, 175, 55, .07), transparent 34%), rgba(0, 0, 0, .88);
    backdrop-filter: blur(20px);
    opacity: 1;
    transition: opacity .28s, visibility .28s;
}
.ui-mobile-preview[aria-hidden="true"] { visibility: hidden; pointer-events: none; opacity: 0; }
.ui-mobile-preview__stage { position: relative; width: 390px; height: 844px; transform: scale(var(--ui-preview-scale, .84)); transform-origin: center; }
.ui-mobile-preview__device { position: absolute; inset: 0; overflow: hidden; border: 6px solid #191711; border-radius: 40px; background: #030303; box-shadow: 0 40px 110px rgba(0, 0, 0, .9), 0 0 0 1px rgba(212, 175, 55, .34); }
.ui-mobile-preview__device::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 9px; width: 106px; height: 25px; border-radius: 18px; background: #090a08; transform: translateX(-50%); pointer-events: none; }
.ui-mobile-preview iframe { width: 390px; height: 844px; border: 0; background: #030303; }
.ui-mobile-preview__label { position: absolute; z-index: 4; left: 50%; bottom: -34px; display: flex; align-items: center; gap: 10px; color: #74776f; font: 500 8px DM Mono, monospace; letter-spacing: .12em; transform: translateX(-50%); white-space: nowrap; }
.ui-mobile-preview__label b { color: #d4af37; font-weight: 500; }.ui-mobile-preview__label i { width: 5px; height: 5px; border-radius: 50%; background: #d4af37; box-shadow: 0 0 8px #d4af37; }
.ui-previewing-mobile > .site-header,
.ui-previewing-mobile > .showcase,
.ui-previewing-mobile > .lightbox { filter: blur(8px) brightness(.35); }

@media (max-width: 760px) {
    .ui-editor-launcher { top: auto; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: 42px; height: 42px; }
    .ui-editor { top: auto; right: 8px; bottom: max(62px, calc(env(safe-area-inset-bottom) + 54px)); width: calc(100vw - 16px); max-height: min(66vh, 560px); transform-origin: bottom right; }
    .ui-editor[aria-hidden="true"] { transform: translateY(12px) scale(.98); }
    .ui-editor__inner { padding: 14px; }
    .ui-editor__header h2 { font-size: 20px; }
    .ui-editor__mode-row { margin-top: 13px; }
    .ui-editor__mode-switch button { min-width: 60px; }
    .ui-editor__controls { grid-template-columns: 1fr; }
    .ui-mobile-preview { display: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
    .ui-editor-launcher { top: 10px; right: 10px; bottom: auto; }
    .ui-editor { top: 8px; right: 62px; bottom: 8px; width: min(340px, calc(100vw - 80px)); max-height: none; }
}