#kaerion-builder-layer {
    position: absolute;
    z-index: 3500;
    inset: 0;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
}

.kb-added-component {
    position: absolute;
    box-sizing: border-box;
    min-width: 36px;
    min-height: 24px;
    pointer-events: auto;
}

.kb-component-text {
    width: 320px;
    color: var(--kv-text, #e5eee8);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

.kb-component-panel {
    width: 360px;
    padding: 24px;
    border: 1px solid rgba(82, 219, 157, .22);
    border-radius: 20px;
    background: rgba(3, 18, 13, .94);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .34);
    color: var(--kv-text, #e5eee8);
}

.kb-component-panel h3 {
    margin: 0 0 10px;
    color: #ecf7f0;
    font-size: 21px;
}

.kb-component-panel p {
    margin: 0;
    color: var(--kv-muted, #94aa9f);
    line-height: 1.55;
}

.kb-component-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid rgba(68, 226, 157, .52);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(40, 166, 112, .88), rgba(12, 79, 54, .94));
    box-shadow: 0 12px 30px rgba(5, 78, 51, .25);
    color: #effff5;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.kb-component-player-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    width: 330px;
    min-height: 92px;
    padding: 17px;
    border: 1px solid rgba(72, 220, 153, .24);
    border-radius: 20px;
    background:
        radial-gradient(circle at 14% 0%, rgba(62, 212, 147, .15), transparent 42%),
        linear-gradient(145deg, rgba(7, 30, 21, .97), rgba(2, 13, 10, .97));
    box-shadow: 0 22px 58px rgba(0, 0, 0, .36);
    color: #e6f4eb;
}

.kb-player-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(83, 225, 161, .42);
    border-radius: 17px;
    background: rgba(46, 180, 119, .12);
    color: #61e3a4;
    font-size: 24px;
    font-weight: 900;
}

.kb-player-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.kb-player-copy strong,
.kb-player-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-player-copy strong {
    font-size: 15px;
}

.kb-player-copy small,
.kb-player-stats small {
    color: #839f91;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kb-player-stats {
    display: grid;
    gap: 4px;
    text-align: right;
}

.kb-player-stats b {
    color: #d9bc69;
    font-size: 12px;
}

.kb-component-image {
    display: block;
    width: 360px;
    min-height: 160px;
    border: 1px solid rgba(82, 219, 157, .2);
    border-radius: 18px;
    object-fit: cover;
    background:
        linear-gradient(135deg, transparent 49%, rgba(82, 219, 157, .18) 50%, transparent 51%),
        rgba(5, 20, 15, .92);
}

.kb-component-divider {
    width: 420px;
    height: 1px;
    min-height: 1px;
    background: linear-gradient(90deg, transparent, rgba(69, 222, 155, .72), transparent);
}

.kb-component-clone {
    pointer-events: auto;
}

.kb-shadow-none { box-shadow: none !important; }
.kb-shadow-soft { box-shadow: 0 15px 40px rgba(0, 0, 0, .28) !important; }
.kb-shadow-jade { box-shadow: 0 18px 52px rgba(32, 211, 137, .22) !important; }
.kb-shadow-gold { box-shadow: 0 18px 52px rgba(208, 168, 76, .22) !important; }
.kb-shadow-strong { box-shadow: 0 24px 70px rgba(0, 0, 0, .56) !important; }

html.kb-editor-active,
html.kb-editor-active body {
    min-height: 100%;
}

html.kb-editor-active body {
    padding-bottom: 140px !important;
}

html.kb-editor-active a,
html.kb-editor-active button,
html.kb-editor-active input,
html.kb-editor-active select,
html.kb-editor-active textarea,
html.kb-editor-active [role="button"] {
    cursor: default !important;
}

html.kb-editor-active [data-kb-editable]:hover {
    outline: 1px dashed rgba(79, 226, 159, .46);
    outline-offset: 2px;
}

.kb-hidden-editor {
    display: revert !important;
    visibility: visible !important;
    opacity: .18 !important;
    outline: 1px dashed rgba(255, 179, 78, .82) !important;
    outline-offset: 2px !important;
    filter: grayscale(.7) !important;
}

.kb-inline-editing {
    outline: 2px solid #5de3a5 !important;
    outline-offset: 3px !important;
    cursor: text !important;
    user-select: text !important;
}

.kb-selection-box {
    position: absolute;
    z-index: 2147483600;
    display: none;
    box-sizing: border-box;
    border: 2px solid #50e09b;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 22px rgba(43, 211, 137, .25);
    pointer-events: none;
}

.kb-selection-box.is-visible {
    display: block;
}

.kb-selection-label {
    position: absolute;
    bottom: calc(100% + 5px);
    left: -2px;
    max-width: 280px;
    padding: 4px 7px;
    border-radius: 5px;
    background: #33b979;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
    color: #00140b;
    font: 800 10px/1.2 system-ui, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-resize-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid #071d14;
    border-radius: 50%;
    background: #65efad;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    pointer-events: auto;
}

.kb-resize-handle[data-handle="nw"] { top: -7px; left: -7px; cursor: nwse-resize; }
.kb-resize-handle[data-handle="ne"] { top: -7px; right: -7px; cursor: nesw-resize; }
.kb-resize-handle[data-handle="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; }
.kb-resize-handle[data-handle="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }

.kb-move-handle {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    min-width: 70px;
    padding: 4px 7px;
    border: 1px solid rgba(92, 238, 169, .62);
    border-radius: 6px;
    background: rgba(4, 24, 16, .96);
    color: #aaf4ce;
    cursor: move;
    font: 700 9px/1.2 system-ui, sans-serif;
    letter-spacing: .04em;
    pointer-events: auto;
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
}

.kb-editor-hint {
    position: fixed;
    z-index: 2147483601;
    right: 16px;
    bottom: 16px;
    padding: 8px 11px;
    border: 1px solid rgba(85, 232, 164, .25);
    border-radius: 9px;
    background: rgba(3, 18, 12, .92);
    color: #91b7a4;
    font: 600 10px/1.4 system-ui, sans-serif;
    pointer-events: none;
}

html.kb-preview-mode .kb-selection-box,
html.kb-preview-mode .kb-editor-hint {
    display: none !important;
}

html.kb-preview-mode [data-kb-editable]:hover {
    outline: 0;
}

@media (max-width: 640px) {
    .kb-component-panel,
    .kb-component-image {
        max-width: calc(100vw - 28px);
    }
}