/* ── SEQUENCES MODULE ── */

  .seq-module { gap: 28px; }

  .seq-auth-bar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .seq-auth-msg { font-size: 15px; color: var(--ink); }
  .seq-auth-msg.success { color: #4a6b3a; }

  .seq-shell { display: flex; flex-direction: column; gap: 24px; }

  .seq-pillbar {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .seq-frame {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    box-sizing: border-box;
  }

  .seq-frame-pinned { flex: 0 0 auto; gap: 6px; padding: 10px; }

  /* Tier frames wrap onto the next row when the pillbar can't fit them
     all in one line (e.g. narrow window, sidebar visible). 240px is
     enough for the label + at least one pill. Page never forces a
     horizontal scroll. */
  .seq-frame-tier {
    flex: 1 1 240px;
    min-width: 0;
  }

  .seq-frame-label {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #8a7e6b);
    flex-shrink: 0;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
  }
  .seq-frame-label i { font-size: 16px; line-height: 1; }

  .seq-frame-pills {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    align-items: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .seq-frame-pills::-webkit-scrollbar { display: none; height: 0; width: 0; }

  .seq-pinned-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #f5f0e7;
    border: 1px solid #d8cdb8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #4a4138;
    flex-shrink: 0;
  }
  .seq-pinned-icon i { font-size: 17px; line-height: 1; }
  .seq-pinned-icon:hover { background: #ece4d6; }
  .seq-pinned-icon.active { background: #4a4138; color: var(--bg); border-color: #4a4138; }

  .seq-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font: 500 13px/1 'Poppins', sans-serif;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .seq-pill:hover { border-color: var(--ink-soft, #b8b0a4); background: #fafaf6; }
  .seq-pill.active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .seq-pill-icon { font-size: 14px; line-height: 1; }



  .seq-tier-add {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--ink-soft, #8a7e6b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    opacity: 0.55;
    transition: opacity 0.15s ease;
  }
  .seq-tier-add:not(:disabled) { cursor: pointer; }
  .seq-tier-add:not(:disabled):hover { opacity: 1; border-style: solid; color: var(--ink); }
  .seq-tier-add i { font-size: 12px; line-height: 1; }

  @media (max-width: 767px) {
    .seq-pillbar { flex-direction: column; }
    .seq-frame { width: 100%; }
  }

  .seq-global-schedule {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }

  .seq-schedule-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 16px 35px rgba(39, 32, 24, 0.05);
  }

  .seq-schedule-card.is-empty {
    opacity: 0.72;
  }

  .seq-schedule-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }

  .seq-schedule-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 5px;
    font: 700 15px/1.2 'Poppins', sans-serif;
    color: var(--ink);
  }

  .seq-schedule-head h3 i {
    color: #6a7f68;
    font-size: 17px;
  }

  .seq-schedule-head p {
    margin: 0;
    font: 400 12px/1.45 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
  }

  .seq-schedule-head code {
    font: 600 11px/1 'Poppins', sans-serif;
    background: #f5f0e7;
    border: 1px solid #ebe2d4;
    border-radius: 999px;
    padding: 2px 7px;
  }

  .seq-schedule-count {
    flex-shrink: 0;
    border-radius: 999px;
    background: #f3ead7;
    color: #8a6f2e;
    padding: 8px 12px;
    font: 700 12px/1 'Poppins', sans-serif;
  }

  .seq-schedule-list {
    display: grid;
    gap: 8px;
  }

  .seq-schedule-row {
    border: 1px solid #eee7dd;
    border-radius: 12px;
    background: #fffdf9;
    overflow: hidden;
  }

  .seq-schedule-row summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
  }

  .seq-schedule-row summary::-webkit-details-marker { display: none; }

  .seq-schedule-row summary::after {
    content: '+';
    flex-shrink: 0;
    color: var(--ink-soft, #8a7e6b);
    font: 700 18px/1 'Poppins', sans-serif;
  }

  .seq-schedule-row[open] summary::after { content: '-'; }

  .seq-schedule-main {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .seq-schedule-main strong {
    font: 700 13px/1.2 'Poppins', sans-serif;
    color: var(--ink);
  }

  .seq-schedule-main small {
    font: 500 11px/1.2 'Poppins', sans-serif;
    color: #6d7f69;
  }

  .seq-schedule-tag {
    margin-left: auto;
    border-radius: 999px;
    background: #eef4ea;
    color: #426441;
    padding: 6px 10px;
    font: 700 10px/1 'Poppins', sans-serif;
    white-space: nowrap;
  }

  .seq-schedule-copy {
    white-space: pre-wrap;
    border-top: 1px solid #eee7dd;
    padding: 12px 14px 14px;
    font: 400 13px/1.55 'Poppins', sans-serif;
    color: #4e665c;
  }

  .seq-schedule-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
  }

  .seq-schedule-buttons span {
    border-radius: 999px;
    border: 1px solid #e2d7c5;
    padding: 6px 10px;
    font: 700 11px/1 'Poppins', sans-serif;
    color: #7d6631;
    background: #faf3e3;
  }

  /* Frame-less, centered layout — heading + stats sit on parchment, flow
     is a narrower centered column with arrows between cards (a la
     ConvertKit's automations view). */
  .seq-detail {
    background: transparent;
    border: 0;
    padding: 0;
    /* width:100% pinned to max-width — without explicit width, .seq-detail
       sizes to its widest child, which means the settings card expanding
       help text would resize the whole frame. */
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    min-height: 320px;
  }

  /* Page-style heading: large serif title (no decorative icon), inline
     status indicator, chip-style metadata, then a dedicated stats strip. */
  /* Sequence detail header — slimmed per the "less crowded" pass.
     Title + tiny status indicator on one line, then a thin meta line
     (trigger + run summary) only when there's something meaningful
     to show. No more side-by-side status pill + Edit button +
     three chips + "no runs yet" panel. */
  .seq-detail-header { margin-bottom: 18px; }

  .seq-detail-titlerow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .seq-detail-title {
    font: 600 28px/1.2 'Cormorant Garamond', serif;
    color: var(--ink);
    margin: 0;
    min-width: 0;
    flex: 0 1 auto;
  }
  .seq-detail-spacer { flex: 1 1 auto; }

  .seq-detail-icon {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--ink-soft, #8a7e6b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  }
  .seq-detail-icon:hover { background: #f5f0e7; color: var(--ink); border-color: var(--ink-soft, #b8b0a4); }
  .seq-detail-icon:active { transform: scale(0.95); }
  .seq-detail-icon i { font-size: 14px; }

  .seq-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 12px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    flex-shrink: 0;
    text-transform: lowercase;
    letter-spacing: 0.02em;
  }
  .seq-status .status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ink-soft, #b8b0a4);
  }
  .seq-status.status-active { color: #4a6b3a; }
  .seq-status.status-active .status-dot { background: #7a8b6f; }
  .seq-status.status-draft  .status-dot { background: #b8b0a4; }
  .seq-status.status-deprecated { color: #c17f5a; }
  .seq-status.status-deprecated .status-dot { background: #c17f5a; }
  .seq-status.status-archived .status-dot { background: #8a7e6b; }
  /* Subtle amber ring on the status dot when there are unpublished
     changes — replaces the old "UNPUBLISHED CHANGES" chip. */
  .seq-status.has-unpublished .status-dot {
    box-shadow: 0 0 0 2px #f3d484, 0 0 0 3px var(--bg);
  }

  .seq-detail-meta {
    font: 400 12px/1.4 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .seq-meta-code {
    font: 500 11px/1 'Menlo', 'JetBrains Mono', monospace;
    color: var(--ink);
    background: #f0ede4;
    padding: 2px 6px;
    border-radius: 4px;
  }
  .seq-meta-daterange {
    font: 500 11px/1 'Poppins', sans-serif;
    color: var(--ink);
    background: #f0ede4;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .seq-meta-daterange:hover {
    border-color: var(--border, #e8e2da);
    background: #fff;
  }

  /* ── AUDIENCE MODULE ────────────────────────────────────────────────
     List + detail surface for browsing all subscribers. Two-pane layout
     on desktop (list left, detail right); stacks on mobile. */
  .audience-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-h, 64px) - 32px);
    gap: 16px;
  }
  .audience-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .audience-search {
    position: relative;
    flex: 1 1 320px;
    max-width: 460px;
  }
  .audience-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font: 400 14px/1 'Poppins', sans-serif;
    background: #fff;
    color: var(--ink);
    box-sizing: border-box;
  }
  .audience-search input:focus { outline: 0; border-color: var(--ink-soft, #6e6358); }
  .audience-search-icon {
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--ink-soft, #8a7e6b);
    font-size: 16px;
    pointer-events: none;
  }
  .audience-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .audience-count {
    font: 400 12px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    margin-left: auto;
  }

  .audience-system-status {
    background: #fff;
    border: 1px solid var(--border, #e8e2da);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font: 400 13px/1.4 'Poppins', sans-serif;
    color: var(--ink, #1a1712);
  }
  .audience-system-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--ink, #1a1712);
  }
  .audience-system-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(92px, 1fr));
    gap: 8px;
  }
  .audience-system-metric {
    border: 1px solid var(--border, #e8e2da);
    border-radius: 6px;
    padding: 8px 10px;
    min-width: 0;
  }
  .audience-system-metric span {
    display: block;
    color: var(--ink-soft, #8a7e6b);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
  }
  .audience-system-metric strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #1a1712);
  }
  .audience-system-metric.tone-warn { border-color: #e5c45a; background: #fffbec; }
  .audience-system-metric.tone-bad { border-color: #d98b78; background: #fff3ef; }

  .audience-unmatched {
    background: #fff8e6;
    border: 1px solid #f3d68a;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font: 400 13px/1.4 'Poppins', sans-serif;
    color: var(--ink, #1a1712);
  }
  .audience-unmatched-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #7a5a14;
  }
  .audience-unmatched-header i { font-size: 16px; }
  .audience-unmatched-help {
    color: var(--ink-soft, #8a7e6b);
    font-weight: 400;
    margin-left: 6px;
  }
  .audience-unmatched-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid #f1dfb0;
  }
  .audience-unmatched-line1 {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  .audience-unmatched-email {
    font-weight: 500;
    color: var(--ink, #1a1712);
  }
  .audience-unmatched-source {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft, #8a7e6b);
    background: #fff;
    border: 1px solid #ead9a8;
    border-radius: 4px;
    padding: 2px 6px;
  }
  .audience-unmatched-line2 {
    color: var(--ink-soft, #8a7e6b);
    font-size: 12px;
    margin-top: 2px;
  }
  .audience-unmatched-actions { display: flex; gap: 6px; }
  .audience-unmatched-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #d8c89a;
    color: var(--ink, #1a1712);
    border-radius: 6px;
    padding: 5px 10px;
    font: 500 12px/1 'Poppins', sans-serif;
    cursor: pointer;
  }
  .audience-unmatched-btn:hover { background: #fdf6e2; }
  .audience-unmatched-btn-ghost {
    background: transparent;
    color: var(--ink-soft, #8a7e6b);
    border-color: #e8d9b8;
  }

  .audience-body {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 24px;
    flex: 1;
    min-height: 0;
  }
  .audience-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    padding-right: 8px;
    border-right: 1px solid var(--border);
  }
  .audience-list::-webkit-scrollbar { width: 6px; }
  .audience-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  .audience-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
  }
  .audience-row:hover { background: #f5f0e7; }
  .audience-row.is-selected { background: var(--ink); color: var(--bg); }
  .audience-row.is-selected .audience-row-meta { color: rgba(253, 249, 244, 0.65); }
  .audience-row-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f0ede4;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 500 12px/1 'Poppins', sans-serif;
    flex-shrink: 0;
  }
  .audience-row.is-selected .audience-row-avatar { background: rgba(253, 249, 244, 0.15); color: var(--bg); }
  .audience-row-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .audience-row-name {
    font: 500 13px/1.3 'Poppins', sans-serif;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .audience-row-meta {
    font: 400 11px/1.3 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .audience-row-state {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ink-soft, #b8b0a4);
    flex-shrink: 0;
  }
  .audience-row-state.state-active   { background: #7a8b6f; }
  .audience-row-state.state-reading  { background: #c9b988; }
  .audience-row-state.state-returned { background: #5a3d7a; }
  .audience-row-state.state-dormant  { background: #c08f6c; }

  .audience-state-active   { box-shadow: inset 0 0 0 2px #7a8b6f; }
  .audience-state-reading  { box-shadow: inset 0 0 0 2px #c9b988; }
  .audience-state-returned { box-shadow: inset 0 0 0 2px #5a3d7a; }
  .audience-state-dormant  { box-shadow: inset 0 0 0 2px #c08f6c; }

  .audience-detail {
    overflow-y: auto;
    padding: 0 4px;
    min-width: 0;
  }
  .audience-detail-inner {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 40px;
  }
  .audience-empty {
    padding: 32px 20px;
    text-align: center;
    font: italic 14px/1.4 'Cormorant Garamond', serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .audience-empty-detail {
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
  }
  .audience-empty-detail i { font-size: 48px; color: var(--ink-soft, #b8b0a4); opacity: 0.5; }

  .audience-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  .audience-detail-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #f0ede4;
    color: var(--ink);
    display: inline-flex;
    align-items: center; justify-content: center;
    font: 500 18px/1 'Cormorant Garamond', serif;
    flex-shrink: 0;
  }
  .audience-detail-titles { flex: 1; min-width: 0; }
  .audience-detail-name {
    font: 600 26px/1.2 'Cormorant Garamond', serif;
    margin: 0 0 4px;
    color: var(--ink);
  }
  .audience-detail-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font: 400 12px/1.4 'Poppins', sans-serif;
    color: var(--ink-soft, #6e6358);
  }
  .audience-detail-meta span { display: inline-flex; align-items: center; gap: 5px; }
  .audience-detail-meta i { font-size: 13px; opacity: 0.7; }
  .audience-detail-state {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #6e6358);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    flex-shrink: 0;
  }
  .audience-detail-state .state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft, #b8b0a4); }
  .audience-detail-state.state-active .state-dot { background: #7a8b6f; }
  .audience-detail-state.state-reading .state-dot { background: #c9b988; }
  .audience-detail-state.state-returned .state-dot { background: #5a3d7a; }
  .audience-detail-state.state-dormant .state-dot { background: #c08f6c; }

  .audience-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .audience-stat { padding: 0 16px; border-right: 1px solid var(--border); }
  .audience-stat:last-child { border-right: 0; }
  .audience-stat-label {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-soft, #8a7e6b);
    margin-bottom: 6px;
  }
  .audience-stat-value {
    font: 600 22px/1 'Cormorant Garamond', serif;
    color: var(--ink);
  }
  .audience-stat-hint {
    font: 400 10px/1.2 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    margin-top: 4px;
  }

  .audience-section { display: flex; flex-direction: column; gap: 10px; }
  .audience-section-title {
    font: 600 13px/1 'Poppins', sans-serif;
    color: var(--ink);
    margin: 0;
    display: flex; align-items: baseline; gap: 6px;
    letter-spacing: -0.005em;
  }
  .audience-section-count { font: 400 11px/1 'Poppins', sans-serif; color: var(--ink-soft, #8a7e6b); }
  .audience-section-empty {
    font: italic 12px/1.4 'Cormorant Garamond', serif;
    color: var(--ink-soft, #8a7e6b);
    padding: 6px 0;
  }

  .audience-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .audience-tag {
    font: 500 11px/1 'Menlo', 'JetBrains Mono', monospace;
    background: #f0ede4;
    color: var(--ink);
    padding: 5px 9px;
    border-radius: 4px;
  }

  /* Tag groups (Option B): one row per offering prefix, lifecycle
     states stacked horizontally as small chips. */
  .audience-tag-groups {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .audience-tag-group {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid var(--border);
  }
  .audience-tag-group:last-child { border-bottom: 0; }
  .audience-tag-group-other { background: #fdfbf6; }
  .audience-tag-group-label {
    font: 500 11px/1.2 'Menlo', 'JetBrains Mono', monospace;
    color: var(--ink-soft, #6e6358);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .audience-tag-group-prefix { font-size: 10px; opacity: 0.7; }
  .audience-tag-group-states {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .audience-tag-state {
    font: 500 11px/1 'Poppins', sans-serif;
    background: #f0ede4;
    color: var(--ink);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: default;
  }

  /* Custom fields (parallel to ConvertKit's custom fields). */
  .audience-cf-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .audience-cf-list > * + * { border-top: 1px solid var(--border); }
  .audience-cf-row, .audience-cf-add-row {
    display: grid;
    grid-template-columns: 160px 1fr 28px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
  }
  .audience-cf-add-row {
    background: #fdfbf6;
    grid-template-columns: 160px 1fr auto;
  }
  .audience-cf-key {
    font: 500 11px/1.3 'Menlo', 'JetBrains Mono', monospace;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .audience-cf-key-input {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    padding: 6px 8px;
    font: 500 11px/1.3 'Menlo', 'JetBrains Mono', monospace;
    color: var(--ink);
  }
  .audience-cf-val {
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 8px;
    font: 400 12px/1.3 'Poppins', sans-serif;
    color: var(--ink);
    border-radius: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .audience-cf-add-row .audience-cf-val {
    border: 1px solid var(--border);
    background: #fff;
  }
  .audience-cf-val:focus {
    outline: 0;
    border-color: var(--ink-soft, #6e6358);
    background: #fff;
  }
  .audience-cf-delete {
    width: 26px; height: 26px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    color: var(--ink-soft, #b8b0a4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .audience-cf-delete:hover { background: #f5e6e6; color: #8b3a3a; }
  .audience-cf-add-btn {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    padding: 7px 14px;
    border-radius: 8px;
    font: 500 11px/1 'Poppins', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .audience-cf-add-btn:hover { background: #f5f0e7; border-color: var(--ink-soft, #b8b0a4); }
  .audience-cf-add-btn i { font-size: 11px; }

  .audience-runs {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .audience-runs > * + * { border-top: 1px solid var(--border); }
  .audience-run {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center; gap: 12px;
    padding: 10px 14px;
    background: #fff;
    font: 400 12px/1.3 'Poppins', sans-serif;
  }
  .audience-run-status {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-soft, #8a7e6b);
  }
  .audience-run.is-active .audience-run-status { color: #4a6b3a; }
  .audience-run-name {
    font-weight: 500; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .audience-run-time { font-size: 11px; color: var(--ink-soft, #8a7e6b); text-align: right; }
  .audience-run-pending { background: #fdfbf6; }
  .audience-runs-history { margin-top: 8px; }
  .audience-runs-history > summary {
    cursor: pointer;
    font: 500 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #6e6358);
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 6px 0;
  }
  .audience-runs-history > summary:hover { color: var(--ink); }
  .audience-runs-history > .audience-runs { margin-top: 8px; }

  .audience-questions {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .audience-questions > * + * { border-top: 1px solid var(--border); }
  .audience-question {
    display: grid;
    grid-template-columns: 90px 1fr 1fr 80px;
    gap: 12px; align-items: center;
    padding: 8px 14px;
    background: #fff;
    font: 400 11px/1.3 'Poppins', sans-serif;
  }
  .audience-question-status {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-soft, #8a7e6b);
  }
  .audience-question-answered .audience-question-status { color: #4a6b3a; }
  .audience-question-reopen-exhausted .audience-question-status { color: #c17f5a; }
  .audience-question-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .audience-question-attr {
    font: 500 11px/1 'Menlo', 'JetBrains Mono', monospace;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .audience-question-seq {
    font-size: 10px;
    color: var(--ink-soft, #8a7e6b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .audience-question-answer {
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .audience-question-time { text-align: right; color: var(--ink-soft, #8a7e6b); font-size: 10px; }

  .audience-purchases {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .audience-purchases > * + * { border-top: 1px solid var(--border); }
  .audience-purchase {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px; align-items: center;
    padding: 10px 14px;
    background: #fff;
    font: 400 12px 'Poppins', sans-serif;
  }
  .audience-purchase-amount { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
  .audience-purchase-time { color: var(--ink-soft, #8a7e6b); font-size: 11px; }
  .audience-purchase-refund {
    background: #f5e6e6;
    color: #8b3a3a;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
  }

  .audience-profile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    border-top: 1px solid var(--border);
  }
  .audience-profile-row {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .audience-profile-key {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-soft, #8a7e6b);
  }
  .audience-profile-val {
    font: 400 12px/1.4 'Poppins', sans-serif;
    color: var(--ink);
    word-break: break-all;
  }

  @media (max-width: 880px) {
    .audience-body { grid-template-columns: 1fr; }
    .audience-list { border-right: 0; padding-right: 0; max-height: 50vh; }
    .audience-question { grid-template-columns: 80px 1fr 60px; }
    .audience-question-answer { display: none; }
  }

  /* Tucked event date inside the gear pill (Launch only). Compact
     date label sitting next to the gear icon. */
  .seq-thread-pill-settings-date {
    font: 500 11px/1 'Poppins', sans-serif;
    color: inherit;
    opacity: 0.85;
    margin-left: 2px;
  }

  /* Flatpickr palette override — match Pure Parchment accents instead
     of the default blue. Selected/today dots become ink-coloured;
     hover backgrounds use parchment soft. */
  .flatpickr-calendar {
    font-family: 'Poppins', sans-serif !important;
    box-shadow: 0 12px 40px -16px rgba(28, 24, 18, 0.18) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
  }
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected:focus,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--bg) !important;
  }
  .flatpickr-day.today {
    border-color: var(--ink-soft, #8a7e6b) !important;
  }
  .flatpickr-day:hover {
    background: #f5f0e7 !important;
  }
  .flatpickr-time input,
  .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month input.cur-year {
    color: var(--ink) !important;
  }
  .flatpickr-am-pm:hover, .flatpickr-time input:hover {
    background: #f5f0e7 !important;
  }

  /* Chat-bubble timeline. Visualizes the flow as the subscriber would see
     it: phone-width chat bubbles (max ~380px) for everything they receive,
     small left-rail annotations for behind-the-scenes operations,
     horizontal-rule separators for waits. Pattern borrowed from ManyChat /
     Voiceflow / Customer.io flow editors. */

  .seq-flow {
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    gap: 0;
  }

  /* ── Thread navigation ─────────────────────────────────────────── */
  .seq-threads {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .seq-thread-pillbar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px;
    overflow: hidden;
  }
  .seq-thread-pillbar-scroll {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: center;
  }
  .seq-thread-pillbar-scroll::-webkit-scrollbar { display: none; }
  .seq-thread-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    font: 500 13px/1 'Poppins', sans-serif;
    color: var(--ink);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .seq-thread-pill:hover { background: #f5f0e7; }
  .seq-thread-pill.active {
    background: var(--ink);
    color: var(--bg);
  }
  .seq-thread-pill-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .seq-thread-pill.active .seq-thread-pill-num {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--bg);
  }
  .seq-thread-pill-label {
    font-size: 13px;
  }
  .seq-thread-pill-count {
    font-size: 10px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .seq-thread-pill-add {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    color: var(--ink-soft, #8a7e6b);
    border: 1px dashed var(--border);
  }
  /* Sequence-settings gear pinned to the left of the pillbar (Launch only).
     Compact circle so it visually behaves like a small icon button rather
     than competing with the thread pills for attention. */
  .seq-thread-pill-settings {
    width: 32px; height: 32px;
    padding: 0;
    justify-content: center;
    color: var(--ink-soft, #6e6358);
    border: 1px solid var(--border);
    background: #fff;
    margin-right: 4px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .seq-thread-pill-settings:hover { background: #f5f0e7; color: var(--ink); border-color: var(--ink-soft, #b8b0a4); }
  .seq-thread-pill-settings:active { transform: scale(0.96); }
  .seq-thread-pill-settings.active {
    background: var(--ink); color: var(--bg); border-color: var(--ink);
  }
  .seq-thread-pill-settings i { font-size: 15px; }

  /* Summary strip — one-line read-only date display when settings panel
     is closed. Replaces the old big event-details card. */
  .seq-summary-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 auto 18px;
    max-width: 720px;
    color: var(--ink-soft, #6e6358);
    font: 400 13px/1.4 'Poppins', sans-serif;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .seq-summary-strip:hover { color: var(--ink); }
  .seq-summary-strip-date { color: var(--ink); font-weight: 500; }
  .seq-summary-strip-divider {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--ink-soft, #b8b0a4);
  }
  .seq-summary-strip-edit {
    margin-left: auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
  }

  /* Settings surface — full sequence settings panel that REPLACES the
     small summary strip when the gear is toggled on. Designed to feel
     spacious and editorial rather than card-stacked. */
  .settings-surface {
    /* width:100% pinned to max-width so the card doesn't change size when
       inner content (e.g. expanded help text) becomes wider. */
    width: 100%;
    max-width: 720px;
    margin: 0 auto 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px -20px rgba(28, 24, 18, 0.08);
  }
  .settings-surface-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--border);
  }
  .settings-surface-eyebrow {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft, #8a7e6b);
    margin-bottom: 6px;
  }
  .settings-surface-title {
    font: 600 24px/1.1 'Cormorant Garamond', serif;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.005em;
  }
  .settings-surface-close {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    color: var(--ink-soft, #6e6358);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .settings-surface-close:hover { background: #f5f0e7; color: var(--ink); }
  .settings-surface-close:active { transform: scale(0.95); }

  .settings-surface-section {
    padding: 22px 26px;
    border-bottom: 1px solid var(--border);
  }
  .settings-surface-section:last-of-type { border-bottom: 0; }
  .settings-surface-section-head {
    margin-bottom: 16px;
  }
  .settings-surface-section-head h4 {
    font: 600 13px/1 'Poppins', sans-serif;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .settings-help-toggle {
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: var(--ink-soft, #8a7e6b);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .settings-help-toggle:hover { background: #f5f0e7; }
  .settings-help-toggle i { font-size: 11px; }
  /* Help body — animated slide-down via max-height + opacity. Default
     state is collapsed (max-height 0, no padding/margin/border). When
     the parent has .show-help, transitions to expanded. max-height
     value is generous so even multi-line copy fits without clipping;
     the actual rendered height is determined by content. */
  .settings-surface-section-head .settings-help-body {
    font: 400 12px/1.5 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    max-width: 60ch;
    background: #fdfbf6;
    border-left: 2px solid var(--border);
    border-radius: 0 4px 4px 0;
    /* collapsed defaults — geometry collapsed AND visually invisible
       so transitions look intentional, not snap-y */
    max-height: 0;
    padding: 0 12px;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
      padding 0.2s ease,
      margin 0.2s ease,
      opacity 0.2s ease 0.05s;
  }
  .settings-surface-section-head.show-help .settings-help-body {
    max-height: 240px;
    padding: 8px 12px;
    margin-top: 8px;
    opacity: 1;
  }
  .settings-surface-section-head.show-help .settings-help-toggle { transform: rotate(180deg); }
  .settings-help-body code {
    background: #f5f0e7;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
  }

  .settings-surface-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .settings-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .settings-field-wide { grid-column: span 2; }
  .settings-field-label {
    font: 500 11px/1 'Poppins', sans-serif;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .settings-field-hint {
    font-weight: 400;
    color: var(--ink-soft, #8a7e6b);
    font-size: 10px;
  }
  .settings-field-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: 400 13px/1.4 'Poppins', sans-serif;
    color: var(--ink);
    background: #fdfbf6;
    transition: border-color 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
  }
  .settings-field-input:focus {
    outline: 0;
    border-color: var(--ink-soft, #6e6358);
    background: #fff;
  }
  .settings-field-help {
    font: 400 11px/1.4 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    margin-top: 2px;
  }

  /* Liquid variables list — divide-y rows over a card to avoid card
     overuse per taste-skill rule 4 (no nested boxes). */
  .settings-vars-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .settings-vars-list > * + * { border-top: 1px solid var(--border); }
  .settings-vars-empty {
    padding: 14px 16px;
    text-align: center;
    font: italic 12px/1.4 'Cormorant Garamond', serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .settings-var-row {
    display: grid;
    grid-template-columns: 1fr auto 1.5fr 28px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
  }
  .settings-var-row .settings-field-input {
    background: transparent;
    border: 0;
    padding: 6px 4px;
    border-radius: 0;
  }
  .settings-var-row .settings-field-input:focus { background: #fdfbf6; border-radius: 6px; }
  .settings-var-eq {
    font: 500 14px/1 'JetBrains Mono', 'Geist Mono', monospace;
    color: var(--ink-soft, #b8b0a4);
  }
  .settings-var-key { font-family: 'JetBrains Mono', 'Geist Mono', monospace; font-size: 12px; }
  .settings-var-remove {
    width: 26px; height: 26px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--ink-soft, #b8b0a4);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .settings-var-remove:hover { background: #f5e6e6; color: #8b3a3a; }
  .settings-vars-add {
    margin-top: 10px;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--ink-soft, #6e6358);
    padding: 8px 14px;
    border-radius: 999px;
    font: 500 12px/1 'Poppins', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .settings-vars-add:hover { border-style: solid; color: var(--ink); border-color: var(--ink); }
  .settings-vars-add i { font-size: 12px; }

  .settings-surface-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 26px;
    border-top: 1px solid var(--border);
    background: #fdfbf6;
  }
  .settings-surface-status {
    margin-right: auto;
    font: 400 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .settings-surface-status.error { color: #8b3a3a; }
  .settings-surface-btn {
    font: 500 12px/1 'Poppins', sans-serif;
    padding: 9px 16px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .settings-surface-btn:hover { border-color: var(--ink-soft, #6e6358); }
  .settings-surface-btn:active { transform: translateY(1px); }
  .settings-surface-btn.primary {
    background: var(--ink); color: var(--bg); border-color: var(--ink);
  }
  .settings-surface-btn.primary:hover { background: #2c2620; }

  @media (max-width: 600px) {
    .settings-surface-grid { grid-template-columns: 1fr; }
    .settings-field-wide { grid-column: span 1; }
    .settings-var-row { grid-template-columns: 1fr 28px; gap: 6px; }
    .settings-var-row .settings-var-eq { display: none; }
    .settings-var-row .settings-field-input { background: #fdfbf6; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }
  }
  .seq-thread-gap-sep {
    flex-shrink: 0;
    font: italic 500 11px/1 'Cormorant Garamond', serif;
    color: var(--ink-soft, #8a7e6b);
    padding: 0 4px;
    letter-spacing: 0.04em;
  }
  .seq-thread-pill-add:hover { color: var(--ink); border-style: solid; }
  .seq-thread-pill-add i { font-size: 14px; }

  .seq-thread-gap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fdfbf6;
    border: 1px solid var(--border);
    border-radius: 999px;
    font: 400 13px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #6e6358);
    cursor: pointer;
    margin: 0 auto;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .seq-thread-gap:hover { border-color: var(--ink-soft, #b8b0a4); background: #fff; }
  .seq-thread-gap.is-readonly { cursor: default; }
  .seq-thread-gap.is-readonly:hover { background: #fdfbf6; border-color: var(--border); }
  .seq-thread-gap i { font-size: 13px; }
  .seq-thread-gap strong { font-weight: 500; color: var(--ink); }
  .seq-thread-gap-edit {
    margin-left: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
  }

  .seq-thread-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .seq-thread-next {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0 8px;
  }
  .seq-thread-next-btn {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 999px;
    font: 500 13px/1 'Poppins', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
  }
  .seq-thread-next-btn:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }

  /* Branch columns — parallel paths after a button_choice. The branches
     row breaks out of the .seq-flow 480px column. Capped at ~1100px so
     2 paths get full bubble width, 3 paths share that budget evenly. */
  .seq-branches-wrap {
    width: min(1100px, calc(100vw - 64px));
    margin-left: 50%;
    transform: translateX(-50%);
    position: relative;
    padding: 0 4px 4px;
  }
  .seq-branches {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
    padding: 8px 0;
  }
  .seq-branch-col {
    flex: 1 1 0;
    min-width: 0;
    max-width: 480px;
    background: #fdfbf6;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .seq-branch-label {
    font: 500 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 4px 0 6px;
    border-bottom: 1px dashed var(--border);
  }
  .seq-branch-flow {
    max-width: 100%;
    margin: 0;
  }
  .seq-branch-flow .seq-bubble,
  .seq-branch-flow .seq-bubble-wide {
    max-width: 100%;
  }
  .seq-branch-flow .seq-bubble {
    max-width: 100%;
  }
  .seq-branch-empty {
    text-align: center;
    font: italic 12px/1.4 'Cormorant Garamond', serif;
    color: var(--ink-soft, #8a7e6b);
    padding: 12px 0;
  }
  .seq-branch-converge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: 500 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 0 4px;
  }
  .seq-branch-converge i { font-size: 14px; }

  @media (max-width: 767px) {
    .seq-branches { flex-direction: column; align-items: stretch; }
    .seq-branch-col { max-width: 100%; }
  }

  .seq-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
  }

  /* Launch event details card */
  .launch-card {
    background: linear-gradient(180deg, #fdf6e7 0%, #fdfbf6 100%);
    border: 1px solid #e0d5b8;
    border-radius: 16px;
    margin: 0 auto 24px;
    max-width: 720px;
    overflow: hidden;
  }
  .launch-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .launch-card-header:hover { background: #fcf2dc; }
  .launch-card-header > i { font-size: 22px; color: #8b6638; flex-shrink: 0; }
  .launch-card-info { flex: 1; min-width: 0; }
  .launch-card-title {
    font: 600 16px/1.2 'Cormorant Garamond', serif;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .launch-card-sub {
    font: 400 12px/1.4 'Poppins', sans-serif;
    color: var(--ink-soft, #6e6358);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .launch-card-sub strong { font-weight: 500; color: var(--ink); }
  .launch-card-edit {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #8a7e6b);
    flex-shrink: 0;
  }
  .launch-card.is-editing { background: #fff; }
  .launch-card-editor { padding: 18px 20px; }
  .launch-card-editor h3 {
    font: 500 14px/1 'Poppins', sans-serif;
    margin: 0 0 12px;
    color: var(--ink);
  }
  .launch-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 12px;
  }
  .launch-edit-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft, #8a7e6b);
  }
  .launch-edit-grid label .seq-edit-input { text-transform: none; }
  @media (max-width: 600px) { .launch-edit-grid { grid-template-columns: 1fr; } }

  /* Bubble — the chat message the subscriber receives. Inline keyboard
     buttons (button_choice / consent_invitation) live INSIDE the bubble
     as Telegram does, so the whole message reads as one unit. */
  .seq-bubble {
    max-width: 380px;
    background: #fff;
    border: 1px solid #e8e2da;
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    padding: 10px 14px;
    font: 400 14px/1.45 'Poppins', sans-serif;
    color: var(--ink);
    word-wrap: break-word;
    position: relative;
  }
  /* Editing mode: expand to fill the parent container (column or flow)
     up to 380px so the editor isn't constrained to the natural width
     of the previous text content. Especially important inside narrow
     branch columns where the bubble would otherwise collapse to the
     textarea's intrinsic width. */
  .seq-bubble.is-editing {
    width: 100%;
    max-width: 380px;
  }

  /* Hover-to-edit pencil for text-bearing bubbles (slice A of the inline
     editor: text-only edits; media / wait / button-list editing comes
     in subsequent slices). */
  .seq-bubble-pencil {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px; height: 24px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    color: var(--ink-soft, #8a7e6b);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .seq-bubble[data-editable] { cursor: pointer; }
  .seq-bubble[data-editable]:hover .seq-bubble-pencil { opacity: 1; }
  .seq-bubble-pencil:hover { color: var(--ink); border-color: var(--ink-soft, #8a7e6b); }
  .seq-bubble-pencil i { font-size: 13px; }

  .seq-response-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 600 10px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    background: var(--bg-subtle, #f7f3ec);
    border: 1px solid var(--border-light, rgba(0,0,0,0.06));
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
  }
  .seq-response-chip i { font-size: 11px; }

  /* In-place edit: textarea matches the bubble's typography */
  .seq-bubble.is-editing .seq-bubble-pencil { display: none; }
  .seq-bubble.is-editing { cursor: default; }
  .seq-bubble-edit-textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: 0;
    resize: vertical;
    font: 400 14px/1.45 'Poppins', sans-serif;
    color: var(--ink);
    background: #fdfbf6;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .seq-bubble-edit-textarea:focus {
    border-color: var(--ink-soft, #b8b0a4);
    background: #fff;
  }
  .seq-bubble-edit-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0ede4;
  }
  .seq-bubble-edit-action {
    font: 500 11px/1 'Poppins', sans-serif;
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    color: var(--ink);
  }
  .seq-bubble-edit-action.primary {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .seq-bubble-edit-action.danger {
    color: #8b3a3a;
    border-color: #e0c4c4;
    margin-right: auto; /* pin to the left side, away from Cancel/Save */
  }
  .seq-bubble-edit-action.danger:hover {
    background: #f5e6e6;
    border-color: #c79090;
  }
  .seq-bubble-edit-action:disabled { opacity: 0.5; cursor: not-allowed; }
  .seq-bubble-edit-status {
    font: 400 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    flex: 1;
    align-self: center;
  }
  .seq-bubble-edit-status.error { color: #c17f5a; }

  /* Formatting toolbar (B / I / <code>) above text fields */
  .seq-edit-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
  }
  .seq-edit-toolbar button {
    width: 28px; height: 24px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font: 13px/1 'Poppins', sans-serif;
    color: var(--ink);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .seq-edit-toolbar button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .seq-edit-toolbar button code { font: 600 10px/1 'Menlo', monospace; }

  /* Section labels above grouped fields */
  .seq-edit-label {
    display: block;
    font: 500 9px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #8a7e6b);
    margin: 12px 0 4px;
  }

  /* Single-line text input shared across editor fields */
  .seq-edit-input {
    width: 100%;
    padding: 7px 10px;
    font: 400 13px/1.4 'Poppins', sans-serif;
    color: var(--ink);
    background: #faf6ee;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-sizing: border-box;
  }
  .seq-edit-input:focus { outline: none; border-color: var(--ink-soft, #8a7e6b); background: #fff; }

  /* Buttons list editor (button_choice / consent_invitation) */
  .seq-edit-buttons-list,
  .seq-edit-album-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .seq-edit-album-row {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .seq-edit-album-row .seq-edit-album-kind { flex: 0 0 90px; }
  .seq-edit-album-row .seq-edit-album-url { flex: 2; min-width: 0; }
  .seq-edit-album-row .seq-edit-album-caption { flex: 1.5; min-width: 0; }
  .seq-edit-button-row {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .seq-edit-button-row .seq-edit-button-label { flex: 1.6; min-width: 0; }
  .seq-edit-button-row .seq-edit-button-value { flex: 1;   min-width: 0; }
  .seq-edit-button-remove {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    color: var(--ink-soft, #8a7e6b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .seq-edit-button-remove:hover { color: #c17f5a; border-color: #c17f5a; }
  .seq-edit-button-remove i { font-size: 12px; }

  .seq-edit-add-button {
    margin-top: 6px;
    align-self: flex-start;
    font: 500 11px/1 'Poppins', sans-serif;
    padding: 6px 12px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--ink-soft, #8a7e6b);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .seq-edit-add-button:hover { border-style: solid; color: var(--ink); border-color: var(--ink-soft, #8a7e6b); }
  .seq-edit-add-button i { font-size: 11px; }

  /* Wait separator: clickable in edit mode + a small "click to change" hint */
  .seq-wait-editable { cursor: pointer; }
  .seq-wait-editable:hover .seq-wait-label { color: var(--ink); text-decoration: underline; text-decoration-style: dotted; }
  .seq-wait-edit-hint {
    font: italic 10px/1 'Cormorant Garamond', serif;
    color: var(--ink-soft, #8a7e6b);
    opacity: 0;
    transition: opacity 0.15s ease;
    margin-left: 4px;
  }
  .seq-wait-editable:hover .seq-wait-edit-hint { opacity: 0.7; }
  .seq-wait.is-editing { display: block; padding: 14px 0; max-width: 480px; }
  .seq-wait.is-editing::before, .seq-wait.is-editing::after { display: none; }
  .seq-wait.is-editing .seq-wait-icon, .seq-wait.is-editing .seq-wait-label, .seq-wait.is-editing .seq-wait-edit-hint { display: none; }
  /* Inter-thread gap chip in editing state — drop chip styling, render
     vertical editor card just like .seq-wait.is-editing. */
  .seq-thread-gap.is-editing {
    display: block;
    cursor: default;
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
    width: 100%;
    max-width: 480px;
  }
  .seq-thread-gap.is-editing > i,
  .seq-thread-gap.is-editing > span:not(.seq-wait-editor):not(.seq-bubble-edit-status) {
    display: none;
  }

  /* Wait editor — preset chips + custom seconds input */
  .seq-wait-editor {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
  }
  .seq-wait-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
  }
  .seq-wait-preset {
    font: 500 11px/1 'Poppins', sans-serif;
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    cursor: pointer;
  }
  .seq-wait-preset:hover { background: #faf6ee; border-color: var(--ink-soft, #8a7e6b); }
  .seq-wait-preset.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  .seq-wait-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .seq-wait-custom label {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft, #8a7e6b);
    flex-shrink: 0;
  }
  .seq-wait-custom .seq-edit-input { width: 120px; }

  .seq-wait-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .seq-wait-actions .seq-bubble-edit-status { flex: 1; }

  /* Media URL row: input + upload button side-by-side */
  .seq-edit-url-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
  }
  .seq-edit-url-row .seq-edit-input { flex: 1; }
  .seq-edit-upload-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    font: 500 11px/1 'Poppins', sans-serif;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
  }
  .seq-edit-upload-btn:hover:not(:disabled) {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .seq-edit-upload-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .seq-edit-upload-btn i { font-size: 12px; }

  /* ── Add-node palette modal ───────────────────────────────────────── */
  .seq-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 23, 18, 0.45);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: 60px 20px 20px;
    overflow-y: auto;
  }
  .seq-palette-overlay.active { display: flex; }

  .seq-palette {
    background: #fdf9f4;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 28px;
    max-width: 620px;
    width: 100%;
    box-shadow: 0 16px 64px rgba(26, 23, 18, 0.16);
  }

  .seq-palette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 600 22px/1.2 'Cormorant Garamond', serif;
    color: var(--ink);
    margin-bottom: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .seq-palette-close {
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    color: var(--ink-soft, #8a7e6b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .seq-palette-close:hover { color: var(--ink); border-color: var(--ink-soft, #8a7e6b); }
  .seq-palette-close i { font-size: 14px; }

  .seq-palette-group { margin-top: 18px; }
  .seq-palette-group-label {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #8a7e6b);
    margin-bottom: 8px;
  }
  .seq-palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
  .seq-palette-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    gap: 4px;
    transition: all 0.15s ease;
  }
  .seq-palette-item:hover {
    border-color: var(--ink);
    background: #faf6ee;
    transform: translateY(-1px);
  }
  .seq-palette-item i {
    font-size: 18px;
    color: var(--ink-soft, #8a7e6b);
    margin-bottom: 4px;
  }
  .seq-palette-item:hover i { color: var(--ink); }
  .seq-palette-item-label {
    font: 600 14px/1.2 'Cormorant Garamond', serif;
    color: var(--ink);
  }
  .seq-palette-item-desc {
    font: 400 11px/1.4 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .seq-bubble-text { white-space: pre-wrap; word-wrap: break-word; }
  .seq-bubble.type-consent_invitation {
    background: #faf3d0;
    border-color: #e8d570;
  }
  .seq-bubble.type-ask_question .seq-bubble-text::after {
    content: '';
    display: block;
    margin-top: 8px;
    height: 22px;
    border-radius: 6px;
    background: #f5f0e7;
    border: 1px dashed #d8cdb8;
    width: 80%;
  }

  /* Connector arrows between non-wait cards — ConvertKit-automations style.
     Wrapped in .seq-arrow-wrap so the "+ add step" hover-reveal button can
     overlay on top. */
  .seq-arrow-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 44px;
    margin: 4px 0;
  }
  .seq-arrow-wrap.no-arrow { min-height: 36px; }
  .seq-arrow-wrap-end { min-height: 44px; padding: 14px 0; margin-top: 8px; }

  .seq-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 0;
    transition: opacity 0.15s ease;
  }
  .seq-arrow-line {
    width: 1px;
    height: 20px;
    background: var(--border);
  }
  .seq-arrow-head {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--border);
    margin-top: -1px;
  }

  /* The "+ add step" button overlays the arrow, hidden by default,
     revealed on wrap hover. */
  .seq-add-slot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    font: 500 11px/1 'Poppins', sans-serif;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    z-index: 1;
  }
  .seq-add-slot i { font-size: 11px; }
  .seq-add-slot:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .seq-arrow-wrap:hover .seq-add-slot { opacity: 1; }
  .seq-arrow-wrap:hover .seq-arrow { opacity: 0.25; }

  /* End slot — always visible (no arrow to hide it inside) */
  .seq-add-slot-end {
    position: static;
    transform: none;
    opacity: 0.55;
  }
  .seq-add-slot-end:hover { opacity: 1; }

  /* Media stub inside a bubble (audio / photo / video / album) */
  .seq-bubble-media {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .seq-bubble-media-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #f0ede4;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--ink);
  }
  .seq-bubble-media-icon.type-send_audio { background: #ddeaf3; color: #3a5a78; }
  .seq-bubble-media-icon.type-send_photo,
  .seq-bubble-media-icon.type-send_video { background: #e8def0; color: #5a3d7a; }
  .seq-bubble-media-icon.type-send_media_group { background: #f5e0e0; color: #8a4040; }
  .seq-bubble-media-icon i { font-size: 18px; }
  .seq-bubble-media-info { flex: 1; min-width: 0; }
  .seq-bubble-media-title {
    font: 500 13px/1.3 'Poppins', sans-serif;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .seq-bubble-media-sub {
    font: 400 11px/1.2 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .seq-bubble-caption {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0ede4;
    font: 400 13px/1.45 'Poppins', sans-serif;
    color: var(--ink);
  }

  /* Video note — circular bubble, the "selfie video" form */
  .seq-bubble-video-note {
    width: 132px; height: 132px;
    border-radius: 50%;
    background: #e8def0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8cdb8;
    color: #5a3d7a;
    gap: 4px;
  }
  .seq-bubble-video-note i { font-size: 32px; }
  .seq-bubble-video-note .seq-bubble-media-sub { color: #5a3d7a; opacity: 0.7; }

  /* Inline keyboard — lives INSIDE the bubble so the whole message reads
     as one unit, matching how Telegram actually renders inline keyboards. */
  .seq-bubble-buttons {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px -14px -10px;        /* extend to bubble's inner edges */
    padding: 8px 0 7px;              /* breathing room above + below the button stack */
    border-top: 1px solid #f0ede4;
  }
  .seq-bubble-button {
    font: 400 13px/1.2 'Poppins', sans-serif;
    padding: 9px 14px;
    margin: 0 6px;
    background: #faf6ee;
    border: 1px solid #e8e2da;
    border-radius: 8px;
    color: var(--ink);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .seq-bubble.type-consent_invitation .seq-bubble-buttons {
    border-top-color: #e8d570;
  }
  .seq-bubble.type-consent_invitation .seq-bubble-button {
    background: #fff;
    border-color: #e8d570;
  }

  /* Quiet meta line under each bubble */
  .seq-step-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 12px;
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft, #8a7e6b);
  }
  .seq-step-meta-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
  }
  .seq-step-meta.type-send_audio { color: #3a5a78; }
  .seq-step-meta.type-send_photo,
  .seq-step-meta.type-send_video,
  .seq-step-meta.type-send_video_note { color: #5a3d7a; }
  .seq-step-meta.type-consent_invitation { color: #7a6020; }
  .seq-step-meta.type-ask_question { color: #8a6020; }
  .seq-step-meta.type-button_choice { color: #3a5078; }
  .seq-step-qtype {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font: 500 9px/1.4 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .seq-step-qtype.qtype-A { background: #e6ebe2; color: #3a5a2a; }
  .seq-step-qtype.qtype-B { background: #ece2f0; color: #5a3d7a; }
  .seq-step-qtype.qtype-C { background: #f5f0e7; color: #8a7e6b; }
  .seq-step-timeout {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font: 500 9px/1.4 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #f3eee2;
    color: #6e5a30;
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .seq-step-timeout i { font-size: 11px; }
  .seq-edit-timeout-section { margin-top: 8px; }
  .seq-edit-timeout-section .seq-wait-presets { margin: 4px 0; }
  .seq-step-meta.type-send_broadcast { color: #8a3030; }
  .seq-step-meta.type-send_media_group { color: #8a4040; }

  .seq-step-attr {
    font: 500 9px/1 'Poppins', sans-serif;
    padding: 3px 6px;
    border-radius: 3px;
    background: #e6ebe2;
    color: #4a6b3a;
    text-transform: lowercase;
    letter-spacing: 0.04em;
  }

  /* Behind-the-scenes operations — small left-rail annotations.
     Visually quieter than bubbles so the eye reads bubbles as the
     "real chat" and these as marginalia. */
  .seq-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    margin: 0;
    font: 400 12px/1.4 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    border-left: 2px solid #d8cdb8;
    max-width: 380px;
    align-self: flex-start;
  }
  .seq-action i {
    font-size: 13px;
    flex-shrink: 0;
    color: #4a6b3a;
  }
  .seq-action.type-add_ck_tag i,
  .seq-action.type-update_ck_field i,
  .seq-action.type-set_attribute i,
  .seq-action.type-check_convertkit i { color: #4a6b3a; }
  .seq-action.type-enter_sequence i { color: #5a3d7a; }
  .seq-action-editable { cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; border-radius: 6px; padding-right: 16px; }
  .seq-action-editable:hover { background: #fdfbf6; border-left-color: var(--ink); }
  .seq-action.is-editing {
    cursor: default;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 2px solid var(--ink-soft, #b8b0a4);
    border-radius: 12px;
    padding: 14px 16px;
    max-width: 480px;
    width: 100%;
    align-self: center;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .seq-action.is-editing > i,
  .seq-action.is-editing > .seq-action-label,
  .seq-action.is-editing > .seq-action-content { display: none; }
  .seq-action-editor { display: flex; flex-direction: column; gap: 6px; }
  .seq-action-label {
    font: 500 9px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft, #8a7e6b);
    flex-shrink: 0;
  }
  .seq-action-content {
    font: 400 12px/1.3 'Poppins', sans-serif;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .seq-action-content code {
    font: 500 11px/1 'Menlo', 'JetBrains Mono', monospace;
    background: #f0ede4;
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--ink);
  }

  /* Wait separators — clear horizontal-rule treatment */
  .seq-wait {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    margin: 0;
    width: 100%;
    align-self: stretch;
  }
  .seq-wait::before {
    content: '';
    width: 24px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .seq-wait::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border);
  }
  .seq-wait-icon {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    flex-shrink: 0;
  }
  .seq-wait-icon i { font-size: 13px; }
  .seq-wait-label {
    font: 500 12px/1 'Poppins', sans-serif;
    color: var(--ink);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }

  /* Divider for unreachable nodes */
  .seq-flow-divider {
    font: italic 11px/1 'Cormorant Garamond', serif;
    color: var(--ink-soft, #8a7e6b);
    text-align: center;
    margin: 24px 0 12px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    max-width: 380px;
  }

  /* Mobile: bubbles use full-width minus the page padding */
  @media (max-width: 640px) {
    .seq-bubble, .seq-bubble-buttons, .seq-action, .seq-wait, .seq-flow-divider {
      max-width: 100%;
    }
  }

  /* ── Settings sections ──────────────────────────────────────────── */

  .settings-section {
    margin-bottom: 36px;
  }
  .settings-section-title {
    font: 600 18px/1.2 'Cormorant Garamond', serif;
    color: var(--ink);
    margin: 0 0 14px;
  }

  /* Engagement state row — slim chip row under audience overview tiles */
  .settings-engagement-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .settings-engagement-label {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #8a7e6b);
    margin-right: 4px;
  }
  .settings-engagement-tile {
    font: 400 12px/1 'Poppins', sans-serif;
    color: var(--ink);
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
  }
  .settings-engagement-tile strong { font-weight: 500; margin-right: 4px; }
  .settings-engagement-tile.state-active   { background: #e6ebe2; border-color: #c8d3bf; color: #3a5a2a; }
  .settings-engagement-tile.state-reading  { background: #f3eee2; border-color: #ddd2bb; color: #6e5a30; }
  .settings-engagement-tile.state-returned { background: #ece2f0; border-color: #d3c0dd; color: #5a3d7a; }
  .settings-engagement-tile.state-dormant  { background: #f0e2e2; border-color: #ddc0c0; color: #7a3d3d; }
  .settings-engagement-tile.state-unknown  { background: #f5f0e7; border-color: #ddd; color: #8a7e6b; }

  /* House rules — bylaws viewer */
  .bylaws-version {
    font: 500 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    margin-left: 6px;
    letter-spacing: 0.04em;
  }
  .bylaws-intro {
    font: 400 14px/1.55 'Poppins', sans-serif;
    color: var(--ink-soft, #6e6358);
    margin: 0 0 14px;
    max-width: 720px;
  }
  .bylaws-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 10px;
  }
  .bylaws-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    border-left: 3px solid var(--ink-soft, #b8b0a4);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .bylaws-card[open] { box-shadow: 0 1px 3px rgba(26, 23, 18, 0.06); }
  .bylaws-cat-foundation { border-left-color: #b8916a; }
  .bylaws-cat-runtime    { border-left-color: #4a6b3a; }
  .bylaws-cat-content    { border-left-color: #5a3d7a; }
  .bylaws-cat-data       { border-left-color: #2d5a6b; }

  .bylaws-summary {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .bylaws-summary::-webkit-details-marker { display: none; }
  .bylaws-summary:hover { background: #fafaf6; }

  .bylaws-num {
    font: 500 12px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    letter-spacing: 0.04em;
    min-width: 28px;
  }
  .bylaws-title-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .bylaws-title {
    font: 500 14px/1.3 'Poppins', sans-serif;
    color: var(--ink);
  }
  .bylaws-tagline {
    font: italic 12px/1.4 'Cormorant Garamond', serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .bylaws-cat-tag {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #8a7e6b);
    padding: 4px 8px;
    background: #f5f0e7;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .bylaws-cat-foundation .bylaws-cat-tag { background: #f4e7d6; color: #8b6638; }
  .bylaws-cat-runtime    .bylaws-cat-tag { background: #e6ebe2; color: #4a6b3a; }
  .bylaws-cat-content    .bylaws-cat-tag { background: #ece2f0; color: #5a3d7a; }
  .bylaws-cat-data       .bylaws-cat-tag { background: #dfe9ed; color: #2d5a6b; }
  .bylaws-caret {
    font-size: 12px;
    color: var(--ink-soft, #8a7e6b);
    transition: transform 0.15s ease;
  }
  .bylaws-card[open] .bylaws-caret { transform: rotate(180deg); }

  .bylaws-body {
    padding: 4px 16px 16px 56px;
    border-top: 1px solid var(--border);
    background: #fdfbf6;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .bylaws-rule { padding: 10px 0; }
  .bylaws-rule + .bylaws-rule { border-top: 1px dotted var(--border); }
  .bylaws-rule-title {
    font: 500 13px/1.3 'Poppins', sans-serif;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .bylaws-rule-body {
    font: 400 13px/1.55 'Poppins', sans-serif;
    color: #4a4138;
  }

  @media (max-width: 767px) {
    .bylaws-grid { grid-template-columns: 1fr; }
    .bylaws-summary { grid-template-columns: auto 1fr auto; }
    .bylaws-cat-tag { display: none; }
    .bylaws-body { padding-left: 16px; }
  }

  /* Stat tile grid for the audience overview */
  .settings-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
  .settings-tile {
    padding: 14px 16px;
    background: #faf6ee;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .settings-tile.mood-warn { border-color: #c17f5a55; background: #faf0e6; }
  .settings-tile.mood-bad  { border-color: #c17f5a; background: #f8e6da; }
  .settings-tile-label {
    font: 500 10px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft, #8a7e6b);
    margin-bottom: 8px;
  }
  .settings-tile-value {
    font: 600 22px/1 'Cormorant Garamond', serif;
    color: var(--ink);
  }

  /* Bot identity cards */
  .settings-bots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
  }
  .settings-bot {
    padding: 16px 18px;
    background: #faf6ee;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .settings-bot-name {
    font: 600 15px/1.2 'Cormorant Garamond', serif;
    color: var(--ink);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .settings-bot-row {
    font: 400 12px/1.6 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .settings-bot-row code {
    font: 500 11px/1 'Menlo', 'JetBrains Mono', monospace;
    background: #f0ede4;
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--ink);
  }
  .settings-bot-good {
    font: 500 9px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e6ebe2;
    color: #4a6b3a;
  }
  .settings-bot-warn {
    font: 500 9px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f5e8d4;
    color: #8a6020;
  }
  .settings-bot-bad {
    font: 500 9px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f3d5d5;
    color: #8a3030;
  }

  .settings-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    font: 400 12px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
  }
  .settings-meta-row em { font-style: italic; opacity: 0.7; }

  /* Generic row layout for pacing / integrations sections */
  .settings-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .settings-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .settings-row:last-child { border-bottom: 0; }
  .settings-row-label {
    font: 500 13px/1.3 'Poppins', sans-serif;
    color: var(--ink);
  }
  .settings-row-value {
    font: 400 13px/1.5 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .settings-row-value strong { color: var(--ink); font-weight: 500; }
  .settings-row-value code {
    font: 500 11px/1 'Menlo', 'JetBrains Mono', monospace;
    background: #f0ede4;
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--ink);
  }
  .settings-status-tag {
    font: 500 9px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f5f0e7;
    color: var(--ink-soft, #8a7e6b);
    white-space: nowrap;
  }
  .settings-status-tag.live { background: #e6ebe2; color: #4a6b3a; }
  .settings-status-tag.good { background: #e6ebe2; color: #4a6b3a; }
  .settings-status-tag.planned { background: #f5e8d4; color: #8a6020; }
  .settings-status-tag.warn { background: #f3d5d5; color: #8a3030; }

  @media (max-width: 640px) {
    .settings-row {
      grid-template-columns: 1fr;
      gap: 4px;
      padding: 12px 0;
    }
    .settings-row-label { font-weight: 600; }
    .settings-status-tag { justify-self: start; }
  }

  /* ── Sequence editor (Phase 4.1) ─────────────────────────────── */

  /* Header affordances next to the title — Edit button + dirty-state chip */
  .seq-edit-btn {
    font: 500 11px/1 'Poppins', sans-serif;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
  }
  .seq-edit-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .seq-edit-btn i { font-size: 12px; }

  .seq-unpublished-chip {
    font: 500 9px/1 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f5e8d4;
    color: #8a6020;
    margin-left: 4px;
  }

  /* Editor surface */
  .seq-editor {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
  }
  .seq-editor-banner {
    font: 500 11px/1.4 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .seq-editor-textarea {
    width: 100%;
    min-height: 480px;
    padding: 16px;
    font: 13px/1.5 'Menlo', 'JetBrains Mono', 'Courier New', monospace;
    color: var(--ink);
    background: #faf6ee;
    border: 1px solid var(--border);
    border-radius: 8px;
    resize: vertical;
    box-sizing: border-box;
  }
  .seq-editor-textarea:focus { outline: none; border-color: var(--ink-soft, #8a7e6b); }
  .seq-editor-textarea.invalid { border-color: #c17f5a; background: #faf0e6; }

  .seq-editor-status {
    margin: 10px 0;
    font: 400 12px/1.4 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    min-height: 18px;
  }
  .seq-editor-status.error { color: #c17f5a; }
  .seq-editor-status.success { color: #4a6b3a; }

  .seq-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    align-items: center;
  }
  .seq-editor-toolbar .grow { flex: 1; }
  .seq-editor-meta {
    font: 400 11px/1.4 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
  }

  /* V2 sub-tabs */
  .seq-v2-tabs {
    display: flex;
    gap: 2px;
    background: var(--border);
    border-radius: 8px;
    padding: 2px;
    margin-bottom: 16px;
  }
  .seq-v2-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font: 500 12px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    transition: background 0.15s, color 0.15s;
  }
  .seq-v2-tab:hover { background: rgba(255,255,255,0.6); }
  .seq-v2-tab.active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* V2 list + cards */
  .seq-v2-list { display: flex; flex-direction: column; gap: 8px; }
  .seq-v2-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 8px;
  }
  .seq-v2-list-count {
    font: 500 12px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .seq-v2-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
  }
  .seq-v2-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .seq-v2-card-pos {
    font: 700 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    min-width: 22px;
  }
  .seq-v2-relevance {
    font: 400 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    margin-left: auto;
  }
  .seq-v2-card-priority {
    font: 400 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    margin-left: auto;
  }
  .seq-v2-card-condition {
    font: 400 11px/1.4 'Geist Mono', monospace;
    color: var(--ink-soft, #8a7e6b);
    margin-bottom: 6px;
    word-break: break-all;
  }
  .seq-v2-card-stat {
    font: 400 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
    margin-bottom: 6px;
  }
  .seq-v2-card-time {
    font: 400 11px/1 'Poppins', sans-serif;
    color: var(--ink-soft, #8a7e6b);
  }
  .seq-v2-card-actions {
    display: flex;
    gap: 6px;
  }
  .pill-green { background: #e8f5e1; color: #2d5a1e; }
  .pill-amber { background: #fef3cd; color: #856404; }
  .pill-red { background: #fde8e8; color: #a33; }
  .pill-muted { background: var(--border); color: var(--ink-soft, #8a7e6b); }

/* ════════════════════════════════════════════════════════════════════════
   Newsletter module — list + editor + WYSIWYG
   ════════════════════════════════════════════════════════════════════════ */

#newsletterRoot { max-width: 880px; margin: 0 auto; padding: 0 8px 80px; }

.nl-loading { padding: 60px 0; text-align: center; color: var(--ink-soft, #8a7e6b); }

.nl-empty { padding: 80px 24px; text-align: center; }
.nl-empty-title { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--ink); }
.nl-empty-sub { color: var(--ink-soft, #8a7e6b); margin-top: 8px; }

/* ── List (grid of tiles) ─────────────────────────────────────────────── */
.nl-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.nl-list-empty { padding: 60px 0; text-align: center; color: var(--ink-muted, #b0a898); grid-column: 1 / -1; }
.nl-tile {
  position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.nl-tile:hover {
  transform: translateY(-2px); border-color: #c8bfb1;
  box-shadow: 0 6px 18px rgba(26, 23, 18, .07);
}
.nl-tile-image {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  background: var(--bg-subtle, #f5efe5);
}
.nl-tile-image-empty { background: linear-gradient(135deg, #f0ebe2, #e2d9cb); }
.nl-tile-pill {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(4px);
}
.nl-tile-body { padding: 14px 16px 8px; flex: 1; }
.nl-tile-title {
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600;
  line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nl-tile-preview {
  margin-top: 8px; font-size: 13px; color: var(--ink-muted, #b0a898); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nl-tile-date {
  padding: 6px 16px 14px; font-family: 'Cormorant Garamond', serif;
  font-size: 16px; color: var(--ink); line-height: 1;
}

/* ── Filter bar ───────────────────────────────────────────────────────── */
.nl-filter-search { position: relative; flex: 1; min-width: 220px; }
.nl-filter-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-muted, #b0a898); font-size: 16px;
}
.nl-filter-search-input {
  width: 100%; box-sizing: border-box; padding: 9px 12px 9px 36px;
  font-family: 'Poppins', sans-serif; font-size: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px; color: var(--ink);
}
.nl-filter-search-input:focus { outline: none; border-color: #c8bfb1; }
.nl-filter-select {
  padding: 9px 30px 9px 14px;
  font-family: 'Poppins', sans-serif; font-size: 13px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%23b0a898' d='M5 7L1.5 3.5h7z'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.nl-filter-select:focus { outline: none; border-color: #c8bfb1; }
.nl-filter-count {
  font-size: 12px; color: var(--ink-muted, #b0a898);
  font-family: 'Poppins', sans-serif; margin-left: auto;
}

/* ── Back link in editor ──────────────────────────────────────────────── */
.nl-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 4px 0;
  font-family: 'Poppins', sans-serif; font-size: 13px;
  color: var(--ink-muted, #b0a898); cursor: pointer; margin-bottom: 4px;
}
.nl-back-link:hover { color: var(--ink); }
.nl-back-link i { font-size: 14px; }

/* Status pill */
.nl-pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-family: 'Poppins', sans-serif; font-weight: 500;
}
.nl-pill-draft     { background: #f0ebe2; color: #8a7e6b; }
.nl-pill-scheduled { background: #fef3cd; color: #856404; }
.nl-pill-published { background: #e8f5e1; color: #2d5a1e; }
.nl-pill-unpublished { background: #fde8e8; color: #a33; }

/* ── Editor header ─────────────────────────────────────────────────────── */
.nl-editor-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 10px;
}
.nl-editor-header-left { display: flex; align-items: center; gap: 12px; }
.nl-editor-header-right { display: flex; align-items: center; gap: 10px; }
.nl-editor-date {
  font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 1;
  color: var(--ink); cursor: pointer; padding: 0 2px;
  border-bottom: 1px dashed transparent; transition: border-color .15s;
}
.nl-editor-date:hover { border-bottom-color: #c8bfb1; }
.nl-editor-date-input {
  display: none; font-family: 'Poppins', sans-serif; font-size: 14px;
  border: 1px solid var(--border); padding: 6px 10px; border-radius: 4px;
}
.nl-save-indicator { font-size: 12px; color: var(--ink-soft, #8a7e6b); font-family: 'Poppins', sans-serif; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.nl-card {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 18px 22px; margin-bottom: 14px;
}
.nl-card-label {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft, #8a7e6b); margin-bottom: 10px;
}
.nl-card-body { color: var(--ink); }

/* ── Group sections ────────────────────────────────────────────────────── */
.nl-group { margin-top: 36px; }
.nl-group-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 32px; color: var(--ink); margin: 0 0 16px 4px;
}

/* ── Inputs / textareas ────────────────────────────────────────────────── */
.nl-input, .nl-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  font-family: 'Poppins', sans-serif; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid transparent; border-radius: 4px;
  transition: border-color .15s, background .15s;
}
.nl-input:focus, .nl-textarea:focus {
  outline: none; border-color: #c8bfb1; background: #fffdf8;
}
.nl-input-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; }
.nl-input-quiet { color: var(--ink-soft, #8a7e6b); font-size: 14px; }
.nl-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }

/* ── WYSIWYG ──────────────────────────────────────────────────────────── */
.nl-wysiwyg { display: flex; flex-direction: column; }
.nl-toolbar {
  display: flex; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.nl-toolbar button {
  background: transparent; border: 1px solid transparent; cursor: pointer;
  padding: 4px 10px; border-radius: 4px; font-size: 13px; font-family: 'Poppins', sans-serif;
  color: var(--ink-soft, #8a7e6b); transition: background .15s, color .15s;
}
.nl-toolbar button:hover { background: #f0ebe2; color: var(--ink); }
.nl-rte {
  min-height: 80px; padding: 8px 4px; line-height: 1.65; font-size: 15px;
  color: var(--ink); outline: none; font-family: 'Poppins', sans-serif;
}
.nl-rte:focus { outline: none; }
.nl-rte p { margin: 0 0 12px; }
.nl-rte a { color: #6a4f8a; text-decoration: underline; }
.nl-rte ul, .nl-rte ol { padding-left: 22px; margin: 0 0 12px; }
.nl-rte:empty::before {
  content: 'Start writing…'; color: var(--ink-soft, #8a7e6b); font-style: italic;
}

/* ── Drop zones (image + audio) ───────────────────────────────────────── */
.nl-drop {
  position: relative; border: 1px dashed #d4cab9; border-radius: 6px;
  padding: 14px; transition: border-color .15s, background .15s;
}
.nl-drop-over { border-color: #6a4f8a; background: #faf5fd; }
.nl-drop-empty { padding: 24px; text-align: center; cursor: pointer; }
.nl-drop-empty-title { color: var(--ink); font-size: 14px; }
.nl-drop-empty-sub { color: var(--ink-soft, #8a7e6b); font-size: 12px; margin-top: 4px; }
.nl-drop-preview { width: 100%; max-height: 320px; object-fit: cover; border-radius: 4px; display: block; }
.nl-drop-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.nl-file-input { display: none; }

/* ── Audio rows ───────────────────────────────────────────────────────── */
.nl-audio-row { display: flex; gap: 14px; align-items: flex-start; }
.nl-audio-player { flex-shrink: 0; height: 40px; }
.nl-audio-meta { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.nl-audio-duration { font-size: 12px; color: var(--ink-soft, #8a7e6b); font-family: 'Poppins', sans-serif; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.nl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--ink);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.nl-btn:hover { background: #faf5ec; }
.nl-btn i { font-size: 14px; }

.nl-btn-secondary { background: #fff; border-color: var(--border); color: var(--ink); }
.nl-btn-publish {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  padding: 8px 22px;
}
.nl-btn-publish:hover { opacity: .85; background: var(--ink); }

.nl-btn-back { color: var(--ink-muted, #b0a898); border-color: transparent; background: transparent; }
.nl-btn-back:hover { background: #f5efe5; color: var(--ink); border-color: transparent; }

.nl-btn-delete {
  color: #a33; border-color: #ecd4d4; background: #fdf6f6;
}
.nl-btn-delete:hover { background: #f9e8e8; border-color: #d99; color: #822; }

/* ── Footer actions ───────────────────────────────────────────────────── */
.nl-footer-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border);
}
.nl-danger { color: #a33 !important; }

/* Newsletter — publish banner */
.nl-publish-banner {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  margin-bottom: 18px; padding: 10px 14px;
  background: #f5efe5; border-radius: 6px;
  font-size: 12px; font-family: 'Poppins', sans-serif;
}
.nl-publish-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--border);
}
.nl-publish-link:hover { border-bottom-color: var(--ink); }
.nl-publish-link i { font-size: 14px; }
.nl-publish-sched { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted, #b0a898); }
.nl-publish-sched i { font-size: 14px; }

/* ── Newsletter — Telegram preview ──────────────────────────────────────── */
.nl-tg-preview { background: #f5efe5; border-color: #e8e2da; }
.nl-tg-preview-sub { font-weight: 400; color: var(--ink-muted, #b0a898); text-transform: none; letter-spacing: 0; margin-left: 8px; font-size: 11px; }

.nl-tg-bubbles { display: flex; flex-direction: column; gap: 8px; max-width: 480px; margin: 0 auto; }

.nl-tg-bubble {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; line-height: 1.45;
}

/* Audio bubble */
.nl-tg-bubble-audio { display: flex; align-items: center; gap: 12px; }
.nl-tg-bubble-audio.nl-tg-empty { opacity: .5; }
.nl-tg-audio-icon { color: #2aabee; font-size: 32px; line-height: 1; display: flex; }
.nl-tg-audio-icon i { font-size: 32px; }
.nl-tg-audio-meta { flex: 1; min-width: 0; }
.nl-tg-audio-title { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-tg-audio-sub { font-size: 12px; color: var(--ink-muted, #b0a898); }

/* Photo bubble */
.nl-tg-bubble-photo { padding: 0; overflow: hidden; }
.nl-tg-photo { display: block; width: 100%; max-height: 280px; object-fit: cover; }
.nl-tg-photo-placeholder {
  background: #f0ebe2; color: var(--ink-muted, #b0a898);
  padding: 36px 16px; text-align: center; font-size: 12px;
}
.nl-tg-caption {
  padding: 10px 14px 4px; color: var(--ink); font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; word-wrap: break-word;
}
.nl-tg-caption code {
  display: inline-block; background: #f5efe5; padding: 2px 6px; border-radius: 3px;
  font-family: 'JetBrains Mono', 'Geist Mono', monospace; font-size: 12px;
}
.nl-tg-caption b { font-weight: 600; }
.nl-tg-caption i { font-style: italic; }
.nl-tg-button {
  display: block; padding: 10px 14px; margin: 4px;
  background: #f5efe5; color: #2aabee; text-align: center;
  border-radius: 8px; font-weight: 500; font-size: 14px;
  cursor: default;
}

/* Template editor disclosure */
.nl-tg-template-edit { margin-top: 16px; }
.nl-tg-template-edit summary {
  cursor: pointer; padding: 6px 0; color: var(--ink-muted, #b0a898);
  font-size: 12px; user-select: none;
}
.nl-tg-template-edit[open] summary { color: var(--ink); }
.nl-tg-template-form { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.nl-tg-template-label {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted, #b0a898); margin-top: 4px;
}
.nl-tg-template-area {
  width: 100%; box-sizing: border-box; min-height: 120px;
  font-family: 'JetBrains Mono', 'Geist Mono', monospace; font-size: 13px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; resize: vertical; line-height: 1.5;
}
.nl-tg-template-area:focus { outline: none; border-color: #c8bfb1; }
.nl-tg-template-vars { font-size: 11px; color: var(--ink-muted, #b0a898); }
.nl-tg-template-vars code {
  background: #fff; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.nl-tg-template-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* ── Newsletter — import bar ────────────────────────────────────────────── */
.nl-import-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 14px;
  background: #f5efe5; border: 1px dashed #d4cab9; border-radius: 6px;
}
.nl-import-bar .nl-btn { flex-shrink: 0; }
.nl-import-hint {
  color: var(--ink-muted, #b0a898); font-size: 12px;
  font-family: 'Poppins', sans-serif; flex: 1;
}
.nl-empty .nl-import-bar { margin-top: 32px; }

/* ── Newsletter — sticky back arrow in dashboard header ────────────────── */
.nl-header-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-muted, #b0a898); cursor: pointer;
  margin-right: 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.nl-header-back:hover { background: #f5efe5; color: var(--ink); border-color: #c8bfb1; }
.nl-header-back i { font-size: 16px; }

  /* ── Audience subscriber detail v2 — at-a-glance redesign ─────────── */
  .audience-headline { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 12px 16px; background: #fafaf7; border: 1px solid var(--border, #e8e2da); border-radius: 10px; margin: 16px 0 18px; font-size: 13px; color: #6b6259; }
  .audience-headline b { color: var(--ink, #1a1712); font-weight: 600; }
  .audience-headline-sep { color: #cfc6b8; }

  .audience-primary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 24px; }
  .audience-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e8e2da); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
  .audience-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #9e948a; font-weight: 600; }
  .audience-card-head i { margin-right: 5px; font-size: 13px; }
  .audience-card-empty { font-size: 12px; color: #9e948a; padding: 6px 0; font-style: italic; }
  .audience-card-note { font-size: 11px; color: #9e948a; margin-top: 4px; }
  .audience-card-subhead { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #9e948a; margin-top: 8px; font-weight: 600; }
  .audience-card-action { background: transparent; border: none; padding: 4px 0 0; color: var(--accent); font-size: 12px; cursor: pointer; text-align: left; align-self: flex-start; }
  .audience-card-action:hover { text-decoration: underline; }

  /* Drishti chat card */
  .audience-card-chat { display: flex; flex-direction: column; gap: 4px; }
  .audience-chat-line { font-size: 12px; line-height: 1.4; padding: 4px 8px; border-radius: 6px; }
  .audience-chat-line.is-user { background: #f5f2ee; }
  .audience-chat-line.is-dristi { background: var(--accent-bg); }
  .audience-chat-role { font-weight: 600; color: var(--accent); margin-right: 4px; }
  .audience-chat-text { color: var(--ink, #1a1712); }
  .audience-conf-badge { font-size: 9px; font-weight: 500; padding: 2px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
  .audience-conf-badge.is-high   { background: #e8f5e8; color: #1f6b3d; }
  .audience-conf-badge.is-medium { background: #fff4e0; color: #8a5a1a; }
  .audience-conf-badge.is-low    { background: #fde8e8; color: #b04444; }

  /* Interests card */
  .audience-interest-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .audience-interest-chip { display: inline-flex; align-items: center; gap: 4px; background: #f5f2ee; border: 1px solid var(--border, #e8e2da); border-radius: 999px; padding: 4px 10px; font-size: 11px; color: var(--ink, #1a1712); }
  .audience-interest-chip i { font-size: 12px; color: #9e948a; }

  /* Money & coupons card */
  .audience-money-total { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--ink, #1a1712); line-height: 1; }
  .audience-money-total span { font-family: 'DM Sans', sans-serif; font-size: 11px; color: #9e948a; text-transform: uppercase; letter-spacing: 0.08em; margin-left: 4px; font-weight: 500; }
  .audience-money-list { display: flex; flex-direction: column; gap: 4px; }
  .audience-money-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink, #1a1712); padding: 4px 0; border-bottom: 1px dashed var(--border, #e8e2da); }
  .audience-money-row:last-child { border-bottom: none; }
  .audience-money-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .audience-money-label code { font-family: 'Geist Mono', monospace; font-size: 11px; background: #f5f2ee; padding: 1px 5px; border-radius: 4px; }
  .audience-money-amount { color: #6b6259; font-variant-numeric: tabular-nums; font-size: 11px; }
  .audience-money-refund { font-size: 9px; color: #b04444; text-transform: uppercase; letter-spacing: 0.05em; }

  /* Collapsible deep-dive sections */
  .audience-collapsible { border: 1px solid var(--border, #e8e2da); border-radius: 10px; margin-bottom: 8px; background: var(--card-bg, #fff); }
  .audience-collapsible[open] { background: #fafaf7; }
  .audience-collapsible-summary { cursor: pointer; padding: 12px 16px; font-size: 13px; color: var(--ink, #1a1712); list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
  .audience-collapsible-summary::-webkit-details-marker { display: none; }
  .audience-collapsible-summary i { color: #9e948a; }
  .audience-collapsible-summary .audience-section-count { margin-left: auto; font-size: 11px; color: #9e948a; }
  .audience-collapsible-body { padding: 0 16px 14px; }

  /* Audience subscriber detail v2 — round 2 additions */
  .audience-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
  .audience-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--card-bg, #fff); border: 1px solid var(--border, #e8e2da); border-radius: 999px; font-size: 12px; color: var(--ink, #1a1712); cursor: pointer; transition: background 0.12s, border-color 0.12s; text-decoration: none; }
  .audience-action:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
  .audience-action i { font-size: 13px; }

  .audience-timeline-section { background: var(--card-bg, #fff); border: 1px solid var(--border, #e8e2da); border-radius: 12px; padding: 14px 16px; margin: 18px 0; }
  .audience-timeline-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #9e948a; font-weight: 600; }
  .audience-timeline-head i { margin-right: 5px; font-size: 13px; }
  .audience-timeline-count { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: #9e948a; }
  .audience-timeline-list { display: flex; flex-direction: column; gap: 2px; max-height: 480px; overflow-y: auto; }
  .audience-timeline-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 7px 6px; border-radius: 6px; transition: background 0.12s; }
  .audience-timeline-row:hover { background: #fafaf7; }
  .audience-timeline-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #f5f2ee; border-radius: 6px; color: #6b6259; }
  .audience-timeline-icon i { font-size: 12px; }
  .audience-timeline-label { font-size: 12.5px; color: var(--ink, #1a1712); line-height: 1.4; min-width: 0; }
  .audience-timeline-label code { font-family: 'Geist Mono', monospace; font-size: 11px; background: #f5f2ee; padding: 1px 5px; border-radius: 4px; }
  .audience-timeline-label b { font-weight: 600; }
  .audience-timeline-time { font-size: 11px; color: #9e948a; white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* Operator notes pinned in subscriber detail header */
  .audience-notes { background: #fff8e8; border: 1px solid rgba(184, 138, 33, 0.18); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
  .audience-notes-label { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #8a6720; font-weight: 600; margin-bottom: 6px; }
  .audience-notes-label i { font-size: 13px; }
  .audience-notes-hint { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; color: #b89a5c; font-size: 11px; }
  .audience-notes-textarea { width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid rgba(184, 138, 33, 0.18); border-radius: 6px; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--ink, #1a1712); background: #fff; resize: vertical; box-sizing: border-box; outline: none; transition: border-color 0.12s; }
  .audience-notes-textarea:focus { border-color: #b89a5c; }
  .audience-notes-textarea::placeholder { color: #b89a5c; opacity: 0.7; }

  /* Engagement sparkline in headline */
  .audience-sparkline { display: inline-flex; align-items: center; margin-left: auto; padding-left: 12px; cursor: help; }
  .audience-sparkline svg { display: block; }

  /* Drishti DM list in subscriber detail */
  .audience-dm-list { display: flex; flex-direction: column; gap: 8px; }
  .audience-dm-row { padding: 10px 12px; background: #fafaf7; border: 1px solid var(--border, #e8e2da); border-radius: 8px; }
  .audience-dm-meta { display: flex; justify-content: space-between; margin-bottom: 4px; }
  .audience-dm-time { font-size: 11px; color: #9e948a; font-variant-numeric: tabular-nums; }
  .audience-dm-text { font-size: 13px; color: var(--ink, #1a1712); line-height: 1.4; white-space: pre-wrap; }

  /* Inline-editable name + email on subscriber detail */
  .audience-edit-btn { background: transparent; border: none; padding: 4px; margin-left: 6px; cursor: pointer; color: #9e948a; opacity: 0; transition: opacity 0.12s, color 0.12s; vertical-align: middle; }
  .audience-detail-name:hover .audience-edit-btn { opacity: 1; }
  .audience-edit-btn:hover { color: var(--accent); }
  .audience-edit-btn i { font-size: 14px; }
  .audience-meta-editable { cursor: pointer; transition: color 0.12s; }
  .audience-meta-editable:hover { color: var(--accent); }
  .audience-meta-add { color: #9e948a; font-style: italic; }
  .audience-meta-add:hover { color: var(--accent); font-style: normal; }

  @media (max-width: 767px) {
    .seq-shell {
      gap: 18px;
    }

    .seq-frame {
      border-radius: 16px;
      min-height: 64px;
      padding: 10px;
    }

    .seq-frame-pinned {
      width: auto;
    }

    .seq-frame-label {
      margin-right: 2px;
    }

    .seq-frame-pills {
      scroll-padding-inline: 6px;
      scroll-snap-type: x proximity;
      -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
      mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
      -webkit-overflow-scrolling: touch;
    }

    .seq-pill {
      min-height: 40px;
      padding: 0 14px;
      scroll-snap-align: start;
      touch-action: manipulation;
    }

    .seq-pinned-icon,
    .seq-tier-add,
    .seq-detail-icon {
      height: 44px;
      width: 44px;
      touch-action: manipulation;
    }

    .seq-schedule-head,
    .seq-detail-titlerow,
    .seq-schedule-row summary,
    .nl-footer-actions,
    .nl-import-bar,
    .nl-tg-template-actions,
    .audience-toolbar,
    .audience-unmatched-row,
    .audience-unmatched-line1,
    .audience-money-row,
    .audience-timeline-head {
      align-items: stretch;
      flex-direction: column;
    }

    .seq-schedule-count,
    .seq-schedule-tag,
    .audience-count,
    .audience-sparkline {
      align-self: flex-start;
      margin-left: 0;
    }

    .seq-detail-title {
      font-size: 26px;
      overflow-wrap: anywhere;
    }

    .audience-shell {
      height: auto;
      min-height: 0;
    }

    .audience-filter-chips,
    .audience-quick-actions {
      flex-wrap: nowrap;
      margin: 0 -20px;
      overflow-x: auto;
      padding: 0 20px 4px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .audience-filter-chips::-webkit-scrollbar,
    .audience-quick-actions::-webkit-scrollbar {
      display: none;
    }

    .audience-row,
    .audience-action,
    .audience-unmatched-btn,
    .nl-btn,
    .nl-tg-template-edit summary {
      min-height: 44px;
      touch-action: manipulation;
    }

    .audience-search {
      flex-basis: auto;
      max-width: none;
      width: 100%;
    }

    .audience-search input {
      min-height: 44px;
    }

    .audience-timeline-row {
      grid-template-columns: 28px minmax(0, 1fr);
    }

    .audience-timeline-time {
      grid-column: 2;
      white-space: normal;
    }

    .nl-audio-row {
      flex-direction: column;
    }

    .nl-audio-player {
      width: 100%;
    }
  }