/* assets/css/marketing.css */
/* Scoped styles for the Advanced Email Marketing / Sequences UI */

.mkt-shell{
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items:start;
}

.mkt-panel {
  background: var(--surface);
  border: var(--line);
  border-radius: 10px;
  padding: 10px;
}

.mkt-sidebar{
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 120px);
  overflow:auto;
}

.mkt-row{
  display:flex;
  align-items:center;
  gap: 10px;
}

.mkt-spacer{ flex:1; }

.mkt-search{
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.15);
  color: inherit;
}

.mkt-list{ margin-top: 12px; display:flex; flex-direction:column; gap: 8px; }

.mkt-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  cursor:pointer;
}
.mkt-item:hover{ background: rgba(0,0,0,.16); }
.mkt-item.active{ border-color: rgba(99, 211, 255, .55); box-shadow: 0 0 0 3px rgba(99, 211, 255, .10); }

/* Audience: people rows */
.mkt-person{
  display:grid;
  grid-template-columns: 1.6fr 1fr 0.9fr;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background: rgba(0,0,0,.10);
  margin-bottom:10px;
}
.mkt-person:hover{ background: rgba(0,0,0,.16); }
.mkt-person-main{min-width:0;display: flex;width: 100%;gap: 2px;flex-direction: column;}
.mkt-person-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  min-width:0;
}
.mkt-person-email{
  font-size:12px;
  opacity:.75;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mkt-person-meta{
  margin-top:4px;
  font-size:12px;
  opacity:.72;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mkt-person-step{ font-size:12px; opacity:.85; }
.mkt-badges{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end; }
.mkt-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.mkt-badge.danger{ border-color: rgba(255, 80, 80, .38); background: rgba(255, 80, 80, .12); }

/* Modal split layout (sidebar + main) */
.mkt-modal-split{ display:grid; grid-template-columns: 340px 1fr; gap:12px; }

@media (max-width: 900px){
  .mkt-person{ grid-template-columns: 1fr; }
  .mkt-badges{ justify-content:flex-start; }
  .mkt-modal-split{ grid-template-columns: 1fr; }
}

/* Attachments picker */
.mkt-attachments-modal .mkt-side{ min-width: 320px; }
.mkt-attach-list{ display:flex; flex-direction:column; gap:8px; }
.mkt-attach-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background: rgba(0,0,0,.08);
}
.mkt-attach-main{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.mkt-attach-name{ font-weight:900; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mkt-attach-meta{ font-size:11px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mkt-attach-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.mkt-item-title{ font-weight: 700; line-height:1.2; }
.mkt-item-meta{ opacity:.75; font-size: 12px; }

.mkt-pill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  opacity:.92;
}
.mkt-pill.draft{ background: rgba(255,255,255,.08); }
.mkt-pill.active{ background: rgba(50, 215, 75, .12); border-color: rgba(50,215,75,.25); }
.mkt-pill.paused{ background: rgba(255, 196, 0, .12); border-color: rgba(255,196,0,.28); }

.mkt-head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
}

.mkt-title-input{
  font-size: 18px;
  font-weight: 800;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: inherit;
}

.mkt-tabs{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.mkt-tab{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  cursor:pointer;
  font-weight: 650;
  font-size: 13px;
}
.mkt-tab.active{border-color: var(--primary);background: var(--strans);}

.mkt-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Generic grid used for checkbox groups and KPI collections */
.mkt-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mkt-muted{ opacity: .75; }

.mkt-steps{ margin-top: 12px; display:flex; flex-direction:column; gap: 10px; }
.mkt-step{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.10);
}
.mkt-step-top{ display:flex; align-items:center; gap:10px; }
.mkt-step-num{ width: 26px; height: 26px; border-radius: 999px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.16); font-weight:800; font-size:12px; }
.mkt-step-type{ font-weight:800; }
.mkt-step-summary{ opacity:.8; font-size: 12px; margin-top: 6px; }

.mkt-kpi{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.08);
}
.mkt-kpi .label{ font-size: 12px; opacity:.75; }
.mkt-kpi .value{ font-size: 22px; font-weight: 900; margin-top: 4px; }

.mkt-table{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.mkt-table th, .mkt-table td{
  text-align:left;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
}
.mkt-table th{ opacity:.75; font-weight: 750; }

.mkt-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  overflow:auto;
}

/* Status chips (SPF/DMARC/DKIM/Tracking etc.) */
.mkt-chip i{font-size: 11px;}
.mkt-chip.ok{
  border-color: rgba(83, 255, 170, .35);
  background: rgba(83, 255, 170, .08);
}
.mkt-chip.warn{
  border-color: rgba(255, 210, 99, .40);
  background: rgba(255, 210, 99, .10);
}



/* Modal sizing for the sequences builder */
.mkt-step-modal .u-card{
  min-width: min(980px, 96vw);
  max-width: min(1100px, 96vw);
}
.mkt-wide-modal .u-card,
.mkt-ai-modal .u-card,
.mkt-preview-modal .u-card{
  min-width: min(860px, 96vw);
  max-width: min(980px, 96vw);
}

/* Small UI helpers used inside modals */
.mkt-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  display: grid;
  grid-template-rows: max-content;
}

.mkt-details{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.08);
}
.mkt-details > summary{
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}
.mkt-details > summary::-webkit-details-marker{ display:none; }

.u-fields{ display:grid;}

.u-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  align-items: flex-start;
}
.u-field label{font-size:12px;opacity:.75;}

.mkt-kv{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: var(--line);
  background: var(--strans);
}
.mkt-kv .k{ font-size: 12px; opacity:.75; font-weight: 850; min-width: 70px; }
.mkt-kv .v{ font-size: 13px; font-weight: 800; flex:1; overflow:hidden; }
.mkt-tabs .spacer{ flex:1; }


/* --- New Sequences (Overview + Detail) layout --------------------------- */

.mkt-page {
  display:flex;
  flex-direction:column;
  gap: 10px;
  height: 91vh;
  padding: 10px;
  --mkt-accent: var();
  --mkt-accent: var(--primary);
  margin: 0 auto;
  color: var(--text);
  background: var(--surface);
  border-radius: 20px;
  min-height: 420px;
}

.mkt-home-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.mkt-home-left{ min-width: 240px; }

.mkt-home-title{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .2px;
}

.mkt-home-sub{ max-width: 720px; }

.mkt-home-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap:wrap;
}

.mkt-home-tabs{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
}

.mkt-home-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.mkt-top-tab{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 15px;
  border: var(--line);
  background: var(--strans);
  font-weight: 850;
  font-size: 13px;
  cursor:pointer;
}

.mkt-top-tab:hover{ border-color: rgba(255,255,255,.22); background: rgba(0,0,0,.12); }
.mkt-top-tab.active{border: 1px solid var(--primary);background: var(--primary-dark);color: #fff;}

#mktTabBody{display:grid;gap:5px;overflow: auto;min-height: 0;height: -webkit-fill-available;scrollbar-width: thin;scrollbar-color: var(--primary-faded) transparent;}
.mkt-dash-grid{ display:grid; gap: 12px; }
.mkt-dash-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mkt-dash-card{min-height: auto;}

.mkt-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.mkt-card-title{ font-weight: 950; }

.mkt-card-menu{ opacity:.9; }

.mkt-card-metric{margin-top: 10px;}
.mkt-card-metric .value{ font-size: 28px; font-weight: 950; letter-spacing: .2px; }

.mkt-card-kpis, .mkt-card-mini{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mkt-card-kpis .k, .mkt-card-mini .k{ font-size: 11px; opacity:.75; font-weight: 900; text-transform: uppercase; letter-spacing:.06em; }
.mkt-card-kpis .v, .mkt-card-mini .v{ font-size: 13px; font-weight: 900; display:block; margin-top:2px; }

.mkt-spark{ width: 140px; height: 34px; }
.mkt-spark path{ stroke: rgba(255,255,255,.85); stroke-width: 2; fill:none; opacity:.9; }

.mkt-gauge{ width: 90px; height: 54px; }
.mkt-gauge .bg{ stroke: rgba(255,255,255,.18); stroke-width: 8; fill:none; stroke-linecap: round; }
.mkt-gauge .fg{ stroke: rgba(255,255,255,.90); stroke-width: 8; fill:none; stroke-linecap: round; }

.mkt-title-input{
  width:100%;
  font-size: 18px;
  font-weight: 950;
  background: transparent;
  border: var(--line);
  border-radius: 12px;
  padding: 2px 8px;
}

.mkt-title-input:focus{ outline:none; border-color: rgba(255,255,255,.28); }

.mkt-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.mkt-table thead th{
  text-align:left;
  font-size: 11px;
  opacity: .75;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.mkt-table tbody td{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mkt-table tbody tr:hover{ background: rgba(255,255,255,.04); }

.mkt-code-inline{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  border: var(--line);
  background: var(
  --strans);
}

/* Provider icons / mailboxes */
.mkt-provider-badge{ display:inline-flex; align-items:center; gap:8px; }
.mkt-provider-badge img{ width:18px; height:18px; object-fit:contain; display:block; }
.mkt-scope-pill{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: var(--line);
  opacity: .9;
}
.mkt-scope-pill.marketing{ border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.12); }
.mkt-scope-pill.global{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.10); }
.mkt-mbx-row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.mkt-mbx-meta{ display:flex; flex-direction:column; gap: 3px; }
.mkt-mbx-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.mkt-progress{ width: 180px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; border: var(--line); }
.mkt-progress > span{ display:block; height: 100%; background: rgba(59,130,246,.75); width: 0%; }

.mkt-pill.ok{ border-color: rgba(0,255,150,.35); background: rgba(0,255,150,.14); }
.mkt-pill.warn{ border-color: rgba(255,200,0,.35); background: rgba(255,200,0,.14); }
.mkt-pill.bad{ border-color: rgba(255,80,80,.35); background: rgba(255,80,80,.14); }

.mkt-chip.ok{border-color: rgba(0,255,150,.35);background: rgba(0,255,150,.14);}
.mkt-chip.bad{ border-color: rgba(255,80,80,.35); background: rgba(255,80,80,.14); }

.mkt-toggle{ display:inline-flex; gap:6px; align-items:center; }
.mkt-toggle-sm .mkt-seg{ padding: 6px 10px; font-size: 12px; }
.mkt-seg{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.86);
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 900;
  cursor:pointer;
}
.mkt-seg:hover{ border-color: rgba(255,255,255,.22); }
.mkt-seg.active{border-color: rgba(255,255,255,.30);background: var(--primary);}

.mkt-days{ display:flex; gap:10px; flex-wrap:wrap; }
.mkt-day{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 2px 8px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  font-size: 12px;
  font-weight: 850;
  cursor:pointer;
}



@media (max-width: 980px){
  .mkt-shell{ grid-template-columns: 1fr; }
  .mkt-sidebar{ position: relative; max-height: none; }
  .mkt-grid-2{ grid-template-columns: 1fr; }
  .mkt-grid{ grid-template-columns: 1fr 1fr; }
  .mkt-dash-grid-3{ grid-template-columns: 1fr; }
  .mkt-home-head{ flex-direction:column; align-items:flex-start; }
  .mkt-home-right{ justify-content:flex-start; }
}

@media (max-width: 560px){
  .mkt-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .mkt-grid{ grid-template-columns: 1fr; }
}


/* Dashboard KPI cards */
.mkt-dash{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.mkt-span-2{ grid-column: span 2; }
.mkt-span-3{ grid-column: span 3; }

@media (max-width: 1020px){
  .mkt-dash{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-span-3{ grid-column: span 2; }
}
@media (max-width: 720px){
  .mkt-dash{ grid-template-columns: 1fr; }
  .mkt-span-2, .mkt-span-3{ grid-column: span 1; }
}

.mkt-kpi-card{
  padding: 12px;
}
.mkt-kpi-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-top:10px;
}
.mkt-kpi-main{
  min-width:0;
}
.mkt-kpi-value{
  font-size:34px;
  font-weight: 900;
  letter-spacing:-0.02em;
  line-height:1.1;
}
.mkt-kpi-sub{
  margin-top:6px;
  font-size:12px;
  color: var(--text);
  display:flex;
  align-items:center;
  gap:6px;
}
.mkt-kpi-sub i{
  color: var(--primary);
}
.mkt-kpi-foot{
  margin-top: 14px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.mkt-kpi-mini{
  display:flex;
  gap: 10px;
  font-size:12px;
  font-weight: 600;
  color: #000;
  background: var(--primary-light);
  border-radius: 10px;
  padding: 5px;
}
.mkt-kpi-mini b, .mkt-leg b{
  font-weight: 900;
  letter-spacing:-0.01em;
  color: var(--text);
  background: var(--surface);
  border-radius: 100%;
  height: 16px;
  width: 16px;
  text-align: center;
}

.mkt-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 10px;
  border-radius:999px;
  border: var(--line);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

/* Spark + bars */
.mkt-spark path{
  stroke: var(--mkt-accent);
  stroke-width:2.2;
  fill:none;
  stroke-linecap: round;
}
.mkt-bars .bar{
  fill: var(--strans);
}
.mkt-bars .bar.active{
  fill: var(--mkt-accent);
}
.mkt-bars .xlab{
  font-size:10px;
  fill: var(--muted);
}
.mkt-bars .pill rect{
  fill: var(--mkt-accent);
}
.mkt-bars .pill text{
  font-size:10px;
  fill: white;
  font-weight:900;
}

/* Device insights */
.mkt-dev-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}
.mkt-dev-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  font-size:12px;
  color: var(--muted);
}
.mkt-dev-head b{
  color: var(--text);
  font-weight:900;
}
.mkt-dev-bar{
  margin-top:8px;
  height:72px;
  border-radius:12px;
  background: var(--strans);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.mkt-dev-bar > div{
  width:100%;
  background: color-mix(in srgb, var(--mkt-accent) 22%, transparent 78%);
}

/* Area spline */
.mkt-area-wrap{
  margin-top:10px;
}
.mkt-area .area{
  fill: color-mix(in srgb, var(--mkt-accent) 14%, transparent 86%);
}
.mkt-area .line{
  stroke: var(--mkt-accent);
  stroke-width:2.4;
  fill:none;
  stroke-linecap: round;
}
.mkt-area .node{
  fill: var(--surface);
  stroke: var(--mkt-accent);
  stroke-width:2;
}
.mkt-area .node:hover{
  r: 5.5;
}

/* Speedometer */
.mkt-speedo .track{
  stroke: var(--strans);
  stroke-width:12;
  fill:none;
  stroke-linecap: round;
}
.mkt-speedo .value{
  stroke: var(--mkt-accent);
  stroke-width:12;
  fill:none;
  stroke-linecap: round;
}
.mkt-speedo .tick{
  stroke: color-mix(in srgb, var(--muted) 45%, transparent 55%);
  stroke-width:2;
}
.mkt-speedo .needle{
  stroke: var(--primary);
  stroke-width:3;
  stroke-linecap: round;
}
.mkt-speedo .hub{
  fill: var(--primary-faded);
}
.mkt-speedo-wrap{
  display:flex;
  justify-content:center;
  margin-top:8px;
}

/* Triple arcs */
.mkt-arcs .arc{
  fill:none;
  stroke-linecap: round;
  stroke-width:10;
}
.mkt-arcs .arc.track{
  stroke: var(--strans);
}
.mkt-arcs .arc.value{
  stroke: var(--mkt-accent);
}
.mkt-arc-wrap{
  display:flex;
  justify-content:center;
  margin-top:6px;
}
.mkt-legend{
  margin-top:8px;
  display: flex;
  gap: 10px;
}
.mkt-leg{
  display:flex;
  align-items:center;
  gap:8px;
  color: #000;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-light);
  border-radius: 10px;
  padding: 0 4px;
}
.mkt-leg .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--primary);
}
.mkt-legend .mkt-leg:nth-child(2) .dot{ opacity: .72; }
.mkt-legend .mkt-leg:nth-child(3) .dot{ opacity: .45; }

/* Tighten card header for dashboard */
.mkt-kpi-card .mkt-card-top{
  margin-bottom: 2px;
}


/* --------------------------------------------------------------------------
   CSV import (Audience) + AI modal carousel + Rich email editor
   These classes are used by sequences.js for the new smoother flows.
-------------------------------------------------------------------------- */

/* Theme-aware surface helpers (keeps marketing UI looking good on light + dark) */
.mkt-card,
.mkt-item,
.mkt-search,
.mkt-details,
.mkt-code{
  border: var(--line);
  /* background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); */
}
.mkt-item:hover{
  background: color-mix(in srgb, var(--surface) 88%, var(--text) 12%);
}
.mkt-table th,
.mkt-table td{
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

/* Compact button used inside toolbars */
.btn.tiny{
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 10px;
}

/* --- CSV import drop zone + pending bar --------------------------------- */
.mkt-drop{
  border: 1.5px dashed color-mix(in srgb, var(--line, #ccc) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
  border-radius: 14px;
  padding: 14px;
  min-height: 140px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition: 0.15s cubic-bezier(0.2,0,0,1);
}
.mkt-drop.dragover{
  background: color-mix(in srgb, var(--primary, #2563eb) 10%, var(--surface) 90%);
  border-color: color-mix(in srgb, var(--primary, #2563eb) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2563eb) 20%, transparent);
}
.mkt-drop strong{ display:block; font-weight: 900; }

.mkt-pending{ margin-top: 10px; display:flex; flex-direction:column; gap:8px; }
.mkt-file{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line, #ccc) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, var(--text) 6%);
}
.mkt-file .name{ font-weight: 800; }
.mkt-file .size{ margin-left:auto; font-size:12px; color: var(--text-muted); }
.mkt-file .actions{ display:flex; gap:6px; }
.mkt-file .actions .btn{ width:34px; height:34px; padding:0; border-radius: 10px; }

/* --- Carousel body (CSV details + AI draft) ------------------------------ */
.mkt-carousel{ display:grid; gap: 10px; }
.mkt-carousel-head{ display:flex; align-items:center; gap: 10px; }
.mkt-carousel-head .title{ font-weight: 900; }
.mkt-carousel-nav{ display:flex; gap: 6px; }
.mkt-carousel-nav .btn{ width:36px; height:36px; padding:0; border-radius: 12px; }
.mkt-carousel-track{
  display:flex;
  width:100%;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line, #ccc) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, var(--text) 6%);
}
.mkt-carousel-track.anim{ transition: transform .22s cubic-bezier(0.2,0,0,1); }
.mkt-carousel-slide{ flex: 0 0 100%; min-width: 100%; padding: 12px; }

.mkt-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 8px; }

/* --- Checkbox label helper --------------------------------------------- */
.mkt-check{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.mkt-check input{ width: 16px; height: 16px; }

/* --- Rich Email Editor -------------------------------------------------- */
.mkt-email-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 2px;
  /* background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); */
}
.mkt-editor-modes{
  display:flex;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  border: var(--line);
  background: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
}
.mkt-mode{
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  opacity: .8;
}
.mkt-mode.active{
  background: color-mix(in srgb, var(--primary, #2563eb) 18%, transparent);
  opacity: 1;
}

.mkt-tbtn{
  width: 26px;
  height: 28px;
  border-radius: 10px;
  border: var(--line);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mkt-tbtn:hover{ background: color-mix(in srgb, var(--primary, #2563eb) 10%, transparent); }
.mkt-editor-sep{ width: 1px; height: 22px; background: color-mix(in srgb, var(--line, #ccc) 65%, transparent); margin: 0 2px; }

.mkt-editor-write{
  min-height: 220px;
  padding: 10px 12px;
  outline: none;
  line-height: 1.45;
}
.mkt-editor-write:focus{
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary, #2563eb) 25%, transparent);
}
.mkt-email-editor .mkt-editor-src{
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 12px;
  min-height: 220px;
}

/* --- Generic grid helper used in settings panels ------------------------ */
.mkt-grid{ display:grid; gap: 10px; }
@media (min-width: 760px){
  .mkt-grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ----------------------------------------------------------------------
   Modals (AI writer, CSV importer, previews)
---------------------------------------------------------------------- */

.u-modal.mkt-ai-modal .u-card,
.u-modal.mkt-csv-modal .u-card{
  width: min(920px, 96vw);
}

.u-modal.mkt-preview-modal .u-card{
  width: min(860px, 96vw);
}

/* ----------------------------------------------------------------------
   Carousel (CSV details + AI writer)
---------------------------------------------------------------------- */

.mkt-carousel{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.mkt-carousel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.mkt-carousel-title{
  display:flex;
  align-items:center;
  gap: 12px;
}

.mkt-carousel-nav{
  display:flex;
  align-items:center;
  gap: 6px;
}

.mkt-carousel-nav .btn{
  padding: 8px 10px;
  border-radius: 12px;
}

.mkt-carousel-viewport{
  overflow:hidden;
  border: 1px solid color-mix(in srgb, var(--line, #ccc) 55%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg, #fff) 92%, transparent);
}

.mkt-carousel-track{
  display:flex;
  transition: transform .22s cubic-bezier(.2,0,.2,1);
}

.mkt-carousel-slide{
  padding: 14px 14px 12px;
}

/* AI writer slides (simple show/hide) */
.mkt-ai-modal .mkt-slide{
  padding: 2px 0;
}

/* ----------------------------------------------------------------------
   AI hero (Donna)
---------------------------------------------------------------------- */

.mkt-ai-hero{
  display:flex;
  align-items:center;
  gap: 12px;
}

.mkt-ai-avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mkt-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--line, #ccc) 55%, transparent);
  object-fit: cover;
}

.mkt-ai-name{
  font-weight: 950;
  letter-spacing: .01em;
}

/* ----------------------------------------------------------------------
   CSV import dropzone + pending files bar
---------------------------------------------------------------------- */

.mkt-drop{
  border: 1px dashed color-mix(in srgb, var(--line, #ccc) 65%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg, #fff) 92%, transparent);
  padding: 18px;
}

.mkt-drop.is-over{
  border-color: color-mix(in srgb, var(--mkt-accent) 65%, transparent);
  background: color-mix(in srgb, var(--mkt-accent) 6%, var(--bg, #fff));
}

.mkt-drop-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: 10px;
  min-height: 140px;
}

.mkt-drop .btn{
  padding: 10px 12px;
  border-radius: 12px;
}

.mkt-pending{
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: 160px;
  overflow:auto;
  padding-right: 2px;
}

.mkt-file{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line, #ccc) 55%, transparent);
  background: color-mix(in srgb, var(--bg, #fff) 94%, transparent);
}

.mkt-file .name{ font-weight: 900; }
.mkt-file .size{ margin-left:auto; color: var(--muted); font-size: 12px; }
.mkt-file .btn{ padding: 8px 10px; border-radius: 12px; }

/* ----------------------------------------------------------------------
   Email builder editor (Plain/HTML/Text sync)
---------------------------------------------------------------------- */

.mkt-email-editor{
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow:hidden;
  gap: 4px;
}

.mkt-editor-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 2px;
  padding: 5px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
}

.mkt-editor-actions{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap:wrap;
}

.mkt-editor-actions .btn{
  padding: 7px 9px;
  border-radius: 12px;
}

.mkt-editor-body{
  padding: 10px;
}

.mkt-editor-write{
  min-height: 220px;
  border: 1px solid color-mix(in srgb, var(--line, #ccc) 55%, transparent);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface, #fff) 96%, var(--text, #111) 4%);
  color: var(--text, #111);
  outline: none;
  line-height: 1.5;
}

.mkt-editor-write:focus{
  outline: 2px solid color-mix(in srgb, var(--mkt-accent) 30%, transparent);
  outline-offset: 2px;
}

.mkt-email-editor textarea{
  width: 100%;
  min-height: 220px;
  border-radius: 14px;
}

.mkt-email-editor a{
  color: var(--mkt-accent);
}

/* ----------------------------------------------------------------------
   Manual lead entry (simulator)
---------------------------------------------------------------------- */

.u-modal.mkt-wide-modal .u-card{
  width: min(980px, calc(100vw - 40px));
}

.u-modal.mkt-wide-modal .u-card-body{
  max-height: 75vh;
  overflow: auto;
}

tr.mkt-bad td{
  background: rgba(220, 53, 69, 0.08);
}

tr.mkt-bad input,
tr.mkt-bad textarea{
  box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.35);
}

/* ----------------------------------------------------------------------
   Analytics multi-series chart
---------------------------------------------------------------------- */

.mkt-multi .area{
  fill: color-mix(in srgb, var(--mkt-accent) 18%, transparent 82%);
}

.mkt-multi .line{
  fill:none;
  stroke-width: 3;
  stroke-linecap: round;
}

.mkt-multi .line.sent{ stroke: var(--mkt-accent); }
.mkt-multi .line.opens{ stroke: color-mix(in srgb, var(--mkt-accent) 65%, var(--text, #fff) 35%); opacity: .95; }
.mkt-multi .line.clicks{ stroke: color-mix(in srgb, var(--mkt-accent) 45%, var(--text, #fff) 55%); opacity: .85; }
.mkt-multi .line.replies{ stroke: color-mix(in srgb, var(--mkt-accent) 30%, var(--text, #fff) 70%); opacity: .80; }

.mkt-multi .node{
  fill: var(--mkt-accent);
  stroke: color-mix(in srgb, var(--surface, #fff) 80%, transparent);
  stroke-width: 2;
}

.mkt-multi .xlab{
  font-size: 11px;
  fill: var(--muted);
}



/* --- Audience (People list) --- */
.mkt-people-table{
  border:1px solid var(--mkt-border);
  border-radius:14px;
  overflow:hidden;
}

.mkt-people-head{
  display:grid;
  grid-template-columns: 1.2fr 0.5fr 0.8fr 1.6fr 0.5fr;
  gap:12px;
  padding:10px 12px;
  background: var(--primary-dark);
  border-bottom: var(--line);
  font-weight:900;
  font-size:12px;
}

.mkt-people-body{
  background: var(--surface);
}

.mkt-people-row{
  display:grid;
  grid-template-columns: 1.2fr 0.5fr 0.8fr 1.6fr 0.5fr;
  gap:12px;
  padding:12px 12px;
}

.mkt-people-row:hover{
  border:1px dashed var(--primary-faded);
}

.mkt-people-cell{
  min-width:0;
  align-self: baseline;
  justify-items: flex-start;
}

.mkt-people-main{
  font-weight:900;
  line-height:1.2;
}

.mkt-people-sub{
  margin-top:2px;
  font-size:12px;
  color:#64748b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mkt-people-from{
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mkt-people-camp .mkt-kv{
  display:flex;
  gap:8px;
  align-items:baseline;
  margin-top: 1px;
  font-size: 10px;
  padding: 2px 5px;
  border: 0;
  /* background: none; */
}

.mkt-people-camp .mkt-kv .k{
  color: var(--dots);
  width: auto;
  flex:0 0 auto;
  font-size: 11px;
}

.mkt-people-camp .mkt-kv .v{
  color: var(--primary-dark);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size: 11px;
}

.mkt-people-badge{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.mkt-people-empty{
  padding:18px 12px;
  color:#64748b;
  grid-column:1 / -1;
}

/* Events badge */
.mkt-evt-badge{
  gap:8px;
  padding:6px 10px;
}

.mkt-evt-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  padding:2px 6px;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

/* --- Domains list --- */
.mkt-dom-table{
  border:1px solid var(--mkt-border);
  border-radius:14px;
  overflow:hidden;
}

.mkt-dom-head{
  display:grid;
  grid-template-columns: 1.2fr 1.4fr 1.0fr 0.7fr 90px;
  gap:12px;
  padding:10px 12px;
  background: var(--primary-dark);
  font-weight:900;
  font-size:12px;
}

.mkt-dom-row{
  display:grid;
  grid-template-columns: 1.2fr 1.4fr 1.0fr 0.7fr 90px;
  gap:12px;
  padding:12px 10px;
  border-bottom:1px solid var(--strans);
}

.mkt-dom-row:hover{
  background:var(--strans);
}

.mkt-dom-name{
  font-weight:900;
}

.mkt-dom-mini{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

.mkt-dom-empty{
  padding:18px 12px;
  color:#64748b;
}

/* --- Popovers (events, legend, snapshots, etc.) --- */
.mkt-pop{
  min-width:320px;
  max-width:520px;
}

.mkt-pop-head{
  padding:10px 12px;
  border-bottom:1px solid var(--mkt-border);
}

.mkt-pop-title{
  font-weight:900;
}

.mkt-pop-sub{
  margin-top:2px;
  font-size:12px;
  color:#64748b;
}

.mkt-pop-body{
  padding:10px 12px;
}

.mkt-pop-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mkt-pop-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.mkt-pop-ico{
  width:26px;
  height:26px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--mkt-border);
  background:#fff;
  flex:0 0 auto;
}

.mkt-pop-txt{
  min-width:0;
}

.mkt-pop-line1{
  font-weight:900;
  font-size:12px;
  letter-spacing:0.02em;
}

.mkt-pop-line2{
  margin-top:2px;
  font-size:12px;
  color:#64748b;
  word-break:break-word;
}

/* --- Verification modal details --- */
.mkt-json{
  max-height:260px;
  overflow:auto;
  padding:10px 12px;
  border:1px solid var(--mkt-border);
  border-radius:12px;
  background:#0b1220;
  color:#e2e8f0;
  font-size:12px;
  line-height:1.4;
}

.mkt-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
}

.mkt-prewrap{
  white-space:pre-wrap;
  word-break:break-word;
}

.mkt-rec-pill{
  cursor:pointer;
}

/* --- Analytics giant chart --- */
.mkt-giant-chart-wrap{
  padding: 10px 10px 0;
  overflow-x:auto;
}

.mkt-giant-chart{
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content;
  /* gap: 0.7vw; */
  align-items:flex-end;
  min-height: 320px;
  /* width: 100%; */
}

.mkt-bar-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:24px;
}

.mkt-bar-group{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:260px;
}

.mkt-bar{
  width: 4px;
  border-radius:999px;
  background:#94a3b8;
}

.mkt-bar-x{
  font-size:11px;
  color:#64748b;
  min-height:14px;
  white-space:nowrap;
}

/* Metric colors (bars + dots) */
.mkt-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
  background:#94a3b8;
}

.mkt-bar.m-completed, .mkt-dot.m-completed{ background:#10b981; }
.mkt-bar.m-stopped, .mkt-dot.m-stopped{ background:#f59e0b; }
.mkt-bar.m-sent, .mkt-dot.m-sent{ background:#3b82f6; }
.mkt-bar.m-failed, .mkt-dot.m-failed{ background:#ef4444; }
.mkt-bar.m-skipped, .mkt-dot.m-skipped{ background:#94a3b8; }
.mkt-bar.m-bounces, .mkt-dot.m-bounces{ background:#8b5cf6; }
.mkt-bar.m-unsubscribes, .mkt-dot.m-unsubscribes{ background:#f97316; }
.mkt-bar.m-complaints, .mkt-dot.m-complaints{ background:#dc2626; }

/* Legend + snapshot lists */
.mkt-legend-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mkt-legend-row{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
}

.mkt-snap-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mkt-snap-item{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  cursor:pointer;
}

.mkt-snap-item input{
  width:16px;
  height:16px;
}

/* Analytics hover tooltip */
.mkt-anal-tip{
  position:fixed;
  z-index:100000;
  background:#0b1220;
  color:#e2e8f0;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  max-width:320px;
}

.mkt-anal-tip .mkt-tip-title{
  font-weight:900;
  margin-bottom:8px;
}

.mkt-anal-tip .mkt-tip-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:6px 10px;
  font-size:12px;
}

.mkt-tip-name{
  display:flex;
  gap:8px;
  align-items:center;
}

.mkt-tip-val{
  text-align:right;
  font-variant-numeric: tabular-nums;
}

.mkt-tip-total{
  padding-top:6px;
  margin-top:4px;
  border-top:1px solid rgba(255,255,255,0.12);
  font-weight:900;
}

.mkt-tip-total-val{
  padding-top:6px;
  margin-top:4px;
  border-top:1px solid rgba(255,255,255,0.12);
  text-align:right;
  font-weight:900;
}

/* --- Step analytics modal --- */
.mkt-step-anal-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}

.mkt-kpi{
  border:1px solid var(--mkt-border);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}

.mkt-kpi-label{
  font-size:12px;
  color:#64748b;
  font-weight:900;
  letter-spacing:0.02em;
  text-transform:uppercase;
}

.mkt-kpi-val{
  font-size:22px;
  font-weight:900;
  margin-top:6px;
}

.mkt-kpi-sub{
  font-size:12px;
  color:#64748b;
  margin-top:4px;
}

/* Responsive tweaks */
@media (max-width: 980px){
  .mkt-people-head,
  .mkt-people-row{
    grid-template-columns: 1.3fr 0.9fr 0.8fr 1.5fr 0.6fr;
  }
  .mkt-dom-head,
  .mkt-dom-row{
    grid-template-columns: 1.2fr 1.5fr 1.1fr 1.0fr 0.7fr;
  }
  .mkt-step-anal-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .mkt-people-head{ display:none; }
  .mkt-people-row{
    grid-template-columns: 1fr;
    gap:8px;
  }
  .mkt-people-badge{ justify-content:flex-start; }
  .mkt-dom-head{ display:none; }
  .mkt-dom-row{
    grid-template-columns: 1fr;
    gap:8px;
  }
  .mkt-step-anal-grid{
    grid-template-columns: 1fr;
  }
}