/* =========================================================
   MailMerge Pro — Main Stylesheet
   Futuristic Minimal · Purple/White Gradient · DM Sans
   ========================================================= */

:root {
  --p1: #7c3aed;
  --p2: #5b21b6;
  --p3: #4f46e5;
  --p4: #818cf8;
  --p5: #ede9fe;
  --p6: #f5f3ff;
  --g1: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  --g2: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
  --g3: linear-gradient(160deg, #7c3aed22 0%, #4f46e510 100%);
  --white:  #ffffff;
  --bg:     #f8f7ff;
  --surf:   #ffffff;
  --border: #e8e4f8;
  --border2:#d8d3f0;
  --text:   #1a1433;
  --text2:  #4a4570;
  --muted:  #8b85a8;
  --green:  #16a34a;
  --red:    #dc2626;
  --yellow: #d97706;
  --blue:   #2563eb;
  --radius: 14px;
  --rad-sm: 8px;
  --rad-lg: 20px;
  --shadow: 0 1px 3px rgba(100,80,200,.07), 0 8px 24px rgba(100,80,200,.09);
  --shadow-lg: 0 4px 6px rgba(100,80,200,.05), 0 20px 40px rgba(100,80,200,.12);
  --sidebar-w: 230px;
  --topbar-h: 64px;
  --trans: .18s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  min-height: 100vh;
}

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--border);
}
.logo-mark {
  width: 36px; height: 36px;
  background: var(--g1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(124,58,237,.35);
}
.logo-mark.lg { width: 52px; height: 52px; font-size: 26px; border-radius: 16px; box-shadow: 0 8px 24px rgba(124,58,237,.4); }
.logo-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
}
.logo-text span { color: var(--p1); }

.sidebar-nav {
  padding: 14px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text2);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  transition: background var(--trans), color var(--trans);
}
.nav-item:hover { background: var(--p6); color: var(--p1); }
.nav-item.active {
  background: var(--g2);
  color: var(--p1);
  font-weight: 600;
}
.nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .75; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }

.sidebar-footer {
  padding: 14px 12px;
  border-top: 1px solid var(--border);
}
.user-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--p6);
  border-radius: 10px;
  padding: 9px 10px;
}
.user-avatar {
  width: 32px; height: 32px;
  background: var(--g1);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.user-name { font-weight: 600; font-size: 13px; }
.user-role { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.user-info { flex: 1; min-width: 0; }
.logout-btn { color: var(--muted); font-size: 16px; text-decoration: none; transition: color var(--trans); }
.logout-btn:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════════════════════════════════════ */
.main-wrap {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.page-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
}
.topbar-right { display: flex; align-items: center; gap: 12px; }

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
}
.status-dot.online { background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

.page-body {
  padding: 24px 28px;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surf);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card.flex1 { flex: 1; }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.card-header h3 { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; }
.card-body { padding: 20px; }
.card-body.no-pad { padding: 0; }

/* ══════════════════════════════════════════════════════════════════════
   STATS
══════════════════════════════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surf);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 0 0 0 80px;
  opacity: .07;
}
.stat-card.accent-purple::before { background: var(--p1); }
.stat-card.accent-green::before  { background: var(--green); }
.stat-card.accent-blue::before   { background: var(--blue); }
.stat-card.accent-red::before    { background: var(--red); }
.stat-icon { font-size: 28px; }
.stat-num { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 28px; line-height: 1; }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD ROW
══════════════════════════════════════════════════════════════════════ */
.dash-row { display: flex; gap: 16px; }
.quick-panel { width: 260px; display: flex; flex-direction: column; gap: 16px; }
.qstat { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.qstat:last-child { border-bottom: none; }
.qstat strong { font-weight: 700; color: var(--p1); }

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--g1);
  color: #fff;
  padding: 16px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 20px rgba(124,58,237,.35);
  transition: transform var(--trans), box-shadow var(--trans);
}
.quick-action-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(124,58,237,.45); }
.qa-icon { font-size: 22px; }

/* ══════════════════════════════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════════════════════════════ */
.table { width: 100%; border-collapse: collapse; }
.table th {
  background: var(--p6);
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--p1);
  white-space: nowrap;
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--p6); }
.table .fw600 { font-weight: 600; }
.table .text-green { color: var(--green); font-weight: 600; }
.table .text-red   { color: var(--red);   font-weight: 600; }
.table .text-muted { color: var(--muted); font-size: 12px; }
.empty-row { text-align: center; color: var(--muted); padding: 40px !important; }
.empty-row a { color: var(--p1); }

/* ══════════════════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════════════════ */
.badge { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.badge-gray   { background: #f1f5f9; color: #64748b; }
.badge-blue   { background: #dbeafe; color: #1d4ed8; }
.badge-green  { background: #dcfce7; color: #15803d; }
.badge-yellow { background: #fef3c7; color: #b45309; }
.badge-red    { background: #fee2e2; color: #b91c1c; }
.badge-purple { background: var(--p5); color: var(--p2); }

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  border-radius: var(--rad-sm);
  font-weight: 600; font-size: 13.5px;
  cursor: pointer; border: none;
  text-decoration: none;
  transition: all var(--trans);
  white-space: nowrap;
  font-family: inherit;
}
.btn-primary   { background: var(--g1); color: #fff; box-shadow: 0 2px 12px rgba(124,58,237,.3); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(124,58,237,.4); }
.btn-secondary { background: var(--p6); color: var(--p1); border: 1px solid var(--border2); }
.btn-secondary:hover { background: var(--p5); }
.btn-danger    { background: var(--red); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-outline   { background: transparent; color: var(--p1); border: 1px solid var(--p4); }
.btn-outline:hover { background: var(--p5); }
.btn-danger-outline { background: transparent; color: var(--red); border: 1px solid #fca5a5; }
.btn-danger-outline:hover { background: #fee2e2; }
.btn-green     { background: var(--green); color: #fff; }
.btn-green:hover { background: #15803d; }
.btn-yellow    { background: #f59e0b; color: #fff; }
.btn-yellow:hover { background: #d97706; }
.btn-sm  { padding: 6px 13px; font-size: 12.5px; }
.btn-xs  { padding: 4px 10px; font-size: 11.5px; border-radius: 6px; }
.btn-lg  { padding: 12px 28px; font-size: 15px; }
.btn-full { width: 100%; justify-content: center; }
.btn-icon { padding: 7px; border-radius: 7px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════════════════ */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.field.inline-field { display: flex; align-items: center; gap: 12px; }
.field.inline-field label { margin-bottom: 0; white-space: nowrap; flex-shrink: 0; }
.req { color: var(--red); }
.optional { font-weight: 400; color: var(--muted); font-size: 12px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], input[type=time], input[type=date],
select, textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-sm);
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  font-family: inherit;
  transition: border-color var(--trans), box-shadow var(--trans);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--p1);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
textarea { resize: vertical; min-height: 100px; }
select { cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--p1); cursor: pointer; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 20px; }

/* ── Toggle ──────────────────────────────────────────────────────────── */
.toggle-switch { display: inline-flex; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-slider {
  width: 42px; height: 24px;
  background: #cbd5e1; border-radius: 99px;
  position: relative;
  transition: background var(--trans);
  display: block;
  flex-shrink: 0;
}
.toggle-switch input:checked + .toggle-slider { background: var(--p1); }
.toggle-slider::after {
  content: ''; width: 18px; height: 18px; background: #fff;
  border-radius: 50%; position: absolute; top: 3px; left: 3px;
  transition: transform var(--trans);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider::after { transform: translateX(18px); }

.toggle-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 0; gap: 16px;
  border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-info strong { display: block; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.toggle-info small  { color: var(--muted); font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   CAMPAIGN FORM / STEPS
══════════════════════════════════════════════════════════════════════ */
.campaign-form { max-width: 820px; display: flex; flex-direction: column; gap: 16px; }

.step-card {
  background: var(--surf);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.step-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
  border-bottom: 1px solid var(--border);
}
.step-header h2 { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; }
.step-header p.step-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.step-num {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--g1);
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 13px;
  box-shadow: 0 2px 8px rgba(124,58,237,.3);
}
.step-body { padding: 20px 22px; }
.step-body.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }

.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; }
.check-card {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px; padding: 12px;
  cursor: pointer;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.check-card:hover { border-color: var(--p4); box-shadow: 0 0 0 3px rgba(124,58,237,.08); }
.check-card input { margin-top: 2px; flex-shrink: 0; }
.check-card:has(input:checked) { border-color: var(--p1); background: var(--p6); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.check-card-title { font-weight: 600; font-size: 13.5px; }
.check-card-sub   { font-size: 12px; color: var(--text2); margin-top: 2px; }
.check-card-meta  { font-size: 11px; color: var(--muted); margin-top: 4px; }

.smtp-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.smtp-cards { display: flex; flex-direction: column; gap: 8px; }
.smtp-card {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: all var(--trans);
}
.smtp-card:hover { border-color: var(--p4); }
.smtp-card:has(input:checked) { border-color: var(--p1); background: var(--p6); }
.smtp-card.disabled { opacity: .5; }
.smtp-card-info { flex: 1; }
.smtp-name { font-weight: 600; font-size: 13.5px; }
.smtp-host { font-size: 12px; color: var(--muted); }
.smtp-limit { font-size: 11px; color: var(--muted); margin-top: 2px; }
.smtp-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; }
.smtp-badge.on  { background: #dcfce7; color: #15803d; }
.smtp-badge.off { background: #f1f5f9; color: #64748b; }

.delay-options { display: flex; gap: 8px; flex-wrap: wrap; }
.delay-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 99px;
  border: 1.5px solid var(--border); cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all var(--trans);
}
.delay-chip input { display: none; }
.delay-chip:hover { border-color: var(--p4); color: var(--p1); }
.delay-chip.active { background: var(--p1); color: #fff; border-color: var(--p1); }

.schedule-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.sched-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 8px;
  border: 1.5px solid var(--border); cursor: pointer;
  font-weight: 600; font-size: 13px;
  transition: all var(--trans);
}
.sched-tab input { display: none; }
.sched-tab:hover { border-color: var(--p4); }
.sched-tab.active { background: var(--p1); color: #fff; border-color: var(--p1); }
.delete-schedule-row { margin-top: 12px; }

.sub-opts { margin-top: 14px; padding: 16px; background: var(--p6); border-radius: 10px; border: 1px solid var(--border); }
.sub-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }

.campaign-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  padding: 20px 0;
}

.empty-box { text-align: center; padding: 24px; color: var(--muted); font-size: 13px; background: var(--p6); border-radius: 8px; }
.empty-box a { color: var(--p1); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   CAMPAIGN CONTROL PANEL
══════════════════════════════════════════════════════════════════════ */
.ctrl-panel {
  background: var(--surf);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.ctrl-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ctrl-title { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 20px; }
.ctrl-status { display: flex; align-items: center; gap: 8px; }

.progress-bar { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; margin: 12px 0; }
.progress-fill { height: 100%; background: var(--g1); border-radius: 99px; transition: width .5s ease; }

.ctrl-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 16px 0; }
.ctrl-stat { text-align: center; padding: 12px; background: var(--p6); border-radius: 10px; }
.ctrl-stat-num  { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 22px; }
.ctrl-stat-lbl  { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.ctrl-stat.green .ctrl-stat-num { color: var(--green); }
.ctrl-stat.red   .ctrl-stat-num { color: var(--red); }
.ctrl-stat.blue  .ctrl-stat-num { color: var(--blue); }

.ctrl-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════
   SMTP PROFILES PAGE
══════════════════════════════════════════════════════════════════════ */
.smtp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 16px; }
.smtp-profile-card {
  background: var(--surf);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--trans);
}
.smtp-profile-card:hover { box-shadow: var(--shadow-lg); }
.spc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.spc-name { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; }
.spc-body { font-size: 13px; color: var(--text2); line-height: 1.8; }
.spc-footer { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.spc-progress { margin: 8px 0; }
.spc-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26,20,51,.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surf);
  border-radius: var(--rad-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
  width: 620px; max-width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  overflow: hidden;
}
.modal.modal-lg { width: 880px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--g2);
}
.modal-header h3 { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; }
.modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 6px; }
.modal-close:hover { background: var(--border); color: var(--text); }
.modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════════════
   DRAFTS / EDITOR
══════════════════════════════════════════════════════════════════════ */
.draft-list { display: flex; flex-direction: column; gap: 10px; }
.draft-item {
  background: var(--surf);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--trans);
}
.draft-item:hover { box-shadow: var(--shadow-lg); }
.draft-icon { font-size: 24px; }
.draft-info { flex: 1; min-width: 0; }
.draft-name { font-weight: 600; font-size: 14.5px; }
.draft-sub  { font-size: 13px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.draft-actions { display: flex; gap: 6px; flex-shrink: 0; }

.editor-wrap { max-width: 820px; }
.editor-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.editor-btn { background: var(--p6); border: 1px solid var(--border); padding: 5px 9px; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; transition: background var(--trans); }
.editor-btn:hover { background: var(--p5); }
.editor-area { min-height: 340px; border: 1.5px solid var(--border); border-radius: 8px; padding: 14px; outline: none; transition: border-color var(--trans); }
.editor-area:focus { border-color: var(--p1); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.merge-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.merge-tag { background: var(--p5); color: var(--p2); padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; font-family: monospace; }
.merge-tag:hover { background: var(--p4); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   LISTS / UPLOAD
══════════════════════════════════════════════════════════════════════ */
.upload-zone {
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--trans);
  position: relative;
  background: var(--p6);
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--p1); background: var(--p5); }
.upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { font-size: 36px; margin-bottom: 8px; }
.upload-text { font-weight: 600; color: var(--text); }
.upload-sub  { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   LOGS
══════════════════════════════════════════════════════════════════════ */
.log-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.log-filter-tab {
  padding: 6px 14px; border-radius: 99px;
  border: 1.5px solid var(--border);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; color: var(--text2);
  transition: all var(--trans);
}
.log-filter-tab:hover, .log-filter-tab.active { background: var(--p1); color: #fff; border-color: var(--p1); }

/* ══════════════════════════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════════════════════════ */
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.alert-danger  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.alert-warning { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

/* ══════════════════════════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════════════════════════ */
.login-body { background: var(--bg); overflow: hidden; position: relative; }
.login-bg   { position: fixed; inset: 0; pointer-events: none; }
.bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .35;
}
.orb1 { width: 600px; height: 600px; background: #7c3aed; top: -200px; left: -200px; }
.orb2 { width: 400px; height: 400px; background: #4f46e5; bottom: -100px; right: -100px; }
.orb3 { width: 300px; height: 300px; background: #a78bfa; top: 40%; left: 40%; }

.login-wrap { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(100,80,200,.2);
  padding: 40px 36px;
  width: 420px;
  max-width: 100%;
}
.login-brand { text-align: center; margin-bottom: 28px; }
.login-brand h1 { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 26px; margin-top: 12px; }
.login-brand h1 span { color: var(--p1); }
.login-brand p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.login-form .field { margin-bottom: 16px; }
.login-hint { text-align: center; font-size: 12px; color: var(--muted); margin-top: 16px; }
.login-hint code { background: var(--p5); padding: 1px 6px; border-radius: 4px; color: var(--p2); }

/* ══════════════════════════════════════════════════════════════════════
   MISC UTILITIES
══════════════════════════════════════════════════════════════════════ */
.hidden   { display: none !important; }
.mt20     { margin-top: 20px; }
.mt12     { margin-top: 12px; }
.ml-auto  { margin-left: auto; }
.link-sm  { font-size: 12.5px; color: var(--p1); text-decoration: none; font-weight: 600; }
.link-sm:hover { text-decoration: underline; }
.two-col-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.page-actions { display: flex; gap: 10px; align-items: center; }
.truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw600    { font-weight: 600; }
.text-muted { color: var(--muted); }
.text-sm  { font-size: 12px; }
.divider  { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.tag { display: inline-block; padding: 2px 8px; background: var(--p5); color: var(--p2); border-radius: 5px; font-size: 11px; font-weight: 700; }

/* Preset buttons in SMTP form */
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.preset { padding: 5px 11px; border-radius: 6px; border: 1px solid var(--border); background: var(--p6); color: var(--p2); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--trans); }
.preset:hover { background: var(--p1); color: #fff; border-color: var(--p1); }

/* Pass show/hide */
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 38px; }
.show-pass { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; color: var(--muted); }

/* Pagination */
.pagination { display: flex; gap: 4px; margin-top: 16px; align-items: center; }
.pg-btn { min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--border); color: var(--text2); text-decoration: none; font-size: 13px; font-weight: 600; transition: all var(--trans); }
.pg-btn:hover, .pg-btn.active { background: var(--p1); color: #fff; border-color: var(--p1); }

/* Live log stream */
.log-stream {
  background: #0f0f1a;
  border-radius: 10px;
  padding: 16px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #a0f0a0;
  max-height: 280px;
  overflow-y: auto;
  line-height: 1.7;
}
.log-line-ok   { color: #86efac; }
.log-line-fail { color: #fca5a5; }
.log-line-info { color: #93c5fd; }
.log-line-warn { color: #fde68a; }

@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .ctrl-stats  { grid-template-columns: repeat(2,1fr); }
  .sub-grid    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  :root { --sidebar-w: 60px; }
  .sidebar-logo .logo-text,
  .nav-item span,
  .user-info, .logout-btn { display: none; }
  .main-wrap { margin-left: 60px; }
  .page-body { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .two-col-layout { grid-template-columns: 1fr; }
}

/* Mail247 compact campaign create screen */
.campaign-form{max-width:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:14px;align-items:start;}
.campaign-form>.step-card:first-child,
.campaign-form>.step-card:nth-child(4),
.campaign-form>.campaign-actions{grid-column:1 / -1;}
.step-header{padding:12px 16px;align-items:center;}
.step-body{padding:14px 16px;}
.step-num{width:24px;height:24px;border-radius:7px;font-size:12px;}
.step-header h2{font-size:14px;}
.step-header p.step-desc{font-size:11px;line-height:1.25;}
.check-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.check-card{padding:10px;}
.smtp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:240px;overflow-y:auto;padding-right:4px;}
.smtp-card{padding:10px 12px;align-items:flex-start;}
.smtp-card-info{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:2px;}
.smtp-name{grid-column:1 / -1;}
.smtp-host{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.smtp-limit{font-size:11px;margin-top:0;color:var(--text2);}
.toggle-row{padding:8px 0;align-items:center;gap:10px;}
.toggle-info strong{font-size:13px;}
.toggle-info small{font-size:11px;line-height:1.25;}
.delay-chip,.sched-tab{padding:7px 12px;font-size:12px;}
.sub-opts{padding:12px;margin-top:10px;}
.campaign-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(248,247,255,.82),#f8f7ff 45%);z-index:8;padding:14px 0 4px;}
@media(max-width:1050px){.campaign-form{grid-template-columns:1fr}.campaign-form>.step-card:first-child,.campaign-form>.step-card:nth-child(4),.campaign-form>.campaign-actions{grid-column:auto}.smtp-cards{grid-template-columns:1fr}}

/* === Mail247 stable upgrade: Draft section + New Campaign compact layout === */
.draft-page-pro{display:flex;flex-direction:column;gap:16px;width:100%;max-width:none}.draft-topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}.draft-topbar h2{margin:0;font-family:'DM Sans',sans-serif}.draft-topbar p{margin:4px 0 0;color:var(--muted)}.compact-head{padding:14px 18px}.muted-count{font-size:13px;color:var(--muted);font-family:'DM Sans',sans-serif}.draft-list-panel{overflow:hidden}.draft-table-list{display:flex;flex-direction:column}.draft-row{display:grid;grid-template-columns:34px minmax(0,1fr) 150px 150px;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--border);transition:.2s}.draft-row:hover,.draft-row.draft-active{background:#f6f3ff}.draft-dot{width:28px;height:28px;border-radius:8px;background:#ede9fe;color:#5b35f5;display:flex;align-items:center;justify-content:center}.draft-editor-full{width:100%;max-width:none}.draft-editor-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:14px}.editor-label-line{display:flex;justify-content:space-between;align-items:center}.mode-mini{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted)}.gmail-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px;background:#fafaff;border:1px solid var(--border);border-bottom:0;border-radius:10px 10px 0 0}.gmail-toolbar select{width:auto;min-width:80px;padding:6px 8px;font-size:12px}.gmail-toolbar input[type=color]{width:30px;height:30px;padding:2px;border:1px solid var(--border);border-radius:7px;background:#fff}.gmail-editor{min-height:420px;border-radius:0 0 10px 10px;font-size:14px;line-height:1.7;background:#fff}.preview-box{border:1px solid var(--border);border-radius:10px;padding:16px;background:#fff;max-height:350px;overflow:auto;margin-bottom:12px}.campaign-form{max-width:none!important;width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,.75fr)!important;gap:14px!important}.campaign-form>.step-card{margin:0!important}.campaign-form>.step-card:first-child,.campaign-form>.step-card:nth-child(4),.campaign-form>.campaign-actions{grid-column:1/-1!important}.step-card{border-radius:14px!important}.step-header{padding:14px 18px!important}.step-body{padding:14px 18px!important}.step-header h2{font-size:16px!important}.check-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.smtp-cards{display:grid!important;grid-template-columns:1fr 1fr!important;max-height:260px!important;overflow-y:auto;border:1px solid var(--border);border-radius:12px}.smtp-card{border:0!important;border-bottom:1px solid var(--border)!important;border-right:1px solid var(--border)!important;border-radius:0!important}.toggle-row{min-height:54px!important;padding:12px!important}.campaign-actions{position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding:14px 0!important;border-top:1px solid var(--border)}
@media(max-width:1050px){.campaign-form{grid-template-columns:1fr!important}.check-grid{grid-template-columns:1fr!important}.smtp-cards{grid-template-columns:1fr!important}.draft-editor-grid,.draft-row{grid-template-columns:1fr}.draft-row{gap:8px}.draft-actions{display:flex;gap:8px}.draft-topbar{align-items:flex-start;gap:12px;flex-direction:column}}

/* =========================================================
   Mail247 Upgrade: Recipient Manager + Campaign Redesign
   ========================================================= */
.mb10{margin-bottom:10px}.muted-count{font-size:12px;color:var(--muted);font-family:'DM Sans',sans-serif}.full-btn{width:100%;justify-content:center}.mini-search{max-width:230px;padding:8px 10px;font-size:12px}
.campaign-pro{display:grid!important;grid-template-columns:minmax(0,1fr) 380px!important;gap:18px!important;max-width:none!important;width:100%!important;align-items:start}.campaign-left{display:flex;flex-direction:column;gap:14px}.campaign-right{display:flex;flex-direction:column;gap:14px;position:sticky;top:82px}.campaign-pro>.step-card,.campaign-left>.step-card,.campaign-right>.step-card{margin:0!important}.campaign-hero-card{background:linear-gradient(135deg,#fff,#fbfaff)}.campaign-table-wrap{border:1px solid var(--border);border-radius:12px;overflow:auto;background:#fff}.small-scroll{max-height:255px}.five-list-scroll{max-height:310px}.campaign-mini-table{width:100%;border-collapse:collapse;font-size:13px}.campaign-mini-table th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;background:#faf8ff;padding:10px 12px;position:sticky;top:0;z-index:1}.campaign-mini-table td{padding:11px 12px;border-top:1px solid var(--border);vertical-align:middle}.campaign-mini-table tr:hover td{background:#fbfaff}.campaign-mini-table b{display:block;font-weight:700}.campaign-mini-table small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.campaign-summary-card{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border-radius:18px;padding:18px;box-shadow:0 16px 36px rgba(124,58,237,.25)}.campaign-summary-card h2{font-family:'DM Sans',sans-serif;font-size:18px;margin-bottom:14px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.summary-grid>div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:13px;padding:12px}.summary-grid span{display:block;font-size:11px;opacity:.82}.summary-grid b{display:block;font-size:20px;margin-top:2px}.compact-toggle-body{display:flex;flex-direction:column;gap:10px}.delay-options-pro{display:grid;grid-template-columns:1fr 1fr;gap:8px}.smtp-cards-pro{max-height:560px!important;min-height:220px!important;grid-template-columns:1fr 1fr!important;overflow-y:auto!important;border:1px solid var(--border);border-radius:12px;padding:0!important;gap:0!important}.smtp-cards-pro .smtp-card{border:0!important;border-right:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;margin:0!important;min-height:108px}.smtp-cards-pro .smtp-card-info{display:block!important}.smtp-limit.two-line{display:grid!important;grid-template-columns:1fr 1fr;gap:2px 8px;margin-top:7px}.smtp-limit.two-line span{font-size:11px;color:var(--text2)}.campaign-sticky-actions{grid-column:1/-1!important;position:sticky;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);z-index:20;border-top:1px solid var(--border);padding:14px 0!important;margin-top:0!important;display:flex;justify-content:flex-end;gap:10px}
.recipient-manager{display:grid;grid-template-columns:360px minmax(360px,.85fr);gap:16px;align-items:start}.import-card{grid-row:span 2}.recipients-panel{grid-column:2}.recipient-tabs{display:flex;margin:10px 0 14px;border:1px solid var(--border);border-radius:10px;overflow:hidden}.tab-btn{flex:1;padding:10px;background:#fff;border:0;cursor:pointer;font-weight:700;font-size:12px;color:var(--muted)}.tab-btn.active{background:var(--p6);color:var(--p1)}.file-name{margin-top:8px;font-size:12px;color:var(--p1);font-weight:700}.recipient-list-scroll{max-height:430px;overflow:auto}.recipient-list-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);background:#fff}.recipient-list-row.active,.recipient-list-row:hover{background:#fbfaff}.list-open{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}.list-open b{display:block}.list-open small{display:block;color:var(--muted);font-size:11px}.folder-icon{width:32px;height:32px;display:grid;place-items:center;background:#f1edff;border-radius:10px}.rename-inline{display:flex;gap:7px;align-items:center}.rename-inline input{padding:8px 10px;font-size:12px}.recipient-search{display:flex;gap:8px;align-items:center}.recipient-search input{width:220px;padding:8px 10px}.add-recipient-row{display:grid;grid-template-columns:1fr 200px auto;gap:8px;margin-bottom:14px}.recipient-table-wrap{max-height:480px;overflow:auto;border:1px solid var(--border);border-radius:12px}.recipient-edit-table input,.recipient-edit-table select{padding:8px 10px;font-size:12px}.recipient-edit-table td{vertical-align:middle}
@media(max-width:1120px){.campaign-pro{grid-template-columns:1fr!important}.campaign-right{position:static}.recipient-manager{grid-template-columns:1fr}.import-card,.recipients-panel{grid-column:auto;grid-row:auto}.smtp-cards-pro{grid-template-columns:1fr!important}}
@media(max-width:720px){.add-recipient-row{grid-template-columns:1fr}.recipient-search{width:100%;margin-top:10px}.recipient-search input{width:100%}.rename-inline{flex-direction:column;align-items:stretch}.campaign-summary-card .summary-grid{grid-template-columns:1fr 1fr}.delay-options-pro{grid-template-columns:1fr}.smtp-limit.two-line{grid-template-columns:1fr}.campaign-sticky-actions{justify-content:stretch}.campaign-sticky-actions .btn{flex:1}}

/* =========================================================
   Recipient Lists Redesign — based on provided HTML reference
   Keeps Mail247 sidebar/topbar theme and existing PHP actions
   ========================================================= */
.recip-topbar-lite{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.recip-topbar-lite h2{font-family:'DM Sans',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.03em}.recip-topbar-lite p{color:var(--muted);font-size:13px;margin-top:2px}.recip-summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}.recip-summary-box{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}.recip-summary-box span{font-size:12px;color:var(--muted);font-weight:700}.recip-summary-box b{display:block;font-size:24px;margin-top:6px;color:var(--text);font-family:'DM Sans',sans-serif}.recipient-redesign-grid{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}.recip-import-card,.recip-manage-card,.recip-email-card{border-radius:18px}.recip-card-head{background:linear-gradient(90deg,#f3f0ff,#fbfaff)}.recip-card-head small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.pro-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border:0;margin:16px 0}.pro-tabs .tab-btn{border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--p1);padding:10px;text-align:center}.pro-tabs .tab-btn.active{background:var(--p1);color:#fff}.recip-drop{border:2px dashed #c4b5fd;border-radius:16px;background:#faf8ff;min-height:160px;display:grid;place-items:center;text-align:center;color:var(--muted);margin-bottom:14px;padding:20px;position:relative}.recip-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.recip-drop.drag{background:#f1edff;border-color:var(--p1)}.recip-list-body{padding:10px;max-height:430px;overflow-y:auto}.manage-note{font-size:11px;color:var(--muted);margin:2px 6px 8px}.mini-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid #e9e4ff;border-radius:12px;padding:9px 10px;margin-bottom:8px;background:#fff}.mini-list-row.active,.mini-list-row:hover{background:#fcfbff;border-color:#d9ccff}.mini-list-open{text-decoration:none;color:var(--text);min-width:0}.mini-list-open b{font-size:13px;display:block;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-list-open small{color:var(--muted);font-size:11px;display:block}.mini-actions{display:flex;gap:5px;flex-wrap:nowrap}.mini-actions .btn-xs{padding:5px 7px;font-size:10.5px}.rename-box{grid-column:1/-1;display:none!important;margin-top:4px}.rename-box.open{display:flex!important}.recip-email-card{margin-top:18px}.recip-toolbar{display:grid;grid-template-columns:1.3fr minmax(180px,.7fr) 130px auto;gap:10px;margin-bottom:14px}.bulk-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}.bulk-actions small,.pagination-lite span{color:var(--muted);font-size:12px}.pro-table-wrap{max-height:520px;overflow:auto;border:1px solid var(--border);border-radius:14px}.pro-email-table th{background:#f8f5ff;color:var(--p1);font-size:11px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;z-index:2}.pro-email-table td{vertical-align:middle}.pro-email-table tr:hover td{background:#fcfbff}.pro-email-table input,.pro-email-table select{font-size:12px;padding:8px 9px}.status-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;margin-right:6px}.status-badge.pending{background:#fff7ed;color:#f97316}.status-badge.valid{background:#ecfdf5;color:#059669}.status-badge.invalid{background:#fef2f2;color:#dc2626}.status-badge.duplicate{background:#eef2ff;color:#4f46e5}.pagination-lite{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.email-actions{display:flex;gap:6px;align-items:center;white-space:nowrap}.hidden{display:none!important}.full-btn{width:100%}
@media(max-width:1100px){.recipient-redesign-grid{grid-template-columns:1fr}.recip-summary-grid{grid-template-columns:repeat(2,1fr)}.recip-toolbar{grid-template-columns:1fr}.mini-list-row{grid-template-columns:1fr}.mini-actions{justify-content:flex-start}.recip-topbar-lite{align-items:flex-start;flex-direction:column}}
@media(max-width:720px){.recip-summary-grid{grid-template-columns:1fr}.pro-tabs{grid-template-columns:1fr}.bulk-actions,.pagination-lite{align-items:flex-start;flex-direction:column}.recip-topbar-lite h2{font-size:21px}.recip-summary-box b{font-size:20px}}

/* Mail247 technical fix: SMTP email/sender visibility + schedule button full visible */
.smtp-email{font-size:11.5px;color:var(--text);margin-top:4px;word-break:break-all;line-height:1.25}
.smtp-sender{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.25}
.campaign-right .schedule-tabs{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important;overflow:visible!important}
.campaign-right .sched-tab{width:100%!important;min-width:0!important;justify-content:flex-start!important;white-space:normal!important;line-height:1.25!important;padding:11px 12px!important}
.campaign-right .step-card{overflow:visible!important}
.campaign-right .step-body{overflow:visible!important}

/* Mail247 v18 improvement: keep New Campaign sticky action bar centered without changing page design */
.campaign-sticky-actions{
  justify-content:center!important;
  padding-left:14px!important;
  padding-right:14px!important;
}
.campaign-sticky-actions .btn{
  white-space:nowrap;
}
.campaign-right .schedule-tabs,
.schedule-tabs{
  position:relative;
  z-index:21;
}

/* Mail247 v18 improvement: show emoji subjects with color-capable emoji fonts where supported */
input[name="subject"],
.draft-subject,
.draft-title,
.campaign-mini-table td,
#submitLabel{
  font-family:'DM Sans','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif!important;
}

/* Stable update: sidebar footer actions + uploaded logo + DM Sans consistency */
.sidebar-logo-img{
  display:block;
  max-width:168px;
  max-height:46px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.sidebar-footer-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:10px;
}
.sidebar-action-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--p1);
  text-decoration:none;
  font-weight:700;
  font-size:12.5px;
  transition:all var(--trans);
}
.sidebar-action-btn:hover{background:var(--p6);border-color:var(--border2);}
.sidebar-action-btn.danger{color:var(--red);}
.logo-preview-box{
  border:1px dashed var(--border2);
  background:var(--p6);
  border-radius:12px;
  padding:14px;
  text-align:center;
  margin-bottom:14px;
}
.logo-preview-box img{
  max-width:180px;
  max-height:70px;
  object-fit:contain;
}
body, button, input, select, textarea, table, a, div, span, p, h1, h2, h3, h4, h5, h6{
  font-family:'DM Sans', system-ui, sans-serif !important;
}
.login-logo-img{display:block;max-width:190px;max-height:76px;width:auto;height:auto;object-fit:contain;margin:0 auto 10px;}

/* Mail247 UI polish: dashboard activity bars + new campaign recipient search */
.dashboard-chart-header{align-items:center;gap:14px;flex-wrap:wrap}
.dashboard-chart-header>div:first-child{display:flex;flex-direction:column;gap:2px}
.chart-subtitle{font-size:12px;color:var(--muted);font-weight:500}
.chart-range-tabs{display:flex;align-items:center;gap:6px;background:#f4f1ff;border:1px solid var(--border);border-radius:999px;padding:4px;margin-left:auto}
.chart-range-btn{border:0;background:transparent;color:var(--text2);font-family:'DM Sans',system-ui,sans-serif;font-weight:800;font-size:12px;padding:7px 12px;border-radius:999px;cursor:pointer;transition:all var(--trans)}
.chart-range-btn:hover{background:#fff;color:var(--p1)}
.chart-range-btn.active{background:var(--g1);color:#fff;box-shadow:0 5px 16px rgba(124,58,237,.24)}
.chart-legend{display:flex;justify-content:flex-end;gap:14px;align-items:center;margin:-2px 0 8px;color:var(--muted);font-size:12px;font-weight:700}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:999px;margin-right:6px;vertical-align:middle}
.legend-dot.sent{background:#7c3aed}.legend-dot.failed{background:#ef4444}
#activityChart{display:block;width:100%;border-radius:14px;background:linear-gradient(180deg,#ffffff 0%,#fbfaff 100%);}
#listSearch{width:100%;height:42px;border:1px solid #ddd6fe!important;border-radius:12px!important;background:#fff!important;padding:0 14px 0 40px!important;font-family:'DM Sans',system-ui,sans-serif!important;font-size:13px!important;color:var(--text)!important;outline:none!important;box-shadow:0 6px 18px rgba(124,58,237,.06)!important;transition:all var(--trans)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:13px center!important;background-size:16px 16px!important}
#listSearch::placeholder{color:#9b95b7!important}
#listSearch:focus{border-color:var(--p1)!important;box-shadow:0 0 0 4px rgba(124,58,237,.12),0 8px 22px rgba(124,58,237,.08)!important}

/* Mail247 fix: keep dashboard chart and right Quick Stats panel visible */
.dash-row{
  width:100%;
  align-items:stretch;
  overflow:hidden;
}
.dash-row .card.flex1{
  flex:1 1 0;
  min-width:0;
}
.dash-row .quick-panel{
  flex:0 0 260px;
  min-width:240px;
}
@media (max-width: 1100px){
  .dash-row{flex-direction:column;overflow:visible;}
  .dash-row .quick-panel{width:100%;flex:0 0 auto;min-width:0;}
}

/* Mail247 dashboard visibility fix: prevent right side clipping at 100% browser zoom */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
.main-wrap{
  width:calc(100% - var(--sidebar-w));
  max-width:calc(100% - var(--sidebar-w));
  min-width:0;
  overflow-x:hidden;
}
.topbar,.page-body{
  max-width:100%;
  min-width:0;
}
.dash-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(220px,250px)!important;
  gap:14px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
  align-items:start!important;
}
.dash-row .card.flex1{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  flex:none!important;
}
.dash-row .quick-panel{
  width:100%!important;
  max-width:250px!important;
  min-width:0!important;
  flex:none!important;
}
#activityChart{
  width:100%!important;
  max-width:100%!important;
  display:block!important;
}
.quick-action-btn{
  width:100%;
  justify-content:center;
  white-space:normal;
  text-align:center;
}
@media (max-width:1280px){
  .page-body{padding-left:18px;padding-right:18px;}
  .dash-row{grid-template-columns:minmax(0,1fr) minmax(210px,230px)!important;gap:12px!important;}
  .dash-row .quick-panel{max-width:230px!important;}
}
@media (max-width:1080px){
  .dash-row{grid-template-columns:1fr!important;}
  .dash-row .quick-panel{max-width:none!important;width:100%!important;}
}
@media (max-width:768px){
  .main-wrap{width:calc(100% - 60px);max-width:calc(100% - 60px);}
}

/* =========================================================
   Mail247 — SMTP Profiles Page Styles
   Append these lines to the END of your app.css file.
   Do NOT remove or change any existing styles above.
   ========================================================= */

/* ── Stats strip ── */
.smtp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.smtp-stat-card {
  background: var(--surf);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.smtp-stat-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 70px; height: 70px;
  border-radius: 0 0 0 70px;
  opacity: .07;
}
.smtp-stat-purple::before { background: var(--p1); }
.smtp-stat-green::before  { background: var(--green); }
.smtp-stat-orange::before { background: var(--yellow); }
.smtp-stat-blue::before   { background: var(--blue); }
.smtp-stat-icon  { font-size: 26px; }
.smtp-stat-num   { font-weight: 800; font-size: 26px; line-height: 1; }
.smtp-stat-label { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 500; }
.smtp-stat-purple .smtp-stat-num { color: var(--p1); }
.smtp-stat-green  .smtp-stat-num { color: var(--green); }
.smtp-stat-orange .smtp-stat-num { color: var(--yellow); }
.smtp-stat-blue   .smtp-stat-num { color: var(--blue); }

/* ── Page toolbar ── */
.smtp-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.smtp-toolbar-left { display: flex; align-items: center; gap: 10px; }
.smtp-toolbar-right { display: flex; align-items: center; gap: 10px; }
.smtp-count-badge {
  font-size: 13px;
  color: var(--muted);
  background: var(--p6);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 12px;
  font-weight: 500;
}

/* ── View toggle ── */
.smtp-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--p6);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
}
.smtp-vbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  transition: all var(--trans);
}
.smtp-vbtn.active {
  background: var(--white);
  color: var(--p1);
  box-shadow: 0 1px 4px rgba(100,80,200,.12);
}

/* ── Card grid (3 columns) ── */
.smtp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

/* ── SMTP profile card ── */
.smtp-profile-card {
  background: var(--surf);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--trans), transform var(--trans);
}
.smtp-profile-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.smtp-card-inactive { border-color: #fde68a; }
.smtp-card-inactive .spc2-header { background: linear-gradient(135deg, #fffbeb, #fef9e7); }
.smtp-card-inactive .spc2-footer { background: #fffbeb; }

.spc2-header {
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.spc2-name-row { display: flex; align-items: center; gap: 9px; }
.spc2-name { font-weight: 700; font-size: 14px; color: var(--text); }

.smtp-prov-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.smtp-prov-gmail   { background: #fee2e2; color: #dc2626; }
.smtp-prov-amazon  { background: #fef3c7; color: #d97706; }
.smtp-prov-sg      { background: #dbeafe; color: #1d4ed8; }
.smtp-prov-outlook { background: #dbeafe; color: #0078d4; }
.smtp-prov-default { background: var(--p5); color: var(--p2); }

.smtp-enc-tag {
  background: var(--p5);
  color: var(--p2);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  letter-spacing: .03em;
  white-space: nowrap;
}

.spc2-body { padding: 13px 16px; flex: 1; }
.spc2-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.spc2-meta-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text2);
}
.spc2-meta-row svg { color: var(--muted); flex-shrink: 0; }
.spc2-usage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.spc2-usage-row span  { font-size: 11px; color: var(--muted); font-weight: 500; }
.spc2-usage-row strong { font-size: 11px; color: var(--text2); font-weight: 700; }

.spc2-footer {
  padding: 10px 16px;
  background: var(--p6);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.spc2-footer a:last-child { margin-left: auto; }

/* ── List view ── */
.smtp-list-view {
  display: none;
  flex-direction: column;
  margin-bottom: 24px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.slv-head {
  display: grid;
  grid-template-columns: 32px 130px 1fr 170px 140px 110px 160px;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--p6);
  border-bottom: 1px solid var(--border);
}
.slv-head span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--p1);
}
.slv-row {
  display: grid;
  grid-template-columns: 32px 130px 1fr 170px 140px 110px 160px;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}
.slv-row:last-child { border-bottom: none; }
.slv-row:hover { background: var(--p6); }
.slv-row-inactive { background: #fffdf5; }
.slv-row-inactive:hover { background: #fffbeb; }
.slv-name   { font-weight: 700; font-size: 13px; color: var(--text); }
.slv-server { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slv-sender { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slv-usage  { display: flex; flex-direction: column; gap: 2px; }
.slv-usage-count { font-size: 11px; font-weight: 600; color: var(--text2); }
.slv-actions { display: flex; align-items: center; gap: 5px; }

/* ── Slide-in panel ── */
.smtp-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,20,51,.35);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--trans);
  backdrop-filter: blur(2px);
}
.smtp-panel-overlay.open { opacity: 1; pointer-events: auto; }

.smtp-panel-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  background: var(--white);
  box-shadow: -8px 0 40px rgba(100,80,200,.15);
  z-index: 310;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.smtp-panel-drawer.open { transform: translateX(0); }

.smtp-panel-topbar {
  padding: 0 22px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(135deg, #f5f3ff, #eef2ff);
}
.smtp-panel-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.smtp-panel-close {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: all var(--trans);
}
.smtp-panel-close:hover { background: var(--p6); color: var(--p1); }

.smtp-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
}
.smtp-panel-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
  background: var(--p6);
}

/* ── Preset buttons (reused from existing .presets / .preset) ── */
/* These classes already exist in app.css — no changes needed    */

/* ── Tip cards ── */
.smtp-tip-card {
  background: var(--p6);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color var(--trans);
}
.smtp-tip-card:hover { border-color: var(--p4); }
.smtp-tip-provider {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.smtp-tip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.smtp-tip-card p { font-size: 12px; color: var(--text2); line-height: 1.55; }

/* ── Preset active state ── */
.preset.active-preset {
  border-color: var(--p1);
  background: var(--p6);
  color: var(--p1);
}

/* ── Alert auto-dismiss animation support ── */
.alert { transition: opacity .5s; }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .smtp-card-grid { grid-template-columns: repeat(2, 1fr); }
  .smtp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .slv-head, .slv-row { grid-template-columns: 32px 120px 1fr 150px 120px 100px 150px; }
}
@media (max-width: 860px) {
  .smtp-card-grid { grid-template-columns: 1fr; }
  .smtp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .smtp-panel-drawer { width: 100%; }
  .slv-head { display: none; }
  .slv-row { grid-template-columns: 32px 1fr auto; gap: 8px; }
  .slv-server, .slv-sender, .slv-usage { display: none; }
}
@media (max-width: 600px) {
  .smtp-stats-grid { grid-template-columns: 1fr 1fr; }
}


/* ══════════════════════════════════════════════════════
   SMTP LIST TABS — append to app.css
══════════════════════════════════════════════════════ */

/* Tab strip */
.smtp-list-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 0;
}
.smtp-list-tabs::-webkit-scrollbar { display: none }

/* Each tab button */
.slt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  font-family: inherit;
  transition: .12s;
  flex-shrink: 0;
}
.slt:hover { color: var(--text2) }
.slt.active { color: var(--p1); border-bottom-color: var(--p1) }

/* Count badge inside tab */
.slt-cnt {
  background: var(--p5);
  color: var(--p2);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.slt.active .slt-cnt { background: var(--p1); color: #fff }

/* + New List button at end */
.slt-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: inherit;
  transition: .12s;
}
.slt-new:hover { background: var(--p6); color: var(--p1); border-color: var(--p4) }
.slt-new svg { stroke: currentColor; stroke-width: 2.5; fill: none }

/* List tag shown on smtp cards */
.list-tag {
  background: #dcfce7;
  color: #15803d;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  display: inline-block;
}

/* List drawer elements */
.list-hint-box{background:var(--p6);border:1px solid var(--p5);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--p2);margin-bottom:14px;line-height:1.6}
.smtp-pick-list{display:flex;flex-direction:column;gap:5px;max-height:340px;overflow-y:auto;padding:2px}
.smtp-pick-list::-webkit-scrollbar{width:4px}
.smtp-pick-list::-webkit-scrollbar-thumb{background:var(--p4);border-radius:99px}
.smtp-pick-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:.12s;user-select:none}
.smtp-pick-row:hover{border-color:var(--p4);background:var(--p6)}
.smtp-pick-row.picked{border-color:var(--p1);background:var(--p6)}
.spr-cb{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border2);background:var(--surf);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.12s}
.smtp-pick-row.picked .spr-cb{background:var(--p1);border-color:var(--p1)}
.spr-cb svg{display:none}
.smtp-pick-row.picked .spr-cb svg{display:block}
.spr-name{font-size:12.5px;font-weight:600;color:var(--text)}
.spr-sub{font-size:11px;color:var(--muted)}
.list-total-badge{margin-top:8px;font-size:12px;font-weight:700;color:var(--p1);padding:7px 11px;background:var(--p6);border-radius:8px;border:1px solid var(--p5)}