:root{
  --ink:#eef2f8; --mut:#a3adbf; --mut2:#6b7588;
  --panel:rgba(12,18,32,.72); --panel2:rgba(255,255,255,.035); --edge:rgba(148,163,184,.18); --edge2:rgba(148,163,184,.1);
  --em:#22c55e; --em-hi:#4ade80; --em-d:#15803d;
  --red:#ef4444; --orange:#f97316; --amber:#f59e0b; --violet:#a78bfa; --violet-d:#7c3aed; --sky:#60a5fa; --teal:#2dd4bf;
  --wine:#7a1f3d; --wine-hi:#8f2a4b; --wine-d:#4a1223; --r:16px;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{background:#070a14;color:var(--ink);font:12.5px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
a{color:var(--em-hi)}
h1,h2,h3,p{margin:0}
button{font-family:inherit}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.hi{color:var(--em-hi);filter:drop-shadow(0 0 6px rgba(74,222,128,.55))}

/* scene */
.scene{position:fixed;inset:0;z-index:-1;background:#080a16}
.scene svg{width:100%;height:100%;display:block}
.scene .tw{animation:tw 5s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.3}}

.glass{background:linear-gradient(180deg,rgba(18,26,44,.78),rgba(9,14,26,.8));border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(74,222,128,.03);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}

/* layout */
.app{display:grid;grid-template-columns:226px minmax(0,1fr);gap:16px;padding:16px 44px 18px 24px;align-items:start;max-width:2200px;margin:0 auto}
.leftcol{position:sticky;top:16px;display:flex;flex-direction:column;align-items:center}
.main{min-width:0}

/* sidebar */
.side{width:100%;padding:18px 12px 12px;display:flex;flex-direction:column;gap:14px}
.logo{padding:0 10px 4px}
.logo .cloud{width:62px;height:44px;display:block;margin-bottom:8px;filter:drop-shadow(0 0 8px rgba(74,222,128,.6))}
.logo b{display:block;font-size:22.5px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.logo span{display:block;font-size:17px;color:#e2e8f0;margin-top:1px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:14px;padding:9px 14px;border-radius:10px;border:1px solid transparent;background:none;color:#e8edf5;font-size:15px;font-weight:500;cursor:pointer;text-align:left;transition:background .15s}
.nav button .ic{width:21px;height:21px;stroke-width:1.7}
.nav button:hover{background:rgba(255,255,255,.05)}
.nav button.on{background:linear-gradient(180deg,#1fae55,#13843f);border-color:rgba(134,239,172,.55);color:#fff;box-shadow:0 0 22px rgba(34,197,94,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.nav .count{margin-left:auto;font-size:10.5px;padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.1);color:var(--mut)}
.nav .count:empty{display:none}
.nav button.on .count{background:rgba(0,0,0,.25);color:#fff}
.sys{margin-top:4px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--edge2)}
.sys-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px;margin-bottom:8px}
.sys-h i{width:9px;height:9px;border-radius:50%;background:var(--em);box-shadow:0 0 8px var(--em)}
.sys-h em{font-style:normal;color:var(--em-hi)}
.sys.warn .sys-h i{background:var(--amber);box-shadow:0 0 8px var(--amber)} .sys.warn .sys-h em{color:var(--amber)}
.sys ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sys li{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;color:#d6dde8;font-size:12.5px}
.sys li .ic{width:14px;height:14px;color:#b8c2d3}
.sys b{font-weight:600} .sys b.g{color:var(--em-hi)}
.bot{width:220px;height:auto;margin-top:6px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}

/* header */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.title h1{font-size:31px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.title p{color:#e3e8f0;font-size:16px;margin-top:4px}
.tools{display:flex;align-items:center;gap:14px;padding-top:2px}
.search{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:12px;background:rgba(12,18,32,.75);border:1px solid var(--edge);width:256px;backdrop-filter:blur(12px)}
.search .ic{width:16px;height:16px;color:#cbd5e1}
.search input{border:0;background:none;color:var(--ink);font:inherit;font-size:12px;outline:none;width:100%}
.search:focus-within{border-color:var(--em)}
.pw{position:relative}
.iconbtn{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid transparent;background:none;color:#e2e8f0;cursor:pointer}
.iconbtn:hover{background:rgba(255,255,255,.07)}
.iconbtn .ic{width:21px;height:21px}
.iconbtn.sm{width:30px;height:30px}.iconbtn.sm .ic{width:16px;height:16px}
.iconbtn i{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--em);box-shadow:0 0 6px var(--em)}
.me{display:flex;align-items:center;gap:4px;background:none;border:0;color:#e2e8f0;cursor:pointer;padding:0}
.me span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12.5px;color:#fff;background:linear-gradient(135deg,#16a34a,#14532d);border:1.5px solid rgba(74,222,128,.7);box-shadow:0 0 14px rgba(34,197,94,.45)}
.me .ic{width:15px;height:15px}
.pop{position:absolute;right:0;top:44px;width:320px;max-height:380px;overflow:auto;z-index:40;padding:10px}
.pop-h{font-weight:700;margin:2px 4px 8px}
.pop ul{list-style:none;margin:0;padding:0}
.pop li{display:grid;grid-template-columns:8px 1fr;gap:10px;padding:8px 6px;border-top:1px solid var(--edge2)}
.pop li i{width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--mut2)}
.pop li.new i{background:var(--em);box-shadow:0 0 6px var(--em)}
.pop li small{display:block;color:var(--mut)}
.menu{width:230px;display:flex;flex-direction:column;padding:6px}
.menu button{background:none;border:0;color:var(--ink);text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.menu button:hover{background:rgba(34,197,94,.12)}
.banner{padding:11px 16px;margin-bottom:12px;border-color:rgba(245,158,11,.45)}
.banner b{color:#fbbf24} .banner ol{margin:6px 0 8px;padding-left:20px;color:var(--mut)}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.38fr);gap:14px;margin-bottom:16px}
.kpi{position:relative;overflow:hidden;display:grid;grid-template-columns:54px 1fr;column-gap:14px;align-items:center;padding:13px 14px 10px 14px;cursor:pointer;color:inherit;text-align:left;min-height:88px;transition:transform .15s,border-color .15s}
.kpi::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,var(--tint),transparent 60%);pointer-events:none}
.kpi:hover{transform:translateY(-2px);border-color:rgba(74,222,128,.45)}
.kpi .kic{grid-row:span 3;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--tile);border:1px solid var(--tileb);color:var(--icol);position:relative}
.kpi .kic .ic{width:28px;height:28px;stroke-width:1.7;filter:drop-shadow(0 0 6px var(--icol))}
.kpi small{font-size:13px;color:#eef2f8;font-weight:500;position:relative}
.kpi b{font-size:26px;font-weight:700;line-height:1.1;position:relative}
.kpi .d{justify-self:end;font-size:12px;font-weight:600;color:var(--em-hi);white-space:nowrap;position:relative;margin-top:-4px}
.kpi .d.dn{color:#f87171} .kpi .d.fl{color:var(--mut)}
.k1{--tint:rgba(34,197,94,.16);--tile:rgba(34,197,94,.14);--tileb:rgba(74,222,128,.35);--icol:#4ade80}
.k2{--tint:rgba(45,212,191,.13);--tile:rgba(45,212,191,.12);--tileb:rgba(45,212,191,.35);--icol:#5eead4}
.k3{--tint:rgba(249,115,22,.28);--tile:transparent;--tileb:transparent;--icol:#fb923c;background:linear-gradient(180deg,rgba(60,30,22,.82),rgba(22,16,24,.85))}
.k4{--tint:rgba(139,92,246,.22);--tile:rgba(139,92,246,.12);--tileb:rgba(167,139,250,.4);--icol:#c4b5fd}
.k5{--tint:rgba(96,165,250,.18);--tile:transparent;--tileb:transparent;--icol:#60a5fa}
.health{display:flex;align-items:center;gap:18px;padding:12px 18px;cursor:help;min-height:88px}
.health .ring{flex:none;width:72px;height:72px;border-radius:50%;background:conic-gradient(var(--em) calc(var(--v)*1%),rgba(255,255,255,.08) 0);display:grid;place-items:center;filter:drop-shadow(0 0 10px rgba(34,197,94,.55))}
.health .ring::after{content:"";width:58px;height:58px;border-radius:50%;background:#0b1220}
.health small{display:block;font-size:13.5px;color:#eef2f8;font-weight:500}
.health .hv{display:flex;align-items:center;gap:10px;margin-top:2px}
.health b{font-size:26px;font-weight:700}
.pillg{display:inline-flex;align-items:center;padding:3px 10px;border-radius:7px;font-size:11px;font-weight:600;color:#dcfce7;background:linear-gradient(180deg,#18a34a,#11803a);border:1px solid rgba(134,239,172,.5);box-shadow:0 0 10px rgba(34,197,94,.35)}
.pillg.warn{color:#fef3c7;background:linear-gradient(180deg,#b45309,#92400e);border-color:rgba(251,191,36,.5);box-shadow:none}

/* main grid */
.grid{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(0,1.59fr) minmax(0,1fr);gap:12px;margin-bottom:12px;height:clamp(340px,37vh,430px)}
.col{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.card{padding:12px 14px;min-width:0;min-height:0;display:flex;flex-direction:column}
#cQueue,#cAuto{height:100%}
#cReport{flex:1.55;min-height:0} #cCompose{flex:1;min-height:0}
.ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.ch h2{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;min-width:0}
.ch h2 .ic{width:23px;height:23px}
.ctl{display:flex;align-items:center;gap:8px}
.lbl{color:#cbd5e1}
.ftag{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:2px 8px;border-radius:7px;font-size:11px;font-weight:600;color:#bbf7d0;border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.1);cursor:pointer}
select,input[type=text],input[type=password],input[type=number],input[type=time],textarea{padding:7px 10px;border-radius:9px;border:1px solid var(--edge);background:rgba(6,10,20,.6);color:var(--ink);font:inherit;outline:none;color-scheme:dark}
select:focus,input:focus,textarea:focus{border-color:var(--em);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
#range{padding:6px 28px 6px 12px;border-radius:9px;font-weight:600;appearance:none;background:rgba(6,10,20,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center/14px no-repeat}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 14px;border-radius:9px;border:1px solid var(--edge);background:rgba(255,255,255,.05);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,box-shadow .15s,transform .12s}
.btn .ic{width:15px;height:15px}
.btn:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.btn.em{border-color:rgba(74,222,128,.8);background:linear-gradient(180deg,rgba(34,197,94,.22),rgba(21,128,61,.18));color:#ecfdf5;box-shadow:0 0 14px rgba(34,197,94,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.btn.em .ic{color:var(--em-hi)}
.btn.em:hover{box-shadow:0 0 22px rgba(34,197,94,.5)}
.btn.vi{border-color:rgba(167,139,250,.6);background:rgba(124,58,237,.14);color:#ede9fe}
.btn.vi .ic{color:#c4b5fd}
.btn.stop{border-color:rgba(248,113,113,.6);background:rgba(239,68,68,.12)}
.btn.danger{color:#fda4af;border-color:rgba(244,63,94,.45)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:rgba(6,10,20,.55);border:1px solid var(--edge2);max-width:100%;overflow-x:auto}
.seg button{border:1px solid transparent;background:none;color:#d6dde8;font-size:12px;font-weight:500;padding:4px 12px;border-radius:7px;cursor:pointer;white-space:nowrap}
.seg button.on{background:linear-gradient(180deg,#1fae55,#13843f);border-color:rgba(134,239,172,.5);color:#fff;box-shadow:0 0 10px rgba(34,197,94,.35)}
.seg.full{display:flex;margin-bottom:6px}.seg.full button{flex:1;padding:6px 6px}

/* queue table */
.tablewrap{flex:1;min-height:0;overflow:auto;border-radius:10px;border:1px solid var(--edge2);background:rgba(4,8,16,.25)}
table{width:100%;border-collapse:collapse}
.q th{position:sticky;top:0;z-index:1;background:rgba(14,20,34,.97);text-align:left;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:#cfd6e2;font-weight:600;padding:8px 10px}
.q td{padding:6px 10px;border-top:1px solid var(--edge2);vertical-align:middle;font-size:12px;height:32px}
.q tbody tr{cursor:pointer;transition:background .15s}
.q tbody tr:hover{background:rgba(255,255,255,.035)}
.q tbody tr.sel{background:rgba(34,197,94,.1);box-shadow:inset 3px 0 0 var(--em)}
.q tbody tr.running{background:linear-gradient(90deg,rgba(34,197,94,.04),rgba(34,197,94,.18),rgba(34,197,94,.04));background-size:200% 100%;animation:sh 1.4s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.q td.n{color:#cfd6e2;width:34px}
.q td.op{font-weight:600;color:#fff;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.q td.site{color:#d6dde8;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.q td.site input{width:100%;padding:3px 7px;font-size:11.5px;background:transparent;border-style:dashed}
.score{display:flex;align-items:center;gap:7px;font-weight:600}
.score i{display:block;width:44px;height:5px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.score i::after{content:"";display:block;height:100%;width:var(--w);background:var(--c);border-radius:9px;box-shadow:0 0 6px var(--c)}
.st{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:7px;font-size:11px;font-weight:500;white-space:nowrap;border:1px solid}
.st .ic{width:11px;height:11px;stroke-width:2.4}
.st.done{color:#dcfce7;border-color:rgba(74,222,128,.55);background:rgba(22,101,52,.35)}
.st.done::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--em-hi);box-shadow:0 0 5px var(--em-hi)}
.st.nosite{color:#fee2e2;border-color:rgba(248,113,113,.55);background:rgba(153,27,27,.55)}
.st.run{color:#fef3c7;border-color:rgba(245,158,11,.5);background:rgba(120,53,15,.4)}
.st.sent{color:#dbeafe;border-color:rgba(96,165,250,.5);background:rgba(30,64,175,.3)}
.st.wait{color:#cbd5e1;border-color:var(--edge);background:rgba(255,255,255,.04)}
.lead{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:7px;font-size:11px;font-weight:500;white-space:nowrap;border:1px solid}
.lead .ic{width:11px;height:11px;stroke-width:2.2}
.l-hot{color:#ffedd5;border-color:rgba(239,68,68,.55);background:linear-gradient(180deg,rgba(185,28,28,.45),rgba(124,45,18,.45))} .l-hot .ic{color:#fb923c;fill:#fb923c;stroke:none}
.l-unq{color:#d6dde8;border-color:rgba(148,163,184,.4);background:rgba(51,65,85,.35)}
.l-nur{color:#ede9fe;border-color:rgba(167,139,250,.5);background:rgba(76,29,149,.35)} .l-nur .ic{color:#c4b5fd}
.l-con{color:#dbeafe;border-color:rgba(96,165,250,.5);background:rgba(30,64,175,.3)}
.l-fol{color:#fef3c7;border-color:rgba(245,158,11,.5);background:rgba(120,53,15,.4)}
.l-rep{color:#dcfce7;border-color:rgba(74,222,128,.55);background:rgba(22,101,52,.4)}
.l-new{color:#cbd5e1;border-color:var(--edge);background:rgba(255,255,255,.04)}
.empty{color:var(--mut);text-align:center;padding:28px 10px}
.empty .btn{margin-top:10px}

/* report */
#report{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px}
.rtop{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:10px;flex:1;min-height:0}
.shot{border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.25);background:#0b1220;display:grid;place-items:center;color:var(--mut);font-size:11px;text-align:center;min-height:0;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.shot .ph{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px}
.shot .ph .ic{width:24px;height:24px;color:#64748b}
.box{border-radius:10px;border:1px solid var(--edge2);background:rgba(255,255,255,.03);padding:7px 10px;min-width:0;overflow:hidden}
.box h4{margin:0 0 4px;font-size:12px;font-weight:600}
.box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.box li{display:flex;align-items:center;gap:6px;font-size:11px;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box li i{flex:none;width:12px;height:12px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:900;color:#052e16;background:var(--em-hi)}
.box li.no i{background:#f87171;color:#450a0a}
.sev{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:2px 10px;border-radius:7px;font-size:11px;font-weight:600;border:1px solid}
.sev-h{color:#fee2e2;border-color:rgba(248,113,113,.6);background:rgba(153,27,27,.45)}
.sev-m{color:#fef3c7;border-color:rgba(245,158,11,.6);background:rgba(146,64,14,.5)}
.sev-l{color:#dcfce7;border-color:rgba(74,222,128,.55);background:rgba(22,101,52,.4)}
.rstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rs{padding:6px 11px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--edge2);min-width:0}
.rs span{display:block;color:#d6dde8;font-size:11.5px}
.rs b{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs b.no{color:#f87171;font-size:13px;font-weight:600} .rs b.ok{color:#e2e8f0;font-size:13px;font-weight:600}
.rs b .ic{width:16px;height:16px}
.rs b.no .ic{color:#f87171} .rs b.ok .ic{color:var(--em-hi)}
.rs .bar{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;max-width:70px}
.rs .bar::after{content:"";display:block;height:100%;width:var(--w);background:var(--c);box-shadow:0 0 6px var(--c)}
.rs button{all:unset;cursor:pointer;color:var(--mut);display:grid} .rs button .ic{width:14px;height:14px}

/* composer */
#compose{flex:1;min-height:0}
.cmp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;height:100%}
.mailbox{border-radius:10px;border:1px solid var(--edge2);background:rgba(4,8,16,.35);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.subj{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--edge2);font-size:11.5px}
.subj span{color:#e2e8f0}
.subj input{flex:1;border:0;background:none;padding:0;font-size:11.5px;box-shadow:none!important}
.mailbox textarea{flex:1;min-height:0;border:0;background:none;resize:none;padding:6px 10px;font-size:11.5px;line-height:1.45;box-shadow:none!important}
.mlinks{display:flex;gap:12px;padding:3px 10px 5px;border-top:1px solid var(--edge2)}
.mlinks button{all:unset;cursor:pointer;color:var(--mut);font-size:10.5px}
.mlinks button:hover{color:#bbf7d0}
.mlinks button:disabled{opacity:.5;cursor:default}
.cbtns{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:2px 0}

/* automation */
#auto{flex:1;min-height:0;overflow:auto}
.flow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 2px;border-top:1px solid var(--edge2)}
.flow:first-child{border-top:0}
.flow .fi{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,rgba(167,139,250,.35),rgba(76,29,149,.35));border:1px solid rgba(167,139,250,.45);color:#ddd6fe}
.flow .fi .ic{width:16px;height:16px}
.flow b{display:block;font-size:12px;font-weight:600}
.flow small{display:block;color:var(--mut);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw{position:relative;width:34px;height:19px;flex:none}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.16);transition:.2s}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#e2e8f0;transition:.2s}
.sw input:checked+span{background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.6)}
.sw input:checked+span::after{left:17px;background:#fff}
.sw input:focus-visible+span{outline:2px solid var(--em);outline-offset:2px}
.qrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 2px;border-top:1px solid var(--edge2);font-size:12px}
.qrow:first-child{border-top:0}
.qrow b{font-size:15px}
.qrow button{all:unset;cursor:pointer;color:#d6dde8} .qrow button:hover{color:#bbf7d0}
.qrow .v{color:#cbd5e1;text-align:right}
.astats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px;padding-top:9px;border-top:1px solid var(--edge2)}
.astats span{display:flex;align-items:center;gap:5px;color:#cbd5e1;font-size:11px}
.astats span .ic{width:13px;height:13px;color:var(--em-hi)}
.astats b{display:block;font-size:16px;font-weight:700;margin-top:3px;white-space:nowrap;text-align:center}
.astats div:last-child b{color:#bfdbfe}

/* team */
#cTeam{position:relative;box-shadow:0 20px 50px rgba(0,0,0,.45),0 14px 40px -12px rgba(34,197,94,.35),inset 0 1px 0 rgba(255,255,255,.07)}
.tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tabs button{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;background:none;color:#e2e8f0;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:9px;cursor:pointer}
.tabs button .ic{width:15px;height:15px}
.tabs button:hover{background:rgba(255,255,255,.05)}
.tabs button.on{background:linear-gradient(180deg,#1fae55,#13843f);border-color:rgba(134,239,172,.5);color:#fff;box-shadow:0 0 14px rgba(34,197,94,.4)}
.tabs .add{padding:6px 8px;border-color:var(--edge)}
.addtask{position:absolute;right:14px;top:50px;z-index:5;display:flex;gap:8px;padding:10px;align-items:center}
.addtask input{width:240px}
.members{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mem{border-radius:12px;border:1px solid var(--edge);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));padding:10px 10px 8px;min-width:0;display:flex;flex-direction:column}
.mh{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:8px;padding:0 2px}
.mav{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.25);overflow:hidden}
.mav svg{width:40px;height:40px}
.mh b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh small{display:block;color:#cfd6e2;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mprog{text-align:right;font-size:11px;color:#e2e8f0}
.mprog .pv{display:flex;align-items:center;gap:8px;margin-top:3px}
.mprog i{display:block;width:62px;height:5px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.mprog i::after{content:"";display:block;height:100%;width:var(--w);background:var(--em-hi);box-shadow:0 0 8px var(--em)}
.mprog b{font-size:15px;font-weight:700}
.tasks{width:100%;table-layout:fixed}
.tasks th{text-align:left;font-size:11px;font-weight:500;color:#e2e8f0;padding:5px 6px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--edge2)}
.tasks th:nth-child(2){width:62px}.tasks th:nth-child(3){width:102px}.tasks th:nth-child(4){width:58px;text-align:right}
.tasks td{padding:3px 6px;font-size:11.5px;height:26px;border-top:1px solid rgba(148,163,184,.06)}
.tasks td:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eef2f8}
.tasks td:last-child{text-align:right}
.ty{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:1px 7px;border-radius:5px;border:1px solid;white-space:nowrap}
.ty.h{color:#fde7d6;border-color:rgba(234,138,92,.45);background:rgba(120,53,15,.35)}
.ty.e{color:#ede9fe;border-color:rgba(167,139,250,.45);background:rgba(76,29,149,.35)}
.ty .ic{width:9px;height:9px}
.ss{appearance:none;-webkit-appearance:none;width:100%;font-size:10.5px;padding:2px 6px 2px 16px;border-radius:6px;border:1px solid;cursor:pointer;background-repeat:no-repeat;background-position:5px center;background-size:7px 7px;font-weight:500}
.ss.s-approved{color:#dcfce7;border-color:rgba(74,222,128,.5);background-color:rgba(22,101,52,.4);background-image:radial-gradient(circle,#4ade80 60%,transparent 62%)}
.ss.s-review{color:#fef3c7;border-color:rgba(245,158,11,.55);background-color:rgba(146,64,14,.45);background-image:radial-gradient(circle,#fbbf24 60%,transparent 62%)}
.ss.s-running{color:#ede9fe;border-color:rgba(167,139,250,.5);background-color:rgba(76,29,149,.4);background-image:radial-gradient(circle,#c4b5fd 60%,transparent 62%)}
.ss.s-progress{color:#dbeafe;border-color:rgba(96,165,250,.5);background-color:rgba(30,64,175,.35);background-image:radial-gradient(circle,#93c5fd 60%,transparent 62%)}
.ss.s-todo{color:#cbd5e1;border-color:var(--edge);background-color:rgba(255,255,255,.04);background-image:radial-gradient(circle,#64748b 60%,transparent 62%)}
.ss.s-done{color:#dcfce7;border-color:rgba(74,222,128,.4);background-color:rgba(20,83,45,.5);background-image:radial-gradient(circle,#22c55e 60%,transparent 62%)}
.ss option{background:#0f172a;color:#e2e8f0}
.pct{width:40px;text-align:right;border:0;background:none;padding:0;font-size:11.5px;font-weight:500;color:#eef2f8;box-shadow:none!important;-moz-appearance:textfield}
.pct::-webkit-inner-spin-button{display:none}
.mf{display:grid;grid-template-columns:.9fr .8fr .9fr 1.5fr;gap:6px;margin-top:auto;padding-top:7px;border-top:1px solid var(--edge2)}
.mf label{display:block;color:#cfd6e2;font-size:10.5px;min-width:0}
.mf label .ic{width:10px;height:10px;color:var(--em-hi);vertical-align:-1px}
.mf select,.mf input{display:block;width:100%;border:0;background:none;padding:1px 0;font-size:12px;font-weight:600;color:#fff;appearance:none;box-shadow:none!important;cursor:pointer;text-overflow:ellipsis}
.mf .g{color:var(--em-hi)} .mf .warn{color:var(--amber)}
.mf input{font-size:10.5px;font-weight:500;color:#e2e8f0}
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.lane{padding:9px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--edge2);min-height:120px;max-height:270px;overflow:auto}
.lane h4{margin:0 0 7px;font-size:11.5px;color:#cbd5e1;display:flex;justify-content:space-between}
.tc{padding:7px 9px;border-radius:8px;background:rgba(6,10,20,.55);border:1px solid var(--edge2);margin-bottom:6px;font-size:11.5px}
.tc small{display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--mut);margin-top:3px}
.tc .del{all:unset;cursor:pointer;color:var(--mut2);font-size:14px} .tc .del:hover{color:#fda4af}
.wl{display:grid;grid-template-columns:200px 1fr 70px;gap:12px;align-items:center;padding:9px 2px;border-top:1px solid var(--edge2)}
.wl .bars{display:flex;height:12px;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.06)}
.wl .bars i{display:block;height:100%}
.act{list-style:none;margin:0;padding:0;max-height:270px;overflow:auto}
.act li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:7px 4px;border-top:1px solid var(--edge2)}
.act li span{color:var(--mut)}
.hint{color:var(--mut);font-size:11.5px}

/* dialog */
dialog{color:var(--ink);padding:18px;width:min(760px,calc(100% - 32px));max-height:86vh;overflow:auto}
dialog::backdrop{background:rgba(2,6,12,.65);backdrop-filter:blur(3px)}
dialog h3{margin-bottom:10px;font-size:17px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.row.end{justify-content:flex-end}
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.fld{display:flex;flex-direction:column;gap:4px;color:var(--mut);font-size:12px}.fld.wide{grid-column:1/-1}
.tog{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.fact{padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid var(--edge2);min-width:0}
.fact span{display:block;color:var(--mut);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.fact b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.issue{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--edge2)}
.issue b{display:block;font-size:13px} .issue span{color:var(--mut);font-size:12px}
.imp{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;border:1px solid}
.i5{color:#fca5a5;border-color:rgba(248,113,113,.55)} .i4{color:#fdba74;border-color:rgba(249,115,22,.55)} .i3{color:#fde68a;border-color:rgba(245,158,11,.5)} .i2,.i1{color:#bfdbfe;border-color:rgba(96,165,250,.45)}
.fullshot{float:right;width:180px;margin:0 0 10px 14px;border-radius:12px;border:1px solid var(--edge)}
.bigmail input{width:100%;margin-bottom:8px;font-weight:600}.bigmail textarea{width:100%;min-height:340px;line-height:1.55}
.rep-table{width:100%;margin-top:8px}.rep-table th,.rep-table td{text-align:left;padding:6px 8px;border-top:1px solid var(--edge2);font-size:12px}.rep-table th{color:var(--mut);font-weight:600}

/* footer */
.foot{background:linear-gradient(135deg,var(--wine-hi),var(--wine) 50%,var(--wine-d));border-top:1px solid rgba(255,255,255,.14)}
.foot-in{display:flex;align-items:center;gap:12px;padding:13px 24px;flex-wrap:wrap}
.foot-in b{display:block;font-size:14px} .foot-in div span{color:#f1c9d2;font-size:12px}
.foot .sp{flex:1} .foot-meta{color:#f1c9d2;font-size:12px} .foot-meta a{color:#fff}
.snake{width:32px;height:32px;overflow:visible}
.sn-body{stroke-dasharray:1;animation:sn-draw 1.1s cubic-bezier(.5,0,.2,1) .2s backwards}
.sn-head,.sn-tail,.sn-eye{transform-box:fill-box;transform-origin:center}
.sn-head{animation:sn-pop .45s cubic-bezier(.3,1.6,.5,1) .05s backwards}
.sn-tail{animation:sn-pop .45s cubic-bezier(.3,1.6,.5,1) 1.1s backwards}
.sn-eye{animation:sn-blink 4.2s 1.4s infinite}
.sn-tongue{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);animation:sn-point 3.6s ease-out 1.6s infinite}
@keyframes sn-draw{from{stroke-dashoffset:1}} @keyframes sn-pop{from{transform:scale(0)}}
@keyframes sn-blink{0%,92%,100%{transform:none}96%{transform:scaleY(.1)}}
@keyframes sn-point{0%,62%,100%{transform:scaleX(0)}68%{transform:scaleX(1)}74%{transform:scaleX(.5)}80%{transform:scaleX(1)}88%{transform:scaleX(0)}}
.bot .eye{animation:blink 5s infinite} @keyframes blink{0%,94%,100%{opacity:1}97%{opacity:.1}}
.bot .ant{animation:bob 3s ease-in-out infinite alternate;transform-origin:center bottom;transform-box:fill-box} @keyframes bob{to{transform:rotate(6deg)}}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;padding:10px 16px;border-radius:11px;background:#0b1220;border:1px solid var(--em);font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 20px rgba(34,197,94,.25);transition:.3s;pointer-events:none;z-index:60;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.flash{animation:flash 1s ease}
@keyframes flash{0%{box-shadow:0 0 0 2px #22c55e,0 0 30px rgba(34,197,94,.45)}}

/* responsive */
@media (max-width:1500px){.app{padding-right:24px}.kpi b{font-size:23px}.kpi .kic{width:44px;height:44px}.kpi{grid-template-columns:46px 1fr}.title h1{font-size:27px}.search{width:220px}}
@media (max-width:1320px){
  .grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);height:auto}
  #cQueue{height:440px}#cAuto{grid-column:1/-1;height:auto}.col{height:440px}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.health{grid-column:span 3}
  .members{grid-template-columns:repeat(2,minmax(0,1fr))}.board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .app{grid-template-columns:minmax(0,1fr);padding:12px}
  .leftcol{position:static}.bot{display:none}
  .side{padding:12px}.logo{display:flex;align-items:center;gap:10px}.logo .cloud{margin:0;width:46px}.logo b{font-size:19px}.logo span{font-size:13px}
  .nav{flex-direction:row;overflow-x:auto}.nav button{flex:none;font-size:13px;padding:8px 11px}
  .sys{display:none}
  .grid{grid-template-columns:minmax(0,1fr)}.col{height:auto}#cReport,#cCompose{flex:none}.rtop{min-height:130px}.cmp{min-height:150px}
  .tools{width:100%}.search{flex:1;width:auto}
}
@media (max-width:640px){
  .title h1{font-size:22px}.title p{font-size:13.5px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.health{grid-column:span 2}
  .members,.board{grid-template-columns:minmax(0,1fr)}
  .rtop{grid-template-columns:1fr}.shot{height:150px}
  .rstats{grid-template-columns:1fr 1fr}
  .cmp{grid-template-columns:1fr}.cbtns{flex-direction:row}
  .q th:nth-child(3),.q td:nth-child(3),.q th:nth-child(5),.q td:nth-child(5){display:none}
  .setgrid,.facts{grid-template-columns:1fr 1fr}
  .wl{grid-template-columns:110px 1fr 50px}
  .addtask{position:static;flex-wrap:wrap;margin-bottom:10px}.addtask input{width:100%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.sn-tongue{transform:none}}
/* ---- fit pass (measured against the 1672×941 mockup) ---- */
.grid{height:clamp(350px,39vh,440px)}
#cReport{flex:1.4} 
.card{padding:11px 13px}
.ch{margin-bottom:7px}
.q{table-layout:fixed}
.q th:nth-child(1){width:30px}.q th:nth-child(4){width:76px}.q th:nth-child(5){width:92px}.q th:nth-child(6){width:100px}
.q th,.q td{padding-left:8px;padding-right:6px}
.q td.op,.q td.site{max-width:none}
.score i{width:34px}
.rtop{grid-template-columns:132px minmax(0,1fr) 96px;gap:8px}
.box{padding:6px 9px}
.box h4{font-size:11.5px;margin-bottom:3px}
.box li{font-size:10.5px}
.rs{padding:5px 10px}
.rs b{font-size:15px}
.subj{padding:5px 10px}
.mlinks{padding:2px 10px 4px}
.cbtns .btn{padding:7px 12px}
.sys li span{white-space:nowrap}
.sys li{font-size:12px}
.health .pillg{white-space:nowrap}
.health{gap:14px}
.search input{font-size:11.5px}
.tasks th:nth-child(2){width:56px}.tasks th:nth-child(3){width:90px}.tasks th:nth-child(4){width:50px}
.tasks td{height:25px;padding:2px 5px}
.tasks th{padding:4px 5px}
.tasks input.pct{width:30px;padding:0;margin:0;border:0;background:none;box-shadow:none;font-size:11.5px;text-align:right;color:#eef2f8;-moz-appearance:textfield;appearance:textfield}
.tasks input.pct:focus{outline:1px solid var(--em);border-radius:3px}
.ss{padding:1px 4px 1px 15px;font-size:10.5px}
.mem{padding:9px 9px 7px}
.mh{margin-bottom:6px}
.tasks td:last-child{white-space:nowrap}
.tasks input.pct{width:26px}
.box li{line-height:1.35}
.box ul{gap:0}
.box h4{white-space:nowrap;font-size:11px}
.rtop{grid-template-columns:128px minmax(0,1fr) 100px}
#cReport{flex:1.3}
#report{gap:6px}.box li{font-size:10.3px;line-height:1.3}
.tasks th:nth-child(3){width:96px}.tasks th:nth-child(2){width:54px}
/* ---- mockup pass 2 ---- */
.glass{background:linear-gradient(180deg,rgba(20,28,48,.6),rgba(10,15,28,.66));border-color:rgba(110,231,150,.2);
  box-shadow:0 18px 44px rgba(0,0,0,.4),0 0 22px rgba(34,197,94,.09),inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(74,222,128,.05)}
.kpi.glass,.health.glass{border-color:rgba(110,231,150,.26)}
#cTeam{border-color:rgba(110,231,150,.28);box-shadow:0 18px 44px rgba(0,0,0,.4),0 18px 46px -14px rgba(34,197,94,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.title h1{font-weight:400;color:#f1f5f9}
.title h1 b{font-weight:700;color:#fff}
.nows{all:unset;cursor:pointer;color:#cbd5e1;font-size:11.5px}
.nows:hover{color:#bbf7d0;text-decoration:underline}
.cbtns{justify-content:space-between;align-items:flex-end}
.btn.pill{padding:4px 12px;font-size:12px;border-radius:8px;font-weight:500}
.btn.pill .ic{width:13px;height:13px}
.mailbox textarea{font-size:11.5px;line-height:1.5}
.flow{padding:9px 2px}
.health .ring{background:conic-gradient(from 200deg,#16a34a,#4ade80 calc(var(--v)*1%),rgba(255,255,255,.08) 0)}
.health .ring::after{width:62px;height:62px;background:#0d1424}
.tasks td{height:23px}
.app{padding-bottom:28px}
.mav{border:2px solid rgba(255,255,255,.22);box-shadow:0 0 10px rgba(0,0,0,.4)}
.box li i{background:#22c55e;color:#052e16}
/* ---- mockup pass 3: teal glass, tighter type ---- */
.glass{background:linear-gradient(180deg,rgba(26,40,46,.6),rgba(10,20,24,.7));border-color:rgba(150,210,175,.2);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 20px rgba(34,197,94,.08),inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(74,222,128,.04)}
.k3{background:linear-gradient(180deg,rgba(64,34,22,.75),rgba(24,18,20,.8))}
.mem{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border-color:rgba(150,210,175,.18)}
.tablewrap{background:rgba(4,10,12,.25)}
.q td{font-size:11.5px;height:31px;padding-top:5px;padding-bottom:5px}
.q th{font-size:10px;padding-top:7px;padding-bottom:7px}
.st,.lead{font-size:10.5px;padding:1px 8px}
.tasks td{font-size:11px;height:24px}
.tasks th{font-size:10.5px}
.mh b{font-size:13px} .mh small{font-size:11px}
.side{padding-top:14px}
.logo .cloud{width:66px;height:46px;margin-bottom:6px}
.bot{width:250px;margin-top:-4px}
.ch h2{font-size:15.5px}
.glass{background:linear-gradient(180deg,rgba(24,37,43,.8),rgba(10,18,22,.86))}
.k3{background:linear-gradient(180deg,rgba(64,34,22,.85),rgba(22,18,20,.88))}
.scene{background-size:cover;background-position:center}
img.bot{width:250px;height:auto;object-fit:contain}
#bot{display:none}
img.bot{width:auto;height:290px;max-width:240px;object-fit:contain;margin-top:-6px;filter:drop-shadow(0 16px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(124,58,237,.25))}
img.bot{height:300px;margin-top:-22px;position:relative;z-index:1}
.cloud-only{display:none} body.cloud .cloud-only{display:block}
/* ---- type + composer pass ---- */
body{font-family:"Plus Jakarta Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.005em}
button,input,select,textarea{font-family:inherit}
.kpi b,.health b,.rs b,.astats b,.mprog b,.score,.tasks td:last-child,.q td.n{font-variant-numeric:tabular-nums}
.title h1{letter-spacing:-.025em}
.ch h2{font-weight:700;letter-spacing:-.01em}
.kpi small,.health small{font-weight:600;letter-spacing:.01em}
.kpi b,.health b{font-weight:800;letter-spacing:-.02em}
.nav button{font-weight:600}
.q td.op{font-weight:700}
.btn{font-weight:700}
/* more room for the Outreach Composer */
.grid{height:clamp(380px,42vh,480px)}
#cReport{flex:1} #cCompose{flex:1.3}
.rtop{grid-template-columns:150px minmax(0,1fr) 100px}
.subj{padding:7px 12px;font-size:12.5px}.subj input{font-size:12.5px;font-weight:600}
.mailbox textarea{font-size:12.5px;line-height:1.6;padding:8px 12px}
.cbtns .btn{padding:9px 14px}
.grid{height:clamp(400px,45vh,500px)}
#cReport{flex:1} #cCompose{flex:1.12}
.rs{padding:4px 10px}
/* ---- the curious robot ---- */
.robo{all:unset;position:relative;display:block;width:171px;height:300px;margin-top:-22px;cursor:pointer;z-index:1;--tilt:0deg;--gx:0px;--gy:0px;filter:drop-shadow(0 16px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(124,58,237,.25))}
.robo[hidden]{display:none}
.robo:focus-visible{outline:2px solid var(--em);outline-offset:4px;border-radius:12px}
.robo img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
.r-body,.r-look,.r-head,.r-ant{position:absolute;inset:0;display:block}
.r-body{transform-origin:50% 100%;animation:r-breathe 4.2s ease-in-out infinite}
.r-look{transform-origin:58.9% 53.1%;transform:rotate(var(--tilt));transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.r-head{transform-origin:58.9% 53.1%;animation:r-idle 5.5s ease-in-out infinite}
.r-antL{transform-origin:25.2% 32%;animation:r-wob 1.9s ease-in-out infinite alternate}
.r-antR{transform-origin:83.6% 26.3%;animation:r-wob 1.6s ease-in-out -.7s infinite alternate-reverse}
.r-glint{position:absolute;width:5%;height:2.8%;border-radius:50%;background:radial-gradient(circle,#fff 0 35%,rgba(255,255,255,.35) 60%,transparent 72%);transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy)));transition:transform .25s ease-out;animation:r-blink 5.3s infinite}
.g1{left:51.5%;top:37.6%}.g2{left:80.5%;top:36.4%;width:4%;height:2.2%}
.r-tip{position:absolute;width:5px;height:5px;border-radius:50%;background:#4ade80;opacity:0;transition:opacity .3s}
.r-antL .r-tip{left:1.1%;top:2%}.r-antR .r-tip{left:94%;top:1.2%}
.robo.busy .r-tip{opacity:1;box-shadow:0 0 10px 3px #4ade80;animation:r-pulse .7s ease-in-out infinite alternate}
.robo.busy .r-head{animation:r-scan 1.8s ease-in-out infinite}
.robo.peek .r-look{transform:rotate(calc(var(--tilt) + 13deg)) translateY(-3px)}
.robo.peek .r-antL,.robo.peek .r-antR{animation-duration:.25s}
.robo:hover .r-look{transform:rotate(calc(var(--tilt) * 1.5)) translateY(-2px)}
.robo.hop{animation:r-hop .6s cubic-bezier(.3,1.6,.5,1)}
.r-bubble{position:absolute;left:58%;top:-6px;transform:translate(-30%,-100%) scale(.85);transform-origin:20% 100%;opacity:0;pointer-events:none;white-space:nowrap;
  padding:7px 11px;border-radius:12px 12px 12px 3px;background:rgba(14,22,30,.92);border:1px solid rgba(74,222,128,.5);color:#ecfdf5;font-size:12px;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 14px rgba(34,197,94,.25);transition:.3s cubic-bezier(.3,1.4,.5,1)}
.robo.talk .r-bubble{opacity:1;transform:translate(-30%,-100%) scale(1)}
@keyframes r-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
@keyframes r-idle{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(2deg) translateY(-2px)}}
@keyframes r-wob{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes r-scan{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes r-blink{0%,93%,100%{opacity:1}96%{opacity:0}}
@keyframes r-pulse{from{transform:scale(.8)}to{transform:scale(1.4)}}
@keyframes r-hop{0%{transform:translateY(0)}35%{transform:translateY(-14px) rotate(-2deg)}65%{transform:translateY(0) scaleY(.96)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.robo *{animation:none!important;transition:none!important}}
@media (max-width:980px){.robo{display:none}}
.logo .mark{display:block;width:58px;height:58px;margin-bottom:8px;filter:drop-shadow(0 6px 16px rgba(34,197,94,.3))}
@media (max-width:980px){.logo .mark{width:42px;height:42px;margin:0}}
.side{position:relative;z-index:2}.robo{z-index:0}
/* ---- robot: 3D clips ---- */
.robo{width:240px;height:285px;margin:-20px -8px 0}
.robo .r-vid,.robo .r-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;pointer-events:none}
.robo .r-vid{opacity:0;transition:opacity .12s linear}
.robo .r-vid.on{opacity:1}
.robo.live .r-still{opacity:0}
.robo .r-shadow{position:absolute;left:50%;bottom:4px;width:46%;height:9%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(2px)}
.robo.busy .r-shadow{background:radial-gradient(closest-side,rgba(34,197,94,.55),transparent);animation:r-pulse .9s ease-in-out infinite alternate}
.robo .r-bubble{left:55%;top:4px}
.robo{filter:drop-shadow(0 14px 20px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(124,58,237,.22))}
.leftcol{z-index:5}
.robo .r-bubble{left:62%;top:34%;transform:translate(0,-50%) scale(.85);transform-origin:0 50%;border-radius:12px 12px 12px 3px}
.robo.talk .r-bubble{transform:translate(0,-50%) scale(1)}
/* logo is a photo: round it like the tile */
.logo .mark{border-radius:13px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.45)}
/* Outreach Composer gets the larger share of the middle column */
.grid{height:clamp(430px,50vh,560px)}
#cReport{flex:1} #cCompose{flex:1.55}
.mailbox textarea{font-size:13px}
.box li{line-height:1.22;font-size:10.2px}.box h4{margin-bottom:2px}
.logo .mark{border-radius:0;box-shadow:none;width:72px;height:72px;margin:-6px 0 4px -6px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(74,222,128,.25))}
/* ---- sign-in screen ---- */
body.locked .app,body.locked .toast{display:none}
body.locked{overflow:hidden}
.login{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:4vw;padding:6vh 7vw;
  background:radial-gradient(120% 90% at 0% 0%,#2a0f45 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,#06301c 0%,transparent 60%),linear-gradient(135deg,#140a26,#0a1220 55%,#05110c);overflow:hidden}
.login[hidden]{display:none}
.lg-waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lg-waves .w1{animation:lgw 14s ease-in-out infinite alternate}.lg-waves .w2{animation:lgw 18s ease-in-out -4s infinite alternate-reverse}.lg-waves .w3{animation:lgw 22s ease-in-out -8s infinite alternate}
@keyframes lgw{to{transform:translate(40px,-30px) rotate(1.5deg)}}
.lg-hero{position:relative;color:#fff;max-width:620px}
.lg-mark{width:64px;height:64px;margin-bottom:22px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.lg-hero h1{font-size:clamp(34px,4.6vw,62px);font-weight:300;line-height:1.12;letter-spacing:-.02em}
.lg-hero h1 b{font-weight:800;background:linear-gradient(90deg,#bef264,#4ade80);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-hero p{margin-top:18px;font-size:16px;color:#d6dde8;max-width:460px;line-height:1.55}
.lg-bot{display:block;width:220px;height:auto;margin-top:26px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(124,58,237,.3))}
.lg-card{position:relative;justify-self:end;width:min(420px,100%);padding:44px 40px 34px;border-radius:22px;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.28);
  box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.lg-card h2{font-size:34px;font-weight:800;letter-spacing:-.01em;margin-bottom:26px}
.lg-card label{display:block;font-size:13px;letter-spacing:.06em;color:#e8edf5;margin-bottom:18px}
.lg-card select,.lg-card input{display:block;width:100%;margin-top:9px;padding:12px 16px;border-radius:8px;border:0;background:#fff;color:#0f172a;font:600 15px "Plus Jakarta Sans",sans-serif;letter-spacing:.03em;outline:none;color-scheme:light}
.lg-card select:focus,.lg-card input:focus{box-shadow:0 0 0 3px rgba(74,222,128,.55)}
.lg-forgot{display:block;text-align:right;font-size:12.5px;letter-spacing:.04em;color:#e2e8f0;margin:-6px 0 26px}
.lg-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,#22c55e,#15803d);color:#fff;font:700 15px "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;box-shadow:0 10px 26px rgba(34,197,94,.35);transition:transform .15s,box-shadow .2s}
.lg-go:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(34,197,94,.5)}
.lg-go:disabled{opacity:.6;cursor:wait}
.lg-err{min-height:20px;margin:12px 0 0;color:#fecaca;font-size:13px;text-align:center}
.lg-foot{text-align:center;font-size:13px;letter-spacing:.04em;color:#e2e8f0;margin-top:8px}
.lg-card.shake{animation:lgshake .4s}
@keyframes lgshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (max-width:860px){
  .login{grid-template-columns:1fr;align-content:start;gap:26px;padding:7vh 22px 30px;overflow-y:auto}
  .lg-hero{text-align:center;margin:0 auto}.lg-hero p{margin-left:auto;margin-right:auto}.lg-mark{margin:0 auto 16px;display:block}
  .lg-bot{display:none}
  .lg-card{justify-self:center;padding:32px 24px 26px}.lg-card h2{text-align:center;font-size:28px}
}
@media (prefers-reduced-motion:reduce){.lg-waves *{animation:none!important}}
.lg-bot{width:200px;margin:0 0 6px -14px}
@media (max-width:860px){.lg-bot{display:block;width:140px;margin:0 auto -6px}}
.login{background:radial-gradient(90% 70% at 20% 30%,#3b1466 0%,transparent 60%),radial-gradient(80% 70% at 85% 85%,#0b3d24 0%,transparent 60%),linear-gradient(135deg,#1c0b33 0%,#120a24 45%,#071711 100%)}
.lg-fur{position:absolute;inset:0;pointer-events:none}
.lg-hero h1{font-weight:300}
.lg-card{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
/* until we know who is visiting, show only a calm loading screen */
body.booting .app,body.booting .toast,body.booting #banner{visibility:hidden}
body.booting::after{content:"";position:fixed;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;border:3px solid rgba(74,222,128,.25);border-top-color:#4ade80;animation:bootspin .8s linear infinite;z-index:200}
@keyframes bootspin{to{transform:rotate(360deg)}}
.logo .mark{width:66px;height:66px;margin:0 0 10px;border-radius:0;box-shadow:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(74,222,128,.22))}