:root{--brand:#4f46e5;--brand-600:#4338ca;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--bg:#f6f7fb;--sidebar:#0f172a;--sidebar-ink:#cbd5e1;--radius:12px}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-600);--bs-btn-hover-border-color:var(--brand-600);--bs-btn-active-bg:var(--brand-600)}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand)}
.text-brand{color:var(--brand)!important}.bg-brand{background:var(--brand)!important}
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:600;border-radius:var(--radius) var(--radius) 0 0!important}
.table>:not(caption)>*>*{padding:.7rem .75rem}.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;background:#f8fafc}
.form-label{font-weight:500;font-size:.9rem}.form-text{font-size:.8rem}
/* App shell */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:252px;background:var(--sidebar);color:var(--sidebar-ink);flex-shrink:0;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;z-index:1040;transition:transform .2s}
.sidebar .brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.25rem;color:#fff;font-weight:700;font-size:1.1rem;text-decoration:none}
.sidebar .brand img{max-height:30px}
.sidebar .brand .logo-dot{width:30px;height:30px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff}
.sidebar .nav-section{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;padding:1rem 1.25rem .35rem}
.sidebar .nav-link{color:var(--sidebar-ink);padding:.48rem 1.25rem;display:flex;align-items:center;gap:.7rem;font-size:.9rem;border-left:3px solid transparent}
.sidebar .nav-link i{font-size:1rem;opacity:.85}
.sidebar .nav-link:hover{color:#fff;background:rgba(255,255,255,.04)}
.sidebar .nav-link.active{color:#fff;background:rgba(79,70,229,.18);border-left-color:var(--brand)}
.main{flex:1;margin-left:252px;min-width:0}
.topbar{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 1.5rem;gap:1rem;position:sticky;top:0;z-index:1030}
.content{padding:1.5rem}
.page-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.page-header h1{font-size:1.4rem;font-weight:700;margin:0}
.page-header .sub{color:var(--muted);font-size:.9rem}
@media (max-width:991.98px){.sidebar{transform:translateX(-100%)}.sidebar.show{transform:none}.main{margin-left:0}}
.sidebar-backdrop{display:none}
@media (max-width:991.98px){.sidebar.show+.sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1035}}
/* Stats */
.stat-card{padding:1.1rem 1.2rem}.stat-card .label{color:var(--muted);font-size:.8rem;font-weight:500}
.stat-card .value{font-size:1.6rem;font-weight:700;line-height:1.2}.stat-card .icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:1.15rem}
.icon-soft-primary{background:#eef2ff;color:#4f46e5}.icon-soft-success{background:#ecfdf5;color:#059669}.icon-soft-warning{background:#fffbeb;color:#d97706}.icon-soft-danger{background:#fef2f2;color:#dc2626}.icon-soft-info{background:#ecfeff;color:#0891b2}.icon-soft-dark{background:#f1f5f9;color:#334155}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}.empty-state i{font-size:2.5rem;color:#cbd5e1}
.toast-container{z-index:2000}
.btn-loading{pointer-events:none;opacity:.75}
.wizard-steps{display:flex;gap:.25rem;flex-wrap:wrap}.wizard-steps .step{flex:1;min-width:110px;padding:.5rem .75rem;border-radius:8px;background:#fff;border:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.wizard-steps .step.active{border-color:var(--brand);color:var(--brand);font-weight:600}.wizard-steps .step.done{color:#059669}
.code-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;background:#0f172a;color:#e2e8f0;border-radius:8px;padding:.75rem 1rem;word-break:break-all;white-space:pre-wrap}
/* Website */
.site-nav{background:#fff;border-bottom:1px solid var(--line)}
.hero{background:radial-gradient(1200px 500px at 10% -10%,#e0e7ff 0,transparent 60%),radial-gradient(900px 400px at 100% 0,#fae8ff 0,transparent 60%),#fff;padding:5rem 0 4rem}
.hero h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;letter-spacing:-.02em}
.feature-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;background:#eef2ff;color:var(--brand)}
.pricing-card.featured{border:2px solid var(--brand);box-shadow:0 10px 30px rgba(79,70,229,.15)}
.section{padding:4.5rem 0}.section-alt{background:#fff}
.site-footer{background:#0f172a;color:#94a3b8;padding:3rem 0 2rem}.site-footer a{color:#cbd5e1;text-decoration:none}
.prose h3,.prose h4{margin-top:1.5rem}.prose{line-height:1.75}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem;background:radial-gradient(900px 500px at 0 0,#e0e7ff 0,transparent 60%),var(--bg)}
.auth-card{width:100%;max-width:440px}
/* Automation builder */
#drawflow{height:640px;background:#f8fafc;background-image:radial-gradient(#dbe1ea 1px,transparent 1px);background-size:18px 18px;border-radius:0 0 var(--radius) var(--radius)}
.drawflow .drawflow-node,#drawflow .drawflow-node{background:#fff;border:1px solid var(--line);border-radius:10px;min-width:210px;padding:0;color:var(--ink);box-shadow:0 2px 6px rgba(15,23,42,.06)}
#drawflow .drawflow-node.selected{border-color:var(--brand);background:#fff}
#drawflow .drawflow-node .df-head{padding:.45rem .75rem;font-size:.8rem;font-weight:600;border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
#drawflow .drawflow-node .df-body{padding:.5rem .75rem;font-size:.78rem;color:var(--muted)}
#drawflow .connection .main-path{stroke:var(--brand);stroke-width:3px}
#drawflow .drawflow-node .input,#drawflow .drawflow-node .output{width:14px;height:14px;border:2px solid var(--brand);background:#fff}
.df-trigger .df-head{background:#ecfdf5;color:#047857}.df-action .df-head{background:#eef2ff;color:#4338ca}.df-condition .df-head{background:#fffbeb;color:#b45309}.df-wait .df-head{background:#f1f5f9;color:#334155}
.palette-item{cursor:grab;user-select:none}
#gjs{border:1px solid var(--line);height:calc(100vh - 190px)!important;min-height:560px}
#drawflow .drawflow-node .drawflow_content_node{width:100%}#drawflow .drawflow-node .input:hover,#drawflow .drawflow-node .output:hover{background:var(--brand)}