:root{
  --ink:#10231e; --muted:#5d6f69; --soft:#8a9a95; --line:#e1e8e4; --bg:#f3f6f4; --card:#fff;
  --brand:#14a44d; --brand-dark:#0d7a39; --brand-soft:#e6f6ec;
  --blue:#2563eb; --blue-soft:#e8f0ff; --amber:#b45309; --amber-soft:#fff4e0; --red:#c2271d; --red-soft:#fdecea; --gray-soft:#eef2f0;
  --side-a:#05231c; --side-b:#0a3f33; --radius:12px; --shadow:0 1px 2px rgba(16,35,30,.05),0 6px 22px rgba(16,35,30,.06);
}
*{box-sizing:border-box} html,body{margin:0}
body{font:14.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand-dark);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.2px} h1{font-size:22px} h2{font-size:17px} h3{font-size:15px}
.muted{color:var(--muted)} .soft{color:var(--soft)} .small{font-size:12.5px} .right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.mt{margin-top:18px} .mb{margin-bottom:18px} .mt0{margin-top:0} .flex{display:flex} .between{justify-content:space-between} .gap{gap:12px} .wrap{flex-wrap:wrap} .items-center{align-items:center}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* shell */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(175deg,var(--side-a),var(--side-b));color:#cfe8dd;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
.sb-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;color:#fff;font-weight:700;font-size:16px}
.sb-brand .logo.has-img{background:#fff;box-shadow:none;padding:3px;overflow:hidden} .logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:6px}
.sb-brand .logo{width:34px;height:34px;border-radius:10px;background:var(--brand);display:grid;place-items:center;font-weight:800;box-shadow:0 4px 14px rgba(20,164,77,.5)}
.sb-group{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:#7ea899;margin:16px 10px 6px}
.sb-link{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#cfe8dd;margin-bottom:2px;font-weight:500}
.sb-link:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.sb-link.active{background:rgba(20,164,77,.22);color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
.sb-link svg{flex:none;opacity:.9}
.sb-badge{margin-left:auto;background:#f59e0b;color:#2b1a00;border-radius:99px;font-size:11px;padding:0 7px;font-weight:700}
.sb-foot{margin-top:auto;padding:14px 10px 0;font-size:12px;color:#7ea899}
.sb-foot a{color:#b7dccc}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 28px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--ink)}
.topbar .grow{flex:1}
.userbox{position:relative}
.userbox summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:10px}
.userbox summary::-webkit-details-marker{display:none}
.userbox summary:hover{background:var(--gray-soft)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:grid;place-items:center;font-weight:700}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:30}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;background:none;border-radius:8px;color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--gray-soft);text-decoration:none}
.content{padding:26px 32px 40px;max-width:1760px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.page-head p{margin:4px 0 0;color:var(--muted)}
.imp-bar{background:var(--amber-soft);border-bottom:1px solid var(--h-bg-f5d9a6);color:var(--h-fg-7a3d03);padding:8px 28px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.foot{padding:0 28px 24px;color:var(--soft);font-size:12.5px}

/* cards & tiles */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card.flush{padding:0;overflow:hidden}
.card.flush .card-h{padding:16px 20px;margin:0;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:18px} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
.split-12{grid-template-columns:1fr 2fr}.split-21{grid-template-columns:2fr 1fr}.split-side{grid-template-columns:minmax(260px,1fr) 2fr;align-items:start}
.stat{display:flex;gap:14px;align-items:center}
.stat .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-dark);flex:none}
.stat .ic.blue{background:var(--blue-soft);color:var(--blue)} .stat .ic.amber{background:var(--amber-soft);color:var(--amber)} .stat .ic.red{background:var(--red-soft);color:var(--red)}
.stat b{display:block;font-size:22px;line-height:1.15} .stat span{color:var(--muted);font-size:13px}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;text-align:left;padding:11px 16px;background:var(--h-bg-f8faf9);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--h-bg-fafcfb)}
td .sub{display:block;color:var(--muted);font-size:12.5px}
.empty{padding:36px 20px;text-align:center;color:var(--muted)}

/* badges */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--gray-soft);color:var(--muted);white-space:nowrap}
.badge.green{background:var(--brand-soft);color:var(--brand-dark)} .badge.red{background:var(--red-soft);color:var(--red)}
.badge.amber{background:var(--amber-soft);color:var(--amber)} .badge.blue{background:var(--blue-soft);color:var(--blue)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;border:1px solid transparent;background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer;line-height:1.2;transition:.15s}
.btn:hover{background:var(--brand-dark);text-decoration:none;color:#fff}
.btn.secondary{background:var(--card);color:var(--ink);border-color:var(--h-bg-cfd9d4)} .btn.secondary:hover{background:var(--h-bg-f4f8f6);color:var(--ink)}
.btn.danger{background:var(--red)} .btn.danger:hover{background:#9c1f17}
.btn.warn{background:#d97706} .btn.warn:hover{background:#b45309}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:8px} .btn.block{width:100%;justify-content:center}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* forms */
.field{margin-bottom:16px} .field label{display:block;font-weight:600;margin-bottom:5px}
.field .hint{color:var(--muted);font-size:12.5px;margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=search],input[type=tel],select,textarea{width:100%;padding:9px 12px;border:1px solid var(--h-bg-cfd9d4);border-radius:9px;font:inherit;color:var(--ink);background:var(--card)}
input[type=search]{-webkit-appearance:none;appearance:none}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,164,77,.16)}
.err{color:var(--red);font-size:12.5px;margin-top:4px}
.check{display:flex;gap:9px;align-items:flex-start;margin:6px 0} .check input{margin-top:4px;accent-color:var(--brand);width:16px;height:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filters input,.filters select{width:auto;min-width:150px}

/* alerts */
.alert{padding:11px 14px;border-radius:10px;margin-bottom:16px;border:1px solid}
.alert.ok{background:var(--brand-soft);border-color:var(--h-bg-bfe6cd);color:var(--h-fg-0d5a2b)} .alert.bad{background:var(--red-soft);border-color:var(--h-bg-f4c7c3);color:var(--h-fg-8f1d15)}
.alert.warn{background:var(--amber-soft);border-color:var(--h-bg-f5d9a6);color:var(--h-fg-7a3d03)} .alert.info{background:var(--blue-soft);border-color:var(--h-bg-c5d8ff);color:var(--h-fg-1c3f94)}

/* definition lists / kv */
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;word-break:break-word}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow)}
.plan.featured{border-color:var(--brand);box-shadow:0 10px 36px rgba(20,164,77,.16)}
.plan .ribbon{position:absolute;top:-11px;left:24px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:99px}
.plan .price{font-size:34px;font-weight:800;letter-spacing:-1px;margin:10px 0 2px} .plan .price small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:16px 0 22px;flex:1} .plan li{padding:5px 0;display:flex;gap:9px;align-items:flex-start}
.plan li .tick{color:var(--brand);font-weight:800} .plan li.off{color:var(--soft);text-decoration:line-through} .plan li.off .tick{color:var(--soft)}
.progress{height:8px;background:var(--gray-soft);border-radius:99px;overflow:hidden} .progress>i{display:block;height:100%;background:var(--brand);border-radius:99px}

/* auth + landing */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-art{background:linear-gradient(160deg,var(--side-a),var(--auth-b,#0d5a47));color:#e8f5ef;padding:56px;display:flex;flex-direction:column;justify-content:center}
.auth-art h1{font-size:34px;line-height:1.15;color:#fff;margin:18px 0 12px;letter-spacing:-.8px}
.auth-art p{color:var(--h-fg-a9d2c1);max-width:420px}
.auth-art ul{list-style:none;padding:0;margin:26px 0 0} .auth-art li{padding:6px 0;display:flex;gap:10px;color:var(--h-fg-cfe8dd)} .auth-art li:before{content:"✓";color:#4ade80;font-weight:800}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px}
.auth-card{width:100%;max-width:400px}
.auth-card h2{font-size:24px;margin-bottom:6px}
.pub-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 6vw;background:var(--card);border-bottom:1px solid var(--line)}
.pub-nav .links{display:flex;gap:14px;align-items:center}
.hero{padding:70px 6vw 50px;text-align:center;background:linear-gradient(180deg,var(--h-bg-eaf7ef),var(--bg))}
.hero h1{font-size:44px;line-height:1.1;letter-spacing:-1.4px;max-width:760px;margin:0 auto 14px}
.hero p{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 26px}
.section{padding:44px 6vw}
.pagination{display:flex;gap:6px;align-items:center;justify-content:center;padding:16px;flex-wrap:wrap}
.pagination a,.pagination span{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:13px}
.pagination span.cur{background:var(--brand);border-color:var(--brand);color:#fff} .pagination span.dis{color:var(--soft)}
.qr{display:inline-block;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px} .qr svg{display:block;width:180px;height:180px}
.invoice{max-width:760px;margin:0 auto;background:#fff;padding:36px;border:1px solid var(--line);border-radius:12px}

@media (max-width:1000px){.cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:50;transform:translateX(-100%);transition:transform .2s}
  body.nav-open .sidebar{transform:none}
  body.nav-open:after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
  .topbar .burger{display:block} .topbar{padding:10px 16px} .content{padding:18px 16px 32px}
  .cols-2,.cols-3,.cols-4,.form-grid,.split-12,.split-21,.split-side{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr} .auth-art{display:none}
  .hero h1{font-size:32px} .kv{grid-template-columns:1fr}
}
@media print{.sidebar,.topbar,.foot,.no-print{display:none!important} .shell{display:block} body{background:#fff} .invoice{border:0;padding:0}}

/* WhatsApp numbers / developer pages */
.qrbox{width:300px;max-width:100%;aspect-ratio:1;margin:0 auto;border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;overflow:hidden}
.qrbox img{width:100%;height:100%;display:block}
.pair-code{font:700 34px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--ink)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--h-bg-b8c4be);margin-right:6px}
.dot.on{background:var(--brand)} .dot.wait{background:#e0a100} .dot.off{background:var(--red)}
pre.code{background:#0f1f17;color:#d8f5e3;border-radius:10px;padding:14px 16px;overflow:auto;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:8px 0 16px;white-space:pre}
code.inline{background:var(--h-bg-eef3f0);border-radius:6px;padding:1px 6px;font:12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.copyrow{display:flex;gap:8px;align-items:center}.copyrow input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.newkey{border:2px dashed var(--brand);background:var(--brand-soft);border-radius:12px;padding:16px;margin-bottom:18px}
.bubble{max-width:560px;word-break:break-word;white-space:pre-wrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;flex:1;min-width:200px}
.opt input{margin-top:4px;accent-color:var(--brand)} .opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}

/* Inbox */
.inbox{display:grid;grid-template-columns:330px 1fr;height:calc(100vh - 190px);min-height:480px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.in-left{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.in-tools{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.in-chips{display:flex;gap:6px} .chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:3px 12px;font-size:12.5px;cursor:pointer;color:var(--muted)} .chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark);font-weight:600}
.in-list{overflow:auto;flex:1}
.in-empty{padding:26px 16px;text-align:center}
.in-row{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:var(--card);padding:11px 14px;cursor:pointer;font:inherit;color:inherit}
.in-row:hover{background:var(--h-bg-f7faf8)} .in-row.on{background:var(--brand-soft)}
.in-row-top,.in-row-bot{display:flex;justify-content:space-between;gap:8px;align-items:center}
.in-row-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-prev{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-row.unread .in-prev{color:var(--ink);font-weight:600}
.in-badge{background:var(--brand);color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:0 7px;min-width:20px;text-align:center;flex:none}
.in-right{display:flex;flex-direction:column;min-height:0;background:var(--h-bg-efeae2)}
.in-placeholder{margin:auto}
.in-chat{display:flex;flex-direction:column;flex:1;min-height:0}
.in-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line)} .in-head .grow{flex:1;min-width:0}
.in-back{display:none}
.in-msgs{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.msg{display:flex} .msg.out{justify-content:flex-end}
.msg-b{max-width:min(520px,82%);padding:7px 10px 4px;border-radius:10px;background:var(--card);box-shadow:0 1px 1px rgba(0,0,0,.08);word-break:break-word}
.msg.out .msg-b{background:var(--h-bg-d9fdd3)}
.msg-t{white-space:pre-wrap} .msg-m{color:var(--soft);text-align:right;margin-top:2px;white-space:pre} .msg-s{color:var(--brand-dark);font-weight:600}
.msg-img{max-width:100%;max-height:260px;border-radius:6px;display:block;margin-bottom:4px}
.in-err{background:var(--red-soft);color:var(--red);padding:8px 14px;font-size:13px}
.in-compose{display:flex;gap:8px;padding:10px 12px;background:var(--h-bg-f6f6f6);border-top:1px solid var(--line);align-items:flex-end}
.in-compose textarea{flex:1;resize:none;max-height:140px;min-height:40px}
.in-fname{padding:4px 14px;background:var(--h-bg-f6f6f6);cursor:pointer}
.in-dlg{border:0;border-radius:14px;padding:22px;width:min(400px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.3)} .in-dlg::backdrop{background:rgba(0,0,0,.45)}
.edit-row{display:inline-block;position:relative} .edit-row summary{list-style:none;cursor:pointer;display:inline-block} .edit-row summary::-webkit-details-marker{display:none}
.edit-row[open]>.edit-back{position:fixed;inset:0;background:rgba(8,24,17,.5);z-index:190}
.edit-pop{display:none}
.edit-row[open]>.edit-pop{display:block;position:fixed;z-index:200;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.35);padding:20px 20px 16px;text-align:left;white-space:normal}
.edit-pop .edit-head{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 12px}
.edit-pop .edit-head b{font-size:16px}
.edit-pop .edit-x{border:0;background:var(--gray-soft);width:30px;height:30px;border-radius:8px;font-size:18px;line-height:1;cursor:pointer}
@media (max-width:860px){
  .inbox{grid-template-columns:1fr;height:calc(100vh - 150px)}
  .in-right{display:none} .inbox.chat-open .in-right{display:flex} .inbox.chat-open .in-left{display:none}
  .in-back{display:inline-block}
}

/* Single send */
.s-suggest{position:absolute;left:0;right:0;top:100%;z-index:15;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);overflow:hidden}
.s-suggest button{display:block;width:100%;text-align:left;border:0;background:var(--card);padding:9px 12px;font:inherit;cursor:pointer;border-bottom:1px solid var(--line)} .s-suggest button:hover{background:var(--brand-soft)}
.s-btn{display:grid;grid-template-columns:130px 1fr 1fr;gap:8px;margin-bottom:8px}
@media (max-width:860px){.s-btn{grid-template-columns:1fr}}
.qr-pop{position:absolute;left:12px;right:12px;bottom:64px;max-height:240px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:30}
.qr-pop button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:var(--card);padding:8px 12px;font:inherit;cursor:pointer} .qr-pop button:hover,.qr-pop button.on{background:var(--brand-soft)} .qr-pop small{color:var(--muted)}
.in-chat{position:relative}

/* chatbot flow builder */
.fb-step{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;background:var(--h-bg-fcfdfc)}
.fb-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.fb-head .grow{flex:1}
.fb-body .field{margin-bottom:10px}
.fb-opt{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px;align-items:end;border:1px dashed var(--line);border-radius:10px;padding:10px;margin:8px 0;background:var(--card)}
.fb-opt .field{margin-bottom:0}
.fb-sec{border-left:3px solid var(--brand-soft);padding-left:10px;margin:10px 0}

/* visual flow builder (canvas) */
.fbx-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px 16px} .fbx-set .field{margin-bottom:8px} .fbx-set .fbx-name{grid-column:span 2} .fbx-set[hidden]{display:none} .fbx-toprow{margin-top:2px} .fbx-more{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:640px){.fbx-set .fbx-name{grid-column:auto}}
.fbx{margin-bottom:24px}
.fbx-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;padding:8px 10px;position:relative;z-index:5}
.fbx-bar .grow,.fbx-ph .grow{flex:1}
.fbx-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.fbx-zl{min-width:44px;text-align:center;font-size:12.5px;color:var(--muted)}
.fbx-msg{font-size:12.5px;color:var(--brand-dark);margin-left:6px}
.fbx-addwrap{position:relative}
.fbx-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:300px;max-width:calc(100vw - 32px);max-height:min(420px,70vh);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.22);padding:6px}
.fbx-menu[hidden]{display:none}
.fbx-qmenu{width:290px}
.fbx-mi{display:block;width:100%;text-align:left;border:0;background:var(--card);border-radius:8px;padding:8px 10px;font:inherit;cursor:pointer}
.fbx-mi:hover,.fbx-mi:focus{background:var(--brand-soft);outline:0}
.fbx-mi b{display:block;font-size:13.5px} .fbx-mi span{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.fbx-main{--fbx-h:clamp(520px,calc(100vh - 290px),880px);display:grid;grid-template-columns:200px minmax(0,1fr) 340px;border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);background:var(--card);overflow:hidden}
.fbx-canvas{position:relative;height:var(--fbx-h);overflow:hidden;touch-action:none;cursor:grab;background-color:var(--h-bg-f6f9f7);background-image:radial-gradient(circle,var(--h-bg-c9d6d0) 1.2px,transparent 1.3px);background-size:24px 24px;user-select:none;-webkit-user-select:none;outline:0}
.fbx-canvas.panning{cursor:grabbing}
.fbx-world{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0}
.fbx-edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#fbx-nodes{position:absolute;left:0;top:0}
.fbx-hint{position:absolute;left:10px;bottom:8px;font-size:11.5px;color:var(--soft);background:rgba(255,255,255,.85);padding:3px 8px;border-radius:99px;pointer-events:none;max-width:calc(100% - 20px)}
.fbx-panel{height:var(--fbx-h);overflow:auto;padding:16px;border-left:1px solid var(--line);background:var(--card)}
.fbx-panel h3{margin-bottom:8px}
.fbx-tips{margin:0;padding-left:18px;color:var(--muted);font-size:13px} .fbx-tips li{margin-bottom:8px}
.fbx-ph{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.fbx-acts{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}
.fbx-panel .fb-body .field{margin-bottom:10px}
.fbx-panel textarea{min-height:60px}

.fbx-node{position:absolute;background:var(--card);border:1.5px solid var(--h-bg-d3ddd8);border-radius:12px;box-shadow:0 2px 10px rgba(16,35,30,.09);cursor:grab;touch-action:none;transition:box-shadow .12s,border-color .12s}
.fbx-node.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft),0 8px 26px rgba(16,35,30,.16);z-index:3}
.fbx-node.drag{cursor:grabbing;box-shadow:0 12px 34px rgba(16,35,30,.25);z-index:4}
.fbx-node.hl{outline:3px dashed var(--brand);outline-offset:3px}
.fbx-node.orphan{border-style:dashed}
.fbx-nh{position:relative;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px 10px 0 0;font-size:13px;background:var(--h-bg-e9f6ef)}
.fbx-nh b{flex:1;min-width:0;line-height:1.2;overflow-wrap:anywhere}
.fbx-num{flex:none;background:var(--card);color:var(--ink);border-radius:99px;font-size:11px;font-weight:700;padding:1px 8px;min-width:22px;text-align:center}
.fbx-num.start{background:var(--brand);color:#fff;letter-spacing:.4px}
.fbx-tag{display:none;font-size:10.5px;color:var(--h-fg-8a5a00);background:var(--amber-soft);border-radius:99px;padding:0 7px;white-space:nowrap}
.fbx-node.orphan .fbx-tag{display:inline}
.fbx-c-ask .fbx-nh{background:var(--blue-soft)} .fbx-c-logic .fbx-nh{background:var(--amber-soft)} .fbx-c-tech .fbx-nh{background:var(--h-bg-f0eaff)} .fbx-c-end .fbx-nh{background:var(--h-bg-eef0ef)}
.fbx-nb{padding:9px 12px 8px;font-size:12.5px}
.fbx-prev{color:var(--h-fg-3c4c46);white-space:pre-wrap;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;margin-bottom:4px;min-height:18px}
.fbx-prev.empty{color:var(--soft);font-style:italic}
.fbx-row{position:relative;display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed var(--line)}
.fbx-row.dim .fbx-rt{color:var(--muted);font-weight:500}
.fbx-rt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:12px}
.fbx-port{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--card);border:2.5px solid var(--brand);cursor:crosshair;touch-action:none}
.fbx-port::after{content:"";position:absolute;inset:-9px}
.fbx-port.in{left:-8px;top:50%;margin-top:-7px;border-color:var(--h-bg-7b8d86)}
.fbx-port.out{right:-19px;top:50%;margin-top:-7px}
.fbx-port.out:hover,.fbx-port.out.active{background:var(--brand);transform:scale(1.25)}
.fbx-port.out.on{background:var(--brand)}
.fbx-edge{fill:none;stroke:var(--h-fg-6fae8a);stroke-width:2.4;stroke-linecap:round}
.fbx-edge.tmp{stroke:var(--brand);stroke-dasharray:6 5}
.fbx-arrow{fill:var(--h-fg-6fae8a)}
.fbx-ehit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke}
.fbx-eg:hover .fbx-edge{stroke:var(--brand);stroke-width:3.2}
.fbx-edel{opacity:0;cursor:pointer;pointer-events:all;transition:opacity .1s}
.fbx-eg:hover .fbx-edel,.fbx-edel:hover{opacity:1}
.fbx-edel circle{fill:#fff;stroke:var(--red);stroke-width:1.6}
.fbx-edel text{fill:var(--red);font:700 15px/1 sans-serif}
@media (hover:none){.fbx-edel{opacity:.9}.fbx-port::after{inset:-12px}}

.fbx.fbx-full{position:fixed;inset:0;z-index:300;background:var(--bg);padding:10px;margin:0;display:flex;flex-direction:column}
.fbx.fbx-full .fbx-main{--fbx-h:calc(100vh - 78px);flex:1}
body.fbx-lock{overflow:hidden}

@media (max-width:1000px){
  .fbx-main{grid-template-columns:1fr;--fbx-h:clamp(420px,62vh,640px)}
  .fbx-pal{height:auto;border-right:0;border-bottom:1px solid var(--line)} .fbx-pal-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .fbx-panel{height:auto;max-height:none;border-left:0;border-top:1px solid var(--line)}
  .fbx.fbx-full .fbx-main{grid-template-rows:auto minmax(0,1fr) auto;--fbx-h:100%} .fbx.fbx-full .fbx-pal{max-height:132px;overflow:auto}
  .fbx.fbx-full .fbx-canvas{height:100%} .fbx.fbx-full .fbx-panel{max-height:46vh;overflow:auto}
  .fbx-hint{display:none}
}
.grid>*{min-width:0}

/* ── v1.9 composer, templates, broadcast sender picker ── */
.cmp [hidden],.cmp-media[hidden]{display:none!important}
.cmp .s-btn{grid-template-columns:130px 1fr 1fr 38px;align-items:center}
@media (max-width:860px){.cmp .s-btn{grid-template-columns:1fr 38px}.cmp .s-btn .b-type,.cmp .s-btn .b-value{grid-column:1 / -1}}
.cmp-kept{margin-top:6px;padding:6px 10px;background:var(--brand-soft);border-radius:8px;color:var(--brand-dark)}
.cmp-rm{padding:0;width:34px;height:34px;font-size:18px;line-height:1}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tpl-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card);display:flex;flex-direction:column;gap:6px;min-width:0}
.tpl-card h3{margin:0;font-size:15px;overflow-wrap:anywhere}.tpl-card p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:84px;overflow:hidden}
.tpl-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand-dark)}
.num-list{display:grid;gap:8px}
.num-opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);cursor:pointer;min-width:0}
.num-opt input{flex:none}.num-opt.on{border-color:var(--brand);background:var(--brand-soft)}
.num-opt .num-name{flex:1;min-width:0;overflow-wrap:anywhere}
.badge-on,.badge-off{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.badge-on{background:var(--h-bg-dcfce7);color:var(--h-fg-166534)}.badge-off{background:var(--h-bg-fee2e2);color:var(--h-fg-991b1b)}
.later-box{border:1px dashed var(--line);border-radius:12px;padding:12px;background:var(--h-bg-fafafa)}
.later-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tpl-pick{position:absolute;bottom:56px;left:0;right:0;z-index:20;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.16);max-height:300px;overflow:auto}
.tpl-pick button{display:block;width:100%;text-align:left;border:0;background:var(--card);padding:9px 12px;font:inherit;cursor:pointer;border-bottom:1px solid var(--line)}.tpl-pick button:hover{background:var(--brand-soft)}
.later-box input[type=datetime-local]{width:100%;max-width:100%}

/* file picker: one clear button + the chosen file name (enhanced by app.js) */
input[type=file]{font:inherit;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:8px;background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.filebox{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border:1.5px dashed var(--h-bg-b9c9c1);border-radius:11px;background:var(--h-bg-fafcfb);cursor:pointer;position:relative;transition:border-color .15s,background .15s;margin:0;font-weight:400}
.filebox:hover,.filebox.is-drag{border-color:var(--brand);background:var(--brand-soft)}
.filebox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,164,77,.16)}
.filebox input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.filebox .fb-btn{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;background:var(--brand);color:#fff;font-weight:600;font-size:13.5px;line-height:1}
.filebox:hover .fb-btn{background:var(--brand-dark)}
.filebox .fb-btn svg{width:16px;height:16px}
.filebox .fb-name{min-width:0;flex:1;color:var(--muted);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filebox.has-file{border-style:solid;border-color:var(--brand);background:var(--brand-soft)}
.filebox.has-file .fb-name{color:var(--ink);font-weight:600}
.filebox .fb-x{position:relative;z-index:2;flex:none;border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px;display:none}
.filebox.has-file .fb-x{display:inline-block}
.filebox .fb-x:hover{background:var(--card);color:var(--red)}
.form-grid>.field{min-width:0}
.filebox{box-sizing:border-box;min-width:0;max-width:100%}
.filebox{flex-wrap:wrap;row-gap:6px}
.filebox .fb-name{flex:1 1 120px}

/* page tabs (Website / Branding settings) */
.ptab-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.ptab-main{min-width:0}
.ptab-side{position:sticky;top:16px}
@media (max-width:1180px){.ptab-grid{grid-template-columns:1fr}.ptab-side{position:static}}
.ptabs{display:flex;flex-wrap:wrap;gap:0 2px;margin:0 0 18px;box-shadow:inset 0 -1px 0 var(--line)}
.ptabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;display:inline-flex;gap:7px;align-items:center;border-radius:8px 8px 0 0}
.ptabs button:hover{color:var(--ink);background:var(--gray-soft)}
.ptabs button[aria-selected=true]{color:var(--brand-dark);border-bottom-color:var(--brand);background:none}
.ptabs button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ptabs button.has-err::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.ptabs .tcount{font-size:11px;font-weight:700;background:var(--brand-soft);color:var(--brand-dark);border-radius:99px;padding:1px 7px}
.ppanel[hidden],.savebar[hidden]{display:none!important}
.ppanel+.ppanel{margin-top:0}
.savebar{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sl-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.sl-two>div{min-width:0}
@media (max-width:760px){.sl-two{grid-template-columns:1fr}.ptabs button{padding:9px 11px}}

/* inbox: profile pictures, labels, ticks */
.av{flex:none;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font-weight:700;font-size:15px;letter-spacing:.3px;background:var(--soft);user-select:none}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.in-head .av{width:38px;height:38px;font-size:14px}
.in-main{flex:1;min-width:0}
.in-main .in-row-top{margin-bottom:1px} .in-row-top .nowrap{flex:none}
.in-tick{color:var(--soft);font-size:12px;letter-spacing:-1px} .in-tick.read{color:var(--h-fg-53bdeb)} .in-tick.failed{color:var(--red)}
.in-row-bot .in-prev{flex:1;min-width:0}
.lb-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .lb-row:empty{display:none}
.lb-chip{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:99px;padding:0 8px;font-size:11px;line-height:18px;font-weight:600}
.lb-more{font-size:11px;color:var(--muted);line-height:18px}
.lb-wrap{position:relative;flex:none}
.lb-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;max-width:280px;max-height:320px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px rgba(16,35,30,.18);padding:6px}
.lb-opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;margin:0;font-weight:500} .lb-opt:hover{background:var(--gray-soft)} .lb-opt input{accent-color:var(--brand)}
.lb-dot{width:12px;height:12px;border-radius:50%;flex:none}
.lb-manage{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;margin-top:4px;padding:9px 9px 6px;font:inherit;font-size:13px;color:var(--brand-dark);cursor:pointer;font-weight:600}
.lb-dlg{width:min(480px,94vw);max-height:88vh;overflow:auto}
.lb-new{padding:12px;border:1px dashed var(--line);border-radius:10px;margin-bottom:12px}
.lb-item{padding:10px 0;border-bottom:1px solid var(--line)}
.lb-line{display:flex;gap:8px;align-items:center;margin-top:8px} .lb-line input{flex:1;min-width:0}
.lb-sw{display:flex;gap:6px;flex-wrap:wrap}
.lb-sw button{width:22px;height:22px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.lb-sw button.on{box-shadow:0 0 0 2px var(--ink)}
.lb-sw button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:760px){.in-head .btn.sm{padding:6px 8px}.lb-pop{right:auto;left:-120px}}

/* colours + live preview */
.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 0 18px}
.pal{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);text-align:left}
.pal:hover{border-color:var(--brand);background:var(--brand-soft)}
.pal-sw{display:inline-flex;flex:none} .pal-sw i{width:16px;height:26px;display:block} .pal-sw i:first-child{border-radius:6px 0 0 6px} .pal-sw i:last-child{border-radius:0 6px 6px 0}
.clr{display:flex;gap:8px;align-items:center} .clr input[type=color]{width:46px;height:40px;padding:2px;flex:none;cursor:pointer} .clr input[type=text]{flex:1;min-width:0}
.bp{--bp-main:#14a44d;--bp-main-dark:#0f7f3b;--bp-soft:#e1f4e8;--bp-deep:#06281d;--bp-acc:#53bdeb;--bp-mint:#7fcdf0;--bp-side-a:#02150f;--bp-side-b:#064430;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.bp-title{font-weight:700;margin:0 2px 10px}
.bp-site{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f5f8f6;font-size:11px}
.bp-nav{display:flex;align-items:center;gap:8px;background:#fff;padding:8px 10px;border-bottom:1px solid var(--line)}
.bp-nav b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.bp-logo{width:20px;height:20px;border-radius:6px;background:var(--bp-main);color:#fff;display:grid;place-items:center;font-weight:800;font-size:11px;flex:none}
.bp-logoimg{width:20px;height:20px;object-fit:contain;border-radius:4px;flex:none}
.bp-links{display:flex;gap:6px;margin-left:auto} .bp-links i{width:22px;height:5px;border-radius:3px;background:#cfdad4;display:block}
.bp-btn{display:inline-block;background:var(--bp-main-dark);color:#fff;border-radius:7px;padding:6px 12px;font-weight:700;font-size:11px;white-space:nowrap} .bp-btn.sm{padding:4px 9px;font-size:10px}
.bp-ghost{display:inline-block;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:7px;padding:5px 11px;font-weight:600;font-size:11px}
.bp-hero{background:var(--bp-deep);color:#fff;padding:18px 14px 16px;position:relative}
.bp-h{font-size:16px;line-height:1.15;font-weight:800;letter-spacing:-.02em;max-width:230px;margin-bottom:12px}
.bp-actions{display:flex;gap:8px;margin-bottom:14px}
.bp-hero .bp-btn{background:var(--bp-main)}
.bp-chat{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.bp-bubble{background:rgba(255,255,255,.12);border-radius:8px 8px 8px 2px;padding:5px 9px}
.bp-bubble.out{align-self:flex-end;background:var(--bp-main);border-radius:8px 8px 2px 8px}
.bp-tick{font-style:normal;color:var(--bp-acc);letter-spacing:-2px;margin-left:3px}
.bp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px}
.bp-cards div{background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px}
.bp-cards b{display:block;width:16px;height:16px;border-radius:5px;background:var(--bp-soft);box-shadow:inset 0 0 0 5px var(--bp-soft),inset 0 0 0 16px var(--bp-main);opacity:.9;margin-bottom:6px}
.bp-cards i{display:block;height:4px;border-radius:2px;background:#d7e1db;margin-top:4px} .bp-cards i+i{width:70%}
.bp-foot{background:var(--bp-deep);padding:9px 12px;display:flex;gap:8px;align-items:center} .bp-foot span{width:34px;height:6px;border-radius:3px;background:var(--bp-mint)} .bp-foot i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.bp-panel{display:flex;margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;height:92px}
.bp-side{width:54px;background:linear-gradient(175deg,var(--bp-side-a),var(--bp-side-b));padding:10px 8px;display:flex;flex-direction:column;gap:7px;flex:none}
.bp-side i{display:block;height:7px;border-radius:3px;background:rgba(255,255,255,.28)} .bp-side i.on{background:var(--bp-main)}
.bp-body{flex:1;padding:10px;background:#f3f6f4}
.bp-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.bp-badge{background:var(--bp-soft);color:var(--bp-main-dark);border-radius:99px;padding:2px 8px;font-weight:700;font-size:10px}
.bp-line{height:6px;border-radius:3px;background:#d7e1db;margin-bottom:6px} .bp-line.s{width:60%}

/* date picker */
.dp{position:relative;display:inline-block;vertical-align:middle;max-width:100%}
.field .dp,.later-box .dp{display:block}
.filters .dp{min-width:164px}
.filters .dp-field{padding-right:30px;gap:7px}
.dp-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;top:0;border:0;padding:0}
.dp-field{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:8px 34px 8px 12px;border:1px solid var(--h-bg-cfd9d4);border-radius:9px;background:var(--card);font:inherit;color:var(--soft);cursor:pointer;text-align:left}
.dp-field svg{flex:none;color:var(--muted)}
.dp.has-value .dp-field{color:var(--ink)}
.dp-field:hover{border-color:var(--h-bg-9db3a9)}
.dp-field:focus-visible,.dp.is-open .dp-field{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,164,77,.16)}
.dp.is-disabled .dp-field{background:var(--gray-soft);color:var(--soft);cursor:not-allowed}
.dp-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0}
.dp-clear:hover{background:var(--gray-soft);color:var(--ink)}
.dp-pop{position:absolute;z-index:120;top:calc(100% + 6px);left:0;width:300px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(16,35,30,.22);padding:12px}
.dp-pop[hidden],.dp-back[hidden]{display:none!important}
.dp.dp-right .dp-pop{left:auto;right:0} .dp.dp-up .dp-pop{top:auto;bottom:calc(100% + 6px)}
.dp-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.dp-nav{flex:none;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.dp-nav:hover{background:var(--gray-soft)}
.dp-sel{appearance:auto;width:auto!important;min-width:0;padding:5px 6px!important;border:1px solid transparent!important;border-radius:8px!important;background:transparent!important;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.dp-sel:hover{background:var(--gray-soft)!important}
.dp-head .dp-sel:first-of-type{flex:1 1 auto;min-width:112px}
.dp-head .dp-sel:nth-of-type(2){flex:none}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{text-align:center;font-size:11.5px;font-weight:700;color:var(--soft);padding:4px 0}
.dp-day{aspect-ratio:1;border:0;border-radius:50%;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;padding:0;display:grid;place-items:center}
.dp-day:hover:not(:disabled){background:var(--brand-soft)}
.dp-day.out{color:var(--h-fg-b3c0ba)}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--brand);font-weight:700}
.dp-day.sel{background:var(--brand);color:#fff;font-weight:700;box-shadow:none}
.dp-day.sel:hover{background:var(--brand-dark)}
.dp-day:disabled{color:var(--h-fg-cdd6d2);cursor:not-allowed;text-decoration:line-through}
.dp-day:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.dp-timerow{display:flex;align-items:center;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dp-tlabel{font-size:12.5px;font-weight:600;color:var(--muted);margin-right:auto}
.dp-timerow .dp-sel{border-color:var(--line)!important;background:var(--card)!important}
.dp-colon{font-weight:700}
.dp-foot{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dp-time .dp-timerow+.dp-foot{border-top:0;margin-top:6px;padding-top:0}
.dp-link{border:0;background:none;color:var(--brand-dark);font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;padding:2px 0}
.dp-link:hover{text-decoration:underline}
.dp-done{margin-left:auto;border:0;border-radius:8px;background:var(--brand);color:#fff;font:inherit;font-weight:600;padding:7px 18px;cursor:pointer}
.dp-done:hover{background:var(--brand-dark)}
.dp-back{display:none}
@media (max-width:560px){
  .dp-back{display:block;position:fixed;inset:0;z-index:119;background:rgba(8,24,17,.45)}
  .dp-pop{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-width:420px;margin:0 auto;z-index:121;padding:14px}
  .dp.dp-right .dp-pop,.dp.dp-up .dp-pop{left:12px;right:12px;bottom:12px;top:auto}
  .dp-day{font-size:15px}
}

/* Uploaded logo: its own shape and size, no brand name next to it */
.logo.logo-wide{width:auto;height:auto;max-width:100%;padding:5px 10px;border-radius:10px;background:#fff;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.sb-brand .logo.logo-wide{width:auto;height:auto;padding:5px 10px;border-radius:10px;background:#fff;box-shadow:none;max-width:100%}
.logo.logo-wide img{width:auto;height:34px;max-width:100%;object-fit:contain;display:block;border-radius:0}
.sb-brand .logo-name{min-width:0}
.bp-logoimg{width:auto;height:24px;max-width:120px;border-radius:0}

/* Copy button next to an ID */
.idcopy{display:inline-flex;align-items:center;gap:6px}
.idcopy code{font-size:12px;color:var(--muted);background:transparent;padding:0}
.copy-btn{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--muted);cursor:pointer;padding:0;flex:none;transition:color .15s,border-color .15s,background .15s}
.copy-btn:hover{color:var(--brand-dark);border-color:var(--brand)}
.copy-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.copy-btn .ic-ok{display:none}
.copy-btn.copied{color:#fff;background:var(--brand);border-color:var(--brand)}
.copy-btn.copied .ic-copy{display:none}.copy-btn.copied .ic-ok{display:block}

/* ── Inbox, laid out like WhatsApp Web ─────────────────────────────── */
body.inbox-page{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.inbox-page .shell{flex:1;min-height:0;height:auto;grid-template-rows:minmax(0,1fr)}
body.inbox-page .sidebar{height:100%}
body.inbox-page .main{height:100%;min-height:0;overflow:hidden}
body.inbox-page .content{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 20px 16px;max-width:none}
body.inbox-page .foot{display:none}
body.inbox-page .content>.alert{flex:none}
.inbox{flex:1;height:auto;min-height:0;grid-template-columns:minmax(320px,32%) minmax(0,1fr);border-radius:12px;--wa-line:var(--h-bg-e9edef);--wa-bg:var(--h-bg-f0f2f5);--wa-ink:var(--h-fg-111b21);--wa-sub:var(--h-fg-667781);--wa-ic:var(--h-fg-54656f)}
.inbox .in-left,.inbox .in-right{min-width:0;min-height:0}
.inbox .in-left{background:var(--card);border-right:1px solid var(--wa-line)}
.in-lhead{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 4px 16px}
.in-lhead h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--wa-ink)}
.in-unread{display:inline-block;background:var(--brand);color:#fff;border-radius:99px;font-size:12px;padding:1px 8px;margin-left:6px;font-weight:700;vertical-align:middle;letter-spacing:0}
.in-acts{display:flex;gap:2px}
.in-ic{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--wa-ic,var(--h-fg-54656f));display:inline-grid;place-items:center;cursor:pointer;padding:0;margin:0;flex:none;transition:background .15s}
.in-ic:hover{background:var(--h-bg-f0f2f5)} .in-ic:focus-visible,.in-act:focus-visible,.in-send:focus-visible,.in-down:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.in-search{display:flex;align-items:center;gap:10px;margin:6px 12px 6px;padding:0 12px;background:var(--wa-bg);border-radius:10px;color:var(--wa-ic)}
.in-search:focus-within{box-shadow:0 0 0 2px var(--brand-soft),0 0 0 3px var(--brand)}
.in-search input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;padding:9px 0;font-size:14px;height:auto}
.inbox .in-chips{display:flex;gap:6px;padding:4px 12px 8px;flex-wrap:wrap}
.inbox .chip{border:0;background:var(--wa-bg);color:var(--wa-sub);border-radius:99px;padding:5px 13px;font-size:13px;font-weight:500;cursor:pointer}
.inbox .chip:hover{background:var(--h-bg-e4e7e9)} .inbox .chip.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.in-sel{display:flex;gap:8px;padding:0 12px 10px}
.in-sel select{flex:1;min-width:0;font-size:13px;padding:6px 8px;border:0;border-radius:8px;background-color:var(--wa-bg);color:var(--wa-ink);height:auto}
.inbox .in-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--h-bg-c5ccd0) transparent;border-top:1px solid var(--wa-line)}
.inbox .in-row{position:relative;align-items:center;gap:13px;padding:10px 15px;border:0;background:var(--card);min-height:72px}
.inbox .in-row::after{content:"";position:absolute;left:77px;right:0;bottom:0;border-bottom:1px solid var(--h-bg-f0f2f5)}
.inbox .in-row:hover{background:var(--h-bg-f5f6f6)} .inbox .in-row.on{background:var(--wa-bg)}
.inbox .in-row .av{width:49px;height:49px;font-size:17px}
.inbox .in-row-top b{font-weight:500;font-size:16px;color:var(--wa-ink)}
.in-time{font-size:12px;color:var(--wa-sub)} .in-row.unread .in-time{color:var(--brand-dark);font-weight:600}
.inbox .in-prev{font-size:14px;color:var(--wa-sub)} .inbox .in-row.unread .in-prev{color:var(--wa-ink);font-weight:500}
.inbox .in-badge{min-width:20px;height:20px;line-height:20px;padding:0 6px;font-size:12px}
.inbox .in-empty{padding:30px 20px}
/* right side */
.inbox .in-right{position:relative;background:var(--h-bg-efeae2)}
.in-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--wa-bg);color:var(--wa-sub);padding:24px;border-bottom:6px solid var(--brand)}
.in-placeholder h2{margin:14px 0 6px;font-size:26px;font-weight:300;color:var(--h-fg-41525d)}
.in-placeholder p{margin:0;font-size:14px;line-height:1.6}
.in-ph-ic{width:84px;height:84px;border-radius:50%;background:var(--card);color:var(--brand);display:grid;place-items:center;box-shadow:0 1px 3px rgba(11,20,26,.1)}
.inbox .in-chat{flex:1;min-height:0}
.inbox .in-head{background:var(--wa-bg);border-bottom:1px solid var(--wa-line);padding:9px 14px;gap:12px;min-height:60px}
.inbox .in-head .av{width:40px;height:40px}
.inbox .in-head b{font-weight:500;font-size:16px;color:var(--wa-ink)}
.inbox .in-head .small{font-size:13px}
.inbox .in-back{display:none}
.in-act{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;font-weight:500;color:var(--wa-ic);cursor:pointer;white-space:nowrap;margin:0}
.in-act:hover{background:var(--h-bg-e4e7e9)} .in-act.human{background:var(--h-bg-fff3cd);color:var(--h-fg-7a5b00)}
.in-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background-color:var(--h-bg-efeae2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M70 18h14M77 11v14'/%3E%3Cpath d='M30 80l10 10M40 80L30 90'/%3E%3Crect x='80' y='70' width='16' height='12' rx='3'/%3E%3Cpath d='M58 100q6-8 12 0'/%3E%3C/g%3E%3C/svg%3E")}
.inbox .in-msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(11,20,26,.25) transparent;padding:12px 7% 10px;gap:0}
.in-day{align-self:center;margin:12px 0 8px}
.in-day span{display:inline-block;background:var(--card);color:var(--wa-ic);font-size:12.5px;padding:5px 12px;border-radius:8px;box-shadow:0 1px 1px rgba(11,20,26,.13)}
.inbox .msg{margin-top:2px} .inbox .msg.first{margin-top:9px}
.inbox .msg-b{position:relative;max-width:min(65%,600px);padding:6px 8px 5px 9px;border-radius:8px;font-size:14.2px;line-height:1.38;background:var(--card);box-shadow:0 1px .5px rgba(11,20,26,.13);color:var(--wa-ink)}
.inbox .msg.out .msg-b{background:var(--h-bg-d9fdd3)}
.inbox .msg.first.in .msg-b{border-top-left-radius:0}.inbox .msg.first.out .msg-b{border-top-right-radius:0}
.inbox .msg.first.in .msg-b::before,.inbox .msg.first.out .msg-b::before{content:"";position:absolute;top:0;width:0;height:0;border-bottom:9px solid transparent}
.inbox .msg.first.in .msg-b::before{left:-8px;border-right:9px solid var(--card)}
.inbox .msg.first.out .msg-b::before{right:-8px;border-left:9px solid var(--h-bg-d9fdd3)}
.inbox .msg-b::after{content:"";display:table;clear:both}
.inbox .msg-t{display:inline;white-space:pre-wrap;word-break:break-word}
.inbox .msg-s{display:block;font-size:12.5px}
.msg-rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.msg-rxi{background:var(--card);border:1px solid var(--h-bg-e1e5e8);border-radius:12px;padding:0 7px;font-size:13px;line-height:20px;box-shadow:0 1px 1px rgba(0,0,0,.06);cursor:default}
.inbox .msg-img{max-width:100%;width:auto;max-height:300px;border-radius:6px;display:block;margin:0 0 3px}
.inbox .msg-file{display:inline-block;margin-bottom:2px}
.inbox .msg-m{float:right;display:flex;align-items:center;gap:3px;margin:7px 0 -2px 12px;height:15px;font-size:11px;color:var(--wa-sub);text-align:right;white-space:nowrap}
.msg-m .in-tick{font-size:12px;letter-spacing:-2px;color:var(--h-fg-8696a0);margin-left:1px} .msg-m .in-tick.read{color:var(--h-fg-53bdeb)} .msg-m .in-tick.failed{color:var(--red)}
.in-down{position:absolute;right:18px;bottom:14px;width:42px;height:42px;border-radius:50%;border:0;background:var(--card);color:var(--wa-ic);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(11,20,26,.25);z-index:5}
.in-down:hover{background:var(--h-bg-f5f6f6)}
.inbox .in-err{border-radius:0}
.inbox .in-fname{background:var(--wa-bg);padding:6px 16px;border-top:1px solid var(--wa-line)}
.inbox .in-compose{background:var(--wa-bg);border-top:0;padding:10px 14px;gap:4px;align-items:flex-end}
.inbox .in-compose textarea{flex:1;min-height:42px;max-height:140px;border:0!important;box-shadow:none!important;outline:0;border-radius:10px;background:var(--card);padding:10px 14px;font-size:15px;line-height:1.35;margin:0 4px}
.in-send{width:44px;height:44px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;padding:0;transition:background .15s,transform .1s}
.in-send:hover{background:var(--brand-dark)} .in-send:active{transform:scale(.95)} .in-send:disabled{opacity:.6;cursor:default}
.inbox .qr-pop{bottom:68px}
@media (max-width:860px){
  body.inbox-page .content{padding:0}
  body.inbox-page .content>.alert{margin:10px}
  .inbox{grid-template-columns:minmax(0,1fr);border-radius:0;border-left:0;border-right:0}
  .inbox .in-back{display:inline-grid}
  .inbox .in-msgs{padding:10px 12px}
  .inbox .msg-b{max-width:84%}
  .in-act span{display:none} .in-act{padding:8px}
}

/* Inbox: attach menu, file preview, emoji picker, "sent by" tag */
.at-pop{position:absolute;left:12px;bottom:68px;z-index:30;min-width:190px;background:var(--card);border-radius:14px;box-shadow:0 8px 30px rgba(11,20,26,.22);padding:8px}
.at-pop button{display:flex;align-items:center;gap:14px;width:100%;border:0;background:transparent;border-radius:8px;padding:9px 12px;font:inherit;font-size:15px;color:var(--wa-ink,var(--h-fg-111b21));cursor:pointer;text-align:left}
.at-pop button:hover,.at-pop button:focus-visible{background:var(--h-bg-f0f2f5);outline:0}
.at-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.at-ic.doc{background:var(--h-bg-7f66ff)}.at-ic.img{background:#007bfc}.at-ic.vid{background:#e0266d}.at-ic.aud{background:#ff6a3d}
.fp-dlg{width:min(480px,94vw)}
.fp-dlg h2{margin:0 0 12px}
.fp-view{background:#0b141a;border-radius:10px;min-height:120px;max-height:46vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fp-view img,.fp-view video{max-width:100%;max-height:46vh;display:block;object-fit:contain}
.fp-view audio{width:92%;margin:26px 0}
.fp-doc{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 20px;color:#fff;text-align:center;max-width:100%}
.fp-doc b{font-weight:500;word-break:break-all;font-size:14px}
.fp-doc-ic{width:64px;height:78px;border-radius:8px;background:var(--h-bg-7f66ff);display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:.5px}
.fp-meta{margin:8px 2px 0;word-break:break-all}
.fp-capwrap{display:flex;align-items:flex-end;gap:6px;margin-top:12px;background:var(--h-bg-f0f2f5);border-radius:10px;padding:4px 4px 4px 4px}
.fp-capwrap textarea{flex:1;border:0!important;box-shadow:none!important;background:transparent!important;resize:none;padding:9px 10px;outline:0;font-size:15px;min-height:44px}
.emo-pop{position:fixed;z-index:400;background:var(--card);border-radius:14px;box-shadow:0 8px 30px rgba(11,20,26,.25);overflow:hidden;display:flex;flex-direction:column;max-height:300px}
.emo-tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--h-bg-e9edef);overflow-x:auto;scrollbar-width:none;flex:none}
.emo-tab{border:0;background:transparent;padding:7px 10px;font:inherit;font-size:12.5px;font-weight:600;color:var(--h-fg-667781);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.emo-tab.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
.emo-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.emo{border:0;background:transparent;border-radius:8px;font-size:22px;line-height:1;padding:6px 0;cursor:pointer;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emo:hover,.emo:focus-visible{background:var(--h-bg-f0f2f5);outline:0}
.inbox .msg-via{display:inline-block;margin:0 0 3px;padding:0 7px;border-radius:99px;font-size:10.5px;line-height:16px;font-weight:700;letter-spacing:.2px;background:rgba(11,20,26,.07);color:var(--h-fg-54656f)}
.inbox .msg-via.via-broadcast{background:var(--h-bg-fff0d6);color:var(--h-fg-8a5a00)}
.inbox .msg-via.via-api{background:var(--h-bg-e3e8ff);color:#3347b3}
.inbox .msg-via.via-flow,.inbox .msg-via.via-auto{background:var(--h-bg-e2f6e9);color:var(--h-fg-12703a)}
.inbox .msg-via.via-single{background:var(--h-bg-f3e5ff);color:var(--h-fg-6a2c9c)}
.inbox .msg-via.via-warmer{background:var(--h-bg-ffe5e0);color:var(--h-fg-a33a24)}
.inbox .msg-b>.msg-via{display:block;width:max-content}
@media (max-width:860px){.at-pop{left:8px}}

/* Team members */
.perm-chips{display:flex;flex-wrap:wrap;gap:4px;max-width:420px}
.perm-chip{display:inline-block;background:var(--brand-soft);color:var(--brand-dark);border-radius:99px;padding:1px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.perm-chip.restrict{background:var(--h-bg-fff3cd);color:var(--h-fg-7a5b00)}
.team-presets{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.team-presets .chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:5px 13px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.team-presets .chip:hover{border-color:var(--brand);color:var(--brand-dark)}
.tp-group{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--card)}
.tp-group.restrict{background:var(--h-bg-fffdf5);border-color:var(--h-bg-f1e3b4)}
.tp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;margin:0;cursor:pointer;font-weight:400}
.tp-row+.tp-row{border-top:1px solid var(--h-bg-eef2ef)}
.tp-child{padding-left:34px;background:var(--h-bg-fafcfb)}
.tp-child.off{opacity:.5;cursor:not-allowed}
.tp-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tp-text b{font-weight:600;font-size:14.5px;color:var(--ink)}
.tp-child .tp-text b{font-weight:500;font-size:14px}
.tp-hint{font-size:12.5px;color:var(--muted);line-height:1.4}
.tp-switch{position:relative;flex:none;width:42px;height:24px}
.tp-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.tp-switch i{position:absolute;inset:0;border-radius:99px;background:var(--h-bg-cdd5d1);transition:background .15s}
.tp-switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.tp-switch input:checked+i{background:var(--brand)} .tp-switch input:checked+i::after{transform:translateX(18px)}
.tp-group.restrict .tp-switch input:checked+i{background:#d99a00}
.tp-switch input:focus-visible+i{outline:2px solid var(--brand);outline-offset:2px}
.tp-switch input:disabled{cursor:not-allowed}
@media (max-width:640px){.tp-row{padding:12px}.tp-child{padding-left:22px}}

/* Inbox: team (assign, who looks after a chat) */
.in-sel{flex-wrap:wrap}
.in-sel #in-agent{flex:1 1 100%}
.in-assign{padding:0 6px 0 10px;cursor:default}
.in-assign select{border:0;background:transparent;font:inherit;font-size:13px;font-weight:500;color:inherit;padding:8px 2px;max-width:150px;cursor:pointer;height:auto;margin:0;width:auto}
.in-assign:hover{background:var(--h-bg-e4e7e9)}
.as-row{margin-top:3px}
.as-chip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:99px;padding:0 8px;font-size:11px;line-height:18px;font-weight:600;background:var(--h-bg-e7f3ef);color:var(--h-fg-0b5d4b)}
@media (max-width:760px){.in-assign select{max-width:96px}}


/* Flow builder: the list of nodes you drag onto the canvas */
.fbx-pal{height:var(--fbx-h);overflow:auto;padding:12px 10px;border-right:1px solid var(--line);background:var(--h-bg-fafbfa)}
.fbx-pal-h{font-size:12px;font-weight:600;color:var(--muted);padding:0 4px 8px}
.fbx-pal-list{display:flex;flex-direction:column;gap:7px}
.fbx-pi{--c:var(--h-fg-1f7a4d);--bg:var(--h-bg-eefbf3);--bd:var(--h-bg-bfe8cf);display:flex;align-items:center;gap:9px;width:100%;margin:0;padding:8px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--c);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:box-shadow .15s,transform .15s}
.fbx-pi svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fbx-pi span{min-width:0;line-height:1.2}
.fbx-pi:hover{box-shadow:0 2px 8px rgba(16,35,30,.14);transform:translateY(-1px)}
.fbx-pi:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fbx-pi.t-media{--c:#2554b8;--bg:var(--h-bg-eef3ff);--bd:var(--h-bg-c7d7fb)} .fbx-pi.t-tpl{--c:var(--h-fg-0f766e);--bg:var(--h-bg-ecfdfa);--bd:var(--h-bg-b4ece3)}
.fbx-pi.t-btn{--c:var(--h-fg-8a5a00);--bg:var(--h-bg-fff8d6);--bd:var(--h-bg-f2e08a)} .fbx-pi.t-list{--c:#6b3fb0;--bg:var(--h-bg-f6f0ff);--bd:var(--h-bg-dccbf7)}
.fbx-pi.t-cta{--c:var(--h-fg-0b7a8a);--bg:var(--h-bg-e9fbff);--bd:var(--h-bg-b3eaf3)} .fbx-pi.t-delay{--c:var(--h-fg-b4540a);--bg:var(--h-bg-fff3e6);--bd:var(--h-bg-f9d2a8)}
.fbx-pi.t-cond{--c:var(--h-fg-1f7a4d);--bg:var(--h-bg-eefbf3);--bd:var(--h-bg-bfe8cf)} .fbx-pi.t-save{--c:var(--h-fg-a21caf);--bg:var(--h-bg-fdf0ff);--bd:var(--h-bg-f0c4f5)}
.fbx-pi.t-api{--c:var(--h-fg-1d6fb8);--bg:var(--h-bg-eef7ff);--bd:var(--h-bg-bcdcf7)} .fbx-pi.t-ai{--c:#4338ca;--bg:var(--h-bg-eef0ff);--bd:var(--h-bg-c9ccf8)}
.fbx-pi.t-assign{--c:var(--h-fg-0e7490);--bg:var(--h-bg-e8fafd);--bd:var(--h-bg-a9e6ef)} .fbx-pi.t-human{--c:var(--h-fg-b42318);--bg:var(--h-bg-fff0ef);--bd:var(--h-bg-f7c1bc)}
.fbx-pi.t-end{--c:var(--h-fg-4b5563);--bg:var(--h-bg-f3f4f6);--bd:var(--h-bg-d6d9de)}
.fbx-pi.ghost{position:fixed;z-index:3000;width:200px;pointer-events:none;cursor:grabbing;box-shadow:0 10px 28px rgba(16,35,30,.28);transform:rotate(-2deg);opacity:.96}
.fbx-canvas.drop-ok{box-shadow:inset 0 0 0 2px var(--brand)}
.fbx-nh .fbx-ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.fbx-c-team .fbx-nh{background:var(--h-bg-e0f6fa)}

/* ── File manager ───────────────────────────────────────────────── */
.fm{position:relative}
.fm.drop{outline:2px dashed var(--brand);outline-offset:6px;border-radius:12px}
.fm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.fm-tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--gray-soft);padding:3px;border-radius:10px}
.fm-tab{border:0;background:transparent;padding:6px 12px;border-radius:8px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.fm-tab:hover{color:var(--ink)} .fm-tab.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(16,35,30,.1)}
.fm-search{flex:1;min-width:150px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--card);color:var(--soft)}
.fm-search input{border:0;outline:0;background:transparent;font:inherit;padding:8px 0;flex:1;min-width:0;color:var(--ink)}
.fm-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fm-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fm-msg{min-height:0;font-size:13px;margin-bottom:8px} .fm-msg:empty{display:none}
.fm-msg.ok{color:var(--brand-dark)} .fm-msg.bad{color:var(--red)}
.fm-prog{height:4px;background:var(--gray-soft);border-radius:99px;overflow:hidden;margin-bottom:10px} .fm-prog span{display:block;height:100%;background:var(--brand);transition:width .2s}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.fm-card{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.fm-card:hover{border-color:var(--h-bg-c7d6cf);box-shadow:var(--shadow)} .fm-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fm-card.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fm-th{height:112px;background:var(--gray-soft);display:grid;place-items:center;position:relative;overflow:hidden;color:var(--muted)}
.fm-th img,.fm-th video{width:100%;height:100%;object-fit:cover;display:block}
.fm-th .fm-ext{position:absolute;bottom:8px;left:8px;background:var(--card);border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700;color:var(--ink)}
.fm-th.fm-k-audio{background:var(--h-bg-eaf1ff);color:var(--blue)} .fm-th.fm-k-document{background:var(--amber-soft);color:var(--amber)} .fm-th.fm-k-video{background:#1c2b27;color:#fff}
.fm-play{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.fm-info{padding:8px 10px 6px;min-width:0} .fm-nm{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fm-mt{font-size:12px;color:var(--muted)}
.fm-acts{display:flex;gap:2px;padding:0 6px 6px}
.fm-ib{border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:8px;display:inline-grid;place-items:center;cursor:pointer;text-decoration:none}
.fm-ib:hover{background:var(--gray-soft);color:var(--ink);text-decoration:none} .fm-ib.danger:hover{background:var(--red-soft);color:var(--red)}
.fm-ib:focus-visible{outline:2px solid var(--brand)}
.fm-empty{grid-column:1/-1;text-align:center;padding:34px 12px;color:var(--soft)} .fm-empty p{margin:8px 0 0;color:var(--muted)}
.fm-more{display:block;margin:14px auto 0}
.fm-quota{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px}
.fm-ql{display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:space-between}
.fm-qb{height:7px;background:var(--gray-soft);border-radius:99px;overflow:hidden;margin-top:7px} .fm-qb i{display:block;height:100%;background:var(--brand);border-radius:99px} .fm-qb.hot i{background:var(--red)}
.fm-qn{margin-top:8px;color:var(--amber)}
.fm-top{display:flex;gap:18px 32px;flex-wrap:wrap;align-items:center}
.fm-top-main{flex:1;min-width:220px} .fm-top-n{font-size:20px;font-weight:700}
.fm-top-n .muted{font-size:13px;font-weight:400}
.fm-top-lim{display:flex;gap:20px;flex-wrap:wrap} .fm-top-lim div{display:flex;flex-direction:column}
/* picker window */
.fm-dlg{width:min(860px,96vw);max-height:92vh;padding:0;border:0;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.fm-dlg[open]{display:flex;flex-direction:column}
.fm-dlg::backdrop,.fm-prev::backdrop{background:rgba(8,20,16,.55)}
.fm-dh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)} .fm-dh h2{margin:0}
.fm-db{padding:14px 18px;overflow:auto;flex:1;min-height:280px} .fm-pick .fm-th{height:92px} .fm-pick .fm-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
.fm-pick .fm-acts{padding:0 4px 4px}
.fm-df{display:flex;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);background:var(--h-bg-fafcfb)}
/* preview window */
.fm-prev{width:min(920px,96vw);max-height:94vh;padding:0;border:0;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.fm-prev[open]{display:flex;flex-direction:column}
.fm-ph{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)} .fm-ph b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .fm-ph .muted{flex:1;white-space:nowrap}
.fm-pv{background:#0e1a16;display:grid;place-items:center;min-height:300px;max-height:68vh;overflow:auto;flex:1}
.fm-pv img,.fm-pv video{max-width:100%;max-height:68vh;display:block} .fm-pv audio{width:min(480px,90%);margin:60px 0} .fm-pv iframe{width:100%;height:68vh;border:0;background:var(--card)}
.fm-nopv{color:var(--h-fg-cfe8dd);text-align:center;padding:40px 16px} .fm-nopv p{margin:8px 0 0}
.fm-pf{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);justify-content:flex-end}
/* the form control */
.fm-field{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.fm-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:4px 4px 4px 4px;min-width:0;max-width:100%}
.fm-chip-th{width:38px;height:38px;border-radius:8px;overflow:hidden;background:var(--gray-soft);display:grid;place-items:center;color:var(--muted);flex:none} .fm-chip-th img{width:100%;height:100%;object-fit:cover}
.fm-chip-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25} .fm-chip-tx b{font-size:13px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.fm-grid{grid-template-columns:repeat(2,1fr)}.fm-dlg{width:100vw;max-height:100vh;border-radius:0}.fm-top-lim{gap:14px}}
@media (prefers-reduced-motion:reduce){.fm-prog span{transition:none}}
.fb-fm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fb-fm-chip{display:flex;gap:8px;align-items:center;background:var(--brand-soft);color:var(--brand-dark);border-radius:8px;padding:3px 4px 3px 10px;font-size:13px;max-width:100%}
.fb-fm-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.fm [hidden],.fm-dlg [hidden],.fm-field [hidden]{display:none!important}
/* flow: which numbers it runs on */
.fl-nums-box{margin:4px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
.fl-nums-h{margin-bottom:8px}
.fl-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.fl-num{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--card);cursor:pointer;margin:0}
.fl-num:hover{border-color:var(--h-bg-c7d6cf)} .fl-num:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.fl-num input{margin-top:3px;flex:none} .fl-num span{display:flex;flex-direction:column;min-width:0} .fl-num b{font-weight:600} .fl-num small{color:var(--muted);font-size:12px}
.fl-num.off:not(.all){opacity:.55}

/* Inbox: contact card */
.ii-trigger{cursor:pointer} .ii-trigger:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.in-head #c-who:hover #c-title{text-decoration:underline}
.in-info{position:absolute;top:0;right:0;bottom:0;width:390px;max-width:100%;background:var(--card);z-index:25;display:flex;flex-direction:column;box-shadow:-8px 0 28px rgba(11,20,26,.18);animation:iiIn .18s ease-out}
.in-info[hidden]{display:none}
@keyframes iiIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.in-info{animation:none}}
.ii-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--wa-bg,var(--h-bg-f0f2f5));border-bottom:1px solid var(--wa-line,var(--h-bg-e9edef));min-height:60px}
.ii-head .in-ic{font-size:16px;line-height:1}
.ii-body{flex:1;overflow-y:auto;padding:0 0 16px;background:var(--h-bg-f0f2f5)}
.ii-top{background:var(--card);padding:22px 18px 16px;text-align:center;margin-bottom:8px}
.ii-av{width:96px!important;height:96px!important;margin:0 auto 10px;font-size:34px!important;cursor:default}
.ii-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ii-name{font-size:19px;font-weight:600;overflow-wrap:anywhere}
.ii-phone{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);margin-top:2px}
.ii-copy{border:0;background:var(--gray-soft);border-radius:6px;padding:2px 9px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink)} .ii-copy:hover{background:var(--line)}
.ii-state{margin-top:8px;font-size:12.5px;color:var(--amber)} .ii-state.on{color:var(--brand-dark)}
.ii-s{background:var(--card);padding:14px 18px 6px;margin-bottom:8px}
.ii-s h3{font-size:13px;color:var(--brand-dark);margin:0 0 10px;font-weight:600}
.ii-f{margin-bottom:12px} .ii-f label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:3px}
.ii-f input,.ii-f select,.ii-f textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;background:var(--h-bg-fafcfb);color:var(--ink)}
.ii-f input:focus,.ii-f select:focus,.ii-f textarea:focus{outline:0;border-color:var(--brand);background:var(--card);box-shadow:0 0 0 3px var(--brand-soft)}
.ii-hint{font-size:12px;color:var(--soft);margin-top:3px} .ii-hidden{font-size:13px;color:var(--soft);padding:8px 0}
.ii-chk{display:flex;gap:8px;align-items:center;margin:0 0 10px;font-size:14px;cursor:pointer}
.ii-rows{margin-bottom:8px} .ii-row{display:grid;grid-template-columns:1fr 1.4fr 30px;gap:6px;margin-bottom:8px}
.ii-row input{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;min-width:0;background:var(--h-bg-fafcfb)}
.ii-rm{border:0;background:transparent;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;border-radius:8px} .ii-rm:hover{background:var(--red-soft);color:var(--red)}
.ii-s .btn{margin-bottom:12px}
.ii-dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0 0 12px;font-size:13.5px} .ii-dl dt{color:var(--muted)} .ii-dl dd{margin:0;text-align:right;font-weight:500}
.ii-note{padding:18px;color:var(--muted);text-align:center;margin:0} .ii-note.bad{color:var(--red)}
.ii-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:var(--card)}
.ii-foot span{flex:1;font-size:13px} .ii-foot .ok{color:var(--brand-dark)} .ii-foot .bad{color:var(--red)}
@media (max-width:860px){.in-info{width:100%}}

/* inbox image viewer */
body.iv-lock{overflow:hidden}
.iv{position:fixed;inset:0;z-index:3000;background:var(--card);display:flex;flex-direction:column;color:var(--h-fg-1f2430)}
.iv[hidden]{display:none}
.iv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--h-bg-e6e8ee);flex:none}
.iv-who{min-width:0}.iv-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-acts{display:flex;align-items:center;gap:8px;flex:none}
.iv-btn{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;padding:8px 12px;border-radius:9px;text-decoration:none}
.iv-btn:hover{background:var(--h-bg-f0f1f6)}
.iv-dl{background:var(--h-bg-f1edfd);color:#5b34d6}.iv-dl:hover{background:var(--h-bg-e6defb)}
.iv-btn:focus-visible,.iv-nav:focus-visible,.iv-th:focus-visible{outline:3px solid var(--h-bg-8b6cf0);outline-offset:2px}
.iv-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:14px 70px}
.iv-big{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:4px}
.iv-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(31,36,48,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.iv-nav:hover{background:rgba(31,36,48,.8)}
.iv-nav[hidden]{display:none}
.iv-prev{left:14px}.iv-next{right:14px}
.iv-cap{text-align:center;padding:6px 20px 10px;font-size:14px;max-height:84px;overflow:auto;white-space:pre-wrap;flex:none}
.iv-strip{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 14px;border-top:1px solid var(--h-bg-e6e8ee);justify-content:safe center;flex:none;scroll-behavior:smooth}
.iv-th{flex:none;width:62px;height:62px;border-radius:8px;border:2px solid transparent;padding:0;background:var(--h-bg-eef0f5);cursor:pointer;overflow:hidden;opacity:.75}
.iv-th img{width:100%;height:100%;object-fit:cover;display:block}
.iv-th:hover{opacity:1}
.iv-th.on{border-color:#6c3ff0;opacity:1}
@media (max-width:640px){.iv-stage{padding:10px 8px}.iv-nav{width:38px;height:38px}.iv-prev{left:6px}.iv-next{right:6px}.iv-dl span{display:none}.iv-th{width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){.iv-strip{scroll-behavior:auto}}

/* inbox: "more" menu and the clear / delete dialog */
.cm-pop{min-width:190px;padding:6px}
@media (max-width:760px){.lb-pop.cm-pop{left:auto;right:0}}
.cm-i{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;text-align:left;border:0;background:transparent;color:var(--ink,var(--h-fg-1f2430));font:inherit;font-size:14px;padding:9px 10px;border-radius:8px;cursor:pointer;text-decoration:none}
.cm-i:hover,.cm-i:focus-visible{background:var(--h-bg-f1f2f6);outline:none}
.cm-i.danger{color:var(--red,var(--h-fg-b42318))}
.cm-i.danger:hover,.cm-i.danger:focus-visible{background:var(--red-soft)}
.cd-dlg{width:min(440px,94vw)}
.cd-dlg h2{margin:0 0 8px}
.cd-tick{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;padding:12px;border:1px solid var(--line,var(--h-bg-e3e6ee));border-radius:10px;cursor:pointer}
.cd-tick input{margin-top:3px;width:17px;height:17px;flex:none}
.cd-tick span span{display:block;margin-top:2px}

/* default picture: a grey person / people */
.av.av-def{background:var(--h-bg-dfe5ec);color:#fff}
.av.av-def .av-sil{width:78%;height:78%;display:block;color:var(--h-fg-9aa7b5);margin-top:14%}
.ii-av.av-def .av-sil{width:80%;height:80%}

/* admin: WhatsApp health */
.wh-tabs{margin:0 0 18px;border-bottom:1px solid var(--line);gap:2px}
.wh-tabs a{padding:9px 14px;border-radius:9px 9px 0 0;color:var(--muted);font-weight:600;text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.wh-tabs a:hover{color:var(--ink);background:var(--h-bg-f4f8f6)}
.wh-tabs a.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
.wh-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:8px 0 14px}.wh-dl dt{color:var(--muted)}.wh-dl dd{margin:0;font-weight:600;word-break:break-word}
.wh-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.wh-row:first-of-type{border-top:0}
.wh-step{padding:6px 0 6px 2px;border-top:1px solid var(--line)}.wh-step:first-of-type{border-top:0}
.wh-step>span:first-child{display:inline-block;width:18px;font-weight:700}
.wh-step.ok>span:first-child{color:var(--brand-dark)}.wh-step.warn>span:first-child{color:var(--amber)}.wh-step.bad>span:first-child{color:var(--red)}
.wh-step .muted{font-size:13px;margin-left:20px}.wh-step>span.muted{margin-left:4px}
.wh-verdict{padding:10px 14px;border-radius:10px;margin-bottom:8px;background:var(--brand-soft)}
.wh-verdict.warn{background:var(--amber-soft)}.wh-verdict.fail{background:var(--red-soft)}
.wh-steps{list-style:none;margin:8px 0 0;padding:0}.wh-steps li{padding:9px 0 9px 34px;position:relative;border-top:1px solid var(--line);color:var(--muted)}.wh-steps li:first-child{border-top:0}
.wh-steps li::before{content:'';position:absolute;left:6px;top:11px;width:16px;height:16px;border-radius:50%;border:2px solid var(--h-bg-c9d3ce);box-sizing:border-box}
.wh-steps li.run{color:var(--ink);font-weight:600}.wh-steps li.run::before{border-color:var(--brand);border-top-color:transparent;animation:whspin 1s linear infinite}
.wh-steps li.ok{color:var(--ink)}.wh-steps li.ok::before{background:var(--brand);border-color:var(--brand)}
.wh-steps li.bad{color:var(--red)}.wh-steps li.bad::before{background:var(--red);border-color:var(--red)}
.wh-steps .st{font-weight:400;color:var(--muted)}
@keyframes whspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wh-steps li.run::before{animation:none}}
@media (max-width:900px){.grid.split-12[style]{grid-template-columns:1fr!important}}

/* dashboard: big numbers with a coloured round icon and a "Manage ..." link */
.dash{border-top:4px solid var(--brand);border-radius:0 0 14px 14px;padding:22px 20px 6px;margin:-6px -6px 18px;background-color:var(--h-bg-f6f8f6);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%238a9a95' stroke-opacity='.16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 28h34a6 6 0 0 1 6 6v18a6 6 0 0 1-6 6H40l-10 9v-9h-8a6 6 0 0 1-6-6V34a6 6 0 0 1 6-6z'/%3E%3Cpath d='M118 40a14 14 0 1 0 28 0 14 14 0 0 0-28 0zM126 40l5 5 8-9'/%3E%3Cpath d='M44 120c-10-8-16-14-16-21a9 9 0 0 1 16-5 9 9 0 0 1 16 5c0 7-6 13-16 21z'/%3E%3Cpath d='M120 112l22 8-9 4 6 10-6 3-6-10-7 7z'/%3E%3Ccircle cx='96' cy='150' r='4'/%3E%3Ccircle cx='160' cy='92' r='3'/%3E%3C/svg%3E")}
.dash-hi{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.dash-hi h1{font-size:34px;font-weight:500;color:var(--brand);letter-spacing:-.4px;line-height:1.15}
.dash-hi .btn{margin-left:2px}
.sc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.sc{background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:22px 24px 20px;min-height:160px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sc-main{min-width:0}
.sc-l{font-size:13px;letter-spacing:.2px;text-transform:uppercase;color:var(--muted)}
.sc-v{font-size:32px;font-weight:700;line-height:1.2;margin-top:6px;color:var(--h-fg-2a2d52);overflow-wrap:anywhere}
.sc-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:var(--brand)}
.sc-ic.teal{background:#1796a8}.sc-ic.blue{background:#2f6fe4}.sc-ic.pink{background:#ee3a62}.sc-ic.orange{background:#f4623a}.sc-ic.amber{background:#d98a0b}.sc-ic.purple{background:#7a54d6}.sc-ic.slate{background:var(--h-bg-56667a)}
.sc-foot{min-height:20px;font-size:14px}
.sc-foot a{color:var(--brand-dark)}
.sc-note{color:var(--muted);font-size:13px}
@media (max-width:1180px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sc-grid{grid-template-columns:1fr;gap:12px}.dash{padding:16px 12px 2px;margin:-6px 0 16px}.dash-hi h1{font-size:28px}.sc{min-height:0}}

/* inbox: the buttons of a message we sent */
.msg-f{font-size:12px;color:var(--soft);margin-top:3px}
.msg-btns{margin:6px -2px 2px;display:flex;flex-direction:column;gap:3px}
.msg-btn{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:7px 10px;border-radius:7px;background:rgba(255,255,255,.75);color:var(--h-fg-027eb5);font-size:13.5px;text-align:center;box-shadow:0 1px 0 rgba(11,20,26,.08)}
.msg-btn b{font-weight:600}.msg-bi{font-size:14px;line-height:1}
.msg-bt{flex-basis:100%;font-size:11.5px;font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.msg-bn{color:var(--muted);margin-top:4px}

/* ── API docs ─────────────────────────────────────────────────────────────── */
html{scroll-padding-top:76px}
.dc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.dc-nav{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px;font-size:13.5px;scrollbar-width:thin}
.dc-nav h4{margin:12px 10px 4px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);font-weight:700}
.dc-nav h4:first-child{margin-top:6px}
.dc-nav a{display:flex;gap:8px;align-items:center;padding:5px 10px;border-radius:7px;color:var(--ink);line-height:1.3}
.dc-nav a:hover{background:var(--gray-soft);text-decoration:none}
.dc-nav a.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.dc-nav .dc-m{flex:none;min-width:42px;text-align:center;padding:1px 0;font-size:10px}
.dc-main{min-width:0}
.dc-group{margin:30px 0 12px;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);font-weight:700;display:flex;align-items:center;gap:12px}
.dc-group:first-child{margin-top:0}
.dc-group:after{content:"";flex:1;height:1px;background:var(--line)}
.dc-ep h2,.dc-sec h2{margin:0;font-size:19px}
.dc-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.dc-m{display:inline-block;padding:3px 10px;border-radius:7px;font:700 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em;background:var(--gray-soft);color:var(--muted)}
.dc-m.green{background:var(--h-bg-dcfce7);color:var(--h-fg-166534)}.dc-m.blue{background:var(--blue-soft);color:var(--blue)}.dc-m.red{background:var(--red-soft);color:var(--red)}
.dc-desc{margin:0 0 6px;color:var(--muted);max-width:90ch}
.dc-lab{margin:18px 0 6px;font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.dc-tag{font-size:11px;font-weight:600;padding:1px 8px;border-radius:99px;background:var(--gray-soft);color:var(--muted)}
.dc-url{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px;min-width:0}
.dc-url code{flex:1;min-width:0;font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
.dc-hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.dc-copy,.dc-btn{flex:none;border:1px solid var(--line);background:var(--card);border-radius:7px;padding:3px 10px;font-family:inherit;font-weight:600;font-size:12px;line-height:1.5;cursor:pointer;color:var(--ink)}
.dc-copy:hover,.dc-btn:hover{background:var(--gray-soft)}
.dc-copy.ok{background:var(--brand);border-color:var(--brand);color:#fff}
.dc-codewrap{position:relative}
.dc-codewrap .dc-copy-pre{position:absolute;top:16px;right:10px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:var(--h-fg-d8f5e3)}
.dc-codewrap .dc-copy-pre:hover{background:rgba(255,255,255,.22)}
.dc pre.code{margin:0 0 4px}
.dc-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.dc-tbl th{text-align:left;font-size:12px;color:var(--soft);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.dc-tbl td{padding:9px 10px;border-bottom:1px solid var(--gray-soft);vertical-align:top}
.dc-tbl tr:last-child td{border-bottom:0}
.dc-tbl tbody tr:nth-child(odd){background:var(--h-bg-fafcfb)}
.dc-req,.dc-opt{display:inline-block;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:99px}
.dc-req{background:var(--red-soft);color:var(--red)}.dc-req.alt{background:var(--amber-soft);color:var(--amber)}
.dc-opt{background:var(--gray-soft);color:var(--muted)}
.dc-note{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--blue-soft);color:var(--h-fg-1e3a8a);font-size:13.5px}
.dc-note.warn{background:var(--amber-soft);color:var(--h-fg-7a3a05)}
.dc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;counter-reset:st}
.dc-steps li{counter-increment:st;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--h-bg-fafcfb)}
.dc-steps li:before{content:counter(st);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:13px;margin-bottom:8px}
.dc-steps b{display:block;margin-bottom:2px}.dc-steps span{color:var(--muted);font-size:13.5px}
.dc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dc-pick select{min-width:260px;max-width:100%}
@media (max-width:1100px){.dc{grid-template-columns:minmax(0,1fr)}.dc-nav{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:2px 4px}.dc-nav h4{width:100%}.dc-nav a{padding:3px 8px}.dc-nav .dc-m{display:none}}
@media (max-width:700px){.dc-steps,.dc-two{grid-template-columns:minmax(0,1fr)}}
.dc-two pre.code{white-space:pre-wrap;word-break:break-word}
.dc-tbl td:nth-child(4){min-width:220px}
.dc-tbl td:nth-child(5){word-break:break-word}
.dc pre.dc-resp{white-space:pre-wrap;word-break:break-word}
.dc .dc-codewrap pre.code{white-space:pre-wrap;overflow-wrap:anywhere;padding-right:76px}
.dc-keyrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dc-btn{text-decoration:none;display:inline-block}
.dc-keyrow input{flex:1 1 280px;min-width:0;max-width:460px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.msg-t b{font-weight:700} .msg-t code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:rgba(0,0,0,.06);border-radius:4px;padding:0 4px}
.msg-t .msg-pre{display:block;margin:4px 0;padding:6px 8px;background:rgba(0,0,0,.06);border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;white-space:pre-wrap;word-break:break-word}
.msg-t .msg-q{display:block;border-left:3px solid var(--h-bg-a8b3ba);padding-left:8px;color:var(--h-fg-4a5a63)}
.msg-t a{color:var(--h-fg-027eb5);text-decoration:underline;word-break:break-all}
.in-fmt{display:inline-flex;gap:2px;align-self:center;flex:none}
.in-fb{width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--wa-ic,var(--h-fg-54656f));cursor:pointer;font-size:14px;padding:0;margin:0;font-family:inherit}
.in-fb:hover{background:var(--h-bg-e6e9ec)} .in-fb:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
@media(max-width:700px){.in-fmt{display:none}}
.sb-help{font-weight:600;color:#b7dccc;margin:0 0 8px;font-size:12px}
.sb-support{display:flex;flex-direction:column;gap:6px}
.sb-foot a.sb-sbtn{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid rgba(183,220,204,.28);color:#d8efe4;font-size:12.5px;font-weight:600;text-decoration:none;line-height:1.2;transition:background .15s}
.sb-foot a.sb-sbtn:hover{background:rgba(255,255,255,.09);color:#fff}
.sb-foot a.sb-sbtn.wa{background:#1fa855;border-color:#1fa855;color:#fff}
.sb-foot a.sb-sbtn.wa:hover{background:#188d47}
.sb-sbtn svg{flex:none}
.tk-tabs{display:flex;gap:6px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.tk-tabs a{padding:9px 14px;border-bottom:2px solid transparent;color:var(--soft);font-weight:600;text-decoration:none;margin-bottom:-1px}
.tk-tabs a.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
.tk-high{color:var(--h-fg-b91c1c);font-weight:600}
.tk-thread{display:flex;flex-direction:column;gap:12px;margin:0 0 18px;max-width:820px}
.tk-msg{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card);max-width:92%}
.tk-msg.me{align-self:flex-end;background:var(--brand-soft)}
.tk-msg.other{align-self:flex-start}
.tk-msg.staff:not(.me){border-left:3px solid var(--brand)}
.tk-head{margin-bottom:6px}
.tk-body{white-space:pre-wrap;word-break:break-word;line-height:1.5}
.tk-file{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px}
.tk-reply{max-width:820px}
.sb-badge.tk{margin-left:auto}
.sb-foot a.sb-sbtn.tk{background:rgba(255,255,255,.12);color:#fff}
.cf-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.cf-row{display:flex;gap:6px;align-items:center}
.cf-row input{flex:1 1 0;min-width:0;margin:0}
.cf-row input:first-child{flex:0 0 38%}
.cf-x{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:var(--gray-soft);cursor:pointer;line-height:1;color:var(--muted)}
.cf-x:hover{background:var(--red-soft);color:var(--red)}
.cf-cell{max-width:280px}
.cf-chip{display:inline-block;margin:0 4px 4px 0;padding:2px 8px;border-radius:99px;background:var(--gray-soft);font-size:12px;white-space:nowrap}
.cf-chip b{font-weight:600;color:var(--muted);margin-right:3px}
.cf-more{font-size:12px;color:var(--muted);white-space:nowrap}
.cf-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.cf-line label{display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:600;color:var(--muted)}
.cf-line input{margin:0;font-weight:400}

/* Gateway status graphic (admin -> WhatsApp gateway) */
.gw{--c:var(--soft);--cs:var(--gray-soft)}
.gw-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.gw-pill{display:inline-flex;align-items:center;gap:10px;padding:9px 20px 9px 16px;border-radius:999px;font-size:20px;background:var(--gray-soft);color:var(--muted)}
.gw-pill i{width:13px;height:13px;border-radius:50%;background:currentColor;display:block}
.gw-pill.ok{background:var(--brand-soft);color:var(--brand-dark)} .gw-pill.bad{background:var(--red-soft);color:var(--red)}
.gw-pill.ok i{animation:gwPulse 1.8s ease-out infinite} .gw-pill.bad i{animation:gwBlink 1.1s steps(2,jump-none) infinite}
.gw-sub{color:var(--muted);flex:1;min-width:200px}
.gw.busy .gw-now{opacity:.6}
.gw-flow{display:flex;align-items:center;gap:0}
.gw-node{flex:0 0 190px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;--c:var(--soft);--cs:var(--gray-soft)}
.gw-node.ok{--c:var(--brand);--cs:var(--brand-soft)} .gw-node.bad{--c:var(--red);--cs:var(--red-soft)} .gw-node.warn{--c:var(--amber);--cs:var(--amber-soft)}
.gw-node b{margin-top:8px} .gw-node small{color:var(--muted);font-size:12.5px;max-width:190px}
.gw-ic{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--cs);color:var(--c);border:3px solid var(--c);position:relative}
.gw-node.ok .gw-ic::after,.gw-node.bad .gw-ic::after{content:"";position:absolute;right:-4px;top:-4px;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font-size:13px;font-weight:800;line-height:22px;box-shadow:0 0 0 3px var(--card)}
.gw-node.ok .gw-ic::after{content:"\2713"} .gw-node.bad .gw-ic::after{content:"\2715"}
.gw-link{flex:1;min-width:40px;height:4px;border-radius:3px;margin:0 6px;position:relative;top:-24px;background:var(--line);--c:var(--soft)}
.gw-link.ok{--c:var(--brand);background:repeating-linear-gradient(90deg,var(--brand) 0 10px,transparent 10px 18px);background-size:36px 4px;animation:gwFlow 1s linear infinite}
.gw-link.warn{background:repeating-linear-gradient(90deg,var(--amber) 0 10px,transparent 10px 18px)}
.gw-link.bad{background:repeating-linear-gradient(90deg,var(--red) 0 4px,transparent 4px 10px)}
.gw-help{margin-top:20px;padding:12px 14px;border-radius:10px;background:var(--red-soft);color:var(--h-fg-7a1a13);font-size:13.5px;line-height:1.6}
.gw[data-state=check] .gw-ic{animation:gwBlink 1.4s ease-in-out infinite alternate}
@keyframes gwFlow{to{background-position:36px 0}}
@keyframes gwPulse{0%{box-shadow:0 0 0 0 rgba(20,164,77,.55)}100%{box-shadow:0 0 0 12px rgba(20,164,77,0)}}
@keyframes gwBlink{50%{opacity:.35}}
@media (max-width:760px){
  .gw-flow{flex-direction:column;align-items:center}
  .gw-node{flex:none} .gw-link{width:4px;height:34px;min-width:0;margin:6px 0;top:0;flex:none}
  .gw-link.ok{background:repeating-linear-gradient(180deg,var(--brand) 0 10px,transparent 10px 18px);background-size:4px 36px;animation:gwFlowY 1s linear infinite}
  .gw-link.warn{background:repeating-linear-gradient(180deg,var(--amber) 0 10px,transparent 10px 18px)}
  .gw-link.bad{background:repeating-linear-gradient(180deg,var(--red) 0 4px,transparent 4px 10px)}
}
@keyframes gwFlowY{to{background-position:0 36px}}
@media (prefers-reduced-motion:reduce){.gw-link.ok,.gw-pill i,.gw[data-state=check] .gw-ic{animation:none}}

/* Admin > Updates */
.upd-ver{font-size:13px;padding:5px 14px}
.upd-reqs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.upd-req{font-size:12.5px;padding:4px 11px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--muted)}
.upd-req.ok b{color:var(--brand)} .upd-req.bad{border-color:var(--h-bg-f4c7c3);background:var(--red-soft);color:var(--red)}
.upd-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 28px;counter-reset:updstep}
.upd-step{position:relative;text-align:center;font-size:12px;font-weight:600;color:var(--soft);padding-top:42px}
.upd-step::before{counter-increment:updstep;content:counter(updstep);position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--card);border:2px solid var(--line);color:var(--soft);z-index:1}
.upd-step::after{content:'';position:absolute;top:15px;left:calc(50% + 20px);width:calc(100% - 34px);height:2px;background:var(--line)}
.upd-step:last-child::after{display:none}
.upd-step.active{color:var(--ink)} .upd-step.active::before{border-color:var(--brand);color:var(--brand-dark);box-shadow:0 0 0 4px var(--brand-soft)}
.upd-step.done{color:var(--brand-dark)} .upd-step.done::before{content:'\2713';background:var(--brand);border-color:var(--brand);color:#fff} .upd-step.done::after{background:var(--brand)}
.upd-step.error{color:var(--red)} .upd-step.error::before{content:'!';background:var(--red);border-color:var(--red);color:#fff}
.upd-panel{display:none} .upd-panel.show{display:block}
.upd-panel h3{margin:0 0 4px;font-size:16px}
.upd-desc{margin:0 0 14px;max-width:720px;color:var(--muted);font-size:14px}
.upd-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.upd-code{flex:1;min-width:240px;max-width:460px;padding:9px 12px;border:1px solid var(--h-bg-cfd9d4);border-radius:9px;font:13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.3px}
.upd-dom{margin-top:10px;color:var(--muted);font-size:13px}
.upd-box{display:none;margin-top:16px;border-radius:10px;padding:13px 16px;font-size:14px;border:1px solid}
.upd-box.show{display:block}
.upd-box.ok{background:var(--brand-soft);border-color:var(--h-bg-bfe6cd)} .upd-box.err{background:var(--red-soft);border-color:var(--h-bg-f4c7c3);color:var(--h-fg-8f1d15)}
.upd-box.info{background:var(--blue-soft);border-color:var(--h-bg-c5d8ff);color:var(--h-fg-1c3f94)} .upd-box.warn{background:var(--amber-soft);border-color:var(--h-bg-f5d9a6);color:var(--h-fg-7a3d03)}
.upd-box pre.code{margin:10px 0 0}
.upd-tick{font-weight:700;color:var(--brand-dark);margin-bottom:8px}
.upd-kv{display:grid;grid-template-columns:150px 1fr;gap:5px 12px} .upd-kv span:nth-child(odd){color:var(--muted)}
.upd-sha{font:11.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
.upd-log{margin-top:8px;font:12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.upd-note{margin-top:10px;color:var(--muted)} .upd-note.warn{color:var(--h-fg-7a3d03)}
.upd-next{display:none;margin-top:18px;gap:10px} .upd-next.show{display:flex}
.upd-rel{padding:16px 0;border-bottom:1px solid var(--line)} .upd-rel:first-of-type{padding-top:4px} .upd-rel:last-child{border-bottom:0;padding-bottom:0}
.upd-rel-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px} .upd-date{margin-left:auto;color:var(--soft);font-size:12.5px}
.upd-rel-body{font-size:14px;color:var(--muted);line-height:1.65} .upd-rel-body ul,.upd-rel-body ol{padding-left:20px;margin:6px 0} .upd-rel-body p{margin:6px 0}
@media (max-width:760px){.upd-steps{grid-template-columns:repeat(4,1fr);row-gap:18px}.upd-step::after{display:none}.upd-kv{grid-template-columns:110px 1fr}}

/* Gateway page: start / restart */
.gw-act{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.gw-help.ok{background:var(--brand-soft);color:var(--h-fg-0d5a2b)}

/* Gateway page: log box */
.gw-log{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.gw-log[hidden]{display:none}
.gw-log-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 6px}
.gw-log-tabs,.gw-log-btns{display:flex;gap:6px} .gw-log-btns{margin-left:auto}
.gw-log-tabs .btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.gw-pre{margin:6px 0 0;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:12px}
.gw-proc{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px;font-size:12.5px;color:var(--muted)}
.gw-proc span{display:inline-flex;gap:6px;padding:3px 10px;border-radius:99px;background:var(--gray-soft)}
.gw-proc i{font-style:normal;color:var(--soft)} .gw-proc b{font-weight:600;color:var(--ink)}

/* Sidebar: installed version next to Updates */
.sb-ver{margin-left:auto;background:var(--brand);color:#fff;border-radius:99px;font-size:11px;padding:1px 9px;font-weight:700;letter-spacing:.2px}
/* ===== Light / dark theme =====
   Every light colour above went through a --h-* variable (light value in :root, dark value below).
   Switch: <html data-theme="dark">, set by the sun/moon button in the top bar and remembered in the browser. */
:root{--h-bg-56667a:#56667a;--h-bg-7b8d86:#7b8d86;--h-bg-7f66ff:#7f66ff;--h-bg-8b6cf0:#8b6cf0;--h-bg-9db3a9:#9db3a9;--h-bg-a8b3ba:#a8b3ba;--h-bg-a9e6ef:#a9e6ef;--h-bg-b3eaf3:#b3eaf3;--h-bg-b4ece3:#b4ece3;--h-bg-b8c4be:#b8c4be;--h-bg-b9c9c1:#b9c9c1;--h-bg-bcdcf7:#bcdcf7;--h-bg-bfe6cd:#bfe6cd;--h-bg-bfe8cf:#bfe8cf;--h-bg-c5ccd0:#c5ccd0;--h-bg-c5d8ff:#c5d8ff;--h-bg-c7d6cf:#c7d6cf;--h-bg-c7d7fb:#c7d7fb;--h-bg-c9ccf8:#c9ccf8;--h-bg-c9d3ce:#c9d3ce;--h-bg-c9d6d0:#c9d6d0;--h-bg-cdd5d1:#cdd5d1;--h-bg-cfd9d4:#cfd9d4;--h-bg-d3ddd8:#d3ddd8;--h-bg-d6d9de:#d6d9de;--h-bg-d9fdd3:#d9fdd3;--h-bg-dccbf7:#dccbf7;--h-bg-dcfce7:#dcfce7;--h-bg-dfe5ec:#dfe5ec;--h-bg-e0f6fa:#e0f6fa;--h-bg-e1e5e8:#e1e5e8;--h-bg-e2f6e9:#e2f6e9;--h-bg-e3e6ee:#e3e6ee;--h-bg-e3e8ff:#e3e8ff;--h-bg-e4e7e9:#e4e7e9;--h-bg-e6defb:#e6defb;--h-bg-e6e8ee:#e6e8ee;--h-bg-e6e9ec:#e6e9ec;--h-bg-e7f3ef:#e7f3ef;--h-bg-e8fafd:#e8fafd;--h-bg-e9edef:#e9edef;--h-bg-e9f6ef:#e9f6ef;--h-bg-e9fbff:#e9fbff;--h-bg-eaf1ff:#eaf1ff;--h-bg-eaf7ef:#eaf7ef;--h-bg-ecfdfa:#ecfdfa;--h-bg-eef0ef:#eef0ef;--h-bg-eef0f5:#eef0f5;--h-bg-eef0ff:#eef0ff;--h-bg-eef2ef:#eef2ef;--h-bg-eef3f0:#eef3f0;--h-bg-eef3ff:#eef3ff;--h-bg-eef7ff:#eef7ff;--h-bg-eefbf3:#eefbf3;--h-bg-efeae2:#efeae2;--h-bg-f0c4f5:#f0c4f5;--h-bg-f0eaff:#f0eaff;--h-bg-f0f1f6:#f0f1f6;--h-bg-f0f2f5:#f0f2f5;--h-bg-f1e3b4:#f1e3b4;--h-bg-f1edfd:#f1edfd;--h-bg-f1f2f6:#f1f2f6;--h-bg-f2e08a:#f2e08a;--h-bg-f3e5ff:#f3e5ff;--h-bg-f3f4f6:#f3f4f6;--h-bg-f4c7c3:#f4c7c3;--h-bg-f4f8f6:#f4f8f6;--h-bg-f5d9a6:#f5d9a6;--h-bg-f5f6f6:#f5f6f6;--h-bg-f6f0ff:#f6f0ff;--h-bg-f6f6f6:#f6f6f6;--h-bg-f6f8f6:#f6f8f6;--h-bg-f6f9f7:#f6f9f7;--h-bg-f7c1bc:#f7c1bc;--h-bg-f7faf8:#f7faf8;--h-bg-f8faf9:#f8faf9;--h-bg-f9d2a8:#f9d2a8;--h-bg-fafafa:#fafafa;--h-bg-fafbfa:#fafbfa;--h-bg-fafcfb:#fafcfb;--h-bg-fcfdfc:#fcfdfc;--h-bg-fdf0ff:#fdf0ff;--h-bg-fee2e2:#fee2e2;--h-bg-ffe5e0:#ffe5e0;--h-bg-fff0d6:#fff0d6;--h-bg-fff0ef:#fff0ef;--h-bg-fff3cd:#fff3cd;--h-bg-fff3e6:#fff3e6;--h-bg-fff8d6:#fff8d6;--h-bg-fffdf5:#fffdf5;--h-fg-027eb5:#027eb5;--h-fg-0b5d4b:#0b5d4b;--h-fg-0b7a8a:#0b7a8a;--h-fg-0d5a2b:#0d5a2b;--h-fg-0e7490:#0e7490;--h-fg-0f766e:#0f766e;--h-fg-111b21:#111b21;--h-fg-12703a:#12703a;--h-fg-166534:#166534;--h-fg-1c3f94:#1c3f94;--h-fg-1d6fb8:#1d6fb8;--h-fg-1e3a8a:#1e3a8a;--h-fg-1f2430:#1f2430;--h-fg-1f7a4d:#1f7a4d;--h-fg-2a2d52:#2a2d52;--h-fg-3c4c46:#3c4c46;--h-fg-41525d:#41525d;--h-fg-4a5a63:#4a5a63;--h-fg-4b5563:#4b5563;--h-fg-53bdeb:#53bdeb;--h-fg-54656f:#54656f;--h-fg-667781:#667781;--h-fg-6a2c9c:#6a2c9c;--h-fg-6fae8a:#6fae8a;--h-fg-7a1a13:#7a1a13;--h-fg-7a3a05:#7a3a05;--h-fg-7a3d03:#7a3d03;--h-fg-7a5b00:#7a5b00;--h-fg-8696a0:#8696a0;--h-fg-8a5a00:#8a5a00;--h-fg-8f1d15:#8f1d15;--h-fg-991b1b:#991b1b;--h-fg-9aa7b5:#9aa7b5;--h-fg-a21caf:#a21caf;--h-fg-a33a24:#a33a24;--h-fg-a9d2c1:#a9d2c1;--h-fg-b3c0ba:#b3c0ba;--h-fg-b42318:#b42318;--h-fg-b4540a:#b4540a;--h-fg-b91c1c:#b91c1c;--h-fg-cdd6d2:#cdd6d2;--h-fg-cfe8dd:#cfe8dd;--h-fg-d8f5e3:#d8f5e3;}
html[data-theme=dark]{color-scheme:dark;
--ink:#e5eee9;--muted:#9bafa6;--soft:#71867c;--line:#24322c;--bg:#0b1310;--card:#121b17;
--brand-soft:rgba(20,164,77,.18);--blue-soft:rgba(59,130,246,.16);--amber-soft:rgba(217,119,6,.18);--red-soft:rgba(220,60,50,.18);--gray-soft:#1a2520;
--amber:#e8912d;--red:#e5534b;--blue:#5b8def;
--brand-dark:color-mix(in srgb,var(--brand) 62%,#fff);
--shadow:0 1px 2px rgba(0,0,0,.45),0 6px 22px rgba(0,0,0,.4);
--h-bg-56667a:#4c5561;--h-bg-7b8d86:#474e4b;--h-bg-7f66ff:#1d115e;--h-bg-8b6cf0:#281859;--h-bg-9db3a9:#36413c;--h-bg-a8b3ba:#33393c;--h-bg-a9e6ef:#173c42;--h-bg-b3eaf3:#14393f;--h-bg-b4ece3:#193c37;--h-bg-b8c4be:#2f3532;--h-bg-b9c9c1:#2d3531;--h-bg-bcdcf7:#11293c;--h-bg-bfe6cd:#1d3626;--h-bg-bfe8cf:#1c3726;--h-bg-c5ccd0:#2a2e30;--h-bg-c5d8ff:#0b1b3c;--h-bg-c7d6cf:#27302c;--h-bg-c7d7fb:#0e1b39;--h-bg-c9ccf8:#101337;--h-bg-c9d3ce:#282f2c;--h-bg-c9d6d0:#272f2b;--h-bg-cdd5d1:#282d2a;--h-bg-cfd9d4:#262c29;--h-bg-d3ddd8:#242b27;--h-bg-d6d9de:#242629;--h-bg-d9fdd3:#12350c;--h-bg-dccbf7:#1f1136;--h-bg-dcfce7:#0d3119;--h-bg-dfe5ec:#1c2128;--h-bg-e0f6fa:#0f292e;--h-bg-e1e5e8:#1f2325;--h-bg-e2f6e9:#142a1c;--h-bg-e3e6ee:#1b1e26;--h-bg-e3e8ff:#091031;--h-bg-e4e7e9:#1f2224;--h-bg-e6defb:#170e30;--h-bg-e6e8ee:#1c1e24;--h-bg-e6e9ec:#1d2023;--h-bg-e7f3ef:#172621;--h-bg-e8fafd:#0c282d;--h-bg-e9edef:#1c2022;--h-bg-e9f6ef:#15261d;--h-bg-e9fbff:#08282f;--h-bg-eaf1ff:#08152f;--h-bg-eaf7ef:#14261b;--h-bg-ecfdfa:#0c2b25;--h-bg-eef0ef:#1c1f1e;--h-bg-eef0f5:#171a22;--h-bg-eef0ff:#080c2d;--h-bg-eef2ef:#1b201c;--h-bg-eef3f0:#1a211c;--h-bg-eef3ff:#08132d;--h-bg-eef7ff:#081c2d;--h-bg-eefbf3:#102719;--h-bg-efeae2:#27221a;--h-bg-f0c4f5:#341338;--h-bg-f0eaff:#13082f;--h-bg-f0f1f6:#171921;--h-bg-f0f2f5:#181b20;--h-bg-f1e3b4:#3e3416;--h-bg-f1edfd:#140c2a;--h-bg-f1f2f6:#181920;--h-bg-f2e08a:#4e4516;--h-bg-f3e5ff:#1e0930;--h-bg-f3f4f6:#191a1e;--h-bg-f4c7c3:#381714;--h-bg-f4f8f6:#171f1b;--h-bg-f5d9a6:#443313;--h-bg-f5f6f6:#1a1c1c;--h-bg-f6f0ff:#16082c;--h-bg-f6f6f6:#1b1b1b;--h-bg-f6f8f6:#181d18;--h-bg-f6f9f7:#161e19;--h-bg-f7c1bc:#3c1511;--h-bg-f7faf8:#161e18;--h-bg-f8faf9:#161c19;--h-bg-f9d2a8:#442b11;--h-bg-fafafa:#191919;--h-bg-fafbfa:#171b17;--h-bg-fafcfb:#141d19;--h-bg-fcfdfc:#151b15;--h-bg-fdf0ff:#27082c;--h-bg-fee2e2:#300a0a;--h-bg-ffe5e0:#320f09;--h-bg-fff0d6:#362509;--h-bg-fff0ef:#2d0a08;--h-bg-fff3cd:#392e0a;--h-bg-fff3e6:#301d08;--h-bg-fff8d6:#362e09;--h-bg-fffdf5:#2b2408;--h-fg-027eb5:#53c3f4;--h-fg-0b5d4b:#a6f0e0;--h-fg-0b7a8a:#7bdfee;--h-fg-0d5a2b:#a9eec4;--h-fg-0e7490:#76d1ea;--h-fg-0f766e:#8eebe4;--h-fg-111b21:#dfe8ed;--h-fg-12703a:#94e8b8;--h-fg-166534:#9ee5b9;--h-fg-1c3f94:#7191dd;--h-fg-1d6fb8:#569ddc;--h-fg-1e3a8a:#7a94dc;--h-fg-1f2430:#d0d4df;--h-fg-1f7a4d:#8adbb3;--h-fg-2a2d52:#afb2d3;--h-fg-3c4c46:#b4c2bd;--h-fg-41525d:#a3b3bd;--h-fg-4a5a63:#9dacb4;--h-fg-4b5563:#9da6b3;--h-fg-53bdeb:#50b6e2;--h-fg-54656f:#91a1aa;--h-fg-667781:#8e9ca4;--h-fg-6a2c9c:#a069cd;--h-fg-6fae8a:#7fb395;--h-fg-7a1a13:#e7908a;--h-fg-7a3a05:#f4bb8b;--h-fg-7a3d03:#f6bf8b;--h-fg-7a5b00:#f9dd8b;--h-fg-8696a0:#8e9ca4;--h-fg-8a5a00:#f8cd7c;--h-fg-8f1d15:#e47d76;--h-fg-991b1b:#de6c6c;--h-fg-9aa7b5:#8b98a7;--h-fg-a21caf:#d057dc;--h-fg-a33a24:#d57662;--h-fg-a9d2c1:#7cb69e;--h-fg-b3c0ba:#90a29a;--h-fg-b42318:#df5d53;--h-fg-b4540a:#ec9654;--h-fg-b91c1c:#dd5555;--h-fg-cdd6d2:#90a29a;--h-fg-cfe8dd:#79b99d;--h-fg-d8f5e3:#63cf8c;}
html[data-theme=dark] .btn:hover,html[data-theme=dark] .in-send:hover,html[data-theme=dark] .filebox:hover .fb-btn,html[data-theme=dark] .dp-day.sel:hover,html[data-theme=dark] .dp-done:hover{background:color-mix(in srgb,var(--brand) 86%,#fff)}
html[data-theme=dark]{--h-bg-efeae2:#0d171c}
html[data-theme=dark] ::placeholder{color:var(--soft);opacity:1}
html[data-theme=dark] .btn.secondary{color:var(--ink)}
html[data-theme=dark] .btn.secondary:hover{color:var(--ink)}
html[data-theme=dark] code.inline{color:var(--ink)}

/* theme button (top bar) */
.theme-btn{border:0;background:none;cursor:pointer;color:var(--muted);padding:8px;border-radius:10px;display:grid;place-items:center;line-height:0}
.theme-btn:hover{background:var(--gray-soft);color:var(--ink)}
.theme-btn .ti-sun{display:none}
html[data-theme=dark] .theme-btn .ti-moon{display:none}
html[data-theme=dark] .theme-btn .ti-sun{display:block}
.linklike{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--brand-dark);text-decoration:underline;cursor:pointer}
.upd-dbpill{font:inherit;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.upd-dbpill:hover{border-color:var(--brand)}
.upd-dbpill.warn{border-color:var(--amber);background:var(--amber-soft);color:var(--ink)}
.upd-dbpill.warn b{color:var(--amber)}
.upd-i{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;font-size:10px;font-style:italic;font-family:Georgia,serif;line-height:1;opacity:.7}
#dbcard[hidden]{display:none}