/* ===== WA Inbox — WhatsApp-like UI ===== */
:root{--wa-dark:#075e54;--wa:#128c7e;--wa-light:#25d366;--wa-bg:#efeae2;--out:#dcf8c6;--in:#fff;--line:#e5e9f2;--muted:#66728c;--ink:#111b21;--bg:#f0f2f5}
body.inbox{overflow:hidden;background:var(--bg)}
body.page .top{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:var(--wa-dark);color:#fff;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;color:#fff;text-decoration:none}
.logo{width:34px;height:34px;border-radius:10px;background:var(--wa-light);color:#053b34;display:inline-flex;align-items:center;justify-content:center}
.topnav{display:flex;gap:.2rem;margin-left:.5rem}
.topnav a{color:rgba(255,255,255,.8);text-decoration:none;font-weight:600;font-size:.9rem;padding:.4rem .7rem;border-radius:8px}
.topnav a:hover,.topnav a.on{background:rgba(255,255,255,.14);color:#fff}
@media(max-width:640px){.topnav a{padding:.35rem .5rem;font-size:.82rem}}
.login-wrap{background:linear-gradient(160deg,#075e54 0%,#128c7e 60%,#25d366 100%)}
.login-logo{background:#fff;color:var(--wa-dark);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.btn-primary{background:var(--wa);box-shadow:0 6px 16px rgba(18,140,126,.3)}
.btn-primary:hover{box-shadow:0 8px 20px rgba(18,140,126,.4)}

/* layout */
.wa{display:flex;height:100vh;height:100dvh;overflow:hidden}
.wa-list{width:380px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.wa-chat{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--wa-bg);position:relative}
.wa-chat::before{content:"";position:absolute;inset:0;opacity:.06;background-image:radial-gradient(#0a0 1px,transparent 1px),radial-gradient(#0a0 1px,transparent 1px);background-size:22px 22px;background-position:0 0,11px 11px;pointer-events:none}
@media(max-width:767px){
  .wa-list{width:100%;border:0}
  .wa-chat{position:fixed;inset:0;transform:translateX(100%);transition:transform .18s;z-index:30}
  .wa.show-chat .wa-chat{transform:none}
}
.wa-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem .8rem .6rem 1rem;background:var(--wa-dark);color:#fff;padding-top:calc(.6rem + env(safe-area-inset-top))}
.wa-me{display:flex;align-items:center;gap:.7rem;min-width:0}
.wa-title{font-weight:800;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-sub{font-size:.72rem;color:rgba(255,255,255,.7)}
.wa-actions{display:flex;gap:.2rem;align-items:center}
.ib{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.ib:hover{background:rgba(0,0,0,.08)}
.wa-head .ib:hover{background:rgba(255,255,255,.14)}
.ib.send{background:var(--wa);color:#fff}
.av{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;background:#dfe5e7;color:#3b4a54}
.av-me{background:#fff;color:var(--wa-dark);width:38px;height:38px}
.wa-warn{display:block;background:#fff3cd;color:#7a5200;padding:.5rem .9rem;font-size:.82rem;font-weight:600;text-decoration:none}
.wa-search{display:flex;align-items:center;gap:.5rem;margin:.6rem .8rem .3rem;background:#f0f2f5;border-radius:10px;padding:.35rem .7rem;color:var(--muted)}
.wa-search input{border:0;background:transparent;flex:1;font-size:.92rem;outline:none;color:var(--ink)}
.wa-filters{display:flex;gap:.35rem;padding:.35rem .8rem .5rem;overflow-x:auto;scrollbar-width:none}
.wa-filters::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.28rem .7rem;font-size:.75rem;font-weight:600;color:#3b4a54;white-space:nowrap;cursor:pointer}
.chip.on{background:#d9fdd3;border-color:#25d366;color:#0b5c3a}
.lb-amber{border-color:#fbbf24}.lb-green{border-color:#34d399}.lb-blue{border-color:#60a5fa}.lb-red{border-color:#f87171}.lb-purple{border-color:#a78bfa}.lb-gray{border-color:#9ca3af}
.wa-convs{flex:1;overflow-y:auto;overscroll-behavior:contain}
.wa-empty{padding:2rem 1rem;text-align:center;color:var(--muted);font-size:.9rem}
.conv{display:flex;align-items:center;gap:.8rem;padding:.65rem .9rem;border-bottom:1px solid #f0f2f5;cursor:pointer;text-decoration:none;color:inherit}
.conv:hover{background:#f5f6f6}.conv.on{background:#e9edef}
.conv .m{flex:1;min-width:0}
.conv .t{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.conv .n{font-weight:600;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .tm{font-size:.72rem;color:var(--muted);flex-shrink:0}
.conv.unread .tm{color:var(--wa-light);font-weight:700}
.conv .p{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.1rem}
.conv .lst{font-size:.84rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv.unread .lst{color:var(--ink);font-weight:500}
.badge{background:var(--wa-light);color:#fff;font-size:.7rem;font-weight:700;min-width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0}
.tag{font-size:.64rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:#eef2f6;color:#3b4a54;margin-left:.3rem;white-space:nowrap}
.tag.amber{background:#fef3c7;color:#92400e}.tag.green{background:#d1fae5;color:#065f46}.tag.blue{background:#dbeafe;color:#1e40af}.tag.red{background:#fee2e2;color:#991b1b}.tag.purple{background:#ede9fe;color:#5b21b6}.tag.gray{background:#f1f5f9;color:#475569}
.conv .pin{font-size:.7rem;margin-left:.2rem}

/* blank */
.wa-blank{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:2rem;position:relative}
.wa-blank h2{color:#41525d;font-size:1.4rem;margin:.6rem 0 .3rem}
.blank-ic{color:#8696a0}
.wa-blank .push-banner{margin-top:1.5rem;max-width:460px;text-align:left}

/* chat pane */
.wa-pane{display:flex;flex-direction:column;height:100%;position:relative}
.wa-chead{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;background:#f0f2f5;border-bottom:1px solid var(--line);padding-top:calc(.45rem + env(safe-area-inset-top))}
@media(min-width:768px){.wa-chead{padding-top:.45rem}}
.wa-cname{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.4rem}
.wa-csub{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-open{color:#0b5c3a;font-weight:600}.win-closed{color:#b45309;font-weight:600}
.wa-msgs{flex:1;overflow-y:auto;padding:.8rem 4% 1rem;position:relative;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.day{display:flex;justify-content:center;margin:.6rem 0}
.day span{background:#fff;color:#54656f;font-size:.72rem;font-weight:600;padding:.25rem .7rem;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.msg{display:flex;margin:.15rem 0;max-width:78%}
.msg.out{margin-left:auto;justify-content:flex-end}
.bub{background:var(--in);border-radius:10px;padding:.4rem .55rem .3rem;box-shadow:0 1px 1px rgba(0,0,0,.1);position:relative;min-width:80px;max-width:100%;word-wrap:break-word;overflow-wrap:anywhere;font-size:.93rem;line-height:1.4}
.msg.out .bub{background:var(--out)}
.msg.in:not(.same) .bub{border-top-left-radius:2px}.msg.out:not(.same) .bub{border-top-right-radius:2px}
.bub .txt{white-space:pre-wrap}
.bub .meta{display:flex;justify-content:flex-end;align-items:center;gap:.25rem;font-size:.66rem;color:#667781;margin-top:.15rem;margin-left:.6rem;float:right;position:relative;top:.2rem}
.tick{display:inline-flex;align-items:center;color:#8696a0;margin-left:.15rem}.tick svg{width:16px;height:11px;display:block}
.tick.read{color:#53bdeb}.tick.failed{color:#e11d48;font-weight:800}.tick.pending svg{width:12px;height:12px}
.conv .lst .tick{margin:0 .2rem 0 0;vertical-align:-1px}
.bub .sender{font-size:.68rem;font-weight:700;color:var(--wa);margin-bottom:.1rem}
.bub .err{font-size:.7rem;color:#e11d48;margin-top:.2rem;clear:both}
.bub img.pic{max-width:min(320px,70vw);max-height:340px;object-fit:cover;border-radius:8px;display:block;cursor:pointer;margin-bottom:.2rem}
.bub video{max-width:min(320px,70vw);max-height:340px;object-fit:cover;border-radius:8px;display:block}
.bub audio{max-width:min(280px,65vw);display:block}
.bub .doc{display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.05);padding:.5rem .6rem;border-radius:8px;text-decoration:none;color:inherit;font-weight:600;font-size:.85rem}
.bub .doc .di{width:32px;height:32px;border-radius:8px;background:#e11d48;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;flex-shrink:0}
.bub .tplb{border-left:3px solid var(--wa);padding-left:.4rem;font-style:italic;color:#3b4a54}
.bub .quote{border-left:3px solid var(--wa);background:rgba(0,0,0,.05);padding:.3rem .5rem;border-radius:6px;font-size:.78rem;color:#54656f;margin-bottom:.3rem;cursor:pointer;max-height:60px;overflow:hidden}
.bub .loc{text-decoration:none;color:var(--wa);font-weight:600}
.msg{position:relative}
.bub .fwd{font-size:.72rem;color:#8696a0;font-style:italic;margin-bottom:.15rem}
.bub .star{font-size:.62rem;margin-right:.15rem}
.bub .dd{position:absolute;top:2px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.85);color:#54656f;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.msg:hover .bub .dd{display:inline-flex}
@media(hover:none){.bub .dd{display:none!important}}
.reacts{display:flex;gap:.2rem;margin-top:-.4rem;margin-bottom:.3rem;position:relative;z-index:1}
.msg.out .reacts{justify-content:flex-end;margin-right:.4rem}.msg.in .reacts{margin-left:.4rem}
.reacts span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 .35rem;font-size:.75rem;box-shadow:0 1px 2px rgba(0,0,0,.12);cursor:pointer}
.msg{flex-direction:column}
.msg.sel .bub{outline:2px solid var(--wa-light)}
.wa.selecting .msg{cursor:pointer;padding-left:32px;position:relative}
.wa.selecting .msg::before{content:"";position:absolute;left:4px;top:8px;width:20px;height:20px;border:2px solid #8696a0;border-radius:50%;background:#fff}
.wa.selecting .msg.sel::before{background:var(--wa-light);border-color:var(--wa-light);content:"✓";color:#fff;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.wa.selecting .msg.out{max-width:calc(78% + 32px)}
.bub .ibtns{display:flex;flex-direction:column;gap:.25rem;margin-top:.4rem}
.bub .ibtns span{background:#fff;color:#027eb5;text-align:center;padding:.35rem;border-radius:8px;font-weight:600;font-size:.85rem;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bub .ihead{font-weight:700;margin-bottom:.15rem}
.bub .card{display:flex;align-items:center;gap:.6rem;background:rgba(0,0,0,.05);padding:.5rem .6rem;border-radius:8px;border:0;box-shadow:none}
.bub .card .av{width:36px;height:36px;font-size:.8rem}
.bub .stk{max-width:160px;max-height:160px;display:block}
.load-more{text-align:center;padding:.4rem;font-size:.75rem;color:var(--muted)}
.hl .bub{animation:hl 1.4s ease}
@keyframes hl{0%{box-shadow:0 0 0 3px var(--wa-light)}100%{box-shadow:0 1px 1px rgba(0,0,0,.1)}}
.wa-selbar{display:flex;align-items:center;gap:.3rem;padding:.35rem .6rem;background:#fff;border-bottom:1px solid var(--line)}
.wa-msgresults{flex:1;overflow-y:auto;background:#fff}
.wa-list{position:relative}
.res-list{display:flex;flex-direction:column;gap:.3rem;max-height:50vh;overflow:auto}
.res{padding:.5rem .7rem;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:.85rem}
.res:hover{background:#f5f6f6}.res .who{font-weight:700;font-size:.78rem;color:var(--wa)}.res .when{float:right;color:var(--muted);font-size:.7rem}
.res .snip{color:#3b4a54;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-msgresults .res{border:0;border-bottom:1px solid #f0f2f5;border-radius:0}
.wa-msgresults .rh{padding:.5rem .9rem;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;background:#f0f2f5}

/* attach sheet */
.attach-sheet{position:absolute;bottom:52px;left:0;background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.22);padding:.4rem;z-index:55;min-width:230px;display:grid;grid-template-columns:1fr}
.at{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border-radius:10px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none}
.at:hover{background:#f5f6f6}
.ai{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex-shrink:0}
/* emoji */
.emoji-panel{background:#fff;border-top:1px solid var(--line);height:240px;display:flex;flex-direction:column}
.emoji-tabs{display:flex;gap:.2rem;padding:.3rem .5rem;border-bottom:1px solid #f0f2f5;overflow-x:auto}
.emoji-tabs button{border:0;background:transparent;font-size:1.05rem;padding:.2rem .45rem;border-radius:8px;cursor:pointer}.emoji-tabs button.on{background:#e9edef}
.emoji-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));padding:.3rem}
.emoji-grid span{font-size:1.5rem;text-align:center;cursor:pointer;padding:.15rem;border-radius:8px;line-height:1.3}.emoji-grid span:hover{background:#f0f2f5}
/* bubble menu + react bar */
.bub-menu{position:fixed;z-index:90;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:.3rem 0;min-width:190px}
.bub-menu a{display:block;padding:.5rem .9rem;font-size:.88rem;cursor:pointer;color:var(--ink)}.bub-menu a:hover{background:#f5f6f6}.bub-menu a.danger{color:#e11d48}
.react-bar{position:fixed;z-index:91;background:#fff;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:.25rem .4rem;display:flex;gap:.1rem}
.react-bar span{font-size:1.4rem;padding:.15rem .3rem;cursor:pointer;border-radius:50%;transition:transform .1s}.react-bar span:hover{transform:scale(1.3)}.react-bar .plus{font-size:1.1rem;background:#f0f2f5;width:34px;text-align:center;line-height:34px;padding:0}
/* media send */
.modal-box.wide{max-width:640px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;max-height:50vh;overflow:auto}
.mi{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f8fafc}
.mi img,.mi video{width:100%;height:110px;object-fit:cover;display:block}
.mi .df{height:110px;display:flex;align-items:center;justify-content:center;font-size:2rem}
.mi input{width:100%;border:0;border-top:1px solid var(--line);padding:.35rem .4rem;font-size:.75rem;outline:none}
.mi .x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:0;cursor:pointer;font-size:.75rem}
.mi .st{position:absolute;top:4px;left:4px;font-size:.7rem;background:rgba(0,0,0,.6);color:#fff;padding:0 .35rem;border-radius:6px}
.mi.done{opacity:.55}.mi.fail{outline:2px solid #e11d48}
/* voice rec */
.wa-rec{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;background:#f0f2f5;border-top:1px solid var(--line);padding-bottom:calc(.4rem + env(safe-area-inset-bottom))}
.rec-dot{width:10px;height:10px;border-radius:50%;background:#e11d48;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.btnMicOn{background:#e11d48!important}
/* info */
.info-top{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}.av.big{width:64px;height:64px;font-size:1.3rem}
.info-actions{display:flex;flex-wrap:wrap;gap:.35rem}
.info-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.3rem;max-height:30vh;overflow:auto}
.info-media img,.info-media video{width:100%;height:72px;object-fit:cover;border-radius:8px;cursor:pointer}
.info-media a.df{display:flex;align-items:center;justify-content:center;height:72px;background:#f0f2f5;border-radius:8px;font-size:.65rem;text-align:center;padding:.2rem;text-decoration:none;color:var(--ink);overflow:hidden}
.bc-prog{height:10px;background:#e9edef;border-radius:999px;overflow:hidden}.bc-prog div{height:100%;background:var(--wa-light);width:0;transition:width .3s}
.pick.row2{display:flex;justify-content:space-between}.pick .cnt{font-weight:400}
.drop .wa-msgs{outline:3px dashed var(--wa-light);outline-offset:-6px}
.seg label{flex:1}
.wa-window{background:#fff3cd;color:#7a5200;font-size:.8rem;padding:.5rem .9rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.wa-reply{display:flex;align-items:center;gap:.5rem;background:#f0f2f5;padding:.4rem .8rem;border-left:4px solid var(--wa);font-size:.85rem}
.wa-quick{background:#fff;border-top:1px solid var(--line);max-height:220px;overflow-y:auto}
.qr{display:block;padding:.5rem .9rem;border-bottom:1px solid #f0f2f5;cursor:pointer;font-size:.86rem}
.qr:hover{background:#f5f6f6}.qr b{color:var(--wa);margin-right:.4rem}.qr span{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-compose{display:flex;align-items:flex-end;gap:.25rem;padding:.4rem .5rem;background:#f0f2f5;border-top:1px solid var(--line);padding-bottom:calc(.4rem + env(safe-area-inset-bottom))}
.wa-compose textarea{flex:1;border:1px solid #fff;border-radius:20px;padding:.6rem .9rem;font-size:.95rem;background:#fff;resize:none;max-height:120px;outline:none;font-family:inherit;line-height:1.35;margin:0 .1rem}
.wa-compose .ib{color:#54656f;align-self:flex-end}
.wa-compose .ib.send{color:#fff}

/* menus & modals */
.menu-wrap{position:relative}
.menu{position:absolute;top:44px;left:0;background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:220px;z-index:50;padding:.3rem 0;color:var(--ink)}
.menu.right{left:auto;right:0}
.menu a,.menu button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .9rem;font-size:.9rem;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:#f5f6f6}
.menu a.danger{color:#e11d48}
.modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;padding:1rem}
@media(min-width:640px){.modal{align-items:center}}
.modal-box{background:#fff;border-radius:18px;padding:1.2rem;width:100%;max-width:480px;max-height:85vh;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.modal-h{font-weight:800;font-size:1.05rem;margin-bottom:.7rem}
.tpl-list{display:flex;flex-direction:column;gap:.4rem;max-height:40vh;overflow:auto}
.tpl{border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;cursor:pointer;font-size:.85rem}
.tpl:hover,.tpl.on{border-color:var(--wa);background:#f0fdf4}
.tpl b{display:block;font-size:.9rem}.tpl .cnt{white-space:pre-wrap}
.pick-list{display:flex;flex-direction:column;gap:.3rem;max-height:50vh;overflow:auto}
.pick{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-weight:600}
.pick:hover{background:#f5f6f6}.pick.on{border-color:var(--wa);background:#f0fdf4}
.notes{display:flex;flex-direction:column;gap:.4rem;max-height:40vh;overflow:auto}
.note{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:.5rem .7rem;font-size:.88rem}
.note .cnt{display:flex;justify-content:space-between;margin-top:.2rem}
.img-view{position:relative;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.img-view img{max-width:95vw;max-height:80vh;border-radius:10px;background:#000}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#111b21;color:#fff;padding:.6rem 1rem;border-radius:999px;font-size:.85rem;z-index:80;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.toast.err{background:#b91c1c}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.15);border-top-color:var(--wa);border-radius:50%;animation:sp .8s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===== settings pages (body.page) ===== */
body.page{background:#f0f2f5}
body.page .top{background:var(--wa-dark);border-bottom:0;color:#fff}
body.page .top .brand{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:800;text-decoration:none}
body.page .top .logo{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center}
body.page .topnav{display:flex;gap:.2rem;margin-left:.6rem;overflow-x:auto}
body.page .topnav a{color:rgba(255,255,255,.8);font-weight:600;font-size:.85rem;padding:.4rem .7rem;border-radius:999px;text-decoration:none;white-space:nowrap}
body.page .topnav a.on,body.page .topnav a:hover{background:rgba(255,255,255,.16);color:#fff}
body.page .top .btn{padding:.3rem .7rem}
body.page .top .cnt{color:rgba(255,255,255,.75)}
.pill.lb-amber{background:#fef3c7;color:#92400e}.pill.lb-green{background:#d1fae5;color:#065f46}.pill.lb-blue{background:#dbeafe;color:#1e40af}.pill.lb-red{background:#fee2e2;color:#991b1b}.pill.lb-purple{background:#ede9fe;color:#5b21b6}.pill.lb-gray,.pill-gray{background:#f1f5f9;color:#475569}
.list .row{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-top:1px solid var(--line2)}
.list .row .av{width:38px;height:38px;font-size:.8rem}
.dot-ok{width:12px;height:12px;border-radius:50%;background:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.25);flex-shrink:0}
.copy-row{display:flex;gap:.5rem}.copy-row .inp{font-family:ui-monospace,monospace;font-size:.82rem}
.steps{padding-left:1.2rem;font-size:.86rem;color:#3b4a54;display:flex;flex-direction:column;gap:.35rem}
.steps li{list-style:decimal}
[hidden]{display:none!important}
body.page .top .brand span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
@media(max-width:640px){body.page .top{padding:.55rem .7rem;gap:.4rem}body.page .top .brand span:last-child{display:none}}
@media(max-width:767px){#btnSearch,#btnCall{display:none!important}}