/* ==========================================================================
   Outreach: Recruiter Elite upsell + Discover (WhatsApp and LinkedIn from the Vault)
   Builds on the .ig tokens and primitives in ig-outreach.css and the .cl-lxm
   launch popup in academy.css. Day / Night via tokens.
   ========================================================================== */

.od, .od-tabs, .er-panel {
  --od-wa: #25D366;
  --od-wa-ink: #128C4B;
  --od-ig: #8134AF;
  --od-li: #0A66C2;
  --od-li-ink: #0A66C2;
}
html.theme-night .od, html.theme-night .od-tabs, html.theme-night .er-panel {
  --od-wa-ink: #4ADE80;
  --od-li-ink: #60A5FA;
  --od-ig: #C9A2EA;
}

/* ---------- Recruiter Elite popup extras ---------- */
.er-hero { padding-top: 40px; }
.er-orbs { position: absolute; top: 104px; right: 30px; display: flex; gap: 10px; z-index: 2; }
.er-orb {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px -10px rgba(0,0,0,.7);
  animation: er-float 5.6s cubic-bezier(.45,0,.55,1) infinite;
}
.er-orb svg { width: 20px; height: 20px; }
.er-orb--wa { background: linear-gradient(160deg, #3BE07A, #128C4B); }
.er-orb--ig { background: linear-gradient(160deg, #FEDA75 -10%, #FA7E1E 20%, #D62976 55%, #962FBF 85%); animation-delay: -1.8s; }
.er-orb--li { background: linear-gradient(160deg, #2C8AE8, #0A66C2); animation-delay: -3.6s; }
@keyframes er-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

.er-mx {
  margin: 0 0 18px; padding: 14px 14px 12px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.05);
}
.er-mx__row { display: grid; grid-template-columns: 92px repeat(3, 1fr); align-items: center; gap: 6px; padding: 7px 0; }
.er-mx__row + .er-mx__row { border-top: 1px solid rgba(255,255,255,.06); }
.er-mx__row--head { padding-top: 0; }
.er-mx__lab { font-size: 12.5px; font-weight: 700; color: rgba(234,240,248,.82); }
.er-mx__ch { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; color: #fff; }
.er-mx__ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; }
.er-mx__ic svg { width: 13px; height: 13px; }
.er-mx__ch--whatsapp .er-mx__ic { background: rgba(37,211,102,.2); color: #4ADE80; }
.er-mx__ch--instagram .er-mx__ic { background: rgba(129,52,175,.2); color: #C9A2EA; }
.er-mx__ch--linkedin .er-mx__ic { background: rgba(10,102,194,.28); color: #60A5FA; }
.er-mx__cell { justify-self: center; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  color: #04211c; background: linear-gradient(180deg, #7ff0dc, #2fd0b6); box-shadow: 0 0 16px -4px rgba(47,208,182,.8); }
.er-mx__cell.is-base { color: rgba(234,240,248,.8); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.er-mx__key { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding-top: 9px; margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,.06); font-size: 11px; font-weight: 600; color: rgba(234,240,248,.6); }
.er-mx__sw { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(180deg, #7ff0dc, #2fd0b6); }
.er-mx__sw.is-base { background: rgba(255,255,255,.16); }
.er-mx__key .er-mx__sw:not(:first-child) { margin-left: 8px; }
a.cl-lxm-btn { display: block; text-decoration: none; box-sizing: border-box; }

/* ---------- Inline locked panel (Discover, locked campaign channels) ---------- */
.er-panel {
  position: relative; overflow: hidden; border-radius: 24px; margin: 4px 0 40px;
  padding: 56px 32px 52px; text-align: center; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05), 0 24px 56px -28px rgba(15,23,42,.3);
  animation: er-rise .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes er-rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.er-panel__glow { position: absolute; inset: -40% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 40%, rgba(37,211,102,.16), transparent 70%),
              radial-gradient(36% 46% at 52% 30%, rgba(129,52,175,.13), transparent 70%),
              radial-gradient(40% 50% at 72% 42%, rgba(10,102,194,.15), transparent 70%); }
.er-panel__in { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.er-panel__ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 32px -14px rgba(15,23,42,.5); }
.er-panel__ic svg { width: 26px; height: 26px; }
.er-panel__ic--whatsapp { background: linear-gradient(160deg, #3BE07A, #128C4B); }
.er-panel__ic--instagram { background: linear-gradient(160deg, #FEDA75 -10%, #FA7E1E 20%, #D62976 55%, #962FBF 85%); }
.er-panel__ic--linkedin { background: linear-gradient(160deg, #2C8AE8, #0A66C2); }
.er-panel__badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 5px 11px 5px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0F766E;
  background: rgba(13,148,136,.1); box-shadow: inset 0 0 0 1px rgba(13,148,136,.22); }
.er-panel__badge svg { width: 11px; height: 11px; }
.er-panel__h { margin: 12px 0 0; font-size: 26px; line-height: 1.15; font-weight: 750; letter-spacing: -.022em; color: #0F172A; }
.er-panel__sub { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: #475569; max-width: 440px; }
.er-panel__acts { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.er-panel__btn { height: 44px; padding: 0 22px; border: 0; border-radius: 13px; cursor: pointer;
  font-size: 14px; font-weight: 750; letter-spacing: -.005em; color: #fff;
  background: linear-gradient(180deg, #14B8A6, #0D9488);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px -10px rgba(13,148,136,.7);
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s; }
.er-panel__btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 30px -10px rgba(13,148,136,.75); }
.er-panel__btn:active { transform: scale(.97); }
.er-panel__price { font-size: 12.5px; font-weight: 600; color: #94A3B8; }

html.theme-night .er-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.08), 0 28px 64px -28px rgba(0,0,0,.7);
}
html.theme-night .er-panel__h { color: #F1F5F9; }
html.theme-night .er-panel__sub { color: #B6C2D1; }
html.theme-night .er-panel__price { color: #7A8A9E; }
/* theme-night paints every [class*="-panel"] as a card, which boxes the panel's BEM children. */
html.theme-night .er-panel [class*="-panel"]:not(.er-panel__badge):not(.er-panel__btn):not(.er-panel__ic) { background-color: transparent; box-shadow: none; border-color: transparent; }
html.theme-night .er-panel__badge { color: #5EEAD4; background: rgba(94,234,212,.1); box-shadow: inset 0 0 0 1px rgba(94,234,212,.22); }

/* Locked tabs and channel chips */
.inbox-seg__lock, .wac-chan__lock { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 2px; border-radius: 5px;
  color: #0D9488; background: rgba(13,148,136,.1); }
.inbox-seg__lock svg, .wac-chan__lock svg { width: 10px !important; height: 10px !important; fill: none !important; stroke: currentColor; }
html.theme-night .inbox-seg__lock, html.theme-night .wac-chan__lock { color: #5EEAD4; background: rgba(94,234,212,.12); }
.wac-chan[data-elite-lock] { cursor: pointer; }

/* ---------- Discover: channel tabs ---------- */
.od-tabs { display: inline-flex; align-self: flex-start; max-width: 100%; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 14px;
  background: var(--ig-surface); box-shadow: inset 0 1px 0 var(--ig-hi), inset 0 0 0 1px var(--ig-line); }
.od-tab { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 10px;
  font-size: 13px; font-weight: 650; letter-spacing: -.005em; color: var(--ig-txt-3); text-decoration: none; cursor: pointer;
  transition: color .2s var(--ig-ease), background .2s var(--ig-ease), box-shadow .2s var(--ig-ease), transform .14s var(--ig-ease); }
button.od-tab { border: 0; background: none; font-family: inherit; line-height: 1; -webkit-appearance: none; appearance: none; }
.od-tab:focus-visible { outline: 2px solid var(--od-li-ink); outline-offset: 2px; }
.od-tab svg { width: 15px; height: 15px; flex: none; }
.od-tab:hover { color: var(--ig-txt); }
.od-tab:active { transform: scale(.96); }
.od-tab.is-on { color: var(--ig-txt); background: var(--ig-card); box-shadow: 0 1px 2px rgba(15,23,42,.08), inset 0 0 0 1px var(--ig-line); }
html.theme-night .od-tab.is-on { background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--ig-line); }
.od-tab--whatsapp.is-on svg { color: var(--od-wa); }
.od-tab--instagram.is-on svg { color: var(--od-ig); }
.od-tab--linkedin.is-on svg { color: var(--od-li-ink); }
html.theme-night .od-tab { color: var(--ig-txt-3); }
html.theme-night .od-tab.is-on { color: var(--ig-txt); }

/* ---------- Discover: search hero ---------- */
.od-hero { margin-bottom: 18px; padding: 18px; position: relative; }
/* Sticks via [data-stick] (ig-outreach.css) */
.od-dock .ig-dock__count b { background: var(--od-tile); }
.od-dock .ig-dock__btn--go, .od-dock .ig-dock__btn--go:hover { background: linear-gradient(180deg, var(--od-c1), var(--od-c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 18px -9px rgba(var(--od-rgb),.75); }
.od--whatsapp .od-dock .ig-dock__btn--go { background: linear-gradient(180deg, #2BD872, #18A957); }
.od--linkedin .od-dock .ig-dock__btn--go { background: linear-gradient(180deg, #1C7BDA, #0A66C2); }
.od-hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 120% at 14% 0%, var(--od-wash), transparent 70%); }
.od--whatsapp { --od-c1: #25D366; --od-c2: #128C4B; --od-c3: #0D9488; --od-rgb: 37,211,102; --od-tile: linear-gradient(135deg, #3BE07F, #1DB257 55%, #0F7A41); --od-wash: rgba(37,211,102,.09); }
.od--linkedin { --od-c1: #0A66C2; --od-c2: #378FE9; --od-c3: #0D9488; --od-rgb: 10,102,194; --od-tile: linear-gradient(135deg, #3A93EC, #0A66C2 55%, #004182); --od-wash: rgba(10,102,194,.08); }
html.theme-night .od--whatsapp { --od-c1: #4ADE80; --od-c2: #22A35A; --od-c3: #5EEAD4; --od-rgb: 74,222,128; --od-wash: rgba(74,222,128,.08); }
html.theme-night .od--linkedin { --od-c1: #60A5FA; --od-c2: #2E7BD6; --od-c3: #5EEAD4; --od-rgb: 96,165,250; --od-wash: rgba(96,165,250,.10); }
.od-hero__row { position: relative; display: flex; align-items: center; gap: 10px; }
/* Same shape as the Instagram Discover bar, in the channel's brand colour */
.od-hero__q { position: relative; display: block; flex: 1; min-width: 0; padding: 1.5px; border-radius: 17px;
  background: linear-gradient(110deg, rgba(var(--od-rgb),.75), color-mix(in srgb, var(--od-c2) 60%, transparent) 42%, color-mix(in srgb, var(--od-c3) 55%, transparent) 100%);
  box-shadow: 0 1px 0 var(--ig-hi), 0 18px 40px -22px rgba(var(--od-rgb),.45), 0 6px 14px -10px rgba(15,23,42,.22);
  transition: box-shadow .3s var(--ig-ease), background .3s var(--ig-ease); }
.od-hero__q:hover { box-shadow: 0 1px 0 var(--ig-hi), 0 22px 46px -22px rgba(var(--od-rgb),.55), 0 8px 18px -10px rgba(15,23,42,.26); }
.od-hero__q:focus-within { background: linear-gradient(110deg, var(--od-c1), var(--od-c2) 45%, var(--od-c3)); box-shadow: 0 0 0 5px rgba(var(--od-rgb),.12), 0 24px 50px -22px rgba(var(--od-rgb),.6), 0 8px 18px -10px rgba(15,23,42,.26); }
.od-hero__tile { position: absolute; left: 9px; top: 50%; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: #fff; background: var(--od-tile);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -6px rgba(var(--od-rgb),.6); transform: translateY(-50%); pointer-events: none; transition: transform .3s var(--ig-ease); }
.od-hero__tile svg { width: 16px; height: 16px; }
.od-hero__q:focus-within .od-hero__tile { transform: translateY(-50%) scale(1.05); }
.od .od-hero__input { display: block; width: 100%; height: 50px; padding: 0 128px 0 52px; font-size: 15.5px; font-weight: 550; letter-spacing: -.005em; color: var(--ig-txt); border: 0; border-radius: 15.5px; background: var(--ig-card); box-shadow: inset 0 1px 0 var(--ig-hi); }
.od .od-hero__input::placeholder { color: var(--ig-txt-3); font-weight: 500; }
.od .od-hero__input:focus { outline: none; box-shadow: inset 0 1px 0 var(--ig-hi); }
.od .od-hero__input::-webkit-search-cancel-button { display: none; }
.od-hero__kbd { position: absolute; right: 12px; top: 50%; z-index: 1; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: var(--ig-txt-3); background: var(--ig-tile); box-shadow: inset 0 0 0 1px var(--ig-line-strong), inset 0 -1px 0 var(--ig-line-strong); transform: translateY(-50%); pointer-events: none; transition: color .2s; }
.od-hero__q:focus-within .od-hero__kbd { color: var(--od-c1); }
.od-hero__x { position: absolute; right: 86px; top: 50%; z-index: 1; transform: translateY(-50%); }
.od-hero__x svg { width: 14px; height: 14px; }
html.theme-night .od .od-hero__input, html.theme-night .od .od-hero__input:focus { background: #0f1f2b !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; }
html.theme-night .od-hero__q { box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -22px rgba(var(--od-rgb),.4), 0 6px 14px -10px rgba(0,0,0,.5); }
/* Advanced search toggle, matched to the 50px bar */
.od .od-adv-btn { flex: none; height: 50px; padding: 0 16px; gap: 8px; border-radius: 16px; font-size: 13px; font-weight: 640; }
.od .od-adv-btn svg { width: 16px; height: 16px; }
.od .od-adv-btn.is-on, .od .od-adv-btn.has-n { color: var(--od-c2); background: rgba(var(--od-rgb),.10); box-shadow: inset 0 0 0 1px rgba(var(--od-rgb),.32); }
html.theme-night .od .od-adv-btn.is-on, html.theme-night .od .od-adv-btn.has-n { color: var(--od-c1); }
.od-adv-btn__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 760; font-variant-numeric: tabular-nums; color: #fff; background: var(--od-c2); }
.od-adv-btn__n[hidden] { display: none; }
html.theme-night .od-adv-btn__n { color: #04121C; background: var(--od-c1); }
.od-hero__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; min-width: 96px; padding-left: 6px; text-align: right; }
.od-hero__meta b { font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: var(--ig-txt); font-variant-numeric: tabular-nums; }
.od-hero__meta span { font-size: 11.5px; font-weight: 600; color: var(--ig-txt-3); }
/* Advanced search panel, Vault fields only */
.od-adv { position: relative; margin-top: 14px; padding: 14px 16px 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--ig-tile); box-shadow: inset 0 1px 0 var(--ig-hi), inset 0 0 0 1px var(--ig-line); animation: odAdvIn .38s cubic-bezier(.2,.8,.2,1) both; transform-origin: top center; }
.od-adv[hidden] { display: none; }
@keyframes odAdvIn { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.od-adv__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.od-adv__label { font-size: 13px; font-weight: 700; letter-spacing: -.005em; color: var(--ig-txt); }
.od-adv__label em { margin-left: 8px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ig-txt-3); }
.od-adv__tools { display: flex; align-items: center; gap: 8px; }
.od-adv__reset { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 640; color: var(--ig-txt-3); background: transparent; cursor: pointer; transition: color .2s, background .2s, transform .14s cubic-bezier(.2,.8,.2,1); }
.od-adv__reset:hover { color: var(--ig-txt); background: rgba(15,23,42,.05); }
.od-adv__reset:active { transform: scale(.97); }
html.theme-night .od-adv__reset:hover { background: rgba(255,255,255,.06); }
.od-adv__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.od-adv__list > .adv-filter-empty { grid-column: 1 / -1; }
.od .od-adv__add { align-self: flex-start; }
.od-note { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 16px; padding: 0 4px; font-size: 12px; line-height: 1.5; color: var(--ig-txt-3); }
.od-note i { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--ig-teal); box-shadow: 0 0 0 3px var(--ig-teal-soft); }

/* ---------- Discover: cards ---------- */
.od .ig-card { cursor: pointer; transition: transform .45s var(--ig-ease), box-shadow .45s var(--ig-ease); }
.od .ig-card:hover { transform: translateY(-2px); }
.od .ig-card:active:not(:has(button:active, a:active)) { transform: scale(.985); transition-duration: .12s; }
.od .ig-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--od-rgb, 10,102,194), .35); }
/* Selection tick sits on the avatar's lower right corner, like a photo picker,
   so it never covers initials or a face. */
.od-card__sel { position: absolute; top: 40px; left: 40px; z-index: 2; width: 21px; height: 21px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: var(--ig-card); box-shadow: 0 0 0 2.5px var(--ig-card), inset 0 0 0 1.5px var(--ig-line-strong), 0 2px 6px -2px rgba(15,23,42,.35);
  opacity: 0; transition: opacity .18s, transform .14s var(--ig-ease), background .18s, box-shadow .18s; }
.od-card__sel svg { width: 11px; height: 11px; color: #fff; opacity: 0; transition: opacity .14s; }
.od .ig-card:hover .od-card__sel, .od .ig-card.is-sel .od-card__sel, .od .ig-grid.has-sel .od-card__sel, .od-card__sel:focus-visible { opacity: 1; }
.od .ig-card.is-sel .od-card__sel { background: var(--ig-teal); box-shadow: 0 0 0 2.5px var(--ig-card), 0 2px 6px -2px rgba(13,148,136,.6); }
.od .ig-card.is-sel .od-card__sel svg { opacity: 1; }
.od-card__sel:active { transform: scale(.9); }
.od-card__sel:disabled { cursor: not-allowed; }
.od .ig-card.is-blocked { opacity: .72; }
.od .ig-card.is-blocked:hover { opacity: .9; }
.od-chan { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none; }
.od-chan svg { width: 15px; height: 15px; }
.od-chan--whatsapp { color: var(--od-wa-ink); background: rgba(37,211,102,.12); }
.od-chan--linkedin { color: var(--od-li-ink); background: rgba(10,102,194,.1); }
html.theme-night .od-chan--whatsapp { background: rgba(37,211,102,.14); }
html.theme-night .od-chan--linkedin { background: rgba(96,165,250,.14); }
.od-card__pos { font-size: 12px; color: var(--ig-txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-phone { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
a.od-link { color: var(--od-li-ink); text-decoration: none; font-weight: 650; }
a.od-link:hover { text-decoration: underline; }

/* Channel buttons */
.ig-btn--wa { color: #fff; background: linear-gradient(180deg, #2BD872, #18A957); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px -8px rgba(24,169,87,.7); }
.ig-btn--wa:hover { filter: brightness(1.05); }
.ig-btn--li { color: #fff; background: linear-gradient(180deg, #1C7BDA, #0A66C2); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 18px -8px rgba(10,102,194,.7); }
.ig-btn--li:hover { filter: brightness(1.06); }
html.theme-night .ig-btn--wa, html.theme-night .ig-btn--li { color: #fff; }

@media (max-width: 640px) {
  .od-tabs { display: flex; width: 100%; }
  .od-tab { flex: 1; min-width: 0; justify-content: center; gap: 5px; padding: 0 6px; }
  .od-tab > svg { display: none; }
  .od-hero { padding: 14px; }
  .od-hero__row { flex-wrap: wrap; }
  .od-hero__q { flex: 1 1 100%; }
  .od .od-hero__input { padding-right: 44px; }
  .od-hero__kbd { display: none; }
  .od-hero__x { right: 8px; }
  .od .od-adv-btn { flex: 1; justify-content: center; height: 44px; border-radius: 14px; }
  .od-hero__meta { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; }
  .od-adv__list { grid-template-columns: 1fr; }
  .od-card__sel { opacity: 1; }
  .er-panel { padding: 40px 20px 36px; }
  .er-panel__h { font-size: 22px; }
  .er-orbs { position: static; margin-bottom: 14px; }
  .er-mx__row { grid-template-columns: 70px repeat(3, 1fr); }
  .er-mx__ch { flex-direction: column; gap: 4px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .er-orb, .er-panel { animation: none; }
}

/* Loading skeleton: the card frame with soft shimmer bars */
.od .ig-card.od-skel { pointer-events: none; min-height: 168px; }
.od .od-skel .ig-avatar { background: var(--od-skel, rgba(15,23,42,.06)); }
.od-skel__l { display: block; height: 11px; width: 140px; border-radius: 6px; background: linear-gradient(90deg, var(--od-skel, rgba(15,23,42,.06)) 0%, var(--od-skel-hi, rgba(15,23,42,.11)) 50%, var(--od-skel, rgba(15,23,42,.06)) 100%); background-size: 200% 100%; animation: od-shimmer 1.4s cubic-bezier(.2,.8,.2,1) infinite; }
.od-skel__l + .od-skel__l { margin-top: 8px; }
.od-skel__l--s { width: 92px; height: 9px; }
html.theme-night .od { --od-skel: rgba(255,255,255,.05); --od-skel-hi: rgba(255,255,255,.10); }
@keyframes od-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .od-skel__l { animation: none; } }

/* Instagram empty state inside the shared campaign list */
.wac-empty__icon--ig {
  color: #8134AF; background: linear-gradient(180deg, rgba(129,52,175,.12), rgba(129,52,175,.05));
  box-shadow: inset 0 0 0 1px rgba(129,52,175,.2), inset 0 1px 0 rgba(255,255,255,.6);
}
html.theme-night .wac-empty__icon--ig { color: #C9A2EA; box-shadow: inset 0 0 0 1px rgba(201,162,234,.24); }

/* Inbox header Activity button had no Night treatment */
html.theme-night .inbox-activity-btn {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #E6EDF3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
html.theme-night .inbox-activity-btn:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
html.theme-night .inbox-activity-btn svg { color: #2DD4BF; }

/* Phone: header actions wrap instead of running off the screen */
@media (max-width: 640px) {
  .inbox-header-actions { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
  .inbox-header-actions:empty { display: none; }
}
@media (max-width: 640px) {
  .wac-empty .drip-btn span { display: inline; }
}


/* ---------- Discover: profile drawer (LinkedIn blue on the shared IG drawer material) ---------- */
.ig-drawer.odp--linkedin {
  --odp-c1: #0A66C2; --odp-c2: #378FE9; --odp-rgb: 10,102,194;
  --dr-wash: radial-gradient(120% 70% at 50% -10%, rgba(55,143,233,.20), transparent 62%), radial-gradient(80% 50% at 100% 0%, rgba(10,102,194,.10), transparent 70%);
}
.ig-drawer.odp--whatsapp { --odp-c1: #128C7E; --odp-c2: #25D366; --odp-rgb: 18,140,126;
  --dr-wash: radial-gradient(120% 70% at 50% -10%, rgba(37,211,102,.16), transparent 62%); }
.theme-night .ig-drawer.odp--linkedin { --odp-c1: #60A5FA; --odp-c2: #93C5FD; --odp-rgb: 96,165,250;
  --dr-wash: radial-gradient(120% 70% at 50% -10%, rgba(96,165,250,.20), transparent 62%), radial-gradient(80% 50% at 100% 0%, rgba(37,99,235,.14), transparent 70%); }
.theme-night .ig-drawer.odp--whatsapp { --odp-c1: #34D399; --odp-c2: #6EE7B7; --odp-rgb: 52,211,153; }

.ig-drawer.odp .ig-drawer__head .odp-ava:not(:has(img)) { background: linear-gradient(140deg, var(--odp-c2), var(--odp-c1) 70%); color: #fff; box-shadow: inset 0 0 0 3px var(--dr-group), 0 10px 28px -10px rgba(var(--odp-rgb), .55); }
.ig-drawer.odp .ig-drawer__head .odp-ava img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; }
.ig-drawer.odp .ig-drawer__name i { color: #fff; background: var(--odp-c1); }
.odp-role { margin-top: 3px; font-size: 13.5px; font-weight: 560; line-height: 1.35; color: var(--odp-c1); letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-drawer.odp .ig-drawer__stats.odp-odd > div:last-child { grid-column: 1 / -1; box-shadow: none; }
.ig-drawer.odp .ig-btn--ig { background: linear-gradient(180deg, var(--odp-c2), var(--odp-c1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px -10px rgba(var(--odp-rgb), .7); }
.ig-drawer.odp .ig-btn--ig:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ig-drawer.odp .ig-drawer__acts { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.ig-drawer.odp .ig-drawer__acts .ig-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-drawer.odp .ig-drawer__acts > .ig-btn { grid-column: auto; height: 44px; font-size: 14px; font-weight: 620; }
.ig-drawer.odp .ig-drawer__acts > .ig-btn--ig { grid-column: 1 / -1; }
.ig-drawer.odp .ig-drawer__acts .ig-btn.is-busy { opacity: .7; pointer-events: none; }
.ig-drawer.odp .ig-drawer__acts .ig-btn svg { width: 15px; height: 15px; }
.ig-drawer.odp .ig-drawer__acts .ig-btn:disabled { opacity: .45; cursor: not-allowed; }
.ig-drawer.odp [data-odp-msg].is-busy { opacity: .7; pointer-events: none; }
.ig-drawer.odp [data-odp-msg].is-busy svg { animation: odp-pulse .9s var(--ig-ease) infinite alternate; }
@keyframes odp-pulse { from { transform: scale(1); } to { transform: scale(.82); } }
/* Quick actions, Contacts style: tinted glyph tile over a small label */
.odp-quick { display: grid; grid-template-columns: repeat(var(--odp-qn, 4), minmax(0,1fr)); gap: 6px; margin-top: 2px; }
.odp-q { appearance: none; border: 0; background: none; font: inherit; cursor: pointer; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px 6px; border-radius: 14px; color: var(--ig-txt-2); -webkit-tap-highlight-color: transparent; transition: background .2s var(--ig-ease), transform .16s var(--ig-ease); }
.odp-q svg { box-sizing: content-box; width: 17px; height: 17px; padding: 9px; border-radius: 50%; color: var(--odp-c1); background: rgba(var(--odp-rgb), .09); box-shadow: inset 0 0 0 1px rgba(var(--odp-rgb), .14), inset 0 1px 0 var(--ig-hi); transition: background .2s var(--ig-ease), box-shadow .2s var(--ig-ease); }
.odp-q span { font-size: 11.5px; font-weight: 590; letter-spacing: .01em; line-height: 1; }
.odp-q:hover { background: rgba(var(--odp-rgb), .05); color: var(--ig-txt); }
.odp-q:hover svg { background: rgba(var(--odp-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--odp-rgb), .22), 0 6px 16px -8px rgba(var(--odp-rgb), .6); }
.odp-q:active { transform: scale(.94); transition-duration: .08s; }
.odp-q:focus-visible { outline: 2px solid rgba(var(--odp-rgb), .55); outline-offset: 1px; }
.odp-q[data-odp-msg="WHATSAPP"] svg { color: #128C7E; background: rgba(37,211,102,.12); box-shadow: inset 0 0 0 1px rgba(18,140,126,.18), inset 0 1px 0 var(--ig-hi); }
.odp-q[data-odp-msg="LINKEDIN"] svg { color: #0A66C2; background: rgba(10,102,194,.10); box-shadow: inset 0 0 0 1px rgba(10,102,194,.16), inset 0 1px 0 var(--ig-hi); }
.odp-q:disabled { opacity: .4; cursor: not-allowed; transform: none; background: none; }
.odp-q.is-busy { opacity: .7; }
html.theme-night .odp-q span { color: var(--ig-txt-2); }
html.theme-night .odp-q[data-odp-msg="WHATSAPP"] svg { color: #34D399; background: rgba(52,211,153,.14); }
html.theme-night .odp-q[data-odp-msg="LINKEDIN"] svg { color: #60A5FA; background: rgba(96,165,250,.14); }
@media (max-width: 780px) {
  .ig-drawer.odp .ig-drawer__acts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ig-drawer.odp .ig-drawer__acts > .ig-btn { height: 44px; font-size: 14px; }
  .ig-drawer.odp .ig-drawer__acts .ig-btn svg { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  .odp-q, .odp-q svg { transition: none; }
  .ig-drawer.odp [data-odp-msg].is-busy svg { animation: none; }
}

/* Settings style rows */
.odp-rows { list-style: none; margin: 0; padding: 0; }
.odp-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--ig-line); font-size: 13.5px; }
.odp-rows li:first-child { border-top: 0; padding-top: 2px; }
.odp-rows li > span { flex: none; color: var(--ig-txt-3); font-weight: 500; }
.odp-rows li > b { min-width: 0; text-align: right; font-weight: 600; color: var(--ig-txt); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.odp-rows li > b small { font-weight: 500; color: var(--ig-txt-3); font-size: 12px; margin-left: 4px; }
.odp-rows li > b a { color: var(--odp-c1); text-decoration: none; }
.odp-rows li > b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.odp-rows li > b .ig-drawer__chips { justify-content: flex-end; }

/* Latest deals */
.odp-deals { list-style: none; margin: 12px 0 0; padding: 4px; border-radius: 14px; background: rgba(var(--odp-rgb), .05); box-shadow: inset 0 0 0 1px rgba(var(--odp-rgb), .10); }
.odp-deals li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; }
.odp-deals li + li { box-shadow: inset 0 1px 0 rgba(var(--odp-rgb), .10); }
.odp-deals__t { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; color: var(--odp-c1); background: rgba(var(--odp-rgb), .12); }
.odp-deals__t--rent { color: var(--ig-amber); background: rgba(217,119,6,.12); }
.odp-deals__w { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.odp-deals__w b { font-size: 13.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odp-deals__w small { font-size: 11.5px; color: var(--ig-txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odp-deals__p { font-size: 13.5px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Campaign guard note */
.odp-guard { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 13px 15px; border-radius: 16px; background: rgba(217,119,6,.08); box-shadow: inset 0 0 0 1px rgba(217,119,6,.18); }
.odp-guard i { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--ig-amber); box-shadow: 0 0 0 4px rgba(217,119,6,.16); }
.odp-guard p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ig-txt-2); }
.odp-guard p b { color: var(--ig-txt); font-weight: 620; }
.odp-guard.is-stop { background: rgba(220,38,38,.07); box-shadow: inset 0 0 0 1px rgba(220,38,38,.18); }
.odp-guard.is-stop i { background: var(--ig-red); box-shadow: 0 0 0 4px rgba(220,38,38,.14); }

.odp-empty { padding: 28px 22px; text-align: center; border-radius: 18px; background: var(--dr-group); box-shadow: inset 0 0 0 1px var(--ig-line); }
.odp-empty b { display: block; font-size: 15px; font-weight: 650; margin-bottom: 4px; }
.odp-empty p { margin: 0; font-size: 13px; color: var(--ig-txt-3); line-height: 1.5; }
.odp-since { margin: 18px 0 4px; text-align: center; font-size: 12px; color: var(--ig-txt-3); letter-spacing: .01em; }

/* Loading shimmer while the Vault record arrives */
.odp-skel { margin-bottom: 14px; border-radius: 20px; background: linear-gradient(100deg, var(--dr-group) 30%, rgba(var(--odp-rgb), .07) 50%, var(--dr-group) 70%) 0 0 / 300% 100%; box-shadow: inset 0 0 0 1px var(--ig-line); animation: odp-shim 1.4s ease-in-out infinite; }
@keyframes odp-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ig-drawer.odp .ig-drawer__body.is-ready > * { animation: odp-rise .5s var(--ig-ease) both; }
.ig-drawer.odp .ig-drawer__body.is-ready > :nth-child(2) { animation-delay: .04s; }
.ig-drawer.odp .ig-drawer__body.is-ready > :nth-child(3) { animation-delay: .08s; }
.ig-drawer.odp .ig-drawer__body.is-ready > :nth-child(n+4) { animation-delay: .12s; }
@keyframes odp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .od .ig-card, .od .ig-card:hover, .od .ig-card:active { transform: none; }
  .odp-skel, .ig-drawer.odp .ig-drawer__body.is-ready > * { animation: none; }
}
html.theme-night .ig-drawer.odp .odp-rows li > span,
html.theme-night .ig-drawer.odp .odp-deals__w small,
html.theme-night .ig-drawer.odp .odp-since { color: var(--ig-txt-3); }
html.theme-night .ig-drawer.odp .ig-drawer__acts .ig-btn:not(.ig-btn--ig) { color: var(--ig-txt); }
html.theme-night .ig-drawer.odp .ig-drawer__acts .ig-btn:not(.ig-btn--ig) svg { color: var(--odp-c1); }

/* Discover reuses the Vault "Add to pipeline" modal as is; it only needs to stack above the profile drawer */
.modal-overlay.odp-pipe-modal { z-index: 1200; }
