/* Layout: fixed left sidebar (desktop) / scrolling tab strip (phone); work area with a phone-preview column wherever a WhatsApp message is involved. */
:root{
  --bg:#eef1ec; --surface:#ffffff; --raised:#f7f9f6; --fg:#14201b; --mute:#5b6a63; --line:#dde3dc;
  --side:#0b3b2e; --side-fg:#d8ece3; --side-mute:#8fb5a6; --side-on:#145c46;
  --brand:#0f7a5c; --brand-ink:#ffffff; --brand-soft:#d9f1e7; --brand-soft-ink:#0a4e3b;
  --gold:#b7791f; --gold-soft:#fbefd8;
  --warn:#8a530c; --warn-soft:#fbefd9; --bad:#a3302e; --bad-soft:#fbe9e8; --info:#1b4f86; --info-soft:#e4eef9;
  --wa-bg:#efe7dd; --wa-dot:#e2d6c8; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-head:#075e54; --wa-head-fg:#ffffff; --wa-btn:#027eb5; --wa-ink:#111b21; --wa-meta:#667781;
  --f-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif; --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d1412; --surface:#151e1b; --raised:#1b2622; --fg:#e3ece7; --mute:#94a69d; --line:#26332e;
  --side:#08110e; --side-fg:#cfe5db; --side-mute:#6f9182; --side-on:#123a2e;
  --brand:#34b08a; --brand-ink:#04140e; --brand-soft:#15392d; --brand-soft-ink:#9fe3c8; --gold:#e3aa52; --gold-soft:#3a2c13;
  --warn:#f0b863; --warn-soft:#3a2b14; --bad:#f19a95; --bad-soft:#3d1d1c; --info:#9cc4ef; --info-soft:#18283b;
  --wa-bg:#0b141a; --wa-dot:#13202a; --wa-in:#202c33; --wa-out:#005c4b; --wa-head:#1f2c34; --wa-head-fg:#e9edef; --wa-btn:#53bdeb; --wa-ink:#e9edef; --wa-meta:#8696a0;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1412; --surface:#151e1b; --raised:#1b2622; --fg:#e3ece7; --mute:#94a69d; --line:#26332e;
  --side:#08110e; --side-fg:#cfe5db; --side-mute:#6f9182; --side-on:#123a2e;
  --brand:#34b08a; --brand-ink:#04140e; --brand-soft:#15392d; --brand-soft-ink:#9fe3c8; --gold:#e3aa52; --gold-soft:#3a2c13;
  --warn:#f0b863; --warn-soft:#3a2b14; --bad:#f19a95; --bad-soft:#3d1d1c; --info:#9cc4ef; --info-soft:#18283b;
  --wa-bg:#0b141a; --wa-dot:#13202a; --wa-in:#202c33; --wa-out:#005c4b; --wa-head:#1f2c34; --wa-head-fg:#e9edef; --wa-btn:#53bdeb; --wa-ink:#e9edef; --wa-meta:#8696a0;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--f-body)}
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
aside{background:var(--side);color:var(--side-fg);padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow:auto}
.logo{font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.15;letter-spacing:-.01em;padding:0 8px}
.logo small{display:block;font-family:var(--f-body);font-weight:400;font-size:12px;color:var(--side-mute);letter-spacing:0;margin-top:4px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--side-fg);font-size:14px}
.nav button:hover{background:var(--side-on)}
.nav button[aria-current="page"]{background:var(--side-on);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
.nav button:focus-visible{outline:2px solid var(--brand)}
.nav svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.nav .n{margin-left:auto;font-family:var(--f-mono);font-size:11px;background:var(--gold);color:#1d1305;border-radius:99px;padding:1px 7px}
.side-foot{margin-top:auto;font-size:12px;color:var(--side-mute);padding:0 8px;display:flex;flex-direction:column;gap:8px}
.mode{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;padding:4px 10px;border-radius:99px;width:fit-content}
.mode::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.m-off{background:var(--bad-soft);color:var(--bad)}.m-test{background:var(--gold-soft);color:var(--gold)}.m-live{background:var(--brand-soft);color:var(--brand-soft-ink)}
.content{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:14px;padding-inline:24px;border-bottom:1px solid var(--line);background:var(--surface)}
.topbar h1{font-family:var(--f-display);font-size:24px;font-weight:700;margin:0;letter-spacing:-.015em;text-wrap:balance}
.clock{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--mute)}
.clock b{font-family:var(--f-mono);font-weight:500;color:var(--fg);background:var(--raised);border:1px solid var(--line);padding:3px 8px;border-radius:7px}
main{padding-block:20px 64px;padding-inline:24px;display:flex;flex-direction:column;gap:18px;max-width:1240px;width:100%}
h2{font-family:var(--f-display);font-size:17px;font-weight:700;margin:0;letter-spacing:-.005em}
h3{font-size:14px;margin:0;font-weight:600}
.sub{color:var(--mute);margin:0;font-size:14px;max-width:72ch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0;display:flex;flex-direction:column;gap:12px}
.card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.card-head .sub{margin-left:auto}
.grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.grid-phone{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .v{font-family:var(--f-display);font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--mute);font-size:13px}.kpi .d{font-size:12px;color:var(--mute)}
.kpi.hl{background:var(--side);border-color:var(--side);color:var(--side-fg)}.kpi.hl .l,.kpi.hl .d{color:var(--side-mute)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute);font-weight:500;letter-spacing:.02em;min-width:0}
input,select,textarea{font:inherit;font-size:14px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 10px;max-width:100%;min-width:0}
textarea{width:100%;min-height:70px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.btn{font:inherit;font-size:14px;font-weight:600;background:var(--brand);color:var(--brand-ink);border:1px solid var(--brand);border-radius:9px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn.ghost{background:var(--surface);color:var(--brand)}.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.btn.sm{padding:4px 10px;font-size:13px;font-weight:500}.btn.quiet{background:transparent;border-color:transparent;color:var(--mute)}
.link{all:unset;cursor:pointer;color:var(--brand);font-weight:600}.link:focus-visible{outline:2px solid var(--brand)}
.grow{flex:1 1 200px}
.wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--mute);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
tbody tr:hover{background:var(--raised)}
.mono{font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.s-active,.s-sent,.s-received,.s-MARKETING{background:var(--brand-soft);color:var(--brand-soft-ink)}
.s-paused,.s-blocked{background:var(--warn-soft);color:var(--warn)}
.s-stopped,.s-failed,.s-opted_out{background:var(--bad-soft);color:var(--bad)}
.s-completed,.s-UTILITY{background:var(--info-soft);color:var(--info)}
.note{font-size:13px;color:var(--mute);margin:0}
.toast{position:fixed;right:20px;bottom:20px;z-index:5;max-width:min(420px,calc(100vw - 40px));background:var(--side);color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:22px;text-align:center;color:var(--mute);display:flex;flex-direction:column;gap:10px;align-items:center}
/* charts */
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--mute);font:11px var(--f-body)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--mute)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.funnel{display:flex;flex-direction:column;gap:7px}
.frow{display:grid;grid-template-columns:62px minmax(0,1fr) 34px;gap:10px;align-items:center;font-size:13px}
.frow .bar{height:12px;border-radius:6px;background:var(--raised);overflow:hidden}.frow .bar span{display:block;height:100%;background:var(--brand);border-radius:6px}
.frow .c{font-family:var(--f-mono);text-align:right}
/* journey */
.journey{display:flex;gap:0;overflow-x:auto;padding:6px 2px 4px}
.jstep{flex:1 0 78px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:12px;text-align:center;color:var(--mute)}
.jstep::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.jstep:first-child::before{display:none}
.jstep.done::before,.jstep.next::before{background:var(--brand)}
.dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;font-weight:500;background:var(--surface);border:2px solid var(--line);position:relative;z-index:1;color:var(--mute)}
.done .dot{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.next .dot{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.jstep b{color:var(--fg);font-weight:600}
/* phone */
.phone{border-radius:28px;background:#0f1715;padding:10px;box-shadow:0 18px 40px rgba(10,30,22,.18);position:sticky;top:16px}
.screen{border-radius:20px;overflow:hidden;background:var(--wa-bg);background-image:radial-gradient(var(--wa-dot) 1.2px,transparent 1.3px);background-size:18px 18px;display:flex;flex-direction:column;height:620px}
.wa-head{background:var(--wa-head);color:var(--wa-head-fg);display:flex;align-items:center;gap:10px;padding:10px 12px}
.wa-av{width:34px;height:34px;border-radius:50%;background:#25d366;color:#05301b;display:grid;place-items:center;font-weight:700;font-size:13px}
.wa-head b{font-size:14px;display:flex;align-items:center;gap:4px}.wa-head small{display:block;font-size:11px;opacity:.75}
.wa-body{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:6px}
.day{align-self:center;background:var(--wa-in);color:var(--wa-meta);font-size:11px;padding:3px 10px;border-radius:7px;box-shadow:0 1px .5px rgba(0,0,0,.13);margin:6px 0}
.bub{max-width:86%;background:var(--wa-in);color:var(--wa-ink);border-radius:9px;padding:7px 9px 5px;font-size:13.5px;line-height:1.4;box-shadow:0 1px .5px rgba(0,0,0,.13);overflow-wrap:anywhere;align-self:flex-start}
.bub.me{background:var(--wa-out);align-self:flex-end}
.bub .h{font-weight:700;margin-bottom:4px}
.bub .meta{display:flex;justify-content:flex-end;gap:6px;font-size:10.5px;color:var(--wa-meta);margin-top:3px}
.bub .tag{font-size:10.5px;color:var(--wa-meta);border-top:1px solid rgba(127,127,127,.2);margin-top:6px;padding-top:4px;font-family:var(--f-mono)}
.bub.blocked{opacity:.55;outline:1.5px dashed var(--bad)}
.wbtns{display:flex;flex-direction:column;gap:2px;max-width:86%;align-self:flex-start;width:86%}
.wbtn{all:unset;box-sizing:border-box;width:100%;text-align:center;background:var(--wa-in);color:var(--wa-btn);font-size:13.5px;font-weight:500;padding:8px;border-radius:9px;cursor:pointer;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.wbtn:hover{filter:brightness(.97)}.wbtn:focus-visible{outline:2px solid var(--wa-btn)}.wbtn[disabled]{cursor:default;opacity:.7}
.wa-in{display:flex;gap:8px;padding:8px;background:transparent}
.wa-in input{flex:1;border-radius:20px;border:0;padding:9px 14px;background:var(--wa-in);color:var(--wa-ink)}
.wa-in button{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;background:#00a884;display:grid;place-items:center;color:#fff}
.wa-in button:focus-visible{outline:2px solid var(--wa-btn)}
.wa-in svg{width:18px;height:18px;fill:currentColor}
.sysline{align-self:center;font-size:11px;color:var(--wa-meta);background:var(--wa-in);padding:3px 10px;border-radius:7px;text-align:center;max-width:90%}
/* template library */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.tcard .preview{background:var(--wa-bg);background-image:radial-gradient(var(--wa-dot) 1.2px,transparent 1.3px);background-size:18px 18px;padding:12px;display:flex;flex-direction:column;gap:4px;flex:1}
.tcard .preview .bub,.tcard .preview .wbtns{max-width:100%;width:100%}
.tcard footer{padding:12px 14px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line)}
.tname{font-family:var(--f-mono);font-size:11.5px;color:var(--mute);overflow-wrap:anywhere}
.uses{display:flex;gap:6px;flex-wrap:wrap}.uses span{font-size:11.5px;background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
/* flow timeline */
.tl{display:flex;flex-direction:column}
.tli{display:grid;grid-template-columns:70px minmax(0,1fr);gap:14px;position:relative;padding-bottom:16px}
.tli::before{content:"";position:absolute;left:34px;top:34px;bottom:0;width:2px;background:var(--line)}
.tli:last-child::before{display:none}
.tday{width:70px;height:34px;border-radius:9px;background:var(--side);color:#fff;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;font-weight:500;z-index:1}
.tbox{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.tbox.off{opacity:.55}
.snippet{font-size:13px;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.faq{border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{font-size:12px;background:var(--brand-soft);color:var(--brand-soft-ink);padding:2px 9px;border-radius:99px}
.steps-guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px}
.sg .k{font-family:var(--f-mono);font-size:12px;color:var(--gold);font-weight:500}
.switch{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--raised)}
.switch b{display:block}.switch .note{margin:0}
.switch .btn{margin-left:auto}
@media (max-width:1100px){.grid-phone,.grid2{grid-template-columns:minmax(0,1fr)}.phone{position:static;max-width:400px;margin:0 auto;width:100%}.kpis,.steps-guide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  aside{position:static;height:auto;padding:12px 16px;gap:10px}
  .nav{flex-direction:row;overflow-x:auto;gap:4px}.nav button{white-space:nowrap;padding:7px 10px}.nav button[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--brand)}
  .side-foot{display:none}.topbar,main{padding-inline:16px}
}
@media (max-width:480px){.kpis,.steps-guide{grid-template-columns:minmax(0,1fr)}.screen{height:540px}}
@media (prefers-reduced-motion:no-preference){.btn,.wbtn{transition:filter .15s}.btn:hover{filter:brightness(1.07)}.toast{animation:pop .25s ease-out}@keyframes pop{from{transform:translateY(8px);opacity:.4}}}

body{margin:0}
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--side)}
.login .card{width:min(380px,100%);gap:14px}
.logo.dark{color:var(--fg)}.logo.dark small{color:var(--mute)}
.err{color:var(--bad);margin:0;font-size:14px}
.side-foot a{color:var(--side-fg)}
.bub.failed{outline:1.5px dashed var(--bad)}
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
textarea.csv{min-height:110px;font-family:var(--f-mono);font-size:12.5px}

.inbox{display:grid;grid-template-columns:minmax(0,340px) minmax(0,420px);gap:18px;align-items:start}
.inbox .list{padding:12px;gap:10px}
.clist{display:flex;flex-direction:column;max-height:640px;overflow-y:auto;margin:0 -6px}
.citem{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 8px;border-radius:9px}
.citem:hover{background:var(--raised)}.citem.on{background:var(--brand-soft)}.citem:focus-visible{outline:2px solid var(--brand)}
.citem b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem .cmid .note{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cright{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cright .n{font-family:var(--f-mono);font-size:10px;background:var(--gold);color:#1d1305;border-radius:99px;padding:1px 6px}
.wa-av.sm{width:38px;height:38px}
.tick{color:var(--wa-meta);letter-spacing:-3px;margin-left:2px}.tick.read{color:#53bdeb}
.bad{color:var(--bad);font-weight:600}
.errbox{margin-top:6px;font-size:12px;color:var(--bad);background:var(--bad-soft);border-radius:6px;padding:5px 8px}
.wa-tools{display:flex;flex-direction:column;gap:6px;padding-bottom:8px}
.tplbar{display:flex;gap:6px;padding:0 8px}.tplbar select{flex:1;font-size:13px;padding:6px 8px}
@media (max-width:1100px){.inbox{grid-template-columns:minmax(0,1fr)}}

.wait{color:var(--warn);font-size:10.5px}

.bub .himg{display:block;width:calc(100% + 8px);margin:-4px -4px 6px;border-radius:7px;max-height:180px;object-fit:cover;background:var(--raised)}

.reason{font-size:13px;max-width:360px}