.kpb-shell { width: 100%; }
.kpb-version { margin-top: 5px; padding-right: 2px; color: var(--wp--preset--color--contrast, #f5f7fb); opacity: .55; font: 10px/1.3 system-ui, sans-serif; text-align: right; }

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

.komplex-pack-builder *, .komplex-pack-builder *::before, .komplex-pack-builder *::after { box-sizing: border-box; }
.kpb-loading { position: absolute; z-index: 100; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.62); backdrop-filter: brightness(.55); -webkit-backdrop-filter: brightness(.55); cursor: wait; }
.kpb-loading[hidden] { display: none !important; }
.kpb-loading-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px 22px; border-radius: 8px; background: color-mix(in srgb, var(--kpb-bg) 88%, transparent); color: var(--kpb-text); font-size: 13px; font-weight: 650; pointer-events: none; }
.kpb-throbber { width: 34px; height: 34px; border: 4px solid color-mix(in srgb, var(--kpb-text) 22%, transparent); border-top-color: var(--kpb-border); border-radius: 50%; animation: kpb-spin .8s linear infinite; }
@keyframes kpb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kpb-throbber { animation-duration: 1.8s; } }

.kpb-main { height: auto; min-height: 0; display: grid; grid-template-columns: minmax(360px, 1.25fr) minmax(300px, 1fr); align-items: start; }
.kpb-preview-pane, .kpb-code-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.kpb-preview-pane { border-right: 1px solid color-mix(in srgb, var(--kpb-border) 35%, transparent); }
.kpb-pane-title { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 28%, transparent); color: var(--kpb-muted); font-size: 12px; font-weight: 650; }
.kpb-preview-label, .kpb-selected-label { color: color-mix(in srgb, var(--kpb-border) 78%, white 22%); font-weight: 500; }
.kpb-preview-stage { position: relative; flex: 0 0 var(--kpb-pane-content-height, 360px); width: 100%; height: var(--kpb-pane-content-height, 360px); min-width: 0; min-height: 0; overflow: hidden; background: #08090b; contain: size layout paint; }
.kpb-canvas-wrap { position: absolute; inset: 0; width: 100%; height: 100%; background: #08090b; overflow: hidden; contain: size layout paint; }
.kpb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: 100%; max-height: 100%; }
.kpb-no-webgl { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #ff8f8f; background: #101216; }
.kpb-no-webgl[hidden] { display: none !important; }

.kpb-code-wrap { position: relative; flex: 0 0 var(--kpb-pane-content-height, 360px); height: var(--kpb-pane-content-height, 360px); min-height: 0; overflow: hidden; background: #101216; }
.kpb-code, .kpb-highlight { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 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; }
.kpb-highlight { z-index: 0; overflow: hidden; pointer-events: none; background: #101216; color: #d8dee9; }
.kpb-highlight-code { display: block; min-width: max-content; font: inherit; white-space: inherit; }
.kpb-code { z-index: 1; resize: none; outline: none; overflow: auto; background: transparent; color: transparent; caret-color: #fff; -webkit-text-fill-color: transparent; }
.kpb-code::selection { background: color-mix(in srgb, var(--kpb-border) 38%, transparent); }
.kpb-code-disabled { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--kpb-muted); background: color-mix(in srgb, #101216 94%, transparent); }
.kpb-code-disabled[hidden] { display: none !important; }
.kpb-token-comment { color: #6f9f75; font-style: italic; }
.kpb-token-preprocessor { color: #d3869b; }
.kpb-token-string { color: #b8bb8f; }
.kpb-token-number { color: #d19a66; }
.kpb-token-keyword { color: #c678dd; }
.kpb-token-type { color: #61afef; }
.kpb-token-builtin { color: #e5c07b; }
.kpb-error { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: none; width: 100%; max-height: 45%; overflow: auto; white-space: pre-wrap; padding: 8px 10px; border-top: 1px solid #6b2929; background: #2d1718; color: #ff9b9d; box-shadow: 0 -4px 12px rgba(0,0,0,.28); font: 12px/1.45 ui-monospace, monospace; }
.kpb-error:not(:empty) { display: block; }

.kpb-toolbar, .kpb-graph-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 7px 9px; background: color-mix(in srgb, var(--kpb-bg) 94%, black 6%); border-top: 1px solid color-mix(in srgb, var(--kpb-border) 35%, transparent); }
.kpb-toolbar-group { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.kpb-button, .kpb-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--kpb-border) 65%, transparent); border-radius: 5px; min-height: 28px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 12px; }
.kpb-button { padding: 4px 8px; }
.kpb-icon-button { width: 31px; padding: 4px; flex: 0 0 auto; }
.kpb-button:hover, .kpb-button:focus-visible, .kpb-icon-button:hover, .kpb-icon-button:focus-visible { background: color-mix(in srgb, var(--kpb-border) 16%, transparent); outline: none; }
.kpb-button:disabled { opacity: .45; cursor: not-allowed; }
.kpb-delete-node { border-color: color-mix(in srgb, #ff5f62 65%, transparent); }
.kpb-status { color: var(--kpb-muted); font-size: 12px; text-align: right; }
.kpb-status.is-ok { color: #79d88b; }
.kpb-status.is-error { color: #ff7d7d; }

.kpb-graph-panel { border-top: 1px solid color-mix(in srgb, var(--kpb-border) 35%, transparent); }
.kpb-graph-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 600px; }
.kpb-graph-viewport { position: relative; min-width: 0; min-height: 600px; overflow: hidden; background-color: #111318; background-image: radial-gradient(circle, color-mix(in srgb, var(--kpb-border) 25%, transparent) 1px, transparent 1px); background-size: 20px 20px; cursor: grab; user-select: none; }
.kpb-graph-viewport.is-panning { cursor: grabbing; }
.kpb-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.kpb-wire { fill: none; stroke: color-mix(in srgb, var(--kpb-border) 78%, white 22%); stroke-width: 2.2; }
.kpb-wire-temp { stroke-dasharray: 5 4; opacity: .8; }
.kpb-node-layer { position: absolute; inset: 0; transform-origin: 0 0; z-index: 2; }
.kpb-world-bounds { position: absolute; left: 0; top: 0; box-sizing: border-box; pointer-events: none; border: 1px solid color-mix(in srgb, var(--kpb-border) 38%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.015); }
.kpb-graph-help { position: absolute; left: 10px; bottom: 8px; max-width: 70%; color: color-mix(in srgb, var(--kpb-muted) 70%, transparent); font-size: 10px; pointer-events: none; z-index: 0; }

.kpb-node { position: absolute; width: 210px; border: 1px solid color-mix(in srgb, var(--kpb-border) 48%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--kpb-panel) 97%, black 3%); box-shadow: 0 6px 18px rgba(0,0,0,.25); overflow: visible; cursor: default; }
.kpb-node.is-selected { border-color: var(--kpb-border); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kpb-border) 45%, transparent), 0 8px 22px rgba(0,0,0,.3); }
.kpb-node-header { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--kpb-border) 18%, var(--kpb-panel)); cursor: move; }
.kpb-node-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.kpb-node-type-badge { flex: 0 0 auto; color: var(--kpb-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.kpb-node-body { padding: 6px 0 7px; }
.kpb-node-source-text { padding: 1px 10px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kpb-muted); font: 9px ui-monospace, monospace; }

.kpb-channel-previews-toggle { min-height: 28px; padding: 0 4px; margin: 0; }
.kpb-node-preview-wrap { margin: 2px 8px 7px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid color-mix(in srgb, var(--kpb-border) 24%, transparent); border-radius: 4px; background: #090a0d; }
.kpb-node-preview { display: block; width: 100%; height: 100%; background: #090a0d; }
.kpb-channel-previews-off .kpb-node-preview-wrap { display: none; }
.kpb-socket-row { position: relative; display: flex; align-items: center; min-height: 27px; padding: 2px 10px 2px 18px; color: var(--kpb-muted); font-size: 10px; }
.kpb-socket { position: absolute; width: 12px; height: 12px; border: 2px solid color-mix(in srgb, var(--kpb-border) 80%, white 20%); border-radius: 50%; background: #111318; cursor: crosshair; }
.kpb-input-socket { left: -6px; }
.kpb-output-socket { right: -6px; top: 50%; transform: translateY(-50%); }
.kpb-socket.is-connected { background: var(--kpb-border); }
.kpb-socket-row.is-framebuffer-disabled { color: color-mix(in srgb, var(--kpb-muted) 45%, transparent); opacity: .58; }
.kpb-socket.is-disabled { pointer-events: none; cursor: not-allowed; border-color: color-mix(in srgb, var(--kpb-muted) 45%, transparent); background: color-mix(in srgb, var(--kpb-muted) 18%, #111318); }
.kpb-node-output-row { position: relative; min-height: 25px; display: flex; justify-content: flex-end; align-items: center; padding: 2px 18px 2px 10px; color: var(--kpb-muted); font-size: 10px; border-top: 1px solid color-mix(in srgb, var(--kpb-border) 16%, transparent); }
.kpb-node-main .kpb-node-header { background: color-mix(in srgb, #5b7cff 24%, var(--kpb-panel)); }
.kpb-node-buffer .kpb-node-header { background: color-mix(in srgb, #a65bff 22%, var(--kpb-panel)); }
.kpb-node-image .kpb-node-header { background: color-mix(in srgb, #5ac48b 18%, var(--kpb-panel)); }
.kpb-node-video .kpb-node-header { background: color-mix(in srgb, #e79a4b 18%, var(--kpb-panel)); }
.kpb-node-audio .kpb-node-header { background: color-mix(in srgb, #e15c8b 18%, var(--kpb-panel)); }

.kpb-inspector { min-width: 0; border-left: 1px solid color-mix(in srgb, var(--kpb-border) 30%, transparent); background: var(--kpb-panel-2); padding: 12px; overflow: auto; }
.kpb-inspector-title, .kpb-section-title { margin-bottom: 10px; color: var(--kpb-text); font-size: 13px; font-weight: 700; }
.kpb-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-bottom: 9px; }
.kpb-field > span, .kpb-check-field span { color: var(--kpb-muted); font-size: 10px; font-weight: 650; }
.kpb-field input, .kpb-field select, .kpb-field textarea, .kpb-json-preview { width: 100%; margin: 0; border: 1px solid color-mix(in srgb, var(--kpb-border) 48%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--kpb-bg) 91%, white 9%); color: var(--kpb-text); font: inherit; font-size: 12px; padding: 6px 8px; box-sizing: border-box; }
.kpb-field input:not([type=hidden]), .kpb-field select { height: 42px; min-height: 42px; }
.kpb-field input[type=number] { padding-left: 10px; }
.kpb-field input:focus, .kpb-field select:focus, .kpb-field textarea:focus, .kpb-json-preview:focus { border-color: var(--kpb-border); outline: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--kpb-border) 45%, transparent); }
.kpb-source-row { display: flex; align-items: stretch; gap: 4px; }
.kpb-source-row input { min-width: 0; flex: 1; }
.kpb-options { margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--kpb-border) 24%, transparent); padding-top: 9px; }
.kpb-options summary, .kpb-json-preview-wrap summary { cursor: pointer; color: var(--kpb-muted); font-size: 11px; font-weight: 700; }
.kpb-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; margin-top: 10px; }
.kpb-mirroring-field { grid-column: 1 / -1; }
.kpb-check-field { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.kpb-check-field input { margin: 0; }
.kpb-inspector-note { color: var(--kpb-muted); font-size: 10px; line-height: 1.4; margin-top: 8px; }

.kpb-pack-panel { padding: 14px; border-top: 1px solid color-mix(in srgb, var(--kpb-border) 35%, transparent); background: var(--kpb-panel-2); }
.kpb-meta-grid { display: flex; flex-direction: column; gap: 0; }
.kpb-meta-row { display: grid; gap: 0 10px; min-width: 0; }
.kpb-meta-name-version-row { grid-template-columns: minmax(0, 4fr) minmax(130px, 1fr); }
.kpb-meta-license-privacy-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpb-meta-tags-row { grid-template-columns: minmax(0, 1fr); }
.kpb-meta-description-field { width: 100%; }
.kpb-meta-description-field textarea { min-height: 90px; resize: vertical; }
.kpb-json-preview-wrap { margin-top: 8px; }
.kpb-json-preview { min-height: 260px; margin-top: 8px; resize: vertical; font: 11px/1.45 ui-monospace, monospace; white-space: pre; }
.kpb-block-preview { border: 1px solid #8884; border-radius: 8px; padding: 10px; background: #14161a; color: #f2f4f8; }
.kpb-block-preview-main { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; }
.kpb-block-preview-pane { min-height: 135px; border: 1px solid #ffffff22; padding: 8px; }
.kpb-block-preview-screen { margin-top: 8px; aspect-ratio: 16 / 9; min-height: 0; display: grid; place-items: center; background: linear-gradient(135deg,#26344e,#15171b); color: #ffffff99; }
.kpb-block-preview-pane pre { color: #9ecbff; font-size: 11px; }
.kpb-block-preview-graph { margin-top: 8px; min-height: 90px; display: flex; align-items: center; gap: 8px; border: 1px solid #ffffff22; padding: 10px; }
.kpb-block-node { border: 1px solid #5aa9ff; border-radius: 5px; padding: 7px 10px; background: #1d232d; }
.kpb-block-wire { color: #5aa9ff; }

@media (max-width: 1000px) {
    .kpb-main { height: auto; min-height: 0; grid-template-columns: 1fr; }
    .kpb-preview-pane { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 35%, transparent); }
    .kpb-graph-body { grid-template-columns: 1fr; }
    .kpb-inspector { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--kpb-border) 30%, transparent); }
}
@media (max-width: 700px) {
    .kpb-meta-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .kpb-option-grid { grid-template-columns: 1fr; }
    .kpb-button span { display: none; }
}
.kpb-source-field[hidden] { display: none !important; }

.kpb-pack-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 10px; }
.kpb-save[hidden], .kpb-delete-pack[hidden], .kpb-import[hidden] { display: none !important; }
.kpb-delete-pack { border-color: color-mix(in srgb, #ff5f62 65%, transparent); }

.kpb-frame-buffer-channel option:disabled { color: #777; }

.kpb-block-version { margin-top: 5px; opacity: .55; font-size: 10px; text-align: right; }


.kpb-shader-browser-field, .kpb-channel-import-field, .kpb-image-browser-field, .kpb-video-browser-field, .kpb-cubemap-browser-field { margin: 0 0 9px; }
.kpb-shader-browser-field[hidden], .kpb-channel-import-field[hidden], .kpb-image-browser-field[hidden], .kpb-video-browser-field[hidden], .kpb-cubemap-browser-field[hidden] { display: none !important; }
.kpb-shader-browser-field .kpb-button, .kpb-channel-import-field .kpb-button, .kpb-image-browser-field .kpb-button, .kpb-video-browser-field .kpb-button, .kpb-cubemap-browser-field .kpb-button { width: 100%; min-height: 34px; }

html.kpb-modal-open, body.kpb-modal-open { overflow: hidden !important; overscroll-behavior: none; }

.kpb-shader-browser { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 22px; background: rgba(0,0,0,.68); box-sizing: border-box; overscroll-behavior: contain; }
.kpb-shader-browser[hidden] { display: none !important; }
.kpb-shader-browser-dialog { width: min(920px, 100%); max-height: min(760px, calc(100% - 20px)); display: flex; flex-direction: column; overflow: hidden; touch-action: auto; border: 1px solid color-mix(in srgb, var(--kpb-border) 58%, transparent); border-radius: 9px; background: var(--kpb-panel); color: var(--kpb-text); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.kpb-shader-browser-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-shader-browser-title { font-size: 15px; font-weight: 750; }
.kpb-shader-browser-subtitle { margin-top: 3px; color: var(--kpb-muted); font-size: 10px; }
.kpb-shader-browser-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-shader-browser-search { width: 100%; height: 42px; min-width: 0; box-sizing: border-box; }
.kpb-shader-browser-search-button { height: 42px; }
.kpb-shader-browser-results { min-height: 260px; padding: 12px; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.kpb-shader-browser-loading, .kpb-shader-browser-empty { grid-column: 1 / -1; min-height: 230px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--kpb-muted); font-size: 12px; text-align: center; }
.kpb-shader-browser-empty.is-error { color: #ff8585; }
.kpb-shader-card { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--kpb-border) 30%, transparent); border-radius: 7px; background: var(--kpb-panel-2); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.kpb-shader-card:focus-visible { outline: 2px solid var(--kpb-accent); outline-offset: 2px; }
.kpb-shader-card.is-selected { border-color: var(--kpb-border); background: color-mix(in srgb, var(--kpb-panel-2) 86%, var(--kpb-border) 14%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kpb-border) 60%, transparent); }
.kpb-shader-card-media { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #090a0d; }
.kpb-shader-card-media.is-placeholder { gap: 5px; align-content: center; color: color-mix(in srgb, var(--kpb-muted) 72%, transparent); font-size: 10px; }
.kpb-shader-card-media.is-placeholder i { font-size: 24px; }
.kpb-shader-card-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.kpb-shader-card-body { display: flex; flex-direction: column; min-height: 154px; padding: 9px; }
.kpb-shader-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 750; }
.kpb-shader-card-author { margin-top: 2px; color: var(--kpb-muted); font-size: 9px; }
.kpb-shader-card-action-area { display: flex; flex: 1 1 auto; min-height: 58px; margin-top: 6px; align-items: flex-start; }
.kpb-shader-card-action-area.has-use-action { align-items: flex-start; }
.kpb-shader-card-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 100%; color: var(--kpb-muted); font-size: 10px; line-height: 1.35; align-self: flex-start; }
.kpb-shader-use-action {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--kpb-border) 72%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--kpb-border) 18%, var(--kpb-panel-2));
    color: var(--kpb-text);
    cursor: pointer;
    font: 650 12px/1.2 system-ui, sans-serif;
    text-align: center;
}
.kpb-shader-use-action:hover, .kpb-shader-use-action:focus-visible { background: color-mix(in srgb, var(--kpb-border) 28%, var(--kpb-panel-2)); outline: 2px solid color-mix(in srgb, var(--kpb-border) 55%, transparent); outline-offset: 1px; }
.kpb-shader-use-action:disabled { opacity: .5; cursor: wait; }
.kpb-shader-browser-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-shader-browser-prev { justify-self: start; }
.kpb-shader-browser-next { justify-self: end; }
.kpb-shader-browser-page { color: var(--kpb-muted); font-size: 10px; }

@media (max-width: 760px) {
    .kpb-shader-browser { padding: 10px; }
    .kpb-shader-browser-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .kpb-shader-browser-results { grid-template-columns: 1fr; }
}


.kpb-cubemap-browser { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 22px; background: rgba(0,0,0,.68); box-sizing: border-box; overscroll-behavior: contain; }
.kpb-cubemap-browser[hidden] { display: none !important; }
.kpb-cubemap-browser-dialog { width: min(920px, 100%); max-height: min(760px, calc(100% - 20px)); display: flex; flex-direction: column; overflow: hidden; touch-action: auto; border: 1px solid color-mix(in srgb, var(--kpb-border) 58%, transparent); border-radius: 9px; background: var(--kpb-panel); color: var(--kpb-text); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.kpb-cubemap-browser-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-cubemap-browser-title { font-size: 15px; font-weight: 750; }
.kpb-cubemap-browser-subtitle { margin-top: 3px; color: var(--kpb-muted); font-size: 10px; }
.kpb-cubemap-browser-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-cubemap-browser-search { width: 100%; height: 42px; min-width: 0; box-sizing: border-box; }
.kpb-cubemap-browser-search-button { height: 42px; }
.kpb-cubemap-browser-results { min-height: 260px; padding: 12px; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.kpb-cubemap-browser-loading, .kpb-cubemap-browser-empty { grid-column: 1 / -1; min-height: 230px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--kpb-muted); font-size: 12px; text-align: center; }
.kpb-cubemap-browser-empty.is-error { color: #ff8585; }
.kpb-shader-card { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--kpb-border) 30%, transparent); border-radius: 7px; background: var(--kpb-panel-2); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.kpb-shader-card:focus-visible { outline: 2px solid var(--kpb-accent); outline-offset: 2px; }
.kpb-shader-card.is-selected { border-color: var(--kpb-border); background: color-mix(in srgb, var(--kpb-panel-2) 86%, var(--kpb-border) 14%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kpb-border) 60%, transparent); }
.kpb-shader-card-media { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #090a0d; }
.kpb-shader-card-media.is-placeholder { gap: 5px; align-content: center; color: color-mix(in srgb, var(--kpb-muted) 72%, transparent); font-size: 10px; }
.kpb-shader-card-media.is-placeholder i { font-size: 24px; }
.kpb-shader-card-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.kpb-shader-card-body { display: flex; flex-direction: column; min-height: 154px; padding: 9px; }
.kpb-shader-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 750; }
.kpb-shader-card-author { margin-top: 2px; color: var(--kpb-muted); font-size: 9px; }
.kpb-shader-card-action-area { display: flex; flex: 1 1 auto; min-height: 58px; margin-top: 6px; align-items: flex-start; }
.kpb-shader-card-action-area.has-use-action { align-items: flex-start; }
.kpb-shader-card-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 100%; color: var(--kpb-muted); font-size: 10px; line-height: 1.35; align-self: flex-start; }
.kpb-shader-use-action {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--kpb-border) 72%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--kpb-border) 18%, var(--kpb-panel-2));
    color: var(--kpb-text);
    cursor: pointer;
    font: 650 12px/1.2 system-ui, sans-serif;
    text-align: center;
}
.kpb-shader-use-action:hover, .kpb-shader-use-action:focus-visible { background: color-mix(in srgb, var(--kpb-border) 28%, var(--kpb-panel-2)); outline: 2px solid color-mix(in srgb, var(--kpb-border) 55%, transparent); outline-offset: 1px; }
.kpb-shader-use-action:disabled { opacity: .5; cursor: wait; }
.kpb-cubemap-browser-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-cubemap-browser-prev { justify-self: start; }
.kpb-cubemap-browser-next { justify-self: end; }
.kpb-cubemap-browser-page { color: var(--kpb-muted); font-size: 10px; }

@media (max-width: 760px) {
    .kpb-cubemap-browser { padding: 10px; }
    .kpb-cubemap-browser-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .kpb-cubemap-browser-results { grid-template-columns: 1fr; }
}


.kpb-image-browser { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 22px; background: rgba(0,0,0,.68); box-sizing: border-box; overscroll-behavior: contain; }
.kpb-image-browser[hidden] { display: none !important; }
.kpb-image-browser-dialog { width: min(920px, 100%); max-height: min(760px, calc(100% - 20px)); display: flex; flex-direction: column; overflow: hidden; touch-action: auto; border: 1px solid color-mix(in srgb, var(--kpb-border) 58%, transparent); border-radius: 9px; background: var(--kpb-panel); color: var(--kpb-text); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.kpb-image-browser-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-image-browser-title { font-size: 15px; font-weight: 750; }
.kpb-image-browser-subtitle { margin-top: 3px; color: var(--kpb-muted); font-size: 10px; }
.kpb-browser-provider { margin-top: 4px; color: var(--kpb-muted); font-size: 10px; }
.kpb-browser-provider a { color: var(--kpb-text); text-decoration: underline; text-underline-offset: 2px; }
.kpb-browser-provider a:hover, .kpb-browser-provider a:focus-visible { color: var(--kpb-accent); }
.kpb-image-browser-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-image-browser-search { width: 100%; height: 42px; min-width: 0; box-sizing: border-box; }
.kpb-image-browser-search-button { height: 42px; }
.kpb-image-browser-results { min-height: 260px; padding: 12px; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.kpb-image-browser-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-image-browser-prev { justify-self: start; }
.kpb-image-browser-next { justify-self: end; }
.kpb-image-browser-page { color: var(--kpb-muted); font-size: 10px; }
.kpb-image-use-action {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--kpb-border) 72%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--kpb-border) 18%, var(--kpb-panel-2));
    color: var(--kpb-text);
    cursor: pointer;
    font: 650 12px/1.2 system-ui, sans-serif;
    text-align: center;
}
.kpb-image-use-action:hover, .kpb-image-use-action:focus-visible { background: color-mix(in srgb, var(--kpb-border) 28%, var(--kpb-panel-2)); outline: 2px solid color-mix(in srgb, var(--kpb-border) 55%, transparent); outline-offset: 1px; }
.kpb-image-use-action:disabled { opacity: .5; cursor: wait; }
@media (max-width: 960px) {
    .kpb-image-browser { padding: 10px; }
    .kpb-image-browser-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .kpb-image-browser-results { grid-template-columns: 1fr; }
}


.kpb-video-browser { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 22px; background: rgba(0,0,0,.68); box-sizing: border-box; overscroll-behavior: contain; }
.kpb-video-browser[hidden] { display: none !important; }
.kpb-video-browser-dialog { width: min(920px, 100%); max-height: min(760px, calc(100% - 20px)); display: flex; flex-direction: column; overflow: hidden; touch-action: auto; border: 1px solid color-mix(in srgb, var(--kpb-border) 58%, transparent); border-radius: 9px; background: var(--kpb-panel); color: var(--kpb-text); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.kpb-video-browser-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-video-browser-title { font-size: 15px; font-weight: 750; }
.kpb-video-browser-subtitle { margin-top: 3px; color: var(--kpb-muted); font-size: 10px; }
.kpb-video-browser-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-video-browser-search { width: 100%; height: 42px; min-width: 0; box-sizing: border-box; }
.kpb-video-browser-search-button { height: 42px; }
.kpb-video-browser-results { min-height: 260px; padding: 12px; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.kpb-video-browser-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-video-browser-prev { justify-self: start; }
.kpb-video-browser-next { justify-self: end; }
.kpb-video-browser-page { color: var(--kpb-muted); font-size: 10px; }
.kpb-video-selection-controls { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.kpb-video-resolution { width: 100%; min-width: 0; height: 40px; box-sizing: border-box; }
.kpb-video-use-action {
    all: unset;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--kpb-border) 72%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--kpb-border) 18%, var(--kpb-panel-2));
    color: var(--kpb-text);
    cursor: pointer;
    font: 650 12px/1.2 system-ui, sans-serif;
    text-align: center;
    white-space: nowrap;
}
.kpb-video-use-action:hover, .kpb-video-use-action:focus-visible { background: color-mix(in srgb, var(--kpb-border) 28%, var(--kpb-panel-2)); outline: 2px solid color-mix(in srgb, var(--kpb-border) 55%, transparent); outline-offset: 1px; }
.kpb-video-use-action:disabled { opacity: .5; cursor: wait; }
@media (max-width: 960px) {
    .kpb-video-browser { padding: 10px; }
    .kpb-video-browser-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .kpb-video-browser-results { grid-template-columns: 1fr; }
    .kpb-video-selection-controls { grid-template-columns: 1fr; }
    .kpb-video-use-action { width: 100%; }
}

.kpb-source-field { margin: 0 0 9px; }
.kpb-source-field[hidden] { display: none !important; }
.kpb-source-field .kpb-load-asset { width: 100%; min-height: 34px; }

.kpb-import { border-color: color-mix(in srgb, var(--kpb-border) 72%, transparent); }


.kpb-shadertoy-pass-picker { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 22px; background: rgba(0,0,0,.68); box-sizing: border-box; overscroll-behavior: contain; }
.kpb-shadertoy-pass-picker[hidden] { display: none !important; }
.kpb-shadertoy-pass-dialog { width: min(660px, 100%); max-height: min(720px, calc(100% - 20px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--kpb-border) 58%, transparent); border-radius: 9px; background: var(--kpb-panel); color: var(--kpb-text); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.kpb-shadertoy-pass-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px; border-bottom: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
.kpb-shadertoy-pass-title { font-size: 15px; font-weight: 750; }
.kpb-shadertoy-pass-subtitle { margin-top: 3px; color: var(--kpb-muted); font-size: 10px; }
.kpb-shadertoy-pass-list { min-height: 180px; padding: 12px; overflow: auto; overscroll-behavior: contain; display: grid; gap: 8px; align-content: start; }
.kpb-shadertoy-pass-option { appearance: none; width: 100%; display: grid; gap: 3px; padding: 10px 12px; text-align: left; border: 1px solid color-mix(in srgb, var(--kpb-border) 30%, transparent); border-radius: 6px; background: var(--kpb-panel-2); color: var(--kpb-text); cursor: pointer; }
.kpb-shadertoy-pass-option:hover:not(:disabled), .kpb-shadertoy-pass-option:focus-visible:not(:disabled) { border-color: color-mix(in srgb, var(--kpb-border) 75%, transparent); outline: none; }
.kpb-shadertoy-pass-option.is-selected { border-color: var(--kpb-border); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kpb-border) 65%, transparent); background: color-mix(in srgb, var(--kpb-panel-2) 84%, var(--kpb-border) 16%); }
.kpb-shadertoy-pass-option.is-unsupported { opacity: .48; cursor: not-allowed; }
.kpb-shadertoy-pass-option-title { font-size: 12px; font-weight: 750; }
.kpb-shadertoy-pass-option-meta { color: var(--kpb-muted); font-size: 10px; }
.kpb-shadertoy-pass-empty { padding: 28px 16px; color: var(--kpb-muted); font-size: 11px; text-align: center; }
.kpb-shadertoy-pass-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--kpb-border) 25%, transparent); }
@media (max-width: 700px) { .kpb-shadertoy-pass-picker { padding: 10px; } }

.kpb-meta-price-field[hidden] { display: none !important; }