/* ============================================================================
   APEX AIOS — Dashboard design system
   Deep slate + electric teal + paper. Fraunces display / Inter body.
   ============================================================================ */
:root {
  --bg:#1F3D2B; --bg-2:#2A5240; --ink:#1F3D2B; --ink-soft:#1B2638;
  --teal:#C2A36B; --teal-2:#D8BE8C; --teal-deep:#A8884C;
  --paper:#FFFFFF; --paper-2:#F5F7FA; --cream:#F8FAFB; --cream-2:#EEF2F6;
  --line:#E2E8F0; --line-soft:#EEF2F6;
  --text:#0F172A; --muted:#64748B; --muted-2:#94A3B8;
  --pos:#16A34A; --neg:#DC2626; --warn:#D97706; --info:#2563EB;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);
  --shadow:0 4px 14px rgba(15,23,42,.07),0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:0 18px 50px rgba(11,18,32,.20),0 6px 18px rgba(15,23,42,.10);
  --r:14px; --r-lg:20px; --r-sm:10px;
  --sidebar:268px; --topbar:68px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0 }
html, body { height:100% }
body {
  font-family:var(--sans); color:var(--text); background:var(--cream);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:14.5px; line-height:1.5;
}
h1, h2, h3, h4 { font-family:var(--serif); font-weight:500; letter-spacing:-.01em; color:var(--text) }
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }
.hide { display:none !important }
.mono { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  font-weight:600; font-size:13.5px; transition:.18s ease; border:1px solid transparent; white-space:nowrap }
.btn-primary { background:linear-gradient(135deg,var(--bg-2),var(--bg)); color:#fff; box-shadow:var(--shadow-sm) }
.btn-primary:hover { transform:translateY(-1px); box-shadow:var(--shadow) }
.btn-teal { background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#221a08 }
.btn-teal:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(194,163,107,.4) }
.btn-ghost { background:var(--paper); border-color:var(--line); color:var(--text) }
.btn-ghost:hover { border-color:var(--teal); color:var(--teal-deep) }
.btn-sm { padding:7px 13px; font-size:12.5px }

/* ---------- LOGIN ---------- */
.login { position:fixed; inset:0; display:grid; grid-template-columns:1.1fr .9fr; z-index:50 }
.login__art { position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 20% 10%,var(--bg-2),var(--bg) 45%,#15281D 100%) }
.login__art::after { content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 80% 90%,rgba(194,163,107,.30),transparent 60%),
            radial-gradient(40% 40% at 15% 80%,rgba(227,188,104,.15),transparent 60%) }
.login__art .glow { position:absolute; border-radius:50%; filter:blur(40px); opacity:.45; animation:float 9s ease-in-out infinite }
.login__art .g1 { width:360px; height:360px; background:rgba(194,163,107,.35); top:-60px; right:-40px }
.login__art .g2 { width:300px; height:300px; background:rgba(60,140,90,.50); bottom:-80px; left:-40px; animation-delay:-4s }
@keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-22px) } }
.login__brandwrap { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:space-between; padding:54px }
.login__lede { margin-top:auto; max-width:460px }
.login__lede h1 { color:#fff; font-size:44px; line-height:1.06; letter-spacing:-.02em }
.login__lede h1 .em { font-style:italic; color:var(--teal-2) }
.login__lede p { color:rgba(255,255,255,.72); margin-top:16px; font-size:16px; line-height:1.6 }
.login__pills { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px }
.login__pill { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:12.5px; font-weight:500 }
.login__form { display:flex; align-items:center; justify-content:center; background:var(--cream); padding:40px }
.login__card { width:100%; max-width:380px }
.login__card h2 { font-size:27px }
.login__card .sub { color:var(--muted); margin:8px 0 28px }
.field { margin-bottom:16px }
.field label { display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px }
.field input { width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); color:var(--text); font-size:14.5px; transition:.16s }
.field input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(194,163,107,.16) }
.login__hint { margin-top:18px; font-size:12.5px; color:var(--muted-2); text-align:center }
.login__hint b { color:var(--teal-deep) }

/* ---------- Brand mark ---------- */
.mark { display:inline-flex; align-items:center; gap:12px }
.mark__logo { width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#221a08;
  font-family:var(--serif); font-weight:600; font-size:22px; box-shadow:var(--shadow-sm); flex-shrink:0 }
.mark__name { font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:.01em }
.mark--light .mark__name { color:#fff }
.mark__sub { display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-top:2px }
.mark--light .mark__sub { color:rgba(255,255,255,.55) }

/* ---------- App shell ---------- */
.app { display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh }
.sidebar { background:var(--paper); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:20px 16px; position:sticky; top:0; height:100vh }
.sidebar__brand { padding:6px 8px 22px; border-bottom:1px solid var(--line-soft); margin-bottom:14px }
.nav { display:flex; flex-direction:column; gap:3px; flex:1 }
.nav__item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-sm);
  color:var(--muted); font-weight:500; font-size:14px; transition:.15s; text-align:left }
.nav__item:hover { background:var(--cream-2); color:var(--text) }
.nav__item.active { background:linear-gradient(135deg,var(--bg-2),var(--bg)); color:#fff; box-shadow:var(--shadow-sm) }
.nav__item.active .ico { color:var(--teal-2) }
.nav__item .ico { width:19px; flex-shrink:0; text-align:center }
.sidebar__foot { border-top:1px solid var(--line-soft); padding-top:14px; margin-top:8px }
.sidebar__status { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--cream-2); font-size:12px; color:var(--muted) }
.dot { width:8px; height:8px; border-radius:50%; background:var(--pos); position:relative; flex-shrink:0 }
.dot::after { content:""; position:absolute; inset:-4px; border-radius:50%; background:var(--pos); opacity:.35; animation:pulse 2s infinite }
@keyframes pulse { 0% { transform:scale(.8); opacity:.4 } 70% { transform:scale(2.2); opacity:0 } 100% { opacity:0 } }

.main { display:flex; flex-direction:column; min-width:0 }
.topbar { height:var(--topbar); display:flex; align-items:center; gap:16px; padding:0 28px;
  border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--cream) 80%,transparent);
  backdrop-filter:blur(10px); position:sticky; top:0; z-index:20 }
.topbar__title { font-family:var(--serif); font-size:20px; font-weight:600 }
.topbar__sub { font-size:12.5px; color:var(--muted); margin-top:-2px }
.search { flex:1; max-width:340px; margin-left:8px; position:relative }
.search input { width:100%; padding:9px 14px 9px 36px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); font-size:13px; color:var(--text) }
.search input:focus { outline:none; border-color:var(--teal) }
.search .ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted-2) }
.topbar__right { margin-left:auto; display:flex; align-items:center; gap:10px }
.iconbtn { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--muted);
  border:1px solid var(--line); background:var(--paper); transition:.15s; position:relative }
.iconbtn:hover { color:var(--teal-deep); border-color:var(--teal) }
.avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:600;
  background:linear-gradient(135deg,var(--bg-2),var(--bg)); color:var(--teal-2) }

.view { padding:28px; max-width:1320px; width:100%; animation:viewin .4s cubic-bezier(.2,.7,.2,1) }
@keyframes viewin { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
.view__head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap }
.view__head h2 { font-size:26px }
.view__head .lede { color:var(--muted); margin-top:4px; max-width:660px }

/* ---------- Cards & grid ---------- */
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm) }
.card-pad { padding:20px }
.grid { display:grid; gap:16px }
.g-kpi { grid-template-columns:repeat(4,1fr) }
.g-2 { grid-template-columns:1.6fr 1fr }
.g-3 { grid-template-columns:repeat(3,1fr) }
@media (max-width:1100px) { .g-kpi,.g-3 { grid-template-columns:repeat(2,1fr) } .g-2 { grid-template-columns:1fr } }

.kpi { padding:18px 20px; position:relative; overflow:hidden; transition:.2s }
.kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow) }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--teal),var(--teal-deep)); opacity:0; transition:.2s }
.kpi:hover::before { opacity:1 }
.kpi__label { font-size:12.5px; color:var(--muted); font-weight:600 }
.kpi__val { font-family:var(--serif); font-size:30px; font-weight:600; margin:8px 0 4px; letter-spacing:-.02em }
.kpi__sub { font-size:12px; color:var(--muted-2) }

.card__title { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 0 }
.card__title h3 { font-size:16.5px }
.card__title .meta { font-size:12px; color:var(--muted-2) }

/* ---------- Tables ---------- */
.table { width:100%; border-collapse:collapse; font-size:13.5px }
.table th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2);
  font-weight:700; padding:0 14px 12px; border-bottom:1px solid var(--line) }
.table td { padding:13px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle }
.table tr:last-child td { border-bottom:none }
.table tr:hover td { background:var(--cream-2) }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px }
.pill--pos { color:var(--pos); background:color-mix(in srgb,var(--pos) 12%,transparent) }
.pill--neg { color:var(--neg); background:color-mix(in srgb,var(--neg) 12%,transparent) }
.pill--neu { color:var(--muted); background:var(--cream-2) }
.pill--teal { color:var(--teal-deep); background:color-mix(in srgb,var(--teal) 18%,transparent) }
.pill--info { color:var(--info); background:color-mix(in srgb,var(--info) 12%,transparent) }
.pill--warn { color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent) }

/* ---------- System header strip ---------- */
.sysbar { display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--r);
  background:linear-gradient(120deg,var(--bg-2),var(--bg)); color:#fff; box-shadow:var(--shadow); margin-bottom:18px }
.sysbar__ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:var(--teal-2); font-size:22px }
.sysbar h3 { color:#fff; font-size:19px }
.sysbar p { color:rgba(255,255,255,.7); font-size:12.5px; margin-top:1px }
.sysbar .live { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.1) }

/* ---------- Live concurrent voice-agent calls (multi-instance fleet) ── */
.live-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px }
.live-call { padding:13px 15px; border-radius:14px; border:1px solid var(--line); background:var(--paper);
  box-shadow:inset 3px 0 0 #888; transition:transform .15s ease }
.live-call:hover { transform:translateY(-1px); box-shadow:var(--shadow) }
.live-call__row { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.live-call__name { font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.live-call__caller { margin-top:3px; font-size:12px; color:var(--muted) }
.live-call__svc { margin-top:9px; font-size:13px }
.live-call__foot { margin-top:11px; display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--muted) }
.live-call .lcdot { width:7px; height:7px; border-radius:50%; background:#888; display:inline-block }
.live-call--active { box-shadow:inset 3px 0 0 var(--pos) }
.live-call--active .lcdot { background:var(--pos); animation:lc-pulse 1.4s ease-in-out infinite }
.live-call--ringing { box-shadow:inset 3px 0 0 var(--teal) }
.live-call--ringing .lcdot { background:var(--teal); animation:lc-pulse 1.1s ease-in-out infinite }
.live-call--booking { box-shadow:inset 3px 0 0 var(--warn) }
.live-call--booking .lcdot { background:var(--warn) }
@keyframes lc-pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
.live-empty { padding:34px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line);
  border-radius:var(--r); background:var(--paper) }
.live-empty strong { display:block; font-family:var(--serif); font-size:18px; color:var(--text); margin-bottom:4px }

/* ---------- Bars / chart ---------- */
.bars { display:flex; align-items:flex-end; gap:8px; height:160px; padding:14px 4px 0 }
.bar { flex:1; border-radius:6px 6px 0 0; background:linear-gradient(var(--teal-2),var(--teal));
  position:relative; transition:height .9s cubic-bezier(.2,.8,.2,1); min-height:4px }
.bar span { position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:10.5px; color:var(--muted-2) }
.bar:hover { background:linear-gradient(var(--bg-2),var(--bg)) }

/* ---------- Toasts ---------- */
.toasts { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:10px; z-index:80 }
.toast { display:flex; align-items:center; gap:12px; padding:13px 17px; border-radius:var(--r); background:var(--paper);
  box-shadow:var(--shadow-lg); border:1px solid var(--line); min-width:280px; max-width:380px;
  animation:toastin .4s cubic-bezier(.2,.8,.2,1) }
@keyframes toastin { from { opacity:0; transform:translateX(40px) } to { opacity:1; transform:none } }
.toast__ico { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(135deg,var(--bg-2),var(--bg)); color:var(--teal-2) }
.toast__t { font-weight:600; font-size:13.5px }
.toast__d { font-size:12px; color:var(--muted); margin-top:1px }

.muted { color:var(--muted) }
.small { font-size:12px }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px }
.section-gap { margin-top:18px }

@media (max-width:880px) {
  .app { grid-template-columns:1fr } .sidebar { display:none }
  .login { grid-template-columns:1fr } .login__art { display:none }
}

/* ── Features tab ─────────────────────────────────────────────────────── */
.feature-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px }
.feature-search { padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--paper); font-size:13px; min-width:240px; font-family:inherit; color:var(--text); transition:.15s }
.feature-search:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(194,163,107,.16) }
.feature-chip { padding:7px 14px; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-size:12.5px; cursor:pointer; transition:.15s; color:var(--text); font-weight:500 }
.feature-chip:hover { border-color:var(--teal); color:var(--teal-deep) }
.feature-chip.on { background:linear-gradient(135deg,var(--teal),var(--teal-deep)); border-color:transparent; color:#221a08; box-shadow:var(--shadow-sm) }
.feature-chip.feature-chip--imp-high.on { background:linear-gradient(135deg,#C2A36B,#A8884C) }
.feature-chip.feature-chip--imp-medium.on { background:linear-gradient(135deg,#5B8DEF,#3C6BD0); color:#fff }
.feature-chip.feature-chip--imp-low.on { background:linear-gradient(135deg,#94A3B8,#64748B); color:#fff }
.feature-stats { display:flex; gap:24px; padding:14px 16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px; font-size:13.5px; color:var(--muted); flex-wrap:wrap }
.feature-stats strong { color:var(--text); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; margin-right:6px }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px }
.feature-card { padding:16px 18px; border-radius:14px; border:1px solid var(--line); background:var(--paper); position:relative; transition:.18s ease; display:flex; flex-direction:column }
.feature-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--teal) 40%,var(--line)) }
.feature-card.high { box-shadow:inset 4px 0 0 #C2A36B }
.feature-card.medium { box-shadow:inset 4px 0 0 #5B8DEF }
.feature-card.low { box-shadow:inset 4px 0 0 #94A3B8 }
.feature-card.high:hover { box-shadow:inset 4px 0 0 #C2A36B, var(--shadow) }
.feature-card.medium:hover { box-shadow:inset 4px 0 0 #5B8DEF, var(--shadow) }
.feature-card.low:hover { box-shadow:inset 4px 0 0 #94A3B8, var(--shadow) }
.feature-card__head { display:flex; align-items:center; gap:10px; margin-bottom:4px }
.feature-card__icon { font-size:24px; line-height:1; flex-shrink:0 }
.feature-card__name { font-weight:600; flex:1; font-size:14.5px; color:var(--text); line-height:1.3 }
.feature-card__cat { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; font-weight:600 }
.feature-card__desc { color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:10px }
.feature-card__benefit { font-size:13px; color:var(--text); margin-bottom:12px; line-height:1.45; font-weight:500; padding-left:14px; position:relative; flex:1 }
.feature-card__benefit::before { content:'→'; position:absolute; left:0; top:0; color:var(--teal-deep); font-weight:700 }
.feature-card__foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:8px; border-top:1px dashed var(--line-soft) }
.feature-card__status { font-size:11.5px; font-weight:600 }
.feature-card__id { font-size:10.5px }
.impact-pill { font-size:10px; padding:3px 9px; border-radius:999px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0 }
.impact-pill.impact-high { background:color-mix(in srgb,#C2A36B 22%,transparent); color:#A8884C }
.impact-pill.impact-medium { background:color-mix(in srgb,#5B8DEF 18%,transparent); color:#3C6BD0 }
.impact-pill.impact-low { background:color-mix(in srgb,#94A3B8 16%,transparent); color:#64748B }
.status-live { color:var(--pos) }
.status-available { color:var(--teal-deep) }
.status-coming { color:var(--warn) }
.status-external { color:var(--info) }
.small { font-size:12px }

/* ── Lifecycle view — stat row / approval queue / comment feed / scheduled */
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px }
@media (max-width:1100px) { .statrow { grid-template-columns:repeat(2,1fr) } }
.stat { padding:16px 18px }
.stat__v { font-family:var(--serif); font-size:24px; font-weight:600 }
.stat__l { font-size:12.5px; color:var(--muted); margin-top:2px }
.stat__s { font-size:11px; color:var(--muted-2); margin-top:2px }

.platforms { display:flex; gap:5px }
.plat { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; color:#fff;
  font-size:10px; font-weight:800; flex-shrink:0; letter-spacing:.02em }

.qcard { display:flex; flex-direction:column; gap:12px; padding:16px }
.qcard__thumb { height:120px; border-radius:10px; display:flex; align-items:flex-end; justify-content:space-between;
  padding:12px; color:#fff; font-size:13px; font-weight:600; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--bg-2),var(--bg)) }
.qcard__thumb-title { font-family:var(--serif); font-weight:600; font-size:14px; text-shadow:0 1px 2px rgba(0,0,0,.25) }
.qcard__demo-pill { font-size:9.5px; font-weight:800; letter-spacing:.08em; padding:3px 7px; border-radius:999px;
  background:rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(2px) }
.qcard__thumb.facial  { background:linear-gradient(135deg,#E8B49B,#A67659) }
.qcard__thumb.massage { background:linear-gradient(135deg,#7C9885,#3F5C49) }
.qcard__thumb.nails   { background:linear-gradient(135deg,#C08497,#8A5A6D) }
.qcard__thumb.hair    { background:linear-gradient(135deg,var(--teal-2),var(--teal-deep)) }
.qcard__cap { font-size:13px; line-height:1.45; color:var(--text) }
.qcard__note { font-size:11.5px; color:var(--warn); font-weight:600; display:flex; gap:6px; align-items:center }
.qcard__actions { display:flex; gap:8px; margin-top:auto }

.comment { padding:14px 0; border-bottom:1px solid var(--line-soft) }
.comment:last-child { border-bottom:none }
.comment__top { display:flex; align-items:center; gap:9px; margin-bottom:8px; flex-wrap:wrap }
.comment__user { font-weight:600; font-size:13.5px }
.comment__txt { font-size:13.5px; margin-bottom:9px; color:var(--text) }
.comment__reply { font-size:13px; color:var(--muted); padding:10px 13px; background:var(--cream-2); border-radius:10px;
  border-left:3px solid var(--teal); line-height:1.45 }
.comment__reply.human { border-left-color:var(--neg); color:var(--neg); font-style:italic }
.comment__reply.draft { border-left-color:var(--warn) }

/* Pill: gold variant alias for the lifecycle view */
.pill--gold { color:var(--teal-deep); background:color-mix(in srgb,var(--teal) 18%,transparent) }

/* ── Feed (used by Knowledge FAQs + activity lists) ───────────────────── */
.feed { display:flex; flex-direction:column }
.feed__item { display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-soft) }
.feed__item:last-child { border-bottom:none }
.feed__ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  background:var(--cream-2); color:var(--bg); font-size:15px }
.feed__txt { font-size:13.5px; line-height:1.45 }
.feed__meta { font-size:11.5px; color:var(--muted-2); margin-top:3px; display:flex; gap:8px; align-items:center; line-height:1.4 }
.tag { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px;
  border-radius:6px; background:var(--cream-2); color:var(--muted) }

/* ── Knowledge ask-the-KB hero ────────────────────────────────────────── */
.kb-ask { display:flex; gap:16px; align-items:center; flex-wrap:wrap }
.kb-ask__lede { flex:1; min-width:240px }
.kb-ask__input { position:relative; max-width:380px; flex:1; min-width:240px }
.kb-ask__input input { width:100%; padding:11px 16px 11px 40px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); font-size:14px; color:var(--text); font-family:inherit; transition:.15s }
.kb-ask__input input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(194,163,107,.16) }
.kb-ask__ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:15px }
.kb-answer__label { font-weight:600; color:var(--teal-deep); margin-bottom:6px }

/* ── Integration cards ────────────────────────────────────────────────── */
.intg { display:flex; align-items:flex-start; gap:14px; padding:18px; transition:.18s }
.intg:hover { box-shadow:var(--shadow); transform:translateY(-2px) }
.intg__ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex-shrink:0;
  background:var(--cream-2); font-weight:800; font-size:15px; color:var(--bg); letter-spacing:.02em }
.intg__body { flex:1; min-width:0 }
.intg__name { font-weight:600; font-size:14.5px; color:var(--text) }
.intg__desc { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45 }
.intg__foot { display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap }
/* live status rows (GET /api/integrations) */
.intg-liverow { display:flex; align-items:center; gap:.5rem; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:13.5px }
.intg-liverow:last-child { border-bottom:none }
.intg-livename { font-weight:600; color:var(--text); min-width:14rem }
.intg-livetext { flex:1 }

/* ── Brand logo (self-hosted Scruples wordmark / monogram) ─────────────── */
.brand-logo { display:block }
.brand-logo--login { width:300px; max-width:78%; height:auto;
  background:rgba(255,255,255,.94); border:1px solid rgba(194,163,107,.35);
  border-radius:var(--r); padding:14px 20px; box-shadow:var(--shadow-sm) }
.mark__mark { width:42px; height:42px; border-radius:12px; flex-shrink:0; display:block }
/* Full wordmark, top-left in the sidebar (light --paper bg → dark logo reads fine). */
.brand-logo--side { width:100%; max-width:212px; height:auto; margin:2px 0 4px }
/* DEMO-ONLY niche text wordmark (replaces the Scruples logo image on /go/<niche> demos) */
.brand-demo-word { font-weight:800; font-size:20px; letter-spacing:-.01em; color:var(--teal); padding:4px 2px 2px; line-height:1.2 }
@media (max-width:560px) { .brand-logo--login { width:240px; padding:12px 16px } }

/* ── Salon Site panel ──────────────────────────────────────────────────── */
.site-profile__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 28px }
.site-profile__field { display:flex; flex-direction:column; gap:4px; min-width:0 }
.site-profile__label { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2) }
.site-profile__field a { color:var(--teal-deep); font-weight:600; word-break:break-word }
.site-profile__field a:hover { text-decoration:underline }
.site-hours { margin-top:20px }
.site-hours__table { margin-top:8px; width:auto; min-width:260px }
.site-hours__table td { padding:8px 18px 8px 0; border-bottom:1px solid var(--line-soft) }
.site-hours__table td:first-child { font-weight:600; color:var(--text) }
.site-linkrow { display:flex; flex-wrap:wrap; gap:10px }
.site-intg__hint { margin-top:8px; line-height:1.45 }
.site-intg__hint b { color:var(--text) }
@media (max-width:700px) { .site-profile__grid { grid-template-columns:1fr } }

/* ── Static-demo gold accents ──────────────────────────────────────────── */
/* gold primary CTA (matches static demo's btn-gold) */
.btn-gold { background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#221a08; border:none }
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(194,163,107,.42) }
/* upgrade btn-primary to gold so sign-in + simulate buttons match the demo */
.btn-primary { background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#221a08 }
.btn-primary:hover { box-shadow:0 6px 18px rgba(194,163,107,.42) }
/* gold left-rail on KPI cards (the demo's signature touch) */
.kpi { position:relative; overflow:hidden }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--teal),var(--teal-deep)); opacity:0; transition:opacity .2s ease }
.kpi:hover::before { opacity:1 }
/* gold delta pills (matches the +22% pill styling from the demo) */
.kpi__delta { position:absolute; top:14px; right:14px; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; color:var(--pos); background:color-mix(in srgb,var(--pos) 12%,transparent) }
.kpi__delta.up { color:var(--pos); background:color-mix(in srgb,var(--pos) 12%,transparent) }
.kpi__delta.gold { color:var(--teal-deep); background:color-mix(in srgb,var(--teal) 18%,transparent) }
/* active nav item: gold icon accent (matches demo) */
.nav__item.active .ico { color:var(--teal-2) }
/* gold underline on h2 in view__head, very subtle */
.view__head h2 { position:relative; display:inline-block }
.view__head h2::after { content:""; display:block; width:46px; height:2px; background:linear-gradient(90deg,var(--teal),var(--teal-deep)); border-radius:2px; margin-top:6px }
/* gold focus ring on inputs */
.feature-search:focus, .field input:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(194,163,107,.18) }
/* gold accent on iconbtn hover */
.iconbtn:hover { color:var(--teal-deep); border-color:var(--teal) }

/* ── Impact × Effort scatter chart ────────────────────────────────────── */
.ie-chart { padding:0 18px 8px; }
.ie-chart-svg { width:100%; max-width:920px; height:auto; display:block; margin:0 auto; }
.ie-dot { cursor:pointer; transition:stroke-width .18s ease, filter .18s ease, opacity .18s ease; }
.ie-dot:hover { stroke:#1F3D2B; stroke-width:2.5; filter:drop-shadow(0 3px 8px rgba(0,0,0,.22)); }
.ie-legend { display:flex; gap:14px 18px; flex-wrap:wrap; padding:6px 20px 18px; font-size:11.5px; color:var(--muted); border-top:1px dashed var(--line-soft); margin-top:6px; }
.ie-legend-item { display:inline-flex; align-items:center; gap:6px; }
.ie-legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ── Revenue-by-source chart (Wave-1 Feature C) ───────────────────────── */
.revenue-card .card__title { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.revenue__toggle { display:inline-flex; gap:4px; padding:4px; background:var(--cream-2); border:1px solid var(--line); border-radius:999px; }
.revenue__btn {
  padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  color:var(--muted); border:1px solid transparent; transition:.16s ease;
  background:transparent; cursor:pointer; font-family:inherit;
}
.revenue__btn:hover { color:var(--text); }
.revenue__btn.is-active {
  background:linear-gradient(135deg,var(--teal),var(--teal-deep));
  color:#221a08;
  box-shadow:0 1px 3px rgba(194,163,107,.35);
}
.revenue__body { padding:18px 22px 22px; }
.revenue__strip { display:flex; gap:24px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px dashed var(--line-soft); margin-bottom:18px; }
.revenue__kpi { min-width:120px; }
.revenue__kpi-l { font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.revenue__kpi-v { font-size:22px; font-family:var(--serif); color:var(--bg); margin-top:4px; }
.revenue__empty { padding:18px 4px 4px; }

.revenue__chart { display:grid; gap:12px; }
.revenue__row {
  display:grid;
  grid-template-columns: 200px 1fr 110px;
  align-items:center;
  gap:14px;
}
.revenue__label { display:flex; flex-direction:column; gap:2px; min-width:0; }
.revenue__src { font-weight:600; color:var(--text); font-size:13.5px; }
.revenue__count { font-size:11.5px; }
.revenue__track { background:var(--cream-2); border-radius:999px; height:14px; overflow:hidden; position:relative; }
.revenue__bar {
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--teal-2),var(--teal-deep));
  opacity:.72; transition:width .35s ease;
}
.revenue__bar--lead {
  opacity:1;
  background:linear-gradient(90deg,var(--teal),var(--teal-deep));
  box-shadow:inset 0 0 0 1px rgba(168,136,76,.18);
}
.revenue__amount { text-align:right; font-weight:600; color:var(--bg); font-size:14px; }

@media (max-width: 720px) {
  .revenue-card .card__title { flex-direction:column; align-items:flex-start; gap:10px; }
  .revenue__row {
    grid-template-columns: 1fr;
    gap:6px;
    padding-bottom:10px;
    border-bottom:1px dashed var(--line-soft);
  }
  .revenue__row:last-child { border-bottom:0; padding-bottom:0; }
  .revenue__label { flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px; }
  .revenue__amount { text-align:left; }
}

/* Click-from-chart highlight pulse on the matching feature card */
.feature-card--pulse {
  outline: 3px solid #C2A36B;
  outline-offset: 2px;
  animation: feature-card-pulse 1.6s ease-out forwards;
  position: relative;
  z-index: 2;
}
@keyframes feature-card-pulse {
  0%   { outline-width: 3px;  outline-color: rgba(194,163,107,.95); box-shadow: 0 0 0 0 rgba(194,163,107,.55); }
  60%  { outline-width: 9px;  outline-color: rgba(194,163,107,.25); box-shadow: 0 0 0 18px rgba(194,163,107,0); }
  100% { outline-width: 0;    outline-color: rgba(194,163,107,0);   box-shadow: 0 0 0 0 rgba(194,163,107,0); }
}

/* ============================================================================
   Auto-reply tuning panel (Wave-2 Feature F) — per-channel tone controls.
   Brand-consistent: champagne gold (--teal) accents on forest-green text,
   reuses .card-pad layering. Compact 5-row stack on desktop; same on mobile.
   ============================================================================ */
.rt__row {
  display: grid;
  grid-template-columns: 160px 1.4fr 1.4fr 0.8fr;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.rt__row:last-of-type { border-bottom: none; }
.rt__label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.rt__field { display: flex; flex-direction: column; gap: 6px; }
.rt__field--narrow { max-width: 120px; }
.rt__fieldlabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rt__tone {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--sans);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.rt__tone:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(194,163,107,.16);
}
.rt__words {
  width: 100%;
  accent-color: var(--teal-deep);
}
.rt__wordsv {
  display: inline-block;
  min-width: 32px;
  font-weight: 600;
  color: var(--teal-deep);
}
.rt__esc {
  width: 80px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.rt__esc:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(194,163,107,.16);
}
.rt__savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.btn-gold {
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #221a08;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn-gold:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 720px) {
  .rt__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .rt__field--narrow { max-width: none; }
  .rt__savebar { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   Sequence flow panel (Wave-3 H) — read-only nurture-sequence flowchart.
   Desktop: SVG canvas. Mobile (<720px): vertical list with arrows. The SVG
   colours live in sequence-flow-svg.ts (fills via attr) — these rules style
   the chrome (picker, legend, fallback) only.
   ============================================================================ */
.seqflow__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.seqflow__pickerwrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.seqflow__pickerlabel {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.seqflow__picker {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--sans);
  min-width: 220px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.seqflow__picker:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(194, 163, 107, 0.16);
}
.seqflow__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.seqflow__legenditem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--text);
}
.seqflow__legenditem::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cream-2);
  border: 1px solid var(--line);
}
.seqflow__legenditem[data-kind="trigger"]::before { background: #1F3D2B; border-color: #1F3D2B; }
.seqflow__legenditem[data-kind="send"]::before    { background: #C2A36B; border-color: #A8884C; }
.seqflow__legenditem[data-kind="wait"]::before    { background: #F5F7FA; border-color: #94A3B8; }
.seqflow__legenditem[data-kind="gate"]::before    { background: #FBE6BD; border-color: #D97706; }
.seqflow__legenditem[data-kind="end"]::before     { background: #EEF2F6; border-color: #94A3B8; }

.seqflow__desc {
  margin-bottom: 14px;
  line-height: 1.5;
}
.seqflow__canvas {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 4px;
}
.seqflow__canvas .seqflow__svg {
  max-width: 100%;
  height: auto;
}
.seqflow__node {
  cursor: default;
  transition: opacity 0.15s;
}
.seqflow__node:hover {
  opacity: 0.88;
}
.seqflow__fallback {
  text-align: center;
  padding: 28px 8px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
}

/* Mobile vertical list — desktop hides it. */
.seqflow__mobile {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.seqflow__mobileitem {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  margin-bottom: 6px;
}
.seqflow__mobileitem[data-kind="trigger"] { background: #1F3D2B; color: #fff; }
.seqflow__mobileitem[data-kind="trigger"] .seqflow__mobiledetail { color: rgba(255, 255, 255, 0.7); }
.seqflow__mobileitem[data-kind="send"]    { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: #221a08; }
.seqflow__mobileitem[data-kind="send"] .seqflow__mobiledetail    { color: rgba(34, 26, 8, 0.78); }
.seqflow__mobileitem[data-kind="wait"]    { background: var(--paper-2); border-color: var(--muted-2); }
.seqflow__mobileitem[data-kind="gate"]    { background: #FBE6BD; border-color: var(--warn); }
.seqflow__mobileitem[data-kind="end"]     { background: var(--cream-2); border-color: var(--muted-2); }
.seqflow__mobilelabel {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14.5px;
}
.seqflow__mobiledetail {
  margin-top: 4px;
  white-space: pre-wrap;
}
.seqflow__mobilegap {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 0;
  letter-spacing: 0.05em;
}

@media (max-width: 720px) {
  .seqflow__header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .seqflow__picker { min-width: 0; width: 100%; }
  .seqflow__canvas { display: none; }
  .seqflow__mobile { display: block; }
}

/* ---------- Sequence flow edit mode (Wave-4 Agent M) ---------- */
/* Edit / Save / Cancel / Revert button cluster — sits at the right of the
   sequence-flow header. Champagne-gold hover for the edit/save buttons keeps
   the brand consistent (forest is reserved for the primary save action). */
.seqflow__controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.seqflow__editbtn,
.seqflow__cancelbtn,
.seqflow__revertbtn {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--text);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.seqflow__editbtn:hover,
.seqflow__cancelbtn:hover {
  border-color: var(--teal-deep, #A8884C);
  background: var(--cream-2, #EEF2F6);
}
.seqflow__revertbtn:hover {
  border-color: #B91C1C;
  color: #B91C1C;
}
.seqflow__savebtn {
  padding: 6px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #1F3D2B;
  background: #1F3D2B; /* forest green — primary save action */
  color: #fff;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.seqflow__savebtn:hover:not(:disabled) {
  background: #2A5237;
  border-color: #2A5237;
}
.seqflow__savebtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* "Customized" badge — visible only when GET returned customized:true. */
.seqflow__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--teal, #C2A36B), var(--teal-deep, #A8884C));
  color: #221a08;
  border: 1px solid var(--teal-deep, #A8884C);
}
.seqflow__badge[hidden] { display: none; }

/* The editor panel — opens between the SVG and the mobile list when something
   is selected in edit mode. */
.seqflow__editor {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--cream, #FBF7EF);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.seqflow__editor[hidden] { display: none; }
.seqflow__editortitle {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.seqflow__editornodelabel {
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.seqflow__editorlabel {
  display: block;
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.seqflow__editorinput,
.seqflow__editortextarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 14px;
  font-family: var(--sans);
  color: var(--text);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.seqflow__editortextarea {
  font-family: var(--sans);
  line-height: 1.45;
  resize: vertical;
  min-height: 80px;
}
.seqflow__editorinput:focus,
.seqflow__editortextarea:focus {
  outline: none;
  border-color: var(--teal-deep, #A8884C);
  box-shadow: 0 0 0 3px rgba(194, 163, 107, 0.18);
}
.seqflow__editorchips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.seqflow__editorchip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.seqflow__editorchip:hover {
  background: var(--cream-2, #EEF2F6);
  border-color: var(--teal-deep, #A8884C);
}

/* Editable SVG — nodes get a pointer cursor; the currently selected node /
   edge gets a champagne-gold halo (handled inline by stroke colour). */
.seqflow__svg--edit .seqflow__node--edit { cursor: grab; }
.seqflow__svg--edit .seqflow__node--edit:active,
.seqflow__svg--edit .seqflow__node--edit.is-grabbing { cursor: grabbing; }
.seqflow__svg--edit .seqflow__edge,
.seqflow__svg--edit .seqflow__edgepill,
.seqflow__svg--edit .seqflow__edgetext { cursor: pointer; }

/* Mobile editor controls — sit inside the existing .seqflow__mobileitem so
   they inherit the kind-coloured background. */
.seqflow__mobiledetailedit {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 13.5px;
  font-family: var(--sans);
  color: var(--text);
  line-height: 1.45;
  resize: vertical;
  min-height: 64px;
}
.seqflow__mobilewaitwrap {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.seqflow__mobilewaitinput {
  flex: 0 0 110px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 13.5px;
  font-family: var(--sans);
  color: var(--text);
}
@media (max-width: 720px) {
  .seqflow__editor { padding: 12px 14px; }
}

/* ---------- Copilot (Wave-3 K) ---------- */
.copilot-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  margin-top: 14px;
}
@media (max-width: 920px) {
  .copilot-grid { grid-template-columns: 1fr; }
}
.copilot-chat {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  padding: 0;
  overflow: hidden;
}
.copilot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 22px 22px 8px;
  max-height: 60vh;
}
.copilot-msg {
  display: flex;
  margin-bottom: 14px;
}
.copilot-msg--user { justify-content: flex-end; }
.copilot-msg--assistant { justify-content: flex-start; }
.copilot-bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--cream-2);
  color: var(--text);
  line-height: 1.55;
  font-size: 14px;
  border: 1px solid var(--line-soft);
}
.copilot-msg--user .copilot-bubble {
  background: linear-gradient(135deg, var(--bg-2), var(--bg));
  color: #fff;
  border-color: transparent;
}
.copilot-bubble p { margin: 0 0 6px 0; }
.copilot-bubble p:last-child { margin-bottom: 0; }
.copilot-bubble em.muted { color: var(--muted); font-style: italic; }
.copilot-suggest {
  margin: 6px 0 0 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.copilot-suggest li { margin: 2px 0; }
.copilot-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.copilot-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.copilot-pill--call {
  background: #FFF7E8;
  border-color: #E9D7A8;
  color: #7A5712;
}
.copilot-pill--ok {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}
.copilot-pill--err {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #991B1B;
}
.copilot-composer {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  background: var(--paper);
}
.copilot-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.copilot-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(194, 163, 107, 0.18);
}
.copilot-send { padding: 9px 22px; }
.btn-gold {
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #221a08;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(194,163,107,.4); }
.copilot-history {
  align-self: start;
}
.copilot-hist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.copilot-hist-row:last-child { border-bottom: none; }

/* ── Demo-empty state (Recent leads / Recent calls — pre-first-call) ──── */
/* Surfaces the Vapi inbound number so the owner can dial it during a   */
/* screen-share demo and the first call appears within ~5s.             */
.demo-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 16px 18px;
  background: var(--cream-2); color: var(--ink); }
.demo-empty__title { font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--bg); margin-bottom: 6px; }
.demo-empty__body { font-size: 13px; color: var(--muted); line-height: 1.5; }
.demo-empty__phone { color: var(--bg); font-weight: 700; padding: 1px 6px;
  background: white; border: 1px solid var(--line); border-radius: 6px; }

/* ── Lead summary cell (Recent leads "Details" column) ────────────────── */
.lead-sum { display: flex; flex-direction: column; gap: 3px; }
.lead-sum__row { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px;
  line-height: 1.45; }
.lead-sum__k { color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; min-width: 64px; font-weight: 600; }
.lead-sum__v { color: var(--ink); word-break: break-word; }
.lead-sum__row--extra .lead-sum__v { color: var(--muted); font-style: italic; }

/* ════════════════════════════════════════════════════════════════════════
   WAVE-4 PANELS — Live Calls, Agent Settings, Outbound
   Reuses the existing tokens (--teal/gold, --line, --cream-2, --r*). Every
   grid wraps on a phone; the sidebar collapse is handled upstream.
   ════════════════════════════════════════════════════════════════════════ */

/* 6-up KPI strip for Live Calls (the base .g-kpi is 4-up) */
.g-kpi-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .g-kpi-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .g-kpi-6 { grid-template-columns: repeat(2, 1fr); } }

/* ── Status badges good/warn/bad/neutral (shared) ─────────────────────── */
.pill--good    { color: var(--pos);   background: color-mix(in srgb, var(--pos) 12%, transparent); }
.pill--bad     { color: var(--neg);   background: color-mix(in srgb, var(--neg) 12%, transparent); }
.pill--neutral { color: var(--muted); background: var(--cream-2); }

/* ── Live Calls — sentiment badge + transcript drill-down ─────────────── */
.sent-badge { display: inline-flex; align-items: center; gap: 6px; }
.sent-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: middle; }
.lc-row { cursor: pointer; }
.lc-row .tr-caret { color: var(--muted-2); transition: transform .15s ease; display: inline-block; }
.lc-row--open .tr-caret { transform: rotate(90deg); color: var(--teal-deep); }
.lc-drill td { background: var(--cream-2); padding: 0 14px 14px; }
.tr-drill { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 2px; }
.tr-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.tr-who { flex-shrink: 0; min-width: 52px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; text-align: center; }
.tr-line--agent .tr-who  { color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 18%, transparent); }
.tr-line--caller .tr-who { color: var(--bg); background: color-mix(in srgb, var(--bg-2) 16%, transparent); }
.tr-text { color: var(--text); }

/* ── Agent Settings — form sections + controls ────────────────────────── */
.settings-section { scroll-margin-top: 80px; }
.set-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
@media (max-width: 640px) { .set-grid { grid-template-columns: 1fr; } }
.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.set-input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 13.5px; color: var(--text); background: var(--paper);
  transition: border-color .15s ease, box-shadow .15s ease; }
textarea.set-input { resize: vertical; line-height: 1.5; }
.set-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(194,163,107,.16); }
.set-input:disabled { background: var(--cream-2); color: var(--muted-2); }
.set-input--sm { width: 96px; }
.set-input--time { width: 130px; }

/* toggle */
.set-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 6px 0; }
.set-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.set-toggle__track { position: relative; width: 40px; height: 22px; border-radius: 999px;
  background: var(--line); transition: background .15s ease; flex-shrink: 0; }
.set-toggle__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s ease; }
.set-toggle input:checked + .set-toggle__track { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); }
.set-toggle input:checked + .set-toggle__track .set-toggle__knob { transform: translateX(18px); }
.set-toggle__label { font-size: 13.5px; color: var(--text); }

/* 7-day hours editor */
.hours-editor { display: flex; flex-direction: column; gap: 8px; }
.hours-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.hours-row:last-child { border-bottom: none; }
.hours-day { min-width: 92px; font-weight: 600; font-size: 13.5px; }
.hours-closed { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.hours-times { display: flex; align-items: center; gap: 8px; }
.hours-dash { color: var(--muted-2); }

/* chip list (escalation triggers) */
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 5px 6px 5px 12px; border-radius: 999px; color: var(--teal-deep);
  background: color-mix(in srgb, var(--teal) 16%, transparent); }
.chip__x { border: none; background: transparent; color: var(--teal-deep); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%; }
.chip__x:hover { background: rgba(0,0,0,.08); }
.chip-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chip-add .set-input { flex: 1; min-width: 180px; }

/* knowledge-base + mini list editors */
.kb-list { display: flex; flex-direction: column; gap: 14px; }
.kb-item { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; background: var(--cream); }
.kb-item__head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.kb-item__head .set-input { flex: 1; min-width: 140px; }
.kb-item__head select.set-input { flex: 0 0 130px; min-width: 110px; }
.mini-list { display: flex; flex-direction: column; gap: 8px; }
.mini-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mini-row .set-input:not(.set-input--sm) { flex: 1; min-width: 120px; }

/* sticky save bar */
.save-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px); box-shadow: var(--shadow); }
.save-bar__spacer { flex: 1; }
.save-bar__err { color: var(--neg); font-size: 13px; font-weight: 600; }

/* ── Outbound — status board + parse errors ───────────────────────────── */
.status-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 760px) { .status-board { grid-template-columns: repeat(2, 1fr); } }
.status-tile { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px;
  background: var(--paper); position: relative; overflow: hidden; }
.status-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.status-tile--good::before    { background: var(--pos); }
.status-tile--bad::before     { background: var(--neg); }
.status-tile--warn::before    { background: var(--warn); }
.status-tile--neutral::before { background: var(--muted-2); }
.status-tile--teal::before    { background: linear-gradient(var(--teal), var(--teal-deep)); }
.status-tile__v { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.status-tile__l { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.digit-key { display: inline-flex; align-items: center; justify-content: center; min-width: 24px;
  padding: 2px 8px; border-radius: 6px; font-weight: 700; color: var(--bg);
  background: var(--cream-2); border: 1px solid var(--line); }
.ob-camp-row--active td { background: color-mix(in srgb, var(--teal) 8%, transparent); }
.parse-errs { margin-top: 12px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  border-radius: var(--r-sm); padding: 12px 14px; background: color-mix(in srgb, var(--warn) 8%, transparent); }
.parse-errs__title { font-weight: 600; font-size: 13px; color: var(--warn); margin-bottom: 6px; }
.parse-errs ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text); line-height: 1.6; }

/* ── feature flag: per-tenant "off" state (multi-tenant template) ───────── */
.feature-card--off { opacity: .62; filter: grayscale(.35); }
.feature-card--off:hover { opacity: .85; }
.feature-offbadge {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--cream-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}

/* ── connectors (multi-tenant template — paste-creds onboarding) ────────── */
.connector { transition: border-color .15s ease, box-shadow .15s ease; }
.connector:hover { border-color: var(--teal); box-shadow: 0 2px 12px rgba(194,163,107,.14); }
.connector--connected { border-left: 3px solid var(--pos); }
.connector--available { border-left: 3px solid var(--teal); }
.connector--connect   { border-left: 3px solid var(--muted-2); }
.connector--external  { border-left: 3px solid var(--teal-deep); }
.connector--coming    { border-left: 3px solid var(--line); }
.connector__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.connector__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.connector__name { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--text); }
.connector__group { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.connector__desc { margin: 8px 0 4px; color: var(--text); }
.connector__docs { display: inline-block; margin-bottom: 6px; color: var(--teal-deep); font-weight: 600; }
.connector__docs:hover { text-decoration: underline; }
.connector__note { margin-top: 8px; }
.connector__form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.connector__field { display: flex; flex-direction: column; gap: 4px; }
.connector__field-label { font-size: 12.5px; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px; }
.connector__secret { font-size: 11px; }
.connector__input { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 13px; font-family: var(--sans); background: var(--paper); color: var(--text); }
.connector__input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(194,163,107,.16); }
.connector__help { line-height: 1.35; }
.connector__actions { display: flex; justify-content: flex-end; margin-top: 2px; }

@media (max-width: 720px) {
  .connector__head { flex-direction: column; align-items: stretch; }
  .connector__actions { justify-content: stretch; }
  .connector__actions .btn { width: 100%; justify-content: center; }
}

/* ── Cohort retention heat-map (Wave-4 Agent O) ─────────────────────────── */
.cohort-card .card__title { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cohort__body { padding:18px 22px 22px; }
.cohort__strip { display:flex; gap:24px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px dashed var(--line-soft); margin-bottom:18px; }
.cohort__kpi { min-width:140px; }
.cohort__kpi-l { font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.cohort__kpi-v { font-size:22px; font-family:var(--serif); color:var(--bg); margin-top:4px; }
.cohort__empty { padding:18px 4px 4px; }
.cohort__grid-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cohort__grid { border-collapse:separate; border-spacing:2px; width:100%; min-width:560px; }
.cohort__th {
  font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.04em; padding:8px 6px; text-align:center; background:transparent;
  font-family:var(--sans); border:0;
}
.cohort__th--cohort { text-align:left; padding-left:10px; min-width:96px; }
.cohort__th--size { text-align:right; padding-right:10px; min-width:64px; }
.cohort__td {
  padding:10px 6px; font-size:12.5px; text-align:center; background:var(--cream);
  border-radius:6px; transition:transform .14s ease, box-shadow .14s ease;
}
.cohort__td--cohort { text-align:left; padding-left:10px; font-weight:600; color:var(--text); background:transparent; }
.cohort__td--size { text-align:right; padding-right:10px; color:var(--muted); background:transparent; }
.cohort__cell { font-weight:600; font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); min-width:46px; }
.cohort__cell:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(168,136,76,.18); cursor:default; }
.cohort__cell--blank { background:var(--cream-2); color:var(--muted-2); }
.cohort__mobile { display:none; list-style:none; padding:0; margin:0; }
.cohort__mobile-row {
  padding:10px 4px; border-bottom:1px dashed var(--line-soft); font-size:13px; color:var(--text);
}
.cohort__mobile-row:last-child { border-bottom:0; }

@media (max-width: 720px) {
  .cohort-card .card__title { flex-direction:column; align-items:flex-start; gap:10px; }
  .cohort__grid-wrap { display:none; }
  .cohort__mobile { display:block; }
  .cohort__strip { gap:16px; }
  .cohort__kpi { min-width:46%; }
}

/* ---------- Demo "Book your Free Audit" bar (demo-viewer sessions only) ---------- */
.demo-audit-bar { position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  padding:12px 20px; background:linear-gradient(135deg,var(--bg-2),var(--bg)); color:#fff;
  box-shadow:0 -6px 18px rgba(11,18,32,.22) }
.demo-audit-bar__msg { font-size:13.5px; color:rgba(255,255,255,.82) }
.demo-audit-bar__cta { display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#221a08; font-weight:600;
  font-size:13.5px; white-space:nowrap; transition:.16s }
.demo-audit-bar__cta:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(194,163,107,.4) }

/* ── v1 (Classic) flat nav — exposed via the topbar version switch ───────────
   Theme-agnostic: uses currentColor + neutral tints so it reads correctly under
   any per-niche accent. v2 (nested IA) remains the default renderer. */
.nav1 { padding:8px 6px; }
.nav1__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.nav1__group { margin:10px 0 2px; }
.nav1__group-label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; opacity:.55; padding:0 10px; }
.nav1__link { display:block; padding:6px 10px; border-radius:6px; font-size:13px; color:inherit;
  text-decoration:none; opacity:.85; transition:.12s; }
.nav1__link:hover { background:rgba(127,127,127,.12); opacity:1; }
.nav1__link.is-active { background:rgba(127,127,127,.18); opacity:1; font-weight:600; }
/* Density tweak so the classic shell reads as a distinct, simpler layout. */
[data-dash-version="v1"] .topbar__sub { display:none; }

/* ── l03 Loyalty Rewards panel ─────────────────────────────────────────────
   data-kind hooks let the SVG (server-rendered, zero-dep) inherit the brand
   palette: forest-green --bg for EARN, champagne-gold --teal for REDEEM. */
.loyalty__chart { margin:16px 0; }
.loyalty__chart-card { background:#fff; border:1px solid var(--line,#E2E8F0); border-radius:10px;
  padding:14px 18px; box-shadow:var(--shadow-sm); }
.loyalty__chart-title { font-size:13px; font-weight:600; color:var(--muted,#64748B); margin-bottom:8px; }
.loyalty__chart-svg { width:100%; overflow:hidden; }
.loyalty__chart-svg svg { width:100%; height:auto; }
.loyalty-bars__bar[data-kind="earn"]   { fill:var(--bg,#1F3D2B); }
.loyalty-bars__bar[data-kind="redeem"] { fill:var(--teal,#C2A36B); }

.loyalty__accounts { background:#fff; border:1px solid var(--line,#E2E8F0); border-radius:10px;
  overflow:hidden; box-shadow:var(--shadow-sm); }
.loyalty__table { width:100%; border-collapse:collapse; font-size:14px; }
.loyalty__table th { text-align:left; padding:10px 14px; font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted,#64748B); background:var(--cream-2,#EEF2F6); }
.loyalty__table td { padding:10px 14px; border-top:1px solid var(--line,#E2E8F0); }
.loyalty__cell-name { font-weight:600; color:var(--bg,#1F3D2B); }
.loyalty__cell-name:hover { color:var(--teal-deep,#A8884C); text-decoration:underline; }
.loyalty__cell-action { text-align:right; }
.loyalty__no-reward { color:var(--muted,#94A3B8); }

/* ── Galaxy demo v2 — LOGIN PAGE ONLY (never the dashboard) ──────────────────
   Classic is default + unchanged; .skin-galaxy (toggled in app.js, persisted in
   localStorage) reveals the animated canvas behind a scrim so the form stays
   WCAG-AA legible. The canvas itself is drawn by app.js (dep-free Canvas 2D;
   prefers-reduced-motion → static starfield). */
.galaxy-canvas { position:absolute; inset:0; width:100%; height:100%; display:none; z-index:0; pointer-events:none; }
.login.skin-galaxy { background:#05070f; }
.login.skin-galaxy .galaxy-canvas { display:block; }
.login.skin-galaxy .login__art { background:transparent; position:relative; z-index:1; }
.login.skin-galaxy .login__art .glow { display:none; }
/* Galaxy mode: the form column is transparent so the galaxy spans the FULL screen
   behind both columns (the translucent login card floats on it). */
.login.skin-galaxy .login__form { position:relative; z-index:1; background:transparent; }
.login.skin-galaxy .login__card { background:rgba(12,16,28,.74); backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.14); box-shadow:0 18px 60px rgba(0,0,0,.5); }
.login.skin-galaxy .login__card h2, .login.skin-galaxy .login__card .sub,
.login.skin-galaxy .login__card label { color:#eaf0ff; }
.login.skin-galaxy .login__lede h1, .login.skin-galaxy .login__lede p { color:#eaf0ff;
  text-shadow:0 1px 14px rgba(0,0,0,.65); }
.login.skin-galaxy .login__lede h1 .em { color:#9db4ff; }
.login.skin-galaxy .login__pill { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:#dde6ff; }
.skin-toggle { position:absolute; top:16px; right:18px; z-index:3; display:flex; gap:2px; padding:3px;
  border-radius:999px; background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.skin-toggle__btn { appearance:none; border:0; background:transparent; color:#cfd6e6; font:inherit;
  font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px; cursor:pointer; transition:.15s; }
.skin-toggle__btn.is-active { background:linear-gradient(135deg,#6d8bff,#9b6dff); color:#fff;
  box-shadow:0 2px 10px rgba(110,120,255,.45); }
.skin-toggle__btn:hover:not(.is-active) { color:#fff; }
@media (max-width:900px){ .skin-toggle{ top:10px; right:10px; } }

.loyalty__drawer { padding:0 14px; }
.loyalty__drawer-title { font-weight:600; margin:12px 0 8px; color:var(--bg,#1F3D2B); }
.loyalty__ledger-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px; }
.loyalty__ledger-table th { text-align:left; padding:6px 10px; color:var(--muted,#64748B); font-weight:600; }
.loyalty__ledger-table td { padding:6px 10px; border-top:1px solid var(--line,#E2E8F0); }
.loyalty__delta--earn   { color:#0B7A4B; font-weight:600; }
.loyalty__delta--redeem { color:var(--teal-deep,#A8884C); font-weight:600; }

/* ── e09: DM Bookings card (additive) ───────────────────────────────────── */
.dmfunnel { width:100%; overflow-x:auto; margin:8px 0 14px; }
.dmfunnel__svg { max-width:100%; height:auto; }
.dmbookings { width:100%; border-collapse:collapse; font-size:13px; }
.dmbookings th { text-align:left; padding:6px 10px; color:var(--muted,#64748B); font-weight:600; }
.dmbookings td { padding:6px 10px; border-top:1px solid var(--line,#E2E8F0); }

/* ── e10: A/B Reply Variants panel (tokens only; no new palette) ──────────── */
.replyvar-authoring { width:100%; border-collapse:collapse; font-size:13px; margin:8px 0 12px; }
.replyvar-authoring th { text-align:left; padding:6px 10px; color:var(--muted,#64748B); font-weight:600; }
.replyvar-authoring td { padding:6px 10px; border-top:1px solid var(--line,#E2E8F0); vertical-align:top; }
.replyvar-authoring .rv-label { font-weight:700; }
.replyvar-authoring .rv-body { color:var(--muted,#64748B); }
.replyvar-add { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px; }
.replyvar-add input { padding:6px 10px; border:1px solid var(--line,#E2E8F0); border-radius:8px; font:inherit; }
.replyvar-add input[name="body"] { flex:1 1 220px; }
.replyvar-add input[name="weight"] { width:80px; }
.replyvar-results { margin-top:6px; }
.rv-chart { width:100%; overflow-x:auto; margin:6px 0 10px; }
.replyvar__svg { max-width:100%; height:auto; }
.replyvar__bar { transition:width .35s ease; }
.replyvar__row[data-leading] .replyvar__label { color:var(--teal-deep,#A8884C); }
.rv-leading { display:inline-block; padding:2px 10px; border-radius:999px;
  background:var(--teal,#C2A36B); color:var(--ink,#221A08); font-weight:700; font-size:12px; }
.replyvar-stats { width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; }
.replyvar-stats th { text-align:left; padding:6px 10px; color:var(--muted,#64748B); font-weight:600; }
.replyvar-stats td { padding:6px 10px; border-top:1px solid var(--line,#E2E8F0); }

/* ── v15 Spam filter panel ─────────────────────────────────────────────────── */
.spam-chip { display:inline-block; padding:2px 10px; border-radius:999px;
  font-weight:700; font-size:11.5px; letter-spacing:.01em; }
.spam-chip--block { background:rgba(220,38,38,.12); color:var(--neg,#DC2626); }
.spam-chip--allow { background:rgba(22,163,74,.12); color:var(--pos,#16A34A); }
.spam-chart { margin:18px 0 6px; }
.spam-chart svg { max-width:100%; height:auto; }
.spam-config { display:flex; flex-direction:column; gap:14px; margin:18px 0 8px;
  padding:18px; border:1px solid var(--line,#E2E8F0); border-radius:var(--r,14px);
  background:var(--paper,#FFFFFF); }
.spam-config__toggles { display:flex; flex-wrap:wrap; gap:18px; }
.spam-config__toggle { display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--text,#0F172A); cursor:pointer; }
.spam-config__field { display:flex; flex-direction:column; gap:6px; }
.spam-config__label { font-size:12.5px; font-weight:600; color:var(--muted,#64748B); }
.spam-config__textarea { width:100%; padding:10px 12px; border:1px solid var(--line,#E2E8F0);
  border-radius:var(--r-sm,10px); background:var(--paper,#FFFFFF); color:var(--text,#0F172A);
  font-family:var(--sans); font-size:13px; resize:vertical; }

/* ── Login engine showcase (generic AIOS, tenant-agnostic login page) ──────── */
.engine-grid{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:680px}
.engine-card{position:relative;display:flex;flex-direction:column;gap:3px;padding:16px 16px 15px 56px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,0.10),rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.14);backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,0.18);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}
.engine-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#4F46E5,#22D3EE)}
.engine-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,0.5);box-shadow:0 10px 32px rgba(34,211,238,0.18)}
.engine-card__ico{position:absolute;left:14px;top:15px;width:30px;height:30px;display:grid;place-items:center;font-size:16px;line-height:1;
  border-radius:9px;background:linear-gradient(150deg,#4F46E5,#22D3EE);box-shadow:0 3px 10px rgba(79,70,229,0.4)}
.engine-card b{font-size:13.5px;font-weight:700;color:#fff;letter-spacing:.2px}
.engine-card span:last-child{font-size:11.5px;line-height:1.4;color:rgba(255,255,255,0.74)}
@media (max-width:880px){.engine-grid{grid-template-columns:1fr;max-width:420px}}

/* ── Per-tenant contact card (sidebar foot) ───────────────────────────────── */
.tenant-contact{padding:10px 12px;margin-bottom:10px;border-radius:12px;background:rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.06);font-size:11.5px;line-height:1.5}
.tenant-contact__name{font-weight:700;font-size:12.5px;margin-bottom:4px;color:var(--c-ink,#1a1a1a)}
.tenant-contact__row{color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Settings-panel contract (shared by Outbound + Social Media view pages) ── */
.settings-stack{display:flex;flex-direction:column;gap:18px;max-width:880px}
.setting-group{border:1px solid rgba(0,0,0,0.08);border-radius:16px;background:#fff;overflow:hidden}
.setting-group__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;padding:14px 18px;margin:0;background:rgba(0,0,0,0.025);border-bottom:1px solid rgba(0,0,0,0.06)}
.setting-group__title .pill-gated{margin-left:auto}
.setting{display:flex;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid rgba(0,0,0,0.05)}
.setting:last-child{border-bottom:0}
.setting__main{flex:1;min-width:0}
.setting__label{font-size:13px;font-weight:600;color:#1a1a1a}
.setting__desc{font-size:11.5px;color:#6b7280;margin-top:2px;line-height:1.4}
.setting__control{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.ctl{font:inherit;font-size:12.5px;padding:6px 10px;border:1px solid rgba(0,0,0,0.18);border-radius:8px;background:#fff;color:#1a1a1a}
.ctl--select{min-width:150px}
.ctl--range{accent-color:var(--c-gold,#4F46E5)}
.switch{position:relative;width:40px;height:22px;border-radius:999px;background:#cbd5e1;cursor:pointer;border:0;transition:background .15s}
.switch[aria-checked="true"]{background:var(--c-gold,#4F46E5)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.switch[aria-checked="true"]::after{left:20px}
.pill-gated{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#fef3c7;color:#92400e}
.pill-live{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#dcfce7;color:#166534}
.panel-note{font-size:12px;color:#6b7280;background:rgba(0,0,0,0.03);border-radius:10px;padding:10px 14px;margin-top:4px}

/* ── Guided product tour ─────────────────────────────────────────────────── */
.tour-guide .view2__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tour-start{font-size:15px;font-weight:700;padding:12px 26px;border-radius:12px;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--c-gold,#4F46E5) 60%,transparent);animation:tour-glow 1.8s ease-in-out infinite}
@keyframes tour-glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-gold,#4F46E5) 55%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--c-gold,#4F46E5) 0%,transparent)}}
.feat-tablewrap{overflow-x:auto;border:1px solid rgba(0,0,0,0.08);border-radius:14px;background:#fff;margin-top:18px}
.feat-table{width:100%;border-collapse:collapse;font-size:13px}
.feat-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:700;
  padding:11px 14px;border-bottom:1px solid rgba(0,0,0,0.08);background:rgba(0,0,0,0.02)}
.feat-table td{padding:11px 14px;border-bottom:1px solid rgba(0,0,0,0.05)}
.feat-table tr:last-child td{border-bottom:0}
.feat-table tr:hover td{background:color-mix(in srgb,var(--c-gold,#4F46E5) 6%,transparent)}
.feat-num{color:#9ca3af;font-variant-numeric:tabular-nums;width:34px}
.feat-name a{font-weight:650;color:var(--c-ink,#111);text-decoration:none}
.feat-name a:hover{color:var(--c-gold,#4F46E5);text-decoration:underline}
.feat-eng{color:#6b7280;font-size:12px}
.feat-pri{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:#eef2ff;color:#3730a3}
.feat-pri--1{background:#dcfce7;color:#166534}
.feat-pri--2{background:#fef9c3;color:#854d0e}
.feat-pri--start{background:#e0e7ff;color:#3730a3}
.tour-guide__note{font-size:12px;color:#6b7280;margin-top:12px}
/* When the tour is running, hide the table; the top bar + tooltip lead. */
body.tour-active .feat-tablewrap,body.tour-active .tour-guide__note{display:none}
body.tour-active .tour-guide .view2__header::after{content:"Tour in progress - follow the highlighted menu on the left, then press Next.";
  display:block;flex-basis:100%;margin-top:10px;font-size:13px;color:#6b7280}

/* Fixed top bar (All features | feature | Next | exit). */
.tour-bar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:14px;
  padding:10px 14px;border-radius:999px;background:#0E1525;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.tour-bar__pos{font-size:11px;opacity:.6;text-transform:uppercase;letter-spacing:.06em}
.tour-bar__name{font-size:14px;font-weight:700;color:#fff;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-bar__all,.tour-bar__next,.tour-bar__exit{appearance:none;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
  padding:7px 14px;border-radius:999px}
.tour-bar__all{background:rgba(255,255,255,.12);color:#dbe4ff}
.tour-bar__next{background:var(--c-gold,#4F46E5);color:#fff}
.tour-bar__exit{background:transparent;color:#9aa6c4;font-size:18px;padding:2px 8px}
.tour-bar__all:hover,.tour-bar__next:hover{filter:brightness(1.1)}

/* Callout tooltip anchored to the lit nav item. */
.tour-tip{position:fixed;z-index:9000;max-width:280px;display:none;padding:13px 15px;border-radius:12px;background:#0E1525;color:#fff;
  box-shadow:0 12px 40px rgba(0,0,0,.4)}
.tour-tip b{display:block;font-size:13.5px;margin-bottom:4px}
.tour-tip span{display:block;font-size:12px;line-height:1.45;color:#c7d0e8}
.tour-tip__hint{margin-top:8px;font-size:11px !important;color:var(--c-gold-2,#9db4ff) !important;font-weight:600}
.tour-tip__arrow{position:absolute;left:-7px;top:18px;width:14px;height:14px;background:#0E1525;transform:rotate(45deg)}

/* The lit nav item. */
.nav2__subitem.tour-pulse{background:color-mix(in srgb,var(--c-gold,#4F46E5) 18%,transparent) !important;
  border-left-color:var(--c-gold,#4F46E5) !important;color:var(--c-brand,#111) !important;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--c-gold,#4F46E5) 55%,transparent);animation:tour-pulse 1.6s ease-in-out infinite}
@keyframes tour-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-gold,#4F46E5) 50%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--c-gold,#4F46E5) 0%,transparent)}}