/* ============================================================
   Yesh — Phase 2/3 modules: Marketing (mk-), Scheduling (sch-),
   Forms & Funnels (ff-), Workflows (wf-).
   Console shells reuse the fc-* pattern from app.css. Everything
   here rides the same semantic tokens as the rest of the app, so
   all skins / experiences / dark mode apply automatically.
   ============================================================ */

/* ============ MARKETING (mk-) ============ */
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.mk-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.mk-stat b { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.mk-stat i { font-style: normal; font-size: .72rem; color: var(--muted); }
.mk-stat-l { font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.mk-stat.gold { border-color: var(--gold-soft, var(--line)); background: linear-gradient(180deg, var(--brand-50), var(--surface-2)); }

.mk-block { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 14px 16px; margin-bottom: 14px; }
.mk-block-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; margin-bottom: 10px; }
.mk-block-h .btn { margin-left: auto; }
.mk-block-h.sm { font-size: .8rem; margin-bottom: 8px; }
.mk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.mk-recs { display: flex; flex-direction: column; gap: 8px; }
.mk-rec { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: border-color .12s, transform .12s; }
.mk-rec:hover { border-color: var(--brand-600); transform: translateX(2px); }
.mk-rec-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; }
.mk-rec-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-rec-tx b { font-size: .86rem; }
.mk-rec-tx i { font-style: normal; font-size: .75rem; color: var(--muted); }
.mk-rec-arrow { color: var(--muted); flex: none; }

.mk-up { display: flex; flex-direction: column; gap: 6px; }
.mk-up-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.mk-up-row:hover { border-color: var(--brand-600); }
.mk-up-date { flex: none; font-size: .72rem; font-weight: 700; color: var(--muted); min-width: 52px; }
.mk-up-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.mk-up-t b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mk-camp-mini { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; cursor: pointer; margin-bottom: 6px; }
.mk-camp-mini:hover { border-color: var(--brand-600); }
.mk-camp-mini-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-camp-mini-t b { font-size: .84rem; }
.mk-camp-mini-t i { font-style: normal; font-size: .73rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-camp-mini-kpi { flex: none; font-size: .74rem; font-weight: 700; color: var(--brand-700); }

.mk-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mk-sec-head h3 { margin: 0; font-size: 1.05rem; }

.mk-camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.mk-camp { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 14px; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 8px; }
.mk-camp:hover { border-color: var(--brand-600); transform: translateY(-2px); box-shadow: var(--sh-1); }
.mk-camp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-camp-top b { font-size: .95rem; }
.mk-camp-goal { margin: 0; font-size: .78rem; color: var(--muted); min-height: 2.2em; }
.mk-camp-chans { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-camp-kpis { display: flex; gap: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.mk-camp-kpis span { display: flex; flex-direction: column; }
.mk-camp-kpis b { font-size: .92rem; }
.mk-camp-kpis i { font-style: normal; font-size: .68rem; color: var(--muted); }

.mk-chan { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; color: var(--muted); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--pill); padding: 2px 8px; white-space: nowrap; }
.mk-chan i { font-style: normal; }

.mk-bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.mk-bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand-600); }
.mk-bar-l { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: 3px; }

.mk-score { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 5px; border-radius: var(--pill); font-size: .72rem; font-weight: 800; flex: none; }
.mk-score.hi { background: var(--pos-bg, #e7f5e9); color: var(--pos, #2c8a3d); }
.mk-score.mid { background: var(--warn-bg, #fdf3d9); color: var(--warn, #a07407); }
.mk-score.low { background: var(--neg-bg, #fdeaea); color: var(--neg, #c23b3b); }
.mk-score.big { min-width: 46px; height: 34px; font-size: 1.05rem; }

/* calendar */
.mk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mk-cal-dow { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 2px 6px; }
.mk-cal-day { min-height: 92px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-cal-day:hover { border-color: var(--brand-600); }
.mk-cal-day.pad { background: none; border-color: transparent; cursor: default; }
.mk-cal-day.today { border-color: var(--brand-600); box-shadow: inset 0 0 0 1px var(--brand-600); }
.mk-cal-n { font-size: .72rem; font-weight: 700; color: var(--muted); }
.mk-cal-day.today .mk-cal-n { color: var(--brand-700); }
.mk-cal-item { display: flex; align-items: center; gap: 4px; width: 100%; text-align: left; font-size: .67rem; font-weight: 600; padding: 2px 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; min-width: 0; }
.mk-cal-item i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cal-item.s-published { border-color: var(--pos, #2c8a3d); }
.mk-cal-item.s-scheduled { border-color: var(--warn, #a07407); }
.mk-cal-item.s-approved { border-color: var(--brand-600); }
.mk-cal-more { font-size: .64rem; color: var(--muted); padding-left: 4px; }
.mk-cal-legend { display: flex; align-items: center; gap: 16px; margin-top: 10px; font-size: .74rem; color: var(--muted); flex-wrap: wrap; }
.mk-cal-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.mk-cal-legend .dot.s-published { background: var(--pos, #2c8a3d); }
.mk-cal-legend .dot.s-scheduled { background: var(--warn, #a07407); }
.mk-cal-legend .dot.s-approved { background: var(--brand-600); }

/* studio */
.mk-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mk-filters .select.sm, .mk-filters .input.sm { min-width: 130px; }
.mk-rows { display: flex; flex-direction: column; gap: 6px; }
.mk-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; cursor: pointer; transition: border-color .12s; }
.mk-row:hover { border-color: var(--brand-600); }
.mk-row-ico { flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--surface-1); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.mk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-row-main b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-main i { font-style: normal; font-size: .73rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-camp { flex: none; font-size: .68rem; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border-radius: var(--pill); padding: 2px 8px; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-date { flex: none; font-size: .74rem; color: var(--muted); min-width: 48px; text-align: right; }

/* channels */
.mk-chans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mk-chan-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mk-chan-card.off { opacity: .72; }
.mk-chan-top { display: flex; align-items: center; gap: 8px; }
.mk-chan-top b { font-size: .92rem; flex: 1; }
.mk-chan-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.mk-chan-dot.ok { background: var(--pos, #2c8a3d); }
.mk-chan-dot.warn { background: var(--warn, #a07407); }
.mk-chan-stats { display: flex; gap: 14px; }
.mk-chan-stats span { display: flex; flex-direction: column; }
.mk-chan-stats b { font-size: .95rem; }
.mk-chan-stats i { font-style: normal; font-size: .66rem; color: var(--muted); }
.mk-chan-meta { font-size: .72rem; color: var(--muted); }
.mk-chan-warn { display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: var(--warn, #a07407); }

/* analytics */
.mk-tbl-wrap { overflow-x: auto; }
.mk-tbl { width: 100%; border-collapse: collapse; font-size: .84rem; }
.mk-tbl th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mk-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.mk-tbl tr:last-child td { border-bottom: none; }
.mk-attr-row { cursor: pointer; }
.mk-attr-row:hover td { background: var(--surface-1); }
.mk-lead { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; margin-bottom: 6px; }
.mk-lead:hover { border-color: var(--brand-600); }
.mk-lead-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.mk-lead-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-lead-t b { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-lead-t i { font-style: normal; font-size: .7rem; color: var(--muted); }
.mk-chanbar { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.mk-chanbar-l { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; }
.mk-chanbar-v { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.mk-heat { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.mk-heat-row { display: grid; grid-template-columns: 40px repeat(4, 1fr); gap: 4px; align-items: center; }
.mk-heat-row.head { margin-bottom: 2px; }
.mk-heat-h { font-size: .66rem; color: var(--muted); text-align: center; font-weight: 700; }
.mk-heat-d { font-size: .7rem; font-weight: 700; color: var(--muted); }
.mk-heat-c { height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--brand-600) calc(var(--v) * 100%), var(--surface-1)); border: 1px solid var(--line); }

/* settings */
.mk-set { display: flex; flex-direction: column; gap: 4px; max-width: 720px; }
.mk-set-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.mk-set-row:last-child { border-bottom: none; }
.mk-set-row > div:first-child { flex: 1; }
.mk-set-row b { font-size: .88rem; }
.mk-set-row p { margin: 2px 0 0; }

/* modals */
.mk-chan-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chan-pick { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; padding: 5px 10px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-1); color: var(--muted); cursor: pointer; }
.mk-chan-pick.on { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.mk-cd-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mk-cd-chans { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-cd-goal { margin: 4px 0; font-size: .88rem; }
.mk-cd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.mk-cd-attr { display: flex; gap: 12px; font-size: .78rem; font-weight: 700; margin-top: 8px; }
.mk-comp { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.mk-comp-side { display: flex; flex-direction: column; gap: 12px; }
.mk-bp { background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.mk-bp-score { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mk-bp-score b { display: block; font-size: .9rem; }
.mk-bp-score i { display: block; }
.mk-bp-wins { margin-bottom: 8px; }
.mk-bp-win { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--pos, #2c8a3d); font-weight: 600; padding: 3px 0; }
.mk-bp-issue { padding: 7px 9px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--warn, #a07407); border-radius: 7px; margin-bottom: 6px; }
.mk-bp-issue b { display: block; font-size: .76rem; }
.mk-bp-issue i { font-style: normal; font-size: .71rem; color: var(--muted); }
.mk-perf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-perf span { display: flex; flex-direction: column; }
.mk-perf b { font-size: .9rem; }
.mk-perf i { font-style: normal; font-size: .66rem; color: var(--muted); }
.mk-flow-status { display: inline-flex; align-items: center; margin-right: 4px; }
.mk-ad-preview { background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 12px; }
.mk-ad-hook { font-weight: 800; font-size: .95rem; margin-bottom: 6px; }
.mk-ad-preview p { font-size: .84rem; margin: 0 0 10px; }
.mk-ad-cta { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--brand-700); }
.mk-ad-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* marketing responsive */
@media (max-width: 1100px) {
  .mk-stats { grid-template-columns: repeat(2, 1fr); }
  .mk-cols, .mk-cd-cols { grid-template-columns: 1fr; }
  .mk-comp { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .mk-cal { gap: 3px; }
  .mk-cal-day { min-height: 64px; padding: 4px; }
  .mk-cal-item i { display: none; }
  .mk-row { flex-wrap: wrap; }
  .mk-row-main { flex-basis: 100%; }
  .mk-stats { grid-template-columns: 1fr; }
}

/* ============ SCHEDULING (sch-) ============ */
.sch-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface-1); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; cursor: pointer; margin-bottom: 6px; transition: border-color .12s; }
.sch-row:hover { border-color: var(--brand-600); }
.sch-row-time { flex: none; min-width: 56px; display: flex; flex-direction: column; }
.sch-row-time b { font-size: .84rem; }
.sch-row-time i { font-style: normal; font-size: .68rem; color: var(--muted); }
.sch-row-bar { flex: none; width: 4px; height: 30px; border-radius: 3px; background: var(--tc, var(--brand-600)); }
.sch-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sch-row-main b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-row-main i { font-style: normal; font-size: .72rem; color: var(--muted); }
.sch-row-client { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border-radius: var(--pill); padding: 2px 8px; }
.sch-approve-block { border-left: 3px solid var(--warn, #a07407); }
.sch-approve { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sch-approve:last-child { border-bottom: none; }
.sch-approve-t { display: flex; flex-direction: column; }
.sch-approve-t b { font-size: .88rem; }
.sch-approve-t i { font-style: normal; font-size: .74rem; color: var(--muted); }

/* week calendar */
.sch-week { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 10px; overflow-x: auto; }
.sch-week-gutter { display: flex; flex-direction: column; padding-top: 42px; }
.sch-week-h { flex: 1; font-size: .64rem; color: var(--muted); text-align: right; padding-right: 6px; transform: translateY(-6px); }
.sch-week-day { min-width: 0; }
.sch-week-day.today .sch-week-head { background: var(--brand-50); color: var(--brand-700); border-radius: 8px; }
.sch-week-head { text-align: center; padding: 4px 0 8px; }
.sch-week-head b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.sch-week-head i { font-style: normal; font-size: .95rem; font-weight: 800; }
.sch-week-body { position: relative; height: calc(var(--hours) * 34px); background: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 34px); border-radius: 6px; cursor: pointer; }
.sch-evt { position: absolute; left: 2px; right: 2px; border-radius: 6px; border: 1px solid var(--tc, var(--brand-600)); border-left-width: 3px; background: var(--surface-1); padding: 3px 6px; text-align: left; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; z-index: 1; }
.sch-evt:hover { box-shadow: var(--sh-1); z-index: 2; }
.sch-evt b { font-size: .64rem; }
.sch-evt i { font-style: normal; font-size: .68rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-evt.pending { border-style: dashed; opacity: .85; }
.sch-evt.done { opacity: .55; }
.sch-evt.noshow { opacity: .5; border-color: var(--neg, #c23b3b); }

/* tabs */
.sch-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px; }
.sch-tab { border: none; background: none; font-size: .78rem; font-weight: 700; color: var(--muted); padding: 5px 12px; border-radius: var(--pill); cursor: pointer; }
.sch-tab.on { background: var(--brand-600); color: var(--on-accent, #161616); }

/* types */
.sch-types { display: flex; flex-direction: column; gap: 10px; }
.sch-type { display: flex; align-items: stretch; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 12px 14px; }
.sch-type.off { opacity: .6; }
.sch-type-bar { flex: none; width: 5px; border-radius: 4px; background: var(--tc, var(--brand-600)); }
.sch-type-main { flex: 1; min-width: 0; }
.sch-type-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sch-type-top b { font-size: .95rem; }
.sch-type-main p { margin: 3px 0 6px; }
.sch-type-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .72rem; color: var(--muted); font-weight: 600; }
.sch-type-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sch-type-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.sch-price { font-size: .72rem; font-weight: 800; color: var(--brand-700); background: var(--brand-50); border-radius: var(--pill); padding: 2px 8px; }
.sch-free { font-size: .72rem; font-weight: 700; color: var(--pos, #2c8a3d); }
.sch-type-chip { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); border: 1px solid var(--tc, var(--line)); color: var(--ink); }

/* availability */
.sch-day-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.sch-day-row:last-child { border-bottom: none; }
.sch-day-l { flex: 1; font-size: .84rem; font-weight: 600; }
.sch-time { width: 106px; }
.sch-rule { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .84rem; font-weight: 600; }
.sch-rule:last-child { border-bottom: none; }
.sch-ov { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
.sch-ov span { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }

/* booking page */
.sch-link { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); padding: 5px 12px; }
.sch-page { max-width: 660px; margin: 0 auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius, 14px); overflow: hidden; box-shadow: var(--sh-1); }
.sch-page-hero { background: linear-gradient(135deg, var(--brand-50), var(--surface-2)); padding: 26px 26px 20px; border-bottom: 1px solid var(--line); }
.sch-page-brand { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-700); margin-bottom: 6px; }
.sch-page-hero h2 { margin: 0; font-size: 1.35rem; }
.sch-page-types { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sch-page-type { display: flex; align-items: stretch; gap: 12px; text-align: left; background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color .12s, transform .12s; }
.sch-page-type:hover { border-color: var(--brand-600); transform: translateY(-1px); }
.sch-page-type-main { flex: 1; min-width: 0; }
.sch-page-type-main b { font-size: .92rem; }
.sch-page-type-main p { margin: 3px 0 6px; font-size: .76rem; color: var(--muted); }
.sch-page-next { flex: none; align-self: center; font-size: .7rem; font-weight: 700; color: var(--brand-700); white-space: nowrap; }
.sch-flow { margin: 0 16px 16px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.sch-flow-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sch-flow-head b { font-size: .95rem; flex: 1; }
.sch-flow-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.sch-fday { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.sch-fday i { font-style: normal; font-size: .62rem; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sch-fday b { font-size: .95rem; }
.sch-fday.on { border-color: var(--brand-600); background: var(--brand-50); }
.sch-flow-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sch-fslot { font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.sch-fslot.on { border-color: var(--brand-600); background: var(--brand-600); color: var(--on-accent, #161616); }
.sch-flow-form { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.sch-flow-done { text-align: center; padding: 26px 14px; }
.sch-done-ico { color: var(--pos, #2c8a3d); margin-bottom: 6px; }
.sch-flow-done h3 { margin: 0 0 4px; }

/* booking detail modal */
.sch-bd-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sch-bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.sch-bd-grid > div { display: flex; flex-direction: column; gap: 2px; }
.sch-bd-grid i { font-style: normal; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.sch-bd-grid b { font-size: .86rem; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sch-bd-qa { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sch-bd-qa:last-child { border-bottom: none; }
.sch-bd-qa i { font-style: normal; font-size: .72rem; color: var(--muted); }
.sch-bd-qa b { font-size: .84rem; }

@media (max-width: 900px) {
  .sch-week { grid-template-columns: 34px repeat(7, minmax(74px, 1fr)); }
  .sch-bd-grid { grid-template-columns: 1fr; }
  .sch-type { flex-wrap: wrap; }
  .sch-type-actions { flex-direction: row; width: 100%; justify-content: space-between; }
}

/* ============ FORMS & FUNNELS (ff-) ============ */
.ff-form-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; flex-wrap: wrap; }
.ff-form-row:hover { border-color: var(--brand-600); }
.ff-form-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; text-align: left; background: none; border: none; cursor: pointer; padding: 2px 0; }
.ff-form-actions { display: flex; gap: 4px; margin-left: auto; }
.ff-req { color: var(--neg, #c23b3b); font-style: normal; margin-left: 3px; }

/* funnels */
.ff-funnels { display: flex; flex-direction: column; gap: 12px; }
.ff-funnel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 14px 16px; }
.ff-funnel-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ff-funnel-top b { font-size: .95rem; }
.ff-steps { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.ff-step { flex: none; min-width: 108px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.ff-step-ico { color: var(--brand-700); }
.ff-step b { font-size: .78rem; }
.ff-step i { font-style: normal; font-size: .68rem; color: var(--muted); }
.ff-step-arrow { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; color: var(--muted); }
.ff-step-arrow i { font-style: normal; font-size: .64rem; font-weight: 800; }
.ff-funnel-mini { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface-1); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; cursor: pointer; margin-bottom: 6px; }
.ff-funnel-mini:hover { border-color: var(--brand-600); }
.ff-funnel-mini-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ff-funnel-mini-t b { font-size: .85rem; }
.ff-funnel-mini-t i { font-style: normal; font-size: .72rem; color: var(--muted); }
.ff-mini-steps { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.ff-mini-steps i { width: 9px; background: var(--brand-600); border-radius: 2px 2px 0 0; opacity: .85; }

/* builder */
.ff-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-height: 64vh; overflow: hidden; }
.ff-b-left { overflow-y: auto; padding-right: 6px; }
.ff-b-right { overflow-y: auto; }
.ff-b-fields { display: flex; flex-direction: column; gap: 5px; }
.ff-b-field { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.ff-b-field.on { border-color: var(--brand-600); background: var(--brand-50); }
.ff-b-f-ico { flex: none; color: var(--muted); }
.ff-b-f-l { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ff-b-f-l b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-b-f-l i { font-style: normal; font-size: .66rem; color: var(--muted); }
.ff-b-f-acts { display: flex; gap: 2px; }
.ff-b-f-acts button { border: none; background: none; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 5px; display: grid; place-items: center; }
.ff-b-f-acts button:hover { background: var(--surface-1); color: var(--ink); }
.ff-b-f-acts button:disabled { opacity: .3; cursor: default; }
.ff-b-editor { background: var(--surface-1); border: 1px solid var(--brand-600); border-top: none; border-radius: 0 0 9px 9px; margin: -6px 4px 4px; padding: 10px 12px 12px; }
.ff-b-palette { display: flex; flex-wrap: wrap; gap: 5px; }
.ff-b-add { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 5px 9px; border-radius: var(--pill); border: 1px dashed var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; }
.ff-b-add:hover { border-color: var(--brand-600); color: var(--brand-700); }

/* live preview / public form */
.ff-pv-tag { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.ff-pv { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.ff-pv.standalone { max-width: 520px; margin: 0 auto; }
.ff-pv-head b { font-size: 1.05rem; }
.ff-pv-head p { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }
.ff-pv-head { margin-bottom: 12px; }
.ff-pv-field { margin-bottom: 10px; }
.ff-pv-section { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-700); border-bottom: 1px solid var(--line); padding: 12px 0 4px; margin-bottom: 10px; }
.ff-pv-statement { font-size: .84rem; color: var(--muted); background: var(--surface-1); border-left: 3px solid var(--brand-600); border-radius: 6px; padding: 8px 10px; }
.ff-pv-multi { display: flex; flex-direction: column; gap: 5px; }
.ff-pv-check { display: flex; align-items: center; gap: 8px; font-size: .82rem; cursor: pointer; }
.ff-pv-rating { display: flex; gap: 4px; }
.ff-star { border: none; background: none; color: var(--line); cursor: pointer; padding: 2px; }
.ff-star.on { color: var(--warn, #d9a406); }
.ff-pv-yesno { display: flex; gap: 8px; }
.ff-pv-file { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--line); border-radius: 9px; padding: 12px; color: var(--muted); font-size: .8rem; cursor: pointer; }
.ff-pv-file.on { border-color: var(--pos, #2c8a3d); color: var(--pos, #2c8a3d); border-style: solid; }

/* templates */
.ff-tpl { cursor: default; }

/* analytics */
.ff-an-funnel { margin-bottom: 14px; }
.ff-an-funnel b { display: block; font-size: .84rem; margin-bottom: 6px; }
.ff-an-step { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .78rem; }
.ff-an-v { font-size: .7rem; color: var(--muted); white-space: nowrap; }

/* funnel editor + walkthrough */
.ff-fn-steps { display: flex; flex-direction: column; gap: 8px; }
.ff-fn-step { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
.ff-fn-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ff-fn-step-head b { font-size: .82rem; }
.ff-fn-step-body { display: flex; flex-direction: column; gap: 6px; }
.ff-walk { max-height: 62vh; overflow-y: auto; }
.ff-walk-crumbs { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 16px; }
.ff-walk-crumbs i { width: 26px; height: 1.5px; background: var(--line); }
.ff-crumb { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; background: var(--surface-2); border: 1.5px solid var(--line); color: var(--muted); flex: none; }
.ff-crumb.on { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-50); }
.ff-crumb.done { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-accent, #161616); }
.ff-walk-land { text-align: center; padding: 30px 20px; max-width: 500px; margin: 0 auto; }
.ff-walk-land h2 { margin: 6px 0 8px; font-size: 1.5rem; }
.ff-walk-sch { max-width: 460px; margin: 0 auto; padding: 10px; }
.ff-walk-sch h3 { margin: 0 0 6px; }
.sch-fslot.on { border-color: var(--brand-600); background: var(--brand-600); color: var(--on-accent, #161616); }

@media (max-width: 900px) {
  .ff-builder { grid-template-columns: 1fr; max-height: none; }
  .ff-b-left, .ff-b-right { overflow: visible; }
  .ff-an-step { grid-template-columns: 84px 1fr auto; }
  .ff-form-row { align-items: flex-start; }
}

/* ============ WORKFLOWS (wf-) ============ */
.wf-hitl { display: flex; align-items: center; gap: 10px; background: var(--brand-50); border: 1px solid var(--brand-600); border-radius: 10px; padding: 11px 14px; font-size: .82rem; color: var(--ink); margin-bottom: 14px; }
.wf-hitl b { font-weight: 800; }
.wf-list { display: flex; flex-direction: column; gap: 12px; }
.wf-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 14px 16px; }
.wf-card.off { opacity: .65; }
.wf-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wf-card-ico { flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; }
.wf-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wf-card-t b { font-size: .95rem; }
.wf-card-t i { font-style: normal; font-size: .76rem; color: var(--muted); }
.wf-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wf-flow.sm { margin: 8px 0; }
.wf-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); white-space: nowrap; }
.wf-chip.trig { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.wf-chip.appr { border-style: dashed; border-color: var(--warn, #a07407); }
.wf-arrow { color: var(--muted); flex: none; display: grid; place-items: center; }
.wf-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; flex-wrap: wrap; }

.wf-run { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface-1); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; cursor: pointer; margin-bottom: 6px; }
.wf-run:hover { border-color: var(--brand-600); }
.wf-run-ico { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1.5px solid var(--line); color: var(--muted); }
.wf-run-ico.success, .wf-run-ico.done { border-color: var(--pos, #2c8a3d); color: var(--pos, #2c8a3d); }
.wf-run-ico.awaiting { border-color: var(--warn, #a07407); color: var(--warn, #a07407); }
.wf-run-ico.failed, .wf-run-ico.stopped { border-color: var(--neg, #c23b3b); color: var(--neg, #c23b3b); }
.wf-run-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wf-run-main b { font-size: .85rem; }
.wf-run-main i { font-style: normal; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-run-steps { display: flex; gap: 3px; flex: none; }
.wf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.wf-dot.done { background: var(--pos, #2c8a3d); }
.wf-dot.awaiting { background: var(--warn, #a07407); }
.wf-dot.failed { background: var(--neg, #c23b3b); }
.wf-dot.queued { background: var(--line); }
.wf-dot.skipped { background: var(--line); opacity: .5; }

.wf-appr { background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.wf-appr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.wf-appr-head b { font-size: .86rem; }
.wf-appr-preview { font-family: inherit; font-size: .8rem; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--brand-600); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; white-space: pre-wrap; max-height: 180px; overflow-y: auto; }
.wf-appr-past { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px dashed var(--line); }
.wf-appr-past:last-child { border-bottom: none; }
.wf-appr-past-t { display: flex; flex-direction: column; }
.wf-appr-past-t b { font-size: .8rem; }
.wf-appr-past-t i { font-style: normal; font-size: .7rem; color: var(--muted); }
.wf-appr-flag { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 800; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--pill); padding: 2px 8px; cursor: pointer; }
.wf-appr-flag.on { color: var(--warn, #a07407); border-color: var(--warn, #a07407); }

.wf-timeline { display: flex; flex-direction: column; gap: 0; }
.wf-tl-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; position: relative; }
.wf-tl-step::before { content: ""; position: absolute; left: 11.5px; top: 34px; bottom: -6px; width: 1.5px; background: var(--line); }
.wf-tl-step:last-child::before { display: none; }
.wf-tl-t { display: flex; flex-direction: column; padding-top: 2px; }
.wf-tl-t b { font-size: .84rem; }
.wf-tl-t i { font-style: normal; font-size: .74rem; color: var(--muted); }

@media (max-width: 700px) {
  .wf-card-foot { flex-direction: column; align-items: flex-start; }
  .wf-run { flex-wrap: wrap; }
}

/* phone: booking-page type cards wrap the "next" label under the copy */
@media (max-width: 640px) {
  .sch-page-type { flex-wrap: wrap; }
  .sch-page-next { align-self: flex-start; margin-left: 17px; }
}

/* ============ CLIENT LOOP (portal ↔ engines) ============ */
.cs-bkp-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 10px; }
.cs-bkp-type { text-align: left; background: var(--surface-1); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.cs-bkp-type.on { border-color: var(--cs-accent, var(--brand-600)); background: color-mix(in srgb, var(--cs-accent, var(--brand-600)) 8%, var(--surface-1)); }
.cs-bkp-type b { font-size: .84rem; }
.cs-bkp-type i { font-style: normal; font-size: .7rem; color: var(--muted); }
.cs-brief-note { display: flex; align-items: flex-start; gap: 7px; font-size: .8rem; background: color-mix(in srgb, var(--cs-accent, var(--brand-600)) 9%, var(--surface-1)); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin: 0 0 12px; }

/* ============ CLIENT SPACE — LEFT-STACKED NAV (navLayout:'side') ============ */
/* One markup path: .cs-mainwrap always wraps nav+body; it only *does*
   something when the root carries .cs-side-nav. */
.cs-side-nav .cs-mainwrap { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 20px; align-items: start; }
.cs-side-nav .cs-nav { position: sticky; top: 14px; margin: 0; z-index: 5; }
.cs-side-nav .cs-nav-in { flex-direction: column; align-items: stretch; gap: 4px; overflow: visible; padding: 10px; }
.cs-side-nav .cs-pill { width: 100%; justify-content: flex-start; text-align: left; padding: 10px 13px; }
.cs-side-nav .cs-pill-badge { margin-left: auto; }
/* variant tuning: sleek keeps its editorial hairline feel as a rail */
.cs-side-nav.cs-theme-sleek .cs-nav-in { border: none; background: none; backdrop-filter: none; padding: 0; gap: 2px; }
.cs-side-nav.cs-theme-sleek .cs-pill { border-left: 2px solid transparent; border-radius: 0; }
.cs-side-nav.cs-theme-sleek .cs-pill.on { background: none; color: var(--ink); border-left-color: var(--cs-accent); box-shadow: none; }
.cs-side-nav.cs-theme-dashboard .cs-nav-in { padding: 6px; gap: 2px; }
.cs-side-nav.cs-theme-dashboard .cs-pill { padding: 8px 11px; font-size: .82rem; }
/* tablets & phones: stacked rail would eat the viewport — always fall back
   to the thumb-friendly horizontal bar */
@media (max-width: 900px) {
  .cs-side-nav .cs-mainwrap { display: block; }
  .cs-side-nav .cs-nav { position: sticky; top: 0; margin: 0 0 18px; }
  .cs-side-nav .cs-nav-in { flex-direction: row; align-items: center; overflow-x: auto; padding: 8px; }
  .cs-side-nav .cs-pill { width: auto; justify-content: center; }
  .cs-side-nav .cs-pill-badge { margin-left: 0; }
  .cs-side-nav.cs-theme-sleek .cs-pill { border-left: none; border-bottom: 2px solid transparent; }
  .cs-side-nav.cs-theme-sleek .cs-pill.on { border-bottom-color: var(--cs-accent); }
}

/* ============ CLIENT SPACE — ACCENT + THEME CONTROLS ============ */
/* Text on the accent follows --cs-accent-ink (computed per accent) so a
   light accent (Volt, Paper) never gets white-on-lime. */
.cs-root .cs-pill.on,
.cs-root .cs-hero-nba,
.cs-root .cs-offer-flag,
.cs-root .cs-thread-dot,
.cs-root .cs-msg.client .cs-msg-b,
.cs-root .cs-user-av,
.cs-theme-modern .cs-nba-go { color: var(--cs-accent-ink, #fff); }

/* accent swatch row (Configure modal) */
.cs-acc-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 4px 0 0; }
.cs-acc-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; flex: none; transition: transform .1s, border-color .1s; }
.cs-acc-dot:hover { transform: scale(1.12); }
.cs-acc-dot.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--ink); }
.cs-acc-pick { width: 34px; height: 28px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--surface-1); cursor: pointer; flex: none; }
.cs-acc-reset { font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: var(--pill); border: 1px dashed var(--line); background: none; color: var(--muted); cursor: pointer; }
.cs-acc-reset.on { border-style: solid; border-color: var(--ink); color: var(--ink); }

/* Forced space theme — scoped token remap on the cs-root subtree.
   Fixed tasteful sets (precedent: the fixed-dark preview bar) so the
   client's space looks intentional whatever skin the studio app runs. */
.cs-root.cs-force-dark {
  --canvas: #121316; --surface: #1a1c20; --surface-1: #1f2126; --surface-2: #24262c;
  --ink: #f2f2ef; --ink-soft: #c9c9c3; --muted: #8f9096; --line: #32353c;
  --pos-bg: color-mix(in srgb, var(--pos, #3fae5a) 20%, #1a1c20);
  --warn-bg: color-mix(in srgb, var(--warn, #d9a406) 20%, #1a1c20);
  --neg-bg: color-mix(in srgb, var(--neg, #e0533d) 20%, #1a1c20);
  --brand-50: color-mix(in srgb, var(--cs-accent) 14%, #1a1c20);
  background: var(--canvas); color: var(--ink); color-scheme: dark;
}
.cs-root.cs-force-light {
  --canvas: #f6f4ee; --surface: #fffdf8; --surface-1: #ffffff; --surface-2: #faf8f2;
  --ink: #17181a; --ink-soft: #43454a; --muted: #7b7d84; --line: #e5e1d6;
  --pos-bg: #e7f5e9; --warn-bg: #fdf3d9; --neg-bg: #fdeaea;
  --brand-50: color-mix(in srgb, var(--cs-accent) 10%, #ffffff);
  background: var(--canvas); color: var(--ink); color-scheme: light;
}

/* ============ FUNNEL PRO — designed pages, logic, steps, A/B ============ */
.ff-hidden { display: none !important; }

/* multi-step progress */
.ff-prog { margin: 2px 0 14px; }
.ff-prog-bar { height: 5px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ff-prog-bar i { display: block; height: 100%; background: var(--brand-600); border-radius: 4px; transition: width .25s ease; }
.ff-prog-l { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 6px; }
.ff-prog-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }

/* designed funnel pages */
.ffp { position: relative; border-radius: 14px; overflow: hidden; display: grid; min-height: 320px; }
.ffp-in { padding: 40px 36px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 4px; }
.ffp-brand { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; opacity: .75; margin-bottom: 10px; }
.ffp-h { font-family: var(--font-display, inherit); font-size: 1.75rem; line-height: 1.15; margin: 0 0 10px; letter-spacing: -.01em; max-width: 480px; }
.ffp-sub { font-family: var(--font-body, inherit); font-size: .95rem; opacity: .85; margin: 0 0 18px; max-width: 440px; }
.ffp-cta { font: inherit; font-weight: 800; font-size: .95rem; padding: 12px 26px; border-radius: var(--pill); border: 0; cursor: pointer; background: var(--brand-600); color: var(--on-accent, #161616); box-shadow: 0 14px 30px -14px var(--brand-600); transition: transform .12s; }
.ffp-cta:hover { transform: translateY(-2px); }
.ffp-urgency { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; padding: 5px 12px; border-radius: var(--pill); background: color-mix(in srgb, currentColor 12%, transparent); border: 1px solid color-mix(in srgb, currentColor 25%, transparent); margin-bottom: 12px; }
.ffp-ab { display: block; margin-top: 14px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
.ffp-fine { font-size: .78rem; opacity: .7; margin-top: 10px; }
.ffp-done-ico { color: var(--brand-600); margin-bottom: 4px; }
/* backgrounds */
.ffp-bg-light { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.ffp-bg-dark { background: #15161a; color: #f2f2ef; }
.ffp-bg-dark .ffp-done-ico, .ffp-bg-dark .ffp-brand { color: var(--brand-600); }
.ffp-bg-accent { background: var(--brand-600); color: var(--on-accent, #161616); }
.ffp-bg-accent .ffp-cta { background: var(--on-accent, #161616); color: var(--brand-600); box-shadow: 0 14px 30px -14px rgba(0,0,0,.4); }
.ffp-bg-accent .ffp-done-ico { color: var(--on-accent, #161616); }
.ffp-bg-gradient { background: linear-gradient(135deg, var(--brand-600), color-mix(in srgb, var(--brand-600) 35%, #16233a)); color: #fff; }
.ffp-bg-gradient .ffp-cta { background: #fff; color: #161616; }
/* layouts */
.ffp-split { grid-template-columns: 1.25fr .75fr; }
.ffp-split .ffp-in { align-items: flex-start; text-align: left; }
.ffp-split .ffp-side { background: linear-gradient(160deg, color-mix(in srgb, var(--brand-600) 70%, transparent), color-mix(in srgb, var(--brand-600) 25%, transparent)); min-height: 100%; }
.ffp-bg-accent.ffp-split .ffp-side, .ffp-bg-gradient.ffp-split .ffp-side { background: rgba(0,0,0,.18); }
.ffp-editorial .ffp-in { align-items: flex-start; text-align: left; padding: 48px 44px; }
.ffp-editorial .ffp-h { font-family: Georgia, 'Times New Roman', serif; font-size: 2rem; font-weight: 500; }
.ffp-editorial .ffp-brand { letter-spacing: .2em; }
/* social proof */
.ffp-social { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; align-items: inherit; width: 100%; }
.ffp-quote { margin: 0; max-width: 440px; }
.ffp-quote blockquote { margin: 0; font-family: Georgia, serif; font-style: italic; font-size: .95rem; line-height: 1.5; opacity: .92; }
.ffp-quote figcaption { margin-top: 6px; font-size: .74rem; font-weight: 700; opacity: .7; }
.ffp-logos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ffp-logos-l { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.ffp-logos img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; box-shadow: 0 4px 10px -4px rgba(0,0,0,.3); }

/* builder: logic + automations */
.ff-logic { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ff-logic-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ff-logic-row .select.sm, .ff-logic-row .input.sm { flex: 1; min-width: 110px; }
.ff-autos { display: flex; flex-direction: column; gap: 5px; }
.ff-auto { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: .8rem; }
.ff-auto-ico { color: var(--brand-700); display: grid; place-items: center; }
.ff-auto b { font-size: .8rem; }
.ff-mini-tog { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; cursor: default; }

/* A/B panel + stats */
.ff-ab { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ff-ab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ff-ab-var { background: var(--surface-1); border: 1.5px solid var(--line); border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.ff-ab-var.lead { border-color: var(--brand-600); }
.ff-ab-var b { font-size: 1rem; }
.ff-ab-var span { font-size: .72rem; color: var(--muted); }
.ff-ab-var i { font-style: normal; font-size: 1.2rem; font-weight: 800; }
.ff-ab-var.lead i { color: var(--brand-700); }
.ff-an-rev { font-size: .72rem; font-weight: 800; color: var(--pos, #2c8a3d); margin-left: 8px; }

@media (max-width: 700px) {
  .ffp-split { grid-template-columns: 1fr; }
  .ffp-split .ffp-side { min-height: 56px; }
  .ffp-in, .ffp-editorial .ffp-in { padding: 28px 20px; }
  .ff-ab-stats { grid-template-columns: 1fr; }
}

/* ============ FUNNEL PRO II — vibes, cards, calc, brand chrome ============ */
/* brand identity bar on funnel pages */
.ffp-idbar { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.ffp-logo { height: 26px; width: auto; max-width: 150px; object-fit: contain; }
.ffp-logo-mono { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: currentColor; }
.ffp-logo-mono::first-letter { color: transparent; }
.ffp-brand { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; opacity: .7; margin: 0; }
.ffp-center .ffp-idbar, .ffp-center .ffp-social { justify-content: center; align-items: center; }
/* decorative depth — the thing that reads "designed", not "demo" */
.ffp-deco { position: absolute; border-radius: 50%; pointer-events: none; opacity: .18; filter: blur(2px); }
.ffp-deco-1 { width: 260px; height: 260px; top: -110px; right: -70px; background: radial-gradient(circle at 30% 30%, currentColor, transparent 70%); }
.ffp-deco-2 { width: 180px; height: 180px; bottom: -80px; left: -60px; background: radial-gradient(circle at 60% 40%, currentColor, transparent 70%); }
.ffp-in { position: relative; z-index: 1; }
.ffp-split .ffp-side img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* VIBES — brand personality */
.ffp-vibe-bold .ffp-h { font-size: 2.5rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.02; }
.ffp-vibe-bold .ffp-cta { border-radius: 10px; padding: 15px 32px; font-size: 1rem; box-shadow: 5px 5px 0 currentColor; }
.ffp-vibe-bold .ffp-sub { font-size: 1.05rem; font-weight: 500; }
.ffp-vibe-bold .ffp-deco { opacity: .26; }
.ffp-vibe-elegant .ffp-h { font-family: Georgia, 'Times New Roman', serif; font-size: 2.15rem; font-weight: 400; letter-spacing: -.005em; line-height: 1.18; }
.ffp-vibe-elegant .ffp-in { padding: 56px 44px; gap: 6px; }
.ffp-vibe-elegant .ffp-cta { border-radius: var(--pill); padding: 13px 34px; font-weight: 600; letter-spacing: .02em; box-shadow: none; border: 1px solid currentColor; background: transparent; color: inherit; }
.ffp-vibe-elegant .ffp-brand { letter-spacing: .28em; font-weight: 600; }
.ffp-vibe-elegant .ffp-deco { opacity: .1; }
.ffp-vibe-warm .ffp { border-radius: 26px; }
.ffp-vibe-warm .ffp-h { font-size: 2rem; letter-spacing: -.015em; }
.ffp-vibe-warm .ffp-cta { border-radius: 999px; padding: 14px 30px; box-shadow: 0 16px 30px -12px currentColor; }
.ffp-vibe-warm .ffp-in { gap: 8px; }
.ffp-vibe-warm .ffp-deco { opacity: .3; filter: blur(14px); }
.ffp-vibe-minimal .ffp-h { font-size: 1.85rem; font-weight: 600; letter-spacing: -.02em; }
.ffp-vibe-minimal .ffp-cta { border-radius: 8px; padding: 11px 24px; font-size: .9rem; box-shadow: none; }
.ffp-vibe-minimal .ffp-deco { display: none; }
.ffp-vibe-minimal .ffp-in { padding: 44px 36px; }

/* form brand bar */
.ff-brandbar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ff-brandbar img { height: 22px; width: auto; max-width: 130px; object-fit: contain; }
.ff-brandbar span { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

/* choice cards */
.ff-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ff-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: var(--surface-1); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; cursor: pointer; font: inherit; transition: border-color .12s, transform .12s, box-shadow .12s; }
.ff-card:hover { border-color: var(--brand-600); transform: translateY(-2px); box-shadow: var(--sh-1); }
.ff-card.on { border-color: var(--brand-600); background: var(--brand-50); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 20%, transparent); }
.ff-card-emoji { font-size: 1.35rem; line-height: 1; }
.ff-card b { font-size: .87rem; }
.ff-card i { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--muted); }
.ff-card.on i { color: var(--brand-700); }

/* image block */
.ff-imgblock img { width: 100%; border-radius: 12px; display: block; }
.ff-imgblock-ph { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: .78rem; }

/* calculation box */
.ff-calc-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-50), var(--surface-2)); border: 1.5px solid var(--brand-600); }
.ff-calc-l { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ff-calc-v { font-size: 1.7rem; font-weight: 900; letter-spacing: -.02em; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.ff-calcedit { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }
.ff-calcrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.ff-calcrow .input.sm { width: 84px; }

/* builder tiers */
.ff-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.ff-mode { text-align: left; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 1px; }
.ff-mode.on { border-color: var(--brand-600); background: var(--brand-50); }
.ff-mode b { font-size: .8rem; }
.ff-mode i { font-style: normal; font-size: .66rem; color: var(--muted); line-height: 1.3; }
.ff-locked-note { font-size: .7rem; color: var(--muted); margin: 6px 2px 0; display: flex; align-items: center; gap: 5px; }
.ff-tier { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--pill); border: 1px solid var(--line); color: var(--muted); flex: none; }
.ff-tier-advanced { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-50); }

/* vibe picker */
.ff-vibes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.ff-vibe { text-align: left; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 10px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 1px; }
.ff-vibe.on { border-color: var(--brand-600); background: var(--brand-50); }
.ff-vibe b { font-size: .8rem; }
.ff-vibe i { font-style: normal; font-size: .63rem; color: var(--muted); line-height: 1.25; }

/* submissions date range */
.ff-daterange { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-2); color: var(--muted); }
.ff-daterange .input.sm { width: 128px; border: none; background: none; padding: 3px 2px; }
.ff-range-note { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; margin: -4px 0 12px; }

@media (max-width: 700px) {
  .ff-modes, .ff-vibes { grid-template-columns: 1fr 1fr; }
  .ffp-vibe-bold .ffp-h { font-size: 1.9rem; }
  .ffp-vibe-elegant .ffp-h { font-size: 1.7rem; }
  .ff-daterange { flex-wrap: wrap; }
}
.ff-optval { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); }

/* ============ TEMPLATE LIBRARY (forms + funnels) ============ */
.ff-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.ff-tplcard { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color .12s, transform .12s, box-shadow .12s; }
.ff-tplcard:hover { border-color: var(--brand-600); transform: translateY(-2px); box-shadow: var(--sh-1); }
.ff-tplcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ff-tplcard-top b { font-size: .95rem; line-height: 1.25; }
.ff-tplcard-desc { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.45; min-height: 2.2em; }
.ff-tplcard-feats { display: flex; flex-wrap: wrap; gap: 4px; }
.ff-tplcard-feats span { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: var(--pill); background: var(--brand-50); color: var(--brand-700); }
.ff-tplcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 9px; margin-top: auto; flex-wrap: wrap; }
.ff-tier { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--pill); flex: none; }
.ff-tier-standard { background: var(--surface-1); color: var(--muted); border: 1px solid var(--line); }
.ff-tier-intermediate { background: var(--warn-bg, #fdf3d9); color: var(--warn-ink, #7a5a06); }
.ff-tier-advanced { background: var(--brand-600); color: var(--on-accent, #161616); }
.ff-tplcard-funnel { border-left-width: 3px; }
.ff-tplcard-funnel.ffv-bold { border-left-color: var(--brand-600); }
.ff-tplcard-funnel.ffv-elegant { border-left-color: #8a7a5c; }
.ff-tplcard-funnel.ffv-warm { border-left-color: #e08a4b; }
.ff-tplcard-funnel.ffv-minimal { border-left-color: var(--muted); }
.ff-tplcard-funnel.ffv-elegant .ff-tplcard-top b { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; }
.ff-tplcard-funnel.ffv-bold .ff-tplcard-top b { font-weight: 900; letter-spacing: -.015em; }
.ff-vibechip { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: var(--pill); border: 1px solid var(--line); color: var(--muted); flex: none; }
.ff-tplsteps { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.ff-tplstep { width: 24px; height: 24px; border-radius: 7px; background: var(--surface-1); border: 1px solid var(--line); display: grid; place-items: center; color: var(--brand-700); flex: none; }
.ff-tplstep-arrow { width: 8px; height: 1.5px; background: var(--line); flex: none; }
@media (max-width: 700px) { .ff-tplgrid { grid-template-columns: 1fr; } }

/* ============ MEDIA PICKER ============ */
.ffm-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.ffm-tab { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .8rem; font-weight: 700; padding: 7px 12px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-1); color: var(--muted); cursor: pointer; }
.ffm-tab.on { background: var(--brand-600); color: var(--on-accent, #161616); border-color: transparent; }
.ffm-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 34px 20px; border: 2px dashed var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: border-color .12s, background .12s; }
.ffm-drop:hover { border-color: var(--brand-600); background: var(--brand-50); }
.ffm-drop-ico { color: var(--brand-700); }
.ffm-drop b { font-size: .92rem; }
.ffm-drop .muted { max-width: 380px; line-height: 1.45; }
.ffm-prev { margin-top: 10px; }
.ffm-prev-img { max-width: 100%; max-height: 180px; border-radius: 8px; border: 1px solid var(--line); }
.ffm-prev-ok, .ffm-prev-no { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 8px 10px; border-radius: 8px; }
.ffm-prev-ok { background: var(--pos-bg, #e7f5e9); color: var(--pos, #2c8a3d); }
.ffm-prev-no { background: var(--warn-bg, #fdf3d9); color: var(--warn-ink, #7a5a06); }
.ffm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; }
.ffm-item { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface-1); }
.ffm-item-pick { display: block; width: 100%; height: 84px; padding: 0; border: 0; background: var(--surface-2); cursor: pointer; }
.ffm-item-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ffm-item-vid { display: grid; place-items: center; width: 100%; height: 100%; color: var(--brand-700); }
.ffm-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 5px 7px; border-top: 1px solid var(--line); }
.ffm-item-foot span { font-size: .66rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ffm-item-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
.ffm-item-x:hover { color: var(--neg, #e0533d); }
.ffm-usage { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ffm-usage-bar { height: 5px; border-radius: 4px; background: var(--line); overflow: hidden; margin-bottom: 6px; }
.ffm-usage-bar i { display: block; height: 100%; background: var(--brand-600); border-radius: 4px; }
.ffm-usage-bar i.hot { background: var(--warn, #d9a406); }

/* builder media preview + segmented controls */
.fb-media { margin: 6px 0 4px; }
.fb-media-prev { height: 74px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 6px; display: grid; place-items: center; }
.fb-media-prev img { width: 100%; height: 100%; object-fit: cover; }
.fb-media-prev.empty, .fb-media-prev.vid { flex-direction: column; gap: 3px; color: var(--muted); font-size: .7rem; }
.fb-media-prev.vid { color: var(--brand-700); }
.fb-seg { display: flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; margin-bottom: 8px; }
.fb-seg-b { flex: 1; font: inherit; font-size: .72rem; font-weight: 700; padding: 6px 4px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; }
.fb-seg-b.on { background: var(--surface-1); color: var(--ink); box-shadow: var(--sh-1); }
.fn-media-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

/* ============ FORM DESIGN (ffd-*) ============ */
.ffd { --ffd-r: 10px; }
.ffd[style*="--ffd-accent"] { --brand-600: var(--ffd-accent); --brand-700: var(--ffd-accent); }
.ffd-w-compact { max-width: 420px; margin-inline: auto; }
.ffd-w-standard { max-width: 560px; margin-inline: auto; }
.ffd-w-wide { max-width: 720px; margin-inline: auto; }
.ffd-c-sharp { --ffd-r: 2px; }
.ffd-c-soft { --ffd-r: 10px; }
.ffd-c-round { --ffd-r: 18px; }
.ffd .input, .ffd .select, .ffd textarea.input, .ffd .ff-card, .ffd .ff-calc-box { border-radius: var(--ffd-r); }
.ffd-d-compact .ff-pv-field { margin-bottom: 9px; }
.ffd-d-comfortable .ff-pv-field { margin-bottom: 15px; }
.ffd-d-airy .ff-pv-field { margin-bottom: 24px; }
.ffd-f-system { --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.ffd-f-serif { --font-display: Georgia, "Times New Roman", serif; --font-body: Georgia, "Times New Roman", serif; }
.ffd-f-system .ff-pv-head b, .ffd-f-serif .ff-pv-head b { font-family: var(--font-display); }
.ffd .ff-pv-head b { font-family: var(--font-display, inherit); }
.ffd .btn-primary { border-radius: var(--ffd-r); }
.ffd-btn-pill .btn-primary { border-radius: var(--pill); }
.ffd-btn-outline .btn-primary { background: transparent; color: var(--brand-700); border: 1.5px solid var(--brand-600); box-shadow: none; }
.ffd-theme-dark { background: #15161a; color: #f2f2ef; padding: 20px; border-radius: 14px; }
.ffd-theme-dark .ff-pv-head b, .ffd-theme-dark .label { color: #f2f2ef; }
.ffd-theme-dark .input, .ffd-theme-dark .select, .ffd-theme-dark textarea.input { background: #1f2126; border-color: #33363d; color: #f2f2ef; }
.ffd-theme-dark .ff-card { background: #1f2126; border-color: #33363d; color: #f2f2ef; }
.ffd-theme-dark .muted { color: #9a9ba1; }
.ffd-theme-brand { background: var(--brand-50); padding: 20px; border-radius: 14px; }
.ffd-cover { margin: -4px -4px 14px; border-radius: 12px; overflow: hidden; }
.ffd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ffd-cover-short { height: 96px; }
.ffd-cover-medium { height: 150px; }
.ffd-cover-tall { height: 230px; }

/* media blocks inside forms */
.ff-imgblock img { width: 100%; display: block; border-radius: 10px; }
.ff-fit-cover img { height: 200px; object-fit: cover; }
.ff-fit-contain img { max-height: 240px; object-fit: contain; background: var(--surface-2); }
.ff-fit-natural img { height: auto; }
.ff-video, .ff-video-embed { width: 100%; border-radius: 10px; overflow: hidden; display: block; }
.ff-video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.ff-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============ FUNNEL PAGE MEDIA ============ */
.ffp[style*="--ffp-accent"] { --brand-600: var(--ffp-accent); --brand-700: var(--ffp-accent); }
.ffp-f-system { --font-display: ui-sans-serif, system-ui, -apple-system, sans-serif; }
.ffp-f-serif { --font-display: Georgia, "Times New Roman", serif; }
.ffp-hero-media { width: 100%; max-width: 480px; margin: 0 auto 18px; border-radius: 12px; overflow: hidden; }
.ffp-editorial .ffp-hero-media, .ffp-split .ffp-hero-media { margin-left: 0; }
.ffp-hero-media img { width: 100%; display: block; max-height: 260px; object-fit: cover; }
.ffp-bgmedia { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ffp-bgmedia img, .ffp-bgmedia video, .ffp-bgmedia .ff-video-embed { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ffp-bgveil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.62)); }
.ffp-has-bg { color: #fff; }
.ffp-has-bg .ffp-in { position: relative; z-index: 1; }
.ffp-has-bg .ffp-h, .ffp-has-bg .ffp-sub, .ffp-has-bg .ffp-brand { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.ffp-side video, .ffp-side .ff-video-embed { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 700px) { .ffp-hero-media img { max-height: 180px; } .ffd-cover-tall { height: 160px; } }

/* ============ REAL UPLOADS + CARD IMAGES + FIELD WIDTH ============ */
.ff-pv-file { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px dashed var(--line); border-radius: var(--ffd-r, 10px); background: var(--surface-2); cursor: pointer; transition: border-color .12s, background .12s; }
.ff-pv-file:hover { border-color: var(--brand-600); background: var(--brand-50); }
.ff-pv-file.on { border-style: solid; border-color: var(--brand-600); background: var(--surface-1); }
.ff-file-idle { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .84rem; }
.ff-file-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: none; background: #000; }
.ff-file-ico { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--brand-700); flex: none; }
.ff-file-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ff-file-meta b { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-file-meta small { font-size: .7rem; color: var(--muted); }
.ff-file-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; display: grid; place-items: center; border-radius: 6px; flex: none; }
.ff-file-x:hover { color: var(--neg, #e0533d); background: var(--surface-2); }
.ff-sub-media { max-width: 100%; max-height: 220px; border-radius: 9px; margin: 4px 0 6px; display: block; }
.sch-bd-qa.col { flex-direction: column; align-items: flex-start; gap: 3px; }

/* choice cards with images */
.ff-cards.has-img { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ff-card-img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; margin-bottom: 8px; background: var(--surface-2); }
.ff-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-optimgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; margin-bottom: 8px; }
.fb-optimg { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 0; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.fb-optimg.on { border-color: var(--brand-600); }
.fb-optimg img { width: 100%; height: 42px; object-fit: cover; display: block; }
.fb-optimg > span { height: 42px; display: grid; place-items: center; width: 100%; color: var(--muted); }
.fb-optimg i { font-style: normal; font-size: .6rem; padding: 3px 2px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* per-field width — the form body becomes a 12-col grid */
.ff-pv .ff-pv-field { grid-column: span 12; }
.ffd .ff-pv-field, .ff-pv-field { box-sizing: border-box; }
.ff-w-half { grid-column: span 6 !important; }
.ff-w-third { grid-column: span 4 !important; }
.ff-pv.standalone, .ff-pv { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 12px; align-content: start; }
.ff-pv > *:not(.ff-pv-field) { grid-column: span 12; }
.ffp-embed { width: 100%; max-width: 560px; margin: 0 auto; }
@media (max-width: 640px) { .ff-w-half, .ff-w-third { grid-column: span 12 !important; } }

/* ============ CLIENT PRESENTATION (the second entity) ============ */
/* A cp-surface re-declares the workspace tokens locally, so the studio's
   own skin/experience/gradient cannot cascade into client-facing output. */
.cp-surface { color: var(--ink); background: var(--canvas); }
.cp-surface .btn-primary { background: var(--brand-600); color: var(--on-accent, #fff); }
.cp-f-serif { font-family: Georgia, "Times New Roman", serif; }
.cp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-col { display: flex; flex-direction: column; gap: 14px; }
.cp-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.cp-preset { text-align: left; background: var(--surface-1); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.cp-preset.on { border-color: var(--brand-600); background: var(--brand-50); }
.cp-preset b { font-size: .84rem; }
.cp-preset small { font-size: .68rem; color: var(--muted); line-height: 1.35; }
.cp-preset-sw { width: 34px; height: 22px; border-radius: 6px; border: 1.5px solid; display: grid; place-items: center; margin-bottom: 5px; }
.cp-preset-sw i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.cs-acc-pick.wide { width: 100%; height: 34px; }
.cp-prevcard { position: sticky; top: 12px; }
.cp-preview { border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.cp-pv-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.cp-pv-bar img { height: 20px; width: auto; max-width: 110px; object-fit: contain; }
.cp-pv-bar span { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.cp-pv-h { font-family: var(--font-display, inherit); font-size: 1.25rem; margin: 0 0 6px; }
.cp-pv-p { font-family: var(--font-body, inherit); font-size: .82rem; opacity: .75; margin: 0 0 16px; line-height: 1.5; }
.cp-pv-l { display: block; font-size: .72rem; font-weight: 700; margin-bottom: 5px; }
.cp-pv-in { border: 1px solid var(--line); border-radius: var(--cp-r, 10px); padding: 9px 11px; font-size: .82rem; background: var(--surface-1); margin-bottom: 14px; opacity: .8; }
.cp-pv-cards { display: flex; gap: 7px; margin-bottom: 16px; }
.cp-pv-card { flex: 1; border: 1.5px solid var(--line); border-radius: var(--cp-r, 10px); padding: 10px; font-size: .78rem; font-weight: 700; text-align: center; background: var(--surface-1); }
.cp-pv-card.on { border-color: var(--brand-600); background: color-mix(in srgb, var(--brand-600) 10%, var(--surface-1)); }
.cp-pv-btn { width: 100%; border: 0; border-radius: var(--cp-r, 10px); padding: 11px; font: inherit; font-weight: 800; font-size: .86rem; background: var(--brand-600); color: var(--on-accent, #fff); cursor: default; }
.cp-applies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cp-applies li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-soft); }
.cp-applies svg { color: var(--brand-700); flex: none; }

/* ============ TIER EXPERIENCES ============ */
.ff-canvas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.ff-canvas-page { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 9px 10px; }
.ff-canvas-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.ff-canvas-head b { font-size: .78rem; }
.ff-canvas-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.ff-cblock { grid-column: span 12; text-align: left; background: var(--surface-1); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ff-cblock.on { border-color: var(--brand-600); background: var(--brand-50); }
.ff-cb-half { grid-column: span 6; }
.ff-cb-third { grid-column: span 4; }
.ff-cblock-t { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.ff-cb-flag { color: var(--brand-700); display: inline-grid; place-items: center; }
.ff-cb-flag.calc { color: var(--pos, #2c8a3d); }
.ff-cblock-l { font-size: .7rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-rules { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.ff-rule { display: flex; align-items: flex-start; gap: 8px; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.ff-rule:hover { border-color: var(--brand-600); }
.ff-rule-ico { color: var(--brand-700); flex: none; margin-top: 1px; }
.ff-rule.calc .ff-rule-ico { color: var(--pos, #2c8a3d); }
.ff-rule-txt { font-size: .76rem; line-height: 1.45; }
@media (max-width: 1000px) { .cp-two { grid-template-columns: 1fr; } .cp-prevcard { position: static; } }

/* ============ VALIDATION, SUCCESS, BROWSE MODE ============ */
.ff-err { margin: 4px 0 0; font-size: .74rem; font-weight: 600; color: var(--neg, #e0533d); }
[data-fldwrap].has-err .input, [data-fldwrap].has-err .select, [data-fldwrap].has-err textarea.input,
[data-fldwrap].has-err .ff-cards, [data-fldwrap].has-err .ff-pv-file { border-color: var(--neg, #e0533d); }
.ff-succ-img { max-width: 100%; max-height: 190px; border-radius: 10px; margin: 0 auto 12px; display: block; }
.ff-redirect { display: flex; flex-direction: column; gap: 3px; align-items: center; margin-top: 14px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 10px; font-size: .82rem; }
.ff-redirect small { color: var(--muted); font-size: .7rem; }

/* browse mode */
.ff-pv-modes, .ff-walk-modes { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.ff-walk-modes { margin-bottom: 0; flex-wrap: wrap; }
.ff-walk-modes i { font-style: normal; }
.ff-pvm { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .74rem; font-weight: 700; padding: 6px 11px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface-1); color: var(--muted); cursor: pointer; }
.ff-pvm.on { background: var(--brand-600); color: var(--on-accent, #161616); border-color: transparent; }
.ffm-jump { display: flex; align-items: center; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.ffm-jump-b { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-1); color: var(--muted); font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.ffm-jump-b.on { background: var(--brand-600); color: var(--on-accent, #161616); border-color: transparent; }
.ff-crumb { border: 0; font: inherit; cursor: pointer; }
.ff-crumb:hover { filter: brightness(.94); }
.ffpub { min-height: 100%; }

/* public funnel preview bar + share block */
.ffpub-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #15161a; color: #f2f2ef; border-radius: 12px; padding: 9px 14px; margin-bottom: 14px; }
.ffpub-eye { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; }
.ffpub-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; opacity: .75; margin-right: auto; }
.ffpub-bar .btn { color: #f2f2ef; border-color: rgba(255,255,255,.22); }
.fn-share { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.fn-share-url { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.fn-share-url span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: var(--brand-700); margin-right: auto; overflow: hidden; text-overflow: ellipsis; }
/* an inline split-layout photo must not collapse to a sliver on phones */
@media (max-width: 700px) {
  .ffp-split .ffp-side:not(:empty) { min-height: 190px; order: -1; }
}

/* ============ GALLERIES, LOGO STRIPS, BUILDER DnD ============ */
.ffp-gallery { display: grid; gap: 8px; width: 100%; margin-top: 22px; }
.ffp-gal-grid { grid-template-columns: repeat(var(--ffp-gcols, 3), 1fr); }
.ffp-gal-row { grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); overflow-x: auto; }
.ffp-gitem { margin: 0; }
.ffp-gitem img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.ffp-gitem figcaption { font-size: .7rem; opacity: .72; margin-top: 5px; text-align: left; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.gal-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); display: flex; flex-direction: column; }
.gal-item img { width: 100%; height: 84px; object-fit: cover; display: block; }
.gal-item .input.sm { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.gal-item-acts { display: flex; gap: 2px; justify-content: flex-end; padding: 3px 4px; border-top: 1px solid var(--line); }
.gal-add { border: 2px dashed var(--line); border-radius: 10px; background: var(--surface-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 130px; color: var(--muted); font: inherit; }
.gal-add:hover { border-color: var(--brand-600); background: var(--brand-50); }
.gal-add span { font-size: .78rem; font-weight: 700; }
.gal-add small { font-size: .66rem; }
.lg-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.lg-pick-i { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 9px; padding: 8px 10px; cursor: pointer; background: var(--surface-1); }
.lg-pick-i.on { border-color: var(--brand-600); background: var(--brand-50); }
.lg-pick-i img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex: none; }
.lg-pick-i span { font-size: .78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-rate-number .ff-star { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); }
.ff-rate-n { font-size: .8rem; font-weight: 800; }
.ff-b-grip { color: var(--muted); cursor: grab; display: grid; place-items: center; flex: none; }
.ff-b-field.dragging { opacity: .45; }
.ff-b-field.drop-into { box-shadow: inset 0 2px 0 var(--brand-600); }
@media (max-width: 700px) { .ffp-gal-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ YESH CONNECT (cn-) ============ */
/* The branded communications layer. Reuses the fc-* console shell; only the
   pieces the shell has no answer for get their own class. */
.cn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cn-kv { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.cn-kv:last-child { border-bottom: 0; }
.cn-kv > span:first-child { color: var(--muted); }
.cn-kv.total { border-top: 1.5px solid var(--line); border-bottom: 0; margin-top: 4px; padding-top: 10px; font-size: .95rem; }
.cn-kv .select, .cn-kv .input { max-width: 240px; }
.cn-num-in { max-width: 110px; }
.cn-clickrow { cursor: pointer; }
.cn-clickrow:hover { background: var(--surface-2); }
.cn-inline-row { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.cn-inline-row .input { flex: 1; min-width: 130px; }

/* gate — why a send is blocked, with the fix attached */
.cn-gate { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm, 8px); margin-bottom: 10px; border: 1px solid; }
.cn-gate.block { background: color-mix(in srgb, var(--neg) 8%, var(--surface-1)); border-color: color-mix(in srgb, var(--neg) 30%, transparent); }
.cn-gate.warn { background: color-mix(in srgb, var(--warn, #d97706) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--warn, #d97706) 30%, transparent); }
.cn-gate-ico { flex: none; display: flex; }
.cn-gate.block .cn-gate-ico { color: var(--neg); }
.cn-gate.warn .cn-gate-ico { color: var(--warn, #d97706); }
.cn-gate-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-gate-txt b { font-size: .85rem; }
.cn-gate-txt i { font-style: normal; font-size: .78rem; color: var(--muted); }

/* meters — included allowance vs used */
.cn-meter { margin-bottom: 12px; }
.cn-meter-top { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 5px; }
.cn-meter-top i { font-style: normal; color: var(--muted); font-weight: 500; }
.cn-meter-track { height: 7px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.cn-meter-fill { display: block; height: 100%; border-radius: var(--pill); background: var(--brand-600); }
.cn-meter-fill.warn { background: var(--warn, #d97706); }
.cn-meter-fill.danger { background: var(--neg); }
.cn-meter-note { font-size: .75rem; color: var(--muted); margin-top: 4px; }

/* activation splash */
.cn-splash { text-align: center; padding: 40px 20px; }
.cn-splash-ico { width: 62px; height: 62px; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.cn-splash h2 { font-size: 1.5rem; font-weight: 750; margin: 0 0 8px; }
.cn-splash > p { max-width: 560px; margin: 0 auto 22px; line-height: 1.6; }
.cn-splash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 auto 22px; max-width: 820px; text-align: left; }
.cn-splash-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 5px; color: var(--brand-700); }
.cn-splash-card b { font-size: .88rem; color: var(--ink); }
.cn-splash-card span { font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* shared inbox — list + thread */
.cn-inbox { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 640px; background: var(--surface-1); }
.cn-inbox-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; background: var(--surface-2); }
.cn-inbox-filters { padding: 10px; margin: 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 5px; }
.cn-conv-scroll { flex: 1; overflow-y: auto; }
.cn-conv { display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 12px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.cn-conv:hover { background: var(--surface-1); }
.cn-conv.on { background: var(--brand-50); }
.cn-conv-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-1); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: var(--muted); }
.cn-conv.on .cn-conv-av { background: var(--surface-1); color: var(--brand-700); }
.cn-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-conv-top { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.cn-conv-top b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-conv-top i { font-style: normal; font-size: .7rem; color: var(--muted); flex: none; }
.cn-conv-prev { font-size: .76rem; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-conv-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cn-conv-tags:empty { display: none; }
.cn-conv-dot { flex: none; min-width: 17px; height: 17px; border-radius: var(--pill); background: var(--brand-600); color: var(--on-accent); font-size: .65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

.cn-thread-wrap { display: flex; flex-direction: column; min-width: 0; }
.cn-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.cn-th-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cn-th-id b { font-size: .95rem; }
.cn-th-actions { display: flex; gap: 4px; flex: none; }
.cn-thread { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; background: var(--surface-2); }
.cn-bubble-row { display: flex; }
.cn-bubble-row.out { justify-content: flex-end; }
.cn-bubble { max-width: 76%; border-radius: 14px; padding: 9px 12px; background: var(--surface-1); border: 1px solid var(--line); }
.cn-bubble.out { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-accent); }
.cn-bubble.out.blocked { background: var(--surface-1); border: 1px dashed var(--neg); color: var(--ink); opacity: .78; }
.cn-bubble-body { font-size: .87rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cn-bubble-meta { font-size: .68rem; margin-top: 5px; opacity: .72; }
.cn-bubble.out .cn-bubble-meta { color: var(--on-accent); }
.cn-mstat { font-weight: 700; }
.cn-bubble-block { font-size: .7rem; color: var(--neg); margin-top: 6px; display: flex; align-items: center; gap: 4px; }

.cn-composer { border-top: 1px solid var(--line); padding: 10px 12px; background: var(--surface-1); }
.cn-composer .cn-input { width: 100%; resize: vertical; }
.cn-composer-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.cn-composer-left, .cn-composer-right { display: flex; align-items: center; gap: 7px; }
.cn-count { font-size: .72rem; color: var(--muted); }
.cn-count.over { color: var(--warn, #d97706); font-weight: 700; }

/* calls + voicemail */
.cn-callbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.cn-callbar .muted { line-height: 1.45; }
.cn-vm { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; margin-bottom: 9px; background: var(--surface-1); cursor: pointer; }
.cn-vm.unread { border-left: 3px solid var(--brand-600); }
.cn-vm-head { display: flex; align-items: flex-start; gap: 10px; }
.cn-vm-tx { font-size: .82rem; line-height: 1.55; color: var(--ink-soft, var(--ink)); background: var(--surface-2); border-radius: var(--radius-sm, 8px); padding: 9px 11px; margin-top: 9px; }
.cn-vm-tx.off { color: var(--muted); font-style: italic; }

/* templates */
.cn-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.cn-tpl { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--surface-1); display: flex; flex-direction: column; gap: 8px; }
.cn-tpl.pick { cursor: pointer; text-align: left; width: 100%; }
.cn-tpl.pick:hover { border-color: var(--brand-600); }
.cn-tpl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cn-tpl-body { font-size: .82rem; line-height: 1.5; color: var(--ink-soft, var(--ink)); background: var(--surface-2); border-radius: var(--radius-sm, 8px); padding: 9px 10px; flex: 1; white-space: pre-wrap; }
.cn-tpl-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* reminders */
.cn-rem { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cn-rem:last-child { border-bottom: 0; }
.cn-rem.sent { opacity: .58; }
.cn-rem-body { font-size: .8rem; line-height: 1.5; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-sm, 8px); padding: 7px 9px; margin-top: 6px; }

/* numbers */
.cn-search-row { display: grid; grid-template-columns: 1.3fr 1fr .8fr auto; gap: 10px; align-items: end; margin-bottom: 12px; }
.cn-search-row .field { margin: 0; }
.cn-num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cn-num { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-1); }
.cn-num b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.cn-num-caps { font-size: .7rem; color: var(--brand-700); font-weight: 700; letter-spacing: .02em; }
.cn-num .btn { margin-top: 4px; }
.cn-steps { margin: 10px 0 10px 18px; font-size: .86rem; line-height: 1.6; color: var(--muted); }
.cn-steps li { margin-bottom: 6px; }

/* routing hours */
.cn-hours { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cn-hour-row { display: flex; align-items: center; gap: 10px; }
.cn-hour-row.off { opacity: .5; }
.cn-hour-d { width: 84px; font-size: .84rem; font-weight: 600; }
.cn-hour-row .input { max-width: 120px; }

/* compliance */
.cn-reg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.cn-reg { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; background: var(--surface-1); display: flex; flex-direction: column; gap: 6px; }
.cn-reg-h { display: flex; align-items: center; justify-content: space-between; }
.cn-reg-name { font-size: .92rem; font-weight: 700; }
.cn-consent-lang { font-size: .75rem; color: var(--muted); line-height: 1.45; margin-top: 4px; font-style: italic; }

/* plan */
.cn-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cn-plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; background: var(--surface-1); display: flex; flex-direction: column; gap: 8px; }
.cn-plan.on { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600) inset; }
.cn-plan-h { display: flex; align-items: center; justify-content: space-between; }
.cn-plan-price { font-size: 1.7rem; font-weight: 800; }
.cn-plan-price i { font-style: normal; font-size: .8rem; font-weight: 500; color: var(--muted); }
.cn-plan-list { list-style: none; padding: 0; margin: 0; font-size: .82rem; }
.cn-plan-list li { padding: 3px 0; border-bottom: 1px solid var(--line); }
.cn-plan-list li:last-child { border-bottom: 0; }
.cn-plan .btn { margin-top: auto; }
.cn-addon { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cn-addon:last-child { border-bottom: 0; }
.cn-addon-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-addon-main b { font-size: .85rem; font-weight: 650; }
.cn-tbl { width: 100%; font-size: .8rem; }
.cn-tbl .r { text-align: right; }
.cn-row-bad td { color: var(--neg); }

/* settings — providers + locked release-2 */
.cn-prov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cn-prov { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; background: var(--surface-1); display: flex; flex-direction: column; gap: 7px; }
.cn-prov.on { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600) inset; }
.cn-prov.off { opacity: .72; }
.cn-prov-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cn-prov-notes { margin: 0; padding-left: 16px; font-size: .74rem; color: var(--muted); line-height: 1.5; }
.cn-prov-notes li { margin-bottom: 4px; }
.cn-locked { border: 1px dashed var(--line); border-radius: var(--radius); padding: 11px 12px; margin-bottom: 9px; background: var(--surface-2); }
.cn-locked-h { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.cn-locked-why { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }

/* modal bits */
.cn-dial-note { display: flex; gap: 9px; align-items: flex-start; background: var(--surface-2); border-radius: var(--radius-sm, 8px); padding: 10px 12px; margin-bottom: 12px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.cn-dial-note b { color: var(--ink); }
.cn-sim-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.cn-check { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); }
.cn-tpl-grid.modal { max-height: 420px; overflow-y: auto; }
.cn-call-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* chip variants Connect leans on */
.chip-mini.ok { background: color-mix(in srgb, var(--pos, #16a34a) 14%, transparent); color: var(--pos, #16a34a); }
.chip-mini.warn { background: color-mix(in srgb, var(--warn, #d97706) 16%, transparent); color: var(--warn, #d97706); }
.chip-mini.neg { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }

/* tablet + phone */
@media (max-width: 1100px) {
  .cn-grid2, .cn-reg-cards { grid-template-columns: 1fr; }
  .cn-splash-grid { grid-template-columns: 1fr 1fr; }
  .cn-search-row { grid-template-columns: 1fr 1fr; }
  .cn-search-row .btn { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cn-inbox { grid-template-columns: 1fr; height: auto; }
  .cn-inbox-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .cn-conv-scroll { max-height: 260px; }
  .cn-thread { height: 340px; }
  .cn-splash-grid { grid-template-columns: 1fr; }
  .cn-callbar { flex-direction: column; align-items: flex-start; }
  .cn-bubble { max-width: 88%; }
  .cn-hour-row { flex-wrap: wrap; }
}
/* ============================================================
   SETTINGS ARCHITECTURE (v56) — four levels, one visual language
   Built from the existing YESH tokens only: cream canvas, lime
   accent, the same rounded cards, the same spacing rhythm.
   ============================================================ */

/* ---- the ladder: the four questions, answered on screen ---- */
.cfg-ladder { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; }
.cfg-lad { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surface-2); opacity: .62; }
.cfg-lad.past { opacity: .85; }
.cfg-lad.on { opacity: 1; border-color: var(--brand-600); background: var(--brand-50); box-shadow: 0 0 0 1px var(--brand-600) inset; }
.cfg-lad-ico { color: var(--muted); }
.cfg-lad.on .cfg-lad-ico { color: var(--brand-700); }
.cfg-lad b { font-size: .8rem; font-weight: 800; color: var(--ink); }
.cfg-lad i { font-size: .69rem; font-style: normal; color: var(--muted); line-height: 1.32; }
.cfg-lad-arrow { display: grid; place-items: center; color: var(--muted); flex: none; }

/* ---- one setting row ---- */
.cfg-grid { display: grid; gap: 2px; }
.cfg-row { padding: 12px 2px; border-bottom: 1px solid var(--line-2); }
.cfg-row:last-child { border-bottom: 0; }
.cfg-row.is-locked { opacity: .78; }
.cfg-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cfg-row-l { min-width: 0; }
.cfg-lbl { display: block; font-size: .84rem; font-weight: 700; color: var(--ink); }
.cfg-advtag { font-style: normal; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); border-radius: var(--pill); padding: 1px 6px; margin-left: 7px; vertical-align: middle; }
.cfg-help { margin: 2px 0 0; font-size: .76rem; color: var(--muted); line-height: 1.42; max-width: 58ch; }
.cfg-state { flex: none; }
.cfg-row-ctl { margin-top: 8px; max-width: 460px; }
.cfg-row-ctl .input, .cfg-row-ctl .select { width: 100%; }
.cfg-inh { display: flex; align-items: center; gap: 5px; margin: 7px 0 0; font-size: .74rem; color: var(--muted); }
.cfg-inh b { color: var(--ink); font-weight: 700; }
.cfg-inh span { color: var(--ink); }
.cfg-inh svg { color: var(--brand-700); flex: none; }
.cfg-lock { display: flex; align-items: center; gap: 5px; margin: 7px 0 0; font-size: .73rem; color: var(--warn, #b45309); }
.cfg-row-acts { margin-top: 8px; }
.cfg-act { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; font: inherit; font-size: .76rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.cfg-act:hover { color: var(--ink); }
.cfg-act.is-primary { color: var(--brand-700); }
.cfg-act.is-primary:hover { text-decoration: underline; }

/* controls that are inherited read as information, not inputs */
.cfg-row:not(.is-set) .cfg-row-ctl .input,
.cfg-row:not(.is-set) .cfg-row-ctl .select,
.cfg-row:not(.is-set) .cfg-row-ctl textarea { background: var(--surface-2); color: var(--muted); cursor: default; }
.cfg-seg.is-locked, .cfg-multi.is-locked { opacity: .6; pointer-events: none; }
.switch.is-locked { opacity: .55; pointer-events: none; }

.cfg-num { display: inline-flex; align-items: center; gap: 7px; width: 100%; }
.cfg-num .input { max-width: 130px; }
.cfg-num i { font-style: normal; font-size: .76rem; color: var(--muted); }
.cfg-color { display: inline-flex; align-items: center; gap: 9px; }
.cfg-color code { font-size: .74rem; color: var(--muted); }
.cfg-ro { display: inline-block; font-size: .82rem; color: var(--ink); padding: 6px 0; }
.cfg-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; }
.cfg-img { display: inline-flex; align-items: center; gap: 9px; }
.cfg-img img { width: 54px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.cfg-img i { display: grid; place-items: center; width: 54px; height: 34px; border-radius: 6px; border: 1px dashed var(--line); color: var(--muted); }
.cfg-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); border-radius: var(--pill); padding: 5px 11px; font-size: .77rem; font-weight: 600; cursor: pointer; background: var(--surface-1); }
.cfg-chip.on { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.cfg-chip input { accent-color: var(--brand-600); width: 13px; height: 13px; }
.cfg-hidden-note { margin: 10px 2px 2px; font-size: .75rem; color: var(--muted); }

/* ---- module Defaults & Integrations page ---- */
.cfg-head { align-items: flex-start; }
.cfg-why { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid var(--brand-600); border-radius: var(--r-md, 10px); background: var(--surface-2); margin-bottom: 14px; font-size: .79rem; line-height: 1.5; color: var(--muted); }
.cfg-why b { color: var(--ink); }
.cfg-why svg { color: var(--brand-700); flex: none; margin-top: 2px; }
.cfg-why a { color: var(--brand-700); font-weight: 700; cursor: pointer; text-decoration: underline; }
.cfg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.cfg-tab { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 11px; font: inherit; font-size: .83rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.cfg-tab:hover { color: var(--ink); }
.cfg-tab.on { color: var(--brand-700); border-bottom-color: var(--brand-600); }
.cfg-tab i { font-style: normal; font-size: .68rem; font-weight: 800; background: var(--surface-2); border-radius: var(--pill); padding: 1px 6px; color: var(--muted); }
.cfg-note { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .77rem; color: var(--muted); }
.cfg-body { padding-bottom: 72px; }
.cfg-panel { max-width: 920px; }
.cfg-explain { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--muted); max-width: 74ch; }
.cfg-explain b { color: var(--ink); }
.cfg-legend { display: grid; gap: 6px; margin-top: 12px; }
.cfg-legend span { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); }
.cfg-legend b { color: var(--ink); }
.cfg-legend i.badge { width: 14px; height: 14px; padding: 0; border-radius: 4px; }
.cfg-secnote { display: flex; align-items: flex-start; gap: 6px; margin: 12px 2px 0; font-size: .75rem; color: var(--muted); line-height: 1.5; }
.cfg-secnote svg { flex: none; margin-top: 2px; }

/* staged-changes bar */
.cfg-draftbar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 11px; padding: 11px 14px; margin-top: 14px; border: 1px solid var(--brand-600); border-radius: var(--r-lg, 14px); background: var(--surface); box-shadow: 0 -6px 22px rgba(0,0,0,.09); }
.cfg-draftbar-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-600); color: var(--on-accent); font-size: .78rem; font-weight: 800; flex: none; }
.cfg-draftbar-tx { flex: 1; min-width: 0; }
.cfg-draftbar-tx b { display: block; font-size: .84rem; color: var(--ink); }
.cfg-draftbar-tx span { display: block; font-size: .73rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* publish review */
.cfg-modal-lede { margin: 0 0 14px; font-size: .86rem; line-height: 1.55; color: var(--muted); }
.cfg-diff { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; }
.cfg-diff-row { display: grid; grid-template-columns: 1.1fr 1.2fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surface-1); }
.cfg-diff-l b { display: block; font-size: .82rem; color: var(--ink); }
.cfg-diff-l i { font-style: normal; font-size: .7rem; color: var(--muted); }
.cfg-diff-v { display: flex; align-items: center; gap: 8px; font-size: .78rem; min-width: 0; }
.cfg-diff-v svg { color: var(--muted); flex: none; }
.cfg-diff-was { color: var(--muted); text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-diff-now { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-diff-imp { display: flex; gap: 5px; flex: none; }

/* tables, presets, history */
.cfg-tablewrap { overflow-x: auto; }
.cfg-table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 620px; }
.cfg-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; padding: 0 10px 8px; }
.cfg-table td { padding: 9px 10px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.cfg-table b { font-weight: 700; color: var(--ink); }
.cfg-table-act { text-align: right; white-space: nowrap; }
.cfg-presets { display: grid; gap: 7px; margin-bottom: 12px; }
.cfg-preset { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surface-1); }
.cfg-preset-l { flex: 1; min-width: 0; }
.cfg-preset-l b { display: block; font-size: .84rem; color: var(--ink); }
.cfg-preset-l i { font-style: normal; font-size: .72rem; color: var(--muted); }
.cfg-io { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-hist { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.cfg-hist-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line-2); }
.cfg-hist-row:last-child { border-bottom: 0; }
.cfg-hist-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--muted); flex: none; }
.cfg-hist-tx { flex: 1; min-width: 0; }
.cfg-hist-tx b { display: block; font-size: .8rem; color: var(--ink); }
.cfg-hist-tx i { font-style: normal; font-size: .7rem; color: var(--muted); }
.cfg-hist-v { font-size: .73rem; color: var(--muted); white-space: nowrap; flex: none; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }

/* workspace search results + module list */
.cfg-results { display: grid; gap: 4px; margin-top: 12px; }
.cfg-result { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line-2); }
.cfg-result-l { flex: 1; min-width: 0; }
.cfg-result-l b { display: block; font-size: .82rem; color: var(--ink); }
.cfg-result-l i { font-style: normal; font-size: .7rem; color: var(--muted); }
.cfg-result-v { font-size: .76rem; color: var(--muted); max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-modlist { display: grid; gap: 8px; }
.cfg-mod { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surface-1); }
.cfg-mod.is-soon { opacity: .72; }
.cfg-mod-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--brand-50); color: var(--brand-700); flex: none; }
.cfg-mod-tx { flex: 1; min-width: 0; }
.cfg-mod-tx b { display: block; font-size: .85rem; color: var(--ink); }
.cfg-mod-tx i { font-style: normal; font-size: .74rem; color: var(--muted); }
.cfg-mod-tests { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cfg-mod-tests em { font-style: normal; font-size: .64rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: var(--pill); padding: 1px 7px; }

/* ---- the asset settings drawer ---- */
.cfg-drawer-root { position: fixed; inset: 0; z-index: 1300; }
.cfg-drawer-back { position: absolute; inset: 0; background: rgba(15,15,15,.34); backdrop-filter: blur(2px); }
.cfg-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -18px 0 44px rgba(0,0,0,.16); transform: translateX(100%); transition: transform .22s cubic-bezier(.22,.8,.3,1); }
.cfg-drawer.open { transform: none; }
.cfg-drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line-2); }
.cfg-drawer-title { flex: 1; min-width: 0; }
.cfg-drawer-kind { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-700); }
.cfg-drawer-title b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-drawer-title i { display: block; font-style: normal; font-size: .74rem; color: var(--muted); margin-top: 3px; }
.cfg-drawer .cfg-ladder { margin: 12px 18px 0; }
.cfg-drawer-nav { display: flex; gap: 4px; overflow-x: auto; padding: 12px 18px 0; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.cfg-dnav { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 9px; font: inherit; font-size: .79rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.cfg-dnav:hover { color: var(--ink); }
.cfg-dnav.on { color: var(--brand-700); border-bottom-color: var(--brand-600); }
.cfg-drawer-body { flex: 1; overflow-y: auto; padding: 4px 18px 18px; }
.cfg-drawer-secnote { font-size: .76rem; color: var(--muted); padding: 12px 0 4px; }
.cfg-dgroup { margin-top: 10px; }
.cfg-dgroup-h { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 10px 0 4px; border-top: 1px solid var(--line-2); }
.cfg-dgroup:first-child .cfg-dgroup-h { border-top: 0; }
.cfg-drawer-foot { display: flex; align-items: center; gap: 6px; padding: 11px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
.cfg-settings-btn { position: relative; }
.cfg-btn-n { font-style: normal; font-size: .64rem; font-weight: 800; background: var(--brand-600); color: var(--on-accent); border-radius: var(--pill); padding: 1px 6px; margin-left: 6px; }

/* ---- the builder inspector ---- */
.cfg-inspector { display: flex; flex-direction: column; min-height: 0; height: 100%; border-left: 1px solid var(--line); background: var(--surface-2); }
.cfg-ins-head { padding: 12px 13px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.cfg-ins-kind { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-700); }
.cfg-ins-head b { display: block; font-size: .9rem; font-weight: 800; color: var(--ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-ins-head i { display: block; font-style: normal; font-size: .71rem; color: var(--muted); margin-top: 2px; }
.cfg-ins-body { flex: 1; overflow-y: auto; padding: 0 13px 13px; }
.cfg-ins-foot { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-top: 1px solid var(--line); }
.cfg-ins-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 28px 18px; text-align: center; color: var(--muted); }
.cfg-ins-empty b { font-size: .86rem; color: var(--ink); }
.cfg-ins-empty span { font-size: .76rem; line-height: 1.5; max-width: 30ch; }

/* ---- AI builder ---- */
.ff-ai { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
.ff-ai-l .input { width: 100%; }
.ff-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ff-ai-chip { text-align: left; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-1); padding: 6px 12px; font: inherit; font-size: .75rem; color: var(--muted); cursor: pointer; }
.ff-ai-chip:hover { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-50); }
.ff-ai-go { display: flex; align-items: center; gap: 11px; margin-top: 14px; flex-wrap: wrap; }
.ff-ai-r { border: 1px solid var(--line); border-radius: var(--r-lg, 14px); background: var(--surface-1); min-height: 260px; }
.ff-ai-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 260px; padding: 24px; text-align: center; color: var(--muted); }
.ff-ai-empty b { font-size: .9rem; color: var(--ink); }
.ff-ai-empty span { font-size: .78rem; max-width: 34ch; line-height: 1.5; }
.ff-ai-plan { padding: 15px 16px; }
.ff-ai-plan-h { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.ff-ai-plan-h b { font-size: .96rem; font-weight: 800; color: var(--ink); }
.ff-ai-fields { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; counter-reset: aif; }
.ff-ai-fields li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.ff-ai-fields li b { flex: 1; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--ink); }
.ff-ai-fields li i { font-style: normal; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-700); }
.ff-ai-ft { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; color: var(--muted); min-width: 96px; }
.ff-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-lg, 14px); background: var(--surface-1); }
.ff-empty b { font-size: .96rem; color: var(--ink); }
.ff-empty span { font-size: .8rem; max-width: 44ch; line-height: 1.55; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .ff-ai { grid-template-columns: 1fr; }
  .cfg-diff-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 760px) {
  .cfg-lad { flex-basis: 100%; }
  .cfg-lad-arrow { display: none; }
  .cfg-drawer { width: 100vw; }
  .cfg-row-ctl { max-width: none; }
  .cfg-draftbar { flex-wrap: wrap; }
  .cfg-draftbar-tx { flex-basis: 100%; order: -1; }
  .cfg-hist-v { display: none; }
  .cfg-result-v { display: none; }
}

.cfg-inline-link { background: none; border: 0; padding: 0; font: inherit; font-size: inherit; color: var(--brand-700); font-weight: 700; cursor: pointer; text-decoration: underline; }
.ff-b-right { display: flex; flex-direction: column; }
.ff-b-right .cfg-inspector { border-left: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); max-height: 46%; flex: 0 1 auto; }
.ff-b-right .cfg-ins-body { max-height: 300px; }
@media (max-width: 900px) { .ff-b-right .cfg-inspector { max-height: none; } }

/* The ladder is a teaching device on a full page and a reminder in a drawer,
   so inside one it collapses to four labels on a single row. */
.cfg-drawer .cfg-ladder { gap: 3px; margin: 10px 18px 0; }
.cfg-drawer .cfg-lad { flex: 1 1 0; padding: 7px 8px; }
.cfg-drawer .cfg-lad i { display: none; }
.cfg-drawer .cfg-lad b { font-size: .72rem; }
.cfg-drawer .cfg-lad-arrow { display: none; }