*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --v:#534AB7;--vd:#3C3489;--vm:#7F77DD;--vl:#EEEDFE;
  --bg:#f0effe;--card:#fff;--text:#1a1a1a;--muted:#6b7280;
  --border:#e5e7eb;--row:#f9f7ff;
}
body[data-theme="dark"]{
  --bg:#13111f;--card:#1e1b30;--text:#f0eeff;--muted:#9ca3af;
  --border:#2e2a4a;--row:#231f38;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;color:var(--text);background:var(--bg);height:100vh;overflow:hidden;transition:background .3s,color .3s}

/* AUTH */
#auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.auth-box{background:var(--card);border-radius:16px;padding:2rem;width:380px;box-shadow:0 4px 32px rgba(83,74,183,0.15)}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:1.5rem;font-size:18px;font-weight:600;color:var(--v)}
.auth-tabs{display:flex;gap:4px;margin-bottom:1.5rem;border-bottom:1px solid var(--border)}
.auth-tabs button{background:none;border:none;padding:8px 16px;cursor:pointer;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.auth-tabs button.active{color:var(--v);border-bottom-color:var(--v);font-weight:500}
.auth-error{background:#fef2f2;color:#dc2626;border-radius:6px;padding:10px 14px;margin-bottom:12px;font-size:13px}
.full{width:100%}

/* LAYOUT */
#app{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar{width:220px;background:var(--vd);display:flex;flex-direction:column;flex-shrink:0;transition:background .3s}
.sidebar-logo{display:flex;align-items:center;gap:8px;padding:1.25rem 1rem;font-size:16px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,0.1)}
.sidebar-logo svg{flex-shrink:0}
nav{flex:1;padding:.75rem .5rem;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,0.65);text-decoration:none;font-size:13px;transition:background .15s,color .15s}
.nav-item svg{flex-shrink:0;opacity:.8}
.nav-item:hover{background:rgba(255,255,255,0.1);color:#fff}
.nav-item:hover svg{opacity:1}
.nav-item.active{background:rgba(255,255,255,0.18);color:#fff;font-weight:500}
.nav-item.active svg{opacity:1}
.sidebar-footer{padding:.75rem .5rem;border-top:1px solid rgba(255,255,255,0.1)}
.sidebar-footer-top{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;margin-bottom:4px}
.sidebar-user{font-size:11px;color:rgba(255,255,255,0.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.sidebar-actions{display:flex;align-items:center;gap:4px}
.icon-btn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.55);padding:5px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.icon-btn:hover{background:rgba(255,255,255,0.1);color:#fff}
.powered{text-align:center;font-size:10px;color:rgba(255,255,255,0.3);padding:4px 12px;letter-spacing:.03em}
.powered span{color:rgba(255,255,255,0.5);font-weight:500}

/* MAIN */
.main-content{flex:1;overflow-y:auto;padding:1.5rem 2rem;background:var(--bg);transition:background .3s}

/* TABS */
.tab{display:none}.tab.active{display:block}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.page-header h1{font-size:20px;font-weight:600;color:var(--text)}

/* STAT CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem}
.stat-card{background:var(--card);border-radius:12px;padding:1rem 1.25rem;border:.5px solid var(--border);position:relative;overflow:hidden;transition:background .3s,border .3s}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--v),var(--vm))}
.stat-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.stat-val{font-size:26px;font-weight:600;color:var(--v)}

/* CARDS */
.card{background:var(--card);border-radius:12px;padding:1.25rem;border:.5px solid var(--border);margin-bottom:1rem;transition:background .3s,border .3s}
.card-title{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--text)}

/* TABLE */
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:12px;color:var(--muted);font-weight:500;padding:6px 10px;border-bottom:1px solid var(--border)}
tbody td{padding:10px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;color:var(--text)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--row)}

/* FORMS */
.field{margin-bottom:12px;display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:500;color:var(--muted)}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="datetime-local"],select,textarea{
  width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;
  font-size:13px;color:var(--text);background:var(--card);font-family:inherit;transition:border .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 3px rgba(83,74,183,0.12)}
textarea{resize:vertical;min-height:80px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* BUTTONS */
.btn-blue{background:var(--v);color:#fff;border:none;padding:8px 18px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:background .15s;display:inline-flex;align-items:center;gap:6px}
.btn-blue:hover{background:var(--vd)}
.btn-outline{background:none;border:1px solid var(--border);padding:8px 18px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-outline:hover{background:var(--vl);border-color:var(--vm);color:var(--v)}
.btn-danger{background:none;border:1px solid #fca5a5;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;color:#dc2626}
.btn-danger:hover{background:#fef2f2}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-violet{background:var(--vl);color:var(--v);border:.5px solid var(--vm);padding:5px 12px;border-radius:20px;cursor:pointer;font-size:11px;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.btn-violet:hover{background:var(--v);color:#fff}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:3px 8px;border-radius:20px}
.badge-green{background:#dcfce7;color:#16a34a}
.badge-red{background:#fef2f2;color:#dc2626}
.badge-amber{background:#fef9c3;color:#b45309}
.badge-blue{background:var(--vl);color:var(--v)}
.badge-gray{background:#f3f4f6;color:#6b7280}

/* MSG */
.msg{padding:8px 12px;border-radius:8px;font-size:13px;margin-top:8px}
.msg.success{background:#dcfce7;color:#16a34a}
.msg.error{background:#fef2f2;color:#dc2626}
.msg.info{background:#EEEDFE;color:#534AB7}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal{background:var(--card);border-radius:16px;padding:1.5rem;width:560px;max-width:95vw;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.modal-header h2{font-size:16px;font-weight:600;color:var(--text)}
.modal-header button{background:none;border:none;cursor:pointer;font-size:18px;color:var(--muted)}

/* ACCOUNTS */
.accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.account-card{background:var(--card);border-radius:12px;border:.5px solid var(--border);padding:1.25rem;transition:background .3s}
.account-avatar{width:40px;height:40px;border-radius:50%;background:var(--vl);color:var(--v);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}

/* CHART */
.chart-bar{border-radius:3px 3px 0 0;background:var(--v);opacity:.7;transition:opacity .2s;min-width:0}
.chart-bar:hover{opacity:1}
.chart-label{font-size:11px;color:var(--muted);text-align:center}
/* CAMPAIGN BUILDER */
.builder-step{transition:background .15s;color:var(--muted)}
.builder-step.active{background:var(--vl);color:var(--v)}
.builder-step.active .step-num{color:var(--v);font-weight:700}
.builder-step.done{background:#f0fdf4;color:#16a34a}
body[data-theme="dark"] .builder-step.done{background:#052e16;color:#4ade80}
.builder-panel{animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* CAMPAIGN DAY ROW */
.day-row{display:grid;grid-template-columns:36px 1fr 140px 120px 90px auto;gap:10px;align-items:center;padding:12px 0;border-bottom:.5px solid var(--border)}
.day-row:last-child{border-bottom:none}
.day-badge{width:32px;height:32px;border-radius:50%;background:var(--vl);color:var(--v);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}

/* ACCOUNT PICKER */
.account-pick-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:.5px solid var(--border);margin-bottom:6px;background:var(--card);cursor:pointer;transition:border .15s,background .15s;user-select:none}
.account-pick-item:hover{border-color:var(--vm);background:var(--vl)}
.account-pick-item.selected{border-color:var(--v);background:var(--vl)}
.account-pick-item .drag-handle{color:var(--muted);cursor:grab;font-size:16px;flex-shrink:0}

/* CONTACT LIST CARDS */
.contact-lists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cl-card{background:var(--card);border-radius:12px;border:.5px solid var(--border);padding:1.25rem;transition:border .15s,box-shadow .15s;cursor:pointer}
.cl-card:hover{border-color:var(--vm);box-shadow:0 2px 12px rgba(83,74,183,0.1)}
.cl-icon{width:44px;height:44px;border-radius:10px;background:var(--vl);color:var(--v);display:flex;align-items:center;justify-content:center;margin-bottom:12px}

/* CAMPAIGN CARDS */
.campaign-card{background:var(--card);border-radius:12px;border:.5px solid var(--border);padding:1.25rem;margin-bottom:12px;transition:border .15s}
.campaign-card:hover{border-color:var(--vm)}
.campaign-progress{height:6px;border-radius:3px;background:var(--border);margin:10px 0;overflow:hidden}
.campaign-progress-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--v),var(--vm));transition:width .4s}

/* DETAIL STATS */
.detail-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem}

/* PHASE 2 — REPORTS & TRACKING */
.rate-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem}
.rate-card{background:var(--card);border-radius:12px;padding:1rem 1.25rem;border:.5px solid var(--border);text-align:center}
.rate-val{font-size:28px;font-weight:700;margin:4px 0}
.rate-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.rate-sub{font-size:12px;color:var(--muted);margin-top:2px}

/* EVENT TIMELINE */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--border)}
.tl-item{position:relative;margin-bottom:16px}
.tl-dot{position:absolute;left:-21px;top:3px;width:10px;height:10px;border-radius:50%;border:2px solid var(--card);flex-shrink:0}
.tl-dot.sent{background:var(--v)}
.tl-dot.open{background:#16a34a}
.tl-dot.click{background:#2563eb}
.tl-dot.unsubscribe{background:#dc2626}
.tl-dot.skipped{background:#9ca3af}
.tl-content{background:var(--card);border:.5px solid var(--border);border-radius:8px;padding:8px 12px}
.tl-event{font-size:13px;font-weight:500}
.tl-meta{font-size:11px;color:var(--muted);margin-top:2px}

/* REPORT DAY TABLE */
.report-day-row td{vertical-align:middle}
.mini-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;min-width:60px}
.mini-bar-fill{height:100%;border-radius:3px;transition:width .4s}

/* CHART STACKED */
.chart-bar-wrap{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.chart-bar-direct{border-radius:0;background:var(--vm);opacity:.45}
.chart-bar-campaign{border-radius:3px 3px 0 0;background:var(--v)}

/* SETTINGS TAB */
.settings-tab{transition:color .15s,border-color .15s}
.settings-tab.active{color:var(--v) !important;border-bottom-color:var(--v) !important;font-weight:500}
.settings-tab:hover{color:var(--text) !important}
.stab-panel{animation:fadeIn .2s ease}

/* HEALTH BADGES */
.badge-healthy{background:#dcfce7;color:#16a34a}
.badge-warning{background:#fef9c3;color:#b45309}
.badge-critical{background:#fef2f2;color:#dc2626}

/* WARMUP CARD */
.warmup-card{background:var(--card);border:.5px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.warmup-progress{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:6px}
.warmup-progress-bar{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--v),var(--vm))}

/* WEBHOOK CARD */
.webhook-card{background:var(--card);border:.5px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px}
.webhook-log{font-size:11px;padding:4px 8px;border-radius:4px;background:var(--bg);margin-top:4px;display:flex;gap:8px;align-items:center}

/* API KEY */
code{font-family:'Courier New',monospace}

/* TEAM MEMBER ROW */
.member-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:.5px solid var(--border)}
.member-row:last-child{border-bottom:none}
.member-avatar{width:36px;height:36px;border-radius:50%;background:var(--vl);color:var(--v);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex-shrink:0}
/* ── Inbox ─────────────────────────────────────────── */
.inbox-row { transition: background .12s; }
.inbox-row:hover { background: var(--color-background-secondary) !important; }
.inbox-unread { border-left: 3px solid #7c3aed !important; }
.inbox-row:hover .inbox-del-btn { opacity: 1 !important; }
.inbox-row:hover { background: var(--color-background-secondary) !important; }