/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .block {
    display: block;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .table {
    display: table;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .underline {
    text-decoration-line: underline;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
:root {
  --font-display: "Segoe UI", Arial, sans-serif;
  --font-body: "Segoe UI", Arial, sans-serif;
  --ink: #172033;
  --muted: #667085;
  --line: #e7eaf0;
  --soft: #f6f8fb;
  --blue: #2167f3;
  --nav: #111a2b;
  --green: #14a675;
  --purple: #7b61d9;
  --orange: #e87b35;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: #f7f8fb;
  color: var(--ink);
  font-family: var(--font-body), Arial, sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.app-shell {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 246px;
  background: var(--nav);
  color: #d8deea;
  padding: 24px 15px 18px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand {
  border: 0;
  background: transparent;
  color: #fff;
  font: 700 20px var(--font-display);
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 0 8px 27px;
}
.brand span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--blue);
  font-size: 15px;
}
.workspace {
  border-top: 1px solid #2a3446;
  padding: 22px 8px 13px;
}
.workspace label {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #79859b;
}
.workspace-details {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  color: white;
  text-align: left;
}
.workspace small,
.profile small {
  display: block;
  color: #8792a5;
  font-size: 11px;
  font-weight: 400;
}
.sidebar nav button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #9ba6b8;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-size: 14px;
  margin: 2px 0;
}
.sidebar nav button:hover,
.sidebar nav button.active {
  background: #263248;
  color: #fff;
}
.sidebar nav button.active {
  box-shadow: inset 3px 0 var(--blue);
}
.sidebar nav button i {
  font-style: normal;
  width: 19px;
  text-align: center;
  font-size: 17px;
}
.sidebar nav button em {
  font-style: normal;
  margin-left: auto;
  font-size: 11px;
  background: #344158;
  padding: 2px 7px;
  border-radius: 10px;
}
.nav-break {
  border-top: 1px solid #2a3446;
  margin-top: 12px;
  padding-top: 12px;
}
.profile {
  margin-top: auto;
  border-top: 1px solid #2a3446;
  padding: 17px 7px 0;
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 12px;
}
.profile div {
  flex: 1;
}
.profile button {
  border: 0;
  background: transparent;
  color: #8390a5;
}
.avatar {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border-radius: 50%;
  background: #dfe9ff;
  color: #315eae;
  font-weight: 700;
  font-size: 11px;
}
main {
  margin-left: 246px;
  min-height: 100vh;
}
header {
  height: 77px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
header p {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #9aa1ae;
  margin: 0 0 2px;
  font-weight: 700;
}
h1 {
  font: 700 20px var(--font-display);
  margin: 0;
}
.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.header-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bell {
  position: relative;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  width: 38px;
  height: 36px;
}
.bell i {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ef4e5e;
  border-radius: 50%;
  right: 8px;
  top: 7px;
}
.primary,
.secondary,
.date {
  border-radius: 7px;
  padding: 9px 15px;
  font-size: 12px;
  font-weight: 600;
}
.primary {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 5px #2167f32c;
}
.primary:hover {
  background: #1858d7;
}
.secondary,
.date {
  border: 1px solid #dce1e9;
  background: #fff;
  color: #344054;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d6deeb;
  border-radius: 999px;
  padding: 9px 13px;
  background: #fff;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px #1018280a;
}
.status-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a7b0c0;
  display: inline-block;
}
.status-pill.live {
  border-color: #c7eadc;
  color: #16785b;
  background: #eefaf5;
}
.status-pill.live i {
  background: #17b26a;
  box-shadow: 0 0 0 4px #dff6ec;
}
.content {
  padding: 29px 31px 45px;
  max-width: 1500px;
  margin: auto;
}
.welcome,
.page-lead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 23px;
}
.welcome h2,
.page-lead h2 {
  font: 700 21px var(--font-display);
  margin: 0 0 4px;
}
.welcome p,
.page-lead p,
.card-head p,
.form-card > p,
.settings-panel > p,
.panel-title p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.date {
  min-width: 125px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.dashboard-hero {
  margin-bottom: 18px;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
}
.dashboard-hero h2 {
  font: 700 24px var(--font-display);
  margin: 6px 0 4px;
}
.dashboard-hero p {
  margin: 0;
  color: var(--muted);
}
.hero-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}
.eyebrow {
  margin: 0;
  color: #687588;
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 700;
  text-transform: uppercase;
}
.metric {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 17px 18px;
  position: relative;
  box-shadow: 0 1px 2px #10182808;
}
.metric > i {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-style: normal;
}
.metric > i.blue {
  background: #eaf1ff;
  color: var(--blue);
}
.metric > i.green {
  background: #e9f8f2;
  color: var(--green);
}
.metric > i.purple {
  background: #f0edff;
  color: var(--purple);
}
.metric > i.orange {
  background: #fff0e8;
  color: var(--orange);
}
.metric > span {
  display: block;
  color: #7a8494;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.8px;
}
.metric > strong {
  display: block;
  font: 700 25px var(--font-display);
  margin: 9px 0 4px;
}
.metric p {
  margin: 0;
  color: #8a94a4;
  font-size: 10px;
}
.metric p b {
  color: var(--green);
  margin-right: 3px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px #10182807;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(280px, 0.9fr);
  gap: 18px;
  margin-bottom: 18px;
}
.card-head {
  padding: 17px 19px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.card-head h3,
.form-card h3,
.tips h3,
.settings-panel h3,
.review h3 {
  font: 700 14px var(--font-display);
  margin: 0 0 3px;
}
.card-head button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
}
.chart {
  padding: 13px 20px 11px;
}
.legend {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  font-size: 10px;
  color: #667085;
}
.legend span {
  display: flex;
  gap: 6px;
  align-items: center;
}
.legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.legend span + span i {
  background: var(--purple);
}
.legend span:nth-child(2) i {
  background: #e87b35;
}
.legend span:nth-child(3) i {
  background: var(--purple);
}
.bar-chart-wrap {
  display: grid;
  grid-template-columns: 34px 1fr;
  height: 190px;
  margin-top: 8px;
}
.bar-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 25px;
  color: #a0a8b5;
  font-size: 9px;
}
.bar-plot {
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 40px, #edf0f4 41px);
}
.bar-group {
  min-width: 38px;
  flex: 1;
  display: grid;
  grid-template-rows: 1fr 22px;
  text-align: center;
  color: #9aa2af;
  font-size: 9px;
}
.bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 2px;
  min-height: 0;
}
.bar {
  width: min(9px, 27%);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--blue);
  transition: height .3s ease;
}
.bar.failed {
  background: #e87b35;
}
.bar.empty {
  background: var(--purple);
}
.bar-group > span {
  padding-top: 6px;
  white-space: nowrap;
}
.chart-empty {
  height: 190px;
  display: grid;
  place-items: center;
  color: #7b8492;
  font-size: 12px;
}
.date-range {
  display: flex;
  align-items: end;
  gap: 7px;
}
.date-range label {
  display: grid;
  gap: 3px;
  color: #667085;
  font-size: 9px;
  text-align: left;
}
.date-range input {
  min-width: 126px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #344054;
  font: inherit;
}
.date-range .date-clear {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 7px 3px;
}
.page-actions, .campaign-toolbar-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}
.campaign-toolbar-actions > input {
  min-width: 180px;
}
.analytics-range {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}
.analytics-range button {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #667085;
  padding: 7px 10px;
  font-size: 11px;
  cursor: pointer;
}
.analytics-range button.active {
  background: #eaf1ff;
  color: var(--blue);
  font-weight: 700;
}
@media (max-width: 760px) {
  .page-actions,
  .campaign-toolbar-actions,
  .date-range {
    width: 100%;
    flex-wrap: wrap;
  }
  .date-range label {
    flex: 1;
  }
  .date-range input {
    width: 100%;
    min-width: 118px;
  }
  .campaign-toolbar-actions > input {
    width: 100%;
    min-width: 0;
  }
  .hero-side .date-range {
    justify-content: flex-end;
  }
}
.plot {
  display: grid;
  grid-template-columns: 27px 1fr;
  height: 157px;
  margin-top: 5px;
}
.plot > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #a0a8b5;
  font-size: 9px;
  padding-bottom: 10px;
}
.plot svg {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 34px,
    #edf0f4 35px
  );
}
.xaxis {
  display: flex;
  justify-content: space-between;
  margin-left: 30px;
  color: #9aa2af;
  font-size: 9px;
}
.health {
  padding-bottom: 8px;
}
.score {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 20px 10px;
}
.ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(#19a86f 0 82%, #ecf2f7 82% 100%);
}
.ring:after {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
}
.ring span {
  z-index: 1;
  font: 700 22px var(--font-display);
}
.ring b {
  font: 500 10px var(--font-body);
  color: #7c8493;
}
.score > div + div strong {
  display: block;
  font: 700 18px var(--font-display);
  color: #16644b;
  margin-bottom: 4px;
}
.score p {
  margin: 0;
  font-size: 12px;
  color: #7b8493;
  line-height: 1.5;
}
.health-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 18px;
  padding: 10px 0;
  border-top: 1px solid #eff1f5;
  font-size: 11px;
}
.health-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #596274;
}
.health-row span i {
  font-style: normal;
  background: #e9f8f1;
  color: var(--green);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.health-row b {
  color: #344054;
}
.score {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 18px 12px;
}
.ring {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: conic-gradient(#98a2b3 0%, #e6ece9 0);
  display: grid;
  place-items: center;
  position: relative;
}
.ring:after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  background: #fff;
  border-radius: 50%;
}
.ring span {
  z-index: 1;
  font: 700 18px var(--font-display);
}
.ring b {
  font: 500 8px var(--font-body);
  color: #8b94a3;
}
.score > div + div strong {
  font: 700 15px var(--font-display);
  color: var(--green);
}
.score p {
  margin: 3px 0;
  font-size: 10px;
  color: #7b8493;
}
.health-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 18px;
  padding: 9px 0;
  border-top: 1px solid #eff1f5;
  font-size: 10px;
}
.health-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #596274;
}
.health-row span i {
  font-style: normal;
  background: #e9f8f1;
  color: var(--green);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.health-row b {
  color: #344054;
}
.recent {
  overflow: hidden;
}
.table-wrap {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
}
th {
  color: #8a93a2;
  font-size: 8px;
  letter-spacing: 0.7px;
  text-align: left;
  background: #fafbfc;
}
th,
td {
  padding: 12px 18px;
  border-bottom: 1px solid #edf0f4;
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}
td strong {
  display: block;
  font-size: 11px;
  margin-bottom: 3px;
}
td small {
  display: block;
  color: #8a93a2;
  font-size: 9px;
}
.status {
  font-size: 9px;
  font-weight: 600;
  border-radius: 12px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f3f6;
  color: #596273;
}
.status i {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}
.status.running,
.status.active,
.status.verified,
.status.primary {
  background: #e9f8f2;
  color: #15956b;
}
.status.scheduled,
.status.invited {
  background: #eaf1ff;
  color: #2167f3;
}
.status.completed {
  background: #f0edff;
  color: #7457ce;
}
.status.paused {
  background: #fff3e8;
  color: #ce6a27;
}
.progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress > div {
  width: 77px;
  background: #e9edf3;
  height: 4px;
  border-radius: 4px;
}
.progress > div i {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
}
.progress span {
  font-size: 9px;
  color: #7e8796;
}
.failed {
  color: #d95055;
}
.actions {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.refresh-control {
  display: grid;
  gap: 3px;
}
.refresh-time {
  color: #8a93a2;
  font-size: 8px;
  line-height: 1.2;
}
.actions button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 5px;
  width: 27px;
  height: 26px;
  font-size: 10px;
}
.actions .refresh-action,
.actions .delete-action {
  width: auto;
  padding: 0 8px;
}
.actions .refresh-action {
  color: var(--blue);
}
.actions button:disabled {
  cursor: wait;
  opacity: .6;
}
.page-lead {
  margin-bottom: 20px;
}
.toolbar {
  padding: 13px 17px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.tabs {
  display: flex;
  gap: 4px;
}
.toolbar button {
  border: 0;
  background: transparent;
  padding: 7px 10px;
  color: #667085;
  font-size: 11px;
  border-radius: 5px;
}
.tabs button.active {
  background: #eaf1ff;
  color: var(--blue);
  font-weight: 700;
}
.toolbar > div + div button {
  border: 1px solid var(--line);
  margin-left: 6px;
}
.campaign-page {
  overflow: hidden;
}
.campaign-page table td {
  padding-top: 16px;
  padding-bottom: 16px;
}
.empty {
  text-align: center;
  padding: 45px;
  color: #7b8492;
}
.export {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 11px;
  margin-top: 14px;
}
.stepper {
  display: flex;
  justify-content: center;
  margin: 8px auto 25px;
  max-width: 720px;
}
.stepper button {
  position: relative;
  flex: 1;
  border: 0;
  background: transparent;
  color: #8b94a3;
  font-size: 10px;
}
.stepper button i {
  font-style: normal;
  width: 25px;
  height: 25px;
  border: 1px solid #d8dde5;
  border-radius: 50%;
  background: white;
  display: grid;
  place-items: center;
  margin: 0 auto 7px;
  position: relative;
  z-index: 2;
}
.stepper button b {
  position: absolute;
  top: 12px;
  left: 58%;
  width: 84%;
  height: 1px;
  background: #dfe3e9;
}
.stepper button.active,
.stepper button.done {
  color: var(--blue);
  font-weight: 600;
}
.stepper button.active i,
.stepper button.done i {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.stepper button.done b {
  background: var(--blue);
}
.builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.75fr);
  gap: 18px;
  max-width: 1040px;
  margin: auto;
}
.form-card,
.tips,
.editor,
.preview,
.estimate,
.review-main,
.launch,
.settings-panel {
  padding: 22px;
}
.dropzone {
  width: 100%;
  height: 220px;
  border: 1.5px dashed #cdd5df;
  border-radius: 9px;
  background: #fafcff;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #677184;
}
.dropzone > i {
  font-style: normal;
  font-size: 22px;
  color: var(--blue);
  background: #eaf1ff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.dropzone strong {
  color: #344054;
  font-size: 12px;
}
.dropzone span {
  font-size: 11px;
  margin: 5px;
}
.dropzone u {
  color: var(--blue);
}
.dropzone small {
  font-size: 9px;
  color: #9aa2af;
}
.or {
  text-align: center;
  font-size: 9px;
  color: #9ca4b1;
  margin: 15px;
  position: relative;
}
.or:before,
.or:after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: 44%;
  background: #e7eaf0;
}
.or:before {
  left: 0;
}
.or:after {
  right: 0;
}
.wide {
  width: 100%;
}
.tips {
  background: #fbfcfe;
}
.tips > h3 {
  margin-bottom: 20px;
}
.tip {
  display: flex;
  gap: 11px;
  margin-bottom: 20px;
}
.tip > i {
  font-style: normal;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8f8f1;
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 10px;
  flex: 0 0 22px;
}
.tip b {
  font-size: 11px;
}
.tip p {
  font-size: 10px;
  color: #7b8493;
  margin: 4px 0;
  line-height: 1.5;
}
.tips > a {
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
}
.message-grid {
  grid-template-columns: minmax(480px, 1.18fr) minmax(350px, 0.82fr);
  max-width: none;
}
.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.import {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f3f8ff;
  border: 1px solid #dce9ff;
  padding: 10px;
  border-radius: 7px;
  margin: 17px 0;
}
.import > span {
  background: #e4f6ee;
  color: var(--green);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
.import > div {
  flex: 1;
}
.import b,
.import small {
  display: block;
  font-size: 10px;
}
.import small {
  color: #748094;
}
.import em {
  font-style: normal;
  font-size: 8px;
  background: #fff2df;
  color: #c16b23;
  padding: 3px 6px;
  border-radius: 8px;
}
.editor > label,
.field > label {
  display: block;
  color: #596273;
  font-size: 10px;
  font-weight: 600;
  margin: 13px 0 6px;
}
.subject {
  position: relative;
}
.subject input {
  padding-right: 65px;
}
.subject span {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 9px;
  color: #9aa2ae;
}
.editor input,
.field input,
.field select,
.preview select,
.settings-panel input,
.settings-panel textarea {
  width: 100%;
  border: 1px solid #dce1e8;
  border-radius: 6px;
  padding: 9px 10px;
  color: #344054;
  background: white;
  font-size: 11px;
}
.field input.campaign-fixed-email {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  opacity: 1;
  -webkit-text-fill-color: #344054;
}
.settings-panel textarea {
  resize: vertical;
  min-height: 90px;
}
.format {
  display: flex;
  border: 1px solid #dce1e8;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  margin-top: 14px;
  padding: 5px;
}
.format button {
  border: 0;
  background: transparent;
  width: 30px;
  color: #596273;
}
.format > span {
  border-left: 1px solid #e1e4e9;
  margin: 2px 5px;
}
.format .merge {
  width: auto;
  margin-left: auto;
  color: var(--blue);
  font-size: 10px;
}
.editor textarea {
  width: 100%;
  height: 235px;
  border: 1px solid #dce1e8;
  border-radius: 0 0 6px 6px;
  resize: none;
  padding: 17px;
  font-size: 11px;
  line-height: 1.65;
  color: #344054;
}
.editor-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.attachment-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #dce1e8;
  border-radius: 7px;
  background: #fbfcfe;
}
.attachment-picker > div {
  display: grid;
  gap: 2px;
  margin-right: auto;
}
.attachment-picker b {
  color: #344054;
  font-size: 11px;
}
.attachment-picker small {
  color: #667085;
  font-size: 10px;
}
.attachment-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.attachment-button {
  cursor: pointer;
  white-space: nowrap;
}
.attachment-list {
  display: grid;
  width: 100%;
  gap: 5px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.attachment-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 4px;
  background: #eef3ff;
  color: #344054;
  font-size: 10px;
}
.attachment-list li > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-list li small {
  margin-left: auto;
  white-space: nowrap;
}
.attachment-list button {
  border: 0;
  background: transparent;
  color: #667085;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.preview {
  padding: 0;
  overflow: hidden;
}
.preview .panel-title {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.preview select {
  width: 120px;
}
.email {
  margin: 20px;
  background: white;
  border: 1px solid #e2e5ea;
  border-radius: 7px;
  padding: 20px;
  color: #394150;
  box-shadow: 0 5px 15px #1018280a;
}
.email-from {
  display: flex;
  align-items: center;
  gap: 9px;
}
.email-from b,
.email-from small {
  display: block;
  font-size: 9px;
}
.email-from small {
  color: #8a93a2;
}
.email h4 {
  font: 700 14px var(--font-display);
  margin: 21px 0;
}
.email > p {
  font-size: 10px;
  white-space: pre-line;
  line-height: 1.7;
}
.signature {
  font: 700 12px var(--font-display);
  color: #235bb6;
  margin: 23px 0 20px;
}
.signature span {
  display: block;
  font: 400 8px var(--font-body);
  color: #8a93a2;
}
.email > small {
  font-size: 7px;
  color: #9aa2af;
}
.settings-step {
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.field small {
  color: #929ba8;
  font-size: 9px;
}
.choices {
  display: flex;
  gap: 20px;
  border: 1px solid #e1e5eb;
  border-radius: 7px;
  padding: 10px;
}
.choices label {
  font-size: 10px;
}
.toggle-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}
.toggle-row b,
.toggle-row small {
  display: block;
  font-size: 10px;
}
.toggle-row small {
  color: #8992a1;
  margin-top: 3px;
}
.toggle {
  width: 36px;
  height: 20px;
  padding: 2px;
  border: 0;
  background: #cbd2dc;
  border-radius: 12px;
}
.toggle i {
  display: block;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.toggle.on {
  background: var(--blue);
}
.toggle.on i {
  margin-left: 16px;
}
.estimate > strong {
  font: 700 28px var(--font-display);
  display: block;
  margin-top: 23px;
}
.estimate > p {
  color: #788291;
  font-size: 10px;
}
.estimate > div {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  margin: 12px 0;
}
.form-footer {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
}
.review {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.6fr);
  gap: 18px;
  max-width: 1050px;
  margin: auto;
}
.ready {
  display: flex;
  gap: 12px;
  background: #effaf5;
  border: 1px solid #d4f0e4;
  padding: 15px;
  border-radius: 7px;
}
.ready > i {
  font-style: normal;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: white;
}
.ready p {
  margin: 4px 0;
  color: #667085;
  font-size: 10px;
}
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px 0;
}
.review-grid span,
.review-grid b {
  display: block;
  font-size: 9px;
}
.review-grid span {
  color: #8992a1;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.review-main > h4 {
  font: 700 14px var(--font-display);
}
.review-main > p {
  font-size: 11px;
  line-height: 1.6;
  color: #596273;
}
.launch .health-row {
  margin: 0;
}
.launch > button {
  margin-top: 12px;
}
.launch > small {
  display: block;
  text-align: center;
  color: #929ba8;
  font-size: 8px;
  margin-top: 12px;
}
.bounce {
  padding-bottom: 16px;
}
.bar {
  padding: 8px 18px;
}
.bar > div:first-child {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}
.bar > div + div {
  height: 6px;
  background: #edf0f4;
  border-radius: 4px;
  margin-top: 6px;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--orange);
  border-radius: 4px;
}
.volume {
  padding-bottom: 18px;
}
.usage {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px 9px;
}
.usage strong {
  font: 700 21px var(--font-display);
  display: block;
}
.usage span,
.volume > p {
  color: #7f8998;
  font-size: 10px;
}
.big-progress {
  margin: 0 20px;
  height: 7px;
  background: #edf0f4;
  border-radius: 5px;
}
.big-progress i {
  display: block;
  width: 78.4%;
  height: 100%;
  background: var(--blue);
  border-radius: 5px;
}
.volume > p {
  margin: 8px 20px;
}
.members {
  padding: 0 18px;
}
.team-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.team-overview > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.025);
}
.team-overview p {
  margin: 0;
  min-width: 0;
}
.team-overview b {
  display: block;
  color: #172033;
  font-size: 20px;
  line-height: 1.1;
}
.team-overview small {
  display: block;
  margin-top: 4px;
  color: #7b8494;
  font-size: 10px;
  white-space: nowrap;
}
.team-stat-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}
.team-stat-icon.blue {
  color: #2167f3;
  background: #edf4ff;
}
.team-stat-icon.green {
  color: #078552;
  background: #e9f9f1;
}
.team-stat-icon.purple {
  color: #7349bd;
  background: #f3edff;
}
.team-stat-icon.amber {
  color: #b56a09;
  background: #fff6df;
}
.invite-member-card {
  margin-bottom: 16px;
  overflow: hidden;
}
.invite-member-head {
  display: flex;
  align-items: center;
  padding: 19px 22px;
  border-bottom: 1px solid var(--line);
}
.invite-member-head h3 {
  margin: 0 0 4px;
  font: 700 15px var(--font-display);
}
.invite-member-head p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}
.team-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(240px, .8fr);
}
.invite-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 22px;
}
.team-field {
  display: grid;
  align-content: start;
  gap: 7px;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}
.team-field > span {
  letter-spacing: .1px;
}
.team-field input, .team-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d8dee8;
  border-radius: 9px;
  color: #273142;
  background: #fff;
  font-size: 11px;
  transition: border-color .15s, box-shadow .15s;
}
.team-field textarea {
  min-height: 80px;
  resize: vertical;
}
.team-field input:focus, .team-field textarea:focus {
  outline: none;
  border-color: #84adff;
  box-shadow: 0 0 0 3px rgba(33, 103, 243, .1);
}
.team-address-field {
  grid-column: 1 / -1;
}
.company-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.company-select-shell {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 4px 5px;
  border: 1px solid #d8dee8;
  border-radius: 9px;
  background: #fff;
}
.company-select-shell:focus-within {
  border-color: #84adff;
  box-shadow: 0 0 0 3px rgba(33, 103, 243, .1);
}
.company-select-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #667085;
  background: #f1f4f8;
  font-size: 11px;
  font-weight: 800;
}
.company-select-shell.has-company .company-select-avatar {
  color: #2167f3;
  background: #eaf1ff;
}
.company-select-shell select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 26px 0 7px;
  border: 0;
  outline: 0;
  color: #344054;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
}
.add-company-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border: 1px solid #cdd9f2;
  border-radius: 9px;
  color: #2167f3;
  background: #f8faff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.add-company-button span {
  font-size: 16px;
  font-weight: 400;
}
.add-company-button:hover {
  border-color: #9bb9f3;
  background: #edf4ff;
}
.locked-company {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 9px;
  min-height: 42px;
  padding: 5px 10px 5px 5px;
  border: 1px solid #d8dee8;
  border-radius: 9px;
  background: #f8fafc;
}
.locked-company > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #2167f3;
  background: #eaf1ff;
}
.locked-company b {
  align-self: end;
  font-size: 10px;
}
.locked-company small {
  color: #8b95a5;
  font-size: 8px;
}
.role-assignment {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-left: 1px solid var(--line);
  background: #fafbfc;
}
.role-kicker {
  margin-bottom: 9px;
  color: #667085;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.selected-role-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid #a9c4fb;
  border-radius: 10px;
  background: #f4f7ff;
}
.selected-role-card b, .selected-role-card small {
  display: block;
}
.selected-role-card b {
  margin-bottom: 3px;
  color: #244577;
  font-size: 11px;
}
.selected-role-card small {
  color: #667b9c;
  font-size: 9px;
  line-height: 1.4;
}
.role-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background: #2167f3;
  font-size: 9px;
}
.role-note {
  display: flex;
  gap: 8px;
  margin-top: 13px;
  color: #7a8495;
  font-size: 9px;
  line-height: 1.5;
}
.role-note > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #64748b;
  background: #e8ecf2;
  font-weight: 800;
}
.role-note p {
  margin: 1px 0 0;
}
.invite-submit {
  width: 100%;
  min-height: 40px;
  margin-top: auto;
}
.team-invite-form > .invite-copy {
  grid-column: 1 / -1;
  margin: 0 22px 20px;
  overflow-wrap: anywhere;
}
.member-company {
  flex: 0 1 180px !important;
}
.role-badge {
  min-width: 76px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #475467;
  background: #f1f3f6;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}
.role-badge.admin, .role-badge.super_admin {
  color: #275dab;
  background: #eaf1ff;
}
@media (max-width: 900px) {
  .team-overview {
    grid-template-columns: 1fr 1fr;
  }
  .team-invite-form {
    grid-template-columns: 1fr;
  }
  .role-assignment {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .invite-submit {
    margin-top: 18px;
  }
}
@media (max-width: 620px) {
  .team-overview {
    grid-template-columns: 1fr;
  }
  .invite-form-fields {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .team-address-field {
    grid-column: auto;
  }
  .company-picker {
    grid-template-columns: 1fr;
  }
  .add-company-button {
    min-height: 38px;
    justify-content: center;
  }
  .member {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .member-company {
    display: none;
  }
  .role-badge {
    margin-left: 47px;
  }
}
.invite-toolbar {
  display: flex;
  gap: 12px;
  padding: 14px 18px 0;
  align-items: end;
}
.invite-toolbar label {
  display: grid;
  gap: 5px;
  font-size: 10px;
  color: #667085;
}
.invite-toolbar select,
.invite-toolbar input {
  border: 1px solid #dce1e8;
  border-radius: 6px;
  padding: 8px 10px;
  min-height: 34px;
  background: #fff;
  font-size: 11px;
}
.invite-toolbar input {
  min-width: 260px;
}
.member,
.sender {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.member > div,
.sender > div {
  flex: 1;
}
.member b,
.member small,
.sender b,
.sender small {
  display: block;
  font-size: 10px;
}
.member small,
.sender small {
  color: #87919f;
}
.member select {
  border: 1px solid var(--line);
  padding: 6px;
  border-radius: 5px;
  font-size: 10px;
}
.member > button,
.sender > button {
  border: 0;
  background: transparent;
}
.roles {
  margin-top: 18px;
  overflow: hidden;
}
.roles th,
.roles td {
  text-align: center;
}
.roles th:first-child,
.roles td:first-child {
  text-align: left;
}
.log {
  padding: 10px 24px;
}
.log-row {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.log-row:last-child {
  border: 0;
}
.log-row > i {
  font-style: normal;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f1f3f6;
  color: #687285;
}
.log-row > i.blue {
  background: #eaf1ff;
  color: var(--blue);
}
.log-row p {
  margin: 1px 0 4px;
  font-size: 11px;
}
.log-row small {
  color: #8c95a3;
  font-size: 9px;
}
.settings-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 780px);
  gap: 18px;
}
.settings-layout > aside {
  display: flex;
  flex-direction: column;
}
.settings-layout > aside button {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  color: #667085;
  border-radius: 6px;
  font-size: 11px;
}
.settings-layout > aside button.active {
  background: #eaf1ff;
  color: var(--blue);
  font-weight: 700;
}
.settings-panel {
  min-height: 460px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 22px 0;
}
.logo > span {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--nav);
  color: white;
  display: grid;
  place-items: center;
  font: 700 18px var(--font-display);
}
.logo b,
.logo small {
  display: block;
  font-size: 10px;
}
.logo small {
  color: #8c95a3;
  margin: 3px 0 8px;
}
.sender .status {
  margin-right: 12px;
}
.sender-enhanced {
  display: grid;
  gap: 14px;
}
.sender-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.sender-overview article {
  border: 1px solid #e7edf5;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfcff 0%, #f4f7ff 100%);
  padding: 11px 12px;
}
.sender-overview small,
.sender-overview b {
  display: block;
}
.sender-overview small {
  color: #667085;
  font-size: 10px;
}
.sender-overview b {
  margin-top: 3px;
  font-size: 16px;
}
.sender-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.sender-toolbar input {
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  min-height: 38px;
  padding: 8px 11px;
  font-size: 11px;
}
.sender-filter-chips {
  display: flex;
  gap: 8px;
}
.sender-filter-chips button {
  border: 1px solid #d6dfeb;
  border-radius: 999px;
  background: #fff;
  color: #475467;
  padding: 6px 11px;
  font-size: 10px;
}
.sender-filter-chips button.active {
  border-color: #c6d9ff;
  color: #1d4fd7;
  background: #edf4ff;
  font-weight: 700;
}
.sender-preview {
  border: 1px solid #dce7fb;
  border-radius: 10px;
  background: #f7faff;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sender-preview small,
.sender-preview b,
.sender-preview p {
  margin: 0;
}
.sender-preview small {
  color: #667085;
  display: block;
  font-size: 10px;
}
.sender-preview b {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}
.sender-preview p {
  margin-top: 4px;
  color: #475467;
  font-size: 10px;
}
.sender-list {
  display: grid;
  gap: 10px;
}
.sender-card {
  border: 1px solid #e4e9f2;
  border-radius: 11px;
  padding: 10px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}
.sender-card.active {
  border-color: #bfd5ff;
  box-shadow: 0 0 0 2px #edf4ff;
}
.sender-card-main {
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.sender-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #edf3ff;
  color: #1f56d8;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 auto;
}
.sender-card-main strong,
.sender-card-main small {
  display: block;
}
.sender-card-main strong {
  font-size: 11px;
}
.sender-card-main small {
  font-size: 10px;
  color: #667085;
}
.sender-meta {
  display: flex;
  gap: 7px;
  align-items: center;
}
.sender-actions {
  display: flex;
  gap: 8px;
}
.sender-actions .secondary,
.sender-actions .primary {
  min-height: 32px;
  padding: 0 10px;
}
.connections > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.connections i {
  font-style: normal;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef3ff;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-weight: 700;
}
.connections div div {
  flex: 1;
}
.connections b,
.connections small {
  display: block;
  font-size: 10px;
}
.connections small {
  color: #8992a1;
}
.invite-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.invite-actions .danger-button {
  padding: 7px 10px;
}
.esp-connections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 24px 0;
}
.esp-panel {
  padding: 0;
  overflow: hidden;
}
.esp-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 19px;
  border-bottom: 1px solid #e7eaf0;
}
.esp-panel-heading h3 {
  margin: 3px 0 5px;
  font: 700 17px var(--font-display);
}
.esp-panel-heading p {
  margin: 0;
  color: #738095;
  font-size: 10px;
}
.esp-eyebrow {
  color: #2167f3;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.esp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid #ead9aa;
  border-radius: 999px;
  color: #98620b;
  background: #fffaeb;
  font-size: 9px;
  font-weight: 700;
}
.esp-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e2a52b;
}
.esp-status-pill.ready {
  border-color: #b9e6ce;
  color: #067647;
  background: #ecfdf3;
}
.esp-status-pill.ready i {
  background: #12a866;
  box-shadow: 0 0 0 3px rgba(18, 168, 102, .12);
}
.esp-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 20px 24px 0;
  padding: 14px 16px;
  border: 1px solid #dce4f1;
  border-radius: 11px;
  background: #f8faff;
}
.esp-summary.connected {
  border-color: #b7e3cb;
  background: #f1fbf6;
}
.esp-summary-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #2167f3;
  background: #e8f0ff;
  font-size: 11px;
  font-weight: 800;
}
.esp-summary.connected .esp-summary-mark {
  color: #fff;
  background: #12a866;
}
.esp-summary b {
  color: #28364b;
  font-size: 11px;
}
.esp-summary p {
  margin: 3px 0 0;
  color: #738095;
  font-size: 9px;
  line-height: 1.45;
}
.esp-summary > small {
  color: #758093;
  font-size: 8px;
  white-space: nowrap;
}
.esp-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 24px 0;
}
.esp-section-label b {
  color: #344054;
  font-size: 10px;
}
.esp-section-label span {
  color: #98a2b3;
  font-size: 8px;
}
.connections > .esp-provider-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  min-height: 190px;
  margin: 0;
  padding: 17px;
  border: 1px solid #e1e6ee;
  border-radius: 12px;
  background: #fff;
  transition: opacity .15s, border-color .15s, box-shadow .15s, background .15s;
}
.connections > .esp-provider-card.connected {
  border-color: #8eb2ff;
  background: #f3f7ff;
  box-shadow: 0 0 0 2px rgba(33, 103, 243, .08);
}
.connections > .esp-provider-card.unavailable {
  opacity: .42;
  background: #f7f8fa;
  filter: grayscale(.45);
}
.esp-provider-card > i {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 12px;
}
.esp-provider-card > div {
  min-width: 0;
  padding-top: 1px;
}
.esp-provider-card .esp-provider-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.esp-provider-title em {
  padding: 3px 7px;
  border-radius: 999px;
  color: #067647;
  background: #dff7ea;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}
.esp-provider-title em.neutral {
  color: #596579;
  background: #edf0f5;
}
.esp-provider-card > div > small {
  min-height: 29px;
  margin-top: 6px;
  line-height: 1.5;
}
.esp-feature-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid #edf0f4;
  list-style: none;
}
.esp-feature-list li {
  position: relative;
  padding-left: 15px;
  color: #657186;
  font-size: 8px;
  line-height: 1.35;
}
.esp-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2d6de9;
  font-weight: 800;
}
.esp-provider-card > button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 35px;
  margin-top: auto;
}
.esp-provider-card.unavailable > button {
  cursor: not-allowed;
}
.esp-security-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 24px 22px;
  padding-top: 16px;
  border-top: 1px solid #e8ebf0;
}
.esp-security-note > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #087a4d;
  background: #e6f7ee;
  font-size: 9px;
  font-weight: 800;
}
.esp-security-note p {
  margin: 0;
  color: #7c8798;
  font-size: 8px;
  line-height: 1.5;
}
.esp-security-note b {
  color: #526074;
}
@media (max-width: 720px) {
  .esp-connections {
    grid-template-columns: 1fr;
  }
  .esp-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .esp-summary {
    grid-template-columns: auto 1fr;
  }
  .esp-summary > small {
    grid-column: 2;
  }
}
@media (max-width: 520px) {
  .esp-panel-heading {
    padding: 19px;
  }
  .esp-summary, .esp-section-label, .esp-security-note {
    margin-left: 19px;
    margin-right: 19px;
  }
  .esp-connections {
    margin-left: 19px;
    margin-right: 19px;
  }
}
.gmail-callback-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at 15% 10%, rgba(33,103,243,.13), transparent 32%), linear-gradient(145deg, #f8faff, #eef3f9);
}
.gmail-callback-card {
  width: min(100%, 560px);
  padding: 30px;
  border: 1px solid #dde3ec;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 70px rgba(26,39,64,.14);
}
.gmail-callback-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 34px;
  color: #172033;
  font-size: 13px;
}
.gmail-callback-brand span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  color: #fff;
  background: #2167f3;
  font-size: 10px;
}
.gmail-callback-status {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #2167f3;
  background: #eaf1ff;
  font-size: 23px;
  font-weight: 700;
}
.gmail-callback-card.success .gmail-callback-status {
  color: #067647;
  background: #dcfae6;
  box-shadow: 0 0 0 8px rgba(18,168,102,.06);
}
.gmail-callback-card.error .gmail-callback-status {
  color: #b42318;
  background: #fee4e2;
}
.gmail-callback-kicker {
  color: #2167f3;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.gmail-callback-card h1 {
  margin: 7px 0 8px;
  color: #15223a;
  font: 700 25px var(--font-display);
  letter-spacing: -.4px;
}
.gmail-callback-description {
  margin: 0;
  color: #637086;
  font-size: 12px;
  line-height: 1.6;
}
.gmail-connection-details {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-radius: 13px;
  background: #fbfcfe;
}
.gmail-account-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border-bottom: 1px solid #e7ebf0;
  background: #f3faf7;
}
.gmail-account-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg,#2167f3,#4285f4);
  font-size: 12px;
  font-weight: 800;
}
.gmail-account-row b,.gmail-account-row small {
  display: block;
}
.gmail-account-row b {
  color: #253249;
  font-size: 11px;
}
.gmail-account-row small {
  margin-top: 3px;
  color: #6f7b8d;
  font-size: 9px;
}
.gmail-account-row em {
  padding: 4px 8px;
  border-radius: 999px;
  color: #067647;
  background: #d9f6e6;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}
.gmail-connection-details dl {
  margin: 0;
  padding: 6px 14px;
}
.gmail-connection-details dl > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0f4;
}
.gmail-connection-details dl > div:last-child {
  border: 0;
}
.gmail-connection-details dt {
  color: #7c8798;
  font-size: 9px;
}
.gmail-connection-details dd {
  margin: 0;
  color: #344054;
  font-size: 9px;
  font-weight: 700;
  text-align: right;
}
.gmail-callback-progress {
  height: 5px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf5;
}
.gmail-callback-progress i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: #2167f3;
  animation: gmail-progress 1.2s ease-in-out infinite alternate;
}
@keyframes gmail-progress {
  to {
    transform: translateX(165%);
  }
}
.gmail-callback-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.gmail-callback-actions .primary {
  width: 100%;
  min-height: 42px;
  padding: 0 17px;
}
.gmail-callback-actions a {
  color: #526074;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}
.gmail-callback-actions a:hover {
  color: #2167f3;
}
.gmail-auto-update {
  display: block;
  margin-top: 14px;
  color: #8792a3;
  font-size: 8px;
}
@media (max-width: 560px) {
  .gmail-callback-page {
    padding: 16px;
  }
  .gmail-callback-card {
    padding: 23px;
    border-radius: 17px;
  }
  .gmail-callback-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .gmail-callback-actions a {
    text-align: center;
  }
}
.menu,
.scrim {
  display: none;
}
.toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background: #172033;
  color: white;
  padding: 12px 17px;
  border-radius: 8px;
  box-shadow: 0 10px 30px #10182833;
  font-size: 11px;
  z-index: 50;
  display: flex;
  gap: 9px;
  align-items: center;
}
.toast span {
  color: #64d5aa;
}
.logo-upload-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
}
.logo-upload-card.pending {
  border-color: #a9c5ff;
  background: #f7faff;
}
.logo-preview {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--nav);
  color: white;
  display: grid;
  place-items: center;
  font: 700 20px var(--font-display);
  box-shadow: 0 0 0 3px white, 0 0 0 4px var(--line);
}
.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.logo-upload-copy {
  flex: 1;
  min-width: 0;
}
.logo-upload-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-state {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}
.logo-state.saved {
  color: #176b4d;
  background: #e3f7ef;
}
.logo-state.pending {
  color: #8a5b00;
  background: #fff1c7;
}
.logo-upload-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.logo-file-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}
.logo-upload-actions button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.toast.error {
  background: #7f1d2d;
}
.toast.error span {
  color: #ffd7da;
  font-weight: 800;
}
.settings-notice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: -8px 0 16px;
  padding: 10px 12px;
  border: 1px solid #bcebd9;
  border-radius: 8px;
  background: #eefbf6;
  color: #176b4d;
  font-size: 11px;
}
.settings-notice > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d7f5e9;
  font-weight: 800;
}
.settings-notice p {
  margin: 0;
  color: inherit;
}
.settings-notice button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 2px 5px;
  cursor: pointer;
  font-size: 16px;
}
.settings-notice.error {
  border-color: #ffd0d5;
  background: #fff0f1;
  color: #a52d3b;
}
.settings-notice.error > span {
  background: #ffdce0;
}
.notification-channel-options,
.campaign-report-channels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faff;
}
.notification-channel-options > div {
  margin-right: auto;
}
.notification-channel-options b,
.notification-channel-options small {
  display: block;
}
.notification-channel-options small {
  margin-top: 3px;
  color: #7b8492;
  font-size: 9px;
}
.notification-channel-options > label,
.campaign-report-channels > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #596273;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.notification-channel-options > label.selected,
.campaign-report-channels > label.selected {
  border-color: #8eb4ff;
  background: #eaf1ff;
  color: var(--blue);
}
.notification-channel-options input,
.campaign-report-channels input {
  width: auto;
  accent-color: var(--blue);
}
.notification-channel-options > label.default-report-email {
  flex: 0 0 100%;
  display: grid;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 6px 0 0;
  cursor: default;
}
.notification-channel-options > label.default-report-email input {
  width: 100%;
  border: 1px solid #dce1e8;
  border-radius: 6px;
  padding: 9px 10px;
  background: white;
  color: #344054;
  font-size: 11px;
}
.campaign-report-channels {
  margin: 10px 0 16px;
}
.campaign-report-channels > span {
  margin-right: auto;
  color: #596273;
  font-size: 10px;
  font-weight: 700;
}
@media (max-width: 1180px) {
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-hero,
  .auth-card {
    padding: 26px;
  }
  .builder-grid,
  .message-grid,
  .settings-step,
  .review {
    grid-template-columns: 1fr;
  }
  .form-footer {
    grid-column: auto;
  }
  .settings-layout {
    grid-template-columns: 150px 1fr;
  }
}
@media (max-width: 720px) {
  .sidebar {
    transform: translateX(-100%);
    transition: 0.25s;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  main {
    margin-left: 0;
  }
  .menu {
    display: block;
    border: 0;
    background: transparent;
    font-size: 19px;
  }
  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .hero-side {
    justify-items: start;
  }
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: #11182777;
    border: 0;
    z-index: 15;
  }
  .content {
    padding: 22px 16px;
  }
  header {
    padding: 0 16px;
  }
  .header-actions .primary {
    font-size: 0;
    padding: 8px 10px;
  }
  .header-actions .primary:first-letter {
    font-size: 15px;
  }
  .metrics {
    grid-template-columns: 1fr;
  }
  .welcome,
  .page-lead {
    align-items: flex-start;
    gap: 12px;
  }
  .page-lead > div:last-child {
    display: flex;
    gap: 6px;
  }
  .stepper button {
    font-size: 8px;
  }
  .stepper button b {
    left: 65%;
    width: 70%;
  }
  .field-row,
  .review-grid {
    grid-template-columns: 1fr;
  }
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-layout > aside {
    overflow-x: auto;
    flex-direction: row;
  }
  .settings-layout > aside button {
    white-space: nowrap;
  }
  .toolbar {
    display: block;
  }
  .toolbar > div + div {
    margin-top: 8px;
  }
  .member {
    display: grid;
    grid-template-columns: auto 1fr auto;
  }
  .invite-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }
  .invite-toolbar input {
    min-width: 0;
    width: 100%;
  }
  .member select {
    grid-column: 2/4;
  }
  .member > .status {
    grid-column: 2;
  }
  .sender-overview {
    grid-template-columns: 1fr;
  }
  .sender-toolbar {
    grid-template-columns: 1fr;
  }
  .sender-filter-chips {
    flex-wrap: wrap;
  }
  .sender-preview {
    display: grid;
    justify-content: start;
  }
  .sender-card {
    grid-template-columns: 1fr;
  }
  .sender-meta,
  .sender-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .message-grid {
    min-width: 0;
  }
  .editor,
  .preview {
    padding: 15px;
  }
  .preview {
    padding: 0;
  }
}
.actions .delete-action {
  width: auto;
  min-width: 54px;
  padding: 0 10px;
  color: #c43d4b;
  border-color: #f0cbd0;
  font-weight: 600;
}
.actions .delete-action:hover {
  background: #fff2f3;
  border-color: #e8aab2;
}
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 24, 40, 0.48);
  backdrop-filter: blur(2px);
}
.confirm-dialog {
  width: min(100%, 410px);
  padding: 26px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.25);
}
.dialog-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #fff0f1;
  color: #c43d4b;
  font-size: 22px;
}
.confirm-dialog h3 {
  margin: 0 0 8px;
  font: 700 17px var(--font-display);
}
.confirm-dialog p {
  margin: 0;
  color: #667085;
  font-size: 11px;
  line-height: 1.65;
}
.confirm-dialog p strong {
  color: #344054;
}
.company-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.company-picker select {
  width: 100%;
}
.company-dialog label {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  color: #344054;
  font-size: 12px;
  font-weight: 600;
}
.company-dialog input {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  color: #172033;
  background: #fff;
}
.company-dialog input::placeholder {
  color: #98a2b3;
}
.company-dialog input:focus {
  outline: none;
  border-color: #84adff;
  box-shadow: 0 0 0 4px rgba(33, 103, 243, 0.12);
}
.company-dialog input[aria-invalid="true"] {
  border-color: #e26a76;
}
.company-dialog-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: start;
}
.company-dialog-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #edf4ff;
  color: var(--blue);
  font-size: 16px;
  font-weight: 800;
}
.company-dialog-header h3 {
  margin: 1px 0 5px;
  font-size: 18px;
}
.dialog-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  font-size: 22px;
  line-height: 1;
}
.dialog-close:hover {
  background: #f2f4f7;
  color: #172033;
}
.company-field-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #98a2b3;
  font-weight: 400;
}
.company-dialog-error {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding: 9px 11px;
  border: 1px solid #ffd0d5;
  border-radius: 8px;
  background: #fff4f5;
  color: #b42335;
  font-size: 11px;
}
.company-dialog-error span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #d64555;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.smtp-dialog {
  width: min(100%, 760px);
}
.smtp-dialog h3 {
  margin-bottom: 6px;
}
.smtp-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.smtp-grid .field {
  margin: 0;
}
.smtp-grid .field label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  color: #667085;
}
.smtp-grid .field input,
.smtp-grid .field select {
  width: 100%;
  min-height: 36px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 23px;
}
.danger-button {
  border: 1px solid #c43d4b;
  border-radius: 7px;
  padding: 9px 15px;
  background: #c43d4b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.danger-button:hover {
  background: #a9313e;
}
.danger-button:disabled,
.dialog-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}
@media (max-width: 760px) {
  .smtp-grid {
    grid-template-columns: 1fr;
  }
  .company-picker {
    grid-template-columns: 1fr;
  }
}
.field-error,
.field-error-box,
.launch-error {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.5;
  color: #c9444f;
  background: #fff0f1;
  border: 1px solid #ffd7da;
  padding: 8px 10px;
  border-radius: 6px;
}
.whatsapp-settings {
  display: grid;
  gap: 16px;
}
.wa-panel {
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.wa-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid #e7eaf0;
}
.wa-panel-heading h3 {
  margin: 3px 0 5px;
  font: 700 17px var(--font-display);
}
.wa-panel-heading p {
  margin: 0;
  color: #738095;
  font-size: 10px;
}
.wa-eyebrow,.wa-step-label {
  color: #16845b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.wa-connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #ead9aa;
  border-radius: 999px;
  color: #98620b;
  background: #fffaeb;
  font-size: 8px;
  font-weight: 800;
}
.wa-connection-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dba223;
}
.wa-connection-pill.connected {
  border-color: #b5e5ca;
  color: #067647;
  background: #ecfdf3;
}
.wa-connection-pill.connected i {
  background: #12a866;
  box-shadow: 0 0 0 3px rgba(18,168,102,.12);
}
.wa-setup-grid {
  display: grid;
  grid-template-columns: minmax(260px,.75fr) minmax(360px,1.25fr);
  gap: 14px;
  padding: 20px 24px;
  background: #fafbfc;
}
.wa-setup-card,.wa-connect-card {
  padding: 18px;
  border: 1px solid #e1e6ed;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16,24,40,.025);
}
.wa-setup-card {
  display: flex;
  flex-direction: column;
}
.wa-setup-card h4,.wa-connect-card h4,.wa-history-head h4 {
  margin: 6px 0 5px;
  color: #28364b;
  font-size: 12px;
}
.wa-setup-card > p,.wa-history-head p {
  margin: 0;
  color: #778397;
  font-size: 9px;
  line-height: 1.5;
}
.wa-setup-card .field-row {
  margin: 18px 0 12px;
}
.wa-setup-card > .primary {
  width: 100%;
  min-height: 39px;
  margin-top: auto;
}
.wa-connect-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wa-connect-card .status-message {
  min-height: 15px;
  margin: 5px 0 11px;
}
.wa-connect-card .qr-container {
  min-height: 230px;
  border-color: #cfd9e5;
  background: radial-gradient(circle at center,#fff,#f7fafc);
}
.wa-connect-card .waiting {
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}
.wa-connect-card .waiting b {
  color: #536074;
  font-size: 10px;
}
.wa-connect-card .waiting small {
  color: #98a2b3;
  font-size: 8px;
}
.qr-connected {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #344054;
}
.qr-connected .connected-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 3px;
  border-radius: 50%;
  color: #fff;
  background: #12a866;
  font-size: 20px;
  box-shadow: 0 0 0 8px rgba(18,168,102,.08);
}
.qr-connected b {
  font-size: 11px;
}
.qr-connected small {
  color: #667085;
  font-size: 9px;
}
.wa-panel > .launch-error {
  margin: 0 24px 16px;
}
.whatsapp-settings .wa-current-session {
  margin: 0 24px 20px;
  padding: 0 16px 8px;
  background: #f8fafc;
}
.wa-current-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid #e5e9ef;
}
.wa-current-title span,.wa-current-title b {
  display: block;
}
.wa-current-title > div span {
  margin-bottom: 3px;
  color: #8993a3;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.wa-current-title > div b {
  color: #344054;
  font-size: 11px;
}
.wa-history-card {
  margin: 0 24px 22px;
  overflow: hidden;
  border: 1px solid #e1e6ed;
  border-radius: 13px;
  background: #fff;
}
.wa-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border-bottom: 1px solid #e7ebf0;
}
.wa-history-head h4 {
  margin-top: 0;
}
.wa-history-head .secondary {
  min-height: 32px;
}
.wa-history-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 28px 16px;
  color: #98a2b3;
  font-size: 9px;
  text-align: center;
}
.wa-history-empty b {
  color: #667085;
  font-size: 10px;
}
.wa-session-history {
  padding: 10px;
}
.wa-session-item {
  border-radius: 9px;
  padding: 5px;
}
.wa-session-item.connected {
  border-color: #a9dfc1;
  background: #f5fcf8;
}
.wa-session-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.wa-session-name em {
  padding: 3px 7px;
  border-radius: 999px;
  color: #7a5b14;
  background: #fff3d4;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}
.wa-session-name em.connected {
  color: #067647;
  background: #dff7ea;
}
@media (max-width: 850px) {
  .wa-setup-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .wa-panel-heading {
    align-items: flex-start;
    flex-direction: column;
    padding: 19px;
  }
  .wa-setup-grid {
    padding: 16px 19px;
  }
  .whatsapp-settings .wa-current-session,.wa-history-card {
    margin-left: 19px;
    margin-right: 19px;
  }
  .wa-history-head {
    align-items: flex-start;
  }
}
.wa-session-history {
  display: grid;
  gap: 8px;
}
.wa-session-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 4px;
}
.wa-session-item.connected {
  border-color: #23b26b;
}
.wa-session-load {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px;
  color: #475467;
  text-align: left;
  font-size: 10px;
  cursor: pointer;
}
.wa-session-load span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-session-delete {
  border: 0;
  border-radius: 6px;
  background: #fff0f1;
  color: #b42335;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.wa-session-delete:hover {
  background: #ffe0e3;
}
.whatsapp-settings .field-row.single-field {
  grid-template-columns: 1fr;
}
.whatsapp-settings .status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.whatsapp-settings .status-label {
  font-size: 11px;
  font-weight: 700;
  color: #344054;
}
.whatsapp-settings .status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
}
.whatsapp-settings .status.connected {
  background: #dcfce7;
  color: #166534;
}
.whatsapp-settings .status.error {
  background: #fee2e2;
  color: #991b1b;
}
.whatsapp-settings .status.initializing,
.whatsapp-settings .status.waiting {
  background: #e0e7ff;
  color: #3730a3;
}
.whatsapp-settings .status-message {
  color: #667085;
  font-size: 10px;
  line-height: 1.5;
}
.whatsapp-settings .qr-container {
  min-height: 220px;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f9fafb;
  text-align: center;
}
.whatsapp-settings .qr-container img {
  width: 220px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: white;
}
.whatsapp-settings .waiting {
  color: #6b7280;
  font-size: 11px;
}
.whatsapp-settings .session-info {
  margin-top: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.whatsapp-settings .info-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
  border-bottom: 1px solid #e5e7eb;
}
.whatsapp-settings .info-row:last-child {
  border-bottom: none;
}
.whatsapp-settings .info-key {
  font-size: 10px;
  font-weight: 700;
  color: #475467;
}
.whatsapp-settings .info-value {
  font-size: 10px;
  color: #111827;
  text-align: right;
  word-break: break-all;
}
.whatsapp-settings .whatsapp-response {
  margin-top: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #111827;
  padding: 12px;
}
.whatsapp-settings .whatsapp-response h4 {
  margin: 0 0 8px;
  color: #e5e7eb;
  font-size: 11px;
}
.whatsapp-settings .whatsapp-response pre {
  margin: 0;
  background: transparent;
  color: #e5e7eb;
  font-size: 9px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.launch button:disabled {
  opacity: 0.65;
  cursor: wait;
}
.merge-tags {
  border: 1px solid #dce1e8;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  margin-top: 14px;
  background: #f8faff;
  padding: 11px 12px;
}
.merge-tags-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 9px;
}
.merge-tags-title b {
  font-size: 10px;
  color: #344054;
}
.merge-tags-title span {
  font-size: 9px;
  color: #8a94a4;
}
.merge-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 92px;
  overflow-y: auto;
  padding: 1px;
}
.merge-tag-list > small {
  font-size: 9px;
  color: #8a94a4;
  padding: 4px 0;
}
.merge-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 27px;
  border: 1px solid #cfdcff;
  border-radius: 6px;
  background: #fff;
  color: #235fc8;
  padding: 5px 8px;
  font-size: 9px;
  line-height: 1;
  transition: border-color 0.15s,
    background 0.15s,
    transform 0.15s;
}
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 10% 10%, #dbe7ff 0, #f6f8fc 42%, #edf2fb 100%);
}
.workspace-loading {
  min-height: 100vh;
  margin-left: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 10% 15%, rgba(33, 103, 243, 0.16) 0, transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(23, 166, 117, 0.12) 0, transparent 22%),
    linear-gradient(135deg, #f6f8fc 0%, #edf3fb 48%, #e9f0f9 100%);
}
.workspace-loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(33, 103, 243, 0.18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: workspace-spinner 0.72s linear infinite;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes workspace-spinner {
  to {
    transform: rotate(360deg);
  }
}
.auth-card {
  width: min(100%, 460px);
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px #12234726;
  padding: 28px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.auth-brand span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #1f64ec, #10a5b6);
}
.auth-brand h1 {
  margin: 0;
  font-size: 22px;
}
.auth-brand small {
  color: #667085;
  font-size: 11px;
}
.auth-card h2 {
  margin: 12px 0 6px;
  font-size: 24px;
}
.auth-card p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}
.auth-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.auth-form label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: #344054;
  font-weight: 600;
}
.auth-form input,
.auth-form textarea {
  width: 100%;
  border: 1px solid #dce1e8;
  border-radius: 7px;
  padding: 10px;
  color: #344054;
  background: white;
  font-size: 12px;
}
.auth-form textarea {
  resize: vertical;
  min-height: 88px;
}
.auth-form small {
  color: #758093;
  font-size: 10px;
}
.auth-error,
.auth-success,
.invite-copy {
  margin: 0;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
}
.auth-error {
  color: #b4232f;
  background: #fff2f3;
  border: 1px solid #ffd7da;
}
.auth-success,
.invite-copy {
  color: #0f6e4f;
  background: #edf9f4;
  border: 1px solid #c9ebdc;
}
.auth-page {
  padding: 28px;
  background: radial-gradient(circle at 10% 15%, rgba(33, 103, 243, 0.16) 0, transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(23, 166, 117, 0.12) 0, transparent 22%),
    linear-gradient(135deg, #f6f8fc 0%, #edf3fb 48%, #e9f0f9 100%);
}
.auth-shell {
  width: min(100%, 1040px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 24px;
  align-items: stretch;
}
.auth-hero,
.auth-card {
  border: 1px solid #dbe3ef;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 60px #12234718;
  backdrop-filter: blur(14px);
}
.auth-hero {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: radial-gradient(circle at 20% 20%, rgba(33, 103, 243, 0.08) 0, transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 244, 253, 0.95) 100%);
}
.auth-card {
  width: 100%;
  padding: 34px;
}
.auth-hero-copy {
  max-width: 480px;
  margin-top: auto;
}
.auth-hero-copy h2 {
  margin: 8px 0 12px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.auth-hero-copy p:last-child {
  font-size: 15px;
  line-height: 1.7;
  color: #5f6b80;
}
.auth-points {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 10px;
}
.auth-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #223047;
  font-size: 13px;
}
.auth-points li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2167f3, #17b26a);
  box-shadow: 0 0 0 4px rgba(33, 103, 243, 0.08);
}
.auth-card-kicker {
  margin: 0 0 8px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.auth-card h2 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: -0.03em;
}
.auth-card p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}
.auth-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.auth-form label {
  display: grid;
  gap: 7px;
  font-size: 11px;
  color: #344054;
  font-weight: 600;
}
.auth-form input,
.auth-form textarea {
  width: 100%;
  border: 1px solid #dce1e8;
  border-radius: 12px;
  padding: 12px 13px;
  color: #344054;
  background: white;
  font-size: 12px;
}
.auth-form input:focus {
  outline: none;
  border-color: #8ab2ff;
  box-shadow: 0 0 0 4px rgba(33, 103, 243, 0.12);
}
.auth-form textarea {
  resize: vertical;
  min-height: 88px;
}
.auth-help-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.text-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font-size: 11px;
  font-weight: 700;
}
.auth-submit {
  min-height: 44px;
}
.auth-error {
  border-radius: 12px;
}
.merge-tag:hover {
  background: #edf4ff;
  border-color: #8db2ff;
  transform: translateY(-1px);
}
.merge-tag:focus-visible {
  outline: 2px solid #8db2ff;
  outline-offset: 2px;
}
.merge-tag span {
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}
.merge-tag code {
  font: 600 9px var(--font-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor textarea:focus {
  position: relative;
  outline: 2px solid #8db2ff;
  outline-offset: -1px;
}
.rich-text-composer {
  border: 1px solid #dce1e8;
  border-radius: 0 0 7px 7px;
  overflow: hidden;
  background: #fff;
}
.recipient-file-summary {
  flex-wrap: wrap;
}
.recipient-file-summary > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.recipient-file-summary button {
  flex-shrink: 0;
}
.recipients-card {
  display: flex;
  flex-direction: column;
}
.recipient-file-actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 32px;
}
.campaign-settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.campaign-settings-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.smtp-campaign-alert-action button {
  flex-shrink: 0;
}
.smtp-campaign-alert-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.smtp-campaign-alert {
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid #f2b8b5;
  border-radius: 7px;
  background: #fff1f0;
  color: #b42318;
  font-size: 10px;
  font-weight: 600;
}
.smtp-campaign-alert.checking {
  border-color: #cfdcff;
  background: #f5f8ff;
  color: #475467;
}
.smtp-campaign-alert.connected {
  border-color: #a6dfc2;
  background: #ecfdf3;
  color: #067647;
}
.rich-text-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 42px;
  padding: 6px 9px;
  border-bottom: 1px solid #e5e9ef;
  background: #f8f9fb;
}
.rich-text-toolbar button {
  min-width: 30px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #475467;
  padding: 0 7px;
  font-size: 10px;
}
.rich-text-toolbar button:hover,
.rich-text-toolbar button:focus-visible {
  border-color: #cfdcff;
  background: #eaf1ff;
  color: var(--blue);
  outline: none;
}
.rich-text-toolbar > span {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: #dce1e8;
}
.rich-text-editor {
  min-height: 190px;
  max-height: 430px;
  overflow-y: auto;
  padding: 17px;
  color: #344054;
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
}
.rich-text-editor:focus {
  box-shadow: inset 0 0 0 2px #8db2ff;
}
.rich-text-editor:empty::before {
  content: attr(data-placeholder);
  color: #98a2b3;
  pointer-events: none;
}
.rich-text-editor ul,
.rich-text-editor ol,
.email-rendered-body ul,
.email-rendered-body ol {
  padding-left: 22px;
}
.email-rendered-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.email-rendered-body p,
.email-rendered-body div {
  margin: 0 0 10px;
}
@media (max-width: 720px) {
  .merge-tags-title {
    display: block;
  }
  .merge-tags-title span {
    display: block;
    margin-top: 3px;
  }
  .merge-tag-list {
    max-height: 120px;
  }
}
.email-preview-shell {
  margin: 20px;
  background: #eef1f6;
  border: 1px solid #dfe4ec;
  border-radius: 9px;
  overflow: hidden;
}
.email-preview-toolbar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  background: #f8f9fb;
  border-bottom: 1px solid #dfe4ec;
}
.email-preview-toolbar > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6dbe3;
}
.email-preview-toolbar > span:first-child {
  background: #f09a99;
}
.email-preview-toolbar > span:nth-child(2) {
  background: #f4c66f;
}
.email-preview-toolbar > span:nth-child(3) {
  background: #7dc99d;
}
.email-preview-toolbar small {
  margin-left: auto;
  color: #8a94a4;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.email-preview-shell .email {
  margin: 14px;
  background: #fff;
  padding: 22px;
  border-color: #dfe4ec;
}
.email-preview-shell .email-from {
  padding-bottom: 16px;
  border-bottom: 1px solid #edf0f4;
}
.email-preview-shell .email-from b {
  font-size: 10px;
  color: #273142;
}
.email-preview-shell .email-from small {
  line-height: 1.5;
}
.email-content {
  padding: 3px 0 5px;
}
.email-content h4 {
  font-size: 16px;
  line-height: 1.35;
  margin: 20px 0 15px;
  color: #1f2937;
}
.email-content p {
  min-height: 72px;
  margin: 0;
  color: #3f4857;
  font-size: 11px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.email-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid #edf0f4;
  color: #98a1ae;
  font-size: 8px;
}
.email-footer button {
  border: 0;
  background: transparent;
  color: #77869a;
  text-decoration: underline;
  padding: 0;
  font-size: 8px;
}
.review-email-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-top: 24px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}
.review-email-heading span {
  display: block;
  color: var(--blue);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.9px;
  margin-bottom: 4px;
}
.review-email-heading h3 {
  margin: 0;
}
.review-email-heading > small {
  max-width: 220px;
  text-align: right;
  color: #8992a1;
  font-size: 9px;
  line-height: 1.45;
}
.review-main > .email-preview-shell {
  margin: 14px 0 0;
}
.review-main > .email-preview-shell .email {
  max-width: 680px;
  margin: 16px auto;
}
@media (max-width: 720px) {
  .email-preview-shell {
    margin: 14px;
  }
  .email-preview-shell .email {
    margin: 9px;
    padding: 16px;
  }
  .email-footer,
  .review-email-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .review-email-heading > small {
    text-align: left;
  }
  .email-content h4 {
    font-size: 14px;
  }
}
.wa-current-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.wa-recovery, .wa-recovery-actions {
  margin: 16px 24px;
}
.wa-recovery {
  padding: 14px 16px;
  border: 1px solid #f0d29a;
  border-radius: 10px;
  background: #fffbef;
  color: #784d0b;
}
.wa-recovery p {
  margin: 6px 0;
  font-size: 12px;
}
.wa-recovery small {
  font-size: 11px;
}
.wa-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.wa-recovery-actions label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-setup-card > button + button {
  margin-top: 10px;
}
.campaign-status-details {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.campaign-status-details:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 6px;
}
.campaign-message-dialog {
  margin: auto;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.campaign-message-dialog::backdrop {
  background: rgba(16, 24, 40, 0.48);
  backdrop-filter: blur(2px);
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}