:root {
    --wf-cat-trigger: #10B981;
    --wf-cat-logic:   #F59E0B;
    --wf-cat-ai:      #6366F1;
    --wf-cat-action:  #06B6D4;
    --wf-cat-plain:   var(--mud-palette-text-secondary);
}

.wf-designer-page {
    margin: -28px;
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
}

@media (max-width: 960px) {
    .wf-designer-page { margin: -20px; }
}

.wf-designer-toolbar {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 5px 12px;
    background: var(--console-surface, var(--mud-palette-surface));
    border-bottom: 1px solid var(--console-groove, var(--mud-palette-divider));
    flex-shrink: 0;
}
.wf-toolbar-tools {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap; row-gap: 4px;
}
.wf-toolbar-status { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; row-gap: 4px; }
.wf-toolbar-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }

.wf-designer-toolbar .mud-icon-button { padding: 5px; }
.wf-designer-title { display: flex; flex-direction: column; gap: 0; min-width: 0; max-width: 240px; }
.wf-title-field { min-width: 130px; }
.wf-title-field input { font-size: 0.9rem; font-weight: 600; }
.wf-designer-subtitle { font-size: 0.66rem; color: var(--mud-palette-action-default); line-height: 1.1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wf-zoom-cluster {
    display: flex; align-items: center; gap: 2px;
    padding: 0 4px;
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 8px;
}
.wf-zoom-pct {
    min-width: 52px; height: 28px; padding: 4px 6px;
    border: 0; border-radius: 4px;
    background: transparent; color: var(--mud-palette-text-primary);
    font-size: 0.78rem; font-weight: 600; text-align: center;
    font-family: var(--console-mono);
    cursor: pointer;
}
.wf-zoom-pct:hover { background: var(--mud-palette-action-default-hover); }

.wf-search-box { display: flex; align-items: center; gap: 6px; }
.wf-search-input {
    display: inline-flex; align-items: center; gap: 4px;
    width: 170px; height: 28px; padding: 0 6px;
    border: 1px solid var(--mud-palette-divider); border-radius: 6px;
    background: transparent;
}
.wf-search-input:focus-within { border-color: var(--mud-palette-primary); }
.wf-search-icon { font-size: 1rem !important; color: var(--mud-palette-action-default); flex-shrink: 0; }
.wf-search-native {
    flex: 1; min-width: 0; height: 100%;
    border: none; outline: none; background: transparent;
    color: var(--mud-palette-text-primary); font-size: 0.74rem;
}
.wf-search-native::placeholder { color: var(--mud-palette-action-default); }
.wf-search-clear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0; flex-shrink: 0;
    border: none; background: transparent; cursor: pointer;
    color: var(--mud-palette-action-default);
}
.wf-search-clear:hover { color: var(--mud-palette-text-primary); }
.wf-search-clear .mud-icon-root { font-size: 0.9rem !important; }
.wf-search-count {
    font-size: 0.72rem; color: var(--mud-palette-text-secondary);
    white-space: nowrap; min-width: 30px;
    font-family: var(--console-mono); font-variant-numeric: tabular-nums;
}

.wf-designer-loading {
    display: flex; align-items: center; justify-content: center;
    height: calc(100vh - 120px);
}

.wf-designer-shell {
    display: grid;
    grid-template-columns: 188px 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.wf-designer-shell.wf-has-inspector {
    grid-template-columns: 188px 1fr 320px;
}

.wf-palette {
    background: var(--console-surface, var(--mud-palette-surface));
    border-right: 1px solid var(--console-groove, var(--mud-palette-divider));
    overflow-y: auto;
    padding: 12px 10px;
}
.wf-palette-title {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--mud-palette-action-default); font-weight: 700;
    margin-bottom: 10px;
}
.wf-palette-section { margin-bottom: 10px; }
.wf-palette-section-label {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--console-mono);
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--console-engrave, var(--mud-palette-action-default)); font-weight: 600;
    margin-bottom: 6px;
}
.wf-palette-item {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; padding: 4px 8px; min-height: 26px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-left: 3px solid var(--wf-node-color, var(--wf-cat-plain));
    border-radius: 5px; margin-bottom: 3px;
    text-align: left; cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
    font-size: 0.72rem; line-height: 1.2; color: var(--mud-palette-text-primary);
}
.wf-palette-item > span { text-align: left; }
.wf-palette-tip { display: block; width: 100%; }
.wf-palette-item:hover {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
    border-left-color: var(--wf-node-color, var(--wf-cat-plain));
}

.wf-canvas-wrap {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--console-groove) 55%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--mud-palette-background);
    overflow: hidden;
    position: relative;
}
.wf-canvas-wrap .diagram-canvas { width: 100%; height: 100%; }

.wf-inspector {
    background: var(--console-surface, var(--mud-palette-surface));
    border-left: 1px solid var(--console-groove, var(--mud-palette-divider));
    overflow-y: auto;
    padding: 16px;
}
.wf-inspector-empty {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 60px 20px; text-align: left;
    color: var(--mud-palette-action-default); font-size: 0.82rem;
}
.wf-inspector-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 6px;
}
.wf-inspector-title { font-weight: 700; font-size: 0.95rem; }
.wf-inspector-desc { font-size: 0.75rem; color: var(--mud-palette-text-secondary); margin-bottom: 6px; }
.wf-inspector-id { font-size: 0.7rem; color: var(--mud-palette-action-default); }
.wf-inspector-id code {
    background: var(--mud-palette-background-grey);
    padding: 1px 5px; border-radius: 3px; font-size: 0.72rem;
}
.wf-inspector-divider { border: 0; border-top: 1px solid var(--mud-palette-divider); margin: 12px 0; }

.st-suggest {
    position: absolute;
    left: 0; top: calc(100% + 8px);
    display: flex; flex-direction: column; gap: 4px;
    z-index: 4;
    pointer-events: none;
}
.st-suggest-title {
    font-family: var(--console-mono);
    font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
    white-space: nowrap;
}
.st-suggest-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.st-suggest-port {
    font-family: var(--console-mono);
    font-size: 0.6rem; color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.st-suggest-chip {
    pointer-events: auto;
    font-size: 0.68rem; font-weight: 500;
    color: var(--mud-palette-primary);
    background: var(--console-surface, var(--mud-palette-surface));
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 55%, var(--console-groove));
    border-radius: 999px;
    padding: 3px 11px;
    white-space: nowrap; cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.st-suggest-chip::before { content: "+ "; }
.st-suggest-chip:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-style: solid;
}

.wf-ins-sec { margin: 0 0 12px; }
.wf-ins-sec-title {
    font-family: var(--console-mono);
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
    font-weight: 700;
    margin-bottom: 4px;
}
.wf-ins-sec-value {
    font-size: 0.76rem; line-height: 1.4;
    color: var(--mud-palette-text-primary);
}
.wf-ins-sec-empty {
    font-size: 0.74rem; font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.wf-inspector-multi {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 32px 16px; text-align: left;
}
.wf-inspector-multi-count { font-size: 0.95rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.wf-inspector-multi-hint { font-size: 0.72rem; color: var(--mud-palette-text-secondary); line-height: 1.4; }

.wf-cfg-switch .mud-switch-label,
.wf-cfg-switch .mud-typography { font-size: 0.78rem; line-height: 1.3; }

.wf-node {
    background: var(--console-surface, var(--mud-palette-surface));
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 11px;
    min-width: 186px;
    max-width: 260px;
    overflow: visible;
    position: relative;
    color: var(--mud-palette-text-primary);
    --wf-node-color: var(--wf-cat-plain);
}

.st-trigger { --wf-node-color: var(--wf-cat-trigger); }
.st-logic   { --wf-node-color: var(--wf-cat-logic); }
.st-ai      { --wf-node-color: var(--wf-cat-ai); }
.st-action  { --wf-node-color: var(--wf-cat-action); }
.st-plain   { --wf-node-color: var(--wf-cat-plain); }

.st-node.st-trigger { border-radius: 999px 11px 11px 999px; }
.wf-node.st-trigger { padding-left: 7px; }

.st-cat-mark {
    width: 10px; height: 10px; flex: 0 0 auto;
    background: var(--wf-node-color);
}
.st-trigger .st-cat-mark { border-radius: 50% 3px 3px 50%; }
.st-logic   .st-cat-mark { clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%); }
.st-ai      .st-cat-mark { background: transparent; border: 2.5px solid var(--wf-node-color); border-radius: 3px; }
.st-action  .st-cat-mark { border-radius: 2px; }

.st-node-head {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px 0 12px;
}
.st-cat-word {
    font-family: var(--console-mono);
    font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-node-collapse-tip { margin-left: auto; }
.wf-node-collapse {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; flex-shrink: 0;
    border: none; border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-action-default); cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}
.wf-node-collapse:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}
.st-node-title {
    font-weight: 600; font-size: 0.8rem; line-height: 1.3;
    padding: 1px 10px 0 12px;
    overflow-wrap: anywhere;
}
.wf-node-id {
    font-size: 0.62rem; color: var(--console-engrave, var(--mud-palette-action-default));
    font-family: var(--console-mono);
}
.st-node-foot { padding: 2px 10px 8px 12px; }
.wf-node-hint {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 10px 0 12px;
    line-height: 1.3;
}
.wf-port-label { font-weight: 500; }

.st-node-state { padding: 6px 10px 0 12px; }
.st-node-issue-msg {
    margin-top: 3px;
    font-size: 0.66rem; line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.st-node.st-has-error { border-color: var(--mud-palette-error); }
.st-node.st-has-warn  { border-color: var(--mud-palette-warning); }

.wf-node-selected {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

.wf-port {
    width: 16px !important; height: 16px !important;
    background: var(--wf-node-color) !important;
    border: 2px solid var(--mud-palette-surface) !important;
    border-radius: 50% !important;
    cursor: crosshair !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    z-index: 1;
}
.wf-port:hover {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    z-index: 2;
}
.wf-port-top    { position: absolute !important; top: -9px    !important; left: 50% !important; transform: translateX(-50%) !important; }
.wf-port-bottom { position: absolute !important; bottom: -9px !important; left: 50% !important; transform: translateX(-50%) !important; }
.wf-node-out-rows {
    margin-top: 6px;
    display: flex; flex-direction: column;
    padding: 0 0 8px 12px;
}
.wf-node-out-row {
    position: relative;
    display: flex; align-items: center;
    min-height: 24px;
    padding: 3px 12px 3px 0;
    font-size: 0.72rem; color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-divider);
}
.wf-node-out-row:first-child { border-top: none; }
.wf-node-out-row .wf-port-label {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-port-right-row {
    position: absolute !important;
    right: -9px !important; top: 50% !important;
    transform: translateY(-50%) !important;
}

:root { --wf-link: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent); }
.wf-designer-page .diagram-link path,
.wf-designer-page svg .link path {
    stroke: var(--wf-link);
    stroke-width: 2.5px;
    transition: stroke 0.12s ease, stroke-width 0.12s ease;
}
.wf-designer-page .diagram-link:hover path,
.wf-designer-page svg .link:hover path {
    stroke: var(--mud-palette-primary);
    stroke-width: 3.5px;
    cursor: pointer;
}
.wf-designer-page .diagram-link.selected path,
.wf-designer-page svg .link.selected path {
    stroke: var(--mud-palette-primary);
    stroke-width: 3.5px;
}

.wf-designer-page .diagram-link div.default-link-label {
    min-width: 0;
    padding: 1px 8px;
    font-family: var(--console-mono);
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    background: var(--console-surface, var(--mud-palette-surface));
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}

.wf-tpl-intro {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 14px;
}
.wf-tpl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.wf-tpl-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    text-align: left;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}
.wf-tpl-card:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.wf-tpl-card-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}
.wf-tpl-card-icon .mud-icon-root { font-size: 1.25rem !important; }
.wf-tpl-card-body { min-width: 0; }
.wf-tpl-card-name {
    font-size: 0.86rem; font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 2px;
}
.wf-tpl-card-desc {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}
@media (max-width: 720px) {
    .wf-tpl-grid { grid-template-columns: 1fr; }
}

.wf-field-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.wf-field-input { flex: 1; min-width: 0; }
.wf-field-picker {
    flex-shrink: 0;
    padding-top: 4px;
}
.wf-field-picker .mud-button-root,
.wf-field-picker .mud-icon-button {
    color: var(--mud-palette-action-default);
}
.wf-var-menu {
    max-height: 360px;
    max-width: 380px;
    overflow-y: auto;
}
.wf-var-menu-title {
    padding: 8px 14px 4px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}
.wf-var-section {
    padding: 6px 14px 2px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-action-default);
    font-weight: 700;
}
.wf-var-item { padding: 6px 14px; }
.wf-var-item-row {
    display: flex; justify-content: space-between; gap: 10px;
    align-items: center;
    font-size: 0.78rem;
}
.wf-var-item-path code {
    background: var(--mud-palette-background-grey);
    padding: 1px 5px; border-radius: 3px;
    font-size: 0.72rem;
}
.wf-var-item-type {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wf-var-item-desc {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.wf-field-block { min-width: 0; }
.wf-autocomplete-host { position: relative; }
.wf-var-suggest {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 1400;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.16);
    max-height: 260px;
    overflow-y: auto;
}
.wf-var-suggest-item {
    padding: 6px 12px;
    cursor: pointer;
}
.wf-var-suggest-item:hover,
.wf-var-suggest-item.active {
    background: var(--mud-palette-action-default-hover);
}
.wf-var-valid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}
.wf-var-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px 1px 5px;
    border-radius: 10px;
    font-size: 0.68rem;
    line-height: 1.5;
    cursor: default;
}
.wf-var-chip code { font-size: 0.66rem; background: transparent; }
.wf-var-chip .mud-icon-root { font-size: 0.8rem; width: 0.8rem; height: 0.8rem; }
.wf-var-chip-ok {
    color: var(--mud-palette-success-darken);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}
.wf-var-chip-bad {
    color: var(--mud-palette-error-darken);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}
.wf-var-tip {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}
.wf-var-tip .mud-icon-root { font-size: 0.9rem; margin-top: 1px; }

.wf-diag-strip {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    box-shadow: 0 -2px 6px rgba(0,0,0,0.06);
    max-height: 220px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wf-diag-strip.wf-diag-collapsed { max-height: 36px; }
.wf-diag-header {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: var(--mud-palette-background-grey);
    border: 0; cursor: pointer;
    font-size: 0.78rem; font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-align: left;
}
.wf-diag-header:hover { background: var(--mud-palette-action-default-hover); }
.wf-diag-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 18px;
    padding: 0 6px; border-radius: 9px;
    font-size: 0.68rem; font-weight: 700;
}
.wf-diag-chip-error {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--levi-danger-text);
}
.wf-diag-chip-warn {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: var(--levi-warn-text);
}
.wf-diag-list {
    overflow-y: auto;
    padding: 4px 0;
}
.wf-diag-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 6px 14px;
    background: transparent; border: 0;
    text-align: left; cursor: pointer;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    border-left: 3px solid transparent;
}
.wf-diag-item:hover { background: var(--mud-palette-action-default-hover); }
.wf-diag-error { border-left-color: var(--mud-palette-error); }
.wf-diag-error .mud-icon-root { color: var(--mud-palette-error) !important; }
.wf-diag-warning { border-left-color: var(--mud-palette-warning); }
.wf-diag-warning .mud-icon-root { color: var(--mud-palette-warning) !important; }
.wf-diag-hint { border-left-color: var(--mud-palette-info); }
.wf-diag-msg { flex: 1; }

.wf-skill-section-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-action-default);
    font-weight: 700;
    margin: 10px 0 6px;
}
.wf-skill-info {
    background: var(--mud-palette-background-grey);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
.wf-skill-info-name { font-size: 0.82rem; font-weight: 600; }
.wf-skill-info-desc {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
}
.wf-skill-info-meta {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
}
.wf-skill-info-meta .mud-icon-root { font-size: 0.9rem !important; }
.wf-skill-implicit {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border-left: 3px solid var(--mud-palette-primary);
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.wf-skill-output-preview {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 8px;
}
.wf-skill-output-preview code {
    background: var(--mud-palette-background-grey);
    padding: 2px 6px; border-radius: 3px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-primary);
}

.wf-node-test-ok {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-success) 45%, transparent), 0 2px 4px rgba(0,0,0,0.08) !important;
}
.wf-node-test-error {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-error) 55%, transparent), 0 2px 4px rgba(0,0,0,0.08) !important;
}
.wf-node-test-skipped {
    opacity: 0.5;
}

.wf-test-mail-list { max-height: 360px; overflow-y: auto; }
.wf-test-mail-row { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.wf-test-mail-meta { display: flex; justify-content: space-between; font-size: 0.78rem; }
.wf-test-mail-from { font-weight: 600; color: var(--mud-palette-text-primary); }
.wf-test-mail-date { color: var(--mud-palette-action-default); font-size: 0.7rem; }
.wf-test-mail-subj { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
.wf-test-running {
    display: flex; align-items: center; gap: 10px;
    padding: 30px 10px;
    font-size: 0.85rem; color: var(--mud-palette-text-secondary);
    justify-content: center;
}
.wf-test-result-header {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 10px;
}
.wf-test-step-list { max-height: 380px; overflow-y: auto; }
.wf-test-step {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0;
    border-left: 3px solid transparent;
    padding-left: 10px;
}
.wf-test-step-ok    { border-left-color: var(--mud-palette-success); }
.wf-test-step-ok    .mud-icon-root { color: var(--mud-palette-success) !important; }
.wf-test-step-error { border-left-color: var(--mud-palette-error); }
.wf-test-step-error .mud-icon-root { color: var(--mud-palette-error) !important; }
.wf-test-step-body { min-width: 0; flex: 1; }
.wf-test-step-name {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 0.82rem;
}
.wf-test-step-id {
    font-size: 0.66rem;
    color: var(--mud-palette-action-default);
    font-family: var(--console-mono);
}
.wf-test-step-port {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}
.wf-test-step-summary {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.wf-explain-loading {
    display: flex; align-items: center; gap: 10px;
    padding: 24px 4px;
    font-size: 0.85rem; color: var(--mud-palette-text-secondary);
}
.wf-explain-body {
    white-space: pre-wrap;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}

.wf-nodehelp-vars {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.wf-nodehelp-var {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
    color: var(--mud-palette-primary);
}

.wf-node-search-hit {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-warning) 55%, transparent) !important;
}

.wf-dryrun-banner {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 18px;
    background: var(--console-surface, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    font-size: 0.78rem;
    z-index: 5;
    max-width: 90%;
}
.wf-dryrun-banner .mud-icon-root { color: var(--mud-palette-primary) !important; }
.wf-dryrun-clear {
    border: 0; background: transparent;
    color: var(--mud-palette-primary);
    font-size: 0.75rem; font-weight: 600;
    cursor: pointer; padding: 2px 6px; border-radius: 4px;
    white-space: nowrap;
}
.wf-dryrun-clear:hover { background: var(--mud-palette-action-default-hover); }

.wf-legend {
    position: absolute; top: 10px; right: 12px;
    z-index: 5;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.wf-legend-panel {
    background: var(--console-surface, var(--mud-palette-surface));
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-primary);
    min-width: 232px;
}
.wf-legend-title {
    font-weight: 700; font-size: 0.66rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
    margin-bottom: 4px;
}
.wf-legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.wf-legend-swatch {
    width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
    background: var(--console-surface, var(--mud-palette-surface));
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
}
.wf-legend-swatch-dim { opacity: 0.35; }

.wf-lastrun {
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    font-size: 0.75rem;
}
.wf-lastrun-notreached {
    display: flex; flex-direction: column; gap: 2px;
    color: var(--mud-palette-text-secondary);
}
.wf-lastrun-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 4px;
}
.wf-lastrun-title {
    font-weight: 700; font-size: 0.64rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
}
.wf-lastrun-row { display: flex; gap: 6px; margin: 2px 0; align-items: baseline; }
.wf-lastrun-label {
    font-weight: 600; color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}
.wf-lastrun-row code {
    background: var(--console-surface, var(--mud-palette-surface));
    padding: 0 5px; border-radius: 3px; font-size: 0.7rem;
}
.wf-lastrun-json {
    font-family: var(--console-mono);
    font-size: 0.68rem;
    background: var(--console-surface, var(--mud-palette-surface));
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    padding: 6px 8px; border-radius: 4px;
    max-height: 180px; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
    margin-top: 4px;
}

.st-run {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 18px;
    align-items: start;
}
@media (max-width: 960px) {
    .st-run { grid-template-columns: minmax(0, 1fr); }
}
.st-run-plan, .st-proto { min-width: 0; }
.st-run-headline {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px;
}
.st-run-headline .st-run-head { margin: 0; }
.st-run-head {
    margin: 0 0 8px;
    font-family: var(--console-mono);
    font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
}

.st-trace-frame {
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 12px;
    background: var(--console-surface, var(--mud-palette-surface));
    overflow: auto;
    max-height: 62vh;
}
.st-trace-none {
    display: flex; align-items: center; justify-content: center;
    padding: 32px 16px;
}
.st-trace { position: relative; }
.st-trace-edges { position: absolute; left: 0; top: 0; pointer-events: none; }

.st-trace-edge { fill: none; stroke-linejoin: round; }
.st-trace-edge.st-walked { stroke: var(--mud-palette-primary); stroke-width: 2; }
.st-trace-edge.st-dim {
    stroke: var(--mud-palette-divider); stroke-width: 1.5; stroke-dasharray: 4 4;
}
.st-trace-dot.st-walked { fill: var(--mud-palette-primary); }
.st-trace-dot.st-dim    { fill: var(--mud-palette-divider); }

.st-trace-anchor { position: absolute; box-sizing: border-box; }
.st-trace-node {
    position: absolute;
    box-sizing: border-box;
    background: var(--console-surface, var(--mud-palette-surface));
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 11px;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
}
.st-trace-node.st-dim { opacity: 0.45; border-style: dashed; }

.st-trace-cat, .st-trace-title, .st-trace-state {
    position: absolute; left: 12px; right: 10px;
}
.st-trace-cat { display: flex; align-items: center; gap: 7px; }
.st-trace-title {
    font-weight: 600; font-size: 0.78rem; line-height: 1.3;
    overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.st-trace-state { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.st-trace-dur {
    font-family: var(--console-mono); font-size: 0.62rem;
    color: var(--mud-palette-text-secondary);
}

.st-trace-rows { position: absolute; left: 0; right: 0; }
.st-trace-row {
    position: relative;
    display: flex; align-items: center;
    padding: 0 12px;
    font-size: 0.7rem; color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-divider);
}
.st-trace-row::after {
    content: "";
    position: absolute; right: -5px; top: 50%;
    transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--mud-palette-divider);
}
.st-trace-row.st-walked { color: var(--mud-palette-text-primary); font-weight: 600; }
.st-trace-row.st-walked::after { background: var(--wf-node-color); }
.st-trace-port { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-proto-note { margin-bottom: 8px; }
.st-proto-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-width: 0;
}
.st-proto-time {
    font-family: var(--console-mono); font-size: 0.7rem;
    color: var(--mud-palette-text-secondary); flex: 0 0 auto;
}
.st-proto-name {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.8rem; font-weight: 600;
}
.st-proto-port {
    font-family: var(--console-mono); font-size: 0.68rem; font-weight: 500;
    color: var(--mud-palette-text-secondary);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.st-proto .mud-expand-panel-text { min-width: 0; }
.st-proto-dur {
    font-family: var(--console-mono); font-size: 0.68rem;
    color: var(--mud-palette-text-secondary); flex: 0 0 auto;
}
.st-proto-skip {
    display: flex; align-items: center; gap: 8px;
    margin-top: 2px; padding: 8px 10px;
    border-top: 1px dashed var(--mud-palette-divider);
    font-size: 0.74rem; color: var(--mud-palette-text-secondary);
}
.st-proto-skip time { font-family: var(--console-mono); }
.st-proto-foot {
    margin-top: 10px;
    font-size: 0.68rem; line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.run-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mud-palette-action-default); margin-bottom: 4px; }
.run-stat-value { font-size: 0.85rem; font-weight: 600; }
.run-step-body { padding: 10px 14px; }
.run-step-section { margin-bottom: 12px; }
.run-step-section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mud-palette-action-default); margin-bottom: 4px; }
.run-step-json { font-family: var(--console-mono); font-size: 0.75rem; background: var(--mud-palette-background-grey); padding: 8px 10px; border-radius: 4px; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.run-step-json-error { background: color-mix(in srgb, var(--mud-palette-error) 6%, transparent); border-left: 3px solid var(--mud-palette-error); }

.wf-mode-switch {
    display: inline-flex; align-items: center; flex-shrink: 0;
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 6px; overflow: hidden;
}
.wf-mode-btn {
    padding: 3px 12px; min-height: 26px;
    background: transparent; border: 0; cursor: pointer;
    font-size: 0.72rem; font-weight: 600; line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    transition: background 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}
.wf-mode-btn + .wf-mode-btn {
    border-left: 1px solid var(--console-groove, var(--mud-palette-divider));
}
.wf-mode-btn:hover { background: var(--mud-palette-action-default-hover); }
.wf-mode-btn--on {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 -2px 0 0 var(--mud-palette-primary);
}

.wf-designer-shell.wf-shell-operating,
.wf-designer-shell.wf-shell-operating.wf-has-inspector {
    grid-template-columns: 1fr 320px;
}

.st-op-num {
    font-family: var(--console-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.st-op-row {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    padding: 4px 10px 0 12px;
}
.st-op-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 6px; border-radius: 4px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    font-size: 0.62rem; line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}
.st-op-chip .st-op-num { font-size: 0.7rem; color: var(--mud-palette-text-primary); }
.st-op-chip--bad {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}
.st-op-chip--bad .st-op-num { color: var(--levi-danger-text, var(--mud-palette-error)); }

.st-op-port {
    margin-left: auto; margin-right: 6px;
    font-size: 0.62rem;
    color: var(--mud-palette-text-secondary);
}

.st-op-wait { padding: 4px 10px 0 12px; }
.st-op-mark {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 3px 10px 10px 3px;
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--levi-warn-text, var(--mud-palette-warning));
    font-size: 0.64rem; font-weight: 600; line-height: 1.5;
    text-decoration: none;
}
.st-op-mark:hover {
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent);
}

.st-op-sec { margin: 0 0 12px; }
.st-op-sec-title {
    font-family: var(--console-mono);
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
    font-weight: 700;
    margin-bottom: 4px;
}
.st-op-empty {
    font-size: 0.74rem; font-style: italic;
    color: var(--mud-palette-text-secondary);
}
.st-op-figures {
    display: flex; flex-direction: column; gap: 2px;
    margin: 10px 0 4px;
}
.st-op-figure {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 5px 8px;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.st-op-figure--bad { border-left-color: var(--mud-palette-error); }
.st-op-figure--bad .st-op-figure-value { color: var(--levi-danger-text, var(--mud-palette-error)); }
.st-op-figure-label {
    font-size: 0.72rem; color: var(--mud-palette-text-secondary);
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.st-op-figure-value { font-size: 0.95rem; color: var(--mud-palette-text-primary); }
.st-op-queue {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 8px; margin-bottom: 3px;
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 5px;
    font-size: 0.74rem; color: var(--mud-palette-text-primary);
    text-decoration: none;
}
.st-op-queue:hover {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}
.st-op-excerpt {
    margin-top: 10px; padding: 7px 9px;
    border-left: 2px solid var(--mud-palette-warning);
    background: var(--mud-palette-background-grey);
    font-size: 0.68rem; line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.st-op-siding-hint {
    padding: 6px 12px 2px;
    font-size: 0.68rem; color: var(--mud-palette-text-secondary);
}
.st-op-siding-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center; gap: 10px;
    padding: 6px 12px;
    border-top: 1px solid var(--mud-palette-divider);
    text-decoration: none; color: var(--mud-palette-text-primary);
}
.st-op-siding-row:hover { background: var(--mud-palette-action-default-hover); }
.st-op-siding-subject {
    font-size: 0.76rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-op-siding-reason {
    font-size: 0.7rem; color: var(--levi-danger-text, var(--mud-palette-error));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-op-siding-meta {
    font-family: var(--console-mono); font-size: 0.66rem;
    color: var(--mud-palette-text-secondary); white-space: nowrap;
}

@media (max-width: 960px) {
    .st-op-siding-row { grid-template-columns: 1fr; gap: 2px; }
}


.st-sheet {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 12px;
    background: var(--console-surface, var(--mud-palette-surface));
    padding: 10px 12px;
    overflow-x: auto;
    max-height: 62vh;
}
.st-sheet-none {
    display: flex; align-items: center; justify-content: center;
    padding: 32px 16px;
}

.st-sheet-track {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
    border-left: 2px solid transparent;
}
.st-sheet-track.st-walked  { border-left-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent); }
.st-sheet-track.st-dim     { border-left-style: dashed; border-left-color: var(--mud-palette-divider); }
.st-sheet-track.st-dim .st-sheet-row { opacity: 0.62; }

.st-sheet-branch {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 2px 2px;
}
.st-sheet-branch-word {
    font-family: var(--console-mono);
    font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
    padding: 1px 6px;
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 6px;
}

.st-sheet-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 5px 6px;
    border-radius: 8px;
}
.st-sheet-row:hover { background: var(--mud-palette-action-default-hover); }
.st-sheet-row.st-dim { opacity: 0.62; }
.st-sheet-row.st-has-error {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}

.st-sheet-no {
    font-family: var(--console-mono);
    font-size: 0.72rem; font-weight: 600;
    text-align: right;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
}

.st-sheet-body { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.st-sheet-name {
    font-size: 0.8rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-sheet-cat {
    font-family: var(--console-mono);
    font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--console-engrave, var(--mud-palette-text-secondary));
    white-space: nowrap;
}

.st-sheet-stamp {
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
}
.st-sheet-time, .st-sheet-dur, .st-sheet-port {
    font-family: var(--console-mono);
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}
.st-sheet-again {
    font-size: 0.68rem; font-style: italic;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.st-view-switch { display: inline-flex; gap: 2px; }
.st-view-btn {
    font-family: var(--console-mono);
    font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 10px;
    border: 1px solid var(--console-groove, var(--mud-palette-divider));
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}
.st-view-btn:hover { background: var(--mud-palette-action-default-hover); }
.st-view-btn--on {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    color: var(--mud-palette-text-primary);
}
.st-view-btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .st-sheet-row { grid-template-columns: 24px minmax(0, 1fr); }
    .st-sheet-stamp { grid-column: 1 / -1; padding-left: 34px; }
}