/* admin/public/admin.css */
/* Layout modelled on the Sentrix / NOVA admin: dark top menu, sub-tab bar, left sub-menu, KPI cards, footer bar. */
:root{
  --accent:#F7771E;--accent-d:#D9620C;--accent-soft:#FFF1E6;--accent-line:#FBC79F;
  --navy:#342E86;--top:#2F2F33;--top-ink:#F2F2F2;--foot:#7A1235;
  --ink:#1F2433;--muted:#6B7280;--line:#E5E7EB;--bg:#F3F3F3;--panel:#FFFFFF;--panel2:#F8F8FA;--hover:#F4F4F6;
  --green:#1C9A5E;--red:#D93F3F;--amber:#C76A0A;--blue:#2E6BD8;--violet:#6D4FD1;
  --radius:12px;--shadow:0 1px 2px rgba(16,24,40,.05);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink:#E7E8EE;--muted:#9AA0B0;--line:#2C2F3A;--bg:#15161C;--panel:#1D1F27;--panel2:#23252F;--hover:#262935;
  --accent-soft:#3A2516;--accent-line:#7A4415;--top:#0F1015;--foot:#4A0B21;color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent-d)}
.hidden{display:none!important}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.ic{display:inline-grid;place-items:center;line-height:0}

/* ===================== login ===================== */
.login{min-height:100vh;position:relative;overflow:hidden;background:var(--bg);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:40px 6vw;gap:40px}
.blob{position:absolute;width:300px;height:220px;background:var(--accent);border-radius:46px;transform:rotate(-28deg);z-index:0}
.blob.tl{top:-90px;left:-70px}
.blob.tl::after{content:"";position:absolute;inset:-14px -22px 18px 22px;border:2px solid #74C2C1;border-radius:52px}
.blob.br{bottom:-110px;right:-60px}
.orbit-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.orbit{position:relative;width:440px;height:440px}
.orbit .ring{position:absolute;inset:40px;border:2px dashed color-mix(in srgb,var(--accent) 35%,transparent);border-radius:50%}
.orbit .core{position:absolute;inset:118px;background:var(--panel);border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.orbit .core-in{width:132px;height:132px;border-radius:50%;border:4px solid var(--accent-line);display:grid;place-items:center;background:var(--panel)}
.orbit .core-in img{width:96px;height:96px}
.orbit .spoke{position:absolute;left:50%;top:50%;width:2px;height:120px;background:color-mix(in srgb,var(--navy) 55%,transparent);transform-origin:top center}
.node{position:absolute;width:76px;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,-50%);font-size:12.5px;font-weight:600;color:var(--ink)}
.node .bub{width:64px;height:64px;border-radius:50%;background:var(--panel);border:2px solid var(--accent-line);display:grid;place-items:center;color:var(--accent-d);box-shadow:0 2px 6px rgba(0,0,0,.05)}
.orbit-cap{margin-top:12px;text-align:center;color:var(--muted);max-width:380px;font-size:14.5px}
.login-col{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.login-card{width:min(420px,100%);background:var(--panel);border-radius:22px;padding:36px 40px 34px;box-shadow:0 20px 60px rgba(0,0,0,.08)}
.wordmark{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.wordmark img{width:46px;height:46px}
.wordmark span{font-size:34px;font-weight:800;letter-spacing:-1px;color:var(--navy)}
.wordmark span b{color:var(--accent)}
:root[data-theme="dark"] .wordmark span{color:#C9C5FF}
.login-card h1{text-align:center;margin:0;font-size:30px;font-weight:700}
.login-card .sub{text-align:center;color:var(--muted);margin:6px 0 26px}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-weight:600;margin-bottom:6px}
.field>small{display:block;color:var(--muted);margin-top:5px;font-size:12.5px}
.inp,.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);background:#EEF3FC;border-radius:10px;padding:11px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
:root[data-theme="dark"] .inp,:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea{background:var(--panel2)}
.inp:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.field textarea{min-height:90px;resize:vertical;font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.pw{position:relative}.pw input{padding-right:48px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center}
.login-card .row-right{display:flex;justify-content:flex-end;margin:-6px 0 16px}
.login-card .row-right a{font-weight:600;text-decoration:none}
.btn-big{width:100%;border:0;border-radius:12px;padding:13px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn-big:hover{background:var(--accent-d)}
.btn-big:disabled{opacity:.6}
.err{color:var(--red);font-size:13.5px;margin:10px 0 0;min-height:1em}
.copy{margin-top:16px;color:var(--muted);font-size:12px}
@media (max-width:980px){.login{grid-template-columns:1fr}.orbit-wrap{display:none}}

/* ===================== shell ===================== */
.shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:40px;background:var(--top);color:var(--top-ink);display:flex;align-items:center;gap:4px;padding:0 12px;position:sticky;top:0;z-index:30}
.topbar .brand{display:flex;align-items:center;gap:6px;margin-right:12px;font-weight:800;font-size:19px;letter-spacing:-.5px;color:#fff;text-decoration:none}
.topbar .brand img{width:26px;height:26px}
.topbar .brand b{color:var(--accent)}
.topnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.topnav button{border:1.5px solid transparent;background:none;color:var(--top-ink);font-weight:700;font-size:12.5px;letter-spacing:.4px;padding:6px 12px;white-space:nowrap;border-radius:2px}
.topnav button:hover{background:rgba(255,255,255,.07)}
.topnav button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-d)}
.topbar .grow{flex:1}
.tb-icon{width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--top-ink);display:grid;place-items:center;position:relative}
.tb-icon:hover{background:rgba(255,255,255,.08)}
.tb-icon .dot{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.userbtn{display:flex;align-items:center;gap:8px;border:0;background:none;color:#fff;font-weight:600;padding:0 4px}
.userbtn .av{width:26px;height:26px;border-radius:50%;background:#3E3F47;display:grid;place-items:center;font-size:12px;font-weight:700}
.dropdown{position:absolute;top:38px;right:8px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);min-width:240px;padding:6px;z-index:60}
.dropdown .dd-head{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.dropdown .dd-head small{display:block;color:var(--muted)}
.dropdown button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:7px}
.dropdown button:hover{background:var(--hover)}
.dropdown .note{padding:9px 12px;font-size:13px;border-radius:7px}
.dropdown .note + .note{margin-top:4px}
.dropdown .note.warn{background:color-mix(in srgb,var(--amber) 12%,transparent)}
.dropdown .note.ok{background:color-mix(in srgb,var(--green) 12%,transparent)}

.subbar{height:42px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px;position:sticky;top:40px;z-index:20}
.sb-icon{width:30px;height:30px;border:0;border-radius:6px;background:none;color:var(--ink);display:grid;place-items:center}
.sb-icon:hover{background:var(--hover)}
.sb-sep{width:1px;height:20px;background:var(--line);margin:0 6px}
.subtabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subtabs button{border:0;background:none;padding:10px 12px;color:var(--muted);font-weight:500;white-space:nowrap;border-bottom:2px solid transparent}
.subtabs button:hover{color:var(--ink)}
.subtabs button.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.findbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:5px 8px 5px 10px;color:var(--muted);background:var(--panel);min-width:210px;cursor:text}
.findbox kbd{margin-left:auto;font-size:11px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:var(--panel2)}
.org{display:flex;align-items:center;gap:6px;margin-left:12px;font-weight:600;white-space:nowrap}
.org small{color:var(--muted);font-weight:400}

.body{flex:1;display:flex;min-height:0}
.sidemenu{width:224px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding:6px 0;position:sticky;top:82px;height:calc(100vh - 82px - 28px);overflow-y:auto}
.sidemenu button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 18px 7px 30px;color:var(--ink);border-left:3px solid transparent}
.sidemenu button:hover{background:var(--hover)}
.sidemenu button.on{background:color-mix(in srgb,var(--accent) 10%,transparent);border-left-color:var(--accent);font-weight:600}
.sidemenu .grp{padding:12px 18px 4px;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.5px}
.content{flex:1;min-width:0;padding:16px 18px 40px}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:4px}
.crumb span+span::before{content:"›";margin:0 6px}
.pagehead{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.pagehead h1{margin:0;font-size:22px;display:flex;align-items:center;gap:8px}
.pagehead p{margin:2px 0 0;color:var(--muted)}
.pagehead .actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search-in{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:var(--panel);min-width:240px}
.search-in input{border:0;outline:none;background:none;padding:8px 0;flex:1}
.btn{border:1.5px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 14px;font-weight:600;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent-d)}
.btn.soft{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-d)}
.btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.btn.sm{padding:4px 10px;font-size:12.5px;border-width:1px}
.btn:disabled{opacity:.5;cursor:default}

/* KPI cards: dashboard style (colored left edge + tint) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:18px}
.kpi{border:1px solid var(--line);border-left:4px solid var(--c);border-radius:var(--radius);padding:20px 22px;background:linear-gradient(105deg,var(--panel) 30%,color-mix(in srgb,var(--c) 9%,var(--panel)));box-shadow:var(--shadow)}
.kpi small{display:block;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}
.kpi b{display:block;font-size:28px;font-weight:700;margin-top:6px;letter-spacing:-.5px}
/* stat tiles: list-page style (icon + coloured number) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.tile{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:var(--panel);box-shadow:var(--shadow)}
.tile .t-ic{font-size:26px}
.tile b{display:block;font-size:22px;color:var(--c)}
.tile span{font-size:12.5px;color:var(--muted)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card-head h3{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}
.card-head .links{margin-left:auto;display:flex;gap:14px;font-size:12.5px}
.card-head .links button{border:0;background:none;color:var(--muted);padding:0}
.card-head .links button:hover{color:var(--accent-d)}
.card-head .links button.acc{color:var(--accent-d)}
.card-body{padding:16px 18px}
.card-title{padding:16px 18px 0;font-weight:600;font-size:15px}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}
@media (max-width:1100px){.grid-2{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:var(--panel2)}
tbody tr:hover{background:var(--hover)}
tbody tr:last-child td{border-bottom:0}
.tbl-wrap{overflow:auto}
td .sub{display:block;font-size:12px;color:var(--muted)}
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:2px 7px;border-radius:4px}
.tag.ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.tag.bad{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--red)}
.tag.warn{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}
.tag.info{background:color-mix(in srgb,var(--blue) 13%,transparent);color:var(--blue)}
.tag.acc{background:var(--accent-soft);color:var(--accent-d)}
.dot-on{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.empty{padding:40px;text-align:center;color:var(--muted)}

.quick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick button{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:18px 16px;text-align:left;font-weight:500;min-height:58px}
.quick button:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.quick button.outline{border:1.5px solid var(--accent);color:var(--accent-d);font-weight:700}
.quick button.fill{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.chart{width:100%;height:280px}
.legend{display:flex;justify-content:center;gap:18px;font-size:12.5px;color:var(--muted);margin:6px 0 4px}
.legend i{display:inline-block;width:34px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line)}
.checklist li:last-child{border-bottom:0}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:800px){.form-grid{grid-template-columns:1fr}}
.checkline{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.checkline input{width:18px;height:18px;accent-color:var(--accent)}
pre.code{background:#16171D;color:#E8E6FF;border-radius:10px;padding:14px 16px;overflow:auto;font-size:12.5px;line-height:1.55;margin:0}
/* API reference pages (rendered Markdown) */
.md{line-height:1.6;max-width:1100px}
.md h2{font-size:20px;margin:28px 0 10px;padding-top:6px;border-top:1px solid var(--line);scroll-margin-top:12px}
.md h2:first-child{border-top:0;margin-top:0}
.md h3{font-size:16px;margin:22px 0 8px;scroll-margin-top:12px}
.md h4{font-size:14px;margin:16px 0 6px}
.md p,.md ul,.md ol{margin:0 0 12px}
.md li{margin:3px 0}
.md hr{border:0;margin:8px 0}
.md code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:12.5px}
.md pre.code{margin:0 0 14px}
.md .tbl-wrap{margin:0 0 14px;border:1px solid var(--line);border-radius:10px;overflow:auto}
.md table{width:100%;border-collapse:collapse;font-size:13px}
.md th,.md td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.md th{background:var(--panel2);font-weight:700}
.md tr:last-child td{border-bottom:0}
.md a{color:var(--accent-d)}
.keybox{background:var(--accent-soft);border:1.5px dashed var(--accent);padding:12px;border-radius:10px;word-break:break-all}

.footer{height:28px;background:var(--foot);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:11.5px;font-weight:600;position:sticky;bottom:0;z-index:20}

/* modal, palette, toast */
.scrim{position:fixed;inset:0;background:rgba(15,16,21,.45);display:grid;place-items:start center;padding:10vh 16px 16px;z-index:80}
.modal{background:var(--panel);border-radius:14px;width:min(560px,100%);max-height:80vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.modal .m-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal .m-head h3{margin:0;font-size:17px}
.modal .m-head button{margin-left:auto;border:0;background:none;font-size:22px;color:var(--muted)}
.modal .m-body{padding:18px 20px}
.modal .m-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.palette{width:min(560px,100%);background:var(--panel);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.palette input{width:100%;border:0;border-bottom:1px solid var(--line);padding:16px 18px;font-size:16px;outline:none;background:var(--panel)}
.palette .res{max-height:50vh;overflow:auto;padding:6px}
.palette .res button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:8px}
.palette .res button.sel,.palette .res button:hover{background:var(--accent-soft)}
.palette .res small{margin-left:auto;color:var(--muted)}
.toast{position:fixed;right:20px;bottom:40px;background:#1F2433;color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;z-index:99;max-width:420px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.bad{background:var(--red)}
/* page-level notice (e.g. WhatsApp OTP risk) */
.banner{padding:12px 14px;border-radius:9px;margin-bottom:16px;font-size:13.5px;line-height:1.5;border:1px solid transparent}
.banner.warn{background:color-mix(in srgb,var(--amber) 12%,transparent);border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.m-body h4{margin:18px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.m-body h4:first-of-type{margin-top:8px}
.set-groups{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:900px){.set-groups{grid-template-columns:1fr}}
.set-group{border:1px solid var(--line);border-radius:10px;padding:14px 16px 4px;margin-bottom:18px}
.set-group h4{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.set-group .checkline{align-items:flex-start}
.set-group .checkline input{flex:none;margin-top:2px}
.set-group .checkline small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;font-weight:400}
.old-key{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:8px 0}.old-key p{margin:0}
.checkline:has(input:disabled){opacity:.55}
.field input.num{max-width:140px}
.field input:disabled{opacity:.55}
.field textarea.plain{font-family:inherit;font-size:14px}
/* Settings → App & branding */
.brand-logo-row{display:flex;gap:16px;align-items:center}
.brand-logo-row small{display:block;color:var(--muted);font-size:12.5px;margin:6px 0 8px}
.brand-logo{width:72px;height:72px;border-radius:16px;object-fit:cover;background:var(--panel2,#f1f1f1);border:1px solid var(--line);flex:none}
.color-row{display:flex;gap:10px;align-items:center}
.color-row input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.color-row input.hex{width:110px}
.brand-preview{border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:320px}
.bp-head{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#fff}
.bp-head img{width:28px;height:28px;border-radius:8px;background:#fff;object-fit:cover}
.bp-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:#fff}
.bp-chip{align-self:flex-start;padding:4px 12px;border-radius:14px;font-size:13px;font-weight:600}
.bp-row{display:flex;align-items:center;gap:10px;color:#111}
.bp-row span:nth-child(2){flex:1}
.bp-av{width:32px;height:32px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.bp-badge{color:#fff;border-radius:10px;min-width:20px;height:20px;display:grid;place-items:center;font-size:12px;font-weight:700}
.bp-btn{align-self:flex-end;color:#fff;border:0;border-radius:20px;padding:8px 20px;font-weight:600}
.brand-logo.on-color{background:var(--brand-accent,#342E86);object-fit:contain;padding:8px}

/* Settings → Contacts & sign-up: two choices */
.choices{display:grid;gap:12px}
.choice{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line, #e3e6ea);border-radius:12px;padding:14px 16px;cursor:pointer}
.choice:has(input:checked){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, transparent)}
.choice input{margin-top:3px;accent-color:var(--accent)}
.choice b{display:block;margin-bottom:4px}
.choice ul{margin:0;padding-left:18px;color:var(--muted, #667)}
.choice li{margin:2px 0}

/* Settings → App & branding: default chat background preview (light and dark) */
.cb-row{display:flex;gap:16px;align-items:center}
.cb-row small{display:block;color:var(--muted);font-size:12.5px;margin:6px 0 8px}
.cb-thumb{width:72px;height:72px;border-radius:12px;border:1px solid var(--line);flex:none;background:#E5DDD5 center/cover no-repeat}
.cb-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cb-pane{height:190px;border-radius:12px;border:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden;background-position:0 0}
.cb-pane.pattern{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.07%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018h30a6%206%200%200%201%206%206v14a6%206%200%200%201-6%206H26l-9%207v-7h-3a6%206%200%200%201-6-6V24a6%206%200%200%201%206-6z%22%2F%3E%3Cpath%20d%3D%22M18%2028h22M18%2034h14%22%2F%3E%3Cpath%20transform%3D%22translate(78%2014)%22%20d%3D%22M6%202l6%200%203%208-4%203a20%2020%200%200%200%2010%2010l3-4%208%203v6a3%203%200%200%201-3%203C14%2031%201%2018%201%205a3%203%200%200%201%203-3z%22%2F%3E%3Cg%20transform%3D%22translate(138%2016)%22%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%2234%22%20height%3D%2224%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M11%207l3-5h8l3%205%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%227%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(204%2018)%22%20d%3D%22M16%2030S2%2021%202%2011a7%207%200%200%201%2014-3%207%207%200%200%201%2014%203c0%2010-14%2019-14%2019z%22%2F%3E%3Cpath%20transform%3D%22translate(20%2084)%22%20d%3D%22M16%202l4%209%2010%201-7%207%202%2010-9-5-9%205%202-10-7-7%2010-1z%22%2F%3E%3Cg%20transform%3D%22translate(86%2080)%22%3E%3Cpath%20d%3D%22M10%2026V4l18-3v22%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2226%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2223%22%20r%3D%225%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(146%2082)%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M16%208v8l6%204%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(210%2084)%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M10%2019c2%203%2010%203%2012%200%22%2F%3E%3Cpath%20d%3D%22M11%2012h.01M21%2012h.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(14%20150)%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2234%22%20height%3D%2224%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%206l16%2012%2016-12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(82%20146)%22%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%2230%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2012h34v-6H0zM17%206v26%22%2F%3E%3Cpath%20d%3D%22M17%206c-4-6-10-4-8%200M17%206c4-6%2010-4%208%200%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(140%20152)%22%20d%3D%22M10%2026h20a8%208%200%200%200%200-16%2011%2011%200%200%200-21-2A8%208%200%200%200%2010%2026z%22%2F%3E%3Cg%20transform%3D%22translate(208%20146)%22%3E%3Cpath%20d%3D%22M3%2015L18%203l15%2012%22%2F%3E%3Cpath%20d%3D%22M7%2012v19h22V12M15%2031v-9h6v9%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(18%20214)%22%20d%3D%22M2%2014L32%202%2022%2032l-6-12zM16%2020L32%202%22%2F%3E%3Cg%20transform%3D%22translate(88%20210)%22%3E%3Cpath%20d%3D%22M14%2033S2%2021%202%2013a12%2012%200%200%201%2024%200c0%208-12%2020-12%2020z%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(148%20212)%22%3E%3Cpath%20d%3D%22M6%2024V14a10%2010%200%200%201%2020%200v10l3%204H3z%22%2F%3E%3Cpath%20d%3D%22M13%2031a3%203%200%200%200%206%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(210%20214)%22%3E%3Cpath%20d%3D%22M3%2010h22v12a8%208%200%200%201-8%208H11a8%208%200%200%201-8-8z%22%2F%3E%3Cpath%20d%3D%22M25%2013h3a4%204%200%200%201%200%208h-3%22%2F%3E%3Cpath%20d%3D%22M10%202c-2%203%202%204%200%206M17%202c-2%203%202%204%200%206%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M60%2066l5%205%209-10%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%2262%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M128%20132h10M133%20127v10%22%2F%3E%3Cpath%20d%3D%22M58%20196l6-6M64%20196l-6-6%22%2F%3E%3Ccircle%20cx%3D%22252%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.cb-pane.dark.pattern{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.055%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018h30a6%206%200%200%201%206%206v14a6%206%200%200%201-6%206H26l-9%207v-7h-3a6%206%200%200%201-6-6V24a6%206%200%200%201%206-6z%22%2F%3E%3Cpath%20d%3D%22M18%2028h22M18%2034h14%22%2F%3E%3Cpath%20transform%3D%22translate(78%2014)%22%20d%3D%22M6%202l6%200%203%208-4%203a20%2020%200%200%200%2010%2010l3-4%208%203v6a3%203%200%200%201-3%203C14%2031%201%2018%201%205a3%203%200%200%201%203-3z%22%2F%3E%3Cg%20transform%3D%22translate(138%2016)%22%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%2234%22%20height%3D%2224%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M11%207l3-5h8l3%205%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%227%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(204%2018)%22%20d%3D%22M16%2030S2%2021%202%2011a7%207%200%200%201%2014-3%207%207%200%200%201%2014%203c0%2010-14%2019-14%2019z%22%2F%3E%3Cpath%20transform%3D%22translate(20%2084)%22%20d%3D%22M16%202l4%209%2010%201-7%207%202%2010-9-5-9%205%202-10-7-7%2010-1z%22%2F%3E%3Cg%20transform%3D%22translate(86%2080)%22%3E%3Cpath%20d%3D%22M10%2026V4l18-3v22%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2226%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2223%22%20r%3D%225%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(146%2082)%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M16%208v8l6%204%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(210%2084)%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M10%2019c2%203%2010%203%2012%200%22%2F%3E%3Cpath%20d%3D%22M11%2012h.01M21%2012h.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(14%20150)%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2234%22%20height%3D%2224%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%206l16%2012%2016-12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(82%20146)%22%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%2230%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M0%2012h34v-6H0zM17%206v26%22%2F%3E%3Cpath%20d%3D%22M17%206c-4-6-10-4-8%200M17%206c4-6%2010-4%208%200%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(140%20152)%22%20d%3D%22M10%2026h20a8%208%200%200%200%200-16%2011%2011%200%200%200-21-2A8%208%200%200%200%2010%2026z%22%2F%3E%3Cg%20transform%3D%22translate(208%20146)%22%3E%3Cpath%20d%3D%22M3%2015L18%203l15%2012%22%2F%3E%3Cpath%20d%3D%22M7%2012v19h22V12M15%2031v-9h6v9%22%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%22translate(18%20214)%22%20d%3D%22M2%2014L32%202%2022%2032l-6-12zM16%2020L32%202%22%2F%3E%3Cg%20transform%3D%22translate(88%20210)%22%3E%3Cpath%20d%3D%22M14%2033S2%2021%202%2013a12%2012%200%200%201%2024%200c0%208-12%2020-12%2020z%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(148%20212)%22%3E%3Cpath%20d%3D%22M6%2024V14a10%2010%200%200%201%2020%200v10l3%204H3z%22%2F%3E%3Cpath%20d%3D%22M13%2031a3%203%200%200%200%206%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(210%20214)%22%3E%3Cpath%20d%3D%22M3%2010h22v12a8%208%200%200%201-8%208H11a8%208%200%200%201-8-8z%22%2F%3E%3Cpath%20d%3D%22M25%2013h3a4%204%200%200%201%200%208h-3%22%2F%3E%3Cpath%20d%3D%22M10%202c-2%203%202%204%200%206M17%202c-2%203%202%204%200%206%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M60%2066l5%205%209-10%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%2262%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M128%20132h10M133%20127v10%22%2F%3E%3Cpath%20d%3D%22M58%20196l6-6M64%20196l-6-6%22%2F%3E%3Ccircle%20cx%3D%22252%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.cb-pane .b{max-width:78%;padding:6px 10px;border-radius:8px;font-size:13px;background:#fff;color:#111;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.cb-pane .b.me{align-self:flex-end;background:#D9FDD3}
.cb-pane.dark .b{background:#202C33;color:#E9EDEF}.cb-pane.dark .b.me{background:#005C4B}
.cb-pane .cap{font-size:11px;font-weight:600;align-self:center;padding:2px 10px;border-radius:10px;background:rgba(255,255,255,.85);color:#333}
@media (max-width:700px){.cb-preview{grid-template-columns:1fr}}
/* office directory pickers (vendor access, help line staff) */
.pick{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer}
.pick:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pick small{font-size:12px}
.pick-grid{display:flex;flex-wrap:wrap;gap:2px 10px}
.pick-list{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-top:8px;padding:4px}
[hidden]{display:none!important}