/* Wakeel وكيل — Beam-style dark UI on a live Dify backend */
:root{
  --bg:#070d1a; --panel:#0b1322; --panel-2:#0e1728; --panel-3:#101c30;
  --line:#1e2b42; --line-2:#16223a;
  --text:#f5f7fb; --muted:#97a4b7; --muted-2:#6b7a90; --faint:#4a586e;
  --blue:#2563eb; --blue-2:#3b82f6; --blue-soft:#12233f;
  --green:#21c55d; --green-2:#00c26e; --wakeel:#00a862;
  --violet:#7c3aed; --yellow:#f6c44f; --red:#ef4444;
  --canvas:#f6f8fb; --canvas-line:#e3e6ea; --cnode:#ffffff; --cnode-line:#e6e9f0; --cink:#0d1526; --cmuted:#68758a;
  --radius:14px; --radius-sm:10px;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-ar:"SF Arabic","Segoe UI",Tahoma,"Geeza Pro",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px}
html[dir="rtl"] body{font-family:var(--font-ar)}
button,input,textarea,select{font:inherit;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;flex:none}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#1c2942;border-radius:6px}::-webkit-scrollbar-track{background:transparent}

.flagline{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;display:flex}
.flagline i{flex:1}.flagline .r{background:#CE1126;flex:0 0 20%}.flagline .g{background:#00843D}.flagline .w{background:#e9edf3}.flagline .b{background:#0a0e16}

/* login */
.signin{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.signin-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 25% 78%,rgba(0,168,98,.42),transparent 40%),linear-gradient(150deg,#03130c 0%,#062a1a 46%,#020a13 100%);display:flex;flex-direction:column;justify-content:space-between;padding:44px}
.wave{position:absolute;inset:-6% -18% -6% -14%;background:repeating-radial-gradient(ellipse at center,rgba(60,220,150,.5) 0 2px,transparent 3px 15px),linear-gradient(135deg,rgba(0,140,80,.45),rgba(6,40,26,.05));opacity:.55;transform:rotate(-10deg) skewX(-9deg);mask-image:radial-gradient(ellipse at 40% 50%,#000 0 52%,transparent 78%)}
.hero-logo{position:relative;z-index:2;display:flex;align-items:center;gap:11px}
.hero-copy{position:relative;z-index:2;max-width:500px}
.hero-copy h2{font-size:clamp(28px,3.2vw,38px);font-weight:820;letter-spacing:-.025em;line-height:1.12;margin:0 0 14px}
.wk-accent{color:#3ee08a}
.hero-copy p{color:#bfe6d3;font-size:15.5px;line-height:1.6;margin:0}
.hero-ar{color:#7fcea8 !important;font-size:15px !important;margin-top:12px !important;font-weight:600}
.built{margin-top:30px}
.built-lab{font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:#6fae8d;margin-bottom:11px}
.built-row{display:flex;flex-wrap:wrap;gap:10px}
.built-card{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:12px;background:rgba(9,32,21,.72);border:1px solid rgba(62,224,138,.22);font-size:13.5px;font-weight:700;color:#e8f6ee;backdrop-filter:blur(4px)}
.plg{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#0e3a24,#0a2417);color:#3ee08a;flex:none}
.plg svg{width:16px;height:16px}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hpill{font-size:12.5px;font-weight:650;padding:5px 13px;border-radius:99px;color:#a9dcc2;border:1px solid rgba(62,224,138,.3);background:rgba(62,224,138,.06)}
.signin-form{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;background:var(--bg)}
.form-top{position:absolute;top:22px;inset-inline-end:26px}
.signin-card{width:360px;max-width:100%;text-align:center}
.signin-card h1{font-size:27px;font-weight:820;letter-spacing:-.02em;margin:0 0 8px}
.signin-card .sub{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 auto 24px;max-width:34ch}
.signin-card .field{text-align:start}
.signin-card .btn.block{margin-bottom:10px}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--panel-2)}
.or{display:flex;align-items:center;gap:12px;margin:16px 2px;color:var(--muted-2);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.magic-ic{width:52px;height:52px;border-radius:14px;margin:0 auto 16px;display:grid;place-items:center;background:rgba(0,168,98,.12);border:1px solid rgba(0,168,98,.3);color:var(--wakeel)}
.magic-ic svg{width:24px;height:24px}
.magic-note{font-size:12px;color:var(--faint);line-height:1.5;margin:2px 0 14px}
.magic-note.warn{color:#e6b02e;background:rgba(230,176,46,.08);border:1px solid rgba(230,176,46,.25);border-radius:10px;padding:10px 12px}
.err.info{color:var(--muted);}
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px;font-weight:600}
.input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#060c18;padding:0 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--wakeel);box-shadow:0 0 0 4px rgba(0,168,98,.12)}
textarea.input{padding:12px 14px;min-height:auto;resize:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);cursor:pointer;padding:0 16px;font-weight:600;transition:.15s}
.btn:hover{background:var(--panel-3)}
.btn.primary{border-color:#0b7a48;background:var(--wakeel);color:#fff}
.btn.primary:hover{background:#00b76b}
.btn.block{width:100%}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:default}
.err{color:#ff7b7b;font-size:13px;min-height:18px;margin-top:10px}
.linky{color:var(--wakeel);cursor:pointer;font-weight:600}

/* shell */
.app{display:flex;height:100vh;overflow:hidden}
.side{width:248px;flex:none;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);padding:14px 12px}
.side-top{display:flex;align-items:center;gap:11px;padding:6px 8px 14px;border-bottom:1px solid var(--line-2)}
.logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#00a862,#007a48);display:grid;place-items:center;position:relative;overflow:hidden;flex:none}
.logo::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:#CE1126}
.logo span{color:#fff;font-weight:800;font-size:12px;font-family:var(--font-ar)}
.side-top .nm{font-weight:750;font-size:15px;letter-spacing:-.01em}
.beta{font-size:10px;font-weight:700;border:1px solid var(--line);border-radius:7px;padding:2px 6px;color:#cdd7e6;margin-inline-start:auto}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.nav a{display:flex;align-items:center;gap:12px;height:38px;padding:0 11px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:550;cursor:pointer}
.nav a svg{width:18px;height:18px;color:var(--muted-2)}
.nav a:hover{background:var(--panel-2);color:var(--text)}
.nav a.active{background:var(--panel-3);color:var(--text)}
.nav a.active svg{color:var(--wakeel)}
.side-sub{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:16px 11px 6px}
.agent-list{display:flex;flex-direction:column;gap:3px;max-height:360px;overflow:auto;padding:2px 0}
.agent-list a .caret{margin-inline-start:auto;color:var(--faint);font-size:10px;flex:none}
.agent-list a.open{background:var(--panel-3);color:var(--text)}
.agent-subtree{display:flex;flex-direction:column;margin:2px 0 6px 20px;padding-inline-start:10px;border-inline-start:1px solid var(--line)}
.sub-item{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:8px;color:var(--muted);font-size:13px;cursor:pointer}
.sub-item svg{width:15px;height:15px;color:var(--muted-2)}
.sub-item:hover{background:var(--panel-2);color:var(--text)}
.sub-item.active{background:var(--panel-2);color:var(--text)}
.sub-item.active svg{color:var(--wakeel)}
.agent-list a{display:flex;align-items:center;gap:11px;min-height:42px;padding:7px 11px;border-radius:10px;color:var(--muted);font-size:13.5px;cursor:pointer}
.agent-list a:hover{background:var(--panel-2);color:var(--text)}
.agent-list a .dot{width:26px;height:26px;border-radius:8px;background:var(--panel-3);display:grid;place-items:center;flex:none;color:var(--wakeel)}
.agent-list a .dot svg{width:15px;height:15px}
.agent-list a .an{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
/* topical agent icon colors */
.dot.ag-green{color:#22c55e;background:rgba(34,197,94,.15)}
.dot.ag-amber{color:#f6c44f;background:rgba(246,196,79,.15)}
.dot.ag-blue{color:#3b82f6;background:rgba(59,130,246,.15)}
.dot.ag-red{color:#ef4444;background:rgba(239,68,68,.15)}
.dot.ag-violet{color:#a78bfa;background:rgba(167,139,250,.15)}
.dot.ag-teal{color:#2dd4bf;background:rgba(45,212,191,.15)}
.dot.ag-gold{color:#eab308;background:rgba(234,179,8,.15)}
.dot.ag-slate{color:#94a3b8;background:rgba(148,163,184,.15)}
.agent-list a.open .dot{filter:brightness(1.1)}
/* real brand logos */
.blogo{display:inline-grid;place-items:center;border-radius:9px;flex:none;overflow:hidden;border:1px solid var(--line-2)}
.blogo svg{width:100%;height:100%;stroke:none}
.blogo.mono{color:#fff;font-weight:800;font-size:13px;font-family:var(--font);border:0}
.empty-mini{color:var(--faint);font-size:12.5px;padding:6px 11px}
.new-agent{margin:12px 4px 0;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border:1px dashed var(--line);border-radius:10px;color:var(--text);cursor:pointer;font-weight:600;font-size:13.5px}
.new-agent:hover{border-color:var(--wakeel);background:var(--panel-2)}
.side-foot{margin-top:auto;border-top:1px solid var(--line-2);padding-top:10px;display:flex;flex-direction:column;gap:2px}
.foot-row{display:flex;align-items:center;gap:11px;height:40px;padding:0 11px;border-radius:9px;color:var(--muted);cursor:pointer;font-size:13.5px}
.foot-row:hover{background:var(--panel-2);color:var(--text)}
.foot-row .av{width:26px;height:26px;border-radius:50%;background:#243247;display:grid;place-items:center;font-size:11px;font-weight:800;color:#dfe7f4;flex:none}

/* main */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg)}
.topbar{display:flex;align-items:center;gap:14px;height:60px;padding:0 26px;border-bottom:1px solid var(--line);flex:none}
.crumbs{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.crumbs b{color:var(--text);font-weight:650}
.crumbs .sep{color:var(--faint)}
.agent-tabs{display:inline-flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px;margin-inline-start:18px}
.agent-tabs button{border:0;background:transparent;color:var(--muted);padding:6px 15px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.agent-tabs button.active{background:var(--panel-3);color:var(--text)}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.icn-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.icn-btn:hover{color:var(--text);border-color:#2c3a55}
.content{flex:1;overflow:auto;min-width:0}
.pad{padding:34px 40px 70px;max-width:1120px;margin:0 auto}
.page-h{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.page-sub{color:var(--muted);font-size:14.5px;margin:0 0 26px}

/* home */
.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 24px 60px;overflow:auto}
/* once a conversation/proposal is showing, top-align so the whole thing is scrollable from the top */
.home.has-thread{justify-content:flex-start}
.home-inner{width:100%;max-width:780px}
.home h1{text-align:center;font-size:30px;font-weight:800;letter-spacing:-.025em;margin:0 0 24px}
.composer{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 16px 12px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.composer textarea{width:100%;border:0;background:transparent;outline:0;resize:none;font-size:15.5px;min-height:52px;line-height:1.55;color:var(--text)}
.composer textarea::placeholder{color:var(--muted-2)}
/* home composer: taller by default, drag the bottom-right corner to resize, auto-grows with content */
.home-composer textarea{min-height:130px;max-height:50vh;overflow-y:auto;resize:vertical}
.composer-foot{display:flex;align-items:center;gap:8px}
.toggle-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel-2);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.toggle-pill .lm{width:18px;height:18px;border-radius:50%;background:#1a2740;display:grid;place-items:center;font-size:10px;color:var(--muted)}
.toggle-pill.on{background:#fff;color:#0a0e16;border-color:#fff}
.toggle-pill.on .lm{background:#0a0e16;color:#fff}
.plus-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);display:grid;place-items:center;cursor:pointer;color:var(--muted);position:relative}
.plus-btn:hover{color:var(--text)}
.send-btn{margin-inline-start:auto;width:38px;height:38px;border-radius:50%;border:0;background:var(--wakeel);color:#fff;display:grid;place-items:center;cursor:pointer}
.send-btn:hover{background:#00b76b}
.send-btn:disabled{opacity:.4;cursor:default}
.recommend{margin-top:34px;text-align:center}
.recommend .rh{color:var(--muted);font-size:13px;font-weight:650;margin-bottom:14px;display:inline-flex;gap:6px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:9px 15px;font-size:13.5px;color:var(--text);cursor:pointer}
.chip:hover{border-color:var(--wakeel);background:var(--panel-2)}

.pop{position:absolute;bottom:44px;left:0;z-index:60;min-width:190px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.pop a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--text);font-size:13.5px;cursor:pointer}
.pop a:hover{background:var(--panel-3)}
.pop a svg{width:16px;height:16px;color:var(--muted)}

/* reasoning */
.thread{width:100%;max-width:720px;margin:0 auto;padding:26px 4px 40px;display:flex;flex-direction:column;gap:16px}
.bubble{max-width:88%;padding:12px 15px;border-radius:14px;font-size:14.5px;line-height:1.55}
.bubble.me{align-self:flex-end;background:var(--wakeel);color:#fff;border-bottom-right-radius:5px}
.bubble.ai{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:5px;white-space:pre-wrap}
.reason{align-self:flex-start;width:100%;border-left:2px solid var(--line);padding:2px 0 2px 16px;display:flex;flex-direction:column;gap:9px}
.reason .rt{color:var(--muted-2);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.rstep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13.5px;animation:fadein .3s ease}
.rstep .ri{width:18px;height:18px;flex:none;display:grid;place-items:center;color:var(--muted-2)}
.rstep.done .ri{color:var(--green)}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--wakeel);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.result-card{align-self:flex-start;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.result-card .rc-h{padding:13px 16px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;font-weight:650}
.result-card .rc-b{padding:6px 8px}
.mini-step{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;font-size:13.5px}
.mini-step .n{width:22px;height:22px;border-radius:7px;background:var(--blue-soft);color:var(--blue-2);display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.mini-step .k{margin-inline-start:auto;font-size:11px;color:var(--muted-2)}
.rc-actions{padding:12px 16px;border-top:1px solid var(--line-2);display:flex;gap:10px;align-items:center}

/* list/grid pages */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.gcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;transition:.15s}
.gcard:hover{border-color:#2c3a55;background:var(--panel-2);transform:translateY(-1px)}
.gcard .ic{width:40px;height:40px;border-radius:11px;background:var(--panel-3);display:grid;place-items:center;color:var(--wakeel);margin-bottom:12px}
.gcard .ic svg{width:20px;height:20px}
.gcard h3{margin:0;font-size:15px;font-weight:700}
.gcard .ar{font-family:var(--font-ar);color:var(--muted);font-size:12.5px;margin-top:2px}
.gcard p{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.gcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.pill-tag{font-size:11px;font-weight:700;color:var(--wakeel);background:#0d2b1e;border-radius:999px;padding:3px 10px}
.empty-state{text-align:center;color:var(--muted);padding:70px 0}
.empty-state .big{width:52px;height:52px;border-radius:15px;background:var(--panel-2);display:grid;place-items:center;margin:0 auto 14px;color:var(--muted-2)}
.empty-state h3{margin:0 0 4px;color:var(--text);font-size:16px}

.tabs{display:inline-flex;gap:3px;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:22px}
.tabs button{border:0;background:transparent;color:var(--muted);padding:7px 16px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.tabs button.active{background:var(--panel-3);color:var(--text)}
.searchbar{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel);border-radius:11px;padding:0 14px;height:44px;margin-bottom:18px;max-width:520px}
.searchbar input{flex:1;border:0;background:transparent;outline:0}
.searchbar svg{width:17px;height:17px;color:var(--muted-2)}
.dept-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.dept{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;gap:7px;align-items:center}
.dept svg{width:14px;height:14px}
.dept.active{background:#fff;color:#0a0e16;border-color:#fff}
.dept.active svg{color:#0a0e16}

.rowlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lrow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line-2);background:var(--panel)}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--panel-2)}
.lrow .ic{width:36px;height:36px;border-radius:10px;background:var(--panel-3);display:grid;place-items:center;color:var(--muted);flex:none;font-weight:700;font-size:13px}
.lrow .info{flex:1;min-width:0}
.lrow .info .t{font-weight:650;font-size:14px}
.lrow .info .d{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-tag{font-size:10.5px;font-weight:700;color:var(--muted-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.st-pill{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;text-transform:capitalize}
.st-pill.ok{background:#0d2b1e;color:#3ddc8a}.st-pill.run{background:#12233f;color:#5b9bff}.st-pill.bad{background:#2b1416;color:#ff8b8b}.st-pill.idle{background:var(--panel-3);color:var(--muted)}
/* analytics */
.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media(max-width:760px){.metric-row{grid-template-columns:1fr 1fr}}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.metric .mv{font-size:28px;font-weight:800;letter-spacing:-.02em}
.metric .ml{font-size:12.5px;color:var(--muted);margin-top:3px}
.metric.ok .mv{color:var(--green)}.metric.warn .mv{color:var(--yellow)}.metric.bad .mv{color:#ff8b8b}
.an-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-bottom:22px}
@media(max-width:760px){.an-grid{grid-template-columns:1fr}}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px}
.bar-col{flex:1;height:100%;display:flex;align-items:flex-end}
.bar-col .bar{width:100%;min-height:3px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--wakeel),#0b7a48)}
.bar-x{display:flex;gap:10px;margin-top:8px}.bar-x span{flex:1;text-align:center;font-size:10.5px;color:var(--faint)}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--muted)}
.kv:last-child{border-bottom:0}.kv b{color:var(--text)}
.prog{height:7px;background:var(--panel-3);border-radius:6px;overflow:hidden}
.prog-in{height:100%;background:var(--wakeel);border-radius:6px}

/* FLOW */
.flow-wrap{flex:1;display:flex;flex-direction:column;min-height:0}
.flow-head{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 30px 16px}
.flow-head h1{font-size:24px;font-weight:800;margin:0 0 3px}
.flow-head p{margin:0;color:var(--muted);font-size:13.5px}
.flow-head .ctrls{display:flex;align-items:center;gap:14px}
.draft-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:8px 13px;font-size:13.5px;font-weight:600;cursor:pointer}
.tmode{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px}
.switch{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:.15s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.switch.on{background:var(--wakeel)}.switch.on::after{left:18px}
.studio-embed{flex:1;margin:0 20px 20px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg)}
.studio-embed iframe{width:100%;height:100%;border:0;display:block}
.flow-split{flex:1;display:flex;min-height:0}
.canvas{flex:1;margin:0 0 20px 20px;border-radius:16px;background:var(--canvas);background-image:radial-gradient(var(--canvas-line) 1px,transparent 1px);background-size:20px 20px;overflow:auto;position:relative;padding:22px 0 60px}
/* node config panel (Beam-style, beside the canvas) */
.node-panel{width:384px;flex:none;margin:0 20px 20px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);display:flex;flex-direction:column;overflow:hidden;animation:panelin .18s ease}
@keyframes panelin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.np-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.np-title{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:15px;font-weight:700;color:var(--text);outline:0}
.np-title:focus{border-color:var(--wakeel)}
.np-body{flex:1;overflow:auto;padding:18px}
.np-sec{margin-bottom:22px}
.np-label{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.np-label.collapse{cursor:pointer}.np-label.closed+*{display:none}
.np-tool{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel-2);border-radius:11px;padding:12px 14px;font-size:14px;font-weight:600}
.np-tool-ic{width:22px;height:22px;border-radius:6px;background:var(--blue-soft);color:var(--blue-2);display:grid;place-items:center;flex:none}
.np-tool-ic svg{width:13px;height:13px}
.np-btns{display:flex;gap:8px;margin-top:10px}
.np-consent-ic{width:26px;height:26px;border-radius:8px;background:#2a2410;color:var(--yellow);display:grid;place-items:center;flex:none}
.np-consent-ic svg{width:15px;height:15px}
.node-panel .consent{border-color:var(--line);background:var(--panel-2)}
.node-panel .consent .switch{flex:none}
.np-var{border:1px solid var(--line);background:var(--panel-2);border-radius:11px;padding:12px 14px}
.np-var-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.np-var-name{font-size:13px;font-weight:600}
.np-fill{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.np-var-sel{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#060c18;border-radius:9px;padding:9px 12px;font-size:13px;color:var(--muted)}
.np-var-sel svg{width:13px;height:13px;color:var(--blue-2)}
.np-foot{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--line-2)}
.np-msg{font-size:12px;color:var(--muted)}
.cnode.selected{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.22)}
/* configure tool page */
.ct-head{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--line);flex:none}
.ct-title{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:750}
.ct-msg{font-size:12px;color:var(--muted)}
.ct-body{flex:1;display:flex;min-height:0;overflow:hidden}
.ct-left{flex:1;overflow:auto;padding:24px 28px;min-width:0}
.ct-right{width:400px;flex:none;border-left:1px solid var(--line);background:var(--panel);padding:24px;overflow:auto}
@media(max-width:1000px){.ct-right{width:320px}}
.ct-block{margin-bottom:26px}
.ct-block-h{font-size:14px;font-weight:750;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.ct-badge{font-size:10.5px;font-weight:700;color:var(--blue-2);background:var(--blue-soft);border-radius:6px;padding:2px 8px}
.ct-lbl{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.ct-prompt{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;line-height:1.55;resize:vertical}
.ct-vars{display:flex;flex-direction:column;gap:8px}
.ct-var-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:11px 13px}
.ct-var-nm{font-family:ui-monospace,monospace;font-size:12.5px;font-weight:600}
.ct-out{margin-top:16px;border:1px solid var(--line);background:var(--panel-2);border-radius:11px;padding:14px;font-size:12.5px;line-height:1.6;white-space:pre-wrap;max-height:320px;overflow:auto}
.ct-out-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
/* governance */
.gov-boundary{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#0d2b1e,#0e1728);border:1px solid #1c4630;border-radius:14px;padding:16px 18px;margin-bottom:18px}
.gov-boundary svg{color:var(--green);width:20px;height:20px;flex:none;margin-top:2px}
.gov-boundary .gb-h{font-weight:750;font-size:13px;margin-bottom:3px}
.gov-boundary>div>div:last-child{color:var(--muted);font-size:13.5px;line-height:1.5}
.gov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:820px){.gov-grid{grid-template-columns:1fr}}
.gov-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.gov-card.warn{border-color:#3a3016;background:#14130c}
.gov-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px;margin-bottom:10px}
.gov-h svg{width:16px;height:16px;color:var(--wakeel)}
.gov-ul{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px}
.gov-ul li{font-size:13px;color:var(--ink-2,var(--muted));line-height:1.45}
.gov-ul.warn li::marker{color:var(--yellow)}
.gov-text{font-size:13px;color:var(--muted);line-height:1.5}
.n8n-step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.n8n-step:last-child{border-bottom:0}
.n8n-step .n8n-n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--panel-3);color:var(--muted);display:grid;place-items:center;font-weight:800;font-size:12px;border:1px solid var(--line)}
.n8n-step.done .n8n-n{background:rgba(34,197,94,.16);color:#22c55e;border-color:rgba(34,197,94,.35)}
.n8n-step.done .n8n-n svg{width:15px;height:15px}
.n8n-step:not(.done) .n8n-n{background:var(--wakeel);color:#fff;border:0}
.btn .blogo{border:0}
.n8n-step b{font-size:14px}
.n8n-step .code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;background:var(--black);color:#d6f5e2;border-radius:9px;padding:10px 12px;white-space:pre;overflow-x:auto}
.publish-bar{display:flex;align-items:center;gap:12px;max-width:660px;margin:6px auto 22px;background:#fff;border:1px solid var(--cnode-line);border-radius:12px;padding:12px 16px;color:#5a6576;font-size:13.5px;box-shadow:0 4px 14px rgba(16,24,40,.06)}
.publish-bar .btn{margin-inline-start:auto}
.publish-bar .btn.primary{background:#0d1526;border-color:#0d1526;color:#fff}
.vflow{display:flex;flex-direction:column;align-items:center;gap:0;padding:0 20px}
.cnode{width:340px;max-width:86vw;background:var(--cnode);border:1px solid var(--cnode-line);border-radius:14px;padding:15px 17px;box-shadow:0 6px 18px rgba(16,24,40,.06);position:relative;animation:noderise .35s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes noderise{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.cnode .top{display:flex;align-items:flex-start;gap:10px}
.cnode .idx{width:24px;height:24px;border-radius:8px;background:#eef3ff;color:#2563eb;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.cnode .ttl{color:var(--cink);font-weight:700;font-size:14px;line-height:1.25}
.cnode .dots{margin-inline-start:auto;color:#aab3c2;font-weight:800;cursor:pointer}
.cnode .chip2{display:inline-flex;align-items:center;gap:7px;margin-top:11px;border:1px solid var(--cnode-line);border-radius:9px;padding:6px 10px;color:#48566b;font-size:12.5px;background:#fafbfc}
.cnode .chip2 .sq{width:14px;height:14px;border-radius:4px;background:#eef3ff;display:grid;place-items:center;color:#2563eb;flex:none}
.cnode .chip2 svg{width:12px;height:12px}
.cnode.entry .idx{background:#e7f6ed;color:#11a15a}
.cnode.end .idx{background:#f1f2f5;color:#68758a}
.cnode.cond .idx{background:#fff4e0;color:#b5850f}
.insert-wrap{display:flex;flex-direction:column;align-items:center}
.insert-wrap .connector{height:13px}
.insert-btn{width:26px;height:26px;border-radius:50%;border:1px dashed #b8c2d0;background:#fff;color:#5a6576;display:grid;place-items:center;cursor:pointer;transition:.15s;opacity:.55}
.insert-btn:hover{opacity:1;border-color:var(--wakeel);color:var(--wakeel);border-style:solid}
.insert-btn svg{width:14px;height:14px}
.insert-btn{position:relative}
.ins-pop{position:absolute;left:32px;top:-6px;z-index:20;min-width:150px;background:#fff;border:1px solid var(--cnode-line);border-radius:10px;padding:5px;box-shadow:0 12px 30px rgba(16,24,40,.18)}
.ins-pop a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;color:#33404f;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.ins-pop a:hover{background:#f1f4f8;color:var(--wakeel)}
.ins-pop a svg{width:14px;height:14px;color:#68758a}
.connector{width:2px;height:26px;background:#cdd6e2;position:relative}
.connector::after{content:"";position:absolute;bottom:-1px;left:50%;width:7px;height:7px;border-right:2px solid #cdd6e2;border-bottom:2px solid #cdd6e2;transform:translateX(-50%) rotate(45deg)}
.zoom{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--cnode-line);border-radius:10px;padding:4px;box-shadow:0 4px 12px rgba(16,24,40,.08)}
.zoom button{width:30px;height:30px;border:0;background:transparent;color:#5a6576;cursor:pointer;border-radius:7px;display:grid;place-items:center}
.zoom button:hover{background:#f1f4f8}
.draft-btn.run{border-color:#0b7a48;background:var(--wakeel);color:#fff}
.draft-btn.run svg{color:#fff}
.cnode .tick{margin-inline-start:8px;flex:none}
.cnode.running{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.18),0 6px 18px rgba(37,99,235,.16)}
.cnode.running .idx{background:#2563eb;color:#fff;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.4)}50%{box-shadow:0 0 0 6px rgba(37,99,235,0)}}
.cnode.done{border-color:#bfe6cf}
.cnode.done .tick::after{content:"✓";color:#11a15a;font-weight:800;font-size:13px}
.cnode.failed{border-color:#f3c2c2}
.cnode.failed .tick::after{content:"✕";color:#ce1126;font-weight:800;font-size:13px}
/* run log panel */
.runlog{position:absolute;right:16px;bottom:16px;width:340px;max-height:60%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--cnode-line);border-radius:14px;box-shadow:0 18px 50px rgba(16,24,40,.22);overflow:hidden;z-index:5}
.rl-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef1f5;color:#0d1526;font-weight:700;font-size:13.5px}
.rl-h .x{color:#8a94a6}
.rl-body{flex:1;overflow:auto;padding:8px}
.rl-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13px;color:#33404f}
.rl-row .rl-ic{width:18px;height:18px;display:grid;place-items:center;flex:none;color:#68758a;font-weight:800}
.rl-row.done .rl-ic{color:#11a15a}.rl-row.failed .rl-ic{color:#ce1126}
.rl-row .rl-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-row .rl-k{margin-inline-start:auto;font-size:11px;color:#9aa5b4;flex:none}
.rl-row .spin{width:13px;height:13px;border-top-color:#2563eb;border-color:#e3e8ef}
.rl-out{margin:8px;padding:11px 13px;background:#f6f8fb;border:1px solid #e6e9f0;border-radius:10px;font-size:12.5px;color:#33404f;white-space:pre-wrap;line-height:1.5}
.rl-out-h{font-weight:700;color:#0d1526;margin-bottom:5px;font-size:11px;text-transform:uppercase;letter-spacing:.05em}

/* copilot */
.copilot{width:372px;flex:none;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line)}
@media(max-width:1100px){.copilot{width:320px}}
.cop-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.cop-h .logo{width:26px;height:26px;border-radius:8px}.cop-h .logo span{font-size:10px}
.cop-h .nm{font-weight:700;font-size:14px}
.cop-body{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.cop-hero{text-align:center;padding:22px 6px 10px}
.cop-hero .logo{width:48px;height:48px;border-radius:14px;margin:0 auto 12px}.cop-hero .logo span{font-size:17px}
.cop-hero h3{margin:0 0 4px;font-size:16px}
.cop-hero p{margin:0;color:var(--muted);font-size:13px}
.cop-msg{font-size:13px;line-height:1.55;border-radius:12px;padding:12px 14px}
.cop-msg.ai{background:var(--panel-2);border:1px solid var(--line-2)}
.cop-msg.me{align-self:flex-end;background:var(--wakeel);color:#fff;max-width:88%}
.cop-msg .h{font-weight:700;margin-bottom:4px}
.cop-foot{padding:14px;border-top:1px solid var(--line-2);display:flex;gap:8px}
.cop-foot input{flex:1;border:1px solid var(--line);background:#060c18;border-radius:10px;padding:10px 13px;outline:0;font-size:13px}
.cop-foot input:focus{border-color:var(--wakeel)}
.cop-foot button{width:42px;border:0;border-radius:10px;background:var(--wakeel);color:#fff;cursor:pointer;display:grid;place-items:center}

.modal-back{position:fixed;inset:0;z-index:400;background:rgba(3,7,14,.6);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}
.modal{width:560px;max-width:100%;max-height:86vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.modal h2{margin:0 0 14px;font-size:18px;display:flex;align-items:center}
.x{margin-inline-start:auto;background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer;line-height:1}
.fade{animation:fadein .25s ease}

.cfg{max-width:640px}
.cfg .kick{color:var(--muted);font-size:13.5px;margin-bottom:20px}
.consent{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0}
.consent .info{flex:1}.consent .info .t{font-weight:650;font-size:13.5px}.consent .info .d{color:var(--muted);font-size:12.5px;margin-top:2px}
.section-line{height:1px;background:var(--line-2);margin:22px 0}

@media(max-width:760px){
  .side{position:fixed;inset:0 auto 0 0;z-index:100;transform:translateX(-100%);transition:.2s}
  .side.open{transform:none}
  .copilot{display:none}
  .pad{padding:22px 16px 60px}
  .signin{grid-template-columns:1fr}.signin-hero{display:none}
}

/* automations landing */
.auto-hero{text-align:center;padding:26px 0 6px}
.auto-mark{width:60px;height:60px;margin:0 auto;border-radius:17px;background:linear-gradient(135deg,var(--wakeel),#0b7a48);display:grid;place-items:center;color:#fff}
.auto-mark svg{width:28px;height:28px}

/* ---------- design proposal card (Beam-style propose → review → build) ---------- */
.design-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 20px 8px;margin:2px 0 4px;max-width:760px}
.ds-intro{font-size:15px;line-height:1.55;margin-bottom:14px}
.ds-summary{color:var(--muted);font-size:13.5px;line-height:1.6;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:11px;margin-bottom:18px}
/* plain-language, non-technical "here's what I'll do for you" */
.ds-plain{background:linear-gradient(180deg,rgba(0,168,98,.09),var(--panel-2));border:1px solid rgba(0,168,98,.28);border-radius:14px;padding:16px 16px 8px;margin-bottom:16px}
.ds-plain-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.dpl-badge{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--wakeel);color:#fff}
.dpl-badge svg{width:19px;height:19px}
.dpl-t{font-weight:750;font-size:15.5px}
.dpl-intro{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:3px}
.dpl-steps{display:flex;flex-direction:column;gap:9px}
.dpl-step{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 14px}
.dpl-ico{font-size:20px;line-height:1;flex:none;width:26px;text-align:center}
.dpl-n{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--panel-3);color:var(--muted);border:1px solid var(--line)}
.dpl-x{font-size:14.5px;line-height:1.5}
.dpl-safe{display:flex;align-items:center;gap:9px;font-size:13px;color:#3ee08a;background:rgba(0,168,98,.08);border:1px solid rgba(0,168,98,.25);border-radius:10px;padding:10px 13px;margin:14px 0 8px;line-height:1.45}
.dpl-safe svg{width:16px;height:16px;flex:none}
.ds-tech{margin-bottom:16px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel-2)}
.ds-tech>summary{cursor:pointer;padding:12px 15px;font-size:13.5px;font-weight:650;color:var(--muted);display:flex;align-items:center;gap:9px;list-style:none;user-select:none}
.ds-tech>summary::-webkit-details-marker{display:none}
.ds-tech>summary svg{width:16px;height:16px}
.ds-tech>summary::after{content:"▸";margin-inline-start:auto;transition:transform .15s}
.ds-tech[open]>summary::after{transform:rotate(90deg)}
.ds-tech[open]>summary{border-bottom:1px solid var(--line-2)}
.ds-tech>*:not(summary){margin-inline:15px}
.ds-tech>.ds-summary:first-of-type{margin-top:15px}
.ds-sec{margin-bottom:20px}
.ds-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.ds-h svg{width:15px;height:15px;color:var(--wakeel)}
/* flow diagram */
.dg{display:flex;flex-direction:column;align-items:center;gap:0}
.dg-node{display:flex;align-items:center;gap:11px;width:100%;max-width:420px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.dg-node.entry{border-color:#2a5b8f;background:linear-gradient(180deg,#0f2136,var(--panel-2))}
.dg-node.cond{border-color:#7a6320;background:linear-gradient(180deg,#241f10,var(--panel-2))}
.dg-node.tool{border-color:#2d6b4a}
.dg-node.end{border-color:#2f6b3f;background:linear-gradient(180deg,#0f2417,var(--panel-2))}
.dg-ic{width:28px;height:28px;border-radius:8px;background:var(--panel-3);display:grid;place-items:center;flex:none;color:var(--wakeel)}
.dg-ic svg{width:16px;height:16px}
.dg-node.entry .dg-ic{color:#5aa2e6}.dg-node.cond .dg-ic{color:var(--yellow)}
.dg-txt{display:flex;flex-direction:column;min-width:0}
.dg-txt b{font-size:13.5px;font-weight:650}
.dg-txt span{font-size:11.5px;color:var(--muted-2);margin-top:1px}
.dg-edges{display:flex;gap:26px;padding:5px 0}
.dg-edge{display:flex;flex-direction:column;align-items:center;gap:1px}
.dg-arr{color:var(--faint);font-size:15px;line-height:1}
.dg-lbl{font-size:10.5px;color:var(--yellow);background:#241f10;border:1px solid #4a3d16;border-radius:6px;padding:1px 7px}
.dg-edges.branch .dg-edge{position:relative}
/* tables */
.ds-tbl{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.ds-tbl th{text-align:left;font-weight:650;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:8px 12px;border-bottom:1px solid var(--line-2);background:var(--panel-3)}
.ds-tbl td{padding:8px 12px;border-bottom:1px solid var(--line-2)}
.ds-tbl tr:last-child td{border-bottom:none}
.ds-tbl td.mut{color:var(--muted-2)}
.ds-chips{display:flex;flex-wrap:wrap;gap:7px}
.ds-chip{font-size:12px;padding:4px 11px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.ds-list{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px}
.ds-list li{font-size:13px;color:var(--muted);line-height:1.5}
.ds-foot{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line-2);margin:0 -20px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ds-ask{font-size:14px;font-weight:600}
.ds-actions{display:flex;gap:10px}
.btn .spin{border-color:rgba(255,255,255,.3);border-top-color:#fff;margin-inline-end:6px;vertical-align:middle}

/* ---------- Automation Modes (Copilot / Autopilot) ---------- */
.mode-seg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode-opt{display:flex;align-items:flex-start;gap:11px;text-align:start;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);cursor:pointer;transition:.15s}
.mode-opt:hover{border-color:var(--line-2);background:var(--panel-3)}
.mode-opt.on{border-color:var(--wakeel);background:linear-gradient(180deg,rgba(0,168,98,.10),var(--panel-2));box-shadow:0 0 0 1px rgba(0,168,98,.35) inset}
.mode-opt svg{width:20px;height:20px;color:var(--muted-2);flex:none;margin-top:1px}
.mode-opt.on svg{color:var(--wakeel)}
.mode-opt b{display:block;font-size:14px}
.mode-opt span{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.auto-list{display:flex;flex-direction:column;gap:8px;max-width:760px}
.auto-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.ar-info{display:flex;align-items:center;gap:12px;min-width:0}
.ar-info .dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--panel-3)}
.ar-info .dot svg{width:16px;height:16px}
.ar-t{font-size:14px;font-weight:600}
.ar-d{font-size:12px;color:var(--muted-2)}
.ar-toggle{display:flex;gap:6px;flex:none;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.pill-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.pill-toggle svg{width:14px;height:14px}
.pill-toggle.on{background:var(--panel-3);color:var(--text)}
.pill-toggle[data-v="autopilot"].on{color:#22c55e}
.pill-toggle[data-v="copilot"].on{color:var(--yellow)}

/* ---------- Analytics parity: range seg, change pills, gauge ring, ratings ---------- */
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--panel-3);color:var(--text)}
.metric-row.m4{grid-template-columns:repeat(4,1fr)}
.chgpill{font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--panel-3);color:var(--muted);vertical-align:middle;margin-inline-start:4px}
.chgpill.up{color:#22c55e;background:rgba(34,197,94,.12)}
.chgpill.down{color:#ff8b8b;background:rgba(239,68,68,.12)}
.an-grid2{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
@media(max-width:900px){.an-grid2{grid-template-columns:1fr 1fr}}
.gcard.gauge,.gcard.kpi{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 16px}
.gcard .gh{font-size:12px;font-weight:650;color:var(--muted);letter-spacing:.02em}
.gcard .gsub{font-size:11.5px;color:var(--faint);margin-top:8px}
.ring{width:96px;height:96px;margin:10px 0 2px;transform:rotate(-90deg)}
.ring .rbg{fill:none;stroke:var(--line);stroke-width:3.4}
.ring .rfg{fill:none;stroke-width:3.4;stroke-linecap:round;transition:stroke-dasharray .6s}
.ring.g .rfg{stroke:#22c55e}.ring.y .rfg{stroke:var(--yellow)}.ring.r .rfg{stroke:#ef4444}
.ring .rtx{fill:var(--text);font-size:9px;font-weight:800;text-anchor:middle;transform:rotate(90deg);transform-origin:21px 21px;stroke:none}
.kv-big{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:14px 0 2px}
.kv-big span{font-size:16px;font-weight:600;color:var(--muted);margin-inline-start:2px}
.rate{display:flex;align-items:center;gap:8px}
.rate-l{font-size:11.5px;color:var(--faint)}
.rbtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted-2);cursor:pointer;display:grid;place-items:center}
.rbtn svg{width:15px;height:15px}
.rbtn.down svg{transform:rotate(180deg)}
.rbtn:hover{color:var(--text);border-color:var(--line-2)}
.rbtn.up.sel{color:#22c55e;border-color:#22c55e;background:rgba(34,197,94,.1)}
.rbtn.down.sel{color:#ff8b8b;border-color:#5a1e26;background:rgba(239,68,68,.1)}

/* ---------- Evaluation Framework ---------- */
.ev-badge{font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:20px}
.ev-badge.g{color:#22c55e;background:rgba(34,197,94,.14)}
.ev-badge.y{color:var(--yellow);background:rgba(246,196,79,.14)}
.ev-badge.r{color:#ff8b8b;background:rgba(239,68,68,.14)}
.ev-list{display:flex;flex-direction:column;gap:9px;max-width:900px}
.ev-case{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.ev-main{display:flex;gap:12px;min-width:0}
.ev-verdict{flex:none;padding-top:1px}
.ev-txt{min-width:0}
.ev-in{font-size:13.5px;font-weight:550;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ev-exp{font-size:12.5px;color:var(--muted);margin-top:4px}
.ev-exp b{color:var(--muted-2);font-weight:650}
.ev-reason{font-size:12px;margin-top:6px;color:var(--faint)}
.ev-actions{display:flex;gap:6px;flex:none;align-items:center}
.st-pill.bad{background:rgba(239,68,68,.14);color:#ff8b8b}

/* ---------- Records / Views table ---------- */
.agent-tabs{overflow-x:auto;scrollbar-width:none}
.agent-tabs::-webkit-scrollbar{display:none}
.rec-wrap{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:auto;background:var(--panel)}
.rec-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.rec-tbl th{text-align:start;font-weight:650;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap;position:sticky;top:0}
.rec-tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap;color:var(--text)}
.rec-tbl tr:last-child td{border-bottom:0}
.rec-tbl tbody tr:hover{background:var(--panel-2)}
.rec-tbl .icn-btn{opacity:0;width:26px;height:26px}
.rec-tbl tr:hover .icn-btn{opacity:1}
.st-pill.info{background:var(--blue-soft);color:#8bb6ff}
.st-pill.warn{background:rgba(246,196,79,.14);color:var(--yellow)}

/* ---------- Variable Fill + Structured Output ---------- */
.var-chips{display:flex;flex-wrap:wrap;gap:7px}
.vchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:20px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);cursor:pointer}
.vchip:hover{border-color:var(--wakeel);color:var(--text)}
.vchip svg{width:13px;height:13px;color:var(--wakeel)}
.sch-list{display:flex;flex-direction:column;gap:8px}
.sch-row{display:flex;gap:8px;align-items:center}
.sch-row .sch-name{flex:1;min-height:38px}
.sch-row .sch-type{width:120px;flex:none;min-height:38px}
.sch-row .icn-btn{flex:none}

/* ---------- Getting Started / Core Concepts help ---------- */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
@media(max-width:640px){.help-grid{grid-template-columns:1fr}}
.help-card{display:flex;gap:12px;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.help-card .hc-ic{width:32px;height:32px;border-radius:9px;background:var(--panel-3);display:grid;place-items:center;color:var(--wakeel);flex:none}
.help-card .hc-ic svg{width:17px;height:17px}
.help-card b{font-size:14px}
.help-card p{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.help-cta{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:13px;background:linear-gradient(180deg,rgba(0,168,98,.10),var(--panel-2));border:1px solid #123a2a}
.help-cta b{display:block;font-size:15px}
.help-cta span{font-size:12.5px;color:var(--muted)}
.help-cta .btn{flex:none;margin-inline-start:auto}

/* ---------- chat-first flow: assistant + tidy header ---------- */
.cop-h{display:flex;align-items:center;gap:11px}
.cop-sub{font-size:11.5px;color:var(--muted-2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cop-chips{display:flex;flex-direction:column;gap:8px;margin-top:16px;width:100%}
.cop-chip{text-align:start;font-size:13px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--muted);cursor:pointer;transition:.15s}
.cop-chip:hover{border-color:var(--wakeel);color:var(--text);background:var(--panel-3)}
.draft-btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted-2)}
.draft-btn.ghost:hover{color:var(--text);border-color:var(--line-2)}
.draft-btn.ghost svg{width:15px;height:15px}
/* when a node panel is open, tuck the assistant away so the flow isn't crowded */
.copilot.cop-tuck{display:none}

/* fix: node panel must actually hide when [hidden] (was showing as a blank column) */
.node-panel[hidden]{display:none}

/* ---------- fit all agent tabs when the assistant panel is open ---------- */
.topbar .crumbs{min-width:0}
.topbar .crumbs b{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.agent-tabs{margin-inline-start:10px;flex:0 1 auto;gap:1px}
.agent-tabs button{padding:6px 9px;font-size:12px;white-space:nowrap}
.main .topbar .top-actions{flex:none}

/* ---------- Developers / API page ---------- */
.code-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--black,#070b12);margin-bottom:12px}
.cc-h{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--line-2);font-size:12px;font-weight:650;color:var(--muted)}
.code-card pre{margin:0;padding:14px 15px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#d7e3ec;white-space:pre-wrap;overflow-x:auto}
.key-reveal{display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 15px;border-radius:11px;background:var(--green-soft);border:1px solid #123a2a}
.key-reveal svg{color:var(--wakeel);flex:none}
.key-reveal b{font-size:13px}
.key-val{font-family:var(--mono);font-size:13px;color:var(--text);margin-top:4px;word-break:break-all}
.key-reveal .btn{flex:none;margin-inline-start:auto}
.acard code{font-family:var(--mono);background:var(--panel-3);padding:1px 5px;border-radius:5px;font-size:12px}

/* ---------- toast (publish confirmation etc.) ---------- */
.wk-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);z-index:400;display:flex;align-items:center;gap:9px;background:var(--panel-3);border:1px solid #123a2a;border-radius:12px;padding:12px 18px;font-size:13.5px;font-weight:600;color:var(--text);box-shadow:0 16px 40px -14px rgba(0,0,0,.6);opacity:0;transition:.28s;max-width:520px}
.wk-toast.in{opacity:1;transform:translate(-50%,0)}
.wk-toast svg{color:var(--wakeel);width:17px;height:17px;flex:none}
.wk-toast.bad{border-color:#5a1e26}

/* ---------- Triggers: Run now hero + run modal ---------- */
.run-hero{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:15px;background:linear-gradient(180deg,rgba(0,168,98,.10),var(--panel-2));border:1px solid #123a2a;margin-top:6px}
.run-hero .rh-ic{width:46px;height:46px;border-radius:12px;background:var(--wakeel);display:grid;place-items:center;color:#fff;flex:none}
.run-hero .rh-ic svg{width:22px;height:22px}
.run-hero h2{margin:0;font-size:18px}
.run-hero p{margin:3px 0 0;font-size:13.5px;color:var(--muted)}
.run-hero .btn{flex:none}
.rn-steps{margin-top:16px;display:flex;flex-direction:column;gap:6px;max-height:230px;overflow:auto}
.rn-step{display:flex;align-items:center;gap:9px;font-size:13px;padding:8px 12px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--muted)}
.rn-step.ok{color:var(--text)}
.rn-step .rn-tick{display:inline-flex}
.rn-step.ok .rn-tick svg{color:#22c55e;width:15px;height:15px}
.rn-step.bad{color:#ff8b8b}
.rn-out{margin-top:16px}
.rn-out-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.rn-out-h svg{color:var(--wakeel);width:15px;height:15px}
.rn-out-b{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:14px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;max-height:300px;overflow:auto}

/* ---------- Automations (chat-first, clean) ---------- */
.auto-card{margin-bottom:12px}
.auto-card .dot{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--panel-3)}
.auto-card .dot svg{width:16px;height:16px}
.auto-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.astep{font-size:12px;padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);white-space:nowrap}
.astep.ag-blue{color:#5aa2e6}.astep.ag-green{color:#22c55e}.astep.ag-violet{color:#a78bfa}.astep.ag-amber{color:var(--yellow)}.astep.ag-teal{color:#2dd4bf}
.astep-arr{color:var(--faint);font-size:12px}
.sw2{position:relative;display:inline-block;width:36px;height:20px;flex:none;cursor:pointer}
.sw2 input{opacity:0;width:0;height:0}
.sw2 span{position:absolute;inset:0;background:var(--panel-3);border:1px solid var(--line);border-radius:20px;transition:.2s}
.sw2 span::before{content:"";position:absolute;width:14px;height:14px;left:3px;top:2px;background:var(--muted);border-radius:50%;transition:.2s}
.sw2 input:checked+span{background:rgba(0,168,98,.3);border-color:var(--wakeel)}
.sw2 input:checked+span::before{transform:translateX(15px);background:var(--wakeel)}

/* ---------- skills in chat ---------- */
.skill-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:6px 8px 6px 11px;border-radius:20px;background:var(--panel-3);border:1px solid var(--wakeel);color:var(--text)}
.skill-chip svg{width:14px;height:14px;color:var(--wakeel)}
.skill-chip .skx{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.skill-chip .skx:hover{color:var(--text)}
.skill-hint{color:var(--muted);font-size:14px;margin:-8px 0 20px;text-align:center;max-width:52ch;margin-inline:auto}

/* ---------- Teams (multi-agent) ---------- */
.astep.ag-violet{color:#a78bfa}
.team-members{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:11px;padding:8px;background:var(--panel-2)}
.team-mem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px}
.team-mem:hover{background:var(--panel-3)}
.team-mem input{width:16px;height:16px;accent-color:var(--wakeel)}
.team-plan{padding:13px 15px;border-radius:11px;background:linear-gradient(180deg,rgba(124,58,237,.10),var(--panel-2));border:1px solid #3a2a6a;margin-bottom:12px}
.team-plan b{display:flex;align-items:center;gap:7px;font-size:13px}
.team-plan b svg{width:15px;height:15px;color:#a78bfa}
.team-plan p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---- Governance & Audit center ---- */
.gov-posture{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.gv-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin-bottom:12px}
.gv-h svg{width:16px;height:16px;color:var(--green)}
.gv-chips{display:flex;flex-wrap:wrap;gap:7px}
.gv-chip{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--panel-3);border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.audit-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.audit-row{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line-2)}
.audit-row:last-child{border-bottom:none}
.au-dot{width:9px;height:9px;border-radius:50%;flex:none}
.au-dot.g{background:var(--green)} .au-dot.y{background:#e6b02e} .au-dot.b{background:#4a7ad6}
.au-main{flex:1;min-width:0}
.au-t{font-size:13.5px}
.au-det{color:var(--muted)}
.au-meta{font-size:11.5px;color:var(--muted-2);margin-top:2px}
.au-time{font-size:11.5px;color:var(--faint);flex:none;white-space:nowrap}
@media (max-width:720px){.gov-posture{grid-template-columns:1fr}}

/* ---- Security & Access ---- */
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.role-card{display:flex;flex-direction:column}
.rc-h{margin-bottom:9px}
.rbadge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700}
.rbadge.r-admin{background:rgba(0,168,98,.16);color:#3ee08a;border:1px solid #1c5f3f}
.rbadge.r-officer{background:rgba(74,122,214,.16);color:#7fa8f0;border:1px solid #2b4372}
.rbadge.r-viewer{background:rgba(150,164,183,.14);color:var(--muted);border:1px solid var(--line)}
.rc-desc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:12px}
.rc-can{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.rc-can li{display:flex;align-items:flex-start;gap:8px;font-size:12.8px;line-height:1.4}
.rc-can li svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--green)}
.rc-can li.yes{color:var(--text)}
.rc-can li.no{color:var(--muted-2)}
.mem-tbl{display:flex;flex-direction:column}
.mem-row{display:flex;align-items:center;gap:13px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.mem-row:last-child{border-bottom:none}
.mem-row .av{width:34px;height:34px;border-radius:50%;background:var(--panel-3);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;border:1px solid var(--line)}
.mem-info{flex:1;min-width:0}
.mem-n{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.mem-n .you{font-size:10.5px;font-weight:700;color:var(--green);background:rgba(0,168,98,.14);padding:1px 6px;border-radius:5px}
.mem-e{font-size:12px;color:var(--muted-2)}
.mem-last{font-size:11.5px;color:var(--faint);flex:none;white-space:nowrap}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.sso-state{font-size:13px;color:var(--muted-2);padding:9px 12px;border-radius:9px;background:var(--panel-3);border:1px solid var(--line);display:flex;align-items:center;gap:7px}
.sso-state.on{color:#3ee08a;border-color:#1c5f3f;background:rgba(0,168,98,.10)}
.sso-state svg{width:15px;height:15px}
.sso-note{font-size:11.5px;color:var(--faint);margin-top:9px;line-height:1.5}
.pol-check{display:flex;align-items:center;gap:9px;font-size:13px;margin:4px 0 14px;cursor:pointer}
.pol-check input{width:16px;height:16px;accent-color:var(--wakeel)}
.input.sm{min-height:36px}
@media (max-width:820px){.role-grid,.sec-grid{grid-template-columns:1fr}}

/* ---- AI residency banner ---- */
.ai-residency{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:12px;margin-bottom:20px;border:1px solid var(--line);background:var(--panel-2)}
.ai-residency.on{border-color:#1c5f3f;background:linear-gradient(180deg,rgba(0,168,98,.08),var(--panel-2))}
.ai-residency.warn{border-color:#6b5a2e;background:linear-gradient(180deg,rgba(230,176,46,.07),var(--panel-2))}
.air-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--panel-3);border:1px solid var(--line)}
.ai-residency.on .air-ic{color:#3ee08a} .ai-residency.warn .air-ic{color:#e6b02e}
.air-ic svg{width:20px;height:20px}
.air-main{flex:1;min-width:0}
.air-t{font-size:14px}
.air-d{font-size:12.5px;color:var(--muted);margin-top:2px}
.air-pill{flex:none;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px}
.air-pill.ok{background:rgba(0,168,98,.16);color:#3ee08a;border:1px solid #1c5f3f}
.air-pill.idle{background:rgba(230,176,46,.14);color:#e6b02e;border:1px solid #6b5a2e}

/* ---- Connect your services (one-tap wow moment) ---- */
.connect-modal{width:460px;max-width:94vw;padding:0;overflow:hidden;position:relative}
.connect-modal .x{position:absolute;top:12px;inset-inline-end:14px;z-index:3}
.cn-hero{text-align:center;padding:30px 26px 20px;background:radial-gradient(120% 90% at 50% -20%,rgba(0,168,98,.18),transparent 60%)}
.cn-badge{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;font-size:26px;background:rgba(0,168,98,.12);border:1px solid rgba(0,168,98,.3)}
.cn-badge.ok{background:var(--wakeel);border-color:transparent}
.cn-badge.ok svg{width:28px;height:28px;color:#fff}
.cn-h{font-size:20px;font-weight:800;letter-spacing:-.02em}
.cn-sub{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:7px;max-width:34ch;margin-inline:auto}
.cn-body{padding:4px 22px 6px;max-height:52vh;overflow-y:auto}
.cn-group{margin-bottom:14px}
.cn-svcs{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.cn-svc{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);transition:.25s}
.cn-svc.done{border-color:rgba(0,168,98,.4);background:rgba(0,168,98,.06)}
.cn-si{flex:1;min-width:0}
.cn-sn{font-size:14px;font-weight:650}
.cn-sp{font-size:12px;color:var(--muted-2);margin-top:1px}
.cn-check{width:24px;height:24px;flex:none;display:grid;place-items:center;color:var(--wakeel)}
.cn-check svg{width:20px;height:20px}
.cn-check.pend{border:2px dashed var(--line);border-radius:50%}
.cn-oauth{width:100%;background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600;min-height:46px;gap:11px}
.cn-oauth:hover{background:#f6f8fc}
.cn-glogo{width:19px;height:19px;display:inline-flex}
.cn-glogo svg{width:19px;height:19px}
.cn-connected{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;color:#3ee08a;padding:11px;border-radius:11px;background:rgba(0,168,98,.08);border:1px solid rgba(0,168,98,.25)}
.cn-connected svg{width:16px;height:16px}
.cn-note{display:flex;align-items:flex-start;gap:9px;font-size:11.5px;color:var(--faint);line-height:1.5;padding:6px 2px 14px}
.cn-note svg{width:14px;height:14px;flex:none;margin-top:1px}
.cn-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--line-2);background:var(--panel)}
.cn-foot .btn.primary{flex:1}
@keyframes cnpulse{0%,100%{box-shadow:0 0 0 0 rgba(0,168,98,.5)}50%{box-shadow:0 0 0 7px rgba(0,168,98,0)}}
.btn.primary.pulse{animation:cnpulse 1.6s ease-in-out 2}
.connect-modal.celebrate .cn-badge.ok{animation:cnpop .5s ease both}
@keyframes cnpop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---- connect-services banner on the agent page ---- */
.connect-banner{display:flex;align-items:center;gap:14px;margin:14px 18px 0;padding:13px 16px;border-radius:13px;background:linear-gradient(180deg,rgba(0,168,98,.10),var(--panel-2));border:1px solid rgba(0,168,98,.3)}
.connect-banner.done{background:var(--panel-2);border-color:var(--line)}
.cb-l{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.cb-l>svg{width:22px;height:22px;color:var(--wakeel);flex:none}
.cb-l b{display:block;font-size:14px}
.cb-l span{font-size:12.5px;color:var(--muted)}
.cb-logos{display:flex;align-items:center;gap:6px;flex:none}
.cb-lg{opacity:.4;filter:grayscale(1);transition:.2s}
.cb-lg.on{opacity:1;filter:none}
.connect-banner .btn.sm{flex:none}

/* ---- inline connect (in the proposal steps, no popup) ---- */
.btn.xs{min-height:30px;padding:0 11px;font-size:12px;border-radius:8px;gap:7px}
.cn-inline{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600}
.cn-inline:hover{background:#f6f8fc}
.cn-glg{width:15px;height:15px;display:inline-flex}.cn-glg svg{width:15px;height:15px}
.cn-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.cn-tag.ok{color:#3ee08a}.cn-tag svg{width:14px;height:14px}
.dpl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.dpl-cn{display:flex}
/* expandable connect summary at the top of the steps */
.cn-summary{border:1px solid rgba(0,168,98,.3);border-radius:12px;background:rgba(0,168,98,.05);margin-bottom:14px;overflow:hidden}
.cn-summary>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:700;font-size:13.5px;user-select:none}
.cn-summary>summary::-webkit-details-marker{display:none}
.cn-plug{display:inline-flex;color:var(--wakeel)}.cn-plug svg{width:17px;height:17px}
.cn-count{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--muted);background:var(--panel-3);border:1px solid var(--line);border-radius:99px;padding:2px 9px}
.cn-count.ok{color:#3ee08a;border-color:rgba(0,168,98,.4);background:rgba(0,168,98,.1)}
.cn-summary>summary::after{content:"▸";color:var(--muted);transition:transform .15s;margin-inline-start:8px}
.cn-summary[open]>summary::after{transform:rotate(90deg)}
.cn-sumlist{padding:2px 14px 12px;display:flex;flex-direction:column;gap:9px}
.cn-sumrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--line-2)}
.cn-sumrow:first-child{border-top:none}
.cn-sumsvcs{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.cn-schip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 9px;border-radius:8px;background:var(--panel);border:1px solid var(--line);opacity:.65}
.cn-schip.on{opacity:1;border-color:rgba(0,168,98,.4)}
.cn-schip .blogo{width:18px;height:18px}
.cn-sumrow .cn-inline,.cn-sumrow .cn-tag{margin-inline-start:auto}

/* Google setup: readonly redirect field */
.input[readonly]{background:var(--panel-3);color:var(--muted);cursor:pointer}

/* ---- Google setup wizard ---- */
.gs-modal{width:600px;max-width:94vw;max-height:88vh;overflow-y:auto}
.gs-steps{list-style:none;counter-reset:none;margin:8px 0 16px;padding:0;display:flex;flex-direction:column;gap:14px}
.gs-steps>li{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--panel-2)}
.gs-h{display:flex;align-items:center;gap:10px;font-size:14.5px}
.gs-num{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12.5px;font-weight:800;background:var(--wakeel);color:#fff}
.gs-d{font-size:13px;color:var(--muted);line-height:1.55;margin:7px 0 9px;padding-inline-start:34px}
.gs-steps .field{padding-inline-start:34px;margin-bottom:9px}
.gs-open{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600;margin-inline-start:34px;text-decoration:none}
.gs-open:hover{background:#f6f8fc}
.gs-links{display:flex;flex-wrap:wrap;gap:8px;padding-inline-start:34px}
.gs-links .gs-open{margin-inline-start:0}
.gs-copy{display:flex;gap:8px;align-items:center;padding-inline-start:34px;margin-bottom:9px}
.gs-copy .input{flex:1;font-family:var(--mono);font-size:12.5px}
.gs-modal code{font-size:.85em}

/* ---- SOP / rules upload ---- */
.sop-btn{background:transparent;border:1px dashed var(--line);color:var(--muted);font-weight:600}
.sop-btn:hover{border-color:var(--wakeel);color:var(--text)}
.sop-btn svg{width:14px;height:14px}
.sop-drop{display:flex;align-items:center;gap:13px;padding:15px 16px;border:1.5px dashed var(--line);border-radius:12px;background:var(--panel-2);cursor:pointer;margin-bottom:14px;transition:.15s}
.sop-drop:hover,.sop-drop.over{border-color:var(--wakeel);background:rgba(0,168,98,.06)}
.sop-drop>svg{width:24px;height:24px;color:var(--wakeel);flex:none}
.sop-drop b{font-size:14px}
.sop-hint{font-size:11.5px;color:var(--faint);margin-top:2px}

/* ---- connect help (plain-language fix-it) ---- */
.ch-list{display:flex;flex-direction:column;gap:10px;margin:6px 0 16px}
.ch-item{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--panel-2)}
.ch-t{font-size:13.5px;font-weight:650;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ch-code{font-size:11px;font-weight:700;color:#e6b02e;background:rgba(230,176,46,.12);border:1px solid rgba(230,176,46,.3);border-radius:6px;padding:1px 7px}
.ch-d{font-size:12.5px;color:var(--muted);line-height:1.55;margin:6px 0 9px}
.ch-item .gs-open,.ch-item .btn{margin:0}

/* ---- live Google Sheet preview ---- */
.sh-head{display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0 10px}
.sh-head svg{width:17px;height:17px;color:var(--wakeel)}
.sh-head span{color:var(--muted);font-size:12.5px;font-weight:500}
.sh-tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.sh-tbl{border-collapse:collapse;width:100%;font-size:12px}
.sh-tbl th{background:var(--panel-3);text-align:start;padding:8px 11px;font-weight:700;white-space:nowrap;border-bottom:1px solid var(--line)}
.sh-tbl td{padding:7px 11px;border-bottom:1px solid var(--line-2);white-space:nowrap;color:var(--muted)}
.sh-tbl tr:last-child td{border-bottom:none}
.sh-note{font-size:11.5px;color:var(--faint);margin-top:8px}

/* ---- update available bar ---- */
.upd-bar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:12px;padding:11px 14px 11px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--wakeel);box-shadow:0 16px 40px rgba(0,0,0,.5);font-size:13.5px;animation:rise .3s both}
.upd-bar svg{width:17px;height:17px;color:var(--wakeel)}
.upd-bar .btn{min-height:32px}

/* ---- Run live (real compliance cycle) ---- */
.rl-sopok{font-size:12.5px;color:#3ee08a;display:flex;align-items:center;gap:6px;margin:10px 0 4px}
.rl-sopwarn{font-size:12.5px;color:#e6b02e;display:flex;align-items:center;gap:6px;margin:10px 0 4px}
.rl-sopok svg,.rl-sopwarn svg{width:14px;height:14px}
.rl-head{font-size:13.5px;margin:16px 0 12px;display:flex;align-items:center;gap:8px}
.rl-head svg{width:16px;height:16px;color:var(--wakeel)}
.rl-card{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:11px;background:var(--panel-2)}
.rl-ch{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.rl-ch b{font-size:14px}
.rl-email{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.rl-row{display:flex;align-items:center;gap:9px}
.rl-lab{font-size:11.5px;color:var(--muted-2);width:52px;flex:none}
.rl-note{font-size:12.5px;color:var(--muted-2);margin-bottom:9px}
.rl-status{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.rl-acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rl-msg{font-size:12.5px}
.input.sm{min-height:34px}
.rl-btns{display:flex;gap:9px;margin:10px 0 4px}

/* ---- Agent overview dashboard ---- */
.ov-card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px;background:var(--panel-2)}
.ov-card.access{background:linear-gradient(180deg,rgba(0,168,98,.06),var(--panel-2))}
.ov-card.approvals{border-color:rgba(230,176,46,.35);background:linear-gradient(180deg,rgba(230,176,46,.06),var(--panel-2))}
.ov-sec-h{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px}
.ov-sec-h>svg{width:20px;height:20px;color:var(--wakeel);flex:none;margin-top:1px}
.ov-t{font-size:15.5px;font-weight:750}
.ov-sub{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ov-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ov-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.ov-chip.on{color:#3ee08a;border-color:rgba(0,168,98,.35)}
.ov-chip svg{width:13px;height:13px}
.ov-files{display:flex;flex-wrap:wrap;gap:10px}
.ov-file{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.ov-fic{font-size:20px}
.ov-fn{font-size:13.5px;font-weight:650}
.ov-fd{font-size:11.5px;color:var(--muted-2)}
.ov-items{display:flex;flex-direction:column;gap:9px}
.ov-item{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.ov-item.appr{border-color:rgba(230,176,46,.3)}
.ov-ic{font-size:18px;line-height:1.2;flex:none}
.ov-x{flex:1;min-width:0}
.ov-lab{font-size:13.7px;font-weight:600;display:flex;align-items:center;gap:8px}
.ov-badge{font-size:11px;font-weight:800;background:var(--panel-3);border:1px solid var(--line);border-radius:99px;padding:1px 8px;color:var(--muted)}
.ov-item.appr .ov-badge{color:#e6b02e;border-color:rgba(230,176,46,.4);background:rgba(230,176,46,.1)}
.ov-ex{font-size:12px;color:var(--muted-2);margin-top:3px}
.ov-empty{font-size:13px;color:var(--faint);padding:6px 2px}
.ov-done{margin-top:11px;font-size:12.5px;color:#3ee08a;display:flex;align-items:center;gap:7px}
.ov-done svg{width:15px;height:15px}
.ov-cta{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.ov-note{font-size:11.5px;color:var(--faint)}
.ov-linkrow{display:flex;align-items:center;gap:12px}
.ov-linkrow>svg{width:22px;height:22px;color:var(--wakeel);flex:none}
@media(max-width:760px){.ov-grid{grid-template-columns:1fr}}

/* ---- Run live: fully-automatic mode ---- */
.rl-auto{display:flex;align-items:center;gap:8px;margin:10px 0 2px;cursor:pointer;font-size:13px;flex-wrap:wrap}
.rl-auto input{width:16px;height:16px;accent-color:#e6b02e}
.rl-autolab{font-weight:700;display:inline-flex;align-items:center;gap:5px}
.rl-autolab svg{width:14px;height:14px;color:#e6b02e}
.rl-autohint{color:var(--muted-2);font-size:12.5px}
.rl-autowarn{font-size:12px;color:#e6b02e;background:rgba(230,176,46,.09);border:1px solid rgba(230,176,46,.28);border-radius:10px;padding:9px 12px;margin:8px 0 2px;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.rl-autowarn svg{width:14px;height:14px;flex:none;margin-top:1px}
.rl-auto-log{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.rl-logrow{display:flex;align-items:center;gap:9px;font-size:13px;padding:7px 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--panel-2)}
.rl-tick{width:18px;height:18px;flex:none;display:grid;place-items:center}
.rl-tick.ok{color:#3ee08a}.rl-tick.bad{color:#ff8b8b}
.rl-tick svg{width:16px;height:16px}
.rl-autosum{font-size:13.5px;margin-top:8px;display:flex;align-items:center;gap:8px}
.rl-autosum svg{width:16px;height:16px;color:var(--wakeel)}

/* ---- Guided review queue (one item at a time) ---- */
.rq-modal{width:560px;max-width:95vw}
.rq-load{display:flex;align-items:center;gap:10px;padding:34px 20px;justify-content:center;color:var(--muted);font-size:14px}
.rq-prog{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.rq-bar{flex:1;height:6px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.rq-bar i{display:block;height:100%;background:var(--wakeel);border-radius:99px;transition:width .3s}
.rq-prog span{font-size:12px;color:var(--muted-2);font-weight:600;white-space:nowrap}
.rq-h{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.rq-ic{font-size:26px;line-height:1;flex:none}
.rq-biz{font-size:17px;font-weight:750}
.rq-act{font-size:13px;color:var(--muted);margin-top:1px}
.rq-summary{font-size:13px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;padding:10px 13px;margin-bottom:12px;line-height:1.5}
.rq-email{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.rq-noemail{font-size:13px;color:var(--muted-2);margin-bottom:12px}
.rq-status{font-size:13px;color:var(--muted);margin-bottom:12px}
.rq-esc{font-size:12.5px;color:#e6b02e;background:rgba(230,176,46,.09);border:1px solid rgba(230,176,46,.28);border-radius:10px;padding:10px 12px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.rq-esc svg{width:14px;height:14px;flex:none}
.rq-auto{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:16px;cursor:pointer;line-height:1.4}
.rq-auto input{width:16px;height:16px;flex:none;accent-color:var(--wakeel)}
.rq-btns{display:flex;gap:10px}
.rq-btns .btn{flex:1;min-height:46px}
.rq-btns .btn.primary{flex:2}
.rq-fin{text-align:center;padding:22px 12px 8px}
.rq-badge{width:56px;height:56px;border-radius:16px;margin:0 auto 16px;display:grid;place-items:center;background:var(--wakeel);color:#fff}
.rq-badge svg{width:28px;height:28px}
.rq-fin h2{font-size:21px;font-weight:800}
.rq-fin p{color:var(--muted);font-size:13.5px;margin:8px 0 20px}

/* ---- "Why this action" transparency line ---- */
.rl-why,.rq-why{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted);background:rgba(74,122,214,.08);border:1px solid rgba(74,122,214,.22);border-radius:9px;padding:8px 11px;margin:2px 0 10px;line-height:1.5}
.rl-why svg,.rq-why svg{width:14px;height:14px;flex:none;margin-top:1px;color:#7fa8f0}
.rl-why b,.rq-why b{color:var(--text)}

/* SOP reference badge inside the "why" line */
.sop-ref{display:inline-block;font-size:11px;font-weight:700;color:#7fa8f0;background:rgba(74,122,214,.16);border:1px solid rgba(74,122,214,.4);border-radius:6px;padding:1px 7px;white-space:nowrap;margin-inline-start:4px}


/* Railway-style flow (our own SVG/CSS renderer — no library) */
.rf-stage{position:relative;flex:1;min-height:0;margin:0 20px 20px;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:grab;
  background:radial-gradient(120% 90% at 82% -10%,rgba(62,224,138,.05),transparent 60%),radial-gradient(100% 80% at 0% 112%,rgba(167,139,250,.05),transparent 55%),var(--bg)}
.rf-stage.drag{cursor:grabbing}
.rf-stage::before{content:"";position:absolute;inset:-1400px;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#8ea0c8 1px,transparent 0);background-size:26px 26px;opacity:.05}
.rf-world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.rf-wires{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.rf-wire{fill:none;stroke:var(--muted-2);stroke-width:1.7;stroke-dasharray:5 6;opacity:.55}
.rf-wire.flow{stroke:#3ee08a;opacity:.8;animation:rfmarch 1.1s linear infinite}
@keyframes rfmarch{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){.rf-wire.flow{animation:none}}
.rf-wlabel{position:absolute;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line);
  color:#cfe0d6;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;white-space:nowrap;pointer-events:none}
.rf-node{position:absolute;width:238px;border-radius:13px;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.6);overflow:hidden}
.rf-node .accent{position:absolute;left:0;top:0;bottom:0;width:4px}
.rf-node .body{padding:11px 14px 12px 16px}
.rf-node .type{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rf-node .title{font-size:14.5px;font-weight:750;color:var(--text);margin-top:4px;display:flex;align-items:center;gap:8px}
.rf-node .title .ic{font-size:15px}
.rf-node .status{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;color:var(--muted)}
.rf-node .status .dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.03)}
.rf-ctrls{position:absolute;bottom:24px;left:24px;z-index:6;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:0 10px 26px -12px rgba(0,0,0,.65)}
.rf-ctrls button{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--muted);cursor:pointer;transition:background .12s,color .12s}
.rf-ctrls button:last-child{border-bottom:0}
.rf-ctrls button:hover{background:var(--panel-3);color:var(--text)}
.rf-ctrls button:active{background:var(--panel-2)}