:root{--blue:#0072BC;--dark:#18375F;--light:#8EBEFF;--bg:#f3f6fa;--line:#d9e1ea;--ok:#1b7f3b;--bad:#c0392b;--mut:#5b6b7c;--card:#fff;--ink:#1c2733}
@media (prefers-color-scheme: dark){:root{--bg:#0f1620;--card:#18222e;--line:#2a3846;--ink:#e6edf5;--mut:#9fb0c2;--dark:#0b2a4a}}
*{box-sizing:border-box}body{margin:0;font-family:Lato,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
a{color:var(--blue)}
header.top{background:var(--blue);color:#fff;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header.top h1{font-size:18px;margin:0}header.top .sub{opacity:.9;font-size:13px;color:#fff;margin:0}header.top a{color:#fff}.sp{flex:1}.who{font-size:13px}
nav.tabs{background:var(--card);border-bottom:1px solid var(--line);display:flex;padding:0 14px;overflow-x:auto;position:sticky;top:0;z-index:5}
nav.tabs button{background:none;border:0;padding:13px 16px;font:inherit;cursor:pointer;color:var(--mut);border-bottom:3px solid transparent;white-space:nowrap}
nav.tabs button.on{color:var(--blue);border-color:var(--blue);font-weight:700}
main{padding:16px;max-width:1200px;margin:0 auto}.pane{display:none}.pane.on{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}.card h3{margin:0 0 10px;font-size:15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid2 .card{margin-bottom:14px}@media(max-width:860px){.grid2,.split2,.split{grid-template-columns:1fr!important}}
.split2{display:grid;grid-template-columns:1fr 340px;gap:14px}.side .tips{padding-left:18px;color:var(--mut);font-size:13px;line-height:1.5}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card);margin-bottom:6px}.seg button{border:0;background:none;padding:7px 14px;font:inherit;cursor:pointer;color:var(--ink)}.seg button.on{background:var(--blue);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;padding:12px 14px}.kpi.ok{border-left-color:var(--ok)}.kpi.bad{border-left-color:var(--bad)}
.kl{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}.kv{font-size:28px;font-weight:700;margin:2px 0}.ks{font-size:12px;color:var(--mut)}
label{display:block;font-weight:700;font-size:13px;margin:12px 0 4px}input,textarea,select{width:100%;padding:9px 10px;border:1px solid #b9c5d3;border-radius:6px;font:inherit;background:var(--card);color:var(--ink)}
textarea{min-height:110px;resize:vertical}input:focus,textarea:focus,select:focus{outline:2px solid var(--light);border-color:var(--blue)}
.btn{background:var(--blue);color:#fff;border:0;padding:10px 18px;border-radius:6px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}.btn:hover{background:var(--dark)}.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}.btn.ghost:hover{background:rgba(0,114,188,.08)}.btn.sm{padding:6px 11px;font-size:13px}
.hint{color:var(--mut);font-size:12px;margin-top:4px}.err{color:var(--bad);font-weight:700}.okmsg{color:var(--ok);font-weight:700}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end;margin-top:14px}.row select{width:auto}
.drop{border:2px dashed #9db3c8;border-radius:10px;padding:28px;text-align:center;margin-top:10px}.drop.over{background:rgba(0,114,188,.08);border-color:var(--blue)}.lnk{display:inline;color:var(--blue);text-decoration:underline;cursor:pointer;font-weight:700;margin:0;font-size:inherit}
.chip{background:rgba(0,114,188,.12);border-radius:10px;padding:1px 8px;font-size:12px;text-decoration:none;margin-right:2px}
.sumline{padding:4px 0;border-bottom:1px solid var(--line)}.sumline.bad{color:var(--bad)}
.badge{display:inline-block;background:var(--blue);color:#fff;border-radius:10px;font-size:11px;padding:0 7px;margin-left:6px}
.tw{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{background:var(--dark);color:#fff;text-align:left;padding:7px 9px;position:sticky;top:0;white-space:nowrap}td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}td.r{text-align:right}td.wrap{max-width:380px;word-break:break-word}
.st{font-weight:700}.st.DELIVERED{color:var(--ok)}.st.REJECTED,.st.UNDELIVERABLE,.st.CANCELED{color:var(--bad)}.st.EXPIRED{color:#8e44ad}.st.PENDING{color:#a66a00}.st small{font-weight:400;color:var(--mut)}.dirin{color:var(--blue);font-weight:700}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.filters input,.filters select{width:auto;min-width:130px}.filters #f_q{flex:1;min-width:200px}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:12px;color:var(--mut);font-size:13px}
.legend{font-size:12px;color:var(--mut);margin-top:6px}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 10px}.c1{background:#0072BC}.c2{background:#1b7f3b}.c3{background:#c0392b}.c4{background:#e08a00}
.chart{width:100%;height:auto}.ax{font-size:10px;fill:var(--mut)}
.hb{display:grid;grid-template-columns:120px 1fr auto;gap:8px;align-items:center;margin:7px 0;font-size:13px}.ht{background:rgba(127,140,160,.18);height:12px;border-radius:6px;overflow:hidden}.hf{display:block;height:100%;border-radius:6px}.hv{color:var(--mut);font-size:12px;text-align:right}
.hours{display:flex;gap:3px;align-items:flex-end;height:120px}.hr{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}.hr span{display:block;background:#e08a00;border-radius:2px 2px 0 0;min-height:1px}.hr i{font-size:10px;color:var(--mut);text-align:center;font-style:normal;height:14px}
.rp{padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}.rp:hover{background:rgba(0,114,188,.06)}
.split{display:grid;grid-template-columns:320px 1fr;gap:14px}.threads{max-height:560px;overflow:auto;padding:0}.thread{padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}.thread:hover,.thread.on{background:rgba(0,114,188,.1)}
.thread .n{font-weight:700}.thread .t{color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread .d{float:right;color:var(--mut);font-size:11px}
.chat{display:flex;flex-direction:column;min-height:420px}.msgs{flex:1;max-height:430px;overflow:auto;padding:6px 2px}
.b{max-width:78%;margin:6px 0;padding:8px 12px;border-radius:12px;clear:both;white-space:pre-wrap;word-wrap:break-word}.b.in{background:rgba(127,140,160,.2);float:left}.b.out{background:var(--blue);color:#fff;float:right}.b small{display:block;opacity:.75;font-size:11px;margin-top:3px}
.reply{display:flex;gap:8px;margin-top:10px}.reply textarea{min-height:44px;height:44px}
.bubble{background:rgba(0,114,188,.1);border-left:4px solid var(--blue);padding:10px 12px;border-radius:6px;white-space:pre-wrap;margin:8px 0}
.modal{position:fixed;inset:0;background:rgba(10,20,35,.55);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}.modal[hidden]{display:none}.mbox{background:var(--card);border-radius:12px;padding:20px;max-width:520px;width:100%}.mbox h3{margin-top:0}
.prog{height:10px;background:rgba(127,140,160,.25);border-radius:6px;overflow:hidden;margin-top:12px}.prog span{display:block;height:100%;width:0;background:var(--blue);transition:width .3s}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#18375F;color:#fff;padding:10px 16px;border-radius:8px;z-index:30}
code,pre{background:rgba(127,140,160,.18);padding:2px 6px;border-radius:4px;font-size:12.5px;word-break:break-all}
body.login{display:flex;min-height:100vh;align-items:center;justify-content:center}body.login .card{width:340px}body.login h1{margin:0;color:var(--blue);font-size:22px}.sub{color:var(--mut);margin:4px 0 12px}

.logo-pill{background:#fff;border-radius:8px;padding:4px 10px;display:inline-flex;align-items:center;line-height:0}.logo-pill img{height:31px;width:auto;display:block}
.logo-login{display:block;margin:0 auto 14px;height:auto;max-width:100%}body.login h1{text-align:center}body.login .sub{text-align:center}
@media(max-width:560px){header.top .sub{display:none}}