:root{--ink:#101318;--muted:#5b6472;--line:#e3e7ee;--bg:#f4f6fa;--card:#fff;--blue:#1677FF;--blue-d:#0b5ed7;--navy:#0d1526;--navy2:#16213a;--ok:#0f9d58;--bad:#d93025;--warn:#b26a00;--r:10px}
*{box-sizing:border-box}html,body{margin:0}body{font:14px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--blue-d);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:18px;margin:0}h2{font-size:16px;margin:0 0 12px}small,.small{font-size:12px}.muted{color:var(--muted)}.sr{position:absolute;left:-9999px}
.shell{display:flex;min-height:100vh}
.side{width:232px;flex:0 0 232px;background:var(--navy);color:#c9d3e6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;gap:10px;align-items:center;padding:18px 16px;color:#fff}.brand:hover{text-decoration:none}.brand small{display:block;color:#8fa0bf;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--blue);color:#fff;font-weight:800;font-size:13px}
.nav-group{padding:6px 10px 10px}.nav-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7d8db0;padding:8px 8px 4px}
.nav-a{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;color:#d6deee}.nav-a:hover{background:var(--navy2);text-decoration:none}
.nav-a.on{background:var(--blue);color:#fff}
.side-foot{margin-top:auto;padding:14px 16px}
.role{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:#24324f;color:#cfe0ff;text-transform:capitalize}.tbl .role{background:#eef3fb;color:#24324f}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:12px 22px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-search{margin-left:auto}.top-search input{width:260px}.who{color:var(--muted);font-size:13px}
.menu-btn{display:none;border:0;background:none;font-size:22px;cursor:pointer}
button.link{background:none;border:0;color:var(--blue-d);cursor:pointer;font:inherit;padding:0}
.content{padding:22px;max-width:1180px;width:100%}.content.wide{max-width:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid2 .card{margin:0 0 16px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:var(--ink)}.stat:hover{text-decoration:none;border-color:var(--blue)}
.stat span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.stat b{display:block;font-size:28px;line-height:1.2}.stat small{color:var(--muted)}
.stat-warn{border-color:#f0c36d;background:#fffaf0}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid #cfd6e1;border-radius:8px;background:#fff;color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #b9d4ff;border-color:var(--blue)}textarea{width:100%;resize:vertical}
.form label{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;font-weight:600;font-size:13px}.form label input,.form label select{width:100%}
.form label small{font-weight:400}fieldset{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 2px;margin:0 0 14px}legend{font-weight:700;padding:0 6px}
.row3{display:grid;grid-template-columns:2fr 1fr 1.6fr;gap:10px}.row-form{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:10px;align-items:end}.row-form label{margin:0}
.chk{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;font-weight:400!important}.chk.sub{margin-left:18px;color:var(--muted)}
.access-form{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid #cfd6e1;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{text-decoration:none;border-color:var(--blue)}.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-d)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--blue-d)}.btn-danger{color:var(--bad);border-color:#f1c0bb}.btn-danger:hover{border-color:var(--bad)}
.btn-sm{padding:5px 10px;font-size:13px}.btn-block{width:100%}.btn[disabled]{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:8px;flex-wrap:wrap}.inline{display:inline}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:#eef1f6;color:#3d4655}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}.st-ok{background:#e6f6ee;color:var(--ok)}.st-bad{background:#fdecea;color:var(--bad)}
.st-sample{background:#fff4dc;color:var(--warn)}.st-off{background:#eef1f6;color:#5b6472}
.badge{background:var(--blue);color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:1px 7px;margin-left:6px}.nav-a.on .badge{background:#fff;color:var(--blue)}
.notice{padding:10px 14px;border-radius:8px;margin-bottom:14px;border:1px solid}.notice-ok{background:#e9f7f0;border-color:#b7e2cb}.notice-err{background:#fdecea;border-color:#f3c1bb}
.notice-warn{background:#fff6e0;border-color:#f0d08c}.notice-info{background:#eaf2ff;border-color:#c3d8fb}
.table-wrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse}.tbl th{text-align:left;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}.row-actions{white-space:nowrap;text-align:right}
ul.plain{list-style:none;padding:0;margin:0}ul.plain li{padding:6px 0}
.mini{list-style:none;padding:0;margin:0 0 8px}.mini li a{display:grid;grid-template-columns:1fr;padding:8px 6px;border-bottom:1px solid var(--line);color:var(--ink)}.mini li a:hover{background:#f7f9fc;text-decoration:none}
.mini span{color:#333}.mini small{color:var(--muted)}.mini li.unread b,.mini li.unread span{font-weight:700}.more{font-weight:600}
.empty{color:var(--muted);padding:18px 4px;margin:0}
.page-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}.page-head p{margin:0;max-width:720px}
.grid-form{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}.help ol{padding-left:18px}.help li{margin-bottom:6px}
.conn-result{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:14px}.conn-result .ok{color:var(--ok)}.conn-result .bad{color:var(--bad)}
.danger-zone{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.kv{display:grid;grid-template-columns:200px 1fr;gap:6px 12px;margin:0 0 12px}.kv dt{color:var(--muted)}.kv dd{margin:0}
/* Email Headquarters */
.acct-switch{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-bottom:14px}
.acct-current{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.acct-label{font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.06em}
.acct-list{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}.acct{display:flex;flex-direction:column;padding:6px 34px 6px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);position:relative;min-width:150px}
.acct:hover{text-decoration:none;border-color:var(--blue)}.acct.on{border-color:var(--blue);background:#eef5ff}.acct small{color:var(--muted)}.acct .badge{position:absolute;top:8px;right:8px}
.mail{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;align-items:start}
.folders{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:70px}
.compose-btn{margin-bottom:8px}.folder{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:8px;color:var(--ink)}.folder:hover{background:#f2f5fa;text-decoration:none}
.folder.on{background:#e6efff;font-weight:700}.folder .fname{flex:1}.folder small{color:var(--muted)}
.folder-manage{margin-top:10px;font-size:13px}.folder-manage summary{cursor:pointer;color:var(--blue-d);font-weight:600}.folder-manage form{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.folder-manage label{display:flex;flex-direction:column;gap:4px;width:100%}.folder-manage input{width:100%}.sync-form{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.mail-main{min-width:0}.list,.reader{background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.list-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}.list-head h2{margin:0}
.list-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.list-search input[name=q]{width:280px}
.msgs{list-style:none;margin:0;padding:0}.msg a{display:grid;grid-template-columns:200px minmax(0,1fr) 90px;grid-template-rows:auto auto;column-gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.msg a:hover{background:#f7f9fc;text-decoration:none}.m-who{grid-row:span 2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m-subj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-snip{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2}.m-date{grid-column:3;grid-row:1;text-align:right;color:var(--muted);font-size:12px}
.msg.unread a{background:#fbfdff;box-shadow:inset 3px 0 var(--blue)}.msg.unread .m-who,.msg.unread .m-subj{font-weight:700}.star{color:#f4b400}.clip{font-size:12px}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;padding:12px}
.reader{padding:14px 18px}.reader-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}.reader-bar .move{margin-left:auto;display:flex;gap:6px}
.subject{font-size:20px;margin:14px 0 8px}.hdrs{display:grid;grid-template-columns:70px 1fr;gap:3px 10px;margin:0 0 12px;font-size:13px}.hdrs dt{color:var(--muted)}.hdrs dd{margin:0;word-break:break-word}
.atts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.atts p{width:100%;margin:0}
.att{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--ink)}.att:hover{border-color:var(--blue);text-decoration:none}
.body-frame{width:100%;min-height:480px;border:1px solid var(--line);border-radius:8px;background:#fff}
.compose{max-width:900px}
/* sign-in */
body.bare{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,#0d1526,#16305f)}
.auth-card{background:#fff;border-radius:14px;padding:28px;width:min(420px,92vw);box-shadow:0 20px 50px rgba(0,0,0,.25)}.brand-lg{color:var(--ink);padding:0 0 12px}.brand-lg small{color:var(--muted)}
/* tablet */
@media (max-width:1024px){.stats{grid-template-columns:repeat(2,1fr)}.grid-form{grid-template-columns:1fr}.mail{grid-template-columns:180px minmax(0,1fr)}
  .msg a{grid-template-columns:150px minmax(0,1fr) 70px}.row-form{grid-template-columns:1fr 1fr}.top-search input{width:180px}}
/* mobile */
@media (max-width:760px){.side{position:fixed;left:-260px;z-index:20;transition:left .2s}.side.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .menu-btn{display:block}.top{padding:10px 12px;gap:10px;flex-wrap:wrap}.top h1{font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.who{display:none}
  .top-search{order:5;width:100%;margin:0}.top-search input{width:100%}
  .content{padding:12px}.grid2{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat b{font-size:22px}
  .mail{grid-template-columns:1fr}.folders{position:static;flex-direction:row;overflow-x:auto;flex-wrap:nowrap;padding:8px;gap:6px}
  .folders .folder{flex:0 0 auto;border:1px solid var(--line)}.compose-btn{margin:0;flex:0 0 auto}.folder-manage,.sync-form{flex:0 0 auto;margin:0;align-self:center}
  .folder-manage[open]{flex-basis:260px}.acct-list{margin:0;width:100%;overflow-x:auto;flex-wrap:nowrap}.acct{min-width:170px}
  .msg a{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px}.m-who{grid-row:auto}.m-date{grid-column:2;grid-row:1}.m-subj{grid-column:1/3}.m-snip{grid-column:1/3}
  .list-search input[name=q]{width:100%}.list-search{width:100%}.reader{padding:12px}.reader-bar .move{margin-left:0}.hdrs{grid-template-columns:56px 1fr}
  .row3{grid-template-columns:1fr 1fr}.row3 label:first-child{grid-column:1/3}.row-form{grid-template-columns:1fr}.kv{grid-template-columns:1fr}.page-head{flex-direction:column;align-items:flex-start}
  .tbl th:nth-child(4),.tbl td:nth-child(4){display:none}}
/* ---- platform pages: admins, automation, contacts, affiliates ---- */
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.section-h{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:4px 0 10px}
.offline{position:fixed;left:0;right:0;top:0;z-index:50;background:var(--bad);color:#fff;text-align:center;padding:6px;font-weight:600}
.bell{font-size:18px;position:relative}.bell:hover{text-decoration:none}.bell .badge{position:absolute;top:-6px;right:-10px}
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs a{padding:9px 14px;border-radius:8px 8px 0 0;color:var(--muted);font-weight:600;border-bottom:2px solid transparent}
.tabs a.on{color:var(--blue-d);border-bottom-color:var(--blue)}.tabs a:hover{text-decoration:none;background:#eef3fb}
.app-card{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}.app-card h3{margin:0 0 8px;font-size:15px}
.row-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.row-form label{flex:1 1 180px}
.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin:2px 0}.inline input,.inline select{width:auto}
.sale-form input{max-width:130px}.edit-person input{max-width:160px}
.copy-row{display:flex;gap:8px}.copy-row input{flex:1;font-family:ui-monospace,Consolas,monospace}
.ref-link{border-color:var(--blue);background:linear-gradient(180deg,#f3f8ff,#fff)}
.bars{display:block;width:100%;height:90px}.bars rect{fill:var(--blue)}.num-sm{width:6em}
.switches{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.chk-list{display:flex;flex-wrap:wrap;gap:6px 16px}.perm-form .chk{display:inline-flex;gap:4px;margin-right:10px}
.invite-box{border:1px dashed var(--blue);border-radius:var(--r);padding:12px;background:#f7faff;word-break:break-all}
.preview{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:#fff}.small-frame{width:100%;height:340px;border:1px solid var(--line);border-radius:8px;background:#fff}
.quote{border-left:3px solid var(--line);padding-left:10px;color:var(--muted)}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;background:#eef3fb;color:#24324f;margin:0 3px 3px 0}
.notes{white-space:pre-wrap}.acct-addr{color:var(--muted);font-size:12px}.sort select{width:auto}
.compose-form input[type=file]{padding:6px}
.btn:disabled{opacity:.6;cursor:wait}
.role-owner{background:#2454d6;color:#fff}.tbl .role-owner{background:#e3ebff;color:#1b3fa8}.role-affiliate{background:#123b2a;color:#b9f0d4}
@media (max-width:760px){.tabs{overflow-x:auto;flex-wrap:nowrap}.copy-row{flex-direction:column}.row-form label{flex-basis:100%}}
/* ===== Roof Network design system, adapted for 360 Apps (no gold): warm paper canvas, deep-navy sidebar with
   uppercase group titles, bright-blue actions, white rounded panels with soft shadows, light + dark themes. ===== */
:root{--ink:#14213d;--muted:#4b5875;--line:#e7ddc9;--line-soft:#eee6d6;--bg:#f3f0e8;--card:#fff;--card2:#faf6ec;--input:#fff;--blue:#4c8dff;--blue-d:#2454d6;--navy:#10254d;--navy2:rgba(255,255,255,.08);--r:12px;
  --shadow:0 4px 16px rgba(5,11,24,.1),0 1px 3px rgba(5,11,24,.08);--focus:0 0 0 3px rgba(76,141,255,.4)}
:root[data-theme="dark"]{--ink:#e8eefb;--muted:#9fb0cf;--line:rgba(255,255,255,.11);--line-soft:rgba(255,255,255,.07);--bg:#0d1524;--card:#141f33;--card2:#1b2942;--input:#0f1a2e;--navy:#0b1424;
  --shadow:0 6px 22px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);color-scheme:dark}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg)}
.side{width:240px;flex-basis:240px;background:var(--navy);color:rgba(255,255,255,.85);padding:6px 4px}
.brand{padding:18px 16px 20px}.brand small{color:rgba(255,255,255,.6);text-transform:none;letter-spacing:0;font-weight:500}
.logo{background:linear-gradient(135deg,#4c8dff,#2454d6);box-shadow:0 0 24px rgba(76,141,255,.35)}
.nav-group{padding:0 10px 14px}.nav-h{font-weight:700;color:rgba(255,255,255,.45);padding:0 10px 6px}
.nav-a{color:rgba(255,255,255,.72);font-size:13.5px;font-weight:600;padding:9px 10px;transition:background .12s,color .12s}
.nav-a:hover{background:rgba(255,255,255,.08);color:#fff}.nav-a.on,.nav-a.on:hover{background:var(--blue);color:#fff}
.top{background:var(--card);border-bottom:1px solid var(--line);padding:16px 24px}.top h1{font-size:18px;font-weight:700}
.content{padding:24px}
.card,.list,.reader,.folders,.acct-switch,.preview,.auth-card{background:var(--card);border:0;box-shadow:var(--shadow);border-radius:var(--r)}
.card{padding:24px}
.stat{background:var(--card2);border:1px solid var(--line-soft);border-radius:10px;box-shadow:none;color:var(--ink)}.stat:hover{border-color:var(--blue)}
.stat b{font-size:24px;font-weight:700;color:var(--navy)}:root[data-theme="dark"] .stat b{color:#cfe0ff}
.stat span{font-size:12px}.stat-warn{background:#fdf3d8;border-color:#f0d08c}:root[data-theme="dark"] .stat-warn{background:#2b2512;border-color:#6b5a26}
.tbl th{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.06em}.tbl td,.tbl th{border-bottom:1px solid var(--line-soft)}
input,select,textarea{background:var(--input);border-color:var(--line);color:var(--ink)}input:focus,select:focus,textarea:focus{outline:0;box-shadow:var(--focus);border-color:var(--blue)}
.btn{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:600}.btn:hover{border-color:var(--blue)}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}.btn-primary:hover{background:var(--blue-d);border-color:var(--blue-d)}
.tabs{border-bottom:0;gap:3px}.tabs a{background:var(--card2);border:1px solid var(--line-soft);border-radius:6px;padding:6px 11px;font-size:12.5px;color:var(--muted)}
.tabs a.on,.tabs a.on:hover{background:var(--blue);border-color:var(--blue);color:#fff}.tabs a:hover{background:var(--card);color:var(--ink)}
.tag{background:var(--card2);color:var(--ink);border:1px solid var(--line-soft)}
.app-card{border-color:var(--line-soft);background:var(--card2)}
.invite-box,.ref-link{background:var(--card2)}
.theme-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:15px}
.portal-links{display:flex;gap:12px;font-size:13px}
:root[data-theme="dark"] .notice-warn{background:#2b2512;border-color:#6b5a26;color:#f3e3b5}:root[data-theme="dark"] .notice-info{background:#14243f;border-color:#2b4a7a;color:#d6e4ff}
:root[data-theme="dark"] .notice-ok{background:#112b1e;border-color:#25563b}:root[data-theme="dark"] .notice-err{background:#331717;border-color:#6b2b2b}
:root[data-theme="dark"] .content a:not(.btn):not(.stat){color:#8fb6ff}:root[data-theme="dark"] .mini li a,:root[data-theme="dark"] .msg a{color:var(--ink)}:root[data-theme="dark"] .body-frame,:root[data-theme="dark"] .small-frame{background:#fff}
.mini span{color:var(--ink)}.mini li a:hover,.msg a:hover,.folder:hover{background:var(--card2)}.msg.unread a{background:var(--card2)}
.ref-link{background:var(--card2)}.invite-box{background:var(--card2)}
:root[data-theme="dark"] .st-ok{background:#123524;color:#7ee2a8}:root[data-theme="dark"] .st-bad{background:#3a1a1a;color:#ff9b93}
:root[data-theme="dark"] .st-sample{background:#33290f;color:#f3cf72}:root[data-theme="dark"] .st-off{background:#1f2a40;color:#9fb0cf}
:root[data-theme="dark"] .btn-danger{border-color:#6b2b2b;color:#ff9b93}:root[data-theme="dark"] .tbl .role{background:#1f2a40;color:#cfe0ff}
:root[data-theme="dark"] .brand-lg{color:var(--ink)}

/* ---- mailboxes dashboard, setup wizard, conversations, rich-text compose ---- */
.mbx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.mbx{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px}
.mbx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.mbx-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:.9rem}.mbx-kv dt{color:var(--muted)}.mbx-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.mbx-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.meter{display:inline-block;width:90px;height:6px;vertical-align:middle;margin-left:6px}.meter svg{width:100%;height:100%;display:block}
.meter-bg{fill:var(--line)}.meter-fg{fill:var(--blue)}
.wizard{display:flex;flex-direction:column;gap:16px}
.step{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--card)}
.step>h3,.step>legend{margin-top:0}
.ok-text{color:var(--ok,#0f9d58)}:root[data-theme="dark"] .ok-text{color:#7ee2a8}
.guide{background:var(--card2,#faf6ec);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;font-size:.92rem}
.guide code{overflow-wrap:anywhere}
.danger-zone{border:1px solid #e3b1ad;border-radius:var(--r);padding:12px 16px}:root[data-theme="dark"] .danger-zone{border-color:#6b2b2b}
.conn-result{border-radius:var(--r)}
.thread{margin:8px 0 12px;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;background:var(--card2,#faf6ec)}
.thread summary{cursor:pointer;font-weight:600}.thread-list{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.thread-list li.on{font-weight:600}.thread-list .m-snip{color:var(--muted);font-size:.85rem}
.rte-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}.rte-bar button{min-width:34px}
.rte{min-height:240px;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--input,#fff);color:var(--ink);overflow:auto;line-height:1.5}
.rte:focus{outline:none;box-shadow:var(--focus)}.rte-wrap textarea[hidden]{display:none}
.send-later{margin:8px 0}
@media (max-width:640px){.mbx-grid{grid-template-columns:1fr}.mbx-kv{grid-template-columns:1fr}.mbx-kv dt{margin-top:4px}}
.preview-text{white-space:pre-wrap;font:inherit;background:var(--card2,#faf6ec);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;max-height:480px;overflow:auto}
.tpl-frame{width:100%;max-width:680px;height:560px;border:1px solid var(--line);border-radius:var(--r);background:#fff;display:block;margin-bottom:18px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:8px 0}

/* ---------- Calls & Transcripts ---------- */
/* Calls & Transcripts. Append to public/static/app.css (the Portal's CSP blocks inline styles). Uses the Portal's colour tokens where present. */
.calls-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.calls-kpis .kpi { background: var(--card, #fff); border: 1px solid var(--line, #e3e7ee); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.calls-kpis .kpi b { font-size: 26px; line-height: 1.1; }
.calls-kpis .kpi span { font-size: 13px; color: var(--muted, #5b6573); }
.calls-filter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0 0 14px; }
.calls-filter label { display: grid; gap: 4px; font-size: 13px; }
.calls-filter input, .calls-filter select { min-height: 36px; }
.calls-table { width: 100%; }
.calls-table td, .calls-table th { white-space: nowrap; }
@media (max-width: 760px) { .calls-table { display: block; overflow-x: auto; } }
.st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.st-answered { background: #e7f6ec; color: #1e6b3a; }
.st-missed { background: #fff1e6; color: #9a3d12; }
.st-failed { background: #fdecec; color: #9b1c1c; }
.st-ringing { background: #eef2f7; color: #334155; }
.transcript { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.transcript li { padding: 10px 12px; border-radius: 12px; max-width: 760px; }
.transcript li p { margin: 4px 0 0; white-space: pre-wrap; }
.transcript time { font-size: 12px; color: var(--muted, #5b6573); }
.transcript .sp-caller { background: #eef4ff; }
.transcript .sp-assistant { background: #f4f5f7; margin-left: 24px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.kv dt { font-weight: 600; text-transform: capitalize; }
.kv dd { margin: 0; white-space: pre-wrap; }
.notes { list-style: none; padding: 0; }
.notes li { border-top: 1px solid var(--line, #e3e7ee); padding: 8px 0; }
.notes li p { margin: 4px 0 0; white-space: pre-wrap; }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #eef2f7; }
/* Follow the Portal's own theme switch (data-theme), not the operating system's setting. */
:root[data-theme="dark"] .transcript .sp-caller { background: #1d2a40; } :root[data-theme="dark"] .transcript .sp-assistant { background: #23262d; }
:root[data-theme="dark"] .st-answered { background: #143423; color: #9be0b3; } :root[data-theme="dark"] .st-missed { background: #3a2412; color: #f5b98a; } :root[data-theme="dark"] .st-failed { background: #3b1717; color: #f3a6a6; }
:root[data-theme="dark"] .tag { background: #1f2a40; }
/* Calls: live status */
.st-live { background: #c62828; color: #fff; animation: live-pulse 1.6s ease-in-out infinite; }
.st-ringing { background: #fff6d6; color: #7a5a00; }
@keyframes live-pulse { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .st-live { animation: none; } }
:root[data-theme="dark"] .st-ringing { background: #3a3112; color: #f2d27a; }
.live-note { font-weight: 400; font-size: 12px; }