/* Instagram Campaigns — ig-campaigns.css
   Extends wa-campaigns.css / drip-* primitives with Instagram accent colours and
   IG-specific layout. Use igc- prefix on all class names added here.
   --igc-accent  : Instagram magenta
   --igc-deep    : darker magenta for pressed states
   --igc-soft    : low-opacity magenta fill
   --igc-ring    : focus ring
*/

/* ═══════════════════════════════════════
   Root tokens — Day
═══════════════════════════════════════ */
.igc {
  --d-surface   : linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.90));
  --d-tile      : rgba(255,255,255,.72);
  --d-col       : rgba(241,245,249,.62);
  --d-card      : #fff;
  --d-line      : rgba(15,23,42,.07);
  --d-line-strong: rgba(15,23,42,.11);
  --d-hi        : rgba(255,255,255,.95);
  --d-txt       : #0F172A;
  --d-txt-2     : #475569;
  --d-txt-3     : #94A3B8;
  --d-shadow    : 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -24px rgba(15,23,42,.28);
  --d-ease      : cubic-bezier(.2,.8,.2,1);
  --igc-accent  : #8134AF;
  --igc-deep    : #6A2793;
  --igc-soft    : rgba(129,52,175, 0.10);
  --igc-ring    : rgba(129,52,175, 0.30);
  --igc-grad    : linear-gradient(135deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%);
  --igc-meter   : linear-gradient(90deg, #A65BD0, #8134AF);
  --igc-accent-n: #B57EDC;
  --igc-soft-n  : rgba(181,126,220, 0.16);
}

/* Night overrides */
html.theme-night .igc {
  --d-surface   : linear-gradient(180deg, rgba(17,27,46,.86), rgba(11,19,34,.86));
  --d-tile      : rgba(255,255,255,.035);
  --d-col       : rgba(255,255,255,.025);
  --d-card      : rgba(22,33,54,.95);
  --d-line      : rgba(255,255,255,.07);
  --d-line-strong: rgba(255,255,255,.12);
  --d-hi        : rgba(255,255,255,.04);
  --d-txt       : #F1F5F9;
  --d-txt-2     : rgba(203,213,225,.82);
  --d-txt-3     : rgba(148,163,184,.72);
  --d-shadow    : 0 24px 50px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(181,126,220,.04);
  --igc-accent  : #B57EDC;
  --igc-deep    : #8134AF;
  --igc-soft    : rgba(181,126,220, 0.16);
  --igc-ring    : rgba(181,126,220, 0.30);
}
:root[data-theme="dark"] .igc {
  --d-surface   : linear-gradient(180deg, rgba(17,27,46,.86), rgba(11,19,34,.86));
  --d-tile      : rgba(255,255,255,.035);
  --d-col       : rgba(255,255,255,.025);
  --d-card      : rgba(22,33,54,.95);
  --d-line      : rgba(255,255,255,.07);
  --d-line-strong: rgba(255,255,255,.12);
  --d-hi        : rgba(255,255,255,.04);
  --d-txt       : #F1F5F9;
  --d-txt-2     : rgba(203,213,225,.82);
  --d-txt-3     : rgba(148,163,184,.72);
  --d-shadow    : 0 24px 50px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(181,126,220,.04);
  --igc-accent  : #B57EDC;
  --igc-deep    : #8134AF;
  --igc-soft    : rgba(181,126,220, 0.16);
  --igc-ring    : rgba(181,126,220, 0.30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .igc {
    --igc-accent  : #B57EDC;
    --igc-deep    : #8134AF;
    --igc-soft    : rgba(181,126,220, 0.16);
    --igc-ring    : rgba(181,126,220, 0.30);
  }
}

/* ═══════════════════════════════════════
   Shell
═══════════════════════════════════════ */
.igc {
  display     : flex;
  flex-direction: column;
  gap         : 20px;
  padding-bottom: 48px;
}

/* ═══════════════════════════════════════
   Channel bar / head
═══════════════════════════════════════ */
.igc-head { margin-bottom: 4px; }

/* Active Instagram channel pill */
.igc-chan.is-active {
  background : var(--igc-soft);
  color      : var(--igc-accent);
  border-color: var(--igc-ring);
}
.igc-chan.is-active svg { color: var(--igc-accent); }

.igc-head__acts {
  display    : flex;
  align-items: center;
  gap        : 8px;
  margin-top : 12px;
}

/* ═══════════════════════════════════════
   Campaign list
═══════════════════════════════════════ */
.igc-list {
  list-style: none;
  margin    : 0;
  padding   : 0;
  display   : flex;
  flex-direction: column;
  gap       : 10px;
}

.igc-camp {
  background   : var(--d-tile, #fff);
  border       : 1px solid var(--d-line, rgba(0,0,0,.08));
  border-radius: 16px;
  padding      : 16px 18px;
  cursor       : pointer;
  transition   : box-shadow .18s var(--d-ease, cubic-bezier(.2,.8,.2,1)),
                 transform  .18s var(--d-ease, cubic-bezier(.2,.8,.2,1));
  animation    : igcCampIn .32s var(--d-ease, cubic-bezier(.2,.8,.2,1)) calc(var(--i, 0) * 35ms) both;
}
.igc-camp:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-1px); }
.igc-camp:active { transform: scale(.993); }

.igc-camp__top {
  display    : flex;
  align-items: center;
  gap        : 14px;
}

.igc-camp__badge {
  width        : 44px;
  height       : 44px;
  border-radius: 12px;
  background   : var(--igc-grad);
  display      : flex;
  align-items  : center;
  justify-content: center;
  flex-shrink  : 0;
  color        : #fff;
}
.igc-camp__badge svg { width: 20px; height: 20px; }
.igc-camp__badge--live   { background: var(--igc-grad); }
.igc-camp__badge--paused { background: var(--d-tile, #f8f8f8); color: var(--d-txt-2); border: 1px solid var(--d-line); }

.igc-camp__main { flex: 1; min-width: 0; }
.igc-camp__name {
  font-size  : 15px;
  font-weight: 600;
  color      : var(--d-txt);
  white-space: nowrap;
  overflow   : hidden;
  text-overflow: ellipsis;
}
.igc-camp__meta {
  font-size: 12px;
  color    : var(--d-txt-3);
  margin-top: 2px;
}

.igc-camp__nums {
  display: flex;
  gap    : 20px;
  flex-shrink: 0;
}
.igc-camp__nums span {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 1px;
}
.igc-camp__nums b  { font-size: 15px; font-weight: 700; color: var(--d-txt); }
.igc-camp__nums em { font-size: 11px; font-style: normal; color: var(--d-txt-3); }

.igc-camp__warn {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : 12px;
  color      : #E53E3E;
  margin-top : 10px;
  padding-top: 10px;
  border-top : 1px solid var(--d-line);
}
.igc-camp__warn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ═══════════════════════════════════════
   Empty state
═══════════════════════════════════════ */
.igc-empty {
  text-align : center;
  padding    : 56px 24px;
  display    : flex;
  flex-direction: column;
  align-items: center;
  gap        : 10px;
}
.igc-empty__icon {
  width        : 56px;
  height       : 56px;
  border-radius: 16px;
  background   : var(--igc-grad);
  display      : flex;
  align-items  : center;
  justify-content: center;
  color        : #fff;
  margin-bottom: 8px;
}
.igc-empty__icon svg { width: 28px; height: 28px; }
.igc-empty__title { font-size: 17px; font-weight: 700; color: var(--d-txt); margin: 0; }
.igc-empty__text  { font-size: 14px; color: var(--d-txt-3); margin: 0 0 8px; max-width: 340px; }

/* ═══════════════════════════════════════
   HUD beacon (Instagram glyph on gradient)
═══════════════════════════════════════ */
.igc-hud .drip-hud__beacon {
  background   : var(--igc-grad);
  position     : relative;
}
/* IG icon via SVG data URI on ::before */
.igc-hud .drip-hud__beacon::before {
  content : '';
  display : block;
  position: absolute;
  inset   : 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2c2.7 0 3 0 4.1.1 1 0 1.7.2 2.3.4.6.3 1.1.6 1.6 1.1.5.5.8 1 1.1 1.6.2.6.4 1.3.4 2.3.1 1.1.1 1.4.1 4.1s0 3-.1 4.1c0 1-.2 1.7-.4 2.3a4.6 4.6 0 0 1-1.1 1.6 4.6 4.6 0 0 1-1.6 1.1c-.6.2-1.3.4-2.3.4-1.1.1-1.4.1-4.1.1s-3 0-4.1-.1c-1 0-1.7-.2-2.3-.4a4.6 4.6 0 0 1-1.6-1.1 4.6 4.6 0 0 1-1.1-1.6c-.2-.6-.4-1.3-.4-2.3C2 15 2 14.7 2 12s0-3 .1-4.1c0-1 .2-1.7.4-2.3A4.6 4.6 0 0 1 3.6 4a4.6 4.6 0 0 1 1.6-1.1c.6-.2 1.3-.4 2.3-.4C8.6 2 9 2 12 2Zm0 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 8.2A3.2 3.2 0 1 1 12 8.8a3.2 3.2 0 0 1 0 6.4ZM17.4 5.4a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* Running ping dot: Instagram magenta */
.igc-hud.drip-hud--running .drip-hud__beacon::after {
  background: var(--igc-accent);
  box-shadow: 0 0 0 2px var(--d-surface, #fff);
}

/* ═══════════════════════════════════════
   Stats strip
═══════════════════════════════════════ */
.igc-strip {
  display    : flex;
  align-items: center;
  flex-wrap  : wrap;
  gap        : 0;
  border-top : 1px solid var(--d-line, rgba(0,0,0,.07));
  margin-top : 14px;
  padding-top: 14px;
}
.igc-strip__it {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  flex           : 1 1 72px;
  gap            : 2px;
  padding        : 4px 8px;
  border-right   : 1px solid var(--d-line, rgba(0,0,0,.07));
}
.igc-strip__it:last-of-type { border-right: none; }
.igc-strip__it b  { font-size: 18px; font-weight: 700; color: var(--d-txt); }
.igc-strip__it span { font-size: 11px; color: var(--d-txt-3); }
.igc-strip__it--accent b { color: var(--igc-accent); }
.igc-strip__today {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex       : 1 1 auto;
  padding    : 4px 12px;
  font-size  : 12px;
  color      : var(--d-txt-2);
}
.igc-strip__today span { color: var(--d-txt-3); }
.igc-strip__today b    { font-size: 13px; font-weight: 600; }
.igc-strip__today small { font-size: 11px; color: var(--d-txt-3); font-weight: 400; }

/* Account pill in HUD eyebrow */
.igc-acct-pill {
  display    : inline-flex;
  align-items: center;
  gap        : 4px;
  background : var(--igc-soft);
  border     : 1px solid var(--igc-ring);
  border-radius: 20px;
  padding    : 2px 8px 2px 6px;
  font-size  : 11px;
  font-weight: 600;
  color      : var(--igc-accent);
}
.igc-acct-pill svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════
   Back row + section surfaces
═══════════════════════════════════════ */
.igc-back-row { margin-bottom: 4px; }
.igc-back {
  display    : inline-flex;
  align-items: center;
  gap        : 5px;
  background : none;
  border     : none;
  padding    : 6px 2px;
  font-size  : 13px;
  font-weight: 500;
  color      : var(--d-txt-2);
  cursor     : pointer;
  border-radius: 8px;
  transition : color .15s;
}
.igc-back:hover { color: var(--d-txt); }
.igc-back svg   { width: 18px; height: 18px; }

.igc-sec {
  background   : var(--d-tile, #fff);
  border       : 1px solid var(--d-line, rgba(0,0,0,.08));
  border-radius: 22px;
  padding      : 24px;
}
.igc-sec--board { padding: 20px 20px 24px; }
.igc-sec__head  { margin-bottom: 20px; }
.igc-sec__title { font-size: 16px; font-weight: 700; color: var(--d-txt); margin: 0 0 4px; }
.igc-sec__sub   { font-size: 13px; color: var(--d-txt-3); margin: 0; }

/* ═══════════════════════════════════════
   Tab bar
═══════════════════════════════════════ */
.igc-tabbar {
  display    : flex;
  gap        : 2px;
  padding    : 4px;
  background : var(--d-col, rgba(0,0,0,.04));
  border-radius: 14px;
  margin-bottom: 14px;
}
.igc-tab {
  flex       : 1;
  display    : flex;
  align-items: center;
  justify-content: center;
  gap        : 6px;
  padding    : 8px 12px;
  border     : none;
  background : none;
  border-radius: 10px;
  font-size  : 13px;
  font-weight: 500;
  color      : var(--d-txt-2);
  cursor     : pointer;
  transition : background .18s, color .18s, box-shadow .18s;
}
.igc-tab svg { width: 15px; height: 15px; }
.igc-tab:hover  { background: rgba(0,0,0,.04); color: var(--d-txt); }
.igc-tab.is-active {
  background : var(--d-tile, #fff);
  color      : var(--igc-accent);
  box-shadow : 0 1px 4px rgba(0,0,0,.12);
}

/* Tab panel visibility */
.igc-tabpanel { display: none; }
.igc-tabs[data-tab="people"]   #igc-panel-people   { display: block; }
.igc-tabs[data-tab="sequence"] #igc-panel-sequence { display: block; }
.igc-tabs[data-tab="progress"] #igc-panel-progress { display: block; }

/* ═══════════════════════════════════════
   Sequence builder. Shares LinkedIn's lic-* rail, composer and
   preview thread; only the Instagram extras live here.
═══════════════════════════════════════ */
.igc.lic [data-igc-seq] > .igc-sec {
  padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
}
.igc-seq__preview { display: contents; }
.igc-seq__locked {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--d-txt-3); margin: 0 0 14px;
}
.igc-seq__locked svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Follow / DM segmented toggle */
.igc-kind {
  display: inline-flex; padding: 2px; gap: 2px;
  border-radius: 9px; background: var(--d-col, rgba(0,0,0,.04));
  box-shadow: inset 0 0 0 1px var(--d-line);
}
.igc-kind__btn {
  border: 0; background: none; cursor: pointer;
  padding: 3px 10px; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--d-txt-3);
  transition: background .2s cubic-bezier(.2,.8,.2,1), color .2s, box-shadow .2s, transform .12s;
}
.igc-kind__btn:hover { color: var(--d-txt); }
.igc-kind__btn:active { transform: scale(.96); }
.igc-kind__btn.is-on {
  background: var(--d-tile, #fff); color: var(--li-blue);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}

/* Follow step row */
.igc-follow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.igc-follow__ic {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF);
}
.igc-follow__ic svg { width: 15px; height: 15px; }
.igc-follow__txt { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--d-txt-3); }
.igc-follow__txt b { font-size: 13px; font-weight: 600; color: var(--d-txt); }

/* A/B variants */
.igc-variants { display: flex; flex-direction: column; gap: 10px; }
.igc-variant__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.igc-variant__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--li-blue);
}
.igc-addvar {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; padding: 4px 2px;
  font-size: 12px; font-weight: 600; color: var(--li-blue);
  transition: opacity .2s, transform .12s;
}
.igc-addvar:hover { opacity: .8; }
.igc-addvar:active { transform: scale(.97); }
.igc-addvar svg { width: 13px; height: 13px; }
.igc-addvar em { font-style: normal; font-weight: 500; color: var(--d-txt-3); }

/* Two add buttons side by side under the rail */
.igc-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 42px; }
.igc-add .lic-add-step { margin: 0; }

/* Preview thread extras */
.igc .lic-preview__av.igc-preview__av { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); color: #fff; }
.igc-pv-chip {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--li-blue);
  background: var(--li-soft); box-shadow: inset 0 0 0 1px var(--li-ring);
  transition: box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
.igc-pv-chip svg { width: 13px; height: 13px; }
.igc-pv-chip.is-focus { box-shadow: inset 0 0 0 1px var(--li-blue), 0 0 0 3px var(--li-ring); }

/* ═══════════════════════════════════════
   People tab
═══════════════════════════════════════ */
.igc-people__bar {
  display    : flex;
  align-items: center;
  flex-wrap  : wrap;
  gap        : 10px;
  margin-bottom: 14px;
}
.igc-addbar {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex-wrap  : wrap;
}
.igc-addbar__label {
  display    : inline-flex;
  align-items: center;
  gap        : 5px;
  font-size  : 12px;
  font-weight: 600;
  color      : var(--d-txt-3);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.igc-addbar__label svg { width: 13px; height: 13px; }
.igc-sources {
  display    : flex;
  gap        : 8px;
  margin-top : 12px;
  flex-wrap  : wrap;
}

.igc-people__find {
  display    : flex;
  align-items: center;
  gap        : 6px;
  margin-left: auto;
  background : var(--d-col, rgba(0,0,0,.04));
  border-radius: 20px;
  padding    : 5px 12px;
}
.igc-people__find svg { width: 15px; height: 15px; color: var(--d-txt-3); flex-shrink: 0; }
.igc-people__q {
  border     : none;
  background : none;
  font-size  : 13px;
  color      : var(--d-txt);
  outline    : none;
  width      : 160px;
}

/* People header row */
.igc-person.igc-person--head {
  display              : grid;
  grid-template-columns: 32px 1fr 100px 80px 72px 56px 56px;
  gap                  : 8px;
  padding              : 6px 8px;
  font-size            : 11px;
  font-weight          : 600;
  text-transform       : uppercase;
  letter-spacing       : .4px;
  color                : var(--d-txt-3);
  border-bottom        : 1px solid var(--d-line);
  margin-bottom        : 4px;
}
/* Person rows */
.igc-people__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.igc-person {
  display              : grid;
  grid-template-columns: 32px 1fr 100px 80px 72px 56px 56px;
  gap                  : 8px;
  align-items          : center;
  padding              : 10px 8px;
  border-bottom        : 1px solid var(--d-line);
  animation            : igcRise .2s ease calc(var(--i, 0) * 20ms) both;
}
.igc-person:last-child { border-bottom: none; }
.igc-people__none { padding: 20px 8px; color: var(--d-txt-3); font-size: 13px; }

.igc-person__who { min-width: 0; }
.igc-person__name { font-size: 13px; font-weight: 600; color: var(--d-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.igc-person__sub  { font-size: 11px; color: var(--d-txt-3); }

.igc-pstat {
  display      : inline-block;
  padding      : 2px 8px;
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 600;
}
.igc-pstat--wait { background: rgba(100,116,139,.10); color: #64748B; }
.igc-pstat--live { background: var(--igc-soft); color: var(--igc-accent); }
.igc-pstat--won  { background: rgba(34,197,94,.12); color: #16A34A; }
.igc-pstat--done { background: rgba(234,179,8,.12);  color: #A16207; }
.igc-pstat--bad  { background: rgba(239,68,68,.10);  color: #DC2626; }
.igc-pstat--off  { background: var(--d-col); color: var(--d-txt-3); }

.igc-person__cell { font-size: 12px; color: var(--d-txt-2); }
.igc-person__sent b  { font-size: 13px; font-weight: 700; }
.igc-person__sent em { font-size: 11px; color: var(--d-txt-3); font-style: normal; }

.igc-person__acts { display: flex; align-items: center; gap: 4px; }
.igc-open { color: var(--d-txt-3); }
.igc-open:hover { color: var(--igc-accent); }
.igc-open svg   { width: 15px; height: 15px; }

/* Journey dots */
.igc-journey {
  display    : flex;
  align-items: center;
  gap        : 3px;
}
.igc-journey i {
  display      : block;
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  border       : 1.5px solid var(--d-line-strong, rgba(0,0,0,.15));
  background   : none;
  flex-shrink  : 0;
}
.igc-journey i.is-on {
  background  : var(--igc-accent);
  border-color: var(--igc-accent);
}
.igc-journey i.is-next {
  background  : none;
  border-color: var(--igc-accent);
  box-shadow  : 0 0 0 2px var(--igc-soft);
}
.igc-journey.is-won i { background: #16A34A; border-color: #16A34A; }
.igc-journey.is-stopped i.is-on { background: #94A3B8; border-color: #94A3B8; }
.igc-journey b { font-size: 11px; color: var(--d-txt-3); margin-left: 4px; }

/* People empty within tab */
.igc-people--empty .igc-sources { margin-top: 16px; }

/* ═══════════════════════════════════════
   Board / Progress tab
═══════════════════════════════════════ */
.igc-board-empty {
  padding   : 32px 16px;
  text-align: center;
  font-size : 14px;
  color     : var(--d-txt-3);
  display   : flex;
  flex-direction: column;
  align-items: center;
  gap       : 16px;
}

/* Stage badges on list view */
.igc-stage {
  display      : inline-block;
  padding      : 2px 8px;
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 600;
}
.igc-stage--queued  { background: rgba(100,116,139,.10); color: #64748B; }
.igc-stage--active  { background: var(--igc-soft); color: var(--igc-accent); }
.igc-stage--replied { background: rgba(34,197,94,.12);  color: #16A34A; }
.igc-stage--done    { background: rgba(234,179,8,.12);   color: #A16207; }
.igc-stage--ended   { background: rgba(239,68,68,.10);   color: #DC2626; }

.igc-list__who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.igc-list__msg  { font-size: 12px; color: var(--d-txt-2); }
.igc-list__when { font-size: 12px; color: var(--d-txt-3); }

/* Card profile link */
.igc-pc .igc-open svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════
   New campaign modal
═══════════════════════════════════════ */
.igc-modal .wac-field input:focus,
.igc-modal .wac-field select:focus,
.igc-modal .wac-field textarea:focus {
  border-color: rgba(129,52,175,.55);
  box-shadow  : 0 0 0 4px var(--igc-ring, rgba(129,52,175,.14));
}

/* ═══════════════════════════════════════
   Paste handles modal
═══════════════════════════════════════ */
.igc-ph-form { display: flex; flex-direction: column; gap: 10px; }
.igc-ph-ta   { font-size: 13px; font-family: ui-monospace, monospace; }
.igc-result  { text-align: center; padding: 20px 0 8px; }
.igc-result__big { font-size: 22px; font-weight: 700; }
.igc-result__big b { color: var(--igc-accent); }
.igc-result__sub   { font-size: 13px; color: var(--d-txt-3); margin-top: 6px; }

/* ═══════════════════════════════════════
   Risk modal
═══════════════════════════════════════ */
.igc-risk__body {
  font-size  : 13px;
  line-height: 1.6;
  color      : var(--d-txt-2);
  max-height : 240px;
  overflow-y : auto;
  margin-bottom: 14px;
  padding    : 10px 12px;
  background : var(--d-col);
  border-radius: 10px;
  white-space: pre-wrap;
}
.igc-risk__ack {
  display    : flex;
  align-items: flex-start;
  gap        : 8px;
  font-size  : 13px;
  color      : var(--d-txt);
  cursor     : pointer;
}
.igc-risk__check { flex-shrink: 0; margin-top: 1px; accent-color: var(--igc-accent); }

/* ═══════════════════════════════════════
   Checkpoint modal
═══════════════════════════════════════ */
.igc-cp { display: flex; flex-direction: column; gap: 12px; }
.igc-cp__code { font-size: 18px; letter-spacing: .12em; text-align: center; font-weight: 700; }

/* ═══════════════════════════════════════
   Seat gate modal
═══════════════════════════════════════ */
.igc-gate { display: flex; flex-direction: column; gap: 8px; }
.igc-gate p { margin: 0; font-size: 14px; color: var(--d-txt); }

/* ═══════════════════════════════════════
   Primary button accent override inside .igc
═══════════════════════════════════════ */
.igc .drip-btn--primary,
.igc-modal .btn-primary {
  background  : var(--igc-accent, #8134AF);
  border-color: var(--igc-accent, #8134AF);
  color       : #fff;
}
.igc .drip-btn--primary:hover,
.igc-modal .btn-primary:hover {
  background  : var(--igc-deep, #6A2793);
  border-color: var(--igc-deep, #6A2793);
}
.igc .drip-btn--primary:focus-visible,
.igc-modal .btn-primary:focus-visible {
  outline     : none;
  box-shadow  : 0 0 0 3px var(--igc-ring);
}
.igc .drip-btn--primary:active,
.igc-modal .btn-primary:active {
  background  : var(--igc-deep);
  transform   : scale(.97);
}

/* ═══════════════════════════════════════
   Animations
═══════════════════════════════════════ */
@keyframes igcRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes igcCampIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes igcMenuIn {
  from { opacity: 0; transform: scale(.92) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0);      }
}
@keyframes igcFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Entering animation for detail HUD */
.drip-hud.is-entering { animation: igcFade .3s ease both; }

/* ═══════════════════════════════════════
   Responsive
═══════════════════════════════════════ */
@media (max-width: 820px) {
  .igc-camp__nums { display: none; }
  .igc-person.igc-person--head,
  .igc-person {
    grid-template-columns: 28px 1fr 80px 56px;
  }
  .igc-person__journey,
  .igc-person__cell.igc-person__sent { display: none; }
}

@media (max-width: 640px) {
  .igc-sec { padding: 16px; border-radius: 16px; }
  .igc.lic [data-igc-seq] > .igc-sec { padding: 0; border-radius: 0; }
  .igc-add { margin-left: 0; }
  .igc-person.igc-person--head,
  .igc-person { grid-template-columns: 28px 1fr 64px 40px; gap: 6px; }
  .igc-camp__top { gap: 10px; }
  .igc-strip { gap: 0; }
  .igc-strip__it { padding: 4px 6px; }
  .igc-strip__it b { font-size: 15px; }
}

/* New campaign button never wraps (icon-only square on mobile is the shared drip-btn standard) */
.igc-head__acts .drip-btn,
.igc-empty .drip-btn { white-space: nowrap; flex: 0 0 auto; }

/* Mobile HUD parity with LinkedIn: drop the eyebrow label, let the name wrap to two lines */
@media (max-width: 640px) {
  .igc-eyebrow-txt { display: none; }
  .igc-hud .drip-hud__eyebrow { gap: 8px; min-width: 0; }
  .igc-hud .drip-hud__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 19px;
    line-height: 1.2;
  }
  .igc-hud .drip-hud__bar { grid-template-columns: minmax(0,1fr) auto; row-gap: 14px; }
  .igc-hud .drip-hud__timer { grid-column: 1 / -1; order: 3; }
}

/* Campaign modal close button (no global .modal-close sizing exists) */
.wac-modal .modal-close {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(15,23,42,.08); border-radius: 50%;
  background: rgba(15,23,42,.04); color: #64748b; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: background .2s cubic-bezier(.2,.8,.2,1), color .2s, transform .2s cubic-bezier(.2,.8,.2,1);
}
.wac-modal .modal-close svg { width: 15px; height: 15px; display: block; }
.wac-modal .modal-close:hover { background: rgba(15,23,42,.08); color: #0f172a; }
.wac-modal .modal-close:active { transform: scale(.92); }
.wac-modal .modal-close:focus-visible { outline: 2px solid rgba(13,148,136,.5); outline-offset: 2px; }
.igc-risk__body:has(.igc-risk__list) { white-space: normal; }
.igc-risk__list { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.igc-risk__list li::marker { color: var(--igc-accent); font-weight: 700; }

/* People table: header mirrors the visible row cells at each breakpoint */
@media (max-width: 820px) {
  .igc-person.igc-person--head,
  .igc-person { grid-template-columns: 28px minmax(0,1fr) 92px 72px 56px; }
  .igc-person--head > span:nth-child(4),
  .igc-person--head > span:nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  .igc-person.igc-person--head,
  .igc-person { grid-template-columns: 28px minmax(0,1fr) auto 64px; gap: 8px; }
  .igc-person--head > span:nth-child(5),
  .igc-person > .igc-person__cell:not(.igc-person__sent) { display: none; }
  .igc-person__acts { justify-content: flex-end; }

  /* HUD actions: compact 40px glass icon buttons, glyph held at 16px */
  .igc-hud .igc-act {
    width: 40px; height: 40px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s cubic-bezier(.2,.8,.2,1);
  }
  .igc-hud .igc-act span { display: none; }
  .igc-hud .igc-act svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .igc-hud .igc-act:active { transform: scale(.94); }
}

/* Row actions: matched 28px pair, same rhythm as LinkedIn people rows */
.igc-person__acts { display: grid; grid-template-columns: repeat(2, 28px); gap: 4px; justify-content: end; }
.igc-person__acts .igc-open { grid-column: 1; width: 28px; height: 28px; border-radius: 9px; }
.igc-person__acts .igc-open svg { width: 14px; height: 14px; }
.igc-person__acts .drip-remove { grid-column: 2; }
.igc-person__acts .drip-remove svg { width: 12px; height: 12px; }
.igc-person__acts > * { opacity: .6; transition: opacity .2s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1), color .25s cubic-bezier(.2,.8,.2,1), background .25s cubic-bezier(.2,.8,.2,1); }
.igc-person:hover .igc-person__acts > *, .igc-person__acts > *:focus-visible { opacity: 1; }
@media (hover: none) { .igc-person__acts > * { opacity: 1; } }
html.theme-night .igc-person .drip-remove {
  color: rgba(226,232,240,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.05);
}
html.theme-night .igc-person .drip-remove:hover {
  color: #F87171;
  background: linear-gradient(180deg, rgba(248,113,113,.16), rgba(248,113,113,.08));
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.igc-person > .drip-card__avatar { width: 28px; height: 28px; flex: 0 0 28px; font-size: 11px; border-radius: 9px; }

/* ==========================================================================
   Shared campaign layout (lic-*) in Instagram colours.
   The detail page, safety panel and People tab reuse LinkedIn's markup; these
   rules only swap LinkedIn blue for the Instagram purple, Day and Night.
   ========================================================================== */
.igc.lic {
  --li-blue: #8134AF;
  --li-blue-deep: #6A2793;
  --li-soft: rgba(129,52,175,.10);
  --li-ring: rgba(129,52,175,.30);
}
html.theme-night .igc.lic {
  --li-blue: #B57EDC;
  --li-blue-deep: #7E3BB0;
  --li-soft: rgba(181,126,220,.14);
  --li-ring: rgba(181,126,220,.34);
}
.igc.lic .lic-hud .drip-hud__beacon { background: var(--igc-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px -12px rgba(129,52,175,.75); }
.igc.lic .lic-eyebrow-ic { color: #8134AF; box-shadow: 0 2px 6px -2px rgba(129,52,175,.6); }
html.theme-night .igc.lic .lic-eyebrow-ic { color: #C9A2EA; }
.igc.lic .lic-source:hover { box-shadow: inset 0 0 0 1px var(--li-ring), inset 0 1px 0 var(--d-hi), 0 8px 20px -14px rgba(129,52,175,.55); }
.igc.lic .lic-source--hero {
  background: linear-gradient(135deg, #9A4FCB 0%, #8134AF 52%, #5851DB 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px -14px rgba(129,52,175,.85);
}
.igc.lic .lic-source--hero:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 28px -14px rgba(129,52,175,.95); }
.igc.lic .lic-seg__thumb,
.igc.lic .lic-addpill--primary,
.igc.lic .lic-cap .drip-seg button.is-on { background: linear-gradient(180deg, #9A4FCB, var(--li-blue-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px -4px rgba(129,52,175,.7); }
.igc.lic .lic-safe__badge { background: var(--igc-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -6px rgba(129,52,175,.55); }
.igc.lic .lic-safe .wac-allow__meter span { background: var(--igc-meter); }
.igc.lic .lic-spin { border-color: rgba(129,52,175,.18); border-top-color: var(--li-blue); }
.igc.lic .lic-auto-in:focus, .igc.lic .lic-auto-in:focus-visible { box-shadow: 0 0 0 3px rgba(129,52,175,.14) !important; }
html.theme-night .igc.lic .lic-tab[aria-selected="true"] .lic-tab__ic,
html.theme-night .igc.lic .lic-strip__it i,
html.theme-night .igc.lic .lic-addpill svg,
html.theme-night .igc.lic .lic-recipe__cta,
html.theme-night .igc.lic .lic-recipe__ic,
html.theme-night .igc.lic .lic-chip svg,
html.theme-night .igc.lic .lic-auto-act.is-on .lic-auto-act__ic,
html.theme-night .igc.lic .lic-auto-link { color: #C9A2EA; }
html.theme-night .igc.lic .lic-spin { border-color: rgba(181,126,220,.2); }
html.theme-night .igc.lic .lic-addpill--primary svg { color: #fff; }

/* Saved list picker (Add from a saved list) */
.igc-sl__body { margin-top: 12px; }
.igc-sl__list { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; padding: 2px; }
.igc-sl__opt {
  display: grid; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 14px; text-align: left; cursor: pointer; font: inherit; color: var(--d-txt, #0F172A);
  background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transition: box-shadow .2s cubic-bezier(.2,.8,.2,1), background .2s cubic-bezier(.2,.8,.2,1), transform .12s cubic-bezier(.2,.8,.2,1);
}
.igc-sl__opt:hover { box-shadow: inset 0 0 0 1px rgba(129,52,175,.3), 0 8px 18px -14px rgba(129,52,175,.6); }
.igc-sl__opt:active { transform: scale(.985); }
.igc-sl__opt:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(129,52,175,.5), 0 0 0 4px rgba(129,52,175,.14); }
.igc-sl__opt[aria-checked="true"] { background: rgba(129,52,175,.07); box-shadow: inset 0 0 0 1px rgba(129,52,175,.4); }
.igc-sl__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #8134AF; background: rgba(129,52,175,.09); }
.igc-sl__ic svg { width: 16px; height: 16px; }
.igc-sl__txt { display: grid; gap: 2px; min-width: 0; }
.igc-sl__txt b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.igc-sl__txt em { font-style: normal; font-size: 12px; color: var(--d-txt-3, #94A3B8); font-variant-numeric: tabular-nums; }
.igc-sl__tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(15,23,42,.16); transition: background .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1); }
.igc-sl__tick svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.igc-sl__opt[aria-checked="true"] .igc-sl__tick { background: var(--igc-grad, #8134AF); box-shadow: none; }
.igc-sl__opt[aria-checked="true"] .igc-sl__tick svg { opacity: 1; transform: none; }
html.theme-night .igc-sl__opt { color: #E2E8F0; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
html.theme-night .igc-sl__opt:hover { box-shadow: inset 0 0 0 1px rgba(181,126,220,.34); }
html.theme-night .igc-sl__opt[aria-checked="true"] { background: rgba(181,126,220,.1); box-shadow: inset 0 0 0 1px rgba(181,126,220,.42); }
html.theme-night .igc-sl__ic { color: #C9A2EA; background: rgba(181,126,220,.12); }
html.theme-night .igc-sl__tick { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); }
/* HUD beacon glyph: Instagram, not the LinkedIn mark the shared HUD draws */
.igc.lic .lic-hud .drip-hud__beacon::before {
  background: center / 24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2c2.7 0 3 0 4.1.1 1 0 1.7.2 2.3.4.6.3 1.1.6 1.6 1.1.5.5.8 1 1.1 1.6.2.6.4 1.3.4 2.3.1 1.1.1 1.4.1 4.1s0 3-.1 4.1c0 1-.2 1.7-.4 2.3a4.6 4.6 0 0 1-1.1 1.6 4.6 4.6 0 0 1-1.6 1.1c-.6.2-1.3.4-2.3.4-1.1.1-1.4.1-4.1.1s-3 0-4.1-.1c-1 0-1.7-.2-2.3-.4a4.6 4.6 0 0 1-1.6-1.1 4.6 4.6 0 0 1-1.1-1.6c-.2-.6-.4-1.3-.4-2.3C2 15 2 14.7 2 12s0-3 .1-4.1c0-1 .2-1.7.4-2.3A4.6 4.6 0 0 1 3.6 4a4.6 4.6 0 0 1 1.6-1.1c.6-.2 1.3-.4 2.3-.4C8.6 2 9 2 12 2Zm0 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 8.2A3.2 3.2 0 1 1 12 8.8a3.2 3.2 0 0 1 0 6.4ZM17.4 5.4a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E");
}
.igc.lic .lic-rule__tile { background: linear-gradient(180deg, #9A4FCB, var(--li-blue-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px rgba(129,52,175,.75); }
/* The shared layout spaces itself with margins like WhatsApp and LinkedIn; the legacy flex gap doubled it */
.igc.wac.lic { display: block; gap: 0; }

/* Profile photos fill their avatar tile (People, Progress, pickers) */
.igc .drip-card__avatar { overflow: hidden; }
.igc .drip-card__avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* Row actions match LinkedIn: hairline tile, 15px brand glyph, small remove X */
.igc .lic-person__acts .igc-open svg { width: 15px; height: 15px; color: #8134AF; }
.igc .lic-person__acts .drip-remove svg { width: 12px; height: 12px; }
/* Progress card profile link carries the Instagram glyph colour, like LinkedIn's blue tile */
.igc .drip-card__acts .igc-open { color: #8134AF; }

/* Placeholder menu: a word plus what it fills with for the preview person, no raw tokens */
/* Each step animates in its own layer, so lift the step whose menu is open above the steps below it */
.lic-step:has(.lic-ph.is-open) { z-index: 6; }
.igc-ph-menu { max-height: min(360px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.igc-ph-ex { font-style: normal; font-size: 12px; font-weight: 500; color: var(--d-txt-3); max-width: 140px; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; transition: color .12s var(--d-ease); }
.lic-ph__item:hover .igc-ph-ex, .lic-ph__item:focus-visible .igc-ph-ex { color: rgba(255,255,255,.82); }

.igc-pv-gap { display: flex; gap: 7px; align-items: baseline; margin-top: 0; color: #B45309; }
.igc-pv-gap::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
html.theme-night .igc-pv-gap { color: #FBBF24; }