@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --blue:#2563eb;
  --blue-700:#1d4ed8;
  --blue-800:#1e40af;
  --blue-100:#dbeafe;
  --blue-50:#eff6ff;
  --sky:#eaf4ff;
  --bg:#f6f9ff;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#dbe5f1;
  --line-soft:#edf2f7;
  --green:#15803d;
  --green-bg:#eaf8ef;
  --red:#b42318;
  --red-bg:#fff0ef;
  --yellow:#a16207;
  --yellow-bg:#fff7df;
  --shadow:0 8px 30px rgba(30,64,175,.06);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}
body{font-size:14px}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(37,99,235,.18);outline-offset:2px}

.app{min-height:100vh;display:flex;background:var(--bg)}
.sidebar{width:228px;flex:none;background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);color:#fff;padding:26px 14px 22px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh;box-shadow:8px 0 28px rgba(37,99,235,.08)}
.brand{padding:0 14px 30px}.brand-word{font-size:23px;letter-spacing:.32em;font-weight:800;color:#fff}.brand-tag{margin-top:11px;font-size:8px;line-height:1.8;letter-spacing:.18em;color:#dbeafe;font-weight:600}
.nav{display:grid;gap:5px}.nav button{border:0;background:transparent;color:#eaf2ff;text-align:left;padding:12px 13px;border-radius:10px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;transition:.16s ease}.nav button:hover{background:rgba(255,255,255,.12);color:#fff}.nav button.active{background:#fff;color:var(--blue);box-shadow:0 8px 18px rgba(15,23,42,.1);font-weight:700}.ico{width:18px;display:inline-block;text-align:center;opacity:.95}.nav-arrow{margin-left:auto}.side-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.2);padding:22px 14px 0}.side-bottom .brand-word{font-size:14px}.side-bottom .brand-tag{margin-top:7px;color:#dbeafe}

.main{flex:1;min-width:0;padding:30px 34px 44px}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:24px}.title h1{font-size:36px;line-height:1.1;margin:0 0 7px;font-weight:800;letter-spacing:-.035em;color:#102a56}.title p{margin:0;color:var(--muted);font-size:13px}.top-actions{display:flex;align-items:center;gap:11px}.search{width:min(500px,35vw);height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;display:flex;align-items:center;padding:0 13px;gap:9px;color:#7890ad;box-shadow:0 2px 12px rgba(15,23,42,.025)}.search:focus-within{border-color:#93b4fa;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.search input{border:0;outline:0;background:transparent;flex:1;color:var(--ink);font-size:13px;min-width:0}.user{border-left:1px solid var(--line);padding-left:14px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}.user small{display:block;color:#8190a5;font-weight:500;margin-top:2px}.avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-100);color:var(--blue-800);display:grid;place-items:center;font-weight:800}.logout{border:0;background:transparent;color:#718198;font-size:11px;padding:4px}.logout:hover{color:var(--blue)}.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--blue);box-shadow:0 2px 12px rgba(15,23,42,.025)}.icon-btn:hover{background:var(--blue-50);border-color:#bfd3fb}

.switch-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.switch-card{border:1px solid var(--line);background:#fff;border-radius:14px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}.switch-copy{display:flex;gap:13px;align-items:center}.switch-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--blue);background:var(--blue-50)}.switch-copy strong{font-size:12px;letter-spacing:.02em}.switch-copy span{display:block;color:var(--muted);font-size:11px;margin-top:5px}.toggle{border:1px solid #cbd5e1;background:#e7edf5;width:92px;height:38px;border-radius:22px;position:relative;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;color:#64748b;font-size:10px;font-weight:800;transition:.15s ease}.toggle .knob{position:absolute;left:4px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(15,23,42,.16);transition:.15s ease}.toggle.on{background:var(--blue);border-color:var(--blue);color:#fff;justify-content:flex-start}.toggle.on .knob{left:auto;right:4px}.toggle:disabled{opacity:.5;cursor:not-allowed}

.grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.card{border:1px solid var(--line);background:#fff;border-radius:13px;padding:18px 18px 16px;min-height:104px;box-shadow:0 5px 20px rgba(30,64,175,.035)}.card small,.summary-card small{color:#7a8da6;font-size:9px;letter-spacing:.08em;font-weight:700}.metric{font-size:29px;margin-top:18px;font-weight:800;color:#102a56;letter-spacing:-.035em}
.panel{border:1px solid var(--line);background:#fff;border-radius:14px;box-shadow:var(--shadow)}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line-soft);gap:15px}.panel-head h2{font-size:14px;margin:0;color:#17345f}.panel-head p{margin:5px 0 0;color:var(--muted);font-size:11px}.panel-head>span{font-size:10px;color:#7a8da6}.activity{min-height:250px}.chart{height:185px;padding:20px 22px 18px;display:flex;align-items:flex-end;gap:10px}.chart-day{flex:1;height:100%;display:flex;align-items:flex-end;gap:2px;min-width:6px}.bar{flex:1;min-height:2px;border-radius:4px 4px 1px 1px}.bar.leads,.lg.leads{background:#60a5fa}.bar.sent,.lg.sent{background:#2563eb}.bar.replies,.lg.replies{background:#93c5fd}.legend{font-size:9px;color:#7a8da6;display:flex;align-items:center;gap:5px}.lg{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:7px}.sidecol{display:grid;gap:14px;align-content:start}.feed{overflow:hidden}.feed-item{display:grid;grid-template-columns:10px 1fr auto;align-items:start;gap:9px;padding:12px 15px;border-bottom:1px solid var(--line-soft)}.feed-item:last-child{border-bottom:0}.feed-item .dot{width:7px;height:7px;background:#fff;border:2px solid var(--blue);border-radius:50%;margin-top:5px}.feed-item strong{font-size:10px;display:block}.feed-item span{font-size:9px;color:#7a8da6;display:block;margin-top:4px}.feed-item .time{font-size:8px;color:#94a3b8}.status{padding:18px}.status-head{display:flex;align-items:center;gap:8px}.status-head h3{font-size:13px;margin:0;color:#17345f}.status-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #dcfce7}.status>p{font-size:10px;color:#7a8da6}.mini-row,.setting-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-soft);padding:13px 0;gap:16px}.mini-row .left{display:flex;align-items:center;gap:9px}.mini-row strong,.setting-row strong{font-size:10px}.mini-row small,.setting-row span{display:block;font-size:9px;color:#7a8da6;margin-top:3px}.status .toggle,.setting-row .toggle{transform:scale(.78);transform-origin:right center}.pad{padding:18px}.muted{color:#7a8da6;font-size:11px}

.summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px}.summary-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 4px 18px rgba(30,64,175,.03)}.summary-card strong{display:block;font-size:25px;margin-top:9px;color:#102a56}.page-panel{overflow:hidden}.table-wrap{overflow:auto;max-width:100%}.table{width:100%;border-collapse:collapse;font-size:11px}.table th{text-align:left;padding:12px 16px;color:#71849c;font-size:8px;letter-spacing:.09em;border-bottom:1px solid var(--line);background:#f8fbff;white-space:nowrap}.table td{padding:14px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}.table tbody tr:last-child td{border-bottom:0}.table tbody tr:hover{background:var(--blue-50)}.table .company{display:flex;gap:10px;align-items:center}.logo{width:30px;height:30px;border-radius:9px;background:var(--blue-100);color:var(--blue-800);display:grid;place-items:center;font-weight:800;font-size:10px;flex:none}.company strong{display:block;color:#17345f}.company small{display:block;color:#8a9bb0;font-size:8px;margin-top:3px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#edf2f7;color:#52657a;font-size:8px;text-transform:uppercase;font-weight:800;letter-spacing:.05em}.pill.green{background:var(--green-bg);color:var(--green)}.pill.yellow{background:var(--yellow-bg);color:var(--yellow)}.pill.red{background:var(--red-bg);color:var(--red)}.pill.blue{background:var(--blue-50);color:var(--blue-700)}.wrap-cell{max-width:420px;white-space:normal;line-height:1.5}.message-stack{display:flex;flex-wrap:wrap;gap:4px}.message-stack span{font-size:8px;background:var(--blue-50);color:var(--blue-800);border-radius:5px;padding:4px 6px}.empty-cell{text-align:center!important;color:#8a9bb0!important;padding:40px!important}.winner{font-size:8px;font-weight:800;background:var(--green-bg);color:var(--green);padding:5px 8px;border-radius:6px}

.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-card{padding:22px}.settings-card h2{margin:0 0 17px;font-size:15px;color:#17345f}.field-label{font-size:10px;font-weight:700}.cap-row{display:flex;gap:9px;margin-top:8px}.cap-row input,.suppression-form input{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fff;color:var(--ink)}.cap-row input{width:140px}.cap-row input:focus,.suppression-form input:focus{border-color:#93b4fa}.helper{display:block;color:#7a8da6;margin-top:9px}.pipeline-list{display:grid;gap:0;margin-bottom:16px}.pipeline-list div{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:10px}.pipeline-list span{color:#6f8197}.ok{color:var(--green)}.warn{color:var(--red)}.primary,.secondary,.danger{border-radius:9px;padding:10px 14px;font-size:10px;font-weight:800;transition:.15s ease}.primary{border:1px solid var(--blue);background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.14)}.primary:hover{background:var(--blue-700);border-color:var(--blue-700)}.secondary{border:1px solid var(--line);background:#fff;color:#32527a}.secondary:hover{background:var(--blue-50);border-color:#bfd3fb}.danger{border:1px solid #fecaca;background:#fff;color:var(--red)}.danger:hover{background:var(--red-bg)}.danger.ghost{background:#fff}.danger:disabled,.primary:disabled,.secondary:disabled{opacity:.45;cursor:not-allowed}.full{width:100%;margin-top:10px}.run-result{font-size:9px;color:#52657a;background:var(--blue-50);border:1px solid #dbeafe;border-radius:8px;padding:9px;margin-top:8px;line-height:1.4}

.loading{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eff6ff 0%,#f8fbff 55%,#dbeafe 100%)}.loading-card{width:min(480px,90vw);background:#fff;border:1px solid var(--line);border-radius:18px;padding:42px;box-shadow:0 18px 50px rgba(37,99,235,.10)}.loading-card .brand-word{font-size:24px;color:var(--blue);letter-spacing:.28em}.loading-card .brand-tag{color:#6f86a2}.error{margin-top:18px;background:var(--red-bg);color:var(--red);border:1px solid #fecaca;border-radius:9px;padding:10px;font-size:11px;word-break:break-word}

/* Interactive detail views */
.clickable-row{cursor:pointer}.clickable-row:hover{background:var(--blue-50)!important}.open-cell{white-space:nowrap;color:var(--blue);font-size:9px;font-weight:800;text-align:right}.truncate-reply{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer-backdrop{position:fixed;inset:0;background:rgba(15,42,86,.24);z-index:100;display:flex;justify-content:flex-end;backdrop-filter:blur(2px)}.drawer{height:100vh;width:min(720px,94vw);background:#f8fbff;box-shadow:-18px 0 45px rgba(15,42,86,.14);overflow:auto;padding:28px 30px 40px}.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}.drawer-head h2{font-size:28px;line-height:1.12;margin:6px 0 8px;font-weight:800;color:#102a56;letter-spacing:-.025em}.eyebrow{font-size:8px;letter-spacing:.15em;color:var(--blue);font-weight:800}.drawer-sub{display:flex;align-items:center;gap:8px;font-size:10px;color:#6f8197}.drawer-close{border:1px solid var(--line);background:#fff;width:36px;height:36px;border-radius:10px;font-size:20px;line-height:1;color:#17345f}.drawer-close:hover{background:var(--blue-50);color:var(--blue)}.drawer-actions{display:flex;gap:8px;margin:16px 0}.action-link{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}.detail-grid.one{grid-template-columns:1fr}.detail-grid section,.drawer-section{border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px;box-shadow:0 4px 18px rgba(30,64,175,.025)}.detail-grid h3,.drawer-section h3{font-size:10px;margin:0 0 11px;text-transform:uppercase;letter-spacing:.07em;color:#365a88}.detail-row{display:grid;grid-template-columns:125px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:10px}.detail-row:last-child{border-bottom:0}.detail-row span{color:#7a8da6}.detail-row strong{font-weight:600;white-space:pre-wrap;word-break:break-word;color:#17345f}.drawer-section{margin-top:13px}.copy-card{border:1px solid #dfe9f5;border-radius:10px;padding:13px;margin-top:9px;background:#fbfdff}.copy-card:first-of-type{margin-top:0}.copy-head{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:9px;color:#6f8197}.copy-head strong{color:#17345f}.copy-subject{font-size:10px;font-weight:800;margin-top:9px;color:#17345f}.copy-body,.reply-full{font-size:10px;line-height:1.65;white-space:pre-wrap;word-break:break-word;margin-top:8px;color:#425b78}.reply-full.body{background:var(--blue-50);border:1px solid #dbeafe;border-radius:9px;padding:14px;margin-top:0}.detail-empty{color:#7a8da6;font-size:10px;padding:11px 0}.detail-error{margin-top:9px;padding:8px;border-radius:8px;background:var(--red-bg);color:var(--red);font-size:9px}

.suppression-form{display:grid;grid-template-columns:1.2fr 1fr auto;gap:9px;padding:0 18px 16px}.suppression-form input,.test-label+* input{min-width:0}.reply-actions{flex-wrap:wrap}.test-label{margin-top:17px;display:block}

@media(max-width:1100px){.sidebar{width:194px}.main{padding:26px 22px}.cards{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.sidecol{grid-template-columns:1fr 1fr}.search{width:300px}.settings-grid{grid-template-columns:1fr}.summary-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.app{display:block}.sidebar{width:100%;height:auto;min-height:0;position:relative;padding:18px}.brand{padding:0 4px 16px}.nav{display:flex;overflow:auto;padding-bottom:3px}.nav button{white-space:nowrap}.side-bottom{display:none}.main{padding:22px 16px}.top{align-items:flex-start;flex-direction:column}.top-actions{width:100%;flex-wrap:wrap}.search{width:100%;order:3}.switch-row{grid-template-columns:1fr}.sidecol{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.drawer{padding:22px 18px}.drawer-head h2{font-size:25px}.suppression-form{grid-template-columns:1fr}}