body {
    background: #111;
    color: #eee;
    font-family: sans-serif;
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
}

.login-body {
    min-height: 100vh;
    margin: 0;
    overflow: auto;
    background:
        radial-gradient(circle at top, rgba(48, 107, 255, .22), transparent 34%),
        linear-gradient(180deg, #0d111a 0%, #12161f 100%);
}

.login-shell {
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: min(420px, 100%);
    background: rgba(18, 22, 31, .92);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    padding: 28px;
}

.login-card__intro h1 {
    margin: 8px 0 10px;
}

.login-card__intro p {
    margin: 0 0 20px;
    color: #b8c2d6;
}

.login-card__eyebrow {
    color: #7ca4ff;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    font-weight: 700;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #dce3f4;
    font-size: 14px;
}

.login-input {
    border: 1px solid #394152;
    border-radius: 12px;
    background: #0b0f16;
    color: #fff;
    padding: 12px 14px;
}

.login-submit {
    all: unset;
    cursor: pointer;
    text-align: center;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2f7bff 0%, #1356d8 100%);
    color: #fff;
    font-weight: 700;
}

.header h1 { margin: 0 0 15px; }

.grid-shell {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--w), minmax(0, 1fr));
    grid-template-rows: repeat(var(--h), minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.cell {
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.cell--transparent {
    background: transparent;
    box-shadow: none;
}

.btn {
    all: unset;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    font-weight: 600;
    transition: transform .08s;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 12px;
    box-sizing: border-box;
}

.btn__text { position: relative; z-index: 2; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; max-height: 100%; overflow: hidden; }
.btn__image { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.btn__image img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.btn__image--overlay { position: absolute; inset: 12px; z-index: 1; opacity: .85; pointer-events: none; }
.btn__image--overlay img { width: 100%; height: 100%; object-fit: contain; }
.btn__image--below { order: 2; max-height: 60%; }

.btn:active { transform: scale(.96); }

.btn--empty {
    background: #222222 !important;
    color: inherit;
}

.btn--empty:active { transform: none; }

.flash { padding: 10px; margin-bottom: 15px; border-radius: 8px; }
.flash-ok { background: #0f3; color: #000; }
.flash-err { background: #f33; color: #000; }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.logout-form { margin: 0; }
.settings-btn,
.logout-btn,
.editmode-btn { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 10px; background: #333; color: #fff; font-weight: 600; transition: transform .08s, background .2s; }
.settings-btn { background: #1d3557; }
.logout-btn { background: #4a2025; }
.settings-btn:hover { background: #274a79; }
.logout-btn:hover,
.editmode-btn:hover { background: #444; }
.logout-btn:hover { background: #643038; }
.settings-btn:active,
.logout-btn:active,
.editmode-btn:active { transform: scale(.97); }

.statusbar {
    position: static;
    min-height: 52px;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 8px;
    margin-top: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(15, 18, 24, .92);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .34);
}

.statusbar__entry {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .03);
    min-width: 0;
}

.statusbar__label {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8fa3c7;
    font-weight: 700;
}

.statusbar__text {
    color: #eef3ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.statusbar__entry--ok {
    border-color: rgba(35, 167, 108, .55);
    background: rgba(35, 167, 108, .08);
}

.statusbar__entry--error {
    border-color: rgba(191, 66, 66, .65);
    background: rgba(191, 66, 66, .08);
}

.statusbar__entry--idle {
    border-color: rgba(255, 255, 255, .08);
}

#editorOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 10; }
.editor-modal { width: 90vw; height: 90vh; background: #1a1a1a; color: #eee; border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); overflow: hidden; }
.editor-row { padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.editor-header { min-height: 40px; display: flex; align-items: center; justify-content: flex-end; }
.editor-header__close { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #242b38; color: #fff; font-size: 22px; line-height: 1; font-weight: 700; }
.editor-header__close:hover { background: #313a4c; }
.editor-body { padding: 16px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 300px); gap: 16px; overflow: hidden; flex: 1 1 auto; min-height: 0; align-items: stretch; }
.editor-col { background: #111; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.editor-col::-webkit-scrollbar { width: 0; height: 0; display: none; }
.editor-col--types, .editor-col--btn { max-width: 300px; }
.editor-col__title { font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 12px; color: #aaa; }
.editor-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.editor-tab { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 8px; background: #222; border: 1px solid #333; color: #ddd; font-size: 13px; font-weight: 700; }
.editor-tab.is-active { background: #1d3557; border-color: rgba(104, 154, 255, .4); color: #fff; }
.editor-panel { display: grid; gap: 10px; }
.editor-panel[hidden] { display: none; }
.editor-action-panels { min-height: 0; display: grid; }
.editor-type-list { display: flex; flex-direction: column; gap: 8px; }
.editor-type-list--inline { flex-direction: row; flex-wrap: wrap; }
.editor-type-tree { display: grid; gap: 12px; }
.editor-type-group { display: grid; gap: 8px; }
.editor-type-group.is-collapsed .editor-type-group__children { display: none; }
.editor-type-group__title { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: #1a2330; border: 1px solid rgba(255,255,255,.08); color: #eef3ff; font-weight: 700; }
.editor-type-group__title::after { content: "▾"; color: #8fa3c7; font-size: 12px; }
.editor-type-group.is-collapsed .editor-type-group__title::after { content: "▸"; }
.editor-type-group__children { display: grid; gap: 8px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.08); }
.editor-type-btn { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 8px; background: #222; text-align: center; transition: background .2s, color .2s; border: 1px solid #333; }
.editor-type-btn:hover { background: #2f2f2f; color: #fff; }
.editor-type-btn--tree { text-align: left; background: #141920; }
.editor-actions { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 60vh; min-height: 100px; }
.editor-actions:empty { border: 2px dashed #2a2a2a; border-radius: 8px; background: rgba(255,255,255,0.02); }
.editor-actions:empty::before { content: "Befehle aus der linken Spalte hierher ziehen"; color: #555; font-size: 13px; align-self: center; margin: auto; padding: 16px; pointer-events: none; }
.editor-actions--inline { max-height: none; }
.editor-chain-intro { color: #9eabc2; font-size: 13px; line-height: 1.4; }
.editor-chain-list { display: grid; gap: 12px; }
.editor-chain-card { display: grid; gap: 12px; padding: 14px; background: #161c27; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }
.editor-chain-card__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.editor-chain-card__name { padding: 10px 12px; border-radius: 10px; border: 1px solid #3f4657; background: #0b0f16; color: #fff; min-width: 0; }
.editor-chain-card__meta { display: grid; gap: 10px; }
.editor-chain-card__hint { color: #9eabc2; font-size: 13px; line-height: 1.4; }
.action-card { background: #1f1f1f; border: 1px solid #333; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.action-card__header { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.action-card__title { font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 13px; color: #ddd; }
.action-card__remove { all: unset; cursor: pointer; padding: 6px 10px; border-radius: 8px; background: #332; transition: background .2s; }
.action-card__remove:hover { background: #553; }
.action-card__fields { display: grid; grid-template-columns: 1fr; gap: 8px; }
.action-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.action-field[hidden] { display: none; }
.action-field textarea { min-height: 96px; resize: vertical; }
.action-field__label { font-size: 13px; color: #ccc; white-space: nowrap; min-width: 100px; }
.action-card__input { padding: 8px 10px; border-radius: 8px; border: 1px solid #444; background: #0d0d0d; color: #eee; }
.action-card__input[type="color"] { padding: 0; width: 100%; min-width: 0; height: 42px; background: transparent; overflow: hidden; border: none; box-shadow: none; }
.action-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.action-toggle__btn { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 8px; background: #11161f; border: 1px solid #364155; color: #d7e3fb; font-weight: 700; }
.action-toggle__btn.is-active { background: #1d3557; border-color: rgba(104, 154, 255, .4); color: #fff; }
.editor-button-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.editor-button-label { font-size: 13px; color: #ccc; display: flex; flex-direction: column; gap: 6px; }
.editor-gradient-angles { display: flex; gap: 6px; flex-wrap: wrap; }
.editor-gradient-angle { all: unset; cursor: pointer; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #222; border: 1px solid #444; color: #ccc; font-size: 22px; line-height: 1; transition: background .15s, border-color .15s, color .15s; }
.editor-gradient-angle:hover { background: #2f2f2f; color: #fff; }
.editor-gradient-angle.is-active { background: #1d3557; border-color: rgba(104,154,255,.6); color: #fff; }
.editor-button-label--inline { display: grid; gap: 6px; }
.editor-button-input { padding: 8px 10px; border-radius: 8px; border: 1px solid #444; background: #0d0d0d; color: #eee; font-family: inherit; }
textarea.editor-button-input { resize: vertical; min-height: 60px; }
.editor-button-input[type="color"] { padding: 0; width: 100%; min-width: 0; height: 42px; background: transparent; overflow: hidden; border: none; box-shadow: none; }
.editor-image-preview { min-height: 140px; border-radius: 10px; border: 1px dashed #3a4252; background: #0d1118; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.editor-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.editor-image-preview--empty { color: #8793aa; font-size: 13px; }
.editor-inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.editor-inline-btn { all: unset; cursor: pointer; padding: 10px 12px; border-radius: 10px; background: #243044; color: #fff; font-weight: 700; }
.editor-inline-btn--danger { background: #5b252a; }
.editor-footer { padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: none; }
.editor-footer__group { display: flex; gap: 10px; align-items: center; }
.editor-footer__btn { all: unset; cursor: pointer; padding: 10px 14px; border-radius: 10px; background: #333; color: #fff; font-weight: 700; }
.editor-footer__btn--primary { background: #0b6; }
.editor-footer__btn--danger { background: #700; }

#settingsOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 11; }
.settings-modal { width: 90vw; height: 90vh; background: #161a22; color: #f0f4ff; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 16px 48px rgba(0, 0, 0, .44); display: flex; flex-direction: column; overflow: hidden; }
.settings-header, .settings-footer { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-header { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.settings-header__close { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #242b38; color: #fff; font-size: 22px; line-height: 1; font-weight: 700; }
.settings-header__close:hover { background: #313a4c; }
.settings-title { display: flex; flex-direction: column; gap: 6px; }
.settings-title__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: #82a8ff; font-weight: 700; }
.settings-title h2 { margin: 0; font-size: 24px; }
.settings-subtitle { margin: 0; color: #aeb9d1; font-size: 14px; }
.settings-body { padding: 22px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.settings-nav { display: flex; flex-direction: column; gap: 10px; }
.settings-nav__item { all: unset; cursor: pointer; padding: 12px 14px; border-radius: 12px; background: #11161f; border: 1px solid rgba(255,255,255,.06); color: #dce6fb; font-weight: 700; }
.settings-nav__item.is-active { background: #1d3557; border-color: rgba(104, 154, 255, .4); color: #fff; }
.settings-panels { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.settings-section { background: #0f131a; border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; padding: 18px; display: grid; gap: 14px; height: 100%; min-height: 0; overflow: auto; align-content: start; }
.settings-section[hidden] { display: none; }
.settings-section__title { font-size: 16px; font-weight: 700; color: #f0f4ff; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-field { display: flex; flex-direction: column; gap: 6px; color: #d2daec; font-size: 14px; }
.settings-field--full { grid-column: 1 / -1; }
.settings-field input { padding: 10px 12px; border-radius: 10px; border: 1px solid #3f4657; background: #0b0f16; color: #fff; }
.settings-toggle { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #edf3ff; }
.settings-toggle input { width: 18px; height: 18px; }
.settings-actions { display: flex; gap: 10px; }
.settings-btn-secondary, .settings-btn-primary, .settings-btn-test { all: unset; cursor: pointer; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.settings-btn-secondary { background: #2c3341; color: #fff; }
.settings-btn-primary { background: #0b6; color: #fff; }
.settings-btn-test { background: #1d3557; color: #fff; }
.settings-pair-list, .settings-timer-list { display: grid; gap: 12px; }
.settings-pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.settings-pair-row--page { grid-template-columns: minmax(0, 1fr) 80px 80px auto auto; }
.settings-pair-input { padding: 10px 12px; border-radius: 10px; border: 1px solid #3f4657; background: #0b0f16; color: #fff; }
.settings-pair-remove { all: unset; cursor: pointer; padding: 10px 12px; border-radius: 10px; background: #5b252a; color: #fff; font-weight: 700; text-align: center; }
.settings-timer-card { display: grid; gap: 14px; padding: 16px; background: #11161f; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; }
.settings-timer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-actions-title { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #9eb0d1; font-weight: 700; }
.settings-inline-types { flex-direction: row; flex-wrap: wrap; }
.settings-inline-actions { max-height: none; }

@media (max-width: 900px) {
    .editor-modal { width: 100%; height: 100%; border-radius: 0; }
    .settings-modal { width: 100%; height: 100%; border-radius: 0; }
    .settings-body { grid-template-columns: 1fr; overflow: auto; }
    .settings-nav { flex-direction: row; flex-wrap: wrap; }
    .settings-panels { height: auto; overflow: visible; }
    .settings-section { height: auto; overflow: visible; }
    .settings-grid { grid-template-columns: 1fr; }
    .editor-body { grid-template-columns: 1fr; }
    .settings-pair-row { grid-template-columns: 1fr; }
    .settings-pair-row--page { grid-template-columns: 1fr 1fr; }
}

#buttonContextMenu { position: fixed; z-index: 12000; background: #181c25; border: 1px solid #444; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.6); padding: 4px 0; min-width: 160px; color: #eee; font-size: 13px; user-select: none; }
.context-menu__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; cursor: pointer; position: relative; white-space: nowrap; }
.context-menu__item:hover { background: #243049; }
.context-menu__item.is-disabled { opacity: 0.4; cursor: not-allowed; }
.context-menu__item.is-disabled:hover { background: transparent; }
.context-menu__item--danger { color: #ff8888; }
.context-menu__item--danger:hover { background: #4a2025; }
.context-menu__separator { height: 1px; background: #333; margin: 4px 0; }
.context-menu__chevron { color: #888; font-size: 11px; }
.context-menu__submenu { position: absolute; left: 100%; top: -4px; display: none; background: #181c25; border: 1px solid #444; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.6); padding: 4px 0; min-width: 160px; }
.context-menu__item:hover > .context-menu__submenu { display: block; }

body.is-editmode .grid .btn { cursor: grab; -webkit-user-drag: element; -webkit-user-select: none; user-select: none; }
body.is-editmode .grid .btn:active { cursor: grabbing; }
.cell.is-drop-valid { outline: 3px solid #2da46d; outline-offset: -3px; border-radius: 12px; }
.cell.is-drop-invalid { outline: 3px solid #b04141; outline-offset: -3px; border-radius: 12px; }
.btn.is-grid-dragging { opacity: 0.4; }

#buttonContextMenu.is-submenu-left .context-menu__item > .context-menu__submenu { left: auto; right: 100%; }

.editor-type-btn { cursor: grab; user-select: none; -webkit-user-drag: element; -webkit-user-select: none; }
.editor-type-btn:active { cursor: grabbing; }
.editor-type-btn.is-dragging { opacity: 0.4; }
.editor-type-btn * { pointer-events: none; }

.action-card { cursor: grab; }
.action-card:active { cursor: grabbing; }
.action-card.is-dragging { opacity: 0.4; }
.action-card.action-card--marker { cursor: default; }

.editor-actions__drop-indicator { height: 4px; background: #5a7bb6; border-radius: 2px; margin: 2px 0; pointer-events: none; box-shadow: 0 0 8px rgba(90, 123, 182, .6); }

#commandsEditorOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 11; }
.commands-editor-modal { width: 80vw; max-width: 1100px; height: 80vh; background: #1a1a1a; color: #eee; border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.5); overflow: hidden; }
.commands-editor-modal .editor-body { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
.commands-editor-modal .editor-header { justify-content: space-between; }
.commands-editor__title { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #cfe0ff; }

.editor-chain-card--compact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #161c27; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); }
.editor-chain-card--compact .editor-chain-card__name { flex: 1 1 200px; min-width: 100px; padding: 8px 10px; border-radius: 8px; border: 1px solid #444; background: #0d0d0d; color: #eee; }
.editor-chain-card__interval { display: inline-flex; align-items: center; gap: 6px; color: #9eabc2; font-size: 13px; }
.editor-chain-card__interval input { width: 70px; padding: 8px 10px; border-radius: 8px; border: 1px solid #444; background: #0d0d0d; color: #eee; }
.editor-chain-card__edit { padding: 8px 14px; border-radius: 8px; border: 1px solid #4a6fa5; background: #1f2d44; color: #cfe0ff; cursor: pointer; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.editor-chain-card__edit:hover { background: #2a3d5c; border-color: #6e90c8; }
.editor-chain-card__count { background: #2a3855; border-radius: 10px; padding: 1px 8px; font-size: 11px; color: #cfe0ff; font-weight: 700; }

.settings-timer-card--compact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #141a25; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); }
.settings-timer-card--compact .settings-timer-card__name { flex: 1 1 200px; min-width: 100px; padding: 8px 10px; border-radius: 8px; border: 1px solid #444; background: #0d0d0d; color: #eee; }

.workflow-block { border: 1px solid #5a7bb6; border-radius: 12px; background: rgba(22, 30, 44, 0.5); display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; }
.workflow-block > .action-card:first-child { border-top-left-radius: 11px; border-top-right-radius: 11px; }
.workflow-block > .action-card:last-child,
.workflow-block > .workflow-block__children:last-child { border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; }
.action-card, .workflow-block__children > .workflow-block, .editor-actions > .workflow-block { flex-shrink: 0; }
.workflow-block .action-card.action-card--workflow { border-radius: 0; border-left: none; border-bottom: 1px solid rgba(90, 123, 182, 0.3); margin: 0; }
.workflow-block .action-card.action-card--marker { border-radius: 0; border-left: none; border-top: 1px solid rgba(90, 123, 182, 0.3); border-bottom: 1px solid rgba(90, 123, 182, 0.3); margin: 0; padding: 6px 14px; background: rgba(90, 123, 182, 0.08); cursor: default; }
.workflow-block__children { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-height: 60px; }
.workflow-block__children:empty { border: 2px dashed #2a2a2a; border-radius: 8px; margin: 8px; min-height: 50px; }
.workflow-block__children:empty::before { content: "Hier ablegen"; color: #555; font-size: 12px; align-self: center; margin: auto; padding: 12px; pointer-events: none; }

.action-card.action-card--workflow { border-left: 4px solid #5a7bb6; background: #161e2c; }
.action-card.action-card--workflow .action-card__title { color: #9ec5ff; }
.action-card.action-card--workflow .action-card__fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.action-card.action-card--workflow .action-field { display: flex; align-items: center; gap: 6px; grid-template-columns: none; flex: 0 0 auto; }
.action-card.action-card--workflow .action-field[hidden] { display: none; }
.action-card.action-card--workflow .action-field__label { display: none; }
.action-card.action-card--workflow .action-card__input { width: auto; min-width: 120px; }
.action-card.action-card--workflow .action-field[data-prop-row="value"] { flex: 1 1 200px; min-width: 150px; }
.action-card.action-card--workflow .action-field[data-prop-row="value"] .action-card__input { width: 100%; }
.action-card.action-card--workflow .action-field[data-prop-row="variable"] { flex: 1 1 150px; min-width: 100px; }
.action-card.action-card--workflow .action-field[data-prop-row="variable"] .action-card__input { width: 100%; }
.action-card.action-card--marker { border-left: 4px solid #555; background: #181818; padding: 8px 14px; }
.action-card.action-card--marker .action-card__title { color: #999; font-size: 11px; letter-spacing: .12em; }
.action-card.action-card--marker .action-card__fields { display: none; }

.editor-pick-wrap { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.editor-pick-wrap[hidden] { display: none; }
.editor-pick-wrap__fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.editor-pick-btn { padding: 0 18px; border-radius: 10px; border: 1px solid #4a6fa5; background: #1f2d44; color: #cfe0ff; cursor: pointer; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; }
.editor-pick-btn:hover { background: #2a3d5c; border-color: #6e90c8; }

body.is-picking #editorOverlay { visibility: hidden; pointer-events: none; }
body.is-picking .btn { cursor: crosshair; }
body.is-picking .btn:hover { outline: 3px solid #ffaa00; outline-offset: -3px; }

#pickerBar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; background: #161b26; border: 1px solid #5a7bb6; border-radius: 12px; padding: 12px 18px; display: flex; gap: 16px; align-items: center; color: #eee; box-shadow: 0 6px 28px rgba(0,0,0,.7); font-size: 14px; }
.picker-bar__text strong { color: #9ec5ff; }
.picker-bar__cancel { padding: 6px 14px; border-radius: 8px; border: 1px solid #555; background: #2a2a2a; color: #eee; cursor: pointer; }
.picker-bar__cancel:hover { background: #3a3a3a; }