/* Launchpad LI Engine — operator cockpit
   Palette: warm-dark surface, Launchpad orange accent, traffic-light health.
   Type: Inter for UI, Roboto Mono for data/IPs/logs. */

:root{
  --bg:#000000; --surface:#101010; --surface-2:#181818; --surface-3:#242424;
  --border:#282828; --border-2:#383838;
  --text:#F5F5F5; --muted:#A0A0A0; --faint:#6A6A6A;
  --accent:#EE5622; --accent-dim:rgba(238,86,34,.14); --accent-line:rgba(238,86,34,.4);
  --green:#42B24A; --amber:#E3A008; --red:#E5484D; --blue:#4B93E7;
  --r:10px; --r-sm:7px;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---- left rail ---- */
.rail{
  width:216px; flex:0 0 216px; background:var(--surface);
  border-right:1px solid var(--border); height:100vh; position:sticky; top:0;
  display:flex; flex-direction:column; padding:20px 14px;
}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 22px}
.brand .dot{width:11px;height:11px;border-radius:3px;background:var(--accent);
  box-shadow:0 0 12px var(--accent-line)}
.brand b{font-weight:700;letter-spacing:-.01em}
.brand span{color:var(--faint);font-size:11px;font-family:var(--mono);display:block;margin-top:1px}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.nav button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--muted);cursor:pointer;font-weight:500;transition:.12s;
}
.nav button:hover{background:var(--surface-2);color:var(--text)}
.nav button.on{background:var(--accent-dim);color:var(--text)}
.nav button.on::before{content:"";width:3px;height:16px;border-radius:2px;background:var(--accent);
  margin:-2px 4px -2px -11px}
.rail .foot{margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--faint);padding:8px}
.rail .foot .live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);
  margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---- main ---- */
.main{flex:1;min-width:0;height:100vh;overflow-y:auto}
.head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:26px 30px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;
  background:linear-gradient(var(--bg),var(--bg) 70%,transparent);z-index:5;
}
.head h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}
.head p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.wrap{padding:22px 30px 60px}

/* ---- kpi strip ---- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 15px}
.kpi .n{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.02em}
.kpi .l{color:var(--muted);font-size:11px;margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.kpi.warn .n{color:var(--amber)} .kpi.good .n{color:var(--green)} .kpi.acc .n{color:var(--accent)}

/* ---- section label ---- */
.slabel{display:flex;align-items:center;gap:10px;margin:26px 0 13px}
.slabel h2{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.slabel .rule{flex:1;height:1px;background:var(--border)}

/* ---- account health cards ---- */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:13px}
.acct{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px 16px;position:relative;overflow:hidden}
.acct::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--faint)}
.acct.active::before{background:var(--green)} .acct.warning::before{background:var(--amber)}
.acct.paused::before{background:var(--faint)} .acct.banned::before{background:var(--red)}
.acct .top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.acct .name{font-weight:600;letter-spacing:-.01em}
.acct .ip{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:2px}
.led{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
.led i{width:7px;height:7px;border-radius:50%}
.led.active{background:rgba(66,178,74,.13);color:var(--green)} .led.active i{background:var(--green)}
.led.warning{background:rgba(227,160,8,.13);color:var(--amber)} .led.warning i{background:var(--amber)}
.led.paused{background:var(--surface-3);color:var(--muted)} .led.paused i{background:var(--faint)}
.led.banned{background:rgba(229,72,77,.13);color:var(--red)} .led.banned i{background:var(--red)}

.acct .bars{margin:14px 0 10px;display:flex;flex-direction:column;gap:9px}
.bar .bl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px}
.bar .bl b{font-family:var(--mono);color:var(--text);font-weight:500}
.bar .track{height:6px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.bar .fill{height:100%;background:var(--accent);border-radius:4px;transition:width .4s}
.bar .fill.msg{background:var(--blue)}

.acct .metrics{display:flex;gap:18px;padding-top:11px;border-top:1px solid var(--border)}
.metric .mv{font-family:var(--mono);font-size:16px;font-weight:500}
.metric .ml{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.metric .mv.low{color:var(--amber)}
.cookie-warn{margin-top:10px;font-size:11px;color:var(--amber);font-family:var(--mono)}

/* ---- log feed ---- */
.logfeed{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.logrow{display:grid;grid-template-columns:70px 130px 90px 1fr 120px;gap:12px;padding:8px 15px;
  font-family:var(--mono);font-size:11.5px;border-bottom:1px solid var(--border);align-items:center}
.logrow:last-child{border-bottom:none}
.logrow .t{color:var(--faint)} .logrow .a{color:var(--text)}
.logrow .ip{color:var(--faint);text-align:right}
.tag{padding:1px 7px;border-radius:4px;font-size:10.5px;font-weight:600;text-align:center;width:fit-content}
.tag.ok{background:rgba(66,178,74,.13);color:var(--green)}
.tag.error{background:rgba(229,72,77,.13);color:var(--red)}
.tag.rate_limited,.tag.challenge{background:rgba(227,160,8,.13);color:var(--amber)}
.tag.invite{background:var(--accent-dim);color:var(--accent)}
.tag.message{background:rgba(75,147,231,.13);color:var(--blue)}
.tag.visit,.tag.inbox_check{background:var(--surface-3);color:var(--muted)}

/* ---- tables / forms shared ---- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;margin-bottom:16px}
.panel h3{margin:0 0 3px;font-size:15px;font-weight:600}
.panel .sub{color:var(--muted);font-size:12.5px;margin:0 0 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;color:var(--muted);font-weight:500}
.field .hint{font-size:11px;color:var(--faint)}
input,select,textarea{
  background:var(--bg);border:1px solid var(--border-2);border-radius:var(--r-sm);
  padding:9px 11px;width:100%;transition:.12s;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-dim)}
textarea{resize:vertical;min-height:70px;font-family:var(--mono);font-size:12.5px}
.row{display:flex;gap:10px;align-items:flex-end}

.btn{background:var(--accent);color:#fff;border:none;padding:9px 16px;border-radius:var(--r-sm);
  font-weight:600;cursor:pointer;transition:.12s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--border-2);color:var(--text)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.danger{background:transparent;border:1px solid rgba(229,72,77,.4);color:var(--red)}

.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);
  padding:8px 12px;border-bottom:1px solid var(--border);font-weight:600}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .mono{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---- sequence builder ---- */
.steps{display:flex;flex-direction:column;gap:0}
.step{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:15px 16px;position:relative}
.step-conn{width:2px;height:22px;background:var(--border-2);margin:0 auto;position:relative}
.step-conn .delay{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.step-num{width:22px;height:22px;border-radius:6px;background:var(--accent-dim);color:var(--accent);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600}
.step-head select{width:auto;min-width:150px}
.step-head .x{margin-left:auto}
.mergehint{font-size:11px;color:var(--faint);margin-top:6px;font-family:var(--mono)}

.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty b{display:block;color:var(--text);margin-bottom:6px;font-size:15px}

/* ---- modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(10,8,7,.72);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;padding:50px 20px;z-index:50;overflow-y:auto}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border-2);border-radius:14px;
  width:100%;max-width:620px;padding:24px 26px}
.modal h3{margin:0 0 18px;font-size:17px}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

.toast{position:fixed;bottom:22px;right:22px;background:var(--surface-3);border:1px solid var(--border-2);
  padding:12px 16px;border-radius:var(--r-sm);z-index:80;opacity:0;transform:translateY(8px);
  transition:.2s;font-size:13px;max-width:320px}
.toast.show{opacity:1;transform:none}
.toast.err{border-color:rgba(229,72,77,.5)}

@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.rail{width:64px;flex-basis:64px}
  .brand b,.brand span,.nav button span,.rail .foot{display:none}.nav button{justify-content:center}}

/* ---- leads toolbar + chips ---- */
.toolbar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{background:var(--surface);border:1px solid var(--border);color:var(--muted);
  padding:6px 12px;border-radius:20px;font-size:12.5px;cursor:pointer;transition:.12s;text-transform:capitalize}
.chip:hover{border-color:var(--border-2);color:var(--text)}
.chip.on{background:var(--accent-dim);border-color:var(--accent-line);color:var(--text)}
.chip b{font-family:var(--mono);font-weight:500;margin-left:3px;opacity:.8}

/* ---- inbox two-pane ---- */
.inbox{display:grid;grid-template-columns:340px 1fr;gap:14px;height:calc(100vh - 150px)}
.inbox-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:12px;overflow-y:auto}
.convo{padding:11px 12px;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;transition:.12s;margin-bottom:3px}
.convo:hover{background:var(--surface-2)}
.convo.on{background:var(--surface-2);border-color:var(--border-2)}
.convo-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.convo-top b{font-size:13.5px;font-weight:600}
.convo-time{font-family:var(--mono);font-size:11px;color:var(--faint);flex-shrink:0}
.convo-prev{font-size:12.5px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo-meta{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:4px}

.inbox-thread{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden}
.thread-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--border)}
.thread-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:74%;display:flex;flex-direction:column;gap:3px}
.bubble.out{align-self:flex-end;align-items:flex-end}
.bubble.in{align-self:flex-start;align-items:flex-start}
.bubble-body{padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45}
.bubble.out .bubble-body{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.bubble.in .bubble-body{background:var(--surface-3);color:var(--text);border-bottom-left-radius:4px}
.bubble-time{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.thread-foot{padding:11px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--faint);text-align:center}
@media(max-width:900px){.inbox{grid-template-columns:1fr;height:auto}}

/* ---- reply composer ---- */
.thread-compose{display:flex;gap:10px;align-items:flex-end;padding:14px 18px;border-top:1px solid var(--border)}
.thread-compose textarea{min-height:44px;max-height:140px;font-family:var(--sans);font-size:13.5px}
.thread-compose .btn{flex-shrink:0}
.bubble.failed .bubble-body{outline:1px solid var(--red)}
.bubble.failed .bubble-time{color:var(--red)}

/* ---- theme toggle button ---- */
.theme-btn{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
  padding:8px;border-radius:var(--r-sm);cursor:pointer;font-size:12px;transition:.12s}
.theme-btn:hover{color:var(--text);border-color:var(--border-2)}
.tm-light{display:none} body[data-theme="light"] .tm-dark{display:none}
body[data-theme="light"] .tm-light{display:inline}

/* ---- LIGHT THEME ---- */
body[data-theme="light"]{
  --bg:#F6F6F4; --surface:#FFFFFF; --surface-2:#FAFAF9; --surface-3:#EFEFEC;
  --border:#E6E6E2; --border-2:#D6D6D1;
  --text:#1B1B19; --muted:#66665F; --faint:#9A9A93;
  --accent-dim:rgba(238,86,34,.10);
}
body[data-theme="light"] .head{background:linear-gradient(var(--bg),var(--bg) 70%,transparent)}
body[data-theme="light"] .bubble.in .bubble-body{background:#EFEFEC}
body[data-theme="light"] .btn.ghost{color:var(--text)}

/* ---- lead behaviour timeline ---- */
.timeline{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto}
.tl-item{display:flex;gap:12px;padding:10px 2px}
.tl-dot{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--surface-3);
  display:grid;place-items:center;font-size:12px;color:var(--muted)}
.tl-dot.out{background:var(--accent-dim);color:var(--accent)}
.tl-dot.in{background:rgba(66,178,74,.14);color:var(--green)}
.tl-body{flex:1;min-width:0}
.tl-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;text-transform:capitalize}
.tl-time{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint);text-transform:none;font-weight:400}
.tl-text{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}

/* ---- sequence builder (Aimfox-style) ---- */
.seq-tip{background:var(--accent-dim);border:1px solid var(--accent-line);border-radius:var(--r-sm);
  padding:9px 12px;font-size:12.5px;color:var(--muted);margin:10px 0 4px}
.seq-tip b{color:var(--text)}
.seq-delay{display:flex;align-items:center;gap:8px;padding:8px 0 8px 20px;font-size:12.5px;color:var(--muted);position:relative}
.seq-delay::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--border-2)}
.seq-delay input{width:56px}.seq-delay select{width:auto}
.seq-step{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:14px 15px;margin-bottom:2px}
.seq-step-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.type-seg{display:flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px}
.type-opt{background:none;border:none;color:var(--muted);padding:5px 10px;border-radius:5px;font-size:12px;cursor:pointer;transition:.12s;white-space:nowrap}
.type-opt:hover{color:var(--text)}
.type-opt.on{background:var(--accent);color:#fff}
.seq-step-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.merge-chip{background:var(--surface-3);border:1px solid var(--border);color:var(--muted);
  font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:5px;cursor:pointer;margin-left:5px;transition:.12s}
.merge-chip:hover{color:var(--accent);border-color:var(--accent-line)}
.charcount{font-family:var(--mono);font-size:11px;color:var(--faint)}
.charcount.over{color:var(--red)}
.visit-note{font-size:12.5px;color:var(--muted);padding:4px 2px;font-style:italic}
.add-steps{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* ---- lead send diagnosis ---- */
.diag{padding:11px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:16px;line-height:1.5}
.diag.ok{background:rgba(66,178,74,.12);border:1px solid rgba(66,178,74,.35);color:var(--text)}
.diag.bad{background:rgba(229,72,77,.10);border:1px solid rgba(229,72,77,.35);color:var(--text)}
.diag.bad b{color:var(--red)}
.diag-more{margin:-8px 0 16px}
.diag-more summary{cursor:pointer;font-size:12px;color:var(--muted);padding:4px 0}
.diag-row{font-size:12.5px;padding:3px 0 3px 4px;font-family:var(--mono)}
.diag-row.pass{color:var(--green)} .diag-row.fail{color:var(--red)}

/* --- visual sequence flow builder --- */
.seq-pal{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;margin:14px 0 16px}
.seq-pal-label{font-size:11px;color:var(--faint);margin-right:2px}
.pal-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-3);border:1px solid var(--border-2);color:var(--text);font-size:12.5px;padding:5px 11px;border-radius:var(--r-sm);cursor:grab;transition:.12s}
.pal-chip:hover{border-color:var(--accent-line);color:var(--accent)}
.pal-chip span{font-size:12px}
.seq-flow{display:flex;flex-direction:column}
.seq-conn{padding:5px 0 5px 26px;font-size:12px;color:var(--faint);position:relative}
.seq-conn::before{content:"";position:absolute;left:15px;top:-2px;bottom:-2px;width:2px;background:var(--border-2)}
.seq-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;cursor:pointer;transition:border-color .12s}
.seq-card:hover{border-color:var(--border-2)}
.seq-card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-line)}
.seq-card.drag{opacity:.5}
.seq-card-head{display:flex;align-items:center;gap:11px}
.seq-grip{color:var(--faint);cursor:grab;font-size:13px;letter-spacing:-2px;user-select:none}
.seq-ico{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.seq-ico.invite{background:var(--accent-dim);color:var(--accent)}
.seq-ico.message{background:rgba(75,147,231,.14);color:var(--blue)}
.seq-ico.visit{background:var(--surface-3);color:var(--muted)}
.seq-card-t{min-width:0;flex:1}
.seq-card-title{font-size:13.5px;font-weight:500;color:var(--text)}
.seq-card-sub{font-size:11.5px;color:var(--faint)}
.seq-preview{margin:9px 0 0 41px;font-size:12.5px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.seq-preview .mf{color:var(--accent);background:var(--accent-dim);padding:0 5px;border-radius:4px;font-size:11.5px}
.seq-editor{margin:12px 0 2px 41px;padding-top:12px;border-top:1px solid var(--border)}
.seq-editor textarea{width:100%;min-height:76px;margin-top:2px}
.seq-editor .type-seg{margin-bottom:10px;flex-wrap:wrap}
.seq-delay-edit{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.seq-delay-edit input{width:64px}.seq-delay-edit select{width:auto}
.seq-first{margin-top:11px;font-size:12px;color:var(--faint)}
.visit-note{font-size:12.5px;color:var(--faint);padding:4px 0}