/* HALO CRM look: tokens sampled from real CRM screenshots (dark, neutral greys, pink primary). */
:root{
  --bg:#181818; --side:#1f1f1f; --card:#1c1c1c; --card2:#212121; --raise:#262626; --hover:#2a2a2a;
  --line:#2f2f2f; --line2:#383838; --text:#ececec; --soft:#b9b9b9; --muted:#8b8b8b; --dim:#666;
  --pink:#ff61a6; --pink-bg:rgba(255,97,166,.14); --pink-line:rgba(255,97,166,.45);
  --green:#34d399; --green-bg:rgba(16,185,129,.14); --green-line:rgba(52,211,153,.35);
  --amber:#f5a524; --amber-bg:rgba(245,165,36,.14); --amber-line:rgba(245,165,36,.4);
  --red:#f8576a; --red-bg:rgba(248,87,106,.14); --red-line:rgba(248,87,106,.42);
  --sky:#38bdf8; --sky-bg:rgba(56,189,248,.13);
  --grey-bg:#2a2a2a; --r:8px; --r2:12px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
.app{display:flex;height:100vh;overflow:hidden}

/* ---------- sidebar (copy of the CRM shell) ---------- */
.side{width:248px;flex:none;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.side-top{padding:14px 14px 8px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 12px}
.brand .logo{width:34px;height:34px;border-radius:9px;background:#000;display:grid;place-items:center}
.brand .logo i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--pink);display:block}
.brand b{display:block;font-size:14px}.brand small{color:var(--muted);font-size:12px}
.brand .chev{margin-left:auto;color:var(--muted)}
.sbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:#252424;border-radius:10px;padding:8px 10px;color:var(--muted)}
.sbox kbd{margin-left:auto;font:11px system-ui;border:1px solid var(--line2);border-radius:5px;padding:1px 5px}
.modes{display:flex;gap:6px;margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:4px}
.modes span{flex:1;text-align:center;padding:6px 0;border-radius:7px;color:var(--muted)}
.modes span.on{background:var(--pink-bg);border:1px solid var(--pink-line);color:var(--pink)}
.nav{flex:1;overflow:auto;padding:4px 10px 10px}
.grp{margin-top:6px}
.grp-h{display:flex;align-items:center;gap:10px;padding:8px 8px;color:var(--soft);font-size:13px;border-radius:8px;cursor:pointer;user-select:none}
.grp-h .chev{margin-left:auto;color:var(--muted);transition:transform .15s}
.grp.closed .chev{transform:rotate(-90deg)}.grp.closed .items{display:none}
.grp-h.new::after{content:"NEW";font-size:9.5px;letter-spacing:.06em;color:var(--pink);border:1px solid var(--pink-line);border-radius:5px;padding:0 4px;margin-left:6px}
.items{margin-left:17px;border-left:1px solid var(--line);padding-left:8px}
.it{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:2px 0;border-radius:8px;color:var(--soft);cursor:pointer;border:1px solid transparent;text-decoration:none}
.it:hover{background:var(--hover)}
.it.on{background:var(--pink-bg);border-color:var(--pink-line);color:var(--pink)}
.it .cnt{margin-left:auto;font-size:11px;background:var(--red);color:#fff;border-radius:9px;padding:0 6px;font-weight:600}
.it.ghost{color:var(--dim)}
.ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-foot{border-top:1px solid var(--line);padding:12px 14px;display:flex;align-items:center;gap:10px}
.side-foot .av{width:32px;height:32px;border-radius:50%;background:#183528;display:grid;place-items:center;color:var(--green)}
.side-foot b{display:block;font-size:13px}.side-foot small{color:var(--muted)}

/* ---------- main column ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:56px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 18px}
.crumbs{display:flex;align-items:center;gap:10px;color:var(--muted)}
.crumbs b{color:var(--text);font-weight:500}.crumbs .sep{opacity:.6}
.bell{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;position:relative;color:var(--soft)}
.bell i{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font:600 10px system-ui;border-radius:9px;padding:1px 5px;font-style:normal}
.view{flex:1;overflow:auto;padding:0 24px 40px;position:relative}
.view.full{padding:0;overflow:hidden;display:flex;flex-direction:column}

/* page header with the CRM's hero banner */
.hero{position:relative;height:150px;border-radius:var(--r2);overflow:hidden;margin:18px 0 18px;border:1px solid var(--line);background:#141414}
.hero img{position:absolute;right:0;top:0;height:100%;width:auto;opacity:.95}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#141414 38%,rgba(20,20,20,.4) 70%,transparent)}
.hero .ht{position:absolute;left:24px;top:28px;z-index:1;max-width:60%}
.hero h1{margin:0 0 6px;font-size:26px;font-weight:650;letter-spacing:-.01em}
.hero p{margin:0;color:var(--soft)}
.ph{margin:18px 0 14px}.ph h1{margin:0 0 4px;font-size:24px;font-weight:650}.ph p{margin:0;color:var(--muted)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs button{background:none;border:0;padding:9px 12px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--text);border-color:var(--pink)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-h h3{margin:0;font-size:14px;font-weight:600}.card-h p{margin:2px 0 0;color:var(--muted);font-size:12px}
.card-b{padding:14px 16px}
.row{display:flex;gap:14px}.col{display:flex;flex-direction:column;gap:14px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}
.kpi{padding:14px 16px}.kpi small{color:var(--muted);display:block}.kpi b{display:block;font-size:24px;font-weight:650;margin:4px 0 2px;letter-spacing:-.01em}
.kpi .d{font-size:12px}.up{color:var(--green)}.down{color:var(--red)}
.muted{color:var(--muted)}.soft{color:var(--soft)}.dim{color:var(--dim)}
.sp{flex:1}

/* buttons */
.btn{text-decoration:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--card2);border-radius:9px;padding:7px 12px;font-size:13px;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.pri{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:600}
.btn.pri:hover{filter:brightness(1.06)}
.btn.out{border-color:var(--pink-line);color:var(--pink);background:transparent}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:7px}
.btn.icon{padding:5px;border-radius:7px}
.btn.green{border-color:var(--green-line);color:var(--green);background:var(--green-bg)}
.btn.red{border-color:var(--red-line);color:var(--red);background:var(--red-bg)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;border-radius:7px;padding:2px 8px;white-space:nowrap}
.pill.green{background:var(--green-bg);color:var(--green)}.pill.amber{background:var(--amber-bg);color:var(--amber)}
.pill.red{background:var(--red-bg);color:var(--red)}.pill.grey{background:var(--grey-bg);color:var(--muted)}
.pill.sky{background:var(--sky-bg);color:var(--sky)}.pill.pink{background:var(--pink-bg);color:var(--pink)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.g{background:var(--green);box-shadow:0 0 0 3px rgba(52,211,153,.18)}.dot.r{background:var(--red)}.dot.a{background:var(--amber)}.dot.x{background:#555}
input.in,select.in{background:#202020;border:1px solid var(--line2);border-radius:9px;padding:8px 11px;outline:none}
input.in:focus{border-color:var(--pink-line)}

/* Twenty-style table */
table.tw{width:100%;border-collapse:separate;border-spacing:0}
.tw th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--card);z-index:1}
.tw td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tw tr:last-child td{border-bottom:0}
.tw tbody tr{cursor:pointer}.tw tbody tr:hover td{background:#202020}
.tw tbody tr.sel td{background:rgba(255,97,166,.06)}
.who{display:flex;align-items:center;gap:10px}.who img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.who b{font-weight:500;display:block}.who small{color:var(--muted)}

/* drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:none}
.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:#1b1b1b;border-left:1px solid var(--line2);z-index:51;transform:translateX(105%);transition:transform .2s;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-b{flex:1;overflow:auto;padding:16px 18px}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);z-index:60;background:#1b1b1b;border:1px solid var(--line2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:none;width:min(980px,92vw);max-height:90vh;overflow:hidden;flex-direction:column}
.modal.on{display:flex;transform:translate(-50%,-50%)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#262626;border:1px solid var(--line2);padding:10px 16px;border-radius:10px;z-index:90;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.mock-tag{position:fixed;right:12px;bottom:10px;font-size:11px;color:var(--dim);z-index:5;pointer-events:none}

/* ---------- Accounts status grid ---------- */
.ag th.site{text-align:center}
.ag th.site img{width:22px;height:22px;border-radius:6px;display:block;margin:0 auto 3px}
.cell{width:38px;height:38px;border-radius:10px;margin:0 auto;display:grid;place-items:center;position:relative;border:1.5px solid transparent;cursor:pointer;transition:transform .1s}
.cell:hover{transform:scale(1.08)}
.cell img{width:24px;height:24px;border-radius:6px}
.cell.green{border-color:var(--green);background:var(--green-bg)}
.cell.grey{background:#232323}.cell.grey img{filter:grayscale(1);opacity:.28}
.cell.amber{border-color:var(--amber);background:var(--amber-bg)}
.cell.red{border-color:var(--red);background:var(--red-bg)}
.cell.red::after,.cell.amber::after{content:"!";position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;font:700 10px/15px system-ui;text-align:center;color:#111}
.cell.red::after{background:var(--red)}.cell.amber::after{background:var(--amber)}
.cell.of{width:28px;height:28px;border-radius:8px}.cell.of img{width:18px;height:18px}
.legend{display:flex;gap:16px;align-items:center;color:var(--soft);font-size:12px;flex-wrap:wrap}
.legend span{display:inline-flex;gap:7px;align-items:center}
.lg{width:16px;height:16px;border-radius:5px;border:1.5px solid}

/* ---------- sign-in browser window ---------- */
.bw-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#232323;border-bottom:1px solid var(--line)}
.bw-dots{display:flex;gap:6px}.bw-dots i{width:11px;height:11px;border-radius:50%;background:#555;display:block}
.bw-dots i:nth-child(1){background:#ff5f57}.bw-dots i:nth-child(2){background:#febc2e}.bw-dots i:nth-child(3){background:#28c840}
.bw-url{flex:1;background:#171717;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--soft);font-size:12px;display:flex;gap:8px;align-items:center}
.bw-site{background:#f4f4f4;color:#222;min-height:420px;display:grid;place-items:center;position:relative}
.bw-form{width:340px;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:24px}
.bw-form h4{margin:0 0 14px;font-size:18px}
.bw-form .f{border:1px solid #ccc;border-radius:7px;padding:9px 10px;margin-bottom:10px;color:#666;font-size:13px}
.bw-form .go{background:#f47321;color:#fff;border-radius:7px;padding:10px;text-align:center;font-weight:600}
.bw-note{position:absolute;left:14px;bottom:14px;right:14px;background:#1b1b1b;color:var(--text);border-radius:10px;padding:10px 12px;font-size:12.5px;display:flex;gap:10px;align-items:center}

/* ---------- charts ---------- */
.bars{display:flex;align-items:flex-end;gap:5px;height:150px;padding-top:8px}
.bars i{flex:1;background:linear-gradient(var(--pink),rgba(255,97,166,.35));border-radius:4px 4px 1px 1px;min-height:3px;display:block;position:relative}
.bars i.cmp{background:#3a3a3a}
.bars i:hover::after{content:attr(data-v);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;background:#000;padding:2px 6px;border-radius:5px;white-space:nowrap;margin-bottom:4px}
.axis{display:flex;gap:5px;color:var(--dim);font-size:10.5px;margin-top:5px}.axis span{flex:1;text-align:center}
.split-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;margin:8px 0}
.split-bar i{display:block;height:100%}
.rank{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.rank:last-child{border:0}
.rank .n{width:22px;color:var(--muted);font-weight:600;text-align:center}
.rank img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.rank .bar{flex:1;height:6px;background:#2a2a2a;border-radius:4px;overflow:hidden}.rank .bar i{display:block;height:100%;background:var(--pink)}

/* ---------- onboarding record ---------- */
.steps{display:flex;flex-direction:column;gap:8px}
.step{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;cursor:pointer}
.step.on{border-color:var(--sky);background:#142127}
.step .si{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--muted)}
.step.done .si{color:var(--green);border-color:var(--green-line)}
.step small{display:block;color:var(--muted);font-size:11px;letter-spacing:.05em}
.step .c{margin-left:auto;font-size:12px;border-radius:7px;padding:2px 7px;background:#222;color:var(--muted)}
.step.done .c{background:var(--green-bg);color:var(--green)}
.chk{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--line2);border-radius:10px;padding:11px 12px;margin-bottom:8px;background:#1d1d1d}
.chk.done{background:#182b25;border-color:#1f4636}
.chk .box{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--line2);flex:none;display:grid;place-items:center;margin-top:1px}
.chk.done .box{background:var(--green);border-color:var(--green);color:#062}
.chk.auto{border-style:dashed;border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.05)}
.sec-l{font-size:11px;letter-spacing:.06em;color:var(--sky);margin:14px 0 8px;font-weight:600}
.site-pick{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.site-pick img{width:30px;height:30px;border-radius:8px;background:#fff}

/* ---------- hidden pages ---------- */
.hid{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.hid:last-child{border:0}
.hid .t{width:120px;height:75px;border-radius:8px;object-fit:cover;object-position:top left;border:1px solid var(--line2);flex:none}

.app.collapsed .side{width:0;border:0}
.side{transition:width .15s}
#sideToggle{cursor:pointer}

/* ---------- v4: Accounts calm grid, site filter, site panel ---------- */
.cell.green{border-color:transparent;background:transparent}
.cell.grey{background:transparent;color:var(--dim);font-weight:700}
.cell.green:hover,.cell.grey:hover{background:#242424}
.okdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);opacity:.75}
.legend .okdot{opacity:.75}
.sitef{background:none;border:1px solid transparent;border-radius:8px;padding:4px 6px;color:var(--muted);font-size:11px;font-weight:600;display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.sitef img{width:22px;height:22px;border-radius:6px}
.sitef:hover{border-color:var(--line2);background:#232323;color:var(--text)}
th.sel .sitef{border-color:var(--pink-line);background:var(--pink-bg);color:var(--pink)}
.ag.one td:nth-child(3){min-width:300px}
.fchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--pink-line);background:var(--pink-bg);color:var(--text);border-radius:8px;padding:4px 10px;font-size:12.5px}
.fchip img{width:18px;height:18px;border-radius:5px}
.tabs .tablink{margin-left:auto;align-self:center;display:inline-flex;gap:6px;align-items:center;color:var(--soft);text-decoration:none;font-size:12.5px;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;margin-bottom:6px}
.tabs .tablink:hover{border-color:var(--pink-line);color:var(--text)}
.tabs .tablink .ico{width:14px;height:14px}
.sd-av{position:relative;width:44px;height:40px;flex:none}
.sd-av img:first-child{width:40px;height:40px;border-radius:50%;object-fit:cover}
.sd-av img:last-child{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:5px;border:2px solid #1b1b1b;background:#fff}
.sd-st{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line2);border-radius:10px;padding:11px 12px;background:#1f1f1f}
.sd-st.red{border-color:var(--red-line);background:rgba(248,87,106,.06)}.sd-st.amber{border-color:var(--amber-line);background:rgba(245,165,36,.06)}
.tw.needs th,.tw.needs td{padding:8px 14px}
.fld{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#1d1d1d}
.fld.bad{border-color:var(--red-line)} .fld.warn{border-color:var(--amber-line)}
.fl-h{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:6px}
.fl-v{display:flex;gap:6px;align-items:center}
.fl-v code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#141414;border:1px solid var(--line);border-radius:7px;padding:6px 9px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--soft)}
.fl-m{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--muted)}
.fl-m span{display:inline-flex;gap:5px;align-items:center}.fl-m .ico{width:12px;height:12px}
.tw.needs tbody tr{cursor:default}.tw.needs tbody tr:hover td{background:none}
/* ---------- v4: onboarding step 4 ---------- */
.chk.earlier{background:#18221e;border-color:#21372d}
.sites-h{display:flex;align-items:flex-end;margin:16px 0 8px}
.sites-h .help{display:flex;gap:6px;align-items:center;color:var(--soft);font-size:12.5px;margin-top:3px}
.sites-h .help .ico{width:14px;height:14px;color:var(--sky);flex:none}
.srow{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#1d1d1d}
.srow.ok{border-color:#1f4636;background:#182b25}
.srow img{width:30px;height:30px;border-radius:8px;background:#fff}
.srow b{font-size:14px;min-width:110px}
.srow .rm{color:var(--muted);width:30px;height:30px;justify-content:center;padding:0}
.srow .rm-ph{width:30px}
.addmenu{position:absolute;left:0;top:calc(100% + 6px);z-index:20;background:#222;border:1px solid var(--line2);border-radius:10px;padding:5px;min-width:260px;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.addmenu button{display:flex;gap:10px;align-items:center;width:100%;background:none;border:0;border-radius:7px;padding:7px 9px;text-align:left;color:var(--text)}
.addmenu button:hover:not([disabled]){background:#2e2e2e}
.addmenu button[disabled]{opacity:.45;cursor:default}
.addmenu img{width:22px;height:22px;border-radius:6px;background:#fff}
.addmenu small{margin-left:auto;color:var(--muted);font-size:11px}
/* ---------- v4: best-time heat map ---------- */
.hm{position:relative}
.hm-g{display:grid;grid-template-columns:34px repeat(24,1fr);gap:2px;align-items:center}
.hm-g i{display:block;height:26px;border-radius:4px;cursor:default}
.hm-g i:hover{outline:2px solid #fff;outline-offset:-1px}
.hm-g i.best{outline:2px solid #fff;outline-offset:-1px}
.hm-d{font-size:11px;color:var(--muted)}
.hm-h{font-size:10.5px;color:var(--muted);text-align:left;padding-top:3px}
.hm-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.hm-leg{display:inline-flex;gap:3px;align-items:center;font-size:11px;color:var(--muted)}
.hm-leg i{width:14px;height:12px;border-radius:3px;display:inline-block}
.hm-tip{position:absolute;display:none;transform:translate(-50%,-100%);background:#111;border:1px solid var(--line2);border-radius:7px;padding:4px 8px;font-size:11.5px;white-space:nowrap;pointer-events:none;z-index:5;box-shadow:0 6px 18px rgba(0,0,0,.5)}
/* ---------- v4: what is hidden ---------- */
.safe,.overlap{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:13.5px;line-height:1.5}
.safe{border:1px solid var(--green-line);background:rgba(16,185,129,.08)}.safe .ico{color:var(--green);flex:none;margin-top:2px}
.overlap{border:1px solid var(--pink-line);background:var(--pink-bg)}.overlap .ico{color:var(--pink);flex:none;margin-top:2px}
.hidt td{vertical-align:top}.hidt tbody tr{cursor:default}
.hidt td:first-child{white-space:nowrap}
.hidt .ev{font-size:11.5px;margin-top:4px;max-width:none}
.hidt tr.hl td{background:rgba(255,97,166,.06)}
.hidt tr.hl td:first-child{box-shadow:inset 3px 0 0 var(--pink)}
.hidt th:nth-child(2){width:24%}.hidt th:nth-child(3){width:21%}.hidt th:nth-child(4){width:22%}

/* ---------- v4: phone width (sidebar slides in, columns stack, wide tables scroll sideways) ---------- */
@media (max-width:760px){
  .side{position:fixed;left:0;top:0;bottom:0;z-index:60;width:0;border:0;box-shadow:0 0 40px rgba(0,0,0,.6)}
  .app.collapsed .side{width:270px;border-right:1px solid var(--line)}
  .topbar{padding:0 12px;gap:10px}
  .topbar .pill.grey{display:none}
  .topbar .bell{margin-left:auto!important}
  .crumbs{min-width:0;overflow:hidden;white-space:nowrap}
  .crumbs > *:not(:last-child){display:none}
  .view{padding:0 12px 32px}
  .view .grid,.view .g2,.view .g3,.view .g4{grid-template-columns:1fr!important}
  .hero{height:auto;min-height:120px}
  .hero img,.hero::after{display:none}
  .hero .ht{position:relative;left:auto;top:auto;max-width:none;padding:18px}
  .card:has(> table.tw){overflow-x:auto}
  table.tw:not(.needs){min-width:640px}
  table.tw.ag{min-width:760px}
  .tabs{overflow-x:auto}
  .tabs .tablink{white-space:nowrap}
  .view .grid > *{min-width:0}
  .srow{flex-wrap:wrap}
  .srow > b,.srow .nm{flex:1}
  .sites-h{flex-wrap:wrap}
  .chk{flex-wrap:wrap}
  .chk > div{min-width:0;flex:1 1 200px}
  .hm-g{grid-template-columns:28px repeat(24,minmax(9px,1fr));gap:1px}
}

/* ---------- v5: onboarding SOP (copied from the real CRM checklist: rounded rows, 20px checkbox, mono inputs, Save to Secure Logins) ---------- */
.sop-how{display:flex;gap:8px;margin-top:14px;border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--soft)}
.sop-how .ico{width:15px;height:15px;color:var(--sky);flex:none;margin-top:1px}
.sop-sec{font-size:11px;letter-spacing:.07em;color:var(--muted);font-weight:600;margin:16px 0 7px}
.sop,.stg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.sop-i{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line2);border-radius:8px;padding:10px;background:#1d1d1d;position:relative}
.sop-i.done{border-color:rgba(52,211,153,.35);background:rgba(16,185,129,.07)}
.sop-i.done > .sop-b > .sop-t{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35);color:var(--soft)}
.sop-i.wait{opacity:.45}
.sop-i.wait .sop-t{color:var(--muted)}
.sop-b{flex:1;min-width:0}
.sop-t{font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sop-t .sn{width:18px;height:18px;border-radius:50%;background:#2b2b2b;color:var(--soft);font-size:10.5px;display:inline-grid;place-items:center;flex:none;text-decoration:none}
.sop-t .lk{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-left:auto}
.sop-t .lk .ico{width:12px;height:12px}
.cbx{width:20px;height:20px;border-radius:4px;border:1.5px solid rgba(139,139,139,.55);background:transparent;display:grid;place-items:center;flex:none;padding:0;margin-top:0}
.cbx .ico{width:14px;height:14px}
.cbx.on{background:#22c58b;border-color:#22c58b;color:#000}
.cbx[disabled]{cursor:default}
.cbx:not([disabled]):not(.on):hover{border-color:var(--pink)}
.snips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.snip{display:inline-flex;align-items:center;max-width:100%;overflow:hidden;border:1px solid var(--line2);border-radius:6px;background:rgba(24,24,24,.7)}
.snip .lbl{font-size:11px;color:var(--muted);padding:4px 8px;border-right:1px solid var(--line2);white-space:nowrap}
.snip code{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(236,236,236,.9);padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ib{background:none;border:0;border-left:1px solid var(--line2);width:28px;height:26px;display:grid;place-items:center;color:var(--muted);flex:none;padding:0}
.ib:hover{color:var(--text);background:#262626}
.ib .ico{width:13px;height:13px}
.acc{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.acc label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;letter-spacing:.06em;color:var(--muted);flex:1 1 170px;min-width:0}
.acc input{height:32px;background:#151515;border:1px solid var(--line2);border-radius:6px;padding:0 9px;outline:none;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);letter-spacing:0}
.acc input:focus{border-color:var(--pink-line)}
.acc input[readonly]{background:rgba(42,42,42,.4);color:var(--soft);cursor:not-allowed}
.btn.saved{background:#22c58b;border-color:#22c58b;color:#03140d;font-weight:600;opacity:1}
.btn[disabled]:not(.saved):not(.added){opacity:.5;cursor:not-allowed}
.btn .ico{width:14px;height:14px}
.sugg{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.sugg code{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--soft)}
.cp{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line2);background:#222;border-radius:5px;font-size:10.5px;letter-spacing:.05em;padding:2px 6px;color:var(--soft)}
.cp .ico{width:11px;height:11px}
.cp:hover{color:var(--text);border-color:var(--pink-line)}
.tasks{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.btn.ghostb{background:transparent}
.btn.task-of{background:#00aff0;border-color:#00aff0;color:#04121a;font-weight:600}
.btn.task-site{background:#f5a524;border-color:#f5a524;color:#1a1004;font-weight:600}
.btn.added{background:var(--green-bg);border-color:var(--green-line);color:var(--green);opacity:1}
.lockn{flex-basis:100%;display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.lockn .ico{width:12px;height:12px}
.vids{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.vid{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:7px;padding:5px;background:#181818}
.vid i{width:48px;height:34px;border-radius:5px;display:grid;place-items:center;color:#fff;flex:none}
.vid i .ico{width:13px;height:13px}
.vid small{flex:1;font-size:11px;color:var(--soft)}
.vid .ib{border:0;border-radius:5px}
.scard{border:1px solid var(--line2);border-radius:10px;margin-bottom:10px;background:#1a1a1a;overflow:hidden}
.scard.ok{border-color:rgba(52,211,153,.4)}
.scard-h{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);background:#1f1f1f;flex-wrap:wrap}
.scard-h img{width:30px;height:30px;border-radius:8px;background:#fff}
.scard-h b{font-size:14px}
.scard-h .prog{font-size:12px;color:var(--amber)}
.scard.ok .scard-h .prog{color:var(--green)}
.pbar{width:120px;height:5px;border-radius:3px;background:#2b2b2b;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--pink);border-radius:3px}
.scard.ok .pbar i{background:var(--green)}
.scard-h .rm{color:var(--muted);width:30px;height:30px;justify-content:center;padding:0}
.scard-h .rm-ph{width:30px}
.stg{padding:10px 12px}
.stg .sop-i{background:#1d1d1d}
.stg .sop-i.done{background:rgba(16,185,129,.06)}
.noref{display:flex;align-items:center;gap:8px;margin-top:8px;border:1px dashed var(--amber-line);background:var(--amber-bg);border-radius:7px;padding:6px 8px;font-size:12px;color:var(--amber);flex-wrap:wrap}
.noref > .ico{width:14px;height:14px;flex:none}
.noref a{text-decoration:underline;cursor:pointer;color:var(--text)}
.noref .btn{margin-left:auto}
.noref input{flex:1 1 220px;height:30px;background:#151515;border:1px solid var(--line2);border-radius:6px;padding:0 9px;outline:none;font:12px ui-monospace,Menlo,monospace;color:var(--text)}
.signflow{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;flex-wrap:wrap}
.signflow .arr{color:var(--dim)}
.signflow .okc{color:var(--green);display:inline-flex;align-items:center;gap:4px}
.signflow .okc .ico{width:13px;height:13px}
.sop-i > .pill{flex:none}
@media (max-width:760px){ .pbar{width:70px} .sop-t .lk{margin-left:0} }
/* v5: Top fans */
select.in.sm{padding:5px 9px;font-size:12px;border-radius:7px}
.fans .fbar{display:flex;align-items:center;gap:10px}
.fans .fbar b{width:64px}
.fans .fbar span{flex:1;max-width:140px;height:5px;background:#2b2b2b;border-radius:3px;overflow:hidden}
.fans .fbar i{display:block;height:100%;background:var(--pink);border-radius:3px}
.fans .who img{width:22px;height:22px}
@media (max-width:760px){ table.tw.fans{min-width:640px} #fansCard{overflow-x:auto} }
.hidt.v5 th:nth-child(2){width:34%}.hidt.v5 th:nth-child(3){width:24%}.hidt.v5 th:nth-child(4){width:27%}
.hidt.v5 td .pill{white-space:normal}
.logs code{font-size:11px;background:#222;border-radius:4px;padding:0 4px}
/* v5: What is hidden on phones — rows stack as cards */
.pill.wrap{white-space:normal;max-width:100%}
@media (max-width:760px){
  .hid-grid{grid-template-columns:1fr !important}
  .hidt.v5 thead{display:none}
  table.tw.hidt.v5{min-width:0}
  .hidt.v5, .hidt.v5 tbody, .hidt.v5 tr, .hidt.v5 td{display:block;width:auto}
  .hidt.v5 tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .hidt.v5 td{padding:3px 0;border:0}
  .hidt.v5 td:first-child{white-space:normal}
  .hidt.v5 tr.hl td{background:none}.hidt.v5 tr.hl{background:rgba(255,97,166,.06);box-shadow:inset 3px 0 0 var(--pink)}
  .hidt.v5 tr.hl td:first-child{box-shadow:none}
}

/* ===================== v6: site picker, 6-stage cards, split view ===================== */
.st-head{align-items:center;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.steps .step.link{cursor:pointer}.steps .step.link:hover{border-color:var(--pink-line)}
/* sections copy the CRM's StrategyCallPanel <Section>: rounded border, bold title, small muted hint */
.scs{border:1px solid var(--line2);border-radius:10px;background:rgba(10,10,10,.35);padding:12px;margin-bottom:10px}
.scs h3{margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.scs > p{margin:3px 0 10px;font-size:12px;color:var(--muted)}
.scs a{color:var(--pink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.scs.new{border-color:var(--pink-line)}
.ptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:6px}
.ptile{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);background:rgba(30,30,30,.4);border-radius:7px;padding:7px 9px;text-align:left;color:var(--text);transition:border-color .15s,background .15s;min-width:0}
.ptile:hover{border-color:rgba(56,189,248,.4)}
.ptile.on{border-color:rgba(52,211,153,.4);background:rgba(16,185,129,.1)}
.pbox{width:16px;height:16px;flex:none;border-radius:4px;border:1px solid rgba(160,160,160,.4);display:grid;place-items:center;color:transparent}
.pbox .ico{width:12px;height:12px}
.ptile.on .pbox{background:#34d399;border-color:#34d399;color:#000}
.ptile img,.ptile .gm-logo{width:26px;height:26px;border-radius:6px;background:#fff;flex:none}
.ptile .pt{min-width:0;display:flex;flex-direction:column}
.ptile .pt b{font-size:12.5px;font-weight:600}
.ptile .pt small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile:not(.on) img{filter:saturate(.35);opacity:.8}
.gm-logo{display:inline-grid;place-items:center;background:#fff;color:#4285f4;font-weight:800;font-size:15px;font-family:Arial,sans-serif;border-radius:8px;width:30px;height:30px;flex:none}
.gm-logo.big{width:52px;height:52px;font-size:28px;border-radius:12px}
/* yes/no rows + equipment cards, after StrategyCallPanel / EquipmentPanel */
.eqrow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;border:1px solid var(--line2);border-radius:7px;background:rgba(10,10,10,.4);padding:7px 12px;font-size:13px}
.eqrow.sky{border-color:rgba(56,189,248,.3);background:rgba(56,189,248,.05)}
.yn{display:flex;gap:4px}
.yn button{border:1px solid var(--line2);background:rgba(30,30,30,.4);color:var(--muted);border-radius:6px;padding:3px 12px;font-size:12px;font-weight:600}
.yn button.on.y{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.2);color:#6ee7b7}
.yn button.on.n{border-color:rgba(244,63,94,.5);background:rgba(244,63,94,.2);color:#fda4af}
.yn button.on.s{border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.2);color:#bae6fd}
.eqneed{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-left:12px;border-left:2px solid var(--line2)}
.eqc{border:1px solid var(--line2);border-radius:8px;background:rgba(10,10,10,.4);padding:9px 11px;display:flex;flex-direction:column;gap:4px}
.eqc b{font-size:13px}.eqc small{font-size:11.5px;color:var(--muted)}
.eqc.site{flex-direction:row;align-items:flex-start;gap:10px}
.eqc .sl{width:26px;height:26px;border-radius:6px;background:#fff;flex:none}
.eql{display:flex;align-items:center;gap:7px;border:1px solid var(--line2);background:rgba(30,30,30,.4);border-radius:6px;padding:5px 9px;font-size:12px}
.eql .ico{width:13px;height:13px;color:var(--sky)}
.sn-ok,.sn-warn,.sn-grey{display:flex;gap:6px;align-items:flex-start;font-size:12px;margin-top:3px}
.sn-ok{color:#6ee7b7}.sn-warn{color:var(--amber)}.sn-grey{color:var(--muted)}
.sn-ok .ico,.sn-warn .ico,.sn-grey .ico{width:13px;height:13px;flex:none;margin-top:2px}
.sn-warn a{color:var(--amber)}
/* stage bodies */
.hint2{font-size:12px;color:var(--muted);margin:2px 0 7px;max-width:640px}
.donel{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--soft)}
.donel .ico{width:13px;height:13px;color:var(--green)}
.donel code{font-size:12px;color:var(--text)}
.snips .donel{margin-left:8px}
.snips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.checking{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--soft)}
.spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--sky);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.okc.big{font-size:14px;font-weight:600;margin-top:10px;display:flex;align-items:center;gap:6px}
.scard.coll .scard-h{border-bottom:0}
.scard-h .gm-logo{width:30px;height:30px}

/* ---- the split view (modal) ---- */
.modal.wsm{width:min(1240px,96vw);height:min(820px,92vh);max-height:92vh}
.ws-h{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ws-h > img{width:32px;height:32px;border-radius:8px;background:#fff}
.ws-steps{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:4px}
.ws-steps li{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:3px 9px 3px 4px}
.ws-steps li > .ico{width:14px;height:14px}
.ws-steps li{counter-increment:none}
.ws-steps li:not(.on){padding-left:9px}
.ws-steps li.on{color:#6ee7b7;border-color:rgba(52,211,153,.4);background:rgba(16,185,129,.1)}
.ws-b{flex:1;min-height:0;display:flex}
.ws-br{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line);position:relative;background:#111}
.ws-br .wb{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line);align-items:center;background:#1f1f1f}
.ws-br .url{flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:#141414;border:1px solid var(--line2);border-radius:999px;padding:0 12px;height:30px;font-size:12.5px;color:var(--soft)}
.ws-br .url span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-br .url .ico{width:13px;height:13px;color:var(--muted);flex:none}
.ws-page{flex:1;min-height:0;overflow:auto}
.wp-blank{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#202124}
.wb-who{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.wb-who img{width:52px;height:52px;border-radius:12px;background:#fff}
.wb-who b{font-size:16px}.wb-who span{font-size:12px;color:var(--muted)}
.wp-site{min-height:100%;background:#f3f4f6;color:#111}
.wp-top{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--bb);color:var(--bf);font-size:13px}
.wp-top img,.wp-top .gm-logo{width:28px;height:28px;border-radius:7px;background:#fff}
.wp-top b{font-size:16px}
.wp-form{max-width:380px;margin:34px auto;background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.12);padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.wp-form h4{margin:0 0 4px;font-size:18px;color:#111}
.wp-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#555;font-weight:600}
.wp-form input{border:1px solid #cfd3d8;border-radius:7px;padding:9px 11px;font-size:14px;color:#111;background:#fff;font-family:inherit}
.wp-form input.typed{animation:typed .9s ease}
@keyframes typed{0%{background:#fff7d6;border-color:#f5a524}100%{background:#fff}}
.wp-form input.bad{border-color:#e11d48;background:#fff1f2}
.wp-form .err{font-style:normal;color:#e11d48;font-size:12px;display:flex;align-items:center;gap:5px;font-weight:600}
.wp-form .err .ico{width:13px;height:13px}
.wp-go{background:var(--bb);color:var(--bf);border:0;border-radius:8px;padding:11px;font-weight:700;font-size:14px;margin-top:4px}
.wp-site[style*="--bb:#fff"] .wp-go{background:#1a73e8;color:#fff}
.wp-site[style*="--bb:#fff"] .wp-top{border-bottom:1px solid #e5e7eb}
.wp-form small{font-size:11px;color:#888;text-align:center}
.wp-welcome{max-width:420px;margin:60px auto;text-align:center;background:#fff;border-radius:12px;padding:28px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.wp-welcome > .ico{width:40px;height:40px;color:#fff;background:#16a34a;border-radius:50%;padding:8px}
.wp-welcome h4{margin:12px 0 6px;font-size:18px}.wp-welcome p{margin:0;color:#555;font-size:13px}
.ws-br .wmock{position:absolute;right:10px;bottom:8px;font-size:10.5px;color:#9a9a9a;background:#141414;border:1px solid var(--line2);border-radius:6px;padding:2px 7px}
.ws-hd{width:360px;flex:none;display:flex;flex-direction:column;background:#1b1b1b;overflow:auto}
.hd-h{display:flex;align-items:baseline;gap:8px;padding:14px 16px 4px}
.hd-h b{font-size:15px}.hd-h .muted{font-size:12px}
.hd-b{padding:8px 16px 16px;display:flex;flex-direction:column;gap:10px}
.hd-b label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.hd-b input{background:#141414;border:1px solid var(--line2);border-radius:7px;padding:8px 10px;font-size:13px;color:var(--text)}
.hd-b input.bad{border-color:rgba(245,165,36,.6)}
.hd-b .wide{width:100%;justify-content:center}
.hd-n{font-size:11.5px;margin-top:-4px}
.hd-sep{height:1px;background:var(--line);margin:4px 0}
.hd-taken{display:flex;gap:8px;border:1px solid var(--amber-line);background:var(--amber-bg);border-radius:8px;padding:9px 10px;font-size:12px;color:#fcd9a0}
.hd-taken > .ico{width:15px;height:15px;color:var(--amber);flex:none;margin-top:1px}
.hd-taken a{color:#fff;text-decoration:underline;cursor:pointer}
.ws-f{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);font-size:12px}
@media (max-width:820px){
  .modal.wsm{height:94vh}
  .ws-steps span{display:none}
  .ws-b{flex-direction:column;overflow:auto}
  .ws-br{flex:none;height:56%;border-right:0;border-bottom:1px solid var(--line)}
  .ws-hd{width:auto;overflow:visible}
  .ws-br .wwho .muted{display:none}
}

/* v6: phone split view header */
@media (max-width:820px){.ws-h .muted{display:none}.ws-h b{font-size:14px;line-height:1.25}.ws-h{gap:10px}}

/* ===== v7: her browser has real tabs, the email code step, her Gmail ===== */
.wtabs{display:flex;align-items:flex-end;gap:2px;padding:6px 8px 0;background:#0e0e0e;overflow-x:auto;scrollbar-width:none}
.wtabs::-webkit-scrollbar{display:none}
.wtab{display:flex;align-items:center;gap:7px;min-width:0;max-width:190px;flex:0 1 190px;height:32px;padding:0 10px;border-radius:9px 9px 0 0;font-size:12px;color:var(--muted);cursor:pointer;position:relative;white-space:nowrap}
.wtab:hover{background:#181818;color:var(--soft)}
.wtab.on{background:#1f1f1f;color:#fff}
.wtab span{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.wtab .fav{width:16px;height:16px;border-radius:4px;background:#fff;flex:none;object-fit:contain}
.wtab .gm-logo.fav{width:16px;height:16px;font-size:10px;display:inline-grid;place-items:center;border-radius:4px}
.wtab .ico{width:14px;height:14px;flex:none}
.wtab .wdot{width:7px;height:7px;border-radius:50%;background:#ea4335;flex:none;box-shadow:0 0 0 2px #0e0e0e}
.wtab .wx{font-weight:400;color:var(--muted);font-size:14px;line-height:1;padding:2px 3px;border-radius:4px}
.wtab .wx:hover{background:#333;color:#fff}
.wtab-new{flex:none;width:28px;height:28px;margin:0 0 2px 4px;border-radius:7px;border:0;background:transparent;color:var(--soft);font-size:18px;cursor:pointer}
.wtab-new:hover{background:#222;color:#fff}
.ws-br .url .urlin{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:12.5px;font-family:inherit}
.wb-who .ico.big{width:40px;height:40px;color:var(--muted)}
/* email code step on the site */
.wp-p{margin:0;color:#444;font-size:13px;line-height:1.45}
.codeline{display:flex;gap:6px}
.codeline .codein{flex:1;min-width:0;letter-spacing:.35em;font-family:ui-monospace,Menlo,monospace;font-size:17px !important;font-weight:600}
.wp-paste{display:flex;align-items:center;gap:5px;border:1px solid #cfd3d8;background:#f6f7f8;border-radius:7px;padding:0 12px;font-size:13px;font-weight:600;color:#222;cursor:pointer}
.wp-paste .ico{width:14px;height:14px}
.wp-wait{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:#555;background:#f3f4f6;border-radius:8px;padding:9px 11px}
.wp-wait a{color:#1a73e8;font-weight:600;cursor:pointer;text-decoration:underline}
.wp-wait.ok{background:#ecfdf3;color:#166534}
.wp-wait .ico{width:15px;height:15px}
.wp-wait .spin{border-color:#c9ccd1;border-top-color:#1a73e8}
/* Her details while waiting */
.hd-wait{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line2);border-radius:9px;padding:11px 12px;background:#181818}
.hd-wait b{display:block;font-size:13px}.hd-wait span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.hd-wait .spin{margin-top:2px;flex:none}
.hd-code{border:1px solid rgba(255,77,148,.45);background:rgba(255,77,148,.07);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:8px}
.hd-code-t{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600}
.hd-code-t .ico{width:15px;height:15px;color:var(--pink,#ff4d94)}
.hd-code-n{font-size:22px;letter-spacing:.12em;font-weight:700;color:#fff}
.hd-code .hd-n a{color:#fff;text-decoration:underline;cursor:pointer}
/* her Gmail */
.gm-app{min-height:100%;background:#fff;color:#202124;font-size:13px}
.gm-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #e8eaed;background:#f6f8fc}
.gm-top .gm-logo{width:26px;height:26px;display:inline-grid;place-items:center;border-radius:6px}
.gm-top > b{font-size:17px;font-weight:500;color:#444}
.gm-search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:#e9eef6;border-radius:999px;padding:7px 14px;color:#5f6368}
.gm-search .ico{width:14px;height:14px}
.gm-me{margin-left:auto;font-size:12px;color:#5f6368}
.gm-body{display:flex}
.gm-side{width:130px;flex:none;display:flex;flex-direction:column;gap:2px;padding:10px 8px;color:#444}
.gm-side b,.gm-side span{padding:6px 10px;border-radius:0 999px 999px 0}
.gm-side b{background:#d3e3fd;font-weight:600}
.gm-list{flex:1;min-width:0;border-left:1px solid #eef0f2}
.gm-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #f1f3f4;cursor:pointer;color:#5f6368;background:#f6f8fc}
.gm-row:hover{box-shadow:inset 0 -1px 0 #ddd,0 1px 3px rgba(0,0,0,.08)}
.gm-row.unread{background:#fff;color:#202124}
.gm-row.unread b{font-weight:700}
.gm-row > b{width:92px;flex:none;font-weight:500;color:#202124}
.gm-row .sl{width:18px;height:18px;border-radius:4px;flex:none;object-fit:contain}
.gm-row .gm-logo.sl{display:inline-grid;place-items:center;font-size:11px}
.gm-sub{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-sub b{color:#202124;font-weight:500}
.gm-row.unread .gm-sub b{font-weight:700}
.gm-t{flex:none;font-size:12px}
.gm-row.unread .gm-t{font-weight:700;color:#202124}
.gm-wait{display:flex;align-items:center;gap:8px;padding:12px 14px;color:#5f6368;background:#fff8e1;border-bottom:1px solid #f1f3f4}
.gm-wait .spin{border-color:#ddd;border-top-color:#1a73e8}
.gm-read{padding:16px 22px;max-width:640px}
.gm-back{color:#1a73e8;cursor:pointer;font-size:12.5px}
.gm-read h4{font-size:19px;font-weight:400;margin:10px 0 12px}
.gm-from{display:flex;gap:10px;align-items:center;font-size:12.5px}
.gm-from .sl{width:30px;height:30px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid #eee}
.gm-from span{color:#5f6368}
.gm-msg{margin:14px 0;padding:16px 18px;border:1px solid #eceff1;border-radius:10px;color:#333;line-height:1.5}
.gm-msg p{margin:0 0 8px}
.gm-code{font-family:ui-monospace,Menlo,monospace;font-size:30px;font-weight:700;letter-spacing:.08em;color:#111;background:#f3f4f6;border-radius:8px;padding:10px 16px;display:inline-block;margin:4px 0 10px}
.gm-small{font-size:11.5px;color:#888}
.gm-copy{display:inline-flex;align-items:center;gap:6px;background:#1a73e8;color:#fff;border:0;border-radius:999px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer}
.gm-copy .ico{width:15px;height:15px}
/* a site she is already signed in to */
.wp-home{padding:22px;display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0 auto}
.wp-hcard{background:#fff;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 18px rgba(0,0,0,.08);color:#111}
.wp-hcard b{font-size:16px}.wp-hcard span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#15803d}
.wp-hcard .ico{width:14px;height:14px}
.wp-hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wp-hgrid i{font-style:normal;background:#fff;border-radius:10px;padding:16px 8px;text-align:center;font-size:12.5px;color:#444;box-shadow:0 2px 10px rgba(0,0,0,.06)}
@media (max-width:820px){.wtab{flex-basis:120px}.gm-side{display:none}.gm-row > b{width:70px}.wp-hgrid{grid-template-columns:repeat(2,1fr)}}
.wp-wait{display:block;line-height:1.55}
.wp-wait .spin,.wp-wait .ico{display:inline-block;vertical-align:-3px;margin-right:6px}
.codeline .codein::placeholder{letter-spacing:normal;font-family:inherit;font-size:14px;font-weight:400}
.wtab .wdot{margin-left:-2px}

/* v7 fix: Onboarding list in the CRM's own layout */
.ol-h{display:flex;gap:12px;align-items:flex-start;margin:6px 0 14px}.ol-h h2{margin:0;font-size:20px;font-weight:600}.ol-h p{margin:4px 0 0;font-size:13.5px}
.ol-i{color:var(--pink);margin-top:3px}.ol-i svg{width:20px;height:20px}
.ol-bar{display:flex;gap:12px;margin-bottom:14px}
.ol-s{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:0 14px;background:var(--card);color:var(--muted)}
.ol-s svg{width:16px;height:16px}.ol-s input{flex:1;background:none;border:0;outline:0;color:var(--text,#eee);font:inherit;font-size:14px;padding:11px 0}
.ol-sel{appearance:none;-webkit-appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23999' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:10px;color:inherit;font:inherit;font-size:14px;padding:10px 36px 10px 14px;min-width:200px}
.ol-sel.sm{min-width:150px;font-size:13px;padding:7px 32px 7px 12px;border-radius:8px}
.tw.ol td{padding:12px}.ol-st{font-size:14px;white-space:nowrap}.ol-sub{white-space:nowrap;color:#cfcfcf}
.tw.ol th.ol-new{color:var(--pink)}
.obar{width:116px}.obar-t{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}.obar-t b{font-weight:500;color:var(--pink)}
.obar-r{height:4px;background:#2b2b2b;border-radius:3px;margin-top:5px}.obar-r i{display:block;height:100%;background:var(--pink);border-radius:3px}
.obar.full .obar-t b{color:var(--green)}.obar.full .obar-r i{background:var(--green)}
.ol-logo{width:22px;height:22px;border-radius:5px;margin-right:4px;vertical-align:middle}
.ol-act{display:flex;gap:6px}
.oa{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:none;border:1px solid;cursor:pointer;padding:0}
.oa svg{width:14px;height:14px}
.oa.y{color:#f5c84b;border-color:rgba(245,200,75,.55)}.oa.y.dim{color:rgba(245,200,75,.6);border-color:rgba(245,200,75,.25)}
.oa.g{color:var(--green);border-color:rgba(52,199,123,.35)}.oa.p{color:var(--pink);border-color:var(--pink-line)}.oa.r{color:var(--red);border-color:rgba(255,90,90,.5)}
@media (max-width:760px){ .ol-bar{flex-wrap:wrap}.ol-s{flex-basis:100%}.ol-bar .ol-sel{flex:1;min-width:0} table.tw.ol{min-width:1180px} }
.card:has(> table.ol){overflow-x:auto}
.tw.ol th,.tw.ol td{padding:10px 8px}.tw.ol th:first-child,.tw.ol td:first-child{padding-left:14px}
.tw.ol .obar{width:92px}.tw.ol .ol-sel.sm{min-width:0;width:126px}.ol-act{gap:5px}.oa{width:28px;height:28px}
.tw.ol .who small{font-size:12px}
@media (max-width:760px){ .ol-bar .ol-sel{flex-basis:100%} }

/* v8: step 4 = the CRM's real per-site setup, plus "Connect her to HALO streaming" */
.snip.tx code{white-space:normal;line-height:1.45}
.tmenu{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.tmenu span{font-size:12px;border:1px solid var(--pink-line);color:#f3d3e3;border-radius:999px;padding:3px 10px}
.tmenu span b{color:var(--pink);font-weight:600;margin-left:3px}.tmenu small{color:var(--muted);font-size:11.5px;flex-basis:100%}
.cbnote{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--soft);background:rgba(56,189,248,.06);border:1px dashed rgba(56,189,248,.35);border-radius:8px;padding:8px 10px;margin:0 0 10px}
.cbnote svg,.conn-top svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--sky)}
.ofnote{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--soft);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-top:10px}
.ofnote img.sl{width:20px;height:20px;border-radius:5px}
.conn{border:1px solid var(--line2);border-radius:12px;padding:12px;background:#1a1a1a;display:flex;flex-direction:column;gap:8px}
.conn-top{display:flex;gap:8px;font-size:13px;color:#e8e8e8;padding:2px 2px 6px}
.crow{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:#1f1f1f}
.crow.ok{border-color:rgba(52,211,153,.35);background:rgba(16,185,129,.07)}
.crow.coming{opacity:.6;background:#1b1b1b}
.cst{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:#2a2a2a;color:var(--muted)}
.crow.ok .cst{background:var(--green);color:#052}
.cst svg{width:14px;height:14px}
.cbody{flex:1;min-width:0}.cbody b{font-weight:500;font-size:13.5px}.csub{font-size:12px;color:var(--muted);margin-top:2px}
.cdots{display:inline-flex;align-items:center;gap:4px;margin-top:2px}.cdots img.sl{width:16px;height:16px;border-radius:4px}
.cdots i{width:8px;height:8px;border-radius:50%;background:#555;margin-right:8px}.cdots i.g{background:var(--green)}
.sp-page{max-width:440px;gap:8px}.sp-page h4{margin:0 0 4px}
.sp-sub{font-size:12px;color:#666}
.sp-row{display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px;font-size:13px;transition:background .4s}
.sp-row em{font-style:normal;font-size:12px;color:#6b7280;border:1px solid #d1d5db;border-radius:6px;padding:2px 8px}
.sp-row em.on{color:#047857;border-color:#a7f3d0;background:#ecfdf5;display:inline-flex;gap:4px;align-items:center}.sp-row em.on svg{width:12px;height:12px}
.sp-row em.tok{border:0;color:#111;font-weight:600}
.sp-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#6b7280;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px;transition:background .4s}
.sp-f span{color:#111;font-size:13.5px}.sp-f.hl{border-color:var(--bb,#f47321);box-shadow:0 0 0 2px color-mix(in srgb,var(--bb,#f47321) 25%,transparent)}
.ph{color:#9ca3af;font-style:normal}
.sp-row.typed,.sp-f.typed{background:#fef9c3}
.svl{gap:6px}
.svi{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line2);border-radius:8px;padding:8px 9px;cursor:pointer;font-size:12.5px}
.svi .cbx{pointer-events:none;width:18px;height:18px}
.svi.cur{border-color:var(--pink-line);background:rgba(255,97,166,.06)}
.svi.done{opacity:.7}.svi.done .svt{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.svt{display:flex;gap:6px;align-items:flex-start;line-height:1.4}.svt .sn{width:17px;height:17px;border-radius:50%;background:#2b2b2b;color:var(--soft);font-size:10px;display:inline-grid;place-items:center;flex:none}
.svi .btn{margin-top:9px}
@media (max-width:760px){ .crow{flex-wrap:wrap}.crow .pill{white-space:normal} }
.scard .cbnote{margin:0 14px 10px}
.lockl{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);padding:2px 16px 14px}.lockl svg{width:14px;height:14px;flex:none}
.stg .sop-t{flex-wrap:nowrap;align-items:flex-start}.stg .sop-t .sn{margin-top:1px}
/* v8 addition: address first, add her to HALO streaming, locked vault */
.hico{width:22px;height:22px;color:var(--pink);flex:none}
.addr-b{padding:0 16px 14px;display:flex;flex-direction:column;gap:8px}
.ctag{font-size:11px;color:var(--muted);background:var(--grey-bg);border-radius:6px;padding:2px 7px;white-space:nowrap}
.abuy{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.abuy li{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.abuy li.on{color:#e8e8e8}.abuy li.on svg{color:var(--green);width:14px;height:14px}
.abuy li.cur{color:#e8e8e8}.abuy .dot{width:8px;height:8px;border-radius:50%;background:#444;margin:0 3px}
.aline{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--soft)}.aline svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--sky)}
.scard.lockc{opacity:.5}.scard.lockc .prog{display:flex;gap:5px;align-items:center;color:var(--muted)}.scard.lockc .prog svg{width:12px;height:12px}
.vnote{font-size:11.5px;color:var(--muted);margin-top:4px}
.addr-b a,.lockl a{color:var(--pink);text-decoration:underline;cursor:pointer}
@media (max-width:760px){ .crow .cbody{flex:1 1 calc(100% - 40px)} .crow .pill{margin-left:38px;white-space:nowrap} }
.svi .snips{min-width:0}.svi .snip{max-width:100%}.svi .snip code{white-space:normal;word-break:break-all}
/* v8 corrections 31 Oct: logins saved to both */
.slchip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(34,197,94,.12);color:#16a34a;border:1px solid rgba(34,197,94,.35);white-space:nowrap}
.slchip svg{width:12px;height:12px}
@media (max-width:700px){.btn.saved{white-space:normal;text-align:left;height:auto;min-height:32px;padding-top:6px;padding-bottom:6px;max-width:100%}}
/* v8 31 Oct: what was bought, on her record */
.afacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 4px}
.af{background:rgba(255,255,255,.03);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:8px;padding:7px 10px;min-width:0}
.af > span{display:block;font-size:11px;color:var(--muted,#8b8b93);text-transform:uppercase;letter-spacing:.04em}
.af b{display:block;font-size:13px;font-weight:500;margin-top:2px;overflow-wrap:anywhere}
.af:last-child{grid-column:span 2}
.af .slchip{margin-left:4px}
.csub code{font-size:12px}
@media (max-width:700px){.afacts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v8 round 2 (31 Oct): her browser + Payment Log rows */
.pxset{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.pxset span{font-size:12px;color:var(--muted,#8b8b93);background:rgba(255,255,255,.03);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:7px;padding:4px 8px}
.pxset b,.pxset code{color:var(--text,#eee)}
.ipres{display:flex;gap:8px;align-items:flex-start;border-radius:8px;padding:8px 10px;font-size:13px;margin:6px 0}
.ipres svg{width:15px;height:15px;flex:none;margin-top:2px}
.ipres.ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35);color:#86efac}
.ipres.bad{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);color:#fca5a5}
.ipres b{color:inherit;font-weight:600}
a.hint2[data-brw]{cursor:pointer;text-decoration:underline}
.money{margin:12px 0 4px;border:1px solid var(--border,rgba(255,255,255,.08));border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.02)}
.money-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.money-h svg{width:15px;height:15px}
.mt-l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#8b8b93);margin:10px 0 4px}
.mtab{border:1px solid var(--border,rgba(255,255,255,.08));border-radius:8px;overflow:hidden;font-size:12px}
.mth,.mtr{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;padding:6px 10px;align-items:center}
.mth{color:var(--muted,#8b8b93);background:rgba(255,255,255,.03);font-size:11px}
.mtr span{overflow-wrap:anywhere}
.mtr .r,.mth .r{text-align:right}
.mtr .neg{color:#fca5a5}
.mtr i.pill{font-style:normal}
.mtr svg{width:12px;height:12px;vertical-align:-2px}
@media (max-width:700px){.mth{display:none}.mtr{grid-auto-flow:row;grid-template-columns:1fr 1fr}.mtr .r{text-align:left}}
.mtr i.pill{white-space:normal;line-height:1.25;height:auto;padding-top:3px;padding-bottom:3px;text-align:center}
.mth span,.mtr span{min-width:0}
/* her browser on the box (correction 31 Oct) */
.bflow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;margin-top:4px}
.bflow>i{align-self:center;font-style:normal;color:var(--muted)}
.bf{flex:1 1 120px;border:1px solid var(--line2);border-radius:10px;padding:8px 10px;background:var(--grey-bg);display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.bf small{color:var(--muted);font-size:11px;line-height:1.3}
.bf.hl{border-color:var(--sky);background:color-mix(in srgb,var(--sky) 10%,transparent)}
.mini-br{border:1px solid var(--line2);border-radius:10px;overflow:hidden;margin:6px 0;background:#fff;color:#202124;max-width:460px}
.mb-bar{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#eef0f3;font-size:11px;flex-wrap:wrap}
.mb-bar .dots{display:flex;gap:4px}.mb-bar .dots i{width:8px;height:8px;border-radius:50%;background:#c9ccd1;display:block}
.mb-url{background:#fff;border-radius:12px;padding:2px 9px;display:inline-flex;align-items:center;gap:4px;color:#3c4043}.mb-url svg{width:11px;height:11px}
.mb-who{color:#5f6368;margin-left:auto}
.mb-body{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.mb-body small{color:#5f6368;font-size:11px}.mb-body b{font-size:20px;letter-spacing:.3px}.mb-body b.g{color:#137333}.mb-body b.r{color:#c5221f}.mb-body span{font-size:12px;color:#3c4043}
.wconn{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#137333;margin-left:auto;white-space:nowrap}.wconn i{width:7px;height:7px;border-radius:50%;background:#34a853;display:block}
.wwho .ctag{margin-left:6px}
@media(max-width:700px){.bflow{flex-direction:column}.bf{flex:none}.bflow>i{transform:rotate(90deg)}.mb-who{margin-left:0}}
/* v9: when she's added + only through the CRM */
.when{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-top:4px}
.when-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.wl{display:flex;align-items:flex-start;gap:0}
.wl em{flex:1 1 10px;height:2px;background:var(--line2);margin-top:13px;min-width:8px}
.wn{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;text-align:center;font-size:11.5px;color:var(--soft);position:relative}
.wn i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);color:var(--muted);font-weight:600}
.wn.content i{border-color:#a78bfa;color:#c4b5fd;background:rgba(167,139,250,.12)}
.wn.here i{border-color:var(--green);color:#fff;background:var(--green)}
.wn.old i{border-style:dashed}
.pin{font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 6px;white-space:nowrap}
.pin.now{background:rgba(34,197,94,.16);color:#4ade80}
.pin.was{background:var(--grey-bg);color:var(--muted);text-decoration:line-through}
.when-f{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:8px}
.lg{width:10px;height:10px;border-radius:50%;display:inline-block}.lg.c{background:#a78bfa}.lg.h{background:var(--green);margin-left:8px}
.only{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;margin-top:6px}
.only>i{align-self:center;font-style:normal;color:var(--muted)}
.oc{border:1px solid var(--line2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:12.5px;flex:1 1 130px}
.oc svg{width:15px;height:15px}.oc small{color:var(--muted);font-size:11px}
.oc.yes{border-color:rgba(34,197,94,.45)}
.oc.no{opacity:.55;border-style:dashed;margin-left:auto}.oc.no b{text-decoration:line-through}
@media(max-width:700px){.wl{flex-wrap:wrap;row-gap:10px}.wl em{display:none}.wn{width:31%}.oc.no{margin-left:0}.only{flex-direction:column}.only>i{transform:rotate(90deg)}.oc{flex:none}}
/* v9: server tiles on Issues (old System info, folded in) */
.ikrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.ikrow .grid{gap:10px}
.srv-l{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;margin:0 0 6px 2px}.srv-l svg{width:13px;height:13px}
.kpi.srv{text-align:left;font:inherit;color:inherit;cursor:pointer;position:relative;border-left-width:3px}
.kpi.srv:hover{border-color:var(--line2)}
.kpi.srv.ok{border-left-color:var(--green)}.kpi.srv.busy{border-left-color:var(--amber,#f59e0b)}.kpi.srv.over{border-left-color:var(--red)}
.kpi.srv.busy b{color:var(--amber,#f59e0b)}.kpi.srv.over b{color:var(--red)}
.srv-s{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--soft)}.srv-s i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.busy .srv-s i{background:var(--amber,#f59e0b)}.over .srv-s i{background:var(--red)}
.hico2 svg{width:22px;height:22px;color:var(--sky)}
.srvbig{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}.srvbig b{font-size:40px;font-weight:650;letter-spacing:-.02em}.srvbig b.busy{color:var(--amber,#f59e0b)}.srvbig b.over{color:var(--red)}.srvbig span{color:var(--soft)}
.sbar{position:relative;height:10px;border-radius:6px;background:var(--grey-bg);overflow:visible}.sbar i{display:block;height:100%;border-radius:6px;background:var(--green)}.sbar i.busy{background:var(--amber,#f59e0b)}.sbar i.over{background:var(--red)}
.sbar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--muted);opacity:.6}
.sbar-k{position:relative;height:16px;font-size:10.5px;color:var(--muted);margin-top:4px}.sbar-k span{position:absolute;transform:translateX(-50%);white-space:nowrap}.sbar-k span:first-child{transform:none;left:0}
.spk{width:100%;height:70px;display:block}.spk polyline{fill:none;stroke:var(--sky);stroke-width:2;vector-effect:non-scaling-stroke}.spk line{stroke:var(--amber,#f59e0b);stroke-dasharray:4 4;stroke-width:1;vector-effect:non-scaling-stroke}
.spk-l{display:flex;justify-content:space-between;font-size:11px}
.kv{display:flex;flex-direction:column;gap:10px;margin-top:14px}.kv small{display:block;color:var(--muted);font-size:11px}
.srcnote{display:flex;gap:8px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--soft)}.srcnote svg{width:15px;height:15px;flex:none;color:var(--sky);margin-top:1px}
@media(max-width:1100px){.ikrow{grid-template-columns:1fr}}
@media(max-width:700px){.view .ikrow .grid{grid-template-columns:1fr 1fr!important}}
.when-f{flex-direction:column;align-items:flex-start;gap:4px}.when-f>span{display:flex;align-items:center;gap:6px}.lg.h{margin-left:0}
.ikrow .kpi{min-height:84px}
/* v9.1 */
.srv-l{display:flex;align-items:center;gap:6px}.srv-l .btn{font-size:11px;padding:3px 8px}
.srv-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(239,68,68,.14);color:#f87171;flex:none}.srv-av svg{width:16px;height:16px}
tr.srvrow td{background:rgba(239,68,68,.06)}tr.srvrow td:first-child{box-shadow:inset 3px 0 0 #ef4444}
.srv-iss{border:1px solid rgba(239,68,68,.5);background:rgba(239,68,68,.08);border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:13px}.srv-iss ol{margin:8px 0 0;padding-left:18px;line-height:1.7}
.isub{color:var(--muted);font-size:12px;margin-top:3px;line-height:1.5}
.sop-i.hold{opacity:.6}.sop-i.hold .sop-t span:nth-child(2){text-decoration:none}
.svi.wait{opacity:.6}
.sp-photo{width:84px;height:84px;border-radius:10px;border:1px dashed rgba(0,0,0,.25);display:grid;place-items:center;margin-bottom:10px;overflow:hidden;font-size:11px}.sp-photo img{width:100%;height:100%;object-fit:cover}
.sp-rule{display:flex;gap:6px;align-items:center;margin-top:10px;font-size:12px;color:#b45309;background:rgba(245,158,11,.12);border-radius:8px;padding:6px 9px}.sp-rule svg{width:14px;height:14px}

/* round 2 (final) */
.tstate{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--soft)}
.tstate.sent{color:#58c98e;border-color:rgba(88,201,142,.4)} .tstate.wait{color:#f0b35a;border-color:rgba(240,179,90,.4)} .tstate.done{color:#58c98e;background:rgba(88,201,142,.12);border-color:rgba(88,201,142,.5)}
.tstate .spin{width:11px;height:11px}
.tasks{align-items:center;flex-wrap:wrap}
.rule4{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:6px 0 4px;border:1px solid var(--pink-line);border-radius:10px;background:rgba(255,95,160,.06);font-size:13.5px}
.quiet{margin-top:14px;font-size:12.5px;color:var(--soft)}
.tasks.locked{opacity:.55}