html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }
:root { --wf-bg:#f5f7fa; --wf-card:#ffffff; --wf-card-border:#e2e8f2; --wf-card-border-hover:#c7d6ec; --wf-text:#1f242b; --wf-text-muted:#5b6472; --wf-hero-grad-start:#0d6efd; --wf-hero-grad-end:#3358d4; --wf-border:#e3e8ef; --wf-badge-warning-bg:#ffe69c; --wf-badge-warning-color:#7a5900; }
:root[data-theme='dark'] { --wf-bg:#12171d; --wf-card:#1e252d; --wf-card-border:#2e3944; --wf-card-border-hover:#3d4b58; --wf-text:#e4e9ef; --wf-text-muted:#97a2af; --wf-hero-grad-start:#0a4fbf; --wf-hero-grad-end:#1e2f55; --wf-border:#2c3540; --wf-badge-warning-bg:#b08700; --wf-badge-warning-color:#fff; color-scheme: dark; }
body { margin:0; background:var(--wf-bg); color:var(--wf-text); padding:0; }
body, .wf-desc, .text-muted { color:var(--wf-text-muted)!important; }
.settings-page .wf-card { margin-top:.75rem; }
.settings-page .wf-card:first-child { margin-top:.5rem; }
.settings-page .wf-card:hover { transform:translateY(-2px); }
.settings-page .commit-row.active { background:rgba(13,110,253,.1); border-radius:4px; }
:root[data-theme='dark'] .settings-page .commit-row.active { background:rgba(115,170,255,.18); }
/* Added explicit thead styling */
.table thead, .table-light th { background:#eef2f7 !important; color:#1f242b !important; }
:root[data-theme='dark'] .table thead, :root[data-theme='dark'] .table-light th { background:#27303a !important; color:#e4e9ef !important; }

/* Top navigation */
.top-nav { background:var(--wf-card); border-bottom:1px solid var(--wf-border); }
:root[data-theme='dark'] .top-nav { background:#1e252d; }
.top-nav .nav-link, .top-nav .navbar-brand { color:var(--wf-text)!important; }
.top-nav .nav-link:hover { opacity:.75; }
.theme-toggle { min-width:38px; }

/* Hero + quick links */
.hero { position:relative; background:linear-gradient(135deg,var(--wf-hero-grad-start),var(--wf-hero-grad-end)); color:#fff; border-radius:18px; padding:72px 40px; overflow:hidden; margin:0 0 2rem; }
.hero-bg-accent { position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 60%), radial-gradient(circle at 20% 80%, rgba(255,255,255,.18), transparent 65%); mix-blend-mode:overlay; pointer-events:none; }
.hero-content { position:relative; max-width:860px; }
.hero-title { font-weight:600; letter-spacing:.5px; margin:0 0 .6rem; }
.hero-lead { font-size:1.15rem; opacity:.9; max-width:640px; }
.hero-actions .btn { margin-right:.6rem; }
.quick-links .ql-card { position:relative; background:var(--wf-card); border:1px solid var(--wf-card-border); border-radius:12px; padding:1rem .95rem 1.05rem; transition:box-shadow .15s, transform .15s, border-color .15s; overflow:hidden; }
.quick-links .ql-card::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(13,110,253,.05), rgba(13,110,253,0)); opacity:0; transition:opacity .2s; }
:root[data-theme='dark'] .quick-links .ql-card::after { background:linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,0)); }
.quick-links .ql-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.22); transform:translateY(-3px); border-color:var(--wf-card-border-hover); }
.quick-links .ql-card:hover::after { opacity:1; }
.quick-links .ql-card h6 { font-weight:600; margin:0 0 .35rem; font-size:.95rem; letter-spacing:.5px; color:var(--wf-text); }
.quick-links .ql-card a.stretched-link { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:#0d6efd; }

.page-header { border-bottom:1px solid var(--wf-border); padding-bottom:.75rem; }
.wf-card { background:var(--wf-card); border:1px solid var(--wf-card-border); border-radius:14px; padding:.85rem .85rem .7rem; display:flex; flex-direction:column; position:relative; gap:.75rem; transition:box-shadow .15s, transform .15s, border-color .15s; }
.wf-card-body { flex:1 1 auto; min-width:0; }
.wf-card:hover { box-shadow:0 4px 18px rgba(0,0,0,.35); transform:translateY(-4px); border-color:var(--wf-card-border-hover); }
.wf-id { font-weight:600; font-size:.95rem; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; word-break:break-all; color:var(--wf-text); }
.wf-desc { font-size:.8rem; }
.wf-card-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.empty-state { background:var(--wf-card); }
.table-sm th, .table-sm td { padding:.4rem .55rem; }
.text-monospace { font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
:root[data-theme='dark'] .table { --bs-table-bg:var(--wf-card); --bs-table-striped-bg:#262f39; --bs-table-striped-color:var(--wf-text); color:var(--wf-text); }
.badge.bg-warning.text-dark { background:var(--wf-badge-warning-bg)!important; color:var(--wf-badge-warning-color)!important; }

/* Navigation enhancements */
.main-nav { font-size:.9rem; }
.brand-mark { display:inline-flex; width:34px; height:34px; border-radius:8px; background:#0d6efd; color:#fff; align-items:center; justify-content:center; font-weight:600; font-size:.95rem; letter-spacing:.5px; }
:root[data-theme='dark'] .brand-mark { background:#2472ff; }
.brand-text { font-weight:600; letter-spacing:.5px; }
.main-menu .nav-link { display:flex; align-items:center; gap:.45rem; padding:.55rem .85rem; border-radius:8px; position:relative; transition:background .15s,color .15s; }
.main-menu .nav-link .nav-ico { font-size:1.05rem; line-height:1; }
.main-menu .nav-link.active { background:rgba(13,110,253,.12); color:#0d6efd!important; font-weight:600; }
:root[data-theme='dark'] .main-menu .nav-link.active { background:rgba(52,125,255,.18); color:#74adff!important; }
.main-menu .nav-link:hover { background:rgba(0,0,0,.05); text-decoration:none; }
:root[data-theme='dark'] .main-menu .nav-link:hover { background:rgba(255,255,255,.08); }
.nav-actions .btn.theme-toggle { border-radius:8px; }

/* Editor layout */
.editor-layout { display:flex; align-items:stretch; gap:1rem; width:100%; max-width:100%; margin:0; }
.toolbox { flex:0 0 220px; width:220px; padding:.75rem; border:1px solid #ccc; border-radius:8px; background:#fff; display:flex; flex-direction:column; overflow-y:auto; max-height:calc(100vh - 140px); }
:root[data-theme='dark'] .toolbox { background:#1e252d; border-color:#2e3944; }
.canvas { flex:1 1 auto; min-width:0; padding:.75rem 1rem; border:1px solid #ccc; border-radius:8px; background:#f9f9f9; overflow:visible; }
:root[data-theme='dark'] .canvas { background:#181f25; border-color:#2e3944; }
.properties { flex:0 0 550px; width:550px; padding:.75rem; border:1px solid #ccc; border-radius:8px; background:#fff; overflow-y:auto; }
:root[data-theme='dark'] .properties { background:#1e252d; border-color:#2e3944; }
@media (max-width:1400px){ .properties { flex:0 0 480px; width:480px; } }
@media (max-width:1200px){ .properties { flex:0 0 420px; width:420px; } }
@media (max-width:992px){ .editor-layout { flex-direction:column; } .toolbox, .properties { flex:0 0 auto; width:100%; max-height:none; } .canvas { max-height:none; } }

/* Step blocks */
.step-block { background:#fff; padding:1rem 1rem 1.4rem; margin-bottom:0; border:2px solid #007acc; border-radius:6px; cursor:pointer; position:relative; }
:root[data-theme='dark'] .step-block { background:#1e252d; }
.step-block.selected { border-color:#28a745; background-color:#e6ffe6; }
.step-block.placeholder { color:#777; font-style:italic; cursor:pointer; min-height:40px; display:flex; align-items:center; justify-content:center; }
.placeholder { color:#777; font-style:italic; }
.arrow-insert { position:relative; width:100%; display:flex; justify-content:center; align-items:center; cursor:pointer; margin:0; min-height:80px; }
.arrow-insert::before { content:""; position:absolute; top:8px; bottom:19px; left:50%; width:3px; background:#007acc; transform:translateX(-50%); border-radius:2px; }
.arrow-insert.arrow-head::after { content:""; position:absolute; bottom:7px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; border-right:3px solid #007acc; border-bottom:3px solid #007acc; background:transparent; }
.final-insert { position:relative; width:100%; display:flex; justify-content:center; align-items:center; margin:.6rem 0 .2rem; }
.insert-plus { display:inline-flex; width:25px; height:25px; border-radius:50%; background:#007acc; color:#fff; font-weight:600; font-size:1.05rem; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff, 0 0 0 3px #007acc33; transition:background .15s, transform .15s; z-index:2; margin-bottom:10px; }
.insert-plus.standalone { box-shadow:0 0 0 2px #fff, 0 0 0 3px #007acc55; }
.arrow-insert:hover .insert-plus, .final-insert:hover .insert-plus { background:#005a99; transform:scale(1.1); }
.delete-btn { position:absolute; top:4px; right:6px; background:transparent; border:none; color:#c00; font-size:1rem; font-weight:bold; cursor:pointer; }
.delete-btn:hover { color:#900; }

.parallel-container { display:flex; gap:1rem; margin-top:1rem; }
.parallel-branch { border:1px solid #ccc; padding:.5rem; flex:1; background:#f9f9f9; border-radius:4px; }
:root[data-theme='dark'] .parallel-branch { background:#1e252d; color:#f1f5f9; border-color:#2e3944; }
:root[data-theme='dark'] .parallel-branch h5 { color:#ffffff; }
.branch-editor { margin:15px 0 0 15px; }
.dictionary-editor { margin:15px 0 0 15px; }
.step-properties [data-visible-when]:not([data-visible-when=""]) { display:none; }
.co-indicators { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.co-dot { width:10px; height:10px; border-radius:50%; display:inline-block; opacity:.35; border:1px solid #444; }
.co-dot.green { background:#28a745; }
.co-dot.red { background:#dc3545; }
.co-dot.active { opacity:1; box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.15); }
.step-block.readonly { cursor:default; border-color:#999; }
.step-block.status-ok { border-color:#28a745; background:#e9f9ee; }
.step-block.status-fail { border-color:#dc3545; background:#fae2e5; }
.step-block.readonly .delete-btn { display:none; }
.error-indicator { position:absolute; top:4px; right:6px; background:#dc3545; color:#fff; width:16px; height:16px; border-radius:50%; font-size:12px; display:flex; align-items:center; justify-content:center; }

/* Run log */
.run-log { list-style:none; margin:0; padding:0; }
.run-log li { border-left:4px solid #007acc; background:#fff; margin:0 0 .5rem; padding:.5rem .75rem; border-radius:4px; font-size:.9rem; }
:root[data-theme='dark'] .run-log li { background:#1e252d; }
.run-log li.log-ok { border-color:#28a745; background:#e9f9ee; }
.run-log li.log-fail { border-color:#dc3545; background:#fae2e5; }
.run-log li.log-run { border-color:#ffc107; background:#fff8e1; }
.run-log .log-error { margin-top:.25rem; color:#dc3545; font-weight:600; }

.arrow-view { position:relative; width:100%; display:flex; justify-content:center; align-items:center; margin:4px 0 10px; min-height:40px; }
.arrow-view .arrow-line { position:absolute; top:4px; bottom:14px; left:50%; width:3px; background:#007acc; transform:translateX(-50%); border-radius:2px; }
.arrow-view .arrow-head { position:absolute; bottom:6px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; border-right:3px solid #007acc; border-bottom:3px solid #007acc; background:transparent; }

/* Globals modal */
.globals-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:2000; display:flex; align-items:flex-start; justify-content:center; padding-top:60px; }
.globals-modal-content { background:#fff; border-radius:4px; padding:16px; width:600px; max-height:70vh; overflow:auto; box-shadow:0 2px 8px rgba(0,0,0,.3); }
:root[data-theme='dark'] .globals-modal-content { background:#1e252d; }

/* Dark mode enhancements */
:root[data-theme='dark'] textarea#workflowJson { background:#12171d; color:#e4e9ef; border:1px solid #2e3944; }
:root[data-theme='dark'] textarea#workflowJson:focus { outline:1px solid #3d4b58; }
:root[data-theme='dark'] .wf-card-actions .btn-outline-primary { color:#9dc4ff; border-color:#3d4b58; }
:root[data-theme='dark'] .wf-card-actions .btn-outline-secondary { color:#c2c9d0; border-color:#3d4b58; }
:root[data-theme='dark'] .wf-card-actions .btn-outline-danger { color:#ff9da4; border-color:#5a2f33; }
:root[data-theme='dark'] .wf-card-actions .btn-outline-primary:hover { background:#0d6efd22; }
:root[data-theme='dark'] .wf-card-actions .btn-outline-secondary:hover { background:#ffffff10; }
:root[data-theme='dark'] .wf-card-actions .btn-outline-danger:hover { background:#dc354533; }
:root[data-theme='dark'] .properties h4, :root[data-theme='dark'] .properties h5 { color:#e4e9ef; }
:root[data-theme='dark'] pre, :root[data-theme='dark'] code { background:#1e252d; color:#d6dee6; }
:root[data-theme='dark'] .canvas::-webkit-scrollbar, :root[data-theme='dark'] .properties::-webkit-scrollbar { width:10px; }
:root[data-theme='dark'] .canvas::-webkit-scrollbar-track, :root[data-theme='dark'] .properties::-webkit-scrollbar-track { background:#12171d; }
:root[data-theme='dark'] .canvas::-webkit-scrollbar-thumb, :root[data-theme='dark'] .properties::-webkit-scrollbar-thumb { background:#2e3944; border-radius:6px; }
:root[data-theme='dark'] .canvas::-webkit-scrollbar-thumb:hover, :root[data-theme='dark'] .properties::-webkit-scrollbar-thumb:hover { background:#3d4b58; }

/* Toolbox redesign */
.toolbox-inner { display:flex; flex-direction:column; gap:.75rem; }
.toolbox-header { border-bottom:1px solid var(--wf-border); padding-bottom:.35rem; }
.toolbox-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.6rem; }
.toolbox-card { background:var(--wf-card); border:1px solid var(--wf-card-border); border-radius:10px; cursor:pointer; display:flex; flex-direction:column; padding:.55rem .6rem; position:relative; transition:box-shadow .15s, transform .15s, border-color .15s; }
.toolbox-card:hover, .toolbox-card:focus { outline:none; box-shadow:0 4px 14px rgba(0,0,0,.18); transform:translateY(-3px); border-color:var(--wf-card-border-hover); }
.toolbox-card:active { transform:translateY(-1px) scale(.98); }
.toolbox-card-title { font-size:.8rem; font-weight:600; line-height:1.15; margin:0 0 .25rem; color:var(--wf-text); }
.toolbox-card-meta { opacity:.65; }
.trigger-card { border-left:4px solid #0d6efd; }
.step-card { border-left:4px solid #28a745; }
:root[data-theme='dark'] .trigger-card { border-left-color:#3d8bfd; }
:root[data-theme='dark'] .step-card { border-left-color:#34d26a; }
.toolbox-form { margin:0; }
.toolbox-card.dragging { opacity:.4; }
.arrow-insert.drag-hover, .final-insert.drag-hover { background:#e7f1ff; }
:root[data-theme='dark'] .arrow-insert.drag-hover, :root[data-theme='dark'] .final-insert.drag-hover { background:#223444; }

/* New step pulse */
.pulse-new-step { animation:pulseStep 1.2s ease-in-out 0s 2; }
@keyframes pulseStep { 0%{box-shadow:0 0 0 0 rgba(13,110,253,.7);} 70%{box-shadow:0 0 0 10px rgba(13,110,253,0);} 100%{box-shadow:0 0 0 0 rgba(13,110,253,0);} }

/* Instance list dark mode contrast */
:root[data-theme='dark'] table.table tbody tr { background:#1e252d; }
:root[data-theme='dark'] table.table tbody tr:nth-child(even){ background:#232c35; }
:root[data-theme='dark'] table.table tbody tr:hover { background:#2d3944; }
:root[data-theme='dark'] .badge.bg-success { background:#1f6f3d!important; }
:root[data-theme='dark'] .badge.bg-danger { background:#922c36!important; }
:root[data-theme='dark'] .badge.bg-warning { background:#8a6d00!important; color:#fff!important; }
:root[data-theme='dark'] .badge.bg-secondary { background:#4a5560!important; }
:root[data-theme='dark'] table.table, :root[data-theme='dark'] table.table th, :root[data-theme='dark'] table.table td { color:#f1f5f9 !important; }
:root[data-theme='dark'] table.table .text-muted { color:#c2c9d0 !important; }

/* Sticky footer flex adjustments */
html, body { height:100%; }
body.app-shell { min-height:100vh; display:flex; flex-direction:column; }
.page-wrapper { flex:1 0 auto; display:flex; flex-direction:column; min-height:0; }
.page-wrapper > .container-fluid { flex:1 0 auto; display:flex; flex-direction:column; min-height:0; }
.page-wrapper main { flex:1 0 auto; display:flex; flex-direction:column; min-height:0; }
.app-footer { flex-shrink:0; position:static; margin-top:auto; border-top:1px solid var(--wf-border); background:var(--wf-card); }
:root[data-theme='dark'] .app-footer { background:#1e252d; }
/* Ensure no accidental internal scroll steals height */
.editor-layout, .canvasOuterWrapper { flex:1 1 auto; }
/* --- Sticky footer final override (place at end) --- */
.app-shell, body.app-shell, html { height:100%; }
.page-wrapper { min-height:100vh !important; display:flex !important; flex-direction:column !important; }
.page-wrapper > .container-fluid { flex:1 1 auto !important; display:flex; flex-direction:column; min-height:0; }
.page-wrapper main { flex:1 1 auto !important; display:flex; flex-direction:column; min-height:0; }
.app-footer { position:static !important; margin-top:auto !important; border-top:1px solid var(--wf-border); background:var(--wf-card); }
:root[data-theme='dark'] .app-footer { background:#1e252d; }
/* Settings page enhancements */
.settings-layout { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:1100px){ .settings-layout { grid-template-columns:1fr; } }
.panel-box { background:var(--wf-card); border:1px solid var(--wf-card-border); border-radius:14px; padding:1.1rem 1.1rem 1rem; position:relative; display:flex; flex-direction:column; min-width:0; box-shadow:0 2px 4px rgba(0,0,0,.05); }
.panel-box:hover { border-color:var(--wf-card-border-hover); }
:root[data-theme='dark'] .panel-box { box-shadow:0 2px 6px rgba(0,0,0,.55); }
.panel-title { font-weight:600; letter-spacing:.4px; font-size:.95rem; margin:0 0 .85rem; display:flex; align-items:center; gap:.4rem; }
.form-panel .auth-block { margin-top:.75rem; background:var(--wf-bg); border:1px dashed var(--wf-border); padding:.75rem .8rem; border-radius:10px; }
:root[data-theme='dark'] .form-panel .auth-block { background:#181f25; }
.fade-in { animation:fadeIn .35s ease-out; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.latest-commit code { font-size:.75rem; }
.commit-list { border:1px solid var(--wf-border); background:var(--wf-bg); border-radius:10px; min-height:160px; max-height:300px; overflow:auto; font-size:.75rem; display:flex; flex-direction:column; }
:root[data-theme='dark'] .commit-list { background:#181f25; }
.commit-row { display:grid; grid-template-columns:80px 1fr auto; gap:.6rem; padding:.4rem .6rem; border-bottom:1px solid var(--wf-border); cursor:pointer; align-items:center; }
.commit-row:last-child { border-bottom:none; }
.commit-row code { font-size:.7rem; opacity:.85; }
.commit-row .msg { font-weight:500; font-size:.7rem; letter-spacing:.3px; }
.commit-row .time { font-size:.65rem; opacity:.55; white-space:nowrap; }
.commit-row.active { background:rgba(13,110,253,.12); }
:root[data-theme='dark'] .commit-row.active { background:rgba(115,170,255,.16); }
.commit-row:hover { background:rgba(13,110,253,.08); }
:root[data-theme='dark'] .commit-row:hover { background:rgba(115,170,255,.12); }
.loading-row, .empty-row, .error-row { padding:.6rem .75rem; font-size:.7rem; }
.diff-preview { white-space:pre-wrap; font-family:ui-monospace, monospace; background:var(--wf-card); border:1px solid var(--wf-border); padding:.6rem .7rem; border-radius:10px; margin-top:1rem; font-size:.7rem; }
.branch-create .input-group .form-control { font-size:.75rem; }
.commit-input { max-width:260px; font-size:.75rem; }
.settings-title { font-weight:600; letter-spacing:.4px; }
/* Dark adjustments */
:root[data-theme='dark'] .latest-commit code { color:#9dc4ff; }
:root[data-theme='dark'] .panel-title { color:var(--wf-text); }
:root[data-theme='dark'] .diff-preview { background:#1e252d; }