.kse-editor-shell {
    width: 100%;
}

.komplex-shader-editor {
    --kse-bg: var(--wp--preset--color--surface, #15171b);
    --kse-panel: color-mix(in srgb, var(--kse-bg) 92%, white 8%);
    --kse-border: var(--wp--preset--color--primary, #5aa9ff);
    --kse-text: var(--wp--preset--color--contrast, #f5f7fb);
    --kse-muted: color-mix(in srgb, var(--kse-text) 62%, transparent);
    box-sizing: border-box;
    width: 100%;
    min-height: var(--komplex-shader-editor-height, 620px);
    background: var(--kse-bg);
    color: var(--kse-text);
    border: 1px solid color-mix(in srgb, var(--kse-border) 65%, transparent);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 18px color-mix(in srgb, var(--kse-border) 18%, transparent);
    font-family: system-ui, sans-serif;
}

.komplex-shader-editor *,
.komplex-shader-editor *::before,
.komplex-shader-editor *::after { box-sizing: border-box; }

.kse-toolbar {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    background: color-mix(in srgb, var(--kse-bg) 94%, black 6%);
}

.kse-toolbar-bottom {
    border-top: 1px solid color-mix(in srgb, var(--kse-border) 35%, transparent);
}

.kse-toolbar-group { display: flex; flex-wrap: wrap; gap: 5px; }



.kse-details-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid color-mix(in srgb, var(--kse-border) 35%, transparent);
    background: color-mix(in srgb, var(--kse-bg) 96%, white 4%);
}

.kse-details-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.kse-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.kse-field-label {
    color: var(--kse-muted);
    font-size: 12px;
    font-weight: 600;
}

.kse-name,
.kse-type,
.kse-license,
.kse-description {
    width: 100%;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--kse-border) 55%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--kse-bg) 92%, white 8%);
    color: var(--kse-text);
    font: inherit;
    font-size: 13px;
}

.kse-name,
.kse-type,
.kse-license {
    min-height: 32px;
    padding: 5px 8px;
}

.kse-description {
    min-height: 120px;
    padding: 8px 10px;
    line-height: 1.45;
    resize: vertical;
}

.kse-name::placeholder,
.kse-description::placeholder { color: var(--kse-muted); }

.kse-name:focus,
.kse-type:focus,
.kse-license:focus,
.kse-description:focus {
    border-color: var(--kse-border);
    outline: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kse-border) 55%, transparent);
}


.kse-details-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 30px;
}

.kse-details-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
}


.kse-delete {
    border-color: color-mix(in srgb, #ff5f62 72%, transparent);
    color: #ff9b9d;
}

.kse-delete:hover,
.kse-delete:focus-visible {
    background: color-mix(in srgb, #ff5f62 16%, transparent);
}

.kse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid color-mix(in srgb, var(--kse-border) 68%, transparent);
    border-radius: 5px;
    padding: 4px 8px;
    min-height: 28px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
}

.kse-button i {
    width: 1em;
    text-align: center;
    font-size: 11px;
}

.kse-button[hidden] { display: none !important; }

.kse-button:hover,
.kse-button:focus-visible {
    background: color-mix(in srgb, var(--kse-border) 16%, transparent);
    outline: none;
}

.kse-status {
    min-width: 120px;
    text-align: right;
    color: var(--kse-muted);
    font-size: 13px;
}

.kse-status.is-ok { color: #79d88b; }
.kse-status.is-error { color: #ff7d7d; }

.kse-main {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(320px, 1.25fr) minmax(280px, 1fr);
}

.kse-code-pane,
.kse-preview-pane {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.kse-preview-pane { border-right: 1px solid color-mix(in srgb, var(--kse-border) 35%, transparent); }

.kse-pane-title {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--kse-muted);
    border-bottom: 1px solid color-mix(in srgb, var(--kse-border) 24%, transparent);
}

.kse-channel-label {
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    color: color-mix(in srgb, var(--kse-border) 78%, white 22%);
}

.kse-channel-dialog {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.kse-channel-dialog[hidden] { display: none; }

html.kse-channel-dialog-open { overflow: hidden; }

.kse-channel-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.kse-channel-dialog-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid var(--kse-border);
    border-radius: 12px;
    background: var(--wp--preset--color--surface, var(--kse-surface));
    color: var(--kse-text);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
}

.kse-channel-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--kse-border) 24%, transparent);
}

.kse-channel-dialog-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--kse-text);
}

.kse-channel-dialog-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--kse-border) 58%, transparent);
    border-radius: 6px;
    padding: 0;
    background: color-mix(in srgb, var(--kse-surface) 88%, white 12%);
    color: var(--kse-text);
    font: inherit;
    cursor: pointer;
}

.kse-channel-dialog-close:hover {
    background: color-mix(in srgb, var(--kse-surface) 76%, white 24%);
}

.kse-channel-dialog-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.kse-channel-dialog-body {
    padding: 14px 16px 16px;
}

.kse-channel-dialog-note {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--kse-muted);
}

.kse-channel-controls {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.kse-channel-control {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px;
}

.kse-channel-source-button,
.kse-channel-reset-button {
    flex: 0 0 auto;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--kse-border) 58%, transparent);
    border-radius: 5px;
    padding: 3px 7px;
    background: color-mix(in srgb, var(--kse-surface) 88%, white 12%);
    color: var(--kse-text);
    font: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.kse-channel-reset-button {
    width: 26px;
    padding: 3px;
}

.kse-channel-source-button:hover,
.kse-channel-reset-button:hover {
    background: color-mix(in srgb, var(--kse-surface) 76%, white 24%);
}

.kse-channel-source-button:focus-visible,
.kse-channel-reset-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.kse-channel-reset-button[hidden] { display: none; }

@media (max-width: 600px) {
    .kse-pane-title { align-items: flex-start; }
    .kse-channel-control { grid-template-columns: 1fr; }
}

.kse-code-wrap {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background: #101216;
}

.kse-code,
.kse-highlight {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
}

.kse-highlight {
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #101216;
    color: #d8dee9;
}

.kse-highlight-code {
    display: block;
    min-width: max-content;
    font: inherit;
    white-space: inherit;
}

.kse-code {
    z-index: 1;
    resize: none;
    outline: none;
    overflow: auto;
    background: transparent;
    color: transparent;
    caret-color: #ffffff;
    -webkit-text-fill-color: transparent;
}

.kse-code::selection {
    background: color-mix(in srgb, var(--kse-border) 38%, transparent);
}

.kse-token-comment { color: #6f9f75; font-style: italic; }
.kse-token-preprocessor { color: #d3869b; }
.kse-token-string { color: #b8bb8f; }
.kse-token-number { color: #d19a66; }
.kse-token-keyword { color: #c678dd; }
.kse-token-type { color: #61afef; }
.kse-token-builtin { color: #e5c07b; }

.kse-error {
    display: none;
    max-height: 150px;
    overflow: auto;
    white-space: pre-wrap;
    padding: 10px 12px;
    border-top: 1px solid #7f2f2f;
    background: #2a1518;
    color: #ffb5b5;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}

.kse-error:not(:empty) { display: block; }

.kse-version {
    padding: 5px 4px 0;
    text-align: right;
    font-size: 10px;
    line-height: 1.2;
    color: color-mix(in srgb, var(--wp--preset--color--contrast, currentColor) 62%, transparent);
    opacity: .72;
    user-select: none;
}

.kse-canvas-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #050608;
}

.kse-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.kse-no-webgl {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    text-align: center;
    background: #111318;
    color: #fff;
}

.kse-no-webgl[hidden] { display: none; }

.kse-editor-placeholder { min-height: 300px; }
.kse-editor-placeholder .kse-toolbar { min-height: 42px; }

.kse-block-preview {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    min-height: 230px;
}

.kse-block-code,
.kse-block-canvas {
    padding: 14px;
    overflow: hidden;
}
.kse-block-code {
    background: #101216;
}
.kse-block-canvas {
    border-right: 1px solid color-mix(in srgb, var(--kse-border) 35%, transparent);
}
.kse-block-code code {
    display: block;
    white-space: pre;
    color: #dce6f5;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}
.kse-block-canvas {
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(255,255,255,.07) 25%, transparent 25%) 0 0/24px 24px,
        linear-gradient(315deg, rgba(255,255,255,.07) 25%, transparent 25%) 0 0/24px 24px,
        #090a0d;
    color: var(--kse-muted);
}

@media (max-width: 800px) {
    .kse-main { grid-template-columns: 1fr; }
    .kse-details-row { grid-template-columns: 1fr; }
    .kse-preview-pane { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--kse-border) 35%, transparent); }
    .kse-code-wrap { min-height: 300px; }
    .kse-status { min-width: 0; }
}

.kse-button:disabled {
    opacity: .55;
    cursor: wait;
}

.kse-block-details {
    gap: 8px;
    padding: 10px;
}
.kse-block-details .kse-description { min-height: 56px; resize: none; }
.kse-block-details .kse-name,
.kse-block-details .kse-description { opacity: .78; }