/* Workflows */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #fbfbfb;
    color: #0a0a0a;
    -webkit-font-smoothing: antialiased;
}

/* Top bar */
.top-bar {
    position: sticky; top: 0; z-index: 100;
    padding: 0 40px; height: 60px;
    display: flex; align-items: center; gap: 12px;
    background: #fbfbfb;
}
.back-link {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: #f0f0f0; color: #8a8a8a;
    text-decoration: none; transition: all 0.15s ease;
    /* flex-shrink prevents the back-link from collapsing when the
       top-bar is packed (back + title + name input + buttons).
       Explicit min dimensions defend against any inherited
       padding/gap chewing into its tap area. */
    flex-shrink: 0;
    min-width: 34px;
    min-height: 34px;
}
.back-link svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}
.back-link:hover { background: #e5e5e5; color: #0a0a0a; }
.top-bar-divider { width: 1px; height: 16px; background: #d9d9d9; }
.top-bar-title { font-size: 16px; font-weight: 600; color: #8a8a8a; }
/* Workflow-name input that lives in the top bar while in builder view. */
.top-bar-name-input {
    flex: 0 1 280px; min-width: 0;
    margin-left: 12px; padding: 7px 12px;
    font-size: 14px; font-weight: 600; color: #0a0a0a;
    font-family: inherit;
    background: #f5f5f5; border: 1px solid transparent;
    border-radius: 8px; outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.top-bar-name-input:hover  { background: #ececec; }
.top-bar-name-input:focus  { background: #fff; border-color: #d4d4d4; }
.top-bar-spacer { flex: 1; }
/* Save button placed in the top bar matches .btn-new-workflow's height
   so the swap doesn't shift the bar. */
.top-bar .btn-save { height: 34px; padding: 0 18px; border-radius: 8px; font-size: 13px; }
.btn-new-workflow {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    font-family: inherit; color: #fff; background: #0a0a0a;
    border: none; border-radius: 8px; cursor: pointer;
    transition: background 0.15s ease;
}
.btn-new-workflow:hover { background: #2a2a2a; }

/* Layout */
.page-container { max-width: 700px; margin: 0 auto; padding: 24px 24px 80px; }
.page-container.canvas-active { max-width: 100%; padding: 24px 40px 80px; }

/* View header */
.view-header { margin-bottom: 24px; }
.view-header h1 { font-size: 22px; font-weight: 700; color: #0a0a0a; letter-spacing: -0.02em; margin-bottom: 4px; }
.view-desc { font-size: 13px; color: #8a8a8a; }

/* Page tabs */
.wf-page-tabs {
    display: flex; gap: 2px; background: #f0f0f0;
    border-radius: 10px; padding: 3px; margin-bottom: 24px;
    max-width: 220px;
}
.wf-page-tab {
    flex: 1; padding: 8px 16px; border: none; border-radius: 8px;
    background: transparent; font-size: 13px; font-weight: 600;
    color: #999; cursor: pointer; font-family: inherit;
    transition: all 0.15s; text-align: center;
}
.wf-page-tab:hover { color: #666; }
.wf-page-tab.active { background: #fff; color: #0a0a0a; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.wf-page-tab[data-wfptab="team"].active { background: #0a0a0a; color: #fff; }

.wf-page-panel { display: none; }
.wf-page-panel.active { display: block; }

/* Team workflow items */
.wf-team-card {
    background: #fff; border-radius: 12px; padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); cursor: pointer;
    transition: all 0.15s; border: 1.5px solid #eee;
    display: flex; align-items: center; gap: 16px;
}
.wf-team-card:hover { border-color: #d1d5db; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.wf-team-card-info { flex: 1; min-width: 0; }
.wf-team-card-name { font-size: 15px; font-weight: 600; color: #0a0a0a; margin-bottom: 3px; }
.wf-team-card-meta { font-size: 12px; color: #999; display: flex; align-items: center; gap: 6px; }
.wf-team-card-sharer { color: #0a0a0a; font-weight: 600; }
.wf-team-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Team-tab + button mirrors personal-tab .wf-action-btn.run-btn:
   transparent base with a subtle gray icon, light hover background,
   coral icon when files are staged. The separate .wf-team-go-btn is
   the solid coral play button that appears alongside (same role as
   .wf-action-btn.go-btn on personal). */
.wf-team-run-btn {
    position: relative;
    width: 32px; height: 32px;
    background: transparent;
    color: #d9d9d9;
    border: none; border-radius: 8px;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.wf-team-run-btn:hover { background: #f5f5f5; color: #ff6154; }
.wf-team-run-btn.has-files { color: #ff6154; }
.wf-team-run-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

.wf-team-go-btn {
    width: 32px; height: 32px;
    background: #ff6154; color: #fff;
    border: none; border-radius: 8px;
    cursor: pointer; transition: all 0.15s ease;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wf-team-go-btn:hover { background: #e5554a; }
.wf-team-go-btn svg { width: 14px; height: 14px; fill: #fff; }

/* Shared indicator on workflow cards — matches the unlock tool's password
   sheet header share button (.pw-team-share-btn[data-shared="true"]). */
.wf-action-btn.team-share-btn.shared {
    background: linear-gradient(135deg, #ff6f63 0%, #ff8a7e 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(255, 97, 84, 0.25);
}
.wf-action-btn.team-share-btn.shared:hover {
    background: linear-gradient(135deg, #ff6f63 0%, #ff8a7e 100%);
    color: #fff;
    box-shadow: 0 3px 14px rgba(255, 97, 84, 0.32);
}

.wf-team-top { margin-bottom: 16px; }

/* Builder validation banner — surfaces destructive sequences inline as
   the user builds, mirroring the same rules the backend enforces.
   Floats fixed on the right edge of the viewport so it's always in the
   user's eye line near the Save button, regardless of scroll position
   or which builder mode (simple list vs visual canvas) is active. */
.wf-validation-banner {
    position: fixed;
    top: 112px;            /* 16px clear of the suggestions pill at top: 70px */
    right: 24px;
    width: 340px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    z-index: 800;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    animation: wf-validation-in 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes wf-validation-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 900px) {
    /* Float the validation banner at the TOP of the viewport on
       mobile instead of letting it fall to the bottom of the body
       (the JS appends it to <body>, so going `position: static`
       puts it after every other section). Pinning it just below
       the sticky top-bar keeps errors/suggestions in the user's
       eye line as they scroll the builder. */
    .wf-validation-banner {
        position: fixed;
        top: 68px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100vh - 84px);
        margin: 0;
        animation: wf-validation-in 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    }
}
.wf-validation-section {
    padding: 14px 16px 14px 18px;
    position: relative;
}
.wf-validation-section + .wf-validation-section {
    border-top: 1px solid #f5f5f5;
}
.wf-validation-section::before {
    content: '';
    position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 3px; border-radius: 0 3px 3px 0;
}
.wf-validation-section--error::before { background: #ef4444; }
.wf-validation-section--warn::before  { background: #d97706; }

.wf-validation-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.wf-validation-dismiss {
    margin-left: auto;
    width: 22px; height: 22px;
    background: transparent; border: none; border-radius: 6px;
    color: #b5b5b5; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.wf-validation-dismiss:hover { background: #f3f4f6; color: #374151; }
.wf-validation-dismiss svg { width: 12px; height: 12px; }

/* Floating "show suggestions" reveal — sits just below the Save button
   while there are dismissed suggestions. Errors can't be dismissed so
   this only ever surfaces a warnings count. */
.wf-suggestions-toggle {
    position: fixed; top: 70px; right: 24px;
    z-index: 800;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: #fff;
    color: #d97706;
    border: none;
    border-radius: 50px;
    font-size: 11px; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: background 0.15s, transform 0.1s;
}
.wf-suggestions-toggle:hover { background: #fffbeb; transform: translateY(-1px); }

/* Hide the validation banner + reveal pill while the canvas node-config
   panel is open — they all live in the top-right area and would overlap. */
body.wf-canvas-config-open .wf-validation-banner,
body.wf-canvas-config-open .wf-suggestions-toggle {
    display: none !important;
}
.wf-suggestions-toggle-count {
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #fef3c7; color: #92400e;
    font-size: 10px; font-weight: 700; line-height: 16px;
    text-align: center;
}
.wf-validation-icon {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wf-validation-section--error .wf-validation-icon { background: #fee2e2; color: #b91c1c; }
.wf-validation-section--warn  .wf-validation-icon { background: #fef3c7; color: #92400e; }
.wf-validation-title {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: #6b7280;
}

.wf-validation-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.wf-validation-list li {
    font-size: 13px; line-height: 1.5; color: #374151;
    padding-left: 14px; position: relative;
}
.wf-validation-list li::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 4px; height: 4px; border-radius: 50%;
}
.wf-validation-section--error .wf-validation-list li::before { background: #ef4444; }
.wf-validation-section--warn  .wf-validation-list li::before { background: #d97706; }
.wf-team-note {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; margin-bottom: 16px;
    background: #f9f9f9; border-radius: 10px;
    color: #6b7280; font-size: 12px; line-height: 1.4;
}
.wf-team-note svg { color: #9ca3af; flex-shrink: 0; }
.wf-team-share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; background: #0a0a0a; color: #fff;
    border: none; border-radius: 9px; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.wf-team-share-btn:hover { background: #2a2a2a; }

/* Share workflow modal */
.wf-share-wf-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 2000; display: none; align-items: center; justify-content: center; padding: 16px;
}
.wf-share-wf-overlay.active { display: flex; }
.wf-share-wf-modal {
    background: #fff; border-radius: 20px; width: 400px; max-width: 100%;
    box-shadow: 0 24px 80px rgba(0,0,0,0.18);
    animation: wfShareWfIn 0.25s cubic-bezier(0.2,0.9,0.3,1);
    overflow: hidden;
}
@keyframes wfShareWfIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.wf-share-wf-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px;
}
.wf-share-wf-header h3 { font-size: 17px; font-weight: 800; color: #111; margin: 0; }
.wf-share-wf-close {
    width: 30px; height: 30px; border: none; background: none;
    border-radius: 9px; cursor: pointer; font-size: 18px; color: #ccc;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
}
.wf-share-wf-close:hover { background: #f3f4f6; color: #666; }
.wf-share-wf-list { padding: 0 24px 20px; max-height: 300px; overflow-y: auto; }
.wf-share-wf-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid #f5f5f5;
}
.wf-share-wf-item:last-child { border-bottom: none; }
.wf-share-wf-info { flex: 1; min-width: 0; }
.wf-share-wf-name { font-size: 14px; font-weight: 600; color: #111; }
.wf-share-wf-steps { font-size: 11px; color: #aaa; }
.wf-share-wf-toggle {
    position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer;
}
.wf-share-wf-toggle input { display: none; }
.wf-share-wf-track {
    position: absolute; inset: 0; background: #e0e0e0; border-radius: 11px; transition: background 0.2s;
}
.wf-share-wf-track::before {
    content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px;
    background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.wf-share-wf-toggle input:checked + .wf-share-wf-track { background: #4f46e5; }
.wf-share-wf-toggle input:checked + .wf-share-wf-track::before { transform: translateX(18px); }
.wf-share-wf-toggle.loading { opacity: 0.4; pointer-events: none; }
.wf-share-wf-empty { text-align: center; padding: 24px 16px; color: #aaa; font-size: 13px; }
/* Match the per-tool .back-button pattern: gray text, padded squircle SVG
   that lightens on hover. No button-level background or border. */
.btn-back {
    background: none;
    color: #8e96a7;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease;
}
.btn-back:hover {
    background: none;
    color: #374151;
    box-shadow: none;
    transform: none;
}
.btn-back svg {
    width: 18px;
    height: 18px;
    background: #f9f9f9;
    padding: 6px;
    border-radius: 8px;
    box-sizing: content-box;
    transition: background 0.15s ease;
}
.btn-back:hover svg {
    background: #f0f0f0;
}

/* ==================== WORKFLOW LIST ==================== */
.workflow-list { display: flex; flex-direction: column; gap: 6px; }

.workflow-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; background: #fff; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: box-shadow 0.15s ease; cursor: pointer;
}
.workflow-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.workflow-card-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: #f5f5f5; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; color: #8a8a8a;
}

.workflow-card-info { flex: 1; min-width: 0; }
.workflow-card-name { font-size: 14px; font-weight: 600; color: #0a0a0a; }
.workflow-card-steps { font-size: 12px; color: #b5b5b5; margin-top: 2px; }

.workflow-card-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.wf-pill { font-size: 11px; font-weight: 500; color: #8a8a8a; background: #f5f5f5; padding: 3px 8px; border-radius: 4px; }
.wf-pill-arrow { color: #d9d9d9; display: flex; align-items: center; }

.workflow-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.wf-action-btn {
    width: 32px; height: 32px; border-radius: 8px;
    border: none; background: transparent; color: #d9d9d9;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: all 0.15s ease;
}
.wf-action-btn:hover { background: #f5f5f5; color: #0a0a0a; }
.wf-action-btn.run-btn { position: relative; }
.wf-action-btn.run-btn:hover { color: #ff6154; }
.wf-action-btn.run-btn.has-files { color: #ff6154; }
.wf-action-btn.delete:hover { color: #ef4444; }
.wf-action-btn.more-btn:hover { color: #0a0a0a; }
.wf-action-btn svg { width: 16px; height: 16px; }
.wf-action-btn.go-btn { background: #ff6154; color: #fff; }
.wf-action-btn.go-btn:hover { background: #e5554a; color: #fff; }
.wf-action-btn.go-btn svg { fill: #fff; }
.wf-file-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #ff6154; color: #fff;
    font-size: 9px; font-weight: 700; line-height: 16px;
    text-align: center; pointer-events: none;
}

/* Upload bottom sheet — same shape as dashboard's .upload-* sheet */
.wf-up-overlay {
    position: fixed; inset: 0; background: rgba(10,10,10,0.25);
    z-index: 1999; opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.wf-up-overlay.visible { opacity: 1; visibility: visible; }
.wf-up-sheet {
    position: fixed; bottom: 0; left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%; max-width: 500px;
    background: #fff;
    border-radius: 24px 24px 0 0;
    z-index: 2000;
    transition: transform 0.4s cubic-bezier(0.32,0.72,0,1), box-shadow 0.4s ease;
    box-shadow: none;
}
.wf-up-sheet.visible { transform: translateX(-50%) translateY(0); box-shadow: 0 -8px 40px rgba(0,0,0,0.12); }
.wf-up-handle { width: 36px; height: 4px; background: #e5e5e5; border-radius: 2px; margin: 12px auto 0; }
.wf-up-content { padding: 22px 28px 36px; }
.wf-up-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.wf-up-header h3 { font-size: 16px; font-weight: 600; color: #0a0a0a; letter-spacing: -0.02em; }
.wf-up-close {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: #b5b5b5;
    border-radius: 8px; transition: all 0.15s;
}
.wf-up-close:hover { background: #f5f5f5; color: #0a0a0a; }
.wf-up-drop {
    background: #f9f9f9; border-radius: 12px;
    padding: 44px 24px; display: flex; flex-direction: column;
    align-items: center; gap: 10px; transition: all 0.2s;
    border: 1px solid transparent;
}
.wf-up-drop.drag-over { background: #fff4f3; border-color: #ff6154; }
.wf-up-icon-wrap {
    width: 52px; height: 52px; border-radius: 14px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    color: #6b7280; margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wf-up-text { font-size: 14px; color: #6b7280; font-weight: 500; }
.wf-up-browse {
    background: none; border: none; color: #0a0a0a; font-weight: 600;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(10,10,10,0.3);
    font-size: 14px; transition: text-decoration-color 0.15s;
}
.wf-up-browse:hover { text-decoration-color: #0a0a0a; }
.wf-up-hint { font-size: 12px; color: #b5b5b5; }
.wf-up-staged { margin-top: 18px; }
.wf-up-staged-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wf-up-staged-title { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.wf-up-staged-clear {
    font-size: 11px; font-weight: 500; color: #b5b5b5;
    background: none; border: none; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.wf-up-staged-clear:hover { color: #ef4444; }
.wf-up-staged-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 180px; overflow-y: auto;
    margin-right: -10px; padding-right: 6px;
}
/* Match the dashboard's custom scrollbar (gray-on-light, rounded). */
.wf-up-staged-list::-webkit-scrollbar { width: 6px; height: 6px; }
.wf-up-staged-list::-webkit-scrollbar-track { background: #fff; }
.wf-up-staged-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
.wf-up-staged-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.wf-up-staged-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; background: #f9f9f9; border-radius: 8px; font-size: 12px;
}
.wf-up-staged-icon {
    width: 28px; height: 28px; border-radius: 6px;
    background: #fef2f2; color: #ef4444;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 10px; font-weight: 700;
    overflow: hidden;
}
.wf-up-staged-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.wf-up-staged-name {
    font-weight: 500; color: #0a0a0a; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-up-staged-meta { font-size: 10.5px; color: #b5b5b5; white-space: nowrap; }
.wf-up-staged-pages { color: #6b7280; }
.wf-up-staged-size { color: #b5b5b5; }
.wf-up-staged-remove {
    width: 22px; height: 22px; border-radius: 5px;
    background: none; border: none; color: #b5b5b5;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; transition: all 0.15s;
}
.wf-up-staged-remove:hover { background: #fef2f2; color: #ef4444; }

/* File More Bottom Sheet — exact copy of dashboard's .wf-file-more-* */
.wf-file-more-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35); z-index: 2000;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px;
    animation: modalFadeIn 0.15s ease;
}
.wf-file-more-overlay.hidden { display: none !important; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetSlideUp {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}
.wf-file-more-sheet {
    width: 100%; max-width: 340px;
    display: flex; flex-direction: column; gap: 8px;
    animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.wf-file-more-group {
    background: white; border-radius: 16px; overflow: hidden;
}
.wf-file-more-action {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border: none; background: none;
    cursor: pointer; font-family: inherit; text-align: left;
    transition: background 0.15s;
}
.wf-file-more-action:hover { background: #f9fafb; }
.wf-file-more-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: #f3f4f6; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.wf-file-more-icon svg { color: #374151; }
.wf-file-more-icon.danger { background: #fef2f2; }
.wf-file-more-icon.danger svg { color: #ef4444; }
.wf-file-more-text { display: flex; flex-direction: column; gap: 1px; }
.wf-file-more-label { font-size: 0.92rem; font-weight: 600; color: #1f2937; }
.wf-file-more-danger .wf-file-more-label { color: #ef4444; }
.wf-file-more-desc { font-size: 0.75rem; color: #9ca3af; }
.wf-file-more-divider { height: 1px; background: #f3f4f6; margin: 0 18px; }
.wf-file-more-cancel {
    width: 100%; padding: 16px; border: none; border-radius: 16px;
    background: white; color: #6b7280;
    font-size: 0.92rem; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: all 0.15s;
}
.wf-file-more-cancel:hover { background: #f9fafb; color: #374151; }

/* Empty */
.empty-state {
    text-align: center; padding: 64px 24px;
    background: #fff; border-radius: 14px;
}
.empty-state svg { margin-bottom: 16px; }
.empty-state h3 { font-size: 17px; font-weight: 700; color: #0a0a0a; margin-bottom: 6px; }
.empty-state p { font-size: 13px; color: #8a8a8a; max-width: 320px; margin: 0 auto 24px; line-height: 1.5; }
.btn-create-first {
    padding: 10px 24px; font-size: 13px; font-weight: 600;
    font-family: inherit; color: #fff; background: #0a0a0a;
    border: none; border-radius: 8px; cursor: pointer;
}
.btn-create-first:hover { background: #2a2a2a; }

/* Pro gate */
.pro-gate {
    text-align: center; padding: 48px 32px;
    background: #0a0a0a; border-radius: 16px; color: #fff;
}
.pro-gate-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(255,255,255,0.06); color: #ff6154;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.pro-gate h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.pro-gate p { font-size: 13px; color: rgba(255,255,255,0.35); max-width: 360px; margin: 0 auto 24px; line-height: 1.5; }
.btn-upgrade {
    display: inline-block; padding: 10px 24px; font-size: 13px;
    font-weight: 600; font-family: inherit; color: #0a0a0a;
    background: #fff; border: none; border-radius: 8px;
    text-decoration: none;
}
.btn-upgrade:hover { background: rgba(255,255,255,0.85); }

/* ==================== BUILDER ==================== */
.builder-section { margin-bottom: 24px; }
.builder-section > label {
    display: block; font-size: 13px; font-weight: 500;
    color: #0a0a0a; margin-bottom: 6px;
}

.builder-name-row {
    display: flex; align-items: flex-end; gap: 10px; margin-bottom: 28px;
}
.builder-name-field { flex: 1; max-width: 320px; }
.builder-name-field label {
    display: block; font-size: 13px; font-weight: 500;
    color: #0a0a0a; margin-bottom: 6px;
}
.builder-name-field input {
    width: 100%; padding: 10px 14px; font-size: 14px;
    font-family: inherit; color: #0a0a0a; background: #fff;
    border: 1.5px solid #e5e5e5; border-radius: 10px; outline: none;
}
.builder-name-field input:focus { border-color: #0a0a0a; }
.builder-name-field input::placeholder { color: #d9d9d9; }

.builder-section input[type="text"] {
    width: 100%; padding: 10px 14px; font-size: 14px;
    font-family: inherit; color: #0a0a0a; background: #fff;
    border: 1.5px solid #e5e5e5; border-radius: 10px; outline: none;
}
.builder-section input[type="text"]:focus { border-color: #0a0a0a; }
.builder-section input[type="text"]::placeholder { color: #d9d9d9; }

.steps-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.steps-count { font-size: 12px; color: #b5b5b5; }

/* Steps */
.steps-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; }

.step-item {
    padding: 14px 16px; background: #fff;
    border: 1px solid #f0f0f0;
}
.step-item-row {
    display: flex; align-items: center; gap: 12px;
}
.step-item:first-child { border-radius: 10px 10px 0 0; }
.step-item:last-child { border-radius: 0 0 10px 10px; }
.step-item:only-child { border-radius: 10px; }
.step-item:not(:first-child) { border-top: none; }

.step-number {
    width: 24px; height: 24px; min-width: 24px; border-radius: 50%;
    background: #f0f0f0; display: flex; align-items: center;
    justify-content: center; font-size: 11px; font-weight: 700;
    color: #8a8a8a; flex-shrink: 0;
}

.step-icon { width: 32px; height: 32px; flex-shrink: 0; }
.step-icon img { width: 32px; height: 32px; border-radius: 6px; }

.step-info { flex: 1; min-width: 0; }
.step-name { font-size: 13px; font-weight: 600; color: #0a0a0a; }
.step-desc { font-size: 11px; color: #b5b5b5; margin-top: 1px; }

/* Config section — always below the step row.
   margin-left + the parent .step-item's 16px left padding put the
   border-left at column 27 from the item's outer edge, which centers
   it directly under the 24px circle's centre (16 + 12 = 28). The
   padding-left compensates so the content column doesn't shift. */
.step-config-section {
    padding: 12px 0 2px 49px;
    margin-left: 11px;
    border-left: 2px solid #f0f0f0;
    margin-top: 8px;
}
.step-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.step-config-field { display: flex; flex-direction: column; gap: 4px; }
.step-config-field-label {
    font-size: 11px; font-weight: 500; color: #8a8a8a;
    letter-spacing: 0.01em;
}

.step-config-field input[type="text"],
.step-config-field input[type="password"] {
    padding: 8px 12px; font-size: 12px; font-family: inherit;
    border: 1.5px solid #e5e5e5; border-radius: 8px; outline: none;
    background: #fff; color: #0a0a0a; transition: border-color 0.15s ease;
    width: 100%;
}
.step-config-field input:focus { border-color: #0a0a0a; }

/* Toggle row — horizontal strip for boolean options */
.step-toggle-row {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.step-toggle-row-label {
    font-size: 11px; font-weight: 500; color: #8a8a8a;
    margin-bottom: 2px;
}

/* Custom dropdown */
.custom-dropdown { position: relative; }
.cdd-trigger {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; font-size: 12px; font-family: inherit;
    border: 1.5px solid #e5e5e5; border-radius: 8px;
    background: #fff; color: #0a0a0a; cursor: pointer;
    transition: border-color 0.15s ease; user-select: none;
    width: 100%;
}
.cdd-trigger:hover { border-color: #d0d0d0; }
.custom-dropdown.open .cdd-trigger { border-color: #0a0a0a; }
.cdd-trigger svg { color: #b5b5b5; flex-shrink: 0; transition: transform 0.15s ease; }
.custom-dropdown.open .cdd-trigger svg { transform: rotate(180deg); }
.cdd-value { flex: 1; text-transform: capitalize; }
.cdd-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1.5px solid #e5e5e5; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 50;
    max-height: 200px; overflow-y: auto; padding: 4px;
    min-width: 140px;
}
.custom-dropdown.open .cdd-menu { display: block; }
.cdd-option {
    padding: 8px 12px; font-size: 12px; color: #0a0a0a;
    border-radius: 6px; cursor: pointer; transition: background 0.1s ease;
    text-transform: capitalize;
}
.cdd-option:hover { background: #f5f5f5; }
.cdd-option.selected { background: #f0f0f0; font-weight: 600; }

/* Preset picker — scope tag pinned to the right edge of each option */
.cdd-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wf-preset-tag {
    flex-shrink: 0; padding: 2px 7px;
    font-size: 10px; font-weight: 600; line-height: 1.4;
    border-radius: 999px;
    text-transform: none; letter-spacing: 0.02em;
}
.wf-preset-tag--personal { background: #f3f4f6; color: #6b7280; }
.wf-preset-tag--team     { background: #fff4f3; color: #ff6154; }
.wf-preset-empty {
    display: inline-block; padding: 8px 12px;
    font-size: 12px; font-weight: 500; color: #6b7280;
    text-decoration: none; border: 1px dashed #e5e5e5;
    border-radius: 8px; transition: all 0.15s;
}
.wf-preset-empty:hover { color: #ff6154; border-color: #ff6154; background: #fff4f3; }

/* Canvas config custom dropdown */
.canvas-config-body .custom-dropdown { margin-top: 4px; }
.canvas-config-body .cdd-trigger { padding: 9px 14px; font-size: 13px; }
.canvas-config-body .cdd-option { padding: 9px 14px; font-size: 13px; }
.canvas-config-body .cdd-menu { min-width: 160px; }

/* Toggle switch */
.step-toggle {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
    padding: 5px 10px; border-radius: 6px; transition: background 0.15s ease;
}
.step-toggle:hover { background: #f5f5f5; }
.step-toggle input { display: none; }
.step-toggle-track {
    width: 30px; height: 17px; background: #e0e0e0; border-radius: 9px;
    position: relative; transition: background 0.2s ease; flex-shrink: 0;
}
.step-toggle-thumb {
    position: absolute; top: 50%; left: 2.5px; transform: translateY(-50%);
    width: 12px; height: 12px; background: #fff; border-radius: 50%;
    transition: left 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.step-toggle input:checked ~ .step-toggle-track { background: #0a0a0a; }
.step-toggle input:checked ~ .step-toggle-track .step-toggle-thumb { left: 15.5px; }
.step-toggle-label { font-size: 12px; color: #555; white-space: nowrap; font-weight: 500; }

.step-remove {
    width: 28px; height: 28px; border-radius: 6px;
    border: none; background: transparent; color: #d9d9d9;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: all 0.15s ease; flex-shrink: 0;
}
.step-remove:hover { background: #fef2f2; color: #ef4444; }
.step-remove svg { width: 14px; height: 14px; }

.btn-add-step {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%; padding: 10px;
    font-size: 13px; font-weight: 500; font-family: inherit;
    color: #b5b5b5; background: transparent;
    border: 1.5px dashed #e5e5e5; border-radius: 10px;
    cursor: pointer; transition: all 0.15s ease;
}
.btn-add-step:hover { border-color: #0a0a0a; color: #0a0a0a; }

/* Tool picker */
.tool-picker {
    background: #fff; border: 1px solid #f0f0f0;
    border-radius: 12px; padding: 16px; margin-bottom: 16px;
}
.tool-picker-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #0a0a0a;
}
.tool-picker-close {
    width: 28px; height: 28px; border-radius: 6px; border: none;
    background: #f5f5f5; color: #8a8a8a;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tool-picker-close:hover { background: #e5e5e5; color: #0a0a0a; }

.tool-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 4px; }
.tool-pick-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 12px 8px; border-radius: 8px;
    cursor: pointer; transition: background 0.15s ease; text-align: center;
}
.tool-pick-item:hover { background: #f5f5f5; }
.tool-pick-item img { width: 32px; height: 32px; border-radius: 6px; }
.tool-pick-item span { font-size: 11px; font-weight: 500; color: #0a0a0a; line-height: 1.3; }

.btn-save {
    padding: 10px 24px; font-size: 13px; font-weight: 600;
    font-family: inherit; color: #fff; background: #0a0a0a;
    border: none; border-radius: 10px; cursor: pointer;
    white-space: nowrap; flex-shrink: 0; height: 42px;
    transition: background 0.15s ease;
}

/* Builder-header team-share button — sits next to the Save button.
   Inherits the expand-on-hover pattern from the unlock tool's
   .pw-team-share-btn: icon-only when idle, label slides in on hover.
   Shared state flips to the coral gradient (matching the team feed). */
.builder-team-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    margin-right: 8px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff8f8 0%, #ffffff 100%);
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, color 0.25s ease;
}
.builder-team-share-btn .bts-icon {
    flex-shrink: 0; width: 18px; height: 18px; stroke: currentColor;
}
.builder-team-share-btn .bts-label {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
    transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.18s ease,
                margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.builder-team-share-btn:hover .bts-label,
.builder-team-share-btn:focus-visible .bts-label {
    max-width: 90px;
    opacity: 1;
    margin-left: 6px;
    padding-right: 4px;
}
.builder-team-share-btn:hover {
    border-color: #d8d8d8;
    color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.builder-team-share-btn.shared {
    background: linear-gradient(135deg, #ff6f63 0%, #ff8a7e 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(255, 97, 84, 0.25);
}
.builder-team-share-btn.shared:hover {
    color: #fff;
    box-shadow: 0 3px 14px rgba(255, 97, 84, 0.32);
}
.builder-team-share-btn:disabled,
.builder-team-share-btn.is-loading {
    opacity: 0.65;
    cursor: progress;
}
.btn-save:hover:not(:disabled) { background: #2a2a2a; }
.btn-save:disabled { opacity: 0.3; cursor: not-allowed; }

/* Mode toggle */
.builder-title-row { display: flex; align-items: center; justify-content: space-between; }
.builder-mode-toggle { display: flex; background: #f0f0f0; border-radius: 8px; padding: 3px; gap: 2px; }
.mode-btn {
    width: 32px; height: 32px; border-radius: 6px;
    border: none; background: transparent; color: #b5b5b5;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mode-btn:hover { color: #8a8a8a; }
.mode-btn.active { background: #fff; color: #0a0a0a; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* ==================== CANVAS ==================== */
.canvas-container {
    display: flex; border: 1px solid #f0f0f0; border-radius: 12px;
    overflow: hidden; background: #fff; min-height: calc(100vh - 280px);
}
.canvas-sidebar {
    width: 170px; border-right: 1px solid #f0f0f0; padding: 16px;
    flex-shrink: 0; background: #fafafa; overflow-y: auto;
}
.canvas-sidebar-label {
    font-size: 10px; font-weight: 600; color: #b5b5b5;
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px;
}
.canvas-tool-list { display: flex; flex-direction: column; gap: 2px; }
.canvas-tool-drag {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px; cursor: grab;
    transition: background 0.15s ease; user-select: none;
}
.canvas-tool-drag:hover { background: #f0f0f0; }
.canvas-tool-drag:active { cursor: grabbing; opacity: 0.6; }
.canvas-tool-drag img { width: 24px; height: 24px; border-radius: 4px; pointer-events: none; }
.canvas-tool-drag span { font-size: 11px; font-weight: 500; color: #0a0a0a; pointer-events: none; }

.canvas-area {
    flex: 1; position: relative;
    background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
    background-size: 20px 20px;
    min-height: calc(100vh - 280px);
    overflow: auto;            /* allow scrolling when nodes flow below */
}
/* The SVG and the nodes container are sized to the inner scroll content
   (set in renderCanvas()), not to the visible viewport, so connections
   stay drawn through the full vertical extent of the workflow. */
.canvas-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.canvas-svg path { fill: none; stroke: #d9d9d9; stroke-width: 2; stroke-dasharray: 6 4; }
.canvas-svg path.active { stroke: #ff6154; stroke-dasharray: none; stroke-width: 2; }

.canvas-nodes {
    position: relative; z-index: 2; width: 100%;
    min-height: 100%;
}

.canvas-node {
    position: absolute; background: #fff; border: 1.5px solid #e5e5e5;
    border-radius: 10px; padding: 10px 16px; display: flex;
    align-items: center; gap: 10px; cursor: move;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04); user-select: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    z-index: 10;
}
.canvas-node:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.canvas-node.selected { border-color: #ff6154; box-shadow: 0 0 0 3px rgba(255,97,84,0.08); }
.canvas-node img { width: 28px; height: 28px; border-radius: 6px; pointer-events: none; }
.canvas-node span { font-size: 13px; font-weight: 600; color: #0a0a0a; pointer-events: none; white-space: nowrap; }

.canvas-node-start {
    background: #f5f5f5; border-color: #e5e5e5; cursor: default;
    padding: 8px 20px; border-radius: 20px;
}
.canvas-node-start span { font-size: 12px; font-weight: 600; color: #8a8a8a; }

.canvas-node-dot {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: #d9d9d9; border: 2px solid #fff; cursor: crosshair; z-index: 20;
}
.canvas-node-dot.dot-out { bottom: -6px; left: 50%; transform: translateX(-50%); }
.canvas-node-dot.dot-in { top: -6px; left: 50%; transform: translateX(-50%); }
.canvas-node-dot:hover { background: #ff6154; }

.canvas-node-delete {
    position: absolute; top: -8px; right: -8px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #ef4444; color: #fff; border: 2px solid #fff;
    cursor: pointer; display: none; align-items: center;
    justify-content: center; z-index: 30;
}
.canvas-node:hover .canvas-node-delete { display: flex; }
.canvas-hint {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 13px; color: #d9d9d9; pointer-events: none; text-align: center;
}

.canvas-config {
    width: 260px; flex-shrink: 0;
    background: #fff; border-left: 1px solid #f0f0f0;
    padding: 16px; overflow-y: auto;
}
.canvas-config-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0;
}
.canvas-config-header span {
    font-size: 13px; font-weight: 600; color: #0a0a0a;
}
.canvas-config-close {
    width: 24px; height: 24px; border-radius: 6px; border: none;
    background: #f5f5f5; color: #8a8a8a;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.canvas-config-close:hover { background: #e5e5e5; color: #0a0a0a; }
.canvas-config-body { display: flex; flex-direction: column; gap: 14px; }
.canvas-config-body .config-group {
    display: flex; flex-direction: column; gap: 5px;
}
.canvas-config-body label:not(.step-toggle) {
    display: block; font-size: 11px; font-weight: 500;
    color: #8a8a8a; letter-spacing: 0.01em;
}
.canvas-config-body input[type="text"],
.canvas-config-body input[type="password"] {
    width: 100%; padding: 9px 14px; font-size: 13px;
    font-family: inherit; border: 1.5px solid #e5e5e5;
    border-radius: 8px; outline: none; background: #fff; color: #0a0a0a;
    transition: border-color 0.15s ease;
}
.canvas-config-body input[type="text"]:focus,
.canvas-config-body input[type="password"]:focus { border-color: #0a0a0a; }
.canvas-config-body .config-toggles {
    display: flex; flex-direction: column; gap: 4px; margin-top: 2px;
}
.canvas-config-body .config-no-options {
    font-size: 13px; color: #b5b5b5; padding: 8px 0;
}

/* ==================== RUN VIEW ==================== */
.run-upload {
    background: #fff; border-radius: 14px; padding: 6px;
}
.run-upload-inner {
    border: 2px dashed #e5e5e5; border-radius: 10px;
    padding: 48px 24px; text-align: center;
    transition: all 0.15s ease; cursor: pointer;
}
.run-upload-inner:hover { border-color: #d9d9d9; }
.run-upload-inner.dragover { border-color: #ff6154; background: #fff4f3; }
.run-upload-inner p { font-size: 14px; color: #8a8a8a; margin: 12px 0 4px; }
.run-browse { color: #ff6154; font-weight: 500; cursor: pointer; }
.run-upload-hint { font-size: 12px; color: #d9d9d9; }

.run-progress {
    background: transparent; padding: 0;
}

/* ===== Title + thick bar + percentage layout =====================
   Centered both horizontally and vertically in the run view's
   available space. The runProgress wrapper provides the column;
   .run-stage is the centered child. */
#runProgress {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}
.run-stage {
    max-width: 480px; width: 100%;
    margin: 0 auto;
    padding: 32px 24px;
    text-align: center;
}

/* ── Title + big animated bar + percentage ────────────────────────
   Figma-style focused processing screen. The bar is the visual
   centerpiece; percentage sits below it; small subtitle below that. */
.run-stage-title {
    font-size: 24px; font-weight: 600; color: #0a0a0a;
    letter-spacing: -0.01em; margin-bottom: 36px;
}
.run-stage-bar {
    width: 100%; max-width: 480px;
    height: 20px; background: #f1f1f1;
    border-radius: 999px; overflow: hidden;
    margin: 0 auto;
    position: relative;
}
.run-stage-bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #ff8a7e 0%, #ff6154 100%);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
/* Animated stripe shimmer sliding across the fill while running */
.run-stage-bar-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: run-bar-shimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes run-bar-shimmer { 100% { transform: translateX(100%); } }
.run-progress.is-complete .run-stage-bar-fill::after,
.run-progress.is-failed .run-stage-bar-fill::after {
    animation: none; opacity: 0;
}
.run-stage-percent {
    margin-top: 18px;
    font-size: 28px; font-weight: 600; color: #0a0a0a;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}
.run-progress.is-complete .run-stage-bar-fill {
    background: linear-gradient(90deg, #34d399 0%, #16a34a 100%);
}
.run-progress.is-failed .run-stage-bar-fill {
    background: linear-gradient(90deg, #fca5a5 0%, #ef4444 100%);
}

.run-stage-subtitle {
    margin-top: 18px;
    font-size: 13px; font-weight: 500; color: #9ca3af;
}
.run-stage-meta {
    margin-top: 6px;
    font-size: 12px; color: #c0c0c0;
    font-variant-numeric: tabular-nums;
    min-height: 16px;
}

/* Freeze the sonar on terminal states; the result hero takes over */
.run-progress.is-complete .run-art-halo,
.run-progress.is-failed .run-art-halo,
.run-progress.is-complete .run-sonar-core,
.run-progress.is-failed .run-sonar-core,
.run-progress.is-complete .run-sonar-ring,
.run-progress.is-failed .run-sonar-ring {
    animation: none;
}
.run-progress.is-complete .run-sonar-ring,
.run-progress.is-failed .run-sonar-ring {
    opacity: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.run-complete, .run-error {
    background: transparent; padding: 0;
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - 200px);
}

/* Result hero — same vertical rhythm as the running stage so the screens
   feel like the same surface, not three different layouts. */
.run-result-art {
    position: relative;
    width: 220px; height: 220px;
    margin: 0 auto 28px;
    display: flex; align-items: center; justify-content: center;
}
.run-result-halo {
    position: absolute; inset: 0;
}
.run-result-art--success .run-result-halo {
    background: radial-gradient(closest-side, rgba(22, 163, 74, 0.18) 0%, rgba(22, 163, 74, 0) 70%);
    animation: art-halo-pulse 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.run-result-art--error .run-result-halo {
    background: radial-gradient(closest-side, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0) 70%);
}
.run-result-circle {
    position: relative;
    width: 96px; height: 96px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 0 6px rgba(255, 255, 255, 0.6);
    animation: result-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.run-result-art--success .run-result-circle {
    background: linear-gradient(135deg, #34d399 0%, #16a34a 100%);
}
.run-result-art--error .run-result-circle {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}
@keyframes result-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

.run-result-actions {
    margin-top: 28px;
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
}
.btn-download {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 22px; font-size: 13px; font-weight: 600;
    font-family: inherit; color: #fff; background: #0a0a0a;
    border: none; border-radius: 10px; cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.btn-download:hover { background: #2a2a2a; transform: translateY(-1px); }
.btn-secondary {
    padding: 12px 22px; font-size: 13px; font-weight: 600;
    font-family: inherit; color: #6b7280; background: transparent;
    border: 1px solid #ececec; border-radius: 10px; cursor: pointer;
    transition: all 0.15s;
}
.btn-secondary:hover { background: #f5f5f5; color: #0a0a0a; border-color: #d8d8d8; }
.btn-retry {
    padding: 12px 22px; font-size: 13px; font-weight: 600;
    font-family: inherit; color: #0a0a0a; background: #f5f5f5;
    border: none; border-radius: 10px; cursor: pointer;
    transition: background 0.15s;
}
.btn-retry:hover { background: #ebebeb; }

/* Shimmer */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

/* Skeleton card that mirrors .workflow-card geometry exactly so the
   layout doesn't shift once real cards land. Same padding, same gap,
   same icon/info/actions split. */
.shimmer-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.shimmer-card-icon,
.shimmer-line,
.shimmer-pill,
.shimmer-action {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
    background-size: 800px 100%;
    animation: shimmer 1.6s ease infinite;
}
.shimmer-card-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
}
.shimmer-card-info { flex: 1; min-width: 0; }
.shimmer-line { height: 12px; border-radius: 5px; }
.shimmer-line--name { width: 60%; }
.shimmer-line--meta { width: 28%; height: 10px; margin-top: 6px; }
.shimmer-card-pills { display: flex; gap: 4px; margin-top: 8px; }
.shimmer-pill { height: 18px; border-radius: 4px; }
.shimmer-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.shimmer-action { width: 32px; height: 32px; border-radius: 8px; }

/* Tabs skeleton — single block matching the .wf-page-tabs footprint so
   the row holds its place during initial load. */
.wf-page-tabs-shimmer {
    width: 220px; height: 36px;
    border-radius: 10px;
    margin-bottom: 24px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
    background-size: 800px 100%;
    animation: shimmer 1.6s ease infinite;
}

@media (max-width: 600px) {
    .top-bar { padding: 0 20px; }
    .page-container { padding: 20px 16px 60px; }
    .tool-picker-grid { grid-template-columns: repeat(2, 1fr); }
    .builder-name-row { flex-direction: column; align-items: stretch; }
    .builder-name-field { max-width: 100%; }
    .step-config-grid { grid-template-columns: 1fr; }
    .step-config-section { padding-left: 20px; margin-left: 12px; }
    .canvas-container { flex-direction: column; }
    .canvas-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #f0f0f0; }
    .canvas-sidebar .canvas-tool-list { flex-direction: row; flex-wrap: wrap; }
    .canvas-config { width: 100%; border-left: none; border-top: 1px solid #f0f0f0; }
}

/* ===== Bottom-right processing sheet — exact copy of dashboard's .proc-* ===== */
.proc-sheet {
    position: fixed; bottom: 20px; right: 20px;
    width: 360px; background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 500;
    font-family: 'DM Sans', -apple-system, sans-serif;
    transform: translateY(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}
.proc-sheet.minimized .proc-sheet-body { max-height: 0; opacity: 0; overflow: hidden; }
.proc-sheet.minimized { box-shadow: 0 -1px 4px rgba(0,0,0,0.06); }
.proc-sheet.minimized .proc-sheet-btn svg { transform: rotate(180deg); }

.proc-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 12px 11px 16px; cursor: pointer; user-select: none;
}
.proc-sheet-title { font-size: 13px; font-weight: 600; color: #0a0a0a; }
.proc-header-right { display: flex; align-items: center; gap: 2px; }
.proc-header-bar {
    width: 0; height: 4px; background: #f0f0f0; border-radius: 2px;
    overflow: hidden; opacity: 0;
    transition: width 0.25s ease, opacity 0.2s ease;
}
.proc-header-bar-fill {
    height: 100%; background: #ff6154; border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.proc-sheet.minimized .proc-header-bar { width: 80px; opacity: 1; }
.proc-sheet.completed .proc-header-bar-fill { background: #16a34a; }
.proc-sheet.failed .proc-header-bar-fill { background: #ef4444; }
.proc-sheet-btn {
    width: 30px; height: 30px; border: none; background: none;
    color: #9ca3af; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.proc-sheet-btn svg { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.proc-sheet-btn:hover { background: #f0f0f0; color: #0a0a0a; }

.proc-sheet-body {
    max-height: 200px; opacity: 1;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.proc-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
.proc-item-icon {
    width: 32px; height: 32px; border-radius: 6px;
    background: #f9fafb; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #9ca3af;
}
.proc-item-content { flex: 1; min-width: 0; }
.proc-item-name {
    font-size: 13px; font-weight: 500; color: #0a0a0a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.proc-item-status {
    font-size: 11px; color: #9ca3af; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proc-item-right {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
}
.proc-item-ring { width: 22px; height: 22px; }
.proc-item-ring svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.proc-ring-bg { stroke: #f0f0f0; }
.proc-ring-fill {
    stroke: #ff6154; stroke-linecap: round;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.proc-sheet.completed .proc-ring-fill { stroke: #16a34a; }
.proc-sheet.failed .proc-ring-fill { stroke: #ef4444; }
.proc-item-check {
    width: 22px; height: 22px; border-radius: 50%;
    background: #dcfce7; color: #16a34a;
    display: flex; align-items: center; justify-content: center;
}
.proc-item-fail {
    width: 22px; height: 22px; border-radius: 50%;
    background: #fef2f2; color: #ef4444;
    display: flex; align-items: center; justify-content: center;
}
.proc-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 16px 12px; min-height: 28px;
}
.proc-time { font-size: 11px; color: #b5b5b5; font-variant-numeric: tabular-nums; }
.proc-download-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; font-size: 12px; font-weight: 600; font-family: inherit;
    color: #fff; background: #0a0a0a; border: none; border-radius: 7px;
    cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.proc-download-btn:hover { background: #2a2a2a; }

/* ============================================================
   MOBILE & TABLET OVERRIDES — added 2026-05-07
   The page has a busy top bar (back, title, name input, mode
   toggle, new/save button, team-share button), a list view, and
   a builder/canvas view. Existing 600 block already handles
   canvas stacking + tool-picker grid + builder name row. This
   block adds iOS-zoom, top-bar tightening on smallest phones,
   and a viewport-aware bottom-right proc sheet.
   ============================================================ */

/* ---- Phone (≤768px) ---- */
@media (max-width: 768px) {
    /* iOS auto-zoom prevention. Multiple inputs are below 16px:
       .top-bar-name-input (14px), .step-config-field input (12px),
       .builder-section input (14px). Force 16 on focus to avoid
       Safari's input-focus zoom. */
    input, textarea, select { font-size: 16px; }
    .top-bar-name-input,
    .builder-section input[type="text"],
    .step-config-field input[type="text"],
    .step-config-field input[type="password"],
    .canvas-config-body input[type="password"] { font-size: 16px !important; }

    /* Bottom-right processing sheet — desktop's `width: 360px`
       overflows on iPhone-class widths. Cap to viewport with a
       12px gutter and add safe-area inset for the home indicator. */
    .proc-sheet {
        width: calc(100vw - 24px);
        max-width: 360px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom, 12px));
    }
}

/* ---- Smallest phones (≤480px) — tighten top bar ----
   The bar packs back, divider, title, spacer, action button(s).
   At iPhone-class widths the "New workflow" / "Save workflow"
   text labels collide with the title; drop padding and tighten
   gaps so they all fit cleanly. */
@media (max-width: 480px) {
    .top-bar { padding: 0 14px; gap: 8px; }
    .top-bar-title { font-size: 14px; }
    .top-bar .btn-new-workflow {
        padding: 8px 12px;
        font-size: 12px;
    }
    .top-bar .btn-save {
        padding: 0 12px;
        font-size: 12px;
    }
    /* The workflow-name input shares the bar with mode-toggle,
       team-share, and Save buttons — keep it narrow so the trio
       on the right doesn't get squeezed. */
    .top-bar-name-input {
        flex: 1 1 0;
        max-width: 160px;
    }
}

/* ---- Builder/edit mode top-bar overflow fix ----
   When the workflow builder is open, the bar packs: back-link +
   divider + title + name input + mode toggle + Save button +
   team-share button. That's 7+ visible items competing for the
   same row — at ≤640 they no longer fit. JS doesn't add a body
   class for builder mode, so we detect via `:has()` on the
   workflow-name input being visible (initial HTML has
   `style="display:none"`; entering builder clears that prop).
   Strategy: hide the redundant "Edit/New Workflow" title (the
   name input itself reads as the page identity), strip the
   divider, let the name input fill remaining space, and trim
   button paddings so the right-side trio fits. */
@media (max-width: 640px) {
    .top-bar:has(.top-bar-name-input:not([style*="display:none"])) .top-bar-title,
    .top-bar:has(.top-bar-name-input:not([style*="display:none"])) .top-bar-divider {
        display: none;
    }
    .top-bar:has(.top-bar-name-input:not([style*="display:none"])) .top-bar-name-input {
        flex: 1 1 auto;
        max-width: none;
        margin-left: 0;
    }
    .top-bar:has(.top-bar-name-input:not([style*="display:none"])) .builder-team-share-btn {
        margin-right: 0;
    }
    .top-bar:has(.top-bar-name-input:not([style*="display:none"])) .top-bar-spacer {
        flex: 0 0 0;
    }
}

/* ---- Builder mode at iPhone-class widths (≤420px) ----
   Even after hiding the title, the row is tight. Drop the mode
   toggle (rarely needed on phone — the simple list view is the
   default and visual editor is awkward to use on a small screen).
   Save button shrinks too. */
@media (max-width: 420px) {
    .top-bar:has(.top-bar-name-input:not([style*="display:none"])) .builder-mode-toggle {
        display: none !important;
    }
    .top-bar:has(.top-bar-name-input:not([style*="display:none"])) .btn-save {
        padding: 0 10px;
        font-size: 11px;
        height: 30px;
    }
}