/* Hawk Visual reference skin. Every selector is intentionally scoped. */
.hawk-exact {
    --hawk-navy: #071437;
    --hawk-ink: #181c32;
    --hawk-blue: #1b84ff;
    --hawk-yellow: #f6c000;
    --hawk-purple: #7239ea;
    --hawk-green: #17c653;
    --hawk-surface: #ffffff;
    --hawk-muted: #6f7d91;
    --hawk-line: rgba(181, 195, 214, .72);
    --hawk-soft-line: rgba(181, 195, 214, .38);
    --hawk-shadow: 0 18px 45px rgba(7, 20, 55, .10);
    --hawk-shadow-soft: 0 8px 24px rgba(7, 20, 55, .08);
    --vc-sidebar-collapsed: 54px;
    --vc-sidebar-expanded: 286px;
    --vc-bottom-min: 116px;
    --vc-bottom-default: 238px;
    --vc-canvas-bg: #f8fafc;
    display: block;
    min-width: 0;
    min-height: 0;
    color: var(--hawk-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

.hawk-exact *,
.hawk-exact *::before,
.hawk-exact *::after {
    box-sizing: border-box;
}

.hawk-exact button,
.hawk-exact input,
.hawk-exact select,
.hawk-exact textarea {
    font: inherit;
}

.hawk-exact button {
    border: 0;
}

.hawk-exact .vc-layout {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 680px;
    gap: 0;
    overflow: hidden;
    color: var(--hawk-ink);
    background: #f5f7fb;
}

.hawk-exact .vc-main {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--hawk-line);
    border-radius: 16px;
    background: var(--hawk-surface);
    box-shadow: var(--hawk-shadow);
}

/* Data Browser */
.hawk-exact .vc-sidebar {
    position: relative;
    z-index: 40;
    display: flex;
    flex: 0 0 var(--vc-sidebar-collapsed);
    flex-direction: column;
    width: var(--vc-sidebar-collapsed);
    min-width: var(--vc-sidebar-collapsed);
    height: 100%;
    margin-right: 8px;
    overflow: hidden;
    border: 1px solid var(--hawk-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--hawk-shadow-soft);
    transition: width .22s ease, flex-basis .22s ease, box-shadow .22s ease;
}

.hawk-exact .vc-sidebar.is-expanded,
.hawk-exact .vc-sidebar.expanded,
.hawk-exact .vc-sidebar[data-expanded="true"],
.hawk-exact .vc-layout[data-sidebar-open="true"] .vc-sidebar {
    flex-basis: var(--vc-sidebar-expanded);
    width: var(--vc-sidebar-expanded);
    box-shadow: 0 20px 50px rgba(7, 20, 55, .14);
}

.hawk-exact .vc-sidebar-icons {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: var(--vc-sidebar-collapsed);
    padding: 12px 8px;
}

.hawk-exact .vc-sidebar.is-expanded .vc-sidebar-icons,
.hawk-exact .vc-sidebar.expanded .vc-sidebar-icons,
.hawk-exact .vc-sidebar[data-expanded="true"] .vc-sidebar-icons,
.hawk-exact .vc-layout[data-sidebar-open="true"] .vc-sidebar-icons {
    display: none;
}

.hawk-exact .vc-sidebar-icon,
.hawk-exact .vc-sidebar-toggle,
.hawk-exact .vc-sidebar-close {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #718198;
    background: transparent;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.hawk-exact .vc-sidebar-icon:hover,
.hawk-exact .vc-sidebar-toggle:hover,
.hawk-exact .vc-sidebar-close:hover {
    color: var(--hawk-blue);
    border-color: rgba(27, 132, 255, .18);
    background: rgba(27, 132, 255, .08);
    transform: translateY(-1px);
}

.hawk-exact .vc-sidebar-icon.is-active,
.hawk-exact .vc-sidebar-icon.active,
.hawk-exact .vc-sidebar-icon[aria-selected="true"] {
    color: var(--hawk-blue);
    background: rgba(27, 132, 255, .10);
}

.hawk-exact .vc-sidebar-content {
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.hawk-exact .vc-sidebar.is-expanded .vc-sidebar-content,
.hawk-exact .vc-sidebar.expanded .vc-sidebar-content,
.hawk-exact .vc-sidebar[data-expanded="true"] .vc-sidebar-content,
.hawk-exact .vc-layout[data-sidebar-open="true"] .vc-sidebar-content {
    display: flex;
}

.hawk-exact .vc-sidebar-header {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 16px;
    border-bottom: 1px solid var(--hawk-soft-line);
}

.hawk-exact .vc-browser-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.hawk-exact .vc-browser-mark {
    display: grid;
    flex: 0 0 28px;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #fff;
    background: var(--hawk-navy);
    box-shadow: 0 5px 12px rgba(7, 20, 55, .18);
}

.hawk-exact .vc-browser-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.hawk-exact .vc-browser-copy strong {
    overflow: hidden;
    color: var(--hawk-navy);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hawk-exact .vc-browser-copy span {
    color: var(--hawk-muted);
    font-size: 10px;
}

.hawk-exact .vc-sidebar-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    font-size: 17px;
}

.hawk-exact .vc-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 12px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(111, 125, 145, .38) transparent;
    scrollbar-width: thin;
}

.hawk-exact .vc-sidebar-search {
    position: relative;
    display: block;
    margin-bottom: 12px;
}

.hawk-exact .vc-sidebar-search input,
.hawk-exact .vc-sidebar-search-input,
.hawk-exact #vc-sidebar-search-input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 34px;
    outline: 0;
    border: 1px solid var(--hawk-soft-line);
    border-radius: 9px;
    color: var(--hawk-ink);
    background: #f6f8fb;
    font-size: 11px;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.hawk-exact .vc-sidebar-search input::placeholder,
.hawk-exact #vc-sidebar-search-input::placeholder {
    color: #9aa7b7;
}

.hawk-exact .vc-sidebar-search input:focus,
.hawk-exact .vc-sidebar-search-input:focus,
.hawk-exact #vc-sidebar-search-input:focus {
    border-color: rgba(27, 132, 255, .62);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(27, 132, 255, .10);
}

.hawk-exact .vc-search-icon {
    position: absolute;
    top: 9px;
    left: 11px;
    color: #8c9aab;
    font-size: 13px;
    pointer-events: none;
}

.hawk-exact .vc-section-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    margin-bottom: 14px;
    padding: 3px;
    border: 1px solid var(--hawk-soft-line);
    border-radius: 10px;
    background: #f4f7fb;
}

.hawk-exact .vc-section-switch-btn {
    min-width: 0;
    height: 28px;
    padding: 0 5px;
    border-radius: 7px;
    color: #7f8d9f;
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

/* Shown for shape parity with the app's browser, but inert on the site. */
.hawk-exact .vc-section-switch-btn.is-locked,
.hawk-exact .vc-section-switch-btn:disabled {
    color: #aab4c1;
    background: transparent;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

.hawk-exact .vc-section-switch-btn:hover,
.hawk-exact .vc-section-switch-btn.is-active,
.hawk-exact .vc-section-switch-btn.active,
.hawk-exact .vc-section-switch-btn[aria-selected="true"] {
    color: var(--hawk-blue);
    background: #fff;
    box-shadow: 0 3px 8px rgba(7, 20, 55, .08);
}

.hawk-exact .vc-section {
    margin-bottom: 14px;
    border: 1px solid var(--hawk-soft-line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .78);
    overflow: hidden;
}

.hawk-exact .vc-section-header,
.hawk-exact .vc-subgroup-header {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    color: var(--hawk-navy);
    cursor: pointer;
}

.hawk-exact .vc-section-header {
    min-height: 38px;
    padding: 0 11px;
    background: rgba(246, 248, 251, .78);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.hawk-exact .vc-section-caret {
    color: #8a98aa;
    font-size: 11px;
    transition: transform .16s ease;
}

.hawk-exact .vc-section.is-collapsed .vc-section-caret,
.hawk-exact .vc-section.collapsed .vc-section-caret {
    transform: rotate(-90deg);
}

.hawk-exact .vc-section-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: var(--hawk-blue);
    background: rgba(27, 132, 255, .10);
}

.hawk-exact .vc-section-title,
.hawk-exact .vc-subgroup-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hawk-exact .vc-badge,
.hawk-exact .vc-section-count,
.hawk-exact .vc-subgroup-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 99px;
    color: #fff;
    background: var(--hawk-blue);
    font-size: 9px;
    font-weight: 750;
}

.hawk-exact .vc-section-body {
    padding: 8px 9px 12px;
}

.hawk-exact .vc-section.is-collapsed .vc-section-body,
.hawk-exact .vc-section.collapsed .vc-section-body,
.hawk-exact .vc-subgroup.is-collapsed .vc-component-grid,
.hawk-exact .vc-subgroup.collapsed .vc-component-grid {
    display: none;
}

.hawk-exact .vc-source-section {
    margin-bottom: 10px;
}

.hawk-exact .vc-connector-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    margin-bottom: 7px;
    padding: 8px;
    border: 1px solid rgba(181, 195, 214, .42);
    border-radius: 9px;
    background: #fbfcfe;
}

.hawk-exact .vc-connector-collapse,
.hawk-exact .vc-connector-remove {
    display: grid;
    flex: 0 0 20px;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 6px;
    color: #8190a1;
    background: transparent;
    cursor: pointer;
}

.hawk-exact .vc-connector-collapse:hover,
.hawk-exact .vc-connector-remove:hover {
    color: var(--hawk-blue);
    background: rgba(27, 132, 255, .08);
}

.hawk-exact .vc-connector-icon {
    display: grid;
    flex: 0 0 27px;
    place-items: center;
    width: 27px;
    height: 27px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf3f8;
}

.hawk-exact .vc-connector-icon img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

.hawk-exact .vc-connector-text {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.hawk-exact .vc-connector-name {
    overflow: hidden;
    color: var(--hawk-navy);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hawk-exact .vc-connector-meta {
    overflow: hidden;
    color: #8997a8;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hawk-exact .vc-connector-tree,
.hawk-exact .vc-sidebar-tree {
    margin: 4px 3px 10px 29px;
    padding-left: 8px;
    border-left: 1px solid rgba(181, 195, 214, .58);
    color: #68788d;
    font-size: 10px;
}

.hawk-exact .vc-connector-tree .jstree-anchor,
.hawk-exact .vc-sidebar-tree .jstree-anchor {
    border-radius: 6px;
    line-height: 24px;
}

.hawk-exact .vc-connector-tree .jstree-clicked,
.hawk-exact .vc-sidebar-tree .jstree-clicked {
    color: var(--hawk-blue);
    background: rgba(27, 132, 255, .10);
}

/* Component palette — ported from HawkEtl.App custom.css (premium node preview cards) */
.hawk-exact .vc-subgroup {
    position: relative;
    margin-bottom: 13px;
}

.hawk-exact .vc-subgroup:last-child {
    margin-bottom: 2px;
}

.hawk-exact .vc-subgroup-header {
    display: flex;
    height: 28px;
    align-items: center;
    margin-bottom: 7px;
    padding: 0 3px 0 8px;
    border-radius: 7px;
    color: #5c6176;
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: .015em;
}

.hawk-exact .vc-subgroup-header::before {
    content: "";
    width: 3px;
    height: 12px;
    margin-right: 6px;
    border-radius: 99px;
    background: #557ca4;
}

.hawk-exact .vc-subgroup[data-subgroup="column"] .vc-subgroup-header::before { background: #b18459; }
.hawk-exact .vc-subgroup[data-subgroup="aggregate"] .vc-subgroup-header::before { background: #4f8a76; }
.hawk-exact .vc-subgroup[data-subgroup="destination"] .vc-subgroup-header::before { background: #756ab9; }

.hawk-exact .vc-subgroup-meta {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.hawk-exact .vc-subgroup-count {
    display: grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    padding: 0 5px;
    border: 1px solid #e7e9f0;
    border-radius: 999px;
    color: #9099ae;
    background: transparent;
    font-size: 8px;
    font-weight: 700;
}

.hawk-exact .vc-component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 64px);
    align-items: start;
    justify-content: space-between;
    gap: 12px 8px;
}

.hawk-exact .vc-component-card {
    z-index: 0;
    display: flex;
    width: 64px;
    min-height: 82px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    user-select: none;
    transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}

.hawk-exact .vc-component-card:hover { transform: translateY(-2px); }
.hawk-exact .vc-component-card:active { cursor: grabbing; transform: translateY(0) scale(.97); }

.hawk-exact .vc-comp-node-preview {
    position: relative;
    display: flex;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--vc-node-c1, #557ca4) 72%, #ffffff);
    border-radius: 9px;
    background:
        radial-gradient(circle at 24% 7%, rgba(255, 255, 255, .96), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(248, 250, 253, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 4px 10px rgba(30, 48, 72, .1);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.hawk-exact .vc-component-card:hover .vc-comp-node-preview {
    border-color: var(--vc-node-c1, #557ca4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 7px 15px color-mix(in srgb, var(--vc-node-c1, #557ca4) 18%, transparent);
}

.hawk-exact .vc-comp-icon {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--vc-node-c2, #7b98af) 22%, transparent);
    border-radius: 11px;
    color: color-mix(in srgb, var(--vc-node-fg, #385776) 88%, #172033);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--vc-node-c1, #557ca4) 14%, #ffffff),
        color-mix(in srgb, var(--vc-node-c3, #a5ccf5) 24%, #ffffff));
    fill: currentColor;
    filter: drop-shadow(0 2px 3px rgba(31, 48, 69, .12));
    transition: transform .16s ease;
}

.hawk-exact .vc-component-card:hover .vc-comp-icon { transform: scale(1.035); }

.hawk-exact .vc-comp-name {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    width: 64px;
    min-height: 20px;
    margin-top: 6px;
    overflow: hidden;
    color: #5c6176;
    font-size: 8.7px;
    font-weight: 700;
    line-height: 1.18;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Destination types render as the app's glass endpoint card. */
.hawk-exact .vc-component-card.is-endpoint .vc-comp-node-preview {
    border-color: rgba(255, 255, 255, .96);
    background:
        radial-gradient(circle at 28% 5%, rgba(255, 255, 255, .98), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(239, 241, 252, .92) 58%, rgba(220, 226, 246, .88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 6px 15px rgba(81, 72, 183, .12);
}

.hawk-exact .vc-component-card.is-endpoint .vc-comp-icon { color: #6157ae; }
.hawk-exact .vc-component-card.is-endpoint .vc-comp-name { color: #4f478f; }

/* Canvas and exact glass command bar */
.hawk-exact .vc-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--vc-canvas-bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(7, 20, 55, .15) 1px, transparent 1.25px);
    background-size: 24px 24px;
}

.hawk-exact .vc-canvas::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .86), transparent 62%);
    content: "";
    pointer-events: none;
}

.hawk-exact .vc-canvas #mapping-container,
.hawk-exact .vc-canvas [data-konva-mount],
.hawk-exact .vc-canvas .hawk-konva-mount {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100px;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, .28);
}

.hawk-exact .vc-canvas canvas {
    display: block;
}

.hawk-exact .vc-commandbar {
    position: absolute;
    z-index: 30;
    top: 12px;
    right: 12px;
    left: 12px;
    display: flex;
    min-height: 60px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(181, 195, 214, .72);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(255, 255, 255, .94), rgba(247, 250, 253, .78));
    box-shadow: 0 15px 38px rgba(7, 20, 55, .12), inset 0 1px 0 rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    backdrop-filter: blur(18px) saturate(155%);
}

.hawk-exact .vc-commandbar-context,
.hawk-exact .vc-commandbar-create,
.hawk-exact .vc-commandbar-view,
.hawk-exact .vc-commandbar-actions,
.hawk-exact .vc-commandbar-utilities,
.hawk-exact .vc-commandbar-workspace {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.hawk-exact .vc-commandbar-context {
    flex: 1 1 auto;
}

.hawk-exact .vc-commandbar-mark {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
    background: var(--hawk-navy);
}

.hawk-exact .vc-commandbar-jobline,
.hawk-exact .vc-commandbar-job {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.hawk-exact .vc-commandbar-job-name {
    overflow: hidden;
    color: var(--hawk-navy);
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hawk-exact .vc-commandbar-status,
.hawk-exact .vc-commandbar-id {
    color: #8593a5;
    font-size: 9px;
}

.hawk-exact .vc-commandbar-divider {
    width: 1px;
    height: 28px;
    background: var(--hawk-soft-line);
}

.hawk-exact .vc-commandbar-label {
    color: #53657b;
    font-size: 10px;
    font-weight: 700;
}

.hawk-exact .vc-commandbar kbd {
    display: inline-grid;
    min-width: 22px;
    height: 21px;
    place-items: center;
    padding: 0 6px;
    border: 1px solid var(--hawk-soft-line);
    border-radius: 6px;
    color: #748398;
    background: #fff;
    box-shadow: 0 2px 0 rgba(7, 20, 55, .08);
    font-size: 9px;
}

.hawk-exact .vc-commandbar-view,
.hawk-exact .vc-commandbar-actions {
    flex: 0 0 auto;
}

.hawk-exact .vc-commandbar-icon,
.hawk-exact .vc-commandbar-fit,
.hawk-exact .vc-toolbar-btn-add,
.hawk-exact .vc-commandbar-utilities button,
.hawk-exact .vc-commandbar-history,
.hawk-exact .vc-commandbar-preview,
.hawk-exact .vc-commandbar-sql,
.hawk-exact .vc-commandbar-undo-group button,
.hawk-exact .vc-commandbar-quiet,
.hawk-exact .vc-commandbar-stop,
.hawk-exact .vc-commandbar-run,
.hawk-exact .vc-commandbar-settings {
    display: inline-grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #67788d;
    background: transparent;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.hawk-exact .vc-commandbar-icon:hover,
.hawk-exact .vc-commandbar-fit:hover,
.hawk-exact .vc-toolbar-btn-add:hover,
.hawk-exact .vc-commandbar-utilities button:hover,
.hawk-exact .vc-commandbar-history:hover,
.hawk-exact .vc-commandbar-preview:hover,
.hawk-exact .vc-commandbar-sql:hover,
.hawk-exact .vc-commandbar-undo-group button:hover,
.hawk-exact .vc-commandbar-quiet:hover,
.hawk-exact .vc-commandbar-settings:hover {
    color: var(--hawk-blue);
    border-color: rgba(27, 132, 255, .18);
    background: rgba(27, 132, 255, .08);
    transform: translateY(-1px);
}

.hawk-exact .vc-commandbar-run {
    width: auto;
    padding: 0 14px;
    color: #fff;
    background: var(--hawk-blue);
    box-shadow: 0 7px 16px rgba(27, 132, 255, .22);
    font-size: 10px;
    font-weight: 750;
}

.hawk-exact .vc-commandbar-run:hover {
    color: #fff;
    background: #086fe3;
    box-shadow: 0 9px 20px rgba(27, 132, 255, .3);
}

.hawk-exact .vc-commandbar-stop {
    color: #d33f4f;
    background: rgba(211, 63, 79, .07);
}

/* Bottom console */
.hawk-exact .vc-bottom-panel {
    position: relative;
    z-index: 20;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    height: clamp(var(--vc-bottom-min), 22dvh, var(--vc-bottom-default));
    min-height: var(--vc-bottom-min);
    overflow: hidden;
    border-top: 1px solid var(--hawk-line);
    background: #fff;
}

.hawk-exact .vc-bottom-tabs {
    display: flex;
    flex: 0 0 38px;
    align-items: stretch;
    gap: 4px;
    padding: 0 10px;
    border-bottom: 1px solid var(--hawk-soft-line);
    background: #fbfcfe;
}

.hawk-exact .vc-bottom-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-bottom: 2px solid transparent;
    color: #8593a5;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.hawk-exact .vc-bottom-tab:hover,
.hawk-exact .vc-bottom-tab.is-active,
.hawk-exact .vc-bottom-tab.active,
.hawk-exact .vc-bottom-tab[aria-selected="true"] {
    border-bottom-color: var(--hawk-blue);
    color: var(--hawk-blue);
    background: rgba(27, 132, 255, .04);
}

.hawk-exact .vc-bottom-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 9px 12px;
    overflow: auto;
    color: #c9d4e5;
    background: var(--hawk-navy);
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 11px;
    line-height: 1.6;
}

.hawk-exact .vc-bottom-content:empty::before {
    color: rgba(181, 195, 214, .58);
    content: "Select a node to inspect its output.";
}

.hawk-exact .vc-preview-table-wrapper,
.hawk-exact .vc-sql-output,
.hawk-exact .vc-log-output {
    height: 100%;
    overflow: auto;
}

.hawk-exact .vc-preview-table {
    width: 100%;
    border-collapse: collapse;
    color: #c9d4e5;
    font-size: 10px;
}

.hawk-exact .vc-preview-table th,
.hawk-exact .vc-preview-table td {
    padding: 5px 9px;
    border-bottom: 1px solid rgba(181, 195, 214, .16);
    text-align: left;
    white-space: nowrap;
}

.hawk-exact .vc-preview-table th {
    position: sticky;
    top: 0;
    color: #fff;
    background: #181c32;
    font-weight: 700;
}

.hawk-exact .vc-log-row,
.hawk-exact .vc-result-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 22px;
}

.hawk-exact .vc-log-time {
    flex: 0 0 auto;
    color: rgba(181, 195, 214, .56);
}

.hawk-exact .vc-log-success,
.hawk-exact .vc-result-success {
    color: var(--hawk-green);
}

.hawk-exact .vc-log-warning,
.hawk-exact .vc-result-warning {
    color: var(--hawk-yellow);
}

.hawk-exact .vc-log-error,
.hawk-exact .vc-result-error {
    color: #ff6b7a;
}

/* History drawer */
.hawk-exact .vc-history-panel {
    position: absolute;
    z-index: 70;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    flex-direction: column;
    width: 390px;
    max-width: calc(100% - 24px);
    border-left: 1px solid var(--hawk-line);
    background: rgba(255, 255, 255, .98);
    box-shadow: -18px 0 44px rgba(7, 20, 55, .16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.hawk-exact .vc-history-panel.is-open,
.hawk-exact .vc-history-panel.open,
.hawk-exact .vc-history-panel[data-open="true"] {
    display: flex;
}

.hawk-exact .vc-history-header {
    display: flex;
    flex: 0 0 58px;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--hawk-soft-line);
}

.hawk-exact .vc-history-title {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.hawk-exact .vc-history-title strong {
    color: var(--hawk-navy);
    font-size: 13px;
}

.hawk-exact .vc-history-title span {
    color: #8492a4;
    font-size: 10px;
}

.hawk-exact .vc-history-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: 8px;
    color: #76869a;
    background: transparent;
    cursor: pointer;
}

.hawk-exact .vc-history-close:hover {
    color: var(--hawk-blue);
    background: rgba(27, 132, 255, .08);
}

.hawk-exact .vc-history-list {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 8px;
    min-height: 0;
    padding: 14px;
    overflow: auto;
}

.hawk-exact .vc-history-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px;
    border: 1px solid var(--hawk-soft-line);
    border-radius: 10px;
    background: #fbfcfe;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.hawk-exact .vc-history-row:hover,
.hawk-exact .vc-history-row.is-current,
.hawk-exact .vc-history-row[data-current="true"] {
    border-color: rgba(27, 132, 255, .36);
    background: #f5f9ff;
    box-shadow: 0 7px 16px rgba(27, 132, 255, .08);
}

.hawk-exact .vc-history-dot {
    width: 8px;
    height: 8px;
    border: 2px solid var(--hawk-blue);
    border-radius: 50%;
    background: #fff;
}

.hawk-exact .vc-history-row.is-current .vc-history-dot,
.hawk-exact .vc-history-row[data-current="true"] .vc-history-dot {
    border-color: var(--hawk-green);
    background: var(--hawk-green);
}

.hawk-exact .vc-history-row-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.hawk-exact .vc-history-row-title {
    overflow: hidden;
    color: var(--hawk-navy);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hawk-exact .vc-history-row-meta {
    color: #8997a8;
    font-size: 9px;
}

.hawk-exact .vc-history-row-action {
    height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(27, 132, 255, .24);
    border-radius: 7px;
    color: var(--hawk-blue);
    background: rgba(27, 132, 255, .06);
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
}

.hawk-exact .vc-history-row-action:hover {
    color: #fff;
    background: var(--hawk-blue);
}

@media (max-width: 900px) {
    .hawk-exact .vc-layout {
        min-height: 620px;
    }

    .hawk-exact .vc-sidebar {
        --vc-sidebar-expanded: 244px;
    }

    .hawk-exact .vc-component-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hawk-exact .vc-commandbar {
        flex-wrap: wrap;
        min-height: 58px;
    }

    .hawk-exact .vc-commandbar-context {
        flex: 1 1 180px;
    }

    .hawk-exact .vc-commandbar-create,
    .hawk-exact .vc-commandbar-view {
        order: 3;
    }

    .hawk-exact .vc-commandbar-divider {
        display: none;
    }

    .hawk-exact .vc-history-panel {
        width: 340px;
    }
}

@media (max-width: 640px) {
    .hawk-exact .vc-layout {
        height: auto;
        min-height: 0;
        flex-direction: column;
        overflow: visible;
    }

    .hawk-exact .vc-sidebar {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 54px;
        margin: 0 0 8px;
    }

    .hawk-exact .vc-sidebar-icons {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        padding: 8px;
    }

    .hawk-exact .vc-sidebar.is-expanded,
    .hawk-exact .vc-sidebar.expanded,
    .hawk-exact .vc-sidebar[data-expanded="true"],
    .hawk-exact .vc-layout[data-sidebar-open="true"] .vc-sidebar {
        width: 100%;
        max-height: 300px;
    }

    .hawk-exact .vc-sidebar.is-expanded .vc-sidebar-icons,
    .hawk-exact .vc-sidebar.expanded .vc-sidebar-icons,
    .hawk-exact .vc-sidebar[data-expanded="true"] .vc-sidebar-icons,
    .hawk-exact .vc-layout[data-sidebar-open="true"] .vc-sidebar-icons {
        display: flex;
    }

    .hawk-exact .vc-sidebar-content {
        min-height: 0;
        max-height: 300px;
    }

    .hawk-exact .vc-main {
        min-height: 700px;
    }

    .hawk-exact .vc-canvas {
        min-height: 500px;
    }

    .hawk-exact .vc-commandbar {
        top: 8px;
        right: 8px;
        left: 8px;
        gap: 5px;
        padding: 7px;
        border-radius: 14px;
    }

    .hawk-exact .vc-commandbar-job-name {
        max-width: 150px;
    }

    .hawk-exact .vc-commandbar-label,
    .hawk-exact .vc-commandbar-create kbd,
    .hawk-exact .vc-commandbar-preview,
    .hawk-exact .vc-commandbar-sql,
    .hawk-exact .vc-commandbar-quiet {
        display: none;
    }

    .hawk-exact .vc-commandbar-icon,
    .hawk-exact .vc-commandbar-fit,
    .hawk-exact .vc-commandbar-utilities button,
    .hawk-exact .vc-commandbar-history,
    .hawk-exact .vc-commandbar-settings,
    .hawk-exact .vc-commandbar-run {
        width: 32px;
        height: 32px;
    }

    .hawk-exact .vc-commandbar-run {
        padding: 0 9px;
        font-size: 9px;
    }

    .hawk-exact .vc-bottom-panel {
        height: 190px;
        min-height: 145px;
    }

    .hawk-exact .vc-bottom-tabs {
        overflow-x: auto;
        padding: 0 5px;
    }

    .hawk-exact .vc-bottom-tab {
        flex: 0 0 auto;
        padding: 0 9px;
    }

    .hawk-exact .vc-history-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: min(76vh, 520px);
        border-top: 1px solid var(--hawk-line);
        border-left: 0;
    }
}

/* Markup parity overrides: the showcase uses the same Visual chrome without app services. */
.hawk-exact .hawk-ui-icon {
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hawk-exact .vc-layout {
    min-height: 590px;
}

.hawk-exact .vc-commandbar {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto auto;
    width: auto;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    gap: 6px;
    padding: 6px 7px;
}

.hawk-exact .vc-commandbar-context,
.hawk-exact .vc-commandbar-create,
.hawk-exact .vc-commandbar-actions,
.hawk-exact .vc-commandbar-view,
.hawk-exact .vc-commandbar-utilities {
    height: 42px;
    gap: 4px;
    flex-wrap: nowrap;
}

.hawk-exact .vc-commandbar-context {
    overflow: hidden;
}

.hawk-exact .vc-commandbar-job {
    overflow: hidden;
}

.hawk-exact .vc-commandbar-jobline {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hawk-exact .vc-commandbar-jobline strong {
    max-width: 190px;
    overflow: hidden;
    color: #181c32;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
}

.hawk-exact .vc-commandbar-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #18875d;
}

.hawk-exact .vc-commandbar-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #17c653;
}

.hawk-exact .vc-commandbar-back,
.hawk-exact .vc-commandbar-icon,
.hawk-exact .vc-commandbar-fit,
.hawk-exact .vc-commandbar-history-open,
.hawk-exact .vc-commandbar-quiet,
.hawk-exact .vc-commandbar-preview,
.hawk-exact .vc-commandbar-stop,
.hawk-exact .vc-commandbar-run,
.hawk-exact .vc-commandbar-add {
    display: inline-flex;
    width: auto;
    height: 36px;
    min-width: 36px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #67788d;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
}

.hawk-exact .vc-commandbar-back,
.hawk-exact .vc-commandbar-icon {
    width: 36px;
    padding: 0;
}

.hawk-exact .vc-commandbar-mark {
    flex-basis: 34px;
}

.hawk-exact .vc-commandbar-mark .hawk-ui-icon {
    width: 17px;
    height: 17px;
    stroke: #fff;
}

.hawk-exact .vc-commandbar-add {
    color: #fff;
    background: #1b84ff;
    box-shadow: 0 7px 16px rgba(27, 132, 255, .2);
}

.hawk-exact .vc-commandbar-add > span {
    display: grid;
    place-items: center;
}

.hawk-exact .vc-commandbar-add b,
.hawk-exact .vc-commandbar-fit span,
.hawk-exact .vc-commandbar-quiet span,
.hawk-exact .vc-commandbar-preview span,
.hawk-exact .vc-commandbar-stop span,
.hawk-exact .vc-commandbar-run span {
    font-size: 9px;
    font-weight: 700;
}

.hawk-exact .vc-commandbar-history-open b,
.hawk-exact .vc-commandbar-quiet em {
    color: #65758a;
    font-size: 9px;
    font-style: normal;
}

.hawk-exact .vc-commandbar-utilities {
    gap: 1px;
}

.hawk-exact .vc-commandbar-actions {
    justify-content: flex-end;
}

.hawk-exact .vc-commandbar-actions > .vc-commandbar-preview,
.hawk-exact .vc-commandbar-actions > .vc-commandbar-stop,
.hawk-exact .vc-commandbar-actions > .vc-commandbar-run {
    min-width: auto;
}

.hawk-exact .vc-commandbar-stop.is-disabled {
    opacity: .48;
}

.hawk-exact .vc-commandbar-run {
    color: #fff;
    background: #1b84ff;
}

.hawk-exact .vc-commandbar-run .hawk-ui-icon,
.hawk-exact .vc-commandbar-add .hawk-ui-icon {
    stroke: #fff;
}

.hawk-exact .hawk-exact-flow-mount,
.hawk-exact .hawk-exact-gallery-mount {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hawk-exact .vc-bottom-panel {
    height: 190px;
    min-height: 190px;
    border: 1px solid rgba(181, 195, 214, .72);
    border-radius: 14px 14px 0 0;
    background: radial-gradient(circle at 10% -30%, rgba(255,255,255,.92), transparent 38%), #f0f6fc;
    box-shadow: 0 -10px 26px rgba(43, 66, 92, .055), inset 0 1px 0 rgba(255,255,255,.8);
}

.hawk-exact .vc-bottom-chrome {
    display: flex;
    height: 47px;
    flex: 0 0 47px;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(181, 195, 214, .42);
    background: rgba(255,255,255,.72);
}

.hawk-exact .vc-bottom-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4b5675;
    font-size: 10px;
    font-weight: 700;
}

.hawk-exact .vc-bottom-brand-mark {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 8px;
    color: #1b84ff;
    background: rgba(27,132,255,.09);
}

.hawk-exact .vc-bottom-tabs {
    height: 36px;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(241,241,244,.76);
    border-radius: 11px;
    background: rgba(249,249,249,.74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.hawk-exact .vc-bottom-tab {
    height: 28px;
    gap: 5px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: #7e8a9f;
}

.hawk-exact .vc-bottom-tab.active {
    color: #1b84ff;
    background: #fff;
    box-shadow: 0 3px 9px rgba(51,71,99,.1);
}

.hawk-exact .vc-bottom-tab .hawk-ui-icon {
    width: 13px;
    height: 13px;
}

.hawk-exact .vc-bottom-tab b {
    display: grid;
    min-width: 15px;
    height: 15px;
    place-items: center;
    border-radius: 99px;
    color: #6f7d91;
    background: #edf1f5;
    font-size: 8px;
}

.hawk-exact .vc-bottom-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.hawk-exact .vc-bottom-live-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6f7d91;
    font-size: 9px;
    font-weight: 700;
}

.hawk-exact .vc-bottom-live-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #99a1b7;
}

.hawk-exact .vc-bottom-live-state.is-live i {
    background: #17c653;
    box-shadow: 0 0 0 3px rgba(23,198,83,.12);
}

.hawk-exact .vc-bottom-action {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 8px;
    color: #7e8a9f;
    background: transparent;
}

.hawk-exact .vc-bottom-content {
    height: 143px;
    padding: 7px;
    color: #252f4a;
    background: transparent;
    font-family: Inter, ui-sans-serif, sans-serif;
    font-size: 10px;
    line-height: 1.5;
}

.hawk-exact .vc-console-state {
    display: grid;
    height: 100%;
    place-content: center;
    justify-items: center;
    gap: 5px;
    color: #7e8a9f;
    text-align: center;
}

.hawk-exact .vc-console-state-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #1b84ff;
    background: rgba(27,132,255,.09);
}

.hawk-exact .vc-console-state strong {
    color: #252f4a;
    font-size: 11px;
}

.hawk-exact .hawk-run-output {
    display: grid;
    gap: 2px;
}

.hawk-exact .hawk-run-output p {
    display: grid;
    grid-template-columns: 82px minmax(0,1fr) 54px;
    gap: 10px;
    margin: 0;
    padding: 5px 8px;
    border-radius: 7px;
    color: #4b5675;
    background: rgba(255,255,255,.55);
}

.hawk-exact .hawk-run-output time { color: #99a1b7; }
.hawk-exact .hawk-run-output b { color: #17c653; text-align: right; }

.hawk-exact .hawk-console-code {
    margin: 0;
    padding: 10px 12px;
    color: #267fd3;
    font: 10px/1.7 "IBM Plex Mono", monospace;
    white-space: pre-wrap;
}

.hawk-exact .hawk-console-history,
.hawk-exact .hawk-console-table {
    display: grid;
    gap: 3px;
}

.hawk-exact .hawk-console-history span {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 7px;
    background: rgba(255,255,255,.6);
}

.hawk-exact .hawk-console-history em { color: #17c653; font-style: normal; }
.hawk-exact .hawk-console-table { grid-template-columns: repeat(3,1fr); }
.hawk-exact .hawk-console-table > * { padding: 5px 8px; border-bottom: 1px solid rgba(181,195,214,.35); }

.hawk-exact .vc-sidebar-search > .hawk-ui-icon {
    position: absolute;
    z-index: 1;
    top: 9px;
    left: 10px;
    width: 14px;
    height: 14px;
    color: #8c9aab;
}

.hawk-exact .vc-section-switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.hawk-exact .vc-section-switch-btn .hawk-ui-icon,
.hawk-exact .vc-section-icon .hawk-ui-icon,
.hawk-exact .vc-browser-mark .hawk-ui-icon {
    width: 13px;
    height: 13px;
}

.hawk-exact .hawk-tree-row {
    display: flex;
    width: 100%;
    height: 26px;
    align-items: center;
    gap: 6px;
    padding: 0 7px;
    border-radius: 7px;
    color: #68788d;
    background: transparent;
    text-align: left;
}

.hawk-exact .hawk-tree-row:hover,
.hawk-exact .hawk-tree-row.is-selected {
    color: #1b84ff;
    background: rgba(27,132,255,.08);
}

.hawk-exact .hawk-tree-row .hawk-ui-icon { width: 12px; height: 12px; }
.hawk-exact .hawk-tree-row span { flex: 1; font-size: 10px; }
.hawk-exact .hawk-tree-row small { color: #99a1b7; font-size: 8px; }
.hawk-exact .hawk-tree-branch { margin-left: 10px; padding-left: 7px; border-left: 1px solid rgba(181,195,214,.55); }
.hawk-exact .hawk-tree-branch[hidden] { display: none; }

/* jsTree-style caret: a CSS triangle that rotates open, same as HawkEtl.App's tree. */
.hawk-exact .hawk-tree-caret {
    flex: 0 0 7px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid #a6b0c2;
    transition: transform .16s ease;
}

.hawk-exact .hawk-tree-folder.is-open .hawk-tree-caret { transform: rotate(90deg); }
.hawk-exact .hawk-tree-folder.is-open .hawk-ui-icon { stroke: #1b84ff; }
.hawk-exact .hawk-tree-table .hawk-ui-icon { stroke: #209fb5; }
.hawk-exact .hawk-tree-table { padding-left: 14px; cursor: grab; }
.hawk-exact .hawk-tree-table:active { cursor: grabbing; }
.hawk-exact .hawk-tree-table.is-dragging { opacity: .45; }
.hawk-exact .hawk-tree-table.is-selected .hawk-ui-icon { stroke: #1b84ff; }
.hawk-exact .vc-add-connector-btn { display:flex; width:100%; height:32px; align-items:center; justify-content:center; gap:5px; border:1px dashed rgba(27,132,255,.35); border-radius:9px; color:#1b84ff; background:rgba(27,132,255,.04); font-size:9px; font-weight:700; }
.hawk-exact .vc-add-connector-btn .hawk-ui-icon { width:12px; height:12px; }

.hawk-exact .hawk-exact-node-shell {
    overflow: hidden;
    border: 1px solid rgba(181,195,214,.72);
    border-radius: 16px;
    background: #f8fafc;
    box-shadow: 0 12px 32px rgba(51,71,99,.08);
}

.hawk-exact .hawk-exact-mini-head {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(181,195,214,.5);
    background: rgba(255,255,255,.86);
}

.hawk-exact .hawk-exact-mini-head > div:first-child { display:grid; gap:2px; }
.hawk-exact .hawk-exact-mini-head span { color:#99a1b7; font-size:8px; font-weight:700; letter-spacing:.08em; }
.hawk-exact .hawk-exact-mini-head strong { color:#181c32; font-size:11px; }
.hawk-exact .hawk-exact-mini-head > div:last-child { display:flex; align-items:center; gap:6px; color:#7e8a9f; font-size:8px; }
.hawk-exact .hawk-mini-dot { width:6px; height:6px; border-radius:50%; }
.hawk-exact .hawk-mini-dot.yellow { background:#f6c000; }
.hawk-exact .hawk-mini-dot.purple { background:#7239ea; }
.hawk-exact .hawk-mini-dot.blue { background:#1b84ff; }
.hawk-exact .hawk-exact-node-shell .vc-canvas { height: 620px; }

.hawk-exact[data-vc-surface="run"] .vc-commandbar {
    grid-template-columns: minmax(175px, 1fr) auto;
}

.hawk-exact[data-vc-surface="run"] .vc-commandbar-create,
.hawk-exact[data-vc-surface="run"] .vc-commandbar-utilities {
    display: none;
}

.hawk-exact .hawk-exact-history-workbench {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 390px;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(181,195,214,.72);
    border-radius: 16px;
    background: #f8fafc;
    box-shadow: 0 12px 32px rgba(51,71,99,.08);
}

.hawk-exact .hawk-history-canvas {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #fff radial-gradient(circle, #dbe0e9 1px, transparent 1px) 0 0/24px 24px;
}

.hawk-exact .hawk-history-caption {
    position:absolute;
    z-index:3;
    top:14px;
    left:14px;
    display:grid;
    gap:2px;
    padding:8px 10px;
    border:1px solid rgba(181,195,214,.65);
    border-radius:10px;
    background:rgba(255,255,255,.9);
    box-shadow:0 7px 18px rgba(51,71,99,.08);
}
.hawk-exact .hawk-history-caption span { color:#99a1b7; font-size:7px; font-weight:700; }
.hawk-exact .hawk-history-caption strong { color:#181c32; font-size:10px; }
.hawk-exact .hawk-history-change { position:absolute; z-index:3; right:14px; bottom:14px; display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid rgba(246,192,0,.35); border-radius:9px; color:#846b00; background:#fff9db; font-size:8px; }

.hawk-exact .hawk-exact-history-workbench .vc-history-panel {
    position: relative;
    inset: auto;
    display: flex;
    width: 390px;
    max-width: none;
    border: 0;
    border-left: 1px solid rgba(181,195,214,.72);
    border-radius: 0;
    background: rgba(255,255,255,.96);
    box-shadow: -12px 0 30px rgba(24,28,50,.1);
}

.hawk-exact .vc-history-head {
    display:flex;
    min-height:72px;
    align-items:center;
    padding:0 14px;
    border-bottom:1px solid rgba(181,195,214,.42);
}
.hawk-exact .vc-history-head > div { display:grid; gap:2px; }
.hawk-exact .vc-history-head span { color:#99a1b7; font-size:8px; font-weight:700; text-transform:uppercase; }
.hawk-exact .vc-history-head strong { color:#181c32; font-size:13px; }
.hawk-exact .vc-history-head button { display:grid; width:30px; height:30px; margin-left:auto; place-items:center; border-radius:8px; color:#7e8a9f; background:transparent; }
.hawk-exact .vc-history-summary { display:flex; gap:10px; margin:14px; padding:13px; border-radius:12px; background:rgba(27,132,255,.06); }
.hawk-exact .vc-history-summary-icon { display:grid; flex:0 0 31px; width:31px; height:31px; place-items:center; border-radius:9px; color:#fff; background:#1b84ff; }
.hawk-exact .vc-history-summary > div { display:grid; gap:3px; }
.hawk-exact .vc-history-summary strong { color:#181c32; font-size:10px; }
.hawk-exact .vc-history-summary span { color:#7e8a9f; font-size:8px; line-height:1.4; }
.hawk-exact .vc-history-last-good { display:flex; min-height:38px; align-items:center; justify-content:space-between; margin:0 14px 10px; padding:0 10px; border-radius:10px; color:#18875d; background:rgba(23,198,83,.07); font-size:9px; }
.hawk-exact .vc-history-last-good b { color:#17c653; }
.hawk-exact .hawk-exact-history-workbench .vc-history-list { gap:0; padding:0 12px 12px; }
.hawk-exact .hawk-exact-history-workbench .vc-history-row { min-height:62px; padding:8px; border:0; border-radius:10px; background:transparent; }
.hawk-exact .hawk-exact-history-workbench .vc-history-row.is-active { background:rgba(27,132,255,.055); }
.hawk-exact .hawk-exact-history-workbench .vc-history-dot { display:grid; width:24px; height:24px; place-items:center; border:0; color:#99a1b7; background:transparent; }
.hawk-exact .hawk-exact-history-workbench .vc-history-row-copy { display:flex; flex-direction:column; gap:3px; }
.hawk-exact .hawk-exact-history-workbench .vc-history-row-copy > div { display:flex; align-items:center; gap:5px; }
.hawk-exact .hawk-exact-history-workbench .vc-history-row-copy strong { color:#181c32; font-size:9px; }
.hawk-exact .hawk-exact-history-workbench .vc-history-row-copy span { color:#99a1b7; font-size:8px; }
.hawk-exact .hawk-exact-history-workbench .vc-history-row-copy em { padding:2px 5px; border-radius:99px; color:#1b84ff; background:rgba(27,132,255,.08); font-size:7px; font-style:normal; }
.hawk-exact .hawk-exact-history-workbench .vc-history-row > button { height:26px; padding:0 8px; border-radius:7px; color:#1b84ff; background:rgba(27,132,255,.06); font-size:8px; font-weight:700; }

@media (max-width: 1100px) {
    .hawk-exact .vc-commandbar { grid-template-columns: minmax(170px,1fr) auto; }
    .hawk-exact .vc-commandbar-create { display:none; }
    .hawk-exact .vc-commandbar-jobline strong { max-width:130px; }
    .hawk-exact .vc-commandbar-utilities .vc-commandbar-quiet { display:none; }
    .hawk-exact .hawk-exact-history-workbench { grid-template-columns:minmax(0,1fr) 340px; }
    .hawk-exact .hawk-exact-history-workbench .vc-history-panel { width:340px; }
}

@media (max-width: 900px) {
    .hawk-exact .vc-commandbar { display:grid; grid-template-columns:minmax(140px,1fr) auto; height:56px; min-height:56px; flex-wrap:nowrap; }
    .hawk-exact .vc-commandbar-actions { grid-column:auto; }
    .hawk-exact .vc-commandbar-utilities { display:none; }
    .hawk-exact .hawk-exact-history-workbench { grid-template-columns:1fr; }
    .hawk-exact .hawk-history-canvas { min-height:420px; }
    .hawk-exact .hawk-exact-history-workbench .vc-history-panel { width:100%; border-top:1px solid rgba(181,195,214,.72); border-left:0; }
}

@media (max-width: 640px) {
    .hawk-exact .vc-layout { min-height:830px; }
    .hawk-exact .vc-main { min-height:830px; }
    .hawk-exact .vc-canvas { min-height:640px; }
    .hawk-exact .vc-commandbar { grid-template-columns:minmax(100px,1fr) auto; }
    .hawk-exact .vc-commandbar-jobline strong { max-width:100px; }
    .hawk-exact .vc-commandbar-status,
    .hawk-exact .vc-commandbar-id,
    .hawk-exact .vc-commandbar-preview,
    .hawk-exact .vc-commandbar-stop { display:none; }
    .hawk-exact .vc-commandbar-run { display:inline-flex; width:auto; }
    .hawk-exact .vc-bottom-brand { display:none; }
    .hawk-exact .vc-bottom-chrome { padding-inline:5px; }
    .hawk-exact .vc-bottom-tabs { max-width:calc(100% - 70px); overflow-x:auto; }
    .hawk-exact .vc-bottom-tab { padding:0 8px; }
    .hawk-exact .hawk-run-output p { grid-template-columns:70px minmax(0,1fr); }
    .hawk-exact .hawk-run-output b { display:none; }
    .hawk-exact .hawk-exact-node-shell .vc-canvas { height:1260px; }
    .hawk-exact .hawk-exact-mini-head { align-items:flex-start; flex-direction:column; }
}

/* Interactive stage rail — hero flow canvas (no command bar, no run console).
   The dock sits inside the canvas, centred near the bottom edge: one click starts the
   sequence and the rest plays itself, so the rail reads as a player, not a menu. */
.hawk-exact .hawk-stage-layout,
.hawk-exact .hawk-stage-layout .vc-main {
    min-height: 470px;
}

.hawk-exact .hawk-stage-dock {
    position: absolute;
    z-index: 30;
    right: 0;
    bottom: 18px;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    pointer-events: none;
}

.hawk-exact .hawk-stage-rail {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    padding: 5px;
    border: 1px solid rgba(181, 195, 214, .6);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(13, 32, 64, .12), 0 1px 0 rgba(255, 255, 255, .9) inset;
    pointer-events: auto;
}

/* Slides under the active chip so the hand-off between steps reads as one motion. */
.hawk-exact .hawk-stage-trail {
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 0;
    width: 0;
    height: calc(100% - 10px);
    border-radius: 999px;
    background: linear-gradient(135deg, #1b84ff, #0f6ad8);
    box-shadow: 0 8px 20px rgba(27, 132, 255, .32);
    opacity: 0;
    transition: transform .42s cubic-bezier(.4, 1.3, .45, 1), width .42s cubic-bezier(.4, 1.3, .45, 1), opacity .24s ease;
}

.hawk-exact .hawk-stage-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hawk-ink-soft, #4b5675);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: color .22s ease, transform .22s ease;
}

.hawk-exact .hawk-stage-index {
    display: grid;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #eef1f6;
    color: #78829d;
    font-size: 10px;
    font-weight: 700;
    place-items: center;
    transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}

.hawk-exact .hawk-stage-btn:hover {
    color: #1b84ff;
}

.hawk-exact .hawk-stage-btn:hover .hawk-stage-index {
    background: rgba(27, 132, 255, .14);
    color: #1b84ff;
}

.hawk-exact .hawk-stage-btn.is-done {
    color: #17c653;
}

.hawk-exact .hawk-stage-btn.is-done .hawk-stage-index {
    background: rgba(23, 198, 83, .16);
    color: #17c653;
}

.hawk-exact .hawk-stage-btn.is-active,
.hawk-exact .hawk-stage-btn.is-active:hover {
    color: #fff;
}

.hawk-exact .hawk-stage-btn.is-active .hawk-stage-index {
    background: rgba(255, 255, 255, .26);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
}

/* While the sequence auto-plays, the active step's badge keeps a soft heartbeat. */
.hawk-exact .hawk-stage-rail.is-playing .hawk-stage-btn.is-active .hawk-stage-index {
    animation: hawk-stage-beat 1.25s ease-out infinite;
}

@keyframes hawk-stage-beat {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
    70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.hawk-exact .hawk-stage-status {
    order: -1;
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .74);
    color: #78829d;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    pointer-events: none;
}

@media (max-width: 640px) {
    .hawk-exact .hawk-stage-layout,
    .hawk-exact .hawk-stage-layout .vc-main {
        min-height: 720px;
    }

    .hawk-exact .hawk-stage-layout .vc-canvas {
        min-height: 700px;
    }

    .hawk-exact .hawk-stage-dock {
        bottom: 12px;
        padding: 0 8px;
    }

    .hawk-exact .hawk-stage-btn {
        padding: 5px 10px 5px 5px;
        font-size: 11px;
    }

    /* Chips wrap on to two rows here, so the sliding trail would land on the wrong one. */
    .hawk-exact .hawk-stage-trail {
        display: none;
    }

    .hawk-exact .hawk-stage-btn.is-active {
        background: #1b84ff;
    }
}

/* Version compare — full-bleed canvas with a before/after wipe slider. */
.hawk-exact .hawk-exact-history-workbench.is-solo {
    grid-template-columns: minmax(0, 1fr);
    min-height: 540px;
}

.hawk-exact .hawk-compare {
    --compare: 52%;
    position: absolute;
    inset: 0;
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.hawk-exact .hawk-compare-layer {
    position: absolute;
    inset: 0;
}

/* The overlay owns an opaque background so the base version cannot bleed through. */
.hawk-exact .hawk-compare-clip {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--compare)) 0 0);
    background: #fff radial-gradient(circle, #dbe0e9 1px, transparent 1px) 0 0/24px 24px;
}

.hawk-exact .hawk-compare-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--compare);
    z-index: 4;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(51, 71, 99, .2), 0 2px 12px rgba(51, 71, 99, .2);
    pointer-events: none;
}

.hawk-exact .hawk-compare-handle {
    position: absolute;
    top: 50%;
    left: var(--compare);
    z-index: 5;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 6px 20px rgba(51, 71, 99, .26);
    color: #334763;
    cursor: ew-resize;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    touch-action: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.hawk-exact .hawk-compare-handle:hover,
.hawk-exact .hawk-compare.is-dragging .hawk-compare-handle {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 8px 24px rgba(51, 71, 99, .32);
}

.hawk-exact .hawk-compare-handle:focus-visible {
    outline: 2px solid #1b84ff;
    outline-offset: 3px;
}

/* Tags hug the divider so the label always names the version on its own side. */
.hawk-exact .hawk-compare-tag {
    position: absolute;
    bottom: 14px;
    z-index: 4;
    padding: 5px 9px;
    border: 1px solid rgba(181, 195, 214, .72);
    border-radius: 8px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 6px 16px rgba(51, 71, 99, .1);
    color: #78829d;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    pointer-events: none;
}

.hawk-exact .hawk-compare-tag b { color: #4b5675; }

.hawk-exact .hawk-compare-tag.is-left { right: calc(100% - var(--compare) + 12px); }

.hawk-exact .hawk-compare-tag.is-right {
    left: calc(var(--compare) + 12px);
    border-color: rgba(246, 192, 0, .5);
    background: #fff9db;
    color: #846b00;
}

.hawk-exact .hawk-compare-tag.is-right b { color: #846b00; }

.hawk-exact .hawk-exact-history-workbench.is-solo .hawk-history-change {
    top: 14px;
    bottom: auto;
}

@media (max-width: 900px) {
    /* The stacked flow renders ~610px tall; give it room instead of clipping the target node. */
    .hawk-exact .hawk-exact-history-workbench.is-solo { min-height: 786px; }
    .hawk-exact .hawk-exact-history-workbench.is-solo .hawk-history-canvas { min-height: 786px; }
    .hawk-exact .hawk-exact-history-workbench.is-solo .hawk-history-caption,
    .hawk-exact .hawk-exact-history-workbench.is-solo .hawk-history-change { display: none; }
    .hawk-exact .hawk-compare-handle { width: 34px; height: 34px; font-size: 13px; }
    /* Pin the tags to the corners — hugging the divider would push them off a narrow canvas. */
    .hawk-exact .hawk-compare-tag { bottom: 10px; padding: 4px 7px; font-size: 7px; }
    .hawk-exact .hawk-compare-tag.is-left { right: auto; left: 10px; }
    .hawk-exact .hawk-compare-tag.is-right { left: auto; right: 10px; }
}

/* Data Browser + drop canvas — pick a table on the left, it lands as a source node. */
/* Fixed height on purpose: expanding or collapsing a schema must scroll inside the
   sidebar instead of resizing the surface and shifting the whole section. */
.hawk-exact .hawk-browser-layout {
    height: 620px;
    min-height: 620px;
    padding: 12px;
}

.hawk-exact .hawk-browser-layout .vc-main {
    min-height: 0;
}

.hawk-exact .hawk-browser-layout .vc-sidebar {
    height: 100%;
}

.hawk-exact .hawk-drop-canvas.is-over::after {
    content: '';
    position: absolute;
    z-index: 6;
    inset: 10px;
    border: 2px dashed rgba(27, 132, 255, .55);
    border-radius: 14px;
    background: rgba(27, 132, 255, .06);
    pointer-events: none;
}

.hawk-exact .hawk-drop-hint {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 18px 22px;
    border: 1px dashed rgba(181, 195, 214, .9);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity .25s ease;
}

.hawk-exact .hawk-drop-hint-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: rgba(27, 132, 255, .1);
}

.hawk-exact .hawk-drop-hint-mark .hawk-ui-icon {
    width: 16px;
    height: 16px;
    stroke: #1b84ff;
}

.hawk-exact .hawk-drop-hint strong {
    color: var(--hawk-navy);
    font-size: 12px;
    font-weight: 700;
}

.hawk-exact .hawk-drop-hint small {
    max-width: 230px;
    color: #8997a8;
    font-size: 10px;
    line-height: 1.45;
}

.hawk-exact .hawk-drop-canvas.has-nodes .hawk-drop-hint {
    opacity: 0;
}

.hawk-exact .hawk-drop-reset {
    position: absolute;
    z-index: 7;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border: 1px solid rgba(181, 195, 214, .72);
    border-radius: 999px;
    color: var(--hawk-ink-soft, #4b5675);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 6px 18px rgba(13, 32, 64, .07);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, color .22s ease, border-color .22s ease;
}

.hawk-exact .hawk-drop-canvas.has-nodes .hawk-drop-reset {
    opacity: 1;
    pointer-events: auto;
}

.hawk-exact .hawk-drop-reset:hover {
    border-color: rgba(241, 66, 68, .5);
    color: #f14244;
}

@media (max-width: 900px) {
    /* Side by side leaves neither panel usable; stack the browser above the canvas. */
    .hawk-exact .hawk-browser-layout {
        height: 740px;
        min-height: 740px;
        flex-direction: column;
        padding: 10px;
    }

    .hawk-exact .hawk-browser-layout .vc-sidebar {
        flex: 0 0 300px;
        width: 100%;
        height: 300px;
        min-width: 0;
        margin: 0 0 10px;
    }

    .hawk-exact .hawk-browser-layout .vc-sidebar.expanded {
        width: 100%;
        flex-basis: 300px;
    }

    /* Beats the generic ≤640px canvas floor, which is sized for the full-page flows. */
    .hawk-exact .hawk-browser-layout .vc-canvas {
        min-height: 0;
    }

    .hawk-exact .hawk-drop-hint { padding: 14px 16px; }
    .hawk-exact .hawk-drop-hint small { max-width: 200px; }
}

/* ── Component tour modal ─────────────────────────────────────────────────────
   Clicking a node in the gallery opens a centred card: what it does on the left,
   the node itself blown up and breathing in the middle, and a replica of the app's
   right-hand settings panel on the right. Short on purpose — it sells the capability. */
.hawk-exact .hawk-gallery-hint {
    position: absolute;
    right: 0;
    bottom: 12px;
    left: 0;
    z-index: 5;
    margin: 0;
    color: #99a1b7;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

/* The detail card opens inside the Canvas-components canvas, not over the page: it is absolutely
   positioned against that canvas, so the section text and everything around the card stay untouched. */
.hawk-exact .hawk-node-modal {
    position: absolute;
    z-index: 30;
    inset: 0;
    display: grid;
    padding: 10px;
    place-items: center;
}

.hawk-exact .hawk-node-modal[hidden] { display: none; }

/* Kept purely as a click target for closing — it dims nothing. */
.hawk-exact .hawk-node-modal-veil {
    position: absolute;
    inset: 0;
    background: transparent;
}

.hawk-exact .hawk-node-modal-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-height: 100%;
    overflow: auto;
    /* Just enough headroom to keep the close button off the settings panel — the card is
       deliberately tight so the page behind it stays readable around the edges. */
    padding: 36px 24px 24px;
    border: 1px solid rgba(214, 223, 236, .9);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f7f9fc);
    box-shadow: 0 22px 54px rgba(10, 25, 52, .22);
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1.1, .36, 1);
}

.hawk-exact .hawk-node-modal.is-open .hawk-node-modal-card {
    opacity: 1;
    transform: none;
}

.hawk-exact .hawk-node-modal-x {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: grid;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(214, 223, 236, .9);
    border-radius: 50%;
    background: #fff;
    color: #78829d;
    cursor: pointer;
    place-items: center;
    transition: color .18s ease, border-color .18s ease;
}

.hawk-exact .hawk-node-modal-x:hover { border-color: #f8285a; color: #f8285a; }
.hawk-exact .hawk-node-modal-x .hawk-ui-icon { width: 13px; height: 13px; }

.hawk-exact .hawk-node-modal-grid {
    display: grid;
    align-items: center;
    grid-template-areas:
        "stage inspector"
        "copy  copy";
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px 22px;
}

.hawk-exact .hawk-node-modal-stage { grid-area: stage; }
.hawk-exact .hawk-node-inspector { grid-area: inspector; }
.hawk-exact .hawk-node-modal-copy { grid-area: copy; }

/* Bottom — the copy, under both columns */
.hawk-exact .hawk-node-modal-copy {
    max-width: 620px;
    padding-top: 14px;
    border-top: 1px solid #f1f1f4;
}

.hawk-exact .hawk-node-modal-kicker {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vc-node-c1, #1b84ff) 14%, #ffffff);
    color: color-mix(in srgb, var(--vc-node-fg, #1b84ff) 88%, #172033);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
}

.hawk-exact .hawk-node-modal-copy h3 {
    margin: 0 0 8px;
    color: #101828;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.hawk-exact .hawk-node-modal-copy p {
    margin: 0;
    color: #4b5675;
    font-size: 14px;
    line-height: 1.6;
}

/* Top left — the node, blown up with a breathing aura */
.hawk-exact .hawk-node-modal-stage {
    position: relative;
    display: grid;
    min-height: 244px;
    justify-items: center;
    align-content: center;
}

.hawk-exact .hawk-node-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 176px;
    height: 176px;
    margin: -88px 0 0 -88px;
    border: 1px solid color-mix(in srgb, var(--vc-node-c1, #1b84ff) 52%, transparent);
    border-radius: 30px;
    animation: hawk-node-halo 3s ease-out infinite;
}

.hawk-exact .hawk-node-halo.is-slow { animation-delay: 1.5s; }

@keyframes hawk-node-halo {
    0% { opacity: .55; transform: scale(.86) rotate(0deg); }
    70% { opacity: 0; transform: scale(1.5) rotate(22deg); }
    100% { opacity: 0; transform: scale(1.5) rotate(22deg); }
}

.hawk-exact .hawk-node-hero {
    position: relative;
    display: grid;
    width: 176px;
    height: 176px;
    border: 1px solid color-mix(in srgb, var(--vc-node-c1, #557ca4) 62%, #ffffff);
    border-radius: 30px;
    background:
        radial-gradient(circle at 26% 8%, rgba(255, 255, 255, .96), transparent 42%),
        linear-gradient(150deg, #ffffff, #f4f7fb);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 24px 50px color-mix(in srgb, var(--vc-node-c1, #557ca4) 26%, transparent);
    place-items: center;
    animation: hawk-node-float 4.2s ease-in-out infinite;
}

@keyframes hawk-node-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* A slow sweep of colour crossing the tile so the node never sits completely still. */
.hawk-exact .hawk-node-hero-glow {
    position: absolute;
    inset: 1px;
    overflow: hidden;
    border-radius: 29px;
}

.hawk-exact .hawk-node-hero-glow::before {
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--vc-node-c1, #1b84ff) 26%, transparent) 60deg,
        transparent 150deg,
        color-mix(in srgb, var(--vc-node-c3, #a5ccf5) 30%, transparent) 250deg,
        transparent 330deg);
    animation: hawk-node-sweep 7s linear infinite;
    content: '';
}

@keyframes hawk-node-sweep {
    to { transform: rotate(1turn); }
}

.hawk-exact .hawk-node-hero-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.hawk-exact .hawk-node-hero-icon .vc-comp-icon {
    width: 116px;
    height: 116px;
    padding: 20px;
    border-radius: 26px;
}

/* Right — the app's settings panel, rebuilt */
.hawk-exact .hawk-node-inspector {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(214, 223, 236, .95);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(13, 32, 64, .1);
    animation: hawk-node-panel-in .4s cubic-bezier(.22, 1.1, .36, 1) .08s both;
}

@keyframes hawk-node-panel-in {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: none; }
}

.hawk-exact .hawk-node-insp-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px;
    border-bottom: 1px solid #f1f1f4;
}

.hawk-exact .hawk-node-insp-mark .vc-comp-icon {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 11px;
}

.hawk-exact .hawk-node-insp-head strong {
    display: block;
    color: #101828;
    font-size: 13.5px;
    font-weight: 700;
}

.hawk-exact .hawk-node-insp-head small {
    color: #99a1b7;
    font-size: 10.5px;
    font-weight: 600;
}

.hawk-exact .hawk-node-insp-body {
    display: grid;
    padding: 14px 16px;
    gap: 14px;
}

.hawk-exact .hawk-node-insp-title {
    margin-bottom: 7px;
    color: #99a1b7;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hawk-exact .hawk-node-insp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #f1f1f4;
    border-radius: 9px;
    background: #fcfcfd;
    font-size: 12.5px;
}

.hawk-exact .hawk-node-insp-row + .hawk-node-insp-row { margin-top: 6px; }
.hawk-exact .hawk-node-insp-row span { color: #78829d; font-weight: 600; }

.hawk-exact .hawk-node-insp-row b {
    color: #101828;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 700;
}

.hawk-exact .hawk-node-insp-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
    padding: 14px 16px;
    border-top: 1px solid #f1f1f4;
    background: #fcfcfd;
}

.hawk-exact .hawk-node-insp-foot button {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
}

.hawk-exact .hawk-node-insp-foot .is-ghost {
    border-color: #e4e6ef;
    background: #fff;
    color: #78829d;
}

.hawk-exact .hawk-node-insp-foot .is-primary {
    background: #1b84ff;
    color: #fff;
}

@media (max-width: 720px) {
    .hawk-exact .hawk-node-modal { padding: 12px; }
    .hawk-exact .hawk-node-modal-card { padding: 22px 18px; }

    .hawk-exact .hawk-node-modal-grid {
        grid-template-areas: "stage" "inspector" "copy";
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .hawk-exact .hawk-node-modal-stage { min-height: 250px; }
    .hawk-exact .hawk-node-modal-copy h3 { font-size: 22px; }
    .hawk-exact .hawk-node-hero { width: 168px; height: 168px; }
    .hawk-exact .hawk-node-hero-icon .vc-comp-icon { width: 108px; height: 108px; padding: 20px; }
    .hawk-exact .hawk-node-halo { width: 168px; height: 168px; margin: -84px 0 0 -84px; }
}

/* ── Run console streaming ────────────────────────────────────────────────── */
.hawk-exact .hawk-run-output .hawk-run-line {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1.1, .36, 1);
}

.hawk-exact .hawk-run-output .hawk-run-line.is-in {
    opacity: 1;
    transform: none;
}

.hawk-exact .vc-commandbar-run.is-running {
    position: relative;
    overflow: hidden;
}

.hawk-exact .vc-commandbar-run.is-running::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .34) 50%, transparent 80%);
    animation: hawk-run-shine 1.4s linear infinite;
    content: '';
}

@keyframes hawk-run-shine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}