:root {
  color-scheme: light;
  --canvas:#f4f7fb; --surface:#ffffff; --surface-2:#eaf0f7; --border:#d9e2ed; --border-strong:#b9c8d8;
  --ink:#14263d; --muted:#52677f; --accent:#1769e0; --accent-hover:#0e55bb; --accent-ink:#ffffff; --accent-text:#1769e0; --accent-strong:#124c9e; --accent-soft:#e2edff; --accent-border:#9dbdf1;
  --success:#16865b; --success-ink:#ffffff; --success-soft:#e1f5eb; --success-strong:#116341;
  --warning:#a95d08; --warning-ink:#ffffff; --warning-soft:#fff1d9; --warning-strong:#814600;
  --danger:#bd3f4a; --danger-ink:#ffffff; --danger-soft:#fde8ea; --danger-strong:#9b2631;
  --chart-1:#1769e0; --chart-2:#13a887; --chart-3:#8c65d8; --chart-4:#e49a31; --chart-5:#db6278; --chart-6:#36a6c9;
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif; --font-body:"DM Sans",ui-sans-serif,system-ui,sans-serif; --font-sans:"DM Sans",ui-sans-serif,system-ui,sans-serif; --font-mono:"DM Mono",ui-monospace,monospace;
  --display-weight:700; --display-tracking:-0.035em; --eyebrow-tracking:0.09em;
  --radius-btn:0.7rem; --radius-card:1.1rem; --radius-input:0.7rem; --border-w:1px; --border-strong-w:1px; --shadow-card:0 12px 34px rgba(20,38,61,.06); --shadow-raised:0 22px 55px rgba(20,38,61,.14); --shadow-btn:0 7px 16px rgba(23,105,224,.20); --card-pad:1.25rem; --caps:none; --caps-tracking:.04em; --btn-weight:650; --measure:68ch;
  --x-glow:rgba(23,105,224,.13); --x-grid:rgba(23,105,224,.06);
}
html[data-theme="dark"] {
  color-scheme:dark;
  --canvas:#0c1421; --surface:#131f30; --surface-2:#1a2a40; --border:#263a54; --border-strong:#3c5674;
  --ink:#edf4ff; --muted:#a5b8cf; --accent:#71a9ff; --accent-hover:#91bcff; --accent-ink:#10213a; --accent-text:#8bb9ff; --accent-strong:#c2dcff; --accent-soft:#1b3558; --accent-border:#365f91;
  --success:#45c38a; --success-ink:#092b1d; --success-soft:#153b2e; --success-strong:#83e0b2;
  --warning:#f1b45d; --warning-ink:#332008; --warning-soft:#453219; --warning-strong:#ffd38c;
  --danger:#fa7d88; --danger-ink:#3a1117; --danger-soft:#421e27; --danger-strong:#ffabb2;
  --chart-1:#71a9ff; --chart-2:#45cda6; --chart-3:#b99aff; --chart-4:#f1b45d; --chart-5:#fa8e9b; --chart-6:#70cce8;
  --x-glow:rgba(113,169,255,.14); --x-grid:rgba(113,169,255,.07);
}
body { background:var(--canvas); }
.app-shell{min-height:100vh;display:grid;grid-template-columns:252px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--border);padding:1.4rem 1rem 1rem;display:flex;flex-direction:column;z-index:10}
.brand{display:flex;align-items:center;gap:.75rem;padding:.2rem .65rem 2.2rem;font-family:var(--font-display);font-size:1.18rem;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.brand:hover{text-decoration:none}.brand-mark{width:2.45rem;height:2.45rem;border-radius:.8rem;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:var(--shadow-btn)}.brand-mark .icon{width:1.25rem;height:1.25rem}.brand-dot{color:var(--accent)}.brand small{display:block;font:500 .57rem var(--font-mono);letter-spacing:.11em;color:var(--muted);margin-top:.12rem}
.workspace-label,.eyebrow{font:500 .64rem var(--font-mono);letter-spacing:.11em;color:var(--muted)}
.workspace-label{padding:0 .7rem .7rem}.side-nav{display:grid;gap:.25rem}.side-link{width:100%;display:flex;align-items:center;gap:.75rem;padding:.72rem .75rem;border:0;border-radius:.7rem;background:transparent;color:var(--muted);text-align:left;font-size:.86rem;font-weight:600;cursor:pointer;transition:background .16s,color .16s}.side-link .icon{width:1.1rem;height:1.1rem}.side-link:hover,.side-link.active{background:var(--accent-soft);color:var(--accent-strong)}.side-link kbd{margin-left:auto;font: .65rem var(--font-mono);color:var(--muted)}.side-count{margin-left:auto;border-radius:99px;background:var(--surface-2);padding:.1rem .48rem;font:500 .68rem var(--font-mono)}
.sidebar-spacer{flex:1}.usage-card{border:1px solid var(--border);background:var(--surface-2);padding:.9rem;border-radius:.85rem;margin:.5rem 0 1rem}.usage-top{display:flex;align-items:center;justify-content:space-between;font:500 .6rem var(--font-mono);letter-spacing:.07em;color:var(--muted)}.usage-live{color:var(--success-strong)}.usage-live i,.system-status i{display:inline-block;width:.42rem;height:.42rem;border-radius:50%;background:var(--success);margin-right:.25rem}.usage-meter{height:.32rem;background:var(--border);border-radius:9rem;margin:.75rem 0 .5rem;overflow:hidden}.usage-meter span{display:block;width:64%;height:100%;border-radius:inherit;background:var(--accent)}.usage-card p{font-size:.67rem;color:var(--muted);line-height:1.45;margin:0}
.profile-row{display:flex;align-items:center;gap:.65rem;border-top:1px solid var(--border);padding:.95rem .3rem .1rem;margin-top:.6rem}.profile-avatar{width:2rem;height:2rem;background:var(--accent-soft);color:var(--accent-strong);border-radius:.65rem;display:grid;place-items:center;font:600 .68rem var(--font-mono)}.profile-row div:nth-child(2){display:grid;gap:.1rem;min-width:0}.profile-row strong{font-size:.75rem}.profile-row small{color:var(--muted);font-size:.65rem}.icon-button{width:2.2rem;height:2.2rem;border:1px solid transparent;border-radius:.65rem;display:grid;place-items:center;background:transparent;color:var(--muted);cursor:pointer}.icon-button:hover{background:var(--surface-2);color:var(--ink)}.icon-button .icon{width:1.05rem;height:1.05rem}.profile-row .icon-button{margin-left:auto}
.main-area{min-width:0;padding:0 clamp(1.2rem,3.4vw,3.25rem);display:flex;flex-direction:column}.topbar{height:4.7rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);margin-bottom:2.4rem}.crumb{display:flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.78rem}.crumb .icon{width:.85rem;height:.85rem}.crumb strong{color:var(--ink);font-weight:600}.top-actions{display:flex;align-items:center;gap:.7rem}.system-status{font-size:.7rem;color:var(--muted);padding-right:.4rem}.mobile-menu{display:none}
.page-view{display:none;animation:page-in .25s ease both}.page-view.active{display:block}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.9rem}.page-heading h1{font:700 clamp(2rem,3vw,2.75rem)/1.1 var(--font-display);letter-spacing:-.055em;margin:.55rem 0}.page-heading h1 span{color:var(--accent-text)}.page-subtitle{color:var(--muted);font-size:.9rem;margin:0}.eyebrow-line{display:inline-block;width:2rem;height:1px;background:var(--accent);vertical-align:middle;margin-left:.45rem}.page-heading>.btn{flex-shrink:0}.btn{box-shadow:var(--shadow-btn)}.btn .icon{width:1rem;height:1rem}
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem}.metric-card{padding:1.1rem 1.15rem;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);min-width:0}.metric-head,.metric-foot{display:flex;align-items:center;justify-content:space-between;gap:.45rem}.metric-head{color:var(--muted);font-size:.75rem;font-weight:600}.metric-icon{width:2rem;height:2rem;display:grid;place-items:center;border-radius:.65rem}.metric-icon .icon{width:1rem;height:1rem}.metric-icon.blue{background:var(--accent-soft);color:var(--accent-strong)}.metric-icon.violet{background:color-mix(in srgb,var(--chart-3) 14%,var(--surface));color:var(--chart-3)}.metric-icon.green{background:var(--success-soft);color:var(--success-strong)}.metric-icon.amber{background:var(--warning-soft);color:var(--warning-strong)}.metric-value{font:700 2rem/1.2 var(--font-display);letter-spacing:-.05em;margin:.8rem 0 .6rem}.metric-unit{font-size:1rem;color:var(--muted);margin-left:.15rem}.metric-foot{font-size:.64rem;color:var(--muted)}.trend-up{color:var(--success-strong);display:inline-flex;align-items:center;gap:.15rem;font-weight:600}.trend-up .icon{width:.75rem;height:.75rem}
.content-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:1.1rem}.panel{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);min-width:0}.workflow-panel,.activity-panel,.chart-panel,.settings-panel{padding:1.2rem}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.9rem}.panel-heading h2,.section-head h2,.blueprint-panel h2{font:650 1.08rem var(--font-display);letter-spacing:-.025em;margin:.3rem 0}.panel-heading p{font-size:.73rem;color:var(--muted);margin:0}.text-action{display:inline-flex;align-items:center;gap:.3rem;border:0;background:transparent;padding:.3rem;color:var(--accent-text);font-size:.72rem;font-weight:650;cursor:pointer;white-space:nowrap}.text-action:hover{text-decoration:underline}.text-action .icon{width:.85rem;height:.85rem}
.workflow-list{display:grid}.workflow-row{display:flex;align-items:center;gap:.75rem;padding:.82rem .1rem;border-top:1px solid var(--border);min-width:0}.workflow-symbol{width:2.15rem;height:2.15rem;display:grid;place-items:center;border-radius:.7rem;flex-shrink:0}.workflow-symbol .icon{width:1rem;height:1rem}.workflow-symbol.blue{background:var(--accent-soft);color:var(--accent-strong)}.workflow-symbol.violet{background:color-mix(in srgb,var(--chart-3) 14%,var(--surface));color:var(--chart-3)}.workflow-symbol.amber{background:var(--warning-soft);color:var(--warning-strong)}.workflow-symbol.green{background:var(--success-soft);color:var(--success-strong)}.workflow-info,.activity-info{display:grid;gap:.18rem;min-width:0;flex:1}.workflow-info strong,.activity-info strong{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workflow-info small,.activity-info small{font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{font-size:.61rem}.badge .icon{width:.7rem;height:.7rem}.badge-success{background:var(--success-soft);color:var(--success-strong)}.badge-warning{background:var(--warning-soft);color:var(--warning-strong)}.badge i{width:.34rem;height:.34rem;border-radius:50%;background:currentColor;display:inline-block}.switch{width:2.15rem;height:1.2rem;border:0;border-radius:9rem;background:var(--border-strong);position:relative;flex-shrink:0;cursor:pointer;transition:background .2s}.switch:after{content:"";position:absolute;width:.82rem;height:.82rem;left:.18rem;top:.19rem;background:white;border-radius:50%;transition:transform .2s}.switch.is-on{background:var(--success)}.switch.is-on:after{transform:translateX(.96rem)}.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-top:1px solid var(--border);padding-top:.85rem;margin-top:.35rem;font-size:.65rem;color:var(--muted)}.pulse-dot{width:.4rem;height:.4rem;border-radius:50%;display:inline-block;background:var(--success);margin-right:.2rem}
.activity-list{display:grid}.activity-row{display:flex;align-items:center;gap:.65rem;padding:.82rem 0;border-top:1px solid var(--border);min-width:0}.activity-state{width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:50%;flex-shrink:0}.activity-state .icon{width:.8rem;height:.8rem}.activity-state.ok{background:var(--success-soft);color:var(--success-strong)}.activity-state.fail{background:var(--danger-soft);color:var(--danger-strong)}.activity-duration{font: .63rem var(--font-mono);color:var(--muted)}
.template-section{margin:2.1rem 0 1.4rem}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:.9rem}.section-head h2{font-size:1.2rem}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.template-card{position:relative;min-width:0;text-align:left;border:1px solid var(--border);background:var(--surface);padding:1.05rem;border-radius:var(--radius-card);display:grid;justify-items:start;gap:.42rem;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}.template-card:hover{transform:translateY(-3px);border-color:var(--accent-border);box-shadow:var(--shadow-card)}.template-icon{width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:.7rem;background:var(--accent-soft);color:var(--accent-strong)}.template-icon .icon{width:1.1rem;height:1.1rem}.template-tag{position:absolute;right:1rem;top:1.2rem;font: .58rem var(--font-mono);color:var(--muted)}.template-card strong{font:650 .88rem var(--font-display)}.template-card small{font-size:.69rem;color:var(--muted);line-height:1.5;min-height:2.1rem}.template-cta{display:flex;align-items:center;gap:.25rem;font-size:.68rem;font-weight:650;color:var(--accent-text);margin-top:.2rem}.template-cta .icon{width:.8rem;height:.8rem}.demo-note,.demo-footnote{display:flex;align-items:flex-start;gap:.6rem;padding:.8rem 0;color:var(--muted);font-size:.68rem;border-top:1px solid var(--border);margin:1.1rem 0}.demo-note>.icon,.demo-footnote>.icon{width:.9rem;height:.9rem;flex-shrink:0;color:var(--accent-text)}
.app-footer{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--border);padding:1rem 0;margin-top:auto;font: .59rem var(--font-mono);color:var(--muted);letter-spacing:.04em}
.toolbar{display:flex;align-items:center;gap:.7rem;margin:-.55rem 0 1rem}.search-box{height:2.65rem;display:flex;align-items:center;gap:.5rem;max-width:25rem;flex:1;border:1px solid var(--border-strong);border-radius:.7rem;background:var(--surface);padding:0 .75rem;color:var(--muted)}.search-box .icon{width:1rem;height:1rem}.search-box input{border:0;outline:0;background:transparent;min-width:0;width:100%;color:var(--ink);font-size:.77rem}.filter-select{max-width:10rem;height:2.65rem}.workflow-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.workflow-card{padding:1.1rem;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card)}.workflow-card-head{display:flex;align-items:center;gap:.7rem}.workflow-card h3{font:650 .95rem var(--font-display);margin:0}.workflow-card p{font-size:.72rem;color:var(--muted);margin:.65rem 0}.workflow-card-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-top:1px solid var(--border);padding-top:.75rem;margin-top:.8rem}.table-panel{overflow:hidden}.table-wrap{border:0;border-radius:0}.table-wrap td{font-size:.73rem}.table-caption{padding:.8rem 1rem;border-top:1px solid var(--border);font-size:.65rem;color:var(--muted)}.outcome{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:650}.outcome:before{content:"";width:.4rem;height:.4rem;background:var(--success);border-radius:50%}.outcome.failed:before{background:var(--danger)}
.analytics-metrics{grid-template-columns:repeat(3,minmax(0,1fr));max-width:850px}.analytics-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem}.chart-frame{height:260px;position:relative}.chart-frame canvas{width:100%;height:100%}.chart-key{font-size:.7rem;color:var(--muted)}.chart-key i{display:inline-block;width:.45rem;height:.45rem;background:var(--chart-1);border-radius:2px;margin-right:.25rem}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:1.6rem;padding:1.5rem .4rem}.donut-chart{width:155px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--success) 0 98.4%,var(--danger) 98.4%);display:grid;place-items:center;position:relative}.donut-chart:after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--surface)}.donut-chart>div{position:relative;z-index:1;display:grid;text-align:center}.donut-chart strong{font:700 1.45rem var(--font-display)}.donut-chart small{font-size:.65rem;color:var(--muted)}.donut-legend{display:grid;gap:.8rem;font-size:.7rem;color:var(--muted)}.donut-legend span{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:.4rem}.donut-legend i{width:.5rem;height:.5rem;border-radius:2px}.legend-green{background:var(--success)}.legend-red{background:var(--danger)}.donut-legend b{color:var(--ink)}
.settings-layout{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:1000px}.settings-panel{padding:1.4rem}.settings-panel form{max-width:30rem}.settings-panel .field{margin-top:1rem}.connection-row{display:flex;align-items:center;gap:.8rem;padding:.95rem 0;border-top:1px solid var(--border)}.connection-icon{width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:.65rem;background:var(--surface-2);color:var(--muted)}.connection-icon .icon{width:1rem;height:1rem}.connection-row>div{display:grid;gap:.15rem;min-width:0;flex:1}.connection-row strong{font-size:.75rem}.connection-row small{font-size:.65rem;color:var(--muted)}
.blueprint-panel{margin-top:1.1rem;padding:1.4rem;display:grid;grid-template-columns:1fr 1.25fr;gap:1rem;align-items:center}.blueprint-panel p{color:var(--muted);font-size:.76rem;max-width:37ch}.blueprint-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.blueprint-steps span{display:grid;gap:.2rem;padding:.8rem;border:1px solid var(--border);border-radius:.7rem;font: .61rem var(--font-mono);color:var(--accent-text)}.blueprint-steps b{font:650 .76rem var(--font-display);color:var(--ink)}.blueprint-steps small{font: .62rem var(--font-body);color:var(--muted)}
.modal{color:var(--ink)}.modal-head{align-items:flex-start}.modal-head .hint{margin-top:.25rem}.modal-dismiss{position:absolute;right:1rem;top:1rem}.builder-canvas{border:1px solid var(--border);border-radius:.9rem;padding:1rem;background:var(--canvas);margin:1rem 0}.builder-node{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--border);border-radius:.7rem;padding:.75rem}.builder-node>span:first-child{width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:.6rem;background:var(--accent-soft);color:var(--accent-strong)}.builder-node>span:first-child .icon{width:1rem;height:1rem}.builder-node>div{display:grid;gap:.1rem}.builder-node b{font:500 .58rem var(--font-mono);color:var(--accent-text)}.builder-node strong{font-size:.76rem}.builder-node small{font-size:.65rem;color:var(--muted)}.node-tag{margin-left:auto;font:.57rem var(--font-mono);color:var(--muted)}.flow-connector{height:1.6rem;display:flex;align-items:center;gap:.6rem;padding-left:1.85rem;color:var(--muted);font:.55rem var(--font-mono)}.flow-connector i{height:100%;width:1px;background:var(--border-strong);margin-left:.3rem}.flow-connector span{background:var(--surface-2);padding:.12rem .3rem;border-radius:.3rem}.modal .alert{margin-top:.8rem}.modal .alert .icon{width:1rem;height:1rem}.toast-region{position:fixed;right:1.5rem;bottom:1.3rem;z-index:80;display:grid;gap:.5rem;pointer-events:none}.fp-toast{display:flex;align-items:center;gap:.6rem;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:.75rem;padding:.75rem 1rem;box-shadow:var(--shadow-raised);font-size:.76rem;animation:toast-in .2s ease both}.fp-toast .icon{width:1rem;height:1rem;color:var(--success-strong)}
@keyframes page-in{from{transform:translateY(5px)}to{transform:translateY(0)}}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.app-shell{grid-template-columns:220px minmax(0,1fr)}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.activity-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}.activity-row:nth-child(2){border-top:1px solid var(--border)}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:-270px;width:252px;transition:left .25s;box-shadow:var(--shadow-raised)}.sidebar.open{left:0}.main-area{padding:0 1rem}.topbar{height:4rem;margin-bottom:1.6rem}.mobile-menu{display:grid}.crumb{margin-right:auto;margin-left:.5rem}.system-status{display:none}.page-heading{align-items:flex-start;flex-direction:column;gap:.8rem}.page-heading>.btn{width:100%}.metrics-grid{gap:.65rem}.metric-card{padding:.85rem}.metric-value{font-size:1.65rem}.content-grid{gap:.75rem}.workflow-panel,.activity-panel,.chart-panel{padding:.9rem}.workflow-row{gap:.5rem}.workflow-row .badge{display:none}.activity-list{grid-template-columns:1fr}.template-grid{grid-template-columns:1fr}.workflow-cards,.analytics-grid,.settings-layout,.blueprint-panel{grid-template-columns:1fr}.analytics-metrics{grid-template-columns:1fr}.blueprint-steps{grid-template-columns:1fr}.app-footer{flex-wrap:wrap;font-size:.52rem}.table-wrap{overflow-x:auto}.toolbar{align-items:stretch}.filter-select{max-width:8.5rem}.donut-wrap{justify-content:flex-start}.all-templates{grid-template-columns:1fr}.modal{max-width:calc(100vw - 1.5rem)}.modal-body{padding:1rem}.toast-region{left:1rem;right:1rem;bottom:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}