:root{color-scheme:light;--ink:#172437;--ink2:#314158;--muted:#68778b;--line:#dbe3e8;--canvas:#f2f6f5;--surface:#fff;--rail:#132236;--rail2:#1a2d45;--signal:#0f9f83;--signal-dark:#08745f;--blue:#2866d6;--coral:#e76855;--violet:#7656cf;--amber:#d68b22;--danger:#c94c4c;--shadow:0 12px 35px rgba(19,34,54,.08);--display:"Segoe UI Variable Display","Microsoft YaHei UI",sans-serif;--body:"Segoe UI Variable Text","Microsoft YaHei UI",sans-serif;--mono:"Cascadia Code",Consolas,monospace}
.webhook-config{align-items:center}.webhook-config p{flex:1}.webhook-config>button{flex:0 0 auto;min-width:130px}.webhook-config.webhook-ready{border-left-color:var(--tblr-success,#2fb344);background:#eff9f5}.webhook-config.webhook-warning{border-color:#efd7a7;border-left-color:var(--tblr-warning,#f59f00);color:#805b16;background:#fff8e8}
*{box-sizing:border-box}html{min-width:320px;background:var(--canvas)}body{margin:0;color:var(--ink);background:var(--canvas);font:14px var(--body)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(15,159,131,.22);outline-offset:2px}
.app-shell{min-height:100vh;display:grid;grid-template-columns:224px minmax(0,1fr)}.sidebar{position:sticky;top:0;z-index:4;height:100vh;display:flex;flex-direction:column;padding:24px 14px 18px;color:#cbd6e3;background:var(--rail);border-right:1px solid #243a54}.sidebar:after{content:"";position:absolute;left:35px;top:106px;bottom:76px;width:1px;background:rgba(127,151,177,.14);pointer-events:none}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px 22px}.brand strong{display:block;color:#fff;font:750 16px/1 var(--mono);letter-spacing:.13em}.brand small{display:block;margin-top:6px;color:#8295ab;font-size:11px}.brand-mark{width:36px;height:36px;position:relative;flex:0 0 auto;border:1px solid #3b526d;background:#1a2d45}.brand-mark span{position:absolute;z-index:1;width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(40,102,214,.15)}.brand-mark span:first-child{left:8px;top:20px}.brand-mark span:nth-child(2){left:17px;top:8px;background:var(--signal)}.brand-mark span:nth-child(3){right:6px;bottom:6px;background:var(--coral)}.brand-mark:before,.brand-mark:after{content:"";position:absolute;height:1px;width:17px;background:#6c829a;transform-origin:left}.brand-mark:before{left:10px;top:21px;transform:rotate(-52deg)}.brand-mark:after{left:19px;top:11px;transform:rotate(54deg)}
.workspace-chip{display:grid;grid-template-columns:38px 1fr 24px;align-items:center;gap:10px;margin-bottom:24px;padding:12px;border:1px solid #304761;background:#192c44}.workspace-chip .avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:8px;color:#fff;background:var(--blue);font-size:17px;font-weight:800}.workspace-chip strong,.workspace-chip small{display:block}.workspace-chip strong{color:#fff;font-size:13px}.workspace-chip small{margin-top:4px;color:#8499b0;font-size:10px}.workspace-chip button{width:24px;height:28px;border:0;color:#91a5bb;background:transparent}
.nav{position:relative;z-index:1;display:grid;gap:4px}.nav-label{margin:14px 10px 7px;color:#6f849c;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.nav-item{position:relative;width:100%;height:42px;display:flex;align-items:center;gap:12px;padding:0 12px;border:0;color:#aebdcd;background:transparent;text-align:left;transition:.16s}.nav-item>span{width:20px;color:#7990aa;font:15px/1 var(--mono);text-align:center}.nav-item:hover{color:#fff;background:rgba(255,255,255,.05)}.nav-item.active{color:#fff;background:#203958;font-weight:700}.nav-item.active:before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;background:var(--signal)}.nav-item.active>span{color:#5cddc2}.sidebar-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding:18px 9px 0;border-top:1px solid #2a3d55}.sidebar-foot strong,.sidebar-foot small{display:block}.sidebar-foot strong{color:#e9eef4;font-size:11px}.sidebar-foot small{margin-top:4px;color:#74889f;font-size:9px}.quota-ring{width:34px;height:34px;display:grid;place-items:center;border:1px solid #3b526d;color:#7ce2cc;font:700 10px/1 var(--mono)}
.main{min-width:0;padding:0 30px 42px}.topbar{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}#page-kicker,.eyebrow{margin:0;color:var(--blue);font:700 10px/1.2 var(--mono);letter-spacing:.17em;text-transform:uppercase}#page-title{margin:8px 0 0;font:750 29px/1.05 var(--display);letter-spacing:-.035em}.top-actions{display:flex;align-items:center;gap:10px}.system-state{height:34px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #bae7dc;color:#08745f;background:#eefaf7;font-size:12px;font-weight:700}.system-state i{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(15,159,131,.13)}.system-state.offline{color:#946116;background:#fff8e9;border-color:#efdbaf}.system-state.offline i{background:var(--amber);box-shadow:none}.icon-button{width:36px;height:36px;border:1px solid var(--line);color:var(--ink2);background:#fff}.logout-form{margin:0}.user-button{display:flex;align-items:center;gap:10px;padding:4px 4px 4px 10px;border:0;color:var(--ink);background:transparent;text-align:left}.user-button>span:first-child{width:36px;height:36px;display:grid;place-items:center;order:2;border-radius:9px;color:#fff;background:var(--blue);font-weight:800}.user-button>span:nth-child(2){font-size:12px;font-weight:700}.user-button small{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:500}.user-button i{order:3;color:var(--muted)}
.demo-banner,.compliance-banner{display:flex;align-items:center;gap:12px;margin:18px 0;padding:12px 14px;border-left:3px solid var(--amber);color:#7a5317;background:#fff8e9;font-size:12px}.demo-banner strong,.compliance-banner strong{flex:0 0 auto;padding:4px 7px;color:#6d4a14;background:#f3dfb4;font-size:10px}.demo-banner span,.compliance-banner span{flex:1}.demo-banner button{border:0;color:#8d6b36;background:transparent;font-size:20px}.compliance-banner{border-left-color:var(--signal);color:#176c5b;background:#effaf7}.compliance-banner strong{color:#0b6755;background:#cfeee6}
.view{display:none}.view.active{display:block;animation:view-in .22s ease-out}@keyframes view-in{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}.hero-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.7fr);gap:16px}.signal-card,.readiness-card,.panel,.asset-card{border:1px solid var(--line);background:#fff;box-shadow:0 7px 25px rgba(19,34,54,.04)}.signal-card{min-height:310px;padding:23px}.readiness-card{padding:23px;border-top:3px solid var(--signal)}.signal-head,.panel-head,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.signal-head h2,.panel-head h2,.readiness-card h2{margin:7px 0 0;font:720 19px/1.2 var(--display)}.signal-head select{height:34px;padding:0 10px;border:1px solid var(--line);color:var(--ink2);background:#fff;font-size:12px}.signal-chart{min-height:174px;margin:18px 0 13px}.chart-legend{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:11px}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{width:8px;height:8px;border-radius:50%;background:var(--blue)}.chart-legend i.coral{background:var(--coral)}.chart-legend strong{margin-left:auto;color:var(--ink)}
.score{display:flex;align-items:baseline;margin:23px 0 9px}.score strong{font:750 40px/1 var(--mono);letter-spacing:-.06em}.score span{color:var(--muted);font:13px var(--mono)}.score-bar{height:5px;background:#e8eeec}.score-bar i{display:block;height:100%;background:var(--signal)}.checklist{display:grid;margin:19px 0 0;padding:0;list-style:none}.checklist li{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid #e8edec}.checklist li>span{width:8px;height:8px;overflow:hidden;border-radius:50%;color:transparent;background:#afbbc4}.checklist strong,.checklist small{display:block}.checklist strong{font-size:12px}.checklist small{margin-top:3px;color:var(--muted);font-size:10px}
.metric-grid,.monitor-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.metric-grid article{min-height:103px;display:flex;align-items:center;gap:14px;padding:17px;border:1px solid var(--line);background:#fff}.metric-grid article:after{content:"";align-self:stretch;width:2px;margin-left:auto;background:#dce5e7}.metric-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid #cbd9ef;color:var(--blue);background:#eff4fc;font:17px var(--mono)}.metric-icon.mint{color:var(--signal-dark);background:#edf8f5}.metric-icon.violet{color:var(--violet);background:#f3f0fb}.metric-icon.amber{color:var(--amber);background:#fff7ea}.metric-grid small,.metric-grid strong,.metric-grid em{display:block}.metric-grid small{color:var(--muted);font-size:11px}.metric-grid strong{margin:4px 0 3px;font:750 22px var(--mono)}.metric-grid em{color:var(--signal-dark);font-size:9px;font-style:normal}
.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{padding:21px}.panel-head{align-items:center;margin-bottom:14px}.panel-head>button{border:0;color:var(--blue);background:transparent;font-size:12px;font-weight:700}.quick-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.quick-grid button{min-height:79px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:11px;padding:13px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);background:#fff;text-align:left}.quick-grid button:hover{background:#f4f9f7}.quick-grid button>span{color:var(--signal);font:19px var(--mono)}.quick-grid strong,.quick-grid small{display:block}.quick-grid strong{font-size:12px}.quick-grid small{margin-top:4px;color:var(--muted);font-size:10px}.quick-grid i{color:#8a99aa}.timeline{min-height:174px}
.section-head{align-items:end;margin:25px 0 18px}.section-head h2{margin:0 0 7px;font:740 22px/1.2 var(--display)}.section-head p{max-width:720px;margin:0;color:var(--muted);font-size:13px;line-height:1.6}.primary-button,.ghost-button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--line);color:var(--ink2);background:#fff;font-size:12px;font-weight:750}.primary-button{border-color:var(--signal);color:#fff;background:var(--signal)}.primary-button:hover{background:var(--signal-dark)}.ghost-button:hover{background:#f5f8f7}
.connection-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff}.connection-summary div{padding:16px 18px}.connection-summary div+div{border-left:1px solid var(--line)}.connection-summary small,.connection-summary strong{display:block}.connection-summary small{color:var(--muted);font-size:10px}.connection-summary strong{margin-top:7px;font:750 16px var(--mono)}.asset-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0}.asset-card{padding:18px}.asset-card.selected{border-color:#9ccfc4;box-shadow:inset 3px 0 var(--signal)}.asset-main{display:flex;align-items:center;gap:12px}.asset-mark{width:42px;height:42px;display:grid;place-items:center;color:var(--blue);background:#edf3fc;font-weight:800}.asset-mark.alt{color:var(--violet);background:#f2effa}.asset-main>div{min-width:0;flex:1}.asset-main h3{margin:0;font-size:14px}.asset-main p{margin:5px 0 0;overflow-wrap:anywhere;color:var(--muted);font:10px/1.4 var(--mono)}.status{padding:5px 8px;color:var(--signal-dark);background:#e9f7f3;font-size:10px;font-weight:700}.asset-meta{display:flex;gap:18px;margin:15px 0;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.asset-card .ghost-button{width:100%}
.segmented,.filter-row{display:flex;padding:3px;background:#edf1f2}.segmented button,.filter-row button{padding:7px 10px;border:0;color:var(--muted);background:transparent;font-size:10px}.segmented .active,.filter-row .active{color:var(--ink);background:#fff;box-shadow:0 2px 6px rgba(19,34,54,.08)}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse}th{padding:11px 12px;border-bottom:1px solid #c8d3da;color:var(--muted);background:#f7f9f8;font-size:10px;text-align:left}td{padding:14px 12px;border-bottom:1px solid #e7ecee;color:var(--ink2);font-size:12px}td strong{color:var(--ink)}.quality,.direction,.http{padding:5px 7px;font-size:9px;font-weight:750}.quality.high,.direction.in,.http.ok{color:var(--signal-dark);background:#e9f7f3}.quality.medium,.http.warn{color:#966119;background:#fff3dc}.direction.out{color:var(--blue);background:#edf3fc}.dot-label{display:inline-flex;align-items:center;gap:7px}.dot-label i{width:7px;height:7px;border-radius:50%;background:var(--signal)}.dot-label.off i{background:var(--amber)}
.inbox-shell{height:calc(100vh - 130px);min-height:590px;display:grid;grid-template-columns:280px minmax(380px,1fr) 235px;margin-top:20px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);overflow:hidden}.conversation-column,.context-column{background:#f7f9f8}.conversation-column{border-right:1px solid var(--line)}.conversation-head{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 14px}.conversation-head h2{margin:0;font-size:19px}.conversation-head button{width:32px;height:32px;border:1px solid var(--line);background:#fff}.conversation-tabs{display:flex;gap:4px;padding:0 14px 13px}.conversation-tabs button{padding:7px 9px;border:0;color:var(--muted);background:transparent;font-size:10px}.conversation-tabs .active{color:var(--signal-dark);background:#e5f4f0;font-weight:750}.conversation-list{display:grid}.conversation{display:flex;gap:10px;padding:14px;border:0;border-top:1px solid #e4eaeb;color:var(--ink);background:transparent;text-align:left}.conversation:hover{background:#eef4f2}.conversation.active{background:#e7f3f0;box-shadow:inset 3px 0 var(--signal)}.conversation>div{min-width:0;flex:1}.conversation strong{display:flex;justify-content:space-between;font-size:12px}.conversation time{color:#8c99a6;font-size:9px}.conversation p{overflow:hidden;margin:6px 0;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.conversation small{color:#78899a;font-size:9px}.conversation em{min-width:18px;height:18px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--coral);font-size:9px;font-style:normal}.contact-avatar{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:#fff;background:var(--coral);font-size:10px;font-weight:800}.contact-avatar.blue{background:var(--blue)}.contact-avatar.violet{background:var(--violet)}.contact-avatar.large{width:58px;height:58px;font-size:14px}
.chat-column{min-width:0;display:grid;grid-template-rows:auto 1fr auto}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}.chat-head>div{display:flex;align-items:center;gap:10px}.chat-head h2{margin:0;font-size:14px}.chat-head p{margin:4px 0 0;color:var(--muted);font-size:10px}.chat-head button{padding:7px 9px;border:1px solid var(--line);background:#fff;font-size:10px}.messages{overflow-y:auto;padding:22px;background:#f8faf9}.message{width:fit-content;max-width:72%;margin:11px 0;padding:11px 13px 8px;box-shadow:0 4px 12px rgba(19,34,54,.05)}.message p{margin:0;font-size:12px;line-height:1.55}.message time{display:block;margin-top:6px;color:#84919f;font-size:9px;text-align:right}.message.inbound{border:1px solid var(--line);background:#fff}.message.outbound{margin-left:auto;color:#0e6253;background:#dff3ee}.composer{display:flex;align-items:end;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}.composer>button:not(.send-button){width:34px;height:34px;border:1px solid var(--line);background:#f5f7f6}.composer textarea{min-height:36px;max-height:100px;flex:1;resize:none;padding:9px 11px;border:1px solid var(--line);outline:none}.send-button{height:36px;padding:0 15px;border:0;color:#fff;background:var(--signal);font-size:11px;font-weight:800}.context-column{padding:20px;border-left:1px solid var(--line)}.profile{display:grid;justify-items:center;margin:26px 0}.profile h3{margin:11px 0 0}.profile p{margin:5px 0 0;color:var(--muted);font-size:10px}
.monitor-metrics article{padding:17px;border:1px solid var(--line);border-top:3px solid #c8d4d8;background:#fff}.monitor-metrics article:nth-child(2){border-top-color:var(--blue)}.monitor-metrics article:nth-child(3){border-top-color:var(--signal)}.monitor-metrics article:nth-child(4){border-top-color:var(--coral)}.monitor-metrics small,.monitor-metrics strong,.monitor-metrics em{display:block}.monitor-metrics small{color:var(--muted);font-size:10px}.monitor-metrics strong{margin:9px 0 6px;font:750 23px var(--mono)}.monitor-metrics em{color:var(--signal-dark);font-size:9px;font-style:normal}.monitor-metrics em.danger{color:var(--danger)}.campaign-panel{min-height:310px}.campaign-action{padding:7px 10px;border:1px solid var(--line);color:var(--signal-dark);background:#fff;font-size:10px;font-weight:800}
.empty-state{width:100%;min-height:126px;display:grid;place-content:center;gap:7px;padding:30px;border:1px dashed #c8d3da;color:var(--muted);background:#f9fbfa;text-align:center}.empty-state:before{content:"···";color:var(--signal);font:750 18px var(--mono);letter-spacing:.2em}.empty-state strong{color:var(--ink);font-size:14px}.empty-state p{margin:0;font-size:11px;line-height:1.6}.empty-cell{padding:38px!important;color:var(--muted);text-align:center}.security-note{display:flex;gap:11px;margin:0 24px 16px;padding:12px;border-left:3px solid var(--signal);color:#176c5b;background:#eff8f5}.security-note p{margin:0;font-size:11px;line-height:1.55}.webhook-config{margin:0 0 16px}.webhook-config code{overflow-wrap:anywhere;color:#24455c;background:rgba(19,34,54,.07);font-family:var(--mono)}
dialog{width:min(540px,calc(100vw - 28px));padding:0;border:0;color:var(--ink);background:#fff;box-shadow:0 28px 90px rgba(15,30,45,.3)}dialog::backdrop{background:rgba(13,27,43,.62);backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;gap:14px;padding:24px 24px 16px;border-top:4px solid var(--signal)}.dialog-head h2{margin:8px 0 5px;font:740 21px var(--display)}.dialog-head p{margin:0;color:var(--muted);font-size:11px}.dialog-head>button{width:32px;height:32px;border:1px solid var(--line);background:#f5f7f6;font-size:19px}#connection-form>label{display:block;margin:0 24px 14px;color:var(--ink2);font-size:11px;font-weight:750}#connection-form input,.campaign-form-grid input,.campaign-form-grid select{width:100%;min-height:42px;margin-top:7px;padding:0 11px;border:1px solid #c8d3da;outline:none;background:#fcfdfd;font-size:12px}.secret-input{position:relative}.secret-input button{position:absolute;right:7px;top:14px;height:28px;border:0;background:#edf2f1;font-size:10px}.secret-input input{padding-right:56px!important}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px 22px;border-top:1px solid var(--line)}.campaign-dialog{width:min(700px,calc(100vw - 28px))}.campaign-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:0 24px 16px}.campaign-form-grid label{display:grid;color:var(--ink2);font-size:11px;font-weight:750}.campaign-form-grid input[type=file]{padding:8px}.campaign-form-grid small{margin-top:5px;color:var(--muted);font-size:9px}.recipient-preview{margin:0 24px 14px;padding:13px;border:1px dashed #aebdc4;background:#f7faf9}.recipient-preview p{margin:5px 0 0;color:var(--muted);font-size:10px}.consent-check{display:flex;gap:9px;margin:0 24px 16px;padding:12px;color:#79551d;background:#fff7e7;font-size:11px;line-height:1.55}.toast{position:fixed;right:24px;bottom:24px;z-index:10;max-width:380px;padding:12px 15px;color:#fff;background:#15283b;box-shadow:var(--shadow);font-size:11px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s}.toast.show{opacity:1;transform:none}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:28px;background:#eaf0ef}.auth-page:before{content:"";position:fixed;inset:0 50% 0 0;z-index:-1;background:var(--rail)}.auth-card{width:min(460px,100%);padding:38px;border-top:5px solid var(--signal);background:#fff;box-shadow:0 24px 70px rgba(19,34,54,.16)}.auth-brand{display:flex;align-items:baseline;gap:11px;margin-bottom:32px}.auth-brand strong{font:800 16px var(--mono);letter-spacing:.14em}.auth-brand span{color:var(--muted);font-size:11px}.auth-card h1{margin:0 0 9px;font:750 30px var(--display)}.auth-card>p{margin:0 0 26px;color:var(--muted);font-size:13px;line-height:1.7}.auth-card form{display:grid;gap:17px}.auth-card label{display:grid;gap:7px;color:var(--ink2);font-size:12px;font-weight:750}.auth-card input{width:100%;height:46px;padding:0 13px;border:1px solid #c8d3da;outline:none;background:#fbfdfc}.auth-card .primary-button{width:100%;min-height:46px}.auth-error{margin:12px 0 18px;padding:11px 13px;color:#a63838;background:#fff0f0;font-size:12px}
@media(max-width:1180px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.main{padding:0 20px 34px}.hero-grid{grid-template-columns:1fr}.inbox-shell{grid-template-columns:250px 1fr}.context-column{display:none}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:static;width:100%;height:auto;padding:16px}.sidebar:after,.sidebar-foot,.nav-label{display:none}.brand{padding-bottom:14px}.workspace-chip{margin-bottom:12px}.nav{grid-template-columns:repeat(2,1fr)}.nav-item.active:before{left:0;top:auto;right:0;bottom:0;width:auto;height:2px}.main{padding:0 13px 28px}.topbar{height:84px}#page-title{font-size:24px}.system-state,.icon-button,.user-button>span:nth-child(2),.user-button i{display:none}.metric-grid,.monitor-metrics,.connection-summary{grid-template-columns:repeat(2,1fr)}.lower-grid,.asset-list{grid-template-columns:1fr}.inbox-shell{height:auto;grid-template-columns:1fr}.conversation-column{max-height:330px;overflow:auto}.chat-column{min-height:540px}}
@media(max-width:560px){.metric-grid,.monitor-metrics{grid-template-columns:1fr}.quick-grid,.campaign-form-grid{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.section-head .primary-button,.section-head .ghost-button{width:100%}.demo-banner,.compliance-banner{align-items:flex-start;flex-wrap:wrap}.auth-page:before{inset:0 0 50%}.auth-card{padding:28px 22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Tabler application layer */
:root {
  --signal: var(--tblr-primary, #066fd1);
  --signal-dark: #0054a6;
  --blue: var(--tblr-primary, #066fd1);
  --canvas: var(--tblr-bg-surface-secondary, #f5f7fb);
  --surface: var(--tblr-bg-surface, #fff);
  --ink: var(--tblr-body-color, #182433);
  --ink2: var(--tblr-secondary-color, #626976);
  --muted: var(--tblr-secondary-color, #626976);
  --line: var(--tblr-border-color, #e6e7e9);
  --shadow: var(--tblr-box-shadow-card, 0 1px 2px rgba(24,36,51,.04));
}
body { font-family: var(--tblr-body-font-family, var(--body)); background: var(--canvas); }
.sidebar.navbar { width: 232px; padding: 18px 12px; color: var(--ink2); background: #fff; border-right: 1px solid var(--line); box-shadow: 1px 0 0 rgba(24,36,51,.02); }
.sidebar::after { background: #edf0f2; }
.brand strong { color: var(--ink); }
.brand small { color: var(--muted); }
.brand-mark { border: 1px solid #d8dee7; border-radius: var(--tblr-border-radius-lg, 6px); background: #f4f7fb; }
.workspace-chip { border: 1px solid var(--line); border-radius: var(--tblr-border-radius-lg, 6px); background: #f8fafc; }
.workspace-chip strong { color: var(--ink); }
.workspace-chip small, .workspace-chip button { color: var(--muted); }
.workspace-chip .avatar { background: var(--tblr-primary, #066fd1); }
.nav-label { color: #929dab; }
.nav-item { border-radius: var(--tblr-border-radius, 4px); color: #526070; }
.nav-item > span { color: #78879a; }
.nav-item:hover { color: var(--tblr-primary, #066fd1); background: #f1f5fb; }
.nav-item.active { color: var(--tblr-primary, #066fd1); background: rgba(6,111,209,.09); }
.nav-item.active::before { left: -12px; background: var(--tblr-primary, #066fd1); }
.nav-item.active > span { color: var(--tblr-primary, #066fd1); }
.sidebar-foot { border-top-color: var(--line); }
.sidebar-foot strong { color: var(--ink); }
.sidebar-foot small { color: var(--muted); }
.quota-ring { border-color: #c9d8eb; border-radius: var(--tblr-border-radius, 4px); color: var(--tblr-primary, #066fd1); background: #eef5fc; }
.main { margin: 0; background: var(--canvas); }
.topbar { border-bottom: 0; }
#page-kicker, .eyebrow { color: var(--tblr-primary, #066fd1); }
#page-title { font-weight: 700; letter-spacing: -.025em; }
.system-state { border-color: #bfe3d6; border-radius: 999px; }
.icon-button, .user-button > span:first-child { border-radius: var(--tblr-border-radius, 4px); }
.demo-banner, .compliance-banner, .security-note { border: 1px solid var(--tblr-border-color, #e6e7e9); border-left: 4px solid var(--tblr-warning, #f59f00); border-radius: var(--tblr-border-radius-lg, 6px); }
.compliance-banner, .security-note { border-left-color: var(--tblr-success, #2fb344); }
.signal-card, .readiness-card, .panel, .asset-card, .metric-grid article, .monitor-metrics article, .connection-summary, .inbox-shell { border-color: var(--line); border-radius: var(--tblr-border-radius-card, 6px); box-shadow: var(--shadow); }
.readiness-card { border-top: 1px solid var(--line); }
.readiness-card::before { content: ""; display: block; width: 42px; height: 3px; margin: -23px 0 20px; border-radius: 3px; background: var(--tblr-primary, #066fd1); }
.signal-head select, .segmented, .filter-row, .conversation-head button, .chat-head button, .composer textarea, .composer > button:not(.send-button) { border-radius: var(--tblr-border-radius, 4px); }
.metric-grid article::after { display: none; }
.metric-icon, .asset-mark { border-radius: var(--tblr-border-radius, 4px); }
.metric-icon.mint { color: var(--tblr-success, #2fb344); background: rgba(47,179,68,.08); border-color: rgba(47,179,68,.18); }
.quick-grid { border-radius: var(--tblr-border-radius, 4px); overflow: hidden; }
.primary-button.btn, .ghost-button.btn { border-radius: var(--tblr-border-radius, 4px); }
.primary-button.btn { border-color: var(--tblr-primary, #066fd1); background: var(--tblr-primary, #066fd1); box-shadow: var(--tblr-btn-box-shadow); }
.primary-button.btn:hover { border-color: #0054a6; background: #0054a6; }
.connection-summary { overflow: hidden; }
.asset-card.selected { border-color: rgba(6,111,209,.35); box-shadow: inset 3px 0 var(--tblr-primary, #066fd1), var(--shadow); }
.status, .quality, .direction, .http, .tag { border-radius: var(--tblr-border-radius, 4px); }
th { background: var(--tblr-bg-surface-secondary, #f5f7fb); }
.conversation-tabs .active, .conversation.active { color: var(--tblr-primary, #066fd1); background: rgba(6,111,209,.08); }
.conversation.active { box-shadow: inset 3px 0 var(--tblr-primary, #066fd1); }
.send-button { border-radius: var(--tblr-border-radius, 4px); background: var(--tblr-primary, #066fd1); }
.monitor-metrics article { border-top: 1px solid var(--line); }
.monitor-metrics article::before { content: ""; display: block; width: 30px; height: 3px; margin-bottom: 13px; border-radius: 3px; background: #929dab; }
.monitor-metrics article:nth-child(2)::before { background: var(--tblr-primary, #066fd1); }
.monitor-metrics article:nth-child(3)::before { background: var(--tblr-success, #2fb344); }
.monitor-metrics article:nth-child(4)::before { background: var(--tblr-danger, #d63939); }
.empty-state, .recipient-preview { border-radius: var(--tblr-border-radius-lg, 6px); }
dialog, .dialog-head > button, #connection-form input, .campaign-form-grid input, .campaign-form-grid select, .secret-input button, .toast { border-radius: var(--tblr-border-radius-lg, 6px); }
.dialog-head { border-top-color: var(--tblr-primary, #066fd1); }
.auth-page { background: var(--tblr-bg-surface-secondary, #f5f7fb); }
.auth-page::before { display: none; }
.auth-card { border: 1px solid var(--line); border-top: 4px solid var(--tblr-primary, #066fd1); border-radius: var(--tblr-border-radius-card, 6px); box-shadow: 0 12px 30px rgba(24,36,51,.10); }
.auth-card input.form-control { border-radius: var(--tblr-border-radius, 4px); }

@media(max-width:820px) {
  .sidebar.navbar { width: 100%; }
  .nav-item.active::before { left: 0; }
}

.template-library { margin-bottom: 16px; }
.template-library-head p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.template-tools { display: flex; align-items: center; gap: 8px; }
.template-tools select { min-width: 210px; height: 38px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: var(--tblr-border-radius, 4px); background: #fff; font-size: 11px; }
.template-state { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid #b9dfd2; border-left: 4px solid var(--tblr-success, #2fb344); border-radius: var(--tblr-border-radius, 4px); color: #176c5b; background: #eff9f5; font-size: 11px; }
.template-state strong { flex: 0 0 auto; }
.template-state.is-idle { border-color: var(--line); border-left-color: #929dab; color: var(--muted); background: #f7f8fa; }
.template-state.is-blocked { border-color: #f0c2c2; border-left-color: var(--tblr-danger, #d63939); color: #9d3131; background: #fff3f3; }
.template-state.is-cached { border-color: #efd7a7; border-left-color: var(--tblr-warning, #f59f00); color: #805b16; background: #fff8e8; }
.template-content { max-width: 520px; color: var(--ink2); line-height: 1.55; white-space: pre-wrap; }
.availability { display: inline-flex; padding: 5px 7px; border-radius: var(--tblr-border-radius, 4px); font-size: 9px; font-weight: 700; }
.availability.yes { color: #176c5b; background: #e9f7f3; }
.availability.no { color: #9d3131; background: #fff0f0; }
.template-import-field { display: grid; gap: 7px; margin: 0 24px 18px; color: var(--ink2); font-size: 11px; font-weight: 750; }
.template-import-field textarea { width: 100%; padding: 11px; resize: vertical; border: 1px solid #c8d3da; border-radius: var(--tblr-border-radius, 4px); outline: none; font: 11px/1.55 var(--mono); }
.template-import-field textarea:focus { border-color: var(--tblr-primary, #066fd1); box-shadow: 0 0 0 3px rgba(6,111,209,.12); }
@media(max-width:820px) { .template-library-head, .template-tools { align-items: stretch; flex-direction: column; } .template-tools select { min-width: 0; width: 100%; } }

.connection-dialog-wide{width:min(720px,calc(100vw - 28px))}.connection-tabs{display:flex;gap:6px;margin:0 24px 18px;padding:4px;background:#f0f3f6;border-radius:6px}.connection-tabs button{flex:1;padding:10px;border:0;border-radius:4px;color:var(--muted);background:transparent;font-weight:700}.connection-tabs button.active{color:var(--blue);background:#fff;box-shadow:0 1px 4px rgba(24,36,51,.1)}.connection-form-pane{display:none}.connection-form-pane.active{display:block}.connection-form-pane>label{display:block;margin:0 24px 14px;color:var(--ink2);font-size:11px;font-weight:750}.connection-form-pane input{width:100%;min-height:42px;margin-top:7px;padding:0 11px;border:1px solid #c8d3da;background:#fcfdfd}.embedded-status{margin:0 24px 14px;padding:11px 13px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:5px;color:var(--muted);background:#f6f9fc;font-size:11px;line-height:1.55}.dialog-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 24px 18px}.dialog-form-grid label{display:grid;gap:7px;color:var(--ink2);font-size:11px;font-weight:700}.dialog-form-grid input,.dialog-form-grid select,.dialog-form-grid textarea{width:100%;min-height:42px;padding:9px 11px;border:1px solid #c8d3da;border-radius:5px;background:#fcfdfd}.dialog-form-grid textarea{resize:vertical;line-height:1.5}.dialog-form-grid .span-2{grid-column:1/-1}.toggle-label{align-content:end;grid-template-columns:auto 1fr!important;align-items:center}.toggle-label input{width:18px;min-height:18px}.dialog-form-grid fieldset{margin:0;padding:12px;border:1px solid var(--line);border-radius:5px}.dialog-form-grid legend{padding:0 6px;color:var(--ink2);font-size:11px;font-weight:700}.permission-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.permission-list label{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:4px;background:#f8fafc}.permission-list input{width:16px;min-height:16px}.permission-list p{margin:0;color:var(--muted);font-size:11px}.row-actions{display:flex;gap:7px}.row-actions button{padding:6px 8px;border:1px solid var(--line);border-radius:4px;color:var(--blue);background:#fff;font-size:10px}.row-actions .danger-link{color:#b42318}.rule-response{max-width:430px;overflow:hidden;color:var(--ink2);line-height:1.45;white-space:nowrap;text-overflow:ellipsis}.status:not(.good){color:#6c737f;background:#edf0f2}@media(max-width:620px){.dialog-form-grid{grid-template-columns:1fr}.dialog-form-grid .span-2{grid-column:auto}.permission-list{grid-template-columns:1fr}.connection-form-pane .dialog-actions{flex-wrap:wrap}.connection-form-pane .dialog-actions button{flex:1}}

.staff-workspace{margin:16px 0}.staff-workspace .panel-head p{margin:6px 0 0;color:var(--muted);font-size:11px}.staff-phone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.staff-phone-card{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:#fff;text-align:left}.staff-phone-card:hover{border-color:rgba(6,111,209,.45);background:#f7faff}.staff-phone-card strong{font-size:13px}.staff-phone-card small,.staff-phone-card>span:last-child{color:var(--muted);font-size:10px}.staff-phone-state{display:flex;align-items:center;gap:6px;color:#176c5b;font-size:9px}.staff-phone-state i{width:7px;height:7px;border-radius:50%;background:#2fb344}.conversation-phone-filter{padding:0 14px 12px}.conversation-phone-filter select{width:100%;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:4px;color:var(--ink2);background:#fff;font-size:10px}@media(max-width:900px){.staff-phone-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.staff-phone-grid{grid-template-columns:1fr}}

.agent-dialog-wide{width:min(920px,calc(100vw - 28px))}.phone-permission-fieldset{min-width:0}.permission-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:12px}.permission-search{min-width:280px;flex:1}.permission-actions{display:flex;align-items:center;gap:7px}.permission-actions strong{margin-right:5px;color:var(--ink2);font-size:11px;white-space:nowrap}.permission-actions button{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:4px;color:var(--blue);background:#fff;font-size:10px;font-weight:700}.permission-actions button:hover{background:#f1f5fb}.phone-permission-fieldset .permission-list{max-height:310px;grid-template-columns:repeat(3,minmax(0,1fr));padding:2px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.permission-list .permission-phone{min-width:0;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:5px;background:#f8fafc}.permission-list .permission-phone:hover{border-color:rgba(6,111,209,.35);background:#f3f7fc}.permission-list .permission-phone:has(input:checked){border-color:rgba(6,111,209,.45);background:rgba(6,111,209,.07)}.permission-phone>span{min-width:0}.permission-phone strong,.permission-phone small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.permission-phone strong{color:var(--ink);font-size:11px}.permission-phone small{margin-top:3px;color:var(--muted);font:9px var(--mono)}.permission-phone em{padding:3px 5px;border-radius:3px;color:#176c5b;background:#e9f7f3;font-size:8px;font-style:normal;white-space:nowrap}.permission-empty{margin:16px 0;padding:18px;color:var(--muted);text-align:center;font-size:11px}@media(max-width:780px){.permission-toolbar{align-items:stretch;flex-direction:column}.permission-search{min-width:0}.permission-actions{flex-wrap:wrap}.phone-permission-fieldset .permission-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.phone-permission-fieldset .permission-list{grid-template-columns:1fr}.permission-actions strong{width:100%}}
